/* Greenroom. A dark green room with one warm lamp in it.

   Every surface is a step on an emerald ladder that gets lighter as it comes
   forward, and the only accent in the app is the tungsten of the lamp. Nothing
   is a flat box with a border: cards carry a gradient within their own hue and
   a shadow tinted with the room rather than with black, so the screen reads as
   depth rather than as outlines. The signal charts earn their contrast from
   ink and empty space, because the point being made about pauses is that they
   are room to breathe. */

:root {
  /* the room, back to front */
  --bg: #08170F;
  --bg2: #0B1E14;
  --card: #10291D;
  --card-hi: #143324;
  --card2: #17392A;
  --line: #21503A;
  --hair: #17362A;

  /* ink */
  --fg: #EAF4EC;
  --muted: #9DB8A8;
  --faint: #7FA08D;

  /* the lamp: the one accent */
  --accent: #F5B44C;
  --accent-soft: #FFD79A;
  --accent-dim: #6E4E1C;
  --accent-wash: rgba(245, 180, 76, 0.13);
  --ink: #10190F;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 6px 18px -10px rgba(2, 12, 7, 0.9);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 40px -22px rgba(2, 12, 7, 1);
  --glow: 0 0 0 1px rgba(245, 180, 76, 0.32), 0 10px 34px -14px rgba(245, 180, 76, 0.5);

  --r1: 8px;
  --r2: 14px;
  --r3: 22px;

  --topH: 52px;
  --tabH: 60px;

  /* The shell overrides these on the root element. The env() values keep the
     layout right even when it never gets the chance to. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --ime: 0px;

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* An id rule beats the user agent's [hidden] rule, so say it once, loudly. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body {
  min-height: 100%;
  /* one warm source, high and slightly left, over the whole app */
  background:
    radial-gradient(120% 46% at 22% -6%, rgba(245, 180, 76, 0.10) 0%, rgba(245, 180, 76, 0.028) 38%, rgba(0, 0, 0, 0) 72%),
    var(--bg);
  background-attachment: fixed;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

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

/* ------------------------------------------------------------------ chrome */

#topbar {
  position: fixed; top: 0; right: 0; left: 0; bottom: auto;
  inset: 0 0 auto 0; z-index: 40;
  height: calc(var(--topH) + var(--sat));
  padding: var(--sat) 8px 0 8px;
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #0A1B12 0%, rgba(8, 23, 15, 0.94) 100%);
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(8px);
}
#topTitle {
  flex: 1; min-width: 0;
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  padding-left: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iconbtn {
  width: 40px; height: 40px; border-radius: var(--r1);
  display: grid; place-items: center; color: var(--muted);
  transition: background 140ms var(--ease), color 140ms var(--ease), transform 120ms var(--ease);
}
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn:active { background: var(--card); color: var(--fg); transform: scale(0.93); }
.iconbtn.big {
  width: 50px; height: 50px; color: var(--ink); border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  box-shadow: var(--glow);
}
.iconbtn.big svg { width: 25px; height: 25px; }
.iconbtn.big:active { background: var(--accent); transform: scale(0.94); }

#tabs {
  position: fixed; top: auto; right: 0; bottom: 0; left: 0;
  inset: auto 0 0 0; z-index: 40;
  height: calc(var(--tabH) + var(--sab));
  padding-bottom: var(--sab);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg, rgba(8, 23, 15, 0.94), #0A1B12);
  border-top: 1px solid var(--hair);
  backdrop-filter: blur(8px);
}
#tabs button {
  display: grid; place-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--faint);
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: color 160ms var(--ease);
}
#tabs button svg { width: 22px; height: 22px; display: block; }
#tabs button i {
  display: block; width: 5px; height: 5px; border-radius: 999px;
  background: var(--accent); opacity: 0; transform: scale(0.4);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
#tabs button.on { color: var(--fg); }
#tabs button.on i { opacity: 1; transform: none; }
#tabs button:active svg { transform: scale(0.9); }

