/* ============================================================
   Bible App — reader layout & panels
   Desktop: side-by-side | Mobile: tap-to-reveal Greek
   ============================================================ */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.brand .mark {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--accent);
  line-height: 1;
}
.loc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.tbtn {
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--ink-soft);
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tbtn:hover { color: var(--ink); border-color: #cfc9be; background: var(--surface); }
.tbtn.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  font-weight: 600;
}
.tbtn[aria-pressed='true'] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Two-line label: the Greek name over an English gloss, so the button reads as
   "Greek" to someone who can't parse the Greek script. The fixed 34px tbtn height
   is too short for two lines, so this variant grows and the bar is tall enough
   (--header-h) to hold it. */
.tbtn-twoline {
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
  padding: 3px 10px;
  height: 44px;
}
.tbtn-twoline .tbtn-label { font-size: 13px; }
.tbtn-twoline .tbtn-sub {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.ctl-group { display: inline-flex; gap: 4px; }
.font-btn.active { background: var(--surface); color: var(--ink); border-color: var(--accent); }

/* ---- Font selector: button + dropdown ---- */
.font-selector {
  position: relative;
  display: inline-flex;
}
.font-select-btn {
  appearance: none;
  -webkit-appearance: none;
}
.font-select-btn::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
}
.font-selector.open .font-select-btn::after { transform: rotate(-135deg) translateY(-1px); }
.font-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
  min-width: 148px;
  display: none;
}
.font-selector.open .font-dropdown { display: block; }
.font-dropdown li {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.font-dropdown li:hover { background: var(--selection); color: var(--ink); }
.font-dropdown li.active {
  background: var(--selection);
  color: var(--ink);
  font-weight: 600;
}
.font-dropdown li[data-font='serif'] { font-family: var(--font-serif); }
.font-dropdown li[data-font='sans']  { font-family: var(--font-sans); }
.font-dropdown li[data-font='mono']  { font-family: var(--font-mono); }

/* ---- Version selector: button + dropdown ---- */
.version-selector {
  position: relative;
  display: inline-flex;
}
.version-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  -webkit-appearance: none;
}
.version-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.version-selector.open .version-caret { transform: rotate(-135deg) translateY(1px); }
.version-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
  min-width: 240px;
  display: none;
}
.version-selector.open .version-dropdown { display: block; }
.version-dropdown li {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.version-dropdown li:hover { background: var(--selection); color: var(--ink); }
.version-dropdown li.active {
  background: var(--selection);
  color: var(--ink);
  font-weight: 600;
}

/* Font/size controls stay on mobile; only the Greek toggle hides. */
@media (max-width: 820px) {
  .sep { display: none; }
  /* The loc pill duplicates the chapter header/footer; hides to make room for the version selector. */
  #loc { display: none; }
  /* On narrow screens the version dropdown aligns right so it doesn't clip past the viewport. */
  .version-dropdown { left: auto; right: 0; }
  /* The wordmark gives up its space to the Greek button; the λ mark stays. */
  .brand-name { display: none; }
  .brand { margin-right: 0; }
  /* A real Greek button replaces swipe-to-reveal, so it becomes the only way into
     the Greek pane and gets a proper label plus the accent when open. The desktop
     form is a two-line stack at 44px; here it flattens to one compact line. */
  .tbtn-twoline {
    flex-direction: row;
    padding: 0 12px;
    font-weight: 600;
    color: var(--ink);
  }
  .tbtn-twoline .tbtn-label { font-size: 13px; }
  .tbtn-twoline .tbtn-sub { display: none; }
}

/* ---- Mobile overflow menu ---- */
.oflow { position: relative; display: none; }
.oflow-btn { padding: 0 9px; }
.oflow-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
  min-width: 148px;
}
.oflow.open .oflow-panel { display: flex; }
.oflow-panel .tbtn { justify-content: flex-start; }
.oflow-panel .oflow-sz { display: flex; gap: 6px; }
.oflow-panel .oflow-sz .tbtn { flex: 1; justify-content: center; }
.oflow-lbl { margin-right: 8px; color: var(--ink-soft); }
.oflow-panel #btn-theme2 { color: var(--ink); }

