/* Social The Rope · la libreria componenti.
 *
 * Contratto: docs/ui.md §5. Prefisso `sc-` su ogni classe, BEM leggera
 * (`sc-blocco`, `sc-blocco__parte`, `sc-blocco--variante`) e gli stati come classi `is-`
 * (`is-active`, `is-loading`, `is-disabled`, `is-selected`, `is-error`, `is-dragover`).
 *
 * Regole comuni, valide per tutti i blocchi di questo file:
 *   ogni componente ha almeno default, hover, focus, active, disabled; chi scrive ha
 *   anche loading, chi valida ha anche error;
 *   il focus e' sempre visibile e non si rimuove mai;
 *   il colore non e' mai l'unico veicolo di un'informazione: sotto c'e' sempre
 *   un'etichetta, una forma o un `aria-label`;
 *   gli attributi `data-*` sono il contratto fra template e comportamento: il JS non
 *   conosce mai una classe di presentazione;
 *   `.is-hover` affianca ogni `:hover` perche' la kitchen sink possa mostrare lo stato
 *   fermo, senza il puntatore.
 *
 * L'area cliente e' progettata sotto i 400 px e cresce da li' (spec §8): dove un
 * componente cambia forma, la forma piccola e' quella base e la media query aggiunge.
 *
 * Ordine dei blocchi, quello di ui.md §6.6 punto 3:
 *   1  bottoni, gruppi di CTA, menu
 *   2  campi form
 *   3  badge di status, pallino, badge numerico, avatar
 *   4  tab
 *   5  tabella per anno
 *   6  overlay laterale
 *   7  popup modale
 *   8  toast
 *   9  empty state
 *  10  skeleton
 *  11  calendario
 *  12  griglie feed
 *  13  chat e messaggio
 *  14  uploader
 *  15  card cliente
 *  16  centro notifiche
 *  17  date picker
 *  18  legenda
 *  19  componenti minori: banner, divider, meta, tooltip, progress, count, embed, diff
 */


/* =========================================================================
 * 1 · Bottoni, gruppi di CTA, menu (ui.md §5.13)
 * ========================================================================= */

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: var(--bw) solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.sc-btn:hover { text-decoration: none; }

@media (min-width: 900px) {
  .sc-btn { min-height: 40px; }
  .sc-btn--compact { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-small); }
}

.sc-btn__icon { flex: 0 0 auto; width: 18px; height: 18px; }

/* primaria: una sola per vista. Nell'area cliente il fondo e' il primario del cliente. */
.sc-btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.sc-btn--primary:hover, .sc-btn--primary.is-hover { filter: brightness(.92); }
.sc-btn--primary:active { filter: brightness(.84); }

.sc-btn--secondary { background: var(--bg-3); border-color: var(--line); color: var(--text); }
.sc-btn--secondary:hover, .sc-btn--secondary.is-hover { background: var(--bg-4); border-color: var(--faint); }
.sc-btn--secondary:active { background: var(--bg-3); }

.sc-btn--ghost { color: var(--text); }
.sc-btn--ghost:hover, .sc-btn--ghost.is-hover { background: var(--shade); }
/* Un gruppo di bottoni che si escludono (mese ed elenco del calendario) deve dire quale e'
   quello attivo: aria-pressed lo diceva solo allo screen reader, e a occhio i due erano
   identici. Stesso trattamento di sc-pill e delle voci di legenda. */
.sc-btn:not(.sc-btn--link)[aria-pressed="true"] { background: var(--bg-3); border-color: var(--text); color: var(--text); }

.sc-btn--link {
  min-height: var(--tap);
  padding: 0;
  color: var(--c-primary-text);
  font-weight: var(--fw-regular);
  text-decoration: none;
}
.sc-btn--link:hover, .sc-btn--link.is-hover { text-decoration: underline; }
/* Il bersaglio di tocco non ha eccezioni sotto --bp-md (ui.md §2.7): la variante link e'
   l'azione di riga delle tabelle, ed e' proprio quella che il cliente tocca dal telefono.
   Sopra --bp-md torna alta quanto il testo, che e' la forma con cui sta dentro una riga. */
@media (min-width: 900px) {
  /* QA L7: sotto i 900 px il bottone-link tiene il bersaglio di tocco --tap. Sopra, invece,
     deve misurare quanto gli altri bottoni della sua fila: con --tap restava alto 44 accanto
     a una primaria da 40 e la fila si vedeva sfalsata (Anteprima del tema, azioni di riga). */
  .sc-btn--link { min-height: 40px; }
}

.sc-btn--danger { color: var(--err); border-color: transparent; }
.sc-btn--danger:hover, .sc-btn--danger.is-hover { border-color: var(--err); background: var(--err-bg); }

.sc-btn--icon {
  width: var(--tap);
  min-width: var(--tap);
  padding: 0;
  color: var(--muted);
}
.sc-btn--icon:hover, .sc-btn--icon.is-hover { background: var(--shade); color: var(--text); }

.sc-btn--block { width: 100%; }

.sc-btn:disabled,
.sc-btn.is-disabled,
.sc-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
}

/* loading: etichetta invariata, larghezza congelata, nessun salto di layout. */
.sc-btn.is-loading { cursor: progress; position: relative; }
.sc-btn.is-loading .sc-btn__icon { display: none; }
.sc-btn__spinner {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-pill);
  animation: sc-spin 640ms linear infinite;
}
.sc-btn:not(.is-loading) .sc-btn__spinner { display: none; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sc-btn__spinner { animation-duration: 1600ms; }
}

/* sc-actions decide l'ordine per ruolo e per stato: una primaria, al massimo due
   secondarie visibili, il resto nel menu "altro". */
.sc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.sc-actions__primary { order: 1; }
.sc-actions__secondary { order: 2; }
/* "Altro" resta accanto alle azioni che riassume: con margin-left: auto una barra larga
   1095 px lo spediva a 630 px dalla primaria, come se non c'entrasse niente con lei. */
.sc-actions__more { order: 3; position: relative; }

.sc-actions--stack { flex-direction: column; align-items: stretch; }

/* Sotto --bp-md la primaria va nella barra fissa in fondo, e la barra e' l'unica cosa
   sempre visibile: niente due position: fixed sovrapposti. */
.sc-actions--bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: var(--bw) solid var(--line);
}
/* La primaria a tutta larghezza e' la forma del telefono, non del desktop: senza la
   media query "salva modifiche" prendeva una riga intera anche a 1440 px e le altre CTA
   finivano su una seconda fila. */
@media (max-width: 899px) {
  .sc-actions--bar .sc-actions__primary { flex: 1 1 100%; }
}

.sc-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-1));
  z-index: var(--z-dropdown);
  min-width: 220px;
  padding: var(--s-1) 0;
  background: var(--bg-2);
  border: var(--bw) solid var(--line);
  box-shadow: var(--e1);
}
.sc-menu[hidden] { display: none; }
/* Dentro una barra ancorata in fondo il menu deve salire: aprendosi verso il basso
   usciva sotto il bordo della finestra e le sue voci non si raggiungevano. */
.sc-actions--bar .sc-menu { top: auto; bottom: calc(100% + var(--s-1)); }
.sc-menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  color: var(--text);
  font-size: var(--fs-body);
  text-align: left;
}
.sc-menu__item:hover, .sc-menu__item.is-hover { background: var(--shade); text-decoration: none; }
/* --muted e non --faint: una voce disabilitata va comunque letta, e ui.md §3.1 esclude
   --faint dal testo (3,06:1 in scuro, 2,43:1 in chiaro). Che sia disabilitata lo dicono
   aria-disabled e pointer-events, non l'illeggibilita'. */
.sc-menu__item[aria-disabled="true"] { color: var(--muted); pointer-events: none; }
.sc-menu__item--danger { color: var(--err); border-top: var(--bw) solid var(--line-soft); margin-top: var(--s-1); }


/* =========================================================================
 * 2 · Campi form (ui.md §5.14)
 * ========================================================================= */

.sc-field { display: flex; flex-direction: column; gap: var(--s-2); }

.sc-field__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--muted);
  letter-spacing: .01em;
}
.sc-field__label .sc-field__req { color: var(--st-modifiche); }

.sc-field__control { position: relative; display: flex; }

.sc-input, .sc-select, .sc-textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  /* 16px sui campi di testo, altrimenti iOS zooma da solo quando si tocca il campo:
     e' l'unica eccezione dichiarata alla scala tipografica. */
  font-size: 16px;
  /* Senza line-height dichiarata il campo alto quanto il carattere di sistema (41,3 px al
     desktop) non combacia con il bottone accanto, che ne misura 40: la riga di filtri e la
     riga di form escono di un pixel e mezzo. Con --lh-snug il contenuto sta sotto il
     min-height e i due controlli misurano esattamente lo stesso. */
  line-height: var(--lh-snug);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
@media (min-width: 900px) {
  .sc-input, .sc-select, .sc-textarea { min-height: 40px; font-size: var(--fs-body); }
}

