/* SVILAPP — IL DISPOSITIVO: la quarta proprietà dello schermo.
   Il sistema ha già tre assi: il CLIMA (data-kit), la LUCE (data-theme), la SUPERFICIE
   (data-superficie). Il quarto è il DISPOSITIVO, e ha la stessa forma degli altri tre:
   non è un foglio di correzioni a valle, è un layer di token che il markup legge.

   ─── Come funziona ─────────────────────────────────────────────────────────────
   Ogni misura di layout esiste in tre valori, dichiarati UNA volta sola come le àncore
   delle palette (--sv-d-* desktop · --sv-t-* tablet · --sv-m-* mobile). Cinque blocchi di
   MAPPATURA scelgono la banda: tre per il viewport reale (@media), due per la banda
   FORZATA da [data-dispositivo] sul root. Nessun valore è scritto due volte.

   ─── Il patto con il markup: interruttori a ricaduta ───────────────────────────
   Le griglie del markup NON diventano token: restano scritte in linea, e chiedono al
   sistema il permesso di collassare.

       grid-template-columns:var(--sv-g4, repeat(4,minmax(0,1fr)))

   Su desktop --sv-g4 è `initial` (garantito-invalido): vale la ricaduta, cioè il disegno
   originale, che resta leggibile nel markup. In banda tablet/mobile il layer definisce
   l'interruttore e la griglia collassa. Conseguenze volute:
     · il desktop non cambia di un pixel, e non serve rimisurarlo;
     · niente !important, niente selettori su [style*=…], niente classi nuove;
     · una griglia nuova nasce già adattiva se usa l'interruttore giusto;
     · chi legge il markup vede il disegno vero, non un nome.

   I moltiplicatori (--sv-passo-k, --sv-gap-k) fanno la stessa cosa in aritmetica:
   `padding:calc(110px * var(--sv-passo-k,1))` conserva il ritmo proprio di ogni sezione
   e lo comprime in proporzione. Un solo interruttore governa tutte le altezze.

   ─── Le tre bande ──────────────────────────────────────────────────────────────
   mobile  ≤ 719px   una colonna, margine 18, tocco ≥ 44px, niente doppia colonna
   tablet  720–1023  due colonne, margine 26, il 3D resta ma costa meno
   desktop ≥ 1024    il disegno pieno

   Le soglie non sono nomi di prodotti: sono i punti in cui la griglia a 12 colonne di
   `spacing.css` smette di reggere la misura massima di 68ch. Restano invarianti tra kit,
   come la griglia stessa.

   ─── Regola di sistema ─────────────────────────────────────────────────────────
   Un foglio NON si riflette: si adatta in larghezza. Gli artefatti su <doc-page> sono
   carta — A4 resta A4 anche su un telefono, si scala per farla vedere intera e si
   ingrandisce con le dita (--sv-foglio-zoom). Riflettere un documento significa
   consegnare un documento diverso.

   Il test è lo stesso degli altri assi: se scrivo data-dispositivo="mobile" su un
   contenitore e qualcosa al suo interno non si riorganizza, quel qualcosa non appartiene
   ancora al sistema. */

