/* lab.css — the harness lab. Inherits every token from ../style.css and adds
   only what a live dashboard needs.

   The chart colours are NOT chosen by eye. The three P&L series are
   categorical slots 1-3 of the validated palette, which clear the all-pairs
   CVD check in both modes; the decision marks use the RESERVED status
   palette and every one of them carries a letter glyph and a text label, so
   no meaning is ever carried by hue alone. */
:root {
  --s1:#2a78d6;   /* jev        */
  --s2:#eb6834;   /* buy & hold */
  --s3:#1baf7a;   /* random     */
  --st-good:#0ca30c; --st-warning:#fab219; --st-serious:#ec835a; --st-critical:#d03b3b;
  --neutral:#f0efec;
  --grid:var(--line-2);
  /* Candle direction. Validated as a diverging pair in both modes (worst
     all-pairs CVD ΔE 21.6 protan light, 19.2 dark) — but hue is the REDUNDANT
     channel here: up candles are hollow and down candles filled, which is how
     candlesticks read before colour existed and how they read without it. */
  --up-c:#2a78d6; --down-c:#e34948;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --s1:#3987e5; --s2:#d95926; --s3:#199e70;
    --neutral:#383835; --up-c:#3987e5; --down-c:#e66767;
  }
}
:root[data-theme="dark"]{ --s1:#3987e5; --s2:#d95926; --s3:#199e70; --neutral:#383835;
  --up-c:#3987e5; --down-c:#e66767; }

.lab-wrap{max-width:1180px;margin:0 auto;padding:0 16px 64px}
.lab-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;padding:22px 0 10px}
.lab-head h1{font-family:var(--display);font-size:1.5rem;margin:0;letter-spacing:-.01em}
.lab-head .sub{color:var(--ink-2);font-size:.9rem;margin:2px 0 0}

.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.72rem;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.pill[data-status="live"] .dot{background:var(--st-good);box-shadow:0 0 0 3px color-mix(in srgb,var(--st-good) 22%,transparent)}
.pill[data-status="dropped"] .dot,.pill[data-status="error"] .dot{background:var(--st-critical)}
.pill[data-status="connecting"] .dot,.pill[data-status="reconnecting"] .dot{background:var(--st-warning)}

.note{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--paper);
  border-radius:var(--radius);padding:10px 14px;margin:0 0 18px;font-size:.86rem;color:var(--ink-2)}
.note b{color:var(--ink)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;min-width:0}
.tile .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:3px}
.tile .v{font-family:var(--mono);font-size:1.32rem;line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .v.sm{font-size:1.02rem}
.tile .m{font-size:.72rem;color:var(--ink-3);margin-top:3px}
.up{color:var(--ok)} .down{color:var(--bad)}

.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:880px){ .grid2{grid-template-columns:1.35fr 1fr} }

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;min-width:0}
.card h2{font-family:var(--display);font-size:.95rem;margin:0 0 2px;letter-spacing:-.005em}
.card .cap{font-size:.76rem;color:var(--ink-3);margin:0 0 10px}
.card svg{display:block;width:100%;height:auto;overflow:visible}

.legend{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0;font-size:.76rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:11px;height:3px;border-radius:2px;display:inline-block}

.axis text{font-family:var(--mono);font-size:9px;fill:var(--ink-3)}
.gridline{stroke:var(--grid);stroke-width:1}
.serie{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pxline{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.crosshair{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.endlab{font-family:var(--mono);font-size:9px;font-weight:600}

.wick{stroke-width:1.2}
.candle{stroke-width:1.2}
.ins-k{font-family:var(--mono);font-size:8px;fill:var(--ink-3)}
.ins-v{font-family:var(--mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.ins-p{font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.mark{stroke:var(--paper);stroke-width:2}
.mark-glyph{font-family:var(--mono);font-size:7.5px;font-weight:700;text-anchor:middle;pointer-events:none}

.tip{position:absolute;pointer-events:none;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:7px 9px;font-size:.74rem;
  font-family:var(--mono);color:var(--ink);white-space:pre;opacity:0;transition:opacity .08s;z-index:20}
.tip.on{opacity:1}
.chartbox{position:relative}

.state{font-family:var(--mono);font-size:.7rem;line-height:1.45;color:var(--ink-2);white-space:pre-wrap;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius);padding:10px;
  max-height:270px;overflow:auto;margin:0}

.ans{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.act{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.82rem;font-weight:700;
  padding:4px 10px;border-radius:999px;color:#fff}
.act[data-a="buy"]{background:var(--st-good)} .act[data-a="sell"]{background:var(--st-serious);color:#23180f}
.act[data-a="bail"]{background:var(--st-critical)} .act[data-a="hold"]{background:var(--neutral);color:var(--ink)}
.why{font-size:.76rem;color:var(--ink-3)}

.ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 16px}
.ctl label{display:flex;flex-direction:column;gap:3px;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3)}
.ctl input,.ctl select{font-family:var(--mono);font-size:.82rem;padding:5px 8px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);color:var(--ink);min-width:88px}
button{font-family:var(--body);font-size:.85rem;font-weight:600;padding:7px 15px;border-radius:var(--radius);
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer}
button.ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
button:disabled{opacity:.45;cursor:not-allowed}

/* nowrap cells plus width:100% clips the last columns instead of scrolling;
   a min-width lets the container scroll horizontally, which is what the
   table view is for. */
table.log{width:100%;min-width:600px;border-collapse:collapse;font-family:var(--mono);font-size:.71rem}
table.log th{text-align:left;font-weight:600;color:var(--ink-3);border-bottom:1px solid var(--line);
  padding:5px 7px;position:sticky;top:0;background:var(--paper)}
table.log td{padding:4px 7px;border-bottom:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.scroll{max-height:290px;overflow:auto}

.verdict{font-family:var(--display);font-size:1rem;margin:0 0 4px}
.verdict.null{color:var(--ink-2)} .verdict.real{color:var(--ink)}
.trials{font-size:.76rem;color:var(--ink-3)}

/* The forward-test progress bar. Deliberately not coloured by how the test is
   going — it measures elapsed sample, not success, and a green bar creeping
   rightwards would read as a result accruing. It is the neutral accent. */
.prereg-bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.prereg-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease}