/* ============================================================
   FEEDBACK, stati, avvisi, notifiche
   stato: trial

   PERCHÉ QUESTO FILE ESISTE
     La versione precedente era il default che produce chiunque:
     rettangolo smussato, fondo tinto, bordo colorato a sinistra.
     Funziona, ma non dice niente e si riconosce a distanza come
     "impostazione di partenza mai messa in discussione".

   LE TRE DECISIONI CHE LO RENDONO DIVERSO

     1. LA FORMA CODIFICA LO STATO
        Ogni stato ha un segno geometrico proprio: spunta,
        triangolo, ottagono, cerchio, quadrato. Si distinguono
        anche in bianco e nero, anche da chi non separa bene
        rosso e verde. Il colore diventa un rinforzo, non
        l'unico canale.

     2. IL BINARIO SFUMA
        Non un bordo pieno da 3px, ma un binario da 2px che
        sfuma verso il basso. Ancora la nota al suo inizio,
        dove sta il segno, invece di incorniciarla tutta.

     3. SI TINGE SOLO L'ETICHETTA
        Il corpo del testo resta --fg. Tingere tutto abbassa il
        contrasto e fa sembrare il messaggio meno importante
        proprio quando lo è di più.

     Firma di forma: l'angolo dal lato del binario è netto,
     gli altri tre sono morbidi. Costa nulla e rende la
     silhouette riconoscibile.
   ============================================================ */

/* ============================================================
   IL SEGNO
   ============================================================ */

/* COSA È CAMBIATO, E PERCHÉ
   La versione precedente sovrapponeva due strati: una pastiglia
   traslucida sagomata con clip-path, e dentro un glifo costruito
   con bordi e box-shadow. A 12 o 13px, che è la taglia in cui
   questi segni vivono davvero, i due strati non combaciavano:
   l'antialiasing impastava il contorno e il risultato era un
   bollo sfocato invece di un segno.

   Ora ogni segno è UNO SOLO strato: una maschera SVG applicata
   a un rettangolo di colore pieno. Geometria esatta a qualunque
   dimensione, un solo bordo da antialiasare, e il colore arriva
   da currentColor senza doppioni.

   Niente pastiglia dietro. Se serve uno sfondo lo dà
   .status-boxed, che è il suo mestiere.

   LA FAMIGLIA
     Sagome piene e sagome vuote si alternano, così due segni
     vicini non si confondono mai per massa:
       successo   spunta piena
       attenzione triangolo pieno con l'esclamativo ritagliato
       errore     ottagono pieno con la croce ritagliata
       info       anello vuoto con punto pieno al centro
       neutro     quadrato vuoto
       accento    rombo pieno
     Tutte disegnate su una griglia di 20 unità con lo stesso
     spessore di tratto, così stanno insieme come una serie. */

.sig {
  --sig-size: 15px;
  flex: none;
  display: inline-block;
  vertical-align: -0.16em;
  width: var(--sig-size);
  height: var(--sig-size);
  background-color: var(--sig-color, var(--fg-subtle));
  -webkit-mask: var(--sig-mask) center / contain no-repeat;
  mask: var(--sig-mask) center / contain no-repeat;
}
/* I vecchi markup avevano un <i> in più per la seconda asta
   della croce. Ora non serve, e non deve disturbare. */
.sig > * { display: none; }