.sc-input:hover, .sc-select:hover, .sc-textarea:hover,
.sc-input.is-hover, .sc-select.is-hover, .sc-textarea.is-hover { border-color: var(--faint); }
.sc-input:focus, .sc-select:focus, .sc-textarea:focus { border-color: var(--text); }

.sc-textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }

/* La select resta la nativa, con il chevron disegnato: e' quella che funziona su ogni
   telefono, e nessun rifacimento custom la batte. */
.sc-select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sc-input:disabled, .sc-select:disabled, .sc-textarea:disabled,
.sc-field.is-disabled .sc-input, .sc-field.is-disabled .sc-select, .sc-field.is-disabled .sc-textarea {
  background: var(--shade);
  color: var(--muted);
  cursor: not-allowed;
}
.sc-input[readonly], .sc-textarea[readonly] { background: var(--shade); }

.sc-field__hint { font-size: var(--fs-small); color: var(--muted); }

.sc-field__error {
  display: none;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-small);
  color: var(--st-modifiche);
}
.sc-field__error::before { content: "!"; flex: 0 0 auto; width: 16px; height: 16px; border: var(--bw) solid currentColor; border-radius: var(--r-pill); font-size: 11px; font-weight: var(--fw-bold); line-height: 14px; text-align: center; }
.sc-field.is-error .sc-field__error { display: flex; }
.sc-field.is-error .sc-input,
.sc-field.is-error .sc-select,
.sc-field.is-error .sc-textarea,
[aria-invalid="true"] { border-color: var(--st-modifiche); }

.sc-field__counter {
  align-self: flex-end;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* Il contatore non blocca mai: oltre soglia cambia colore e spiega, e "salva" resta viva. */
.sc-field__counter.is-over { color: var(--st-modifiche); }

/* Inline: etichetta e controllo su una riga, per le select compatte della preview
   del giorno. Sotto --bp-sm torna impilata, perche' a 375 px non ci sta. */
.sc-field--inline { display: grid; grid-template-columns: 1fr; gap: var(--s-1); }
@media (min-width: 640px) {
  .sc-field--inline { grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: var(--s-3); }
  .sc-field--inline .sc-field__hint,
  .sc-field--inline .sc-field__error { grid-column: 2; }
}

/* Sola lettura: la forma di tutti i campi lato client. Nessun bordo, valore in --text.
   La regola vale su `sc-field__value` e su `sc-field__control`: il §5.14 elenca il secondo
   fra le classi della libreria e meta' applicazione lo usa anche per i valori. Con la sola
   regola su `__value` le righe in sola lettura della preview del giorno restavano alte la
   meta' di quelle modificabili e le due colonne non si allineavano. */
.sc-field--readonly .sc-field__value,
.sc-field--readonly .sc-field__control {
  padding: var(--s-2) 0;
  font-size: var(--fs-body);
  color: var(--text);
}

.sc-fieldset { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .sc-fieldset--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sc-check { display: flex; align-items: flex-start; gap: var(--s-2); min-height: var(--tap); cursor: pointer; }
.sc-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: var(--s-1); accent-color: var(--c-primary); }
/* Difesa: una casella o un radio non si stirano mai, dovunque finiscano. Messi dentro una
   griglia di campo prendevano la colonna intera e diventavano un rettangolo 140 x 13. */
input[type="checkbox"], input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--c-primary); }


/* =========================================================================
 * 3 · Badge di status, pallino, badge numerico, avatar (ui.md §5.12, §5.20)
 * ========================================================================= */

/* Il pallino porta il colore E la forma: due status vicini per luminanza non si
   distinguono col solo colore, e la legenda puo' essere spenta. */
.sc-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  background: var(--st-bozza);
}
.sc-dot--bozza { background: transparent; border: 2px solid var(--st-bozza); }
.sc-dot--review { background: var(--st-review); }
/* Disco piu' anello, disegnati DENTRO il box da 10 px: l'anello con box-shadow usciva dal
   box (il pallino ne misurava 17 in mezzo a fratelli da 10) e riempiva lo stacco con
   --bg-2, che e' il colore giusto solo sopra un pannello: sul fondo pagina e dentro una
   cella di calendario si vedeva un alone. Qui lo stacco e' trasparente e mostra la
   superficie vera, qualunque sia. */
.sc-dot--modifiche {
  background: radial-gradient(circle at 50% 50%,
    var(--st-modifiche) 0 2.5px, transparent 2.5px 3.5px, var(--st-modifiche) 3.5px 5px, transparent 5px);
}
.sc-dot--approvato { background: var(--st-approvato); position: relative; }
/* Il rombo si ritaglia dentro il quadrato da 10 px invece di ruotarlo: ruotato il suo
   riquadro diventava 11,3 px e in una legenda spostava di un pixel e mezzo l'etichetta
   accanto rispetto a tutti gli altri pallini. */
.sc-dot--richiesta { background: var(--st-richiesta); border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sc-dot--archiviato { background: var(--st-bozza); opacity: .6; }
.sc-dot--unread { width: 8px; height: 8px; background: var(--unread); }
.sc-dot--lg { width: 16px; height: 16px; }
.sc-dot--lg.sc-dot--approvato::after {
  content: "";
  position: absolute; left: 4px; top: 4px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--bg-2);
  border-bottom: 2px solid var(--bg-2);
  transform: rotate(-45deg);
}

.sc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--st-bozza-bg);
  color: var(--st-bozza);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}
.sc-status--bozza { background: var(--st-bozza-bg); color: var(--st-bozza); }
.sc-status--review { background: var(--st-review-bg); color: var(--st-review); }
.sc-status--modifiche { background: var(--st-modifiche-bg); color: var(--st-modifiche); }
.sc-status--approvato { background: var(--st-approvato-bg); color: var(--st-approvato); }
.sc-status--richiesta { background: var(--st-richiesta-bg); color: var(--st-richiesta); }
.sc-status--archiviato { background: var(--st-bozza-bg); color: var(--st-bozza); }
.sc-status--pubblicato { background: var(--st-approvato-bg); color: var(--st-approvato); }
.sc-status__count { color: inherit; opacity: .85; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.sc-status--ped { white-space: normal; }

.sc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--s-2);
  background: var(--unread);
  color: var(--unread-on, #060608);
  border-radius: var(--r-pill);
  /* Il conteggio e' una cifra o due dentro venti pixel: sotto --bp-md sale a --fs-label,
     che nell'area cliente e' il pavimento dei 15 px (ui.md §2.7, §3.4). */
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sc-badge--quiet { background: var(--bg-4); color: var(--text); }

.sc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  overflow: hidden;
}
.sc-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.sc-avatar--lg { width: 44px; height: 44px; font-size: var(--fs-body); }
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; }


/* =========================================================================
 * 4 · Tab (ui.md §5.11)
 * ========================================================================= */

.sc-tabs__scroll {
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* la sfumatura ai bordi dice che continua, che a 375 px non e' ovvio */
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.sc-tabs__scroll::-webkit-scrollbar { display: none; }

.sc-tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: var(--bw) solid var(--line);
}
.sc-tabs__scroll .sc-tabs { width: max-content; min-width: 100%; }

.sc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--fs-body);
  scroll-snap-align: start;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.sc-tab:hover, .sc-tab.is-hover { background: var(--shade); color: var(--text); text-decoration: none; }
/* la selezione e' fondo piu' bordo, mai il solo colore del testo */
.sc-tab[aria-selected="true"], .sc-tab.is-active {
  background: var(--bg-3);
  border-bottom-color: var(--c-primary);
  color: var(--text);
  font-weight: var(--fw-medium);
}
.sc-tab[aria-disabled="true"], .sc-tab:disabled { color: var(--muted); opacity: .7; pointer-events: none; }
.sc-tab__badge { margin-left: var(--s-1); }

.sc-tabs--settings { flex-direction: row; }
@media (min-width: 1200px) {
  .sc-tabs--settings {
    flex-direction: column;
    gap: 0;
    border-bottom: 0;
    border-right: var(--bw) solid var(--line);
  }
  .sc-tabs--settings .sc-tab {
    justify-content: flex-start;
    border-bottom: 0;
    border-right: 2px solid transparent;
  }
  .sc-tabs--settings .sc-tab[aria-selected="true"] { border-right-color: var(--c-primary); }
}

.sc-tabpanel[hidden] { display: none; }


/* =========================================================================
 * 5 · Tabella per anno (ui.md §5.10)
 * ========================================================================= */

.sc-table { display: block; }
.sc-table__year {
  margin-bottom: var(--s-3);
  font-size: var(--fs-h2);
  font-variant-numeric: tabular-nums;
}
.sc-table + .sc-table { margin-top: var(--s-16); }

.sc-table__scroll { overflow-x: auto; overscroll-behavior-x: contain; }

