/* Concord — dark by default, because the threads are light on dark in the
   original and a white page turns the rainbow into mud. Light theme is a
   deliberate second design, not an inversion. */
:root {
  --bg:#0B0D14; --panel:#121523; --panel-2:#171B2C; --line:#262C42;
  --ink:#E8EAF2; --ink-2:#AEB4CC; --mute:#767D99;
  --gold:#C9A84C; --accent:#7FB2E8; --ot:#8E7BD6; --nt:#D69E5A;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg:#F7F5EF; --panel:#FFFFFF; --panel-2:#FBFAF5; --line:#E2DDCD;
  --ink:#1A1D2B; --ink-2:#4A5068; --mute:#7B7F93;
  color-scheme: light;
}
/* ⚠ WITHOUT THIS THE `hidden` ATTRIBUTE DOES NOTHING on any element whose
 * class sets `display`. The browser's own `[hidden]{display:none}` is a
 * user-agent rule, so ANY author rule beats it regardless of specificity —
 * `.panes{display:grid}` and `.trail{display:flex}` quietly overrode it, and
 * the empty passage pane rendered with an em-dash heading before anything was
 * selected. Thirty-seven passing assertions did not catch it; a screenshot
 * did. */
[hidden] { display: none !important }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}
.wrap { width:100%; max-width:1340px; margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px)); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
a { color:var(--accent) }

.top { border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0E111B,var(--bg)) }
.top-in { display:flex; flex-wrap:wrap; gap:16px 28px; align-items:flex-end;
  justify-content:space-between; padding-block:18px 16px }
h1 { margin:0; font:600 27px/1.1 Literata, Georgia, serif; letter-spacing:-.01em }
h1::after { content:""; display:block; width:46px; height:3px; background:var(--gold); margin-top:8px }
.sub { margin:9px 0 0; color:var(--ink-2); font-size:14.5px; max-width:58ch }

.jump { display:flex; gap:8px }
.jump input {
  width:min(280px,54vw); padding:9px 12px; border:1px solid var(--line); border-radius:7px;
  background:var(--panel); color:var(--ink); font:15px 'IBM Plex Sans',sans-serif;
}
.jump input:focus-visible { outline:2px solid var(--accent); outline-offset:1px }
.jump button {
  padding:9px 16px; border:1px solid var(--line); border-radius:7px; cursor:pointer;
  background:var(--panel-2); color:var(--ink); font:500 15px 'IBM Plex Sans',sans-serif;
}
.jump button:hover { border-color:var(--gold); color:var(--gold) }

.vizwrap { margin-top:20px }
.vizhead { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline; justify-content:space-between }
.legend { margin:0; color:var(--mute); font-size:13px }
.controls { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center }
.ctl { display:flex; align-items:center; gap:7px; color:var(--ink-2); font-size:13px; cursor:pointer }
.ctl input[type=range] { width:110px; accent-color:var(--gold) }
.ctl input[type=checkbox] { accent-color:var(--gold) }

/* The plate ground is painted onto the canvas itself (see PAPER in app.js),
   so this only matters for the sliver before the first frame. */
