/* "Instrument Panel" — terminale OLED. Tokens-first (spec §5, committed via ui-ux-pro-max + frontend-design).
   Font: JetBrains Mono (numeri/tabular) + IBM Plex Sans (chrome). No font generici AI-slop.
   Self-host (Q4 2026-07-12): woff2 locali in vendor/fonts/ — niente più fonts.googleapis (offline-safe). */
@import url('vendor/fonts/fonts.css');

:root{
  --canvas:#07090C; --panel:#0E1116; --panel-hi:#12161D; --hairline:#1C2230;
  --amber:#F2A33C; --bull:#2EBD85; --bear:#F6465D;
  --text:#E6EAF0; --text-dim:#8A93A3;
  --flash-bull:rgba(46,189,133,.22); --flash-bear:rgba(246,70,93,.22);
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --radius:5px; --radius-sm:3px; --dur:180ms;
  /* SCALA TIPOGRAFICA — cinque gradini, uno per LIVELLO SEMANTICO (2026-09-04).
     🔴 Prima erano DODICI corpi su 41 dichiarazioni nella sola tab RUN, con cinque coppie a
     mezzo pixel di distanza (9/9.5 · 10/10.5 · 11/11.5 · 12/12.5 · 17/18): indistinguibili a
     occhio e con regole separate, cioe' il costo della manutenzione senza il beneficio della
     gerarchia. Il principio giusto era gia' scritto in run.css — «mai due corpi diversi nella
     stessa fascia» — e applicato in un solo blocco.
     ⛔ Sono i PRIMI token di scala del repo: prima ogni corpo era un numero magico letterale.
     Chi aggiunge una regola sceglie un GRADINO, non un pixel. */
  --fs-eroe:32px;    /* il conto: uno solo per pagina */
  --fs-grande:18px;  /* il numero che decide adesso, e i valori di secondo piano */
  --fs-valore:14px;  /* titoli di sezione e valori della striscia */
  --fs-corpo:11px;   /* tabelle, note, righe: il corpo del testo */
  --fs-label:9px;    /* etichette maiuscole, chip, badge */

  /* EQUITY (tab RUN) — le quattro tinte del grafico del conto. Stavano LETTERALI in
     `run.js::_runTheme`: l'unico punto del repo dove la palette si biforcava fra CSS e JS, e un
     token che vive in due posti e' due token (mito #138 in forma di colore).
     ⛔ **Il cambio di tinta del ventaglio e' stato RITIRATO, e il motivo e' una misura.** Avevo
     scritto che `#58a6ff` contro `#79c0ff` da' ΔE 8,1 = hard FAIL. Vero su quella COPPIA — ma
     `#79c0ff` non e' mai a schermo: `runBuildPerTradeSeries` passa `rgba(121,192,255,.55)`, che
     sopra `--panel #0E1116` compone **#497196** ⇒ ΔE dal backbone **19,7 = PASS** (validatore
     `dataviz`, OKLab x100, ri-eseguito). Il ventaglio non e' mai stato un difetto di contrasto:
     misuravo un colore che il browser non disegna. Il grigio proposto (#6E7681) dava 20,2 —
     mezzo punto, non un movente. ⇒ i valori restano quelli di oggi; cambia solo DOVE vivono. */
  --equity-line:#58a6ff;                      /* backbone: un valore assoluto in $, mai un segno */
  --equity-fill:rgba(88,166,255,.15);
  --equity-per-trade:rgba(121,192,255,.55);   /* ventaglio per-gamba, dietro l'interruttore */
  --equity-flat:#8A93A3;                      /* curva ferma al capitale: de-enfasi per SPESSORE */
  color-scheme:dark;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--canvas); color:var(--text); font-family:var(--font-sans);
  background-image:radial-gradient(120% 80% at 50% -10%,rgba(242,163,60,.05),transparent 60%);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 14px; border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:20;
  background:var(--canvas);
  /* review UI 12/07 (A1): il nowrap di default con 7 navlink forzava una min-width ~720-800px su OGNI
     pagina -> h-scroll del BODY a viewport strette (390px). wrap = a 1440px resta un'unica riga
     (byte-identico visivamente), sotto ~800px i link scendono di riga — mai più scroll orizzontale.
     Le tabelle larghe hanno già i loro contenitori overflow-x (.run-table-wrap/.sn-tablewrap/
     .fy-tablewrap), il body non deve scrollare mai in orizzontale (WCAG 1.4.10 Reflow). */
  flex-wrap:wrap;
}
.topbar__title{ margin:0; font:600 13px/1 var(--font-mono); letter-spacing:.18em; color:var(--amber); }
.topbar__status{ font:500 11px/1 var(--font-sans); color:var(--text-dim); }
.topbar__scan{ font:500 11px/1 var(--font-mono); color:var(--text-dim); letter-spacing:.02em; }
.topbar__scan.is-stale{ color:var(--bear); font-weight:600; }   /* freschezza: il testo "· stale" è il segnale, la classe rinforza (color-not-only) */
/* nav link condiviso scanner<->backtesting (sb-backtesting-tab-viz): stesso file su ENTRAMBE le pagine (SSOT). */
.topbar__navlink{
  display:inline-flex; align-items:center; min-height:32px; box-sizing:border-box;
  font:600 11px/1 var(--font-mono); letter-spacing:.06em; color:var(--text-dim);
  text-decoration:none; padding:5px 9px; border:1px solid var(--hairline); border-radius:var(--radius-sm);
  transition:color var(--dur) ease, border-color var(--dur) ease;
}
.topbar__navlink:hover{ color:var(--amber); border-color:var(--amber); }
.topbar__navlink:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
/* review UI 12/07 (A1): sotto ~800px il topbar wrappa su 2-3 righe — l'altezza non è più i 49px che gli
   offset sticky a valle assumono (loop-card/ctlbar top:49px, § quei file): qui diventa static (scrolla
   via col contenuto) e gli strip sticky si riancorano a top:0 nei rispettivi file (stessa media query). */
