/* ===================================================================================
   FSSB — the stylesheet.

   THIS FILE IS THE SINGLE SOURCE OF TRUTH for every surface on the site.

   It replaces eleven separate CSS sources: the <style> block that used to be scraped by
   regex out of docs/spec/fssb-joshua-1-1-to-9.html (twice, independently, by render.py
   and landing.py), the five page-specific CSS strings in the generators, and the five
   stylesheets that search.js / enhance.js / theme.js / markup.js / parallel.js used to
   inject at runtime. That arrangement inlined the same ~17 KB into all 778 pages and let
   the same visual concept drift apart in five places.

   Hand-authored. site/ is gitignored, so this is force-added like site/fonts/.

   Layout
     1. Tokens          2. Base + reset      3. Layout + measure
     4. Masthead        5. Unit page         6. Original languages
     7. Breadcrumbs     8. Landing           9. About
    10. Plans          11. Concordance      12. Flat index
    13. Search overlay 14. Enhance          15. Theme picker
    16. Markup         17. Parallel         18. Responsive
   =================================================================================== */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────────────────
   Every surface themes off these tokens. Two axes: data-theme picks the palette,
   data-accent retints the primary (--ox). Semantic roles hold across all themes:
     --ox    = primary accent · human source (✦) · flagged links
     --slate = machine synthesis (⚙)        --green = verified / confirmed
     --gold  = pull-quotes & labels          --grain = paper noise opacity (0 = flat)

   :root carries the full default set. Previously the tokens existed ONLY on
   [data-theme="…"], so any path that lost the attribute rendered a page with no
   tokens at all. :root is the floor; the attribute selectors override it.            */

:root,
[data-theme="dark"] {                 /* modern slate-dark (default) */
  --bg-a:#17191e; --bg-b:#121419; --bg-c:#0d0f13;
  --ink:#e9eaee; --ink-soft:#aeb2bd; --ink-faint:#787c87;
  --rule:#2b2e37; --rule-soft:#202229;
  --panel:rgba(255,255,255,.028);
  --ox:#f06a60; --ox-soft:#d8554b; --ox-tint:rgba(240,106,96,.13);
  --slate:#6fb0e6; --slate-soft:#5793c8; --slate-tint:rgba(111,176,230,.11); --slate-bd:#2f465a;
  --gold:#dcb45f; --green:#5fcf8f; --green-bd:#2f5a44;
  --grain:0;
  --scrim:rgba(6,7,10,.62);
  --shadow-lg:0 22px 60px rgba(0,0,0,.45);
}
[data-theme="light"] {                /* modern clean paper */
  --bg-a:#ffffff; --bg-b:#fbfbfc; --bg-c:#f3f4f6;
  --ink:#1b1d22; --ink-soft:#51545d; --ink-faint:#8a8e98;
  --rule:#e6e7ec; --rule-soft:#f1f2f5;
  --panel:rgba(18,20,28,.022);
  --ox:#e0483c; --ox-soft:#c23b30; --ox-tint:rgba(224,72,60,.075);
  --slate:#2f6fb0; --slate-soft:#3f7cba; --slate-tint:rgba(47,111,176,.07); --slate-bd:#ccd9e6;
  --gold:#9a7521; --green:#1f9d57; --green-bd:#bfe2cc;
  --grain:0;
  --scrim:rgba(28,30,38,.42);
  --shadow-lg:0 22px 60px rgba(30,32,40,.16);
}
[data-theme="sepia"] {                /* warm reading mode */
  --bg-a:#f8f1e3; --bg-b:#f2e9d6; --bg-c:#ebe0c8;
  --ink:#3a3327; --ink-soft:#5f5645; --ink-faint:#938671;
  --rule:#ddd0b6; --rule-soft:#e9deca;
  --panel:rgba(120,90,40,.045);
  --ox:#bc4a3a; --ox-soft:#a23f31; --ox-tint:rgba(188,74,58,.09);
  --slate:#3f6b86; --slate-soft:#557e96; --slate-tint:rgba(63,107,134,.08); --slate-bd:#c7d2d1;
  --gold:#9c7a2e; --green:#5a7d4a; --green-bd:#c2d2b0;
  --grain:.02;
  --scrim:rgba(70,56,32,.45);
  --shadow-lg:0 22px 60px rgba(90,72,40,.22);
}
[data-theme="midnight"] {             /* OLED true-black */
  --bg-a:#0a0a0c; --bg-b:#050506; --bg-c:#000000;
  --ink:#eceef2; --ink-soft:#a9adb8; --ink-faint:#6f737e;
  --rule:#23252b; --rule-soft:#16171c;
  --panel:rgba(255,255,255,.022);
  --ox:#ff6f64; --ox-soft:#e2564c; --ox-tint:rgba(255,111,100,.13);
  --slate:#74b6ee; --slate-soft:#5b99cf; --slate-tint:rgba(116,182,238,.10); --slate-bd:#2b4258;
  --gold:#e2ba63; --green:#62d695; --green-bd:#2c5a42;
  --grain:0;
  --scrim:rgba(0,0,0,.7);
  --shadow-lg:0 22px 60px rgba(0,0,0,.6);
}

