/* SEM The Rope · la libreria componenti (dal kernel di Social, token e componenti di Inside).
 *
 * 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-fill); 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); }
/* «Qualcosa aspetta te»: i ritocchi da approvare accanto a uno status che da solo direbbe
   «approvato» (rilascio 1.1). Stessa coppia di colori di sc-status--review, gia' misurata
   nei due temi; il bordo lo tiene leggibile dove lo sfondo degli stati e' trasparente (stampa,
   contrasto forzato). Porta SEMPRE un testo («2 da approvare»), mai un numero da solo: per
   questo e' un blocco in linea che sta su una riga e, dove proprio non c'e' spazio, si tronca
   coi puntini invece di uscire dal suo bordo (il testo intero resta nel titolo e per lo
   screen reader). */
.sc-badge--warn {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  line-height: 18px;
  vertical-align: middle;
  background: var(--st-review-bg);
  color: var(--st-review);
  border: var(--bw) solid currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.sc-badge--warn { text-decoration: none; }
a.sc-badge--warn:hover, a.sc-badge--warn:focus-visible { text-decoration: underline; }

.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; }
.sc-avatar--marchio img { object-fit: contain; width: 84%; height: auto; }


/* =========================================================================
 * 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;
  /* I toast stanno IN ALTO (dal rilascio 1.1). In basso coprivano per qualche secondo proprio i
     comandi con cui si lavora: il bottone in fondo al form sul telefono, le azioni di riga a
     destra e la barra delle azioni fissa sul desktop (collaudo delle azioni, R4; tre revisori
     su quattro). In alto, sotto la barra, c'e' il titolo della pagina, che non si clicca.
     Telefono: a tutta larghezza sotto la barra in alto. */
  inset: calc(56px + var(--s-2) + env(safe-area-inset-top)) var(--s-4) auto var(--s-4);
}
@media (min-width: 640px) {
  /* desktop: in alto al centro dell'area di lavoro, lontano dalle azioni di pagina (a destra)
     e dalla barra laterale (a sinistra) */
  .sc-toasts { inset: var(--s-4) auto auto 50%; transform: translateX(-50%); width: min(420px, 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; }
/* L'etichetta con dei ritocchi da approvare (rilascio 1.1): il badge «N da approvare» va a capo
   sotto il nome, perche' in una riga della cella non ci sta accanto a «su N». Il nome prende
   lo spazio che resta e si tronca come sempre; il filtro della legenda spegne tutto insieme.
   Vale anche per la voce della vista elenco (sc-cal__day-item), che sul telefono e' il mese. */
.sc-cal-label[data-attesa], .sc-cal__day-item[data-attesa] { flex-wrap: wrap; row-gap: 2px; }
.sc-cal-label[data-attesa] .sc-cal-label__text { flex: 1 1 0; }
.sc-cal-label[data-attesa]::after, .sc-cal__day-item[data-attesa]::after { content: ''; flex-basis: 100%; height: 0; order: 8; }
.sc-cal-label[data-attesa] .sc-badge--warn, .sc-cal__day-item[data-attesa] .sc-badge--warn { order: 9; flex: 0 1 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-fill); 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-cell__meta span { white-space: normal; overflow-wrap: anywhere; }
/* Il badge «N da approvare» nella cella del feed (rilascio 1.1): largo quanto il suo testo,
   col margine stretto perche' la cella e' stretta. Sul telefono la cella e' piu' stretta del
   testo: li' va a capo su due righe invece di troncarsi, perche' «1 da app...» non dice niente. */
.sc-feed-cell__meta .sc-badge--warn { align-self: flex-start; height: auto; padding: 1px var(--s-1); white-space: normal; line-height: 1.3; border-radius: 10px; }
.sc-feed-cell__meta .sc-badge--warn span { overflow-wrap: normal; }
.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%; }

.sc-chat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line);
}
.sc-chat__head h3 { flex: 0 0 auto; font-size: var(--fs-h3); }
.sc-chat__titolo { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); min-width: 0; }
.sc-chat__conto { color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.sc-chat__filtri { display: inline-flex; border: var(--bw) solid var(--line); }
.sc-chat__filtro { min-height: 32px; padding: 0 var(--s-3); background: none; border: 0; color: var(--muted); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.sc-chat__filtro + .sc-chat__filtro { border-left: var(--bw) solid var(--line); }
.sc-chat__filtro:hover { background: var(--shade); color: var(--text); }
.sc-chat__filtro[aria-pressed="true"] { background: var(--bg-4); color: var(--text); font-weight: var(--fw-medium); }
.sc-chat__read { color: var(--muted); font-size: var(--fs-label); text-align: right; }

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

/* Un thread: la testa, le risposte un livello sotto, le azioni. Si legge come un documento
   commentato, non come una chat: niente bolle, niente allineamento a destra. */
.sc-thread { display: flex; flex-direction: column; gap: var(--s-3); }
.sc-thread[hidden], .sc-fatto[hidden] { display: none; }
.sc-thread__risposte { display: flex; flex-direction: column; gap: var(--s-3); margin-left: 15px; padding-left: var(--s-4); border-left: var(--bw-2) solid var(--line); }
.sc-thread__azioni { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-left: 44px; }
.sc-thread__azioni .sc-btn--link { min-height: 28px; font-size: var(--fs-small); color: var(--muted); }
.sc-thread__azioni .sc-btn--link:hover { color: var(--text); }
.sc-thread__piega {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
}
.sc-thread__piega::-webkit-details-marker { display: none; }
.sc-thread__piega:hover { background: var(--bg-4); }
.sc-thread__spunta { flex: none; color: var(--ok); font-weight: var(--fw-bold); }
.sc-thread__piega-testo { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.sc-thread__piega-testo b { font-weight: var(--fw-medium); }
.sc-thread__estratto { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.sc-thread[open] .sc-thread__estratto { display: none; }
.sc-thread__conto { flex: none; color: var(--muted); font-size: var(--fs-label); }
.sc-thread.is-risolto[open] { gap: var(--s-3); }
.sc-thread.is-risolto[open] > .sc-thread__piega { margin-bottom: var(--s-3); }

/* Un intervento: avatar a sinistra, poi chi, per chi, quando, e il testo in grande. Il filetto
   e la parola «Tu» dicono che e' mio: due segnali, mai il solo colore. */
.sc-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); scroll-margin: var(--s-3); }
.sc-msg__corpo { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.sc-msg--self .sc-msg__corpo { padding-left: var(--s-3); border-left: var(--bw-2) solid var(--c-primary-fill, var(--text)); }
.sc-msg__testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); }
.sc-msg__author { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.sc-msg__tu { margin-left: 2px; color: var(--muted); font-size: var(--fs-label); font-weight: var(--fw-regular); }
.sc-msg__org { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); flex-basis: 100%; order: 3; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-snug); }
.sc-msg__ruolo { font-weight: var(--fw-medium); }
.sc-msg__ruolo--agenzia { color: var(--violet); }
.sc-msg__ruolo--sede, .sc-msg__ruolo--cliente { color: var(--focus); }
.sc-msg__ruolo--area { color: var(--warn); }
.sc-msg__ruolo--centro { color: var(--ok); }
.sc-msg__time { margin-left: auto; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-msg__text { font-size: 16px; line-height: var(--lh-body); text-wrap: pretty; overflow-wrap: anywhere; }
.sc-msg__menzione { padding: 0 2px; background: var(--blue-bg); color: var(--focus); font-weight: var(--fw-medium); }
.sc-msg__rivolto { color: var(--muted); font-size: var(--fs-label); }
.sc-msg__unita { font-weight: var(--fw-regular); }
.sc-msg__rif {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--s-1) var(--s-2);
  background: var(--bg-3);
  border: 0;
  border-left: var(--bw-2) solid var(--warn-fill);
  color: inherit;
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
}
.sc-msg__rif:hover, .sc-msg__rif:focus-visible { background: var(--warn-bg); }
.sc-msg__rif-parte { color: var(--muted); font-size: var(--fs-label); font-weight: var(--fw-medium); }
.sc-msg__rif-frase { overflow-wrap: anywhere; }
.sc-msg.is-richiamato { background: var(--warn-bg); box-shadow: 0 0 0 var(--s-2) var(--warn-bg); transition: background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.sc-msg.is-sending { opacity: .6; }
.sc-msg.is-failed { outline: var(--bw) solid var(--err); }
.sc-msg__retry { color: var(--err); font-size: var(--fs-small); }

/* Il colore dell'avatar dice l'organizzazione; il nome accanto la dice a parole. */
.sc-avatar--agenzia { background: var(--violet-bg); color: var(--violet); }
.sc-avatar--sede, .sc-avatar--cliente { background: var(--blue-bg); color: var(--focus); }
.sc-avatar--area { background: var(--warn-bg); color: var(--warn); }
.sc-avatar--centro { background: var(--ok-bg); color: var(--ok); }

/* Un fatto di lavorazione: discreto, fra i thread, senza avatar. */
.sc-fatto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); padding-left: 44px; position: relative; color: var(--muted); font-size: var(--fs-small); }
.sc-fatto::before { content: ""; position: absolute; left: 12px; top: 8px; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--faint); }
.sc-fatto__testo { flex: 1 1 55%; }
.sc-fatto__time { font-size: var(--fs-label); font-variant-numeric: tabular-nums; white-space: nowrap; }

