/**
 * Design System v3.0 - Componenti
 *
 * Card, dati, liste, stati, modali, notifiche. Ogni superficie che mostra dati
 * ha i suoi cinque stati (loading, empty, error, populated, edge): uno stato
 * vuoto senza il comando che lo sblocca e' incompleto.
 *
 * Richiede design-tokens.css, ds-base.css, ds-layout.css.
 */

/* ===========================================
   CARD
   =========================================== */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-control);
  padding: var(--card-padding);
  background-color: var(--surface-card);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base),
    box-shadow var(--transition-base), transform var(--transition-base);
}

.card--compact {
  padding: var(--card-padding-compact);
  gap: var(--space-2);
}

.card--raised {
  box-shadow: var(--elevation-1);
}

.card--tinted {
  background-color: var(--metric-surface, var(--brand-50));
  border-color: var(--metric-border, var(--brand-200));
}

.card--interactive {
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.card--interactive:hover {
  border-color: var(--metric, var(--brand-500));
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.card--interactive:active {
  transform: translateY(0);
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-control);
}

.card-title {
  margin-right: auto;
  font-size: var(--type-h3-size);
  font-weight: var(--font-semibold);
  color: var(--fg-heading);
}

.card-subtitle {
  font-size: var(--type-small-size);
  color: var(--fg-subtle);
}

.card-body {
  color: var(--fg-muted);
}

.card-footer {
  display: flex;
  align-items: center;
  gap: var(--gap-control);
  padding-top: var(--gap-control);
  border-top: 1px solid var(--border-subtle);
}

/* ===========================================
   DATO SINGOLO (stat)
   ===========================================
   Anatomia fissa: etichetta sopra, numero grande, unita accanto, variazione
   sotto. E' la stessa in tutte le sezioni, cambia solo la tinta. */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--card-padding-compact);
  background-color: var(--surface-card);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.stat--tinted {
  background-color: var(--metric-surface, var(--brand-50));
  border-color: var(--metric-border, var(--brand-200));
}

.stat-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-caption-size);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-subtle);
}

.stat-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: var(--numeric-tabular);
  color: var(--fg-heading);
}

.stat-value--metric {
  color: var(--metric-text, var(--brand-700));
}

.stat-value--sm {
  font-size: var(--text-xl);
}

.stat-unit {
  font-size: var(--type-small-size);
  font-weight: var(--font-semibold);
  color: var(--fg-subtle);
}

/* La variazione: la FRECCIA dice il verso, il COLORE dice il giudizio, e sono
   due cose separate perche' spesso non coincidono. Piu ore di sonno e' un
   aumento desiderabile, piu chili quasi mai, e per il peso dipende
   dall'obiettivo dell'utente. Quindi --up/--down restano neutri e il tono si
   chiede a parte, solo dove l'app sa davvero da che parte si vuole andare. */
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--type-caption-size);
  font-weight: var(--font-semibold);
  font-variant-numeric: var(--numeric-tabular);
  color: var(--fg-subtle);
}

.stat-delta--up::before {
  content: "▲";
  font-size: 0.8em;
}

.stat-delta--down::before {
  content: "▼";
  font-size: 0.8em;
}

.stat-delta--flat::before {
  content: "–";
}

.stat-delta.is-good {
  color: var(--success-text);
}

.stat-delta.is-bad {
  color: var(--danger-text);
}

.stat-note {
  font-size: var(--type-caption-size);
  color: var(--fg-subtle);
}

/* ===========================================
   BADGE E CHIP
   =========================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
  border-radius: var(--radius-xs);
  background-color: var(--neutral-100);
  color: var(--fg-muted);
  white-space: nowrap;
}

.badge--success {
  background-color: var(--success-surface);
  color: var(--success-text);
}
.badge--warning {
  background-color: var(--warning-surface);
  color: var(--warning-text);
}
.badge--danger {
  background-color: var(--danger-surface);
  color: var(--danger-text);
}
.badge--info {
  background-color: var(--info-surface);
  color: var(--info-text);
}
.badge--metric {
  background-color: var(--metric-surface, var(--brand-50));
  color: var(--metric-text, var(--brand-700));
}
.badge--solid {
  background-color: var(--metric, var(--brand-700));
  color: var(--fg-on-solid);
}

/* Chip: un badge selezionabile (filtri del catalogo esercizi, tipi di pasto). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding-inline: var(--space-3);
  font-size: var(--type-caption-size);
  font-weight: var(--font-semibold);
  color: var(--fg-muted);
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-colors);
}

.chip:hover {
  border-color: var(--brand-400);
  color: var(--fg-brand);
}

.chip[aria-pressed="true"],
.chip.active {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--fg-on-solid);
}

/* ===========================================
   LISTA DI DATI
   ===========================================
   La riga di storico, uguale in tutte le sezioni: contenuto a sinistra, meta
   sotto, azioni a destra che su mobile restano visibili invece di finire
   fuori schermo. */
