/* Argus — foglio di stile dell'applicazione.
 *
 * Legge i token da `tokens.css` (importato in `base.html` prima di questo
 * file): qui non si nomina mai un colore, una misura o una durata a mano.
 *
 * Direzione *console radar* (modern-minimal): chrome neutro, un solo blu
 * d'azione, il colore come informazione. La riga è l'unità di lettura e ha un
 * **asse di scansione a destra** — scadenza e importo allineati in mono — con il
 * rail di provenienza a sinistra. Il telefono è il caso principale: nessuno
 * scorrimento orizzontale, ogni bersaglio almeno 44 px, i filtri non rubano la
 * scena alla lista.
 */

/* --- Base ----------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  /* Rete di sicurezza: nessuna pagina deve poter scorrere di lato. Il clip
     sta su `html` **e** su `body`: con il solo `html` un body più largo
     verrebbe tagliato e il contenuto in eccesso diventerebbe irraggiungibile. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-text-size-adjust: 100%;
}

h1,
h2 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--leading-display);
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

h2 {
  font-size: var(--text-lg);
  margin: var(--space-8) 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-action-strong);
}

img,
svg,
table {
  max-width: 100%;
}

/* --- Salta al contenuto ---------------------------------------------------- *
 * Primo elemento del body, visibile solo quando ha il focus: chi naviga da
 * tastiera non deve attraversare cinque voci di navigazione a ogni pagina. */

.salta {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--rule-control);
  border-radius: var(--radius-2);
  color: var(--color-ink);
  transform: translateY(-200%);
}

.salta:focus-visible {
  transform: none;
}

/* Testo per i soli lettori di schermo: presente nell'albero di accessibilità,
   invisibile a schermo. Non si usa `display: none`, che lo cancella anche lì. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Intestazione e navigazione -------------------------------------------- *
 * Due livelli: il marchio e lo stato di sessione in alto, le destinazioni
 * sotto. Lo stato di sessione si riflette: un anonimo non vede le destinazioni
 * protette, che rimbalzerebbero al login. Su schermi stretti la nav va a capo:
 * tutte le destinazioni restano visibili, ≥44 px, senza una fascia che scorre
 * di nascosto. */

.intestazione {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-paper);
  border-bottom: var(--rule-hairline);
}

.intestazione-interna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  min-width: 0;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Il punto del marchio: un segno, non una decorazione. */
.marchio::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: var(--radius-pill);
  background: var(--color-action);
}

.nav {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-2);
  color: var(--color-neutral);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--color-ink);
  background: var(--color-paper-2);
}

.nav a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
  background: var(--color-paper-3);
}

/* Il conteggio dei candidati: un numero mono accanto alla voce, non un badge
   che urla. Il nome accessibile lo legge esteso (base.html). */
.conteggio {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-attention);
  font-variant-numeric: tabular-nums;
}

.nav a[aria-current="page"] .conteggio {
  color: var(--color-neutral);
}

/* La console è un'area distinta: spinta a destra, staccata da un filetto. */
.nav-console {
  margin-left: auto;
}

.nav-accesso {
  color: var(--color-action-strong);
  font-weight: 600;
}

.contenuto {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-12);
  min-width: 0;
}

/* La colonna di lettura: il testo non supera la misura, i metadati sì. */
.colonna {
  max-width: var(--measure);
}

/* --- Tipografia di servizio ------------------------------------------------ */

