/* Selah workbench — verse-profile bands
   Ladder, te'amim, predicates, ELS, instances, facet rail, oracle.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* ── Ladder context cards ──────────────────────────────────
   Beneath the active unit's full panel, the right column shows
   each ancestor rung as a single-line card: glyph, label, summary.
   Quiet, not competing with the active panel above. */
.rd-ancestors {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(180, 160, 120, 0.18);
}
.rd-ancestors-label {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-ink-3, #9b8c70);
  margin-bottom: 4px;
}
.rd-ancestor {
  display: grid;
  grid-template-columns: 16px 60px 1fr;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 0;
  border-bottom: 1px dotted rgba(180, 160, 120, 0.10);
}
.rd-ancestor:last-child { border-bottom: none; }
.rd-ancestor-glyph {
  text-align: center;
  color: var(--rd-ink-3, #9b8c70);
  font-size: 12px;
}
.rd-ancestor-label {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--rd-ink-3, #9b8c70);
}
.rd-ancestor-summary {
  color: var(--rd-ink-2, #c8b896);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-ancestor-translation {
  grid-column: 3;
  font-style: italic;
  font-size: 10px;
  line-height: 1.4;
  color: var(--rd-ink-3, #9b8c70);
  margin-top: 2px;
  white-space: normal;
  direction: ltr;
}
.rd-w { display: inline-block; padding: 0 2px; }

/* Morpheme tints inside a multi-morpheme token. Renders the
   prefix-stack paler than the root so the noun-phrase
   composition reads at a glance (e.g. וְ/הָ/אָרֶץ — pale
   conjunction + article, bold root). Phase 3 of the morpheme
   grain; only fires for 2+ morpheme tokens (single-morpheme
   tokens fall through to the plain hb body). */
.rd-morph { }
/* Prefix/root color tint is opt-in via the .shade modifier
   (the morpheme-shading toggle in the highlights bar). Without
   .shade the spans render with the host color, so clickability
   in morpheme mode stays decoupled from the visual signal. */
.rd-morph.shade.rd-morph--prefix {
  color: var(--rd-ink-3);
  opacity: 0.7;
}
.rd-morph.shade.rd-morph--root {
  color: inherit;
}
/* Selected morpheme — when active-unit is :morpheme and the user
   clicks one, the chosen segment gets a bright underline so it
   stands out within the parent token (which itself stays
   visually quiet — selection is at the morpheme level, not the
   word level). */
.rd-morph--selected {
  background: color-mix(in srgb, var(--rd-hot) 18%, transparent);
  border-radius: 2px;
  outline: 1px solid color-mix(in srgb, var(--rd-hot) 45%, transparent);
}

/* Syllable spans — boundary is signalled by alternating the
   HOST font color's intensity (opacity on currentColor), not
   by a new hue. That way aleph-tav letters stay marker-warm,
   sacred words stay sacred-warm, default ink stays ink — but
   pos-1 syllables of any of them fade to ~60%. Brightness shift
   reads as structure WITHIN the host color register, without
   competing for the chromatic slot aleph-tav already owns.

   The .shade modifier opts the alternation in; without it,
   spans are inert click targets only (in syllable mode) or
   invisible (outside syllable mode). Selected syllable gets
   the bright outline (same affordance as morpheme). */
.rd-syl { }
.rd-syl.shade.rd-syl--pos-0 { opacity: 1.00; }
.rd-syl.shade.rd-syl--pos-1 { opacity: 0.55; }
.rd-syl.shade.rd-syl--selected { opacity: 1.00; }
.rd-syl--open  { /* baseline */ }
.rd-syl--closed { /* same baseline; type chip lives on the
                     mini-profile, not the inline span */ }
.rd-syl--selected {
  background: color-mix(in srgb, var(--rd-hot) 18%, transparent);
  border-radius: 2px;
  outline: 1px solid color-mix(in srgb, var(--rd-hot) 45%, transparent);
}

/* Hover wash — the verse-profile hero affordance brought to the
   reader: a soft warm background, no border, no outline. Applies
   only to .rd-w--live (the word is a click target in the current
   grain), and never recolors the glyphs — sacred/marker/lens
   colors stay legible under the pointer. */
.rd-w--live { position: relative; isolation: isolate; }
.rd-w--live:not(.selected):hover::before {
  /* Same construction as the selection ring below: a pseudo
     trimmed 4px top and bottom, rounded 3px, under the glyphs.
     Wash only — no border. */
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 0; right: 0;
  background: color-mix(in srgb, var(--rd-warm) 16%, transparent);
  border-radius: 3px;
  pointer-events: none;
  z-index: -1;
}
.rd-w.sacred { color: var(--rd-warm); }
.rd-w.marker { color: var(--rd-marker); }
.rd-w.fixed  { border-bottom: 2px solid var(--rd-fixed); padding-bottom: 0; }
/* With translit stacked below, the אור underline rides the BOTTOM
   of the token — under the translit, sitting atop the inner pot's
   floor stack (Scott, 2026-07-30 revision). The default .rd-w.fixed
   border-bottom already does exactly that. */
.rd-w.hot    {
  background: color-mix(in srgb, var(--rd-hot) 12%, transparent);
  border-radius: 3px;
}
/* Selection — wash + 1px hot ring, drawn on a pseudo-element
   trimmed 3px top and bottom (same letters-hugging move as the
   hover wash). z-index -1 keeps it under the glyphs. */
.rd-w.selected { position: relative; isolation: isolate; }
/* With translit stacked in the token, the selection ring wraps
   ONLY the Hebrew span (Scott, 2026-07-30). */
.rd-w--with-tr.selected::before { content: none; }
.rd-w--with-tr.selected .rd-w-hb { position: relative; isolation: isolate; }
.rd-w--with-tr.selected .rd-w-hb::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 0; left: -2px; right: -2px;
  background: color-mix(in srgb, var(--rd-hot) 22%, transparent);
  border: 1px solid var(--rd-hot);
  border-radius: 3px;
  pointer-events: none;
  z-index: -1;
}
.rd-w.selected::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 0; right: 0;
  background: color-mix(in srgb, var(--rd-hot) 22%, transparent);
  border: 1px solid var(--rd-hot);
  border-radius: 3px;
  pointer-events: none;
  z-index: -1;
}

/* Lemma grain — in lemma mode every token sharing the anchored
   lemma's Strong's number lights up as a SIBLING (soft wash,
   distinct from the .hot/.selected token-singleton states), and
   the cursor-anchored instance gets the bright ANCHOR outline.
   Reads as "show me where else this same word appears" with
   the current pinpoint distinct from its siblings.
   `var(--rd-cool)` was added with the syllable-shading experiment
   and is the right hue here too — cool, scholarly, distinct from
   the warm aleph-tav and sacred chromas. */
.rd-w.lemma-sibling {
  background: color-mix(in srgb, var(--rd-cool) 12%, transparent);
  border-radius: 3px;
}
.rd-w.lemma-anchor {
  background: color-mix(in srgb, var(--rd-cool) 22%, transparent);
  outline: 1px solid var(--rd-cool);
  border-radius: 3px;
}

/* Form grain — strictly narrower than lemma (same exact :cleaned
   letters, not just same dictionary entry). Uses the same cool-
   teal hue but adds a bottom underline to mark "anchored to the
   surface form" — the visual signal that we're matching the
   letters themselves, not the abstraction behind them. */
.rd-w.form-sibling {
  background: color-mix(in srgb, var(--rd-cool) 14%, transparent);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--rd-cool) 55%, transparent);
}
.rd-w.form-anchor {
  background: color-mix(in srgb, var(--rd-cool) 26%, transparent);
  outline: 1px solid var(--rd-cool);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 0 var(--rd-cool);
}

/* Root grain — strictly broader than lemma (the consonantal
   skeleton anchors many lemmas). Same cool-teal palette but
   the accent line is on TOP — symmetric mirror of form's
   bottom-tick. Reads as "the source above the letters" vs
   form's "anchored to the letters themselves." */
.rd-w.root-sibling {
  background: color-mix(in srgb, var(--rd-cool) 10%, transparent);
  border-radius: 3px;
  box-shadow: inset 0 2px 0 0 color-mix(in srgb, var(--rd-cool) 55%, transparent);
}
.rd-w.root-anchor {
  background: color-mix(in srgb, var(--rd-cool) 22%, transparent);
  outline: 1px solid var(--rd-cool);
  border-radius: 3px;
  box-shadow: inset 0 2px 0 0 var(--rd-cool);
}

/* Te'amim phrase highlight — applies to every token within the
   active leaf phrase when active-unit is :te-amim. Reads as a
   warm-tan region the cursor is on, distinct from .selected
   which is a single hot point. */
.rd-w.phrase-selected {
  background: color-mix(in srgb, var(--rd-hot) 22%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rd-hot) 45%, transparent);
}

/* Cantillation hum — every token that closes a leaf phrase gets a
   small breath gap after it. FLAT reading only: inside the bracket
   tree the box already marks the boundary, and the hum just padded
   the phrase's end wall (Scott, 2026-07-30). */
.rd-w--phrase-end { margin-inline-end: 0.35em; }
.rd-phrase .rd-w--phrase-end { margin-inline-end: 0; }

/* Transliteration stack — each token renders Hebrew on top, the
   romanization beneath in a smaller LTR caption. Furigana-style. */
