/* reader.css — the reader's shared layer.
   These 108 rules were byte-identical in all six volume pages. They lived
   in six copies, which is how .hw split into three variants, .tl into two,
   and the word-popup scrim ended up at 0.06 on one page and 0.35 on five.
   One home now. Loaded AFTER the other stylesheets and BEFORE each page's
   remaining inline <style>, so the cascade position is unchanged.
   Generated by consolidating ot.html, nt.html, dc.html, pgp.html, jst.html, bom.html. */


@media (prefers-reduced-motion: reduce) {
  .chapter-panel.slide-left, .chapter-panel.slide-right, .chapter-panel.fade-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .chapter-panel, .verse, .word-unit, .page, #main-content, .nqd-nav-btn, .nqd-chapter-now { transition: none !important; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
.skip-link { position: absolute; top: -100px; left: 0; background: var(--chrome); color: var(--sw-gold, var(--here-chrome)); padding: 10px 20px; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; z-index: var(--z-skip); font-size: 1em; text-decoration: none; }
.skip-link:focus { top: 0; }
body.dark-mode *:focus-visible { outline-color: var(--here-chrome); }

.book-header { text-align: center; padding: 20px 0 10px; margin-bottom: 8px; }
.book-subtitle { font-size: 1.1em; font-weight: 400; color: var(--ink-light); letter-spacing: 0.06em; }
.ornament { text-align: center; padding: 6px 0 12px; color: var(--accent-deep, var(--here)); font-size: 1.2em; letter-spacing: 0.5em; }
.chapter-heading { text-align: center; padding: 16px 0 20px; border-bottom: 2px solid var(--rule); margin-bottom: 24px; }
.word-group { display: inline-flex; align-items: flex-start; vertical-align: top; direction: rtl; }
/* ── THE CHEVRONS — one home, and each row MIRRORS the tier beside it ──
   Restored 2026-09-04 and consolidated out of the six volume pages, which
   held three drifted copies between them (jst's margin-top was 2px where
   the others were 4px; pgp/jst/bom had lost the line-height entirely).

   Why they were misaligned: .arr-hw is an invisible zero-width spacer whose
   only job is to be exactly as tall as the Hebrew, so the two chevrons land
   on the transliteration and the gloss. Every page set it to 1.85em — the
   Hebrew's old size. The type scale moved the Hebrew to --t4 with an
   !important that the page copies of `.hw` all lost to, and NOTHING moved
   the spacer with it, so the column stood 0.4em too tall and both chevrons
   sat a row low. A copied constant cannot track a scale; the mirror has to
   name the same token. It does now, !important like its twin, so the stale
   page mirrors lose exactly the way the stale `.hw` copies already do.

   transform: scale() is layout-free, so the glyph can be drawn at reading
   size while its box stays the height of the row it belongs to. */
/* The word and its chevron are ONE row. pgp/jst/bom gave .word-unit a 2px
   vertical margin that .arr never had, so the chevrons rode 2px high on
   those three and sat flush on ot/nt/dc — the same copied-constant drift in
   its other dress. Settled to zero on both, here, where the reading stack
   is defined. Each page's horizontal margin is untouched. */
.word-unit { margin-block: 0 !important; }
.arr {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  vertical-align: top;
  color: var(--accent-deep);
  font-family: 'David Libre', serif; font-style: normal; font-weight: 400;
  padding: 3px 0; margin: 0; opacity: 1;
  direction: ltr; unicode-bidi: isolate; line-height: 1.2;
  user-select: none; -webkit-user-select: none;
}
.arr-hw { visibility: hidden; max-width: 0; font-size: var(--t4) !important; line-height: 1.5; }
.arr-tl { font-size: var(--t0) !important; line-height: 1.2;  margin-top: 2px; transform: scale(2.5); visibility: visible; }
.arr-gl { font-size: var(--t0) !important; line-height: 1.35; margin-top: 2px; transform: scale(2.5); visibility: visible; }
.word-unit.sof + .arr { display: none; }
body.hide-translit .arr-tl { display: none; }
body.hide-gloss .arr-gl { display: none; }
body.hide-gloss.hide-translit .arr { display: none; }
.word-unit .gl, .word-unit .tl, .arr .arr-tl, .arr .arr-gl { user-select: none !important; -webkit-user-select: none !important; }
body.english-only .word-unit .gl { user-select: text !important; -webkit-user-select: text !important; }
.verse-english { display: none; }
body.dual-mode .verse-english { display: block; order: -2; flex: 1 1 0; min-width: 0; font-family: 'David Libre', 'Georgia', serif; font-size: 0.82em; line-height: 1.65; color: var(--ink); direction: ltr; text-align: left; padding: 6px 0 6px 14px; border-left: 1px solid var(--rule-light); opacity: 0.85; }
body.dual-mode .word-flow { flex: 1 1 0; min-width: 0; direction: rtl; text-align: right; }
body.dual-mode .verse-num { order: -1; }
body.dual-mode .gl { display: none; }
body.dual-mode .arr { display: none; }
body.dual-mode .word-unit { padding-bottom: 3px; }
/* The ✕ is the ONLY close control now — the full-width mobile "Close" button
   below the card is gone — so it carries the weight. The 44px box stays: it
   is the touch target, and the glyph sits centred inside it. */
#word-popup .popup-close { position: absolute; top: max(4px, env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); cursor: pointer; color: #888; font-size: 18px; font-weight: 700; padding: 10px; min-width: 44px; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; z-index: var(--z-pop); }
#search-results.open { display: block; }
#shortcuts-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); background: rgba(0,0,0,0.7); justify-content: center; align-items: center; }
#shortcuts-overlay.open { display: flex; }
#shortcuts-overlay kbd { background: var(--bg-deep); padding: 2px 8px; border-radius: 3px; border: 1px solid var(--rule); font-family: 'David Libre', serif; font-size: 0.85em; }
.nav-row { display: flex; align-items: center; gap: 12px; direction: ltr; }
#nav-label { font-size: 1em; font-weight: 600; cursor: pointer; min-width: 100px; text-align: center; }
#nav-label:hover { text-decoration: underline; }
#dark-mode-toggle:hover { background: var(--surface-2); }
#nav-hint.show { opacity: 1; }
body.dark-mode #nav-hint { background: rgba(200,200,220,0.88); color: #111; }
.landing-divider { border: none; border-top: 2px solid var(--rule); margin: 20px auto; max-width: 200px; }
body.dark-mode .tl { color: var(--gloss); }
body.dark-mode .page { background: var(--chrome); }
/* #0d111c and #303648 were navy — leftovers from the scheme before the
   one before it, so in dark mode the control bars and verse rules were still
   painting blue-black next to green chrome. Tokens, so they follow the theme. */
body.dark-mode .controls-top, body.dark-mode .controls-bottom { background: var(--chrome); }
body.dark-mode .verse { border-color: var(--rule); }
.ann-hl { border-radius: 4px; }
body.dark-mode #word-popup { background: var(--chrome); border-color: var(--here-chrome); color: var(--on-chrome); }
body.dark-mode .book-title { color: var(--here-chrome); }
body.dark-mode .book-subtitle { color: var(--on-chrome-2); }
body.dark-mode .chapter-heading h2 { color: var(--on-chrome); }
body.dark-mode #search-container { background: var(--chrome); border-color: var(--chrome-line); }
body.dark-mode #search-input { background: var(--surface-2); color: var(--on-chrome); border-color: var(--chrome-line); }
body.dark-mode #search-results { background: var(--chrome); }
body.dark-mode #search-results .search-result { color: var(--on-chrome); }
#panel-overlay.open { display: block; }
.glossary-entry.expanded .glossary-detail { display: block; }
body.dark-mode #glossary-search { background: var(--surface-2); color: var(--on-chrome); border-color: var(--chrome-line); }
.ann-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
#sel-toolbar.visible { display: flex; }
#sel-toolbar button:hover { background: var(--surface-2); }
#hl-pop { display: none; position: fixed; z-index: var(--z-pop); background: var(--chrome); border: 1.5px solid var(--here); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); padding: 10px 12px; direction: ltr; -webkit-user-select: none; user-select: none; max-width: calc(100vw - 16px); }
#hl-pop.visible { display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#hl-pop .hl-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; border-top: 1px solid rgba(154,154,176,0.25); padding-top: 4px; }
#hl-pop .hl-actions button { background: transparent; border: none; color: var(--here); cursor: pointer; font-size: 1.05em; padding: 6px 0; flex: 1; min-height: 44px; border-radius: 8px; font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',emoji; }
#hl-pop .hl-actions button:hover, #hl-pop .hl-actions button:active { background: var(--surface-2); }
.word-unit.wsel .hw { background: color-mix(in srgb, var(--here-chrome) 28%, transparent); border-radius: 6px; }
body.hide-sel-toolbar #sel-toolbar { display: none !important; pointer-events: none !important; }
.xref-marker:hover { opacity: 1; text-decoration: underline; }
body.hide-gloss .xref-marker, body.dual-mode .xref-marker { font-size: 0.5em; }
.word-unit.xref-linked { cursor: pointer; }
.xref-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--bg); z-index: var(--z-raised); }
.xref-panel-header h3 { margin: 0; font-size: 1.1em; color: var(--accent); font-weight: 600; }
/* 44px like every other panel close — this one was the only one the touch
   pass missed, sitting at 28x26 while .glossary-close, .ann-panel-close,
   .popup-close, .share-close, #search-close and .nav-close-btn all had it. */