/* accent — overrides only the --ox family, on top of any theme */
[data-accent="indigo"]  {--ox:#7c74f0; --ox-soft:#655cdb; --ox-tint:rgba(124,116,240,.13);}
[data-accent="violet"]  {--ox:#b06ee8; --ox-soft:#9655d4; --ox-tint:rgba(176,110,232,.13);}
[data-accent="emerald"] {--ox:#2ec27e; --ox-soft:#25a86c; --ox-tint:rgba(46,194,126,.13);}
[data-accent="amber"]   {--ox:#e0a13a; --ox-soft:#c98a28; --ox-tint:rgba(224,161,58,.14);}
[data-accent="rose"]    {--ox:#ec5a8d; --ox-soft:#d44a7b; --ox-tint:rgba(236,90,141,.13);}
[data-accent="teal"]    {--ox:#2bb6b0; --ox-soft:#1f9a95; --ox-tint:rgba(43,182,176,.13);}

/* highlight washes — derived from the palette so they retheme with it. These used to be
   hardcoded rgba in markup.js, which meant the same dark-mode washes sat over a white
   page in light and sepia. */
:root {
  --hl-gold:   color-mix(in srgb, var(--gold)  30%, transparent);
  --hl-green:  color-mix(in srgb, var(--green) 28%, transparent);
  --hl-blue:   color-mix(in srgb, var(--slate) 28%, transparent);
  --hl-rose:   color-mix(in srgb, var(--ox)    26%, transparent);
  --hl-violet: color-mix(in srgb, #b06ee8      28%, transparent);
  /* the reading column; page classes below override it */
  --measure:800px;
  /* strip reserved at the top right for the fixed cog + share controls */
  --controls-reserve:7.2rem;
}

/* ── 2. BASE ────────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box;}

/* html carries a real background-color. The page gradient lives on body, and body's
   background shorthand resets background-color to transparent, which left the browser's
   base canvas white: a white flash on fast scroll and white rubber-banding on iOS
   overscroll inside the offline app, in every dark theme. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  font-size:calc(100% * var(--fs,1));
  background-color:var(--bg-c);
}
body{
  margin:0;
  background:radial-gradient(125% 70% at 50% -5%, var(--bg-a) 0%, var(--bg-b) 45%, var(--bg-c) 100%) fixed;
  color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:1.1875rem; line-height:1.64;
  padding:0 0 6rem;
  transition:background .4s,color .4s;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* One visible focus indicator for the whole site. There was previously no :focus rule
   anywhere, against nine outline:none declarations. */
:focus-visible{
  outline:2px solid var(--ox);
  outline-offset:2px;
  border-radius:3px;
}

/* Skip link — the home page is 3,148 rows deep; a keyboard user needs a way past it. */
.skip-link{
  position:absolute; left:.6rem; top:-4rem; z-index:300;
  display:inline-flex; align-items:center; min-height:44px; padding:0 1rem;
  background:var(--bg-b); color:var(--ox); border:1px solid var(--ox); border-radius:8px;
  font-family:"EB Garamond",serif; font-size:.9rem; text-decoration:none;
  transition:top .18s;
}
.skip-link:focus{top:.6rem;}

/* ── 3. LAYOUT ──────────────────────────────────────────────────────────────────── */

.wrap{position:relative; z-index:1; max-width:var(--measure); margin:0 auto; padding:0 1.3rem;}
main.wrap{display:block;}

/* Per-page reading measure. These used to be three competing `.wrap` overrides
   (800 / 820 / 860) plus a dead `.about-wrap:780px` and a `.canon-wrap:880px` that its
   parent silently clipped to ~758px. */
.page-home   {--measure:1080px;}
.page-plans  {--measure:880px;}
.page-strongs{--measure:880px;}

/* ── 4. MASTHEAD ────────────────────────────────────────────────────────────────── */

.masthead{padding:3.2rem 0 1.1rem; text-align:center; animation:rise .8s ease both;}
.kicker{font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .9rem;}
.kicker b{color:var(--ox); font-weight:600;}
.ref{font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(2.4rem,8vw,3.7rem); line-height:.96; margin:0;}
.ref .bk{display:block; font-size:.32em; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5rem; font-family:"EB Garamond",serif;}
.subt{font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink-soft); font-size:1.25rem; margin:.7rem 0 0;}
.ornament{display:flex; align-items:center; gap:1rem; justify-content:center; margin:1.3rem 0 .2rem; color:var(--ox);}
.ornament::before,.ornament::after{content:""; height:1px; width:90px; background:linear-gradient(90deg,transparent,var(--rule));}
.ornament::after{background:linear-gradient(90deg,var(--rule),transparent);}

/* ── 5. UNIT PAGE ───────────────────────────────────────────────────────────────── */

.warning{margin:1.5rem 0 1.1rem; border:1px solid var(--rule); background:var(--panel); border-radius:4px; padding:.95rem 1.15rem;
  font-size:.86rem; line-height:1.56; color:var(--ink-soft); display:flex; gap:.85rem; align-items:flex-start; animation:rise .8s .05s ease both;}
.warning .mk{font-size:1.15rem; color:var(--slate); line-height:1; margin-top:.1rem;}
.warning b{color:var(--ink); font-weight:600;}
.warning .vt{color:var(--ox); font-style:italic;}

.legend{display:flex; flex-wrap:wrap; gap:1.3rem; justify-content:center; font-size:.74rem; letter-spacing:.04em; color:var(--ink-faint); margin:.2rem 0 1.8rem; animation:rise .8s .1s ease both;}
.legend .item{display:flex; align-items:center; gap:.45rem;}
.legend .src .gl{color:var(--ox);}
.legend .ai .gl{color:var(--slate);}
.legend .gl{font-size:.95rem;}

.unit-intro{font-size:.98rem; color:var(--ink-soft); line-height:1.66; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1.3rem 0; margin:0 0 1.5rem; animation:rise .9s .12s ease both;}
.unit-intro em{color:var(--ink); font-style:italic;}

.vnav{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 0 2rem; animation:rise .9s .14s ease both;}
.vnav a{font-family:"Cormorant Garamond",serif; font-size:1rem; text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:50%; width:2.75rem; height:2.75rem; min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center; transition:all .2s;}
.vnav a:hover{border-color:var(--ox); color:var(--ox); background:var(--ox-tint);}

/* per-verse unit */
.verse-unit{border:1px solid var(--rule); border-radius:6px; margin:0 0 1.3rem; overflow:hidden; background:var(--panel); animation:rise .9s ease both;}
.verse-unit>summary{list-style:none; cursor:pointer; padding:1.2rem 1.3rem; display:flex; align-items:baseline; gap:.9rem; user-select:none;}
.verse-unit>summary::-webkit-details-marker{display:none;}
.verse-unit>summary .vn{font-family:"Cormorant Garamond",serif; font-size:1.7rem; font-weight:600; color:var(--ox); min-width:2.2rem; line-height:1;}
.verse-unit>summary .vpre{font-family:"Cormorant Garamond",serif; font-size:1.18rem; color:var(--ink); flex:1; line-height:1.4; font-style:italic;}
.verse-unit>summary .chev{color:var(--ink-faint); font-size:1.3rem; transition:transform .3s; line-height:1;}
.verse-unit[open]>summary .chev{transform:rotate(45deg);}
.verse-unit[open]>summary{border-bottom:1px solid var(--rule-soft);}
.vbody{padding:.4rem 1.3rem 1.6rem;}

.verse-en{font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(1.45rem,4vw,1.9rem); line-height:1.4; color:var(--ink); margin:1.1rem 0 .4rem;}
.verse-en .vmark{color:var(--ox); font-size:.7em; vertical-align:.25em; margin-right:.25rem;}
.trans-note{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:.1rem 0 1.5rem;}

.literal{margin:1.5rem 0 0; padding-top:1.3rem; border-top:1px solid var(--rule-soft);}
.ll-label{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 .5rem;}
.ll-text{font-family:"Cormorant Garamond",serif; font-size:clamp(1.1rem,3.2vw,1.35rem); font-style:italic; color:var(--ink); line-height:1.5; margin:0 0 1.2rem;}
.ll-text b{font-style:normal; font-weight:500; color:var(--ox);}
.diverge{background:var(--ox-tint); border:1px solid var(--ox-soft); border-radius:5px; padding:.9rem 1.1rem;}
.dv-label{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ox); margin:0 0 .65rem; font-weight:600;}
.diverge ul{margin:0; padding-left:1.1rem;}
.diverge li{font-size:.9rem; line-height:1.55; color:var(--ink-soft); margin:.4rem 0;}
.diverge .hw{font-family:"Frank Ruhl Libre",serif; font-size:1.05rem; color:var(--ink);}
.diverge em{color:var(--ink); font-style:italic;}

/* nested layers within a verse */
.sub{border-top:1px solid var(--rule-soft); margin-top:1.4rem;}
.sub>summary{list-style:none; cursor:pointer; padding:1rem .1rem .6rem; display:flex; align-items:baseline; gap:.7rem; user-select:none;}
.sub>summary::-webkit-details-marker{display:none;}
.sub>summary .st{font-family:"Cormorant Garamond",serif; font-size:1.3rem; font-weight:500; color:var(--ink); flex:1;}
.sub[data-kind="ai"]>summary .st{color:var(--slate);}
.sub>summary .sm{font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.sub>summary .chev{color:var(--ink-faint); font-size:1.1rem; transition:transform .3s;}
.sub[open]>summary .chev{transform:rotate(45deg);}
.sbody{padding:.3rem .1rem 1rem;}

/* word rows */
.wrow{border-top:1px dotted var(--rule); padding:.8rem 0;}
.wrow:first-child{border-top:none;}
.wrow.flash{background:var(--ox-tint); border-radius:4px;}
.wtop{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .85rem;}
.wtop .wh{font-family:"Frank Ruhl Libre",serif; font-size:1.45rem; direction:rtl; color:var(--ink); min-width:2.3rem; text-align:center;}
.wtop .wtl{font-style:italic; color:var(--ox); font-size:.98rem;}
.wtop .wlit{color:var(--ink); font-size:.96rem;}
.wtop .wstr{font-size:.66rem; letter-spacing:.07em; color:var(--ink-faint); margin-left:auto; text-decoration:none; transition:color .2s;}
/* The Strong's link is a standalone control, not a link inside a sentence, so it needs a
   real 44px target. Expanding it visually would add ~20px to every one of the 21 word
   rows, so the hit area is widened with a pseudo-element instead: the type stays small,
   the tappable region does not. Row spacing is far greater than the overshoot, so
   neighbouring rows cannot steal the tap. */
a.wstr{position:relative;}
a.wstr::after{content:""; position:absolute; inset:-14px -10px;}
a.wstr:hover,a.wstr:focus-visible{color:var(--ox);}

.wparse{display:flex; flex-wrap:wrap; gap:.35rem .45rem; margin:.5rem 0 0;}
.tag{font-size:.66rem; letter-spacing:.03em; padding:.1rem .45rem; border:1px solid var(--rule); border-radius:18px; color:var(--ink-soft); background:var(--panel); white-space:nowrap;}
/* The root chip carries a full lexical gloss, not a short morphology label. nowrap made
   it run off the right edge and clip the text outright. It wraps; the short parse chips
   beside it keep nowrap so they never break mid-label. */
.tag.root{color:var(--ox); border-color:var(--ox-soft); white-space:normal; max-width:100%; border-radius:12px; line-height:1.45;}
.wnote{margin:.55rem 0 0; color:var(--ink-soft); font-size:.94rem; line-height:1.6;}
.wnote em{color:var(--ink); font-style:italic;}

/* voices */
.voice{margin:1.1rem 0; padding:0 0 0 1.1rem; border-left:2px solid var(--ox);}
.voice .byline{display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .7rem; margin-bottom:.45rem;}
.voice .src-mark{color:var(--ox); font-size:.85rem;}
.voice .who{font-family:"Cormorant Garamond",serif; font-size:1.12rem; font-weight:600; color:var(--ink);}
.voice .work{font-style:italic; color:var(--ink-faint); font-size:.82rem;}
.voice .yr{font-size:.7rem; letter-spacing:.05em; color:var(--ink-faint); background:var(--ox-tint); padding:.04rem .5rem; border-radius:18px;}
.voice blockquote{margin:0; font-size:.99rem; line-height:1.6; color:var(--ink);}
.voice .ed{display:block; margin-top:.45rem; font-size:.8rem; color:var(--ink-faint); font-style:italic;}
.voice .src-link{font-size:.7rem; margin-top:.3rem;}
.voice .src-link a{color:var(--ink-faint); display:inline-flex; align-items:center; min-height:44px;}
.voice .src-link a:hover{color:var(--ox);}

/* unit-level layers */
.ulayer{border-bottom:1px solid var(--rule); animation:rise .9s ease both; margin-top:.2rem;}
.ulayer>summary{list-style:none; cursor:pointer; padding:1.3rem .2rem; display:flex; align-items:baseline; gap:.8rem; user-select:none;}
.ulayer>summary::-webkit-details-marker{display:none;}
.ulayer>summary .un{font-family:"Cormorant Garamond",serif; color:var(--ox-soft); font-size:1.05rem; min-width:1.6rem;}
.ulayer>summary .ut{font-family:"Cormorant Garamond",serif; font-size:1.6rem; font-weight:500; color:var(--ink); flex:1; margin:0;}
.ulayer[data-kind="ai"]>summary .ut{color:var(--slate);}
.ulayer[data-kind="ai"]>summary .un{color:var(--slate-soft);}
.ulayer>summary .um{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.ulayer>summary .chev{color:var(--ink-faint); font-size:1.2rem; transition:transform .3s;}
.ulayer[open]>summary .chev{transform:rotate(45deg);}
.ubody{padding:.2rem .2rem 2rem;}

.grand{background:var(--panel); border:1px solid var(--rule); border-radius:5px; padding:1.5rem 1.4rem;}
.gflag{display:flex; gap:.6rem; align-items:center; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin:0 0 1.3rem;}
.gflag .dot,.ai-flag .dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--slate);}
.mv{margin:0 0 1.5rem;}
.mv:last-child{margin-bottom:0;}
.mv h3{font-family:"Cormorant Garamond",serif; font-size:1.28rem; font-weight:600; color:var(--ox); margin:0 0 .5rem; display:flex; align-items:baseline; gap:.55rem;}
.mv h3 .rn{font-size:.78rem; color:var(--ink-faint); font-family:"EB Garamond",serif;}
.mv p{margin:0 0 .75rem; font-size:1.01rem; line-height:1.68;}
.mv p:last-child{margin-bottom:0;}
.mv.sola{border-top:1px solid var(--rule); padding-top:1.4rem; margin-top:1.7rem;}
.mv.sola h3{color:var(--slate);}
.pull{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.13rem; color:var(--ink); border-left:2px solid var(--gold); padding-left:1rem; margin:1rem 0;}

.ai-body{background:var(--slate-tint); border:1px solid var(--slate-bd); border-radius:5px; padding:1.2rem 1.25rem;}
.ai-flag{display:flex; gap:.6rem; align-items:center; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin:0 0 1.05rem;}
.thread{margin:0 0 1.15rem; padding:0 0 1.1rem; border-bottom:1px dashed var(--slate-bd);}
.thread:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.thread h3{margin:0 0 .35rem; font-family:"Cormorant Garamond",serif; font-size:1.15rem; font-weight:600; color:var(--slate);}
.thread p{margin:0 0 .5rem; font-size:.96rem; line-height:1.6; color:var(--ink-soft);}
.refs{font-size:.76rem; color:var(--slate-soft);}
.refs b{color:var(--slate); font-weight:600;}
.thread .basis{margin-top:.3rem;}
.vbadge{font-size:.63rem; letter-spacing:.06em; text-transform:uppercase; color:var(--green); border:1px solid var(--green-bd); border-radius:3px; padding:.04rem .4rem; margin-left:.3rem; white-space:nowrap;}
.vbadge.flag{color:var(--ox); border-color:var(--ox-soft);}
.flagged{color:var(--ox);}

.apparatus{margin-top:2.4rem; font-size:.8rem; color:var(--ink-faint); line-height:1.62;}
.apparatus h2{font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .7rem;}
.apparatus ul{margin:0; padding-left:1.1rem;}
.apparatus li{margin:.25rem 0;}
.apparatus .cc{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--rule); font-style:italic;}

.text-only-note{font-size:.9rem; color:var(--slate); background:var(--slate-tint); border:1px solid var(--slate-bd); border-radius:5px; padding:.8rem 1rem; margin:1rem 0;}
.layers-intro{text-align:center; border-bottom:none; padding-bottom:.4rem;}
.layers-rule{margin:2.6rem 0 .4rem;}

/* ── 6. ORIGINAL LANGUAGES ──────────────────────────────────────────────────────── */

.heb-prompt{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .6rem; text-align:right;}
.heb-line{direction:rtl; unicode-bidi:isolate; text-align:right; line-height:2.4; font-family:"Frank Ruhl Libre","Times New Roman",serif; font-weight:500; font-size:clamp(1.5rem,5vw,2rem); color:var(--ink);}
.heb-word{font:inherit; background:none; border:none; cursor:pointer; color:inherit; padding:.04em .1em; margin:0 .02em; border-radius:3px; position:relative; transition:background .25s,color .25s;}
.heb-word:hover,.heb-word:focus-visible{background:var(--ox-tint); color:var(--ox);}
.heb-word::after{content:attr(data-tl); position:absolute; right:50%; transform:translateX(50%); top:1.55em; font-family:"EB Garamond",serif; font-size:.4em; letter-spacing:.03em; color:var(--ink-faint); white-space:nowrap; opacity:0; transition:opacity .2s; direction:ltr; pointer-events:none;}
.heb-word:hover::after,.heb-word:focus-visible::after{opacity:1;}
.translit{direction:ltr; text-align:left; font-style:italic; color:var(--ink-faint); font-size:.9rem; line-height:1.7; margin:1.2rem 0 0;}

/* Greek (LTR) mirrors the Hebrew treatment with a polytonic-capable serif. */
.grk-prompt{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .6rem; text-align:left;}
.grk-line{direction:ltr; text-align:left; line-height:2.2; font-family:"Gentium Plus","Times New Roman",serif; font-weight:400; font-size:clamp(1.4rem,4.5vw,1.9rem); color:var(--ink);}
.grk-word{font:inherit; background:none; border:none; cursor:pointer; color:inherit; padding:.04em .12em; margin:0 .02em; border-radius:3px; position:relative; transition:background .25s,color .25s;}
.grk-word:hover,.grk-word:focus-visible{background:var(--slate-tint); color:var(--slate);}
.grk-word::after{content:attr(data-tl); position:absolute; left:50%; transform:translateX(-50%); top:1.5em; font-family:"EB Garamond",serif; font-size:.45em; letter-spacing:.02em; color:var(--ink-faint); white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none;}
.grk-word:hover::after,.grk-word:focus-visible::after{opacity:1;}
.wtop .wh.grk{direction:ltr; font-family:"Gentium Plus",serif; font-size:1.25rem; min-width:2.3rem; text-align:left;}

/* ── 7. BREADCRUMBS ─────────────────────────────────────────────────────────────── */
/* One implementation. There used to be three (render.py CRUMBS_CSS, enhance.js, and
   about.py's .about-crumbs) disagreeing on size, spacing and current-page colour, two of
   them racing over the narrow-screen clearance (3.8rem vs 7.2rem) and the third
   reserving nothing at all, which let the About crumb run under the fixed cog.
   The reserve is now a single token sized for the worst case: cog + share. */

.fssb-crumbs{max-width:var(--measure); margin:0 auto; padding:1.4rem 0 0; animation:rise .8s ease both;}
.fssb-crumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.1rem;
  margin:0; padding:0; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;}
.fssb-crumbs li{display:flex; align-items:center; color:var(--ink-faint);}
.fssb-crumbs li + li::before{content:"\203a"; margin:0 .5rem; color:var(--rule);}
.fssb-crumbs a{color:var(--ink-faint); text-decoration:none; border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s; display:inline-flex; align-items:center;
  min-height:24px; min-width:24px; justify-content:center; padding:0 .25rem;}
.fssb-crumbs a:hover,.fssb-crumbs a:focus-visible{color:var(--ox); border-color:var(--ox-soft);}
.fssb-crumbs li[aria-current],.fssb-crumbs [aria-current="page"]{color:var(--gold); font-style:normal;}

/* ── 8. LANDING ─────────────────────────────────────────────────────────────────── */

.home-hero{padding:3.4rem 0 .6rem; text-align:center; max-width:42rem; margin-inline:auto; animation:rise .8s ease both;}
.home-hero .ethos{font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink-soft);
  font-size:clamp(1.05rem,2.6vw,1.32rem); margin:.9rem auto 0; max-width:42rem; line-height:1.5;}
.home-hero .ethos .src{color:var(--ox); font-style:normal;}
.home-hero .ethos .ai{color:var(--slate); font-style:normal;}
.acts{font-size:.82rem; color:var(--ink-faint); letter-spacing:.02em; margin:.85rem 0 0; font-style:italic;}
.acts b{color:var(--ink-soft); font-weight:500; font-style:normal;}

.cov{max-width:30rem; margin:1.6rem auto .2rem; text-align:center;}
.cov-line{font-size:.86rem; color:var(--ink-faint); letter-spacing:.03em; margin:0 0 .55rem;}
.cov-line b{color:var(--gold); font-weight:600;}
.cov-track{height:5px; border-radius:3px; background:var(--rule-soft); overflow:hidden; border:1px solid var(--rule);}
.cov-fill{height:100%; background:linear-gradient(90deg,var(--ox-soft),var(--gold)); border-radius:3px;}

.home-search{position:relative; max-width:38rem; margin:2.2rem auto 1rem; animation:rise .8s .08s ease both;}
.hs-field{display:flex; align-items:center; gap:.7rem; border:1px solid var(--rule); background:var(--panel);
  border-radius:12px; padding:.6rem 1.15rem; transition:border-color .25s, box-shadow .25s; backdrop-filter:blur(6px);}
.hs-field:focus-within{border-color:var(--ox); box-shadow:0 0 0 3px var(--ox-tint);}
.hs-icn{color:var(--ox); font-size:1.1rem; line-height:1;}
/* min-height gives the primary control on the front door a real target; max() keeps the
   font at or above 16px so iOS does not zoom the page on focus, even at text size S. */
.hs-input{flex:1; background:none; border:none; outline:none; color:var(--ink);
  font-family:"EB Garamond",serif; font-size:max(1.18rem,16px); min-height:44px;}
.hs-input::placeholder{color:var(--ink-faint); font-style:italic;}
.hs-kbd{font-family:ui-monospace,monospace; font-size:.6rem; letter-spacing:.05em; color:var(--ink-faint);
  border:1px solid var(--rule); border-radius:5px; padding:.18rem .42rem; white-space:nowrap;}
.hs-results{position:absolute; left:0; right:0; top:calc(100% + .5rem); z-index:40;
  background:var(--bg-b); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow-lg);
  list-style:none; margin:0; padding:.4rem; max-height:60vh; overflow:auto; display:none;}
.hs-results.open{display:block;}
.hs-item{display:block; text-decoration:none; color:var(--ink); padding:.6rem .75rem; border-radius:8px;
  border:1px solid transparent; cursor:pointer; min-height:44px;}
.hs-item .r{font-family:"Cormorant Garamond",serif; font-size:1.18rem; color:var(--ox);}
.hs-item .t{font-style:italic; color:var(--ink-soft); margin-left:.5rem;}
.hs-item .k{float:right; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:.35rem;}
.hs-item .snip{display:block; font-size:.85rem; color:var(--ink-faint); margin-top:.2rem; line-height:1.4;}
.hs-item .snip b{color:var(--ink); font-weight:600; font-style:normal;}
.hs-item.pending{opacity:.5; cursor:default;}
.hs-item.pending .r{color:var(--ink-faint);}
.hs-item.pending .k{color:var(--slate);}
.hs-item.active,.hs-item:hover{background:var(--ox-tint); border-color:var(--ox-soft);}
.hs-item.pending.active,.hs-item.pending:hover{background:var(--slate-tint); border-color:var(--slate-bd);}
.hs-empty{padding:1rem .9rem; color:var(--ink-faint); font-style:italic;}
.hs-tips{text-align:center; font-size:.78rem; color:var(--ink-faint); margin:.7rem 0 0;}
.hs-tips b{color:var(--ink-soft); font-weight:500;}

.home-legend{display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; font-size:.74rem;
  letter-spacing:.04em; color:var(--ink-faint); margin:1.6rem 0 .4rem;}
.home-legend .item{display:flex; align-items:center; gap:.45rem;}
.home-legend .src .gl{color:var(--ox);}
.home-legend .ai .gl{color:var(--slate);}
.home-legend .gl{font-size:.95rem;}
.home-legend .canon .gl{color:var(--gold);}

.home-plans{display:flex; align-items:center; gap:1.1rem; max-width:540px; margin:0 auto 1.8rem;
  padding:1.05rem 1.4rem; border:1px solid var(--rule); border-radius:16px; background:var(--panel);
  text-decoration:none; color:var(--ink); transition:border-color .2s,transform .2s;}
.home-plans:hover{border-color:var(--ox); transform:translateY(-2px);}
.home-plans .pl-ic{font-size:1.5rem; color:var(--ox); line-height:1;}
.home-plans .pl-ic.heb{font-family:"Frank Ruhl Libre",serif;}
.home-plans .pl-t{flex:1;}
.home-plans .pl-t b{font-family:"Cormorant Garamond",serif; font-size:1.45rem; font-weight:500; display:block; line-height:1.05;}
.home-plans .pl-t span{font-size:.84rem; color:var(--ink-soft);}
.home-plans .pl-go{color:var(--ink-faint); font-size:1.3rem; transition:transform .2s,color .2s;}
.home-plans:hover .pl-go{color:var(--ox); transform:translateX(3px);}

.votd{max-width:540px; margin:0 auto 1.6rem; min-height:11rem;}
.votd-card{display:block; text-decoration:none; border:1px solid var(--rule); border-radius:16px;
  background:var(--panel); padding:1.3rem 1.5rem; transition:border-color .2s,transform .2s;}
.votd-card:hover{border-color:var(--ox); transform:translateY(-2px);}
.votd-tag{font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ox);}
.votd-text{font-family:"Cormorant Garamond",serif; font-size:1.42rem; line-height:1.4; color:var(--ink); margin:.5rem 0 .6rem;}
.votd-ref{font-size:.82rem; color:var(--ink-faint); letter-spacing:.04em;}
.votd-card:hover .votd-ref{color:var(--ox);}