:root{
  /* ── I valori. Tre per misura, ognuno scritto una volta sola. ─────────────── */

  /* margine di pagina (il respiro laterale del documento) */
  --sv-d-margine:40px;      --sv-t-margine:26px;      --sv-m-margine:18px;
  /* margine della griglia di sistema (.sv-container) e colonne */
  --sv-d-gmargine:64px;     --sv-t-gmargine:32px;     --sv-m-gmargine:20px;
  --sv-d-gcols:12;          --sv-t-gcols:8;           --sv-m-gcols:4;
  --sv-d-ggutter:24px;      --sv-t-ggutter:20px;      --sv-m-ggutter:16px;
  /* moltiplicatori: ritmo verticale e distanze larghe */
  --sv-d-passo-k:1;         --sv-t-passo-k:.72;       --sv-m-passo-k:.5;
  --sv-d-gap-k:1;           --sv-t-gap-k:.8;          --sv-m-gap-k:.62;
  /* interruttori di griglia: `initial` = vale la ricaduta scritta nel markup */
  --sv-d-g2:initial;        --sv-t-g2:initial;        --sv-m-g2:minmax(0,1fr);
  --sv-d-g3:initial;        --sv-t-g3:repeat(2,minmax(0,1fr));  --sv-m-g3:minmax(0,1fr);
  --sv-d-g4:initial;        --sv-t-g4:repeat(2,minmax(0,1fr));  --sv-m-g4:minmax(0,1fr);
  /* g4x — tessere piccole (campioni, lamine, bolli): a una colonna diventerebbero
     insegne, non tessere. Restano due anche sul telefono. */
  --sv-d-g4x:initial;       --sv-t-g4x:repeat(2,minmax(0,1fr)); --sv-m-g4x:repeat(2,minmax(0,1fr));
  --sv-d-g5:initial;        --sv-t-g5:repeat(3,minmax(0,1fr));  --sv-m-g5:repeat(2,minmax(0,1fr));
  --sv-d-g6:initial;        --sv-t-g6:repeat(3,minmax(0,1fr));  --sv-m-g6:repeat(2,minmax(0,1fr));
  /* gsx — due colonne con una fissa (barra + contenuto): sotto, la fissa sparirebbe */
  --sv-d-gsx:initial;       --sv-t-gsx:initial;       --sv-m-gsx:minmax(0,1fr);
  /* tabelle: le colonne NON collassano, la traccia scorre (una riga di dati spezzata
     in verticale non è più una riga di dati) */
  --sv-d-riga-min:auto;     --sv-t-riga-min:auto;     --sv-m-riga-min:600px;
  --sv-d-scorri:hidden;     --sv-t-scorri:hidden;     --sv-m-scorri:auto hidden;
  /* apertura: su desktop tiene la piega, sul telefono il contenuto detta l'altezza */
  --sv-d-eroe:calc(100vh - 62px); --sv-t-eroe:auto;   --sv-m-eroe:auto;
  /* barra di navigazione: a capo su desktop, striscia che scorre sul telefono */
  --sv-d-nav-wrap:wrap;     --sv-t-nav-wrap:wrap;     --sv-m-nav-wrap:nowrap;
  --sv-d-nav-of:visible;    --sv-t-nav-of:visible;    --sv-m-nav-of:auto;
  /* biglia d'apertura: il 31vw del desktop su un telefono è un bollo */
  --sv-d-biglia-eroe:min(400px,31vw); --sv-t-biglia-eroe:min(340px,42vw); --sv-m-biglia-eroe:min(260px,64vw);
  /* carta: il foglio si scala per essere visto intero, non si riflette */
  --sv-d-foglio-zoom:1;     --sv-t-foglio-zoom:.72;   --sv-m-foglio-zoom:.42;
  /* nome della banda: leggibile da JS come --sv-luce-nativa (mai una tabella a mano) */
  --sv-d-dispositivo:"desktop"; --sv-t-dispositivo:"tablet"; --sv-m-dispositivo:"mobile";
}

/* ── Mappatura · banda DESKTOP ───────────────────────────────────────────────── */
:root,
[data-dispositivo="desktop"]{
  --sv-margine:var(--sv-d-margine);
  --sv-grid-margin:var(--sv-d-gmargine);
  --sv-grid-cols:var(--sv-d-gcols);
  --sv-grid-gutter:var(--sv-d-ggutter);
  --sv-passo-k:var(--sv-d-passo-k);
  --sv-gap-k:var(--sv-d-gap-k);
  --sv-g2:var(--sv-d-g2);   --sv-g3:var(--sv-d-g3);   --sv-g4:var(--sv-d-g4);
  --sv-g4x:var(--sv-d-g4x); --sv-g5:var(--sv-d-g5);   --sv-g6:var(--sv-d-g6);
  --sv-gsx:var(--sv-d-gsx);
  --sv-riga-min:var(--sv-d-riga-min);
  --sv-scorri:var(--sv-d-scorri);
  --sv-eroe:var(--sv-d-eroe);
  --sv-nav-wrap:var(--sv-d-nav-wrap);
  --sv-nav-of:var(--sv-d-nav-of);
  --sv-biglia-eroe:var(--sv-d-biglia-eroe);
  --sv-foglio-zoom:var(--sv-d-foglio-zoom);
  --sv-dispositivo:var(--sv-d-dispositivo);
}