.sc-table__head th {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--bw) solid var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.sc-table__row { border-bottom: var(--bw) solid var(--line-soft); }
.sc-table__row:hover, .sc-table__row.is-hover { background: var(--shade); }
.sc-table__cell { padding: var(--s-3); vertical-align: middle; font-size: var(--fs-body); }
.sc-table__cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.sc-table__cell--name { font-weight: var(--fw-medium); }
.sc-table__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; align-items: center; /* QA L4 */ }
.sc-table__actions .sc-btn--link[aria-disabled="true"] { color: var(--muted); pointer-events: none; text-decoration: none; }
.sc-table__unread { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: var(--fw-bold); }

/* Sotto --bp-md ogni riga diventa una scheda impilata. Un elenco di otto colonne che
   scorre di lato non si usa: qui non scorre, si impila. */
@media (max-width: 899px) {
  .sc-table__head { display: none; }
  .sc-table table, .sc-table tbody, .sc-table tr, .sc-table td { display: block; width: 100%; }
  .sc-table__row {
    padding: var(--s-3) 0;
    border-bottom: var(--bw) solid var(--line);
  }
  /* La specificita' serve: `.sc-table td` qui sopra e' 0,1,1 e vincerebbe su una sola
     classe, lasciando la cella in display: block e l'etichetta attaccata al valore. */
  .sc-table td.sc-table__cell { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-1) 0; }
  .sc-table td.sc-table__cell--name { font-size: var(--fs-h3); }
  .sc-table__cell[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .sc-table td.sc-table__cell--num { text-align: right; }
  .sc-table__actions { justify-content: flex-start; padding-top: var(--s-2); }
}


/* =========================================================================
 * 6 · Overlay laterale (ui.md §5.5)
 * ========================================================================= */

.sc-sheet { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.sc-sheet[data-sheet-open] { display: block; }

.sc-sheet__backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--backdrop);
  animation: sc-fade var(--dur-3) var(--ease-out);
}

.sc-sheet__panel {
  position: absolute;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  box-shadow: var(--e2);
}

/* La forma base e' quella mobile: foglio a schermo intero che sale dal basso. */
.sc-sheet__panel {
  inset: auto 0 0 0;
  max-height: 92dvh;
  border-top: var(--bw) solid var(--line);
  animation: sc-sheet-up var(--dur-3) var(--ease-out);
}
.sc-sheet__handle {
  flex: 0 0 auto;
  width: 44px; height: 4px;
  margin: var(--s-2) auto 0;
  background: var(--faint);
  border-radius: var(--r-pill);
  cursor: grab;
}

@media (min-width: 900px) {
  .sc-sheet--right .sc-sheet__panel {
    inset: 0 0 0 auto;
    width: var(--drawer-w);
    max-height: none;
    border-top: 0;
    border-left: var(--bw) solid var(--line);
    animation: sc-sheet-in var(--dur-3) var(--ease-out);
  }
  .sc-sheet--wide .sc-sheet__panel { width: min(720px, 96vw); }
  .sc-sheet--right .sc-sheet__handle { display: none; }
}

.sc-sheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border-bottom: var(--bw) solid var(--line);
}
@media (min-width: 900px) { .sc-sheet__head { padding: var(--s-8) var(--s-8) var(--s-5); } }
.sc-sheet__titles { flex: 1 1 auto; min-width: 0; }
.sc-sheet__eyebrow { display: block; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.sc-sheet__title { font-size: var(--fs-h2); }
.sc-sheet__close { flex: 0 0 auto; margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0 0; }

.sc-sheet__body {
  flex: 1 1 auto;
  /* Il corpo e' la parte che deve restare leggibile: senza `min-height` un piede lungo
     lo schiacciava a poche decine di pixel e della preview del giorno si vedeva solo la
     prima intestazione. */
  min-height: 30vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
@media (min-width: 900px) { .sc-sheet__body { padding: var(--s-8); } }

/* Il piede e' una barra di azione, non un secondo modulo: al massimo un terzo del
   pannello, e se qualcuno ci mette di piu' scorre lui invece del corpo. */
.sc-sheet__foot {
  flex: 0 1 auto;
  max-height: 33%;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: var(--bw) solid var(--line);
}
@media (min-width: 900px) { .sc-sheet__foot { padding: var(--s-5) var(--s-8); } }

/* Dentro il piede la barra di azione non ripete il fondo, il bordo e il padding del piede
   stesso: sono lo stesso oggetto, e sommandoli il pulsante nasceva dentro due cornici.
   La primaria prende tutta la riga, perche' il pannello e' stretto quanto un telefono. */
.sc-sheet__foot .sc-actions--bar {
  position: static;
  padding: 0;
  border-top: 0;
  background: transparent;
}
.sc-sheet__foot .sc-actions--bar .sc-actions__primary { flex: 1 1 100%; }

.sc-sheet__block { display: flex; flex-direction: column; gap: var(--s-4); }
/* La miniatura dentro un blocco dell'overlay e' un riquadro, non una striscia larga quanto
   il pannello: la variante nuda di `sc-feed-cell__media` non ha aspect-ratio e senza
   immagine collassava all'altezza del testo del segnaposto. */
.sc-sheet__block > .sc-feed-cell__media {
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Il blocco scelto dal deep link o dall'etichetta della cella: si vede quale, senza
   spostare niente (ACC-465). */
.sc-sheet__block.is-selected { box-shadow: inset var(--bw-2) 0 0 0 var(--c-primary); padding-left: var(--s-3); }

@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-sheet-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes sc-sheet-up { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .sc-sheet__panel, .sc-sheet__backdrop { animation: sc-fade 60ms linear; }
}


/* =========================================================================
 * 7 · Popup modale (ui.md §5.6)
 * ========================================================================= */

/* L'elemento nativo <dialog>: trappola del focus, Esc e livello superiore, gratis. */
.sc-modal {
  width: var(--modal-w);
  max-width: 100%;
  /* Il centraggio del <dialog> nativo e' `margin: auto` del foglio del browser, e il reset
     di app.css (`* { margin: 0 }`) glielo toglieva: ogni popup nasceva incollato in alto a
     sinistra. Si rimette qui, dove sta il componente. */
  margin: auto;
  padding: 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--text);
  box-shadow: var(--e2);
}
.sc-modal::backdrop { background: var(--backdrop); }
.sc-modal[open] { animation: sc-modal-in var(--dur-3) var(--ease-out); }
.sc-modal--sm { width: min(380px, 92vw); }
/* `--md` e' la misura di default del §5.6: la classe esiste perche' i template la scrivono
   e una classe che non esiste nel foglio e' una promessa che prima o poi non si mantiene. */
.sc-modal--md { width: var(--modal-w); }
.sc-modal--lg { width: var(--modal-w-lg); }

.sc-modal__panel { display: flex; flex-direction: column; max-height: 88dvh; }
.sc-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-3);
}
.sc-modal__title { flex: 1 1 auto; font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: .04em; }
.sc-modal__close { flex: 0 0 auto; margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0 0; }
.sc-modal__hint { padding: 0 var(--s-5) var(--s-3); color: var(--muted); font-size: var(--fs-small); }
.sc-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.sc-modal__foot {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: var(--bw) solid var(--line-soft);
}
.sc-modal__foot .sc-btn { flex: 1 1 auto; }
.sc-modal__foot--end { justify-content: flex-end; }
.sc-modal__foot--end .sc-btn { flex: 0 0 auto; }

/* elenco della conferma a un clic: l'elenco e' l'informazione, la conferma il sottoprodotto */
.sc-modal__list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 240px; overflow-y: auto; }
.sc-modal__list li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); }

.sc-modal.is-submitting .sc-modal__close { opacity: .45; pointer-events: none; }

@media (min-width: 900px) {
  .sc-modal__head { padding: var(--s-8) var(--s-8) var(--s-3); }
  .sc-modal__hint, .sc-modal__body { padding-inline: var(--s-8); }
  .sc-modal__foot { padding: var(--s-5) var(--s-8) var(--s-8); }
}

/* Sotto --bp-sm il popup diventa un foglio dal basso, CTA impilate con la primaria in
   alto: a 375 px un popup centrato con backdrop e' piu' facile da chiudere per sbaglio. */
@media (max-width: 639px) {
  .sc-modal {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-inline: 0;
    border-bottom: 0;
  }
  .sc-modal[open] { animation: sc-sheet-up var(--dur-3) var(--ease-out); }
  /* align-items: stretch serve perche' il piede porta spesso anche sc-actions, che
     centra: impilate e centrate le CTA restavano larghe quanto la parola. */
  .sc-modal__foot { flex-direction: column-reverse; align-items: stretch; }
}

@keyframes sc-modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .sc-modal[open] { animation: sc-fade 60ms linear; } }


/* =========================================================================
 * 8 · Toast (ui.md §5.16, §2.11)
 * ========================================================================= */

.sc-toasts {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
  /* base mobile: in basso al centro, sopra la barra di azione fissa */
  inset: auto var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)) var(--s-4);
}
@media (min-width: 640px) {
  .sc-toasts { inset: auto var(--s-6) var(--s-6) auto; width: min(400px, 92vw); }
}

