/* Selah workbench — phrase / lemma / chapter profiles
   Depth ladder, te'amim accents, cipher per-form, key verses.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* ── Depth ladder (phrase profile) ─────────────────────────────
   Visualizes the dichotomous tree path from verse-root → THIS.
   Each rung = one Wickes disjunctive level. Indentation widens
   with depth so the cascade reads as a tree at a glance.
*/
.wb-profile-depth-ladder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.wb-profile-depth-rung {
  display: flex;
  flex-wrap: wrap; /* lets the T.2 .wb-profile-depth-x line take the full row */
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wb-ink-2);
  border-left: 2px solid var(--wb-rule);
  padding-left: 6px;
  position: relative;
}
.wb-profile-depth-rung--root {
  color: var(--wb-ink);
  border-left-color: var(--wb-ink-2);
}
.wb-profile-depth-rung--self {
  color: var(--wb-ink);
  border-left-color: var(--wb-warm);
  font-weight: 600;
}
.wb-profile-depth-marker {
  display: inline-block;
  min-width: 1em;
  text-align: center;
  color: var(--wb-ink-2);
}
.wb-profile-depth-rung--self .wb-profile-depth-marker {
  color: var(--wb-warm);
}
.wb-profile-depth-level {
  display: inline-block;
  min-width: 2em;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-2);
  text-transform: uppercase;
}
.wb-profile-depth-mark {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-ink-2);
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  padding: 0 4px;
  line-height: 1.4;
}
.wb-profile-depth-text {
  font-family: var(--font-hebrew);
  font-size: 14px;
  color: inherit;
  text-decoration: none;
  direction: rtl;
  unicode-bidi: isolate;
}
a.wb-profile-depth-text:hover {
  color: var(--wb-ink);
  text-decoration: underline dotted;
}
.wb-profile-depth-tc {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--wb-ink-2);
  font-family: var(--rd-mono);
}
/* T.2 reading sentence per rung — full-width line under the rung's
   flex row, so the whole tree reads down root → leaf. */
.wb-profile-depth-x {
  flex-basis: 100%;
  font-size: 11px;
  line-height: 1.55;
  color: var(--wb-ink-2);
  padding: 2px 0 6px 1.6em;
}
/* T.2 sentence for the profiled phrase itself, under the hero. */
.wb-profile-phrase-x {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--wb-ink-2);
  max-width: 60ch;
}

/* ── Te'amim accents breakdown (phrase profile) ────────────────
   One row per token in the phrase, showing its accent name +
   Wickes class. The boundary token (whose disjunctive defines
   this phrase's break) gets the accent treatment.
*/
.wb-profile-tamim-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
}
.wb-profile-tamim-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wb-ink-2);
  padding: 2px 6px;
  border-left: 2px solid transparent;
  border-radius: 2px;
}
.wb-profile-tamim-row--disj {
  border-left-color: var(--wb-rule);
  background: var(--wb-bg-3);
}
.wb-profile-tamim-row--conj {
  border-left-color: transparent;
  color: var(--wb-ink-2);
}
.wb-profile-tamim-row--bare {
  color: var(--wb-ink-2);
  opacity: 0.7;
}
.wb-profile-tamim-row--boundary {
  border-left-color: var(--wb-warm);
  background: var(--wb-bg-2);
  color: var(--wb-ink);
  font-weight: 500;
}
.wb-profile-tamim-marker {
  display: inline-block;
  min-width: 1em;
  text-align: center;
  color: var(--wb-ink-2);
}
.wb-profile-tamim-row--boundary .wb-profile-tamim-marker {
  color: var(--wb-warm);
}
.wb-profile-tamim-pos {
  display: inline-block;
  min-width: 2.5em;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-2);
}
.wb-profile-tamim-token {
  font-family: var(--font-hebrew);
  font-size: 14px;
  direction: rtl;
  unicode-bidi: isolate;
  min-width: 4em;
}
.wb-profile-tamim-name {
  display: inline-block;
  font-size: 11px;
  font-family: var(--rd-mono);
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  padding: 0 5px;
  line-height: 1.5;
}
.wb-profile-tamim-name--disj {
  color: var(--wb-ink);
  border-color: var(--wb-ink-2);
}
.wb-profile-tamim-name--conj {
  color: var(--wb-ink-2);
  border-style: dashed;
}
.wb-profile-tamim-class {
  margin-inline-start: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-ink-2);
}
.wb-profile-tamim-row--boundary .wb-profile-tamim-class {
  color: var(--wb-warm);
}

