/* Il portale pubblico. Colori del gestionale (DESIGN.md), respiro diverso:
   qui non si lavora otto ore, si legge una pagina e si sceglie un orario. */

:root {
  --navy: #1c3356;
  --navy-alto: #26456f;
  --navy-velato: #e8eef6;
  --inchiostro: #0e1a2e;
  --grafite: #5b6577;
  --carta: #f4f6fa;
  --foglio: #ffffff;
  --riga: #e1e6ef;
  --riga-marcata: #cdd5e2;
  /* Il bordo di un controllo non è decorazione: è il modo di sapere dove
     finisce il campo. 3.14:1 su bianco — `--riga-marcata` stava a 1.48:1, e
     su uno schermo al sole non c'era. Le righe che separano e basta restano
     `--riga`: alzarle tutte a 3:1 farebbe una gabbia. */
  --riga-controllo: #8792a6;
  --verde: #1f7a4d;
  --verde-velato: #e6f3ec;
  --rosso: #b42318;
  --rosso-velato: #fdece9;
  --ambra: #8a5a00;
  --ambra-velata: #fbf1de;
  --ambra-riga: #efd9a8;
  /* L'oro delle stelle: 3.06:1 su bianco. Un giallo più chiaro sarebbe
     sparito, e la stella è un grafico che porta significato (WCAG 1.4.11).
     Accanto c'è comunque il numero: la forma non è l'unico canale. */
  --stella: #c8860d;
  --focus: #2f5487;
  --raggio: 0.75rem;
  --raggio-sm: 0.5rem;
  /* La larghezza della colonna, una volta sola: la usano la testata, la
     fascia dell'eroe e il contenuto. */
  --colonna: 68rem;
  --ombra: 0 1px 2px rgba(14, 26, 46, 0.06), 0 8px 24px rgba(14, 26, 46, 0.06);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--inchiostro);
  background: var(--carta);
  /* Il piede sta in fondo alla finestra anche quando la pagina è corta.
     Senza, un elenco con una città sola lasciava la riga «Prenotazioni
     gestite con Clinova One» a metà schermo, con mezza pagina vuota sotto:
     sembrava che il contenuto fosse finito lì per un errore.
     `dvh` e non `vh` per il telefono, dove la barra dell'indirizzo entra ed
     esce e `100vh` è sempre un po' più della finestra vera. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header,
.site-footer { flex: none; }

a { color: var(--navy-alto); }

/* Il cursore e la selezione sono parte del disegno anche se li disegna il
   browser: lasciati ai valori di sistema sono l'unica cosa in pagina che
   non appartiene a nessuna palette. */
::selection {
  background: var(--navy-velato);
  color: var(--inchiostro);
}

input,
textarea { caret-color: var(--navy); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 0.5rem;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 0.75rem; }

/* --- intelaiatura ------------------------------------------------------- */

/* La colonna del portale: una misura sola, in un posto solo. La testata, la
   fascia dell'eroe e il contenuto la condividono, ed è il motivo per cui il
   marchio cade sopra il titolo e il titolo sopra le sezioni. Quando erano tre
   valori diversi in tre regole diverse, due su tre erano sbagliati. */
.colonna {
  width: 100%;
  max-width: var(--colonna);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.site-header {
  background: var(--navy);
  color: var(--foglio);
}

.site-header > .colonna {
  display: flex;
  /* `center` e non `baseline` da quando la testata porta la barra di
     ricerca: un campo e una parola non hanno la stessa linea di base, e
     allineati su quella il campo esce di mezzo centimetro più in basso. */
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.625rem;
  /* L'altezza della riga è dichiarata, non ereditata dal contenuto: sulla
     home il pezzo più alto è il marchio (2.75rem), sulle altre pagine è la
     barra di ricerca (3rem), e la testata passava da 64 a 68px con il
     marchio che scendeva di due. Un marchio che si sposta quando si cambia
     pagina è la cosa che si nota per prima senza saper dire cosa sia.

     4.25rem = la barra (3rem) più il respiro sopra e sotto (2 × 0.625rem):
     con `box-sizing: border-box` il minimo comprende il padding, e scritto
     come 3rem non faceva niente perché 64px lo superavano già. */
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Alto quanto la barra di ricerca, così la riga del marchio è la stessa
     ovunque — anche sul telefono, dove la barra va a capo e il minimo della
     testata lo raggiunge la somma delle due righe invece della prima. Lì il
     marchio tornava a salire di due pixel. */
  min-height: 3rem;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--foglio);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand-claim {
  margin: 0;
  font-size: 0.8125rem;
  color: #b9c6da;
}

.site-nav {
  margin-left: auto;
  color: var(--foglio);
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
}

.site-nav:hover { background: rgba(255, 255, 255, 0.12); }


/* Il menu sotto il nome (T-2100). Un `details`, quindi si apre senza
   JavaScript e con la tastiera: `menu.js` aggiunge solo il chiudersi da
   fuori e con Esc. `position: relative` qui e non sulla testata, perché il
   pannello deve cadere sotto il nome e non sotto la colonna intera. */
.site-menu {
  margin-left: auto;
  position: relative;
}

/* Il nome resta la pastiglia di prima — da `<a>` è diventato `<summary>`.
   `list-style: none` toglie il triangolino che i browser ci mettono davanti;
   su WebKit non basta, e quello vero è la pseudo-classe qui sotto. */
.site-menu > summary {
  cursor: pointer;
  list-style: none;
  gap: 0.375rem;
}

.site-menu > summary::-webkit-details-marker { display: none; }

/* Il fuoco su fondo scuro: `--focus` è un blu, e su `--navy` non si vede.
   Qui l'unico colore che stacca è il bianco. */
.site-menu > summary:focus-visible { outline-color: var(--foglio); }

/* Il verso della freccia dice se è aperto. È anche l'unica cosa che
   distingue questo nome da un link: senza, chi ci passa sopra non sa se sta
   per lasciare la pagina. */
.site-menu > summary::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
}

.site-menu[open] > summary::after {
  transform: translateY(0.1rem) rotate(-135deg);
}

.site-menu-voci {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 20;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  padding: 0.375rem;
  background: var(--foglio);
  color: var(--inchiostro);
  border-radius: var(--raggio-sm);
  box-shadow: var(--ombra);
}

/* Tre voci, tre bersagli da 44px: in un menu che si apre col pollice la
   differenza fra «Gestisci profilo» ed «Esci» è mezzo centimetro. */
.site-menu-voci a,
.site-menu-voci button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--raggio-sm);
  cursor: pointer;
}

.site-menu-voci a:hover,
.site-menu-voci button:hover { background: var(--carta); }

/* L'uscita non è una voce come le altre: una riga la separa da quelle che
   restano dentro. */
.site-menu-voci form {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--riga);
}

@media (max-width: 32rem) {
  .site-header > .colonna { flex-wrap: wrap; }
  .brand-claim { order: 3; flex: 1 0 100%; }
}

