/* ============================================================================
   docs.booost.network — impianto alla docs.gitlab.com: barra superiore fissa,
   colonna di navigazione persistente a sinistra, articolo al centro.
   I colori e il carattere sono quelli del sito (page.css): due indirizzi, una
   sola identità. Nessun esadecimale fuori da :root, come là.
   ========================================================================== */
:root {
  /* ⚠️ Questi valori sono COPIATI da packages/website/page.css, uno per uno.
     Nella prima stesura avevo preso i grigi del tema scuro dai token dell'APP
     desktop (#f0f1f5 / #9aa0ae / bordi bianchi): vicini a occhio, diversi al
     confronto. Due indirizzi con lo stesso marchio non possono avere due
     palette che si somigliano — devono avere la stessa. */
  --ink: #0B0D13; --cream: #F3F2EF; --white: #fff; --ink-text: #191919;
  --pink: #FF2D6B; --pink-soft: rgba(255,45,107,.12); --pink-line: rgba(255,45,107,.42);
  --ink-raised: #111319; --ink-overlay: #181B25;
  --text-fixed: #E8ECF4; --muted-fixed: #96A0B5;
  --fd: 'Atkinson Hyperlegible Next','Segoe UI',system-ui,sans-serif;
  --fb: 'Atkinson Hyperlegible Next',system-ui,-apple-system,sans-serif;
  --fm: 'Atkinson Hyperlegible Next',ui-monospace,'SF Mono',Menlo,monospace;
  --barra: 60px;
  --colonna: 280px;

  /* ⚠️ `--pink` è un RIEMPIMENTO, non un colore da testo. Misurato con axe sul
     sito pubblicato: #FF2D6B su crema fa 3,21:1 e bianco su rosa fa 3,59:1 —
     sotto il 4,5 che AA chiede. Da qui due token distinti:
       --pink-testo : il rosa quando fa da TESTO (scuro sul chiaro, 5,13:1)
       --su-pink    : cosa si scrive SOPRA un riempimento rosa (inchiostro, 5,40:1)
     Sul fondo scuro il rosa pieno va bene da testo (5,40:1), quindi cambia solo
     nel tema chiaro. Sbagliavo entrambe: le mie stesse note dicevano che il
     bianco sul rosa fa 3,60 e che il pieno vuole testo scuro. */
  --pink-testo: #ff2d6b;
  --su-pink: var(--ink);

  --page: var(--ink); --raised: var(--ink-raised); --overlay: var(--ink-overlay);
  --text: var(--text-fixed); --muted: var(--muted-fixed); --faint: #6A7488;
  --line: rgba(140,155,190,.14); --line-2: rgba(140,155,190,.26);
}
:root[data-theme="light"] {
  --pink-testo: #cc0046;
  --page: var(--cream); --raised: var(--white); --overlay: var(--white);
  --text: var(--ink-text); --muted: #565A66; --faint: #8A8E99;
  --line: rgba(20,24,40,.10); --line-2: rgba(20,24,40,.18);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pink-testo: #cc0046;
    --page: var(--cream); --raised: var(--white); --overlay: var(--white);
    --text: var(--ink-text); --muted: #565A66; --faint: #8A8E99;
    --line: rgba(20,24,40,.10); --line-2: rgba(20,24,40,.18);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: var(--fb); line-height: 1.65; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ── barra superiore ─────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 30; height: var(--barra);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--page); border-bottom: 1px solid var(--line);
}
/* ⚠️ Il `gap` separa OGNI figlio del flex, compreso lo <span> rosa dentro il
   nome: con il marchio scritto come `B<span>ooo</span>st` si leggeva
   «B ooo st». Il nome sta in un elemento suo, e il gap separa solo nome e
   qualifica. */