/* --- successo: la spunta, piena e senza contenitore --- */
.sig[data-status="success"] {
  --sig-color: var(--success-fg);
  --sig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.9 10.5 7.5 15.1 17.1 4.8' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- attenzione: triangolo pieno, esclamativo ritagliato --- */
.sig[data-status="warning"] {
  --sig-color: var(--warning-fg);
  --sig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 2.1 19.2 17.9H0.8Z M8.9 7.4h2.2v5h-2.2z M8.9 13.9h2.2v2.1h-2.2z' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- errore: ottagono pieno, croce ritagliata.
       L'ottagono è la sagoma del segnale di stop: la si riconosce
       anche quando è alta dodici pixel. --- */
.sig[data-status="danger"] {
  --sig-color: var(--danger-fg);
  --sig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M6.6 1.8h6.8L18.2 6.6v6.8L13.4 18.2H6.6L1.8 13.4V6.6Z M5.87 6.93 6.93 5.87 14.13 13.07 13.07 14.13Z M13.07 5.87 14.13 6.93 6.93 14.13 5.87 13.07Z'/%3E%3C/svg%3E");
}

/* --- informazione: anello vuoto con punto pieno --- */
.sig[data-status="info"] {
  --sig-color: var(--info-fg);
  --sig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='10' cy='10' r='2.9' fill='%23000'/%3E%3C/svg%3E");
}

/* --- neutro: quadrato vuoto --- */
.sig[data-status="neutral"] {
  --sig-color: var(--fg-subtle);
  --sig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='2' width='16' height='16' rx='3.6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E");
}

/* --- accento: rombo pieno --- */
.sig[data-status="accent"] {
  --sig-color: var(--accent-fg);
  --sig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.4 17.6 10 10 17.6 2.4 10Z' fill='%23000' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sig-lg { --sig-size: 21px; }
.sig-sm { --sig-size: 12px; }

/* Stato transitorio (in corso, in coda): il segno respira.
   Ora è un solo elemento, quindi si anima direttamente. */
.sig[data-pending] { animation: sig-pending 1700ms var(--ease-in-out) infinite; }
@keyframes sig-pending {
  0%, 100% { opacity: 1;    scale: 1 }
  50%      { opacity: 0.45; scale: 0.88 }
}
@media (prefers-reduced-motion: reduce) {
  .sig[data-pending] { animation: none; opacity: 0.7; }
}

/* ============================================================
   STATUS, indicatore inline
   Sostituisce il badge-pillola tinto. Nessun fondo pieno:
   segno + etichetta, con il colore solo sull'etichetta.
   ============================================================ */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--fg);
  white-space: nowrap;
}
.status .sig { --sig-size: 13px; }
.status em {
  font-style: normal;
  color: var(--sig-color, var(--fg-subtle));
}

/* Variante racchiusa, quando serve staccare dallo sfondo.
   Il fondo è un mix con la superficie, non la tinta piena:
   resta discreto anche su superfici già colorate. */
.status-boxed {
  padding: 3px var(--sp-8) 3px var(--sp-6);
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--sig-color, var(--fg-subtle)) 12%, var(--layer));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-color, var(--border)) 24%, transparent);
}

/* Variante piena, solo per il singolo stato che deve gridare */
.status-solid {
  padding: 3px var(--sp-8);
  border-radius: var(--r-full);
  background: var(--sig-solid, var(--fg));
  color: var(--sig-on, var(--bg));
}
.status-solid[data-status="success"] { --sig-solid: var(--success-solid); --sig-on: var(--on-success); }
.status-solid[data-status="warning"] { --sig-solid: var(--warning-solid); --sig-on: var(--on-warning); }
.status-solid[data-status="danger"]  { --sig-solid: var(--danger-solid);  --sig-on: var(--on-danger); }
.status-solid[data-status="info"]    { --sig-solid: var(--info-solid);    --sig-on: var(--on-info); }
.status-solid[data-status="accent"]  { --sig-solid: var(--accent-solid);  --sig-on: var(--on-accent); }
/* Su fondo pieno il segno prende il colore del testo, non quello
   dello stato: sarebbe illeggibile sul suo stesso colore. */
.status-solid .sig { --sig-color: currentColor; }

/* ============================================================
   NOTICE, l'avviso in blocco
   ============================================================ */

.notice {
  --notice-color: var(--fg-subtle);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4) var(--sp-12);
  padding: var(--scaled-inset) var(--scaled-inset) var(--scaled-inset) var(--sp-16);
  /* firma di forma: netto dal lato del binario, morbido altrove */
  border-radius: 3px var(--r-lg) var(--r-lg) 3px;
  background: color-mix(in oklab, var(--notice-color) 7%, var(--layer));
  color: var(--fg);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

