/* Selah workbench — panel + reader stage
   The right-panel component + reader token rendering.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* ═══════════════════════════════════════════════════════════════
   06-reader.jsx — Reader stage (the canonical Reader)
   Source: /home/scott/Downloads/selah/wireframes/approaches/06-reader.jsx
   ═══════════════════════════════════════════════════════════════ */

/* CD 06 lines 205-222 — palette + container */
.wb-stage--reader {

  background: var(--rd-bg);
  color: var(--rd-ink);
  font-family: var(--font-hebrew);

  /* Override .wb-stage padding; layout the reader as flex column. */
  padding: 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}

/* CD 06 lines 224-240 — spine. Right side influenced by CD 07
   (editor) — shortcut rail with kbd chips replacing the bare
   position counter. */
.rd-spine {
  flex: 0 0 auto;
  padding: 6px 22px;
  display: flex; flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--rd-rule);
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-ink-3);
  letter-spacing: 0.08em;
}
/* Row 1 — crumb + cursor readout + source + right-anchored help.
   A subtle bottom rule separates it from the ladder row; bleeds
   past the spine's horizontal padding via negative margins so the
   rule spans the full width. */
.rd-spine-row1 {
  /* Grid at narrow: three tracks that keep the crumb pinned
     LEFT, the rung label pinned CENTER, and everything else
     (counter + picker + help) packed on the RIGHT. `1fr auto
     1fr` gives the two flex-tracks equal share of leftover
     space so the label lands truly centered no matter how wide
     the crumb or right-group happens to be.

     At wide (≥1100px) this becomes `display: contents` and the
     children flow into the outer flex row via `order`. */
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto auto auto;
  align-items: center;
  column-gap: 12px; row-gap: 4px;
  margin: 0 -22px;
  padding: 0 22px 4px;
  border-bottom: 1px solid var(--rd-rule);
}
.rd-spine-row1 .rd-where            { grid-column: 1; }
.rd-spine-row1 .rd-unit-label       { grid-column: 3; justify-self: center; }
.rd-spine-row1 .rd-unit-pos         { grid-column: 5; }
.rd-spine-row1 .rd-spine-right      { grid-column: 7; }
/* Row 2 — the rung label + ladder. Full-width so the label sits
   adjacent to the ladder chips at any viewport, both centered
   together. `column-gap` between label and chips. */
.rd-spine-row2 {
  display: flex; width: 100%;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  padding-top: 2px;
}

/* Wide viewports — collapse the two rows into a single flex
   row on `.rd-spine`. Both `.rd-spine-row1` and `.rd-spine-row2`
   dissolve via `display: contents` so their children flow
   directly into `.rd-spine`. Ordering with `order`:

     crumb (1)  row2/ladder (2)  label (3)  pos (4)  picker (5)  help (6)

   Centering the ladder+label pair is done with a pair of auto
   margins:
     `.rd-spine-row2` gets `margin-left: auto`
     `.rd-unit-label` gets `margin-right: auto`
   Auto margins on flex items share leftover space equally, so
   these two together push equal empty space onto BOTH sides of
   the ladder+label pair — landing them centered without any
   fragile `1fr` grid tricks.

   `.rd-spine-right`'s narrow-mode `margin-left: auto` is zeroed
   at wide so it doesn't fight the pair. */
@media (min-width: 1100px) {
  .rd-spine {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 12px;
    padding-block: 6px;
  }
  .rd-spine-row1, .rd-spine-row2 { display: contents; }
  .rd-spine .rd-where             { order: 1; }
  /* `.rd-spine-row2`'s styles are IGNORED at wide because
     `display: contents` dissolves it — order/margin must live on
     the ladder itself (`.rd-unit-toggle`), which is the element
     that actually participates in the outer flex row. */
  .rd-spine .rd-unit-toggle       {
    order: 2;
    margin-inline-start: auto;   /* logical: centers under RTL too */
  }
  .rd-spine .rd-unit-label        {
    order: 3;
    margin-inline-end: auto;     /* label snuggles the ladder's trailing side */
  }
  .rd-spine .rd-unit-pos          { order: 4; }
  .rd-spine .rd-spine-right       {
    order: 6;
    margin-inline-start: 0;
  }
}

.rd-where { display: flex; align-items: baseline; gap: 6px; }
.rd-book { color: var(--rd-ink-2); white-space: nowrap; cursor: pointer; }
.rd-chap { color: var(--rd-ink); white-space: nowrap; cursor: pointer; }
.rd-verses { color: var(--rd-ink-3); white-space: nowrap; cursor: pointer; }
/* Token slot — even quieter than verses; small tabular-num pill
   showing the 1-indexed token position within the verse. */
.rd-token { color: var(--rd-ink-4); white-space: nowrap; cursor: pointer;
            font-variant-numeric: tabular-nums; }
.rd-sep { color: var(--rd-ink-4); }
.rd-spine-right { margin-inline-start: auto; color: var(--rd-ink-3); display: flex; align-items: center; gap: 14px; }
/* Influenced by CD 07 lines 419-428 — kbd shortcut chips. */
.rd-kbd {
  font-family: inherit; font-size: 10px;
  padding: 2px 6px; border: 1px solid var(--rd-rule); border-radius: 3px;
  color: var(--rd-ink-2); background: var(--rd-bg-2);
  letter-spacing: 0;
}
.rd-kbd-label { color: var(--rd-ink-4); margin-inline-start: 6px; letter-spacing: 0.05em; text-transform: lowercase; }
.rd-shortcuts { display: flex; align-items: center; gap: 4px; }
.rd-shortcuts-pair { display: flex; align-items: center; gap: 4px; margin-inline-end: 6px; }

/* Rung label and position readout. `.rd-unit-label` lives inside
   `.rd-spine-row2` next to the ladder chips so the highlighted
   chip and the name read as one signal. `.rd-unit-pos` lives on
   the far right of row 1 next to the source picker (or slot 3 at
   wide) so the counter stays with the "where am I" chrome. */
.rd-unit-glyph { font-family: var(--font-hebrew); font-size: 13px; color: var(--rd-warm); }
.rd-unit-label {
  color: var(--rd-ink);
  letter-spacing: 0.18em;
  font-size: 10px;
  white-space: nowrap;
  user-select: none;
  /* Centering on row 1 at narrow is done by row 1's grid
     `justify-self: center` on this column, not by margins. */
}
.rd-unit-pos {
  color: var(--rd-ink-3);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  white-space: nowrap;
  user-select: none;
}
/* Multi-scope variant — chapter · book · collections. Numerator
   stays warm-legible; denominator dims. Separator between scopes
   is a mid-ink dot. Wraps only in the narrowest layouts. */
.rd-unit-pos--multi {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}
.rd-unit-pos-scope {
  display: inline-flex;
  align-items: baseline;
  cursor: help;
}
.rd-unit-pos-n {
  color: var(--rd-ink-2);
  font-weight: 500;
}
.rd-unit-pos-slash,
.rd-unit-pos-d {
  color: var(--rd-ink-4);
}
.rd-unit-pos-sep {
  color: var(--rd-ink-4);
  padding: 0 2px;
}

/* Unit ladder toggle — one chip per unit on the ladder. Active
   chip lights up with the warm slot; click sets the unit while
   preserving the current verse. */
/* Unit ladder — boxless, packed together in the middle of the
   spine. Designer mockup 2026-07-03: no chip backgrounds or
   borders; just the glyph shifting from muted ink to warm gold
   when active. `flex: 1` claims the room between the breadcrumb
   on the left and the cursor-position readout on the right;
   `justify-content: center` clusters the chips in the middle
   with only the fixed `gap` between them — so the ladder stops
   growing gap as the viewport widens, and never scatters. */
.rd-unit-toggle {
  display: flex; align-items: center;
  /* `flex: 0 1 auto` — don't STRETCH to fill row 2; only shrink
     when needed. This lets the row 2 container's
     `justify-content: center` group the ladder + rung-label as
     one centered cluster instead of the ladder eating all the
     row's width and pushing the label to the far right. */
  flex: 0 1 auto; min-width: 0;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  /* When the row wraps to a second line at extreme narrow
     (<375px), row-gap keeps the wrapped chips from touching the
     ones above. */
  row-gap: 6px;
}
.rd-unit-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-hebrew);
  font-size: 15px;
  line-height: 1;
  min-width: 16px; height: 20px;
  color: var(--rd-ink-3);
  cursor: pointer;
  user-select: none;
  transition: color 80ms ease;
}
.rd-unit-chip:hover { color: var(--rd-warm); }
.rd-unit-chip--on   { color: var(--rd-warm); }

/* ── Narrow-viewport spine tuning ────────────────────────────────
   Tighten row 1 gaps + shrink the ladder chips so the whole spine
   holds together at ≤560px (iPhone SE portrait ≈ 375px). Without
   this the row 1 chrome wraps `?` to its own line, and the ladder
   clips the last 2-3 glyphs. */

@media (max-width: 700px) {
  .rd-spine-row1 { column-gap: 8px; }
  .rd-unit-toggle { gap: 7px; }
  .rd-unit-chip { min-width: 14px; font-size: 14px; }
}

