/* ============================================================================
   Free Online Bible — design system. Hand-rolled, no framework.
   Palette: clean WHITE + single modern indigo #4F46E5 accent (flat, YouVersion/
   ESV-modelled). Default LIGHT, never auto-dark; dark + sepia are opt-in.
   Scripture is ALWAYS Literata (serif); Inter for UI. Indigo is the only accent.
   ============================================================================ */

/* ---- 1. Tokens: light (default) — clean white + modern indigo ---------------
   White base, neutral near-black text, ONE modern accent (indigo). Flat, clean,
   spacious. Reader typeface is user-switchable (serif ⇄ sans). NEVER auto-dark. */
:root {
  --ink:         #1C1D22;   /* neutral near-black — high contrast */
  --ink-soft:    #565863;
  --ink-muted:   #8A8C97;
  --parchment:   #FFFFFF;   /* pure white page */
  --parchment-2: #F5F6F9;   /* subtle cool panels / cards */
  --surface:     #FFFFFF;

  /* Indigo = the single modern accent (brand, buttons, links, active, selection). */
  --accent:      #4F46E5;
  --accent-strong:#4338CA;  /* hover / links */
  --accent-wash: #EEF0FE;   /* selected verse / soft tint */
  --accent-ink:  #FFFFFF;   /* text on indigo */

  /* alias --blue to the accent (older components) */
  --blue:        #4F46E5;
  --blue-strong: #4338CA;
  --blue-wash:   #EEF0FE;

  /* Highlight swatches (verse-popup, like the leaders). */
  --hl-yellow: #FEF08A; --hl-green: #BBF7D0; --hl-blue: #BFDBFE; --hl-orange: #FED7AA; --hl-pink: #FBCFE8;

  --green:       #059669;
  --green-wash:  #D1FAE5;
  --rule:        #E7E8EC;   /* cool light border */
  --danger:      #E11D48;

  --shadow:      0 1px 2px rgba(20,22,30,.05), 0 8px 26px rgba(20,22,30,.07);

  --font-scripture: 'Literata', Georgia, 'Times New Roman', serif;
  --font-display:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:  min(1180px, 100% - 2.5rem);
  --measure: 40rem;              /* ~68ch scripture column */
  --radius: 16px;
  --radius-sm: 10px;

  --reader-size: 1.1875rem;      /* user font-size control (19px) */
  --reader-lh: 1.8;
  --reader-font: var(--font-scripture);  /* swapped to sans by the typeface toggle */

  color-scheme: light;
}
/* Reader typeface toggle */
:root[data-reader-font="sans"] { --reader-font: var(--font-ui); }

/* ---- Dark (opt-in only) — neutral near-black + indigo ----------------------*/
:root[data-theme="dark"] {
  --ink:         #E9EAEF;
  --ink-soft:    #B4B6C0;
  --ink-muted:   #83858F;
  --parchment:   #15161A;
  --parchment-2: #1E1F25;
  --surface:     #24252C;
  --accent:      #8B87F7;
  --accent-strong:#ADAAFA;
  --accent-wash: #232338;
  --accent-ink:  #14131F;
  --blue:        #8B87F7;
  --blue-strong: #ADAAFA;
  --blue-wash:   #232338;
  --green:       #34D399;
  --green-wash:  #10241D;
  --rule:        #2C2E36;
  --danger:      #FB7185;
  --shadow:      0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---- Sepia (reader-only warm tint) ----------------------------------------*/
:root[data-theme="sepia"] {
  --ink:         #40372A;
  --ink-soft:    #5F5241;
  --ink-muted:   #93826A;
  --parchment:   #F5ECDB;
  --parchment-2: #EDE2CD;
  --surface:     #FAF3E4;
  --accent:      #4F46E5;
  --accent-strong:#4338CA;
  --accent-wash: #E7E3D2;
  --accent-ink:  #FFFFFF;
  --blue:        #4F46E5;
  --blue-strong: #4338CA;
  --blue-wash:   #E7E3D2;
  --rule:        #DED0B4;
  color-scheme: light;
}

/* ---- 2. Reset -------------------------------------------------------------*/
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *{animation-duration:.001ms!important;transition-duration:.001ms!important;} }
body {
  font-family: var(--font-ui);
  background: var(--parchment);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* iOS Safari resolves 100vh to the LARGE viewport — the height with the browser
     toolbars hidden — so with toolbars showing the body sits ~110px taller than the
     screen and every page ends in dead scrollable white. dvh tracks the real visible
     height; the vh line stays first as the fallback for browsers without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
img,svg { max-width: 100%; display: block; }
a { color: var(--blue-strong); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---- 3. Layout scaffolding ------------------------------------------------*/
.wrap { width: var(--wrap); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: .6rem; z-index: 200; background: var(--surface); padding: .5rem .9rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
main { flex: 1 0 auto; }
.section { padding-block: clamp(2rem, 5vw, 3.75rem); }
.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }

/* ---- 4. Header ------------------------------------------------------------*/
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--parchment) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__bar { display: flex; align-items: center; gap: 1.25rem; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
/* The wordmark and the Sign In button were both wrapping onto two lines on a
   narrow phone, which pushed the header to double height and looked broken.
   Neither should ever wrap; the wordmark shrinks instead. */
.brand, .site-header .btn--sm { white-space: nowrap; }
@media (max-width: 420px){
  .brand { font-size: .98rem; gap: .4rem; }
  .brand__mark { width: 22px; height: 22px; }
  .site-header__bar { gap: .6rem; }
}
.brand__mark { width: 26px; height: 26px; flex: none; color: var(--accent); }
.nav { display: none; gap: .35rem; margin-left: .5rem; }
.nav a { padding: .45rem .7rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 500; font-size: .93rem; }
.nav a:hover { background: var(--parchment-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-wash); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); }
.icon-btn:hover { color: var(--accent-strong); border-color: var(--accent); }
.icon-btn svg { width: 19px; height: 19px; }
.nav-toggle { display: inline-grid; }
/* Desktop: horizontal nav, no hamburger (raised to 1140px to fit 8 items incl. Verse Generator + Quiz) */
@media (min-width: 1140px){ .nav { display: flex; } .nav-toggle { display: none; } }
/* Mobile: nav collapses into a dropdown panel toggled by the hamburger */
@media (max-width: 1139px){
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: .1rem;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--rule);
    padding: .5rem; box-shadow: 0 14px 30px rgba(30,32,60,.12);
  }
  .nav.is-open a { padding: .8rem .9rem; font-size: 1rem; border-radius: 10px; }
  body.nav-open { overflow: hidden; }
}

