/* Generated from src/lib/tokens.mjs by scripts/build.mjs. */
:root { --bg: #F4F5F6; --surface: #FFFFFF; --text: #26333F; --text2: #5E7284; --accent: #456C83; --accent-text: #456C83; --wash: #E5EBF0; --rule: #D9DEE3; --scrim: rgba(38, 51, 63, 0.4); --skeleton: #E3E8EC; --ref-bg: #354A5B; --ref-surface: #2F4353; --ref-text: #F4F6F8; --ref-text2: #C7D2DC; --ref-accent: #A4B7C7; --ref-accent-text: #B3C4D1; --ref-rule: #526777; --brand-ink: #0F1F2B; --brand-accent: #5F7F94; --brand-sun: #5F7F94; --brand-horizon: #273F52; --home-bg: #F4F0EB; --home-surface: #EDE9E3; --home-text2: #566A7B; --home-rule: #D8D2CA; --tone-matthew: #4D7088; --tone-mark: #6F8FA3; --tone-luke: #3D5F77; --tone-john: #5D7F95; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #12191F; --surface: #19222A; --text: #E3E8EC; --text2: #9DAEBB; --accent: #8DAEC3; --accent-text: #8DAEC3; --wash: #1F2B35; --rule: #27333D; --scrim: rgba(0, 0, 0, 0.55); --skeleton: #1F2A33; --ref-bg: #243442; --ref-surface: #1E2C38; --ref-text: #EEF2F5; --ref-text2: #B5C3CF; --ref-accent: #9DB4C6; --ref-accent-text: #A9BFD0; --ref-rule: #3B4E5E; --brand-ink: #F5F8FA; --brand-accent: #87ADC5; --brand-sun: #6D9BB7; --brand-horizon: #F5F8FA; --home-bg: #12191F; --home-surface: #19222A; --home-text2: #9DAEBB; --home-rule: #2A3640; --tone-matthew: #9BB7CA; --tone-mark: #6E8DA2; --tone-luke: #B4CADA; --tone-john: #84A3B8; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #12191F; --surface: #19222A; --text: #E3E8EC; --text2: #9DAEBB; --accent: #8DAEC3; --accent-text: #8DAEC3; --wash: #1F2B35; --rule: #27333D; --scrim: rgba(0, 0, 0, 0.55); --skeleton: #1F2A33; --ref-bg: #243442; --ref-surface: #1E2C38; --ref-text: #EEF2F5; --ref-text2: #B5C3CF; --ref-accent: #9DB4C6; --ref-accent-text: #A9BFD0; --ref-rule: #3B4E5E; --brand-ink: #F5F8FA; --brand-accent: #87ADC5; --brand-sun: #6D9BB7; --brand-horizon: #F5F8FA; --home-bg: #12191F; --home-surface: #19222A; --home-text2: #9DAEBB; --home-rule: #2A3640; --tone-matthew: #9BB7CA; --tone-mark: #6E8DA2; --tone-luke: #B4CADA; --tone-john: #84A3B8; color-scheme: dark; }
:root { --preview-light-bg: #F4F5F6; --preview-light-text: #26333F; --preview-dark-bg: #12191F; --preview-dark-text: #E3E8EC; }
/* GospelSesh — gunmetal visual system: scripture and reference environments.
   Colour tokens (--bg, --text, --accent-text, …) are generated from
   src/lib/tokens.mjs and prepended by the build. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/source-serif-4-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("fonts/source-serif-4-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter.woff2") format("woff2"); }

:root {
  /* One serif for everything editorial: Source Serif 4, whose optical sizes
     give headings a display cut and scripture a text cut. Scripture keeps its
     own token so the two can be tuned apart. */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --scripture: var(--serif);
  /* Interface, explanations, references and metadata: Inter everywhere, so
     every platform renders the same; system faces are only the fallback. */
  --ui: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-scale: 1;
  --read-size: calc(1.1875rem * var(--font-scale));     /* 19px at 1x */
  --title-scale: calc(1 + (var(--font-scale) - 1) / 2);  /* titles step at half the rate */
  --measure: 36rem;
  --gutter: 1.5rem;
  --header-h: 2.75rem;
  --bar-h: 3.125rem;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
button { font: inherit; color: inherit; }
code { font-size: 0.92em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--text); color: var(--bg); padding: .5rem 1rem; }
.skip:focus { left: .5rem; top: .5rem; }

/* Cross-page fade where the browser supports cross-document view transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

/* ---------- Brand and marks ---------- */
/* Header logo: one inline SVG (src/lib/brand.mjs). It is sized by its cap
   height; --cap is the cap height's share of the SVG's height. */
.logo { display: block; height: calc(var(--logo-cap) / var(--cap)); width: auto; }
.logo-sun { fill: var(--brand-sun); }
.logo-horizon { fill: var(--brand-horizon); }
.logo-gospel { fill: var(--brand-ink); }
.logo-sesh { fill: var(--brand-accent); }
.sunmark { width: 2.75rem; height: 2.75rem; flex: none; }
.sunmark.small { width: 2.25rem; height: 2.25rem; }
.sunmark.tiny { width: 1.25rem; height: 1.25rem; }
.sunmark.large { width: 4.5rem; height: 4.5rem; }
.sunmark .horizon { fill: var(--text2); }
.tone-matthew { fill: var(--tone-matthew); }
.tone-mark { fill: var(--tone-mark); }
.tone-luke { fill: var(--tone-luke); }
.tone-john { fill: var(--tone-john); }

/* ---------- Shared type ---------- */
.eyebrow { margin: 0; font: 500 .8125rem/1.4 var(--ui); color: var(--accent-text); }
.eyebrow.quiet { color: var(--text2); }
.eyebrow-row { display: flex; align-items: center; gap: .625rem; margin: 0; }
.subhead { margin: 0 0 .375rem; font: 600 .8125rem/1.4 var(--ui); letter-spacing: .02em; color: var(--text); }
/* Editorial prose (prefaces, About) is explanation, so it is set in the sans. */
.lead { font: 400 calc(1.0625rem * var(--font-scale))/1.6 var(--ui); margin: 0 0 .875rem; }
.meta { margin: 0; font-size: .8125rem; color: var(--text2); }
.fineprint { color: var(--text2); font-size: .875rem; }
.page-title { margin: .875rem 0 .375rem; font: 400 calc(2.125rem * var(--title-scale))/1.12 var(--serif); letter-spacing: -0.015em; }
.page-subtitle { margin: 2rem 0 .75rem; font: 500 .875rem/1.4 var(--ui); color: var(--text2); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: 0 1.5rem; border-radius: 999px;
  border: 1.5px solid var(--text); color: var(--text); background: transparent;
  font: 600 1rem/1 var(--ui); text-decoration: none; cursor: pointer;
}
.button-primary { background: var(--text); color: var(--bg); }
.text-button { min-height: 2.75rem; padding: 0 .25rem; border: 0; background: none; color: var(--accent-text); font: 600 1rem/1 var(--ui); cursor: pointer; }
.icon-button { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; border-radius: 999px; }
.icon-button.aa { font: 400 1.1875rem/1 var(--serif); }
.chevron { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- App header (non-reader pages) ---------- */
.app-header { display: flex; align-items: center; justify-content: space-between; max-width: 40rem; margin: 0 auto; padding: max(.75rem, env(safe-area-inset-top)) calc(var(--gutter) - .5rem) 0 var(--gutter); min-height: var(--header-h); }
.brand { --logo-cap: 1.125rem; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
@media (min-width: 48rem) { .brand { --logo-cap: 1.3125rem; } }
.back-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-left: -.25rem; color: var(--text); text-decoration: none; font-weight: 500; font-size: .9375rem; }

/* ---------- Main menu ----------
   The approved Mediterranean homepage. A stone arch framing a coastal
   sunrise (src/assets/home/) fills the top of the stage behind the header and
   dissolves into warm ivory; the headline sits on the clear ivory to its left
   on desktop and below an arch-centred band on smaller screens. Homepage
   colours are scoped here so the reader keeps its own palette. */
.page-home {
  --bg: var(--home-bg); --surface: var(--home-surface); --text2: var(--home-text2); --rule: var(--home-rule);
  --frame: 90rem; --gutter-x: var(--gutter); --art-h: clamp(13.5rem, 64vw, 26rem);
  /* Masks: one across, one down, intersected. Dark mode turns the scene into
     a lit window: dimmed, and dark at the top and on the text side, so the
     header and headline always sit on dark ground. */
  --art-x: linear-gradient(#000, #000);
  --art-y: linear-gradient(to bottom, rgb(0 0 0 / .15) 0, #000 26%, #000 58%, transparent 100%);
  --art-filter: none;
  background: var(--bg);
}
/* Dark stops are measured from below the status bar (the safe-area inset,
   0 in a browser), so the header stays on dark ground in the app too. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page-home { --art-filter: brightness(.8) saturate(.9); --art-y: var(--art-y-dark); } }
:root[data-theme="dark"] .page-home { --art-filter: brightness(.8) saturate(.9); --art-y: var(--art-y-dark); }
.page-home { --art-y-dark: linear-gradient(to bottom, transparent 0, transparent env(safe-area-inset-top), #000 calc(env(safe-area-inset-top) + .3 * var(--art-h)), #000 calc(env(safe-area-inset-top) + .58 * var(--art-h)), transparent 100%); }
/* The app fills the whole screen, so its picture is a fifth taller than the
   72vw first tried there (founder, 31 October 2026). A taller picture is a
   closer crop of a wide image, so in the app it starts below the header and
   keeps the whole arch in frame (the arch is the right of the image), with
   only a short fade at the top. `.app` is set by the boot script inside the
   iOS app only. */
@media (max-width: 39.99rem) {
  .app .page-home {
    --art-h: clamp(13.5rem, 86vw, 26rem);
    --art-y: linear-gradient(to bottom, transparent 0, #000 8%, #000 58%, transparent 100%);
    --art-y-dark: linear-gradient(to bottom, transparent 0, #000 10%, #000 58%, transparent 100%);
  }
  .app .home-art img { top: calc(env(safe-area-inset-top) + var(--header-h)); height: var(--art-h); object-position: 100% 50%; }
}
.home-stage { position: relative; isolation: isolate; }
/* The art runs up under the status bar (the app has no browser bar above
   it), so it gains the safe-area inset to keep its visible height. */
.home-art img {
  position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: calc(var(--art-h) + env(safe-area-inset-top));
  object-fit: cover; object-position: 52% 45%; filter: var(--art-filter);
  -webkit-mask-image: var(--art-x), var(--art-y); -webkit-mask-composite: source-in;
  mask-image: var(--art-x), var(--art-y); mask-composite: intersect;
}
.page-home .app-header, .home, .page-home .site-footer { max-width: calc(var(--frame) + 2 * var(--gutter-x)); padding-left: var(--gutter-x); padding-right: var(--gutter-x); }
.page-home .app-header { position: sticky; top: 0; z-index: 20; }
/* The header stays put. Over the artwork it is clear; once the page scrolls it
   gains a full-width translucent bar and a hairline so it reads over text. */
.page-home .app-header::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
  opacity: 0; transition: opacity .2s ease;
}
.page-home .app-header.is-scrolled::before { opacity: 1; }
.home { margin: 0 auto; padding-bottom: 1rem; }

.hero { padding-top: calc(var(--art-h) - 6.25rem); }
.home-title { margin: 0; font: 400 clamp(2rem, 11vw, 3.75rem)/1.04 var(--serif); letter-spacing: -0.032em; color: var(--brand-ink); }
.home-title em { display: block; font-style: italic; letter-spacing: -0.02em; color: var(--brand-accent); }
.home-copy { margin: .875rem 0 0; max-width: 21em; font: 400 clamp(1.0625rem, 4.4vw, 1.1875rem)/1.48 var(--ui); color: var(--text2); text-wrap: pretty; }

/* Search: well-known passages, passage titles and references, suggested as
   you type (src/client/search.js). The list floats on the homepage and sits
   in flow inside the reader's sheet. 1rem text keeps iOS from zooming. */
.search { position: relative; width: 100%; max-width: 26rem; margin-top: 1.25rem; }
.search-icon { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); fill: none; stroke: var(--text2); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.search-input {
  width: 100%; min-height: 3rem; padding: 0 1rem 0 2.75rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, var(--bg)); background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text); font: 400 1rem/1.2 var(--ui); -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--text2); }
.search-input:focus-visible { outline-offset: 2px; border-radius: 999px; }
.search-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .375rem); margin: 0; padding: .375rem; list-style: none;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 12%, var(--bg)); border-radius: 1rem;
  box-shadow: 0 14px 36px rgb(16 31 43 / .14); max-height: min(26rem, 62vh); overflow-y: auto; overscroll-behavior: contain;
}
.search-list.in-sheet { position: static; margin-top: .5rem; box-shadow: none; max-height: none; }
.search-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .125rem; align-items: baseline; padding: .625rem .75rem; border-radius: .625rem; cursor: pointer; }
.search-option[aria-selected="true"] { background: var(--wash); }
@media (hover: hover) { .search-option:hover { background: var(--wash); } }
.search-title { font: 400 1.0625rem/1.3 var(--serif); color: var(--text); }
.is-ref .search-title { font-weight: 500; }
.search-meta { font: 400 .8125rem/1.3 var(--ui); color: var(--text2); white-space: nowrap; }
.search-excerpt { grid-column: 1 / -1; font: 400 .875rem/1.4 var(--ui); color: var(--text2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Gospels: a hairline, then a list on phones, 2 x 2 on tablets, four
   columns with thin separators on desktop. */
.gospels { margin-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--text) 22%, var(--bg)); }
.gospel-list { list-style: none; margin: 0; padding: 0; }
.gospel-list > li { display: flex; }
.gospel-list > li > .gospel-row { flex: 1; }
.gospel-row {
  position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto auto; column-gap: .75rem; row-gap: .25rem;
  grid-template-areas: "num name status go" ". desc desc go" ". len len go"; align-items: baseline; align-content: start;
  padding: 1.125rem 0 1.25rem; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none;
}
.gospel-num { grid-area: num; font: 400 .875rem/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--text2); }
.gospel-row-name { grid-area: name; font: 400 1.875rem/1.08 var(--serif); letter-spacing: -0.024em; color: var(--brand-ink); transition: color .2s ease; }
.gospel-row-desc { grid-area: desc; font: 400 .9375rem/1.4 var(--ui); color: var(--text2); }
.gospel-row-len { grid-area: len; font: 400 .875rem/1.4 var(--ui); color: var(--text2); }
.gospel-row-status { grid-area: status; font: 500 .8125rem/1 var(--ui); color: var(--text2); }
.gospel-row-status.is-resume { color: var(--accent-text); }
.gospel-go { grid-area: go; align-self: center; fill: none; stroke: var(--text2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease), stroke .2s ease; }
.gospel-row-progress { position: absolute; left: 3rem; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.gospel-row:not(.is-started) .gospel-row-progress { display: none; }
.gospel-row:focus-visible { outline-offset: 4px; border-radius: 4px; }
.fill { display: block; height: 100%; width: 0; background: var(--brand-sun); }

/* Bookmarks: saved passages, on the main menu and in the chapter sheet. */
.home-bookmarks { margin-top: 2rem; }
.bookmarks-h { margin: 0 0 .25rem; font: 500 .875rem/1.3 var(--ui); color: var(--text2); }
.bookmark-list { list-style: none; margin: 0; padding: 0; }
.bookmark { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--rule); }
.bookmark-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; padding: .75rem 0; color: var(--text); text-decoration: none; }
.bookmark-title { font: 400 1.0625rem/1.3 var(--serif); color: var(--brand-ink, var(--text)); }
.bookmark-ref { font: 400 .8125rem/1.3 var(--ui); color: var(--text2); }
.bookmark-remove { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text2); cursor: pointer; }
.bookmark-remove svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (hover: hover) {
  .bookmark-link:hover .bookmark-title { color: var(--brand-accent, var(--accent-text)); }
  .bookmark-remove:hover { color: var(--text); background: var(--wash); }
}

