/* ===========================================================================
   ORCA — foglio di stile unico
   Attuazione di docs/ORCA-design-system.md

   Niente framework: Bootstrap porterebbe 200 KB da un CDN per usarne il 5%,
   su un sistema che deve funzionare senza internet. Qui servono venti
   componenti, e scriverli a mano costa meno che spiegare come sovrascriverli.

   Ordine: variabili → base → struttura → componenti → utilità → varianti.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. VARIABILI — tema scuro (predefinito operativo)

   Scuro non per moda: preserva l'adattamento notturno, riduce la firma
   luminosa di una postazione al buio, consuma meno su schermi OLED.
   --------------------------------------------------------------------------- */
:root {
  /* Fondo e superfici — blu notte, la stessa famiglia del sistema precedente
     (map.php: #08111b il fondo, #0c1724/#0d1f33/#142233 i pannelli via via
     più in rilievo). Non è nostalgia: è lo stesso principio di --bg sopra
     (nero puro crea aloni OLED), solo intonato a blu invece che a grigio. */
  /* LE AREE SICURE DEL DISPOSITIVO (isola dinamica, barra di casa) passano da qui, e da
     nessun'altra parte. Non è una comodità: `env()` non si può scrivere da JavaScript, quindi
     finché gli inserti stavano sparsi nelle regole NESSUN controllo poteva provare un iPhone
     con l'isola — e infatti nessuno lo provava. Passando per una variabile, `mobile_check.js`
     la riscrive con i valori veri di un iPhone 16 (59 px sopra, 34 sotto) e misura cosa si
     sovrappone. In produzione restano i valori che dichiara il dispositivo.
     `--cls-h` è l'altezza della banda di classificazione: la somma la fa il CSS, non io. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  /* In ORIZZONTALE gli inserti dell'iPhone non sono sopra e sotto: sono a SINISTRA e a DESTRA,
     dal lato dell'isola, e valgono una sessantina di pixel. Nessuna regola li considerava, e
     coricando il telefono il testo finiva sotto l'isola e sotto gli angoli stondati. */
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --cls-h: 28px;
  --cls-top: calc(var(--cls-h) + var(--sat));
  --cls-bottom: calc(var(--cls-h) + var(--sab));

  --bg:            #08111B;
  --surface:       #0C1724;
  --surface-high:  #0D1F33;
  --surface-hover: #142233;
  --border:        #22334B;
  --border-strong: #314760;

  /* Testo */
  --text:          #CFE0FF;   /* bianco-azzurro smorzato: la stessa tinta del sistema precedente */
  --text-dim:      #9AA9BA;   /* 7:1 sul fondo */
  --text-faint:    #6F8199;   /* solo per elementi non essenziali */

  /* Azione: UN solo accento — il verde acqua del sistema precedente (#2aa79a,
     l'unico colore ripetuto più di sessanta volte in map.php: non un dettaglio,
     la sua identità). Cinque accenti = nessuno sa dove guardare. */
  --accent:        #2AA79A;
  --accent-hover:  #3BC2B3;
  --accent-dim:    rgba(42, 167, 154, 0.14);

  /* Stato — sempre accompagnati da testo e forma, mai soli (26 ottobre 2026: tolto ogni colore che
     non fosse verde o blu notte, su richiesta esplicita. La differenza fra OK, avviso e critico
     non la dà più la tinta — rosso/ambra — ma l'intensità del blu, nella stessa famiglia del
     fondo: più scuro e saturo, più grave. Il principio sopra, testo e forma mai da soli, è ciò che
     tiene leggibile la differenza anche così.) */
  --critical:      #4D7FFF;
  --critical-dim:  rgba(77, 127, 255, 0.16);
  --warning:       #7BA3F0;
  --warning-dim:   rgba(123, 163, 240, 0.14);
  --ok:            #3ECF8E;
  --ok-dim:        rgba(62, 207, 142, 0.14);
  --info:          #9DBCF2;
  --info-dim:      rgba(157, 188, 242, 0.14);

  /* Classificazione: UNCLASSIFIED e RESTRICTED restano verdi (erano già nella sola famiglia
     ammessa); CONFIDENTIAL e SECRET passano dall'ambra/rosso al blu — chiaro e col testo nero
     come gli altri per CONFIDENTIAL, scuro e col testo bianco (già così) per SECRET: più scuro
     e saturo al crescere della sensibilità, non un'altra tinta. */
  --cls-unclass:   #3ECF8E;
  --cls-restrict:  #2AA79A;
  --cls-conf:      #7BA3F0;
  --cls-secret:    #1E3A7A;

  /* Sandbox: la simulazione deve restare riconoscibile a colpo d'occhio, con un blu che non si
     confonde né con l'accento verde né con gli stati sopra. */
  --sandbox:       #5577C2;

  /* Amministratore: un SESTO colore, e il progetto dice che gli accenti devono
     restare pochi. Si giustifica per lo stesso motivo del viola della sandbox —
     non è un accento, è il colore di un MODO: «ciò che vedi non è quello che
     vedrebbe chiunque altro». Verde acqua chiaro (e non il verde acqua pieno dell'accento, né il rosso) perché amministrare non è
     un allarme, e non viola perché non è una simulazione: confondere i due modi
     sarebbe peggio che non marcarli. */
  --admin:         #7FE3D6;

  /* Spaziatura su griglia da 4 px */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  16px;

  /* Bersaglio minimo: 48 px e non 44, perché qui si tocca con i guanti */
  --touch: 48px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);
}

/* Tema chiaro: per l'uso alla luce diretta del sole. */
[data-theme="light"] {
  --bg:            #F5F7FA;
  --surface:       #FFFFFF;
  --surface-high:  #FFFFFF;
  --surface-hover: #EDF1F6;
  --border:        #D5DDE7;
  --border-strong: #B4C0CE;
  --text:          #101820;
  --text-dim:      #4A5765;
  --text-faint:    #6B7A8C;
  --accent:        #0E7C72;   /* lo stesso verde acqua del tema scuro, scurito per restare leggibile sul bianco */
  --accent-hover:  #0B655D;
  --accent-dim:    rgba(14, 124, 114, 0.10);
  --critical:      #1D3E8F;
  --warning:       #2F5FBF;
  --ok:            #1B7F4E;
  --shadow: 0 1px 2px rgba(16,24,32,.08), 0 4px 12px rgba(16,24,32,.06);
}

/* ---------------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS non deve ingrandire in orizzontale */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;                   /* come iOS: più piccolo non si legge su un mezzo che sobbalza */
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Spazio per le bande di classificazione fisse */
  padding-block: var(--cls-top) var(--cls-bottom);
  padding-inline: var(--sal) var(--sar);
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

