@charset "utf-8";
/* Bible Quest Studio — interface styles.

   The tool is a control surface: flat panels, hairline rules, one accent used
   only for what is live or selected. Everything defers to the picture in the
   middle, which is the thing the user is actually making. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-chip: 4px;
  --r-ctl: 8px;
  --r-card: 12px;

  --topbar-h: 56px;
  --gap: 16px;

  --bg: #0B0D14;
  --panel: #12151F;
  --panel-2: #171B27;
  --raised: #1D2231;
  --line: #262C3D;
  --line-soft: #1C2130;
  --ink: #E9EBF2;
  --ink-2: #A2AABF;
  --ink-3: #6C7590;
  --brass: #E0A83C;
  --brass-ink: #17120A;
  --brass-soft: rgba(224, 168, 60, 0.13);
  --brass-line: rgba(224, 168, 60, 0.42);
  --tally: #E5484D;
  --good: #48C08A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .34);
}

[data-theme="light"] {
  /* Warm paper, because the subject is a printed book. */
  --bg: #E9E5DC;
  --panel: #F6F4EF;
  --panel-2: #FFFFFF;
  --raised: #FFFFFF;
  --line: #D6CFC1;
  --line-soft: #E3DDD1;
  --ink: #1B1D24;
  --ink-2: #575B67;
  --ink-3: #85899A;
  --brass: #8A5D0E;
  --brass-ink: #FFFFFF;
  --brass-soft: rgba(138, 93, 14, 0.10);
  --brass-line: rgba(138, 93, 14, 0.34);
  --tally: #B3302B;
  --good: #1C7A55;
  --shadow: 0 1px 2px rgba(60, 50, 30, .10), 0 8px 24px rgba(60, 50, 30, .10);
}

*, *::before, *::after { box-sizing: border-box; }

/* Any author `display` beats the user-agent rule for [hidden], so elements
   styled as flex/inline-flex would stay on screen when hidden. State this
   once, here, rather than remembering it at every call site. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--brass); color: var(--brass-ink);
  padding: 8px 14px; border-radius: var(--r-ctl);
  font-weight: 600; text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 8px; }

.noscript {
  margin: 40px auto; max-width: 460px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--panel); text-align: center;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--gap);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark {
  width: 34px; height: 34px; border-radius: var(--r-ctl);
  background: #000; object-fit: contain; padding: 2px;
  border: 1px solid var(--line);
}
/* Matches the inscriptional serif of the wordmark in the logo. */
.brand__name {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700; font-size: 15px; letter-spacing: .02em; white-space: nowrap;
}
.brand__suffix {
  font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); vertical-align: 2px; margin-left: 3px;
}

.readout { display: flex; gap: 22px; margin-left: auto; min-width: 0; }
/* Below this the numbers are already visible on the tab and the timeline, so
   the topbar drops them rather than forcing the page to scroll sideways. */
@media (max-width: 900px) { .readout { display: none; } }
@media (max-width: 900px) { .topbar .brand { margin-right: auto; } }
@media (max-width: 360px) { .brand__suffix { display: none; } }
.readout__item { display: flex; align-items: baseline; gap: 7px; }
.readout dt {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.readout dd { font-size: 13px; font-weight: 500; color: var(--ink-2); }

.theme-btn {
  flex: none; background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); border-radius: var(--r-ctl);
  padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 500;
  transition: color .12s ease, border-color .12s ease;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-3); }

/* ── Workspace ──────────────────────────────────────────────────────────── */
.workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}

@media (min-width: 1080px) {
  body { height: 100dvh; overflow: hidden; }
  .workspace {
    grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
  }
  .rail, .stage { height: 100%; min-height: 0; }
}

/* On narrow screens the picture comes first — you want to see what you are
   making before you scroll to the controls. */
@media (max-width: 1079px) {
  .stage { order: -1; }
}

/* ── Builder rail ───────────────────────────────────────────────────────── */
.rail {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--panel);
  overflow: hidden;
}

.tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.tab {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  padding: 12px 10px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .02em;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease;
}
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.tab__count {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  border-radius: 999px; background: var(--brass-soft); color: var(--brass);
  font-size: 10px; font-weight: 500;
}

.rail__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1079px) { .rail__body { max-height: none; overflow: visible; } }

