/* La palette dell'app: accento #6C5CE7 (Tema.swift, Accento.colorset) e i
   colori scuri di sistema di iOS, fondo nero e superfici #1C1C1E. Sovrascrive
   le variabili del design system, che resta intatto. La scala dell'accento
   tiene la luminosità OKLCH dei gradini originali, così ogni tinta pesa come
   prima e cambia solo il colore. */
:root{
  --color-bg:#000000;
  --color-surface:#1C1C1E;
  --color-text:#FFFFFF;
  --color-accent:#6C5CE7;
  --color-accent-2:#6C5CE7;
  --color-divider:color-mix(in srgb, #545458 60%, transparent);
  --color-neutral-100:#F2F2F7;--color-neutral-200:#E5E5EA;--color-neutral-300:#C7C7CC;
  --color-neutral-400:#AEAEB2;--color-neutral-500:#8E8E93;--color-neutral-600:#636366;
  --color-neutral-700:#48484A;--color-neutral-800:#3A3A3C;--color-neutral-900:#2C2C2E;
  --color-accent-100:#F0F1FE;--color-accent-200:#DBDDFE;--color-accent-300:#BDBFFE;
  --color-accent-400:#9390FE;--color-accent-500:#6C5CE7;--color-accent-600:#5741CA;
  --color-accent-700:#41309D;--color-accent-800:#2D2170;--color-accent-900:#1C1842;
  --color-accent-2-100:#F0F1FE;--color-accent-2-200:#DBDDFE;--color-accent-2-300:#BDBFFE;
  --color-accent-2-400:#9390FE;--color-accent-2-500:#6C5CE7;--color-accent-2-600:#5741CA;
  --color-accent-2-700:#41309D;--color-accent-2-800:#2D2170;--color-accent-2-900:#1C1842;
  --color-section:#2D2170;--color-section-glow:#41309D;--color-section-ghost:#5741CA;
}
/* L'accento pieno sul nero arriva a 4,3: sotto il 4,5 che serve al testo
   piccolo. Le etichette in maiuscoletto usano il gradino più chiaro. */
body .kicker{color:var(--color-accent-400)}

/* Il logo dell'app accanto al nome, in barra e nel piede. */
.brand-logo{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:var(--space-2)}
.nav-brand{display:inline-flex;align-items:center}

/* Classi che sostituiscono gli stili scritti nelle pagine: la CSP del sito
   (style-src 'self') non ammette né <style> né attributi style. */
.mt-4{margin-top:var(--space-4)}
.mb-2{margin-bottom:var(--space-2)}
.row-wrap{display:flex;gap:var(--space-3);flex-wrap:wrap}
.footer-tag{font-size:14px;max-width:34ch;color:color-mix(in srgb, var(--color-text) 70%, transparent)}
a.langbtn{text-decoration:none;display:inline-block}
pre.copy{white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}

/* Barra e piede sono uguali in ogni pagina: stanno qui, non ripetuti nei
   fogli delle singole pagine. */
.nav{padding-inline:max(var(--edge),calc((100% - 1120px) / 2 + var(--edge)));display:flex;align-items:center;gap:var(--space-4)}
.nav a{white-space:nowrap}
.nav-spacer{flex:1}
.langbtn{border:1px solid var(--color-neutral-700);background:transparent;color:var(--color-text);font-family:var(--font-body);font-size:12px;letter-spacing:0.04em;border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer}
.langbtn:hover{border-color:var(--color-accent);color:var(--color-accent)}
footer{padding:calc(2*var(--leading)) 0;border-top:1px solid var(--color-divider)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--leading)}
.fcol .fcol-title{color:color-mix(in srgb, var(--color-text) 55%, transparent);margin-bottom:var(--space-3);font-size:13px;letter-spacing:0.08em;text-transform:uppercase}
.fcol a{display:block;color:var(--color-text);opacity:0.82;text-decoration:none;font-size:14px;margin-bottom:var(--space-2)}
.fcol a:hover{color:var(--color-accent);opacity:1}
.fbottom{font-size:13px;color:color-mix(in srgb, var(--color-text) 55%, transparent);margin-top:var(--leading)}
.nav a{color:var(--color-text);text-decoration:none}
.nav a:hover{color:var(--color-accent)}
.nav-brand{color:var(--color-text);text-decoration:none;font-weight:600}
/* Le sezioni sono ancore della stessa pagina. Su telefono stanno, con la
   lingua, in un menu a scomparsa senza JavaScript: «apri» porta a #menu e il
   pannello si mostra quando la barra è il bersaglio; scegliendo una sezione
   l'indirizzo cambia e il menu si chiude da solo. «Chiudi» porta a un'ancora
   che non esiste, così la pagina non salta in cima. */