@media (max-width: 820px) {
  .oflow { display: inline-flex; }
  /* The desktop in-bar forms of these controls are hidden on mobile;
     they live inside the overflow panel now. */
  #btn-theme, #btn-notes, #size-ctl { display: none; }
  /* Scrollbars remain on desktop; on mobile they hide tracks (scrolling
     still works) so the reading area and sidebar don't show white columns. */
  .sidebar, .reading, .pane.greek, .nd-body { scrollbar-width: none; }
  .sidebar::-webkit-scrollbar,
  .reading::-webkit-scrollbar,
  .pane.greek::-webkit-scrollbar,
  .nd-body::-webkit-scrollbar { display: none; }
}

/* ---- Work area (sidebar + reading) ---- */
.work {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ---- Sidebar (book navigation) ---- */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sb-search {
  position: sticky;
  top: 0;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.sb-search input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--ink);
  font-size: 13px;
}
.sb-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sb-sec {
  padding: 6px 0;
}
.sb-sec-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 16px 5px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.sb-sec-title::before {
  content: '▾ ';
  display: inline;
  /* Larger than the label so the collapse affordance is legible; set here
     rather than on .sb-sec-title, which would grow the section text too. */
  font-size: 13px;
  transition: transform 0.15s ease;
}
.sb-sec.collapsed .sb-sec-title::before {
  content: '▸ ';
}
.sb-sec.collapsed .sb-book { display: none; }
.sb-sec.collapsed .sb-chapters { display: none; }
/* The open book's grid is shown by `.sb-book.open + .sb-chapters` (3 classes),
   which outranks the two-class rule above. Restate it with higher specificity so
   collapsing a testament also hides its expanded book's chapters. */
