/* ==========================================================================
   Le stelle più affascinanti del cielo — custom.css
   Palette ispirata alla sequenza spettrale stellare OBAFGKM:
   blu-bianco (stelle calde, tipo B) come colore primario dei link,
   oro (stelle tipo G, come il Sole) come accento di enfasi/stato attivo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Palette */
  --night:         #0a0e1a;  /* sfondo primario: blu-notte, non nero puro */
  --night-deep:     #171e3c; /* sfondo pannelli laterali (menu, toc) */
  --starlight:      #e9e6dc; /* testo principale: bianco caldo */
  --muted:          #8c93ab; /* testo secondario, didascalie */
  --nebula-blue:    #8fb8ff; /* accento primario — stella calda tipo B */
  --stellar-gold:   #f0b84f; /* accento di enfasi — stella tipo G, come il Sole */
  --stellar-red:    #e0483f; /* accento freddo — stella tipo M */
  --stellar-orange: #ea8d4d; /* colore dei titoli — stella tipo K, tra oro (G) e rosso (M) */
  --line:           #1e2740; /* bordi e separatori sottili */
  --surface:        #1c2542; /* sfondo elementi interattivi, più chiaro del pannello laterale */
  --surface-line:   #34406e; /* bordo ben visibile per gli elementi su --surface */
  --halpha-pink:    #ff7aaf; /* colore delle formule KaTeX nel testo — emissione H-alfa (leggermente schiarito da #ff6fa8) */

  /* Override delle variabili del tema Hugo Book */
  --body-background:       var(--night);
  --body-background-tint:  none;
  --body-font-color:       var(--starlight);
  --color-link:            var(--nebula-blue);
  --color-visited-link:    var(--nebula-blue);
  --gray-100:               var(--night-deep);
  --gray-200:               var(--line);
  --border-radius:         8px;
  --icon-filter:            invert(1) brightness(1.6);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Tipografia di base
   ========================================================================== */

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--stellar-orange);
}

/* Prova: titoli di terzo livello in azzurro (stesso tono dei link),
   1.4rem invece del default 1.25rem del tema */
.markdown h3 {
  color: var(--nebula-blue);
  font-size: 1.4rem;
}

/* Prova: titoli di secondo livello in oro/giallo, 1.65rem invece
   del default 1.5rem del tema */
.markdown h2 {
  color: var(--stellar-gold);
  font-size: 1.65rem;
}

.markdown h1 {
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.015em;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-16);
}

/* Il grassetto viene usato di rado nel testo: quando compare, deve
   distinguersi dal bianco caldo del corpo del testo, ma anche dall'oro
   netto dei richiami di nota, per non confondere i due elementi.
   Una miscela oro/arancio (stessi toni caldi dei titoli e dell'enfasi)
   dà al grassetto una tonalità più scura e calda, riconoscibile a
   colpo d'occhio come un accento diverso da quello delle note. */
.markdown strong,
.markdown b {
  color: color-mix(in srgb, var(--stellar-gold) 65%, var(--stellar-orange) 35%);
}

/* Sottotitolo della sezione Stelle */
.book-subtitle {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--color-link);
  margin-top: -1rem !important;
  margin-bottom: 1.5rem;
}

/* Triangolo-freccia che punta verso il titolo, con gradiente blu→oro:
   un richiamo discreto alle righe spettrali */
.markdown h2,
.markdown h3 {
  position: relative;
  padding-left: 1.15em;
}

.markdown h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.8em;
  background: linear-gradient(90deg, var(--stellar-red), var(--stellar-gold));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Ai titoli di terzo livello un quadratino al posto della freccia, per
   marcare ulteriormente la differenza rispetto al secondo livello */
.markdown h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.55em;
  height: 0.55em;
  background: linear-gradient(90deg, var(--nebula-blue), var(--starlight));
}

/* Selezione testo */
::selection {
  background: color-mix(in srgb, var(--nebula-blue) 35%, transparent);
  color: var(--starlight);
}

/* ==========================================================================
   Formule matematiche (KaTeX) — necessario su sfondo scuro,
   altrimenti il testo delle formule resta nero e illeggibile
   ========================================================================== */

.katex {
  color: var(--halpha-pink);
}

/* Nelle note a piè di pagina il contrasto attuale (chiaro su testo smorzato)
   va già bene così: qui si mantiene il colore originale, non quello nuovo */
.markdown .footnotes .katex {
  color: var(--starlight);
}

/* ==========================================================================
   Link nel testo
   ========================================================================== */

.book-page a {
  color: var(--color-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nebula-blue) 45%, transparent);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.book-page a:visited {
  color: var(--nebula-blue);
}

.book-page a:hover {
  color: var(--stellar-gold);
  text-decoration-color: var(--stellar-gold);
}

/* Piccolo quadratino automatico sui link esterni nel testo dei contenuti */
.markdown a[href^="http"]:not([href*="diodatiastro.github.io"])::after {
  content: "▫";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 1.05em;
  transform: translateY(-0.05em);
}

/* ==========================================================================
   Tabelle (usate spesso nelle voci del dizionario)
   ========================================================================== */

.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.markdown th,
.markdown td {
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--line);
}

.markdown th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--nebula-blue);
  border-bottom: 2px solid var(--line);
  text-align: left;
}

