/* ═══════════════════════════════════════════════════════════════════════════
   LO STAMPO — i colori di casa, dichiarati UNA VOLTA SOLA.
   Servito su /app/stile.css, incluso da tutte le app. 12/08/2026.

   PERCHÉ ESISTE
   Le cinque app avevano lo stesso colore scritto a mano cinque volte, e si era
   già rotto in tre punti:
     · #e8e4db (la linea dei bordi) c'era in tutte e cinque con DUE nomi
       diversi — `--bd` in Guard/Tempra/Piano, `--border` in Argo/Studio;
     · lo stesso RUOLO aveva colori diversi: il grigio del testo secondario era
       #87837a in Guard/Studio/Tempra e #57534a in Argo/Piano;
     · l'ambra dell'accento era di tre tonalità: #c8862a, #e0902f, #d9a441.
   Questa è la stessa classe di difetto della mappa ricopiata a mano invece che
   importata: due copie della stessa cosa, e una delle due invecchia da sola.

   E LA DERIVA NON ERA UN GUSTO, ERA UN DIFETTO — misurato, non discusso.
   Contrasto sulla carta #faf9f7 (serve 4,5 per il testo piccolo):
       #87837a  →  3,59   NON PASSA   (Guard, Studio, Tempra)
       #57534a  →  7,28   passa       (Argo, Piano)
       #9a6a1a  →  4,48   NON PASSA per un pelo
       #946417  →  4,87   passa       ← scelto, otticamente identico
   Tre app su cinque avevano il testo secondario troppo chiaro per essere letto
   al sole. Non se n'era accorto nessuno perché nessuno lo aveva mai MISURATO.

   E POI C'ERANO LE ETICHETTINE (12/08, seconda passata — «applica»).
   Il primo giro aveva lasciato aperta una cosa e l'aveva dichiarata invece di
   sistemarla: il tenue #b3afa4 stava a 2,08 di contrasto — un quinto del
   necessario — e sopra ci finivano PAROLE VERE. Quattro in Guard, quattro in
   Argo, trentadue nello Studio, trecentosessantaquattro nel piano: le ore
   degli avvisi, le date, i nomi delle sezioni, i «da 2h · rivisto 11 volte».
   «Decorativo» era una scusa, non una descrizione: se ci si legge qualcosa,
   è testo, e il testo si legge.
       #b3afa4  →  2,08 su carta / 1,91 sulla scheda incassata   NON PASSA
       #6f6b61  →  5,05 su carta / 4,62 sulla scheda incassata   passa
   La soglia si misura sul fondo PEGGIORE, non su quello comodo: la stessa
   etichetta sta sia sulla carta sia dentro un riquadro incassato, e se passa
   solo su uno dei due, non passa.
   Resta chiaramente più leggera del grigio di servizio (5,1 contro 7,3): la
   gerarchia — inchiostro, grigio, tenue — si vede ancora tutta.

   COSA STA QUI E COSA NO
   Qui sta ciò che è COMUNE: la carta, l'inchiostro, i tre semafori, l'ombra,
   i raggi, i tempi. NON sta qui l'accento d'identità — la fiamma ambra di
   Guard, il verderame di Argo, il verde di Tempra, la paglia. Quelli DEVONO
   essere diversi: sono il modo in cui riconosci l'app da lontano. Un file di
   stampo che appiattisse anche quelli toglierebbe la personalità invece di
   dargliela.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── la carta: i quattro piani su cui si appoggia tutto ── */
  --carta:#faf9f7;        /* lo sfondo della pagina */
  --foglio:#fff;          /* le schede */
  --foglio2:#f1efe9;      /* la scheda incassata, il premuto */
  --linea:#e8e4db;        /* i bordi e i separatori */

  /* ── l'inchiostro: tre pesi, dal più forte al più leggero ── */
  --inchiostro:#16181c;   /* il testo che conta (16,9 di contrasto) */
  --grigio:#57534a;       /* il testo di servizio (7,3 — passa) */
  --tenue:#6f6b61;        /* le etichettine (5,1 su carta, 4,6 sulla scheda
                             incassata: passa anche sul fondo peggiore) */
  --tenue-segno:#b3afa4;  /* e SOLO per ciò che non è testo: i pallini, i
                             bordi, i tratti. Lì il chiaro va bene. */

  /* ── i tre semafori, e le loro tinte di fondo ── */
  /* ⚠️ IL SEMAFORO SI MISURA SULLA SUA PROPRIA TINTA, non sulla carta.
     L'ambra #946417 fa 4,87 sulla carta e passa — ma il posto dove sta quasi
     sempre e' dentro la sua pastiglia #f7efdf, e li' fa 4,49: manca il minimo
     per un centesimo. Misurare un colore sul fondo comodo invece che su quello
     dove vive davvero e' la stessa scorciatoia della sonda che bussa a
     un'altra porta. #8f6115 fa 5,13 e 4,72, ed e' indistinguibile a occhio. */
  --sereno:#39744c;       --sereno-t:#e9f1ea;   /* 5,28 e 4,83 */
  --attenzione:#8f6115;   --attenzione-t:#f7efdf;   /* 5,13 e 4,72 */
  --allarme:#b3382e;      --allarme-t:#f7e8e5;   /* 5,67 e 5,01 — passava */
  /* IL GRADINO (13/08): il filo d'oro che segna «qui è cambiato il metro».
     Non è un colore d'allarme apposta — è una riga di STORIA, non un guasto.
     Viveva dentro tempra.html, e il gradino nasce oggi anche in Guard: se
     restasse là dentro le due app direbbero la stessa cosa con due colori
     diversi, e nessuno dei due diventerebbe un'abitudine. La forma sta in
     docs/stampo_app.md §1c; qui sta il colore, in un posto solo. */
  --paglia:#d9a441;       --paglia-t:#faf1de;

  /* ── la materia ── */
  --ombra:0 1px 3px rgba(24,22,16,.06),0 1px 2px rgba(24,22,16,.04);
  --raggio:16px;
  --raggio-s:10px;

  /* ── il tempo: le animazioni si misurano da qui, non a occhio ── */
  --moto:.22s;
  --moto-lento:.4s;
  --molla:cubic-bezier(.34,1.56,.64,1);

  /* ══ I VECCHI NOMI RESTANO VIVI ══
     Ogni app aveva già il suo vocabolario, e riscrivere ogni `var(--bd)` in
     ogni foglio sarebbe stato un cambio di migliaia di righe per zero
     guadagno visibile — cioè il modo migliore per rompere qualcosa senza
     accorgersene. I nomi vecchi diventano indicazioni verso i nuovi: da qui
     in poi c'è un posto solo dove cambiare un colore, e le due grafie di
     «bordo» smettono di poter divergere perché puntano allo stesso punto. */
  --bg:var(--carta);
  --card:var(--foglio);
  --card2:var(--foglio2);
  --bd:var(--linea);
  --border:var(--linea);
  --ink:var(--inchiostro);
  --mut:var(--grigio);
  --faint:var(--tenue);
  --faint-segno:var(--tenue-segno);
  --ok:var(--sereno);
  --ok-t:var(--sereno-t);
  --okbg:var(--sereno-t);
  --bassa:var(--sereno);
  --bassa-t:var(--sereno-t);
  --warn:var(--attenzione);
  --warn-t:var(--attenzione-t);
  --warnbg:var(--attenzione-t);
  --media:var(--attenzione);
  --media-t:var(--attenzione-t);
  --bad:var(--allarme);
  --bad-t:var(--allarme-t);
  --badbg:var(--allarme-t);
  --alta:var(--allarme);
  --alta-t:var(--allarme-t);
  --sh:var(--ombra);
}

