:root {
  --stage: #100D0A;
  --panel: #1B1611;
  --panel-edge: #33291F;
  --text: #EFE7D7;
  --text-soft: #9C8F7C;
  --gold: #E3B54D;
  --crimson: #D24A3E;
  --green: #4FBF7E;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--stage); color: var(--text);
  font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 30px 18px 80px; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.wordmark { font-family: var(--serif); font-size: 26px; }
.wordmark .red { color: var(--crimson); font-style: italic; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); font-family: var(--mono); }
.mic-meter {
  width: 64px; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--panel-edge);
}
#mic-meter-fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width .1s linear;
}
body.obs .mic-meter { display: none !important; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: #5A4F42; }
.status.playing .dot { background: var(--gold); }
.status.listening .dot { background: var(--crimson); animation: pulse 1.2s ease infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .status.listening .dot { animation: none; } }

.frame {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 9; border: 1px solid var(--panel-edge);
  background: radial-gradient(130% 100% at 50% -5%, #3B2F22 0%, #221A11 48%, #120E09 100%);
}
.badge-live {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  background: #C21F1F; color: #fff; border-radius: 4px; padding: 4px 9px;
}
.badge-live::before { content: "● "; font-size: 8px; vertical-align: 1px; }

.transcript {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: min(58%, 400px); text-align: right;
  font-family: var(--mono); font-size: clamp(10px, 1.55vw, 12.5px); line-height: 1.6;
  color: #B5A78F;
}
.transcript .line { opacity: .55; }
.transcript .line:last-child { opacity: 1; }
.transcript .interim { font-style: italic; opacity: .8; }
.transcript mark { background: transparent; color: var(--gold); border-bottom: 1px dotted var(--gold); }

.lower-third {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(8,6,3,.94) 32%);
  padding: clamp(30px, 7vw, 56px) clamp(16px, 4vw, 30px) clamp(12px, 2.6vw, 20px);
  transform: translateY(12px); opacity: 0; transition: transform .4s ease, opacity .4s ease;
  pointer-events: none;
}
.lower-third.show { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lower-third { transition: opacity .4s ease; transform: none; } }
.lt-ref-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.lt-ref {
  font-size: clamp(10px, 1.7vw, 12.5px); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.lt-chip { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; padding: 2px 7px; }
.lt-chip.explicit { background: #2E5A41; color: #B9E7CB; }
.lt-chip.paraphrase { background: #5A2E2E; color: #F0BDB5; }
.lower-third.chapter-card .lt-ref { font-size: clamp(19px, 3.6vw, 32px); letter-spacing: .12em; }
body.display .lower-third.chapter-card .lt-ref { font-size: 0.85em; }
.lt-text { font-family: var(--serif); font-size: clamp(14px, 2.7vw, 21px); line-height: 1.45; color: #F7F0E1; }
.lt-text2 { font-family: var(--serif); font-style: italic; font-size: clamp(12px, 2.15vw, 16px); line-height: 1.5; color: #C9B99E; margin-top: 6px; }
.lt-copy {
  font-family: var(--sans); font-size: clamp(8px, 1.2vw, 10px);
  color: #8F826D; margin-top: 8px; letter-spacing: .02em;
}

.attribution {
  font-family: var(--sans); font-size: 11px; color: var(--text-soft);
  margin: 8px 2px 0; min-height: 14px;
}
.attribution a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
body.obs .attribution { display: none !important; }

.idle-note {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 12%; z-index: 1; color: var(--text-soft); font-size: 13.5px; text-align: center;
}

.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 6px; }
.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 11px 22px; border: 1px solid transparent;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn.gold { background: var(--gold); color: #241B0C; }
.btn.outline { background: transparent; color: var(--text); border-color: var(--panel-edge); }
.btn.ghost { background: transparent; color: var(--text-soft); border-color: var(--panel-edge); font-weight: 600; }
.toggles { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.tog { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-soft); cursor: pointer; user-select: none; }
.tog input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
.tog select {
  font-family: var(--sans); font-size: 12.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 5px;
  padding: 4px 6px; margin-left: 4px;
}
.mic-note { font-size: 12px; color: var(--text-soft); margin: 4px 0 0; min-height: 18px; }
.mic-note.err { color: #E08A7E; }

.pickers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.picker { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.picker label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.picker select {
  font-family: var(--sans); font-size: 13px; color: var(--text);
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 6px;
  padding: 8px 10px;
}

.feed-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 26px 0 10px; border-bottom: 1px solid var(--panel-edge); padding-bottom: 8px;
}
.feed-head h2 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin: 0; }
.feed-head span { font-family: var(--mono); font-size: 12px; color: var(--text-soft); }
.feed { display: flex; flex-direction: column; gap: 8px; min-height: 50px; }
.feed .empty { color: var(--text-soft); font-size: 13.5px; padding: 8px 2px; }
.hit {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 10px 14px; animation: slidein .3s ease;
}
@keyframes slidein { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .hit { animation: none; } }
.hit .t { font-family: var(--mono); font-size: 11px; color: var(--text-soft); }
.hit .r { font-weight: 700; color: var(--gold); font-size: 14px; }
.hit .how { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hit .how.explicit { color: var(--green); }
.hit .how.paraphrase { color: var(--crimson); }
.hit .how.match { color: var(--gold); }
.hit .lat { font-family: var(--mono); font-size: 11px; color: var(--text-soft); margin-left: auto; }
.hit .src { width: 100%; font-size: 12.5px; color: var(--text-soft); font-style: italic; }

footer { margin-top: 40px; text-align: center; font-size: 12px; color: var(--text-soft); }

/* In-room present mode (?display=1, or the "Present full screen" button):
   a sanctuary screen, not a dashboard. Empty and still until Scripture is
   spoken; one verse, centered, auto-fit by JS so it never clips — one verse
   or ten. Operator chrome stays hidden while a verse can show and slides in
   only on mouse movement, then fades. */
/* The gradient lives on .frame, not body: .frame is fixed inset:0 so it always
   fills the viewport, including inside native fullscreen where the body box
   would otherwise leave the browser's white fullscreen backdrop showing. */
body.display { background: #0B0906; }
body.display.running:not(.show-chrome) { cursor: none; }
body.display .topbar, body.display .transcript, body.display .badge-live,
body.display .feed-head, body.display .feed, body.display footer,
body.display .attribution, body.display #present-btn { display: none !important; }
body.display .wrap { max-width: none; padding: 0; }
body.display .frame {
  position: fixed; inset: 0; border: none; border-radius: 0; aspect-ratio: auto;
  background: radial-gradient(120% 100% at 50% 0%, #241C12 0%, #14100B 55%, #0B0906 100%);
}

/* idle: a calm prompt centered above the controls, so the operator can start */
body.display .idle-note {
  align-items: center; padding: 0; font-size: clamp(15px, 2vw, 20px);
}
body.display:not(.running) .controls,
body.display:not(.running) .pickers,
body.display:not(.running) .mic-note {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(700px, 92vw); margin: 0; justify-content: center; text-align: center;
}
body.display:not(.running) .controls { bottom: 32vh; flex-wrap: wrap; }
body.display:not(.running) .pickers { bottom: 17vh; }
body.display:not(.running) .mic-note { bottom: 11vh; }
body.display:not(.running) .toggles { margin-left: 0; justify-content: center; }

/* running: the verse owns the screen; chrome is a bottom bar, hidden until the mouse moves */
body.display.running .pickers,
body.display.running .mic-note,
body.display.running .idle-note { display: none !important; }
body.display.running .controls {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 7;
  display: flex; justify-content: center; align-items: center; gap: 14px;
  padding: 16px 20px; flex-wrap: wrap;
  background: linear-gradient(180deg, transparent, rgba(8,6,3,.94));
  transform: translateY(110%); transition: transform .28s ease;
}
body.display.running .toggles { margin-left: 0; }
body.display.running.show-chrome .controls { transform: none; }

/* exit affordance, top-right, part of the reveal-on-move chrome */
.present-exit { display: none; }
body.display .present-exit {
  display: inline-flex; position: fixed; top: 16px; right: 16px; z-index: 8;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
body.display:not(.running) .present-exit,
body.display.show-chrome .present-exit { opacity: 1; pointer-events: auto; }

/* the verse: centered, sized in em off the container so JS can shrink the
   whole block (reference, text, second language, copyright) as one to fit */
body.display .lower-third {
  top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; background: none; padding: 5vh 6vw;
  font-size: clamp(24px, 3.3vw, 50px);
}
body.display .lt-ref-row { justify-content: center; margin-bottom: 1.0em; }
body.display .lt-ref { font-size: 0.5em; }
body.display .lt-text { font-size: 1em; line-height: 1.45; max-width: 24ch; text-wrap: balance; color: #FBF6EC; }
body.display .lt-text2 { font-size: 0.62em; max-width: 30ch; margin-top: 0.8em; }
body.display .lt-copy { font-size: 0.24em; margin-top: 1.6em; opacity: .75; }
body.audience .lt-chip { display: none !important; }

/* OBS browser-source mode: transparent stage, overlay only */
body.obs { background: transparent; }
body.obs .topbar, body.obs .controls, body.obs .pickers, body.obs .mic-note,
body.obs .feed-head, body.obs .feed, body.obs footer, body.obs .idle-note,
body.obs .badge-live, body.obs .transcript { display: none !important; }
body.obs .wrap { max-width: none; padding: 0; }
body.obs .frame { border: none; border-radius: 0; background: transparent; aspect-ratio: auto; position: fixed; inset: 0; }

/* Guided demo: locked controls read as locked */
.btn:disabled, select:disabled, input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.tog:has(input:disabled), .tog:has(select:disabled) { opacity: 0.55; cursor: not-allowed; }

.btn.demo-pulse {
  animation: rllPulse 1s ease-in-out 3;
}
@keyframes rllPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 74, 62, 0); }
  50% { box-shadow: 0 0 0 12px rgba(210, 74, 62, 0.45); }
}

.toggles { position: relative; }
.tog-info {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--panel-edge, #4a3c28); background: transparent;
  color: inherit; opacity: 0.65; font-size: 11px; font-weight: 700;
  line-height: 1; cursor: pointer; padding: 0; margin-left: -4px;
}
.tog-info:hover { opacity: 1; }
.info-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: min(340px, 86vw); padding: 12px 14px; border-radius: 10px;
  background: #1d1710; border: 1px solid var(--panel-edge, #4a3c28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 12.5px; line-height: 1.55; text-align: left;
}
.info-pop p { margin: 6px 0 0; opacity: 0.85; }
.info-pop strong { font-size: 12px; letter-spacing: 0.04em; }

/* identity lockup */
.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark .mark { display: block; flex: none; }

/* the empty stage carries a faint mark, so idle reads as intentional; the
   sanctuary and OBS views stay pure */
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M19 14h10.5v10.5c0 8.2-3.9 13.6-10.5 16v-6.4c3.2-1.5 5-4 5.4-7.1H19Z" fill="%23D24A3E"/><path d="M35 14h10.5v10.5c0 8.2-3.9 13.6-10.5 16v-6.4c3.2-1.5 5-4 5.4-7.1H35Z" fill="%23D24A3E"/><g stroke="%23E3B54D" stroke-width="3.6" stroke-linecap="round"><line x1="14" y1="49" x2="14" y2="55"/><line x1="23" y1="46" x2="23" y2="58"/><line x1="32" y1="43" x2="32" y2="61"/><line x1="41" y1="46" x2="41" y2="58"/><line x1="50" y1="49" x2="50" y2="55"/></g></svg>');
  background-repeat: no-repeat; background-position: center 40%;
  background-size: clamp(64px, 12vw, 110px);
  opacity: 0.07;
}
body.display .frame::before, body.obs .frame::before { display: none; }

.btn:active { transform: scale(0.98); }
.hit:hover { border-color: #4a3c28; }

footer .footer-legal { margin-top: 6px; }
footer a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--gold); }

body.display.running .info-pop { top: auto; bottom: calc(100% + 8px); }

footer .consent-note { font-size: 11px; margin-top: 6px; opacity: .8; }
.consent-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
body.display .consent-note, body.obs .consent-note { display: none !important; }