/* canon browse tree — the measure widens on the home page so this index can breathe */
.canon-wrap{max-width:100%; margin:1.4rem auto 0;}
.div-block{border-top:1px solid var(--rule); padding:1.6rem 0 .4rem; animation:rise .8s .12s ease both;}
.div-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 1.1rem;}
.div-name{font-family:"Cormorant Garamond",serif; font-size:1.7rem; color:var(--ink); margin:0; font-weight:500;}
.div-name .dot{color:var(--ox); margin-right:.5rem; font-size:.8em;}
.div-cov{font-size:.74rem; letter-spacing:.05em; color:var(--ink-faint); white-space:nowrap;}
.div-cov b{color:var(--gold);}

.book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem;}
.book{border:1px solid var(--rule); border-radius:9px; background:var(--panel); overflow:hidden; transition:border-color .2s;}
.book[open]{border-color:var(--ox-soft);}
.book > summary{list-style:none; cursor:pointer; padding:.85rem 1rem; display:block; transition:background .2s; min-height:44px;}
.book > summary::-webkit-details-marker{display:none;}
.book > summary:hover{background:var(--ox-tint);}
.book-top{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;}
.book-name{font-family:"Cormorant Garamond",serif; font-size:1.22rem; color:var(--ink);}
.book-count{font-size:.7rem; color:var(--ink-faint); letter-spacing:.04em; white-space:nowrap;}
.book-count b{color:var(--gold);}
.book-bar{height:3px; border-radius:2px; background:var(--rule-soft); margin-top:.55rem; overflow:hidden;}
.book-bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--ox-soft),var(--gold)); border-radius:2px;}
.book.none .book-name{color:var(--ink-faint);}
/* scoped: a bare .chev here would also hit the verse/layer chevrons on unit pages, which
   were separate documents before this file merged them */
