/* Living Word Archive
   The look is borrowed from a well-made Bible: warm paper, dark ink, rubric red for anything
   that leads into the recording, and a thin line of gilt for ornament. */

@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --paper: #f6f1e7; --paper-2: #efe8da; --surface: #fffdf8; --ink: #221c15; --ink-2: #5a5044; --ink-3: #8b8071;
  --rule: #e2d8c6; --rule-2: #d3c7b1; --rubric: #8c2a21; --rubric-ink: #fff8f1; --rubric-soft: #f4e4dd;
  --gilt: #a5833a; --gilt-soft: #f3ead3; --ok: #3c6a4e; --ok-soft: #e3eee4; --warn: #9a6a14; --warn-soft: #f6ecd2;
  --shadow: 0 1px 2px rgba(60, 40, 15, .06), 0 8px 28px rgba(60, 40, 15, .08);
  --shadow-lift: 0 2px 4px rgba(60, 40, 15, .08), 0 18px 48px rgba(60, 40, 15, .14);
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --radius: 14px; --player-h: 0px;
  color-scheme: light;
}
/* Dark: one set of values. web/theme.js settles each person's choice (Automatic, Light or Dark; Automatic
   follows the device) into data-theme on <html> before this stylesheet loads, so the two ways of reaching dark
   share these lines. Screen only, so printing stays light. */
@media screen {
  :root[data-theme="dark"] {
    --paper: #14110d; --paper-2: #1a1611; --surface: #1e1a14; --ink: #efe7d8; --ink-2: #b9ae9b; --ink-3: #897e6d;
    --rule: #322b21; --rule-2: #43392b; --rubric: #e08a7c; --rubric-ink: #1b0f0c; --rubric-soft: #37201b;
    --gilt: #cfb065; --gilt-soft: #2c2616; --ok: #8fc3a0; --ok-soft: #1c2a21; --warn: #dab765; --warn-soft: #2e2613;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-top) + 27px); overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip; padding-bottom: max(var(--player-h), env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--gilt-soft); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0 0 .9em; }
.serif { font-family: var(--serif); }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.eyebrow { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
/* The bar has one height, --bar-h (border included). --bar-top adds the phone's status-bar inset when the
   archive is installed to a home screen; everything that sticks under the bar uses it. */
:root { --bar-h: 57px; --stick-h: 106px; --safe-t: env(safe-area-inset-top, 0px); --bar-top: calc(var(--bar-h) + var(--safe-t));
  --gutter-l: max(20px, env(safe-area-inset-left, 0px)); --gutter-r: max(20px, env(safe-area-inset-right, 0px)); }
/* The blur sits on a layer behind the bar, not on the bar itself: a backdrop-filter on the bar would trap
   the fixed phone menu inside the bar's own box. */
.bar { position: sticky; top: 0; z-index: 30; padding-top: var(--safe-t); border-bottom: 1px solid var(--rule); }
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.bar-in { max-width: 1120px; margin: 0 auto; height: calc(var(--bar-h) - 1px); padding: 0 var(--gutter-r) 0 var(--gutter-l); display: flex; align-items: center; gap: 18px; }
.mark { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 20px; font-weight: 500; white-space: nowrap; }
.mark svg { width: 24px; height: 24px; color: var(--gilt); flex: none; }
.mark small { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a, .nav button { padding: 7px 11px; border-radius: 9px; color: var(--ink-2); font-size: 14px; background: none; border: 0; white-space: nowrap; position: relative; }
.nav a:hover, .nav button:hover { background: var(--paper-2); color: var(--ink); }
.nav a.on { color: var(--ink); font-weight: 600; }
.nav a.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 1px; height: 1.5px; background: var(--gilt); border-radius: 2px; }
/* Light or dark (web/theme.js): three small icons in the bar on a computer, a row of three in the phone menu. */
.theme-pick { display: flex; align-items: center; margin: 0 2px 0 8px; }
.theme-pick-label { display: none; }
.theme-pick-opts { display: flex; gap: 1px; padding: 2px; border: 1px solid var(--rule); border-radius: 10px; }
.nav .theme-pick button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px; border-radius: 7px; color: var(--ink-3); }
.nav .theme-pick button svg { width: 17px; height: 17px; flex: none; }
.nav .theme-pick button span { display: none; }
.nav .theme-pick button:hover { background: var(--paper-2); color: var(--ink); }
.nav .theme-pick button[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
/* A narrow computer window has no room for all three: only the setting that is on shows, and a click moves to the next. */
@media (min-width: 901px) and (max-width: 1060px) {
  .theme-pick { margin-left: 2px; }
  .theme-pick-opts { padding: 0; border-color: transparent; }
  .nav .theme-pick button[aria-pressed="false"] { display: none; }
  .nav .theme-pick button[aria-pressed="true"] { padding: 7px; background: none; color: var(--ink-2); }
  .nav .theme-pick button[aria-pressed="true"]:hover { background: var(--paper-2); color: var(--ink); }
}
/* Just above phone width the bar is already full (a caretaker's Care link leaves no room), so the control steps aside. */
@media (min-width: 901px) and (max-width: 939px) { .theme-pick { display: none; } }
@media (max-width: 900px) {
  .theme-pick { display: block; margin: 0; padding: 16px 0 8px; }
  .theme-pick-label { display: block; margin: 0 0 9px 12px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  .theme-pick-opts { gap: 0; padding: 0; border-color: var(--rule-2); border-radius: 12px; overflow: hidden; }
  .nav .theme-pick button { flex: 1 1 0; min-height: 48px; padding: 0 8px; border: 0; border-radius: 0; font-family: var(--sans); font-size: 15px; color: var(--ink-2); }
  .nav .theme-pick button + button { border-left: 1px solid var(--rule-2); }
  .nav .theme-pick button span { display: inline; }
  .nav .theme-pick button[aria-pressed="true"] { background: color-mix(in srgb, var(--gilt-soft) 60%, transparent); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gilt); }
}
.badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--rubric); color: var(--rubric-ink); font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.bar-search { flex: 1; max-width: 420px; position: relative; }
.bar-search input { width: 100%; padding: 8px 12px 8px 36px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); font-size: 14.5px; }
.bar-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); }
.menu-btn, .search-btn { display: none; background: none; border: 0; padding: 10px; border-radius: 9px; color: var(--ink-2); }
.menu-btn { margin-left: auto; }
.menu-btn svg, .search-btn svg { width: 22px; height: 22px; display: block; }
.menu-btn:hover, .search-btn:hover { background: var(--paper-2); color: var(--ink); }
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav { display: none; position: fixed; top: var(--bar-top); left: 0; right: 0; bottom: 0; z-index: 29; background: var(--paper); flex-direction: column; align-items: stretch;
    padding: 10px var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); gap: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
  .nav.open { display: flex; }
  .nav a, .nav button { font-size: 21px; padding: 15px 12px; text-align: left; font-family: var(--serif); border-bottom: 1px solid var(--rule); border-radius: 0; flex: none; }
  .nav a.on { box-shadow: inset 3px 0 0 var(--gilt); background: color-mix(in srgb, var(--gilt-soft) 60%, transparent); }
  .nav a.on::after { display: none; }
  .nav #signout { color: var(--ink-3); font-family: var(--sans); font-size: 15px; border-bottom: 0; margin-top: 10px; }
  .mark small { display: none; }
  /* Only the page itself is held still. Putting overflow on body as well would make body the thing the
     sticky bar sticks to, and the bar would jump off the top of a scrolled page, taking the close button with it. */
  html.menu-open { overflow: hidden; }
}
/* On a phone the bar keeps only the name, a search button and the menu button. Search opens as a full-width row under the bar. */
@media (max-width: 640px) {
  .search-btn:not(.hidden) { display: block; margin-left: auto; }
  .search-btn:not(.hidden) + .menu-btn { margin-left: 0; }
  .bar-search { display: none; position: absolute; top: 100%; left: 0; right: 0; max-width: none; margin-top: 1px; padding: 10px var(--gutter-r) 10px var(--gutter-l); background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow); }
  .bar.searching .bar-search:not(.hidden) { display: block; }
  .bar-search svg { left: calc(var(--gutter-l) + 12px); }
  .bar-search input { padding: 11px 12px 11px 38px; }
}

