/* Hallmark · macrostructure: Workbench (side-rail console) · tone: utilitarian · anchor hue: cobalt
 * theme: custom light, blocky/sharp · paper oklch(97.5% 0.008 95) · accent oklch(50% 0.2 262)
 * display IBM Plex Sans 600 + mono IBM Plex Mono · axes: light / grotesk-sans / cool
 */
:root {
  /* surfaces */
  --paper: oklch(97.5% 0.008 95);
  --paper-2: oklch(94.5% 0.01 95);
  --panel: oklch(100% 0 0);
  /* ink */
  --ink: oklch(20% 0.02 265);
  --ink-2: oklch(45% 0.02 265);
  --rule: oklch(20% 0.02 265);
  --line: oklch(88% 0.01 95);
  --line-strong: oklch(72% 0.012 95);
  /* accent + status */
  --accent: oklch(50% 0.2 262);
  --accent-hover: oklch(44% 0.2 262);
  --accent-soft: oklch(94% 0.04 262);
  --on-accent: oklch(100% 0 0);
  --good: oklch(45% 0.13 155);
  --good-soft: oklch(94% 0.06 155);
  --warn: oklch(48% 0.12 70);
  --warn-soft: oklch(95% 0.08 90);
  --bad: oklch(50% 0.2 27);
  --bad-soft: oklch(94% 0.04 27);
  --scrim: oklch(20% 0.02 265 / 0.3);
  /* type */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* space */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
  --border: 1px solid var(--rule);
  --shadow: 3px 3px 0 var(--rule);
  --shadow-sm: 1px 1px 0 var(--rule);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 14px;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--space-md); line-height: 1.15; }
h2 { font-size: 12px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--space-md); }
h3 { font-size: 12px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin: var(--space-lg) 0 var(--space-sm); }
.muted { color: var(--ink-2); } .error { color: var(--bad); min-height: 1em; }
a { color: var(--accent); }
code { font-family: var(--font-mono); font-size: 12px; background: var(--paper-2); border: 1px solid var(--line); padding: 1px 5px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* login */
.login { display: grid; place-items: center; min-height: 100vh; padding: var(--space-md); }
.login .card { width: min(360px, 100%); display: grid; gap: var(--space-sm); box-shadow: var(--shadow); padding: var(--space-lg); }
.login h1 { margin-bottom: 0; }

/* shell */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--panel); border-right: var(--border); padding: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 18px 16px; border-bottom: var(--border); }
.sidebar .brand::before { content: ""; width: 18px; height: 18px; background: var(--accent); border: 1px solid var(--rule); box-shadow: 3px 3px 0 var(--rule); flex: none; }
.sidebar a { padding: 12px 16px; color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; transition: background 120ms var(--ease-out); }
.sidebar a:hover { background: var(--paper-2); }
.sidebar a.active { background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
.sidebar-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: var(--border); background: var(--paper-2); }
main { padding: var(--space-lg) var(--space-xl) var(--space-xl); max-width: 1320px; width: 100%; min-width: 0; }

/* blocks */
.card { background: var(--panel); border: var(--border); padding: var(--space-md); min-width: 0; }
.grid { display: grid; gap: var(--space-md); }
.grid > * { min-width: 0; }
.studio-grid { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* KPI strip: tiles share collapsed 2px rules */
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; padding: 0 1px 1px 0; }
.kpis .card.kpi { margin: 0 -1px -1px 0; padding: 14px 16px 16px; }
.kpi .label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.kpi .value { font-size: 28px; font-weight: 600; margin-top: 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .sub { color: var(--ink-2); font-size: 12px; margin-top: 4px; min-height: 1.45em; }
.page-head { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; padding-bottom: var(--space-md); margin-bottom: var(--space-lg); border-bottom: var(--border); }
.page-head h1 { margin: 0; flex: 1; }
.mt { margin-top: var(--space-md); }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: var(--border); }
  .sidebar .brand { width: 100%; }
  .sidebar a { flex: 1 1 auto; border-left: 0; border-bottom: 3px solid transparent; text-align: center; padding: 10px 12px; white-space: nowrap; }
  .sidebar a.active { border-bottom-color: var(--accent); }
  .sidebar-foot { width: 100%; margin-top: 0; }
  main { padding: var(--space-md); }
  .two, .half, .studio-grid { grid-template-columns: minmax(0, 1fr); }
}