.data-list {
  display: flex;
  flex-direction: column;
}

.data-row {
  display: flex;
  align-items: center;
  gap: var(--gap-control);
  padding: var(--space-3) var(--card-padding);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--transition-base);
}

.data-row:last-child {
  border-bottom: none;
}

.data-row:hover {
  background-color: var(--neutral-50);
}

.data-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.data-row__title {
  font-size: var(--type-body-size);
  font-weight: var(--font-semibold);
  color: var(--fg-default);
  overflow-wrap: anywhere;
}

.data-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-caption-size);
  color: var(--fg-subtle);
}

.data-row__value {
  font-size: var(--type-h3-size);
  font-weight: var(--font-bold);
  font-variant-numeric: var(--numeric-tabular);
  color: var(--metric-text, var(--fg-heading));
  white-space: nowrap;
}

.data-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* Sotto i 640px titolo, valore e azioni non stanno su una riga: il titolo va a
   capo parola per parola e il valore si schiaccia contro le icone. La riga
   diventa due: contenuto sopra, valore e azioni sotto. */
@media (max-width: 640px) {
  .data-row {
    flex-wrap: wrap;
    padding-inline: var(--card-padding-compact);
  }

  .data-row__main {
    flex: 1 1 100%;
  }

  .data-row__value {
    margin-right: auto;
    font-size: var(--type-h3-size);
  }
}

/* ===========================================
   TABELLA
   ===========================================
   Scorre dentro il proprio contenitore: il body della pagina non deve mai
   scorrere in orizzontale. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  min-width: 100%;
  font-size: var(--type-small-size);
  font-variant-numeric: var(--numeric-tabular);
}

.data-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--type-caption-size);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-subtle);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3);
  color: var(--fg-default);
  border-bottom: 1px solid var(--border-subtle);
}

.data-table tbody tr:hover td {
  background-color: var(--neutral-50);
}

/* ===========================================
   PANNELLO GRAFICO
   =========================================== */
.chart-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-control);
}

.chart-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-control);
}

.chart-panel__title {
  margin-right: auto;
  font-size: var(--type-h3-size);
  font-weight: var(--font-semibold);
  color: var(--fg-heading);
}

/* L'altezza sta qui e non su ogni <canvas>: Chart.js con
   maintainAspectRatio:false prende l'altezza dal contenitore, e se manca il
   grafico cresce all'infinito. */
.chart-canvas {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-canvas--tall {
  height: 360px;
}

.chart-canvas--short {
  height: 180px;
}

@media (max-width: 640px) {
  .chart-canvas,
  .chart-canvas--tall {
    height: 240px;
  }
}

/* ===========================================
   STATI DELLE SUPERFICI DATI
   ===========================================
   Vuoto, caricamento, errore. Lo stato vuoto porta SEMPRE il comando che lo
   sblocca: rimandare a "qui sotto" lascia l'utente fermo. */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-5);
  text-align: center;
}

.state__icon {
  font-size: 2rem;
  line-height: 1;
  opacity: 0.7;
}

.state__title {
  font-size: var(--type-h3-size);
  font-weight: var(--font-semibold);
  color: var(--fg-heading);
}

.state__text {
  max-width: 42ch;
  font-size: var(--type-small-size);
  color: var(--fg-subtle);
}

.state--error .state__title {
  color: var(--danger-text);
}

/* Scheletro di caricamento: occupa lo spazio che occupera il contenuto, cosi
   la pagina non salta quando i dati arrivano. */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--neutral-100) 25%,
    var(--neutral-200) 37%,
    var(--neutral-100) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: ds-shimmer 1.4s ease infinite;
}

.skeleton--text {
  height: 1em;
  margin-block: 0.25em;
}

.skeleton--title {
  height: 1.5em;
  width: 45%;
}

.skeleton--block {
  height: 120px;
}

@keyframes ds-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ===========================================
   NOTA / CALLOUT
   =========================================== */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-small-size);
  line-height: var(--leading-snug);
  border: 1px solid var(--info-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background-color: var(--info-surface);
  color: var(--info-text);
}

.note::before {
  content: "ℹ";
  font-weight: var(--font-bold);
  line-height: 1.3;
}

.note--warning {
  background-color: var(--warning-surface);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
.note--warning::before {
  content: "⚠";
}

.note--danger {
  background-color: var(--danger-surface);
  border-color: var(--danger-border);
  color: var(--danger-text);
}
.note--danger::before {
  content: "⚠";
}

.note--success {
  background-color: var(--success-surface);
  border-color: var(--success-border);
  color: var(--success-text);
}
.note--success::before {
  content: "✓";
}

/* ===========================================
   BARRA DI AVANZAMENTO
   =========================================== */
/* display:block esplicito: la barra viene marcata anche come <span> dentro una
   card, e su un elemento inline l'altezza non si applica - la barra sparisce
   senza che niente segnali l'errore. */
.progress {
  display: block;
  height: 8px;
  overflow: hidden;
  background-color: var(--surface-sunken);
  border-radius: var(--radius-full);
}

.progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--metric, var(--brand-600));
  transition: width var(--duration-slow) var(--ease-out);
}

.progress__bar--over {
  background-color: var(--warning);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--type-caption-size);
  font-variant-numeric: var(--numeric-tabular);
  color: var(--fg-subtle);
}

/* ===========================================
   MODALE
   ===========================================
   Focus trap ed Escape arrivano da utils/modal-a11y.js: qui c'e' solo
   l'aspetto. Non aggiungere una seconda trappola.
   Su mobile il modale sale dal fondo a tutta larghezza (foglio), su desktop e'
   centrato: e' la stessa struttura, cambia l'ancoraggio. */
/* Le due famiglie di modale si aprono in modi OPPOSTI, e la differenza non e'
   cosmetica: .modal-overlay e' visibile e si nasconde aggiungendo .hidden,
   .tab-sections-modal-overlay e .tutorial-modal-overlay sono nascosti e si
   mostrano aggiungendo .show. Dare a tutti `display: flex` apre i secondi al
   caricamento della pagina, sopra l'app: e' successo, e nessun gate lo ha
   segnalato perche' un modale aperto e' perfettamente accessibile. */
.modal-overlay,
.tab-sections-modal-overlay,
.tutorial-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background-color: var(--surface-overlay);
  backdrop-filter: blur(3px);
  animation: ds-fade var(--duration-normal) var(--ease-out);
}

/* Visibile finche' non arriva .hidden */
.modal-overlay {
  display: flex;
}

/* Nascosti finche' non arriva .show */
.tab-sections-modal-overlay,
.tutorial-modal-overlay {
  display: none;
}

.tab-sections-modal-overlay.show,
.tutorial-modal-overlay.show {
  display: flex;
}

/* .modal-dialog e non .modal: in questa app `.modal` e' gia' il NOME
   DELL'OVERLAY (style.css lo rende fisso a tutto schermo con il velo), e
   modal-a11y.js lo osserva come contenitore. Chiamare cosi' il dialogo gli
   avrebbe dato il velo addosso e, peggio, avrebbe registrato 25 elementi in
   piu' come contenitori di modale: una seconda trappola di focus dentro la
   prima, su ogni dialogo. */
.modal-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - var(--space-12));
  background-color: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-3);
  overflow: hidden;
  animation: ds-rise var(--duration-normal) var(--ease-out);
}

.modal-dialog--wide {
  max-width: 860px;
}

.modal-header,
.tab-sections-modal-header {
  display: flex;
  align-items: center;
  gap: var(--gap-control);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title,
.modal-header h3,
.modal-header h2,
.tab-sections-modal-header h3 {
  margin-right: auto;
  font-size: var(--type-h2-size);
  font-weight: var(--font-bold);
  color: var(--fg-heading);
}

/* .close-modal e' il nome che modal-a11y.js cerca per chiudere con Escape:
   rinominarlo spegnerebbe la scorciatoia su tutti i dialoghi in silenzio. */
.modal-close,
.close-modal,
.tab-sections-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}

.modal-close:hover,
.close-modal:hover,
.tab-sections-close-btn:hover {
  background-color: var(--neutral-100);
  color: var(--fg-default);
}

/* .modal-content e .modal-actions sono i nomi che l'app usa gia' per corpo e
   piede. Il design system li riconosce invece di chiedere una rinomina: sono su
   25 dialoghi, e rinominarli non aggiungerebbe niente a cio' che si vede. */
.modal-body,
.modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-field);
  padding: var(--space-5);
  overflow-y: auto;
}

.modal-footer,
.modal-actions,
.tab-sections-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-control);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background-color: var(--neutral-50);
}

/* Il corpo di "Personalizza Vista" ha lo stesso ruolo del corpo di un modale. */
.tab-sections-modal-body {
  padding: var(--space-5);
  overflow-y: auto;
}