main { max-width: 1120px; margin: 0 auto; padding: 28px var(--gutter-r) 80px var(--gutter-l); }
.narrow { max-width: 760px; margin: 0 auto; }
.page-head { margin: 10px 0 26px; }
.page-head h1 { font-size: clamp(30px, 5vw, 42px); }
.page-head p { color: var(--ink-2); margin: 8px 0 0; max-width: 62ch; font-size: 16px; }
.orn { display: flex; align-items: center; gap: 14px; color: var(--gilt); margin: 26px 0; }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--rule-2)); }
.orn::after { background: linear-gradient(270deg, transparent, var(--rule-2)); }
.orn svg { width: 14px; height: 14px; }

/* ---------- home ---------- */
.home { min-height: calc(100vh - 160px); min-height: calc(100dvh - 160px); display: flex; flex-direction: column; align-items: center; padding-top: clamp(40px, 13vh, 150px); position: relative; }
.home::before { content: ""; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: min(900px, 120vw); height: 520px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gilt-soft) 85%, transparent), transparent); opacity: .9; z-index: -1; }
.crest { color: var(--gilt); width: 46px; height: 46px; margin-bottom: 16px; }
.home h1 { font-size: clamp(42px, 9vw, 76px); font-weight: 400; letter-spacing: -.015em; text-align: center; }
.home h1 em { font-style: italic; color: var(--rubric); }
.home .sub { display: flex; align-items: center; gap: 14px; margin: 12px 0 34px; color: var(--ink-3); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; text-align: center; }
.home .sub::before, .home .sub::after { content: ""; width: 44px; height: 1px; background: var(--gilt); opacity: .7; }
.ask { width: min(680px, 100%); position: relative; }
.ask textarea { width: 100%; resize: none; overflow: hidden; display: block; padding: 19px 62px 19px 24px; font-family: var(--serif); font-size: 21px; line-height: 1.35;
  border-radius: 20px; border: 1px solid var(--rule-2); background: var(--surface); box-shadow: var(--shadow); transition: box-shadow .2s, border-color .2s; }