.canvasbox { position:relative; margin-top:10px; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:#FBFAF6; touch-action:manipulation }
.canvasbox canvas { display:block; width:100%; height:auto }
#hot { position:absolute; inset:0; cursor:crosshair }
.hint { position:absolute; left:10px; bottom:8px; pointer-events:none;
  color:#3A3F55; font-size:12.5px; letter-spacing:.03em;
  background:rgba(251,250,246,.86); padding:6px 13px; border-radius:20px; border:1px solid #DDD7C6 }
.ruler { display:flex; margin-top:5px; font-size:9.5px; color:var(--mute); user-select:none;
  overflow:hidden; border-radius:4px }
.ruler span { flex:0 0 auto; text-align:center; padding:3px 0; white-space:nowrap; overflow:hidden;
  border-right:1px solid var(--line) }
.ruler span:last-child { border-right:0 }
.ruler .r-ot { background:color-mix(in srgb, var(--ot) 14%, transparent) }
.ruler .r-nt { background:color-mix(in srgb, var(--nt) 16%, transparent) }

.trail { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:16px; font-size:13px }
.trail button { background:var(--panel); border:1px solid var(--line); color:var(--ink-2);
  padding:4px 10px; border-radius:14px; cursor:pointer; font:13px 'IBM Plex Sans',sans-serif }
.trail button:hover { color:var(--gold); border-color:var(--gold) }
.trail button[aria-current="true"] { background:var(--panel-2); color:var(--ink); border-color:var(--gold) }
.trail .tsep { color:var(--mute) }

.panes { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px; margin:18px 0 10px }
.pane { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 20px }
.paneh { display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:14px }
.paneh h2 { margin:0; font:600 18px/1.25 Literata, Georgia, serif }
.pagers { display:flex; gap:6px }
.pagers button { width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:17px; line-height:1;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2) }
.pagers button:hover:not(:disabled) { color:var(--gold); border-color:var(--gold) }
.pagers button:disabled { opacity:.35; cursor:default }

.verses { max-height:62vh; overflow-y:auto; padding-right:6px }
.v { display:flex; gap:9px; padding:5px 7px; border-radius:6px; cursor:pointer; align-items:flex-start }
.v:hover { background:var(--panel-2) }
.v[aria-selected="true"] { background:color-mix(in srgb, var(--gold) 13%, transparent);
  box-shadow:inset 2px 0 0 var(--gold) }
.vn { flex:0 0 auto; min-width:2.1em; text-align:right; color:var(--gold); font-size:12px;
  font-variant-numeric:tabular-nums; padding-top:4px }
.vt { font:400 16.5px/1.72 Literata, Georgia, serif; color:var(--ink) }
.vc { flex:0 0 auto; margin-left:auto; padding-top:4px; color:var(--mute); font-size:11px;
  font-variant-numeric:tabular-nums }

.note { margin:0 0 12px; color:var(--mute); font-size:13px }
.reflist { max-height:62vh; overflow-y:auto; padding-right:6px }
.grp { margin-bottom:16px }
.grp h3 { margin:0 0 7px; font:600 12px/1.4 'IBM Plex Sans',sans-serif; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mute) }
.ref { width:100%; text-align:left; display:block; background:var(--panel-2); border:1px solid var(--line);
  border-radius:7px; padding:9px 11px; margin-bottom:7px; cursor:pointer; color:inherit }
.ref:hover { border-color:var(--gold) }
.ref .rh { display:flex; justify-content:space-between; gap:10px; align-items:baseline }
.ref .rr { font:600 14px 'IBM Plex Sans',sans-serif; color:var(--accent) }
.ref .rv { color:var(--mute); font-size:11px; font-variant-numeric:tabular-nums }
.ref .rt { margin-top:4px; font:400 14.5px/1.58 Literata, Georgia, serif; color:var(--ink-2) }

/* The explainer is three short paragraphs. At reading width they stack; on a
   wide screen they run as columns ACROSS the box, because a 72-character
   paragraph sitting in the left half of a 1,300px panel reads as a mistake —
   which is what Geoff said it looked like. */
.empty { margin:22px 0 10px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:20px 22px; display:grid; gap:12px 28px; grid-template-columns:1fr }
.empty h2 { margin:0; font:600 18px Literata, Georgia, serif; grid-column:1 / -1 }
.empty p { margin:0; color:var(--ink-2); font-size:15px; min-width:0 }
@media (min-width: 1000px) { .empty { grid-template-columns:repeat(3, minmax(0,1fr)) } }

.foot { display:grid; gap:8px 28px; grid-template-columns:1fr }
@media (min-width: 1000px) { .foot { grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:end } }

.foot { border-top:1px solid var(--line); margin-top:26px; padding-block:18px 30px }
.foot p { margin:0; color:var(--mute); font-size:12.5px; line-height:1.65 }
.foot .by { color:var(--mute) }

@media (max-width: 900px) {
  .panes { grid-template-columns:1fr }
  .verses, .reflist { max-height:none }
  h1 { font-size:23px }
  .jump input { width:100% }
  .jump { width:100% }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#F7F5EF; --panel:#FFFFFF; --panel-2:#FBFAF5; --line:#E2DDCD;
    --ink:#1A1D2B; --ink-2:#4A5068; --mute:#7B7F93;
    color-scheme: light;
  }
}