.book .chev{float:right; color:var(--ink-faint); font-size:.7rem; transition:transform .2s; margin-left:.4rem;}
.book[open] .chev{transform:rotate(90deg); color:var(--ox);}

.pc-list{list-style:none; margin:0; padding:.2rem .55rem .8rem; border-top:1px solid var(--rule-soft);}
.pc{display:flex; align-items:baseline; gap:.55rem; padding:.32rem .35rem; border-radius:6px; text-decoration:none;}
a.pc:hover{background:var(--ox-tint);}
.pc .pc-r{font-family:"Cormorant Garamond",serif; color:var(--ox); font-size:1rem; min-width:3.6rem;}
.pc .pc-t{color:var(--ink-soft); font-style:italic; font-size:.92rem; line-height:1.3; min-width:0; overflow-wrap:anywhere;}
.pc.pending{cursor:default; opacity:.48;}
.pc.pending .pc-r,.pc.pending .pc-t{color:var(--ink-faint);}
.pc.pending .pc-dot{color:var(--slate);}
.pc .pc-dot{font-size:.7rem; color:var(--ox);}

.home-foot{max-width:760px; margin:3.5rem auto 0; text-align:center; font-size:.78rem; color:var(--ink-faint); line-height:1.7;}
.home-foot .verse{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.05rem; color:var(--ink-soft); display:block; margin-bottom:.6rem;}
.home-foot .foot-about{margin-top:1rem;}
.home-foot .about-link{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--rule);
  display:inline-flex; align-items:center; min-height:44px;}
