/* Le pagine di testo del sito: «La scienza» (/scienza) e l'Informativa (/privacy), e la guida
   (help.mindset.xin). Stessa lingua del sito (sito.css); ogni valore dai token (tests/una_fonte.rs). */
.p-apertura {
  min-height: 72svh; display: grid; align-content: center; gap: var(--space-l); padding: calc(var(--control-tasto) + var(--space-sezione)) var(--space-margine) var(--space-sezione);
  background:
    radial-gradient(60% 55% at 15% 20%, var(--challenge-field), transparent 70%),
    radial-gradient(55% 55% at 85% 25%, var(--choice-field-2), transparent 70%),
    radial-gradient(60% 60% at 70% 95%, var(--change-field), transparent 72%),
    var(--bg);
}
.p-apertura-bassa { min-height: 0; padding-bottom: var(--space-blocco); }
.p-apertura > * { width: min(100%, var(--width-pagina)); margin-inline: auto; }
.p-titolo { font-size: var(--type-enorme); font-weight: 800; line-height: .98; letter-spacing: var(--tracking-gigante); text-wrap: balance; }
.p-apertura .voce { max-width: var(--width-stretta); margin-inline: 0 auto; }
.p-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); max-width: var(--width-stretta); margin-inline: 0 auto !important; }
.p-numeri li { display: grid; gap: var(--space-xxs); padding-top: var(--space-s); border-top: 1px solid color-mix(in oklab, var(--text) 18%, transparent); }
.p-numeri b { font-size: var(--type-fatto); font-weight: 800; letter-spacing: var(--tracking-titolo); line-height: 1; font-variant-numeric: tabular-nums; }
.p-numeri span { font-size: var(--type-nota); color: var(--muted); }
.p-sezione { padding: var(--space-sezione) var(--space-margine); }
.p-dentro { display: grid; gap: var(--space-l); width: min(100%, var(--width-pagina)); margin-inline: auto; }
.p-scura { background: var(--night); color: var(--on-night); --text: var(--on-night); --muted: var(--night-muted); --tinta-sezione: var(--night); }
.p-scura .occhiello, .p-scura .voce { color: var(--night-muted); }
.p-regole, .p-tempo { display: grid; gap: var(--space-l); margin-top: var(--space-m); }
.p-regole li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xxs) var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--separator); }
.p-regole b { grid-row: span 2; font-size: var(--type-sottotitolo); font-variant-numeric: tabular-nums; color: var(--vivo-choice); }
.p-regole h3, .p-tempo h3 { font-size: var(--type-sezione); font-weight: 800; letter-spacing: var(--tracking-frase); }
.p-regole p, .p-tempo p { color: var(--muted); max-width: var(--width-testo); }
.p-tempo li { position: relative; display: grid; gap: var(--space-xxs); padding: 0 0 0 var(--space-xl); }
.p-tempo li::before { content: ""; position: absolute; left: 0; top: .45em; width: .7em; height: .7em; border-radius: 50%; background: var(--vivo-challenge); box-shadow: 0 0 0 .3em color-mix(in oklab, var(--vivo-challenge) 25%, transparent); }
.p-tempo li:nth-child(4n+2)::before { background: var(--vivo-choice); box-shadow: 0 0 0 .3em color-mix(in oklab, var(--vivo-choice) 25%, transparent); }
.p-tempo li:nth-child(4n+3)::before { background: var(--vivo-change); box-shadow: 0 0 0 .3em color-mix(in oklab, var(--vivo-change) 25%, transparent); }
.p-tempo li:nth-child(4n)::before { background: var(--vivo-chance); box-shadow: 0 0 0 .3em color-mix(in oklab, var(--vivo-chance) 25%, transparent); }
.p-tempo li:not(:last-child)::after { content: ""; position: absolute; left: calc(.35em - 1px); top: 1.4em; bottom: calc(-1 * var(--space-l)); width: calc(var(--space-xxs) / 2); background: color-mix(in oklab, var(--on-night) 18%, transparent); }
.p-tempo time { font-size: var(--type-micro); font-weight: 800; letter-spacing: var(--tracking-occhiello); text-transform: uppercase; color: var(--night-muted); }
.p-scura .p-tempo li::before { background: var(--vivo-challenge); }
.p-scura { --vivo-challenge: var(--challenge); --vivo-choice: var(--choice); --vivo-change: var(--change); --vivo-chance: var(--chance); }
@media (width >= 60rem) {
  .p-regole { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
  .p-tempo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  .p-tempo li:not(:last-child)::after { display: none; }
}

/* Le aree: si aprono una alla volta. */
.aree { display: grid; gap: var(--space-s); margin-top: var(--space-m); }
.area { border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-leggera); overflow: hidden; }
.area summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-m); min-height: var(--target-large); padding: var(--space-s) var(--space-l); cursor: pointer; }
.area summary::-webkit-details-marker { display: none; }
.area summary:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.area-n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--vivo-choice); }
.area-titolo { font-size: var(--type-enfasi); font-weight: 800; }
.area-conta { min-width: 2.4em; padding: var(--space-xxs) var(--space-xs); border-radius: var(--radius-pillola); background: color-mix(in oklab, var(--text) 8%, transparent); font-weight: 800; font-size: var(--type-nota); text-align: center; font-variant-numeric: tabular-nums; }
.area[open] summary { border-bottom: 1px solid var(--divider); }
.area-descr { padding: var(--space-m) var(--space-l) 0; color: var(--muted); max-width: var(--width-stretta); }
.studi, .esclusi { display: grid; padding: var(--space-xs) var(--space-l) var(--space-l); }
.studi li, .esclusi li { display: grid; gap: var(--space-xxs); padding: var(--space-s) 0; border-top: 1px solid var(--divider); }
.studi li:first-child, .esclusi li:first-child { border-top: 0; }
.s-studio { font-weight: 700; }
.s-paese { display: inline-block; margin-left: var(--space-xs); padding: 0 var(--space-xs); border-radius: var(--radius-pillola); background: color-mix(in oklab, var(--vivo-change) 14%, transparent); font-size: var(--type-micro); font-weight: 800; vertical-align: .1em; }
.s-cosa { color: var(--muted); max-width: var(--width-stretta); }
.s-doi { font-size: var(--type-nota); overflow-wrap: anywhere; }
.s-doi a { color: var(--vivo-choice); }
.senza-doi { color: var(--muted); }
.area-esclusi .area-n { color: var(--danger); }
@media (width >= 60rem) {
  .studi li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--space-xl); }
  .studi li .s-studio { grid-row: span 2; }
}
:root[data-motion="pieno"] .area[open] .studi, :root[data-motion="pieno"] .area[open] .esclusi, :root[data-motion="pieno"] .area[open] .area-descr { animation: apre var(--spring-sistema-d) var(--spring-sistema); }
@keyframes apre { from { opacity: 0; translate: 0 -.5em; } }

