/* Selah workbench — foundations
   Scrollbars, ::selection, .wb-root, tab bar, foundational typography.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* Selah workbench — structural rules.
   Source of truth for CD's artboard ports (13: Workbench, 06: Reader,
   07: Editor influences). All color values are CSS variables —
   theme defines them via selah.app.workbench.theme. */

/* THE MONO — one control surface for the workbench's Latin/UI face.
   Every mono font-family in workbench css reads var(--rd-mono)
   (unified 2026-07-12; two drifted ui-monospace-first stacks were
   folded in). Swap candidates HERE and only here — e.g.
   'Roboto Mono' (flat terminals, kills the bubbly JetBrains feel),
   'IBM Plex Mono' (crisper, editorial), 'Iosevka' (narrow, dense).
   Non-vendored: renders from the system install, ui-monospace next. */
:root {
  /* NotoSerifTamil is unicode-range-scoped (U+0B80-0BFF) — it only
     supplies Tamil glyphs, so mono Latin never touches it. Without
     it, Tamil in workbench surfaces falls to the USER'S fontconfig,
     which can resolve to a partial legacy face and tofu whole
     shaping clusters (the ta glosses bug, 2026-08-20). */
  --rd-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, var(--script-faces), monospace;
  /* THE DISPLAY — proportional face for heroes/headlines where the
     text doesn't jump (the mono's jitter-proofing isn't needed on a
     constant book name; digits get tabular-nums at the use site).
     Scott, 2026-07-12: "the hero doesn't need to be monospaced." */
  --rd-display: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
}

/* Mobile default scale (Scott, 2026-07-30): narrow viewports read
   better a notch smaller — 90% is the mobile BASE. Layout-level,
   not a settings write: resizing across the breakpoint never
   touches the stored preference. An explicit :a11y/zoom choice
   (inline style on .wb-root) outranks this and wins at any width;
   the default (100%, no inline style) picks the base up. */
@media (max-width: 900px) {
  /* !important on purpose: mobile FORCES 90% over the stored
     :a11y/zoom (which rides an inline style) — Scott 2026-07-30,
     'it stays on whatever level I have set'. The preference is
     untouched and returns at desktop widths. */
  .wb-root { zoom: 90% !important; }
}

/* Scrollbars — small + warm. Webkit + Firefox both. */
.wb-root ::-webkit-scrollbar { width: 8px; height: 8px; }
.wb-root ::-webkit-scrollbar-track { background: transparent; }
.wb-root ::-webkit-scrollbar-thumb {
  background: var(--wb-rule);
  border-radius: 4px;
}
.wb-root ::-webkit-scrollbar-thumb:hover { background: var(--wb-ink-4); }
.wb-root ::-webkit-scrollbar-corner { background: transparent; }
.wb-root * { scrollbar-width: thin; scrollbar-color: var(--wb-rule) transparent; }

/* Native text selection — match the theme. The chrome (workbench)
   pulls from --wb-warm; the reader stage uses its own --rd-hot so
   selection feels of-a-piece with the cursor highlight. */
.wb-root ::selection {
  background: color-mix(in srgb, var(--wb-warm) 35%, transparent);
  color: var(--wb-ink);
}
.wb-stage--reader ::selection {
  background: color-mix(in srgb, var(--rd-hot) 35%, transparent);
  color: var(--rd-ink);
}