.home-foot .about-link:hover{border-color:var(--gold);}

/* ── 9. ABOUT ───────────────────────────────────────────────────────────────────── */

.about-lede{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:clamp(1.3rem,3.5vw,1.7rem);
  line-height:1.5; color:var(--ink-soft); text-align:center; margin:1.6rem auto 0; max-width:34ch;
  animation:rise .9s .08s ease both;}
.sec{margin:2.8rem 0 0; animation:rise .8s ease both;}
.sec > h2{font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.9rem; color:var(--ink);
  margin:0 0 .2rem; line-height:1.08;}
.sec > h2 .num{font-family:"EB Garamond",serif; font-size:.6em; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:.35rem;}
.sec > p{color:var(--ink-soft); line-height:1.7; margin:.7rem 0;}
.sec a{color:var(--ox); text-decoration:none; border-bottom:1px solid var(--ox-tint); transition:border-color .2s;}
.sec a:hover{border-color:var(--ox);}
.northstar{border:1px solid var(--gold); border-radius:6px; background:var(--panel); padding:1.4rem 1.5rem; margin:1.4rem 0;}
.northstar b{color:var(--gold);}
.auth-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.4rem 0;}
.auth{border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:1.15rem 1.2rem;
  display:flex; flex-direction:column; gap:.45rem;}
.auth .mk{font-size:1.5rem; line-height:1;}
.auth.word .mk{color:var(--gold);}
.auth.human .mk{color:var(--ox);}
.auth.ai .mk{color:var(--slate);}
.auth h3{font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.2rem; margin:0; color:var(--ink);}
.auth .lvl{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.auth p{font-size:.86rem; line-height:1.55; color:var(--ink-soft); margin:.2rem 0 0;}
.auth.word{border-color:var(--gold);}
.legend.big{margin:1.6rem 0; font-size:.84rem; gap:2rem;}
.legend.big .gl{font-size:1.15rem;}
.verifier{border:1px solid var(--slate-bd); border-radius:6px; background:var(--slate-tint); padding:1.2rem 1.4rem; margin:1.3rem 0;}
.verifier h3{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:0 0 .7rem;}
.verifier ol{margin:0; padding-left:1.2rem; color:var(--ink-soft); line-height:1.7;}
.verifier ol li{margin:.35rem 0;}
.verifier code{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.82em; color:var(--gold);
  background:var(--ox-tint); padding:.05em .35em; border-radius:3px;}
.badge-demo{display:inline-flex; align-items:center; gap:.4rem; margin:.2rem .4rem .2rem 0;}
.stance{border-left:3px solid var(--ox); padding:.2rem 0 .2rem 1.2rem; margin:1.2rem 0; color:var(--ink-soft); line-height:1.7;}
.stance b{color:var(--ink);}
.srclist{list-style:none; padding:0; margin:1rem 0;}
.srclist li{padding:.55rem 0; border-bottom:1px solid var(--rule-soft); color:var(--ink-soft); font-size:.9rem; line-height:1.55;}
.srclist li:last-child{border-bottom:none;}
.srclist b{color:var(--ink); font-weight:500;}
.srclist .mk{margin-right:.4rem;}
.srclist .mk.h{color:var(--ox);}
.srclist .mk.a{color:var(--slate);}
.srclist .mk.w{color:var(--gold);}
.acts-close{text-align:center; margin:3rem 0 1rem; font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:1.25rem; line-height:1.6; color:var(--ink-soft);}
.acts-close cite{display:block; font-style:normal; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-top:.7rem;}
.backhome-wrap{text-align:center;}
.backhome{display:inline-flex; align-items:center; gap:.4rem; margin:1.4rem auto 0; color:var(--ink-faint);
  text-decoration:none; font-size:.82rem; letter-spacing:.05em; border-bottom:1px solid transparent; min-height:44px;}
.backhome:hover{color:var(--ox);}

/* ── 10. PLANS ──────────────────────────────────────────────────────────────────── */

.plans-root,.strongs-root{margin:1.5rem 0 0;}
.plans-loading{color:var(--ink-faint); text-align:center;}
.plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.plan-card{display:block; text-decoration:none; color:var(--ink); border:1px solid var(--rule);
  border-radius:14px; background:var(--panel); padding:1.3rem 1.4rem; transition:border-color .2s,transform .2s;}
.plan-card:hover{border-color:var(--ox); transform:translateY(-2px);}
.plan-kind{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ox);}
.plan-title{font-family:"Cormorant Garamond",serif; font-size:1.7rem; color:var(--ink); display:block; margin:.2rem 0 .1rem; line-height:1.05;}
.plan-sub{font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink-soft); font-size:1.05rem;}
.plan-blurb{font-size:.92rem; color:var(--ink-soft); line-height:1.55; margin:.7rem 0 .9rem;}
.plan-blurb.centered{text-align:center; max-width:560px; margin:0 auto 1.6rem;}
.plan-meta{display:flex; align-items:center; gap:.8rem; font-size:.74rem; color:var(--ink-faint);}
.plan-bar{flex:1; height:5px; border-radius:3px; background:var(--rule-soft); overflow:hidden;}
.plan-bar i{display:block; height:100%; background:var(--ox); width:0; transition:width .4s;}
.plan-back{display:inline-flex; gap:.4rem; align-items:center; color:var(--ink-faint); text-decoration:none; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 1.2rem; min-height:44px;}
.plan-back:hover{color:var(--ox);}
.plan-h1{font-size:clamp(2rem,7vw,3rem);}
/* a plan detail renders its own header; the shell masthead would be a duplicate <h1> */
body.plan-detail > #main > .masthead{display:none;}
.plan-head{padding-top:.5rem;}

.day{border:1px solid var(--rule); border-radius:12px; background:var(--panel); margin:0 0 .8rem; overflow:hidden;}
/* the day row is a real button: completion used to be a click handler on a plain div,
   so it could not be toggled from the keyboard at all */
.day-head{display:flex; align-items:center; gap:.9rem; padding:.9rem 1.1rem; cursor:pointer; user-select:none;
  width:100%; min-height:44px; background:none; border:none; text-align:left; font-family:inherit; color:inherit;}
.day-check{width:26px; height:26px; border-radius:50%; border:2px solid var(--rule); flex:none; display:flex;
  align-items:center; justify-content:center; color:transparent; transition:all .2s;}
