/* BMI Studio design tokens — derived from biblicaltools.org, not invented.
   Sources (read-only): index.html + bible-reader.css :root (Cormorant Garamond / Inter, gold #D4AF37,
   ivory #F5F5F5, rich black #0A0A0A, earthy brown #5A3921, radii 4/8/16, uppercase nav Inter 500 .8px),
   the site header (rgba(10,10,10,.88) dark bar, gold hairline dropdown border rgba(212,175,55,.3)),
   and the Quiet Hour candle page (Cormorant + Inter, #CFA64C gold caps .22em, #F4EBD8 ivory, #AC9D80 muted,
   gold-hairline outline buttons). Fonts are the candle page's own files. */
@font-face{font-family:"Cormorant";font-weight:500;font-display:swap;src:url(/fonts/Cormorant-Medium.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:600;font-display:swap;src:url(/fonts/Cormorant-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(/fonts/Inter-Medium.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/Inter-SemiBold.woff2) format("woff2")}
:root{
  --serif:"Cormorant","Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",sans-serif;
  --caps-track:.18em; --nav-track:.06em; --r-sm:4px; --r-md:8px; --r-lg:16px; --ease:cubic-bezier(.16,1,.3,1);
  --brown:#8B4513; --earth:#5A3921;
  /* — the reader's Reading mode, 2026-10-31: page #fffefc→#fdfbf7, panels #f8f3e8, hairlines #d4c4a8/#e4d5bc/#efe6d8,
     text #2c2416/#4a3f2f/#6b5d4d, faint #b5a48a, accent #8B4513, shadow rgba(44,36,22,.16) */
  --bg:#fdfbf7; --bg-glow:#fffefc; --bar:rgba(253,251,247,.94); --surface:#f8f3e8; --surface-2:#f3ecdf; --raise:#fffefc; --stage:#f3ecdf;
  --text:#2c2416; --text-2:#4a3f2f; --muted:#6b5d4d; --faint:#b5a48a;
  --accent:#8B4513; --accent-strong:#6f370f; --on-accent:#fffefc; --gold-site:#D4AF37;
  --hair:#d4c4a8; --hair-strong:#b5a48a; --rule:#efe6d8;
  --shadow:0 10px 30px rgba(44,36,22,.16); --scrim:rgba(44,36,22,.35); --plate:rgba(253,251,247,.92);
}
/* DARK: one switch, <html data-theme="dark"> */
:root[data-theme="dark"]{ /* the site header and the Quiet Hour candle page */
  --bg:#0A0A0A; --bg-glow:#14100c; --bar:rgba(10,10,10,.92); --surface:#121110; --surface-2:#1a1816; --raise:#211e1b; --stage:#050403;
  --text:#F4EBD8; --text-2:#ECE7DD; --muted:#AC9D80; --faint:rgba(155,148,138,.55);
  --accent:#CFA64C; --accent-strong:#E6C878; --on-accent:#0A0A0A;
  --hair:rgba(212,175,55,.22); --hair-strong:rgba(230,200,120,.55); --rule:rgba(244,235,216,.08);
  --shadow:0 12px 32px rgba(0,0,0,.6); --scrim:rgba(0,0,0,.7); --plate:rgba(0,0,0,.75);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(ellipse at 50% 30%,var(--bg-glow) 60%,var(--bg) 100%) fixed;background-color:var(--bg);color:var(--text);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.caps{font:600 11px/1.2 var(--sans);letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--muted)}
.serif{font-family:var(--serif)}
/* buttons: the candle page's gold-hairline outline, and one gold fill for the single primary action */
.btn{font:600 12px/1 var(--sans);letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--accent);
  background:transparent;border:1px solid var(--hair);border-radius:999px;padding:11px 22px;cursor:pointer;transition:background .25s var(--ease),border-color .25s}
.btn:hover{background:var(--surface);border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-strong)}
.btn.quiet{border-color:transparent;color:var(--muted)}
.btn.quiet:hover{color:var(--accent);background:transparent}
.btn:disabled{opacity:.4;cursor:default}
.link{color:var(--accent);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
input,select,textarea{font:400 14px var(--sans);color:var(--text);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:8px 2px;border-radius:0;outline:none}
input:focus,select:focus{border-bottom-color:var(--accent)}
select option{background:var(--raise);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the drawn hand (no emoji) */
.hand-glyph{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:currentColor;
  -webkit-mask:url(/img/hand.svg) center/contain no-repeat;mask:url(/img/hand.svg) center/contain no-repeat}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;background:var(--faint)}
.dot.ok{background:var(--hair-strong)}.dot.warn{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}.dot.bad{background:var(--accent)}.dot.off{background:var(--rule)}
/* the Light / Dark toggle: top bar, right end, thumb-sized */
.theme-toggle{display:inline-flex;border:1px solid var(--hair);border-radius:999px;padding:3px;gap:2px;background:var(--surface);flex:none}
.theme-toggle button{min-height:38px;min-width:64px;background:none;border:0;border-radius:999px;padding:6px 14px;font:500 14px var(--sans);color:var(--muted);cursor:pointer}
.theme-toggle button.on{background:var(--raise);color:var(--text);box-shadow:0 1px 3px rgba(44,36,22,.18)}
.theme-float{position:fixed;top:12px;right:14px;z-index:60}
[hidden]{display:none!important}

/* Mic state, the same on every page as on the program: muted = muted-grey ring + crossed mic; speaking = gold ring. No red. */
.mic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--hair);flex:none;color:var(--muted);vertical-align:middle}
.mic svg{width:16px;height:16px}.mic.muted{border-color:#9c9184;border-width:3px}.mic.speaking{border-color:var(--accent);border-width:3px;color:var(--accent)}
:root[data-theme="dark"] .mic.speaking{border-color:#CFA64C;color:#CFA64C}
/* Comments pane */
.cm{display:flex;flex-direction:column;gap:8px}.cm-head{display:flex;justify-content:space-between;gap:8px;font:500 13px var(--sans);color:var(--muted)}
.cm-hid{background:none;border:0;color:var(--accent);font:500 13px var(--sans);cursor:pointer;padding:0}
.cm-list{height:380px;overflow:auto;border:1px solid var(--hair);border-radius:6px;background:var(--raise)}
.cm-row{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:9px 12px;cursor:pointer;color:var(--text);font:inherit}
.cm-row:hover{background:var(--surface-2)}.cm-row.cm-live{box-shadow:inset 3px 0 0 var(--accent)}.cm-row.cm-hidden{opacity:.55}
.cm-mark{flex:none;width:26px;height:20px;border:1px solid var(--hair);border-radius:3px;font:600 10px/18px var(--sans);letter-spacing:.06em;text-align:center;color:var(--muted);margin-top:2px}
.cm-body{display:flex;flex-direction:column;min-width:0}.cm-name{font:600 14px var(--sans)}.cm-name em{font-weight:400;color:var(--muted)}.cm-text{font:400 15px/1.4 var(--sans);overflow-wrap:anywhere}
.cm-empty{color:var(--muted);padding:14px;font:400 14px/1.5 var(--sans)}
.cm-new{align-self:center;margin-top:-46px;position:relative;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:6px 14px;font:500 13px var(--sans);cursor:pointer}
.cm-on,.cm-ask{border:1px solid var(--accent);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.cm-onlbl{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cm-ontext{font:500 15px/1.4 var(--sans)}.cm-ask blockquote{margin:0;font:400 15px/1.45 var(--serif);color:var(--muted)}.cm-btns{display:flex;gap:8px}.cm-btns .btn{flex:1}
.cm-big .cm-name{font-size:18px}.cm-big .cm-text{font-size:19px}.cm-big .cm-list{height:440px}.cm-big .cm-ontext{font-size:19px}

/* side-talk: muted and talking. A quiet grey pulse for Ernst/Producer only; never in the broadcast, no sound */
.sidetalk{display:inline-block;width:10px;height:10px;border-radius:50%;background:#9c9184;margin-right:6px;vertical-align:middle;animation:sidePulse 1.6s ease-in-out infinite}
@keyframes sidePulse{0%,100%{opacity:.25}50%{opacity:.9}}@media (prefers-reduced-motion:reduce){.sidetalk{animation:none;opacity:.7}}
/* microphone / camera pickers: one plain dropdown each */
.devpick{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}.devpick label{display:flex;flex-direction:column;gap:4px;font:500 13px var(--sans);color:var(--muted);flex:1 1 200px;min-width:0}
.devpick select{font:400 15px var(--sans);padding:8px 10px;border:1px solid var(--hair);border-radius:6px;background:var(--raise);color:var(--text);max-width:100%}