@charset "UTF-8";
/* ==========================================================================
   nafasi.it — foglio di stile unico
   --------------------------------------------------------------------------
   Direzione: SERVIZIO PUBBLICO ITALIANO.
   Impianto vicino a Designers Italia e ai portali della pubblica
   amministrazione fatti bene: blu istituzionale, alto contrasto, struttura
   riconoscibile a chi usa i siti della PA. Titillium Web, che è il carattere
   delle linee guida di design dei servizi digitali della PA italiana.

   Per un servizio che parla di concorsi pubblici, somigliare a un servizio
   pubblico è un vantaggio di credibilità, non un limite.

   Nessuna richiesta di rete verso l'esterno: il carattere è ospitato qui.

   Indice
     01  Carattere ospitato in locale
     02  Reset
     03  Token
     04  Elementi di base
     05  Impalcatura
     06  Testata istituzionale
     07  Apertura e conteggi
     08  Ricerca
     09  Box scadenze
     10  Elenco dei concorsi
     11  Scheda del singolo concorso
     12  Navigazione per territorio e profilo
     13  Componenti editoriali
     14  Prezzi
     15  Domande frequenti
     16  Bottoni
     17  Avvisi
     18  Paginazione
     19  Pie' di pagina
     20  Utility
     21  Stampa e movimento ridotto
   ========================================================================== */

/* ==========================================================================
   01  Carattere ospitato in locale
   --------------------------------------------------------------------------
   Titillium Web, disegnato all'Accademia di Belle Arti di Urbino, licenza
   SIL Open Font License 1.1 (assets/font/LICENZA.txt). È il carattere indicato
   dalle linee guida di design per i servizi digitali della PA italiana.

   Ospitato qui e non caricato da Google Fonts per due motivi: la CSP del sito
   non ammette host esterni, e una richiesta a un dominio di terzi su ogni
   pagina è un dato di navigazione ceduto senza che serva a niente.

   `font-display: swap` per non bloccare mai la prima pittura del testo.
   ========================================================================== */

@font-face {
  font-family: "Titillium Web";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("font/titillium-web-400.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("font/titillium-web-600.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("font/titillium-web-700.woff2") format("woff2");
}

/* ==========================================================================
   02  Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ==========================================================================
   03  Token
   --------------------------------------------------------------------------
   Ogni coppia testo/fondo usata nel sito è verificata a WCAG 2.1 AA da
   `sito/strumenti/verifica_contrasto.py`, che fallisce se un rapporto scende
   sotto soglia. Non è un controllo fatto a occhio.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Blu istituzionale */
  --blu:            #0063c8;
  --blu-scuro:      #00335c;
  --blu-notte:      #17324d;
  --blu-inchiostro: #0b2136;
  --blu-vivo:       #004b99;
  --blu-chiaro:     #e6f0fa;
  --blu-tenue:      #f2f7fc;

  /* Neutri */
  --grigio-05: #f7f8f9;
  --grigio-10: #eceff2;
  --grigio-20: #d9dee3;
  --grigio-40: #84909c;
  --grigio-60: #56687c;
  --bianco:    #ffffff;

  /* Stati: toni scuriti apposta perché passino AA anche sul testo piccolo */
  --urgenza:           #a4171f;
  --urgenza-sfondo:    #fdecec;
  --attenzione:        #74490a;
  --attenzione-sfondo: #fdf3e0;
  --conferma:          #005c39;
  --conferma-sfondo:   #e6f4ee;
}

/* Ruoli semantici — tema chiaro */
:root {
  --sfondo: var(--bianco);
  --sfondo-tenue: var(--grigio-05);
  --sfondo-rilievo: #ffffff;
  --sfondo-blu: var(--blu-tenue);
  --sfondo-scuro: var(--blu-inchiostro);

  --testo: var(--blu-notte);
  --testo-tenue: var(--grigio-60);
  --testo-scuro: #eef3f8;
  --testo-scuro-tenue: #bacbdb;

  --bordo: var(--grigio-20);
  --bordo-forte: var(--grigio-40);
  --bordo-scuro: #2b4a68;

  --accento: var(--blu);
  /* Il testo sopra l'accento non puo' essere sempre #fff: nel tema scuro
     l'accento diventa azzurro chiaro e il bianco scende a 2,10:1, sotto
     il minimo AA di 4,5:1. Qui vale bianco, nel tema scuro un blu
     profondo che rende 7,78:1. */
  --su-accento: #ffffff;
  --accento-scuro: var(--blu-vivo);
  --accento-chiaro: var(--blu-chiaro);
  --accento-su-scuro: #8cc4ff;

  --fuoco: #ff9500;
  --ombra: rgba(23, 50, 77, 0.14);
}

/* Tema scuro. Non è un'inversione meccanica: il blu primario si schiarisce
   perché #0063c8 su fondo scuro non arriva a 4.5:1, e i toni di stato si
   alzano di luminosità per restare leggibili. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sfondo: #10202f;
    --sfondo-tenue: #16293b;
    --sfondo-rilievo: #1a3145;
    --sfondo-blu: #16293b;
    --sfondo-scuro: #0a1724;

    --testo: #e9eff5;
    --testo-tenue: #aabdcd;
    --testo-scuro: #e9eff5;
    --testo-scuro-tenue: #aabdcd;

    --bordo: #2c4761;
    --bordo-forte: #5a7b9c;
    --bordo-scuro: #2c4761;

    --accento: #78b8f7;
  --su-accento: #0b2136;
    --accento-scuro: #a3d0ff;
    --accento-chiaro: #1c3a52;
    --accento-su-scuro: #78b8f7;

    --urgenza: #ff9a9a;
    --urgenza-sfondo: #3a1c1e;
    --attenzione: #f2bd64;
    --attenzione-sfondo: #3a2c12;
    --conferma: #71d7a7;
    --conferma-sfondo: #123329;

    --fuoco: #ffb84d;
    --ombra: rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --sfondo: #10202f;
  --sfondo-tenue: #16293b;
  --sfondo-rilievo: #1a3145;
  --sfondo-blu: #16293b;
  --sfondo-scuro: #0a1724;

  --testo: #e9eff5;
  --testo-tenue: #aabdcd;
  --testo-scuro: #e9eff5;
  --testo-scuro-tenue: #aabdcd;

  --bordo: #2c4761;
  --bordo-forte: #5a7b9c;
  --bordo-scuro: #2c4761;

  --accento: #78b8f7;
  --su-accento: #0b2136;
  --accento-scuro: #a3d0ff;
  --accento-chiaro: #1c3a52;
  --accento-su-scuro: #78b8f7;

  --urgenza: #ff9a9a;
  --urgenza-sfondo: #3a1c1e;
  --attenzione: #f2bd64;
  --attenzione-sfondo: #3a2c12;
  --conferma: #71d7a7;
  --conferma-sfondo: #123329;

  --fuoco: #ffb84d;
  --ombra: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  --sfondo: var(--bianco);
  --sfondo-tenue: var(--grigio-05);
  --sfondo-rilievo: #ffffff;
  --sfondo-blu: var(--blu-tenue);
  --sfondo-scuro: var(--blu-inchiostro);

  --testo: var(--blu-notte);
  --testo-tenue: var(--grigio-60);
  --testo-scuro: #eef3f8;
  --testo-scuro-tenue: #bacbdb;

  --bordo: var(--grigio-20);
  --bordo-forte: var(--grigio-40);
  --bordo-scuro: #2b4a68;

  --accento: var(--blu);
  /* Il testo sopra l'accento non puo' essere sempre #fff: nel tema scuro
     l'accento diventa azzurro chiaro e il bianco scende a 2,10:1, sotto
     il minimo AA di 4,5:1. Qui vale bianco, nel tema scuro un blu
     profondo che rende 7,78:1. */
  --su-accento: #ffffff;
  --accento-scuro: var(--blu-vivo);
  --accento-chiaro: var(--blu-chiaro);
  --accento-su-scuro: #8cc4ff;

  --urgenza: #a4171f;
  --urgenza-sfondo: #fdecec;
  --attenzione: #74490a;
  --attenzione-sfondo: #fdf3e0;
  --conferma: #005c39;
  --conferma-sfondo: #e6f4ee;

  --fuoco: #ff9500;
  --ombra: rgba(23, 50, 77, 0.14);
}

