/* BTC10 dashboard: dark research-terminal. Tokens (ACSS-style) + BEM.
   See ../DESIGN.md. OKLCH throughout; numbers tabular-mono for column alignment. */

:root {
  /* surfaces */
  --bg: oklch(0.165 0.006 256);
  --surface: oklch(0.205 0.007 256);
  --surface-2: oklch(0.245 0.008 256);
  --border: oklch(0.305 0.010 256);
  --border-strong: oklch(0.380 0.012 256);

  /* ink (contrast-verified on --bg) */
  --ink: oklch(0.965 0.004 256);
  --ink-2: oklch(0.840 0.008 256);
  --muted: oklch(0.700 0.012 256);

  /* signal */
  --primary: oklch(0.800 0.155 85);
  --up: oklch(0.760 0.150 150);
  --down: oklch(0.680 0.190 25);
  --up-soft: oklch(0.760 0.150 150 / 0.12);
  --down-soft: oklch(0.680 0.190 25 / 0.12);

  /* scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r: 10px; --r-sm: 7px;
  --maxw: 1180px;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* named z-scale */
  --z-sticky: 100; --z-banner: 200;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
  /* subtle vignette so the panels read as lit instruments, not flat slabs */
  background-image: radial-gradient(120% 80% at 50% -10%, oklch(0.225 0.010 256) 0%, var(--bg) 55%);
  background-attachment: fixed;
  min-height: 100dvh;
}

.num, .mono { font-variant-numeric: tabular-nums; font-family: var(--mono); }

.skip-link {
  position: absolute; left: -999px; top: var(--s2);
  background: var(--surface); color: var(--ink); padding: var(--s2) var(--s3);
  border-radius: var(--r-sm); z-index: 999;
}
.skip-link:focus { left: var(--s4); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- app bar ---------- */
.app-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s3) clamp(var(--s4), 4vw, var(--s6));
  background: oklch(0.165 0.006 256 / 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.app-bar__brand { display: flex; align-items: baseline; gap: var(--s2); }
.app-bar__mark { color: var(--primary); font-size: 1.25rem; transform: translateY(2px); }
.app-bar__name { font-weight: 700; letter-spacing: 0.01em; font-size: 1.1rem; }
.app-bar__sub { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.02em; }
.app-bar__meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-bar__range { color: var(--ink-2); font-family: var(--mono); font-size: 0.82rem; }

.chip {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  padding: 3px var(--s2); border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 16%, var(--surface));
  color: var(--primary); border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
}
.chip--ghost { background: var(--surface-2); color: var(--ink-2); border-color: var(--border); }

/* ---------- layout ---------- */
.layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(var(--s4), 3vw, var(--s6)) clamp(var(--s4), 4vw, var(--s6)) var(--s7);
  display: flex; flex-direction: column; gap: var(--s5);
}
.grid-2 { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- disclaimer ---------- */
.disclaimer {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  background: color-mix(in oklch, var(--primary) 9%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--border));
  border-radius: var(--r);
}
.disclaimer__dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none;
  background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 22%, transparent);
}
.disclaimer__text { font-size: 0.9rem; color: var(--ink-2); max-width: 78ch; }
.disclaimer__text strong { color: var(--ink); }

/* ---------- verdict ---------- */
.verdict {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  text-wrap: balance; max-width: 40ch;
  min-height: 140px; /* reserve space so the JS-filled headline does not shift layout (CLS) */
}
@media (min-width: 620px) { .verdict { min-height: 116px; } }
@media (min-width: 980px) { .verdict { min-height: 108px; } }
.verdict__big { color: var(--ink); }
.verdict__num { font-family: var(--mono); }
.verdict__num--up, .num--up { color: var(--up); }
.verdict__num--down, .num--down { color: var(--down); }
.verdict__num--flat, .num--flat { color: var(--primary); }
.verdict__sub { display: block; margin-top: var(--s2); font-size: 0.92rem; font-weight: 400; color: var(--muted); max-width: 60ch; }