/* ── Cipher per-form aggregation (lemma profile) ───────────────
   Six rows (mercy / truth / aaron / god + unanimous + refused),
   each a bar scaled to the lemma's form count. Same vocabulary
   as the basin charts elsewhere — Mercy and Truth are the two
   cherubim, Aaron is the accused, God is the judge.
*/
.wb-profile-cipher {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.wb-profile-cipher-row {
  display: grid;
  grid-template-columns: 5em 1fr 6em;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--wb-ink-2);
  line-height: 1.5;
}
.wb-profile-cipher-row--unanimous {
  color: var(--wb-ink);
  border-top: 1px dashed var(--wb-rule);
  padding-top: 6px;
  margin-top: 4px;
}
.wb-profile-cipher-row--refused {
  color: var(--wb-ink-2);
  font-style: italic;
}
.wb-profile-cipher-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-ink-2);
}
.wb-profile-cipher-bar {
  height: 8px;
  background: var(--wb-bg-3);
  border-radius: 2px;
  overflow: hidden;
}
.wb-profile-cipher-bar-fill {
  height: 100%;
  background: var(--wb-ink-2);
  transition: width 200ms ease;
}
.wb-profile-cipher-row--unanimous .wb-profile-cipher-bar-fill {
  background: var(--wb-warm);
}
.wb-profile-cipher-row--refused .wb-profile-cipher-bar-fill {
  background: var(--wb-ink-2);
  opacity: 0.4;
}
.wb-profile-cipher-n {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-2);
  text-align: end;
}

/* ── Key verses (chapter profile) ──────────────────────────────
   Three rows: opening / center (or near-center) / closing. Each
   row click-opens its verse in a new reader tab. The center row
   (◆) is highlighted; opening (◯) and closing (●) are paired.
*/
.wb-profile-key-verses {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.wb-profile-key-verse-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: var(--wb-bg-3);
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
}
.wb-profile-key-verse-row:hover {
  background: var(--wb-bg-2);
  border-color: var(--wb-ink-2);
}
.wb-profile-key-verse-glyph {
  font-size: 14px;
  color: var(--wb-ink-2);
  min-width: 1.2em;
  text-align: center;
}
.wb-profile-key-verse-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-ink-2);
  min-width: 7em;
}
.wb-profile-key-verse-ref {
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--wb-ink);
  min-width: 7em;
}
.wb-profile-key-verse-meta {
  font-size: 11px;
  color: var(--wb-ink-2);
  font-family: var(--rd-mono);
}
.wb-profile-key-verse-note {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--wb-ink-2);
  font-style: italic;
}

.wb-profile-phrase-chip {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: var(--wb-bg-3);
  font-family: var(--font-hebrew);
  font-size: 13px;
  color: var(--wb-ink);
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.wb-profile-phrase-chip:hover {
  background: color-mix(in srgb, var(--wb-warm) 18%, transparent);
  color: var(--wb-warm);
  border-color: var(--wb-warm);
}

/* Person link in verse meta — click → person profile tab. */
.wb-profile-person-link {
  color: var(--wb-warm);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 80ms ease;
}
.wb-profile-person-link:hover {
  border-bottom-color: var(--wb-warm);
}

/* Verse profile hero — Hebrew tokens flowing block, large + RTL.
   The verse itself dominates; the ref lives in the ScopeBar above. */
.pf-verse-hb {
  /* VP9 2b-3 — the rhythm knobs are vars: profile defaults here,
     reader values under .rd-verse-body (verse-more.css). */
  display: flex; flex-wrap: wrap; gap: var(--sv-word-gap, 12px);
  direction: rtl;
  font-family: var(--font-hebrew);
  font-size: var(--sv-hb-size, 36px);
  line-height: 1.6;
  color: var(--wb-ink);
  text-align: right;
  margin: 0 0 4px;
}

/* Halo — selected token's word-shape, inline between the Hebrew
   verse and the bands. Per CD: word-on-verse shows here as a
   small inline band, NOT as the full word panel in the rail. */
.pf-halo {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 12px;
  margin: 0 36px;
  padding: 10px 0;
  border-top: 1px solid var(--wb-rule);
  border-bottom: 1px solid var(--wb-rule);
}
.pf-halo-hbr {
  font-family: var(--font-hebrew);
  font-size: 22px;
  color: var(--wb-warm);
  direction: rtl;
  flex: 0 0 auto;
}
.pf-halo-meta {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  flex: 1 1 auto;
}
.pf-halo-acts {
  display: flex; gap: 12px;
  margin-inline-start: auto;
}
.pf-halo-btn {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--wb-warm);
  text-decoration: none;
  cursor: pointer;
}
.pf-halo-btn:hover { text-decoration: underline; }

