/* Bible Study Guide — design system
   Warm paper in light, deep slate in dark. Scripture gets a real serif and a
   measured column; the UI stays quiet so the text is the loudest thing here. */

:root {
  --paper:        #faf7f2;
  --paper-raised: #ffffff;
  --paper-sunk:   #f2ede4;
  --ink:          #1c1917;
  --ink-soft:     #57534e;
  --ink-faint:    #8a8279;
  --rule:         #e5ded2;
  --rule-strong:  #d6cdbd;
  --accent:       #9a6b28;
  --accent-soft:  #f0e3cd;
  --accent-ink:   #7a5320;
  --focus:        #2563eb;

  --hl-amber:  #fde9a9;  --hl-amber-ink:  #6b4e08;
  --hl-rose:   #fbd5d5;  --hl-rose-ink:   #7a2222;
  --hl-mint:   #cdeccd;  --hl-mint-ink:   #1f5130;
  --hl-sky:    #cfe3f7;  --hl-sky-ink:    #17456f;
  --hl-lilac:  #e2d7f5;  --hl-lilac-ink:  #4b2f77;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Charter", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.05);
  --shadow-md: 0 4px 12px rgba(28,25,23,.09), 0 2px 4px rgba(28,25,23,.05);
  --shadow-lg: 0 18px 48px rgba(28,25,23,.18), 0 4px 12px rgba(28,25,23,.08);
  --radius: 12px;
  --radius-sm: 8px;

  --read-size: 19px;
  --read-leading: 1.75;
  --read-width: 40rem;
  --sidebar: 250px;
}

html[data-theme="dark"] {
  --paper:        #16161a;
  --paper-raised: #1e1e24;
  --paper-sunk:   #101013;
  --ink:          #ece8e1;
  --ink-soft:     #a8a29a;
  --ink-faint:    #77716a;
  --rule:         #2c2c34;
  --rule-strong:  #3b3b45;
  --accent:       #d6a45c;
  --accent-soft:  #33291a;
  --accent-ink:   #e8bd7c;
  --focus:        #60a5fa;

  --hl-amber:  #6b5518; --hl-amber-ink:  #fde9a9;
  --hl-rose:   #6b2626; --hl-rose-ink:   #fbd5d5;
  --hl-mint:   #234f31; --hl-mint-ink:   #cdeccd;
  --hl-sky:    #1d4468; --hl-sky-ink:    #cfe3f7;
  --hl-lilac:  #43305f; --hl-lilac-ink:  #e2d7f5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- app frame ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: 100vh;
  height: 100vh;
}

.sidebar {
  background: var(--paper-sunk);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  min-height: 0;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px;
}
.brand-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: 8px; background: var(--accent);
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-weight: 640; letter-spacing: -.01em; font-size: 14.5px; }
.brand-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: -2px; }

