/* babyvedicname — warm-peach ground, pale-green panels.
   Ported from design-v5/common.py (the signed-off redesign): the PAGE is
   peach cream and the BOXES carry the pale green, top-weighted. Getting
   that relationship backwards is the one way to fail this stylesheet.

   THE SURFACE RULE — two levels, only two:
     · a SHELL is a top-level box — green gradient on the peach ground,
       rimmed in white, 22px of air to its neighbour.
     · anything NESTED inside a shell is GLASS — translucent, blurred.
   Never a flat white card with a drawn border: separation comes from
   space, shadow, transparency and gradient, never from a line.

   The glass half of that rule is scoped to `.glassy` (set by the
   {% block body_class %} hook in base.html) so it reaches the result,
   find and deity pages and CANNOT leak onto home, nakṣatra or method.

   DM Mono is retired: every spaced-caps label now sets in Hanken
   Grotesk. The caps come from `text-transform`, never from the source
   strings — no pinned marker changes with it. */

:root{
  /* page: warm peach cream — sampled from the reference screenshot */
  --paper:#FDF8F2; --paper-2:#FBF1E6;
  /* panels: pale green at the top, warming downward */
  --shell-top:#F5F8F1; --shell-mid:#F8F9F3; --shell-bot:#FCFAF5;
  --shell:linear-gradient(176deg,var(--shell-top) 0%,var(--shell-mid) 46%,var(--shell-bot) 100%);
  --card:#FFFDFA; --card-2:#FFFFFF;
  /* ink: bottle green, darkened from the screenshot to clear WCAG AA */
  --ink:#1E3A2C; --ink-2:#3E5A4B; --ink-3:#5A7264; --sage:#55735F;
  --line:rgba(30,58,44,.11); --line-2:rgba(30,58,44,.06);
  --cta:#2A3C30; --cta-2:#3A5240; --on-cta:#F7F4EC;
  /* four card tints */
  --sage-bg:#EFF5ED; --sage-chip:#DFEBDD; --sage-ink:#2F6B49;
  --honey-bg:#FCF6E9; --honey-chip:#F8E7C8; --honey-ink:#8A5B0F;
  --lilac-bg:#F6F2F8; --lilac-chip:#E8E0EF; --lilac-ink:#6E54A0;
  --blush-bg:#FDF0E9; --blush-chip:#F9DDD0; --blush-ink:#A34A28;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-2xl:28px; --r-pill:999px;
  --serif:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,system-ui,'Segoe UI',sans-serif;
  --deva:'Noto Serif Devanagari','Libre Caslon Text',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);
  min-height:100vh;position:relative;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#FDF7F0 0%,var(--paper) 22%,#FDFAF5 100%);
  background-attachment:fixed;
}
:lang(sa),:lang(hi),.deva{font-family:var(--deva)}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--cta-2)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--cta);color:var(--on-cta);
  padding:13px 20px;border-radius:var(--r-md);font-weight:600}
.skip-link:focus{left:16px;top:16px}

/* ---------- decorative marks (partials/_bushes.html) ---------- */
.mark{position:fixed;pointer-events:none;z-index:0;opacity:.75}
.mark-lotus{right:2vw;top:96px;width:180px;max-width:16vw}
.mark-sprig{left:0;bottom:24px;width:150px;max-width:14vw}
.mark svg{width:100%;height:auto;display:block}
.content{position:relative;z-index:2;min-height:60vh}

/* ---------- measure ----------
   `.wrap`/`.narrow` carry the measure; `.stack` carries the 22px
   interval between shells. A shell never sets its own max-width — it
   fills the wrap it is placed in. */
.wrap{max-width:1200px;margin:8px auto 0;padding:0 32px}
.narrow{max-width:1020px;margin:8px auto 0;padding:0 32px}
.stack{display:flex;flex-direction:column;gap:22px}
/* Home only: its five sections are full-width shells and read as one
   undifferentiated column at 22px. Scoped to the `home` body class AND
   to .wrap.stack together, so it reaches exactly the page container and
   nothing else — a nested bare .stack on the same page (the zone-head
   modifier) keeps the base gap, and no other page moves by a pixel.
   The base rule above is deliberately untouched. */
.home .wrap.stack{gap:44px}