.day.done .day-check{background:var(--ox); border-color:var(--ox); color:var(--bg-a);}
.day-n{font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);}
.day-refs{font-family:"Cormorant Garamond",serif; font-size:1.2rem; color:var(--ink); line-height:1.2;}
.day.done .day-refs{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--rule);}
.day-links{display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.1rem 1rem 3.8rem;}
.day-link{font-size:.84rem; text-decoration:none; color:var(--ox); border:1px solid var(--ox-tint); border-radius:8px;
  padding:.3rem .7rem; transition:border-color .2s; display:inline-flex; align-items:center; min-height:44px;}
.day-link:hover{border-color:var(--ox);}
.day-link .dl-t{color:var(--ink-faint);}
.day-link.pending{color:var(--slate-soft); border-color:var(--slate-bd); border-style:dashed; cursor:default;}
.plan-progress{display:flex; align-items:center; gap:.9rem; margin:0 0 1.5rem; font-size:.82rem; color:var(--ink-soft);}
.plan-reset{margin-left:auto; background:none; border:1px solid var(--rule); border-radius:8px; color:var(--ink-faint);
  cursor:pointer; font-family:inherit; font-size:.74rem; padding:.3rem .9rem; min-height:44px;}
.plan-reset:hover{border-color:var(--ox); color:var(--ox);}

/* ── 11. CONCORDANCE ────────────────────────────────────────────────────────────── */

.lx-search input{width:100%; font-family:"EB Garamond",serif; font-size:max(1.05rem,16px); color:var(--ink);
  background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:.9rem 1.1rem; min-height:44px;}
.lx-search input:focus{border-color:var(--ox);}
.lx-stat{text-align:center; font-size:.8rem; color:var(--ink-faint); margin:.8rem 0 1.6rem;}
.lx-h{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .8rem;}
.lx-chips{display:flex; flex-wrap:wrap; gap:.55rem;}
.lx-chip{display:flex; align-items:center; gap:.5rem; text-decoration:none; border:1px solid var(--rule);
  border-radius:10px; background:var(--panel); padding:.4rem .7rem; min-height:44px; transition:border-color .2s,transform .2s;}
.lx-chip:hover{border-color:var(--ox); transform:translateY(-1px);}
.lx-chip .lx-s{font-size:.66rem; letter-spacing:.04em; color:var(--ink-faint);}
.lx-chip .lx-t{font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink);}
.lx-chip .lx-n{font-size:.66rem; color:var(--ox); background:var(--ox-tint); border-radius:10px; padding:.05rem .45rem;}
.lx-head{border-bottom:1px solid var(--rule); padding:0 0 1.3rem; margin:0 0 1.3rem;}
/* Gentium Plus was missing from these two stacks, so Greek lexemes and Greek surface
   forms fell through to a generic serif here alone, unlike every other Greek surface. */
.lx-lemma{font-family:"Frank Ruhl Libre","Gentium Plus","Cormorant Garamond",serif; font-size:clamp(2rem,7vw,3rem); color:var(--ink); line-height:1.1; margin:0;}
.lx-lemma.rtl{direction:rtl;}
.lx-sub{font-size:.92rem; color:var(--ink-soft); margin:.4rem 0 0;}
.lx-sub b{color:var(--ox); font-weight:600;}
.lx-sub i{color:var(--ink);}
.lx-def{font-size:1.02rem; line-height:1.6; color:var(--ink); margin:.9rem 0 0;}
.lx-note{font-size:.76rem; color:var(--ink-faint); margin:.9rem 0 0; font-style:italic;}
.lx-block{margin:0 0 1.3rem;}
.lx-unit{display:inline-flex; align-items:center; min-height:44px; font-family:"Cormorant Garamond",serif; font-size:1.15rem; color:var(--ox);
  text-decoration:none; border-bottom:1px solid var(--ox-tint); margin:0 0 .5rem;}
.lx-unit:hover{border-color:var(--ox);}
.lx-unit.pending{color:var(--slate-soft); border-color:var(--slate-bd); border-style:dotted;}
.lx-occ{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem; padding:.45rem 0 .45rem 1rem;
  border-left:2px solid var(--rule-soft); margin:0 0 .25rem;}
.lx-occ .lx-ref{font-size:.74rem; color:var(--ink-faint); min-width:7rem;}
.lx-occ .lx-w{font-family:"Frank Ruhl Libre","Gentium Plus",serif; font-size:1.2rem; color:var(--ink);}
.lx-occ .lx-w.rtl{direction:rtl;}
.lx-occ .lx-g{font-style:italic; color:var(--ink-soft); font-size:.92rem;}
.lx-more{font-size:.84rem; color:var(--ink-faint); text-align:center; margin:1.2rem 0 0; font-style:italic;}

/* ── 12. FLAT INDEX (build_site fallback) ───────────────────────────────────────── */

.canon{max-width:760px; margin:0 auto;}
.ucard{display:block; text-decoration:none; color:var(--ink); border:1px solid var(--rule); border-radius:6px;
  background:var(--panel); padding:1.1rem 1.3rem; margin:0 0 1rem; transition:border-color .2s,transform .2s;}
.ucard:hover{border-color:var(--ox); transform:translateY(-2px);}
.uref{font-family:"Cormorant Garamond",serif; font-size:1.5rem; color:var(--ox); display:block;}
.utitle{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.15rem; color:var(--ink); display:block; margin:.15rem 0 .4rem;}
.umeta{font-size:.78rem; color:var(--ink-faint); letter-spacing:.03em;}
.await{color:var(--slate); margin-left:.5rem;}
.coverage{text-align:center; font-size:.85rem; color:var(--ink-faint); margin:1.5rem 0 2rem;}
.coverage b{color:var(--gold);}

/* ── 13. SEARCH OVERLAY (was injected by search.js) ─────────────────────────────── */
/* The scrim was hardcoded rgba(10,8,5,.62) and the token fallbacks carried a warm-brown
   palette from a superseded design, so the overlay dimmed light and sepia with a
   near-black wash. It uses --scrim now, which each theme defines. */

.fssb-ov{position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center;
  background:var(--scrim); backdrop-filter:blur(5px); padding:8vh 1rem 2rem;}
.fssb-ov.open{display:flex; animation:fssbfade .18s ease both;}
@keyframes fssbfade{from{opacity:0}to{opacity:1}}
.fssb-ov-card{width:min(640px,100%); background:var(--bg-b); border:1px solid var(--rule);
  border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden; font-family:"EB Garamond",Georgia,serif;}
.fssb-ov-bar{display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-bottom:1px solid var(--rule-soft);
  transition:box-shadow .2s;}
.fssb-ov-bar:focus-within{box-shadow:inset 0 0 0 2px var(--ox);}
.fssb-ov-icn{color:var(--ox); font-size:1.05rem;}
.fssb-ov-input{flex:1; background:none; border:none; outline:none; color:var(--ink);
  font-family:"EB Garamond",serif; font-size:max(1.18rem,16px); min-height:44px;}
.fssb-ov-input::placeholder{color:var(--ink-faint); font-style:italic;}
.fssb-ov-esc{font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.05em; color:var(--ink-faint);
  border:1px solid var(--rule); border-radius:4px; padding:.12rem .35rem;}
.fssb-ov-list{list-style:none; margin:0; padding:.4rem; max-height:54vh; overflow:auto;}
.fssb-ov-item{display:block; text-decoration:none; color:var(--ink); padding:.6rem .75rem; border-radius:8px;
  cursor:pointer; border:1px solid transparent; min-height:44px;}
.fssb-ov-item .r{font-family:"Cormorant Garamond",serif; font-size:1.18rem; color:var(--ox);}
.fssb-ov-item .t{font-style:italic; color:var(--ink-soft); margin-left:.5rem;}
.fssb-ov-item .k{float:right; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:.35rem;}
.fssb-ov-item .snip{display:block; font-size:.85rem; color:var(--ink-faint); margin-top:.2rem; line-height:1.4;}
.fssb-ov-item .snip b{color:var(--ink); font-weight:600; font-style:normal;}
.fssb-ov-item.pending{opacity:.5; cursor:default;}
.fssb-ov-item.pending .r{color:var(--ink-faint);}
.fssb-ov-item.pending .k{color:var(--slate);}
.fssb-ov-item.active,.fssb-ov-item:hover{background:var(--ox-tint); border-color:var(--ox-soft);}
.fssb-ov-item.pending.active,.fssb-ov-item.pending:hover{background:var(--slate-tint); border-color:var(--slate-bd);}
.fssb-ov-hint{padding:.6rem 1rem; border-top:1px solid var(--rule-soft); font-size:.78rem; color:var(--ink-faint);}
.fssb-ov-hint b{color:var(--ink-soft); font-weight:600;}
.fssb-ov-empty{padding:1rem .9rem; color:var(--ink-faint); font-style:italic;}