p { margin: 0 0 var(--s3); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Indicatore di fuoco sempre visibile: il sistema deve essere usabile da
   tastiera da chi sta al banco otto ore. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Cifre incolonnate: ID, orari e quantità si scorrono con l'occhio solo se
   allineati. */
.num, .id, time, td.num { font-variant-numeric: tabular-nums; }

/* DTG: si legge a gruppi, non come una parola. */
.dtg {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   3. BANDA DI CLASSIFICAZIONE
   Fissa sopra e sotto. Non si chiude, non scorre via: è un obbligo
   procedurale, e chi guarda lo schermo di sfuggita deve sapere cosa vede.
   --------------------------------------------------------------------------- */
.cls-bar {
  position: fixed;
  inset-inline: 0;
  z-index: 100;
  height: var(--cls-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--cls-restrict);
  color: #000;
  /* La banda colorata arriva ai bordi veri dello schermo, la sua SCRITTA no: coricato,
     «RESTRICTED» finiva sotto l'isola. */
  padding-inline: var(--sal) var(--sar);
}
.cls-bar--top    { top: 0;    padding-top: var(--sat);    height: var(--cls-top); }
.cls-bar--bottom { bottom: 0; padding-bottom: var(--sab); height: var(--cls-bottom); }

.cls-unclassified { background: var(--cls-unclass); color: #000; }
.cls-restricted   { background: var(--cls-restrict); color: #000; }
.cls-confidential { background: var(--cls-conf);     color: #000; }
.cls-secret       { background: var(--cls-secret);   color: #fff; }
/* Pagine senza dati: la classificazione la assegna il server all'invio */
.cls-draft        { background: var(--text-faint);   color: #000; }

/* Cornice della sandbox: quando si simula, l'intera pagina lo dichiara.
   Confondere un'esercitazione con la realtà è un errore che costa caro. */
body.is-sandbox { box-shadow: inset 0 0 0 4px var(--sandbox); }
body.is-sandbox .cls-bar { background: var(--sandbox); color: #000; }
.sandbox-notice {
  background: var(--sandbox);
  color: #000;
  text-align: center;
  padding: var(--s2);
  font-weight: 600;
  font-size: 15px;
}

/* Stessa forma della striscia della simulazione, colore diverso: sono due modi
   diversi dello stesso schermo, e devono assomigliarsi quanto basta a leggerli
   allo stesso modo, senza poter essere scambiati. Entrambe le strisce possono
   comparire insieme (un amministratore dentro una sandbox): stanno in colonna,
   non si sovrappongono. */
.admin-notice {
  background: var(--admin);
  color: #000;
  text-align: center;
  padding: var(--s2);
  font-weight: 600;
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
   4. STRUTTURA
   --------------------------------------------------------------------------- */
.shell { max-width: 900px; margin: 0 auto; padding: var(--s4); }
.shell--wide { max-width: 1400px; }

/* I pulsanti vanno a capo invece di sbordare: una lingua più lunga dell'italiano (il francese)
   non deve spingere un comando fuori dallo schermo. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s2);
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  position: sticky;
  top: var(--cls-top);
  z-index: 50;
}
/* IL TITOLO NON SI LASCIA SCHIACCIARE. Con `min-width: 0` il flex lo riduceva quasi a zero pur
   di far stare TUTTI i bottoni sulla prima riga: sulla home di iPhone 16 «cos · COS» finiva
   incolonnato in tre righe di poche lettere, con i bottoni che gli passavano sopra — è lo
   «sfasato» segnalato il 22 ottobre 2026. Con una larghezza minima leggibile i bottoni vanno a
   capo, che è ciò che `flex-wrap` è lì per fare. 8em stanno comode anche a 320 px, e una
   schermata con la freccia più un bottone resta su una riga sola. */
.topbar__title { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; }
/* SOLO DOVE NON C'È LA FRECCIA. Una schermata interna ha freccia + titolo + uno o due bottoni e
   sta su una riga: imporre lì una larghezza minima al titolo mandava a capo i bottoni e rubava
   30 px di altezza alla mappa — `terrain_check.js` se n'è accorto, perché «Crea qui» finiva
   sotto la cornice. La home invece non ha freccia e ha cinque bottoni: lì senza una larghezza
   minima il flex schiacciava «cos · COS» in tre righe di poche lettere con i bottoni sopra,
   ed è lo «sfasato» segnalato dall'iPhone 16 il 22 ottobre 2026. */
.topbar:not(:has(.topbar__back)) .topbar__title { flex: 1 1 auto; min-width: min(100%, 8em); }
.topbar__back {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch); min-height: var(--touch);
  margin-inline-start: calc(var(--s3) * -1);
  color: var(--text); font-size: 22px;
}

/* Navigazione per ufficio: l'utente atterra sul proprio, non su un menù di
   funzioni. */
.office-nav {
  display: flex; gap: var(--s2);
  overflow-x: auto;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  scrollbar-width: none;
}
.office-nav::-webkit-scrollbar { display: none; }
.office-nav a {
  flex: 0 0 auto;
  /* 48, non 40: da quando questa fascia è la via per arrivare alla pagina
     dell'ufficio non è più una decorazione, ed è la regola del sistema —
     si tocca con i guanti. */
  min-height: 48px;
  display: inline-flex; align-items: center;
  padding: 0 var(--s4);
  border-radius: 999px;
  background: var(--surface-high);
  color: var(--text-dim);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
}
.office-nav a[aria-current="page"] { background: var(--accent); color: #fff; }

/* Ciò che un ufficio registra. Si incolonna su schermo stretto invece di
   scorrere di lato: una fila che scorre nasconde l'ultimo pulsante, e un
   inserimento che non si vede è un inserimento che non si fa. */
/* ---------------------------------------------------------------------------
   IL QUADRO OPERATIVO — restringere, 23 ottobre 2026
   ---------------------------------------------------------------------------
   Le pillole dei tipi sembravano filtri ed erano testo inerte. Adesso sono
   collegamenti, e devono SEMBRARE toccabili: bordo, bersaglio da 44 px, e
   quella in uso marcata in modo che si veda da lontano quale taglio si sta
   guardando. */
.cop-search {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-block-end: var(--s3);
}
.cop-search .input { flex: 1 1 220px; min-width: 0; }

.cop-types { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cop-type {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-high); color: var(--text-dim);
  font-size: 13px; text-decoration: none; white-space: nowrap;
}
.cop-type:hover { background: var(--surface-hover); text-decoration: none; }
.cop-type:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Il filtro in uso: non solo il colore — chi non distingue i colori deve
   vederlo lo stesso, e il bordo pieno lo dice anche in bianco e nero. */
.cop-type.is-on {
  border-color: var(--accent); background: var(--accent-dim);
  color: var(--text); font-weight: 600;
}
.cop-type__n { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.cop-type.is-on .cop-type__n { color: var(--accent); }
.cop-reset { margin-inline-start: var(--s2); }

/* ---------------------------------------------------------------------------
   LA PAGINA DELL'UFFICIO — 23 ottobre 2026
   ---------------------------------------------------------------------------
   Entrando in J3 non si capiva di cosa rispondesse l'ufficio né che flusso
   seguisse il lavoro. Due blocchi nuovi: il perimetro in testa, e il lavoro
   diviso per quello che bisogna farci. */

/* Il perimetro: una riga per relazione, il verbo a sinistra. Le relazioni di
   cui l'ufficio RISPONDE (gestisce, approva, rilascia, contribuisce) hanno il
   verbo in pieno contrasto; quelle che gli passano davanti (consulta, può
   segnalare) restano leggibili ma non competono con le prime. */
.remit__list { margin: 0; }
.remit__row {
  display: flex; gap: var(--s3); align-items: baseline;
  padding-block: var(--s2);
  border-block-start: 1px solid var(--border);
}
.remit__row:first-child { border-block-start: 0; padding-block-start: 0; }
.remit__verb {
  flex: 0 0 auto; width: 104px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim);
}
.remit__row--primary .remit__verb { color: var(--accent); }
.remit__what { flex: 1 1 auto; min-width: 0; margin: 0; }
.remit__types { display: block; overflow-wrap: anywhere; }
.remit__row--primary .remit__types { font-weight: 600; }
.remit__gloss { display: block; font-size: 13px; color: var(--text-dim); margin-block-start: 2px; }
/* Ciò che l'ufficio legge o può solo segnalare resta leggibile, ma non deve competere con ciò
   di cui risponde: è contesto, non responsabilità. */
.remit__row:not(.remit__row--primary) .remit__types { font-size: 13px; color: var(--text-dim); }
/* Su schermo stretto il verbo va sopra: 104 px di colonna più un elenco di
   nove tipi lasciavano al testo meno di metà schermo. */
@media (max-width: 460px) {
  .remit__row { flex-direction: column; gap: 2px; }
  .remit__verb { width: auto; }
}

/* Quante cose ci sono da fare, prima dei gruppi: il totale non appartiene a
   nessuno dei gruppi e metterlo dentro il primo lo farebbe leggere come suo. */
.work-summary { margin-block: 0 var(--s3); color: var(--text-dim); }

/* Un gruppo di lavoro. Il numero NON è una classifica: è l'ordine in cui una
   pratica attraversa le fasi, e serve a far vedere che un flusso esiste. */
.workgroup__head { margin-block-end: var(--s3); }
.workgroup__title {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  font-size: 17px; margin: 0;
}
.workgroup__step {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.workgroup__name { font-weight: 600; }
.workgroup__why { margin: var(--s2) 0 0; font-size: 13px; color: var(--text-dim); }

/* Una riga sotto l'etichetta di un riquadro, che dice a cosa serve il riquadro.
   «Registra» e «Sorveglia» erano due parole sole: dicevano il titolo del
   blocco, non cosa ci si fa. */
.card__hint { margin: calc(-1 * var(--s1)) 0 var(--s3); font-size: 13px; color: var(--text-dim); }

/* L'ora esatta sotto l'urgenza relativa. Tre consegne dello stesso prodotto
   hanno lo stesso nome e lo stesso identificativo: senza il DTG erano tre
   righe identiche, e due di esse scadute. */
.queue-item__dtg {
  display: block; margin-block-start: 2px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-faint);
}

.office-actions {
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.office-actions__item { flex: 1 1 auto; min-width: 46%; justify-content: center; }
@media (max-width: 400px) {
  .office-actions__item { min-width: 100%; }
}

/* Una riga della lavagna dei fabbisogni. Tre piani: cosa è (tipo, ID, stato),
   la domanda, e quanto tempo resta. La domanda è la cosa che si legge, quindi
   è quella con il contrasto pieno; il resto le sta intorno. */
.req-row {
  display: block;
  padding: var(--s3) 0;
  border-block-end: 1px solid var(--border);
  color: inherit; text-decoration: none;
  min-height: 48px;
}
.req-row:last-child { border-block-end: 0; }
.req-row__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-block-end: var(--s1);
}
.req-row__question {
  font-size: 15px; line-height: 1.35;
  margin-block-end: var(--s1);
}
.req-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font-size: 13px; color: var(--text-dim);
}

/* La matrice del piano di raccolta. Niente tabella a colonne fisse: a 375px
   una tabella di cinque colonne si scorre di lato e non si legge. Ogni
   raccolta è un blocco e le cinque informazioni stanno su tre righe. */
.matrix-row {
  display: block;
  min-height: 48px;
  padding: var(--s3);
  margin-block-start: var(--s2);
  background: var(--surface-high);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--border-strong);
  color: inherit; text-decoration: none;
}
.matrix-row:hover { background: var(--surface-hover); text-decoration: none; }
.matrix-row--late { border-inline-start-color: var(--critical); }
.matrix-row__who { font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.matrix-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font-size: 13px; color: var(--text-dim);
  margin-block-start: 2px;
}
.matrix-row__result { font-size: 13px; margin-block-start: var(--s1); }
.matrix-empty {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3);
  margin-block-start: var(--s2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.matrix-add { margin-block-start: var(--s3); }
/* Il fabbisogno in testa alla sua scheda: un bersaglio solo e grande, invece
   della sigla alta 20px che c'era prima. */
.matrix-req {
  display: block; min-height: 48px;
  padding-block-end: var(--s2);
  color: inherit; text-decoration: none;
}
.matrix-req:hover .req-row__question { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   LA VALUTAZIONE A DUE ASSI — due valori distinti, mai un numero solo
   ---------------------------------------------------------------------------
   Nessun colore: qui il colore direbbe «buono/cattivo», che è precisamente la
   lettura sbagliata. Una fonte A che riferisce una cosa dubbia (A4) non è
   «abbastanza buona»: è una fonte attendibile con un contenuto da verificare,
   e sono due cose da leggere separatamente. */
.rating { display: inline-flex; gap: 1px; vertical-align: middle; }
.rating__axis {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--surface-high);
  border: 1px solid var(--border);
  padding: 2px var(--s2);
  min-width: 46px;
}
.rating__axis:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.rating__axis:last-child  { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
/* 9 px non si leggono su un telefono, tanto meno su un mezzo che sobbalza: erano la misura
   più piccola di tutta ORCA. A 11 px l'etichetta resta un contorno e diventa leggibile; la
   colonna è larga 46 px e ci sta lo stesso. */
.rating__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim);
}
.rating__value { font-family: var(--mono); font-size: 15px; font-weight: 700; }

/* Una riga della posta in arrivo. */
.info-row {
  display: block; min-height: 48px;
  padding: var(--s3) 0;
  border-block-end: 1px solid var(--border);
  color: inherit; text-decoration: none;
}
.info-row:last-child { border-block-end: 0; }
.info-row__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-block-end: var(--s1);
}
.info-row__content {
  font-size: 15px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.info-row__why { font-size: 13px; color: var(--text-dim); margin-block-start: var(--s1); }

/* Due informazioni che si escludono: affiancate, senza verdetto. */
.contra {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) 0;
}
.contra__side {
  flex: 1 1 40%; min-width: 0; min-height: 48px;
  display: flex; flex-direction: column; gap: var(--s1);
  color: inherit; text-decoration: none;
}
.contra__side:hover .info-row__content { text-decoration: underline; }
.contra__vs { flex: 0 0 auto; align-self: center; color: var(--text-dim); font-size: 18px; }
.contra__note { margin-block-end: var(--s3); }

/* ---------------------------------------------------------------------------
   CONVERGENZA DI INDICATORI — il gruppo, non la soglia
   ---------------------------------------------------------------------------
   Nessun semaforo che riassuma: la forza è parola + forma (▲▲▲ forte), e il
   ragionamento sta sotto per intero, compreso quando dice che la convergenza
   è debole perché gli indicatori vengono tutti dallo stesso ambito. */
.conv {
  padding: var(--s3) 0;
  border-block-end: 1px solid var(--border);
}
.conv:last-child { border-block-end: 0; }
.conv__link {
  display: block; min-height: 48px;
  color: inherit; text-decoration: none;
  margin-block-end: var(--s2);
}
.conv__link:hover .conv__hypothesis { text-decoration: underline; }
.conv__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-block-end: var(--s2);
}
.conv__count { font-weight: 600; font-size: 14px; }
.conv__hypothesis { display: block; font-size: 16px; line-height: 1.35; margin-block-end: var(--s3); }
.conv__list { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.conv__list li { margin-block-end: var(--s1); }
.conv__ind {
  display: flex; flex-direction: column; gap: 1px;
  min-height: 48px; justify-content: center;
  padding: var(--s2) var(--s3);
  background: var(--surface-high);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
}
.conv__ind:hover { background: var(--surface-hover); text-decoration: none; }
.conv__ind-name { font-weight: 600; font-size: 15px; }
.conv__why {
  font-size: 13px; color: var(--text-dim);
  border-inline-start: 2px solid var(--border-strong);
  padding-inline-start: var(--s3);
  margin-block-end: var(--s3);
}
.conv__form { padding-block-start: var(--s2); }

/* ---------------------------------------------------------------------------
   5. SCHEDA E PANNELLI
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-block-end: var(--s4);
}
.card__head {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-block-end: var(--s3);
}
.card__title { flex: 1; min-width: 0; }
.card__label {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-block-end: var(--s2);
}
/* Un riquadro che contiene un'azione che non si annulla. Il bordo è quello
   dell'allarme, ma il fondo resta quello delle altre schede: colorare anche lo
   sfondo lo renderebbe la cosa più vistosa della pagina, e la cosa più vistosa
   della scheda di un oggetto deve restare la prossima azione. */
.card--danger { border-color: var(--critical); }
.card--danger .card__label { color: var(--critical); }

/* ---------------------------------------------------------------------------
   6. PROSSIMA AZIONE — l'elemento più importante del sistema

   Risponde alla domanda per cui ORCA esiste: cosa devo fare adesso.
   Sta in cima a ogni scheda oggetto.
   --------------------------------------------------------------------------- */
.next-action {
  background: var(--surface-high);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-block-end: var(--s5);
}
.next-action--waiting { border-color: var(--border-strong); }
.next-action--blocked { border-color: var(--warning); }

.next-action__state {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: 15px; color: var(--text-dim);
  margin-block-end: var(--s3);
}
.next-action__state strong { color: var(--text); }

.next-action__missing {
  background: var(--warning-dim);
  border-inline-start: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  margin-block-end: var(--s4);
  font-size: 15px;
}
.next-action__missing ul { margin: var(--s2) 0 0; padding-inline-start: var(--s5); }

.next-action__buttons { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Le azioni bloccate NON sono pulsanti grigi: sono righe che spiegano.
   Un pulsante che non si può premere è una promessa non mantenuta. */
.blocked-list {
  margin-block-start: var(--s4);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--border);
  font-size: 15px;
}
.blocked-list__title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin-block-end: var(--s2);
}
.blocked-item {
  display: flex; gap: var(--s2);
  padding-block: var(--s2);
  color: var(--text-dim);
}
.blocked-item__why { color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   7. PULSANTI — minimo 48 px, si tocca con i guanti
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: var(--touch);
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit; font-size: 17px; font-weight: 600;
  cursor: pointer;
  background: var(--surface-high);
  color: var(--text);
  transition: background .12s ease;
}
.btn:hover { background: var(--surface-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: var(--border-strong); }

/* Azioni distruttive o irreversibili: lontane da quelle frequenti,
   e riconoscibili senza leggere. */
.btn--danger { background: var(--critical); color: #fff; }
.btn--wide { width: 100%; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   8. STATO — colore MAI da solo: sempre forma + parola

   Circa un uomo su dodici ha una forma di daltonismo. Un sistema che
   distingue lo stato solo per tinta, per quella persona non funziona.
   --------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.pill::before { font-size: 11px; line-height: 1; }

.pill--critical { background: var(--critical-dim); color: var(--critical); }
.pill--critical::before { content: "▲"; }      /* triangolo */

.pill--warning  { background: var(--warning-dim);  color: var(--warning); }
.pill--warning::before  { content: "◆"; }      /* rombo */

.pill--ok       { background: var(--ok-dim);       color: var(--ok); }
.pill--ok::before       { content: "●"; }      /* cerchio */

.pill--info     { background: var(--info-dim);     color: var(--info); }
.pill--info::before     { content: "■"; }      /* quadrato */

.pill--neutral  { background: var(--surface-high); color: var(--text-dim); }
.pill--neutral::before  { content: "○"; }

/* ---------------------------------------------------------------------------
   9. CODA DI LAVORO — densa, con l'urgenza dove cade l'occhio
   --------------------------------------------------------------------------- */
.queue { display: flex; flex-direction: column; gap: var(--s2); }

.queue-item {
  display: flex; align-items: flex-start; gap: var(--s3);
  min-height: var(--touch);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
}
.queue-item:hover { background: var(--surface-hover); text-decoration: none; }

/* Fascia di urgenza a sinistra: si scorre l'elenco guardando solo quella. */
.queue-item--overdue  { border-inline-start: 4px solid var(--critical); }
.queue-item--soon     { border-inline-start: 4px solid var(--warning); }
.queue-item--ontime   { border-inline-start: 4px solid var(--border-strong); }
.queue-item--waiting  { border-inline-start: 4px solid var(--border);
                        opacity: .75; }
/* Una notifica mai letta: non è un'urgenza (quella la dice la pillola di precedenza dentro la
   riga), è semplicemente nuova — stesso accento della striscia che la annuncia in ogni pagina. */
.queue-item--unread   { border-inline-start: 4px solid var(--accent); }
.queue-item--unread .queue-item__title { font-weight: 700; }

.queue-item__when {
  flex: 0 0 auto; width: 86px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.queue-item__body { flex: 1; min-width: 0; }
.queue-item__id {
  font-family: var(--mono); font-size: 13px;
  color: var(--text-dim);
}
/* «da COS»: il confine fra uffici si vede scorrendo, senza leggere la riga.
   Sta accanto all'identificativo e non al titolo, che viene troncato. */
.queue-item__from {
  margin-inline-start: var(--s2);
  padding: 1px var(--s2);
  border: 1px solid var(--border-strong); border-radius: 3px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
.queue-item__title {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue-item__note { font-size: 15px; color: var(--text-dim); }
.queue-item__chevron { flex: 0 0 auto; color: var(--text-faint); font-size: 20px; }

/* ---------------------------------------------------------------------------
   10. DOMANDA GUIDATA — una per schermata

   Un modulo con trenta campi, su un telefono, sotto stress, non viene
   compilato: viene abbandonato.
   --------------------------------------------------------------------------- */
.guided { max-width: 560px; margin: 0 auto; padding-block: var(--s5); }

.guided__progress {
  display: flex; align-items: center; gap: var(--s2);
  margin-block-end: var(--s6);
  font-size: 13px; color: var(--text-dim);
}
.guided__dots { display: flex; gap: var(--s1); }
.guided__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong);
}
.guided__dot--done    { background: var(--ok); }
.guided__dot--current { background: var(--accent); transform: scale(1.4); }

.guided__question {
  font-size: 28px; font-weight: 600; line-height: 1.25;
  margin-block-end: var(--s3);
}
.guided__help { color: var(--text-dim); margin-block-end: var(--s5); }

/* Cosa ORCA ha compilato da solo, e perché.
   Un campo riempito senza spiegazione genera sospetto; spiegato, costruisce
   fiducia. */
.auto-filled {
  background: var(--accent-dim);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  margin-block: var(--s4);
  font-size: 15px;
}
.auto-filled__title { font-weight: 600; margin-block-end: var(--s2); }
.auto-filled ul { margin: 0; padding-inline-start: var(--s5); }
.auto-filled li { margin-block-end: var(--s1); }
.auto-filled .why { color: var(--text-dim); }

.guided__nav {
  display: flex; gap: var(--s3);
  margin-block-start: var(--s6);
}
.guided__nav .btn { flex: 1; }

/* ---------------------------------------------------------------------------
   11. CAMPI

   Etichette VERE, non solo testo segnaposto: il segnaposto sparisce appena si
   scrive, e chi viene interrotto non sa più cosa stava compilando.
   --------------------------------------------------------------------------- */
.field { margin-block-end: var(--s4); }
.field__label {
  display: block;
  font-size: 15px; font-weight: 600;
  margin-block-end: var(--s2);
}
.field__hint { font-size: 13px; color: var(--text-dim); margin-block-end: var(--s2); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--touch);
  padding: var(--s3);
  font-family: inherit; font-size: 17px;
  color: var(--text);
  background: var(--surface-high);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

.field--required .field__label::after {
  content: " ·  obbligatorio";
  font-weight: 400; font-size: 13px; color: var(--warning);
  text-transform: none; letter-spacing: 0;
}

/* Scelta secca fra poche opzioni: pulsanti grandi, non un menù a tendina.
   Su un telefono con i guanti una tendina è un bersaglio da 20 px. */
.choice { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  flex: 1 1 auto; min-width: 120px;
  min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}
.choice input:checked + label {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.choice input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

/* UNA CASELLA NON VESTITA È ALTA 13 px, che è il valore di serie del browser e non una scelta
   di nessuno: su un telefono è un bersaglio che si manca. Dove non c'è già una regola propria
   (i pannelli della mappa ne hanno una), si portano a 22 px con l'accento di ORCA. */
/* UN COLLEGAMENTO CHE STA DA SOLO IN UN PARAGRAFO è un'azione, non una parola dentro una frase:
   «altri 4 appuntamenti», «vedi tutto». Alto 16 px si manca col dito. Dentro una frase invece
   resta com'è — allargarlo sfonderebbe l'interlinea, e anche le WCAG lo escludono. */
p > a:only-child, br + a {
  /* 48 e non 44: è la misura del progetto (`--touch`), la stessa del selettore della lingua.
     A 44 px questa regola vinceva anche su `.footer-link`, che 48 li chiedeva — ha specificità
     più alta (0-1-2 contro 0-1-0), quindi il collegamento in coda di pagina restava a 44 su ogni
     schermata. Lo segnalava `office_check.js` su tutti gli uffici e tutti i formati. */
  display: inline-block; min-height: var(--touch); padding-block: var(--s3);
}

input[type="checkbox"], input[type="radio"] {
  width: 22px; height: 22px; flex: none; accent-color: var(--accent);
}
/* UN'ETICHETTA CHE CONTIENE UNA CASELLA È IL BERSAGLIO: si tocca ovunque, quindi deve essere
   alta quanto un dito. Il quadratino da solo non basta nemmeno a 22 px. `.choice` non è toccata:
   lì il campo è un FRATELLO dell'etichetta, non un figlio, e ha già la sua regola. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: var(--s2); min-height: 44px;
}

/* I campi nascosti dietro la loro etichetta (`.choice`) restano invisibili: lì il bersaglio
   è la label, e dare loro una misura li farebbe ricomparire. */
.choice input[type="radio"], .choice input[type="checkbox"] { width: auto; height: auto; }

/* ---------------------------------------------------------------------------
   12. SUGGERIMENTO AI — non deve mai somigliare a un dato convalidato
   --------------------------------------------------------------------------- */
.ai-suggestion {
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-block-end: var(--s4);
  background: var(--accent-dim);
}
.ai-suggestion__tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
  margin-block-end: var(--s2);
}
.ai-suggestion__tag::before { content: "◈"; }
.ai-suggestion__confidence { color: var(--text-dim); font-weight: 400; text-transform: none; }
.ai-suggestion__actions { display: flex; gap: var(--s3); margin-block-start: var(--s4); }

/* ---------------------------------------------------------------------------
   13. CRONOLOGIA
   --------------------------------------------------------------------------- */
.timeline { position: relative; padding-inline-start: var(--s5); }
.timeline::before {
  content: ""; position: absolute;
  inset-block: 6px 6px; inset-inline-start: 5px;
  width: 2px; background: var(--border);
}
.timeline__item { position: relative; padding-block-end: var(--s4); }
.timeline__item::before {
  content: ""; position: absolute;
  inset-inline-start: calc(var(--s5) * -1 + 1px); top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-strong);
  box-shadow: 0 0 0 3px var(--bg);
}
.timeline__when { font-size: 13px; color: var(--text-dim); }
.timeline__what { font-size: 15px; }

/* ---------------------------------------------------------------------------
   14. COLLEGATI — il registro unico rende uniforme ogni riferimento
   --------------------------------------------------------------------------- */
.links { display: flex; flex-direction: column; gap: var(--s2); }
.link-item {
  display: flex; align-items: center; gap: var(--s3);
  /* 48: è un collegamento, quindi un bersaglio. Vale per i «collegati» della
     scheda oggetto e per il riquadro «Sorveglia» della pagina dell'ufficio. */
  min-height: 48px; padding: var(--s2) var(--s3);
  background: var(--surface-high);
  border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
}
.link-item:hover { background: var(--surface-hover); text-decoration: none; }
.link-item__rel {
  font-size: 13px; color: var(--text-dim);
  /* `0 1 auto` e non `0 0 auto`: con la seconda forma un testo lungo qui
     dentro non si restringe MAI e spinge la pagina di lato. È accaduto sulla
     scheda di un'entità, dove la cronologia metteva qui il titolo
     dell'oggetto collegato: una valutazione con una sintesi di 150 caratteri
     portava la pagina a 1083 px su uno schermo da 375.
     Il titolo ora sta in una cella `flex-1 truncate` (è lì che va), e questa
     riga resta come rete di sicurezza: `min-width` tiene il pavimento e
     `overflow-wrap` impedisce a una parola unica lunghissima di sfondare. */
  flex: 0 1 auto; min-width: 92px; overflow-wrap: anywhere;
}
.link-item__id { font-family: var(--mono); font-size: 13px; color: var(--text-dim); }

/* «Sorveglia»: etichetta e spiegazione una sopra l'altra. Affiancate, la spiegazione (una frase
   intera, minuscola) sembrava un pezzo di testo rimasto lì per sbaglio accanto al nome.
   Sta DOPO `.link-item` di proposito: stessa specificità, e con pari specificità vince chi viene
   dopo — messo prima, `align-items: center` di `.link-item` centrava tutto. */
.link-item--stack { align-items: flex-start; flex-direction: column; gap: 2px; padding-block: var(--s3); }
.link-item--stack .link-item__id { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text); }
.link-item--stack .link-item__rel { flex: 1 1 auto; min-width: 0; }

.attachments { display: flex; flex-direction: column; gap: var(--s2); }
.attachment-item {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  min-height: 44px; padding: var(--s2) 0;
}
.attachment-item__main { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; gap: 2px; }
.attachment-item__name { font-size: 14px; }
.attachment-item__remove { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   15. STRISCIA OFFLINE — l'utente deve saperlo MENTRE lavora
   --------------------------------------------------------------------------- */
.offline-strip {
  display: block;
  position: sticky;
  top: var(--cls-top);
  z-index: 60;
  background: var(--warning);
  color: #000;
  padding: var(--s2) var(--s4);
  font-size: 15px; font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.offline-strip:hover { text-decoration: underline; }
/* Un rifiuto o un accesso scaduto NON sono uno stato di rete: sono cose che
   una persona deve fare, quindi cambiano forma oltre che colore. */
.offline-strip--action { background: var(--critical); color: #fff; }

/* ---------------------------------------------------------------------------
   16. STATO VUOTO — dire cosa fare, non solo che non c'è niente
   --------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: var(--s8) var(--s4);
  color: var(--text-dim);
}
.empty__icon { font-size: 40px; margin-block-end: var(--s3); opacity: .5; }
.empty__title { font-size: 20px; font-weight: 600; color: var(--text); margin-block-end: var(--s2); }

/* ---------------------------------------------------------------------------
   17. ACCESSO
   --------------------------------------------------------------------------- */
.login { max-width: 400px; margin: 0 auto; padding: var(--s8) var(--s4); }
.login__brand {
  text-align: center;
  margin-block-end: var(--s7);
}
.login__name { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.login__tagline { color: var(--text-dim); font-size: 15px; margin-block-start: var(--s2); }

.alert {
  padding: var(--s3);
  border-radius: var(--radius);
  margin-block-end: var(--s4);
  font-size: 15px;
}
.alert--error { background: var(--critical-dim); color: var(--critical);
                border-inline-start: 3px solid var(--critical); }
.alert--info  { background: var(--info-dim);     color: var(--info);
                border-inline-start: 3px solid var(--info); }
/* Esito positivo: la richiesta di registrazione è partita. Verde, ma MAI «fatto»: l'account è in
   attesa, e il testo lo dice — il colore da solo direbbe «sei dentro». */
.alert--ok { background: var(--ok-dim); color: var(--ok);
             border-inline-start: 3px solid var(--ok); }
/* Né errore né informazione: «manca qualcosa, e non è colpa tua». Serve alla
   domanda a scelta che è vuota perché la missione è appena cominciata — dirlo
   in rosso la farebbe sembrare un guasto. */
.alert--warning { background: var(--warning-dim); color: var(--warning);
                  border-inline-start: 3px solid var(--warning); }

/* ---------------------------------------------------------------------------
   18. UTILITÀ
   --------------------------------------------------------------------------- */
.stack > * + * { margin-block-start: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 15px; }
.tiny { font-size: 13px; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.hidden { display: none !important; }

/* Solo per chi legge con uno screen reader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   19. SCHERMI PICCOLI

   Il personale sul campo lavora da telefono, spesso con una mano sola.
   Provato su iPhone SE (375×667), verticale e orizzontale.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .shell { padding: var(--s3); }
  h1 { font-size: 24px; }
  .guided__question { font-size: 24px; }

  /* In verticale i pulsanti vanno a tutta larghezza: il pollice arriva
     ovunque sulla riga. */
  .next-action__buttons { flex-direction: column; }
  .next-action__buttons .btn { width: 100%; }

  .queue-item__when { width: 68px; font-size: 12px; }
  .link-item__rel { min-width: 72px; }
}

/* Orizzontale su telefono: lo schermo è basso, si recupera spazio verticale. */
@media (max-height: 420px) and (orientation: landscape) {
  /* SI CAMBIA LA MISURA, NON LE REGOLE. Prima qui si riscrivevano `body { padding-block: 24px }`
     e `.cls-bar { height: 24px }` a mano, e così facendo si BUTTAVANO VIA gli inserti delle aree
     sicure: coricato, un iPhone perdeva i suoi margini e la banda copriva il contenuto. Cambiando
     solo l'altezza della banda, le somme (`--cls-top`, `--cls-bottom`) si rifanno da sole e gli
     inserti restano dove devono. */
  :root { --cls-h: 24px; }
  .cls-bar { font-size: 11px; }
  .guided { padding-block: var(--s3); }
  .guided__progress { margin-block-end: var(--s4); }
  .guided__question { font-size: 20px; margin-block-end: var(--s2); }
}

/* ---------------------------------------------------------------------------
   20. STAMPA — la classificazione resta, i comandi spariscono
   --------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; padding: 0; }
  .topbar, .office-nav, .btn, .next-action__buttons, .queue-item__chevron { display: none; }
  .cls-bar { position: static; border: 2px solid #000; }
  .card { border: 1px solid #000; break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   21. DESTRA-SINISTRA (arabo)

   Il foglio usa proprietà logiche (margin-inline, inset-inline) in tutto il
   documento, quindi l'inversione funziona senza un secondo foglio da
   mantenere allineato. Qui restano solo i casi che le proprietà logiche non
   coprono.
   --------------------------------------------------------------------------- */
[dir="rtl"] .topbar__back:not(.topbar__home) { transform: scaleX(-1); }
[dir="rtl"] .queue-item__chevron { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------
   22. UTILITÀ DI SPAZIATURA E DISPOSIZIONE

   Aggiunte per togliere OGNI attributo style= dai template.

   Non è pignoleria: uno stile inline obbliga a mettere 'unsafe-inline' nella
   Content-Security-Policy, e quella direttiva è proprio ciò che impedisce a
   uno script iniettato di eseguire. È il difetto che ho diagnosticato nel
   sistema attuale, e che la prima stesura di questi template ripeteva.
   --------------------------------------------------------------------------- */

/* Margini verticali */
.mt-1 { margin-block-start: var(--s1); }
.mt-2 { margin-block-start: var(--s2); }
.mt-3 { margin-block-start: var(--s3); }
.mt-4 { margin-block-start: var(--s4); }
.mt-5 { margin-block-start: var(--s5); }
.mt-6 { margin-block-start: var(--s6); }
.mt-7 { margin-block-start: var(--s7); }
.mb-2 { margin-block-end: var(--s2); }
.mb-3 { margin-block-end: var(--s3); }
.mb-4 { margin-block-end: var(--s4); }
.mb-5 { margin-block-end: var(--s5); }
.m-0  { margin: 0; }

/* Spaziature all'interno di una riga */
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-5 { gap: var(--s5); }

.flex-1 { flex: 1; min-width: 0; }

/* Separatore orizzontale, invece di un bordo scritto a mano ogni volta */
.divider-top {
  margin-block-start: var(--s4);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--border);
}
.divider-bottom {
  margin-block-end: var(--s3);
  padding-block-end: var(--s3);
  border-block-end: 1px solid var(--border);
}

/* Numero in evidenza dei riquadri sintetici */
.stat { }
.stat__label { font-size: 13px; color: var(--text-dim); }
.stat__value {
  font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat__value--critical { color: var(--critical); }
.stat__value--warning  { color: var(--warning); }

/* Testo che conserva gli a capo (annotazioni, note di sistema) */
.preserve-breaks { white-space: pre-wrap; }

/* Elenco di dati in due colonne: etichetta e valore */
.data-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s4);
}
.data-list dt { color: var(--text-dim); font-size: 15px; }
.data-list dd { margin: 0; }

@media (max-width: 420px) {
  /* Su schermo stretto etichetta e valore vanno incolonnati, altrimenti il
     valore si schiaccia in due caratteri per riga. */
  .data-list { grid-template-columns: 1fr; gap: var(--s1); }
  .data-list dd { margin-block-end: var(--s2); }
}

/* Pulsante della barra superiore.
   Resta a 48 px: l'avevo ridotto a 40 per stringere la barra, ma è
   esattamente il genere di compromesso che la regola sui bersagli esiste per
   impedire. Si guadagna spazio togliendo padding orizzontale, non altezza. */
.btn--compact { padding: 0 var(--s3); font-size: 15px; }

/* Testo troncato su una riga */
.truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Collegamento in coda di pagina: deve restare un bersaglio toccabile.
   Un link alto 16 px non si centra con un dito guantato. */
.footer-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 var(--s4);
}

/* Colori di testo, per non ricorrere a style= nei template */
.text-critical { color: var(--critical); }
.text-warning  { color: var(--warning); }

.queue-item__overdue { color: var(--critical); }
.queue-item__soon    { color: var(--warning); }

/* Finestra di dialogo per la motivazione */
.dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  max-width: 480px;
  width: calc(100% - 32px);
}
.dialog::backdrop { background: rgba(0,0,0,.6); }


/* ---------------------------------------------------------------------------
   Segnalazione sul dispositivo e coda di invio
   --------------------------------------------------------------------------- */
.gq[hidden] { display: none; }
.gq__error { color: var(--critical); font-weight: 600; margin-block-start: var(--s3); }
.who-line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s3); margin-block-end: var(--s4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 15px;
}
.notice {
  padding: var(--s3) var(--s4); margin-block-end: var(--s4);
  border: 1px solid var(--border-strong); border-inline-start-width: 6px;
  border-radius: var(--radius); background: var(--surface);
}
.notice--warn   { border-color: var(--warning); }
.notice--ok     { border-color: var(--ok); }
.notice--danger { border-color: var(--critical); }
.op-item { display: block; }
.op-item__meta { font-size: 13px; color: var(--text-dim); }
.op-item__text { margin-block: var(--s2); overflow-wrap: anywhere; }
.op-item__reason { color: var(--critical); font-weight: 600; }
.op-item__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); }
.op-item__actions .btn { min-height: var(--touch); }


/* ---------------------------------------------------------------------------
   Catena di tracciabilità: da cosa discende un compito, fino al mandato
   --------------------------------------------------------------------------- */
.trace { list-style: none; margin: 0; padding: 0; }
.trace__item {
  position: relative;
  padding-inline-start: var(--s5);
  padding-block: var(--s2);
  border-inline-start: 2px solid var(--border-strong);
}
.trace__item:first-child { border-inline-start-color: var(--accent); }
.trace__item--current { background: var(--accent-dim); border-radius: var(--radius-sm); }
.trace__item::before {
  content: '';
  position: absolute;
  inset-inline-start: -5px; top: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong);
}
.trace__item:first-child::before { background: var(--accent); }
.trace__level {
  display: block;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim);
}
.trace__gap {
  margin-block-start: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Riga di misura: etichetta a sinistra, valore a destra, SEMPRE in colonna.
   Usata dove si confrontano molte righe (rischi, prontezza): un bordo destro
   frastagliato costringe l'occhio a cercare il numero riga per riga.
   --------------------------------------------------------------------------- */
.metric-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border);
}
.metric-row:last-child { border-bottom: 0; }
.metric-row__value { display: grid; grid-template-columns: 6.5rem 2.25rem; align-items: center; justify-items: start; }
.metric-row__value strong { justify-self: end; font-variant-numeric: tabular-nums; }
.metric-row__note { grid-column: 1 / -1; }

/* Variante per righe il cui valore è una PAROLA, non un numero: «NON
   OSSERVABILE» non sta in una colonna pensata per «ALTO». Il valore va sotto
   l'etichetta invece di sporgere dallo schermo. */
.metric-row--stack { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); }
.metric-row--stack .metric-row__value { grid-template-columns: auto; justify-items: start; }

/* ---------------------------------------------------------------------------
   Il foglio di un messaggio formale: larghezza fissa, righe che NON vanno a capo.
   Un messaggio militare ha un'impaginazione propria; mandarla a capo per farla
   stare nello schermo la renderebbe illeggibile. Scorre lui, non la pagina.
   --------------------------------------------------------------------------- */
.message-sheet { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); }
.message-sheet pre {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5; color: var(--text); white-space: pre;
}

/* ---------------------------------------------------------------------------
   22. SELETTORE DELLA LINGUA
   Un collegamento per lingua, ognuna nella propria: bersagli da 44 px.
   --------------------------------------------------------------------------- */
.lang-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.lang-switch a {
  /* 48, non i 44 di Apple: è la regola del progetto, e questo selettore sta su
     OGNI schermata — se sbaglia qui, sbaglia ovunque. Trovato col browser, non
     leggendo il codice. */
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim);
  text-decoration: none; font-size: 15px;
}
.lang-switch a[aria-current="true"] { border-color: var(--accent); color: var(--text); background: var(--accent-dim); font-weight: 600; }

/* ---------------------------------------------------------------------------
   MATRICE ACH — resistenza alle smentite, non conteggio delle conferme
   ---------------------------------------------------------------------------
   La prima ipotesi NON ha una coccarda da vincitore: ha un numero di
   posizione. Nell'ACH non si vince, si resiste meglio — e un'interfaccia che
   premiasse la prima riga reintrodurrebbe la lettura che il metodo esiste per
   togliere. */
.ach-h {
  padding: var(--s3) 0;
  border-block-end: 1px solid var(--border);
}
.ach-h:last-child { border-block-end: 0; }
.ach-h__head { display: flex; align-items: flex-start; gap: var(--s3); }
.ach-h__pos {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--text-dim);
}
.ach-h__link {
  flex: 1 1 auto; min-width: 0; min-height: 48px;
  display: flex; flex-direction: column; gap: 2px;
  color: inherit; text-decoration: none;
}
.ach-h__link:hover .ach-h__statement { text-decoration: underline; }
.ach-h__statement { font-size: 16px; line-height: 1.35; }
.ach-h__nums {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: var(--s3) 0 var(--s2);
}
.ach-n { display: inline-flex; flex-direction: column; }
.ach-n__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim);
}
.ach-n__value { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.ach-h__reading {
  font-size: 13px; color: var(--text-dim);
  border-inline-start: 2px solid var(--border-strong);
  padding-inline-start: var(--s3);
  margin: 0 0 var(--s2);
}

/* Una prova e come si colloca rispetto a ciascuna ipotesi. */
.ach-e { padding: var(--s3) 0; border-block-end: 1px solid var(--border); }
.ach-e:last-child { border-block-end: 0; }
.ach-e__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-block-end: var(--s1); }
.ach-e__rels { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s2); }
.ach-e__cell {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2);
  background: var(--surface-high);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Il modulo del confronto: una prova contro TUTTE le ipotesi. */