.nav { padding: 4px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.nav-group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-faint); font-weight: 620; padding: 14px 10px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-soft);
  cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 520;
}
.nav-item:hover { background: var(--rule); color: var(--ink); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-item svg { flex: none; opacity: .85; }
.nav-item .count {
  margin-left: auto; font-size: 11px; color: var(--ink-faint);
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 999px; padding: 0 6px; min-width: 20px; text-align: center;
}
.sidebar-foot { padding: 10px; border-top: 1px solid var(--rule); display: flex; gap: 6px; }

/* ---------- main ---------- */

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0; z-index: 20; flex: none;
}
.crumb { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumb-btn {
  border: 1px solid var(--rule); background: var(--paper-raised);
  border-radius: var(--radius-sm); padding: 5px 11px; cursor: pointer;
  font-weight: 600; font-size: 13.5px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.crumb-btn:hover { border-color: var(--rule-strong); }
.spacer { flex: 1; }

.icon-btn {
  border: 1px solid transparent; background: transparent; color: var(--ink-soft);
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--rule); color: var(--ink); }
.icon-btn.is-on { background: var(--accent-soft); color: var(--accent-ink); }

.seg { display: inline-flex; background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.seg button.is-on { background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-sm); }

.view { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; }
.view-pad { padding: 28px 24px 40vh; }
.reader-col { max-width: var(--read-width); margin: 0 auto; }
.wide-col { max-width: 60rem; margin: 0 auto; }

/* ---------- scripture ---------- */

.chapter-head { text-align: center; margin: 8px 0 26px; }
.chapter-book { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
.chapter-num { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }

.scripture { font-family: var(--serif); font-size: var(--read-size); line-height: var(--read-leading); color: var(--ink); }
.scripture.is-sans { font-family: var(--sans); }

.v {
  display: block; padding: 3px 8px; margin: 0 -8px 1px;
  border-radius: 7px; cursor: pointer; position: relative;
  transition: background .12s ease, box-shadow .4s ease;
}
.scripture.is-flow .v { display: inline; padding: 1px 2px; margin: 0; border-radius: 4px; }
.scripture.is-flow .v + .v::before { content: " "; }
.v:hover { background: var(--paper-sunk); }
.v.is-selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.vnum {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  color: var(--ink-faint); vertical-align: super; margin-right: 5px;
  user-select: none; letter-spacing: .02em;
}
.v.is-hl-amber { background: var(--hl-amber); }
.v.is-hl-rose  { background: var(--hl-rose); }
.v.is-hl-mint  { background: var(--hl-mint); }
.v.is-hl-sky   { background: var(--hl-sky); }
.v.is-hl-lilac { background: var(--hl-lilac); }
.v-marks { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.v-mark {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 4px; background: var(--accent); color: #fff;
  vertical-align: middle; user-select: none;
}
.v-mark.is-note { background: var(--accent); }
.v-mark.is-star { background: transparent; color: var(--accent); font-size: 12px; padding: 0; }
.v-missing { color: var(--ink-faint); font-style: italic; font-size: .88em; }

/* parallel compare */
.parallel { display: grid; gap: 0 22px; align-items: start; }
.parallel-head {
  position: sticky; top: 0; background: var(--paper); z-index: 5;
  padding: 6px 0 8px; border-bottom: 1px solid var(--rule); margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.parallel-row { display: contents; }
.parallel .v { font-size: 16.5px; }

/* ---------- panel (right rail) ---------- */

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--paper-raised); border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-lg); z-index: 60;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.panel.is-open { transform: none; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--rule); flex: none; }
.panel-title { font-weight: 660; font-size: 14px; }
.panel-body { flex: 1; overflow-y: auto; padding: 16px; }
.panel-foot { padding: 12px 16px; border-top: 1px solid var(--rule); flex: none; }

.quoted {
  font-family: var(--serif); font-size: 16px; line-height: 1.6;
  background: var(--paper-sunk); border-left: 3px solid var(--accent);
  padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 14px; color: var(--ink);
}

.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; box-shadow: var(--shadow-sm);
}
.swatch.is-on { border-color: var(--ink); }
.swatch[data-c="amber"] { background: var(--hl-amber); }
.swatch[data-c="rose"]  { background: var(--hl-rose); }
.swatch[data-c="mint"]  { background: var(--hl-mint); }
.swatch[data-c="sky"]   { background: var(--hl-sky); }
.swatch[data-c="lilac"] { background: var(--hl-lilac); }
.swatch[data-c="none"]  { background: var(--paper-sunk); border: 1px dashed var(--rule-strong); }

/* ---------- forms & buttons ---------- */

