/* ==========================================================================
   Scripture Presenter — design tokens
   Palette: deep navy grounds, warm gold accent, soft ivory text.
   Display type: a serif built for the scripture itself — the one moment
   this app exists to serve. Everything operational (search, buttons,
   status) uses a plain grotesk so it reads fast under pressure.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy-950: #0a0e1a;
  --navy-900: #0e1424;
  --navy-800: #161f38;
  --navy-700: #212c4c;
  --navy-600: #2e3b60;

  --gold: #c4a23c;
  --gold-light: #e3c876;
  --gold-dim: #8a7128;

  /* Royal blue — the "system" accent: live state, active panels/tabs,
     focus and selection chrome. Gold stays reserved for the scripture
     itself (the one thing this app exists to present), so the two never
     compete for attention in the same control. */
  --royal: #3450c9;
  --royal-light: #6b84e8;
  --royal-dim: #1c2c7a;

  --ivory: #f4f1e8;
  --ivory-dim: #cfd0d6;
  --muted: #8b93aa;

  --brick: #b4483c;
  --brick-light: #d16a5d;
  --sage: #5c9576;

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 10px;
  --radius-sm: 6px;

  /* Workspace layout tokens (Part 5A) */
  --dock-left-w: 320px;
  --dock-right-w: 300px;
  --topbar-h: 52px;
  --bottombar-h: 68px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--navy-950);
  color: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a { color: var(--gold-light); }

::selection { background: var(--gold-dim); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--royal-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Presenter shell
   ========================================================================== */

body.presenter {
  min-height: 100vh;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(196, 162, 60, 0.07), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}

.shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* Header */
.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--navy-700);
  margin-bottom: 24px;
}

.app-header .title-block .eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
  font-weight: 600;
}

.app-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}

.app-header .subtitle {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  font-size: 12.5px;
  color: var(--ivory-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.status-pill[data-status="connected"] .status-dot { background: var(--sage); box-shadow: 0 0 8px rgba(92, 149, 118, 0.7); }
.status-pill[data-status="local-only"] .status-dot { background: var(--gold); box-shadow: 0 0 8px rgba(196, 162, 60, 0.6); }
.status-pill[data-status="error"] .status-dot { background: var(--brick-light); box-shadow: 0 0 8px rgba(209, 106, 93, 0.6); }
.status-pill[data-status="connecting"] .status-dot { background: var(--muted); animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Sections */
.panel {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.panel-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 12px;
}

/* Search */
.search-row {
  display: flex;
  gap: 10px;
}

.search-row input[type="text"] {
  flex: 1;
  background: var(--navy-900);
  border: 1px solid var(--navy-600);
  border-radius: var(--radius-sm);
  color: var(--ivory);
  font-size: 16px;
  padding: 13px 14px;
  font-family: var(--font-ui);
}

.search-row input[type="text"]::placeholder { color: var(--muted); }

.search-row input[type="text"]:focus {
  border-color: var(--gold-dim);
}

.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.08s ease, filter 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-search {
  background: var(--navy-600);
  color: var(--ivory);
}
.btn-search:hover { filter: brightness(1.15); }

.version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.version-row label {
  font-size: 13px;
  color: var(--muted);
}

select#version-select {
  background: var(--navy-900);
  border: 1px solid var(--navy-600);
  color: var(--ivory);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--font-ui);
}

.helper-text {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}

/* Results */
#results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.result-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy-700);
  background: var(--navy-900);
}

.result-item input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.result-item .result-text {
  flex: 1;
}

.result-item .verse-ref {
  font-size: 12px;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 3px;
}

.result-item .verse-body {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ivory-dim);
}

.empty-state, .error-state {
  padding: 18px 4px;
  color: var(--muted);
  font-size: 14px;
}

.error-state { color: var(--brick-light); }

/* Preview */
.preview-card {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.preview-card .preview-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 20px 0;
}

.preview-card .preview-ref {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.preview-card .preview-text {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ivory);
}

.preview-card .gold-rule {
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin: 16px auto 0;
  opacity: 0.8;
}