.panel { padding: var(--gap); display: flex; flex-direction: column; gap: 18px; }

/* ── Shared controls ────────────────────────────────────────────────────── */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; padding: 2px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl);
}
.seg__btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  transition: background .12s ease, color .12s ease;
}
.seg__btn:hover { color: var(--ink-2); }
.seg__btn.is-on { background: var(--raised); color: var(--ink); box-shadow: var(--shadow); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.field__hint { font-size: 11px; color: var(--ink-3); }

.input, .textarea, .select {
  width: 100%; padding: 8px 10px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  font-size: 13px;
  transition: border-color .12s ease;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-3); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.select { appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px top 55%, right 9px top 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-ctl); cursor: pointer;
  border: 1px solid transparent; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn--primary { background: var(--brass); color: var(--brass-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--brass) 88%, #fff); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--quiet { background: transparent; color: var(--ink-3); padding: 6px 10px; font-weight: 500; }
.btn--quiet:hover { color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn--block { width: 100%; }

.link-btn {
  background: transparent; border: 0; cursor: pointer; padding: 2px 0;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  transition: color .12s ease;
}
.link-btn:hover { color: var(--ink); }
.link-btn--danger:hover { color: var(--tally); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  background: var(--panel-2); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.icon-btn[disabled] { opacity: .35; pointer-events: none; }
.icon-btn--primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); width: 40px; height: 40px; }
.icon-btn--primary:hover { background: color-mix(in srgb, var(--brass) 88%, #fff); border-color: transparent; color: var(--brass-ink); }

/* Switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch__label { font-size: 12px; color: var(--ink-2); }
.switch__box {
  position: relative; width: 38px; height: 21px; flex: none;
  background: var(--line); border: 0; border-radius: 999px; cursor: pointer;
  transition: background .12s ease;
}
.switch__box::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--panel-2); box-shadow: 0 1px 2px rgba(0,0,0,.4);
  transition: transform .14s ease;
}
.switch__box[aria-checked="true"] { background: var(--brass); }
.switch__box[aria-checked="true"]::after { transform: translateX(17px); }

/* Range */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--line); border-radius: 999px; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brass); border: 0; cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brass); border: 0; cursor: pointer;
}

input[type="color"] {
  width: 40px; height: 32px; padding: 2px; flex: none; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-ctl);
}

/* ── Composer ───────────────────────────────────────────────────────────── */
.composer { display: flex; flex-direction: column; gap: 14px; }

.topic-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  max-height: 236px; overflow-y: auto; padding-right: 3px;
  /* fades the cut-off row so the list reads as scrollable, not clipped */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.topic-grid::-webkit-scrollbar { width: 6px; }
.topic-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.topic {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px 9px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); color: var(--ink-2);
  transition: border-color .12s ease, color .12s ease;
}
.topic:hover { border-color: var(--ink-3); color: var(--ink); }
.topic[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-soft); color: var(--ink); }
.topic__emoji { font-size: 15px; line-height: 1; flex: none; }
.topic__label { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.topic__count { font-size: 10px; color: var(--ink-3); font-family: var(--mono); }

.count-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.count-btn {
  padding: 7px 0; cursor: pointer; font-family: var(--mono); font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); color: var(--ink-2);
  transition: border-color .12s ease, color .12s ease;
}
.count-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.count-btn[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-soft); color: var(--ink); }

.availability {
  font-size: 11px; color: var(--ink-3);
  padding: 7px 9px; border-radius: var(--r-ctl);
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.availability strong { color: var(--ink-2); font-weight: 600; }
.availability.is-warn { border-color: var(--brass-line); color: var(--brass); }
.availability.is-warn strong { color: var(--brass); }

/* Manual entry */
.answers { display: flex; flex-direction: column; gap: 6px; }
.answer-row { display: flex; align-items: center; gap: 8px; }
.answer-mark {
  width: 26px; height: 26px; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 50%; color: var(--ink-3);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  transition: all .12s ease;
}
.answer-mark:hover { border-color: var(--ink-3); color: var(--ink-2); }
.answer-mark[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }

.form-error {
  font-size: 11.5px; color: var(--tally);
  padding: 7px 9px; border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--tally) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tally) 30%, transparent);
}
.form-actions { display: flex; gap: 8px; }
.form-actions .btn { flex: 1; }

