/* Lampstand. Layout: a working desk (sidebar of instruments + the manuscript) and a black pulpit stage. */
:root {
  --bg: #ECEFEC;
  --surface: #FFFFFF;
  --surface-2: #F6F8F6;
  --ink: #142120;
  --muted: #586664;
  --line: #D3DAD7;
  --accent: #1D5D59;
  --accent-ink: #FFFFFF;
  --marigold: #C97A00;
  --danger: #B3261E;
  --ok: #2F7A3E;
  --warn: #B26A00;

  --t-hook: #C97A00;
  --t-story: #7A5AA6;
  --t-scripture: #1D5D59;
  --t-point: #24508F;
  --t-neighbor: #C2410C;
  --t-application: #2F7A3E;
  --t-invitation: #9B1C4A;
  --t-communion: #6B2D1F;
  --t-muted: #7C8885;

  --font-ui: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-ms: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mark: "Gloock", "Didot", Georgia, serif;
  --font-mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --font-pulpit: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --ink-brand: #0E1A1F; --brass: #E3A43A; --brass-hi: #FFD27A; --brass-lo: #C9861F;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1413; --surface: #161E1D; --surface-2: #1B2524; --ink: #E7EDEB; --muted: #9AA8A5;
    --line: #2A3634; --accent: #6CC1B9; --accent-ink: #0B1413; --marigold: #F0A93A; --danger: #F07A72;
    --ok: #7CCB8B; --warn: #F0A93A;
    --t-hook: #F0A93A; --t-story: #B79BE0; --t-scripture: #6CC1B9; --t-point: #86A9E8; --t-neighbor: #FF8A50;
    --t-application: #7CCB8B; --t-invitation: #F07AA6; --t-communion: #E0A08C; --t-muted: #8E9A97;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1413; --surface: #161E1D; --surface-2: #1B2524; --ink: #E7EDEB; --muted: #9AA8A5;
  --line: #2A3634; --accent: #6CC1B9; --accent-ink: #0B1413; --marigold: #F0A93A; --danger: #F07A72;
  --ok: #7CCB8B; --warn: #F0A93A;
  --t-hook: #F0A93A; --t-story: #B79BE0; --t-scripture: #6CC1B9; --t-point: #86A9E8; --t-neighbor: #FF8A50;
  --t-application: #7CCB8B; --t-invitation: #F07AA6; --t-communion: #E0A08C; --t-muted: #8E9A97;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-weight: 700; font-size: 14px; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { padding: 4px 8px; font-size: 13px; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; max-width: 1400px; margin: 0 auto; }
.mark { font-family: var(--font-mark); font-size: 22px; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.mark svg { width: 22px; height: 22px; }
.top select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); max-width: 260px; }
.spacer { flex: 1; }
.status { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.status.err { color: var(--danger); }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px; min-width: 260px; z-index: 30; }
.menu-list button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.menu-list button:hover { background: var(--surface-2); }
.menu-list small { display: block; color: var(--muted); font-size: 12px; }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* Desk layout */
.desk { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; padding-block: 20px 80px; padding-inline: 16px; max-width: 1400px; margin: 0 auto; }
@media (max-width: 960px) { .desk { grid-template-columns: minmax(0, 1fr); } .side { order: 2; } }
.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 961px) { .side { position: sticky; top: 70px; align-self: start; max-height: calc(100vh - 90px); overflow: auto; padding-right: 4px; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.panel h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 700; }
.field input, .field textarea { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 7px 9px; width: 100%; }
.field textarea { resize: vertical; min-height: 60px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* Timing */
.budget { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); margin: 6px 0 8px; }
.budget span { display: block; height: 100%; }
.budget .over { background: repeating-linear-gradient(45deg, var(--danger) 0 4px, transparent 4px 8px); }
.tot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; }
.tot b { font-size: 20px; font-family: var(--font-ui); }
.tot .good { color: var(--ok); } .tot .bad { color: var(--danger); }
.tl { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.tl li { display: grid; grid-template-columns: 44px 10px minmax(0,1fr) 40px; gap: 6px; align-items: center; padding: 3px 0; cursor: pointer; }
.tl li:hover .tl-t { text-decoration: underline; }
.tl .dot { width: 8px; height: 8px; border-radius: 50%; }
.tl .tl-time, .tl .tl-len { font-family: var(--font-mono); color: var(--muted); font-size: 12px; }
.tl .tl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sentence { font-family: var(--font-ms); font-size: 17px; line-height: 1.45; margin: 0; }
.sentence mark { background: none; color: var(--t-point); font-weight: 700; }
.mn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mn li { border-left: 3px solid var(--t-neighbor); padding-left: 8px; font-weight: 700; font-size: 14px; }
.mn li small { display: block; font-weight: 400; color: var(--muted); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.checks li { cursor: pointer; }
.checks .ok { color: var(--ok); font-weight: 700; }
.checks em { color: var(--muted); font-style: normal; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Blocks */
.main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.intro h1 { font-family: var(--font-mark); font-weight: 400; font-size: 32px; margin: 0; text-wrap: balance; }
.intro p { margin: 0; color: var(--muted); }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 80px; }
.block.flash { box-shadow: 0 0 0 3px var(--accent); }
.bh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bh .num { font-family: var(--font-mono); color: var(--muted); font-size: 12px; width: 22px; }
.typesel { border: 0; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; cursor: pointer; }
.bh .title { flex: 1 1 220px; min-width: 0; border: 0; background: none; font-weight: 700; font-size: 16px; padding: 4px 2px; border-bottom: 1px dashed transparent; }
.bh .title:hover, .bh .title:focus { border-bottom-color: var(--line); }
.bh .ref { width: 170px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; padding: 3px 7px; font-size: 13px; }
.mins { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.mins input { width: 56px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; padding: 3px 6px; font-family: var(--font-mono); }
.mins .est.long { color: var(--danger); font-weight: 700; }
.bb { display: grid; grid-template-columns: minmax(0, 1fr); }
.tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.tools .lbl { font-size: 12px; color: var(--muted); align-self: center; margin-right: 2px; }
.ms { width: 100%; border: 0; background: none; resize: none; padding: 10px 14px 14px; font-family: var(--font-ms); font-size: 16.5px; line-height: 1.55; min-height: 120px; overflow: hidden; }
details.sl { border-top: 1px solid var(--line); }
details.sl summary { cursor: pointer; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
details.sl textarea { width: 100%; border: 0; border-top: 1px dashed var(--line); background: var(--surface-2); padding: 10px 14px; font-family: var(--font-mono); font-size: 13px; min-height: 120px; resize: vertical; }
details.sl .hint { padding: 0 14px 8px; font-size: 12px; color: var(--muted); }
.bf { display: flex; gap: 6px; justify-content: flex-end; padding: 6px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.addrow { display: flex; justify-content: center; }
.addrow select { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 5px 12px; color: var(--muted); cursor: pointer; }
.confirm { color: var(--danger); font-size: 13px; align-self: center; }

/* Cue chips (editor preview + production) */
.chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; color: #fff; }
.cue-slide { background: #1F6FB2; } .cue-team { background: #6A4FB3; } .cue-ushers { background: #2F7A3E; }
.cue-lights { background: #A07400; } .cue-stage { background: #475569; } .cue-pause { background: #B3261E; }
.cue-video, .cue-audio { background: #0E7490; } .cue-CUE { background: #475569; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; overflow: auto; }
.modal-card { background: var(--surface); border-radius: 14px; max-width: 640px; width: 100%; padding: 22px; border: 1px solid var(--line); }
.modal-card h2 { margin: 0 0 6px; font-family: var(--font-mark); font-weight: 400; }
.modal-card p { color: var(--muted); margin: 0 0 12px; }
.linkbox { display: flex; gap: 8px; }
.linkbox input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.login-card .mark { font-size: 34px; margin-bottom: 4px; }
.login-card p { color: var(--muted); margin: 0 0 18px; }
.login-card input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 10px; }
.login-card .btn { width: 100%; justify-content: center; padding: 11px; }
.login-err { color: var(--danger); min-height: 1.4em; font-size: 14px; }

/* Pulpit: one fixed look, black stage, high legibility */
.pulpit { position: fixed; inset: 0; z-index: 100; background: #000; color: #F4F1E8; display: flex; flex-direction: column;
  font-family: var(--font-pulpit); --pp-size: 40px; --pp-mari: #F2A93B; --pp-muted: #8C8A82; color-scheme: dark; }
.pp-top { display: flex; align-items: center; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 20px 10px; border-bottom: 1px solid #222; font-family: var(--font-mono); font-size: 16px; flex-wrap: wrap; }
.pp-top .pp-sec { color: var(--pp-muted); flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); }
.pp-top .pp-sec b { color: #F4F1E8; }
.clock { font-size: 28px; font-weight: 600; letter-spacing: .02em; }
.clock small { display: block; font-size: 11px; color: var(--pp-muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 400; }
.clock.g { color: #7CCB8B; } .clock.y { color: #F2C14B; } .clock.r { color: #FF6B5E; }
.pp-body { flex: 1; overflow: hidden; padding: 22px clamp(20px, 5vw, 80px) 16px; position: relative; }
.pp-measure { position: absolute; left: -99999px; top: 0; visibility: hidden; height: auto; overflow: visible; flex: none; padding: 0; }
.mw { display: flow-root; }
.pp-body .ln { font-size: var(--pp-size); line-height: 1.28; margin: 0 0 .12em; max-width: 34ch; }
.pp-body .gap { height: calc(var(--pp-size) * .7); }
.pp-body .caps { color: var(--pp-mari); font-weight: 700; }
.pp-body .quote { font-family: var(--font-ms); font-style: italic; border-left: 4px solid #4D8F89; padding-left: .5em; max-width: 38ch; }
.pp-body .dir { color: var(--pp-muted); font-size: calc(var(--pp-size) * .6); font-style: italic; }
.pp-body .recap { color: #9FD3CD; font-weight: 700; }
.pp-cue { display: flex; align-items: center; gap: 12px; margin: .3em 0 .5em; padding: 8px 14px; border-radius: 8px; font-size: calc(var(--pp-size) * .5); font-weight: 700; max-width: 36ch; }
.pp-cue .k { font-size: .7em; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.35); }
.pp-cue.cue-slide { background: #0F3D63; color: #CFE6FB; } .pp-cue.cue-team { background: #3A2B66; color: #E3DAFB; }
.pp-cue.cue-ushers { background: #1C4A26; color: #D4F2DB; } .pp-cue.cue-pause { background: #5E1612; color: #FFD9D4; }
.pp-cue.cue-stage, .pp-cue.cue-CUE { background: #2A3340; color: #DCE3EC; } .pp-cue.cue-lights { background: #4D3800; color: #FBE8B5; }
.pp-cue.cue-video, .pp-cue.cue-audio { background: #0B3B48; color: #CDEFF7; }
.pulpit.nocues .pp-cue { display: none; }
.pp-head { color: var(--pp-muted); font-size: 14px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px; }
.pp-head b { color: #F4F1E8; letter-spacing: .02em; text-transform: none; font-size: 20px; display: block; margin-top: 2px; }
.pp-next { position: absolute; left: clamp(20px, 5vw, 80px); right: clamp(20px, 5vw, 80px); bottom: 10px; margin-top: 0; padding-top: 16px; border-top: 1px dashed #333; color: var(--pp-muted); font-size: 18px; }
.pp-bar { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); border-top: 1px solid #222; flex-wrap: wrap; }
.pp-bar button { background: #151515; color: #F4F1E8; border: 1px solid #333; border-radius: 10px; padding: 12px 18px; font-size: 17px; font-weight: 700; cursor: pointer; min-width: 64px; }
.pp-bar button.go { background: #F2A93B; color: #111; border-color: #F2A93B; }
.pp-bar button.big { min-width: 120px; }
.pp-progress { height: 4px; background: #1a1a1a; }
.pp-progress span { display: block; height: 100%; background: #F2A93B; transition: width .3s; }
.pp-live { font-size: 11px; color: var(--pp-muted); }
.pp-live.on::before { content: "●"; color: #FF6B5E; margin-right: 4px; }

@media print {
  .top, .side, .tools, .bf, .addrow, details.sl { display: none !important; }
  .desk { display: block; padding: 0; }
  .block { border: 0; break-inside: avoid-page; }
  .ms { font-size: 13pt; }
  body { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Sermon map ribbon (editor) */
.ribbon { position: relative; display: flex; height: 44px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.ribbon button { all: unset; cursor: pointer; position: relative; min-width: 3px; display: flex; align-items: flex-end; padding: 0 6px 5px; color: #fff; font-size: 11px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid rgba(255,255,255,.35); }
.ribbon button:hover, .ribbon button:focus-visible { filter: brightness(1.12); }
.ribbon button span { overflow: hidden; text-overflow: ellipsis; }
.ribbon .slot { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); pointer-events: none; }
.ribbon .slot::after { content: attr(data-l); position: absolute; top: 2px; left: 4px; font: 600 10px var(--font-mono); color: var(--ink); background: var(--surface); padding: 0 3px; border-radius: 3px; }
.ribbon-scale { display: flex; justify-content: space-between; font: 11px var(--font-mono); color: var(--muted); margin-top: 4px; }
.tl .act { font-family: var(--font-mono); font-size: 11px; }
.tl .act.g { color: var(--ok); } .tl .act.r { color: var(--danger); }
.tl li { grid-template-columns: 44px 10px minmax(0,1fr) auto; }
.reh { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* Pulpit rail */
.pp-main { flex: 1; display: flex; min-height: 0; }
.pp-main .pp-body { flex: 1; min-width: 0; }
.pp-rail { width: 250px; border-left: 1px solid #1d1d1d; overflow-y: auto; padding: 14px 10px; font-size: 14px; }
.pp-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-rail li { display: grid; grid-template-columns: 6px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; color: #8C8A82; cursor: pointer; }
.pp-rail li .bar { width: 6px; height: 100%; min-height: 18px; border-radius: 3px; }
.pp-rail li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-rail li .t { font-family: var(--font-mono); font-size: 12px; }
.pp-rail li.done { color: #55534D; }
.pp-rail li.cur { background: #1a1a1a; color: #F4F1E8; font-weight: 700; }
@media (max-width: 1000px) { .pp-rail { display: none; } }

/* Login glow */
.login { background: radial-gradient(60vmax 60vmax at 50% 30%, color-mix(in srgb, var(--marigold) 22%, transparent), transparent 60%), var(--bg); }
.login-card { box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--marigold) 45%, transparent); }
.flame { transform-origin: 50% 90%; animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker { 0%,100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.04,.97) rotate(-1.5deg); } 60% { transform: scale(.97,1.03) rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .flame { animation: none; } }

/* Pulpit: clicker stops */
.pp-cue.cue-slide.fired { opacity: .38; }
.pp-cue.cue-slide.live { outline: 3px solid #F2A93B; outline-offset: 3px; box-shadow: 0 0 40px -6px rgba(242,169,59,.55); }
.pp-bar button.go2 { background: #F4F1E8; color: #111; border-color: #F4F1E8; }
.pp-slide { font: 600 14px var(--font-mono); color: #F2A93B; min-width: 180px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.pp-flash { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); background: #F4F1E8; color: #111; padding: 8px 14px; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2; }
.pp-flash.on { opacity: 1; }
.pp-flash { max-width: min(620px, calc(100% - 32px)); text-align: center; line-height: 1.35; border-radius: 14px; }
.pp-keys { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: #151515; border: 1px solid #333; border-radius: 12px; padding: 12px 16px; font-size: 16px; max-width: min(640px, calc(100% - 32px)); z-index: 2; }
.pp-keys span { color: #F2A93B; font-family: var(--font-mono); }
.pp-keys small { display: block; color: #8C8A82; margin-top: 6px; font-size: 13px; }

.pp-body .ln.heard { text-decoration: underline; text-decoration-color: #F2A93B; text-decoration-thickness: 3px; text-underline-offset: .18em; }
.pp-bar button.listening { background: #3A1512; border-color: #FF6B5E; color: #FFD9D4; }

/* ---------- Brand: night ink + brass ---------- */
.top { background: var(--ink-brand); border-bottom: 1px solid #1E2C33; color: #EDEAE2; }
.top .btn { background: #15242B; border-color: #26363E; color: #EDEAE2; }
.top .btn:hover { border-color: #3A4D57; }
.top .btn.ghost { background: transparent; border-color: transparent; }
.top select { background: #15242B; border-color: #26363E; color: #EDEAE2; }
.top .status { color: #8FA1A8; } .top .status.err { color: #FF8A80; }
.btn.primary, .top .btn.primary { background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo)); color: #1A1206; border-color: var(--brass-lo); text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.btn.primary:hover { filter: brightness(1.05); }
.brandbar { display: flex; align-items: center; gap: 9px; margin-right: 8px; }
.brandbar .mk { width: 26px; height: 26px; color: var(--brass); filter: drop-shadow(0 0 10px rgba(227,164,58,.35)); }
.brandbar .wm { font-family: var(--font-mark); font-size: 24px; letter-spacing: .01em; line-height: 1; }
.brandbar .tag { font: 600 10px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); border: 1px solid currentColor; border-radius: 4px; padding: 2px 6px; }
.intro h1, .hero h1 { font-family: var(--font-mark); letter-spacing: -.005em; }
.panel h3 { font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; }
.typesel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; }
.bh .title { font-weight: 700; letter-spacing: -.005em; }

/* Login: a single spotlight on a dark stage */
.login { background:
    radial-gradient(38vmax 70vmax at 50% -12%, rgba(255,210,122,.20), transparent 62%),
    radial-gradient(90vmax 60vmax at 50% 120%, #10262C, transparent 60%), #070C0F; color: #EDEAE2; }
.login-card { background: rgba(16,24,29,.72); border: 1px solid #22323A; backdrop-filter: blur(6px); text-align: center; box-shadow: 0 40px 120px -40px rgba(227,164,58,.45); }
.login-mark svg { width: 72px; height: 72px; color: var(--brass); filter: drop-shadow(0 0 26px rgba(255,190,90,.55)); }
.login-wm { font-family: var(--font-mark); font-size: 46px; line-height: 1; margin: 6px 0 8px; letter-spacing: .005em; }
.login-tag { font: 600 11px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin: 0 0 22px !important; }
.login-card input { background: #0B1216; border-color: #26363E; color: #EDEAE2; text-align: center; }
.login-card .field span { color: #8FA1A8 !important; }
.login-err { color: #FF8A80; }
#ppBody:focus, #ppBody:focus-visible { outline: none; }
.clock { font-family: var(--font-mono); font-size: 22px; letter-spacing: -.01em; }
.clock small { font-size: 9.5px; letter-spacing: .16em; }
.mins input { width: 66px; }
.login-card .login-tag { color: var(--brass); }
.pp-bar button { font-family: var(--font-ui); }
.pp-top .pp-sec { font-family: var(--font-ui); }
@media (max-width: 1100px) { .pp-bar button { padding: 10px 12px; font-size: 15px; } .pp-bar button.big { min-width: 96px; } }

/* ===== QA pass fixes ===== */
:root { --ribbon-ink: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ribbon-ink: #0B1418; } }
:root[data-theme="dark"] { --ribbon-ink: #0B1418; }
/* 1. menu text readable inside the dark header */
.menu-list { color: var(--ink); }
.menu-list button { color: var(--ink); font-family: var(--font-ui); }
.menu-list button b { font-weight: 700; }
.menu-list button.danger b { color: var(--danger); }
.menu-list .mobile-only { display: none; }
/* 6. sermon picker */
.top select { max-width: 340px; padding-right: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
/* 8/9. ribbon + type chips readable in dark mode; labels hide when a segment is tiny */
.ribbon button { color: var(--ribbon-ink); container-type: inline-size; }
@container (max-width: 54px) { .ribbon button span { display: none; } }
.typesel { color: var(--ribbon-ink); }
/* 5. sidebar edges read as scroll, notes sized in whole lines */
@media (min-width: 961px) { .side { -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent); mask-image: linear-gradient(to bottom, #000 94%, transparent); padding-bottom: 40px; } }
#m-notes { line-height: 1.45; height: calc(4 * 1.45em + 16px); }
/* 11. phone header: one tidy row */
@media (max-width: 760px) {
  .top-in { gap: 8px; }
  #newSermonBtn, #signOutBtn, #status { display: none; }
  .menu-list .mobile-only { display: block; }
  .top select { order: 10; flex: 1 1 100%; max-width: none; }
  #prodBtn { font-size: 0; padding: 7px 10px; } #prodBtn::after { content: "Share"; font-size: 14px; }
  .brandbar .wm { font-size: 21px; }
}
/* 10. Pulpit bar: one row, secondary controls in a menu */
.pp-bar { flex-wrap: nowrap; justify-content: space-between; gap: 8px; position: relative; }
.pp-bar .grp { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pp-more { position: absolute; right: 12px; bottom: calc(100% + 8px); background: #151515; border: 1px solid #333; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 220px; z-index: 3; }
.pp-more button { text-align: left; min-width: 0 !important; width: 100%; }
.pp-live { font-size: 13px; }
@media (max-width: 900px) { .pp-slide { display: none; } }

/* ===== Lamplighter ===== */
.lampbtn { border-color: color-mix(in srgb, var(--brass) 55%, #26363E) !important; }
.lampbtn .spark { color: var(--brass); }
.lamp { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgba(0,0,0,.35); padding-top: env(safe-area-inset-top, 0px); }
body.lamp-open .desk { padding-right: min(456px, 0px); }
@media (min-width: 1300px) { body.lamp-open .desk { margin-right: 440px; max-width: none; } }
.lamp-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; background: var(--ink-brand); color: #EDEAE2; }
.lamp-head .mk { width: 28px; height: 28px; color: var(--brass); filter: drop-shadow(0 0 10px rgba(227,164,58,.45)); flex: none; }
.lamp-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lamp-head b { font: 400 20px/1.1 var(--font-mark); }
.lamp-head small { color: #8FA1A8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lamp-head .btn { color: #EDEAE2; }
.lamp-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lamp-quick button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 5px 11px; font: 600 12.5px var(--font-ui); cursor: pointer; color: var(--ink); }
.lamp-quick button:hover { border-color: var(--brass); }
.lamp-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lamp-empty { margin: auto 0; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.lamp-empty b { color: var(--ink); font: 400 20px/1.2 var(--font-mark); }
.msg { display: flex; flex-direction: column; gap: 6px; }
.msg .bubble { white-space: pre-wrap; line-height: 1.5; font-size: 14.5px; border-radius: 12px; padding: 10px 12px; max-width: 100%; overflow-wrap: anywhere; }
.msg.user { align-items: flex-end; } .msg.user .bubble { background: var(--ink-brand); color: #EDEAE2; max-width: 88%; }
.msg.assistant .bubble { background: var(--surface-2); border: 1px solid var(--line); font-family: var(--font-ms); font-size: 15.5px; }
.msg .thinking { color: var(--muted); font-style: italic; font-family: var(--font-ui); }
.msg .err { color: var(--danger); font-family: var(--font-ui); }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-actions button { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 4px 9px; font: 600 12px var(--font-ui); cursor: pointer; color: var(--ink); }
.msg-actions button:hover { border-color: var(--brass); }
.lamp-form { display: flex; gap: 8px; padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); border-top: 1px solid var(--line); }
.lamp-form textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 9px 11px; font: 14.5px/1.4 var(--font-ui); }
@media (max-width: 760px) { #lampBtn { font-size: 0; padding: 7px 10px; } #lampBtn .spark { font-size: 15px; } }

/* ===== Selects: one consistent, custom-drawn control everywhere ===== */
select { -webkit-appearance: none; appearance: none; font-family: var(--font-ui); line-height: 1.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23889' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; padding-right: 28px !important; }
.top select { height: 34px; padding: 0 30px 0 12px; border-radius: 8px; }
.typesel { padding: 4px 24px 4px 10px !important; background-position: right 8px center; height: 24px; line-height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.addrow select { height: 32px; padding: 0 30px 0 14px; border-radius: 999px; font-size: 14px; }
.look-opts select { height: 36px; padding: 0 30px 0 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .typesel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230B1418' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] .typesel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230B1418' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.pp-heard { position: absolute; left: 50%; transform: translateX(-50%); bottom: 78px; max-width: min(720px, calc(100% - 32px)); font: 13px var(--font-mono); color: #8C8A82; background: rgba(20,20,20,.85); border: 1px solid #2a2a2a; border-radius: 999px; padding: 5px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; pointer-events: none; }
.pp-heard::before { content: "● heard: "; color: #FF6B5E; }

/* ===== QA pass 2 ===== */
/* 1. Selects keep their chevron even where a background color is set */
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23889' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 10px 6px !important; }
.top select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C9D3D7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.addrow select { padding: 0 32px 0 16px; }
/* 2. Type chip sized to its label; invisible native select on top for the real menu */
.typechip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 10px; border-radius: 999px; color: var(--ribbon-ink);
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; flex: none; }
.typechip select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; font-size: 16px; }
.typechip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 3. Lamplighter sits below the header */
.lamp { top: var(--top-h, 58px); padding-top: 0; }
.lamp-head .btn { width: 32px; height: 32px; justify-content: center; padding: 0; font-size: 15px; }
/* 4/11. Header at tablet and phone widths */
#prodBtn .short { display: none; }
@media (max-width: 1240px) {
  #signOutBtn, #status { display: none; }
  .menu-list .mobile-only { display: block; }
  #prodBtn .long { display: none; } #prodBtn .short { display: inline; }
}
@media (max-width: 760px) {
  #prodBtn { font-size: 14px; padding: 7px 10px; } #prodBtn::after { content: none; }
  .top select { order: 10; flex: 1 1 auto; min-width: 0; }
  #pulpitBtn { order: 11; flex: none; }
}
/* 5. Section header: title row, then reference + minutes */
.bh { display: flex; flex-wrap: wrap; }
.bh .title { flex: 1 1 260px; }
.bh-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 1200px) { .bh-meta { flex: 1 1 100%; margin-left: 30px; } .bh-meta .ref { flex: 1 1 auto; width: auto; min-width: 0; } }
@media (max-width: 760px) { .bh-meta { margin-left: 0; flex-wrap: wrap; } .bh-meta .ref { flex: 1 1 100%; } }
/* 9. More menu */
.menu-list { min-width: 300px; } .menu-list small { text-wrap: pretty; }
@media (max-width: 760px) {
  .top-in { gap: 6px; padding: 10px 12px; }
  .brandbar { gap: 7px; margin-right: 0; } .brandbar .wm { font-size: 19px; } .brandbar .mk { width: 22px; height: 22px; }
  .top .btn { padding: 7px 9px; }
  .spacer { flex: 1 1 0; }
}

/* ===== Manuscript import ===== */
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; text-align: center; background: var(--surface-2); margin: 6px 0 14px; position: relative; }
.drop:hover, .drop.over { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 8%, var(--surface-2)); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop b { font-size: 16px; } .drop span { color: var(--muted); font-size: 13px; } .drop em { font-style: normal; font-weight: 700; color: var(--accent); margin-top: 4px; }
.imp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
@media (max-width: 560px) { .imp-opts { grid-template-columns: 1fr; } }
.imp-opts label { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.imp-opts label:has(input:checked) { border-color: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 25%, transparent); }
.imp-opts input { margin-top: 3px; } .imp-opts small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.imp-prog { margin-bottom: 14px; } .imp-prog .bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-bottom: 8px; }
.imp-prog .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); transition: width .4s; }
#impMsg { font-size: 14px; color: var(--muted); }
.imp-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 1240px) { #importBtn { display: none; } }
@media (max-width: 1500px) and (min-width: 1241px) { .top .status { display: none; } }
.pp-heard[data-state="reconnecting"]::before, .pp-heard[data-state="starting"]::before { content: "○ "; color: #E3A43A; }
.pp-heard[data-state="reconnecting"], .pp-heard[data-state="starting"] { color: #E3A43A; }