@media (max-width: 480px) {
  .rd-spine-row1 { column-gap: 6px; }
  .rd-unit-toggle { gap: 5px; }
  .rd-unit-chip { min-width: 12px; font-size: 13px; }
  /* Reduce the outer horizontal padding so the ladder gets 12px
     more of real width on each side. */
  .rd-spine { padding-inline: 12px; }
  .rd-spine-row1 { margin: 0 -12px; padding: 0 12px 4px; }
}
/* Inert chip — the grain has no instances in the current chapter
   (e.g. acrostic-stanza outside Ps 119/145/Prov 31/Lam 1-4). The
   chip stays visible so the catalog of available grains is
   pedagogically visible everywhere, but it reads as "not here". */
.rd-unit-chip--inert {
  opacity: 0.32;
}
.rd-unit-chip--inert:hover {
  background: transparent;
  color: var(--rd-ink-4);
}
.rd-unit-chip--inert.rd-unit-chip--on {
  /* If the user explicitly cycles into an inert grain, the chip
     reads as "selected but no data" — selection ring visible,
     opacity still dropped so they see something's off. */
  opacity: 0.55;
}

/* Influenced by CD 07 lines 430-435 — body splits into a doc
   column on the left and a contextual panel on the right. */
.rd-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0;  /* allow children to scroll inside the grid */
  overflow: hidden;
}
/* Panel collapsed at wide — panel shrinks to the edge strip. */
.rd-body.rd-body--panel-collapsed {
  grid-template-columns: 1fr 10px;
}

/* ── Narrow-viewport reader body ────────────────────────────────
   Below 900px stack the doc column above the panel column instead
   of side-by-side (the 320px panel eats too much of a 460px
   viewport). Panel becomes ~1/3 of the vertical space (2fr / 1fr)
   so the doc keeps enough room to read; still visible at all
   sizes so users can drill in without a tab switch. */
@media (max-width: 900px) {
  .rd-body {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
  }
  .rd-body.rd-body--panel-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 10px;
  }
}
.rd-doc-area {
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* CD 06 lines 242-283 — document + per-word decorations.
   Divergence: container is LTR so the scrollbar lives on the
   right edge (visually expected); each verse re-asserts RTL so
   the Hebrew flows correctly. */
.rd-doc {
  flex: 1 1 auto;
  /* Symmetric side padding — 24px both sides so the doc reads as
     a centered column. The verse number's gutter lives inside the
     left padding via `.rd-verse`'s grid, so no extra left-side
     runway needed at the doc level. */
  padding: 32px 24px;
  direction: ltr;
  font-size: 30px;
  color: var(--rd-ink);
  overflow-y: auto;
}

/* Narrow-viewport squeeze — scaled symmetric too, 12px each side. */
@media (max-width: 560px) {
  .rd-doc { padding: 24px 12px; }
}

/* Designer mockup 2026-07-03 — Ableton Live tight rectangular
   tick-chips. Small, boxy, no icon; on-state is a warm fill,
   off-state is a quiet outline. One compact grid that scrolls
   / wraps. No HIGHLIGHTS header, no counter. */
.rd-highlights {
  flex: 0 0 auto;
  display: flex; align-items: center;
  gap: 3px;
  padding: 6px 24px;
  border-top: 1px solid var(--rd-rule);
  font-family: var(--rd-mono); font-size: 9px;
  flex-wrap: wrap;
  row-gap: 3px;
}
.rd-hl-chip {
  padding: 1px 6px;
  border: 1px solid var(--rd-rule);
  border-radius: 2px;
  color: var(--rd-ink-3);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
/* Color-coded off-state — the chip's own hue shows through even
   when the overlay is off, so the chip acts as a legend for the
   overlay it controls. */
.rd-hl-chip.warm  { border-color: var(--rd-warm);  color: var(--rd-warm); }
.rd-hl-chip.fixed { border-color: var(--rd-fixed); color: var(--rd-fixed); }
.rd-hl-chip.mark  { border-color: var(--rd-marker); color: var(--rd-marker); }
/* 2026-09-21 (Scott: "make these lenses the same color as their tint") — each
   lens chip wears the hue its lens paints with, on and off. */
.rd-hl-chip.sacred    { border-color: var(--rd-sacred); color: var(--rd-sacred); }
.rd-hl-chip.hapax     { border-color: var(--rd-hapax, var(--rd-hot)); color: var(--rd-hapax, var(--rd-hot)); }
.rd-hl-chip.first     { border-color: var(--rd-first); color: var(--rd-first); }
.rd-hl-chip.structure { border-color: var(--rd-hot); color: var(--rd-hot); }
.rd-hl-add { color: var(--rd-ink-4); border-style: dashed; }

/* Clickable toggle chip. On-state = subtle tint background +
   accent border/ink; off-state = quiet outline in the same
   accent, dimmed. The OUTLINE is the primary shape at both
   states — the fill just tells you which are "armed." */
.rd-hl-toggle {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    opacity 120ms ease;
}
.rd-hl-toggle:hover { border-color: var(--rd-ink-2); }
/* On-state: 15% tint of the accent color for background, full
   accent for border + ink. Reads as "armed" without shouting. */
.rd-hl-toggle.on  {
  background: color-mix(in srgb, var(--rd-warm) 15%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-warm);
}
.rd-hl-toggle.off { opacity: 0.55; }
/* Color-coded on-states — chip fills with its own hue at 15% */
.rd-hl-toggle.on.fixed {
  background: color-mix(in srgb, var(--rd-fixed) 15%, transparent);
  border-color: var(--rd-fixed);
  color: var(--rd-fixed);
}
.rd-hl-toggle.on.mark  {
  background: color-mix(in srgb, var(--rd-marker) 15%, transparent);
  border-color: var(--rd-marker);
  color: var(--rd-marker);
}
.rd-hl-toggle.on.warm  {
  background: color-mix(in srgb, var(--rd-warm) 15%, transparent);
  border-color: var(--rd-warm);
  color: var(--rd-warm);
}
.rd-hl-toggle.on.sacred {
  background: color-mix(in srgb, var(--rd-sacred) 15%, transparent);
  border-color: var(--rd-sacred); color: var(--rd-sacred);
}
.rd-hl-toggle.on.keep {
  background: color-mix(in srgb, var(--rd-keep) 15%, transparent);
  border-color: var(--rd-keep);
  color: var(--rd-keep);
}
.rd-hl-toggle.on.hapax {
  background: color-mix(in srgb, var(--rd-hapax, var(--rd-hot)) 15%, transparent);
  border-color: var(--rd-hapax, var(--rd-hot)); color: var(--rd-hapax, var(--rd-hot));
}
.rd-hl-toggle.on.first {
  background: color-mix(in srgb, var(--rd-first) 15%, transparent);
  border-color: var(--rd-first); color: var(--rd-first);
}
.rd-hl-toggle.on.structure {
  background: color-mix(in srgb, var(--rd-hot) 15%, transparent);
  border-color: var(--rd-hot); color: var(--rd-hot);
}

/* Translit chip + ? help icon group */
.rd-translit-chip-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rd-translit-help {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid var(--rd-rule);
  border-radius: 50%;
  font-size: 10px;
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  transition: border-color 120ms ease, color 120ms ease;
}
.rd-translit-help:hover {
  border-color: var(--rd-warm);
  color: var(--rd-warm);
}

/* Mode chip — small "SBL" / "easy" indicator that flips on click. */
.rd-translit-mode {
  cursor: pointer;
  user-select: none;
  padding: 1px 7px;
  border: 1px solid var(--rd-rule);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  transition: border-color 120ms ease, color 120ms ease;
}
.rd-translit-mode:hover {
  border-color: var(--rd-warm);
  color: var(--rd-warm);
}

/* Translit legend popup */
.rd-translit-legend {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-end: 0;   /* trailing edge — on-screen under RTL too */
  z-index: 95;
  width: 540px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 12px 14px;
  font-size: 11px;
  color: var(--rd-ink-2);
  direction: ltr;
  text-align: left;
}
.rd-translit-legend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-rule);
}
.rd-translit-legend-title {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rd-ink);
  font-weight: 500;
}
.rd-translit-legend-close {
  cursor: pointer;
  color: var(--rd-ink-3);
  font-size: 12px;
  padding: 0 4px;
}
.rd-translit-legend-close:hover { color: var(--rd-warm); }
.rd-translit-legend-section { margin-bottom: 10px; }
.rd-translit-legend-section:last-child { margin-bottom: 0; }
.rd-translit-legend-section-label {
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rd-ink-4);
  margin-bottom: 6px;
}
/* Consonant 2-column layout — each column holds half the alphabet */
.rd-translit-legend-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  column-gap: 18px;
}
/* Vowel + special list */
.rd-translit-legend-vlist { display: flex; flex-direction: column; gap: 2px; }
/* Generic 4-col row: Hebrew | Roman | name | sounds-like */
.rd-translit-legend-vrow {
  display: grid;
  grid-template-columns: 28px 38px 80px 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 2px 0;
}
/* Special-case rows — only 3 cols (the description merges name+sound) */
.rd-translit-legend-vrow--special {
  grid-template-columns: 28px 90px 1fr;
}
.rd-translit-legend-hb {
  font-family: var(--font-hebrew);
  font-size: 14px;
  color: var(--rd-ink);
  direction: rtl;
  text-align: center;
  min-width: 16px;
}
.rd-translit-legend-tr {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-warm);
}
.rd-translit-legend-vname {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-3);
  letter-spacing: 0.02em;
}
.rd-translit-legend-sound {
  font-size: 10.5px;
  color: var(--rd-ink-2, #c8b896);
  font-style: italic;
}
.rd-translit-legend-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dotted var(--rd-rule);
  font-family: var(--rd-mono);
  font-size: 9.5px;
  color: var(--rd-ink-4);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Reader help — the `?` trigger + the popup it opens.
   Replaces the old keyboard-shortcut rail in the spine; the
   popup carries grains + navigation + highlights + layers
   explanations behind one click. Same visual language as the
   translit-legend popup so the surface feels consistent.

   The anchor parent gives the absolutely-positioned popup a
   relative reference so it lands above the `?` button rather
   than escaping to the body. Mirror of the old translation-picker
   which uses the same trick for its dropdown. */
.rd-help-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.rd-help-trigger {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rd-rule);
  border-radius: 50%;
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 500;
  transition: border-color 120ms ease, color 120ms ease;
}
.rd-help-trigger:hover {
  border-color: var(--rd-warm);
  color: var(--rd-warm);
}

