/* Anatomy of the Web · foglio di stile unico.
   Gli elementi personalizzati (gv-*) si stilano per nome come qualsiasi tag: non
   c'è Shadow DOM, quindi questo foglio li raggiunge tutti (vedi ADR-08). */

:root {
  /* light dark: dichiara al browser che entrambi i temi esistono, così scrollbar
     e controlli di form seguono. È la riga che la voce Dark mode di questo
     glossario dice essere quella che manca ai tutorial. */
  color-scheme: light dark;

  --bg:        #ffffff;
  --grid:      rgba(0, 47, 167, 0.07);
  --paper:     #ffffff;
  --ink:       #0a1a3f;
  --ink-soft:  #5a6b8c;
  --line:      #c5d0ec;
  --accent:    #002FA7;
  --dash:      #9db0d8;

  /* --accent fa due lavori che in dark divergono: colore del testo/linea, e
     sfondo pieno con testo a contrasto. --on-accent è quel testo, --tint la
     velatura leggera sugli hover e sui pannelli. Separarli è ciò che permette
     al tema scuro di essere una manciata di righe invece di un rifacimento. */
  --on-accent: #ffffff;
  --tint:      rgba(0, 47, 167, 0.04);

  /* Scala tipografica. Prima il sito viveva schiacciato tra 10px e 16px: nessun
     livello si distingueva dall'altro, quindi non c'era gerarchia da leggere.
     Qui ogni gradino è un salto percepibile (~1.25×), e i nomi dicono il ruolo
     e non la misura: se domani la scala cambia, cambia in un posto solo. */
  --fs-etichetta: 11px;   /* micro-label tecniche, maiuscolo */
  --fs-meta:      13px;   /* alias, chip, codice: contorno, non contenuto */
  --fs-testo:     16px;   /* testo da leggere davvero */
  --fs-guida:     19px;   /* occhiello di pagina, titolo di una card */
  --fs-scheda:    24px;   /* titolo di una scheda */
  --fs-pagina:    34px;   /* titolo della pagina: il cartiglio del disegno */

  /* La forza viene dal peso, non da linee più spesse: una cianografia è fatta di
     tratti sottili, ingrassarli tradirebbe ADR-05. Il grassetto sta nel testo. */
  --fw-normale: 400;
  --fw-medio:   500;
  --fw-forte:   700;

  /* Area minima di un bersaglio cliccabile: sotto i 44px il dito sbaglia. */
  --tocco: 44px;
}

/* Tema scuro: la cianografia storica. Un blueprint è linee bianche su blu — il
   negativo che gli snippet già usano (ADR-05), esteso a tutta la pagina. Non è
   una moda: è l'origine letterale della parola. --accent diventa il bianco delle
   linee, e i riempimenti (snippet, pillola attiva) si invertono a bianco-su-blu.
   Segue prefers-color-scheme, cioè la scelta che il lettore ha già fatto altrove. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #04154a;   /* la carta da cianografia: blu profondo */
    --grid:      rgba(255, 255, 255, 0.06);   /* linee bianche, come su un vero blueprint */
    --paper:     #082364;   /* le schede, sollevate dal fondo */
    --ink:       #e7eefc;
    --ink-soft:  #9fb4de;
    --line:      #33529c;
    --accent:    #ffffff;   /* le linee bianche del disegno */
    --dash:      #52709f;

    --on-accent: #04154a;   /* testo sui riempimenti bianchi = il blu del fondo */
    --tint:      rgba(255, 255, 255, 0.06);
  }
}

/* Chi ha chiesto meno movimento non deve subire le nostre transizioni. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 60px;
}

/* Skip link: fuori dallo schermo finché non riceve il focus, poi scatta in alto
   a sinistra. Non display:none, o non sarebbe raggiungibile dal Tab. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%); transition: transform .15s ease;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  padding: 10px 16px; background: var(--accent); color: var(--on-accent);
  text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--on-accent); outline-offset: -4px; }

header.page { max-width: 960px; margin: 0 auto; padding: 46px 4px 8px; }
header.page h1 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-pagina); font-weight: var(--fw-forte);
  /* più il corpo cresce, più la spaziatura va stretta: a 34px la crenatura
     pensata per 15px si vedrebbe come un titolo slabbrato */
  letter-spacing: -0.01em; line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Il link eredita il titolo e non sembra un link finché non lo tocchi:
   la home non va gridata, va lasciata trovare. inline-block perché il focus
   e l'underline non debordino sulla riga intera del titolo a capo. */
