/* Selah workbench — mini-profile hero + layers
   Hero actions, pin rail, layer rows body.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* ── Hero actions ──
   Layout cluster on the right of the mini-profile hero: ? (help)
   and ↗ (open as tab). */
.rd-word-mini .rd-mw-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Boxless action glyphs — no border, no fixed-size frame. Just
   the glyph, hoverable, warm on hover / active. Vertical rhythm
   stays tight because the buttons have no chrome to inflate the
   head row's height. */
.rd-word-mini .rd-mw-help {
  font-family: var(--rd-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--rd-ink-3, var(--wb-ink-3));
  cursor: help;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transition: color 80ms ease, border-color 120ms ease;
}

/* The `?` wears the app's standard circle (`.rd-help-trigger`);
   the yalkut star shares the 22px box so the two corner glyphs
   sit at one size, but stays a bare star — a circled star reads
   as a different control. */
.rd-word-mini .rd-mw-help:not(.yk-star) {
  border: 1px solid var(--rd-rule);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 500;
}

/* The star was disappearing: keeps/star dims the unkept state to
   0.45 inline and ink-3 finished it off. In this corner the ☆/★
   glyph alone carries kept-vs-not — full strength, one step up
   the ink scale, sized to hold its own beside the circled ?. */
.rd-word-mini .rd-mw-help.yk-star {
  font-size: 32px;
  color: var(--rd-ink-2, var(--wb-ink-2));
  opacity: 1 !important;
  overflow: visible;
  /* optical alignment against the ?'s circle center */
  position: relative;
  top: -3px;
}

.rd-word-mini .rd-mw-help.yk-star:hover {
  color: var(--rd-warm, var(--wb-warm));
}

.rd-word-mini .rd-mw-help:hover,
.rd-word-mini .rd-mw-help--on {
  color: var(--rd-warm, var(--wb-warm));
  border-color: var(--rd-warm, var(--wb-warm));
}

/* Help popover — drops just below the hero, lists every visible
   section's label + explanation. Click × or the ? button again
   to close. */
.rd-word-mini .rd-mw-help-popover {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--rd-bg-2, var(--wb-bg-2));
  border: 1px solid var(--rd-ink-4, var(--wb-rule));
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rd-ink-2, var(--wb-ink-2));
}

.rd-word-mini .rd-mw-help-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--rd-ink-4, var(--wb-rule));
}

.rd-word-mini .rd-mw-help-h {
  font-family: var(--rd-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rd-ink-3, var(--wb-ink-3));
}

.rd-word-mini .rd-mw-help-x {
  font-size: 14px;
  line-height: 1;
  color: var(--rd-ink-3, var(--wb-ink-3));
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
}

.rd-word-mini .rd-mw-help-x:hover {
  color: var(--rd-warm, var(--wb-warm));
}

/* Help-popover body — paragraph-style entries. Label sits inline
   at the start of each paragraph (mono caps), then an em-dash, then
   the explanation. Full width; no narrow column eating the room. */
.rd-word-mini .rd-mw-help-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rd-word-mini .rd-mw-help-row {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--rd-ink-3, var(--wb-ink-3));
}

.rd-word-mini .rd-mw-help-label {
  font-family: var(--rd-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rd-ink, var(--wb-ink));
  font-weight: 500;
}

.rd-word-mini .rd-mw-help-info {
  font-size: 11px;
  color: var(--rd-ink-3, var(--wb-ink-3));
}