@media (hover: hover) {
  .gospel-row:hover .gospel-row-name { color: var(--brand-accent); }
  .gospel-row:hover .gospel-go { stroke: var(--text); transform: translateX(3px); }
}

@media (min-width: 40rem) {
  .page-home { --art-h: clamp(21rem, 50vw, 26rem); }
  .gospel-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

@media (min-width: 70rem) {
  /* The scene spans the stage; it fades in from the left and out at the foot
     so it reads as part of the page, not a picture placed on it. */
  .page-home {
    --gutter-x: clamp(2rem, 5.7vw, 5.5rem); --art-h: min(42.86vw, 51rem);
    --art-x: linear-gradient(to right, transparent 0, rgb(0 0 0 / .55) 14%, #000 28%);
    --art-y: linear-gradient(to bottom, #000 86%, rgb(0 0 0 / .8) 91%, rgb(0 0 0 / .45) 95.5%, rgb(0 0 0 / .12) 98.5%, transparent 100%);
  }
  :root[data-theme="dark"] .page-home {
    --art-x: linear-gradient(to right, transparent 0, transparent 44%, #000 60%);
    --art-y: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, rgb(0 0 0 / .8) 91%, rgb(0 0 0 / .45) 95.5%, rgb(0 0 0 / .12) 98.5%, transparent 100%);
  }
  .home-art img { object-position: right center; }
}
/* From 56rem the full-width scene is used, at its own proportions. */
@media (min-width: 56rem) {
  .page-home { --art-h: 42.86vw; --art-y: linear-gradient(to bottom, rgb(0 0 0 / .15) 0, #000 22%, #000 86%, rgb(0 0 0 / .8) 91%, rgb(0 0 0 / .45) 95.5%, rgb(0 0 0 / .12) 98.5%, transparent 100%); }
  .home-art img { object-position: right center; }
}
@media (min-width: 70rem) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-home {
    --art-x: linear-gradient(to right, transparent 0, transparent 44%, #000 60%);
    --art-y: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, rgb(0 0 0 / .8) 91%, rgb(0 0 0 / .45) 95.5%, rgb(0 0 0 / .12) 98.5%, transparent 100%);
  }
}
@media (min-width: 70rem) {
  .hero { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: calc(var(--art-h) - 3.5rem); padding: 0 0 3rem; }
  .home-title { font-size: min(5.6vw, 6.5rem); }
  .home-copy { margin-top: 1.5rem; font-size: clamp(1.1875rem, 1.5vw, 1.5rem); }
  .search { max-width: 28rem; margin-top: 1.5rem; }
  .gospels { margin-top: 0; }
  .gospel-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .gospel-list > li + li { border-left: 1px solid var(--rule); }
  .gospel-list > li { padding: 2rem clamp(1rem, 2.4vw, 2.25rem) 2.25rem; }
  .gospel-list > li:first-child { padding-left: 0; }
  .gospel-list > li:last-child { padding-right: 0; }
  .gospel-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "num name go" ". desc go" ". len go" ". status ."; padding: 0; border-bottom: 0; row-gap: .375rem; }
  .gospel-row-name { font-size: clamp(2rem, 2.5vw, 2.5rem); margin-bottom: .25rem; }
  .gospel-row-desc { font-size: 1.0625rem; }
  .gospel-row-len { font-size: .9375rem; }
  .gospel-row-status { margin-top: .5rem; }
  .gospel-row-status:empty { display: none; }
  .gospel-row-progress { left: 3.25rem; bottom: -.75rem; }
}

/* ---------- Content pages ---------- */
.page { max-width: 40rem; margin: 0 auto; padding: 1rem var(--gutter) 3rem; }
.translation-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.choice { display: flex; flex-direction: column; justify-content: center; gap: .125rem; min-height: 4.25rem; padding: .75rem 1rem; border-radius: .875rem; border: 1px solid var(--rule); background: transparent; color: var(--text); text-decoration: none; text-align: left; cursor: pointer; }
.choice[aria-current="true"], .choice[aria-checked="true"] { border: 1.5px solid var(--text); }
.choice-title { font-weight: 600; font-size: 1rem; }
.choice-short { font-weight: 500; color: var(--text2); }
.choice-desc { font-size: .8125rem; color: var(--text2); line-height: 1.4; }

.glance { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .625rem .75rem; margin: 1.375rem 0; padding: .875rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: .875rem; line-height: 1.43; }
.glance dt { font-size: .8125rem; font-weight: 500; color: var(--text2); padding-top: .0625rem; }
.glance dd { margin: 0; }
.preface-cta { position: sticky; bottom: 0; margin: 1.5rem calc(var(--gutter) * -1) 0; padding: .875rem var(--gutter) max(1rem, env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: .75rem; }
.translation-line { margin: 0; display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--text2); }
.translation-line a { font-weight: 600; text-decoration: none; }
.preface-actions { display: flex; flex-direction: column; gap: .625rem; }
.preface-actions .button { width: 100%; }
.toc { margin-top: 2.5rem; }
.toc-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.toc-list > li { border-top: 1px solid var(--rule); padding: .875rem 0; }
.toc-chapter { font: 450 1.125rem/1.3 var(--serif); text-decoration: none; color: var(--text); }
.toc-sections { list-style: none; margin: .375rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; }
.toc-sections a { color: var(--text2); text-decoration: none; }
.toc-sections a:hover { color: var(--accent-text); text-decoration: underline; }

.verse-card { margin: 1.5rem 0 0; padding: 0 0 1.25rem; border-bottom: 1px solid var(--rule); }
.verse-card blockquote { margin: 0; font: var(--read-size)/1.6 var(--scripture); }
.verse-card figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--text2); }
.passage-ref { margin: .5rem 0 0; font: 400 .875rem/1.4 var(--ui); color: var(--text2); }
.passage-link .verse-card sup { margin-right: .15em; font: 600 .62em/0 var(--ui); color: var(--text2); vertical-align: .6em; }
.prose { line-height: 1.65; }
.prose h2 { font: 450 1.375rem/1.3 var(--serif); margin: 2rem 0 .5rem; }
.prose h3 { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.notice { padding: .875rem 1rem; border-radius: .75rem; background: var(--wash); }
.site-footer { max-width: 40rem; margin: 0 auto; padding: 2rem var(--gutter) max(2rem, env(safe-area-inset-bottom)); font-size: .8125rem; color: var(--text2); }
.site-footer nav { margin-bottom: .5rem; }
.site-footer a { color: var(--text2); }

/* ---------- Reader ---------- */
/* One passage per page. Each passage is exactly one screen tall and scrolls
   its own text, so moving between passages, up or down, always lands with
   the title in the same place; a long passage is read by scrolling within
   its page, never cut off. */
html:has(.page-reader) { scroll-snap-type: y mandatory; overscroll-behavior-x: none; }
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top) .75rem 0; height: calc(var(--header-h) + env(safe-area-inset-top));
  background: var(--bg);
}
.where { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 .5rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; }
.where-label { overflow: hidden; text-overflow: ellipsis; }
/* Bookmark, Share and Aa, together on the right of the reading bar. */
.topbar-actions { display: flex; align-items: center; flex: none; margin-right: -.25rem; }
.topbar-actions button.icon-button { padding: 0; border: 0; background: none; cursor: pointer; }
.bar-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-bookmark][aria-pressed="true"] .bookmark-icon { fill: currentColor; }
html:not(.js) .topbar [data-bookmark], html:not(.js) .topbar [data-share] { display: none; }
@media (max-width: 22.4rem) { .where-tr { display: none; } }
.where-tr { font-weight: 500; color: var(--text2); white-space: pre; }