.field { width: 100%; padding: 9px 11px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
         background: var(--paper); color: var(--ink); }
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field { resize: vertical; min-height: 120px; line-height: 1.6; font-family: var(--sans); }
.label { display: block; font-size: 11.5px; font-weight: 640; text-transform: uppercase; letter-spacing: .06em;
         color: var(--ink-faint); margin: 14px 0 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong);
  background: var(--paper-raised); color: var(--ink); font-weight: 600; font-size: 13.5px;
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.btn:hover { border-color: var(--ink-faint); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--rule); color: var(--ink); }
.btn-danger { color: #b91c1c; border-color: #f3c5c5; background: transparent; box-shadow: none; }
html[data-theme="dark"] .btn-danger { color: #fca5a5; border-color: #5b2020; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 620; padding: 3px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.tag-plain { background: var(--paper-sunk); color: var(--ink-soft); border: 1px solid var(--rule); }

/* ---------- cards & lists ---------- */

.page-title { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 4px; }
.page-sub { color: var(--ink-soft); margin: 0 0 22px; font-size: 14px; max-width: 46rem; }
.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
                 color: var(--ink-faint); margin: 26px 0 10px; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.card {
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px; cursor: pointer; text-align: left;
  box-shadow: var(--shadow-sm); display: block; width: 100%; color: inherit;
}
.card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-title { font-weight: 650; font-size: 14.5px; margin-bottom: 3px; }
.card-meta { font-size: 12px; color: var(--ink-faint); }
.card-body { font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.55; }

.list-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised);
  margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.list-row:hover { border-color: var(--rule-strong); }
.list-row .ref { font-weight: 700; font-size: 13px; color: var(--accent-ink); white-space: nowrap; }

.empty { text-align: center; padding: 56px 20px; color: var(--ink-faint); }
.empty-icon { font-size: 34px; margin-bottom: 10px; opacity: .55; }

.book-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.book-btn {
  border: 1px solid var(--rule); background: var(--paper-raised); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer; text-align: left; font-size: 13px; font-weight: 560;
}
.book-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.chap-grid { display: grid; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.chap-btn {
  border: 1px solid var(--rule); background: var(--paper-raised); border-radius: 7px;
  padding: 9px 0; text-align: center; cursor: pointer; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chap-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.chap-btn.is-read { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }

/* ---------- modal / palette ---------- */

.scrim { position: fixed; inset: 0; background: rgba(20,17,14,.45); z-index: 80; backdrop-filter: blur(2px); }
.modal {
  position: fixed; z-index: 90; left: 50%; top: 8vh; transform: translateX(-50%);
  width: min(680px, 94vw); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal-head { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--rule); display: flex; gap: 8px; justify-content: flex-end; }
.palette-input { width: 100%; border: 0; background: transparent; font-size: 17px; padding: 4px 0; outline: none; }
.palette-list { max-height: 56vh; overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px;
}
.palette-item.is-on { background: var(--accent-soft); color: var(--accent-ink); }
.palette-item .hint { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); }
.kbd {
  font-family: var(--mono); font-size: 11px; border: 1px solid var(--rule-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: var(--paper-sunk); color: var(--ink-soft);
}

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(140%);
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 560; box-shadow: var(--shadow-lg); z-index: 120;
  transition: transform .26s cubic-bezier(.32,.72,0,1); pointer-events: none; max-width: 90vw;
}
.toast.is-on { transform: translateX(-50%) translateY(0); }

/* ---------- misc ---------- */

.progress { height: 6px; background: var(--paper-sunk); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.stat-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stat { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 13px; }
.stat-n { font-size: 25px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 620; }

mark.hit { background: var(--hl-amber); color: var(--hl-amber-ink); border-radius: 3px; padding: 0 2px; }

.note-body { white-space: pre-wrap; font-size: 14px; line-height: 1.65; color: var(--ink); }
.note-body strong { font-weight: 680; }
.note-body em { font-style: italic; }

.memorize-word { border-radius: 4px; padding: 0 2px; }
.memorize-word.is-hidden { background: var(--ink-faint); color: transparent; user-select: none; opacity: .35; }

.spinner {
  width: 22px; height: 22px; border: 2.5px solid var(--rule-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- responsive ---------- */

.mobile-only { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 70;
    transform: translateX(-100%); transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: none; }
  .mobile-only { display: inline-grid; }
  .view-pad { padding: 20px 16px 40vh; }
  .parallel { grid-template-columns: 1fr !important; gap: 20px; }
}

@media print {
  .sidebar, .topbar, .panel, .toast { display: none !important; }
  .app { display: block; height: auto; }
  .view { overflow: visible; }
  body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- audio narration player ---------------- */
.audio-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -6px 24px rgba(0,0,0,.10)}
.audio-bar.is-open{display:flex}
.audio-bar audio{flex:1;min-width:0;height:36px}
.audio-title{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
@media (max-width:640px){.audio-title{display:none}}
body.has-audio .panel-body{padding-bottom:76px}
body.has-audio .sidebar{padding-bottom:60px}

/* follow-along narration highlight */
.v.is-narrating{background:rgba(154,107,40,.16);box-shadow:-4px 0 0 0 rgba(154,107,40,.55);border-radius:3px;animation:narr-breathe 2.4s ease-in-out infinite}
[data-theme="dark"] .v.is-narrating{background:rgba(224,180,110,.16);box-shadow:-4px 0 0 0 rgba(224,180,110,.5)}
@keyframes narr-breathe{0%,100%{background-color:rgba(154,107,40,.10)}50%{background-color:rgba(154,107,40,.22)}}
[data-theme="dark"] .v.is-narrating{animation-name:narr-breathe-dark}
@keyframes narr-breathe-dark{0%,100%{background-color:rgba(224,180,110,.10)}50%{background-color:rgba(224,180,110,.22)}}
@media (prefers-reduced-motion:reduce){.v.is-narrating{animation:none}.view{scroll-behavior:auto}}

/* ---------- narration player ---------- */
.audiobar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%);
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: 8px 12px 8px 18px;
  box-shadow: var(--shadow-lg); z-index: 55; max-width: min(620px, 94vw);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.audiobar.is-on { transform: translateX(-50%) translateY(0); }
.audiobar-title { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; max-width: 180px; }
.audiobar audio { height: 36px; max-width: 320px; }
.audiobar .is-loading { font-size: 12px; color: var(--ink-faint); }
@media (max-width: 860px) { .audiobar { bottom: 12px; padding-left: 14px; } .audiobar-title { max-width: 90px; } }

/* --- drag & drop reordering (saved verses + notes) ------------------- */
.drag-handle { cursor: grab; color: var(--ink-faint); font-size: 15px; line-height: 1;
               user-select: none; -webkit-user-select: none; padding: 2px 4px; }
.drag-handle:hover { color: var(--accent); }
.drag-handle:active { cursor: grabbing; }
.drag-ghost { opacity: .45; }
.drop-above { box-shadow: 0 -3px 0 0 var(--accent) !important; }
.drop-below { box-shadow: 0 3px 0 0 var(--accent) !important; }
.drop-into  { outline: 2px dashed var(--accent); outline-offset: 2px; }
.drop-strip { border: 2px dashed var(--rule-strong); border-radius: 12px; padding: 13px;
              text-align: center; color: var(--ink-faint); font-size: 12.5px; margin-top: 14px; }
.drop-strip.drop-into { color: var(--accent); border-color: var(--accent); outline: none; }
@media (pointer: coarse) { .drag-handle { padding: 9px 10px; font-size: 18px; } }

/* ---------------- phone browser: navigation + layout -----------------------
   Audited live at 375x812 (2026-08-31). Fixes, in order of how badly they bit:
   1. the reader toolbar (translations + icon buttons) overflowed the viewport,
      pushing the compare/sort/listen icons off-screen with no way to reach
      them and knocking the fixed panel off the edge with it;
   2. iOS Safari zooms the whole page whenever a focused input is under 16px;
   3. tap targets were desktop-sized (27-34px) — too small to hit reliably;
   4. the slide-in menu had no way to dismiss it except choosing something. */

@media (max-width: 860px) {
  /* nothing may push the page wider than the screen — a fixed-position panel
     is positioned against that overflow and slides off the edge with it */
  .app { overflow-x: hidden; }
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; }
  .topbar .seg button { padding-left: 9px; padding-right: 9px; }
  .topbar .icon-btn { width: 36px; height: 36px; }

  /* room for the notch and the home indicator, portrait and landscape */
  .topbar {
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .view-pad {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  .panel { padding-bottom: env(safe-area-inset-bottom); }
  .panel-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* the menu is a real overlay now: tap anywhere off it to dismiss */
  .sidebar-scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(20,17,14,.38); backdrop-filter: blur(1px);
  }
}

/* Only genuinely narrow screens need the translation switcher on its own row.
   A phone in landscape has width to spare, and stealing a second row there
   costs a quarter of the visible scripture. */
@media (max-width: 620px) {
  .topbar > .crumb:last-of-type {
    order: 2; width: 100%; flex-wrap: nowrap; gap: 4px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* five translations plus the view buttons fit no phone, so the row scrolls;
       the fade is what says "swipe" instead of a control looking cut in half */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .topbar > .crumb:last-of-type::-webkit-scrollbar { display: none; }
  .topbar > .crumb:last-of-type > * { flex: none; }
}

/* Touch devices: 16px inputs (below that iOS zooms on focus and the layout
   jumps), and finger-sized controls. */
@media (pointer: coarse) {
  .field, input.field, textarea.field, select.field { font-size: 16px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; font-size: 13px; padding: 7px 12px; }
  .seg button { min-height: 34px; padding: 7px 12px; font-size: 13px; }
  .nav-item { min-height: 42px; font-size: 15px; }
  .icon-btn { width: 40px; height: 40px; }
  .crumb-btn { min-height: 36px; }
  .swatch { width: 36px; height: 36px; }   /* highlight colours, picked with a fingertip */
  /* the search-history "remove" buttons are sized inline (26px, deliberate on
     desktop) — !important is what it takes to reach a fingertip size here */
  .list-row .icon-btn { width: 34px !important; height: 34px !important; }
  .v { padding: 5px 8px; }            /* easier to tap a single verse */
  .tag, .tag-plain { font-size: 12px; }
}

/* The narration bar sits above the sidebar scrim (both were z-index 80, and
   the later-painted scrim swallowed taps on the player). */
.audio-bar { z-index: 90; }
/* A chapter can take a minute to render. On phones .audio-title is hidden, so
   without this the bar looks like a dead 0:00 player for the whole wait. */
.audio-bar.is-preparing .audio-title { display: block; }
.audio-bar.is-preparing::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--rule-strong); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}

/* "Select through…" mode — the touch replacement for shift-click. */
.extend-tip {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 95;
  display: flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff;
  padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow-lg);
  font-size: 13.5px; font-weight: 600; max-width: calc(100vw - 24px);
}
.extend-tip .btn { color: #fff; border-color: rgba(255,255,255,.5); }
body.is-extending .v { background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--rule-strong); }
body.is-extending .v.is-selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
/* a phone has no shift key — don't tell people to use one */
@media (pointer: coarse) { .shift-hint { display: none; } }
/* a refused autoplay must stay readable on a phone, where .audio-title hides */
.audio-bar.is-ready .audio-title { display: block; color: var(--accent-ink); }

/* The verse panel was 1,766px tall on a phone: the explanation card alone ran
   645px, burying "Save to" at 1,187px and "Save note" at 1,710px, so neither
   could realistically be reached. */
.explain-fold { margin-bottom: 14px; }
.explain-fold > summary {
  cursor: pointer; list-style: none; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
  padding: 7px 0; display: flex; align-items: center; gap: 6px;
}
.explain-fold > summary::-webkit-details-marker { display: none; }
.explain-fold > summary::after { content: "▾"; font-size: 11px; transition: transform .15s ease; }
.explain-fold[open] > summary::after { transform: rotate(180deg); }
.explain-fold > summary:hover { color: var(--ink-soft); }
/* Save note follows you down the panel instead of sitting 1,700px away. */
.panel-actions {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--paper-raised); border-top: 1px solid var(--rule);
  padding: 10px 0 calc(6px + env(safe-area-inset-bottom));
  margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
}

/* Verse numbers inside a saved passage or the panel quote. .vnum already
   styles the reader's numbers; these sit in serif body text, so give them a
   little breathing room on the left when they follow a previous verse. */
.quoted .vnum, .list-row .vnum { margin-left: 2px; }
.quoted .vnum:first-child, .list-row .vnum:first-child { margin-left: 0; }

/* "A newer version is ready" — a tab left open runs the code it loaded, which
   looks exactly like a fix that did not work. */
.update-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 96;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow-lg);
  font-size: 13.5px; font-weight: 600; max-width: calc(100vw - 24px);
}
.update-bar .btn { color: var(--paper); border-color: rgba(255,255,255,.45); background: transparent; }
.update-bar .btn:hover { background: rgba(255,255,255,.12); }