.markdown tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* ==========================================================================
   Citazioni e note a piè di pagina
   ========================================================================== */

.markdown blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--stellar-gold);
  background: rgba(240, 184, 79, 0.06);
  color: var(--muted);
  font-style: italic;
}

.markdown .footnote-ref,
.markdown sup a {
  /* Un giallo un po' più chiaro dell'oro standard, per distinguersi
     più nettamente dal grassetto (che usa una miscela oro/arancio
     più scura). Resta comunque un derivato dello stesso --stellar-gold,
     non un colore nuovo estraneo alla palette. */
  color: color-mix(in srgb, var(--stellar-gold) 82%, white 18%);
  font-weight: 600;
  text-decoration: none;
}

.markdown .footnotes {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
  /* Grigio-azzurro schiarito: 60% del colore smorzato (--muted, #8c93ab)
     e 40% del testo principale (--starlight), circa #b1b4bf */
  color: color-mix(in srgb, var(--muted) 60%, var(--starlight) 40%);
}

/* ==========================================================================
   Figure scientifiche (regole originali, ricolorate)
   ========================================================================== */

.markdown figure.scientific-figure {
  text-align: center;
  margin: 1.8rem auto;
}

.scientific-figure img,
.scientific-figure video {
  display: block;
  margin: 0 auto;
  max-width: 90%;
  height: auto;
  border-radius: var(--border-radius);
}

/* Video embeddati da sorgenti esterne (YouTube, Vimeo, altro iframe):
   contenitore responsive 16:9, stessi margini/arrotondamento delle figure */
.scientific-figure .video-embed {
  position: relative;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.scientific-figure .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.markdown figure.scientific-figure figcaption {
  margin-top: 0.6rem;
  margin-left: 1.5em;
  margin-right: 1.5em;
  font-size: 0.90rem;
  line-height: 1.4;
  font-style: normal;
  text-align: center;
  color: var(--muted);
}

/* L'etichetta "Figura N" non deve seguire il colore oro/arancio
   del grassetto generico: usa l'azzurro dei link, con una spaziatura
   dei caratteri leggermente più ampia del normale. */
.markdown figure.scientific-figure figcaption strong {
  color: var(--color-link);
  letter-spacing: 0.09em;
}

/* Foto dell'autore: piccola, ancorata in alto a destra,
   testo che scorre a fianco — a differenza delle figure
   scientifiche, grandi e centrate */
.markdown .author-photo {
  float: right;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  margin: -30px 0 1rem 1.5rem;
  border: 2px solid var(--line);
}

/* ==========================================================================
   Tag degli articoli (sotto la data, in fondo ai metadati)
   ========================================================================== */

.book-post-tags {
  margin-top: 0.35em;
}

.book-post-tags__label {
  color: var(--stellar-gold);
  font-weight: 600;
  margin-right: 0.35em;
}

/* ==========================================================================
   Menu laterale
   ========================================================================== */

.book-menu {
  min-height: 100vh;
  background-color: var(--night-deep);
  border-right: 1px solid var(--line);
}

.book-menu a.active {
  position: relative;
  color: var(--stellar-gold);
}

/* Puntino dorato luminoso accanto alla voce di menu attiva */
.book-menu a.active::before {
  content: "";
  position: absolute;
  left: -0.7em;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--stellar-gold);
  box-shadow: 0 0 6px 1px rgba(240, 184, 79, 0.6);
}

.book-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-align: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.book-brand img {
  height: 2.4em;
  width: auto;
}

/* ==========================================================================
   Ricerca
   ========================================================================== */

.book-search input {
  background-color: var(--surface);
  border: 1px solid var(--surface-line);
  color: var(--starlight);
}

.book-search input::placeholder {
  color: var(--muted);
}

.book-search input:focus {
  outline: none;
  border-color: var(--nebula-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nebula-blue) 25%, transparent);
}

/* ==========================================================================
   Piè di pagina
   ========================================================================== */

.book-footer {
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Link "torna all'inizio" a fine pagina
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

.back-to-top {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--line);
  text-align: center;
}

.back-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--stellar-gold);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.back-to-top a:visited {
  color: var(--stellar-gold);
}

.back-to-top a:hover {
  color: var(--nebula-blue);
  transform: translateY(-3px);
}

.back-to-top a span {
  font-size: 1.15em;
  line-height: 1;
}

/* ==========================================================================
   Struttura di base (regole originali, invariate)
   ========================================================================== */

html, body {
  height: 100%;
}

.book-page {
  min-height: 100vh;
}


/* ==========================================================================
   Box informativi (definizione rapida / approfondimento)
   ========================================================================== */

.info-box {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, var(--nebula-blue));
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--accent, var(--nebula-blue)) 7%, var(--surface));
}

.info-box__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, var(--nebula-blue));
}

.info-box__label::before {
  content: "●";
  font-size: 0.9em;
}

.info-box__body {
  color: var(--starlight);
}

.info-box__body p:first-child { margin-top: 0; }
.info-box__body p:last-child { margin-bottom: 0; }

/* Variante: definizione rapida, in apertura d'articolo — oro,
   lo stesso accento riservato al Sole (stella tipo G) nella palette */
