/* =========================================================================
   Sezione /code — Volume 2 «Claude Code: costruire con l'AI»

   Strato additivo sopra hub.css: cambia l'accento e aggiunge i pochi pezzi
   che nel Volume 1 non esistono (le pillole di tappa, la scheda del kit, la
   tabella dei file che scorre da sola sul telefono). Non ridefinisce niente
   del Volume 1: tutto è sotto `body.vol2` o dentro classi nuove.
   ========================================================================= */

body.vol2 {
  /* L'ottanio della Parte 7 del sistema visivo: distingue il Volume 2 dal
     Volume 1 senza uscire dalla palette del libro. */
  --accento: #0e7c7b;
  --accento-scuro: #0a5e5d;
  --accento-tenue: #e6f2f1;
}

@media (prefers-color-scheme: dark) {
  html:not([data-tema="chiaro"]) body.vol2 {
    --accento: #3fb8b6;
    --accento-scuro: #2a9a98;
    --accento-tenue: #10262a;
  }
}
html[data-tema="scuro"] body.vol2 {
  --accento: #3fb8b6;
  --accento-scuro: #2a9a98;
  --accento-tenue: #10262a;
}

/* Il segno del marchio: due lettere, stesso stampo del Volume 1 ma in ottanio. */
body.vol2 .marchio-segno {
  background: linear-gradient(135deg, #0e7c7b 0%, #1e5aa8 60%, #6b4fa0 100%);
}

body.vol2 .eroe-code::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 90% at 12% 0%, rgba(14, 124, 123, 0.12), transparent 70%);
}
body.vol2 .eroe-code { position: relative; }

/* ---------- Filtri di tappa: una riga a sé, perché è il filtro vero ---------- */

.filtri + .filtri { margin-top: 0.55rem; }

.filtro-tappa[aria-pressed="true"] {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff;
}

/* La tendina delle categorie: stesso vestito dei bottoni-filtro. */
.filtro-scelta {
  font: inherit;
  font-size: 0.86rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 999px;
  background: var(--carta);
  color: var(--nero);
  cursor: pointer;
  max-width: 100%;
}
.filtro-scelta:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---------- Kit ---------- */

.pillola-attesa {
  background: var(--accento-tenue);
  color: var(--accento-scuro);
  border: 1px dashed var(--accento);
}
.scheda-kit .scheda-piede { gap: 0.4rem; flex-wrap: wrap; }

/* La tabella dei file di un kit può essere lunga: scorre da sola invece di
   allargare la pagina. */
.tabella-scorre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.6rem;
}
.tabella-scorre table { margin: 0; }

/* ---------- Rimandi ai prompt dentro le pagine di contenuto ---------- */

.contenuto a.rimando-prompt,
.contenuto p > a[href^="/code/libreria?p="] {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.84rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--accento);
  border-radius: 999px;
  color: var(--accento-scuro);
  background: var(--accento-tenue);
  text-decoration: none;
}
.contenuto a.rimando-prompt:hover,
.contenuto p > a[href^="/code/libreria?p="]:hover {
  background: var(--accento);
  color: #fff;
}

/* Le figure del libro dentro le pagine dell'hub: larghe quanto la colonna,
   con lo stesso respiro delle immagini stampate. */
.contenuto figure { margin: 1.8rem 0; }
.contenuto figure img { width: 100%; height: auto; display: block; border-radius: var(--r-s); }
.contenuto figcaption {
  font-size: 0.86rem;
  color: var(--grigio-testo);
  margin-top: 0.55rem;
  line-height: 1.5;
}

/* Le diagnosi del 6.3 sono un elenco di paragrafi in grassetto: si leggono
   meglio staccati l'uno dall'altro. */
.contenuto h2 + p > strong:first-child { display: inline; }

@media print {
  .testata, .piede, .consenso, .avanti, .briciole, .lucchetto { display: none !important; }
  .checklist-voce { break-inside: avoid; }
}