/* ============================================================================
   Vaios — /live, the call-record mini-app.

   Ported from design/06/live.html, which was a standalone concept file: it
   carried its own reset, its own type scale and its own full copy of the
   palette under a second set of names (--bg/--elev-1/--iris/--s-4/--r-2).
   Shipping that as-is would have made web/live.html a FOURTH vendored copy of
   the brand colours, on a site whose whole token discipline exists because
   they are already vendored into vaios/webui.py and the reel's player.html
   across a host boundary. So every token was remapped onto web/tokens.css and
   this file defines no colour of its own — there is not one hex in it.

   Three mappings were judgement calls rather than renames:
     * the concept's --s-* space ladder is 4px-based like the site's --sp-*,
       and 32/40/72 land exactly on --sp-8/--sp-10/--sp-18. Only --sp-18 was
       missing and it was added to tokens.css rather than rounded away.
     * radius 12px/16px have no exact --r-* stop. They map onto the site's
       ladder (--r-lg 14px, --r-xl 20px) instead of forking a second scale;
       the 2-4px difference is invisible and one ladder is the point.
   Load order: tokens.css -> theme.css -> live.css. style.css is deliberately
   NOT linked: its `section{padding:46px 0}` and 660px `.wrap` are document
   rules, and this page is an application shell with no document flow.
   ========================================================================== */

/* ---- reset. style.css normally carries this; the app does not link it. --- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:none}
a{color:inherit}
ul{list-style:none}

/* ==========================================================================
   BASE
   ========================================================================== */
body{
  background:var(--c-bg); color:var(--c-ink);
  font:400 var(--fs-400)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;   /* clip, not hidden — hidden would break position:sticky */
}
h1, h2, h3, h4{
  font-family:var(--font-serif); font-optical-sizing:auto; font-weight:600;
  line-height:var(--lh-tight); letter-spacing:var(--tr-display);
}
h2, h3{text-wrap:balance}
strong{font-weight:600}
em{font-style:normal}
a{text-decoration:none}
code{font-family:var(--font-mono); font-size:.88em; color:var(--c-ink); background:var(--c-tint); padding:1px 5px; border-radius:var(--r-sm); white-space:nowrap}
:focus-visible{outline:2px solid var(--c-focus); outline-offset:2px; border-radius:var(--r-sm)}
[id]{scroll-margin-top:64px}

/* mono numerals get tabular figures everywhere */

/* ==========================================================================
   CONCEPT CHROME — control bar + spec sections
   ========================================================================== */

/* --- swatches ------------------------------------------------------------ */

/* --- contrast table ------------------------------------------------------ */

/* --- logo lab ------------------------------------------------------------ */

/* sized by HEIGHT, not width, so all three stages align across the row
   even though the three lockups have different aspect ratios */

/* ==========================================================================
   COMPONENT SYSTEM
   ========================================================================== */

.field{display:grid; gap:7px; max-width:24rem}
.field > label{
  font-family:var(--font-mono); font-size:var(--fs-100); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted);
}

 

/* ==========================================================================
   06 · THE CALL SCOPE  (ported from concept 03 "Signal", re-skinned)
   A RECORD, NOT A METER. Everything here is fixed: the waveform is a stored
   two-lane transcript, the timecodes never change, the duration is final, and
   the event log is already complete. The only motion is a PLAYHEAD replaying
   that finished record once — never an idle loop implying live input.
   The page captures no audio and asks for no permission.
   NOTE for later: the honest version of "drive this from real sound" is to
   feed it a REAL RECORDED CALL on an explicit click — web/demo.mp4 already
   ships, and vaios/reel/ produces per-speaker call audio. That needs no
   getUserMedia and no permission prompt. Nothing here forecloses it: the
   lanes are data-driven and the playhead is already time-indexed.
   ========================================================================== */
.scope{
  grid-column:1 / -1;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg), var(--inset-top); overflow:hidden; position:relative;
}
.scope::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--grad-brand)}

