/* ============================================================
   GENCAR · Design System — Colors & Type
   Foundations for a friendly-but-solid automotive platform.
   Direction: Airbnb-clean digital + automotive trust.

   FONTE DI VERITÀ: ~/Gencar/design-system/colors_and_type.css
   La copia usata dal sito (~/Gencar/website/styles.css) è generata da
   design-system/tools/build.py — non modificarla a mano, modifica questo
   file e rilancia `python3 tools/build.py`. Libreria visiva: index.html.
   ============================================================ */

/* ---- Webfonts ----
   Montserrat → geometric grotesque, premium + readable (UI + body), local .ttf.
   Good Times → logo display face, important titles only (local .otf).
   Inter → prices and numbers in general (local .ttf, tabular numerals).
   Rule: any text set ALONGSIDE Good Times is UPPERCASE. */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Variable-latin.woff2') format('woff2'), url('fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-Variable-latin.woff2') format('woff2'), url('fonts/Montserrat-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Brand display face — the logo typeface, for IMPORTANT titles only.
   Wide automotive techno face; ships in a single (regular) weight. */
@font-face {
  font-family: 'Good Times';
  src: url('fonts/GoodTimes-Rg.woff2') format('woff2'), url('fonts/GoodTimes-Rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter — used for PRICES and NUMBERS in general (tabular numerals). */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable-latin.woff2') format('woff2'), url('fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-Variable-latin.woff2') format('woff2'), url('fonts/Inter-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Ripieghi con le metriche dei caratteri del sito (decisione del 14 ott 2026, su delega di Edoardo): finché Montserrat e Inter
   non arrivano il testo usa Arial ridimensionato alle loro misure, così al cambio di carattere righe e blocchi non si spostano
   (CLS). Dove Arial non c'è (Android) la regola non vale e si passa al carattere di sistema, come prima. */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  size-adjust: 113.03%;
  ascent-override: 85.64%;
  descent-override: 22.21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.23%;
  ascent-override: 90.34%;
  descent-override: 22.49%;
  line-gap-override: 0%;
}

:root {
  /* ============ COLOR PRIMITIVES ============ */

  /* Ink / neutral-dark (brand #404040) */
  --ink-900: #2b2b2b;   /* deepest surfaces, footers */
  --ink-800: #404040;   /* BRAND dark — primary ink, dark sections */
  --ink-700: #525452;
  --ink-600: #6b6e6b;

  /* Grey (brand #969996) */
  --grey-500: #969996;  /* BRAND mid grey — secondary text, captions */
  --grey-400: #b4b6b4;  /* disabled text, dividers on dark */
  --grey-300: #d6d8d6;  /* borders, hairlines */
  --grey-200: #e7e9e7;  /* subtle fills, track backgrounds */
  --grey-100: #eef0ee;  /* hover wash on paper */

  /* Paper / white (brand #f2f4f2) */
  --paper:    #f2f4f2;  /* BRAND off-white — app background */
  --white:    #ffffff;  /* cards, sheets */

  /* Accent — green. Fill (buttons/CTA) = #3ae227 · text/logos = #28bd18 */
  --green-100: #e4fbe1; /* soft tint — badge & highlight backgrounds */
  --green-300: #8ff083;
  --green-500: #3ae227; /* BRAND accent FILL — buttons, CTAs, active */
  --green-600: #2bc41a; /* accent fill hover */
  --green-700: #1f9e12; /* accessible green for TEXT/links on paper */
  --green-800: #167a0c; /* pressed / strong text */

  /* Semantic hues (warm-balanced) */
  --success-500: #1f9e12;  --success-bg: #e4fbe1;
  --warning-500: #c77d11;  --warning-bg: #fbf0dd;
  --danger-500:  #d23b3b;  --danger-bg:  #fbe3e3;
  --info-500:    #2f6f8f;  --info-bg:    #e2f0f5;  /* "garanzia" trust-blue */
  --blue-600:    #1e5aa8;  --blue-bg:    #e8f0fa;  /* "risparmi €" nelle promo (scheda auto) */
  --plate-blue:  #003399;  /* banda blu UE della targa italiana (campo targa) */
  --plate-star:  #f8d038;  /* stelline UE sulla banda blu */
  --green-glow:  rgba(58, 226, 39, .16);  /* alone decorativo accent su pannelli scuri */
  --green-200:   #d6f7d1;  /* tinta piena al passaggio sulle scelte verdi */
  --info-700:    #21506a;  --warning-700: #8a560a;  --danger-700: #8d1f1f;   /* testo sui fondi tinta dei badge */

  /* ============ RUOLI DI COLORE (decisione Colore, 18 set 2026): veli, vetro, ombre portate, anelli ============ */
  --scrim:        rgba(43, 43, 43, .5);    /* velo dietro pannelli laterali, modali, drawer */
  --scrim-strong: rgba(43, 43, 43, .92);   /* lightbox */
  --glass-bg:        rgba(242, 244, 242, .82);   /* vetro: chat aperta, sfumatura dell'hero */
  --glass-bg-strong: rgba(242, 244, 242, .94);   /* navbar e barra della scheda quando scorrono sopra il contenuto */
  --glass-bg-clear:  rgba(242, 244, 242, .64);   /* vetro trasparente: la barra in alto compatta sotto 900 (decisione Barra in alto, 28 set 2026) */
  --glass-border:    rgba(255, 255, 255, .7);
  --paper-0:      rgba(242, 244, 242, 0);   /* inizio trasparente delle sfumature verso paper */
  --on-dark-faint: rgba(255, 255, 255, .12); /* superfici leggere su fondo scuro (chip, icone tonde) */
  --drop-shadow:    drop-shadow(0 6px 14px rgba(43, 43, 43, .25));   /* filter: mascotte e bottoni flottanti */
  --drop-shadow-lg: drop-shadow(0 18px 24px rgba(43, 43, 43, .18));  /* filter: auto nello spaccato, mascotte grande */
  --ring-danger:  0 0 0 3px rgba(210, 59, 59, .18);   /* gemello di --ring-accent per i campi in errore */
  --ph-cool: #e4ebe6; --ph-cool-2: #cdd6cf; --ph-warm: #e9e7e4; --ph-warm-2: #d6d2cc;   /* segnaposto foto: sfumature alternative a grey-200/300 */
  /* origine di un testo nella revisione del sito (decisione Colori dell'origine, 29 set 2026): il colore dice cosa si fa */
  --origin-edit:    var(--green-500);    /* lo modifichi qui: scritto a mano, anche passato a un componente o in un condiviso */
  --origin-rule:    var(--warning-500);  /* Regola: si cambia nella Mappa › Regole */
  --origin-catalog: var(--blue-600);     /* Catalogo: viene dal DMS */
  --origin-code:    var(--grey-500);     /* dal codice: si lascia una nota (contorno puntinato) */
  /* tinte della carrozzeria (nota segn:muo8syfqk0au, 30 set 2026): il colore vero nel filtro Colore del catalogo.
     Una per gruppo colore del Publisher (body_colorgroup di PublisherStd.csv), col suo codice nel nome; solo per i campioni */
  --paint-white: #ffffff;  --paint-silver: #c4c8cc; --paint-grey: #7d8185;   --paint-black: #1f2022;
  --paint-beige: #d9c7a3;  --paint-brown: #6e4b32;  --paint-bronze: #9a6a3f; --paint-gold: #c9a646;
  --paint-yellow: #f2cf2f; --paint-orange: #e8752a; --paint-red: #c62d2d;    --paint-pink: #e79ab5;
  --paint-violet: #b69ad8; --paint-blue: #2f5d9e;   --paint-green: #3f7a45;

  /* ============ MARCHI TERZI: unica eccezione ai token, dichiarati qui e in nessun altro posto ============ */
  --brand-black: #000; --brand-white: #fff;   /* Apple Pay, Google Pay */
  --brand-satispay: #f94c43;
  --brand-paypal: #ffc439; --brand-paypal-blue: #003087; --brand-paypal-blue-2: #009cde;   /* PayPal: giallo del bottone e i due blu del wordmark */
  --brand-gpay-border: #3c4043;   /* Google Pay: bordo del bottone nero */
  --brand-visa: #1a1f71; --brand-mc-red: #eb001b; --brand-mc-orange: #f79e1b;
  --brand-carfax-blue-2: #2b7bd6; --brand-carfax-light: #eef5fb; --brand-carfax-light-glass: rgba(238, 245, 251, .45);
  --brand-carfax-line: #d6e4f2; --brand-carfax-ok: #2e8b3d; --brand-carfax-ok-bg: #e8f5e9;   /* il blocco Carfax riproduce il report ufficiale */

  /* Category accents — used by the best-seller / category badge on vehicle cards.
     Tinte desaturate per restare premium e leggibili su foto auto. */
  --cat-suv:          #5f7150;   /* SUV e Crossover */
  --cat-familiari:    #356491;   /* Familiari */
  --cat-neopatentati: #6d54b0;   /* Neopatentati */
  --cat-eco:          #1f9e12;   /* Elettriche o Ibride (= green-700) */
  --cat-sportive:     #c0392b;   /* Sportive */
  --cat-commerciali:  #a9791b;   /* Commerciali */

  /* ============ SEMANTIC COLOR ROLES ============ */
  --bg:            var(--paper);
  --surface:       var(--white);
  --surface-sunk:  var(--grey-100);
  --fg1:           var(--ink-800);   /* primary text */
  --fg2:           var(--ink-600);   /* secondary text */
  --fg3:           #6b6e6b;          /* tertiary / captions — 4.7:1 su paper, 5.2:1 su bianco (AA testo normale) */
  --fg-on-dark:    var(--paper);
  --fg2-on-dark:   var(--grey-400);
  --border:        var(--grey-300);
  --border-strong: var(--grey-400);

  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --brand-green:   #28bd18;           /* verde del logo: solo per marchio e grafica, NON per testo */
  --accent-text:   var(--green-800);  /* verde per TESTO/link su chiaro: 5.0:1 su paper (il verde logo #28bd18 fa solo 2.5:1) */
  --on-accent:     var(--ink-800);    /* text ON green fills = dark ink */

  /* ============ MASCOTTE (14 ott 2026): la palette dei disegni animati (rig.svg). I ricalchi escono con decine di grigi
     quasi uguali (potrace): tools/mascotte-palette.mjs li porta al token più vicino, check li controlla. Su delega di
     Edoardo, segnalazione da-decidere-palette-mascotte ============ */
  --mascot-ink:    #1c1c1c;            /* contorno */
  --mascot-cloth:  #282828;            /* stoffa nera: polo, pantaloni, giacca */
  --mascot-shade:  var(--ink-800);     /* stoffa in ombra, pieghe scure */
  --mascot-seam:   var(--ink-600);     /* cuciture e dettagli grigi */
  --mascot-grey:   #8d8d8d;            /* dettagli medi: lacci, riflessi */
  --mascot-silver: #a8a8a8;            /* metallo, grigi chiari */
  --mascot-light:  #c6c6c6;            /* dettagli chiari */
  --mascot-skin:   #ececec;            /* pelle */
  --mascot-paper:  var(--paper);       /* bianchi in ombra, colletto */
  --mascot-white:  #fbfbfb;            /* bianchi pieni, occhi */
  --mascot-green:  var(--brand-green); /* logo */

  /* ============ TYPE FAMILIES ============ */
  --font-title:   'Good Times', 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif; /* logo face — big/important titles */
  --font-price:   'Inter', 'Inter Fallback', 'Montserrat', system-ui, sans-serif;      /* prices */
  --font-num:     'Inter', 'Inter Fallback', 'Montserrat', system-ui, sans-serif;      /* numbers in general — km, CV, dates, specs */
  --font-display: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  --font-sans:    'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;   /* i ripieghi con le metriche: @font-face qui sopra (14 ott 2026) */

  /* ============ TYPE SCALE (1.250 major-third-ish, fluid caps) ============ */
  /* in rem (base 16px): così la scala segue la dimensione carattere impostata nel browser (WCAG 1.4.4) */
  --text-2xs:  0.6875rem;  /* 11px: solo Note size="sm", la nota che deve stare in una riga su telefono (nota segn:mupo1pyo31ri, 1 ott 2026) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  2.875rem;   /* 46px */
  --text-4xl:  3.25rem;    /* 52px: solo .gc-display, il titolo più grande del sito */
  /* titoli fluidi (decisione Tipografia, 18 set 2026): hero e claim; 4xl e 5xl tolte perché mai usate */
  --text-display-sm: clamp(1.5rem, 6.8vw, 2.375rem);   /* 24 → 38: hero su mobile, titolo del catalogo */
  --text-display-md: clamp(1.75rem, 4.2vw, 2.25rem);   /* 28 → 36: hero su tablet */
  --text-display-lg: clamp(2.25rem, 3.6vw, 3.25rem);   /* 36 → 52: hero su desktop */

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ============ RADII ============ */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;   /* default control radius */
  --radius-lg:  20px;   /* cards */
  --radius-xl:  28px;   /* large media cards, sheets */
  --radius-pill: 999px;
  --radius-none: 0;     /* angoli vivi dichiarati (foto a filo, skeleton) */
  --radius-hair: 2px;   /* segni sottili: cursori, trattini, mini-loghi */

  /* ============ SPACING (4px base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============ LAYOUT ============ */
  --container-max: 1760px;             /* tetto contenuto: catalogo e scheda (decisione Layout, 18 set 2026) */
  --container-content: 1280px;         /* pagine di contenuto e checkout */
  --container-form: 560px;             /* form, fogli, modali, stati vuoti */
  --container-sheet: 440px;            /* pannelli laterali contestuali */
  --gutter: clamp(20px, 4vw, 48px);    /* padding laterale fluido */
  --appbar-h: 64px;                    /* altezza della barra in alto: 64 mobile, 72 da 900 (qui sotto). Barra, drawer e sticky la seguono (decisione Barra in alto, 23 set 2026) */
  --appbar-h-compact: 48px;            /* la barra compatta sotto 900, quando si scorre: G + hamburger (28 set 2026). Resta ≥ --touch-min */
  --container-reading: 880px;          /* colonna di lettura: FAQ, testi lunghi, form a tutta pagina (decisione Sezioni di pagina, 18 set 2026) */
  --section-gap: var(--space-12);      /* ritmo tra le sezioni: 48 → 64 da 600 → 80 da 900 (decisione Sezioni di pagina) */

  /* ============ CONTROL SIZING (decisione Button, 17 set 2026) ============ */
  --control-sm: 40px;    /* bottoni e campi compatti: bersaglio esteso a --touch-min */
  --control-md: 48px;    /* taglia predefinita */
  --control-lg: 56px;    /* CTA di pagina (hero, promo, form) */
  --touch-min: 44px;     /* bersaglio touch minimo */

  /* ============ ELEVATION (soft, Airbnb-style) ============ */
  --shadow-xs: 0 1px 2px rgba(43,43,43,.06);
  --shadow-sm: 0 2px 8px rgba(43,43,43,.07);
  --shadow-md: 0 6px 20px rgba(43,43,43,.09);
  --shadow-lg: 0 14px 40px rgba(43,43,43,.13);
  --shadow-xl: 0 24px 60px rgba(43,43,43,.18);
  --ring-accent: 0 0 0 3px rgba(58,226,39,.35);
  /* lo stato di una cosa misurata (16 ott 2026, decisione Componenti delle dashboard): a posto, da guardare, fermo, non misurato.
     Li usano Meter, StatusStrip e le legende; un ruolo, un token */
  --status-ok: var(--success-500);
  --status-warn: var(--warning-500);
  --status-ko: var(--danger-500);
  --status-none: var(--grey-200);
  --border-dashed: 2px dashed var(--green-300);   /* contorno di proposta: l'opzione consigliata, ciò che è suggerito ma non ancora scelto */

  /* ============ Z-INDEX (decisione Elevazione, 18 set 2026): livelli con nome, mai numeri nelle pagine ============ */
  --z-1: 1; --z-2: 2; --z-3: 3; --z-4: 4; --z-5: 5;   /* ordine locale dentro un componente (foto, etichette, CTA a cavallo) */
  --z-sticky: 20;     /* barre che restano in vista scorrendo (navbar, barra filtri, barra della scheda) */
  --z-dropdown: 40;   /* pannelli ancorati a un controllo (ricerca, filtri, suggerimenti) */
  --z-float: 60;      /* chat, mascotte, barra fissa in basso */
  --z-scrim: 80;      /* velo (quando è un elemento a sé) */
  --z-sheet: 90;      /* pannelli laterali, fogli, drawer, chat aperta */
  --z-modal: 100;     /* modali e lightbox */
  --z-toast: 110;     /* avvisi sopra tutto */

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.45,0,.25,1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);   /* pannelli, fogli, drawer: parte deciso e si posa piano */
  /* motion-decorative (decisione Movimento, 18 set 2026): durate proprie per ciò che non è un'interazione;
     tutte ferme con prefers-reduced-motion (regola globale in fondo al file) */
  --dur-reveal:  600ms;   /* comparsa allo scorrimento (sezioni, mascotte degli atti, chat) */
  --dur-spin:    800ms;   /* spinner e cursore lampeggiante */
  --dur-gesture: 900ms;   /* gesti della mascotte (cenno, saluto) */
  --dur-pulse:   1s;      /* puntini "sta scrivendo" */
  --dur-idle:    4s;      /* respiro della mascotte a riposo */
  --dur-marquee: 60s;     /* nastro delle marche */

  /* ============ GRAFICI (decisione Dati e grafici, 24 set 2026) ============ */
  /* Categoriali: sei tinte prese dalle famiglie del marchio, in ordine FISSO (l'ordine è ciò che le tiene distinte
     anche per chi non distingue rosso e verde). Validate con il metodo dataviz sul bianco delle card: luce 0,48–0,62,
     croma ≥ 0,10, vicine distinte ΔE ≥ 12,1 con daltonismo e ≥ 22,2 a vista normale, contrasto ≥ 3:1 anche su paper.
     Le prime tre reggono anche il confronto a coppie (dispersione): oltre tre gruppi si piega in «Altro».
     Oltre la sesta serie niente tinte nuove: «Altro». Stanno lontane (ΔE ≥ 9,6) dai colori di stato, che restano per lo stato. */
  --chart-1: #207e18;   /* verde Gencar (famiglia green-800): la serie unica e quella che conta */
  --chart-2: #814cbb;   /* viola (famiglia cat-neopatentati) */
  --chart-3: #0094a4;   /* petrolio (famiglia info-500) */
  --chart-4: #a0514d;   /* terracotta (famiglia cat-sportive), lontana dal rosso di errore */
  --chart-5: #1b71cc;   /* blu (famiglia blue-600 e cat-familiari) */
  --chart-6: #8f6b09;   /* ocra (famiglia cat-commerciali), lontana dall'ambra di avviso */
  --chart-other: var(--grey-400);   /* «Altro» e serie di contesto: con l'enfasi una serie è verde, le altre grigie */
  /* Sequenziale verde, per le quantità (calendario, mappe di calore): una tinta sola, dal chiaro allo scuro. Il passo 1
     può quasi sparire nel fondo; i passi 4–7 sono la scala ORDINALE (imbuto, fasce): il più chiaro fa 2,7:1 sul bianco. */
  --chart-seq-1: #d9f4d5;
  --chart-seq-2: #afe5a8;
  --chart-seq-3: #7ccf73;
  --chart-seq-4: #51b148;
  --chart-seq-5: #32912a;
  --chart-seq-6: #22701c;
  --chart-seq-7: #1a5315;
  /* Divergente, per sotto e sopra un riferimento (obiettivo, media): blu freddo e terracotta calda, centro grigio neutro.
     Tre passi per braccio, stessa luce a pari distanza dal centro. Mai verde e rosso: sono i colori di stato. */
  --chart-div-neg-3: #0e509d;
  --chart-div-neg-2: #3f78c2;
  --chart-div-neg-1: #7fa7dd;
  --chart-div-mid:   var(--grey-200);
  --chart-div-pos-1: #da9286;
  --chart-div-pos-2: #be5b4d;
  --chart-div-pos-3: #9a3326;
  /* Arredo: griglia e assi a filo e recessivi, mai tratteggiati; il testo non prende mai il colore della serie */
  --chart-surface:   var(--white);      /* fondo del grafico e spazio di 2 px fra i segni che si toccano */
  --chart-grid:      var(--grey-200);   /* linee della griglia, 1 px */
  --chart-axis:      var(--grey-300);   /* linea di base e asse */
  --chart-text:      var(--fg3);        /* etichette degli assi, tacche, legenda secondaria */
  --chart-crosshair: var(--grey-400);   /* linea verticale che segue il puntatore */
  --chart-target:    var(--ink-800);    /* segno dell'obiettivo (valore contro obiettivo, oggi nel cronoprogramma) */
  --chart-track:     var(--chart-seq-1);   /* binario dell'anello: un passo chiaro della stessa tinta del riempimento */
  --chart-band-1:    var(--grey-300);   /* fasce qualitative del valore contro obiettivo: scarso */
  --chart-band-2:    var(--grey-200);   /* sufficiente */
  --chart-band-3:    var(--grey-100);   /* buono */
  --chart-wash:       .12;   /* opacità del velo sotto una linea sola */
  --chart-wash-stack: .32;   /* opacità delle fasce impilate: il bordo della fascia è la linea piena */
  --chart-stroke: 2px;       /* spessore delle linee */
  --chart-gap: 2px;          /* spazio di superficie fra barre, segmenti e anelli attorno ai punti */
}
@media (min-width: 900px) { :root { --appbar-h: 72px; } }
/* sotto 900, scorrendo, la NavBar si compatta (html[data-appbar="compact"]): drawer e sticky seguono la nuova altezza */
@media (max-width: 899px) { :root[data-appbar="compact"] { --appbar-h: var(--appbar-h-compact); } }

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */
.gc-display {
  font-family: var(--font-title);
  font-weight: var(--weight-regular);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  color: var(--fg1);
}
h1, .gc-h1 {
  font-family: var(--font-title);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-transform: uppercase;   /* Good Times è sempre MAIUSCOLO (decisione Sezioni di pagina, 18 set 2026) */
  color: var(--fg1);
}
/* un titolo h1 con la classe di un altro ruolo (gc-h2…gc-h5) prende quel ruolo: il maiuscolo è solo di Good Times (8 ott 2026) */
.gc-h2, .gc-h3, .gc-h4, .gc-h5 { text-transform: none; }
h2, .gc-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
h3, .gc-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
h4, .gc-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
/* a capo (24 set 2026): i titoli si dividono in righe di lunghezza simile, senza una parola sola in fondo
   («Trova auto adatte al tuo / budget»); i paragrafi evitano l'ultima riga di una parola. */