.action-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.btn-live {
  flex: 1;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: var(--navy-950);
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 15px 20px;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(196, 162, 60, 0.25);
}
.btn-live:hover { filter: brightness(1.06); }
.btn-live:disabled {
  background: var(--navy-700);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-clear {
  background: transparent;
  border: 1px solid var(--brick);
  color: var(--brick-light);
  padding: 15px 22px;
  font-weight: 600;
}
.btn-clear:hover { background: rgba(180, 72, 60, 0.1); }

/* Live-now banner */
.live-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(196, 162, 60, 0.09);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--gold-light);
}
.live-banner.visible { display: flex; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(196,162,60,0.7);
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Setup / help */
details.setup-help summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}
details.setup-help summary::-webkit-details-marker { display: none; }
details.setup-help summary::before {
  content: "▸ ";
  color: var(--gold);
}
details.setup-help[open] summary::before { content: "▾ "; }

details.setup-help ol {
  margin: 14px 0 4px;
  padding-left: 20px;
  color: var(--ivory-dim);
  font-size: 13.5px;
  line-height: 1.8;
}

details.setup-help code {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--gold-light);
}

/* Global safety net: some components below set their own `display` on an
   element that can also carry the native `hidden` attribute (drawers,
   dock panels, etc). Without this rule, that component's own `display`
   declaration wins over the browser's default [hidden] rule (same
   specificity, author sheet beats UA sheet), so a "hidden" element still
   renders and can even intercept clicks. This rule uses !important so
   `hidden` always actually hides, no matter what else targets the element. */
[hidden] { display: none !important; }

/* Toast (lightweight status/error surface) */
#toast {
  position: fixed;
  bottom: calc(var(--bottombar-h) + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-800);
  border: 1px solid var(--navy-600);
  color: var(--ivory);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 90vw;
  z-index: 50;
}
#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#toast.tone-error { border-color: var(--brick); }

@media (max-width: 560px) {
  .preview-card .preview-text { font-size: 19px; }
}

/* ==========================================================================
   Part 2 additions
   ========================================================================== */

/* Live status strip */
.live-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy-700);
  background: var(--navy-800);
  margin-bottom: 20px;
  font-size: 13.5px;
}

.live-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.live-status.is-live { border-color: var(--gold-dim); background: rgba(196,162,60,0.08); }
.live-status.is-live .dot { background: var(--gold); box-shadow: 0 0 8px rgba(196,162,60,0.7); animation: pulse 1.6s ease-in-out infinite; }
.live-status .label { color: var(--muted); }
.live-status.is-live .label { color: var(--gold-light); font-weight: 600; }
.live-status .ref { color: var(--ivory); font-weight: 600; }
.live-status .ver { color: var(--muted); font-size: 12px; }

/* Bible navigation (Book / Chapter / Verse) */
.nav-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto auto;
  gap: 10px;
  align-items: end;
}

.nav-field label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-field select {
  width: 100%;
  background: var(--navy-900);
  border: 1px solid var(--navy-600);
  color: var(--ivory);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 14px;
  font-family: var(--font-ui);
}

.icon-btn {
  background: var(--navy-700);
  border: 1px solid var(--navy-600);
  color: var(--ivory);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.icon-btn:hover { filter: brightness(1.2); }

.chapter-verse-nav {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .nav-row { grid-template-columns: 1fr 1fr; }
}

/* Preview / Live split */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 700px) {
  .split-grid { grid-template-columns: 1fr; }
}

.split-col .panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.split-col.live-col .panel-label { color: var(--gold-light); }

.favorite-toggle {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 0 0 8px;
}

/* Recent / Favorites lists */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: 999px;
  padding: 7px 12px 7px 14px;
  font-size: 12.5px;
  color: var(--ivory-dim);
  cursor: pointer;
}
.chip:hover { border-color: var(--gold-dim); color: var(--ivory); }
.chip .chip-ver { color: var(--muted); font-size: 11px; }
.chip .chip-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 0 0 4px;
  line-height: 1;
}
.chip .chip-remove:hover { color: var(--brick-light); }

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panel-header-row .panel-label { margin: 0; }

.text-link-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}
.text-link-btn:hover { color: var(--ivory-dim); }

/* Theme + Display settings */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 560px) {
  .settings-grid { grid-template-columns: 1fr; }
}