.reader { padding: 0; }
.section-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-ref { margin: 0; font: 500 .875rem/1.4 var(--ui); color: var(--text2); }
.prev-chapter { display: inline-flex; align-items: center; gap: .3em; min-height: 2.75rem; margin: -.75rem 0; font: 400 .875rem/1.4 var(--ui); color: var(--text2); text-decoration: none; }
.prev-chapter:hover { color: var(--text); }

.section {
  scroll-snap-align: start; scroll-snap-stop: always;
  height: 100dvh; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none;
  /* Room for the header and the layer bar, which float over every page. */
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 1.25rem) 0 calc(var(--bar-h) + env(safe-area-inset-bottom) + 2rem);
}
.section::-webkit-scrollbar { display: none; }
.section-head { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section-title { margin: .375rem 0 0; font: 500 calc(1.875rem * var(--title-scale))/1.16 var(--serif); letter-spacing: -0.018em; text-wrap: balance; }

/* Horizontal layers: native scroll snapping, so swipes keep the browser's own
   axis locking and momentum; overscroll containment prevents back-swipes. */
.layers { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 1.5rem; transition: height .24s var(--ease); }
.layers::-webkit-scrollbar { display: none; }
.layer { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 var(--gutter); }
.layer > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.layer.is-entering { animation: layer-in .2s var(--ease); }
@keyframes layer-in { from { opacity: .6; } to { opacity: 1; } }

/* ---------- Two environments ----------
   Scripture pages use the reading tokens. Understand and Other accounts use
   the gunmetal reference tokens: inside them the generic tokens are
   re-pointed, so every component works in either environment. Scripture
   quoted inside a reference panel returns to the scripture surface, keeping
   original text visibly distinct from editorial explanation. */
:root {
  --s-bg: var(--bg); --s-surface: var(--surface); --s-text: var(--text); --s-text2: var(--text2);
  --s-rule: var(--rule); --s-accent: var(--accent); --s-accent-text: var(--accent-text); --s-wash: var(--wash);
}
.layer-understand, .layer-accounts, .section[data-env="ref"], .in-reference .topbar, .in-reference .layer-bar {
  --bg: var(--ref-bg); --surface: var(--ref-surface); --text: var(--ref-text); --text2: var(--ref-text2);
  --rule: var(--ref-rule); --accent: var(--ref-accent); --accent-text: var(--ref-accent-text); --wash: var(--ref-surface);
  background-color: var(--bg); color: var(--text);
}
.layer-story, .ot-quote, .account-body {
  --bg: var(--s-bg); --surface: var(--s-surface); --text: var(--s-text); --text2: var(--s-text2);
  --rule: var(--s-rule); --accent: var(--s-accent); --accent-text: var(--s-accent-text); --wash: var(--s-wash);
  color: var(--text);
}
.section, .topbar, .layer-bar { transition: background-color .25s ease, color .25s ease; }
.layer-understand, .layer-accounts { padding-top: .25rem; padding-bottom: 1.5rem; }

.scripture { font: 400 var(--read-size)/1.6 var(--scripture); font-kerning: normal; color: var(--text); text-wrap: pretty; hanging-punctuation: first; font-optical-sizing: auto; }
.scripture p { margin: 0 0 .8em; }
.v:target, .v.is-highlight { background: var(--wash); border-radius: 3px; box-shadow: 0 0 0 .15em var(--wash); }
.translator-note { font: italic .85em/1.5 var(--ui); color: var(--text2); }
/* Optional verse numbers: discreet, and given empty alternative text so screen
   readers do not announce them. */
.show-vn .scripture .v:not(.v-omitted)::before { content: attr(data-v); content: attr(data-v) / ""; font: 500 .58em/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--accent); vertical-align: .5em; margin: 0 .3em 0 .15em; }