main {
  /* `flex: 1` con `width: 100%`: in colonna il `margin: 0 auto` centra, ma
     senza larghezza esplicita l'elemento si stringe sul contenuto e le
     pagine corte finivano incolonnate a sinistra. */
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--colonna);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.site-footer {
  border-top: 1px solid var(--riga);
  background: var(--foglio);
  color: var(--grafite);
  font-size: 0.8125rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.site-footer p { margin: 0.125rem 0; }

/* --- briciole ----------------------------------------------------------- */

.breadcrumb {
  font-size: 0.8125rem;
  color: var(--grafite);
  margin-bottom: 1rem;
}

.breadcrumb a { color: var(--grafite); }

/* --- scheda del medico -------------------------------------------------- */

.doctor {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 56rem) {
  .doctor { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 1.5rem;
}

.card + .card { margin-top: 1rem; }

.doctor-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--navy-velato);
  flex: none;
}

.avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--grafite);
  margin: 0 0 0.25rem;
}

.lede { color: var(--grafite); }

/* --- prestazioni --------------------------------------------------------- */

.services { list-style: none; margin: 0; padding: 0; }

.services li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--riga);
}

.services li:first-child { border-top: 0; }

.service-name { font-weight: 500; }

.service-meta {
  color: var(--grafite);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* --- sede ---------------------------------------------------------------- */

.address { font-style: normal; color: var(--grafite); }

.map {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--raggio-sm);
  margin-top: 0.75rem;
  background: var(--navy-velato);
}

.map-note {
  font-size: 0.75rem;
  color: var(--grafite);
  margin-top: 0.5rem;
}

/* --- il widget ----------------------------------------------------------- */

/* Solo finché è vuoto. L'altezza serve a non far saltare la pagina mentre
   il bundle arriva; a widget montato è un buco — evidente da quando la
   lista delle prestazioni può essere una tendina da una riga. */
#booking-widget:empty { min-height: 12rem; }

.widget-fallback {
  border: 1px dashed var(--riga-marcata);
  border-radius: var(--raggio-sm);
  padding: 1rem;
  color: var(--grafite);
  font-size: 0.9375rem;
}

/* --- home e indici -------------------------------------------------------- */

.hero { margin-bottom: 1.5rem; }

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.tile a {
  display: block;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-sm);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}

.tile a:hover {
  border-color: var(--riga-marcata);
  transform: translateY(-1px);
}

.tile-title { display: block; font-weight: 600; }
.tile-meta { display: block; color: var(--grafite); font-size: 0.875rem; }

.people { list-style: none; margin: 0; padding: 0; }

.person + .person { margin-top: 0.5rem; }

.person-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-sm);
  padding: 0.875rem 1rem;
  text-decoration: none;
  color: inherit;
}

.person-link:hover { border-color: var(--riga-marcata); }

.person-link > span:nth-child(2) { flex: 1; min-width: 0; }

.person-name { display: block; font-weight: 600; }
.person-meta { display: block; color: var(--grafite); font-size: 0.875rem; }

.person-cta {
  flex: none;
  background: var(--navy);
  color: var(--foglio);
  border-radius: var(--raggio-sm);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.empty { color: var(--grafite); }

/* --- il widget di prenotazione ------------------------------------------- */

.widget[aria-busy='true'] { opacity: 0.72; }

.widget-step {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grafite);
  margin: 0 0 0.75rem;
}

.widget-step:focus-visible { outline-offset: 4px; }

.widget-error {
  background: var(--rosso-velato);
  border: 1px solid #f3c7c1;
  color: var(--rosso);
  border-radius: var(--raggio-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
}

/* Sopra le quattro prestazioni la lista diventa una tendina: dodici bottoni
   sono un muro che spinge in basso il calendario, che è la cosa per cui la
   pagina esiste. */
.widget-pick { display: block; }

.widget-select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  font: inherit;
  color: inherit;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
}

.widget-list { list-style: none; margin: 0; padding: 0; }
.widget-list li + li { margin-top: 0.5rem; }

.widget-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: var(--foglio);
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  padding: 0.75rem 0.875rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.widget-option:hover { border-color: var(--navy); }

.widget-meta { color: var(--grafite); font-size: 0.8125rem; }

.widget-option .widget-meta { white-space: nowrap; }

/* Solo la prima lettera: in italiano i mesi vanno minuscoli, e
   `text-transform: capitalize` scriveva «Venerdì 11 Settembre». */
.cal-day-label::first-letter,
.widget-done-when::first-letter {
  text-transform: uppercase;
}

/* A tutta larghezza le ore stanno in colonna allineata: si scorre con
   l'occhio, non a zig-zag come faceva il flex a capo. */
.widget-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.5rem;
}

.widget-time {
  /* 44px: il pollice di chi prenota dal telefono in sala d'attesa. */
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--riga-controllo);
  background: var(--foglio);
  border-radius: var(--raggio-sm);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.widget-time:hover:not(:disabled) {
  border-color: var(--navy);
  background: var(--navy-velato);
}

.widget-time:disabled { opacity: 0.5; cursor: default; }

.widget-held {
  background: var(--navy-velato);
  border-radius: var(--raggio-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
}

.widget-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.5rem;
  color: var(--navy-alto);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}

.widget-form { display: grid; gap: 0.75rem; margin-top: 0.875rem; }

.widget-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.widget-form input,
.widget-form textarea {
  font: inherit;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  min-height: 2.75rem;
}

.widget-form textarea { min-height: 4rem; resize: vertical; }

.widget-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.5rem;
  font-weight: 400;
  line-height: 1.45;
}

.widget-check input { min-height: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; }

/* Per chi è la prenotazione: due righe, non un menu. Sono due, si leggono
   tutte e due insieme, e quella giusta è quasi sempre la prima. */
