/* ============================================================
   KINGDOM — Design Intelligence
   Dark, reverent, editorial Bible-study app stylesheet.
   Flat. Hairline. Negative space. Gold used sparingly.
   ============================================================ */

/* Self-hosted brand fonts (Satoshi / Mohave / Rock Salt) - no external font CDN */
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/satoshi-400.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/satoshi-500.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/satoshi-700.woff2') format('woff2');}
@font-face{font-family:'Mohave';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/mohave-400.woff2') format('woff2');}
@font-face{font-family:'Mohave';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/mohave-500.woff2') format('woff2');}
@font-face{font-family:'Mohave';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/mohave-600.woff2') format('woff2');}
@font-face{font-family:'Rock Salt';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/rocksalt-400.woff2') format('woff2');}

/* Phase 2 - Settings sheet cards (reuse app variables + .btn) */
.km2-card{border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px;background:var(--panel);}
.km2-h{font-family:var(--display);font-size:1.05rem;letter-spacing:.02em;margin:0 0 6px;color:var(--ink);}
.km2-p{font-family:var(--body);font-size:.92rem;line-height:1.5;color:var(--muted);margin:0 0 12px;}
.km2-row{display:flex;flex-wrap:wrap;gap:10px;}
.km2-status{font-family:var(--body);font-size:.85rem;color:var(--gold);margin-top:10px;min-height:1em;}
.km2-nudge{border-color:var(--gold);}
.km2-nudge .km2-h{color:var(--gold);}
.km2-meta{opacity:.8;}
#tbSettings .ic{font-size:1.1rem;}
/* Phase 2 - verse highlights (background tint only; red-letter color preserved) */
.verse.km2-hl-yellow .vtext{background:rgba(230,200,75,.28);}
.verse.km2-hl-pink .vtext{background:rgba(224,97,127,.30);}
.verse.km2-hl-purple .vtext{background:rgba(168,121,216,.30);}
.verse.km2-hl-green .vtext{background:rgba(111,191,115,.28);}
.verse.km2-hl-blue .vtext{background:rgba(91,155,224,.30);}
.verse[class*="km2-hl-"] .vtext{box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 3px;border-radius:4px;}
.verse.km2-sel{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px;}
.verse.km2-saved .vnum{color:var(--gold);}
/* Phase 2 - verse action bar (bottom, thumb zone) */
.km2-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--panel);border-top:1px solid var(--line);padding:10px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom));transform:translateY(120%);transition:transform .18s ease;box-shadow:0 -8px 24px rgba(0,0,0,.4);}
.km2-bar.show{transform:none;}
.km2-bar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.km2-bar-ref{font-family:var(--display);color:var(--gold);font-size:.92rem;letter-spacing:.02em;}
.km2-bar-x{background:transparent;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;}
.km2-actions{display:flex;gap:8px;margin-bottom:12px;}
.km2-act{flex:1;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:9px 4px;font-family:var(--body);font-size:.74rem;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;}
.km2-act .ic{font-size:1.15rem;line-height:1;}
.km2-act:active{background:rgba(255,255,255,.05);}
.km2-colors{display:flex;gap:12px;align-items:center;}
.km2-dot{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.16);padding:0;cursor:pointer;}
.km2-dot.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink);}
.km2-clear{margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:7px 12px;font-family:var(--body);font-size:.76rem;cursor:pointer;}

:root {
  /* Surfaces */
  --bg: #151515;
  --panel: #0E0E0E;
  --line: #2A2A2A;

  /* Text */
  --ink: #EEEEEE;
  --muted: #9A9A9A;

  /* Accents */
  --gold: #BF8820;
  --red: #E5484A;

  /* Type */
  --display: 'Mohave', sans-serif;
  --body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --script: 'Rock Salt', cursive;

  /* Layout */
  --maxw: 620px;
  --hair: 0.5px;
}

/* ---------- Reset / base ---------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Clear the fixed bottom toolbar (incl. home-indicator inset) */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: rgba(191, 136, 32, 0.18);
}

