/* Indice degli argomenti di una pagina (assets/js/indice-argomenti.js, 28 set 2026).
   Componente del sito: niente variabili di una pagina, i colori sono quelli del
   marchio. La linguetta verticale sta sul bordo destro, a meta' altezza; la striscia
   entra da destra, dietro la linguetta. */

/* le sezioni dell'indice non finiscono sotto la testata fissa del sito */
[data-indice-voce] { scroll-margin-top: 84px; }

.ia { position: fixed; right: 0; top: 50%; z-index: 900; }
.ia__tab {
  position: relative; z-index: 2; display: block; transform: translateY(-50%);
  writing-mode: vertical-rl; margin: 0; padding: 16px 9px; border: 0; border-radius: 12px 0 0 12px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .74rem; line-height: 1; letter-spacing: .04em; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter .15s ease;
}
.ia__tab:hover, .ia__tab:focus-visible, .ia--aperto .ia__tab { filter: brightness(1.14); }
.ia__tab:focus-visible { outline: 3px solid #93b8fb; outline-offset: 2px; }

.ia__pannello {
  position: absolute; right: 0; top: 0; z-index: 1; width: min(calc(100vw - 12px), 620px); box-sizing: border-box;
  padding: 10px 46px 10px 12px; border-radius: 14px 0 0 14px;
  background: rgba(10, 13, 22, .92); border: 1px solid rgba(139, 92, 246, .35); border-right: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: -12px 12px 40px -12px rgba(0, 0, 0, .8);
  transform: translate(100%, -50%); visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
}
.ia--aperto .ia__pannello {
  transform: translate(0, -50%); visibility: visible;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .ia__pannello, .ia--aperto .ia__pannello { transition: none; } }

.ia__lista {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 2px 0; list-style: none; min-width: 0;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth;
}
.ia__lista::-webkit-scrollbar { display: none; }
.ia__lista li { margin: 0; padding: 0; }
.ia__lista li::before { content: none; }
/* la sfumatura solo dal lato dove ci sono altre voci */
.ia--destra .ia__lista { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.ia--sinistra .ia__lista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.ia--destra.ia--sinistra .ia__lista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 48px), transparent); }
.ia__lista a {
  display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: .86rem; line-height: 1.3; white-space: nowrap;
  color: #e2e8f0; text-decoration: none; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
/* site.css, sotto i 768px, vieta ai collegamenti ogni gesto che non sia verticale
   (touch-action: pan-y !important): qui le voci riempiono la riga, e col dito non
   scorreva piu' («ho provato a trascinare con il dito e non funziona») */
.ia__lista, .ia__lista a { touch-action: pan-x pan-y !important; }
.ia__lista a:hover, .ia__lista a:focus-visible { color: #fff; border-color: rgba(139, 92, 246, .7); background: rgba(139, 92, 246, .16); }
.ia__lista a:focus-visible { outline: 2px solid #93b8fb; outline-offset: 2px; }
/* si trascina col mouse (indice-argomenti.js): la manina lo dice */
.ia--destra .ia__lista, .ia--sinistra .ia__lista { cursor: grab; }
.ia--trascina .ia__lista { cursor: grabbing; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.ia--trascina .ia__lista a { cursor: grabbing; }
/* le due frecce: solo dove c'e' un mouse (sul telefono si trascina col dito), ai lati
   della riga e non sopra le voci; ognuna si accende solo se da quel lato c'e' altro */
.ia__freccia { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ia__corsia { display: flex; align-items: center; gap: 6px; }
  .ia__lista { flex: 1 1 auto; }
  .ia__freccia {
    display: block; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    color: #fff; font: 700 1.15rem/30px system-ui, sans-serif; text-align: center;
    background: rgba(139, 92, 246, .35); box-shadow: 0 0 14px rgba(139, 92, 246, .45);
    visibility: hidden; opacity: 0; transition: opacity .15s ease, background .15s ease;
  }
  .ia__freccia:hover { background: rgba(139, 92, 246, .6); }
  .ia--sinistra .ia__freccia--indietro, .ia--destra .ia__freccia--avanti { visibility: visible; opacity: 1; }
}

@media (max-width: 899px) {
  /* stretta quanto il margine della pagina (20px), per non coprire il testo; l'area
     da toccare e' piu' larga, verso sinistra, senza vedersi */
  .ia__tab { padding: 12px 4px; font-size: .64rem; }
  .ia__tab::before { content: ""; position: absolute; inset: -6px 0 -6px -14px; }
  .ia__pannello { padding: 9px 40px 9px 10px; }
  .ia__lista a { font-size: .82rem; padding: 6px 11px; }
}