.widget-modes {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.widget-mode {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.widget-mode input { width: 1.125rem; height: 1.125rem; }

/* L'anagrafica che il portale conosce già: si legge, non si scrive. Il fondo
   la stacca dai campi veri, così la differenza fra «questo è tuo» e «questo
   scrivilo» si vede prima di leggere. */
.widget-known {
  background: var(--navy-velato);
  border-radius: var(--raggio-sm);
  padding: 0.75rem;
}

.widget-primary {
  min-height: 2.75rem;
  background: var(--navy);
  color: var(--foglio);
  border: 0;
  border-radius: var(--raggio-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.widget-primary:disabled { background: var(--riga-marcata); color: var(--grafite); cursor: default; }

/* Lo stesso bottone quando è un link: la fine del funnel porta a una pagina. */
a.widget-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  text-decoration: none;
}

/* Il consenso che non si può ancora dare: leggibile, ma spento. */
.widget-check-off { color: var(--grafite); }

.widget-done {
  background: var(--verde-velato);
  border: 1px solid #c6e3d3;
  border-radius: var(--raggio-sm);
  padding: 1rem;
}

.widget-done-when {
  font-weight: 600;
  font-size: 1.0625rem;
}

/* --- accesso e area del paziente ----------------------------------------- */

.entrance {
  max-width: 28rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.entrance .card { padding: 1.75rem; }

.or {
  text-align: center;
  color: var(--grafite);
  font-size: 0.875rem;
  margin: 0.875rem 0;
}

.widget-primary.google {
  width: 100%;
  background: var(--foglio);
  color: var(--inchiostro);
  border: 1px solid var(--riga-controllo);
}

.widget-primary.google:hover { background: var(--foglio-ombrato, #eef1f7); }

.area-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* L'azione e l'uscita non hanno lo stesso peso: una è quello che si viene a
   fare, l'altra è andarsene. Prima «Esci» era l'unico comando della pagina. */
.area-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.identity-line {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Il buco da tappare: una scheda, non un avviso. Un avviso si legge e si
   dimentica; una scheda col campo dentro si compila. */
.gap-fill { margin-bottom: 1rem; }

.gap-fill h2 { margin-bottom: 0.25rem; }

.gap-fill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
}

.gap-fill-row input {
  font: inherit;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
}

.area-empty p { margin: 0.75rem 0 0; }

.area-empty .widget-meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--riga);
}

.area-note { margin-top: 1rem; }

@media (max-width: 32rem) {
  .area-head { flex-direction: column; }
  .area-actions { width: 100%; justify-content: space-between; }
}


/* --- il profilo (T-2101) -------------------------------------------------- */

/* Etichetta sopra e valore sotto farebbe una colonna lunga il doppio per
   dire quattro cose. In riga, con l'etichetta in una misura fissa: i valori
   si incolonnano, e l'occhio scorre quelli — che sono la ragione per cui la
   pagina è stata aperta. */
.profile-righe { margin: 0; }

.profile-righe > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--riga);
}

.profile-righe > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.profile-righe dt {
  flex: 0 0 10rem;
  color: var(--grafite);
}

.profile-righe dd { margin: 0; }

/* Un vuoto si dice, non si disegna come un errore: che una clinica non abbia
   ancora un dato non è colpa di nessuno. */
.profile-vuoto { color: var(--grafite); }

.profile-nota {
  color: var(--grafite);
  font-size: 0.8125rem;
}

.profile-regola {
  margin: 1rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--riga);
}

.profile-cliniche {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-clinica {
  padding: 0.5rem 0;
  border-top: 1px solid var(--riga);
  font-weight: 600;
}

.profile-clinica:first-child {
  border-top: 0;
  padding-top: 0;
}

.profile-buco {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--riga);
}

.profile-buco p { margin: 0 0 0.75rem; }

@media (max-width: 32rem) {
  /* L'etichetta va a capo da sola: a 10rem fisse restava mezzo valore per
     riga, e un numero di telefono spezzato in due non si legge. */
  .profile-righe dt { flex-basis: 100%; }
}

.notice {
  background: var(--navy-velato);
  border-radius: var(--raggio-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

.bookings { list-style: none; margin: 0; padding: 0; }

/* Una riga sono tre fatti — quando, cosa con chi, dove — più le azioni.
   In colonna occupavano un terzo della scheda e il resto restava bianco;
   in colonne ognuno sta sotto il suo simile e la lista si legge in
   verticale, che è come si legge una lista. */
.bookings li {
  display: grid;
  /* Nessuna traccia dipende dal contenuto, e questo è il punto: ogni `li` è
     una griglia a sé, quindi con un `auto` in fondo la quarta colonna
     cambiava larghezza da riga a riga — «Meno di 48 ore…» è largo, «Sposta
     Disdici» meno, e sotto niente — e trascinava le altre. Le colonne
     sembravano allineate solo finché i contenuti si somigliavano.

     Prima traccia a 15rem e non 13: «Venerdì 11 settembre, 09:00» sotto i
     15 va a capo, e una data spezzata in due si rilegge due volte. */
  grid-template-columns:
    minmax(13rem, 15rem)
    minmax(0, 1fr)
    minmax(0, 1.2fr)
    minmax(10rem, 12rem);
  gap: 0.75rem 1.5rem;
  align-items: start;
  padding: 0.875rem 0;
  border-top: 1px solid var(--riga);
}

/* Le due liste condividono le stesse tracce, anche se sui passati la quarta
   colonna resta vuota — su una visita già fatta non c'è niente da fare.
   Dandole tre colonne sue il bordo destro della terza cambiava posto fra una
   scheda e l'altra: due liste della stessa cosa, una sotto l'altra, con le
   colonne che saltano. Dodici rem di vuoto costano meno di quel salto. */

.bookings li:first-child { border-top: 0; }

.booking-cell > p { margin: 0; }

.booking-when { margin: 0; font-weight: 600; }
.booking-when::first-letter { text-transform: uppercase; }

.booking-service { font-weight: 500; }

/* La targhetta dello stato. Il colore non è l'unico canale — la parola c'è
   sempre — perché uno su dodici non distingue il verde dal rosso. */
.badge {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 0.05em;
}

.badge-attesa { background: var(--ambra-velata); color: var(--ambra); }
.badge-ok { background: var(--verde-velato); color: var(--verde); }
.badge-stop { background: var(--rosso-velato); color: var(--rosso); }

/* Una data barrata dice «non succede» prima ancora che si legga la
   targhetta. Barrata la data, non tutta la riga: dove e con chi restano
   informazioni vere di una cosa che era stata fissata. */
.booking-off { text-decoration: line-through; text-decoration-color: var(--riga-marcata); }

.booking-off .badge { text-decoration: none; }
.booking-who { color: var(--grafite); }

/* Dove ci si presenta. Non grigio: con due ambulatori lontani è la riga che
   evita il viaggio sbagliato, e una riga così non è un dettaglio. */
.booking-site { font-weight: 500; }

/* Sotto i 48rem le colonne non ci stanno: torna una pila, con il quando in
   testa e le azioni in fondo. */
@media (max-width: 48rem) {
  .bookings li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .booking-cell + .booking-cell { margin-top: 0.25rem; }
  .booking-actions { margin-top: 0.5rem; }
}

.booking-actions { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; }

/* Fuori dalla finestra: la regola scritta e il numero, non un vuoto. */
.booking-late { text-align: right; }
.booking-late p { margin: 0 0 0.25rem; }

.widget-link.danger { color: var(--rosso); }

.messages { list-style: none; margin: 0 0 1rem; padding: 0; }

/* Le pagine che rende allauth: i suoi campi non portano le nostre classi,
   quindi si vestono per posizione. Vale solo dentro `.entrance`. */

.entrance form { margin-top: 1rem; }

.entrance input[type='text'],
.entrance input[type='email'],
.entrance input[type='number'] {
  display: block;
  width: 100%;
  font: inherit;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
}

.entrance button,
.entrance input[type='submit'] {
  min-height: 2.75rem;
  margin-top: 0.75rem;
  margin-right: 0.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--raggio-sm);
  background: var(--navy);
  color: var(--foglio);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.entrance button.widget-link {
  background: none;
  color: var(--navy-alto);
  font-weight: 400;
  padding: 0;
  min-height: 0;
}

/* Il secondo bottone di una coppia (Annulla, Richiedi un nuovo codice) è
   un'azione minore: non deve avere lo stesso peso della conferma. */
.entrance form + form button,
.entrance button[form] {
  background: var(--foglio);
  color: var(--inchiostro);
  border: 1px solid var(--riga-controllo);
  font-weight: 400;
}

.notice-error {
  background: var(--rosso-velato);
  color: var(--rosso);
}

.entrance label { font-weight: 500; font-size: 0.9375rem; }

/* Più di una sede sulla stessa pagina: si separano, non si confondono. */
.site-name { margin: 0 0 0.25rem; font-weight: 600; }

.site-next {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--riga);
}

/* Chi altro c'è in zona: sotto il contenuto della pagina, non dentro. */
.nearby {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--riga);
}

.nearby h2 {
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
}

.nearby h2 + ul + h2 { margin-top: 1.75rem; }

/* --- l'elenco della zona -------------------------------------------------- */

.results { list-style: none; margin: 0; padding: 0; }

.result + .result { margin-top: 0.625rem; }

.result-link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}

