/* Il foglio di casa. Vale per ogni pagina pubblicata, di ogni progetto.
 *
 * Sorgente unica: questo file vive in valseriana/site/ e viene COPIATO negli
 * altri progetti da bin/sincronizza-casa.mjs, che fallisce se le copie
 * divergono. Due fogli che dicono due grigi diversi sono peggio di un foglio
 * copiato — vedi agents/core/70-design.md.
 *
 * Qui c'è quello che è uguale ovunque: i gettoni, la testata, l'involucro,
 * l'apertura, le carte, le tabelle, la barra bassa. Quello che è di una pagina
 * sola (l'elenco delle tratte, la griglia giorno×ora) resta nella pagina.
 */

/* ── i gettoni ─────────────────────────────────────────────────────────────
   I nomi non cambiano mai. I valori cambiano solo scegliendo un tema.
   Tema «carta»: cruscotti e report. Tema «notte»: i pezzi narrativi. */
:root{
  --bg:#faf8f3; --carta:#fffdf8;
  --ink:#14150f; --ink-2:#3c3e33; --ink-3:#6f7363; --ink-4:#9a9c8d;
  --rule:#e4e1d6; --rule-soft:#efece3;
  --dawn:#e0932f; --dawn-ink:#9a5f0f;

  /* le quattro soglie del traffico: cambiare un colore qui vuol dire
     raccontare due storie diverse dello stesso numero */
  --scorre:#7d8a6a; --sente:#e0932f; --rallenta:#c2661f; --coda:#a63e22;
  --acqua:#5b7f9e; --acqua-velo:#dce7ef;

  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --molla:cubic-bezier(.34,1.4,.5,1);
  --barra-bassa:calc(3.75rem + env(safe-area-inset-bottom));
}
html[data-tema=notte]{
  --bg:#14150f; --carta:#1d1f17;
  --ink:#f3efe3; --ink-2:#d8d3c2; --ink-3:#9a9c8d; --ink-4:#6f7363;
  --rule:#2e3126; --rule-soft:#24271e;
  --dawn:#e0932f; --dawn-ink:#e6a851;
  --acqua-velo:#1e2a33;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;padding-bottom:var(--barra-bassa);
}
a{color:var(--dawn-ink)}

/* ── la testata, che resta ─────────────────────────────────────────────── */
.testa{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(.75rem);border-bottom:1px solid var(--rule);
  padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top));
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
}
.testa .nome{font-family:var(--serif);font-size:1.25rem;line-height:1;margin:0;color:var(--ink)}
.testa .etichetta{font-size:.66rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.testa .quando{margin-left:auto;font-size:.75rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;text-align:right;margin:0}
.testa .pulsa{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;
  background:var(--scorre);margin-right:.3rem;vertical-align:middle}
.testa .pulsa.vecchio{background:var(--rallenta)}

/* il rientro all'hub: la riga che mancava, e per cui si arrivava su una pagina
   senza sapere piu' da dove si era entrati */
.torna{
  flex:0 0 100%;order:-1;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-3);text-decoration:none;
  display:inline-flex;align-items:center;gap:.3rem;margin-bottom:.1rem;
}
.torna:hover,.torna:focus-visible{color:var(--dawn-ink)}

.involucro{max-width:46rem;margin:0 auto;padding:0 1rem}
.involucro.largo{max-width:52rem}

/* ── l'apertura ────────────────────────────────────────────────────────── */
.verdetto{padding:1.5rem 0 1rem}
.occhiello{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .5rem}
.verdetto h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,7vw,2.6rem);
  line-height:1.05;margin:0 0 .5rem;letter-spacing:-.01em;text-wrap:balance}
.verdetto h1 em{font-style:italic;color:var(--dawn-ink)}
.verdetto .riassunto{color:var(--ink-2);margin:0;max-width:46ch}

.cifre{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:1px;
  background:var(--rule);border-radius:.3rem;overflow:hidden;margin:1rem 0 0}
.cifre div{background:var(--carta);padding:.6rem .5rem;text-align:center}
.cifre b{display:block;font-size:1.3rem;line-height:1.1;font-variant-numeric:tabular-nums}
.cifre span{display:block;font-size:.64rem;letter-spacing:.05em;color:var(--ink-3);
  text-transform:uppercase;font-weight:700;margin-top:.15rem}

/* l'avviso di contesto: in cima, perche' cambia come si leggono i numeri sotto */
.avviso{margin:.8rem 0 0;padding:.7rem .8rem;
  background:color-mix(in srgb,var(--dawn) 12%,var(--carta));
  border:1px solid color-mix(in srgb,var(--dawn) 35%,var(--rule));
  border-left:3px solid var(--dawn);border-radius:.3rem}
.avviso p{margin:0;font-size:.84rem;color:var(--ink-2);line-height:1.45}
.avviso strong{color:var(--ink)}

