/* Names of Christ: shared styles for the manager page and every name page. */
:root {
  --bg: #E4E8DF; --panel: #F1F3EC; --ink: #1C2620; --muted: #56625A; --rule: #C3CBBE;
  --gold: #8A6420; --gold-soft: rgba(138,100,32,.14); --dock: rgba(228,232,223,.94);
  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --label: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141B17; --panel: #1B241F; --ink: #E7E3D6; --muted: #A2AA9F; --rule: #33402F;
  --gold: #D2AE62; --gold-soft: rgba(210,174,98,.14); --dock: rgba(20,27,23,.94); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #141B17; --panel: #1B241F; --ink: #E7E3D6; --muted: #A2AA9F; --rule: #33402F;
  --gold: #D2AE62; --gold-soft: rgba(210,174,98,.14); --dock: rgba(20,27,23,.94); color-scheme: dark }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: var(--serif); font-size: 17px; line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---- slide (name page and player) ---- */
.slide-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.stage { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 28px 20px; }
.card { max-width: 820px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.count { font-family: var(--label); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.name { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 10vw, 7rem); line-height: 1.04; margin: 14px 0 0; letter-spacing: .02em; text-wrap: balance; }
.name-rule { width: 72px; height: 2px; background: var(--gold); border: 0; margin: 26px 0 30px; }
.verse { margin: 0; font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.55; font-style: italic; text-wrap: balance; max-width: 34ch; }
.verse mark { background: var(--gold-soft); color: var(--gold); font-style: normal; font-weight: 600; padding: 0 .15em; border-radius: 2px; }
.ref { margin-top: 16px; font-family: var(--label); font-weight: 600; letter-spacing: .08em; font-size: 1rem; }
.card > * { transition: opacity .8s ease; }
.fresh .card > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .card > * { transition: none; } }

.dock { position: sticky; bottom: 0; border-top: 1px solid var(--rule); background: var(--dock);
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px));
  padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.dock-in { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.bar { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--gold); }
.controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; font-family: var(--label); font-size: .88rem; }
.btn { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; }
.btn:hover { border-color: var(--gold); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .35; pointer-events: none; }
.btn.primary { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 600; min-width: 112px; }
.opt { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.sources { font-family: var(--label); font-size: .82rem; color: var(--muted); }
.sources summary { cursor: pointer; text-align: center; list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.sources a { color: var(--muted); }

/* ---- manager page ---- */
.manager { max-width: 960px; margin: 0 auto; padding-block: 32px 64px; display: flex; flex-direction: column; gap: 24px; }
.manager h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; margin: 0; }
.lede { color: var(--muted); margin: 6px 0 0; max-width: 60ch; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-family: var(--label); font-size: .9rem; }
.toolbar input[type=search] { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; min-width: 0; flex: 1 1 200px; max-width: 320px; }
.stats { color: var(--muted); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
table.names { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.names th { font-family: var(--label); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
table.names td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
td.num { font-family: var(--label); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.nm { font-family: var(--display); font-size: 1.12rem; }
td.rf { font-family: var(--label); font-size: .88rem; }
td.act { white-space: nowrap; text-align: right; font-family: var(--label); font-size: .84rem; }
td.act .btn { padding: 4px 11px; }
.missing { color: var(--muted); font-style: italic; }
tr.now td { background: var(--gold-soft); }

.player { position: fixed; inset: 0; z-index: 10; background: var(--bg); display: flex; flex-direction: column;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.player .dock { position: static; }
.transcript { max-width: 62ch; margin: 14px auto 0; text-align: left; font-family: var(--serif); font-size: .95rem; color: var(--ink); }
.transcript p { margin: 0 0 .7em; }

/* ---- phones: the name list becomes two-line rows ---- */
@media (max-width: 640px) {
  .manager { padding-block: 22px 48px; gap: 18px; }
  .lede { font-size: .95rem; }
  .toolbar { gap: 10px; }
  .toolbar input[type=search] { flex: 1 1 140px; max-width: none; }
  .stats { flex-basis: 100%; font-size: .82rem; }
  .table-wrap { overflow-x: visible; }
  table.names thead { display: none; }
  table.names, table.names tbody { display: block; }
  table.names tr { display: grid; grid-template-columns: 2.1em 1fr auto; column-gap: 8px; row-gap: 2px;
    align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.names tr[hidden] { display: none; }
  table.names td { padding: 0; border: 0; }
  td.num { grid-row: 1 / 3; grid-column: 1; align-self: center; }
  td.nm { grid-row: 1; grid-column: 2; line-height: 1.25; }
  td.rf { grid-row: 2; grid-column: 2; }
  td.act { grid-row: 1 / 3; grid-column: 3; display: flex; gap: 6px; }
  td.act .long { display: none; }
  td.act .btn { padding: 7px 12px; }
}

/* ---- short screens (phone in landscape): shrink the slide so it fits above the controls ---- */
.player .stage, .slide-page .stage { min-height: 0; overflow-y: auto; }
@media (max-height: 560px) {
  .slide-page { height: 100vh; height: 100dvh; min-height: 0; }
  .stage { padding-block: 10px 6px; align-items: safe center; }
  .count { font-size: .7rem; }
  .name { font-size: clamp(1.8rem, 13vh, 3.6rem); margin-top: 4px; }
  .name-rule { margin: 10px 0 12px; width: 56px; }
  .verse { font-size: clamp(.95rem, 4.6vh, 1.3rem); line-height: 1.45; max-width: 52ch; }
  .ref { margin-top: 8px; font-size: .88rem; }
  .dock { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .dock-in { gap: 6px; }
  .controls { gap: 6px 10px; font-size: .82rem; }
  .btn { padding: 5px 12px; }
  .btn.primary { min-width: 96px; }
  .sources { display: none; }
}
@media (max-height: 560px) {
  .manager { padding-block: 16px 40px; gap: 14px; }
  .manager h1 { font-size: 2.2rem; }
  .lede { font-size: .95rem; }
}

/* ---- "About this name" page: the narration as reading text, with its sources ---- */
.about-nav { max-width: 680px; margin: 0 auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--label); font-size: .88rem; }
.about { max-width: 680px; margin: 0 auto; padding-block: 24px 56px; }
.about .count, .about .name, .about .ref { text-align: center; display: block; }
.about .name { font-size: clamp(2.6rem, 9vw, 4.6rem); }
.about .name-rule { margin: 20px auto 24px; }
.about .verse { margin: 0 auto; text-align: center; }
.about .story { margin-top: 36px; font-size: 1.08rem; line-height: 1.7; }
.about .story p { margin: 0 0 1.1em; }
.about h2 { font-family: var(--label); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 36px 0 8px; padding-top: 20px; border-top: 1px solid var(--rule); }
.source-list { margin: 0; padding-left: 1.2em; font-family: var(--label); font-size: .92rem; color: var(--muted); }
.source-list li { margin-bottom: 6px; }
.source-list a { color: var(--muted); }

/* ---- home page links under the introduction ---- */
.site-links { margin: 8px 0 0; font-family: var(--label); font-size: .86rem; }
.site-links a { color: var(--muted); }

/* ---- top bar on a name's Listen and Read pages: all names, previous/next, Listen | Read ---- */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--dock); border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(8px, env(safe-area-inset-left, 0px));
  padding-top: env(safe-area-inset-top, 0px); }
.tb-in { max-width: 820px; height: 48px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--label); font-size: .9rem; }
.tb-btn { font: inherit; background: none; border: 0; cursor: pointer; gap: 5px; min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.tb-btn:hover { background: var(--gold-soft); }
.tb-btn[aria-disabled="true"], .tb-btn:disabled { opacity: .3; pointer-events: none; }
.tb-arrow { font-size: 1.8rem; line-height: 1; padding-bottom: 4px; }
.tb-step { display: flex; align-items: center; }
.tb-count { min-width: 4.6em; text-align: center; color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; }
.seg a { cursor: pointer; padding: 6px 13px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; }
.seg a[aria-current] { background: var(--gold); color: var(--bg); }
@media (max-width: 380px) { .tb-lbl { display: none; } .seg a { padding: 6px 10px; } }
@media (max-width: 640px) {
  .stage { padding-block: 20px 14px; }
  .about { padding-block: 18px 48px; }
  .about .story { margin-top: 26px; font-size: 1.04rem; }
}
@media (max-height: 560px) { .tb-in { height: 40px; } .tb-btn { height: 34px; } }

/* ---- Listen page when the phone refused to start sound on its own: pulse the Play button ---- */
.tap-to-play [data-play] { animation: tap-pulse 1.6s ease-in-out infinite; }
@keyframes tap-pulse { 50% { box-shadow: 0 0 0 8px var(--gold-soft); } }
@media (prefers-reduced-motion: reduce) { .tap-to-play [data-play] { animation: none; } }

/* ---- home page: "Start where I left off" sits on its own line under Play all ---- */
.toolbar .resume { flex-basis: 100%; order: 1; }
.toolbar .stats { order: 2; }

/* ---- big back/forward arrows at the screen edges, for desktop mice (phones swipe or use the top bar) ---- */
.side-arrow { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
  .side-arrow { display: flex; align-items: center; justify-content: center; position: fixed; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 56px; height: 96px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer;
    font: 400 3.4rem/1 var(--display); padding-bottom: 8px; }
  .side-arrow:hover { background: var(--gold-soft); color: var(--gold); }
  .side-arrow:disabled { opacity: .2; pointer-events: none; }
  .side-arrow.prev { left: max(12px, env(safe-area-inset-left, 0px)); }
  .side-arrow.next { right: max(12px, env(safe-area-inset-right, 0px)); }
  .player .side-arrow { z-index: 11; }
}

/* "42 / 278" at the bottom of a name page, out of the way of the name */
.page-num { margin: .5rem 0 0; text-align: center; color: var(--muted); font-size: .78rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.about .page-num { margin-top: 2rem; }

/* closing prophet/apostle quote on a Read page, with its source */
.closing-quote { margin: 1.6em 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--gold); }
.closing-quote blockquote { margin: 0; font-style: italic; }
.closing-quote figcaption { margin-top: 8px; font-family: var(--label); font-size: .88rem; color: var(--muted); }
.closing-quote figcaption a { color: var(--muted); }

/* ---- categories: filter buttons and group headings on the home page, a label on each Read page ---- */
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px 8px; font-family: var(--label); font-size: .84rem; }
.cat-filter .btn { padding: 5px 12px; }
.cat-filter .btn[aria-pressed="true"] { background: var(--gold); color: var(--bg); border-color: var(--gold); }
table.names tr.cat-head th { font-family: var(--label); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); text-align: left; padding: 22px 10px 8px; border-bottom: 1px solid var(--rule); }
@media (max-width: 640px) { table.names tr.cat-head { display: block; } table.names tr.cat-head th { display: block; padding: 18px 0 6px; } }
.cat-label { text-align: center; margin: 10px 0 0; font-family: var(--label); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---- "Also called": other wordings of the name (text only, not narrated) ---- */
.also-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .98rem; }
.also-ref { font-family: var(--label); font-size: .82rem; color: var(--muted); margin-left: 4px; }