/* Tipografia e spazio */
:root {
  --font: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-micro: 0.8125rem;
  --t-piccolo: 0.9375rem;
  --t-base: 1.0625rem;
  --t-guida: clamp(1.1875rem, 1.09rem + 0.45vw, 1.375rem);
  --t-h4: 1.1875rem;
  --t-h3: clamp(1.375rem, 1.27rem + 0.5vw, 1.625rem);
  --t-h2: clamp(1.625rem, 1.4rem + 1.05vw, 2.125rem);
  --t-h1: clamp(2rem, 1.6rem + 1.9vw, 2.875rem);
  --t-cifra: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);

  --lh-stretta: 1.12;
  --lh-titolo: 1.24;
  --lh-corpo: 1.6;

  /* Larghezza massima del testo scorrevole.
     Storia breve: era 68ch, poi `none`. Sono sbagliate tutte e due, per
     motivi opposti.
     Con `none` il paragrafo prende tutto il telaio: 1248px di riga, che a
     17px fanno 147 caratteri. Sopra i 90 caratteri il ritorno a capo comincia
     a sbagliare riga in modo misurabile, e qui si legge chi sta decidendo se
     presentare domanda a un concorso: perdere la riga costa.
     Con 68ch il testo restava largo 578px allineato a sinistra dentro un
     telaio di 1248px, e i 670px vuoti stavano tutti a destra. Non era
     strozzato, era sbilanciato.
     La misura non è il problema: il problema è che una colonna stretta dentro
     un contenitore largo, allineata a un solo bordo, sembra un errore. La
     soluzione è dare al telaio una struttura — binario dell'etichetta a
     sinistra, testo al centro, margine a destra — e allora la misura giusta
     torna a essere quella giusta.
     42rem = 672px = 79 caratteri a 17px. Volutamente sopra i 66 di Bringhurst
     (lo schermo tollera più della carta, e qui si vuole larghezza) e
     altrettanto volutamente sotto i 90. */
  --misura: 42rem;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  --margine: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --telaio: 78rem;
  --telaio-prosa: 46rem;

  --raggio: 4px;
  --filo: 1px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);

  --z-testata: 50;
  --z-pannello: 60;
  --z-salta: 90;
}

/* ==========================================================================
   04  Elementi di base
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-titolo);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--testo);
}
h1 { font-size: var(--t-h1); line-height: var(--lh-stretta); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p, li { text-wrap: pretty; }
p { max-width: var(--misura); }

a { color: var(--accento); text-underline-offset: 0.16em; }
a:hover { color: var(--accento-scuro); }

/* Il fuoco è arancione e spesso: si vede sul bianco, sul blu e sul fondo
   scuro senza cambiare colore a seconda del contesto. È il modello dei
   servizi pubblici italiani, ed è ciò che più aiuta chi naviga da tastiera. */
/* Anello di fuoco a DUE toni: arancio interno, anello esterno del colore del
   testo. L'arancio da solo su fondo bianco fa 2.2:1 e non basterebbe (serve
   3:1 contro il colore adiacente, WCAG 2.1 SC 1.4.11): l'anello esterno porta
   il contorno a 13:1 su tema chiaro e 14:1 su tema scuro, e siccome usa
   `--testo` si adatta da solo al tema senza una seconda regola.
   Verificato da sito/strumenti/verifica_contrasto.py. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--fuoco);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--sfondo), 0 0 0 7px var(--testo);
  border-radius: 2px;
}

/* Sulle bande scure il fondo dell'anello interno è quello della banda. */
.fascia--scura :where(a, button, summary):focus-visible,
.apertura :where(a, button, summary, input):focus-visible,
.banda-fonte a:focus-visible,
.banda-marchio :where(a, button):focus-visible,
.pie :where(a, button):focus-visible {
  box-shadow: 0 0 0 2px var(--sfondo-scuro), 0 0 0 7px #ffffff;
}

::selection { background: var(--accento); color: var(--su-accento); }
hr { border: 0; border-top: var(--filo) solid var(--bordo); margin: var(--s6) 0; }

/* ==========================================================================
   05  Impalcatura
   ========================================================================== */

.telaio { width: min(100% - (var(--margine) * 2), var(--telaio)); margin-inline: auto; }
.telaio--prosa { width: min(100% - (var(--margine) * 2), var(--telaio-prosa)); }

.salta {
  position: absolute; left: var(--s4); top: var(--s4);
  z-index: var(--z-salta); transform: translateY(-200%);
  background: var(--fuoco); color: #1a1a1a; font-weight: 700;
  padding: var(--s3) var(--s5); text-decoration: none;
  border-radius: var(--raggio);
  transition: transform 160ms var(--curva);
}
.salta:focus { transform: translateY(0); }