.sintesi {
  color: var(--color-neutral);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

.spiega {
  color: var(--color-neutral);
  font-size: var(--text-xs);
}

.url,
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.url {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.etichetta {
  color: var(--color-neutral);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* La motivazione che un amministratore scrive a mano: non è un'etichetta, quindi
   niente maiuscoletto. Va leggibile per intero, e la parola «Nota» la introduce
   perché una frase sola in una cella di tabella sembra un refuso. */
.nota {
  display: inline-block;
  max-width: 28rem;
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  white-space: normal;
  overflow-wrap: anywhere;
}

.nota::before {
  content: "Nota: ";
  color: var(--color-neutral);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Barra dei filtri ------------------------------------------------------ *
 * Su telefono: la ricerca a tutta larghezza e un disclosure per il resto, così
 * la lista resta la prima cosa che si vede. Da 60rem: una griglia che si
 * restringe davvero, al posto di colonne fisse più larghe dello schermo. */

.filtri {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border: var(--rule-hairline);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

/* `min-width: 0` è il dettaglio che fa scendere i campi sotto il min-content
   dei loro contenuti: senza, un `select` impone la propria larghezza minima e
   la griglia esonda. */
.filtri .campo,
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.campo label {
  color: var(--color-neutral);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--rule-control);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base);
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  background: var(--color-paper-2);
}

.campo textarea {
  min-height: auto;
}

.campo input:disabled {
  background: var(--color-paper-3);
  color: var(--color-neutral);
  cursor: not-allowed;
}

/* Una scelta fra poche, non un campo da compilare: i radio non prendono la
   larghezza piena di `.campo input` (sarebbe una barra sola con un pallino
   dentro) e la loro etichetta non si mette in maiuscoletto come quella di un
   campo, perché qui il testo è la scelta, non un nome. */
fieldset.scelte {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

fieldset.scelte > legend {
  padding: 0;
  color: var(--color-neutral);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scelta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--rule-control);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.scelta:hover {
  background: var(--color-paper-2);
}

.scelta:has(input:checked) {
  border-color: var(--color-action-strong);
  background: var(--color-action-weak);
}

.scelta input[type="radio"] {
  flex: 0 0 auto;
  width: var(--target-min);
  min-height: 0;
  height: var(--target-min);
  margin: 0;
  accent-color: var(--color-action-strong);
}

/* Il disclosure dei filtri: un `<details>` nativo, quindi corretto da tastiera
   senza una riga di JavaScript. */
.filtri-avanzati {
  border-top: var(--rule-hairline);
  padding-top: var(--space-3);
}

.filtri-avanzati > summary {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-action-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.filtri-avanzati > summary::marker {
  color: var(--color-action);
}

.filtri-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.filtri-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* I filtri attivi: chip rimovibili, sempre dopo che i filtri sono stati
   applicati, così si vede a colpo d'occhio cosa sta restringendo la lista. */
.filtri-attivi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-3);
  border: var(--rule-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  text-decoration: none;
}

.chip-filtro:hover {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.chip-filtro .croce {
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

/* --- Controlli ------------------------------------------------------------- *
 * Un solo pulsante pieno per schermata (l'azione principale); tutto il resto è
 * secondario e porta un bordo, non un riempimento. */

.pulsante,
.bottone,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-2);
  background: var(--color-action);
  color: var(--color-action-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  /* Un pulsante è un'etichetta, non un paragrafo: non va su due righe. */
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.pulsante:hover,
.bottone:hover,
button:hover {
  background: var(--color-action-strong);
}

.pulsante:active,
.bottone:active,
button:active {
  transform: translateY(1px);
}

.pulsante[aria-disabled="true"],
button[aria-disabled="true"],
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pulsante-secondario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  border: var(--rule-control);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-action-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pulsante-secondario:hover {
  background: var(--color-paper-2);
  color: var(--color-action-strong);
}

.bottone-pericolo {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-action-ink);
}

.bottone-pericolo:hover {
  background: var(--color-error);
  filter: brightness(0.93);
}

/* Il pulsante che ha appena agito: conferma silenziosa, senza toast. */
.pulsante.fatto,
button.fatto {
  background: var(--color-success-weak);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* --- Riepilogo, avvisi, esiti ---------------------------------------------- */

.riepilogo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

.riepilogo .conteggio-forte {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.ordinamento {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: var(--text-sm);
}

.ordinamento label {
  color: var(--color-neutral);
}

.ordinamento select {
  min-height: var(--target-min);
  padding: var(--space-1) var(--space-2);
  border: var(--rule-control);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
}

.avviso,
.esito {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border: 1px solid var(--color-error);
  border-radius: var(--radius-2);
  background: var(--color-error-weak);
  color: var(--color-error);
  font-size: var(--text-sm);
}

.esito {
  border-color: var(--color-success);
  background: var(--color-success-weak);
  color: var(--color-success);
}

/* L'avviso operativo (silenzio, attenzione): ambra, mai il rosso dell'errore. */
.avviso-attention {
  border-color: var(--color-attention);
  background: var(--color-attention-weak);
  color: var(--color-attention);
}

.avviso p,
.esito p {
  margin: 0;
}

.avviso .icona,
.esito .icona {
  flex: none;
  margin-top: 0.15em;
}

/* L'avviso dei candidati: informazione, non errore. Ambra, con un segno. */
.avviso-candidati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border: var(--rule-hairline);
  border-left: 3px solid var(--color-attention);
  border-radius: var(--radius-2);
  background: var(--color-attention-weak);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.avviso-candidati a {
  color: var(--color-action-strong);
  font-weight: 600;
}

/* --- La riga: rail, corpo, asse -------------------------------------------- *
 * Mobile: due tracce (rail 4px | corpo). Da 64rem: tre tracce, con l'asse di
 * scansione a destra allineato in mono — scadenza e importo si confrontano
 * scorrendo, senza aprire. Il rail di provenienza è `::before`, decorativo. */

.lista-atti {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-hairline);
}

.riga-atto {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  column-gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--rule-hairline);
}

/* Il rail di provenienza: la parola sta nel badge, il colore accompagna.
   `aria-hidden` è nel markup: è il testo a portare il significato. */
.riga-atto::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  border-radius: var(--radius-pill);
  background: var(--color-rule);
}

.riga-atto.prov-ted::before {
  background: var(--color-ted);
}

.riga-atto.prov-ente::before {
  background: var(--color-ente);
}

.riga-corpo {
  grid-column: 2;
  min-width: 0;
}

.riga-asse {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--rule-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.riga-atto .oggetto {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--leading-display);
}

/* Il link di apertura: il titolo è leggibile come testo, ma tutta la riga è
   toccabile (lo `stretched link`). Su un telefono l'hover non esiste e un
   bersaglio di 20px non è un gesto primario. */
.riga-atto .oggetto a {
  display: block;
  min-height: var(--target-min);
  color: var(--color-ink);
  text-decoration: none;
}

.riga-atto .oggetto a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.riga-atto .oggetto a:hover {
  color: var(--color-action-strong);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* I link della riga (originale) restano cliccabili sopra lo stretched link. */
.riga-atto .originale {
  position: relative;
  z-index: 1;
}

.contesto,
.dettaglio-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

.contesto .ente {
  color: var(--color-ink-2);
  font-weight: 600;
}

.dettaglio-riga {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.dettaglio-riga .assente {
  font-size: var(--text-sm);
  font-style: normal;
}

/* I numeri che si leggono in colonna devono allineare. */
.dettaglio-riga,
.contesto time,
.riga-asse,
.tabella td {
  font-variant-numeric: tabular-nums;
}

/* I separatori sono decorazione: se il testo va a capo devono sparire. */
.dettaglio-riga .separatore {
  color: var(--color-muted);
  margin-inline: calc(-1 * var(--space-2));
}

@media (max-width: 24rem) {
  .dettaglio-riga .separatore {
    display: none;
  }
}

/* La scadenza è l'unico dato che può diventare ambra: è l'unico che scade. */
.scadenza {
  color: var(--color-ink);
  font-weight: 600;
}

.riga-asse .scadenza.imminente {
  color: var(--color-attention);
}

.importo {
  color: var(--color-ink);
  font-weight: 600;
}

/* L'assenza si dichiara, non si finge: stessa forma e stesso colore ovunque. */
.assente {
  color: var(--color-muted);
  font-style: normal;
}

/* --- Provenienza: rail + badge con la parola ------------------------------- *
 * Il colore non è mai l'unico segnale: il badge porta sempre la parola. */

.provenienza-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid currentcolor;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.provenienza-badge::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-pill);
  background: currentcolor;
}

.provenienza-badge.prov-ted {
  color: var(--color-ted);
  background: var(--color-ted-weak);
}

.provenienza-badge.prov-ente {
  color: var(--color-ente);
  background: var(--color-ente-weak);
}

.piede-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.piede-riga .originale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-min);
  color: var(--color-action-strong);
  font-size: var(--text-sm);
  text-decoration: none;
}

.piede-riga .originale:hover {
  text-decoration: underline;
}

.originale-statico {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

/* La motivazione: una riga sola sotto l'oggetto, non in corsivo. */
.motivazione {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

/* --- Etichette di stato ---------------------------------------------------- *
 * Una parola in piccolo, maiuscolo, con una forma. Il colore accompagna, non
 * sostituisce il testo: `da valutare` si legge anche in bianco e nero. */

.etichetta-stato {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border: 1px solid var(--color-attention);
  border-radius: var(--radius-1);
  background: var(--color-attention-weak);
  color: var(--color-attention);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.etichetta-stato.rilevante {
  border-color: var(--color-success);
  background: var(--color-success-weak);
  color: var(--color-success);
}

.etichetta-stato.rumore {
  border-color: var(--color-rule-strong);
  background: var(--color-paper-3);
  /* `--color-ink-2` (12.4:1 su carta): lo stato meno importante resta
     leggibile. `--color-neutral` scende sotto la soglia AA sul paper-3. */
  color: var(--color-ink-2);
}

.etichetta-stato.approfondire {
  border-color: var(--color-family-atto);
  background: var(--color-family-atto-weak);
  color: var(--color-family-atto);
}

.etichetta-stato.errore {
  border-color: var(--color-error);
  background: var(--color-error-weak);
  color: var(--color-error);
}

/* La famiglia: una parola tinta, non un chip. */
.famiglia-parola {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.famiglia-parola.famiglia-gara {
  color: var(--color-family-gara);
}

.famiglia-parola.famiglia-atto {
  color: var(--color-family-atto);
}

.fase,
.tipo {
  color: var(--color-neutral);
  font-size: var(--text-xs);
}

.etichetta-stato .rilevanza {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: inherit;
}

/* La rilevanza nell'asse destro: un numero mono, non una decorazione. */
.riga-asse .rilevanza {
  color: var(--color-neutral);
}

.riga-asse .rilevanza.forte {
  color: var(--color-success);
  font-weight: 600;
}

/* L'identificativo della notice: il dato mono dell'asse per un candidato che
   non dichiara scadenza né importo. */
.riga-asse .identificatore {
  color: var(--color-neutral);
  overflow-wrap: anywhere;
}

/* Lo stato della valutazione del PDF nell'asse destro. Sta nell'asse e non nel
   corpo per la stessa ragione della rilevanza: la riga ha una sola colonna di
   scanning, e metterla dove si mette un chip significa che il colore diventa
   l'unico segnale. Il prefisso «pdf» è obbligatorio — senza, «adeguato» in
   fondo alla riga si leggerebbe come un giudizio sull'opportunità, che è un
   altro verdetto, emesso da un altro modello, su un'altra domanda. */
.riga-asse .stato-pdf {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.riga-asse .stato-pdf::before {
  content: "pdf ";
  color: var(--color-neutral);
  font-weight: 600;
}

.riga-asse .stato-pdf.in-attesa {
  color: var(--color-attention);
  font-weight: 600;
}

/* --- Stato vuoto ----------------------------------------------------------- */

.vuoto {
  padding: var(--space-10) 0;
  max-width: var(--measure);
  color: var(--color-neutral);
}

.vuoto .icona {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-rule-strong);
}

.vuoto h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.vuoto p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

/* --- Paginazione ----------------------------------------------------------- */

.paginazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6) 0 0;
  font-size: var(--text-sm);
}

.paginazione a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--rule-hairline);
  border-radius: var(--radius-2);
  color: var(--color-action-strong);
  text-decoration: none;
}

.paginazione a:hover {
  background: var(--color-paper-2);
}

.paginazione .pagina {
  color: var(--color-neutral);
}

/* --- Scheletro di caricamento ---------------------------------------------- *
 * Le barre ricalcano la riga nuova (rail + oggetto + meta + asse): il
 * contenuto non salta quando arriva, perché la forma c'è già. */

.scheletro {
  display: none;
  padding: var(--space-4) 0;
}

.htmx-request .scheletro,
.scheletro.htmx-request {
  display: block;
}

.scheletro .barra {
  height: 0.75em;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-1);
  background: var(--color-paper-3);
  animation: pulsa 1.4s var(--ease-out) infinite;
}

.scheletro .barra.lunga {
  width: 72%;
}

.scheletro .barra.media {
  width: 46%;
}

.scheletro .barra.corta {
  width: 28%;
}

@keyframes pulsa {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* Con HTMX in volo la lista si attenua invece di sparire. */
.htmx-request .lista-atti {
  opacity: 0.4;
  transition: opacity var(--dur-short) var(--ease-out);
}

/* L'errore di una risposta HTMX: visibile dentro il bersaglio, con un'azione. */
.errore-htmx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-2);
  background: var(--color-error-weak);
  color: var(--color-error);
  font-size: var(--text-sm);
}