header.page h1 a {
  color: var(--accent); text-decoration: none; display: inline-block;
}
header.page h1 a:hover { text-decoration: underline; text-underline-offset: 4px; }
header.page p {
  color: var(--ink-soft); font-size: var(--fs-guida); margin-top: 12px;
  /* misura in caratteri, non in pixel: è la riga a doversi leggere, e oltre i
     ~70 caratteri l'occhio perde il capo della riga successiva */
  max-width: 62ch;
}

/* Pagina statica di una voce (e/<id>.html): la versione crawlabile e linkabile,
   generata da tools/build-pages.mjs. Riusa .field (i sei campi) e le variabili,
   quindi eredita il tema scuro gratis. */
.entry { max-width: 720px; margin: 0 auto; padding: 40px 16px 90px; }
.entry-nav { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta); }
.entry-nav a { color: var(--ink-soft); text-decoration: none; }
.entry-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry h1 {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-pagina);
  font-weight: var(--fw-forte); letter-spacing: -0.01em; line-height: 1.15;
  color: var(--accent); margin-top: 20px; text-wrap: balance;
}
.entry .alias { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 8px; }
.entry .kind { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-etichetta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); border: 1px solid var(--line); padding: 3px 10px; margin-top: 16px; }
.entry .open-app {
  display: inline-block; margin-top: 22px;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta); font-weight: var(--fw-medio);
  padding: 10px 18px; min-height: var(--tocco); box-sizing: border-box;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
}
.entry .open-app:hover { opacity: .9; }
.entry .seealso a { text-decoration: none; }

/* wrap: con l'interruttore delle previsioni la riga ha tre elementi, e sotto i
   ~360px l'ultimo finiva tagliato fuori dallo schermo. Va a capo invece di uscire. */
.cats { max-width: 960px; margin: 26px auto 0; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 10px; }
.cat-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  font-weight: var(--fw-medio); letter-spacing: 0.04em;
  padding: 8px 18px; min-height: var(--tocco);
  cursor: pointer; background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
  touch-action: manipulation;   /* niente attesa di 300ms per un doppio tap che non arriverà */
}
.cat-btn.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
/* cifre a larghezza fissa: i conteggi cambiano di valore, non devono ballare */
.cat-btn .count { opacity: 0.7; margin-left: 8px; font-variant-numeric: tabular-nums; }

.view { display: none; }
.view.active { display: block; }

/* Visibile a chi usa uno screen reader, invisibile a chi guarda. Non display:none,
   che toglierebbe l'etichetta anche a loro: si rimpicciolisce e si porta fuori. */
.solo-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.cerca-riga { max-width: 960px; margin: 12px auto 0; padding: 0 4px; display: flex; align-items: center; gap: 12px; }
#cerca {
  flex: 1; min-width: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  padding: 8px 14px; min-height: var(--tocco);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
#cerca::placeholder { color: var(--ink-soft); opacity: 1; }
#cerca:focus { border-color: var(--accent); }
.conteggio-risultati {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  color: var(--ink-soft); flex-shrink: 0;
}

/* Il link in testata: dentro un paragrafo, quindi mono e sottolineato per
   distinguersi dal testo intorno senza gridare. */
.about-link {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.about-link:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }

.about { max-width: 960px; margin: 26px auto; padding: 0 4px; }
/* La misura conta qui più che altrove: è l'unico testo lungo del sito. */
.about > * { max-width: 62ch; }
.about h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-scheda);
  font-weight: var(--fw-forte); letter-spacing: -0.01em; color: var(--accent);
  text-wrap: balance;
}
.about h3 {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-etichetta);
  font-weight: var(--fw-forte); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin: 32px 0 10px; text-wrap: balance;
}
.about p { font-size: var(--fs-testo); line-height: 1.65; margin-top: 12px; }
.about .about-lead { font-size: var(--fs-guida); line-height: 1.5; color: var(--ink-soft); margin-top: 14px; }
.about b { font-family: 'IBM Plex Mono', monospace; font-weight: var(--fw-medio); color: var(--accent); }
.about em { font-style: normal; border-bottom: 1px solid var(--accent); }

.risultati { max-width: 960px; margin: 26px auto; padding: 0 4px; display: flex; flex-direction: column; gap: 8px; }
.risultato {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  text-align: left; width: 100%; padding: 14px 16px; min-height: var(--tocco);
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  touch-action: manipulation; transition: border-color .18s ease, background .18s ease;
}
.risultato:hover { border-color: var(--accent); background: var(--tint); }
.r-nome {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-guida);
  font-weight: var(--fw-forte); color: var(--accent); letter-spacing: -0.01em;
}
.r-tipo {
  grid-column: 2; grid-row: 1; align-self: center;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-etichetta);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
}
.r-alias { grid-column: 1; font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta); color: var(--ink-soft); }
/* La riga che spiega perché questa voce è saltata fuori: senza, cercare "FAQ" e
   vedersi comparire Accordion sembra un errore invece di una cosa imparata. */
.r-dove:not(:empty) {
  grid-column: 2; grid-row: 2; align-self: center; justify-self: end;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-etichetta);
  color: var(--accent);
}

.tag {
  position: absolute; top: -10px; left: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-etichetta);
  font-weight: var(--fw-medio);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: var(--bg); padding: 0 8px;
}

/* Un elemento personalizzato nasce display:inline come qualsiasi tag sconosciuto:
   il display va dichiarato, o il wireframe collassa. */
gv-wireframe {
  display: block;
  position: relative; border: 1px dashed var(--dash);
  margin: 26px auto; max-width: 960px; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
  touch-action: manipulation;
}
gv-wireframe:hover { border-color: var(--accent); background: var(--tint); }
gv-wireframe:focus-visible { background: var(--tint); }
gv-wireframe::after {
  content: "+ scheda"; position: absolute; top: -10px; right: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-etichetta);
  color: var(--ink-soft); background: var(--bg); padding: 0 8px;
  opacity: 0; transition: opacity .18s ease;
}
/* compare anche col focus da tastiera: chi tabula deve vedere lo stesso invito
   di chi passa col mouse, o l'affordance esiste per metà delle persone */
gv-wireframe:hover::after, gv-wireframe:focus-visible::after { opacity: 1; }

.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.nav-logo { width: 90px; height: 20px; background: var(--line); }
.nav-links { display: flex; gap: 22px; }
.nav-links span { width: 54px; height: 10px; background: var(--line); }

.hero-inner { padding: 60px 30px; text-align: center; }
.hero-inner .bar { height: 22px; background: var(--line); margin: 0 auto 14px; }
.hero-inner .bar.w1 { width: 60%; }
.hero-inner .bar.w2 { width: 42%; height: 14px; }
.hero-inner .btn-ph { width: 150px; height: 40px; background: var(--dash); margin: 24px auto 0; }

.grid-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px; }
.card-ph { border: 1px solid var(--line); padding: 14px; }
.card-ph .thumb { height: 90px; background: var(--line); margin-bottom: 12px; }
.card-ph .ln { height: 9px; background: var(--line); margin-bottom: 7px; }
.card-ph .ln.s { width: 55%; }

.cta-inner { padding: 34px; text-align: center; }
.cta-real {
  font-family: 'IBM Plex Mono', monospace; display: inline-block;
  padding: 12px 26px; border: 1px solid var(--accent); color: var(--accent);
  background: transparent; font-size: 13px; letter-spacing: 0.05em; cursor: pointer;
}