.info-box--definizione {
  --accent: var(--stellar-gold);
}

.info-box--definizione .info-box__label::before {
  content: "☉";
}

/* Variante: approfondimento, nel corpo del testo — blu, lo stesso
   accento dei link, per un effetto "nota" riconoscibile ma non invasivo */
.info-box--approfondimento {
  --accent: var(--nebula-blue);
}

.info-box--approfondimento .info-box__label::before {
  content: "✦";
}
/* ==========================================================================
   Correzione sommario (TOC) — voci con corsivo/grassetto spezzate
   ========================================================================== */
/* Il tema hugo-book imposta "display: flex" su tutti i link dentro <nav><ul>
   (regola "nav ul a" in _main.scss), pensato per allineare icona + testo nei
   menu. Se il testo del link contiene un elemento inline come <em> (corsivo),
   <strong> o <code>, il browser lo tratta come un "flex item" separato dal
   testo prima e dopo di esso: i tre pezzi vengono impaginati e mandati a capo
   in modo indipendente, invece di scorrere come un unico paragrafo, dando
   l'effetto "spezzettato/giustificato" visto nel sommario laterale.
   I link del TOC sono solo testo (nessuna icona), quindi possiamo
   riportarli a un normale flusso a blocco, che avvolge il testo in modo
   uniforme indipendentemente dal corsivo. */
.book-toc a {
  display: block;
}

/* Capitoli di un saggio diviso in più pagine (sezioni con ordinePerPeso):
   caratteri un po' più piccoli delle voci del catalogo, per mostrare
   che appartengono a un livello inferiore */
.book-menu .menu-saggio > ul a {
  font-size: 0.85em;
}


/* ── Commenti (Waline) caricati su richiesta ─────────────────────────── */
.commenti {
  text-align: left;
  margin: 3rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.commenti-titolo {
  text-align: center;
  margin-top: 0.75rem;
  margin-bottom: 0.9rem;
  color: var(--stellar-orange);
}
.commenti-consenso {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--border-radius);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--starlight);
}
.commenti-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0;
}
.commenti-pulsante {
  font: inherit;
  font-weight: 600;
  color: var(--night);
  background: var(--stellar-gold);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.55rem 1.2rem;
  cursor: pointer;
}
.commenti-pulsante:hover,
.commenti-pulsante:focus-visible {
  background: var(--nebula-blue);
}
.commenti-ricorda {
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

/* Colori di Waline adattati al tema scuro del sito */
#waline {
  --waline-theme-color: var(--nebula-blue);
  --waline-active-color: var(--stellar-gold);
  --waline-color: var(--starlight);
  --waline-light-grey: var(--muted);
  --waline-dark-grey: var(--muted);
  --waline-white: var(--night);
  --waline-bg-color: transparent;
  --waline-bg-color-light: var(--surface);
  --waline-bg-color-hover: var(--surface);
  --waline-border-color: var(--surface-line);
  --waline-info-bg-color: var(--surface);
  --waline-info-color: var(--muted);
  --waline-font-size: 1rem;
  text-align: left;
}

/* Waline: nome dell'autore nei commenti pubblicati più grande e in grassetto,
   e campi Nome/Email del modulo leggibili (di serie erano a 10 px) */
#waline .wl-card .wl-nick {
  font-size: 1.05rem;
  font-weight: 600;
}
#waline .wl-header input {
  font-size: 0.95rem;
}
#waline .wl-header label {
  font-size: 0.85rem;
}


/* ==========================================================================
   Home page — riquadri con gli ultimi contenuti pubblicati
   (shortcode ultimi-contenuti: colonna del catalogo e colonna del dizionario)
   ========================================================================== */

.hc-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 1rem;
  margin: 1.25rem 0 2.5rem;
}

/* Le due colonne condividono le righe della griglia (subgrid):
   i riquadri affiancati hanno sempre la stessa altezza */
.hc-colonna {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 1rem;
}

.hc-colonna--catalogo   { --accento-colonna: var(--stellar-gold); }
.hc-colonna--dizionario { --accento-colonna: var(--nebula-blue); }

.markdown .hc-intestazione {
  margin: 0;
  padding: 0 0 0.5rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  border-bottom: 2px solid var(--accento-colonna);
  color: var(--accento-colonna);
}

/* Niente quadratino dei titoli di terzo livello sulle intestazioni delle colonne */
.markdown .hc-intestazione::before {
  content: none;
}

/* Riquadro */
.book-page .hc-card,
.book-page a.hc-card:visited {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-height: 9.5rem;
  padding: 0.75rem;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--night-deep);
  color: var(--starlight);
  font-weight: 400;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.book-page .hc-card:hover {
  color: var(--starlight);
  text-decoration: none;
  border-color: var(--accento-colonna);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Miniatura degli articoli */
.hc-thumb {
  position: relative;
  flex: 0 0 34%;
  align-self: stretch;
  min-height: 8rem;
  overflow: hidden;
  border-radius: 6px;
  background: radial-gradient(circle at 35% 35%, #3a4a86 0%, var(--surface) 45%, var(--night) 100%);
}

.markdown .hc-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.35s ease;
}

.hc-card:hover .hc-thumb img {
  transform: scale(1.05);
}

/* Iniziale delle voci del dizionario */
.hc-iniziale {
  flex: 0 0 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  background: var(--surface);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--nebula-blue);
}