/* Prevent the page from scrolling behind an open bottom sheet */
body.sheet-open {
  overflow: hidden;
}

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(191, 136, 32, 0.18);
}

[hidden] {
  display: none !important;
}

/* ============================================================
   APP BAR
   ============================================================ */
header.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Safe-area insets so the notch / rounded corners don't clip the bar */
  padding: calc(14px + env(safe-area-inset-top, 0px))
           calc(18px + env(safe-area-inset-right, 0px))
           14px
           calc(18px + env(safe-area-inset-left, 0px));
  background: var(--bg);
  border-bottom: var(--hair) solid var(--line);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}

.brand-mark {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
}

.brand-sub {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.locpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  background: transparent;
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--ink);
}

.locpill:hover {
  border-color: var(--gold);
}

.chev {
  color: var(--gold);
  font-size: 11px;
  line-height: 1;
}

/* ============================================================
   READER
   ============================================================ */
main.reader {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 22px 48px;
  min-height: calc(100vh - 200px);
}

/* ---------- Transient loading / error states ----------
   Styled so navigation never flashes raw left-flush 16px body text. */
.loading {
  text-align: center;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  padding: 64px 20px;
}

.error {
  text-align: center;
  color: var(--muted);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 auto;
  padding: 48px 20px;
}

/* ---------- Chapter head ---------- */
.chap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 28px;
}

.chap-title {
  min-width: 0;
}

.chap-eyebrow {
  display: block;
  font-family: var(--script);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.chap-book {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(40px, 12vw, 56px);
  line-height: 0.95;
  color: var(--ink);
  display: inline;
  vertical-align: baseline;
}

.chap-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 12vw, 56px);
  line-height: 0.95;
  color: var(--gold);
  display: inline;
  vertical-align: baseline;
  margin-left: 10px;
}

/* Second-translation (KJV / KJV + NRSVue) toggle */
.xlat-toggle {
  flex: none;
  min-height: 32px;
  background: transparent;
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  white-space: nowrap;
}

.xlat-toggle[aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
}

.xlat-toggle:hover {
  color: var(--ink);
  border-color: var(--gold);
}

/* ---------- Collapse (intro/context blocks) ---------- */
.collapse {
  display: block;
  margin: 18px 0;
}

.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
  padding: 14px 2px;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--muted);
  text-align: left;
}

.collapse-toggle:hover {
  color: var(--ink);
}

.collapse-toggle .chev,
.collapse-toggle::after {
  color: var(--gold);
}