.rd-w.rd-w--with-tr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: top;
  line-height: 1.1;
}
.rd-w-hb {
  display: block;
}
.rd-w-tr {
  direction: ltr;
  display: block;
  font-family: var(--rd-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--rd-ink-3, #9b8c70);
  margin-top: 2px;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
  text-align: center;
}

/* ── Te'amim bracket tree ────────────────────────────────────
   Each phrase node renders as an inline-block carrying a U-shape
   beneath: left wall, bottom rule, right wall, rounded bottom
   corners. Nested phrases stack their brackets vertically.

   The verse root (level 0) is implicit — no bracket — since every
   word is in the verse anyway. Level 1 and below each get their
   own row of bracket beneath the line, color-keyed by level. */
.rd-phrase {
  /* inline + slice (2026-07-30): a phrase that wraps stays an
     OPEN vessel at the break edge — walls paint only at its true
     start/end, the bottom rule continues on every line fragment.
     Walls + rule are drawn strokes (borders can't lower the
     waterline): rule 1.5px at the floor, walls rising to the
     waterline 8px above the text bottom. Floors sink by
     --rd-annex (translit row; numbers later) so the vessel deepens
     downward around its contents. */
  display: inline;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
.rd-phrase[class*="rd-phrase--lvl-"] {
  padding-bottom: calc(var(--rdp-pb, 2px) + var(--rd-annex, 0px));
  /* Five layers: two walls (stopping 3px above the floor), the
     floor rule (inset 3px each side), and two 3px quarter-arc
     corners drawn as radial gradients — small-radius rounding on
     stroke-drawn pots (Scott, 2026-07-30). */
  background:
    linear-gradient(var(--rdp-c), var(--rdp-c)) left 0 bottom 3px / 1.5px calc(var(--rdp-pb, 2px) + var(--rd-annex, 0px) + 5px) no-repeat,
    linear-gradient(var(--rdp-c), var(--rdp-c)) right 0 bottom 3px / 1.5px calc(var(--rdp-pb, 2px) + var(--rd-annex, 0px) + 5px) no-repeat,
    linear-gradient(var(--rdp-c), var(--rdp-c)) bottom center / calc(100% - 6px) 1.5px no-repeat,
    radial-gradient(circle at 100% 0%, transparent 1.4px, var(--rdp-c) 1.5px, var(--rdp-c) 3px, transparent 3.5px) left bottom / 3px 3px no-repeat,
    radial-gradient(circle at 0% 0%, transparent 1.4px, var(--rdp-c) 1.5px, var(--rdp-c) 3px, transparent 3.5px) right bottom / 3px 3px no-repeat;
}
/* Depth ladder — inline boxes share the text bottom, so stacking
   comes from height-above-leaves (rd-phrase--dN, computed in
   render-phrase-tree): the reader's own rhythm, leaf rule 2px
   under the text, 3px per depth step. Doubled class outranks the
   per-level padding shorthands below. */
.rd-phrase.rd-phrase--d0 { --rdp-pb: 5px; }
.rd-phrase.rd-phrase--d1 { --rdp-pb: 8.5px; }
.rd-phrase.rd-phrase--d2 { --rdp-pb: 12px; }
.rd-phrase.rd-phrase--d3 { --rdp-pb: 15.5px; }
.rd-phrase.rd-phrase--d4 { --rdp-pb: 19px; }
.rd-phrase.rd-phrase--d5 { --rdp-pb: 22.5px; }
.rd-phrase.rd-phrase--d6 { --rdp-pb: 26px; }
.rd-phrase.rd-phrase--d7 { --rdp-pb: 29.5px; }
.rd-phrase.rd-phrase--d8 { --rdp-pb: 33px; }
/* Bracket-mode verse body: wrapped lines clear each other's rule
   stacks, and the verse's LAST line reserves its stack at the
   bottom so brackets never crash into the translation line (the
   2026-07-30 collision). Both derive from the verse's own tree
   depth (--rdp-stack, set per verse). */
/* Tall tokens (translit on) hang DOWNWARD from the text top —
   the Hebrew's position and the verse-to-verse gap are the fixed
   reference; annex content only deepens the vessel (Scott,
   2026-07-30: 'the hebrew gets pushed up' bug). */
.rd-verse-body--brackets .rd-w--with-tr { vertical-align: text-top; }
/* Breath under the Hebrew before the translit row (Scott: the
   glyphs need air before what stacks beneath). */
.rd-verse-body--brackets .rd-w-tr { margin-top: 4px; }
.rd-verse-body--brackets {
  line-height: calc(1.55em + var(--rdp-stack, 6px) + var(--rd-annex, 0px));
  padding-bottom: calc(var(--rdp-stack, 6px) + var(--rd-annex, 0px));
}
/* The translation is never invaded — constant margin from
   whatever sits above it, however deep the vessels got. */
.rd-verse-body--brackets .rd-verse-translation { margin-top: 14px; }

/* Level 0 (verse root) — no bracket, no padding */
.rd-phrase[class*="rd-phrase--lvl-0"],
.rd-phrase:not([class*="rd-phrase--lvl-"]) {
  padding: 0;
  border: none;
}

/* Levels 1..8 — colored U-bracket. Border on left/bottom/right
   with rounded bottom corners; the resulting shape is a downward
   bracket. Padding-bottom offsets the bracket height so deeper
   levels don't crash into the text. Each deeper level adds a
   little more vertical space.

   Color scale runs warm→cool as depth increases — the deepest
   nesting reads as cool indigo/violet under the line. The first
   few levels are warm because they're the structurally dominant
   ones (atnach, tipcha, zaqef). */
.rd-phrase--lvl-1 { --rdp-c: #c95844; padding-inline: 3px; }  /* warm red */
.rd-phrase--lvl-2 { --rdp-c: #d97f57; padding-inline: 3px; }  /* warm orange */
.rd-phrase--lvl-3 { --rdp-c: #c89e3b; padding-inline: 2px; }  /* warm gold */
.rd-phrase--lvl-4 { --rdp-c: #7a9d6c; padding-inline: 2px; }  /* sage green */
.rd-phrase--lvl-5 { --rdp-c: #5b8a9b; padding-inline: 2px; }  /* teal */
.rd-phrase--lvl-6 { --rdp-c: #6e7eaa; padding-inline: 2px; }  /* indigo */
.rd-phrase--lvl-7 { --rdp-c: #8a6ea7; padding-inline: 2px; }  /* violet */
.rd-phrase--lvl-8 { --rdp-c: #a25cb0; padding-inline: 2px; }  /* magenta */

/* Leaf interior: enough side room that the selection box around a
   word clears the pot walls (Scott, 2026-07-30). Doubled class so
   it outranks the per-level padding-inline. */
.rd-phrase.rd-phrase--leaf { padding-inline: 4px; }

/* When the reader is NOT at the phrase grain, the brackets are
   noise — fade them. We keep them in the DOM so toggling rungs is
   instant. (Grain was named `te-amim` before fda54fc renamed it to
   `phrase`; this selector lagged the rename for three weeks and
   muted the depth colors everywhere.) */
.wb-stage--reader:not([data-unit='phrase']) .rd-phrase[class*='rd-phrase--lvl-'] {
  border-color: rgba(180, 160, 120, 0.18);
}

/* Letter spans · CD 07 lines 510-516 influence. Each base
   consonant (with its niqqud / cantillation) is its own span;
   the active one gets a warm outline that hugs the glyph without
   painting over it — so density colors (see `.rd-letter--heat`
   below) stay legible when the cursor lands on a heated letter. */
.rd-letter { display: inline; }
.rd-letter.selected {
  outline: 1px solid var(--rd-hot);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ELS density lens — every letter of the word profile hero (in
   :letter grain) gets a `--heat` custom property in [0, 1]
   normalized min→max across the word. Clean 2-stop: `ink-4`
   (quiet, muted) at the cold end, `rd-hot` at the peak. Glow
   rides the top of the curve so the peak reads at a glance
   without a box behind the letter. Selection outline coexists
   cleanly — outline hugs, heat color stays. */
.rd-letter--heat {
  color: color-mix(
    in oklab,
    var(--rd-ink-4) calc(100% - (var(--heat) * 100%)),
    var(--rd-hot)   calc(var(--heat) * 100%)
  );
  text-shadow: 0 0 calc(var(--heat) * 8px)
                color-mix(in srgb, var(--rd-hot) calc(var(--heat) * 45%),
                                   transparent);
  transition: color 200ms ease-out, text-shadow 200ms ease-out;
}

/* Structure lens — center-letter landmark (book / collection center).
   The vav of עורי in SoS 4:16 (uri uri), the center letter of Genesis,
   the between-marker in Torah (later). Slow breathing pulse — a
   steady glow that pulls the eye without pounding. The glow tint is
   the reader's hot color so it composes with heat/selection at the
   same site without a new palette entry.

   Two layers of light: (1) the letter itself — hot color + text-
   shadow bloom around the glyph edges; (2) a circular HALO placed
   BEHIND the letter via a ::before pseudo-element with a radial
   gradient. The halo doesn't clip because inline .rd-letter is
   `position: relative` here (no impact elsewhere — only the landmark
   ones flip to relative). The halo's z-index sits under the glyph
   so the letter reads sharp against a warm aura. */
/* PERF (2026-07-11): the letter's text-shadow is STATIC — animating
   text-shadow can't be compositor-offloaded, so an infinite pulse
   forces a main-thread repaint every frame for as long as the reader
   is open (found as a sustained multi-core burn + eventual renderer
   crash). The breath lives on the ::before halo instead, which
   animates only opacity/transform — both composited. Same rule for
   the corners below. Never animate text-shadow/box-shadow/filter on
   an infinite loop in the reader. */
.rd-letter--landmark {
  position: relative;
  color: var(--rd-hot);
  /* the center letter stands TALLER than its row — the size is
     the witness, visible before any lens (Scott, 2026-08-04:
     "when it lands on a letter, make the letter bigger") */
  font-size: 1.3em;
  line-height: 1;
  vertical-align: -0.08em;
  text-shadow:
    0 0 8px  color-mix(in srgb, var(--rd-hot) 65%, transparent),
    0 0 18px color-mix(in srgb, var(--rd-hot) 36%, transparent);
}

.rd-letter--landmark::before {
  content: "";
  position: absolute;
  /* Halo is larger than the glyph so it reads as an aura rather
     than a highlight box. Centered via inset + transform trick. */
  top: 50%;
  left: 50%;
  width: 2em;
  height: 2em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--rd-hot) 42%, transparent) 0%,
    color-mix(in srgb, var(--rd-hot) 22%, transparent) 32%,
    color-mix(in srgb, var(--rd-hot)  8%, transparent) 58%,
    transparent 78%
  );
  z-index: -1;
  pointer-events: none;
  animation: rd-letter-landmark-halo 4200ms ease-in-out infinite;
}

@keyframes rd-letter-landmark-halo {
  0%, 100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1.0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* Structure lens · box corners (Phase 2).
   Corners are the eight vertices of a book's 3D factorization —
   e.g. SoS's (0,0,0) at Song 1:1's ש, (2,16,100) at 8:14's ם, etc.
   They are subsidiary to the center (which stays the strongest
   signal) — dimmer color (warm gold rather than hot), softer
   text-shadow, no halo, slower gentler pulse. The eye should
   register the center first and the corners as a quiet frame
   around the book. */
.rd-letter--corner {
  position: relative;
  color: var(--rd-warm, #d9a94a);
  /* static glow — the pulse rides the ::before halo (see the PERF
     note on .rd-letter--landmark: never loop text-shadow) */
  text-shadow:
    0 0 4px  color-mix(in srgb, var(--rd-warm, #d9a94a) 42%, transparent),
    0 0 9px  color-mix(in srgb, var(--rd-warm, #d9a94a) 22%, transparent);
}

.rd-letter--corner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8em;
  height: 1.8em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--rd-warm, #d9a94a) 20%, transparent) 0%,
    color-mix(in srgb, var(--rd-warm, #d9a94a) 10%, transparent) 40%,
    transparent 72%
  );
  z-index: -1;
  pointer-events: none;
  animation: rd-letter-corner-halo 5400ms ease-in-out infinite;
}

@keyframes rd-letter-corner-halo {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* Structure lens · the SEAM (Phase 1).
   An even letter-count has no center letter — it has a crease
   between two. The Torah's falls inside החזה at Lev 8:29 (the ה
   and the ח, letters 152,425 | 152,426 of 304,850): the cleave in
   the breast. The hairline paints on the inline-END of the letter
   the crease follows — in RTL that is the letter's LEFT edge, i.e.
   exactly the gap before the next letter. Same rule whether the
   partner letter is inside the same word or the first letter of
   the next one, so one class covers both cases.

   `.pf-letter-cluster` is already `position: relative`, and the
   ::before there belongs to the landmark halo — the seam rides
   ::after so a letter can be both. Static glow only (see the PERF
   note above: never animate a shadow on an infinite loop). */
.pf-letter-cluster.rd-seam::after,
.rd-letter.rd-seam::after {
  content: "";
  position: absolute;
  inset-inline-end: -2px;
  top: -0.32em;
  bottom: -0.32em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--rd-warm, #e8c87a) 96%, transparent) 12%,
    color-mix(in srgb, var(--rd-warm, #e8c87a) 96%, transparent) 88%,
    transparent 100%
  );
  /* Static two-layer glow — warm core, hot halo (PERF rule: never
     animate a shadow on a loop; the crease burns steady). */
  box-shadow:
    0 0 6px  color-mix(in srgb, var(--rd-warm, #e8c87a) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--rd-hot,  #d97757) 55%, transparent);
  pointer-events: none;
}
.rd-letter.rd-seam { position: relative; }

/* The crease-word itself — the whole token that carries a seam
   glows softly so the fold's host word is findable at reading
   distance, not only at letter-inspection distance. Pure CSS via
   :has(); static (no animation). */
.wb-profile-token:has(.rd-seam) {
  background: color-mix(in srgb, var(--rd-warm, #e8c87a) 13%, transparent);
  outline: 1px solid color-mix(in srgb, var(--rd-warm, #e8c87a) 38%, transparent);
  border-radius: 5px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--rd-warm, #e8c87a) 22%, transparent);
}

/* Structure lens · the margin chip.
   Sits at the head of the verse's text column, reading LTR from
   the start edge so it lines up beside the verse number while the
   Hebrew below it stays RTL. Muted by default; the ◈ carries the
   only color. One chip per landmark scope (a verse can hold the
   book's center AND its collection's crease). */
.rd-landmark-mark {
  display: block;
  direction: ltr;
  text-align: left;
  margin-bottom: 2px;
  line-height: 1.3;
}
.rd-landmark-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-inline-end: 10px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--rd-ink-3);
  white-space: nowrap;
}
.rd-landmark-glyph {
  color: var(--rd-warm, #d9a94a);
  font-size: 9px;
}
.rd-landmark-scope { color: var(--rd-ink-2); }
.rd-landmark-pos   { opacity: 0.72; }

/* CD 13 lines 978-1009 — palette modal. Centered overlay, input
   row + sectioned result rows + footer. */
.rd-palette-overlay-bg {
  position: absolute; inset: 0;
  /* Dim toward whatever the active theme's `--rd-bg` is, not a
     baked-in warm-dark RGB. color-mix is the cross-theme route —
     on paper-light the overlay washes out toward the page color
     instead of staying dark. 92% bg + 8% transparent kills busy
     backgrounds (reader text, three-pane profiles) without going
     fully opaque. */
  background: color-mix(in srgb, var(--rd-bg) 92%, transparent);
  backdrop-filter: blur(2px);
  z-index: 100;
}
.rd-palette {
  position: absolute;
  left: 50%; top: 24px;
  transform: translateX(-50%);
  width: 640px; max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  /* Mostly opaque with a hint of transparency. Earlier attempt
     was fully solid (#101010 underlay + theme on top) and Scott
     found it too flat — the panel should FEEL alive on top of
     the blurred reader without bleeding text through. 92% is
     the sweet spot: solid enough that text doesn't read
     through, transparent enough that the panel sits ON the
     page rather than punched out of it.
     `isolation: isolate` still creates a fresh stacking context
     so inherited transparency on parents doesn't compound. */
  isolation: isolate;
  background-color: color-mix(in srgb, var(--rd-bg, #1d2021) 92%,
                              transparent);
  border: 1px solid var(--rd-rule);
  border-radius: 5px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.7),
              0 0 0 1px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex; flex-direction: column;
  z-index: 101;
}
.rd-palette-input {
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--rd-rule);
  background: var(--rd-bg-3);
}
.rd-palette-prompt {
  font-family: var(--rd-mono);
  font-size: 11px; color: var(--rd-warm); letter-spacing: 0.1em;
}
.rd-palette-input-field {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--rd-ink); font-family: var(--rd-mono);
  font-size: 14px; letter-spacing: 0.02em;
}
.rd-palette-input-field::placeholder { color: var(--rd-ink-4); }
.rd-palette-list { flex: 1 1 auto; overflow-y: auto; }

/* Clickable kind shortcuts at the top of the result list. Each
   chip switches the palette to that mode; the active mode is
   highlighted. */
.rd-palette-kinds {
  display: flex; gap: 14px;
  padding: 10px 18px 6px;
  border-bottom: 1px dashed var(--rd-rule);
  font-family: var(--rd-mono);
  font-size: 9px; letter-spacing: 0.18em;
}
.rd-palette-kind {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rd-ink-3);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s;
}
.rd-palette-kind:hover { color: var(--rd-ink); }
.rd-palette-kind.selected {
  color: var(--rd-warm);
}
.rd-palette-kind-glyph {
  font-family: var(--font-hebrew);
  font-size: 12px;
  letter-spacing: 0;
}
.rd-palette-kind-label { letter-spacing: 0.18em; }

.rd-palette-section {
  padding: 8px 18px 4px;
  font-family: var(--rd-mono);
  font-size: 9px; color: var(--rd-ink-3); letter-spacing: 0.2em;
}
.rd-palette-row {
  padding: 8px 18px;
  display: grid; grid-template-columns: 16px 1fr auto; gap: 12px;
  align-items: baseline;
  font-family: var(--rd-mono);
  font-size: 11px; color: var(--rd-ink-2);
  cursor: pointer;
}
.rd-palette-row:hover { background: var(--rd-bg-3); }
.rd-palette-row.selected {
  background: var(--rd-bg-3);
  box-shadow: inset 2px 0 0 0 var(--rd-warm);
}
.rd-palette-glyph { color: var(--rd-warm); font-size: 12px; }
.rd-palette-name  { color: var(--rd-ink); }
.rd-palette-tag   { font-size: 9px; color: var(--rd-ink-3); }
.rd-palette-foot {
  padding: 10px 18px; border-top: 1px solid var(--rd-rule);
  display: flex; gap: 16px;
  font-family: var(--rd-mono);
  font-size: 9px; color: var(--rd-ink-3);
}

/* Spine pieces become click-targets when not in :none mode. */
.rd-where .rd-book,
.rd-where .rd-chap,
.rd-where .rd-verses,
.rd-where .rd-token { cursor: pointer; }
.rd-where .rd-book:hover,
.rd-where .rd-chap:hover,
.rd-where .rd-verses:hover,
.rd-where .rd-token:hover { color: var(--rd-warm); }

/* Verse-text box appears only when the VERSE rung itself is
   active and this is the selected verse — the sharp outline
   reads "this individual verse is the target." Padding is tight
   so the outline hugs the Hebrew closely; the negative-margin
   trick keeps the layout stable while the box breathes 4px past
   the glyphs. Left/right bleed stays under the grid's 8px
   column-gap (won't touch verse-number gutter); top/bottom bleed
   stays inside the 4px row-gap (won't touch translation). */
.rd-verse-text--selected {
  background: color-mix(in srgb, var(--rd-hot) 10%, transparent);
  outline: 1px solid var(--rd-hot);
  border-radius: 4px;
  /* 3px vertical bleed clears the Hebrew ascenders/upper vowels
     (the box top was slicing through them — Scott, 2026-09-02)
     while staying inside the 4px row-gap */
  padding: 3px 4px;
  margin: -3px -4px;
}

/* Higher rungs (paragraph, parsha, aliyah, haftarah, pericope,
   acrostic-stanza) — the SELECTED unit contains multiple verses,
   so instead of stacking hard outlines around each member verse
   (which would read as "multiple selections"), we wash the
   member verses with a soft background so they group visually
   as one selection. No outline, no border-radius bleed. */
.rd-verse-text--in-group {
  background: color-mix(in srgb, var(--rd-hot) 6%, transparent);
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 2px;
}

/* :none mode — disable workbench selection, enable browser
   text selection. Doc gets a text caret, tokens lose any
   interactive cursors. */
.wb-stage--reader[data-unit='none'] .rd-doc { cursor: text; user-select: text; }
.wb-stage--reader[data-unit='none'] .rd-w   { cursor: text; }
.wb-stage--reader[data-unit='none'] .rd-verse-text { cursor: text; }
/* Selection highlight in :none uses the browser's default. */
.wb-stage--reader[data-unit='none'] .rd-w.selected,
.wb-stage--reader[data-unit='none'] .rd-verse-text--selected,
.wb-stage--reader[data-unit='none'] .rd-verse-text--in-group {
  background: transparent; outline: none;
}

/* CD 06 lines 286-317 — inline halo */
.rd-halo {
  position: absolute;
  bottom: -38px;
  right: 70px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px 5px 6px;
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 4px;
  direction: ltr;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-2);
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.rd-halo-gloss { color: var(--rd-ink-2); }
.rd-halo-actions { display: flex; gap: 1px; margin-left: 4px; }
.rd-halo-btn {
  width: 22px; height: 20px;
  background: transparent;
  border: 1px solid var(--rd-rule);
  color: var(--rd-ink-3);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
}
.rd-halo-btn:hover { color: var(--rd-ink); border-color: var(--rd-ink-3); }

/* CD 06 lines 320-352 — strip */
.rd-strip-wrap { flex: 0 0 auto; }
.rd-strip {
  display: flex; align-items: stretch;
  height: 28px;
  background: var(--rd-bg-2);
  border-top: 1px solid var(--rd-rule);
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.rd-section {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px;
  border-right: 1px solid var(--rd-rule);
  color: var(--rd-ink-4);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.rd-section:hover { color: var(--rd-ink-2); background: var(--rd-bg-3); }
.rd-section.on { color: var(--rd-ink); }
.rd-section.bloom { background: var(--rd-bg-3); color: var(--rd-ink); }
.rd-section--ghost { color: var(--rd-ink-4); margin-left: auto; border-right: none; }
.rd-section-name { font-weight: 500; }
.rd-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--rd-ink-4); }
.rd-section.on .rd-dot { background: var(--rd-warm); }
.rd-strip-spacer { flex: 1; border-right: 1px solid var(--rd-rule); }

/* CD 06 lines 354-393 — bloom */
.rd-bloom {
  background: var(--rd-bg-3);
  border-top: 1px solid var(--rd-rule);
  padding: 14px 22px;
}
.rd-bloom-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 12px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.rd-bloom-name { color: var(--rd-ink); }
.rd-bloom-hint { color: var(--rd-ink-3); letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.rd-bloom-knobs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 900px;
}
.rd-knob {
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  padding: 8px 10px;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-4);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.rd-knob.on { color: var(--rd-ink-2); border-color: #5a4f3a; }
.rd-knob-name { text-transform: uppercase; font-size: 9px; letter-spacing: 0.18em; margin-bottom: 4px; }
.rd-knob-val { color: var(--rd-ink-2); margin-bottom: 6px; font-size: 11px; }
.rd-knob.on .rd-knob-val { color: var(--rd-warm); }
.rd-knob-rail { height: 2px; background: var(--rd-rule); border-radius: 1px; overflow: hidden; }
.rd-knob-fill { height: 100%; background: var(--rd-ink-4); }
.rd-knob.on .rd-knob-fill { background: var(--rd-warm); }


/* Profile tab — full-page entity treatment. V1 step 1 ships only
   the hero block; the body expands on subsequent ticks. */
/* Profile = workbench tab whose query is a single entity.
   Per CD's anatomy (artboard 14): full canvas, Hebrew dominates,
   bands not cards (whitespace + thin rules, no boxes). The tab
   strip already says where you are; the body doesn't need a title
   page. */

.wb-profile {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Was: align-items: center + padding 48 24. Reclaim the canvas. */
  padding: 0;
  background: var(--wb-bg);
  color: var(--wb-ink);
  overflow: auto;
}
.wb-profile-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 36px 12px;
  background: var(--wb-bg);
  /* No bottom rule — space separates the hero from the received
     channels below (Scott, 2026-07-13: remove the HR). Hero
     scrolls away with the page; the tab strip names where you
     are, so it doesn't pin. */
}
/* Glyphs above the Hebrew were title-page energy — the tab strip
   says where you are. Render them quietly if at all. */
.wb-profile-glyph {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--wb-ink-3);
  line-height: 1;
  margin-bottom: 4px;
}
.wb-profile-hb {
  font-family: var(--font-hebrew);
  font-size: 38px;
  line-height: 1.1;
  color: var(--wb-ink);
  direction: rtl;
  letter-spacing: 0.01em;
}
.wb-profile-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 16px;
  color: var(--wb-ink-2);
  font-style: italic;
  margin-top: 6px;
}

/* v2 hero — vocalized, large, warm; centered with the head extras.
   No bottom rule: the hero flows directly into the letter strip per
   the mockup; the section-divider rule appears at the next section
   (above the FACTOR header), not between hero and letter strip. */
.wb-profile-hero--v2 {
  align-items: center; text-align: center;
  /* v2 hero now only carries editorial. Zero its own padding so
     the surrounding `.pf-frame-main` (20 24) is what governs the
     margins — same shape the reader's `.rd-doc` (32 24) uses at
     its edges. Keeps the editorial column aligned with everything
     else in the profile shell. */
  padding: 0;
  border-bottom: 0;
}
.wb-profile-hero--v2 .wb-profile-hb {
  font-family: var(--font-hebrew);
  font-size: 76px;
  line-height: 1.15;
  color: var(--wb-warm);
  letter-spacing: 0.01em;
}
.wb-profile-hero--v2 .wb-profile-gloss {
  font-style: normal;
  max-width: 600px;
  line-height: 1.5;
}
.wb-profile-translit {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 13px;
  font-style: italic;
  color: var(--wb-ink-3);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.wb-gloss-lead { color: var(--wb-ink); font-weight: 500; }
.wb-gloss-rest { color: var(--wb-ink-3); font-style: italic; }
.wb-profile-todo {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  font-style: italic;
}

/* Bands replace cards — a thin rule above + label, content open
   to the canvas. No bg, no border, no rounded corners. */
.wb-profile-meta {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  letter-spacing: 0.05em;
  margin-top: 8px;
}
.wb-profile-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 36px 36px;
}
.wb-profile-section {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--wb-rule);
  border-radius: 0;
  padding: 6px 0 0;
  margin-top: 6px;
}
.wb-profile-section:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 6px;
}
.wb-profile-h3 {
  margin: 0 0 6px 0;
  font-family: var(--rd-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}

/* ScopeBar — sits between the tab strip and the hero. */
.pf-scopebar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 36px;
  border-bottom: 1px solid var(--wb-rule);
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pf-scope-type {
  color: var(--wb-warm);
  font-weight: 500;
}
.pf-scope-sep {
  color: var(--wb-ink-4);
}
.pf-crumb {
  color: var(--wb-ink-2);
}
.pf-crumb--last {
  color: var(--wb-ink);
  text-transform: none;
  letter-spacing: 0.02em;
}
.pf-scope-spacer {
  flex: 1 1 auto;
}
.pf-scope-meta {
  color: var(--wb-ink-2);
  text-transform: none;
  letter-spacing: 0.02em;
}
.pf-scope-back {
  color: var(--wb-warm);
  cursor: pointer;
}
.pf-scope-back:hover { text-decoration: underline; }
.wb-profile-concordance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 10px;
  font-family: var(--rd-mono);
  font-size: 11px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}
.wb-profile-conc-row {
  color: var(--wb-ink-2);
  text-decoration: none;
  padding: 1px 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.wb-profile-conc-row:hover {
  background: color-mix(in srgb, var(--wb-warm) 15%, transparent);
  color: var(--wb-warm);
  text-decoration: underline;
}

/* Verse profile — Hebrew tokens, translations, summary, xrefs. */
.wb-profile-verse-meta {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.wb-profile-verse-genre {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--wb-rule);
  border-radius: 999px;
  color: var(--wb-ink-2, var(--wb-ink-3));
  background: var(--wb-bg-3);
}
.wb-profile-verse-dialogue {
  font-style: italic;
  color: var(--wb-ink-2, var(--wb-ink-3));
}
.wb-profile-verse-dialogue-arrow {
  color: var(--wb-ink-3);
  font-style: normal;
}
.wb-profile-verse-hb {
  display: flex; flex-wrap: wrap; gap: 6px;
  direction: rtl;
  font-family: var(--font-hebrew);
  font-size: 22px;
  line-height: 1.6;
  color: var(--wb-ink);
  text-align: right;
}
.wb-profile-token {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
/* Te'amim groupings lens — breath-gap FALLBACK for verses without
   a parse (poetic books until the אמ"ת parser lands). */
.wb-profile-token--phrase-end { margin-inline-end: 0.35em; }

/* Te'amim groupings — the phrase TREE on the profile hero. The
   reader's bracket color scale, but a PLATE WITH LIPS instead of
   a pot: a bottom rule with short upturned ends, drawn as sized
   gradients (borders can't be shortened), shallow padding, tight
   sibling gaps (Scott, 2026-07-30). */
/* INLINE (not inline-block) + box-decoration-break: clone — a
   phrase that wraps across lines paints its rule and lips on EACH
   line fragment, tracing the words it actually holds, instead of
   one box-bottom rule stretched to the container edge. Inline
   vertical padding doesn't grow line boxes, so the grouped hero
   container supplies the line-height for the rule stack. */
.pf-phrase {
  display: inline;
  /* SLICE, not clone (browser-measured 2026-07-30): a phrase that
     wraps is an OPEN vessel — no rims and no padding at the break
     edges, so the rules run flush to the line edge and every line
     starts flush right. Clone was closing all six nested pots at
     every wrap (the 17px rim stack + ragged text starts). */
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
/* Line height + container bottom derive from the per-verse stack
   (--pfp-stack) plus the annex height (--pfp-annex: translit row
   + one row per number lens, set in cljs) — wrapped lines clear
   each other's plates AND annexes, and the last line clears the
   lens bar below. */
.pf-verse-hb.pf-verse-hb--grouped {
  /* doubled class: phrase-lemma-chapter.css loads AFTER this file
     and its .pf-verse-hb { line-height: 1.6 } was silently winning
     the cascade tie — none of the grouped line-heights ever
     applied (found via live computed-style, 2026-07-30). */
  /* Reserve stack+annex ONCE. Line-height alone would split it
     half-above/half-below the glyphs; the relative shift below
     slides every line's content down by half the reservation, so the
     full stack lands under the glyphs where the pots paint and
     rows sit ~0.5em apart instead of a stack-wide dead band
     (Scott, 2026-07-30). */
  line-height: calc(1.5em + var(--pfp-stack, 8px) + var(--pfp-annex, 0px));
  /* Top compensation — the shift eats the upper half-leading; the
     constant sets the rail-to-verse air (was 8px → 58.8px measured;
     −23px takes 2/5 off it, Scott 2026-07-30). */
  margin-top: calc(0px - var(--pfp-stack, 8px) - var(--pfp-annex, 0px));
  /* Last line's pots overflow the final line box by stack+annex−9;
     book that room so the chip bar keeps its distance. */
  padding-bottom: calc(var(--pfp-stack, 8px) + var(--pfp-annex, 0px) - 3px);
}
/* The slide: paint-only (position:relative never re-flows), direct
   children only — nested phrases and tokens ride their parent. */
.pf-verse-hb--grouped > .pf-phrase,
.pf-verse-hb--grouped > .wb-profile-token {
  position: relative;
  top: calc((var(--pfp-stack, 8px) + var(--pfp-annex, 0px)) / 2);
}
.pf-phrase[class*="pf-phrase--lvl-"] {
  /* Bottom padding comes from the .pf-phrase--dN depth rules BELOW
     (same specificity, later wins — never set padding shorthand
     here, it zeroes the depth offsets: the 2026-07-30 smoosh).
     Horizontal: no inline padding — the lips sit at the words'
     edge; the 1.5px inline margins give ~1px between nested lips
     and 3px between sibling plates. */
  /* GAPPED nesting (Scott, 2026-07-30 — the reader's spacing
     character, our waterline + line-breaking): 2px of air between
     nested lips → each level insets 3.5px = parent PADDING + child
     MARGIN (1.5px lip + 2px gap). The split between the two decides
     the SIBLING gap without touching the nesting inset: margin 1px
     each side = 2px between sibling plates, the same beat as the
     nested lips (Scott 2026-07-30: no wider sibling gap). With
     slice, padding is not applied at wrap-break edges — which is
     what keeps wrapped lines flush. */
  padding-inline: 2.5px;
  margin-inline: 1px;
  background:
    linear-gradient(var(--pfp-c), var(--pfp-c)) left 0 bottom 3px / 1.5px calc(var(--pfp-lip, 6px) - 3px) no-repeat,
    linear-gradient(var(--pfp-c), var(--pfp-c)) right 0 bottom 3px / 1.5px calc(var(--pfp-lip, 6px) - 3px) no-repeat,
    linear-gradient(var(--pfp-c), var(--pfp-c)) bottom center / calc(100% - 6px) 1.5px no-repeat,
    radial-gradient(circle at 100% 0%, transparent 1.4px, var(--pfp-c) 1.5px, var(--pfp-c) 3px, transparent 3.5px) left bottom / 3px 3px no-repeat,
    radial-gradient(circle at 0% 0%, transparent 1.4px, var(--pfp-c) 1.5px, var(--pfp-c) 3px, transparent 3.5px) right bottom / 3px 3px no-repeat;
}
/* Depth ladder — GAPPED pots: 7px air under the text, then 3.5px
   per depth step (1.5px rule + 2px gap), and every level's lips
   rise to the SAME waterline beside the text — ~12px above the
   text bottom (Scott 2026-07-30: a third of the Hebrew below the
   waterline); lip = padding-bottom + 12px. Each
   outer pot reads visibly deeper than the one it holds. */
.pf-phrase.pf-phrase--d0 { padding-bottom: calc(7px + var(--pfp-annex, 0px)); --pfp-lip: calc(19px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d1 { padding-bottom: calc(10.5px + var(--pfp-annex, 0px)); --pfp-lip: calc(22.5px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d2 { padding-bottom: calc(14px + var(--pfp-annex, 0px)); --pfp-lip: calc(26px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d3 { padding-bottom: calc(17.5px + var(--pfp-annex, 0px)); --pfp-lip: calc(29.5px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d4 { padding-bottom: calc(21px + var(--pfp-annex, 0px)); --pfp-lip: calc(33px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d5 { padding-bottom: calc(24.5px + var(--pfp-annex, 0px)); --pfp-lip: calc(36.5px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d6 { padding-bottom: calc(28px + var(--pfp-annex, 0px)); --pfp-lip: calc(40px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d7 { padding-bottom: calc(31.5px + var(--pfp-annex, 0px)); --pfp-lip: calc(43.5px + var(--pfp-annex, 0px)); }
.pf-phrase.pf-phrase--d8 { padding-bottom: calc(35px + var(--pfp-annex, 0px)); --pfp-lip: calc(47px + var(--pfp-annex, 0px)); }
/* Leaf interior — content clears the walls by the same 4px on
   both sides (Scott 2026-07-30: selection box ↔ wall gap must be
   equal; the old 7px left compensated the previously-asymmetric
   selection box). Doubled class outranks the base rule. */
.pf-phrase.pf-phrase--leaf { padding-inline: 4px; }
/* Numbers-below-plates (Scott, 2026-07-30): in grouped mode the
   per-word / per-letter number subscripts leave the flow and hang
   below the painted stack, so the plates hug the Hebrew. */
.pf-verse-hb--grouped .wb-profile-token { position: relative; }
/* Annex row 1 — transliteration, directly under the plates. Out
   of flow so the token box stays Hebrew-only (plates hug the
   words; the selection highlight hugs the word). */
.pf-verse-hb--grouped .pf-token-translit {
  position: absolute;
  /* THE TOWER (Scott, 2026-07-30): without a reset, this inherits
     the grouped container's doubled line-height (~130px line box)
     and its text renders far below the top anchor — the night's
     'translit below the floors' in one line. */
  line-height: 1.2;
  /* anchored to the token TOP (hebrew block is a constant ~47px):
     100%-anchoring broke on the selected token, whose box
     inflates and dragged its annexes below the floors. */
  top: var(--sv-annex-top, 49px);
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  white-space: nowrap;
}
/* Annex row 2 — the gv/els numbers, below translit when both on
   (--pfp-subs-off = translit row height or 0). */
.pf-verse-hb--grouped .pf-token-subs {
  position: absolute;
  top: calc(var(--sv-annex-top, 49px) + var(--pfp-subs-off, 0px));
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
}
.pf-verse-hb--grouped .pf-letter-cluster { position: relative; }
.pf-verse-hb--grouped .pf-letter-subs {
  position: absolute;
  /* anchored to the CLUSTER, which sits ~2px below the token box
     the word-level subs anchor to — 47px keeps both number stacks
     on the same visual line (letter grain was pushing the els row
     into the pot floor, Scott 2026-07-30). */
  top: calc(var(--sv-annex-top, 49px) - 2px + var(--pfp-subs-off, 0px));
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
}
.pf-phrase--lvl-1 { --pfp-c: #c95844; }  /* warm red */
.pf-phrase--lvl-2 { --pfp-c: #d97f57; }  /* warm orange */
.pf-phrase--lvl-3 { --pfp-c: #c89e3b; }  /* warm gold */
.pf-phrase--lvl-4 { --pfp-c: #7a9d6c; }  /* sage green */
.pf-phrase--lvl-5 { --pfp-c: #5b8a9b; }  /* teal */
.pf-phrase--lvl-6 { --pfp-c: #6e7eaa; }  /* indigo */
.pf-phrase--lvl-7 { --pfp-c: #8a6ea7; }  /* violet */
.pf-phrase--lvl-8 { --pfp-c: #a25cb0; }  /* magenta */

/* or-thread lens — mint underline under the word (2026-07-30). */
.wb-profile-token--or-underline {
  box-shadow: 0 2px 0 0 var(--rd-fixed);
}

.wb-profile-token:hover {
  background: color-mix(in srgb, var(--wb-warm) 22%, transparent);
  color: var(--wb-warm);
}
.wb-profile-token-hb {
  display: block;
  line-height: 1.2;
}
.wb-profile-token-gv {
  display: block;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--wb-ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  direction: ltr;
}
.wb-profile-token:hover .wb-profile-token-gv {
  color: var(--wb-warm);
}

/* את (aleph-tav, direct-object marker) — these tokens carry no
   own-meaning, just mark the next word as the direct object. They
   recur ~11k times across the Tanakh and reading the verse as
   structure (vs. as language) wants them to read as marks, not as
   words. Subtle dotted underline + slightly muted color. The
   per-chapter and per-token tooltips already say "את" explicitly,
   so the visual is just an at-a-glance rhythm cue.
*/
.wb-profile-token--aleph-tav {
  /* Reader parity (Scott, 2026-07-13): the reader marks את by
     COLOR (.rd-w.marker → var(--rd-marker)), not by a box. The
     old token outline read as a UI selection state rather than
     a text-layer marking. */
}
/* Predicate-slot highlight — when the user hovers a recognized
   predicate chip below, the verse-hb tokens whose indices fill
   that predicate's slots get a transient warm tint. Different
   feel from the active-token outline (which is a click-state):
   this is a fast read-on-hover affordance.
*/
.wb-profile-token--predicate-slot {
  background: color-mix(in srgb,
                        var(--wb-warm) 24%,
                        transparent);
  outline: 1px solid color-mix(in srgb,
                               var(--wb-warm) 70%,
                               transparent);
  border-radius: 3px;
  transition: background 80ms ease, outline-color 80ms ease;
}
/* את's colour moved onto the lens colour channel (2026-09-21) so it splits
   with first / hapax; the wrapper class keeps only the tooltip and hover. */
/* The Hebrew edition lens (exp 808): a token whose reading under the
   chosen edition differs from the record. Dotted = vowel/accent
   layer; double = a consonant moved (the five). */
.wb-profile-token--edition-delta .wb-profile-token-hb {
  text-decoration: underline dotted;
  text-decoration-color: var(--wb-warm);
  text-underline-offset: 0.32em;
}
.wb-profile-token--edition-consonant .wb-profile-token-hb {
  text-decoration-style: double;
  text-decoration-color: var(--rd-marker, var(--wb-warm));
}

.wb-profile-translations {
  display: flex; flex-direction: column; gap: 4px;
}
.wb-profile-tr-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  font-size: 12px;
  color: var(--wb-ink-2);
  line-height: 1.45;
}
.wb-profile-tr-src {
  color: var(--wb-ink-3);
  font-family: var(--rd-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  padding-top: 3px;
}
.wb-profile-tr-text {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
}
.wb-profile-summary {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wb-ink);
}

/* ── Predicates / convergence chips (verse profile) ─────────────
   Both bands share one chip style. Recognized predicates and
   convergence hits get the warm `--on` variant; absent
   predicates dim with `--off`. Title-on-hover carries the full
   Generated reasoning string for the row.
*/
.wb-profile-preds {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 0;
}
.wb-profile-pred {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-family: var(--rd-mono);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 999px;
  color: var(--wb-ink-2);
  background: var(--wb-bg-3);
  cursor: default;
  transition: background 80ms ease, border-color 80ms ease,
              color 80ms ease;
}
.wb-profile-pred--on {
  color: var(--wb-ink);
  border-color: var(--wb-warm);
  background: color-mix(in srgb,
                        var(--wb-warm) 18%,
                        var(--wb-bg-3));
}
.wb-profile-pred--off {
  color: var(--wb-ink-2);
  opacity: 0.55;
  border-style: dashed;
}
.wb-profile-pred-l {
  /* primary label */
}
.wb-profile-pred-conf {
  font-size: 10px;
  color: var(--wb-ink-2);
  padding-left: 2px;
}
.wb-profile-pred-slots {
  font-size: 10px;
  color: var(--wb-ink-2);
  padding-left: 4px;
  font-style: italic;
}
.wb-profile-pred--hoverable {
  cursor: help;
}
.wb-profile-pred--hoverable:hover {
  border-color: var(--wb-warm);
}
.wb-profile-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* ── ELS band — fibers through this verse (Step 2) ──────────
   Compact row layout: Hebrew form on the right (RTL), signed
   skip with explicit + / − sign, then start-position meta.
   Hover state reserved for the future FIBER-profile drill. */
.wb-els-rows {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--rd-mono);
  font-size: 11px;
}
.wb-els-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--wb-bg-3);
  cursor: default;
  transition: background 80ms ease;
}
.wb-els-row-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.wb-els-row-top > .wb-els-form {
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
  cursor: pointer;
  border-radius: 2px;
  padding: 0 2px;
  transition: background 80ms ease, color 80ms ease;
}
.wb-els-row-top > .wb-els-form:hover {
  background: color-mix(in srgb, var(--wb-warm, #c89b3c) 14%, transparent);
  color: var(--wb-warm, #c89b3c);
}
.wb-els-row-top > .wb-els-meta {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.wb-els-row-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
  color: var(--wb-ink-2);
  white-space: normal;
  word-break: break-word;
}
.wb-els-row-freq {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--wb-ink-3);
}
.wb-els-freq-pill {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--wb-ink-3) 8%, transparent);
}
/* Verse-profile-only modifier — the band uses the same row but
   wider gloss + a slight bg shift to set off from the rail. */
.wb-els-row--profile {
  padding: 8px 12px;
}
/* ELS band header controls — skip-class strip + filter/sort chips. */
.wb-els-skip-strip {
  display: flex;
  height: 6px;
  margin: 6px 0 8px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--wb-bg-3);
}
.wb-els-skip-strip-seg {
  height: 100%;
}
.wb-els-skip-strip-seg--signature {
  background: var(--rd-hot);
}
.wb-els-skip-strip-seg--small {
  background: var(--wb-warm, #e8c87a);
}
.wb-els-skip-strip-seg--surface {
  background: color-mix(in srgb, var(--wb-ink-2) 50%, transparent);
}
.wb-els-skip-strip-seg--other {
  background: color-mix(in srgb, var(--wb-ink-3) 30%, transparent);
}
.wb-els-controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 4px 0;
  font-family: var(--rd-mono);
  font-size: 10px;
}
.wb-els-controls-label {
  color: var(--wb-ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 4px;
}
.wb-els-control-chip {
  padding: 2px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 999px;
  color: var(--wb-ink-3);
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.wb-els-control-chip:hover {
  color: var(--wb-warm);
  border-color: color-mix(in srgb, var(--wb-warm) 50%, var(--wb-rule));
}
.wb-els-control-chip--on {
  background: color-mix(in srgb, var(--wb-warm) 18%, transparent);
  color: var(--wb-warm);
  border-color: color-mix(in srgb, var(--wb-warm) 60%, var(--wb-rule));
}
.wb-els-meta-line {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  margin: 6px 0 4px;
}
/* Fiber pager — server-side pagination of the fiber query. */
.wb-els-pager {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 4px;
  font-family: var(--rd-mono);
  font-size: 10.5px;
}
.wb-els-pager-btn {
  padding: 2px 10px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: var(--wb-bg-2);
  color: var(--wb-ink-2);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.wb-els-pager-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wb-warm) 10%, var(--wb-bg-2));
  border-color: color-mix(in srgb, var(--wb-warm) 40%, var(--wb-rule));
}
.wb-els-pager-btn:disabled { opacity: 0.4; cursor: default; }
.wb-els-pager-label { color: var(--wb-ink-3); font-variant-numeric: tabular-nums; }
.wb-els-form-filter {
  flex: 1 1 auto;
  min-width: 100px;
  max-width: 220px;
  padding: 2px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 4px;
  background: var(--wb-bg-3);
  color: var(--wb-ink);
  font-family: var(--font-hebrew);
  font-size: 14px;
}
.wb-els-form-filter:focus {
  outline: none;
  border-color: var(--wb-warm);
}
.wb-els-form-filter::placeholder {
  color: var(--wb-ink-4);
  font-size: 11px;
}
.wb-els-badges {
  display: inline-flex; gap: 4px;
  font-family: ui-sans-serif, sans-serif;
}
.wb-els-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px; font-weight: 600;
  font-family: var(--rd-mono);
  letter-spacing: 0.04em;
  line-height: 1;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
}
.wb-els-badge[data-kind="sig"] {
  color: var(--rd-hot);
  background: color-mix(in srgb, var(--rd-hot) 14%, transparent);
}
.wb-els-badge[data-kind="mag"] {
  color: var(--wb-warm, #e8c87a);
  background: color-mix(in srgb, var(--wb-warm, #e8c87a) 14%, transparent);
}
.wb-els-badge[data-kind="frm"] {
  color: var(--wb-ink-2, #b9b0a0);
  background: color-mix(in srgb, var(--wb-ink-2, #b9b0a0) 12%, transparent);
}
.wb-els-legend-toggle {
  margin-left: 8px;
  width: 18px; height: 18px;
  padding: 0; border-radius: 50%;
  border: 1px solid var(--wb-ink-3, #756e62);
  background: transparent;
  color: var(--wb-ink-3, #756e62);
  font-family: var(--rd-mono);
  font-size: 11px; line-height: 1;
  cursor: pointer;
  transition: color 80ms ease, border-color 80ms ease, background 80ms ease;
}
.wb-els-legend-toggle:hover {
  color: var(--wb-warm, #e8c87a);
  border-color: var(--wb-warm, #e8c87a);
  background: color-mix(in srgb, var(--wb-warm, #e8c87a) 10%, transparent);
}
.wb-els-legend {
  margin: 6px 0 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--wb-warm, #e8c87a);
  background: color-mix(in srgb, var(--wb-warm, #e8c87a) 5%, var(--wb-bg-3));
  border-radius: 0 3px 3px 0;
  font-size: 11px; line-height: 1.5;
  color: var(--wb-ink-2);
}
.wb-els-legend-h {
  font-family: ui-sans-serif, sans-serif;
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
  margin-bottom: 6px;
}
.wb-els-legend-list {
  list-style: none; padding: 0; margin: 0 0 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.wb-els-legend-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px; align-items: baseline;
}
/* Legend "swatch" keys for the non-badge columns — match the row's
   actual typography so the reader sees the same shape they'll meet
   in the table. */
.wb-els-legend-key {
  font-family: var(--font-hebrew);
  font-size: 14px;
  color: var(--wb-ink);
  text-align: right;
}
.wb-els-legend-key--gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12px;
  font-style: italic;
  color: var(--wb-ink-2);
  text-align: left;
}
.wb-els-legend-key--meta {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-2);
  letter-spacing: 0.04em;
  text-align: left;
}
.wb-els-legend-desc {
  color: var(--wb-ink-2);
  font-family: ui-sans-serif, sans-serif;
}
.wb-els-legend-foot {
  font-family: ui-sans-serif, sans-serif;
  font-size: 10px;
  color: var(--wb-ink-3);
  border-top: 1px solid color-mix(in srgb, var(--wb-ink-3) 25%, transparent);
  padding-top: 6px;
}

/* FIBER profile · coherence-band sample chips. Each chip is a
   verse-ref the same form reads from at ±skip, clickable to jump
   to that verse's profile. */
.wb-fiber-sample-row {
  display: flex; align-items: baseline; gap: 8px;
  margin: 2px 0 4px;
  font-size: 11px;
}
.wb-fiber-sample-label {
  color: var(--wb-ink-3);
  font-family: ui-sans-serif, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  flex: 0 0 auto;
}
.wb-fiber-sample-chips {
  display: inline-flex; flex-wrap: wrap; gap: 4px 6px;
}
.wb-fiber-sample-chip {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--wb-warm, #e8c87a);
  background: color-mix(in srgb, var(--wb-warm, #e8c87a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--wb-warm, #e8c87a) 25%, transparent);
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.wb-fiber-sample-chip:hover {
  color: var(--rd-hot);
  background: color-mix(in srgb, var(--rd-hot) 14%, transparent);
  border-color: color-mix(in srgb, var(--rd-hot) 45%, transparent);
}
.wb-els-gloss {
  font-family: ui-sans-serif, sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--wb-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.wb-els-row:hover {
  background: color-mix(in srgb, var(--wb-warm, #c89b3c) 8%, var(--wb-bg-3));
}
/* Reverse cross-highlight: when a letter cell in the LETTERS band
   is hovered, every ELS row whose fiber passes through that gidx
   lights up. Mirrors the forward direction (row hover → cell lit). */
.wb-els-row--lit {
  background: color-mix(in srgb, var(--rd-hot) 14%, var(--wb-bg-3));
  box-shadow: inset 2px 0 0 var(--rd-hot);
}
.wb-els-row--lit:hover {
  background: color-mix(in srgb, var(--rd-hot) 20%, var(--wb-bg-3));
}
.wb-els-form {
  font-family: var(--font-hebrew);
  font-size: 15px;
  color: var(--wb-ink);
  text-align: right;
}
.wb-els-skip {
  font-variant-numeric: tabular-nums;
  color: var(--wb-warm, #c89b3c);
  text-align: right;
  letter-spacing: 0.02em;
}
.wb-els-meta {
  color: var(--wb-ink-2);
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Compact ELS rows inside the right-panel's :letter unit view.
   Same shape as .wb-els-row but tighter, fits the narrower rail. */
.rd-panel-els-rows {
  display: flex; flex-direction: column;
  gap: 1px;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  font-family: var(--rd-mono);
  font-size: 10px;
}
.rd-panel-els-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 7px;
  border-radius: 3px;
  background: var(--wb-bg-3);
  cursor: default;
  transition: background 80ms ease;
}
.rd-panel-els-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rd-panel-els-row:hover {
  background: color-mix(in srgb, var(--wb-warm, #c89b3c) 10%, var(--wb-bg-3));
}
.rd-panel-els-form {
  flex: 1 1 auto;
  font-family: var(--font-hebrew);
  font-size: 14px;
  color: var(--wb-ink);
  text-align: right;
  min-width: 0;
}
.rd-panel-els-meta {
  flex: 0 0 auto;
  color: var(--wb-ink-2);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.rd-panel-els-row-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.35;
  color: var(--wb-ink-2);
  /* Full width of the row — wraps if the lexicon definition is
     long. No ellipsis here; the rail is narrow enough that an
     extra line is cheaper than truncation. */
  white-space: normal;
  word-break: break-word;
}
.wb-profile-xref-list {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--rd-mono);
  font-size: 11px;
  max-height: 200px;
  overflow-y: auto;
  padding: 2px 0;
}

/* Word-profile fingerprint band — three thin facets (letters ·
   where-it-lives · readers) clustered left, each column sized to
   its content. Without intrinsic sizing the freq-bar row's `1fr`
   stretches and the T/N/K counts drift away from their labels. */
.wb-profile-fingerprint {
  display: flex; flex-wrap: wrap;
  gap: 18px 36px;
  align-items: flex-start;
}
.wb-profile-fingerprint-col {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
/* Compact the freq-by-canon-mini bars when they live in the
   fingerprint band — the standalone section gave them the full
   profile width; here we want them tight so the count sits next
   to its T/N/K label. */
.wb-profile-fingerprint .rd-panel-freq {
  width: 160px;
}
.wb-profile-fingerprint-l {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}
.wb-profile-fingerprint-now {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--wb-ink-3);
  margin-top: 2px;
}

/* Word profile — per-letter mini. RTL flow; each letter shows
   on top with its individual gematria value beneath in mono. */
.wb-profile-letters {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  direction: rtl;
  padding: 0;
}
.wb-profile-letter {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: var(--wb-bg-3);
  user-select: none;
  cursor: default;
  transition: background 80ms ease, border-color 80ms ease;
}
.wb-profile-letter--on {
  background: color-mix(in srgb, var(--wb-warm) 24%, transparent);
  border-color: var(--wb-warm);
  outline: 1px solid var(--wb-warm);
}
/* Lit-segment from CD-09 — set when an ELS-band row is hovered and
   this cell's gidx is one of the fiber's positions. */
.wb-profile-letter--lit {
  outline: 1px solid var(--rd-hot);
  outline-offset: -1px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--rd-hot) 40%, transparent);
  z-index: 1;
}
.wb-profile-letter-hb {
  font-family: var(--font-hebrew);
  font-size: 24px;
  line-height: 1;
  color: var(--wb-ink);
}
.wb-profile-letter-gv {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--wb-warm);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  direction: ltr;
}

/* Section label rows that carry a small right-aligned action
   (↗ open as tab on the lemma sub-section, etc.). */
.rd-panel-section-label-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.rd-panel-section-label-row .rd-panel-section-label {
  margin-bottom: 0;
}
.rd-panel-section-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 16px;
  margin-inline-start: auto;
  font-size: 11px; line-height: 1;
  color: var(--rd-ink-3);
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.rd-panel-section-action:hover {
  background: color-mix(in srgb, var(--rd-hot) 18%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-hot);
}

/* Concordance walk — active row highlight + "now at" caption. */
.wb-profile-conc-now {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  margin-bottom: 6px;
}
.wb-profile-conc-now strong {
  color: var(--wb-warm);
  font-weight: 500;
}
.wb-profile-conc-row--at {
  background: color-mix(in srgb, var(--wb-warm) 22%, transparent);
  color: var(--wb-warm);
  outline: 1px solid var(--wb-warm);
}

/* Two-pane profile layout — main on the left, side panel on
   the right. Activated by the .wb-profile--with-aside modifier
   so single-pane profiles (word, lemma) keep the centered look.
   Override align-items so the row stretches both children. */
.wb-profile--with-aside {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
}

/* v2 layout — scope-bar spans the top across BOTH main + aside;
   `.wb-profile-stage` is the row below holding them side by side.
   Combine with `--with-aside`. Overrides the row direction so the
   scope-bar sits as the first row of a column stack. */
.wb-profile--scope-top {
  flex-direction: column !important;
}
.wb-profile--scope-top .wb-profile-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}
.wb-profile--scope-top .wb-profile-stage .wb-profile-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 24px;
  overflow-y: auto;
  min-width: 0;
}
.wb-profile--scope-top .wb-profile-stage .wb-profile-aside {
  flex: 0 0 320px;
  border-left: 1px solid var(--wb-rule);
  /* Same bg as the doc — the divider line is the only seam (the
     .rd-panel rule in panel.css states the principle; the old
     --wb-bg-2 tint made the mini's colors read differently here
     than on the word profile's sidebar). */
  background: var(--wb-bg);
  overflow-y: auto;
}
.wb-profile--scope-top > .pf-scopebar { flex: 0 0 auto; }
.wb-profile--with-aside .wb-profile-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 24px;
  overflow-y: auto;
  min-width: 0;
}
.wb-profile--with-aside .wb-profile-hero {
  /* Three-pane variant — horizontal bleed only. The vertical
     negative margin (-16px) was for a layout where the hero was
     the first child of `.wb-profile-main`; the scope-bar now sits
     above it, so a negative top margin pulls the hero up into the
     scope-bar and clips it. Horizontal -24px still cancels the
     column's side padding so the bg goes edge-to-edge. */
  align-self: stretch;
  margin: 0 -24px 0;
  padding: 18px 36px 12px;
  width: auto;
  align-items: center;
}
.wb-profile-aside {
  flex: 0 0 320px;
  border-left: 1px solid var(--wb-rule);
  background: var(--wb-bg);
  overflow-y: auto;
}
/* The aside's own border-left is the seam; the mini's .rd-panel
   border-left would double it. And the panel's reader background
   (--rd-bg) is a shade darker than the aside's --wb-bg — painted
   here it read as an inset two-tone box (Scott, 2026-07-30);
   transparent lets the aside be one surface, like the reader. */
.wb-profile-aside .rd-panel { border-left: 0; background: transparent; }

/* ── Narrow-viewport profile layout ─────────────────────────────
   Below 900px the two-column profile body (main + aside) stacks
   vertically — main takes the full width, aside flows underneath
   as its own scroll region. Below 560px the aside collapses
   entirely (the same info is reachable by navigating into the
   profile tab; the aside is a preview, not a required surface).
   Real mobile pass will replace this with a swipe/drawer via the
   designer — this is the "kinda work" bridge until then. */

@media (max-width: 900px) {
  .wb-profile--with-aside {
    flex-direction: column;
  }
  .wb-profile--scope-top .wb-profile-stage {
    flex-direction: column;
  }
  .wb-profile--scope-top .wb-profile-stage .wb-profile-aside,
  .wb-profile-aside {
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid var(--wb-rule);
    max-height: 40vh;
  }
}

.wb-profile-aside-empty {
  padding: 24px 18px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  font-style: italic;
}
/* Flip affordance above the verse mini-profile — 'verse N of M' on the
   left, the ↑↓ key hint on the right. Tells the user the aside walks a
   list of the word's occurrences. */
.wb-aside-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 7px;
  border-bottom: 1px solid var(--wb-rule);
}
.wb-aside-nav-pos {
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}
/* the ¶ grain glyph rides the nav line (Scott, 2026-09-02) — warm
   like the panel head's glyph it replaces, nudged to sit on the
   caps baseline of the mono pos text. */
.wb-aside-nav-glyph {
  font-family: var(--font-hebrew);
  font-size: 13px;
  color: var(--rd-warm, #d4a256);
  margin-inline-end: 6px;
  vertical-align: -1px;
}
.wb-aside-nav-hint {
  display: inline-flex;
  gap: 3px;
}
.wb-aside-nav-kbd {
  font-family: var(--rd-mono);
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  color: var(--wb-ink-3);
  background: var(--wb-bg);
}
/* the ↑↓ are buttons now (they walk the verses, as the keys do) */
button.wb-aside-nav-kbd { cursor: pointer; }
button.wb-aside-nav-kbd:hover:not(:disabled) { color: var(--wb-ink); border-color: var(--wb-ink-3); }
button.wb-aside-nav-kbd:disabled { opacity: 0.35; cursor: default; }
.wb-profile-token--phrase {
  background: color-mix(in srgb, var(--wb-warm) 14%, transparent);
  border-radius: 3px;
}
.wb-profile-token--active {
  color: var(--wb-warm);
  position: relative;
  isolation: isolate;
}
/* ONE box geometry for every token-sized highlight (Scott,
   2026-07-30): hover wash, word/anchor selection, lemma/form/root
   membership chips, and phrase membership all paint the token's
   own padded box (base 2px 4px, radius 3px). The selection stays
   an inset pseudo so layout never moves — inset: 0 IS that box. */
.wb-profile-token--active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--wb-warm) 28%, transparent);
  border: 1px solid var(--wb-warm);
  border-radius: 3px;
  pointer-events: none;
  z-index: -1;
}

/* CHOSHEN — reserved gate REMOVED 2026-08-20 ("the gate is coming down") */
/* Legacy name retained only inside this withheld style block. */
/* Oracle result block — inline under the affordances row,
   shows the most-recent breastplate ask. */
.rd-panel-oracle {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  background: var(--rd-bg-2);
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--rd-ink-2);
}
.rd-panel-oracle-head {
  display: flex; align-items: baseline;
  margin-bottom: 4px;
}
.rd-panel-oracle-word {
  font-family: var(--font-hebrew);
  font-size: 16px;
  color: var(--rd-warm);
  direction: rtl;
}
.rd-panel-oracle-meaning {
  color: var(--rd-ink-3);
  font-style: italic;
}
.rd-panel-oracle-stats {
  color: var(--rd-ink-3);
  font-size: 10px;
  letter-spacing: 0.04em;
  /* breathing room below the breastplate grid (Scott 2026-08-20) */
  margin-top: 8px;
  margin-bottom: 4px;
}
.rd-panel-oracle-readers {
  display: flex; gap: 6px; align-items: center;
}
.rd-panel-oracle-reader {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px;
  border: 1px solid var(--rd-rule);
  border-radius: 2px;
  background: var(--rd-bg-3);
}
.rd-panel-oracle-reader-l {
  color: var(--rd-warm);
  font-weight: 500;
}
.rd-panel-oracle-reader-c {
  color: var(--rd-ink-2);
  font-variant-numeric: tabular-nums;
}
.rd-panel-oracle-reader--clickable {
  cursor: pointer;
}
.rd-panel-oracle-reader--clickable:hover {
  background: color-mix(in srgb, var(--rd-warm) 12%, var(--rd-bg-3));
  border-color: color-mix(in srgb, var(--rd-warm) 35%, var(--rd-rule));
}
.rd-panel-oracle-dark {
  color: var(--rd-ink-3);
  font-style: italic;
  margin-top: 4px;
}

/* Per-reader image (forward Thummim) — what each reader sees
   when the breastplate is lit by the asked word's illumination.
   Hebrew chips, click → open that word's profile. */
.rd-panel-oracle-image {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--rd-rule);
}
.rd-panel-oracle-section-h {
  color: var(--rd-ink-3);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rd-panel-oracle-image-row {
  display: flex; align-items: baseline; gap: 6px;
  margin: 2px 0;
}
.rd-panel-oracle-image-words {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
}
.rd-panel-oracle-word-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-hebrew);
  font-size: 13px;
  color: var(--rd-warm);
  direction: rtl;
  padding: 0 4px;
  border-radius: 2px;
  cursor: pointer;
}
.rd-panel-oracle-word-chip:hover {
  background: color-mix(in srgb, var(--rd-warm) 12%, transparent);
}

/* Cipher image/preimage rows on word profile — one row per
   reader with letter + count + chips. Mirrors the oracle band's
   image-by-reader layout but uses the wb-profile vocabulary. */
.wb-profile-cipher-row {
  display: flex; align-items: baseline; gap: 8px;
  margin: 4px 0;
}
.wb-profile-cipher-count {
  color: var(--wb-ink-3);
  font-family: var(--rd-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.wb-profile-cipher-words {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  flex: 1;
}
/* Cipher chip gloss — small italic mono caption beside the
   Hebrew form. Anagrams + same-GV chips already do the same
   on the side panel via `peer-chip`. */
.wb-profile-cipher-gloss {
  font-family: var(--rd-mono);
  font-size: 9px;
  color: var(--rd-ink-3);
  font-style: italic;
  letter-spacing: 0.02em;
  margin-left: 4px;
}
/* end CHOSHEN block */

/* Te'amim parse-tree mini on verse profile — indented row per
   phrase, indent = level × 14px. Click any row → opens that
   phrase profile. Mark column shows the disjunctive accent
   abbreviation that closes the phrase. */
.wb-profile-tamim-tree {
  display: flex; flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.wb-profile-tamim-row {
  display: flex; align-items: baseline;
  gap: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-hebrew);
  direction: rtl;
}
.wb-profile-tamim-row:hover {
  background: color-mix(in srgb, var(--wb-warm) 8%, transparent);
}
.wb-profile-tamim-row--root {
  font-weight: 500;
}
.wb-profile-tamim-row--leaf {
  color: var(--wb-ink-2);
}
.wb-profile-tamim-mark {
  direction: ltr;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.wb-profile-tamim-text {
  font-size: 14px;
  color: var(--wb-ink);
}

/* Book / chapter shape histograms — one bar per child entity,
   height ∝ count. Reads as the entity's silhouette. Click a bar
   to open that child's profile. */
.wb-profile-shape {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
  padding: 2px 0;
}
.wb-profile-shape-bar {
  display: inline-block;
  flex: 1 0 4px;
  min-width: 3px;
  background: color-mix(in srgb, var(--wb-warm) 40%, var(--wb-bg-3));
  border-radius: 1px;
  cursor: pointer;
  transition: background 80ms ease;
}
.wb-profile-shape-bar:hover {
  background: var(--wb-warm);
}
/* Current-position marker on density bars — used by the verse
   profile's across-book chapter histogram to mark the chapter
   the active verse lives in. */
.wb-profile-shape-bar--here {
  background: var(--wb-warm);
  box-shadow: 0 0 0 1px var(--wb-warm) inset,
              0 0 6px color-mix(in srgb, var(--wb-warm) 40%, transparent);
}

/* Person arc — first → last appearance bookends connected by a
   thin rule. Clickable bookends drop into the verse via
   `open-ref-in-new-tab`. */
.wb-profile-arc {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
}
.wb-profile-arc-bookend {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-warm);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 12px;
}
.wb-profile-arc-bookend:hover {
  background: color-mix(in srgb, var(--wb-warm) 12%, transparent);
  border-color: color-mix(in srgb, var(--wb-warm) 50%, var(--wb-rule));
}
.wb-profile-arc-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--wb-warm) 40%, transparent),
    color-mix(in srgb, var(--wb-warm) 10%, transparent));
}

/* Person lineage — labeled rows of clickable name chips. Each
   chip drops into that person's profile. */
.wb-profile-lineage {
  display: flex; flex-direction: column;
  gap: 4px;
}
.wb-profile-lineage-row {
  display: flex; align-items: baseline; gap: 10px;
}
.wb-profile-lineage-h {
  font-family: var(--rd-mono);
  font-size: 9.5px;
  color: var(--wb-ink-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  width: 64px; flex-shrink: 0;
}
.wb-profile-lineage-chips {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
}
.wb-profile-lineage-chip {
  font-size: 12px;
  color: var(--wb-warm);
  cursor: pointer;
  padding: 1px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 12px;
}
.wb-profile-lineage-chip:hover {
  background: color-mix(in srgb, var(--wb-warm) 12%, transparent);
  border-color: color-mix(in srgb, var(--wb-warm) 50%, var(--wb-rule));
}

/* Collection canonical structure — three labeled cells showing
   per-canon book counts. Renders only on multi-canon collections
   (Tanakh, Megillot when it spans Ketuvim+Neviim variants). */
.wb-profile-canon-row {
  display: flex; gap: 16px;
  align-items: baseline;
}
.wb-profile-canon-cell {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--wb-rule);
  border-radius: 12px;
  background: var(--wb-bg-2);
}
.wb-profile-canon-l {
  font-family: var(--rd-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}
.wb-profile-canon-n {
  font-family: var(--rd-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--wb-warm);
}

/* Torah 4D axes — `a 7  completeness`, `b 50 jubilee`, etc. */
.wb-profile-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.wb-profile-axis {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--wb-rule);
  border-radius: 4px;
  background: var(--wb-bg-2);
}
.wb-profile-axis-l {
  font-family: var(--rd-mono);
  font-size: 14px;
  color: var(--wb-warm);
  font-weight: 500;
  width: 14px;
}
.wb-profile-axis-n {
  font-family: var(--rd-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--wb-ink);
}
.wb-profile-axis-g {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  color: var(--wb-ink-2);
  font-size: 12px;
  flex: 1;
  text-align: right;
}

/* Structural numbers grid on book profile — `<count> ÷ <m> = <q> r <r>`
   per row. Exact-divides (r = 0) light up warm. */
.wb-profile-structural {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}
.wb-profile-struct {
  display: grid;
  grid-template-columns: 36px 56px 56px 1fr;
  align-items: baseline;
  padding: 4px 10px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: var(--wb-bg-2);
  gap: 6px;
}
.wb-profile-struct--clean {
  border-color: color-mix(in srgb, var(--wb-warm) 60%, var(--wb-rule));
  background: color-mix(in srgb, var(--wb-warm) 8%, var(--wb-bg-2));
}
.wb-profile-struct-m {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
}
.wb-profile-struct-eq {
  font-family: var(--rd-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--wb-ink);
}
.wb-profile-struct-r {
  font-family: var(--rd-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--wb-ink-3);
}
.wb-profile-struct--clean .wb-profile-struct-r {
  color: var(--wb-warm);
  font-weight: 500;
}
.wb-profile-struct-g {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 11px;
  color: var(--wb-ink-2);
  text-align: right;
}

/* Chapter te'amim summary cells — system + top ending-marks. */
.wb-profile-tamim-summary {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wb-profile-tamim-cell {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--wb-rule);
  border-radius: 12px;
  background: var(--wb-bg-2);
}
/* Convergence-pill status modifiers — `--hit` warms (this verse
   actually clears the bar), `--noise` dims (the trigger fired
   but signal didn't make it). `--total` is the rolled-up count.
   Status names come from `:convergence/finding.status` and any
   future status keyword auto-renders as a default cell.
*/
.wb-profile-tamim-cell--hit {
  border-color: var(--wb-warm);
  color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 12%, var(--wb-bg-2));
}
.wb-profile-tamim-cell--hit .wb-profile-tamim-l {
  color: var(--wb-warm);
}
.wb-profile-tamim-cell--noise {
  opacity: 0.65;
}
.wb-profile-tamim-cell--total {
  border-style: solid;
  font-weight: 600;
}
.wb-profile-tamim-l {
  font-family: var(--rd-mono);
  font-size: 9.5px;
  color: var(--wb-ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wb-profile-tamim-n {
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--wb-warm);
  font-variant-numeric: tabular-nums;
}

/* Lemma pronunciation — Strong's phonetic notation as a small,
   dim mono caption under the gloss. */
.wb-profile-pronounce {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Profile error state — appears when a feature load resolves to
   an error (404, 500). Surfaces the missing entity + a hint. */
.wb-profile-error {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px;
  border: 1px dashed var(--wb-rule);
  border-radius: 4px;
  background: color-mix(in srgb, var(--wb-warm) 4%, transparent);
  margin: 16px 24px;
}
.wb-profile-error-h {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--wb-ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wb-profile-error-q {
  font-family: var(--font-hebrew);
  font-size: 28px;
  color: var(--wb-warm);
  direction: rtl;
}
.wb-profile-error-msg {
  font-size: 12px;
  color: var(--wb-ink-2);
  font-style: italic;
}
.wb-profile-error-retry {
  align-self: flex-start;
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  border: 1px solid var(--wb-rule);
  border-radius: 12px;
  font-family: var(--rd-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--wb-warm);
  cursor: pointer;
  background: var(--wb-bg-2);
}
.wb-profile-error-retry:hover {
  background: color-mix(in srgb, var(--wb-warm) 12%, var(--wb-bg-2));
  border-color: color-mix(in srgb, var(--wb-warm) 50%, var(--wb-rule));
}

/* Stay-on-current-until-next-ready blend for word-profile advance.
   The body keeps rendering the previous word's profile-frame while
   the next word's data is inflight. `.wb-profile-fade--stale` dims
   during that window; the transition on `.wb-profile-fade` restores
   opacity when the current word's data lands. Blocks the flash of
   the loading placeholder between two cached views. */
.wb-profile-fade {
  transition: opacity 220ms ease-out;
  opacity: 1;
  /* Flex passthrough (Scott, 2026-07-30): this wrapper sits
     between .wb-profile (flex column, viewport-bounded) and
     .pf-frame (flex: 1 1 auto) — without it the frame never gets
     a bounded height, the word profile scrolls as one document,
     and the mobile sidebar rides the page bottom instead of
     pinning like the reader's and verse profile's. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wb-profile-fade--stale {
  opacity: 0.55;
}

/* Profile loading state — shows while a load is in flight and
   nothing's cached yet. Subtle pulse so the user knows the
   request is alive. */
.wb-profile-loading {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 24px;
  margin: 16px 0;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  letter-spacing: 0.06em;
  font-style: italic;
  animation: wb-profile-loading-pulse 1.6s ease-in-out infinite;
}
@keyframes wb-profile-loading-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* Form-facts row on word profile — chips naming each class
   membership with its size. Click → scrolls to that inline
   peer-list section. */
.wb-profile-form-facts {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wb-profile-form-fact {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--wb-rule);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--rd-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  background: var(--wb-bg-2);
}
.wb-profile-form-fact:hover {
  background: color-mix(in srgb, var(--wb-warm) 10%, var(--wb-bg-2));
  border-color: color-mix(in srgb, var(--wb-warm) 40%, var(--wb-rule));
}
.wb-profile-form-fact-l {
  color: var(--wb-ink-3);
}
.wb-profile-form-fact-n {
  color: var(--wb-warm);
  font-variant-numeric: tabular-nums;
}

/* PEERS — tabbed table widget (replaces the four stacked
   peer-list-section calls).  Three tabs over a single scroll pane
   with columns: form · frequency · gloss · first-occurrence. */
.wb-peers {
  display: flex; flex-direction: column;
  margin-top: 4px;
}
.wb-peers-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--wb-rule);
  margin-bottom: 0;
}
.wb-peers-tab {
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 12px 6px 12px;
  font-family: var(--rd-mono);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wb-ink-3);
  cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.wb-peers-tab:hover { color: var(--wb-ink); }
.wb-peers-tab--on {
  color: var(--wb-warm);
  border-bottom-color: var(--wb-warm);
}
.wb-peers-tab-l { font-weight: 500; }
.wb-peers-tab-n {
  color: var(--wb-ink-4);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.wb-peers-tab--on .wb-peers-tab-n { color: var(--wb-warm); opacity: 0.8; }

.wb-peers-scroll {
  max-height: 320px;
  overflow-y: auto;
  background: var(--wb-bg-2);
  border: 1px solid var(--wb-rule);
  border-top: 0;
}
.wb-peers-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.wb-peers-table thead {
  position: sticky; top: 0;
  background: var(--wb-bg-3);
  z-index: 1;
}
.wb-peers-table th {
  text-align: left;
  font-family: var(--rd-mono);
  font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wb-ink-4);
  padding: 6px 8px;
  border-bottom: 1px solid var(--wb-rule);
}
.wb-peers-th--form  { width: 22%; }
.wb-peers-th--freq  { width: 8%; text-align: right; }
.wb-peers-th--gloss { width: 50%; }
.wb-peers-th--ref   { width: 20%; }
.wb-peers-row {
  cursor: pointer;
  border-bottom: 1px solid rgba(74, 63, 46, 0.4);
}
.wb-peers-row:hover { background: var(--wb-bg-3); }
.wb-peers-table td {
  padding: 5px 8px;
  vertical-align: baseline;
}
.wb-peers-td--form {
  font-family: var(--font-hebrew);
  font-size: 16px;
  color: var(--wb-ink);
  white-space: nowrap;
}
.wb-peers-td--freq {
  text-align: right;
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  color: var(--wb-cyan);
  font-size: 11px;
}
.wb-peers-td--gloss {
  color: var(--wb-ink-2);
  font-style: italic;
  font-size: 11px;
  overflow: hidden;
}
.wb-peers-td--ref {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  white-space: nowrap;
}
.wb-peers-more {
  padding: 6px 10px;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-4);
  text-align: center;
  border-top: 1px dashed var(--wb-rule);
}

/* ── INSTANCES band — faceted explorer (designer v2, mockup 16) ──
   Distribution on top · two-column body (list + frequency-sorted
   facet rail) · pager at foot. Tier colors: canonical = warm gold,
   book-prime = cyan, tier-2 = mint. */

.wb-inst-pending,
.wb-inst-empty {
  padding: 12px 0;
  color: var(--wb-ink-4);
  font-family: var(--rd-mono);
  font-size: 11px; font-style: italic;
}

/* Tier color stops (shared by histogram bars, legend swatches) */
.wb-inst-tier--canonical  { background: var(--wb-warm, #c9a96e); }
.wb-inst-tier--book-prime { background: var(--wb-cyan); }
.wb-inst-tier--tier-2     { background: var(--wb-mint); }
.wb-inst-tier--unnamed    { background: var(--wb-ink-4); }

/* ── Distribution ────────────────────────────────────────── */
.wb-inst-dist {
  margin: 8px 0 12px 0;
  padding: 10px 12px;
  background: var(--wb-bg);
  border: 1px solid var(--wb-rule);
}
.wb-inst-dist-h {
  font-family: var(--rd-mono);
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--wb-ink-3);
  margin-bottom: 8px;
}
.wb-inst-dist-sub {
  color: var(--wb-ink-4);
  font-style: italic; letter-spacing: 0;
  margin-left: 8px;
}
.wb-inst-dist-bars {
  display: flex; gap: 2px; align-items: flex-end;
  height: 150px;
}
.wb-inst-dbar-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  height: 100%;
  justify-content: flex-end;
}
/* The track is the flexible region above the fixed-height label
   foot; the bar's height % is of the track, so all bars share an
   honest baseline regardless of label length. */
.wb-inst-dbar-track {
  flex: 1 1 auto;
  width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0;
}
.wb-inst-dbar {
  width: 100%;
  border-radius: 1px 1px 0 0;
  min-height: 2px;
  transition: opacity 80ms ease;
}
.wb-inst-dbar-col:hover .wb-inst-dbar { opacity: 0.82; }
.wb-inst-dbar-col--sel .wb-inst-dbar {
  outline: 1px solid var(--wb-ink);
  outline-offset: -1px;
}
.wb-inst-dbar-col--sel { background: rgba(201, 169, 110, 0.08); }
/* Skip label rotated to read bottom-up — frees horizontal room so
   +1373 / -4423 don't collide across ~56 bars. */
.wb-inst-dbar-s {
  font-family: var(--rd-mono);
  font-size: 8px; color: var(--wb-ink-3);
  font-variant-numeric: tabular-nums;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  /* Fixed-height foot so every bar shares the same baseline
     regardless of label length (+2 vs +4423). */
  height: 34px;
  flex: 0 0 34px;
  overflow: visible;
}
.wb-inst-dbar-col--sel .wb-inst-dbar-s { color: var(--wb-ink); }
.wb-inst-dbar-k {
  font-family: var(--rd-mono);
  font-size: 7px; color: var(--wb-ink-4);
  flex: 0 0 auto;
}
/* Selected-skip caption — names the clicked bar under the histogram. */
.wb-inst-dist-caption {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
  padding: 5px 8px;
  background: rgba(201, 169, 110, 0.06);
  border-left: 2px solid var(--wb-warm);
  font-family: var(--rd-mono);
  font-size: 11px;
}
.wb-inst-cap-skip { font-size: 12px; font-variant-numeric: tabular-nums; }
.wb-inst-cap-skip.wb-inst-skip--surface { color: var(--wb-mint); }
.wb-inst-cap-skip.wb-inst-skip--fwd     { color: var(--wb-warm); }
.wb-inst-cap-skip.wb-inst-skip--rev     { color: var(--wb-cyan); }
.wb-inst-cap-label  { color: var(--wb-ink); font-style: italic; }
.wb-inst-cap-unnamed { color: var(--wb-ink-4); font-style: italic; }
.wb-inst-cap-tier {
  font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 2px;
  color: var(--wb-bg);
}
.wb-inst-cap-tier.wb-inst-tier--canonical  { background: var(--wb-warm, #c9a96e); }
.wb-inst-cap-tier.wb-inst-tier--book-prime { background: var(--wb-cyan); }
.wb-inst-cap-tier.wb-inst-tier--tier-2     { background: var(--wb-mint); }
.wb-inst-cap-tier.wb-inst-tier--unnamed    { background: var(--wb-ink-4); }
.wb-inst-cap-n { margin-left: auto; color: var(--wb-ink-3); font-variant-numeric: tabular-nums; }

.wb-inst-dist-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 10px;
}
.wb-inst-dl {
  font-family: var(--rd-mono);
  font-size: 9px; color: var(--wb-ink-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.wb-inst-dl-sw {
  width: 9px; height: 9px; border-radius: 2px;
  display: inline-block;
}
.wb-inst-dl-n { color: var(--wb-ink-4); }

/* ── Two-column body ─────────────────────────────────────── */
.wb-inst-body {
  display: grid;
  grid-template-columns: 1fr 264px;
  gap: 0;
  height: 520px;
  border: 1px solid var(--wb-rule);
  overflow: hidden;
}
.wb-inst-list {
  overflow-y: auto;
  display: flex; flex-direction: column;
  /* Let the 1fr grid track shrink so long verse lines wrap inside
     it instead of expanding the track off-page. */
  min-width: 0;
}

/* ── ELS rows (host-word cells) ──────────────────────────── */
.wb-inst-row {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--wb-rule);
  cursor: pointer;
  align-items: center;
}
.wb-inst-row:hover { background: var(--wb-bg-3); }
.wb-inst-row-meta {
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--rd-mono);
}
.wb-inst-row-ref  { font-size: 11px; color: var(--wb-ink); white-space: nowrap; }
.wb-inst-row-book { font-size: 8px; color: var(--wb-ink-4); letter-spacing: 0.15em; text-transform: uppercase; }
.wb-inst-row-skipline {
  display: flex; align-items: baseline; gap: 5px;
  flex-wrap: nowrap; white-space: nowrap;
  margin-top: 1px;
  font-family: var(--rd-mono);
  font-size: 9px;
}
/* The skip's catalogue gloss in the row — its own line under the
   skip · pos line, truncated to the meta column so it never pushes
   pos onto a new line. */
.wb-inst-row-skipgloss {
  display: block; max-width: 116px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--rd-mono);
  font-size: 9px; font-style: italic; color: var(--wb-ink-4);
  margin-top: 1px;
}
.wb-inst-skip-lbl { color: var(--wb-ink-4); }
.wb-inst-skip-v { font-size: 10px; font-variant-numeric: tabular-nums; }
.wb-inst-skip--surface { color: var(--wb-mint); }
.wb-inst-skip--fwd     { color: var(--wb-warm); }
.wb-inst-skip--rev     { color: var(--wb-cyan); }
/* The catalogue gloss for the skip — what the number means. */
.wb-inst-skip-gloss {
  color: var(--wb-ink-3); font-style: italic;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-inst-pos { color: var(--wb-ink-4); }

/* Host words — no boxes. The highlighted letter + the gloss are the
   signal; the words just flow with a little breathing room. */
.wb-inst-row-cells {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  justify-content: flex-start; align-items: flex-start;
}
.wb-inst-host {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 3px;
  max-width: 170px;
}
/* A host word that knows its own verse is its own target — hovering
   names the verse, clicking opens it landed on this word. Kept as a
   hover-only lift so the resting row stays a clean band of words. */
.wb-inst-host--go {
  cursor: pointer;
  border-radius: 2px;
  padding: 1px 3px;
  margin: -1px -3px;
}
.wb-inst-host--go:hover {
  background: color-mix(in srgb, var(--wb-warm) 9%, transparent);
}
.wb-inst-host--go:hover .wb-inst-cell-hbr,
.wb-inst-host--go:hover .wb-inst-cell-en { color: var(--wb-warm); }
.wb-inst-cell-hbr {
  font-family: var(--font-hebrew);
  font-size: 18px; color: var(--wb-ink-2); line-height: 1.2;
}
.wb-inst-cell-hit-letter {
  color: var(--wb-warm);
  font-weight: 700;
}
/* The gloss is the info we're after — sits directly under its word,
   centered, LTR, brighter than the Hebrew so it carries. */
.wb-inst-cell-en {
  font-family: var(--rd-mono);
  font-size: 10px; color: var(--wb-ink-2);
  direction: ltr; text-align: center; line-height: 1.25;
  font-style: italic;
}
/* Host groups — consecutive words landing in the SAME verse are one
   unit: the words side by side, and beneath them a single tight
   address that spans exactly their width. The address is the verse's
   chapter:verse only; the row header above carries the book. Words
   SELECT, the address OPENS — two acts, two affordances. */
.wb-inst-hostgroup {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.wb-inst-hostgroup-words {
  display: inline-flex; align-items: flex-start;
  gap: 4px 14px;
}
.wb-inst-hostgroup-ref {
  align-self: stretch;          /* span the group, not the widest word */
  text-align: center;
  font-family: var(--rd-mono);
  font-size: 9px; line-height: 1.1;
  color: var(--wb-ink-4);
  direction: ltr;
  cursor: pointer;
  padding-top: 1px;
  border-top: 1px solid var(--wb-rule);
  transition: color 0.1s, border-color 0.1s;
}
.wb-inst-hostgroup-ref:hover,
.wb-inst-hostgroup-ref:focus-visible {
  color: var(--wb-warm);
  border-top-color: var(--wb-warm);
}

.wb-inst-row-host-missing {
  font-family: var(--rd-mono);
  font-size: 10px; color: var(--wb-ink-4); font-style: italic;
}

/* ── Surface rows ────────────────────────────────────────── */
.wb-inst-srow {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wb-rule);
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer;
}
.wb-inst-srow:hover { background: var(--wb-bg-3); }
.wb-inst-srow-meta {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--rd-mono);
}
.wb-inst-srow-hbr {
  font-family: var(--font-hebrew);
  font-size: 20px; color: var(--wb-ink); line-height: 1.35;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: flex-start;
}
/* The embedded interlinear takes the whole row, so its own RTL flow
   starts at the RIGHT edge. As a shrink-to-fit flex item it sat at the
   (LTR) container's start — a short verse rendered hard LEFT while a
   long one, wrapping to full width, only looked right (Scott,
   2026-09-18: Hab 3:12 vs Lam 2:6). */
.wb-inst-srow-hbr > .rd-embed-il { flex: 1 1 100%; }
/* One verse token: the form with its our-rendering gloss stacked
   beneath — the same shape as the ELS host cells. */
.wb-inst-stok {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 2px;
  max-width: 170px;
}
.wb-inst-tok { color: var(--wb-ink-2); }
.wb-inst-hit {
  background: rgba(201, 169, 110, 0.18);
  color: var(--wb-warm);
  padding: 0 3px; border-radius: 2px;
}
.wb-inst-row-context-missing {
  font-family: var(--rd-mono);
  font-size: 11px; color: var(--wb-ink-4); font-style: italic;
}
.wb-inst-srow-en {
  font-size: 11px; color: var(--wb-ink-3); line-height: 1.5;
  font-style: italic;
}
.wb-inst-gloss-hit {
  color: var(--wb-warm); font-weight: 600;
  background: rgba(201, 169, 110, 0.12);
  padding: 0 3px; border-radius: 2px;
  font-style: normal;
}

/* ── Facet rail (the fix: frequency-sorted vertical lists) ── */
.wb-inst-rail {
  border-left: 1px solid var(--wb-rule);
  background: var(--wb-bg-3);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wb-inst-rail-fixed {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wb-rule);
  display: flex; flex-direction: column; gap: 8px;
}
.wb-inst-facet-toggle {
  display: flex; align-items: center; gap: 8px;
}
.wb-inst-ft-label {
  font-family: var(--rd-mono);
  font-size: 8px; color: var(--wb-ink-3); letter-spacing: 0.15em;
  width: 30px; flex: 0 0 auto;
}
.wb-inst-ft-opts { display: flex; gap: 4px; flex-wrap: wrap; }
.wb-inst-chip {
  font-family: var(--rd-mono);
  font-size: 9px; padding: 2px 7px;
  border: 1px solid var(--wb-rule); border-radius: 2px;
  color: var(--wb-ink-3); cursor: pointer;
}
.wb-inst-chip:hover { color: var(--wb-ink); }
.wb-inst-chip b { color: var(--wb-ink-2); margin-left: 3px; font-weight: 600; }
.wb-inst-chip--on {
  background: var(--wb-warm); color: var(--wb-bg); border-color: var(--wb-warm);
}
.wb-inst-chip--on b { color: var(--wb-bg); }

.wb-inst-rail-scroll { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.wb-inst-facet-group { padding: 10px 12px 4px; }
.wb-inst-fg-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
  font-family: var(--rd-mono);
}
.wb-inst-fg-h { font-size: 9px; color: var(--wb-warm); letter-spacing: 0.18em; }
.wb-inst-fg-meta { font-size: 8px; color: var(--wb-ink-4); }
.wb-inst-fg-clear {
  margin-left: auto; font-size: 8px; color: var(--wb-ink-3);
  border: 1px solid var(--wb-rule); border-radius: 2px;
  padding: 1px 6px; cursor: pointer;
}
.wb-inst-fg-clear:hover { color: var(--wb-warm); border-color: var(--wb-warm); }
.wb-inst-fg-rows { display: flex; flex-direction: column; gap: 1px; }
.wb-inst-fr {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 2px;
  font-family: var(--rd-mono);
  font-size: 10px; overflow: hidden; cursor: pointer;
}
.wb-inst-fr:hover { background: rgba(255,255,255,0.02); }
.wb-inst-fr-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(201, 169, 110, 0.10);
  border-radius: 2px;
}
.wb-inst-fr-bar--skip { background: rgba(121, 181, 140, 0.12); }
.wb-inst-fr-name {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--wb-ink-2);
}
.wb-inst-fr-name--num { color: var(--wb-mint); flex: 0 0 auto; }
/* the number never yields to its catalogue name (Scott, 2026-10-08: the skip
   rail showed "±…" with the value cut away) — only the gloss truncates */
/* Catalogue gloss in the skip rail — fills the middle, truncates. */
.wb-inst-fr-gloss {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--wb-ink-4); font-style: italic; font-size: 9px;
}
.wb-inst-fr-c { position: relative; z-index: 1; margin-left: auto; color: var(--wb-ink-3); font-variant-numeric: tabular-nums; }
.wb-inst-fr--on {
  background: rgba(201, 169, 110, 0.08);
  box-shadow: inset 2px 0 0 0 var(--wb-warm);
}
.wb-inst-fr--on .wb-inst-fr-name { color: var(--wb-warm); }

.wb-inst-rail-foot {
  padding: 8px 12px; border-top: 1px solid var(--wb-rule);
  font-family: var(--rd-mono);
  font-size: 9px; color: var(--wb-ink-4); letter-spacing: 0.1em;
  cursor: pointer;
}
.wb-inst-rail-foot--active { color: var(--wb-warm); }
.wb-inst-rail-foot:hover { color: var(--wb-warm); }

/* ── Pager ───────────────────────────────────────────────── */
.wb-inst-pager {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
  font-family: var(--rd-mono);
  font-size: 10px; color: var(--wb-ink-3);
}
.wb-inst-page-btn {
  padding: 2px 10px; border: 1px solid var(--wb-rule); border-radius: 2px;
  cursor: pointer;
}
.wb-inst-page-btn--on { background: var(--wb-warm); color: var(--wb-bg); border-color: var(--wb-warm); }
.wb-inst-page-btn--off { opacity: 0.4; cursor: not-allowed; }
.wb-inst-page-n { color: var(--wb-ink-2); font-variant-numeric: tabular-nums; }
.wb-inst-pager-spacer { flex: 1; }
.wb-inst-pager-hint { color: var(--wb-ink-4); font-size: 9px; }

/* CHOSHEN — reserved gate REMOVED 2026-08-20 ("the gate is coming down") */
/* ── CHOSHEN band ─────────────────────────────────────────────────── */
.wb-orc-pending {
  padding: 16px 0; color: var(--wb-ink-4);
  font-family: var(--rd-mono);
  font-size: 11px; font-style: italic;
}
.wb-orc-metarow {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 10px; font-family: var(--rd-mono);
  font-size: 11px; color: var(--wb-ink-3);
}
.wb-orc-metarow b { color: var(--wb-ink); font-weight: 500; }
.wb-orc-dot { color: var(--wb-ink-4); }
.wb-orc-verdict {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px; font-size: 12.5px; color: var(--wb-ink-2);
}
.wb-orc-tick { color: var(--wb-warm); }

.wb-orc-stage {
  display: grid; grid-template-columns: 1fr 280px; gap: 28px;
  align-items: start;
}
.wb-orc-plate-wrap { position: relative; padding: 42px 46px; }

.wb-orc-seat {
  position: absolute; display: flex; align-items: center; gap: 6px;
  font-family: var(--rd-mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wb-ink-4); white-space: nowrap;
}
.wb-orc-seat-glyph { font-family: var(--font-hebrew); font-size: 12px; }
.wb-orc-seat--god   { top: 10px;    left: 50%; transform: translateX(-50%); }
.wb-orc-seat--aaron { bottom: 10px; left: 50%; transform: translateX(-50%); }
.wb-orc-seat--mercy { left: 2px;  top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.wb-orc-seat--truth { right: 2px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.wb-orc-seat--on, .wb-orc-seat--on .wb-orc-seat-nm { color: var(--wb-warm); }

.wb-orc-plate {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  direction: rtl; padding: 14px;
  background: var(--wb-bg-2); border: 1px solid var(--wb-rule); border-radius: 6px;
}
.wb-orc-stone {
  border: 1px solid var(--st, var(--wb-rule)); border-radius: 4px;
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--st, var(--wb-rule)) 12%, var(--wb-bg-3)),
              var(--wb-bg-3));
  padding: 8px 8px 9px; min-height: 72px;
  display: flex; flex-direction: column; gap: 6px; direction: ltr;
}
.wb-orc-stone-head { display: flex; align-items: baseline; justify-content: space-between; }
.wb-orc-stone-tribe {
  font-family: var(--rd-mono);
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in oklab, var(--st, var(--wb-ink-3)) 55%, var(--wb-ink-3));
}
.wb-orc-stone-gem {
  font-family: var(--rd-mono);
  font-size: 8px; font-style: italic; color: var(--wb-ink-4);
}
.wb-orc-stone-letters {
  direction: rtl; display: flex; gap: 2px;
  justify-content: center; align-items: center; flex: 1;
}
.wb-orc-glyph {
  position: relative;
  font-family: var(--font-hebrew); font-size: 21px;
  line-height: 1; color: var(--wb-ink-3); padding: 2px 3px;
}
.wb-orc-glyph--lit {
  color: var(--wb-warm);
  text-shadow: 0 0 13px rgba(201,169,110,0.7), 0 0 4px rgba(201,169,110,0.85);
}
.wb-orc-ord {
  position: absolute; top: -7px; right: -6px;
  font-family: var(--rd-mono); font-size: 8px;
  color: var(--wb-bg); background: var(--wb-warm);
  width: 13px; height: 13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.wb-orc-rail { display: flex; flex-direction: column; gap: 1px; }
.wb-orc-rail-h {
  font-family: var(--rd-mono);
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wb-ink-3); margin-bottom: 10px;
}
.wb-orc-reader {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center;
  gap: 10px; padding: 9px 10px; border-radius: 5px; border: 1px solid transparent;
}
.wb-orc-reader--on { background: var(--wb-bg-3); border-color: var(--wb-rule); }
.wb-orc-reader-key {
  font-family: var(--font-hebrew); font-size: 18px;
  text-align: center; color: var(--wb-ink-3);
}
.wb-orc-reader--on .wb-orc-reader-key { color: var(--wb-warm); }
.wb-orc-reader-nm   { font-size: 12px; color: var(--wb-ink); }
.wb-orc-reader-role { font-size: 9px; color: var(--wb-ink-3); margin-top: 1px;
                      font-family: var(--rd-mono); }
.wb-orc-reader-ct   { text-align: right; font-family: var(--rd-mono); }
.wb-orc-reader-n    { font-size: 14px; color: var(--wb-ink-3); font-variant-numeric: tabular-nums; }
.wb-orc-reader--reads .wb-orc-reader-n { color: var(--wb-ink); }
.wb-orc-reader--on    .wb-orc-reader-n { color: var(--wb-warm); }
.wb-orc-reader-lbl  { font-size: 8px; color: var(--wb-ink-4);
                      letter-spacing: 0.08em; text-transform: uppercase; }
.wb-orc-rail-note {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--wb-rule);
  font-family: var(--rd-mono);
  font-size: 10px; line-height: 1.6; color: var(--wb-ink-3);
}
.wb-orc-nm { color: var(--wb-warm); font-family: var(--font-hebrew); font-size: 14px; }
.wb-orc-eq { color: var(--wb-ink-2); }
.wb-orc-rail-sub { margin-top: 5px; color: var(--wb-ink-4); }

.wb-orc-band { padding: 18px 0 2px; border-top: 1px solid var(--wb-rule); margin-top: 20px; }
.wb-orc-band-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.wb-orc-band-t {
  font-family: var(--rd-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wb-warm);
}
.wb-orc-band-s { font-size: 10px; color: var(--wb-ink-3); font-style: italic; }
.wb-orc-pi-row, .wb-orc-if-row {
  display: grid; grid-template-columns: 78px 1fr; gap: 12px;
  align-items: center; padding: 6px 0;
}
.wb-orc-pi-key { display: flex; align-items: baseline; gap: 6px; }
.wb-orc-pi-k  { font-family: var(--font-hebrew); font-size: 15px; }
.wb-orc-pi-nm {
  font-family: var(--rd-mono);
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-ink-4);
}
.wb-orc-pi-path { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wb-orc-step-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--st, var(--wb-rule)); border-radius: 4px; padding: 3px 8px;
  background: color-mix(in oklab, var(--st, var(--wb-rule)) 10%, var(--wb-bg-2));
}
.wb-orc-sg { font-family: var(--font-hebrew); font-size: 16px;
             color: var(--wb-warm); text-shadow: 0 0 9px rgba(201,169,110,0.4); }
.wb-orc-st-tribe {
  font-family: var(--rd-mono);
  font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wb-ink-3);
}
.wb-orc-pi-more { font-family: var(--rd-mono); font-size: 10px; color: var(--wb-ink-4); }
.wb-orc-pi-dark { font-size: 11px; color: var(--wb-ink-4); font-style: italic; }
.wb-orc-if-words { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-orc-word-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--wb-rule); border-radius: 5px; padding: 4px 10px; background: var(--wb-bg-2);
}
.wb-orc-wh { font-family: var(--font-hebrew); font-size: 18px; color: var(--wb-ink); }
.wb-orc-wn { font-family: var(--rd-mono); font-size: 9px;
             color: var(--wb-warm); font-variant-numeric: tabular-nums; }
.wb-orc-wg { font-size: 10px; color: var(--wb-ink-3); font-style: italic;
             max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lemmatize cascade — surfaced on word profile when the source form
   has no precomputed cipher reading (refused or skipped). One row
   per cascade step: op label · Hebrew letters · length · reader
   chips · summary. The preferred step (first readable, nearest the
   source) carries a subtle warm-accent left border so the reader
   sees at a glance which derivation actually reads. Dropped rows
   (letters duplicate an earlier step) are dimmed + italic. */
.wb-cascade {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.wb-cascade-row {
  display: grid;
  grid-template-columns: 7em 6em 3em auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 4px 8px;
  border-left: 2px solid transparent;
  border-radius: 2px;
}
.wb-cascade-row--preferred {
  border-left-color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 6%, transparent);
}
.wb-cascade-row--dropped {
  opacity: 0.55;
  font-style: italic;
}
.wb-cascade-op {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}
.wb-cascade-letters {
  font-family: var(--font-hebrew);
  font-size: 17px;
  color: var(--wb-warm);
  line-height: 1.2;
}
.wb-cascade-len {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  font-variant-numeric: tabular-nums;
}
.wb-cascade-readers {
  display: inline-flex; gap: 4px; align-items: center;
}
.wb-cascade-summary {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--wb-ink-3);
  font-variant-numeric: tabular-nums;
}
.wb-cascade-note {
  margin-top: 6px;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  font-style: italic;
}
/* end CHOSHEN block */


/* ── Word profile v3 head (designer redesign) ────────────────
   Tight top-of-profile: hero + warm divider + gematria callout +
   meta row. Sits above the existing v2 hero. As v3 replacements
   for downstream sections land, the equivalent v2 pieces retire.

   All measurements are for phone-width readability first (390px);
   scales up cleanly on wider viewports. */
.wb-profile-head-v3 {
  padding: 4px 22px 14px;
  border-bottom: 1px solid var(--rd-rule);
  margin-bottom: 20px;
}

/* Hero — Hebrew word large, translit italic below, gloss + chip
   on one line. Center-aligned to match the mockup. */
.wb-profile-hero-v3 {
  text-align: center;
  padding: 0 0 10px;
}
/* v3 hero uses the shared `hero-body` component, which returns
   a `.wb-profile-hb` root — same grain-aware span rendering as
   v2, just resized to the v3 scale. Warm color, smaller than
   v2's 76px, matching the designer's tightened mockup. */
.wb-profile-hero-v3 .wb-profile-hb {
  font-family: var(--font-hebrew);
  font-size: 40px;
  line-height: 1.15;
  color: var(--wb-warm);
  letter-spacing: 0.01em;
  padding: 0 0 2px;
  text-align: center;
  direction: rtl;
}
.wb-profile-hero-v3-translit {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12px;
  font-style: italic;
  color: var(--rd-ink-3);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
/* Translit row — up to two cells separated by mid-dot. Each cell
   keeps its own tooltip naming the style (academic / canonical),
   so hovering distinguishes them even when the strings look
   similar. */
.wb-profile-hero-v3-translits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  margin-top: 3px;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12px;
  font-style: italic;
  color: var(--rd-ink-3);
  letter-spacing: 0.04em;
}
.wb-profile-hero-v3-translit-cell + .wb-profile-hero-v3-translit-cell::before {
  content: "·";
  margin: 0 8px;
  color: var(--rd-ink-4);
  font-style: normal;
}
.wb-profile-hero-v3-gloss-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--rd-ink-2);
  font-size: 13px;
}
.wb-profile-hero-v3-gloss {
  color: var(--rd-ink-2);
}

/* Divider — very quiet warm-soft rule between the hero and the
   compact meta stack. Full-width but faint. */
.wb-profile-head-v3-divider {
  border-top: 1px solid var(--rd-warm-soft);
  opacity: 0.35;
  margin: 4px 0 10px;
}

/* Gematria callout — label on left (glyph + small caps), value on
   right (bright number + dim factorization). */
.wb-profile-head-v3-callout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0 8px;
}
.wb-profile-head-v3-callout-l {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.wb-profile-head-v3-glyph {
  color: var(--rd-warm);
  font-size: 10px;
}
.wb-profile-head-v3-label {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-ink-3);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.wb-profile-head-v3-callout-r {
  font-family: var(--rd-mono);
  font-size: 13px;
}
.wb-profile-head-v3-value {
  color: var(--rd-warm);
  font-weight: 500;
}
.wb-profile-head-v3-value-dim {
  color: var(--rd-ink-3);
  font-size: 12px;
}

/* Meta row — gv · morph · letters · canon. Small monospace, mixed
   ink-3 (labels) and ink (values); flex-wraps at the phone width. */
.wb-profile-head-v3-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-ink-3);
  padding: 2px 0 0;
}
.wb-profile-meta-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.wb-profile-meta-cell[role="button"] {
  cursor: pointer;
}
.wb-profile-meta-cell[role="button"]:hover .wb-profile-meta-v {
  color: var(--rd-hot);
}
.wb-profile-meta-l {
  color: var(--rd-ink-3);
  letter-spacing: 0.03em;
}
.wb-profile-meta-v {
  color: var(--rd-ink);
}
.wb-profile-meta-v--mid {
  color: var(--rd-ink-2);
}

/* Parked block — temporary home for a v3 head piece while the
   top gets rearranged. Gives it a little breathing room from the
   preceding band. */
.wb-profile-parked {
  padding: 20px 22px;
  margin-top: 12px;
  opacity: 0.9;
}

/* ── FORMS & INSTANCES combined table ─────────────────────────
   Structure-only shell; content lands per-tab in follow-ups.
   Six tabs (FACTORS, INSTANCES, SAME GV, LEMMA, ANAGRAM, ROOT)
   collapse what was ~four stacked sections into one tabbed
   viewport. Styles match the `.wt-*` mockup at
   `mockups/wf/approaches/22-word-table.jsx` — bordered outer
   frame, bg-3 title bar, vertical rules between tabs, warm inset
   underline on the active tab. */
.wb-fi {
  --wb-fi-frame-height: 740px;
  height: var(--wb-fi-frame-height);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rd-rule);
  background: var(--rd-bg-2);
  margin: 12px 0 20px;
  overflow: hidden;
}

/* Heading row — small caps H (warm) + italic subtitle. Sits on
   the slightly lighter bg-3 shelf, ruled off from the tabs
   below. Subtitle hides at phone width to keep the pane
   readable. */
.wb-fi-heading {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: var(--rd-bg-3);
  border-bottom: 1px solid var(--rd-rule);
  font-family: var(--rd-mono);
}
.wb-fi-heading-h {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--rd-warm);
}
.wb-fi-heading-sub {
  font-size: 10px;
  color: var(--rd-ink-3);
  font-style: italic;
}
@media (max-width: 560px) {
  .wb-fi-heading-sub { display: none; }
}

/* Tab strip — flex row of vertically-ruled pills. Position:
   relative to anchor the `▾` overflow-menu popover below. */
.wb-fi-tabs {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rd-rule);
  /* Query container so the narrow-width collapse below keys on the
     strip's OWN width, not the viewport — otherwise a narrow panel
     on a wide screen never collapses and the pills overflow past the
     panel edge (the last tab "sticks out"). Scoped to the strip so
     the FI body's popovers/tooltips are unaffected. inline-size
     containment doesn't paint-clip, so the dropdown still shows. */
  container-type: inline-size;
}

/* Inner strip — holds the pills and takes the overflow, exactly as
   `.wb-tabbar-tabs` does for the workbench tab bar. The pills never
   wrap and never shrink; when they outrun the panel the strip clips
   them and the `▾` dropdown (which lists every tab, always) is how
   you reach the rest. `min-width: 0` lets flex shrink it below the
   pills' intrinsic width; `flex: 0 1 auto` keeps the strip hugging
   its content when everything fits, so the chevron sits at the
   panel's right edge either way. Overflow is `auto` rather than
   `hidden` so a clipped strip can still be scrolled to — the
   dropdown stays the primary affordance. */
.wb-fi-tabs-strip {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  /* No scrollbar furniture — it would sit inside the ruled band. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wb-fi-tabs-strip::-webkit-scrollbar { display: none; }

/* Chevron — rightmost item in the strip, OUTSIDE the scrolling
   pills so it is always visible. Opens a vertical dropdown listing
   every tab. Same visual language as the workbench tab-bar's
   overflow chevron. At narrow widths the inline tabs collapse to
   just the active one; the chevron becomes the primary way to
   switch. */
.wb-fi-tabs-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 7px 14px;
  border-left: 1px solid var(--rd-rule);
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.wb-fi-tabs-more:hover { color: var(--rd-warm); }
.wb-fi-tabs-more--on {
  color: var(--rd-warm);
  background: var(--rd-bg);
}

/* Dropdown popover — anchored to `.wb-fi-tabs` (position:
   relative). Right-aligned so it hugs the chevron. */
.wb-fi-tab-menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  min-width: 200px;
  z-index: 10;
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  font-family: var(--rd-mono);
  font-size: 11px;
}
.wb-fi-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rd-rule);
  color: var(--rd-ink-3);
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wb-fi-menu-row:last-child { border-bottom: 0; }
.wb-fi-menu-row:hover {
  background: color-mix(in srgb, var(--rd-hot) 6%, transparent);
  color: var(--rd-ink);
}
.wb-fi-menu-row--on {
  color: var(--rd-warm);
  background: color-mix(in srgb, var(--rd-warm) 8%, transparent);
}
.wb-fi-menu-row--on .wb-fi-menu-n { color: var(--rd-warm); }
.wb-fi-menu-l { color: inherit; }
.wb-fi-menu-n {
  font-size: 10px;
  color: var(--rd-ink-4);
}

/* Narrow-width collapse — when the STRIP itself is ≤640px wide the
   inline pills hide all but the active one; the chevron becomes the
   primary affordance for switching. Keyed on the container (the
   strip), not the viewport, so a narrow reader panel on a wide
   screen collapses correctly instead of overflowing its edge. A wide
   full-profile view keeps the full strip. */
@container (max-width: 640px) {
  .wb-fi-tab:not(.wb-fi-tab--on) { display: none; }
  .wb-fi-tabs-more { margin-left: auto; }
}

.wb-fi-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rd-rule);
  cursor: pointer;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--rd-ink-3);
  white-space: nowrap;
}
.wb-fi-tab:hover {
  color: var(--rd-ink);
}
.wb-fi-tab--on {
  color: var(--rd-warm);
  background: var(--rd-bg);
  box-shadow: inset 0 -2px 0 var(--rd-warm);
}
.wb-fi-tab-l { color: inherit; text-transform: uppercase; }
.wb-fi-tab-n {
  font-size: 9px;
  color: var(--rd-ink-4);
}
.wb-fi-tab--on .wb-fi-tab-n {
  color: var(--rd-warm);
}

/* Body — min-height so the pane doesn't collapse when tab
   content is empty. Placeholder text is centered and dim. */
.wb-fi-body {
  min-height: 200px;
  padding: 20px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wb-fi-empty {
  color: var(--rd-ink-4);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  max-width: 40em;
  line-height: 1.5;
}

/* Pager row — left column will show 'X-Y of N · next →' when
   content lands; right is the keyboard-hint sidecar. Sits on
   bg-3 like the heading (bracketing the table body). Hides the
   right side at very narrow widths. */
.wb-fi-pager {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 12px;
  background: var(--rd-bg-3);
  border-top: 1px solid var(--rd-rule);
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-3);
}
.wb-fi-pager-l { flex: 1; }
.wb-fi-pager-r {
  color: var(--rd-ink-4);
  letter-spacing: 0.04em;
}
@media (max-width: 480px) {
  .wb-fi-pager-r { display: none; }
}

/* ── FI · FACTORS body ────────────────────────────────────────
   Row grid matches `mockups/wf/approaches/22-word-table.jsx` .wt-row
   (6 · 120 · 90 · 1fr · 90 · 150 · 20). GHOST subrow sits between
   the tab strip and the header row; header row uses the same grid
   with column labels. */
/* Sticky wrapper — the GHOST subrow + column-header row stay
   pinned at the top of the scrolling body as data scrolls under. */
.wb-fi-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--rd-bg);
}

.wb-fi-subrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--rd-rule);
  background: var(--rd-bg);
  font-family: var(--rd-mono);
  font-size: 10px;
}
.wb-fi-subrow-l {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wb-fi-subrow-l::-webkit-scrollbar { display: none; }

/* HOSTWORDS filter chips — judged / clustered / all. Sit inline in
   the subrow next to the section label; same mono chrome as the
   rest of the FI band. */
.wb-hw-chip {
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--rd-ink-3);
  background: transparent;
  border: 1px solid var(--rd-rule);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  cursor: pointer;
}
.wb-hw-chip:hover:not(:disabled) { color: var(--rd-ink); }
.wb-hw-chip--on {
  color: var(--rd-warm);
  border-color: var(--rd-warm);
}
.wb-hw-chip:disabled { opacity: 0.35; cursor: default; }
/* Strip the legacy band-chrome from `.wb-fac-ghosts-row` and
   `.wb-fac-numeric-row` when they render inside our subrow shell
   — the subrow already provides the background + rule; the inner
   box + left-accent + margin would stack awkwardly. */
.wb-fi-subrow-l .wb-fac-ghosts-row,
.wb-fi-subrow-l .wb-fac-numeric-row {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.wb-fi-subrow-r {
  color: var(--rd-ink-4);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.wb-fi-subrow--facets {
  background: var(--rd-bg-2);
}
.wb-fi-subrow--facets .wb-fi-subrow-l {
  white-space: nowrap;
}
.wb-fi-subrow--facets .wb-fac-ghosts-row-h:not(:first-child) {
  margin-left: 14px;
}

/* Factor chip in the SAME GV subrow — "GV 291 = 3 × 97". Same
   dim style the meta-strip uses in the v3 head. */
.wb-fi-subrow-factor {
  color: var(--rd-ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Row grid — matches the mockup exactly. Header row uses the same
   layout with lighter typography. Rows are clickable buttons when
   the candidate is an attested form. */
.wb-fi-row {
  display: grid;
  /* mark · form · GLOSS · morph · source · via · go */
  grid-template-columns: 6px 80px 1fr 90px 90px 100px 20px;
  gap: 12px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rd-rule);
  font-size: 11px;
  color: var(--rd-ink-2);
  background: transparent;
  cursor: pointer;
}
.wb-fi-row[role="button"]:hover {
  background: color-mix(in srgb, var(--rd-hot) 4%, transparent);
}
.wb-fi-row--head {
  cursor: default;
  color: var(--rd-ink-4);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--rd-bg-3);
}
.wb-fi-row--head:hover { background: var(--rd-bg-3); }
/* Header cells — FORM stays right-aligned so its label sits
   directly above the right-aligned Hebrew data cells. */
.wb-fi-row--head .wb-fi-c-form {
  font-family: var(--rd-mono);
  font-size: 9px;
  text-align: right;
  direction: ltr;
}

/* Tier mark — 6px wide colored bar on the left. Colors match the
   cluster-strength tiers used in the legacy candidate rows so the
   visual language is consistent. */
.wb-fi-c-mark {
  height: 22px;
  background: transparent;
}
.wb-fi-mark--anchor    { background: var(--rd-warm); }
.wb-fi-mark--strong    { background: var(--rd-fixed); }
.wb-fi-mark--tentative { background: var(--rd-cool); }

/* Form cell — Hebrew, right-aligned within the fixed-width slot
   so the Hebrew reads to the right and the following ASCII columns
   still align left. */
.wb-fi-c-form {
  font-family: var(--font-hebrew);
  font-size: 14px;
  color: var(--rd-ink);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-fi-row--head .wb-fi-c-form {
  font-family: var(--rd-mono);
  font-size: 9px;
}
.wb-fi-c-morph {
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-fi-c-gloss {
  color: var(--rd-ink-2);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-fi-c-src {
  color: var(--rd-ink-3);
  font-size: 10px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-fi-c-op {
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-fi-c-go {
  text-align: center;
  color: var(--rd-warm);
  font-size: 12px;
}
/* indirect jump — destination letters shown, dimmer than an
   own-form arrow (the row opens a RELATIVE, not itself) */
.wb-fi-c-go--via {
  color: var(--rd-ink-3);
  font-size: 11px;
  white-space: nowrap;
}
.wb-fi-c-go--via span { font-family: var(--font-hebrew); font-size: 13px; }

/* KIN / FACTORS rows that open into their verses (Scott, 2026-10-07):
   the expand caret on the LEFT, no go-arrow on the right. */
.wb-fi-row--x { grid-template-columns: 12px 6px 80px 1fr 90px 90px 100px; }
.wb-fi-c-x {
  color: var(--rd-ink-3); font-size: 11px; text-align: center; user-select: none;
}
.wb-fi-c-x[role="button"]:hover, .wb-fi-c-x[aria-expanded="true"] { color: var(--rd-warm); }
.wb-fi-verses {
  border-bottom: 1px solid var(--rd-rule);
  border-left: 2px solid color-mix(in srgb, var(--rd-warm) 40%, transparent);
  margin-left: 12px;
  background: color-mix(in srgb, var(--rd-bg-3) 50%, transparent);
}
.wb-fi-verses-loading, .wb-fi-verses-more {
  padding: 6px 12px; font-family: var(--rd-mono); font-size: 10px; color: var(--rd-ink-3);
}
.wb-fi-verses-more { cursor: pointer; letter-spacing: 0.08em; }
.wb-fi-verses-more:hover { color: var(--rd-warm); }
.wb-fi-legend-link { color: var(--rd-warm); cursor: pointer; }
.wb-fi-legend-link:hover { text-decoration: underline; }

/* Uncertain candidate — italic gloss cell */
.wb-fi-row--unc .wb-fi-c-gloss {
  font-style: italic;
  color: var(--rd-ink-3);
}

/* Body scrolls independently when the row-set overflows; keeps
   the pager sticky at the bottom of the FI frame. */
.wb-fi-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-y: auto;
  padding: 0;
  display: block;
}
.wb-fi-body--kin {
  height: auto;
  max-height: none;
  overflow: hidden;
}
.wb-kin {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wb-kin-body {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 22%, 264px);
  border: 0;
}
.wb-kin-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wb-kin-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.wb-kin-table .wb-fi-sticky { top: 0; }
/* The ? help in the kin room scrolls on its own — the column is clipped,
   so an unscrolled legend was cut off (Scott, 2026-10-07). */
.wb-kin-main > .wb-fi-legend {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 45vh;
  overflow-y: auto;
}
.wb-kin-rail { min-height: 0; }
/* SORT on the factors tab: four chips on one line in the narrow rail */
.wb-kin-rail .wb-inst-facet-toggle { gap: 6px; }
.wb-kin-rail .wb-inst-ft-label { width: auto; }
.wb-kin-rail .wb-inst-ft-opts { flex-wrap: nowrap; gap: 2px; }
.wb-kin-rail .wb-inst-ft-opts .wb-inst-chip { font-size: 8px; padding: 1px 4px; letter-spacing: 0; }
@media (max-width: 760px) {
  .wb-kin-body { grid-template-columns: minmax(0, 1fr) 180px; }
}
/* Empty-state placeholders (other tabs) still center. */
.wb-fi-body > .wb-fi-empty {
  padding: 60px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pager L — clickable prev/next affordances flanking a page-of-N
   readout. Affordances warm on hover. */
.wb-fi-pager-a {
  color: var(--rd-warm);
  cursor: pointer;
  padding: 0 6px;
  letter-spacing: 0.06em;
}
.wb-fi-pager-a:hover {
  color: var(--rd-hot);
}
.wb-fi-pager-n {
  color: var(--rd-ink-3);
  margin: 0 4px;
}

/* Responsive — at phone width MORPH/SOURCE/VIA drop first
   (per the mockup's mobile breakdown at line 230). Grid collapses
   to `6px · 1fr · 24px` and the mark/form/gloss/→ columns stay. */
@media (max-width: 600px) {
  .wb-fi-row {
    grid-template-columns: 6px minmax(70px, auto) 1fr 20px;
    gap: 10px;
  }
  .wb-fi-c-morph, .wb-fi-c-src, .wb-fi-c-op { display: none; }
  .wb-fi-row--head .wb-fi-c-morph,
  .wb-fi-row--head .wb-fi-c-src,
  .wb-fi-row--head .wb-fi-c-op { display: none; }
}

/* Legend toggle — the `?` next to the recognized/rejected count.
   Matches the standard `.rd-info-tip` circle: 14×14, 1px rule,
   centered glyph. `box-sizing: border-box` + `line-height: 12px`
   pin the glyph to the geometric center of the circle (the '?'
   glyph's baseline sits slightly high without this). Warm-tinted
   when the legend is open. */
.wb-fi-legend-toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 1px solid var(--rd-rule);
  border-radius: 50%;
  background: var(--rd-bg-2);
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  user-select: none;
}
.wb-fi-legend-toggle:hover {
  color: var(--rd-ink);
  border-color: var(--rd-warm-soft);
}
.wb-fi-legend-toggle--on {
  color: var(--rd-warm);
  border-color: var(--rd-warm);
  background: color-mix(in srgb, var(--rd-warm) 8%, transparent);
}

/* Legend panel — inline expansion below the GHOST subrow when
   the `?` is toggled on. Explains tier bars, SOURCE, VIA, GHOST. */
.wb-fi-legend {
  padding: 10px 14px;
  background: var(--rd-bg);
  border-bottom: 1px solid var(--rd-rule);
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-3);
  line-height: 1.55;
}
.wb-fi-legend-h {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--rd-ink-4);
  margin-bottom: 8px;
}
.wb-fi-legend-grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 4px 12px;
  align-items: center;
  margin-bottom: 8px;
}
.wb-fi-legend-row { display: contents; }
.wb-fi-legend-grid--sets {
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  gap: 5px 16px;
  align-items: start;
}
.wb-kin-helpbar {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--rd-rule);
}
.wb-fi-legend-grid .wb-fi-c-mark {
  width: 6px;
  height: 14px;
  margin: 0;
}
.wb-fi-legend-l {
  color: var(--rd-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.wb-fi-legend-v {
  color: var(--rd-ink-3);
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0;
}
.wb-fi-legend-sep {
  height: 1px;
  background: var(--rd-rule);
  margin: 8px 0;
}
.wb-fi-legend-note {
  color: var(--rd-ink-3);
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 11px;
  margin-top: 3px;
}
/* A bold is a LABEL at the head of a note ("A row reads:") and a NAME inside
   its prose ("… over every ELS row …"). The label wants air after it; the
   name must not add any — the sentence's own space is the space. The
   letter-spacing hangs off the last glyph too, so it is pulled back. */
.wb-fi-legend-note b {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-warm);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-right: -0.06em;
}
.wb-fi-legend-note > b:first-child { margin-right: 4px; }
/* A Hebrew word inside English prose pulls the punctuation and the numbers
   around it into RTL order ("of every 11.8% יהוה; ת"). Isolating each bold /
   italic run keeps the neutrals in the paragraph's own direction. */
.wb-fi-legend-note b,
.wb-fi-legend-note i,
.wb-fi-legend-word,
.wb-fi-legend-heb { unicode-bidi: isolate; }
.wb-fi-legend-heb { font-family: var(--font-hebrew); font-size: 12px; color: var(--rd-ink-2); }
.wb-fi-legend-note i {
  color: var(--rd-ink-2);
  font-style: normal;
  letter-spacing: 0;
  font-family: var(--rd-mono);
  font-size: 10px;
}

/* Cluster chips — this-word's actual thematic clusters, each
   with its strength-colored tier bar. Wraps onto multiple lines
   at narrow widths. Rescued from the retired v2 band-footer. */
.wb-fi-legend-clusters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 4px;
}
.wb-fi-legend-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wb-fi-legend-cluster .wb-fi-c-mark {
  width: 4px;
  height: 12px;
  margin: 0;
}
.wb-fi-legend-cluster-theme {
  color: var(--rd-ink-2);
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 11px;
}

/* ── FI · INSTANCES tab overrides ─────────────────────────────
   Reuses the standalone `instances-band` component (histogram +
   facet rail + list + pager) inside the FI table. The tab shell
   already labels the content; strip the section chrome + header
   so it doesn't render as a nested section-in-a-section. Add
   one frame so its histogram, list, and facet rail align with Pass
   Through rather than nesting another padded panel inside the tab. */
.wb-fi-instances-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}
/* Kill the legacy section chrome — the FI body already provides
   the frame + padding. */
.wb-fi-instances-wrap .wb-inst {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
/* Hide the section header (`h3.wb-profile-h3` with title / sub /
   right-count) — the FI tab pill labels the content, and the
   right-count would double up with the FI pager. */
.wb-fi-instances-wrap .wb-inst .wb-profile-h3,
.wb-fi-instances-wrap .wb-inst .wb-help-body {
  display: none;
}
/* One compact control rail: canonical sort + legend + the mobile
   filter toggle. Keep this selector more specific than Explore's
   base sortbar so stylesheet order cannot restore its outer border. */
.wb-fi-instances-wrap .wb-inst-sortbar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--wb-rule);
}
.wb-fi-instances-wrap .wb-inst-sortbar .wb-fi-legend-toggle {
  margin-left: 0;
}
/* Distribution is the head of the main column, not a full-width
   card above the rail. This is the Pass Through geometry. */
.wb-fi-instances-wrap .wb-inst-distribution {
  margin: 0;
}
.wb-fi-instances-wrap .wb-inst-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border: 0;
  overflow: hidden;
  margin: 0;
}
.wb-fi-instances-wrap .wb-inst-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wb-fi-instances-wrap .wb-inst-dist {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px 5px;
  border: 0;
  border-bottom: 1px solid var(--wb-rule);
}
.wb-fi-instances-wrap .wb-inst-dist-h { margin-bottom: 4px; }
.wb-fi-instances-wrap .wb-inst-dist-bars { height: 108px; }
.wb-fi-instances-wrap .wb-inst-dist-legend {
  gap: 4px 14px;
  margin-top: 5px;
}
.wb-fi-instances-wrap .wb-inst-list {
  flex: 1 1 auto;
  min-height: 0;
}
.wb-fi-instances-wrap .wb-inst-pager {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  border-top: 1px solid var(--wb-rule);
}

/* Filters toggle — the `▾ FILTERS` chip that shows/hides the rail
   on mobile. Hidden entirely on desktop (>800px) since the rail
   is always visible there. */
.wb-fi-instances-filters-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto;
  padding: 5px 10px;
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  color: var(--rd-ink-3);
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}
.wb-fi-instances-filters-toggle:hover {
  color: var(--rd-warm);
  border-color: var(--rd-warm-soft);
}
.wb-fi-instances-wrap--filters-open .wb-fi-instances-filters-toggle {
  color: var(--rd-warm);
  border-color: var(--rd-warm);
}
.wb-fi-instances-filters-glyph {
  font-size: 11px;
  line-height: 1;
}

/* Two-column body → single column at narrow widths. Desktop
   keeps the list + right-rail layout; mobile stacks with the
   filters COLLAPSED by default behind the `▾ FILTERS` toggle.
   The toggle is visible; the rail hides via `display: none`
   unless the wrap carries `--filters-open`. */
@media (max-width: 800px) {
  .wb-fi-instances-filters-toggle { display: inline-flex; }

  .wb-fi-instances-wrap .wb-inst-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    max-height: none;
  }
  /* DOM order is results-list then facet-rail; flip visual order
     via `order` so the filters render above the list when open. */
  .wb-fi-instances-wrap .wb-inst-main { order: 2; }
  .wb-fi-instances-wrap .wb-inst-rail { order: 1; }
  /* Rail is hidden by default on mobile — the toggle brings it
     out into the space the list occupies (results push down
     when the rail expands, back up when it closes). */
  .wb-fi-instances-wrap .wb-inst-rail { display: none; }
  .wb-fi-instances-wrap--filters-open .wb-inst-rail {
    display: flex;
    border-left: 0;
    border-bottom: 1px solid var(--wb-rule);
    overflow: visible;
    margin-bottom: 10px;
  }
  /* Kill the internal rail-scroll wrapper's overflow — on mobile
     we want the whole rail content visible; scroll the outer
     body if needed. */
  .wb-fi-instances-wrap--filters-open .wb-inst-rail-scroll {
    overflow: visible;
  }
}

/* When the INSTANCES tab is active, the FI body needs to grow
   to fit the histogram + rail + list + pager comfortably. Bump
   the max-height and let each internal container scroll on its
   own instead of the whole FI body double-scrolling. */
.wb-fi-body:has(.wb-fi-instances-wrap) {
  max-height: none;
  padding: 0;
}

/* ── Root profile · minimal ────────────────────────────────────
   Bare-bones root profile: big Hebrew hero, GV/lemma-count/letters
   meta strip, sibling-lemma family list. A root's primary useful
   surface IS its family list; the profile is small so future depth
   (ELS through this root, gv-signature grouping) can layer on
   later without a redesign. */
.wb-rp {
  padding: 36px 36px 60px;
}
.wb-rp-hero {
  font-family: var(--font-hebrew);
  font-size: 96px;
  line-height: 1;
  color: var(--wb-warm);
  text-align: center;
  margin: 8px 0 20px;
  letter-spacing: 0.01em;
}
.wb-rp-meta {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: baseline;
  margin: 0 0 28px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wb-rp-meta-item {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}
.wb-rp-meta-l { color: var(--wb-ink-4); }
.wb-rp-meta-v {
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}
.wb-rp-section {
  border-top: 1px solid var(--wb-rule);
  padding-top: 16px;
}
.wb-rp-section-h {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-warm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 500;
}
.wb-rp-rows {
  display: flex;
  flex-direction: column;
}
.wb-rp-row {
  display: grid;
  grid-template-columns: 44px 100px 60px 60px 1fr 20px;
  gap: 12px;
  align-items: baseline;
  padding: 9px 10px;
  border-bottom: 1px solid var(--wb-rule);
  cursor: pointer;
  transition: background 80ms ease;
  font-size: 12px;
}
.wb-rp-row:hover {
  background: color-mix(in srgb, var(--wb-warm) 4%, transparent);
}
.wb-rp-row-rank {
  font-family: var(--rd-mono);
  color: var(--wb-ink-4);
  font-variant-numeric: tabular-nums;
}
.wb-rp-row-hb {
  font-family: var(--font-hebrew);
  font-size: 16px;
  color: var(--wb-ink);
  text-align: right;
}
.wb-rp-row-strongs {
  font-family: var(--rd-mono);
  color: var(--wb-ink-3);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.wb-rp-row-freq {
  font-family: var(--rd-mono);
  color: var(--wb-ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.wb-rp-row-gloss {
  color: var(--wb-ink-2);
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-rp-row-go {
  color: var(--wb-ink-4);
  text-align: right;
}
.wb-rp-row:hover .wb-rp-row-go {
  color: var(--wb-warm);
}
.wb-rp-empty {
  color: var(--wb-ink-3);
  font-style: italic;
  font-size: 12px;
}

/* ══ Received channels — the study desk ═══════════════════════
   The verse profile's main column below the hero (2026-07-13).
   Two-column editorial spread: the machine's own STUDY as the
   wide reading column, the received VOICES (commentary cloud;
   BHT rows carry the chalkboard) as the marginalia column.
   Typography + negative space do ALL the separating — no
   horizontal rules on this page. Renderers are the verse mini's
   (rd-study-prose / rd-panel-commentary-* / rd-chalk-*); this
   context re-stages them at reading scale. */

.pf-channels {
  display: grid;
  /* Two EQUAL columns filling the page (Scott, 2026-07-13) —
     the column width is the reading measure; the gutter is the
     only space between them. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 28px;
  align-items: start;
}

/* the study column rendered nothing (no study rail in this lang,
   no frames, no cross-references) — one column, full width */
.pf-channels--solo {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  /* ONE page column — same var the hero children cap at, so the
     study/voices left edge lines up with the lens bar, the
     translation text, and the chip rows (the six-margins cleanup).
     No side padding: the main column's gutter IS the margin. */
  max-width: var(--pf-col-w, 1124px);
  margin: 0 auto;
  /* Top pad 2px: with the hero's 16px bottom this matches the
     lens-bar → translation-header gap (18px CSS; Scott 2026-07-30
     'gap between the translation chips and the study/commentary
     block should match'). */
  padding: 2px 0 80px;
}
@media (max-width: 1180px) {
  .pf-channels { grid-template-columns: minmax(0, 1fr); padding: 2px 0 56px; }
}
@media (max-width: 700px) {
  .pf-channels { padding: 2px 0 44px; }
}

/* Channel chips — spans both columns above the spread. Verbatim
   .rd-mw-sect-chip recipe (one chip language across the app):
   warm tint = on, dashed dim = hidden. */
.pf-channel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  row-gap: 3px;
  /* Lives under the COMMENTARY tab now — breathing room before
     the first voice head. */
  margin: 0 0 14px;
}
.pf-channel-chip {
  padding: 3px;
  border: 1px solid var(--wb-warm);
  border-radius: 2px;
  background: color-mix(in srgb, var(--wb-warm) 15%, transparent);
  color: var(--wb-warm);
  font-family: var(--rd-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  font-variant: small-caps;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease, opacity 120ms ease;
}
.pf-channel-chip.off {
  background: transparent;
  border-style: dashed;
  opacity: 0.55;
}
.pf-channel-chip:hover { border-color: var(--rd-hot); }
.pf-channel-chip-n {
  margin-left: 4px;
  opacity: 0.75;
}

/* When only one channel is visible, it takes the whole spread
   (the reading measures cap line length anyway). */
section.pf-channel:only-of-type { grid-column: 1 / -1; }

/* One-shot entrance — opacity/transform only (compositor-safe;
   never loop paint properties in the reader). */
.pf-channel {
  min-width: 0;
  opacity: 0;
  animation: pf-channel-in 480ms cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}
.pf-channel--voices { animation-delay: 110ms; }
@keyframes pf-channel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Channel running-heads — micro mono, wide tracking, with a small
   warm tick standing in for the retired section rule. */
/* sub-head inside the study column's cites fallback (langs
   without a study rail, 2026-08-02) — the channel-head voice,
   quieter, with breathing room between the two tables */
.pf-channel-sub {
  margin: 14px 0 8px;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-muted);
}
.pf-study-xrefs .pf-channel-sub:first-child { margin-top: 0; }

.pf-channel-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--rd-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wb-ink-4);
}
.pf-channel-h::before {
  content: "";
  width: 14px;
  height: 3px;
  background: color-mix(in srgb, var(--wb-warm) 55%, transparent);
  align-self: center;
}

/* ── STUDY — the reading column ─────────────────────────────── */
.pf-channel--study .rd-study-prose {
  /* Measure comes from the grid track (500px), not a ch cap —
     one width authority, no dead space. */
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--wb-ink-2);
}
.pf-channel--study .rd-study-prose p { margin: 0 0 0.95em; }
.pf-channel--study .rd-study-prose p:first-child::first-letter {
  /* Quiet drop-cap — two lines, same ink, serif weight does the
     work. The one print flourish on the page. */
  float: left;
  font-size: 2.55em;
  line-height: 0.82;
  padding: 4px 8px 0 0;
  color: var(--wb-ink);
}
.pf-channel--study .rd-study-prose strong {
  color: color-mix(in srgb, var(--wb-warm) 78%, var(--wb-ink));
  font-weight: 700;
}
.pf-channel--study .rd-study-prose em { color: var(--wb-ink); }
.pf-channel--study .rd-study-prose blockquote {
  position: relative;
  margin: 1.1em 0 1.2em 1.4em;
  padding-left: 14px;
  border-left: 0;
  opacity: 1;
  font-style: italic;
  color: var(--wb-ink-2);
}
.pf-channel--study .rd-study-prose blockquote::before {
  /* Hanging quote glyph instead of a rule. */
  content: "\201C";
  position: absolute;
  left: -0.55em;
  top: -0.12em;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 2em;
  line-height: 1;
  color: color-mix(in srgb, var(--wb-warm) 65%, transparent);
}

/* Voices column tabs — commentary · cites · cited by. Same
   micro-mono register as the channel running-heads; the warm tick
   travels to the active tab. */
.pf-channel-tabs {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 0 0 16px;
}
/* Circled ? at the strip's right end — opens the active tab's
   layer doc (Scott, 2026-07-30). */
.pf-channel-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  align-self: center;
  border: 1px solid var(--wb-rule);
  border-radius: 50%;
  color: var(--wb-ink-3);
  font-family: var(--rd-mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.pf-channel-help:hover {
  color: var(--wb-ink);
  border-color: var(--wb-ink-2);
}
.pf-channel-tab {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wb-ink-4);
  cursor: pointer;
  user-select: none;
  transition: color 120ms ease;
}
.pf-channel-tab::before {
  content: "";
  width: 14px;
  height: 3px;
  background: transparent;
  align-self: center;
  transition: background 120ms ease;
}
.pf-channel-tab:hover { color: var(--wb-ink-3); }
.pf-channel-tab--on {
  color: var(--wb-ink-3);
}
.pf-channel-tab--on::before {
  background: color-mix(in srgb, var(--wb-warm) 55%, transparent);
}
.pf-channel-tab-n {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--wb-ink-4);
  opacity: 0.8;
}

/* Peek rows at column width (the cites/cited-by tabs) — scale the
   mini's viewer rows up to the reading register and let the column
   flow with the page like the commentary does. */
.pf-channel--voices .rd-mw-vw-list {
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}
.pf-channel--voices .rd-mw-vw-row { padding: 8px 0 10px; }
.pf-channel--voices .rd-mw-vw-hb { font-size: 17px; line-height: 1.9; }
.pf-channel--voices .rd-mw-vw-en {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 13px;
  line-height: 1.6;
}
.pf-channel--voices .wb-profile-canon-filter { margin: 0 0 10px; }

/* ── VOICES — the marginalia column ─────────────────────────── */
.pf-voice { margin-bottom: 26px; }
.pf-voice:last-child { margin-bottom: 0; }
.pf-voice-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.pf-voice-name {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wb-warm) 80%, var(--wb-ink-2));
}
.pf-voice-count {
  font-family: var(--rd-mono);
  font-size: 9px;
  color: var(--wb-ink-4);
}

/* Re-stage the mini's comment rows at page scale — the voice's
   words read as TEXT (same serif as the study column), while the
   chalkboard's arithmetic below stays mono (numbers on a board). */
.pf-channel--voices .rd-panel-commentary-comment {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--wb-ink-2);
  padding: 4px 0;
}
.pf-channel--voices .rd-panel-commentary-text--he {
  font-size: 16px;
  line-height: 1.9;
}
.pf-channel--voices .rd-panel-commentary-note {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12px;
  font-style: italic;
}
.pf-channel--voices .rd-chalk-frame-text {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
}

/* The chalkboard breathes at page width: bigger Hebrew, roomier
   board. The warm inset edge is the board's identity — it stays. */
.pf-channel--voices .rd-chalkboard {
  margin: 6px 0 14px 12px;
  padding: 8px 14px;
}
.pf-channel--voices .rd-chalk-he { font-size: 16px; }
.pf-channel--voices .rd-chalk-translit { font-size: 12px; }
.pf-channel--voices .rd-chalk-gloss { font-size: 12px; }
.pf-channel--voices .rd-chalk-mech { font-size: 12px; }
.pf-channel--voices .rd-chalk-frame-text { font-size: 12px; }
.pf-channel--voices .rd-chalk-refs { font-size: 11px; }

/* ══ The page column (six-margins cleanup, 2026-07-13) ════════
   The verse profile (scope-top) runs everything through ONE
   column: the main's 28px gutter + a shared content cap
   (--pf-col-w). Hero children (verse · lens bar · translation
   slot) and the channels grid all cap at the same width and
   share the same left edge. The Hebrew verse, being RTL, aligns
   to the column's RIGHT edge — each script to its reading edge,
   one column for both. */
.wb-profile--scope-top { --pf-col-w: 1440px; }
.wb-profile--scope-top .wb-profile-main {
  padding: 16px 28px 24px;
}
.wb-profile--scope-top .wb-profile-hero {
  margin: 0 -28px;
  /* the chips left for the RAIL (2026-07-31) — the hero opens
     with the verse; this pad is the rail-to-verse air. */
  padding: 12px 28px 12px;
}
.wb-profile--scope-top .wb-profile-hero > .pf-verse-hb,
.wb-profile--scope-top .wb-profile-hero > .lens-bar,
.wb-profile--scope-top .wb-profile-hero > .pf-trans-slot {
  width: 100%;
  max-width: var(--pf-col-w);
}
/* The lens bar carries .rd-highlights (reader-panel recipe) which
   brings a border-top + 24px side padding — on this page that was
   the stray HR under the verse and one of the six margins. */
.wb-profile--scope-top .wb-profile-hero .lens-bar {
  border-top: 0;
  padding: 6px 0;
}

/* Aside CITES / CITED BY — word-mini-style section rows below the
   mini (Scott, 2026-07-13). The .rd-word-mini wrapper pulls the
   mini's layer CSS; this block just gives the group its gutter. */
.rd-mw-aside-xrefs {
  /* NO padding of its own except the bottom breath before the
     footer: the panel body gutters horizontally (16px 18px), and
     the 6px top seam made CITES read disjoint from POSITION
     (Scott, 2026-08-14 — the rows should continue the mini's
     rhythm as one ledger) */
  padding: 0 0 24px;
}
.rd-mw-aside-xrefs .wb-profile-canon-filter,
.rd-mw-xref-rows .wb-profile-canon-filter {
  margin: 2px 0 6px;
}

/* The mini's own footer is replaced by the aside-level one below
   CITES/CITED BY (Scott, 2026-07-13). */
.pf-aside-mini .rd-panel-footer-open { display: none; }

/* ── Parallel view (docs/spec/the-parallel-reader.md) ─────────── */
/* The segmented view control — joined halves, chip palette,
   arrangement not overlay */
.rd-viewseg {
  display: inline-flex;
  margin-left: auto;          /* right end of the highlights rail */
  border: 1px solid var(--rd-rule);
  border-radius: 4px;
  overflow: hidden;
  flex: none;
}
.rd-viewseg-opt {
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: .04em;
  cursor: pointer;
  color: var(--rd-ink-2);
  user-select: none;
  white-space: nowrap;
}
.rd-viewseg-opt + .rd-viewseg-opt {
  border-left: 1px solid var(--rd-rule);
}
.rd-viewseg-opt.on {
  background: var(--rd-bg-3);
  color: var(--rd-ink);
}
.rd-viewseg-opt:not(.on):hover {
  color: var(--rd-ink);
}

/* Verse row splits into two columns; Hebrew keeps its RTL cell,
   the flowing translation takes the other. Similar OPTICAL sizes:
   Hebrew runs ~17% larger than the Latin column by nature of the
   reader's base sizes, so the cell just sets a comfortable Latin
   reading size. */
.rd-verse--parallel {
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  align-items: baseline;
}
.rd-verse--parallel > .rd-vn { grid-column: 1; grid-row: 1; }
.rd-verse--parallel > .rd-verse-body { grid-column: 2; min-width: 0; }
/* Legacy single gloss cell — kept harmless for any old path. */
.rd-verse--parallel > .rd-par-cell {
  grid-column: 3;
  min-width: 0;
  direction: ltr;
  text-align: left;
  font-size: 0.98rem;
  line-height: 1.75;
  align-self: baseline;
}

/* ── The mirror columns — back-to-back at the centre gutter ─────
   LEFT column (grid col 2, beneath the Hebrew body): the selected
   RTL languages, right-justified so the text hugs the centre and
   reads outward. RIGHT column (grid col 3): the selected LTR
   languages, base gloss on top, left-justified against the centre.
   Both read AWAY from the gutter — the interlinear made bilateral. */
.rd-verse--parallel > .rd-mirror-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.98rem;
  line-height: 1.7;
  align-self: start;
}
.rd-verse--parallel > .rd-mirror-col--rtl {
  grid-column: 2;
  grid-row: 2;
  direction: rtl;
  text-align: right;
}
.rd-verse--parallel > .rd-mirror-col--ltr {
  grid-column: 3;
  grid-row: 1 / span 2;
  direction: ltr;
  text-align: left;
}
/* the columns render the study view's own .rd-tr-w spans — their
   styles apply as-is; only the column layout lives here */
@media (max-width: 900px) {
  /* narrow viewports stack everything under the Hebrew — one
     column, direction per row (justification stays per-direction) */
  .rd-verse--parallel {
    grid-template-columns: 1.4em minmax(0, 1fr);
  }
  .rd-verse--parallel > .rd-par-cell {
    grid-column: 2;
  }
  .rd-verse--parallel > .rd-mirror-col--rtl,
  .rd-verse--parallel > .rd-mirror-col--ltr {
    grid-column: 2;
    grid-row: auto;
  }
}

/* ── The mirror stack (study mode) — single full-width column ───
   Hebrew interlinear sits above (the verse body). Beneath it the
   selected languages stack: RTL rows right-justified, LTR rows
   left-justified, each in its own direction. Lands in the same
   flush 'trans' grid area the single translation row used. */
.rd-mirror-stack {
  grid-area: trans;
  direction: ltr;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 2px;
}
.rd-verse-body--brackets .rd-mirror-stack { margin-top: 14px; }
.rd-mirror-row {
  display: block;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--rd-ink-2, #6f6350);
}
.rd-mirror-row--rtl { direction: rtl; text-align: right; }
.rd-mirror-row--ltr { direction: ltr; text-align: left; }
/* The little source tag rides inline before the row text; the
   base translation CSS hides .rd-verse-translation-src, but in the
   mirror it names WHICH language the row is, so bring it back —
   quiet, monospaced, riding the leading edge of its direction. */
.rd-mirror-row .rd-verse-translation-src,
.rd-mirror-col .rd-verse-translation-src {
  display: inline-block;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-3, #9b8c70);
  opacity: 0.75;
  margin-inline-end: 0.5em;
  vertical-align: baseline;
  user-select: none;
}
.rd-mirror-row .rd-verse-translation-text,
.rd-mirror-col .rd-verse-translation-text {
  font-style: italic;
}
.rd-mirror-col .rd-mirror-row { margin: 0; }

/* ── The langs · N opener — a sibling of the view segment ───────
   Same tick-chip register as the highlights rail; sits at the far
   right, just past the study/parallel/fold segment. */
.rd-langs-opener {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid var(--rd-rule);
  border-radius: 4px;
  color: var(--rd-ink-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.rd-langs-opener:hover { color: var(--rd-ink); }
.rd-langs-opener.on {
  background: var(--rd-bg-3);
  color: var(--rd-ink);
  border-color: color-mix(in srgb, var(--rd-ink) 30%, var(--rd-rule));
}

/* ── The bottom language tray — docked at the reading pane's edge ─
   A flex child after the scrolling .rd-doc, so it takes its own
   height and the reading position stays put (the doc just gets a
   shorter viewport). Collapsed by default; the opener toggles it. */
.rd-lang-tray {
  flex: 0 0 auto;
  border-top: 1px solid var(--rd-rule);
  background: var(--rd-bg-2, var(--rd-bg));
  padding: 8px 24px 10px;
  max-height: 38vh;
  overflow-y: auto;
}
.rd-lang-tray-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rd-lang-tray-title {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-ink-3, #9b8c70);
  margin-inline-end: auto;
}
.rd-lang-tray-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  color: var(--rd-ink-3, #9b8c70);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  line-height: 1;
}
.rd-lang-tray-close:hover {
  color: var(--rd-ink);
  background: color-mix(in srgb, var(--rd-ink) 8%, transparent);
}
/* The three-section chip grid reuses the profile's pf-trans-* pill
   styling verbatim; only the tray's own flow-wrap container lives
   here. Group heads break the row so each section starts fresh. */
.rd-lang-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.rd-lang-grid .pf-trans-group-head {
  flex-basis: 100%;
}
.rd-lang-grid .pf-trans-group-head:not(:first-child) {
  margin-top: 6px;
}
@media (max-width: 560px) {
  .rd-lang-tray { padding: 8px 12px 10px; }
}

/* ── FRAMES channel — V.6 predicate cards ─────────────────────
   One card per recognized frame: house name + confidence, the
   reason, slot rows resolved to token surfaces. Hover lights the
   slot tokens in the hero (wb-profile-token--predicate-slot). */
.pf-channel--frames { animation-delay: 190ms; }
.pf-frcards {
  display: grid;
  gap: 10px;
}
.pf-frcard {
  border: 1px solid var(--wb-rule);
  border-left: 2px solid color-mix(in srgb, var(--wb-warm) 55%, transparent);
  border-radius: 4px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--wb-bg-3) 60%, transparent);
  transition: border-color 140ms ease;
}
.pf-frcard:hover { border-color: color-mix(in srgb, var(--rd-hot) 45%, var(--wb-rule)); }
.pf-frcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pf-frcard-name {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--wb-warm) 80%, var(--wb-ink-2));
  cursor: pointer;
  transition: color 120ms ease;
}
.pf-frcard-name:hover,
.pf-frcard-name:focus-visible { color: var(--rd-hot); }
.pf-frcard-conf {
  font-family: var(--rd-mono);
  font-size: 9px;
  color: var(--wb-ink-3);
}
.pf-frcard-reason {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--wb-ink-2);
  margin-bottom: 8px;
}
/* The verse's own words as the stated reason — Hebrew, quoted. */
.pf-frcard-quote {
  font-family: var(--font-hebrew);
  font-size: 17px;
  line-height: 1.7;
  color: var(--wb-ink);
  margin-bottom: 8px;
}
.pf-frcard-quote::before { content: "« "; color: var(--wb-ink-3); }
.pf-frcard-quote::after  { content: " »"; color: var(--wb-ink-3); }
/* Reading-language gloss under the quoted reason — the reading
   face, same as commentary prose. */
.pf-frcard-quote-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--wb-ink-3);
  margin: -4px 0 8px;
}
/* Clickable Hebrew inside frame cards — quote words + slot
   values open their word profiles. */
.pf-frcard-heb-w, .pf-frcard-heb-link { cursor: pointer; }
.pf-frcard-heb-w:hover, .pf-frcard-heb-link:hover {
  color: var(--wb-warm);
}
.pf-frcard-slots {
  display: grid;
  gap: 3px;
}
.pf-frcard-slot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 1px 0;
}
.pf-frcard-slot-k {
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
  min-width: 72px;
  flex: none;
}
.pf-frcard-slot-v {
  font-size: 14px;
  font-family: var(--font-hebrew);
  color: var(--wb-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Per-slot gloss — seated after the Hebrew, muted, LTR. */
.pf-frcard-slot-g {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12.5px;
  font-style: italic;
  color: var(--wb-ink-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ═══ The FOLD reader (⋈) — two halves converging on the center
   (Scott, 2026-08-04). Left column reads forward from the book's
   first verse, right column backward from its last; scrolling
   deeper walks both inward, and the bottom of the list IS the
   center — seam or middle verse, usually carrying a ◈ finding. */
.fold-view {
  /* the fold IS the doc when ⋈ is on — same scroller role and
     margins as .rd-doc (flex child of .rd-doc-area, which is
     overflow:hidden; without its own overflow the view couldn't
     scroll at all — Scott, 2026-08-04) */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  direction: ltr;
  padding: 32px 24px 80px;
}
@media (max-width: 560px) {
  .fold-view { padding: 24px 12px 60px; }
}
.fold-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 14px;
  font-family: var(--rd-mono);
}
.fold-head-glyph { color: var(--wb-warm); font-size: 15px; }
.fold-head-name  {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-ink);
}
.fold-head-meta  { font-size: 10px; color: var(--wb-ink-3); }
.fold-col-heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 8px;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}
.fold-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-rule) 55%, transparent);
}
/* the gutter between the halves is the fold itself — a faint
   warm spine down the middle of the list */