.gc-display, h1, .gc-h1, h2, .gc-h2, h3, .gc-h3, h4, .gc-h4 { text-wrap: balance; }
.gc-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
p, .gc-body, .gc-lead { text-wrap: pretty; }
p, .gc-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
}
.gc-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.gc-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg3);
}
/* i ruoli di testo degli strumenti (decisione Tipografia degli strumenti, 1 ott 2026): la classe locale tiene solo il layout */
.gc-meta {   /* testo di contorno: etichette dei numeri, didascalie, aiuti; più chiaro gc-caption, più grande gc-small (gc-note è del componente Note) */
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.gc-text {   /* testo: il corpo fitto degli strumenti (celle, righe di elenco, dettagli); per le cifre gc-spec */
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg1);
}
.gc-h5 {     /* titolo di un riquadro o di un gruppo dentro una pagina, sotto gc-h4 */
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.gc-overline {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3);
}
/* Technical / numeric data — km, CV, cilindrata, dates — in Inter */
.gc-spec {
  font-family: var(--font-num);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.gc-price {
  font-family: var(--font-price);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
a, .gc-link {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: var(--weight-semi);
}
a:hover, .gc-link:hover { text-decoration: underline; }
button.gc-link { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: var(--weight-bold); cursor: pointer; }   /* link di azione dentro una frase (decisione Link di azione, 18 set 2026) */
a:focus-visible, .gc-link:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--radius-xs); }
/* enfasi nel testo (RichLite, components.jsx; dalla chat alle FAQ della scheda, 29 set 2026): **grassetto** nel colore
   del titolo, cifre con unità e prezzi in verde e in grassetto, _corsivo_ */
.gc-rich-b { font-weight: var(--weight-bold); color: var(--fg1); }
.gc-rich-hi { color: var(--green-800); font-weight: var(--weight-bold); font-family: var(--font-num); }
.gc-rich-em { font-style: italic; color: var(--fg1); }
/* ==parola chiave== (RichLite): verde testo e grassetto nel carattere della frase, anche in un titolo; una o due per frase (2 ott 2026) */
.gc-rich-key { color: var(--accent-text); font-weight: var(--weight-bold); }
:is(h1, h2, h3, h4, .gc-display, .gc-h1, .gc-h2, .gc-h3, .gc-h4, .gc-h5) .gc-rich-key { font-weight: inherit; }   /* nel titolo cambia solo il colore */
/* gc-hit: bersaglio --touch-min per un link o un termine di testo che sta da solo (una cella, una riga
   di contatti), senza allargare la riga, come .gc-crumb__link. Dentro una frase no: WCAG 2.5.8 esenta
   i link in linea e l'area coprirebbe le righe vicine (decisione Bersagli di testo, 29 set 2026). */
.gc-hit { position: relative; }
.gc-hit::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, var(--touch-min)); height: var(--touch-min); transform: translate(-50%, -50%); }

/* ============ MICRO-ANIMATIONS ============ */
@keyframes gc-spin { to { transform: rotate(360deg); } }


/* ── Mobile: igiene di base ─────────────────────────────────────────────
   - niente zoom automatico di iOS sui campi (font < 16px)
   - niente ritardo/doppio tap sui controlli, niente flash grigio al tocco
   - tap target minimo 44px sui controlli principali (WCAG 2.5.8 / HIG) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Accessibilità: focus visibile, skip link, alto contrasto ────────────── */
/* anello di focus unico per tastiera (non compare al click/tap) */
:focus-visible { outline: 3px solid var(--green-800); outline-offset: 2px; border-radius: var(--radius-xs); }
:focus:not(:focus-visible) { outline: none; }
/* "Vai al contenuto": invisibile finché non riceve il focus da tastiera */
/* salta al contenuto: fuori dallo schermo finché non riceve il fuoco dalla tastiera, poi sopra tutto (--z-toast) */
.gc-skip { position: absolute; left: var(--space-4); top: var(--space-3); z-index: var(--z-toast); transform: translateY(calc(-100% - var(--space-8))); background: var(--ink-800); color: var(--paper);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: var(--weight-bold); text-decoration: none; }
.gc-skip:focus { transform: none; }
.gc-skip:focus-visible { outline: none; box-shadow: var(--ring-accent); }
main:focus { outline: none; }
/* modalità alto contrasto (Windows): i riempimenti spariscono, restano bordi e colori di sistema */
@media (forced-colors: active) {
  .gc-brand__mark { forced-color-adjust: none; background-color: CanvasText; }
  .gc-brand__mark--text { color: CanvasText; }
  .is-sel, .is-on, .is-active, [aria-pressed="true"], [aria-selected="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
  .gc-hero2__stage::after { display: none; }
}
button, a, [role="button"], input, select, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 899px) {
  input, select, textarea { font-size: max(1em, 16px); }
  select { min-height: var(--touch-min); }
}

/* ============ STATI DI SISTEMA: caricamento ============
   Spinner per le ATTESE BREVI dentro un'azione (bottone, lookup targa).
   Skeleton per i CONTENUTI che arrivano (card, liste, pannelli): stessa geometria del
   contenuto finale, così niente salta; shimmer lento e a basso contrasto; fermo per chi
   riduce il movimento; un solo annuncio per gli screen reader (aria-busy + .gc-sr-only). */
/* ============ ETICHETTA DI CAMPO e NOTA (decisioni Etichette e Note e aiuti, 18 set 2026) ============
   gc-label: il testo sopra un campo o un gruppo di scelte, sentence case, text-sm 600 fg2 (i titoli di gruppo restano gc-overline).
   gc-note: il testo di supporto sotto un controllo o in fondo a un form, text-xs fg2, icona 14 opzionale.
   Stati: is-error (danger) su entrambi; is-disabled sull'etichetta; is-success sulla nota. */
.gc-label { display: block; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semi); line-height: var(--leading-normal); color: var(--fg2); margin-bottom: var(--space-2); }
.gc-label.is-error { color: var(--danger-500); }
.gc-label.is-disabled { opacity: .4; }
.gc-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg2); }
.gc-note > svg, .gc-note > i { flex-shrink: 0; }
.gc-note.is-error { color: var(--danger-500); font-weight: var(--weight-semi); }
.gc-note.is-success { color: var(--green-800); font-weight: var(--weight-semi); }
.gc-note--center { justify-content: center; text-align: center; }
/* sm: la nota di una riga sotto un bottone a tutta larghezza su telefono (la caparra nella scheda): text-2xs (1 ott 2026) */
.gc-note--sm { font-size: var(--text-2xs); }

/* Selezione singola: radio nativi in una superficie unica. */
.gc-seg { display: inline-flex; align-items: stretch; max-width: 100%; padding: var(--space-1); gap: var(--space-1); border-radius: var(--radius-pill); background: var(--grey-200); font-family: var(--font-sans); }
.gc-seg__item { position: relative; display: flex; flex: 1 1 auto; min-width: 0; min-height: var(--control-sm); border-radius: var(--radius-pill); color: var(--ink-700); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-seg__item::before { content: ''; position: absolute; inset: calc((var(--control-sm) - var(--touch-min)) / 2) 0; }
.gc-seg__item:hover:not(:has(:disabled)) { background: var(--white); }
.gc-seg__item:active:not(:has(:disabled)) { transform: scale(.97); }
.gc-seg__item.is-on { background: var(--green-100); color: var(--green-800); }
.gc-seg__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.gc-seg__input:focus-visible + .gc-seg__label { box-shadow: var(--ring-accent); }
.gc-seg__label { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 var(--space-4); border-radius: inherit; font-size: var(--text-sm); font-weight: var(--weight-semi); text-align: center; white-space: nowrap; }
.gc-seg__item.is-on .gc-seg__label { font-weight: var(--weight-bold); }
/* etichetta non scelta in --ink-700: 6,26:1 su --grey-200 (14 ott 2026, su delega). --fg2 e --fg3 valgono #6b6e6b, solo 4,23:1 su quel fondo */
@media (max-width: 599px) { .gc-seg__label { padding: 0 var(--space-3); } }   /* due voci di 14 caratteri stanno in 375 px */
.gc-seg--numeric { width: 100%; }
.gc-seg--full { display: flex; width: 100%; box-sizing: border-box; }   /* tutta la riga (decisione dell'8 ott 2026) */
/* dal 14 ott 2026 ogni voce è larga quanto l'etichetta anche fuori da --full: con le parti uguali l'etichetta più lunga usciva dalla pillola («Torino e dintorni» nel Marketing) */
.gc-seg--numeric .gc-seg__label { padding: 0 var(--space-1); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.gc-seg.is-disabled, .gc-seg__item:has(:disabled) { opacity: .4; cursor: not-allowed; }

/* Tab: schede di navigazione per contenuti affini, con focus mobile e tastiera. */
.gc-tabs { display: inline-flex; align-items: stretch; max-width: 100%; gap: var(--space-1); overflow-x: auto; font-family: var(--font-sans); scrollbar-width: none; }
.gc-tabs::-webkit-scrollbar { display: none; }
.gc-tabs__tab { position: relative; min-height: var(--control-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg2); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semi); white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-tabs__tab::before { content: ''; position: absolute; inset: calc((var(--control-sm) - var(--touch-min)) / 2) 0; border-radius: inherit; }
.gc-tabs__tab:hover:not(:disabled) { background: var(--grey-100); color: var(--fg1); }
.gc-tabs__tab:focus-visible { outline: 0; box-shadow: var(--ring-accent); }
.gc-tabs__tab:active:not(:disabled) { transform: scale(.97); }
.gc-tabs__tab.is-on { color: var(--green-800); font-weight: var(--weight-bold); }
.gc-tabs__tab:disabled { opacity: .4; cursor: not-allowed; }
.gc-tabs__count { font-family: var(--font-num); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.gc-tabs--underline { border-bottom: 1px solid var(--grey-200); }
.gc-tabs--underline .gc-tabs__tab.is-on::after { content: ''; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: var(--space-1); border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: var(--green-500); }
.gc-tabs--overlay { padding: var(--space-1); border: 1px solid var(--grey-200); border-radius: var(--radius-pill); background: var(--glass-bg-strong); box-shadow: var(--shadow-sm); backdrop-filter: blur(var(--space-3)); }
.gc-tabs--overlay .gc-tabs__tab { border-radius: var(--radius-pill); }
.gc-tabs--overlay .gc-tabs__tab.is-on { background: var(--green-100); color: var(--ink-900); }
.gc-tabs.is-disabled { opacity: .6; }

/* Campo targa: taglie 48/56, bande UE e stati nello stesso componente. */
.gc-plate { box-sizing: border-box; width: 100%; min-width: min-content; max-width: calc(var(--space-24) * 3 + var(--space-3)); display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--ink-900); border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-plate--md { height: var(--control-md); }
.gc-plate--lg { height: var(--control-lg); }
.gc-plate:hover:not(.is-disabled):not(.is-loading):not(.is-error) { border-color: var(--green-700); box-shadow: var(--shadow-md); }
.gc-plate:focus-within { border-color: var(--green-700); box-shadow: var(--ring-accent), var(--shadow-md); }
.gc-plate.is-error { border-color: var(--danger-500); box-shadow: var(--ring-danger); }
.gc-plate.is-disabled { opacity: .4; }
.gc-plate__band { width: var(--space-8); flex: 0 0 var(--space-8); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--space-2) 0; background: var(--plate-blue); }
.gc-plate__country { color: var(--white); font-family: var(--font-num); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; }
.gc-plate__input { width: 0; min-width: calc(9ch + 9 * var(--space-1) + 2 * var(--space-2)); flex: 1; padding: 0 var(--space-2); border: 0; outline: 0; background: transparent; color: var(--ink-900); font-family: var(--font-num); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--space-1); text-align: center; text-transform: uppercase; }
/* la targa non si taglia mai (nota segn:mupsis8f3n5m, 2 ott 2026): l'input tiene sempre i 9 segni di «AB 123 CD» con la spaziatura
   e la targa non scende sotto il suo contenuto (min-content: overflow hidden altrimenti la lascia stringere a zero in una riga flessibile;
   width 0 toglie la larghezza propria dell'input, che il min-content conterebbe),
   così in una riga con un bottone si stringe o va a capo il vicino, non spariscono le ultime lettere */
.gc-plate__input::placeholder { color: var(--fg3); opacity: 1; }
.gc-plate__stars { position: relative; width: var(--space-5); height: var(--space-5); flex: 0 0 var(--space-5); }
.gc-plate__stars > span { position: absolute; left: 50%; top: 50%; width: calc(var(--space-1) / 2); height: calc(var(--space-1) / 2); margin: calc(-1 * var(--space-1) / 4); border-radius: var(--radius-pill); background: var(--plate-star); }
.gc-plate__seal, .gc-plate__loader { width: var(--space-3); height: var(--space-3); display: block; border: 1px solid var(--plate-star); border-radius: var(--radius-pill); }
.gc-plate__loader { border-color: var(--plate-star); border-right-color: transparent; }

/* Messaggio nel flusso del form o della pagina. */
.gc-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid currentColor; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semi); line-height: var(--leading-normal); }
.gc-alert > i, .gc-alert > svg { flex: 0 0 auto; }
.gc-alert.is-error { background: var(--danger-bg); color: var(--danger-700); }
.gc-alert.is-success { background: var(--green-100); color: var(--green-800); }
.gc-alert.is-info { background: var(--info-bg); color: var(--info-700); }

/* Tag della promozione settimanale: una forma sola in ogni contesto. */
.gc-promotag { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: 0; height: var(--space-6); padding: 0 var(--space-3); border-radius: var(--radius-pill);
  background: var(--promo, var(--green-700)); color: var(--white); font-family: var(--font-sans); font-size: var(--text-xs);
  font-weight: var(--weight-black); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-promotag > i, .gc-promotag > svg { flex: 0 0 auto; }

/* Stato vuoto: contenuto e azioni coerenti; le pagine regolano solo il posizionamento esterno. */
.gc-empty { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; color: var(--fg2); font-family: var(--font-sans); }
.gc-empty--compact { padding: var(--space-8) var(--space-4); font-size: var(--text-sm); }
.gc-empty--page { padding: var(--space-12) var(--space-6); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-xs); }
.gc-empty__icon { width: var(--control-lg); height: var(--control-lg); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-800); }
.gc-empty__title { margin: 0; color: var(--fg1); font-size: var(--text-lg); }
.gc-empty--page .gc-empty__title { font-size: var(--text-xl); }
.gc-empty__text { max-width: 52ch; margin: 0; }
.gc-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* Schermata di esito: contenuto conclusivo con titolo, dettagli e azioni contestuali. */
.gc-result { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center; color: var(--fg2); font-family: var(--font-sans); }
.gc-result--compact { padding: var(--space-4) 0; }
.gc-result--page { padding: var(--space-6) 0 0; }
.gc-result__icon { width: var(--control-lg); height: var(--control-lg); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--green-500); color: var(--ink-800); }
.gc-result--page .gc-result__icon { width: var(--space-16); height: var(--space-16); }
.gc-result.is-warning .gc-result__icon { background: var(--warning-bg); color: var(--warning-700); }
.gc-result.is-error .gc-result__icon { background: var(--danger-bg); color: var(--danger-700); }
.gc-result__title { margin: 0; color: var(--fg1); font-size: var(--text-md); }
.gc-result--page .gc-result__title { font-size: var(--text-xl); }
.gc-result__text { max-width: var(--container-form); margin: 0; color: var(--fg2); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.gc-result__details { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); color: var(--fg2); font-size: var(--text-sm); }
.gc-result__actions { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-1); }