/* Understand */
.layer-understand, .layer-accounts { font-size: 1rem; }
.layer-title { margin: .5rem auto .875rem; font: 450 calc(1.625rem * var(--title-scale))/1.2 var(--serif); letter-spacing: -0.01em; }
/* The Understand summary is explanation: sans, a step larger than the notes. */
.dek { font: 400 calc(1.0625rem * var(--font-scale))/1.6 var(--ui); margin: .625rem auto 1.25rem; }
.xref-list { list-style: none; margin: 0 auto 1.25rem; padding: 0; }
.xref { padding: 1rem 0 1.125rem; border-top: 1px solid var(--rule); }
.xref:last-child { border-bottom: 1px solid var(--rule); }
.xref-refs { margin: .25rem 0 .75rem; font-size: .875rem; font-weight: 600; }
.xref-refs a { color: var(--text); text-decoration: none; }
.xref-refs span { font-weight: 400; color: var(--text2); }
.ot-quote { margin: 0 0 .875rem; padding: 1rem 1.125rem .875rem; border-radius: .875rem; background: var(--bg); }
.ot-quote blockquote { margin: 0; font: italic calc(1.125rem * var(--font-scale))/1.55 var(--scripture); }
.ot-quote figcaption { margin-top: .375rem; font-size: .75rem; color: var(--text2); }
.xref-note { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text2); }
.note { margin: 0 auto 1.25rem; }
.note p { margin: 0; font-size: calc(1rem * var(--font-scale)); line-height: 1.6; }
.editorial-mark { font-size: .75rem; color: var(--text2); margin-top: 1.5rem; }

