:root {
  --bg: #faf7f2;
  --ink: #1c1917;
  --muted: #6b6256;
  --faint: #b7ad9d;
  --rule: #e7e1d6;
  --rule-strong: #d2c8b7;
  --accent: #8a3f2c;          /* legacy default; retained for non-name UI accents */
  --accent-soft: #f3e6df;
  --divergent: #1f6e6e;       /* context-divergent (popover badge only) */
  --divergent-soft: #d9ecea;
  --pending: #b08a1e;
  /* Confidence palette — applied to translated names in text + sidebar */
  --conf-high: #4a7c4a;
  --conf-high-soft: #e3eee0;
  --conf-medium: #b08a1e;
  --conf-medium-soft: #f3eacc;
  --conf-low: #9c3d2c;
  --conf-low-soft: #f3dcd5;
  --panel-bg: #ffffff;
  --panel-shadow: 0 24px 48px -16px rgba(28,25,23,0.25);
  --serif: "Iowan Old Style", "Charter", "Source Serif Pro", "Georgia", "Times New Roman", serif;
  --hebrew: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sidebar-w: 268px;
  /* P2.11.3: independent text-scale for English (Latin script) vs
   * Original (Hebrew/Greek source script). Hebrew renders smaller
   * than Latin at the same nominal font-size, so the user often
   * wants different sizes per script. Each scale is set on :root
   * by app.js based on localStorage. */
  --reader-text-scale-latin: 1;
  --reader-text-scale-original: 1.18;
  /* Rare-word highlight palette (mirrors source.css). */
  --rare-bg:        rgba(176, 138, 30, 0.08);
  --rare-border:    rgba(176, 138, 30, 0.22);
}
/* P2.11: theme is now driven by an explicit user choice (light by
 * default, persisted in localStorage as mfb.reader.theme). The OS
 * prefers-color-scheme query is no longer the source of truth.
 * body.theme-dark overrides the :root light values when the user
 * selects dark mode via the sidebar toggle. */
body.theme-dark {
  --rare-bg:     rgba(214, 177, 74, 0.10);
  --rare-border: rgba(214, 177, 74, 0.32);
  --bg: #181614;
  --ink: #ece6db;
  --muted: #9d9385;
  --faint: #57503f;
  --rule: #2e2a25;
  --rule-strong: #45403a;
  --accent: #d99a7b;
  --accent-soft: #2e231d;
  --divergent: #6fbab3;
  --divergent-soft: #1a2a29;
  --pending: #d6b14a;
  --conf-high: #7fb37f;
  --conf-high-soft: #1f2a1d;
  --conf-medium: #d6b14a;
  --conf-medium-soft: #2a241a;
  --conf-low: #d18470;
  --conf-low-soft: #2c1f1a;
  --panel-bg: #211d19;
  --panel-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--serif);
  margin: 0;
  line-height: 1.7;
  font-size: 19px;
  -webkit-font-smoothing: antialiased;
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  background: var(--bg);
  font-family: var(--sans);
  z-index: 30;
}
.sidebar-inner { padding: 28px 22px 60px; position: relative; }

/* P2.11.1: theme toggle. Icon-only square pill in the upper-right
 * of the sidebar — moon when in light mode (click → dark), sun
 * when in dark mode (click → light). The icon is rendered as
 * inline SVG using currentColor so it inherits muted/ink color
 * from the button itself. */
.theme-toggle {
  position: absolute;
  top: 20px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.theme-toggle:hover {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--accent-soft);
}
.theme-toggle svg {
  display: block;
}
.sidebar .brand {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}
.sidebar .brand-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
/* P2.11.2: build indicator moved from fixed bottom-right corner into
 * the sidebar, just under the "TEST BUILD · JONAH" line. Same purpose
 * (glance-confirm which build is loaded), tucked away in the menu
 * area so it's reachable but doesn't sit over the reader content. */
