/* ═══════════════════════════════════════════════════════
   APPROFONDIMENTI — livello condiviso
   I dieci articoli hanno ciascuno il proprio CSS su misura, ma
   condividono lo stesso scheletro (--bg/--txt/--mut/--line, .top,
   .wrap, .kicker, .pill, .note). Qui sta cio' che deve valere per
   tutti: fuoco visibile, risposta alla pressione e rispetto delle
   preferenze di sistema. Caricato DOPO il blocco <style> di pagina,
   cosi' a parita' di specificita' prevale.
═══════════════════════════════════════════════════════ */

:root {
  /* Il nome del colore d'accento cambia da pagina a pagina: si prende
     il primo che esiste, con un ciano freddo come ultima spiaggia. */
  --focus-ring: var(--acc2, var(--accent2, var(--sun2, var(--lun2, #7ff0ff))));
  --press: 90ms;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Fuoco ───────────────────────────────────────────
   Nessuna di queste pagine segnalava il fuoco da tastiera. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── Risposta alla pressione ─────────────────────────
   Il riscontro nasce quando si preme, non quando si rilascia. */
/* Il prefisso :root serve solo ad alzare la specificita' a (0,1,1):
   diverse pagine dichiarano gia' regole tipo `.chip-row button`, che
   altrimenti vincerebbero e lascerebbero il transform senza transizione. */
:root button, :root .btn, :root .top .back, :root .jump a,
:root summary, :root .chip {
  transition: transform 0.28s var(--spring), color 0.28s var(--spring),
              border-color 0.28s var(--spring), background 0.28s var(--spring);
}
button:active:not(:disabled),
.btn:active,
.top .back:active,
.jump a:active,
.chip:active {
  transform: scale(0.97);
  transition-duration: var(--press);
}
summary:active { transform: scale(0.99); transition-duration: var(--press); }

/* Il cursore dice che l'elemento si apre. */
summary { cursor: pointer; }

/* ─── Materiale della barra ───────────────────────────
   La barra fissa galleggia sul contenuto: piu' sfocatura e un filo
   di saturazione la fanno leggere come superficie, non come velo. */
.top {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* ─── Preferenze di sistema ───────────────────────────
   Mancavano del tutto: queste pagine sono piene di grafici animati. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:active:not(:disabled), .btn:active, .top .back:active,
  .jump a:active, .chip:active, summary:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .top {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
  }
}

/* Testo secondario e terziario piu' staccati dal fondo scuro. */
@media (prefers-contrast: more) {
  :root { --mut: #c6c5d2; --dim: #a3a2b2; }
  .top { border-bottom-color: var(--line2); }
}

/* ─── Etichette dei riquadri numerici ───
   In maiuscolo spaziato su ogni riquadro facevano da "occhiello" a
   tappeto: in tondo si leggono come didascalie. */
.tile .lbl { text-transform: none; letter-spacing: 0.01em; font-size: 13px; }

/* ─── Grigio secondario ───
   --dim (#6f6e7e) si fermava a 3.2-3.9:1 su fondo e pannelli: #8a8999
   supera 4.5:1 anche su --panel2 e resta sotto --mut (#9b9aa8), cosi'
   la gerarchia dei grigi non cambia. Stessa specificita' della pagina,
   caricato dopo: prevale. */
:root { --dim: #8a8999; }