/* ============ MASCOTTE E NUVOLETTA (decisioni 21 set 2026) ============ */
.gc-mascot { display: block; flex: 0 0 auto; overflow: hidden; }
.gc-mascot--portrait { width: calc(var(--space-16) + var(--space-2)); height: calc(var(--space-16) + var(--space-2)); }
.gc-mascot--figure { width: 100%; height: 100%; overflow: visible; }
.gc-mascot--framed { border: 2px solid var(--green-500); border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-sm); }
.gc-mascot__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.gc-mascot--portrait .gc-mascot__img { object-fit: cover; object-position: 50% 0%; transform: scale(1.35); transform-origin: 50% var(--space-2); }
.gc-mascot.is-talking { animation: gc-mascot-talk var(--dur-gesture) var(--ease-in-out); transform-origin: 50% 95%; }
@keyframes gc-mascot-talk { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-4deg); } 70% { transform: rotate(2.5deg); } }

.gc-bubble { position: relative; box-sizing: border-box; max-width: 100%; margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); color: var(--fg1); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); text-align: left; }
.gc-bubble--accent { border-color: var(--green-200); }
.gc-bubble--tail-left::before, .gc-bubble--tail-bottom-right::after { content: ''; position: absolute; width: var(--space-3); height: var(--space-3); background: inherit; transform: rotate(45deg); }
.gc-bubble--tail-left::before { left: calc(-1 * var(--space-2)); top: var(--gc-bubble-tail-y, 50%); border-left: 1px solid; border-bottom: 1px solid; border-color: inherit; transform: translateY(-50%) rotate(45deg); }
/* coda a destra (30 set 2026): la nuvoletta sta a sinistra di ciò di cui parla (lo spaccato della garanzia, parti nella metà destra).
   --gc-bubble-tail-y sposta la coda laterale in altezza quando la nuvoletta non può stare centrata su ciò che indica (50 % se manca) */
.gc-bubble--tail-right::before { content: ''; position: absolute; width: var(--space-3); height: var(--space-3); background: inherit; right: calc(-1 * var(--space-2)); top: var(--gc-bubble-tail-y, 50%); border-top: 1px solid; border-right: 1px solid; border-color: inherit; transform: translateY(-50%) rotate(45deg); }
.gc-bubble--tail-bottom-right::after { right: var(--space-8); bottom: calc(-1 * var(--space-2)); border-right: 1px solid; border-bottom: 1px solid; border-color: inherit; }
.gc-bubble--tail-none::before, .gc-bubble--tail-none::after { content: none; }
button.gc-bubble { appearance: none; width: auto; cursor: pointer; }
button.gc-bubble:hover { border-color: var(--green-500); box-shadow: var(--shadow-md); }
button.gc-bubble:focus-visible { outline: none; box-shadow: var(--shadow-sm), var(--ring-accent); }
button.gc-bubble:active { transform: scale(.99); }
.gc-bubble b { color: var(--green-800); }
@media (prefers-reduced-motion: reduce) { .gc-mascot.is-talking { animation: none; } }

/* Valutazione: dato non interattivo, tre taglie sulla scala delle icone. */
.gc-stars { display: inline-flex; gap: var(--space-1); color: var(--green-600); }

/* ============ SLIDER (decisione Slider, 18 set 2026) ============
   Traccia da 8; maniglia visiva da 24 dentro il thumb nativo da 44. */
.gc-slider { position: relative; width: 100%; height: var(--touch-min); touch-action: none; }
.gc-slider__track, .gc-slider__fill { position: absolute; top: 50%; height: var(--space-2); transform: translateY(-50%); border-radius: var(--radius-pill); pointer-events: none; }
.gc-slider__track { left: 0; right: 0; background: var(--grey-200); }
.gc-slider__fill { left: var(--slider-start, 0%); right: calc(100% - var(--slider-end, 0%)); background: var(--green-500); }
.gc-slider__input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: var(--touch-min); margin: 0; background: transparent; cursor: pointer; }
.gc-slider--range .gc-slider__input { pointer-events: none; }
.gc-slider__input--min { z-index: var(--z-1); }
.gc-slider__input--max { z-index: var(--z-2); }
.gc-slider__input:focus-visible { outline: none; }
.gc-slider__input::-webkit-slider-runnable-track { height: var(--touch-min); background: transparent; border: 0; }
.gc-slider__input::-moz-range-track { height: var(--touch-min); background: transparent; border: 0; }
.gc-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--touch-min); height: var(--touch-min); border: 0; border-radius: var(--radius-pill); background: radial-gradient(circle, var(--green-500) 0 var(--space-3), var(--white) var(--space-3) var(--space-4), transparent var(--space-4)); cursor: grab; pointer-events: auto; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.gc-slider__input::-moz-range-thumb { width: var(--touch-min); height: var(--touch-min); border: 0; border-radius: var(--radius-pill); background: radial-gradient(circle, var(--green-500) 0 var(--space-3), var(--white) var(--space-3) var(--space-4), transparent var(--space-4)); cursor: grab; pointer-events: auto; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.gc-slider__input:hover::-webkit-slider-thumb { filter: drop-shadow(var(--shadow-sm)); }
.gc-slider__input:hover::-moz-range-thumb { filter: drop-shadow(var(--shadow-sm)); }
.gc-slider__input:active::-webkit-slider-thumb { transform: scale(1.06); cursor: grabbing; }
.gc-slider__input:active::-moz-range-thumb { transform: scale(1.06); cursor: grabbing; }
.gc-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring-accent); }
.gc-slider__input:focus-visible::-moz-range-thumb { box-shadow: var(--ring-accent); }
.gc-slider.is-disabled { opacity: .4; touch-action: auto; }
.gc-slider__input:disabled { cursor: not-allowed; }
.gc-slider__input:disabled::-webkit-slider-thumb { cursor: not-allowed; }
.gc-slider__input:disabled::-moz-range-thumb { cursor: not-allowed; }

/* ============ INTERRUTTORE (decisione Switch, 21 set 2026) ============ */
.gc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); color: var(--fg1); font-family: var(--font-sans); cursor: pointer; }
.gc-switch__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.gc-switch__track { position: relative; flex: 0 0 var(--control-md); width: var(--control-md); height: calc(var(--space-6) + var(--space-1)); border: 1px solid var(--grey-400); border-radius: var(--radius-pill); background: var(--grey-200); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-switch__thumb { position: absolute; top: 50%; left: var(--space-1); width: var(--space-5); height: var(--space-5); border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-sm); transform: translateY(-50%); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-switch:hover:not(.is-disabled) .gc-switch__track { border-color: var(--green-500); }
.gc-switch:active:not(.is-disabled) .gc-switch__thumb { transform: translateY(-50%) scale(.9); }
.gc-switch:has(.gc-switch__input:focus-visible) .gc-switch__track { box-shadow: var(--ring-accent); }
.gc-switch.is-on .gc-switch__track { border-color: var(--green-500); background: var(--green-500); }
.gc-switch.is-on .gc-switch__thumb { transform: translate(calc(var(--control-md) - var(--space-5) - var(--space-2)), -50%); }
.gc-switch.is-on:active:not(.is-disabled) .gc-switch__thumb { transform: translate(calc(var(--control-md) - var(--space-5) - var(--space-2)), -50%) scale(.9); }
.gc-switch.is-disabled { opacity: .4; cursor: not-allowed; }
.gc-switch__copy { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.gc-switch__label { font-size: var(--text-sm); font-weight: var(--weight-semi); line-height: var(--leading-normal); }
.gc-switch__description { color: var(--fg2); font-size: var(--text-xs); line-height: var(--leading-normal); }

/* ============ OPZIONI ESCLUSIVE (decisione RadioCard, 18 set 2026) ============
   Radio nativo; la zona di scelta e gli eventuali controlli interni sono separati. */
.gc-radio { box-sizing: border-box; min-width: 0; border: 1px solid var(--grey-200); border-radius: var(--radius-md); background: var(--white); color: var(--fg1); font-family: var(--font-sans); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-radio:hover:not(.is-disabled) { border-color: var(--grey-400); }
.gc-radio:active:not(.is-disabled) { transform: scale(.99); }
.gc-radio.is-on { border-color: var(--green-500); background: var(--green-100); }
.gc-radio.is-error { border-color: var(--danger-500); }
.gc-radio.is-disabled { opacity: .4; }
.gc-radio:has(.gc-radio__input:focus-visible) { box-shadow: var(--ring-accent); }
.gc-radio.is-error:has(.gc-radio__input:focus-visible) { box-shadow: var(--ring-danger); }
.gc-radio__choice { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-4); cursor: pointer; }
.gc-radio.is-disabled .gc-radio__choice { cursor: not-allowed; }
.gc-radio__input { flex-shrink: 0; width: var(--space-5); height: var(--space-5); margin: 0; accent-color: var(--green-700); }
.gc-radio__input:focus-visible { outline: none; }
.gc-radio__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.gc-radio__title { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
.gc-radio__amount { min-width: 0; font-family: var(--font-price); }
.gc-radio__detail { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg2); }
.gc-radio__extra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + var(--space-5) + var(--space-3)); }
.gc-radio--medium .gc-radio__choice { flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.gc-radio--medium .gc-radio__extra { padding: 0 var(--space-3) var(--space-3); container-type: inline-size; }
/* azione nella card (Btn ghost xs, «Calcola la rata»): sta su una riga sola (nota segn:mupsslq6s1vt, 2 ott 2026).
   Icona allineata al titolo, i lati del bottone entrano nel margine della card; nella card stretta (due card affiancate
   sotto i 400 px) resta la sola etichetta, che prima andava a capo su due righe */
.gc-radio--medium .gc-radio__extra > .gc-btn--xs { margin-inline: calc(-1 * var(--space-2)); }
@container (max-width: 140px) { .gc-radio__extra > .gc-btn--xs > span { display: none !important; } }
.gc-radio--compact .gc-radio__choice { align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.gc-radio--compact .gc-radio__input { width: var(--space-4); height: var(--space-4); }
.gc-radio--compact .gc-radio__title { font-size: var(--text-xs); }
.gc-radio--compact .gc-radio__extra { padding: 0 var(--space-3) var(--space-2); }

/* ============ TESSERE A SCELTA (decisione OptionCard, 21 set 2026) ============ */
.gc-option { position: relative; box-sizing: border-box; min-width: 0; min-height: var(--touch-min); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--grey-200); border-radius: var(--radius-md); background: var(--white); color: var(--fg1); font-family: var(--font-sans); text-align: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-option:hover:not(.is-disabled) { border-color: var(--grey-400); box-shadow: var(--shadow-sm); }
.gc-option:active:not(.is-disabled) { transform: scale(.98); }
.gc-option.is-on { border-color: var(--green-500); background: var(--green-100); }
.gc-option.is-disabled { opacity: .4; cursor: not-allowed; }
.gc-option:has(.gc-option__input:focus-visible) { box-shadow: var(--ring-accent); }
.gc-option__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.gc-option__check { position: absolute; z-index: var(--z-1); top: var(--space-2); right: var(--space-2); width: calc(var(--space-5) + var(--space-1)); height: calc(var(--space-5) + var(--space-1)); display: none; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--green-500); color: var(--ink-800); }
.gc-option.is-on .gc-option__check { display: inline-flex; }
.gc-option__media { display: block; width: 100%; min-width: 0; }
.gc-option__icon { width: var(--touch-min); height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--green-100); color: var(--green-700); }
.gc-option.is-on .gc-option__icon { background: var(--green-500); color: var(--ink-800); }
.gc-option__content { min-width: 0; display: flex; flex-direction: column; align-items: inherit; gap: var(--space-1); }
.gc-option__title { max-width: 100%; font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.gc-option__detail { font-size: var(--text-xs); color: var(--fg2); line-height: var(--leading-normal); }
.gc-option__meta { font-family: var(--font-num); font-size: var(--text-xs); color: var(--fg2); font-variant-numeric: tabular-nums; }
.gc-option--brand { border-color: transparent; background: transparent; }
.gc-option--brand .gc-option__media { width: var(--control-sm); height: var(--control-sm); }
/* tile: tessera QUADRATA col marchio grande — la banda Marca dei suggerimenti (22 set 2026).
   La variante brand resta quella del rail della home, in maschera monocroma: le due si uniranno
   quando si chiuderà la voce Loghi delle marche, che è ancora da decidere. */
.gc-option--tile { aspect-ratio: 1; justify-content: center; gap: var(--space-2); padding: var(--space-3); }
.gc-option--tile .gc-option__media { width: var(--space-16); height: var(--space-16); }
.gc-option--media { align-self: start; width: 100%; align-items: stretch; justify-content: flex-start; text-align: left; }
.gc-option--media .gc-option__media { aspect-ratio: 16 / 10; }
.gc-option--icon { min-height: calc(var(--control-lg) + var(--space-12)); }
.gc-option--compact { min-height: calc(var(--control-lg) + var(--space-4)); }
.gc-option--compact .gc-option__content { align-items: center; }
/* swatch: il colore vero in un quadrato sopra il nome (filtro Colore del catalogo, 30 set 2026). Il filetto interno
   tiene visibile il bianco sul fondo bianco; la spunta di selezionato cade sull'angolo del quadrato */
.gc-option__swatch { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--grey-300); }
.gc-option__swatch + .gc-option__content .gc-option__title { font-size: var(--text-xs); }

/* ============ ACCORDION (decisione Expansion, 21 set 2026) ============ */
.gc-exp { box-sizing: border-box; min-width: 0; color: var(--fg1); font-family: var(--font-sans); }
.gc-exp--surface { border-bottom: 1px solid var(--grey-200); }
.gc-exp__heading { margin: 0; font: inherit; }
.gc-exp__trigger { width: 100%; min-height: var(--control-md); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-exp__trigger:hover:not(:disabled) { background: var(--grey-100); }
.gc-exp__trigger:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-exp__trigger:active:not(:disabled) { transform: scale(.99); }
.gc-exp__trigger:disabled { cursor: not-allowed; }
.gc-exp.is-disabled { opacity: .4; cursor: not-allowed; }
/* la testata è una riga sola (30 set 2026, note segn:muo8z3wp3i4r e segn:muo928m35k90): un'icona o una foto in testa
   al titolo stanno di fianco al testo, mai sopra; poi il riassunto (meta) e la freccia */
.gc-exp__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
.gc-exp__meta { flex: 0 0 auto; color: var(--fg3); font-family: var(--font-num); font-size: var(--text-xs); font-weight: var(--weight-semi); }
.gc-exp__chevron { flex: 0 0 auto; width: var(--space-8); height: var(--space-8); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--grey-100); transition: transform var(--dur-med) var(--ease-out); }
.gc-exp.is-open > .gc-exp__heading .gc-exp__chevron { transform: rotate(180deg); }
.gc-exp__reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-emphasized); }
/* figli diretti: un'Expansion annidata in una aperta resta chiusa finché non la apri (30 set 2026) */
.gc-exp.is-open > .gc-exp__reveal { grid-template-rows: 1fr; }
.gc-exp__body { min-height: 0; overflow: hidden; }
.gc-exp--surface .gc-exp__body { color: var(--fg2); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.gc-exp--surface .gc-exp__body > :first-child { margin-top: var(--space-2); }
.gc-exp--surface .gc-exp__body > :last-child { margin-bottom: var(--space-5); }
/* on-dark: dentro un pannello scuro (le note legali del calcolatore rata, già spese pratica, nota segn:muo8yph12krk, 30 set 2026).
   Il titolo ha il peso delle righe accanto, il velo e il cerchio del chevron sono i chiari su scuro */
.gc-exp--on-dark { color: var(--paper); }
.gc-exp--on-dark .gc-exp__trigger { min-height: var(--touch-min); width: calc(100% + var(--space-4)); margin-inline: calc(-1 * var(--space-2)); padding: 0 var(--space-2); }   /* il testo resta allineato alle righe, il velo del passaggio sborda di --space-2 */
.gc-exp--on-dark .gc-exp__trigger:hover:not(:disabled) { background: var(--on-dark-faint); }
/* è il dettaglio secondario di un pannello scuro, quindi più piccolo delle righe accanto (2 ott 2026, nota segn:muqsi6pk3wyv:
   le note legali del calcolatore rata, sotto «Richiedi preventivo»): titolo text-xs, chevron space-6; il bersaglio resta touch-min */
.gc-exp--on-dark .gc-exp__title { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--grey-400); }
.gc-exp--on-dark .gc-exp__chevron { width: var(--space-6); height: var(--space-6); background: var(--on-dark-faint); }
.gc-exp--on-dark .gc-exp__chevron svg { width: var(--space-4); height: var(--space-4); }
.gc-exp--on-dark .gc-note { color: var(--grey-400); }
.gc-exp--summary { border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.gc-exp--summary .gc-exp__trigger { padding-inline: var(--space-4); }
/* lo spazio sotto è un ::after, non padding: il padding restava visibile a pannello chiuso e lasciava intravedere
   16 px del contenuto (riepilogo del checkout su mobile, 24 set 2026) */
.gc-exp--summary .gc-exp__body { padding: 0 var(--space-4); }
.gc-exp--summary .gc-exp__body::after { content: ''; display: block; height: var(--space-4); }
/* l'informazione principale non si ripiega (1 ott 2026, note segn:mupnw9kl9cq4 e segn:mupnxjxx0dli): fixed = sempre aperta,
   peek = aperta in anteprima fino all'elemento data-exp-peek, sfumata in fondo, con «Mostra tutto» sotto. La testata
   è un titolo: niente freccia, niente velo al passaggio */
.gc-exp__trigger.is-static { cursor: default; }
.gc-exp__trigger.is-static:hover { background: transparent; }
.gc-exp__trigger.is-static:active { transform: none; }
.gc-exp--fixed > .gc-exp__reveal, .gc-exp--peek > .gc-exp__reveal { grid-template-rows: 1fr; }
.gc-exp--peek:not(.is-open) > .gc-exp__reveal > .gc-exp__body { max-height: var(--gc-exp-peek, calc(var(--space-24) * 2)); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--space-12)), transparent); mask-image: linear-gradient(to bottom, black calc(100% - var(--space-12)), transparent); }
.gc-exp__more { align-self: flex-start; margin-top: var(--space-2); }
@media (min-width: 900px) {
  /* solo i figli diretti: un'Expansion dentro una responsive (le spese pratica nella FoldBlock della rata) resta la sua */
  .gc-exp--responsive > .gc-exp__reveal { grid-template-rows: 1fr; }
  .gc-exp--responsive > .gc-exp__heading .gc-exp__chevron { display: none; }
  .gc-exp--responsive > .gc-exp__heading .gc-exp__trigger { cursor: default; }
  .gc-exp--responsive > .gc-exp__heading .gc-exp__trigger:hover { background: transparent; }
}

/* ============ CARD e PANEL (decisione Card, 18 set 2026) ============
   Due superfici: gc-card (raggio lg, shadow-sm, padding 20 → 24 da 900) per card e blocchi, gc-panel (raggio xl, shadow-md,
   padding 24 → 32) per form, fogli e pannelli. --flat: senza ombra, colore dalla pagina. is-link: cliccabile, con hover
   (shadow-md, -3px come VehicleCard), premuto (scala .99) e focus da tastiera (anello). Le classi locali tengono solo il layout. */
.gc-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.gc-panel { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-6); }
.gc-card--flat, .gc-panel--flat { box-shadow: none; }
/* Card come bottone (as="button", es. i numeri del Quadro): niente bordo e caratteri del browser, il resto è della card */
button.gc-card, button.gc-panel { border: 0; font: inherit; color: inherit; text-align: inherit; }
.gc-card.is-link, .gc-panel.is-link { cursor: pointer; transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.gc-card.is-link:hover, .gc-panel.is-link:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.gc-card.is-link:active, .gc-panel.is-link:active { transform: scale(.99); }
.gc-card.is-link:focus-visible, .gc-panel.is-link:focus-visible { outline: none; box-shadow: var(--shadow-md), var(--ring-accent); }
a.gc-card, a.gc-panel, a.gc-card:hover, a.gc-panel:hover { color: inherit; text-decoration: none; }
a.gc-card:focus-visible { border-radius: var(--radius-lg); } a.gc-panel:focus-visible { border-radius: var(--radius-xl); }   /* il fuoco dei link non cambia il raggio della card */   /* Card href: un link vero che si legge come una card, non come un link di testo (8 ott 2026) */
@media (min-width: 900px) { .gc-card { padding: var(--space-6); } .gc-panel { padding: var(--space-8); } }

/* ============ DIVISORE (decisione Divisore, 22 set 2026) ============ */
.gc-divider { flex: 0 0 auto; box-sizing: border-box; color: var(--fg3); }
.gc-divider--horizontal { display: flex; align-items: center; width: 100%; gap: var(--space-3); margin-block: var(--space-4); }
.gc-divider--horizontal::before, .gc-divider--horizontal.gc-divider--label::after { content: ''; flex: 1; height: 1px; background: var(--grey-200); }
.gc-divider--vertical { align-self: center; width: 1px; height: var(--space-6); margin-inline: var(--space-2); background: var(--grey-300); }
.gc-divider__label { flex: 0 0 auto; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: var(--leading-normal); }

/* ============ TESSERA DI AZIONE (decisione Tessera di azione, 22 set 2026) ============ */
.gc-action { box-sizing: border-box; display: flex; width: 100%; min-height: calc(var(--control-lg) + var(--space-4)); align-items: center; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--grey-300); text-align: left; color: var(--fg1); font-family: var(--font-sans); }
.gc-action--stack { flex-direction: column; justify-content: center; text-align: center; padding: var(--space-3) var(--space-2); }
.gc-action--accent { border-color: var(--green-500); background: var(--green-100); color: var(--ink-800); }
.gc-action--surface:hover:not(:disabled) { border-color: var(--grey-400); }
.gc-action--accent:hover:not(:disabled) { border-color: var(--green-600); background: var(--green-200); }
.gc-action__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm);
  border-radius: var(--radius-pill); background: var(--grey-100); color: var(--fg2); }
.gc-action--stack .gc-action__icon, .gc-action--accent .gc-action__icon { width: var(--control-md); height: var(--control-md); background: var(--green-100); color: var(--green-700); }
.gc-action--accent .gc-action__icon { background: var(--green-500); color: var(--ink-800); }
.gc-action__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.gc-action__title { font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.gc-action__detail { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg2); }
.gc-action:disabled { opacity: .4; cursor: not-allowed; }
.gc-action:disabled:hover { box-shadow: var(--shadow-sm); transform: none; }
@media (min-width: 900px) { .gc-action.gc-card { padding: var(--space-4); } }

/* ============ VOCE DI NAVIGAZIONE (decisione Voce di navigazione, 22 set 2026) ============
   gc-navitem: la voce della barra in alto (--bar) e quella del menu mobile (--drawer) sono la stessa voce.
   La pagina corrente si dichiara con aria-current="page" — la classe da sola non arriva agli assistivi — e
   si tinge di verde tenue, non di ink pieno, per non pesare accanto al CTA verde della barra.
   Bersaglio --touch-min su entrambe le forme: nella barra l'area cliccabile è estesa con ::before, come .gc-btn--sm.
   Stati: hover · focus · premuto · corrente · disabilitato. Errore e caricamento non si applicano.
   Telefono e WhatsApp non stanno qui: sono azioni e usano Btn. */
.gc-navitem { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0; border: 0; background: transparent; color: var(--fg1); font-family: var(--font-sans); font-weight: var(--weight-semi);
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-navitem:hover:not(:disabled) { background: var(--grey-100); }
.gc-navitem:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-navitem:active:not(:disabled) { transform: scale(.99); }
.gc-navitem[aria-current] { background: var(--green-100); color: var(--green-800); }
.gc-navitem[aria-current]:hover:not(:disabled) { background: var(--green-200); }
.gc-navitem:disabled { opacity: .4; cursor: not-allowed; }
.gc-navitem__label { min-width: 0; }

/* barra in alto: pillola alta --control-sm con il bersaglio esteso a 44 */
.gc-navitem--bar { min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-base); }
.gc-navitem--bar::before { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--control-sm) - var(--touch-min)) / 2); bottom: calc((var(--control-sm) - var(--touch-min)) / 2); }
/* fino al tetto del sistema la barra deve stare in una riga: la voce si stringe da sé, la pagina non la ritocca.
   Si stringe solo il margine interno: il testo resta --text-base a ogni larghezza da desktop (nota segn:mupshtoqably,
   2 ott 2026: a 14 px le quattro pagine si leggevano piccole accanto al logo; a 900 la riga regge comunque) */
@media (max-width: 1759px) { .gc-navitem--bar { padding-inline: var(--space-2); } }
/* la voce compatta (size="sm", 16 ott 2026): testo text-sm e icona da 16, per una barra con molte voci (i domini del portale) */
.gc-navitem--sm { font-size: var(--text-sm); gap: var(--space-1); padding-inline: var(--space-2); }
.gc-navitem--sm .gc-navitem__icon { width: var(--space-4); height: var(--space-4); }
/* il numero di cose da fare accanto al nome (16 ott 2026): una pillola nei colori di Badge warn, come una notifica */
.gc-navitem__n { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-5); height: var(--space-5); margin-left: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--warning-bg); color: var(--warning-700); font-family: var(--font-num); font-size: var(--text-2xs); font-weight: var(--weight-bold); line-height: 1; }

/* menu mobile: riga piena su carta, icona a sinistra e freccia a destra */
.gc-navitem--drawer { width: 100%; min-height: var(--touch-min); gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-xs); font-size: var(--text-md); }
.gc-navitem--drawer:hover:not(:disabled) { background: var(--white); box-shadow: var(--shadow-sm); }   /* la riga resta bianca: al passaggio si alza soltanto */
.gc-navitem--drawer .gc-navitem__icon { flex-shrink: 0; color: var(--fg2); }
.gc-navitem--drawer .gc-navitem__chev { margin-left: auto; flex-shrink: 0; color: var(--fg3); }
.gc-navitem--drawer[aria-current] .gc-navitem__icon { color: var(--green-700); }

/* tono scuro: la riga dell'account in cima al menu, che apre un pannello e non è mai la pagina corrente */
.gc-navitem--dark { background: var(--ink-800); color: var(--paper); }
.gc-navitem--dark:hover:not(:disabled) { background: var(--ink-900); }
.gc-navitem--dark .gc-navitem__icon, .gc-navitem--dark .gc-navitem__chev { color: var(--green-300); }

/* ============ SIGILLO DELLE GARANZIE (decisione Garanzie e rimborso, 23 set 2026) ============
   gc-seal: le due promesse di Gencar, sempre insieme e sempre con i loro numeri esatti: 1 anno di garanzia su ogni
   auto, e il ripensamento — 14 giorni dalla consegna se compri in salone, 30 se compri dal sito. Stesso sigillo dove
   si sceglie, dove si decide e dove si paga. channel="online" (checkout) dice solo i 30 giorni, che sono i suoi. */
.gc-seal { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--fg1); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); }
.gc-seal > i, .gc-seal > svg { flex-shrink: 0; margin-top: calc(var(--space-1) / 2); color: var(--green-700); }
.gc-seal__main { font-weight: var(--weight-bold); }
.gc-seal__back { display: block; color: var(--fg2); font-size: var(--text-xs); }
/* center: icona e prima riga centrate insieme, il ripensamento centrato sotto (1 ott 2026, note segn:mupo25cgd1yy e
   segn:mupo3gh6pf12: prima il blocco era centrato ma il testo restava a sinistra, e le righe non si allineavano al centro) */
.gc-seal--center { display: block; text-align: center; }
.gc-seal--center > i, .gc-seal--center > svg { display: inline-block; vertical-align: middle; margin: 0 var(--space-1) 0 0; }
.gc-seal--center .gc-seal__main { vertical-align: middle; }

/* ============ AVATAR (decisione Avatar, 23 set 2026) ============
   gc-avatar: le iniziali di una persona in un tondo. Recensioni (verde tenue) e profilo (scuro) usavano due tondi
   diversi e due calcoli delle iniziali: ora uno. Taglie sm 32 · md 40. Non è un controllo: nessuno stato. */
.gc-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--space-8); height: var(--space-8);
  border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-800);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; }
.gc-avatar--md { width: var(--control-sm); height: var(--control-sm); font-size: var(--text-sm); }
.gc-avatar--ink { background: var(--ink-800); color: var(--paper); }

/* ============ CONTENUTO DI TERZE PARTI (decisione Contenuto di terze parti, 23 set 2026) ============
   gc-embed: una mappa o un video di un altro servizio NON si carica da solo. Finché la persona non lo chiede resta
   un segnaposto che dice chi è il fornitore e cosa comporta (i suoi cookie), con il bottone per caricarlo e il link
   per aprirlo sul sito del fornitore. È per questo che il sito non ha bisogno di un banner: senza un gesto esplicito
   non parte nessun cookie che non sia tecnico. Il segnaposto riempie il riquadro che lo contiene. */
.gc-embed { position: relative; width: 100%; height: 100%; min-height: calc(var(--space-16) * 3); overflow: hidden; background: var(--grey-100); }
.gc-embed__frame { display: block; width: 100%; height: 100%; border: 0; }
.gc-embed__ask { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-5); text-align: center; color: var(--fg2); font-size: var(--text-sm); line-height: var(--leading-normal); }
.gc-embed__ask > i, .gc-embed__ask > svg { color: var(--green-700); }
.gc-embed__ask p { max-width: 320px; margin: 0; }
.gc-embed__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* ============ RIEPILOGO DELLA PERMUTA (decisione Riepilogo della permuta, 23 set 2026) ============
   gc-tradein: l'auto riconosciuta dalla targa, i suoi dati, la stima quando c'è, e UN'azione che decide la pagina
   (togli, usala come anticipo, valutala). Checkout e scheda auto usano lo stesso riepilogo. È un riepilogo,
   non un controllo: gli stati li ha il bottone dell'azione. --accent è la versione su fondo verde tenue. */
.gc-tradein { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--white); font-size: var(--text-sm); }
.gc-tradein--accent { background: var(--green-100); }
.gc-tradein__ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--control-sm); height: var(--control-sm);
  border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-700); }
.gc-tradein--accent .gc-tradein__ico { background: var(--white); }
.gc-tradein__body { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.gc-tradein__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); color: var(--fg1); }
.gc-tradein__value { color: var(--fg2); font-size: var(--text-xs); }
.gc-tradein__value b { color: var(--green-800); font-family: var(--font-price); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* ============ INDICATORE DI PASSI (decisione Indicatore di passi, 23 set 2026) ============
   gc-stepper: dove si è in un percorso a tappe. Una lista ordinata; ogni passo è fatto (spunta), corrente
   (verde, aria-current="step") o da fare (grigio). Due forme: --steps, numeri collegati da una linea
   (valutazione, checkout); --bars, una barra per passo con l'etichetta e la risposta data sotto (concierge).
   Non è un controllo: niente hover, fuoco o premuto. L'unico stato è il corrente. */
.gc-stepper { display: flex; margin: 0; padding: 0; list-style: none; }
.gc-stepper__step { position: relative; min-width: 0; color: var(--fg3); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semi); line-height: var(--leading-tight); }
.gc-stepper__num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--space-8); height: var(--space-8);
  border-radius: var(--radius-pill); background: var(--grey-100); color: var(--fg3); font-family: var(--font-num); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.gc-stepper__label { min-width: 0; }
.gc-stepper__detail { display: block; overflow: hidden; margin-top: var(--space-1); color: var(--fg2); font-weight: var(--weight-medium); white-space: nowrap; text-overflow: ellipsis; }
.gc-stepper__step.is-done { color: var(--fg2); }
.gc-stepper__step.is-done .gc-stepper__num { background: var(--green-100); color: var(--green-800); }
.gc-stepper__step[aria-current] { color: var(--fg1); }
.gc-stepper__step[aria-current] .gc-stepper__num { background: var(--green-500); color: var(--ink-800); }
/* --steps: numeri al centro, collegati dalla linea che va dal passo prima a questo */
.gc-stepper--steps { align-items: flex-start; }
.gc-stepper--steps .gc-stepper__step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.gc-stepper--steps .gc-stepper__step + .gc-stepper__step::before { content: ''; position: absolute; top: calc(var(--space-8) / 2 - 1px); height: 2px;
  left: calc(-50% + var(--space-5)); right: calc(50% + var(--space-5)); border-radius: var(--radius-pill); background: var(--grey-200); }
.gc-stepper--steps .gc-stepper__step.is-done::before, .gc-stepper--steps .gc-stepper__step[aria-current]::before { background: var(--green-500); }
/* --bars: la forma compatta, una barra per passo */
.gc-stepper--bars { gap: var(--space-2); }
.gc-stepper--bars .gc-stepper__step { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-2); }
.gc-stepper--bars .gc-stepper__step::before { content: ''; display: block; height: var(--space-1); border-radius: var(--radius-pill); background: var(--grey-200); }
.gc-stepper--bars .gc-stepper__step.is-done::before, .gc-stepper--bars .gc-stepper__step[aria-current]::before { background: var(--green-500); }
.gc-stepper--bars .gc-stepper__step[aria-current] { color: var(--green-800); }
.gc-stepper--bars .gc-stepper__num { display: none; }
.gc-stepper--bars .gc-stepper__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ============ CARD VEICOLO: LINK ESTESO (decisione Card veicolo come link, 23 set 2026) ============
   Il titolo della card è un <a href> vero verso la scheda; il suo ::after copre tutta la card, così clic, tasto
   centrale e "apri in una nuova scheda" funzionano ovunque. Cuore e bottoni stanno sopra lo strato (gc-vcard__over).
   Il fuoco lo prende il link, e la card mostra l'anello. Prima la card era un <article role="link"> senza href
   con dentro due bottoni: un link che contiene controlli non è valido. */
.gc-vcard__link { color: inherit; text-decoration: none; outline: none; }
.gc-vcard__link::after { content: ''; position: absolute; inset: 0; z-index: var(--z-1); }
.gc-vcard__over { position: relative; z-index: var(--z-2); }
/* Scudo Garanzia della card (nota del 30 set 2026): tondo verde chiaro come prima, ora bottone vero (IconButton sm,
   bersaglio 44). Al passaggio, al fuoco o al tocco la nuvoletta (SpeechBubble, coda in basso a destra) sale sopra lo
   scudo con la punta al suo centro: la coda sta a --space-8 dal bordo destro ed è larga --space-3. Il testo per chi usa
   uno screen reader è l'etichetta del bottone: la nuvoletta è solo visiva. */
.gc-vcard__warranty { position: relative; display: inline-flex; }
.gc-vcard__shield.gc-ibtn, .gc-vcard__shield.gc-ibtn:hover { background: var(--green-100); color: var(--green-800); cursor: help; }
.gc-vcard__tip { position: absolute; bottom: calc(100% + var(--space-2)); right: calc(var(--control-sm) / 2 - var(--space-8) - var(--space-3) / 2);
  z-index: var(--z-3); width: max-content; max-width: calc(var(--space-24) * 2.5); font-size: var(--text-xs); }
.gc-vcard__tip::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--space-2); }   /* ponte: col mouse si passa dallo scudo alla nuvoletta senza chiuderla (WCAG 1.4.13) */

/* ============ BADGE CATEGORIA (nota del 28 set 2026) ============
   Pillola bianca con l'icona nel cerchio colorato e il nome. Su telefono e iPad (sotto 900 px, secondo giro del 28 set 2026:
   a 834 px la riga categoria · garanzia · cuore andava ancora a capo), dentro la card veicolo, resta solo l'icona:
   il nome («Neopatentati», «Elettriche e Ibride») mandava a capo la riga del titolo.
   Il nome resta per gli screen reader (stesse regole di gc-sr-only) e nel title; da 900 px (desktop) e fuori dalla card non cambia niente. */
.gc-catbadge { padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); }
/* 29 set 2026: nella card compact (auto simili, pannelli) è solo icona a ogni larghezza, desktop compreso. Sulla foto della
   scheda auto resta estesa col nome intero: la pagina ingrandisce solo gc-catbadge__icon, mai il nome. */
/* 30 set 2026 (nota segn:muo8lt2wzw9g): anche nella full, a ogni larghezza, quando il titolo è lungo e col nome intero la riga
   titolo · categoria · Garanzia · cuore andrebbe a capo. La classe is-tight la mette VehicleCard misurando la riga. */
.gc-vcard--compact .gc-catbadge, .gc-vcard.is-tight .gc-catbadge { padding: var(--space-1); }
.gc-vcard--compact .gc-catbadge__label, .gc-vcard.is-tight .gc-catbadge__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 899px) {
  .gc-vcard .gc-catbadge { padding: var(--space-1); }
  .gc-vcard .gc-catbadge__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* ============ RISPARMIO NEL PREZZO (nota del 29 set 2026) ============
   La pillola «Risparmi … · esclusiva …» di Price vive solo sotto 900 px (telefono e iPad). Da 900 px (desktop) non si
   mostra: la promo resta nel barrato del suo colore. Non è un Badge: la promo della settimana ha PromoTag. */
.gc-pricebox__save { display: flex; }
@media (min-width: 900px) {
  .gc-pricebox__save { display: none; }
}

/* ============ PIÈ DI PAGINA (decisione Piè di pagina, 23 set 2026) ============
   gc-footer: il footer scuro, pieno o compatto (checkout e pagine di flusso). Ogni link ha un href vero
   (regola Link interni): tastiera, tasto centrale e "apri in una nuova scheda" funzionano. L'hover è CSS,
   non JavaScript; il focus è l'anello di sistema. I social sono tondi da --touch-min, non da 36.
   Stati: hover · focus · premuto. Selezionato, disabilitato, errore e caricamento non si applicano. */
.gc-footer { background: var(--ink-800); color: var(--paper); }
.gc-footer__grid { max-width: var(--container-max); margin: 0 auto; padding: var(--space-16) var(--gutter) var(--space-10);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); }
.gc-footer__logo { height: 28px; display: block; }
.gc-footer__about { max-width: 260px; margin: var(--space-4) 0 0; color: var(--grey-400); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
/* Bersagli (note del 29 set 2026, WCAG 2.5.8): ogni link del piè di pagina è alto almeno --space-8 (32) col puntatore
   e --touch-min (44) sotto 900. Il ritmo delle righe lo dà l'altezza del bersaglio, non margini o gap. */
.gc-footer__fact { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-8); color: var(--grey-400); font-size: var(--text-sm); text-decoration: none; }
.gc-footer__about + .gc-footer__fact { margin-top: var(--space-4); }
.gc-footer__fact > i, .gc-footer__fact > svg { color: var(--green-500); flex-shrink: 0; }
.gc-footer__revs { flex-wrap: wrap; }   /* stretto, la pillola delle fonti va a capo */
.gc-footer__revs .gc-stars { color: var(--green-500); }   /* le recensioni nel footer: stelle nel verde delle icone, sul fondo scuro */
.gc-footer__marks { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--paper); }
.gc-footer__marks > svg { width: var(--space-4); height: var(--space-4); }
.gc-footer__marks > img { height: var(--space-3); width: auto; display: block; }
.gc-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.gc-footer__soc { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min);
  border-radius: var(--radius-pill); background: var(--ink-700); color: var(--grey-400);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-footer__soc:hover { background: var(--green-500); color: var(--ink-800); }