.ask textarea:focus { outline: none; border-color: var(--gilt); box-shadow: var(--shadow-lift); }
.ask textarea::placeholder { color: var(--ink-3); font-style: italic; }
.ask .go { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--rubric); color: var(--rubric-ink); display: grid; place-items: center; transition: transform .15s; }
.ask .go:hover { transform: scale(1.05); } .ask .go svg { width: 20px; height: 20px; }
.home .hint { margin-top: 14px; color: var(--ink-3); font-size: 13.5px; text-align: center; }
.tries { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; max-width: 700px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-2); font-size: 13.5px; transition: all .15s; }
button.chip:hover, a.chip:hover { border-color: var(--gilt); color: var(--ink); background: var(--surface); }
.chip.red { border-color: transparent; background: var(--rubric-soft); color: var(--rubric); font-weight: 600; }
.tries .chip { max-width: 100%; text-align: left; }
.tries[aria-busy="true"] { opacity: .45; transition: opacity .15s; }
.more-tries { flex-basis: 100%; margin-top: 4px; padding: 6px; background: none; border: 0; color: var(--ink-3); font-size: 13px; letter-spacing: .02em; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
.more-tries:hover { color: var(--ink); text-decoration-color: var(--gilt); }
.home-foot { margin-top: clamp(44px, 9vh, 90px); width: 100%; }
.stats { display: flex; justify-content: center; gap: clamp(18px, 5vw, 54px); flex-wrap: wrap; margin-bottom: 30px; }
.stat { text-align: center; } .stat b { display: block; font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1; }
.stat span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

/* ---------- cards and lists ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; display: block; transition: transform .18s, box-shadow .18s, border-color .18s; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--rule-2); }
.card h3 { font-size: 22px; margin: 6px 0 8px; }
.card .meta { color: var(--ink-2); font-size: 13.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); text-transform: uppercase; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.red { background: var(--rubric-soft); color: var(--rubric); } .pill.gilt { background: var(--gilt-soft); color: var(--gilt); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filters select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); }
/* Sermon list: the find box, the view switch, and the compact list of rows under headings. */
.s-filters { align-items: center; margin-bottom: 12px; }
.s-filters .find { position: relative; flex: 1 1 260px; max-width: 440px; display: flex; align-items: center; }
.s-filters .find > svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.s-filters .find input { width: 100%; min-width: 0; padding: 8px 40px 8px 37px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); -webkit-appearance: none; appearance: none; }
.s-filters .find input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.s-filters .find input::placeholder { color: var(--ink-3); }
.find-x { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); border-radius: 9px; }
.find-x:hover { color: var(--ink); } .find-x svg { width: 16px; height: 16px; }
.vswitch { display: inline-flex; margin-left: auto; padding: 2px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.vswitch button { border: 0; background: none; padding: 6px 13px; border-radius: 8px; color: var(--ink-2); font-size: 14px; }
.vswitch button[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); font-weight: 600; box-shadow: inset 0 -1px 0 var(--gilt); }
.s-count { color: var(--ink-3); font-size: 13.5px; margin: 0 0 18px; }
.slist-h { font-size: 24px; margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.slist-h:first-child { margin-top: 0; }
.slist-h span { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--gilt); }
.slist-rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.slist-rows li + li { border-top: 1px solid var(--rule); }
.srow { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) minmax(0, 13em) 5.6em; grid-template-areas: "date title speaker len"; align-items: baseline; column-gap: 16px; min-height: 48px; padding: 11px 18px; transition: background .15s; }
.srow:hover { background: var(--paper-2); }
.sr-date { grid-area: date; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-title { grid-area: title; font-family: var(--serif); font-size: 18.5px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.sr-review { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); margin-left: 4px; white-space: nowrap; }
.sr-speaker { grid-area: speaker; color: var(--ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-len { grid-area: len; color: var(--ink-3); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .s-filters .find { flex-basis: 100%; max-width: none; }
  .s-filters select { flex: 1 1 auto; min-height: 42px; }
  .vswitch { margin-left: 0; flex: 1 1 auto; } .vswitch button { flex: 1; padding: 8px 12px; font-size: 15px; }
  .srow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title title title" "date speaker len"; row-gap: 3px; column-gap: 10px; padding: 11px 14px; }
  .sr-speaker { font-size: 13.5px; }
}
.empty { text-align: center; padding: 56px 20px; color: var(--ink-2); border: 1px dashed var(--rule-2); border-radius: var(--radius); }
.empty h3 { font-size: 24px; margin-bottom: 8px; color: var(--ink); }
.empty p { max-width: 46ch; margin: 0 auto 16px; }

/* ---------- buttons and forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--surface); font-weight: 600; font-size: 14px; transition: all .15s; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); } .btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--rubric); border-color: var(--rubric); color: var(--rubric-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.quiet { border-color: transparent; background: none; color: var(--ink-2); } .btn.quiet:hover { background: var(--paper-2); color: var(--ink); }
.btn.small { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: default; }
label.f { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
label.f input, label.f select, label.f textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--surface); font-weight: 400; font-size: 15px; }
label.f textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.row { display: flex; gap: 12px; flex-wrap: wrap; } .row > * { flex: 1; min-width: 150px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- play button and moments ---------- */
.play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--rubric); background: none; color: var(--rubric); display: grid; place-items: center; transition: all .15s; }
.play:hover { background: var(--rubric); color: var(--rubric-ink); transform: scale(1.06); }
.play svg { width: 14px; height: 14px; margin-left: 2px; }
.play.big { width: 58px; height: 58px; background: var(--rubric); color: var(--rubric-ink); box-shadow: var(--shadow); } .play.big svg { width: 20px; height: 20px; }
.ts { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; color: var(--rubric); background: none; border: 0; padding: 2px 0; letter-spacing: .02em; }
.ts:hover { text-decoration: underline; }

/* ---------- results ---------- */
.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.q-head { font-family: var(--serif); font-size: clamp(26px, 4.4vw, 36px); line-height: 1.2; margin: 6px 0 4px; font-style: italic; }
.answer { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow); position: relative; }
.answer .prose p { font-family: var(--serif); font-size: 20.5px; line-height: 1.55; margin-bottom: .85em; }
.answer .prose p:first-child::first-letter { font-size: 3.1em; float: left; line-height: .82; padding: .07em .1em 0 0; color: var(--rubric); font-weight: 500; }
.answer .prose p:last-child { margin-bottom: 0; }
.cite { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--rubric); background: var(--rubric-soft); border-radius: 6px; padding: 1px 6px; margin-left: 3px; vertical-align: 3px; border: 0; cursor: pointer; }
.cite:hover { background: var(--rubric); color: var(--rubric-ink); }
.cov { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; font-size: 13.5px; color: var(--ink-2); }
.differ { margin-top: 22px; padding: 16px 20px; border-left: 2px solid var(--gilt); background: var(--gilt-soft); border-radius: 0 12px 12px 0; }
.differ p { font-family: var(--serif); font-size: 18.5px; margin: 6px 0 0; }
.sec-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; } .sec-title h2 { font-size: 26px; } .sec-title span { color: var(--ink-3); font-size: 13.5px; }
.src { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--bar-top) + 33px); transition: background .6s; border-radius: 4px; }
.src:first-of-type { border-top: 0; }
.src.flash { background: var(--gilt-soft); }
.src .n { flex: none; width: 26px; font-family: var(--serif); font-size: 22px; color: var(--gilt); text-align: right; line-height: 38px; }
.src .body { min-width: 0; flex: 1; }
.src h4 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.25; }
.src h4 a:hover { color: var(--rubric); }
.src .meta { font-size: 13px; color: var(--ink-2); margin: 3px 0 8px; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; }
.src .meta b { color: var(--ink); font-weight: 600; }
.src blockquote { margin: 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.src.open blockquote { -webkit-line-clamp: unset; }
.src .why { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; font-style: italic; }
.verse-card { padding: 16px 0; border-top: 1px solid var(--rule); } .verse-card:first-of-type { border-top: 0; }
.verse-card h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 19px; font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kjv { font-family: var(--serif); font-size: 18.5px; line-height: 1.55; }
.kjv sup { font-family: var(--sans); font-size: 10.5px; font-weight: 700; color: var(--gilt); margin-right: 3px; }
.verse-card .why { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.skeleton { border-radius: 8px; height: 16px; margin: 12px 0; background: linear-gradient(90deg, var(--paper-2) 25%, var(--rule) 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.thinking { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-size: 18px; margin-bottom: 8px; }
.dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gilt); margin-right: 4px; animation: dot 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.notice { padding: 14px 18px; border-radius: 12px; background: var(--warn-soft); color: var(--ink); font-size: 14px; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.notice b { color: var(--warn); }
/* A member's paper says so wherever it is shown: quiet, but never missed. */
.member-note { margin: 8px 0 10px; padding: 3px 0 3px 12px; border-left: 2px solid var(--gilt); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--ink-2); }
.page-head .member-note { margin: 12px 0 0; font-size: 18.5px; }
/* The caretaker's "Adopt as a church teaching" step; it reuses .arrange, .arr-note and .vswitch. */
.adopt-ask { margin-top: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.adopt-ask[hidden], .adopt .btn[hidden] { display: none; }
.adopt-ask p { margin: 10px 0; font-size: 14.5px; }
.adopt-kind { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 14px; font-weight: 600; }
.adopt-kind .vswitch { margin-left: 0; flex-wrap: wrap; }
/* A section of a church paper recommended for a question, a verse or a study session. Papers are read, not heard,
   so they lead in ink and gilt rather than rubric. */
.paper-group { margin-top: 30px; }
#extra .paper-group { margin-top: 0; }
.paper-rec { margin-bottom: 10px; }
.paper-rec h3 { margin-bottom: 2px; }
.paper-rec .paper-sec { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.paper-rec .paper-sec::before { content: "§ "; color: var(--gilt); font-style: normal; }
.paper-rec .excerpt { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.paper-rec .member-note { margin: 10px 0 0; font-size: 16px; }
.paper-cite .member-note { margin: 8px 0 2px; font-size: 16px; }
/* A paper cited in a written answer, and the matching letter on its card: an outlined serif letter in gilt, plainly
   not the rubric buttons that play a recording. */
.cite-paper, .paper-letter { display: inline-block; min-width: 1.5em; font-family: var(--serif); font-style: italic; font-weight: 600; text-align: center;
  color: var(--gilt); border: 1px solid var(--gilt); border-radius: 6px; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.cite-paper { position: relative; font-size: 14px; padding: 0 5px; margin-left: 3px; vertical-align: 2px; text-decoration: none; }
.cite-paper::before { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 40px; transform: translateY(-50%); }
.cite-paper:hover { background: var(--gilt-soft); color: var(--ink); }
.paper-letter { font-size: 15px; padding: 0 5px; margin-right: 9px; vertical-align: 1px; }
.paper-cite .sec-link { font-family: var(--serif); font-size: 16.5px; text-decoration: underline; text-decoration-color: var(--gilt); text-underline-offset: 3px; }
.paper-cite .sec-link:hover, .paper-cite h4 a:hover { color: var(--rubric); }
/* The elders' stage for church papers: the tally beside the publish button, and the elders' panel below the paper. */
.stage-says { margin-left: 8px; font-size: 13.5px; }
.tally { font-size: 13.5px; color: var(--ink-2); padding: 0 4px; }
.elders { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--gilt); }
.elders-why { font-size: 14.5px; max-width: 62ch; }
.elders-mine { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.elders-mine > span { font-weight: 600; font-size: 14px; }
.elders-mine .vswitch { margin-left: 0; }
.elders-words { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.elders-words li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.enotes { margin: 0 0 18px; }
.enote { padding: 12px 0; border-top: 1px solid var(--rule); }
.enote:last-child { border-bottom: 1px solid var(--rule); }
.enote-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-3); }
.enote-h b { color: var(--ink); font-size: 14px; }
.enote-h .btn { margin-left: auto; }
.enote p { margin: 6px 0 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .elders-mine .vswitch { flex: 1 1 100%; } .stage-says { display: block; margin: 6px 0 0; } }

/* ---------- sermon page ---------- */
.hero { display: flex; gap: 22px; align-items: center; margin: 8px 0 26px; }
.hero h1 { font-size: clamp(30px, 5.4vw, 48px); }
.hero .meta { color: var(--ink-2); margin-top: 8px; font-size: 15px; display: flex; gap: 4px 14px; flex-wrap: wrap; }
.hero .meta b { color: var(--ink); font-weight: 600; }
.deck { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--ink-2); margin: -8px 0 24px; max-width: 62ch; }
.card-desc { font-family: var(--serif); font-size: 16.5px; line-height: 1.4; color: var(--ink-2); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.unsure { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 2px 8px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; position: sticky; top: var(--bar-top); background: var(--paper); z-index: 10; padding-top: 6px; }
.tabs button { background: none; border: 0; padding: 11px 14px; font-size: 14.5px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.tabs button.on { color: var(--ink); border-color: var(--rubric); font-weight: 600; }
.overview p { font-family: var(--serif); font-size: 20px; line-height: 1.6; }
.overview p:first-child::first-letter { font-size: 3.1em; float: left; line-height: .82; padding: .07em .1em 0 0; color: var(--rubric); }
.section { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 20px; padding: 26px 0; border-top: 1px solid var(--rule); }
.section .when { text-align: right; padding-top: 5px; }
.section h3 { font-size: 25px; margin-bottom: 10px; }
.section .sum { font-family: var(--serif); font-size: 18.5px; line-height: 1.55; color: var(--ink); }
.points { list-style: none; padding: 0; margin: 12px 0 0; }
.points li { position: relative; padding: 5px 0 5px 22px; font-size: 15px; }
.points li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; background: var(--gilt); transform: rotate(45deg); }
.quote { margin: 16px 0 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--rubric); font-family: var(--serif); font-style: italic; font-size: 19.5px; line-height: 1.45; }
.quote button { font-style: normal; margin-left: 8px; }
.refs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.ref { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; background: var(--gilt-soft); color: var(--ink); font-size: 13px; font-weight: 600; border: 0; }
.ref:hover { outline: 1px solid var(--gilt); }
.ref svg { width: 12px; height: 12px; color: var(--gilt); }
@media (max-width: 620px) { .section { grid-template-columns: 1fr; } .section .when { text-align: left; padding: 0 0 4px; } .hero { align-items: flex-start; } }
.t-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.t-tools input[type=search] { flex: 1; min-width: 180px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); }
.t-tools label { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.para { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; margin-bottom: 1.05em; }
.para .ts { text-align: right; padding-top: 6px; opacity: .75; align-self: start; }
.para p { font-family: var(--serif); font-size: 19.5px; line-height: 1.62; margin: 0; }
.seg { cursor: pointer; border-radius: 4px; padding: 1px 0; transition: background .2s; }
.seg:hover { background: var(--paper-2); }
.seg.now { background: var(--gilt-soft); box-shadow: 0 0 0 3px var(--gilt-soft); }
.seg.hit { background: var(--rubric-soft); }
.seg[contenteditable=true] { outline: 1px dashed var(--rule-2); outline-offset: 1px; cursor: text; }
.seg[contenteditable=true]:focus { outline: 2px solid var(--gilt); background: var(--surface); }
@media (max-width: 620px) { .para { grid-template-columns: 1fr; } .para .ts { text-align: left; padding: 0; } .para p { font-size: 18.5px; } }
.review-bar { background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; box-shadow: var(--shadow); }
.review-bar .top { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.edit-sec textarea, .edit-sec input { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--rule-2); background: var(--surface); margin-bottom: 8px; font-family: var(--serif); font-size: 17px; line-height: 1.45; }

/* ---------- sermon summary, layout 2 ---------- */
.stick { position: sticky; top: var(--bar-top); z-index: 10; background: var(--paper); margin-bottom: 26px; }
.stick .tabs { position: static; margin-bottom: 0; padding-top: 6px; }
.jump { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.jump::-webkit-scrollbar { display: none; }
.jump a, .jump button { flex: none; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.jump a:hover { border-color: var(--gilt); color: var(--ink); }
.block { scroll-margin-top: calc(var(--bar-top) + var(--stick-h) + 12px); margin-bottom: 44px; }
.block > h2 { font-size: 28px; margin-bottom: 4px; }
.block > .lede { color: var(--ink-3); font-size: 13.5px; margin-bottom: 16px; }
.checked { display: flex; gap: 10px; align-items: flex-start; padding: 11px 15px; border-radius: 12px; background: var(--ok-soft); color: var(--ink); font-size: 13.5px; margin-bottom: 18px; }
.checked svg { flex: none; width: 16px; height: 16px; color: var(--ok); margin-top: 2px; }
.takeaway { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); margin-bottom: 18px; }
.takeaway p { font-family: var(--serif); font-size: clamp(21px, 3.2vw, 25px); line-height: 1.42; margin: 8px 0 0; }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 30px; }
.pcard { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--gilt); border-radius: 4px 4px 14px 14px; padding: 18px 18px 14px; display: flex; flex-direction: column; }
.pcard h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; }
.pcard p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); flex: 1; }
.pcard .ts { align-self: flex-start; }
.starthead { margin-bottom: 8px; }
.start { display: grid; gap: 10px; margin-bottom: 34px; }
.start-row { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--rubric-soft); }
.start-row h4 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.start-row p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.start-row .len { font-size: 12px; font-weight: 700; color: var(--rubric); letter-spacing: .04em; text-transform: uppercase; }
.brief { list-style: none; margin: 0; padding: 0; counter-reset: b; }
.brief li { counter-increment: b; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 12px; padding: 13px 0; border-top: 1px solid var(--rule); align-items: baseline; cursor: pointer; }
.brief li:first-child { border-top: 0; }
.brief li::before { content: counter(b); font-family: var(--serif); font-size: 24px; color: var(--gilt); text-align: right; line-height: 1; }
.brief h4 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.brief p { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-2); }
.brief li:hover h4 { color: var(--rubric); }
.asks { display: flex; flex-wrap: wrap; gap: 8px; }
.asks a { font-family: var(--serif); font-style: italic; font-size: 17px; padding: 7px 15px; border: 1px solid var(--rule); border-radius: 99px; background: var(--surface); }
.asks a:hover { border-color: var(--gilt); }
/* The section guide is set like an outline: a contents list with leaders to each time, then each section
   under its number with its key lines lettered beneath. */