.sb-sec.collapsed .sb-book.open + .sb-chapters { display: none; }
.sb-book {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.sb-book:hover { background: var(--bg-elevated); color: var(--ink); }
.sb-book.active {
  color: var(--ink);
  background: var(--bg-elevated);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sb-arrow {
  font-size: 14px;
  color: var(--ink-faint);
  transform: rotate(0deg);
  transition: transform 0.15s ease;
  /* Must track font-size: the glyph is wider than 12px at 14px and would clip. */
  width: 15px;
  flex: none;
}
.sb-book.open .sb-arrow { transform: rotate(90deg); }
.sb-book .c {  /* last chapter badge */
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
}

/* ---- Expandable chapter grid ---- */
.sb-chapters {
  display: none;
  padding: 2px 12px 8px 22px;
}
.sb-book.open + .sb-chapters,
.sb-chapters.open { display: grid; }
.sb-chapters {
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
.sb-ch {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--ink-soft);
  border-radius: 5px;
  height: 26px;
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sb-ch:hover { border-color: var(--accent); color: var(--ink); }
.sb-ch.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}

/* ---- Main reading column ---- */
.reading {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.sheet {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 40px 80px;
}

/* Book + chapter head */
.ck-inline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bookname {
  font-family: var(--font-serif);
  font-size: var(--fs-chapter);
  font-weight: 720;
  letter-spacing: -0.02em;
  margin: 0;
}
.chapno {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
  font-weight: 650;
}

/* ---- Book introduction (collapsible) ---- */
.intro {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.intro-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  border-radius: var(--r-md);
}
.intro-head:hover { color: var(--ink); }
.intro-arrow {
  font-size: 13px;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
  flex: none;
}
.intro.open .intro-arrow { transform: rotate(90deg); }
.intro-body { display: none; }
.intro.open .intro-body {
  display: block;
  padding: 0 14px 14px;
}
.intro-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 12.5px;
}
.intro-meta dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}
.intro-meta dd { margin: 0; color: var(--ink); }
.intro-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---- "More" panel, nested inside the introduction body ---- */
.more {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}
.more-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
}
.more-head:hover { color: var(--accent-ink); }
.more-arrow {
  font-size: 13px;
  color: var(--accent);
  transition: transform 0.15s ease;
  flex: none;
}
.more.open .more-arrow { transform: rotate(90deg); }
.more-body { display: none; }
.more.open .more-body { display: block; }
.more-body p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.more-h {
  margin: 20px 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --ink-faint reads 2.6:1 here, which fails AA. These are real headings rather
     than decorative labels, so they take --ink-soft (6.3:1 light, 7.1:1 dark). */
  color: var(--ink-soft);
}
.more-outline, .more-themes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.more-outline li, .more-themes li {
  padding: 5px 0 5px 14px;
  border-left: 2px solid var(--line);
  margin-bottom: 6px;
}
.more-outline li {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 4px 14px;
  align-items: baseline;
}
.more-range {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  /* Same AA fix as .more-h. Still lighter than the .more-desc beside it, which is
     --ink, so the range stays visually secondary without dropping below 4.5:1. */
  color: var(--ink-soft);
  padding-top: 2px;
}
.more-desc { color: var(--ink); }
.more-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.more-ref {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.more-ref:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
/* .more-christ needs no rule of its own — it is a <p> in .more-body. */
@media (max-width: 620px) {
  .more-outline li { grid-template-columns: 1fr; }
}

/* ---- The two-pane grid (desktop) ---- */
.reader-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 4px;
}
.pane {
  min-width: 0;
}
.pane + .pane {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.pane-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.pane.en .pane-head { color: var(--accent); }

/* Close button for the Greek pane. Desktop: sits beside the "Greek" label and
   collapses the column. Mobile: dismisses the overlay. Defined outside the mobile
   media query so desktop doesn't fall back to raw button defaults. */
.pane-close {
  display: inline;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.pane-close:hover { color: var(--ink); background: var(--surface); }

/* Desktop Greek toggle: hide the Greek pane and collapse the grid to one column.
   Desktop-only on purpose. On mobile the same pane is an overlay that the Greek
   button opens, and a `display:none` from a preference saved on desktop would make
   that button do nothing at all — the pane it tries to open is already hidden. */
@media (min-width: 821px) {
  .gr-hidden .reader-grid { grid-template-columns: 1fr; }
  .gr-hidden .pane.greek { display: none; }
}

/* ---- Verse rendering ---- */
.verses {
  font-family: var(--font-serif);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--ink);
}
.greek.verses {
  color: var(--ink);
}
.pane.en .verses { text-align: left; }

[data-mode='verse'] .v {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 6px;
  margin-bottom: 0.55em;
  align-items: baseline;
}
[data-mode='verse'] .vnum {
  font-family: var(--font-mono);
  font-size: 0.62em;
  color: var(--accent);
  font-weight: 650;
  line-height: inherit;
  text-align: right;
}

[data-mode='para'] .v {
  display: inline;
}
[data-mode='para'] .vnum {
  margin-right: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.62em;
  color: var(--accent);
  font-weight: 650;
}
[data-mode='para'] .vnum::after { content: none; }
[data-mode='para'] .v { margin: 0; }

/* Per-verse note button (English pane) */
.vnote {
  position: absolute;
  margin-left: 6px;
  transform: translateY(-1px);
  border: none;
  background: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.62em;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.vnote:hover { background: var(--selection); opacity: 1; }
.v:hover .vnote { opacity: 0.55; }
[data-mode='verse'] .v { position: relative; }
[data-mode='para'] .v { position: relative; }
[data-mode='para'] .greek .v:hover { background: var(--selection); }

/* Words of Jesus, from the per-translation spans the reader rendered. */
.wj { color: var(--wj); }

.v { cursor: default; }
.v:hover { background: var(--selection); }
.hl-a, .hl-b, .hl-c { border-radius: 2px; padding: 0 1px; }
.hl-a { background: rgba(212, 162, 86, 0.25); }
.hl-b { background: rgba(120, 190, 178, 0.28); }
.hl-c { background: rgba(170, 130, 200, 0.24); }

/* empty / missing verse */
.missing {
  font-family: var(--font-sans);
  font-size: 0.75em;
  color: var(--ink-faint);
  font-style: italic;
}

/* ---- Mobile: single-column + Greek overlay ----
   The reader-grid is the layout engine. On desktop it's 2 cols.
   ≤820px the grid becomes one column; the Greek pane is a fixed
   right-hand overlay that slides in when the Greek button is tapped. */
@media (max-width: 820px) {
  .sidebar {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 38vh;
    /* Make the bookshelf more compact so the reader gets real space. */
    font-size: 13px;
  }
  /* A 10.5px uppercase mono label is legible on a desktop monitor at arm's length
     but not on a phone, where it is also the only way to tell which testament you
     are looking at. It grows here rather than at the base size, which is right for
     the sidebar's other, denser rows. */
  .sb-sec-title {
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--ink);
    font-weight: 700;
    padding: 12px 16px 6px;
  }
  .sb-book { padding: 8px 16px; }
  .work { flex-direction: column; }
  .reading { overflow-y: auto; }

  /* The two panes become stacked: EN full, GR as an overlay layer */
  .reader-grid {
    display: block;
    position: relative;
    height: 100%;
  }
  .pane { display: block; }
  .pane.greek {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: 92%;
    background: var(--bg-elevated);
    z-index: 30;
    transform: translateX(102%);
    transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    padding: 18px;
  }
  .pane.greek.open { transform: translateX(0); }
  .pane.greek .pane-head { font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
  .pane.greek .verses { margin-top: 6px; }
  /* .pane-close itself is styled above; the overlay is dismissed by the same
     button, so only the larger tap target differs here. */
  .pane-close { font-size: 20px; padding: 0 6px; }

  .sheet { padding: 20px 48px 60px 18px; max-width: 100%; }

  /* Everything reads a notch small on a phone. Raising the root font size scales
     the whole rem-based layout at once — the verse text included, since --fs-read
     and --fs-chapter are both in rem — rather than each piece needing its own bump.
     The user's own size +/- control still works on top, because applyFont() sets
     --fs-read inline on the reading element. */
  html { font-size: 18px; }
  /* base.css pins body to 16px, so anything without its own size inherits 16px and
     ignores the root bump entirely. Restating it here is what actually propagates. */
  body { font-size: 17px; }
  .tbtn { height: 38px; min-width: 38px; font-size: 14px; }
  .topbar { padding: 0 10px; gap: 6px; }
}

/* ---- Chapter navigation footer ---- */
.chap-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.chap-nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.chap-nav button:hover { border-color: var(--accent); color: var(--ink); }
.chap-nav .spacer { flex: 1; }

/* ---- Notes drawer ---- */
.notes-drawer {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 360px;
  max-width: 92vw;
  background: var(--bg-elevated);
  border-left: 1px solid var(--line);
  transform: translateX(102%);
  transition: transform 0.28s cubic-bezier(0.22,0.61,0.36,1);
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}
.notes-drawer.open { transform: translateX(0); }
.nd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 650;
  font-size: 14px;
}
.nd-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}
.nd-note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
}
.nd-note .nd-ref {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 650;
  margin-bottom: 6px;
}
.nd-note textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 8px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  resize: vertical;
}
.nd-note textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- Mobile type floor ----
   Deliberately last in the file. Several of the rules it overrides (.chap-nav,
   .sb-search input) are declared further down than the mobile block above, so a
   same-specificity override placed up there loses to them on source order. Keeping
   every mobile size bump in one place at the end also makes the scale auditable —
   these are the pieces a thumb aims at or reads at a glance. */