/* il testo non si ingrandisce da solo quando il telefono ruota */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ══ QUANDO IL MINI NON RISPONDE ══
   /app/vivo.js mette una striscia fissa in cima e accende questa classe. La
   pagina scende della sua altezza, misurata al momento: se restasse dov'è, la
   striscia coprirebbe l'intestazione — e un avviso che per farsi vedere
   nasconde il nome dell'app non ha risolto niente.
   Il guscio a tutta altezza (Guard) si accorcia invece di sfondare in basso. */
html.vivo-staccato body{padding-top:var(--vivo-alta,0px)}

/* ⚠️ QUI C'ERA UNA RIGA CHE MUTILAVA TEMPRA, e l'ha trovata la spazzata degli
   scettici (12/08). Diceva:
       html.vivo-staccato .app{height:calc(100dvh - var(--vivo-alta,0px))}
   Il commento che le stava sopra la spiegava così: «il guscio a tutta altezza
   (Guard)». Ma `.app` non è un nome di Guard: in Tempra `.app` è il
   contenitore di TUTTA la pagina, non ha nessuna altezza dichiarata, e ha
   overflow:clip. Imponendogli un'altezza di una schermata, tutto ciò che sta
   sotto veniva tagliato — e `clip` non crea niente che scorra, quindi Tempra
   smetteva proprio di scorrere. Corpo, ordine, promemoria, allenamento:
   irraggiungibili.
   E succedeva ESATTAMENTE nell'unico momento per cui la striscia esiste — mini
   spento, telefono senza campo — cioè quando l'app serve di più e nessuno può
   ripararla.
   La lezione è la stessa di stamattina, girata al contrario: un foglio comune
   non può conoscere i nomi delle stanze di casa altrui. `.app` in Guard e
   `.app` in Tempra sono due cose diverse con lo stesso nome, e lo stampo non
   ha modo di distinguerle. Chi ha un guscio a tutta altezza se lo accorcia da
   sé, nel proprio foglio, dove sa cosa sta accorciando. */