.scope-head{
  display:flex; align-items:center; gap:var(--sp-3) var(--sp-5); flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-border);
  font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.13em;
  text-transform:uppercase; color:var(--c-faint);
}
.scope-head .id{color:var(--c-ink); letter-spacing:.11em}
.scope-head .done{
  display:inline-flex; align-items:center; gap:6px; color:var(--c-success);
  border:1px solid color-mix(in srgb, var(--c-success) 38%, transparent);
  border-radius:var(--r-pill); padding:3px 9px 3px 7px;
}
.scope-head .done::before{content:""; width:6px; height:6px; background:currentColor; border-radius:1px}
.scope-head .dur{margin-left:auto; color:var(--c-ink); font-variant-numeric:tabular-nums}
/* One button, three words. It was a Replay button when the only thing it
   could do was re-run a fixed 4.2s sweep; a real clock has a pause, so the
   label has to say which of the three states pressing it will produce.
   --word is min-width'd because Play/Pause/Replay are different lengths and
   a control that resizes under your cursor reads as a glitch. */
.scope-play{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.13em;
  text-transform:uppercase; color:var(--c-ink); cursor:pointer;
  border:1px solid var(--c-line-control); border-radius:var(--r-pill);
  padding:4px 13px 4px 10px; background:var(--c-tint);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.scope-play:hover{border-color:var(--c-accent-2); background:var(--c-surface-2)}
.scope-play:focus-visible{outline:2px solid var(--c-focus); outline-offset:2px}
.scope-play .glyph{font-size:10px; line-height:1; color:var(--c-hl)}
.scope-play .state{min-width:3.9em; text-align:left}

.scope-body{display:grid; gap:0}
.scope-face{position:relative; padding:var(--sp-5) var(--sp-5) var(--sp-3); background:var(--c-field); min-width:0}
.scope-face svg{width:100%; height:auto; display:block; overflow:visible}
/* a slider, so it takes focus, takes a pointer, and reports a position.
   touch-action:none because a horizontal drag here is a scrub, not a scroll. */
.scope-face{cursor:ew-resize; touch-action:none}
.scope-face:focus-visible{outline:2px solid var(--c-focus); outline-offset:-2px}

/* two lanes: the caller is indigo, Vaios is ember — the arc's two poles
   doing semantic work rather than decoration */
.wf-caller rect{fill:var(--c-accent-2)}
.wf-agent  rect{fill:var(--c-hl)}
.wf-axis line{stroke:var(--c-line-strong); stroke-width:1}
.wf-tick  line{stroke:var(--c-line-strong); stroke-width:1}
.wf-tick  line.major{stroke:var(--c-faint)}
.wf-tlabel{fill:var(--c-faint); font-family:var(--font-mono); font-size:19px; letter-spacing:.04em}
.wf-mark line{stroke:var(--c-faint); stroke-width:1; stroke-dasharray:2 3}
.wf-mark circle{fill:var(--c-ink)}

/* The playhead lives INSIDE the viewBox. As an absolutely-positioned span
   over the face it was off by the face's horizontal padding at every width —
   tolerable when it only swept end to end, wrong the moment it carries a
   timecode and a click on it means a second. The clock rides on the same
   translate as the line, so the two cannot drift apart. */
.wf-head line{stroke:var(--c-ink); stroke-width:1.5}
.wf-head circle{fill:var(--c-ink)}
.wf-cur{
  fill:var(--c-ink); font-family:var(--font-mono); font-size:19px;
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}

.scope-key{
  display:flex; gap:var(--sp-5); flex-wrap:wrap; padding:0 var(--sp-5) var(--sp-4);
  font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-muted);
}
.scope-key span{display:inline-flex; align-items:center; gap:7px}
.scope-key i{width:14px; height:3px; border-radius:2px}
.scope-key .k-caller{background:var(--c-accent-2)}
.scope-key .k-agent{background:var(--c-hl)}
/* Space is the control nobody will find by looking. One line, in the key
   that is already there, rather than a tooltip nobody hovers. */
.scope-key .hint{margin-left:auto; color:var(--c-faint); letter-spacing:.04em; text-transform:none}

/* THE TIMELINE — the words and the logged events on one clock.
   Every row is fully legible at rest. The old event log dimmed unreached
   rows to .42 opacity, which was fine for five labels and wrong for a
   conversation: a transcript you cannot read until you have watched it play
   is a worse transcript. Progress is carried by the 2px rail on the left and
   the tint on the row the playhead is currently in — both of which read at a
   glance and neither of which costs the text its contrast. */
.timeline{list-style:none; border-top:1px solid var(--c-border); min-width:0}
.ln{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:var(--sp-3);
  padding:10px var(--sp-5); border-top:1px solid var(--c-border);
  position:relative; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease);
}
.ln:first-child{border-top:none}
.ln:hover{background:var(--c-tint)}
.ln::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent}
.ln[data-lit="1"]::before{background:var(--c-line-strong)}
.ln[aria-current="true"]{background:var(--c-tint)}
.ln[aria-current="true"]::before{background:var(--grad-brand)}
.ln .t{font-family:var(--font-mono); font-size:var(--fs-200); color:var(--c-faint); font-variant-numeric:tabular-nums}
.ln .body{min-width:0; display:grid; gap:3px}

/* speech: who said it, in their lane's colour, then what they said */
.ln .who{font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase}
.ln.is-caller .who{color:var(--c-accent-2)}
.ln.is-agent  .who{color:var(--c-hl)}
.ln .say{font-size:var(--fs-300); line-height:1.5; color:var(--c-ink)}

/* an event is not speech, so it does not get a speaker or a paragraph — it
   gets the diamond the sample-flag uses and its value in mono on the right */
.ln-ev .body{grid-template-columns:1fr auto; align-items:baseline; gap:var(--sp-3)}
.ln-ev .lbl{font-size:var(--fs-300); color:var(--c-muted)}
.ln-ev .lbl::before{
  content:""; display:inline-block; width:5px; height:5px; margin-right:9px;
  border:1px solid currentColor; border-radius:1px; transform:rotate(45deg);
}
.ln-ev .v{font-family:var(--font-mono); font-size:var(--fs-200); color:var(--c-faint); font-variant-numeric:tabular-nums}
.ln-ev.hit .lbl{color:var(--c-ink); font-weight:600}
.ln-ev.hit .v{color:var(--c-hl)}

.scope-stats{
  display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--c-border);
}
.scope-stats > div{padding:var(--sp-4) var(--sp-5); border-left:1px solid var(--c-border);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-2)}
.scope-stats > div:first-child{border-left:none}
.scope-stats .k{
  font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-faint);
}
.scope-stats .val{
  font-family:var(--font-mono); font-size:var(--fs-600); font-weight:500; color:var(--c-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.scope-stats .val.acc{color:var(--c-hl)}
.scope-foot{
  padding:var(--sp-3) var(--sp-5) var(--sp-4); border-top:1px solid var(--c-border);
  font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.06em; color:var(--c-faint);
}

@media (min-width:760px){
  .wf-tlabel, .wf-cur{font-size:11px}
  .scope-body{grid-template-columns:minmax(0,1.55fr) minmax(220px,.85fr)}
  .timeline{border-top:none; border-left:1px solid var(--c-border)}
  .scope-key{grid-column:1; padding-bottom:var(--sp-5)}
  .scope-stats{grid-column:1 / -1}
}
@media (min-width:1000px){
  .scope-body{grid-template-columns:minmax(0,1.7fr) minmax(250px,.8fr)}
}

/* ---- hero brand panel ------------------------------------------------- */
/* The lockup is SUBORDINATED to the call scope: no card, no border, no
   shadow — just the wordmark and a hairline. Identity is already carried by
   the nav; the scope is the evidence, so the scope gets the elevation.
   On phones it reflows ABOVE the headline rather than vanishing: the nav
   carries only the one-colour build, so without this the page's single
   gradient-logotype moment would not exist on mobile at all. Same element,
   moved — not a second instance. */

/* ==========================================================================
   06 · THE MINI-APP SHELL
   Full viewport, NO PAGE SCROLL — the panes scroll, the document does not.
   Tokens, components and the call scope are the same rules index.html uses;
   only the shell and the list are new.
   ========================================================================== */
html, body{height:100%; overflow:hidden}
body{overflow-x:hidden}

.app{display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0}

/* ---- nav ---------------------------------------------------------------- */

/* ---- rail: the one orienting line + the sample-data marker -------------- */
.app-rail{
  flex:none; display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--c-border);
  background:var(--c-bg-elev);
}
.app-claim{
  font-family:var(--font-serif); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(16px,.7rem + 1.1vw,23px); letter-spacing:-.02em; line-height:1.15;
  color:var(--c-ink); margin-right:auto;
}
.app-claim em{font-style:normal; color:var(--c-hl)}

/* The sample-data marker. Load-bearing, not decoration: this page is public
   and the records on it are invented, so the marker lives in the chrome that
   is visible in EVERY state — both panes, both breakpoints, never scrolled
   away — and is drawn dashed so it cannot be mistaken for a status chip. */
.sample-flag{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-family:var(--font-mono); font-size:var(--fs-100); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--c-hl);
  border:1px dashed currentColor; border-radius:var(--r-md);
  padding:5px 10px; background:color-mix(in srgb, currentColor 7%, transparent);
}
.sample-flag::before{content:""; width:7px; height:7px; border:1.5px solid currentColor; border-radius:2px; transform:rotate(45deg)}