/* ── 14. ENHANCE (was injected by enhance.js) ───────────────────────────────────── */

/* thread reference links — inline inside a sentence, so WCAG 2.5.8 exempts them from the
   44px rule; they get comfortable vertical padding instead of a layout-breaking box */
.fssb-refs .fssb-ref{color:var(--ox); text-decoration:none; border-bottom:1px solid var(--ox-tint);
  transition:border-color .2s,color .2s; white-space:nowrap; padding:.2rem 0;}
.fssb-refs a.fssb-ref:hover,.fssb-refs a.fssb-ref:focus-visible{border-color:var(--ox);}
.fssb-refs .fssb-pending{color:var(--slate-soft); border-bottom:1px dotted var(--slate-bd); cursor:default;
  white-space:nowrap; position:relative;}
.fssb-refs .fssb-pendmark{font-size:.78em; font-style:italic; color:var(--ink-faint); margin-left:.25em;
  letter-spacing:0; text-transform:none; opacity:.85;}
.fssb-refsep{color:var(--slate-bd);}

.fssb-pager{max-width:var(--measure); margin:2.4rem auto 0; display:grid;
  grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:stretch;}
.fssb-pager-side{display:flex; flex-direction:column; justify-content:center; gap:.15rem;
  text-decoration:none; border:1px solid var(--rule); border-radius:8px; background:var(--panel);
  padding:.85rem 1.05rem; transition:border-color .2s,transform .2s; min-height:3.4rem;}
.fssb-pager-side:hover{border-color:var(--ox); transform:translateY(-2px);}
.fssb-pager-next{text-align:right;}
.fssb-pager-empty{border:1px dashed var(--rule-soft); background:none; opacity:.4;}
.fssb-pager-dir{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.fssb-pager-ref{font-family:"Cormorant Garamond",serif; font-size:1.25rem; color:var(--ox); line-height:1.1;}
.fssb-pager-title{font-style:italic; font-size:.86rem; color:var(--ink-soft); line-height:1.25;}
.fssb-pager-home{display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:var(--gold); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:0 .4rem;
  border:1px solid transparent; border-radius:8px; transition:color .2s; white-space:nowrap; min-height:44px;}
.fssb-pager-home:hover{color:var(--ox);}

.fssb-share{position:fixed; top:1rem; right:4.1rem; z-index:50; display:flex; align-items:center; gap:.4rem;
  height:44px; padding:0 .9rem; border-radius:22px; border:1px solid var(--rule); background:var(--panel);
  color:var(--ink-soft); cursor:pointer; font-family:"EB Garamond",serif; font-size:.82rem;
  letter-spacing:.02em; backdrop-filter:blur(6px); transition:border-color .25s,color .25s,transform .25s;}
.fssb-share:hover{border-color:var(--ox); color:var(--ox); transform:translateY(1px);}
.fssb-share-icn{font-size:1rem; line-height:1;}
.fssb-share.fssb-share-ok{border-color:var(--green-bd); color:var(--green);}

/* ── 15. THEME PICKER (was injected by theme.js) ────────────────────────────────── */

.fssb-cog{position:fixed; top:1rem; right:1rem; z-index:60; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--rule); background:var(--panel); color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); transition:border-color .2s,color .2s,transform .2s;}
.fssb-cog:hover,.fssb-cog.on{border-color:var(--ox); color:var(--ox);}
.fssb-cog:active{transform:scale(.94);}
.fssb-panel{position:fixed; top:3.7rem; right:1rem; z-index:60; width:292px; max-width:calc(100vw - 2rem);
  background:var(--bg-b); border:1px solid var(--rule); border-radius:16px; padding:1rem 1.05rem 1.1rem;
  box-shadow:var(--shadow-lg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:"EB Garamond",Georgia,serif; animation:fssb-pop .18s ease both;}
@keyframes fssb-pop{from{opacity:0; transform:translateY(-6px) scale(.98);}to{opacity:1; transform:none;}}
.fssb-sec{margin:0 0 .95rem;}
.fssb-sec:last-child{margin-bottom:0;}
.fssb-sec-h{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .55rem;}
.fssb-grid{display:grid; gap:.5rem;}
.fssb-themes{grid-template-columns:1fr 1fr;}
.fssb-sw{display:flex; align-items:center; gap:.5rem; border:1px solid var(--rule); background:none;
  border-radius:10px; padding:.4rem .5rem; min-height:44px; cursor:pointer; color:var(--ink-soft); transition:border-color .18s,color .18s;}
.fssb-sw:hover{border-color:var(--ox-soft); color:var(--ink);}
.fssb-sw.on{border-color:var(--ox); color:var(--ink);}
.fssb-chip{position:relative; width:26px; height:26px; border-radius:7px; border:1px solid; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;}
.fssb-chip-a{position:absolute; right:-5px; bottom:-5px; width:15px; height:15px; border-radius:50%;}
.fssb-chip-t{font-size:.66rem; font-family:"Cormorant Garamond",serif; line-height:1;}
.fssb-sw-name{font-size:.82rem;}
/* four columns, not seven: at seven the accent dots computed to roughly 28px inside a
   268px panel, which no amount of styling could raise to 44 */
.fssb-accents{grid-template-columns:repeat(4,1fr); gap:.5rem;}
.fssb-dot{width:100%; aspect-ratio:1/1; min-width:44px; min-height:44px; border-radius:50%; border:2px solid transparent;
  background:var(--c); cursor:pointer; padding:0; position:relative; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;
  transition:transform .15s;}
.fssb-dot:hover{transform:scale(1.08);}
.fssb-dot.on{box-shadow:0 0 0 2px var(--bg-b),0 0 0 4px var(--c);}
.fssb-seg{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--rule); border-radius:10px; overflow:hidden;}
.fssb-seg-b{background:none; border:none; border-left:1px solid var(--rule); cursor:pointer; color:var(--ink-faint);
  padding:.5rem 0; min-height:44px; line-height:1; font-family:"Cormorant Garamond",serif; transition:background .15s,color .15s;}
.fssb-seg-b:first-child{border-left:none;}
.fssb-seg-b:hover{color:var(--ink);}
.fssb-seg-b.on{background:var(--ox-tint); color:var(--ox);}

/* ── 16. MARKUP (was injected by markup.js) ─────────────────────────────────────── */
/* Highlight washes come from tokens now, so they retheme. They used to be hardcoded
   rgba, which put the same dark-mode washes over a white page in light and sepia. */

.verse-unit[data-hl="gold"]>summary .vpre,  .verse-unit[data-hl="gold"] .verse-en  {background:var(--hl-gold);   border-radius:4px; padding:0 .25em;}
.verse-unit[data-hl="green"]>summary .vpre, .verse-unit[data-hl="green"] .verse-en {background:var(--hl-green);  border-radius:4px; padding:0 .25em;}
.verse-unit[data-hl="blue"]>summary .vpre,  .verse-unit[data-hl="blue"] .verse-en  {background:var(--hl-blue);   border-radius:4px; padding:0 .25em;}
.verse-unit[data-hl="rose"]>summary .vpre,  .verse-unit[data-hl="rose"] .verse-en  {background:var(--hl-rose);   border-radius:4px; padding:0 .25em;}
.verse-unit[data-hl="violet"]>summary .vpre,.verse-unit[data-hl="violet"] .verse-en{background:var(--hl-violet); border-radius:4px; padding:0 .25em;}

.mk-btn{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:1rem; padding:0;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  line-height:1; border-radius:8px; transition:color .2s,background .2s;}
.mk-btn:hover{color:var(--ox); background:var(--ox-tint);}
.verse-unit>summary .mk-flag{font-size:.8rem; margin-left:.2rem;}
.mk-pop{position:absolute; z-index:70; background:var(--bg-b); border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:.8rem .9rem; width:262px; max-width:calc(100vw - 2rem); font-family:"EB Garamond",serif;}
.mk-swatches{display:flex; gap:.45rem; margin:0 0 .7rem;}
.mk-sw{width:44px; height:44px; border-radius:50%; border:2px solid var(--rule); cursor:pointer; padding:0;}
.mk-sw.on{box-shadow:0 0 0 2px var(--bg-b),0 0 0 4px var(--ox);}
.mk-sw.none{display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:.9rem;}
.mk-row{display:flex; gap:.5rem; margin:0 0 .6rem;}
.mk-act{flex:1; display:flex; align-items:center; justify-content:center; gap:.35rem; border:1px solid var(--rule);
  border-radius:9px; background:none; color:var(--ink-soft); cursor:pointer; font-family:inherit; font-size:.82rem;
  padding:.4rem 0; min-height:44px;}
