/* ============================================================
   Bible Reader Page
   ============================================================ */

/* ── Reader fills all available width — no centering cap ──── */
.reader-page .container {
  max-width: none;
  padding: 0 25px;
}

.reader-page main {
  padding: 25px 0 2rem;
}

/* ── Page layout: reading text + optional notes panel ────── */
.reader-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 700px) {
  .reader-layout { gap: 1.25rem; }
  .reader-main { grid-column: 1; grid-row: 1; }
  /* Notes panel open: add panel column */
  .reader-layout--notes-open {
    grid-template-columns: 1fr 290px;
  }
  .reader-layout--notes-open .reader-xref-panel { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1300px) {
  .reader-layout--notes-open { grid-template-columns: 1fr 400px; }
}

/* Chapter sidebar: hidden by default; shown when .reader-layout--with-sidebar is set */
.reader-sidebar { display: none; }

@media (min-width: 700px) {
  .reader-layout--with-sidebar {
    grid-template-columns: 160px 1fr !important;
  }
  .reader-layout--with-sidebar.reader-layout--notes-open {
    grid-template-columns: 160px 1fr 290px !important;
  }
  .reader-layout--with-sidebar .reader-sidebar {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
  }
  .reader-layout--with-sidebar .reader-main       { grid-column: 2; }
  .reader-layout--with-sidebar .reader-xref-panel { grid-column: 3; }
}

/* ── Side panel (Notes only) ──────────────────────────────── */
.reader-xref-panel { display: none; }

@media (min-width: 700px) {
  .reader-layout--notes-open .reader-xref-panel {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 1.5rem);
    overflow: hidden;
    scrollbar-width: thin;
  }
}

.reader-xref-panel__heading {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  padding: 0 0 0.5rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.reader-xref-group {
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}

.reader-xref-group__title {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.4rem;
}

.reader-xref-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.reader-xref-group__item {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  display: flex;
  gap: 0.3rem;
  align-items: baseline;
}

.reader-xref-group__num {
  color: var(--color-accent);
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 1rem;
}

.reader-xref-group__link {
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}

.reader-xref-group__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── New compact xref row layout ────────────────── */
.reader-xref-row {
  margin-bottom: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
  align-items: baseline;
}

.reader-xref-row__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
  min-width: 2.5rem;
}

.reader-xref-row__refs {
  flex: 1;
  min-width: 0;
  line-height: 1.7;
  word-break: break-word;
}

.reader-xref-sep {
  color: var(--color-muted);
  user-select: none;
  pointer-events: none;
}

.reader-xref-toggle {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0 0.22rem;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1.5;
  margin-right: 0.08rem;
  transition: color 0.1s, border-color 0.1s;
}

.reader-xref-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }

.reader-xref-toggle--on {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.reader-xref-empty {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  padding: 0.6rem 0;
}

/* ── Cross-ref multi-passage chips (RD-G) ────────────────────────────────── */
.reader-xref-scope-note {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin: 0 0 0.35rem;
  padding: 0;
}
.reader-xref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.reader-xref-chip {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.reader-xref-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.reader-xref-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.reader-sidebar__book {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  padding: 0.6rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-sidebar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 0.4rem;
}

.reader-sidebar__ch {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.28rem 0.1rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-accent);
  cursor: pointer;
  text-align: center;
  line-height: 1;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.reader-sidebar__ch:hover {
  background: rgba(184,134,11,0.1);
  border-color: rgba(184,134,11,0.3);
  color: var(--color-primary);
}

.reader-sidebar__ch--active {
  background: rgba(184,134,11,0.15);
  border-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 700;
}

.reader-sidebar__ch:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.reader-sidebar__intro-row {
  padding: 0.3rem 0.4rem 0.1rem;
}

.reader-sidebar__intro {
  width: 100%;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.22rem 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.reader-sidebar__intro:hover {
  background: rgba(92,61,30,0.08);
  border-color: rgba(92,61,30,0.3);
  color: var(--color-primary);
}

.reader-sidebar__intro--active {
  background: rgba(92,61,30,0.12);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.reader-sidebar__intro:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ── Controls wrapper (lookup + browse) ──────────────────── */
.reader-controls {
  margin-bottom: 1.75rem;
}

.reader-controls .reader-lookup-bar {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0.2rem;
}

/* ── Lookup bar ──────────────────────────────────────────── */
.reader-lookup-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.75rem;
}

/* ── Browse bar ──────────────────────────────────────────── */
.reader-browse-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0 0.65rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.reader-browse-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.reader-browse-select {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--color-text);
  background: var(--color-surface);
  cursor: pointer;
  min-width: 0;
}

.reader-browse-select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.reader-browse-select:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Version picker is wider than book/chapter — cap it so the bar doesn't overflow */
.reader-browse-select--ver {
  max-width: 14rem;
}

.reader-browse-hint {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ── View options + Study Tools popovers (RD-B) ──────────────────────────── */
/* .reader-studytools-* mirrors .reader-view-* — the 📖 Study Tools popover groups
   the study/reading toggles (Interlinear, Book Info, Commentary, Cross Refs,
   Footnotes, Connections, Parallels, Study desk) on every viewport, restoring them
   to phone users. (¶ Paragraphs is a display option and lives in the ⚙ View popover.) */
.reader-view-wrap,
.reader-studytools-wrap {
  position: relative;
  display: inline-block;
}
.reader-view-btn,
.reader-studytools-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-view-btn:hover,
.reader-studytools-btn:hover {
  background: rgba(92,61,30,.06);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.reader-view-btn[aria-expanded="true"],
.reader-studytools-btn[aria-expanded="true"] {
  background: rgba(92,61,30,.08);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.reader-view-popover,
.reader-studytools-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  min-width: 170px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.reader-view-popover[hidden],
.reader-studytools-popover[hidden] { display: none; }
/* Items inside the popover use their existing button styles;
   just ensure they render as full-width rows */
.reader-view-popover > button,
.reader-view-popover > div,
.reader-studytools-popover > button,
.reader-studytools-popover > div {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}
/* Font size group inside popover: keep as a row of 4 buttons */
.reader-view-popover > #reader-font-size-grp {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  width: 100%;
}
.reader-view-popover > #reader-font-size-grp .reader-font-size-btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}

.reader-lookup-input {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface);
  min-width: 0;
}

.reader-lookup-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.reader-lookup-btn {
  padding: 0.45rem 1.1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}

.reader-lookup-btn:hover { background: #4a3018; }

.reader-lookup-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.reader-lookup-status {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: #b03a2e;
  flex-shrink: 0;
}

/* ── Results container ───────────────────────────────────── */
.reader-results {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ── Individual result group ─────────────────────────────── */
.reader-result-group {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.1rem 1.35rem 1rem;
  background: var(--color-surface);
}

.reader-result-group__title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-primary);
  margin: 0 0 0.75rem;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.reader-result-group__text {
  font-family: var(--font-body);
  font-size: var(--reader-font-size, 1.05rem);
  line-height: 1.95;
  color: var(--color-text);
  margin: 0;
}

/* Font size presets — set by F3 toggle buttons */
body.bsw-font-sm  { --reader-font-size: 0.88rem; }
body.bsw-font-md  { --reader-font-size: 1.05rem; }
body.bsw-font-lg  { --reader-font-size: 1.22rem; }
body.bsw-font-xl  { --reader-font-size: 1.42rem; }

.reader-result-group__attr {
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* Chapter break shown when multiple chapters are in one result group */
.reader-chapter-break {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  clear: both;
}
.reader-chapter-break::before,
.reader-chapter-break::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.reader-chapter-break__label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Verse inline elements ───────────────────────────────── */
.reader-verse {
  display: inline;
}

.reader-verse--hl-yellow   { background: rgba(255, 230, 80,  0.45); border-radius: 2px; }
.reader-verse--hl-orange   { background: rgba(255, 165, 50,  0.42); border-radius: 2px; }
.reader-verse--hl-pink     { background: rgba(235, 100, 150, 0.38); border-radius: 2px; }
.reader-verse--hl-red      { background: rgba(220, 80,  80,  0.36); border-radius: 2px; }
.reader-verse--hl-purple   { background: rgba(160, 80,  200, 0.34); border-radius: 2px; }
.reader-verse--hl-lavender { background: rgba(180, 155, 230, 0.42); border-radius: 2px; }
.reader-verse--hl-green    { background: rgba(100, 200, 120, 0.40); border-radius: 2px; }
.reader-verse--hl-teal     { background: rgba(60,  190, 175, 0.37); border-radius: 2px; }
.reader-verse--hl-blue     { background: rgba(80,  160, 255, 0.37); border-radius: 2px; }
.reader-verse--hl-mint     { background: rgba(120, 220, 200, 0.37); border-radius: 2px; }

.reader-verse__num {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-accent);
  vertical-align: super;
  margin-right: 0.18em;
  user-select: none;
  cursor: pointer;
}

.reader-verse__num--highlighted { color: #b8860b; } /* default/yellow */
.reader-verse--hl-orange  .reader-verse__num--highlighted { color: #b35f00; }
.reader-verse--hl-pink    .reader-verse__num--highlighted { color: #a83060; }
.reader-verse--hl-red     .reader-verse__num--highlighted { color: #962020; }
.reader-verse--hl-purple  .reader-verse__num--highlighted { color: #6b2a9e; }
.reader-verse--hl-lavender .reader-verse__num--highlighted { color: #5a4a8e; }
.reader-verse--hl-green   .reader-verse__num--highlighted { color: #2d7a2d; }
.reader-verse--hl-teal    .reader-verse__num--highlighted { color: #1a7570; }
.reader-verse--hl-blue    .reader-verse__num--highlighted { color: #1a5fa8; }
.reader-verse--hl-mint    .reader-verse__num--highlighted { color: #1a7a6e; }

/* Verse Study sticky header highlight indicator */
.vs-header--hl-yellow   { border-top: 3px solid rgba(255, 200, 0,   0.7); }
.vs-header--hl-orange   { border-top: 3px solid rgba(255, 140, 0,   0.7); }
.vs-header--hl-pink     { border-top: 3px solid rgba(220, 80,  140, 0.7); }
.vs-header--hl-red      { border-top: 3px solid rgba(200, 50,  50,  0.7); }
.vs-header--hl-purple   { border-top: 3px solid rgba(140, 60,  190, 0.7); }
.vs-header--hl-lavender { border-top: 3px solid rgba(150, 120, 210, 0.7); }
.vs-header--hl-green    { border-top: 3px solid rgba(60,  170, 80,  0.7); }
.vs-header--hl-teal     { border-top: 3px solid rgba(30,  170, 155, 0.7); }
.vs-header--hl-blue     { border-top: 3px solid rgba(50,  130, 230, 0.7); }
.vs-header--hl-mint     { border-top: 3px solid rgba(80,  200, 180, 0.7); }

/* RD-E: active verse highlight when modal is open */
.reader-verse--active {
  background: rgba(92, 61, 30, .07);
  border-radius: 3px;
  outline: 1px solid rgba(92, 61, 30, .07);
}

/* Bookmark indicator on verse superscript */
.reader-verse__num--bookmarked {
  color: var(--color-primary);
}
.reader-verse__num--bookmarked::before {
  content: '★';
  font-size: 0.5rem;
  vertical-align: super;
  margin-right: 1px;
}

/* Small dot indicator when a verse has a note */
.reader-verse--has-note .reader-verse__num::after {
  content: '●';
  font-size: 0.45rem;
  vertical-align: super;
  margin-left: 1px;
  color: var(--color-primary);
}

/* ── Hint / loading / error text ─────────────────────────── */
.reader-hint {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-muted);
  padding: 0.5rem 0;
  margin: 0;
}

/* ── Chapter navigation ──────────────────────────────────── */
.reader-chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.reader-nav-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.reader-nav-btn:hover {
  background: rgba(184,134,11,0.08);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.reader-nav-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.reader-chapter-nav--bottom {
  margin-top: 0.75rem;
  margin-bottom: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 0.65rem;
}

.reader-nav-btn--begin {
  padding: 0.45rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 4px rgba(92,61,30,0.25);
}

.reader-nav-btn--begin:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}

/* ── Book introduction inline page ──────────────────────── */
.reader-intro-page {
  padding: 0.25rem 0;
}

.reader-intro-inner {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  margin: 0.75rem 0;
  background: var(--color-surface);
}

.reader-intro-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 0.65rem;
  line-height: 1.25;
}

.reader-intro-keyverse {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  margin: 0.75rem 0 0.5rem;
  padding: 0.55rem 0.85rem;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 4px 4px 0;
}

.reader-intro-kv-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  flex-shrink: 0;
}

.reader-intro-kv-note {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--color-muted);
  font-style: italic;
  flex-basis: 100%;
  padding-left: 0.2rem;
}

.reader-intro-begin {
  border-top: 2px solid var(--color-border);
  padding-top: 0.85rem;
}

/* ── Book intro page: section layout ────────────────────── */
.ri-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-muted);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.25rem;
}

.ri-section {
  margin-top: 1.4rem;
}

.ri-section__heading {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 0.6rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.ri-body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

.ri-body--christ {
  border-left: 3px solid var(--color-primary);
  padding-left: 0.85rem;
  color: var(--color-heading);
}

/* Related Maps chips */
.ri-map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.ri-map-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .65rem;
  border-radius: 20px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}

.ri-map-chip:hover {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  text-decoration: none;
}

/* Expanded themes */
.ri-theme-item {
  margin-bottom: 0.9rem;
}

.ri-theme-item:last-child { margin-bottom: 0; }

.ri-theme-title {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 0.25rem;
}

/* Key people */
.ri-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ri-person {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text);
}

.ri-person__name {
  color: var(--color-heading);
  font-family: var(--font-ui);
}

.ri-person__role {
  color: var(--color-muted);
}

/* Key verses */
.ri-keyverses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ri-keyverse {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.ri-keyverse__ref {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-accent);
  white-space: nowrap;
}

.ri-keyverse__ref:hover { color: var(--color-primary); border-color: var(--color-primary); }

.ri-keyverse__note {
  color: var(--color-muted);
  font-size: 0.88rem;
}

/* ── Timeline — two-part: era arc + event track ─────────────── */

/* Era arc — segmented colour track replaces the old wrapping chip list */
.ri-tl-arc {
  margin-bottom: 1.1rem;
}
.ri-tl-arc-track {
  display: flex;
  gap: 2px;
  margin-bottom: 0.35rem;
}
.ri-tl-era {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: var(--color-border);
}
.ri-tl-era--active {
  flex: 2;
  background: var(--color-primary);
}
.ri-tl-arc-lbl {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
}
.ri-tl-arc-lbl strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* 3-column event track */
/* Horizontal 7-item timeline row: before[0..2] | BOOK | after[0..2] */
.ri-tl-row {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  padding-bottom: 0.75rem;
  gap: 0;
}

.ri-tl-item {
  flex: 1 0 0;
  min-width: 90px;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 0.35rem;
}

/* Horizontal connector through dot centre. Dot is always the first child (no year above it),
   so top: 5px reliably bisects the 10px dot. The 14px current dot is centred at the same
   position because its margin-top of -2px is removed now that year follows below. */
.ri-tl-item::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

/* Dot */
.ri-tl-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  flex-shrink: 0;
  margin-bottom: 0.45rem;
}
.ri-tl-dot--book  { color: var(--color-primary); background: var(--color-primary); }
.ri-tl-dot--event { color: var(--color-accent); background: transparent; }
.ri-tl-dot--world { color: var(--color-muted); background: transparent; }
.ri-tl-dot--empty { color: var(--color-border); background: transparent; border-style: dashed; }
/* Current book dot: slightly larger to stand out; no margin-top offset needed now that
   dot is always the first child and year appears below the label. */
.ri-tl-dot--current {
  width: 14px;
  height: 14px;
  margin-top: -2px; /* -2px so its centre (7px) aligns with the 5px connector line */
  color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(92, 61, 30, 0.18);
}

/* Year / date label — appears below the event label now that dot comes first */
.ri-tl-year {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.ri-tl-year--current { color: var(--color-primary); }

/* Event / book label */
.ri-tl-label {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: none;
  display: block;
}
a.ri-tl-label { border-bottom: 1px dotted currentColor; }
a.ri-tl-label:hover { color: var(--color-primary); }

.ri-tl-label--book    { color: var(--color-primary); }
.ri-tl-label--event   { color: var(--color-text); }
.ri-tl-label--world   { color: var(--color-muted); font-style: italic; }
.ri-tl-label--current { font-weight: 700; color: var(--color-primary); font-size: 0.82rem; }

/* Dim placeholder slots */
.ri-tl-item--empty { opacity: 0.3; }

/* ── Cross-reference footnote markers ────────────────────── */
/* Deliberately different from verse numbers (gold accent) — use teal-blue */
.reader-xref-note {
  font-family: var(--font-ui);
  font-size: 0.56rem;
  font-weight: 700;
  color: #4a85a3;
  vertical-align: super;
  cursor: pointer;
  margin-left: 0.1em;
  margin-right: 0.04em;
  line-height: 1;
  text-decoration: none;
  border-bottom: 1px dotted #4a85a3;
  transition: color 0.12s, border-color 0.12s;
  user-select: none;
}

.reader-xref-note:hover,
.reader-xref-note:focus-visible {
  color: #2d6080;
  border-bottom-style: solid;
}

.reader-xref-note:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-radius: 1px;
}

/* CSS-36: the cross-ref note marker hardcodes a light-mode blue; lighten it for dark
   mode (manual toggle + system preference) so it stays legible on the dark surface. */
[data-theme="dark"] .reader-xref-note { color: #7ab3d0; border-bottom-color: #7ab3d0; }
[data-theme="dark"] .reader-xref-note:hover,
[data-theme="dark"] .reader-xref-note:focus-visible { color: #a9d4ea; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader-xref-note { color: #7ab3d0; border-bottom-color: #7ab3d0; }
  :root:not([data-theme="light"]) .reader-xref-note:hover,
  :root:not([data-theme="light"]) .reader-xref-note:focus-visible { color: #a9d4ea; }
}

/* Hidden by default; .bsw-xref-notes-on on <body> reveals them */
body:not(.bsw-xref-notes-on) .reader-xref-note { display: none; }

/* ── Study guide link banner ─────────────────────────────── */
.reader-study-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  margin-bottom: 1.25rem;
  background: rgba(184,134,11,0.07);
  border: 1px solid rgba(184,134,11,0.28);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.reader-study-banner__icon  { font-size: 1rem; flex-shrink: 0; }
.reader-study-banner__text  { color: var(--color-muted); flex-shrink: 0; }
.reader-study-banner__link  {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.12s;
}
.reader-study-banner__link:hover { color: var(--color-accent); }

/* ── RD-C: Resume banner ────────────────────────────────── */
.reader-resume-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  font-size: 0.9rem;
}
.reader-resume-link {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.reader-resume-link:hover { text-decoration: underline; }
.reader-resume-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1rem;
  padding: 0 0.2rem;
  margin-left: auto;
  line-height: 1;
}

/* ── Strong's occurrences banner ──────────────────────────── */
.reader-strongs-banner {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .65rem 1rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  font-size: .88rem;
}

.reader-strongs-banner__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem .45rem;
}

.reader-strongs-clear-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: .85rem;
  padding: .1rem .35rem;
  border-radius: 3px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.reader-strongs-clear-btn:hover {
  color: var(--color-text);
  background: var(--color-border, #ddd);
}

.reader-strongs-banner__nav {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.reader-strongs-banner__code {
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .4rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  letter-spacing: .04em;
}

.reader-strongs-banner__lemma {
  font-size: 1.05rem;
  font-family: var(--font-serif, serif);
}

.reader-strongs-banner__translit {
  font-style: italic;
  color: var(--color-muted);
  font-size: .82rem;
}

.reader-strongs-banner__gloss {
  font-weight: 600;
}

.reader-strongs-banner__count {
  font-size: .75rem;
  color: var(--color-muted);
}

.reader-strongs-nav-btn {
  padding: .2rem .65rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 4px;
  background: var(--color-bg);
  font-size: .78rem;
  cursor: pointer;
  color: var(--color-primary);
  transition: background .12s, border-color .12s;
}
.reader-strongs-nav-btn:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.reader-strongs-nav-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* ── RD-H: Empty state ──────────────────────────────────── */
.reader-empty-state {
  text-align: center;
  padding: 2rem 0;
}
.reader-quick-starts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}
.reader-qs-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  transition: background 0.15s, color 0.15s;
}
.reader-qs-chip:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* ── Lookup bar ──────────────────────────────── */
  .reader-lookup-bar {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  /* Input spans full width; Go button fills remaining row */
  .reader-lookup-input {
    width: 100%;
    flex: none;
    font-size: 1rem;   /* prevents iOS auto-zoom */
    min-height: 44px;
  }
  .reader-lookup-btn {
    flex: 1;
    min-height: 44px;
  }
  .reader-lookup-status { flex-basis: 100%; }

  /* ── Browse bar: two rows ────────────────────── */
  /* Row 1: "Browse:" label + book select + chapter select  */
  /* Row 2: feature toggle buttons (Parallels, Compare, etc.) */
  .reader-browse-bar {
    gap: 0.4rem;
    row-gap: 0.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.65rem;
    align-items: center;
  }

  /* Keep label + selects on their own row */
  .reader-browse-label { order: 1; flex-shrink: 0; }
  .reader-browse-select {
    order: 1;
    flex: 1;
    min-width: 0;
    font-size: 1rem;   /* prevents iOS auto-zoom */
    min-height: 44px;
  }

  /* Zero-height flex break forces toggle buttons to the next row */
  .reader-browse-bar::after {
    content: '';
    display: block;
    flex-basis: 100%;
    height: 0;
    order: 1;
  }

  /* All dynamically injected buttons: row 2. CSS-37: 44px min touch target. */
  .reader-browse-bar > button {
    order: 2;
    flex-shrink: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.84rem;
    padding: 0 0.65rem;
  }
  .reader-browse-bar > div {
    order: 2;
    flex-shrink: 0;
  }

  /* Font size buttons: square, readable. CSS-37: 44px min touch target. */
  .reader-font-size-grp { margin-right: 0; }
  .reader-font-size-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0;
  }

  /* Wide/Split/Sidebar are in the ⚙ View popover; hide legacy rules gracefully */
  #reader-wide-btn,
  #reader-split-btn { display: none; }

  /* Interlinear / Book Info / Footnotes / Connections / Parallels / Paragraphs
     are no longer hidden on phones — they now live inside the 📖 Study Tools
     popover (built by initStudyToolsToggle), so mobile users reach them there. */

  /* Popover menu items (View + Study Tools) need ≥44px tap targets on touch.
     They are children of the popover, not direct .reader-browse-bar buttons,
     so the generic 44px rule above doesn't reach them. */
  .reader-view-btn,
  .reader-studytools-btn,
  .reader-view-popover > button,
  .reader-studytools-popover > button {
    min-height: 44px;
  }

  /* ── Results ─────────────────────────────────── */
  .reader-browse-hint { display: none; }
  .reader-result-group { padding: 0.85rem 1rem 0.75rem; }
  .reader-result-group__text { font-size: var(--reader-font-size, 1rem); }
}

/* ── Mobile chapter sidebar ─────────────────────────────────────────────────
   The sidebar column is locked behind min-width: 700px, so toggling
   reader-layout--with-sidebar on a phone does nothing. Show it instead as a
   full-width scrollable panel that slots above the reader content.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 699px) {
  .reader-layout--with-sidebar .reader-sidebar {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    max-height: 14rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
  }

  /* More columns fit across the full phone width */
  .reader-layout--with-sidebar .reader-sidebar .reader-sidebar__grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  }

  /* RD-K: keyboard hints have no value on touch devices */
  .reader-browse-hint { display: none; }

  /* WCAG 2.1 SC 2.5.5: chapter buttons need ≥44px tap target on touch displays */
  .reader-layout--with-sidebar .reader-sidebar .reader-sidebar__ch {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.85rem;
  }
}

/* ── Columns / Reader toggle buttons ─────────────────────── */
.reader-columns-btn,
.reader-mode-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-columns-btn:hover,
.reader-mode-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-columns-btn--on,
.reader-mode-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.25);
}
.reader-columns-btn--on:hover,
.reader-mode-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}