.xref-panel-close {
  cursor: pointer; font-size: 1.3em; color: var(--ink-light);
  border-radius: 4px;
  min-width: 44px; min-height: 44px; padding: 4px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.xref-panel-word { font-weight: 600; color: var(--accent); font-size: 1.1em; padding: 12px 16px 0; }
.xref-panel-category { font-size: 0.75em; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 16px 10px; border-bottom: 1px solid var(--rule-light); }
.xref-ref-card { padding: 12px 16px; border-bottom: 1px solid var(--rule-light); }
.xref-ref-card:last-child { border-bottom: none; }
.xref-ref-goto { font-size: 0.75em; color: var(--ink-light); cursor: pointer; padding: 6px 10px; min-height: 32px; display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; white-space: nowrap; margin-left: 10px; }
.xref-ref-content { direction: rtl; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0; line-height: 1.7; }
.xref-ref-word { display: inline-flex; flex-direction: column; align-items: center; text-align: center; padding: 2px 3px; }
.xref-ref-word .hw { font-family: 'David Libre', serif; font-size: 1.05em; color: var(--ink); }
.xref-ref-word .en { font-size: 0.65em; color: var(--gloss); direction: ltr; }
.xref-ref-arr { display: inline-flex; align-items: center; color: var(--accent); opacity: 0.5; font-size: 1.1em; padding: 0 1px; direction: ltr; unicode-bidi: isolate; }
body.dark-mode #xref-panel { background: var(--chrome); border-color: var(--here-chrome); }

* { font-family: inherit; }
button, input, select, textarea, option, optgroup, ::placeholder { font-family: inherit; }
#sel-toolbar {left:auto!important;right:6px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;max-height:90vh;overflow-y:auto;flex-direction:column!important;flex-wrap:nowrap!important;max-width:none!important;}
body:not(.hide-sel-toolbar) #sel-toolbar {display:flex!important;}
#sel-toolbar-reopen {display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index: var(--z-pop);background:var(--chrome);color:var(--here);border:1px solid var(--chrome-line);border-right:none;border-radius:10px 0 0 10px;padding:12px 7px;cursor:pointer;font-size:1.05em;line-height:1;box-shadow:-2px 2px 8px rgba(0,0,0,0.3);font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',emoji;}
#sel-toolbar-reopen:hover {background:var(--surface-2);}
body.hide-sel-toolbar #sel-toolbar-reopen {display:block;}
body.dual-mode .verse-english { font-size: 0.85em; flex: 45 1 0; }
body.dual-mode .word-flow { flex: 55 1 0; }
body.dual-mode .hw { font-size: 1em; }

@media (max-width: 700px) {
  body.dual-mode .verse { flex-wrap: nowrap; }
  body.dual-mode .verse-english { flex: 0 0 35%; min-width: 0; border-left: 1px solid var(--rule-light); padding: 4px 0 4px 6px; font-size: 0.62em; line-height: 1.4; }
  body.dual-mode .word-flow { flex: 1 1 0; min-width: 0; }
  body.dual-mode .verse-num { min-width: 22px; font-size: 0.7em; }
}

@media (pointer: coarse) {
  .word-unit .hw { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none; }
}

/* ── The verse numeral sits ABOVE the verse — every mode but Dual ──────
   Not hanging in the right margin beside the text; the Hebrew letter and
   the Arabic numeral side by side on that line. User ruling 2026-09-03,
   extended to Hebrew Only at the user's call after the interlinear.

   The interlinear is where the gutter costs most — every word there is a
   stacked column (Hebrew over transliteration over gloss), so the margin
   takes a whole column's width. Measured at 375px: line 314 -> 355px,
   2.78 -> 3.03 words per row, 36 -> 33 rows for the same 100 words. Hebrew
   Only gets the same treatment for consistency: one reading surface, one
   place the numeral lives.

   DUAL is the exception and stays as it is: its verse is a two-column
   flex, Hebrew beside English, and the numeral belongs in the gutter
   between them rather than above either column.

   Measure this after a reload, never straight after a viewport resize:
   stale widths once made a pass read 3.57 words per row, which was wrong. */
body:not(.dual-mode) .verse { display: block; }
body:not(.dual-mode) .verse > .verse-num {
  display: block;
  min-width: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 1px;
  text-align: right;
  line-height: 1.15;
}
/* The Hebrew letter and the Arabic numeral sit SIDE BY SIDE on that line,
   not stacked — user ruling 2026-09-03. Inline, deliberately not flex:
   the block is text-align:right, and a flex row threw the pair to the
   left edge of the RTL page when this was first tried. Making only the
   Arabic inline pairs them and leaves the alignment untouched. */
body:not(.dual-mode) .verse > .verse-num .verse-num-arabic {
  display: inline !important;
  margin-right: 0.4em;
}
body:not(.dual-mode) .verse > .word-flow { width: 100%; }

@media (max-width: 600px) {
  /* Reclaiming the empty band above each verse on a phone. The verse's own
     1em top-and-bottom padding was ~32px of the ~49px of nothing between
     the rule and the first Hebrew word — on the screen with the least room
     to spare. (The other half was the numeral stacking its two numerals;
     that is handled above, in the interlinear rule, where they now sit
     side by side.) */
  body:not(.dual-mode) .verse { padding: 0.55em 0 !important; }

  #sel-toolbar { flex-direction: row; flex-wrap: wrap; max-width: 200px; }
  #sel-toolbar button { width: 32px; height: 32px; font-size: 1em; }
  /* overscroll-behavior: contain — the drawer, glossary, annotations and
     xref panels all had it; the word card did not, and it is the one a
     phone actually scrolls (a root with 49 references runs long). Reaching
     its end handed the scroll to the chapter underneath, so the reading
     position moved while the reader was looking at a word. */
  #word-popup { max-width: 90vw; padding: 16px 20px; padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)); max-height: min(78vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  #glossary-panel { width: 100vw; max-width: 100vw; }
  #xref-panel { width: 55%; }
  body.dual-mode .verse { flex-wrap: wrap; }
  body.dual-mode .word-flow { flex: 1 1 0; order: 0; }
  body.dual-mode .verse-english { order: 1; flex: 1 1 100%; border-left: none; border-top: 1px dotted var(--rule-light); margin-top: 2px; padding: 8px 0 2px; font-size: 0.82em; line-height: 1.55; }
  body.dual-mode .chapter-heading { flex-wrap: wrap; }
  body.dual-mode .chapter-heading > .chapter-summary-en { order: 3; flex: 1 1 100%; border-left: none; padding-left: 0; padding-top: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   THE READING VIEW — designed from the text outward, 2026-09-03.

   Measured before: 22 distinct font sizes, 24% of the screen given to
   chrome, and 714 directional arrows — one per word — indicating a
   direction the Hebrew already indicates by being Hebrew.

   SIZES ARE IN em, NOT px, ON PURPOSE. The A+/A- controls set
   #page { font-size: N% } and everything downstream inherits from it.
   A px scale here would silently break the reader's zoom.
   ══════════════════════════════════════════════════════════════════════ */
#page {
  --t0: 0.75em;    /* the under-word tier: gloss + translit  12/16 */
  --t1: 0.94em;    /* verse numerals, small labels           15/16 */
  --t2: 1.19em;    /* English body, subtitles            19/16 */
  --t3: 1.50em;    /* section heads                      24/16 */
  /* The Hebrew was 1.875em (30/16) and only ~3 words fitted on a phone
     line. Density has to come from HERE: --t0 is already exactly 12px at
     100%, the legibility floor, so the gloss cannot give anything back —
     the Hebrew is also what sets the line height and the column width, so
     it is the right lever anyway. 1.45em = 23/16, a quarter smaller, and
     A+ still scales the whole page for anyone who wants the old size. */
  --t4: 1.45em;    /* the Hebrew — the voice             23/16 */
  --t5: 2.375em;   /* chapter title                      38/16 */
}

/* THE TIERS OPT OUT OF THE ROW'S JUSTIFICATION.
   The verse row is justified with `text-align-last: start` so the last line
   of a verse stays ragged (see JUSTIFIED ROWS below). Both properties
   INHERIT. Each tier re-declares `text-align: center` and none of them
   re-declared text-align-last, so every gloss that wrapped centred all of
   its lines except the last, which hung left — the defect was one inherited
   property away from a rule that never mentions the gloss. A tier is a
   centred object under its word, not set copy: it opts out here, once, for
   the word column and the chevron column alike. */
.word-unit, .word-unit .hw, .word-unit .tl, .word-unit .gl,
.arr, .arr-hw, .arr-tl, .arr-gl {
  text-align: center;
  text-align-last: center;
}

/* the three tiers, ranked instead of competing */
.hw {
  color: var(--hw);
  font-weight: 400 !important;
  font-size: var(--t4) !important;
  line-height: 1.5;
}
/* The gloss sits at the transliteration's step, not a step above it.
   At --t1 it was 21px against the transliteration's 16.8px and the
   Hebrew's 42px — half the Hebrew, and visibly the loudest thing under
   each word, so the eye read the English line first and the Hebrew
   became the decoration. Ranked below the Hebrew, level with the
   transliteration: colour and position still separate the two tiers.
   max-width is re-expressed so the wrap point does not move — 7.2em of
   the old size is ~9em of this one, and glosses like "An account of"
   should break exactly where they broke before. */
.gl {
  color: var(--gloss);
  font-size: var(--t0) !important;
  /* 1.35 and 2px are what pgp/jst/bom already computed to — the page copies
     load after this file and won this. Stated here with !important so all
     six agree and the chevron column can mirror one number, not six. */
  line-height: 1.35 !important;
  max-width: 9em;
  margin-top: 2px !important;
}
.tl {
  color: var(--ink-light);
  font-size: var(--t0) !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  opacity: .62 !important;
}

/* ── The chapter summary's interlinear — THE one home ─────────────────
   A chapter summary is an editorial abstract introducing the text. It was
   rendering at the SAME size as the scripture it introduces — Hebrew at
   the full 42px — so 1 Nephi 1's summary alone stood 1297px tall on a
   phone: one and a half screens of heading before verse 1, and nothing in
   the type saying "this is not the text".

   It looked deliberate and was not. All five volume pages carried their
   own inline `.heading-flow .hw { font-size: 1.35em }` (bom: 1.5em) and
   NONE of them ever applied: `.hw` above is `!important`, so every one of
   those rules lost. Four pages held byte-identical dead copies, bom held a
   sixth divergent one, jst held three orphaned lines and no base rule at
   all, and no shared stylesheet had any of it. Those copies are deleted;
   this is where the heading's type lives now, and it carries !important
   because it has to outrank the three tiers above.

   Ranked at ~0.62 of the reading text: subordinate at a glance, with the
   gloss and transliteration still clear of the 12px floor.

   THE APPARATUS SCALE — chapter summaries AND colophons together.
   A colophon ("An account of Lehi and his wife Sariah…") is the same kind
   of thing as a summary: the compiler introducing the record, not the
   record. It was rendering at full scripture size too — 1 Nephi 1's ran
   88 word-units and 3600px, four and a half phone screens before the
   chapter proper. bom.html had `.colophon .word-unit .hw { font-size:
   1.15em }` with a comment reading "The colophon shrinks .hw and .gl",
   and it had never once shrunk anything: same !important above, same
   silent loss, third instance of that defect in this file's history.
   One scale for the apparatus, set once, here. */
/* 0.8, not the 0.62 this started at: the reading Hebrew came down to
   1.45em in the same pass, so 0.62 of it would have put the apparatus at
   ~14px — barely above its own 12px gloss, which reads as broken rather
   than subordinate. Ranked against the new scale, not the old one. */
.heading-flow,
.colophon {
  font-size: 0.8em;
}
.heading-flow {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px 6px;
  margin: 10px auto 6px;
  padding: 0 8px;
  max-width: none;   /* summaries expand like the verses — user ruling 2026-08-30 */
}
.heading-flow .word-unit { margin: 1px 3px; }
/* tl/gl would shrink TWICE — --t0 (0.75em) of an already-reduced 0.62em
   base lands at ~10px, under the legibility floor, and lower still at A-.
   The max() puts a hard 12px floor under them while they still grow with
   A+. An em alone cannot do this: the second reduction is the problem. */
.heading-flow .tl,
.heading-flow .gl,
.colophon .tl,
.colophon .gl,
/* the chevron rows take the floor with them, or the apparatus chevrons
   drift the same way the verse ones did */
.heading-flow .arr-tl,
.heading-flow .arr-gl,
.colophon .arr-tl,
.colophon .arr-gl { font-size: max(12px, 1.05em) !important; }
.heading-flow .gl { max-width: 8em; }

/* The chevrons STAY. They were hidden here once and the user asked for them
   back: with a wrapping RTL flow, the mark is what tells you the reading
   order of the line, and « closes the verse. Each page's own .arr rule
   styles them; nothing overrides it. The word gap goes back to the page
   base too — the chevron carries the separation, so the 0.9em air that
   replaced it would now double the spacing. */

/* verse numerals hang small and quiet in the margin */
.verse-num {
  font-weight: 400 !important;
  color: var(--accent-deep) !important;
  font-size: var(--t1) !important;
  min-width: 1.8em !important;
  padding-top: .8em !important;
  line-height: 1.15;
}
/* both numerals stay — the Hebrew letter is the traditional marker and the
   Arabic is what a reader scans for. Quiet, not hidden. */
.verse-num .verse-num-arabic { display: block !important; font-size: .78em !important;
  color: var(--ink-light) !important; opacity: .75 !important; }
/* JST. The Joseph Smith Translation revises particular OT and NT verses and
   nothing on the verse said so. A mark, not a fill — gold is the accent's mark
   role, and --accent already themes itself across light, sepia and dark, so
   this needs no per-theme override.

   A revision of the verse sits under the two numerals in the number column, so
   it reads as an annotation ON that verse. An addition sits below the verse
   entirely, because it points past it. */
.verse-num .jst-mark, .verse > .jst-mark {
  /* inline-block, not block: the arabic numeral above is display:block, so this
     already starts on its own line — block stretched it to the full column
     width (695px in the first cut). */
  display: inline-block;
  margin-top: .35em;
  font-family: inherit;
  font-size: .58em;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 2px 3px;
  opacity: .85;
  direction: ltr;
  unicode-bidi: isolate;
  min-height: 0;
}
.verse-num .jst-mark:hover, .verse > .jst-mark:hover,
.verse-num .jst-mark:focus-visible,
.verse > .jst-mark:focus-visible { opacity: 1; background: var(--accent); color: var(--on-fill); }
/* An ADDITION points past the verse rather than at it, so it sits below the
   last verse instead of beside a number. The verse is display:block and the
   english div before it is a block, so this starts on its own line; the column
   is RTL, so it lands under the verse number. */
.verse > .jst-mark { margin-top: .1em; margin-bottom: .1em; }
/* Hebrew Only and Dual are reading modes, not study modes — the mark would be
   noise there, exactly as the cross-reference markers are already hidden. */
body.hide-gloss .verse-num .jst-mark, body.dual-mode .verse-num .jst-mark,
body.hide-gloss .verse > .jst-mark,   body.dual-mode .verse > .jst-mark { display: none; }
.verse { padding: 1em 0 !important; gap: .9em !important; border-bottom: 0 !important; }
.verse + .verse { border-top: 1px solid var(--rule-light) !important; }

/* a crossref keeps one ink: a fine dotted rule under the gloss, not blue text */
.word-unit.xref-linked .hw { color: var(--hw) !important; }
.word-unit.xref-linked .gl {
  color: var(--gloss) !important;
  border-bottom: 1px dotted var(--accent-deep) !important;
  padding-bottom: 1px !important;
}
.word-unit.xref-linked:hover .gl { border-bottom-color: var(--ink) !important; }
.xref-marker { display: none !important; }

/* the chapter head, on the scale */
.chapter-title, .book-title { font-size: var(--t5) !important; font-weight: 400 !important; line-height: 1.25; }
.chapter-label-en, .book-subtitle { font-size: var(--t0) !important; letter-spacing: .18em; text-transform: uppercase; }


/* ══════════════════════════════════════════════════════════════════════
   THE STUDY PANEL — brought onto the system.

   It had never been: its embedded interlinear rendered the same content
   in gold at 16px while the reading view renders it in ink at 45px, and
   its tab strip put white cards on the navy chrome bar with gold text at
   85% opacity on white — about 2:1.

   A reference is the same grammar as the text, one step quieter.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the tab strip sits in the chrome bar, so it IS chrome ──
   #glossary-panel has no .glossary-tabs wrapper — its tab row is
   .glossary-controls (it also holds the sort <select>), so this rule
   never matched there. The tab BUTTONS still hardcoded on-chrome text
   (below), so the label said "I'm on chrome" while its own bar, never
   painted, said "I'm on paper" underneath it — near-white on white. */
#xref-panel .xref-study-tabs,
#glossary-panel .glossary-controls,
#annotations-panel .ann-tabs { background: var(--chrome) !important; padding: 8px 10px !important; gap: 6px !important; }
#xref-panel .xref-study-tab, #glossary-panel .glossary-tab, #annotations-panel .ann-tab {
  /* the runtime sheet tints the background from the accent; the label must
       be a SOLID on-chrome ink or the two collapse to the same colour (1:1) */
  background: transparent !important;
  color: var(--on-chrome) !important;
  border: 1px solid color-mix(in srgb, var(--here-chrome) 35%, transparent) !important;
  border-radius: var(--r-control) !important;
  box-shadow: none !important;
  min-height: 44px !important;
  font-size: var(--t-body) !important;
  transition: background var(--m-state), border-color var(--m-state) !important;
}
#xref-panel .xref-study-tab:hover,
#glossary-panel .glossary-tab:hover,
#annotations-panel .ann-tab:hover { background: color-mix(in srgb, var(--here-chrome) 12%, transparent) !important; }
#xref-panel .xref-study-tab.active, #glossary-panel .glossary-tab.active, #annotations-panel .ann-tab.active {
  background: var(--here-chrome) !important;
  color: var(--chrome) !important;
  border-color: transparent !important;
}

/* ── a reference renders like the text, one step down ── */
#xref-panel .hw, #glossary-panel .hw {
  font-size: var(--t-large) !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#xref-panel .gl, #glossary-panel .gl,
#xref-panel .xref-ref-word .gl {
  font-size: var(--t-small) !important;
  color: var(--ink-3) !important;
}
#xref-panel .tl, #glossary-panel .tl { font-size: var(--t-micro) !important; color: var(--ink-3) !important; }
#xref-panel .arr, #glossary-panel .arr { display: none !important; }

/* the reference's own heading + label */
#xref-panel .xref-ref-card .xr-ref,
#xref-panel .xref-ref-card b { color: var(--here) !important; font-size: var(--t-body) !important; font-weight: 400 !important; }
#xref-panel .xref-note-label,
#xref-panel .xref-section-label {
  color: var(--here) !important;
  font-size: var(--t-micro) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
#xref-panel .xref-open-chapter, #xref-panel a { color: var(--here) !important; }


/* ── The panel's chrome regions are chrome, so give them chrome TOKENS.
   The injected sheet paints these from --surface-*, and the panel scope
   re-points those to paper — which is how a navy tab strip ended up
   holding white cards. Re-pointing them back here fixes it at the source
   instead of fighting the sheet's specificity. ── */
#xref-panel .xref-panel-header, #xref-panel .xref-study-tabs,
#glossary-panel .glossary-header, #glossary-panel .glossary-controls,
#annotations-panel .ann-header, #annotations-panel .ann-tabs,
#nav-sidebar .nav-search-wrap, #nav-sidebar .nav-vol-tabs, #nav-sidebar .nav-footer {
  --surface-0: var(--chrome);
  --surface-1: var(--chrome);
  --surface-2: color-mix(in srgb, var(--here-chrome) 12%, transparent);
  --surface-3: var(--chrome);
  --surface-sunken: var(--chrome-2);
  --surface-line: var(--chrome-line);
  --on-surface: var(--on-chrome);
  --on-surface-muted: var(--on-chrome-2);
  /* --gold-bright is the legacy alias for CHROME TEXT. It was pointed at
     --here-chrome here, so all 48 rules that read it painted the panel
     the chrome accent — every volume tab, not just the current one, which is
     the same job-doubling that made the old gold unreadable. Chrome text
     is --on-chrome; the accent is reserved for state and nothing else. */
  --gold-bright: var(--on-chrome);
  --gold-pale: var(--on-chrome-2);
  --card-bg: transparent;
  --ink: var(--on-chrome);
  --ink-3: var(--on-chrome-2);
  --here: var(--here-chrome);
}

/* ── The reference text is ink, like the reading text. `body` prefix is
   deliberate: the runtime sheet is appended last, so equal specificity
   loses to it. ── */
body #xref-panel .hw, body #glossary-panel .hw,
body #xref-panel .xref-ref-word .hw {
  color: var(--ink) !important;
  font-size: var(--t-large) !important;
  font-weight: 400 !important;
}
body #xref-panel .gl, body #glossary-panel .gl,
body #xref-panel .xref-ref-word .gl { color: var(--ink-3) !important; font-size: var(--t-small) !important; }
body #xref-panel .arr, body #glossary-panel .arr,
body #xref-panel .arr-tl, body #xref-panel .arr-gl { display: none !important; }
/* the panel's own header title and section labels */
body #xref-panel .xref-panel-header, body #xref-panel .xref-panel-header * { color: var(--here-chrome) !important; }
body #xref-panel [class*="note-label"], body #xref-panel [class*="section-label"],
body #xref-panel .xref-note-kind {
  color: var(--here) !important; opacity: 1 !important;
  font-size: var(--t-micro) !important; letter-spacing: .16em !important;
}

