/* ============================================================
     SIGNAL BENCH — an instrument-panel identity for composing evals.
     One bold thing: the amber threshold fader (a VU/gain control).
     Everything else stays quiet graphite + warm paper. Structural
     text (keys, thresholds, categories) is monospace because it IS
     the literal profile/CLI data, not decoration.
     ============================================================ */
  :root {
    --ink:      #14161a;   /* backdrop graphite            */
    --ink-2:    #101216;   /* deepest wells                */
    --panel:    #1b1e25;   /* lifted panels                */
    --panel-2:  #21252e;   /* nested cards                 */
    --line:     #2c313c;   /* hairline borders             */
    --line-soft:#23272f;
    --paper:    #e9e7e1;   /* primary text (warm off-white)*/
    --muted:    #8b909c;   /* secondary text               */
    --muted-2:  #5f6675;   /* faint labels                 */
    --signal:   #f4b740;   /* THE accent — live signal amber */
    --signal-2: #f6c463;
    --signal-dim: rgba(244,183,64,.13);
    --free:     #63b3a6;   /* reference-free / label-free  */
    --need:     #e0895b;   /* needs a ground-truth label   */
    --danger:   #e0605a;
    --ok:       #7fc9a0;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --r: 10px;
  }
  * { box-sizing: border-box; }
  /* The UA rule for [hidden] is display:none with no !important, so any inline
     display (several rows here are display:flex) silently outranks it. */
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background:
      radial-gradient(1200px 600px at 82% -8%, rgba(244,183,64,.05), transparent 60%),
      var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  button { font-family: inherit; cursor: pointer; }
  ::selection { background: var(--signal); color: #201700; }

  /* ---- structural labels ------------------------------------ */
  .eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .key { font-family: var(--mono); font-size: 12.5px; color: var(--signal); }

  /* ---- header ------------------------------------------------ */
  header {
    border-bottom: 1px solid var(--line);
    padding: 26px clamp(18px, 4vw, 54px) 22px;
    position: relative;
  }
  /* the "signal line" motif — a hairline that spikes once, like a trace */
  .trace {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg,
      transparent 0 12%, var(--line) 12% 46%,
      var(--signal) 46% 47%, var(--signal) 47% 48%,
      var(--line) 48% 100%);
    opacity: .8;
  }
  .head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  h1 {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 620;
    letter-spacing: -.02em;
    margin: 10px 0 6px;
    line-height: 1.02;
  }
  h1 .amp { color: var(--signal); }
  .thesis { color: var(--muted); max-width: 62ch; margin: 0; }
  .stat-row { display: flex; gap: 26px; margin-top: 4px; }
  .stat { text-align: right; }
  .stat b { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--paper); display: block; }
  .stat span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }

  /* ---- workbench layout ------------------------------------- */
  .bench {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    align-items: start;
    padding: 28px clamp(18px, 4vw, 54px) 80px;
    max-width: 1400px;
    margin: 0 auto;
  }
  @media (max-width: 940px) {
    .bench { grid-template-columns: 1fr; }
    .rack { position: static !important; }
  }

  /* ---- catalogue -------------------------------------------- */
  .cat-head { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; }
  .cat-head:first-child { margin-top: 0; }
  .cat-head h2 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
  .cat-head .idx { font-family: var(--mono); font-size: 12px; color: var(--signal); }
  .cat-head .rule { flex: 1; height: 1px; background: var(--line); }
  .cat-head .count { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }

  .metric {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: var(--r);
    padding: 15px 16px;
    margin-bottom: 10px;
    transition: border-color .16s, background .16s, box-shadow .16s;
  }
  .metric.on {
    border-color: rgba(244,183,64,.55);
    background: linear-gradient(var(--panel), var(--panel)) padding-box,
                var(--signal-dim);
    box-shadow: inset 3px 0 0 var(--signal);
  }
  .metric-top { display: flex; align-items: flex-start; gap: 12px; }
  .patch {
    flex: none; width: 26px; height: 26px; margin-top: 1px;
    border-radius: 7px; border: 1px solid var(--line);
    background: var(--panel-2); color: var(--muted);
    font-size: 16px; line-height: 1; display: grid; place-items: center;
    transition: all .16s;
  }
  .patch:hover { border-color: var(--signal); color: var(--signal); }
  .metric.on .patch { background: var(--signal); border-color: var(--signal); color: #201700; }
  .metric-body { flex: 1; min-width: 0; }
  .metric-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .metric-name b { font-size: 15px; font-weight: 600; }
  .metric-desc { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }

  .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
  .chip {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 100px; border: 1px solid var(--line);
    color: var(--muted); background: var(--ink-2);
  }
  .chip.free { color: var(--free); border-color: rgba(99,179,166,.4); }
  .chip.need { color: var(--need); border-color: rgba(224,137,91,.4); }
  .chip.multi { color: var(--signal); border-color: rgba(240,180,41,.45); }
  .chip.thr  { color: var(--muted); }
  .chip.thr b { color: var(--paper); font-weight: 600; }

  /* ---- rack (profile builder) ------------------------------- */
  .rack { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 16px; }
  .card {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 14px;
    padding: 18px;
  }
  .card > .eyebrow { display: block; margin-bottom: 12px; }

  .field { margin-bottom: 12px; }
  .field label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
  .field input[type=text], .field textarea, .rack input[type=text], .param textarea, .param input {
    width: 100%; background: var(--ink-2); color: var(--paper);
    border: 1px solid var(--line); border-radius: 8px;
    padding: 9px 11px; font-family: var(--sans); font-size: 14px;
  }
  .field textarea { resize: vertical; min-height: 46px; }
  input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

  /* Element-level so a textarea dropped outside .field/.lbl-row still reads as
     an ink well and not a raw UA box. Class-scoped rules above still win. */
  textarea {
    width: 100%; display: block; background: var(--ink-2); color: var(--paper);
    border: 1px solid var(--line); border-radius: 8px;
    padding: 9px 11px; font-family: var(--sans); font-size: 14px; line-height: 1.55;
    resize: vertical; min-height: 46px;
    transition: border-color .15s;
  }
  textarea:hover { border-color: var(--muted-2); }
  textarea:focus { border-color: var(--signal); }
  textarea::placeholder, input::placeholder { color: var(--muted-2); }
  /* Prompt bodies are the literal text sent to the model, so they get the mono face. */
  textarea.mono { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
  textarea[readonly] { color: var(--muted); border-style: dashed; }
  textarea[readonly]:hover { border-color: var(--line); }
  .slug-hint { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 4px; }
  .slug-hint b { color: var(--free); }

  .rack-list { display: flex; flex-direction: column; gap: 10px; }
  .rmod {
    border: 1px solid var(--line-soft); border-radius: 10px;
    background: var(--panel-2); padding: 12px;
  }
  .rmod-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .rmod-top .nm { font-weight: 600; font-size: 14px; }
  .rmod-top .rm { background: none; border: none; color: var(--muted-2); font-size: 15px; padding: 0 2px; }
  .rmod-top .rm:hover { color: var(--danger); }
  .rmod .key { display: block; margin: 1px 0 10px; }

  /* THE SIGNATURE: threshold fader ---------------------------- */
  .fader { margin-top: 4px; }
  .fader-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
  .fader-head span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
  .fader-head .val { font-family: var(--mono); font-size: 15px; color: var(--signal); letter-spacing: 0; }
  input[type=range] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
    background: transparent; cursor: pointer; margin: 0;
  }
  input[type=range]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 100px;
    background:
      linear-gradient(90deg, var(--signal) var(--fill,70%), #2b303b var(--fill,70%));
  }
  input[type=range]::-moz-range-track { height: 6px; border-radius: 100px; background: #2b303b; }
  input[type=range]::-moz-range-progress { height: 6px; border-radius: 100px; background: var(--signal); }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
    background: var(--paper); border: 3px solid var(--signal);
    box-shadow: 0 0 0 4px rgba(244,183,64,.14);
  }
  input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--paper); border: 3px solid var(--signal);
  }
  .ruler { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }

  .param { margin-top: 10px; }
  .param label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
  .param .help { font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }

  .empty { color: var(--muted-2); font-size: 13.5px; text-align: center; padding: 22px 8px; border: 1px dashed var(--line); border-radius: 10px; }

  /* buttons */
  .btn-row { display: flex; gap: 10px; margin-top: 4px; }
  .btn {
    border: 1px solid var(--line); background: var(--panel-2); color: var(--paper);
    padding: 10px 14px; border-radius: 9px; font-size: 14px; font-weight: 550;
    transition: all .15s; flex: 1;
  }
  .btn:hover { border-color: var(--muted); }
  .btn.primary { background: var(--signal); color: #1c1400; border-color: var(--signal); }
  .btn.primary:hover { background: var(--signal-2); }
  .btn.primary:disabled { background: #3a3a35; color: var(--muted-2); border-color: var(--line); cursor: not-allowed; }
  .btn.ghost { flex: none; }

  .run {
    margin-top: 12px; padding: 10px 12px; border-radius: 9px;
    background: var(--ink-2); border: 1px solid var(--line-soft);
    font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    overflow-x: auto; white-space: nowrap;
  }
  .run b { color: var(--free); }

  /* saved profiles */
  .saved { display: flex; flex-direction: column; gap: 8px; }
  .sprof {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line-soft); border-radius: 9px;
    background: var(--panel-2); padding: 10px 12px;
  }
  .sprof .info { flex: 1; min-width: 0; }
  .sprof .info b { font-size: 13.5px; display: block; }
  .sprof .info small { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }
  .act { background: none; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 11px; padding: 4px 9px; flex: none; }
  .act:hover { border-color: var(--signal); color: var(--signal); }
  .act.del:hover { border-color: var(--danger); color: var(--danger); }
  .saved-row { border-bottom: 1px solid var(--line-soft); }
  .saved-row:last-child { border-bottom: none; }

  /* toast */
  #toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
    background: var(--panel-2); border: 1px solid var(--line); color: var(--paper);
    padding: 11px 18px; border-radius: 10px; font-size: 13.5px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
    transition: all .25s; z-index: 50; max-width: 90vw;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #toast.err { border-color: var(--danger); }
  #toast.ok { border-color: var(--ok); }

  /* ---- deck: run & results (full-width band under the bench) - */
  .deck { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
  .deck-inner { max-width: 1400px; margin: 0 auto; padding: 32px clamp(18px, 4vw, 54px) 96px; }
  .deck-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .deck-head h2 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
  .deck-head .idx { font-family: var(--mono); font-size: 14px; color: var(--signal); }
  .deck-head .rule { flex: 1; height: 1px; background: var(--line); }
  .deck-head .count { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
  .deck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  @media (max-width: 780px) { .deck-grid { grid-template-columns: 1fr; } }

  .select {
    width: 100%; background: var(--ink-2); color: var(--paper);
    border: 1px solid var(--line); border-radius: 8px;
    padding: 9px 11px; font-family: var(--sans); font-size: 14px;
  }
  .select:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
  .mono { font-family: var(--mono); }
  .run-note { color: var(--muted-2); font-size: 12px; margin: 10px 0 0; }
  .run-note .mono { color: var(--muted); }

  /* run monitor */
  .monitor { margin-top: 15px; border-top: 1px solid var(--line-soft); padding-top: 13px; }
  .monitor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
  .pill {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted);
  }
  .pill.running { color: var(--signal); border-color: rgba(244,183,64,.5); }
  .pill.running::before { content: "●"; margin-right: 6px; animation: pulse 1.1s ease-in-out infinite; }
  .pill.done { color: var(--ok); border-color: rgba(127,201,160,.5); }
  .pill.error { color: var(--danger); border-color: rgba(224,96,90,.5); }
  @keyframes pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
  .monitor-head .meta { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
  .log {
    margin: 0; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 8px;
    padding: 11px 13px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
    color: var(--muted); max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  }

  /* results history */
  .reslist { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
  .resrow {
    display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
    border: 1px solid var(--line-soft); border-radius: 9px; background: var(--panel-2);
    padding: 10px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
  }
  .resrow:hover { border-color: var(--muted); }
  .resrow:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
  .resrow.on { border-color: rgba(244,183,64,.55); box-shadow: inset 3px 0 0 var(--signal); }
  .resrow .info { flex: 1; min-width: 0; }
  .resrow .info b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; display: block; }
  .resrow .info small { font-size: 11px; color: var(--muted-2); }
  .rchips { display: flex; gap: 5px; flex-wrap: wrap; flex: none; }
  .rchip { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); }
  .rchip.pass { color: var(--ok); border-color: rgba(127,201,160,.4); }
  .rchip.fail { color: var(--need); border-color: rgba(224,137,91,.4); }
  .rchip.err  { color: var(--danger); border-color: rgba(224,96,90,.4); }
  /* a run scored by a different judge — flagged, not failed */
  .rchip.judge { color: var(--signal); border-color: rgba(244,183,64,.45); }
  .resnote { font-size: 11.5px; line-height: 1.45; padding: 8px 11px; margin-bottom: 9px;
             border-radius: 7px; border: 1px solid var(--line); color: var(--muted); }
  .resnote.warn { color: var(--signal); border-color: rgba(244,183,64,.45);
                  background: rgba(244,183,64,.06); }

  /* scores viewer */
  .scores { margin-top: 20px; }
  .scores-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
  .scores-title { font-family: var(--mono); font-size: 13px; color: var(--paper); margin-top: 4px; }
  .scores-title small { color: var(--muted-2); }
  .failtoggle { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
  .summary-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
  .table-wrap { overflow: auto; border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 14px; }
  table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.grid th {
    position: sticky; top: 0; z-index: 1; background: var(--panel-2); text-align: left;
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted-2); padding: 9px 12px; border-bottom: 1px solid var(--line);
  }
  table.grid td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
  table.grid tr:last-child td { border-bottom: none; }
  table.grid .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
  table.grid .mkey { font-family: var(--mono); font-size: 12px; color: var(--signal); white-space: nowrap; }
  table.grid .res { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
  .res.pass { color: var(--ok); }
  .res.fail { color: var(--danger); }
  .res.err  { color: var(--need); }
  table.grid .reason { color: var(--muted); max-width: 460px; font-size: 12.5px; }
  table.grid .case { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

  /* ---- tabs / pages ----------------------------------------- */
  nav.tabs { display: flex; gap: 4px; margin-top: 18px; flex-wrap: wrap; }
  nav.tabs button {
    background: transparent; border: 1px solid transparent; color: var(--muted);
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    padding: 8px 15px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
  }
  nav.tabs button:hover { color: var(--paper); }
  nav.tabs button.on { color: var(--signal); border-bottom-color: var(--signal); background: var(--signal-dim); }
  nav.tabs button .badge {
    font-size: 10px; color: var(--muted-2); margin-left: 7px;
    padding: 1px 6px; border: 1px solid var(--line); border-radius: 20px;
  }
  nav.tabs button.on .badge { color: var(--signal); border-color: rgba(244,183,64,.4); }

  /* ---- scenario picker (simulate) --------------------------- */
  .pick { border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); padding: 8px; }
  .pick-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 7px; }
  .pick-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted-2); }
  .pick-search { flex: 1; min-width: 0; background: var(--panel); color: var(--paper);
    border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
    font-family: var(--sans); font-size: 13px; }
  .pick-bar .select { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12.5px; background: var(--panel); }
  .pick-act { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
    color: var(--muted); font-family: var(--mono); font-size: 10.5px; padding: 5px 9px; white-space: nowrap; }
  .pick-act:hover { border-color: var(--signal); color: var(--signal); }
  .pick-act.on { background: var(--signal-dim); border-color: rgba(244,183,64,.5); color: var(--signal); }

  /* ---- list filters (filters.js) — a .pick-bar with facet chips */
  .pick-bar.filt .select { flex: 0 1 auto; width: auto; }
  .filt-count { font-family: var(--mono); font-size: 10.5px; color: var(--signal); white-space: nowrap; }
  /* Two columns where there's room: the list was the bottleneck — a tall,
     dense grid shows most sets without scrolling at all. */
  .pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 5px; max-height: 44vh; overflow-y: auto; resize: vertical; padding-right: 3px; }
  .pick-list .empty { grid-column: 1 / -1; padding: 16px 8px; }
  .pick-row { display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
    border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel);
    padding: 7px 9px; transition: border-color .14s, background .14s; }
  .pick-row:hover { border-color: var(--muted-2); }
  .pick-row.on { border-color: rgba(244,183,64,.5); background: var(--signal-dim); }
  .pick-row input { margin-top: 3px; flex: none; accent-color: var(--signal); }
  .pick-txt { flex: 1; min-width: 0; }
  .pick-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
  .pick-head b { font-size: 13px; }
  .pick-head .mono { font-size: 10px; color: var(--muted-2); white-space: nowrap; }
  .pick-goal { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* ---- dataset / labeling ----------------------------------- */
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .seg button { background: transparent; border: none; color: var(--muted); font-family: var(--mono);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; }
  .seg button.on { background: var(--signal-dim); color: var(--signal); }
  .seg button:not(:last-child) { border-right: 1px solid var(--line); }
  .seg .badge { font-size: 10px; margin-left: 6px; padding: 0 5px; border-radius: 8px; border: 1px solid var(--line); }
  .ds-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .dd-labeler { display: inline-flex; align-items: center; gap: 7px; }
  .dd-labeler span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
  .dd-labeler input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
    color: var(--paper); font-family: var(--mono); font-size: 12px; padding: 5px 8px; width: 180px; }
  .caseitem .ci-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted-2); }
  .ci-badge.queued { color: var(--muted-2); }
  .ci-badge.labeled { color: var(--need); border-color: rgba(224,137,91,.4); }
  .ci-badge.frozen { color: var(--free); border-color: rgba(99,179,166,.4); }

  /* label editor */
  .lbl-group { border: 1px solid var(--line); background: var(--panel-2); border-radius: 9px; padding: 14px 15px; margin: 0 0 14px; }
  .lbl-group > .lg-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin-bottom: 12px; }
  .lbl-row { margin-bottom: 12px; }
  .lbl-row > label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
  .lbl-row textarea, .lbl-row input[type=text], .lbl-row input:not([type]) {
    width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
    color: var(--paper); font-family: var(--sans); font-size: 13px; padding: 8px 10px; resize: vertical; }
  .lbl-row textarea { min-height: 40px; }
  .lbl-row .hint { font-size: 11px; color: var(--muted-2); margin: 4px 0 0; }
  .segtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
  .segtoggle button { background: transparent; border: none; color: var(--muted); font-family: var(--mono); font-size: 11px; padding: 5px 11px; }
  .segtoggle button:not(:last-child) { border-right: 1px solid var(--line); }
  .segtoggle button.on { background: var(--signal-dim); color: var(--signal); }
  .lbl-turn { border-left: 2px solid var(--signal); padding: 2px 0 2px 14px; margin: 0 0 16px; }
  .lbl-turn .lt-said { font-size: 13.5px; margin: 2px 0 10px; }
  .lbl-turn .lt-said b { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 3px; }
  .lbl-actions { display: flex; gap: 8px; align-items: center; position: sticky; bottom: 0;
    background: linear-gradient(0deg, var(--panel) 70%, transparent); padding: 14px 0 2px; margin-top: 4px; }
  .kbd { font-family: var(--mono); font-size: 10px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
  .page { display: none; }
  .page.on { display: block; }
  main.bench.page.on { display: grid; }

  /* ---- master-detail (dataset + results cases) -------------- */
  .md { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
  @media (max-width: 860px) { .md { grid-template-columns: 1fr; } }
  .caselist { display: flex; flex-direction: column; gap: 6px; max-height: 72vh; overflow-y: auto; padding-right: 4px; }
  .caseitem {
    text-align: left; width: 100%; background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 9px; padding: 11px 13px; color: var(--paper); display: flex; flex-direction: column; gap: 5px;
    transition: border-color .15s, background .15s;
  }
  .caseitem:hover { border-color: var(--muted-2); }
  .caseitem.on { border-color: var(--signal); background: var(--signal-dim); }
  .caseitem .ci-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
  .caseitem .ci-name { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .caseitem .ci-snip { font-size: 13px; color: var(--paper); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .caseitem .ci-dots { display: flex; gap: 4px; flex-wrap: wrap; }
  .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .dot.pass { background: var(--ok); } .dot.fail { background: var(--danger); } .dot.err { background: var(--need); }
  .verdict { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
  .verdict.pass { color: var(--ok); border: 1px solid rgba(127,201,160,.4); }
  .verdict.fail { color: var(--danger); border: 1px solid rgba(224,96,90,.4); }

  .detail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-height: 200px; }
  .detail .d-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  .detail .d-name { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .detail .d-scenario { color: var(--muted); font-size: 13.5px; margin: 8px 0 16px; }
  .d-sect { margin: 18px 0 8px; }
  .d-sect .eyebrow { display: block; margin-bottom: 8px; }

  /* turn bubbles */
  .turn { border-left: 2px solid var(--line); padding: 4px 0 4px 14px; margin: 0 0 12px; }
  .turn.user { border-left-color: var(--muted-2); }
  .turn.assistant { border-left-color: var(--signal); }
  .turn .t-role { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
  .turn.assistant .t-role { color: var(--signal); }
  .turn .t-content { font-size: 14px; }
  .turn .t-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
  .tag { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); }
  .tag.rag { color: var(--free); border-color: rgba(99,179,166,.4); }
  .tag.block { color: var(--signal); border-color: rgba(244,183,64,.4); }
  .tag.tool { color: var(--need); border-color: rgba(224,137,91,.4); }

  /* playground — a scrolling transcript, and its turns as a strip */
  #pg-transcript { margin-top: 14px; max-height: 46vh; overflow-y: auto; }
  #pg-transcript:empty { display: none; }
  .pg-turns { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0; }
  .pg-turns:empty { display: none; }
  .pg-turns .caseitem { flex: 0 0 auto; min-width: 118px; }

  /* expandable chunk / tool payloads */
  .disc { margin-top: 8px; }
  .disc > summary { cursor: pointer; font-family: var(--mono); font-size: 11px; color: var(--muted); list-style: none; }
  .disc > summary::-webkit-details-marker { display: none; }
  .disc > summary::before { content: "▸ "; color: var(--muted-2); }
  .disc[open] > summary::before { content: "▾ "; }
  .chunk { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 8px 11px; margin-top: 6px; font-size: 13px; }
  .chunk .c-score { font-family: var(--mono); font-size: 10.5px; color: var(--signal); margin-right: 8px; }
  pre.payload { background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 10px 12px; margin: 6px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

  /* metric verdict cards in the detail */
  .mverdict { border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; margin-bottom: 8px; }
  .mverdict .mv-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
  .mverdict .mv-name { font-family: var(--mono); font-size: 12.5px; color: var(--signal); }
  .mverdict .mv-num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .mverdict .mv-reason { color: var(--muted); font-size: 13px; margin-top: 7px; }
  .meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12.5px; }
  .meta-grid .mk { font-family: var(--mono); font-size: 11px; color: var(--muted-2); white-space: nowrap; }
  .meta-grid .mv { color: var(--muted); font-family: var(--mono); font-size: 11.5px; word-break: break-all; }

  /* trace waterfall — one row per recorded stage, all on a shared time window */
  .wf { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 14px; }
  .wf-row { display: grid; grid-template-columns: 150px 1fr 74px; gap: 10px; align-items: center; }
  .wf-label { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
  .wf-label .wf-name { font-family: var(--mono); font-size: 11.5px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wf-label .wf-kind { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
  .wf-track { position: relative; height: 20px; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 5px; }
  .wf-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--muted-2); min-width: 2px; }
  .wf-bar.prep { background: #485061; }
  .wf-bar.retrieval { background: var(--free); }
  .wf-bar.generate { background: var(--signal); }
  .wf-bar.tool { background: var(--need); }
  .wf-bar.asr, .wf-bar.playback { background: #3f4756; }
  .wf-bar.block { background: var(--free); opacity: .7; }
  .wf-bar.qualified { opacity: .55; border: 1px dashed var(--muted-2); }
  .wf-bar.unmeasured {
    background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px);
    border: 1px dashed var(--line);
  }
  .wf-ttft { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .75; }
  .wf-marker { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--paper); }
  .wf-marker.tts { background: var(--signal-2); }
  .wf-ms { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: right; }
  .wf-ms.faint { color: var(--muted-2); font-size: 9.5px; }
  .tr-note { font-size: 12.5px; color: var(--muted-2); border-left: 2px solid var(--line); padding-left: 10px; margin: 2px 0 14px; }

  /* component network — columns of components, edges weighted by turn volume */
  .netwrap { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 8px 4px; overflow-x: auto; }
  .netsvg { display: block; width: 100%; height: auto; }
  .netcolhead { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; fill: var(--muted-2); }
  .netedge { fill: none; stroke: var(--line); opacity: .85; }
  .netedge.retrieval { stroke: var(--free); }
  .netedge.generate { stroke: var(--signal); opacity: .55; }
  .netedge.tool { stroke: var(--need); }
  .netedge.served { stroke: #5c6b78; }
  .netedge.speech { stroke: #7d8a9c; opacity: .6; }
  .netnode rect { fill: var(--panel-2); stroke: var(--line); }
  .netnode.company rect { stroke: var(--muted-2); }
  .netnode.speech_in rect, .netnode.speech_out rect { stroke: rgba(125,138,156,.6); }
  .netnode.kb rect { stroke: rgba(99,179,166,.55); }
  .netnode.llm rect { stroke: rgba(244,183,64,.55); }
  .netnode.served rect { stroke: rgba(99,179,166,.3); }
  .netnode.tool rect { stroke: rgba(224,137,91,.55); }
  .netnode.bad rect { stroke: var(--danger); }
  .netnode .netlabel { font-family: var(--mono); font-size: 11.5px; fill: var(--paper); }
  .netnode .netsub { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }
  .netlegend { margin-top: 14px; }

  .tk-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--signal); margin: 24px 0 10px; }
  .tk-summary { display: flex; gap: 10px; flex-wrap: wrap; }
  .tk-stat { flex: 1 1 130px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 10px 12px; }
  .tk-stat-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
  .tk-stat-v { font-family: var(--mono); font-size: 19px; color: var(--paper); margin-top: 3px; }
  .tk-stat-s { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
  .tk-bar { display: flex; height: 26px; border-radius: 5px; overflow: hidden; background: var(--panel-2); }
  .tk-seg { height: 100%; }
  .tk-rows { margin: 12px 0 4px; }
  .tk-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; }
  .tk-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
  .tk-label { color: var(--paper); }
  .tk-on { flex: 1; font-family: var(--mono); font-size: 10px; color: var(--muted-2); padding-left: 10px; }
  .tk-num, .tk-pct { font-family: var(--mono); font-size: 12px; text-align: right; }
  .tk-num { min-width: 74px; color: var(--paper); }
  .tk-pct { min-width: 40px; color: var(--muted); }
  .tk-chars { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); min-width: 96px; text-align: right; }
  .tr-note.warn { color: var(--signal); border-left-color: rgba(244,183,64,.55); }
  .tk-growth { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 10px 12px; }
  .tk-grow-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
  .tk-grow-seq { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); min-width: 46px; }
  .tk-grow-track { flex: 1; display: flex; height: 13px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
  .tk-grow-free { font-family: var(--mono); font-size: 9.5px; color: var(--muted-2); padding-left: 6px; line-height: 13px; }
  .tk-grow-n { font-family: var(--mono); font-size: 11px; color: var(--paper); min-width: 56px; text-align: right; }

  .subcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 20px; }

  /* ---- modal sheet ------------------------------------------- */
  /* A long form belongs on top of the page it was opened from, not appended
     under it. The amber cap is the .metric.on "live module" language. */
  dialog.sheet {
    width: min(620px, calc(100vw - 32px));
    max-height: min(86vh, 940px);
    padding: 0; border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); color: var(--paper);
    box-shadow: inset 0 2px 0 var(--signal), 0 26px 70px rgba(0,0,0,.6);
    display: flex; flex-direction: column; overflow: hidden;
  }
  dialog.sheet:not([open]) { display: none; }
  dialog.sheet::backdrop { background: rgba(8,9,12,.68); }
  dialog.sheet[open] { animation: sheet-in .16s ease-out; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } }
  .sheet-head {
    display: flex; align-items: center; gap: 12px; flex: none;
    padding: 17px 18px 13px; border-bottom: 1px solid var(--line);
  }
  .sheet-head .eyebrow { flex: 1; }
  .sheet-x {
    flex: none; background: none; border: 1px solid var(--line); border-radius: 7px;
    color: var(--muted-2); font-size: 11px; line-height: 1; padding: 6px 9px;
    transition: color .15s, border-color .15s;
  }
  .sheet-x:hover { color: var(--danger); border-color: var(--danger); }
  .sheet-body { padding: 16px 18px 20px; overflow-y: auto; }
  .sheet-foot {
    flex: none; display: flex; justify-content: flex-end;
    padding: 14px 18px; border-top: 1px solid var(--line);
    background: var(--ink-2);
  }
  .sheet-foot .btn { flex: none; }
  @media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }

  /* ---- company page (company.js) ---------------------------- */
  /* .btn stretches by default, which turns a toolbar into three billboards. */
  .co-bar .btn { flex: none; }
  .co-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  @media (max-width: 900px) { .co-cols { grid-template-columns: 1fr; } }
  .co-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
  .co-stat { text-align: left; }
  .co-stat b { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--paper); display: block; }
  .co-stat.warn b { color: var(--signal); }
  .co-stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted-2); }
  .kbcard { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
    padding: 14px 16px; margin-bottom: 14px; }
  .kbcard-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
  .kbcard-top b { font-size: 14px; }
  .srcrow { display: flex; gap: 10px; align-items: baseline;
    border-top: 1px solid var(--line-soft); padding: 7px 2px; font-size: 13px; }
  .srcrow:first-of-type { border-top: none; }
  .srcrow .sr-n { font-family: var(--mono); font-size: 11px; color: var(--muted-2);
    flex: none; width: 62px; text-align: right; }
  .srcrow.empty-src .sr-n { color: var(--signal); }
  .srcrow .sr-uri { flex: 1; min-width: 0; color: var(--paper); word-break: break-all; }
  .srcrow .sr-uri .disc { margin-top: 4px; }
  /* one retrieved chunk; the cutoff line is where a call stops reading */
  .rt-hit { display: flex; gap: 10px; align-items: baseline;
    border-top: 1px solid var(--line-soft); padding: 9px 2px; }
  .rt-hit:first-of-type { border-top: none; }
  .rt-hit.cutoff { border-bottom: 1px dashed var(--signal); padding-bottom: 14px; }
  .rt-hit .rt-rank { font-family: var(--mono); font-size: 11px; color: var(--muted-2);
    flex: none; width: 92px; text-align: right; }
  .rt-hit .rt-body { flex: 1; min-width: 0; }
  /* A chunk can be a whole page of prose; cap it so a ranking stays scannable. */
  .rt-hit .rt-body .chunk { margin-top: 6px; max-height: 8em; overflow-y: auto; }
  #rt-result, #bk-result, #bk-dup-result { margin-top: 14px; }
  #rt-result:empty, #bk-result:empty, #bk-dup-result:empty { display: none; }
  /* The similarity floor: everything under this line was never scored. */
  .rt-hit.floor { border-bottom: 1px dashed var(--danger); padding-bottom: 14px; }
  .rt-hit.unscored .rt-body { opacity: .62; }
  /* Hundreds of blocks would otherwise make the page metres long and push the
     seed form out of reach; the list scrolls itself instead. */
  #blk-list { max-height: 70vh; overflow-y: auto; padding-right: 4px; }
  .page-pad { padding: 28px clamp(18px, 4vw, 54px) 80px; max-width: 1400px; margin: 0 auto; }

  /* Scraper: a page's full text and its chunks are long, so they stay folded
     until asked for — the row above them has to remain scannable. */
  .sp-fold { margin-top: 8px; }
  .sp-fold > summary { font-family: var(--mono); font-size: 11px; color: var(--muted-2);
    cursor: pointer; padding: 3px 0; }
  .sp-fold > summary:hover { color: var(--muted); }
  .sp-fold > .log, .sp-fold > div { margin-top: 6px; max-height: 22em; overflow-y: auto; }
  .qa-pair { border-top: 1px solid var(--line-soft); padding: 8px 0 2px; margin-top: 6px; }
  .qa-pair .qa-q { font-size: 13px; color: var(--paper); }
  .qa-pair .qa-a { font-size: 13px; color: var(--muted); margin-top: 3px; }

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