/* --- Dettaglio ------------------------------------------------------------- */

.ritorno {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.ritorno a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-min);
  color: var(--color-action-strong);
  text-decoration: none;
}

.ritorno a:hover {
  text-decoration: underline;
}

.scheda header {
  margin-bottom: var(--space-5);
}

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.scheda h1 {
  max-width: var(--measure);
  margin: 0 0 var(--space-2);
}

.ente-linea {
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

/* I campi estratti: una lista di definizioni, non una griglia di caselle. */
.griglia-campi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: var(--space-5) 0;
  padding: var(--space-4) 0;
  border-top: var(--rule-hairline);
  border-bottom: var(--rule-hairline);
}

.campo-valore {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  align-items: baseline;
}

.campo-valore + .campo-valore {
  border-top: var(--rule-hairline);
}

.campo-valore .valore {
  min-width: 0;
  overflow-wrap: anywhere;
}

.giudizio,
.provenienza {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--rule-hairline);
}

.giudizio h2,
.provenienza h2 {
  margin-top: 0;
}

.motivazione-lunga {
  max-width: var(--measure);
}

/* L'evidenza citata: filetto sopra e sotto con un'etichetta. */
.evidenza {
  max-width: var(--measure);
  margin: var(--space-4) 0;
  padding: var(--space-4) 0;
  border-top: var(--rule-hairline);
  border-bottom: var(--rule-hairline);
}