/* La prosa: l'Informativa e le pagine della guida. */
.prosa { display: grid; gap: var(--space-m); width: min(100%, var(--width-stretta)); margin-inline: auto; padding: var(--space-blocco) var(--space-margine) var(--space-sezione); }
.prosa h2 { margin-top: var(--space-l); font-size: var(--type-sottotitolo); font-weight: 800; letter-spacing: var(--tracking-titolo); }
.prosa h3 { margin-top: var(--space-s); font-size: var(--type-sezione); font-weight: 800; }
.prosa p, .prosa li { line-height: var(--line-height); }
.prosa ul, .prosa ol { display: grid; gap: var(--space-xs); padding-left: var(--space-l); list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa .avviso-provvisorio { padding: var(--space-m) var(--space-l); border-radius: var(--radius-l); background: color-mix(in oklab, var(--vivo-challenge) 14%, var(--surface)); }

:root[data-stile="nitido"] .p-apertura { background: var(--surface); }
:root[data-stile="nitido"] .p-scura { background: var(--surface); color: var(--text); --text: initial; --muted: initial; }
:root[data-stile="nitido"] .p-scura .occhiello, :root[data-stile="nitido"] .p-scura .voce, :root[data-stile="nitido"] .p-tempo p, :root[data-stile="nitido"] .p-tempo time, :root[data-stile="nitido"] .p-regole p, :root[data-stile="nitido"] .s-cosa, :root[data-stile="nitido"] .area-descr { color: var(--text); }
:root[data-stile="nitido"] .area, :root[data-stile="nitido"] .prosa .avviso-provvisorio { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }

/* La guida (help.mindset.xin): l'indice in alto sul telefono, fisso a sinistra sugli schermi larghi. */
.guida { display: grid; gap: var(--space-l); width: min(100%, var(--width-pagina)); margin-inline: auto; padding: var(--space-l) var(--space-margine) 0; }
.guida .prosa { padding: 0 0 var(--space-sezione); width: 100%; max-width: var(--width-stretta); margin: 0; }
.guida-indice { display: grid; gap: var(--space-xs); padding: var(--space-m) var(--space-l); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-leggera); }
.guida-indice ol { display: grid; gap: 0; counter-reset: voce; }
.guida-indice li { counter-increment: voce; }
.guida-indice a { display: flex; gap: var(--space-s); align-items: center; min-height: var(--target-min); color: var(--text); text-decoration: none; font-weight: 700; }
.guida-indice a::before { content: counter(voce, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--vivo-choice); font-size: var(--type-nota); }
.guida-indice a:hover { color: var(--vivo-choice); }
.guida .prosa h2 { scroll-margin-top: calc(var(--control-tasto) + var(--space-xl)); padding-top: var(--space-l); border-top: 1px solid var(--divider); }
.guida .prosa h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
@media (width >= 60rem) {
  .guida { grid-template-columns: calc(var(--width-colonna) * .8) minmax(0, 1fr); gap: var(--space-xxl); align-items: start; }
  .guida-indice { position: sticky; top: calc(var(--control-tasto) + var(--space-l)); }
}
:root[data-stile="nitido"] .guida-indice { box-shadow: inset 0 0 0 1px var(--line); }