#views { display: block; }
.view { display: none; }
.view.on { display: block; }
.wrap {
  padding: calc(var(--topH) + var(--sat) + 14px) 18px calc(var(--tabH) + var(--sab) + 34px);
  max-width: 640px; margin: 0 auto;
}
body.fullview #tabs { display: none; }
body.fullview .view.full .wrap { padding-bottom: calc(102px + var(--sab) + 20px); }

/* the director tossing pages: each screen deals its content in */
@keyframes deal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.view.on .stagger > * { animation: deal 360ms var(--ease) backwards; }
.view.on .stagger > *:nth-child(1) { animation-delay: 20ms; }
.view.on .stagger > *:nth-child(2) { animation-delay: 60ms; }
.view.on .stagger > *:nth-child(3) { animation-delay: 100ms; }
.view.on .stagger > *:nth-child(4) { animation-delay: 140ms; }
.view.on .stagger > *:nth-child(5) { animation-delay: 180ms; }
.view.on .stagger > *:nth-child(6) { animation-delay: 210ms; }
.view.on .stagger > *:nth-child(n+7) { animation-delay: 240ms; }

/* ------------------------------------------------------------------ pieces */

.label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); }
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.link {
  color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  padding: 4px 2px; transition: opacity 140ms var(--ease);
}
.link:active { opacity: 0.6; }
.err { color: var(--accent-soft); font-size: 13px; margin-top: 10px; background: var(--accent-wash);
       border-left: 2px solid var(--accent); padding: 9px 12px; border-radius: 0 var(--r1) var(--r1) 0; }

.field { margin-bottom: 26px; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 12px; }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chip {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 500; color: var(--fg);
  transition: transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
.chip:active { transform: scale(0.96); }
.chip.on {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  box-shadow: var(--glow); color: var(--ink); font-weight: 700;
}

.seg {
  display: flex; border-radius: var(--r2); padding: 3px;
  background: var(--bg2); box-shadow: inset 0 0 0 1px var(--hair);
}
.seg button {
  flex: 1; padding: 9px 6px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: color 160ms var(--ease), background 200ms var(--ease);
}
.seg button.on {
  background: linear-gradient(180deg, var(--card2), var(--card));
  color: var(--fg); box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
}
.seg button:active { color: var(--fg); transform: scale(0.97); }

.btn {
  padding: 13px 20px; border-radius: var(--r2);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: var(--ink); box-shadow: var(--shadow-1), 0 6px 18px -12px rgba(245, 180, 76, 0.9);
  font-size: 15px; font-weight: 700; letter-spacing: -0.008em;
  transition: transform 120ms var(--ease), filter 140ms var(--ease);
}
.btn:active { transform: scale(0.975); filter: brightness(0.94); }
.btn.ghost { background: linear-gradient(180deg, var(--card-hi), var(--card)); color: var(--fg); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.btn.danger { background: transparent; color: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-dim); }
.btn.wide { display: block; width: 100%; text-align: center; }
.btn:disabled { opacity: 0.45; }

.card {
  background: linear-gradient(180deg, var(--card-hi) 0%, var(--card) 62%);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hair);
  border-radius: var(--r3); padding: 16px 16px 18px;
  margin-bottom: 12px;
}

/* --------------------------------------------------- the drawn empty states */

