/* Better Verses design system
   Two typefaces: Inter for the interface, Source Serif for Scripture. One accent, deep evergreen, that means
   "go" and appears on the primary action. Neutrals are warm ivory and stone, so the page reads as paper rather
   than software. Tokens are named as roles (surface / on-surface / primary) and components never use a literal
   hex. 48px touch targets, visible focus, reduced-motion respected. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../inter.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../source-serif.woff2) format('woff2'); }

:root {
  /* Color roles, light: Bible / paper / nature. */
  --surface: #FBFAF6;                 /* warm ivory */
  --surface-low: #F2F1EB;             /* pale stone */
  --surface-high: #E7E6DE;
  --on-surface: #1C1D1A;              /* charcoal            16.0:1 */
  --on-surface-variant: #656A62;      /* muted olive-gray     5.3:1 */
  --outline: #9A9E95;
  --outline-variant: #E0DFD6;
  --primary: #365C45;                 /* deep olive evergreen 7.5:1 */
  --on-primary: #FFFFFF;
  --primary-container: #DDE5D7;       /* light moss */
  --on-primary-container: #14301F;
  --primary-ink: #2C4C39;             /* links, references    9.3:1 */
  --red-letter: #A4302A;              /* words of Jesus       6.6:1 */
  --focus: var(--primary);

  --bg: var(--surface); --bg-2: var(--surface-low); --bg-3: var(--surface-high);
  --ink: var(--on-surface); --ink-2: var(--on-surface-variant); --ink-3: var(--outline);
  --line: var(--outline-variant); --accent: var(--primary); --accent-ink: var(--primary-ink);
  --on-accent: var(--on-primary); --accent-soft: var(--primary-container);

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-verse: 'Source Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --fs-body: 17px;
  --lh-body: 1.5;
  --fs-verse: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);      /* ~25–32px */
  --lh-verse: 1.38;

  --narrow: 34rem;   /* ~578px: interactive screens */
  --wide: 42rem;     /* ~714px: reading pages */

  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --tap: 48px;
  --state-hover: 8%;
  --state-press: 12%;
  --dur: 200ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #15171A; --surface-low: #1E2124; --surface-high: #2A2E31;
    --on-surface: #E9E8E2; --on-surface-variant: #B0B4AA; --outline: #7E837A; --outline-variant: #30352F;
    --primary: #9FC7AC; --on-primary: #0B2617; --primary-container: #24402F; --on-primary-container: #DDE5D7; --primary-ink: #B8D6C2;
    --red-letter: #F0A19A; --focus: var(--primary);
  }
}
:root[data-theme="dark"] {
  --surface: #15171A; --surface-low: #1E2124; --surface-high: #2A2E31;
  --on-surface: #E9E8E2; --on-surface-variant: #B0B4AA; --outline: #7E837A; --outline-variant: #30352F;
  --primary: #9FC7AC; --on-primary: #0B2617; --primary-container: #24402F; --on-primary-container: #DDE5D7; --primary-ink: #B8D6C2;
  --red-letter: #F0A19A; --focus: var(--primary);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-body); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  letter-spacing: -0.01em;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 .5rem; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem); }
h2 { font-size: 1.45rem; letter-spacing: -0.02em; margin-top: 2.25rem; }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; margin-top: 1.5rem; font-weight: 600; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
small, .muted { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -3rem; background: var(--accent); color: var(--on-accent); padding: .5rem .9rem; border-radius: var(--r-sm); z-index: 10; }
.skip:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Layout */
.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--narrow)); }
main { padding: 1.5rem 0 4rem; }
.section { margin-top: 3rem; }
.section--tight { margin-top: 1.75rem; }
.finder__tag { font-size: .9rem; color: var(--ink-2); margin: .25rem 0 0; }
.finder__tag strong { font-weight: 600; color: var(--ink-2); }
.section > h2:first-child { margin-top: 0; }