.fold-pair { position: relative; }
.fold-pair::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--wb-warm) 22%, transparent);
}
.fold-cell { min-width: 0; }
.fold-ref {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--wb-ink-3);
  cursor: pointer;
  margin-bottom: 5px;
}
.fold-ref:hover { color: var(--wb-warm); }
/* READER-scale type — the reader's doc column runs 30px Hebrew;
   the fold shows two columns, so a step under it, not half of it
   (Scott, 2026-08-05: "why is everything so small?") */
.fold-hebrew {
  font-family: var(--font-hebrew);
  font-size: 30px;
  line-height: 1.8;
  color: var(--wb-ink);
}
.fold-rendering {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wb-ink-3);
}
.fold-deeper {
  margin: 18px auto 0;
  width: fit-content;
  padding: 6px 18px;
  border: 1px solid color-mix(in srgb, var(--wb-warm) 45%, transparent);
  border-radius: 3px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wb-warm);
  cursor: pointer;
}
.fold-deeper:hover {
  background: color-mix(in srgb, var(--wb-warm) 10%, transparent);
}
.fold-loading {
  margin: 24px 0;
  text-align: center;
  color: var(--wb-ink-3);
}
.fold-meeting { margin-top: 4px; }
.fold-meeting-rule {
  height: 2px;
  margin: 16px 0 18px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--wb-warm) 65%, transparent) 30%,
    var(--wb-warm) 50%,
    color-mix(in srgb, var(--wb-warm) 65%, transparent) 70%,
    transparent);
}
.fold-center {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.fold-center .fold-cell { text-align: center; }
.fold-center .fold-hebrew { font-size: 32px; }
.fold-meeting-label {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-warm);
  margin-bottom: 10px;
}
.fold-meeting-note {
  font-size: 12px;
  color: var(--wb-ink-2);
}
@media (max-width: 760px) {
  .fold-pair, .fold-col-heads { grid-template-columns: 1fr; gap: 10px; }
  .fold-pair::after { display: none; }
}