.empty { text-align: center; padding: 18px 6px 40px; }
.empty svg { display: block; width: 190px; height: 130px; margin: 0 auto 18px; }
.empty-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.empty-body { color: var(--muted); font-size: 15px; margin-bottom: 22px; line-height: 1.5; max-width: 34ch; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ stage */

/* The signature: a mic standing in a cone of warm light, on the first screen,
   again as the backdrop of a take, and again as the launcher icon. */
.stagebox {
  position: relative; margin: 0 0 26px;
  border-radius: var(--r3); overflow: hidden;
  background: linear-gradient(180deg, #0C2318 0%, #071410 100%);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--hair);
}
.stagebox svg.scene { display: block; width: 100%; height: auto; }
/* the beam is alive: it breathes, the dust drifts through it, and the mic
   catches a little more light on the in breath. Nothing travels far, and every
   keyframe set rests on its own 100% so that stopping motion holds the picture
   rather than deleting it. */
@keyframes beam { 0%, 100% { opacity: 0.92; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.015); } }
@keyframes drift { 0% { transform: none; } 50% { transform: translate3d(4px, -13px, 0); } 100% { transform: none; } }
@keyframes lift { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px); } }
.stagebox .sc-beam { transform-origin: 195px 20px; animation: beam 5.2s ease-in-out infinite; }
.stagebox .sc-pool { transform-origin: 195px 180px; animation: beam 5.2s ease-in-out infinite; }
.stagebox .sc-mic { animation: lift 6.4s ease-in-out infinite; }
.stagebox .scene { display: block; width: 100%; height: auto; }
.stagebox .mote { animation: drift 9s ease-in-out infinite; }
.stagebox .mote.m2 { animation-duration: 11s; animation-delay: -3s; }
.stagebox .mote.m3 { animation-duration: 13s; animation-delay: -6s; }
.stagebox .mote.m4 { animation-duration: 10s; animation-delay: -1.5s; }
.stagebox .mote.m5 { animation-duration: 12s; animation-delay: -8s; }

.stagebox .caption {
  position: absolute; left: 18px; right: 18px; top: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); opacity: 0.85;
}
.stagefoot { position: relative; padding: 0 16px 20px; margin-top: -46px; text-align: center; }
.recbtn {
  position: relative; width: 96px; height: 96px; border-radius: 999px;
  display: grid; place-items: center; margin: 0 auto;
  background: linear-gradient(180deg, #1A4030, #0E2419);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(245, 180, 76, 0.55);
  transition: transform 140ms var(--ease);
}
.recbtn::before {
  content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px;
  inset: -10px; border-radius: 999px;
  background: radial-gradient(circle at 50% 42%, rgba(245, 180, 76, 0.26), rgba(245, 180, 76, 0) 68%);
}
.recbtn:active { transform: scale(0.94); }
.recbtn:disabled { opacity: 0.55; }
/* The button is the lamp: a lens with a hot core, a warm rim and a corona
   that holds at its middle value when motion is off. */
.recdot {
  position: relative; width: 56px; height: 56px; border-radius: 999px; display: block;
  background:
    radial-gradient(circle at 40% 32%, #FFFBF0 0%, #FFE3B4 26%, #F7C169 58%, #E09A2E 82%, #B87418 100%);
  box-shadow:
    0 0 26px rgba(245, 180, 76, 0.55),
    inset 0 -3px 7px rgba(140, 84, 8, 0.5),
    inset 0 2px 4px rgba(255, 251, 240, 0.7);
  animation: standby 3.6s ease-in-out infinite;
}
.recdot::after {
  content: ''; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px;
  inset: 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 251, 240, 0.34);
}
@keyframes standby {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}
.reclabel { margin-top: 14px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.recsub { margin-top: 3px; font-size: 13px; color: var(--muted); }
#recDemo { display: inline-block; margin-top: 8px; }

.prompt {
  position: relative;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hair);
  border-radius: var(--r2); padding: 14px 16px 16px 18px; margin-bottom: 24px;
  overflow: hidden;
}
.prompt::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-dim));
}
.prompt-text { font-size: 19px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.3; text-wrap: balance; }
.prompt-sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

.audgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.aud {
  position: relative; border-radius: var(--r2); overflow: hidden;
  background: var(--bg2); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1);
  padding: 0; text-align: left;
  transition: transform 130ms var(--ease), box-shadow 200ms var(--ease);
}
.aud canvas { display: block; width: 100%; height: 66px; }
.aud .audname { display: block; padding: 9px 12px 11px; font-size: 13.5px; font-weight: 600; }
.aud:active { transform: scale(0.975); }
.aud.on { box-shadow: 0 0 0 1.5px var(--accent), 0 10px 26px -16px rgba(245, 180, 76, 0.7); }
.aud.on .audname { color: var(--accent); }