.setting-field label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.setting-field select,
.setting-field input[type="range"] {
  width: 100%;
}

.theme-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-swatch {
  border: 1px solid var(--navy-600);
  background: var(--navy-900);
  color: var(--ivory-dim);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 12.5px;
}
.theme-swatch.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(196,162,60,0.08);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ivory-dim);
}
.toggle-row input[type="checkbox"] {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
}

input[type="range"] {
  accent-color: var(--gold);
}

/* Keyboard shortcuts help */
.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.shortcut-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ivory-dim);
}
kbd {
  background: var(--navy-900);
  border: 1px solid var(--navy-600);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--gold-light);
}

/* ==========================================================================
   Presentation themes — scoped to .sp-surface, the shared "logical body"
   for anything painted by render-engine.js. display.html and projector.html
   apply this class to <body>; the in-app Presentation Canvas applies it to
   an embedded div. Same rules, three mount points, zero visual drift.

   Sizing is done entirely in container-query units (cqw/cqh), relative to
   .sp-surface's OWN box (see "container-type: size" below) — never vw/vh.
   vw/vh measure the whole browser window, which is fine when .sp-surface
   happens to fill the window (OBS Browser Source, the Projector output)
   but is wrong inside the in-app Preview/Live split panes, where each
   pane is only a fraction of the window. Sizing off cqw/cqh instead means
   the Preview/Live panes are always a true miniature of the real output,
   at any window size — no more oversized, clipped, "swallowed" text.
   ========================================================================== */

.sp-surface.theme-clean .display-stage { padding: 6cqh 8cqw; }

.sp-surface.theme-fullscreen .display-stage { padding: 4cqh 5cqw; }
.sp-surface.theme-fullscreen .display-text { font-size: clamp(32px, 5cqw, 68px); }

.sp-surface.theme-lower-third .display-stage {
  align-items: flex-end;
  padding: 0 6cqw 6cqh;
}
.sp-surface.theme-lower-third .display-card {
  max-width: 90cqw;
  width: 100%;
  background: linear-gradient(180deg, rgba(10,14,26,0), rgba(10,14,26,0.82) 30%, rgba(10,14,26,0.88));
  border-top: 1px solid rgba(196,162,60,0.35);
  padding: 3cqh 3cqw 3.5cqh;
}
.sp-surface.theme-lower-third .display-text { font-size: clamp(20px, 2.6cqw, 34px); }
.sp-surface.theme-lower-third .display-reference { font-size: clamp(12px, 1.3cqw, 18px); }

/* --- Lower Third: Boxed — a compact card anchored bottom-left, not full
   width. Reads as a broadcast "nameplate," good when the camera shot has
   room to spare around the edges. --- */
.sp-surface.theme-lower-third-boxed .display-stage {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 5cqw 6cqh;
}
.sp-surface.theme-lower-third-boxed .display-card {
  max-width: 62cqw;
  width: auto;
  background: linear-gradient(135deg, rgba(15,20,38,0.95), rgba(10,14,26,0.9));
  border: 1px solid rgba(196,162,60,0.4);
  border-radius: 14px;
  padding: 2.6cqh 3cqw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(196,162,60,0.08) inset;
}
.sp-surface.theme-lower-third-boxed .display-text { font-size: clamp(18px, 2.3cqw, 30px); }
.sp-surface.theme-lower-third-boxed .display-reference { font-size: clamp(11px, 1.2cqw, 16px); }
.sp-surface.theme-lower-third-boxed .display-rule { margin: 1.6cqh 0 0; }

/* --- Lower Third: Ribbon — a gold accent edge with the card notched off
   the left side of the screen, editorial/news-ticker feel. --- */
