/* ═══════════════════════════════════════════════════════════════════════════
   CUTROOM — design tokens. QWEE V3 structure (paper ground, white panels,
   ink at 74% / 62% for secondary and tertiary text, hairlines at 14% / 7%),
   with Cutroom's own accents: terracotta is "mine", slate is "proposed".
   The ground is a neutral paper, not cream — colour belongs to the accent.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:"Space Grotesk QE"; src:url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"DM Sans QE"; src:url("../fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"JetBrains Mono QE"; src:url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype"); font-weight:100 900; font-display:swap; }

:root {
  --bg:#f1f0ec; --surface:#fafaf8; --surface-2:#e6e5e0; --raised:#ffffff;
  --text:#1b1b18; --text-2:#3a3936; --muted:#5d5c57; --faint:#6b6a64;
  --hairline:rgba(27,27,24,.14); --hairline-2:rgba(27,27,24,.07);
  --accent:#c4582f; --accent-hover:#d2643a; --accent-soft:rgba(196,88,47,.10);
  --on-accent:#fff7f2;
  --ghost:#3f6b8a; --ghost-soft:rgba(63,107,138,.10);
  --positive:#557a4a; --warn:#96671a; --danger:#a23a22;
  --shadow-1:0 1px 2px rgba(20,20,18,.05),0 1px 3px rgba(20,20,18,.04);
  --shadow-2:0 2px 4px rgba(20,20,18,.06),0 8px 20px rgba(20,20,18,.08);
  --shadow-3:0 2px 6px rgba(20,20,18,.08),0 18px 46px rgba(20,20,18,.13);
  --track:rgba(27,27,24,.12);
  --scrim:rgba(27,27,24,.44);
  --f-display:"Space Grotesk QE","Space Grotesk",system-ui,sans-serif;
  --f-body:"DM Sans QE","DM Sans",system-ui,sans-serif;
  --f-mono:"JetBrains Mono QE","JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  --topbar:56px; --rail:clamp(440px,38vw,760px); --chips:52px;
}
[data-theme="dark"] {
  --bg:#0d0d0c; --surface:#151514; --surface-2:#1f1f1d; --raised:#242422;
  --text:#e9e7e2; --text-2:#c7c5be; --muted:#a3a199; --faint:#8b8981;
  --hairline:rgba(233,231,226,.13); --hairline-2:rgba(233,231,226,.06);
  --accent:#e0724a; --accent-hover:#ef8259; --accent-soft:rgba(224,114,74,.14);
  --on-accent:#1a110b;
  --ghost:#6fa3c7; --ghost-soft:rgba(111,163,199,.14);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 18px rgba(0,0,0,.45);
  --shadow-3:0 18px 46px rgba(0,0,0,.55); --track:rgba(233,231,226,.14);
  --scrim:rgba(0,0,0,.55);
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  font-family:var(--f-body); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; border:none; background:none; cursor:pointer; }
input { font:inherit; color:inherit; }
::selection { background:var(--accent-soft); }

.mono { font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; }
.tnum { font-variant-numeric:tabular-nums; }

/* ── shell ────────────────────────────────────────────────────────────────── */
.shell { display:grid; grid-template-rows:var(--topbar) 1fr; height:100vh; height:100dvh; }

.topbar {
  display:flex; align-items:center; gap:14px; padding:0 18px;
  border-bottom:1px solid var(--hairline); background:var(--surface);
}
.brand { display:flex; align-items:baseline; gap:9px; }
.brand-mark {
  font-family:var(--f-display); font-weight:700; font-size:16px;
  letter-spacing:-.02em; color:var(--text);
}
.brand-mark em { font-style:normal; color:var(--accent); }
.brand-sub {
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.src-chip {
  display:flex; align-items:center; gap:8px; padding:5px 11px;
  background:var(--bg); border:1px solid var(--hairline); border-radius:100px;
  font-size:12px; color:var(--text-2); max-width:44vw;
}
.src-chip b { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.src-chip .mono { color:var(--faint); }
.spacer { flex:1; }

.tbtn {
  display:flex; align-items:center; gap:6px; padding:6px 11px; border-radius:var(--r-sm);
  font-size:12.5px; color:var(--text-2); border:1px solid transparent;
}
.tbtn:hover { background:var(--bg); border-color:var(--hairline); color:var(--text); }
.tbtn.on { background:var(--accent-soft); border-color:transparent; color:var(--accent); }

.agent-dot {
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border-radius:100px; background:var(--bg); border:1px solid var(--hairline);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint);
}
.agent-dot i {
  width:6px; height:6px; border-radius:50%; background:var(--faint);
  transition:background .3s;
}
.agent-dot.live { color:var(--positive); border-color:rgba(85,122,74,.35); }
.agent-dot.live i { background:var(--positive); box-shadow:0 0 0 3px rgba(85,122,74,.18); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ── main grid ────────────────────────────────────────────────────────────── */
.main { display:grid; grid-template-columns:minmax(0,1fr) var(--rail); min-height:0; }
.left  { display:grid; grid-template-rows:minmax(0,1fr) auto var(--chips); min-height:0; min-width:0; border-right:1px solid var(--hairline); }
.right { display:grid; grid-template-rows:1fr auto; min-height:0; min-width:0; background:var(--surface); }

/* ── stage (audiogram) ────────────────────────────────────────────────────── */
.stage {
  position:relative; display:flex; flex-direction:column; align-items:center;
  min-width:0; padding:20px 26px 4px; overflow:hidden;
}
/* The preview is the shape of the thing you're making — a 4:5 social frame,
   not a wide box. Seeing the real aspect while you cut is the point. */
.stage-frame { flex:1; min-height:0; max-height:392px; display:flex; width:100%; }
.stage-card {
  position:relative; height:100%; width:100%; flex:1; min-width:0;
  border-radius:var(--r-lg);
  background:linear-gradient(158deg,var(--raised),var(--surface));
  border:1px solid var(--hairline); box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px 40px 58px; overflow:hidden;
}
/* subtle paper grain so the flat card doesn't read as a placeholder */
.stage-card::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.20;
  background-image:radial-gradient(circle at 1px 1px,rgba(27,27,24,.16) 1px,transparent 0);
  background-size:4px 4px; mix-blend-mode:multiply;
}
[data-theme="dark"] .stage-card::after { mix-blend-mode:screen; opacity:.14; }

.stage-label {
  position:absolute; top:14px; left:16px; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint); z-index:2;
}
.stage-clipno {
  position:absolute; top:14px; right:16px; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); z-index:2; opacity:0;
  transition:opacity .2s;
}
.stage-clipno.on { opacity:1; }