/* ══════════════════════════════════════════════════════════════════
   THE SHELL — a top-level box. `.glass` is the class the templates
   already carry on their top-level boxes, so it IS the shell here;
   `.glassy` re-casts the NESTED ones as glass further down.
   ══════════════════════════════════════════════════════════════════ */
.glass{
  background:var(--shell);
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--r-2xl);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 3px rgba(30,58,44,.015),
    0 30px 66px -46px rgba(30,58,44,.34);
}

/* ---------- nav ---------- */
nav.site{position:relative;z-index:10;max-width:1200px;margin:0 auto;padding:0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:24px 32px}
.logo{font-family:var(--serif);font-size:26px;letter-spacing:-.01em;color:var(--ink);
  display:inline-flex;align-items:center;min-height:44px}
/* the brand stacks: the wordmark, and the tagline directly under it, on
   every page. The footer keeps its own centred instance of the same
   line — this one does not replace it. */
/* min-width stays `auto` on purpose: the brand must not be squeezed
   below its own content, or the flex row wraps the tagline onto a
   second line in the 761-830px band (measured — iPad portrait is 768).
   `nowrap` holds it to one line; the wordmark is the wider of the two,
   so neither ever widens the nav. */
.nav-brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.nav-tagline{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.35;
  color:var(--ink-3);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:2px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;color:var(--ink);
  width:46px;height:46px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--card);display:flex;align-items:center;justify-content:center;font-size:19px}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 12px);min-width:230px;z-index:20;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px -34px rgba(30,58,44,.42);
  display:flex;flex-direction:column;padding:10px;
}
.menu-panel a{padding:13px 14px;color:var(--ink);border-radius:var(--r-md);font-weight:500;min-height:44px;display:flex;align-items:center}
.menu-panel a:hover{background:var(--sage-chip)}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.07;letter-spacing:-.02em;color:var(--ink)}
/* long unbroken Devanagari (भूतभव्यभवत्प्रभुः) must WRAP, never clip */
h1,h2,h3{overflow-wrap:anywhere}
h1 .deva{font-weight:600}
h2{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.18;letter-spacing:-.01em}
h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3}
.kicker{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage)}
.sub{font-size:18px;line-height:1.62;color:var(--ink-2);max-width:640px;margin-top:20px}
.note{font-size:14px;line-height:1.6;color:var(--ink-3);margin-top:16px}
/* The `hidden` attribute means hidden, whatever a class says. The /find
   status line (.find-status) is revealed by static/js/find-submit.js
   only while a search is running; a later rule that set `display` on its
   class would otherwise show it on every page load. */
[hidden]{display:none !important}
.via{color:var(--ink-3);font-style:italic}
.plain{font-size:17px;line-height:1.7;color:var(--ink)}
h2.section{font-family:var(--serif);font-weight:400;font-size:33px;color:var(--ink)}

/* the page hero — a shell, so the title never floats on bare ground */
.hero,.page-hero{
  background:var(--shell);border:1px solid rgba(255,255,255,.72);border-radius:var(--r-2xl);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 3px rgba(30,58,44,.015),
             0 30px 66px -46px rgba(30,58,44,.34);
  position:relative;overflow:hidden}
.page-hero{padding:44px 48px 40px}
.page-hero h1{font-size:48px;margin-top:14px}
.page-hero .sub{margin-top:16px}
.hero{padding:56px 48px 44px}
/* No cap on the h1. "Find a name that keeps its promise" sets at 58px and
   needs ~960px, so an 820px box could never hold it on one line — the
   headline wrapped at every desktop width. The .sub KEEPS its 620px
   measure: that cap is a reading-length decision for body copy, and the
   h1 only ever inherited it by proximity. */
.hero h1{margin-top:16px}
.hero .sub{max-width:620px}

/* ---------- inner surfaces: glass inside a shell ---------- */
.panel{
  background:linear-gradient(168deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.36) 100%);
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.74);border-radius:var(--r-xl);
  padding:30px 34px;
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 14px 30px -24px rgba(30,58,44,.24);
}

/* ---------- search (home meaning-lookup box) ---------- */
.search-zone{padding:40px 48px 42px;
  background:var(--shell);border:1px solid rgba(255,255,255,.72);border-radius:var(--r-2xl);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 3px rgba(30,58,44,.015),
             0 30px 66px -46px rgba(30,58,44,.34)}