/* tables */
.card:has(> table:first-child) { padding: 0; overflow-x: auto; }
.card > .toolbar { padding: 0 var(--space-md) var(--space-sm); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); background: var(--paper-2); border-bottom: var(--border); white-space: nowrap; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--accent-soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12.5px; }
td .badge { white-space: nowrap; }

/* forms */
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 0; padding: 8px 10px; width: 100%; transition: border-color 120ms var(--ease-out); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--rule); outline: 2px solid var(--accent-soft); outline-offset: 0; }
textarea { min-height: 90px; resize: vertical; font-family: var(--font-mono); font-size: 12.5px; }
textarea.tall { min-height: 420px; }
label { display: grid; gap: 5px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); font-weight: 500; }
label input, label select, label textarea { text-transform: none; letter-spacing: normal; font-family: var(--font-sans); }
label textarea { font-family: var(--font-mono); }
label .btn { font-family: var(--font-sans); font-size: 14px; text-transform: none; letter-spacing: normal; color: var(--ink); display: inline-block; text-align: center; }
label.check { display: flex; gap: 8px; align-items: center; color: var(--ink); text-transform: none; letter-spacing: normal; font-family: var(--font-sans); font-size: 14px; }
label.check input { width: auto; }
.row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .row > * { flex: 1; min-width: 140px; }
.row > .shrink { flex: 0 0 auto; min-width: 0; }
button, .btn { font: inherit; font-weight: 500; background: var(--accent); color: var(--on-accent); border: 1px solid var(--rule); border-radius: 0; padding: 7px 14px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: transform 100ms var(--ease-out), box-shadow 100ms var(--ease-out), background 100ms var(--ease-out); }
button:hover:not(:disabled), .btn:hover { background: var(--accent-hover); }
button:active:not(:disabled), .btn:active { transform: translate(2px, 2px); box-shadow: none; }
button.secondary, .btn.secondary { background: var(--panel); color: var(--ink); }
button.secondary:hover:not(:disabled), .btn.secondary:hover { background: var(--accent-soft); }
button.danger { background: var(--bad); }
button.link { background: none; color: var(--ink-2); border-color: transparent; box-shadow: none; padding: 4px 6px; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: var(--space-md); flex-wrap: wrap; }
.toolbar input, .toolbar select, .page-head select, .page-head input { width: auto; }
.toolbar input[type="file"] { display: none; }
input[type="range"] { padding: 0; border: 0; accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }

/* badges: square tags */
.badge { display: inline-block; padding: 1px 7px; border: 1px solid var(--accent); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.badge.yes { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.badge.no, .badge.do_not_call { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.badge.maybe, .badge.callback { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
#live-badge { background: var(--panel); color: var(--ink); border-color: var(--rule); }
#live-badge::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--good); margin-right: 6px; vertical-align: 1px; }

/* drawer */
.drawer { position: fixed; inset: 0; background: var(--scrim); display: flex; justify-content: flex-end; z-index: 10; }
.drawer-panel { width: min(720px, 100%); background: var(--panel); height: 100%; overflow: auto; padding: var(--space-lg); border-left: var(--border); box-shadow: -3px 0 0 var(--rule); }
.drawer .close { float: right; }
.transcript { display: grid; gap: var(--space-sm); }
.bubble { padding: 8px 12px; max-width: 85%; line-height: 1.45; border: 1px solid var(--rule); }
.bubble.assistant { background: var(--accent-soft); } .bubble.user { background: var(--paper); justify-self: end; }
.bubble small { display: block; color: var(--ink-2); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }

/* bars */
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: minmax(70px, 100px) minmax(40px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.bar .track { background: var(--paper-2); border: 1px solid var(--rule); height: 16px; }
.bar .fill { background: var(--accent); height: 100%; border-right: 1px solid var(--rule); }
pre { white-space: pre-wrap; background: var(--paper-2); border: 1px solid var(--line-strong); padding: 12px; font-family: var(--font-mono); font-size: 12.5px; max-height: 480px; overflow: auto; }

/* toast: light, bordered */
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel); color: var(--ink); padding: 12px 16px; border: var(--border); border-left: 5px solid var(--accent); box-shadow: var(--shadow); z-index: 20; max-width: min(420px, calc(100vw - 40px)); font-weight: 500; }
.list-editor { display: grid; gap: 6px; } .list-editor .item { display: flex; gap: 6px; } .list-editor .item input { flex: 1; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* tabs */
.tabs { display: flex; gap: 0; border-bottom: var(--border); margin-bottom: var(--space-md); }
.tab { background: var(--paper-2); color: var(--ink-2); border: 1px solid transparent; border-bottom: 0; box-shadow: none; padding: 8px 18px; margin-bottom: -1px; }
.tab:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); }
.tab.active { background: var(--panel); color: var(--ink); border-color: var(--rule); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }
.tab:active:not(:disabled) { transform: none; }

/* choices and version list */
.choice { border: 1px solid var(--line-strong); padding: var(--space-md); cursor: pointer; background: var(--panel); transition: border-color 120ms var(--ease-out); }
.choice:hover { border-color: var(--rule); }
.choice.selected { border-color: var(--rule); background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.choice .warn-note { color: var(--warn); font-size: 12px; margin-top: 6px; }
.version { padding: 10px 12px; cursor: pointer; border: 1px solid transparent; border-bottom-color: var(--line); }
.version:hover { background: var(--paper-2); }
.version.selected { background: var(--accent-soft); border-color: var(--rule); }
.version .meta { font-size: 12px; color: var(--ink-2); }
#p-versions { display: grid; }

/* call timeline (drawer tab) */
.drawer-panel.wide { width: min(1180px, 100%); }
.tl-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tl-kpis .kpi .value { font-size: 21px; }
.kpi .value.good { color: var(--good); } .kpi .value.warn { color: var(--warn); } .kpi .value.bad { color: var(--bad); }
.num.good { color: var(--good); } .num.warn { color: var(--warn); } .num.bad { color: var(--bad); }
.tl-steps { display: flex; flex-wrap: wrap; border: var(--border); background: var(--panel); }
.tl-step { display: grid; gap: 1px; padding: 8px 12px; border-right: 1px solid var(--line); min-width: 110px; flex: 1 1 110px; }
.tl-step-name { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.tl-step-t { font-size: 14px; font-weight: 600; text-align: left; }
.tl-delta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.tl-head { display: flex; align-items: end; gap: var(--space-sm); margin-top: var(--space-lg); }
.tl-head h3 { margin: 0 auto 0 0; }
.tl-zoom { display: flex; } .tl-zoom button { padding: 3px 10px; box-shadow: none; } .tl-zoom button + button { border-left: 0; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: var(--space-sm) 0; font-size: 12px; color: var(--ink-2); }
.tl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tl-legend i { width: 14px; height: 10px; border: 1px solid var(--rule); display: inline-block; }

/* lane colours */
.tl-legend .caller, .tl-bar.caller { background: oklch(72% 0.13 155); }
.tl-legend .agent, .tl-bar.agent { background: oklch(66% 0.14 262); }
.tl-legend .overlap { background: repeating-linear-gradient(45deg, oklch(60% 0.2 27 / 0.55) 0 3px, transparent 3px 6px); }
.tl-legend .gap { background: oklch(93% 0.07 90); }
.tl-legend .ep, .tl-stack .ep, .tl-bar.resp .ep, .tl-wf .ep { background: oklch(80% 0.01 265); }
.tl-legend .llm, .tl-stack .llm, .tl-bar.resp .llm, .tl-wf .llm, .tl-bar.llm { background: oklch(70% 0.13 305); }
.tl-legend .tts, .tl-stack .tts, .tl-bar.resp .tts, .tl-wf .tts, .tl-bar.tts { background: oklch(78% 0.12 65); }
.tl-legend .stt, .tl-bar.stt { background: oklch(72% 0.1 205); }
.tl-bar.llm > i { background: oklch(52% 0.16 305); }
.tl-bar.tts > i { background: oklch(60% 0.14 55); }

/* chart */
.tl-chart { display: grid; grid-template-columns: 84px minmax(0, 1fr); border: var(--border); background: var(--panel); }
.tl-labels { border-right: var(--border); background: var(--paper-2); }
.tl-labels > div { height: 28px; padding: 0 8px; display: flex; align-items: center; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.tl-labels > div:last-child { border-bottom: 0; }
.tl-labels > .tl-axis-l { height: 22px; border-bottom: var(--border); }
.tl-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; }
.tl-canvas { position: relative; min-width: 100%; }
.tl-axis { position: relative; height: 22px; border-bottom: var(--border); }
.tl-tick { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--line-strong); padding: 3px 0 0 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.tl-row { position: relative; height: 28px; border-bottom: 1px solid var(--line); }
.tl-row:last-child { border-bottom: 0; }
.tl-bar { position: absolute; top: 6px; height: 16px; border: 1px solid var(--rule); overflow: hidden; display: flex; z-index: 1; }
.tl-bar > i { display: block; height: 100%; flex: none; }
.tl-bar.resp { cursor: pointer; top: 4px; height: 20px; border-width: 1px 1px 3px; }
.tl-bar.resp.good { border-bottom-color: var(--good); } .tl-bar.resp.warn { border-bottom-color: var(--warn); } .tl-bar.resp.bad { border-color: var(--bad); }
.tl-bar.resp:hover, .tl-bar.resp.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-bar.resp > b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--ink); }
.tl-bar.mute { background: repeating-linear-gradient(45deg, var(--paper-2) 0 4px, var(--panel) 4px 8px); border-color: var(--line-strong); font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); padding-left: 4px; align-items: center; }
.tl-mark { position: absolute; top: 4px; transform: translateX(-50%); z-index: 2; font-size: 12px; line-height: 20px; width: 16px; text-align: center; cursor: default; }
.tl-mark.int { color: var(--bad); } .tl-mark.fn { color: var(--accent); font-weight: 600; font-style: italic; } .tl-mark.err { color: var(--on-accent); background: var(--bad); font-weight: 600; } .tl-mark.speak { color: var(--ink-2); }
.tl-gap, .tl-overlap, .tl-sel { position: absolute; top: 22px; bottom: 0; }
.tl-gap { background: oklch(93% 0.07 90 / 0.8); border-left: 1px dashed var(--warn); border-right: 1px dashed var(--warn); }
.tl-table .num { white-space: nowrap; }
.tl-gap > span { position: absolute; top: 1px; background: oklch(93% 0.07 90); padding: 0 2px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--warn); white-space: nowrap; }
.tl-overlap { z-index: 3; background: repeating-linear-gradient(45deg, oklch(60% 0.2 27 / 0.45) 0 3px, transparent 3px 6px); border-left: 1px solid var(--bad); border-right: 1px solid var(--bad); }
.tl-sel { background: var(--accent-soft); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); opacity: 0.7; }
.tl-hint { font-size: 12px; margin: 6px 0 0; }