.sc-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--bg-2);
  border: var(--bw) solid var(--line);
  border-left: 3px solid var(--ok);
  box-shadow: var(--e3);
  pointer-events: auto;
  animation: sc-toast-in var(--dur-2) var(--ease-out);
}
.sc-toast--info { border-left-color: var(--muted); }
.sc-toast--warn { border-left-color: var(--warn); }
.sc-toast.is-leaving { animation: sc-toast-out var(--dur-2) var(--ease-in) forwards; }

.sc-toast__icon { flex: 0 0 auto; margin-top: 2px; }
.sc-toast__text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-small); }
.sc-toast__undo { flex: 0 0 auto; font-weight: var(--fw-medium); }
.sc-toast__close { flex: 0 0 auto; width: 28px; min-width: 28px; min-height: 28px; }

.sc-toast__timer {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  background: var(--faint);
  animation: sc-toast-timer linear forwards;
  animation-duration: var(--sc-toast-ttl, 10s);
}
.sc-toast.is-paused .sc-toast__timer { animation-play-state: paused; }

@keyframes sc-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sc-toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes sc-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .sc-toast { animation: sc-fade 60ms linear; }
}


/* =========================================================================
 * 9 · Empty state (ui.md §5.18)
 * ========================================================================= */

.sc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-4);
  text-align: center;
}
@media (min-width: 900px) { .sc-empty { padding-block: var(--s-20); } }
.sc-empty__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.sc-empty__text { max-width: 48ch; color: var(--muted); font-size: var(--fs-small); }
.sc-empty__action { margin-top: var(--s-2); }

.sc-empty--inline {
  padding: var(--s-3);
  align-items: flex-start;
  text-align: left;
  color: var(--muted);
  font-size: var(--fs-small);
}


/* =========================================================================
 * 10 · Skeleton (ui.md §5.19)
 * ========================================================================= */

.sc-skeleton { background: var(--bg-3); animation: sc-pulse 1400ms ease-in-out infinite; }
@keyframes sc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sc-skeleton { animation: none; } }

.sc-skeleton--text { height: var(--fs-body); width: 80%; }
.sc-skeleton--text:nth-child(2n) { width: 62%; }
.sc-skeleton--text:nth-child(3n) { width: 94%; }
.sc-skeleton--title { height: 24px; width: 40%; }
.sc-skeleton--thumb { width: 100%; aspect-ratio: 4 / 5; }
.sc-skeleton--cell { height: 96px; }
.sc-skeleton--row { height: 44px; }
.sc-skeleton--card { height: 220px; }

.sc-skeleton--cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--bw); }
.sc-skeleton--feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.sc-skeleton--table { display: flex; flex-direction: column; gap: var(--bw); }
.sc-skeleton--notify { display: flex; flex-direction: column; gap: var(--bw); }
.sc-skeleton--chat { display: flex; flex-direction: column; gap: var(--s-3); }
.sc-skeleton--chat .sc-skeleton { height: 48px; width: 72%; }
.sc-skeleton--chat .sc-skeleton:nth-child(2n) { align-self: flex-end; width: 58%; }


/* =========================================================================
 * 11 · Calendario mensile (ui.md §5.4)
 * ========================================================================= */

.sc-cal { display: flex; flex-direction: column; gap: var(--s-3); }

.sc-cal__nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
/* Nella barra il campo anno e' un campo compatto, non una riga di modulo: la griglia
   `140px 1fr` del §5.14 staccava l'etichetta "Anno" dalla sua select di un palmo e
   allargava la select fino al bordo della pagina. */
.sc-cal__nav form { display: flex; align-items: center; gap: var(--s-2); margin-left: var(--s-5); }
.sc-cal__nav .sc-field--inline { grid-template-columns: auto auto; align-items: center; gap: var(--s-2); }
.sc-cal__nav .sc-select { width: auto; min-width: 10ch; }
/* Tre gruppi, non una fila unica: il mese, l'anno, la vista. */
.sc-cal__nav .sc-actions { margin-left: var(--s-5); }
@media (max-width: 639px) {
  .sc-cal__nav form, .sc-cal__nav .sc-actions { margin-left: 0; }
}
.sc-cal__month {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

/* La barra azioni PED: sticky sotto le tab, e non esiste se il mese non interseca
   nessun piano. Un contenitore vuoto sarebbe peggio dell'assenza. */
.sc-cal__actions {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-2);
  border: var(--bw) solid var(--line);
}
.sc-cal__actions + .sc-cal__actions { border-top: 0; }
.sc-cal__actions-name { font-weight: var(--fw-medium); }
.sc-cal__actions-cta { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
@media (max-width: 639px) { .sc-cal__actions-cta { margin-left: 0; width: 100%; } }

.sc-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bw);
}
.sc-cal__weekdays span {
  padding: var(--s-1) var(--s-2);
  color: var(--muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sc-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bw);
  background: var(--line-soft);
  border: var(--bw) solid var(--line);
}

.sc-cal-cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  /* 44 px e' il bersaglio minimo di tocco, e a 375 px e' anche l'altezza della cella */
  min-height: var(--tap);
  padding: var(--s-1);
  background: var(--bg-2);
  border: 2px solid transparent;
  text-align: left;
  transition: background var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
@media (min-width: 900px) { .sc-cal-cell { min-height: 104px; padding: var(--s-2); gap: var(--s-1); } }

.sc-cal-cell:hover, .sc-cal-cell.is-hover { background: var(--bg-3); }
.sc-cal-cell.is-today { border-color: var(--text); }
.sc-cal-cell.is-selected { border-color: var(--c-primary); border-width: var(--bw-2); }
/* Una regola sola per il fuori mese: erano tre dichiarazioni in fila, due delle quali si
   contraddicevano sul fondo, e la prima lasciava --faint come colore di testo della cella
   (QA L2 aveva corretto il numero e non la cella). */
.sc-cal-cell.is-outside { background: var(--shade); color: var(--muted); }
.sc-cal-cell[aria-disabled="true"], .sc-cal-cell:disabled { color: var(--muted); opacity: .7; cursor: not-allowed; background: var(--bg); }

.sc-cal-cell__num {
  align-self: flex-end;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Il fondo tinto segue lo status piu' basso dei contenuti visibili (states.md §8). */
.sc-cal-cell[data-status-min="bozza"] { background: var(--st-bozza-bg); }
.sc-cal-cell[data-status-min="in_review"] { background: var(--st-review-bg); }
.sc-cal-cell[data-status-min="modifiche_richieste"] { background: var(--st-modifiche-bg); }
.sc-cal-cell[data-status-min="approvato"] { background: var(--st-approvato-bg); }
/* Cella senza contenuti con una richiesta aperta: tutta viola (DEC-024). */
.sc-cal-cell[data-richiesta="aperta"][data-contenuti="0"] { background: var(--st-richiesta-bg); }

.sc-cal__dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }

.sc-cal-label {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  padding: 2px var(--s-1);
  background: var(--bg-2);
  border: var(--bw) solid var(--line-soft);
  color: var(--text);
  font-size: var(--fs-label);
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
}
.sc-cal-label:hover, .sc-cal-label.is-hover { border-color: var(--faint); text-decoration: none; }
/* L'etichetta con un contenuto suo e' cliccabile per se' (ACC-465): lo deve dire il
   cursore, e il focus da tastiera si deve vedere. */
.sc-cal-label[data-contenuto-id] { cursor: pointer; }
.sc-cal-label[data-contenuto-id]:hover .sc-cal-label__text { text-decoration: underline; }
.sc-cal-label[data-contenuto-id]:focus-visible { outline: var(--bw-2) solid var(--focus); outline-offset: 1px; }
.sc-cal-label__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-cal-label__unread { margin-left: auto; }
.sc-cal-label--richiesta { color: var(--st-richiesta); border-color: var(--st-richiesta); background: var(--st-richiesta-bg); }

.sc-cal__more { color: var(--muted); font-size: var(--fs-label); }

/* La legenda e' anche il filtro del mese (ui.md §2.3), e le regole che spengono quello che
   non passa stanno in fondo al foglio: valgono anche per il feed della pagina PED. */
@media (prefers-reduced-motion: no-preference) {
  .sc-cal-label, .sc-cal__day, .sc-cal__day-item { transition: opacity var(--dur-2) var(--ease-out); }
}

/* Sotto --bp-md la cella perde le etichette: numero e fino a tre pallini, poi "+N". */
@media (max-width: 899px) {
  .sc-cal--month .sc-cal-label { display: none; }
  .sc-cal--month .sc-cal-cell { align-items: center; justify-content: center; gap: 2px; }
  .sc-cal--month .sc-cal-cell__num { align-self: center; }
}

/* Vista elenco: i soli giorni con contenuti, raggruppati per settimana. E' la vista che
   risponde davvero alla domanda del cliente, e sotto --bp-xs e' il default. */