/* Al passaggio del mouse l'unica sottolineatura è quella dell'iniziale
   delle voci del dizionario */
.hc-card:hover .hc-iniziale {
  text-decoration: underline;
  text-decoration-color: var(--stellar-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* Testi del riquadro */
.hc-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.hc-data {
  font-size: 0.85rem;
  color: var(--muted);
}

.hc-titolo {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--stellar-orange);
}

.hc-sottotitolo {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-link);
}

.hc-testo {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--starlight);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.hc-card--articolo .hc-testo {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.hc-testo strong {
  color: inherit;
  font-weight: 600;
}

/* Link all'indice completo della sezione */
.book-page a.hc-tutti,
.book-page a.hc-tutti:visited {
  justify-self: end;
  align-self: start;
  font-size: 1rem;
  text-decoration: none;
  color: var(--accento-colonna);
}

.book-page a.hc-tutti:hover {
  text-decoration: underline;
}

/* Schermi stretti: una colonna sola, prima il catalogo poi il dizionario */
@media screen and (max-width: 44rem) {
  .hc-griglia {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .hc-colonna {
    grid-row: auto !important;
    grid-template-rows: none;
  }
}


/* ==========================================================================
   Indice del catalogo delle stelle — tutti gli articoli a riquadri
   (shortcode indice-catalogo, stessi riquadri della home)
   ========================================================================== */

.hc-elenco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

.hc-elenco--catalogo {
  --accento-colonna: var(--stellar-gold);
}

@media screen and (max-width: 44rem) {
  .hc-elenco {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Indice del dizionario — voci raggruppate per lettera iniziale
   (shortcode indice-dizionario)
   ========================================================================== */

/* Fila di lettere cliccabili in cima alla pagina */
.dz-lettere {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
}

.book-page a.dz-salto,
.book-page a.dz-salto:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  background: var(--surface);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--nebula-blue);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.book-page a.dz-salto:hover {
  border-color: var(--stellar-gold);
  color: var(--stellar-gold);
  text-decoration: none;
}

/* Gruppo di una lettera */
.dz-gruppo {
  margin: 2rem 0 0;
  scroll-margin-top: 1rem;
}

.dz-intestazione {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Linea sottile dopo la lettera */
.dz-intestazione::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--surface-line);
}

.dz-voci {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}

/* Voce */
.book-page a.dz-voce,
.book-page a.dz-voce:visited {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: stretch;
  padding: 0.7rem 0.9rem;
  text-align: left;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--night-deep);
  color: var(--starlight);
  font-weight: 400;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.book-page a.dz-voce:hover {
  color: var(--starlight);
  text-decoration: none;
  border-color: var(--nebula-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.dz-titolo {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--stellar-orange);
}

.dz-testo {
  font-size: 0.95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.dz-testo strong {
  color: inherit;
  font-weight: 600;
}

@media screen and (max-width: 44rem) {
  .dz-voci {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Titolo degli indici del catalogo e del dizionario: stesso stile
   del titolo della home (h1 nel testo, .markdown h1)
   ========================================================================== */

h1.titolo-sezione {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.015em;
  color: var(--stellar-orange);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-16);
}


/* ==========================================================================
   Paginazione dell'indice del catalogo
   ========================================================================== */

.hc-paginazione {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
}

.hc-pag-lato--destra {
  justify-self: end;
}

.hc-pag-numeri {
  display: flex;
  gap: 0.5rem;
}

.book-page .hc-paginazione a,
.book-page .hc-paginazione a:visited {
  color: var(--stellar-gold);
  text-decoration: none;
}

.book-page .hc-paginazione a:hover {
  text-decoration: underline;
}

.hc-pag-numeri a,
.hc-pag-corrente {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.hc-pag-corrente {
  background: var(--stellar-gold);
  border-color: var(--stellar-gold);
  color: var(--night);
}

/* Freccina per tornare all'inizio della pagina alla fine di ogni lettera
   del dizionario: stesso simbolo e stile del ritorno dalle note */
.markdown .dz-su {
  margin: 0.5rem 0 0;
  text-align: right;
}


/* ==========================================================================
   Nuova veste (ottobre 2026): niente menu laterale, barra superiore
   con logo, link e ricerca (layouts/_partials/docs/topbar.html)
   ========================================================================== */

:root {
  --topbar-altezza: 3.5rem;
}

/* I paragrafi raggiunti con un'ancora non finiscono sotto la barra */
html {
  scroll-padding-top: calc(var(--topbar-altezza) + 1rem);
}

/* Senza il menu a sinistra la pagina si restringe, per righe di lettura comode */
.container {
  max-width: 76rem;
}

/* --- Barra superiore --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--night-deep) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.topbar-interno {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 76rem;
  height: var(--topbar-altezza);
  margin: 0 auto;
  padding: 0 1rem;
}

.topbar-logo {
  display: flex;
  flex: 0 0 auto;
}

.topbar-logo img {
  height: 2.4rem;
  width: auto;
  transition: transform 0.2s ease;
}

.topbar-logo:hover img {
  transform: scale(1.06);
}

.topbar-link a,
.topbar-link a:visited {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--stellar-gold);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-link a:hover {
  color: var(--nebula-blue);
}

.topbar-ricerca {
  flex: 0 1 18rem;
  margin-left: auto;
  min-width: 0;
}

.topbar .book-search {
  margin: 0;
}

.topbar .book-search input {
  padding: 0.4rem 0.7rem;
  font-size: 0.95rem;
}

/* Risultati della ricerca: un pannello che scende sotto la casella */
.topbar #book-search-results {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  width: min(26rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--night-deep);
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.topbar #book-search-results:empty {
  display: none;
}

.topbar #book-search-results li {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

.topbar #book-search-results li:last-child {
  border-bottom: none;
}

.topbar #book-search-results a {
  display: block;
  color: var(--nebula-blue);
  text-decoration: none;
}

.topbar #book-search-results a:hover {
  color: var(--stellar-gold);
}

.topbar #book-search-results small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 1;
}

/* Icona del sommario: solo sugli schermi stretti */
.topbar-sommario {
  display: none;
  flex: 0 0 auto;
  cursor: pointer;
  line-height: 0;
}

.topbar-sommario img {
  width: 1.4rem;
  height: 1.4rem;
}

/* Il sommario a destra comincia sotto la barra */
.book-toc .book-toc-content {
  top: var(--topbar-altezza);
}

@media screen and (min-width: 90rem) {
  .book-toc .book-toc-content {
    top: calc(var(--topbar-altezza) + 1rem);
  }
}

@media screen and (max-width: 56rem) {
  .topbar-sommario {
    display: flex;
  }

  /* L'intestazione del tema ora contiene solo il sommario a scomparsa */
  .book-header {
    margin: 0;
  }

  /* Sommario aperto: pannello fisso sotto la barra superiore */
  #toc-control:checked ~ main .book-header aside {
    position: fixed;
    z-index: 19;
    top: var(--topbar-altezza);
    right: 0;
    left: 0;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    background: var(--night-deep);
    border-bottom: 1px solid var(--surface-line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 36rem) {
  .topbar-interno {
    gap: 0.75rem;
    padding: 0 0.75rem;
  }

  .topbar-logo img {
    height: 2rem;
  }

  .topbar-link a,
  .topbar-link a:visited {
    font-size: 0.95rem;
  }
}

/* --- Home: riquadro in evidenza per l'articolo più recente --- */
.hc-card--evidenza {
  grid-column: 1 / -1;
}

.book-page .hc-card--evidenza {
  min-height: 17rem;
  padding: 1rem;
  gap: 1.5rem;
  border-color: color-mix(in srgb, var(--stellar-gold) 45%, var(--surface-line));
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--stellar-gold) 9%, transparent) 0%, transparent 60%),
    var(--night-deep);
}