/* turn breakdown + table */
.tl-detail { margin-top: var(--space-md); box-shadow: var(--shadow); }
.tl-detail-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: var(--space-sm); }
.tl-detail-head h2 { margin: 0; }
.tl-wf { display: grid; gap: 6px; margin-bottom: var(--space-sm); }
.tl-wf-row { display: grid; grid-template-columns: 96px minmax(80px, 1fr) 70px; gap: 2px 10px; align-items: center; font-size: 13px; }
.tl-wf-row small { grid-column: 2 / -1; font-size: 11.5px; }
.tl-wf-track { position: relative; height: 14px; background: var(--paper-2); border: 1px solid var(--line-strong); }
.tl-wf-track > i { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--rule); }
.tl-table { padding: 0; overflow-x: auto; }
.tl-table table { min-width: 680px; }
.tl-table td { padding: 8px 12px; }
.tl-said { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-resp { min-width: 190px; }
.tl-resp > b { display: block; text-align: left; margin-top: 3px; }
.tl-stack { display: flex; height: 12px; border: 1px solid var(--rule); background: var(--paper-2); }
.tl-stack > i { display: block; height: 100%; }
.tl-stack > i + i { border-left: 1px solid var(--rule); }
tr.selected td { background: var(--accent-soft); }
@media (max-width: 600px) {
  .tl-chart { grid-template-columns: 62px minmax(0, 1fr); }
  .tl-labels > div { padding: 0 5px; font-size: 9.5px; }
  .tl-step { min-width: 46%; }
  .tl-wf-row { grid-template-columns: 78px minmax(60px, 1fr) 58px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }