/* Selah workbench — home page + selah docs
   Room-grid + markdown-renderer typography.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* ── Home page room-grid (ontology v1.4) ──────────────────────────
   Replaces the old flat .wb-home-grid with 5 sections of named rooms
   (Act · Enter by unit · Named · Topics · Meta). Section headers are
   small + dim — readers perceive grouping by spacing + label as
   a quiet nudge, not a banner. */

.wb-home-rooms {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wb-home-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wb-home-section-h {
  font-size: 9px;
  color: var(--wb-ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-left: 2px;
}
.wb-home-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.wb-home-section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wb-home-trust-pill-sub {
  font-size: 9px;
  color: var(--wb-ink-3);
  white-space: nowrap;
}

/* Stub tiles — destination not yet wired. Dimmed + non-clickable
   cursor; tooltip says 'coming soon'. The room exists in the
   ontology and gets a stamped placeholder; once its data layer
   lands, the dim treatment lifts and the tile becomes clickable. */
.wb-home-cell--stub {
  opacity: 0.55;
  filter: saturate(0.5);
}
.wb-home-cell--stub:hover {
  opacity: 0.65;
}

/* Tile hover (non-stub) — subtle lift via background-color shift +
   glyph brightening. Honors the existing wb-home-cell base style. */
.wb-home-cell[role="button"]:hover {
  background: var(--wb-bg-3, #14202a);
}
.wb-home-cell[role="button"]:hover .wb-home-cell-glyph {
  color: var(--wb-warm);
}

/* ── Selah Docs renderer (#92) ────────────────────────────────────
   Themed markdown rendering for `docs/*.md`. The substrate that
   serves every Reference / Methodology / Findings / Blog page in
   the workbench. Same parser; per-doc theming comes from the
   frontmatter (tier badge, named-place subtitle, voice). */

.wb-stage--doc {
  padding: 10px 32px 36px;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--wb-ink);
  /* The parent .wb-stage uses overflow: hidden so the home grid +
     reader columns can manage their own scroll. The doc stage IS a
     scroll surface — single long column with max-width centered. */
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  box-sizing: border-box;
}
.wb-stage--doc > * {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Header strip — tier badge + voice + status. Quietly above the title.
   Borderless so the title-block's rule is the only horizontal line in
   the header — fewer rules, more density. */
.wb-doc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  letter-spacing: 0.05em;
}
.wb-doc-tier {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--wb-bg-4);
  color: var(--wb-ink);
  font-weight: 600;
}
.wb-doc-tier--t1 { background: var(--wb-mint); color: var(--wb-bg, #0a0f15); }
.wb-doc-tier--t2 { background: var(--wb-cyan); color: var(--wb-bg, #0a0f15); }
.wb-doc-tier--t3 { background: var(--wb-warm, #c9a96e); color: var(--wb-bg, #0a0f15); }
.wb-doc-tier--t4 { background: var(--wb-ink-4, #4a5868); color: var(--wb-ink); }
.wb-doc-tier--t5 { background: var(--wb-violet); color: var(--wb-bg, #0a0f15); }
.wb-doc-voice,
.wb-doc-status { opacity: 0.65; }

/* Title block — big warm-gold heading + named-place subtitle.
   The room's character lives here. */
.wb-doc-title-block {
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--wb-rule);
  margin-bottom: 12px;
}
.wb-doc-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.wb-doc-glyph {
  font-family: var(--font-hebrew);
  font-size: 28px;
  color: var(--wb-warm, #c9a96e);
  line-height: 1;
  flex: 0 0 auto;
}
.wb-doc-h1 {
  font-size: 26px;
  font-weight: 500;
  color: var(--wb-warm, #c9a96e);
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.1;
}
.wb-doc-named-place-sub {
  font-size: 13px;
  color: var(--wb-ink-3, #7c8a99);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Body blocks */
/* Hebrew inside doc pages renders at reader scale (Scott,
   2026-08-14: the vowels page was illegible even at 125% zoom).
   size-adjust inflates ONLY the glyphs this face serves, and the
   unicode-range restricts it to Hebrew — Latin text is untouched,
   no markup needed around Hebrew runs. */
@font-face {
  font-family: 'NotoSerifHebrewDocs';
  src: url('/fonts/NotoSerifHebrew-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  size-adjust: 150%;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'NotoSerifHebrewDocs';
  src: url('/fonts/NotoSerifHebrew-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  size-adjust: 150%;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
.wb-doc-body {
  margin-top: 16px;
  font-family: 'NotoSerifHebrewDocs', 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
}
.wb-doc-body .wb-doc-h1,
.wb-doc-body .wb-doc-h2,
.wb-doc-body .wb-doc-h3,
.wb-doc-body .wb-doc-h4 {
  color: var(--wb-ink);
  font-weight: 500;
  margin-top: 28px;
  margin-bottom: 8px;
}
.wb-doc-h2 { font-size: 20px; color: var(--wb-warm); border-bottom: 1px dashed var(--wb-rule); padding-bottom: 6px; }
.wb-doc-h3 { font-size: 16px; }
.wb-doc-h4 { font-size: 14px; text-transform: lowercase; letter-spacing: 0.05em; color: var(--wb-ink-2); }
.wb-doc-p { margin: 12px 0; }
.wb-doc-ul, .wb-doc-ol { margin: 12px 0; padding-left: 24px; }
.wb-doc-ul li, .wb-doc-ol li { margin: 6px 0; }
.wb-doc-hr { border: 0; border-top: 1px dashed var(--wb-rule); margin: 28px 0; }
.wb-doc-blockquote {
  border-left: 3px solid var(--wb-warm);
  padding: 6px 14px;
  margin: 14px 0;
  color: var(--wb-ink-2);
  background: var(--wb-bg-2);
}
.wb-doc-code-inline {
  font-family: var(--rd-mono);
  font-size: 12px;
  background: var(--wb-bg-3, #14202a);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--wb-warm);
}
.wb-doc-pre {
  background: var(--wb-bg-2);
  border: 1px solid var(--wb-rule);
  border-radius: 4px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 14px 0;
}
.wb-doc-code {
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--wb-ink);
  background: transparent;
  padding: 0;
}
.wb-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 12px;
}
.wb-doc-table th,
.wb-doc-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--wb-rule);
  vertical-align: top;
}
.wb-doc-table th {
  color: var(--wb-warm);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

/* Links — same shape across doc-paths and entity-keys. The on-click
   handler in selah-docs.cljs decides which path to dispatch. */
.wb-doc-link {
  color: var(--wb-warm, #c9a96e);
  text-decoration: none;
  border-bottom: 1px dotted var(--wb-warm);
  cursor: pointer;
}
.wb-doc-link:hover {
  color: var(--wb-warm);
  border-bottom-style: solid;
}

/* See-also footer */
.wb-doc-see-also {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px dashed var(--wb-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}
.wb-doc-see-also-h {
  font-size: 10px;
  color: var(--wb-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Loading + error states */
.wb-doc-loading,
.wb-doc-error {
  padding: 60px 32px;
  text-align: center;
  color: var(--wb-ink-3);
}
.wb-doc-error code { color: var(--wb-rose); }

/* ─────────────────────────────────────────────────────────────
   Word mini — tiered redesign (#143)

   Tier-tagged sections (data-tier="N") + inline `?` info-tips +
   aggregate-row inline drilldown + GV factorization line + alt-
   gematria flavor pills + signature badges + concordance chips.
   ───────────────────────────────────────────────────────────── */

/* Tier-section wrapper — invisible until settings hide it. The
   data-tier attribute is the hook a future CSS rule will use
   to flip whole tiers off (.rd-mini--hide-t4 [data-tier="4"]). */
.rd-mini-tier { display: block; }

/* Info-tip — small `?` glyph after a label, hover for title. */
.rd-info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-inline-start: 4px;
  font-family: var(--rd-mono);
  font-size: 10px; line-height: 1; font-weight: 600;
  color: var(--rd-ink-3);
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-rule);
  border-radius: 50%;
  cursor: help;
  user-select: none;
}
.rd-info-tip:hover {
  color: var(--rd-warm);
  border-color: var(--rd-warm);
}

/* Aggregate row — collapsed/expanded inline drilldown. Reads
   as one tappable line; expansion drops the detail right under. */
.rd-panel-aggregate-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-ink-2);
}
.rd-panel-aggregate-row:hover {
  color: var(--rd-warm);
}
.rd-panel-aggregate-row .rd-panel-section-label {
  margin-bottom: 0;
  flex: 0 1 auto;
}
.rd-panel-aggregate-count {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  color: var(--rd-ink-3);
}
.rd-panel-aggregate-arrow {
  width: 12px;
  text-align: center;
  font-size: 10px;
  color: var(--rd-ink-3);
}
.rd-panel-aggregate-detail {
  margin-top: 4px;
  padding-bottom: 4px;
}

/* Badge row — hapax / proper-noun / divine-name / sofit / signature-GV.
   Compact pills, each carrying a title= tooltip. */
.rd-panel-badges {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 0 2px;
}
.rd-panel-badge {
  display: inline-flex; align-items: center;
  padding: 2px 6px;
  font-family: var(--rd-mono);
  font-size: 10px; line-height: 1.2;
  border: 1px solid var(--rd-rule);
  border-radius: 8px;
  background: var(--rd-bg-2);
  color: var(--rd-ink-2);
  cursor: help;
  white-space: nowrap;
}
.rd-panel-badge--hapax  { color: var(--rd-warm); border-color: var(--rd-warm); }
.rd-panel-badge--divine { color: var(--rd-hot);  border-color: var(--rd-hot); }
.rd-panel-badge--proper { font-style: italic; }
.rd-panel-badge--sofit  { font-variant-numeric: tabular-nums; }
.rd-panel-badge--sig    { color: var(--rd-warm); border-color: var(--rd-warm); }

/* GV factorization — `913 = 11 × 83`. The number on the left,
   the equals, the product on the right, optional · prime marker. */
.rd-panel-gv-factor {
  display: flex; align-items: baseline; gap: 4px;
  padding: 4px 0;
  font-family: var(--rd-mono);
  font-size: 13px;
  color: var(--rd-ink);
}
.rd-panel-gv-factor-n     { font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-panel-gv-factor-eq    { color: var(--rd-ink-3); }
.rd-panel-gv-factor-prod  { color: var(--rd-warm); font-variant-numeric: tabular-nums; }
.rd-panel-gv-factor-prime { color: var(--rd-ink-3); font-size: 11px; font-style: italic; }

/* Alt-gematria flavor pills — ordinal/katan/kolel/bonah/atbash/expansion/sofit. */
.rd-panel-gv-flavors {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0 2px;
}
.rd-panel-gv-flavor {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 6px;
  font-family: var(--rd-mono);
  font-size: 10px; line-height: 1.2;
  border: 1px solid var(--rd-rule);
  border-radius: 8px;
  background: var(--rd-bg-2);
  cursor: help;
}
.rd-panel-gv-flavor-k {
  color: var(--rd-ink-3);
  text-transform: lowercase;
}
.rd-panel-gv-flavor-v {
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
}

/* Concordance preview — chips of verse refs. */
.rd-panel-conc-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0;
}
.rd-panel-conc-chip {
  display: inline-flex; align-items: center;
  padding: 2px 6px;
  font-family: var(--rd-mono);
  font-size: 10px; line-height: 1.2;
  border: 1px solid var(--rd-rule);
  border-radius: 4px;
  background: var(--rd-bg-2);
  color: var(--rd-ink-2);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.rd-panel-conc-chip:hover {
  color: var(--rd-warm);
  border-color: var(--rd-warm);
  background: color-mix(in srgb, var(--rd-warm) 12%, transparent);
}
.rd-panel-conc-more {
  display: inline-flex; align-items: center;
  padding: 2px 6px;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--rd-ink-3);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   Word mini · compact (#144, mockup 18)
   Designer artifact: /mockups/wf/approaches/18-word-mini.jsx

   Scope: .rd-word-mini wraps the whole word mini-profile so
   these styles do NOT bleed into the other mini-profiles
   (verse, lemma, root, etc. — those still use .rd-panel-*
   styles and will be swept later under #124).

   Class prefix .rd-mw- ("reader · mini · word") namespaces
   every new element; chrome dropped per the trade table in
   docs/design/word-profile-menu.md "Visual density principle".
   ───────────────────────────────────────────────────────────── */

.rd-word-mini {
  font-size: 11px;
  line-height: 1.55;
  color: var(--rd-ink-2);
}

/* Hero block — Hebrew centered fills the whole width; the `?`
   and `↗` glyphs OVERLAY the top-right corner absolutely so
   they don't eat their own row. Reads as a badge on the hero
   card rather than a separate chrome bar. */
[data-section="hero"] { position: relative; }
.rd-word-mini .rd-mw-head {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;    /* let clicks pass through empty space */
}
.rd-word-mini .rd-mw-head > * { pointer-events: auto; }
/* `.rd-mw-kind` no longer rendered (kept the rule stub in case
   any other surface reaches for it). */
.rd-word-mini .rd-mw-kind { display: none; }
/* Boxless open-as-tab glyph — matches the `?` help glyph:
   just the arrow, no frame. */
.rd-word-mini .rd-mw-open {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: var(--rd-ink-3);
  cursor: pointer;
  user-select: none;
  transition: color 80ms ease;
}
.rd-word-mini .rd-mw-open:hover {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-hero {
  font-family: var(--font-hebrew);
  font-size: 40px;
  text-align: center;
  color: var(--rd-ink);
  /* Tight line-height so the Hebrew glyphs' natural cap/descender
     buffer doesn't inflate the block. Head actions overlay the
     top-right so there's no action-row to leave a seam with —
     hero starts at the container's top edge. */
  line-height: 1;
}
/* Inline gloss — the token's own rendering in THIS verse, centered
   under the hero it belongs to; the left-aligned translit/Strong's
   dictionary line follows below. */
.rd-word-mini .rd-mw-inline-gloss {
  text-align: center;
  font-size: 14px;
  color: var(--rd-warm);
  font-style: italic;
  /* The hero renders at line-height 1, so its niqqud hang BELOW
     the line box — the gloss needs real clearance under them,
     not just a seam (Scott, 2026-07-27). */
  margin-top: 12px;
  line-height: 1.3;
}
.rd-word-mini .rd-mw-trans {
  text-align: left;
  font-size: 13px;
  color: var(--rd-ink-2);
  /* A few pixels of breathing room between the 40px Hebrew hero
     and the small translit line so the sub-line reads as
     "underneath" not "touching the descenders". */
  margin-top: 6px;
  line-height: 1.35;
}
.rd-word-mini .rd-mw-gloss {
  color: var(--rd-warm);
  font-style: italic;
}

/* Hero word IS the link — only the Hebrew glyph itself is
   clickable, not the surrounding block. Hovering the word
   highlights it warm; the box doesn't grow, so the `?` help
   button next to it stays uncrowded. */
.rd-word-mini .rd-mw-hero--open {
  cursor: pointer;
  transition: color 140ms ease, text-shadow 140ms ease;
}
.rd-word-mini .rd-mw-hero--open:hover,
.rd-word-mini .rd-mw-hero--open:focus-visible {
  color: var(--rd-warm);
  text-shadow: 0 0 14px color-mix(in srgb, var(--rd-warm) 40%, transparent);
  outline: 0;
}

/* Tags row — inline italic, comma-separated, sig highlighted */
.rd-word-mini .rd-mw-tags {
  text-align: right;
  font-size: 11px;
  color: var(--rd-ink-3);
  font-style: italic;
  margin: 4px 0 10px;
}
.rd-word-mini .rd-mw-tag {
  cursor: help;
}
.rd-word-mini .rd-mw-tag--sig {
  color: var(--rd-warm);
  font-style: normal;
}

/* Identity line — dense comma-run */
.rd-word-mini .rd-mw-line {
  color: var(--rd-ink-2);
  padding-bottom: 10px;
}
.rd-word-mini .rd-mw-line b {
  color: var(--rd-ink);
  font-weight: 500;
}
.rd-word-mini .rd-mw-line b[dir] {
  font-family: var(--font-hebrew);
  font-size: 14px;
  font-weight: 400;
}

/* Block scaffold — top border + padding, no full-width divider */
.rd-word-mini .rd-mw-block {
  padding: 9px 0;
  border-top: 1px solid var(--rd-rule);
}

/* Section labels — small-caps, sentence case */
.rd-word-mini .rd-mw-lbl {
  font-size: 10px;
  color: var(--rd-ink-3);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.rd-word-mini .rd-mw-lbl-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
  cursor: pointer;
}
.rd-word-mini .rd-mw-lbl-row .rd-mw-lbl {
  margin-bottom: 0;
}
.rd-word-mini .rd-mw-arr {
  color: var(--rd-ink-3);
  font-size: 10px;
  margin-left: auto;
  cursor: pointer;
  user-select: none;
  transition: color 80ms ease;
}
.rd-word-mini .rd-mw-arr:hover { color: var(--rd-warm); }
.rd-word-mini .rd-mw-lbl-row:hover .rd-mw-arr { color: var(--rd-warm); }

/* (Per-section ⓘ marker retired — replaced by a single ? button
   in the hero that opens `mini-help-popover`. The .rd-mw-i class
   is no longer rendered; keeping the rule out keeps the rail
   uncluttered.) */


/* Position section — this occurrence's chapter/book/collection
   fractions with the total's prime factoring. Inline value shows
   the chapter fraction as a headline; expanded detail carries
   the full block, one row per scope. */
.rd-word-mini .rd-mw-pos-inline {
  color: var(--rd-ink-2);
  font-variant-numeric: tabular-nums;
}
.rd-word-mini .rd-mw-pos-inline .rd-mw-dim {
  color: var(--rd-ink-3);
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
}
.rd-word-mini .rd-mw-pos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 2px;
}
/* One scope: full-width label line, then aligned tokens/letters/box
   lines beneath — labels never truncate, factors never wrap
   mid-number. */
.rd-word-mini .rd-mw-pos-scope {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rd-word-mini .rd-mw-pos-scopelabel {
  color: var(--rd-ink-3);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--rd-mono);
}
.rd-word-mini .rd-mw-pos-line {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 1px;
  align-items: baseline;
  font-size: 11px;
  font-family: var(--rd-mono);
  padding-left: 2px;
}
.rd-word-mini .rd-mw-pos-line .rd-mw-pos-k {
  flex: 0 0 46px;
}
/* factors wrap as a unit to their own line when tight — never
   painted over the fraction */
.rd-word-mini .rd-mw-pos-line .rd-mw-pos-fact {
  margin-left: 0;
}
.rd-word-mini .rd-mw-pos-k {
  color: var(--rd-ink-4);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rd-word-mini .rd-mw-pos-frac {
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rd-word-mini .rd-mw-pos-slash,
.rd-word-mini .rd-mw-pos-d {
  color: var(--rd-ink-4);
}
.rd-word-mini .rd-mw-pos-fact {
  color: var(--rd-warm);
  font-size: 10px;
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Partner line (mirror / veil) — the fold partner's
   letter · word · gloss · verse, on its own indented line so long
   refs wrap at separators instead of clipping at the panel edge */
.rd-word-mini .rd-mw-pos-partner {
  padding-left: 14px;
  font-size: 11px;
  font-family: var(--rd-mono);
  line-height: 1.5;
}
.rd-word-mini .rd-mw-pos-partner .rd-mw-pos-mref {
  white-space: nowrap;
}
.rd-word-mini .rd-mw-pos-he {
  font-family: var(--font-hebrew, 'SBL Hebrew', 'Ezra SIL', serif);
  font-size: 13px;
  color: var(--rd-ink);
  direction: rtl;
  unicode-bidi: isolate;
}
/* The partner's verse inline — RTL interlinear (per-token
   rendering beneath the Hebrew, the reader's language), mirror
   word lit with the reader's selection warmth. */
.rd-word-mini .rd-mw-pos-verse {
  display: flex;
  flex-wrap: wrap;
  direction: rtl;
  column-gap: 9px;
  row-gap: 3px;
  padding: 2px 6px 4px 0;
  align-items: flex-start;
}
.rd-word-mini .rd-mw-pos-vtok {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 110px;
}
.rd-word-mini .rd-mw-pos-vt {
  font-family: var(--font-hebrew, 'SBL Hebrew', 'Ezra SIL', serif);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--rd-ink-2);
  unicode-bidi: isolate;
}
.rd-word-mini .rd-mw-pos-vg {
  direction: ltr;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 8.5px;
  line-height: 1.25;
  color: var(--rd-ink-4);
  text-align: center;
}
.rd-word-mini .rd-mw-pos-vtok--hit .rd-mw-pos-vt {
  color: var(--rd-warm);
  background: color-mix(in srgb, var(--rd-warm) 16%, transparent);
  border-radius: 2px;
  padding: 0 2px;
}
.rd-word-mini .rd-mw-pos-vtok--hit .rd-mw-pos-vg {
  color: var(--rd-warm);
}
.rd-word-mini .rd-mw-pos-gloss {
  color: var(--rd-ink-3);
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 10.5px;
}
.rd-word-mini .rd-mw-pos-mref {
  color: var(--rd-warm);
  font-size: 10px;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.rd-word-mini .rd-mw-pos-mref:hover {
  text-decoration: underline;
}

/* ── The shelf — books door ────────────────────────────────────── */
.wb-home-books { display: flex; flex-direction: column; gap: 1rem; }
.wb-home-bookchips { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.wb-home-bookchip {
  font-size: .8rem; padding: .28rem .65rem; border-radius: 999px;
  border: 1px solid currentColor; opacity: .7; cursor: pointer;
}
.wb-home-bookchip:hover, .wb-home-bookchip:focus-visible { opacity: 1; }

/* The subtitle star (the yalkut pointer on the explore door) —
   double the sub-text size so it reads as a star, not a fleck
   (Scott, 2026-08-14). */
.wb-home-cell-star {
  font-size: 2em;
  line-height: 0;
  vertical-align: -0.12em;
  color: var(--wb-warm);
}

/* ── The gold chip ───────────────────────────────────────────
   A doc-page chip in the house pill shape (.wb-home-bookchip's
   geometry), rendered gold. Emitted by the doc renderer for any
   link whose markdown title is "chip-gold":

     [Some link](/some/target "chip-gold")

   Gold is stated explicitly rather than borrowed from --wb-warm so
   it stays gold under every theme. Written for the support page's
   golden ticket (2026-08-15); that page no longer asks for money,
   and the renderer variant stays because it is generic. */
.wb-doc-chip {
  --chip-gold: #d4a72c;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; line-height: 1.2;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip-gold) 70%, transparent);
  color: var(--chip-gold);
  background: color-mix(in srgb, var(--chip-gold) 10%, transparent);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wb-doc-chip:hover,
.wb-doc-chip:focus-visible {
  border-color: var(--chip-gold);
  background: color-mix(in srgb, var(--chip-gold) 18%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--chip-gold) 28%, transparent);
}
.wb-doc-chip-glyph { font-size: .85em; opacity: .9; }

/* ── Verse embed (```verse fence) — live interlinear rows ─────── */
.wb-doc-verse-embed {
  margin: 14px 0;
  padding: 10px 14px;
  border: 1px solid var(--wb-line, rgba(128,128,128,.25));
  border-radius: 6px;
  background: color-mix(in srgb, var(--wb-ink, #888) 4%, transparent);
}
.wb-doc-ve-ed + .wb-doc-ve-ed {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--wb-line, rgba(128,128,128,.25));
}
.wb-doc-ve-label {
  font-family: var(--rd-mono, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 4px;
}
.wb-doc-ve-loading { opacity: .5; font-size: 11px; }

/* ── The centers app (workbench :centers tab) ─────────────────── */
.wb-stage--centers { padding: 18px 22px; overflow: auto; }
.wb-ctr-title { margin: 0 0 2px; font-size: 18px; }
.wb-ctr-sub { font-size: 11px; opacity: .65; margin-bottom: 14px; }
.wb-ctr-table { border-collapse: collapse; font-size: 12px; width: 100%; max-width: 880px; }
.wb-ctr-table th { text-align: left; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .6; padding: 4px 10px 6px 0; }
.wb-ctr-row td { padding: 3px 10px 3px 0; border-top: 1px solid
  color-mix(in srgb, var(--wb-ink, #888) 12%, transparent); cursor: pointer; }
.wb-ctr-row:hover td { background: color-mix(in srgb, var(--wb-ink, #888) 5%, transparent); }
.wb-ctr-row--sel td { background: color-mix(in srgb, var(--wb-warm, #c90) 10%, transparent); }
.wb-ctr-row--diff .wb-ctr-name { font-weight: 600; }
.wb-ctr-n-lens, .wb-ctr-f-lens, .wb-ctr-c-lens {
  color: var(--wb-warm, #c90); margin-left: 4px; }
.wb-ctr-letters { font-family: var(--rd-hebrew, serif); font-size: 15px; padding: 0 3px; }
.wb-ctr-ref { font-size: 10px; opacity: .6; margin-left: 4px; cursor: pointer; }
.wb-ctr-ref:hover { opacity: 1; text-decoration: underline; }
.wb-ctr-trees { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.wb-ctr-tree-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .7; margin-bottom: 6px; }
.wb-ctr-node { border-left: 1px dashed color-mix(in srgb, var(--wb-ink, #888) 25%, transparent);
  padding-left: 12px; margin: 4px 0; }
.wb-ctr-node--d0 { border-left: none; padding-left: 0; }
.wb-ctr-node-head { display: flex; align-items: baseline; gap: 6px; }
.wb-ctr-node-kind { opacity: .7; }
.wb-ctr-node-local { font-size: 9px; opacity: .5; margin-left: 2px; }
.wb-ctr-node-n { font-size: 10px; opacity: .5; margin-left: auto; padding-left: 10px; }
.wb-ctr-loading { opacity: .5; }

/* Edition-variant callout on the word profile head */
.wb-profile-head-v3-callout--edition { cursor: pointer; }
.wb-profile-head-v3-callout--edition:hover { opacity: .85; }
.wb-ctr-wordn { font-size: 9px; opacity: .5; margin-left: 5px; }
.wb-ctr-sep { opacity: .5; padding: 0 2px; }
.wb-ctr-lens-tag { font-size: 8px; letter-spacing: .06em; text-transform: uppercase;
  opacity: .6; margin-left: 3px; vertical-align: super; }
.wb-ctr-lens-chips { display: inline-flex; gap: 6px; margin-left: 10px; }
.wb-ctr-lens-chip { font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 8px; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--wb-ink, #888) 30%, transparent);
  background: transparent; color: inherit; opacity: .55; }
.wb-ctr-lens-chip--on { opacity: 1;
  border-color: var(--wb-warm, #c90); color: var(--wb-warm, #c90); }
.wb-ctr-lens-chip-note { opacity: .7; margin-left: 1px; }

/* Language menu rows — English gloss primary, native dim */
.wb-tabbar-lang-row { display: inline-flex; align-items: baseline; gap: 8px; }
.wb-tabbar-lang-native { opacity: .55; font-size: .92em; }
.wb-ctr-intro { max-width: 620px; margin: 4px 0 14px; }
.wb-ctr-intro-p { font-size: 12px; line-height: 1.6; opacity: .85; margin: 0 0 6px; }
.wb-ctr-intro-links { display: flex; gap: 18px; flex-wrap: wrap; }
.wb-ctr-intro-link { font-size: 11px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; color: var(--wb-warm, #c90); opacity: .85; }
.wb-ctr-intro-link:hover { opacity: 1; }
.wb-doc-img { max-width: 320px; width: 100%; border-radius: 8px; margin: 10px 0; display: block; }
/* linked image (title-as-href markdown) — the about QR card: smaller,
   still scannable */
.wb-doc-img-link { display: inline-block; }
.wb-doc-img-link .wb-doc-img { max-width: 160px; }
.wb-home-cell-img { width: 100%; max-width: 150px; border-radius: 6px; margin: 0 auto 6px; display: block; }