/* ---- panes -------------------------------------------------------------- */
.app-main{flex:1; min-height:0; display:grid; grid-template-columns:1fr}
.pane{min-height:0; min-width:0; display:flex; flex-direction:column; background:var(--c-bg)}
.pane-detail{border-left:1px solid var(--c-border); background:var(--c-bg-elev)}
.pane-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain}

/* ---- filters + summary -------------------------------------------------- */
.filters{
  flex:none; display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end;
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-border);
}
.filters .field{gap:5px; max-width:none; flex:1 1 118px; min-width:0}
.filters label{font-size:10px; letter-spacing:.12em}
.filters select, .filters input{
  font:500 var(--fs-300)/1.2 var(--font-sans); color:var(--c-ink); background:var(--c-field);
  border:1px solid var(--c-line-control); border-radius:var(--r-md); padding:9px 10px; width:100%;
}
.filters input[type="date"]{font-family:var(--font-mono); font-size:var(--fs-200)}
.filters select:focus, .filters input:focus{outline:2px solid var(--c-focus); outline-offset:1px; border-color:transparent}
.filters .reset{
  flex:none; font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-muted); cursor:pointer; padding:9px 12px;
  border:1px solid var(--c-line-control); border-radius:var(--r-md); background:transparent;
}
.filters .reset:hover{color:var(--c-ink); border-color:var(--c-accent-2); background:var(--c-tint)}

.summary{
  flex:none; display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--c-border);
}
.summary > div{padding:var(--sp-3) var(--sp-4); border-left:1px solid var(--c-border); min-width:0;
  display:flex; flex-direction:column; justify-content:space-between; gap:2px}
.summary > div:first-child{border-left:none}
.summary .k{font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--c-faint)}
.summary .v{font-family:var(--font-mono); font-size:var(--fs-500); color:var(--c-ink); font-variant-numeric:tabular-nums}
.summary .v.acc{color:var(--c-hl)}

/* ---- the call list (a real listbox) ------------------------------------- */
.calls{list-style:none; outline:none}
.calls:focus-visible{outline:2px solid var(--c-focus); outline-offset:-2px}
.call{
  display:grid; grid-template-columns:auto 1fr auto; gap:2px var(--sp-4);
  grid-template-areas:"time name dur" "time num out";
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-border);
  cursor:pointer; position:relative;
  transition:background-color var(--dur-fast) var(--ease);
}
.call:hover{background:var(--c-tint)}
.call .c-time{grid-area:time; font-family:var(--font-mono); font-size:var(--fs-200); color:var(--c-faint); font-variant-numeric:tabular-nums; align-self:center}
.call .c-name{grid-area:name; font-size:var(--fs-300); font-weight:600; color:var(--c-ink)}
.call .c-num{grid-area:num; font-family:var(--font-mono); font-size:var(--fs-200); color:var(--c-muted); font-variant-numeric:tabular-nums}
.call .c-dur{grid-area:dur; font-family:var(--font-mono); font-size:var(--fs-200); color:var(--c-muted); font-variant-numeric:tabular-nums; text-align:right}
.call .c-out{grid-area:out; text-align:right}
.tag-out{
  display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill);
  border:1px solid currentColor; background:transparent;
}
.tag-out.booked{color:var(--c-success)}
.tag-out.message{color:var(--c-accent-2)}
.tag-out.answered{color:var(--c-muted); border-color:var(--c-line-strong)}