.result-link:hover { border-color: var(--riga-marcata); }

.result-clinic .result-link { background: var(--navy-velato); border-color: #d5e0ee; }

/* I medici della struttura non possono stare *dentro* il link — un link
   dentro un link non esiste — ma devono stare dentro la scheda: fuori si
   leggevano come un nome caduto lì per sbaglio. La scheda si apre in basso
   e loro ne diventano il piede. */
.result-clinic .result-link {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0.75rem;
}

.result-body { flex: 1; min-width: 0; display: block; }

.result-name { display: block; font-weight: 600; font-size: 1.0625rem; }

.result-meta,
.result-where,
.result-clinic-name {
  display: block;
  color: var(--grafite);
  font-size: 0.875rem;
}

.result-where { margin-top: 0.375rem; }

.result-service {
  /* Flex e non un float: il float usciva dal flusso e con un nome di
     prestazione lungo il prezzo finiva sopra al nome. Qui il prezzo ha la
     sua colonna e il nome può andare a capo sotto di sé. */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--riga);
  font-size: 0.875rem;
}

.result-service b {
  font-weight: 600;
  white-space: nowrap;
}

.result-cta {
  flex: none;
  align-self: center;
  background: var(--navy);
  color: var(--foglio);
  border-radius: var(--raggio-sm);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.result-clinic .result-cta {
  background: var(--foglio);
  color: var(--navy);
  border: 1px solid var(--riga-controllo);
}

.avatar-clinic {
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: 600;
}

.result-doctors {
  margin: 0;
  /* Rientrati sotto il nome della struttura, non sotto il suo ritratto:
     l'incolonnamento è padding della card + ritratto + gap. */
  padding: 0 1rem 0.875rem calc(1rem + 72px + 1rem);
  background: var(--navy-velato);
  border: 1px solid #d5e0ee;
  border-top: 0;
  border-radius: 0 0 var(--raggio) var(--raggio);
  font-size: 0.875rem;
  color: var(--grafite);
}

/* Un riquadro per medico, come nella reference: faccia, nome, specialità.
   Una fila di nomi separati da punti si salta con l'occhio; una faccia no. */
.staff {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.staff-tile {
  display: grid;
  justify-items: center;
  gap: 0.0625rem;
  /* Più larga di prima: dentro adesso c'è anche cosa fa e da quanto, e a
     nove rem il nome di una prestazione andava a capo tre volte. */
  width: 11rem;
  height: 100%;
  padding: 0.75rem 0.5rem;
  background: var(--foglio);
  border: 1px solid #d5e0ee;
  border-radius: var(--raggio-sm);
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.staff-tile:hover { border-color: var(--navy); }

.staff-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--navy-velato);
  margin-bottom: 0.375rem;
}

.staff-avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}

.staff-name { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }

.staff-role { font-size: 0.75rem; color: var(--grafite); }

/* Cosa fa e da quanto, dentro la tessera: nell'elenco di una zona la persona
   sta solo qui, e senza queste due righe l'elenco perderebbe proprio le cose
   per cui si sceglie. Una riga sopra, come nella scheda grande, così la
   tessera resta leggibile anche con un nome di prestazione lungo. */
.staff-service {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--riga);
  width: 100%;
  font-size: 0.75rem;
  color: var(--grafite);
  line-height: 1.3;
}

.staff-service b {
  color: var(--inchiostro);
  font-weight: 600;
  white-space: nowrap;
}

.staff-all {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
}

/* Sotto i 32rem la riga non è più una riga: `flex-wrap` non bastava, perché
   `flex: 1` lascia il corpo restringersi invece di andare a capo e il nome
   finiva in una colonna larga tre lettere. Griglia: ritratto e nome sopra,
   indirizzi sotto per tutta la larghezza, bottone in fondo. */
@media (max-width: 32rem) {
  /* Qui il rientro costerebbe una tessera su due: i riquadri partono dal
     bordo della scheda, come il bottone «La struttura» sopra di loro, e
     scorrono invece di impilarsi in una colonna alta cinque schermate. */
  .result-doctors { padding-left: 1rem; }

  .staff {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
  }

  .staff > li { flex: none; scroll-snap-align: start; }

  .staff-tile { width: 8.5rem; }

  .result-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar body"
      "cta cta";
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
  }

  .result-link > .avatar { grid-area: avatar; width: 48px; height: 48px; }
  .result-body { grid-area: body; }

  .result-cta {
    grid-area: cta;
    align-self: stretch;
    text-align: center;
    padding: 0.625rem 0.875rem;
  }
}

/* Presso chi: la riga che distingue «Checchin dentro Medica Line» da
   «Checchin per conto suo». Senza, le due posizioni si leggono identiche. */
.result-clinic-name {
  margin-top: 0.125rem;
  font-weight: 500;
  color: var(--inchiostro);
}

