/* Resenence session UI (BB-1, BRIEF 71). Brand tokens from docs/brand/tokens.css — the "booth" dark
   studio ground (VOICE's vocabulary), body text body-on-booth (8.49:1). Overlay line roles are the
   sanctioned ones: reference=violet, your-take=teal, the-gap=koi. This is assembly of the nine
   prototype surfaces + the followable-line instrument, not new design. */
:root {
  --booth: #12332F; --panel: #17413A; --panel-2: #0d2925; --border: #1f4a44;
  --text: #B9D2C4; --dim: #7FA596; --bright: #DDEBE2;
  --cta-solid: #175A70; --focus-ring: #45A8CC;
  --ok: #4DB380; --warn: #D3B043; --bad: #D0567E;
  /* overlay roles (docs/brand/tokens.css --overlay-*) */
  --ref: #8FB0E6; --att: #2FA98F; --gap: #CC6B35; --play: #45A8CC;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 20px; --tracking: 0.14em;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--booth); color: var(--text); font-family: var(--font-body); }
body { padding: 24px 16px 72px; }
main { max-width: 720px; margin: 0 auto; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 2px; color: var(--bright); letter-spacing: .01em; }
.lead { color: var(--dim); font-size: .92rem; margin: 0 0 22px; line-height: 1.5; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 4px; color: var(--bright); }
.step-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; color: var(--dim); margin: 0 0 10px; }

/* progress rail */
.rail { display: flex; gap: 6px; margin: 0 0 22px; flex-wrap: wrap; }
.rail span { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.rail span.on { color: var(--booth); background: var(--att); border-color: var(--att); }
.rail span.done { color: var(--att); border-color: var(--att); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.panel h2 { margin-top: 0; }
p { line-height: 1.5; }
.muted { color: var(--dim); font-size: .88rem; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
button { font: inherit; font-size: .82rem; font-weight: 600; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking); }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
button.primary, button.record { background: var(--cta-solid); border-color: var(--cta-solid); color: #fff; }
button.primary:hover, button.record:hover { filter: brightness(1.08); }
button.ghost { background: transparent; }

button.small { padding: 7px 14px; font-size: .66rem; }

label { display: block; font-size: .82rem; color: var(--dim); margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }

/* signed-in bar — who is in the booth, and the way out */
.whoami { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin: 0 0 16px; }
.whoami .muted { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; }
textarea { min-height: 60px; resize: vertical; }
.field-inline { display: flex; gap: 12px; align-items: center; }
.field-inline select { width: auto; }

/* file drop (from prototype/capture) */
.drop { border: 1px dashed var(--border); border-radius: 14px; padding: 26px 16px; text-align: center;
  font-size: .9rem; color: var(--dim); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.drop:hover { border-color: var(--dim); }
.drop.drag { border-color: var(--focus-ring); background: rgba(69,168,204,.08); color: var(--text); }
.drop u { color: var(--text); }
.or { text-align: center; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .15em; color: var(--dim); margin: 12px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* level meter (from prototype/capture) */
.meter-wrap { margin-top: 18px; }
.meter-label { display: flex; justify-content: space-between; font-size: .66rem; color: var(--dim); margin-bottom: 5px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.meter-track { position: relative; height: 22px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--bad) 0%, var(--bad) var(--dead-pct,23%), var(--warn) var(--dead-pct,23%),
    var(--warn) var(--quiet-pct,57%), var(--ok) var(--quiet-pct,57%), var(--ok) 100%); transition: width 60ms linear; }
.meter-marker { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(221,235,226,.55); }
.peak-num { font-variant-numeric: tabular-nums; }
.peak-num.dead { color: var(--bad); } .peak-num.quiet { color: var(--warn); } .peak-num.okz { color: var(--ok); }

/* the instrument */
svg.inst { width: 100%; height: 250px; display: block; }
.legend { font-size: .78rem; color: var(--dim); display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* rhythm bars (understand rail, from prototype/ruler vocabulary) */
.rhythm { font-family: var(--font-mono); font-size: 1rem; line-height: 2; color: var(--text); overflow-x: auto; white-space: nowrap; }
.rhythm .bar { color: var(--att); }
.reading { font-size: 1.4rem; color: var(--bright); margin: 4px 0 14px; }
.reading .gap { color: var(--gap); }

/* result */
.summary { font-size: 1.15rem; color: var(--bright); margin: 6px 0; line-height: 1.5; }
.detail { font-size: .9rem; color: var(--dim); }
.detail div { margin: 3px 0; }
.badge { display: inline-block; font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.badge.partial { color: var(--warn); border: 1px solid var(--warn); }
.badge.scored { color: var(--ok); border: 1px solid var(--ok); }

/* refusal / banners — honest reason, never an error styling for coaching */
.banner { border-radius: 12px; padding: 14px 16px; margin-top: 12px; font-size: .92rem; line-height: 1.5; }
.banner.refuse { background: rgba(208,86,126,.12); border: 1px solid var(--bad); color: #F0B8CA; }
.banner.ours { background: rgba(211,176,67,.12); border: 1px solid var(--warn); color: #F2E4AE; }
.banner.note { background: rgba(69,168,204,.10); border: 1px solid var(--focus-ring); color: #CFE8F2; }

audio { width: 100%; margin-top: 10px; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--att);
  border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the wait (BRIEF 74, given a shape in BRIEF 75 HA-1b).

   Still NOT a progress bar. The service reports `pending` and nothing else — no stage, no fraction
   — so a bar claiming to track the pipeline would invent information, which
   docs/brand/motion-and-loading.md forbids ("never advance a stage optimistically"). What the bar
   below tracks is ELAPSED TIME AGAINST A MEASURED TYPICAL (docs/evidence/modal_deploy/, L4 tier),
   which is a fact we hold: 15 s warm, ~90 s on a cold machine. That is enough to tell a learner
   "this is normal" from "this is taking a while" — the actual question they are asking — without
   pretending to know what is running.

   Past the typical it stops filling and goes striped rather than creeping toward a 100% it cannot
   know. An indeterminate state, shown honestly, once we are genuinely in one. */
.waiting { margin-top: 12px; }
.waiting p { margin: 4px 0; }
.waitbar { height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; margin: 10px 0 6px; }
.waitbar > i { display: block; height: 100%; width: 0; background: var(--att); border-radius: 2px;
  transition: width .45s ease-out; }
.waitbar.over > i { width: 100% !important; background-image:
  repeating-linear-gradient(115deg, transparent 0 7px, rgba(255,255,255,.45) 7px 14px);
  animation: waitdrift 1.1s linear infinite; }
@keyframes waitdrift { to { background-position: 28px 0; } }
.elapsed { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--dim); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .waitbar > i { transition: none; }
  .waitbar.over > i { animation: none; }
}
footer { color: var(--dim); font-size: .76rem; margin-top: 26px; line-height: 1.5; }