.caption {
  position:relative; z-index:1; text-align:center; max-width:26ch;
  font-family:var(--f-display); font-weight:600; letter-spacing:-.022em;
  font-size:clamp(20px,2.5vh,34px); line-height:1.22; color:var(--text);
  text-wrap:balance;
}
.caption .w { opacity:.26; transition:opacity .14s ease, color .14s ease; }
.caption .w.said { opacity:1; }
.caption .w.now  { opacity:1; color:var(--accent); }
.caption.idle {
  font-family:var(--f-body); font-weight:400; font-size:15px;
  color:var(--muted); max-width:34ch; letter-spacing:0;
}

/* waveform */
.wave { position:absolute; left:0; right:0; bottom:0; height:34px; display:flex;
        align-items:flex-end; gap:1px; padding:0; z-index:1; }
.wave i {
  flex:1; min-height:1.5px; border-radius:1px 1px 0 0; will-change:height;
  /* only the few bars either side of "now" take the accent */
  background:color-mix(in oklab, var(--accent) calc(var(--heat) * 100%), var(--text));
  opacity:var(--fade);
}
.wave i.hot { background:var(--accent); }

/* ── transport ────────────────────────────────────────────────────────────── */
.transport { display:flex; align-items:center; gap:14px; width:100%; padding-top:18px; }
.play-btn {
  width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; box-shadow:var(--shadow-1); flex:none;
  transition:transform .14s, background .14s;
}
.play-btn:hover { background:var(--accent-hover); transform:scale(1.05); }
.play-btn:active { transform:scale(.97); }
.play-btn svg { width:17px; height:17px; }
.t-time { font-family:var(--f-mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em; flex:none; }
.t-time b { color:var(--text); font-weight:500; }

.scrub { position:relative; flex:1; height:26px; display:flex; align-items:center; cursor:pointer; }
.scrub-track { position:relative; width:100%; height:4px; border-radius:2px; background:var(--track); overflow:hidden; }
.scrub-fill { position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:2px; width:0; }
.scrub-head {
  position:absolute; top:50%; width:11px; height:11px; border-radius:50%; background:var(--accent);
  border:2px solid var(--raised); transform:translate(-50%,-50%); left:0; box-shadow:var(--shadow-1);
}

/* ── provenance bar ───────────────────────────────────────────────────────── */
.prov { width:100%; padding:16px 0 2px; }
.prov-head {
  display:flex; align-items:baseline; gap:8px; margin-bottom:7px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.prov-head b { color:var(--text-2); font-weight:500; letter-spacing:.08em; }
.prov-bar {
  position:relative; height:26px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--hairline-2); overflow:hidden; cursor:pointer;
}
.prov-mk { position:absolute; top:0; bottom:0; background:var(--accent); opacity:.85; min-width:2px; border-radius:1px; }
.prov-mk.ghost { background:var(--ghost); opacity:.7; }
.prov-play { position:absolute; top:0; bottom:0; width:1.5px; background:var(--text); opacity:.5; }
.prov-scale { display:flex; justify-content:space-between; margin-top:5px;
              font-family:var(--f-mono); font-size:9.5px; color:var(--faint); }

/* ── reel ─────────────────────────────────────────────────────────────────── */
.reel { display:flex; flex-direction:column; min-width:0;
        border-top:1px solid var(--hairline); background:var(--surface); }
.reel-head { display:flex; align-items:center; gap:11px; padding:11px 26px 9px; }
.cut-play {
  display:flex; align-items:center; gap:8px; padding:7px 15px 7px 12px; border-radius:100px;
  background:var(--accent); color:var(--on-accent); font-size:13px; font-weight:600;
  box-shadow:var(--shadow-1); transition:background .14s, transform .12s, opacity .14s;
}
.cut-play:hover:not(:disabled) { background:var(--accent-hover); transform:translateY(-1px); }
.cut-play:disabled { background:var(--surface-2); color:var(--faint); box-shadow:none; cursor:default; }
.cut-play svg { width:14px; height:14px; }
.reel-title { font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
              text-transform:uppercase; color:var(--muted); }
.budget { display:flex; align-items:center; gap:9px; }
.budget-num { font-family:var(--f-mono); font-size:11.5px; color:var(--text-2); }
.budget-num b { color:var(--text); font-weight:600; }
.budget-num.over b { color:var(--danger); }
.budget-bar { width:132px; height:5px; border-radius:3px; background:var(--track); overflow:hidden; }
.budget-fill { height:100%; background:var(--positive); border-radius:3px; transition:width .28s ease, background .28s; }
.budget-fill.near { background:var(--warn); }
.budget-fill.over { background:var(--danger); }

.strip { height:224px; flex:none; min-width:0; display:flex; align-items:stretch; gap:9px;
         padding:0 26px 18px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.strip::-webkit-scrollbar { height:7px; }
.strip::-webkit-scrollbar-thumb { background:var(--track); border-radius:4px; }

.clip {
  position:relative; flex:0 0 200px; display:flex; flex-direction:column; gap:5px;
  padding:10px 11px 9px; border-radius:var(--r); background:var(--raised);
  border:1px solid var(--hairline); box-shadow:var(--shadow-1);
  cursor:grab; transition:transform .14s, box-shadow .14s, border-color .14s, opacity .18s;
}
.clip:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.clip.playing { box-shadow:var(--shadow-2); background:var(--accent-soft); }
.clip.playing::after {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:0 3px 3px 0;
}
.clip.ghost.playing { background:var(--accent-soft); }
.clip.muted { opacity:.42; }
.clip.muted .clip-text { text-decoration:line-through; text-decoration-color:var(--faint); }
.clip.ghost { border-style:dashed; border-color:var(--ghost); background:var(--ghost-soft); }
.clip.dragging { opacity:.4; cursor:grabbing; }
.clip.drop-before::before {
  content:""; position:absolute; left:-6px; top:4px; bottom:4px; width:2.5px;
  background:var(--accent); border-radius:2px;
}
.clip-top { display:flex; align-items:center; gap:6px; }
.clip-n { font-family:var(--f-mono); font-size:9.5px; color:var(--faint); letter-spacing:.08em; }
.clip.ghost .clip-n { color:var(--ghost); }
.clip-dur { font-family:var(--f-mono); font-size:9.5px; color:var(--muted); margin-left:auto; }
.clip-text {
  font-size:12.5px; line-height:1.38; color:var(--text-2); flex:1; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; min-height:2.8em;
}
.clip-why {
  font-size:10.5px; line-height:1.32; color:var(--ghost); font-style:italic;
  border-top:1px solid var(--ghost-soft); padding-top:5px; flex:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.clip-acts { display:flex; align-items:center; gap:3px; margin-top:1px; }
.cbtn {
  width:23px; height:23px; border-radius:5px; display:grid; place-items:center;
  color:var(--faint); transition:background .12s, color .12s;
}
.cbtn:hover { background:var(--surface-2); color:var(--text); }
.cbtn.keep:hover { background:rgba(85,122,74,.16); color:var(--positive); }
.cbtn.drop:hover { background:rgba(162,58,34,.14); color:var(--danger); }
.cbtn.up.on { background:rgba(85,122,74,.16); color:var(--positive); }
.cbtn.down.on { background:rgba(162,58,34,.14); color:var(--danger); }
.clip.voted-down { opacity:.62; }
.clip-vote {
  position:absolute; top:-6px; right:-6px; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center; font-size:9px; color:var(--on-accent); box-shadow:var(--shadow-1);
}
.clip-vote.up { background:var(--positive); }
.clip-vote.down { background:var(--danger); }
.cbtn svg { width:13px; height:13px; }

.strip-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; width:100%; color:var(--faint); text-align:center;
}
.strip-empty b { font-size:13px; color:var(--muted); font-weight:500; }
.strip-empty span { font-size:12px; max-width:38ch; }

/* ── taste chips ──────────────────────────────────────────────────────────── */
.chips { display:flex; align-items:center; gap:7px; padding:0 26px;
         border-top:1px solid var(--hairline); background:var(--bg); overflow-x:auto; }
.chips-label { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
               text-transform:uppercase; color:var(--faint); flex:none; margin-right:3px; }
.chip {
  flex:none; padding:6px 13px; border-radius:100px; font-size:12.5px; color:var(--text-2);
  background:var(--surface); border:1px solid var(--hairline); white-space:nowrap;
  transition:background .14s, color .14s, border-color .14s, transform .12s;
}
.chip:hover { background:var(--accent-soft); border-color:transparent; color:var(--accent); transform:translateY(-1px); }
.chip:disabled { opacity:.4; cursor:default; transform:none; background:var(--surface); color:var(--text-2); }

/* ── right rail ───────────────────────────────────────────────────────────── */
/* min-width:0 is load-bearing. Without it a flex child takes its min-content
   width — here the five tabs plus the search field — and the rail grew 52px
   past the column it lives in, pushing the whole page sideways at 900px. */
.rail { display:flex; flex-direction:column; min-height:0; min-width:0; }
.rail-tabs { display:flex; gap:2px; padding:10px 14px 0; border-bottom:1px solid var(--hairline);
             overflow-x:auto; scrollbar-width:none; }
.rail-tabs::-webkit-scrollbar { display:none; }
.rtab {
  flex:none; white-space:nowrap;
  padding:7px 13px 9px; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.rtab:hover { color:var(--text-2); }
.rtab.on { color:var(--accent); border-bottom-color:var(--accent); }
.rtab .count { opacity:.6; margin-left:4px; }

.search { padding:11px 14px; border-bottom:1px solid var(--hairline-2); }
.search-in {
  width:100%; padding:8px 12px; border-radius:var(--r-sm); background:var(--bg);
  border:1px solid var(--hairline); font-size:13px; outline:none; transition:border-color .14s;
}
.search-in:focus { border-color:var(--accent); }
.search-in::placeholder { color:var(--faint); }

.list { flex:1; min-height:0; overflow-y:auto; padding:5px 10px 20px; scrollbar-width:thin; }
.list::-webkit-scrollbar { width:8px; }
.list::-webkit-scrollbar-thumb { background:var(--track); border-radius:4px; }

.seg {
  position:relative; display:flex; gap:9px; padding:8px 9px; border-radius:var(--r-sm);
  transition:background .12s; cursor:default;
}
.seg { cursor:pointer; }
.seg:hover { background:var(--bg); }
.seg.speaking { background:var(--accent-soft); }
.seg.speaking .seg-text { color:var(--text); }
.seg.speaking .seg-ts { color:var(--accent); }
/* a quiet marker so the played line reads even against the warm ground */
.seg.speaking::before {
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:var(--accent); border-radius:2px;
}
.seg.used { opacity:.44; }
/* --faint measured 3.04:1 here, which is under AA for text this size, and a
   timestamp is the one thing in the rail you read rather than skim. */
.seg-ts { font-family:var(--f-mono); font-size:10px; color:var(--muted); flex:none;
          padding-top:2px; width:38px; cursor:pointer; }
.seg-ts:hover { color:var(--accent); }
.seg-body { flex:1; min-width:0; }
.seg-text { font-size:13.5px; line-height:1.5; color:var(--text-2); }
.seg-text mark { background:var(--accent-soft); color:var(--accent); border-radius:2px; padding:0 1px; }
.seg-acts { display:flex; gap:2px; flex:none; opacity:0; transition:opacity .12s; }
.seg:hover .seg-acts, .seg.starred .seg-acts { opacity:1; }
.seg.starred .cbtn.star { color:var(--accent); }

.empty { padding:34px 20px; text-align:center; color:var(--faint); font-size:12.5px; }

/* ── candidates ───────────────────────────────────────────────────────────── */
.cands { padding:10px 12px; display:flex; flex-direction:column; gap:9px; }
.cand {
  padding:12px 13px; border-radius:var(--r); background:var(--bg);
  border:1px solid var(--hairline); cursor:pointer; transition:border-color .14s, box-shadow .14s, transform .12s;
}
.cand:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-1); }
.cand.on { border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent); }
.cand-top { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.cand-key {
  width:17px; height:17px; border-radius:4px; background:var(--surface-2); color:var(--muted);
  font-family:var(--f-mono); font-size:9.5px; display:grid; place-items:center; flex:none;
}
.cand.on .cand-key { background:var(--accent); color:var(--on-accent); }
.cand-title { font-family:var(--f-display); font-weight:600; font-size:13.5px; letter-spacing:-.01em; }
.cand-meta { font-family:var(--f-mono); font-size:9.5px; color:var(--faint); margin-left:auto; }
.cand-desc { font-size:12px; color:var(--muted); line-height:1.4; }

/* ── agent log ────────────────────────────────────────────────────────────── */
.log { border-top:1px solid var(--hairline); background:var(--bg); max-height:172px;
       display:flex; flex-direction:column; }
.log-head { display:flex; align-items:center; gap:7px; padding:9px 14px 6px;
            font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
            text-transform:uppercase; color:var(--faint); }
.log-body { overflow-y:auto; padding:0 14px 11px; scrollbar-width:thin; }
.log-row { display:flex; gap:8px; padding:4px 0; font-size:11.5px; line-height:1.4;
           border-bottom:1px solid var(--hairline-2); }
.log-row:last-child { border-bottom:none; }
.log-tool { font-family:var(--f-mono); font-size:10px; color:var(--accent); flex:none; }
.log-arg { color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-empty { font-size:11.5px; color:var(--faint); padding:2px 0 6px; line-height:1.45; }

/* ── toast ────────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--text); color:var(--bg); padding:9px 17px; border-radius:100px;
  font-size:13px; font-weight:500; box-shadow:var(--shadow-3); z-index:80;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.on { opacity:1; transform:translate(-50%,0); }

@media (max-width:1100px) {
  :root { --rail:min(380px,40vw); }
  .clip { flex-basis:172px; }
}

/* drop target */
body.dropping::after {
  content:"Drop media + transcript (SRT · VTT · JSON)";
  position:fixed; inset:14px; z-index:99; border-radius:var(--r-lg);
  border:2px dashed var(--accent); background:rgba(196,88,47,.07);
  display:grid; place-items:center; font-family:var(--f-mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); pointer-events:none;
}

.play-btn svg, .cbtn svg { pointer-events:none; }

/* ── narrative role badges ─────────────────────────────────────────────────── */
.role {
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 6px; border-radius:100px; background:var(--surface-2); color:var(--muted);
}
.role-hook   { background:rgba(196,88,47,.16);  color:var(--accent); }
.role-turn   { background:rgba(179,113,31,.18); color:var(--warn); }
.role-payoff { background:rgba(85,122,74,.18);  color:var(--positive); }
.role-setup, .role-button { background:var(--surface-2); color:var(--muted); }

/* ── energy tab ────────────────────────────────────────────────────────────── */
.energy-lede {
  padding:11px 10px 13px; font-size:12px; line-height:1.5; color:var(--muted);
  border-bottom:1px solid var(--hairline-2); margin-bottom:4px;
}
.lift { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.lift-bar { height:3px; border-radius:2px; background:var(--accent); min-width:6px; }
.lift-n { font-size:9.5px; color:var(--faint); flex:none; }

/* ── editor's notes ────────────────────────────────────────────────────────── */
.issue {
  padding:10px 11px; margin:0 2px 7px; border-radius:var(--r-sm);
  background:var(--bg); border:1px solid var(--hairline); border-left-width:3px; cursor:pointer;
  transition:border-color .14s, transform .12s;
}
.issue:hover { transform:translateX(1px); border-color:var(--accent); }
.issue.sev-high   { border-left-color:var(--danger); }
.issue.sev-medium { border-left-color:var(--warn); }
.issue.sev-low    { border-left-color:var(--faint); }
.issue-top { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.issue-kind {
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-2);
}
.issue-sev {
  margin-left:auto; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.issue-detail { font-size:12.5px; line-height:1.45; color:var(--text-2); }
.issue-fix { font-size:11.5px; line-height:1.4; color:var(--muted); font-style:italic; margin-top:5px; }

.tbtn.render { border-color:var(--accent); color:var(--accent); }
.tbtn.render:hover:not(:disabled) { background:var(--accent-soft); border-color:var(--accent); }
.tbtn.render:disabled { opacity:.4; border-color:transparent; color:var(--faint); cursor:default; }

/* ── word-level selection ──────────────────────────────────────────────────── */
.seg-text .w { border-radius:2px; }
.seg-text::selection, .seg-text .w::selection { background:var(--accent-soft); }
.wordsel {
  position:fixed; z-index:90; display:flex; align-items:center; gap:4px;
  padding:5px 6px 5px 10px; border-radius:100px; background:var(--text); color:var(--bg);
  box-shadow:var(--shadow-3); font-size:12.5px; white-space:nowrap;
}
.wordsel .mono { color:rgba(255,255,255,.55); margin-right:3px; }
.wordsel button {
  padding:4px 11px; border-radius:100px; font-size:12.5px; font-weight:500;
  color:var(--bg); background:rgba(255,255,255,.13); transition:background .13s;
}
.wordsel button:hover { background:var(--accent); color:var(--on-accent); }

.clip-omit {
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em;
  color:var(--faint); display:flex; align-items:center; gap:6px;
}
.clip-omit button { color:var(--accent); text-decoration:underline; font:inherit; }


/* ══ first-run: the welcome ═══════════════════════════════════════════════ */
.tour-scrim {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px;
  background:var(--scrim);
}
.tour-card {
  width:min(600px,100%); background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-xl); box-shadow:var(--shadow-3); padding:34px 36px 26px;
}
.tour-brand { display:flex; align-items:baseline; gap:11px; margin-bottom:22px; }
.chipish {
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; color:var(--faint);
  border:1px solid var(--hairline); padding:3px 9px; border-radius:100px;
}
.tour-card h2 {
  font-family:var(--f-display); font-weight:600; font-size:26px; line-height:1.26;
  letter-spacing:-.022em; margin:0 0 14px; text-wrap:balance;
}
.tour-card p { margin:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--muted); }
.tour-status {
  font-size:14px; line-height:1.55; color:var(--text-2); padding:14px 16px;
  border-radius:var(--r); background:var(--bg); border:1px solid var(--hairline);
  border-left:3px solid var(--faint);
}
.tour-status.good { border-left-color:var(--positive); }
.tour-status code {
  font-family:var(--f-mono); font-size:12.5px; background:var(--surface-2);
  padding:2px 6px; border-radius:4px;
}
.tour-actions { display:flex; align-items:center; gap:11px; margin-top:22px; }
.tour-go {
  flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:13px 20px; border-radius:var(--r); background:var(--accent); color:var(--on-accent);
  font-size:16px; font-weight:600; box-shadow:var(--shadow-1);
  transition:background .15s, transform .13s;
}
.tour-go:hover { background:var(--accent-hover); transform:translateY(-1px); }
.tour-sub { font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; opacity:.75; font-weight:400; }
.tour-skip { padding:13px 18px; border-radius:var(--r); font-size:15px; color:var(--muted); }
.tour-skip:hover { background:var(--bg); color:var(--text); }
.tour-copy {
  width:100%; margin-top:13px; padding:10px; border-radius:var(--r-sm); font-size:13.5px;
  color:var(--muted); border:1px dashed var(--hairline); transition:border-color .14s, color .14s;
}
.tour-copy:hover { border-color:var(--accent); color:var(--accent); }

/* ══ the player ═══════════════════════════════════════════════════════════ */
.tour-spot {
  position:fixed; z-index:93; pointer-events:none; border-radius:var(--r-lg);
  box-shadow:0 0 0 2px var(--accent), 0 0 0 9999px var(--scrim);
  transition:left .5s cubic-bezier(.3,.9,.3,1), top .5s cubic-bezier(.3,.9,.3,1),
             width .5s cubic-bezier(.3,.9,.3,1), height .5s cubic-bezier(.3,.9,.3,1), opacity .2s;
}
.tour-spot.dim { opacity:.25; }

.tour-dock {
  position:fixed; z-index:96; width:340px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  opacity:0; overflow:hidden;
  /* GSAP animates transform/opacity; CSS moves it. Keeping these on separate
     properties stops the two from overwriting each other. */
  transition:left .45s cubic-bezier(.3,.9,.3,1), top .45s cubic-bezier(.3,.9,.3,1);
}
.tour-dock.in { opacity:1; }
.tour-dock.dragging { transition:none; }
.tour-dock.dragging { transition:opacity .2s, transform .2s; cursor:grabbing; box-shadow:var(--shadow-3), 0 0 0 2px var(--accent); }

.td-grip {
  display:flex; align-items:center; gap:8px; padding:11px 12px 10px 14px;
  border-bottom:1px solid var(--hairline-2); cursor:grab; user-select:none; background:var(--bg);
}
.td-grip:active { cursor:grabbing; }
.td-badge {
  font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); padding:3px 8px; border-radius:100px;
}
.td-note { font-size:11.5px; color:var(--faint); }
.td-count { font-family:var(--f-mono); font-size:11px; color:var(--muted); }
.td-x { width:22px; height:22px; border-radius:6px; color:var(--faint); font-size:13px; line-height:1; }
.td-x:hover { background:var(--surface-2); color:var(--text); }

.td-body { display:flex; gap:13px; padding:16px 16px 14px; align-items:flex-start; }
.td-icon {
  flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.td-icon svg { width:19px; height:19px; }
.td-copy { min-width:0; }
.td-copy h3 {
  margin:0 0 4px; font-family:var(--f-display); font-weight:600; font-size:16.5px;
  letter-spacing:-.015em; color:var(--text);
}
.td-copy p { margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--text-2); text-wrap:pretty; }
.td-copy code {
  font-family:var(--f-mono); font-size:11px; color:var(--accent);
  background:var(--accent-soft); padding:3px 8px; border-radius:5px; display:inline-block;
}

.td-timeline { display:flex; gap:3px; padding:0 14px 12px; }
.tl-cell {
  flex:1; height:5px; border-radius:3px; background:var(--track); overflow:hidden; padding:0;
  transition:transform .14s;
}
.tl-cell:hover { transform:scaleY(1.7); }
.tl-cell i { display:block; height:100%; width:0; background:var(--accent); border-radius:3px; }
.tl-cell.past i { width:100% !important; background:var(--faint); }
.tl-cell.on { background:var(--surface-2); }

.td-controls {
  display:flex; align-items:center; gap:6px; padding:10px 12px;
  border-top:1px solid var(--hairline-2); background:var(--bg);
}
.td-b {
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  color:var(--muted); transition:background .13s, color .13s;
}
.td-b:hover { background:var(--surface-2); color:var(--text); }
.td-b svg { width:15px; height:15px; }
.td-b.primary { background:var(--accent); color:var(--on-accent); width:38px; height:32px; }
.td-b.primary:hover { background:var(--accent-hover); }
.td-b.wide { width:auto; gap:6px; padding:0 11px; font-size:12.5px; }
.td-b.wide svg { width:13px; height:13px; }

@media (max-width:720px) {
  .tour-card { padding:26px 22px 20px; }
  .tour-card h2 { font-size:21px; }
  .tour-dock { width:calc(100vw - 24px); }
}
.log-empty .hint { display:block; margin-top:6px; }
.log-empty .diag { display:block; margin:6px 0; font-family:var(--f-mono); font-size:10.5px; color:var(--faint); word-break:break-all; }

/* text-only: no media, so hide what depends on sound rather than fake it */
body.text-only .wave,
body.text-only .scrub,
body.text-only .t-time { display:none; }
body.text-only .play-btn { opacity:.35; cursor:not-allowed; }
body.text-only .cut-play { opacity:.4; cursor:not-allowed; }

/* ══ the demo dock, as an agent session ═══════════════════════════════════ */
.tour-dock { width:400px; }

.td-turn { padding:14px 16px 12px; max-height:min(52vh, 420px); overflow-y:auto; scrollbar-width:thin; }
.td-who {
  display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin-bottom:4px;
}
.td-you p {
  margin:0 0 13px; font-size:14px; line-height:1.5; color:var(--text);
  padding:9px 12px; background:var(--bg); border-radius:var(--r) var(--r) var(--r) 4px;
  min-height:1.5em;
}
.td-work {
  display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font-size:12.5px; color:var(--muted);
}
.td-spin {
  width:11px; height:11px; border-radius:50%; flex:none;
  border:2px solid var(--accent-soft); border-top-color:var(--accent);
  animation:tdspin .7s linear infinite;
}
.td-spin.still { border-color:var(--positive); animation:none; }
@keyframes tdspin { to { transform:rotate(360deg); } }

.td-calls { list-style:none; margin:0; padding:0; }
.td-calls li {
  display:grid; grid-template-columns:14px 1fr; gap:4px 7px; align-items:baseline;
  padding:4px 0; border-bottom:1px solid var(--hairline-2);
}
.td-calls li:last-child { border-bottom:none; }
.c-tick { font-size:10px; color:var(--positive); line-height:1.6; }
.td-calls code {
  font-family:var(--f-mono); font-size:11.5px; color:var(--accent); word-break:break-word;
}
.td-calls code em { font-style:normal; color:var(--faint); margin-left:5px; }
.td-calls .c-got { grid-column:2; font-size:11.5px; line-height:1.45; color:var(--muted); }
/* the call that just happened leads; earlier ones recede into a log */
.td-calls li.newest {
  background:var(--bg); border-radius:var(--r-sm); border-bottom-color:transparent;
  padding:7px 9px; margin:0 -9px 3px;
}
.td-calls li.newest code { font-size:12px; }
.td-calls li.newest .c-got { color:var(--text-2); }
.td-calls li.past:not(.newest) { opacity:.55; }
.td-calls li.past:not(.newest) code { color:var(--muted); }
.td-calls li.now code { color:var(--text); }

.td-said {
  margin-bottom:12px; padding:11px 12px; background:var(--accent-soft);
  border-radius:var(--r); border-left:3px solid var(--accent);
}
.td-said p { margin:0; font-size:13.5px; line-height:1.55; color:var(--text-2); }

@media (max-width:720px) { .tour-dock { width:calc(100vw - 24px); } }

/* ── keyboard focus ────────────────────────────────────────────────────────── */
/* There was no visible focus anywhere: tabbing through the app left you with
   no idea where you were. :focus-visible only shows for keyboard users, so
   mouse clicks stay clean. */
:focus { outline:none; }
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
.seg:focus-visible, .clip:focus-visible { outline-offset:-2px; }
.play-btn:focus-visible, .cut-play:focus-visible { outline-offset:3px; }
.tl-cell:focus-visible { outline-offset:3px; }

/* ── shortcuts ─────────────────────────────────────────────────────────────── */
.keys {
  position:fixed; inset:0; z-index:99; display:grid; place-items:center;
  background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .2s;
}
.keys.on { opacity:1; pointer-events:auto; }
.keys-card {
  width:min(420px,92vw); background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:22px 24px;
}
.keys-card h3 {
  margin:0 0 14px; font-family:var(--f-display); font-size:16px; font-weight:600;
  letter-spacing:-.01em;
}
.keys-row { display:flex; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid var(--hairline-2); }
.keys-row:last-of-type { border-bottom:none; }
.keys-row kbd {
  font-family:var(--f-mono); font-size:11px; min-width:52px; text-align:center;
  padding:3px 7px; border-radius:5px; background:var(--bg);
  border:1px solid var(--hairline); color:var(--text); flex:none;
}
.keys-row span { font-size:13.5px; color:var(--text-2); }
.keys-hint { margin-top:14px; font-size:12px; color:var(--faint); text-align:center; }

/* Words an omission took out. Still legible, clearly gone — an editor checks
   what a cleanup pass removed, they don't take its word for it. */
.clip-text s {
  text-decoration:line-through; text-decoration-thickness:1px;
  color:var(--faint); opacity:.72;
}
/* CSS rather than GSAP so prefers-reduced-motion switches it off for free. */
@keyframes struck-in {
  from { background:var(--accent-soft); color:var(--text); opacity:1;
         text-decoration-color:transparent; }
}
.clip-text s.just { animation:struck-in .6s ease-out; border-radius:3px; }

/* ── narrow screens ───────────────────────────────────────────────────────── */
/* This is an editing surface and it wants a desktop, but a link gets opened on
   a phone whether or not that was the plan. Below 860px the two columns stack
   and the page scrolls, instead of putting the transcript somewhere off to the
   right of the screen where nobody will ever find it. */
@media (max-width:860px) {
  body { overflow:auto; }
  .shell { grid-template-rows:auto 1fr; height:auto; min-height:100dvh; }

  .topbar {
    flex-wrap:wrap; gap:8px 10px; padding:9px 12px;
    position:sticky; top:0; z-index:40;
  }
  .brand { flex:0 0 auto; }
  .src-chip { order:5; flex:1 1 100%; max-width:100%; }
  .spacer { display:none; }
  .agent-dot { margin-left:auto; }

  .main { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
  .left { border-right:none; border-bottom:1px solid var(--hairline);
          grid-template-rows:auto auto auto; }
  .right { grid-template-rows:auto auto; }

  /* Each region gets its own scroll rather than one very tall page. */
  .list { max-height:min(58vh, 520px); }
  .log-body { max-height:180px; }

  /* The steer chips run off the edge; let them slide instead of wrap. */
  .chips { overflow-x:auto; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }

  .reel-head { flex-wrap:wrap; row-gap:8px; }
  .budget { flex:1 1 140px; }
  .clip { flex-basis:200px; }

  /* Two panels of controls above the thing you came to read is too much. */
  .prov { display:none; }

  /* On a phone the transcript is what you came for; everything above it is
     scroll you have to get past. The stage and the reel keep their proportions
     but stop reserving desktop-sized room they aren't using. */
  .stage { padding:14px 14px 2px; }
  .stage-frame { max-height:min(38vh, 280px); }
  .reel-head { padding:9px 14px 7px; column-gap:8px; }
  .strip { height:auto; min-height:120px; padding:0 14px 12px; }
  .strip-empty { padding:14px 0 18px; }
  .chips { padding:0 14px; }
  .rail-tabs, .search, .log-head { padding-left:14px; padding-right:14px; }
}

@media (max-width:520px) {
  .stage { padding:10px; }
  .brand-sub { display:none; }
  .tour-hero { margin-top:16px; }
  .th-bar { height:38px; }
  .th-legend { flex-wrap:wrap; row-gap:4px; }
  .th-scale { flex:1 1 100%; }
}

/* ── the hour, drawn ──────────────────────────────────────────────────────── */
/* 547 hairlines and five blocks. It is the product's one-sentence argument in
   a form you can take in before you've read a word of it. */
.tour-hero { margin:20px 0 4px; }
.th-bar {
  position:relative; height:46px; border-radius:var(--r-sm);
  background:var(--surface-2); overflow:hidden;
}
.th-ticks { position:absolute; inset:0; }
.th-ticks i {
  position:absolute; top:14px; bottom:14px; width:1px;
  background:var(--text); opacity:.14;
}
/* The clips have to win against 547 competitors, so they're taller, wider than
   their true duration, and haloed in the track colour to cut a gap around them. */
.th-bar b {
  position:absolute; top:5px; bottom:5px; min-width:5px; border-radius:2.5px;
  background:var(--accent); box-shadow:0 0 0 2px var(--surface-2);
}
.th-legend {
  display:flex; align-items:center; gap:9px; margin-top:9px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted);
}
.th-legend em { font-style:normal; font-weight:600; color:var(--text); }
.th-to { color:var(--accent); }
.th-scale { text-transform:none; letter-spacing:0; color:var(--faint); }

/* ── presenter mode ───────────────────────────────────────────────────────── */
/* A teleprompter, not a caption. It only appears when you're recording, so it
   can take the space it needs to be read from a metre away. */
.td-say { display:none; }
.tour-dock.presenting { width:440px; }
.tour-dock.presenting .td-say {
  display:block; padding:14px 16px 15px; border-bottom:1px solid var(--hairline);
  background:linear-gradient(var(--accent-soft), transparent);
}
.td-say .td-cue {
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin-bottom:7px;
}
.td-say p {
  margin:0; font-family:var(--f-display); font-size:17px; line-height:1.38;
  color:var(--text); text-wrap:pretty;
}
.td-say .td-adv {
  display:block; margin-top:9px; font-family:var(--f-mono); font-size:10.5px;
  color:var(--muted);
}
/* Presenter mode holds every step, so a progress bar would be a lie. */
.tour-dock.presenting .tl-cell i { transition:none; }
.tour-dock.presenting .td-turn { max-height:min(34vh, 260px); }

.td-clock {
  font-family:var(--f-mono); font-size:11px; color:var(--muted);
  padding:2px 6px; border-radius:5px; background:var(--surface-2);
}
.td-clock.warn { color:var(--warn); }
.td-clock.over { color:var(--on-accent); background:var(--danger); }
.td-x.on { color:var(--accent); background:var(--accent-soft); }

/* ── reduced motion ───────────────────────────────────────────────────────── */
/* Everything here is decoration on top of state that is already correct — the
   demo dock still moves between steps, it just arrives instead of travelling.
   GSAP is told separately, in tour.js, or it would keep animating regardless. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}