@media (max-width: 640px) {
  .modal-overlay,
  .tab-sections-modal-overlay,
  .tutorial-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-dialog {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .modal-footer {
    /* In un foglio le azioni sono la riga finale: qui la piena larghezza e'
       corretta, ed e' l'eccezione dichiarata alla regola di ds-controls. */
    flex-direction: column-reverse;
  }

  .modal-footer .btn,
  .modal-actions .btn {
    width: 100%;
  }
}

@keyframes ds-fade {
  from {
    opacity: 0;
  }
}

@keyframes ds-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

/* ===========================================
   NOTIFICA (toast)
   =========================================== */
/* Sotto la testata, non sopra: la testata e' sticky e ospita profilo e uscita,
   e una notifica che le si sovrappone copre proprio i comandi che l'utente
   userebbe subito dopo. */
.toast-stack {
  position: fixed;
  top: calc(var(--header-height) + var(--space-3));
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(380px, calc(100vw - var(--space-8)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-small-size);
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-600);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  pointer-events: auto;
  animation: ds-slide-in var(--duration-normal) var(--ease-out);
}

.toast--success {
  border-left-color: var(--success);
}
.toast--warning {
  border-left-color: var(--warning);
}
.toast--error {
  border-left-color: var(--danger);
}

.toast__body {
  margin-right: auto;
  color: var(--fg-default);
}

@keyframes ds-slide-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

@media (max-width: 640px) {
  .toast-stack {
    top: auto;
    bottom: calc(var(--tabbar-height-mobile) + var(--space-3));
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }
}

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.numeric {
  font-variant-numeric: var(--numeric-tabular);
}

.text-muted {
  color: var(--fg-subtle);
}

.hidden {
  display: none !important;
}

/* ===========================================
   SUPERFICI DI APP EREDITATE DA components.css
   ===========================================
   Disclaimer sanitario, footer legale, separatori e gruppi di input:
   erano le uniche regole di components.css che nessun altro foglio
   ridefiniva. Arrivano qui invariate quando quel file viene rimosso, e
   verranno riportate sui primitivi (.note, .field, hr) quando le rispettive
   superfici saranno migrate. */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.divider {
  height: 1px;
  background-color: var(--neutral-200);
  margin: var(--space-4) 0;
}

.divider-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  background-color: var(--neutral-200);
  margin: 0 var(--space-4);
}

.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--neutral-600);
  font-size: var(--text-sm);
}

.divider-text::before,

.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--neutral-200);
}

.legal-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--brand-100);
  font-size: var(--text-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--neutral-600);
}

.legal-footer p {
  margin: 0 0 var(--space-1);
}

.legal-footer p:last-child {
  margin-bottom: 0;
}

.legal-footer__disclaimer {
  font-weight: 500;
}

.legal-footer__contact,

.legal-footer__links {
  /* La card di login e stretta anche su desktop: senza wrap il separatore
     resta appeso a fine riga quando i link vanno a capo. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 var(--space-1);
}

.legal-footer__sep {
  margin: 0 var(--space-1);
  /* Il teal chiaro rendeva il separatore 1.5:1 sul bianco, cioè invisibile a chi
     ha ipovisione proprio dove serve a distinguere due link. */
  color: var(--neutral-500);
}

.legal-footer__owner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.legal-footer a {
  color: var(--brand-700);
  text-decoration: underline;
  /* Sotto i 320px anche "Informativa Privacy" sfonda il contenitore: senza
     questo, il testo esce dalla card invece di spezzarsi. */
  overflow-wrap: anywhere;
  /* Il footer e' l'ultima riga della pagina: su mobile i link finiscono sotto
     il pollice, quindi serve un bersaglio vero e non solo il testo. */
  display: inline-block;
  padding: var(--space-1) 0;
}

.legal-footer a:hover {
  /* Scurire, non schiarire: primary-600 su bianco da 3.74:1 e fallisce AA
     proprio nello stato hover, dove il link a riposo invece passa. */
  color: var(--brand-900);
}

.legal-footer a:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.legal-footer--app {
  max-width: 1200px;
  margin: var(--space-10) auto 0;
  padding: var(--space-4) var(--space-4) var(--space-6);
}

@media (max-width: 768px) {
  .legal-footer a {
    /* 44px di bersaglio: il footer sta a fondo pagina, sotto il pollice */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-1);
  }
}

@media (max-width: 480px) {
  /* Sotto i 480px nessuna coppia di link entra in riga: il wrap lascerebbe il
     separatore appeso a fine riga. Meglio impilarli e toglierlo del tutto. */
  .legal-footer__contact,
  .legal-footer__links {
    flex-direction: column;
    gap: 0;
  }

  .legal-footer__sep {
    display: none;
  }
}

.health-disclaimer {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--neutral-200);
  font-size: var(--text-xs);
  line-height: 1.5;
  text-align: center;
  /* Il disclaimer sta su una card rosa: il grigio medio si ferma a 4.44:1. */
  color: var(--neutral-700);
}