.sp-surface.theme-lower-third-ribbon .display-stage {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 7cqh;
}
.sp-surface.theme-lower-third-ribbon .display-card {
  position: relative;
  max-width: 80cqw;
  width: auto;
  background: rgba(10,14,26,0.88);
  padding: 2.2cqh 4cqw 2.4cqh 5cqw;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.sp-surface.theme-lower-third-ribbon .display-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.sp-surface.theme-lower-third-ribbon .display-text { font-size: clamp(18px, 2.4cqw, 32px); }
.sp-surface.theme-lower-third-ribbon .display-reference { font-size: clamp(11px, 1.2cqw, 16px); }
.sp-surface.theme-lower-third-ribbon .display-rule { display: none; }

/* --- Lower Third: Minimal — no background box at all, just reference +
   text with a thin gold underline. Sits directly on the camera feed;
   pairs well with the Transparent scene's OBS overlay use case. --- */
.sp-surface.theme-lower-third-minimal .display-stage {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 6cqw 7cqh;
}
.sp-surface.theme-lower-third-minimal .display-card {
  max-width: 72cqw;
  width: auto;
  background: none;
  padding: 0;
  border-top: none;
  box-shadow: none;
}
.sp-surface.theme-lower-third-minimal .display-text {
  font-size: clamp(18px, 2.4cqw, 32px);
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.5);
}
.sp-surface.theme-lower-third-minimal .display-reference {
  font-size: clamp(11px, 1.2cqw, 16px);
  display: inline-block;
  padding-bottom: 0.7cqh;
  border-bottom: 2px solid var(--gold);
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.5);
}
.sp-surface.theme-lower-third-minimal .display-rule { display: none; }

.sp-surface.theme-transparent .display-card { background: none; }
.sp-surface.theme-transparent .display-text,
.sp-surface.theme-transparent .display-reference {
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.5);
}

/* Alignment */
.sp-surface .display-card.align-left { text-align: left; }
.sp-surface .display-card.align-left .display-rule { margin-left: 0; }

/* Passage mode: each verse on its own line with its number */
.display-verse-line {
  display: block;
  margin-bottom: 1.4cqh;
}
.display-verse-line .vnum {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--gold-light);
  font-size: 0.55em;
  vertical-align: super;
  margin-right: 0.3em;
}

/* Long-passage shrink steps, applied via JS based on character count */
.display-text.shrink-1 { font-size: clamp(24px, 3.4cqw, 46px); }
.display-text.shrink-2 { font-size: clamp(20px, 2.7cqw, 36px); }
.display-text.shrink-3 { font-size: clamp(17px, 2.2cqw, 29px); }

/* ==========================================================================
   Display (OBS Browser Source) / Projector — full-page outputs with
   nothing but the scripture itself.
   ========================================================================== */

body.display,
body.projector {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.projector { background: var(--navy-950); }

/* Every .sp-surface — body.display, body.projector, and the in-app canvas
   copies — is a size container. This is what makes cqw/cqh above resolve
   against the surface's OWN box instead of the browser window, so the
   exact same theme CSS produces a proportionally correct result whether
   .sp-surface fills the whole screen (OBS/Projector) or a small pane
   inside the app (Preview/Live). */
.sp-surface {
  container-type: size;
  container-name: sp-stage;
}

/* The in-app Presentation Canvas centers a fixed-aspect "screen" inside
   whatever space the pane has, instead of stretching .sp-surface to fill
   an arbitrary (often tall/narrow) pane shape. This keeps Preview/Live
   looking like an actual landscape output at any window size. */
.sp-canvas-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  container-type: size;
}
.sp-canvas-16x9 {
  aspect-ratio: 16 / 9;
  width: min(100%, calc(100cqh * 16 / 9));
  height: auto;
  max-height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(196, 162, 60, 0.06), transparent 60%),
    var(--navy-950);
}
.sp-canvas-frame .sp-surface {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.display-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6cqh 8cqw;
}

