/* ═══════════════════════════════════════════════════════════════════════════
   easy · il tabellone, sul web
   ───────────────────────────────────────────────────────────────────────────
   Il sistema per le **pagine di servizio** del sito: privacy, termini,
   assistenza, sicurezza dei minori, 404. La tesi sta in
   `aura_app/lib/config/brand.dart` e non si ripete qui; questi sono i valori,
   che sono gli stessi.

   ── Perché è un file, e non cinque copie ──
   Prima ognuna di queste pagine aveva il suo `<style>` da duecento righe, e
   siccome erano copie fatte in momenti diversi erano già divergenti: la 404
   caricava Plus Jakarta Sans e Sora, la privacy Space Grotesk, e tutte e cinque
   dichiaravano un corallo `#FF6B6B` e un viola `#6C5CE7` che nel sistema non
   esistono più. Un token cambiato in un posto solo non le raggiungeva.

   ── Le regole, che discendono tutte dall'oggetto ──
    1. La mezzeria. Ogni targa ha una riga orizzontale: è dove si apre.
    2. Targhe, non schede: raggio piccolo, bordo netto, **nessuna ombra**.
    3. Tutto si incolonna: cifre a larghezza fissa, sempre.
    4. Due scritture: le diciture sono incise (mono, maiuscolo, spaziato) e
       non cambiano mai; il contenuto scatta (Archivo).
    5. Un colore che vuol dire «in partenza», con due soli compagni.
    6. Il movimento è uno solo: il salto.

   In questo foglio non c'è **un solo** gradiente, alone, vetro smerigliato o
   ombra sfocata. Se qualcuno ne rimette uno non è una questione di gusto: è
   fuori sistema.

   ── I caratteri sono nostri ──
   Serviti da qui, non da Google Fonts: una pagina che chiama Google Fonts manda
   l'indirizzo IP di chi la apre a Google prima ancora di finire di caricare, e
   la privacy di easy dichiara che non ci sono strumenti di terze parti. Era
   scritto nell'informativa e smentito dall'informativa stessa, che ne caricava
   due famiglie.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('fonts/plexmono-regular-latin.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('fonts/plexmono-semibold-latin.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}

:root {
  /* Il pannello, di sera. È il default: un tabellone si legge al buio. */
  --pannello:   #0F1216;
  --piastra:    #171B21;
  --piastra-2:  #1E242C;
  --piastra-3:  #262D37;
  --fessura:    #0F1216;
  --filetto:    rgba(255,255,255,.10);
  --filetto-2:  rgba(255,255,255,.20);
  --avorio:     #ECEFF3;
  --avorio-2:   #98A2B0;
  --avorio-3:   #667080;

  /* I tre stati di una riga, che sono anche le tre risposte a un invito. */
  --ambra:      #FFB400;
  --ambra-txt:  #FFC233;
  --verde:      #35C08A;
  --rosso:      #E5484D;

  --r-sharp: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px;
  --gutter: 22px;
  --page: 780px;

  --dur-fast: 90ms; --dur: 150ms;
  --scatto: cubic-bezier(0.16, 1, 0.3, 1);
}

/* La stampa: l'orario stampato. Stessa informazione, altro supporto. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pannello:  #F1F0EC;
    --piastra:   #FFFFFF;
    --piastra-2: #FFFFFF;
    --piastra-3: #E9E8E3;
    --fessura:   rgba(0,0,0,.16);
    --filetto:   rgba(0,0,0,.12);
    --filetto-2: rgba(0,0,0,.24);
    --avorio:    #14181D;
    --avorio-2:  #5A6472;
    --avorio-3:  #767D89;
    /* Sulla carta l'ambra piena dà 1,7:1: bellissima, invisibile. Quando è
       testo si scurisce fino a dare 5,3:1 su bianco. Il marchio invece resta
       #FFB400 anche qui, perché lì è una campitura grande e non del testo. */
    --ambra-txt: #8A5D00;
    --verde:     #1C7F5C;
    --rosso:     #B4272C;
  }
}
:root[data-theme="light"] {
  --pannello:#F1F0EC; --piastra:#FFFFFF; --piastra-2:#FFFFFF; --piastra-3:#E9E8E3;
  --fessura:rgba(0,0,0,.16); --filetto:rgba(0,0,0,.12); --filetto-2:rgba(0,0,0,.24);
  --avorio:#14181D; --avorio-2:#5A6472; --avorio-3:#767D89;
  --ambra-txt:#8A5D00; --verde:#1C7F5C; --rosso:#B4272C;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  background: var(--pannello);
  color: var(--avorio);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--avorio); }
