/* workspace-bench visualizer. Palette = the dataviz skill's validated reference values,
   shared with scripts/olens_suite/build_rollout_viewer.py so the two viewers read as one. */
:root { color-scheme: light;
  --surface:#fcfcfb; --card:#ffffff; --line:#e5e4e0; --ink:#0b0b0b; --ink-2:#52514e;
  --ink-3:#8a887f;
  --olens:#2a78d6;   /* oracle lens — series 1 */
  --jlens:#eb6834;   /* J-lens — series 2 */
  --good:#008300; --bad:#c02a2a; --accent:#4a3aa7; --chance:#8a887f;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
:root[data-theme="dark"] { color-scheme: dark;
  --surface:#1a1a19; --card:#232322; --line:#3a3936; --ink:#ffffff; --ink-2:#c3c2b7;
  --ink-3:#8a887f; --olens:#3987e5; --jlens:#d95926; --good:#3fae3f; --bad:#e5675f;
  --accent:#9085e9; --chance:#8a887f; }

* { box-sizing: border-box; }
body { margin:0; background:var(--surface); color:var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font-size:19px; margin:0; letter-spacing:-.01em; }
.muted { color:var(--ink-3); }
.hidden { display:none !important; }

/* top bar */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px;
  padding:12px 22px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:baseline; gap:10px; }
.tagline { color:var(--ink-2); font-size:13px; }
.tabs { display:flex; gap:6px; margin-left:8px; }
.tab { border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  border-radius:8px; padding:6px 14px; font-size:13.5px; cursor:pointer; }
.tab.on { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.ghost { margin-left:auto; border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  border-radius:8px; padding:6px 11px; cursor:pointer; font-size:15px; }

/* checkpoint selector */
.ckpt-bar { position:sticky; top:53px; z-index:15; display:flex; align-items:center; gap:12px;
  padding:9px 22px; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ckpt-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.ckpt-chips { display:flex; gap:8px; flex-wrap:wrap; }
.ckpt { border:1px solid var(--line); background:var(--card); color:var(--ink-2); cursor:pointer;
  border-radius:99px; padding:5px 13px; font-size:13px; display:flex; align-items:center; gap:7px; }
.ckpt .swatch { width:10px; height:10px; border-radius:3px; background:var(--ink-3); }
.ckpt.on { color:var(--ink); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.ckpt.primary { border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }

.wrap { max-width:1120px; margin:0 auto; padding:22px 22px 90px; }

/* legend */
.legend { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:4px 0 14px;
  font-size:13px; color:var(--ink-2); }
.legend .key { display:inline-flex; align-items:center; gap:6px; }
.legend .box { width:12px; height:12px; border-radius:3px; }
.legend .box.olens { background:var(--olens); }
.legend .box.jlens { background:var(--jlens); }
.legend .box.chance { width:14px; height:0; border-top:2px dashed var(--chance); border-radius:0; }

/* summary chart (SVG injected) */
.chart { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 6px; }
.chart svg { width:100%; display:block; }
.bar-track { fill: color-mix(in oklab, var(--ink-3) 10%, transparent); }
.bar-olens { fill: var(--olens); }
.bar-jlens { fill: var(--jlens); }
.fam-label { fill: var(--ink); font: 600 12.5px var(--mono); }
.fam-sub { fill: var(--ink-3); font: 11px system-ui; }
.val-label { fill: var(--ink-2); font: 11px var(--mono); }
.chance-line { stroke: var(--chance); stroke-width:1.4; stroke-dasharray:4 3; }
.chance-tag { fill: var(--ink-3); font: 10.5px var(--mono); }
.grid-line { stroke: var(--line); stroke-width:1; }
.grid-tick { fill: var(--ink-3); font: 10px var(--mono); }
.fam-sep { stroke: var(--line); stroke-width:1; }
.foot { color:var(--ink-3); font-size:12.5px; margin-top:14px; }

/* browse controls */
.controls { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.field { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.05em; }
.field.grow { flex:1; min-width:200px; }
.field select, .field input { border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:8px; padding:7px 11px; font-size:13.5px; text-transform:none; letter-spacing:0; }
.chips { display:flex; gap:6px; }
.chip { border:1px solid var(--line); background:var(--card); color:var(--ink-2); cursor:pointer;
  border-radius:99px; padding:6px 13px; font-size:13px; text-transform:none; letter-spacing:0; }
.chip.on { background:var(--ink); color:var(--surface); border-color:var(--ink); }

.browse-head { display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
.count { font-weight:650; font-size:14px; }

/* question cards */
.qcard { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; margin:11px 0; }
.qhead { display:flex; align-items:center; gap:9px; flex-wrap:wrap; cursor:pointer; }
.qname { font:600 13px var(--mono); }
.badge { font-size:11px; padding:2px 9px; border-radius:99px; border:1px solid var(--line);
  color:var(--ink-2); white-space:nowrap; }
.badge.pass { color:var(--good); border-color:var(--good);
  background:color-mix(in oklab, var(--good) 8%, transparent); }
.badge.fail { color:var(--bad); border-color:var(--bad);
  background:color-mix(in oklab, var(--bad) 7%, transparent); }
.badge.na { color:var(--ink-3); }
.badge.layer { color:var(--ink-3); }
.qcaret { margin-left:auto; color:var(--ink-3); font-size:12px; }
.qprompt { font:12.5px var(--mono); color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:9px 0 4px;
  white-space:pre-wrap; max-height:150px; overflow:auto; }
.qtargets { font-size:12.5px; color:var(--ink-2); margin:5px 0; }
.qtargets b { color:var(--ink); }
.qbody { margin-top:10px; }
.lens-block { margin-top:10px; }
.lens-title { font:600 12px var(--mono); color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.lens-title .dot { width:9px; height:9px; border-radius:3px; }
.lens-title .dot.olens { background:var(--olens); } .lens-title .dot.jlens { background:var(--jlens); }
.layer-row { display:grid; grid-template-columns:58px 1fr; gap:10px; margin:6px 0;
  align-items:start; }
.layer-tag { font:11.5px var(--mono); color:var(--ink-3); padding-top:3px; }
.layer-tag.hit { color:var(--good); font-weight:650; }
.samples { display:flex; flex-direction:column; gap:4px; }
.s { font:12px var(--mono); padding:4px 8px; border-left:2px solid var(--line);
  background:var(--surface); border-radius:0 6px 6px 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.s.hit { border-left-color:var(--good);
  background:color-mix(in oklab, var(--good) 6%, var(--surface)); }
.s .pos { color:var(--ink-3); margin-right:6px; }
.tokens { display:flex; flex-wrap:wrap; gap:4px; }
.tok { font:11.5px var(--mono); padding:2px 7px; border-radius:6px; border:1px solid var(--line);
  color:var(--ink-2); background:var(--surface); }
.tok.hit { color:var(--good); border-color:var(--good);
  background:color-mix(in oklab, var(--good) 9%, var(--surface)); }
.empty { color:var(--ink-3); padding:40px 0; text-align:center; }
.err { color:var(--bad); padding:20px; }