/* Other accounts */
.chips { display: none; gap: .5rem; flex-wrap: wrap; margin: 0 auto 1.375rem; }
.js .chips { display: flex; }
.chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: 0 .875rem 0 .625rem; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--text); font-size: .875rem; font-weight: 500; cursor: pointer; }
.chip[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.chip[aria-selected="true"] .horizon { stroke: var(--bg); }
.js .account[data-inactive] { display: none; }
.account { margin: 0 auto 1.5rem; }
.account-title { margin: .25rem 0 .75rem; font: 450 calc(1.375rem * var(--title-scale))/1.23 var(--serif); }
.account-note { margin: 0 0 1.125rem; font-size: .9375rem; line-height: 1.53; color: var(--text2); }
.account-body { padding: 1.125rem 1.125rem .25rem; border-radius: .875rem; background: var(--bg); }
.account-body a { color: var(--accent-text); }
.account-body .scripture { font-size: calc(1.125rem * var(--font-scale)); }
.account-open { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }
.own-note, .accounts-note { margin: 0 auto 1rem; }
.own-note { padding-top: 1rem; border-top: 1px solid var(--rule); }
.own-note p:last-child, .accounts-note { font-size: .9375rem; line-height: 1.53; color: var(--text2); margin-bottom: 0; }

/* Per-section tabs are the no-JavaScript fallback; with JavaScript one fixed
   bar controls whichever passage is being read. */
.layer-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .375rem; max-width: calc(var(--measure) + 2 * var(--gutter)); margin: .5rem auto 0; padding: 0 var(--gutter); font-size: .875rem; }
.js .section .layer-tabs { display: none; }
.layer-tab { color: var(--text2); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 600; }
.layer-tab[aria-selected="true"] { color: var(--text); }
.layer-sep { color: var(--text2); }