/* ------------------------------------------------------------------ lists */

.row {
  display: block; width: 100%; text-align: left;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hair);
  border-radius: var(--r2); padding: 14px 16px; margin-bottom: 9px;
  transition: transform 130ms var(--ease);
}
.row:active { transform: scale(0.985); }
.row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.row-title { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.row-right { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-spark { margin-top: 10px; }
.row-spark canvas { display: block; width: 100%; height: 26px; }
.row-spark .sparklab { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }

.stat { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.stat div { min-width: 0; }
.stat b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.stat span { font-size: 11px; color: var(--faint); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; }

.deadline {
  display: inline-block; margin-top: 9px; font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.03em;
  background: var(--accent-wash); padding: 4px 10px; border-radius: 999px;
}

/* ------------------------------------------------------------------ notes */

.notes-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.notes-kicker svg { width: 17px; height: 17px; }
.notes-head {
  font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -0.032em;
  margin: 9px 0 12px; text-wrap: balance;
}
.notes-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.notes-rule { height: 1px; background: linear-gradient(90deg, var(--accent-dim), rgba(245,180,76,0)); margin-bottom: 20px; }

.pri {
  position: relative;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hair);
  border-radius: var(--r3); padding: 16px 16px 14px; margin-bottom: 12px;
}
.pri .prihead { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 7px; }
.pri .prihead svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 1px; }
.pri h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.018em; }
.pri p { font-size: 15px; color: var(--fg); line-height: 1.5; opacity: 0.9; }
.pri .evi {
  margin-top: 13px; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-dim);
  font-size: 13px; font-weight: 700; color: var(--accent);
  transition: transform 120ms var(--ease), background 160ms var(--ease);
}
.pri .evi svg { width: 13px; height: 13px; }
.pri .evi:active { transform: scale(0.96); background: rgba(245, 180, 76, 0.22); }

.keep {
  font-size: 15px; color: var(--muted); line-height: 1.5;
  padding: 14px 16px; margin-bottom: 8px;
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(245,180,76,0.09), rgba(245,180,76,0.03));
  box-shadow: inset 0 0 0 1px rgba(245, 180, 76, 0.16);
}
.keep b { color: var(--accent-soft); font-weight: 700; }
.plain { font-size: 13.5px; color: var(--faint); line-height: 1.55; padding: 18px 2px 2px; }

.panel { border-top: 1px solid var(--hair); }
.panel-head {
  width: 100%; display: flex; align-items: center;
  padding: 15px 2px; text-align: left; gap: 11px;
}
.panel-head b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.panel-head:active { opacity: 0.7; }
.panel-head > svg { width: 20px; height: 20px; flex: none; color: var(--faint); transition: color 200ms var(--ease); }
.panel-head .pvwrap { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.panel-head .pv { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.panel-head .pvwrap svg { width: 18px; height: 18px; color: var(--faint); transition: transform 200ms var(--ease); }
.panel.open .panel-head .pvwrap svg { transform: rotate(90deg); }
.panel.open .panel-head > svg { color: var(--accent); }
.panel.open .panel-head .pv { color: var(--accent); }
.panel-body { display: none; padding: 0 0 20px; }
.panel.open .panel-body { display: block; animation: deal 300ms var(--ease); }
.panel-body canvas { display: block; width: 100%; height: 84px; }
.panel-body p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.panel-body .chart {
  border-radius: var(--r1); padding: 8px 10px 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px var(--hair);
}
.nochart { font-size: 13.5px; color: var(--faint); padding: 26px 8px; text-align: center; }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 6px; }

.pillrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tpill {
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--bg2); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.actions .btn { flex: 1 1 auto; }

/* -------------------------------------------------------------- transport */

#transport {
  position: fixed; top: auto; right: 0; bottom: 0; left: 0;
  inset: auto 0 0 0; z-index: 45;
  height: calc(102px + var(--sab));
  padding: 12px 14px var(--sab);
  display: none; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #0C2318, #081A11);
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.9);
}
body.fullview.hasplayer #transport { display: flex; }
.tline { position: relative; flex: 1; min-width: 0; height: 58px; }
.tline canvas { display: block; width: 100%; height: 58px; }
#playhead {
  position: absolute; top: 2px; bottom: 2px; width: 2px; border-radius: 2px;
  background: var(--accent-soft); left: 0; pointer-events: none;
  box-shadow: 0 0 10px rgba(245, 180, 76, 0.7);
}
.tmeta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; width: 34px; }
.markbtn {
  width: 58px; padding: 9px 0; border-radius: var(--r1);
  background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px; font-weight: 700; line-height: 1.15; color: var(--fg);
  transition: transform 120ms var(--ease);
}
.markbtn small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.markbtn:active { transform: scale(0.94); background: var(--accent); color: var(--ink); }