/* A note written about a whole bundle (the group of passages), distinct from
   the per-verse notes. */
.bundle-note {
  margin-top: 10px; padding: 11px 13px;
  background: var(--paper-sunk); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.bundle-note-body { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; color: var(--ink); }

/* Saved-verse actions on a phone. Desktop keeps the inline toolbar exactly as
   it was (display:contents); narrow screens get a "⋯" that reveals it, because
   seven inline buttons cost three stacked rows per verse. */
.more-toggle { display: none; }
.entry-more { display: contents; }
@media (max-width: 860px) {
  .more-toggle { display: inline-flex; align-items: center; justify-content: center;
                 min-width: 40px; font-size: 17px; line-height: 1; }
  .entry-more { display: none; }
  .list-row.is-open > div > .entry-more {
    display: flex; flex-wrap: wrap; gap: 6px;
    width: 100%; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--rule);
  }
}

/* ---- passage controls -------------------------------------------------
   "+ add verse", "− remove last" and "Select through…" are the only way to
   build a multi-verse note on a phone, so on a touch screen they get a real
   44px target instead of the 36px a mouse is happy with. */
@media (pointer: coarse) {
  .passage-controls .btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
}
.passage-controls { border-left: 2px solid var(--accent-soft); padding-left: 10px; }