.sidebar .brand-build {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  color: var(--muted);
  opacity: 0.55;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  user-select: none;
  word-break: break-all;
}
.sidebar .brand-build:empty { display: none; }
.sidebar .canon-section { margin-top: 22px; }
.sidebar h4 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 8px;
}
.sidebar h5 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-weight: 600;
  margin: 10px 0 4px 0;
}
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar .book {
  position: relative;
  font-size: 13px;
  line-height: 1.35;
  padding: 5px 8px 5px 12px;
  color: var(--faint);
  cursor: default;
  border-radius: 4px;
  user-select: none;
}
.sidebar .book .book-meaning {
  color: var(--ink);
  font-weight: 500;
}
.sidebar .book .book-conv {
  color: var(--faint);
  font-size: 11.5px;
  margin-left: 3px;
  font-weight: 400;
}
.sidebar .book:not(.available) .book-meaning {
  color: var(--muted);
}
.sidebar .book.untranslated .book-meaning {
  color: var(--faint);
  font-weight: 400;
  font-style: italic;
}
.sidebar .book.available { cursor: pointer; }
.sidebar .book.available:hover { background: var(--accent-soft); }
.sidebar .book.available:hover .book-meaning,
.sidebar .book.active .book-meaning { color: var(--accent); }
.sidebar .book.active {
  color: var(--accent);
  font-weight: 600;
}
/* Vertical progress line beside active book */
.sidebar .book.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: var(--rule-strong);
  border-radius: 2px;
}
.sidebar .book.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 2px;
  height: calc((100% - 4px) * var(--progress, 0));
  background: var(--accent);
  border-radius: 2px;
  transition: height 80ms linear;
}
.sidebar .division-rule {
  height: 1px;
  background: var(--rule);
  margin: 14px 0 14px;
}

/* Mobile sidebar toggle */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 60;
  background: var(--panel-bg);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 6px;
  width: 40px; height: 40px;
  font-size: 20px;
  cursor: pointer;
}
@media (max-width: 880px) {
  .sidebar { transform: translateX(-100%); transition: transform 220ms ease; box-shadow: var(--panel-shadow); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .content-wrap { margin-left: 0 !important; }
  .wrap { padding-top: 70px !important; }
}

/* ===== Main content ===== */
.content-wrap { margin-left: var(--sidebar-w); }
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 28px 120px; }

/* ===== WIP banner ===== */
.wip-banner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 28px 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.wip-banner .wip-inner {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--accent-soft);
}
.wip-banner .wip-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
@media (max-width: 760px) {
  .wip-banner { padding-left: 16px; padding-right: 16px; }
}