.display-card {
  max-width: 82cqw;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.display-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.display-reference {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(16px, 2cqw, 26px);
  color: var(--gold-light);
  margin-bottom: 2cqh;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.display-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.2cqw, 58px);
  line-height: 1.42;
  color: var(--ivory);
  /* A softer, tighter shadow than before — a wide shadow blur radius reads
     as "blurry text" once compressed by OBS's video encoder, especially
     at lower bitrates. This keeps glyph edges crisp while still lifting
     the text off busy camera backgrounds. */
  text-shadow: 0 2px 6px rgba(0,0,0,0.75);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.display-rule {
  width: 90px;
  height: 3px;
  background: var(--gold);
  margin: 3cqh auto 0;
  opacity: 0.85;
  box-shadow: 0 2px 10px rgba(196,162,60,0.4);
}

/* Empty state: fully transparent, nothing painted, so OBS shows only
   whatever is beneath the browser source (camera, background, etc). */
.sp-surface.empty .display-card { opacity: 0; }

/* Projector fullscreen affordance — invisible until the operator moves
   the mouse or presses a key, and gone entirely once fullscreen. */
.projector-fullscreen-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--navy-600);
  background: rgba(10, 14, 26, 0.7);
  color: var(--ivory-dim);
  font-size: 17px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
}
.projector-fullscreen-btn.visible { opacity: 0.85; pointer-events: auto; }
.projector-fullscreen-btn:hover { opacity: 1; border-color: var(--royal-light); }
.projector-fullscreen-btn.is-fullscreen { display: none; }

/* ==========================================================================
   Presentation Studio workspace (Part 5A)
   A single, non-scrolling, OBS-Studio-style workspace: top bar, resizable
   docks either side of a live Presentation Canvas, and a permanent bottom
   control bar. Individual panels (Results, Scenes, chip lists) scroll on
   their own; the workspace shell itself never does.
   ========================================================================== */

body.workspace-body {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
}

.workspace {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Top bar ---------- */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: var(--navy-900);
  border-bottom: 1px solid var(--navy-700);
}

.topbar-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark { display: flex; color: var(--gold); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ivory);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  flex-shrink: 0;
}
.live-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live-indicator[data-live="true"] { color: var(--gold-light); }
.live-indicator[data-live="true"] .dot {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(196, 162, 60, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}

.topbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  font-size: 11.5px;
  color: var(--ivory-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-chip strong { color: var(--ivory); font-weight: 600; }
.topbar-chip-muted { color: var(--muted); }

.topbar-actions { display: flex; gap: 4px; flex-shrink: 0; }
.topbar-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--ivory-dim);
  border-radius: 8px;
  padding: 8px;
  display: flex;
}
.topbar-btn:hover { background: var(--navy-800); color: var(--ivory); border-color: var(--navy-700); }

/* ---------- Workspace body: docks + canvas ---------- */
.workspace-body-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  position: relative; /* anchors .dock-edge-expand tabs */
}

.dock {
  display: flex;
  flex-direction: column;
  background: var(--navy-900);
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.18s ease;
}
.dock-left { width: var(--dock-left-w); min-width: 240px; max-width: 560px; border-right: 1px solid var(--navy-700); }
.dock-right { width: var(--dock-right-w); min-width: 220px; max-width: 480px; border-left: 1px solid var(--navy-700); }
.dock.collapsed { width: 0 !important; min-width: 0; border-color: transparent; }

/* Edge tabs that re-open a collapsed dock. Live outside the dock (as
   siblings in .workspace-body-inner) so collapsing the dock to width:0
   can never hide the way back in. */
.dock-edge-expand {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  color: var(--muted);
  cursor: pointer;
  z-index: 6;
  padding: 0;
}
.dock-edge-expand:hover { color: var(--ivory); border-color: var(--royal-dim); }
.dock-edge-expand-left { left: 0; border-left: none; border-radius: 0 8px 8px 0; }
.dock-edge-expand-right { right: 0; border-right: none; border-radius: 8px 0 0 8px; }

.resizer {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
  background: transparent;
}
.resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }
.resizer:hover, .resizer.active { background: var(--royal-dim); }
.dock.collapsed + .resizer { display: none; }

/* Dock tabs (left) */
.dock-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--navy-700);
  padding: 0 6px;
  flex-shrink: 0;
}
.dock-tab {
  background: none;
  border: none;
  color: var(--muted);
  padding: 13px 12px 11px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid transparent;
}
.dock-tab:hover { color: var(--ivory-dim); }
.dock-tab.active { color: var(--ivory); border-bottom-color: var(--gold); }
.dock-collapse-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  padding: 8px;
  display: flex;
  flex-shrink: 0;
}
.dock-collapse-btn:hover { color: var(--ivory); }