.layer-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--rule); }
.bar-progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.bar-progress-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s var(--ease); }
.layer-bar-tabs { --n: 3; --i: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: var(--measure); height: var(--bar-h); margin: 0 auto; }
.layer-bar-tab { border: 0; background: none; color: var(--text2); font: 500 .9375rem/1 var(--ui); cursor: pointer; min-height: 2.75rem; }
.layer-bar-tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.bar-indicator { position: absolute; bottom: .5rem; left: 0; width: calc(100% / var(--n)); height: 2px; display: flex; justify-content: center; transform: translateX(calc(var(--i) * 100%)); transition: transform .24s var(--ease); pointer-events: none; }
.bar-indicator::after { content: ""; width: 1.125rem; height: 2px; border-radius: 1px; background: var(--accent); }

.chapter-end { scroll-snap-align: end; max-width: var(--measure); margin: 0 auto; padding: 2.5rem var(--gutter); text-align: center; }
.next-chapter { font-weight: 600; }
.loading-chapter { max-width: var(--measure); margin: 0 auto; padding: 1.75rem var(--gutter); display: flex; flex-direction: column; gap: .625rem; }
.loading-chapter span { height: .75rem; border-radius: .375rem; background: var(--skeleton); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

.offline-note { max-width: var(--measure); margin: 0 auto 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; text-align: left; }
.offline-note p { margin: 0; }

.completion { scroll-snap-align: start; scroll-snap-stop: always; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 30rem; margin: 0 auto; padding: calc(var(--header-h) + env(safe-area-inset-top)) var(--gutter) 2rem; }
.completion h2 { font: 400 calc(1.75rem * var(--title-scale))/1.2 var(--serif); margin: 1rem 0 .5rem; }
.completion p { color: var(--text2); margin: 0 0 1.75rem; }

.return-pill { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--bar-h) + .75rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border-radius: 999px; background: var(--text); color: var(--bg); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--bar-h) + .75rem + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .625rem 1rem; border-radius: 999px; font-size: .875rem; }