.nav{flex-wrap:wrap;row-gap:var(--space-2)}
.nav-sezioni{display:flex;gap:var(--space-4);font-size:14px}
.menu-apri,.menu-chiudi{display:none}
@media (max-width:980px){
  .nav-laterale{position:fixed;top:0;left:0;right:0;z-index:20;padding-block:10px;background:color-mix(in srgb, var(--color-bg) 90%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
  body:has(.nav-laterale){padding-top:60px}
  body:has(.nav-laterale) [id]{scroll-margin-top:76px}
  .nav-pannello{display:none}
  .menu-apri{display:inline-flex;margin-left:auto;padding:8px;color:var(--color-text)}
  .menu-apri .icona,.menu-chiudi .icona{width:24px;height:24px}
  #menu:target .menu-apri{display:none}
  #menu:target .menu-chiudi{display:inline-flex;margin-left:auto;padding:8px;color:var(--color-text)}
  #menu:target .nav-pannello{display:flex;flex-direction:column;align-items:flex-start;flex-basis:100%;gap:var(--space-6);padding:var(--space-4) 0 var(--space-8)}
  #menu:target .nav-sezioni{flex-direction:column;gap:0;font-size:17px;width:100%}
  #menu:target .nav-sezioni a{padding:11px 0;border-bottom:1px solid var(--color-divider)}
  #menu:target .nav-spacer{display:none}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:640px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}

/* Senza uno sfondo su html, quello di body si ripete sul resto della finestra
   e sotto una pagina corta si vede la giunzione delle sfumature. */
html{background:var(--color-bg)}
body{min-height:100vh}

/* Una bozza non deve poter passare per la pagina vera, nemmeno in una cattura. */
.bozza{position:sticky;top:0;z-index:10;margin:0;padding:8px var(--edge,20px);background:#B3261E;color:#FFFFFF;font-size:13px;font-weight:600;letter-spacing:0.04em;text-align:center}

/* Icone di contatto: SVG nella pagina, colorate dal testo che le contiene. */
.icona{width:18px;height:18px;flex:none}

/* Il pulsante del design system ha 5,6 px di margine verticale: per le azioni
   principali è troppo stretto. */
.btn-primary{padding:11px 20px}

/* Sugli schermi larghi la navigazione diventa una barra laterale fissa; sotto
   resta la fila in alto, che su telefono scorre di lato. */
:root{--sidebar:236px}
@media (min-width:981px){
  .nav-laterale{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar);box-sizing:border-box;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:var(--space-8);padding:calc(2*var(--space-8)) var(--space-8);border-right:1px solid var(--color-divider);background:color-mix(in srgb, var(--color-surface) 45%, var(--color-bg));overflow-y:auto;z-index:5}
  body:has(.nav-laterale){padding-left:var(--sidebar)}
  .nav-laterale .nav-brand{font-size:17px}
  .nav-laterale .brand-logo{width:40px;height:40px}
  .nav-laterale .nav-sezioni{flex-direction:column;gap:var(--space-1);font-size:15px}
  .nav-laterale .nav-sezioni a{padding:7px 12px;border-radius:var(--radius-sm);color:color-mix(in srgb, var(--color-text) 78%, transparent)}
  .nav-laterale .nav-sezioni a:hover{background:color-mix(in srgb, var(--color-accent) 16%, transparent);color:var(--color-text)}
  .nav-laterale .nav-pannello{display:flex;flex-direction:column;flex:1;gap:var(--space-8)}
  .nav-laterale .nav-spacer{flex:1}
  .nav-laterale .langbtn{align-self:flex-start;margin-left:12px}
}