/* interazione.css — stili per il livello di interazione di sito.js.
   Solo i token di colore già validati (vedi sito.css): nessuna tinta nuova.
   Ogni regola qui è additiva: senza JavaScript queste classi non vengono
   mai create, quindi il foglio non ha effetto e la pagina resta quella
   statica. */

/* ---------------------------------------------------------- tabelle ---- */

/* Il testo dell'intestazione diventa un bottone a piena larghezza: stessa
   tipografia di prima (eredita da table.dati thead th), solo cliccabile. */
table.dati thead .sq-ordina {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  justify-content: flex-end; /* colonne numeriche: allineate a destra, come i dati */
}
table.dati thead th.sx .sq-ordina { justify-content: flex-start; }

/* Indicatore di ordinamento: sempre presente ma discreto, pieno quando la
   colonna è quella ordinata. È un glifo decorativo (content), non testo. */
table.dati thead .sq-ordina::after {
  content: "⇅";
  font-size: .75em;
  color: var(--inchiostro-muto);
  opacity: .45;
}
table.dati thead th[aria-sort="ascending"] .sq-ordina::after { content: "▲"; opacity: 1; color: var(--inchiostro); }
table.dati thead th[aria-sort="descending"] .sq-ordina::after { content: "▼"; opacity: 1; color: var(--inchiostro); }
table.dati thead .sq-ordina:hover::after,
table.dati thead .sq-ordina:focus-visible::after { opacity: 1; }

/* ------------------------------------------------------- riquadrino ---- */

.sq-tooltip {
  position: fixed;
  z-index: 60;
  max-width: 220px;
  background: var(--carta-alta);
  border: 1px solid var(--filo);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--inchiostro);
  pointer-events: none; /* non deve intercettare il mouse: sta sopra il grafico */
}
.sq-tooltip[hidden] { display: none; }

/* -------------------------------------------------- controlli grafici ---- */

/* Selettore di periodo e interruttore assoluto/indicizzato: stesso
   linguaggio visivo dei pillole già in sito.css (.bottone, .etichetta-dir). */
.sq-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.sq-scelte button {
  font: inherit;
  font-size: .82rem;
  color: var(--inchiostro-muto);
  background: transparent;
  border: 1px solid var(--filo);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.sq-scelte button[aria-pressed="true"] {
  background: var(--inchiostro);
  color: var(--carta-alta);
  border-color: var(--inchiostro);
}
@media (prefers-reduced-motion: no-preference) {
  .sq-scelte button { transition: background-color .15s ease, color .15s ease; }
}

/* I grafici diventano interattivi: lo si segnala solo al passaggio del
   mouse o al fuoco, per non aggiungere rumore a chi guarda e basta. */
.grafico-invaso svg, .pannello svg { cursor: crosshair; }