.marchio { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.marchio .nome .oo { color: var(--pink-testo); }
.marchio small { font-weight: 600; color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.barra .cerca { flex: 1 1 auto; max-width: 420px; }
.barra input[type="search"] {
  width: 100%; height: 34px; padding: 0 12px; font: inherit; font-size: .9rem;
  color: var(--text); background: var(--overlay);
  border: 1px solid var(--line-2); border-radius: 8px;
}
.barra input[type="search"]:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.barra .destra { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lingua a { font-size: .8rem; text-decoration: none; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.lingua a[aria-current] { color: var(--text); background: var(--overlay); }
.btn-app {
  font-size: .85rem; font-weight: 600; text-decoration: none;
  /* Inchiostro sul rosa, non bianco: 5,40:1 invece di 3,59:1. */
  color: var(--su-pink);
  background: var(--pink); padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.btn-app .corto { display: none; }
.apri-menu { display: none; background: none; border: 1px solid var(--line-2); color: inherit; border-radius: 8px; height: 34px; padding: 0 10px; cursor: pointer; }

/* ── impianto a due colonne ──────────────────────────────────────────────── */
.impianto { display: grid; grid-template-columns: var(--colonna) minmax(0, 1fr); align-items: start; }

.colonna {
  position: sticky; top: var(--barra); height: calc(100vh - var(--barra));
  overflow-y: auto; padding: 20px 12px 40px;
  border-right: 1px solid var(--line);
}
.colonna ol { list-style: none; margin: 0; padding: 0; }
.colonna > ol > li > a {
  display: block; padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: .92rem;
}
.colonna > ol > li > a:hover { background: var(--overlay); color: var(--text); }
/* La sezione aperta è quella in cui ti trovi: filo rosa a sinistra, come il
   segno di posizione dell'albero di GitLab. */
.colonna > ol > li > a[aria-current] {
  color: var(--text); font-weight: 600; background: var(--pink-soft);
  box-shadow: inset 2px 0 0 var(--pink);
}
.colonna .dentro { list-style: none; margin: 2px 0 8px; padding: 0 0 0 14px; border-left: 1px solid var(--line); }
.colonna .dentro a { display: block; padding: 4px 10px; font-size: .86rem; color: var(--muted); text-decoration: none; border-radius: 6px; }
.colonna .dentro a:hover { color: var(--text); background: var(--overlay); }
/* ⚠️ Era `--faint`: 4,13:1, sotto la soglia AA. axe non l'aveva segnalato
   perché questo messaggio nasce nascosto, e axe valuta solo ciò che è a
   schermo — una violazione che si presenta solo quando serve. */
.colonna .vuoto { padding: 10px 12px; font-size: .86rem; color: var(--muted); }

/* ── articolo ────────────────────────────────────────────────────────────── */
/* La misura di lettura resta 820px — oltre, l'occhio perde la riga — ma la
   colonna si centra nello spazio che avanza invece di restare appiccicata alla
   navigazione con un vuoto largo a destra.
   ⚠️ 1.06rem non è un capriccio: è la misura del corpo del testo su
   booost.network (`.prose` in page.css). Non l'avevo impostata affatto, quindi
   restava il 16px del browser — un carattere più piccolo del sito, sullo stesso
   marchio. */
.articolo { padding: 28px 40px 96px; max-width: 820px; margin-inline: auto; font-size: 1.06rem; }
/* La riga di metadati: risalita all'indice, posizione nella sequenza, data.
   ⚠️ `--faint` non basta per il contrasto: 4,01:1 sul scuro e 2,92:1 sul
   chiaro, sotto il 4,5 di AA. */
.meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  font-size: .82rem; color: var(--muted); margin: 0 0 18px;
}
/* Un collegamento dentro un blocco di testo non può distinguersi SOLO per il
   colore (WCAG 1.4.1): la sottolineatura è il secondo segnale. */
.meta a { color: var(--pink-testo); text-decoration: underline; }
.meta a:hover { text-decoration-thickness: 2px; }
.meta .pos { font-family: var(--fm); font-size: .74rem; letter-spacing: .06em; }
.meta .pos::before { content: '·'; margin-right: 10px; }
.meta time { margin-left: auto; font-size: .78rem; }
.articolo h1, .articolo h2 { font-family: var(--fd); }
.articolo h1 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.02em; margin: 0 0 10px; }
.articolo .occhiello { font-family: var(--fm); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-testo); margin-bottom: 8px; }
.articolo .guida { font-size: 1.05rem; color: var(--muted); margin: 0 0 28px; }
.articolo h2 { font-size: 1.35rem; margin: 36px 0 12px; scroll-margin-top: calc(var(--barra) + 12px); }
.articolo p { margin: 0 0 14px; }
.articolo ul { margin: 0 0 18px; padding-left: 20px; }
.articolo li { margin: 6px 0; }
.articolo li::marker { color: var(--pink-testo); }
.articolo a { color: var(--pink-testo); text-decoration: underline; }

/* L'indice delle sezioni, in home */
.schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 8px; }
.scheda { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--raised); }
.scheda:hover { border-color: var(--pink-line); }
.scheda strong { display: block; margin-bottom: 6px; color: var(--pink-testo); }
.scheda span { color: var(--muted); font-size: .9rem; }

.avanti { display: flex; gap: 12px; justify-content: space-between; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .92rem; }
.avanti a { text-decoration: none; color: var(--muted); }
.avanti a:hover { color: var(--pink-testo); }

/* ── finestra stretta: la colonna si apre a richiesta ────────────────────── */
/* ⚠️ WCAG 1.4.10 (Reflow, AA): a 320px la pagina scorreva in orizzontale —
   367px di contenuto in 320 di finestra. Il colpevole misurato non era
   l'articolo (zero elementi tagliati) ma la barra: il bottone «booost.network»
   da solo occupa 126px. axe NON vede questo criterio: si trova solo
   restringendo davvero la finestra. Il collegamento resta, con l'etichetta
   corta. */
@media (max-width: 430px) {
  .barra { gap: 8px; padding: 0 10px; }
  .btn-app .lungo { display: none; }
  .btn-app .corto { display: inline; }
  .btn-app { padding: 7px 12px; }
  .lingua a { padding: 2px 4px; }
}

@media (max-width: 900px) {
  .impianto { grid-template-columns: minmax(0, 1fr); }
  .colonna {
    position: fixed; top: var(--barra); left: 0; width: min(300px, 84vw); z-index: 25;
    background: var(--page); transform: translateX(-102%); transition: transform .18s ease;
  }
  .colonna[data-aperta="1"] { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .apri-menu { display: inline-flex; align-items: center; }
  .articolo { padding: 22px 20px 80px; }
  .barra .cerca { display: none; }
}