.fascia { padding-block: clamp(var(--s6), 4vw, var(--s8)); }
.fascia--sottile { padding-block: clamp(var(--s5), 3vw, var(--s6)); }
/* Una fascia colorata è una pausa nella pagina, e una pausa ha bisogno di
   spazio intorno per essere una pausa. Se tutte le fasce hanno lo stesso
   respiro, il colore diventa l'unico segnale che qualcosa è cambiato: sulla
   scheda di un concorso le quattro sezioni sono tutte `--sottile` e la pagina
   scorre piatta. Le fasce con fondo proprio prendono un gradino in più. */
.fascia--sottile.fascia--tenue,
.fascia--sottile.fascia--blu,
.fascia--sottile.fascia--scura { padding-block: clamp(var(--s6), 4vw, var(--s7)); }
.fascia--tenue { background: var(--sfondo-tenue); }
.fascia--blu { background: var(--sfondo-blu); }

.fascia--scura { background: var(--sfondo-scuro); color: var(--testo-scuro); }
.fascia--scura h1, .fascia--scura h2, .fascia--scura h3 { color: var(--testo-scuro); }
.fascia--scura a { color: var(--accento-su-scuro); }
.fascia--scura .tenue { color: var(--testo-scuro-tenue); }
.fascia--scura p, .fascia--scura li { line-height: calc(var(--lh-corpo) + 0.06); }

.griglia { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .griglia--due { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .griglia--principale { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s7); align-items: start; }
}
.griglia--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); }

/* Sezione con etichetta a sinistra: è l'impaginazione tipica delle schede
   amministrative, e aiuta a scorrere una pagina lunga cercando una voce.

   ATTENZIONE, ERRORE CORRETTO IL 9 SETTEMBRE 2026. Questo blocco era scritto
   come container query: `.campi` dichiarava `container-type: inline-size` e
   poi `@container campi (min-width: 52rem) { .campi { … } }`.
   Un elemento non è mai il contenitore di se stesso: una container query si
   valuta sul contenitore ANTENATO più vicino. La regola non ha quindi mai
   avuto effetto, e su ogni pagina di servizio — /ammissibilita/,
   /come-funziona/, /metodo/, /prezzi/, /chi-siamo/ e la home — l'etichetta è
   sempre stata sopra il testo invece che accanto, con i paragrafi larghi
   1248px, cioè 136 caratteri. Misurato con Chrome headless a 1440px, non
   dedotto.
   (Le altre due container query del foglio, `scheda` e `fonte`, sono corrette:
   interrogano `.scheda__voce` e `.fonte dl`, che sono discendenti.)
   Qui basta una media query: `.campi` sta sempre dentro `.telaio`, che è
   largo quanto la finestra meno i margini. 56rem di finestra fanno circa
   838px di telaio, che è la soglia a cui i tre binari hanno senso. */
.campi { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
/* Tre binari, non due: etichetta | testo alla sua misura | margine.
   Il terzo binario è vuoto ed è il punto della faccenda. Con due binari il
   testo si allargava fino a 976px (115 caratteri a 17px) per non lasciare il
   vuoto a destra; con tre, il vuoto a destra c'è ma è largo quanto il binario
   dell'etichetta a sinistra, quindi legge come margine e non come errore.
   A 1248px di telaio: 256 | 672 | 256.
   Sotto i 52rem di contenitore i minmax collassano da soli sul vecchio
   impianto a due colonne, senza una seconda regola. */
@media (min-width: 56rem) {
  .campi { grid-template-columns: minmax(13rem, 1fr) minmax(0, var(--misura)) minmax(0, 1fr); gap: var(--s3) var(--s6); }
  .campi--largo { grid-template-columns: minmax(15rem, 1fr) minmax(0, var(--misura)) minmax(0, 1fr); }
  /* L'etichetta sta nel binario 1; TUTTO il resto sta nel binario 2, anche
     quando i figli sono più di due. Senza questa riga il terzo figlio finisce
     in colonna 1 riga 2, cioè sotto l'etichetta: succede in fondo a
     /ammissibilita/ e a /come-funziona/, dove dopo l'etichetta ci sono due
     paragrafi. */
  .campi > * { grid-column: 2; }
  .campi > .campi__etichetta { grid-column: 1; grid-row: 1; }
}
.campi__etichetta {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accento); padding-top: 0.3em; margin: 0;
}
.fascia--scura .campi__etichetta { color: var(--accento-su-scuro); }

.regola { border: 0; border-top: var(--filo) solid var(--bordo); margin: 0; }

/* ==========================================================================
   06  Testata istituzionale
   --------------------------------------------------------------------------
   Tre bande, come nei portali della PA: la banda che dichiara la fonte dei
   dati, la banda del marchio, la barra di navigazione.
   ========================================================================== */

.testata { position: relative; z-index: var(--z-testata); }

/* Dichiara subito da dove vengono i dati: è la prima riga della pagina ed è
   l'argomento di credibilità del servizio. */
