/* Pagina soluzioni: titoli principali + indice laterale "In Questo Articolo" (2026-09-29).

   File DEDICATO, caricato dal corpo di public/soluzioni_guarda.php. NON spostare queste regole in
   style.css: modificare style.css cambia il suo ?v=mtime nello skeleton cachecut e rompe
   silenziosamente le scritture di cache di tutto il sito (vedi CLAUDE.md, "BEFORE any graphic
   change"). Usa le variabili di colore/font gia' definite da style.css (:root). */

/* ---------- 1) Titoli principali ----------
   "Introduzione e Trama del Gioco", "Soluzione Completa" e "La guida del gioco, in sintesi":
   stesso stile (display condensato, maiuscolo) e piu' grandi. Gli <h2> delle singole sezioni della
   guida NON hanno la classe e restano com'erano (1.4rem con filetto turchese a sinistra). */
.article .article__main-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.15rem);
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  margin: 0 0 0.9rem;
}
/* Dentro .article__body vincerebbero ".article__body h2" e ".article__body :is(h1,h2,h3)"
   (filetto a sinistra, minuscolo, 1.4rem): specificita' piu' alta per riportarli al titolo grande. */
.article__body h2.article__main-title {
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.15rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-left: 0;
  padding-left: 0;
  margin: 2.6rem 0 1rem;
}
/* Il salto ad un'ancora non deve finire sotto la topbar sticky. */
.article h2[id] { scroll-margin-top: 92px; }

/* ---------- 2) Indice laterale (solo desktop, come il resto della sidebar) ---------- */
@media (min-width: 901px) {
  .toc.trucchi-sidebar-box {
    --toc-accent: var(--color-turquoise);
    --toc-rail: rgba(224, 234, 245, 0.15);
    --toc-rail-strong: rgba(224, 234, 245, 0.3);
    display: flex;
    flex-direction: column;
    padding: 1.05rem 0 0.4rem;
    overflow: hidden;
    /* Sticky (top:80px, da style.css) + altezza massima = viewport: quando l'indice e' lungo
       scorre al suo interno invece di uscire dallo schermo. */
    max-height: calc(100vh - 80px - 1.25rem);
  }

  .toc__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 1.2rem;
    margin-bottom: 0.65rem;
  }
  .toc .toc__head h2 { margin: 0; font-size: 1rem; }
  .toc__pos {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--toc-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .toc__pos:empty { display: none; }

  /* Zona scorrevole: barra sottile e sfumature in alto/in basso (le imposta toc.js con
     --fade-top/--fade-bot; senza JS restano a 0 = nessuna sfumatura, la lista scorre lo stesso). */
  .toc__scroll {
    --fade-top: 0px;
    --fade-bot: 0px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 155, 214, 0.45) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), transparent 100%);
  }
  .toc__scroll::-webkit-scrollbar { width: 6px; }
  .toc__scroll::-webkit-scrollbar-track { background: transparent; }
  .toc__scroll::-webkit-scrollbar-thumb { background: rgba(46, 155, 214, 0.4); border-radius: 3px; }
  .toc__scroll::-webkit-scrollbar-thumb:hover { background: rgba(46, 155, 214, 0.7); }

  .toc .toc__list { list-style: none; margin: 0; padding: 0 0.5rem 0.6rem 0; }
  .toc .toc__list li + li { border-top: 0; }

  /* Titoli di gruppo (Soluzione Completa / La guida del gioco, in sintesi). */
  .toc .toc__group + .toc__group {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border);
  }
  .toc .toc__group > a,
  .toc .toc__item > a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.2rem;
    color: var(--color-ink);
    text-decoration: none;
    line-height: 1.2;
  }
  .toc .toc__group > a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
  }
  .toc .toc__group > a::before {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--toc-accent);
    transform: rotate(45deg);
  }
  .toc .toc__item > a { font-size: 0.92rem; }

  /* Passi numerati: una vera sequenza (la sintesi e' la guida passo per passo), disegnata come
     un percorso con nodi numerati uniti da un filo. */
  .toc .toc__steps { list-style: none; margin: 0.05rem 0 0.5rem; padding: 0; }
  .toc .toc__steps a {
    position: relative;
    display: grid;
    grid-template-columns: 1.45rem 1fr;
    column-gap: 0.75rem;
    align-items: start;
    padding: 0.42rem 1rem 0.42rem 1.2rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--color-ink);
    text-decoration: none;
  }
  /* Filo verticale: dal centro di un nodo al centro del successivo. */
  .toc .toc__steps a::before {
    content: "";
    position: absolute;
    left: calc(1.2rem + 0.725rem - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--toc-rail);
  }
  .toc .toc__steps li:first-child a::before { top: calc(0.42rem + 0.725rem); }
  .toc .toc__steps li:last-child a::before { bottom: auto; height: calc(0.42rem + 0.725rem); }
  .toc .toc__steps li:only-child a::before { display: none; }

  .toc__n {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--toc-rail-strong);
    background: var(--color-surface);
    color: var(--color-ink-muted);
    font: 500 0.66rem/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .toc__t { padding-top: 0.17rem; }

  .toc .toc__steps a:hover .toc__t,
  .toc .toc__group > a:hover,
  .toc .toc__item > a:hover { color: var(--toc-accent); }
  .toc .toc__steps a:hover .toc__n { border-color: var(--toc-accent); color: var(--color-ink); }
  .toc a:focus-visible {
    outline: 2px solid var(--toc-accent);
    outline-offset: -2px;
    border-radius: 6px;
  }

  /* Stati "vivi" (solo se toc.js e' attivo, classe .is-live): senza JS tutti i passi restano
     leggibili nel colore normale. Letti = riempiti, corrente = acceso, da leggere = spenti. */
  .toc.is-live .toc__steps a { color: var(--color-ink-muted); }
  .toc.is-live .toc__steps a.is-done .toc__n {
    border-color: var(--toc-accent);
    background: #1b3a53; /* fallback */
    background: color-mix(in srgb, var(--toc-accent) 22%, var(--color-surface));
    color: var(--color-ink);
  }
  .toc.is-live .toc__steps a.is-done::before { background: var(--toc-accent); }
  .toc.is-live .toc__steps a.is-active { color: var(--color-ink); font-weight: 500; }
  .toc.is-live .toc__steps a.is-active .toc__n {
    background: var(--toc-accent);
    border-color: var(--toc-accent);
    color: #04121d;
    box-shadow: 0 0 0 4px rgba(46, 155, 214, 0.2);
  }
  .toc.is-live .toc__group > a.is-active,
  .toc.is-live .toc__item > a.is-active { color: var(--toc-accent); }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .toc a,
  .toc__n,
  .toc__t {
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
}