/* Scope-locked aside (rail) — drop the centered card look, just
   a column of bands inside the rail. */
.wb-profile--with-aside .wb-profile-aside {
  /* Insets match the reader-hosted mini (hero 20px from the top,
     ~22.5px sides — measured both hosts, Scott 2026-07-30). The
     right pad runs 9px lighter because the aside's own scrollbar
     occupies the difference (scrollbar-gutter keeps it reserved
     when content doesn't overflow). */
  padding: 16px 9.5px 36px 18.5px;
  scrollbar-gutter: stable;
  flex-direction: column;
  gap: 0;
}
.wb-profile--with-aside .wb-profile-aside .wb-profile-section {
  padding: 14px 0 0;
  margin-top: 14px;
  border-top: 1px solid var(--wb-rule);
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  border-radius: 0;
}
.wb-profile--with-aside .wb-profile-aside .wb-profile-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Translation slot — one body, two arrows, pill row beneath.
   Per CD: single text shown by default, ←/→ walks alts.
   `width: 100%` + `min-width: 0` so the slot fills its container
   and its `1fr` column resolves to a useful width — without it,
   the grid collapses to min-content (the text cell becomes one
   character wide and Hebrew/English text wraps char-by-char). */
.pf-trans-slot {
  display: grid;
  /* One text column — the ‹ › arrows hang OUTSIDE the column in
     the page gutter (absolute), so the translation text and the
     chip row share the page column's left edge (the six-margins
     cleanup, 2026-07-13). Width cap comes from the shared column
     var --pf-col-w set on the hero children. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 4px 8px;
  margin-bottom: 4px;
  width: 100%;
  min-width: 0;
  position: relative;
}
.pf-trans-body {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  /* Explicit grid placement — when table mode hides the two
     arrow children, grid auto-flow would otherwise drop the body
     into column 1 (the 24px arrow track) instead of column 2
     (the 1fr text track). That's the real bug behind three
     rounds of CSS chasing: body sized to 24px → text wraps
     char-by-char into a vertical column. The slot is single-
     column now (arrows hang outside, absolute); pin to 1. */
  grid-column: 1;
  min-width: 0;
}
.pf-trans-tag {
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}
/* The source's own verse address, shown only where versification
   alignment re-filed it against the Hebrew key (KJV · 2:4 under
   Hebrew Hosea 2:6). Dimmer than the tag; not a link. */
.pf-trans-natv {
  opacity: 0.65;
  letter-spacing: 0.06em;
  text-transform: none;
}
.pf-trans-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--wb-ink);
}
.pf-trans-foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
/* Translation source chips — same rectangular chip language as
   the mini-profile / reader chips (rd-hl-chip: 2px radius, quiet
   outline). The language-family hue (Hebrew · Greek · Latin ·
   Aramaic · ours) moved from the old left-edge stripe INTO the
   chip itself — border + ink carry the family color at rest (the
   chip is its own legend), and the on-state fills with the SAME
   family tint instead of always-warm. */