/* Il binario che sfuma: ancora la nota dove sta il segno */
.notice::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  border-radius: inherit;
  background: linear-gradient(to bottom,
    var(--notice-color) 0%,
    color-mix(in oklab, var(--notice-color) 35%, transparent) 55%,
    transparent 100%);
}

/* Posizionamento esplicito: senza, il paragrafo viene collocato
   in automatico nella prima colonna e la fa allargare, schiacciando
   il titolo in un filo a destra. */
.notice .sig { grid-column: 1; grid-row: 1; margin-top: 1px; }
.notice-title {
  grid-column: 2;
  font-weight: var(--fw-medium);
  color: var(--notice-color);
  font-size: var(--fs-14);
}
.notice p { grid-column: 2; margin: 0; color: var(--fg-subtle); max-width: var(--measure); }
.notice-actions {
  grid-column: 2;
  display: flex; gap: var(--sp-8); flex-wrap: wrap;
  margin-top: var(--sp-8);
}
/* Nota senza titolo: il testo si allinea comunque accanto al segno */
.notice > *:not(.sig) { grid-column: 2; }

.notice[data-status="success"] { --notice-color: var(--success-fg); }
.notice[data-status="warning"] { --notice-color: var(--warning-fg); }
.notice[data-status="danger"]  { --notice-color: var(--danger-fg); }
.notice[data-status="info"]    { --notice-color: var(--info-fg); }
.notice[data-status="accent"]  { --notice-color: var(--accent-fg); }

/* Variante severa: per l'errore che blocca. Una per schermata.

   ⚠ NOTA DI PROGETTO, perché non ha il fondo più tinto
   La prima versione usava una miscela al 14% invece del 7%.
   La verifica ha misurato 4.21:1 per il titolo danger in
   modalità chiara: sotto soglia. Le miscele che passano
   (8% o meno) sono però indistinguibili dal 7% della variante
   normale, quindi non differenziavano nulla.

   Soluzione: differenziare per STRUTTURA invece che per più
   tinta, binario pieno, anello di contorno, titolo in
   grassetto. Si distingue di più della versione bocciata, e
   il contrasto sale a 4.57:1. */
.notice-strong {
  background: color-mix(in oklab, var(--notice-color) 8%, var(--layer));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--notice-color) 30%, transparent);
}
.notice-strong::before { background: var(--notice-color); width: 3px; }
.notice-strong .notice-title { font-weight: var(--fw-bold); }

/* ============================================================
   TOAST
   Le notifiche impilate hanno profondità reale: quelle dietro
   arretrano e si rimpiccioliscono. Comunica "ce n'è più di una"
   senza doverle mostrare tutte.
   ============================================================ */

.toast-stack {
  position: fixed;
  z-index: 300;
  inset-block-end: calc(var(--sp-24) + var(--safe-bottom, 0px));
  inset-inline-end: calc(var(--sp-24) + var(--safe-right, 0px));
  display: grid;
  justify-items: end;
  gap: var(--sp-8);
  width: min(380px, calc(100vw - var(--sp-32)));
  pointer-events: none;
}
.toast-stack > * { pointer-events: auto; }

.toast {
  --notice-color: var(--fg-subtle);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--sp-4) var(--sp-12);
  width: 100%;
  padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16);
  border-radius: 3px var(--r-lg) var(--r-lg) 3px;
  background: var(--layer);
  box-shadow: var(--elevation-overlay);
  font-size: var(--fs-14);
  position: relative;
  animation: toast-in var(--dur-normal) var(--ease-emphasized) both;
}
.toast::before {
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 2px; border-radius: inherit;
  background: linear-gradient(to bottom, var(--notice-color),
    color-mix(in oklab, var(--notice-color) 30%, transparent));
}
.toast[data-status="success"] { --notice-color: var(--success-fg); }
.toast[data-status="warning"] { --notice-color: var(--warning-fg); }
.toast[data-status="danger"]  { --notice-color: var(--danger-fg); }
.toast[data-status="info"]    { --notice-color: var(--info-fg); }