/* ---- notes to self -----------------------------------------------------
   A note with no verse behind it. The chip has to read differently from a
   scripture reference at a glance, or the Notes page looks like it has a
   broken reference on it. */
.list-row .ref.is-self {
  font-weight: 660;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
}
.self-note-composer { border: 1px dashed var(--rule-strong); background: transparent; }

/* ---- "Select through…" bar vs the audio player -------------------------
   The tip is pinned 18px off the bottom and the narration bar owns the
   bottom 61px, so with audio open the two overlapped by ~43px on a phone —
   the Cancel button sat on top of the transport. Lift the tip clear of the
   bar, and on a narrow screen let it span the width instead of wrapping its
   one sentence onto three lines. */
body.has-audio .extend-tip {
  bottom: calc(18px + 61px + env(safe-area-inset-bottom));
}
@media (max-width: 860px) {
  .extend-tip {
    left: 12px; right: 12px; transform: none;
    max-width: none; justify-content: space-between;
    border-radius: 14px;
  }
  .extend-tip .btn { min-height: 40px; flex: none; }
}

/* ---- notes written on a saved verse ------------------------------------
   The note belongs where the verse is saved, so the collection entry carries
   its own editor and its own notes. Nested rows are flattened so a note does
   not read as a second saved verse. */
.entry-notes .list-row {
  box-shadow: none;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  margin: 8px 0 0;
}
.entry-note-editor {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  background: var(--paper-sunk);
}
.btn-has-notes { color: var(--accent-ink); font-weight: 650; }
/* On a phone the right-aligning spacer pushes the entry buttons onto a second
   row; letting them flow left keeps the whole header on one line. */