.outline { list-style: none; margin: 0 0 14px; padding: 6px 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.outline a { display: flex; align-items: flex-end; gap: 0 10px; padding: 8px 2px; min-height: 40px; }
.outline .o-n { flex: none; width: 24px; text-align: right; font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--gilt); font-variant-numeric: lining-nums; align-self: flex-start; }
.outline .o-t { font-family: var(--serif); font-size: 18.5px; line-height: 1.3; min-width: 0; }
.outline i { flex: 1; min-width: 14px; border-bottom: 1px dotted var(--rule-2); margin-bottom: 6px; }
.outline b { flex: none; font-variant-numeric: tabular-nums; color: var(--rubric); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.9; }
.outline a:hover .o-t { color: var(--rubric); }
.outline a.now .o-t { font-weight: 600; }
.outline a.now .o-n { color: var(--rubric); }
.wsec { scroll-margin-top: calc(var(--bar-top) + var(--stick-h) + 12px); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 18px; padding: 28px 0 26px 14px; margin-left: -14px; border-top: 1px solid var(--rule); border-left: 3px solid transparent; }
.wsec:first-of-type { border-top: 0; }
.wsec.now { border-left-color: var(--rubric); }
.wsec .o-num { grid-row: 1 / span 2; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--gilt); text-align: right; font-variant-numeric: lining-nums; padding-top: 14px; }
.wsec .o-head, .wsec .o-body { grid-column: 2; min-width: 0; }
.wsec h3 { font-size: 26px; margin-bottom: 10px; }
.kind { display: flex; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); margin-bottom: 6px; }
.kind .ts { letter-spacing: .02em; }
.wsec .said { font-family: var(--serif); font-size: 18.5px; line-height: 1.55; }
.iow { margin: 14px 0 0; padding: 13px 16px; border-radius: 12px; background: var(--paper-2); font-size: 15px; }
.iow .eyebrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.iow p { margin: 0; }
.iow p + p { margin-top: 8px; }
.keylines { margin-top: 20px; }
.klist { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.qcard { counter-increment: k; position: relative; margin: 12px 0 0; padding: 2px 0 2px 30px; }
.qcard::before { content: counter(k, lower-alpha) "."; position: absolute; left: 0; top: 1px; width: 22px; text-align: right; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gilt); }
.qcard.featured { background: var(--gilt-soft); border-radius: 12px; padding: 10px 14px 10px 36px; }
.qcard.featured::before { left: 6px; top: 9px; }
.qcard.featured .role { color: var(--gilt); }
.qcard .q { font-family: var(--serif); font-style: italic; font-size: 19.5px; line-height: 1.45; }
.qcard .q .ts { font-style: normal; margin-left: 6px; white-space: nowrap; }
.qcard .role { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rubric); }
.qcard .why { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.story { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--rule); }
.story:first-of-type { border-top: 0; }
.story h4 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.story p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); }
.refrains { margin: 22px 0 6px; }
.refrain { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule); }
.refrain:first-of-type { border-top: 0; }
.refrain q { font-family: var(--serif); font-style: italic; font-size: 19px; quotes: "\201C" "\201D"; }
.refrain .faint { font-size: 12.5px; }
.scr { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); margin-bottom: 10px; }
.scr summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; }
.scr summary::-webkit-details-marker { display: none; }
.scr summary b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.scr-at { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.scr .use { flex-basis: 100%; font-size: 14px; color: var(--ink-2); }
.scr .kjv { padding: 0 18px 12px; }
.scr-foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 18px 14px; font-size: 13.5px; }
.scr-foot a { color: var(--rubric); font-weight: 600; }
.scr-foot a:hover { text-decoration: underline; }
.heart { padding: 14px 0; border-top: 1px solid var(--rule); }
.heart:first-of-type { border-top: 0; }
.heart b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gilt); margin-bottom: 3px; }
.heart span { font-family: var(--serif); font-size: 19.5px; line-height: 1.45; }
.heart .ts { white-space: nowrap; margin-left: 4px; }
.group { margin: 22px 0 8px; }
.card.rel { margin-bottom: 10px; }
.block .tags { margin-top: 14px; }
.edit-group { padding: 16px 0; border-top: 1px solid var(--rule); }
.edit-group > .eyebrow { margin-bottom: 8px; color: var(--gilt); }
.edit-row { padding: 10px 0 6px; border-top: 1px dashed var(--rule); }
.edit-row:first-of-type { border-top: 0; }
.edit-sec .redo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 10px; }
.edit-sec .redo .btn { padding: 4px 9px; }
.edit-sec .redo [hidden] { display: none; }
.edit-sec .redo .vers { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.edit-sec .redo .vers[hidden] { display: none; }
.edit-sec .redo .vers .btn { min-width: 34px; font-size: 18px; line-height: 1; color: var(--rubric); }
.edit-sec .redo .vers .count { padding: 0 4px; font-variant-numeric: tabular-nums; }
.edit-sec .redo input.wish { flex: 1 1 200px; width: auto; margin: 0; padding: 5px 9px; font-family: inherit; font-size: 16px; }
.edit-sec .fresh { border-color: var(--gilt); box-shadow: 0 0 0 1px var(--gilt); }
.edit-sec select { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--rule-2); background: var(--surface); margin-bottom: 8px; }
.edit-sec .rm { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); margin-left: 4px; }
.edit-sec .rm input { width: auto; margin: 0; }
/* On a phone the number sits beside the section's heading and the writing runs the full width beneath it. */
@media (max-width: 620px) { .wsec { grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; } .wsec .o-num { grid-row: 1; font-size: 32px; text-align: left; padding-top: 16px; } .wsec .o-body { grid-column: 1 / -1; } .wsec h3 { font-size: 24px; }
  /* Titles run to two lines here, so the leaders go and each time sits level with the first line. */
  .outline a { align-items: flex-start; padding: 7px 2px; } .outline .o-t { flex: 1; font-size: 17px; line-height: 1.28; } .outline i { display: none; } .outline .o-n { font-size: 17.5px; line-height: 1.28; width: 20px; } .outline b { line-height: 1.75; } }
