/* ============================================================
   Voice Lab Console — Vernal UI Kit
   Grounded in "AI Voice Inteligance UI Kit.fig".
   Semantic colour comes from fig-tokens.css (464 Figma Variables,
   Light + Dark modes). Geometry below is transcribed from the kit:
     sidebar 272 · logo card 76 · top bar 76 (pad 19/20)
     submenu 252 · card r12 · feature card r16 · control r8
     nav item 36 (pad 8, gap 8, icon 20) · input 40 · table row 44
     button Small 32 / Medium 36 / Large 40
   Type: Open Sans 400/500/600/700 — 12/16, 14/18, 16/20, 18/24 (-0.02em)
   ============================================================ */
@import './fig-tokens.css';
@import './fig-typography.css';

*{margin:0;padding:0;box-sizing:border-box}
:root,:root[data-theme="light"]{
  --bg:var(--gray-100);--bg-2:var(--general-white);--surface:var(--general-white);
  --surface-2:var(--gray-100);--surface-3:var(--gray-200);
  --ink:var(--gray-950);--ink-soft:var(--gray-700);--muted:var(--gray-600);--faint:var(--gray-500);
  --line:var(--gray-200);--line-2:var(--gray-100);
  --accent:var(--primary-600);--accent-2:var(--primary-700);--accent-ink:var(--general-white);
  --accent-soft:var(--primary-50);--accent-line:var(--primary-200);
  --ok:var(--primary-600);--warn:rgb(194,65,12);--warn-soft:rgb(253,186,116);--bad:rgb(220,38,38);
  --wave:var(--primary-600);--wave-dim:var(--gray-300);
  --sh-1:0px 5px 10px -2px rgba(13,13,18,.04),0px 4px 8px -1px rgba(13,13,18,.02);
  --sh-2:0px 5px 10px -2px rgba(82,88,102,.06),0px 4px 8px -1px rgba(82,88,102,.04);
  --sh-3:0px 12px 28px -4px rgba(82,88,102,.12),0px 6px 12px -2px rgba(82,88,102,.06);
  --sh-4:0px 28px 64px -8px rgba(13,13,18,.18);
  --r-lg:16px;--r-md:12px;--r-sm:8px;
  --font:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --alt:"Host Grotesk","Open Sans",sans-serif;
  --display:"Inter Tight","Open Sans",sans-serif;
  --mono:"Host Grotesk","Open Sans",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="dark"]{
  /* neutral near-black, no blue cast */
  --bg:#0a0a0a;--bg-2:#151515;
  --surface:#141414;--surface-2:#1c1c1c;
  --surface-3:#242424;
  --ink:#f2f2f2;--ink-soft:#b4b4b4;--muted:#8a8a8a;--faint:#6a6a6a;
  --line:#1e1e1e;--line-2:#181818;
  --accent:var(--primary-500);--accent-2:var(--primary-400);--accent-ink:rgb(4,20,10);
  --accent-soft:rgba(27,171,68,.16);--accent-line:rgba(27,171,68,.32);
  --ok:var(--primary-500);--warn:rgb(253,186,116);--warn-soft:rgb(194,65,12);--bad:rgb(248,113,113);
  --wave:var(--primary-500);--wave-dim:rgba(255,255,255,.16);
  --sh-1:none;--sh-2:0 1px 2px rgba(0,0,0,.45);--sh-3:0 12px 28px rgba(0,0,0,.5);--sh-4:0 28px 64px rgba(0,0,0,.65);
}
html,body,#root{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:18px;overflow:hidden;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-2)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;height:40px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{padding:10px 12px;height:auto}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
::selection{background:var(--accent-soft)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
kbd{font-family:var(--font);font-size:11px;font-weight:600;border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--surface-2);color:var(--muted);line-height:1.2}
svg{flex:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ==================== shell ==================== */
.app{display:grid;grid-template-columns:272px minmax(0,1fr);height:100%;gap:4px;padding:12px;background:var(--bg);transition:grid-template-columns .24s var(--ease)}
.app.narrow{grid-template-columns:76px minmax(0,1fr)}
.side{display:flex;flex-direction:column;gap:4px;min-height:0;overflow:hidden}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;gap:4px;overflow:hidden}
.card-s{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}

