/* yolo_regr reports app — palette matched to the harness failure viewer for visual continuity. */
:root {
  --bg:#14161a; --fg:#e6e8eb; --muted:#9aa3ad; --panel:#1e222a; --line:#333a44; --acc:#4aa3ff;
  --good:#39d353; --bad:#ff4d5e; --warn:#ffb454;
}
* { box-sizing: border-box; }
/* The HTML `hidden` attribute must win over the display:flex on .gate/.modal below (author rules
   otherwise override the UA [hidden]{display:none}), or toggling el.hidden wouldn't hide them. */
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
.grow { flex:1; }
.muted { color:var(--muted); }

header { position:sticky; top:0; z-index:10; background:var(--panel);
  border-bottom:1px solid var(--line); padding:12px 20px; }
header h1 { font-size:16px; margin:0; }
.sub { color:var(--muted); font-size:12px; margin-top:3px; }
.controls { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:10px; }
.controls label { display:flex; align-items:center; gap:6px; white-space:nowrap; }
select, input[type=text], input[type=password] { background:#2a2f39; color:var(--fg);
  border:1px solid var(--line); border-radius:5px; padding:3px 7px; font:inherit; }
.btn { cursor:pointer; background:#2a2f39; border:1px solid var(--line); color:var(--fg);
  padding:4px 11px; border-radius:5px; font:inherit; }
.btn:hover:not(:disabled) { border-color:var(--acc); }
.btn:disabled { opacity:.4; cursor:default; }

main { max-width:1200px; margin:0 auto; padding:16px 20px 60px; }

/* run cards */
.card { border:1px solid var(--line); border-radius:8px; background:#0e1013;
  padding:11px 14px; margin-bottom:11px; display:flex; gap:12px; align-items:flex-start; }
.card.sel { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.card.first { border-left:3px solid var(--acc); }
.card .pick { margin-top:3px; }
.card .body { flex:1; min-width:0; }
.card .rid { font-size:13px; word-break:break-all; }
.card .rid a { color:var(--fg); } .card .rid a:hover { color:var(--acc); }
.card .meta { color:var(--muted); font-size:12px; margin:3px 0 8px; }
.metrics { display:flex; flex-wrap:wrap; gap:6px 16px; }
.m { white-space:nowrap; } .m b { color:var(--acc); }
.chip { font-size:11px; padding:1px 6px; border-radius:10px; border:1px solid var(--line); }

table { border-collapse:collapse; width:100%; font-size:13px; }
th,td { text-align:right; padding:5px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
th { color:var(--muted); font-weight:600; position:sticky; top:0; background:var(--panel); }
tr:hover td { background:#161a20; }
.delta-pos { color:var(--good); } .delta-neg { color:var(--bad); } .delta-zero { color:var(--muted); }
.sectlabel { color:var(--muted); font-size:12px; margin:18px 0 6px; border-bottom:1px solid var(--line);
  padding-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }

pre.report { background:#0e1013; border:1px solid var(--line); border-radius:8px; padding:14px;
  overflow-x:auto; font-size:12.5px; line-height:1.45; white-space:pre; }

.empty { color:var(--muted); padding:40px; text-align:center; }
.warn { color:var(--warn); }

/* modal */
.modal { position:fixed; inset:0; z-index:30; background:var(--bg); display:flex; flex-direction:column; }
.modalbar { display:flex; align-items:center; gap:12px; padding:10px 18px; background:var(--panel);
  border-bottom:1px solid var(--line); }
.mtitle { font-size:14px; font-weight:600; word-break:break-all; }
.modalbody { overflow:auto; padding:18px; max-width:1400px; width:100%; margin:0 auto; }

/* gate */
.gate { position:fixed; inset:0; z-index:50; background:var(--bg); display:flex;
  align-items:center; justify-content:center; }
.gatebox { display:flex; flex-direction:column; gap:10px; width:260px; }
.gatebox h1 { font-size:15px; margin:0 0 6px; text-align:center; }
.gateerr { color:var(--bad); font-size:12px; min-height:16px; text-align:center; }