.sc-cal--list .sc-cal__weekdays, .sc-cal--list .sc-cal__grid { display: none; }
.sc-cal__list { display: flex; flex-direction: column; }
.sc-cal--month .sc-cal__list { display: none; }
.sc-cal__week { padding: var(--s-3) 0 var(--s-1); color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; }
.sc-cal__day {
  display: flex;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-2);
  border-bottom: var(--bw) solid var(--line-soft);
  text-align: left;
}
.sc-cal__day:hover, .sc-cal__day.is-hover { background: var(--shade); text-decoration: none; }
.sc-cal__day-date { flex: 0 0 56px; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.sc-cal__day-items { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.sc-cal__day-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); }

/* Il widget della dashboard: sola lettura, celle senza etichette. Quando la cella e' un
   link verso il giorno (spec §6.3) sotto --bp-md vale l'altezza minima di tocco: la
   larghezza a sette colonne su 375 px e' 43 px e piu' di cosi' non si puo', ma i 44 px in
   altezza li chiede docs/ui.md §2.7 ed e' quello che rende la cella toccabile. */
.sc-cal--widget .sc-cal-cell { min-height: 32px; padding: 2px; align-items: center; justify-content: center; }
@media (max-width: 899px) {
  .sc-cal--widget a.sc-cal-cell,
  .sc-cal--widget button.sc-cal-cell { min-height: var(--tap); }
}
.sc-cal--widget .sc-cal-label, .sc-cal--widget .sc-cal__more { display: none; }
.sc-cal--widget .sc-cal-cell__num { align-self: center; font-size: var(--fs-label); }

/* La forma dentro il date picker. */
.sc-cal--picker .sc-cal__grid { border: 0; background: transparent; gap: 2px; }
.sc-cal--picker .sc-cal-cell {
  min-height: var(--tap);
  align-items: center;
  justify-content: center;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .sc-cal--picker .sc-cal-cell { min-height: 36px; } }
.sc-cal--picker .sc-cal-cell__num { align-self: center; color: var(--text); font-size: var(--fs-body); }
.sc-cal--picker .sc-cal-cell.is-today { border-color: var(--faint); border-radius: var(--r-pill); }
.sc-cal--picker .sc-cal-cell.is-selected { background: var(--c-primary); border-color: transparent; }
.sc-cal--picker .sc-cal-cell.is-selected .sc-cal-cell__num { color: var(--c-on-primary); }
.sc-cal--picker .sc-cal-cell.is-inrange { background: var(--shade); }
/* Il numero del picker forza il colore del testo: un giorno disabilitato deve poterlo
   riprendere, altrimenti si spegne solo il cursore e non si vede. */
.sc-cal--picker .sc-cal-cell[aria-disabled="true"] .sc-cal-cell__num { color: var(--muted); opacity: .7; }


/* =========================================================================
 * 12 · Griglie feed (ui.md §5.8)
 * ========================================================================= */

/* min-width: 0, altrimenti dentro una colonna stretta il feed non si stringe: il minimo
   automatico di un elemento di griglia e' il suo min-content, e la fila del profilo con la
   maniglia lunga lo portava a 445 px in una colonna da 309, facendo scorrere la pagina. */
.sc-feed { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

.sc-feed__profile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3);
  border: var(--bw) solid var(--line);
  border-bottom: 0;
  background: var(--bg-2);
}
.sc-feed__profile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }

.sc-feed__grid { display: grid; }
.sc-feed--ig .sc-feed__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  background: var(--bg-2);
  border: var(--bw) solid var(--line);
}
.sc-feed--fb .sc-feed__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.sc-feed--stories .sc-feed__grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s-2); }

.sc-feed-cell {
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg-3);
  border: var(--bw-2) solid transparent;
  text-align: left;
  overflow: hidden;
}
.sc-feed-cell:hover, .sc-feed-cell.is-hover { border-color: var(--faint); text-decoration: none; }
.sc-feed-cell.is-selected, .sc-feed-cell[data-selected] { border-color: var(--text); }

.sc-feed-cell__media { position: relative; width: 100%; background: var(--bg-4); overflow: hidden; }
.sc-feed--ig .sc-feed-cell__media { aspect-ratio: 4 / 5; }
.sc-feed--fb .sc-feed-cell__media { aspect-ratio: 1.91 / 1; }
.sc-feed--stories .sc-feed-cell__media { aspect-ratio: 9 / 16; }
.sc-feed-cell__media img { width: 100%; height: 100%; object-fit: cover; }

/* Senza visual la cella non e' una casella rotta: dice tema, formato e soggetto. Con il visual resta solo la data (spec §6.6). */
.sc-feed-cell__meta--solo-data { padding: var(--s-1) var(--s-2); }
.sc-feed-cell__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2);
  font-size: var(--fs-label);
  color: var(--muted);
  line-height: 1.4;
}
.sc-feed-cell__meta b { color: var(--text); font-weight: var(--fw-medium); }
.sc-feed--fb .sc-feed-cell { display: grid; grid-template-columns: 120px minmax(0, 1fr); border: var(--bw) solid var(--line); }
.sc-feed--fb .sc-feed-cell__meta { padding: var(--s-3); font-size: var(--fs-small); }

.sc-feed-cell__status { position: absolute; right: var(--s-2); bottom: var(--s-2); }
.sc-feed-cell__unread { position: absolute; right: var(--s-2); top: var(--s-2); }
.sc-feed-cell__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
}
.sc-feed-cell__dur {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  padding: 0 var(--s-1);
  background: rgba(0,0,0,.66);
  color: #ffffff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sc-feed__daygroup { display: flex; flex-direction: column; gap: var(--s-2); }
.sc-feed__daygroup-head {
  display: flex; align-items: baseline; gap: var(--s-2);
  color: var(--muted); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Il feed di riferimento sta sotto e si vede che non fa parte del piano. */
.sc-feed__reference { opacity: .45; }
.sc-feed__reference .sc-feed-cell { pointer-events: none; }

/* Sotto --bp-md la griglia diventa una striscia orizzontale con snap: si sceglie
   scorrendo, si legge sotto. Tre celle e mezza, cosi' si capisce che continua. */
@media (max-width: 899px) {
  .sc-feed--ig .sc-feed__grid,
  .sc-feed--stories .sc-feed__grid {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: var(--s-2);
  }
  .sc-feed--ig .sc-feed-cell,
  .sc-feed--stories .sc-feed-cell { flex: 0 0 28%; scroll-snap-align: start; }
  .sc-feed--fb .sc-feed-cell { grid-template-columns: minmax(0, 1fr); }
}


/* =========================================================================
 * 13 · Chat e messaggio (ui.md §5.7)
 * ========================================================================= */

.sc-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: var(--bw) solid var(--line);
  background: var(--bg-2);
}
.sc-chat--side { width: 100%; }
@media (min-width: 1200px) { .sc-chat--side { width: var(--chat-w); flex: 0 0 var(--chat-w); } }

.sc-chat__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line-soft);
}
.sc-chat__head h3 { flex: 1 1 auto; }
.sc-chat__read { color: var(--muted); font-size: var(--fs-label); }

.sc-chat__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sc-msg { display: flex; flex-direction: column; gap: var(--s-1); max-width: 88%; padding: var(--s-2) var(--s-3); }
/* I due lati si distinguono per tre segnali insieme: allineamento, fondo ed etichetta.
   Mai il solo colore. */
.sc-msg--other { align-self: flex-start; background: var(--bg-3); }
.sc-msg--self { align-self: flex-end; background: var(--shade); border: var(--bw) solid var(--line); }
.sc-msg__author { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-label); font-weight: var(--fw-medium); }
.sc-msg__time { color: var(--muted); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.sc-msg__text { font-size: var(--fs-body); text-wrap: pretty; }
.sc-msg.is-sending { opacity: .6; }
.sc-msg.is-failed { border: var(--bw) solid var(--err); }
.sc-msg__retry { color: var(--err); font-size: var(--fs-small); }

.sc-chat__composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: var(--bw) solid var(--line-soft);
}
.sc-chat__composer .sc-actions { justify-content: flex-end; }

.sc-chat--readonly .sc-chat__composer { display: none; }
.sc-chat--readonly { border-style: dashed; }
.sc-chat--inline { border: 0; background: transparent; }
.sc-chat--inline .sc-chat__list { padding: 0; gap: var(--s-2); }
.sc-chat--inline .sc-chat__head { padding: 0 0 var(--s-2); }


/* =========================================================================
 * 14 · Uploader (ui.md §5.9)
 * ========================================================================= */