.dock-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dock-section { padding: 14px 14px 0; flex-shrink: 0; }
.dock-section-compact { padding-top: 12px; }
.dock-section-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 14px; margin-top: 14px; }
.dock-section-fill #results-list,
.dock-section-fill .chip-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.chip-list-vertical { flex-direction: column; align-items: stretch; }
.chip-list-vertical .chip { justify-content: space-between; }

.nav-field-narrow { min-width: 0; }

/* Dock header (right) */
.dock-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--navy-700);
  flex-shrink: 0;
}
.dock-header-sub { border-top: 1px solid var(--navy-700); border-bottom: 1px solid var(--navy-700); }
.dock-title { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dock-collapse-btn-right { margin-left: 0; }
.dock-footnote { padding: 0 14px 14px; margin-top: auto; }

/* Scenes */
.scenes-list {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scene-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--navy-700);
  background: var(--navy-800);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ivory-dim);
  text-align: left;
  width: 100%;
}
.scene-item:hover { border-color: var(--navy-600); color: var(--ivory); }
.scene-item.active { border-color: var(--royal-light); background: rgba(52, 80, 201, 0.14); color: var(--ivory); }
.scene-item .scene-swatch {
  width: 30px; height: 20px; border-radius: 3px; flex-shrink: 0;
  background: var(--navy-950); border: 1px solid var(--navy-600);
  position: relative; overflow: hidden;
}
.scene-item .scene-swatch::after {
  content: ""; position: absolute; background: var(--gold); opacity: 0.85;
}
.scene-item[data-scene="fullscreen"] .scene-swatch::after { inset: 3px 5px; }
.scene-item[data-scene="center"] .scene-swatch::after { inset: 6px 9px; }
.scene-item[data-scene="lower-third"] .scene-swatch::after { left: 3px; right: 3px; bottom: 3px; height: 6px; }
.scene-item[data-scene="lower-third-boxed"] .scene-swatch::after {
  left: 3px; bottom: 3px; width: 16px; height: 8px; border-radius: 2px;
  border: 1px solid var(--gold); background: rgba(196,162,60,0.25); opacity: 1;
}
.scene-item[data-scene="lower-third-ribbon"] .scene-swatch::after {
  left: 3px; right: 6px; bottom: 3px; height: 7px; border-left: 3px solid var(--gold-light);
  background: rgba(196,162,60,0.2); opacity: 1;
}
.scene-item[data-scene="lower-third-minimal"] .scene-swatch::after {
  left: 5px; right: 5px; bottom: 4px; height: 2px; opacity: 1;
}
.scene-item[data-scene="transparent"] .scene-swatch::after { inset: 3px 5px; background: transparent; border: 1px dashed var(--gold); opacity: 0.7; }
.scene-item .scene-name { font-weight: 600; }