/* No max-width of its own: the bar fills .search-zone's content box, so
   its right edge lands exactly under the .sub above it — .zone-head is a
   space-between flex, so that paragraph sits flush to the same edge, and
   an 820px bar stopped 220px short of it.
   This is NOT unconstrained: .wrap caps at 1200px with 32px padding and
   .search-zone adds 48px, so the widest this can ever be is 1040px, at
   any viewport. The hero's own measure lives on .hero .sub (620px), not
   on the heading — a reading length for body copy, a different job. */
.search{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 9px 9px 26px;
  box-shadow:0 1px 2px rgba(30,58,44,.04)}
.search svg{flex:none}
.search input{flex:1;border:0;outline:0;background:transparent;min-width:0;min-height:44px;
  font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search input:focus-visible{outline:none}
.search:focus-within{border-color:var(--ink-3)}
button.solid,
.search button{
  flex:none;border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:15.5px;
  background:var(--cta);color:var(--on-cta);padding:15px 34px;border-radius:var(--r-pill);min-height:44px;
}
button.solid:hover,.search button:hover{background:var(--cta-2)}
.turnstile-slot{display:flex;margin-top:14px;min-height:0}
.turnstile-slot .cf-turnstile:empty{display:none}
.scope-line{max-width:760px;margin-top:18px;font-size:14px;line-height:1.65;color:var(--ink-3)}

/* ---------- confirm strip ---------- */
.confirm{margin-top:24px}
.confirm .label{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;list-style:none}
a.chip{
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-height:44px;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:11px 22px;transition:border-color .15s,box-shadow .15s;
}
a.chip .deva{font-size:26px;line-height:1.3;color:var(--ink)}
a.chip .roman{font-size:12.5px;color:var(--ink-3)}
a.chip:hover{border-color:var(--ink-3)}
a.chip.selected{border-color:var(--ink);box-shadow:0 14px 30px -24px rgba(30,58,44,.5)}
a.chip.selected .roman{color:var(--ink);font-weight:600}
a.chip.unresolved{border-style:dashed}
.chip-flag{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.confirm .note{font-style:italic;margin-top:12px}

/* ---------- home: proof cards + explore tiles ---------- */
.cards{padding:40px 48px 44px;
  background:var(--shell);border:1px solid rgba(255,255,255,.72);border-radius:var(--r-2xl);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 3px rgba(30,58,44,.015),
             0 30px 66px -46px rgba(30,58,44,.34);
  display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{
  background:linear-gradient(168deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.36) 100%);
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.74);border-radius:var(--r-xl);padding:30px 32px;
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 14px 30px -24px rgba(30,58,44,.24);
}
.card h2,.card h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink)}
.card p{margin-top:10px;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.card .icon{width:52px;height:52px;border-radius:var(--r-pill);background:var(--sage-chip);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  font-size:19px;font-weight:600;color:var(--sage-ink)}
.card:nth-child(2) .icon{background:var(--honey-chip);color:var(--honey-ink)}
.example{margin-top:18px;padding:16px 18px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.62);border:1px solid var(--line-2)}
.example .tag{float:right;font-size:12px;font-weight:500;color:var(--ink-3);
  background:rgba(255,255,255,.8);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:4px 11px;margin-left:10px}
.example .big{font-family:var(--deva);font-size:23px;color:var(--ink);overflow-wrap:anywhere}
.example .big .arrow{font-family:var(--sans);color:var(--ink-3);font-size:17px;padding:0 7px}
.example .gloss{font-size:14.5px;font-style:italic;color:var(--ink-2);margin-top:7px}

.explore-head{position:relative;z-index:1}
.zone-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap}
.zone-head .sub{max-width:440px;margin-top:0}
/* `stack` is a MODIFIER, opted into by section 3 ("Narrow it down") only.
   The base rule above is shared with "Already have a name in mind?",
   which must keep its two-column head — editing the base rule would move
   both. */