.banda-fonte {
  background: var(--blu-inchiostro); color: var(--testo-scuro-tenue);
  font-size: var(--t-micro); padding-block: var(--s2);
}
.banda-fonte .telaio {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: center; justify-content: space-between;
}
.banda-fonte a { color: #d3e6f8; }
.banda-fonte a:hover { color: #fff; }

.banda-marchio { background: var(--blu-scuro); color: #fff; padding-block: var(--s4); }
.banda-marchio .telaio {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: center; justify-content: space-between;
}

.marchio {
  display: inline-block; font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.02em; color: #fff; text-decoration: none; line-height: 1.1;
}
.marchio:hover { color: #fff; }
.marchio__coda { color: var(--accento-su-scuro); }
.marchio__claim {
  display: block; font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0; color: #d3e6f8; margin-top: 3px;
}

/* Accesso all'area riservata: sta nella banda del marchio, in alto a destra,
   dove lo cercano tutti perché è lì in ogni portale della PA. */
.accesso { display: flex; align-items: center; gap: var(--s4); margin: 0; max-width: none; }
.accesso__entra {
  color: #fff; font-weight: 700; font-size: var(--t-piccolo);
  text-decoration: none; border-bottom: 2px solid transparent;
  padding-block: var(--s2);
}
.accesso__entra:hover { color: #fff; border-bottom-color: var(--accento-su-scuro); }

.bottone--chiaro {
  background: #fff; border-color: #fff; color: var(--blu-scuro);
  min-height: 40px; padding: var(--s2) var(--s4);
}
.bottone--chiaro:hover { background: var(--accento-chiaro); border-color: var(--accento-chiaro); color: var(--testo); }

.menu-ridotto__accesso {
  border-top: var(--filo) solid var(--bordo);
  margin-top: var(--s2); padding-top: var(--s3) !important;
}

.banda-nav { background: var(--sfondo); border-bottom: 2px solid var(--bordo); }
.banda-nav .telaio { display: flex; align-items: center; gap: var(--s4); }

.nav-principale { display: none; flex-wrap: wrap; gap: clamp(var(--s3), 1.4vw, var(--s5)); }
@media (min-width: 62rem) { .nav-principale { display: flex; } }

.nav-principale a {
  display: block; padding: var(--s4) 0 calc(var(--s4) - 3px);
  font-weight: 600; font-size: var(--t-piccolo);
  color: var(--testo); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav-principale a:hover { color: var(--accento); border-bottom-color: var(--bordo-forte); }
.nav-principale a[aria-current="page"] { color: var(--accento); border-bottom-color: var(--accento); }

.strumenti-testata { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* Il bordo è l'unica cosa che rende questo bottone un bottone, quindi deve
   avere 3:1 contro il fondo come qualsiasi comando (WCAG 2.2 SC 1.4.11).
   Con `--bordo` faceva 1,35:1 su tema chiaro e 1,72:1 su tema scuro: era un
   bottone invisibile. Con `--bordo-forte` fa 3,26:1 e 3,74:1. */
.tema {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: var(--filo) solid var(--bordo-forte);
  border-radius: var(--raggio); cursor: pointer; color: var(--testo);
}
.tema:hover { border-color: var(--accento); color: var(--accento); }
.js .tema { display: inline-flex; }

.menu-ridotto { position: relative; }
@media (min-width: 62rem) { .menu-ridotto { display: none; } }
.menu-ridotto > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s4);
  font-weight: 600; font-size: var(--t-piccolo);
  border: var(--filo) solid var(--bordo-forte); border-radius: var(--raggio);
}
.menu-ridotto > summary::-webkit-details-marker { display: none; }
.menu-ridotto[open] > summary { background: var(--accento); color: var(--su-accento); border-color: var(--accento); }
.menu-ridotto__pannello {
  position: absolute; right: 0; top: calc(100% + var(--s2));
  z-index: var(--z-pannello); min-width: 16rem;
  background: var(--sfondo-rilievo);
  border: var(--filo) solid var(--bordo-forte); border-radius: var(--raggio);
  box-shadow: 0 12px 32px -12px var(--ombra); padding: var(--s2) 0;
}
.menu-ridotto__pannello a {
  display: block; padding: var(--s3) var(--s5);
  color: var(--testo); text-decoration: none;
  font-weight: 600; font-size: var(--t-piccolo);
}
.menu-ridotto__pannello a:hover { background: var(--accento-chiaro); color: var(--accento-scuro); }

.briciole { background: var(--sfondo-tenue); border-bottom: var(--filo) solid var(--bordo); }
.briciole ol {
  display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none;
  padding: var(--s3) 0; margin: 0; font-size: var(--t-micro); color: var(--testo-tenue);
}
.briciole li + li::before { content: "›"; margin-right: var(--s2); color: var(--bordo-forte); }
.briciole a { color: var(--testo-tenue); }
.briciole [aria-current="page"] { color: var(--testo); font-weight: 600; }

/* ==========================================================================
   07  Apertura e conteggi
   --------------------------------------------------------------------------
   Il numero di concorsi aperti è la prima informazione della pagina, perché è
   l'unica per cui valga la pena arrivarci. Tutti i conteggi vengono da una
   query: non esiste un numero scritto a mano in nessun modello.
   ========================================================================== */

.apertura { background: var(--sfondo-scuro); color: var(--testo-scuro); }
.apertura h1 { color: #fff; }

.apertura__cifra {
  display: block; font-size: var(--t-cifra); font-weight: 700;
  line-height: 0.95; letter-spacing: -0.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.apertura__coda { display: block; font-size: var(--t-h2); font-weight: 600; color: #cfe3f5; margin-top: var(--s2); }
.apertura__quando { font-size: var(--t-micro); color: var(--testo-scuro-tenue); margin-top: var(--s4); }
.apertura__quando time { color: #fff; font-weight: 600; }

.conteggi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4);
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: var(--filo) solid var(--bordo-scuro);
}
/* Restano due colonne anche da desktop. I quattro conteggi stanno nella metà
   destra dell'apertura, larga circa 600px: su quattro colonne ognuna aveva
   150px e «pubblicati negli ultimi 30 giorni» andava a capo tre volte. Su due
   colonne l'etichetta sta in una riga. */
.conteggi { row-gap: var(--s5); }
.conteggio__valore {
  display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.conteggio__etichetta { display: block; font-size: var(--t-micro); color: var(--testo-scuro-tenue); margin-top: 2px; }

/* ==========================================================================
   08  Ricerca
   --------------------------------------------------------------------------
   Filtra l'elenco già presente nella pagina. Senza JavaScript il campo non
   compare, e restano la navigazione per territorio e per profilo, che sono
   collegamenti veri: nessuna funzione si perde, cambia solo la scorciatoia.
   ========================================================================== */

.ricerca { display: none; margin-top: var(--s6); }
.js .ricerca { display: block; }
.ricerca label { display: block; font-weight: 600; font-size: var(--t-piccolo); margin-bottom: var(--s2); }
.ricerca input[type="search"] {
  width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
  font-size: var(--t-base); color: var(--testo);
  /* era `#fff` fisso: nel tema scuro il testo (chiaro) finiva su fondo
     bianco, 1,16:1, cioe' illeggibile. Lo sfondo deve seguire il tema
     come lo segue il testo. */
  /* Il bordo era trasparente: sul tema chiaro il campo si distingueva lo
     stesso perché è bianco su banda blu scura (16,34:1), ma sul tema scuro il
     fondo del campo (#1a3145) contro la banda (#0a1724) faceva 1,35:1 e il
     campo semplicemente non si vedeva. Un bordo visibile in entrambi i temi:
     5,02:1 su chiaro, 4,09:1 su scuro. */
  background: var(--sfondo-rilievo); border: 2px solid var(--bordo-forte); border-radius: var(--raggio);
}
.ricerca input[type="search"]:focus { border-color: var(--fuoco); }
.ricerca__esito { margin-top: var(--s3); font-size: var(--t-piccolo); font-weight: 600; }

/* ==========================================================================
   09  Box scadenze
   --------------------------------------------------------------------------
   Le scadenze sono reali e mostrarle è un servizio. Ma niente pressione
   aggiunta sopra il dato: nessun conto alla rovescia animato, nessun rosso
   lampeggiante, nessuna formula da vendita a tempo. Il numero e la data sono
   già urgenti da soli, e chi arriva tardi su un bando trova l'avviso, che è
   la cosa davvero utile.
   ========================================================================== */

.scadenze {
  border: var(--filo) solid var(--bordo);
  border-top: 4px solid var(--urgenza);
  border-radius: var(--raggio);
  background: var(--sfondo-rilievo);
  overflow: hidden;
}

.scadenze__testa { padding: var(--s5); border-bottom: var(--filo) solid var(--bordo); }

/* La riga di apertura: il prossimo giorno di grande scadenza, con il suo
   conteggio e i suoi posti. È un'affermazione specifica e verificabile, non
   un generico invito ad affrettarsi. */
.scadenze__grappolo { font-size: var(--t-h3); font-weight: 700; line-height: 1.3; margin: 0; max-width: var(--misura); }
.scadenze__grappolo strong { color: var(--urgenza); }
.scadenze__nota { font-size: var(--t-piccolo); color: var(--testo-tenue); margin-top: var(--s2); }

.scadenze__elenco { list-style: none; margin: 0; padding: 0; }
.scadenze__voce { border-bottom: var(--filo) solid var(--bordo); }
.scadenze__voce:last-child { border-bottom: 0; }

.scadenze__link {
  display: grid; grid-template-columns: 1fr; gap: var(--s2);
  padding: var(--s4) var(--s5); text-decoration: none; color: inherit;
}
@media (min-width: 40rem) {
  .scadenze__link { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
}
/* Stesso motivo dell'elenco: il nome dell'ente non deve galleggiare in una
   colonna da 1000px per dire «Università di Bergamo». */
@media (min-width: 56rem) {
  .scadenze__link { grid-template-columns: 9.5rem minmax(0, var(--misura)) minmax(0, 1fr); }
}
@media (hover: hover) { .scadenze__link:hover { background: var(--accento-chiaro); } }
.scadenze__link:hover .scadenze__titolo { color: var(--accento-scuro); text-decoration: underline; }

/* Data e ora prima, «fra quanto» dopo: l'informazione di servizio è la data
   esatta, il resto è contorno. */
.scadenze__quando { font-variant-numeric: tabular-nums; }
.scadenze__giorno { display: block; font-weight: 700; font-size: var(--t-piccolo); color: var(--urgenza); }
.scadenze__fra { display: block; font-size: var(--t-micro); color: var(--testo-tenue); }
.scadenze__titolo { font-weight: 700; color: var(--accento); }
.scadenze__ente { display: block; font-size: var(--t-piccolo); color: var(--testo-tenue); margin-top: 2px; }

.scadenze__piede {
  padding: var(--s4) var(--s5);
  background: var(--sfondo-tenue);
  border-top: var(--filo) solid var(--bordo);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: center; justify-content: space-between;
}

/* ==========================================================================
   10  Elenco dei concorsi
   --------------------------------------------------------------------------
   Righe, non riquadri affiancati: è un elenco di procedure amministrative e
   si legge dall'alto in basso, con la scadenza sempre nello stesso punto.
   ========================================================================== */

.concorsi { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--bordo); }
.concorso { border-bottom: var(--filo) solid var(--bordo); }

.concorso__link {
  display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s5);
  padding: var(--s4); text-decoration: none; color: inherit;
}
@media (min-width: 48rem) {
  .concorso__link { grid-template-columns: minmax(0, 1fr) 11rem; align-items: start; }
}
/* Sopra i 75rem la scadenza smetteva di stare accanto al concorso e finiva
   contro il bordo destro del telaio: fra la fine del nome dell'ente e la data
   restavano circa 880px di niente, e la data è l'informazione che si viene a
   cercare. Un terzo binario vuoto in coda tiene i due dati a 40px l'uno
   dall'altro e lascia la riga larga quanto prima, perché la riga è il
   bersaglio da cliccare e il fondo dell'hover: si accorcia il percorso
   dell'occhio, non l'area sensibile. */
@media (min-width: 56rem) {
  .concorso__link { grid-template-columns: minmax(0, var(--misura)) 11rem minmax(0, 1fr); }
}
@media (hover: hover) { .concorso__link:hover { background: var(--accento-chiaro); } }
.concorso__link:hover .concorso__titolo,
.concorso__link:focus-visible .concorso__titolo { color: var(--accento-scuro); text-decoration: underline; }

/* Le tre righe della voce sono una cosa sola: si stringono fra loro e
   respirano verso la voce accanto. Prima ogni riga aveva 8px sotto e
   l'interlinea del corpo del testo (1,6), e una voce alta 137px ne faceva
   stare cinque per schermata di portatile: per un indice da 491 voci
   ordinate per scadenza è poco. Ora sono 109px, e sono sette. */
.concorso__titolo { font-size: var(--t-h4); font-weight: 700; line-height: 1.3; color: var(--accento); margin-bottom: var(--s1); }
.concorso__ente { display: block; font-weight: 600; line-height: 1.35; margin-bottom: var(--s1); }
.concorso__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-piccolo); color: var(--testo-tenue); }

.concorso__scadenza { text-align: left; }
@media (min-width: 48rem) { .concorso__scadenza { text-align: right; } }
/* Da 56rem in su la scadenza non è più in fondo alla riga ma subito dopo il
   nome dell'ente, quindi si allinea a sinistra come una colonna di tabella:
   allineata a destra tornerebbe a scappare via dal dato che accompagna. */
@media (min-width: 56rem) { .concorso__scadenza { text-align: left; } }
.concorso__data { display: block; font-weight: 700; font-size: var(--t-piccolo); font-variant-numeric: tabular-nums; }
.concorso__resta { display: block; font-size: var(--t-micro); color: var(--testo-tenue); margin-top: 2px; }
.concorso--urgente .concorso__data { color: var(--urgenza); }
.concorso--urgente .concorso__resta { color: var(--urgenza); font-weight: 700; }

/* Etichette: distinguono per parola e per forma, mai per solo colore. */
.etichetta {
  display: inline-block; font-size: var(--t-micro); font-weight: 700; line-height: 1.4;
  padding: 2px var(--s2); border-radius: var(--raggio);
  border: var(--filo) solid currentColor;
}
.etichetta--urgente { color: var(--urgenza); background: var(--urgenza-sfondo); }
.etichetta--verifica { color: var(--attenzione); background: var(--attenzione-sfondo); }
.etichetta--nuovo { color: var(--conferma); background: var(--conferma-sfondo); }
.etichetta--neutra { color: var(--testo-tenue); background: var(--sfondo-tenue); }

/* ==========================================================================
   11  Scheda del singolo concorso
   ========================================================================== */

/* La scheda decide il proprio impianto in base allo spazio CHE HA, non a
   quello che ha la finestra. Con una media query, dentro la colonna laterale
   (20rem) l'etichetta si prendeva 12rem fisse e al valore restava una striscia
   in cui ogni parola andava a capo: la tabella risultava schiacciata proprio
   sugli schermi larghi, che è il contrario di quello che ci si aspetta. */
.scheda {
  container-type: inline-size;
  container-name: scheda;
  border: var(--filo) solid var(--bordo);
  border-top: 4px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--sfondo-rilievo);
}
/* È un `p`, quindi eredita la misura di lettura, ma il suo filetto è il bordo
   superiore della scheda e deve arrivare in fondo: senza questa riga la linea
   si fermava a 672px in mezzo a una scheda larga 1248. */
.scheda__intestazione {
  padding: var(--s4) var(--s5); border-bottom: var(--filo) solid var(--bordo);
  font-weight: 700; font-size: var(--t-piccolo); max-width: none;
}
.scheda dl { margin: 0; }
.scheda__voce {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: var(--s3) var(--s5); border-bottom: var(--filo) solid var(--bordo);
}
.scheda__voce:last-child { border-bottom: 0; }
/* Due colonne solo se la SCHEDA è larga almeno 30rem: sotto quella soglia
   il valore non avrebbe spazio per stare su una riga. */
@container scheda (min-width: 30rem) {
  .scheda__voce {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--s4);
    align-items: baseline;
  }
}

/* Ripiego per i browser senza container query: si resta impilati, che è
   sempre leggibile, invece di rischiare la colonna schiacciata. */
@supports not (container-type: inline-size) {
  @media (min-width: 64rem) {
    .scheda__voce { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
  }
}
.scheda dt { font-size: var(--t-piccolo); color: var(--testo-tenue); font-weight: 600; }
.scheda dd { margin: 0; font-weight: 600; }
.scheda dd.numero { font-variant-numeric: tabular-nums; }

/* --- La scheda come CONTENUTO principale, non come contorno ---
   Sulla pagina di un concorso la scheda è ciò per cui si è arrivati: sta al
   centro, a piena larghezza, e usa lo spazio per disporre i campi affiancati
   invece di incolonnarli in una striscia. I due campi che decidono se vale la
   pena continuare a leggere — scadenza e posti — sono i più grandi. */
.scheda--principale { border-top-width: 6px; }

.scheda__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s5);
  padding: var(--s5);
}

.campo__etichetta {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: var(--s1);
}

.campo__valore {
  display: block;
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.3;
}

.campo__valore.numero { font-variant-numeric: tabular-nums; }
.campo__valore .tenue { font-weight: 400; font-size: var(--t-piccolo); }

/* I due campi che contano di più, in evidenza. */
.campo--primario .campo__valore { font-size: var(--t-h3); }
.campo--scadenza .campo__valore { color: var(--urgenza); }
.campo__nota { display: block; font-size: var(--t-micro); color: var(--testo-tenue); margin-top: var(--s1); font-weight: 400; }

/* --- Testo dell'atto ---
   È il contenuto proprio della pagina, quello che la distingue da tutte le
   altre. Composto per essere letto: misura contenuta, interlinea ampia.

   Il filetto verticale che stava a sinistra è sparito. Una barra colorata sul
   fianco di un blocco è una decorazione che finge di essere una struttura:
   non dice nulla che il titolo di sezione non dica già. Al suo posto un
   filetto orizzontale sopra, che è come si separa il testo citato dal testo
   che lo introduce da prima che esistessero i fogli di stile.
   #84909c su #f7f8f9 fa 3,06:1, #5a7b9c su #16293b fa 3,36:1: sopra la
   soglia di 3:1 per gli elementi non testuali (WCAG 2.2 SC 1.4.11). */
.atto {
  border-top: 2px solid var(--bordo-forte);
  padding-top: var(--s4);
  max-width: var(--misura);
}
.atto p { line-height: 1.75; }
.atto p + p { margin-top: var(--s4); }
.atto__nota { font-size: var(--t-micro); color: var(--testo-tenue); margin-top: var(--s4); }

/* La sezione dell'atto prende lo stesso impianto a binari delle pagine di
   servizio: il titolo va nel binario di sinistra, il testo tiene la misura,
   il margine resta a destra. È l'unico modo di usare tutto il telaio senza
   allungare la riga, dato che qui non c'è un secondo contenuto da affiancare.
   Il markup non cambia: `:has()` riconosce la sezione dal fatto che contiene
   un atto. Dove `:has()` non c'è, resta l'impaginato in colonna singola, che
   è sempre leggibile. */
@supports selector(:has(*)) {
  @media (min-width: 62rem) {
    .fascia:has(> .telaio > .atto) > .telaio {
      display: grid;
      grid-template-columns: minmax(15rem, 1fr) minmax(0, var(--misura)) minmax(0, 1fr);
      column-gap: var(--s6);
      align-items: start;
    }
    .fascia:has(> .telaio > .atto) > .telaio > h2 {
      grid-column: 1; grid-row: 1;
      font-size: var(--t-h3);
    }
    .fascia:has(> .telaio > .atto) > .telaio > .atto { grid-column: 2; grid-row: 1; margin-top: 0; }
    .fascia:has(> .telaio > .atto) > .telaio > .atto__nota { grid-column: 2; grid-row: 2; }
  }
}

/* --- Avvertenza di dominio ---
   Va ripetuta su ogni scheda, ma è un'avvertenza, non un paragrafo: corpo
   piccolo, subordinata, senza riquadro che la faccia sembrare contenuto. */
.avvertenza {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  border-top: var(--filo) solid var(--bordo);
  padding-top: var(--s3);
  max-width: var(--misura);
}
.avvertenza strong { color: var(--testo); font-weight: 700; }

/* Riquadro della fonte: il pezzo che rende la pagina verificabile contro un
   atto dello Stato invece che contro noi stessi. */
.fonte {
  border: var(--filo) solid var(--bordo);
  border-top: 4px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--sfondo-blu);
  padding: var(--s4) var(--s5);
  font-size: var(--t-piccolo); line-height: 1.55;
}
.fonte__titolo { display: block; font-weight: 700; margin-bottom: var(--s2); }
.fonte {
  container-type: inline-size;
  container-name: fonte;
}
.fonte dl { display: grid; gap: var(--s1) 0; grid-template-columns: 1fr; margin: 0; }
.fonte dt { margin-top: var(--s2); }
.fonte dt:first-child { margin-top: 0; }
@container fonte (min-width: 26rem) {
  .fonte dl { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s1) var(--s4); }
  .fonte dt { margin-top: 0; }
}
.fonte dt { font-weight: 600; color: var(--testo-tenue); }
.fonte dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   12  Navigazione per territorio e profilo
   ========================================================================== */