@media print { .wsec { break-inside: avoid-page; border-left: 0; } .outline a { min-height: 0; padding: 3px 2px; } .scr .kjv { display: block !important; } .scr { border: 0; } .scr summary { padding-left: 0; } }

/* ---------- prophecy, scripture, guide ---------- */
.reading { font-family: var(--serif); font-size: 21px; line-height: 1.65; white-space: pre-wrap; }

/* ---------- a church paper, arranged (app/papers.py, layout 1) ---------- */
/* The look of the hand-arranged "After Redemption": a title page, contents, numbered sections, and the Scripture
   companion as verse cards. Quotations reuse .quote; the words-check note reuses .checked and .notice. */
.narrow > .eyebrow + .actions { margin-top: 12px; }   /* an arranged paper's own cover carries its title */
.paper { font-family: var(--serif); font-size: 20px; line-height: 1.6; font-variant-numeric: oldstyle-nums; }
.paper p { margin: 0 0 .85em; }
.paper .cover { min-height: min(80vh, 760px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 0 56px; }
.paper .cover .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--gilt); margin: 0 0 22px; }
.paper .cover h1 { font-size: clamp(46px, 11vw, 82px); line-height: 1.02; letter-spacing: -.012em; margin: 0 0 26px; }
.paper .sub { font-size: clamp(21px, 3.6vw, 26px); line-height: 1.3; margin: 0 0 12px; max-width: 26em; text-wrap: balance; }
.paper .deck { font-size: clamp(19px, 3vw, 22px); line-height: 1.4; margin: 0; max-width: none; text-wrap: balance; }
.paper .gilt-rule { width: 72px; height: 1px; background: var(--gilt); margin: 34px auto; }
.paper .about { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 31em; margin: 0 0 34px; text-wrap: pretty; }
.paper .author { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.paper .date { font-style: italic; font-size: 18px; color: var(--ink-2); margin: 12px 0 0; font-variant-numeric: lining-nums; }
.paper .toc { border-top: 1px solid var(--gilt); padding-top: 22px; margin-bottom: 40px; }
.paper .toc h2, .paper .note b, .paper .pgroup span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt); }
.paper .toc h2 { margin: 0 0 6px; }
.paper .toc ol { list-style: none; margin: 0; padding: 0; }
.paper .toc a { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); line-height: 1.3; }
.paper .toc .n, .paper .psec > h2 .n { color: var(--gilt); font-variant-numeric: lining-nums; }
.paper .toc .n { text-align: right; }
.paper .toc a:hover span:last-child, .paper .pref:hover { color: var(--rubric); }
.paper .notes { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; }
.paper .note { font-size: 17px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.paper .note + .note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.paper .note b { font-size: 11px; letter-spacing: .12em; margin-right: 4px; }
.paper .psec { margin-top: 68px; padding-top: 30px; border-top: 1px solid var(--rule-2); }
.paper .psec > h2 { font-size: clamp(29px, 5.2vw, 38px); line-height: 1.14; margin: 0 0 22px; }
.paper .psec > h2 .n { display: block; font-size: 46px; line-height: 1; margin-bottom: 10px; }
.paper h3 { font-style: italic; font-size: 25px; line-height: 1.2; margin: 34px 0 12px; }
.paper .pref { text-decoration: underline; text-decoration-color: var(--gilt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.paper .quote { margin: 22px 0; font-size: 21px; }
.paper .quote + .quote { margin-top: -6px; }
.paper cite { display: block; margin-top: 7px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rubric); }
.paper .key { margin: 26px 0; padding: 18px 22px; background: var(--gilt-soft); border-left: 2px solid var(--gilt); border-radius: 0 var(--radius) var(--radius) 0; font-size: 22px; line-height: 1.42; font-weight: 500; text-wrap: pretty; }
.paper .psec > .key:last-child { margin-bottom: 0; }
.paper ul { margin: 14px 0 20px; padding-left: 24px; }
.paper li { margin-bottom: 9px; padding-left: 4px; line-height: 1.5; }
.paper li::marker { color: var(--gilt); }
.paper .cmp { width: 100%; border-collapse: separate; border-spacing: 0; margin: 26px 0 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; font-size: 17.5px; line-height: 1.4; }
.paper .cmp th { text-align: left; vertical-align: bottom; padding: 13px 16px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: var(--paper-2); border-bottom: 1px solid var(--rule-2); }
.paper .cmp td { vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--rule); }
.paper .cmp tbody tr:first-child td { border-top: 0; }
.paper .cmp td + td, .paper .cmp th + th { border-left: 1px solid var(--rule); }
.paper .cmp.three td, .paper .cmp.three th { width: 33.33%; }
.paper .cmp.two td, .paper .cmp.two th { width: 50%; }
.paper .cmp.lead td:first-child { width: 23%; font-weight: 600; font-variant-numeric: lining-nums; }
.paper .topic { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--rubric); margin-bottom: 5px; }
.paper .ccc { display: block; margin-top: 5px; font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
.paper .companion > p { color: var(--ink-2); }
.paper .pgroup { font-style: normal; font-size: 27px; margin: 48px 0 16px; padding-top: 18px; border-top: 1px solid var(--gilt); }
.paper .pgroup span { display: block; font-size: 11px; letter-spacing: .16em; margin-bottom: 6px; }
.paper .passage { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px 12px; margin-bottom: 14px; }
.paper .passage h4 { font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0 0 12px; font-variant-numeric: lining-nums; }
.paper .passage h4 i { display: block; font-weight: 400; font-size: 18px; color: var(--ink-2); margin-top: 3px; }
.paper .vs { position: relative; margin: 0 0 7px; padding-left: 30px; font-size: 19px; line-height: 1.5; border-radius: 4px; transition: background .3s, box-shadow .3s; }
.paper .vs b { position: absolute; left: 0; top: .42em; width: 21px; text-align: right; font-family: var(--sans); font-size: 10.5px; font-weight: 700; line-height: 1.5; color: var(--gilt); }
.paper .vs.on { background: var(--gilt-soft); box-shadow: -8px 0 0 var(--gilt-soft), 8px 0 0 var(--gilt-soft); }
/* Shown after a reference is followed to the companion: returns to the place it was followed from. */
.paper-back { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(var(--player-h), env(safe-area-inset-bottom)) + 18px); z-index: 39;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--gilt); background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 600; white-space: nowrap; max-width: calc(100vw - 32px); box-shadow: var(--shadow-lift); cursor: pointer; }
.paper-back[hidden] { display: none; }
.paper-back:hover { border-color: var(--ink-3); }
.paper-back span { color: var(--gilt); font-size: 16px; line-height: 1; }
.paper .pref { border-radius: 3px; transition: background .4s; }
.paper .pref.was-here { background: var(--gilt-soft); }
.arrange { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.arrange .checked, .arrange .notice { margin-bottom: 10px; }
.arrange .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.arr-note { font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.arr-diff p { margin: 8px 0 2px; }
.arr-words { margin: 0; padding-left: 20px; font-family: var(--serif); font-size: 16px; }
@media (max-width: 640px) {
  .paper { font-size: 19.5px; }
  .paper .psec { margin-top: 54px; }
  .paper .cmp, .paper .cmp tbody, .paper .cmp tr, .paper .cmp td { display: block; width: auto !important; }
  .paper .cmp { background: none; border: 0; border-radius: 0; overflow: visible; }
  .paper .cmp thead { display: none; }
  .paper .cmp tr { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 12px; padding: 4px 16px; }
  .paper .cmp td { padding: 12px 0; border-left: 0 !important; border-top: 1px solid var(--rule) !important; font-size: 18px; }
  .paper .cmp td:first-child { border-top: 0 !important; }
  .paper .cmp td::before { content: attr(data-label); display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; font-variant-numeric: lining-nums; }
  .paper .cmp td[data-label=""]::before, .paper .cmp.lead td:first-child::before { display: none; }
  .paper .cmp.lead td:first-child { font-size: 21px; color: var(--rubric); }
  .paper .cmp.two td:first-child::before { color: var(--gilt); }
  .paper .cmp.two td:last-child::before { color: var(--rubric); }
}
@media print {
  .paper { font-size: 11.6pt; line-height: 1.5; }
  .paper .cover { min-height: 0; height: 228mm; padding: 0; break-after: page; }
  .paper .cover h1 { font-size: 58pt; } .paper .sub { font-size: 18pt; } .paper .deck { font-size: 15pt; } .paper .about { font-size: 12pt; }
  .paper .toc { margin-bottom: 22pt; } .paper .toc a { font-size: 12pt; padding: 4pt 0; }
  .paper .notes { break-after: page; break-inside: avoid; } .paper .note { font-size: 10.5pt; }
  .paper .psec { margin-top: 30pt; padding-top: 16pt; }
  .paper .psec > h2 { font-size: 21pt; margin-bottom: 12pt; break-after: avoid; break-inside: avoid; }
  .paper .psec > h2 .n { font-size: 27pt; margin-bottom: 5pt; }
  .paper h3 { font-size: 15pt; margin: 18pt 0 7pt; break-after: avoid; }
  .paper p { orphans: 3; widows: 3; }
  .paper .pref { text-decoration: none; }
  .paper .quote { font-size: 12.4pt; margin: 12pt 0; break-inside: avoid; } .paper cite { font-size: 7.6pt; margin-top: 4pt; }
  .paper .key { font-size: 12.8pt; padding: 11pt 14pt; margin: 14pt 0; break-inside: avoid; }
  .paper li { margin-bottom: 4pt; break-inside: avoid; }
  .paper .cmp { font-size: 10.2pt; margin-top: 14pt; overflow: visible; }
  .paper .cmp th { font-size: 7.2pt; padding: 7pt 9pt; } .paper .cmp td { padding: 8pt 9pt; }
  .paper .cmp tr { break-inside: avoid; } .paper .cmp thead { display: table-header-group; }
  .paper .topic { font-size: 7.2pt; } .paper .ccc { font-size: 7.8pt; }
  .paper .companion { break-before: page; margin-top: 0; border-top: 0; padding-top: 0; }
  .paper .pgroup { font-size: 16pt; margin: 22pt 0 8pt; break-after: avoid; } .paper .pgroup span { font-size: 7.4pt; }
  .paper .passage { padding: 11pt 13pt 7pt; margin-bottom: 9pt; }
  .paper .passage h4 { font-size: 13.5pt; margin-bottom: 7pt; break-after: avoid; } .paper .passage h4 i { font-size: 11.4pt; }
  .paper .vs { font-size: 11.2pt; line-height: 1.42; margin-bottom: 3.5pt; padding-left: 22pt; break-inside: avoid; }
  .paper .vs.on { background: none; box-shadow: none; }
  .paper .vs b { font-size: 7pt; width: 15pt; }
}
.prov { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 24px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); margin: 22px 0 30px; }
.prov dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; } .prov dd { margin: 3px 0 0; font-size: 15px; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.book { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; font-family: var(--serif); font-size: 17.5px; border: 1px solid transparent; }
.book:hover { background: var(--surface); border-color: var(--rule); }
.book i { font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 700; color: var(--rubric); background: var(--rubric-soft); border-radius: 99px; padding: 1px 7px; }
.chapters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.chapters a { min-width: 36px; text-align: center; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); font-size: 13.5px; font-variant-numeric: tabular-nums; background: var(--surface); }
.chapters a.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chapters a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; min-height: 40px; }
.chapters a i { font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 700; color: var(--rubric); background: var(--rubric-soft); border-radius: 99px; padding: 1px 6px; line-height: 1.35; }
.chapters a.on i { color: var(--paper); background: var(--rubric); }
.chapters-note { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); }
.verse { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 10px; padding: 5px 8px; border-radius: 8px; align-items: baseline; }
.verse > b { font-size: 11.5px; color: var(--gilt); text-align: right; font-weight: 700; }
.verse > span { font-family: var(--serif); font-size: 19.5px; line-height: 1.55; }
.verse.cited { cursor: pointer; background: linear-gradient(90deg, var(--rubric-soft), transparent 70%); }
.verse.cited:hover, .verse.sel { background: var(--rubric-soft); }
.verse i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--rubric); white-space: nowrap; }
.session { counter-increment: session; padding: 30px 0; border-top: 1px solid var(--rule); }
.session > h2 { font-size: 30px; margin-bottom: 8px; display: flex; gap: 14px; align-items: baseline; }
.session > h2::before { content: counter(session); font-size: 15px; font-family: var(--sans); font-weight: 700; color: var(--rubric-ink); background: var(--rubric); width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; transform: translateY(-4px); }
.guide { counter-reset: session; }
.guide .focus { font-family: var(--serif); font-size: 20px; color: var(--ink-2); font-style: italic; }
.step { margin-top: 22px; } .step > .eyebrow { margin-bottom: 8px; color: var(--gilt); }
.step .text { font-family: var(--serif); font-size: 18.5px; line-height: 1.55; }
.qs { margin: 0; padding-left: 22px; } .qs li { font-family: var(--serif); font-size: 18.5px; margin-bottom: 8px; padding-left: 4px; } .qs li::marker { color: var(--gilt); }
details.read { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
details.read summary { padding: 12px 16px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; list-style: none; }
details.read summary::-webkit-details-marker { display: none; }
details.read summary b { font-family: var(--serif); font-size: 19px; font-weight: 600; } details.read summary span { color: var(--ink-2); font-size: 14px; }
details.read .kjv { padding: 0 16px 14px; }
.listen { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
.listen h4 { margin: 0; font-family: var(--serif); font-size: 18.5px; font-weight: 500; } .listen .meta { font-size: 13px; color: var(--ink-2); } .listen p { margin: 4px 0 0; font-size: 14.5px; }
details.listen-group { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
details.listen-group summary { list-style: none; cursor: pointer; padding: 12px 16px; min-height: 44px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
details.listen-group summary::-webkit-details-marker { display: none; }
details.listen-group summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform .15s; }
details.listen-group[open] summary::after { transform: rotate(225deg); margin: 4px 4px 0 0; }
details.listen-group summary h4 { margin: 0; font-family: var(--serif); font-size: 18.5px; font-weight: 500; } details.listen-group summary .meta { font-size: 13px; color: var(--ink-2); }
.listen-group .places { padding: 0 16px 6px; }
.listen-group .place { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--rule); }
.listen-group .place .at { flex: none; min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--rubric); font-variant-numeric: tabular-nums; }
.listen-group .place .what { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.listen-group .place button.what { cursor: pointer; }
.listen-group .place .what b { font-family: var(--serif); font-size: 17px; font-weight: 600; } .listen-group .place .what span { font-size: 14px; color: var(--ink-2); }

/* ---------- contribute and care ---------- */
.drop { border: 1.5px dashed var(--rule-2); border-radius: 18px; padding: 44px 20px; text-align: center; background: var(--surface); transition: all .2s; cursor: pointer; }
.drop.over { border-color: var(--rubric); background: var(--rubric-soft); transform: scale(1.01); }
.drop svg { width: 34px; height: 34px; color: var(--gilt); } .drop h3 { font-size: 24px; margin: 10px 0 6px; } .drop p { color: var(--ink-2); margin: 0; }
.files { list-style: none; padding: 0; margin: 14px 0; } .files li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 6px; background: var(--surface); font-size: 14px; }
.item { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px; }
.item .top { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.item h4 { margin: 0; font-size: 16px; word-break: break-word; } .item .meta { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.item .guess { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); font-size: 14px; }
.item .guess b { font-weight: 700; } .item .preview { font-family: var(--serif); font-size: 15.5px; color: var(--ink-2); margin: 10px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.conf { display: inline-block; width: 60px; height: 5px; border-radius: 3px; background: var(--rule); vertical-align: middle; margin: 0 6px; overflow: hidden; } .conf i { display: block; height: 100%; background: var(--ok); }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; } table.t th { text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--rule-2); }
table.t td { padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; } table.t select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); }
.scroll-x { overflow-x: auto; }
.linkbox { display: flex; gap: 8px; margin-top: 10px; } .linkbox input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper-2); font-size: 13px; font-family: ui-monospace, Consolas, monospace; min-width: 0; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: 14.5px; } .kv dt { color: var(--ink-2); } .kv dd { margin: 0; }

