/* ui.css — i token e la cornice comuni a tutto il sito.
 *
 * Prima di questo file la stessa tavolozza stava scritta a mano dentro il
 * <style> di sette pagine — e aveva già iniziato a divergere: due sfumature di
 * rosso e QUATTRO di giallo, a seconda di chi l'aveva copiata per ultimo.
 * Cambiare un colore voleva dire aprire otto file e dimenticarne uno.
 *
 * Qui dentro ci va solo la roba condivisa: i colori, e i pezzi che ogni pagina
 * ha uguale (link di ritorno, avvisi, targhette, piè di pagina). Il layout di
 * ciascuna app resta a casa sua, nel suo <style> o nel suo styles.css, che
 * viene caricato DOPO e quindi ha sempre l'ultima parola.
 *
 * Riferimento: il Cronometro web, che è l'app curata.
 */

:root{
  color-scheme:dark;
  --bg:#0b0f17; --fg:#e9edf3; --mut:#8a94a6;
  --acc:#5db0ff; --accfg:#04121f;
  --ok:#4ec36b; --warn:#e0a800; --warnfg:#180a00; --err:#ff5c5c; --errfg:#180404;
  --card:#141924; --bd:#242c3a; --chip:#1b2130;
}
/* Il tema chiaro cambia TUTTO, non solo i neutri. Prima cambiavano fondo, testo e
   bordi, mentre accento e colori di stato restavano quelli pensati per il fondo
   scuro: blu, verde e giallo chiari su bianco, fra 1,8 e 2,3:1 — i link, le
   targhette e i messaggi di stato quasi non si leggevano. Qui sono tutti scuri
   abbastanza da superare 4,5:1 sul fondo chiaro, e sulle fasce piene il testo
   diventa bianco. `color-scheme` fa seguire il tema anche ai pezzi che disegna
   il browser: tendine, barre di scorrimento, caselle. */
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --bg:#f6f7f9; --fg:#1a1d23; --mut:#5b6472;
    --acc:#0b63c4; --accfg:#fff;
    --ok:#187a36; --warn:#8a5a00; --warnfg:#fff; --err:#c62828; --errfg:#fff;
    --card:#fff; --bd:#dfe3ea; --chip:#eef1f5;
  }
}
/* Il selettore di tema esplicito deve vincere sulla preferenza di sistema in
   entrambe le direzioni, non solo in una — e quindi ripete TUTTI i valori: con
   il sistema in chiaro e il tema forzato a scuro, un token lasciato fuori da qui
   resterebbe quello chiaro della media query. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0f17; --fg:#e9edf3; --mut:#8a94a6;
  --acc:#5db0ff; --accfg:#04121f;
  --ok:#4ec36b; --warn:#e0a800; --warnfg:#180a00; --err:#ff5c5c; --errfg:#180404;
  --card:#141924; --bd:#242c3a; --chip:#1b2130;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f7f9; --fg:#1a1d23; --mut:#5b6472;
  --acc:#0b63c4; --accfg:#fff;
  --ok:#187a36; --warn:#8a5a00; --warnfg:#fff; --err:#c62828; --errfg:#fff;
  --card:#fff; --bd:#dfe3ea; --chip:#eef1f5;
}

*{box-sizing:border-box}
/* ⚠️ `hidden` è un ATTRIBUTO, e la regola del browser che lo fa sparire perde
   contro qualunque classe che imposti `display`: con `.fld{display:flex}`, o
   con una fascia che ha un suo display, `hidden` non nascondeva niente — e il
   codice era convinto del contrario. Le fasce si spengono e si accendono SOLO
   con `hidden`, quindi deve vincere sempre. */
[hidden]{display:none!important}
body{
  margin:0 auto;
  font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--fg);
}
a{color:var(--acc)}

/* Il ritorno all'indice: in cima, uguale ovunque. */
.back{display:inline-block;text-decoration:none;font-size:13px;color:var(--mut)}
.back:hover{color:var(--acc)}

/* L'interruttore chiaro/scuro, accanto al selettore della lingua. Non è sotto
   `body.app`: sta su TUTTE le pagine, indice e cronometro compresi. */
.themebtn{background:rgba(127,127,127,.14);color:inherit;border:1px solid rgba(127,127,127,.4);
          border-radius:8px;padding:3px 8px;margin-left:8px;cursor:pointer;
          font-size:14px;line-height:1.4;vertical-align:middle}
.themebtn:hover{border-color:var(--acc)}

/* Il selettore della lingua, uguale su tutte le pagine: quello che disegna
   i18n.js e quelli scritti nel markup del Cronometro e del DS200. Il fondo è
   PIENO e viene dal tema: la tendina delle opzioni la disegna il browser, e con
   un fondo trasparente in tema scuro le opzioni uscivano chiare su bianco. */