@media (max-width: 860px) {
  .list-row .spacer { display: none; }
}

/* Apple's minimum tap target is 44px and the saved-verse actions were 36px —
   including "✎ Note", which is now the main way notes get written. Height
   only: the widths are unchanged, so the header stays on one row. */
@media (pointer: coarse) {
  /* 12px side padding pushed the ⋯ onto a second row by ~7px; 9px keeps
     real words on the buttons AND the whole header on one line. */
  .list-row .btn-sm { min-height: 44px; padding: 0 9px; }
  .entry-note-editor .btn { min-height: 44px; }
  .list-row .drag-handle { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- your own notes, in Spanish ---------------------------------------
   A machine translation has to look different from something you wrote, so
   nobody mistakes it for your own words. */
.tr-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 999px; padding: 2px 8px;
}
.tr-badge.is-pending { color: var(--ink-faint); background: var(--paper-sunk); }
.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--ink-soft); text-decoration: underline; font-family: var(--sans);
}
.btn-link:hover { color: var(--accent-ink); }
@media (pointer: coarse) { .btn-link { min-height: 32px; } }

/* ---- formatted notes ---------------------------------------------------
   Notes are stored as plain text and rendered here, so bullets and headings
   survive translation, narration, search and the Markdown export. One scale
   variable drives every note in the app. */
:root { --note-scale: 1; }

.note-body { font-size: calc(14px * var(--note-scale)); white-space: normal; }
.note-body .nb-p { margin: 0 0 .55em; white-space: pre-wrap; }
.note-body .nb-p:last-child { margin-bottom: 0; }
.note-body .nb-h { font-weight: 680; line-height: 1.35; margin: .7em 0 .35em; }
.note-body .nb-h:first-child { margin-top: 0; }
.note-body .nb-h1 { font-size: 1.34em; }
.note-body .nb-h2 { font-size: 1.16em; }
.note-body .nb-h3 { font-size: 1.04em; letter-spacing: .01em; }
.note-body .nb-list { margin: .2em 0 .6em; padding-left: 1.35em; }
.note-body .nb-list li { margin: .18em 0; padding-left: .15em; }
.note-body .nb-list li.is-sub { margin-left: 1.15em; list-style-type: circle; }
.note-body ol.nb-list li.is-sub { list-style-type: lower-alpha; }
.note-body .nb-quote {
  margin: .45em 0; padding: .1em 0 .1em .8em;
  border-left: 2px solid var(--accent-soft); color: var(--ink-soft); font-style: italic;
}
.note-body code {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: .92em; background: var(--paper-sunk); border-radius: 4px; padding: 0 4px;
}

