/* 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: 40px 24px; }
.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: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.dock-in { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.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, td.len { 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));
  padding-top: env(safe-area-inset-top, 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 auto 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 / 4; line-height: 1.25; }
  td.rf { grid-row: 2; grid-column: 2; }
  td.len { grid-row: 2; grid-column: 3; font-size: .82rem; }
  td.act { grid-row: 1 / 3; grid-column: 4; 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; }
}