/* the reference cards' own arrows are .xref-ref-arr, not .arr — the system
   removes directional marks wherever they appear */
body #xref-panel .xref-ref-arr,
body #xref-panel .arr-hw { display: none !important; }
/* "TRANSLATION NOTE" / "STUDY FOOTNOTES" is a section LABEL on the panel
   ground. It was gold, and the Root Glossary — the panel this one is meant to
   match — reserves gold for the Hebrew headword alone and sets its count and
   its meaning in ink. A label is not a headword. (A second rule further down
   already said --ink-3 and lost on specificity; it has been removed, so this
   is the only place the label's colour is stated.) */
body #xref-panel .xref-panel-category {
  color: var(--ink-3) !important;
  font-size: var(--t-micro) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   THE CONTENTS — typographic, per the approved scheme.

   Supersedes every card/tile/chevron rule above for the drawer. A
   contents page is rules and numerals: volume tabs underlined, books on
   hairlines, chapters as bare figures. The bubble did no work — it cost
   3x the space and all the visual weight on a surface whose only job is
   to be scanned. Position is marked by accent + a rule, the way print
   marks it, never by filling a box.
   ══════════════════════════════════════════════════════════════════════ */

/* ── kill the card treatment ── */
/* .nav-ch-cell is deliberately NOT in this list: a chapter numeral is not
   a card, so it is never given card styling to strip. Nor are .nl-card /
   .nl-tile / .nl-bm, which are the hub LIBRARY's cards and never appear in
   the reader's drawer at all — their one home is nav_engine.css. */
body #nav-sidebar .nav-book-row {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transform: none !important;
  min-height: 0 !important;
}
body #nav-sidebar .nav-book-row::after { content: none !important; }
body #nav-sidebar .nav-book-row:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
  transform: none !important; box-shadow: none !important;
}

/* ── books are rows on a hairline ── */
body #nav-sidebar .nav-book-row {
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--rule-light) !important;
  align-items: baseline !important;
}
body #nav-sidebar .nav-book-row .nb-heb { font-size: var(--t-large) !important; color: var(--ink) !important; }
body #nav-sidebar .nav-book-row .nb-en  { font-size: var(--t-body) !important;  color: var(--ink-2) !important; }
body #nav-sidebar .nav-book-row .nb-ch  { font-size: var(--t-micro) !important; color: var(--ink-3) !important; }
body #nav-sidebar .nav-book-row.expanded .nb-heb { color: var(--here) !important; }


/* "chapters are bare numerals" moved to nav_engine.css, which owns the
   grid. It was rebuilt here, in !important, on top of bubbles this file
   had just stripped — three layers to say one thing. */

/* ── section labels ── */
body #nav-sidebar .nav-division,


/* Chrome text is near-white; green is reserved for state. Gold used to do
   both jobs, so the swap made every bar green-on-green. */
.sw-top-bar, .sw-top-bar *, .controls-bottom button, .sw-reader-footer,
#nav-sidebar .nav-search-wrap, #nav-sidebar .nav-search-wrap * {
  color: var(--on-chrome) !important;
}
.controls-bottom button.active, .sw-mode-btn.active {
  background: var(--here-chrome) !important;
  color: var(--chrome) !important;
  border-color: transparent !important;
}
.controls-bottom button:not(.active) {
  border-color: color-mix(in srgb, var(--on-chrome) 24%, transparent) !important;
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════
   THE REST OF THE APPROVED SCHEME
   Landing numerals, volume tabs, and the reading measure — the three
   remaining pieces the specs call for that CSS can reach.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. the landing chapter grid is the SAME contents component ──
   .landing-sec-btn was still a card; per the scheme a chapter is a
   numeral on a rule, not a box. Same treatment as the drawer. */
body .landing-section-grid {
  display: flex !important; flex-wrap: wrap !important;
  gap: 0 !important; direction: rtl;
  /* Centred, not flex-start. The book heading above (.lsg-stack) is a centred
     column, so a left-packed row of numerals hung its last, partial line off to
     one side of a centred title. It is barely visible in the OT, where books
     run 20-50 chapters and every row is full; it is glaring in the JST, where
     20 of the 31 books have one or two entries and the whole "row" was a single
     numeral pinned to the right margin under a centred name. */
  justify-content: center;
}
body .landing-sec-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  min-width: 34px !important; min-height: 34px !important;
  padding: 4px 6px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
body .landing-sec-btn:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
  transform: none !important; box-shadow: none !important;
}
body .landing-sec-btn .sec-heb { display: none !important; }
body .landing-sec-btn .sec-tl  { display: none !important; }
body .landing-sec-btn .sec-num {
  font-size: var(--t-body) !important; color: var(--ink-2) !important;
  font-family: ui-monospace, Menlo, monospace !important; font-weight: 400 !important;
}
body .landing-sec-btn.current,
body .landing-sec-btn[aria-current="true"] {
  background: transparent !important;
  border-bottom-color: var(--here) !important;
  box-shadow: none !important;
}
body .landing-sec-btn.current .sec-num { color: var(--here) !important; }
/* a NAMED section (front matter) is a row, not a numeral */
body .landing-section-grid:has(.sec-tl) { flex-direction: column; align-items: stretch; }
body .landing-section-grid:has(.sec-tl) .landing-sec-btn {
  min-height: 44px !important; padding: 11px 4px !important;
  border-bottom: 1px solid var(--rule-light) !important;
  justify-content: space-between !important; flex-direction: row !important;
  /* MUST be stated. sw_theme.css sets `flex: 1 1 232px !important` on this
     same element, from the older design where these were 232px-WIDE cards
     wrapping in a row. The line above turns the container to a column, and
     in a column flex-basis is the HEIGHT — so every front-matter row became
     232px tall: three words of text over a third of a screen of nothing.
     Two files described the same element as two different layouts and the
     survivor was a hybrid of both. Content height, explicitly. */
  flex: 0 0 auto !important;
}
body .landing-section-grid:has(.sec-tl) .sec-heb {
  display: block !important; font-size: var(--t-large) !important; color: var(--ink) !important;
}
body .landing-section-grid:has(.sec-tl) .sec-num {
  font-size: var(--t-body) !important; color: var(--ink-2) !important; font-family: inherit !important;
}

/* ── 2. volumes are a tab ROW, not a grid ── */
body #nav-sidebar [class*="volume"] {
  display: flex !important; flex-wrap: wrap !important; gap: 0 !important;
  border-bottom: 1px solid var(--rule-light) !important;
  padding: 0 10px !important;
}

/* ── 3. the reading measure. It was max-width:none, so the gloss ran the
   full viewport on any wide screen. ── */
#main-content, .chapter-panel {
  max-width: 46em;
  margin-inline: auto;
}


/* ── the settings sheet the mode row now lives in ── */
#sw-settings-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: color-mix(in srgb, var(--chrome) 42%, transparent);
  opacity: 0; pointer-events: none; transition: opacity var(--m-move);
}
body.sw-settings-open #sw-settings-scrim { opacity: 1; pointer-events: auto; }
#sw-settings-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-panel);
  background: var(--chrome);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%);
  transition: transform var(--m-move);
  box-shadow: 0 -8px 30px rgba(0,0,0,.30);
}
body.sw-settings-open #sw-settings-sheet { transform: translateY(0); }
.sw-sheet-grab {
  width: 34px; height: 4px; border-radius: 2px; margin: 0 auto 10px;
  background: color-mix(in srgb, var(--on-chrome) 28%, transparent);
}
.sw-sheet-label {
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-chrome-2); margin-bottom: 8px;
}
/* the row keeps its own styling; it just lives here now */
@media (prefers-reduced-motion: reduce) {
  #sw-settings-sheet, #sw-settings-scrim { transition: none; }
}
/* the reader gets the 55px back */
body {
  /* ── Compatibility: the names the rest of the codebase already uses,
       mapped onto the system so nothing downstream had to change. ── */
  /* chrome TEXT, not the accent */
  /* The semantic layer the reader consumes. Each one points at a system
       token, so these follow the theme without a second definition. */
  --gold-deep: var(--here);
  --gold: var(--on-chrome);
  --gold-bright: var(--on-chrome);
  --gold-pale: var(--on-chrome-2);
  --label-gold: var(--here);
  --qq: var(--signal);
  --qq-bright: var(--signal-chrome);
  --tap: var(--here);
  --tap-bright: var(--here-chrome);
  --navy: var(--chrome);
  --navy-2: #243652;
  --navy-line: var(--chrome-line);
  --navy-line-dim: #22334C;
  --surface-sunken: var(--chrome-2);
  --surface-0: var(--chrome);
  --surface-1: #22334C;
  --surface-2: #243652;
  --surface-3: #2E4260;
  --surface-line: var(--chrome-line);
  --on-surface: var(--on-chrome);
  --on-surface-muted: var(--on-chrome-2);
  --on-surface-accent: var(--here-chrome);
  --paper-0: var(--paper);
  --paper-1: var(--paper-2);
  --on-paper: var(--ink);
  --on-paper-muted: var(--ink-3);
  --on-paper-accent: var(--here);
  --panel-ground: var(--panel);
  --card-bg: var(--card);
  --card-title: var(--ink);
  --card-tl: var(--ink-3);
  --card-body: var(--ink-2);
  --card-radius: var(--r-sheet);
  --tile-radius: var(--r-card);
  --card-gap: var(--s4);
  --tile-gap: 10px;
  --card-shadow: var(--e1);
  --card-shadow-hover: var(--e2);
  --card-motion: var(--m-move);
  --chrome-bg: var(--chrome);
  --chrome-gold: var(--on-chrome);
  --chrome-ink: var(--on-chrome);
  --chrome-muted: var(--on-chrome-2);
  --sw-navy: var(--chrome);
  --sw-navy-hover: color-mix(in srgb, var(--here-chrome) 14%, var(--chrome));
  --sw-gold: var(--on-chrome);
  --sw-gold-bright: var(--on-chrome);
  --sw-gold-muted: var(--on-chrome-2);
  --sw-gold-border: color-mix(in srgb, var(--on-chrome) 28%, transparent);
  --sw-hub-bg: var(--paper);
  --sw-hub-bg-deep: var(--paper-2);
  --bg: var(--paper);
  --bg-deep: var(--paper-2);
  --ink-light: var(--ink-3);
  --gloss: var(--ink-3);
  /* --accent chained to --gold (= --on-chrome, near-white) while its own
     sibling --accent-deep already correctly pointed at --here. Every real
     consumer of --accent — 30+ inline `background: var(--accent); color:
     #fff` buttons and badges across every page (Export Annotations, Start
     Reading, category badges, table headers) — wanted the saturated fill,
     not chrome text, so all of them rendered near-invisible. The few
     usages that DID want chrome text (.xref-panel-word, .xref-panel-header
     h3) are already governed by more specific !important rules elsewhere
     and never depended on this value. */
  --accent: var(--here);
  --accent-deep: var(--here);
  --accent-light: var(--here-chrome);
  /* The hover/press fill for anything sitting ON PAPER.
     --accent-light is --here-chrome, which is ALWAYS the bright chrome stop regardless
     of theme, because it is built to sit on the dark chrome. Paper-backed
     buttons had been reaching for it anyway (the app-store link's border and
     the hover fill of .gs-go, .card-continue and #continue-reading), which is
     the same rule the gold tokens break when --sw-gold falls back to a chrome
     colour: a chrome-only tone painted onto a paper-facing surface.
     Derived from --accent so it follows the theme instead of pinning a hue. */
  /* the accent as a SURFACE (see the fill/mark note in sw_theme.css).
     Light mode's accent is already deep, so the fill IS --here here; dark
     mode overrides both of these on body.dark-mode. */
  --accent-fill: var(--here);
  --on-fill: #fff;
  --accent-hover: color-mix(in srgb, var(--accent-fill) 85%, #fff);
  /* the highlighter. Marks the word a study card is about, inside the
     references panel. Yellow because that is what a highlighter is, and it
     has to survive Light, Sepia and Dark — so it is a WASH behind the Hebrew,
     never a text colour, and the ink on top stays --ink in every theme. */
  --studied-wash: rgba(255, 209, 71, 0.42);
  --studied-edge: rgba(214, 158, 18, 0.55);
  --verse-num: var(--here);
  /* text color for something FILLED with --accent (a solid button, a
     count badge). --here brightens in dark mode by design (dark
     UIs need a punchier accent against a dark ground) — but a hardcoded
     `color: #fff` paired with it doesn't adapt, so a button that was
     white-on-deep in light mode becomes white-on-bright in
     dark mode: 1.92:1. Same fix already proven for .rsc-chip-here. */
  --on-accent: #fff;
  --hw: var(--ink);
  --xref: var(--tap);
  --tap-blue: var(--tap);
  --header-bg: var(--chrome);
  --header-text: var(--on-chrome);
  --row-alt: var(--paper);
  --rule: #E2DCD2;
  --rule-light: #EDE8E0;
  /* derived, never a literal: these were raw rgba of a past accent and stayed it
     through two palette changes because nothing pointed them at the accent */
  --highlight: color-mix(in srgb, var(--here) 14%, transparent);
  --hover-wash: color-mix(in srgb, var(--here) 9%, transparent);
  background: var(--bg);
  color: var(--ink);
  font-family: 'David Libre', serif;
  min-height: 100vh;
  --sw-mode-row-h: 0px;
}



/* ── the selection toolbar and its icons ── */
#sel-toolbar, #hl-pop, #share-popup {
  background: var(--chrome) !important;
  border: 1px solid var(--chrome-line) !important;
  border-radius: var(--r-sheet) !important;
  box-shadow: var(--e3) !important;
}
#sel-toolbar button, #hl-pop button, #share-popup button,
#sel-toolbar .sel-btn, #hl-pop .hl-btn {
  color: var(--on-chrome) !important;
  background: transparent !important;
  min-width: 44px !important; min-height: 44px !important;
}
#sel-toolbar button:hover, #hl-pop button:hover {
  background: color-mix(in srgb, var(--on-chrome) 12%, transparent) !important;
}
#sel-toolbar button.active, #hl-pop button.active {
  background: var(--here-chrome) !important; color: var(--chrome) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CORRECTION TO THE SYSTEM RULE.

   "Navy is for tools" was too blunt. The word scorecard is a TOOL by
   position but it is READING by content — root, forms, counts, glosses,
   several hundred words of dense reference text. Dense text on a dark
   ground is the hardest thing to read in the app.

   The rule is sharper as:  chrome is for CONTROLS.  Anything you READ
   sits on paper, even inside a popover.
   ══════════════════════════════════════════════════════════════════════ */