.hc-card--evidenza .hc-thumb {
  flex-basis: 48%;
  min-height: 15rem;
}

.hc-card--evidenza .hc-corpo {
  gap: 0.45rem;
  padding: 0.5rem 0.25rem;
}

.hc-etichetta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stellar-gold);
}

.hc-card--evidenza .hc-titolo {
  font-size: 1.9rem;
}

.hc-card--evidenza .hc-sottotitolo {
  font-size: 1.1rem;
}

.hc-card--evidenza .hc-testo {
  font-size: 1rem;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

@media screen and (max-width: 44rem) {
  .book-page .hc-card--evidenza {
    flex-direction: column;
  }

  .hc-card--evidenza .hc-thumb {
    flex-basis: auto;
    width: 100%;
    min-height: 12rem;
  }

  .hc-card--evidenza .hc-titolo {
    font-size: 1.55rem;
  }
}

/* Con html e body alti esattamente quanto la finestra la barra "sticky"
   scorrerebbe via insieme al body: il body deve poter crescere col contenuto */
body {
  height: auto;
  min-height: 100%;
}

/* Link testuali della barra: catalogo | dizionario */
.topbar-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.topbar-separatore {
  color: var(--muted);
  font-size: 1.1rem;
}

@media screen and (max-width: 36rem) {
  .topbar-link {
    gap: 0.5rem;
  }
}

/* Schermi stretti: la casella di ricerca scende su una seconda riga della barra */
@media screen and (max-width: 36rem) {
  :root {
    --topbar-altezza: 5.9rem;
  }

  .topbar-interno {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-altezza);
    row-gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    align-content: center;
  }

  .topbar-link {
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-ricerca {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
  }
}

/* Schermi stretti: logo e link sulla prima riga, ricerca e icona del sommario sulla seconda */
@media screen and (max-width: 36rem) {
  .topbar-link {
    order: 2;
    flex: 1 1 calc(100% - 2.75rem);
  }

  .topbar-ricerca {
    order: 3;
    flex: 1 1 0;
  }

  .topbar-sommario {
    order: 4;
  }
}

/* I link della barra occupano solo lo spazio del loro testo */
.topbar-link a {
  flex: 0 0 auto;
}


/* ==========================================================================
   Prova: barra superiore bianca, per dare contrasto al resto della pagina
   (per tornare alla barra scura basta cancellare questo blocco)
   ========================================================================== */

.topbar {
  --topbar-testo: #16204a;
  --topbar-accento: #c8601c;
  background: #ffffff;
  border-bottom: 1px solid #d9deea;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
}

.topbar-link a,
.topbar-link a:visited {
  color: var(--topbar-testo);
}

.topbar-link a:hover {
  color: var(--topbar-accento);
}

.topbar-separatore {
  color: #a3aac0;
}

.topbar .book-search input {
  background: #e5e8ef; /* prima #f1f3f8 */
  border: 1px solid #cfd5e3;
  color: var(--topbar-testo);
}

.topbar .book-search input::placeholder {
  color: #7a8299;
}

.topbar .book-search input:focus {
  border-color: #4a6fd1;
  box-shadow: 0 0 0 3px rgba(74, 111, 209, 0.2);
}

.topbar .book-search-spinner {
  border-top-color: var(--topbar-testo);
}

/* Icona del sommario scura sul fondo bianco */
.topbar-sommario img {
  filter: none;
}

/* Pannello dei risultati della ricerca, bianco come la barra */
.topbar #book-search-results {
  background: #ffffff;
  border-color: #d9deea;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.topbar #book-search-results li {
  border-bottom-color: #e6e9f1;
}