.pastiglie { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.pastiglia {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s4); min-height: 42px;
  border: var(--filo) solid var(--bordo-forte); border-radius: 999px;
  background: var(--sfondo-rilievo); color: var(--testo);
  text-decoration: none; font-size: var(--t-piccolo); font-weight: 600;
}
.pastiglia:hover { border-color: var(--accento); background: var(--accento-chiaro); color: var(--accento-scuro); }
.pastiglia__n { font-variant-numeric: tabular-nums; color: var(--testo-tenue); font-weight: 700; }
.pastiglia:hover .pastiglia__n { color: var(--accento-scuro); }

/* ==========================================================================
   13  Componenti editoriali
   --------------------------------------------------------------------------
   NOTA DELIBERATA: non esiste una classe che stampi un'etichetta tipo
   «In sintesi» sopra il paragrafo d'apertura. Un cartello che dichiara cosa
   sia un blocco di testo, ripetuto identico su ogni pagina, è un tic: se una
   sezione ha bisogno di essere presentata, di solito significa che non è
   scritta abbastanza bene da spiegarsi da sola. L'incipit si distingue con la
   tipografia e con lo spazio.
   ========================================================================== */

.occhiello {
  display: block; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accento); margin-bottom: var(--s2);
}
.fascia--scura .occhiello { color: var(--accento-su-scuro); }