/* ── le tab, che sono anche i filtri ───────────────────────────────────── */
.filtri{position:sticky;top:2.9rem;z-index:20;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(.75rem);
  margin:0 -1rem;padding:.5rem 1rem;display:flex;gap:.4rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.filtri::-webkit-scrollbar{display:none}
.filtri button,.filtri a{flex:0 0 auto;min-height:2.5rem;padding:.35rem .85rem;font:inherit;
  font-size:.82rem;font-weight:700;background:var(--rule-soft);color:var(--ink-2);
  border:1px solid transparent;border-radius:999px;cursor:pointer;white-space:nowrap;
  text-decoration:none;display:inline-flex;align-items:center}
.filtri button[aria-pressed=true],.filtri a[aria-current=page]{background:var(--ink);color:var(--bg)}
.filtri button:focus-visible,.filtri a:focus-visible{outline:2px solid var(--dawn-ink);outline-offset:2px}

/* ── le sezioni ────────────────────────────────────────────────────────── */
section.blocco{margin:2rem 0 0;scroll-margin-top:6rem}
section.blocco > h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;
  line-height:1.15;margin:0 0 .2rem;letter-spacing:-.01em}
section.blocco > .cappello{color:var(--ink-3);font-size:.86rem;margin:0 0 .9rem;max-width:56ch}

.carta{background:var(--carta);border:1px solid var(--rule);border-radius:.4rem;
  padding:.8rem;margin:0 0 .6rem}
.carta > h3{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .1rem}
.carta > .sotto{font-size:.78rem;color:var(--ink-3);margin:0 0 .5rem;font-variant-numeric:tabular-nums}
.carta svg{display:block;width:100%;height:auto;overflow:visible}
.assex{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink-4);
  font-variant-numeric:tabular-nums;margin-top:.25rem}
.nota{font-size:.76rem;color:var(--ink-3);margin:.5rem 0 0}
.nota b{color:var(--ink-2)}

.legenda{display:flex;flex-wrap:wrap;gap:.15rem .9rem;font-size:.7rem;color:var(--ink-3);margin:.4rem 0 0}
.legenda i{display:inline-block;width:1.1rem;height:0;border-top-width:2px;border-top-style:solid;
  vertical-align:middle;margin-right:.3rem}
.legenda .campo{display:inline-block;width:.7rem;height:.7rem;border-radius:.1rem;
  vertical-align:-1px;margin-right:.3rem}

/* piccoli multipli */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.mini{background:var(--carta);border:1px solid var(--rule);border-radius:.35rem;padding:.55rem .6rem}
.mini .capo{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.15rem}
.mini .titolo{font-weight:700;font-size:.84rem;line-height:1.2}
.mini .verso{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.mini .valore{margin-left:auto;font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums}
.mini .dati{font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:.2rem;
  display:flex;flex-wrap:wrap;gap:.1rem .6rem}

/* tabelle */
.tabella{width:100%;border-collapse:collapse;font-size:.8rem}
.tabella th{text-align:left;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;padding:.3rem .4rem;border-bottom:1px solid var(--rule)}
.tabella td{padding:.45rem .4rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tabella .num{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.tabella tr:last-child td{border-bottom:0}
.perche{font-size:.74rem;color:var(--ink-3);line-height:1.35}

/* le targhette: un solo vocabolario di colori per gli stati */
.marca{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:.1rem .38rem;border-radius:.2rem;white-space:nowrap;
  background:var(--rule-soft);color:var(--ink-2)}
.marca.evento{background:#efe0c6;color:#7a4a08}
.marca.compatibile{background:#f2ece0;color:#8a7a55}
.marca.festa{background:#e7e3f2;color:#4a3f78}
.marca.pioggia{background:var(--acqua-velo);color:#2e5771}
.marca.oltre{background:#f3ddd3;color:#8b3616}
.marca.ricorrente{background:#e2e8dc;color:#46543a}
.marca.ignoto{background:var(--rule);color:var(--ink-3)}

/* ── l'attesa ──────────────────────────────────────────────────────────── */
@keyframes onda{0%{background-position:100% 0}100%{background-position:-100% 0}}
.scheletro i{display:block;height:3.5rem;border-radius:.35rem;margin-bottom:.4rem;
  background:linear-gradient(90deg,var(--rule-soft) 30%,var(--carta) 50%,var(--rule-soft) 70%);
  background-size:200% 100%;animation:onda 1.4s linear infinite}

/* ── la barra bassa ────────────────────────────────────────────────────── */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(.75rem);
  border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
.barra a,.barra button{
  min-height:3.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;background:none;border:0;font:inherit;cursor:pointer;
  color:var(--ink-3);text-decoration:none;font-size:.68rem;font-weight:700;letter-spacing:.03em;
}
.barra [aria-current=page],.barra [aria-pressed=true]{color:var(--ink)}
.barra svg{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.barra a:focus-visible,.barra button:focus-visible{outline:2px solid var(--dawn-ink);outline-offset:-3px}

/* ── il piede ──────────────────────────────────────────────────────────── */
footer{padding:2rem 0 1.5rem;border-top:1px solid var(--rule);margin-top:2rem;
  font-size:.78rem;color:var(--ink-3)}
footer p{margin:0 0 .6rem;max-width:60ch}
footer a{font-weight:600}

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