.pf-trans-pill {
  --pf-fam: var(--wb-ink-3);
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid
    color-mix(in srgb, var(--pf-fam) 45%, var(--wb-rule));
  border-radius: 2px;
  background: transparent;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--pf-fam) 72%, var(--wb-ink-3));
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.pf-trans-pill:hover {
  border-color: var(--pf-fam);
  color: var(--pf-fam);
}
.pf-trans-pill--on {
  background: color-mix(in srgb, var(--pf-fam) 20%, transparent);
  color: color-mix(in srgb, var(--pf-fam) 85%, var(--wb-ink));
  border-color: var(--pf-fam);
}
/* Language-family hues. */
.pf-trans-pill--ours    { --pf-fam: var(--wb-warm, #c89b3c); }
.pf-trans-pill--hebrew  { --pf-fam: #5a87a8; }
/* Hebrew witness pills (qere · MAM · UXLC releases) — the edition
   family's warm gold; a witness reading this verse exactly as the
   record dims itself (still clickable — agreement is information). */
.pf-trans-pill--witness { --pf-fam: #a8925a; }
/* the en rendering-version pills (v1 · v2 · v3) */
.pf-trans-pill--version { --pf-fam: #5aa88f; }
/* the SELAH chip group (2026-09-02): one header replaces the
   repeated prefix; uniform 3-char pills keep a scannable grid */
/* verse number links to the verse mini profile (2026-09-02) */
.rd-vn { cursor: pointer; }
.rd-vn:hover { color: var(--wb-warm, currentColor); }

/* row-tag family ticks (2026-09-02): the selah- prefix is gone;
   the family reads from a thin color rail matching the chip hues */
.pf-trans-tag--selah   { border-left: 2px solid #6b87b8; padding-left: 6px; }
.pf-trans-tag--witness { border-left: 2px solid #a8925a; padding-left: 6px; }
.pf-trans-tag--version { border-left: 2px solid #5aa88f; padding-left: 6px; }
.pf-trans-tag--trad    { border-left: 2px solid var(--wb-rule, #444); padding-left: 6px; }

/* section running-heads in the study-header register (— STUDY):
   mono 9px, 0.26em tracking, warm tick */
.pf-trans-group-head {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wb-ink-3, currentColor);
  margin: 8px 0 2px;
}
.pf-trans-group-head::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--wb-warm, currentColor);
  flex: 0 0 auto;
}
.pf-trans-pill--grid {
  min-width: 3.2em;
  justify-content: center;
  text-align: center;
}
.pf-trans-pill--same    { opacity: 0.45; }
.pf-trans-text--witness {
  font-family: EzraSIL, NotoSerifHebrew, serif;
  font-size: 1.15em;
  line-height: 1.7;
}
/* witness row through the ONE verse renderer — the hero's token
   block scaled down to sit at TRANSLATION-ROW size (Scott,
   2026-09-02: 'make the non-dominant ones smaller to match the
   other langs'). --sv-hb-size is the hero token size var. */
.pf-trans-witness-block {
  --sv-hb-size: 17px;
  /* gaps shrink proportionally with the type (12px @ 36px ≈ 6px @ 17px) */
  --sv-word-gap: 6px;
  flex: 1;
  min-width: 0;
}
.pf-trans-witness-block .pf-verse-hb {
  line-height: 1.9;
}
/* the token box padding is the other unscaled px — hero reads
   4px side-padding at 36px; keep the same visual-gap ratio
   (gap + 2×padding ≈ 0.55em) at the 17px scale */
.pf-trans-witness-block .wb-profile-token {
  padding: 1px 2px;
}
.rd-translation-text--witness {
  font-family: EzraSIL, NotoSerifHebrew, serif;
  font-size: 1.1em;
  display: block;
  text-align: right;
}
.pf-trans-pill--greek   { --pf-fam: #6a7d4f; }
.pf-trans-pill--latin   { --pf-fam: #8a5e26; }
.pf-trans-pill--aramaic { --pf-fam: #7a4a8a; }
.pf-trans-pill--english { --pf-fam: var(--wb-ink-3); }

/* Three-pane profile (verse) — left rail | main | right rail.
   Left rail: peers-in-scope (pericope) + structure + walks.
   Right rail: scope-locked (cites/cited-by/halo).
   The middle column owns the canvas; both rails are quiet. */
.wb-profile--three-pane {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.wb-profile-rail-left {
  flex: 0 0 240px;
  border-right: 1px solid var(--wb-rule);
  background: var(--wb-bg-2);
  overflow-y: auto;
  padding: 16px 16px 36px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-2);
}
.wb-profile--three-pane .wb-profile-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  min-width: 0;
}
.wb-profile--three-pane .wb-profile-aside {
  flex: 0 0 280px;
  border-left: 1px solid var(--wb-rule);
  background: var(--wb-bg-2);
  overflow-y: auto;
  padding: 0;
}

.pf-rail-h {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
  margin: 14px 0 6px;
}
.pf-rail-h:first-child { margin-top: 0; }

.pf-pericope {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 4px;
}
.pf-pv {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 0;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--wb-ink-2);
  line-height: 1.05;
  transition: background 80ms ease, color 80ms ease;
  position: relative;
}
/* Enrichment indicators on the chapter's verse-grid chips —
   tiny dots in opposite corners so the same verse can carry both
   without crowding. Top-right = convergence hit; bottom-right =
   has at least one recognized predicate fact. Tooltips on the
   chip already name them; the dots are the at-a-glance scan.
*/
.pf-pv--conv-hit::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wb-warm, #c89b3c);
  opacity: 0.85;
}
.pf-pv--has-pred::before {
  content: "";
  position: absolute;
  bottom: 2px;
  inset-inline-end: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wb-warm);
  opacity: 0.6;
}
.pf-pv-num {
  font-variant-numeric: tabular-nums;
}
.pf-pv-cnt {
  font-family: var(--rd-mono);
  font-size: 8px;
  color: var(--wb-ink-3);
  font-variant-numeric: tabular-nums;
}
.pf-pv:hover { background: var(--wb-bg-3); color: var(--wb-ink); }
.pf-pv--here {
  background: color-mix(in srgb, var(--wb-warm) 22%, transparent);
  color: var(--wb-warm);
  font-weight: 500;
}
/* Active arrow-key cursor — distinct from --here. Inset ring,
   warm tint. Tracks ←/→ over the verse grid. */
.pf-pv--on {
  background: color-mix(in srgb, var(--wb-warm) 18%, transparent);
  color: var(--wb-warm);
  box-shadow: 0 0 0 1px var(--wb-warm) inset;
}
.pf-pv--more {
  font-style: italic;
  color: var(--wb-ink-4);
  cursor: default;
}
.pf-pv--more:hover { background: transparent; color: var(--wb-ink-4); }

.pf-struct {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 4px;
}
.pf-struct-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  font-size: 10.5px;
}
.pf-struct-row > span:first-child {
  color: var(--wb-ink-4);
  letter-spacing: 0.05em;
}

.pf-walk-row {
  display: flex; gap: 6px; align-items: baseline;
  padding: 2px 0;
}
.pf-walk-cap {
  font-style: italic;
  color: var(--wb-ink-4);
  font-size: 10px;
}

/* Profile mode-strip — pinned at the bottom of the main column,
   mirrors the reader's strip. */
.pf-strip-wrap {
  margin-top: auto;
  border-top: 1px solid var(--wb-rule);
  background: var(--wb-bg-2);
}
/* Edge-to-edge bleed inside aside-layout columns so the strip
   sits as a proper footer bar (matches the hero's horizontal
   bleed and cancels the column's bottom padding so there's no
   dead space below it). */
.wb-profile--with-aside .pf-strip-wrap,
.wb-profile--three-pane .pf-strip-wrap {
  align-self: stretch;
  margin: auto -24px -24px;
}
.pf-strip {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 24px;
  font-family: var(--rd-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pf-strip-section {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 2px;
  color: var(--wb-ink-3);
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease;
}
.pf-strip-section:hover { background: var(--wb-bg-3); }
.pf-strip-section--on {
  color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 14%, transparent);
}
.pf-strip-section--ghost {
  color: var(--wb-ink-4);
  cursor: default;
}
.pf-strip-section--ghost:hover { background: transparent; }
.pf-strip-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wb-ink-4);
}
.pf-strip-section--on .pf-strip-dot { background: var(--wb-warm); }
.pf-strip-spacer { flex: 1 1 auto; }
.pf-strip-name { letter-spacing: 0.18em; }

/* Unit-toggle on profile scope row — same vocabulary as the
   reader's spine toggle but smaller and inline. */
.pf-unit-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 4px 36px 0;
  padding: 2px 4px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: var(--wb-bg-2);
  width: fit-content;
}
.pf-unit-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-hebrew);
  font-size: 13px;
  line-height: 1;
  width: 22px; height: 18px;
  color: var(--wb-ink-3);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease, color 80ms ease;
}
.pf-unit-chip:hover {
  background: color-mix(in srgb, var(--wb-warm) 14%, transparent);
  color: var(--wb-warm);
}
.pf-unit-chip--on {
  background: color-mix(in srgb, var(--wb-warm) 24%, transparent);
  color: var(--wb-warm);
  box-shadow: inset 0 0 0 1px var(--wb-warm);
}

/* Active selection caption inside the verse-meta info bar — sits
   inline with the letters/tokens/GV-sum stats. */
.pf-meta-sel {
  display: inline-flex; align-items: baseline;
  gap: 4px;
  margin-inline-start: 12px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--wb-rule);
  color: var(--wb-warm);
}
.pf-meta-glyph {
  font-family: var(--font-hebrew);
  font-size: 12px;
}
.pf-meta-hb {
  font-family: var(--font-hebrew);
  font-size: 14px;
  color: var(--wb-warm);
}
.pf-meta-c {
  font-family: var(--rd-mono);
  font-size: 10.5px;
  color: var(--wb-ink-3);
}