.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);
  background: var(--bg-2);
}
.sc-chat__composer .sc-field { position: relative; }
.sc-chat__composer .sc-textarea { font-size: var(--fs-body); }
.sc-chat__composer .sc-actions { justify-content: flex-end; }
.sc-chat__nota { color: var(--muted); font-size: var(--fs-small); }
.sc-chat__piede { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sc-chat__piede .sc-btn--primary { margin-left: auto; }
.sc-chat__contesto { display: flex; align-items: center; gap: var(--s-2); padding: 2px 2px 2px var(--s-2); background: var(--bg-3); border-left: var(--bw-2) solid var(--warn-fill); font-size: var(--fs-small); }
.sc-chat__contesto[hidden] { display: none; }
.sc-chat__contesto-testo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-chat__persone {
  position: absolute;
  z-index: var(--z-dropdown);
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: var(--s-1);
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-2);
  border: var(--bw) solid var(--line);
  box-shadow: var(--e2);
}
.sc-chat__persone[hidden] { display: none; }
.sc-chat__persona { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 var(--s-2); align-items: center; width: 100%; min-height: var(--tap); padding: var(--s-1) var(--s-3); background: none; border: 0; color: var(--text); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer; }
.sc-chat__persona .sc-avatar { grid-row: span 2; }
.sc-chat__persona span:last-child { color: var(--muted); font-size: var(--fs-label); }
.sc-chat__persona[aria-selected="true"], .sc-chat__persona:hover { background: var(--bg-4); }