body #word-popup {
  /* UNDER THE PANEL IT OPENED. The card and the cross-reference panel now stay
     open together, and the card was at --z-pop (400) against the panel's
     --z-panel (310), so it sat ON TOP of the panel it had just launched and
     covered the references the reader went there to read. It belongs behind:
     the panel is the thing being read, the card is the context it came from.
     One rank below the panel, still far above the chrome. Stated here because
     each volume page declares this z-index in its own inline <style>, and an
     inline sheet beats a linked one at equal specificity — `body #word-popup`
     outranks all six copies without editing any of them. */
  z-index: calc(var(--z-panel) - 1);

  /* SCROLL SHADOW. The card scrolls on a phone — about 15% of a long entry is
     below the fold on a 375x667 iPhone, and roughly half of it in landscape —
     and nothing said so: the content simply stopped at the rounded edge. This
     is the standard four-layer trick, pure CSS and self-cancelling: the two
     `local` gradients scroll WITH the content and sit over the shadows at the
     extremes, so a shadow only appears on the edge that actually has more
     behind it, and neither appears when the card is short enough not to
     scroll. Ink-coloured rather than black, so it reads in dark too. */
  background:
    linear-gradient(to bottom, var(--card) 34%, rgba(0,0,0,0)) top / 100% 30px local no-repeat,
    linear-gradient(to top,    var(--card) 34%, rgba(0,0,0,0)) bottom / 100% 30px local no-repeat,
    radial-gradient(farthest-side at 50% 0,    color-mix(in srgb, var(--ink) 30%, transparent), rgba(0,0,0,0)) top / 100% 15px scroll no-repeat,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 30%, transparent), rgba(0,0,0,0)) bottom / 100% 15px scroll no-repeat,
    var(--card) !important;
  color: var(--ink) !important;
  /* The ACCENT, not the hairline: --rule-light is barely off the card's own
     ground, so the card had no visible edge against paper. --here is the
     scheme's accent and is already mode-aware, which also revives
     body.dark-mode's border-color below — that rule carries no !important and
     was being beaten by this shorthand. */
  border: 2px solid var(--here) !important;
  border-radius: var(--r-sheet) !important;
  box-shadow: var(--e3) !important;
  padding: 18px 20px 16px !important;
  max-width: min(440px, 92vw) !important;
  /* Scroll containment belongs on the base rule, not in the narrow-phone
     block where it first went: the card scrolls in landscape and on a
     desktop window too, and there it was still handing its overscroll to
     the chapter underneath. */
  overscroll-behavior: contain;
}

/* ── CARD EDGES — the whole family, not one card at a time ────────────
   Audited every card and panel surface by measuring its fill against the
   ground behind it AND its border against both. The result was a class,
   not an incident: .nl-card and .nl-tile had NO border at all, and
   .rsc-panel-card (1.2), .rsc-il-card (1.24) and .colophon (1.25) all sat
   at contrasts where the edge is not perceptible — white cards on a white
   page, held up only by a shadow.

   The accent draws the edge. Which accent depends on the GROUND, and this
   is the trap: --here is theme-scoped (deep green on paper, mint in dark),
   so on the drawer — which is chrome-coloured in BOTH themes — a light
   theme would paint a deep-green edge on dark green and vanish again.
   Cards on paper take --here; cards on chrome take --here-chrome, which
   is mint always. Weights are ranked: the word card is the sheet and gets
   2px, everything nested inside it is 1px at ~38%. */
.rsc-panel-card,
.colophon {
  border: 1px solid color-mix(in srgb, var(--here) 38%, transparent) !important;
}

/* The three links inside the word card — Topical Guide, Cross-References,
   Root Cross-References. --here, not --here-chrome: the card is PAPER, and
   the chrome accent is mint in both themes, which measured ~1.9:1 on white
   and is what read as "nasty mint" on the scorecard.

   All three were inline styles written by bom.html's popup builder, so no
   stylesheet could correct them — that is why the card kept its mint after
   the border was fixed. The inline colours are gone; the styling lives
   here with the rest of the card. */
body #word-popup .popup-tg-link,
body #word-popup .popup-xref-link,
body #word-popup .popup-xref-direct {
  cursor: pointer;
  color: var(--here) !important;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--here) 45%, transparent);
  font-size: 0.9em;
}

/* ── The Study panel's two headings ───────────────────────────────────
   Both were inline styles written by the crossrefs engine, so no
   stylesheet could reach them, and both were chrome colours on a paper
   panel:

     "All N occurrences in N verses"  var(--sw-gold, var(--here-chrome))
        -> --on-chrome, #ecfdf5 on white = 1.05:1. Invisible. This is the
        gold-fallback trap: where --sw-gold is out of scope the fallback
        fires, and the fallback is a CHROME colour.
     "Scripture Cross-References (N)"  var(--here-chrome)
        -> mint on near-white = 1.75:1, and it carried a hardcoded #444
        rule underneath it from the navy era.

   Paper takes --here. The rule under the heading takes the same accent
   instead of a fixed grey. */
#xref-panel .rsc-occ-title,
.rsc-occ-title {
  font-weight: 700;
  color: var(--here) !important;
}
/* The "All N occurrences" card. Its border and tinted fill were an inline
   cssText in the engine — mint at 55% and a 10% mint wash — so no rule
   could soften them on paper. The inline styling is gone; it is a paper
   card like the others, with the accent one step stronger to mark it as
   the panel's primary action. */
#xref-panel .rsc-occ-card,
.rsc-occ-card {
  border: 1px solid color-mix(in srgb, var(--here) 50%, transparent) !important;
  background: color-mix(in srgb, var(--here) 7%, var(--paper-2)) !important;
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 12px;
}
#xref-panel .xref-cat-heading,
.xref-cat-heading {
  font-weight: 700;
  color: var(--here) !important;
  margin: 12px 0 6px;
  font-size: 0.9em;
  border-bottom: 1px solid color-mix(in srgb, var(--here) 30%, transparent);
  padding-bottom: 4px;
}

/* the headword block */
body #word-popup .popup-hebrew {
  color: var(--ink) !important; font-size: var(--t-display) !important;
  font-weight: 400 !important; line-height: 1.3 !important;
}
body #word-popup .popup-translit { color: var(--ink-3) !important; font-size: var(--t-body) !important; font-style: italic !important; }
body #word-popup .popup-gloss    { color: var(--ink-2) !important; font-size: var(--t-large) !important; }
body #word-popup .popup-close    { color: var(--ink-3) !important; }

/* dense reference text: give it structure instead of paragraphs */
body #word-popup .popup-strong,
body #word-popup .popup-detail,
body #word-popup .rsc-block {
  color: var(--ink-2) !important; font-size: var(--t-body) !important; line-height: 1.55 !important;
}
body #word-popup .rsc-block + .rsc-block {
  border-top: 1px solid var(--rule-light) !important;
  margin-top: 12px !important; padding-top: 12px !important;
}
body #word-popup .rsc-root, body #word-popup a { color: var(--here) !important; }
body #word-popup .rsc-note { color: var(--ink-3) !important; font-style: italic !important; }
/* the volume counts read as a row of quiet chips, not a paragraph */
/* Only the popup's own spacing — the chip's colours come from .rsc-chip
   itself now, so there is nothing here to keep in sync with it. */
body #word-popup .rsc-chip {
  padding: 3px 10px !important; font-size: var(--t-small) !important;
  margin: 0 4px 4px 0 !important;
}
/* Forms / Glossed were run-on lists — label them and let them breathe */
body #word-popup .rsc-forms, body #word-popup .rsc-gloss-refs {
  display: block !important; margin-top: 10px !important;
  font-size: var(--t-small) !important; color: var(--ink-2) !important; line-height: 1.75 !important;
}
body #word-popup .rsc-forms b, body #word-popup .rsc-gloss-refs b,
body #word-popup .rsc-block b {
  display: block !important; font-weight: 400 !important;
  font-size: var(--t-micro) !important; letter-spacing: .16em !important;
  text-transform: uppercase !important; color: var(--here) !important;
  margin-bottom: 3px !important;
}


/* The mode row stays VISIBLE. It is how you switch Interlinear / Hebrew /
   Dual / Transliterate / Nikkud, and hiding it behind a menu removed
   navigation people actually use. Compact, on-system, and reachable. */
.controls-bottom {
  display: flex !important;
  position: fixed !important; left: 0; right: 0; bottom: 0; z-index: var(--z-chrome);
  background: var(--chrome) !important;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 6px !important;
  border-top: 1px solid var(--chrome-line) !important;
}
.controls-bottom button {
  flex: 1 1 0; min-height: 44px !important;   /* 42 was 2px under the touch minimum */
  border-radius: var(--r-control) !important;
  font-size: var(--t-small) !important;
  background: transparent !important;
  color: var(--on-chrome) !important;
  border: 1px solid color-mix(in srgb, var(--on-chrome) 24%, transparent) !important;
}
.controls-bottom button.active {
  background: var(--here-chrome) !important;
  color: var(--chrome) !important;
  border-color: transparent !important;
}

/* the word card is PAPER — near-white ink on white was 1.05:1.

   COLOUR IS SET ON CONTAINERS AND INHERITED. It used to be forced onto
   every descendant with `.popup-hebrew *` and `.rsc-slot *`, and a blanket
   `*` at !important cannot be reasoned about locally — it silently beat two
   deliberate rules declared just above it at equal specificity:
     · .rsc-chip-here asked for #fff on emerald and rendered at 1.23:1
     · .qq (qamats qatan) is red everywhere in the reader and was black here
   Both were invisible in a screenshot. Set the container, add exceptions. */
body #word-popup .popup-hebrew { color: var(--ink) !important; }
body #word-popup .popup-strong,
body #word-popup .popup-detail,
body #word-popup .rsc-slot { color: var(--ink-2) !important; }
body #word-popup .popup-detail strong { color: var(--ink) !important; }
body #word-popup .popup-translit { color: var(--ink-3) !important; }
body #word-popup .popup-gloss { color: var(--ink) !important; }
body #word-popup .rsc-root, body #word-popup a,
body #word-popup .rsc-refs-link { color: var(--here) !important; }
/* Every "go somewhere" link in the card looks the same and is stated ONCE.
   These three used to carry their colour inline from JavaScript — mint,
   which is the accent for dark chrome bars and is near-invisible on paper.
   Removing the inline style removed the underline with it, so they read as
   plain grey text with no affordance; both halves belong here, not in JS. */
/* Secondary to the filled "View all N references" button above them, and on
   paper — so ink, underlined, not a second gold call to action competing with
   the primary one. */
body #word-popup .popup-xref-direct,
body #word-popup .popup-xref-link {
  color: var(--ink-2) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-size: 0.9em !important;
  display: inline-block !important;
  padding: 6px 0 !important;
  min-height: 32px !important;
}

/* ── THE WORD CARD, SIMPLIFIED ───────────────────────────────────────────
   The card stated the same word four times, carried four competing totals
   (a header count, six chips that already summed to it, a sense count and a
   Tanakh count), and ended on two small links of equal weight so neither
   read as the way on. It now answers three questions in order — what is this
   word · what is it built from · where else does it live — and nothing has
   been deleted: the concordance detail is folded behind one disclosure. */
body #word-popup .rsc-parse {
  font-size: 0.88em !important;
  color: var(--ink-3) !important;
  margin: 2px 0 6px;
  line-height: 1.45;
}
body #word-popup .rsc-meaning {
  font-size: 0.98em !important;
  color: var(--ink) !important;
  line-height: 1.45;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
body #word-popup .rsc-meaning .rsc-strongs {
  margin-left: auto;
  flex: none;
  font-size: 0.76em !important;
  color: var(--ink-3) !important;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  /* It opens the app's own dictionary, so it has to look and behave like a
     control: a 32px target, not a 9px number to poke at. */
  cursor: pointer;
  padding: 7px 2px 7px 10px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
body #word-popup .rsc-meaning .rsc-strongs:hover { color: var(--here) !important; }
body #word-popup .rsc-meaning .rsc-strongs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
body #word-popup .popup-strong-link { cursor: pointer; text-decoration: underline; }
body #word-popup .rsc-rootline { margin-top: 6px; font-size: 0.9em !important; }
body #word-popup .rsc-root {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
body #word-popup .rsc-dim { color: var(--ink-3) !important; }
body #word-popup .rsc-sense {
  margin: 8px 0 2px;
  font-size: 0.92em !important;
  color: var(--ink) !important;
}
/* One disclosure for the concordance detail. The marker is the affordance, so
   the summary needs no decoration of its own beyond a real touch target. */
body #word-popup .rsc-more { margin: 8px 0 4px; }
body #word-popup .rsc-more > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.85em !important;
  color: var(--ink-3) !important;
  padding: 7px 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body #word-popup .rsc-more > summary::-webkit-details-marker { display: none; }
body #word-popup .rsc-more > summary::before {
  content: '\25B8';
  font-size: 0.9em;
  transition: transform 0.15s ease;
}
body #word-popup .rsc-more[open] > summary::before { transform: rotate(90deg); }
body #word-popup .rsc-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
body #word-popup .rsc-dl-row { font-size: 0.85em !important; line-height: 1.55; margin: 3px 0; }
body #word-popup .rsc-dl-k { color: var(--ink-3) !important; margin-right: 4px; }
/* The one primary action. It was a small underlined link the same size as the
   cross-reference link beside it; a card with two equal small links has no
   way on, only two guesses. */
body #word-popup .rsc-refs-btn {
  display: block !important;
  width: 100%;
  margin: 10px 0 2px;
  padding: 11px 14px !important;
  min-height: 44px !important;
  font-family: inherit;
  font-size: 0.92em !important;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer !important;
  color: #fff !important;
  background: var(--here);
  border: 1px solid var(--here);
  border-radius: 8px;
}
body #word-popup .rsc-refs-btn:hover { background: color-mix(in srgb, var(--here) 88%, #000); }
body #word-popup .rsc-refs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* In dark the accent is BRIGHT (#D9B45F), and a bright accent is a mark colour,
   never a fill: a full-width slab of it glares in a dark reading card, and it
   put white text at 1.97:1. Outlined instead — the same gold, used as a mark,
   which reads at 8.4:1 on the card. */
body.dark-mode #word-popup .rsc-refs-btn {
  background: color-mix(in srgb, var(--here) 12%, transparent);
  border-color: color-mix(in srgb, var(--here) 55%, transparent);
  color: var(--here) !important;
}
body.dark-mode #word-popup .rsc-refs-btn:hover { background: color-mix(in srgb, var(--here) 20%, transparent); }
/* the qamats qatan stays red in the card, exactly as it is in the reader */
body #word-popup .qq, body #word-popup .popup-hebrew .qq { color: var(--qq) !important; }
body.dark-mode #word-popup .qq,
body.dark-mode #word-popup .popup-hebrew .qq { color: var(--qq-bright) !important; }
/* the phone dismiss button — was gold on navy, two schemes ago */


/* ══════════════════════════════════════════════════════════════════════
   FORMERLY INJECTED FROM JAVASCRIPT — moved here 2026-09-03.

   nav_engine.js and root_scorecard.js each built a <style> at runtime and
   appended it to <head>, which wins the cascade at equal specificity. No
   rule in this file could beat them, so every fix became a specificity
   fight or an edit to the JS.

   !important IS KEPT. I stripped it on the first attempt, reasoning that
   nothing outranks these now — wrong: reader.css is a LINKED sheet and
   every volume page has an inline <style> that comes after it. Without
   !important the page rules win and the chapter headings render as raw
   interlinear stacks. The runtime sheet was never the only thing these
   had to beat.
   ══════════════════════════════════════════════════════════════════════ */