.result-where {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pin {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  fill: none;
  stroke: var(--grafite);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Un avviso che non è un errore: il prezzo di questa clinica è un altro. */
.widget-notice {
  background: var(--ambra-velata, #fbf1de);
  border: 1px solid var(--ambra-riga, #efd9a8);
  color: var(--ambra, #8a5a00);
  border-radius: var(--raggio-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

/* --- il calendario, che è il motivo per cui la pagina esiste ------------- */

.identity { padding-bottom: 1.25rem; }

.identity .doctor-head { margin-bottom: 0; }

.identity-where {
  margin: 0.5rem 0 0;
  color: var(--grafite);
  font-size: 0.9375rem;
}

/* Il palco. A tutta larghezza e con più aria dentro delle altre schede:
   è la cosa che il visitatore è venuto a fare. */
.stage {
  margin-top: 1.25rem;
  padding: 1.75rem;
}

.stage-title { margin-bottom: 1rem; }

.doctor { margin-top: 1.25rem; }

.cal-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--riga);
}

.cal-chosen-name { font-weight: 600; }

.cal-chosen .widget-link { margin-left: auto; }
.cal-chosen .widget-link + .widget-link { margin-left: 0; }

/* La striscia dei giorni: solo quelli che hanno orari, e si scorre. */
.cal-dates {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  scrollbar-width: thin;
}

.cal-date {
  flex: none;
  scroll-snap-align: start;
  display: grid;
  gap: 0.0625rem;
  justify-items: center;
  min-width: 4.5rem;
  padding: 0.5rem 0.625rem 0.625rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.cal-date:hover { border-color: var(--navy); }

.cal-date-dow,
.cal-date-mon {
  font-size: 0.75rem;
  color: var(--grafite);
}

.cal-date-num {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal-date-count {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--grafite);
  white-space: nowrap;
}

.cal-date-on,
.cal-date-on:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--foglio);
}

.cal-date-on .cal-date-dow,
.cal-date-on .cal-date-mon,
.cal-date-on .cal-date-count { color: var(--navy-velato); }

.cal-day { margin-top: 1.25rem; }

.cal-day-label {
  margin: 0 0 0.875rem;
  font-weight: 600;
  font-size: 1.0625rem;
}

.cal-group + .cal-group { margin-top: 1.5rem; }

/* Dove, una volta sola sopra le sue ore, con la riga che porta a fine campo. */
.cal-where {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}

.cal-where::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--riga);
}

.cal-part + .cal-part { margin-top: 0.875rem; }

.cal-part-label {
  margin: 0 0 0.375rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--grafite);
}

@media (max-width: 40rem) {
  .stage { padding: 1.25rem; }
  .cal-chosen .widget-link { margin-left: 0; }

  /* Con il testo che va a capo tre volte il ritratto centrato finiva a metà
     scheda e il nome partiva dal nulla. In alto, e più piccolo. */
  .doctor-head { align-items: flex-start; }
  .identity .avatar { width: 56px; height: 56px; }
  .identity .avatar-fallback { font-size: 1.125rem; }
}

/* --- la ricevuta --------------------------------------------------------- */

.widget-recap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.375rem 1rem;
  margin: 0.875rem 0 0;
}

.widget-recap > div { display: contents; }

.widget-recap dt {
  font-size: 0.8125rem;
  color: var(--grafite);
  padding-top: 0.0625rem;
}

.widget-recap dd { margin: 0; }

.widget-next {
  margin: 0.875rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid #c6e3d3;
}

.widget-done p:last-child { margin-bottom: 0; }

/* --- bersagli: 44px anche quando il segno è piccolo ---------------------- */

/* Il link che sta da solo in una riga è un bottone travestito, e va preso
   col pollice. Quello dentro una frase no: lì la regola stessa esenta i
   bersagli in linea, e allargarlo spezzerebbe il testo — gli si allarga
   l'area sensibile senza toccare il disegno. */
.area-actions .widget-link,
.booking-actions .widget-link,
.cal-chosen .widget-link,
.widget-form .widget-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.25rem;
}

.booking-actions { gap: 1rem; }

.widget-held .widget-link { position: relative; }

.widget-held .widget-link::after {
  content: '';
  position: absolute;
  inset: -0.75rem -0.5rem;
}

.result-cta,
.person-cta,
.site-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
}

.tile a { min-height: 4rem; }

/* --- le stelle ----------------------------------------------------------- */

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1;
}

/* Due file sovrapposte: quella grigia sotto, quella d'oro tagliata alla
   percentuale. Niente mezze stelle da disegnare, e 4,3 su 5 è 4,3. */
.stars-track {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--riga-marcata);
  letter-spacing: 0.05em;
}

.stars-row { display: block; }

.stars-on {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--stella);
}

.stars-text { font-weight: 600; font-variant-numeric: tabular-nums; }

.stars-count { color: var(--grafite); }

.stars-sm { font-size: 0.75rem; gap: 0.25rem; }

/* --- il voto che si dà --------------------------------------------------- */

.stars-pick {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  border: 0;
  margin: 1rem 0 0;
  padding: 0;
}

.stars-pick legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Nascosti all'occhio ma non alla tastiera né a chi legge lo schermo:
   `display: none` li toglierebbe dall'ordine di tabulazione e il voto si
   potrebbe dare solo col mouse. */
.stars-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.stars-pick label {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raggio-sm);
  cursor: pointer;
}

.stars-pick svg {
  width: 2rem;
  height: 2rem;
  fill: var(--riga-marcata);
}

.stars-pick input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Accesa quella scelta e tutte quelle prima: nel DOM stanno *dopo* (5→1) e
   il verso lo rimette a posto `row-reverse`. */
.stars-pick input:checked + label svg,
.stars-pick input:checked ~ label svg { fill: var(--stella); }

.stars-pick:hover label svg { fill: var(--riga-marcata); }
.stars-pick label:hover svg,
.stars-pick label:hover ~ label svg { fill: var(--stella); }

.entrance textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.625rem 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  resize: vertical;
}

/* --- quello che dicono i pazienti ---------------------------------------- */

/* Dentro una riga di elenco le stelle vanno a capo da sole: i figli di
   `.result-body` sono blocchi, e un inline-flex resterebbe attaccato al
   testo sopra. */
.result-body .stars,
.staff-tile .stars {
  display: flex;
  margin-top: 0.25rem;
}

.staff-tile .stars { justify-content: center; }

.reviews-band { margin-top: 1.25rem; }

.opinions {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.opinion {
  padding: 1rem 0;
  border-top: 1px solid var(--riga);
}

.opinion:first-child { border-top: 0; padding-top: 0.5rem; }

.opinion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.opinion-who { font-weight: 600; font-size: 0.9375rem; }

.opinion-when { color: var(--grafite); font-size: 0.8125rem; }
.opinion-when::first-letter { text-transform: uppercase; }

.opinion-text { margin: 0.5rem 0 0; }

/* La risposta della clinica: rientrata e con un bordo, perché è un'altra
   voce — e perché chi legge deve vedere subito che non è il paziente. */
.opinion-reply {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.875rem;
  background: var(--carta);
  border-left: 3px solid var(--riga-controllo);
  border-radius: 0 var(--raggio-sm) var(--raggio-sm) 0;
}

.opinion-reply p { margin: 0; }
.opinion-reply .opinion-who { font-size: 0.8125rem; color: var(--grafite); }

/* --- le due pagine dell'accesso ------------------------------------------ */

/* Le pagine con un compito solo — accedi, il codice — si centrano nella
   finestra. Appoggiate in alto lasciavano 221px di niente sotto la scheda:
   il vuoto stava dalla parte sbagliata. */
.main-centered {
  display: grid;
  align-content: center;
  /* `main` ha 1.5rem sopra e 4rem sotto: centrare dentro un contenitore
     sbilanciato lascia la differenza tutta da una parte. */
  padding-block: 1.5rem;
}

/* Quaranta pixel di titolo sopra una colonna di 358 sono un grido per una
   pagina che chiede una cosa sola. */
.entrance h1 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); }

/* Il campo e il bottone sulla stessa riga, allineati in basso: il bottone
   era 350px contro i 136 del campo — due volte e mezzo — e il peso della
   pagina finiva sulla conferma invece che sulla cosa da scrivere. */