/* La parte del post citata, accesa mentre si passa sulla citazione. */
.sc-cita-accesa { outline: var(--bw-2) solid var(--warn-fill); outline-offset: 2px; }
mark.sc-cita { background: var(--warn-bg); color: inherit; box-shadow: inset 0 -2px 0 var(--warn-fill); }
.sc-cita-bolla { position: fixed; z-index: var(--z-tooltip); min-height: 36px; padding: 0 var(--s-3); box-shadow: var(--e2); }

.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-3); }
.sc-chat--inline .sc-chat__head { padding: 0 0 var(--s-2); border-bottom: 0; }
.sc-chat--inline .sc-msg__text { font-size: var(--fs-body); }


/* =========================================================================
 * 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;
}
/* Sui verticali (storie, reel: altezza da una volta e mezza la larghezza in su) il kit
   mette la fascia in alto, sotto la zona dell'interfaccia (14% dell'altezza, kit.php
   un_fascia_posizione): l'anteprima fa lo stesso, cosi' quello che si vede e' quello che
   esce nel file. */
.sc-band--alto .sc-band__text {
  top: 14%;
  bottom: auto;
  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; }
.sc-client-card__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sc-client-card__media .sc-client-card__logo img { width: 56%; height: auto; object-fit: contain; }

/* 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;
  /* La lista e' una colonna flex con un'altezza massima: senza questo, quando le notifiche non
     ci stanno tutte le righe si STRINGONO sotto l'altezza del loro contenuto (min-height e'
     esplicita, quindi non vale piu' «auto») e l'ora di una finisce sopra il titolo della
     successiva. Ogni riga tiene la sua altezza e la lista scorre. */
  flex: 0 0 auto;
  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; }
/* Rilascio 1.1: sui clienti con le unita' il testo della notifica porta il nome dell'unita'
   («Officina Modena Est ha ritoccato...») e tagliato a una riga non si leggeva di chi era.
   Va a capo e si legge per intero; i clienti senza unita' tengono la riga sola della 1.0. */
.sc-notify-item__desc--intera { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.35; }
.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; }
/* Il titolo di un riquadro e' uno solo in tutto il prodotto: moduli diversi non fanno voci diverse. */
.sc-panel > h2, .sc-panel__head h2 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: 0; color: var(--text); }

.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; }

/* =========================================================================
 * 21 · Numeri in fila (sc-kpi)
 * ========================================================================= */

/* sc-kpi: una fila di numeri con il loro andamento (dal kernel di Social, sezione 21.4).
   Riusa sc-count per il numero; qui c'e' solo la fila e il segno dell'andamento. */
.sc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.sc-kpi { padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--line); background: var(--bg-2); }
.sc-kpi__n { display: block; font-size: var(--fs-h2); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sc-kpi__label { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--muted); }
.sc-kpi__trend { display: inline-block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-kpi__trend--up { color: var(--ok); }
.sc-kpi__trend--down { color: var(--err); }