/* Layout concept: a quiet graphite trading-desk console. UI chrome stays monochrome so
   colour is reserved for data: three behaviour types, buyer vs seller, accepted vs rejected. */
:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --surface: #fcfcfb;
  --surface-2: #eceef1;
  --ink: #111318;
  --ink-2: #4c5059;
  --muted: #80848c;
  --line: #e0e2e6;
  --line-strong: #c4c7cd;
  --focus: #2a78d6;

  /* data colours (validated: all-pairs CVD ΔE ≥ 9 light & dark) */
  --c-con: #2a78d6;
  --c-neu: #1baf7a;
  --c-agg: #eb6834;
  --c-buyer: #4a3aa7;
  --c-seller: #e87ba4;
  --c-true: #111318;
  --ok: #0ca30c;
  --bad: #d03b3b;
  --warn: #fab219;
  --overlap: #8f8a7e;
  --accent-data: #2a78d6;
  --seq-lo: #eef3fa;
  --seq-hi: #184f95;
  --cell-on-high: #ffffff;
  --s1: #4a3aa7; --s2: #eb6834; --s3: #1baf7a; --s4: #2a78d6;

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1012; --surface: #1a1a19; --surface-2: #232422; --ink: #f2f2ef; --ink-2: #c3c2b7; --muted: #8e8c85;
    --line: #2c2c2a; --line-strong: #43433f; --focus: #6da7ec;
    --c-con: #3987e5; --c-neu: #199e70; --c-agg: #d95926; --c-buyer: #9085e9; --c-seller: #d55181; --c-true: #f2f2ef;
    --overlap: #a19d92; --accent-data: #3987e5; --seq-lo: #1f2329; --seq-hi: #86b6ef; --cell-on-high: #0f1012;
    --s1: #9085e9; --s2: #d95926; --s3: #199e70; --s4: #3987e5;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1012; --surface: #1a1a19; --surface-2: #232422; --ink: #f2f2ef; --ink-2: #c3c2b7; --muted: #8e8c85;
  --line: #2c2c2a; --line-strong: #43433f; --focus: #6da7ec;
  --c-con: #3987e5; --c-neu: #199e70; --c-agg: #d95926; --c-buyer: #9085e9; --c-seller: #d55181; --c-true: #f2f2ef;
  --overlap: #a19d92; --accent-data: #3987e5; --seq-lo: #1f2329; --seq-hi: #86b6ef; --cell-on-high: #0f1012;
    --s1: #9085e9; --s2: #d95926; --s3: #199e70; --s4: #3987e5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.num, td.num, .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 12px; }

/* ---------------------------------------------------------------- header ---- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1360px; margin: 0 auto; padding: 10px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand h1 { font-size: 20px; font-weight: 750; font-stretch: 112%; letter-spacing: -0.02em; }
.brand .formula { font-family: var(--font-data); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .brand .formula { display: none; } .run-controls { margin-left: 0; } }
.run-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.clock { font-family: var(--font-data); font-size: 12px; color: var(--ink-2); padding: 0 6px; white-space: nowrap; }
.clock b { color: var(--ink); font-weight: 600; }

.tabs { max-width: 1360px; margin: 0 auto; padding: 0 16px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tab {
  background: none; border: 0; padding: 9px 12px 10px; cursor: pointer; color: var(--ink-2);
  border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* --------------------------------------------------------------- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  padding: 6px 11px; border-radius: var(--radius); cursor: pointer; font-weight: 500; font-size: 13px;
  transition: background .12s, border-color .12s;
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { opacity: .88; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: default; }
.btn .k { font-family: var(--font-data); font-size: 11px; color: var(--muted); }
.btn.primary .k { color: color-mix(in oklab, var(--bg) 70%, transparent); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 5px 10px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

select, input[type="number"], input[type="text"], textarea {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 5px 8px; min-width: 0;
}
input[type="number"] { width: 84px; font-family: var(--font-data); font-size: 12.5px; }
input[type="range"] { accent-color: var(--ink); }
label.field { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); }
label.field > span { font-weight: 500; }

/* ---------------------------------------------------------------- layout ---- */
main { max-width: 1360px; margin: 0 auto; padding-block: 18px 60px; padding-inline: 16px; }
.view { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.cols-side { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
@media (max-width: 1080px) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-main, .cols-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px 16px; min-width: 0;
}
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.panel-head h2, .panel-head h3 { font-size: 15px; font-weight: 650; }
.panel-head .id { font-family: var(--font-data); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.panel-head .sub { color: var(--muted); font-size: 12.5px; flex-basis: 100%; }
.panel-head .tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-body); font-weight: 600; }