/* ------------------------------------------------------------------ room */

#rehearse {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; flex-direction: column;
}
#roomCanvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; display: block; }

#meters {
  position: relative; z-index: 3;
  padding: calc(var(--sat) + 14px) 18px 0;
  transition: opacity 240ms var(--ease);
}
#meters.hidden { opacity: 0; pointer-events: none; }
.mrow { display: flex; align-items: center; gap: 9px; }
.mtime { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
         text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.mpill {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(8, 23, 15, 0.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  color: var(--muted); letter-spacing: 0.02em; backdrop-filter: blur(6px);
}
.mpill.live { color: var(--accent); }
.mpill.quiet { opacity: 0; transition: opacity 220ms var(--ease); }
.mpill.quiet.on { opacity: 1; color: var(--ink); background: var(--accent); box-shadow: none; }
.levelbar { margin-top: 9px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.10); overflow: hidden; }
.levelbar i {
  display: block; height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent-soft));
  transition: width 90ms linear;
}

#prompter {
  /* A prompter shows a few lines around the reading line. Any more and the
     script covers the room you are supposed to be looking at. */
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; max-height: 39%;
  margin: 16px 0 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 56%, transparent 88%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 56%, transparent 88%);
}
/* the script has to win against whatever the room is doing behind it */
#prompter::before {
  content: ''; position: absolute; top: -20px; right: -20px; bottom: 0; left: -20px;
  inset: -20px -20px 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 14, 9, 0.90) 0%, rgba(4, 14, 9, 0.78) 58%, rgba(4, 14, 9, 0) 100%);
}
#prompterInner {
  position: relative; z-index: 2;
  padding: 0 20px; font-size: 25px; line-height: 1.45; font-weight: 500;
  letter-spacing: -0.018em; will-change: transform;
  text-shadow: 0 2px 12px rgba(3, 12, 7, 0.9);
}
/* The reading line sits behind the words as a band of light, never across them:
   a rule drawn over the text reads as a sentence struck out. */
.prompter-line {
  position: absolute; z-index: 1; left: 0; right: 0; top: 40%; height: 46px;
  background: linear-gradient(90deg, rgba(245,180,76,0) 0%, rgba(245,180,76,0.13) 18%, rgba(245,180,76,0.13) 82%, rgba(245,180,76,0) 100%);
  pointer-events: none;
}
.prompter-line::before {
  content: ''; position: absolute; left: 8px; top: 50%; margin-top: -5px;
  border: 5px solid transparent; border-left: 7px solid var(--accent);
}
#rehearse:not(.hasprompter) #prompter { display: none; }
#rehearse.hasprompter #meters { flex: 0 0 auto; }
#rehearse:not(.hasprompter) #meters { flex: 1; }
#rehearse.hasprompter #recFoot { margin-top: auto; }