/* segmented control in the connections pane */
.seg { display:flex; gap:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; margin-bottom:9px }
.segb { flex:1 1 0; min-width:0; padding:7px 9px; cursor:pointer; background:var(--panel-2);
  border:0; border-right:1px solid var(--line); color:var(--ink-2);
  font:500 12.5px 'IBM Plex Sans',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.segb:last-child { border-right:0 }
.segb:hover { color:var(--gold) }
.segb[aria-current="true"] { background:color-mix(in srgb, var(--gold) 15%, transparent); color:var(--ink) }
.subnote { margin:0; color:var(--mute); font-size:12.5px }

/* ── header tools ─────────────────────────────────────────────────── */
.brand { flex:1 1 320px }
.tools { display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex:0 1 auto }
.btns { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.tb { padding:7px 13px; border:1px solid var(--line); border-radius:7px; cursor:pointer;
  background:var(--panel-2); color:var(--ink-2); font:500 13px 'IBM Plex Sans',sans-serif }
.tb:hover { color:var(--gold); border-color:var(--gold) }
.tb.danger:hover { color:#E06A5A; border-color:#E06A5A }
.pill { display:inline-block; min-width:1.5em; padding:0 5px; margin-left:5px; border-radius:9px;
  background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--ink);
  font-size:11px; font-variant-numeric:tabular-nums; text-align:center }
.themeset { display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden }
.th { width:34px; height:33px; border:0; border-right:1px solid var(--line); cursor:pointer;
  background:var(--panel-2); color:var(--ink-2); font-size:14px; line-height:1 }
.th:last-child { border-right:0 }
.th:hover { color:var(--gold) }
.th[aria-current="true"] { background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--ink) }

/* ── drawers ──────────────────────────────────────────────────────── */
.drawer { margin-top:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:16px 18px }
.bookcols { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px }
.bookgrp h3, .chapgrid h3 { margin:0 0 9px; font:600 12px 'IBM Plex Sans',sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:var(--mute) }
.booklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:5px }
.bookb { text-align:left; padding:6px 9px; border:1px solid transparent; border-radius:6px;
  background:var(--panel-2); color:var(--ink-2); cursor:pointer;
  font:400 13px 'IBM Plex Sans',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bookb:hover { color:var(--gold); border-color:var(--gold) }
.chapgrid { margin-top:16px; border-top:1px solid var(--line); padding-top:14px }
.chaps { display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:5px }
.chapb { padding:7px 0; border:1px solid var(--line); border-radius:6px; cursor:pointer;
  background:var(--panel-2); color:var(--ink-2); font:500 13px 'IBM Plex Sans',sans-serif;
  font-variant-numeric:tabular-nums }
.chapb:hover { color:var(--gold); border-color:var(--gold) }

.savedhead { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; justify-content:space-between }
.savedhead h2 { margin:0; font:600 17px Literata, Georgia, serif }
.savedacts { display:flex; gap:7px }
.savedrow { border:1px solid var(--line); border-radius:8px; padding:11px 13px; margin-top:9px;
  background:var(--panel-2) }
.savedref { background:none; border:0; padding:0; cursor:pointer; color:var(--accent);
  font:600 14px 'IBM Plex Sans',sans-serif }
.savedref:hover { text-decoration:underline }
.savedtext { margin:5px 0 0; font:400 14.5px/1.6 Literata, Georgia, serif; color:var(--ink-2) }
.savednote { margin:7px 0 0; padding-left:10px; border-left:2px solid var(--gold);
  font-size:13.5px; color:var(--ink); white-space:pre-wrap }
.exportpre { max-height:260px; overflow:auto; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; padding:12px; font-size:12px; white-space:pre-wrap; color:var(--ink-2) }

/* ── search results ───────────────────────────────────────────────── */
.results { margin-top:18px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:16px 18px }
.resh { display:flex; gap:12px; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:13px }
.resh h2 { margin:0; font:600 16px/1.3 Literata, Georgia, serif }
#resList { max-height:58vh; overflow-y:auto; padding-right:6px }
mark { background:color-mix(in srgb, var(--gold) 38%, transparent); color:inherit; border-radius:2px }

/* ── study bar ────────────────────────────────────────────────────── */
.studybar { margin-top:14px; border-top:1px solid var(--line); padding-top:13px }
.sbh { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  margin-bottom:9px }
.sbh strong { font:600 14px 'IBM Plex Sans',sans-serif; color:var(--ink-2) }
.swatches { display:flex; gap:6px }
.sw { width:24px; height:24px; border-radius:50%; cursor:pointer; border:1px solid var(--line) }
.sw[aria-current="true"] { outline:2px solid var(--ink-2); outline-offset:2px }
.sw-none { background:transparent; position:relative }
.sw-none::after { content:""; position:absolute; inset:5px 2px; border-top:1px solid var(--mute);
  transform:rotate(-45deg) }
.sw-gold  { background:#D8B45A; border-color:#D8B45A }
.sw-blue  { background:#78A8DC; border-color:#78A8DC }
.sw-green { background:#7FC08C; border-color:#7FC08C }
.sw-rose  { background:#DE8C9A; border-color:#DE8C9A }
#noteBox { width:100%; resize:vertical; padding:9px 11px; border:1px solid var(--line);
  border-radius:7px; background:var(--panel-2); color:var(--ink);
  font:400 14.5px/1.6 Literata, Georgia, serif }
#noteBox:focus-visible { outline:2px solid var(--gold); outline-offset:1px }

/* Highlights read on both grounds: a translucent wash over whatever the
   surface is, never a fixed pastel that disappears on one of them. */
.v[data-hl], .savedrow[data-hl] { box-shadow:inset 3px 0 0 currentColor }
.v[data-hl="gold"],  .savedrow[data-hl="gold"]  { background:color-mix(in srgb,#D8B45A 20%,transparent); color:#D8B45A }
.v[data-hl="blue"],  .savedrow[data-hl="blue"]  { background:color-mix(in srgb,#78A8DC 20%,transparent); color:#78A8DC }
.v[data-hl="green"], .savedrow[data-hl="green"] { background:color-mix(in srgb,#7FC08C 20%,transparent); color:#7FC08C }
.v[data-hl="rose"],  .savedrow[data-hl="rose"]  { background:color-mix(in srgb,#DE8C9A 20%,transparent); color:#DE8C9A }
.v[data-hl] .vt, .savedrow[data-hl] .savedtext { color:var(--ink) }
.v[data-note] .vn::after { content:"•"; margin-left:3px; color:var(--gold) }

@media (max-width: 760px) {
  .top-in { flex-direction:column; align-items:stretch }
  .tools { align-items:stretch }
  .btns { justify-content:space-between }
}

/* ── translation control + parallel reading ───────────────────────── */
.txset { display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden }
.tx { padding:7px 11px; border:0; border-right:1px solid var(--line); cursor:pointer;
  background:var(--panel-2); color:var(--ink-2);
  font:500 12px 'IBM Plex Sans',sans-serif; letter-spacing:.03em }
.tx:last-child { border-right:0 }
.tx:hover { color:var(--gold) }
.tx[aria-current="true"], .th[aria-current="true"], .segb[aria-current="true"] {
  background:var(--panel); color:var(--ink); font-weight:600; box-shadow:inset 0 -3px 0 var(--gold) }
.tx[aria-current="true"] { background:color-mix(in srgb, var(--gold) 18%, var(--panel)) }

.readcols { display:grid; gap:18px }
.readcols.two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.readcol { min-width:0 }
.colhead { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line) }
.colhead strong { font:600 14px 'IBM Plex Sans',sans-serif; color:var(--ink-2) }
.colacts { display:flex; gap:6px }
.colacts .tb { padding:4px 9px; font-size:11.5px }
.vbody { flex:1 1 auto; min-width:0 }
.vpar + .vpar { margin-top:5px; padding-top:5px; border-top:1px dotted var(--line) }
.txlab { display:block; font:600 9.5px 'IBM Plex Sans',sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); margin-bottom:1px }
.pin { margin-left:auto; padding:2px 8px; border:1px solid var(--line); border-radius:11px;
  background:transparent; color:var(--mute); cursor:pointer;
  font:500 10.5px 'IBM Plex Sans',sans-serif; letter-spacing:.05em }
.pin:hover { color:var(--gold); border-color:var(--gold) }

@media (max-width: 1050px) { .readcols.two { grid-template-columns:1fr } }

/* ── original-language words ──────────────────────────────────────── */
#wordsBtn { margin:0 0 10px }
#wordsBtn[aria-pressed="true"] { color:var(--gold); border-color:var(--gold) }
.wordsbox { margin-bottom:12px }
.wlist { display:flex; flex-wrap:wrap; gap:8px }
.wlist.heb { flex-direction:row-reverse; justify-content:flex-end }
.w { flex:0 1 auto; min-width:0; max-width:100%; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; background:var(--panel-2) }
.w-na { opacity:.55; border-style:dashed }
.worig { font:600 20px/1.3 'Noto Serif', Literata, Georgia, serif; color:var(--ink) }
.worig[lang="he"] { font-family:'Noto Serif Hebrew', 'SBL Hebrew', 'Times New Roman', serif; font-size:22px }
.wtr { font:400 11px 'IBM Plex Sans',sans-serif; color:var(--mute); margin-top:1px }
.wgl { font:400 13.5px/1.4 Literata, Georgia, serif; color:var(--ink-2); margin-top:4px }
.wmeta { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:6px }
.strong { display:inline-block; padding:1px 7px; border-radius:9px; cursor:help;
  background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);
  font:600 10.5px 'IBM Plex Sans',sans-serif; letter-spacing:.04em; font-variant-numeric:tabular-nums }
.wlem { font:400 11.5px 'IBM Plex Sans',sans-serif; color:var(--mute); min-width:0; overflow:hidden; text-overflow:ellipsis }
.shared { display:inline-block; padding:1px 7px; border-radius:9px; cursor:help; margin-left:6px;
  background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--ink);
  font:600 10.5px 'IBM Plex Sans',sans-serif; letter-spacing:.03em; white-space:nowrap }

/* ── notes as a file, and the sync phrase ─────────────────────────── */
.filelab { display:inline-block; cursor:pointer }
.syncbox { margin:12px 0 4px; border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:var(--panel-2) }
.phrase { display:block; margin:8px 0 10px; padding:9px 12px; border:1px dashed var(--gold); border-radius:7px;
  background:var(--panel); color:var(--ink); font:600 16px/1.5 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing:.02em; user-select:all; word-break:break-word }
.joinform { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.joinform input { flex:1 1 260px; min-width:0; padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  background:var(--panel); color:var(--ink); font:14px 'IBM Plex Sans',sans-serif }
.foot .why { grid-column:1 / -1; padding-top:4px; border-top:1px dashed var(--line); margin-top:4px }

/* ── word study ───────────────────────────────────────────────────── */
.strong { border:0; font-family:'IBM Plex Sans',sans-serif }
button.strong { cursor:pointer } button.strong:hover { filter:brightness(1.15) }
.lexbox { margin:4px 0 14px; border:1px solid var(--gold); border-radius:9px; padding:14px 16px; background:var(--panel-2) }
.lexhead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.lextitle { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px }
.lexorig { font:600 26px/1.2 'Noto Serif', Literata, Georgia, serif; color:var(--ink) }
.lexorig[lang="he"] { font-family:'Noto Serif Hebrew','SBL Hebrew','Times New Roman',serif; font-size:28px }
.lextr { font:400 14px 'IBM Plex Sans',sans-serif; color:var(--mute) }
.lexpos { font:500 11px 'IBM Plex Sans',sans-serif; color:var(--mute); letter-spacing:.06em }
.lexgl { margin:8px 0 6px; font:600 16px Literata, Georgia, serif; color:var(--ink) }
.lexdef { max-height:220px; overflow-y:auto; padding-right:6px; border-left:2px solid var(--line); padding-left:12px }
.lexdef p { margin:0 0 4px; font:400 13.5px/1.55 Literata, Georgia, serif; color:var(--ink-2) }
.lexsum { margin:12px 0 6px; font-size:14px; color:var(--ink-2) }
.bookchips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px }
.bchip { padding:2px 8px; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--ink-2);
  cursor:pointer; font:500 11px 'IBM Plex Sans',sans-serif }
.bchip:hover { border-color:var(--gold); color:var(--gold) }
.bchip[aria-current="true"] { background:color-mix(in srgb, var(--gold) 20%, var(--panel)); color:var(--ink); border-color:var(--gold) }
.occlist { max-height:300px; overflow-y:auto; padding-right:6px }
.occ { display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:7px;
  padding:7px 10px; margin-bottom:6px; cursor:pointer; color:var(--accent); font:600 13px 'IBM Plex Sans',sans-serif }
.occ:hover { border-color:var(--gold) }
.occt { display:block; margin-top:2px; font:400 13.5px/1.5 Literata, Georgia, serif; color:var(--ink-2) }

/* ── topics, dictionary, places ───────────────────────────────────── */
#topicForm { margin-bottom:10px } #topicForm input { width:min(420px,100%) }
.topiclist { display:flex; flex-wrap:wrap; gap:6px }
.topicb { display:inline-flex; gap:7px; align-items:baseline; padding:5px 10px; border:1px solid var(--line); border-radius:14px;
  background:var(--panel-2); color:var(--ink); cursor:pointer; font:500 13px 'IBM Plex Sans',sans-serif }
.topicb:hover { border-color:var(--gold); color:var(--gold) }
.tcount { color:var(--mute); font-size:11px }
.topicname { margin:0; font:600 19px Literata, Georgia, serif; color:var(--ink) }
.linkish { background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font:inherit; text-decoration:underline }
.entries { margin-top:10px; max-height:52vh; overflow-y:auto; padding-right:6px }
.entry { padding:8px 0; border-bottom:1px solid var(--line) }
.etext { margin:0 0 6px; font:400 14.5px/1.6 Literata, Georgia, serif; color:var(--ink-2) }
.erefs { display:flex; flex-wrap:wrap; gap:5px }
.eref { padding:2px 8px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--accent);
  cursor:pointer; font:600 11.5px 'IBM Plex Sans',sans-serif }
.eref:hover { border-color:var(--gold) }
.ctxbox { margin:0 0 10px }
.ctxgrp { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-bottom:6px }
.ctxlab { font:600 10.5px 'IBM Plex Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-right:4px }
.ctxchip { padding:2px 9px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); color:var(--ink-2);
  cursor:pointer; font:500 12px 'IBM Plex Sans',sans-serif }
.ctxchip:hover { border-color:var(--gold); color:var(--gold) }
.ctxplace { border-style:dashed }
.map { width:100%; height:auto; display:block; margin:10px 0 6px; border:1px solid var(--line); border-radius:8px }
.mapbg { fill:var(--panel) } .grid { stroke:var(--line); stroke-width:.6 }
.pt { fill:var(--mute); opacity:.55 } .anchor { fill:var(--ink-2) } .focus { fill:none; stroke:var(--gold); stroke-width:2.5 }
.lbl { font:600 11px 'IBM Plex Sans',sans-serif; fill:var(--ink-2) } .focuslbl { fill:var(--gold); font-size:13px }

/* ── print: the passage, nothing else ─────────────────────────────── */
.pagers .tb { height:30px; padding:0 10px; font-size:12px }
@media print {
  :root { --bg:#fff; --panel:#fff; --panel-2:#fff; --line:#bbb; --ink:#000; --ink-2:#222; --mute:#555; --gold:#000; --accent:#000 }
  body { background:#fff; color:#000; font-size:12pt }
  .top .tools, .vizwrap, .trail, .drawer, .results, .links, .pagers, .studybar .swatches, #copyBtn, #wordsBtn, .foot .why, .foot .by { display:none !important }
  .panes { display:block } .pane { border:0; padding:0 }
  .paneh h2 { font-size:20pt }
  .v { break-inside:avoid; padding:2px 0 } .vt { font-size:12pt; line-height:1.5 }
  .vc { display:none }
  #noteBox { border:1px solid #bbb } #noteBox:placeholder-shown { display:none }
  .wordsbox, .lexbox, .ctxbox { display:none }
  .foot { font-size:9pt; border-top:1px solid #bbb }
}

/* ── resources ────────────────────────────────────────────────────── */
.resgrid { display:grid; gap:14px 26px; grid-template-columns:1fr; margin-top:6px }
@media (min-width: 900px) { .resgrid { grid-template-columns:repeat(2, minmax(0,1fr)) } }
.resgrp h3, .resh3 { margin:0 0 6px; font:600 12px 'IBM Plex Sans',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--mute) }
.resh3 { margin-top:18px; padding-top:14px; border-top:1px solid var(--line) }
.reslist { margin:0; padding-left:18px }
.reslist li { margin:0 0 7px; font-size:14px; line-height:1.55; color:var(--ink-2) }
.reslist a { color:var(--accent) }
.resout li { margin-bottom:11px }
.whynot { display:block; margin-top:3px; padding-left:10px; border-left:2px solid var(--gold); color:var(--ink-2); font-size:13.5px }

/* ── sermon builder ───────────────────────────────────────────────── */
#sermonForm { margin-bottom:12px } #sermonForm input { width:min(460px,100%) }
.sermongrid { display:grid; gap:18px; grid-template-columns:1fr }
@media (min-width: 1000px) { .sermongrid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.sermonres { max-height:70vh; overflow-y:auto; padding-right:6px }
.orow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:5px }
.otext, .otext2 { flex:1 1 100%; margin:0 0 4px 2px; font-size:13px }
.sermonsel, .sermontitle { width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2);
  color:var(--ink); font:14px 'IBM Plex Sans',sans-serif; margin-bottom:8px }
.sermontitle { font:600 17px Literata, Georgia, serif }
.outline .osec { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; background:var(--panel-2) }
.osec h3 { margin:0 0 6px; font:600 11px 'IBM Plex Sans',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--gold) }
.osec textarea { width:100%; resize:vertical; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--panel);
  color:var(--ink); font:400 14px/1.55 Literata, Georgia, serif; margin-top:6px }
.addmenu { display:flex; flex-wrap:wrap; gap:4px; flex-basis:100%; padding:6px; border:1px dashed var(--gold); border-radius:7px }
.addmenu .tb { padding:4px 9px; font-size:11.5px }
@media print {
  body.print-sermon .panes, body.print-sermon .top, body.print-sermon .empty { display:none !important }
  body.print-sermon #sermon { display:block !important; border:0 }
  body.print-sermon #sermonForm, body.print-sermon .sermonres, body.print-sermon .sermonsel, body.print-sermon .savedacts, body.print-sermon .pin, body.print-sermon .note { display:none !important }
  body.print-sermon .sermongrid { display:block }
  body.print-sermon .osec { break-inside:avoid; border:0; padding:0 0 10px }
  body.print-sermon .osec textarea { border:0; padding:0; font-size:12pt }
}

/* ── prayer book ──────────────────────────────────────────────────── */
.daylist { margin-top:10px }
.day { border:1px solid var(--line); border-radius:8px; background:var(--panel-2); margin-bottom:7px; padding:0 14px }
.day summary { cursor:pointer; padding:10px 0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline }
.daytitle { font:600 15px Literata, Georgia, serif; color:var(--ink) }
.daycites { font:400 12px 'IBM Plex Sans',sans-serif; color:var(--mute) }
.day h4 { margin:8px 0 4px; font:600 11px 'IBM Plex Sans',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--gold);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.collect, .reading { margin:0 0 10px; font:400 14.5px/1.65 Literata, Georgia, serif; color:var(--ink-2) }
.collect { font-style:italic; color:var(--ink) }
.canticles { margin-top:18px }
.cant { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px }
.cantnote { flex-basis:100%; color:var(--mute); font-size:12.5px }
.ctxchip.torrey { border-color:color-mix(in srgb, var(--accent) 50%, var(--line)) }