/* ── from nav_engine.js: the drawer and the study panel ── */
#nav-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-panel);
  width: 360px;
  max-width: 90vw;
  background: var(--surface-0) !important;
  color: var(--on-surface) !important;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  font-family: 'David Libre', 'Georgia', serif;
  border-right: 2px solid var(--gold-bright) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.35) !important;
  overflow: hidden;
}
#nav-sidebar .nav-division {
  color:var(--gold-bright) !important;
  border-top-color:color-mix(in srgb, var(--gold-bright) 25%, transparent) !important;
}
#nav-sidebar .nav-book-row:hover,#nav-sidebar .nav-book-row.expanded,#nav-sidebar .nav-book-row.nav-focus-row {
  background:var(--surface-2) !important;
}
#nav-sidebar .nav-book-row .nb-heb {
  color: var(--gold-bright) !important;
}
#nav-sidebar .nav-book-row .nb-en {
  color: var(--gold-pale) !important;
}
/* Full strength, not 85%. The ▸ is the affordance that says a book opens
   into its chapters, and at 85% it measured 3.76:1 in light and 4.26 in
   sepia — over the 3:1 non-text bar but under the text floor, on an 11px
   glyph. Removing the transparency clears 4.5:1 everywhere and costs
   nothing. */
#nav-sidebar .nav-book-row .nb-ch,#nav-sidebar .nav-book-row .nb-arrow {
  color:var(--gold-bright) !important;
}
/* The gold-era chapter grid lived here — filled cells, gold borders, a
   gold-tinted drop shadow (rgba(138,106,28,.30)) and gold numerals. It was
   invisible only because the block above outranked it by a single element
   selector, so removing that block would have resurrected it. Deleted with
   it. The grid's one home is nav_engine.css. */
#nav-sidebar .nav-search-results {
  background: var(--surface-sunken) !important;
}
#nav-sidebar .nav-search-result {
  border-bottom-color: color-mix(in srgb, var(--gold-bright) 12%, transparent) !important;
}
#nav-sidebar .nav-search-result:hover,#nav-sidebar .nav-search-result.active {
  background:var(--surface-2) !important;
}
#nav-sidebar .nav-search-result .sr-name {
  color: var(--on-surface) !important;
}
#nav-sidebar .nav-search-result .sr-heb {
  color: var(--gold-bright) !important;
}
#nav-sidebar .nav-footer {
  background: var(--surface-sunken) !important;
  border-top-color: color-mix(in srgb, var(--gold-bright) 30%, transparent) !important;
}
#nav-sidebar .nav-footer .nf-hint {
  color: var(--ink-3) !important;
}
/* .nav-ch-cell dropped from this list — nav_engine.css already gives it the
   same var(--surface-1) dark fill alongside the book rows it sits among */
body.dark-mode #nav-sidebar .nav-book-row:hover,body.dark-mode #nav-sidebar .nav-book-row.expanded {
  background:var(--surface-1) !important;
}
body.dark-mode #nav-sidebar .nav-search-results,body.dark-mode #nav-sidebar .nav-footer {
  background:var(--surface-sunken) !important;
}
#nav-sidebar .nav-library,#nav-sidebar .nav-book-list {
  background:transparent !important;
}
#nav-sidebar .nav-search-wrap {
  background:var(--surface-sunken) !important;
  border-bottom:1px solid color-mix(in srgb, var(--here-chrome) 35%, transparent) !important;
}
#nav-sidebar .nav-search-wrap input {
  background: var(--surface-2) !important;
  color: var(--gold-pale) !important;
  border: 1px solid color-mix(in srgb, var(--here-chrome) 40%, transparent) !important;
}
#nav-sidebar .nav-search-wrap input::placeholder {
  color: color-mix(in srgb, var(--gold-bright) 55%, transparent) !important;
}
#nav-sidebar .nav-icon-btn,#nav-sidebar .nav-close-btn {
  color:var(--gold-bright) !important;
}
/* The pin above (and its twin in sw_theme.css) is `#id .class !important`,
   which outranks any `.class:hover` no matter where that lives — so these
   buttons had no hover state at all, and neither did the token: repointing
   --sw-gold-bright could never have shown up here. A state rule has to sit
   at the pin's own weight to be seen, so it lives beside it. */
#nav-sidebar .nav-icon-btn:hover,#nav-sidebar .nav-close-btn:hover {
  color:var(--here-chrome) !important;
}
#nav-sidebar .nav-vol-tabs {
  background:var(--surface-sunken) !important;
  border-bottom:1px solid color-mix(in srgb, var(--here-chrome) 30%, transparent) !important;
}
#nav-sidebar .nav-vol-tab {
  color:color-mix(in srgb, var(--gold-bright) 80%, transparent) !important;
}
#nav-sidebar .nav-vol-tab:hover {
  background:var(--surface-2) !important;
}

/* Volume tabs: the CURRENT volume is the only one that gets emphasis.
   Inactive tabs recede to muted chrome text; the active one comes forward
   to full chrome text and carries the mint underline. Mint appears exactly
   once in this row, which is what makes it mean "you are here". */
#nav-sidebar .nav-vol-tab .vt-heb,
#nav-sidebar .nav-vol-tab .vt-en {
  color:var(--on-chrome-2) !important;
}
#nav-sidebar .nav-vol-tab.active .vt-heb,
#nav-sidebar .nav-vol-tab.active .vt-en {
  color:var(--on-chrome) !important;
}
#nav-sidebar .nav-vol-tab.active {
  background: var(--surface-2) !important;
  border-bottom: 2px solid var(--chrome-gold) !important;
  border-bottom-color: var(--here-chrome) !important;
}
#xref-panel {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-left: 2px solid var(--gold-bright) !important;
  background: var(--surface-0) !important;
  color: var(--on-surface) !important;
}

/* .rsc-il-ref / .xref-ref-word / .rsc-il-more / .rsc-part render inside
   #rsc-panel, the references sheet already rebuilt as a paper card. They
   were missed in that pass because they carry their own class names
   instead of an .rsc-panel-* prefix — same surface, same rule. */
.rsc-il-ref {
  color: var(--ink);
  font-weight: 700;
  font-size: 1em;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 4px;
}
/* Interlinear proportion. The reading view sets the house convention —
   Hebrew 42px over a 21px gloss, exactly half — and this sheet had drifted
   to 0.92: the English was the same size as the Hebrew it glosses, so the
   Hebrew lost primacy and each card read as an English sentence.
   The 1.35em below never applied: a bare `.hw { font-size: var(--t4)
   !important }` outranks it, which is why the Hebrew sat at 14.72px. This
   scope has to carry !important to be seen at all. The component base is
   lifted a little so half of the Hebrew still clears ~12px — a dense
   reference list must not push the gloss below readable. */
#rsc-panel .xref-ref-word { font-size: 1.15em; }
#rsc-panel .xref-ref-word .hw {
  font-family: 'David Libre', serif;
  font-size: 1.4em !important;
  color: var(--ink);
  line-height: 1.5;
}
#rsc-panel .xref-ref-word .en {
  font-size: 0.72em;
  color: var(--ink-2);
  direction: ltr;
  line-height: 1.35;
}
.rsc-il-more {
  display: block;
  width: 100%;
  margin: 8px 0 2px;
  padding: 9px;
  border-radius: 8px;
  cursor: pointer;
  background: var(--paper-2);
  border: 1px solid var(--rule-light);
  color: var(--here);
  font-size: 0.9em;
  min-height: 44px;
}
.rsc-part {
  font-size: 1.15em;
  color: var(--here);
  margin-bottom: 3px;
  direction: rtl;
}
body.dark-mode #xref-panel {
  background:var(--surface-0) !important;
}
#xref-panel .xref-panel-header {
  flex-shrink: 0;
  background: var(--surface-sunken) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--here-chrome) 35%, transparent) !important;
}
#xref-panel .xref-panel-header h3,#xref-panel .xref-panel-word {
  color:var(--gold-bright) !important;
}
#xref-panel .xref-panel-close {
  color: var(--gold-bright) !important;
  opacity: 0.85;
}
#xref-panel .xref-study-tabs {
  background:var(--surface-sunken) !important;
  border-bottom-color:color-mix(in srgb, var(--gold-bright) 30%, transparent) !important;
}
#xref-panel .xref-study-tab {
  background:var(--surface-2) !important;
  color:color-mix(in srgb, var(--gold-bright) 85%, transparent) !important;
  border-color:color-mix(in srgb, var(--gold-bright) 30%, transparent) !important;
}
#xref-panel .xref-study-tab.active {
  background:var(--gold-bright) !important;
  color:var(--surface-0) !important;
  font-weight:700 !important;
}
#xref-panel .xref-ref-word,#xref-panel .xref-category {
  color:var(--gold-bright) !important;
}
#xref-panel .xref-ref-content {
  color:var(--on-surface) !important;
}
#xref-panel .xf-bookmark-item {
  background:var(--surface-2) !important;
  border-color:color-mix(in srgb, var(--gold-bright) 25%, transparent) !important;
}
#xref-panel .xf-bookmark-item:hover {
  background:var(--surface-3) !important;
}
#xref-panel .xf-bookmark-item .xf-bm-title {
  color:var(--gold-pale) !important;
}
#xref-panel .xf-bookmark-item .xf-bm-heb {
  color:var(--gold-bright) !important;
}
#xref-panel .study-pane-hint,#xref-panel .study-pane-sub {
  color:var(--ink-3) !important;
}
/* The Study panel's action buttons — Add current, Clear all, Annotation
   list, Export, Import, Dictionary. They sit in the panel BODY, which is
   paper, and they were drawn for the panel's chrome era: a --here-chrome
   border (mint on white) with --gold-pale text and a --gold-bright hover.
   The mint edge is what read as "puke" around every button. Paper tokens
   throughout, and the same accent the other paper cards now use. */
#xref-panel .study-btn-row button {
  background:var(--paper-2) !important;
  color:var(--ink) !important;
  border:1px solid color-mix(in srgb, var(--here) 38%, transparent) !important;
}
#xref-panel .study-btn-row button:hover {
  background:color-mix(in srgb, var(--here) 8%, var(--paper-2)) !important;
  border-color:var(--here) !important;
}
#xref-panel .hw {
  color:var(--gold-bright) !important;
}
#xref-panel .tl {
  color:var(--ink-3) !important;
}
#xref-panel .gl {
  color:var(--gold-pale) !important;
}
#xref-panel .arr-tl,#xref-panel .arr-gl {
  color:color-mix(in srgb, var(--gold-bright) 45%, transparent) !important;
}
#xref-panel .verse-num {
  color:color-mix(in srgb, var(--gold-bright) 80%, transparent) !important;
}
#xref-panel .verse {
  border-color:color-mix(in srgb, var(--gold-bright) 15%, transparent) !important;
}
#xref-panel .xref-refs,#xref-panel .xref-pane {
  color:var(--on-surface) !important;
}
#xref-panel .xref-ref-loading,#xref-panel .xref-ref-nodata {
  color:var(--ink-3) !important;
}
/* Same chrome-era mint on the panel's paper body — the verse cards. Paper
   accent, and the same 38% weight the other paper cards carry. */
#xref-panel .xref-ref-card {
  background:var(--paper-2) !important;
  border:1px solid color-mix(in srgb, var(--here) 38%, transparent) !important;
  border-radius:10px;
}
/* The REFERENCE, not "any span in the title row". That row now also holds the
   "Go to verse" chip, and `.xref-ref-title span` was catching it and painting
   it gold over its own ink — a rule that names a tag instead of a thing will
   collect whatever is added to the row later. */
#xref-panel .xref-ref-title,
#xref-panel .xref-ref-title > .xref-ref-link,
#xref-panel .xref-ref-title > span:not(.xref-ref-goto) {
  color:var(--gold-bright) !important;
}
/* The chip already has a border and a hover; its label does not also need to
   be gold. Gold in this panel means the Hebrew headword and the reference
   heading — the two things the reader is looking for. */
#xref-panel .xref-ref-goto {
  color:var(--ink-2) !important;
  text-decoration:none;
}
#xref-panel .xref-ref-word {
  color:var(--on-surface) !important;
}
#xref-panel .xref-ref-word .en,#xref-panel .en {
  color:var(--gold-pale) !important;
}
#xref-panel .xref-ref-word .he,#xref-panel .he {
  color:var(--gold-bright) !important;
}


/* ── from root_scorecard.js: the word card and the references panel ── */
.tt-mark {
  color:var(--tap-blue,var(--here));
  font-weight:700;
}
.tt-note {
  font-style:italic;
  font-size:0.9em;
  opacity:0.85;
}
.rsc-il-wrap {
  margin-bottom:14px;
}
.rsc-il-card {
  /* a paper card, edged in the accent like the sheet around it — see the
     card-edge block near #word-popup. --rule-light here measured 1.24
     against the ground, which is no edge at all. */
  border:1px solid color-mix(in srgb, var(--here) 38%, transparent);
  border-radius:9px;
  padding:10px 12px;
  margin:9px 0;
  background:var(--paper-2);
}
/* stale chrome copy of .rsc-il-ref deleted — it re-pointed the verse
   reference to --on-chrome AFTER the paper fix higher up this same file,
   so the corrected rule never took effect and the heading rendered
   #ecfdf5 on white at 1.05:1. Only the alignment was unique to it. */
.rsc-il-ref { align-self:center; }
.rsc-il-load {
  opacity:0.6;
  font-style:italic;
  font-size:0.85em;
}
#rsc-panel .xref-ref-content {
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  direction:rtl;
  align-items:flex-start;
}
#rsc-panel .xref-ref-word {
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* stale chrome copies of the reference word/gloss deleted — same defect:
   they overrode the paper versions above, so every Hebrew word and English
   gloss in the references sheet rendered #ecfdf5 on white at 1.05:1. */
#rsc-panel .xref-ref-word .en { opacity:1; }
#rsc-panel .xref-ref-arr {
  opacity:0.35;
  align-self:center;
}
/* stale chrome copy of .rsc-il-more deleted — the paper version above
   carries the same layout with readable colours. */
.rsc-block + .rsc-block {
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--here-chrome) 35%, transparent);
}
/* stale chrome copy of .rsc-part deleted (--sw-gold on paper). */
.rsc-chips {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:6px 0;
  direction:ltr;
}
/* The volume chip states its OWN colour pair. It used to set a background
   and let the text colour arrive from whatever ancestor happened to win,
   which is how the selected chip ended up at 1.23:1 inside the word card.
   A component that carries a background owns its foreground — always. */
.rsc-chip {
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-size:0.78em;
  background:var(--paper-2);
  color:var(--ink-2);
  border:1px solid var(--rule-light);
  white-space:nowrap;
}
.rsc-chip-here {
  background:var(--here);
  color:#fff;
  border-color:transparent;
  font-weight:600;
}
body.dark-mode .rsc-chip-here {
  background:var(--here);
  color:var(--chrome-2);
}
#rsc-panel {
  position:fixed;
  inset:0;
  z-index: var(--z-sheet);
  display:none;
  direction:ltr;
}
#rsc-panel.open {
  display:block;
}
/* ── The references sheet IS the word card, at full size ───────────────
   It was background:var(--chrome) with a mint border, a mint title and a
   mint close — a dark green panel holding green chips and green headings,
   so every element competed and none read as primary. The word popup two
   screens away was already paper with ink text and one accent per region,
   and that is the one the reader liked. Same component, same treatment:
   paper surface, ink text, accent used ONCE per region (group heading,
   selected chip, link). Nothing here is a new colour — it is the card's
   own tokens applied to the sheet that forgot them. */
