/* Contagiri DS200 / DS300 — foglio locale.
 *
 * ⚠️ Questa app nasceva in una repo tutta sua e aveva una tavolozza propria:
 * nomi diversi (--panel, --line, --text, --muted, --accent) e nessun tema
 * chiaro. Era l'ultima pagina del sito a non usare ../ui.css, e si vedeva:
 * rosso al posto del blu, caratteri da manifesto in classifica, un cronometro
 * gigante che scorreva da solo.
 *
 * È un DEBUGGER: mostra quello che la centralina ha detto, e nient'altro. La
 * gara — con il suo cronometro, la sua classifica e i suoi annunci — è il
 * Cronometro web. I colori e la cornice ora arrivano da ../ui.css: qui resta
 * solo quello che è di questa pagina.
 */

/* La larghezza utile: due colonne di tabelle vogliono più spazio di un modulo. */
:root{--wrap:1040px}

/* ---- cornice ------------------------------------------------------------ */
.topbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
        margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:20px;margin:0}
.brand small{color:var(--mut);font-size:13px}
.conn{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.baud{display:inline-flex;flex-direction:column;gap:2px;font-size:12px;color:var(--mut)}
.baudhint{color:var(--mut);font-size:10px}
.chk{color:var(--mut);font-size:13px;display:inline-flex;align-items:center;gap:6px}

/* `.btn` è il nome storico dei pulsanti di questa pagina, e qui la maggior
   parte sono azioni di servizio: Azzera, Pulisci, Esporta. Il predefinito di
   ui.css è il pulsante ACCENTATO — giusto quando ce n'è uno per riquadro, ma
   qui griderebbero tutti insieme e non si capirebbe più qual è quello che
   conta. Quindi: `.btn` neutro, l'accento solo a `.primary`. */
.btn{background:transparent;color:var(--fg);border:1px solid var(--bd)}
.btn:hover:not(:disabled){border-color:var(--acc)}
.btn.primary{background:var(--acc);color:var(--accfg);border-color:var(--acc)}
.btn.small{padding:5px 10px;font-size:13px}

/* Selettore lingua e ritorno, in alto a sinistra come su tutte le pagine. */
.langline{display:flex;align-items:center;gap:12px;margin-bottom:10px}

/* ---- quello che ha detto la centralina ----------------------------------
   Il numero grande NON scorre: si muove solo quando arriva un frame. Un
   cronometro che gira da solo racconta una gara che nessuno gli ha
   raccontato — ed è esattamente ciò che un debugger non deve fare. */
.clockwrap{background:var(--card);border:1px solid var(--bd);border-radius:12px;
           padding:12px 14px 14px;text-align:center;margin-bottom:14px}
.clockwrap .k{display:block;font-size:11px;color:var(--mut);
              text-transform:uppercase;letter-spacing:.6px}
.bigclock{display:block;font-size:clamp(30px,7vw,58px);line-height:1.05;font-weight:800;
          letter-spacing:1px;font-variant-numeric:tabular-nums;margin-top:4px;
          overflow:hidden;white-space:nowrap;color:var(--fg)}
.bigclock.idle{color:var(--mut)}
/* Il segno vitale del debugger: da quanto tempo non arriva niente. */
.link{display:block;font-size:12px;color:var(--mut);margin-top:6px}
.link.on{color:var(--ok)}
.link.stale{color:var(--warn)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.card.stat{display:flex;flex-direction:column;gap:2px;margin-bottom:0}
.card.stat .k{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.card.stat .v{font-size:18px;font-weight:600}
.card.stat .v.winner{color:var(--warn)}

/* ---- contenuto ---------------------------------------------------------- */
.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
/* ⚠️ Trappola di grid/flex: un elemento NON si restringe sotto la larghezza del
   proprio contenuto finché non gli si dice min-width:0. Con una tabella dentro,
   la colonna si allarga fino a contenerla e a scorrere è tutta la PAGINA —
   avvolgere la tabella in .tbwrap non serve a niente senza questa riga. */
.grid > *{min-width:0}
.card.wide{grid-column:1 / -1}
/* flex-wrap: su schermo stretto titolo e pulsanti vanno a capo invece di
   spingere la card oltre il bordo e far scorrere tutta la pagina. */
.card-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-head h2{font-size:14px;margin:0}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

table.leaderboard td{font-size:14px}
.leaderboard th{font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.leaderboard td.pos{font-weight:800;color:var(--acc)}
.leaderboard td.best{color:var(--acc)}
.leaderboard tr:first-child td.pos{color:var(--warn)}
.leaderboard tr.winrow td{background:rgba(224,168,0,.08)}

.events{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.events li{padding:7px 4px;border-bottom:1px solid var(--bd);font-size:13.5px}
.events .t{color:var(--mut);font-size:12px;margin-right:6px}

/* Il registro grezzo è il motivo per cui questa app esiste: qui sta più
   comodo che altrove, quindi è più alto del predefinito di ui.css. */
.log{max-height:320px;word-break:break-all}
.log .bad{color:var(--err)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

.cmdrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.cmdhex{flex:1;min-width:220px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
#cmd-card.disabled{opacity:.55}
#cmd-card.disabled button,#cmd-card.disabled input,#cmd-card.disabled select{pointer-events:none}


@media (max-width:860px){
  .grid{grid-template-columns:1fr}
}