.foot-inner { display: flex; justify-content: space-between; padding: 22px; }
.foot-inner .col { display: flex; flex-direction: column; gap: 8px; }
.foot-inner .col span { width: 80px; height: 8px; background: var(--line); }

.form-inner { padding: 24px; display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.form-inner .lbl { width: 70px; height: 9px; background: var(--line); }
.form-inner .inp { height: 34px; border: 1px solid var(--line); }
.form-inner .sub { width: 120px; height: 38px; background: var(--dash); }

.acc-inner { padding: 22px; }
.acc-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.acc-row .t { width: 40%; height: 10px; background: var(--line); }
.acc-row .pm { font-family: 'IBM Plex Mono', monospace; color: var(--accent); }

.tabs-inner { padding: 22px; }
.tabs-bar { display: flex; gap: 4px; }
.tabs-bar span { padding: 10px 18px; border: 1px solid var(--line); border-bottom: none; height: 34px; width: 90px; }
.tabs-bar span.on { background: var(--tint); border-color: var(--accent); }
.tabs-panel { border: 1px solid var(--line); height: 80px; }

.gal-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 22px; }
.gal-inner .g { aspect-ratio: 1; background: var(--line); }

gv-concetti { max-width: 960px; margin: 26px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 4px; }
gv-concetto {
  display: block;
  position: relative; border: 1px solid var(--line); padding: 18px 16px;
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
  touch-action: manipulation;
}
gv-concetto:hover { border-color: var(--accent); background: var(--tint); }
gv-concetto:focus-visible { background: var(--tint); }
gv-concetto h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-guida);
  font-weight: var(--fw-forte); letter-spacing: -0.01em;
  color: var(--accent); margin-bottom: 6px; text-wrap: balance;
}
gv-concetto .a { font-size: var(--fs-meta); color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; margin-bottom: 10px; }
gv-concetto p { font-size: var(--fs-testo); color: var(--ink); }

/* focus da tastiera: :focus-visible colpisce solo la navigazione da tastiera,
   non il click del mouse. Un contorno solido dove il tratteggio è la regola. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La scheda è un <dialog> vero. L'elemento gv-scheda non disegna niente: è solo
   il contenitore che gli dà il comportamento, quindi sparisce dal layout. */
gv-scheda { display: contents; }

.foglio {
  /* niente z-index: showModal() mette il dialog nel top layer, che sta sopra
     tutto per costruzione. Le guerre di z-index finiscono qui. */
  position: fixed;
  inset-block: 40px auto;      /* ancorata in alto, non centrata */
  inset-inline: 0;
  margin-inline: auto;
  max-width: 680px;
  width: calc(100% - 36px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* in fondo alla scheda la rotella non scorre la pagina sotto */
  /* padding: 0 è obbligatorio, non estetico: il click sul velo si riconosce da
     e.target === dialog, e con del padding cliccare il bordo chiuderebbe. */
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--accent);
  color: var(--ink);
}
/* il velo: uno pseudo-elemento del dialog, non un div nostro */
.foglio::backdrop { background: rgba(0, 24, 80, 0.45); backdrop-filter: blur(2px); }
/* il titolo riceve il focus all'apertura solo per farsi annunciare: non va contornato */
.foglio h2:focus { outline: none; }
.foglio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.foglio-head .names h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-scheda);
  font-weight: var(--fw-forte); letter-spacing: -0.01em; line-height: 1.2;
  color: var(--accent); text-wrap: balance;
}
.foglio-head .names .alias { font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 6px; font-family: 'IBM Plex Mono', monospace; }
.close {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  width: var(--tocco); height: var(--tocco); cursor: pointer; font-size: var(--fs-testo);
  flex-shrink: 0; touch-action: manipulation;
}
.close:hover { border-color: var(--accent); color: var(--accent); }

.foglio-corpo { padding: 8px 22px 26px; }
.field { margin-top: 22px; }
.field h3 {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-etichetta);
  font-weight: var(--fw-forte); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
/* La misura vale anche dentro la scheda: il foglio è largo 680px e senza un
   limite il testo arriverebbe a ~80 caratteri per riga. */