/* ---- 5. Buttons + pills ---------------------------------------------------*/
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: .95rem; line-height: 1; transition: background .15s, border-color .15s, color .15s; }
.btn svg { width: 18px; height: 18px; }
.btn:hover { text-decoration: none; }
/* Primary = solid muted tan-gold (like the ESV "Sign In" button). Flat. */
.btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn--primary:hover { background: var(--accent-strong); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-strong); }
.btn--gold { background: var(--accent); color: var(--accent-ink); }
.btn--gold:hover { background: var(--accent-strong); }
.btn--ghost { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn--sm { padding: .5rem .8rem; font-size: .875rem; }
.btn--block { width: 100%; }

.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft); font-weight: 600; font-size: .85rem; }
.pill:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.pill[aria-current="true"], .pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- 6. Cards — flat, warm-grey fill (like the market leaders) -------------*/
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.35rem; }
.grid { display: grid; gap: 1rem; }
.grid--quick { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px){ .grid--quick { grid-template-columns: repeat(4, 1fr); } }
.quick-card { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; padding: 1.4rem 1.3rem; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; transition: border-color .15s, transform .12s, box-shadow .12s; }
.quick-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30,32,60,.10); }
.quick-card__ico { width: 24px; height: 24px; padding: 12px; box-sizing: content-box; border-radius: 13px; --tc: #4F46E5; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); margin-bottom: .55rem; }
.quick-card h3 { font-family: var(--font-ui); font-size: 1.06rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.quick-card p { font-size: .86rem; color: var(--ink-soft); }

/* ---- 7. Hero + universal search ------------------------------------------*/
.hero { text-align: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 6.5vw, 4.4rem); font-weight: 600; letter-spacing: -.005em; line-height: 1.06; }
.hero-title em { font-style: italic; font-weight: 600; color: var(--accent-strong); }
.hero p.lede { max-width: 38rem; margin: 1.15rem auto 0; color: var(--ink-soft); font-size: 1.14rem; line-height: 1.65; }
.searchbar { max-width: 42rem; margin: 1.75rem auto 0; }
.searchbar form { display: flex; gap: .5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: .35rem .35rem .35rem 1.1rem; box-shadow: var(--shadow); }
.searchbar input { flex: 1; border: 0; background: transparent; color: var(--ink); font-size: 1rem; outline: none; }
.searchbar input::placeholder { color: var(--ink-muted); }
.searchbar .btn--primary { border-radius: 999px; padding-inline: 1.3rem; }
.search-hint { margin-top: .7rem; font-size: .82rem; color: var(--ink-muted); }

/* ---- 8. Verse of the Day card --------------------------------------------*/
.votd { background: var(--parchment-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; position: relative; overflow: hidden; }
.votd::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.votd__label { justify-content: center; display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.votd blockquote { font-family: var(--font-scripture); font-size: clamp(1.3rem, 3.2vw, 1.7rem); line-height: 1.55; color: var(--ink); max-width: 34rem; margin-inline: auto; }
.votd cite { display: block; margin-top: 1rem; font-family: var(--font-ui); font-style: normal; font-weight: 700; color: var(--accent-strong); font-size: 1rem; }
.votd__actions { margin-top: 1.5rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* ---- 9. Reader ------------------------------------------------------------*/
.reader-bar { position: sticky; top: 60px; z-index: 40; background: color-mix(in srgb, var(--parchment) 90%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.reader-bar__in { display: flex; align-items: center; gap: .5rem; height: 52px; flex-wrap: nowrap; }
/* Only the chapter + translation pills scroll… */
.reader-bar__scroll { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.reader-bar__scroll::-webkit-scrollbar { display: none; }
.reader-bar__scroll > * { flex: none; }
/* …the action buttons stay pinned so Study / Listen / Aa are always reachable. */
.reader-bar__actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding-left: .4rem; }
.reader-bar .spacer { flex: 1 0 auto; }
.reader-bar .pill { white-space: nowrap; }
.reader-bar .size-group .pill { width: 34px; justify-content: center; padding-inline: 0; }
@media (max-width: 560px){ .reader-bar__in { gap: .4rem; } .reader-bar .spacer { display: none; } }
.scripture {
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-lh);
  color: var(--ink);
  max-width: var(--measure);
  margin: 2rem auto;
  padding-inline: .25rem;
}
:root[data-size="s"]  { --reader-size: 1.0625rem; }
:root[data-size="m"]  { --reader-size: 1.1875rem; }
:root[data-size="l"]  { --reader-size: 1.3125rem; }
:root[data-size="xl"] { --reader-size: 1.5rem; }
:root[data-lh="tight"]  { --reader-lh: 1.6; }
:root[data-lh="normal"] { --reader-lh: 1.8; }
:root[data-lh="loose"]  { --reader-lh: 2.05; }
.scripture h2.chapter-title { font-family: var(--font-display); font-size: 1.9rem; margin-bottom: 1.25rem; font-weight: 700; }
.v { display: inline; cursor: pointer; transition: background .12s; border-radius: 4px; padding: .04em .08em; scroll-margin-top: 140px; }
.v:hover { background: var(--parchment-2); }
/* highlight colours applied to verses (data-hl set by JS) */
.v[data-hl="yellow"]{background:var(--hl-yellow)}.v[data-hl="green"]{background:var(--hl-green)}
.v[data-hl="blue"]{background:var(--hl-blue)}.v[data-hl="orange"]{background:var(--hl-orange)}
.v[data-hl="pink"]{background:var(--hl-pink)}
:root[data-theme="dark"] .v[data-hl]{color:#15161A}
.v.is-selected { background: var(--accent-wash); box-shadow: 0 0 0 3px var(--accent-wash); }
.v .vn { font-family: var(--font-ui); font-size: .62em; font-weight: 700; color: var(--ink-muted); vertical-align: super; margin-right: .18em; user-select: none; }
.v.is-selected .vn { color: var(--accent-strong); }

/* ---- Chapter reader: one verse per line ------------------------------------
   Run together as inline spans the chapter reads as a wall of text — the whole
   chapter is a single unbroken paragraph, which is what made it hard to scan
   next to BibleGateway/BibleStudyTools. Each verse now gets its own line with
   its number in a gutter and a hanging indent, so wrapped lines stay aligned
   and any verse can be found at a glance. Scoped to #scripture: the single-verse
   page and the compare view keep the inline treatment. */
#scripture .v {
  display: block;
  padding: .3rem .55rem .3rem 2.9rem;
  text-indent: -2.35rem;
  margin-block: .12rem;
  border-radius: 8px;
}
#scripture .v .vn {
  display: inline-block;
  min-width: 1.85rem;
  margin-right: .5rem;
  text-align: right;
  vertical-align: baseline;
  font-size: .7em;
  font-weight: 800;
  color: var(--accent);
  text-indent: 0;
}
#scripture .v.is-selected .vn,
#scripture .v:hover .vn { color: var(--accent-strong); }
@media (max-width: 560px) {
  #scripture .v { padding-left: 2.35rem; text-indent: -1.95rem; }
  #scripture .v .vn { min-width: 1.5rem; margin-right: .4rem; }
}

/* ---- Study rail entries ---------------------------------------------------
   The rail used to hold only a translation switcher; these surface the study
   tools we already have (word study, concordance, lexicon, dictionary, the
   commentators who cover THIS chapter, and the reader's own notes). */
.sr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.sr-link {
  display: grid; grid-template-columns: 1.15rem 1fr; align-items: start; gap: .1rem .55rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink);
  padding: .45rem .55rem; border-radius: 9px; text-decoration: none;
}
.sr-link:hover { background: var(--parchment-2); color: var(--accent-strong); text-decoration: none; }
.sr-link .lucide { color: var(--accent); margin-top: .12rem; }
.sr-note { grid-column: 2; font-size: .78rem; font-weight: 400; line-height: 1.4; color: var(--ink-muted); }
/* Highlight swatch — sits in the icon column so colour reads at a glance. */
.sr-dot { width: .85rem; height: .85rem; border-radius: 4px; margin-top: .22rem; border: 1px solid rgba(0,0,0,.12); }

/* ---- Share bar -------------------------------------------------------------
   One component used on every shareable page (verse, chapter, article, topic,
   devotional, timeline, study, tools). Token-styled so it follows light/dark/sepia. */
.sharebar { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.sharebar__label {
  display: block; font-family: var(--font-ui); font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .6rem;
}
.sharebar__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.sharebar__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  padding: .5rem .9rem; cursor: pointer; text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
.sharebar__btn:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.sharebar__btn .lucide { color: var(--accent); }
.sharebar__btn.is-done { border-color: var(--green); color: var(--green); }
.sharebar__btn.is-done .lucide { color: var(--green); }
@media (max-width: 480px) { .sharebar__btn span { font-size: .82rem; } }

.reader-nav { display: flex; justify-content: space-between; gap: 1rem; max-width: var(--measure); margin: 1.5rem auto 0; }

/* ---- 10. Verse popup (tap a verse) ---------------------------------------*/
.vpopup-backdrop { position: fixed; inset: 0; z-index: 89; background: transparent; }
.vpopup {
  position: absolute; z-index: 90; width: min(360px, calc(100vw - 1.5rem));
  background: var(--surface); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: var(--shadow); padding: .5rem; opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity .14s, transform .14s;
}
.vpopup.is-open { opacity: 1; transform: none; }
.vpopup__head { display: flex; align-items: flex-start; justify-content: space-between; padding: .55rem .65rem .35rem; }
.vpopup__label { font-size: .72rem; color: var(--ink-muted); }
.vpopup__ref { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.vpopup__ref:hover { color: var(--accent-strong); text-decoration: none; }
.vpopup__close { border: 0; background: var(--parchment-2); color: var(--ink-soft); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.vpopup__hl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .65rem; border-top: 1px solid var(--rule); }
.vpopup__hl-label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; }
.vpopup__swatches { display: flex; gap: .35rem; }
.hl-swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); cursor: pointer; display: grid; place-items: center; padding: 0; }
.hl-swatch.hl-none { background: var(--parchment-2); color: var(--ink-muted); }
.hl-swatch.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.vpopup__item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .65rem; border: 0; border-top: 1px solid var(--rule); background: transparent; color: var(--ink); font-weight: 600; font-size: .95rem; text-align: left; border-radius: 8px; }
.vpopup__item:hover { background: var(--parchment-2); }
.vpopup__note { padding: .5rem .65rem; border-top: 1px solid var(--rule); }
.vpopup__note textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; resize: vertical; }
.vpopup__nudge { font-size: .82rem; color: var(--ink-soft); background: var(--parchment-2); border-radius: 12px; padding: .6rem .75rem; margin: .35rem; }

/* ---- Reader settings popover (Aa) ----------------------------------------*/
.rsettings { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 70; width: 250px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); padding: .9rem; }
.rsettings[hidden] { display: none; }
.rset-group + .rset-group { margin-top: .9rem; }
.rset-group h5 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: .5rem; }
.rset-opts { display: flex; gap: .35rem; }
.rset-opts button { flex: 1; padding: .5rem; border: 1px solid var(--rule); border-radius: 9px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .85rem; }
.rset-opts button.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- 11. Study rail (desktop) --------------------------------------------*/
.reader-layout { display: block; }
@media (min-width: 1080px){
  .reader-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2.5rem; align-items: start; }
  .study-rail { position: sticky; top: 124px; border-left: 1px solid var(--rule); padding-left: 1.5rem; }
}
.study-rail { display: none; }
.study-rail.is-shown { display: block; }
.study-rail details { border-bottom: 1px solid var(--rule); padding-block: .75rem; }
.study-rail summary { font-family: var(--font-display); font-weight: 600; cursor: pointer; list-style: none; }
.study-rail summary::-webkit-details-marker { display: none; }

/* Personal-content rail (My Notes) — ESV-style right panel */
.rail-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: .85rem; }
.rail-flash { background: var(--accent-wash); color: var(--accent-strong); font-size: .82rem; font-weight: 600; padding: .4rem .65rem; border-radius: 8px; margin-bottom: .75rem; }
.rail-textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; resize: vertical; }
.rail-textarea:focus { outline: none; border-color: var(--accent); }
.note-item { border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: .8rem; font-size: .95rem; }
.note-item:first-child { border-top: 0; }
.note-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; font-size: .78rem; color: var(--ink-muted); }
.note-del { border: 0; background: transparent; color: var(--danger); cursor: pointer; font-size: .78rem; padding: 0; }
.note-del:hover { text-decoration: underline; }
/* On mobile the rail drops below the article, full width */
@media (max-width: 1079px){ .study-rail.is-shown { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; } }

/* ---- 12. Book grid --------------------------------------------------------*/
.testament-h { font-family: var(--font-display); font-size: 1.35rem; margin: 2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.book-grid a { padding: .7rem .85rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 500; font-size: .93rem; display: flex; justify-content: space-between; align-items: center; }
.book-grid a:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.book-grid a .ch { color: var(--ink-muted); font-size: .78rem; }

/* chapter number grid */
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px,1fr)); gap: .4rem; }
.chapter-grid a { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 600; }
.chapter-grid a:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; background: var(--accent); }

/* ---- 13. Footer -----------------------------------------------------------*/
.site-footer { border-top: 1px solid var(--rule); background: var(--parchment-2); padding-block: 2.5rem; margin-top: 3rem; }
.site-footer .cols { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px){ .site-footer .cols { grid-template-columns: 2fr repeat(3, 1fr); } }
.site-footer h4 { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .75rem; }
.site-footer a { color: var(--ink-soft); font-size: .9rem; display: block; padding: .2rem 0; }
.site-footer a:hover { color: var(--accent-strong); }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.footer-legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; }

/* ---- 14. Bottom nav (mobile) ---------------------------------------------*/
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; background: var(--surface); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: grid; place-items: center; gap: .15rem; padding: .5rem 0 .55rem; color: var(--ink-muted); font-size: .66rem; font-weight: 600; }
.bottom-nav a svg { width: 21px; height: 21px; }
.bottom-nav a[aria-current="page"] { color: var(--accent-strong); }
.has-bottom-nav { padding-bottom: 62px; }
/* Six items at 375px need the label to shrink rather than wrap. */
@media (max-width: 400px){ .bottom-nav a { font-size: .6rem; } .bottom-nav a svg { width: 19px; height: 19px; } }
@media (min-width: 860px){ .bottom-nav { display: none; } .has-bottom-nav { padding-bottom: 0; } }

/* ---- 15. Misc / prose -----------------------------------------------------*/
.prose { max-width: 42rem; }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.answer { background: var(--accent-wash); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; font-size: 1.06rem; color: var(--ink); }
.muted { color: var(--ink-muted); }
.center { text-align: center; }
/* Spacing scale. mt-5/mt-6 were used in 13 views but never defined, so those
   blocks silently collapsed to zero margin and headings sat hard against the
   element above them (most visibly the verse page's answer box). Utilities that
   don't exist fail silently — keep the scale ahead of the markup. */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mt-5{margin-top:2.75rem}.mt-6{margin-top:3.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.mb-5{margin-bottom:2.75rem}.mb-6{margin-bottom:3.5rem}

/* Safety net: a section heading should never touch the block above it, even if
   someone forgets a utility. Scoped away from hero/card headings. */
.wrap > h2, .wrap > h3, .prose h2, .prose h3 { margin-top: 2.25rem; }
.answer + h2, .answer + h3 { margin-top: 2.25rem; }
.toast { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--parchment); padding: .65rem 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 600; z-index: 120; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* ---- Parallel / compare grid ---------------------------------------------*/
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.cmp-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-strong); padding-bottom: .5rem; border-bottom: 2px solid var(--accent); font-family: var(--font-ui); font-weight: 700; }
.cmp-row { padding: .7rem 0; border-bottom: 1px solid var(--rule); font-family: var(--reader-font); color: var(--ink); }
.cmp-row .vn { color: var(--ink-muted); font-size: .68em; font-weight: 700; margin-right: .35em; vertical-align: super; font-family: var(--font-ui); }
@media (max-width: 700px){ .cmp-grid { grid-template-columns: 1fr; gap: 0; } .cmp-col:nth-child(2){ display:none } .cmp-row:nth-child(even){ padding-top:0; color: var(--ink-soft); } }

