/* Dropline. Mobile first, because the whole point is recording on a phone.
   Desktop just gets a centred column of the same thing. */

:root {
  --tool-accent: oklch(0.70 0.13 185);
  --tool-accent-ink: oklch(0.48 0.12 185);
  --tool-accent-soft: oklch(0.96 0.04 185);
  --rec: oklch(0.58 0.20 25);
  --rec-soft: oklch(0.95 0.06 25);
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface-2);
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 54px;
  padding: 0 var(--s-4);
  padding-top: env(safe-area-inset-top);
  height: calc(54px + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom: 3px solid var(--accent);
  color: white;
}

.mast-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-end: auto;
}

.mast-puck {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--navy-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mast-name {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.mast-back,
.mast-help {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  color: white;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}

/* 44px minimum on both, since these are the only controls in the masthead and a
   mis-tap on Back mid-flow is the kind of thing that reads as "the app is broken". */
.mast-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

.mast-help {
  min-height: 44px;
  padding: 0 13px;
  font-size: 13px;
}

/* ── Layout ───────────────────────────────────────────────────────────── */

#main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
}

.screen[hidden] { display: none; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.intro h1,
.card h1 {
  margin: 0 0 var(--s-2);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.lede {
  margin: 0 0 var(--s-4);
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.5;
}

.lede-sm {
  margin: 0 0 var(--s-4);
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.5;
}

.muted { color: var(--ink-mute); font-size: 14px; line-height: 1.5; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: var(--s-5);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 18px -12px rgba(16, 24, 40, 0.24);
}

.card-center { text-align: center; }
.card-quiet { background: var(--surface-3); box-shadow: none; }

.card-alert {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, white 40%);
}

.card-locked {
  background: var(--surface-3);
  border-style: dashed;
  box-shadow: none;
}

.card-eyebrow {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tool-accent-ink);
}

.card-foot {
  display: block;
  margin-top: var(--s-3);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.opener {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.reassure {
  margin: 0 0 var(--s-5);
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--tool-accent-soft);
  color: var(--tool-accent-ink);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Fork ─────────────────────────────────────────────────────────────── */

.pick {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5);
  text-align: left;
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 18px -12px rgba(16, 24, 40, 0.24);
  transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}

.pick:active { transform: scale(0.99); }
.pick:hover { border-color: var(--tool-accent); }

.pick-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--tool-accent-soft);
  color: var(--tool-accent-ink);
}

.pick-text { display: block; }

.pick-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pick-sub {
  display: block;
  margin-top: var(--s-1);
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.45;
}

.who-line {
  margin: var(--s-2) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.path-chip {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--tool-accent-soft);
  color: var(--tool-accent-ink);
  font-size: 12px;
  font-weight: 600;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: var(--s-4); }

.field-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 14px;
  font-weight: 600;
}

.optional { font-weight: 400; color: var(--ink-soft); }

.field input,
textarea {
  width: 100%;
  padding: 13px var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size: 16px;
  color: var(--ink);
}

.field input:focus,
textarea:focus {
  outline: 2px solid var(--tool-accent);
  outline-offset: 1px;
  border-color: transparent;
}

/* Grown to fit by autoGrow(). It is a teleprompter, so it must never scroll its own
   contents away while the LO is reading it out loud. */
textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.55;
}

textarea:read-only {
  background: var(--surface-3);
  color: var(--ink);
}

.field-note {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.form-error,
.lint-warn {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--rec-soft);
  color: oklch(0.42 0.16 25);
  font-size: 14px;
  line-height: 1.5;
}

.script-foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-2);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.templates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.template-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}

.template-chip.is-on {
  border-color: var(--tool-accent);
  background: var(--tool-accent-soft);
  color: var(--tool-accent-ink);
}

/* ── Recorder ─────────────────────────────────────────────────────────── */

.recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) 0 var(--s-4);
}

/* While a take is live the controls become a fixed bar, so a long script can be scrolled
   and read without Stop ever leaving the screen. Fixed rather than sticky, because a
   sticky element in this flex column paints over the very script being read. #main gets
   matching bottom padding so nothing is ever hidden behind the bar. */
body.is-live .recorder {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  gap: 2px;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 28px -18px rgba(16, 24, 40, 0.5);
}

body.is-live #main { padding-bottom: 210px; }
body.is-live .site-foot { padding-bottom: 210px; }
body.is-live .templates { display: none; }
body.is-live .rec-btn { width: 84px; height: 84px; margin-top: 4px; }
body.is-live .rec-core { inset: 22px; }
body.is-live .rec-btn.is-recording .rec-core { inset: 26px; }
body.is-live .timer { font-size: 24px; }
body.is-live .rec-hint { margin-top: 4px; font-size: 12.5px; }

/* Short viewports, which in practice means a phone held sideways. At 342px tall the
   full bar took 53 percent of the screen and left almost no script visible, so it
   collapses to a single row with the controls inline. */
@media (max-height: 500px) {
  body.is-live .recorder {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom));
  }

  body.is-live #main,
  body.is-live .site-foot { padding-bottom: 110px; }

  body.is-live .rec-btn { width: 62px; height: 62px; margin-top: 0; }
  body.is-live .rec-core { inset: 16px; }
  body.is-live .rec-btn.is-recording .rec-core { inset: 20px; }
  body.is-live .rec-label { font-size: 12px; }
  body.is-live .timer { font-size: 20px; }
  body.is-live .timer-sub,
  body.is-live .rec-hint { display: none; }
}

.timer {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.timer-sub { font-size: 13px; color: var(--ink-soft); }
.timer-sub.is-warn { color: var(--rec); font-weight: 600; }

.rec-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin-top: var(--s-2);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.rec-btn:disabled { opacity: 0.4; cursor: default; }

.rec-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rec-soft);
  /* Driven by the analyser RMS so the LO can see the mic is live. */
  transform: scale(calc(1 + (var(--level, 0) * 0.14)));
  transition: transform 0.06s linear;
}

.rec-core {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 6px 20px -6px oklch(0.58 0.20 25 / 0.6);
  transition: border-radius 0.2s var(--ease-out), inset 0.2s var(--ease-out);
}

.rec-btn.is-recording .rec-core {
  inset: 34px;
  border-radius: var(--radius-lg);
}

.rec-label {
  position: relative;
  z-index: 2;
  color: white;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.rec-hint {
  margin: var(--s-2) 0 0;
  font-size: 13.5px;
  color: var(--ink-mute);
  text-align: center;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: var(--s-2); }

.btn-primary {
  background: var(--navy);
  color: white;
  border-color: var(--navy-hairline);
}

.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-ghost {
  background: white;
  color: var(--navy);
  border-color: var(--rule);
}

.btn-quiet {
  background: none;
  color: var(--ink-mute);
  border-color: var(--rule);
  font-weight: 550;
}

.linkish {
  border: none;
  background: none;
  padding: 0;
  color: var(--tool-accent-ink);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Result ───────────────────────────────────────────────────────────── */

.result-badge {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 4px 11px;
  border-radius: 999px;
  background: oklch(0.94 0.06 155);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#playback {
  width: 100%;
  margin: var(--s-4) 0 var(--s-2);
}

.result-meta { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

.send-status {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
}

.send-status.is-ok { background: oklch(0.95 0.05 155); color: var(--ok); }
.send-status.is-err { background: var(--rec-soft); color: oklch(0.42 0.16 25); }

/* ── Steps, misc ──────────────────────────────────────────────────────── */

.steps {
  margin: 0 0 var(--s-4);
  padding-left: 1.15em;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-mute);
}

.steps li { margin-bottom: 4px; }
.steps strong { color: var(--ink); }

.link-plain {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  word-break: break-all;
  color: var(--ink-mute);
  user-select: all;
}

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto var(--s-4);
  border: 3px solid var(--rule);
  border-top-color: var(--tool-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  .rec-ring { transition: none; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-foot {
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.site-foot p { margin: 0; }
.foot-credit { margin-top: 4px; opacity: 0.8; }

/* ── Help ─────────────────────────────────────────────────────────────── */

#help-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
}

#help-dialog::backdrop { background: rgba(16, 24, 40, 0.4); }
.help-body { padding: var(--s-5); }
.help-body h2 { margin: 0 0 var(--s-3); font-size: 20px; letter-spacing: -0.01em; }
.help-body p { font-size: 14.5px; line-height: 1.55; color: var(--ink-mute); }

.card h1:focus-visible,
.path-chip:focus-visible { outline: 2px solid var(--tool-accent); outline-offset: 3px; }
.card h1:focus:not(:focus-visible),
.path-chip:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════════════════════════════════════
   THE BOOTH
   Dropline reads as a normal member of the family until the moment it
   matters. Hit record and the page becomes a recording booth: lights down,
   script up, ON AIR lit. It is the one thing no other tool in the fleet
   does, and it earns its place by removing everything the loan officer does
   not need while they are reading a script out loud.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --booth:      oklch(0.22 0.035 250);
  --booth-2:    oklch(0.27 0.038 250);
  --booth-rule: oklch(0.36 0.035 250);
  --booth-ink:  oklch(0.96 0.012 85);
  --booth-mute: oklch(0.72 0.020 250);
  --live:       oklch(0.62 0.21 25);
  --live-glow:  oklch(0.62 0.21 25 / .45);
}

/* ── ON AIR lamp ──────────────────────────────────────────────────────── */

.onair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: var(--s-2);
  padding: 6px 11px;
  border: 1px solid var(--live);
  border-radius: var(--radius);
  background: oklch(0.62 0.21 25 / .16);
  color: oklch(0.86 0.10 25);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.onair[hidden] { display: none; }

.onair i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live-glow);
  animation: lamp 1.6s var(--ease-out) infinite;
}

@keyframes lamp {
  0%   { box-shadow: 0 0 0 0 var(--live-glow); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px oklch(0.62 0.21 25 / 0); opacity: .65; }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.21 25 / 0); opacity: 1; }
}