.langsel{background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:8px;
         padding:4px 8px;font:inherit;font-size:13px;cursor:pointer;
         min-width:0;max-width:100%;vertical-align:middle}
.langsel:hover{border-color:var(--acc)}

/* Il disclaimer che i18n.js mette in fondo a ogni pagina: largo quanto la
   colonna, coi colori del tema. */
.discbox{margin:26px 0 8px;padding:12px 14px;border:1px solid var(--bd);border-radius:10px;
         font-size:12px;line-height:1.55;color:var(--mut);background:rgba(127,127,127,.06)}

/* ---- La cornice del debugger --------------------------------------------
 *
 * Da qui in giù c'è quello che CINQUE app avevano copiato identico nel proprio
 * <style>: intestazione, riquadri, pulsanti, campi, targhette, tabelle,
 * registro. Non è un vezzo di uniformità: la copia stava già divergendo — il
 * giallo degli avvisi era scritto a mano come `#e0a800` in quattro file invece
 * che come `var(--warn)`, e bastava ritoccare la tavolozza per ritrovarsi con
 * due gialli diversi nella stessa pagina.
 *
 * Il layout PROPRIO di ogni app resta a casa sua: il suo foglio viene caricato
 * dopo questo e ha sempre l'ultima parola. Il Cronometro, che è l'app curata,
 * riscrive quasi tutto — ed è giusto così.
 *
 * `--wrap` è l'unica cosa che ogni pagina imposta da sé: la larghezza utile
 * cambia col contenuto (una tabella di registri vuole più spazio di un modulo).
 *
 * ⚠️ TUTTO sotto `body.app`, e non è pedanteria: qui dentro ci sono selettori
 * di ELEMENTO (button, input, table, h1). Lasciati liberi arrivano anche
 * all'indice, alla guida e al cronometro — pagine che questa cornice non
 * l'hanno mai chiesta — e infatti al primo tentativo l'indice si è allungato
 * di 56px senza che nessuno avesse toccato l'indice. Vestirsi da debugger
 * dev'essere una scelta: si scrive `<body class="app">`.
 */
:where(body.app){max-width:var(--wrap,880px);padding:16px}

:where(body.app) h1{font-size:20px;margin:4px 0 2px}
:where(body.app) .sub{color:var(--mut);margin:0 0 14px;font-size:13px}
:where(body.app) .cardtitle{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin:0 0 8px}
:where(body.app) .card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:14px}

:where(body.app) button{background:var(--acc);color:var(--accfg);border:0;border-radius:8px;
                padding:8px 13px;font-weight:600;cursor:pointer;font-size:14px}
:where(body.app) button.sec{background:transparent;color:var(--fg);border:1px solid var(--bd)}
:where(body.app) button.warn{background:var(--err);color:var(--errfg)}
:where(body.app) button:disabled{opacity:.45;cursor:default}

:where(body.app) input,:where(body.app) select{background:var(--bg);color:var(--fg);border:1px solid var(--bd);
                               border-radius:7px;padding:7px 9px;font:inherit}
:where(body.app) input:disabled,:where(body.app) select:disabled{opacity:.45}
:where(body.app) input[type=range]{padding:0;accent-color:var(--acc)}
:where(body.app) .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
:where(body.app) label{color:var(--mut);font-size:13px}

/* Targhetta di STATO CORRENTE (connesso, in gara, fermo): parla del momento.
   Da non confondere con .badge, che parla di quanto ci si può fidare di
   un'app e sta nell'indice. */
:where(body.app) .pill{font-size:12px;padding:2px 9px;border-radius:20px;border:1px solid var(--bd);
               color:var(--mut);vertical-align:middle}
:where(body.app) .pill.on,:where(body.app) .pill.run{color:var(--ok);border-color:var(--ok)}
:where(body.app) .pill.warn,:where(body.app) .pill.pause,:where(body.app) .pill.flag{color:var(--warn);border-color:var(--warn)}
:where(body.app) .pill.bad,:where(body.app) .pill.stop{color:var(--err);border-color:var(--err)}

:where(body.app) code,:where(body.app) .val,:where(body.app) .kv{font-family:ui-monospace,Menlo,Consolas,monospace}
:where(body.app) .val{color:var(--mut);font-size:13px}
:where(body.app) .kv{font-size:13px}
:where(body.app) .ok{color:var(--ok)} :where(body.app) .bad{color:var(--err)} :where(body.app) .warn{color:var(--warn)}
:where(body.app) .muted,:where(body.app) .mutbox{color:var(--mut);font-size:12.5px}
:where(body.app) .warnbox{color:var(--warn);font-size:13px;margin-top:6px}

:where(body.app) table{border-collapse:collapse;width:100%;font-size:13px}
:where(body.app) td,:where(body.app) th{border-bottom:1px solid var(--bd);padding:6px 8px;text-align:left}
:where(body.app) th{color:var(--mut)}