#rsc-panel .rsc-panel-backdrop {
  position:absolute;
  inset:0;
  background:color-mix(in srgb, var(--chrome) 55%, transparent);
}
#rsc-panel .rsc-panel-card {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(560px,92vw);
  max-height:82vh;
  display:flex;
  flex-direction:column;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--rule-light);
  border-radius:var(--r-sheet);
  box-shadow:var(--e3);
  overflow:hidden;
}
#rsc-panel .rsc-panel-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--rule-light);
}
#rsc-panel .rsc-panel-title {
  color:var(--ink);
  line-height:1.3;
}
#rsc-panel .rsc-panel-meaning {
  color:var(--ink-2);
  font-size:0.85em;
  font-style:italic;
  margin-top:2px;
}
#rsc-panel .rsc-panel-close {
  background:none;
  border:none;
  color:var(--ink-3);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
  min-width:44px;
  min-height:34px;
}
#rsc-panel .rsc-panel-body {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 18px 20px;
  font-size:0.92em;
}
#rsc-panel .rsc-vol {
  margin-bottom:14px;
}
/* the volume heading is the ONE accent in its region */
#rsc-panel .rsc-vol-title {
  color:var(--here);
  font-weight:700;
  margin:10px 0 6px;
  border-bottom:1px solid var(--rule-light);
  padding-bottom:3px;
}
#rsc-panel .rsc-vol-count {
  color:var(--ink-3);
  font-weight:400;
  font-size:0.85em;
}
#rsc-panel .rsc-book {
  margin:3px 0;
  line-height:1.7;
}
#rsc-panel .rsc-book-name {
  font-weight:700;
  color:var(--ink);
}
#rsc-panel a.rsc-ref {
  color:var(--here);
  text-decoration:none;
  padding:1px 2px;
  min-height:32px;
}
#rsc-panel a.rsc-ref:hover {
  text-decoration:underline;
}
#rsc-panel .rsc-books {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
/* book counts are the card's chips — quiet on paper, not outlined in accent */
#rsc-panel .rsc-bookcount {
  background:var(--paper-2);
  color:var(--ink-2);
  border:1px solid var(--rule-light);
  border-radius:999px;
  padding:2.5px 9px;
  font-size:0.85em;
}
#rsc-panel .rsc-bookcount.rsc-chip-here {
  background:var(--here);
  color:#fff;
  border-color:transparent;
  font-weight:600;
}
#rsc-panel .rsc-note {
  color:var(--ink-3);
  font-style:italic;
  margin-bottom:8px;
}
#rsc-panel .rsc-loading {
  color:var(--ink-3);
  padding:16px 0;
  text-align:center;
}

body.dark-mode #glossary-panel {
  background:#0a0a0a !important;
}
#glossary-panel .glossary-header {
  border-bottom:1px solid color-mix(in srgb, var(--here-chrome) 35%, transparent) !important;
}
#glossary-panel .glossary-header h3 {
  color:var(--sw-gold,var(--here-chrome)) !important;
}
#glossary-panel .glossary-close {
  color:var(--sw-gold,var(--here-chrome)) !important;
}
#glossary-panel .glossary-controls input,#glossary-panel .glossary-controls select {
  background:var(--sw-navy-hover,var(--surface-2)) !important;
  color:var(--on-chrome) !important;
  border:1px solid color-mix(in srgb, var(--here-chrome) 40%, transparent) !important;
}
#glossary-panel .glossary-controls input::placeholder {
  color:color-mix(in srgb, var(--gold-bright) 60%, transparent);
}
#glossary-panel .glossary-tab {
  background:var(--sw-navy-hover,var(--surface-2)) !important;
  color:color-mix(in srgb, var(--gold-bright) 85%, transparent) !important;
  border-color:color-mix(in srgb, var(--gold-bright) 35%, transparent) !important;
}
#glossary-panel .glossary-tab.active {
  background:var(--sw-gold,var(--here-chrome)) !important;
  color:var(--sw-navy,var(--chrome)) !important;
  font-weight:700;
}
/* ══════════════════════════════════════════════════════════════════════
   GLOSSARY ENTRY LIST — the last surviving piece of the pre-emerald
   scheme. Every rule below read --on-chrome / --sw-gold / --sw-navy
   DIRECTLY instead of through the surface-alias layer, so it painted
   every one of 18,400 entries as if the panel were still dark chrome —
   near-white text on white paper, invisible in both light and dark.
   The panel's own background/border/card treatment is already correct
   (sw_theme.css's "cards inside them get the card treatment" rule, which
   is why #glossary-panel and .glossary-entry themselves are NOT restated
   here) — only their CONTENT, which that rule doesn't reach, needed it.
   One accent per region: the root/headword, category headings, links. ── */
#glossary-panel .glossary-entry {
  margin:6px 10px;
  padding:10px 12px;
}
#glossary-panel .glossary-entry:hover {
  border-color:var(--here);
}
#glossary-panel .glossary-root {
  color:var(--here) !important;
}
#glossary-panel .glossary-count {
  color:var(--ink-2) !important;
  background:var(--paper-2);
  border-radius:9px;
  padding:1px 8px;
  font-weight:700;
}
#glossary-panel .glossary-meaning {
  color:var(--ink) !important;
}
#glossary-panel .glossary-detail {
  color:var(--ink-2) !important;
}
#glossary-panel .glossary-category-badge {
  background:var(--paper-2);
  color:var(--ink-2) !important;
  border:1px solid var(--rule-light);
}
#glossary-panel .glossary-category-header {
  color:var(--here) !important;
  border-bottom:1px solid var(--rule-light);
}
#glossary-panel .glossary-form-chip {
  background:var(--paper-2);
  color:var(--ink-2) !important;
  border:1px solid var(--rule-light);
}
#glossary-panel .glossary-form-chip:hover {
  background:color-mix(in srgb, var(--here) 10%, var(--paper-2));
}
#glossary-panel .glossary-biblical-ref-key {
  color:var(--here) !important;
}
#glossary-panel .glossary-ref-link {
  color:var(--here) !important;
  text-decoration:underline;
}
#glossary-panel .glossary-refs-book {
  color:var(--ink-2) !important;
}
#glossary-panel .glossary-highlight-btn {
  background:var(--here) !important;
  color:#fff !important;
  border:none;
}
#glossary-panel .glossary-biblical-ref {
  color:var(--ink-2) !important;
}
#glossary-panel .glossary-biblical-ref-note {
  color:var(--ink-2) !important;
}
/* was declared twice (border-top-only, then again with the fill) — one
   recessed reference block, merged into a single rule. */
#glossary-panel .glossary-biblical-section {
  background:var(--paper-2) !important;
  border-top:1px solid var(--rule-light) !important;
  color:var(--ink-2) !important;
}
#glossary-panel .glossary-biblical-section strong {
  color:var(--here) !important;
}
#glossary-panel .glossary-refs-section {
  border-top-color:var(--rule-light) !important;
  color:var(--ink-2) !important;
}
#glossary-panel .glossary-refs-section > strong {
  color:var(--here) !important;
}
#glossary-panel .glossary-controls {
  color:var(--ink-2) !important;
  border-bottom-color:var(--rule-light) !important;
}
/* .glossary-controls is a CHROME strip, not paper — paper ink on it was
   dark-on-dark (1.9:1) and the "Sort:" label was effectively invisible. */
#glossary-panel .glossary-sort {
  color:var(--on-chrome-2) !important;
}
#glossary-panel .glossary-detail strong {
  color:var(--ink) !important;
}
#glossary-panel .glossary-entry small {
  color:var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════════════
   ANNOTATIONS PANEL — the body content. Was byte-identical inline CSS in
   ot/nt/dc/pgp/jst (five copies of the same twelve rules, edited five at
   a time forever). One copy here; the page copies are deleted. bom.html
   keeps its own — its annotations markup genuinely differs, and it is
   out of scope for the sibling consolidation. The tab strip itself is
   NOT restated: .ann-tab / :hover / .active are already governed by the
   shared panel-tab rules above, alongside glossary and xref. ── */
#annotations-panel .ann-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
#annotations-panel .ann-panel-header h3 {
  font-size: 1.3em; color: var(--here); margin: 0;
}
#annotations-panel .ann-panel-close {
  cursor: pointer; font-size: 1.4em; color: var(--ink-3); padding: 4px 8px;
}
#annotations-panel .ann-export-btn {
  background: var(--accent); color: var(--on-accent);
  border: none; padding: 6px 14px; border-radius: var(--r-control);
  cursor: pointer; font-family: 'David Libre', 'Georgia', serif;
  font-size: 0.85em; margin-top: 12px; min-height: 44px;
}
#annotations-panel .ann-item {
  padding: 8px; border: 1px solid var(--rule-light);
  border-radius: var(--r-control); margin-bottom: 6px; font-size: 0.85em;
}
#annotations-panel .ann-item-ref {
  font-weight: 600; color: var(--here); margin-bottom: 4px;
}
#annotations-panel .ann-item-text { color: var(--ink); direction: rtl; }
#annotations-panel .ann-item-note {
  font-style: italic; color: var(--ink-3); margin-top: 4px;
}
/* .ann-hl was declared twice per page with different radii (4px then
   2px); the later value was the live one, so 2px is the real setting. */
.ann-hl { border-radius: 2px; }
.ann-ul {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* Positioning only — background/color/border are sw_theme.css's job now
   (its combined light/dark selector list already covers #glossary-panel
   correctly) and restating them here just grows the same disease back. */
#glossary-panel {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-100%) !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  scrollbar-color: color-mix(in srgb, var(--here) 30%, transparent) var(--paper-2);
}
#glossary-panel::-webkit-scrollbar-thumb {
  background:color-mix(in srgb, var(--here-chrome) 40%, transparent);
}
#glossary-panel::-webkit-scrollbar-track {
  background:var(--paper-2);
}
@media (max-width:600px) {
  #word-popup {
  font-size:17px !important;
  line-height:1.5 !important;
  width:min(94vw,440px) !important;
  max-width:94vw !important;
  max-height:80vh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important;
}
#word-popup .popup-hebrew,#word-popup #popup-hw {
  font-size:1.6em !important;
  line-height:1.4 !important;
}
#word-popup .popup-gloss,#word-popup #popup-gl {
  font-size:1.1em !important;
}
#word-popup .popup-translit,#word-popup #popup-translit {
  font-size:0.95em !important;
}
.rsc-chips {
  gap:6px;
  margin:8px 0;
}
.rsc-chip {
  font-size:0.95em;
  padding:5px 11px;
  border-radius:13px;
}
.rsc-refs-link {
  font-size:1em !important;
  display:inline-block;
  padding:9px 2px;
  min-height:44px;
}
#rsc-panel .rsc-panel-card {
  width:96vw;
  max-height:88vh;
}
#rsc-panel .rsc-panel-body {
  font-size:17px;
  line-height:1.55;
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
}
#rsc-panel .rsc-panel-title {
  font-size:1.15em;
}
#rsc-panel .rsc-panel-meaning {
  font-size:0.95em;
}
#rsc-panel .rsc-vol-title {
  font-size:1.05em;
}
#rsc-panel .rsc-vol-count {
  font-size:0.9em;
}
#rsc-panel a.rsc-ref {
  display:inline-block;
  padding:7px 6px;
  min-height:44px;
  min-width:34px;
}
#rsc-panel .rsc-panel-close {
  font-size:32px;
  min-width:48px;
  min-height:48px;
}
}


/* ═══════════════════════════════════════════════════════════════════════
   PANEL REFLOW — a side panel insets the reader, it does not cover it
   ═══════════════════════════════════════════════════════════════════════
   Side panels are position:fixed overlays, so the reading column never knew
   they were there. With the drawer (360px) and Study (380px) both open on
   an 820px viewport, 740px of an 820px reader was underneath them and the
   text survived as an 80px sliver.

   SWLayers in nav_engine.js now guarantees at most one panel is open, and
   sets .sw-panel-left / .sw-panel-right on <body>. Above COEXIST_MIN the
   reader gives up the width instead of hiding under it; below it the panel
   stays an overlay with a scrim, which is correct on a phone.

   The widths here MUST match #nav-sidebar and #xref-panel. They are stated
   once, as tokens, and both the panel and the inset read them.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── TYPE ──────────────────────────────────────────────────────────
       One ratio, seven steps, nothing outside it. Declared in em because
       the A+/A− control sets a percentage on #page — a px scale would
       silently kill the reader's zoom. (Was 22 ad-hoc sizes.)          */
  /* 11 — labels, counts, verse numerals */
  /* 13 — transliteration, meta          */
  /* 15 — the gloss, UI text             */
  /* 19 — book names, English body       */
  /* 24 — section heads                  */
  /* 30 — the reading size               */
  /* 38 — chapter opening                */
  /* ── SPACE — 4px rhythm ── */
  /* ── RADIUS ── */
  /* ── ELEVATION ── */
  /* ── LAYERS — the one z-index scale ────────────────────────────────
       Before this existed there were 13 invented z-index values across five
       files (2, 99, 110, 900, 998, 1290, 1300, 2000, 5000, 5001, 9500, 9999,
       10050). The Study panel sat at 1200 and the drawer's scrim at 5000, so
       opening the drawer dimmed a Study panel it could not close, while the
       word popup at 9500 floated over both. Three overlays, no order.
  
       Never write a raw z-index again. Pick the rank that describes what the
       thing IS; the gaps are deliberate so a component can sit just above its
       own neighbour (--z-panel + 1) without reaching the next rank.
  
       Ranks also drive arbitration in reader_ui.js: opening a PANEL closes
       other panels and popovers, a POPOVER closes other popovers, and a SHEET
       closes everything. Layer order and layer behaviour agree by design. ── */
  /* the page itself                                  */
  /* sticky headers inside a scrolling panel          */
  /* top bar, reader footer, reading progress         */
  /* search, which covers the bar it launches from    */
  /* the ONE dimmer, under whichever panel is topmost */
  /* drawer, Study, glossary, annotations             */
  /* word popup, share, highlight pop, sel toolbar    */
  /* shortcuts and other full-screen sheets           */
  /* offline banner, nav hint                         */
  /* skip link — must outrank everything to be usable */
  /* ── MOTION — one pair, not one duration copied everywhere ── */
  /* ── SURFACES ── */
  /* the reading ground        */
  /* recessed on paper         */
  /* the tool ground           */
  /* a thing you can act on    */
  /* bars. always. both themes */
  /* recessed chrome           */
  /* ── INKS — every pair clears 4.5:1 on its surface ── */
  /* 16.9:1 on paper */
  /*  8.9:1 */
  /* the gloss. 5.29:1 on card, 4.83:1 on panel.
                               #8b948d came out of the palette mock as a LABEL
                               colour and was 3.13:1 here — 856 failures.  */
  /*  5.7:1 — quietest legible */
  /* 12.6:1 on chrome */
  /*  6.0:1 */
  /* ── ROLES. An accent is a MEANING, not a decoration. Three, each
       with exactly one job. If a colour is not one of these, it is ink
       or it is a surface. This rules out gold-because-a-box-needed-an-
       edge and blue-because-a-word-is-tappable.                       */
  /* your current location, on paper */
  /* the same meaning, on navy       */
  /* qamats qatan — the only hue that
                                carries linguistic information  */
  /* a REFERENCE is not a colour: it is a dotted rule under the gloss */
  /* --header-bg / --sw-gold / --accent used to be redefined here, which
       silently overrode sw_theme.css for the whole site — --accent was not
       even read by this file. The gold for text on the navy chrome is
       --gold (5.9:1 on --navy); see the ramp in sw_theme.css. */
  --t-micro: 0.6875em;
  --t-small: 0.8125em;
  --t-body: 0.9375em;
  --t-large: 1.1875em;
  --t-title: 1.5em;
  --t-heb: 1.875em;
  --t-display: 2.375em;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r-bar: 0;
  --r-control: 8px;
  --r-card: 12px;
  --r-sheet: 18px;
  --e1: 0 1px 2px rgba(26,26,26,.04), 0 4px 14px rgba(26,26,26,.05);
  --e2: 0 2px 4px rgba(26,26,26,.05), 0 10px 26px rgba(26,26,26,.09);
  --e3: 0 6px 18px rgba(26,26,26,.10), 0 20px 54px rgba(26,26,26,.18);
  --z-base: 0;
  --z-raised: 10;
  --z-chrome: 100;
  --z-search: 150;
  --z-scrim: 300;
  --z-panel: 310;
  --z-pop: 400;
  --z-sheet: 500;
  --z-toast: 600;
  --z-skip: 700;
  --m-state: 120ms ease;
  --m-move: 220ms ease;
  /* ── INDIGO & GOLD (2026-09-04) ──────────────────────────────────────
     The palette chosen on the Spanish interlinear, carried across so the
     two books are bound alike. Same three-theme structure, same roles:
     the paper family is warm and neutral, the chrome family is one deep
     indigo, and the accent is gold — burnished and DEEP on paper, bright
     only where it sits on the indigo. That split is the whole discipline
     of this palette. Pale gold on a light ground is the one pairing it
     must never make: it measures 1.5:1 and it is what "no gold text on
     beige" was about. The gold on paper here is #8E6215, 5.16:1, which
     reads as bronze; the bright #DDB768 exists only on the bars.
     Every pair below was measured, not eyeballed. */
  --paper: #FCFAF7;
  --paper-2: #F0ECE5;
  --panel: #F0ECE5;
  /* THE CARD IS PAPER TOO. #FFFFFF measured chroma 0.01 — the one
     achromatic surface in a palette whose whole paper family is warm, so
     a card laid on the page read as a cold hole in it rather than a sheet
     of it. Warmed to chroma 5.38, which is a shade above the page's own
     1.66: the card is now the WARMER material, which is what makes it
     read as laid on top. Ink holds at 16.62:1 and the card still parts
     from the page at dE 3.96, so the surface-separation rule is intact
     without leaning on the border to do all the work. */
  --card: #FBF6EC;
  --chrome: #1B2A41;
  --chrome-2: #142132;
  --chrome-line: #2E4260;
  --ink: #191713;
  --ink-2: #554E45;
  --ink-3: #6D655B;
  --on-chrome: #F3EDE2;
  --on-chrome-2: #B9AEA0;
  /* the accent as a MARK on paper: verse numerals, titles, ornaments.
     Deep enough to be ink-weight (5.16:1), warm enough to read as gold. */
  --here: #8E6215;
  /* THE CHROME ACCENT — the accent as it appears on the dark bars and drawer,
     lighter than --here so it carries on chrome. It must stay a DIFFERENT
     value from --here: when the two were identical the paper-vs-chrome rule
     silently collapsed, and a colour meant for the bars started appearing on
     paper. */
  --here-chrome: #DDB768;
  /* #dc2626 measured 4.05:1 on the sepia ground — under the floor for the
     qamats-qatan mark, which is 12px linguistic information. Deepened. */
  --signal: #B91C1C;
  --signal-chrome: #f87171;
  --sw-chrome-h: 56px;
  font-family: 'David Libre', serif;
  --w-panel-left: 360px;
  --w-panel-right: 380px;
}