/* App bar */
.bar { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); z-index: 5; }
.bar__in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 1rem; }
.brand { white-space: nowrap; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; min-height: var(--tap); }
.brand__mark { width: 22px; height: 22px; color: var(--accent); flex: none; }
.nav { display: flex; gap: .25rem; }
.nav a { color: var(--ink-2); text-decoration: none; padding: .55rem .7rem; border-radius: var(--r-sm); min-height: var(--tap); display: inline-flex; align-items: center; font-size: .95rem; }
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--on-surface) var(--state-hover), transparent); }
.nav a[aria-current="page"] { color: var(--on-primary-container); background: var(--primary-container); }

/* Hero */
.hero { padding-top: 2.25rem; }
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 { margin-bottom: .4rem; }
.hero__dek { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 1.4rem; }

/* Search field */
.finder { display: grid; gap: .75rem; }
.field { position: relative; }
.field input {
  width: 100%; font: inherit; font-size: 1.05rem; font-weight: 500; color: var(--ink);
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: .95rem 1.1rem; min-height: 56px; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input::placeholder { color: var(--ink-2); opacity: 1; font-weight: 400; }
.field input:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-soft); }
.finder__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .7rem 1.2rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; background: var(--bg-2); color: var(--ink);
  text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; cursor: pointer; user-select: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--on-surface) var(--state-hover), var(--bg-2)); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.finder .btn--primary { min-height: 54px; padding-inline: 1.6rem; font-size: 1.05rem; }