.topbar #book-search-results a {
  color: #2b4fb3;
}

.topbar #book-search-results a:hover {
  color: var(--topbar-accento);
}

.topbar #book-search-results small {
  color: #6b7390;
}

/* Link della barra bianca: blu meno cupo e caratteri più grandi */
.topbar {
  --topbar-testo: #3a4f96;
}

.topbar-link a,
.topbar-link a:visited {
  font-size: 1.3rem;
}

.topbar-separatore {
  font-size: 1.3rem;
}

.topbar .book-search input {
  color: #16204a;
}

@media screen and (max-width: 36rem) {
  .topbar-link a,
  .topbar-link a:visited,
  .topbar-separatore {
    font-size: 1.15rem;
  }
}

/* Bordo inferiore della barra bianca: sfumatura di circa due millimetri
   dal bianco al blu scuro della pagina, al posto del filo e dell'ombra */
.topbar {
  border-bottom: none;
  box-shadow: none;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sfumatura);
  background: linear-gradient(to bottom, #ffffff, var(--night));
  pointer-events: none;
}

/* Spessore della sfumatura e ricentratura verticale del contenuto della barra:
   lo spazio occupato dalla sfumatura in basso viene escluso dal centraggio,
   così logo, link e ricerca salgono di metà del suo spessore */
.topbar {
  --sfumatura: 2mm;
}

.topbar-interno {
  padding-bottom: var(--sfumatura);
}

@media screen and (max-width: 36rem) {
  .topbar-interno {
    padding-bottom: calc(0.5rem + var(--sfumatura));
  }
}

/* Pannello dei risultati della ricerca: comincia esattamente dove finisce la
   barra (prima la sfumatura del bordo inferiore ne copriva gli angoli
   arrotondati superiori) e i titoli dei risultati sono più marcati.
   1rem = distanza tra il fondo della casella e il fondo della barra */
.topbar #book-search-results {
  top: calc(100% + 1rem);
  z-index: 2;
}

.topbar #book-search-results a {
  font-weight: 600;
}

/* ==========================================================================
   Riquadri degli articoli: il riquadro è un blocco, non più un unico link.
   Il link vero è sul titolo e, con un livello trasparente (::after), copre
   tutto il riquadro, che resta cliccabile ovunque; i tag in fondo sono link
   indipendenti alle pagine dei tag, posti sopra quel livello.
   ========================================================================== */