/* Il registro grezzo: c'è in tutti i debugger, ed è il motivo per cui esistono. */
:where(body.app) #log,:where(body.app) .log{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
          white-space:pre-wrap;max-height:200px;overflow:auto;background:var(--bg);
          border:1px solid var(--bd);border-radius:8px;padding:10px}

/* ---- Targhette di stato: la convenzione ---------------------------------
 *
 * Il colore risponde a UNA domanda sola: quanto ci possiamo fidare?
 *
 *   verde   `ok`        provata su hardware vero, funziona
 *   giallo  `partial`   provata: qualcosa va, qualcosa no
 *   giallo  `untested`  MAI provata su hardware: non lo sappiamo
 *   rosso   `broken`    provata, e NON funziona
 *   blu     `wip`       in costruzione, ci stiamo lavorando adesso
 *   grigio  `rough`     esiste ma è appena abbozzata
 *   (niente)            pagina statica: non ha uno stato da dichiarare
 *
 * ⚠️ Il rosso è riservato a «lo abbiamo provato e non va». «Non lo sappiamo»
 * è giallo, non rosso: sono due informazioni diverse, e dipingerle uguali
 * toglie a chi legge l'unica cosa che gli serve — se vale la pena provarci.
 * Per lo stesso motivo `partial` e `untested` condividono il giallo: dicono
 * entrambe «guarda con attenzione», e cambia solo quanto ne sappiamo.
 */
.badge{font-size:11px;padding:2px 9px;border-radius:20px;border:1px solid var(--bd);color:var(--mut)}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.partial,
.badge.untested{color:var(--warn);border-color:var(--warn)}
.badge.broken{color:var(--err);border-color:var(--err)}
.badge.wip{color:var(--acc);border-color:var(--acc)}
.badge.rough{color:var(--mut);border-color:var(--bd)}

/* ---- Fasce in cima alla pagina ------------------------------------------
 * Aggiornamento disponibile, oppure il browser non ha quello che serve.
 *
 * Fuori da `body.app` apposta: è una CLASSE, non un selettore di elemento, e
 * quindi non arriva da sola dove nessuno l'ha chiesta. Le stesse fasce ce le
 * hanno l'indice, la guida e le due PWA, che la cornice dei debugger non la
 * indossano: prima ognuna se le riscriveva nel suo <style>.
 *
 * ⚠️ Chi parte nascosto lo dice con l'attributo `hidden`, non con un
 * `display:none` qui dentro, e si accende TOGLIENDO `hidden` — mai con
 * `style.display`. */
.banner{border-radius:10px;padding:10px 14px;margin-bottom:12px;font-weight:600}
.banner.error,.banner.nope{background:var(--err);color:var(--errfg);padding:12px 14px}
.banner.upd{background:var(--acc);color:var(--accfg)}
.banner.upd button{background:var(--accfg);color:var(--acc);border:0;border-radius:8px;
                   padding:6px 12px;margin-left:8px;font:inherit;font-weight:700;cursor:pointer}
/* Un link dentro una fascia piena prende il colore del testo: l'accento su
   rosso non si leggeva. */
.banner a{color:inherit;text-decoration:underline}

/* Avvisi e note in piccolo. */
.note{background:rgba(224,168,0,.12);border:1px solid var(--warn);border-radius:10px;
      padding:11px 14px;margin:10px 0 14px;font-size:13px;line-height:1.55}
.note.info{background:rgba(93,176,255,.12);border-color:var(--acc)}
.note b{color:var(--warn)}
.note.info b{color:var(--acc)}
.hint{color:var(--mut);font-size:12.5px}
.hint.warn{color:var(--warn)}

/* Il piè di pagina, uguale su tutte le pagine: in fondo la versione che sta
   girando (`.ver`, da confrontare a colpo d'occhio con quella pubblicata), e
   sopra il disclaimer — che i18n.js infila qui dentro se il piè c'è. Niente
   opacità: il grigio smorzato è già al limite del leggibile. */
footer{color:var(--mut);font-size:12px;margin-top:24px;padding-top:12px;border-top:1px solid var(--bd)}
footer p{margin:6px 0}
footer .disc{font-size:11px;line-height:1.55}
footer .ver{font-family:ui-monospace,Menlo,Consolas,monospace}
footer .discbox{margin:10px 0}

/* Contenuto largo (tabelle, blocchi di codice) su schermo stretto.
   ⚠️ Deve scorrere DENTRO il suo riquadro: se lasci sbordare la tabella è la
   PAGINA a scorrere in orizzontale, e allora si sposta tutto — titoli, testo,
   pulsanti — per colpa di una colonna sola. Avvolgi la tabella in .tbwrap. */
.tbwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}