.guida { font-size: var(--t-guida); line-height: 1.5; max-width: var(--misura); }
.tenue { color: var(--testo-tenue); }
.numero { font-variant-numeric: tabular-nums; }

/* Paragrafo d'apertura in evidenza. Nessuna etichetta, nessun riquadro,
   e ora nemmeno il filetto laterale: bastano il corpo più grande e
   l'interlinea più ariosa. Un filetto colorato accanto a un testo che è già
   il testo più grande della pagina è ripetere due volte la stessa cosa, e la
   seconda volta con una decorazione. */
.incipit { max-width: var(--misura); }
.incipit > p { font-size: var(--t-guida); line-height: 1.55; max-width: none; }
.incipit > p + p { margin-top: var(--s3); font-size: var(--t-base); }

.aggiornato { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--t-micro); color: var(--testo-tenue); }
/* Nel markup segue il titolo senza classe di distanza, e ci finiva incollata:
   13px appoggiati sotto una riga da 46px. */
h1 + .aggiornato, h2 + .aggiornato { margin-top: var(--s3); }
.aggiornato time { font-weight: 700; color: var(--testo); }
.fascia--scura .aggiornato { color: var(--testo-scuro-tenue); }
.fascia--scura .aggiornato time { color: #fff; }

.prosa > * + * { margin-top: var(--s4); }
.prosa > h2 { margin-top: var(--s7); padding-top: var(--s4); border-top: var(--filo) solid var(--bordo); }
.prosa > h3 { margin-top: var(--s6); }
.prosa > h2 + p, .prosa > h3 + p, .prosa > h2 + ul, .prosa > h3 + ul { margin-top: var(--s3); }
.prosa ul, .prosa ol { max-width: var(--misura); padding-left: 1.3em; }
.prosa li + li { margin-top: var(--s2); }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul > li { position: relative; padding-left: 1.5em; }
.prosa ul > li::before {
  content: ""; position: absolute; left: 0.2em; top: 0.62em;
  width: 0.6em; height: 0.6em; border-radius: 2px; background: var(--accento);
}
.prosa ol > li::marker { font-weight: 700; color: var(--accento); }

.tabella-scorre { overflow-x: auto; border: var(--filo) solid var(--bordo); border-radius: var(--raggio); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-piccolo); }
caption {
  text-align: left; padding: var(--s3) var(--s4); font-weight: 700;
  font-size: var(--t-micro); color: var(--testo-tenue);
  border-bottom: var(--filo) solid var(--bordo);
}
th, td { text-align: left; padding: var(--s3) var(--s4); border-bottom: var(--filo) solid var(--bordo); }
thead th { background: var(--sfondo-tenue); font-weight: 700; font-size: var(--t-micro); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   14  Prezzi
   ========================================================================== */

.listino { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 56rem) { .listino { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.livello {
  border: var(--filo) solid var(--bordo); border-top: 4px solid var(--bordo-forte);
  border-radius: var(--raggio); background: var(--sfondo-rilievo);
  padding: var(--s5); display: flex; flex-direction: column;
}
.livello--marcato { border-top-color: var(--accento); background: var(--sfondo-blu); }
.livello__nome {
  font-weight: 700; font-size: var(--t-piccolo); color: var(--testo-tenue);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.livello--marcato .livello__nome { color: var(--accento); }
.livello__prezzo {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); font-weight: 700;
  line-height: 1.05; margin-top: var(--s2); font-variant-numeric: tabular-nums;
}
.livello__periodo { font-size: var(--t-piccolo); font-weight: 400; color: var(--testo-tenue); }
.livello__sommario {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: var(--filo) solid var(--bordo);
  font-size: var(--t-piccolo); max-width: none;
}
.livello ul { list-style: none; margin: var(--s4) 0 0; padding: 0; font-size: var(--t-piccolo); flex-grow: 1; }
.livello li { position: relative; padding-left: 1.5em; padding-block: var(--s2); }
.livello li::before {
  content: ""; position: absolute; left: 0.15em; top: 1em;
  width: 0.6em; height: 0.6em; border-radius: 2px; background: var(--bordo-forte);
}
.livello--marcato li::before { background: var(--accento); }

/* ==========================================================================
   15  Domande frequenti
   ========================================================================== */

.domande { border-top: 2px solid var(--bordo); }
.domanda { border-bottom: var(--filo) solid var(--bordo); }
.domanda > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: var(--s4);
  align-items: baseline; padding: var(--s4) var(--s2);
  font-weight: 700; font-size: var(--t-h4); line-height: 1.35; color: var(--accento);
}
.domanda > summary::-webkit-details-marker { display: none; }
.domanda > summary:hover { background: var(--accento-chiaro); }
.domanda > summary::after { content: "+"; justify-self: end; font-size: 1.4rem; line-height: 1; }
.domanda[open] > summary::after { content: "−"; }
.domanda__risposta { padding: 0 var(--s2) var(--s5); max-width: var(--misura); }
.domanda__risposta > * + * { margin-top: var(--s3); }

/* ==========================================================================
   16  Bottoni
   ========================================================================== */

/* È un `p`, quindi eredita la misura di lettura: ma è una fila di bottoni,
   non una riga di testo, e a 672px i bottoni andavano a capo prima del
   necessario. */
.azioni { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; max-width: none; }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s5);
  font-weight: 700; font-size: var(--t-piccolo);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--accento); border-radius: var(--raggio);
  background: var(--accento); color: var(--su-accento);
  transition: background-color 140ms var(--curva), border-color 140ms var(--curva);
}
.bottone:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); color: var(--su-accento); }
.bottone--contorno { background: transparent; color: var(--accento); }
.bottone--contorno:hover { background: var(--accento-chiaro); color: var(--accento-scuro); }