#recFoot {
  position: relative; z-index: 3;
  padding: 18px 14px calc(var(--sab) + 22px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.stopbtn {
  width: 84px; height: 84px; border-radius: 999px;
  display: grid; place-items: center; flex: none;
  background: rgba(10, 27, 18, 0.82); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 2px var(--accent), 0 14px 40px -18px rgba(245, 180, 76, 0.7);
  transition: transform 130ms var(--ease);
}
.stopbtn:active { transform: scale(0.94); }
.stopbtn span {
  width: 30px; height: 30px; border-radius: 6px; display: block;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
}
.ghostbtn {
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 11px 12px; min-width: 92px; text-align: center;
  border-radius: 999px; background: rgba(8, 23, 15, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  white-space: nowrap; backdrop-filter: blur(6px);
  transition: transform 120ms var(--ease);
}
.ghostbtn:active { transform: scale(0.95); color: var(--fg); }

#countdown {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 5;
  display: grid; place-items: center;
  /* It sits over the take controls, so it must never take their taps, and it is
     light enough that they stay visible underneath it. */
  pointer-events: none;
  background: radial-gradient(70% 44% at 50% 40%, rgba(12, 35, 24, 0.76), rgba(5, 16, 10, 0.80));
}
#countNum {
  font-size: 104px; font-weight: 700; letter-spacing: -0.05em; color: var(--accent);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 60px rgba(245, 180, 76, 0.45);
  animation: beat 800ms var(--ease);
}
@keyframes beat { from { transform: scale(1.22); opacity: 0.2; } to { transform: none; opacity: 1; } }

#analysing {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: radial-gradient(70% 46% at 50% 40%, #0D2519, var(--bg));
}
.anwrap { width: 250px; text-align: center; }
.anwrap .anmark {
  display: block; width: 92px; height: 92px; margin: 0 auto 24px;
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(245, 180, 76, 0.5);
  animation: beam 3.4s ease-in-out infinite;
}
.anbar { height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.anbar i { display: block; height: 100%; width: 0%; border-radius: 3px;
           background: linear-gradient(90deg, var(--accent-dim), var(--accent-soft)); transition: width 220ms linear; }
#anText { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ----------------------------------------------------------------- sheets */

#scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 70; background: rgba(3, 12, 7, 0.72); animation: fadein 180ms var(--ease); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; top: auto; right: 0; bottom: 0; left: 0;
  inset: auto 0 0 0; z-index: 71;
  /* The keyboard is an inset. On Android 15 and later the window no longer
     resizes for it, so a sheet anchored to the bottom of the layout viewport
     puts its Save button behind the keys. Lift the whole sheet instead. */
  bottom: var(--ime);
  background: linear-gradient(180deg, #123021 0%, var(--bg2) 34%);
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255,255,255,0.06);
  border-top: 1px solid var(--line);
  border-radius: var(--r3) var(--r3) 0 0;
  max-height: calc(88vh - var(--ime)); overflow-y: auto;
  animation: rise 260ms var(--ease);
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the script and settings sheets carry long content and are allowed more room */
.sheet.tall { max-height: calc(94vh - var(--ime)); }
/* A sheet can be taller than the screen, and its Save or Done used to sit below
   the fold with no other signposted way out. Pin the foot to the bottom of the
   sheet so the way out is always on screen. */
.sheet .sheet-foot {
  position: sticky; bottom: 0; z-index: 2;
  margin-left: -20px; margin-right: -20px; padding: 12px 20px calc(4px + var(--sab));
  background: linear-gradient(180deg, rgba(11, 30, 20, 0), var(--bg2) 34%);
}
.sheet-in { padding: 22px 20px calc(22px + var(--sab)); max-width: 640px; margin: 0 auto; }
.sheet h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.026em; margin-bottom: 10px; }
.sheet-body { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.sheet-foot { display: flex; gap: 10px; margin-top: 22px; }
.sheet-foot .btn { flex: 1; text-align: center; }
.sheet .mark-in-sheet {
  display: block; width: 78px; height: 78px; margin: 0 auto 18px;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 16px 34px -18px rgba(2, 12, 7, 1);
}
.lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.input {
  width: 100%; padding: 12px 14px; border-radius: var(--r2);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border: 0; color: var(--fg);
  font-size: 16px; -webkit-appearance: none; appearance: none;
  transition: box-shadow 160ms var(--ease);
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.input.area { min-height: 220px; resize: vertical; line-height: 1.5; font-size: 15.5px; }

.occ { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.occ button {
  padding: 15px 14px; border-radius: var(--r2); text-align: left;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hair);
  transition: transform 120ms var(--ease), box-shadow 180ms var(--ease);
}
.occ button:active { transform: scale(0.975); box-shadow: 0 0 0 1px var(--accent-dim); }
.occ b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 3px; letter-spacing: -0.015em; }
.occ span { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: block; }

.setrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
}
.setrow .st { font-size: 15px; font-weight: 600; }
.setrow .sd { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.tog:active { transform: scale(0.95); }
.tog { width: 50px; height: 29px; border-radius: 999px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); position: relative; flex: none;
       transition: background 200ms var(--ease); }