header.masthead { border-bottom: 1px solid var(--rule); padding-bottom: 28px; margin-bottom: 36px; }
header.masthead h1 {
  font-size: 38px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
header.masthead .sub {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

.controls {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.controls label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.controls input[type="checkbox"] { accent-color: var(--accent); }
.controls .seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.controls .seg button {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.controls .seg button.active {
  background: var(--ink);
  color: var(--bg);
}

.legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}
.legend .swatch { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--conf-high);
  display: inline-block;
}
.legend .swatch.conf-high::before { background: var(--conf-high); }
.legend .swatch.conf-medium::before { background: var(--conf-medium); }
.legend .swatch.conf-low::before { background: var(--conf-low); }
.legend .swatch.divergent::before { background: var(--divergent); }
.legend .swatch.pending::before { background: var(--pending); }
.legend-note {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  font-style: italic;
}

h2.chapter {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin: 56px 0 18px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
h2.chapter:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.verse { margin: 0; padding: 0; }
.vnum {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-right: 4px;
  letter-spacing: 0.04em;
}

.name {
  color: var(--conf-high);
  border-bottom: 1px dotted var(--conf-high);
  cursor: pointer;
  padding: 0 1px;
  transition: background 120ms ease;
}
.name:hover, .name:focus {
  background: var(--conf-high-soft);
  outline: none;
}
.name.conf-high { color: var(--conf-high); border-bottom-color: var(--conf-high); }
.name.conf-high:hover, .name.conf-high:focus { background: var(--conf-high-soft); }
.name.conf-medium { color: var(--conf-medium); border-bottom-color: var(--conf-medium); }
.name.conf-medium:hover, .name.conf-medium:focus { background: var(--conf-medium-soft); }
.name.conf-low { color: var(--conf-low); border-bottom-color: var(--conf-low); }
.name.conf-low:hover, .name.conf-low:focus { background: var(--conf-low-soft); }
.name.pending {
  color: var(--pending);
  border-bottom-color: var(--pending);
  font-style: italic;
}
body.no-marks .name {
  color: inherit;
  border-bottom: 0;
  background: transparent;
  cursor: default;
  font-style: normal;
}

body.original-view .name { display: none; }
body.original-view .orig { display: inline; }
.orig { display: none; color: inherit; }

/* ===== Side panel (translation note) ===== */
.panel {
  position: fixed;
  top: 0; right: 0;
  width: min(440px, 92vw);
  height: 100%;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  transform: translateX(100%);
  transition: transform 220ms ease;
  z-index: 50;
  overflow-y: auto;
  padding: 36px 32px 60px;
}
.panel.open { transform: translateX(0); }
.panel .close {
  position: absolute;
  top: 14px; right: 14px;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.panel h3 {
  font-family: var(--serif);
  font-size: 32px;
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.panel .translit {
  font-family: var(--sans);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.panel .heb {
  font-family: var(--hebrew);
  font-size: 30px;
  direction: rtl;
  margin: 4px 0 14px;
  color: var(--ink);
}
.panel dl {
  font-family: var(--sans);
  font-size: 13px;
  margin: 0 0 16px;
}
.panel dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 12px;
}
.panel dd {
  margin: 3px 0 0;
  line-height: 1.5;
  color: var(--ink);
}
.panel .badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  margin: 0 6px 4px 0;
}
.panel .badge.divergent { background: var(--divergent-soft); color: var(--divergent); }
.panel .badge.pending { background: transparent; border: 1px solid var(--pending); color: var(--pending); }

.panel .section-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.panel .section-block:first-of-type { border-top: 0; padding-top: 0; }
.panel .section-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.panel .section-block .body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.panel .verse-ref {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  background: var(--rule);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 40;
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* Placeholder view for unavailable books */
.placeholder {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
  font-family: var(--sans);
}
.placeholder h2 {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 600;
}
.placeholder p { font-size: 15px; line-height: 1.6; max-width: 380px; margin: 0 auto 18px; }
.placeholder button {
  font-family: var(--sans);
  font-size: 13px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}

/* Loading indicator */
.loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}

footer.foot {
  margin-top: 80px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
}

/* ===== P2.5 — source-first pocket clickability =====
 * Subtle hover affordance for plain pockets only. Proper-name pockets
 * already carry .name styling; we don't add anything visible to them.
 * The :not(:has(.name)) selector targets only plain pockets — pocket
 * wrappers that don't contain an inner .name span. */
.pocket:not(:has(.name)) {
  cursor: pointer;
  border-radius: 3px;
  transition: background 100ms ease;
}
.pocket:not(:has(.name)):hover {
  background: rgba(127, 127, 127, 0.06);
}
body.theme-dark .pocket:not(:has(.name)):hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ===== Source-aligned view — clickable MACULA source-token spans =====
 * One .source-token per MACULA morph in the source-aligned reader.
 * Plain (non-proper-name) tokens get a subtle hover affordance,
 * mirroring the .pocket pattern above. Proper-name source-tokens wrap
 * an inner .name span and inherit its existing styling, so the
 * :not(:has(.name)) form keeps the hover off them. Sentinel-touch
 * documented in commit. */
.source-token:not(:has(.name)) {
  cursor: pointer;
  border-radius: 3px;
  transition: background 100ms ease;
}
.source-token:not(:has(.name)):hover {
  background: rgba(127, 127, 127, 0.06);
}
body.theme-dark .source-token:not(:has(.name)):hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Fallback-text tokens: when MACULA has no `english` or `gloss` for
 * a morph, the renderer falls back to transliteration or a bracketed
 * POS label. Mark those visually as a romanization/placeholder so
 * readers see they're not a primary English equivalent. */
.source-token[data-token-kind="translit"],
.source-token[data-token-kind="pos-fallback"],
.source-token[data-token-kind="empty"] {
  font-style: italic;
  color: var(--muted);
}

/* ===== P2.9 — reader-controls ===========================================
 * Text-size scale, rare-word highlight, tiny gloss line under tokens
 * in Original Language. All three are reader-side controls that toggle
 * via localStorage; the renderer doesn't need to know — body-level
 * data attributes drive CSS, and this section consumes them. */

/* Text-scale: independent per-script. Latin views (Meaning-First-Bible,
 * WEB, Source-Aligned) use --reader-text-scale-latin; Original Language
 * uses --reader-text-scale-original. Either may be set independently
 * via app.js + localStorage. */
#reader-body p.verse {
  font-size: calc(20px * var(--reader-text-scale-latin));
}
/* Original Language uses a larger base than Latin so Hebrew at "S"
 * lands roughly where Latin's "L" does — Hebrew letterforms read
 * smaller than Latin at the same nominal size, and the previous
 * shared 20px base was too small even at L for comfortable reading. */
#reader-body p.verse.verse-original-language {
  font-size: calc(27px * var(--reader-text-scale-original));
  line-height: 2;
}

/* P2.11.4: text-size control in the masthead's upper-right.
 * Script-aware — renders A/A/A in Latin views, א/א/א in Original
 * Language — at three progressively larger sizes that visually
 * preview the choice. The button labels themselves communicate
 * what each does, so no separate row label is needed. */
.masthead { position: relative; }
.text-size-control {
  position: absolute;
  top: 6px;
  right: 0;
  display: inline-flex;
  align-items: baseline;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--serif);
  background: transparent;
}
.text-size-control button {
  background: transparent;
  border: 0;
  padding: 0 11px;
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
}
.text-size-control button[data-size="S"] { font-size: 11px; }
.text-size-control button[data-size="M"] { font-size: 14px; }
.text-size-control button[data-size="L"] { font-size: 18px; }
.text-size-control button:hover {
  background: rgba(127, 127, 127, 0.06);
  color: var(--ink);
}
body.theme-dark .text-size-control button:hover {
  background: rgba(255, 255, 255, 0.05);
}
.text-size-control button.active {
  background: var(--accent-soft);
  color: var(--ink);
}
/* Hebrew aleph variant — uses the project's Hebrew font for accurate
 * preview of Hebrew sizing. */
.text-size-control button[lang="he"] {
  font-family: var(--hebrew);
}

/* Rare-word highlight (revised): SUBTLE color shift only — no
 * background, no border, no shadow. The original full-bleed rare
 * tint was visually overwhelming. We just nudge the text color to
 * a warm amber so rare words "pop" without dominating the page. */
:root {
  --rare-text: #8b6512;
}
body.theme-dark {
  --rare-text: #d4b566;
}
body.show-rare .source-token[data-rare="1"]:not(:has(.name)) {
  color: var(--rare-text);
}

/* Tiny gloss line under rare Original-Language source-tokens.
 * Per-user (P2.10): tiny-gloss is meaningful as a vocabulary aid,
 * not a translation underlay. So glosses appear ONLY on tokens that
 * are marked rare by the current threshold (data-rare="1") — same
 * threshold the rare-highlight uses. Body must have BOTH .show-tiny-gloss
 * AND the token must have data-rare="1" for the gloss to show.
 * The renderer emits a hidden <span class="tiny-gloss">…</span>
 * inside every Original-Language source-token; CSS reveals only
 * the rare ones. */
.tiny-gloss { display: none; }
body.show-tiny-gloss
  #reader-body p.verse.verse-original-language .source-token[data-rare="1"] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: top;
  margin-bottom: 4px;
}
body.show-tiny-gloss
  #reader-body p.verse.verse-original-language .source-token[data-rare="1"] .tiny-gloss {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.15;
  color: var(--muted);
  margin-top: 2px;
  max-width: 7em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  unicode-bidi: isolate;
}