/* colore esplicito: h2 porta fg1 (scuro) dalla tipografia di sistema e sul fondo ink-800 i titoli delle colonne sparivano (24 set 2026) */
.gc-footer__h { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--paper); }
.gc-footer__links { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.gc-footer__link, .gc-footer__fact { transition: color var(--dur-fast) var(--ease-out); }
.gc-footer__link { display: inline-flex; align-items: center; min-height: var(--space-8); color: var(--grey-400); font-size: var(--text-sm); text-decoration: none; }
.gc-footer__link:hover, a.gc-footer__fact:hover { color: var(--paper); }
.gc-footer__link:focus-visible, .gc-footer__fact:focus-visible, .gc-footer__soc:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--radius-xs); }
.gc-footer__soc:focus-visible { border-radius: var(--radius-pill); }
.gc-footer__link:active, .gc-footer__soc:active { transform: scale(.98); }
.gc-footer__bottom { border-top: 1px solid var(--ink-700); }
.gc-footer__bar { max-width: var(--container-max); margin: 0 auto; padding: var(--space-5) var(--gutter);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); color: var(--grey-400); font-size: var(--text-xs); }
.gc-footer--compact .gc-footer__bar { font-size: var(--text-sm); padding-block: var(--space-6); }
.gc-footer__bar a { display: inline-flex; align-items: center; min-height: var(--space-8); color: var(--paper); font-weight: var(--weight-semi); text-decoration: none; }
.gc-footer__bar a:hover { text-decoration: underline; }
.gc-footer__bar a:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--radius-xs); }
@media (max-width: 899px) {
  .gc-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); padding-top: var(--space-12); }
  .gc-footer__brand { grid-column: 1 / -1; }
  .gc-footer__link, a.gc-footer__fact, .gc-footer__bar a { min-height: var(--touch-min); }   /* al tocco ogni voce è alta 44 */
}
@media (max-width: 599px) {
  .gc-footer__grid { grid-template-columns: 1fr 1fr; }
  .gc-footer__bar { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ============ PULSANTE FLOTTANTE (decisione Pulsante flottante, 22 set 2026) ============
   gc-fab: il lanciatore della chat, e in tutto il sito ce n'è uno solo. Non è un cerchio con un'icona
   ma la mascotte ritagliata che spunta dal bordo basso: per questo l'anello di focus segue la FIGURA,
   impilando quattro drop-shadow, invece di disegnare un rettangolo attorno a 152 × 188 px quasi tutti
   trasparenti — lì l'anello di sistema non direbbe dove si è finiti.
   is-peek: scende finché restano visibili solo capelli e occhi.
   Stati: hover · focus · premuto. Selezionato, disabilitato, errore e caricamento non si applicano:
   quando la chat è aperta il lanciatore non c'è. */
.gc-fab { position: relative; flex-shrink: 0; width: 152px; height: 188px; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; filter: var(--drop-shadow); transform: translateY(var(--space-2));
  transition: transform var(--dur-med) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.gc-fab > .gc-mascot, .gc-fab img { width: 100%; height: 100%; }
.gc-fab img { display: block; object-fit: cover; object-position: 50% 0; }
.gc-fab:hover { transform: translateY(0); }
.gc-fab:active { transform: translateY(0) scale(.98); }
.gc-fab:focus-visible { outline: none;
  filter: drop-shadow(2px 0 0 var(--green-800)) drop-shadow(-2px 0 0 var(--green-800)) drop-shadow(0 2px 0 var(--green-800)) drop-shadow(0 -2px 0 var(--green-800)) var(--drop-shadow); }
.gc-fab.is-peek { transform: translateY(calc(100% - 72px)); }
.gc-fab.is-peek:hover { transform: translateY(var(--space-2)); }
.gc-fab__count { position: absolute; top: var(--space-1); right: var(--space-2); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gc-fab { transition: none; } }

/* ============ BRICIOLE (decisione Briciole, 22 set 2026) ============
   gc-crumb: il percorso, come lista ordinata. I separatori sono in CSS su li + li, quindi restano
   decorativi e non finiscono nell'albero di accessibilità: chi ascolta sente le voci, non le frecce.
   L'ultima voce porta aria-current="page" ed è l'unica in fg1.
   Stati: hover · focus · premuto · corrente. Errore, disabilitato e caricamento non si applicano.
   Dove stanno nella pagina lo decide la pagina: qui non c'è nessun margine, ma sempre su una riga loro in cima. */
.gc-crumb { min-width: 0; font-size: var(--text-sm); color: var(--fg3); }
/* una riga sola (24 set 2026): su mobile la voce corrente andava a capo e la riga nuova cominciava con «›»;
   ora i link restano interi e solo la voce corrente si accorcia con i puntini */
.gc-crumb__list { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gc-crumb__item { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 0 0 auto; }
.gc-crumb__item:last-child { flex: 0 1 auto; }
.gc-crumb__item + .gc-crumb__item::before { content: '›'; color: var(--grey-400); }
.gc-crumb__link { display: inline-flex; align-items: center; position: relative; min-width: 0;
  color: var(--fg3); font-family: var(--font-sans); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
/* bersaglio --touch-min senza allargare la riga, come .gc-btn--sm */
.gc-crumb__link::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--touch-min); transform: translateY(-50%); }
.gc-crumb__link:hover { color: var(--fg1); text-decoration: underline; }
.gc-crumb__link:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--radius-xs); }
.gc-crumb__link:active { transform: scale(.99); }
.gc-crumb__cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* la voce corrente si riconosce dall'attributo, non da una classe in più: è lo stesso segno che sentono gli assistivi */
.gc-crumb__cur[aria-current] { color: var(--fg1); font-weight: var(--weight-semi); }
/* solo da 900 px (29 set 2026, nota rv-ui-663939): su telefono e iPad la pagina si apre col suo titolo, e per tornare
   indietro bastano la barra e il gesto del browser. Da 900 px stanno su una riga loro, in cima, sopra ogni colonna */
@media (max-width: 899px) { .gc-crumb { display: none; } }

/* ============ FOGLIO DAL BASSO (decisione Foglio dal basso, 22 set 2026) ============
   gc-sheet è il velo, gc-sheet__panel il foglio che sale dal bordo inferiore. È il gemello di SidePanel:
   stesso velo, stesso dialogo modale, stesso focus intrappolato e restituito; cambia solo il bordo da cui entra.
   Il grabber (32 × 4) dichiara che si può trascinare per chiudere. Da 600 px non è più un foglio ma un dialogo
   centrato, e lì il grabber sparisce perché non c'è più niente da trascinare.
   Nessuno dei sette stati si applica: il metro misura i valori fuori token. */
.gc-sheet { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim); animation: gc-sheet-veil var(--dur-fast) var(--ease-out); }
@keyframes gc-sheet-veil { from { opacity: 0; } to { opacity: 1; } }
.gc-sheet__panel { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4);
  width: 100%; max-width: var(--container-form); max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  padding: var(--space-5); background: var(--white); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  animation: gc-sheet-up var(--dur-med) var(--ease-out); }
@keyframes gc-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
/* mentre il dito trascina il foglio segue la mano; se lo lascia prima della soglia torna a posto senza
   riavviare l'animazione d'ingresso. */
.gc-sheet.has-dragged .gc-sheet__panel { animation: none; transition: transform var(--dur-med) var(--ease-out); }
.gc-sheet.is-dragging .gc-sheet__panel { transition: none; }
/* il segno resta 32 × 4, ma il suo bottone ha un bersaglio tattile di 44 px */
.gc-sheet__grab { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center;
  width: var(--touch-min); height: var(--touch-min); margin: calc(-1 * var(--space-3)) 0; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; cursor: grab; touch-action: none; }
.gc-sheet__grab > span { display: block; width: var(--space-8); height: var(--space-1); border-radius: var(--radius-pill); background: var(--grey-300); }
.gc-sheet__grab:hover > span { background: var(--grey-400); }
.gc-sheet__grab:active { cursor: grabbing; }
.gc-sheet__grab:active > span { background: var(--grey-400); }
.gc-sheet__grab:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-sheet__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.gc-sheet__head h3 { margin: 0; font-size: var(--text-md); }
.gc-sheet__head p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--fg2); }
.gc-sheet__close, .gc-ibtn.gc-sheet__close { margin-left: auto; }   /* anche se è un IconButton: .gc-ibtn { margin: 0 } viene dopo (8 ott 2026) */
@media (min-width: 600px) {
  .gc-sheet { align-items: center; }
  .gc-sheet__panel { border-radius: var(--radius-xl); }
  .gc-sheet__grab { display: none; }
}
/* la ricerca della home: da 900 px sta in alto ed è più larga, perché il suo pannello cresce verso il basso */
@media (min-width: 900px) {
  .gc-sheet--top { align-items: flex-start; padding-top: var(--space-16); }
  .gc-sheet--wide .gc-sheet__panel { max-width: var(--container-reading); }
}
/* Il catalogo restringe gli esemplari dentro una cornice, non il viewport del browser: queste due classi
   rendono verificabili entrambe le forme responsive senza alterare il comportamento del sito. */
.gc-sheet--preview-mobile { align-items: flex-end; padding-top: 0; }
.gc-sheet--preview-mobile .gc-sheet__panel { max-width: var(--container-form); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.gc-sheet--preview-mobile .gc-sheet__grab { display: flex; }
.gc-sheet--preview-desktop { align-items: center; }
.gc-sheet--preview-desktop .gc-sheet__panel { border-radius: var(--radius-xl); }
/* la fila delle azioni di un foglio o di un dialogo (decisione Dialogo, 30 set 2026): sul telefono una sotto l'altra,
   a tutta larghezza, la conferma sopra; da 600 px in riga, a destra, Annulla prima della conferma */
.gc-sheet__actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: var(--space-2); margin-top: var(--space-2); }
.gc-sheet__actions > * { display: flex; }
.gc-sheet__actions > * > * { flex: 1; }
@media (min-width: 600px) {
  .gc-sheet__actions { flex-direction: row; justify-content: flex-end; }
  .gc-sheet__actions > * > * { flex: 0 1 auto; }
}
/* ============ PANNELLO LATERALE (SidePanel, decisione Pannelli) ============
   Spostato qui da Chrome.jsx il 2 ott 2026, uguale: così lo usano anche gli strumenti del portale, che non caricano Chrome.jsx. */
.gc-side { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--scrim); display: flex; justify-content: flex-end; animation: gc-fade2 var(--dur-fast) var(--ease-out); }
@keyframes gc-fade2 { from { opacity: 0; } to { opacity: 1; } }
.gc-side__panel { width: min(100%, var(--container-sheet)); height: 100%; background: var(--paper); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); animation: gc-slide var(--dur-med) var(--ease-out); }
@keyframes gc-slide { from { transform: translateX(var(--space-10)); opacity: 0; } to { transform: none; opacity: 1; } }
.gc-side__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
.gc-side__head h3 { margin: 0; font-size: var(--text-lg); }
.gc-side__body { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.gc-side__foot { padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--grey-200); display: flex; flex-direction: column; gap: var(--space-3); }

/* il dialogo di conferma e di domanda: un foglio stretto, perché dice una cosa sola */
.gc-dialog { max-width: var(--container-sheet); }

/* ============ TABELLA DEI DATI (decisione Tabella dei dati, 30 set 2026) ============
   DataTable: la superficie scorre in orizzontale dentro di sé, mai la pagina. L'intestazione resta ferma solo quando la
   tabella ha un'altezza (--fissa), perché è lì che si scorre in verticale. Le righe si aprono solo se sono is-link: il
   passaggio del mouse e il cursore non promettono un clic che non c'è. Il segno del negativo è nel testo, il colore
   lo accompagna. */
.gc-table-wrap { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gc-table-wrap--flat { box-shadow: none; border: 1px solid var(--grey-200); }
.gc-table-wrap--fissa { overflow-y: auto; }
.gc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); color: var(--fg1); }
.gc-table th { padding: var(--space-3) var(--space-4); text-align: left; white-space: nowrap; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg2); background: var(--white); border-bottom: 1px solid var(--grey-200); }
.gc-table-wrap--fissa .gc-table th { position: sticky; top: 0; z-index: var(--z-1); }
.gc-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--grey-200); vertical-align: middle; }
.gc-table tbody tr:last-child td { border-bottom: 0; }
.gc-table .is-num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gc-table .is-neg { color: var(--danger-700); }
.gc-table tbody tr.is-link { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.gc-table tbody tr.is-link:hover { background: var(--grey-100); }
.gc-table tbody tr.is-link:active { background: var(--grey-200); }
.gc-table__primary { min-width: calc(var(--space-24) * 2); }
.gc-table__link { display: flex; align-items: center; min-height: var(--touch-min); padding: 0; border: 0; background: none; font: inherit; font-weight: var(--weight-semi); line-height: var(--leading-snug);
  color: var(--fg1); text-align: left; text-decoration: none; cursor: pointer; }
.gc-table__link:hover { text-decoration: underline; }
.gc-table__link:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--radius-xs); }
.gc-table__sub { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--fg3); }
.gc-table__apri { width: 1%; }   /* la colonna del tasto che apre il dettaglio (dettaglio, 1 ott 2026) */
.gc-table__dett > td { background: var(--grey-100); }
.gc-table td .gc-badge + .gc-badge, .gc-table td [data-ds^="Badge"] + [data-ds^="Badge"] { margin-left: var(--space-1); }
.gc-table__vuoto { margin: 0; }
@media print { .gc-table-wrap { overflow: visible; box-shadow: none; } }
.gc-sheet--preview-desktop .gc-sheet__grab { display: none; }
.gc-sheet--preview-desktop.gc-sheet--top { align-items: flex-start; padding-top: var(--space-16); }
.gc-sheet--preview-desktop.gc-sheet--wide .gc-sheet__panel { max-width: var(--container-reading); }
@media (prefers-reduced-motion: reduce) {
  .gc-sheet, .gc-sheet__panel { animation: none; }
}

/* ============ TENDINA (decisione Tendina, 22 set 2026) ============
   gc-select: un <select> NATIVO dentro la scatola gc-input. Nativo perché si porta dietro il picker del
   sistema operativo su mobile, la tastiera e gli assistivi; una tendina finta sarebbe il terzo listbox del
   sito dopo Tabs e i suggerimenti della ricerca. La freccia è una sola, disegnata da noi, e lo spazio che
   le serve sta sui token invece che in un padding a mano.
   Stati: hover · focus · errore · disabilitato, tutti da gc-input. Premuto, selezionato e caricamento non si applicano. */
.gc-select { position: relative; display: block; width: 100%; min-width: 0; }
.gc-select > select { -webkit-appearance: none; appearance: none; padding-right: var(--space-10); cursor: pointer; }
.gc-select > select:disabled { cursor: not-allowed; }
.gc-select__chev { position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); pointer-events: none; color: var(--fg3); }
.gc-select.is-error .gc-select__chev { color: var(--danger-500); }
.gc-select.is-disabled .gc-select__chev { opacity: .4; }
/* nessuna scelta fatta: il testo del segnaposto resta grigio come in un campo vuoto */
.gc-select.is-empty > select { color: var(--fg3); }
/* taglia compatta: l'ordinamento del catalogo, che vive in una barra e non in un form */
.gc-select--sm { width: auto; }
.gc-select--sm > select { width: auto; height: var(--control-sm); font-size: var(--text-sm); border-radius: var(--radius-pill); }
@media (pointer: coarse) { .gc-select--sm > select { height: var(--touch-min); } }   /* un select non può allargare il bersaglio con ::before come i Btn: sul touch cresce a 44 (8 ott 2026) */

/* ============ CAMPO DI TESTO (decisione Campo di testo e Area di testo, 18 set 2026) ============
   gc-field: etichetta (gc-label) + campo + nota (gc-note), in colonna. gc-input: la scatola, alta --control-md, text-base,
   bordo grey-300, raggio md. Stati: hover grey-400 · focus green-500 + --ring-accent · is-error danger + --ring-danger ·
   disabled opacità .4 · read-only fondo grey-100. textarea: stessa classe, più righe. gc-input-wrap: prefisso/suffisso (km, €). */
.gc-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gc-field > .gc-label { margin-bottom: 0; }
.gc-input { display: block; width: 100%; height: var(--control-md); box-sizing: border-box; margin: 0; padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg1); text-transform: none;
  background: var(--white); border: 1px solid var(--grey-300); border-radius: var(--radius-md); box-shadow: none; outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-input::placeholder { color: var(--fg3); }
.gc-input:hover { border-color: var(--grey-400); }
.gc-input:focus, .gc-input:focus-within { border-color: var(--green-500); box-shadow: var(--ring-accent); }
.gc-input.is-error, .gc-input[aria-invalid="true"] { border-color: var(--danger-500); }
.gc-input.is-error:focus, .gc-input[aria-invalid="true"]:focus, .gc-input.is-error:focus-within { box-shadow: var(--ring-danger); }
.gc-input:disabled, .gc-input.is-disabled { opacity: .4; cursor: not-allowed; }
.gc-input.is-readonly { background: var(--grey-100); }
textarea.gc-input { height: auto; min-height: calc(var(--control-md) * 2); padding-block: var(--space-3); resize: vertical; }
select.gc-input { cursor: pointer; }   /* aspetto della tendina: voce Tendina, da decidere */
.gc-input-wrap { display: flex; align-items: center; gap: var(--space-2); padding-block: 0; }
.gc-input-wrap > input, .gc-input-wrap > textarea { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; margin: 0; padding: 0;
  font: inherit; color: inherit; }
.gc-input-wrap > input::placeholder { color: var(--fg3); }
.gc-input__affix { flex: 0 0 auto; font-family: var(--font-num); font-size: var(--text-sm); color: var(--fg3); }

/* ============ FORM LEAD (LeadForm in PageKit.jsx, decisione Form lead e prenotazione; classi di sistema dal 14 ott 2026) ============
   Prima vivevano in PageStyle di PageKit: chi montava LeadForm fuori da una pagina di contenuto (la chat, il foglio della scheda,
   il checkout) doveva montare anche PageStyle. Ora il form ha i suoi stili ovunque. Campi, scelte e note sono dei loro componenti:
   qui solo la colonna, le righe di pillole e la griglia dei campi (due colonne da 600 px, l'email a tutta riga). */