/* ---------- Sheets ---------- */
.sheet { width: min(32rem, 100vw); max-width: 100vw; max-height: calc(100dvh - 3rem); margin: auto auto 0; padding: .5rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom)); border: 0; border-radius: 1.75rem 1.75rem 0 0; background: var(--surface); color: var(--text); overflow-y: auto; }
.sheet[open] { animation: sheet-in .36s var(--ease-sheet); }
.sheet::backdrop { background: var(--scrim); animation: fade-in .2s ease; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@media (min-width: 40rem) { .sheet { margin: auto; border-radius: 1.75rem; } }
.grabber { display: block; width: 2.25rem; height: 5px; border-radius: 3px; background: var(--rule); margin: 0 auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; }
.sheet-head h2 { margin: 0; font: 450 1.5rem/1.2 var(--serif); }
.sheet-head form { margin: 0; }
.sheet-label { margin: 1.25rem 0 .5rem; font: 500 .8125rem/1.3 var(--ui); color: var(--text2); }
.choices { display: grid; gap: .625rem; }
.choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.size-row { display: flex; align-items: center; gap: .875rem; min-height: 2.75rem; }
.size-a { font-family: var(--serif); }
.size-a.small { font-size: .9375rem; }
.size-a.large { font-size: 1.5625rem; }
.size-row input { flex: 1; accent-color: var(--accent); min-height: 2.75rem; }
.size-preview { margin: .25rem 0 0; font: var(--read-size)/1.6 var(--scripture); }
.swatch { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 0; border: 0; background: none; font-size: .8125rem; font-weight: 500; cursor: pointer; }
.swatch[aria-checked="true"] { font-weight: 600; }
.swatch-tile { width: 100%; height: 3.625rem; border-radius: .75rem; border: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: center; gap: .375rem; padding: 0 .875rem; overflow: hidden; }
.swatch[aria-checked="true"] .swatch-tile { border: 2px solid var(--accent); }
.swatch-auto { flex-direction: row; padding: 0; gap: 0; }
.swatch-auto span { flex: 1; }
.swatch-auto span:first-child { background: var(--preview-light-bg); }
.swatch-auto span:last-child { background: var(--preview-dark-bg); }
.swatch-light { background: var(--preview-light-bg); }
.swatch-dark { background: var(--preview-dark-bg); }
.swatch-tile i { display: block; height: 3px; border-radius: 2px; width: 80%; }
.swatch-tile i + i { width: 60%; }
.swatch-light i { background: var(--preview-light-text); }
.swatch-dark i { background: var(--preview-dark-text); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: .75rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.switch-row > span { display: flex; flex-direction: column; gap: .125rem; }
.switch-title { font-size: 1rem; font-weight: 500; }
.switch-desc { font-size: .8125rem; color: var(--text2); }
.switch { width: 3.1875rem; height: 1.9375rem; flex: none; border-radius: 1rem; border: 0; padding: 2px; background: var(--rule); display: flex; align-items: center; cursor: pointer; transition: background .2s ease; }
.switch span { width: 1.6875rem; height: 1.6875rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(1.25rem); }
.sheet-link { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 3rem; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--text); text-decoration: none; font-size: 1rem; text-align: left; cursor: pointer; }
.sheet-link span { color: var(--text2); }
.sheet-link.quiet { color: var(--text2); border-bottom: 0; }
.chapter-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .375rem; }
.chapter-grid a { display: grid; place-items: center; height: 2.75rem; border-radius: .75rem; background: var(--bg); color: var(--text); text-decoration: none; font-weight: 500; }
.chapter-grid a[aria-current="page"] { background: var(--text); color: var(--bg); font-weight: 600; }
/* A tapped chapter shows its passages under the grid; tapping it again opens it. */
.chapter-grid a.is-picked { box-shadow: inset 0 0 0 2px var(--text); }
.chapter-preview { margin: .75rem 0 .25rem; padding: .75rem .875rem; border-radius: 1rem; background: var(--bg); }
.cp-head { margin: 0 0 .25rem; font: 400 1.25rem/1.25 var(--serif); }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-list a { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; min-height: 2.75rem; padding: .375rem 0; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; }
.cp-title { font: 400 1rem/1.3 var(--serif); }
.cp-ref { flex: none; font-size: .8125rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.cp-open { display: inline-flex; align-items: center; gap: .3em; min-height: 2.75rem; margin-top: .25rem; font-weight: 600; color: var(--brand-accent, var(--accent-text)); text-decoration: none; }
/* Searching: the sheet sits at the top, shows only the field and its
   suggestions, and fits above the keyboard (--vvh, the visual viewport). */
.sheet.is-searching { margin: calc(env(safe-area-inset-top) + .5rem) auto auto; border-radius: 1.25rem; max-height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top) - 1rem); }
.sheet.is-searching > :not(.sheet-head):not(.goto) { display: none; }
.goto { margin-bottom: .75rem; }
.goto-row { display: flex; gap: .5rem; }
.goto-row input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 .875rem; border-radius: .75rem; border: 1px solid var(--rule); background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; }
.goto-row button { min-height: 2.75rem; padding: 0 1.125rem; border-radius: .75rem; border: 0; background: var(--text); color: var(--bg); font-weight: 600; cursor: pointer; }
.goto-error { color: var(--accent-text); font-size: .875rem; margin: .5rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}
.page-meta { margin-top: 2rem; font-size: .875rem; color: var(--text2); }