/* ── Question list ──────────────────────────────────────────────────────── */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list-head h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

.qlist { display: flex; flex-direction: column; gap: 6px; }

.qcard {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 11px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); color: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.qcard:hover { border-color: var(--ink-3); }
.qcard.is-active { border-color: var(--brass); background: var(--brass-soft); }
/* Space is reserved for the row of tools so they never sit on top of the
   question text when they fade in. */
.qcard__top { display: flex; align-items: baseline; gap: 8px; padding-right: 124px; }
.qcard__no {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  flex: none; padding-top: 1px;
}
.qcard.is-active .qcard__no { color: var(--brass); }
.qcard__q {
  font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qcard__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-left: 26px; flex-wrap: wrap; }
.qcard__answer {
  font-size: 11px; color: var(--good); font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qcard__ref { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.qcard__kind {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 1px 5px;
}

.qcard__tools {
  position: absolute; top: 7px; right: 7px; display: flex; gap: 2px;
  opacity: 0; transition: opacity .12s ease;
}
.qcard:hover .qcard__tools,
.qcard:focus-within .qcard__tools,
.qcard.is-active .qcard__tools { opacity: 1; }
@media (hover: none) { .qcard__tools { opacity: 1; } }

.tool {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-chip);
  color: var(--ink-3); cursor: pointer; font-size: 11px; line-height: 1;
  transition: color .12s ease, border-color .12s ease;
}
.tool:hover { color: var(--ink); border-color: var(--ink-3); }
.tool--danger:hover { color: var(--tally); border-color: var(--tally); }
.tool[disabled] { opacity: .3; pointer-events: none; }

.empty {
  padding: 26px 18px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-card);
  color: var(--ink-3);
}
.empty strong { display: block; color: var(--ink-2); font-size: 13px; margin-bottom: 3px; font-weight: 600; }
.empty span { font-size: 11.5px; }

/* Inline editor */
.qeditor {
  padding: 12px; border: 1px solid var(--brass-line); border-radius: var(--r-ctl);
  background: var(--panel-2); display: flex; flex-direction: column; gap: 10px;
}

/* ── Design panel ───────────────────────────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: 10px; }
.section + .section { padding-top: 18px; border-top: 1px solid var(--line-soft); }
.section__title {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px; cursor: pointer; font-size: 12px; font-weight: 500;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); color: var(--ink-2);
  transition: border-color .12s ease, color .12s ease;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-soft); color: var(--ink); }
.chip__sub { display: block; font-size: 10px; color: var(--ink-3); font-weight: 400; }
.chip[aria-pressed="true"] .chip__sub { color: var(--brass); }

.theme-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.theme-swatch {
  height: 46px; cursor: pointer; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  transition: border-color .12s ease, transform .12s ease;
}
.theme-swatch:hover { transform: translateY(-1px); }
.theme-swatch[aria-pressed="true"] { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.theme-swatch__accent { position: absolute; inset: auto 0 0 0; height: 4px; }

.upload-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--panel-2);
}
.upload-row__thumb {
  width: 40px; height: 40px; flex: none; object-fit: contain;
  background: #0d0d12; border: 1px solid var(--line); border-radius: 6px; padding: 2px;
}
.upload-row__body { flex: 1; min-width: 0; }
.upload-row__name { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-row__note { font-size: 10.5px; color: var(--ink-3); }
.upload-row__acts { display: flex; gap: 6px; flex: none; }

.track-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; cursor: pointer; width: 100%; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); color: inherit;
  transition: border-color .12s ease;
}
.track-row:hover { border-color: var(--ink-3); }
.track-row[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-soft); }
.track-row__play {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--raised); border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; font-size: 9px;
}
.track-row__play:hover { color: var(--ink); }
.track-row__name { font-size: 12px; font-weight: 500; }
.track-row__mood { font-size: 10.5px; color: var(--ink-3); }

/* ── Stage ──────────────────────────────────────────────────────────────── */
.stage {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0;
  overflow-y: auto;
}
.stage:focus { outline: none; }

.monitor {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--panel); padding: 12px;
}
.monitor__frame {
  position: relative; display: grid; place-items: center;
  background: #05060A; border-radius: var(--r-ctl); overflow: hidden;
  min-height: 200px;
}
.monitor__screen { position: relative; display: inline-block; line-height: 0; }
.monitor__frame canvas {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(56dvh, 540px);
}