/* ── Mappatura · banda TABLET (viewport reale) ───────────────────────────────── */
@media (max-width:1023px){
  :root:not([data-dispositivo]){
    --sv-margine:var(--sv-t-margine);
    --sv-grid-margin:var(--sv-t-gmargine);
    --sv-grid-cols:var(--sv-t-gcols);
    --sv-grid-gutter:var(--sv-t-ggutter);
    --sv-passo-k:var(--sv-t-passo-k);
    --sv-gap-k:var(--sv-t-gap-k);
    --sv-g2:var(--sv-t-g2);   --sv-g3:var(--sv-t-g3);   --sv-g4:var(--sv-t-g4);
    --sv-g4x:var(--sv-t-g4x); --sv-g5:var(--sv-t-g5);   --sv-g6:var(--sv-t-g6);
    --sv-gsx:var(--sv-t-gsx);
    --sv-riga-min:var(--sv-t-riga-min);
    --sv-scorri:var(--sv-t-scorri);
    --sv-eroe:var(--sv-t-eroe);
    --sv-nav-wrap:var(--sv-t-nav-wrap);
    --sv-nav-of:var(--sv-t-nav-of);
    --sv-biglia-eroe:var(--sv-t-biglia-eroe);
    --sv-foglio-zoom:var(--sv-t-foglio-zoom);
    --sv-dispositivo:var(--sv-t-dispositivo);
  }
}

/* ── Mappatura · banda MOBILE (viewport reale) ───────────────────────────────── */
@media (max-width:719px){
  :root:not([data-dispositivo]){
    --sv-margine:var(--sv-m-margine);
    --sv-grid-margin:var(--sv-m-gmargine);
    --sv-grid-cols:var(--sv-m-gcols);
    --sv-grid-gutter:var(--sv-m-ggutter);
    --sv-passo-k:var(--sv-m-passo-k);
    --sv-gap-k:var(--sv-m-gap-k);
    --sv-g2:var(--sv-m-g2);   --sv-g3:var(--sv-m-g3);   --sv-g4:var(--sv-m-g4);
    --sv-g4x:var(--sv-m-g4x); --sv-g5:var(--sv-m-g5);   --sv-g6:var(--sv-m-g6);
    --sv-gsx:var(--sv-m-gsx);
    --sv-riga-min:var(--sv-m-riga-min);
    --sv-scorri:var(--sv-m-scorri);
    --sv-eroe:var(--sv-m-eroe);
    --sv-nav-wrap:var(--sv-m-nav-wrap);
    --sv-nav-of:var(--sv-m-nav-of);
    --sv-biglia-eroe:var(--sv-m-biglia-eroe);
    --sv-foglio-zoom:var(--sv-m-foglio-zoom);
    --sv-dispositivo:var(--sv-m-dispositivo);
  }
}

/* ── Mappatura · bande FORZATE ───────────────────────────────────────────────────
   data-dispositivo sul root (o su un contenitore: gli interruttori sono custom property
   e si ereditano) fissa la banda a prescindere dal viewport. È il modo in cui un
   artefatto espone la vista dispositivo fra le proprie opzioni, e il modo in cui una
   vetrina mostra la resa mobile dentro una pagina larga. */
:root[data-dispositivo="tablet"], [data-dispositivo="tablet"]{
  --sv-margine:var(--sv-t-margine);
  --sv-grid-margin:var(--sv-t-gmargine);
  --sv-grid-cols:var(--sv-t-gcols);
  --sv-grid-gutter:var(--sv-t-ggutter);
  --sv-passo-k:var(--sv-t-passo-k);
  --sv-gap-k:var(--sv-t-gap-k);
  --sv-g2:var(--sv-t-g2);   --sv-g3:var(--sv-t-g3);   --sv-g4:var(--sv-t-g4);
  --sv-g4x:var(--sv-t-g4x); --sv-g5:var(--sv-t-g5);   --sv-g6:var(--sv-t-g6);
  --sv-gsx:var(--sv-t-gsx);
  --sv-riga-min:var(--sv-t-riga-min);
  --sv-scorri:var(--sv-t-scorri);
  --sv-eroe:var(--sv-t-eroe);
  --sv-nav-wrap:var(--sv-t-nav-wrap);
  --sv-nav-of:var(--sv-t-nav-of);
  --sv-biglia-eroe:var(--sv-t-biglia-eroe);
  --sv-foglio-zoom:var(--sv-t-foglio-zoom);
  --sv-dispositivo:var(--sv-t-dispositivo);
}
:root[data-dispositivo="mobile"], [data-dispositivo="mobile"]{
  --sv-margine:var(--sv-m-margine);
  --sv-grid-margin:var(--sv-m-gmargine);
  --sv-grid-cols:var(--sv-m-gcols);
  --sv-grid-gutter:var(--sv-m-ggutter);
  --sv-passo-k:var(--sv-m-passo-k);
  --sv-gap-k:var(--sv-m-gap-k);
  --sv-g2:var(--sv-m-g2);   --sv-g3:var(--sv-m-g3);   --sv-g4:var(--sv-m-g4);
  --sv-g4x:var(--sv-m-g4x); --sv-g5:var(--sv-m-g5);   --sv-g6:var(--sv-m-g6);
  --sv-gsx:var(--sv-m-gsx);
  --sv-riga-min:var(--sv-m-riga-min);
  --sv-scorri:var(--sv-m-scorri);
  --sv-eroe:var(--sv-m-eroe);
  --sv-nav-wrap:var(--sv-m-nav-wrap);
  --sv-nav-of:var(--sv-m-nav-of);
  --sv-biglia-eroe:var(--sv-m-biglia-eroe);
  --sv-foglio-zoom:var(--sv-m-foglio-zoom);
  --sv-dispositivo:var(--sv-m-dispositivo);
}