/* reading-aloud current verse */
.v.is-reading { background: var(--accent-wash); box-shadow: 0 0 0 3px var(--accent-wash); }
#audio-btn.is-playing { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- Chapter bookmark bar ------------------------------------------------*/
.chbm { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .7rem .9rem; margin-bottom: 1.5rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--parchment-2); }
.chbm__label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; color: var(--ink-soft); }
.chbm[data-bm] .chbm__label { color: var(--ink); }
.chbm__dots { display: flex; gap: .2rem; }
.chbm-mk { border: 0; background: transparent; cursor: pointer; padding: .25rem; border-radius: 9px; line-height: 0; color: var(--ink-muted); transition: background .12s, transform .12s; }
.chbm-mk svg { fill: currentColor; }               /* solid coloured bookmark */
.chbm-mk.chbm-none svg { fill: none; }              /* bookmark-x stays outline */
.chbm-mk:hover { background: rgba(0,0,0,.05); transform: translateY(-1px); }
.chbm-mk.is-active { background: var(--accent-wash); }
:root[data-theme="dark"] .chbm-mk:hover { background: rgba(255,255,255,.07); }

/* ---- Sign-up banner (top-right) ------------------------------------------*/
.signup-banner { position: fixed; top: 72px; right: 16px; z-index: 95; width: min(340px, calc(100vw - 2rem));
  background: var(--accent); color: #fff; border-radius: 14px; padding: 1.1rem 1.1rem 1rem; box-shadow: 0 12px 34px rgba(20,22,30,.22);
  animation: bannerIn .28s cubic-bezier(.2,.8,.2,1); }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.signup-banner__close { position: absolute; top: 8px; right: 8px; border: 0; background: rgba(255,255,255,.15); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.signup-banner__text { font-size: .98rem; font-weight: 600; line-height: 1.35; padding-right: 1.5rem; margin-bottom: .8rem; }
.signup-banner__btn { display: inline-block; background: #fff; color: var(--accent-strong); font-weight: 700; font-size: .9rem; padding: .55rem 1rem; border-radius: 999px; }
.signup-banner__btn:hover { text-decoration: none; background: #f2f2ff; }
@media (max-width: 560px){ .signup-banner { top: auto; bottom: 74px; right: 12px; left: 12px; width: auto; } }

/* account colour dots */
.acct-dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:.4rem; border:1px solid rgba(0,0,0,.12); vertical-align:middle; }

/* ============ Prayer page ============ */
.btn--lg { padding: .95rem 1.4rem; font-size: 1rem; }
.prayer-hero { position: relative; padding: clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem);
  background: url('/img/Prayer-Request.webp') center/cover no-repeat,
    linear-gradient(135deg, #EEF0FE 0%, #E8EAFB 32%, #EAF0F8 66%, #F3EDFC 100%); }
.prayer-hero::before { content:""; position:absolute; inset:0; background: rgba(255,255,255,.42); backdrop-filter: saturate(1.05); }
.prayer-hero__inner { position: relative; max-width: 640px; }
.prayer-hero__copy { text-align: center; margin-bottom: 1.75rem; }
.prayer-eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-strong); }
.prayer-title { font-family: var(--font-scripture); font-size: clamp(2.2rem,5.5vw,3.2rem); font-weight:600; line-height:1.08; margin-top:.5rem; }
.prayer-sub { color: var(--ink-soft); font-size:1.08rem; line-height:1.6; margin-top:.9rem; }
.prayer-form { background: var(--surface); border:1px solid var(--rule); border-radius:20px; padding: clamp(1.4rem,3vw,2rem); box-shadow: 0 20px 50px rgba(30,32,60,.14); }
.pf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .pf-row{ grid-template-columns:1fr; } }
.pf-field { display:block; font-weight:600; font-size:.9rem; margin-bottom:1rem; }
.pf-opt { color: var(--ink-muted); font-weight:400; }
.pf-field input, .pf-field select, .pf-field textarea { display:block; width:100%; margin-top:.4rem; padding:.75rem .9rem; border:1px solid var(--rule); border-radius:11px; background: var(--surface); color: var(--ink); font:inherit; }
.pf-field textarea { resize: vertical; }
.pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus { outline:none; border-color: var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.pf-count { display:block; text-align:right; font-size:.78rem; color: var(--ink-muted); margin-top:.3rem; }
.pf-count--warn { color: var(--danger); }
.pf-err { color: var(--danger); font-size:.85rem; font-weight:400; }
.pf-check { display:flex; align-items:flex-start; gap:.5rem; font-size:.9rem; font-weight:400; color: var(--ink-soft); margin:.25rem 0 1.2rem; }
.prayer-thanks { text-align:center; color: var(--accent-strong); }
.prayer-thanks h2 { font-size:1.3rem; margin:.5rem 0 .4rem; color: var(--ink); }
.prayer-thanks p { color: var(--ink-soft); margin-bottom:1rem; }

.prayer-intro__grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items:center; max-width: 60rem; margin-inline:auto; }
@media (max-width:760px){ .prayer-intro__grid{ grid-template-columns:1fr; gap:1.5rem; } }
.prayer-intro h2 { font-family: var(--font-scripture); font-size:1.8rem; margin-bottom:.75rem; }
.prayer-intro p { color: var(--ink-soft); line-height:1.7; margin-bottom:1rem; }
.prayer-scripture { margin:0; padding:1.5rem 1.6rem; border-left:3px solid var(--accent); background: var(--accent-wash); border-radius:0 14px 14px 0; }
.prayer-scripture blockquote { font-family: var(--font-scripture); font-size:1.12rem; line-height:1.55; color: var(--ink); }
.prayer-scripture figcaption { margin-top:.8rem; font-weight:700; }

.prayer-wall__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.prayer-wall__head h2 { font-size:1.6rem; }
.prayer-search { display:flex; align-items:center; gap:.5rem; background: var(--surface); border:1px solid var(--rule); border-radius:999px; padding:.5rem .9rem; color: var(--ink-muted); }
.prayer-search input { border:0; background:transparent; color: var(--ink); outline:none; font-size:.95rem; min-width:180px; }
.tag-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .8rem; border:1px solid var(--rule); border-radius:999px; background: var(--surface); color: var(--ink-soft); font-size:.85rem; font-weight:600; }
.chip:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration:none; }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip__n { opacity:.7; font-weight:500; }
.prayer-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:1rem; }
.prayer-card { display:flex; flex-direction:column; background: var(--surface); border:1px solid var(--rule); border-radius:16px; padding:1.2rem; }
.prayer-card__tag { align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--accent-strong); background: var(--accent-wash); padding:.2rem .55rem; border-radius:999px; margin-bottom:.6rem; }
.prayer-card__tag:hover { text-decoration:none; filter:brightness(.97); }
.prayer-card__body { color: var(--ink); line-height:1.55; flex:1; white-space:pre-wrap; }
.prayer-card__foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:1rem; font-size:.8rem; }
.prayer-card__pray { display:inline-flex; align-items:center; justify-content:center; gap:.3rem; flex:0 0 auto; width:7.25rem; white-space:nowrap; font-variant-numeric: tabular-nums; border:1px solid var(--rule); background: var(--surface); color: var(--ink-soft); border-radius:999px; padding:.3rem .7rem; font-size:.78rem; font-weight:600; cursor:pointer; }
.prayer-card__foot .muted { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prayer-card__pray:hover { border-color: var(--accent); color: var(--accent-strong); }
.prayer-card__pray.is-prayed { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-wash); }
.prayer-card__pray.is-prayed svg { fill: currentColor; animation: pray-pop .35s ease; }
.prayer-card__pray:disabled { opacity: 1; }
@keyframes pray-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Public notes */
.note-share { display:flex; align-items:center; gap:.45rem; font-size:.82rem; margin-top:.6rem; cursor:pointer; }
.note-share input { accent-color: var(--accent); }
.note-badge { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#B45309; background:#FFFBEB; padding:.1rem .45rem; border-radius:999px; }
.note-badge--live { color:var(--accent-strong); background:var(--accent-wash); }
:root[data-theme="dark"] .note-badge { color:#FCD34D; background:rgba(245,158,11,.14); }
:root[data-theme="dark"] .note-badge--live { color:#A5B4FC; background:rgba(99,102,241,.16); }

/* Inline word study (KJV reader) — OFF by default: <w> is a plain inline wrapper so
   verse-tap/bookmarking behaves exactly as it does in every other translation.
   Study Mode ([data-study="on"]) is what makes words interactive. */
.ws { border-radius:2px; }
:root[data-study="on"] .ws { cursor:pointer; border-bottom:1px dotted var(--rule); transition:border-color .1s, background-color .1s; }
:root[data-study="on"] .ws:hover { border-bottom-color:var(--accent); background:var(--accent-wash); }
:root[data-study="on"] .ws.ws-active, :root[data-study="on"] .ws.ws-lit { background:var(--accent-wash); border-bottom-color:var(--accent); }
:root[data-study="on"] .ws:focus-visible { outline:2px solid var(--accent-strong); outline-offset:1px; }
/* Study Mode makes the verse number the verse-select target — flag it clearly. */
:root[data-study="on"] .vn { background:var(--accent-wash); color:var(--accent-strong); border-radius:4px; padding:0 .25em; cursor:pointer; }
/* Labelled toolbar button (an icon alone wasn't discoverable enough) */
.labelled-btn { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--rule); background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:.42rem .8rem; font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.labelled-btn:hover { border-color:var(--accent); color:var(--accent-strong); }
.labelled-btn.is-on { background:var(--accent); color:#fff; border-color:var(--accent); }
.study-hint { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink-soft); background:var(--accent-wash); border-radius:10px; padding:.55rem .8rem; margin:0 0 1rem; }
.study-hint strong { color:var(--accent-strong); }
.ws-panel { position:fixed; left:0; right:0; bottom:0; z-index:110; background:var(--surface); border-top:1px solid var(--rule); border-radius:18px 18px 0 0; box-shadow:0 -12px 40px rgba(20,22,40,.22); padding:.6rem 1.1rem 1.4rem; max-height:60vh; overflow-y:auto; animation:ws-up .2s ease; }
.ws-panel[hidden] { display:none; }
@keyframes ws-up { from { transform:translateY(100%); } to { transform:none; } }
@media (min-width:52rem){ .ws-panel { left:auto; right:1.5rem; bottom:1.5rem; width:22rem; border-radius:16px; border:1px solid var(--rule); animation:ws-in .18s ease; } @keyframes ws-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } }
.ws-panel__grip { width:2.5rem; height:.28rem; background:var(--rule); border-radius:99px; margin:.1rem auto .7rem; }
@media (min-width:52rem){ .ws-panel__grip { display:none; } }
.ws-panel__head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }
.ws-panel__word { font-weight:700; font-size:1.15rem; }
.ws-panel__lemma { font-family:var(--font-scripture); font-size:1.1rem; color:var(--accent-strong); }
.ws-panel__x { background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:.2rem; border-radius:6px; flex:0 0 auto; }
.ws-panel__x:hover { background:var(--rule); }
.ws-panel__body .ws-translit { color:var(--ink-soft); font-size:.9rem; margin:0 0 .6rem; }
.ws-panel__body .ws-def { line-height:1.55; margin:0 0 .5rem; }
.ws-panel__body .ws-kjv { font-size:.9rem; color:var(--ink-soft); margin:0 0 .8rem; }
.ws-panel__meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.8rem; margin-bottom:.9rem; }
.ws-panel__chip { background:var(--accent-wash); color:var(--accent-strong); font-weight:600; padding:.15rem .55rem; border-radius:999px; }
.ws-panel__links { display:flex; gap:.5rem; flex-wrap:wrap; }
.ws-panel__links a { font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; }
.ws-panel__loading { color:var(--ink-soft); font-size:.9rem; padding:.5rem 0; }

