/* Gruppo FIRM.GS — base comune a tutte le larghezze
   Colori, font, tema scuro, reset, elementi che non cambiano tra mobile, tablet e desktop.
   Le regole di layout stanno in mobile.css (di partenza) e nei file dei breakpoint successivi. */

/* Il font ("Dritto Ext") è dichiarato in index.html, accanto al suo preload: così per aggiornarlo si tocca un solo file. */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #909090;   /* grigio unico: opzioni non selezionate, voci di menu inattive, contatore */
  --ph: #efefef;      /* segnaposto immagini in caricamento */
  --pad: 15px;
  --close-w: 77px;    /* larghezza del riquadro "Chiudi" (frame 31) */
  --logo-ms: .35s;    /* uscita / ritorno del logo (uguale a LOGO_MS in app.js) */
}
:root[data-theme="dark"] {
  --bg: #000000;
  --fg: #ffffff;
  --muted: #6f6f6f;
  --ph: #151515;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* niente "rimbalzo" quando si arriva in cima o in fondo alla pagina (Safari iOS 16+, macOS, Chrome) */
html, body { overscroll-behavior: none; }
/* quando il logo esce la pagina si accorcia: il browser non deve spostare lo scroll per compensare (app.js lo conta come gesto) */
html { overflow-anchor: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Dritto Ext", system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: normal;
  -webkit-tap-highlight-color: transparent;
  text-decoration-skip-ink: auto;   /* sottolineature spezzate: lasciano libere le discendenti (g, p, y…). Vale per tutte */
}
p { margin: 0; }
/* Safari iOS trasforma numeri e indirizzi in link: li neutralizzo se succede comunque */
a[href^="tel"], a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; pointer-events: none; }
[hidden] { display: none !important; }

button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  text-align: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}

/* "FIRM.GS" nell'indirizzo di About: link al sito di FIRM, con lo stesso aspetto del testo */
.firm-link { color: inherit; text-decoration: none; }

.u { text-decoration: underline; text-decoration-thickness: 0.18em; text-underline-position: from-font; }
.upper { text-transform: uppercase; }

/* Illustrazione About: versione chiara o scura secondo il tema */
.ill-dark { display: none !important; }
:root[data-theme="dark"] .ill-light { display: none !important; }
:root[data-theme="dark"] .ill-dark { display: block !important; }


/* ---------- Interruttore chiaro/scuro ----------
   L'input nativo <input type="checkbox" switch> è invisibile ma sta sopra al disegno:
   il dito tocca davvero lo switch (Safari iOS 18+ dà la vibrazione su questo elemento). */
/* Disegno (Figma "Group 32", 877:1741, aggiornato il 2026-10-08): misure del desktop, mobile e tablet in proporzione
   (gli stessi rapporti dei toggle precedenti: mobile × 13/15, tablet × 21,56/15). Ogni layout dà solo le misure:
   --tw × --th ingombro, --tb bordo, --tr raggio del pallino, --tx centro del pallino dal bordo sinistro esterno.
   Il pallino è un cerchio disegnato sull'intero interno del toggle (radial-gradient) a metà altezza, non un riquadro a sé:
   così resta centrato sul bordo (come riquadro il browser lo agganciava ai pixel per conto suo, mezzo pixel più su).
   Il passaggio da pieno a trasparente (± --aa) fa da antialiasing: circa un pixel dello schermo in tutto, quindi più stretto
   sugli schermi ad alta densità (altrimenti il bordo del pallino sembra sfocato). In scuro va nella posizione speculare (--tw − 2 × --tx).
   Mobile: 22,07 × 11,27, bordo 1,73, pallino Ø 5,72 con centro a 5,73 (desktop 25,47 × 13, bordo 2, Ø 6,6 a 6,61 × 13/15). */
.toggle {
  --tw: 22.071px; --th: 11.267px; --tb: 1.733px; --tr: 2.86px; --tx: 5.73px; --aa: .4px;
  position: relative; display: inline-flex; width: var(--tw); height: var(--th);
}
.toggle input {
  position: absolute; inset: -14px -10px; width: auto; height: auto; margin: 0;
  opacity: 0; z-index: 2; cursor: pointer;
}
.toggle-ui { position: absolute; inset: 0; border: var(--tb) solid var(--fg); border-radius: 99px; }
.toggle-ui::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at calc(var(--tx) - var(--tb)) 50%,
    var(--fg) calc(var(--tr) - var(--aa)), transparent calc(var(--tr) + var(--aa)));
  transition: transform .18s ease;
}
@media (min-resolution: 2dppx) { .toggle-ui::after { --aa: .25px; } }
@media (min-resolution: 3dppx) { .toggle-ui::after { --aa: .17px; } }
:root[data-theme="dark"] .toggle-ui::after { transform: translateX(calc(var(--tw) - 2 * var(--tx))); }