/* ── La stampa non è una banda ────────────────────────────────────────────────
   In stampa i @media si misurano sulla CARTA, non sulla finestra: un A4 è 816px, cioè
   dentro la banda tavoletta, e un PDF esportato uscirebbe collassato a due colonne —
   diverso da quello che si vede a schermo e diverso da quello di ieri. La stampa è
   sempre la banda piena, e il foglio non si scala mai (lo scala il motore di stampa).
   !important perché deve vincere sulle bande forzate, che sono più specifiche. */
@media print{
  :root, [data-dispositivo]{
    --sv-margine:var(--sv-d-margine) !important;
    --sv-grid-margin:var(--sv-d-gmargine) !important;
    --sv-grid-cols:var(--sv-d-gcols) !important;
    --sv-grid-gutter:var(--sv-d-ggutter) !important;
    --sv-passo-k:var(--sv-d-passo-k) !important;
    --sv-gap-k:var(--sv-d-gap-k) !important;
    --sv-g2:var(--sv-d-g2) !important;   --sv-g3:var(--sv-d-g3) !important;
    --sv-g4:var(--sv-d-g4) !important;   --sv-g4x:var(--sv-d-g4x) !important;
    --sv-g5:var(--sv-d-g5) !important;   --sv-g6:var(--sv-d-g6) !important;
    --sv-gsx:var(--sv-d-gsx) !important;
    --sv-riga-min:var(--sv-d-riga-min) !important;
    --sv-scorri:var(--sv-d-scorri) !important;
    --sv-eroe:auto !important;
    --sv-nav-wrap:var(--sv-d-nav-wrap) !important;
    --sv-nav-of:var(--sv-d-nav-of) !important;
    --sv-biglia-eroe:var(--sv-d-biglia-eroe) !important;
    --sv-foglio-zoom:1 !important;
    --sv-dispositivo:var(--sv-d-dispositivo) !important;
  }
}

/* ── Il tocco non è il puntatore ──────────────────────────────────────────────
   Su un dispositivo a tocco l'area minima è 44px: sotto, il bersaglio esiste per il
   codice e non per il dito. Vale per le classi del sistema; il markup in linea la
   ottiene con min-height:var(--sv-hit-min). La regola guarda il PUNTATORE, non la
   larghezza: un tablet largo si tocca comunque. */
@media (pointer:coarse){
  .sv-btn, .sv-btn--ghost, .sv-tab, .sv-nav a, .sv-select, .sv-input{
    min-height:var(--sv-hit-min);
  }
  .sv-check, .sv-switch{ min-height:var(--sv-hit-min); }
}

/* ── Niente scorrimento laterale, mai ────────────────────────────────────────
   Un solo pixel di troppo su un telefono si legge come «sito rotto». La pagina non
   scorre in orizzontale: scorrono le tracce che lo dichiarano (--sv-scorri). */
@media (max-width:719px){
  html, body{ overflow-x:hidden; }
}

/* ── L'anteprima di dispositivo ───────────────────────────────────────────────
   Quando un artefatto FORZA una banda su uno schermo più largo, la pagina si stringe
   alla misura di quella banda: forzare «mobile» senza restringere mostrerebbe una
   colonna sola larga 1400px, che non è la resa mobile di niente.
   Larghezze: 390px (telefono di riferimento) · 834px (tavoletta verticale). */
[data-anteprima="mobile"] body{ max-width:390px; }
[data-anteprima="tablet"] body{ max-width:834px; }
[data-anteprima="mobile"] body, [data-anteprima="tablet"] body{
  margin:0 auto;
  box-shadow:0 0 0 1px var(--sv-line-strong), var(--sv-e3);
  min-height:100vh;
}
/* La barra fissa dell'artefatto è larga come il viewport, non come l'anteprima:
   dentro l'anteprima si ancora alla colonna. */
[data-anteprima] body > *{ max-width:100%; }