.gc-leadform { display: flex; flex-direction: column; gap: var(--space-4); }
.gc-section--center .gc-leadform { max-width: var(--container-form); margin-inline: auto; text-align: left; }   /* in una sezione centrata: largo quanto i form, testo a sinistra */
.gc-leadform__title { margin: 0; font-size: var(--text-lg); }
.gc-leadform__lead { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--text-sm); color: var(--fg2); }
.gc-leadform__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gc-leadform__fields { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.gc-leadform__full { grid-column: 1 / -1; }
@media (min-width: 600px) { .gc-leadform__fields--2 { grid-template-columns: 1fr 1fr; } }
/* stato «non letta» di PlateLookup (PlateVerify): l'avviso, il LeadForm e «scrivi a mano» in colonna (14 ott 2026) */
.gc-plate-verify { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ============ BARRA DI RICERCA (decisione Barra di ricerca, 22 set 2026) ============
   gc-search: una sola barra, quella del catalogo. Alta --control-lg 56, raggio --radius-lg, bordo grey-300, lente a sinistra,
   X che pulisce a destra. gc-search__field è la riga che va a capo: ci stanno i chip dei filtri già presi e poi l'input.
   Stati: hover grey-400 · focus green-500 + --ring-accent · premuto scala .99 SOLO se non è già a fuoco (il gesto del "seek":
   cede prima di aprirsi, così il clic si legge come una spinta) · selezionato is-on quando porta testo o filtri.
   Errore, disabilitato e caricamento non si applicano: una ricerca non si rompe e non si spegne. */
.gc-search { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-lg); padding: 0 var(--space-4); cursor: text;
  background: var(--white); border: 1px solid var(--grey-300); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-search:hover { border-color: var(--grey-400); }
.gc-search:focus-within { border-color: var(--green-500); box-shadow: var(--ring-accent); }
.gc-search:not(:focus-within):active { transform: scale(.99); }
.gc-search.is-on { border-color: var(--green-500); }
.gc-search__lens { flex-shrink: 0; display: flex; color: var(--fg3); transition: color var(--dur-fast) var(--ease-out); }
.gc-search:hover .gc-search__lens, .gc-search:focus-within .gc-search__lens { color: var(--fg1); }
.gc-search__field { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) 0; }
.gc-search__field > input { flex: 1 1 160px; min-width: 120px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg1); }
.gc-search__field > input::placeholder { color: var(--fg3); }
.gc-search__x { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm);
  margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--grey-100); color: var(--fg2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-search__x:hover { background: var(--grey-200); }
.gc-search__x:active { transform: scale(.93); }
.gc-search__x:focus-visible { outline: none; box-shadow: var(--ring-accent); }
/* la barra compatta (size="sm", 16 ott 2026, decisione Componenti delle dashboard): alta quanto i controlli piccoli, per le barre
   degli strumenti (il campo Chiedi del portale), dove la ricerca grande del catalogo non sta */
.gc-search--sm { min-height: var(--control-sm); padding: 0 var(--space-1) 0 var(--space-3); gap: var(--space-2); border-radius: var(--radius-md); }
.gc-search--sm .gc-search__field { padding: 0; }
.gc-search--sm .gc-search__field > input { font-size: var(--text-sm); }
.gc-search--sm .gc-search__x { width: var(--space-8); height: var(--space-8); }
@media (prefers-reduced-motion: reduce) {
  .gc-search, .gc-search__lens, .gc-search__x { transition: none; }
  .gc-search:not(:focus-within):active, .gc-search__x:active { transform: none; }
}

/* ============ MARCHIO DELLA MARCA (decisione Suggerimenti della ricerca, 22 set 2026) ============
   gc-brandmark: il logo della marca a colori su fondo bianco, quadrato, dal catalogo. I loghi sono marchi
   terzi: eccezione dichiarata ai token, come i circuiti di pagamento. Quando il file manca (oggi Honda e
   Lancia) resta l'iniziale su grey-200: mai un buco. Nessuno stato proprio: vive dentro Chip, card o riga,
   che i loro stati ce li hanno. */
.gc-brandmark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--white); border-radius: var(--radius-xs); }
.gc-brandmark > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gc-brandmark.is-initial { background: var(--grey-200); color: var(--fg2); font-family: var(--font-sans); font-weight: var(--weight-bold); }
.gc-brandmark.is-initial > span { font-size: var(--text-xs); line-height: 1; }

/* ============ METODI DI PAGAMENTO (decisione Metodi di pagamento, 18 set 2026) ============
   gc-paybtn: Btn con la livrea del circuito (PayButton), taglie --md 48 · --lg 56, marchio PayMark a destra.
   Stati: hover schiarisce · focus anello · premuto .98 · disabilitato .4 · is-loading (spinner al posto del marchio). Errore e selezionato non si applicano.
   gc-paymethod: la scelta del circuito (PayMethodPicker), riquadri 40 con bersaglio 44, selezionato [aria-pressed=true] con --ring-accent.
   I colori dei circuiti sono l'eccezione dichiarata ai token (blocco marchi terzi). */
.gc-paybtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); box-sizing: border-box; margin: 0; min-height: var(--control-md); padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-snug); white-space: nowrap; cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-paybtn--lg { min-height: var(--control-lg); font-size: var(--text-md); padding: 0 var(--space-6); }
.gc-paybtn--full { display: flex; width: 100%; padding-inline: var(--space-4); }
@media (max-width: 359px) { .gc-paybtn--lg { font-size: var(--text-base); gap: var(--space-2); } }   /* a tutta larghezza il contenuto è centrato: lati di 16, a 320 px «Prenota con 200 € PayPal» sbordava */
.gc-paybtn:hover { filter: brightness(1.04); }
.gc-paybtn:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-paybtn:active:not(:disabled) { transform: scale(.98); }
.gc-paybtn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.gc-paybtn--paypal { background: var(--brand-paypal); color: var(--brand-paypal-blue); }
.gc-paybtn--applepay, .gc-paybtn--gpay { background: var(--brand-black); color: var(--brand-white); }
.gc-paybtn--gpay { border-color: var(--brand-gpay-border); }
.gc-paybtn--satispay { background: var(--brand-satispay); color: var(--brand-white); }
.gc-paybtn--card { background: var(--green-500); color: var(--ink-800); }
.gc-paybtn--card .gc-paymark--card { background: var(--white); border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2); }
.gc-paymethods { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gc-paymethod { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: var(--control-sm); min-width: calc(var(--space-24) + var(--space-1)); padding: 0 var(--space-4);
  border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semi); cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.gc-paymethod::before { content: ''; position: absolute; inset: calc((var(--control-sm) - var(--touch-min)) / 2) 0; }
.gc-paymethod:hover { filter: brightness(1.04); }
.gc-paymethod:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-paymethod[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--green-500); }
.gc-paymethod:active:not(:disabled) { transform: scale(.98); }
.gc-paymethod:disabled { opacity: .4; cursor: not-allowed; }
.gc-paymethod--paypal { background: var(--brand-paypal); color: var(--brand-paypal-blue); }
.gc-paymethod--applepay, .gc-paymethod--gpay { background: var(--brand-black); color: var(--brand-white); }
.gc-paymethod--satispay { background: var(--brand-satispay); color: var(--brand-white); }
.gc-paymethod--card { background: var(--white); color: var(--fg1); border-color: var(--grey-300); }

/* ============ ICON BUTTON (decisione Icon button, 18 set 2026) ============
   gc-ibtn: tondo con la sola icona. Taglie: xs 24 e sm 40 (bersaglio 44 via ::before) · md 48. Stili per superficie:
   --surface trasparente (navbar) · --tonal grey-100 (chiudi) · --raised bianco con ombra (foto, card, rail) · --save il cuore.
   Stati: hover · focus-visible (anello) · premuto (scala .96) · selezionato [aria-pressed=true] · disabilitato. Errore e caricamento non si applicano. */
.gc-ibtn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; margin: 0; padding: 0;
  width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--fg1);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gc-ibtn--sm::before { content: ''; position: absolute; inset: calc((var(--control-sm) - var(--touch-min)) / 2); }
.gc-ibtn--md { width: var(--control-md); height: var(--control-md); }
/* xs 24: un tasto accanto a una voce, come il copia della raccolta (decisione Tasto copia, 1 ott 2026); bersaglio 44 via ::before.
   Senza superficie a riposo e in fg3, per non pesare accanto al testo: la voce resta la cosa da leggere */
.gc-ibtn--xs { width: var(--space-6); height: var(--space-6); color: var(--fg3); }
.gc-ibtn--xs::before { content: ''; position: absolute; inset: calc((var(--space-6) - var(--touch-min)) / 2); }
.gc-ibtn--xs:hover { color: var(--fg1); }
.gc-ibtn > svg, .gc-ibtn > i { position: relative; }
.gc-ibtn:hover { background: var(--grey-100); }   /* surface e raised */
.gc-ibtn--tonal { background: var(--grey-100); }
.gc-ibtn--tonal:hover { background: var(--grey-200); }
.gc-ibtn--raised { background: var(--white); box-shadow: var(--shadow-sm); }
.gc-ibtn--save { background: var(--green-100); color: var(--green-800); border: 2px dashed var(--green-300); }
.gc-ibtn--save:hover { background: var(--green-200); }
/* accent (16 ott 2026): il verde pieno dell'azione, per l'unica icona da far vedere in una barra (Segnala nel portale) */
.gc-ibtn--accent { background: var(--accent); color: var(--on-accent); }
.gc-ibtn--accent:hover { background: var(--accent-hover); }
.gc-ibtn--save[aria-pressed="true"] { background: var(--green-800); color: var(--paper); border-style: solid; border-color: var(--green-800); }
.gc-ibtn--surface[aria-pressed="true"], .gc-ibtn--tonal[aria-pressed="true"], .gc-ibtn--raised[aria-pressed="true"] { background: var(--ink-800); color: var(--paper); border-color: var(--ink-800); }
.gc-ibtn:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-ibtn--raised:focus-visible { box-shadow: var(--shadow-sm), var(--ring-accent); }
.gc-ibtn:active:not(:disabled) { transform: scale(.96); }
.gc-ibtn:disabled { opacity: .4; cursor: not-allowed; }

/* ============ SEZIONE E CORNICE (decisione Sezioni di pagina, 18 set 2026) ============
   gc-frame: la cornice centrata delle pagine (--container-content, gutter 20 → fluido da 900); --narrow: colonna di lettura.
   gc-section: una sezione di pagina, distanziata dalla precedente con --section-gap (48 → 64 da 600 → 80 da 900).
   gc-section__title (h2) e gc-section__sub: titolo e sottotitolo; --center li centra. Nessuno stato: una sezione non è un controllo.
   Le classi locali tengono solo il layout interno. */
.gc-frame { max-width: var(--container-content); margin: 0 auto; padding-inline: var(--space-5); }
.gc-frame--narrow { max-width: var(--container-reading); }
.gc-section { margin-top: var(--section-gap); }
.gc-section__title { margin: 0 0 var(--space-5); font-size: var(--text-xl); }
.gc-section__sub { margin: calc(-1 * var(--space-3)) 0 var(--space-5); color: var(--fg2); font-size: var(--text-sm); line-height: var(--leading-normal); }
.gc-section--center { text-align: center; }
.gc-section--center .gc-section__sub { margin-inline: auto; max-width: 65ch; }
@media (min-width: 600px) { :root { --section-gap: var(--space-16); } .gc-section__title { font-size: var(--text-2xl); } }
@media (min-width: 900px) { :root { --section-gap: var(--space-20); } .gc-frame { padding-inline: var(--gutter); }
  .gc-section__title { font-size: var(--text-3xl); margin-bottom: var(--space-8); }
  .gc-section__sub { font-size: var(--text-base); margin-top: calc(-1 * var(--space-6)); margin-bottom: var(--space-8); } }

/* ============ CAROSELLO (decisione Carosello, 22 set 2026) ============
   Rail governa scorrimento manuale, frecce e tastiera; i contenuti decidono la propria griglia e lo snap.
   Marquee è il nastro automatico: si ferma quando riceve attenzione e con movimento ridotto. */
.gc-rail { min-width: 0; }
.gc-railhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.gc-railhead .gc-section__title { margin-bottom: 0; }
.gc-railnav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.gc-rail--section .gc-railhead { margin-bottom: var(--space-5); }
.gc-rail--section .gc-railnav { display: none; }
/* compact: contenuti e frecce sulla stessa riga, frecce a destra; sotto 900px si scorre col dito e le frecce spariscono (29 set 2026) */
.gc-rail--compact { display: flex; align-items: center; gap: var(--space-3); }
.gc-rail--compact > :not(.gc-railnav) { flex: 1 1 auto; min-width: 0; }
.gc-rail--compact .gc-railnav { display: none; flex-shrink: 0; }
@media (min-width: 900px) {
  .gc-rail--section .gc-railhead { margin-bottom: var(--space-8); }
  .gc-rail--section .gc-railnav, .gc-rail--compact .gc-railnav { display: flex; }
}
/* fade: la sfumatura del Marquee, solo sul lato dove ci sono ancora contenuti (29 set 2026) */
.gc-rail--fade.is-more-end > :not(.gc-railhead):not(.gc-railnav) { -webkit-mask-image: linear-gradient(90deg, black 90%, transparent); mask-image: linear-gradient(90deg, black 90%, transparent); }
.gc-rail--fade.is-more-start > :not(.gc-railhead):not(.gc-railnav) { -webkit-mask-image: linear-gradient(90deg, transparent, black 10%); mask-image: linear-gradient(90deg, transparent, black 10%); }
.gc-rail--fade.is-more-start.is-more-end > :not(.gc-railhead):not(.gc-railnav) { -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
@keyframes gc-marquee { to { transform: translateX(-50%); } }
.gc-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); }
.gc-marquee-track { display: flex; gap: var(--space-3); width: max-content; animation: gc-marquee var(--marquee-duration, 40s) linear infinite; will-change: transform; }
.gc-marquee:hover .gc-marquee-track, .gc-marquee:focus-within .gc-marquee-track { animation-play-state: paused; }
.gc-marquee.is-static { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.gc-marquee.is-static .gc-marquee-track { animation: none; padding-inline: var(--space-4); }

/* ============ BUTTON (Btn in components.jsx): stati in JS, qui solo il bersaglio touch della taglia sm ============ */
/* Badge anche come classi (8 ott 2026, su delega, come Btn): class="gc-badge gc-badge--green" (green, solid, info, warn,
   ink, danger, neutral) e gc-badge--sm. Valori di Badge in components.jsx, che nel sito li mette in linea. */
.gc-badge { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--space-6); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; white-space: nowrap; }
.gc-badge--sm { min-height: var(--space-5); padding: 0 var(--space-2); }
.gc-badge--green { background: var(--green-100); color: var(--green-800); }
.gc-badge--solid { background: var(--green-500); color: var(--ink-800); }
.gc-badge--info { background: var(--info-bg); color: var(--info-700); }
.gc-badge--warn { background: var(--warning-bg); color: var(--warning-700); }
.gc-badge--ink { background: var(--ink-800); color: var(--paper); }
.gc-badge--danger { background: var(--danger-bg); color: var(--danger-700); }
.gc-badge--neutral { background: var(--grey-200); color: var(--fg2); }

/* Checkbox anche come classe (8 ott 2026, su delega, come Btn e Badge): la casella nativa di Checkbox in components.jsx,
   class="gc-checkbox" su <input type="checkbox">; l'etichetta e la riga restano della pagina. */
.gc-checkbox { width: var(--space-5); height: var(--space-5); margin: 0; flex-shrink: 0; accent-color: var(--green-700); border-radius: var(--radius-xs);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.gc-checkbox:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-checkbox:active:not(:disabled) { transform: scale(.9); }
.gc-checkbox:disabled { cursor: default; opacity: .4; }

/* Btn anche come classi (decisione dell'8 ott 2026, su delega): le pagine senza React (Docs) usano il bottone del sistema
   con  class="gc-btn gc-btn--primary gc-btn--sm". Valori e stati sono quelli di Btn in components.jsx; nel sito Btn li
   mette in linea, quindi queste regole non lo cambiano. */
.gc-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); max-width: 100%;
  min-height: var(--control-md); padding: var(--space-2) var(--space-6); border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-snug);
  text-align: center; text-decoration: none; cursor: pointer; outline: none; transition: all var(--dur-med) var(--ease-out); }
.gc-btn--xs { min-height: var(--space-8); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); white-space: nowrap; }
.gc-btn--sm { min-height: var(--control-sm); padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.gc-btn--lg { min-height: var(--control-lg); padding: var(--space-2) var(--space-8); font-size: var(--text-md); }
.gc-btn > svg { flex-shrink: 0; width: var(--space-5); height: var(--space-5); }
.gc-btn--xs > svg, .gc-btn--sm > svg { width: var(--space-4); height: var(--space-4); }
.gc-btn:focus-visible { box-shadow: var(--ring-accent); }
.gc-btn:active { transform: scale(.98); }
.gc-btn:disabled, .gc-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.gc-btn--primary { background: var(--green-500); color: var(--ink-800); }
.gc-btn--primary:hover { background: var(--green-600); }
.gc-btn--primary[aria-pressed="true"] { background: var(--green-600); border-color: var(--ink-800); }
.gc-btn--secondary { background: var(--white); color: var(--fg1); border-color: var(--grey-300); }
.gc-btn--secondary:hover { background: var(--grey-100); }
.gc-btn--secondary[aria-pressed="true"] { background: var(--ink-800); color: var(--paper); border-color: var(--ink-800); }
.gc-btn--dark { background: var(--ink-800); color: var(--paper); }
.gc-btn--dark:hover { background: var(--ink-900); }
.gc-btn--ghost { background: transparent; color: var(--accent-text); }
.gc-btn--ghost:hover { text-decoration: underline; }
.gc-btn--ghost[aria-pressed="true"] { background: var(--grey-100); color: var(--fg1); }
a.gc-btn:hover:not(.gc-btn--ghost) { text-decoration: none; }
.gc-btn--sm, .gc-btn--xs { position: relative; }
.gc-btn--sm::before { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--control-sm) - var(--touch-min)) / 2); bottom: calc((var(--control-sm) - var(--touch-min)) / 2); }
.gc-btn--xs::before { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--space-8) - var(--touch-min)) / 2); bottom: calc((var(--space-8) - var(--touch-min)) / 2); }   /* xs 32: link di azione nelle frasi, bersaglio 44 */
.gc-spinner { display: inline-block; box-sizing: border-box; border-style: solid; border-color: currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: gc-spin var(--dur-spin) linear infinite; flex: 0 0 auto; }
.gc-spinner--sm { width: var(--space-4); height: var(--space-4); border-width: 2px; }
.gc-spinner--md { width: var(--space-6); height: var(--space-6); border-width: 2px; }
.gc-skel { position: relative; overflow: hidden; background: var(--grey-200); border-radius: var(--radius-xs); color: transparent !important; }
.gc-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); animation: gc-shimmer 1.6s var(--ease-in-out) infinite; }
.gc-skel--text { height: .85em; border-radius: var(--radius-xs); margin-block: .2em; }
.gc-skel--circle { border-radius: var(--radius-pill); }
.gc-skel--pill { border-radius: var(--radius-pill); }
[aria-busy="true"] > .gc-skel, .gc-skel-group { cursor: progress; }
.gc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes gc-shimmer { to { transform: translateX(100%); } }
/* ============ RIDUZIONE DEL MOVIMENTO: una sola regola per tutto il sito (decisione Movimento, 18 set 2026) ============
   Transizioni e animazioni quasi istantanee ovunque; restano solo gli spinner, rallentati, perché dicono "sto lavorando". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .gc-skel::after { animation: none !important; }
  .gc-marquee-track { animation: none !important; transform: none !important; }
  .gc-spinner { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}

/* ============ PAGINE LEGALI (decisione Pagine legali, 23 set 2026) ============
   gc-legal: privacy, cookie e condizioni di vendita. Una colonna di lettura (--container-reading via gc-frame--narrow),
   un indice delle sezioni con ancore vere, titoli di sezione gc-h4, liste con il ritmo del testo. Nessuno stato. */