.toast > .sig { grid-column: 1; grid-row: 1; margin-top: 1px; }
/* :not(.toast-life), altrimenti la barra di durata, che è anch'essa
   un div, finisce nella riga del titolo e ci passa sopra */
.toast > div:not(.toast-life) { grid-column: 2; grid-row: 1; min-width: 0; }
.toast-title { font-weight: var(--fw-medium); color: var(--fg); }
.toast p { margin: 0; color: var(--fg-subtle); font-size: var(--fs-12); }
.toast-close {
  grid-column: 3; grid-row: 1; align-self: start;
  width: var(--sp-24); height: var(--sp-24);
  display: grid; place-items: center;
  border: none; background: transparent; color: var(--fg-subtle);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.toast-close:hover { background: var(--surface-hover); color: var(--fg); }

/* Barra di durata: consuma il tempo residuo prima della chiusura */
.toast-life {
  grid-column: 1 / -1; grid-row: 2;
  height: 2px; margin-top: var(--sp-8);
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--notice-color) 25%, transparent);
  overflow: hidden;
}
.toast-life > i {
  display: block; height: 100%;
  background: var(--notice-color);
  transform-origin: left;
  animation: toast-life var(--toast-duration, 5s) linear forwards;
}
@keyframes toast-life { from { scale: 1 1 } to { scale: 0 1 } }
@keyframes toast-in {
  from { opacity: 0; translate: 0 var(--sp-16); scale: 0.96 }
  to   { opacity: 1; translate: 0; scale: 1 }
}
.toast[data-leaving] {
  animation: toast-out var(--dur-fast) var(--ease-accelerate) forwards;
}
@keyframes toast-out {
  to { opacity: 0; translate: var(--sp-16) 0; scale: 0.96 }
}

/* Profondità della pila: i toast oltre il terzo arretrano */
.toast-stack > .toast:nth-last-child(n+4) {
  scale: 0.94; opacity: 0.55; margin-block-start: calc(var(--sp-24) * -1);
  filter: saturate(0.7);
}
.toast-stack > .toast:nth-last-child(n+5) { display: none; }

/* ============================================================
   BADGE

   ⛔ NIENTE PALLINO GUIDA
      La prima versione aveva un punto colorato prima del testo.
      Era ridondante: il fondo È già tinto di quel colore, e
      l'anello di contorno pure. Il punto ripeteva un'informazione
      già presente, occupava spazio e allineava male il testo.
      Vedi rules/anti-patterns.md, nessun punto decorativo,
      da nessuna parte.

   Se serve distinguere lo stato in modo esplicito, si mette
   dentro un .sig, che ha una FORMA diversa per ogni stato e
   quindi aggiunge informazione invece di ripeterla.
   ============================================================ */

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: 2px var(--sp-8);
  border-radius: var(--r-full);
  font-size: var(--fs-12); font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  background: color-mix(in oklab, var(--badge-color, var(--fg-subtle)) 11%, var(--layer));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--badge-color, var(--border)) 26%, transparent);
  color: color-mix(in oklab, var(--badge-color, var(--fg)) 55%, var(--fg));
  white-space: nowrap;
}
.badge .sig { --sig-size: 12px; margin-inline-start: -1px; }

.badge-accent  { --badge-color: var(--accent-fg); }
.badge-success { --badge-color: var(--success-fg); }
.badge-warning { --badge-color: var(--warning-fg); }
.badge-danger  { --badge-color: var(--danger-fg); }
.badge-info    { --badge-color: var(--info-fg); }
.badge-accent-2{ --badge-color: var(--accent-2-fg); }
.badge-solid   { background: var(--accent-solid); color: var(--on-accent); box-shadow: none; }
.badge-solid-2 { background: var(--accent-2-solid); color: var(--on-accent-2); box-shadow: none; }

/* Contatore numerico: cifre tabellari, larghezza minima stabile */
.badge-count {
  padding-inline: var(--sp-6);
  font-variant-numeric: tabular-nums;
  min-width: 20px; justify-content: center;
}