.sc-upload { display: flex; flex-direction: column; gap: var(--s-4); }
.sc-upload__head { display: flex; align-items: baseline; gap: var(--s-2); }
.sc-upload__count { margin-left: auto; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

.sc-upload__dropzone {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3);
  border: var(--bw) dashed var(--line);
  color: var(--muted);
  font-size: var(--fs-small);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
/* Il bottone del campo file resta quello nativo, ma vestito come una secondaria: il grigio
   di sistema su fondo nero era l'unico controllo dell'applicazione con un'altra identita',
   e si vedeva su cinque schermate (Anagrafica, Piattaforme, visual, due popup report). */
.sc-upload__dropzone::file-selector-button {
  margin-right: var(--s-3);
  min-height: 32px;
  padding: 0 var(--s-3);
  background: var(--bg-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.sc-upload__dropzone:not(:disabled)::file-selector-button:hover { background: var(--bg-4); border-color: var(--faint); }
.sc-upload__dropzone:disabled { opacity: .55; cursor: not-allowed; }
.sc-upload__dropzone.is-dragover { border-color: var(--c-primary); background: var(--shade); }

.sc-upload__group { display: flex; flex-direction: column; gap: var(--s-2); }
.sc-upload__group-label { color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; }

/* base mobile: la striscia scorre in verticale come lista */
.sc-upload__strip { display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 640px) {
  .sc-upload__strip { flex-direction: row; flex-wrap: wrap; gap: var(--s-3); }
  .sc-upload-card, .sc-upload__add { width: 132px; }
}

.sc-upload-card {
  position: relative;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--bg-3);
  border: var(--bw) solid var(--line);
}
@media (min-width: 640px) { .sc-upload-card { flex-direction: column; } }
.sc-upload-card.is-error { border-color: var(--err); }

.sc-upload-card__thumb {
  flex: 0 0 auto;
  width: 56px;
  aspect-ratio: 1;
  background: var(--bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-label);
  overflow: hidden;
}
@media (min-width: 640px) { .sc-upload-card__thumb { width: 100%; aspect-ratio: 4 / 5; } }
.sc-upload-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.sc-upload-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.sc-upload-card__name {
  font-size: var(--fs-label);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
.sc-upload-card__err { font-size: var(--fs-label); color: var(--err); }
.sc-upload-card__remove { position: absolute; right: 0; top: 0; width: 32px; min-width: 32px; min-height: 32px; }
.sc-upload-card__handle { cursor: grab; color: var(--muted); align-self: flex-start; min-height: 32px; width: 32px; min-width: 32px; }
.sc-upload-card__handle:active { cursor: grabbing; }
.sc-upload-card.is-dragging { opacity: .5; }

.sc-upload-card__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: var(--c-primary);
  transition: width var(--dur-2) linear;
}

.sc-upload__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-3);
  border: var(--bw) dashed var(--line);
  color: var(--muted);
}
@media (min-width: 640px) { .sc-upload__add { aspect-ratio: 4 / 5; min-height: 0; } }
.sc-upload__add:hover, .sc-upload__add.is-hover { border-color: var(--faint); color: var(--text); }

.sc-upload__rules { color: var(--muted); font-size: var(--fs-label); }
.sc-upload__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-4);
  border: var(--bw) dashed var(--line);
  text-align: center;
}


/* =========================================================================
 * 15 · Card cliente (ui.md §5.2)
 * ========================================================================= */

/* grid-auto-rows: 1fr, cosi' tutte le righe misurano uguale: la card "nuovo cliente" stava
   da sola sulla seconda riga ed era alta 200 px contro i 257 delle altre. */
.sc-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: var(--s-4); }

.sc-client-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: var(--bw) solid var(--line);
  transition: border-color var(--dur-1) var(--ease-out);
}
.sc-client-card:hover, .sc-client-card.is-hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.sc-client-card__link { display: block; }
.sc-client-card__link:hover { text-decoration: none; }

/* Il blocco posizionato della card: e' lui a fare da riferimento a badge e ingranaggio,
   che con la card come ancora finivano sopra la riga del nome. */
.sc-client-card__cover { position: relative; }
.sc-client-card__body { display: flex; align-items: center; gap: var(--s-2); }
.sc-client-card__media {
  display: flex;
  aspect-ratio: 16 / 10;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.sc-client-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* L'ingranaggio si vede sempre e non solo in hover: su touch l'hover non esiste. */
.sc-client-card__settings {
  position: absolute;
  right: var(--s-2);
  bottom: var(--s-2);
  background: var(--bg-2);
  border: var(--bw) solid var(--line);
  width: 36px; min-width: 36px; min-height: 36px;
}
.sc-client-card__name { flex: 1 1 auto; min-width: 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-h3); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-client-card__badge { position: absolute; right: var(--s-2); top: var(--s-2); }

/* La card "nuovo cliente" tiene l'anatomia delle sorelle (copertina piu' nome) e quindi la
   loro misura: con align-items: center la copertina si stringeva al contenuto, l'aspect
   ratio si calcolava su nulla e la card crollava al suo min-height. */
.sc-client-card--new { border-style: dashed; color: var(--muted); }
.sc-client-card--new .sc-client-card__media { background: transparent; font-size: var(--fs-h1); font-weight: var(--fw-regular); }
.sc-client-card--new:hover, .sc-client-card--new.is-hover { color: var(--text); }
.sc-client-card--inactive .sc-client-card__media { filter: grayscale(1); opacity: .6; }


/* =========================================================================
 * 16 · Centro notifiche (ui.md §5.3)
 * ========================================================================= */

.sc-notify { display: flex; flex-direction: column; min-width: 0; background: var(--bg-2); border: var(--bw) solid var(--line); }
/* L'intestazione manda a capo: a 375 px titolo e testo di servizio su una riga sola
   davano al pannello un min-content di 494 px, e la pagina scorreva di lato (ui.md §2.7). */
.sc-notify__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line-soft); }
.sc-notify__head > :is(h1, h2, h3) { flex: 1 1 auto; min-width: 0; }
.sc-notify__head > p { flex: 1 1 100%; min-width: 0; margin: 0; }
/* min-width: 0 e' cio' che accende davvero overflow-x su un figlio flex: senza, la fila
   di filtri impone la propria larghezza al pannello invece di scorrere. */
/* align-items: center, altrimenti "applica i filtri" si stira a tutta l'altezza della fila
   (44 px) mentre le select ne misurano 40, e i tre controlli hanno tre altezze diverse. */
.sc-notify__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-4); border-bottom: var(--bw) solid var(--line-soft); } /* QA L6 */
.sc-notify__filters::-webkit-scrollbar { display: none; }
/* La fila scorre, quindi i campi NON si stringono: schiacciati dentro un pannello da 280 px
   le due select diventavano larghe due caratteri e la casella andava a capo tre volte
   (ACC-764). Qui ognuno tiene la sua misura e si scorre di lato, come chiede ui.md §5.3. */
.sc-notify__filters > * { flex: 0 0 auto; }
.sc-notify__filters .sc-field--inline { grid-template-columns: auto auto; align-items: center; gap: var(--s-2); }
.sc-notify__filters .sc-select { min-width: 12ch; }
.sc-notify__filters .sc-check { align-items: center; white-space: nowrap; }
.sc-notify__list { display: flex; flex-direction: column; overflow-y: auto; max-height: 560px; }
.sc-notify__foot { padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--line-soft); }