/* ---------- KPIs (dense data strip, not feature cards) ---------- */
.kpis {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  min-height: 404px; /* reserve the strip height before JS fills it, preventing layout shift */
}
.kpis:empty { background: var(--surface); } /* subtle skeleton instead of a hairline-grey block on first paint */
@media (min-width: 620px) { .kpis { grid-template-columns: repeat(4, 1fr); min-height: 203px; } }
@media (min-width: 980px) { .kpis { grid-template-columns: repeat(7, 1fr); min-height: 102px; } }
.kpi { background: var(--surface); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 5px; }
.kpi__label { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em; text-transform: uppercase; }
.kpi__value { font-family: var(--mono); font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; }
.kpi__value--up { color: var(--up); } .kpi__value--down { color: var(--down); } .kpi__value--flat { color: var(--primary); }
.kpi__delta { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }

/* ---------- live paper bot ---------- */
.panel--live { border-color: color-mix(in oklch, var(--up) 30%, var(--border)); }
.panel--live .panel__head { background: color-mix(in oklch, var(--up) 7%, var(--surface)); }
.live-status {
  display: inline-flex; align-items: center; gap: 6px; margin-left: var(--s2);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--up); vertical-align: middle;
}
.live-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); flex: none; }
.live-status--halted { color: var(--down); }
.live-status--halted .live-status__dot { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
@media (prefers-reduced-motion: no-preference) {
  .live-status__dot { animation: live-pulse 2s var(--ease) infinite; }
  @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}
.livekpis {
  display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr);
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; min-height: 360px;
}
.livekpis:empty { background: var(--surface); }
@media (min-width: 620px) { .livekpis { grid-template-columns: repeat(4, 1fr); min-height: 184px; } }
@media (min-width: 980px) { .livekpis { grid-template-columns: repeat(7, 1fr); min-height: 92px; } }
.live-note { margin-top: var(--s3); font-size: 0.78rem; color: var(--muted); max-width: 80ch; }

/* ---------- panel ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
}
.panel__title { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }
.panel__hint { font-size: 0.78rem; color: var(--muted); }
.panel__body { padding: var(--s4); }
.panel__body--flush { padding: 0; }

.legend { display: flex; gap: var(--s4); font-size: 0.8rem; }
.legend__item { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.legend__item::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.legend__item--strat { color: var(--primary); }
.legend__item--bh { color: var(--ink-2); }
.legend__item--bh::before { background: var(--muted); }

/* ---------- chart ---------- */
.chart { width: 100%; aspect-ratio: 1000 / 380; } /* reserve chart box (matches SVG viewBox) so injecting the SVG does not shift layout */
.chart svg { width: 100%; height: auto; display: block; }
.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__axis { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.chart__bh { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: 0.65; }
.chart__strat { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.chart__area { fill: url(#stratFade); }

@media (prefers-reduced-motion: no-preference) {
  .chart__strat { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.4s var(--ease) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* ---------- regime ---------- */
.regime { list-style: none; display: flex; flex-direction: column; gap: var(--s4); padding: 0; }
.regime__row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); align-items: baseline; }
.regime__name { font-size: 0.86rem; color: var(--ink-2); }
.regime__nums { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }
.regime__nums b { font-weight: 600; }
.regime__bh-num { color: var(--muted); }
.regime__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; position: relative; }
.regime__fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.regime__fill--strat { background: var(--primary); }
.regime__fill--bh { background: var(--muted); opacity: 0.5; }

/* ---------- params ---------- */
.params { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); margin: 0; }
.params dt { color: var(--muted); font-size: 0.85rem; }
.params dd { margin: 0; font-family: var(--mono); font-size: 0.85rem; color: var(--ink); text-align: right; }

/* ---------- trades ---------- */
.trades__scroll { overflow-x: auto; max-height: 420px; min-height: 420px; overflow-y: auto; }
.trades { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.trades th, .trades td { padding: var(--s2) var(--s4); text-align: left; white-space: nowrap; }
.trades thead th {
  position: sticky; top: 0; background: var(--surface-2); color: var(--muted);
  font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}
.trades .num { text-align: right; font-family: var(--mono); }
.trades tbody tr { border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
.trades tbody tr:hover { background: var(--surface-2); }
.trades__pnl--up { color: var(--up); } .trades__pnl--down { color: var(--down); }
.tag { font-size: 0.72rem; color: var(--ink-2); background: var(--surface-2); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); }

/* ---------- foot / states ---------- */
.foot { color: var(--muted); font-size: 0.8rem; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.foot__sep { opacity: 0.5; }
.state { max-width: var(--maxw); margin: var(--s6) auto; padding: 0 var(--s5); color: var(--down); }
.state code { font-family: var(--mono); background: var(--surface); padding: 1px 6px; border-radius: 5px; }