.evidenza p {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.provenienza dl {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

/* L'area personale: lo stesso primitivo etichetta/valore del dettaglio, non un
   `<dl>` nudo senza stile. */
.scheda-account {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.scheda-account dt {
  color: var(--color-neutral);
}

.scheda-account dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Il contenitore di una lista di righe (fonti, enti): le righe portano il
   proprio filetto, il contenitore le tiene in colonna. */
.lista-fonti {
  display: flex;
  flex-direction: column;
}

.provenienza dt {
  color: var(--color-neutral);
}

.provenienza dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Il testo estratto: un `<details>` nativo, quindi già corretto da tastiera. */
.testo-atto {
  max-width: var(--measure);
  margin: var(--space-6) 0;
}

.testo-atto > summary {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-action-strong);
  font-weight: 600;
  cursor: pointer;
}

.testo-atto .testo {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--rule-hairline);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}

/* --- Feedback -------------------------------------------------------------- *
 * Tre opzioni con un glifo monocromo. Il verdetto scelto si riconosce dal
 * bordo e dal fondo, e resta leggibile in chiaro. */

.feedback .bottoni-verdetto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  border: 0;
  padding: 0;
}

.feedback .bottoni-verdetto legend {
  padding: 0;
  margin-bottom: var(--space-2);
  color: var(--color-neutral);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feedback .bottone {
  flex: 1 1 9rem;
  background: var(--color-surface);
  border: var(--rule-control);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.feedback .bottone:hover {
  background: var(--color-paper-2);
  border-color: var(--color-ink);
}

.feedback .bottone.attivo {
  background: var(--color-action-weak);
  border-color: var(--color-action-strong);
  color: var(--color-action-strong);
  font-weight: 600;
}

.feedback .bottone .glifo {
  color: currentcolor;
}

.feedback label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-neutral);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feedback textarea {
  width: 100%;
  max-width: var(--measure);
  min-height: 4.5rem;
  padding: var(--space-3);
  border: var(--rule-control);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base);
}