/* ---------- sign-in ---------- */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); position: relative; overflow: hidden; }
.gate::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(900px, 130vw); height: 560px; background: radial-gradient(closest-side, var(--gilt-soft), transparent); z-index: -1; }
.gate-card { width: min(430px, 100%); text-align: center; }
.gate-card h1 { font-size: 44px; font-weight: 400; } .gate-card h1 em { color: var(--rubric); }
.gate-card form { text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); margin-top: 26px; }
.gate-card .btn { width: 100%; padding: 12px; font-size: 15px; }
.err { color: var(--rubric); font-size: 14px; margin: 0 0 12px; font-weight: 600; }

/* ---------- player ---------- */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--rule-2);
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(40, 25, 5, .1); transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.player.on { transform: none; }
.player-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 2fr) auto; gap: 16px; align-items: center; }
.p-ctl { display: flex; align-items: center; gap: 4px; }
.p-ctl button { background: none; border: 0; padding: 7px; border-radius: 50%; color: var(--ink-2); display: grid; place-items: center; } .p-ctl button:hover { color: var(--ink); background: var(--paper-2); }
.p-ctl svg { width: 20px; height: 20px; }
.p-ctl .pp { width: 44px; height: 44px; background: var(--rubric); color: var(--rubric-ink); position: relative; } .p-ctl .pp:hover { background: var(--rubric); color: var(--rubric-ink); filter: brightness(1.1); }
.p-ctl .pp.loading svg { opacity: .55; }
.p-ctl .pp.loading::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gilt); border-right-color: var(--gilt); animation: p-spin .9s linear infinite; }
@keyframes p-spin { to { transform: rotate(360deg); } }
.p-title { min-width: 0; position: relative; } .p-title a::after { content: ""; position: absolute; inset: 0; } .p-title a { display: block; font-family: var(--serif); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-title span { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-seek { display: flex; align-items: center; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.p-seek input { flex: 1; accent-color: var(--rubric); height: 4px; min-width: 0; }
.p-right { display: flex; gap: 2px; align-items: center; } .p-right button { background: none; border: 0; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .p-right button:hover { background: var(--paper-2); }
.p-right svg { width: 16px; height: 16px; display: block; }
/* On a sermon's summary: goes to the part being spoken now. It leads into the recording's place, so it is rubric. */
.p-right #p-now { color: var(--rubric); white-space: nowrap; } .p-right #p-now[hidden] { display: none; }
.p-right #p-now::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--rubric); vertical-align: 1px; animation: dot 1.2s infinite; }
.p-right #p-now::after { content: " ↓"; }
.p-right #p-follow { color: var(--rubric); } .p-right #p-follow[hidden] { display: none; }
/* On a phone: title, position bar, then the controls in one row, every one at least 44px to tap. */
@media (max-width: 760px) {
  .player { padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); }
  .player-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "seek seek" "ctl right"; gap: 0 8px; }
  .p-right #p-now { padding: 6px 5px; }
  .p-title { grid-area: title; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .p-seek { grid-area: seek; } .p-seek input { height: 44px; margin: 0; }
  .p-ctl { grid-area: ctl; gap: 6px; } .p-right { grid-area: right; gap: 0; }
  .p-ctl button, .p-right button { min-width: 44px; min-height: 44px; }
  .p-ctl .pp { width: 48px; height: 48px; }
  .p-ctl svg { width: 24px; height: 24px; } .p-right svg { width: 18px; height: 18px; margin: 0 auto; }
}

.toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 24px); transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 60; box-shadow: var(--shadow-lift); max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.fade { animation: fade .35s ease both; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media print {
  .bar, .player, .no-print, .toast { display: none !important; }
  body { background: #fff; color: #000; padding: 0; } main { padding: 0; max-width: none; }
  details.read .kjv { display: block !important; } details.read { border: 0; } .session { break-inside: avoid-page; }
  .listen { border: 0; padding: 4px 0; } .play { display: none; }
}

/* ---------- phone ---------- */
/* Times and citation numbers stay small to the eye but take a finger-sized tap. */
button.ts, button.cite { position: relative; }
button.ts::before, button.cite::before { content: ""; position: absolute; left: -9px; right: -9px; top: 50%; height: 40px; transform: translateY(-50%); }
@media (max-width: 640px) {
  :root { --stick-h: 92px; }
  /* iOS zooms into any field whose text is under 16px. */
  .bar-search input, .filters select, .filters input, label.f input, label.f select, label.f textarea, .t-tools input[type=search],
  .edit-sec input, .edit-sec select, table.t select, .linkbox input { font-size: 16px; }
  .stick .tabs { padding-top: 0; }
  .stick .tabs button { padding: 10px 12px; }
  .jump { padding: 6px 0; }
  .jump a, .jump button { padding: 5px 12px; }
}

/* ---------- help for members (web/help.js) ----------
   The Help button in the bar, the first offer on a sermon page, the look-around and the guide at #/help.
   Type in the look-around card and the guide is at least 18px, and every button there at least 48px to tap. */
.help-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--ink-2); }
.help-btn svg { width: 22px; height: 22px; display: block; }
.help-btn:hover { background: var(--paper-2); color: var(--ink); }
/* On a computer the button sits at the end of the bar, after the pages; the menu has no Help row there. */
@media (min-width: 901px) { .help-btn { order: 2; margin-left: -8px; } .nav .nav-help { display: none; } }
/* A narrow computer window has no room for it beside a caretaker's pages and the search box, so the small word
   "Archive" after the name steps aside there, as it already does at phone width. */
@media (min-width: 901px) and (max-width: 1100px) { .mark small { display: none; } }
/* On a phone it sits beside search, before the menu button. */
@media (max-width: 900px) { .help-btn { margin-left: auto; } .help-btn + .menu-btn { margin-left: 0; } }
@media (max-width: 640px) { .search-btn:not(.hidden) ~ .help-btn { margin-left: 0; } }

.help-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: -6px 0 22px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--gilt); border-radius: 4px 14px 14px 4px; box-shadow: var(--shadow); }
.help-offer p { flex: 1 1 260px; margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.4; }
.help-offer-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.help-offer .btn { min-height: 48px; padding: 0 20px; font-size: 18px; }