.gc-legal__eyebrow { margin: 0 0 var(--space-2); color: var(--fg3); }
.gc-legal__title { margin: 0 0 var(--space-3); }
.gc-legal__lead { margin: 0 0 var(--space-6); }
.gc-legal__toc { margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--white); }
.gc-legal__toc ol { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.gc-legal__toc a, .gc-legal__other a { color: var(--accent-text, var(--green-800)); }
.gc-legal__sec { margin-bottom: var(--space-8); scroll-margin-top: calc(var(--appbar-h) + var(--space-4)); }
.gc-legal__sec h2 { margin: 0 0 var(--space-3); }
.gc-legal__sec p, .gc-legal__sec li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg1); }
.gc-legal__sec p { margin: 0 0 var(--space-3); }
.gc-legal__sec ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.gc-legal__other { margin: var(--space-8) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--grey-200); font-size: var(--text-sm); color: var(--fg2); }

/* ============ ALONE DECORATIVO ============
   gc-glow: l'angolo in alto a destra di un pannello scuro che si accende appena (targa della valutazione).
   Il pannello ha position: relative e overflow: hidden. Decorativo: aria-hidden, nessun clic. */
.gc-glow { position: absolute; top: calc(-1 * var(--space-16)); right: calc(-1 * var(--space-16)); width: calc(var(--space-12) * 5); height: calc(var(--space-12) * 5);
  border-radius: var(--radius-pill); background: radial-gradient(closest-side, var(--green-glow), transparent); pointer-events: none; }

/* ============ GRAFICI (decisione Dati e grafici, 24 set 2026) ============
   charts.jsx: una cornice sola (gc-chart: titolo, legenda, corpo, tabella dei dati) e i segni in SVG.
   Le regole del metodo: segni sottili (linee 2 px, barre al massimo 24 px con l'estremo dei dati arrotondato di 4 e la
   base dritta), 2 px di superficie fra i segni che si toccano, griglia e assi a filo, pieni e recessivi, mai tratteggiati;
   il testo sta nei colori del testo, mai in quello della serie. Stati: passaggio e fuoco (mirino e tooltip, anche da
   tastiera con le frecce), caricamento (Skeleton alto come il grafico), errore e vuoto (EmptyState). Premuto,
   selezionato e disabilitato non si applicano ai grafici; la legenda che isola una serie è un bottone con aria-pressed. */
.gc-chart { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-sans); color: var(--fg1); }
.gc-chart__head { display: flex; flex-direction: column; gap: var(--space-1); }
.gc-chart__title { font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--fg1); }
.gc-chart__sub { font-size: var(--text-sm); color: var(--fg2); }
.gc-chart__body { position: relative; min-width: 0; }
.gc-chart__svg { display: block; overflow: visible; max-width: 100%; border-radius: var(--radius-xs); }
.gc-chart__svg:focus { outline: none; }
.gc-chart__svg:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-chart__grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.gc-chart__base { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.gc-chart__tick { font-family: var(--font-num); font-size: var(--text-xs); font-variant-numeric: tabular-nums; fill: var(--chart-text); }
.gc-chart__cat { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); fill: var(--fg2); }
.gc-chart__label { font-family: var(--font-num); font-size: var(--text-xs); font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; fill: var(--fg1); }
.gc-chart__name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semi); fill: var(--fg1); }
.gc-chart__line { fill: none; stroke-width: var(--chart-stroke); stroke-linecap: round; stroke-linejoin: round; }
.gc-chart__cross { stroke: var(--chart-crosshair); stroke-width: 1; shape-rendering: crispEdges; }
.gc-chart__target { stroke: var(--chart-target); stroke-width: var(--chart-stroke); }
.gc-chart__dot { stroke: var(--chart-surface); stroke-width: var(--chart-gap); }
.gc-chart__mark { transition: opacity var(--dur-fast) var(--ease-out); }
.gc-chart__mark.is-dim { opacity: .4; }
.gc-chart__hit { fill: transparent; }
.gc-chart__donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.gc-chart__center { font-family: var(--font-num); font-size: var(--text-xl); font-weight: var(--weight-bold); fill: var(--fg1); }
.gc-chart__scale { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--fg3); }
.gc-chart__scale i { display: inline-block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-hair); }
.gc-chart__scale span + i { margin-left: var(--space-1); }
.gc-chart__scale i + span { margin-left: var(--space-1); }
/* legenda: sempre da due serie in su; con onToggle ogni voce è un bottone che nasconde o mostra la sua serie */
.gc-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.gc-chart__legend--col { flex-direction: column; flex-wrap: nowrap; gap: var(--space-2); }
.gc-chart__legend--col .gc-chart__key { display: flex; width: 100%; }   /* in colonna il valore va a destra, allineato */
.gc-chart__key { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--space-6); padding: 0 var(--space-1); border: 0; border-radius: var(--radius-xs); background: none; font: inherit; font-size: var(--text-sm); color: var(--fg2); text-align: left; }
button.gc-chart__key { position: relative; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
button.gc-chart__key::after { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--space-6) - var(--touch-min)) / 2); bottom: calc((var(--space-6) - var(--touch-min)) / 2); }   /* bersaglio di 44 px */
button.gc-chart__key:hover { color: var(--fg1); background: var(--grey-100); }
button.gc-chart__key:focus-visible { outline: none; box-shadow: var(--ring-accent); }
button.gc-chart__key:active { transform: scale(.97); }
button.gc-chart__key[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.gc-chart__swatch { flex: 0 0 auto; display: inline-block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-hair); }
.gc-chart__swatch--line { width: var(--space-4); height: var(--chart-stroke); border-radius: var(--radius-pill); }
.gc-chart__swatch--dot { border-radius: var(--radius-pill); }
.gc-chart__keyval { margin-left: auto; padding-left: var(--space-3); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--weight-semi); color: var(--fg1); }
/* tooltip: il valore davanti e forte, il nome dopo; la chiave è un tratto di linea, non un quadrato */
.gc-chart__tip { position: absolute; z-index: var(--z-dropdown); pointer-events: none; min-width: calc(var(--space-24) + var(--space-8)); max-width: calc(var(--space-24) * 3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-md); font-size: var(--text-xs); color: var(--fg2); }
.gc-chart__tip-h { margin-bottom: var(--space-1); font-weight: var(--weight-semi); color: var(--fg2); }
.gc-chart__tip-row { display: flex; align-items: center; gap: var(--space-2); line-height: var(--leading-normal); }
.gc-chart__tip-row b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--fg1); }
.gc-chart__tip-key { flex: 0 0 auto; width: var(--space-3); height: var(--chart-stroke); border-radius: var(--radius-pill); }
/* tabella dei dati: il gemello accessibile di ogni grafico, sempre presente per i lettori di schermo, visibile a richiesta */
.gc-chart__foot { display: flex; justify-content: flex-end; }
.gc-chart__tablewrap { position: relative; min-width: 0; overflow-x: auto; }
.gc-chart__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.gc-chart__table th, .gc-chart__table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--grey-200); text-align: right; white-space: nowrap; }
.gc-chart__table th:first-child, .gc-chart__table td:first-child { text-align: left; }
.gc-chart__table thead th { font-weight: var(--weight-semi); color: var(--fg2); }
.gc-chart__table tbody th { font-weight: var(--weight-medium); color: var(--fg1); }
.gc-chart__table td { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--fg1); }
/* numero con andamento (StatTile): etichetta, numero grande in Inter con cifre proporzionali, variazione con icona e
   periodo, andamento. Il numero più grande (hero) è uno solo per vista. */
.gc-stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gc-stat__label { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg2); }
.gc-stat__value { font-family: var(--font-num); font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--fg1); }
.gc-stat--hero .gc-stat__value { font-size: var(--text-4xl); }
.gc-stat__delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg3); }
.gc-ring { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.gc-ring__label { max-width: calc(var(--space-24) + var(--space-12)); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg2); text-align: center; }
@media (forced-colors: active) {
  .gc-chart__line, .gc-chart__cross, .gc-chart__grid, .gc-chart__base, .gc-chart__target { stroke: CanvasText; }
  .gc-chart__tick, .gc-chart__cat, .gc-chart__label, .gc-chart__name, .gc-chart__center { fill: CanvasText; }
}

/* ============ STAMPA (decisione Stampa, 23 set 2026) ============
   La scheda auto, il preventivo e la valutazione si stampano. Sulla carta non servono la barra, la chat, i fogli,
   i pannelli, i bottoni flottanti né le ombre: resta il contenuto, con un bordo sottile dove c'era una superficie. */
@media print {
  :root { color-scheme: light; }
  body { background: var(--white); }
  header[data-ds^="NavBar"], .gc-drawer, .gc-chat, .gc-fab, .gc-skip, .gc-sheet, .gc-side, .gc-footer__social, .ck-bar, .vd-topbar { display: none !important; }
  .gc-card, .gc-panel { box-shadow: none; border: 1px solid var(--grey-300); break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Barra dei filtri (decisione Barra dei filtri, 25 set 2026): Popover, FilterChip, ActiveFilters ---------- */
.gc-pop-wrap { position: relative; display: inline-flex; }
.gc-pop { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-dropdown); min-width: 260px; max-width: min(360px, calc(100vw - var(--space-8))); max-height: 60vh;
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); animation: gc-pop var(--dur-med) var(--ease-out); }
.gc-pop--end { left: auto; right: 0; }
@keyframes gc-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gc-pop__corpo { overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.gc-pop__piede { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--grey-200); }
.gc-pop__lista { display: flex; flex-direction: column; }
.gc-pop__cerca { margin-bottom: var(--space-2); }
.gc-pop__voce { display: inline-flex; align-items: center; gap: var(--space-2); }
.gc-pop__n { font-family: var(--font-num); font-size: var(--text-xs); color: var(--fg3); }
.gc-pop__vuoto { margin: 0; padding: var(--space-2); font-size: var(--text-sm); color: var(--fg3); }
.gc-pop__gruppo { display: flex; flex-direction: column; gap: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .gc-pop { animation: none; } }
/* ============ CALENDAR (Calendar in components.jsx, nota segn:mupsnsg0idml, 2 ott 2026) ============
   Il mini calendario dentro il Popover: mese con le frecce, sette colonne da lunedì, giorni alti --touch-min.
   Il giorno scelto ha i colori della Chip scelta; oggi è sottolineato; i giorni chiusi o fuori intervallo restano leggibili a .4. */
.gc-cal { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 900px) { .gc-cal { min-width: calc(7 * var(--touch-min) + 6 * var(--space-1)); } }   /* sette tondi da 44: nel Popover da 260 i giorni erano ovali; sotto 900 il foglio è già largo */
.gc-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.gc-cal__title { font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: capitalize; }
.gc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.gc-cal__dow { display: grid; place-items: center; padding-block: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg3); text-decoration: none; }
.gc-cal__day { display: grid; place-items: center; min-height: var(--touch-min); margin: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--fg1);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: var(--weight-semi); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-cal__day:hover:not([aria-disabled="true"]) { border-color: var(--grey-400); }
.gc-cal__day:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-cal__day:active:not([aria-disabled="true"]) { transform: scale(.97); }
.gc-cal__day.is-today { text-decoration: underline; text-underline-offset: var(--space-1); }
.gc-cal__day.is-on { background: var(--green-100); border-color: var(--green-300); color: var(--green-800); }
.gc-cal__day[aria-disabled="true"] { opacity: .4; cursor: default; }
/* ---------- ListRow (decisione Riga di elenco, 1 ott 2026): la riga di un elenco lungo, con lead, titolo, sottotitolo e meta.
   Link vero con href, bottone con onClick, ferma senza. Stati: hover · focus (anello dentro) · premuto · corrente · fatta.
   gc-rows: il contenitore che separa le righe con una linea ---------- */
.gc-row { display: flex; align-items: center; gap: var(--space-2) var(--space-4); width: 100%; box-sizing: border-box; min-height: var(--touch-min); margin: 0; padding: var(--space-3) var(--space-4);
  border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; color: var(--fg1); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.gc-row:hover { background: var(--grey-100); }
.gc-row:active { background: var(--grey-200); }
.gc-row:focus-visible { outline: none; box-shadow: inset var(--ring-accent); }
.gc-row[aria-current] { background: var(--green-100); }
.gc-row.is-static { cursor: default; }
.gc-row.is-static:hover, .gc-row.is-static:active { background: transparent; }
.gc-row__lead { flex-shrink: 0; display: inline-flex; }
.gc-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.gc-row__title { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.gc-row__sub { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-row.is-done .gc-row__title { color: var(--fg3); text-decoration: line-through; }
.gc-rows { display: flex; flex-direction: column; }
.gc-rows > * + * { border-top: 1px solid var(--grey-200); }
/* ---------- Menu (decisione Menu a tendina, 1 ott 2026): un bottone e sotto le voci, per navigare o per agire. Si chiude con
   Esc, con un clic fuori o scegliendo. Stessa superficie di Popover, che resta per i filtri (con il piede «Fatto») ---------- */
.gc-menu-wrap { position: relative; display: inline-flex; }
.gc-menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-dropdown); min-width: 260px; max-width: min(360px, calc(100vw - var(--space-8))); max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3); background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); animation: gc-pop var(--dur-med) var(--ease-out); }
.gc-menu--end { left: auto; right: 0; }
.gc-menu > .gc-navitem { align-self: stretch; }   /* le voci di navigazione a tutta larghezza; i Btn restano a sinistra */
@media (prefers-reduced-motion: reduce) { .gc-menu { animation: none; } }
.gc-fbar { display: flex; flex-direction: column; gap: var(--space-3); }
.gc-fbar__riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gc-fbar__cerca { flex: 1 1 200px; min-width: 160px; max-width: 320px; }
.gc-fbar__spazio { flex: 1; }
.gc-fbar__attivi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gc-fbar__conta { margin-left: auto; font-family: var(--font-num); font-size: var(--text-sm); color: var(--fg3); }
.gc-fbar__mobile { display: none; }
@media (max-width: 899px) {
  .gc-pop { position: fixed; left: var(--space-4); right: var(--space-4); top: auto; bottom: var(--space-4); max-width: none; min-width: 0; z-index: var(--z-sheet); }   /* foglio: sopra la mascotte della chat, che copriva i giorni del calendario (2 ott 2026) */
  .gc-fbar__largo { display: none; }
  .gc-fbar__mobile { display: inline-flex; }
  .gc-fbar__cerca { max-width: none; flex: 1 1 0; min-width: 0; }
  .gc-fbar__cerca .gc-search__field > input { min-width: 0; }   /* sotto i 900 px il testo non passa sotto la X (dallo Stock, 8 ott 2026) */
  .gc-fbar__spazio { display: none; }   /* la ricerca prende lo spazio libero */
  .gc-fbar__riga { flex-wrap: nowrap; }
  .gc-fbar__attivi { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
  .gc-fbar__attivi::-webkit-scrollbar { display: none; }
}

/* ============ DAGLI STRUMENTI DEL PORTALE (decisione del 2 ott 2026, «le raccomandate» dello stile degli strumenti) ============
   Nove voci che gli strumenti facevano a mano, una sola volta qui. */
/* il codice in linea e il testo attenuato */
.gc-code { font-family: var(--font-num); font-size: var(--text-xs); background: var(--grey-100); padding: 1px var(--space-1); border-radius: var(--radius-xs); }
.gc-muted { color: var(--fg3); }
/* lo sfondo e il colore della pagina, per le pagine degli strumenti (sul body) */
.gc-page { background: var(--paper); color: var(--fg1); }
/* il riquadro incassato: un contenuto da copiare o da guardare, più scuro della pagina */
.gc-sunk { background: var(--surface-sunk); border-radius: var(--radius-md); }
.gc-sunk--flush { border-radius: 0; }   /* a filo del bordo di una card: l'immagine in cima */
.gc-card.gc-sunk { border-radius: var(--radius-lg); }   /* una card incassata tiene il raggio della card */
/* la cifra in evidenza dentro un testo di contorno: scura come il testo */
.gc-caption b, .gc-meta b, .gc-small b, .gc-small code { color: var(--fg1); }
/* i numeri di riepilogo degli strumenti: gc-stat in taglia compatta */
.gc-stat__value--compact { font-size: var(--text-xl); }
/* la card scelta in un elenco che apre il dettaglio accanto (Card current) */
.gc-card.is-current { box-shadow: var(--ring-accent), var(--shadow-sm); }
/* il punto a cui porta un link quando non è una card (una riga, un paragrafo): l'anello di Card current, senza l'ombra (8 ott 2026) */
.gc-target { box-shadow: var(--ring-accent); border-radius: var(--radius-md); }
/* il colore di stato: sul testo (gc-tone-*) e sulle icone (Icon tone) */
.gc-tone-ok { color: var(--accent-text); }
.gc-tone-warn { color: var(--warning-700); }
.gc-tone-danger { color: var(--danger-700); }
.gc-icon--ok { color: var(--success-500); }
.gc-icon--warn { color: var(--warning-500); }
.gc-icon--danger { color: var(--danger-500); }
.gc-icon--muted { color: var(--fg3); }   /* l'icona accanto a un testo, senza stato (ListaPunti, 8 ott 2026) */

/* ScegliFile (decisione dell'8 ott 2026, su delega): i tasti stanno nel contenitore di chi li usa, i campi sono nascosti */
.gc-scegli { display: contents; }

/* Blocco (decisione dell'8 ott 2026, su delega): la card compatta degli strumenti, con la testa titolo · dato · azione.
   Prima in quattro forme locali (ds-dms-blocco, ds-st-blocco, ds-ca-sez, ds-ca-gruppo). Si usa con Card: className="gc-blocco". */
.gc-blocco { margin: 0; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gc-blocco h3 { margin: 0; }   /* il titolo è .gc-overline */
.gc-blocco__testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* Righe di dati (decisione dell'8 ott 2026, su delega): l'elenco etichetta → valore delle schede degli strumenti (dl),
   il valore in Inter a destra; .is-tot il totale in grassetto, .is-meno il valore che si toglie. Prima ds-st-dati dello Stock. */
.gc-dati { margin: 0; display: flex; flex-direction: column; }
.gc-dati > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--grey-200); }
.gc-dati > div:last-child { border-bottom: 0; }
.gc-dati dd { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; }
.gc-dati > .is-tot { font-weight: var(--weight-bold); }
.gc-dati > .is-meno dd { color: var(--fg2); }

/* ============ STAMPA (fondazione Stampa, decisione dell'8 ott 2026) ============
   I fogli da stampare e da salvare in PDF: la scheda A4 dell'auto, i fogli del DMS (contratto, ricevute, verbali).
   A4, margini e corpi in punti tipografici. Dentro .gc-foglio la scala del testo passa ai punti: sullo schermo 1 pt vale
   1,33 px e l'anteprima resta identica; sulla carta e nel PDF il testo non dipende più dal carattere scelto nel browser.
   Gli Stampati di Identità (biglietti, divise…) hanno i loro formati: si portano qui in un passo successivo. */
:root { --print-page-w: 210mm; --print-page-h: 297mm; --print-margin: 12mm; }
@page { size: A4; margin: 12mm 12mm 14mm; }   /* @page non legge le variabili: è --print-margin, con il piede di 2 mm più alto */
.gc-foglio {
  --text-2xs: 8.25pt; --text-xs: 9pt; --text-sm: 10.5pt; --text-base: 12pt; --text-md: 13.5pt;
  --text-lg: 16.5pt; --text-xl: 21pt; --text-2xl: 27pt; --text-3xl: 34.5pt; --text-4xl: 39pt;
  box-sizing: border-box; color: var(--fg1); background: var(--white);
}
@media screen { .gc-foglio { width: var(--print-page-w); max-width: 100%; min-height: var(--print-page-h); margin-inline: auto; padding: var(--print-margin); box-shadow: var(--shadow-lg); } }
@media print { .gc-foglio .gc-sunk, .gc-foglio .gc-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }   /* i fondi tenui restano anche sulla carta */

/* IconTile (decisione dell'8 ott 2026): la tessera con un'icona, tre taglie (sm 40 · md 48 · lg 56), wide da 900 px */
.gc-itile { --gc-itile: var(--space-12); flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--gc-itile); height: var(--gc-itile); border-radius: var(--radius-md); background: var(--green-100); color: var(--green-700); }
.gc-itile--sm { --gc-itile: var(--space-10); }
.gc-itile--md { --gc-itile: var(--space-12); }
.gc-itile--lg { --gc-itile: calc(var(--space-12) + var(--space-2)); }
@media (min-width: 900px) {
  .gc-itile--wide-sm { --gc-itile: var(--space-10); }
  .gc-itile--wide-md { --gc-itile: var(--space-12); }
  .gc-itile--wide-lg { --gc-itile: calc(var(--space-12) + var(--space-2)); }
}
.gc-itile--round { border-radius: var(--radius-pill); }
.gc-itile--dark { background: var(--ink-800); color: var(--green-500); }