/* the formatting buttons above a note box */
.nb-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 8px 0 -2px; padding: 4px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--paper-sunk);
}
.nb-tool {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 650; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.nb-tool:hover { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.nb-sep { width: 1px; height: 18px; background: var(--rule); margin: 0 3px; }
@media (pointer: coarse) { .nb-tool { min-width: 40px; height: 40px; font-size: 15px; } }

/* when the note is on top, the scripture reads as the reference below it */
/* ---- the two modules an entry is made of -------------------------------
   Scripture (reference + title + text) and Notes. Each is self-contained so
   either can sit on top; the reference caption only appears when the module
   is NOT directly under the row header, which already names it. */
.entry-module { margin-top: 10px; }
.entry-module + .entry-module { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule); }
.entry-module.is-scripture { cursor: pointer; }
.module-ref {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 5px;
}
.module-title { font-weight: 660; font-size: calc(14.5px * var(--note-scale)); line-height: 1.4; }
.module-sub { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin-top: 2px; }
.entry-module .entry-scripture {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.65; margin-top: 6px;
}

/* ---- live preview under a note editor ---------------------------------
   A markup box that only ever shows raw ** and - reads as broken. This is
   the same renderer the saved note uses, so what you see is what you get. */
.nb-preview {
  margin-top: 8px; padding: 10px 12px;
  border: 1px dashed var(--rule-strong); border-radius: 10px;
  background: var(--paper-sunk);
}
.nb-preview-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}

/* ---- a scripture reference typed inside a note ------------------------- */
.note-ref-wrap { display: inline; }
.note-ref {
  font-family: var(--sans); font-weight: 660; font-size: .93em;
  color: var(--accent-ink); text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.note-ref:hover { background: var(--accent-soft); border-radius: 3px; }
.note-ref-text { color: var(--ink-soft); font-style: italic; }

/* ---- per-note language button ------------------------------------------ */
.btn-lang {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: 1px 9px; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 650; color: var(--ink-soft);
}
.btn-lang:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-lang.is-on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.btn-lang[disabled] { opacity: .6; cursor: default; }
@media (pointer: coarse) { .btn-lang { min-height: 32px; padding: 0 12px; } }

/* ---- autosave status ---------------------------------------------------
   Small and calm: it should reassure, never demand attention. */
.autosave {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  color: var(--ink-faint); margin-left: 4px; white-space: nowrap;
}
.autosave.is-typing { color: var(--ink-soft); }
.autosave.is-saved  { color: var(--accent-ink); }
.autosave.is-draft  { color: var(--accent-ink); }
.autosave:empty { display: none; }

/* ---- zoom control in the sidebar footer -------------------------------- */
.zoom-ctl { display: inline-flex; align-items: center; gap: 2px; }
.zoom-ctl .icon-btn { width: 26px; height: 26px; font-size: 15px; font-weight: 700; line-height: 1; }
.zoom-ctl .btn-sm { padding: 3px 6px; font-size: 11px; min-width: 42px; }
.zoom-ctl [disabled] { opacity: .35; pointer-events: none; }

/* ---- hover highlighting -------------------------------------------------
   Only on devices that actually hover: on a touch screen :hover sticks after
   a tap and leaves rows looking selected. */
@media (hover: hover) and (pointer: fine) {
  .list-row { transition: background-color .12s ease, box-shadow .12s ease; }
  .list-row:hover { background: var(--paper-raised); box-shadow: 0 1px 0 var(--rule-strong); }
  .entry-notes .list-row:hover { background: var(--accent-soft); }
  .entry-module { transition: background-color .12s ease; border-radius: 8px; }
  .entry-module.is-scripture:hover { background: var(--paper-sunk); }
  .note-body .nb-list li:hover { background: var(--paper-sunk); border-radius: 4px; }
  .card:hover { border-color: var(--rule-strong); }
  .swatch:hover { transform: scale(1.08); }
  .v:hover { background: var(--paper-sunk); }
  .drag-handle:hover { color: var(--accent); }
}

/* ---- "+" to add another note ------------------------------------------
   Sits where the next note will appear and matches the note cards above it,
   so adding a second note is the same shape as reading the first. */
.add-note-card {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 8px 0 0; padding: 11px 13px;
  border: 1px dashed var(--rule-strong); border-radius: 10px;
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 13.5px; font-weight: 620; color: var(--ink-soft);
}
.add-note-card:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--paper-sunk); }
.add-note-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 15px; font-weight: 700; line-height: 1;
}
@media (pointer: coarse) { .add-note-card { min-height: 48px; } }