@media (max-width: 820px) {
  .sb-search input { font-size: 16px; padding: 11px 12px; }
  .sb-book { font-size: 15px; }
  .sb-ch { height: 36px; font-size: 14px; }
  .sb-book .c { font-size: 13px; }
  #intro-btn, #more-btn { font-size: 13px; }
  .chap-nav { font-size: 14px; }
  .chap-nav button { font-size: 14px; padding: 9px 12px; }
  .chap-nav .loc { font-size: 13px; }
  .pane.greek .pane-head { font-size: 14px; }
  /* 10.5px mono uppercase was doing double duty as the "WEB · ENGLISH" column
     label, which is the only thing telling the two panes apart once stacked. */
  .pane-head { font-size: 13px; }
  /* Verse numbers are 0.62em of the reading size, so they shrink with it — 11.7px
     at the mobile floor. Raised to a fraction that stays legible at any size the
     +/- control reaches rather than a fixed px, which would invert the hierarchy
     at the largest setting. */
  [data-mode='verse'] .vnum,
  [data-mode='para'] .vnum { font-size: 0.72em; }
  /* The note button is revealed by .v:hover, and a touch screen never hovers, so on
     mobile it was both 11.7px and permanently invisible — unreachable at any size.
     Shown at a tappable size instead. */
  .vnote { font-size: 0.8em; opacity: 0.6; padding: 4px 6px; }
  .v:hover .vnote { opacity: 0.6; }
}

/* no-js */
.no-js { padding: 24px; font-family: var(--font-serif); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}