/* Le sei caselle in mezzo, il bottone sotto a tutta larghezza. Affiancati
   non ci stanno più — sei caselle sono larghe il doppio del campo di prima —
   e in una scheda stretta la riga sola li avrebbe schiacciati tutti e due. */
.code-row {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
}

.code-row label,
.widget-form .code-label {
  justify-items: center;
  text-align: center;
}

.entrance .code-row button {
  width: 100%;
  margin: 0;
}

/* Sei cifre in sei caselle — che sono una casella sola, truccata.
 *
 * Perché non sei `<input>` veri: sei campi hanno bisogno di JavaScript per
 * saltare da uno all'altro, per l'incolla e per il tasto indietro, e senza
 * quel JavaScript il modulo non si compila più. Questo invece è il campo di
 * sempre — si incolla, si cancella, l'autofill del codice lo riempie — con
 * sei trattini disegnati sotto dal fondo, e le cifre spaziate per cadere
 * ognuna sul suo.
 *
 * Serve anche a un'altra cosa (committente, 2026-09-13): su Safari un campo
 * di testo solo, in un modulo dopo l'email, si fa scambiare per un campo
 * password e il portachiavi si offre di riempirlo. Sei caselle non somigliano
 * a una password.
 *
 * `ch` e non un numero fisso: è la larghezza della cifra nel font davvero
 * usato, quindi i conti restano giusti anche dove quel font è un altro.
 * Sotto `.entrance` e `.widget-form` stanno regole più specifiche: il campo va
 * nominato con la stessa forza, o resta lungo come tutti gli altri. */
.entrance input[type='text'].code-input,
.widget-form input.code-input,
.code-input {
  /* Tutto in `ch` — la larghezza della cifra nel font davvero usato — così i
     conti tornano esatti anche dove quel font è un altro, e il campo non
     scorre mai: un campo più stretto del suo testo farebbe sparire a sinistra
     la prima cifra proprio quando si scrive la sesta. */
  --cella: 2.5ch;
  --vano: 1ch;
  --incasso: calc((var(--cella) - 1ch) / 2);
  box-sizing: border-box;
  width: calc(6 * (var(--cella) + var(--vano)) + var(--incasso));
  min-height: 0;
  padding: 0.5rem 0 0.625rem var(--incasso);
  border: 0;
  border-radius: 0;
  /* L'ultimo vano sta a destra e non ha trattino: il margine negativo
     rimette in mezzo alla scheda i sei trattini, non il box che li contiene. */
  margin-right: calc(-1 * (var(--vano) + var(--incasso)));
  background-color: transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--riga-controllo) 0 var(--cella),
    transparent var(--cella) calc(var(--cella) + var(--vano))
  );
  background-repeat: no-repeat;
  background-size: calc(6 * (var(--cella) + var(--vano))) 2px;
  background-position: left bottom;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  /* Una cifra larga 1ch, poi il salto fino alla casella dopo. */
  letter-spacing: calc(var(--cella) + var(--vano) - 1ch);
  text-align: left;
}

/* Il campo è senza bordo: lo stato attivo lo dicono i trattini, non una
   cornice che qui non c'è. */
.entrance input[type='text'].code-input:focus,
.widget-form input.code-input:focus,
.code-input:focus {
  outline: none;
  background-image: repeating-linear-gradient(
    90deg,
    var(--navy) 0 var(--cella),
    transparent var(--cella) calc(var(--cella) + var(--vano))
  );
}

/* Le rassicurazioni: sotto il modulo, non sopra. Prima il compito. */
.entrance-note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--riga);
  color: var(--grafite);
  font-size: 0.875rem;
}

/* Le due vie d'uscita quando il codice non arriva, sulla stessa riga: sono
   la stessa domanda («e adesso?») con due risposte. */
.entrance-ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.entrance-ways form { display: flex; margin: 0; }

/* `.widget-link` nasce dentro una frase e porta un rientro: da solo in fondo
   a una scheda quel rientro è un difetto di allineamento. */
.entrance > .card > p > .widget-link { margin-left: 0; }

.entrance-ways .widget-link,
.entrance-ways button.widget-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--navy-alto);
  font-weight: 400;
  text-decoration: underline;
}

/* Su telefono la riga diventa una colonna: il campo largo quanto il bottone
   (a 375px non c'è nessuna «casella troppo lunga» da cui difendersi), e le
   due vie d'uscita vicine, perché impilate a 1.25rem si leggono come due
   blocchi scollegati invece che come due risposte alla stessa domanda. */
@media (max-width: 32rem) {
  .code-row { display: grid; gap: 0.625rem; }

  /* Le caselle no: la loro larghezza è quella dei sei trattini sotto, e
     stirarle scollerebbe le cifre dai trattini. Sedici rem e mezzo stanno
     anche sul telefono più stretto. */

  .entrance-ways {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* --- il widget dentro il sito di qualcun altro --------------------------- */

/* Sfondo trasparente: la pagina ospite ha il suo, e un rettangolo grigio in
   mezzo al sito di un medico si vede come una toppa. */
body.embed {
  background: transparent;
  min-height: 0;
  display: block;
}

.embed-main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem;
}

.embed-head { margin-bottom: 1rem; }

/* I menu: in riga finché ci stanno, uno sotto l'altro quando no. */
.embed-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.embed-pick label { flex: 1 1 12rem; }

.embed-pick select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  font: inherit;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  color: inherit;
}

.embed-go { flex: none; padding: 0 1.25rem; }

.embed-who { margin: 0; font-size: 1.125rem; font-weight: 600; }

.embed-where { margin: 0.125rem 0 0; color: var(--grafite); font-size: 0.875rem; }

.embed-foot {
  margin: 1.25rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--riga);
  font-size: 0.75rem;
  color: var(--grafite);
}

/* --- la ricerca ---------------------------------------------------------- */

/* Due campi e un pulsante, dentro un guscio bianco che si legge come un
   controllo solo. È la forma che hanno tutti i portali di prenotazione, e
   non è moda: «cosa» e «dove» sono due domande, ma è una ricerca sola, e
   due riquadri staccati la fanno sembrare un modulo da compilare. */
.search {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: 999px;
  box-shadow: var(--ombra);
  padding: 0.3125rem;
}

/* Il primo campo più largo del secondo: «Specialità, prestazione o nome del
   medico» è tre volte «Città o provincia», e a metà per uno il segnaposto si
   tronca prima di aver detto la cosa utile. */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1.5 1 0;
  min-width: 0;
  padding-left: 2.5rem;
}

.search-field + .search-field { flex-grow: 1; }

/* La riga che separa i due campi non è un bordo: un bordo alto quanto il
   campo tocca il guscio e lo taglia in due. Un pseudo-elemento più corto
   separa e basta. */
.search-field + .search-field::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--riga);
}

.search-icon {
  position: absolute;
  left: 0.875rem;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--grafite);
  stroke-width: 1.75;
  stroke-linecap: round;
  pointer-events: none;
}