.call[aria-selected="true"]{background:var(--c-surface-2); box-shadow:var(--shadow-sm)}
.call[aria-selected="true"]::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad-brand);
}
.call[aria-selected="true"] .c-name{color:var(--c-ink)}
/* the active-option ring is a FOCUS artefact: only draw it while the
   listbox actually holds focus, or every visitor sees a phantom ring */
.calls:focus-visible .call.is-active, .calls:focus .call.is-active{outline:2px solid var(--c-focus); outline-offset:-2px}

.empty{
  padding:var(--sp-18) var(--sp-5); text-align:center; color:var(--c-muted);
  display:grid; gap:var(--sp-3); justify-items:center;
}
.empty b{font-family:var(--font-serif); font-size:var(--fs-600); color:var(--c-ink); font-weight:600}
.empty p{font-size:var(--fs-300); max-width:26rem}

/* ---- the scope, re-hosted in the detail pane ---------------------------- */
.pane-detail .scope{
  grid-column:auto; margin:0; border:none; border-radius:0; box-shadow:none;
  background:transparent; display:flex; flex-direction:column; min-height:0;
}
.pane-detail .scope::before{display:none}
/* The scope fills the pane, and the TIMELINE is the only part that scrolls:
   the waveform, the key, the stats and the footer stay put, so the record's
   identity and its outcome never leave the screen while you read the middle
   of the call. This is why .scope-body is a flex column here and a grid
   everywhere else. */
.pane-detail .scope-body{display:flex; flex-direction:column; flex:1; min-height:0}
.pane-detail .scope-face, .pane-detail .scope-key{flex:none}
.pane-detail .timeline{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  border-left:none; border-top:1px solid var(--c-border);
}
.pane-detail .scope-stats, .pane-detail .scope-foot{flex:none}

/* Below the split the transcript is fighting for every row, so: the hint
   goes (it teaches a KEYBOARD control to a layout that is mostly touch, and
   the Pause button is right there saying the same thing), and the stats stop
   being a display row and become a label row. Worth ~80px of transcript. */
@media (max-width:1039px){
  .pane-detail .scope-key .hint{display:none}
  .pane-detail .scope-stats > div{padding:var(--sp-2) var(--sp-5)}
  .pane-detail .scope-stats .val{font-size:var(--fs-500)}
  .pane-detail .scope-foot{padding-top:var(--sp-2); padding-bottom:var(--sp-3)}
}

/* Above 1100px the waveform has to STOP growing. It is width:100% over a
   fixed viewBox, so on a 1000px pane it renders ~300px tall and leaves the
   transcript three rows — the wave was the whole record when the right-hand
   column held five event labels, and it is not any more. Putting the
   timeline beside it caps the wave's width, which is what caps its height,
   and buys the conversation the full height of the pane. Below this the two
   stack, because a transcript column narrower than ~330px wraps every line.
   860-1040 is the one genuinely cramped band — too narrow to split, wide
   enough that the wave costs ~200px — so below the split the chrome that is
   only advice gets dropped and the stats go compact. */
@media (min-width:1040px){
  .pane-detail .scope-body{
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,1fr);
    grid-template-rows:auto auto 1fr;
  }
  .pane-detail .scope-face{grid-column:1; grid-row:1}
  .pane-detail .scope-key{grid-column:1; grid-row:2; flex-wrap:wrap}
  .pane-detail .scope-key .hint{margin-left:0; flex-basis:100%}
  .pane-detail .timeline{
    grid-column:2; grid-row:1 / -1;
    border-top:none; border-left:1px solid var(--c-border);
  }
  /* The stats move under the waveform and go vertical. Left column = what
     the call WAS (the shape, the legend, the three numbers); right column =
     what was SAID. Three across would leave most of the column empty, and a
     tall void under a chart reads as a rendering fault rather than a margin. */
  /* align-self:end, not start. The right column is the tall one, so the
     left has slack whatever we do with it; parked at the BOTTOM the slack
     reads as a margin between two blocks, and the stats line up with the
     foot of the transcript. Parked at the top it reads as a page that
     failed to finish rendering. */
  .pane-detail .scope-stats{
    grid-column:1; grid-row:3; align-self:end;
    grid-template-columns:1fr; border-top:1px solid var(--c-border);
  }
  .pane-detail .scope-stats > div{
    border-left:none; border-top:1px solid var(--c-border);
    flex-direction:row; align-items:baseline; justify-content:space-between;
  }
  .pane-detail .scope-stats > div:first-child{border-top:none}
  /* The svg scales with its column, so a font-size in user units renders
     SMALLER here than it did full-bleed. 15 units at this column's scale is
     the 11px the full-width layout was getting. */
  .pane-detail .wf-tlabel, .pane-detail .wf-cur{font-size:15px}
}
.pane-detail .scope-face{background:var(--c-field); border-bottom:1px solid var(--c-border)}
.pane-detail .scope-key{padding-top:var(--sp-3)}
.detail-empty{display:grid; place-content:center; gap:var(--sp-3); padding:var(--sp-18) var(--sp-5); text-align:center; color:var(--c-muted)}