/* ── fold ECHO lens — shared lemmas across the gutter ────────── */
.fold-tok { cursor: pointer; }
.fold-tok:hover { color: color-mix(in srgb, var(--wb-warm) 55%, var(--wb-ink)); }
.fold-echo {
  color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 9%, transparent);
  border-radius: 4px;
}
.fold-echo--hot {
  color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 14%, transparent);
  border-radius: 3px;
  text-decoration-style: solid;
  text-shadow: 0 0 10px color-mix(in srgb, var(--wb-warm) 40%, transparent);
}
.fold-echo-chip {
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
  cursor: pointer;
}
.fold-echo-chip.on {
  border-color: color-mix(in srgb, var(--wb-warm) 55%, transparent);
  color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 8%, transparent);
}

/* fold span controls — from–to chapter inputs in the head row */
.fold-span-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 18px;
  font-family: var(--rd-mono);
  font-size: 9.5px;
  color: var(--wb-ink-3);
}
.fold-span-label { letter-spacing: 0.12em; text-transform: uppercase; }
.fold-span-in {
  width: 44px;
  padding: 2px 4px;
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--wb-ink);
  font-family: var(--rd-mono);
  font-size: 10px;
  text-align: center;
}
.fold-span-in:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--wb-warm) 55%, transparent);
}
.fold-span-dash { color: var(--wb-ink-3); }
.fold-span-clear {
  cursor: pointer;
  color: var(--wb-ink-3);
  font-size: 12px;
}
.fold-span-clear:hover { color: var(--wb-warm); }