@media (max-width:800px){ .topbar{ position:static; } }

.scanner-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px; padding:1px; background:var(--hairline);
  max-height:calc(100dvh - 49px); overflow:auto; overscroll-behavior:contain;
}
@media (max-width:480px){ .scanner-grid{ grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); } }
@media (min-width:1600px){ .scanner-grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }

/* Mandato controlli-universo (2026-07-06): .card-wrap è il grid-item REALE (il <select> override non può
   vivere dentro <button class="card"> — interactive-content-in-button è HTML invalido, § scanner.js
   renderCard). .card riempie il wrapper via inset:0 (stesso ingombro visivo di prima, zero regressione
   layout); il wrapper eredita l'hint content-visibility (era su .card). */
.card-wrap{ position:relative; min-height:88px; content-visibility:auto; contain-intrinsic-size:auto 88px; display:flex; }

.card{
  --tier:var(--amber);
  position:relative; flex:1 1 auto; width:100%; display:flex; flex-direction:column; gap:7px;
  min-height:44px; padding:8px 10px 8px 11px;
  border:0; border-left:3px solid var(--tier); background:var(--panel);
  text-align:left; cursor:pointer; color:inherit;
  transition:background var(--dur) ease;
}
.card:hover{ background:var(--panel-hi); }
.card:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }

/* select override per-symbol (mandato controlli-universo 2026-07-06) — SIBLING assoluto del bottone
   card (mai annidato, § renderCard), angolo alto-destra, sopra la card (z-index) ma fuori dal suo
   albero DOM: un click qui non attraversa mai il delegate click-to-open. ponytail: target ridotto
   (~18px) coerente con la densità ESISTENTE del pannello (.chip/.card__delta sono anch'essi sub-44px —
   strumento desktop operatore, non touch-first); upgrade a target più larghi se servisse il touch reale. */
.card__ovr{
  position:absolute; top:5px; right:5px; z-index:2; max-width:58px; height:16px; padding:0 3px;
  background:var(--panel-hi); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  color:var(--text-dim); font:600 8px/1 var(--font-mono); letter-spacing:.02em; cursor:pointer;
}
.card__ovr:hover{ color:var(--text); }
.card__ovr:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.card__ovr.is-override{ color:var(--canvas); background:var(--amber); border-color:var(--amber); }

.card__head{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.card__sym{
  margin:0; font:600 12px/1 var(--font-sans); letter-spacing:.04em; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card__delta{
  display:inline-flex; align-items:center; gap:3px; padding:2px 5px; border-radius:4px; flex:none;
  font:600 11px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-dim);
}
.card__ico{ font-size:8px; line-height:1; }
.card__delta--bull{ color:var(--bull); background:color-mix(in srgb,var(--bull) 14%,transparent); }
.card__delta--bear{ color:var(--bear); background:color-mix(in srgb,var(--bear) 14%,transparent); }
.card__price{
  margin:0; font:600 18px/1 var(--font-mono); font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; color:var(--text);
}
.card__meta{ display:flex; justify-content:space-between; gap:8px; }
.card__stat{ display:flex; align-items:baseline; gap:4px; min-width:0; }
.card__k{ font:500 9px/1 var(--font-sans); letter-spacing:.06em; color:var(--text-dim); }
.card__v{ font:500 11px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-contrast: more){ :root{ --text-dim:#A9B2C2; --hairline:#2A3344; } }
@media (prefers-reduced-motion: no-preference){
  @keyframes tick-up{ from{ background:var(--flash-bull); } to{ background:var(--panel); } }
  @keyframes tick-down{ from{ background:var(--flash-bear); } to{ background:var(--panel); } }
  .card.is-up{ animation:tick-up 420ms ease-out; }
  .card.is-down{ animation:tick-down 420ms ease-out; }
}