/* ===========================================================================
   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. */
  --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. Stessi rossi e
     ambra del sistema precedente (i suoi colori più ricorrenti dopo il verde
     acqua), non reinventati. */
  --critical:      #FF3B30;
  --critical-dim:  rgba(255, 59, 48, 0.14);
  --warning:       #FFD24D;
  --warning-dim:   rgba(255, 210, 77, 0.14);
  --ok:            #3ECF8E;
  --ok-dim:        rgba(62, 207, 142, 0.14);
  --info:          #4FA8D8;
  --info-dim:      rgba(79, 168, 216, 0.14);

  /* Classificazione: il sistema precedente non aveva bande di classificazione
     (è un concetto che ORCA introduce) — qui il verde/ambra/rosso restano gli
     stessi usati sopra per lo stato, l'azzurro di RESTRICTED preso dalla stessa
     famiglia del fondo. */
  --cls-unclass:   #3ECF8E;
  --cls-restrict:  #4FA8D8;
  --cls-conf:      #FFD24D;
  --cls-secret:    #FF3B30;

  /* Sandbox: la simulazione deve essere riconoscibile a colpo d'occhio */
  --sandbox:       #B47CFF;

  /* 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:      #C42B2D;
  --warning:       #B06E00;
  --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: calc(28px + env(safe-area-inset-top, 0px))
                 calc(28px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; }
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: 28px;
  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;
}
.cls-bar--top    { top: 0;    padding-top: env(safe-area-inset-top, 0px);
                   height: calc(28px + env(safe-area-inset-top, 0px)); }
.cls-bar--bottom { bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
                   height: calc(28px + env(safe-area-inset-bottom, 0px)); }

.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;
}

/* ---------------------------------------------------------------------------
   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: calc(28px + env(safe-area-inset-top, 0px));
  z-index: 50;
}
.topbar__title { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; }
.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. */
.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); }
.rating__label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  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);
}

/* ---------------------------------------------------------------------------
   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; }

.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);
}
.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; }

/* ---------------------------------------------------------------------------
   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); }

.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: calc(28px + env(safe-area-inset-top, 0px));
  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); }
/* 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) {
  body { padding-block: 24px; }
  .cls-bar { height: 24px; 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 { 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; }