/* ---------------------------------------------------------- market state ---- */
.state-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.state-strip .cell { padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0; }
.state-strip .cell:last-child { border-right: 0; }
.state-strip .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.state-strip .value { font-family: var(--font-display); font-size: 26px; font-weight: 650; font-stretch: 105%; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.state-strip .note { font-size: 12px; color: var(--ink-2); font-family: var(--font-data); }
@media (max-width: 1080px) { .state-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .state-strip .cell:nth-child(3n) { border-right: 0; } .state-strip .cell:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .state-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .state-strip .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .state-strip .cell:nth-child(2n) { border-right: 0; } }
.icon-btn { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--ink-2); white-space: nowrap; }
.chip.up::before { content: "▲"; font-size: 8px; color: var(--ok); }
.chip.down::before { content: "▼"; font-size: 8px; color: var(--bad); }
.chip.flat::before { content: "●"; font-size: 7px; color: var(--muted); }
.chip.ok { border-color: color-mix(in oklab, var(--ok) 50%, var(--line)); }
.chip.ok::before { content: "✓"; color: var(--ok); }
.chip.no { border-color: color-mix(in oklab, var(--bad) 50%, var(--line)); }
.chip.no::before { content: "✕"; color: var(--bad); }
.type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sw); margin-right: 6px; vertical-align: 0; flex: none; }
.tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 6px; white-space: nowrap; }

/* ---------------------------------------------------------------- tables ---- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; letter-spacing: .01em; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th.num, td.num { text-align: right; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
tr.selected td { background: color-mix(in oklab, var(--focus) 12%, var(--surface)); }
td .type-dot { margin-right: 6px; }

/* ----------------------------------------------------------------- charts ---- */
.chart { position: relative; min-width: 0; }
.chart-svg { display: block; overflow: visible; }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .baseline { stroke: var(--line-strong); stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font: 11px var(--font-data); }
.chart-svg .tick.muted { font-size: 10.5px; }
.chart-svg .axis-label { fill: var(--ink-2); font: 500 11.5px var(--font-body); }
.chart-svg .series-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series-line.dashed { stroke-dasharray: 5 4; opacity: .8; }
.chart-svg .band { opacity: .13; }
.chart-svg .density-fill { opacity: .10; }
.chart-svg .end-dot, .chart-svg .dot.ringed { stroke: var(--surface); stroke-width: 2; }
.chart-svg .direct-label { fill: var(--ink-2); font: 500 11px var(--font-data); }
.chart-svg .ref-line { stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 3 3; }
.chart-svg .ref-label { fill: var(--ink-2); font: 500 11px var(--font-body); }
.chart-svg .range-band { fill: var(--warn); opacity: .12; }
.chart-svg .crosshair { stroke: var(--ink-2); stroke-width: 1; }
.chart-svg .hit { fill: transparent; }
.chart-svg .bar { transition: opacity .1s; }
.chart-svg .bar.hover, .chart-svg .cell.hover { opacity: .78; }
.chart-svg .bar-value { fill: var(--ink-2); font: 11px var(--font-data); }
.chart-svg .overlap-fill { fill: var(--overlap); opacity: .28; }
.chart-svg .overlap-hatch { fill: url(#hatch); }
.chart-svg .marker-line { stroke-width: 1.5; stroke-dasharray: 2 3; }
.chart-svg .marker-line.strong { stroke-width: 2.5; stroke-dasharray: none; }
.chart-svg .marker-label { fill: var(--ink-2); font: 500 11px var(--font-data); }
.chart-svg .cell-label { fill: var(--ink); font: 600 12px var(--font-data); pointer-events: none; }
.chart-svg .cell-label.on-dark { fill: var(--cell-on-high); }
.chart-svg .x-mark { stroke-width: 2; stroke-linecap: round; }
.chart-svg .edge { fill: none; stroke: var(--ink-2); opacity: .32; stroke-linecap: round; }
.chart-svg .edge.hover { opacity: .7; }
.chart-svg .node { stroke: var(--surface); stroke-width: 2; }
.chart-svg .node-label { fill: var(--ink); font: 500 12px var(--font-body); }
.chart-svg .strip-dot { opacity: .45; }
.chart-svg .box { fill: none; stroke-width: 2; }
.chart-svg .median { stroke-width: 3; }
.chart-svg .empty { fill: var(--muted); font: 13px var(--font-body); }

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; flex: none; }
.swatch.line { width: 14px; height: 3px; border-radius: 2px; background: var(--sw); }
.swatch.dash { width: 14px; height: 0; border-top: 2px dashed var(--sw); }
.swatch.block { width: 10px; height: 10px; border-radius: 2px; background: var(--sw); }
.swatch.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sw); }
.swatch.x { width: 10px; height: 10px; position: relative; }
.swatch.x::before, .swatch.x::after { content: ""; position: absolute; left: 4px; top: -1px; width: 2px; height: 12px; background: var(--sw); transform: rotate(45deg); }
.swatch.x::after { transform: rotate(-45deg); }