.field p { font-size: var(--fs-testo); line-height: 1.6; color: var(--ink); max-width: 66ch; }
.field ul { list-style: none; font-size: var(--fs-testo); max-width: 66ch; }
.field li { padding: 7px 0; border-bottom: 1px dotted var(--line); line-height: 1.5; }
.field li b { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-weight: var(--fw-medio); }
.field.note p { background: var(--tint); border-left: 2px solid var(--accent); padding: 12px 14px; font-size: var(--fs-testo); }

/* Il blocco della previsione. Sta dentro il foglio ma si stacca: è l'unico punto
   in cui la scheda chiede qualcosa invece di dire qualcosa. */
.previsione { border: 1px solid var(--line); padding: 16px; background: var(--tint); }
.previsione .domanda { font-size: var(--fs-testo); color: var(--ink); }
.previsione .citazione {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  color: var(--ink-soft); margin: 8px 0 14px; max-width: 66ch;
}
.opzioni { display: flex; flex-wrap: wrap; gap: 8px; }
.opzione {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  font-weight: var(--fw-medio);
  padding: 5px 14px; min-height: var(--tocco);
  border: 1px solid var(--dash); color: var(--accent);
  background: var(--paper); cursor: pointer; touch-action: manipulation;
  transition: border-color .18s ease, background .18s ease;
}
.opzione:hover:not(:disabled) { border-color: var(--accent); background: var(--tint); }
.opzione:disabled { cursor: default; opacity: 0.55; }
/* L'esito non è mai affidato al solo colore: il segno lo dice comunque, e chi non
   distingue i colori legge lo stesso la risposta nella riga sotto. */
.opzione.giusta { opacity: 1; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.opzione.giusta::after { content: " ✓"; }
.opzione.sbagliata { opacity: 1; border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); }
.opzione.sbagliata::after { content: " ✕"; }
.previsione .esito:not(:empty) { margin-top: 12px; font-size: var(--fs-testo); color: var(--ink); }
.scappatoie { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
/* Le vie d'uscita esistono ma non competono con le opzioni: sono testo, non bottoni. */
.link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { color: var(--accent); }

.pref-btn {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  font-weight: var(--fw-medio); letter-spacing: 0.04em;
  padding: 8px 14px; min-height: var(--tocco);
  border: 1px dashed var(--dash); background: transparent; color: var(--ink-soft);
  cursor: pointer; touch-action: manipulation;
}
.pref-btn.on { border-style: solid; border-color: var(--accent); color: var(--accent); }
.pref-btn::before { content: "○ "; }
.pref-btn.on::before { content: "● "; }

.seealso { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta);
  font-weight: var(--fw-medio);
  padding: 5px 14px; min-height: var(--tocco);
  border: 1px solid var(--accent); color: var(--accent);
  background: transparent; cursor: pointer; touch-action: manipulation;
}
.chip:hover { background: var(--accent); color: var(--on-accent); }

pre { background: var(--accent); border: 1px solid var(--accent); padding: 14px; overflow-x: auto; margin-top: 4px; }
pre code { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-meta); color: var(--on-accent); line-height: 1.65; white-space: pre; }

/* stato di errore fetch (server locale mancante) */
.fetch-error { max-width: 960px; margin: 26px auto; padding: 20px; border: 1px solid var(--accent); background: var(--tint); font-size: var(--fs-testo); line-height: 1.6; }
.fetch-error code { font-family: 'IBM Plex Mono', monospace; background: var(--accent); color: var(--on-accent); padding: 2px 6px; }

@media (max-width: 640px) {
  .grid-inner, .gal-inner, gv-concetti { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  /* Su schermo stretto un titolo da 34px mangia mezza altezza utile: la scala si
     accorcia in cima, dove il salto è più grande, e non tocca il testo — che è
     l'ultimo posto da rimpicciolire quando lo spazio manca. */
  :root { --fs-pagina: 26px; --fs-scheda: 21px; --fs-guida: 17px; }
  header.page { padding-top: 32px; }
}