/* berean.faith — app styles. Tokens come verbatim from the design system
   (berean.css §1, "candlelit lectern"); components below consume only tokens. */

:root {
  color-scheme: light dark;

  /* ── Surfaces — light-dark(LIGHT, DARK) single-value (no duplicated dark block) ── */
  --page-bg:   light-dark(#e4dbcb, #100e0b);  /* the table the lectern sits on */
  --bg:        light-dark(#f7f3ea, #191613);  /* warm paper / desk at night */
  --bg-raise:  light-dark(#fffdf7, #221e19);  /* cards, sheets, popovers */
  --surface:   var(--bg-raise);               /* documented alias */
  --bg-sunk:   light-dark(#efe9db, #14110e);  /* wells, gutters, docks */
  --bg-hover:  light-dark(#f1ebdd, #2a251f);
  --bg-active: light-dark(#e9e2d2, #322a20);

  /* ── Ink ramp — warm dark, NEVER pure black (abuelita-calm) ── */
  --ink:       light-dark(#2a2620, #ece4d4);  /* body prose ~11:1 on --bg, AA-comfortable */
  --ink-soft:  light-dark(#463f34, #cabfac);  /* secondary prose */
  --ink-mut:   light-dark(#6a6253, #b3a991);  /* metadata, translit, inactive nav word */
  --ink-faint: light-dark(#756a59, #9a907d);  /* section labels, morphology, dimmed crumb */
  --ink-ghost: light-dark(#8a7f6c, #7a7264);  /* dividers, faintest UI */

  /* ── Lines ── */
  --line:      light-dark(#e6ddcb, #332c22);
  --line-soft: light-dark(#d8cdb6, #3a3024);
  --card-line: light-dark(#d6cbb3, #2a241c);
  --border:        var(--line);        /* alias for legacy markup */
  --border-soft:   var(--line-soft);   /* alias */
  --border-strong: var(--card-line);   /* alias */

  /* ── BRASS accent — the candle on the lectern (used SPARINGLY) ── */
  --accent:      light-dark(#b07d28, #d4a24a);
  --accent-2:    light-dark(#97681c, #e8bd6e);      /* deeper brass / brighter */
  --on-accent:   light-dark(#fffdf7, #1a1407);
  --accent-ink:  var(--on-accent);                  /* alias */
  --accent-glow: light-dark(rgba(176,125,40,.16), rgba(212,162,74,.20));
  /* AA-fixed CTA stops (white-on-brass needs >=4.5:1 in light) — see contrast policy */
  --cta-top:     light-dark(#7a5414, #e8bd6e);      /* white 6.12:1 light / dark ok */
  --cta-bottom:  light-dark(#8a6018, #d4a24a);      /* white 5.03:1 light / dark ok */
  --eyebrow:     light-dark(#7a5414, #d4a24a);      /* 5.69:1 light */

  /* ── EPISTEMIC SYSTEM (semantic, NEVER decorative) ── */
  --scripture:    light-dark(#2c6cb0, #79b0e6);     /* BLUE = Truth / the Word */
  --scripture-bg: light-dark(#e7f0fa, #192536);
  --egw:    light-dark(#8a7038, #bda05a);           /* MUTED GOLD = luz menor (lesser light) */
  --egw-bg: light-dark(#f1ead8, #241e14);
  --lesser:    var(--egw);                          /* documented alias (site name) */
  --lesser-bg: var(--egw-bg);                       /* documented alias */
  --ss:    light-dark(#2f7d52, #73c79a);            /* GREEN = attested / community study */
  --ss-bg: light-dark(#e3f1e9, #0f2418);
  --attested:    var(--ss);                         /* documented alias (site name) */
  --attested-bg: var(--ss-bg);                      /* documented alias */

  /* ── Highlight — the lit word firing across the app ── */
  --hl:      light-dark(#fbe7b0, #4a3c1b);
  --hl-line: light-dark(#e6c879, #7d6531);

  /* ── Danger — warm brick, never a cold #c0392b; for error words, never codes ── */
  --danger:    light-dark(#a63228, #e88a84);
  --danger-bg: light-dark(#f7e6e2, #2a1512);

  /* ── Type faces (system-first; self-host only before offline ship) ── */
  --serif: "Literata","Iowan Old Style","Palatino Linotype","Book Antiqua","Hoefler Text",ui-serif,Georgia,"Times New Roman",serif;
  --sans:  "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:  ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --greek: "Literata","GFS Didot","New Athena Unicode","Gentium Plus",ui-serif,Georgia,serif;
  --hebrew: "Frank Ruhl Libre","SBL Hebrew","Ezra SIL",serif;

  /* ── Fluid type scale (theme-invariant) ── */
  --fs-body:    clamp(16px, 1rem + 0.2vw, 18px);
  --fs-lede:    clamp(1.15rem, 1.05rem + .5vw, 1.5rem);
  --fs-h1:      clamp(2.6rem, 4.4vw + 1rem, 5rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem);
  --fs-h3:      clamp(1.18rem, 1rem + .6vw, 1.4rem);
  --fs-eyebrow: clamp(11px, .72rem, 12.5px);
  --fs-small:   clamp(.78rem, .82rem, .9rem);
  --lh-prose: 1.65;
  --lh-read:  1.85;
  --lh-head:  1.12;
  --measure-mobile:  33ch;
  --measure-desktop: 46ch;

  /* ── Radii (theme-invariant) ── */
  --radius:    14px;  --r-card: var(--radius);
  --radius-sm: 8px;   --r-input: var(--radius-sm); --r-sm: 6px;
  --radius-lg: 22px;  --r-sheet: 20px;
  --r-pill: 999px;

  /* ── Warm shadows + candle-glow (brand lighting; rgba warm-brown, never cold gray) ── */
  --shadow-card: light-dark(
    0 1px 2px rgba(40,30,15,.05), 0 14px 40px -22px rgba(40,30,15,.40),
    0 1px 2px rgba(0,0,0,.4), 0 18px 50px -24px rgba(0,0,0,.8));
  --shadow-pop: light-dark(
    0 24px 60px -18px rgba(28,22,12,.42), 0 0 0 1px rgba(28,22,12,.06),
    0 28px 70px -16px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.5));
  --shadow-sheet: light-dark(0 -4px 24px rgba(40,30,15,.18), 0 -4px 24px rgba(0,0,0,.5));

  /* ── Spacing (8px base, theme-invariant) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ── Motion (theme-invariant) ── */
  --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 350ms;
  --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1);

  --focus-ring: 2px solid var(--scripture);
  --maxw: 1180px;
}

/* The toggle only PINS color-scheme so light-dark() resolves the matching half. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark;  }

/* ONE fallback block for engines lacking light-dark() (mid-end Android WebView). */
@supports not (color: light-dark(#000, #fff)) {
  :root, :root[data-theme="light"] {
    --page-bg:#e4dbcb; --bg:#f7f3ea; --bg-raise:#fffdf7; --bg-sunk:#efe9db; --bg-hover:#f1ebdd; --bg-active:#e9e2d2;
    --ink:#2a2620; --ink-soft:#463f34; --ink-mut:#6a6253; --ink-faint:#756a59; --ink-ghost:#8a7f6c;
    --line:#e6ddcb; --line-soft:#d8cdb6; --card-line:#d6cbb3;
    --accent:#b07d28; --accent-2:#97681c; --on-accent:#fffdf7; --accent-glow:rgba(176,125,40,.16);
    --cta-top:#7a5414; --cta-bottom:#8a6018; --eyebrow:#7a5414;
    --scripture:#2c6cb0; --scripture-bg:#e7f0fa; --egw:#8a7038; --egw-bg:#f1ead8; --ss:#2f7d52; --ss-bg:#e3f1e9;
    --hl:#fbe7b0; --hl-line:#e6c879;
    --danger:#a63228; --danger-bg:#f7e6e2;
  }
  :root[data-theme="dark"] {
    --page-bg:#100e0b; --bg:#191613; --bg-raise:#221e19; --bg-sunk:#14110e; --bg-hover:#2a251f; --bg-active:#322a20;
    --ink:#ece4d4; --ink-soft:#cabfac; --ink-mut:#b3a991; --ink-faint:#9a907d; --ink-ghost:#7a7264;
    --line:#332c22; --line-soft:#3a3024; --card-line:#2a241c;
    --accent:#d4a24a; --accent-2:#e8bd6e; --on-accent:#1a1407; --accent-glow:rgba(212,162,74,.20);
    --cta-top:#e8bd6e; --cta-bottom:#d4a24a; --eyebrow:#d4a24a;
    --scripture:#79b0e6; --scripture-bg:#192536; --egw:#bda05a; --egw-bg:#241e14; --ss:#73c79a; --ss-bg:#0f2418;
    --hl:#4a3c1b; --hl-line:#7d6531;
    --danger:#e88a84; --danger-bg:#2a1512;
  }
}

/* ── Faces: OFL fonts embedded in the binary, so every device reads alike ── */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/fonts/literata-latin-opsz-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/fonts/literata-latin-ext-opsz-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/fonts/literata-greek-opsz-normal.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF, U+1F00-1FFF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/fonts/literata-latin-opsz-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0100-02FF, U+2000-206F; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/fonts/literata-greek-opsz-italic.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/fonts/frank-ruhl-libre-hebrew-wght-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2190-2193, U+2212, U+2423; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--page-bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-prose) var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
mark { background: var(--hl); color: inherit; border-radius: 3px; padding: 0 .12em; }
a { color: var(--accent-2); }
kbd { display: inline-block; margin-left: var(--sp-2); padding: 0 6px; min-width: 1.6em; text-align: center;
  font: 600 10.5px/18px var(--sans); color: var(--ink-faint); background: var(--bg-sunk);
  border: 1px solid var(--line-soft); border-bottom-width: 2px; border-radius: 5px; letter-spacing: 0; }
.quiet { color: var(--ink-mut); }
.eyebrow { font: 700 var(--fs-eyebrow)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); }
.orig { font-family: var(--greek); }
[lang="he"] .orig, .orig:lang(he), .l-he { font-family: var(--hebrew); }

.app { --bar: 62px; --hints: 44px; --pad: 14px; --gapw: 14px;
  display: grid; grid-template-rows: var(--bar) minmax(0, 1fr) var(--hints); height: 100vh; overflow: hidden;
  background: var(--page-bg); color: var(--ink); }

/* ── Shell bar: floating capsules (Noctalia) ── */
.shell { display: flex; align-items: center; gap: 10px; margin: 10px var(--pad) 0; padding: 0 8px; height: 50px;
  background: var(--bg-raise); border: 1px solid var(--card-line); border-radius: 16px; box-shadow: var(--shadow-card); }
.cap { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 6px; border-radius: 12px; background: var(--bg-sunk); }
.brand { background: none; font: 700 1.38rem/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; padding: 0 8px; }
.brand .dot, .brand em { color: var(--accent); }
.brand em { font-weight: 600; }
.brand .star { color: var(--accent); font-size: .65em; margin-left: .2em; vertical-align: .3em; }
.spaces { gap: 6px; padding: 0 12px; }
.ws { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--ink-ghost); transition: width var(--dur-med) var(--ease), background var(--dur-med); }
.ws.empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-ghost); }
.ws.on { width: 26px; background: var(--accent); box-shadow: none; }
.ws:hover { background: var(--accent-2); }
.loc .step { width: 28px; height: 28px; border-radius: 9px; font-size: 1.15rem; color: var(--ink-mut);
  display: grid; place-items: center; line-height: 1; text-align: center; }
.loc .step:hover, .loc .where:hover { background: var(--bg-hover); color: var(--accent-2); }
.loc .where { font: 650 1.02rem/1 var(--serif); padding: 7px 10px; border-radius: 9px; white-space: nowrap; }
.loc .caret { font-size: .7em; color: var(--accent); margin-left: 6px; }
.search { flex: 1; max-width: 520px; position: relative; padding: 0; background: none; }
.search input { width: 100%; height: 36px; padding: 0 40px 0 16px; border-radius: 12px; border: 1px solid transparent;
  background: var(--bg-sunk); font: 400 14.5px var(--serif); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.search input::placeholder { color: var(--ink-faint); font-style: italic; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); background: var(--bg-raise); }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; }
.tools { margin-left: auto; gap: 2px; }
.tool { font: 600 13px/1 var(--sans); color: var(--ink-soft); padding: 8px 10px; border-radius: 9px; white-space: nowrap; }
.tool:hover { background: var(--bg-hover); color: var(--accent-2); }
.tool.on { background: var(--accent-glow); color: var(--accent-2); }
.tool.accent { color: var(--accent-2); box-shadow: inset 0 0 0 1.5px var(--accent); }

.pill { display: inline-flex; align-items: center; font: 600 13.5px/1 var(--sans); color: var(--accent-2);
  border: 1.5px solid var(--accent); border-radius: var(--r-pill); padding: 8px 15px; white-space: nowrap; transition: background var(--dur-fast); }
.pill:hover { background: var(--accent-glow); }
.pill kbd { background: transparent; border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-2); }
.cta { display: inline-flex; align-items: center; font: 650 14px/1 var(--sans); color: #fffdf7;
  background: linear-gradient(var(--cta-top), var(--cta-bottom)); border-radius: var(--r-pill); padding: 10px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 14px var(--accent-glow); }
.cta:hover { filter: brightness(1.06); }
.cta kbd { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fffdf7; }

/* ── The desk: workspaces top to bottom, columns left to right (niri) ── */
.stage { position: relative; overflow: hidden; min-height: 0; }
.canvas { --rowh: calc(100vh - var(--bar) - var(--hints) - 12px); transform: translateY(calc(var(--ws) * -1 * (var(--rowh) + 40px)));
  transition: transform var(--dur-slow) var(--ease); }
.row { height: var(--rowh); margin-bottom: 40px; position: relative; }
.row-label { display: none; }
.strip { display: flex; align-items: stretch; height: 100%; overflow-x: auto; overflow-y: hidden; padding: 12px var(--pad) 0;
  scroll-behavior: smooth; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.col { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--gapw); height: 100%; min-width: 0;
  width: calc((100vw - 2 * var(--pad)) * var(--w) - var(--gapw)); }
.w-third { --w: .3333; } .w-half { --w: .5; } .w-two { --w: .6667; } .w-full { --w: 1; }
.w-custom { width: calc(100vw * var(--share)); }
/* Edges a page is resized by (not in the overview); inside the page, which clips what overflows. */
.edges { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.edge-x, .edge-y { position: absolute; pointer-events: auto; }
.edge-x { top: 0; bottom: 0; right: 0; width: 8px; cursor: col-resize; }
.edge-y { left: 0; right: 0; bottom: 0; height: 8px; cursor: row-resize; }
.edge-x:hover, .edge-y:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 4px; }
.is-stacked .col:not(.here) .edge-x { display: none; }
/* Tiling off (t t): only the focused column opens; the others fold to their spines and overlap. */
.is-stacked:not(.is-overview) .col { transition: width var(--dur-fast); }
.is-stacked:not(.is-overview) .col:not(.here) { width: 32px; overflow: hidden; margin-right: -6px; }
.is-stacked:not(.is-overview) .col.here { position: relative; z-index: 1; }
.is-stacked:not(.is-overview):not(.is-dragging) .gap { flex-basis: 0; }
.is-overview .sheet { cursor: grab; }
.is-overview .sheet:active { cursor: grabbing; }
.gap { flex: 0 0 var(--gapw); border-radius: 8px; transition: background var(--dur-fast), flex-basis var(--dur-fast); }
.is-dragging .gap { flex-basis: 34px; background: color-mix(in srgb, var(--accent) 12%, transparent); outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -6px; }
.fresh { flex: 1; display: grid; place-items: center; border: 2px dashed var(--line-soft); border-radius: var(--radius-lg); color: var(--ink-faint); font: italic 1.1rem var(--serif); }

.sheet { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  background: var(--bg-raise); border: 1px solid var(--card-line); border-radius: var(--radius-lg) var(--radius-lg) 6px 6px;
  box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow var(--dur-med), border-color var(--dur-med); }
.sheet.reading { background: var(--bg); }
.sheet.is-focus { border-color: color-mix(in srgb, var(--accent) 70%, var(--card-line)); box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-pop); }
.welcome { background: transparent; border-style: dashed; box-shadow: none; }
.page-body { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }

/* the handle: click to focus, drag to move */
.spine { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 0; border-left: 1px solid var(--line); background: var(--bg-sunk); color: var(--ink-faint); cursor: grab;
  font: 600 11.5px var(--sans); letter-spacing: .05em; white-space: nowrap; overflow: hidden; }
.spine:active { cursor: grabbing; }
.spine-title { overflow: hidden; text-overflow: ellipsis; }
.spine .grip { transform: rotate(90deg); letter-spacing: -2px; opacity: .55; }
/* Focused: the identity gold of the active workspace dot, so the page in focus stands out at a glance. */
.is-focus .spine, .is-focus .spine:hover { color: var(--bg-raise); background: var(--accent); }
.spine:hover { color: var(--accent-2); }

/* bookmark ribbons hang from the top edge, one per marker colour */
.ribbons { position: absolute; top: -1px; right: 46px; display: flex; gap: 5px; z-index: 3; pointer-events: none; }
.ribbon { width: 13px; height: 46px; background: var(--mk); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  box-shadow: inset 0 -8px 10px rgba(0,0,0,.08); filter: drop-shadow(0 2px 2px rgba(40,30,15,.25)); }
.mk-0 { --mk: light-dark(#d9667a, #e88a9b); } .mk-1 { --mk: light-dark(#d99a2b, #f0b84f); } .mk-2 { --mk: light-dark(#6f9a5b, #95c27f); }
.mk-3 { --mk: light-dark(#4f93c9, #7cb6e6); } .mk-4 { --mk: light-dark(#8a6cc4, #b29be6); } .mk-5 { --mk: light-dark(#b8744f, #d9987a); }
.verse.marked, .prow.marked { background: color-mix(in srgb, var(--mk) 24%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--mk) 70%, transparent); }

/* drop zones on the four sides of a page while dragging */
.dzs { position: absolute; inset: 0; z-index: 5; }
.dz { position: absolute; transition: background var(--dur-fast); }
.dz.top { inset: 0 0 auto 0; height: 30%; }
.dz.bottom { inset: auto 0 0 0; height: 30%; }
.dz.left { inset: 30% auto 30% 0; width: 50%; }
.dz.right { inset: 30% 0 30% auto; width: 50%; }

/* ── Overview: zoom out to the whole desk ── */
.is-overview .stage { overflow: auto; background: var(--page-bg); }
.is-overview .canvas { zoom: .3; transform: none; padding: 150px 60px 120px; }
.is-dragging .canvas { transition: none; }
.is-overview .row:has(.fresh) { height: calc(var(--rowh) * .45); }
.is-overview .row { margin-bottom: 120px; }
.is-overview .row-label { display: block; position: absolute; top: -78px; left: 70px; font: 700 56px var(--sans); letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; }
.is-overview .row.here .row-label { color: var(--accent-2); }
.is-overview .strip { overflow: visible; }
.is-overview .row.here .strip { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 40px; }
.shield { position: absolute; inset: 0; z-index: 4; cursor: pointer; }
.shield:hover { background: var(--accent-glow); }

/* ── Hint bar: the keys that apply now ── */
.hints { display: flex; align-items: center; gap: 4px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.hint { display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; border-radius: 9px; font: 500 12.5px var(--sans); color: var(--ink-mut); }
.hint:hover { background: var(--bg-hover); color: var(--ink); }
.hint kbd { margin: 0; }
.hint span { margin-left: 4px; }
/* ── Reading sheet ── */
.read-body { overflow-y: auto; padding: 48px clamp(22px, 5%, 64px) 120px; scroll-behavior: smooth; position: relative; min-height: 0; }
.close.corner { position: absolute; top: 14px; right: 14px; }
.read-head { text-align: center; margin-bottom: 40px; }
.read-head h1 { font: 700 clamp(2rem, 1.4rem + 1.8vw, 2.9rem)/var(--lh-head) var(--serif); letter-spacing: -.015em; margin: 10px 0 0; }
.read-head .chapter-no { font: 500 italic 3.4rem/1 var(--serif); color: var(--accent); margin-top: 6px; }
.prose { max-width: 36em; margin: 0 auto; font-size: 1.2rem; line-height: var(--lh-read); hyphens: auto; }
.prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.prose.l-he { font-size: 1.55rem; line-height: 2; }
.verse { border-radius: 4px; transition: background var(--dur-med); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.verse.is-at { background: var(--bg-hover); }
.verse.is-sel, .prow.is-sel { background: var(--scripture-bg); box-shadow: inset 3px 0 0 var(--scripture); }
.vn { font: 700 .6em/0 var(--sans); color: var(--accent); vertical-align: .55em; padding: 0 .28em 0 .15em; letter-spacing: 0; }
.vn:hover { color: var(--accent-2); text-decoration: underline; }
.w { cursor: pointer; border-radius: 3px; transition: color var(--dur-fast); }
.w:hover { color: var(--accent-2); background: var(--accent-glow); }

.parallel { display: grid; gap: 0; }
.prow { display: grid; align-items: start; grid-template-columns: 2.2rem repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--sp-6);
  padding: 8px 6px; border-radius: 6px; font-size: 1.06rem; line-height: 1.75; }
.prow.head { position: sticky; top: -56px; padding-top: 4px; padding-bottom: 10px; background: var(--bg); z-index: 1; }
.prow.para { margin-top: 14px; }
.prow .vn { vertical-align: 0; line-height: 1.75; text-align: right; font-size: .68rem; padding-top: .35em; }
.prow.is-at { background: var(--bg-hover); }
.cell.l-he { font-size: 1.32rem; line-height: 1.85; }
.read-foot { display: flex; justify-content: space-between; max-width: 36em; margin: 48px auto 0; }

.gloss { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 10px clamp(22px, 5%, 64px); background: color-mix(in srgb, var(--bg-sunk) 92%, transparent);
  backdrop-filter: blur(6px); border-top: 1px solid var(--line); font: 400 13.5px/1.4 var(--sans);
  white-space: nowrap; overflow: hidden; }
.gloss.quiet { font-style: normal; color: var(--ink-faint); }
.gloss .orig { font-size: 1.3rem; color: var(--ink); }
.gloss em { font-family: var(--serif); color: var(--ink-soft); }
.gloss .sid { color: var(--accent-2); font-weight: 700; }
.gloss .def { overflow: hidden; text-overflow: ellipsis; color: var(--ink-mut); }
.reading .read-body { padding-bottom: 140px; }

/* ── Cards ── */
.card-body { overflow-y: auto; padding: 28px 32px 72px; min-width: 0; }
.welcome .card-body { padding-top: 40px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.card-head h2 { font: 700 1.65rem/var(--lh-head) var(--serif); margin-top: 6px; letter-spacing: -.01em; }
.card-head h2.orig { font-weight: 500; font-size: 2.6rem; }
.close { width: 34px; height: 34px; border-radius: var(--r-pill); color: var(--ink-faint); font-size: 1.35rem; flex: none; }
.close:hover { background: var(--bg-hover); color: var(--accent-2); }

.texts .tv { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.texts .tv .eyebrow { padding-top: .45em; color: var(--ink-faint); }
.texts .tv .t { font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); }
.texts .tv.main .t { font-size: 1.16rem; color: var(--ink); }
.texts .tv.main .eyebrow { color: var(--eyebrow); }
.texts .t.l-he { font-size: 1.4rem; }
.acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-2); }

.sec { margin-top: 30px; }
.sec h3 { display: flex; align-items: center; gap: var(--sp-2); font: 700 var(--fs-eyebrow)/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 10px; margin: 0 0 4px; border-bottom: 1px solid var(--line); }
.sec h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--accent)); }
.sec .count { margin-left: auto; color: var(--ink-faint); font-weight: 600; letter-spacing: 0; }
.tone-word { --tone: var(--scripture); }
.tone-ss { --tone: var(--ss); }
.tone-egw { --tone: var(--egw); }

.item { display: block; padding: 11px 12px; margin: 2px -12px; border-radius: 10px; cursor: pointer; transition: background var(--dur-fast); }
.item:hover { background: var(--bg-hover); }
.item .ref { display: block; font: 600 italic 15px/1.35 var(--serif); color: var(--accent-2); }
.tone-ss .item .ref, .item.tone-ss .ref { color: var(--ss); }
.tone-egw .item .ref, .item.tone-egw .ref { color: var(--egw); }
.item .txt { display: block; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 3px; }
.item .meta { display: block; font: 500 12.5px var(--sans); color: var(--ink-faint); margin-top: 2px; }
.item.word { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: baseline; }
.item.word .orig { font-size: 1.45rem; grid-row: span 2; min-width: 3.2rem; }
.item.word .meta { font-family: var(--serif); font-size: 14px; color: var(--ink-soft); }
.item.word .txt { grid-column: 2; font-size: 14px; margin: 0; }
.roots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.root { font: 500 13px var(--greek); color: var(--scripture); background: var(--scripture-bg); border-radius: var(--r-pill); padding: 1px 9px; }
.more { display: inline-flex; align-items: center; margin-top: 10px; font: 600 13px var(--sans); color: var(--accent-2); padding: 6px 10px; margin-left: -10px; border-radius: var(--r-pill); }
.more:hover { background: var(--accent-glow); }

/* keyboard cursor inside the focused sheet */
.cursor { background: var(--bg-active) !important; box-shadow: inset 3px 0 0 var(--accent); }

/* word card */
.lex .pron { font-size: 1.05rem; color: var(--ink-soft); }
.lex .def { font-size: 1.18rem; line-height: 1.6; margin: 12px 0 10px; }
.lex .quiet { font-size: 14px; margin-top: 4px; }
.canon { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin-top: 16px; }
.bar { flex: 1 1 0; min-width: 2px; height: var(--h); border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--scripture) 55%, transparent); transition: background var(--dur-fast); }
.bar.nt { background: var(--scripture); }
.bar.empty { background: var(--line); cursor: default; }
.bar:hover:not(.empty), .bar.on { background: var(--accent); }
.canon-axis { display: grid; grid-template-columns: 39fr 26fr auto; font: 500 11px var(--sans); color: var(--ink-faint); margin-top: 6px; }
.family { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 14px 0 4px; }
.fam { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg); }
.fam .orig { font-size: 1.3rem; }
.fam small { font: 600 11.5px var(--sans); color: var(--ink-faint); }
.fam:hover { border-color: var(--accent); }
.fam.on { border-color: var(--accent); background: var(--accent-glow); }
.forms { padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 2; }
.forms .eyebrow { display: inline-block; min-width: 54px; color: var(--ink-faint); }
.form { display: inline-block; margin-right: 14px; white-space: nowrap; }
.form small { font: 600 10px var(--sans); color: var(--ink-faint); margin-left: 3px; vertical-align: .5em; }
.occ { padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 2.1; }
.occ .bk { display: inline-block; margin-right: 6px; min-width: 8rem; font: 600 italic 15px var(--serif); color: var(--accent-2); }
.cv { font: 500 12.5px var(--sans); color: var(--ink-mut); padding: 2px 6px; border-radius: 6px; }
.cv:hover { color: var(--accent-2); background: var(--bg-hover); }
.cv.me { color: var(--scripture); background: var(--scripture-bg); }

/* note / lesson */
.src { font: 700 var(--fs-eyebrow) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tone); }
.note-title { font: 700 1.25rem/1.35 var(--serif); margin: 8px 0 12px; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-5); }
.chip { font: 600 12.5px var(--sans); color: var(--ink-soft); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 5px 12px; background: var(--bg); }
.chip:hover { border-color: var(--accent); color: var(--accent-2); }
.chip.on { border-color: var(--accent); background: var(--accent-glow); color: var(--accent-2); }
.reader { border-left: 3px solid var(--tone); padding-left: var(--sp-5); }
.reader p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1em; }
.note > .quiet { margin-top: var(--sp-4); font: 500 12px var(--sans); }

/* notebook */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-5); }
.essay .etitle { width: 100%; font: 700 1.6rem var(--serif); border: 0; background: none; outline: none; padding: 4px 0; }
.essay .etopics { width: 100%; font: 500 13px var(--sans); border: 0; border-bottom: 1px solid var(--line); background: none; outline: none; color: var(--ink-mut); padding: 6px 0 12px; }
.scripture { position: relative; margin: var(--sp-6) 0 var(--sp-2); padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); }
.scripture p { font-size: 1.12rem; line-height: 1.7; }
.scripture .ref { font: 600 italic 14.5px var(--serif); color: var(--accent-2); margin-top: 6px; }
.reflection { position: relative; margin-left: 23px; }
.reflection textarea { width: 100%; border: 0; background: none; resize: vertical; outline: none; color: var(--ink-soft);
  font: 400 1rem/1.7 var(--serif); padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.reflection textarea:focus { border-bottom-color: var(--accent); }
.btools { position: absolute; right: 0; top: 0; display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast); }
.btools button { width: 26px; height: 26px; border-radius: 6px; color: var(--ink-faint); font: 600 13px var(--sans); background: var(--bg-raise); }
.btools button:hover { color: var(--accent-2); background: var(--bg-hover); }
.scripture:hover .btools, .reflection:hover .btools, .reflection:focus-within .btools { opacity: 1; }

/* welcome */
.welcome-title { font: 700 1.9rem/var(--lh-head) var(--serif); margin: 10px 0 24px; letter-spacing: -.01em; }
.anchor { margin: 0 0 28px; padding-left: 18px; border-left: 3px solid var(--accent); }
.anchor p { font: italic 1.12rem/1.65 var(--serif); }
.anchor cite { display: block; margin-top: 8px; font: 600 italic 15px var(--serif); color: var(--accent-2); }
.steps { counter-reset: s; display: grid; gap: 16px; margin-bottom: 28px; }
.steps li { counter-increment: s; position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.steps li::before { position: absolute; left: 0; top: 0; content: counter(s); font: 600 italic 1.25rem/1.3 var(--serif); color: var(--accent); }
.steps b { color: var(--ink); font-weight: 650; }

/* ── Menus: books, chapters, versions ── */
.scrim { position: fixed; inset: 0; z-index: 20; background: color-mix(in srgb, var(--page-bg) 55%, transparent); backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 72px; animation: fade var(--dur-med) var(--ease-out); }
.menu { width: min(940px, 94vw); max-height: calc(100vh - 110px); overflow-y: auto; background: var(--bg-raise);
  border: 1px solid var(--card-line); border-radius: var(--r-sheet); box-shadow: var(--shadow-pop); padding: 24px 30px 30px;
  animation: rise var(--dur-med) var(--ease-out); }
.menu-head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); position: sticky; top: -24px; background: var(--bg-raise); padding: 4px 0 12px; z-index: 1; }
.menu-head h2 { font: 700 1.5rem var(--serif); margin: 0; white-space: nowrap; }
.menu-head form { flex: 1; }
.menu-head input { width: 100%; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-soft); background: var(--bg); outline: none; font: 400 15px var(--serif); }
.menu-head input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.menu-head .close { margin-left: auto; }
.testaments { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.testament { font: 600 italic 1.2rem var(--serif); color: var(--accent-2); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.genre { margin-top: 16px; }
.genre .eyebrow { color: var(--ink-faint); margin-bottom: 6px; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 2px 6px; }
.book { padding: 6px 10px; margin-left: -10px; border-radius: 8px; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book:hover { background: var(--bg-hover); color: var(--accent-2); }
.book.on { background: var(--accent-glow); color: var(--accent-2); font-weight: 650; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.chap { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--bg); font: 500 1.05rem var(--serif); text-align: center; }
.chap:hover { border-color: var(--accent); color: var(--accent-2); }
.chap.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.versions { display: grid; gap: 4px; }
.version { display: grid; grid-template-columns: 26px 64px 1fr auto; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; }
.version:hover { background: var(--bg-hover); }
.version b { font: 700 13px var(--sans); letter-spacing: .06em; }
.version .check { color: var(--accent); font-weight: 700; }
.version.on b { color: var(--accent-2); }

/* ── Which-key ── */
.whichkey { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(780px, 94vw);
  background: var(--bg-raise); border: 1px solid var(--card-line); border-radius: 18px; box-shadow: var(--shadow-pop);
  padding: 16px 20px 18px; animation: rise var(--dur-fast) var(--ease-out); }
.whichkey .eyebrow { margin-bottom: 10px; }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; }
.wk { display: flex; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 8px; font: 500 13.5px var(--sans); color: var(--ink-soft); }
.wk:hover { background: var(--bg-hover); color: var(--ink); }
.wk kbd { margin: 0; min-width: 28px; color: var(--accent-2); background: var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.toast { position: fixed; z-index: 25; right: 24px; bottom: 58px; padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg); font: 600 13.5px var(--sans); box-shadow: var(--shadow-pop); animation: rise var(--dur-med) var(--ease-out); }

@keyframes rise { from { opacity: 0; transform: translate(var(--tx, 0), 8px); } }
@keyframes fade { from { opacity: 0; } }
.whichkey { --tx: -50%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ── Phone: one sheet at a time, swipe between them ── */
@media (max-width: 760px) {
  .app { --bar: 104px; --pad: 8px; }
  .shell { flex-wrap: wrap; height: auto; padding: 6px; gap: 6px; }
  .brand { font-size: 1.15rem; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .tools .tool:not(.accent):not(:last-child) { display: none; }
  .strip { scroll-snap-type: x mandatory; }
  .col { width: calc(100vw - 2 * var(--pad)); scroll-snap-align: center; }
  .sheet { grid-template-columns: 22px minmax(0, 1fr); }
  .read-body { padding: 30px 18px 120px; }
  .card-body { padding: 22px 18px 64px; }
  .testaments { grid-template-columns: 1fr; gap: 16px; }
  .whichkey { bottom: 12px; }
}

/* bands between workspaces: drop here for a new workspace (shown while dragging) */
.newspace { display: grid; place-items: center; height: 150px; margin: -40px 60px 110px; border: 6px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 40px; color: var(--accent-2); font: 600 48px var(--sans); letter-spacing: .04em; transition: background var(--dur-fast); }
.newspace span { pointer-events: none; }
.sheet.is-dragged { opacity: .35; filter: saturate(.4); }

/* the landing place under the pointer, lit in brass. Sizes read at overview zoom. */
.dz span { position: absolute; background: var(--accent); border-radius: 12px; opacity: 0; transition: opacity var(--dur-fast); box-shadow: 0 0 40px var(--accent); }
.dz.top span { inset: 12px 12px auto 12px; height: 56px; }
.dz.bottom span { inset: auto 12px 12px 12px; height: 56px; }
.dz.left span { inset: 12px auto 12px 12px; width: 56px; }
.dz.right span { inset: 12px 12px 12px auto; width: 56px; }
.dz.is-over { background: color-mix(in srgb, var(--accent) 42%, transparent); }
.dz.is-over span { opacity: 1; }
.sheet:has(.dz.is-over) { outline: 16px solid var(--accent); outline-offset: 6px; }
.is-dragging .gap.is-over { background: var(--accent); outline-color: var(--accent); box-shadow: 0 0 60px var(--accent); }
.newspace.is-over, .fresh.is-over { background: var(--accent); border: 6px solid var(--accent-2); color: var(--on-accent); box-shadow: 0 0 60px var(--accent-glow); }
.is-dragging .shield:hover { background: none; }
.is-overview.is-dragging .gap { flex-basis: 110px; outline-width: 6px; outline-offset: -16px; }

/* people, places and named things */
.entity { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: var(--bg); font: 500 15px var(--serif); }
.entity:hover, .entity.cursor { border-color: var(--accent); }
.entity .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kc); }
.entity small { font: 600 11px var(--sans); color: var(--ink-faint); text-transform: lowercase; }
.k-person { --kc: light-dark(#8a6cc4, #b29be6); }
.k-place { --kc: light-dark(#6f9a5b, #95c27f); }
.k-other { --kc: light-dark(#b8744f, #d9987a); }
.entity-page .kind { font: 700 var(--fs-eyebrow) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kc); margin-bottom: 14px; }
.entity-page .descr { border-left: 3px solid var(--kc); padding-left: 18px; margin-bottom: 8px; }
.entity-page .descr p { font-size: 1.05rem; line-height: 1.7; }
.entity-page .tier { font: italic 13px var(--serif); color: var(--ink-faint); margin-top: 6px; }
.coords { font: 500 12px var(--sans); }

/* ask the Bible */
.ask-editor { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--bg-sunk);
  font: 400 14px/1.6 var(--mono); color: var(--ink); resize: vertical; outline: none; }
.ask-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); background: var(--bg-raise); }
.ask .acts { align-items: center; }
.ask-error { margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--danger-bg); color: var(--danger); font: 500 14px/1.5 var(--mono); white-space: pre-wrap; }
.answer .rows { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px 14px; margin-top: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-sunk); box-shadow: inset 0 1px 4px rgba(0, 0, 0, .08); }
.answer .rows .eyebrow { color: var(--ink-faint); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cell-verse { display: block; text-align: left; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; }
.cell-verse:hover, .cell-verse.cursor { background: var(--bg-hover); }
.cell-verse .ref { display: block; font: 600 italic 15px var(--serif); color: var(--accent-2); }
.cell-verse .txt { font-size: 14.5px; color: var(--ink-soft); }
.mono { font-family: var(--mono) !important; font-style: normal !important; font-size: 13px !important; }
.about .lede { font: italic 1.15rem/1.6 var(--serif); color: var(--ink-soft); margin-bottom: 8px; }

/* outside-source footnote, anywhere */
.tier { font: italic 13px/1.55 var(--serif); color: var(--ink-faint); margin-top: 8px; }

/* question builder: plain words with blanks, above the Datalog */
.builder { margin-bottom: var(--sp-4); }
.starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.starters .eyebrow { margin-right: 4px; }
.sentence { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 14px; font: 1.12rem/1.9 var(--serif); color: var(--ink-soft); }
.slot { font: 600 1.02rem var(--serif); color: var(--accent-2); background: var(--bg-sunk); border: 0; border-bottom: 2px solid var(--accent); border-radius: 6px 6px 0 0; padding: 2px 8px; }
.slot:focus { outline: none; background: var(--accent-glow); }
select.slot { cursor: pointer; }

/* encyclopedia: lesser light, never Scripture */
.wiki { margin-top: 30px; }
.wiki h3 { display: flex; align-items: center; gap: var(--sp-2); font: 700 var(--fs-eyebrow)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--egw); padding-bottom: 8px; margin: 0 0 8px; border-bottom: 1px dashed var(--line-soft); }
.wiki h3 .count { margin-left: auto; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ink-faint); }
.wiki-open { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--sans); color: var(--egw); padding: 5px 12px; border: 1px dashed var(--line-soft); border-radius: var(--r-pill); }
.wiki-open:hover, .wiki-open.cursor { border-color: var(--egw); background: var(--egw-bg); }
.wiki-body { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--egw-bg); border-radius: 12px; padding: 12px 14px; }
.wiki-body p { font-size: .98rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.wiki-body img { width: 84px; border-radius: 8px; flex: none; opacity: .92; }
.wiki .tier a { color: var(--egw); font-style: normal; font-weight: 600; }

/* atlas */
.map { display: block; width: 100%; aspect-ratio: 574 / 250; max-height: 62vh; border-radius: 12px; background: color-mix(in srgb, var(--scripture-bg) 70%, var(--bg-sunk));
  border: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; }
.map:active { cursor: grabbing; }
.map .land { fill: var(--bg-raise); stroke: var(--line-soft); stroke-width: .6; vector-effect: non-scaling-stroke; }
.map .lake { fill: color-mix(in srgb, var(--scripture) 22%, var(--bg-raise)); }
.map .river { fill: none; stroke: color-mix(in srgb, var(--scripture) 40%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .place { fill: color-mix(in srgb, var(--scripture) 60%, transparent); stroke: var(--bg-raise); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.map .place:hover { fill: var(--accent); }
.map .plabel { fill: var(--ink-soft); font-family: var(--sans); font-weight: 600; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--bg-raise); stroke-width: 3px; stroke-linejoin: round; }
.map .route { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; }
.map .stop { fill: var(--accent); stroke: var(--bg-raise); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.atlas .item[aria-current="true"] { background: var(--accent-glow); }

/* timeline */
.timeline .canon { margin-top: 4px; }
.timeline .bar { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.timeline .bar.empty { background: var(--line); }
.timeline .bar.on, .timeline .bar:hover:not(.empty) { background: var(--accent); }
.timeline .canon-axis { grid-template-columns: 1fr auto; }
.era { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-2); }
.era h3 { flex: 1; display: flex; align-items: baseline; gap: var(--sp-2); font: 600 italic 1.15rem var(--serif); color: var(--accent-2); margin: 0; }
.era .count { margin-left: auto; font: 600 12px var(--sans); color: var(--ink-faint); }
.events { list-style: none; padding: 0; margin: 0; }
.event { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-3); padding: 12px 0; border-bottom: 1px solid var(--line); }
.event .yr { font: 600 12.5px/1.9 var(--sans); color: var(--ink-faint); text-align: right; }
.event .ev-title { font: 1.02rem/1.5 var(--serif); margin: 0; }
.event .family { margin: 6px 0 0; gap: 6px; }
.event .entity { padding: 3px 10px; font-size: 13px; }
.pill.danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.study-acts { margin: 6px 0 10px; }
/* Notes under a verse in the reader (t x, t c): off by default. */
.vnotes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font: 13px/1.4 var(--sans); }
.vnotes .entity { padding: 2px 9px; font-size: 12px; }
.vnotes .own .entity, .refchip.own .entity { border-color: var(--accent); color: var(--accent-2); }
.mine-text { flex-basis: 100%; font: italic 14px/1.5 var(--serif); color: var(--ink-soft); border-left: 3px solid var(--accent); padding-left: 10px; }
.prow.notes { margin-bottom: 6px; }
.refchip { display: inline-flex; align-items: center; }
.refchip .x { padding: 0 6px; color: var(--ink-faint); }
.addref .slot { min-width: 14em; }
/* j/k keep this much text around the verse in focus. */
.read-body .verse { scroll-margin: 120px 0; }
/* Ellen G. White: a whole cited paragraph, its other language, the chapter around it. */
.egw-full { display: grid; gap: 10px; margin-top: 8px; cursor: auto; }
.egw-quote { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--bg-sunk); border-radius: 0 10px 10px 0; }
.egw-quote p { margin: 0 0 6px; font: 15px/1.6 var(--serif); }
.egw-quote cite { font: italic 12px var(--sans); color: var(--ink-faint); }
.bref { color: var(--accent-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.bref:hover { color: var(--accent); }
.egw-page { font: 10px var(--sans); color: var(--ink-faint); margin: 0 3px; }
.egw-chapter p { font: 16px/1.7 var(--serif); }
.egw-chapter .cited { background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent); padding: 4px 10px; border-radius: 0 8px 8px 0; }
.egw-ref { font: 11px var(--sans); color: var(--ink-faint); }