.storico-valutazioni {
  color: var(--color-neutral);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

/* Lo stesso primitivo come elenco: nella console lo storico di un documento è
   una lista di righe (una per versione di prompt, una per versione del file),
   e i marcatori predefiniti del browser aggiungerebbero un segnale visivo a una
   lista in cui ogni riga è già datata e identificata. */
ul.storico-valutazioni {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.verdetto-gia {
  color: var(--color-ink);
  font-weight: 600;
}

/* --- Fonti ----------------------------------------------------------------- */

.riga-fonte {
  padding: var(--space-4) 0;
  border-bottom: var(--rule-hairline);
}

.riga-fonte:first-child {
  border-top: var(--rule-hairline);
}

/* Una fonte in silenzio porta il rail in ambra, non un fondo rosso: è un dato
   da guardare, non una pagina in errore. */
.riga-fonte.in-silenzio {
  border-left: 4px solid var(--color-attention);
  padding-left: var(--space-4);
}

.riga-fonte.disattivata {
  opacity: 0.72;
}

.stato {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-1);
  background: var(--color-paper-3);
  /* `--color-ink-2` è 12.4:1: leggibile a ogni età. Lo stato resta anche una
     parola, quindi il colore non è mai l'unico segnale. */
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.stato.ok {
  border-color: var(--color-success);
  background: var(--color-success-weak);
  color: var(--color-success);
}

.stato.silenzio {
  border-color: var(--color-attention);
  background: var(--color-attention-weak);
  color: var(--color-attention);
}

.stato.disattiva {
  border-color: var(--color-rule-strong);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
}

.stato.errore {
  border-color: var(--color-error);
  background: var(--color-error-weak);
  color: var(--color-error);
}

.piattaforma {
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.documenti {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* --- Tabelle (console, registro) ------------------------------------------- *
 * Su telefono una tabella scorre dentro il proprio riquadro: la pagina no. La
 * regione è raggiungibile da tastiera (`tabindex` nel markup) e nominata. */

.tabella-contenitore {
  overflow-x: auto;
  border: var(--rule-hairline);
  border-radius: var(--radius-2);
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.tabella th,
.tabella td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: var(--rule-hairline);
  vertical-align: top;
}

.tabella th {
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tabella tr:last-child td {
  border-bottom: 0;
}

.tabella .errore {
  color: var(--color-error);
}

.tabella .mono {
  overflow-wrap: anywhere;
}

.riga-errore td {
  background: var(--color-error-weak);
}

/* Sotto 48rem una tabella a molte colonne diventa schede impilate: ogni riga
   è una scheda etichetta/valore, senza scorrimento orizzontale nascosto. */
@media (max-width: 47.99rem) {
  .tabella-schede thead {
    display: none;
  }

  .tabella-schede,
  .tabella-schede tbody,
  .tabella-schede tr,
  .tabella-schede td {
    display: block;
    width: auto;
  }

  .tabella-schede tr {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: var(--rule-hairline);
    border-radius: var(--radius-2);
  }

  .tabella-schede td {
    padding: var(--space-1) 0;
    border: 0;
  }

  .tabella-schede td::before {
    content: attr(data-etichetta);
    display: block;
    color: var(--color-neutral);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .tabella-schede td:empty {
    display: none;
  }
}

/* --- Console amministrativa ------------------------------------------------ *
 * Un'area distinta: barra con operatore e uscita, poi i moduli. Il blu sul
 * bordo dice dove ci si trova senza gridarlo. */

.console-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  border: var(--rule-hairline);
  border-left: 3px solid var(--color-action);
  border-radius: var(--radius-2);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}

.console-titolo {
  font-size: var(--text-h2);
  font-weight: 600;
}

.console-barra nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.console-barra a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-neutral);
  text-decoration: none;
}

.console-barra a:hover {
  color: var(--color-ink);
}

.console-barra a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

.console-uscita {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.console-operatore {
  color: var(--color-neutral);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.console-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-4) 0;
}

.console-azioni form {
  margin: 0;
}

.console-sezione {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--rule-hairline);
}

.console-sezione h2 {
  margin-top: 0;
}

.console-accesso {
  max-width: 28rem;
  margin: var(--space-10) auto;
}

.console-comandi {
  margin: var(--space-5) 0;
  padding: var(--space-4) 0;
  border-top: var(--rule-hairline);
}

/* --- Moduli ---------------------------------------------------------------- */

.modulo {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: var(--rule-hairline);
  border-radius: var(--radius-2);
  background: var(--color-surface);
}

.aiuto {
  color: var(--color-neutral);
  font-size: var(--text-xs);
}

/* Un campo rifiutato: bordo e testo d'errore sotto, mai solo il colore. */
.campo.errore input,
.campo.errore select,
.campo.errore textarea {
  border-color: var(--color-error);
}

.campo-errore {
  color: var(--color-error);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* --- Icone ----------------------------------------------------------------- */

.icona {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

.glifo {
  color: var(--color-neutral);
}

/* --- Soglie responsive ----------------------------------------------------- *
 * 40rem: marchio e nav su una riga. 64rem: la riga prende l'asse di scansione
 * a tre tracce. 76rem: i campi del dettaglio a tre colonne. */

@media (min-width: 40rem) {
  .intestazione-interna {
    flex-wrap: nowrap;
  }

  .nav {
    flex: 1 1 auto;
  }

  .nav-console {
    padding-left: var(--space-4);
    border-left: var(--rule-hairline);
  }

  .filtri-griglia {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  }
}

@media (min-width: 64rem) {
  .intestazione-interna {
    padding-block: var(--space-3);
  }

  .contenuto {
    padding-inline: var(--space-6);
  }

  /* Tre tracce: rail | corpo | asse di scansione. */
  .riga-atto {
    grid-template-columns: 4px minmax(0, 1fr) var(--riga-asse);
    column-gap: var(--space-5);
  }

  .riga-corpo {
    grid-column: 2;
  }

  .riga-asse {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    text-align: right;
    gap: var(--space-1);
  }

  .filtri {
    /* Un solo asse: la ricerca resta in alto a sinistra, la griglia dei campi
       usa tutta la larghezza e può dispiegarsi su più colonne. Con il modulo a
       due colonne il disclosure — che CONTIENE `.filtri-griglia` — finiva
       nella colonna `auto` stretta, e la griglia restava a una colonna. */
    grid-template-columns: minmax(0, 1fr);
  }

  .filtri > .campo {
    max-width: 30rem;
  }

  .griglia-campi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  .modulo {
    max-width: 36rem;
  }
}

@media (min-width: 76rem) {
  .griglia-campi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}