.book-page a.hc-link,
.book-page a.hc-link:visited,
.book-page a.hc-link:hover {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.hc-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

.hc-card:focus-within {
  border-color: var(--accento-colonna);
}

.hc-card--articolo .hc-corpo {
  align-self: stretch;
}

/* Tag in fondo al riquadro, al posto della data */
.hc-tag {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.book-page a.hc-tag-voce,
.book-page a.hc-tag-voce:visited {
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--nebula-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.book-page a.hc-tag-voce:hover {
  color: var(--stellar-gold);
  border-color: var(--stellar-gold);
}

/* Il tema dà ai link dentro un contenitore flex "flex: 1 1 auto": qui titolo
   e tag devono occupare solo lo spazio del loro testo */
.hc-corpo > a.hc-link,
.hc-tag > a.hc-tag-voce {
  flex: 0 0 auto;
}

/* Il titolo del riquadro, ora un link, mantiene il colore dei titoli */
.book-page a.hc-titolo,
.book-page a.hc-titolo:visited,
.book-page a.hc-titolo:hover {
  color: var(--stellar-orange);
}

.book-page a.hc-titolo {
  font-weight: 600;
}

.book-page a.hc-tag-voce:hover,
.book-page a.hc-tag-voce:focus {
  text-decoration: none;
}

/* Pulsante × per cancellare la ricerca (layouts/_partials/docs/search.html) */
.topbar .book-search input {
  padding-right: 2.2rem;
}

.book-search-cancella {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6b7390;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.book-search-cancella:hover,
.book-search-cancella:focus-visible {
  background: #d3d8e4;
  color: #16204a;
  outline: none;
}

.book-search-cancella[hidden] {
  display: none;
}

/* Testo digitato nella casella di ricerca in mezzo grassetto (Inter 500);
   il suggerimento "Cerca" resta con il peso normale */
.topbar .book-search input {
  font-weight: 500;
}

.topbar .book-search input::placeholder {
  font-weight: 400;
}


/* ==========================================================================
   Pagine dei tag (layouts/term.html e layouts/taxonomy.html)
   ========================================================================== */

/* "Tag" in piccolo davanti al nome del tag nel titolo */
.titolo-tag-etichetta {
  display: block;
  margin-bottom: 0.2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stellar-gold);
}

/* Menu a tendina dei tag */
.scelta-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
}

.scelta-tag label {
  font-size: 0.95rem;
  color: var(--muted);
}

.scelta-tag select {
  min-width: min(20rem, 100%);
  max-width: 100%;
  padding: 0.45rem 2.2rem 0.45rem 0.75rem;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  background-color: var(--surface);
  /* freccina disegnata in SVG, al posto di quella del sistema */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238fb8ff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  color: var(--starlight);
  font: inherit;
  font-size: 0.95rem;
  appearance: none;
  cursor: pointer;
}

.scelta-tag select:focus {
  outline: none;
  border-color: var(--nebula-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nebula-blue) 25%, transparent);
}

.scelta-tag option {
  background: var(--night-deep);
  color: var(--starlight);
}

.tag-conteggio {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Pagina /tags/: tutti i tag come etichette */
.tag-tutti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 2rem;
}

.tag-tutti > a.hc-tag-voce {
  flex: 0 0 auto;
  font-size: 0.9rem;
  padding: 0.2rem 0.7rem;
}

.tag-numero {
  margin-left: 0.25rem;
  color: var(--muted);
  font-size: 0.85em;
}

/* "Tag" sopra il nome del tag: link alla pagina con tutti i tag */
.book-page a.titolo-tag-etichetta,
.book-page a.titolo-tag-etichetta:visited {
  width: fit-content;
  color: var(--stellar-gold);
  text-decoration: none;
}

.book-page a.titolo-tag-etichetta:hover {
  color: var(--nebula-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* Titolo di articoli, capitoli del saggio e voci del dizionario: stesso
   carattere con le grazie e stesso arancio del titolo della home */
h1.titolo-pagina {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--stellar-orange);
  margin-bottom: 1.25rem;
}

/* Solo nelle voci del dizionario, che non hanno sottotitolo, un filo sotto il
   titolo lo stacca dal testo (negli articoli c'è già il sottotitolo) */
.book-kind-page.book-type-dizionario h1.titolo-pagina {
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--line);
}


/* ==========================================================================
   Pagine con il sommario (body.con-indice): testo centrato su una larghezza
   di lettura comoda e indice a trattini al posto della colonna di destra
   (script in layouts/partials/docs/inject/body.html)
   ========================================================================== */

/* Niente colonna di destra: il sommario resta nella pagina solo come
   sorgente dell'indice a trattini */
.con-indice .book-toc {
  display: none;
}

/* Colonna di testo centrata, come su Medium e Substack */
.con-indice .book-page {
  max-width: 50rem;
  margin: 0 auto;
}

/* Sugli schermi larghi figure e animazioni possono uscire un po' dalla colonna
   di testo; le didascalie restano larghe quanto il testo */
@media screen and (min-width: 80rem) {
  .con-indice .markdown figure.scientific-figure {
    margin-left: -6rem;
    margin-right: -6rem;
  }

  .con-indice .markdown figure.scientific-figure figcaption {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Indice a trattini, fisso a destra del testo */
.indice-trattini {
  position: fixed;
  z-index: 15;
  top: calc(var(--topbar-altezza) + 7rem);
  left: calc(50% + 26.5rem);
}

@media screen and (min-width: 80rem) {
  .indice-trattini {
    left: calc(50% + 32.5rem);
  }
}

/* Sugli schermi stretti niente trattini: c'è l'icona nella barra superiore */
@media screen and (max-width: 56rem) {
  .indice-trattini {
    display: none;
  }
}

.indice-trattini__barre {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
}

.indice-trattini__barre span {
  display: block;
  width: 1rem;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  transition: background 0.2s ease, width 0.2s ease;
}

.indice-trattini__barre span.attivo {
  width: 1.4rem;
  background: var(--stellar-gold);
}

/* Pannello con i titoli: compare a sinistra dei trattini, sopra il testo */
.indice-trattini__pannello {
  position: absolute;
  top: -0.5rem;
  right: 100%;
  width: 22rem;
  max-height: calc(100vh - var(--topbar-altezza) - 9rem);
  overflow-y: auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--night-deep);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.5rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.indice-trattini:hover .indice-trattini__pannello,
.indice-trattini:focus-within .indice-trattini__pannello,
.indice-trattini.aperto .indice-trattini__pannello {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.indice-trattini__pannello ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.indice-trattini__pannello li {
  margin: 0;
}

.indice-trattini__pannello ul ul {
  padding-left: 1rem;
}

.indice-trattini__pannello a,
.indice-trattini__pannello a:visited {
  display: block;
  padding: 0.28rem 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--nebula-blue);
  text-decoration: none;
}

.indice-trattini__pannello ul ul a {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--nebula-blue) 75%, var(--muted));
}

.indice-trattini__pannello a:hover {
  color: var(--stellar-orange);
}

/* Paragrafo che si sta leggendo, nel pannello e nel sommario per smartphone */
#TableOfContents a.toc-attivo,
.indice-trattini__pannello a.toc-attivo {
  color: var(--stellar-gold);
  font-weight: 600;
}

/* Su smartphone il tocco sull'icona del sommario attiva una casella nascosta
   (#toc-control) che stava in cima alla pagina: il browser vi saltava, e la
   pagina tornava indietro. Tenendola fissa in alto, il tocco non sposta più la lettura. */
#toc-control {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Pannello dell'indice a trattini in chiaro, come la barra superiore e i
   risultati della ricerca: stacca dal fondo scuro e si legge meglio */
.indice-trattini__pannello {
  padding: 0.75rem 0.6rem;
  border: 1px solid #d9deea;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
}

.indice-trattini__pannello a,
.indice-trattini__pannello a:visited {
  padding: 0.32rem 0.6rem;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #16204a;
  transition: background 0.12s ease, color 0.12s ease;
}

.indice-trattini__pannello ul ul a,
.indice-trattini__pannello ul ul a:visited {
  padding-left: 1.4rem;
  font-size: 0.84rem;
  font-weight: 400;
  color: #3a4f96;
}

.indice-trattini__pannello ul ul {
  padding-left: 0;
}

/* Voci dei riquadri ("L'argomento in breve"...) in corsivo, più discrete */
.indice-trattini__pannello li.toc-box-entry > a {
  font-style: italic;
  color: #6b7390;
}

.indice-trattini__pannello a:hover {
  background: #eef2fb;
  color: #c8601c;
}

/* Paragrafo in lettura: barra arancio a sinistra e fondo dorato chiaro */
.indice-trattini__pannello a.toc-attivo,
.indice-trattini__pannello ul ul a.toc-attivo {
  border-left-color: var(--stellar-orange);
  background: #fdf1de;
  color: #b4540f;
}

/* Barra di scorrimento del pannello, chiara */
.indice-trattini__pannello {
  scrollbar-color: #c3cad9 transparent;
}

/* Il tema schiarisce a metà i link dei menu al passaggio del mouse: nel
   pannello il cambio di colore e di fondo basta, e il testo resta leggibile */
.indice-trattini__pannello a[href]:hover {
  opacity: 1;
}

/* Pannello: titoli di primo livello un po' meno spessi */
.indice-trattini__pannello a,
.indice-trattini__pannello a:visited {
  font-weight: 500;
}

.indice-trattini__pannello ul ul a,
.indice-trattini__pannello ul ul a:visited {
  font-weight: 400;
}

/* Box nel pannello: la definizione, il blocco più importante di una voce,
   è la riga più visibile; gli altri box hanno il simbolo dell'approfondimento */
.indice-trattini__pannello li.toc-box-entry > a,
.indice-trattini__pannello ul ul li.toc-box-entry > a {
  font-style: normal;
}

.indice-trattini__pannello li.toc-box-entry--definizione > a,
.indice-trattini__pannello ul ul li.toc-box-entry--definizione > a {
  font-weight: 700;
  color: #b4540f;
}

.indice-trattini__pannello li.toc-box-entry--definizione > a::before {
  content: "☉ ";
}

.indice-trattini__pannello li.toc-box-entry:not(.toc-box-entry--definizione) > a,
.indice-trattini__pannello ul ul li.toc-box-entry:not(.toc-box-entry--definizione) > a {
  font-weight: 500;
  color: #2b4fb3;
}

.indice-trattini__pannello li.toc-box-entry:not(.toc-box-entry--definizione) > a::before {
  content: "✦ ";
}

/* Pannello dell'indice a trattini su fondo giallo chiaro (paglierino):
   richiama l'oro dei titoli; la voce in lettura ha un dorato più intenso
   per staccare dallo sfondo */
.indice-trattini__pannello {
  background: #fcf4d6;
  border-color: #e3d6a6;
}

.indice-trattini__pannello a:hover {
  background: #f1e6bb;
}

.indice-trattini__pannello a.toc-attivo,
.indice-trattini__pannello ul ul a.toc-attivo {
  background: #f9d9a8;
}

.indice-trattini__pannello {
  scrollbar-color: #d8c98f transparent;
}

/* Dopo il clic su un titolo il pannello si richiude, anche con il mouse sopra */
.indice-trattini.chiuso .indice-trattini__pannello {
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.5rem);
}

/* "Lascia un commento" in fondo al pannello e al sommario per smartphone:
   separato da un filo e in rosso, il colore che risalta di più */
li.toc-commenti {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e3d6a6;
}

.indice-trattini__pannello li.toc-commenti > a,
.indice-trattini__pannello li.toc-commenti > a:visited {
  font-weight: 700;
  color: #c62828;
}

.indice-trattini__pannello li.toc-commenti > a::before {
  content: "✎ ";
}

.indice-trattini__pannello li.toc-commenti > a:hover {
  color: #9b1c1c;
}

.book-header li.toc-commenti {
  border-top-color: var(--surface-line);
}

.book-header li.toc-commenti > a,
.book-header li.toc-commenti > a:visited {
  font-weight: 600;
  color: #ff7b7b;
}