/* OURS translation as per-token chips — same flow as the
   reader's per-token English glosses. Highlights sync with
   the verse-profile selected token / phrase. */
.pf-trans-text--ours {
  display: inline; line-height: 1.55;
}
.pf-trans-w {
  display: inline;
  padding: 0 1px;
  border-radius: 2px;
  transition: background-color 80ms ease, color 80ms ease;
  /* parallel selection surface — a hand, not a text caret */
  cursor: pointer;
  user-select: none;
}
.pf-trans-w--phrase {
  background: color-mix(in srgb, var(--wb-warm) 15%, transparent);
}
.pf-trans-w--sel {
  background: color-mix(in srgb, var(--wb-warm) 30%, transparent);
  color: var(--wb-warm);
  outline: 1px solid color-mix(in srgb, var(--wb-warm) 55%, transparent);
}
/* Diff highlight — token's OURS rendering doesn't appear in any
   other translation. Subtle warm underline so it composes with
   --sel and --phrase without conflict. */
.pf-trans-w--diff {
  text-decoration: underline wavy
    color-mix(in srgb, var(--wb-warm) 55%, transparent);
  text-underline-offset: 3px;
  color: color-mix(in srgb, var(--wb-warm) 80%, var(--wb-ink));
}
/* Diff toggle pill — separated from source pills by a subtle
   left margin and italic label. */