/* ── VU meter. Seven bars beat one pulsing ring: it reads as sound at a
      glance, and it proves the microphone is actually hearing them. ────── */

.vu {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 34px;
  margin-bottom: var(--s-2);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

body.is-live .vu { opacity: 1; }

.vu i {
  width: 5px;
  height: 6px;
  border-radius: 3px;
  background: var(--live);
  transform-origin: bottom center;
  transform: scaleY(var(--b, 0.18));
  transition: transform 0.07s linear;
}

/* ── Lights down ──────────────────────────────────────────────────────── */

body.is-live { background: var(--booth); }

body.is-live .masthead {
  background: linear-gradient(180deg, var(--booth-2) 0%, var(--booth) 100%);
  border-bottom-color: var(--live);
}

/* The opener and the script are the only things that matter mid-take, so they
   stay lit while everything else recedes. */
body.is-live .card,
body.is-live .card-locked {
  background: var(--booth-2);
  border-color: var(--booth-rule);
  box-shadow: none;
}

body.is-live .card-eyebrow { color: oklch(0.80 0.09 25); }
body.is-live .opener       { color: var(--booth-ink); }
body.is-live .card-foot    { color: var(--booth-mute); }
body.is-live .path-chip    { background: oklch(0.62 0.21 25 / .18); color: oklch(0.86 0.10 25); }

body.is-live textarea,
body.is-live textarea:read-only {
  background: var(--booth);
  border-color: var(--booth-rule);
  color: var(--booth-ink);
  font-size: 18px;
  line-height: 1.6;
}

body.is-live .script-foot,
body.is-live .timer-sub,
body.is-live .rec-hint { color: var(--booth-mute); }

body.is-live .timer      { color: var(--booth-ink); }
body.is-live .site-foot  { color: oklch(0.52 0.02 250); }

body.is-live .recorder {
  background: var(--booth-2);
  border-top-color: var(--booth-rule);
}

/* ── The record button as a studio mic grille ─────────────────────────── */

.rec-core {
  background:
    repeating-linear-gradient(
      180deg,
      oklch(0.62 0.21 25) 0 4px,
      oklch(0.54 0.19 25) 4px 7px
    );
}

.rec-btn.is-recording .rec-core {
  background: var(--live);
}

@media (prefers-reduced-motion: reduce) {
  .onair i { animation: none; }
  .vu i { transition: none; }
}

/* ── Booth corrections ────────────────────────────────────────────────── */

/* The 44px min-height left this narrow enough to wrap onto two lines. */
.mast-help { white-space: nowrap; }

/* The idle ring is a pale pink that turns into a bright blob against the booth.
   On dark it becomes a soft red halo instead. */
body.is-live .rec-ring { background: oklch(0.62 0.21 25 / .20); }

/* Give the meter a readable resting state. At rest the old bars were 6px stubs
   that looked like specks of dirt rather than an instrument. */
.vu { height: 40px; }
.vu i { height: 10px; width: 6px; }

/* The meter is worth its space on the idle screen, but inside the fixed bar it was
   pushing the controls to 35 percent of a portrait viewport. Tighter while live. */
body.is-live .vu { height: 26px; margin-bottom: 2px; }
body.is-live .recorder { padding-top: var(--s-2); }
body.is-live .timer { font-size: 22px; }

/* ── The cue ──────────────────────────────────────────────────────────── */

/* Three lamps in the ON AIR language, because the LO has already learned what a lit red
   lamp means by the time they get here. They go out one at a time rather than lighting
   up: a countdown that fills reads as loading, one that empties reads as time running. */

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

.cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cue[hidden] { display: none; }

.cue-lamps { display: flex; gap: 10px; }

.cue-lamps i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--booth-rule);
  transition: background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.cue-lamps i.is-on {
  background: var(--live);
  box-shadow: 0 0 0 5px oklch(0.62 0.21 25 / .18);
}

.cue-num {
  font-family: var(--font-mono);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  color: var(--booth-ink);
  font-variant-numeric: tabular-nums;
}

/* For those two seconds the cue is the only thing worth reading, so it takes the space
   the timer and the meter would otherwise hold rather than stacking on top of them. */
body.is-cueing .vu,
body.is-cueing .timer,
body.is-cueing .timer-sub { display: none; }

/* Landscape. The live bar is already at its ceiling here, so the cue lies down flat
   rather than adding a second row to it. */
@media (max-height: 500px) {
  body.is-live .cue { flex-direction: row; gap: var(--s-3); }
  body.is-live .cue-num { font-size: 30px; }
  body.is-live .cue-lamps i { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cue-lamps i { transition: none; }
}

/* ── Suggestions, and a file they already have ────────────────────────── */

/* The starters stopped being instructions, so they have to stop looking like one. */
.templates-note {
  margin: 0 0 var(--s-2);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.use-file-line {
  margin-top: var(--s-3);
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Mid-take neither one has any business on screen. */
body.is-live .templates-note,
body.is-live .use-file-line { display: none; }