.ach-f { padding-block: var(--s3); border-block-end: 1px solid var(--border); }
.ach-f:last-of-type { border-block-end: 0; }
.ach-fs {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  margin: 0 0 var(--s3);
}
.ach-fs__legend { font-size: 14px; font-weight: 600; padding-inline: var(--s2); }
.ach-e__link {
  display: block; min-height: 48px;
  color: inherit; text-decoration: none;
}
.ach-e__link:hover .info-row__content { text-decoration: underline; }
.ach-e__link .info-row__content { display: block; }

/* Una fila di pulsanti-filtro che va a capo invece di uscire dallo schermo. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Organizzazione e forze: la profondità nell'albero, senza stili in linea (la CSP non li concede). */
.org__row { padding-inline-start: 0; }
.org__row--d1 { padding-inline-start: var(--s4); }
.org__row--d2 { padding-inline-start: calc(var(--s4) * 2); }
.org__row--d3 { padding-inline-start: calc(var(--s4) * 3); }
.org__row--d4 { padding-inline-start: calc(var(--s4) * 4); }
.org__row--d5 { padding-inline-start: calc(var(--s4) * 5); }
.org__row--d6 { padding-inline-start: calc(var(--s4) * 6); }
.org__row--sub { border-inline-start: 2px solid var(--border, currentColor); }
.attention { text-decoration: none; color: inherit; }