/* The look-around: a still layer that takes stray taps, a gilt ring around the part being shown (its shadow
   dims the rest), and the card. Nothing slides; only the card fades in. */
.tour-shade { position: fixed; inset: 0; z-index: 55; }
.tour-ring { position: fixed; z-index: 56; pointer-events: none; border: 2px solid var(--gilt); border-radius: 14px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gilt) 35%, transparent), 0 0 0 200vmax rgba(28, 19, 8, .58); }
.tour-card { position: fixed; z-index: 57; width: min(480px, calc(100vw - 32px)); padding: 6px 18px 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-2); border-top: 2px solid var(--gilt); border-radius: 6px 6px 16px 16px; box-shadow: var(--shadow-lift); font-size: 18px; line-height: 1.45;
  animation: fade .3s ease both; }
.tour-card:focus { outline: none; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-count { font-size: 18px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tour-x { display: inline-flex; align-items: center; gap: 6px; min-width: 48px; min-height: 48px; margin-right: -10px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: 18px; }
.tour-x:hover { background: var(--paper-2); color: var(--ink); }
.tour-x svg { width: 18px; height: 18px; }
.tour-card h2 { font-size: 25px; margin: 0 0 6px; }
.tour-card p { margin: 0 0 14px; font-family: var(--serif); font-size: 20px; line-height: 1.4; }
.tour-card p b { font-weight: 600; }
.tour-card .tour-again { font-size: 19px; color: var(--ink-2); margin-bottom: 4px; }
.tour-guide { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 8px; font-size: 18px; color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; }
.tour-nav { display: flex; gap: 10px; }
.tour-nav .btn { flex: 1; min-height: 48px; font-size: 18px; }
:root[data-theme="dark"] .tour-ring { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gilt) 30%, transparent), 0 0 0 200vmax rgba(0, 0, 0, .66); }