/* fold ELEMENT bands — authored chiasm overlays (A/B/C/D…).
   Chip beside the ref; the band's first row (per side) carries
   the label. Six-hue palette by first-appearance order. */
.fold-el-wrap { margin-inline-start: 8px; }
.fold-el {
  display: inline-block;
  min-width: 13px;
  padding: 0 3px;
  border-radius: 2px;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wb-bg);
}
.fold-el-label {
  margin-inline-start: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
}
.fold-el--0 { background: var(--wb-warm); }
.fold-el--1 { background: var(--wb-mint, #79b58c); }
.fold-el--2 { background: var(--wb-cyan, #5fa8b8); }
.fold-el--3 { background: var(--rd-hot, #d9694a); }
.fold-el--4 { background: var(--wb-violet, #9d7ab8); }
.fold-el--5 { background: var(--wb-rose, #c98a6f); }
.fold-el-label--0 { color: var(--wb-warm); }
.fold-el-label--1 { color: var(--wb-mint, #79b58c); }
.fold-el-label--2 { color: var(--wb-cyan, #5fa8b8); }
.fold-el-label--3 { color: var(--rd-hot, #d9694a); }
.fold-el-label--4 { color: var(--wb-violet, #9d7ab8); }
.fold-el-label--5 { color: var(--wb-rose, #c98a6f); }

/* fold control RAIL — Ableton-tight row under the lens rail,
   outside the scroll (the fold view scrolls only text). */
.fold-rail {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 24px 6px;
  border-bottom: 1px solid var(--wb-rule);
  font-family: var(--rd-mono);
}
.fold-rail .fold-head-glyph { font-size: 13px; }
.fold-rail .fold-head-name  { font-size: 11px; }
.fold-rail .fold-span-controls { margin-left: 6px; }
.fold-rail .fold-echo-chip { margin-left: auto; }
.fold-rail-structure {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wb-warm);
  border: 1px dashed color-mix(in srgb, var(--wb-warm) 40%, transparent);
  border-radius: 2px;
  padding: 1px 8px;
}

/* fold lens parity — sacred + aleph-tav marker (tier 1) */
.fold-tok--sacred { color: var(--rd-sacred, #c9a227); }
.fold-tok--at {
  color: var(--color-aleph-tav, #b08847);
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-aleph-tav, #b08847) 35%, transparent);
}

/* ═══ THE FOLD BLEND — hydrated cells through the ONE renderer ══ */
/* the verse-block inherits its scale from this wrapper, same as
   the reader doc's 30px → fold runs a step under (two columns) */
.fold-vb {
  direction: rtl;
  color: var(--wb-ink);
  /* verse-block sizes itself via --sv-hb-size (profile default
     36px) — the fold runs the two-column step-down through the
     var, not font-size (which pf-verse-hb ignores) */
  /* match the READER's own scale (verse-more.css .rd-verse-body)
     — Scott, 2026-08-05: "can they just match the reader size" */
  --sv-hb-size: 30px;
  --sv-word-gap: 10px;
}
.fold-vb .wb-profile-token { cursor: pointer; }
/* fold ECHO on the shared renderer — dotted-warm underline at the
   token level (same mark the lean fallback drew) */
/* echo mark = a quiet warm WASH, never an underline — any
   underline collides with the sub-linear vowels (Scott,
   2026-08-05: "the dots interfere with the vowels") */
.wb-profile-token--fold-echo {
  background: color-mix(in srgb, var(--wb-warm) 9%, transparent);
  border-radius: 4px;
}
/* the cell the cursor stands in — quiet wash + warm inline edge */
.fold-cell--active {
  background: color-mix(in srgb, var(--wb-warm) 5%, transparent);
  outline: 1px solid color-mix(in srgb, var(--wb-warm) 22%, transparent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ── The center's host word GLOWS (Scott, 2026-08-14) ─────────
   The word carrying the book's counted-center letter gets a warm
   standing aura at word scale — the landmark letter keeps its own
   hot breath inside it. Static shadow (never animate box-shadow
   in the reader — see the landmark note above). */
/* No box on the host token — the rounded-rect background/shadow
   read as a BORDER around the glow (Scott, 2026-08-14: "we don't
   [want to] see the border on the glow"). The letter's own circular
   halo (.rd-letter--landmark::before) is the whole aura. */
/* The center letter's identity survives SELECTION — the selection
   box was flattening the landmark's hot color when the boot cursor
   sits on the center word. */
.wb-profile-token--active .rd-letter--landmark,
.wb-profile-token--landmark-host .rd-letter--landmark {
  color: var(--rd-hot);
}

/* Parallel mirror rows drop the visible source label (Scott,
   2026-09-03: "we don't need the SELAH EN labels in the parallel")
   — the script and column already say the language; hover names it.
   Study-mode stack rows keep their labels. */
.rd-mirror-col .rd-mirror-row:not(.rd-mirror-row--trad) .rd-verse-translation-src { display: none; }

/* Mirror witness rows — the record tokens at reduced scale (the
   profile's pf-trans-witness-block sizing), reading as a compact
   Hebrew line inside the RTL wing. */
.rd-mirror-row--witness {
  --sv-hb-size: 17px;
  --sv-word-gap: 6px;
}
.rd-mirror-row--witness .wb-profile-token { padding: 1px 2px; }

/* ── PASSES THROUGH tab (2026-09-21) — the words a word's ELS rows pass through ── */
/* Query container: the collapse below keys on the band's OWN width, not the
   viewport — a narrow panel on a wide screen folds too (same move as the FI
   tab strip). */
.wb-pt { display: flex; flex-direction: column; gap: 2px; container-type: inline-size; }
.wb-pt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 6px 12px 2px; }
.wb-pt-sort { display: flex; align-items: center; gap: 6px; flex: none; }
.wb-pt-freq { text-align: left; font-size: 10px; }
.wb-pt-kin { display: block; font-size: 10px; line-height: 1.3; color: var(--wb-warm); opacity: .9; white-space: nowrap; }
.wb-pt-kin-via { font-family: var(--font-hebrew); font-size: 12px; }
.wb-pt-kin-ref { opacity: .7; }
.wb-pt-kin--factor { color: var(--rd-first, var(--wb-violet)); }
.wb-pt-kin--root { opacity: .65; }
.wb-pt-row--kin { box-shadow: inset 2px 0 0 var(--wb-warm); }
.wb-pt-count { font-size: 12px; font-variant-numeric: tabular-nums; align-self: center; white-space: nowrap; }
.wb-pt-count b { font-size: 14px; }
.wb-pt-count-all, .wb-pt-count-rows { opacity: .55; font-size: 11px; }
.wb-pt-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.wb-pt-dist { margin: 0; padding: 4px 10px 4px; border: 0; border-bottom: 1px solid var(--wb-rule); flex: none; }
.wb-pt-dist .wb-inst-dist-h { margin-bottom: 4px; }
/* the bars get the room: the label foot is fixed (4-digit label + marker) and
   the track takes the rest */
/* a percent-high bar needs a DEFINITE track: the track is 64px, not flex */
.wb-pt-dist-bars { height: 66px; gap: 1px; overflow: hidden; align-items: flex-start; }
.wb-pt-axis { position: relative; height: 13px; margin-top: 2px; }
.wb-pt-axis-tick {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--rd-mono); font-size: 9px; color: var(--wb-ink-3); font-variant-numeric: tabular-nums;
}
.wb-pt-axis-tick--first { transform: none; left: 0 !important; }
.wb-pt-axis-tick--last { transform: translateX(-100%); left: 100% !important; }
.wb-pt-axis-tick--sel { color: var(--wb-warm); }
.wb-pt-dist-bars .wb-inst-dbar-col { height: auto; justify-content: flex-start; min-width: 0; flex: 1 1 0; gap: 1px; }
.wb-pt-dist-bars .wb-inst-dbar-track { flex: 0 0 56px; height: 56px; }

.wb-pt-dist .wb-inst-dbar-k { font-size: 6px; }
.wb-pt-legend-more { color: var(--wb-warm); cursor: pointer; }
/* the legend: dense, no scroll — value · first clause · count */
.wb-pt-dist .wb-inst-dist-legend { gap: 1px 9px; margin-top: 3px; line-height: 1.25; }
.wb-pt-dist .wb-inst-dl { font-size: 8px; gap: 3px; }
.wb-pt-dist .wb-inst-dl-sw { width: 6px; height: 6px; }
.wb-pt-dist-modes .rd-hl-toggle { border: 1px solid var(--rd-rule, var(--wb-rule)); border-radius: 2px; padding: 1px 6px; font-family: var(--rd-mono); font-size: 9px; }
.wb-pt-dbar.wb-inst-tier--canonical, .wb-pt-dbar.wb-inst-tier--book-prime, .wb-pt-dbar.wb-inst-tier--tier-2 { opacity: 1; }
.wb-pt-dist-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb-pt-dist-modes { display: inline-flex; gap: 4px; letter-spacing: 0; }
.wb-pt-dbar { background: var(--wb-warm); opacity: .7; border-radius: 2px 2px 0 0; }
.wb-inst-dbar-col--sel .wb-pt-dbar { opacity: 1; }
/* the rail is narrower than the INSTANCES rail; its styling is the same —
   only the column changes (Scott, 2026-09-22: 'don't scale uniformly… just
   narrower, keeping the styling scale') */
.wb-pt-body { height: 640px; grid-template-columns: 1fr clamp(150px, 19%, 200px); }
@container (max-width: 560px) {
  .wb-pt-body { grid-template-columns: 1fr; height: auto; }
  .wb-pt-body .wb-inst-rail { border-left: 0; border-top: 1px solid var(--wb-rule); max-height: 280px; }
  .wb-pt-list { max-height: 520px; }
}
.wb-pt-list { padding: 0; flex: 1; min-height: 0; }
.wb-pt-list .wb-pt-row:first-child { border-top: 0; }
.wb-pt-head { position: sticky; top: 0; z-index: 2; background: var(--wb-bg); }
.wb-fi-legend-example { border-left: 2px solid var(--wb-warm); padding-left: 8px; }
.wb-fi-legend-word { font-family: var(--font-hebrew); font-size: 14px; color: var(--wb-warm); text-decoration: none; border-bottom: 1px dotted currentColor; }
.wb-fi-legend-word:hover { color: var(--wb-ink); }
.wb-pt-sort-sep { width: 1px; height: 14px; background: rgba(128,128,128,.3); margin: 0 4px; }
.wb-pt-band-chip .wb-pt-band-n { margin-left: 4px; opacity: .6; font-size: 10px; }
.wb-pt-band-chip--x1.wb-inst-chip--on { color: var(--rd-hapax, var(--wb-warm)); border-color: currentColor; }
.wb-pt-band-chip--x2.wb-inst-chip--on, .wb-pt-band-chip--x3.wb-inst-chip--on { color: var(--wb-warm); border-color: currentColor; }
.wb-pt .wb-inst-pager { margin-top: 6px; }
.wb-pt-sub { font-size: 11px; opacity: .55; padding: 0 12px 6px; font-variant-numeric: tabular-nums; }
/* form column = the other FI tabs' 80px (wb-fi-row), so the Hebrew sits at the same left edge */
.wb-pt-row { display: grid; grid-template-columns: 14px 80px 34px minmax(120px, 1fr) 36px 72px minmax(70px, auto) auto; align-items: center; gap: 12px; padding: 7px 12px; border-top: 1px solid rgba(128,128,128,.16); cursor: pointer; }
.wb-pt-row:hover { background: rgba(128,128,128,.08); }
.wb-pt-gloss { font-size: 11px; color: var(--rd-ink-2); display: flex; flex-direction: column; min-width: 0; }
.wb-pt-gloss-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-pt-rows { font-variant-numeric: tabular-nums; text-align: right; font-size: 11px; }
.wb-pt-skips { display: inline-flex; gap: 6px; align-items: baseline; font-family: var(--rd-mono); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-pt-skip--fwd { color: var(--wb-warm); }
.wb-pt-skip--rev { color: var(--wb-cyan); }
.wb-pt-skip-more { opacity: .5; }
.wb-pt-bar { height: 6px; border-radius: 3px; background: rgba(128,128,128,.16); overflow: hidden; }
.wb-pt-bar-fill { display: block; height: 100%; background: currentColor; opacity: .55; }
.wb-pt-letters { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; }
.wb-pt-letter { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.wb-pt-letter-g { font-size: 14px; font-family: var(--font-hebrew); }
.wb-pt-letter-h { opacity: .55; }
.wb-pt-letter-r { opacity: .8; }
.wb-pt-letter-r--hi { opacity: 1; font-weight: 600; }
.wb-pt-letter-r--lo { opacity: .45; }
@container (max-width: 720px) {
  .wb-pt-head { flex-direction: column; gap: 6px; }
  .wb-pt-caption { max-width: none; }
  .wb-pt-row { grid-template-columns: 14px 72px 32px 1fr 40px; gap: 6px 10px; }
  .wb-pt-bar { display: none; }
  .wb-pt-skips { grid-column: 2 / 4; }
  /* the letters fold under the row and run left → right */
  .wb-pt-letters { grid-column: 4 / -1; gap: 2px 10px; }
  .wb-pt-drill { padding-left: 12px; }
}
@container (max-width: 380px) {
  .wb-pt-row { grid-template-columns: 14px 64px 30px 1fr 36px; gap: 6px 8px; padding: 7px 8px; }
  .wb-pt-letters, .wb-pt-skips { grid-column: 1 / -1; }
  .wb-pt-drill { padding-left: 8px; padding-right: 8px; }
}
.wb-pt-expand { opacity: .55; font-size: 11px; text-align: center; cursor: pointer; user-select: none; }
.wb-pt-expand:hover { opacity: 1; }
.wb-pt-row--open { background: rgba(128,128,128,.08); }
.wb-pt-drill { padding: 4px 12px 10px 38px; border-top: 1px solid rgba(128,128,128,.16); background: rgba(128,128,128,.04); }
.wb-pt-drill .wb-inst-list { max-height: none; }

/* ELS / surface row meta — the ↗ sits ON the ref's line, not under it (Scott,
   2026-09-21: "the up and to the right arrow makes this take more space than
   necessary"). Ref · ↗ share row one; skip line and skip gloss span below. */
.wb-inst-row-meta { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; row-gap: 1px; align-items: baseline; }
.wb-inst-row-meta > .wb-inst-row-ref  { grid-column: 1; }
.wb-inst-row-meta > .wb-inst-row-open { grid-column: 2; justify-self: start; line-height: 1; cursor: pointer; opacity: .7; }
.wb-inst-row-meta > .wb-inst-row-open:hover { opacity: 1; }
.wb-inst-row-meta > .wb-inst-row-book,
.wb-inst-row-meta > .wb-inst-row-skipline,
.wb-inst-row-meta > .wb-inst-row-skipgloss { grid-column: 1 / -1; }

/* ×N under an ELS host — how many times that exact form stands in the Tanakh.
   Quiet for common words; a form standing three times or fewer is lit, a hapax
   most of all (2026-09-21). */
.wb-inst-cell-freq { display: block; font-family: var(--rd-mono); font-size: 9px; line-height: 1.2; color: var(--wb-ink-4); font-variant-numeric: tabular-nums; direction: ltr; text-align: center; }
.wb-inst-cell-freq--rare  { color: var(--wb-warm); font-weight: 600; }
.wb-inst-cell-freq--hapax { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* FIRST OCCURRENCE lens (2026-09-21) — a TINT on the colour channel (see
   selah.app.verse.lens); nothing at the wrapper. --rd-first lives in base.css. */

/* ── Frame card: structured slot values (2026-09-23) ───────────────
   A slot can hold a list of records (measurement's dimensions:
   quantity · unit · axis), a record, a flag, or an enum. Render each
   as what it is, never as its JSON. */
.pf-frcard-slot-table {
  display: grid;
  gap: 2px 10px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-2);
  margin-top: 2px;
}
.pf-frcard-slot-row { display: contents; }
.pf-frcard-slot-cell { min-width: 0; overflow-wrap: anywhere; }
.pf-frcard-slot-cell--heb { font-family: var(--font-hebrew); font-size: 14px; color: var(--wb-ink); direction: rtl; }
.pf-frcard-slot-cell-k { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-ink-3); }
.pf-frcard-slot-enum {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  padding: 1px 6px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  color: var(--wb-ink-2);
}
.pf-frcard-slot-flag { font-family: var(--rd-mono); font-size: 12px; color: var(--wb-warm); }
.pf-frcard-slot-cell-g { font-size: 11px; color: var(--wb-ink-2); direction: ltr; text-align: left; margin-top: 2px; }

/* ── Topics (2026-09-24) — the topical tags on a verse, the topic profile ── */
.pf-topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.pf-topic-chip, .wb-topic-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--wb-line); background: var(--wb-bg-2);
  font-size: 12.5px; color: var(--wb-ink-1);
}
.pf-topic-chip:hover, .wb-topic-chip:hover { border-color: var(--wb-warm); color: var(--wb-warm); }
.pf-topic-chip-src, .wb-topic-chip-src { font-size: 9px; letter-spacing: .12em; color: var(--wb-ink-3); }
.pf-topic-chip-size, .wb-topic-chip-size { font-size: 10.5px; color: var(--wb-ink-3); font-variant-numeric: tabular-nums; }
.wb-topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-topic-heading { letter-spacing: .08em; font-size: 11px; text-transform: uppercase; }
.wb-topic-actions { margin-top: 8px; }
.wb-topic-action { cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--wb-warm); }
.wb-topic-frames { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-topic-frame { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 9px; border-radius: 4px; border: 1px solid var(--wb-line); font-size: 12px; }
.wb-topic-frame-n { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.wb-topic-frame-c { font-variant-numeric: tabular-nums; }
.wb-topic-frame-p { color: var(--wb-ink-3); font-size: 10.5px; }
.wb-topic-bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 3px 10px; align-items: center; max-width: 520px; }
.wb-topic-bar { display: contents; }
.wb-topic-bar-l { font-size: 12px; color: var(--wb-ink-2); }
.wb-topic-bar-track { height: 6px; background: var(--wb-bg-2); border-radius: 3px; overflow: hidden; }
.wb-topic-bar-fill { display: block; height: 100%; background: var(--wb-warm); opacity: .7; }
.wb-topic-bar-n { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--wb-ink-3); }
.wb-topic-forms { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-topic-form { cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.wb-topic-form-w { font-family: var(--script-faces), serif; font-size: 18px; }
.wb-topic-form-n { font-size: 10px; color: var(--wb-ink-3); font-variant-numeric: tabular-nums; direction: ltr; }
.wb-topic-outline { display: flex; flex-direction: column; gap: 6px; }
.wb-topic-node-kids { margin-left: 18px; border-left: 1px solid var(--wb-line); padding-left: 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.wb-topic-node-line { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; }
.wb-topic-node-text { color: var(--wb-ink-1); }
.wb-topic-node-see { color: var(--wb-ink-3); font-style: italic; font-size: 12px; }
.wb-topic-node-refs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wb-topic-ref { cursor: pointer; font-size: 11.5px; padding: 1px 6px; border-radius: 3px; background: var(--wb-bg-2); color: var(--wb-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-topic-ref:hover { color: var(--wb-warm); }
.wb-topic-unresolved { font-size: 12px; color: var(--wb-ink-3); }

.pf-topics { flex-direction: column; gap: 10px; }
.pf-topics-group-h { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-ink-3); margin-bottom: 4px; }
.pf-topics-chips { display: flex; flex-wrap: wrap; gap: 6px; }