/* Procedure: la lista dei passi, e il modulo per scriverla. */
.steps { margin: var(--s2) 0; padding-inline-start: var(--s6, 24px); }
.steps__item { padding: var(--s2) 0; }
.steps__text { display: block; }
.steps__meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: 2px; }
.step-edit { padding-bottom: var(--s2); border-bottom: 1px solid var(--border); margin-bottom: var(--s3); }
.step-edit__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.block { display: block; padding: var(--s1) 0; }
.w-full { width: 100%; }

/* La prova: un tocco per «fatto»; il bordo dice a colpo d'occhio dove si è. */
.drill-banner { text-align: center; font-weight: 600; }
.drill-step { padding: var(--s3) 0; border-bottom: 1px solid var(--border); scroll-margin-top: 80px; }
.drill-step--overdue { box-shadow: inset 3px 0 0 var(--critical, #ff5a52); padding-inline-start: var(--s3); }
.drill-step--late, .drill-step--not_done { box-shadow: inset 3px 0 0 var(--warning, #f5c542); padding-inline-start: var(--s3); }
.drill-step--on_time, .drill-step--no_target { opacity: .8; }
.drill-step__done { min-height: 48px; margin-top: var(--s2); }


/* ---------------------------------------------------------------------------
   REGISTRAZIONE E POSIZIONE
   --------------------------------------------------------------------------- */

/* Il campo-trappola della registrazione: fuori dallo schermo, non `display: none` — certi script
   saltano i campi nascosti con `display: none` e riempiono quelli che «si vedono». */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Una casella con la sua frase: tutta la riga è il bersaglio, e la frase va a capo SOTTO la casella
   senza infilarsi sotto di lei. */
.check { display: flex; align-items: flex-start; gap: var(--s3); min-height: 44px; cursor: pointer; }
.check input { margin-block-start: 3px; }

.register { max-width: 460px; }
.register__privacy { margin-block: var(--s4); }

/* Utenti: richieste e persone */
.req { padding-block: var(--s4); border-block-start: 1px solid var(--border); }
.req:first-of-type { border-block-start: 0; }
.req__name { font-size: 18px; margin: 0 0 var(--s1); }
.req__meta { margin: 0 0 var(--s3); overflow-wrap: anywhere; }
.req__grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); margin-block-end: var(--s3); }
@media (min-width: 560px) { .req__grid { grid-template-columns: 1fr 1fr; } }
.req__form { margin: 0; }
.req__reject { display: grid; gap: var(--s2); margin-block-start: var(--s3); }

.people { list-style: none; margin: 0; padding: 0; }
.people__row { padding-block: var(--s3); border-block-start: 1px solid var(--border); display: grid; gap: var(--s2); }
.people__row:first-child { border-block-start: 0; }
.people__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.people__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.people__actions form { margin: 0; }

/* Il motivo e il bottone che lo consuma stanno sulla stessa riga: staccati
   sembrerebbero due azioni diverse, e il motivo è obbligatorio. */
.people__form { display: flex; gap: var(--s2); align-items: center; }
.people__form .input { width: 16ch; }

@media (max-width: 560px) {
  /* Sul telefono il motivo prende la riga intera: 16ch in una riga già piena
     di bottoni lo riduceva a due caratteri visibili. */
  .people__form { width: 100%; }
  .people__form .input { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* La striscia della posizione: una riga, in cima, sempre dice in che stato si è. */
.share-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); font-size: 14px; line-height: 1.3;
  background: var(--surface); border-block-end: 1px solid var(--border);
  padding-inline: calc(var(--s4) + var(--sal)) calc(var(--s4) + var(--sar));
}
.share-strip[hidden] { display: none; }
.share-strip__text { flex: 1 1 12em; min-width: 0; }
/* 41 px: era l'altezza che veniva dal solo padding. È un collegamento in una striscia che
   compare su OGNI schermata, e sotto i 48 px si manca col dito mentre si cammina. */
.share-strip__more { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding-block: var(--s3); font-size: 13px; }
.share-strip--live { border-inline-start: 4px solid var(--ok); }
.share-strip--wait { border-inline-start: 4px solid var(--warning); }
.share-strip--bad  { border-inline-start: 4px solid var(--critical); }

/* La striscia delle notifiche: stesso schema della striscia di condivisione qui sopra, ma è
   TUTTA un collegamento (non un pannello con dentro un bottone), quindi il bersaglio di tocco è
   l'altezza intera, non un sotto-elemento. */
.notif-strip {
  display: flex; align-items: center; gap: var(--s2); min-height: 48px;
  padding-block: var(--s2); font-size: 14px; line-height: 1.3; color: var(--text);
  background: var(--surface); border-block-end: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent); text-decoration: none;
  padding-inline: calc(var(--s4) + var(--sal)) calc(var(--s4) + var(--sar));
}
.notif-strip:hover, .notif-strip:focus-visible { background: var(--surface-hover); }
/* `display: flex` qui sopra VINCE sull'attributo `hidden` (stessa precedenza, e questo foglio
   viene dopo quello del browser): senza questa riga `orca.js` non riesce a nasconderla sulla
   mappa. Lo stesso difetto, già trovato una volta su `.map-panel--search`. */
.notif-strip[hidden] { display: none; }

/* Stesso difetto, un terzo posto: `.btn` dichiara `display: inline-flex`, e un'autrice (questo
   foglio) batte sempre l'agente utente anche a parità di selettore — l'attributo `hidden` da
   solo non vince mai contro una classe che fissa `display`. Qui il bottone «La mia posizione»
   nasce nascosto e `my-location.js` lo nasconde di nuovo a runtime (non c'è più nulla da
   sospendere, 26 ottobre 2026): senza questa riga restava visibile comunque. */
#loc-toggle[hidden] { display: none; }
.notif-strip::after { content: '›'; margin-inline-start: auto; color: var(--text-dim); }

/* ---------------------------------------------------------------------------
   TABELLA — il registro GPS (/registro-gps) è la prima pagina con dati
   davvero tabellari: utente, data/ora e cinque numeri per riga. Un elenco di
   `<li>` come altrove avrebbe richiesto un'etichetta ripetuta per ogni
   valore; qui le intestazioni di colonna la dicono una volta sola.

   Non si impone una larghezza: su un telefono la tabella scorre dentro
   `.table-wrap`, in ORIZZONTALE e SOLO lì — la pagina intorno non si muove.
   --------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-block-end: var(--s4);
}
.table { width: 100%; border-collapse: collapse; font-size: 15px; white-space: nowrap; }
.table th, .table td {
  padding: var(--s3) var(--s3);
  text-align: start;
  border-block-end: 1px solid var(--border);
}
.table th {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); background: var(--surface-high);
}
.table tbody tr:last-child td { border-block-end: none; }
.table tbody tr:hover { background: var(--surface-hover); }
.table td .mono { font-family: var(--mono); font-size: 0.9em; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  flex-wrap: wrap; margin-block: var(--s4);
}
.pager__status { color: var(--text-dim); font-size: 14px; }
.pager .is-disabled { opacity: .4; }