/* Shared design system for all three pages: Forecast, Historical, Accuracy.
   Light/dark aware. Page-specific rules live in each page; this file owns the
   palette tokens, base layout, the top nav, and the common form/chart/panel
   components used by the Forecast and Accuracy pages. */

:root {
  --surface-1: #fcfcfb; --plane: #f9f9f7;
  --text-primary: #0b0b0b; --text-secondary: #52514e; --muted: #898781;
  --grid: #e1e0d9; --border: rgba(11,11,11,0.10);
  --actual: #0b0b0b;
  --l1:#104281; --l2:#1c5cab; --l3:#2a78d6; --l4:#5598e7; --l5:#86b6ef;
  --heat: 208,59,59;      /* critical red, used translucent */
  --good: #0ca30c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-1:#1a1a19; --plane:#0d0d0d;
    --text-primary:#fff; --text-secondary:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --border: rgba(255,255,255,0.10);
    --actual:#ffffff;
    --l1:#9ec5f4; --l2:#6da7ec; --l3:#3987e5; --l4:#256abf; --l5:#184f95;
    --heat: 230,103,103;
    --good: #4fd14f;
  }
}

/* Build-version badge (bottom-right, all pages) → links to the log viewer. */
.version-badge {
  position: fixed; right: 10px; bottom: 10px; z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--text-secondary); text-decoration: none;
  font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12); opacity: 0.82;
}
.version-badge:hover { opacity: 1; color: var(--text-primary); }
.version-badge .vb-env {
  text-transform: uppercase; font-weight: 700; font-size: 9.5px; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 999px; color: #fff;
}
.version-badge .vb-env-prod { background: #c0392b; }
.version-badge .vb-env-preview { background: #2a78d6; }

* { box-sizing: border-box; }
body {
  margin:0; background:var(--plane); color:var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.45;
}
a { color:var(--l3); }

/* ---------- Top nav (shared across the three pages) ---------- */
.topnav {
  display:flex; align-items:stretch; gap:2px; padding:0 20px;
  background:var(--surface-1); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1000; flex-wrap:wrap;
}
.topnav .brand {
  margin-right:auto; display:flex; align-items:center; gap:7px;
  font-weight:700; color:var(--text-primary); padding:11px 14px 11px 0;
}
.topnav a.navlink {
  padding:13px 16px; color:var(--text-secondary); text-decoration:none;
  font-weight:600; font-size:14px; border-bottom:2px solid transparent;
}
.topnav a.navlink:hover { color:var(--text-primary); }
.topnav a.navlink.active { color:var(--text-primary); border-bottom-color:var(--l3); }

/* ---------- Header ---------- */
header { padding:18px 20px 6px; }
h1 { font-size:19px; margin:0 0 2px; }
.sub { color:var(--text-secondary); font-size:13px; margin:0; }
.wrap { padding:12px 20px 40px; max-width:1100px; margin:0 auto; }

/* ---------- Controls / forms ---------- */
.controls {
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end;
  background:var(--surface-1); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin-bottom:14px;
}
.ctl { display:flex; flex-direction:column; gap:4px; }
.ctl label { font-size:12px; color:var(--muted); }
select, input[type=number] {
  font:inherit; padding:6px 8px; border:1px solid var(--border);
  border-radius:6px; background:var(--surface-1); color:var(--text-primary);
}
.presets button {
  font:inherit; font-size:12px; padding:3px 8px; margin-right:4px; cursor:pointer;
  border:1px solid var(--border); border-radius:999px;
  background:transparent; color:var(--text-secondary);
}
.presets button.active { background:var(--l3); color:#fff; border-color:var(--l3); }
.toggle { display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.toggle input { width:16px; height:16px; }
.toggle.small { font-size:12px; color:var(--text-secondary); }
.toggle.small input { width:14px; height:14px; }

/* ---------- Threshold bar ---------- */
.threshold-bar {
  display:flex; flex-direction:column; gap:8px;
  margin-top:12px; padding:12px 16px;
  background:var(--surface-1); border:1px solid var(--border); border-radius:10px;
}
.thr-group { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; }
.thr-group > label[for] { font-size:13px; color:var(--text-secondary); font-weight:600;
  min-width:140px; }
.thr-group input[type=range] { flex:0 1 200px; }
.thr-group output { font-variant-numeric: tabular-nums; font-weight:700; font-size:16px;
  min-width:34px; }
.thr-unit { color:var(--muted); margin-left:-4px; }
.thr-note { color:var(--muted); font-size:12px; margin-left:auto; text-align:right; }
input[type=range]:disabled { opacity:.4; }

/* ---------- Charts / panels ---------- */
.chartbox { width:100%; height:460px;
  background:var(--surface-1); border:1px solid var(--border); border-radius:10px; }
.msg { padding:40px; text-align:center; color:var(--text-secondary); }
.panel { margin-top:16px; background:var(--surface-1);
  border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.panel h2 { font-size:14px; margin:0 0 4px; }
.panel .hint { color:var(--muted); font-size:12px; margin:0 0 10px; }
.outlook h2 { font-size:16px; }
.ol-run { color:var(--muted); font-weight:400; font-size:12px; }
.ol-verdict { font-weight:700; }
.ol-hot { color:rgb(var(--heat)); }
.ol-cool { color:var(--good); }

/* ---------- Tables ---------- */
table { border-collapse:collapse; width:100%; font-variant-numeric: tabular-nums; }
th, td { text-align:right; padding:6px 10px; border-bottom:1px solid var(--grid); }
th:first-child, td:first-child { text-align:left; }
th { color:var(--muted); font-weight:600; font-size:12px; }
.help { cursor:help; border-bottom:1px dotted var(--muted); }
.help::after { content:" ⓘ"; font-size:10px; opacity:.7; }
.swatch { display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-right:6px; vertical-align:middle; }
.stat { display:inline-block; margin-right:22px; }
.stat b { font-size:18px; }
.caveat { margin-top:18px; color:var(--muted); font-size:12px; line-height:1.5; }
.caveat code { background:var(--surface-1); padding:1px 4px; border-radius:4px; }