/* ── Read-aloud (G2 audio) — button, current-verse highlight, control bar ───── */
.reader-audio-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-audio-btn:hover { background: rgba(92,61,30,0.07); border-color: rgba(92,61,30,0.35); color: var(--color-text); }
.reader-audio-btn--on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(92,61,30,0.25); }
.reader-audio-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Verse currently being read aloud */
.reader-verse--reading {
  background: rgba(140, 106, 0, 0.14);
  border-radius: 3px;
  box-shadow: -3px 0 0 0 var(--color-accent);
}

/* Floating audio control bar (shown while reading) */
.reader-audio-bar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-text);
}
.reader-audio-bar__btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  color: var(--color-text);
}
.reader-audio-bar__btn:hover { background: var(--color-border); }
.reader-audio-bar__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.reader-audio-bar__rate { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-muted); }
.reader-audio-bar__rate-sel {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.reader-audio-bar__status { color: var(--color-muted); min-width: 4.5rem; }
.reader-audio-bar__hint { color: var(--color-muted); font-size: 0.72rem; font-style: italic; }
/* While reading, verses are click-to-jump targets */
body.bsw-reader-audio-active #reader-results .reader-verse { cursor: pointer; }
@media (max-width: 540px) { .reader-audio-bar__hint { display: none; } }
.reader-columns-btn:focus-visible,
.reader-mode-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Columns mode ─────────────────────────────────────────── */
body.bsw-columns-on .reader-result-group__text {
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--color-border);
  text-align: justify;
}
/* Suppress columns inside grids that have their own two-column layout */
body.bsw-columns-on .reader-layout--comm-mode .reader-result-group__text {
  column-count: 1;
}
@media (max-width: 700px) {
  body.bsw-columns-on .reader-result-group__text { column-count: 1; }
}

/* ── Reader mode (no verse numbers, no chapter markers) ────── */
body.bsw-reader-mode .reader-verse__num       { display: none; }
body.bsw-reader-mode .reader-chapter-break    { display: none; }
body.bsw-reader-mode .reader-result-group__title { display: none; }

/* ── Xref footnotes toggle button ────────────────────────── */
.reader-xref-notes-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-xref-notes-btn:hover {
  background: rgba(184,134,11,0.07);
  border-color: rgba(184,134,11,0.4);
  color: var(--color-text);
}
.reader-xref-notes-btn--on {
  background: var(--color-accent, #b8860b);
  border-color: var(--color-accent, #b8860b);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(184,134,11,0.35);
}
.reader-xref-notes-btn--on:hover {
  background: #a07808;
  border-color: #a07808;
  color: #fff;
}
.reader-xref-notes-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.reader-echoes-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-echoes-btn:hover {
  background: rgba(184,134,11,0.07);
  border-color: rgba(184,134,11,0.4);
  color: var(--color-text);
}
.reader-echoes-btn--on {
  background: var(--color-accent, #b8860b);
  border-color: var(--color-accent, #b8860b);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(184,134,11,0.35);
}
.reader-echoes-btn--on:hover {
  background: #a07808;
  border-color: #a07808;
  color: #fff;
}
.reader-echoes-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Synoptic Parallels button ───────────────────────────── */
.reader-parallels-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-parallels-btn:hover {
  background: rgba(60,100,160,0.07);
  border-color: rgba(60,100,160,0.4);
  color: var(--color-text);
}
.reader-parallels-btn--on {
  background: #3c64a0;
  border-color: #3c64a0;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(60,100,160,0.35);
}
.reader-parallels-btn--on:hover {
  background: #2d4f82;
  border-color: #2d4f82;
  color: #fff;
}
.reader-parallels-btn:focus-visible {
  outline: 2px solid #3c64a0;
  outline-offset: 2px;
}

/* ── Synoptic panel (⇔ Parallels) ───────────────────────── */
.reader-synoptic-panel {
  margin: 0.75rem 0 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.9rem;
}
.reader-synoptic-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  background: var(--color-surface-2, #f5f5f5);
  padding: 0.4rem 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
}
.reader-synoptic-label:hover { color: var(--color-text); }
.reader-synoptic-label:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.reader-synoptic-chevron {
  flex-shrink: 0;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}
.reader-synoptic-panel--collapsed .reader-synoptic-chevron { transform: rotate(-90deg); }
.reader-synoptic-panel--collapsed .reader-synoptic-grid { display: none; }
.reader-synoptic-grid {
  display: flex;
  overflow-x: auto;
}
.reader-synoptic-col {
  flex: 1 1 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  transition: flex 0.18s ease, min-width 0.18s ease;
}
.reader-synoptic-col:last-child { border-right: none; }
.reader-synoptic-col--collapsed {
  flex: 0 0 34px;
  min-width: 34px;
  overflow: hidden;
}
.reader-synoptic-col-hdr {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  background: var(--color-surface-2, #f5f5f5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.reader-synoptic-col-ref {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
}
.reader-synoptic-col-collapse {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.18rem;
  border-radius: 3px;
  flex-shrink: 0;
  transition: color 0.1s, background 0.1s;
}
.reader-synoptic-col-collapse:hover {
  color: var(--color-text);
  background: var(--color-border);
}
/* Collapsed: rotate the header into a vertical strip */
.reader-synoptic-col--collapsed .reader-synoptic-col-hdr {
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-height: 120px;
  border-bottom: none;
  padding: 0.5rem 0.2rem;
  gap: 0.3rem;
}
.reader-synoptic-col--collapsed .reader-synoptic-col-ref {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-overflow: clip;
  flex: 1;
}
.reader-synoptic-col--collapsed .reader-synoptic-col-text { display: none; }
.reader-synoptic-col-text {
  padding: 0.5rem 0.65rem;
  line-height: 1.65;
  flex: 1;
}
.reader-synoptic-col--loading .reader-synoptic-col-text {
  color: var(--color-muted);
  font-style: italic;
}
.reader-synoptic-text { margin: 0; }
.reader-synoptic-vnum {
  font-size: 0.68rem;
  color: var(--color-muted);
  vertical-align: super;
  line-height: 0;
  margin-right: 0.12em;
  margin-left: 0.3em;
  user-select: none;
}
.reader-synoptic-vnum:first-child { margin-left: 0; }
.reader-synoptic-unavail {
  color: var(--color-muted);
  font-style: italic;
  font-size: 0.85rem;
}
/* Mobile: stack columns vertically */
@media (max-width: 600px) {
  .reader-synoptic-grid { flex-direction: column; }
  .reader-synoptic-col {
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .reader-synoptic-col:last-child { border-bottom: none; }
  .reader-synoptic-col--collapsed {
    flex: 0 0 auto;
    min-height: 36px;
    min-width: 0;
    overflow: hidden;
  }
  .reader-synoptic-col--collapsed .reader-synoptic-col-hdr {
    flex-direction: row;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    border-bottom: none;
    padding: 0.3rem 0.45rem;
  }
  .reader-synoptic-col--collapsed .reader-synoptic-col-ref {
    writing-mode: horizontal-tb;
    transform: none;
    text-overflow: ellipsis;
    flex: 1;
  }
}

/* ── Parallel panels container ───────────────────────────── */
.reader-parallels-container {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Individual parallel panel ───────────────────────────── */
.reader-parallel-section {
  border-left: 3px solid var(--color-border);
  border-radius: 0 4px 4px 0;
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 0.15s;
}

/* Type-specific left border colors */
.reader-parallel-section[data-parallel-type="parallel"]          { border-left-color: #4a90d9; }
.reader-parallel-section[data-parallel-type="fulfillment"]       { border-left-color: #4caf74; }
.reader-parallel-section[data-parallel-type="prophecy-source"]   { border-left-color: #b8860b; }
.reader-parallel-section[data-parallel-type="quotation"]         { border-left-color: #9b59b6; }
.reader-parallel-section[data-parallel-type="quotation-source"]  { border-left-color: #9b59b6; }
.reader-parallel-section[data-parallel-type="allusion"]          { border-left-color: #c0832a; }
.reader-parallel-section[data-parallel-type="allusion-source"]   { border-left-color: #c0832a; }

/* ── Panel header ────────────────────────────────────────── */
.reader-parallel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem 0.45rem 0.65rem;
  background: rgba(0,0,0,0.025);
  flex-wrap: wrap;
}

.reader-parallel-badge {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.reader-parallel-badge--parallel    { background: rgba(74,144,217,0.15); color: #2c6fad; }
.reader-parallel-badge--fulfillment { background: rgba(76,175,116,0.15); color: #2d7d52; }
.reader-parallel-badge--prophecy    { background: rgba(184,134,11,0.15); color: #8a6300; }
.reader-parallel-badge--quotation   { background: rgba(155,89,182,0.15); color: #6a3d8f; }
.reader-parallel-badge--allusion    { background: rgba(192,131,42,0.15); color: #8a5a00; }
/* quotation-source and allusion-source share the same colour family as their counterparts */
/* Echo-specific badge types (TEMPORARY — remove when echoes fully replaces parallels) */
.reader-parallel-badge--type        { background: rgba(26,175,155,0.15); color: #1a7060; }
.reader-parallel-badge--shadow      { background: rgba(100,110,170,0.15); color: #3a4880; }
.reader-parallel-badge--theme       { background: rgba(180,80,130,0.15); color: #7a2858; }

.reader-parallel-ref-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.reader-parallel-ref-label:hover { text-decoration: underline dotted; }
.reader-parallel-section-label {
  font-weight: 400;
  font-style: normal;
  color: var(--color-muted);
  margin-left: 0.3em;
}

.reader-parallel-read-link {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-accent);
  text-decoration: none;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  flex-shrink: 0;
  transition: background 0.1s;
}
.reader-parallel-read-link:hover {
  background: rgba(184,134,11,0.1);
}

.reader-parallel-collapse {
  background: none;
  border: none;
  padding: 0 0.2rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.reader-parallel-collapse:hover { color: var(--color-primary); }
.reader-parallel-collapse:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Collapsed state ─────────────────────────────────────── */
.reader-parallel-section--collapsed .reader-parallel-body {
  display: none;
}

/* ── Panel body (verse text) ─────────────────────────────── */
.reader-parallel-body {
  padding: 0.6rem 0.75rem 0.65rem 0.65rem;
}

.reader-parallel-text {
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}

.reader-parallel-loading,
.reader-parallel-empty {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  font-style: italic;
}

.reader-parallel-more-btn {
  display: block;
  margin-top: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reader-parallel-more-btn:hover { color: var(--color-primary); }
.reader-parallel-more-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Main-reader verse pager (active when parallels is on) ─ */
/* Sits between the verse text and the parallel panels.       */
.reader-parallel-page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0.6rem 0 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ── Panel-level verse pager (prev/next 5 verses) ─────────── */
.reader-parallel-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border);
}

.reader-parallel-pager__btn {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.reader-parallel-pager__btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.reader-parallel-pager__info {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--color-muted);
  flex: 1;
  text-align: center;
}

.reader-parallel-pager__spacer { min-width: 4rem; }

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 640px) {
  .reader-parallel-header { gap: 0.35rem; padding: 0.4rem 0.6rem; }
  .reader-parallel-body   { padding: 0.5rem 0.6rem; }
  .reader-parallel-text   { font-size: 0.94rem; }
}

/* ════════════════════════════════════════════════════════════
   Compare (side-by-side translation) feature
   ════════════════════════════════════════════════════════════ */

/* ── Toggle button (same shape as Parallels button) ──────── */
.reader-compare-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-compare-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-compare-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.3);
}
.reader-compare-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}
.reader-compare-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Compare per-verse grid (RD-L) ──────────────────────────── */
.reader-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0.5rem 0 1rem;
}
.reader-compare-col-hdr {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-primary);
  padding: 0.3rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
}
.reader-compare-col-hdr--a { border-right: none; border-radius: 6px 0 0 0; }
.reader-compare-col-hdr--b { border-radius: 0 6px 0 0; }
.reader-compare-cell {
  padding: 0.5rem 0.75rem;
  font-size: var(--reader-font-size, 1rem);
  line-height: 1.72;
  border-bottom: 1px solid var(--color-border);
}
.reader-compare-cell--a { border-right: 1px solid var(--color-border); }
.reader-compare-cell--loading { color: var(--color-muted); }
.reader-compare-unavail { color: var(--color-muted); font-style: italic; font-size: 0.85rem; }
.reader-compare-vnum {
  color: var(--color-muted);
  font-size: 0.72em;
  margin-right: 0.2em;
  vertical-align: super;
  font-style: normal;
  user-select: none;
}
@media (max-width: 600px) {
  .reader-compare-grid { grid-template-columns: 1fr; }
  .reader-compare-col-hdr--a,
  .reader-compare-cell--a { border-right: none; }
  .reader-compare-col-hdr--b,
  .reader-compare-cell--b { border-top: 2px solid var(--color-primary); }
}

/* ── Split attribution row (mirrors compare grid columns) ───── */
.reader-compare-attr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}
.reader-compare-attr__cell {
  padding-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-muted);
}
.reader-compare-attr__cell--a {
  padding-right: 1rem;
  border-right: 1px solid var(--color-border);
}
.reader-compare-attr__cell--b {
  padding-left: 1rem;
}
@media (max-width: 600px) {
  .reader-compare-attr { grid-template-columns: 1fr; }
  .reader-compare-attr__cell--a {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-right: 0;
    padding-bottom: 0.4rem;
  }
  .reader-compare-attr__cell--b {
    padding-left: 0;
    padding-top: 0.4rem;
  }
}

/* ── Column header label / version selector ─────────────────── */
.reader-compare-panel__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  white-space: nowrap;
}

.reader-compare-ver-sel {
  font-size: 0.82rem;
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  min-width: 0;
  flex: 1;
}

/* ── Interlinear toggle button ───────────────────────────── */
.reader-interlinear-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-interlinear-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-interlinear-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.3);
}
.reader-interlinear-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}
.reader-interlinear-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Book Info toggle button (navigates to ch=0 full-page intro) ─────────── */
.reader-bookinfo-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-bookinfo-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-bookinfo-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.3);
}
.reader-bookinfo-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}
.reader-bookinfo-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Wide-panel toggle button ────────────────────────────── */
.reader-split-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-split-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-split-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.3);
}
.reader-split-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}
.reader-split-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Font size controls ─────────────────────────────────── */
.reader-font-size-grp {
  display: flex;
  gap: 1px;
  margin-right: 0.35rem;
}
.reader-font-size-btn {
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--color-border);
  background: none;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.reader-font-size-btn:first-child { border-radius: 4px 0 0 4px; }
.reader-font-size-btn:last-child  { border-radius: 0 4px 4px 0; border-left: none; }
.reader-font-size-btn:not(:first-child):not(:last-child) { border-left: none; }
.reader-font-size-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.reader-font-size-btn:hover:not(.reader-font-size-btn--active) {
  background: var(--color-bg-alt, #f6f2ea);
  color: var(--color-primary);
}

/* ── Wide (reader-only) toggle button ───────────────────── */
.reader-wide-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-wide-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-wide-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.3);
}
.reader-wide-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}
.reader-wide-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Chapters sidebar toggle button ─────────────────────── */
.reader-sidebar-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-sidebar-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-sidebar-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.3);
}
.reader-sidebar-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}
.reader-sidebar-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Interlinear verse block layout ─────────────────────── */
.reader-interlinear-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.reader-verse-block {
  display: block;
  padding: 0.25rem 0 0;
}
.reader-verse-block .reader-verse {
  display: block;
  line-height: 1.75;
}
.reader-interlinear-row {
  padding: 0.4rem 0 0.6rem;
  border-bottom: 1px solid var(--color-border);
}

/* ── Interlinear tile grid ───────────────────────────────── */
.ri-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ri-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  max-width: 130px;
  min-height: 44px;  /* WCAG 2.5.5 touch target */
  padding: 0.35rem 0.5rem 0.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  line-height: 1;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ri-tile:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 5px rgba(0,0,0,0.07);
}
.ri-tile--active {
  border-color: var(--color-primary);
  background: var(--color-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Search-match highlight — tile whose Strong's code matches the active strongs search */
.ri-tile--search-match {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface, #faf8f3));
  box-shadow: 0 0 0 1px var(--color-primary);
}
.ri-tile--search-match .ri-tile__s {
  color: var(--color-primary);
  font-weight: 700;
}

/* Highlighted English word in verse text on tile hover */
mark.ri-word-hl {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.ri-tile__lemma {
  font-family: var(--font-body, Georgia, serif);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 0.15rem;
}
.ri-tile__lemma--none {
  color: var(--color-muted);
  font-style: italic;
}
.ri-tile__translit {
  font-size: 0.68rem;
  color: var(--color-muted);
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.ri-tile__eng {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.ri-tile__s {
  font-size: 0.6rem;
  color: var(--color-accent);
  letter-spacing: 0.03em;
  padding: 0.08rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg);
  white-space: nowrap;
}

/* RTL (Hebrew OT) interlinear layout */
.ri-grid--rtl {
  direction: rtl;
}
.ri-grid--rtl .ri-tile__translit,
.ri-grid--rtl .ri-tile__eng,
.ri-grid--rtl .ri-tile__s {
  direction: ltr;
  unicode-bidi: embed;
}

/* ── Interlinear popover ─────────────────────────────────── */
.ri-popover {
  position: fixed;
  z-index: 700;
  width: 280px;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  padding: 0.85rem 1rem 0.8rem;
  font-family: var(--font-ui, system-ui, sans-serif);
}
.ri-popover[hidden] { display: none; }
.ri-popover__close {
  position: absolute;
  top: 0.4rem;
  right: 0.55rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1;
  padding: 0.15rem 0.3rem;
}
.ri-popover__close:hover { color: var(--color-text); }
.ri-popover__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-right: 1.5rem;
}
.ri-popover__eng {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-body, Georgia, serif);
}
.ri-popover__s {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
}
.ri-popover__orig {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.ri-popover__lemma {
  font-family: var(--font-body, Georgia, serif);
  font-size: 1.2rem;
  color: var(--color-text);
}
.ri-popover__translit {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
}
.ri-popover__gloss {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.ri-popover__def {
  font-size: 0.78rem;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.ri-popover__deriv {
  font-size: 0.73rem;
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.ri-popover__no-entry {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}
.ri-popover__morph {
  font-size: 0.72rem;
  color: var(--color-primary);
  font-style: normal;
  font-family: var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}
.ri-popover__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.3rem;
}
.ri-popover__links .vs-context-btn {
  text-decoration: none;
}

/* ── Reader side panel: Notes / Cross-refs / Commentary switcher ─────────── */

.reader-panel-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.reader-panel-tab {
  flex: 1;
  padding: 0.4rem 0.25rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s;
}
.reader-panel-tab:hover { color: var(--color-text); }
.reader-panel-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.reader-panel-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.reader-panel-body[hidden] { display: none; }

/* Commentary source picker inside reader panel */
.reader-panel-comm-picker {
  display: flex;
  align-items: center;
  padding: 0.35rem 0;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.reader-panel-comm-select {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 0.78rem;
  padding: 0.18rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  cursor: pointer;
  width: 100%;
}

/* Notes groups inside reader panel */
.reader-notes-group { margin-bottom: 0.75rem; }
.reader-notes-group__heading {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.reader-notes-item {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
}
.reader-notes-item:last-child { border-bottom: none; }
.reader-notes-item__text { font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; }
.reader-notes-item__meta { font-size: 0.68rem; color: var(--color-muted); margin-top: 0.15rem; }

.reader-bm-viewall {
  display: block;
  font-size: 0.72rem;
  color: var(--color-primary);
  text-align: right;
  margin-top: 0.6rem;
  text-decoration: none;
}
.reader-bm-viewall:hover { text-decoration: underline; }

.reader-panel-compose { margin-top: 0.75rem; }
.reader-panel-verse-sel {
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  max-width: 140px;
}

/* ── Library document sections in Reader ─────────────────────────────── */

.reader-lib-docname {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.1rem;
}

.reader-lib-content {
  line-height: 1.75;
}

/* Suppress lib-chapter wrapper styles inside the Reader */
.reader-lib-content .lib-chapter {
  border: none;
  padding: 0;
  margin: 0;
}

.reader-lib-content h2,
.reader-lib-content .lib-chapter__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-heading, var(--color-text));
  margin: 0 0 0.9rem;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  padding-bottom: 0.4rem;
}

.reader-lib-content h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }

/* Catechism Q&A */
.reader-lib-content .lib-qa { margin-bottom: 1rem; }

.reader-lib-content .lib-qa__num {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-primary, #5c3d1e);
  margin-bottom: 0.2rem;
}

.reader-lib-content .lib-qa__q {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.reader-lib-content .lib-qa__a {
  color: var(--color-text, #222);
}

/* Confession articles */
.reader-lib-content .lib-article {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.reader-lib-content .lib-article__num {
  font-weight: 700;
  min-width: 1.8rem;
  flex-shrink: 0;
  color: var(--color-primary, #5c3d1e);
  font-size: 0.88rem;
  padding-top: 0.05em;
}

.reader-lib-content .lib-article__text {
  flex: 1;
}

/* Proof text references */
.reader-lib-content .lib-refs {
  font-size: 0.82rem;
  color: var(--color-muted, #888);
}

.reader-lib-content .lib-refs a { color: var(--color-primary, #5c3d1e); }

/* Creed body */
.reader-lib-content .lib-creed {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
}

/* ── Print styles ────────────────────────────────────────── */
@media print {
  /* Hide everything except the chapter text */
  header, nav, footer,
  .sb-nav, .site-header, .site-footer,
  .reader-browse-bar,
  .reader-xref-panel,
  .reader-sidebar,
  .reader-lookup-row,
  .reader-toolbar,
  .reader-control-bar,
  .reader-nav-row,
  .bsw-modal,
  .bsw-modal-backdrop,
  .bsw-sw-toast,
  .bsw-shortcuts-overlay,
  #bsw-theme-btn {
    display: none !important;
  }

  /* Full width, clean margins */
  body, html { background: #fff !important; color: #000 !important; }
  .reader-page .container { max-width: 100%; padding: 0 1cm; }
  .reader-page main { padding: 0; }
  .reader-layout { display: block; }
  .reader-main { width: 100%; }

  /* Verse text */
  .reader-result-group__text {
    font-size: 12pt !important;
    line-height: 1.75 !important;
  }
  .reader-result-group__book-heading,
  .reader-result-group__chapter-heading {
    font-size: 14pt;
    margin-top: 1em;
  }

  /* Avoid page breaks inside verses */
  .reader-result-group__verse { page-break-inside: avoid; }

  /* Show link hrefs for cross-refs */
  a[href]::after { content: none; }
}

/* ── Filled-button dark-mode overrides ─────────────────────────────────────
   In dark mode --color-primary = #e8c87a (bright gold for text links).
   All buttons that use it as a solid fill become white-on-yellow = unreadable.
   Override: dark warm surface bg + golden text (7.3:1 contrast verified).
   ─────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] .reader-lookup-btn,
[data-theme="dark"] .reader-nav-btn--begin {
  background: var(--color-btn-bg, #3a2d18);
  border-color: var(--color-primary);
  color: var(--color-btn-text, #e8c87a);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
[data-theme="dark"] .reader-nav-btn--begin:hover {
  background: var(--color-btn-bg-hover, #4a3a22);
  border-color: var(--color-primary);
  color: var(--color-btn-text, #e8c87a);
}

[data-theme="dark"] .reader-compare-btn--on,
[data-theme="dark"] .reader-interlinear-btn--on,
[data-theme="dark"] .reader-bookinfo-btn--on,
[data-theme="dark"] .reader-split-btn--on,
[data-theme="dark"] .reader-font-size-btn--active,
[data-theme="dark"] .reader-wide-btn--on,
[data-theme="dark"] .reader-sidebar-btn--on,
[data-theme="dark"] .reader-xref-notes-btn--on,
[data-theme="dark"] .reader-echoes-btn--on,
[data-theme="dark"] .reader-parallels-btn--on {
  background: var(--color-btn-bg, #3a2d18);
  border-color: var(--color-primary);
  color: var(--color-btn-text, #e8c87a);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="dark"] .reader-compare-btn--on:hover,
[data-theme="dark"] .reader-interlinear-btn--on:hover,
[data-theme="dark"] .reader-bookinfo-btn--on:hover,
[data-theme="dark"] .reader-split-btn--on:hover,
[data-theme="dark"] .reader-wide-btn--on:hover,
[data-theme="dark"] .reader-sidebar-btn--on:hover,
[data-theme="dark"] .reader-xref-notes-btn--on:hover,
[data-theme="dark"] .reader-echoes-btn--on:hover,
[data-theme="dark"] .reader-parallels-btn--on:hover {
  background: var(--color-btn-bg-hover, #4a3a22);
  border-color: var(--color-primary);
  color: var(--color-btn-text, #e8c87a);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader-lookup-btn,
  :root:not([data-theme="light"]) .reader-nav-btn--begin {
    background: var(--color-btn-bg, #3a2d18);
    border-color: var(--color-primary);
    color: var(--color-btn-text, #e8c87a);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }
  :root:not([data-theme="light"]) .reader-nav-btn--begin:hover {
    background: var(--color-btn-bg-hover, #4a3a22);
    border-color: var(--color-primary);
    color: var(--color-btn-text, #e8c87a);
  }
  :root:not([data-theme="light"]) .reader-compare-btn--on,
  :root:not([data-theme="light"]) .reader-interlinear-btn--on,
  :root:not([data-theme="light"]) .reader-bookinfo-btn--on,
  :root:not([data-theme="light"]) .reader-split-btn--on,
  :root:not([data-theme="light"]) .reader-font-size-btn--active,
  :root:not([data-theme="light"]) .reader-wide-btn--on,
  :root:not([data-theme="light"]) .reader-sidebar-btn--on,
  :root:not([data-theme="light"]) .reader-xref-notes-btn--on,
  :root:not([data-theme="light"]) .reader-parallels-btn--on {
    background: var(--color-btn-bg, #3a2d18);
    border-color: var(--color-primary);
    color: var(--color-btn-text, #e8c87a);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  :root:not([data-theme="light"]) .reader-compare-btn--on:hover,
  :root:not([data-theme="light"]) .reader-interlinear-btn--on:hover,
  :root:not([data-theme="light"]) .reader-bookinfo-btn--on:hover,
  :root:not([data-theme="light"]) .reader-split-btn--on:hover,
  :root:not([data-theme="light"]) .reader-wide-btn--on:hover,
  :root:not([data-theme="light"]) .reader-sidebar-btn--on:hover,
  :root:not([data-theme="light"]) .reader-xref-notes-btn--on:hover,
  :root:not([data-theme="light"]) .reader-parallels-btn--on:hover {
    background: var(--color-btn-bg-hover, #4a3a22);
    border-color: var(--color-primary);
    color: var(--color-btn-text, #e8c87a);
  }
}

/* ── Highlight: dark-mode accessibility overrides ──────────────────────────
   In dark mode the near-black surface (#1a1208) means even low-alpha warm
   backgrounds create harsh ochre blobs and make dark-toned verse numbers
   invisible.  Fix: halve opacity so the dark bg stays dominant; swap verse
   number tints to bright light-on-dark variants.
   Both manual toggle ([data-theme="dark"]) and OS preference are covered.
   ─────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] .reader-verse--hl-yellow   { background: rgba(255, 210,   0, 0.26); }
[data-theme="dark"] .reader-verse--hl-orange   { background: rgba(255, 135,  20, 0.24); }
[data-theme="dark"] .reader-verse--hl-pink     { background: rgba(230,  70, 135, 0.22); }
[data-theme="dark"] .reader-verse--hl-red      { background: rgba(210,  55,  55, 0.21); }
[data-theme="dark"] .reader-verse--hl-purple   { background: rgba(155,  60, 215, 0.20); }
[data-theme="dark"] .reader-verse--hl-lavender { background: rgba(165, 135, 240, 0.24); }
[data-theme="dark"] .reader-verse--hl-green    { background: rgba( 65, 195,  85, 0.21); }
[data-theme="dark"] .reader-verse--hl-teal     { background: rgba( 30, 185, 170, 0.21); }
[data-theme="dark"] .reader-verse--hl-blue     { background: rgba( 55, 145, 255, 0.22); }
[data-theme="dark"] .reader-verse--hl-mint     { background: rgba( 90, 215, 195, 0.21); }

[data-theme="dark"] .reader-verse__num--highlighted                      { color: #f0c030; }
[data-theme="dark"] .reader-verse--hl-orange  .reader-verse__num--highlighted { color: #f09040; }
[data-theme="dark"] .reader-verse--hl-pink    .reader-verse__num--highlighted { color: #f07aaa; }
[data-theme="dark"] .reader-verse--hl-red     .reader-verse__num--highlighted { color: #f07070; }
[data-theme="dark"] .reader-verse--hl-purple  .reader-verse__num--highlighted { color: #c080f8; }
[data-theme="dark"] .reader-verse--hl-lavender .reader-verse__num--highlighted { color: #b0a0f0; }
[data-theme="dark"] .reader-verse--hl-green   .reader-verse__num--highlighted { color: #50d870; }
[data-theme="dark"] .reader-verse--hl-teal    .reader-verse__num--highlighted { color: #40d0c0; }
[data-theme="dark"] .reader-verse--hl-blue    .reader-verse__num--highlighted { color: #60a8f8; }
[data-theme="dark"] .reader-verse--hl-mint    .reader-verse__num--highlighted { color: #60e0d0; }

[data-theme="dark"] .vs-header--hl-yellow   { border-top-color: rgba(255, 210,   0, 0.80); }
[data-theme="dark"] .vs-header--hl-orange   { border-top-color: rgba(255, 140,  30, 0.80); }
[data-theme="dark"] .vs-header--hl-pink     { border-top-color: rgba(240,  90, 150, 0.80); }
[data-theme="dark"] .vs-header--hl-red      { border-top-color: rgba(240,  80,  80, 0.80); }
[data-theme="dark"] .vs-header--hl-purple   { border-top-color: rgba(180,  90, 250, 0.80); }
[data-theme="dark"] .vs-header--hl-lavender { border-top-color: rgba(175, 155, 255, 0.80); }
[data-theme="dark"] .vs-header--hl-green    { border-top-color: rgba( 70, 220,  90, 0.80); }
[data-theme="dark"] .vs-header--hl-teal     { border-top-color: rgba( 40, 210, 195, 0.80); }
[data-theme="dark"] .vs-header--hl-blue     { border-top-color: rgba( 80, 165, 255, 0.80); }
[data-theme="dark"] .vs-header--hl-mint     { border-top-color: rgba(100, 230, 215, 0.80); }

/* ── Quick highlight colour picker ──────────────────────────────────── */

.reader-hl-picker {
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 3px 14px rgba(0,0,0,.18);
}
.reader-hl-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform .1s, border-color .1s;
}
.reader-hl-swatch:hover { transform: scale(1.2); }
.reader-hl-swatch--active {
  border-color: var(--color-text);
  transform: scale(1.15);
}
.reader-hl-swatch--clear {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
}
.reader-hl-swatch--clear:hover { background: var(--color-border); color: var(--color-text); }

/* ── Bookmarks panel (in right xref panel) ───────────────────────────── */

.reader-bookmark-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
}
.reader-bookmark-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--color-border);
}
.reader-bookmark-item:last-child { border-bottom: none; }
.reader-bookmark-star {
  color: var(--color-accent);
  flex-shrink: 0;
  font-size: .9rem;
}
.reader-bookmark-ref {
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
  flex: 1;
}
.reader-bookmark-ref:hover { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader-verse--hl-yellow   { background: rgba(255, 210,   0, 0.26); }
  :root:not([data-theme="light"]) .reader-verse--hl-orange   { background: rgba(255, 135,  20, 0.24); }
  :root:not([data-theme="light"]) .reader-verse--hl-pink     { background: rgba(230,  70, 135, 0.22); }
  :root:not([data-theme="light"]) .reader-verse--hl-red      { background: rgba(210,  55,  55, 0.21); }
  :root:not([data-theme="light"]) .reader-verse--hl-purple   { background: rgba(155,  60, 215, 0.20); }
  :root:not([data-theme="light"]) .reader-verse--hl-lavender { background: rgba(165, 135, 240, 0.24); }
  :root:not([data-theme="light"]) .reader-verse--hl-green    { background: rgba( 65, 195,  85, 0.21); }
  :root:not([data-theme="light"]) .reader-verse--hl-teal     { background: rgba( 30, 185, 170, 0.21); }
  :root:not([data-theme="light"]) .reader-verse--hl-blue     { background: rgba( 55, 145, 255, 0.22); }
  :root:not([data-theme="light"]) .reader-verse--hl-mint     { background: rgba( 90, 215, 195, 0.21); }

  :root:not([data-theme="light"]) .reader-verse__num--highlighted                       { color: #f0c030; }
  :root:not([data-theme="light"]) .reader-verse--hl-orange  .reader-verse__num--highlighted { color: #f09040; }
  :root:not([data-theme="light"]) .reader-verse--hl-pink    .reader-verse__num--highlighted { color: #f07aaa; }
  :root:not([data-theme="light"]) .reader-verse--hl-red     .reader-verse__num--highlighted { color: #f07070; }
  :root:not([data-theme="light"]) .reader-verse--hl-purple  .reader-verse__num--highlighted { color: #c080f8; }
  :root:not([data-theme="light"]) .reader-verse--hl-lavender .reader-verse__num--highlighted { color: #b0a0f0; }
  :root:not([data-theme="light"]) .reader-verse--hl-green   .reader-verse__num--highlighted { color: #50d870; }
  :root:not([data-theme="light"]) .reader-verse--hl-teal    .reader-verse__num--highlighted { color: #40d0c0; }
  :root:not([data-theme="light"]) .reader-verse--hl-blue    .reader-verse__num--highlighted { color: #60a8f8; }
  :root:not([data-theme="light"]) .reader-verse--hl-mint    .reader-verse__num--highlighted { color: #60e0d0; }

  :root:not([data-theme="light"]) .vs-header--hl-yellow   { border-top-color: rgba(255, 210,   0, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-orange   { border-top-color: rgba(255, 140,  30, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-pink     { border-top-color: rgba(240,  90, 150, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-red      { border-top-color: rgba(240,  80,  80, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-purple   { border-top-color: rgba(180,  90, 250, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-lavender { border-top-color: rgba(175, 155, 255, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-green    { border-top-color: rgba( 70, 220,  90, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-teal     { border-top-color: rgba( 40, 210, 195, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-blue     { border-top-color: rgba( 80, 165, 255, 0.80); }
  :root:not([data-theme="light"]) .vs-header--hl-mint     { border-top-color: rgba(100, 230, 215, 0.80); }
}

/* ── D-D: Mark chapter as read ─────────────────────────────── */
.reader-mark-row {
  text-align: center;
  padding: 1.5rem 0 2.5rem;
}
.reader-mark-btn {
  font-family: var(--font-ui);
  font-size: .82rem;
  padding: .42rem 1.1rem;
  border-radius: 20px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.reader-mark-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.reader-mark-btn--done {
  border-color: var(--color-border);
  color: var(--color-muted);
  pointer-events: none;
}

/* ── RD-M: Commentary Mode — verse-locked split view ─────── */
.reader-comm-toggle {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-comm-toggle:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-comm-toggle[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.3);
}
.reader-comm-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hide xref panel and expand to full width in comm mode */
.reader-layout--comm-mode .reader-xref-panel { display: none !important; }
@media (min-width: 700px) {
  .reader-layout--comm-mode { grid-template-columns: 1fr !important; }
  .reader-layout--comm-mode.reader-layout--with-sidebar { grid-template-columns: 160px 1fr !important; }
}

/* Flat CSS grid — all verse and commentary cells sit directly inside one grid.
   Verse cells are in column 1 (one per row); commentary cells span multiple rows
   via inline grid-row set by JS. Row 1 is the global picker. */
.reader-comm-grid {
  display: grid;
  grid-template-columns: 1fr 4fr;
  border-top: 1px solid var(--color-border);
  width: 100%;
}
/* Picker spans both columns at row 1 */
.reader-comm-picker-row {
  grid-row: 1;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 2px solid var(--color-border);
}
.reader-comm-picker-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  white-space: nowrap;
}
.reader-comm-src-sel {
  font-size: .82rem;
  font-family: var(--font-ui);
  padding: .18rem .4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}
/* Verse cells: column 1, one per row */
.reader-comm-cell--verse {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--color-muted);
  padding: .45rem .5rem .45rem 0;
  border-bottom: 1px solid var(--color-border);
}
.reader-comm-cell--verse .reader-verse__num {
  color: var(--color-primary);
  font-weight: 700;
}
/* Commentary cells: column 2, spanning N verse rows per section */
.reader-comm-cell--comm {
  font-size: .9rem;
  line-height: 1.7;
  padding: .5rem 0 .5rem .85rem;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  align-self: stretch;   /* fills the full span height */
}
.reader-comm-cell--comm p { margin: 0 0 .6rem; }
.reader-comm-cell--comm p:last-child { margin-bottom: 0; }
.reader-comm-span-note {
  font-size: .7rem;
  color: var(--color-muted);
  font-style: italic;
  margin: 0 0 .4rem;
}
/* On thin/mobile screens use flex so comm cells flow in DOM order — interleaving
   is structural (insertBefore in _rebuildCommCells), not CSS order tricks.
   Breakpoint at 1024px covers portrait tablets and thin laptops where the
   1fr/4fr grid makes the verse column too narrow to read comfortably. */
@media (max-width: 1024px) {
  .reader-comm-grid { display: flex; flex-direction: column; }
  .reader-comm-cell--verse,
  .reader-comm-cell--comm { display: block; border-left: none; }
}
[data-theme="dark"] .reader-comm-src-sel { background: var(--color-surface); }
:root:not([data-theme="light"]) .reader-comm-src-sel { background: var(--color-surface); }

/* Commentary + Passage Study Desk open together: keep the reader at 50/50 and render
   commentary STACKED under each verse (the mobile layout), not the side-by-side 1fr/4fr
   grid. Otherwise the comm-mode `grid-template-columns: 1fr !important` (line ~3122) fights
   the study-open 50/50 grid and bloats the desk toward 60%, and the narrow main column is
   far too tight for two commentary sub-columns. Mirrors the @media(max-width:1024px) rule. */
@media (min-width: 700px) {
  .reader-layout--study-open.reader-layout--comm-mode,
  .reader-layout--study-open.reader-layout--comm-mode.reader-layout--with-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}
.reader-layout--study-open.reader-layout--comm-mode .reader-comm-grid {
  display: flex; flex-direction: column;
}
.reader-layout--study-open.reader-layout--comm-mode .reader-comm-cell--verse,
.reader-layout--study-open.reader-layout--comm-mode .reader-comm-cell--comm {
  display: block; border-left: none;
}

/* ── Cross-ref inline grid (60 % Bible / 40 % xrefs) ─────────────────────── */
.reader-xref-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  border-top: 1px solid var(--color-border);
  width: 100%;
}
/* Header row spans both columns */
.reader-xref-grid__hdr {
  grid-row: 1;
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  padding: 0.45rem 0;
  border-bottom: 2px solid var(--color-border);
}
/* Xref cells: column 2, one per verse row */
.reader-comm-cell--xref {
  font-size: 0.82rem;
  line-height: 1.75;
  padding: 0.45rem 0 0.45rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  align-self: stretch;
  color: var(--color-muted);
}
.reader-comm-cell--xref .reader-xref-group__link {
  color: var(--color-accent);
  cursor: pointer;
  white-space: nowrap;
}
.reader-comm-cell--xref .reader-xref-group__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
@media (max-width: 699px) {
  .reader-xref-grid { display: block; }
  .reader-xref-grid__hdr { display: block; }
  .reader-comm-cell--xref { display: block; border-left: none; }
}

/* ── CSS-33: xref-chip active + quick-search chip hover dark mode ─────────── */
/* INTENT: .reader-xref-chip--active and .reader-qs-chip:hover both use
   background:var(--color-primary) with color:#fff. In dark mode primary = golden
   (#e8c87a) — white on golden fails ~1.3:1. --color-on-primary (#1a1208, 10:1) fixes it. */
[data-theme="dark"] .reader-xref-chip--active,
[data-theme="dark"] .reader-qs-chip:hover { color: var(--color-on-primary); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader-xref-chip--active,
  :root:not([data-theme="light"]) .reader-qs-chip:hover { color: var(--color-on-primary); }
}

/* Hide the keyboard hint on any primary-touch device (iPad landscape, touch laptops, phones)
   regardless of screen width — arrow-key navigation doesn't apply on touch devices. */
@media (pointer: coarse) {
  .reader-browse-hint { display: none; }
}

/* ── Echo cards ────────────────────────────────────────────────────────────── */

.reader-echo-card {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s;
}

.reader-echo-card--highlight {
  background: rgba(var(--color-primary-rgb, 90, 110, 200), 0.07);
}

.reader-echo-card__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--color-text);
  min-height: 2.4rem;
}

.reader-echo-card__toggle:hover {
  background: var(--color-hover, rgba(0,0,0,0.04));
}

.reader-echo-card__v {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 2.2rem;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.reader-echo-card__badge {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}

/* Badge colours — shared with parallel panel badge modifiers */
.reader-echo-card__badge--quotation  { background: rgba(220,120,40,0.15); color: #b35a00; }
.reader-echo-card__badge--allusion   { background: rgba(80,120,220,0.13); color: #2955b5; }
.reader-echo-card__badge--fulfillment{ background: rgba(40,160,80,0.15);  color: #1a7a3a; }
.reader-echo-card__badge--type       { background: rgba(140,50,200,0.13); color: #7a1abf; }
.reader-echo-card__badge--shadow     { background: rgba(140,50,200,0.13); color: #7a1abf; }
.reader-echo-card__badge--theme      { background: rgba(20,150,180,0.13); color: #0e7a9a; }
.reader-echo-card__badge--parallel   { background: rgba(100,100,100,0.12);color: #555; }

.reader-echo-card__target {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.83rem;
  color: var(--color-text);
}

.reader-echo-card__chevron {
  font-size: 0.6rem;
  color: var(--color-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.reader-echo-card--expanded .reader-echo-card__chevron {
  transform: rotate(90deg);
}

.reader-echo-card__body {
  padding: 0.25rem 1rem 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface, var(--color-bg));
}

/* Verse text fetched from the target reference — reuses parallel panel text styles */
.reader-echo-card__verse {
  margin-bottom: 0.5rem;
}

.reader-echo-card__verse .reader-parallel-text {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  line-height: 1.62;
  color: var(--color-text);
}

.reader-echo-card__verse .reader-parallel-loading,
.reader-echo-card__verse .reader-parallel-empty {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
  margin: 0.25rem 0 0.5rem;
}

.reader-echo-card__verse .reader-parallel-pager {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: 0.78rem;
}

/* Note sits between verse text and the Read link — styled as a callout */
.reader-echo-card__note {
  margin: 0.4rem 0 0.5rem;
  padding: 0.35rem 0.6rem;
  border-left: 2px solid var(--color-primary);
  font-size: 0.81rem;
  line-height: 1.55;
  color: var(--color-muted);
  font-style: italic;
}

.reader-echo-card__read {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.reader-echo-card__read:hover { text-decoration: underline; }

/* ── Verse indicators for echoes ──────────────────────────────────────────── */

/* Dot indicator to the left of verses that have echoes */
.reader-verse--has-echo {
  position: relative;
}

/* ── Inline connections chip (chain-link + count, after verse text) ───────── */

.reader-echo-marker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  margin-right: 5px;
  vertical-align: super;
  font-size: 0.6em;
  font-weight: 700;
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 1px 6px 1px 4px;
  cursor: pointer;
  opacity: 0.92;
  border-radius: 99px;
  line-height: 1.4;
  transition: opacity 0.15s, filter 0.15s, box-shadow 0.15s;
}
.reader-echo-marker:hover { opacity: 1; filter: brightness(1.08); }
.reader-echo-marker:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; opacity: 1; }
.reader-echo-marker__icon { font-size: 0.95em; }
.reader-echo-marker:hover,
.reader-echo-marker--open {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}
/* The verse whose connections panel is currently open — make the source obvious. */
.reader-verse--echo-active {
  background: rgba(140, 106, 0, 0.10);
  border-radius: 3px;
  box-shadow: -3px 0 0 0 var(--color-accent);
}
/* Header of the inline connections panel — names the verse it belongs to. */
.reader-echo-inline__head {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-muted);
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
  background: rgba(140, 106, 0, 0.06);
}
.reader-echo-inline__head strong { color: var(--color-text); }
.reader-echo-inline__icon { margin-right: 0.3rem; }
.reader-echo-marker__count {
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1;
}

/* ── Inline echo expansion block ─────────────────────────────────────────── */

.reader-echo-inline {
  display: block;
  margin: 0.3rem 0 0.7rem 0.25rem;
  border-left: 2px solid var(--color-primary);
  border-radius: 0 4px 4px 0;
  background: var(--color-surface);
  overflow: hidden;
}
.reader-echo-inline .reader-echo-card {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}
.reader-echo-inline .reader-echo-card:last-child {
  border-bottom: none;
}
/* Hide the v.N prefix inside inline cards — the reader already knows the verse */
.reader-echo-inline .reader-echo-card__v {
  display: none;
}

/* Hover highlight: coloured left border + tint matching the echo badge type */
.reader-verse--echo-hover {
  border-left: 3px solid var(--color-primary) !important;
  padding-left: 0.3rem;
  background: rgba(90, 110, 200, 0.12) !important;
  border-radius: 2px;
}
/* Type overrides — background and border colour match the badge family */
.reader-verse--echo-hover.reader-verse--echo-type-quotation   { background: rgba(220,120, 40,0.22) !important; border-left-color: #b35a00 !important; }
.reader-verse--echo-hover.reader-verse--echo-type-allusion    { background: rgba( 80,120,220,0.20) !important; border-left-color: #2955b5 !important; }
.reader-verse--echo-hover.reader-verse--echo-type-fulfillment { background: rgba( 40,160, 80,0.22) !important; border-left-color: #1a7a3a !important; }
.reader-verse--echo-hover.reader-verse--echo-type-type        { background: rgba(140, 50,200,0.20) !important; border-left-color: #7a1abf !important; }
.reader-verse--echo-hover.reader-verse--echo-type-shadow      { background: rgba(140, 50,200,0.20) !important; border-left-color: #7a1abf !important; }
.reader-verse--echo-hover.reader-verse--echo-type-theme       { background: rgba( 20,150,180,0.20) !important; border-left-color: #0e7a9a !important; }
.reader-verse--echo-hover.reader-verse--echo-type-parallel    { background: rgba(100,100,100,0.18) !important; border-left-color: #555    !important; }

/* ── Dark mode adjustments ────────────────────────────────────────────────── */

[data-theme="dark"] .reader-echo-card--highlight {
  background: rgba(120, 150, 255, 0.1);
}

[data-theme="dark"] .reader-echo-card__badge--quotation  { background: rgba(220,140,60,0.2);  color: #f0a060; }
[data-theme="dark"] .reader-echo-card__badge--allusion   { background: rgba(100,140,255,0.17); color: #8aadff; }
[data-theme="dark"] .reader-echo-card__badge--fulfillment{ background: rgba(60,200,100,0.18);  color: #5dca80; }
[data-theme="dark"] .reader-echo-card__badge--type       { background: rgba(180,80,255,0.17);  color: #c97aff; }
[data-theme="dark"] .reader-echo-card__badge--shadow     { background: rgba(180,80,255,0.17);  color: #c97aff; }
[data-theme="dark"] .reader-echo-card__badge--theme      { background: rgba(40,190,220,0.17);  color: #60d0e8; }
[data-theme="dark"] .reader-echo-card__badge--parallel   { background: rgba(160,160,160,0.15); color: #aaa; }

[data-theme="dark"] .reader-verse--echo-hover { background: rgba(120,150,255,0.14) !important; }
[data-theme="dark"] .reader-verse--echo-hover.reader-verse--echo-type-quotation   { background: rgba(220,140, 60,0.28) !important; border-left-color: #f0a060 !important; }
[data-theme="dark"] .reader-verse--echo-hover.reader-verse--echo-type-allusion    { background: rgba(100,140,255,0.25) !important; border-left-color: #8aadff !important; }
[data-theme="dark"] .reader-verse--echo-hover.reader-verse--echo-type-fulfillment { background: rgba( 60,200,100,0.25) !important; border-left-color: #5dca80 !important; }
[data-theme="dark"] .reader-verse--echo-hover.reader-verse--echo-type-type        { background: rgba(180, 80,255,0.25) !important; border-left-color: #c97aff !important; }
[data-theme="dark"] .reader-verse--echo-hover.reader-verse--echo-type-shadow      { background: rgba(180, 80,255,0.25) !important; border-left-color: #c97aff !important; }
[data-theme="dark"] .reader-verse--echo-hover.reader-verse--echo-type-theme       { background: rgba( 40,190,220,0.25) !important; border-left-color: #60d0e8 !important; }
[data-theme="dark"] .reader-verse--echo-hover.reader-verse--echo-type-parallel    { background: rgba(160,160,160,0.20) !important; border-left-color: #aaa    !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader-echo-card--highlight {
    background: rgba(120, 150, 255, 0.1);
  }
  :root:not([data-theme="light"]) .reader-echo-card__badge--quotation  { background: rgba(220,140,60,0.2);  color: #f0a060; }
  :root:not([data-theme="light"]) .reader-echo-card__badge--allusion   { background: rgba(100,140,255,0.17); color: #8aadff; }
  :root:not([data-theme="light"]) .reader-echo-card__badge--fulfillment{ background: rgba(60,200,100,0.18);  color: #5dca80; }
  :root:not([data-theme="light"]) .reader-echo-card__badge--type       { background: rgba(180,80,255,0.17);  color: #c97aff; }
  :root:not([data-theme="light"]) .reader-echo-card__badge--shadow     { background: rgba(180,80,255,0.17);  color: #c97aff; }
  :root:not([data-theme="light"]) .reader-echo-card__badge--theme      { background: rgba(40,190,220,0.17);  color: #60d0e8; }
  :root:not([data-theme="light"]) .reader-echo-card__badge--parallel   { background: rgba(160,160,160,0.15); color: #aaa; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover { background: rgba(120,150,255,0.14) !important; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover.reader-verse--echo-type-quotation   { background: rgba(220,140, 60,0.28) !important; border-left-color: #f0a060 !important; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover.reader-verse--echo-type-allusion    { background: rgba(100,140,255,0.25) !important; border-left-color: #8aadff !important; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover.reader-verse--echo-type-fulfillment { background: rgba( 60,200,100,0.25) !important; border-left-color: #5dca80 !important; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover.reader-verse--echo-type-type        { background: rgba(180, 80,255,0.25) !important; border-left-color: #c97aff !important; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover.reader-verse--echo-type-shadow      { background: rgba(180, 80,255,0.25) !important; border-left-color: #c97aff !important; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover.reader-verse--echo-type-theme       { background: rgba( 40,190,220,0.25) !important; border-left-color: #60d0e8 !important; }
  :root:not([data-theme="light"]) .reader-verse--echo-hover.reader-verse--echo-type-parallel    { background: rgba(160,160,160,0.20) !important; border-left-color: #aaa    !important; }
}

/* ════════════════════════════════════════════════════════════
   Paragraph View (RD-PARA)
   ════════════════════════════════════════════════════════════ */

/* ── Toggle button ───────────────────────────────────────── */
.reader-para-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-para-btn:hover {
  background: rgba(92,61,30,0.07);
  border-color: rgba(92,61,30,0.35);
  color: var(--color-text);
}
.reader-para-btn--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(92,61,30,0.25);
}
.reader-para-btn--on:hover {
  background: #4a3016;
  border-color: #4a3016;
  color: #fff;
}
.reader-para-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Section heading ─────────────────────────────────────── */
.reader-section-heading {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 1.6rem 0 0.4rem;
  padding: 0;
  line-height: 1.3;
}
.reader-section-heading:first-child { margin-top: 0.25rem; }

/* ── Paragraph blocks ────────────────────────────────────── */
.reader-para {
  margin: 0 0 0.85rem;
  display: block;
}
.reader-para:last-child { margin-bottom: 0; }

/* Poetry: indented with a subtle left rule; each verse forced onto its own line */
.reader-para--poetry {
  margin-left: 1.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border);
}
.reader-para--poetry .reader-verse {
  display: block;
  margin-bottom: 0.12em;
}
.reader-para--poetry .reader-verse:last-child { margin-bottom: 0; }

/* Dialogue: book/novel style — prose flows inline, indented as speech */
.reader-para--dialogue {
  margin-left: 1.5rem;
}
/* Unannotated books: consecutive dialogue blocks collapse gap (legacy behaviour) */
.reader-para--dialogue + .reader-para--dialogue {
  margin-top: -0.5rem;
}

/* Prayer: like dialogue but addressed upward; italic + faint left rule */
.reader-para--prayer {
  margin-left: 1.5rem;
  padding-left: 0.8rem;
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  font-style: italic;
}

/* Oracle: prophetic proclamation; stronger left rule in a muted purple tone */
.reader-para--oracle {
  margin-left: 1.25rem;
  padding-left: 0.75rem;
  border-left: 3px solid color-mix(in srgb, #7b4fa0 50%, var(--color-border));
}

/* Doxology: centred, primary colour, italic — set-apart praise sections */
.reader-para--doxology {
  text-align: center;
  font-style: italic;
  color: var(--color-primary);
  padding: 0.2rem 0;
}

/* List: each verse on its own line with an em-dash marker */
.reader-para--list {
  margin-left: 1.25rem;
  padding-left: 0.5rem;
}
.reader-para--list .reader-verse {
  display: block;
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.18em;
}
.reader-para--list .reader-verse::before {
  content: '\2014'; /* em dash */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-muted);
  font-size: 0.85em;
  line-height: inherit;
}
.reader-para--list .reader-verse:last-child { margin-bottom: 0; }

/* ── Flag modifiers ──────────────────────────────────────── */

/* rhythmic: block-per-verse with rhythm-tick left rule (Beatitudes, wisdom poetry) */
.reader-para--flag-rhythmic .reader-verse {
  display: block;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-border);
  margin-bottom: 0.15em;
}
.reader-para--flag-rhythmic .reader-verse:last-child { margin-bottom: 0; }

/* enumerated: block-per-verse with em-dash (list-of-signs in dialogue) */
.reader-para--flag-enumerated .reader-verse {
  display: block;
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.18em;
}
.reader-para--flag-enumerated .reader-verse::before {
  content: '\2014';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-muted);
  font-size: 0.85em;
}
.reader-para--flag-enumerated .reader-verse:last-child { margin-bottom: 0; }

/* woe: warning accent on left (Matt 23 woe-oracles) */
.reader-para--flag-woe {
  border-left: 3px solid rgba(160, 60, 40, 0.35);
  padding-left: 0.7rem;
}

/* ── Speaker blocks ──────────────────────────────────────── */
.reader-speaker-block {
  margin-bottom: 0.85rem;
}
.reader-speaker-block:last-child { margin-bottom: 0; }

/* Paragraphs inside a speaker block: tighter continuation gap */
.reader-speaker-block .reader-para {
  margin-bottom: 0.4rem;
}
.reader-speaker-block .reader-para:last-child { margin-bottom: 0; }

/* Cancel legacy consecutive-dialogue collapse inside speaker blocks */
.reader-speaker-block .reader-para--dialogue + .reader-para--dialogue {
  margin-top: 0;
}

.reader-speaker-chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.06rem 0.4rem;
  margin-bottom: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--color-muted);
  line-height: 1.5;
  user-select: none;
}
.reader-speaker-chip--jesus {
  color: #b03a2e;
  border-color: rgba(176, 58, 46, 0.3);
  background: rgba(176, 58, 46, 0.05);
}
.reader-speaker-chip--god {
  color: #6b2fa0;
  border-color: rgba(107, 47, 160, 0.3);
  background: rgba(107, 47, 160, 0.05);
}
.reader-speaker-chip--named {
  color: var(--color-primary);
  border-color: var(--color-border);
}

/* Thought break: blank-line gap within a speaker block */
.reader-thought-break {
  display: block;
  height: 0.75rem;
}
body.bsw-reader-mode .reader-thought-break { height: 0.35rem; }

/* Columns mode: suppress column-break inside individual paragraphs */
body.bsw-columns-on .reader-result-group__text--para .reader-para {
  break-inside: avoid;
}

/* Red letter (Words of Jesus) and Purple letter (Words of God) */
.reader-verse--jesus { color: #b03a2e; }
.reader-verse--god   { color: #6b2fa0; }
/* Verse numbers keep their accent gold regardless of speaker colour */
.reader-verse--jesus .reader-verse__num,
.reader-verse--god   .reader-verse__num { color: var(--color-accent); }

/* AUD-21: non-colour speaker cue — a small distinct glyph after the verse number, so
   red-letter speakers are distinguishable without relying on text colour (cross = Jesus,
   star = God). Pairs with the title attribute set in applyRedLetter for hover / screen
   readers. Kept small and muted to preserve the reading experience. */
.reader-verse--jesus .reader-verse__num::after,
.reader-verse--god   .reader-verse__num::after {
  font-size: 0.66em;
  vertical-align: super;
  margin-left: 1px;
  opacity: 0.75;
}
.reader-verse--jesus .reader-verse__num::after { content: '\271D'; }  /* ✝ Jesus */
.reader-verse--god   .reader-verse__num::after { content: '\2736'; }  /* ✶ God */

/* CSS-40: a verse can be both red-letter and highlighted; a same-hue highlight (red
   text on red highlight, purple on purple) is unreadable. When highlighted, let the
   highlight own the verse and revert the text to the normal high-contrast colour — the
   speaker is still shown by the verse-number glyph and title (AUD-21). */
[class*="reader-verse--hl-"].reader-verse--jesus,
[class*="reader-verse--hl-"].reader-verse--god { color: var(--color-text); }

/* Dark-mode heading colour */
:root:not([data-theme="light"]) .reader-section-heading {
  color: color-mix(in srgb, var(--color-muted) 80%, var(--color-text) 20%);
}

/* Dark mode: soften red/purple letter to avoid harshness on dark backgrounds */
[data-theme="dark"] .reader-verse--jesus { color: #e07060; }
[data-theme="dark"] .reader-verse--god   { color: #a070e0; }
/* CSS-40 (dark): highlighted red-letter verses revert to normal text colour here too
   (higher specificity than the dark colour rules above, so it wins). */
[data-theme="dark"] [class*="reader-verse--hl-"].reader-verse--jesus,
[data-theme="dark"] [class*="reader-verse--hl-"].reader-verse--god { color: var(--color-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [class*="reader-verse--hl-"].reader-verse--jesus,
  :root:not([data-theme="light"]) [class*="reader-verse--hl-"].reader-verse--god { color: var(--color-text); }
}

/* Dark mode speaker chips */
[data-theme="dark"] .reader-speaker-chip--jesus {
  color: #e07060;
  border-color: rgba(224, 112, 96, 0.3);
  background: rgba(224, 112, 96, 0.08);
}
[data-theme="dark"] .reader-speaker-chip--god {
  color: #a070e0;
  border-color: rgba(160, 112, 224, 0.3);
  background: rgba(160, 112, 224, 0.08);
}

/* Woe-flag border is too dark at 35% opacity on the near-black dark-mode background;
   use a brighter red at higher opacity so it remains a visible warning accent */
[data-theme="dark"] .reader-para--flag-woe {
  border-left-color: rgba(210, 90, 60, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader-para--flag-woe {
    border-left-color: rgba(210, 90, 60, 0.55);
  }
}

/* ── Passage Study Desk (G3 phase 1) ──────────────────────────────────────── */
.reader-study-btn {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.reader-study-btn:hover { background: rgba(92,61,30,0.07); border-color: rgba(92,61,30,0.35); color: var(--color-text); }
.reader-study-btn--on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(92,61,30,0.25); }
.reader-study-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Base / mobile: off-canvas drawer (slides in; no display toggle so it animates) */
.reader-study-desk {
  --sd-rail-w: 52px;
  position: fixed;
  top: var(--header-h, 0); right: 0; bottom: 0;
  width: 92%; max-width: 440px; z-index: 950;
  display: flex; flex-direction: row;          /* [binder rail | main]; SD-T1 */
  overflow: hidden;                            /* the inner `main` is the scroll container */
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 18px rgba(0,0,0,0.28);
  transform: translateX(105%);
  /* Off-canvas when closed. visibility:hidden (flipped after the slide-out finishes) keeps the
     fixed, off-screen panel from painting past the right edge — which on mobile created a phantom
     blank horizontal-scroll region. Mirrors the .study-blade off-canvas pattern. */
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
/* `main` holds head + section body + blade overlay, and owns the scroll (so the rail, a flex
   sibling, never scrolls away). min-height:0 lets it shrink inside the bounded desk. */
.study-desk__main {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; position: relative;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* While a blade overlay is open, lock the section body behind it. */
.reader-study-desk--blade .study-desk__main { overflow: hidden; }
.reader-layout--study-open .reader-study-desk { transform: translateX(0); visibility: visible; transition: transform 0.22s ease, visibility 0s; }

@media (min-width: 700px) {
  .reader-study-desk { display: none; }                         /* hidden unless open */
  .reader-layout--study-open { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .reader-layout--study-open .reader-main { grid-column: 1; grid-row: 1; }
  .reader-layout--study-open .reader-sidebar,
  .reader-layout--study-open .reader-xref-panel { display: none; }
  .reader-layout--study-open .reader-study-desk {
    display: flex; position: sticky; top: 0.5rem;
    grid-column: 2; grid-row: 1; transform: none;
    width: auto; max-width: none; box-shadow: none;
    border: 1px solid var(--color-border); border-radius: 8px;
    max-height: calc(100vh - 1rem); overflow: hidden;   /* inner `main` scrolls (SD-T1) */
  }
}

.study-desk__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle, rgba(140,106,0,0.05));
  position: sticky; top: 0; z-index: 1;
}
.study-desk__title { font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.study-desk__ref { font-family: var(--font-ui); font-weight: 600; color: var(--color-heading); margin-right: auto; }
.study-desk__close { border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--color-muted); padding: 0.2rem 0.4rem; border-radius: 5px; }
.study-desk__close:hover { background: var(--color-border); color: var(--color-text); }
.study-desk__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.study-desk__body { padding: 0.6rem 0.9rem 2rem; font-family: var(--font-ui); }

/* ── Binder-tab rail (SD-T1) ── a "school binder divider" spine on the desk's leading edge.
   Each divider switches the top-level study tool (openTool); breadcrumb still handles depth.
   A flex sibling of `main`, so it stays put while the body scrolls and stays visible above the
   blade overlay (which lives inside `main`). */
.study-rail {
  flex: 0 0 var(--sd-rail-w); align-self: stretch;
  display: flex; flex-direction: column; gap: 1px;
  padding: 0.25rem 0; overflow: hidden;   /* no scroll: every tool fits via short, single-line labels */
  background: var(--color-surface-subtle, rgba(140,106,0,0.06));
  border-right: 1px solid var(--color-border);
}
.study-rail__tab {
  flex: 1 1 auto; min-height: 0; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 0.3rem 0.1rem; color: var(--color-muted);
  border-left: 3px solid transparent; border-radius: 0 7px 7px 0;
  font-family: var(--font-ui);
}
.study-rail__tab:hover { background: var(--color-border); color: var(--color-text); }
.study-rail__tab--active {
  background: var(--color-surface); color: var(--color-heading);
  border-left-color: var(--color-accent); font-weight: 600;
}
.study-rail__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.study-rail__icon  { font-size: 1rem; line-height: 1; }
.study-rail__label { font-size: 0.55rem; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; text-align: center; white-space: nowrap; }

/* ── Section switcher (SD-T2): chip row pinned atop the Synthesis/Commentary blades ── */
.study-secswitch {
  display: flex; gap: 0.3rem; overflow-x: auto; padding: 0 0 0.6rem;
  margin-bottom: 0.6rem; border-bottom: 1px solid var(--color-border);
  -webkit-overflow-scrolling: touch;
}
.study-secswitch__chip {
  flex: 0 0 auto; max-width: 11rem; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  padding: 0.3rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface); color: var(--color-text); font-family: var(--font-ui);
}
.study-secswitch__chip:hover { border-color: var(--color-accent); }
.study-secswitch__chip--active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.study-secswitch__chip--active .study-secswitch__range { color: rgba(255,255,255,0.85); }
.study-secswitch__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.study-secswitch__range { font-size: 0.66rem; font-weight: 700; color: var(--color-muted); }
.study-secswitch__label { font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Word study: info note + theological starter chips (SD-T3) ── */
.study-word-note {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.55rem; margin-bottom: 0.6rem;
  background: var(--color-surface-subtle, rgba(140,106,0,0.06));
  border: 1px solid var(--color-border); border-radius: 6px;
  font-size: 0.78rem; color: var(--color-text); font-family: var(--font-ui);
}
.study-word-note span { margin-right: auto; }
.study-word-note__x { border: none; background: none; cursor: pointer; color: var(--color-muted); font-size: 0.85rem; padding: 0 0.2rem; border-radius: 4px; }
.study-word-note__x:hover { background: var(--color-border); color: var(--color-text); }
.study-word-starters { margin-bottom: 0.7rem; }
.study-word-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.study-word-chip {
  cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 0.25rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text); font-family: var(--font-ui);
}
.study-word-chip:hover { border-color: var(--color-accent); }
.study-word-chip--active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.study-word-chip--active .study-word-chip__gloss { color: rgba(255,255,255,0.85); }
.study-word-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.study-word-chip__lemma { font-size: 0.82rem; font-weight: 600; }
.study-word-chip__gloss { font-size: 0.62rem; color: var(--color-muted); }

/* ── Commentary / Witnesses blade (SD-T4) ── */
.study-comm-srcrow { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0.6rem; }
.study-comm-srclabel { font-size: 0.72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.study-comm-src {
  flex: 1 1 auto; min-width: 0; padding: 0.3rem 0.4rem; border-radius: 6px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-ui); font-size: 0.78rem;
}
.study-comm-v { margin: 0 0 0.9rem; }
.study-comm-v__head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.3rem;
}
.study-comm-v__head::-webkit-details-marker { display: none; }
.study-comm-v__head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.study-comm-v__chev { color: var(--color-muted); font-size: 0.7rem; transition: transform 0.15s ease; }
.study-comm-v:not([open]) .study-comm-v__chev { transform: rotate(-90deg); }
.study-comm-v__num {
  display: inline-block; padding: 0.08rem 0.45rem; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-subtle, rgba(140,106,0,0.06));
  color: var(--color-accent); font-weight: 700; font-size: 0.7rem; font-family: var(--font-ui);
}
.study-comm-v__num:hover { border-color: var(--color-accent); }
.study-comm-v__body { font-size: 0.86rem; line-height: 1.5; }
.study-comm-ai { margin-top: 0.6rem; font-style: italic; }
/* Voices tab: a static "locked source" label where Commentary shows its picker. */
.study-comm-locked {
  margin: 0.5rem 0 0.6rem; padding: 0.25rem 0.5rem; display: inline-block;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-subtle, rgba(140,106,0,0.06)); font-weight: 600;
}
/* Places tab: the moved "Where & when" map(s) sit above the deep-link lists. */
.study-pt__maps { margin-bottom: 1rem; }
.study-pt__maps .study-period:last-child { margin-bottom: 0; }

/* ── Cross-version word blade (SD-T4) ── */
.study-cv__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.2rem; }
.study-cv__lemma { font-size: 1.3rem; font-weight: 700; color: var(--color-heading); }
.study-cv__translit { font-size: 0.85rem; font-style: italic; color: var(--color-muted); }
.study-cv__gloss { margin: 0.1rem 0 0.4rem; color: var(--color-text); }
.study-cv__verse { margin: 0 0 0.8rem; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.study-cv__vnum {
  display: block; width: 100%; text-align: left; cursor: pointer; padding: 0.35rem 0.55rem;
  border: none; border-bottom: 1px solid var(--color-border); background: var(--color-surface-subtle, rgba(140,106,0,0.06));
  color: var(--color-accent); font-weight: 700; font-size: 0.78rem; font-family: var(--font-ui);
}
.study-cv__vnum:hover { background: var(--color-border); }
.study-cv__row { display: flex; gap: 0.5rem; padding: 0.3rem 0.55rem; font-size: 0.85rem; line-height: 1.45; }
.study-cv__row + .study-cv__row { border-top: 1px dashed var(--color-border); }
.study-cv__ver { flex: 0 0 3rem; font-weight: 700; font-size: 0.66rem; color: var(--color-muted); padding-top: 0.15rem; text-transform: uppercase; }
.study-cv__txt { flex: 1 1 auto; }

/* ── Place & time blade (SD-T4) ── */
.study-pt__sec { margin: 0 0 1rem; }
.study-pt__sec h4 { margin: 0 0 0.4rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.study-pt__place { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); }
.study-pt__pname { font-weight: 600; color: var(--color-heading); display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.study-pt__under { font-size: 0.66rem; font-weight: 500; color: var(--color-muted); }
.study-pt__pdesc { margin: 0.15rem 0; font-size: 0.8rem; color: var(--color-text); }
.study-pt__plinks { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.2rem; }
.study-pt__vbtn {
  cursor: pointer; padding: 0.05rem 0.4rem; border: 1px solid var(--color-border); border-radius: 999px;
  background: none; color: var(--color-accent); font-weight: 600; font-size: 0.7rem; font-family: var(--font-ui);
}
.study-pt__vbtn:hover { border-color: var(--color-accent); }
.study-pt__map { font-size: 0.78rem; font-weight: 600; color: var(--color-accent); text-decoration: none; }
.study-pt__map:hover { text-decoration: underline; }
.study-pt__period {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.5rem; margin-bottom: 0.3rem;
  border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-text);
}
.study-pt__period:hover { border-color: var(--color-accent); }
.study-pt__era { flex: 1 1 auto; font-weight: 600; }
.study-pt__go { font-size: 0.72rem; color: var(--color-accent); }

/* Reader interlinear popover: the "Study in desk" action (SD-T3). */
.ri-popover__desk {
  cursor: pointer; border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff;
  border-radius: 5px; padding: 0.2rem 0.5rem; font-size: 0.76rem; font-family: var(--font-ui); margin-right: 0.4rem;
}
.ri-popover__desk:hover { filter: brightness(1.05); }
.ri-popover__desk:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.study-empty { color: var(--color-muted); font-size: 0.85rem; padding: 1rem 0; }
.study-section { margin-bottom: 1.2rem; }
.study-section__title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); margin-bottom: 0.4rem; }

.study-outline { display: flex; flex-direction: column; gap: 0.15rem; }
.study-outline__row { display: flex; align-items: stretch; gap: 0.15rem; }
.study-outline__go {
  display: flex; align-items: baseline; gap: 0.55rem; flex: 1 1 auto; min-width: 0;
  text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 5px;
  padding: 0.35rem 0.45rem; color: var(--color-text);
  font-family: var(--font-ui); font-size: 0.85rem;
}
.study-outline__go:hover { background: rgba(140,106,0,0.08); }
.study-outline__go:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.study-outline__synth {
  flex-shrink: 0; cursor: pointer; background: none; border: none; border-radius: 5px;
  color: var(--color-accent); font-size: 0.92rem; padding: 0 0.45rem;
}
.study-outline__synth:hover { background: rgba(140,106,0,0.12); }
.study-outline__synth:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.study-outline__range { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: var(--color-accent); min-width: 3.2rem; }
.study-outline__title { color: var(--color-heading); }

.study-speakers { display: flex; flex-direction: column; gap: 0.55rem; }
.study-speaker { display: flex; flex-direction: column; gap: 0.15rem; }
.study-speaker__head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.study-speaker__head .reader-speaker-chip { margin-bottom: 0; }
.study-speaker__ranges { font-size: 0.78rem; color: var(--color-muted); }
.study-speaker__detail { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--color-text); }
.study-speaker__link { cursor: pointer; text-decoration: none; }
.study-speaker__link:hover { text-decoration: underline; filter: brightness(0.9); }

/* Brief flash when an outline row scrolls the reader to a pericope */
.reader-verse--study-flash { animation: study-flash 1.4s ease; }
@keyframes study-flash {
  0%, 100% { background: transparent; }
  20%, 60% { background: rgba(140,106,0,0.18); border-radius: 3px; }
}

/* Collapsible section shell (header toggle + body) */
.study-section { margin-bottom: 1rem; }
.study-sec-toggle {
  display: flex; align-items: center; gap: 0.4rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 0.3rem 0; margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}
.study-sec-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); }
.study-sec-toggle:hover .study-sec-title { color: var(--color-text); }
.study-sec-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.study-sec-chevron { font-size: 0.7rem; color: var(--color-muted); transition: transform 0.15s ease; }
.study-sec-toggle[aria-expanded="false"] .study-sec-chevron { transform: rotate(-90deg); }
.study-sec-body[hidden] { display: none; }
.study-sec-note { font-size: 0.76rem; color: var(--color-muted); margin: 0 0 0.4rem; }

/* Book composition context (always-available "even with no location data" header) */
.study-ctx {
  background: rgba(140,106,0,0.05); border: 1px solid var(--color-border);
  border-radius: 7px; padding: 0.55rem 0.65rem; margin-bottom: 0.7rem;
}
.study-ctx__row { display: flex; gap: 0.5rem; font-size: 0.83rem; margin-bottom: 0.15rem; }
.study-ctx__k { flex-shrink: 0; min-width: 4.2rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.05em; padding-top: 0.12rem; }
.study-ctx__v { color: var(--color-heading); }
.study-ctx__note { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--color-text); font-style: italic; }
.study-conf {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.02rem 0.3rem; border-radius: 4px; vertical-align: middle; white-space: nowrap;
}
.study-conf--explicit { background: rgba(61,122,74,0.18); color: #3f8f50; }
.study-conf--strong   { background: rgba(140,106,0,0.18); color: var(--color-accent); }
.study-conf--probable { background: var(--color-border); color: var(--color-muted); }
.study-conf--uncertain{ background: rgba(200,80,80,0.16); color: #c95555; }

/* Per-period map block */
.study-period { margin-bottom: 0.9rem; }
.study-period__head { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); margin: 0 0 0.25rem; }
.study-period__annot { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--color-heading); margin-bottom: 0.35rem; }
.study-era-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }

/* Regional powers legend */
.study-powers { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.4rem; }
.study-power { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--color-text); }
.study-power__sw { width: 0.7rem; height: 0.7rem; border-radius: 3px; opacity: 0.7; flex-shrink: 0; }

/* On-map power label + place-of-writing marker (Leaflet divIcons) */
.study-power-label { pointer-events: none; }
.study-power-label span {
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; white-space: nowrap;
  color: #4a3a10; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.study-write-marker {
  font-size: 0.95rem; line-height: 20px; text-align: center;
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* An async section placeholder that resolved to nothing collapses (no stray gap). */
.study-sec-body:empty { display: none; }

/* SD-P5 · Range scope control */
.study-range {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}
.study-range__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.study-range__sel {
  font-family: var(--font-ui); font-size: 0.85rem; padding: 0.15rem 0.3rem;
  border: 1px solid var(--color-border); border-radius: 5px;
  background: var(--color-bg); color: var(--color-text);
}
.study-range__dash { color: var(--color-muted); }
.study-range__reset {
  margin-left: auto; font-family: var(--font-ui); font-size: 0.75rem; cursor: pointer;
  background: none; border: 1px solid var(--color-border); border-radius: 5px;
  padding: 0.2rem 0.5rem; color: var(--color-muted);
}
.study-range__reset:hover { background: rgba(140,106,0,0.08); color: var(--color-text); }

/* SD-P2 · Key words — collapsible content-word cards */
.study-keywords { display: flex; flex-direction: column; gap: 0.15rem; }
.study-kw { border-radius: 6px; }
.study-kw--open { background: rgba(140,106,0,0.05); }
.study-kw__toggle {
  display: flex; align-items: baseline; gap: 0.45rem; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; border-radius: 6px;
  padding: 0.34rem 0.45rem; color: var(--color-text); font-family: var(--font-ui);
}
.study-kw__toggle:hover { background: rgba(140,106,0,0.08); }
.study-kw__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.study-kw__chevron { font-size: 0.65rem; color: var(--color-muted); transition: transform 0.15s ease; flex-shrink: 0; align-self: center; }
.study-kw__toggle[aria-expanded="false"] .study-kw__chevron { transform: rotate(-90deg); }
.study-kw__lemma { font-weight: 600; color: var(--color-heading); flex-shrink: 0; }
.study-kw__translit { font-size: 0.78rem; font-style: italic; color: var(--color-muted); flex-shrink: 0; }
.study-kw__gloss { font-size: 0.82rem; color: var(--color-text); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-kw--open .study-kw__gloss { white-space: normal; }
.study-kw__count {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--color-accent);
  background: rgba(140,106,0,0.1); border-radius: 999px; padding: 0.05rem 0.45rem;
}
.study-kw__body { padding: 0 0.5rem 0.5rem 1.4rem; }
.study-kw__body[hidden] { display: none; }
.study-kw__def { font-size: 0.82rem; color: var(--color-text); margin: 0.1rem 0 0.3rem; }
.study-kw__deriv { font-size: 0.76rem; color: var(--color-muted); font-style: italic; margin: 0 0 0.35rem; }
.study-kw__link { font-size: 0.8rem; font-weight: 600; }

/* SD-P3b · Journeys legend + recipient/writer map markers */
.study-journeys { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem; }
.study-journey { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--color-text); }
.study-journey__line { display: inline-block; width: 1.3rem; height: 3px; border-radius: 2px; flex-shrink: 0; }
.study-sent-marker {
  font-size: 0.8rem; line-height: 18px; text-align: center;
  background: var(--color-accent); color: #fff;
  border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* Place hover tooltip with a one-line significance (like the maps page).
   Compound selector .leaflet-tooltip.study-map-tip (the element carries both classes)
   outranks Leaflet's own `.leaflet-tooltip { white-space: nowrap }`, whose stylesheet
   loads after reader.css — without this the desc text runs off the right edge of the
   tooltip box unbounded. */
.leaflet-tooltip.study-map-tip {
  /* width:max-content sizes the box to its text (capped by max-width); without it the
     tooltip's intrinsic min-width could collapse to ~1 character, wrapping every letter
     onto its own line (a tall, one-letter-wide sliver). break-word (not "anywhere")
     wraps only genuinely unbreakable words, so it never shrinks the min-content box. */
  width: max-content;
  max-width: 230px;
  white-space: normal;
  overflow-wrap: break-word;
}
.study-map-tip__desc { display: block; margin-top: 0.15rem; font-size: 0.72rem; opacity: 0.85; font-weight: 400; }

/* ── Blades: drill-down panes layered over the desk ───────────────────────── */
.study-bookbtn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.84rem; font-weight: 600; color: var(--color-heading);
  background: rgba(140,106,0,0.06); border: 1px solid var(--color-border); border-radius: 7px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.9rem;
}
.study-bookbtn:hover { background: rgba(140,106,0,0.12); border-color: var(--color-accent); }
.study-bookbtn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.study-kw__open {
  display: inline-block; margin-top: 0.25rem; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--color-accent);
  background: none; border: none; padding: 0;
}
.study-kw__open:hover { text-decoration: underline; }

.study-blade {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.2s ease;
}
.reader-study-desk--blade .study-blade { transform: translateX(0); visibility: visible; }
/* Lock the desk's own scroll while a blade is open so the absolute overlay stays put;
   the blade body does its own scrolling. (Specificity matches the desktop overflow rule.) */
.reader-study-desk--blade { overflow: hidden; }
.reader-layout--study-open .reader-study-desk--blade { overflow: hidden; }
.study-blade__head {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle, rgba(140,106,0,0.05));
  position: sticky; top: 0; z-index: 1;
}
.study-blade__back, .study-blade__close {
  border: none; background: none; cursor: pointer; font-size: 1.05rem;
  color: var(--color-muted); padding: 0.1rem 0.45rem; border-radius: 5px; flex-shrink: 0;
}
.study-blade__back:hover, .study-blade__close:hover { background: var(--color-border); color: var(--color-text); }
.study-blade__back:focus-visible, .study-blade__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.study-blade__crumbs { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; margin-right: auto; font-family: var(--font-ui); }
.study-blade__crumb { border: none; background: none; cursor: pointer; color: var(--color-muted); padding: 0.1rem 0.25rem; border-radius: 4px; font-size: 0.76rem; font-family: var(--font-ui); }
.study-blade__crumb[aria-current="page"] { color: var(--color-heading); font-weight: 600; }
.study-blade__crumb:hover { color: var(--color-text); text-decoration: underline; }
.study-blade__sep { color: var(--color-muted); font-size: 0.76rem; }
.study-blade__body { padding: 0.8rem 0.95rem 2rem; overflow-y: auto; font-family: var(--font-ui); }

/* Word-study blade */
.study-word__lemma { font-size: 1.5rem; font-weight: 700; color: var(--color-heading); line-height: 1.2; }
.study-word__sub { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.15rem 0 0.5rem; }
.study-word__translit { font-style: italic; color: var(--color-text); }
.study-word__pron { color: var(--color-muted); font-size: 0.85rem; }
.study-word__code { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--color-accent); background: rgba(140,106,0,0.1); border-radius: 999px; padding: 0.05rem 0.5rem; }
.study-word__gloss { font-size: 0.86rem; color: var(--color-text); margin: 0 0 0.6rem; }
.study-word__block { margin-top: 0.8rem; }
.study-word__block h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin: 0 0 0.35rem; }
.study-word__block p { font-size: 0.85rem; line-height: 1.55; margin: 0; }
.study-word__deriv { font-size: 0.78rem; font-style: italic; color: var(--color-muted); margin: 0.3rem 0 0; }
.study-word__refs { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.study-word__ref { font-size: 0.82rem; }
.study-word__more { margin-top: 0.45rem; font-size: 0.78rem; cursor: pointer; background: none; border: 1px solid var(--color-border); border-radius: 5px; padding: 0.2rem 0.55rem; color: var(--color-muted); }
.study-word__more:hover { background: rgba(140,106,0,0.08); color: var(--color-text); }
.study-word__ext { display: inline-block; margin-top: 0.9rem; font-size: 0.8rem; font-weight: 600; }

/* Book-details blade */
.study-book__title { font-size: 1.25rem; font-weight: 700; color: var(--color-heading); margin-bottom: 0.5rem; }
.study-book__sec { margin-top: 0.85rem; border-top: 1px solid var(--color-border); padding-top: 0.5rem; }
.study-book__sechead {
  display: flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none;
}
.study-book__sechead::-webkit-details-marker { display: none; }
.study-book__sechead:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.study-book__sec h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin: 0; }
.study-book__chev { color: var(--color-muted); font-size: 0.7rem; transition: transform 0.15s ease; }
.study-book__sec:not([open]) .study-book__chev { transform: rotate(-90deg); }
.study-book__secbody { margin-top: 0.4rem; }
.study-book__sec p { font-size: 0.85rem; line-height: 1.55; margin: 0; color: var(--color-text); }
.study-book__list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.5; }
.study-book__list li { margin-bottom: 0.15rem; }
.study-book__outline { display: flex; flex-direction: column; gap: 0.25rem; }
.study-book__orow { display: flex; gap: 0.55rem; font-size: 0.84rem; align-items: baseline; }
.study-book__ochap { flex-shrink: 0; min-width: 4.8rem; color: var(--color-accent); font-weight: 600; font-size: 0.76rem; }
.study-book__kv { margin-bottom: 0.5rem; }
.study-book__kvnote { display: block; font-size: 0.78rem; color: var(--color-muted); line-height: 1.45; margin-top: 0.1rem; }
.study-book__person { font-size: 0.84rem; line-height: 1.5; margin-bottom: 0.4rem; }
.study-book__td { margin-bottom: 0.55rem; }
.study-book__td h5 { font-size: 0.82rem; margin: 0 0 0.15rem; color: var(--color-heading); }
.study-book__td p { font-size: 0.82rem; line-height: 1.5; margin: 0; color: var(--color-text); }

/* Section-synthesis blade */
.study-synth__label { font-size: 1.15rem; font-weight: 700; color: var(--color-heading); line-height: 1.25; }
.study-synth__ref { font-size: 0.8rem; color: var(--color-muted); margin: 0.2rem 0 0.7rem; }
.study-synth__intro { font-size: 0.88rem; line-height: 1.6; color: var(--color-text); margin-bottom: 0.8rem; }
.study-synth__intro p { margin: 0 0 0.6rem; }
.study-synth__domain {
  border: 1px solid var(--color-border); border-radius: 7px; margin-bottom: 0.45rem;
  background: rgba(140,106,0,0.03);
}
.study-synth__domain > summary {
  cursor: pointer; padding: 0.5rem 0.65rem; font-weight: 600; font-size: 0.84rem;
  color: var(--color-heading); list-style: none;
}
.study-synth__domain > summary::-webkit-details-marker { display: none; }
.study-synth__domain > summary::before { content: '▸ '; color: var(--color-muted); }
.study-synth__domain[open] > summary::before { content: '▾ '; }
.study-synth__domain[open] > summary { border-bottom: 1px solid var(--color-border); }
.study-synth__domain-body { padding: 0.6rem 0.7rem; font-size: 0.85rem; line-height: 1.6; color: var(--color-text); }
.study-synth__domain-body p { margin: 0 0 0.55rem; }
.study-synth__domain-body p:last-child { margin-bottom: 0; }
.study-synth__refs { margin-top: 0.8rem; }
.study-synth__refs > summary {
  cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--color-accent);
  padding: 0.35rem 0; list-style: none;
}
.study-synth__refs > summary::-webkit-details-marker { display: none; }
.study-synth__refs > summary::before { content: '🔗 '; }
.study-synth__refs-body { padding: 0.3rem 0 0.5rem; }
.study-synth__voices { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.study-synth__voice-chip {
  font-size: 0.76rem; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 0.12rem 0.5rem; color: var(--color-text);
}

/* SD-P3 · Map (regional powers + landmark/passage places) */
.study-map {
  height: 240px; width: 100%; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-bg);
  /* Leaflet sets z-index up to 1000 on its own controls/panes. Without a stacking context here
     those escape into the desk's context and paint OVER the blade overlay (.study-blade, z:6).
     isolation:isolate (+ z-index:0 fallback) traps every Leaflet z-index inside this box at
     level 0, so any blade that opens on top of the map stays on top. */
  position: relative; z-index: 0; isolation: isolate;
}
.study-map .leaflet-container { font-family: var(--font-ui); }

/* SD-P4 · Connections */
.study-conn__group { margin-bottom: 0.7rem; }
.study-conn__head { font-size: 0.78rem; font-weight: 600; color: var(--color-heading); margin: 0 0 0.3rem; }
.study-conn__refs { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.study-conn__ref { font-size: 0.85rem; }
.study-echoes { display: flex; flex-direction: column; gap: 0.4rem; }
.study-echo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.study-echo__type {
  flex-shrink: 0; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-accent); background: rgba(140,106,0,0.1); border-radius: 4px; padding: 0.05rem 0.35rem;
}
.study-echo__ref { font-size: 0.84rem; }
.study-echo__note { font-size: 0.8rem; color: var(--color-muted); flex: 1 1 100%; }

/* SD · Biblepedia blade — articles ordered general → specific, in reading order */
.study-bp__intro { font-size: 0.85rem; line-height: 1.55; color: var(--color-text); margin: 0 0 0.8rem; }
.study-bp-tier {
  margin: 0.9rem 0 0.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-muted);
  border-bottom: 1px solid var(--color-border); padding-bottom: 0.25rem;
}
.study-bp-tier:first-of-type { margin-top: 0.2rem; }
.study-bp-card {
  border: 1px solid var(--color-border); border-radius: 7px; margin-bottom: 0.5rem;
  background: rgba(140,106,0,0.03); padding: 0.55rem 0.7rem 0.65rem;
}
.study-bp-card__sum {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem;
}
.study-bp-card__term { font-weight: 600; font-size: 0.9rem; color: var(--color-heading); }
.study-bp-card__cat {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-muted); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 0.08rem 0.5rem;
}
.study-bp-card__cat--people { color: #3f8f50; }
.study-bp-card__cat--places { color: #4a7bb0; }
.study-bp-card__cat--events, .study-bp-card__cat--event { color: var(--color-accent); }
.study-bp-card__refs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.5rem; }
/* Verse badges: where the article is introduced (highlighted) and later referenced. */
.study-bp-ref {
  cursor: pointer; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700;
  line-height: 1; padding: 0.12rem 0.4rem; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-muted);
}
.study-bp-ref:hover { border-color: var(--color-accent); color: var(--color-accent); }
.study-bp-ref--intro {
  color: var(--color-accent); border-color: var(--color-accent);
  background: var(--color-surface-subtle, rgba(140,106,0,0.08));
}
.study-bp-card__preview { font-size: 0.85rem; line-height: 1.55; color: var(--color-text); margin: 0 0 0.45rem; }
.study-bp-card__preview--load { color: var(--color-muted); }
.study-bp-card__more {
  display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--color-accent);
}
.study-bp-card__more:hover { text-decoration: underline; }

/* SD-P4 · Notes + export */
.study-notes {
  width: 100%; min-height: 90px; resize: vertical;
  font-family: var(--font-ui); font-size: 0.88rem; line-height: 1.5;
  padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg); color: var(--color-text); box-sizing: border-box;
}
.study-notes:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.study-export-row { margin-top: 0.55rem; }
.study-export-btn {
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; cursor: pointer;
  background: var(--color-primary); color: var(--color-on-primary);
  border: none; border-radius: 6px; padding: 0.4rem 0.8rem;
}
.study-export-btn:hover { filter: brightness(1.06); }
.study-export-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Topical / section search results (reader lookup bar; see sections.js) ─────── */
.reader-sections { padding: .25rem 0; }
.reader-sec-summary {
  font-size: .85rem; color: var(--color-muted, #888); margin: 0 0 .6rem;
}
.reader-sec-group { margin-bottom: .9rem; }
.reader-sec-group__head {
  font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-primary, #5c3d1e); margin: 0 0 .35rem; padding-bottom: .2rem;
  border-bottom: 1px solid var(--color-border, #e0d5c4);
}
.reader-sec-group__count { color: var(--color-muted, #888); font-weight: 500; }
.reader-sec-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  width: 100%; text-align: left; min-height: 44px;
  padding: .4rem .55rem; margin-bottom: .15rem;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; font-family: inherit; color: var(--color-text, #2c2416);
  transition: background .12s, border-color .12s;
}
.reader-sec-item:hover { background: var(--color-surface-alt, rgba(200,169,110,.08)); border-color: var(--color-border, #e0d5c4); }
.reader-sec-item:focus-visible { outline: 2px solid var(--color-accent, #c8a84b); outline-offset: 1px; }
.reader-sec-item__title { font-size: .95rem; }
.reader-sec-item__ref { font-size: .8rem; color: var(--color-muted, #888); white-space: nowrap; flex-shrink: 0; }
.reader-sec-note { font-size: .72rem; font-style: italic; color: var(--color-muted, #888); margin: .5rem 0 0; }
.reader-sec-suggest-label { font-size: .85rem; color: var(--color-muted, #888); margin: .5rem 0 .4rem; }
.reader-sec-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.reader-sec-chip {
  min-height: 36px; padding: .3rem .7rem;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e0d5c4);
  border-radius: 999px; cursor: pointer; font-family: inherit; font-size: .82rem;
  color: var(--color-primary, #5c3d1e); transition: background .12s, border-color .12s;
}
.reader-sec-chip:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-color: var(--color-primary, #5c3d1e); }
.reader-sec-chip:focus-visible { outline: 2px solid var(--color-accent, #c8a84b); outline-offset: 1px; }