/* The guide. */
.help-guide { font-size: 18px; }
.help-guide .page-head p { font-size: 19px; }
.help-toc { margin: 8px 0 34px; padding: 18px 20px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); }
.help-toc h2 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gilt); margin: 0 0 4px; }
.help-toc ol { list-style: none; margin: 0 0 16px; padding: 0; }
.help-toc li + li { border-top: 1px solid var(--rule); }
.help-toc li button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 8px 0; border: 0; background: none; color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.3; text-align: left; }
.help-toc li button::after { content: "›"; flex: none; color: var(--gilt); font-size: 24px; line-height: 1; }
.help-toc li button:hover { color: var(--rubric); }
.help-toc .btn { min-height: 48px; padding: 0 20px; font-size: 17px; }
.help-toc .btn svg { width: 19px; height: 19px; }
.help-sec { padding: 22px 0 8px; border-top: 1px solid var(--rule); }
.help-guide .page-head + .help-sec { border-top: 0; padding-top: 0; }
/* A picture of a control beside the words that describe it: the page's own styles, but nothing in it can be pressed. */
.help-pic { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; width: fit-content; max-width: 100%; margin: 12px 0 6px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; font-family: var(--sans); font-size: 14px; line-height: 1.3; pointer-events: none; user-select: none; -webkit-user-select: none; }
.help-pic.wide { display: block; width: 100%; margin-bottom: 16px; padding: 14px; }
.help-pic .ask { display: block; width: 100%; }
.help-pic .tabs { position: static; margin: 0; padding: 0; background: none; max-width: 100%; }
.help-pic .jump { flex-wrap: wrap; overflow: visible; padding: 0; border: 0; }
.help-pic .ts { font-size: 14px; }
.help-pic .cite { margin: 0; vertical-align: 0; font-size: 13px; padding: 2px 7px; }
.help-pic .p-ctl, .help-pic .p-right { display: flex; align-items: center; }
.help-pic .follow { color: var(--rubric); }
.help-show { margin: 6px 0 18px; padding: 16px 18px 18px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--gilt); border-radius: 4px 14px 14px 4px; box-shadow: var(--shadow); }
.help-show[hidden] { display: none; }
.help-show p { margin: 0 0 12px; }
.help-show .btn { min-height: 48px; padding: 0 22px; font-size: 18px; white-space: normal; }
.help-sec h2 { font-size: 28px; margin-bottom: 10px; }
.help-sec h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--gilt); margin: 16px 0 6px; }
.help-sec p, .help-sec li { font-family: var(--serif); font-size: 20px; line-height: 1.5; }
.help-sec ol { margin: 0 0 14px; padding-left: 28px; }
.help-sec li { margin-bottom: 8px; padding-left: 4px; }
.help-sec li::marker { color: var(--gilt); font-weight: 600; }
.help-sec p b, .help-sec li b { font-weight: 600; }
.help-honest { padding: 14px 18px; border-left: 2px solid var(--gilt); background: var(--gilt-soft); border-radius: 0 12px 12px 0; }
.help-honest p { margin: 0 0 10px; }
.help-honest p:last-child { margin-bottom: 0; font-weight: 600; }
@media print {
  .help-pic { margin: 3pt 0; padding: 4pt 8pt; border: .5pt solid #999; }
  .help-pic .play.big, .help-pic .pp, .help-pic .go { border: 1pt solid #000; }
  .help-pic textarea { border: .5pt solid #000; }
  .help-sec li { break-inside: avoid; }
  .help-offer, .tour-shade, .tour-ring, .tour-card { display: none !important; }
  .help-guide { max-width: none; font-size: 11pt; }
  .help-guide, .help-guide * { color: #000 !important; background: none !important; box-shadow: none !important; }
  .help-guide .page-head { margin: 0 0 8pt; }
  .help-guide .page-head h1 { font-size: 20pt; }
  .help-guide .page-head p { font-size: 11pt; margin-top: 3pt; }
  .help-sec { padding: 7pt 0 2pt; border-top: .5pt solid #999; break-inside: avoid; }
  .help-sec h2 { font-size: 14pt; margin-bottom: 4pt; }
  .help-sec h3 { font-size: 11pt; margin: 6pt 0 2pt; }
  .help-sec p, .help-sec li { font-size: 11pt; line-height: 1.35; }
  .help-sec p { margin-bottom: 4pt; }
  .help-sec ol { margin-bottom: 4pt; padding-left: 18pt; }
  .help-sec li { margin-bottom: 2pt; }
  .help-honest { padding: 0 0 0 8pt; border-left: 1.5pt solid #000; border-radius: 0; }
}