/* Outputs */
.outputs-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 11px; flex-shrink: 0; }
.output-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ivory-dim); }
.output-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.output-dot[data-status="active"] { background: var(--sage); box-shadow: 0 0 6px rgba(92, 149, 118, 0.65); }
.output-dot[data-status="waiting"] { background: var(--gold); box-shadow: 0 0 6px rgba(196, 162, 60, 0.5); animation: pulse 1.6s ease-in-out infinite; }
.output-dot[data-status="unavailable"] { background: var(--brick-light); }
.output-dot[data-status="not-open"], .output-dot[data-status="not-active"] { background: var(--muted); }
.output-name { flex: 1; min-width: 0; }
.output-status { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.output-action-btn {
  background: var(--navy-700); border: 1px solid var(--navy-600); color: var(--ivory);
  border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.output-action-btn:hover { filter: brightness(1.2); }

/* ---------- Presentation Canvas ---------- */
.canvas-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  gap: 0;
  overflow: hidden;
}

/* ---------- Split Preview / Live panes (OBS Preview/Program style) ---------- */
.canvas-split {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
}
.canvas-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.canvas-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pane-live .canvas-pane-header { color: var(--gold-light); }
.canvas-pane-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(196, 162, 60, 0.7); flex-shrink: 0; }
.canvas-pane-detail { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-preview .sp-canvas-16x9 { border: 1px solid var(--navy-700); }
.pane-live .sp-canvas-16x9 { border: 1px solid rgba(196, 162, 60, 0.35); }

.canvas-pane .display-card { max-width: 88%; }

.sp-canvas-frame {
  flex: 1;
  min-height: 0;
  position: relative;
}

.canvas-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 380px;
  margin: 0 auto;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.sp-canvas-frame.has-content .canvas-empty-hint { opacity: 0; }

/* ---------- Bottom control bar ---------- */
.bottombar {
  height: var(--bottombar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: var(--navy-900);
  border-top: 1px solid var(--navy-700);
}

.bottombar-preview { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.bottombar-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 700; flex-shrink: 0;
}
.bottombar-ref {
  font-family: var(--font-display); font-size: 15.5px; color: var(--ivory);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bottombar-nav { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn-round {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.bottombar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.transition-field {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.transition-field select {
  background: var(--navy-800); border: 1px solid var(--navy-600); color: var(--ivory);
  border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: var(--font-ui);
}

.bottombar .btn-clear {
  background: var(--navy-700); border: 1px solid var(--navy-600); color: var(--ivory-dim);
  padding: 11px 18px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm);
}
.bottombar .btn-clear:hover { border-color: var(--brick-light); color: var(--brick-light); }
.bottombar .btn-live {
  padding: 11px 26px; font-size: 14px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(196, 162, 60, 0.22);
}

/* ---------- Settings / Help drawers ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(5, 7, 15, 0.55); z-index: 40;
}
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw;
  background: var(--navy-900); border-left: 1px solid var(--navy-700);
  z-index: 41; display: flex; flex-direction: column;
  box-shadow: -16px 0 44px rgba(0, 0, 0, 0.45);
}
.drawer-wide { width: 480px; }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--navy-700); flex-shrink: 0;
}
.drawer-title { font-family: var(--font-display); font-size: 17px; color: var(--ivory); margin: 0; font-weight: 600; }
.drawer-close-btn { background: none; border: none; color: var(--muted); font-size: 16px; padding: 4px; }
.drawer-close-btn:hover { color: var(--ivory); }
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.drawer-body .setup-help { margin-top: 18px; }
.toggle-label { margin: 0; text-transform: none; font-size: 13px; color: var(--ivory-dim); }

.drawer-divider { height: 1px; background: var(--navy-700); margin: 20px 0 16px; }

/* ---------- Background gallery (Settings drawer) ---------- */
.bg-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 14px;
}
.bg-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy-600);
  background: var(--navy-800) center/cover no-repeat;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.bg-tile:hover { border-color: var(--navy-600); transform: translateY(-1px); }
.bg-tile.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.bg-tile.bg-tile-none {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ivory-dim);
}
.bg-tile-remove {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(10,14,26,0.8); border: 1px solid var(--navy-600);
  color: var(--ivory-dim); font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease;
}
.bg-tile:hover .bg-tile-remove { opacity: 1; }
.bg-tile-remove:hover { color: var(--brick, #b4483c); border-color: var(--brick, #b4483c); }

.bg-upload-btn {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--navy-600);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--ivory-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bg-upload-btn:hover { border-color: var(--gold-dim); color: var(--ivory); }
.bg-upload-btn.uploading { opacity: 0.6; pointer-events: none; }

/* ---------- Responsive: collapse docks to overlays on narrow screens ---------- */
@media (max-width: 900px) {
  .dock-left, .dock-right {
    position: fixed;
    top: var(--topbar-h);
    bottom: var(--bottombar-h);
    z-index: 30;
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.55);
  }
  .dock-left { left: 0; }
  .dock-right { right: 0; }
  .resizer { display: none; }
  .topbar-status { display: none; }
}

/* Narrow / phone widths: the bottom bar's three groups (preview label,
   verse nav, actions) no longer fit on one row without overlapping —
   wrap it onto two rows instead. */
@media (max-width: 640px) {
  :root { --bottombar-h: 100px; } /* wrapped 2-row bar is taller; every calc() using this var picks it up automatically */
  .bottombar {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px 14px;
  }
  .bottombar-preview { width: 100%; order: 1; }
  .bottombar-nav { order: 2; }
  .bottombar-actions { order: 3; margin-left: auto; }
}
@media (max-width: 420px) {
  .bottombar-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .transition-field { order: 3; width: 100%; justify-content: space-between; }
}