/* ListaPunti (decisione dell'8 ott 2026): fatti brevi con un'icona per riga, testo come gc-text */
.gc-punti { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg1); }
.gc-punti--colonna { flex-direction: column; }
.gc-punti--colonna.gc-punti--center { width: fit-content; max-width: 100%; margin-inline: auto; align-self: center; }
.gc-punti--riga { gap: 0; width: 100%; }
.gc-punti--riga > .gc-punti__voce { flex: 1 1 0; min-width: 0; }
.gc-punti--riga.gc-punti--center > .gc-punti__voce:first-child { justify-content: flex-end; }   /* le metà si stringono verso il divisore */
.gc-punti__voce { display: flex; align-items: center; gap: var(--space-2); }
.gc-punti__voce > svg, .gc-punti__voce > i { flex-shrink: 0; }
.gc-punti__sep { display: flex; align-items: center; }
.gc-punti__voce--titolo { align-items: flex-start; gap: var(--space-3); }   /* con il titolo: icona da 24 accanto a titolo e riga */
.gc-punti__testo { display: grid; gap: var(--space-1); }
/* l'avviso che compare in basso sopra la pagina (Toast), chiaro o scuro */
.gc-toast { position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--z-toast); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-2);
  width: min(calc(100% - var(--space-8)), var(--container-form)); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.gc-toast--dark { width: auto; padding: var(--space-3) var(--space-4); background: var(--ink-800); color: var(--paper); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semi); box-shadow: none; }
/* il tasto principale che sul telefono galleggia in basso a destra (Btn floating) */
@media (max-width: 640px) {
  .gc-btn--float { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-float); box-shadow: var(--shadow-lg); }
}
/* la barra dei comandi che resta in alto mentre si scorre: la posizione la dà la pagina */
.gc-bar-sticky { position: sticky; z-index: var(--z-sticky); background: var(--paper); border-bottom: 1px solid var(--grey-200); }
/* la tessera con la foto (OptionCard visual="photo", decisione del 2 ott 2026): scegliere una foto, o quali pubblicare e in che ordine
   (actions: i tasti per spostarla, sopra l'area cliccabile) */
.gc-option--photo { align-self: start; width: 100%; align-items: stretch; justify-content: flex-start; padding: var(--space-2); text-align: left; }
.gc-option--photo .gc-option__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); }
.gc-option--photo .gc-option__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gc-option__actions { position: relative; z-index: var(--z-1); display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* il metro (Meter, decisione del 2 ott 2026): barra sottile, colore del dato a soglie, percentuale in Inter */
.gc-meter { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 96px; max-width: 220px; vertical-align: middle; margin-left: var(--space-2); }
.gc-meter__track { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--grey-200); overflow: hidden; }
.gc-meter__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--grey-400); transition: width var(--dur-slow) var(--ease-out); }
.gc-meter.is-good .gc-meter__fill { background: var(--status-ok); }
.gc-meter.is-mid .gc-meter__fill { background: var(--status-warn); }
.gc-meter.is-low .gc-meter__fill { background: var(--status-ko); }
.gc-meter b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg2); white-space: nowrap; min-width: 4ch; text-align: right; }
.gc-meter--big { min-width: 200px; max-width: none; margin-left: 0; }
.gc-meter--big .gc-meter__track { height: 10px; }
.gc-meter--big b { font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--fg1); letter-spacing: var(--tracking-tight); }
.gc-meter--mini { min-width: 0; margin-left: 0; gap: var(--space-1); flex: none; }
.gc-meter--mini .gc-meter__track { flex: none; width: 28px; height: 4px; }
.gc-meter--mini b { min-width: 0; font-weight: var(--weight-semi); color: var(--fg3); }
h2 .gc-meter, h3 .gc-meter { font-weight: var(--weight-regular); }

/* ═══ I PEZZI DELLE DASHBOARD (16 ott 2026, decisione Componenti delle dashboard) ═══════════════════════════════════ */
/* ActionRow: una cosa da fare per riga, in una Card gc-arows */
.gc-arows { padding: var(--space-2); display: flex; flex-direction: column; }
.gc-arow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); scroll-margin-top: var(--space-24); }
.gc-arow + .gc-arow { border-top: 1px solid var(--grey-200); border-radius: 0; }
.gc-arow__t { display: flex; flex-direction: column; min-width: 0; }
.gc-arow__title { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--fg1); }
.gc-arow__sub { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg3); }
.gc-arow__title, .gc-arow__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-arow__az { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.gc-arow__thumb { width: var(--space-16); height: var(--space-12); border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-sunk); display: block; }
@media (max-width: 859px) {
  .gc-arow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico t" "ico q" "ico az"; align-items: start; }
  .gc-arow > .gc-itile { grid-area: ico; }
  .gc-arow > .gc-arow__t { grid-area: t; }
  .gc-arow > .gc-badge, .gc-arow > .gc-arow__vuoto { grid-area: q; justify-self: start; }
  .gc-arow__az { grid-area: az; justify-content: flex-start; flex-wrap: wrap; }
  .gc-arow__title, .gc-arow__sub { white-space: normal; }
}
/* SectionTile: la tessera di una sezione, in un contenitore gc-stiles */
.gc-stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--space-3); }
.gc-stile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); color: inherit; text-decoration: none; min-width: 0; }
.gc-stile__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.gc-stile__n { display: flex; align-items: baseline; gap: var(--space-1); }
.gc-stile__u { font-size: var(--text-xs); color: var(--fg3); }
.gc-stile__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--fg1); }
.gc-stile__sub { margin-top: auto; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg3); }
/* il numero in evidenza dentro una frase (la testa delle dashboard): i colori di Badge warn, va a capo con il testo */
.gc-mark { background: var(--warning-bg); color: var(--warning-700); font-weight: var(--weight-bold); padding: 1px var(--space-2); border-radius: var(--radius-pill); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* StageFlow: il percorso a tappe */
.gc-flow { display: flex; flex-direction: column; gap: var(--space-3); }
.gc-flow__tappe { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-2); }
.gc-flow__tappa { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); text-align: left; min-width: 0; }
.gc-flow__barra { width: 100%; height: var(--space-16); display: flex; align-items: flex-end; }
.gc-flow__barra span { display: block; width: 100%; border-radius: var(--radius-xs) var(--radius-xs) var(--radius-hair) var(--radius-hair); background: var(--green-200); transition: height var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.gc-flow__tappa.is-current .gc-flow__barra span, .gc-flow__tappa:hover .gc-flow__barra span { background: var(--green-300); }
.gc-flow__tappa.is-stop .gc-flow__barra span { background: repeating-linear-gradient(135deg, var(--status-warn) 0 6px, var(--warning-bg) 6px 12px); }
.gc-flow__n { line-height: 1; }
.gc-flow__l { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--fg2); }
.gc-flow__nota { min-height: var(--space-6); }
@media (max-width: 959px) { .gc-flow__tappe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .gc-flow__tappe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* StatusStrip: lo stato nel tempo */
.gc-strip { display: grid; grid-template-columns: minmax(calc(var(--space-24) + var(--space-16)), max-content) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); }
.gc-strip__assi { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg3); }
.gc-strip__n { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); }
.gc-strip__n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semi); color: var(--fg1); }
.gc-strip__tacche { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1px; height: var(--space-6); }
.gc-strip__tacche i { border-radius: var(--radius-hair); }
.gc-strip__s { display: flex; justify-content: flex-end; }
.gc-strip__tacche .is-ok { background: var(--status-ok); }
.gc-strip__tacche .is-warn { background: var(--status-warn); }
.gc-strip__tacche .is-ko { background: var(--status-ko); }
.gc-strip__tacche .is-none { background: var(--status-none); }
@media (max-width: 859px) {
  .gc-strip { grid-template-columns: minmax(0, 1fr) auto; }
  .gc-strip > span:first-child, .gc-strip__assi { display: none; }
  .gc-strip__tacche { grid-column: 1 / -1; }
}
/* DayLanes: la giornata a corsie */
.gc-lanes { display: flex; flex-direction: column; gap: var(--space-3); }
.gc-lanes__in { overflow-x: auto; display: grid; grid-template-columns: var(--space-20) minmax(calc(var(--space-24) * 7), 1fr); gap: var(--space-2) var(--space-3); padding-top: var(--space-2); }
.gc-lanes__ore { position: relative; height: var(--space-5); font-size: var(--text-xs); color: var(--fg3); }
.gc-lanes__ore span { position: absolute; transform: translateX(-50%); }
.gc-lanes__ore span:first-child { transform: none; }
.gc-lanes__ore span:last-child { transform: translateX(-100%); }
.gc-lanes__n { align-self: stretch; display: flex; align-items: center; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg2); }
/* sul telefono le ore scorrono e i nomi restano fermi (16 ott 2026, Officina › La giornata) */
.gc-lanes__n, .gc-lanes__in > span:first-child { position: sticky; left: 0; z-index: var(--z-2); background: var(--surface); }
.gc-lanes__corsia { position: relative; height: var(--space-12); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.gc-lanes__pausa { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--grey-200) 6px 7px); }
.gc-lanes__blocco { position: absolute; top: var(--space-1); bottom: var(--space-1); display: flex; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: var(--weight-semi); line-height: var(--leading-snug); text-decoration: none; overflow: hidden; }
.gc-lanes__blocco span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gc-lanes__blocco:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-lanes .is-done { background: var(--green-100); color: var(--accent-text); text-decoration: line-through; }
.gc-lanes .is-now { background: var(--accent); color: var(--on-accent); }
.gc-lanes .is-next { background: var(--white); color: var(--fg1); box-shadow: inset 0 0 0 1px var(--border); }
.gc-lanes__ora { position: absolute; top: calc(-1 * var(--space-6)); bottom: calc(-1 * var(--space-1)); width: 2px; background: var(--danger-500); pointer-events: none; z-index: var(--z-1); }
.gc-lanes__ora b { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--danger-500); color: var(--white); font: var(--weight-bold) var(--text-xs) var(--font-num); padding: 0 var(--space-1); border-radius: var(--radius-xs); white-space: nowrap; }
.gc-lanes__leggenda { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); color: var(--fg3); }
.gc-lanes__leggenda i { display: inline-block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-hair); margin-right: var(--space-2); vertical-align: -1px; }
/* WeekLog: la settimana dei cambi */
.gc-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.gc-week__g { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gc-week__t { display: flex; justify-content: space-between; }
.gc-week__g.is-today .gc-week__t { color: var(--accent-text); }
.gc-week__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--fg1); font-size: var(--text-sm); line-height: var(--leading-snug); text-decoration: none; }
.gc-week__item:hover { background: var(--grey-200); }
.gc-week__item:focus-visible { outline: none; box-shadow: var(--ring-accent); }
@media (max-width: 959px) { .gc-week { grid-template-columns: minmax(0, 1fr); } }
/* SectionPanel: il pannello di una sezione con la gerarchia (numero che conta, grafico parlante, numeri secondari), in gc-spanels */
.gc-spanels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.gc-spanel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); min-width: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.gc-spanel--high { grid-column: span 2; }
.gc-spanel--low { grid-column: span 2; gap: var(--space-3); background: var(--surface-sunk); box-shadow: none; }
.gc-spanel__testa { display: flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.gc-spanel__testa:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-spanel__nome { flex: 1; min-width: 0; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg2); }
.gc-spanel__freccia { color: var(--fg3); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gc-spanel__testa:hover .gc-spanel__freccia { color: var(--accent-text); transform: translateX(var(--space-1)); }
.gc-spanel__eroe { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.gc-spanel--high .gc-spanel__eroe { flex-direction: row; align-items: center; gap: var(--space-4); }
.gc-spanel--low .gc-spanel__eroe { flex-direction: row; align-items: baseline; gap: var(--space-3); }
.gc-spanel__n { font-family: var(--font-num); font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); white-space: nowrap; }
.gc-spanel--high .gc-spanel__n { font-size: var(--text-4xl); }
.gc-spanel--low .gc-spanel__n { font-size: var(--text-xl); }
.gc-spanel--ok .gc-spanel__n { color: var(--accent-text); }
.gc-spanel--warn .gc-spanel__n { color: var(--warning-700); }
.gc-spanel--danger .gc-spanel__n { color: var(--danger-700); }
.gc-spanel__testo { max-width: 34ch; font-size: var(--text-sm); font-weight: var(--weight-semi); line-height: var(--leading-snug); color: var(--fg1); }
.gc-spanel__graf { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gc-spanel__cosa { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg3); }
.gc-spanel__altri { margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--grey-200); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); color: var(--fg3); }
.gc-spanel--low .gc-spanel__altri { padding-top: 0; border-top: 0; }
.gc-spanel__altri b { font-family: var(--font-num); font-size: var(--text-sm); color: var(--fg1); }
@media (max-width: 1099px) { .gc-spanels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .gc-spanels { grid-template-columns: minmax(0, 1fr); } .gc-spanel--high, .gc-spanel--low { grid-column: auto; } .gc-spanel--high .gc-spanel__eroe { flex-direction: column; align-items: flex-start; } }

/* ValueBars: le colonne parlanti (valore sopra, etichetta sotto, riferimento con il nome) */
.gc-vbars { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-width: 0; }
.gc-vbars__area { position: relative; display: flex; align-items: flex-end; gap: var(--space-2); border-bottom: 1px solid var(--grey-300); }
.gc-vbars__col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1); color: inherit; text-decoration: none; border-radius: var(--radius-xs); }
a.gc-vbars__col, .gc-vbars__col[role="button"] { cursor: pointer; }
.gc-vbars__col:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.gc-vbars__col b { font-family: var(--font-num); font-size: var(--text-2xs); font-weight: var(--weight-bold); line-height: 1; text-align: center; color: var(--fg2); }
.gc-vbars__col.is-em b { font-size: var(--text-xs); color: var(--fg1); }
.gc-vbars__col i { display: block; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--green-200); transition: background var(--dur-fast) var(--ease-out); }
.gc-vbars__col.is-em i { background: var(--accent); }
.gc-vbars__col.is-ok i { background: var(--status-ok); }
.gc-vbars__col.is-warn i { background: var(--status-warn); }
.gc-vbars__col.is-danger i { background: var(--status-ko); }
a.gc-vbars__col:hover i, .gc-vbars__col[role="button"]:hover i { background: var(--green-300); }
.gc-vbars__rif { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--fg3); pointer-events: none; z-index: 1; }
.gc-vbars__rif em { position: absolute; left: 0; bottom: var(--space-1); padding: 0 var(--space-1); font-style: normal; font-size: var(--text-2xs); font-weight: var(--weight-bold); color: var(--fg2); background: var(--surface); border-radius: var(--radius-hair); }
.gc-vbars__assi { display: flex; gap: var(--space-2); }
.gc-vbars__assi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: var(--text-2xs); color: var(--fg3); }
.gc-vbars__assi .is-em { font-weight: var(--weight-bold); color: var(--fg1); }

/* MiniRows: un elenco breve in un pannello (quando, nome, stato) */
.gc-minirows { display: flex; flex-direction: column; width: 100%; }
.gc-minirows__r { display: grid; grid-template-columns: calc(var(--space-12) + var(--space-2)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; color: inherit; text-decoration: none; font-size: var(--text-xs); }
.gc-minirows__r + .gc-minirows__r { border-top: 1px solid var(--grey-200); }
a.gc-minirows__r:hover .gc-minirows__l { color: var(--accent-text); }
a.gc-minirows__r:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--radius-xs); }
.gc-minirows__at { font-family: var(--font-num); color: var(--fg1); }
.gc-minirows__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg2); }
@media (prefers-reduced-motion: reduce) { .gc-spanel__freccia, .gc-vbars__col i { transition: none; } }
@media (prefers-reduced-motion: reduce) { .gc-flow__barra span { transition: none; } }

/* Controlli touch: l'area visibile coincide con il bersaglio nelle scelte fitte. */
@media (pointer: coarse) {
  .gc-chip, .gc-seg__item, .gc-tabs__tab { min-height: var(--touch-min); min-width: var(--touch-min); }
  .gc-chip { position: relative; }
  .gc-chip::before { content: ''; position: absolute; inset: calc((var(--control-sm) - var(--touch-min)) / 2) 0; }
  a.gc-minirows__r, a.gc-spanel__testa { min-height: var(--touch-min); }
  .gc-seg { overflow-x: auto; border-radius: var(--radius-lg); }
  .gc-seg__item { flex-shrink: 0; }
  .gc-vbars { overflow-x: auto; }
  .gc-vbars__area, .gc-vbars__assi { flex-shrink: 0; width: 100%; min-width: calc(var(--gc-vbars-count) * (var(--touch-min) + var(--space-2))); } /* ds-ok: numero di colonne, misura di layout del grafico */
  .gc-vbars__col { min-width: var(--touch-min); min-height: var(--touch-min); }
  .gc-vbars__col i { width: 100%; max-width: var(--space-6); align-self: center; }
}
@media (max-width: 599px) {
  .gc-side__panel { min-height: 0; max-height: 100dvh; }
  .gc-side__body { min-height: 0; overscroll-behavior: contain; }
  .gc-side__head { padding: var(--space-3) var(--space-4); }
  .gc-side__foot { max-height: 40dvh; overflow-y: auto; padding-inline: var(--space-4); }
  .gc-sheet__panel { max-height: calc(100dvh - env(safe-area-inset-top)); overscroll-behavior: contain; }
  .gc-dialog .gc-sheet__actions { padding-bottom: env(safe-area-inset-bottom); }
}