/* logo card — 76px */
.brand{height:76px;flex:none;display:flex;align-items:center;gap:10px;padding:0 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.brand .bw{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand b{font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
/* logo — kit Logo: 36×36, r8, primary-600 + primary-500 inset, white glyph */
.klogo{border-radius:var(--r-sm);background:var(--primary-600);box-shadow:inset 0px -2.824px 1.882px 0px var(--primary-500);display:grid;place-items:center;flex:none;color:#fff;opacity:.98}
.kavatar{border-radius:50%;object-fit:cover;flex:none;display:block;background:var(--surface-2)}
.vavatar{border-radius:50%;flex:none;display:block}
.mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:flex;align-items:flex-end;justify-content:center;gap:2.5px;padding:9px 0 10px;flex:none}
.mark i{width:2.5px;border-radius:2px;background:#fff}
.mark i:nth-child(1){height:34%}.mark i:nth-child(2){height:64%}.mark i:nth-child(3){height:100%}.mark i:nth-child(4){height:50%}.mark i:nth-child(5){height:78%}
/* collapse control — kit: 32×32, r6, gray-100 with a gray-200 inset ring */
.side-collapse{width:32px;height:32px;flex:none;border-radius:6px;display:grid;place-items:center;color:var(--muted);background:var(--gray-100);box-shadow:inset 0 0 0 1px var(--gray-200);border:none;transition:color .14s,background .14s}
.side-collapse:hover{color:var(--ink);background:var(--surface)}
:root[data-theme="dark"] .side-collapse{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
/* collapsed rail keeps the mark; only the wordmark goes */
.app.narrow .brand{padding:0;justify-content:center}
.app.narrow .brand .bw{flex:none;justify-content:center}
.app.narrow .brand .bw b{display:none}
.app.narrow .side-collapse{display:none}
.app.narrow .brand .bw{cursor:pointer}

/* sidebar body — r12, pad 20, groups gap 16 */
/* Rail = scrolling nav + static foot block. Sticky is wrong here: it doesn't
   reserve space, so the nav would lay out underneath the opaque foot. */
.side-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:20px 20px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden}
.nav-scroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px;margin:0 -4px;padding:0 4px}
.app.narrow .nav-scroll{align-items:center}
.app.narrow .side-body{padding:20px 12px;align-items:center}
.side .ws{display:flex;align-items:center;gap:8px;height:32px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:14px;line-height:18px;color:var(--ink-soft);flex:none}
.side .ws .bl{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#8ad9a4,var(--accent));flex:none}
.side .ws .wtxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.side .ws svg{margin-left:auto;color:var(--muted)}
.app.narrow .side .ws{width:32px;padding:0;justify-content:center}
.app.narrow .side .ws .wtxt,.app.narrow .side .ws svg{display:none}

/* Help / Settings + profile: static siblings after the scroller, so they reserve
   their own space and can never paint over the nav. */
.nav-group{display:flex;flex-direction:column;gap:8px;width:100%;flex:none}
.nav-group.nav-others{flex:0 0 auto;padding-top:8px;border-top:1px solid var(--line)}
.side-sec{font-size:14px;line-height:18px;color:var(--ink-soft);font-weight:400}
.app.narrow .side-sec{width:24px;height:1px;background:var(--line);font-size:0;color:transparent;overflow:hidden}
.nav{display:flex;flex-direction:column;gap:4px;width:100%}
.nav button{display:flex;align-items:center;gap:8px;height:36px;padding:8px;border-radius:var(--r-sm);font-size:14px;line-height:18px;font-weight:500;color:var(--ink-soft);text-align:left;width:100%;transition:background .14s,color .14s}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button svg{color:var(--muted);width:20px;height:20px}
.nav button .nlbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button.on{background:var(--accent-soft);color:var(--ink);font-weight:600}
.nav button.on svg{color:var(--accent)}
.nav .count{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:1px 7px;min-width:22px;text-align:center;flex:none}
.nav button.on .count{color:var(--accent-2);background:var(--general-white);border-color:var(--accent-line)}
:root[data-theme="dark"] .nav button.on .count{background:var(--surface-2);color:var(--accent)}
.app.narrow .nav button{width:36px;justify-content:center}
.app.narrow .nav button .nlbl,.app.narrow .nav .count{display:none}
.runline{display:flex;align-items:center;gap:8px;height:36px;padding:8px;border-radius:var(--r-sm);font-size:13px;color:var(--ink-soft);width:100%;text-align:left;transition:background .14s}
.runline:hover{background:var(--surface-2)}
.runline .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.live{background:var(--ok);box-shadow:0 0 0 3px var(--accent-soft);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.dot.idle{background:var(--faint)}
.runline .rl-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runline span.rl-s{font-size:11px;color:var(--muted);flex:none}
.app.narrow .runline{width:36px;justify-content:center}
.app.narrow .runline .rl-t,.app.narrow .runline .rl-s{display:none}
.side-spacer{margin-top:auto}
.side-foot{flex:0 0 auto;padding:8px 0 0;display:flex;align-items:center;gap:10px;width:100%}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.side-foot .who{min-width:0;flex:1}
.side-foot .who b{display:block;font-size:14px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who span{font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.side-foot .theme-btn{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted);flex:none;transition:background .14s,color .14s}
.side-foot .theme-btn:hover{background:var(--surface-2);color:var(--ink)}
.app.narrow .side-foot{flex-direction:column;gap:8px;padding-top:12px}
.app.narrow .side-foot .who{display:none}

/* ==================== top bar — 76px, pad 19/20 ==================== */
.view{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}
.topbar{display:flex;align-items:center;gap:14px;padding:19px 20px;height:76px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.topbar h1{font-size:16px;line-height:20px;font-weight:600;white-space:nowrap;color:var(--ink)}
.tb-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tb-text b{font-size:16px;line-height:20px;font-weight:600;color:var(--ink);white-space:nowrap}
.tb-text span{font-size:12px;line-height:16px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb{font-size:14px;line-height:18px;color:var(--muted)}
@media(max-width:1240px){.crumb{display:none}}
.filters{margin-left:auto;display:flex;gap:8px;align-items:center;min-width:0;justify-content:flex-end}
.kbd-hint{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted);white-space:nowrap}
@media(max-width:1400px){.kbd-hint{display:none}}

/* top-bar search + actions (kit Search Input, 40px) */
.tb-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);width:260px;flex:none;color:var(--muted)}
.tb-search input{border:none;background:transparent;height:auto;padding:0;flex:1;min-width:0;font-size:14px;box-shadow:none!important}
.tb-search input:focus{box-shadow:none!important}
.tb-search .ks{display:flex;gap:3px;flex:none}
@media(max-width:1200px){.tb-search{width:auto}.tb-search input,.tb-search .ks{display:none}}
.ibtn{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);display:grid;place-items:center;color:var(--ink-soft);transition:background .14s,color .14s,border-color .14s}
.ibtn:hover{background:var(--surface-2);color:var(--ink)}
.ibtn.sm{width:32px;height:32px}
.ibtn.plain{border-color:transparent;background:transparent}
.btn-dark{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;flex:none;transition:opacity .15s}
.btn-dark:hover{opacity:.88}
.btn-line{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;flex:none;transition:background .14s,border-color .14s}
.btn-line:hover{background:var(--surface-2);border-color:var(--gray-300)}
.btn-line.sm,.btn-dark.sm{height:32px;padding:0 12px;font-size:13px}
.btn-green{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:600;flex:none;transition:background .15s}
.btn-green:hover{background:var(--accent-2)}
.btn-green.sm{height:32px;padding:0 14px;font-size:13px}

/* ==================== generic card + section head ==================== */
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.kcard.flush{padding:0}
.kcard-h{display:flex;align-items:center;gap:12px;min-height:32px}
.kcard-h .kh-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.kcard-h b{font-size:18px;line-height:24px;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.kcard-h .sub{font-size:12px;line-height:16px;color:var(--ink-soft)}
.kcard-h .ha{display:flex;gap:8px;align-items:center;flex:none}

/* ==================== reviewers + invite popup ==================== */
.rv-scroll{gap:16px}
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rv-head>b{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em}

/* pass carousel */
.rv-rail-wrap{position:relative}
.rv-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:2px;scrollbar-width:none}
.rv-rail::-webkit-scrollbar{display:none}
.rv-tile{position:relative;flex:0 0 232px;min-height:132px;border-radius:var(--r-md);border:1px solid var(--line);
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;overflow:hidden;cursor:pointer;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.rv-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.rv-tile>b{font-size:16px;line-height:21px;font-weight:600;letter-spacing:-.01em;position:relative}
.rv-tile .rt-s{font-size:12px;line-height:17px;color:var(--ink-soft);position:relative;max-width:24ch}
.rv-tile .rt-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;position:relative;margin-bottom:14px}
/* the gradient washes, left-to-right like the kit's pass tiles */
.rv-tile::before{content:"";position:absolute;inset:0;pointer-events:none}
.rv-tile.gr::before{background:linear-gradient(105deg,#eafaef 0%,#d6f5e0 42%,#bfeecf 100%)}
.rv-tile.or::before{background:linear-gradient(105deg,#fff4e8 0%,#ffe6cc 44%,#ffd6a8 100%)}
.rv-tile.bl::before{background:linear-gradient(105deg,#eef5ff 0%,#dbeafe 44%,#bfdbfe 100%)}
.rv-tile.pu::before{background:linear-gradient(105deg,#f5f0ff 0%,#e9ddff 44%,#dcc9fb 100%)}
.rv-tile.na::before{background:linear-gradient(105deg,var(--surface-2) 0%,var(--surface-3) 100%)}
.rv-tile.gr .rt-ic{background:#0f3d21}
.rv-tile.or .rt-ic{background:#6b3410}
.rv-tile.bl .rt-ic{background:#12306b}
.rv-tile.pu .rt-ic{background:#3c2168}
.rv-tile.na .rt-ic{background:var(--muted)}
.rv-tile.na{opacity:.55}
.rv-next{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);display:grid;place-items:center;color:var(--ink-soft);z-index:2}
.rv-next:hover{background:var(--surface-2);color:var(--ink)}

.rv-body{flex:1;min-height:380px}

/* empty state */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:56px 24px 64px;text-align:center}
.empty>b{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em;margin-top:26px}
.empty>span{font-size:14px;line-height:20px;color:var(--muted);max-width:34ch}
.empty-a{display:flex;gap:10px;margin-top:22px}
/* soft overlapping discs on a faint grid, badge centred — the kit's placeholder mark */
.cloud{position:relative;width:250px;height:150px;display:grid;place-items:center}
.cloud .cl-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 26%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 26%,transparent 78%);opacity:.85}
.cloud span[class^=cl-]:not(.cl-grid):not(.cl-badge){position:absolute;border-radius:50%;
  background:linear-gradient(160deg,#fff,var(--surface-2) 70%,var(--surface-3));box-shadow:0 6px 16px rgba(16,24,40,.06)}
.cloud .cl-a{width:104px;height:104px;left:50%;top:16px;transform:translateX(-50%)}
.cloud .cl-b{width:76px;height:76px;left:28px;top:52px}
.cloud .cl-c{width:76px;height:76px;right:28px;top:52px}
.cloud .cl-badge{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--muted);color:var(--surface);box-shadow:0 4px 12px rgba(16,24,40,.2)}

.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.rv-card{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.rv-h{display:flex;align-items:center;gap:10px}
.rv-n{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.rv-t{min-width:0;flex:1}
.rv-t b{display:block;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-t span{font-size:12px;line-height:16px;color:var(--muted)}
.rv-m{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);min-width:0}
.rv-m svg{flex:none;opacity:.7}
.rv-f{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rv-add{border:1px dashed var(--line);border-radius:var(--r-md);min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;transition:border-color .15s,color .15s,background .15s}
.rv-add:hover{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}

/* ==================== review studio: queue rail + blind workspace ==================== */
.rs{flex:1;display:grid;grid-template-columns:var(--rail,288px) 6px minmax(0,1fr);gap:0 4px;min-height:0}
.rs.with-prog{grid-template-columns:var(--rail,288px) 6px minmax(0,1fr) 372px}
/* drag handle between the queue rail and the workspace */
.rs-grip{align-self:stretch;display:grid;place-items:center;cursor:col-resize;touch-action:none}
.rs-grip span{width:2px;height:38px;border-radius:2px;background:var(--line);transition:background .14s}
.rs-grip:hover span,.rs-grip:active span{background:var(--accent)}
/* progress drawer, right side */
.rs-prog{display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow-y:auto;min-height:0;animation:progIn .22s var(--ease)}
@keyframes progIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rs-prog{animation:none}}
.rp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rp-h b{display:block;font-size:17px;line-height:23px;font-weight:700;letter-spacing:-.02em}
.rp-h span{display:block;font-size:12px;line-height:17px;color:var(--muted);margin-top:2px}
.rp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.rp-stats>div{border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px}
.rp-stats b{display:block;font-size:21px;line-height:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rp-stats span{font-size:11px;line-height:15px;color:var(--muted)}
.rp-tl{border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.rp-tl-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.rp-tl-h b{display:block;font-size:14px;line-height:19px;font-weight:600}
.rp-tl-h span{display:block;font-size:11.5px;line-height:16px;color:var(--muted);margin-top:2px}
.rp-live{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--line);border-radius:100px;padding:5px 10px;font-size:11px;color:var(--ink-soft);white-space:nowrap}
.rp-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rp-lane{display:flex;flex-direction:column;gap:7px;padding:11px 0;border-bottom:1px solid var(--line)}
.rp-lane:last-child{border-bottom:none;padding-bottom:0}
.rp-lt b{display:block;font-size:13px;line-height:18px;font-weight:600}
.rp-lt span{font-size:11px;color:var(--muted)}
.rp-cells{display:flex;flex-wrap:wrap;gap:5px}
.rp-cell{min-width:30px;height:28px;padding:0 4px;border-radius:6px;background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums;transition:background .14s,color .14s}
.rp-cell.done{background:var(--accent);color:#fff}
.rp-cell.now{background:var(--accent-soft);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent)}
/* below the split threshold it becomes an overlay panel rather than vanishing */
@media(max-width:1280px){
  .rs.with-prog{grid-template-columns:var(--rail,288px) 6px minmax(0,1fr)}
  .rs-prog{position:fixed;top:12px;right:12px;bottom:12px;width:min(372px,calc(100vw - 32px));z-index:120;box-shadow:var(--sh-4)}
}
@media(max-width:820px){.rs,.rs.with-prog{grid-template-columns:1fr}.rs-grip{display:none}}
.rs-side{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);min-height:0}
.rss-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rss-h b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.rss-search{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--muted)}
.rss-search input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:13px;color:var(--ink)}
.rss-search input::placeholder{color:var(--muted)}
.rss-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin:0 -4px;padding:0 2px 0 4px}
.rss-row{display:grid;grid-template-columns:minmax(0,1fr) 26px;gap:6px;align-items:center;border-radius:var(--r-sm);padding-right:6px;transition:background .14s}
.rss-row:hover{background:var(--surface-2)}
.rss-row.sel{background:var(--accent-soft)}
.rr-main{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:center;padding:8px;text-align:left;min-width:0}
.rr-play{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-soft);flex:none}
.rr-play.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rr-t{min-width:0}
.rr-t b{display:block;font-size:12.5px;line-height:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-t i{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.rr-add{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--muted);border:1px dashed var(--line);transition:all .14s}
.rr-add:hover{color:var(--ink);border-color:var(--ink-soft)}
.rr-add.on{background:var(--accent);border:1px solid var(--accent);color:#fff}
.rss-empty{font-size:13px;color:var(--muted);padding:12px 8px}
.rss-f{display:flex;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.rss-f .btn-line{flex:1;justify-content:center}
.rs-main{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:0;overflow-y:auto}

/* blind review workspace */
.blind{gap:16px}
.bl-note{font-size:13px;line-height:19px;color:var(--ink-soft);background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px}
.bl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bl-stats>div{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.bl-stats b{display:block;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bl-stats span{font-size:12px;color:var(--muted)}
.bl-acc-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bl-acc-h b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.bl-acc-h span{font-size:12px;color:var(--muted)}
.bl-acc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bl-card{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:11px;transition:border-color .16s,background .16s}
.bl-card.on{border-color:var(--accent);background:var(--accent-soft)}
.bc-h{display:flex;align-items:center;gap:10px}
.bc-n{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.bl-card.on .bc-n{background:var(--accent);color:#fff}
.bc-t{flex:1;min-width:0}
.bc-t b{display:block;font-size:14px;line-height:19px;font-weight:600}
.bc-t i{font-style:normal;font-size:11px;color:var(--muted)}
.bc-p{margin:0;font-size:12.5px;line-height:18px;color:var(--ink-soft)}
.bl-card .fld>span{font-size:12px}
.bl-card .fld input,.bl-card .fld select{height:36px;font-size:13px}
.bl-card .fld input:disabled,.bl-card .fld select:disabled{background:var(--surface-2);color:var(--muted)}
.bl-card>button{height:38px;border-radius:var(--r-sm);justify-content:center;margin-top:2px}
.bl-card>button:disabled{opacity:.45;cursor:not-allowed}
.bl-gate{display:flex;flex-direction:column;gap:9px}
.bg-h{display:flex;align-items:baseline;justify-content:space-between}
.bg-h b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.bg-h span{font-size:12px;color:var(--muted)}
.kt-r.on{background:var(--accent-soft)}
.kt-txt{text-align:left;min-width:0}
.kt-empty{padding:26px 16px;text-align:center;font-size:13px;color:var(--muted)}
@media(max-width:1100px){.rs{grid-template-columns:1fr}.rs-side{max-height:300px}.bl-acc{grid-template-columns:1fr}.bl-stats{grid-template-columns:1fr}}

/* ==================== donate voice ==================== */
/* consent gate: the microphone stays locked until all three are signed */
.dv-consent{align-items:center;text-align:center;padding:44px 24px 40px;gap:0}
.dvc-art{width:64px;height:64px;border-radius:20px;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;margin-bottom:20px}
.dvc-t{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.02em}
.dvc-s{margin:8px 0 26px;font-size:14px;line-height:21px;color:var(--muted);max-width:52ch}
.dvc-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px}
.dvc-row{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);text-align:left;transition:border-color .14s,background .14s}
.dvc-row:hover{background:var(--surface-2)}
.dvc-row.on{border-color:var(--accent);background:var(--accent-soft)}
.dvc-row .ck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;margin-top:1px;transition:background .14s,border-color .14s}
.dvc-row.on .ck{background:var(--accent);border-color:var(--accent);color:#fff}
.dvc-row .tx b{display:block;font-size:14px;line-height:19px;font-weight:600}
.dvc-row .tx i{font-style:normal;font-size:12px;line-height:17px;color:var(--muted)}
.dvc-go{width:100%;max-width:520px;height:42px;margin-top:20px;justify-content:center}
.dvc-legal{font-size:12px;color:var(--muted);margin-top:12px}
.dvc-legal a{color:var(--accent-2);font-weight:600}

.dv{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:4px;min-height:0}
.dv-main{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow-y:auto}

/* the booth */
.booth-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.booth-h .bh-t b{font-size:15px;font-weight:600}
.booth-h .bh-t span{font-size:12px;color:var(--muted);margin-left:6px}
.booth-script{margin:0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
  font-size:20px;line-height:31px;letter-spacing:-.01em;text-wrap:pretty}
.booth-mic{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:12px;transition:border-color .18s,background .18s}
.booth-mic.live{border-color:var(--accent);background:var(--accent-soft)}
.booth-mic canvas{display:block;width:100%}
.bm-c{display:flex;flex-direction:column;align-items:center;gap:7px}
.bm-time{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bm-btn{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(27,171,68,.28);transition:transform .14s var(--ease),background .14s}
.bm-btn:hover{transform:scale(1.05)}
.bm-btn.on{background:#e5484d;box-shadow:0 4px 14px rgba(229,72,77,.3);animation:bmPulse 1.6s ease-in-out infinite}
@keyframes bmPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 12px rgba(229,72,77,0)}}
.bm-hint{font-size:12px;color:var(--muted)}

.dv-takes{display:flex;flex-direction:column;gap:6px}
.dv-take{display:grid;grid-template-columns:26px 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.dv-take .n{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dv-take .nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft)}
.dv-take .du{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dv-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;margin-top:auto;border-top:1px solid var(--line)}
.dv-prog{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.dv-prog .pg{height:6px;border-radius:100px;background:var(--track);overflow:hidden}
.dv-prog .pg span{display:block;height:100%;border-radius:100px;background:var(--accent);transition:width .3s var(--ease)}
.dv-prog>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.dv-side{display:flex;flex-direction:column;gap:14px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow-y:auto}
.dv-sec{font-size:15px;line-height:20px;font-weight:600;letter-spacing:-.01em;padding-top:4px}
.dv-grp{display:flex;flex-direction:column;gap:7px}
.dv-grp>label{font-size:12px;line-height:16px;font-weight:600;color:var(--ink-soft)}
.dv-langs{display:flex;flex-wrap:wrap;gap:6px}
.dv-langs button{padding:7px 11px;border:1px solid var(--line);border-radius:100px;font-size:12px;color:var(--ink-soft);transition:all .14s}
.dv-langs button:hover{border-color:var(--ink-soft)}
.dv-langs button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.dv-pick{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;text-align:left;width:100%}
.dv-pick:hover{background:var(--surface-2)}
.dv-pick .orb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#8ad9a4,var(--accent));flex:none}
.dv-pick .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dv-stats>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.dv-stats b{display:block;font-size:19px;line-height:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dv-stats span{font-size:11px;color:var(--muted)}
@media(max-width:980px){.dv{grid-template-columns:1fr}.dv-side{order:-1}}

/* page-level right sidebar: detail for any voice or donated take */
.vb-shell{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-height:0}
.vb-shell.with-detail{grid-template-columns:minmax(0,1fr) 340px}
.vb-detail{display:flex;flex-direction:column;gap:13px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow-y:auto;min-height:0;animation:progIn .22s var(--ease)}
.vd-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vd-h b{display:block;font-size:17px;line-height:23px;font-weight:700;letter-spacing:-.02em}
.vd-h span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.vd-s{margin:0;font-size:13.5px;line-height:20px;color:var(--ink-soft)}
.vd-wave{height:46px;display:flex;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px}
.dn-list-w{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.dn-list-w .dn-list{max-height:none}
.dn-list-w .dn-row{border:1px solid var(--line)}
.dn.one{grid-template-columns:minmax(0,1fr)}
.dn.one .dn-main,.dn.one .dn-list-w{grid-column:1}
@media(max-width:1180px){
  .vb-shell.with-detail{grid-template-columns:minmax(0,1fr)}
  .vb-detail{position:fixed;top:12px;right:12px;bottom:12px;width:min(340px,calc(100vw - 32px));z-index:120;box-shadow:var(--sh-4)}
}

/* ==================== donate voice (section under the bank) ==================== */
.donate{gap:16px}
/* booth on the left, donation rail pinned to the right */
.dn{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.dn-main{grid-column:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.dn-side{grid-column:2;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;min-width:0;position:sticky;top:0}
.dns-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dns-h b{font-size:14px;font-weight:600}
.dn-grp{display:flex;flex-direction:column;gap:7px}
.dn-grp>label{font-size:12px;line-height:16px;font-weight:600;color:var(--ink-soft)}
.dn-list{display:flex;flex-direction:column;gap:4px;max-height:230px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.dn-row{display:grid;grid-template-columns:24px minmax(0,1fr) 14px;gap:9px;align-items:center;padding:8px;border-radius:var(--r-sm);text-align:left;color:var(--muted);transition:background .14s}
.dn-row:hover{background:var(--surface-2);color:var(--ink-soft)}
.dn-row .n{font-size:11px;font-variant-numeric:tabular-nums}
.dn-row .tx{min-width:0}
.dn-row .tx b{display:block;font-size:12.5px;line-height:17px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-row .tx i{font-style:normal;font-size:11px;color:var(--muted)}
/* detail view, revealed when a donation is picked */
.dn-det{display:flex;flex-direction:column;gap:11px;animation:arIn .18s var(--ease)}
.dd-n{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.dd-s{margin:0;font-size:13.5px;line-height:20px;color:var(--ink)}
.dd-wave{height:44px;display:flex;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px}
.dd-kv{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dd-kv dt{font-size:11px;color:var(--muted)}
.dd-kv dd{margin:2px 0 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.dd-kv dd.ok{color:var(--accent-2)}
.dd-a{display:flex;gap:6px;padding-top:4px}
.dd-a .btn-line{flex:1;justify-content:center}
.dn-prog{display:flex;flex-direction:column;gap:6px}
.dn-prog .pg{height:6px;border-radius:100px;background:var(--track);overflow:hidden}
.dn-prog .pg span{display:block;height:100%;border-radius:100px;background:var(--accent);transition:width .3s var(--ease)}
.dn-prog>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* consent dialog */
.pop-consent{width:min(460px,100%);align-items:center;text-align:center;gap:14px}
.pop-consent .dvc-art{width:52px;height:52px;border-radius:16px;margin-bottom:0}
.pop-consent .dvc-list{max-width:none}
.pc-f{width:100%;justify-content:center;flex-wrap:wrap}
.pc-f button{flex:1;min-width:120px;justify-content:center}
@media(max-width:980px){.dn{grid-template-columns:1fr}.dn-main,.dn-side{grid-column:1}.dn-side{position:static}}

/* popup */
.scrim{position:fixed;inset:0;background:rgba(15,20,17,.42);backdrop-filter:blur(2px);z-index:200;display:grid;place-items:center;padding:24px;animation:scrimIn .16s var(--ease)}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.pop{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,14px);box-shadow:var(--sh-4);padding:22px;display:flex;flex-direction:column;gap:16px;animation:popIn .2s var(--ease)}
/* order-a-review: a paged wizard at fixed height, so nothing jumps between steps */
.pop-order{width:min(728px,100%);padding:24px 0 20px}
.pop-order .pop-h,.pop-order .pop-f,.pop-order .ar-sum,.pop-order .ar-steps{padding-left:28px;padding-right:28px}
.ar-steps{list-style:none;display:flex;gap:6px;margin:0;padding-top:2px;padding-bottom:2px}
.ar-steps li{flex:1}
.ar-steps button{width:100%;display:flex;align-items:center;gap:8px;padding:8px 0 10px;border-bottom:2px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;text-align:left;transition:color .16s,border-color .16s}
.ar-steps button:disabled{cursor:default}
.ar-steps .n{width:20px;height:20px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:11px;flex:none;transition:background .16s,color .16s}
.ar-steps li.on button{color:var(--ink);border-bottom-color:var(--accent)}
.ar-steps li.on .n{background:var(--accent);color:#fff}
.ar-steps li.done button{color:var(--ink-soft);border-bottom-color:var(--accent)}
.ar-steps li.done .n{background:var(--accent-soft);color:var(--accent-2)}

/* one page's worth of body — fixed so the dialog never resizes step to step */
.ar-page{height:502px;overflow-y:auto;padding:0 28px;display:flex;flex-direction:column;animation:arIn .18s var(--ease)}
@keyframes arIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ar-page{animation:none}}
.ar-sec{display:flex;flex-direction:column;gap:9px;padding:14px 0;border-bottom:1px solid var(--line)}
.ar-sec:last-child{border-bottom:none}
.ar-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ar-lbl i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0}
.ar-two{flex-direction:row;gap:16px}
.ar-two>div{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}

.ar-takes{display:flex;flex-direction:column;gap:6px}
.ar-take{display:grid;grid-template-columns:56px 1fr 20px;gap:11px;align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);text-align:left;transition:border-color .14s,background .14s}
.ar-take:hover{background:var(--surface-2)}
.ar-take.on{border-color:var(--accent);background:var(--accent-soft)}
.ar-take .tk-w{height:28px;display:flex;align-items:center;overflow:hidden;opacity:.8}
.ar-take .tk-w .wavemini{height:28px}
.ar-take .tk-t{min-width:0}
.ar-take .tk-t b{display:block;font-size:13px;line-height:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-take .tk-t i{font-style:normal;font-size:11px;color:var(--muted)}
.ar-take .tk-r{color:var(--accent);display:grid;place-items:center}

.ar-passes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ar-pass{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;text-align:left;display:flex;align-items:center;gap:9px;transition:box-shadow .14s,border-color .14s}
.ar-pass::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.85}
.ar-pass.gr::before{background:linear-gradient(105deg,#eafaef,#d6f5e0)}
.ar-pass.or::before{background:linear-gradient(105deg,#fff4e8,#ffe6cc)}
.ar-pass.bl::before{background:linear-gradient(105deg,#eef5ff,#dbeafe)}
.ar-pass.pu::before{background:linear-gradient(105deg,#f5f0ff,#e9ddff)}
.ar-pass>*{position:relative}
.ar-pass .rt-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff}
.ar-pass.gr .rt-ic{background:#0f3d21}.ar-pass.or .rt-ic{background:#6b3410}
.ar-pass.bl .rt-ic{background:#12306b}.ar-pass.pu .rt-ic{background:#3c2168}
.ar-pass b{font-size:13px;line-height:17px;font-weight:600}
.ar-pass i{font-style:normal;font-size:11px;line-height:15px;color:var(--ink-soft)}
.ar-pass.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}

.ar-seg{display:flex;background:var(--surface-2);border-radius:var(--r-sm);padding:3px;gap:2px}
.ar-seg button{flex:1;height:32px;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted)}
.ar-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-2)}
.ar-sel{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;outline:none}
.ar-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.ar-chips{display:flex;flex-wrap:wrap;gap:6px}
.ar-chips button{padding:6px 11px;border:1px solid var(--line);border-radius:100px;font-size:12px;color:var(--ink-soft);transition:all .14s}
.ar-chips button:hover{border-color:var(--ink-soft)}
.ar-chips button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ar-note{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;line-height:19px;resize:vertical;outline:none}
.ar-note:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ar-note::placeholder{color:var(--muted)}

.ar-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line);background:var(--surface-2)}
.ar-sum b{display:block;font-size:14px;line-height:20px;min-height:20px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-sum span{font-size:11px;color:var(--muted)}
.pop-order .pop-f{padding-top:14px;align-items:center}
.ar-count{margin-right:auto;font-size:12px;color:var(--muted)}
.ar-qr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:16px 0 0}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.pop-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--surface-2)}
.pop-x:hover{background:var(--surface-3);color:var(--ink)}
.pop-h{display:flex;flex-direction:column;gap:5px;padding-right:36px}
.pop-h b{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em}
.pop-h span{font-size:13px;line-height:19px;color:var(--muted)}
.pop-tabs{align-self:flex-start}
.pop-tabs button{display:inline-flex;align-items:center;gap:7px}
.pop-b{display:flex;flex-direction:column;gap:12px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.fld>span{font-size:13px;line-height:17px;font-weight:500;color:var(--ink-soft)}
.fld>span i{font-style:normal;color:var(--muted);font-weight:400}
.fld input,.fld select{height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.fld input:focus,.fld select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld input::placeholder{color:var(--muted)}
.fld-row{display:flex;gap:12px}
.pop-note{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:17px;color:var(--muted);background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px}
.pop-note svg{flex:none;margin-top:1px;opacity:.75}
.qr-b{align-items:center;text-align:center;gap:10px}
.qr-wrap{padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);line-height:0}
.qr-t{font-size:16px;line-height:22px;font-weight:600}
.qr-s{font-size:13px;line-height:19px;color:var(--muted);max-width:34ch}
.qr-link{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface-2);border-radius:var(--r-sm);padding:8px 8px 8px 12px;margin-top:4px}
.qr-link code{flex:1;min-width:0;font-size:12px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.pop-f{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}
.btn-green:disabled{opacity:.45;cursor:not-allowed}
.btn-line.sm{height:28px;padding:0 10px;font-size:12px}

/* ==================== submenu column (Settings/Training) — 252px ==================== */
.split{flex:1;min-height:0;display:grid;grid-template-columns:252px minmax(0,1fr);gap:4px}
/* right-hand settings rail variant (Voice Changer) — a class, never an inline style,
   so the narrow-viewport collapse below can still win */
.split.rail{grid-template-columns:minmax(0,1fr) 340px}
@media(max-width:1180px){.split{grid-template-columns:200px minmax(0,1fr)}.split.rail{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:980px){
  /* single column: rows size to content and only .split scrolls — no nested traps */
  .split,.split.rail{grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;align-content:start;overflow-y:auto}
  .split>.pane,.split>.wb-side,.split>.submenu{overflow:visible;min-height:0}
  /* the settings/training submenu is decorative when stacked, so it goes away —
     but Human Review's rail IS the work queue, so it stays and caps its height.
     Both selectors outrank the later base `.submenu` rule. */
  .split:not(.hr)>.submenu{display:none}
  .split.hr>.submenu{max-height:280px}
  .split.rail .wb-side{border-top:1px solid var(--line)}
}
.submenu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:20px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.submenu .sm-lbl{font-size:14px;line-height:18px;color:var(--ink-soft)}
.submenu .sm-nav{display:flex;flex-direction:column;gap:4px}
.submenu .sm-nav button{display:flex;align-items:center;gap:8px;height:36px;padding:8px;border-radius:var(--r-sm);font-size:14px;line-height:18px;font-weight:500;color:var(--ink-soft);text-align:left;transition:background .14s,color .14s}
.submenu .sm-nav button:hover{background:var(--surface-2);color:var(--ink)}
.submenu .sm-nav button.on{background:var(--accent-soft);color:var(--ink);font-weight:600}
.submenu .sm-nav button .sm-i{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);flex:none}
.submenu .sm-nav button.on .sm-i{background:var(--accent);color:#fff}

/* Human Review: pane + right rail for signal / identity / comments */
.split.hr{grid-template-columns:252px minmax(0,1fr) 340px}
/* signal rail hidden via the ••• button */
.split.hr.noinfo{grid-template-columns:252px minmax(0,1fr)}
.split.hr.shut.noinfo{grid-template-columns:64px minmax(0,1fr)}
.split.hr.shut{grid-template-columns:64px minmax(0,1fr) 340px}
/* the rail is a contained column of cards, not a floating overlay */
.hr-side{display:flex;flex-direction:column;gap:12px;padding:12px;margin:0 16px 16px 0;overflow-y:auto;min-height:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.hr-side .wb-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.hr-cmt{gap:12px}
.hr-cmt-row{display:flex;gap:8px;align-items:center}
.hr-cmt-row input{flex:1;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;outline:none;transition:border-color .14s var(--ease)}
.hr-cmt-row input:focus{border-color:var(--accent)}
.hr-cmt-row input::placeholder{color:var(--muted)}
@media(max-width:1240px){
  /* the queue rail collapses first so the info rail can stay a real column */
  .app .split.hr,.app .split.hr.shut{grid-template-columns:64px minmax(0,1fr) 320px}
  .app .split.hr.noinfo,.app .split.hr.shut.noinfo{grid-template-columns:64px minmax(0,1fr)}
}
@media(max-width:940px){
  /* only now does the info rail float, and it keeps its card look */
  .app .split.hr{grid-template-columns:252px minmax(0,1fr)}
  .app .split.hr.shut{grid-template-columns:64px minmax(0,1fr)}
  .hr-side{position:fixed;right:0;top:76px;bottom:0;width:340px;margin:0;border-radius:0;border-left:1px solid var(--line);z-index:40;box-shadow:-8px 0 24px rgba(0,0,0,.06)}
}
.split.hr{transition:grid-template-columns .24s var(--ease)}
/* keep the 340px info rail as the third column when the queue collapses */
.split.hr.shut{grid-template-columns:64px minmax(0,1fr) 340px}
.split.hr.shut .submenu{padding:12px 10px;align-items:center}
.submenu .sm-top{display:flex;align-items:center;gap:8px;min-height:24px}
.submenu .sm-top .sm-lbl{flex:1}
.submenu .sm-tog{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--muted);flex:none;transition:background .14s var(--ease),color .14s var(--ease)}
.submenu .sm-tog:hover{background:var(--surface-2);color:var(--ink)}
.split.hr.shut .sm-nav button,.split.hr.shut .sm-takes button{justify-content:center;padding:8px 0}
.split.hr.shut .sm-back{padding:0}
.submenu .sm-n{font-size:12px;line-height:16px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.submenu .sm-nav button.on .sm-n{color:var(--ink-soft)}
.submenu .sm-takes{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto}
.submenu .sm-takes button{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);text-align:left;width:100%;color:var(--ink-soft);transition:background .14s var(--ease)}
.submenu .sm-takes button:hover{background:var(--surface-2)}
.submenu .sm-takes button.on{background:var(--accent-soft)}
.submenu .sm-takes .st{display:flex;flex-direction:column;gap:1px;min-width:0}
/* takes are audio, not people — a wave glyph reads better than a voice initial */
.submenu .sm-takes .sm-wv{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);flex:none;transition:background .14s var(--ease),color .14s var(--ease)}
.submenu .sm-takes button:hover .sm-wv{color:var(--ink-soft)}
.submenu .sm-takes button.on .sm-wv{background:var(--accent);color:#fff}
.submenu .sm-takes .st b{font-size:13px;line-height:17px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.submenu .sm-takes .st i{font-size:11px;line-height:15px;font-style:normal;color:var(--muted)}
.submenu .sm-empty{font-size:13px;line-height:17px;color:var(--muted);padding:6px 8px}
.submenu .sm-back{margin-top:auto;justify-content:center;gap:6px}

/* view transition: Review <-> Human Review, and take-to-take inside the rail */
.split.hr{animation:hrIn .28s var(--ease)}
.hr-pane{animation:paneIn .22s var(--ease)}
@keyframes hrIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes paneIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.split.hr,.hr-pane{animation:none}}
.pane{min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}

/* ==================== charts ==================== */
.chartcard{position:relative}
.chartwrap{position:relative;width:100%;padding-left:52px}
.chartwrap .ch-plot{position:relative;height:100%;width:100%}
.chartwrap svg{width:100%;display:block}
/* y-axis labels live in HTML — the SVG is anisotropically scaled, text must not be */
.ch-yaxis{position:absolute;left:0;top:0;bottom:0;width:52px;pointer-events:none}
.ch-yaxis span{position:absolute;right:10px;transform:translateY(-50%);font-size:13px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-xl{position:absolute;bottom:2px;transform:translateX(-50%);font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap;pointer-events:none}
.ch-xl.on{color:var(--accent);font-weight:600}
.ch-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2.5px solid var(--accent);transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.gl{stroke:var(--line);stroke-width:1}
.cline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cfill-b{stroke:var(--accent);stroke-width:1;opacity:.28}
.cbar{fill:var(--accent)}
.cvline{stroke:var(--accent);stroke-width:1.5}
.ctip{position:absolute;transform:translate(-50%,-100%);background:var(--gray-950);color:#fff;border-radius:var(--r-sm);padding:8px 10px;font-size:12px;line-height:16px;pointer-events:none;white-space:nowrap;box-shadow:var(--sh-3);z-index:3}
:root[data-theme="dark"] .ctip{background:var(--dark-mood-button-color)}
.ctip .cd{color:var(--gray-400);font-size:11px;display:block;margin-bottom:2px}
.gauge{display:grid;place-items:center;position:relative;padding:8px 0}
.gauge .gv{position:absolute;top:56%;text-align:center}
.gauge .gv b{display:block;font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.gauge .gv span{font-size:12px;line-height:16px;color:var(--ink-soft)}
.gauge .gv span i{font-style:normal;color:var(--accent);font-weight:600}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;background:var(--surface-2)}
.legend .lg{display:flex;flex-direction:column;gap:4px}
.legend .lg .lt{display:flex;align-items:center;gap:8px;font-size:14px;line-height:18px;color:var(--ink-soft)}
.legend .lg .sw{width:12px;height:12px;border-radius:3px;flex:none}
.legend .lg b{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gcbars{display:flex;flex-direction:column;gap:12px}
.gcrow{display:grid;grid-template-columns:70px minmax(0,1fr) 44px;gap:12px;align-items:center;font-size:14px;line-height:18px}
.gcrow .gcname{color:var(--ink-soft)}
.gcrow .gctrack{height:32px;border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden;display:flex;align-items:center}
.gcrow .gcfill{height:100%;border-radius:var(--r-sm);display:flex;align-items:center;padding:0 10px;color:#fff;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden}
.gcrow .gcfill b{font-weight:700;margin-left:4px}
.gcrow .gcpct{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.gtable{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.gtable div{display:grid;grid-template-columns:1fr auto 72px;gap:12px;padding:10px 14px;font-size:14px;line-height:18px;border-bottom:1px solid var(--line)}
.gtable div:last-child{border-bottom:none}
.gtable .gk{color:var(--ink-soft)}
.gtable .gv,.gtable .gp{font-variant-numeric:tabular-nums;text-align:right}

/* section title — Open Sans 600 18/24 at -0.02em (kit's screen heading) */
.sect-t{font-size:18px;line-height:24px;letter-spacing:-.02em;font-weight:600;color:var(--ink);display:block}

/* "Typing" composer — r16, white, inset 1px gray-200 + 4px gray-100 halo */
.composer{position:relative;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0px 0px 0px 4px var(--gray-100);overflow:hidden;display:flex;flex-direction:column}
:root[data-theme="dark"] .composer{box-shadow:inset 0 0 0 1px var(--line),0px 0px 0px 4px var(--surface-2)}
.cmp-blur{position:absolute;left:50%;top:-9px;width:200px;height:20px;border-radius:50%;background:rgba(27,171,68,.2);pointer-events:none;filter:blur(6px)}
.cmp-head{padding:16px;display:flex;gap:12px;align-items:flex-start;min-height:96px}
.cmp-star{color:var(--accent);flex:none}
.cmp-in{flex:1;min-width:0;border:none;background:transparent;height:auto;padding:0;font-size:16px;line-height:20px;color:var(--ink)}
.cmp-in:focus{box-shadow:none!important}
.cmp-in::placeholder{color:var(--gray-500)}
.cmp-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}

/* ==================== tables (kit Table Component, row 44) ==================== */
/* Column templates live in CSS (never inline) so the name track keeps a floor and
   low-value columns drop at narrow widths instead of crushing it. */
.ktable .kt-h,.ktable .kt-r{display:grid;align-items:center;gap:12px;padding:0 16px}
.hide-lg,.hide-md{display:flex}
/* history: cbx | name | duration | format | actions */
.kt-hist{grid-template-columns:18px minmax(180px,1fr) minmax(130px,200px) 96px 84px}
@media(max-width:1080px){.kt-hist{grid-template-columns:18px minmax(160px,1fr) minmax(120px,180px) 84px}.kt-hist .hide-md{display:none}}
/* bank list: cbx | name | state | sample | lang | uses | actions */
.kt-bank{grid-template-columns:18px minmax(200px,1fr) 108px minmax(100px,140px) 88px 84px 84px}
@media(max-width:1320px){.kt-bank{grid-template-columns:18px minmax(180px,1fr) minmax(100px,140px) 84px}.kt-bank .hide-lg{display:none}}
/* keep the sample wave (the point of a voice list); drop the description line instead */
@media(max-width:960px){.kt-bank{grid-template-columns:18px minmax(150px,1fr) minmax(96px,132px) 84px}.kt-bank .kt-txt span{display:none}}
/* generated: cbx | name | duration | downloads | actions */
.kt-gen{grid-template-columns:18px minmax(200px,1fr) minmax(130px,190px) 140px 84px}
@media(max-width:1080px){.kt-gen{grid-template-columns:18px minmax(170px,1fr) minmax(120px,180px) 84px}.kt-gen .hide-md{display:none}}
/* Tables size to the column they sit in, not the window — a viewport media query
   can't see a drawer or a resized rail squeezing the container. */
.ktable{container-type:inline-size}
@container (max-width:620px){
  .kt-gen{grid-template-columns:18px minmax(150px,1fr) minmax(100px,150px) 84px}
  .kt-gen .hide-md{display:none}
  .kt-bank{grid-template-columns:18px minmax(140px,1fr) minmax(90px,124px) 84px}
  .kt-bank .kt-txt span{display:none}
}
@container (max-width:430px){
  .kt-gen{grid-template-columns:18px minmax(120px,1fr) 76px}
  .kt-gen>span:nth-child(3),.kt-gen>.kt-cell:not(.hide-md){display:none}
  .kt-bank{grid-template-columns:18px minmax(110px,1fr) 76px}
  .kt-bank>span:nth-child(3),.kt-bank>.kt-cell{display:none}
  .kt-gate{grid-template-columns:minmax(110px,1fr) 88px}
  .kt-gate>*:nth-child(2),.kt-gate>*:nth-child(3){display:none}
}
/* gates: name | condition | measured | result */
.kt-gate{grid-template-columns:minmax(140px,180px) minmax(160px,1fr) minmax(110px,150px) 96px}
@media(max-width:900px){.kt-gate{grid-template-columns:minmax(120px,1fr) minmax(90px,130px) 88px}.kt-gate .hide-md{display:none}}
/* checkpoints: name | step | loss | size | actions */
.kt-ckpt{grid-template-columns:minmax(180px,1fr) 110px 110px 100px 84px}
@media(max-width:1080px){.kt-ckpt{grid-template-columns:minmax(160px,1fr) 100px 84px}.kt-ckpt .hide-md{display:none}}

.ktable{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.ktable .kt-h{height:44px;background:var(--surface-2);font-size:14px;line-height:18px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.ktable .kt-r{min-height:56px;border-bottom:1px solid var(--line);font-size:14px;line-height:18px;transition:background .12s}
.ktable .kt-r:last-child{border-bottom:none}
.ktable .kt-r:hover{background:var(--surface-2)}
.ktable .kt-r.on{background:var(--accent-soft)}
.kt-name{display:flex;align-items:center;gap:12px;min-width:0}
.kt-name .kt-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.kt-name .kt-txt b{font-size:14px;line-height:20px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.kt-name .kt-txt span{font-size:12px;line-height:20px;color:var(--ink-soft);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}
.kt-ico{width:32px;height:32px;border-radius:var(--r-sm);background:var(--surface-2);display:grid;place-items:center;color:var(--muted);flex:none}
.kt-cell{display:flex;align-items:center;gap:10px;color:var(--ink-soft);min-width:0}
.kt-cell .num{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500;white-space:nowrap}
.kt-acts{display:flex;gap:4px;justify-content:flex-end}
.cellwave{display:block;flex:none;opacity:.9}
.playmini{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink);flex:none;transition:background .14s,color .14s,border-color .14s}
.playmini:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.playmini.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cbx{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--gray-300);background:var(--surface);display:grid;place-items:center;color:#fff;flex:none;transition:background .12s,border-color .12s}
.cbx.on{background:var(--accent);border-color:var(--accent)}
.blob{border-radius:50%;flex:none;display:block}
.kavatar{flex:none;display:block}
/* fade starts one row in, so a partially-scrolled nav row never reads as disabled */
.nav-scroll.fade-y{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--f-a),#000 calc(100% - var(--f-b)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--f-a),#000 calc(100% - var(--f-b)),transparent 100%)}

/* pagination (kit Pagination) */
.pager{display:flex;align-items:center;gap:12px;padding:16px 4px 0;font-size:14px;line-height:18px}
.pg-of{color:var(--ink-soft);flex:none}
.pg-nums{flex:1;display:flex;align-items:center;justify-content:center;gap:4px}
.pg-n{min-width:32px;height:32px;padding:0 8px;border-radius:var(--r-sm);color:var(--ink-soft);font-size:14px;font-weight:500;transition:background .14s,color .14s}
.pg-n:hover{background:var(--surface-2);color:var(--ink)}
.pg-n.on{background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.pg-gap{color:var(--faint);padding:0 2px}
.pg-arrow{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted);transition:background .14s,color .14s}
.pg-arrow:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.pg-arrow:disabled{opacity:.35;cursor:not-allowed}
.pg-per{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-soft);font-size:13px;flex:none}
.pg-per:hover{background:var(--surface-2)}

/* search row above a table */
.searchrow{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--muted)}
.searchrow input{border:none;background:transparent;height:auto;padding:0;flex:1;min-width:0;font-size:14px}
.searchrow input:focus{box-shadow:none!important}

/* ==================== tabs ==================== */
.ktabs{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;width:fit-content;flex:none}
.ktabs button{height:32px;padding:0 16px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background .14s,color .14s}
.ktabs button:hover{color:var(--ink)}
.ktabs button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex:none}
.seg button{color:var(--muted);font-size:13px;font-weight:500;padding:5px 13px;border-radius:6px;white-space:nowrap;transition:background .14s,color .14s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}

/* ==================== big waveform player ==================== */
.player-h{display:flex;align-items:center;gap:12px}
.player-h .pv{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.player-h .pv b{font-size:16px;line-height:20px;font-weight:600;color:var(--ink)}
.player-h .pv span{font-size:12px;line-height:16px;color:var(--ink-soft)}
.player-h .pv span strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.bigwave{position:relative;user-select:none;padding:8px 0}
.bigwave canvas{width:100%;display:block;cursor:crosshair}
/* label rows — kit type: 12/16 at gray-500; drop ticks rather than overlap */
.ruler{display:flex;justify-content:space-between;gap:6px;font-size:12px;line-height:16px;color:var(--gray-500);margin-top:8px;font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.ruler span{flex:0 1 auto;min-width:0;overflow:hidden}
@media(max-width:1280px){.ruler span:nth-child(even):not(:last-child):not(:first-child){display:none}}
@media(max-width:820px){.ruler span:nth-child(4n+3):not(:last-child):not(:first-child){display:none}}
/* overview strip ends — kit: left 12/16, right 14/18, both gray-500 */
.ovends{display:flex;justify-content:space-between;gap:8px;color:var(--gray-500);margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.ovends span:first-child{font-size:12px;line-height:16px}
.ovends span:last-child{font-size:14px;line-height:18px}
/* "Time" — kit: Open Sans 600 32/42 at -.02em */
.bigtime{text-align:center;font-size:32px;line-height:42px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.bigtime span{color:var(--muted)}
.transport{display:flex;align-items:center;justify-content:center;gap:10px}
.timecode{font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tbtn{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted);transition:background .14s,color .14s}
.tbtn:hover{background:var(--surface-2);color:var(--ink)}
.play{width:40px;height:40px;border-radius:10px;background:var(--ink);color:var(--bg);display:grid;place-items:center;flex:none;transition:transform .15s,opacity .15s}
.play:hover{transform:scale(1.05)}
.play:disabled{background:var(--surface-3);color:var(--faint)}
.ab-wrap{display:flex;align-items:center;gap:8px;margin-left:auto}
.ab-btn{width:40px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:700;color:var(--muted);transition:background .14s,color .14s,border-color .14s}
.ab-btn:hover{border-color:var(--gray-300);color:var(--ink)}
.ab-btn.on{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line)}
/* overview strip under the main wave */
.ovstrip{height:44px;border-radius:var(--r-sm);background:var(--surface);position:relative;overflow:hidden;cursor:pointer}
.ovstrip canvas{width:100%;height:100%;display:block}
.ovstrip .ovhead{position:absolute;top:0;bottom:0;width:2px;background:var(--ink)}
.ovends{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:6px;font-variant-numeric:tabular-nums}

/* card title must wrap at a readable width, not shred into a column */
.kcard-h .kh-t b{min-width:0;overflow-wrap:break-word;text-wrap:pretty}
.kcard-h{flex-wrap:wrap}

/* ==================== sliders / toggles ==================== */
/* Slider [1.0] — 62 tall, gap 6; label 16/500; track 6px r96; dot 16px */
.vsl{display:flex;flex-direction:column;gap:6px}
.vsl-h{font-size:16px;line-height:20px;font-weight:500;color:var(--ink)}
.vsl-track{height:6px;border-radius:96px;background:var(--gray-200);position:relative;cursor:pointer;margin:5px 0}
.vsl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:96px;background:var(--primary-600)}
.vsl-knob{position:absolute;top:50%;width:16px;height:16px;border-radius:980px;background:var(--general-white);transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px rgb(255,255,255),inset 0px -3px 3px 0px rgba(55,93,251,.16),0px 0px 6px 0px rgba(27,28,29,.06);display:grid;place-items:center}
.vsl-knob i{width:6px;height:6px;border-radius:56px;background:var(--primary-600);box-shadow:0px 2px 4px 0px rgba(27,28,29,.04)}
.vsl-ends{display:flex;justify-content:space-between;font-size:12px;line-height:16px;color:var(--ink-soft)}
.tgl-row{display:flex;align-items:center;gap:10px}
.tgl{width:40px;height:22px;border-radius:100px;background:var(--surface-3);position:relative;flex:none;transition:background .18s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tgl.on{background:var(--accent)}
.tgl.on::after{transform:translateX(18px)}
.tgl-lbl{font-size:14px;font-weight:600;color:var(--ink)}
.fieldrow{display:flex;flex-direction:column;gap:6px}
.fieldrow label{font-size:14px;line-height:18px;color:var(--ink-soft)}
.pick{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);width:100%;text-align:left;transition:border-color .14s}
.pick:hover{border-color:var(--gray-300)}
.pick .pt{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick svg{color:var(--muted)}

/* ==================== voice bank (values from Explore-Voices/Card) ==================== */
.vb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
/* Card: r16 outer with a 2px ring, r14 inner surface, content pad 16 / gap 12 */
.vb-card{border-radius:16px;background:var(--gray-100);box-shadow:inset 0 0 0 1px var(--line);padding:2px;display:flex;flex-direction:column;transition:box-shadow .15s}
.vb-card>.vb-inner{border-radius:14px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.vb-card:hover{box-shadow:inset 0 0 0 1px var(--gray-300)}
.vb-card.on,.vb-card.playing{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px var(--accent-soft)}
.vb-top{display:flex;align-items:center;gap:12px;min-width:0}
.vb-top .vb-t{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
/* name 18/24 -.02em 600; meta 12/16 gray-700 — both straight from the frame */
.vb-top .vb-t b{display:block;font-size:18px;line-height:24px;letter-spacing:-.02em;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-top .vb-t span{display:block;font-size:12px;line-height:16px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-desc{font-size:12px;line-height:16px;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vb-tags{display:flex;gap:6px;flex-wrap:wrap}
.vb-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.vb-foot .vf-m{font-size:12px;line-height:16px;color:var(--ink-soft);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* voice mark — typographic monogram, no imagery */
.vavatar{border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gray-100);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft);font-weight:600;line-height:1}
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:6px;font-size:12px;line-height:16px;font-weight:500;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
.badge.green{color:var(--accent-2);background:var(--accent-soft);border-color:var(--accent-line)}
.badge.amber{color:var(--warn);background:rgba(253,186,116,.18);border-color:rgba(253,186,116,.5)}
.badge.gray{color:var(--muted)}

/* playing state on a bank card */
.vb-wave{cursor:pointer;border-radius:4px}
.vb-wave:hover{background:var(--surface-2)}
.vf-now{display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-variant-numeric:tabular-nums;font-weight:600}
.eqbar{display:inline-flex;align-items:flex-end;gap:2px;height:11px;flex:none}
.eqbar i{width:2px;background:var(--accent);border-radius:1px;animation:eq .9s ease-in-out infinite}
.eqbar i:nth-child(1){height:40%;animation-delay:0s}
.eqbar i:nth-child(2){height:100%;animation-delay:.15s}
.eqbar i:nth-child(3){height:65%;animation-delay:.3s}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* ==================== dubbing (values from /Visual-Design---Light/Dubbing) ==================== */
/* lane = "Card Content": r12, white, inset 1px gray-200, pad 16 */
.dublane{border:none;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-md);background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:8px}
/* "Top Content": Radio 20 + label 500 14/18 gray-700, gap 6 */
.dublane-h{display:flex;align-items:center;gap:6px;font-size:14px;line-height:18px;font-weight:500;color:var(--ink-soft)}
.radio{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gray-300);display:grid;place-items:center;flex:none;background:var(--surface)}
.radio.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.radio.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* "Card Content" row: height 130, gap 12, centred */
.dubrow{display:flex;gap:12px;align-items:center;height:130px;overflow-x:auto;padding-bottom:2px}
/* Transcribe / Generate Card: 230×130, r8, pad 12 */
.dubcard{width:230px;height:130px;flex:none;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden;padding:12px}
.dubcard.src{background:var(--surface)}
.dubcard.tgt{background:var(--surface)}
.dubcard .dc-t{width:200px;font-size:14px;line-height:18px;color:var(--ink);max-height:54px;overflow:hidden;background:var(--surface)}
/* "Footer Content": absolute 230×56, white, inset ring, pad 12, gap 6 */
.dubcard .dc-a{position:absolute;left:0;bottom:0;width:230px;height:56px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0px -4px 40px 0px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;font-size:16px;line-height:20px;font-weight:500;color:var(--ink)}
.dubcard.src .dc-a{box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="dark"] .dubcard .dc-a{box-shadow:inset 0 0 0 1px var(--line),0px -4px 40px 0px rgba(0,0,0,.4)}
/* the 32×32 stroke icon button inside the footer */
.dubcard .dc-a .dc-ib{width:32px;height:32px;flex:none;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--muted);background:var(--surface)}
/* swap: 24×24 circle with the kit's outer ring + inner lift */
.dubswap{width:24px;height:24px;flex:none;border-radius:360px;background:var(--surface);box-shadow:0 0 0 1px var(--line),inset 0px -3px 2px 0px rgba(9,15,13,.05);display:grid;place-items:center;color:var(--muted);padding:4px}
.dubswap:hover{color:var(--ink)}

/* timeline */
.tl{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.tl-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.tl-h .tl-tc{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.tl-h .tl-tc span{color:var(--muted);font-weight:400}
.tl-h .tl-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:10px}
.tl-h .tl-r{display:flex;gap:4px}
/* lanes size the block. The inspector is taken out of flow and pinned into its
   reserved 190px track, so a tall tag list can't stretch the lane area. */
.tl-body{display:grid;grid-template-columns:223px minmax(0,1fr) 190px;align-items:stretch;position:relative}
.tl-insp{position:absolute;top:0;right:0;bottom:0;width:190px;min-height:0;overflow-y:auto}
.tl-lanes{min-height:0}
@media(max-width:1100px){.tl-body{grid-template-columns:223px minmax(0,1fr)}.tl-insp{display:none}}
.tl-labels{border-right:1px solid var(--line)}
.tl-lang{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;border-bottom:1px solid var(--line);font-size:16px;line-height:20px}
.tl-lang .tl-l{display:inline-flex;align-items:center;gap:8px;color:var(--gray-500)}
.tl-lang .tl-l.on{color:var(--ink)}
.tl-lang .tl-l .ci{width:24px;height:24px;flex:none;border-radius:360px;background:var(--surface);box-shadow:0 0 0 1px var(--line),inset 0px -3px 2px 0px rgba(9,15,13,.05);display:grid;place-items:center;padding:4px}
/* rows 64 — the slice surface needs room to read */
.tl-trk{display:flex;align-items:center;gap:8px;height:64px;padding:16px;border-bottom:1px solid var(--line)}
.tl-trk:last-child{border-bottom:none}
.tl-trk .tt{flex:1;min-width:0}
/* track name — discreet label, not a title */
.tl-trk .tt b{display:block;font-size:14px;line-height:20px;min-height:20px;letter-spacing:0;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-trk .tt span{display:block;font-size:12px;line-height:16px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-trk .ta{display:flex;gap:6px;flex:none}
.tl-trk .ta button{width:24px;height:24px;flex:none;border-radius:360px;background:var(--surface);box-shadow:0 0 0 1px var(--line),inset 0px -3px 2px 0px rgba(9,15,13,.05);display:grid;place-items:center;color:var(--muted);padding:4px;transition:color .14s}
.tl-trk .ta button:hover{color:var(--ink)}
.tl-lanes{position:relative;overflow-x:auto;border-right:1px solid var(--line)}
.tl-rule{height:40px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line);position:relative;width:calc(100% * var(--tlz,1));min-width:100%;overflow:hidden}
.tl-rule i{position:absolute;bottom:0;width:1px;height:8px;background:var(--line)}
.tl-rule span{position:absolute;bottom:12px;transform:translateX(-50%);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* zoom scales lane WIDTH off the container (min-width did nothing below container size) */
.tl-lane{height:64px;border-bottom:1px solid var(--line);position:relative;width:calc(100% * var(--tlz,1));min-width:100%;display:flex;align-items:center;padding:6px 0}
.tl-lane:last-child{border-bottom:none}
.tl-clip{position:absolute;top:6px;bottom:6px;border-radius:5px;overflow:hidden;display:flex;align-items:center}
.tl-clip canvas{width:100%;height:100%;display:block}
/* clip fills — kit swatches: Blue/100 + Blue/300 border, Badge/Pink-shade + Pink-border */
.tl-clip.blue{background:#DBEAFE;box-shadow:inset 0 0 0 1px #93C5FD}
.tl-clip.pink-l{background:#FDF2F8;box-shadow:inset 0 0 0 1px #F9A8D4}
.tl-clip.pink{background:#FBCFE8;box-shadow:inset 0 0 0 1px #F9A8D4}
/* the fat rounded end-caps the kit draws inside each clip */
.tl-clip .cap{position:absolute;top:6px;bottom:6px;width:9px;border-radius:100px}
.tl-clip .cap.l{left:4px}
.tl-clip .cap.r{right:4px}
.tl-clip.blue .cap{background:#93C5FD}
.tl-clip.pink-l .cap,.tl-clip.pink .cap{background:#F472B6}
.tl-head{position:absolute;top:0;bottom:0;width:1.5px;background:var(--ink);z-index:3;pointer-events:none}
.tl-insp{padding:16px;display:flex;flex-direction:column;gap:14px}
.tl-insp .ti-e{font-size:14px;color:var(--muted);text-align:center;padding:12px 0}
.tl-zoom{display:flex;align-items:center;gap:10px}
.tl-zoom .zt{flex:1;height:6px;border-radius:100px;background:var(--gray-200);position:relative;cursor:pointer}
.tl-zoom .zf{position:absolute;left:0;top:0;bottom:0;border-radius:100px;background:var(--primary-600)}
.tl-foot{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}
.tl-foot .tf-s{font-size:14px;color:var(--ink-soft);flex:1}

/* ==================== review inbox (clean) ==================== */
.lanestrip{display:flex;gap:8px;padding:16px 20px 0;flex:none;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-bottom:none;border-radius:var(--r-md) var(--r-md) 0 0}
.lane-pill{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:100px;font-size:14px;font-weight:500;color:var(--ink-soft);background:var(--surface);white-space:nowrap;flex:none;transition:border-color .14s,background .14s,color .14s}
.lane-pill:hover{border-color:var(--gray-300)}
.lane-pill.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.lane-pill em{font-style:normal;font-size:12px;color:var(--muted);font-weight:400}
.lane-pill.on em{color:var(--accent-2);opacity:.85}
.flag{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;flex:none}
/* all state columns share one row and divide the space, however many there are */
.board{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;padding:14px 16px 16px;min-height:0;background:var(--surface);border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--sh-1)}
/* below this the columns get too narrow to read, so they wrap and the board scrolls */
@media(max-width:1240px){.board{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));overflow-y:auto}.board .col{min-height:260px}}
@media(max-width:520px){.board{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-2);transition:border-color .15s,background .15s}
.col.dragover{border-color:var(--accent);background:var(--accent-soft)}
.col-h{display:flex;align-items:center;gap:7px;padding:11px 12px 8px;flex:none}
.col-h b{font-size:14px;line-height:18px;font-weight:600}
.col-h .n{font-size:11px;color:var(--muted);margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:1px 6px;font-variant-numeric:tabular-nums;flex:none}
.col-h b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.col-h .sq{width:8px;height:8px;border-radius:50%;flex:none}
.col-cards{padding:0 8px 8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;cursor:grab;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--gray-300);box-shadow:var(--sh-2)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.card.dragging{opacity:.4}
.card-top{display:flex;align-items:center;gap:10px}
.vdot{border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#fff}
.card-top .vm{min-width:0;flex:1 1 auto;overflow:hidden}
.card-top .vm b{display:block;font-size:14px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-top .vm span{display:block;font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gender{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex:0 0 auto}
.wavemini{margin:12px 0 10px;width:100%;display:block}
/* a playing card is shown by its green progress wave, not a second selection ring */
.card-meta{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--muted)}
.card-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card-meta .dur{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-soft)}
.tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted);background:var(--surface-2);white-space:nowrap}
.tag.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 28%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent)}
.tag.warn{color:var(--warn);border-color:rgba(253,186,116,.5);background:rgba(253,186,116,.16)}
.tag.ok{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft)}
.comment{margin-top:10px;font-size:13px;line-height:18px;color:var(--ink-soft);background:var(--surface-2);border-radius:var(--r-sm);padding:10px}
.comment .at{font-size:12px;font-weight:600;color:var(--accent-2);cursor:pointer}

/* dock */
.dock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:12px 20px;display:grid;grid-template-columns:230px auto minmax(0,1fr) auto;gap:16px;align-items:center;flex:none;min-width:0;overflow:hidden}
.dock-id{display:flex;align-items:center;gap:10px;min-width:0}
.dock-id .di{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.dock-id b{display:block;font-size:14px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-id span{font-size:12px;line-height:18px;min-height:18px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dock-transport{display:flex;align-items:center;gap:4px}
.dock-center{display:flex;align-items:center;gap:12px;min-width:0}
.dock-tc{font-size:13px;color:var(--ink-soft);flex:none;font-variant-numeric:tabular-nums;font-weight:600}
.dock-tc.dim{color:var(--faint);font-weight:400}
.dockwave{height:38px;position:relative;min-width:0;flex:1}
.dock-actions{display:flex;align-items:center;gap:6px;border-left:1px solid var(--line);padding-left:14px;min-width:0;flex:0 0 auto}
.dbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap;border:1px solid var(--line);background:var(--surface);transition:background .14s,color .14s,border-color .14s}
.dbtn kbd{font-size:10px;padding:0 4px;opacity:.8}
.dbtn:hover{background:var(--surface-2);border-color:var(--gray-300)}
.dbtn.ap{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dbtn.ap:hover{background:var(--accent-2);border-color:var(--accent-2)}
.dbtn.ap kbd{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:var(--accent-ink)}
.dbtn.ap .dot-i{display:none}
.dbtn.rj:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.dbtn.hl:hover{color:var(--warn);border-color:rgba(253,186,116,.6)}
.dbtn .dot-i{width:7px;height:7px;border-radius:50%;flex:none}
.dock-meta{font-size:12px;color:var(--muted);white-space:nowrap}
@media(max-width:1240px){.dock{grid-template-columns:auto auto minmax(0,1fr) auto}.dock-id{display:none}}
@media(max-width:1100px){.dock{padding:10px 14px;gap:10px}.dock .dbtn kbd{display:none}.dock-actions{padding-left:10px;gap:4px}.dbtn{padding:0 11px}}
@media(max-width:900px){.dock-center{display:none}.dock-actions{border-left:none;padding-left:0}}
.verdicts{display:flex;gap:8px}
.vbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:14px;font-weight:600;white-space:nowrap;transition:background .14s,border-color .14s,color .14s}
.vbtn:hover{background:var(--surface-2);border-color:var(--gray-300)}
.vbtn kbd{font-size:10px;padding:0 4px}
.vbtn.ap{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.vbtn.ap:hover{background:var(--accent-2);border-color:var(--accent-2)}
.vbtn.ap kbd{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:var(--accent-ink)}
.vbtn.rj{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.vbtn.hl{color:var(--warn);border-color:rgba(253,186,116,.55)}
.vbtn.tail{font-weight:500;color:var(--muted)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:500;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft)}
.chip.warn{color:var(--warn);border-color:rgba(253,186,116,.5);background:rgba(253,186,116,.16)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 28%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent)}
.chip.acc{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft)}

/* ==================== modal ==================== */
.overlay{position:fixed;inset:0;background:rgba(6,9,18,.4);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50}
.modal{width:496px;max-width:92vw;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-4)}
.modal h3{font-size:18px;line-height:24px;letter-spacing:-.02em;font-weight:600;margin-bottom:4px}
.modal .sub{font-size:12px;line-height:16px;color:var(--ink-soft);margin-bottom:16px}
.tagpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tagpick button{font-size:12px;font-weight:500;height:28px;padding:0 12px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);transition:background .14s,border-color .14s,color .14s}
.tagpick button:hover{border-color:var(--gray-300)}
.tagpick button.on{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.modal textarea{width:100%;min-height:84px;resize:vertical;margin-bottom:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;transition:opacity .15s}
.btn:hover{opacity:.9}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.accent:hover{background:var(--accent-2);opacity:1}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2);opacity:1}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ==================== workbench ==================== */
.wb{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0;gap:4px}
@media(max-width:1180px){.wb{grid-template-columns:minmax(0,1fr);overflow-y:auto}.wb-stage{overflow:visible}}
.wb-stage{display:flex;flex-direction:column;min-width:0;padding:20px;gap:16px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.wb-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.wb-head{display:flex;align-items:center;gap:12px}
.wb-head .info b{font-size:18px;line-height:24px;letter-spacing:-.02em;font-weight:600;display:block}
.wb-head .info span{font-size:12px;line-height:16px;color:var(--ink-soft)}
.wb-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.wb-panel h4{font-size:16px;line-height:20px;color:var(--ink);margin-bottom:14px;font-weight:600}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kv .k{font-size:12px;line-height:16px;color:var(--ink-soft)}
.kv .v{font-size:14px;line-height:18px;margin-top:3px;font-weight:600;font-variant-numeric:tabular-nums}
.kv .v.warn{color:var(--warn)}
.idrow{display:flex;flex-direction:column;gap:8px}
.idrow label{font-size:12px;line-height:16px;color:var(--ink-soft)}
.idrow select{width:100%}
.clist{display:flex;flex-direction:column;gap:8px}
.centry{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;line-height:18px}
.centry .at{font-size:12px;font-weight:600;color:var(--accent-2);cursor:pointer}
.centry .who{font-size:11px;color:var(--faint);margin-top:4px}

/* ==================== training ==================== */
.train{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.runcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-1)}
.runcard-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.runcard-h .rid{font-size:18px;line-height:24px;letter-spacing:-.02em;font-weight:600}
.runcard-h .rdesc{font-size:12px;line-height:16px;color:var(--ink-soft)}
.runcard-h .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.stat .k{font-size:12px;line-height:16px;color:var(--ink-soft)}
.stat .v{font-size:22px;line-height:28px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .v small{font-size:12px;color:var(--ink-soft);font-weight:400;letter-spacing:0}
.progress{height:6px;background:var(--surface-3);border-radius:100px;margin-top:16px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .5s var(--ease)}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.chart{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.chart h5{font-size:14px;line-height:18px;color:var(--ink-soft);font-weight:600;margin-bottom:10px}
.chart svg{width:100%;height:90px;display:block}
.gates{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.gaterow{display:grid;grid-template-columns:180px 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.gaterow:last-child{border-bottom:none}
.gaterow .gname{font-size:14px;font-weight:600}
.gaterow .gdet{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ==================== docs ==================== */
.docs{flex:1;display:grid;grid-template-columns:272px minmax(0,1fr) 216px;min-height:0;gap:4px}
@media(max-width:1280px){.docs{grid-template-columns:220px minmax(0,1fr)}.doctoc{display:none}.docbody-in{padding:28px 24px 48px}}
.doclist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:4px}
.doclist input{width:100%;margin-bottom:12px;background:var(--surface-2)}
.docitem{display:flex;gap:10px;padding:10px;border-radius:var(--r-sm);cursor:pointer;width:100%;text-align:left;align-items:flex-start;transition:background .14s}
.docitem svg{margin-top:2px;color:var(--muted)}
.docitem:hover{background:var(--surface-2)}
.docitem.on{background:var(--accent-soft)}
.docitem.on svg{color:var(--accent)}
.docitem .dm{min-width:0;display:block}
.docitem b{font-size:14px;line-height:18px;font-weight:500;display:block;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docitem.on b{color:var(--ink);font-weight:600}
.docitem .meta{font-size:11px;color:var(--faint);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.docbody{overflow-y:auto;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.docbody-in{max-width:740px;margin:0 auto;padding:36px 44px 60px}
.dochead{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:26px}
.dochead .dpath{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dochead .dpath .sep{color:var(--faint)}
.dochead .dmeta{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.prose{font-size:16px;line-height:24px}
.prose h1{font-size:32px;line-height:40px;letter-spacing:-.02em;margin-bottom:16px;font-weight:700}
.prose h2{font-size:18px;line-height:24px;margin:30px 0 10px;letter-spacing:-.02em;font-weight:600}
.prose p{color:var(--ink-soft);margin-bottom:13px;text-wrap:pretty}
.prose ul{margin:0 0 13px 18px;color:var(--ink-soft)}
.prose li{margin-bottom:5px}
.prose code{font-family:var(--mono);font-size:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1.5px 5px}
.prose pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;font-family:var(--mono);font-size:13px;color:var(--ink-soft);overflow-x:auto;margin-bottom:12px;line-height:20px}
.prose table{border-collapse:collapse;font-size:14px;margin-bottom:12px;width:100%}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:8px 12px;text-align:left}
.prose th{color:var(--ink-soft);font-size:12px;font-weight:600;border-bottom:1px solid var(--gray-300)}
.doctoc{padding:38px 20px 20px 8px;overflow-y:auto}
.doctoc h4{font-size:12px;color:var(--muted);margin-bottom:10px;font-weight:600}
.doctoc a{display:block;font-size:14px;color:var(--muted);padding:5px 12px;border-left:2px solid var(--line);cursor:pointer;transition:color .14s,border-color .14s}
.doctoc a:hover{color:var(--ink);border-left-color:var(--accent)}
.doctoc .bl{font-size:12px;border-left:none;padding-left:0;color:var(--accent-2);font-weight:600}

/* ==================== queue ==================== */
.queue{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 392px;min-height:0;gap:4px}
@media(max-width:1180px){.queue{grid-template-columns:minmax(0,1fr) 300px}}
.qlist{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.qitem{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.qitem-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qitem-h .qid{font-size:11px;color:var(--faint);font-family:var(--mono)}
.qitem-h .qa{font-size:14px;line-height:18px;font-weight:600}
.qitem p{font-size:13px;line-height:20px;color:var(--ink-soft);margin-top:9px}
.qmeta{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.qbrief{background:var(--surface);border:1px solid var(--line)!important;border-radius:var(--r-md);box-shadow:var(--sh-1);overflow-y:auto;padding:20px}
.qbrief h4{font-size:16px;line-height:20px;color:var(--ink);margin-bottom:12px;font-weight:600}
.qbrief pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;font-family:var(--mono);font-size:12px;line-height:20px;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word}
.jsonl{margin-top:16px}
.jsonl pre{max-height:280px;overflow-y:auto}

/* ==================== scroll edge fades ==================== */
.fade-y,.fade-x{--f-a:0px;--f-b:0px}
.fade-y{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--f-a),#000 calc(100% - var(--f-b)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--f-a),#000 calc(100% - var(--f-b)),transparent 100%)}
.fade-x{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--f-a),#000 calc(100% - var(--f-b)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--f-a),#000 calc(100% - var(--f-b)),transparent 100%)}
/* scrollbars stay out of the way — the fade is the affordance */
.fade-y,.fade-x{scrollbar-width:thin}
.fade-y::-webkit-scrollbar,.fade-x::-webkit-scrollbar{width:6px;height:6px}

/* ==================== human review ==================== */
.bigwave.selecting canvas{cursor:crosshair}
.wave-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--ink-soft);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);border-radius:100px;padding:6px 14px;pointer-events:none}
.markbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--r-sm);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);flex-wrap:wrap}
.markbar .mb-r{font-size:14px;line-height:18px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.markbar .mb-r em{font-style:normal;font-weight:400;color:var(--ink-soft)}
.mb-tags{display:flex;gap:6px}
.mb-tags.wrap{flex-wrap:wrap}
.tagchip{height:26px;padding:0 10px;border-radius:6px;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-soft);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;transition:color .14s,box-shadow .14s}
.tagchip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--gray-300)}
.tagchip.on{color:var(--accent-2);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.btn-line.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--accent-2)}
.ibtn.on{color:var(--accent-2);background:var(--accent-soft)}
/* marks echoed on the overview strip */
.ov-mark{position:absolute;top:0;bottom:0;background:rgba(244,114,182,.18);box-shadow:inset 1px 0 0 #F472B6,inset -1px 0 0 #F472B6;pointer-events:none}
/* selected + sliced clips */
.tl-clip.sel{box-shadow:inset 0 0 0 1px #F472B6,0 0 0 2px #F9A8D4}
/* slices move, never resize — their bounds are part of a recorded review */
.tl-clip{touch-action:none}
.tl-clip.cut{cursor:grab}
.tl-clip.cut:active{cursor:grabbing}
/* inner layers must not swallow the pointer, or the drag never starts */
.tl-clip>canvas,.tl-clip>.cap{pointer-events:none}
/* join badge between two flush slices */
.tl-join{position:absolute;top:-9px;transform:translateX(-50%);width:38px;height:26px;border-radius:100px;display:grid;place-items:center;
  background:#EFF6FF;color:#1D4ED8;box-shadow:0 0 0 1.5px #93C5FD;z-index:6;transition:background .14s var(--ease),transform .14s var(--ease)}
.tl-join:hover{background:#DBEAFE;transform:translateX(-50%) scale(1.06)}
.tl-trk.on{background:var(--accent-soft)}
.tl-trk{cursor:pointer}
.tl-empty{padding:16px;font-size:12px;line-height:18px;color:var(--ink-soft)}
.tl-empty b{font-weight:600;color:var(--ink)}
.tl-scope{position:absolute;top:40px;bottom:0;background:rgba(27,171,68,.10);box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 var(--accent);pointer-events:none;z-index:1}
.tl-insp .ti-h{display:flex;flex-direction:column;gap:2px}
.tl-insp .ti-h b{font-size:16px;line-height:20px;font-weight:600}
.tl-insp .ti-h span{font-size:12px;line-height:16px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tl-insp .ti-sec{display:flex;flex-direction:column;gap:8px}
.tl-insp .ti-sec label{font-size:12px;line-height:16px;color:var(--ink-soft)}
.tl-insp textarea{width:100%;min-height:76px;resize:vertical;font-size:14px;line-height:18px}
.tl-notes{border-top:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px}
.note-row{display:grid;grid-template-columns:150px auto minmax(0,1fr);gap:12px;align-items:center;font-size:14px;line-height:18px}
.note-row .nr-t{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.note-row .nr-c{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-row .nr-c em{color:var(--faint);font-style:italic}

/* ==================== misc ==================== */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--gray-950);border:1px solid var(--gray-950);color:#fff;font-size:14px;padding:12px 20px;border-radius:100px;box-shadow:var(--sh-3);z-index:60;animation:toastin .25s var(--ease)}
:root[data-theme="dark"] .toast{background:var(--dark-mood-button-color);border-color:var(--dark-mood-button-color-2)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.empty{color:var(--faint);font-size:14px;text-align:center;padding:24px 8px}
/* Children keep their content height so the scroller actually scrolls
   instead of squeezing them to fit (a shrinkable child kills the scroll). */
.scroll{overflow-y:auto;min-height:0;flex:1;display:flex;flex-direction:column;gap:4px}
.scroll>*{flex:0 0 auto}
.pad{padding:20px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
@media(max-width:1100px){.g2{grid-template-columns:1fr}}