.zone-head.stack{display:block}
.zone-head.stack .sub{max-width:none;margin-top:10px}
.explore{margin-top:38px;position:relative;z-index:1}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:18px}
/* the whole tile IS the link, and the LIFT is its clickability
   affordance — it replaces the chevron chip the redesign first shipped
   with. Reduced motion keeps the shadow change and drops the travel. */
.tile{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:28px 26px 22px;
  border:1px solid var(--line-2);min-height:230px;display:flex;flex-direction:column;
  background:var(--sage-bg);color:var(--ink);cursor:pointer;
  box-shadow:0 10px 26px -22px rgba(30,58,44,.30);
  transition:transform .17s ease,box-shadow .17s ease}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);
  box-shadow:0 22px 44px -26px rgba(30,58,44,.44)}
.tile:active{transform:translateY(-1px);box-shadow:0 8px 20px -18px rgba(30,58,44,.34)}
.tile:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .tile:hover,.tile:focus-visible,.tile:active{transform:none}
}
.tile .glyph{width:66px;height:66px;border-radius:var(--r-pill);display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;
  font-family:var(--deva);font-size:29px;line-height:1;
  background:var(--sage-chip);color:var(--sage-ink)}
.tile .glyph.sans{font-family:var(--sans)}
.tile .t{font-size:18px;font-weight:600;color:var(--ink)}
.tile .tdeva{font-family:var(--deva);font-size:13px;color:var(--ink-3);margin-top:2px;display:block}
.tile .d{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.45}
/* the sprig inherits its tint through `color`, so the SVG carries no
   hand-keyed hex of its own */