.rd-help {
  position: absolute;
  /* Drop DOWNWARD from the `?` button. The spine lives at the
     top of the reader stage; popping above would render off-page.
     Right-aligned so the popup hugs the right edge of the spine
     (the `?` button's own position). */
  top: calc(100% + 8px);
  /* inset-inline-end: the popup hugs the trigger's trailing edge —
     right in LTR, left under the Hebrew rail's dir=rtl (where
     right: 0 sent all 620px off-screen). */
  inset-inline-end: 0;
  z-index: 120;
  width: 620px;
  /* Leave enough room below an anchored popup even when browser/app
     zoom magnifies its box. Without the conservative vh cap the popup's
     own scrollbar can end below the stage's clipped viewport. */
  max-height: min(70vh, calc(100dvh - 112px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 14px 16px 28px;
  font-size: 12px;
  color: var(--rd-ink-2);
  direction: ltr;
  text-align: left;
  line-height: 1.5;
}
.rd-help-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rd-rule);
}
.rd-help-title {
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink);
  font-weight: 500;
}
.rd-help-close {
  cursor: pointer;
  color: var(--rd-ink-3);
  font-size: 13px;
  padding: 0 4px;
}
.rd-help-close:hover { color: var(--rd-warm); }
.rd-help-section { margin-bottom: 16px; }
.rd-help-section:last-child { margin-bottom: 0; }
.rd-help-section-title {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-ink-4);
  margin: 0 0 6px 0;
  font-weight: 500;
}
.rd-help-section-lead {
  margin: 0 0 10px 0;
  color: var(--rd-ink-2);
}
.rd-help-table {
  width: 100%;
  border-collapse: collapse;
}
.rd-help-table td {
  padding: 3px 8px 3px 0;
  vertical-align: top;
}
.rd-help-glyph {
  width: 22px;
  font-family: 'NotoSerifHebrew', 'EzraSIL', 'SBLHebrew', 'Frank Ruhl Libre', ui-monospace, monospace;
  font-size: 14px;
  color: var(--rd-warm);
  text-align: center;
}
.rd-help-name {
  width: 110px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--rd-ink);
}
.rd-help-desc {
  color: var(--rd-ink-2);
  line-height: 1.45;
}
.rd-help-kbd-cell {
  width: 120px;
  text-align: left;
  padding-right: 12px;
}
/* Emacs-guide style row — modifier text + `+` + one or more
   kbd chips. Modifier renders as a small uppercase label so
   it reads as "Ctrl with these keys" rather than a cramped
   glyph soup. */