.chart-tip {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14); padding: 7px 10px; font-size: 12px; min-width: 150px; max-width: 320px;
}
.tip-head { font-weight: 600; margin-bottom: 3px; font-family: var(--font-data); font-size: 11.5px; }
.tip-row { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.tip-row b { margin-left: auto; padding-left: 12px; font-family: var(--font-data); font-weight: 600; }
.tip-row.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ decisions ---- */
.verdict { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; background: var(--surface-2); margin-bottom: 10px; }
.verdict .big { font-family: var(--font-display); font-weight: 700; font-size: 18px; font-stretch: 108%; }
.verdict .mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.verdict.ok .mark { background: var(--ok); }
.verdict.no .mark { background: var(--bad); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 13px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; }
.kv dd.pass::after { content: " ✓"; color: var(--ok); }
.kv dd.fail::after { content: " ✕"; color: var(--bad); }
.side-by-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.side-by-side.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .side-by-side.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .side-by-side, .side-by-side.three { grid-template-columns: minmax(0, 1fr); } }
.who { font-weight: 600; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 13px; }

/* ---------------------------------------------------------------- prose ---- */
.prose { display: grid; gap: 8px; max-width: 72ch; color: var(--ink); }
.prose p { line-height: 1.6; }
.math { font-family: var(--font-data); font-size: 12.5px; line-height: 1.7; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 10px 12px; overflow-x: auto; }
.math div { white-space: pre-wrap; }
details > summary { cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 13px; margin-top: 8px; }
details[open] > summary { margin-bottom: 8px; }

/* pipeline: prior + likelihood → posterior → decision */
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pipeline > div { padding: 10px 12px; border-right: 1px solid var(--line); position: relative; min-width: 0; }
.pipeline > div:last-child { border-right: 0; }
.pipeline .op { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); background: var(--surface); color: var(--muted); font-family: var(--font-data); font-size: 13px; z-index: 1; padding: 0 1px; }
.pipeline .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.pipeline .val { font-family: var(--font-data); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 720px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pipeline > div:nth-child(2) { border-right: 0; } .pipeline > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .pipeline .op { display: none; } }

/* ---------------------------------------------------------- experiments ---- */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.exp-card {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  cursor: pointer; display: grid; gap: 6px; align-content: start;
}
.exp-card:hover { border-color: var(--ink-2); }
.exp-card[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.exp-card .n { font-family: var(--font-data); font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.exp-card h3 { font-size: 14.5px; font-weight: 650; }
.exp-card p { font-size: 12.5px; color: var(--ink-2); }

/* sources of heterogeneity */
.sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .sources { grid-template-columns: minmax(0, 1fr); } }
.source { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--surface); }
.source .n { font-family: var(--font-data); font-size: 11px; color: var(--muted); }
.source h3 { font-size: 15px; margin: 2px 0 6px; }
.source p { font-size: 13px; color: var(--ink-2); }
.source .math { margin-top: 8px; }

/* templates editor */
.tpl-table input[type="number"] { width: 70px; }
.tpl-table td.layer { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tpl-table td .pair { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.tpl-table td .pm { color: var(--muted); font-size: 12px; }
.tpl-table .sym { font-family: var(--font-data); color: var(--ink-2); }
.form-grid input[type="number"], .form-grid select { width: 100%; }
.form-grid input[type="checkbox"] { justify-self: start; width: 18px; height: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notice { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 8px 10px; }
textarea.json { width: 100%; min-height: 220px; font-family: var(--font-data); font-size: 12px; }

.agent-list { max-height: 640px; overflow: auto; }
.agent-list table { font-size: 12.5px; }
.agent-list td, .scroll-list td { white-space: nowrap; }
.agent-list th { position: sticky; top: 0; background: var(--surface); }
.scroll-list { max-height: 360px; overflow: auto; }

.progress { height: 2px; background: var(--ink); width: 0; transition: width .1s; position: absolute; left: 0; bottom: -1px; }
.hint { font-size: 12px; color: var(--muted); }
.empty-state { padding: 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 8px; }

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