/* Gematria — factorization + flavors comma-run */
.rd-word-mini .rd-mw-gem {
  font-size: 14px;
  color: var(--rd-warm);
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.rd-word-mini .rd-mw-flavors {
  color: var(--rd-ink-2);
  font-size: 10px;
}
.rd-word-mini .rd-mw-flavors > span { cursor: help; }
.rd-word-mini .rd-mw-dim {
  color: var(--rd-ink-3);
  font-style: italic;
}

/* Lemma + root — one Hebrew line + one meta line */
.rd-word-mini .rd-mw-lemma {
  color: var(--rd-ink-2);
}
.rd-word-mini .rd-mw-lemma b {
  color: var(--rd-ink);
  font-family: var(--font-hebrew);
  font-size: 15px;
  font-weight: 400;
}

/* Concordance — comma-separated refs, hover underline */
.rd-word-mini .rd-mw-conc {
  color: var(--rd-ink-2);
}
.rd-word-mini .rd-mw-conc-ref {
  cursor: pointer;
  transition: color 80ms ease;
}
.rd-word-mini .rd-mw-conc-ref:hover {
  color: var(--rd-warm);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* By canon — inline bars, click to jump */
.rd-word-mini .rd-mw-canon {
  display: flex; flex-direction: column; gap: 3px;
  color: var(--rd-ink-2);
}
.rd-word-mini .rd-mw-canon-row {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  user-select: none;
}
.rd-word-mini .rd-mw-canon-row:hover .rd-mw-canon-bar > span { opacity: 1; }
.rd-word-mini .rd-mw-canon-row:hover .rd-mw-canon-name { color: var(--rd-warm); }
.rd-word-mini .rd-mw-canon-name {
  width: 60px;
  font-size: 10px;
  color: var(--rd-ink-2);
  transition: color 80ms ease;
}
.rd-word-mini .rd-mw-canon-bar {
  flex: 1; max-width: 140px; height: 8px;
  background: var(--rd-bg-2);
  border-radius: 1px;
  overflow: hidden;
}
.rd-word-mini .rd-mw-canon-bar > span {
  display: block; height: 100%;
  background: var(--rd-warm);
  opacity: 0.7;
  transition: opacity 80ms ease;
}
.rd-word-mini .rd-mw-canon-c {
  width: 28px;
  text-align: right;
  font-size: 10px;
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
}

/* Related — one inline line with click targets, indented detail */
.rd-word-mini .rd-mw-related {
  font-size: 11px;
}
.rd-word-mini .rd-mw-related-item {
  cursor: pointer;
  transition: color 80ms ease;
  user-select: none;
}
.rd-word-mini .rd-mw-related-item:hover { color: var(--rd-warm); }
.rd-word-mini .rd-mw-related-item b {
  color: var(--rd-warm);
  font-weight: 500;
}
.rd-word-mini .rd-mw-related-detail {
  margin-top: 8px;
  padding: 6px 0 6px 10px;
  border-left: 1px solid var(--rd-rule);
  color: var(--rd-ink-2);
}

/* Peer list — tabular stack, mirrors the root-family layout on
   the full word profile (.rd-panel-rf-* classes). Each peer is
   a clickable row with rank / Hebrew / gloss / frequency columns
   so the same-root / lemma-family / anagram / same-gv sections
   all read top-to-bottom and feel consistent across surfaces. */
.rd-word-mini .rd-mw-peer-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
  line-height: normal;
  /* Claw back most of the panel body's 18px padding-left so
     tabular rows sit tight against the seam. The peer-list
     rows are dense columnar data, not prose — they don't need
     the same left runway that the layer rows do. */
  margin-left: -16px;
}
.rd-word-mini .rd-mw-peer-list::-webkit-scrollbar { width: 6px; }
.rd-word-mini .rd-mw-peer-list::-webkit-scrollbar-thumb {
  background: var(--rd-rule);
  border-radius: 3px;
}
.rd-word-mini .rd-mw-peer-row {
  font: inherit;
  display: grid;
  /* `auto auto 1fr auto` — rank, hb, gloss all pack their
     natural width on the left; the 1fr spacer between gloss
     and freq eats leftover space so freq (right-anchored on
     col 4) stays hard-right and everything else clusters
     tight. This replaces the old `22px 1fr auto auto` which
     put a big empty 1fr as col 2 — the Hebrew's right-aligned
     RTL text ended up floating on the right of that huge
     column with a lot of blank space to its left. */
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  padding: 3px 6px 3px 4px;
  cursor: pointer;
  color: var(--rd-ink-2);
  text-align: left;
  transition: color 0.08s ease, border-color 0.08s ease,
              background 0.08s ease;
}
.rd-word-mini .rd-mw-peer-row:hover {
  color: var(--rd-ink);
  border-left-color: var(--rd-ink-3);
}
.rd-word-mini .rd-mw-peer-rank {
  font-family: var(--rd-mono);
  font-size: 9px;
  color: var(--rd-ink-3);
  /* Left-align + small min-width so single-digit ranks sit
     tight against the row's left edge instead of floating
     right in a 22px right-aligned cell. Multi-digit ranks
     (up to "999") still fit. */
  text-align: left;
  min-width: 18px;
}
.rd-word-mini .rd-mw-peer-hb {
  font-family: var(--font-hebrew);
  font-size: 15px;
  color: var(--rd-ink);
  direction: rtl;
  text-align: right;
}
.rd-word-mini .rd-mw-peer-row:hover .rd-mw-peer-hb {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-peer-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 11px;
  color: var(--rd-ink-3);
}
.rd-word-mini .rd-mw-peer-freq {
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--rd-warm);
  min-width: 36px;
  text-align: right;
}

/* Foot — walk-hint only (affordances removed Phase 1) */
.rd-word-mini .rd-mw-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rd-rule);
  display: flex;
  justify-content: flex-end;
}
.rd-word-mini .rd-mw-walk {
  font-size: 9px;
  color: var(--rd-ink-3);
  letter-spacing: 0.05em;
}

/* ─────────────────────────────────────────────────────────────
   Word mini · the pin (#147, mockup 19)
   Designer artifact: /mockups/wf/approaches/19-word-mini-pin.jsx

   Each section is a one-line Layer: [pin-glyph] [label] [value]
   [right-action] [expand-arrow]. Tap the pin (◇ → ◆) and the
   layer docks into a fixed rail above the hero — the same
   compact value renders in both places.
   ───────────────────────────────────────────────────────────── */

/* ── Pin rail (above hero) ─────────────────────────────────── */

.rd-word-mini .rd-mw-rail {
  border-bottom: 1px solid var(--rd-warm);
  background: color-mix(in srgb, var(--rd-bg-2) 60%, transparent);
  margin: -2px -4px 10px;
  border-radius: 3px;
}
.rd-word-mini .rd-mw-rail-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--rd-rule);
  font-size: 11px;
}
.rd-word-mini .rd-mw-rail-row:last-child {
  border-bottom: none;
}
.rd-word-mini .rd-mw-rail-lbl {
  flex: 0 0 62px;
  font-size: 9px;
  color: var(--rd-ink-3);
  /* Same lowercase → small-caps normalization as `.rd-mw-layer-lbl`
     so pinned-rail labels match body labels regardless of the
     i18n source case. */
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.rd-word-mini .rd-mw-rail-val {
  flex: 1;
  color: var(--rd-warm);
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hebrew in rail values keeps its serif face */
.rd-word-mini .rd-mw-rail-val b[dir] {
  font-family: var(--font-hebrew);
  font-size: 13px;
  font-weight: 400;
  color: var(--rd-ink);
}
.rd-word-mini .rd-mw-rail-pin {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--rd-warm);
  cursor: pointer;
  user-select: none;
}
.rd-word-mini .rd-mw-rail-pin:hover { color: var(--rd-hot); }

/* ── Section-visibility chip row ──
   Sits between the hero (translit line) and the body (layer
   rows). One chip per data-available section. Ableton-tight
   rectangles matching the reader-highlight chips: outline at
   rest, warm-tint fill when armed, dashed outline when hidden.

   No border-top of its own — the chip row reads as a
   "control strip attached to the hero"; the body's border-top
   below provides the divider between chips and rows. */
.rd-word-mini .rd-mw-sect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  row-gap: 3px;
  margin-top: 8px;
}
.rd-word-mini .rd-mw-sect-chip {
  /* Uniform 3px padding on all sides — the small-caps labels are
     all the same height so uneven padding read as arbitrary. */
  padding: 3px;
  border: 1px solid var(--rd-warm);
  border-radius: 2px;
  background: color-mix(in srgb, var(--rd-warm) 15%, transparent);
  color: var(--rd-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;
}
/* Off-state — section hidden. Same accent hue but no fill,
   dashed outline, dimmed. */
.rd-word-mini .rd-mw-sect-chip.off {
  background: transparent;
  border-style: dashed;
  opacity: 0.55;
}
.rd-word-mini .rd-mw-sect-chip:hover { border-color: var(--rd-hot); }

/* ── Body (Layer rows) ──────────────────────────────────────── */

.rd-word-mini .rd-mw-body {
  /* No border-top — the section chip row is a visible enough
     divider between hero and body on its own. */
  margin-top: 8px;
  transition: opacity 0.12s ease;
}
/* Anti-flicker hold: while a new word's data is in flight the body
   keeps the previous word's sections, dimmed — one swap when fresh
   data lands instead of a shrink→grow→append cascade. */
.rd-word-mini .rd-mw-body--turning {
  opacity: 0.55;
}
.rd-word-mini .rd-mw-layer {
  border-bottom: 1px solid var(--rd-rule);
}
.rd-word-mini .rd-mw-layer:last-child {
  border-bottom: none;
}
.rd-word-mini .rd-mw-layer-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 2px;
  font-size: 11px;
}
.rd-word-mini .rd-mw-pin {
  flex: 0 0 10px;
  font-size: 10px;
  color: var(--rd-ink-4);
  cursor: pointer;
  user-select: none;
  transition: color 80ms ease;
}
.rd-word-mini .rd-mw-pin:hover { color: var(--rd-warm); }
.rd-word-mini .rd-mw-layer--pinned .rd-mw-pin {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-layer-lbl {
  flex: 0 0 64px;
  font-size: 9px;
  color: var(--rd-ink-3);
  /* Force lowercase THEN small-caps so labels render at the same
     visual size no matter whether the i18n source string is
     "LEMMA" (uppercase) or "gematria" (lowercase). Without the
     `text-transform`, uppercase source strings ignore small-caps
     and render at full 9px — visibly bigger than their
     lowercase-source peers. */
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  user-select: none;
}
.rd-word-mini .rd-mw-layer--expandable .rd-mw-layer-lbl {
  cursor: pointer;
}
.rd-word-mini .rd-mw-layer--expandable:hover .rd-mw-layer-lbl,
.rd-word-mini .rd-mw-layer--expandable:hover .rd-mw-layer-arr {
  color: var(--rd-warm);
}
/* Clickable rows (LEMMA / ROOT) — whole row acts as a link.
   Hover warms the label + value; no separate ↗ button. */
.rd-word-mini .rd-mw-layer--clickable .rd-mw-layer-lbl,
.rd-word-mini .rd-mw-layer--clickable .rd-mw-layer-val {
  cursor: pointer;
}
.rd-word-mini .rd-mw-layer--clickable:hover .rd-mw-layer-lbl,
.rd-word-mini .rd-mw-layer--clickable:hover .rd-mw-layer-val {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-layer--clickable:hover .rd-mw-layer-val b {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-layer-val {
  flex: 1;
  color: var(--rd-ink-2);
  min-width: 0;
}
.rd-word-mini .rd-mw-layer-val b {
  color: var(--rd-ink);
  font-weight: 500;
}
.rd-word-mini .rd-mw-layer-val b[dir] {
  font-family: var(--font-hebrew);
  font-size: 14px;
  font-weight: 400;
}
.rd-word-mini .rd-mw-layer-arr {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--rd-ink-3);
  cursor: pointer;
  user-select: none;
  transition: color 80ms ease;
}
.rd-word-mini .rd-mw-layer-arr:hover { color: var(--rd-warm); }
.rd-word-mini .rd-mw-layer-detail {
  /* Near-flat — the 22px value-column indent burned panel width
     (Scott, 2026-09-14); a 4px whisper keeps the detail readable
     as the row's child without the real-estate tax. */
  padding: 0 0 8px 4px;
}
/* The rack-body's accent rule + indent inside a mini detail
   double-nested the inset — flatten it here too (both minis). */
.rd-word-mini .rd-mw-layer-detail .rd-rack-body {
  padding-left: 4px;
  margin-left: 0;
}
/* POSITION reads as a table of scopes — the generic detail indent
   stacked on its own key column pushed values past half the panel
   (Scott, 2026-07-13: still too much). Flatten for this section. */
.rd-word-mini .rd-mw-layer[data-section="word.position"] .rd-mw-layer-detail {
  padding-left: 4px;
  color: var(--rd-ink-2);
  line-height: 1.7;
}
/* Layer-detail no longer needs special inline-peer overrides —
   .rd-mw-peer-list (tabular) supplies its own font/color rules
   that read correctly inside .rd-mw-layer-detail. */

/* Inline tag/id/canon value-runs — overrides for nicer wrap */
.rd-word-mini .rd-mw-tags-inline {
  font-style: italic;
  color: var(--rd-ink-3);
}
.rd-word-mini .rd-mw-tags-inline .rd-mw-tag--sig {
  color: var(--rd-warm);
  font-style: normal;
}
.rd-word-mini .rd-mw-id-inline {
  color: var(--rd-ink-2);
}
.rd-word-mini .rd-mw-canon-inline {
  display: inline-flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
}
.rd-word-mini .rd-mw-canon-inline .rd-mw-canon-row {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
}
.rd-word-mini .rd-mw-canon-inline .rd-mw-canon-name {
  width: auto;
  font-size: 10px;
}
.rd-word-mini .rd-mw-canon-inline .rd-mw-canon-bar {
  width: 50px; max-width: 50px; flex: 0 0 50px;
}

/* ─────────────────────────────────────────────────────────────
   Word mini · by-book heatmap (#145 + #147 follow-on, mockup 18 ⭐)

   The 39-bar canon-tinted distribution. Compact value is one
   line ("22 books · 247 total"); expand drops the bar list,
   sorted by count, clickable per row → first occurrence.
   ───────────────────────────────────────────────────────────── */

.rd-word-mini .rd-mw-by-book {
  display: flex; flex-direction: column; gap: 2px;
}
.rd-word-mini .rd-mw-by-book-row {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-size: 10px;
  padding: 1px 0;
  user-select: none;
}
.rd-word-mini .rd-mw-by-book-row:hover .rd-mw-by-book-name {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-by-book-row:hover .rd-mw-by-book-bar > span {
  opacity: 1;
}
.rd-word-mini .rd-mw-by-book-name {
  flex: 0 0 92px;
  color: var(--rd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 80ms ease;
}
.rd-word-mini .rd-mw-by-book-bar {
  flex: 1; max-width: 160px;
  height: 8px;
  background: var(--rd-bg-2);
  border-radius: 1px;
  overflow: hidden;
}
.rd-word-mini .rd-mw-by-book-bar > span {
  display: block; height: 100%;
  opacity: 0.7;
  transition: opacity 80ms ease;
}
/* Canon tints — match the by-canon mini's family + Selah's
   reader palette: torah warm amber, neviim mint, ketuvim teal. */
.rd-word-mini .rd-mw-by-book-bar--torah > span   { background: var(--rd-warm); }
.rd-word-mini .rd-mw-by-book-bar--neviim > span  { background: var(--rd-fixed); }
.rd-word-mini .rd-mw-by-book-bar--ketuvim > span { background: var(--rd-cool); }

.rd-word-mini .rd-mw-by-book-c {
  flex: 0 0 32px;
  text-align: right;
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
}

/* By-collection — 6 rows including 3 main canons + minor-prophets +
   megillot + tanakh-total. Vertical list so each row reads. */
.rd-word-mini .rd-mw-coll-inline {
  display: flex; flex-direction: column; gap: 2px;
}
.rd-word-mini .rd-mw-coll-inline .rd-mw-canon-row {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.rd-word-mini .rd-mw-coll-inline .rd-mw-canon-name {
  width: 92px; flex: 0 0 92px;
  font-size: 10px;
}
.rd-word-mini .rd-mw-coll-inline .rd-mw-canon-bar {
  flex: 1; max-width: 140px;
}

/* ─────────────────────────────────────────────────────────────
   Word mini · in-book viewer (#148)
   Designer pattern: Scott 2026-06-21 — single-select on book;
   below the heatmap a tight scrollable viewer renders that
   book's occurrences, each with Hebrew + Selah-EN twin-
   highlighted at the matched token. Mirrors the word-page
   aside's verse-text-block pattern.
   ───────────────────────────────────────────────────────────── */

/* Selection marker in the by-book heatmap row */
.rd-word-mini .rd-mw-by-book-sel {
  flex: 0 0 12px;
  font-size: 10px;
  color: var(--rd-ink-4);
  text-align: center;
  user-select: none;
}
.rd-word-mini .rd-mw-by-book-row--selected .rd-mw-by-book-sel {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-by-book-row--selected {
  background: color-mix(in srgb, var(--rd-warm) 8%, transparent);
}
.rd-word-mini .rd-mw-by-book-row--selected .rd-mw-by-book-name {
  color: var(--rd-warm);
}

/* The viewer block itself — sits below the heatmap, has its own
   max-height + internal scroll so a high-frequency book doesn't
   blow out the panel. */
/* Histogram filter scroll panel — the collection+book bars scroll
   in their own box, separate from the verses viewer below (Scott,
   2026-07-13). */
.rd-mw-freq-scroll {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.rd-mw-freq-scroll::-webkit-scrollbar { width: 6px; }
.rd-mw-freq-scroll::-webkit-scrollbar-thumb {
  background: var(--rd-rule);
  border-radius: 3px;
}

.rd-mw-vw {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--rd-rule, var(--wb-rule));
}
.rd-mw-vw-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  color: var(--rd-ink-3, var(--wb-ink-3));
}
.rd-mw-vw-head-book {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--rd-ink-2, var(--wb-ink-2));
}
.rd-mw-vw-list {
  display: flex; flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.rd-mw-vw-list::-webkit-scrollbar { width: 6px; }
.rd-mw-vw-list::-webkit-scrollbar-thumb {
  background: var(--rd-rule, var(--wb-rule));
  border-radius: 3px;
}

/* Each occurrence row — ref above the twin-highlighted block */
.rd-mw-vw-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--rd-rule, var(--wb-rule));
}
.rd-mw-vw-row:last-child { border-bottom: none; }
.rd-mw-vw-ref {
  font-size: 9px;
  color: var(--rd-ink-3, var(--wb-ink-3));
  letter-spacing: 0.04em;
  font-variant: small-caps;
  cursor: pointer;
  user-select: none;
  margin-bottom: 2px;
}
.rd-mw-vw-ref:hover {
  color: var(--rd-warm, var(--wb-warm));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hebrew (RTL, token-by-token, matched token lit) — uses --rd-*
   inside the reader stage; falls back to --wb-* in the profile
   stage (Explore drill) where rd-* vars aren't scoped. */
.rd-mw-vw-hb {
  direction: rtl;
  font-family: var(--font-hebrew);
  font-size: 15px;
  line-height: 1.55;
  color: var(--rd-ink, var(--wb-ink));
  margin-bottom: 2px;
}
.rd-mw-vw-hb-w {
  display: inline-block;
  padding: 0 2px;
}
.rd-mw-vw-hb-w--lit {
  background: color-mix(in srgb, var(--rd-warm, var(--wb-warm)) 24%, transparent);
  color: var(--rd-warm, var(--wb-warm));
  outline: 1px solid var(--rd-warm, var(--wb-warm));
  border-radius: 2px;
}
/* Edition lens — a token whose surface differs from the record
   (dashed: a reading under a lens, not the ground). */
.rd-mw-vw-hb-w--ed {
  outline: 1px dashed var(--rd-accent, var(--wb-accent));
  border-radius: 2px;
  cursor: help;
}

/* Selah-EN (LTR, word-aligned, matched token lit) */
.rd-mw-vw-en {
  font-family: var(--rd-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--rd-ink-2, var(--wb-ink-2));
}
.rd-mw-vw-en-w {
  display: inline-block;
  margin-right: 4px;
}
.rd-mw-vw-en-w--lit {
  color: var(--rd-warm, var(--wb-warm));
  font-weight: 500;
  background: color-mix(in srgb, var(--rd-warm, var(--wb-warm)) 14%, transparent);
  padding: 0 3px;
  border-radius: 2px;
}

.rd-mw-vw-more {
  margin-top: 6px;
  padding: 6px 0;
  font-size: 10px;
  color: var(--rd-ink-3, var(--wb-ink-3));
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   Word mini · frequency (merged collection + book, #148)

   Each row is ONE rectangle (matches the word-profile
   CLOSED-IN / BOOK lists Scott referenced). Label is overlaid
   on the bar; canon color is a thin vertical stripe on the
   left of the row, always shown so the row's canon affiliation
   reads at a glance. Selection = warm row outline + brighter
   bar fill. The whole row is the click target.
   ───────────────────────────────────────────────────────────── */

.rd-word-mini .rd-mw-canon-legend {
  display: flex; gap: 10px;
  margin-bottom: 8px;
  font-size: 9px;
  color: var(--rd-ink-3);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.rd-word-mini .rd-mw-canon-legend-item {
  display: inline-flex; align-items: center; gap: 2px;
}
.rd-word-mini .rd-mw-canon-legend-item--torah   { color: var(--rd-warm); }
.rd-word-mini .rd-mw-canon-legend-item--neviim  { color: var(--rd-fixed); }
.rd-word-mini .rd-mw-canon-legend-item--ketuvim { color: var(--rd-cool); }

.rd-word-mini .rd-mw-freq-group {
  margin-bottom: 8px;
}
.rd-word-mini .rd-mw-freq-group-h {
  font-size: 9px;
  color: var(--rd-ink-4);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  margin: 6px 0 4px;
}

/* Row: relative positioning hosts the absolute stripe + bar fill.
   The body sits above them via z-index. */
.rd-word-mini .rd-mw-freq-row {
  position: relative;
  height: 22px;
  margin-bottom: 1px;
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  user-select: none;
}

/* Canon stripe — thin vertical on the left, always shown. The
   row's canon affiliation reads at a glance. Each var carries
   a workbench-scope fallback so the stripes render in panel
   context (where rd-* aren't defined). */
.rd-word-mini .rd-mw-freq-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rd-rule, var(--wb-rule));
  z-index: 1;
}
.rd-word-mini .rd-mw-freq-row--canon-torah   .rd-mw-freq-stripe { background: var(--rd-warm,  var(--wb-warm));  }
.rd-word-mini .rd-mw-freq-row--canon-neviim  .rd-mw-freq-stripe { background: var(--rd-fixed, var(--wb-mint, #7fd5b8)); }
.rd-word-mini .rd-mw-freq-row--canon-ketuvim .rd-mw-freq-stripe { background: var(--rd-cool,  var(--wb-cyan));  }
/* Tanakh (collection: 'all') gets a 3-band gradient stripe. */
.rd-word-mini .rd-mw-freq-row--canon-all .rd-mw-freq-stripe {
  background: linear-gradient(180deg,
    var(--rd-warm,  var(--wb-warm))  0%,
    var(--rd-warm,  var(--wb-warm))  33%,
    var(--rd-fixed, var(--wb-mint, #7fd5b8)) 33%,
    var(--rd-fixed, var(--wb-mint, #7fd5b8)) 66%,
    var(--rd-cool,  var(--wb-cyan))  66%,
    var(--rd-cool,  var(--wb-cyan))  100%);
}

/* Bar fill — width = count / scale-max %. Sits behind the body.
   The `--rd-bg-3` reader variable is scoped to `.wb-stage--reader`
   only; the word mini-profile lives in the PANEL (workbench
   scope) where rd-* is undefined → background fell through to
   `transparent` and the bars disappeared. Fallback to the
   workbench-side `--wb-bg-3` keeps the bar visible in both
   stage contexts; same for the warm-tint mix-base. */
.rd-word-mini .rd-mw-freq-bar {
  position: absolute;
  left: 3px; top: 0; bottom: 0;
  background: var(--rd-bg-3, var(--wb-bg-3));
  z-index: 0;
  transition: background 80ms ease;
}
.rd-word-mini .rd-mw-freq-row:hover .rd-mw-freq-bar {
  background: color-mix(in srgb,
                        var(--rd-warm, var(--wb-warm)) 12%,
                        var(--rd-bg-3, var(--wb-bg-3)));
}
.rd-word-mini .rd-mw-freq-row--selected .rd-mw-freq-bar {
  background: color-mix(in srgb,
                        var(--rd-warm, var(--wb-warm)) 22%,
                        var(--rd-bg-3, var(--wb-bg-3)));
}

/* Body — label + count on top of bar; full row width, padded. */
.rd-word-mini .rd-mw-freq-body {
  position: relative;
  z-index: 2;
  display: flex; align-items: center;
  height: 100%;
  padding: 0 8px 0 10px;
  font-size: 10px;
}
.rd-word-mini .rd-mw-freq-name {
  flex: 1;
  color: var(--rd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-word-mini .rd-mw-freq-row:hover .rd-mw-freq-name,
.rd-word-mini .rd-mw-freq-row--selected .rd-mw-freq-name {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-freq-n {
  flex: 0 0 auto;
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Selected outline — subtle warm border so the row is clearly
   the current selection (the brighter bar already signals it,
   the outline confirms). */
.rd-word-mini .rd-mw-freq-row--selected {
  outline: 1px solid color-mix(in srgb, var(--rd-warm) 60%, transparent);
  outline-offset: -1px;
}


/* The 👓 reader door in the word-mini corner (Scott, 2026-09-15) —
   two-class bump beats the earlier `.rd-mw-help:not(.yk-star)`
   circle rule at equal specificity by cascade order (the
   explore-drill lesson): bare glasses, no ring, sized between the
   circled ? and the star. */
.rd-word-mini .rd-mw-help.rd-reader-glasses {
  border: none;
  border-radius: 0;
  font-size: 15px;
  background: transparent;
  cursor: pointer;
}

/* Infinite-scroll foot of an open factor list (2026-09-18) — must have
   height for IntersectionObserver to see it. */
.rd-mw-page-sentinel { height: 1px; }