/* PEW — MZBC Bamenda congregation companion: warm dark,
 * generous space, no telemetry, nothing blinking. Dark sanctuary default. */
/* MZBC palette: cool dark + tally amber. Softness comes through spacing and type. */
:root {
  --bg: #0b0e12;
  --panel: #12161c;
  --edge: #222a34;
  --ink: #e8edf3;
  --dim: #8a94a0;
  --amber: #ff8f1f;
  --amber-soft: #ff8f1f33;
  --green: #4ade80;
  --fs: 1rem;               /* user text-size preference multiplies this */
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 calc(var(--fs) * 1.05)/1.55 "Space Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
body.contrast { --bg:#000; --panel:#0c0c0c; --ink:#fff; --dim:#c9c2b4; }

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
}
.brand { font-weight: 800; letter-spacing: .14em; font-size: .82rem; }
.brand span { color: var(--amber); }
.right { display: flex; gap: 8px; align-items: center; }
.conn { display: flex; gap: 6px; align-items: center; font-size: .7rem; color: var(--dim); }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.conn.ok .dot { background: var(--green); }
.conn.bad .dot { background: #c0574f; }
.iconbtn {
  background: var(--panel); color: var(--ink); border: 1px solid var(--edge);
  border-radius: 10px; padding: 6px 10px; font-size: .78rem; font-weight: 700;
}

.stale[hidden] { display: none; }   /* author display:flex beats UA [hidden] otherwise */
.stale {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  background: var(--amber-soft); color: var(--ink);
  padding: 8px 14px; font-size: .85rem;
}
.sal-mini { width: 26px; height: 26px; image-rendering: pixelated; }
.sal-big { width: 96px; height: 96px; image-rendering: pixelated; margin-bottom: 18px; }

main { flex: 1; display: flex; flex-direction: column; padding: 8px 18px 90px; }
.view { display: flex; flex-direction: column; gap: 16px; animation: fadein .45s ease; }
.view[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
body.nomotion .view, body.nomotion .fillintext .blank { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .view, .fillintext .blank { animation: none !important; transition: none !important; } }

#v-idle { align-items: center; justify-content: center; text-align: center; flex: 1; }
.calm { font-size: calc(var(--fs) * 1.5); font-weight: 600; }
.dim { color: var(--dim); }
.tiny { font-size: .75rem; }

.phase-tag, .series {
  color: var(--dim); letter-spacing: .18em; font-size: .68rem; font-weight: 700;
  text-transform: uppercase;
}
.series { margin-top: 6px; }

.card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 18px;
  padding: 18px 20px;
}
.cardtag { color: var(--amber); letter-spacing: .16em; font-size: .66rem;
  font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
.cardtag .tr { color: var(--dim); letter-spacing: .05em; font-weight: 600; }

.pointtext { font-size: calc(var(--fs) * 1.45); font-weight: 650; line-height: 1.35; }
.verse { font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--fs) * 1.2); line-height: 1.65; }
.verse.refonly { color: var(--dim); font-style: italic; font-size: calc(var(--fs) * 1); }

.fillintext { font-size: calc(var(--fs) * 1.3); font-weight: 600; line-height: 1.5; }
.fillintext .blank {
  display: inline-block; min-width: 3.2em; border-bottom: 2px solid var(--amber);
  color: transparent; text-align: center;
}
.fillintext .blank.revealed {
  color: var(--amber); animation: reveal .6s ease;
}
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.slidetext { font-size: calc(var(--fs) * 1.6); font-weight: 650; line-height: 1.4;
  white-space: pre-wrap; }
.slidetext.small { font-size: calc(var(--fs) * 1.05); font-weight: 450; color: var(--dim); }

footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg) 35%);
  display: flex; justify-content: center; pointer-events: none;
}
.notestab {
  pointer-events: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--edge);
  border-radius: 999px; padding: 10px 22px; font-size: .9rem; font-weight: 650;
  box-shadow: 0 6px 24px #0009;
}
.notestab .count { color: var(--amber); font-weight: 800; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 72dvh; overflow-y: auto;
  background: var(--panel); border-top: 1px solid var(--edge);
  border-radius: 22px 22px 0 0; padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px #000c; z-index: 20;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-title { font-weight: 750; letter-spacing: .06em; }
.notes { display: flex; flex-direction: column; gap: 12px; }
.note { padding-left: 14px; border-left: 3px solid var(--edge); }
.note.point { border-color: var(--amber); font-weight: 650; }
.note.scripture { border-color: #6f8fb0; font-family: Georgia, serif; }
.note.fillin .ans { color: var(--amber); font-weight: 750; }
.sowhatlist { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 10px;
  font-size: calc(var(--fs) * 1.15); font-weight: 600; line-height: 1.45; }
.sowhatlist li::marker { color: var(--amber); }
.note.sowhat { border-color: var(--amber); }
.note.sowhat ul { margin: 4px 0 0; padding-left: 1.1em; }
.note.sowhat li { margin: 3px 0; }
/* the offer, never an auto-correct (Douglas, 2026-09-12) */
.note .offer { display: block; margin-top: 6px; background: transparent; color: var(--amber);
  border: 1px dashed rgba(255,143,31,.55); border-radius: 8px; padding: 6px 10px;
  font: inherit; font-size: .82em; text-align: left; cursor: pointer; }
.note .offer b { font-weight: 750; }
.note .offer[hidden] { display: none; }   /* display:block above would beat [hidden] */
.note .k { color: var(--dim); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Live captions (spec §125) ---------- */
.captionScroll { display:flex; flex-direction:column; gap:.55rem; width:100%;
  max-width:40rem; margin:0 auto; padding:.5rem 0 6rem; }
.captionScroll .line { font-size:1.35rem; line-height:1.45; }
.captionScroll .line.partial { opacity:.6; }
.captionScroll .line .es { display:block; opacity:.72; font-size:.95em; margin-top:.1rem; }
.captionScroll:empty::after { content:attr(data-empty); opacity:.5; font-size:1rem; }

/* inline strip pinned above the footer */
.iconbtn.on { background:#ff8f1f; color:#0e0d0b; }

/* Footer pills: equal width, centered as a pair — "My notes" + "Give" read as
 * two peers rather than a button and an afterthought (Douglas, 2026-08-17). */
#bottom { display: flex; gap: 10px; justify-content: center; padding-left: 18px; padding-right: 18px; }
/* The footer is a flex row sized for TWO buttons; while "Fill In Notes" is the
 * only occupant it stretches the full width (Douglas, 2026-08-19). Dropping the
 * Bible button in later restores the split automatically — no CSS change. */
/* All three footer buttons must look identical. Two are <button> and one is an
 * <a> (it navigates), and an anchor lays out as inline text — different height,
 * different vertical centring. Forcing flex centring and one min-height makes
 * the element type invisible to the eye (Douglas, 2026-08-22: "it looks silly
 * not the same size"). */
#bottom .notestab { flex: 1 1 0; max-width: none; text-align: center;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 10px 12px; line-height: 1.15;
  box-sizing: border-box; font-size: .88rem;
  /* Without this a flex item never shrinks below its own text, so the longest
     label ("Connect Card") stays wider than the others. */
  min-width: 0;
}
/* An explicit `display` BEATS the hidden attribute — setting display:flex above
 * silently un-hid the Give pill, which is meant to appear only during the
 * welcome loop and the offering. Same trap as the Bible sheet (2026-08-19):
 * every explicit display needs its [hidden] companion. */
/* Gradient to match the welcome stack (Douglas, 2026-08-19). Amber ink on a
 * deep bronze ramp rather than a bright fill: this button is on screen during
 * the SERMON too, where a glowing bar would pull the eye off the message. */
#bottom .notestab {
  background: linear-gradient(135deg, #3A2A12 0%, #6B4A16 100%);
  border-color: rgba(255,143,31,.45);
  color: #FFD79A; }

/* An explicit `display` BEATS the hidden attribute — the display:flex above
 * silently un-hid the Give pill, which is meant to appear only during the
 * welcome loop and the offering. Same trap as the Bible sheet (2026-08-19):
 * every explicit display needs its [hidden] companion. */
#bottom .notestab[hidden] { display: none !important; }

/* full transcript view: text must be selectable for copy-paste into notes */
.captionScroll { user-select: text; -webkit-user-select: text; }

/* Interpreter button (translated voices): visible only for languages with a
 * voice; amber when speaking, like the other toggles. */
#voiceBtn svg { width:17px; height:17px; display:block; }
#voiceBtn { display:none; }              /* shown by applyLang for es/fr/pt */
#voiceBtn.avail { display:inline-flex; align-items:center; justify-content:center; }

/* LIVE TRANSCRIPTION lead block: in flow above slide content, with the amber accent. */
#liveCaps { margin: 2px 0 4px; padding: 14px 16px; background: var(--panel, #12161c);
  border: 1px solid var(--edge, #222a34); border-left: 3px solid var(--amber, #ff8f1f);
  border-radius: 14px; }
#liveCaps[hidden] { display: none; }
#liveCaps .tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim, #8a94a0); margin-bottom: 7px; }
#liveCaps .ln { font-size: 1.32em; line-height: 1.48; font-weight: 500; }
#liveCaps .ln + .ln { margin-top: .35em; }
#liveCaps .ln.partial { opacity: .55; }
#liveCaps:not([hidden]) { animation: fadein .3s ease; }

/* PP content steps back while the transcription leads */
.view.deemphasized .slidetext { font-size: .8em; opacity: .78; }
.view.deemphasized .phase-tag { opacity: .55; }
.view.deemphasized .card { font-size: .78em; padding: 8px 10px; }
.view.deemphasized .pointtext { font-size: 1.05em; }
.view.deemphasized .verse { font-size: .95em; }
.view.deemphasized .series { opacity: .55; }

/* Narrow phones: six header controls now — the connection text yields and
 * the status dot alone carries the state (2026-08-18). */
@media (max-width: 480px) {
  #connTxt { display: none; }
  /* seven controls in the header now (CC TXT speaker interpreter AA lang):
   * tighter chrome so they all fit a 375-wide phone */
  .right { gap: 5px; }
  .iconbtn { padding: 5px 7px; font-size: .7rem; border-radius: 8px; }
  #voiceBtn svg { width: 15px; height: 15px; }
  .brand { font-size: .82rem; }
}

/* Language menu: drops from the header on a dark panel. */
#langMenu { position: fixed; top: 52px; right: 12px; z-index: 80;
  background: var(--panel, #12161c); border: 1px solid var(--edge, #222a34);
  border-radius: 14px; padding: 6px; min-width: 190px;
  box-shadow: 0 14px 44px rgba(0,0,0,.5); animation: fadein .15s ease; }
#langMenu[hidden] { display: none; }
#langMenu button { display: flex; width: 100%; align-items: center; gap: 10px;
  background: transparent; border: 0; color: var(--ink, #e8edf3);
  font: inherit; font-size: .95rem; padding: 11px 12px; border-radius: 10px;
  text-align: left; }
#langMenu button.cur { background: rgba(255,143,31,.14); color: var(--amber, #ff8f1f); font-weight: 700; }
#langMenu button .code { font-size: .68rem; color: var(--dim, #8a94a0);
  font-weight: 700; letter-spacing: .08em; margin-left: auto; }
#langMenu button.cur .code { color: var(--amber, #ff8f1f); }

/* WELCOME-LOOP LINKS (2026-08-19): a single left-aligned column — a stack
 * reads as a short list of invitations, where a wrapped row reads as a toolbar.
 * Amber is the house accent; the three socials keep their own brand colour so
 * they are recognised at a glance rather than read. */
#welcomeLinks { display: flex; flex-direction: column; align-items: stretch;
  gap: 9px; margin-top: 16px; }
#welcomeLinks[hidden] { display: none; }
/* Full content width (Douglas, 2026-08-19): a phone-wide target is easier to
 * hit one-handed than a 190px pill, and the equal widths read as one list. */
.wl-btn { display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 20px; border-radius: 12px;
  font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: transform .08s ease; }
.wl-btn:active { transform: scale(.98); }
/* Each of the church's own destinations gets its own gradient so the stack
 * reads as distinct places rather than three identical amber slabs. All three
 * stay light enough for the dark ink to keep its contrast. */
.wl-amber { background: var(--amber, #ff8f1f); color: #151005; }
.wl-connect { color: #151005; background: linear-gradient(135deg, #FFD97D 0%, #FF8F1F 100%); }
.wl-site    { color: #151005; background: linear-gradient(135deg, #FFB86B 0%, #F2601A 100%); }
.wl-give    { color: #151005; background: linear-gradient(135deg, #FFE07A 0%, #E0A100 100%); }
.wl-app     { color: #151005; background: linear-gradient(135deg, #FFC978 0%, #F07C1A 100%); }
.wl-fb { color: #fff; background: linear-gradient(135deg, #4293FF 0%, #0B5FCE 100%); }
.wl-yt { color: #fff; background: linear-gradient(135deg, #FF4B3E 0%, #C4160C 100%); }
.wl-ig { color: #fff;
  background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%); }

/* SAL ON THE WELCOME LOOP (2026-08-19). A friendly face on the pre-service
 * page, and only there — he disappears the moment the service begins so he
 * never competes with worship or the sermon. */
#salWelcome { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
#salWelcome[hidden] { display: none; }
.sal-welcome-img { width: 64px; height: 64px; image-rendering: pixelated;
  flex: 0 0 auto; }
#salWelcomeText { margin: 0; max-width: 22ch; font-size: 1rem; line-height: 1.35;
  color: rgba(255,255,255,.86);
  background: rgba(255,143,31,.12); border: 1px solid rgba(255,143,31,.28);
  border-radius: 14px; border-bottom-left-radius: 4px; padding: 11px 14px; }

/* THE STATION (2026-08-19) */
#station { margin-top: 22px; width: 100%; }
#station[hidden] { display: none; }
#stationPlayer { position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 14px; overflow: hidden; }
#stationPlayer iframe { width: 100%; height: 100%; border: 0; display: block; }
#stationBar { margin-top: 10px; }
#stationNow { font-size: .95rem; line-height: 1.35; color: rgba(255,255,255,.8); }
#stationNow b { color: #fff; font-weight: 700; }
#stationNow .when { display: block; font-size: .82rem; opacity: .62; margin-top: 3px; }
#stationActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#stationActions .notestab { flex: 1 1 auto; padding: 10px 16px; font-size: .85rem;
  background: linear-gradient(135deg, #3A2A12 0%, #6B4A16 100%);
  border-color: rgba(255,143,31,.45); color: #FFD79A; }

/* Listen mode: the video box collapses, the rest of the panel stays put. */
#station.audio-mode #stationPlayer { display: none; }
#station.audio-mode #stationUnmute { display: none; }
#stationAudio { display: none; }
#stationMode.on { background: linear-gradient(135deg, #6B4A16 0%, #FF8F1F 100%);
  color: #151005; }

#stationLatest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#stationLatest .notestab { flex: 1 1 auto; padding: 10px 16px; font-size: .85rem;
  background: linear-gradient(135deg, #3A2A12 0%, #6B4A16 100%);
  border-color: rgba(255,143,31,.45); color: #FFD79A; }
#station.on-demand #stationNow b::before { content: "\2022 "; color: var(--amber,#ff8f1f); }

/* BIBLE SHEET (2026-08-19) — Bible Gateway embedded, so NIV/CSB are available
 * without PEW holding any licence. Tall on purpose: reading, not glancing. */
#bibleSheet { max-height: 88dvh; display: flex; flex-direction: column; }
#bibleBar { display: flex; gap: 8px; margin-bottom: 10px; flex: 0 0 auto; }
#bibleRef { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: inherit; font: inherit; font-size: .95rem; }
#bibleVer { flex: 0 0 auto; padding: 10px 8px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: inherit; font: inherit; font-size: .9rem; }
#bibleFrameWrap { flex: 1 1 auto; min-height: 46dvh; border-radius: 12px;
  overflow: hidden; background: #10141a; }
/* DARK MODE FOR A PAGE WE DO NOT OWN (Douglas, 2026-08-20). Bible Gateway is
 * cross-origin, so its HTML cannot be restyled — but the FRAME's rendered
 * pixels are ours. invert flips the white page dark; hue-rotate(180) flips the
 * colours back so links stay blue-ish. 0.93 rather than 1 so "black" text
 * lands at a soft off-white instead of glaring #fff. If they ever ship a real
 * dark mode (their print page mentions no color-scheme today), drop this. */
#bibleFrame { filter: invert(0.93) hue-rotate(180deg); background: #fff; }
#bibleFrame { width: 100%; height: 100%; min-height: 46dvh; border: 0; display: block; }
#bibleNote { flex: 0 0 auto; margin-top: 8px; font-size: .72rem; color: var(--dim);
  text-align: center; }

/* BIBLE SHEET v2 (2026-08-19) --------------------------------------------
 * The close button was scrolling out of reach on an iPad: .sheet scrolls, and
 * a tall iframe pushed the header off the top. The sheet itself no longer
 * scrolls — header and bar are pinned, only the frame flexes. A backdrop adds
 * a second way out, because one way to close something is not enough on a
 * touch screen. */
#bibleSheet { max-height: 86dvh; display: flex; flex-direction: column;
  overflow: hidden; }
#bibleSheet .sheet-head { flex: 0 0 auto; }
#bibleBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 19; }
#bibleBackdrop[hidden] { display: none; }

/* Big enough to hit while holding a tablet one-handed. */
#bibleClose { min-width: 46px; min-height: 46px; font-size: 1.15rem;
  display: grid; place-items: center; }

/* THE BADGE — a verse is on screen right now and this button goes straight to
 * it. Clears once opened for that reference. */
#bibleBtn { position: relative; overflow: visible; }
#bibleBadge { position: absolute; top: -6px; right: -6px; min-width: 20px;
  height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--amber, #ff8f1f); color: #151005;
  font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--panel, #141920); }
#bibleBadge[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #bibleBadge { animation: bibpulse 2.4s ease-in-out 3; }
}
@keyframes bibpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* On a tablet the two footer buttons stretched the full width and looked
   stranded. Cap them and keep the pair centred. */
@media (min-width: 620px) { #bottom .notestab { max-width: 260px; } }

/* THE ACTUAL iPAD BUG (2026-08-20). `hidden` works by applying display:none —
 * and the explicit `display:flex` above OVERRODE it. The sheet was visible
 * from page load, permanently; the X really fired (it blanked the frame, which
 * is the "only removes the scripture" symptom) but the hide never painted.
 * Never style a [hidden]-able element's display without this companion rule. */
#bibleSheet[hidden] { display: none !important; }

/* STATION FOCUS (Douglas, 2026-08-20): on the 24/7 feed, Sal and the greeting
 * show on first load, then bow out so the player takes the centre. The class
 * is added ~9s after the station starts painting and removed whenever the
 * station stops, so a fresh visit always gets greeted. Fade + collapse, not
 * display:none, so the hand-off is graceful. */
#v-idle > .sal-big, #v-idle > .calm, #v-idle > .dim {
  transition: opacity .9s ease, max-height .9s ease, margin .9s ease;
  max-height: 220px; overflow: hidden;
}
#v-idle.station-focus > .sal-big,
#v-idle.station-focus > .calm,
#v-idle.station-focus > .dim {
  opacity: 0; max-height: 0; margin: 0; pointer-events: none;
}

/* ANNOUNCEMENT VIDEO (2026-08-20) */
.wl-announce { color: #151005;
  background: linear-gradient(135deg, #FFD97D 0%, #FF6B4A 100%);
  border: 0; font: inherit; font-weight: 650; cursor: pointer; }
#annStation { background: linear-gradient(135deg, #3A2A12 0%, #FF6B4A 100%);
  border-color: rgba(255,143,31,.45); color: #FFE9D6; flex: 1 1 auto;
  padding: 10px 16px; font-size: .85rem; }
#annOverlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; }
#annOverlay[hidden] { display: none !important; }   /* the lesson, applied */
#annOverlay video { width: min(96vw, 1100px); max-height: 82dvh; border-radius: 12px;
  background: #000; }
#annClose { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 16px; min-width: 48px; min-height: 48px; border-radius: 12px; border: 0;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem; }

/* SONG CREDITS (2026-08-20) — worship only, pinned low and quiet. */
#songCredit { position: fixed; left: 0; right: 0;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  padding: 10px 18px; text-align: center; z-index: 5; pointer-events: none; }
#songCredit[hidden] { display: none !important; }
#songCredit .sc-t { font-weight: 700; font-size: .92rem; color: rgba(255,255,255,.88); }
#songCredit .sc-a { font-size: .8rem; color: var(--dim); margin-top: 2px; }
#songCredit .sc-c { font-size: .68rem; color: rgba(255,255,255,.42); margin-top: 3px;
  letter-spacing: .04em; }
#songCredit .sc-links { margin-top: 8px; pointer-events: auto; }
#songCredit .sc-links a { display: inline-block; margin: 0 5px; padding: 6px 14px;
  border-radius: 999px; font-size: .74rem; font-weight: 700; text-decoration: none; }
#songCredit .sc-yt { background: #FF0000; color: #fff; }
#songCredit .sc-sp { background: #1DB954; color: #06220f; }


/* ---- COMING UP panel (announcement / phone-silence videos, 2026-08-22) ---- */
#preservice { display:flex; flex-direction:column; gap:14px; padding:18px 16px 24px;
  max-width:640px; margin:0 auto; width:100%; text-align:center;
  /* The set list can outgrow a small phone — let it scroll rather than hide
     the last song behind the footer (seen on a 375pt screen, 2026-08-22). */
  overflow-y:auto; }
#preservice[hidden] { display:none !important; }
#psSeries { font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.6; margin-bottom:6px; }
#psTitle { font-size:clamp(22px,6vw,32px); font-weight:700; line-height:1.15; }
#psPreacher { font-size:clamp(15px,4vw,18px); opacity:.8; margin-top:6px; }
#preservice .pslabel { font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  opacity:.55; margin-bottom:8px; }
#psSongs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
#psSongs li { font-size:clamp(15px,4.2vw,18px); line-height:1.3; }
#psSite { align-self:center; margin-top:4px; padding:12px 22px; border-radius:14px;
  font-weight:700; text-decoration:none; }
#psSongs .lead { opacity:.55; font-size:.82em; }


/* ---- Fill-in stack (2026-08-23) ------------------------------------------
   One point per panel, swiped horizontally. scroll-snap does the work: the
   panels are real scroll children, so a finger drag behaves natively and the
   dots only mirror where the scroll already is. */
.fillintrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fillintrack::-webkit-scrollbar { display: none; }
/* Exactly one panel wide, and snap to its START — "center" left the track
   parked between two points, showing the tail of one and the head of the next
   (2026-08-23). */
.fillintrack > .fi { flex: 0 0 100%; width: 100%; box-sizing: border-box;
  scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
.fillindots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.fillindots[hidden] { display: none !important; }
.fillindots i { width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.22); transition: background .2s, transform .2s; }
.fillindots i.on { background: var(--amber); transform: scale(1.25); }
#fillinCount { font-variant-numeric: tabular-nums; }

/* Report a problem (2026-08-23). Same hidden discipline as the Bible sheet:
   an explicit display would beat the [hidden] attribute, so every rule that
   sets one gets a [hidden] companion. */
#bugBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 19; }
#bugBackdrop[hidden] { display: none; }
#bugSheet[hidden] { display: none !important; }
#bugSheet { max-height: 70dvh; }