/* L'etichetta c'è per chi legge con lo schermo; il segnaposto dice la stessa
   cosa a chi guarda. Nasconderla con `display: none` la toglierebbe anche a
   chi la usa davvero. */
.search-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Il colore scritto, non ereditato: la barra sta su due fondi scuri — la
   testata e l'eroe — e `color: inherit` dentro un guscio bianco dava testo
   bianco su bianco. Il segnaposto si vedeva ancora (il browser lo sbiadisce
   a partire da questo colore), quello che si scriveva no. */
.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--inchiostro);
  /* A destra resta lo spazio della «x» che i browser disegnano nei campi
     `type=search`: senza, si posa sopra l'ultima parola di quello che si sta
     scrivendo. (La freccia del `<datalist>` non c'è più — il menu è nostro.) */
  padding: 0.75rem 1.375rem 0.75rem 0;
}

.search-field input::placeholder { color: var(--grafite); opacity: 1; }

.search-field input:focus { outline: none; }

/* Il fuoco si vede sul campo intero, non sul testo: senza bordi propri un
   `outline` sull'input disegnerebbe una riga dentro il guscio. */
.search-field:focus-within { border-radius: 999px; }

/* L'anello resta **dentro** il guscio. A -0.3125rem cadeva esattamente sul
   bordo del guscio — che è il padding della barra — e a sinistra i due si
   sovrapponevano: sembrava che metà pillola avesse cambiato colore, non che
   un campo avesse il fuoco. */
.search-field:focus-within::after {
  content: '';
  position: absolute;
  inset: -0.125rem;
  border: 2px solid var(--focus);
  border-radius: 999px;
  pointer-events: none;
}

/* Il browser mette la sua «x» nei campi `type=search`, e dentro un guscio
   arrotondato finisce appiccicata alla riga di separazione. */
.search-field input::-webkit-search-cancel-button { margin-right: 0.25rem; }

/* --- il menu dei suggerimenti -------------------------------------------- */

/* Era un `<datalist>`: funzionava e non si poteva stilare — il menu lo
   disegna il sistema operativo, con il suo carattere e i suoi angoli, e
   sotto una barra disegnata con cura sembrava una finestrella capitata lì
   per sbaglio. Questo è markup nostro, quindi obbedisce alla stessa palette
   di tutto il resto. */
.suggest {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  /* Più largo del campo, ma mai più della finestra: «Dott.ssa Maria Vittoria
     Della Valle Scarpa» non deve andare a capo, e nemmeno uscire. */
  max-width: min(24rem, calc(100vw - 2.5rem));
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  box-shadow: 0 4px 6px rgba(14, 26, 46, 0.04), 0 12px 32px rgba(14, 26, 46, 0.14);
  color: var(--inchiostro);
  text-align: left;
}

/* Il menu del secondo campo si appende a destra. Ancorato a sinistra come
   l'altro partiva già a due terzi della barra e i suoi ventiquattro rem
   finivano fuori dalla finestra — il testo si vedeva tagliato dal bordo. */
.search-field + .search-field .suggest {
  left: auto;
  right: 0;
}

/* Tranne in colonna, dove i campi sono uno sotto l'altro e larghi uguale:
   lì «destra» e «sinistra» sono lo stesso bordo. */
@media (max-width: 40rem) {
  .search-field + .search-field .suggest {
    left: 0;
    right: auto;
  }
}

.suggest-group + .suggest-group { margin-top: 0.25rem; }

.suggest-title {
  margin: 0;
  padding: 0.375rem 0.625rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grafite);
}

.suggest-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--raggio-sm);
  cursor: pointer;
  line-height: 1.3;
}

/* Una classe e non `:hover`: il mouse e le frecce devono evidenziare la
   stessa riga, e con due meccanismi diversi si finisce con due righe accese
   insieme — una sotto il puntatore e una sotto la tastiera. */
.suggest-option:hover,
.suggest-on { background: var(--navy-velato); }

.suggest-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--grafite);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.suggest-label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La provincia, a destra: «Castelfranco Veneto» e «Castelfranco Emilia» si
   distinguono da lì, e in mezzo al nome sarebbe una parentesi da leggere. */
.suggest-detail {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--grafite);
}

.suggest-empty {
  margin: 0;
  padding: 0.625rem;
  font-size: 0.8125rem;
  color: var(--grafite);
}

/* Nella testata il menu scende su una fascia scura e va tenuto sopra tutto
   quello che segue. */
.search-compact .suggest { z-index: 30; }

.search-go {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: var(--foglio);
  font: inherit;
  font-weight: 600;
  padding: 0 1.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.search-go:hover { background: var(--navy-alto); }

/* Nella testata: più bassa, senza ombra, e con il pulsante ridotto a
   un'icona — lì lo spazio è del marchio e del link all'area. */
.search-compact {
  flex: 1 1 26rem;
  max-width: 34rem;
  margin-inline: auto;
  box-shadow: none;
  border-color: transparent;
  padding: 0.1875rem;
}

.search-compact .search-field { padding-left: 2.25rem; }

.search-compact .search-field input {
  padding-block: 0.5rem;
  font-size: 0.9375rem;
}

.search-compact .search-icon { left: 0.75rem; width: 1rem; height: 1rem; }

.search-compact .search-go {
  min-height: 2.25rem;
  padding: 0 1.125rem;
  font-size: 0.875rem;
}

/* Sotto i 56rem la testata non ha più spazio per tre cose in fila: la barra
   scende sotto, a tutta larghezza, e resta la prima cosa che si tocca. */
@media (max-width: 56rem) {
  .site-header > .colonna { flex-wrap: wrap; }
  .search-compact {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    background: rgba(255, 255, 255, 0.96);
  }
}

/* Sul telefono i due campi non stanno affiancati: 16 caratteri per uno non
   sono una ricerca. In colonna, e il pulsante largo quanto la colonna. */
@media (max-width: 40rem) {
  .search {
    flex-direction: column;
    border-radius: var(--raggio);
    padding: 0.5rem;
    gap: 0.25rem;
  }

  .search-field { padding-left: 2.25rem; }

  .search-field + .search-field::before {
    left: 2.25rem;
    right: 0.25rem;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .search-field:focus-within::after { border-radius: var(--raggio-sm); }

  .search-go { border-radius: var(--raggio-sm); padding-block: 0.625rem; }
}

/* --- la home ------------------------------------------------------------- */

/* L'eroe attacca sotto la testata senza stacco: il margine negativo è
   esattamente il padding di `main`, quindi il pannello arriva ai bordi della
   colonna e non un pixel più in là. Niente `100vw`, che sui browser con la
   barra di scorrimento visibile è più largo della finestra e fa comparire lo
   scorrimento orizzontale. */
/* La fascia scura è una superficie sola, dalla testata alla fine dell'eroe,
   e finisce con un bordo dritto da un bordo all'altro della finestra.

   Era un pannello arrotondato dentro la colonna sotto una testata a tutta
   larghezza: due forme diverse, con le spalle chiare ai lati della seconda —
   uno scalino che l'occhio legge prima del titolo. Il gradiente se n'è andato
   con loro: fra `#1c3356` e `#16294a` non si vedeva, e la regola di DESIGN.md
   sui gradienti non si paga per qualcosa che non si vede (e quel secondo
   valore era un esadecimale scritto a mano, fuori dalla tavolozza). */
.hero-search {
  padding-block: 3rem 2.25rem;
  background: var(--navy);
  color: var(--foglio);
}

/* `main` porta già il suo respiro in cima; sotto la fascia ne basta meno. */
.home { padding-top: 2.5rem; }

.hero-search h1 {
  max-width: 22ch;
  font-size: clamp(1.875rem, 1.1rem + 3vw, 3rem);
  margin-bottom: 0.75rem;
}

.hero-lede {
  max-width: 48ch;
  margin-bottom: 1.75rem;
  color: #c3d0e4;
  font-size: 1.0625rem;
}

.hero-search .search { max-width: 52rem; }

/* Le scorciatoie: per chi è arrivato senza una domanda precisa. Un campo
   vuoto non suggerisce niente, sei parole cliccabili sì. */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
}

.chip {
  display: inline-block;
  padding: 0.3125rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #dbe4f1;
  font-size: 0.875rem;
  text-decoration: none;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--foglio);
}