.mk-act.on{border-color:var(--ox); color:var(--ox);}
/* max() keeps this at or above 16px: at .9rem it triggered iOS focus-zoom every time */
.mk-note{width:100%; min-height:64px; resize:vertical; font-family:inherit; font-size:max(1rem,16px); color:var(--ink);
  background:var(--panel); border:1px solid var(--rule); border-radius:9px; padding:.5rem .6rem;}
.mk-note:focus{border-color:var(--ox);}
.verse-unit .mk-noteshow{margin:.6rem 0 0; padding:.6rem .8rem; border-left:2px solid var(--gold);
  font-size:.9rem; color:var(--ink-soft); font-style:italic; background:var(--panel); border-radius:0 6px 6px 0;}

.mk-lib{position:fixed; left:1rem; bottom:1rem; z-index:60; display:flex; align-items:center; gap:.4rem; height:44px;
  padding:0 .95rem; border-radius:22px; border:1px solid var(--rule); background:var(--panel); color:var(--ink-soft);
  cursor:pointer; font-family:"EB Garamond",serif; font-size:.84rem; backdrop-filter:blur(6px);
  transition:border-color .2s,color .2s,transform .28s,opacity .28s;}
.mk-lib:hover{border-color:var(--ox); color:var(--ox);}
/* A fixed pill over a full-bleed reading column always covers text. markup.js adds this
   class while the reader is scrolling down and removes it at rest or on scroll up, so
   the control is there when wanted and out of the way while reading. */
.mk-lib.mk-lib-hidden{transform:translateY(calc(100% + 1.5rem)); opacity:0; pointer-events:none;}
.mk-overlay{position:fixed; inset:0; z-index:80; background:var(--scrim); display:flex; justify-content:center; align-items:flex-start; padding:4vh 1rem; overflow:auto;}
.mk-panel{background:var(--bg-b); border:1px solid var(--rule); border-radius:18px; max-width:640px; width:100%; padding:1.6rem 1.7rem;}
.mk-panel h2{font-family:"Cormorant Garamond",serif; font-size:1.8rem; margin:0 0 .2rem; color:var(--ink);}
.mk-tabs{display:flex; gap:.5rem; margin:1rem 0;}
.mk-tab{border:1px solid var(--rule); border-radius:9px; background:none; color:var(--ink-faint); cursor:pointer;
  font-family:inherit; font-size:.84rem; padding:.4rem .9rem; min-height:44px;}
.mk-tab.on{border-color:var(--ox); color:var(--ox);}
.mk-item{display:block; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--rule-soft); padding:.7rem 0; min-height:44px;}
.mk-item:hover .mk-iref{color:var(--ox);}
.mk-iref{font-family:"Cormorant Garamond",serif; font-size:1.15rem; color:var(--ink);}
.mk-isnip{font-size:.88rem; color:var(--ink-soft);}
.mk-inote{font-size:.88rem; color:var(--ink-soft); font-style:italic; margin-top:.2rem;}
.mk-dot{display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; vertical-align:middle;}
.mk-empty{color:var(--ink-faint); text-align:center; padding:2rem 0;}
.mk-x{float:right; background:none; border:none; color:var(--ink-faint); font-size:1.4rem; cursor:pointer; line-height:1;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px;}
.mk-x:hover{color:var(--ox); background:var(--ox-tint);}

/* ── 17. PARALLEL (was injected by parallel.js) ─────────────────────────────────── */

.par-bar{display:flex; align-items:center; justify-content:center; gap:.7rem; margin:0 0 1.6rem; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.par-sw{position:relative; width:42px; height:23px; border-radius:12px; border:1px solid var(--rule);
  background:var(--panel); cursor:pointer; transition:background .2s,border-color .2s;}
/* the switch keeps its slim look; the tappable region is expanded to 44px */
.par-sw::before{content:""; position:absolute; inset:-12px -13px;}
.par-sw::after{content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--ink-faint); transition:transform .2s,background .2s;}
.par-sw.on{border-color:var(--ox);}
.par-sw.on::after{transform:translateX(19px); background:var(--ox);}
.par-lbl b{color:var(--ink-soft); font-weight:600;}
.par-kjv{margin:.5rem 0 .2rem; padding:.7rem 0 0; border-top:1px dotted var(--rule);}
.par-tag{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .3rem;}
.par-bsb-tag{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ox-soft); margin:0 0 .25rem; display:none;}
.parallel-on .par-bsb-tag{display:block;}
.par-kjv-txt{font-family:"Cormorant Garamond",serif; font-size:clamp(1.2rem,3.4vw,1.55rem); line-height:1.42; color:var(--ink-soft);}

/* ── 18. RESPONSIVE ─────────────────────────────────────────────────────────────── */
/* Two breakpoints for the whole site. There were four (380 / 560 / 640 / 900) with two
   of them collapsing equivalent card grids at different widths, and the unit page, which
   is the product, carried no width breakpoint at all. */

@media (max-width:900px){
  /* clear the fixed cog + share strip at the top right */
  .fssb-crumbs{padding-right:var(--controls-reserve);}
  .auth-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:560px){
  .wrap{padding:0 1rem;}
  .auth-grid,.plan-grid{grid-template-columns:1fr;}
  .book-grid{grid-template-columns:1fr 1fr;}
  .hs-kbd{display:none;}

  /* --- the reading page gets to the text sooner ---------------------------------
     The masthead, warning, legend, intro and verse nav together pushed the first verse
     1,009px down: a whole phone screen with no Scripture on it. The furniture tightens;
     the "Generated by AI, it has no authority" block keeps its size and weight. */
  .fssb-crumbs{padding-top:.75rem;}
  .masthead{padding:1.1rem 0 .3rem;}
  .kicker{margin:0 0 .5rem; letter-spacing:.24em;}
  .subt{font-size:1.1rem; margin:.45rem 0 0;}
  .ornament{margin:.7rem 0 .1rem;}
  .ornament::before,.ornament::after{width:50px;}
  .warning{margin:.9rem 0 .7rem;}
  .legend{gap:.9rem; margin:.1rem 0 .9rem;}
  .unit-intro{font-size:.9rem; line-height:1.55; padding:.85rem 0; margin:0 0 .9rem;}
  .vnav{gap:.4rem; margin:0 0 1.1rem;}
  .home-hero{padding:1.8rem 0 .4rem;}

  /* verse cards: more text, less chrome */
  .verse-unit>summary{padding:.85rem .85rem;}
  .vbody{padding:.3rem .85rem 1.2rem;}
  .grand{padding:1.1rem 1rem;}
  .ai-body{padding:1rem 1rem;}
  .voice{padding-left:.85rem;}

  /* the word-by-word row reads as a block rather than a squeezed baseline row */
  .wtop{align-items:center; gap:.4rem .6rem;}
  .wtop .wstr{margin-left:auto;}

  .fssb-pager{grid-template-columns:1fr;}
  .fssb-pager-next{text-align:left;}
  .fssb-pager-empty{display:none;}
  .fssb-pager-home{order:3; padding:.6rem;}
  .fssb-share .fssb-share-lbl{display:none;}
  .fssb-share{padding:0; width:44px; justify-content:center; right:4.1rem;}
  .fssb-panel{top:auto; bottom:1rem; right:1rem; left:1rem; width:auto; max-width:none;}
  .day-links{padding-left:1.1rem;}
}

/* Touch pointers get the full 44px on dense navigation rows. Gated on pointer:coarse so
   a mouse-driven canon index stays compact rather than growing by thousands of pixels. */
@media (pointer:coarse){
  .pc{min-height:44px; align-items:center; padding:.45rem .35rem;}
  .fssb-crumbs a{display:inline-flex; align-items:center; min-height:44px;}
  .fssb-crumbs{padding-top:.4rem;}
}

@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; scroll-behavior:auto;}}