/* Noleggiando.com — spazio, raggi, griglia, barre.
   Livelli: 1 · PRIMITIVO (scala e raggi) · 2 · SEMANTICO (la griglia della pagina) ·
   3 · COMPONENTE (la barra e il bersaglio minimo). */
:root{
  /* livello 1 · primitivi — la scala dello spazio · base 4 */
  --nlg-s-1:4px; --nlg-s-2:8px; --nlg-s-3:12px; --nlg-s-4:16px; --nlg-s-5:24px;
  --nlg-s-6:32px; --nlg-s-7:48px; --nlg-s-8:64px; --nlg-s-9:96px;
  /* livello 1 · primitivi — raggi: spigoli contenuti, il marchio ha spigoli vivi */
  --nlg-r-0:0; --nlg-r-sm:6px; --nlg-r-md:8px; --nlg-r-lg:12px; --nlg-r-xl:16px; --nlg-r-pill:999px;
  /* livello 3 · raggi di componente: forme piccole per cui il gradino minimo della scala (6) è troppo.
     Non sono gradini della scala: sono valori di componente, e si usano solo dove dichiarato. */
  --nlg-r-segmento:3px;   /* segmenti dell'indicatore e barre alle scale 16–20; mini-mockup */
  --nlg-r-tacca:2px;      /* tacche a 12 px e miniature dei layout */
  --nlg-r-mini:4px;       /* comandi delle miniature a scala ridotta */
  --nlg-r-anteprima:18px; /* la cornice del telefono nelle anteprime del capitolo 05 */
  --nlg-r-mockup:14px;    /* le finestre delle anteprime desktop e il tondo del rispetto */
  /* livello 2 · semantici — la griglia della pagina */
  --nlg-container:1240px; --nlg-gutter:24px;
  /* livello 3 · componente — la barra 1:3,5; stacco = metà spessore, min 4px in composizione;
     letti dal § 3.1.1 e dal cartiglio del capitolo 04 */
  --nlg-bar-ratio:0.2857;
  --nlg-bar-w:16px; --nlg-bar-gap:8px;      /* scala UI e web */
  --nlg-bar-w-hero:32px; --nlg-bar-gap-hero:16px;
  /* livello 3 · componente — il bersaglio minimo di ogni controllo */
  --nlg-tap-min:44px;

  /* livello 3 · componente — le misure proprie dei componenti di components.css, lette dal capitolo 04
     e dal § 5.1. Un valore nuovo di componente nasce qui, mai nel foglio dei componenti. */
  --nlg-linea:1px;                 /* il filo: bordi, separatori, righe di tabella */
  --nlg-bordo-comando:1.5px;       /* bordo di bottone a bordo, campo e bottone di scelta · § 4.1.1, § 4.1.2 */
  --nlg-btn-pad:22px;              /* spazio ai lati del bottone · § 4.1.1 */
  --nlg-btn-pad-scelta:18px;       /* spazio ai lati del bottone che tiene una scelta · § 4.1.1 */
  --nlg-campo-fs:15px;             /* corpo del testo nel campo · § 4.1.2 */
  --nlg-comando-h:36px;            /* chip, riga compatta, azione di testata, voce del mega menu · § 4.1.3, § 4.2.2, § 5.1 */
  --nlg-comando-fs:13px;           /* chip e badge · § 4.1.3 */
  --nlg-badge-pad:7px 13px;        /* la pillola dello stato · § 4.1.3 */
  --nlg-badge-fs-compatto:12px;    /* il badge dentro la card · § 4.1.3 */
  --nlg-tab-fs:13.5px;             /* la linguetta · § 4.1.3 */
  --nlg-segno:2px;                 /* barra della linguetta, voce attiva, barra dei numeri · § 4.1.3, § 5.1.1, § 5.5.5 */
  --nlg-card-alza:3px;             /* la card al passaggio · § 4.1.3 */
  --nlg-th-fs:11px;                /* intestazione di tabella in mono · § 4.2.2 */
  --nlg-tip-fs:12.5px;             /* tooltip ed errore sotto il campo · § 4.3.2, § 4.1.4 */
  --nlg-pop-w:280px;               /* popover e misura massima del tooltip · § 4.3.2 */
  --nlg-etichetta-fs:10.5px;       /* l'etichetta mono dell'avviso · § 4.1.7 */
  --nlg-testata-h:56px;            /* § 5.1.1 */
  --nlg-testata-h-ridotta:48px;    /* allo scorrimento e sul telefono · § 5.1.1 */
  --nlg-utility-h:32px;            /* la barra utility · § 5.1.1 */
  --nlg-pillola-h:26px;            /* il consenso minimizzato · § 5.9 */
  --nlg-voce-min:200px;            /* base di un campo o di una colonna che va a capo · § 4.1.4, § 5.5.4 */
  --nlg-testo-min:320px;           /* base del testo accanto ai comandi, sotto cui va a capo · § 5.6 */
  --nlg-colonna-min:360px;         /* base di una metà di testo + media, sotto cui si impila · § 5.5.2 */
  --nlg-filo-firma-max:600px;      /* il filo di firma disegnato: oltre, i segmenti corti si allontanano dalla chiusura · § 3.2.1 */

  /* livello 3 · 4.1.9 icona fluttuante: misura, glifo, margine dall'angolo e il suo piano (sotto il velo) */
  --nlg-flutt-misura:56px; --nlg-flutt-glifo:30px; --nlg-flutt-margine:var(--nlg-s-5);
  --nlg-z-fluttuante:30;   /* sotto il banner del consenso (39/40) e la modale (60): i veli la coprono */
}

/* livello 3 · 4.1.6 la resa compatta: le misure che l'attributo del riquadro riscrive (dal contratto 11.9.0).
   La resa normale è la predefinita; data-densita="compatta" si mette su un contenitore, mai su un componente solo.
   Sugli schermi da toccare bottoni, campi, caselle e voci tornano all'area di tocco minima. */
:root{
  --nlg-controllo-h:var(--nlg-tap-min);   /* bottoni, campi, voci · § 4.1.1, § 4.1.2 */
  --nlg-cella-h:var(--nlg-tap-min);       /* righe di tabella · § 4.2.2 */
  --nlg-casella:20px;                     /* casella e scelta · § 4.1.4 */
  --nlg-card-pad:var(--nlg-s-5);          /* corpo della card · § 4.1.3 */
  --nlg-btn-fs:var(--nlg-fs-button);
  --nlg-campo-pad:var(--nlg-s-4);
  --nlg-banner-h:32px;                    /* il banner di stato · § 4.1.10 */
}
[data-densita="compatta"]{
  --nlg-controllo-h:var(--nlg-comando-h); --nlg-cella-h:var(--nlg-comando-h); --nlg-casella:16px;
  --nlg-card-pad:var(--nlg-s-4); --nlg-btn-fs:14px; --nlg-campo-fs:14px; --nlg-campo-pad:var(--nlg-s-3); --nlg-btn-pad:var(--nlg-s-4);
}
@media (pointer:coarse){
  [data-densita="compatta"]{ --nlg-controllo-h:var(--nlg-tap-min); --nlg-cella-h:var(--nlg-tap-min); }
}