.pf-trans-pill--diff {
  font-style: italic;
  margin-right: 8px;
}
.pf-trans-pill--table {
  font-style: italic;
  margin-right: 4px;
}

/* Table mode — every source stacked vertically in the body. */
.pf-trans-table {
  display: flex; flex-direction: column;
  gap: 6px;
  width: 100%;
}
/* Grid (not flex) for the table row — `60px minmax(0,1fr)`
   template guarantees the tag stays compact and the text column
   fills the row width without collapsing. `minmax(0, 1fr)` is
   critical (vs plain `1fr`): plain `1fr` is shorthand for
   `minmax(auto, 1fr)`, which lets the cell grow but never
   shrink below its content's auto-size — and "auto" for inline
   text inside grid can collapse to ONE CHAR if the parent
   doesn't enforce a width. minmax(0, 1fr) breaks that floor. */
.pf-trans-table-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px dashed var(--wb-rule);
}
.pf-trans-table-row:first-child {
  border-top: 0;
}
/* Plain wrapping — no `overflow-wrap: anywhere` (that breaks
   between every character on narrow widths). Default word-wrap
   is what we want. */
.pf-trans-table-row .pf-trans-text,
.pf-trans-table-row .pf-trans-text--ours {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Scope-bar extras slot — inline content (e.g. unit-toggle) that
   sits between the breadcrumbs and the right-aligned meta. */
.pf-scope-extras {
  display: inline-flex; align-items: center;
  margin-inline-start: 12px;
}
.pf-unit-toggle--inline {
  margin: 0;
  padding: 1px 3px;
}
.pf-unit-toggle--inline .pf-unit-chip {
  width: 18px; height: 14px;
  font-size: 11px;
}

/* Active peer chip — used by the lemma profile's forms section
   to mark the currently-cursored form (←/→ walks). */
.rd-panel-peer--on {
  background: color-mix(in srgb, var(--wb-warm) 28%, transparent);
  color: var(--wb-warm);
  border-color: var(--wb-warm);
}

/* Letter-mode: highlight the token containing the active letter
   so the user sees roughly where they are in the verse. Same
   enclosure as morpheme/syllable (misc.css) — radius 3 with the
   shared box geometry (Scott, 2026-07-30). */
.wb-profile-token--letter {
  background: color-mix(in srgb, var(--wb-warm) 18%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--wb-warm) 60%, transparent);
  outline-offset: 0;
  border-radius: 3px;
}