.sc-notify-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-bottom: var(--bw) solid var(--line-soft);
  transition: background var(--dur-1) var(--ease-out);
}
.sc-notify-item:hover, .sc-notify-item.is-hover { background: var(--shade); }
/* La riga non letta ha fondo E punto: la barra dell'urgenza da sola e' colore puro. */
.sc-notify-item[data-letta="0"] { background: var(--shade); }
.sc-notify-item__rail { flex: 0 0 4px; align-self: stretch; background: var(--muted); }
.sc-notify-item[data-urgenza="alta"] .sc-notify-item__rail { background: var(--err); }
.sc-notify-item[data-urgenza="media"] .sc-notify-item__rail { background: var(--warn-fill); }
.sc-notify-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-notify-item__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.sc-notify-item__title a:hover { text-decoration: underline; }
.sc-notify-item__desc { color: var(--muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-notify-item__time { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
/* Dismettere e' un'azione come le altre: sotto --bp-md vale il bersaglio pieno, sopra
   resta la crocetta discreta accanto alla riga (ui.md §2.7). */
.sc-notify-item__dismiss { flex: 0 0 auto; width: var(--tap); min-width: var(--tap); min-height: var(--tap); }
@media (min-width: 900px) {
  .sc-notify-item__dismiss { width: 32px; min-width: 32px; min-height: 32px; }
}
.sc-notify-item.is-leaving { opacity: 0; transition: opacity var(--dur-2) var(--ease-in); }
/* Notifica orfana: resta il testo, sparisce il link, compare il motivo. */
.sc-notify-item--orphan { cursor: default; }
.sc-notify-item--orphan .sc-notify-item__title { color: var(--muted); font-weight: var(--fw-regular); }
.sc-notify__undo { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line-soft); font-size: var(--fs-small); color: var(--muted); }

.sc-notify--popover {
  position: fixed;
  inset: 56px 0 0 0;
  z-index: var(--z-dropdown);
  border: 0;
  border-top: var(--bw) solid var(--line);
}
.sc-notify--popover .sc-notify__list { max-height: none; flex: 1 1 auto; }
.sc-notify--page .sc-notify__list { max-height: none; }

/* Una pillola di filtro. Serve al centro notifiche e all'archivio. */
.sc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 32px;
  padding: 0 var(--s-3);
  border: var(--bw) solid var(--line);
  color: var(--muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.sc-pill:hover, .sc-pill.is-hover { border-color: var(--faint); color: var(--text); text-decoration: none; }
.sc-pill[aria-pressed="true"] { background: var(--bg-3); border-color: var(--text); color: var(--text); }


/* =========================================================================
 * 17 · Date picker (ui.md §5.15)
 * ========================================================================= */

.sc-datepicker { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }
.sc-datepicker__input { padding-right: var(--s-10); }
.sc-datepicker__icon {
  position: absolute;
  right: 0; bottom: 0;
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  pointer-events: none;
}

/* Il popover: sotto --bp-sm e' un foglio dal basso a piena larghezza. */
.sc-datepicker__pop {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-dropdown);
  padding: var(--s-4);
  background: var(--bg-2);
  border-top: var(--bw) solid var(--line);
  box-shadow: var(--e2);
}
.sc-datepicker__pop[hidden] { display: none; }
@media (min-width: 640px) {
  .sc-datepicker__pop {
    position: absolute;
    inset: calc(100% + var(--s-1)) auto auto 0;
    width: 320px;
    border: var(--bw) solid var(--line);
    box-shadow: var(--e1);
  }
}
.sc-datepicker__shortcuts { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-3); border-top: var(--bw) solid var(--line-soft); margin-top: var(--s-3); }
.sc-datepicker__range { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .sc-datepicker__range { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* =========================================================================
 * 18 · Legenda (ui.md §5.17)
 * ========================================================================= */

.sc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.sc-legend__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sc-legend__group + .sc-legend__group {
  padding-left: var(--s-3);
  border-left: var(--bw) solid var(--line);
}
.sc-legend__group-label { color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; }
.sc-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-2);
  border: var(--bw) solid transparent;
  color: var(--muted);
  font-size: var(--fs-label);
}
.sc-legend__item:hover, .sc-legend__item.is-hover { border-color: var(--line); color: var(--text); text-decoration: none; }
.sc-legend__item[aria-pressed="true"] { border-color: var(--text); background: var(--bg-3); color: var(--text); }
/* "mostra tutto" e' l'ultima voce della legenda, non un elemento della barra: con
   margin-left: auto restava sospeso a 280 px dalla voce precedente. */
.sc-legend__reset { margin-inline-start: var(--s-3); }
/* La legenda e' anche il filtro (ui.md §2.3): sotto --bp-md le sue voci sono bottoni veri
   e valgono i 44 px come tutto il resto. I 32 px restano la forma da mouse. */
@media (max-width: 899px) {
  button.sc-legend__item, a.sc-legend__item { min-height: var(--tap); padding-inline: var(--s-3); }
}

/* Sotto --bp-md la legenda e' un accordion chiuso di default. */
.sc-legend--compact { display: block; border: var(--bw) solid var(--line); }
.sc-legend--compact > summary { min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--s-3); color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.sc-legend--compact .sc-legend { padding: 0 var(--s-3) var(--s-3); }
/* Sopra --bp-md l'accordion sparisce e resta la fila: il riassunto e la cornice servivano
   solo a comprimere sei voci su un telefono. Chi apre e' lo script della schermata. */
@media (min-width: 900px) {
  .sc-legend--compact { border: 0; }
  .sc-legend--compact > summary { display: none; }
  .sc-legend--compact .sc-legend { padding: 0; }
}


/* =========================================================================
 * 19 · Componenti minori, ma comuni (ui.md §5.20)
 * ========================================================================= */

/* banner: avviso in testa a una pagina o a un popup */
.sc-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--line);
  border-left: 3px solid var(--muted);
  background: var(--bg-2);
  font-size: var(--fs-small);
}
.sc-banner--info { border-left-color: var(--focus); }
.sc-banner--warn { border-left-color: var(--warn-fill); background: var(--warn-bg); }
.sc-banner--danger { border-left-color: var(--err); background: var(--err-bg); }
.sc-banner__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.sc-banner__title { font-weight: var(--fw-medium); }
.sc-banner__actions { flex: 0 0 auto; display: flex; gap: var(--s-2); }
@media (max-width: 639px) { .sc-banner { flex-wrap: wrap; } }

.sc-divider { border: 0; border-top: var(--bw) solid var(--line-soft); }
.sc-divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sc-divider--labeled::before, .sc-divider--labeled::after { content: ""; flex: 1 1 auto; border-top: var(--bw) solid var(--line-soft); }

.sc-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); color: var(--muted); font-size: var(--fs-small); }
.sc-meta__item { display: inline-flex; align-items: center; gap: var(--s-1); }

.sc-tooltip { position: relative; display: inline-flex; }
.sc-tooltip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--s-2));
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: 240px;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-4);
  border: var(--bw) solid var(--line);
  color: var(--text);
  font-size: var(--fs-label);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-1) var(--ease-out), visibility var(--dur-1);
  pointer-events: none;
}
.sc-tooltip:hover .sc-tooltip__bubble,
.sc-tooltip:focus-within .sc-tooltip__bubble,
.sc-tooltip.is-hover .sc-tooltip__bubble { opacity: 1; visibility: visible; }

.sc-progress { height: 4px; background: var(--bg-3); overflow: hidden; }
.sc-progress__bar { height: 100%; background: var(--c-primary); transition: width var(--dur-2) linear; }
.sc-progress--indeterminate .sc-progress__bar { width: 40%; animation: sc-slide 1200ms var(--ease-out) infinite; }
@keyframes sc-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .sc-progress--indeterminate .sc-progress__bar { animation-duration: 2400ms; } }

.sc-count { display: inline-flex; align-items: baseline; gap: var(--s-1); font-variant-numeric: tabular-nums; }
.sc-count__n { font-weight: var(--fw-medium); }
.sc-count__label { color: var(--muted); font-size: var(--fs-small); }

.sc-embed { position: relative; min-height: 320px; border: var(--bw) solid var(--line); background: var(--bg-3); }
.sc-embed iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.sc-embed__fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); min-height: 320px; padding: var(--s-6); text-align: center; }

/* Il diff dello storico: fondo tinto PIU' segno, mai il solo colore. */
.sc-diff { display: grid; gap: var(--s-3); font-family: var(--mono); font-size: var(--fs-small); }
@media (min-width: 900px) { .sc-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-diff__col { display: flex; flex-direction: column; gap: 2px; }
.sc-diff__label { color: var(--muted); font-family: var(--sans); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; }
.sc-diff__line { padding: 2px var(--s-2); }
.sc-diff__line--add { background: var(--st-approvato-bg); color: var(--st-approvato); }
.sc-diff__line--add::before { content: "+ "; }
.sc-diff__line--del { background: var(--unread-bg); color: var(--unread); }
.sc-diff__line--del::before { content: "- "; }

/* Il pannello, il contenitore piu' usato di tutti: e' quello che porta il salto di
   superficie, che su fondo scuro fa l'elevazione meglio di un'ombra. */
.sc-panel { background: var(--bg-2); border: var(--bw) solid var(--line); padding: var(--s-4); }
@media (min-width: 900px) { .sc-panel { padding: var(--s-6); } }
/* Va a capo: su un pannello stretto una pillola di stato con `white-space: nowrap` accanto
   a un'etichetta canonica lunga spingeva fuori uno dei due. */
.sc-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.sc-panel__head h2, .sc-panel__head h3 { flex: 1 1 auto; }

.sc-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-6); }
.sc-page-head__titles { flex: 1 1 320px; min-width: 0; }
/* La riga di risalita sopra il titolo: da dove si viene, e come si torna indietro. Stava
   solo nel foglio del modulo clienti (`cl-briciole`), e le altre pagine profonde mettevano
   il "torna indietro" in linea PRIMA della h1, che cosi' partiva 77 px piu' a destra del
   resto della pagina. Sopra il titolo, il titolo torna sul filo della colonna. */
.sc-page-head__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); color: var(--muted); font-size: var(--fs-small); }
.sc-page-head__crumbs a { color: inherit; }
.sc-page-head__crumbs a:hover { color: var(--text); }
/* Sul telefono la risalita e' un bersaglio da toccare, non una parola da leggere: cresce
   fino a --tap senza aprire spazio intorno (padding piu' margine negativo). */
@media (max-width: 899px) {
  .sc-page-head__crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-block: var(--s-3);
    margin-block: calc(var(--s-3) * -1);
  }
}
.sc-page-head__sub { color: var(--muted); font-size: var(--fs-small); }
/* Le azioni della testata stanno a destra del titolo e sulla stessa linea del suo blocco. */
.sc-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-inline-start: auto; }

