/* Base condivisa: colori, strati del contenuto, sidebar della materia.
   Ogni pagina aggiunge il suo foglio con le @property delle sue variabili e le regole che le usano.
   Ingressi comuni: --velocita (osservata, globale), --evidenza (osservata, per sezione),
   --interesse (Jev, per sezione), --coinvolgimento (Jev, globale). */

@property --velocita { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --coinvolgimento { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --interesse { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --evidenza { syntax: "<number>"; inherits: true; initial-value: 0; }
/* Registrate anche le altre misure osservate: valgono 0 finché l'osservatore non le scrive.
   Non registrate, una formula che le usa prima del primo giro diventa invalida, e la presenza
   di uno strato torna al valore iniziale 1: si apriva tutto. */
@property --profondita { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --salta { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --luce { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --presenza { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --carta: oklch(97.5% 0.008 85);
  --inchiostro: oklch(25% 0.02 60);
  --tenue: oklch(52% 0.02 60);
  --accento: oklch(55% 0.16 35);
  --caldo: oklch(88% 0.08 60);
  --filo: oklch(88% 0.01 80);
  --superficie: oklch(99.5% 0.004 85);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* La transizione delle proprietà visive: morbida, mai più lenta di un gesto. */
  --morbida: .7s cubic-bezier(.3, .7, .2, 1);
  --larghezza-sidebar: 22rem;
  /* Chiaro sempre, anche con il sistema in modalità scura; lo scuro solo su richiesta. */
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --carta: oklch(19% 0.01 60);
  --inchiostro: oklch(91% 0.01 80);
  --tenue: oklch(68% 0.015 70);
  --accento: oklch(72% 0.14 45);
  --caldo: oklch(32% 0.06 50);
  --filo: oklch(32% 0.01 60);
  --superficie: oklch(23% 0.01 60);
}

* { box-sizing: border-box; }
html { overflow-anchor: auto; }
body { margin: 0; color: var(--inchiostro); background: var(--carta); }
.link { font: inherit; background: none; border: 0; padding: .2rem .4rem; color: var(--accento); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Ogni sezione: luce = quanto Jev pensa che interessi × quanto il comportamento lo conferma.
   Le variabili cambiano di colpo, di proposito: una variabile registrata con una transizione fa
   ricalcolare lo stile di tutta la pagina a ogni fotogramma. Le transizioni stanno invece sulle
   proprietà che si vedono (colori, bordi, ombre, opacità), che non spostano nulla. */
[data-sezione] { --luce: calc(var(--interesse) * var(--evidenza)); }

/* ——— Gli strati del contenuto ———
   Ogni strato dichiara la sua presenza (0–1) in --presenza. Non la usa per l'altezza: un'altezza
   che segue un numero continuo fa ricalcolare la pagina a ogni passo e la fa tremare. Aprire o
   chiudere lo decide stato.js, con un margine contro lo sfarfallio, e lo anima con Motion.
   [data-aperto] lo scrive stato.js; prima del primo giro gli strati restano chiusi. */
/* flow-root: i margini del contenuto restano dentro lo strato, e l'altezza misurata li comprende. */
.strato { overflow: clip; display: flow-root; }
.strato:not([data-aperto="1"]) { height: 0; opacity: 0; }
.strato > :first-child { margin-top: 0; }

/* ——— La sidebar della materia: sempre presente, aperta all'avvio ——— */
#sidebar {
  position: fixed; z-index: 20; right: 0; top: 0; bottom: 0; width: var(--larghezza-sidebar);
  overflow-y: auto; padding: .9rem 1rem 2rem;
  font-family: var(--sans); font-size: .78rem; color: var(--inchiostro);
  background: var(--superficie); border-left: 1px solid var(--filo);
}
#sidebar[hidden] { display: none; }
#sidebar header { display: flex; justify-content: space-between; align-items: baseline; padding-right: 4.5rem; }
#sidebar .contatori { display: block; color: var(--tenue); margin-top: .3rem; }
#sidebar .spiega { margin: .8rem 0 0; color: var(--tenue); line-height: 1.5; }
#sidebar h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin: 1.1rem 0 .4rem; font-weight: 600; }
.barre { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.barre li { display: grid; grid-template-columns: 9.5rem 1fr 2.4rem; gap: .5rem; align-items: center; }
.barre li.derivata .nome { font-style: italic; }
.barre .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .72rem; }
.barre .barra { height: .45rem; border-radius: 99px; background: var(--filo); overflow: hidden; }
.barre .barra i { display: block; height: 100%; background: var(--accento); transform-origin: left; transform: scaleX(0); transition: transform .3s ease; }
.barre .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--tenue); }
#sidebar .inviato { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: .68rem; line-height: 1.4; background: var(--carta); padding: .6rem; border-radius: 6px; margin: 0; }
#apri-sidebar {
  position: fixed; z-index: 21; top: .6rem; right: .8rem;
  font-family: var(--sans); font-size: .78rem; cursor: pointer;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--filo); background: var(--superficie); color: var(--accento);
}

/* Il contenuto lascia spazio alla sidebar quando è aperta e lo schermo lo permette. */
@media (min-width: 1000px) {
  body:has(#sidebar:not([hidden])) { padding-right: var(--larghezza-sidebar); }
}
/* Su schermi stretti la sidebar diventa un pannello in basso, sempre visibile ma più basso. */
@media (max-width: 999px) {
  #sidebar { top: auto; height: 38vh; width: 100%; border-left: 0; border-top: 1px solid var(--filo); }
  body:has(#sidebar:not([hidden])) { padding-bottom: 38vh; }
  #apri-sidebar { top: auto; bottom: calc(38vh + .5rem); }
  body:has(#sidebar[hidden]) #apri-sidebar { bottom: .8rem; }
}

/* Collaudo: senza fotogrammi le transizioni resterebbero ferme, quindi niente transizioni. */
[data-collaudo], [data-collaudo] * { transition: none !important; }