.tile .sprig{position:absolute;pointer-events:none;bottom:-10px;right:-14px;color:#8FBBA0}
.t-sage{background:var(--sage-bg)}
.t-sage .glyph{background:var(--sage-chip);color:var(--sage-ink)}
.t-honey{background:var(--honey-bg)}
.t-honey .glyph{background:var(--honey-chip);color:var(--honey-ink)}
.t-honey .sprig{right:auto;left:-16px;transform:scaleX(-1);color:#E5C08C}
.t-lilac{background:var(--lilac-bg)}
.t-lilac .glyph{background:var(--lilac-chip);color:var(--lilac-ink)}
.t-lilac .sprig{color:#B7A8D4}
.t-blush{background:var(--blush-bg)}
.t-blush .glyph{background:var(--blush-chip);color:var(--blush-ink)}
.t-blush .sprig{right:auto;left:-14px;transform:scaleX(-1);color:#EAAF96}

/* ---------- evidence strip ---------- */
.evidence{padding:44px 48px;text-align:center;
  background:var(--shell);border:1px solid rgba(255,255,255,.72);border-radius:var(--r-2xl);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 3px rgba(30,58,44,.015),
             0 30px 66px -46px rgba(30,58,44,.34)}
.evidence .label{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.18;
  letter-spacing:-.01em;color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}
.evidence .line{font-size:16px;font-style:italic;color:var(--ink-2);margin-top:20px}

/* ---------- badges (labels are CI-pinned; only the styling changed) ---------- */
.badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:11px}
.badge{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;
  padding:6px 14px;border-radius:var(--r-pill);border:1px solid transparent}
.badge .append{font-weight:500}
.b-scripture{color:#1B5C38;background:#E4F0E7;border-color:#C2DFCC}
.b-verified{color:#15594A;background:#E0EFEA;border-color:#BCDBD1}
.b-dict{color:#8A6212;background:#FBF0DA;border-color:#EEDCB4}
.b-split{color:#1F5A4D;background:#E3EFEA;border-color:#C0DBD0}
.b-multiple{color:#2C4A3A;background:#EAF1EC;border-color:#CFE0D5}
.b-related{color:#6E4C74;background:#F2EAF3;border-color:#DFCDE2}
.b-hindi{color:#33547C;background:#E7EFF8;border-color:#C7D9EC}
.b-partial{color:#8A5514;background:#FBEEDD;border-color:#EFD6B4}
.b-notfound{color:#4E6659;background:#EDF1EE;border-color:#D3DFD8}
.b-formation{color:#54428A;background:#EEEAF7;border-color:#D7CDEC}
.badge-disclosure{font-size:13.5px;font-style:italic;color:var(--ink-3)}
.sutra-chip{display:inline-block;font-size:12.5px;font-weight:500;color:var(--ink-2);
  border:1px dashed rgba(30,58,44,.32);border-radius:var(--r-pill);padding:5px 13px}
.meta-pill{font-size:12px;font-weight:500;color:var(--ink-3);background:rgba(255,255,255,.75);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:4px 11px}
.mchip{display:inline-block;font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--sage-chip);border-radius:var(--r-pill);padding:4px 11px}

/* ---------- result page ---------- */
/* the result page measures itself: the SSE stream swaps result_body
   straight into <main>, so it can never rely on a .wrap ancestor */
.result{max-width:1020px;margin:8px auto 0;padding:0 32px 10px;
  display:flex;flex-direction:column;gap:22px}
.result-header{text-align:center;padding:44px 40px}
.result-header .deva-big{font-family:var(--deva);font-weight:600;font-size:64px;line-height:1.24;
  display:block;color:var(--ink);overflow-wrap:anywhere;letter-spacing:0}
.result-header .iast{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-2);
  margin-top:4px;display:block;overflow-wrap:anywhere}
.result-header .meta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px;
  font-size:12px;font-weight:500;color:var(--ink-3)}
.result-header .meta span{background:rgba(255,255,255,.75);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:4px 11px}
.verdict{font-family:var(--serif);font-size:25px;line-height:1.4;color:var(--ink)}
.verdict-lead{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin-bottom:10px}
.block{padding:30px 34px}
.block>h2,.block>h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;margin-bottom:14px}
.block .label{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.block-main{text-align:center}
/* §16: the path heading sits INSIDE the box and reads left, against the
   box's own centring */
.block-main>.path-heading{text-align:left;margin-bottom:20px}
.block-main .badge-row{justify-content:center;margin-top:16px}
.block-why h2{font-size:25px}
.block-why .mtype{margin-right:8px;white-space:nowrap}
.divine-line{margin-top:12px;font-size:15px;color:var(--ink-2)}
.divine-line:first-of-type{margin-top:16px;color:var(--ink);font-weight:600}
.scope-note{font-size:14.5px;line-height:1.65;color:var(--ink-2);font-style:italic}
.conflict-note{font-size:15px;line-height:1.6;color:#8A5514;background:#FBEEDD;
  border:1px solid #EFD6B4;border-radius:var(--r-md);padding:13px 18px}
.conflict-inline{margin-bottom:14px}
.nearest{margin-top:10px;font-size:16px;line-height:1.7}
.nearest .label{display:block;margin-bottom:4px}
.nearest-chip{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--ink-2);
  border:1px dashed rgba(30,58,44,.32);border-radius:var(--r-pill);padding:9px 14px;min-height:44px}
.nearest-chip:hover{background:rgba(255,255,255,.7)}
.src-attrib{font-size:13px;color:var(--ink-3);font-style:italic}

/* summary chooser (§16) */
.path-chooser{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px}
.path-card{border-radius:var(--r-xl);padding:22px 24px;text-align:left}
.path-label{font-family:var(--serif);font-size:21px;color:var(--ink);
  display:inline-flex;align-items:center;min-height:44px}
.path-label:hover{text-decoration:underline;text-underline-offset:3px}
.path-line{font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.path-heading{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2}
.path-section{display:flex;flex-direction:column;gap:16px;scroll-margin-top:24px}
.result .path-card .badge-row{justify-content:flex-start}

/* citations, gloss pairs, lists */
.cite{border-left:3px solid var(--sage-chip);background:rgba(247,248,243,.9);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 16px;margin-top:11px}
.cite .src{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.cite p{margin-top:5px;font-size:15px;color:var(--ink)}
.gloss-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.gloss-box{background:rgba(247,248,243,.9);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:14px 16px}
.gloss-box .which{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.gloss-box p{font-size:14.5px;color:var(--ink-2)}
.related-list,.divine-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.related-list li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.related-list .deva{font-size:20px}
.divine-list li{border-left:3px solid var(--sage-chip);padding-left:14px}
.divine-list .where{font-size:13.5px;color:var(--ink-3)}

/* folds */
details.fold>summary{cursor:pointer;padding:22px 34px;font-family:var(--serif);font-size:20px;
  color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'+';font-size:19px;color:var(--ink-3)}
details.fold[open]>summary::after{content:'–'}
details.fold>.fold-body{padding:0 34px 28px}

/* derivation trail */
.trail{list-style:none;position:relative;padding-left:22px;margin-top:10px}
.trail::before{content:'';position:absolute;left:5px;top:9px;bottom:9px;width:1px;background:var(--sage-chip)}
.trail li{position:relative;padding:6px 0 6px 8px;font-size:14.5px;display:flex;gap:12px;
  align-items:baseline;flex-wrap:wrap}
.trail li::before{content:'';position:absolute;left:-21px;top:14px;width:7px;height:7px;
  border-radius:50%;background:var(--sage-chip)}
.trail .code{font-size:12.5px;font-weight:500;color:var(--ink-3);min-width:132px}
.trail .form{font-family:var(--deva);font-size:17px}

/* ---------- progress stream ---------- */
.progress-zone{max-width:820px;margin:22px auto 0;padding:30px 34px}
.progress-zone .label{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.progress-lines{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.progress-lines li{font-size:15px;color:var(--ink-2);padding-left:22px;position:relative}
.progress-lines li::before{content:'·';position:absolute;left:6px;color:var(--ink)}
.progress-lines li:last-child{color:var(--ink)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--sage-chip);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.progress-note{font-size:13.5px;font-style:italic;color:var(--ink-3);margin-top:16px}

/* ---------- forms (find / derive) ---------- */
.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.field label,.field legend{display:block;font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.field input[type=text],.field select{
  width:100%;height:52px;font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-md);padding:0 16px;
}
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233E5A4B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.field input::placeholder{color:var(--ink-3)}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-top:26px}
.field-row fieldset{border:none;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
/* "coming soon" affordance — a statement, never a disabled control */
.soonpill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  color:var(--ink-3);background:rgba(255,255,255,.7);border:1px dashed var(--line);
  border-radius:var(--r-pill);padding:11px 16px;min-height:44px}
.htmx-indicator{opacity:0}
.htmx-indicator.htmx-request,.htmx-request .htmx-indicator{opacity:1}

/* ---------- find / deity results ---------- */
.results-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.name-card{border-radius:var(--r-xl);padding:22px 24px;display:flex;flex-direction:column;
  gap:8px;min-height:196px}
.name-card .num{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.name-card .deva{font-family:var(--deva);font-size:30px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.name-card .iast{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}
.name-card .gloss{font-size:14px;line-height:1.5;color:var(--ink-2)}
.name-card .meta-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.name-card .deva a{display:inline-block;padding:3px 0;min-height:44px}
.name-card .deva a:hover{text-decoration:underline;text-underline-offset:4px}
.empty-box{padding:24px 28px;margin-top:16px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.62);border:1px solid var(--line-2)}
.empty-box ul{margin:10px 0 0;padding-left:22px}
.pagination{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:32px}
.pagination a,.pagination span.pg{
  font-size:13.5px;font-weight:500;color:var(--ink-2);padding:11px 18px;min-height:44px;
  display:inline-flex;align-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,.8);border:1px solid var(--line-2);
}
.pagination .disabled{opacity:.42}

/* ---------- nakṣatra / rāśi ---------- */
.jyo-layout{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
.jyo-side{display:flex;flex-direction:column;gap:22px}
.attr-card{padding:26px 30px}
.attr-card h2{font-size:22px;margin-bottom:6px}
.attr-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin-top:12px}
.attr-card dt{color:var(--ink-3);font-size:14px}
.attr-card dd{text-align:right;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.pada-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pada{border:1px solid var(--line-2);border-radius:var(--r-md);background:rgba(255,255,255,.62);
  padding:14px 12px;text-align:center;display:block;min-height:44px}
.pada .p-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pada .p-syll{font-family:var(--deva);font-size:26px;display:block;margin-top:2px;overflow-wrap:anywhere}
.pada .p-count{font-size:11.5px;color:var(--ink-3)}
.pada:hover{border-color:var(--ink-3)}
.critique{padding:30px 34px}
.critique .kicker{color:var(--honey-ink)}
.critique h2{font-size:28px;margin-top:8px}
.critique p{margin-top:12px;color:var(--ink-2);font-size:15.5px;line-height:1.7}
.critique blockquote{border-left:3px solid var(--sage-chip);padding:6px 0 6px 18px;margin-top:14px;
  font-style:italic;font-size:15.5px}
.jyo-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* index tiles carry a whole WORD as their glyph, not a single letter, so
   they set it as text rather than inside the 66px medallion */
.jyo-index .tile{min-height:0;padding:24px 24px 20px}
.jyo-index .tile .glyph{width:auto;height:auto;background:none;border-radius:0;
  margin-bottom:12px;font-size:26px;line-height:1.35;color:var(--ink);
  justify-content:flex-start;overflow-wrap:anywhere}

/* ---------- index shells: /deity and /nakshatra ----------
   An index grid gets a shell of its own, so the page reads in the same
   rhythm as the detail page it opens. That makes its cards NESTED, and
   the surface rule makes a nested box glass — the tint wash at the head,
   the white rim, no drawn line. Deliberately scoped to `.index-shell`,
   not to `.jyo-index`: a grid still sitting on bare ground (/grammar)
   is a top-level box and keeps its own treatment. */
.index-shell{padding:34px 44px 40px}
.index-shell>h2.section{margin-bottom:20px}
.index-shell .tile{
  background:linear-gradient(168deg,
    rgba(223,235,221,.62) 0%,
    rgba(255,255,255,.52) 40%,
    rgba(255,255,255,.32) 100%);
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 14px 30px -24px rgba(30,58,44,.24);
}
.index-shell .tile:hover,.index-shell .tile:focus-visible{
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 26px 50px -28px rgba(30,58,44,.40);
}
.index-shell .tile:active{
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 12px 26px -22px rgba(30,58,44,.30);
}

/* ---------- prose pages ---------- */
.prose{padding:38px 44px}
.prose h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:28px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:12px;color:var(--ink-2);line-height:1.72}
.prose ul,.prose ol{margin:12px 0 0 22px;color:var(--ink-2);line-height:1.72}
.prose li{margin-top:6px}
.prose strong{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose code{font-family:var(--sans);font-weight:600;background:rgba(255,255,255,.7);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:2px 7px}
.prose .deva{font-size:1.15em}

/* ---------- breadcrumb trail (deity hubs — F-1d CHANGE 7) ----------
   The footer's small type and muted colour (the .attr values): no new
   colour, no new font. An inline list; the › between crumbs is drawn
   here, so the markup holds the three names and nothing else. */
.crumbs{font-size:12.5px;line-height:1.7;color:var(--ink-3);padding:0 6px}
.crumbs ol{list-style:none;margin:0;padding:0}
.crumbs li{display:inline}
.crumbs li + li::before{content:"›";padding:0 8px}
.crumbs a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
.tagline{text-align:center;font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--ink-3);padding:26px 0 8px}
footer{position:relative;z-index:2;margin-top:26px}
/* "Free to use · No sign-up · No ads", directly under the tagline: the
   footer's own small type and colour (the .attr values), centred like
   the tagline. Only the spacing is new. */
.foot-free{text-align:center;font-size:12.5px;line-height:1.7;color:var(--ink-3);padding:0 18px 16px}
.foot{padding:0 32px 36px}
.foot-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:flex-start;gap:40px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
.foot .logo{font-size:21px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:var(--ink-2);display:inline-block;padding:11px 0;min-height:44px}
.foot-links a:hover{text-decoration:underline;text-underline-offset:3px}
.foot .attr{font-size:12.5px;line-height:1.7;color:var(--ink-3);max-width:430px;text-align:right}

/* ══════════════════════════════════════════════════════════════════
   .glassy — continuity carried by light, not by lines.
   Scoped by {% block body_class %} so it reaches the result, find and
   deity pages ONLY: home, nakṣatra and method keep their own rhythm.
   A top-level box stays a shell; anything nested inside one becomes
   glass — translucent, blurred, never a flat white card with a border.
   ══════════════════════════════════════════════════════════════════ */
.glassy .path-card,
.glassy .name-card,
.glassy .panel{
  background:linear-gradient(168deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.36) 100%);
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.74);
  border-radius:var(--r-xl);
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 14px 30px -24px rgba(30,58,44,.24);
}
/* the old 3px sage rule becomes a wash of tint at the head of the card */
.glassy .path-card,
.glassy .name-card{
  background:linear-gradient(168deg,
    rgba(223,235,221,.62) 0%,
    rgba(255,255,255,.52) 40%,
    rgba(255,255,255,.32) 100%);
}
.glassy .cite{
  background:rgba(255,255,255,.44);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-left:2px solid rgba(143,187,160,.55);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.glassy .gloss-box,
.glassy .empty-box,
.glassy .example,
.glassy .pada{
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.66);
}
.glassy .meta-pill,
.glassy .result-header .meta span{background:rgba(255,255,255,.58);border-color:rgba(255,255,255,.72)}
/* background-COLOR, not the shorthand: the shorthand would reset the
   select's chevron background-image to none */
.glassy .field input[type=text],
.glassy .field select,
.glassy .search{background-color:rgba(255,255,255,.66);border-color:rgba(255,255,255,.82)}
.glassy .soonpill{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.72)}
.glassy .trail::before{background:rgba(143,187,160,.5)}
.glassy .trail li::before{background:rgba(143,187,160,.75)}

/* ---------- mobile ---------- */
@media (max-width:1080px){
  .nav-tagline{font-size:12px}
  .field-grid{grid-template-columns:1fr 1fr}
  .results-grid{grid-template-columns:1fr 1fr}
  .jyo-layout{grid-template-columns:1fr}
  .jyo-index{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  h1{font-size:46px}
}
@media (max-width:760px){
  .wrap,.narrow,.result{padding-left:18px;padding-right:18px}
  .nav-inner{padding:16px 18px;gap:14px}
  .nav-links{display:none}
  .menu{display:block}
  .logo{font-size:22px}
  .nav-tagline{font-size:12.5px}
  .hero,.page-hero,.search-zone,.cards,.evidence{padding-left:24px;padding-right:24px}
  .hero{padding-top:36px;padding-bottom:30px}
  .page-hero{padding-top:32px;padding-bottom:28px}
  .search-zone,.cards,.evidence{padding-top:30px;padding-bottom:32px}
  h1,.page-hero h1{font-size:34px;line-height:1.15}
  h2,h2.section,.evidence .label{font-size:26px}
  .sub{font-size:16px}
  .search{padding:8px 8px 8px 18px}
  .search input{font-size:16px}
  .search button{padding:14px 22px}
  .cards{grid-template-columns:1fr}
  /* two-up on phones. At 390px the grid gives each tile ~167px, so the
     tile's desktop padding (26px a side) would leave only 115px of text
     column — the padding and glyph shrink with it. */
  .tiles{grid-template-columns:1fr 1fr;gap:14px}
  .tile{min-height:0;padding:22px 18px 18px}
  .tile .glyph{width:54px;height:54px;font-size:24px;margin-bottom:14px}
  .tile .t{font-size:17px}
  .results-grid,.field-grid,.jyo-index,.gloss-pair,.path-chooser,.pada-grid{grid-template-columns:1fr}
  .block,.panel,.progress-zone,.prose,.critique,.attr-card,.index-shell{padding:24px 22px}
  .block>h2,.block>h3,.path-heading{font-size:22px}
  details.fold>summary{padding:18px 22px;font-size:18px}
  details.fold>.fold-body{padding:0 22px 22px}
  .result-header{padding:30px 22px}
  .result-header .deva-big{font-size:40px}
  .verdict{font-size:21px}
  .trail .code{min-width:0}
  .foot{padding:0 18px 32px}
  .foot-inner{flex-direction:column;gap:22px}
  .foot .attr{text-align:left;max-width:none}
  .mark-lotus,.mark-sprig{display:none}
}

/* Two-up leaves ~155px of text column at 390px, where a line like
   "Roman or Devanagari — “laksh” finds Lakṣmī" breaks to five ragged
   lines and the four tiles stop scanning as a set. The description is
   DROPPED rather than reworded: the glyph, the English label and the
   Devanagari label already say what each tile does, and rewriting the
   copy per breakpoint would mean two sources of truth for one string.
   Above 480px there is room, so the descriptions stay. */
@media (max-width:480px){
  .tile .d{display:none}
  .tile{padding:20px 16px 18px}
}