/* La maniglia di trascinamento: sei punti, ed e' anche un pulsante con la tastiera.
   Il drag da solo non basta mai. */
.sc-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon);
  min-width: var(--icon);
  min-height: var(--icon);
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}
.sc-handle:hover, .sc-handle.is-hover { color: var(--text); }
.sc-handle:active { cursor: grabbing; }
[data-riordina] > .is-dragging { opacity: .5; }
[data-riordina] > * { transition: transform var(--dur-2) var(--ease-out); }


/* =========================================================================
 * 20 · Il telaio della kitchen sink (ui.md §6.4)
 *
 * Non e' prodotto: veste la sola pagina /ui, che e' la vetrina della libreria e il
 * test di non regressione visiva. Sta qui e non in un file suo perche' la libreria
 * vive in due fogli e non in tre (ui.md §6.1), e perche' un template non scrive CSS.
 * Prefisso `sc-ks-`, cosi' si vede a colpo d'occhio che cosa non entra in una
 * schermata di prodotto.
 * ========================================================================= */

.sc-ks { padding-bottom: var(--s-20); }

.sc-ks__bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border-bottom: var(--bw) solid var(--line);
}
.sc-ks__bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sc-ks__bar-label {
  color: var(--muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sc-ks__bar-hex { width: 128px; min-height: 32px; font-family: var(--mono); }

.sc-ks__index {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--bg-2);
  border-bottom: var(--bw) solid var(--line-soft);
}
.sc-ks__index::-webkit-scrollbar { display: none; }
.sc-ks__index a {
  flex: 0 0 auto;
  padding: var(--s-1) var(--s-2);
  color: var(--muted);
  font-size: var(--fs-label);
  white-space: nowrap;
}
.sc-ks__index a:hover { color: var(--text); background: var(--shade); text-decoration: none; }

.sc-ks__body { max-width: var(--content-max); margin-inline: auto; padding: 0 var(--s-4); }

.sc-ks__lede { padding: var(--s-10) 0 0; }
.sc-ks__lede p { max-width: var(--measure); color: var(--muted); margin-top: var(--s-3); }

.sc-ks__section {
  padding-block: var(--s-10);
  border-top: var(--bw) solid var(--line-soft);
  scroll-margin-top: 104px;
}
.sc-ks__section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.sc-ks__section-head h2 { flex: 1 1 auto; }
.sc-ks__ref { color: var(--muted); font-size: var(--fs-label); font-family: var(--mono); }
.sc-ks__note { max-width: var(--measure); margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-small); }

.sc-ks__sub {
  margin: var(--s-8) 0 var(--s-3);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sc-ks__demo {
  padding: var(--s-4);
  background: var(--bg);
  border: var(--bw) solid var(--line);
}
.sc-ks__demo--flush { padding: 0; }
/* Il popover del date picker e' assoluto: senza un fondo alto abbastanza copre la sezione
   che viene dopo, e la kitchen sink mente su come sta in pagina. */
.sc-ks__demo--tall { min-height: 470px; }

/* Gli stati affiancati, ognuno con la sua etichetta: e' il modo di vedere in un colpo
   che «disabilitato» e «in caricamento» non sono lo stesso grigio. */
.sc-ks__states { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-start; }
/* Il focus non si puo' mettere in posa da fermo: qui si disegna a mano, come `.is-hover`,
   e sono gli unici due stati forzati di tutta la pagina. */
.sc-ks [data-ks-focus] { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-ks__state { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.sc-ks__state-label { color: var(--muted); font-size: var(--fs-label); font-family: var(--mono); }

.sc-ks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.sc-ks__two { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .sc-ks__two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sc-ks__code { margin-top: var(--s-2); }
.sc-ks__code > summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.sc-ks__code > summary:hover { color: var(--text); }
.sc-ks__code pre {
  overflow-x: auto;
  padding: var(--s-3);
  background: var(--bg-3);
  border: var(--bw) solid var(--line-soft);
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: 1.5;
  tab-size: 2;
}

/* I campioni di token: il rapporto di contrasto lo calcola la pagina, cosi' se qualcuno
   cambia un valore il numero cambia con lui e la bugia dura zero. */
.sc-ks__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.sc-ks__swatch { display: flex; flex-direction: column; gap: var(--s-1); }
.sc-ks__chip {
  display: flex;
  align-items: flex-end;
  min-height: 64px;
  padding: var(--s-2);
  border: var(--bw) solid var(--line);
  font-size: var(--fs-label);
}
.sc-ks__swatch-name { font-family: var(--mono); font-size: var(--fs-label); }
.sc-ks__swatch-meta { display: flex; gap: var(--s-2); color: var(--muted); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.sc-ks__pass { color: var(--ok); }
.sc-ks__fail { color: var(--err); }

.sc-ks__scale { display: flex; flex-direction: column; gap: var(--s-4); }
.sc-ks__scale-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4); }
.sc-ks__scale-row > .sc-ks__state-label { flex: 0 0 96px; }

.sc-ks__space { display: flex; flex-direction: column; gap: var(--s-2); }
.sc-ks__space-row { display: flex; align-items: center; gap: var(--s-3); }
.sc-ks__space-row > .sc-ks__state-label { flex: 0 0 96px; }
.sc-ks__space-bar { height: 12px; background: var(--c-primary); }

/* Il mobile si guarda dentro un iframe da 375 px, non aprendo gli strumenti da
   sviluppatore: e' l'unico modo perche' qualcuno lo guardi davvero. */
.sc-ks__frames { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.sc-ks__frame { display: flex; flex-direction: column; gap: var(--s-2); }
.sc-ks__frame iframe {
  width: 375px;
  max-width: 100%;
  height: 720px;
  background: var(--bg);
  border: var(--bw) solid var(--line);
}
.sc-ks__frame--wide { flex: 1 1 100%; }
.sc-ks__frame--wide iframe { width: 100%; height: 640px; }

.sc-ks__checklist { display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--measure); }
.sc-ks__checklist li { display: flex; gap: var(--s-3); font-size: var(--fs-small); }
.sc-ks__checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 3px;
  border: var(--bw) solid var(--faint);
}

.sc-ks__matrix { display: grid; gap: var(--s-4); }
.sc-ks__matrix-out { padding: var(--s-4); background: var(--bg-2); border: var(--bw) solid var(--line); }
.sc-ks__cta[hidden] { display: none; }

/* QA L5 e L6: intestazione allineata a destra; nella variante popover i filtri scorrono in una riga */
.sc-table__cell--end, .sc-table__head th.sc-table__cell--end { text-align: right; }
.sc-notify__filters .sc-field--inline { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2); }
.sc-notify--popover .sc-notify__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sc-notify--popover .sc-notify__filters > * { flex: 0 0 auto; }

/* =========================================================================
 * QA rifiniture · legenda che filtra, conferma compatta, maniglia del foglio
 * ========================================================================= */

/* ui.md §2.3: la legenda e' la stessa in fondo al calendario e nella pagina PED, quindi
   anche il filtro e' lo stesso. Quello che non passa resta al suo posto, spento:
   nascondere le celle cambierebbe la forma del mese e quella della griglia, che e' la sola
   cosa che il calendario e il feed devono dire sempre. */
[data-filtro] .is-filtered { opacity: .22; }
[data-filtro] .sc-cal-cell.is-filtered,
[data-filtro] .sc-feed-cell.is-filtered { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .sc-feed-cell, .sc-feed__daygroup { transition: opacity var(--dur-2) var(--ease-out); }
}

/* ui.md §5.6, variante `--confirm`: la conferma a un clic con elenco (invio in review di
   massa, approva tutto, elimina). Piu' stretta della misura di default, perche' non ci sono
   campi da compilare, ma piu' larga di `--sm`, perche' la riga dell'elenco porta data ed
   etichetta canonica. Qui l'elenco e' l'informazione, non un dettaglio: puo' prendersi
   quasi meta' dell'altezza del popup invece dei 240 px del caso generale. */
.sc-modal--confirm { width: min(440px, 92vw); }
.sc-modal--confirm .sc-modal__list { max-height: 44dvh; }

/* ui.md §5.5 e §3.7: la maniglia del foglio dal basso si trascina, quindi vuole il
   bersaglio di --tap. La barra resta di 4 px, perche' e' un segno e non un bottone: a
   prendersi i 44 px e' l'area attorno, che e' quella che riceve il dito. */
.sc-sheet__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--tap);
  margin: 0;
  background: none;
  border-radius: 0;
  touch-action: none;
}
.sc-sheet__handle::before {
  content: "";
  width: 44px;
  height: 4px;
  background: var(--faint);
  border-radius: var(--r-pill);
}
/* Durante il trascinamento il pannello segue il dito: niente animazione di apertura che
   si rimetta in mezzo, e niente scroll della pagina sotto. */
.sc-sheet__panel.is-dragging { animation: none; transition: none; }