/* I numeri veri. Quelli dei portali grandi («6.467 cliniche») sono la loro
   verità, non la nostra: qui si scrive quello che c'è, e la fiducia la si
   prende dicendo bene cosa succede dopo il clic.

   Separati dal resto dallo spazio e non da un filetto: la fascia finisce già
   con un bordo suo, e due righe orizzontali a cento pixel l'una dall'altra si
   leggono come un errore di stampa. */
.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 2.75rem 0 0;
  padding: 0;
  color: #c3d0e4;
  font-size: 0.875rem;
}

.facts b {
  color: var(--foglio);
  font-size: 1.125rem;
  margin-right: 0.25rem;
}

/* Una fascia della home: titolo, riga di spiegazione, contenuto. */
.band { margin: 0 0 3rem; }

.band-head { margin-bottom: 1rem; }

.band-head h2 { margin-bottom: 0.25rem; }

.band-note { margin: 0; color: var(--grafite); font-size: 0.9375rem; }

.band-foot { margin: 1.25rem 0 0; }

/* --- le schede dei professionisti ---------------------------------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}

.doc-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 1.25rem 1.25rem 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}

.doc-card-link:hover {
  border-color: var(--riga-marcata);
  transform: translateY(-1px);
}

.doc-card-link .avatar { margin-bottom: 0.75rem; }

.doc-card-body { display: block; flex: 1 0 auto; }

.doc-card-name {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
}

.doc-card-meta {
  display: block;
  color: var(--grafite);
  font-size: 0.875rem;
}

.doc-card-where,
.doc-card-service {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--grafite);
}

.doc-card-where .pin { vertical-align: -0.15em; margin-right: 0.25rem; }

.doc-card-service b { color: var(--inchiostro); }

/* Il piede dice sempre qualcosa. Senza orari liberi non sparisce: dice che
   l'agenda è chiusa, che è un'informazione — la scheda muta lascia credere
   che la pagina si sia rotta. */
.doc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem -1.25rem 0;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--riga);
  background: var(--verde-velato);
  border-radius: 0 0 var(--raggio) var(--raggio);
}

.doc-card-when { display: block; line-height: 1.3; }

.doc-card-when b {
  display: block;
  font-size: 0.9375rem;
  color: var(--verde);
}

.doc-card-when small {
  display: block;
  font-size: 0.75rem;
  color: var(--grafite);
}

.doc-card-when b::first-letter { text-transform: uppercase; }

.doc-card-go {
  flex: none;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy-alto);
  white-space: nowrap;
}

.doc-card-foot-off { background: var(--carta); }

.doc-card-foot-off .doc-card-when b { color: var(--grafite); }

/* --- come funziona, e cosa succede dopo ---------------------------------- */

.steps {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.steps li {
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: 1.25rem;
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: var(--navy-velato);
  color: var(--navy);
  font-weight: 700;
}

.steps h3,
.promises h3 { margin-bottom: 0.25rem; }

.steps p,
.promises p { margin: 0; color: var(--grafite); font-size: 0.9375rem; }

.promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem 2rem;
}

/* La riga verticale al posto del riquadro: quattro schede qui sarebbero
   quattro schede sotto altre quattro schede, e la pagina diventerebbe una
   griglia di scatole tutte uguali. */
.promises li {
  padding-left: 0.875rem;
  border-left: 2px solid var(--navy-velato);
}

/* --- l'indice: specialità e città ---------------------------------------- */

.directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem 2rem;
}

.directory h2 { font-size: 1.0625rem; margin-bottom: 0.75rem; }

.opinions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.opinions-grid .opinion {
  margin: 0;
  padding: 1.25rem;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.split .card + .card { margin-top: 0; }

.split h2 { font-size: 1.125rem; }

.pro { background: var(--navy-velato); border-color: #d3dfef; }

/* --- la ricerca a vuoto -------------------------------------------------- */

.widen { margin-top: 2.5rem; }

.widen h2 { font-size: 1.125rem; }

.empty-search { margin-bottom: 2.5rem; }

.empty-title { font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.5rem; }

.empty-search p:last-child { margin-bottom: 0; color: var(--grafite); }
/* --- l'informativa ------------------------------------------------------- */

/* Una pagina che si legge riga per riga, non si scorre a colpo d'occhio: la
   misura è quella di un testo, non quella degli elenchi. 38rem sono circa
   settantacinque battute, che è dove l'occhio ritrova da solo l'inizio della
   riga dopo. */
.legal {
  max-width: 38rem;
  margin: 0 auto;
}

.legal section { margin-top: 2rem; }

.legal h2 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.legal ul {
  margin: 0 0 0.75rem;
  padding-left: 1.125rem;
}

.legal li { margin-bottom: 0.5rem; }

/* Il riassunto in tre righe. Sta in cima perché è quello che chiunque legge
   davvero, e chi legge solo quello ha capito la sostanza: i dati sono della
   clinica, noi teniamo il programma. */
.legal-brief {
  margin-top: 1.5rem;
  padding: 1.125rem 1.25rem 0.75rem;
  background: var(--navy-velato);
  border-radius: var(--raggio);
}

.legal-brief h2 { margin-top: 0; }

/* Il nome di chi risponde: staccato dal testo, perché è il dato che una
   persona cerca su questa pagina e non deve scovarlo dentro un paragrafo. */
.legal-holder {
  padding: 0.875rem 1rem;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-sm);
  line-height: 1.5;
}

.legal-holders { list-style: none; padding-left: 0; }

.legal-holders li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--riga);
}

.legal-holders li:first-child { border-top: 0; }

.legal-vat { color: var(--grafite); font-size: 0.875rem; }

.legal-note,
.legal-version {
  color: var(--grafite);
  font-size: 0.875rem;
}

.legal-version {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--riga);
}