.collapse-body {
  padding: 16px 2px 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

.collapse-toggle .eyebrow {
  text-transform: lowercase;
  letter-spacing: 0.14em;
}

/* Caret: gold, and rotated 180deg when the block is expanded. The JS
   sets aria-expanded on the toggle, so drive the rotation off that. */
.collapse-toggle .caret {
  color: var(--gold);
  display: inline-block;
  transition: transform 160ms ease;
}

.collapse-toggle[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* ============================================================
   VERSES
   ============================================================ */
/* Constrain the reading measure so lines don't run long on wide
   phones / projectors. Leading (not padding) carries the rhythm. */
.verses {
  max-width: 38rem;
}

.verse {
  display: block;
  position: relative;
  padding: 5px 0;
}

.verse.is-note {
  border-left: 2px solid var(--gold);
  padding-left: 12px;
}

.vnum {
  display: inline-block;
  min-width: 24px;
  padding: 6px 4px;
  margin: -6px 6px -6px -4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease;
}

/* Gold only on the verse currently being interacted with: the verse
   whose note editor is open (.is-active set by JS) or on press. */
.verse.is-active .vnum,
.vnum:active {
  color: var(--gold);
}

.vtext {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}

/* Tappable key word */
.vtext .kw {
  color: var(--gold);
  border-bottom: 1px dotted var(--gold);
  cursor: pointer;
}

/* Words of Christ */
.vtext.red,
.vtext .red {
  color: var(--red);
}

/* Cross-references — a clearly-labeled collapsible row under the verse,
   collapsed by default so verses stay compact. Replaces the old micro-pill. */
.xref-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 6px 0 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  -webkit-tap-highlight-color: transparent;
}

.xref-toggle:hover {
  color: var(--gold);
}

.xref-toggle-icon {
  color: var(--gold);
  font-size: 11px;
}

.xref-toggle .caret {
  color: var(--gold);
  font-size: 11px;
  transition: transform 160ms ease;
}

.xref-toggle[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* The list of cross-references revealed under a verse. */
.verse .xref-list {
  margin: 4px 0 6px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.verse .xref-item {
  cursor: pointer;
  border-bottom: var(--hair) solid var(--line);
}

.verse .xref-item:last-child {
  border-bottom: 0;
}

.xref-ref {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 3px;
}

/* Second translation (WEB) — muted secondary line under the KJV */
.vtext-web {
  margin: 8px 0 2px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.xlat-tag {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  font-style: italic;
  color: var(--gold);
  vertical-align: 1px;
}

.xlat-body {
  font-style: italic;
}

/* Per-verse "what it's saying" breakdown dropdown */
.bd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 6px 0 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  -webkit-tap-highlight-color: transparent;
}

.bd-toggle:hover {
  color: var(--gold);
}

.bd-toggle .caret {
  color: var(--gold);
  font-size: 11px;
  transition: transform 160ms ease;
}

.bd-toggle.is-open .caret,
.bd-toggle[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.breakdown {
  margin: 6px 0 2px;
  padding: 12px 14px;
  background: rgba(191, 136, 32, 0.05);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
}

.verse-note {
  margin: 10px 0 2px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   SECTION BREAK (typographic divider — no box)
   A hairline above, a numbered-index eyebrow, a muted verse
   range, and (optionally) the section's "christ" note as a
   quiet intro paragraph. Studio motif: "(01) walk in love".
   ============================================================ */
.section-note {
  background: none;
  border: 0;
  border-top: var(--hair) solid var(--line);
  border-radius: 0;
  padding: 0;
  margin: 32px 0 16px;
}

.section-note--compact {
  /* No box anymore — same typographic treatment whether or not
     a christ note is present. */
}

/* "(01) walk in love" — lowercase eyebrow with the studio index */
.section-title {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--muted);
  margin: 18px 0 0;
}

.section-index {
  color: var(--muted);
  margin-right: 6px;
}

/* The verse range, set quietly beneath the eyebrow */
.section-range {
  display: block;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* "How this points to Christ" note — quiet muted intro paragraph,
   rendered below the break, never inside a box. */
.section-christ {
  color: var(--muted);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  max-width: 64ch;
  margin: 12px 0 0;
}

/* Study-panel sections (inside the modal) keep a stronger heading
   treatment — the typographic-break styling above is for the reader. */
.study-section {
  margin: 0 0 22px;
}

.study-section .section-title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 8px;
}

.study-section .section-range {
  display: inline;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 0 0 0 6px;
}

.study-section .section-christ {
  color: var(--ink);
  max-width: none;
  margin: 0 0 6px;
}

/* ---------- Discussion questions ---------- */
.qlist {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.q {
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.q:last-child {
  margin-bottom: 0;
}

/* ============================================================
   CROSS-REFS / NOTES LISTS
   ============================================================ */
.xref-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: var(--hair) solid var(--line);
  padding: 14px 2px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.xref-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.xref-item .ref {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 3px;
}

.xref-item .verse-text,
.xref-item .xref-text {
  color: var(--muted);
}

.note-item {
  background: rgba(255, 255, 255, 0.02);
  border: var(--hair) solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.note-item .ref,
.note-item .note-ref {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 6px;
}

.note-item .note-text,
.note-item .note-body {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

.note-item .note-time,
.note-item .timestamp {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- Coming soon (modal contexts) ----------
   No dashed box — just quiet, generously-spaced muted text. */
.comingsoon {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  padding: 20px 2px;
}

/* ---------- Study-layer note (reader, no authored layer) ----------
   An intentional editorial note, not an "empty state" box. Lowercase
   eyebrow, a quiet muted line, generous whitespace, a hairline above. */
.studylayer {
  margin: 40px 0 8px;
  padding: 28px 0 0;
  border-top: var(--hair) solid var(--line);
  max-width: 38rem;
}

.studylayer-eyebrow {
  display: block;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}

.studylayer-body {
  margin: 0;
  max-width: 64ch;
  color: var(--muted);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
}

/* ============================================================
   BUTTONS / INPUTS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent;
  border: var(--hair) solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  border-color: var(--gold);
}

.btn-gold {
  background: var(--gold);
  color: #151515;
  border: 0;
}

.btn-gold:hover {
  border: 0;
  filter: brightness(1.06);
}

textarea {
  display: block;
  width: 100%;
  background: #111;
  border: var(--hair) solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}

textarea:focus {
  border-color: var(--gold);
  outline: none;
}

textarea::placeholder {
  color: var(--muted);
}

/* ---------- Note / Capture editors ---------- */
.note-edit,
.capture {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cap-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted);
}

/* One-line muted helper at the top of the Capture sheet. */
.cap-helper {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* Single-line + multi-line capture fields share the input look */
.cap-input,
.note-text {
  display: block;
  width: 100%;
  background: var(--bg);
  border: var(--hair) solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px; /* 16px avoids iOS auto-zoom on focus */
  line-height: 1.6;
}

input.cap-input {
  min-height: 44px;
}

.cap-input:focus,
.note-text:focus {
  border-color: var(--gold);
  outline: none;
}

.cap-input::placeholder,
.note-text::placeholder {
  color: var(--muted);
}

.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.btn-ghost {
  color: var(--muted);
}

/* Secondary action row (export / email) wraps under the save row. */
.cap-exports {
  margin-top: 0;
}

/* Small, muted autosave feedback. Hidden until an autosave fires, then
   fades back out. Sits inline with the action buttons. */
.saved-indicator {
  align-self: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.saved-indicator.is-visible {
  opacity: 0.85;
}

/* ============================================================
   TOOLBAR (bottom nav)
   ============================================================ */
nav.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: var(--panel);
  border-top: var(--hair) solid var(--line);
  padding: 6px calc(env(safe-area-inset-right, 0px))
           calc(6px + env(safe-area-inset-bottom, 0px))
           calc(env(safe-area-inset-left, 0px));
}

.tool {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  color: var(--muted);
  font-size: 11px;
  -webkit-tap-highlight-color: transparent;
}

.tool:hover,
.tool.is-active,
.tool.active {
  color: var(--ink);
}

.tool.is-active .ic,
.tool.active .ic {
  color: var(--gold);
}

.tool .ic {
  font-size: 18px;
  line-height: 1;
}

.tool .lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* ============================================================
   SHEET (bottom-slide overlay)
   ============================================================ */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.sheet[hidden] {
  display: none;
}

.sheet-panel {
  width: 100%;
  max-width: var(--maxw);
  margin: auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  /* Default cap; JS tightens this to the visual viewport when the iOS
     keyboard is up so the panel + its input never hide behind it. */
  max-height: 85vh;
  background: var(--panel);
  border-top: var(--hair) solid var(--line);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* transform is set by JS to lift the panel above the keyboard */
  will-change: transform, max-height;
  animation: sheet-rise 220ms ease;
}

@keyframes sheet-rise {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: var(--hair) solid var(--line);
}

.sheet-title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--ink);
}

.x,
.pickerClose,
.modalClose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -4px;
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.x:hover,
.pickerClose:hover,
.modalClose:hover {
  color: var(--ink);
}

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Safe-area padding so the last field / button clears the home indicator */
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   PICKER (book / chapter)
   ============================================================ */
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: var(--hair) solid var(--line);
  margin-bottom: 4px;
}

.tab {
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 6px;
  color: var(--muted);
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
}

.tab:hover {
  color: var(--ink);
}

.tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* ---------- Book list ---------- */
.booklist {
  display: flex;
  flex-direction: column;
}

.booklist button,
.book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: var(--hair) solid var(--line);
  padding: 13px 4px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

.booklist button:hover,
.book:hover {
  background: rgba(255, 255, 255, 0.03);
}

.book-count,
.booklist .count {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Chapter step (book header + chapter grid) ----------
   The picker's chapter step is laid out in NORMAL FLOW: a header row
   (back affordance + book name) stacked ABOVE the grid of numbers.
   No absolute positioning, so the header and the numbers can never
   overlap — even with a long name like "1 Corinthians". */
.chaptergrid {
  display: block;
}

.grid-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 0 14px;
  margin-bottom: 12px;
  border-bottom: var(--hair) solid var(--line);
}

.grid-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 14px 8px 10px;
  background: transparent;
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}

.grid-back:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.grid-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* Finger-friendly chapter tiles: ~60px, big Mohave numerals */
.grid-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
}

.grid-cells .chapter,
.chaptergrid button,
.chap {
  min-width: 56px;
  min-height: 56px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--hair) solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  -webkit-tap-highlight-color: transparent;
}

.grid-cells .chapter:hover,
.grid-cells .chapter.is-active,
.chaptergrid button:hover,
.chaptergrid button.is-active,
.chap:hover,
.chap.is-active {
  border-color: var(--gold);
  color: var(--gold);
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .sheet-panel {
    animation: none;
  }
}

/* ===== Phase 2 testing fixes (kom2 2026-06-29) ===== */
:root{ --gold-bright:#E3A50D; }
/* Header: icon + larger Kingdom wordmark, no subtitle (note 6) */
.brand{ flex-direction:row; align-items:center; gap:10px; }
.brand-icon{ width:30px; height:30px; display:block; flex:none; }
.brand-mark{ font-size:22px; }
.brand-sub{ display:none; }
/* Brighter gold accents - eyebrows, verse numbers, toolbar, sheet titles (notes 7-9) */
.collapse-toggle .eyebrow{ color:var(--gold-bright); }
.section-title{ color:var(--gold-bright); }
.section-index{ color:var(--gold-bright); }
.section-range{ color:var(--gold-bright); }
.vnum{ color:var(--gold-bright); }
.verse.km2-saved .vnum{ color:var(--gold-bright); font-weight:700; }
nav.toolbar .tool{ color:var(--gold-bright); }
.sheet-title{ color:var(--gold-bright); }

/* note 2 - selection bubble wraps just the verse line (number + text), not the toggles */
.vline{ display:block; }
.verse.km2-sel{ outline:none; }
.verse.km2-sel .vline{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:6px; }
.verse.is-active .vnum, .vnum:active{ color:var(--gold-bright); }

/* chapter number brighter yellow */
.chap-num{ color:var(--gold-bright); }

/* note 1 - tighten keyword popup: body sits closer under the title */
.sheet-body .kw-card{ margin-top:-10px; }
.kw-lemma{ margin-bottom:6px; }


/* note 4 - My Stuff hub (Saved / Highlights / Notes) */
.km2-tabs{ display:flex; gap:8px; border-bottom:var(--hair) solid var(--line); margin:-4px 0 12px; }
.km2-tab{ min-height:44px; background:transparent; border:0; border-bottom:2px solid transparent; padding:10px 8px; color:var(--muted); font-family:var(--body); font-weight:500; font-size:13px; cursor:pointer; }
.km2-tab.is-active{ color:var(--ink); border-bottom-color:var(--gold-bright); }
.km2-list{ display:flex; flex-direction:column; }
.km2-item{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; width:100%; background:transparent; border:0; border-bottom:var(--hair) solid var(--line); padding:14px 2px; cursor:pointer; }
.km2-item:last-child{ border-bottom:0; }
.km2-item-ref{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600; letter-spacing:.02em; color:var(--gold-bright); font-size:.96rem; }
.km2-item-snip{ font-family:var(--body); font-size:.9rem; color:var(--muted); line-height:1.45; }
.km2-swatch{ width:13px; height:13px; border-radius:3px; display:inline-block; border:1px solid rgba(255,255,255,.18); }
.km2-empty{ text-align:center; color:var(--muted); font-family:var(--body); font-size:.92rem; line-height:1.5; padding:36px 14px; }
.km2-empty strong{ display:block; color:var(--ink); font-family:var(--display); font-weight:600; margin-bottom:6px; font-size:1.02rem; }
.km2-flash .vline{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:6px; animation:km2pulse 1.8s ease-out 1; }
@keyframes km2pulse{ 0%,65%{ outline-color:var(--gold-bright); } 100%{ outline-color:transparent; } }


/* note 10 - cross-reference strength pips + curated "study pick" badge */
.xref-ref{ display:flex; align-items:center; flex-wrap:wrap; gap:0; }
.xref-strength{ display:inline-flex; gap:3px; margin-left:9px; align-items:center; }
.xpip{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.16); display:inline-block; }
.xpip.on{ background:var(--gold-bright); }
.xref-pick{ font-family:var(--body); font-size:.62rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-bright); border:1px solid var(--gold-bright); border-radius:6px; padding:1px 6px; margin-left:8px; line-height:1.5; }


/* note 3 - branded share sheet (Instagram / Messenger / Text / Copy + image card) */
.km2-share-ref{ font-family:var(--display); color:var(--gold-bright); font-size:1rem; letter-spacing:.03em; margin:0 0 16px; }
.km2-share-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.km2-share-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; background:transparent; border:1px solid var(--line); border-radius:14px; padding:14px 4px; color:var(--ink); font-family:var(--body); font-size:.7rem; cursor:pointer; }
.km2-share-btn:active{ background:rgba(255,255,255,.05); }
.km2-share-ic{ color:var(--gold-bright); display:inline-flex; }
.km2-share-2{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.km2-share-wide{ display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.km2-share-ic2{ color:var(--gold-bright); display:inline-flex; }
.km2-share-note{ font-family:var(--body); font-size:.8rem; color:var(--muted); line-height:1.5; margin-top:16px; }


/* study panel hierarchy + spacing: section title bright, "Lead the discussion" dark gold */
.study-section{ margin:0 0 30px; }
.study-section .section-title{ color:var(--gold-bright); margin:0 0 10px; }
.study-section .section-range{ color:var(--gold-bright); }
.study-section .section-christ{ margin:0 0 0; }
.qhead{ display:block; color:var(--gold); font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:12px; margin:18px 0 8px; }
.qlist{ margin:0; }
.qlist li{ color:var(--ink); font-size:15px; line-height:1.6; margin:0 0 11px; }
.qlist li:last-child{ margin-bottom:0; }


/* settings - offline download progress bar + disabled button */
.km2-prog{ height:6px; background:rgba(255,255,255,.08); border-radius:99px; margin-top:12px; overflow:hidden; display:none; }
.km2-prog.show{ display:block; }
.km2-prog>span{ display:block; height:100%; width:0; background:var(--gold-bright); transition:width .25s ease; }
.btn[disabled]{ opacity:.5; cursor:default; }


/* settings - install nudge + download buttons in bright yellow */
.km2-nudge{ border-color:var(--gold-bright); }
#km2Offline, #km2Backup{ border-color:var(--gold-bright); color:var(--gold-bright); }
#km2Offline:hover, #km2Backup:hover{ border-color:var(--gold-bright); }


/* ===== Display settings: light theme + reading text size ===== */
/* Light theme: warm paper surfaces, dark ink; gold/red accents unchanged. */
html[data-theme="light"]{
  --bg:#F4F1EA;
  --panel:#FFFFFF;
  --line:#E4DED2;
  --ink:#1B1813;
  --muted:#6E665B;
}
html[data-theme="light"] body{ -webkit-tap-highlight-color: rgba(191,136,32,.18); }

/* Reading text size steps (data-fs 0..4; 2 = default 17px). Scales the verse
   body and the second-translation line; everything else stays put. */
/* Reading scale: one variable drives verse + study prose. Bigger baseline
   for older eyes and small screens (default 20px, was 17px). */
html{ --read:20px; --read-sm:17px; }
html[data-fs="0"]{ --read:16px; --read-sm:14px; }
html[data-fs="1"]{ --read:18px; --read-sm:15px; }
html[data-fs="2"]{ --read:20px; --read-sm:17px; }
html[data-fs="3"]{ --read:23px; --read-sm:19px; }
html[data-fs="4"]{ --read:26px; --read-sm:21px; }
.vtext,
.collapse-body,
.section-note .section-christ,
.study-section .section-christ,
.qlist li,
.q{ font-size: var(--read); }
.xlat-body{ font-size: var(--read-sm); }
/* Bold reading toggle (accessibility) */
html[data-bold="1"] .vtext,
html[data-bold="1"] .collapse-body,
html[data-bold="1"] .section-christ,
html[data-bold="1"] .qlist li,
html[data-bold="1"] .q{ font-weight:600; }

/* Display controls (segmented theme + text-size stepper) */
.km2-seg{ display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:0 0 14px; }
.km2-seg button{ flex:1; background:transparent; border:0; border-right:1px solid var(--line); color:var(--muted); padding:10px 6px; font-family:var(--body); font-size:.85rem; cursor:pointer; }
.km2-seg button:last-child{ border-right:0; }
.km2-seg button.on{ background:var(--gold-bright); color:#151515; font-weight:600; }
.km2-fontrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.km2-fontlabel{ font-family:var(--body); font-size:.92rem; color:var(--ink); }
.km2-stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.km2-stepper button{ background:transparent; border:0; color:var(--gold-bright); font-family:var(--display); font-weight:600; font-size:1rem; padding:8px 16px; cursor:pointer; }
.km2-fsval{ min-width:34px; text-align:center; color:var(--ink); font-family:var(--display); line-height:1; }


/* ===== Full-text search ===== */
.km2-searchbtn{ margin-left:auto; background:transparent; border:0; color:var(--gold-bright); display:inline-flex; align-items:center; padding:6px; cursor:pointer; }
.km2-search-input{ width:100%; box-sizing:border-box; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-family:var(--body); font-size:16px; padding:12px 14px; margin:0 0 10px; }
.km2-search-input:focus{ outline:none; border-color:var(--gold-bright); }
.km2-search-input::placeholder{ color:var(--muted); }
.km2-mark{ background:rgba(227,165,13,.30); color:inherit; border-radius:3px; padding:0 1px; }


/* ===== Hierarchy sweep: section headings + index numbers (uniform) ===== */
/* Reader inline section headings (between verses) */
.section-note .section-title{
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 18px;
  line-height: 1.18;
  color: var(--gold-bright);
  margin: 0;
}
.section-note .section-index{
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-right: 8px;
  vertical-align: -1px;
}
.section-note .section-range{
  display: inline-block;
  margin-top: 6px;
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
}
/* Reader collapsible eyebrows: context (top) + summary (bottom) */
.collapse-toggle .eyebrow{
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 18px;
  color: var(--gold-bright);
}
.collapse-toggle .section-index{
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-right: 7px;
  vertical-align: -1px;
}
/* Study panel eyebrows (context / summary) -> gold + matching hierarchy */
.study-panel .eyebrow{
  display: block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 18px;
  color: var(--gold-bright);
  margin: 22px 0 8px;
}


/* settings - bold toggle switch + cog icon alignment */
.km2-toggle{ width:52px; height:30px; border-radius:999px; border:1px solid var(--line); background:transparent; position:relative; cursor:pointer; padding:0; flex:none; }
.km2-toggle .km2-toggle-dot{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--muted); transition:left .15s ease, background .15s ease; }
.km2-toggle.on{ border-color:var(--gold-bright); }
.km2-toggle.on .km2-toggle-dot{ left:27px; background:var(--gold-bright); }
.tool .ic svg{ display:block; margin:0 auto; }


/* light theme - bottom toolbar: dark-yellow bar, black icons + labels */
html[data-theme="light"] nav.toolbar{ background:var(--gold-bright); border-top-color:transparent; }
html[data-theme="light"] nav.toolbar .tool{ color:#151515; }
html[data-theme="light"] nav.toolbar .tool .lbl{ color:#151515; }

/* bottom toolbar: slightly bigger icons + labels */
nav.toolbar .tool .ic{ font-size:22px; }
nav.toolbar .tool .ic svg{ width:24px; height:24px; }
nav.toolbar .tool .lbl{ font-size:12px; letter-spacing:.06em; }

/* slightly bigger row labels: cross-references / what it's saying / in other words */
.xref-toggle{ font-size:14px; }
.bd-toggle{ font-size:14px; }
.xlat-tag{ font-size:13px; }
.xlat-toggle{ font-size:13px; }

/* bigger study-panel headings: sheet title, section title + range, lead-the-discussion */
.sheet-title{ font-size:16px; }
.study-section .section-title{ font-size:18px; }
.study-section .section-range{ font-size:14px; }
.qhead{ font-size:15px; }

/* study panel context/summary paragraphs flex with reading size + match section prose */
.study-panel p{ font-size: var(--read); line-height: 1.7; color: var(--ink); }

/* update-ready prompt pill (above the toolbar) */
.km2-update{ position:fixed; left:50%; transform:translate(-50%,160%); bottom:calc(84px + env(safe-area-inset-bottom)); z-index:70; display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--gold-bright); border-radius:999px; padding:9px 9px 9px 18px; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .25s ease; font-family:var(--body); font-size:.9rem; color:var(--ink); max-width:92vw; }
.km2-update.show{ transform:translate(-50%,0); }
.km2-update button{ background:var(--gold-bright); color:#151515; border:0; border-radius:999px; padding:8px 16px; font-family:var(--display); font-weight:600; letter-spacing:.03em; cursor:pointer; }

/* one-tap install pill (Android/Chromium) */
.km2-install{ position:fixed; left:50%; transform:translate(-50%,160%); bottom:calc(84px + env(safe-area-inset-bottom)); z-index:69; display:flex; align-items:center; gap:12px; width:calc(100% - 24px); max-width:560px; background:var(--panel); border:1px solid var(--gold-bright); border-radius:14px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .25s ease; }
.km2-install.show{ transform:translate(-50%,0); }
.km2-install img{ border-radius:6px; flex:none; }
.km2-install span{ flex:1; font-family:var(--body); font-size:.9rem; color:var(--ink); line-height:1.3; }
.km2-install #km2InstBtn{ background:var(--gold-bright); color:#151515; border:0; border-radius:999px; padding:8px 16px; font-family:var(--display); font-weight:600; cursor:pointer; flex:none; }
.km2-install .km2-install-x{ background:transparent; border:0; color:var(--muted); font-size:1rem; cursor:pointer; flex:none; padding:4px 6px; }

/* welcome splash: portrait + live KINGDOM wordmark */
.km2-welcome{ position:fixed; inset:0; z-index:200; background:#0b0b0b; opacity:0; transition:opacity .5s ease; overflow:hidden; }
.km2-welcome.show{ opacity:1; }
.km2-welcome-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.km2-welcome-grad{ position:absolute; left:0; right:0; bottom:0; height:48%; background:linear-gradient(to top, rgba(8,8,8,.92), rgba(8,8,8,0)); }
.km2-welcome-mark{ position:absolute; left:2%; right:2%; bottom:5%; text-align:center; white-space:nowrap; font-family:var(--display); font-weight:600; text-transform:uppercase; color:#E3A50D; line-height:.9; letter-spacing:.005em; font-size:25vw; text-shadow:0 2px 18px rgba(0,0,0,.55); }

/* collapsible section intro: heading + range stay, the "christ" prose hides */
.section-toggle{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; width:100%; background:transparent; border:0; text-align:left; padding:6px 0; cursor:pointer; }
.section-toggle .caret{ color:var(--gold-bright); flex:none; font-size:12px; margin-top:7px; transition:transform .16s ease; }
.section-toggle[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.section-note .section-christ{ margin-top:10px; }