/* CD lines 670-691 — palette + root */
.wb-root {

  /* Divergence (a): fill viewport instead of artboard padding. */
  position: fixed; inset: 0;
  background: var(--wb-bg);
  color: var(--wb-ink);
  font-family: var(--rd-mono);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* CD lines 712-751 — tab bar */
.wb-tabbar {
  height: 32px; flex: 0 0 auto;
  display: flex; align-items: stretch;
  background: var(--wb-bg-3);
  border-bottom: 1px solid var(--wb-rule);
}
.wb-tabbar-app {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; border-right: 1px solid var(--wb-rule);
  font-size: 11px; color: var(--wb-ink-2);
}
.wb-tabbar-glyph {
  /* Divergence (b): SBLHebrew first, FRL when available. */
  font-family: var(--font-hebrew);
  font-size: 14px; color: var(--wb-warm);
}
.wb-tabbar-name { letter-spacing: 0.1em; text-transform: lowercase; }
.wb-tabbar-tabs {
  /* Size to content, shrink when needed — so the container hugs
     the tabs and lets the `+` button sit adjacent to the last tab.
     `min-width: 0` prevents flex from refusing to shrink below the
     content's intrinsic size. */
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: stretch;
  overflow: hidden;
}
/* Tabs size to their content up to a 220px cap; when the strip
   fills, they auto-shrink down to a 60px floor. Combined with
   `.wb-tabbar-tabs { flex: 0 1 auto; overflow: hidden }` the
   container hugs the tabs, the `+` sits adjacent to the last tab,
   and the tabs shrink before the container hides overflow. */
.wb-tab {
  flex: 0 1 auto;
  min-width: 56px;
  max-width: 176px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 9px;
  border-right: 1px solid var(--wb-rule);
  font-size: 11px; color: var(--wb-ink-2);
  background: transparent; position: relative;
}
/* Grain stripe — the tab's TOP edge. One element carries kind
   (color = grain ladder: violet collection → rose book → cyan
   chapter → mint verse → warm word; system grey) AND state (dim at
   rest, brighter on hover, full-bright 3px when active). Replaces
   both the per-tab icon and the old active underline. */
.wb-tab::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--wb-tab-grain, var(--wb-ink-3));
  opacity: 0.35; transition: opacity 80ms ease, height 80ms ease;
}
.wb-tab:hover::before { opacity: 0.7; }
.wb-tab--grain-violet { --wb-tab-grain: var(--wb-violet); }
.wb-tab--grain-rose   { --wb-tab-grain: var(--wb-rose); }
.wb-tab--grain-cyan   { --wb-tab-grain: var(--wb-cyan); }
.wb-tab--grain-mint   { --wb-tab-grain: var(--wb-mint); }
.wb-tab--grain-warm   { --wb-tab-grain: var(--wb-warm); }
.wb-tab--grain-dim    { --wb-tab-grain: var(--wb-ink-3); }
/* Add-tab (+) stays a fixed-width square — never shrinks. */
.wb-tab--add { flex: 0 0 auto; }
.wb-tab--active {
  background: var(--wb-bg);
  color: var(--wb-ink);
}
.wb-tab--active::before { opacity: 1; height: 3px; }
.wb-tab--pinned { font-style: normal; color: var(--wb-ink-2); }
.wb-tab--pinned .wb-tab-x { display: none; }
.wb-tab--dirty .wb-tab-label { color: var(--wb-warm); }
.wb-tab--ghost { font-style: italic; color: var(--wb-ink-3); }
.wb-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-tab-x {
  font-size: 12px; color: var(--wb-ink-3); margin-left: 2px;
  padding: 0 4px; border-radius: 2px; cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.wb-tab-x:hover { background: var(--wb-bg-2); color: var(--wb-warm); }
.wb-tab-dot { color: var(--wb-warm); margin-left: -4px; }
.wb-tab--add {
  flex: 0 0 auto; min-width: 30px;
  color: var(--wb-ink-3); justify-content: center;
}

/* Add-tab (+) button — lives OUTSIDE the scrolling `.wb-tabbar-tabs`
   so it never disappears off the right edge when the strip is
   full. Sits directly to the right of the tabs, before the
   overflow chevron. */
.wb-tabbar-add {
  display: flex; align-items: center; justify-content: center;
  min-width: 30px;
  padding: 0 10px;
  border-right: 1px solid var(--wb-rule);
  font-size: 14px; color: var(--wb-ink-3);
  cursor: pointer;
  user-select: none;
  transition: color 80ms ease;
}
.wb-tabbar-add:hover { color: var(--wb-warm); }

/* Overflow chevron + popover — sits between the add-tab button
   and the right-side status chips. Always visible, click opens a
   popover listing every open tab (with icon + label + close-×),
   and clicking a row switches to that tab. */
/* Status-chip popover menus — lang / theme pickers. Same visual
   family as the overflow popover; anchored under the chip. */
.wb-tabbar-chip { position: relative; }
.wb-tabbar-chip--open { color: var(--wb-warm); }
.wb-tabbar-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 150px; max-height: 420px; overflow-y: auto;
  background: var(--wb-bg-2);
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  z-index: 100;
  cursor: default;
  padding: 4px 0;
}
.wb-tabbar-menu-item {
  padding: 5px 12px;
  font-size: 12px;
  color: var(--wb-ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.wb-tabbar-menu-item:hover { color: var(--wb-warm); background: var(--wb-bg-3); }
.wb-tabbar-menu-item--on {
  color: var(--wb-warm);
}
.wb-tabbar-menu-item--on::after { content: " ·"; }

.wb-tabbar-overflow {
  position: relative;
  display: flex; align-items: center;
  padding: 0 10px;
  /* Right-aligned beside the status chips (Scott, 2026-07-30):
     the chevron takes the bar's slack; the status group's own
     auto margin then collapses, leaving it adjacent. */
  margin-inline-start: auto;
  border-left: 1px solid var(--wb-rule);
  color: var(--wb-ink-3);
  cursor: pointer;
  user-select: none;
  transition: color 80ms ease;
}
.wb-tabbar-overflow:hover,
.wb-tabbar-overflow--open { color: var(--wb-warm); }
.wb-tabbar-overflow-chevron {
  font-size: 12px; line-height: 1;
}
.wb-tabbar-overflow-pop {
  /* Viewport-anchored (Scott, 2026-07-30): right-anchoring to the
     chevron ran the pop off the page's left edge at narrow widths.
     Fixed under the tab bar, clamped to the viewport, shrinking
     when the screen is narrower than its natural width. */
  position: fixed; top: 42px; left: 8px; right: 8px;
  /* left+right pin the box to the viewport; max-width caps it and
     margin-left:auto hands the slack back to the left side, so it
     stays right-anchored on wide screens and shrinks on narrow —
     no vw units (they mis-resolve under the root zoom). */
  width: auto;
  max-width: 360px;
  margin-left: auto;
  /* Divide vh by the interface zoom (--wb-zoom, set on .wb-root):
     inside a zoomed subtree 100vh resolves against the UNzoomed
     viewport, so without the divide the pop is zoom-times too tall
     and its own scrollbar never engages (Scott, 2026-08-10). */
  max-height: calc(100vh / var(--wb-zoom, 1) - 60px); overflow-y: auto;
  background: var(--wb-bg-2);
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  z-index: 100;
  cursor: default;
}
.wb-tabbar-overflow-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 9px; letter-spacing: 0.15em;
  color: var(--wb-ink-4);
  text-transform: uppercase;
  border-bottom: 1px solid var(--wb-rule);
}
.wb-tabbar-overflow-closeall {
  cursor: pointer; color: var(--wb-ink-3);
  transition: color 80ms ease;
}
.wb-tabbar-overflow-closeall:hover { color: var(--wb-warm); }
.wb-tabbar-overflow-list { padding: 4px 0; }
.wb-tabbar-overflow-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  font-size: 11px; color: var(--wb-ink-2);
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.wb-tabbar-overflow-row:hover {
  background: var(--wb-bg-3);
  color: var(--wb-ink);
}
.wb-tabbar-overflow-row--active {
  color: var(--wb-warm);
  box-shadow: inset 2px 0 0 var(--wb-warm);
}
.wb-tabbar-overflow-row--pinned .wb-tabbar-overflow-label {
  font-style: italic;
}
.wb-tabbar-overflow-row--dirty .wb-tabbar-overflow-label {
  color: var(--wb-warm);
}
/* Grain swatch — same ladder as the strip's top stripes; the row
   inherits its --wb-tab-grain from the wb-tab--grain-* class. */
.wb-tabbar-overflow-grain {
  width: 3px; height: 12px; flex: 0 0 auto;
  background: var(--wb-tab-grain, var(--wb-ink-3));
  opacity: 0.8;
}
.wb-tabbar-overflow-row--active .wb-tabbar-overflow-grain { opacity: 1; }
/* Word rows' muted gloss — first sense, ellipsized, never louder
   than the label. */
.wb-tabbar-overflow-gloss {
  flex: 0 1 auto; min-width: 0; max-width: 45%;
  font-size: 10px; font-style: italic; color: var(--wb-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-tabbar-overflow-label {
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-tabbar-overflow-dot { color: var(--wb-warm); }
.wb-tabbar-overflow-x {
  color: var(--wb-ink-4);
  padding: 0 4px; margin-left: 4px;
  border-radius: 2px;
  transition: background 80ms ease, color 80ms ease;
}
.wb-tabbar-overflow-x:hover {
  background: var(--wb-bg);
  color: var(--wb-warm);
}
.wb-tabbar-right { display: flex; align-items: center; padding: 0 10px; }

/* Settings status chips on the right edge of the tab bar.
   Each chip shows a current user-config value (lang, theme, …);
   clicking opens the command palette pre-filled with that command. */
.wb-tabbar-status {
  /* The trailing-edge push moved to `.wb-tabbar-overflow` (Scott,
     2026-07-30: the chevron rides right, beside these chips) —
     TWO auto margins would split the slack and strand the chevron
     mid-bar, so this group carries none and sits adjacent. */
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; border-inline-start: 1px solid var(--wb-rule);
  font-size: 10px;
}
.wb-tabbar-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 3px;
  background: var(--wb-bg-2); color: var(--wb-ink-2);
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  transition: border-color 100ms, color 100ms;
}
.wb-tabbar-chip:hover {
  border-color: var(--wb-rule);
  color: var(--wb-ink);
}
.wb-tabbar-chip-label {
  color: var(--wb-ink-3); text-transform: lowercase;
  letter-spacing: 0.05em;
}
.wb-tabbar-chip-value {
  color: var(--wb-warm); font-weight: 500;
}

/* Icon-only chip variant — used for the ⚙ Settings chip. No
   label, just the glyph. Square shape, same height as the
   label+value chips. */
.wb-tabbar-chip--icon {
  padding: 2px 6px;
}

.wb-tabbar-chip-icon {
  font-size: 15px;
  color: var(--wb-ink-2);
  line-height: 1;
}

.wb-tabbar-chip--icon:hover .wb-tabbar-chip-icon {
  color: var(--wb-warm);
}

/* ── Narrow-viewport tab bar ─────────────────────────────────────
   Progressive collapse as the viewport narrows. The status chips
   drop their labels (keeping the color-warm values), then the
   theme chip disappears entirely, then the "selah" wordmark
   collapses to just the ו glyph. Beyond ~480px the whole tab
   metaphor probably wants a different mobile UX (fullscreen tab
   picker, sheet, etc.) — those live outside this file. */

@media (max-width: 900px) {
  .wb-tabbar-chip-label { display: none; }
  .wb-tabbar-chip { padding: 2px 6px; }
  /* The zoom chip leaves WITH the forced mobile 90% (same 900px
     line) — between 700 and 900 it used to show a number that
     wasn't applying (Scott, 2026-07-30). */
  .wb-tabbar-chip:nth-of-type(3) { display: none; }
}

@media (max-width: 700px) {
  /* Drop the theme chip — lang + settings are the ones worth
     keeping visible at narrow widths. Reachable via the palette
     (⌘K); the zoom chip already left at 900px with the forced
     mobile 90%. */
  .wb-tabbar-chip:nth-of-type(2) { display: none; }
}

@media (max-width: 560px) {
  .wb-tabbar-name { display: none; }
  .wb-tabbar-app { padding: 0 8px; gap: 0; }
}

/* CD lines 753-758 — kbd chip */
.wb-kbd {
  font-family: inherit; font-size: 9px; padding: 2px 6px;
  border: 1px solid var(--wb-rule); border-radius: 2px;
  color: var(--wb-ink-2); background: var(--wb-bg-2);
  letter-spacing: 0.05em;
}

/* CD line 760 — stage */
.wb-stage { flex: 1 1 auto; padding: 18px 24px; overflow: hidden; position: relative; }

/* CD lines 762-771 — home empty */
.wb-stage--home-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
.wb-home-hero { text-align: center; }
.wb-home-glyph {
  font-family: var(--font-hebrew);
  font-size: 96px; color: var(--wb-warm); line-height: 1;
}
.wb-home-title { font-size: 22px; letter-spacing: 0.3em; color: var(--wb-ink); margin-top: 12px; }
.wb-home-sub { font-size: 12px; color: var(--wb-ink-3); margin-top: 8px; letter-spacing: 0.05em; }
.wb-home-cta { display: flex; align-items: center; gap: 12px; }
.wb-home-cta-text { font-size: 12px; color: var(--wb-ink-3); }

/* CD lines 773-809 — home loaded (cmd row + door grid + footer) */
.wb-stage--home { display: flex; flex-direction: column; gap: 18px; padding: 22px 28px; overflow-y: auto; }
.wb-home-row { display: flex; gap: 20px; align-items: center; }
.wb-home-cmd {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 1px solid var(--wb-rule); border-radius: 3px;
  background: var(--wb-bg-2);
}
.wb-home-cmd-prompt { font-size: 11px; color: var(--wb-warm); letter-spacing: 0.1em; }
.wb-home-cmd-hint { font-size: 11px; color: var(--wb-ink-3); }
.wb-home-recent { display: flex; align-items: center; gap: 6px; font-size: 10px; }
/* RECENT as its own section under the rooms — chips wrap. */
.wb-home-recent--section { flex-wrap: wrap; row-gap: 6px; margin-top: 4px; }
.wb-home-rh { color: var(--wb-ink-3); letter-spacing: 0.1em; margin-right: 4px; }
.wb-home-recent-pill {
  /* Rounded rectangle, not a pill — matches the translation chips
     + the cites/cited-by chips (the house chip shape, 2026-07). */
  padding: 3px 9px; border: 1px solid var(--wb-rule); border-radius: 4px;
  color: var(--wb-ink-2); background: var(--wb-bg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.wb-home-recent-pill:hover {
  background: var(--wb-bg-3);
  border-color: var(--wb-ink-2);
  color: var(--wb-ink, var(--wb-ink-2));
}
.wb-home-recent-pill--open {
  /* Open tab — pill is brighter, dot filled. Switch-on-click. */
  border-color: var(--wb-ink-2);
  color: var(--wb-ink, var(--wb-ink-2));
}
.wb-home-recent-pill--closed {
  /* Closed tab — pill is dim, dot outlined. Re-open-on-click. */
  opacity: 0.78;
}
.wb-home-recent-pill-dot {
  font-size: 9px;
  line-height: 1;
  color: var(--wb-ink-3);
}
.wb-home-recent-pill--open .wb-home-recent-pill-dot {
  color: var(--wb-warm, var(--wb-ink));
}
.wb-home-recent-pill-l {
  /* Label — main visible text. */
}
/* OPEN — the source + the testimony, out to the public repository.
   Same house chip shape as the recent pills; warm rather than neutral,
   because these are the only chips on the door that leave the
   instrument, and the warmth is the tell. */
.wb-home-open {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; row-gap: 6px; margin-top: 4px;
  font-size: 10px;
}
.wb-home-openchip {
  padding: 3px 9px; border: 1px solid var(--wb-rule); border-radius: 4px;
  color: var(--wb-ink-2); background: var(--wb-bg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.wb-home-openchip:hover,
.wb-home-openchip:focus-visible {
  background: var(--wb-bg-3);
  border-color: var(--wb-warm, var(--wb-ink-2));
  color: var(--wb-warm, var(--wb-ink-2));
}
.wb-home-openchip-glyph {
  font-size: 9px;
  line-height: 1;
  color: var(--wb-warm, var(--wb-ink-3));
}
.wb-home-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.wb-home-cell {
  background: var(--wb-bg-2); border: 1px solid var(--wb-rule);
  padding: 14px 12px; border-radius: 3px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 86px;
  transition: background 0.1s;
}
.wb-home-cell-glyph { font-family: var(--font-hebrew); font-size: 22px; color: var(--wb-warm); line-height: 1; }
.wb-home-cell-label {
  font-size: 11px;
  color: var(--wb-ink);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
.wb-home-cell-sub { font-size: 9px; color: var(--wb-ink-3); }
.wb-home-cell--reader { background: var(--wb-bg-3); }
.wb-home-cell--explorer { background: var(--wb-bg-3); }
.wb-home-foot {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  padding-top: 14px; border-top: 1px dashed var(--wb-rule);
}
.wb-home-foot-col { display: flex; flex-direction: column; gap: 4px; }
.wb-home-foot-col--end { text-align: right; align-items: flex-end; }
.wb-home-foot-h { font-size: 10px; color: var(--wb-ink-3); letter-spacing: 0.15em; text-transform: uppercase; }
.wb-home-foot-pin { font-size: 11px; color: var(--wb-ink-2); }

/* A burning bush: a factor row the letters could not have produced —
   a model association, kept visible and clearly marked rather than
   culled (Scott, 2026-08-11). Dimmed and warm-edged so the eye can
   tell computation from association at a glance. */
.wb-cand--bush {
  opacity: 0.72;
  border-left: 2px solid rgba(215, 120, 60, 0.55);
  padding-left: 4px;
}
.wb-cand-bush {
  font-size: 10px;
  opacity: 0.85;
  margin-left: 2px;
  cursor: help;
}

/* ── Interface zoom (rebased 2026-08-14) ─────────────────────
   The old 125% is the new 100%: desktop multiplies the user's
   label factor (--wb-zoom-label, default 1) by 1.25. Mobile
   keeps the original tight scale — under 700px the base factor
   drops to 1, so a phone's 100% is the old 100%. --wb-zoom
   carries the APPLIED factor for popovers that must divide it
   back out of vh-based sizes. */
.wb-root {
  --wb-zoom: calc(var(--wb-zoom-label, 1) * 1.25);
  zoom: var(--wb-zoom);
}
@media (max-width: 700px) {
  .wb-root {
    --wb-zoom: var(--wb-zoom-label, 1);
  }
}

/* ── The hapax ember (Scott, 2026-08-14) ─────────────────────
   A dedicated red for the rarer-is-brighter lens that stays vivid
   in EVERY theme — some themes' --rd-hot reads dull at the ×1
   full-strength step. Themes may override; this is the floor. */
.wb-root {
  /* the yalkut's gold — the star's own colour, for the KEEP lens
     and the kept-verse bracket (Scott, 2026-09-22) */
  --rd-keep: #e8b23a;
  --rd-hapax: #ff4b2b;
  /* the FIRST lens (2026-09-21) — the theme's own violet, the one reader hue
     no other lens takes (sacred = warm · אור = fixed · את = marker · hapax = hot) */
  --rd-first: var(--wb-violet, #a277ff);
}