/* Il vestito del cruscotto: il semaforo, l'elenco delle tratte, il dettaglio.
 *
 * Sorgente unica: vive in valseriana/site/ e viene COPIATO negli altri progetti
 * da bin/sincronizza-casa.mjs, come _casa.css e _cruscotto.js. Vedi
 * agents/core/70-design.md. Quello che e' di una pagina sola resta nella pagina.
 */

/* Quello che e' solo di questa pagina: il semaforo delle soglie e l'elenco
   delle tratte con il loro dettaglio. Tutto il resto — gettoni, testata,
   involucro, apertura, barra bassa — sta in _casa.css, che e' lo stesso file
   su ogni progetto. Vedi agents/core/70-design.md. */

/* il semaforo: quante tratte in che stato, in una riga sola */
.semaforo{display:flex;gap:1px;margin:1rem 0 0;border-radius:.2rem;overflow:hidden;
  background:var(--rule)}
.semaforo div{flex:1 1 0;min-width:0;padding:.55rem .4rem;background:var(--carta);
  text-align:center}
.semaforo b{display:block;font-size:1.35rem;line-height:1.1;
  font-variant-numeric:tabular-nums}
.semaforo span{display:block;font-size:.66rem;letter-spacing:.04em;color:var(--ink-3);
  text-transform:uppercase;font-weight:700;margin-top:.1rem}

/* ── la lista delle tratte ─────────────────────────────────────────────── */
.elenco{list-style:none;margin:.75rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.4rem}
.tratta{background:var(--carta);border:1px solid var(--rule);border-radius:.35rem;
  overflow:hidden}
.tratta > button{
  width:100%;min-height:3.5rem;padding:.7rem .8rem;
  display:grid;grid-template-columns:1fr auto;gap:.15rem .7rem;align-items:center;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.tratta > button:focus-visible{outline:2px solid var(--dawn-ink);outline-offset:-2px}
.tratta .dove{grid-column:1;font-weight:700;font-size:.95rem;line-height:1.25;
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.tratta .verso{font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.tratta .sotto{grid-column:1;font-size:.78rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.tratta .adesso{grid-column:2;grid-row:1 / span 2;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.tratta .min{font-size:1.4rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.tratta .min small{font-size:.6em;font-weight:500;color:var(--ink-3)}
.tratta .delta{font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.tratta .scintilla{grid-column:1 / -1;margin-top:.15rem}
.tratta .scintilla svg{display:block;width:100%;height:1.75rem}

/* aperta */
.tratta[data-aperta=si]{border-color:var(--ink-4)}
.dettaglio{padding:0 .8rem .9rem;border-top:1px solid var(--rule-soft);
  animation:apre .3s var(--molla) both}
@keyframes apre{from{opacity:0;transform:translateY(-.3rem)}}
.dettaglio h3{font-size:.7rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:.9rem 0 .5rem}
.grafico svg{display:block;width:100%;height:8rem}
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(5rem,1fr));
  gap:1px;background:var(--rule);border-radius:.25rem;overflow:hidden;margin-top:.6rem}
.numeri div{background:var(--carta);padding:.5rem .4rem;text-align:center}
.numeri b{display:block;font-size:1rem;font-variant-numeric:tabular-nums}
.numeri span{display:block;font-size:.63rem;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.04em;font-weight:700;margin-top:.1rem}

@media (prefers-reduced-motion:reduce){.dettaglio{animation:none}}

/* da tablet in su la lista respira, ma la barra bassa resta: e' comoda comunque */
@media (min-width:40rem){
  .elenco{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;align-items:start}
  .tratta[data-aperta=si]{grid-column:1 / -1}
}

/* «Mostra le altre N»: l'elenco lungo si tronca, ma lo dice. */
.ancora{list-style:none}
.ancora button{
  width:100%;min-height:2.75rem;padding:.6rem;border:1px dashed var(--rule);
  border-radius:.35rem;background:none;font:inherit;font-size:.82rem;font-weight:700;
  color:var(--ink-3);cursor:pointer;
}
.ancora button:hover{border-color:var(--ink-4);color:var(--ink-2)}