/* Per-letter cluster — only used inside the active token in
   :letter mode. Cluster = base consonant + niqqud + accents,
   so the highlighted "letter" carries its vowel marks too. */
.pf-letter-cluster {
  display: inline;
  padding: var(--sv-cluster-pad, 0 1px);
  border-radius: 1px;
  transition: background 80ms ease, color 80ms ease;
  position: relative;
}
.pf-letter-cluster--on {
  background: color-mix(in srgb, var(--wb-warm) 36%, transparent);
  color: var(--wb-warm);
  outline: 1px solid var(--wb-warm);
}
/* Lit-segment (CD-09) — when an ELS-band row is hovered and this
   cluster's gidx is on the fiber. Soft hot glow + outline. */
.pf-letter-cluster--lit {
  outline: 1px solid var(--rd-hot);
  outline-offset: 0;
  box-shadow: 0 0 6px color-mix(in srgb, var(--rd-hot) 50%, transparent);
}
/* The את / ring channel — a lens outline on the conditioned canvas. */
.pf-letter-cluster--ring {
  outline: 1px solid var(--wb-warm, #e8c87a);
  outline-offset: 1px;
  border-radius: 2px;
}
/* Inline density label — tiny mono number under each letter,
   small enough not to push the Hebrew baseline around. The
   absolutely-positioned subscript style keeps the Hebrew flow
   intact while exposing the per-letter ELS coverage count. */
.pf-letter-cluster-d {
  display: inline-block;
  font-family: var(--rd-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--wb-warm, #c89b3c);
  letter-spacing: 0.02em;
  margin-inline-start: 2px;
  vertical-align: sub;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  opacity: 0.85;
}

/* Clickable scope-bar breadcrumb (e.g. book name → book profile). */
.pf-crumb--link {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: color 80ms ease, border-color 80ms ease;
}
.pf-crumb--link:hover {
  color: var(--wb-warm);
  border-bottom-color: var(--wb-warm);
}

/* Spine action chip — small ↗ link next to spine items that
   promotes to a profile tab (e.g. book name → book profile). */
.rd-spine-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 14px;
  margin-inline-start: 4px;
  font-size: 10px;
  color: var(--rd-ink-3);
  border: 1px solid var(--rd-rule);
  border-radius: 2px;
  background: var(--rd-bg-2);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.rd-spine-action:hover {
  background: color-mix(in srgb, var(--rd-hot) 18%, transparent);
  color: var(--rd-warm);
  border-color: var(--rd-hot);
}

/* Home collections row — entry points to collection profiles. */
.wb-home-collections {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 4px;
}
.wb-home-collection-pill {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--wb-rule);
  border-radius: 999px;
  font-size: 11px;
  color: var(--wb-ink-2);
  background: var(--wb-bg-2);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.04em;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.wb-home-collection-pill:hover {
  background: color-mix(in srgb, var(--wb-warm) 18%, transparent);
  color: var(--wb-warm);
  border-color: var(--wb-warm);
}