/* Cue: late-night studio. Dark stage, white cue cards in marker, ON AIR red. */
:root {
  --studio: #16141c;
  --studio-2: #221f2b;
  --studio-3: #2f2b3a;
  --card: #faf8f1;
  --card-line: #e4dfd0;
  --ink: #1b1a1f;
  --ink-2: #55525e;
  --on-dark: #f4f2ec;
  --on-dark-2: #a9a5b4;

  --onair: #e5322d;
  --onair-soft: #f6b3b0;
  --onair-ink: #6e0f0c;

  --cue: #ffd23f;        /* look at the lens: hook and CTA */
  --cue-ink: #4a3a00;
  --broll: #7cc4ff;      /* B-roll covers this line */
  --broll-ink: #0b3a5c;
  --keep: #3ccf8e;
  --keep-ink: #063d27;
  --plain: #c9c4d4;
  --plain-ink: #2f2b3a;

  --prompt-size: 30px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--studio); color: var(--on-dark); }
body { font: 400 17px/1.45 Archivo, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
.marker { font-family: 'Permanent Marker', 'Archivo', cursive; font-weight: 400; letter-spacing: .5px; }

.screen { min-height: 100dvh; padding: 16px 16px calc(96px + var(--safe-b)); max-width: 640px; margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.top h1 { margin: 0; font-size: 34px; color: var(--on-dark); }
.hint { color: var(--on-dark-2); margin: -8px 0 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.group-title { color: var(--on-dark-2); font-size: 14px; font-weight: 600; margin: 12px 0 -4px; }

.btn {
  min-height: 48px; padding: 0 18px; border-radius: 12px;
  border: 2px solid var(--studio-3); background: var(--studio-2); color: var(--on-dark); font-weight: 600;
}
.btn.primary { background: var(--onair); border-color: var(--onair); color: #fff; }
.btn.light { background: var(--card); color: var(--ink); border-color: var(--card-line); }
.btn.armed { background: var(--onair-soft); border-color: var(--onair); color: var(--onair-ink); }
.btn.full { width: 100%; }
.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; }

/* cue cards */
.card {
  background: var(--card); color: var(--ink); border-radius: 14px; padding: 16px;
  border: 1px solid var(--card-line); box-shadow: 0 3px 0 #0005;
}
button.card { width: 100%; text-align: left; display: block; }
.card h2 { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 24px; margin: 0 0 4px; line-height: 1.15; }
.meta { color: var(--ink-2); font-size: 15px; }

.chip { display: inline-block; font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 8px; }
.chip.cue { background: var(--cue); color: var(--cue-ink); }
.chip.broll { background: var(--broll); color: var(--broll-ink); }
.chip.keep { background: var(--keep); color: var(--keep-ink); }
.chip.plain { background: var(--plain); color: var(--plain-ink); }
.chip.toss { background: var(--onair-soft); color: var(--onair-ink); }
.chip.dark { background: #000a; color: var(--on-dark); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* script lines with tag stripes */
.lines { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ln { border-left: 5px solid var(--plain); padding: 4px 0 4px 10px; }
.ln.hook, .ln.cta { border-color: var(--cue); }
.ln.broll { border-color: var(--broll); }
.ln small { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ln.hook small, .ln.cta small { color: #7a5f00; }
.ln.broll small { color: var(--broll-ink); }
.ln button.tagbtn { margin-top: 4px; border: 0; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }

/* bottom tabs */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px;
  padding: 8px 12px calc(8px + var(--safe-b)); background: #0f0e14ee; border-top: 1px solid var(--studio-3);
}
#tabs button { flex: 1; max-width: 200px; min-height: 52px; border: 0; border-radius: 12px; background: transparent; color: var(--on-dark-2); font-weight: 600; }
#tabs button.on { background: var(--studio-2); color: var(--on-dark); }
#tabs button[data-tab="record"].on { color: var(--onair-soft); }

/* sheets */
#sheet-wrap { position: fixed; inset: 0; z-index: 30; }
#sheet-backdrop { position: absolute; inset: 0; background: #000a; }
#sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow: auto;
  background: var(--card); color: var(--ink); border-radius: 18px 18px 0 0;
  padding: 20px 16px calc(20px + var(--safe-b)); max-width: 640px; margin: 0 auto;
}
#sheet h2 { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 26px; margin: 0 0 4px; }
#sheet label { display: block; font-weight: 600; font-size: 15px; margin: 14px 0 6px; }
#sheet input, #sheet textarea, #login input {
  width: 100%; font: inherit; font-size: 17px; padding: 12px; border-radius: 10px;
  border: 2px solid var(--card-line); background: #fff; color: var(--ink);
}
#sheet textarea { min-height: 180px; resize: vertical; }
#sheet video { width: 100%; max-height: 50dvh; background: #000; border-radius: 10px; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.err { color: var(--onair); min-height: 1.2em; font-size: 15px; margin: 6px 0; }
.note { color: var(--ink-2); font-size: 15px; }

/* login */
#login { display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { font-size: 44px; margin: 0 0 8px; color: var(--ink); }
.login-card label { display: block; font-weight: 600; margin-bottom: 6px; }
.login-card .btn { width: 100%; margin-top: 8px; }

/* marker strip for a take: one segment per line attempt */
.strip { display: flex; gap: 2px; height: 12px; margin: 10px 0 4px; }
.strip i { display: block; border-radius: 3px; background: var(--plain); min-width: 3px; }
.strip i.hook, .strip i.cta { background: var(--cue); }
.strip i.broll { background: var(--broll); }
.strip i.redo { outline: 2px solid var(--onair); outline-offset: -2px; }

/* ---------- the stage (recording screen) ---------- */
#stage { position: fixed; inset: 0; background: #000; z-index: 20; overflow: hidden; touch-action: manipulation; }
#preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#prompt {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 44px); left: 12px; right: 12px;
  background: #000000b8; border-radius: 16px; padding: 14px 16px;
}
#line-now { font-size: var(--prompt-size); font-weight: 800; line-height: 1.22; color: #fff; }
#line-next { font-size: calc(var(--prompt-size) * .6); font-weight: 600; line-height: 1.3; color: #8d8a96; margin-top: 10px; }
#line-next:empty { display: none; }
#countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 400 140px/1 'Permanent Marker', cursive; color: #fff; text-shadow: 0 4px 0 #000;
  pointer-events: none;
}
#stage-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + var(--safe-b));
  background: linear-gradient(transparent, #000c 30%);
}
#segments { display: flex; gap: 3px; margin-bottom: 14px; }
#segments i { flex: 1; height: 5px; border-radius: 3px; background: #ffffff40; }
#segments i.done { background: #fff; }
#segments i.now { background: var(--onair); }
.controls { display: flex; align-items: center; justify-content: space-between; }
.ctl {
  width: 84px; min-height: 64px; border: 0; border-radius: 14px; background: #ffffff1f; color: #fff;
  font-size: 15px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ctl .ico { font-size: 22px; line-height: 1; }
#btn-rec {
  width: 80px; height: 80px; border-radius: 50%; border: 5px solid #fff; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
#btn-rec span { width: 56px; height: 56px; border-radius: 50%; background: var(--onair); transition: all .15s; }
#btn-rec.rec span { width: 30px; height: 30px; border-radius: 6px; }
#rec-status { text-align: center; color: var(--on-dark-2); font-size: 15px; min-height: 22px; margin-top: 8px; }
#rec-status.live { color: var(--onair-soft); font-weight: 600; }
.stage-tools { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.tool { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #ffffff30; background: #ffffff14; color: #fff; font-weight: 600; font-size: 15px; }
.tool.on { background: var(--cue); color: var(--cue-ink); border-color: var(--cue); }

/* glass rig: prompter only, mirrored for the beam splitter, no camera */
#stage.mirror #preview { display: none; }
#stage.mirror #prompt { top: 25%; background: transparent; transform: scaleX(-1); text-align: center; }
#stage.mirror #line-now { font-size: calc(var(--prompt-size) * 1.5); }
#stage.mirror #btn-rec { visibility: hidden; }

#toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(84px + var(--safe-b)); z-index: 40; max-width: 600px; margin: 0 auto;
  background: var(--card); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-weight: 600; box-shadow: 0 4px 0 #0006;
}