.tog i { position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 999px; background: var(--faint);
         transition: left 200ms var(--ease), background 200ms var(--ease); }
.tog.on { background: var(--accent); box-shadow: none; }
.tog.on i { left: 24px; background: var(--ink); }
.setnote { font-size: 13px; color: var(--muted); line-height: 1.55; padding: 16px 0 0; }
.setnote b { color: var(--fg); font-weight: 700; }

.pickrow {
  display: block; width: 100%; text-align: left; padding: 13px 2px;
  border-bottom: 1px solid var(--hair); font-size: 15px; font-weight: 600;
}
.pickrow small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; font-weight: 400; }
.pickrow:active { color: var(--accent); }

/* ---------------------------------------------------------------- compare */

.cmp {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hair);
  border-radius: var(--r3); padding: 16px; margin-bottom: 12px;
}
.cmp h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.cmp canvas { display: block; width: 100%; height: 86px; }
.cmp .cl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.cmp .cl i { width: 18px; height: 2px; border-radius: 2px; display: block; background: var(--accent); }
.cmp .cl.b i { background: var(--muted); }
.delta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.delta:last-child { border-bottom: 0; }
.delta span { color: var(--muted); }
.delta b { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.delta b em { font-style: normal; color: var(--faint); font-weight: 500; padding: 0 3px; }

/* ------------------------------------------------------------------ toast */

#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabH) + var(--sab) + 20px); z-index: 90;
  background: linear-gradient(180deg, #1B4130, #12301F);
  color: var(--fg);
  padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.9), inset 0 0 0 1px var(--line);
  max-width: 88vw; text-align: center;
  /* a message must never eat the tap meant for the button underneath it */
  pointer-events: none;
  animation: toastin 220ms var(--ease);
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
body.fullview #toast { bottom: calc(var(--sab) + 26px); }


/* ------------------------------------------------- boot, busy and dead ends */

/* Nothing is allowed to look tappable before its handler exists. A tap in that
   window is caught by the inline boot guard, this line appears, and the tap is
   replayed once the app is ready. */
#bootnote {
  display: none;
  position: fixed; top: auto; right: 0; bottom: 0; left: 0;
  inset: auto 0 0 0; z-index: 95;
  padding: 14px 18px calc(14px + var(--sab));
  text-align: center; font-size: 14px; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
}
html.booting #bootnote { display: block; }

#bootfail {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 99;
  display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.bfwrap { max-width: 34ch; text-align: center; }
.bfwrap h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.026em; margin-bottom: 12px; }
.bfwrap p { font-size: 15px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }

#busy {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: radial-gradient(70% 46% at 50% 40%, rgba(13, 37, 25, 0.96), rgba(8, 23, 15, 0.97));
}
#busy .anwrap { width: 260px; }
#busyText { font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 14px; }
#busy .anbar { margin-bottom: 16px; }
#busy .ghostbtn { min-width: 120px; }
/* three lamps coming up in turn: motion that says the app is alive, and that
   holds all three lit rather than vanishing when motion is off */
.spin { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.spin i {
  width: 10px; height: 10px; border-radius: 999px; display: block;
  background: var(--accent); opacity: 0.35;
  animation: lamp 1150ms var(--ease) infinite;
}
.spin i:nth-child(2) { animation-delay: 150ms; }
.spin i:nth-child(3) { animation-delay: 300ms; }
@keyframes lamp {
  0%, 100% { opacity: 0.32; transform: scale(0.82); }
  40% { opacity: 1; transform: scale(1.12); }
}

/* ------------------------------------------------------- the microphone card */

.miccard {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(245, 180, 76, 0.13), rgba(245, 180, 76, 0.04));
  box-shadow: inset 0 0 0 1px rgba(245, 180, 76, 0.28);
  border-radius: var(--r3); padding: 16px 16px 18px; margin-bottom: 24px;
}
.miccard .eyebrow { margin-bottom: 7px; }
.miccard-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.miccard-body { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin-top: 7px; }
.miccard .actions { margin-top: 15px; }
.miccard .actions .btn { padding: 11px 16px; font-size: 14px; }

/* A label that is not a control must not wear the clothes of one. */
.chip.placeholder {
  background: none; box-shadow: none; padding: 9px 0;
  color: var(--faint); font-weight: 600; font-size: 14px;
}

/* --------------------------------------------------------- the take result */

#takeResult {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 7;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(70% 46% at 50% 38%, #0D2519, var(--bg));
}
.trwrap { width: 100%; max-width: 34ch; }
.trwrap h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.028em; margin: 6px 0 10px; text-wrap: balance; }
.trwrap .actions { margin-top: 20px; flex-direction: column; }
.trwrap .actions .btn { width: 100%; text-align: center; }

/* The stop button cannot discard a take by accident: under six seconds there is
   nothing to read, so it counts down in place rather than throwing the take away. */
.stopbtn.waiting { box-shadow: inset 0 0 0 2px var(--accent-dim); }
.stopbtn .wait {
  font-size: 26px; font-weight: 700; color: var(--accent-soft);
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}

/* The room has gone quiet and nothing is arriving: said once, and kept said. */
#silentBanner {
  /* Directly under the meters, where the clock and the level bar are: the place
     you are already looking while a take runs. */
  position: absolute; z-index: 4; left: 18px; right: 18px;
  top: calc(var(--sat) + 58px);
  padding: 11px 14px; border-radius: var(--r2);
  background: rgba(10, 27, 18, 0.88); box-shadow: inset 0 0 0 1px rgba(245, 180, 76, 0.42);
  backdrop-filter: blur(6px);
  font-size: 13px; line-height: 1.4; color: var(--accent-soft);
}

/* An example take is never dressed as your own. */
.demobar svg { width: 19px; height: 19px; flex: none; color: var(--accent); }
.demobar {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border-radius: var(--r2); margin-bottom: 16px;
  background: rgba(245, 180, 76, 0.1); box-shadow: inset 0 0 0 1px rgba(245, 180, 76, 0.26);
  font-size: 13px; line-height: 1.4; color: var(--accent-soft);
}
.demotag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent-wash); color: var(--accent); vertical-align: middle;
}

/* --------------------------------------------------------- reduced motion */
/* Stopping travel is right. Deleting the picture is not: every shape below
   still draws, it simply holds still. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .recdot { animation: none; transform: scale(1.03); }
  /* The three lamps hold lit rather than disappearing. */
  .spin i { animation: none; opacity: 0.9; }
}