/* P2.10: sidebar-resident reader controls. Sits between the modes
 * nav and the canon list so it's accessible from any reader scroll
 * position (the sidebar is a sticky aside). Subtle, low-contrast. */
.sidebar-reader-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.03);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}
.sidebar-reader-controls .src-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.sidebar-reader-controls .src-control-label {
  flex: 0 0 auto;
}
.sidebar-reader-controls select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 60%;
  padding: 3px 4px;
  font-size: 11px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  cursor: pointer;
}
.sidebar-reader-controls label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}
.sidebar-reader-controls label:has(input:disabled),
.sidebar-reader-controls .src-control-row:has(select:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
.sidebar-reader-controls .src-control-hint {
  font-style: italic;
  font-size: 10px;
  color: var(--faint);
}

/* Reader-view tabs stacked vertically inside the sidebar. The
 * masthead used a horizontal pill group; here labels are too long
 * for that, and the sidebar is the natural home for navigation-
 * adjacent controls anyway. */
.sidebar-reader-controls .seg-views {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-reader-controls .seg-views button {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  text-align: center;
  transition: background 100ms ease, border-color 100ms ease;
}
.sidebar-reader-controls .seg-views button:hover:not(.active) {
  background: rgba(127, 127, 127, 0.05);
}
.sidebar-reader-controls .seg-views button.active {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--accent-soft);
}
.sidebar-reader-controls .src-control-divider {
  height: 1px;
  background: var(--rule);
  margin: 4px 0 2px;
}

/* Confidence legend visibility — only meaningful in Meaning-First-Bible
 * view. The masthead always renders the legend; CSS hides it for the
 * three non-MFB views via body[data-view] which app.js keeps in sync
 * with CURRENT_VIEW. Solves the WEB↔MFB transition (no re-render)
 * leaving the legend stuck in the wrong state. */
body:not([data-view="meaning_first"]) .legend,
body:not([data-view="meaning_first"]) .legend-note {
  display: none;
}