.back{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:var(--fs-100); letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-muted); cursor:pointer; border:1px solid var(--c-line-control);
  border-radius:var(--r-pill); padding:4px 11px; background:transparent;
}
.back:hover{color:var(--c-ink); border-color:var(--c-accent-2); background:var(--c-tint)}

/* ==========================================================================
   THE SHARED CHROME, HOSTED IN AN APP SHELL

   The nav is the same component every other page uses — same markup, same
   lockup, same active underline — so the identity does not change shape when
   you arrive here from /faq. Only the container differs: the panes below run
   full-bleed, so a bar centred on --maxw would float over a layout that does
   not share its measure.

   theme.css's document rules have to be told this is not a document: it gives
   every `section` 64px of vertical padding, which would push both panes off
   the bottom of a viewport that cannot scroll.
   ========================================================================== */
.app > .topbar, .app > .site-nav{flex:none}
/* theme.css widens the gutter to --sp-10 at 760px for a centred bar. Here the
   bar is full-bleed and must line up with the panes' --sp-8, so live.css
   states both gutters unconditionally — source order, not specificity, is
   what makes this win, and live.css is linked last. */
.site-nav .nav-wrap{max-width:none; padding-left:var(--sp-5); padding-right:var(--sp-5)}
.app section{padding:0}

/* ---- responsive: list-then-detail on a phone, split above 860 ----------- */
/* Below the split, chrome has to earn its height: on a 760px phone the nav,
   rail, filters and summary were taking ~400px before the first call row. */
@media (max-width:859px){
  .site-nav .nav-wrap{padding:var(--sp-2) var(--sp-4); gap:var(--sp-2) var(--sp-3); min-height:0}
  .site-nav .btn{font-size:var(--fs-200); padding:9px 13px}
  .app-rail{padding:var(--sp-2) var(--sp-4); gap:var(--sp-2)}
  .app-claim{font-size:16px}
  .sample-flag{padding:4px 8px; letter-spacing:.09em}
  .filters{padding:var(--sp-3) var(--sp-4); gap:var(--sp-2)}
  .summary > div{padding:var(--sp-2) var(--sp-4)}
  .summary .v{font-size:var(--fs-400)}
  .call{padding:var(--sp-3) var(--sp-4)}
  .app[data-view="list"]   .pane-detail{display:none}
  .app[data-view="detail"] .pane-list{display:none}
  .app[data-view="detail"] .pane-detail{border-left:none}
  /* four across even on a phone: labels wrap, but space-between keeps the
     values on one baseline, and it costs ~60px less than a 2x2 */
  .summary{grid-template-columns:repeat(4,1fr)}
  .summary > div{padding-left:var(--sp-3); padding-right:var(--sp-3)}
  .summary .k{font-size:9px; letter-spacing:.09em}
}
@media (min-width:860px){
  .app-main{grid-template-columns:minmax(300px,.8fr) minmax(0,1.6fr)}
  .back{display:none}
  .site-nav .nav-wrap, .app-rail{padding-left:var(--sp-8); padding-right:var(--sp-8)}
  .filters,.call,.summary > div{padding-left:var(--sp-8)}
  .call,.filters{padding-right:var(--sp-8)}
}
@media (min-width:1200px){
  .app-main{grid-template-columns:minmax(340px,.72fr) minmax(0,1.7fr)}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* Nothing to override here any more. The playhead is an SVG transform
     driven by rAF, and the player does not autoplay in ANY motion setting —
     it lands parked at 00:00 with the whole transcript legible and waits to
     be asked. A reduced-motion visitor and everyone else get the same page. */
}