/* ---- add / change a verse by reference --------------------------------- */
.ref-preview {
  margin-top: 12px; padding: 12px 14px; min-height: 74px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-sunk);
}
.ref-preview.is-empty { color: var(--ink-faint); font-size: 13px; border-style: dashed; }
.ref-preview.is-bad { color: var(--danger, #a33); border-color: var(--rule-strong); font-size: 13px; }
.ref-preview-ref {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px;
}
.ref-preview-text { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; }
.ref-preview-warn { margin-top: 8px; font-size: 12px; font-weight: 650; color: var(--accent-ink); }

/* ---- undo ---------------------------------------------------------------- */
.toast-undo {
  margin-left: 12px; padding: 3px 11px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: none; color: inherit; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
}
.toast-undo:hover { background: rgba(255,255,255,.16); }
.bring-notes {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 9px;
  background: var(--paper-sunk); cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 620; color: var(--ink);
}
.bring-notes input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ---- a disabled button must LOOK disabled ------------------------------
   "Insert as a new entry" stayed solid brown while the reference was invalid,
   so it read as clickable and did nothing. */
.btn[disabled], .btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:hover, .btn:disabled:hover { background: inherit; border-color: var(--rule); }
.ref-preview.is-bad { display: flex; flex-direction: column; align-items: flex-start; }

/* ---- share a verse --------------------------------------------------------- */
.share-preview {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.55;
  background: var(--paper-sunk); resize: vertical;
}
.share-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.share-opt {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 9px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink);
}
.share-opt input { width: 17px; height: 17px; accent-color: var(--accent); }
.modal .btn-row a.btn { text-decoration: none; }

/* ---- scripture finder ---------------------------------------------------- */
.finder-fold { margin: 0 0 18px; border: 1px dashed var(--rule-strong); border-radius: 12px; padding: 10px 14px; }
.finder-fold > summary { cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 650; color: var(--ink-soft); list-style: none; }
.finder-fold > summary::-webkit-details-marker { display: none; }
.finder-fold[open] > summary { color: var(--accent-ink); margin-bottom: 10px; }
.finder-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.finder-bar > input { flex: 1; min-width: 200px; }
.finder-target { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.finder-status { font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 2px; min-height: 1em; }
.finder-results { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 52vh; overflow-y: auto; }
.finder-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  padding: 9px 11px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
}
.finder-ref { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--accent-ink); white-space: nowrap; cursor: pointer; }
.finder-abbr { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); letter-spacing: .05em; }
.finder-text { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; }
.finder-row .btn.is-saved { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft); }
@media (max-width: 620px) {
  .finder-row { grid-template-columns: 1fr auto; }
  .finder-text { grid-column: 1 / -1; }
}
/* verse numbers inside a note's reference chip — small, upright, not italic */
.note-ref-text .vnum { font-style: normal; font-size: .68em; vertical-align: super; line-height: 0; margin: 0 2px 0 1px; color: var(--accent-ink); font-weight: 700; }
/* up/down for a note among several on one verse */
.note-move { display: inline-flex; gap: 2px; margin-right: 4px; }
.note-move .btn { min-width: 34px; padding-left: 8px; padding-right: 8px; font-size: 11px; }
@media (pointer: coarse) { .note-move .btn { min-width: 44px; } }

/* ---- sign-in gate + accounts (public build) ---------------------------- */
.gate { position: fixed; inset: 0; z-index: 400; background: var(--paper); display: flex; align-items: center;
  justify-content: center; padding: 20px; overflow-y: auto; }
.gate-card { width: 100%; max-width: 380px; background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px 24px 20px; }
.gate-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.gate-title { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.gate-form .field { margin-top: 8px; }
.gate-form .btn { width: 100%; margin-top: 14px; min-height: 44px; }
.gate-lang button { min-height: 40px; }
.gate-help { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; margin: 10px 0 0; }
.gate-err { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px;
  background: var(--hl-rose); color: var(--hl-rose-ink); }
.gate-lang { margin-top: 18px; }
.gate-card > .btn { width: 100%; margin-top: 12px; }
.users-list { display: flex; flex-direction: column; }
.user-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.user-row.is-off .user-main { opacity: .55; }
.user-main { flex: 1 1 220px; min-width: 0; }
.user-name { font-weight: 600; font-size: 14px; }
.user-actions { flex: 0 0 auto; }
@media (max-width: 640px) { .user-actions { flex-basis: 100%; } }
@media (pointer: coarse) {
  .account-card .btn, .user-actions .btn, .modal .btn-row .btn, .modal .btn-primary { min-height: 44px; }
}