@media (min-width: 1000px) {
  .page, #page, #sw-reader-footer, #sw-top-bar, #reading-progress {
    transition: margin var(--m-move), width var(--m-move);
  }
  body.sw-panel-left  .page, body.sw-panel-left  #sw-reader-footer,
  body.sw-panel-left  #sw-top-bar, body.sw-panel-left  #reading-progress {
    margin-left: var(--w-panel-left);
  }
  body.sw-panel-right .page, body.sw-panel-right #sw-reader-footer,
  body.sw-panel-right #sw-top-bar, body.sw-panel-right #reading-progress {
    margin-right: var(--w-panel-right);
  }
  /* the scrim is for overlay mode only — an inset panel dims nothing */
  body.sw-panel-open #nav-overlay,
  body.sw-panel-open #panel-overlay { opacity: 0 !important; pointer-events: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   CONSOLIDATED FROM THE FIVE VOLUME PAGES (2026-09-03)
   104 rules that were byte-identical in ot/nt/dc/pgp/jst inline <style> —
   five copies, edited five at a time. Moved here once; the page copies
   are deleted. Verified by computed-style diff on all five pages:
   ZERO properties changed.

   TWO GUARDS, both learned the hard way in this pass:
   1. A selector moves only if declared EXACTLY ONCE on every page.
      Without this the gloss broke: '.gl' is declared three times inline
      per page, so the first (tiny) declaration was copied and all three
      deleted — 1,237 computed properties changed and the gloss inherited
      the RTL word-flow.
   2. '.gl.gl-nw' is deliberately NOT moved. It lives in an early <style>
      block that loads BEFORE reader.css; moving it here changed which
      max-width won (161.28px -> none) on 27 elements. Its own intent is
      max-width:none, so that is a latent bug worth fixing on purpose —
      not as a side effect of moving a file.

   Appended at the END: page <style> blocks load AFTER reader.css, so last
   position preserves the precedence these rules effectively had.
   ══════════════════════════════════════════════════════════════════════ */