.btn-solid {
  width: 100%; height: 36px; padding: 8px 10px;   /* DOWNLOAD (frame 30) */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  line-height: 20px; text-transform: uppercase; white-space: nowrap;
  background: var(--fg); color: var(--bg);
}

/* Freccia del download: il disegno esportato da Figma (assets/freccia.svg, 15 × 20) fa da maschera
   e prende il colore del testo. Tablet e desktop usano disegni propri (vedi i loro CSS). */
.arr {
  flex: none; display: block;
  width: 14px; height: 18.7px; margin: 0 2px; transform: rotate(90deg);
  background: currentColor;
  -webkit-mask: url("../assets/freccia.svg") center / contain no-repeat;
          mask: url("../assets/freccia.svg") center / contain no-repeat;
}

/* Simbolo dei filtri attivi (assets/filtro.svg, 65,13 × 70,01): come la freccia è una maschera e prende il colore del testo.
   - in apice sulla voce del menu del pannello con filtri attivi (Filtri / Classifica): non sposta le voci;
   - davanti a "Rimuovi filtri". */
.fi {
  flex: none; display: block;
  height: var(--fi-h); width: calc(var(--fi-h) * 65.13 / 70.01);
  background: currentColor;
  -webkit-mask: url("../assets/filtro.svg") center / contain no-repeat;
          mask: url("../assets/filtro.svg") center / contain no-repeat;
}
.nav [data-go] { position: relative; }
.nav [data-go] .fi { --fi-h: .5em; position: absolute; left: 100%; top: 0; margin-left: .12em; }
.close.clear { display: inline-flex; align-items: center; justify-content: center; gap: .3em; }
.close.clear .fi { --fi-h: .75em; }

/* ---------- Loading screen ----------
   Sfondo del tema (bianco in chiaro, nero in scuro): l'animazione (assets/loader.webp) è trasparente.
   Il computer è largo 250px a tutte le larghezze (l'immagine 255,5: il file è 511 × 644 con il computer a 500px, cioè 2× per gli
   schermi retina; vedi script/crea_loader.py); su schermi stretti o bassi si riduce.
   Sequenza (app.js): l'animazione compare in dissolvenza, gira finché l'archivio è pronto; alla fine si dissolve
   prima lo sfondo (sotto inizia a comparire l'archivio) e poco dopo (LOADER_STAGGER) l'animazione. Durata delle dissolvenze: --loader-fade (uguale a LOADER_FADE in app.js). */
.loader {
  --loader-fade: .4s;
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: background-color var(--loader-fade) ease;
}
.loader img { width: min(255.5px, 100vw - 30px, (100dvh - 40px) * 511 / 644); height: auto; opacity: 0; transition: opacity var(--loader-fade) ease; }
.loader.on img { opacity: 1; }
.loader.out img { opacity: 0; }
.loader.gone { background-color: transparent; pointer-events: none; }   /* lo sfondo sparisce: sotto compare l'archivio */

/* ---------- Risposta al tocco ---------- */
/* Il ritardo di 50ms evita il lampo sugli elementi sfiorati quando si inizia a scorrere:
   iOS attiva :active al primo contatto e lo toglie appena riconosce lo scroll. */
.tap, .item img { transition: opacity .08s linear; }
.tap:not([data-download]):not([data-close]):active { opacity: .45; transition-delay: 50ms; }
/* Miniature, DOWNLOAD e "Chiudi": feedback fisso gestito da app.js (sempre 60%, subito, almeno 120ms); torna con la dissolvenza qui sopra */
.item.pressed img, [data-download].pressed, [data-close].pressed { opacity: .6; transition: none; }

/* ?hit nell'indirizzo: mostra le aree toccabili */
.show-hit .tap, .show-hit .item { outline: 1px solid #ff2d55; outline-offset: 0; }
.show-hit .toggle input { opacity: .25; background: #ff2d55; }