/* First-visit welcome modal */
.welcome { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:1rem; }
.welcome[hidden] { display:none; }
.welcome__backdrop { position:absolute; inset:0; background:rgba(20,22,40,.55); backdrop-filter:blur(2px); }
.welcome__card { position:relative; width:100%; max-width:30rem; background:var(--surface); border-radius:20px; padding:clamp(1.5rem,4vw,2rem); box-shadow:0 30px 70px rgba(20,22,40,.35); animation:welcome-in .22s ease; max-height:92vh; overflow-y:auto; }
@keyframes welcome-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.welcome__x { position:absolute; top:.85rem; right:.85rem; background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:.25rem; border-radius:8px; }
.welcome__x:hover { background:var(--rule); }
.welcome__title { text-align:center; font-size:clamp(1.4rem,4vw,1.75rem); margin:.15rem 0 .5rem; }
.welcome__lede { text-align:center; color:var(--ink-soft); margin:0 0 1.25rem; }
.welcome__feats { list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.9rem; }
.welcome__feats li { display:flex; gap:.75rem; align-items:flex-start; }
.welcome__ico { flex:0 0 auto; width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--accent-wash); color:var(--accent-strong); }
.welcome__feats strong { display:block; font-size:.95rem; }
.welcome__feats span { display:block; font-size:.85rem; color:var(--ink-soft); line-height:1.45; }
.welcome__actions { display:grid; gap:.6rem; }