::selection { background: var(--ambra); color: #0F1216; }
:focus-visible { outline: 3px solid var(--ambra); outline-offset: 3px; border-radius: 2px; }

/* ── Le due scritture ──────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.06; letter-spacing: -.042em;
              text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); margin-top: 46px; margin-bottom: 14px; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; margin-top: 30px; margin-bottom: 8px; }
p, ul, ol { margin: 0 0 16px; }
ul, ol { padding-left: 1.25em; }
li { margin: 6px 0; }
strong { font-weight: 700; }

/* Il dato: se il valore può cambiare da solo, si scrive in mono. */
.dato {
  font-family: 'PlexMono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
/* La dicitura incisa: non cambia mai. Se il testo che ci metti dentro cambia,
   non è una dicitura — è un dato, e va in .dato. */
.dicitura {
  display: inline-block;
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: .68rem; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--avorio-3);
}
.ambra { color: var(--ambra-txt); }
.lead { color: var(--avorio-2); font-size: clamp(1.05rem, 1.9vw, 1.2rem);
        line-height: 1.6; max-width: 56ch; }
/* Il mono ha un occhio più grande dell'Archivo allo stesso corpo: dentro una
   riga di testo va rimpicciolito, o la data sembra gridata. */
.lead .dato, p .dato { font-size: .92em; }
.muto { color: var(--avorio-2); }

/* ── Il marchio ────────────────────────────────────────────────────────────
   La cella: una «e» condensata tagliata dallo spacco della targa. Le misure
   sono generate in `tools/cella.py` e valgono per l'app, per il sito e per il
   caricamento della web app: chi ne cambia una la cambia lì. */
.marchio { width: 26px; height: 26px; color: var(--ambra); flex: none; }

/* ── Impaginazione ─────────────────────────────────────────────────────── */
.pagina { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
.mezzeria { border: 0; height: 1px; background: var(--filetto); margin: 0; }

header.barra {
  border-bottom: 1px solid var(--filetto);
  background: var(--pannello);
}
.barra-in { display: flex; align-items: center; gap: 14px; height: 66px; }
.barra-in a.segno { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.barra nav { display: flex; gap: 20px; margin-left: auto; }
.barra nav a { color: var(--avorio-2); font-size: .88rem; font-weight: 500;
               text-decoration: none; transition: color var(--dur) var(--scatto); }
.barra nav a:hover { color: var(--avorio); }
@media (max-width: 620px) { .barra nav { display: none; } }

main { padding-block: clamp(38px, 7vw, 68px) clamp(56px, 10vw, 96px); }
.testata { margin-bottom: clamp(28px, 5vw, 44px); }
.testata .dicitura { margin-bottom: 14px; }
.testata h1 { margin-bottom: 16px; }

/* ── La targa ──────────────────────────────────────────────────────────────
   Campitura piatta, filetto di un pixel, raggio piccolo. Una targa è
   **avvitata** al pannello, non appoggiata su un vetro: niente ombra. */
.targa {
  background: var(--piastra);
  border: 1px solid var(--filetto);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.targa > :last-child { margin-bottom: 0; }
.targa + .targa { margin-top: 14px; }

/* ── I tasti ───────────────────────────────────────────────────────────── */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--scatto), border-color var(--dur) var(--scatto);
}
.tasto-pieno { background: var(--ambra); color: #0F1216; }
.tasto-pieno:hover { background: var(--ambra-txt); }
.tasto-vuoto { background: transparent; color: var(--avorio); border-color: var(--filetto-2); }
.tasto-vuoto:hover { background: var(--piastra-2); }
.azioni { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Lo stato: la targhetta che dice come sta una riga ─────────────────── */
.stato {
  display: inline-block;
  font-family: 'PlexMono', monospace; font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 8px; border: 1px solid currentColor; border-radius: var(--r-sharp);
  color: var(--avorio-2);
}
.stato.partenza { color: var(--ambra-txt); }
.stato.orario   { color: var(--verde); }
.stato.soppresso{ color: var(--rosso); }

/* ── Il testo lungo dei documenti ──────────────────────────────────────── */
.documento { max-width: 68ch; }
.documento a { color: var(--ambra-txt); text-underline-offset: 3px; }
.documento table { width: 100%; border-collapse: collapse; margin: 0 0 20px;
                   font-size: .95rem; display: block; overflow-x: auto; }
.documento th, .documento td { text-align: left; padding: 11px 12px;
                               border-bottom: 1px solid var(--filetto); vertical-align: top; }
.documento th { font-family: 'PlexMono', monospace; font-size: .66rem; font-weight: 600;
                letter-spacing: .15em; text-transform: uppercase; color: var(--avorio-3); }
.documento td { color: var(--avorio-2); }
.documento td:first-child { color: var(--avorio); font-weight: 600; }

/* ── Il piede ──────────────────────────────────────────────────────────── */
footer.piede { border-top: 1px solid var(--filetto); }
.piede-in { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
            padding-block: 26px 40px; }
.piede-in nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.piede-in a { color: var(--avorio-3); font-size: .85rem; text-decoration: none; }
.piede-in a:hover { color: var(--avorio); }
.piede-in .dicitura { margin-left: auto; }
@media (max-width: 620px) { .piede-in .dicitura { margin-left: 0; width: 100%; } }

/* ══ LE CELLE ══════════════════════════════════════════════════════════════
   Una fila di targhe che scatta: `steps()`, e fra un carattere e l'altro non
   c'è niente da vedere. È la primitiva di movimento del sistema, messa in
   scena — la stessa che si vede in `aura_app/web/index.html` mentre parte
   l'app, con le stesse misure. */
.celle { display: flex; gap: 3px; }
.cella {
  position: relative; width: 22px; height: 34px; overflow: hidden;
  background: var(--piastra-3); border-radius: 1px;
}
/* La fessura: dove la targa si apre. È il segno del sistema. */
.cella::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -.5px; background: var(--fessura); z-index: 2;
}
.cella u { display: block; text-decoration: none;
           animation: riffa var(--d) steps(var(--n)) infinite; }
.cella b {
  display: block; height: 34px; line-height: 34px; text-align: center;
  font-family: 'PlexMono', monospace; font-size: 1rem; font-weight: 600;
  color: var(--avorio); font-variant-numeric: tabular-nums;
}
@keyframes riffa {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--n) * -34px)); }
}
@media (prefers-reduced-motion: reduce) { .cella u { animation: none; } }