/* Guides live over the canvas, not on it, so an export never contains them. */
.safe-guides { position: absolute; inset: 0; pointer-events: none; }
.safe-guides::before, .safe-guides::after {
  content: ""; position: absolute; left: 0; right: 0;
  border-top: 1px dashed rgba(255, 255, 255, .32);
}
.safe-guides::before { top: var(--safe-top, 6%); }
.safe-guides::after { bottom: var(--safe-bottom, 17%); }
/* Sits just below the lower guide, inside the strip that is kept clear — so it
   can never cover artwork, and right-aligned to miss the centred clock. */
.safe-guides__tag {
  position: absolute; right: 6px; top: calc(100% - var(--safe-bottom, 17%) + 3px);
  font-family: var(--mono); font-size: 9px; line-height: 1.4;
  color: rgba(255, 255, 255, .34); letter-spacing: .02em;
}
@media (max-width: 1079px) {
  .monitor__frame canvas { max-height: min(52dvh, 460px); }
}

/* Tally light: the one place red is allowed. */
.tally {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--r-chip);
  background: rgba(10, 10, 14, .82); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
}
.tally__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tally); animation: tally 1.1s ease-in-out infinite; }
@keyframes tally { 50% { opacity: .25; } }

.recording {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(6, 7, 12, .84); backdrop-filter: blur(2px);
  padding: 20px; text-align: center;
}
.recording__title { font-size: 13px; font-weight: 600; color: #fff; }
.recording__pct { font-size: 12px; color: rgba(255,255,255,.75); }
.recording__note { font-size: 11px; color: rgba(255,255,255,.45); max-width: 240px; }
.recording .btn--quiet { color: rgba(255,255,255,.6); }
.recording .btn--quiet:hover { color: #fff; }

.meter { width: min(220px, 70%); height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.meter__fill { display: block; height: 100%; background: var(--brass); transition: width .2s linear; }

/* ── Programme timeline ─────────────────────────────────────────────────
   One segment per question, banded by phase, so the shape of the video is
   legible at a glance and any point is one click away. */
.timeline { display: flex; flex-direction: column; gap: 6px; }

.timeline__track {
  position: relative; display: flex; gap: 2px;
  height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--panel); overflow: hidden;
}

.seg-q {
  position: relative; min-width: 0; overflow: hidden;
  border-right: 1px solid var(--bg);
  background: var(--panel-2);
  transition: background .12s ease;
}
.seg-q:last-child { border-right: 0; }
.seg-q:hover { background: var(--raised); }
.seg-q.is-current { background: var(--brass-soft); }
.seg-q__bands { position: absolute; inset: auto 0 0 0; height: 5px; display: flex; }
.seg-q__band { height: 100%; }
.seg-q__band--read { background: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.seg-q__band--count { background: color-mix(in srgb, var(--brass) 65%, transparent); }
.seg-q__band--reveal { background: color-mix(in srgb, var(--good) 70%, transparent); }
.seg-q__label {
  position: absolute; inset: 5px 6px auto 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-q.is-current .seg-q__label { color: var(--brass); }
.seg-q__ref {
  position: absolute; inset: auto 6px 12px 6px;
  font-size: 10px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-q--outro { background: color-mix(in srgb, var(--ink-3) 12%, transparent); }

.timeline__head {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--brass); pointer-events: none; z-index: 2;
}
.timeline__head::before {
  content: ""; position: absolute; top: 0; left: -3px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--brass);
}

.timeline__meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
}

/* ── Transport ──────────────────────────────────────────────────────────── */
.transport { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.transport__group { display: flex; align-items: center; gap: 7px; }

.hint { font-size: 11px; color: var(--ink-3); text-align: center; }
kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-chip);
  background: var(--panel-2); color: var(--ink-2);
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  padding: 10px 13px; border-radius: var(--r-ctl);
  background: var(--raised); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 12px; line-height: 1.45;
  animation: toast-in .16s ease;
}
.toast--warn { border-color: var(--brass-line); }
.toast--error { border-color: color-mix(in srgb, var(--tally) 50%, transparent); }
.toast--ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

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