/* ═══ CHI HA CHIESTO PIÙ CONTRASTO LO OTTIENE ═══
   Rubato a Guitar Wiz (Apple Design Award 2026, categoria Inclusività): ha
   vinto non perché ha inventato una modalità sua, ma perché ha USATO quelle
   che il telefono ha già. Se nelle Impostazioni dell'iPhone c'è «Aumenta
   contrasto», da qui in poi le app se ne accorgono — tutte insieme, senza che
   nessuna debba saperlo. */
@media (prefers-contrast: more){
  :root{
    --grigio:#43403a;      /* 9,9 di contrasto */
    --tenue:#5b574e;       /* 6,9 — le etichettine smettono di essere leggere */
    --tenue-segno:#8d897e; /* anche i pallini e i tratti si vedono */
    --linea:#d3cec1;       /* i bordi si vedono, non si intuiscono */
  }
}

/* ═══ CHI HA CHIESTO MENO MOVIMENTO LO OTTIENE ═══
   È la lezione del 2026, e l'ha pagata Apple: Liquid Glass è stato ritirato a
   metà perché «aggiunge zero informazione e aggiunge movimento costante»
   (Ars Technica), e a novembre è arrivato l'interruttore per spegnerlo. Qui
   l'interruttore è quello del sistema, e c'era già.

   ⚠️ MA IL MARCHIO CHE GIRA NON SI FERMA, e il motivo è che non è
   decorazione: mentre aggiorna è l'unico modo che ha la pagina di dire «sto
   lavorando, aspetta». Fermarlo a chi ha chiesto meno movimento vorrebbe dire
   consegnargli una schermata ferma e muta, cioè fargli credere che l'app sia
   bloccata. Meno movimento vuol dire niente movimento GRATUITO, non niente
   informazione.

   E IL VELO DEL CARICAMENTO E' ESENTATO QUI, ma si ferma lo stesso — perché
   se lo ferma da solo, in /app/caricamento.js, e fa bene: quel velo il suo
   messaggio lo porta a PAROLE («sto guardando…»), non col movimento. Fermo
   dice ancora tutto. L'esenzione resta scritta qui per non essere io a
   spegnerlo dall'esterno: chi possiede una cosa decide come si ferma. */
@media (prefers-reduced-motion: reduce){
  *:not(:is(.cr-velo,.cr-velo *,.gira,.gira *)),
  *:not(:is(.cr-velo,.cr-velo *,.gira,.gira *))::before,
  *:not(:is(.cr-velo,.cr-velo *,.gira,.gira *))::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}