#annotations-panel.open { display: block; transform: translateX(0); }
#dark-mode-toggle { background: transparent; border: 1px solid var(--chrome-line); color: var(--here); padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 0.9em; transition: all 0.2s; }
#glossary-panel.open { display: block; transform: translateX(0); }
#glossary-search { width: 100%; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; font-size: 1em; font-family: 'David Libre', 'Georgia', serif; margin-bottom: 8px; background: var(--bg); color: var(--ink); }
#glossary-sort-select { border: 1px solid var(--rule); padding: 4px 6px; border-radius: 3px; font-size: 0.8em; font-family: 'David Libre', 'Georgia', serif; background: var(--bg); color: var(--ink); }
#hl-pop #hl-note-input { width: 200px; height: 60px; font-size: 0.8em; font-family: 'David Libre', 'Georgia', serif; padding: 6px; border-radius: 4px; border: 1px solid var(--chrome-line); background: var(--chrome); color: var(--on-chrome); resize: none; }
#hl-pop .hl-note-row { gap: 6px; align-items: flex-end; border-top: 1px solid var(--chrome-line); padding-top: 6px; margin-top: 6px; }
#hl-pop .hl-note-save { background: var(--here); color: var(--chrome); border: none; padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 0.8em; font-family: 'David Libre', 'Georgia', serif; }
#hl-pop .sel-color { width: 27px; height: 27px; }
#hl-pop .sel-color-row { gap: 9px; margin-bottom: 0; }
#hl-pop .sel-color-row + .sel-color-row { margin-top: 6px; }
#hl-pop .sel-eraser { width: 27px; height: 27px; border-radius: 50%; cursor: pointer; border: 1px solid #5a5f75; color: #9a9ab0; font-size: 0.8em; display: inline-flex; align-items: center; justify-content: center; }
#hl-pop .sel-eraser:hover { border-color: var(--here-chrome); color: var(--here-chrome); }
#sel-note-input { width: 180px; height: 60px; font-size: 0.8em; font-family: 'David Libre', 'Georgia', serif; padding: 6px; border-radius: 4px; border: 1px solid var(--chrome-line); background: var(--chrome); color: var(--on-chrome); resize: none; }
#sel-note-row { display: none; padding: 6px; border-top: 1px solid var(--chrome-line); }
#sel-note-save { background: var(--here); color: var(--chrome); border: none; padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 0.8em; margin-top: 4px; font-family: 'David Libre', 'Georgia', serif; }
#sel-subpanel { display: none; padding: 6px; border-top: 1px solid var(--chrome-line); }
#sel-toolbar button { background: transparent; border: none; color: var(--here); cursor: pointer; font-size: 1.1em; padding: 6px 8px; border-radius: 4px; transition: background 0.15s; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', emoji; }
#sel-toolbar button.active { background: var(--here); color: var(--chrome); }
#sel-toolbar-mode-toggle.active { background: color-mix(in srgb, var(--here) 18%, transparent) !important; border-color: var(--here) !important; color: var(--on-chrome) !important; }
#sel-toolbar-reopen { display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index: var(--z-pop);background:var(--chrome);color:var(--here);border:1px solid var(--chrome-line);border-right:none;border-radius:10px 0 0 10px;padding:12px 7px;cursor:pointer;font-size:1.05em;line-height:1;box-shadow:-2px 2px 8px rgba(0,0,0,0.3);font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',emoji; }
#sel-toolbar-reopen:hover { background:var(--surface-2); }
#share-popup h3 { color: var(--accent-deep); margin-bottom: 16px; }
#share-popup.open { display: block; }
.glossary-category-header { font-size: 0.85em; font-weight: 700; color: var(--accent-deep); padding: 8px 0 4px; border-bottom: 1px solid var(--rule-light); margin-bottom: 6px; }
.glossary-close { cursor: pointer; font-size: 1.4em; color: var(--ink-light); padding: 4px 8px; }
.glossary-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.glossary-count { margin-left: auto; font-size: 0.8em; color: var(--ink-light); white-space: nowrap; }
.glossary-detail { display: none; margin-top: 8px; font-size: 0.85em; color: var(--ink-light); line-height: 1.5; direction: ltr; }
.glossary-entry { border: 1px solid var(--rule-light); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; transition: all 0.15s; }
.glossary-entry-header { display: flex; align-items: baseline; gap: 4px; }
.glossary-entry:hover { border-color: var(--accent); }
.glossary-form-chip { display: inline-block; font-family: 'David Libre', serif; font-size: 1.1em; background: var(--bg-deep); padding: 2px 8px; border-radius: 4px; cursor: pointer; direction: rtl; }
.glossary-forms-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; direction: rtl; }
.glossary-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.glossary-header h3 { font-size: 1.3em; color: var(--accent-deep); margin: 0; }
.glossary-highlighted { background: color-mix(in srgb, var(--here) 25%, transparent) !important; border-radius: 3px; }
.glossary-meaning { font-size: 0.9em; color: var(--ink); margin-top: 2px; }
.glossary-ref-link { cursor: pointer; color: var(--accent-deep); text-decoration: underline; }
.glossary-ref-link:hover { color: var(--accent-light); }
.glossary-refs-book { margin: 2px 0; }
.glossary-refs-book-name { font-weight: 600; }
.glossary-refs-section { margin-top: 8px; font-size: 0.85em; }
.glossary-root { font-family: 'David Libre', serif; font-size: 1.5em; font-weight: 700; color: var(--accent-deep); direction: rtl; }
.landing-back { text-align: center; margin-top: 20px; }
.landing-back a { font-family: 'David Libre', 'Georgia', serif; background: var(--sw-gold, var(--on-chrome)); color: var(--header-bg, var(--chrome)); text-decoration: none; font-size: 1.05em; font-weight: 600; letter-spacing: 0.03em; border: 2px solid var(--header-bg, var(--chrome)); padding: 14px 32px; border-radius: 10px; box-shadow: 0 4px 14px color-mix(in srgb, var(--chrome) 18%, transparent); transition: background 0.2s, transform 0.2s; direction: ltr; display: inline-block; }
.landing-back a:hover { background: var(--on-chrome); color: var(--header-bg, var(--chrome)); border-color: var(--header-bg, var(--chrome)); transform: scale(1.02); }
.landing-hero .subtitle-en { font-family: 'David Libre', 'Georgia', serif; font-size: 1.1em; color: var(--ink-light); letter-spacing: 0.08em; direction: ltr; }
.landing-hero .subtitle-heb { font-size: 1.3em; color: var(--ink); margin-top: 4px; }
.landing-hero h1 { font-size: 2.2em; color: var(--accent-deep); margin-bottom: 6px; font-weight: 700; }
.note-marker { color: var(--accent-deep); cursor: pointer; font-size: 0.7em; margin-right: 2px; }
.page { max-width: none; margin: 0 auto; padding: 55px 24px 50px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); background: var(--paper); min-height: 100vh; box-shadow: none; position: relative; touch-action: manipulation; }
.popup-strong a { color: var(--accent); text-decoration: none; }
.popup-strong a:hover { text-decoration: underline; }
.sel-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; }
.sel-color-row { flex-wrap: wrap; max-width: 320px; display: flex; gap: 3px; margin-bottom: 3px; align-items: center; }
.sel-color-row-label { font-size: 0.6em; color: var(--here); min-width: 12px; font-family: 'David Libre', 'Georgia', serif; }
.sel-color.active { border-color: #fff; box-shadow: 0 0 4px rgba(255,255,255,0.5); }
.sel-color:hover { transform: scale(1.2); }
.share-btn { background: var(--header-bg); color: var(--header-text); border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: 'David Libre', 'Georgia', serif; font-size: 0.9em; transition: all 0.15s; }
.share-btn:hover { opacity: 0.85; transform: scale(1.03); }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.share-close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--ink-light); font-size: 1.2em; }
.verse-english ::-moz-selection { background: transparent !important; color: inherit !important; }
.verse-num.has-note::after { content: '•'; display: inline-block; margin-left: 6px; color: var(--accent-deep); font-size: 1.2em; line-height: 1; transform: translateY(-1px); opacity: 0.9; }
.xref-panel-close:hover { background: color-mix(in srgb, var(--here) 15%, transparent); color: var(--accent); }
.xref-ref-english { direction: ltr; font-size: 0.88em; color: var(--ink-light); line-height: 1.5; margin-top: 6px; padding: 8px 10px; background: color-mix(in srgb, var(--here) 5%, transparent); border-radius: 4px; border-left: 3px solid var(--accent); text-align: left; }
.xref-ref-goto:hover { background: color-mix(in srgb, var(--here) 15%, transparent); color: var(--accent); border-color: var(--accent); }
.xref-ref-nodata { font-size: 0.85em; color: var(--ink-light); font-style: italic; padding: 16px; }
.xref-ref-title { font-weight: 600; color: var(--ink); font-size: 0.95em; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.xref-ref-title span { color: var(--ink); }
/* The reference heading IS the way through — it needs to look like one. */
.xref-ref-link { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.xref-ref-link:hover, .xref-ref-link:focus-visible { text-decoration-color: currentColor; }
.xref-ref-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
/* === ANNOTATIONS PANEL === */ #annotations-panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 90vw; background: var(--bg); border-left: 2px solid var(--accent); z-index: var(--z-panel); overflow-y: auto; padding: 16px; font-family: 'David Libre', 'Georgia', serif; transform: translateX(100%); transition: transform 0.25s ease; }
/* === CROSS-REFERENCES === */ .xref-marker { display: none; }
/* === DARK MODE === */ body.dark-mode .tl { color: var(--gloss); }
/* === Docked selection toolbar: RIGHT side (Hebrew is RTL), always visible while reading, no overlap === */ #sel-toolbar { left:auto!important;right:6px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;max-height:90vh;overflow-y:auto;flex-direction:column!important;flex-wrap:nowrap!important;max-width:none!important; }
/* === ENHANCED POPUP (Strong's + Root) === */ .popup-strong { font-family: 'David Libre', 'Georgia', serif; font-size: 0.85em; color: var(--ink-light); text-align: center; margin-bottom: 4px; direction: ltr; }
/* === GLOSSARY PANEL === */ #glossary-panel { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 380px; max-width: 90vw; background: var(--bg); border-right: 2px solid var(--accent); z-index: var(--z-panel); overflow-y: auto; padding: 16px; font-family: 'David Libre', 'Georgia', serif; transform: translateX(-100%); transition: transform 0.25s ease; }
/* === LANDING PAGE === */ .landing-hero { text-align: center; padding: 40px 20px 30px; }
/* === MOBILE POPUP ENLARGEMENT === */ @media (max-width: 600px) { #word-popup { max-width: 90vw; padding: 16px 20px; padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)); max-height: min(78vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .popup-hebrew { font-size: 2.4em !important; } .popup-translit { font-size: 1.2em !important; } .popup-gloss { font-size: 1.3em !important; } .popup-detail { font-size: 1.0em !important; } .popup-strong { font-size: 1.0em !important; } #glossary-panel { width: 100vw; max-width: 100vw; } #annotations-panel { width: 100vw; max-width: 100vw; } #xref-panel { width: 55%; } }
/* === PANEL OVERLAY === */ #panel-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: var(--z-scrim); }
/* === SELECTION TOOLBAR === */ #sel-toolbar { display: none; position: fixed; z-index: var(--z-pop); background: var(--chrome); border: 1px solid var(--chrome-line); border-radius: 8px; padding: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); flex-direction: column; gap: 4px; align-items: center; }
/* === SHARE POPUP === */ #share-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg); border: 2px solid var(--accent); border-radius: 12px; padding: 24px; z-index: var(--z-pop); min-width: 280px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0,0,0,0.3); text-align: center; font-family: 'David Libre', 'Georgia', serif; }
/* Dark mode renders highlights as translucent washes over the navy — the solid light-mode pastels would bury the light ink. !important outranks the painter's inline background. */ body.dark-mode .verse.highlighted { background: color-mix(in srgb, var(--here) 12%, transparent); }
/* David Libre is the ONLY Hebrew face, everywhere, on every surface. Inheritance, not enumeration: the allow-list above misses anything added later (injected panels, new controls), and iOS does not let form controls inherit font-family at all -- that is how mixed Hebrew appears in the app while the web renders clean. `*` has zero specificity, so every explicit rule (kbd monospace, the emoji toolbar) still wins. */ :root { font-family: 'David Libre', serif; }
/* Dual mode: English + Hebrew interlinear side by side */ .verse-english { display: none; }
/* Long-press word-range selection (touch): the finger sweeps the Hebrew line and each word in range gets a preview tint. Native per-word selection is off on coarse pointers — iOS cannot drag it across the interlinear's per-word islands, which limited selection to a single word. */ .word-unit.wsel .hw { background: color-mix(in srgb, var(--here-chrome) 28%, transparent); border-radius: 6px; }
/* Native selection: Hebrew tier only (wrapper none + .hw text — fixes iOS selecting stacked tl/gl) */ .word-unit .hw { user-select: text; -webkit-user-select: text; }
/* Phones: side by side, each column was about 140 px (14 characters of English per line). Stack instead: the Hebrew block first, its English under it, full width. */ @media (max-width: 600px) { body.dual-mode .verse { flex-wrap: wrap; } body.dual-mode .word-flow { flex: 1 1 0; order: 0; } body.dual-mode .verse-english { order: 1; flex: 1 1 100%; border-left: none; border-top: 1px dotted var(--rule-light); margin-top: 2px; padding: 8px 0 2px; font-size: 0.82em; line-height: 1.55; } body.dual-mode .chapter-heading { flex-wrap: wrap; } body.dual-mode .chapter-heading > .chapter-summary-en { order: 3; flex: 1 1 100%; border-left: none; padding-left: 0; padding-top: 8px; } }
/* Selection popover — appears at the selected text (Gospel-Library pattern): colors first, then note/copy/share; closes when the selection collapses. */ #hl-pop { display: none; position: fixed; z-index: var(--z-pop); background: var(--chrome); border: 1.5px solid var(--here); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); padding: 10px 12px; direction: ltr; -webkit-user-select: none; user-select: none; max-width: calc(100vw - 16px); }
/* Underline removed 2026-08-31 (translator): the rule underlined the HEBREW headword, and the line runs straight through the nikkud sitting under the letters, making a pointed word unreadable on tap. The blue is the affordance; the underline was never needed. NOTE: .ann-ul is the reader's own underline ANNOTATION and is deliberate -- never fold this change into it. */ #xref-panel { position: fixed; top: 0; width: 380px; height: 100vh; height: 100dvh; background: var(--bg); border-left: 2px solid var(--accent); z-index: var(--z-panel); overflow-y: auto; padding: 0; direction: ltr; font-family: 'David Libre', 'Georgia', serif; box-shadow: -4px 0 20px rgba(0,0,0,0.3); }
body.dark-mode #annotations-panel { background: var(--chrome); border-color: var(--here-chrome); }
body.dark-mode #glossary-panel { background: var(--chrome); border-color: var(--here-chrome); }
body.dark-mode #search-input::placeholder { color: var(--on-chrome-2); }
body.dark-mode #search-results .search-result:hover { background: color-mix(in srgb, var(--here) 8%, transparent); }
body.dark-mode #share-popup { background: var(--chrome); border-color: var(--here-chrome); }
body.dark-mode .glossary-entry { border-color: var(--chrome-line); }
body.dark-mode .glossary-form-chip { background: var(--surface-1); }
body.hide-sel-toolbar #sel-toolbar-reopen { display:block; }
body:not(.hide-sel-toolbar) #main-content { padding-right:60px!important; }
body:not(.hide-sel-toolbar) #sel-toolbar { display:flex!important; }
h1.book-title { margin-top:0 }
html.sw-boot #main-content,html.sw-boot .page { transition:none!important }
html.sw-boot .chapter-panel { visibility:hidden!important }


/* ══════════════════════════════════════════════════════════════════════
   LANDING CONTENTS TYPOGRAPHY — the volume table of contents
   These eight rules styled the contents list and lived in ot.html, nt.html
   and pgp.html only. dc.html and jst.html never had them, so those two
   volumes rendered their contents unstyled — the JST book heading collapsed
   its Hebrew name, transliteration and English onto one run
   ("בראשיתbereshitGenesis") because .lsg-stack, the flex column that
   separates them, simply did not exist on that page.
   One home, six volumes.
   ══════════════════════════════════════════════════════════════════════ */
.landing-sections { max-width: 600px; margin: 0 auto 30px; padding: 0 12px; }
.landing-section-group { margin-bottom: 16px; }
.landing-section-group h3 { font-family: 'David Libre', 'Georgia', serif; font-size: 0.85em; color: var(--ink-light); letter-spacing: 0.08em; direction: ltr; margin-bottom: 8px; text-align: center; }
.landing-section-group h3 .lsg-heb { font-size: 1.25em; color: var(--accent-deep); margin-right: 6px; }
.lsg-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 18px 0 8px; }
.lsg-stack .lsg-s-heb { font-family: 'David Libre', serif; font-size: 1.5em; font-weight: 700; color: var(--ink); }
.lsg-stack .lsg-s-tl { font-size: 0.78em; color: var(--ink-light); font-style: italic; direction: ltr; }
.lsg-stack .lsg-s-en { font-family: 'David Libre', 'Georgia', serif; font-size: 0.92em; color: var(--ink); letter-spacing: 0.06em; direction: ltr; }


/* ══════════════════════════════════════════════════════════════════════
   WORD ROWS — block flow, ragged, one fixed gap (2026-09-04)

   The rows were justified for one day (2026-09-03): flush on both edges,
   last line ragged. On a phone that put four or five Hebrew words on a line
   and stretched the gaps between them to fill it, and the user could not
   read it — "all these spaces in between". Set copy justifies because its
   words are small and many per line; an interlinear row is a few large
   words, and every gap it opens is a hole in the verse. So the rows now
   flow from the start edge (the right, in this RTL text) and every gap is
   the same width, whatever falls on the line.

   What stays from that day: .word-flow is a BLOCK, not a wrapping flexbox,
   and renderWords() in reader_core.js — and the summary builder in
   reader_ui.js — emit a real space between groups. The gap is that space
   plus word-spacing; the groups' own text resets word-spacing so a gloss
   is not spaced like the row. The 2px row-gap of the old flexbox is a
   margin on the group, which counts because an inline-flex box's margins
   affect the line box.

   Scoped to the interlinear. Dual has its own two-column measure, and
   Hebrew Only is a different reading shape.
   ══════════════════════════════════════════════════════════════════════ */
body:not(.hide-gloss):not(.dual-mode) .word-flow,
body:not(.hide-gloss):not(.dual-mode) .heading-flow {
  display: block !important;
  text-align: start;
  word-spacing: 0.55em;
  line-height: 1;
}
body:not(.hide-gloss):not(.dual-mode) .word-flow > .word-group,
body:not(.hide-gloss):not(.dual-mode) .heading-flow > .word-group {
  display: inline-flex;
  word-spacing: normal;   /* the groups' own text must not inherit the row spacing */
  vertical-align: top;
  margin-bottom: 2px;     /* was the flex row-gap */
}

/* ── THE WORD BEING STUDIED, inside the references panel ──
   The panel lists whole verses, so without a mark the reader has to hunt for
   the word the card is about — in 2 Nephi 8:3 that is כָּל־חָרְבֹתֶיהָ, six
   words in. A wash behind the Hebrew, not a text colour: the interlinear
   already spends colour on the gloss tier, and a highlight has to read the
   same in Light, Sepia and Dark. --highlight is the theme's own selection
   wash and already flips with the theme. */
.xref-ref-word--studied .hw {
  background: var(--studied-wash);
  border-radius: 4px;
  padding: 0 4px;
  box-shadow: 0 0 0 1px var(--studied-edge);
}
.xref-ref-word--studied .en { color: var(--ink); font-weight: 600; }

/* ── RETURN — the way back from a study reference ──
   Following a reference out of the study panel is otherwise one-way, and
   inside the iOS app there is no browser Back. Sits above the footer, out of
   the reading column, and clears itself once used. */
#sw-return {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  bottom: calc(var(--sw-footer-h, 64px) + max(10px, env(safe-area-inset-bottom, 0px)));
  z-index: calc(var(--z-chrome) + 2);
  display: none;
  align-items: center;
  gap: 6px;
  max-width: min(92vw, 420px);
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid var(--chrome-line);
  border-radius: 999px;
  background: var(--chrome);
  color: var(--on-chrome);
  font-family: 'David Libre', 'Georgia', serif;
  font-size: 0.95em;
  cursor: pointer;
  /* the reading column is RTL, so without this the banner renders
     "Alma 32:4 Back to ←" — the arrow and its label swapped ends. */
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  box-shadow: var(--e2);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
#sw-return.open { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
#sw-return b { font-weight: 700; }
#sw-return:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { #sw-return { transition: none; } }


/* ══════════════════════════════════════════════════════════════════════
   TOUCH TARGETS — the shared floor.

   Measured across the reader: the chapter arrows were 32x32, the search
   field 34px tall and the skip link 36px, all under the 44px minimum. The
   arrows are the primary chapter navigation, so they were the worst of it.

   The arrow rule is declared in each volume page's own <style> block
   (ot.html, nt.html, dc.html), which means a plain selector here would lose
   on document order however specific the intent. Prefixing with `body`
   raises specificity to 0,1,1 and wins wherever it is loaded, so the floor
   lives once, here, instead of being pasted into every page — and it covers
   pages that grow their own copy of the rule later.
   ══════════════════════════════════════════════════════════════════════ */
body .nav-prev,
body .nav-next {
  width: 44px;
  height: 44px;
}
body #search-input {
  min-height: 44px;
  box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════════════
   THE ACROSTIC STANZA (Psalm 119)

   Twenty-two stanzas of eight, each opening on the next letter of the
   alphabet. The letter is the heading — set large in the reading face, with
   its name beneath in the transliteration tier, exactly as a word in the
   interlinear is set. Rules either side so it reads as a division of the
   psalm rather than a verse of it.
   ══════════════════════════════════════════════════════════════════════ */
.acrostic-stanza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 34px 0 18px;
  padding: 14px 0 12px;
  border-top: 1px solid color-mix(in srgb, var(--here) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--here) 18%, transparent);
}
.acrostic-stanza:first-child { margin-top: 6px; }
.acrostic-letter {
  font-family: 'David Libre', serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--here);
  direction: rtl;
}
.acrostic-name {
  font-family: 'David Libre', serif;
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
@media (max-width: 600px) {
  .acrostic-stanza { margin: 26px 0 14px; padding: 11px 0 9px; }
  .acrostic-letter { font-size: 1.8rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   DUAL MODE — the chapter heading, and the phone rules for both.

   The desktop split used to live in four identical copies inside ot/nt/dc/pgp's
   own <style> blocks. A page's inline style comes AFTER the linked sheet, so
   those copies beat this file's phone override at every width: the summary
   stayed in a 45/55 split on a 375px screen. It lives here once now.
   ══════════════════════════════════════════════════════════════════════ */
body.dual-mode .chapter-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 14px; }
body.dual-mode .chapter-heading > h2,
body.dual-mode .chapter-heading > .chapter-label-en { flex: 0 0 100%; }
body.dual-mode .chapter-heading > .chapter-summary-en,
body.dual-mode .chapter-heading > .heading-flow { min-width: 0; max-width: none; margin-top: 10px; }
body.dual-mode .chapter-heading > .chapter-summary-en {
  order: 1; flex: 45 1 0; direction: ltr; text-align: left; padding-left: 14px;
  border-left: 1px solid var(--rule-light);
}
body.dual-mode .chapter-heading > .heading-flow { order: 2; flex: 55 1 0; direction: rtl; text-align: right; }
@media (max-width: 700px) {
  body.dual-mode .chapter-heading > .chapter-summary-en { font-size: 0.78em; padding-right: 8px; }
  body.dual-mode .chapter-heading > .chapter-summary-he { font-size: 0.9em; }
}

/* ── PHONES ────────────────────────────────────────────────────────────
   Two rules, both the translator's: Dual STACKS, and the two languages are
   set at the SAME size — "the hebrew was supposed to be 12 point just like
   the english; its the hebrew that needs to shrink."

   Measured at 375px before this: the English ran 18.4px and the Hebrew 32.5px
   beside it. Both inherit from .verse (22.4px), which is what the Aa control
   scales, so both are expressed in em and the control keeps working — the
   Hebrew simply comes down to the English's 0.82em instead of the English
   being pushed up. The transliteration drops with it, or it would sit almost
   as large as the Hebrew it belongs to.

   Desktop is untouched: the 45/55 side-by-side split above still stands there.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body.dual-mode .chapter-heading { flex-wrap: wrap; }
  body.dual-mode .chapter-heading > .heading-flow { order: 1; flex: 1 1 100%; }
  body.dual-mode .chapter-heading > .chapter-summary-en {
    order: 2; flex: 1 1 100%; border-left: none; padding-left: 0; padding-top: 8px;
    font-size: 0.82em;
  }
  /* The Hebrew comes down THROUGH ITS TOKEN, not past its !important. .hw is
     `font-size: var(--t4) !important`, so a plain selector — however specific
     — cannot touch it; redefining --t4 for this scope can, and the file's own
     note on the scale says the token "is the right lever anyway". --t0 (the
     translit/gloss tier) is left alone: it is documented as exactly 12px at
     100%, the legibility floor, and must not be pushed under it.
     0.82em is the English's own size, so the two now match exactly.
     Scoped `body.dual-mode #page` because the scale is declared on #page —
     an ID, specificity (1,0,0) — so a plain `body.dual-mode` (0,1,1) could
     not reach it either. */
  body.dual-mode #page { --t4: 0.82em; }
}