.rd-help-kbd-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.rd-help-mod {
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rd-help-plus {
  color: var(--rd-ink-4);
  font-size: 10px;
  font-family: var(--rd-mono);
}
.rd-help-keysep {
  width: 2px;
}
.rd-help-note {
  margin: 8px 0 0 0;
  font-size: 11px;
  color: var(--rd-ink-3);
  font-style: italic;
}
/* Per-row ↗ link in the grain + layer tables. Opens the relevant
   doc as a workbench tab + closes the popup. */
.rd-help-doc {
  width: 24px;
  text-align: right;
  vertical-align: top;
  padding-top: 4px;
}
.rd-help-doclink {
  cursor: pointer;
  color: var(--rd-ink-3);
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 120ms ease, background-color 120ms ease;
  user-select: none;
}
.rd-help-doclink:hover {
  color: var(--rd-warm);
  background: color-mix(in srgb, var(--rd-warm) 14%, transparent);
}
.rd-help-doclink-empty {
  display: inline-block;
  width: 12px;
}
/* See also — bulleted list of foundational docs at the bottom
   of the popup. Each item opens the doc + dismisses the popup. */
.rd-help-see-also {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.rd-help-see-also-item {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
  color: var(--rd-ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 120ms ease, background-color 120ms ease;
}
.rd-help-see-also-item:hover {
  color: var(--rd-warm);
  background: color-mix(in srgb, var(--rd-warm) 10%, transparent);
}
.rd-help-see-also-arrow {
  color: var(--rd-ink-4);
  font-size: 11px;
}
.rd-help-see-also-item:hover .rd-help-see-also-arrow {
  color: var(--rd-warm);
}
.rd-help-see-also-label {
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* On phones the desktop popover's fixed 620px width can escape the
   viewport. Keep it attached to the rail, but size it as a nearly
   full-width sheet with its own vertical scroll. */
@media (max-width: 700px) {
  .rd-help {
    position: fixed;
    inset: 44px 10px 10px;
    width: auto;
    max-height: none;
    padding: 12px;
    overscroll-behavior: contain;
  }
  .rd-help-trigger {
    width: 32px;
    height: 32px;
  }
  .rd-help-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
  }
  .rd-help-table td {
    padding-block: 5px;
  }
  .rd-help-name {
    width: 86px;
  }
  .rd-help-kbd-cell {
    width: 96px;
  }
  .rd-help-see-also {
    grid-template-columns: 1fr;
  }
}

/* Influenced by CD 07 lines 542-615 — contextual right panel.
   Currently shows chapter-level facts; later it reshapes per
   active rung (letter / word / verse / phrase / book).

   Two-piece layout: `.rd-panel-collapse` is a slim edge strip
   with the toggle chevron; `.rd-panel-body` holds the scrolling
   content. When `.rd-panel--collapsed` is set the body hides but
   the strip stays visible so re-opening is one click. */
.rd-panel {
  /* Blend into the surrounding doc / main — same bg, only the
     border-left divides. The earlier `--rd-bg-2` tint made the
     panel read as a "stuck-on box"; sharing bg with the doc
     lets the divider line be the only seam and the whole page
     read as one surface. */
  background: var(--rd-bg);
  border-left: 1px solid var(--rd-rule);
  overflow: hidden;
  font-family: var(--rd-mono);
  font-size: 11px; color: var(--rd-ink-2);
  position: relative;
  min-height: 0;
}
.rd-panel-body {
  overflow-y: auto;
  padding: 16px 18px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* Collapse handle — a small centered drawer-handle glyph, NOT
   a full-length edge strip. Wide: sits on the panel's LEFT edge,
   vertically centered, small vertical pill. Narrow: sits on the
   TOP edge, horizontally centered, small horizontal pill. The
   handle is the click target; its containing element is absolute-
   positioned so it never eats layout space. */
/* Zero-height sticky rail: rides the viewport (top: 50vh) as the
   page scrolls, bounded by the panel — so the handle is ALWAYS on
   screen while any part of the panel is (Scott 2026-07-22: tall
   panels dropped the thumb below the fold). height:0 keeps it out
   of layout; the handle hangs from it. */
.rd-panel-collapse-rail {
  position: sticky;
  top: calc(50vh - 22px);
  height: 0;
  overflow: visible;
  z-index: 2;
}
.rd-panel-collapse {
  position: absolute;
  top: 0;
  /* Sit on the border seam — the TEXT-facing edge. Logical on
     purpose (the Hebrew rail): inline-start = the panel's left in
     LTR, its right under dir=rtl, so the gripper always faces the
     reading surface. */
  inset-inline-start: -1px;
  width: 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  /* Bare grooves — no oval / pill frame per Scott 2026-07-03.
     Handle is just the 7 grooves on the seam; the frame was
     visual clutter. */
  background: transparent;
  border: none;
  color: var(--rd-ink-3);
  transition: color 80ms ease;
  z-index: 2;
}
.rd-panel-collapse:hover {
  color: var(--rd-warm);
}
/* Drawer-handle visual: grippy grooves, not a plain pill.
   `repeating-linear-gradient` alternates 2px `currentColor`
   stripes with 2px transparent gaps → reads as a physical
   drawer-pull with ridges. `currentColor` inherits from the
   `.rd-panel-collapse` button so grooves warm-up on hover /
   collapsed state along with the frame. */
.rd-panel-collapse-glyph {
  display: block;
  width: 3px;
  /* 28px pill / 4px period (2px stripe + 2px gap) = 7 grooves.
     Seven — completeness, the sabbath-count, the number the
     center-verse of the Torah is charged with guarding. Selah's
     numerology everywhere else; the handle counts too. */
  height: 28px;
  background: repeating-linear-gradient(
    to bottom,
    currentColor 0,
    currentColor 2px,
    transparent 2px,
    transparent 4px
  );
  border-radius: 1px;
  /* Hide the text — the grip IS the affordance. */
  overflow: hidden;
  text-indent: -100vw;
  font-size: 0;
}

/* Collapsed state: panel body vanishes and the whole 10px seam
   gets a subtle warm tint so it reads "there's something
   clickable here." The handle inside carries a stronger warm
   tint + warm grip grooves so it reads as the target. */
.rd-panel--collapsed .rd-panel-body { display: none; }
.rd-panel--collapsed {
  background: color-mix(in srgb, var(--rd-warm) 6%, var(--rd-bg-2));
}
.rd-panel--collapsed .rd-panel-collapse {
  /* No frame — just warm the grooves so the collapsed seam
     reads as "clickable, opens something." */
  color: var(--rd-warm);
}

/* Narrow-viewport panel: handle moves to the TOP edge, becomes
   a horizontal pill with grooves running vertically (still
   perpendicular to the pill's long axis, so it still reads as
   a grip). */
@media (max-width: 900px) {
  .rd-panel {
    border-left: none;
    border-top: 1px solid var(--rd-rule);
  }
  /* Narrow mode pins the handle to the panel's TOP edge — the
     viewport-tracking rail stands down (sticky off, back in the
     panel's own frame). */
  .rd-panel-collapse-rail {
    position: static;
    height: 0;
  }
  .rd-panel-collapse {
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 10px;
  }
  .rd-panel-collapse-glyph {
    /* 7 grooves at narrow too. Same completeness-count. */
    width: 28px;
    height: 3px;
    background: repeating-linear-gradient(
      to right,
      currentColor 0,
      currentColor 2px,
      transparent 2px,
      transparent 4px
    );
  }
}
.rd-panel-head {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--rd-rule);
}
.rd-panel-head-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rd-panel-head-action {
  position: absolute;
  top: 0; inset-inline-end: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 13px; line-height: 1;
  color: var(--rd-ink-3);
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.rd-panel-head-action:hover {
  background: color-mix(in srgb, var(--rd-hot) 18%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-hot);
}
.rd-panel-glyph { font-family: var(--font-hebrew); font-size: 16px; color: var(--rd-warm); }
.rd-panel-label { font-size: 9px; letter-spacing: 0.18em; color: var(--rd-ink-3); }
.rd-panel-hebrew { font-family: var(--font-hebrew); font-size: 22px; color: var(--rd-ink); direction: rtl; line-height: 1.2; margin-bottom: 2px; }
.rd-panel-translit {
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--rd-ink-2, #c8b896);
  direction: ltr;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

/* Section visibility chips — small toggles at the top of the
   panel that collapse/expand each section. ON state = warm orange,
   OFF state = dimmed dashed. */
.rd-panel-section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--rd-rule, #4a3f2e);
}
.rd-panel-section-chip {
  cursor: pointer;
  user-select: none;
  padding: 1px 7px;
  border: 1px solid var(--rd-rule, #4a3f2e);
  border-radius: 999px;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 120ms ease, border-color 120ms ease,
              color 120ms ease;
}
.rd-panel-section-chip.on {
  color: var(--rd-warm, #d97f57);
  border-color: var(--rd-warm, #d97f57);
}
.rd-panel-section-chip.off {
  color: var(--rd-ink-4, #7a6e58);
  border-style: dashed;
  opacity: 0.65;
}
.rd-panel-section-chip:hover {
  opacity: 1;
  border-color: var(--rd-warm, #d97f57);
}

/* Sub-section dividers + labels in the panel — used to separate
   form/lemma blocks within the WORD panel and speech blocks
   within the VERSE panel. */
.rd-panel-section-divider {
  border-top: 1px solid var(--rd-rule, #4a3f2e);
  margin: 10px 0 8px;
}
.rd-panel-section-label {
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rd-ink-4, #7a6e58);
  margin-bottom: 4px;
}
.rd-panel-hebrew-small {
  font-family: var(--font-hebrew);
  font-size: 16px;
  color: var(--rd-ink, #d8c89b);
  direction: rtl;
  margin-bottom: 2px;
}

/* freq-by-canon mini — three labeled bars (Torah / Neviim /
   Ketuvim) sized by occurrence count, normalized to the max
   of the three. */
.rd-panel-freq {
  display: flex; flex-direction: column; gap: 2px;
  margin: 4px 0 6px;
  font-family: var(--rd-mono);
  font-size: 10px;
}
.rd-panel-freq-row {
  display: grid;
  grid-template-columns: 14px 1fr 28px;
  align-items: center;
  gap: 6px;
}
.rd-panel-freq-row--clickable {
  cursor: pointer;
  border-radius: 2px;
  padding: 1px 2px;
  margin: -1px -2px;
}
.rd-panel-freq-row--clickable:hover {
  background: color-mix(in srgb, var(--rd-warm) 8%, transparent);
}

/* Canon filter pills on the word/lemma concordance header — T /
   N / K / all. Click → scopes the scrollable rows to that
   canonical bucket without re-fetching. */
.wb-profile-canon-filter {
  display: inline-flex; gap: 4px;
  margin: 4px 0 6px;
}
.wb-profile-canon-pill {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--wb-rule);
  /* Rounded rectangle, not a pill — the app's chip language
     (Scott, 2026-07-13). */
  border-radius: 2px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--wb-ink-3);
  cursor: pointer;
}
.wb-profile-canon-pill:hover {
  background: color-mix(in srgb, var(--wb-warm) 10%, transparent);
}
.wb-profile-canon-pill--on {
  background: color-mix(in srgb, var(--wb-warm) 22%, transparent);
  color: var(--wb-warm);
  border-color: color-mix(in srgb, var(--wb-warm) 60%, var(--wb-rule));
}
.rd-panel-freq-label {
  color: var(--rd-ink-3);
  letter-spacing: 0.1em;
  text-align: center;
}
.rd-panel-freq-bar {
  height: 6px;
  background: var(--rd-bg-3);
  border-radius: 2px;
  overflow: hidden;
}
.rd-panel-freq-fill {
  height: 100%;
  background: var(--rd-warm);
  border-radius: 2px;
  transition: width 120ms ease;
}
.rd-panel-freq-count {
  color: var(--rd-ink-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rd-panel-freq-total {
  margin-top: 2px;
  color: var(--rd-ink-4);
  font-style: italic;
  font-size: 9.5px;
}

/* Peer chips — same-gv / anagrams / lemma family. Each chip is a
   clickable Hebrew form with a small frequency badge. */
.rd-panel-peer-list {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  align-items: center;
  margin: 4px 0 6px;
}
/* Inside profile bodies the peer-list is a single-column stack —
   one chip per row, full width. Scott (2026-05-28): 'not 4 columns
   but rows instead' — easier to read the long glosses now that
   they're un-truncated. The side-panel layout (small wrap-flex)
   above stays unchanged for tight rails. */
.wb-profile-section .rd-panel-peer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.wb-profile-section .rd-panel-peer {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  max-width: none;
  padding: 4px 10px;
}
.wb-profile-section .rd-panel-peer-row {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.wb-profile-section .rd-panel-peer-gloss {
  flex: 1 1 auto;
  white-space: normal;
  word-break: break-word;
}
.wb-profile-section .rd-panel-peer {
  max-width: none;
  width: 100%;
}
.rd-panel-peer {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;  /* RTL alignment of Hebrew row */
  gap: 1px;
  padding: 2px 6px;
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  background: var(--rd-bg-2);
  cursor: pointer;
  user-select: none;
  max-width: 180px;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}
.rd-panel-peer-row {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.rd-panel-peer-gloss {
  font-family: var(--rd-mono);
  font-size: 9px;
  color: var(--rd-ink-3);
  font-style: italic;
  letter-spacing: 0.02em;
  /* Full gloss visible — wrap to next line for long Strong's entries
     instead of truncating. Scott: 'see the whole definition without
     mousing over'. */
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.35;
}
.rd-panel-peer:hover {
  background: color-mix(in srgb, var(--rd-hot) 12%, transparent);
  border-color: var(--rd-hot);
  color: var(--rd-warm);
}
.rd-panel-peer-hb {
  font-family: var(--font-hebrew);
  font-size: 13px;
  color: var(--rd-ink);
  direction: rtl;
}
.rd-panel-peer-freq {
  font-family: var(--rd-mono);
  font-size: 9px;
  color: var(--rd-ink-3);
  font-variant-numeric: tabular-nums;
}
.rd-panel-peer-more {
  font-family: var(--rd-mono);
  font-size: 9.5px;
  color: var(--rd-ink-4);
  font-style: italic;
  padding: 1px 4px;
}

/* Per-reader chips — Aaron / God / Truth / Mercy. Filled when
   the reader reads the form; solo gets an accent ring. */
.rd-panel-readers {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 6px;
}
.rd-panel-reader {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-family: var(--rd-mono);
  font-size: 11px; font-weight: 600;
  color: var(--rd-ink-4);
  border: 1px solid var(--rd-rule);
  border-radius: 50%;
  background: var(--rd-bg-2);
  user-select: none;
  cursor: default;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.rd-panel-reader--reads {
  background: color-mix(in srgb, var(--rd-hot) 22%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-hot);
}
.rd-panel-reader--solo {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rd-warm) 40%, transparent);
}
.rd-panel-readers-summary {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-3);
  margin-inline-start: auto;
  font-style: italic;
}

/* Root row — Hebrew letters + small meta caption (length, freq). */
.rd-panel-root {
  display: flex; align-items: baseline; gap: 8px;
  margin: 4px 0 6px;
}
.rd-panel-root-hb {
  font-family: var(--font-hebrew);
  font-size: 16px;
  color: var(--rd-ink);
  direction: rtl;
  letter-spacing: 0.04em;
}
.rd-panel-root-meta {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-4);
  font-style: italic;
}

/* Affordances row at the bottom of the WORD panel — find-similar /
   to oracle / open as tab. V0 ships find-similar live, others
   disabled with V1 tooltips. */
.rd-panel-affordances {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin: 4px 0 8px;
}
.rd-panel-aff {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 8px;
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--rd-ink-2);
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  background: var(--rd-bg-2);
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.rd-panel-aff:hover {
  background: color-mix(in srgb, var(--rd-hot) 12%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-hot);
}
.rd-panel-aff--disabled {
  cursor: not-allowed;
  color: var(--rd-ink-4);
  opacity: 0.55;
}
.rd-panel-aff--disabled:hover {
  background: var(--rd-bg-2);
  color: var(--rd-ink-4);
  border-color: var(--rd-rule);
}
.rd-panel-aff--on {
  background: color-mix(in srgb, var(--rd-hot) 22%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-hot);
}

/* Find-similar popover — small inline list of similarity
   dimensions with peer counts. Click a row to scroll the
   matching inline section into view. */
.rd-panel-fs-popover {
  display: flex; flex-direction: column;
  margin: 4px 0 8px;
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  background: var(--rd-bg-2);
  overflow: hidden;
}
.rd-panel-fs-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--rd-ink-2);
  cursor: pointer;
  user-select: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: background 80ms ease, color 80ms ease;
}
.rd-panel-fs-row + .rd-panel-fs-row {
  border-top-color: var(--rd-rule);
}
.rd-panel-fs-row:hover {
  background: color-mix(in srgb, var(--rd-hot) 12%, transparent);
  color: var(--rd-warm);
}
.rd-panel-fs-row--disabled {
  cursor: not-allowed;
  color: var(--rd-ink-4);
  opacity: 0.55;
}
.rd-panel-fs-row--disabled:hover {
  background: var(--rd-bg-2);
  color: var(--rd-ink-4);
}
.rd-panel-fs-label {
  flex: 1 1 auto;
}
.rd-panel-fs-count {
  font-variant-numeric: tabular-nums;
  color: var(--rd-ink-3);
}
.rd-panel-gloss {
  font-size: 11px;
  font-style: italic;
  color: var(--rd-ink-2, #c8b896);
  line-height: 1.4;
  margin-top: 6px;
  padding-top: 4px;
}

/* Verse summary — italic English gloss right under the panel head. */
.rd-panel-summary {
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--rd-ink-2, #c8b896);
  margin: 6px 0 10px;
  padding: 6px 8px;
  border-left: 2px solid var(--rd-warm, #d97f57);
  background: rgba(217, 119, 87, 0.04);
  border-radius: 0 3px 3px 0;
}

/* Verse mini-profile text block — Hebrew + word-aligned rendering,
   the profiled word lit in both, gloss called out. */
.rd-panel-verse-text { margin: 8px 0 10px; }
.rd-panel-verse-hb {
  font-family: var(--font-hebrew);
  font-size: 20px;
  direction: rtl;
  line-height: 1.55;
  color: var(--rd-ink);
  margin-bottom: 6px;
}
.rd-panel-verse-hb-w {
  display: inline-block;
  margin-inline-end: 0.32em;
  padding: 0 2px;
  border-radius: 3px;
}
.rd-panel-verse-hb-w--lit {
  color: var(--rd-warm);
  background: rgba(217, 119, 87, 0.14);
}
.rd-panel-verse-en {
  direction: ltr;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rd-ink-3, #9b8c70);
}
/* The mini's English comes from the shared gloss-chips renderer, whose own
   .pf-trans-text is 16px and carries no face — inside the side panel it inherited
   the panel's MONO at 16px (Scott, 2026-09-21: "using jet brains font and the font
   is huge"). Here it takes the reading face at the mini's own size. English only —
   the Hebrew block above is untouched. */
.rd-panel-verse-en .pf-trans-text,
.rd-panel-verse-en .pf-trans-text--ours {
  font-family: var(--font-english);
  font-size: 14px;
  line-height: 1.5;
}
.rd-panel-verse-en-w {
  display: inline-block;
  margin-inline-end: 0.3em;
  padding: 0 2px;
  border-radius: 3px;
}
.rd-panel-verse-en-w--lit {
  color: var(--rd-warm);
  background: rgba(217, 119, 87, 0.14);
  font-weight: 600;
}
.rd-panel-verse-gloss {
  margin-top: 7px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
}
.rd-panel-verse-gloss-label {
  flex: 0 0 auto;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-4, #7a6e58);
  padding-top: 1px;
}
.rd-panel-verse-gloss-text {
  flex: 1 1 auto;
  color: var(--rd-warm);
  font-style: italic;
}

/* Genre badge — small colored chip above the kv table. */
.rd-panel-genre-row { margin: 4px 0 6px; }
.rd-genre-badge {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
}
.rd-genre-narrative      { color: #c8b896; border-color: #6a5d44; }
.rd-genre-dialogue       { color: #d97f57; border-color: #d97f57; }
.rd-genre-poetry         { color: #c89e3b; border-color: #c89e3b; }
.rd-genre-wisdom         { color: #7a9d6c; border-color: #7a9d6c; }
.rd-genre-prophecy       { color: #5b8a9b; border-color: #5b8a9b; }
.rd-genre-prayer         { color: #6e7eaa; border-color: #6e7eaa; }
.rd-genre-lament         { color: #8a6ea7; border-color: #8a6ea7; }
.rd-genre-law            { color: #c95844; border-color: #c95844; }
.rd-genre-genealogy      { color: #9b8c70; border-color: #9b8c70; }
.rd-genre-superscription { color: #a25cb0; border-color: #a25cb0; }
.rd-genre-default        { color: var(--rd-ink-3); border-color: var(--rd-rule); }

/* Cross-reference list — small monospace rows in the verse panel. */
.rd-panel-xref-list {
  display: flex; flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.rd-panel-xref-line {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--rd-ink-2, #c8b896);
  line-height: 1.55;
  padding: 1px 4px;
}
.rd-panel-xref-book {
  color: var(--rd-ink, #f0e3c8);
  font-weight: 500;
}
.rd-panel-xref-chap {
  color: var(--rd-ink-3, #9a8b6e);
}
.rd-panel-xref-sep {
  color: var(--rd-ink-4, #7a6e58);
}
.rd-panel-xref-v {
  color: var(--rd-ink-2, #c8b896);
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  padding: 0 1px;
  transition: background 80ms ease, color 80ms ease;
}
.rd-panel-xref-v:hover,
.rd-panel-xref-v:focus {
  background: color-mix(in srgb, var(--rd-hot) 12%, transparent);
  color: var(--rd-warm);
  text-decoration: underline;
  outline: none;
}
.rd-panel-xref-more {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-4, #7a6e58);
  font-style: italic;
  margin-top: 2px;
  padding-inline-start: 4px;
}
.rd-panel-en { color: var(--rd-ink-3); font-size: 11px; }
.rd-kv { display: grid; grid-template-columns: 80px 1fr; gap: 4px 10px; margin-bottom: 12px; }
.rd-kv-k { color: var(--rd-ink-4); font-size: 10px; letter-spacing: 0.05em; }
.rd-kv-v { color: var(--rd-ink); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Morph cell — decoded English on top, raw OSHB code beneath in
   small mono. The code stays visible for power users; the
   decoded line is what people read. */
.rd-panel-morph-decoded { display: block; color: var(--rd-ink); }
.rd-panel-morph-raw {
  display: block;
  margin-top: 1px;
  font-family: var(--rd-mono);
  font-size: 9.5px;
  color: var(--rd-ink-4);
  letter-spacing: 0.02em;
}

/* Morpheme decomposition band — one chip per morpheme, RTL.
   Prefix chips are pale; root chips are bold. Renders only when
   the token has 2+ morphemes. Phase 2 surface for morpheme grain. */
.rd-panel-morpheme-band { }
.rd-panel-morpheme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-family: 'SBL Hebrew', 'Times New Roman', serif;
}
.rd-panel-morpheme-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.25;
  border: 1px solid var(--rd-rule);
  background: var(--rd-panel-bg, transparent);
  cursor: default;
}
.rd-panel-morpheme-chip--root {
  color: var(--rd-ink);
  font-weight: 500;
  border-color: var(--rd-ink-3);
}
.rd-panel-morpheme-chip--prefix {
  color: var(--rd-ink-3);
  opacity: 0.85;
}
.rd-panel-morpheme-chip--unknown {
  color: var(--rd-ink-4);
  font-style: italic;
}

/* Morpheme role tag in the mini-profile kv table — same
   prefix/root semantics as the inline tint but presented as a
   small all-caps badge so it reads at-a-glance in the kv list. */
.rd-panel-morph-role {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--rd-rule);
}
.rd-panel-morph-role--root {
  color: var(--rd-ink);
  font-weight: 600;
  border-color: var(--rd-ink-3);
}
.rd-panel-morph-role--prefix {
  color: var(--rd-ink-3);
  opacity: 0.85;
}

/* Lemma row in the morpheme mini-profile — single clickable
   line: hebrew consonants · Strongs · gloss · ↗. Same shape as
   the cross-reference rows in the verse panel. */
.rd-panel-lemma-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--rd-ink);
  font-size: 12px;
}
.rd-panel-lemma-row:hover {
  background: color-mix(in srgb, var(--rd-hot) 8%, transparent);
  border-radius: 3px;
}
.rd-panel-lemma-cons {
  font-family: 'SBL Hebrew', 'Times New Roman', serif;
  font-size: 16px;
  color: var(--rd-ink);
}
.rd-panel-lemma-strongs {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-3);
  letter-spacing: 0.04em;
}
.rd-panel-lemma-gloss {
  color: var(--rd-ink-2);
  font-style: italic;
  flex: 1;
  min-width: 0;
}

/* Root family — sibling lemmas inside the root mini panel.
   Each row is a button; click → opens the lemma profile tab.
   Anchor lemma (the cursor's current lemma) is lit warm so
   the reader sees their position in the family. */
.rd-panel-section-count {
  color: var(--rd-ink-3);
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
}
.rd-panel-rf-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
.rd-panel-rf-list::-webkit-scrollbar { width: 6px; }
.rd-panel-rf-list::-webkit-scrollbar-thumb {
  background: var(--rd-rule);
  border-radius: 3px;
}
.rd-panel-rf-row {
  font: inherit;
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--rd-ink-2);
  text-align: left;
  transition: color 0.08s ease, border-color 0.08s ease, background 0.08s ease;
}
.rd-panel-rf-row:hover {
  color: var(--rd-ink);
  border-left-color: var(--rd-ink-3);
}
.rd-panel-rf-row--anchor,
.rd-panel-rf-row--anchor:hover {
  background: color-mix(in srgb, var(--rd-warm) 14%, transparent);
  border-left-color: var(--rd-warm);
  color: var(--rd-warm);
}
.rd-panel-rf-rank {
  font-family: var(--rd-mono);
  font-size: 9px;
  color: var(--rd-ink-3);
  text-align: right;
}
.rd-panel-rf-hb {
  font-family: 'SBL Hebrew', 'Frank Ruhl Libre', serif;
  font-size: 15px;
  direction: rtl;
  text-align: right;
}
.rd-panel-rf-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 11px;
  color: var(--rd-ink-3);
}
.rd-panel-rf-freq {
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--rd-warm);
  min-width: 36px;
  text-align: right;
}
.rd-panel-rf-loading,
.rd-panel-rf-empty {
  font-size: 11px;
  color: var(--rd-ink-3);
  font-style: italic;
  padding: 6px 0;
}
.rd-panel-rf-more {
  font-size: 10px;
  color: var(--rd-ink-3);
  font-style: italic;
  padding: 6px 0 0;
  text-align: center;
}
.rd-panel-lemma-arrow {
  color: var(--rd-ink-3);
  font-size: 11px;
  flex-shrink: 0;
}

/* Verse-chip strip — small clickable verse-number tiles in the
   paragraph + stanza mini-profiles. Click → navigate to that verse. */
.rd-panel-vc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}
.rd-panel-vc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--rd-rule);
  border-radius: 2px;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-2);
  cursor: pointer;
  user-select: none;
}
.rd-panel-vc-chip:hover {
  background: color-mix(in srgb, var(--rd-hot) 14%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-hot);
}
/* Anchored instance in the lemma mini-profile's chip strip —
   the chip representing the token the cursor currently sits on. */
.rd-panel-vc-chip--active {
  background: color-mix(in srgb, var(--rd-cool) 22%, transparent);
  color: var(--rd-cool);
  border-color: var(--rd-cool);
}

/* Letter block — surfaces the alphabet anchor of an acrostic
   stanza (Hebrew glyph + name + GV + paleo role + breath class).
   Mirrors the per-letter info Selah uses everywhere; here it
   makes the stanza navigation alphabet-aware. */
.rd-panel-letter-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.rd-panel-letter-glyph {
  font-family: 'SBL Hebrew', 'Times New Roman', serif;
  font-size: 32px;
  line-height: 1;
  color: var(--rd-ink);
  flex-shrink: 0;
}
.rd-panel-letter-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rd-panel-letter-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}
.rd-panel-letter-name {
  color: var(--rd-ink);
  font-weight: 500;
}
.rd-panel-letter-gv {
  font-family: var(--rd-mono);
  color: var(--rd-ink-3);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.rd-panel-letter-role {
  color: var(--rd-ink-2);
  font-size: 11px;
  font-style: italic;
}
.rd-panel-letter-breath {
  color: var(--rd-ink-3);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.rd-section { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rd-rule); }
.rd-section-label { font-size: 9px; letter-spacing: 0.18em; color: var(--rd-ink-3); margin-bottom: 8px; }
/* T.2 phrase-explanation prose — a reading sentence beneath the
   kv facts it explains. Quieter than the values, warmer than the
   keys; generous line-height for a full-sentence read. */
.rd-panel-prose {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--rd-rule);
  font-size: 11px;
  line-height: 1.6;
  color: var(--rd-ink-2);
}
.rd-hint {
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--rd-rule);
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; color: var(--rd-ink-3);
}
/* Hanging indent via flex: vn is a fixed-width flex item; the
   remainder of the verse is its own flex item that wraps inside
   its own box, so wrap lines clear the vn column naturally.
   RTL is asserted here (parent .rd-doc is LTR for scrollbar).
   line-height is tight *within* the verse; margin separates
   verses so each one breathes on its own.

   scroll-margin gives scrollIntoView some clearance from the
   spine above and the highlights+strip below, so a selected
   verse doesn't end up flush against the chrome. */
.rd-verse {
  /* 4px headroom INSIDE the content-visibility containment box —
     the verse-selection outline paints 4px above the text top and
     was clipped at the verse's top edge (Scott, 2026-09-02).
     margin-bottom drops to 6px so the verse rhythm stays 10px. */
  padding-top: 4px;
  margin-bottom: 6px;
  /* Two-row grid: the top row is a verse-number column + a Hebrew
     column; the second row spans both columns so the English
     translation ignores the number's gutter and lies flush with
     the container's left padding.

     `grid-template-columns: auto 1fr` — the number column shrinks
     to fit its digits ("1" vs "31"); Hebrew takes the rest.

     `display: contents` on `.rd-verse-body` (below) dissolves the
     wrapper so `.rd-verse-text` and `.rd-verse-translation` become
     direct grid children of `.rd-verse`. */
  direction: ltr;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "vn text"
    "trans trans";
  column-gap: 8px;
  row-gap: 4px;
  position: relative;
  line-height: 1.55;
  scroll-margin-top: 24px;
  scroll-margin-bottom: 80px;
}

/* Same idea for word + letter selections — they live inside a
   verse but scrollIntoView targets them directly. */
.rd-w, .rd-letter {
  scroll-margin-top: 60px;
  scroll-margin-bottom: 100px;
}
/* Selection bar — 2px hot rule that marks which verses belong
   to the active grain (paragraph, parsha, aliyah, etc). Placed
   into the same grid area as the Hebrew (`text`) so its height
   auto-matches the Hebrew row (even when the Hebrew wraps to
   multiple lines). `justify-self: end` pins to the Hebrew's LTR
   end; `margin-inline-end: -14px` nudges the bar OUTWARD into
   the doc's right padding, kept clear of the panel/scrollbar
   seam by leaving `.rd-doc`'s 32px right padding as buffer.
   `pointer-events: none` so the bar doesn't intercept clicks. */
.rd-verse--selected::before {
  content: '';
  grid-area: text;
  justify-self: end;
  align-self: stretch;
  width: 2px;
  margin-inline-end: -14px;
  background: var(--rd-hot);
  opacity: 0.5;
  pointer-events: none;
}
.rd-vn {
  grid-area: vn;
  /* Sit at the TOP of the Hebrew row (not the baseline). A small
     top-padding nudges the digit down to align with the Hebrew
     glyph tops rather than the top of the line-leading. */
  align-self: start;
  padding-top: 8px;
  text-align: start;
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--rd-ink-3);
  direction: ltr;
  letter-spacing: 0.1em;
}
.rd-verse-text {
  grid-area: text;
  min-width: 0;
  /* Re-assert RTL so the Hebrew inside flows right-to-left even
     though the parent `.rd-verse` is LTR (so the verse number can
     sit on the left). */
  direction: rtl;
}

/* Wrapper is dissolved — its two children (`.rd-verse-text`,
   `.rd-verse-translation`) participate in the outer grid
   directly. This is what lets the translation ignore the
   number-column gutter and stretch across both grid columns. */
.rd-verse-body { display: contents; }

/* English translation subtitle under each verse — quiet, not
   competing with the Hebrew. Source picker controls which
   translation shows; defaults to "ours" (Selah's AI rendering). */
.rd-verse-translation {
  grid-area: trans;
  direction: ltr;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rd-ink-3, #9b8c70);
  /* No padding-inline so the translation lands flush with the
     container's left padding, ignoring the verse-number gutter
     that the Hebrew row respects. */
  display: flex;
  gap: 8px;
  align-items: baseline;
}
/* Translation-source label ("OURS", "YLT", …) — hidden because
   the spine's translation-picker already names the active source.
   The label was redundant AND ate vertical rhythm. Info-still-there,
   chrome-still-quiet. */
.rd-verse-translation-src { display: none; }
.rd-verse-translation-text {
  flex: 1 1 auto;
  font-style: italic;
}

/* Per-token English word in the OURS translation — each span
   maps 1:1 to a Hebrew token, so word-mode and te'amim-mode
   highlights flow through to the English. */
.rd-tr-w {
  display: inline;
  padding: 0 1px;
  border-radius: 2px;
  transition: background-color 80ms ease;
}
/* Clickable English gloss spans — the OURS row is a parallel
   selection surface. Subtle hover wash so the reader sees
   what's selectable without the row feeling busy when at
   rest. */
.rd-tr-w--clickable {
  cursor: pointer;
}
.rd-tr-w--clickable:hover {
  background: color-mix(in srgb, var(--rd-ink) 8%, transparent);
}
.rd-tr-w.phrase-selected {
  background: color-mix(in srgb, var(--rd-hot) 15%, transparent);
}
.rd-tr-w.selected {
  background: color-mix(in srgb, var(--rd-hot) 30%, transparent);
  outline: 1px solid color-mix(in srgb, var(--rd-hot) 55%, transparent);
}
/* Lemma + form siblings/anchor in the translation row — mirror
   the Hebrew side so the English lights up where the Hebrew does.
   Same cool-teal palette; form keeps its underline accent. */
.rd-tr-w.lemma-sibling {
  background: color-mix(in srgb, var(--rd-cool) 14%, transparent);
}
.rd-tr-w.lemma-anchor {
  background: color-mix(in srgb, var(--rd-cool) 26%, transparent);
  outline: 1px solid color-mix(in srgb, var(--rd-cool) 55%, transparent);
}
.rd-tr-w.form-sibling {
  background: color-mix(in srgb, var(--rd-cool) 16%, transparent);
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--rd-cool) 50%, transparent);
}
.rd-tr-w.form-anchor {
  background: color-mix(in srgb, var(--rd-cool) 30%, transparent);
  outline: 1px solid var(--rd-cool);
  box-shadow: inset 0 -2px 0 0 var(--rd-cool);
}
.rd-tr-w.root-sibling {
  background: color-mix(in srgb, var(--rd-cool) 12%, transparent);
  box-shadow: inset 0 2px 0 0 color-mix(in srgb, var(--rd-cool) 50%, transparent);
}
.rd-tr-w.root-anchor {
  background: color-mix(in srgb, var(--rd-cool) 26%, transparent);
  outline: 1px solid var(--rd-cool);
  box-shadow: inset 0 2px 0 0 var(--rd-cool);
}

/* Translation source picker — sits in the spine, next to the
   unit indicator. Click the chip to open a dropdown of every
   loaded source. */
/* Right-panel translation list — when a verse is the active rung,
   the panel shows every translation we have. */
.rd-translations {
  direction: ltr;
}
/* Flow rows — abbreviation floats left, translation text wraps around
   and beneath it (no fixed gutter). */
.rd-translation-row {
  font-size: 11px;
  line-height: 1.45;
  margin-bottom: 7px;
}
.rd-translation-row::after { content: ""; display: block; clear: both; }
.rd-translation-src {
  float: left;
  margin-right: 8px;
  color: var(--rd-ink-3, #9b8c70);
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 1px;
}
/* Source's own verse address where versification alignment
   re-filed it (KJV · 2:4 under Hebrew Hosea 2:6). */
.rd-translation-natv {
  opacity: 0.65;
  text-transform: none;
}
.rd-translation-text {
  color: var(--rd-ink-2, #c8b896);
}
.rd-translation-showall {
  clear: both;
  margin-top: 2px;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-3, #9b8c70);
  cursor: pointer;
}
.rd-translation-showall:hover { color: var(--rd-warm, #d97f57); }


/* ── Word × scope hop-strip ───────────────────────────────────
   Small clickable cells inside the larger-scope grain minis
   (chapter / book / collection) on the word profile sidebar.
   Each cell hops the concordance-cursor to that occurrence;
   the current row is lit warm so the reader sees where they
   are in the scope. */
.rd-panel-hop-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}
.rd-panel-hop-strip--stacked {
  flex-direction: column;
  gap: 2px;
}
.rd-panel-hop-cell {
  display: inline-block;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-ink-2);
  background: color-mix(in srgb, var(--rd-ink) 4%, transparent);
  border-radius: 3px;
  cursor: pointer;
}
.rd-panel-hop-cell:hover {
  background: color-mix(in srgb, var(--rd-hot) 14%, transparent);
  color: var(--rd-ink);
}
.rd-panel-hop-cell--active {
  color: var(--rd-warm);
  background: color-mix(in srgb, var(--rd-warm) 12%, transparent);
}

/* Book distribution row in the :collection mini — book name on
   the left, count on the right. Not clickable (yet) — clicking
   would need to jump to a row in that book; leave for a follow-
   up when the design settles. */
.rd-panel-book-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: 11px;
}
.rd-panel-book-row-name {
  color: var(--rd-ink-2);
  font-family: var(--rd-mono);
  letter-spacing: 0.03em;
}
.rd-panel-book-row-count {
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 10px;
}

/* ── Panel footer · Open full profile ─────────────────────────
   Full-width bar at the bottom of a mini panel naming the
   panel's primary action. Big label, thumb-reachable target on
   mobile. Same behavior as tapping the Hebrew hero above
   (mockup 24 · Expand Affordance, fix A). `⏎` shortcut sits on
   the right at desktop widths. */
.rd-panel-footer-open {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--rd-rule);
  color: var(--rd-warm);
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.rd-panel-footer-open:hover,
.rd-panel-footer-open:focus-visible {
  background: color-mix(in srgb, var(--rd-warm) 6%, transparent);
  border-color: var(--rd-warm);
  outline: 0;
}
.rd-panel-footer-open-glyph {
  font-size: 13px;
  line-height: 1;
}
.rd-panel-footer-open-l {
  flex: 1;
  text-align: left;
}
.rd-panel-footer-open-kbd {
  font-size: 10px;
  color: var(--rd-ink-4);
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  padding: 1px 6px;
  min-width: 20px;
  text-align: center;
}
.rd-panel-footer-open:hover .rd-panel-footer-open-kbd,
.rd-panel-footer-open:focus-visible .rd-panel-footer-open-kbd {
  color: var(--rd-warm);
  border-color: var(--rd-warm);
}
@media (max-width: 600px) {
  .rd-panel-footer-open-kbd { display: none; }
}

/* ── Letter mini panel (`.rd-lm`) ──────────────────────────────
   Word-mini-shaped layout scoped just for the letter side panel:
   small kind-label header, big colored Hebrew hero that IS the
   expand target, name / GV / role stack, all-caps KV info, fibers
   list, full-width footer-open bar. Sibling of the word mini's
   visual grammar so the two feel like one system. */
.rd-lm-head {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}
.rd-lm-kind {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-warm);
}

/* Hero — reuses `.rd-mw-hero` shape but keyed off `.rd-lm` scope
   so we don't have to live inside `.rd-word-mini`. Big warm letter,
   click to expand. */
.rd-lm .rd-mw-hero {
  font-family: var(--font-hebrew);
  font-size: 72px;
  text-align: center;
  color: var(--rd-warm);
  line-height: 1;
  margin: 4px 0 0;
}
.rd-lm .rd-mw-hero--open {
  cursor: pointer;
  transition: color 140ms ease, text-shadow 140ms ease;
}
.rd-lm .rd-mw-hero--open:hover,
.rd-lm .rd-mw-hero--open:focus-visible {
  color: var(--rd-hot);
  text-shadow: 0 0 18px color-mix(in srgb, var(--rd-warm) 45%, transparent);
  outline: 0;
}

/* Hero sub-stack — name (italic serif), then GV + pictographic
   role as uppercase details. Centered under the letter. */
.rd-lm-name {
  text-align: center;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 14px;
  font-style: italic;
  color: var(--rd-ink-2);
  margin-top: 8px;
}
.rd-lm-detail {
  text-align: center;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
  margin-top: 3px;
}

/* Info · KV info block. Labels go uppercase to match the word
   mini's `.rd-mw-lbl` cadence. Fibers section header borrows the
   same style so the panel reads as one type system. */
.rd-lm .rd-kv {
  margin-top: 14px;
  margin-bottom: 12px;
}
.rd-lm .rd-kv-k,
.rd-lm .rd-panel-section-h {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
  font-weight: 500;
}
.rd-lm .rd-panel-section {
  margin-top: 14px;
}
.rd-lm .rd-panel-section-h {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
/* Left half of the section header — label + optional count.
   The count is dimmer than the label so the label reads first. */
.rd-panel-section-h-l {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.rd-panel-section-h-n {
  color: var(--rd-ink-4);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0.06em;
}
/* Right half — the help toggle. `margin-left: auto` isn't needed
   given `justify-content: space-between` on the header, but the
   `.rd-panel-section-h-r` wrapper keeps the toggle from being
   spread by extra flex gap. */
.rd-panel-section-h-r {
  display: inline-flex;
  align-items: baseline;
}

/* ── VP4 · commentary cloud (verse mini) ──────────────────── */
.rd-panel-commentaries { display: flex; flex-direction: column; gap: 10px; }
.rd-panel-commentary-voice-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px; cursor: default;
}
.rd-panel-commentary-voice-name {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rd-warm, var(--rd-ink-2));
}
.rd-panel-commentary-voice-count { font-size: 10px; color: var(--rd-ink-4); }
.rd-panel-commentary-comment {
  font-size: 11px; line-height: 1.6; color: var(--rd-ink-2);
  padding: 3px 0;
}
.rd-panel-commentary-comment--clickable { cursor: pointer; }
.rd-panel-commentary-lemma {
  font-weight: 600; color: var(--rd-ink);
  direction: rtl; unicode-bidi: isolate;
  margin-inline-end: 6px;
}
.rd-panel-commentary-text b { color: var(--rd-ink); }
.rd-panel-commentary-text--he {
  display: block; direction: rtl; unicode-bidi: isolate;
  font-size: 13px; line-height: 1.8;
}
.rd-panel-commentary-note {
  margin-top: 2px; font-size: 10px; font-style: italic;
  color: var(--rd-ink-3);
}

/* ── The chalkboard — BHT board-work under his comment rows ──
   Registers visually separated from his words: a quiet indented
   board (left rule), Hebrew large, translit italic, gloss dim.
   Verdicts are small mono chips; dim = not-confirmed (never
   rendered as "false" — chalkboard discipline). */
.rd-chalkboard {
  margin: 4px 0 10px 10px;
  padding: 6px 10px;
  border-inline-start: 2px solid color-mix(in srgb, var(--rd-warm, #d9a94a) 35%, transparent);
  background: color-mix(in srgb, var(--rd-warm, #d9a94a) 4%, transparent);
}
.rd-chalk-quote { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.rd-chalk-he {
  direction: rtl; unicode-bidi: isolate;
  font-size: 13px; color: var(--rd-ink);
}
.rd-chalk-translit { font-size: 11px; font-style: italic; color: var(--rd-ink-3); }
.rd-chalk-gloss { font-size: 11px; color: var(--rd-ink-2); }
.rd-chalk-mechs { margin-top: 5px; }
.rd-chalk-mech {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 3px 0; font-size: 11px; color: var(--rd-ink-2);
}
.rd-chalk-kind {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rd-warm, var(--rd-ink-2));
  min-width: 62px;
}
.rd-chalk-num { font-family: var(--rd-mono); color: var(--rd-ink); }
.rd-chalk-op { color: var(--rd-ink-3); }
.rd-chalk-letters { font-family: var(--rd-mono); color: var(--rd-ink); direction: rtl; unicode-bidi: isolate; }
.rd-chalk-verdict {
  font-size: 9px; font-family: var(--rd-mono);
  padding: 1px 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--rd-warm, #d9a94a) 16%, transparent);
  color: var(--rd-ink);
}
.rd-chalk-verdict--dim {
  background: transparent;
  outline: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  color: var(--rd-ink-4);
}
.rd-chalk-located { display: flex; flex-direction: column; gap: 2px; }
.rd-chalk-loc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rd-chalk-refs { font-size: 10px; color: var(--rd-ink-3); }
.rd-chalk-note { font-size: 10px; font-style: italic; color: var(--rd-ink-3); }
.rd-chalk-frame { margin-top: 6px; }
.rd-chalk-frame-head {
  display: flex; align-items: baseline; gap: 6px; cursor: pointer;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rd-ink-3);
}
.rd-chalk-frame-head:hover { color: var(--rd-ink-2); }
.rd-chalk-frame-toggle { font-family: var(--rd-mono); }
.rd-chalk-frame-text { margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--rd-ink-2); }
.rd-chalk-frame-sources { margin-top: 3px; font-size: 10px; color: var(--rd-ink-4); }

/* ── Crumb dropdowns (2026-07-27) ─────────────────────────────
   Book / chapter / verse in the reader crumb open sibling menus
   in place — same visual grammar as the translation picker, plus
   a scroll cap (39 books / 176 psalms won't fit a viewport). */
.rd-crumb-anchor {
  position: relative;
  display: inline-flex;
}
.rd-crumb-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-top: 4px;
  z-index: 90;
  min-width: 110px;
  max-height: 55vh;
  overflow-y: auto;
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 4px 0;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.rd-crumb-menu-opt {
  cursor: pointer;
  padding: 4px 14px;
  color: var(--rd-ink-2);
  white-space: nowrap;
}
.rd-crumb-menu-opt:hover {
  background: color-mix(in srgb, var(--rd-hot) 10%, transparent);
  color: var(--rd-warm);
}
.rd-crumb-menu-opt.active {
  color: var(--rd-warm);
}

/* ── Offscreen-verse containment (2026-08-03 perf) ──
   The reader's first style flush was resolving ALL ~31 verses'
   subtrees (~600-700ms Recalculate Style over 3,906 elements,
   forced by the cursor-scroll rAF's querySelector). With
   content-visibility:auto the engine skips style+layout for
   verses outside the viewport; contain-intrinsic-size keeps
   scrollbar geometry stable (auto = remembers the real size
   once rendered). */
/* A KEPT VERSE is named at its NUMBER, not by a box (Scott,
   2026-09-22: "could be better") — the number goes gold and wears a
   small star. No tile, no border, no layout shift: an affordance, not
   a colour, so it never competes with the word lenses. */
.rd-verse--kept .rd-vn {
  color: var(--rd-keep);
  font-weight: 700;
}
.rd-verse--kept .rd-vn::after {
  content: "\2605";
  font-size: 7px;
  vertical-align: super;
  margin-inline-start: 1px;
  opacity: .8;
}

.rd-verse {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

/* Header-rule collapse (Scott, 2026-09-02: "header HR overkill at
   the top"): when the ¶-grain head sits directly under the aside's
   nav strip (VERSE n OF m), the strip's rule already separates
   chrome from content — the head's dashed rule doubles it. One
   rule at the top. */
.rd-panel-body > .wb-aside-nav + .rd-panel-head {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
}

/* ── Verse-mini corner tools (2026-09-12) ─────────────────────
   ¶ open-in-reader · the yalkut ★ · ? — upper right of the mini
   in seats outside the reader (explore drill, profile asides). */
/* ONE head row for the verse mini — the hero and corner tools
   share a flex line so the component aligns itself identically
   in every seat (reader, drill, profile asides); no host may
   move it with padding. */
.rd-mini-head {
  position: relative;   /* the help popover's anchor */
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-mini-head .rd-rack-hero { flex: 1 1 auto; min-width: 0; }
.rd-mini-corner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
.rd-mini-corner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--rd-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.rd-mini-corner-btn:hover {
  color: var(--rd-warm, #d4a256);
  border-color: var(--rd-warm, #d4a256);
}
/* The corner star — word-mini parity: full strength (keeps/star
   dims unkept to 0.45 inline), ink-2, 32px, optical -3px against
   the circled ?'s center. */
.rd-mini-corner .yk-star {
  font-size: 32px;
  line-height: 1;
  color: var(--rd-ink-2, var(--wb-ink-2));
  opacity: 1 !important;
  position: relative;
  top: -3px;
}
.rd-mini-corner .yk-star:hover { color: var(--rd-warm, #d4a256); }

/* The verse profile spine's reader door — beside the yalkut star. */
.rd-crumb-reader-btn {
  background: transparent;
  border: none;
  padding: 0 2px;
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s;
}
.rd-crumb-reader-btn:hover { color: var(--rd-warm, #d4a256); }

/* The 👓 reader door (Scott, 2026-09-15) — one glyph on every
   profile/mini head, right of the ★, before the ?. BARE ICON
   everywhere: background/border/padding zeroed here in the base
   so no host or user-agent button chrome grays it (the word-
   profile grey-pill catch). The emoji's dark frames vanish on
   the dark ground, so grayscale+invert lifts them to the ink
   scale; hover goes warm via sepia. */
.rd-reader-glasses {
  background: transparent;
  border: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  filter: grayscale(1) invert(1) brightness(0.72);
  opacity: 0.9;
  transition: opacity 0.12s, filter 0.12s;
}
.rd-reader-glasses:hover {
  opacity: 1;
  filter: grayscale(1) invert(1) sepia(0.55) saturate(2.4) brightness(0.95);
}
/* In the circled-button corners the ring reads as clutter around
   an emoji — bare glasses, slightly larger than the circled ?. */
.rd-mini-corner .rd-reader-glasses.rd-mini-corner-btn {
  border: none;
  border-radius: 0;
  font-size: 15px;
}

/* Verse mini · voices section detail — per-voice sub-blocks
   inside the ONE expanded VOICES layer (the word-mini pattern,
   2026-09-14). */
.rd-mw-voice-block { margin: 0 0 10px; }
.rd-mw-subhead {
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rd-ink-4, var(--rd-ink-3));
  margin: 8px 0 4px;
}

/* the lens rail's own ? — sits at the rail's tail, after the seg / langs */
.sv-rail .sv-rail-help { margin-left: auto; align-self: center; }