/* PLUS membership */
.plus-flash { background:var(--accent-wash); color:var(--accent-strong); border:1px solid var(--accent); border-radius:12px; padding:.85rem 1rem; margin-bottom:1.5rem; font-weight:500; }
.plus-hero { text-align:center; margin-bottom:2rem; }
.plus-badge { display:inline-block; background:var(--accent); color:#fff; font-size:.7em; font-weight:800; letter-spacing:.05em; padding:.1em .5em; border-radius:6px; vertical-align:middle; }
.plus-benefits { display:grid; gap:1.1rem; margin:2rem 0; }
.plus-benefit { display:flex; gap:.9rem; align-items:flex-start; text-align:left; }
.plus-benefit svg { color:var(--accent-strong); flex:0 0 auto; margin-top:.15rem; }
.plus-benefit h3 { font-size:1.05rem; margin:0 0 .2rem; }
.plus-benefit p { color:var(--ink-soft); margin:0; font-size:.95rem; }
.plus-card { border:1px solid var(--rule); border-radius:18px; padding:clamp(1.4rem,3vw,2rem); text-align:center; background:var(--surface); margin:1.5rem 0; }
.plus-card--member svg { color:var(--accent-strong); }
.plus-card--member h2 { margin:.4rem 0 .5rem; }
.plus-price-card { box-shadow:0 20px 50px rgba(30,32,60,.12); }
.plus-price { display:flex; align-items:baseline; justify-content:center; gap:.15rem; margin-bottom:.3rem; }
.plus-price__amt { font-size:3rem; font-weight:800; letter-spacing:-.02em; }
.plus-price__per { font-size:1.1rem; color:var(--ink-soft); }
.plus-price-card .btn { margin-top:1.1rem; }
/* Two-plan selector — annual is the emphasized "best value" anchor */
.plus-plans { display:grid; gap:.75rem; margin-bottom:1.1rem; text-align:left; }
@media (min-width:30rem){ .plus-plans { grid-template-columns:1fr 1fr; } }
.plus-plan { position:relative; cursor:pointer; display:block; }
.plus-plan input { position:absolute; opacity:0; pointer-events:none; }
.plus-plan__box { display:flex; flex-direction:column; gap:.15rem; border:2px solid var(--rule); border-radius:14px; padding:1.1rem 1rem .95rem; background:var(--surface); transition:border-color .12s, box-shadow .12s; height:100%; }
.plus-plan input:checked + .plus-plan__box { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.plus-plan input:focus-visible + .plus-plan__box { outline:2px solid var(--accent-strong); outline-offset:2px; }
.plus-plan__flag { align-self:flex-start; font-size:.66rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.15em .5em; border-radius:6px; margin-bottom:.35rem; }
.plus-plan__amt { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.plus-plan__amt small { font-size:.85rem; font-weight:500; color:var(--ink-soft); letter-spacing:0; }
.plus-plan__sub { font-size:.82rem; color:var(--ink-soft); }
.plus-info { margin:2.5rem 0 1.5rem; }
.plus-info h2 { font-size:1.3rem; }
.plus-faq details { border-top:1px solid var(--rule); padding:.9rem 0; }
.plus-faq summary { font-weight:600; cursor:pointer; }
.plus-faq details p { color:var(--ink-soft); margin:.6rem 0 0; }
.acct-plus { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; border:1px solid var(--rule); border-radius:12px; padding:.75rem 1rem; margin:1rem 0; background:var(--surface); }
.acct-plus__badge { background:var(--accent); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.05em; padding:.12em .5em; border-radius:6px; }

/* Account folders */
.fold-bar { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:1.25rem; }
.fold-pill { position:relative; padding-right:1.6rem !important; }
.fold-x { position:absolute; right:.45rem; top:50%; transform:translateY(-50%); font-weight:700; opacity:.45; cursor:pointer; padding:.1rem .2rem; }
.fold-x:hover { opacity:1; color:#B91C1C; }
.fold-new span { font-weight:700; }
.fold-item { display:inline-flex; align-items:center; gap:.3rem; }
.fold-move { font-size:12px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:var(--ink-soft); padding:.2rem .3rem; max-width:8.5rem; }
.fold-move--ok { border-color:var(--accent); }
.fold-dot--indigo { background:#4F46E5; } .fold-dot--green { background:#059669; } .fold-dot--blue { background:#2563EB; }
.fold-dot--orange { background:#EA580C; } .fold-dot--pink { background:#DB2777; } .fold-dot--slate { background:#64748B; }

/* Memory-verse trainer */
.mvt { border:1px solid var(--rule); border-radius:16px; background:var(--surface); padding:clamp(1rem,3vw,1.5rem); min-height:22rem; }
.mvt-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.mvt-tab { border:1px solid var(--rule); background:transparent; color:var(--ink-soft); border-radius:999px; padding:.35rem .75rem; font-size:.78rem; font-weight:600; cursor:pointer; }
.mvt-tab.is-active { border-color:var(--accent); color:var(--accent-strong); background:var(--accent-wash); }
.mvt-tab.is-done:not(.is-active)::after { content:" ✓"; color:var(--accent-strong); }
.mvt-head { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.9rem; margin-bottom:.75rem; }
.mvt-streak { font-size:.8rem; }
.mvt-context { font-size:.8rem; font-weight:600; margin-left:auto; }
.mvt-text { font-family:var(--font-scripture); font-size:clamp(1.1rem,2.6vw,1.3rem); line-height:1.8; margin:0 0 1rem; }
.mvt-letters { letter-spacing:.05em; }
.mvt-tip { color:var(--ink-soft); font-size:.9rem; margin-bottom:1rem; }
.mvt-peek { background:none; border:none; color:var(--accent-strong); font-weight:600; cursor:pointer; padding:0; font-size:inherit; text-decoration:underline; }
.mvt-gap { border:none; border-bottom:2px solid var(--accent); background:var(--accent-wash); border-radius:4px 4px 0 0; color:transparent; cursor:pointer; padding:0 .3rem; font-family:inherit; font-size:inherit; letter-spacing:.12em; }
.mvt-shown { font-style:normal; background:var(--accent-wash); border-radius:4px; padding:0 .2rem; }
.mvt-type-label { font-weight:600; font-size:.9rem; display:block; margin-bottom:.4rem; }
.mvt-type { width:100%; font-size:1rem; font-family:var(--font-scripture); line-height:1.7; border:1px solid var(--rule); border-radius:12px; padding:.8rem .9rem; background:var(--surface); color:inherit; resize:vertical; }
:root[data-theme="dark"] .mvt-type { background:rgba(255,255,255,.05); }
.mvt-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.mvt-result { margin-top:1.25rem; }
.mvt-score { font-size:2.2rem; font-weight:800; }
.mvt-score.is-great { color:var(--accent-strong); }
.mvt-msg { color:var(--ink-soft); margin:.25rem 0 .9rem; }
.mvt-ok { color:inherit; }
.mvt-miss { color:#B91C1C; text-decoration:underline dotted; }
:root[data-theme="dark"] .mvt-miss { color:#FCA5A5; }
.mvt-invalid { color:#B91C1C; font-size:.9rem; }
:root[data-theme="dark"] .mvt-invalid { color:#FCA5A5; }
.mvt-pick { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; }
.mvt-pick__field { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; font-weight:600; flex:1 1 14rem; }
.mvt-pick__field--v { flex:0 1 8rem; }
.mvt-pick input, .mvt-pick select { font-size:16px; padding:.65rem .8rem; border:1px solid var(--rule); border-radius:10px; background:var(--surface); color:inherit; }
.mvt-starters { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.75rem; margin-top:1rem; }
.mvt-starter { display:flex; flex-direction:column; gap:.35rem; border:1px solid var(--rule); border-radius:12px; padding:.85rem .95rem; background:var(--surface); font-size:.85rem; }
.mvt-starter span { color:var(--ink-soft); font-family:var(--font-scripture); }
.mvt-starter:hover { text-decoration:none; border-color:var(--accent); }

/* Which-translation quiz */
.tq-compare { display:grid; gap:1rem; margin-top:1rem; }
.tq-sample { margin:0; padding:1rem 1.1rem; border:1px solid var(--rule); border-radius:14px; background:var(--surface); }
.tq-sample figcaption { font-size:.85rem; margin-bottom:.4rem; }
.tq-sample blockquote { font-family:var(--font-scripture); font-size:1.02rem; line-height:1.65; margin:0 0 .5rem; }
.tq-sample a { font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; }
.tq-result-name { font-family:var(--font-scripture); font-size:clamp(1.5rem,4vw,2rem); margin:.25rem 0 .35rem; }
.tq-result-tag { font-weight:600; color:var(--accent-strong); }
.tq-result-why { color:var(--ink-soft); max-width:38rem; margin:.6rem auto 0; }
.tq-result .quiz-verse { margin:1.1rem 0; }
.tq-result .quiz-verse footer { font-size:.8rem; margin-top:.4rem; }
.tq-runner { font-size:.85rem; margin-top:1rem; }

/* Topic tag colours — one hue per prayer topic (flat wash + strong text) */
.prayer-card__tag--healing      { color:#047857; background:#ECFDF5; }
.prayer-card__tag--family       { color:#C2410C; background:#FFF7ED; }
.prayer-card__tag--marriage     { color:#BE185D; background:#FDF2F8; }
.prayer-card__tag--finances     { color:#4D7C0F; background:#F7FEE7; }
.prayer-card__tag--work         { color:#1D4ED8; background:#EFF6FF; }
.prayer-card__tag--guidance     { color:#4338CA; background:#EEF2FF; }
.prayer-card__tag--grief        { color:#6D28D9; background:#F5F3FF; }
.prayer-card__tag--health       { color:#0F766E; background:#F0FDFA; }
.prayer-card__tag--anxiety      { color:#0369A1; background:#F0F9FF; }
.prayer-card__tag--protection   { color:#B45309; background:#FFFBEB; }
.prayer-card__tag--salvation    { color:#7E22CE; background:#FAF5FF; }
.prayer-card__tag--thanksgiving { color:#A16207; background:#FEFCE8; }
:root[data-theme="dark"] .prayer-card__tag--healing      { color:#6EE7B7; background:rgba(16,185,129,.14); }
:root[data-theme="dark"] .prayer-card__tag--family       { color:#FDBA74; background:rgba(249,115,22,.14); }
:root[data-theme="dark"] .prayer-card__tag--marriage     { color:#F9A8D4; background:rgba(236,72,153,.14); }
:root[data-theme="dark"] .prayer-card__tag--finances     { color:#BEF264; background:rgba(132,204,22,.14); }
:root[data-theme="dark"] .prayer-card__tag--work         { color:#93C5FD; background:rgba(59,130,246,.14); }
:root[data-theme="dark"] .prayer-card__tag--guidance     { color:#A5B4FC; background:rgba(99,102,241,.16); }
:root[data-theme="dark"] .prayer-card__tag--grief        { color:#C4B5FD; background:rgba(139,92,246,.14); }
:root[data-theme="dark"] .prayer-card__tag--health       { color:#5EEAD4; background:rgba(20,184,166,.14); }
:root[data-theme="dark"] .prayer-card__tag--anxiety      { color:#7DD3FC; background:rgba(14,165,233,.14); }
:root[data-theme="dark"] .prayer-card__tag--protection   { color:#FCD34D; background:rgba(245,158,11,.14); }
:root[data-theme="dark"] .prayer-card__tag--salvation    { color:#D8B4FE; background:rgba(168,85,247,.14); }
:root[data-theme="dark"] .prayer-card__tag--thanksgiving { color:#FDE047; background:rgba(234,179,8,.12); }
.pager { display:flex; align-items:center; justify-content:center; gap:1.25rem; margin-top:2rem; }
.pager__btn { padding:.55rem 1rem; border:1px solid var(--rule); border-radius:10px; background: var(--surface); color: var(--ink); font-weight:600; font-size:.9rem; }
.pager__btn:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration:none; }
.pager__btn.is-disabled { opacity:.4; pointer-events:none; }
.pager__info { color: var(--ink-muted); font-size:.88rem; }
:root[data-theme="dark"] .prayer-hero { background: linear-gradient(135deg,#1a1b2e,#181924,#141a20); }
:root[data-theme="dark"] .prayer-hero::before { background: rgba(0,0,0,.25); }

/* ── Commentary outline (Matthew Henry et al.) ─────────────────────── */
.commentary { font-size:.96rem; line-height:1.72; color: var(--ink-soft); }
.commentary > *:last-child { margin-bottom:0; }
.cm-p { margin:0 0 .95rem; }
.cm-pt { display:flex; gap:.5rem; margin:0 0 .7rem; align-items:baseline; }
.cm-pt > span:last-child { flex:1; min-width:0; }
.cm-mk { flex:none; font-family: var(--font-ui); font-weight:800; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Roman = section header: extra air + a hairline above, marker a touch larger */
.cm-pt--1 { margin:1.5rem 0 .55rem; padding-top:1.15rem; border-top:1px solid var(--rule); }
.cm-pt--1:first-child { margin-top:.2rem; padding-top:0; border-top:0; }
.cm-pt--1 .cm-mk { color: var(--accent-strong); font-size:1.05em; }
.cm-pt--1 > span:last-child { color: var(--ink); font-weight:600; }
/* nested points: increasing indent */
.cm-pt--2 { margin-left: .35rem; }
.cm-pt--3 { margin-left: 1.6rem; }
.cm-pt--4 { margin-left: 2.85rem; }
.cm-pt--3 .cm-mk, .cm-pt--4 .cm-mk { font-weight:700; color: var(--accent-strong); }
@media (max-width:560px){
  .cm-pt--3 { margin-left: 1rem; }
  .cm-pt--4 { margin-left: 1.9rem; }
}

/* ── Topic explore rail (More Topics + CTA) ────────────────────────── */
.rail-topics { display:flex; flex-direction:column; }
.rail-topics a { padding:.5rem 0; border-bottom:1px solid var(--rule); color: var(--ink-soft); font-size:.95rem; font-weight:500; }
.rail-topics a:hover { color: var(--accent-strong); text-decoration:none; padding-left:.25rem; transition: padding .12s ease, color .12s ease; }
.rail-more { display:inline-flex; align-items:center; gap:.35rem; margin-top:.85rem; font-weight:700; font-size:.9rem; color: var(--accent); }
.rail-more:hover { color: var(--accent-strong); text-decoration:none; }
.rail-cta { margin-top:2rem; padding:1.25rem; background: var(--accent-wash); border:1px solid var(--rule); border-radius: var(--radius); }
.rail-cta .eyebrow { color: var(--accent-strong); }
.rail-cta h3 { font-family: var(--font-display); font-size:1.2rem; margin:.3rem 0 .4rem; color: var(--ink); }
.rail-cta p { font-size:.9rem; color: var(--ink-soft); margin-bottom:.9rem; line-height:1.55; }

/* ── Verse Generator (§17) ─────────────────────────────────────────── */
.vg-head { max-width: 46rem; }
.vg-h1 { font-size: clamp(1.9rem,5vw,2.7rem); margin:.35rem 0 .6rem; }
.vg-answer { color: var(--ink-soft); font-size: 1.05rem; line-height:1.6; max-width: 44rem; }

#vg { margin-top: 1.5rem; }
.vg-stage { background: linear-gradient(135deg,#EEF0FE,#E8EAFB 60%,#F3EDFC); border:1px solid var(--rule); border-radius: 22px; padding: clamp(1.8rem,5vw,3.2rem) clamp(1.2rem,4vw,3rem); text-align:center; }
.vg-verse-wrap { max-width: 40rem; margin: 0 auto; min-height: clamp(9.5rem,24vw,13.5rem); display:flex; flex-direction:column; justify-content:center; }
.vg-verse { font-family: var(--font-scripture); font-size: clamp(1.4rem,3.4vw,2.1rem); line-height: 1.5; color: #23244A; margin:0; font-weight: 500; }
.vg-verse::before { content:"“"; } .vg-verse::after { content:"”"; }
.vg-ref { display:block; margin-top: 1.1rem; font-family: var(--font-ui); font-weight:700; font-size:1rem; font-style: normal; }
.vg-ref a { color: var(--accent-strong); } .vg-ref .muted { font-weight:500; }

.vg-verse-actions { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top: 1.5rem; }
.vg-act { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border:1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-weight:600; font-size:.9rem; cursor:pointer; }
.vg-act:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration:none; }
.vg-act--accent { background: var(--accent); border-color: var(--accent); color:#fff; }
.vg-act--accent:hover { background: var(--accent-strong); color:#fff; }
.vg-act svg { width:16px; height:16px; }

.vg-trust { margin-top:1rem; font-size:.85rem; color: var(--ink-muted); }
.vg-batch { max-width:40rem; margin: 1.5rem auto 0; display:flex; flex-direction:column; gap:.75rem; text-align:left; }
.vg-batch__item { background: var(--surface); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.15rem; }
.vg-batch__item blockquote { font-family: var(--font-scripture); font-size:1.05rem; margin:0 0 .4rem; color: var(--ink); }
.vg-batch__item cite { font-style:normal; font-weight:600; font-size:.9rem; }

.vg-controls { text-align:center; margin-top: 1.5rem; }
.vg-generate { min-width: 15rem; }
.vg-generate.is-loading { opacity:.7; pointer-events:none; }
.vg-hint { display:block; margin-top:.6rem; font-size:.85rem; }
kbd { font-family: var(--font-ui); font-size:.78rem; background: var(--surface); border:1px solid var(--rule); border-bottom-width:2px; border-radius:5px; padding:.05rem .35rem; color: var(--ink-soft); }

.vg-filters { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; align-items:flex-end; margin-top:1.5rem; }
.vg-toggle { display:inline-flex; background: var(--surface); border:1px solid var(--rule); border-radius:999px; padding:.2rem; }
.vg-toggle label { position:relative; padding:.4rem .9rem; border-radius:999px; font-weight:600; font-size:.88rem; cursor:pointer; color: var(--ink-soft); }
.vg-toggle input { position:absolute; opacity:0; }
.vg-toggle label:has(input:checked) { background: var(--accent); color:#fff; }
.vg-sel { display:flex; flex-direction:column; gap:.3rem; font-size:.78rem; font-weight:700; color: var(--ink-muted); text-align:left; text-transform:uppercase; letter-spacing:.04em; }
.vg-sel select { font: inherit; text-transform:none; letter-spacing:0; font-weight:500; font-size:.92rem; color: var(--ink); padding:.5rem .7rem; border:1px solid var(--rule); border-radius:10px; background: var(--surface); min-width: 9rem; }
.vg-sel select:focus { outline:none; border-color: var(--accent); }

/* Designer */
.vg-designer { margin-top:1.5rem; background: var(--surface); border:1px solid var(--rule); border-radius:18px; padding: clamp(1.2rem,3vw,1.8rem); }
.vg-designer__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.vg-designer__head h2 { font-size:1.3rem; margin:0; }
.vg-close { background:none; border:none; cursor:pointer; color: var(--ink-muted); padding:.3rem; border-radius:8px; }
.vg-close:hover { background: var(--accent-wash); color: var(--accent-strong); }
.vg-designer__grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.2rem,3vw,2rem); align-items:start; }
@media (max-width: 780px){ .vg-designer__grid { grid-template-columns: 1fr; } }
.vg-canvas-wrap { background: var(--parchment-2, #F3EEE3); border-radius:14px; padding:1rem; display:flex; justify-content:center; }
#vg-canvas { max-width:100%; max-height: 60vh; height:auto; width:auto; border-radius:8px; box-shadow: 0 10px 30px rgba(30,32,60,.16); }
.vg-opt { margin-bottom:1.2rem; }
.vg-opt__label { display:block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-muted); margin-bottom:.5rem; }
.vg-fmts, .vg-fonts { display:flex; flex-wrap:wrap; gap:.45rem; }
.vg-fmt, .vg-font { padding:.45rem .8rem; border:1px solid var(--rule); border-radius:9px; background: var(--surface); color: var(--ink-soft); font-weight:600; font-size:.85rem; cursor:pointer; }
.vg-fmt.is-active, .vg-font.is-active { background: var(--accent); border-color: var(--accent); color:#fff; }
.vg-fmt:hover, .vg-font:hover { border-color: var(--accent); }
.vg-bgs { display:flex; flex-wrap:wrap; gap:.5rem; }
.vg-bg { width:44px; height:44px; border-radius:10px; border:2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); cursor:pointer; }
.vg-bg.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.vg-designer__actions { margin-top:.5rem; }
.vg-designer__row { display:flex; gap:.5rem; margin-top:.6rem; }
.vg-designer__row .btn { flex:1; }

/* Info sections */
.vg-info { max-width: 52rem; margin: 3rem auto 0; }
.vg-steps { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
@media (max-width:680px){ .vg-steps { grid-template-columns:1fr; } }
.vg-step { background: var(--surface); border:1px solid var(--rule); border-radius:14px; padding:1.3rem; }
.vg-step__n { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:999px; background: var(--accent-wash); color: var(--accent-strong); font-weight:800; margin-bottom:.6rem; }
.vg-step h3 { font-size:1.05rem; margin:0 0 .3rem; }
.vg-step p { color: var(--ink-soft); font-size:.92rem; margin:0; line-height:1.55; }
.vg-explain, .vg-uses, .faq-section { margin-top: 2.5rem; }
.vg-explain__grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1rem; }
@media (max-width:680px){ .vg-explain__grid { grid-template-columns:1fr; } }
.vg-explain h3 { font-size:1.1rem; margin:0 0 .4rem; color: var(--accent-strong); }
.vg-explain p { color: var(--ink-soft); line-height:1.6; margin:0; }
.vg-uses ul { list-style:none; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:680px){ .vg-uses ul { grid-template-columns:1fr; } }
.vg-uses li { padding-left:1.4rem; position:relative; color: var(--ink-soft); line-height:1.5; }
.vg-uses li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--accent); }
/* (generator FAQ now uses the shared partials/faq-section — see .faq / .faq-section) */
.vg-links { margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.vg-links__label { font-weight:700; font-size:.85rem; color: var(--ink-muted); }

.vg-toast { position:fixed; left:50%; bottom:2rem; transform:translateX(-50%) translateY(1rem); background: var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:10px; font-size:.9rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:300; }
.vg-toast.is-on { opacity:1; transform:translateX(-50%) translateY(0); }

:root[data-theme="dark"] .vg-stage { background: linear-gradient(135deg,#1c1d2e,#191a24 60%,#1e1a2a); }
:root[data-theme="dark"] .vg-verse { color: #E9EAF5; }

/* ── Homepage topic tiles + section head ───────────────────────────── */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.section-head h2 { font-size:1.35rem; margin:0; }
.section-head__link { display:inline-flex; align-items:center; gap:.3rem; font-weight:700; font-size:.9rem; color:var(--accent); white-space:nowrap; }
.section-head__link:hover { color:var(--accent-strong); text-decoration:none; }
.topic-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:.7rem; }
.topic-tile { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--rule); border-radius:14px; color:var(--ink); font-weight:700; font-size:.98rem; transition:border-color .12s, transform .12s, box-shadow .12s; }
.topic-tile:hover { border-color:var(--accent); text-decoration:none; transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,32,60,.08); }
.topic-tile__ico { display:inline-grid; place-items:center; width:40px; height:40px; flex:none; border-radius:11px; --tc:#4F46E5; color:var(--tc); background:color-mix(in srgb, var(--tc) 13%, transparent); }
.topic-tile__ico svg { width:21px; height:21px; }
.topic-tile__title { min-width:0; overflow-wrap:anywhere; line-height:1.25; }

/* ── Coloured icon-chip cycle — makes tiles/cards POP (7 hues by position) ── */
.topic-tiles .topic-tile:nth-child(7n+1) .topic-tile__ico, .grid--quick .quick-card:nth-child(7n+1) .quick-card__ico { --tc:#4F46E5; } /* indigo  */
.topic-tiles .topic-tile:nth-child(7n+2) .topic-tile__ico, .grid--quick .quick-card:nth-child(7n+2) .quick-card__ico { --tc:#7C3AED; } /* violet  */
.topic-tiles .topic-tile:nth-child(7n+3) .topic-tile__ico, .grid--quick .quick-card:nth-child(7n+3) .quick-card__ico { --tc:#2563EB; } /* blue    */
.topic-tiles .topic-tile:nth-child(7n+4) .topic-tile__ico, .grid--quick .quick-card:nth-child(7n+4) .quick-card__ico { --tc:#059669; } /* emerald */
.topic-tiles .topic-tile:nth-child(7n+5) .topic-tile__ico, .grid--quick .quick-card:nth-child(7n+5) .quick-card__ico { --tc:#E11D48; } /* rose    */
.topic-tiles .topic-tile:nth-child(7n+6) .topic-tile__ico, .grid--quick .quick-card:nth-child(7n+6) .quick-card__ico { --tc:#EA580C; } /* orange  */
.topic-tiles .topic-tile:nth-child(7n+7) .topic-tile__ico, .grid--quick .quick-card:nth-child(7n+7) .quick-card__ico { --tc:#C026D3; } /* fuchsia */

/* ── Reusable FAQ accordion (homepage, verse pages) ────────────────── */
.faq-section { max-width:46rem; margin-inline:auto; }
.faq-section__title { font-size:1.5rem; margin-bottom:1rem; text-align:center; }
.faq { max-width:46rem; margin-inline:auto; }
.faq__item { border-bottom:1px solid var(--rule); }
.faq__item summary { cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:var(--ink); padding:1.05rem 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:"+"; color:var(--accent); font-weight:700; font-size:1.35rem; line-height:1; flex:none; }
.faq__item[open] summary::after { content:"–"; }
.faq__item p { color:var(--ink-soft); line-height:1.65; margin:0 0 1.1rem; }

/* ── Commentary viewer (chapter grid + entries) ────────────────────── */
.chapter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:.5rem; max-width:40rem; }
.chapter-cell { display:grid; place-items:center; aspect-ratio:1; border:1px solid var(--rule); border-radius:10px; background:var(--surface); color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.chapter-cell:hover { border-color:var(--accent); color:var(--accent-strong); text-decoration:none; background:var(--accent-wash); }
.cm-entry { margin-bottom:2.2rem; }
.cm-entry:last-child { margin-bottom:0; }
.cm-entry__ref { font-family:var(--font-display); font-size:1.15rem; color:var(--accent-strong); margin:0 0 .7rem; padding-bottom:.4rem; border-bottom:2px solid var(--accent-wash); }

/* ── Guided studies ────────────────────────────────────────────────── */
.study-sections { display:flex; flex-direction:column; gap:1.6rem; max-width:44rem; }
.study-section { display:flex; gap:1rem; }
.study-section__n { flex:none; width:2rem; height:2rem; border-radius:999px; background:var(--accent-wash); color:var(--accent-strong); font-weight:800; display:grid; place-items:center; font-size:.95rem; margin-top:.15rem; }
.study-section__body { min-width:0; flex:1; }
.study-section__body h2 { font-size:1.2rem; margin:0 0 .6rem; }
.study-section .scripture { background:var(--parchment-2); border:1px solid var(--rule); border-radius:12px; padding:1rem 1.15rem; }
.study-section__foot { display:flex; flex-wrap:wrap; gap:.9rem; align-items:baseline; margin-top:.6rem; }
.study-ref { font-weight:700; color:var(--accent-strong); }
.study-context { font-size:.88rem; }
.study-note { color:var(--ink-soft); font-size:.92rem; margin-top:.5rem; line-height:1.55; }

/* ── Bible quiz ────────────────────────────────────────────────────── */
.quiz-blurb { color:var(--ink-soft); font-size:1.05rem; max-width:44rem; margin-top:.4rem; }
.quiz { max-width:40rem; margin-top:1.75rem; background:var(--surface); border:1px solid var(--rule); border-radius:18px; padding:clamp(1.3rem,4vw,2rem); box-shadow:var(--shadow); }
.quiz-bar { height:6px; border-radius:99px; background:var(--accent-wash); overflow:hidden; margin-bottom:.9rem; }
.quiz-bar span { display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .3s ease; }
.quiz-count { font-size:.82rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; }
.quiz-verse { font-family:var(--font-scripture); font-size:clamp(1.2rem,3vw,1.5rem); line-height:1.5; color:var(--ink); margin:1rem 0 1.3rem; }
.quiz-prompt { font-weight:700; margin-bottom:.9rem; }
.quiz-opts { display:grid; gap:.6rem; }
.quiz-opt { text-align:left; padding:.85rem 1.1rem; border:1px solid var(--rule); border-radius:12px; background:var(--surface); color:var(--ink); font-weight:600; font-size:1rem; transition:border-color .12s, background .12s; }
.quiz-opt:not(:disabled):hover { border-color:var(--accent); background:var(--accent-wash); }
.quiz-opt.is-correct { border-color:var(--green); background:var(--green-wash); color:var(--green); }
.quiz-opt.is-wrong { border-color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); color:var(--danger); }
.quiz-opt:disabled { cursor:default; }
.quiz-after { margin-top:1.1rem; }
.quiz-feedback { font-size:.95rem; margin-bottom:.8rem; }
.quiz-feedback.ok { color:var(--green); } .quiz-feedback.no { color:var(--ink-soft); }
.quiz-feedback strong { color:var(--accent-strong); }
.quiz-result { text-align:center; padding:1rem 0; }
.quiz-score { font-family:var(--font-display); font-size:clamp(2.5rem,7vw,3.5rem); font-weight:800; color:var(--accent); line-height:1; }
.quiz-msg { font-size:1.15rem; margin:.6rem 0 1.4rem; color:var(--ink-soft); }
.quiz-result-actions { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.quiz-info { max-width:44rem; margin-top:2.5rem; }
.quiz-info h2 { font-size:1.25rem; margin-bottom:.5rem; }
.quiz-info p { color:var(--ink-soft); line-height:1.65; }

/* ── Bible dictionary ──────────────────────────────────────────────── */
.dict-search { display:flex; align-items:center; gap:.6rem; max-width:34rem; border:1px solid var(--rule); border-radius:12px; padding:.2rem .9rem; background:var(--surface); }
.dict-search svg { color:var(--ink-muted); flex:none; }
.dict-search input { flex:1; border:none; background:none; padding:.7rem 0; font:inherit; font-size:1rem; color:var(--ink); outline:none; }
.dict-az { display:flex; flex-wrap:wrap; gap:.35rem; }
.dict-az__l { display:grid; place-items:center; width:2.2rem; height:2.2rem; border:1px solid var(--rule); border-radius:9px; font-weight:700; color:var(--ink-soft); background:var(--surface); }
.dict-az__l:hover { border-color:var(--accent); color:var(--accent-strong); text-decoration:none; }
.dict-az__l.is-active { background:var(--accent); border-color:var(--accent); color:#fff; }
.dict-terms { columns:3 12rem; column-gap:1.6rem; max-width:52rem; }
.dict-terms a { display:block; padding:.32rem 0; color:var(--ink-soft); break-inside:avoid; }
.dict-terms a:hover { color:var(--accent-strong); }
.dict-def p { margin-bottom:1rem; line-height:1.72; color:var(--ink-soft); }

/* Shared "more/related" tile section title */
.tiles-title { font-size:1.2rem; margin:1.6rem 0 .8rem; }

/* VotD verse is tappable (opens the §16.1 action bar) but keeps its blockquote look */
.votd__verse { cursor: pointer; }

/* ── Audio Bible (embedded players) ────────────────────────────────── */
.audio-player h2 { font-size:1.2rem; margin-bottom:.7rem; }
.audio-embed { width:100%; max-width:52rem; height:340px; border:1px solid var(--rule); border-radius:14px; background:var(--parchment-2); }

/* ── Strong's Lexicon + Concordance (study tools) ─────────────── */
.lex-tabs { display:inline-flex; gap:.35rem; border:1px solid var(--rule); border-radius:12px; padding:.3rem; background:var(--surface); }
.lex-tab { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:9px; font-weight:700; color:var(--ink-soft); }
.lex-tab span { font-weight:600; font-size:.78rem; color:var(--ink-muted); }
.lex-tab:hover:not(.is-active) { color:var(--accent-strong); text-decoration:none; }
.lex-tab.is-active { background:var(--accent); color:#fff; }
.lex-tab.is-active span { color:rgba(255,255,255,.82); }

.lex-featured { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:.85rem; }
.lex-card { display:flex; flex-direction:column; gap:.12rem; padding:1rem 1.1rem; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--surface); --tc:#4F46E5; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.lex-card:hover { border-color:var(--tc); transform:translateY(-2px); text-decoration:none; box-shadow:0 8px 22px -14px var(--tc); }
.lex-card__code { font-size:.72rem; font-weight:800; letter-spacing:.03em; color:var(--tc); }
.lex-card__lemma { font-family:var(--font-scripture); font-size:1.55rem; line-height:1.2; color:var(--ink); }
.lex-card__translit { font-style:italic; color:var(--ink-soft); font-size:.9rem; }
.lex-card__gloss { color:var(--ink-muted); font-size:.82rem; margin-top:.15rem; }
.lex-featured .lex-card:nth-child(7n+1){ --tc:#4F46E5 } .lex-featured .lex-card:nth-child(7n+2){ --tc:#7C3AED }
.lex-featured .lex-card:nth-child(7n+3){ --tc:#2563EB } .lex-featured .lex-card:nth-child(7n+4){ --tc:#059669 }
.lex-featured .lex-card:nth-child(7n+5){ --tc:#E11D48 } .lex-featured .lex-card:nth-child(7n+6){ --tc:#EA580C }
.lex-featured .lex-card:nth-child(7n+7){ --tc:#C026D3 }

.lex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.35rem; }
.lex-item { display:grid; grid-template-columns:3.4rem 1fr; grid-template-areas:'code word' 'code gloss'; column-gap:.6rem; align-items:center; padding:.55rem .7rem; border:1px solid transparent; border-radius:10px; }
.lex-item:hover { background:var(--surface); border-color:var(--rule); text-decoration:none; }
.lex-item__code { grid-area:code; font-weight:800; font-size:.72rem; color:var(--accent); }
.lex-item__word { grid-area:word; align-self:end; }
.lex-item__lemma { font-family:var(--font-scripture); font-size:1.08rem; color:var(--ink); margin-right:.4rem; }
.lex-item__translit { font-style:italic; color:var(--ink-soft); font-size:.85rem; }
.lex-item__gloss { grid-area:gloss; align-self:start; color:var(--ink-muted); font-size:.78rem; line-height:1.3; }

.lex-lemma { font-family:var(--font-scripture); font-weight:600; font-size:clamp(2.4rem,7vw,3.6rem); line-height:1.1; margin:0; }
.lex-translit { font-style:italic; color:var(--ink-soft); font-size:1.15rem; margin-top:.3rem; }
.lex-inline { font-family:var(--font-scripture); }

.lex-def { border:1px solid var(--rule); border-radius:var(--radius-sm); overflow:hidden; max-width:44rem; }
.lex-def__row { display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.8rem 1rem; border-top:1px solid var(--rule); }
.lex-def__row:first-child { border-top:none; }
.lex-def__k { font-weight:700; font-size:.75rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; padding-top:.1rem; }
.lex-def__v { color:var(--ink); }

.lex-facts { display:grid; grid-template-columns:auto 1fr; gap:.35rem .8rem; margin:.4rem 0 1rem; font-size:.9rem; }
.lex-facts dt { color:var(--ink-muted); font-weight:600; }
.lex-facts dd { margin:0; color:var(--ink); }

.cnc-list { display:flex; flex-direction:column; max-width:50rem; }
.cnc-line { display:block; padding:.85rem 0; border-top:1px solid var(--rule); color:var(--ink-soft); }
.cnc-line:first-child { border-top:none; }
.cnc-line:hover { text-decoration:none; }
.cnc-ref { display:block; font-family:var(--font-ui); font-weight:800; font-size:.8rem; color:var(--accent); margin-bottom:.2rem; }
.cnc-line:hover .cnc-ref { color:var(--accent-strong); }
.cnc-text { font-family:var(--font-scripture); line-height:1.55; }
.cnc-hit { color:var(--accent-strong); font-weight:700; background:color-mix(in srgb, var(--accent) 13%, transparent); border-radius:3px; padding:0 .12em; }

@media (max-width:640px){
  .lex-def__row { grid-template-columns:1fr; gap:.15rem; }
  .lex-grid { grid-template-columns:1fr; }
}

/* ── Interlinear (verse page — reverse interlinear word cards) ── */
.itl { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.55rem; }
.itl-w { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.18rem; padding:.6rem .7rem; border:1px solid var(--rule); border-radius:12px; background:var(--surface); min-width:3.4rem; }
.itl-w:hover { border-color:var(--accent); text-decoration:none; box-shadow:0 5px 16px -11px var(--accent); }
.itl-en { font-family:var(--font-ui); font-weight:700; font-size:.9rem; color:var(--ink); line-height:1.35; }
.itl-org { font-family:var(--font-scripture); font-size:1.15rem; color:var(--accent-strong); line-height:1.3; margin-top:.05rem; }
.itl-tr { font-style:italic; font-size:.76rem; color:var(--ink-soft); }
.itl-code { font-size:.64rem; font-weight:700; color:var(--ink-muted); letter-spacing:.02em; }
/* Plain connective words (no Strong's): no card, and top-aligned so their text
   sits on the same line as the tagged cards' English word — reads as running text. */
.itl-w--plain { border-color:transparent; background:none; padding:.6rem .3rem 0; min-width:0; }
.itl-w--plain .itl-en { font-weight:400; color:var(--ink-soft); }

/* ── Cookie consent bar ───────────────────────────────────────── */
.consent-bar { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200; max-width:44rem; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; justify-content:space-between;
  background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:.9rem 1.1rem;
  box-shadow:0 12px 40px -12px rgba(0,0,0,.28); }
.consent-bar__text { margin:0; font-size:.88rem; color:var(--ink-soft); flex:1 1 16rem; }
.consent-bar__btns { display:flex; gap:.5rem; flex:none; }
@media (max-width:520px){ .consent-bar { flex-direction:column; align-items:stretch; text-align:center; } .consent-bar__btns { justify-content:center; } }

/* ── Store / shop ─────────────────────────────────────────────── */
.store-cats { display:flex; flex-wrap:wrap; gap:.5rem; }
.store-cat { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border:1px solid var(--rule); border-radius:999px; font-weight:600; font-size:.9rem; color:var(--ink-soft); background:var(--surface); }
.store-cat:hover { border-color:var(--accent); color:var(--accent-strong); text-decoration:none; }
.store-cat.is-active { background:var(--accent); border-color:var(--accent); color:#fff; }
.store-cat span { font-size:.75rem; opacity:.7; }
.store-flash { background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent-strong); padding:.7rem 1rem; border-radius:10px; font-size:.9rem; }

.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; }
.prod-card { display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--surface); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.prod-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 12px 30px -16px var(--accent); text-decoration:none; }
.prod-card__cover { position:relative; aspect-ratio:4/3; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,var(--surface)), var(--surface)); display:grid; place-items:center; overflow:hidden; }
.prod-card__cover img { width:100%; height:100%; object-fit:cover; }
.prod-card__ph { color:color-mix(in srgb,var(--accent) 55%, transparent); }
.prod-card__badge { position:absolute; top:.6rem; left:.6rem; background:var(--accent); color:#fff; font-size:.7rem; font-weight:800; padding:.2rem .5rem; border-radius:6px; letter-spacing:.02em; }
.prod-card__body { padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.2rem; flex:1; }
.prod-card__type { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); }
.prod-card__name { font-family:var(--font-display); font-size:1.02rem; font-weight:800; color:var(--ink); line-height:1.25; }
.prod-card__sum { font-size:.82rem; color:var(--ink-muted); flex:1; }
.prod-card__price { font-weight:800; color:var(--ink); margin-top:.3rem; }
.prod-card__price.is-free { color:var(--accent); }

.prod-detail { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2rem; align-items:start; }
.prod-detail__media { border:1px solid var(--rule); border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,var(--surface)), var(--surface)); display:grid; place-items:center; }
.prod-detail__media img { width:100%; height:100%; object-fit:cover; }
.prod-detail__ph { color:color-mix(in srgb,var(--accent) 55%, transparent); }
.prod-detail__price { font-size:1.6rem; font-weight:800; color:var(--ink); }
.prod-detail__price.is-free { color:var(--accent); }
.prod-form { border:1px solid var(--rule); border-radius:14px; padding:1.1rem 1.2rem; background:var(--surface); }
.prod-form__l { display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:.3rem; }
.prod-form input { width:100%; border:1px solid var(--rule); border-radius:10px; padding:.65rem .8rem; font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); }
.prod-form input:focus { outline:none; border-color:var(--accent); }
.prod-form__err { color:var(--danger,#E11D48); font-size:.82rem; margin-top:.3rem; }

.order-done { text-align:center; padding:1rem 0 .5rem; }
.order-done__ico { display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); margin-bottom:.5rem; }
.dl-list { display:flex; flex-direction:column; gap:.6rem; }
.dl-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--rule); border-radius:12px; padding:.8rem 1rem; background:var(--surface); }
.dl-row__name { font-weight:700; color:var(--ink); }
.dl-row__meta { font-size:.85rem; color:var(--ink-muted); }
@media (max-width:640px){ .prod-detail { grid-template-columns:1fr; } }

/* ── Blog / articles ──────────────────────────────────────────── */
.art-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.2rem; }
.art-grid--feat { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.art-card { display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--surface); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.art-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 12px 30px -16px var(--accent); text-decoration:none; }
.art-card__cover { aspect-ratio:16/9; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,var(--surface)), var(--surface)); display:grid; place-items:center; overflow:hidden; }
.art-card__cover img { width:100%; height:100%; object-fit:cover; }
.art-card__ph { color:color-mix(in srgb,var(--accent) 50%, transparent); }
.art-card__body { padding:.9rem 1.05rem 1.05rem; display:flex; flex-direction:column; gap:.25rem; flex:1; }
.art-card__cat { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); }
.art-card__title { font-family:var(--font-display); font-size:1.06rem; font-weight:800; color:var(--ink); line-height:1.25; }
.art-card__excerpt { font-size:.85rem; color:var(--ink-muted); flex:1; }
.art-card__meta { font-size:.78rem; color:var(--ink-muted); margin-top:.2rem; }

.art-byline { color:var(--ink-muted); font-size:.9rem; }
.art-hero { width:100%; border-radius:16px; border:1px solid var(--rule); }
.art-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.art-tag { display:inline-block; padding:.3rem .7rem; border:1px solid var(--rule); border-radius:999px; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.art-tag:hover { border-color:var(--accent); color:var(--accent-strong); text-decoration:none; }

.cmt-list { display:flex; flex-direction:column; gap:.9rem; }
.cmt { border:1px solid var(--rule); border-radius:12px; padding:.85rem 1rem; background:var(--surface); }
.cmt__head { font-size:.9rem; }
.cmt__body { margin:.35rem 0 0; color:var(--ink-soft); white-space:pre-wrap; }
.cmt-form { border:1px solid var(--rule); border-radius:14px; padding:1.1rem 1.2rem; background:var(--surface); }
.cmt-form__row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.cmt-form input, .cmt-form textarea { width:100%; border:1px solid var(--rule); border-radius:10px; padding:.6rem .8rem; font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); }
.cmt-form input:focus, .cmt-form textarea:focus { outline:none; border-color:var(--accent); }
@media (max-width:520px){ .cmt-form__row { grid-template-columns:1fr; } }

/* ── Announcement banner ──────────────────────────────────────── */
.announce-bar { background:color-mix(in srgb, var(--accent) 11%, var(--surface)); border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, transparent); color:var(--ink); font-size:.9rem; padding:.5rem 1rem; display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; text-align:center; }
.announce-bar__link { color:var(--accent-strong); font-weight:700; }
.announce-bar__x { background:none; border:none; color:var(--ink-muted); font-size:1.25rem; line-height:1; cursor:pointer; padding:0 .3rem; }
.announce-bar__x:hover { color:var(--ink); }

/* ── Homepage promo strip (admin-editable sales lever) ────────────── */
.home-promo { display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; text-align:center;
  margin:0 auto; max-width:52rem; padding:.85rem 1.25rem; border-radius:14px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); color:var(--ink); font-weight:600;
  text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; }
a.home-promo:hover { transform:translateY(-1px); box-shadow:0 8px 24px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.home-promo--flat { cursor:default; }
.home-promo__ico { color:var(--accent-strong); flex:none; }
.home-promo__text { flex:1 1 auto; min-width:0; }
.home-promo__cta { display:inline-flex; align-items:center; gap:.3rem; color:var(--accent-strong); font-weight:700; white-space:nowrap; }

/* ── Bible timeline ───────────────────────────────────────────────── */
.timeline-answer { margin:1.25rem 0 .5rem; padding:1rem 1.25rem; border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius:0 12px 12px 0; }
.timeline-answer p { margin:0; font-size:1.02rem; line-height:1.6; }
.timeline-eras__tbl { width:100%; border-collapse:collapse; font-size:.94rem; }
.timeline-eras__tbl th, .timeline-eras__tbl td { padding:.55rem .75rem; text-align:left; border-bottom:1px solid var(--rule); }
.timeline-eras__tbl th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:700; }
.timeline-eras__tbl td:last-child, .timeline-eras__tbl th:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.timeline-eras__tbl a { color:var(--accent-strong); font-weight:600; }
.timeline-jump { position:sticky; top:64px; z-index:5; margin:1.75rem -1rem 1.5rem; padding:.6rem 1rem; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:thin; }
.timeline-jump a { flex:none; display:inline-flex; align-items:center; min-height:44px; padding:.35rem .8rem; border-radius:999px; font-size:.84rem; font-weight:600; color:var(--ink-soft); border:1px solid var(--rule); white-space:nowrap; }
.timeline-jump a:hover { color:var(--accent-strong); border-color:var(--accent); text-decoration:none; }
.timeline-era { margin-top:2.25rem; scroll-margin-top:8rem; }
.timeline-era__h { font-size:1.35rem; margin:0 0 1rem; padding-bottom:.4rem; border-bottom:2px solid var(--accent); display:inline-block; }
.timeline-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.timeline-item { margin:0; }
.timeline-event { display:flex; gap:1rem; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--rule); border-radius:12px; transition:border-color .12s; scroll-margin-top:8rem; }
.timeline-event:hover { border-color:var(--accent); }
.timeline-event__date { flex:none; width:5.5rem; font-weight:800; font-size:.86rem; color:var(--accent-strong); font-variant-numeric:tabular-nums; padding-top:.2rem; }
.timeline-event__body { min-width:0; flex:1; }
.timeline-event__title { font-size:1.05rem; margin:0 0 .25rem; line-height:1.3; }
.timeline-event__title a { color:var(--ink); }
.timeline-event__title a:hover { color:var(--accent-strong); text-decoration:none; }
.timeline-event__refs { margin:.2rem 0 0; font-size:.86rem; color:var(--ink-muted); }
.timeline-event__refs a { color:var(--ink-soft); border-bottom:1px solid var(--rule); }
.timeline-event__refs a:hover { color:var(--accent-strong); border-color:var(--accent); text-decoration:none; }
.timeline-event__meta { margin:.35rem 0 0; font-size:.78rem; color:var(--ink-muted); display:flex; gap:1rem; flex-wrap:wrap; }
.timeline-event__meta span { display:inline-flex; align-items:center; gap:.25rem; }
.timeline-faq { margin-top:2.5rem; }
.timeline-note { margin-top:2rem; padding:1rem 1.25rem; border:1px dashed var(--rule); border-radius:12px; color:var(--ink-soft); font-size:.9rem; }
.timeline-note strong { color:var(--ink); }
.timeline-passage { margin-top:.6rem; }
.timeline-passage__ref { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border:1px solid var(--rule); border-radius:999px; font-weight:700; font-size:.9rem; color:var(--accent-strong); }
.timeline-passage__ref:hover { border-color:var(--accent); text-decoration:none; }
.timeline-passage__q { margin:.5rem 0 0; padding:.65rem 1rem; border-left:2px solid var(--rule); font-family:var(--font-scripture); font-size:1rem; color:var(--ink-soft); }
.timeline-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.timeline-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .65rem; border:1px solid var(--rule); border-radius:999px; font-size:.78rem; color:var(--ink-soft); background:var(--surface); }

/* ── Reading-plan progress tracker ────────────────────────────────── */
.plan-track { background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:1.25rem 1.35rem; }
.plan-progress__bar { height:9px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, var(--surface)); overflow:hidden; }
.plan-progress__bar span { display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .25s ease; }
.plan-progress__meta { margin-top:.6rem; font-size:.92rem; color:var(--ink-soft); }
.plan-track__actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.plan-track__actions form { margin:0; }
.plan-signin p { margin:0; color:var(--ink-soft); }
.plan-days { display:flex; flex-direction:column; gap:.4rem; }
.plan-day { display:flex; align-items:flex-start; gap:.85rem; padding:.75rem .9rem; background:var(--surface); border:1px solid var(--rule); border-radius:12px; scroll-margin-top:5rem; }
.plan-day.is-today { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan-day.is-done { background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.plan-day__check { margin:0; flex:none; }
.plan-day__box { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; border:1.5px solid var(--rule); background:var(--surface); color:transparent; cursor:pointer; transition:all .12s; }
.plan-day__box:hover { border-color:var(--accent); }
.plan-day.is-done .plan-day__box { background:var(--accent); border-color:var(--accent); color:#fff; }
.plan-day__box.is-static { cursor:default; }
.plan-day__body { display:flex; flex-direction:column; min-width:0; }
.plan-day__num { font-weight:700; font-size:.85rem; color:var(--ink-muted); display:flex; align-items:center; gap:.4rem; }
.plan-day.is-done .plan-day__num { color:var(--accent-strong); }
.plan-day__today { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:var(--accent); padding:.1rem .4rem; border-radius:5px; }
.plan-day__read { color:var(--ink); }
.plan-day__read a { color:var(--ink); border-bottom:1px solid var(--rule); }
.plan-day__read a:hover { color:var(--accent-strong); border-color:var(--accent); text-decoration:none; }
.plan-mine-row { display:block; background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.15rem; color:var(--ink); }
.plan-mine-row:hover { border-color:var(--accent); text-decoration:none; }
.plan-mine-row__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }

/* ── Ad slot (below content only — never the reading column, SOT §8.4) ── */
.ad-slot { margin:2rem auto; max-width:728px; text-align:center; }
.ad-slot__label { display:block; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.3rem; }
.ad-slot ins { min-height:90px; }

/* ── Daily devotionals ────────────────────────────────────────────── */
.devotional-feature { display:block; text-align:left; }
.devotional-feature:hover { text-decoration:none; border-color:var(--accent); }
.devotional-list { display:flex; flex-direction:column; gap:.5rem; }
.devotional-row { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--rule); border-radius:12px; color:var(--ink); transition:border-color .12s, transform .12s; }
.devotional-row:hover { text-decoration:none; border-color:var(--accent); transform:translateX(2px); }
.devotional-row__date { flex:none; width:3rem; text-align:center; font-weight:800; line-height:1.05; color:var(--accent-strong); }
.devotional-row__date small { display:block; font-size:.7rem; font-weight:600; color:var(--ink-muted); }
.devotional-row__body { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.devotional-row__title { font-weight:700; }
.devotional-row__body .muted { font-size:.85rem; }
.devotional-row__arr { flex:none; color:var(--ink-muted); }
.devotional-verse-ref { display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; padding:.35rem .75rem; border:1px solid var(--rule); border-radius:999px; font-weight:600; font-size:.9rem; color:var(--accent-strong); }
.devotional-verse-ref:hover { border-color:var(--accent); text-decoration:none; }
.crumbs { font-size:.82rem; color:var(--ink-muted); margin-bottom:.7rem; }
.crumbs a { color:var(--ink-muted); } .crumbs a:hover { color:var(--accent-strong); }
.devotional-keyverse { margin:0; padding:1.4rem 1.5rem; border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius:0 14px 14px 0; }
.devotional-keyverse blockquote { margin:0; font-family:var(--font-scripture); font-size:1.3rem; line-height:1.6; color:var(--ink); }
.devotional-keyverse .dk-vn { font-family:var(--font-ui); font-size:.65em; font-weight:700; color:var(--accent-strong); vertical-align:super; margin-right:.15em; }
.devotional-keyverse figcaption { margin-top:.7rem; font-weight:700; font-size:.95rem; }
.devotional-keyverse figcaption a { color:var(--accent-strong); }
.devotional-read-passage { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1rem; border:1px solid var(--rule); border-radius:12px; font-weight:600; font-size:.92rem; color:var(--ink); }
.devotional-read-passage:hover { border-color:var(--accent); text-decoration:none; }
.devotional-reflect { background:var(--surface); border:1px dashed color-mix(in srgb, var(--accent) 40%, var(--rule)); border-radius:14px; padding:1.1rem 1.25rem; }
.devotional-reflect .eyebrow { margin-bottom:.3rem; }
.devotional-reflect p:last-child { font-size:1.05rem; font-weight:600; color:var(--ink); }
.devotional-prayer { background:color-mix(in srgb, var(--accent) 6%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius:14px; padding:1.1rem 1.25rem; font-style:italic; color:var(--ink-soft); }
.devotional-prayer .eyebrow { font-style:normal; margin-bottom:.3rem; }
.devotional-nav { display:flex; align-items:stretch; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--rule); }
.devotional-nav a { display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); font-weight:700; max-width:48%; }
.devotional-nav a:hover { color:var(--accent-strong); text-decoration:none; }
.devotional-nav__next { margin-left:auto; text-align:right; }
.devotional-nav span small { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); }
.devotional-recent { margin-top:2.5rem; }

/* ── Modal popup ──────────────────────────────────────────────────── */
.fob-popup { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.fob-popup__backdrop { position:absolute; inset:0; background:rgba(20,18,30,.55); opacity:0; transition:opacity .2s ease; }
.fob-popup.is-open .fob-popup__backdrop { opacity:1; }
.fob-popup__card { position:relative; width:100%; max-width:26rem; background:var(--surface); border:1px solid var(--rule); border-radius:18px;
  padding:2rem 1.75rem 1.75rem; box-shadow:0 24px 60px -20px rgba(20,18,30,.5); text-align:center;
  transform:translateY(12px) scale(.98); opacity:0; transition:transform .22s ease, opacity .22s ease; }
.fob-popup.is-open .fob-popup__card { transform:none; opacity:1; }
.fob-popup__x { position:absolute; top:.6rem; right:.75rem; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--ink-muted); cursor:pointer; padding:.2rem .4rem; }
.fob-popup__x:hover { color:var(--ink); }
.fob-popup__h { font-size:1.4rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .5rem; color:var(--ink); }
.fob-popup__body { color:var(--ink-muted); margin:0 0 1.25rem; line-height:1.55; }
.fob-popup__form { display:flex; flex-direction:column; gap:.6rem; }
.fob-popup__form input[type=email] { width:100%; padding:.7rem .9rem; border:1px solid var(--rule); border-radius:10px; font-size:1rem; background:var(--surface); color:var(--ink); }
.fob-popup__form .btn { width:100%; }
.fob-popup__cta { display:inline-block; margin-top:.25rem; }
.fob-popup__fine { font-size:.75rem; color:var(--ink-muted); margin:.7rem 0 0; }