.fascia--scura .bottone, .apertura .bottone { background: #fff; border-color: #fff; color: var(--blu-scuro); }
.fascia--scura .bottone:hover, .apertura .bottone:hover { background: #cfe3f5; border-color: #cfe3f5; color: var(--blu-scuro); }
.fascia--scura .bottone--contorno, .apertura .bottone--contorno { background: transparent; color: #fff; border-color: #8cc4ff; }
.fascia--scura .bottone--contorno:hover, .apertura .bottone--contorno:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Link che porta fuori dal sito. Il segno è visibile, non solo per i lettori
   di schermo: un collegamento che apre una scheda nuova senza avvisare è un
   problema di accessibilità, e su un sito che rimanda al registro
   istituzionale si nota subito. */
.esterno::after {
  content: "↗";           /* freccia in alto a destra */
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.85em;
  text-decoration: none;
  vertical-align: baseline;
}

.avanti {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  font-weight: 700; font-size: var(--t-piccolo);
  color: var(--accento); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.avanti::after { content: "→"; transition: transform 180ms var(--curva); }
@media (hover: hover) and (pointer: fine) { .avanti:hover::after { transform: translateX(0.25em); } }
.fascia--scura .avanti, .apertura .avanti { color: var(--accento-su-scuro); }

/* ==========================================================================
   17  Avvisi
   ========================================================================== */

/* Il colore dello stato sta nel filetto in alto e nel fondo, come nella
   scheda, nel riquadro delle scadenze e nelle fasce di prezzo: un solo modo
   di marcare un riquadro su tutto il sito, invece di una barra laterale qui e
   un filetto superiore altrove. Il colore non è mai l'unico segnale — resta
   la parola in grassetto della prima riga. */
.avviso {
  border: var(--filo) solid var(--bordo); border-top: 3px solid var(--bordo-forte);
  border-radius: var(--raggio); background: var(--sfondo-tenue);
  padding: var(--s4) var(--s5); font-size: var(--t-piccolo); line-height: 1.55;
  max-width: var(--misura);
}
.avviso > * + * { margin-top: var(--s2); }
.avviso p { max-width: none; }
.avviso__cap { display: block; font-weight: 700; }
.avviso--verifica { border-top-color: var(--attenzione); background: var(--attenzione-sfondo); }
.avviso--verifica .avviso__cap { color: var(--attenzione); }
.avviso--regola { border-top-color: var(--accento); background: var(--sfondo-blu); }
.avviso--regola .avviso__cap { color: var(--accento); }
.avviso--bozza { border-style: dashed; border-top-style: solid; border-top-color: var(--attenzione); background: transparent; }
.avviso--bozza .avviso__cap { color: var(--attenzione); }

.vuoto {
  border: 2px dashed var(--bordo-forte); border-radius: var(--raggio);
  padding: clamp(var(--s5), 4vw, var(--s7)); max-width: var(--misura);
}
.vuoto h2, .vuoto h3 { margin-bottom: var(--s2); }
.vuoto p { margin-bottom: var(--s4); }

/* ==========================================================================
   18  Paginazione
   ========================================================================== */

.paginazione {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: center; list-style: none; padding: 0; margin: 0;
}
.paginazione a, .paginazione span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--s3);
  border: var(--filo) solid var(--bordo-forte); border-radius: var(--raggio);
  text-decoration: none; font-weight: 700; font-size: var(--t-piccolo);
  color: var(--accento); background: var(--sfondo-rilievo);
}
.paginazione a:hover { background: var(--accento-chiaro); }
.paginazione [aria-current="page"] { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.paginazione .inattivo { color: var(--testo-tenue); border-style: dashed; background: transparent; }

/* ==========================================================================
   19  Pie' di pagina
   ========================================================================== */

.pie { background: var(--blu-inchiostro); color: var(--testo-scuro); padding-block: var(--s7) var(--s5); margin-top: var(--s8); }
.pie a { color: #d3e6f8; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__griglia {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-bottom: var(--s5); border-bottom: var(--filo) solid var(--bordo-scuro);
}
.pie h2 {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #9dbdd8; margin-bottom: var(--s3);
}
.pie ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-piccolo); }
.pie li + li { margin-top: var(--s2); }
.pie__coda {
  padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  justify-content: space-between; align-items: baseline;
  font-size: var(--t-micro); color: var(--testo-scuro-tenue);
}
.pie__coda p { max-width: 52ch; }

/* ==========================================================================
   20  Utility
   ========================================================================== */

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pila > * + * { margin-top: var(--s4); }
.pila-larga > * + * { margin-top: var(--s6); }
.misura { max-width: var(--misura); }
.lista-nuda { list-style: none; margin: 0; padding: 0; }
.lista-nuda > li + li { margin-top: var(--s3); }

.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }

.campo-select {
  width: 100%; min-height: 44px; margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--sfondo-rilievo); color: var(--testo);
  border: var(--filo) solid var(--bordo-forte); border-radius: var(--raggio);
}

[hidden] { display: none !important; }

/* ==========================================================================
   21  Stampa e movimento ridotto
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .testata, .pie, .salta, .tema, .menu-ridotto, .ricerca, .paginazione { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .fascia--scura, .apertura { background: #fff !important; color: #000 !important; }
  .fascia--scura h1, .fascia--scura h2, .apertura h1,
  .apertura__cifra, .conteggio__valore { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .domanda__risposta { display: block !important; }
  .concorso, .scadenze__voce { break-inside: avoid; }
}