.btn--primary:hover { background: color-mix(in srgb, var(--on-primary) var(--state-hover), var(--primary)); }
.btn--primary:active { background: color-mix(in srgb, var(--on-primary) var(--state-press), var(--primary)); }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--ghost:hover { background: color-mix(in srgb, var(--on-surface) var(--state-hover), transparent); }
.btn--link { background: none; border: 0; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; padding-inline: .5rem; font-weight: 500; }
.btn--link:hover { background: none; text-decoration-thickness: 2px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .95rem;
  border-radius: var(--r-pill); background: var(--bg-2); border: 0;
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover { background: color-mix(in srgb, var(--on-surface) var(--state-hover), var(--bg-2)); text-decoration: none; }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chips__label { font-size: .9rem; color: var(--ink-2); margin: 1rem 0 .5rem; }
.chips--quiet { margin-top: 1.25rem; }
.chips--quiet .chip { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.chips--quiet .chip:hover { background: var(--bg-2); color: var(--ink); }

/* Verse card */
.verse {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  contain: layout paint;
  padding: 1.35rem 1.35rem 1.15rem; margin: 1.25rem 0;
}
.verse--result { animation: rise .45s var(--ease-out) both; background: var(--bg-2); border: 0; box-shadow: 0 1px 0 var(--line), 0 12px 40px -18px rgba(0,0,0,.25); padding: 1.6rem 1.5rem 1.35rem; margin-top: 1.5rem; }
.verse--result .verse__text { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.25rem); }
.verse--result .verse__ref { font-size: 1.05rem; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.verse__for { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: .6rem; }
.verse__ref { font-size: 1rem; font-weight: 600; color: var(--accent-ink); margin: 0 0 .5rem; }
.verse__text { font-family: var(--font-verse); font-size: var(--fs-verse); line-height: var(--lh-verse); font-weight: 420; margin: 0 0 .75rem; letter-spacing: -0.005em; text-wrap: pretty; }
.verse__text q { quotes: none; }
.verse__tr { font-size: .82rem; color: var(--ink-2); margin: 0; }
.verse__why { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.verse__why h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--ink-2); font-weight: 600; }
.verse__why p { font-size: .98rem; margin: 0; }
.verse__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.verse__actions .btn { padding-inline: 1rem; }
.verse__more { margin-top: 1rem; font-size: .95rem; }
.verse__more a { font-weight: 600; }

/* Article verse list (topic pages) */
.vlist { list-style: none; padding: 0; margin: 0; }
.vlist > li { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.vlist > li:first-child { border-top: 0; padding-top: .5rem; }
.vlist .verse__text { font-size: 1.2rem; line-height: 1.45; }
.vlist .verse__why { border: 0; padding-top: 0; margin-top: .7rem; }

/* Cards / lists */
.cards { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0; margin: 0; list-style: none; }
.card {
  display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1rem .95rem; color: var(--ink); text-decoration: none; min-height: 88px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { background: var(--accent-soft); text-decoration: none; }
.card:active { transform: scale(.985); }
.card strong { display: block; font-weight: 650; margin-bottom: .2rem; }
.card span { font-size: .9rem; color: var(--ink-2); }
.card--sit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--tap); padding: .85rem 1rem; }
.card--sit strong { margin: 0; }
.card--sit .arrow { color: var(--ink-3); flex: none; }
.list { list-style: none; padding: 0; margin: 0; }
.list li + li { margin-top: .15rem; }
.list a { display: inline-flex; align-items: center; min-height: var(--tap); }

.related { margin-top: 2.5rem; }
.related h2 { font-size: 1.1rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.related a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Daily block */
.daily { border: 1.5px solid var(--accent-soft); background: linear-gradient(180deg, var(--accent-soft) 0, var(--bg-2) 60%); border-radius: var(--r-lg); padding: 1.35rem; }
.daily .verse__for { color: var(--accent-ink); }
.daily__q { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .98rem; }
.daily__q strong { display: block; font-size: .9rem; color: var(--ink-2); font-weight: 600; margin-bottom: .25rem; }

/* Trust callout */
.trust { background: var(--bg-2); border-radius: var(--r-md); padding: 1.1rem 1.2rem; font-size: .95rem; color: var(--ink-2); margin-top: 2rem; }
.trust strong { color: var(--ink); }
.trust--band { margin-top: 3.5rem; padding: 1.6rem 1.4rem; }
.trust--band h2 { margin: 0 0 .4rem; font-size: 1.2rem; color: var(--ink); }
.trust--band p { color: var(--ink-2); }

/* Safety note */
.note { border-left: 3px solid var(--accent); padding: .6rem 0 .6rem 1rem; margin: 1.25rem 0; color: var(--ink-2); font-size: .95rem; }

/* Breadcrumbs */
.crumbs { font-size: .85rem; color: var(--ink-2); margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: .3rem; color: var(--ink-3); }

/* Picks table (occasion pages) */
.picks { display: grid; gap: .5rem; padding: 0; margin: 1rem 0 0; list-style: none; }
.picks li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--line); }
.picks li:first-child { border-top: 0; }
.picks .kind { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.wording { padding-left: 1.1rem; margin: .5rem 0 0; }
.wording li { margin-bottom: .5rem; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: .9rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: var(--tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1rem; color: var(--ink-2); }

/* Prose pages */
.prose h2 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .35rem; }
.prose .todo { background: var(--bg-3); border-radius: var(--r-sm); padding: .15rem .45rem; font-size: .85rem; font-weight: 600; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 8px); background: var(--ink); color: var(--bg); padding: .65rem 1rem; border-radius: var(--r-pill); font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index: 20; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Ad slots: rendered only when site.config ads.enabled is true. Reserved height prevents layout shift. */
.ad-slot { min-height: 100px; margin: 2rem 0; }
.ad-slot-inline { min-height: 250px; }
.ad-slot-footer { min-height: 90px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom)); font-size: .9rem; color: var(--ink-2); }
.foot ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.foot a { color: var(--ink-2); text-decoration: none; display: inline-flex; min-height: var(--tap); align-items: center; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot p { margin: 0 0 .25rem; }

/* 404 / states */
.state { text-align: left; padding: 1rem 0; }
.state .btn { margin-right: .5rem; margin-bottom: .5rem; }

@media (max-width: 480px) {
  /* One big primary action on a phone, like a native app. */
  .finder__row .btn--primary { flex: 1 1 100%; min-height: 56px; font-size: 1.1rem; }
  .finder__row { row-gap: .25rem; }
  .nav a { padding-inline: .55rem; font-size: .9rem; }
  .verse { padding: 1.15rem 1.1rem 1rem; border-radius: var(--r-md); }
  .picks li { grid-template-columns: 1fr; gap: .15rem; }
}

#result, #lead-verse, #today, #random { scroll-margin-top: 72px; }

/* Red letter: words of Jesus */
.rl { color: var(--red-letter); }
.rl-key { color: var(--red-letter); }
@media print { .rl { color: #B3261E; } }