/* pickupartists.net — design 21 del registro (01/09/2026): "la lavagna da spogliatoio".
Fondo indaco, tratto gesso, un solo colore per "fatto". Mobile-first (min-width).
Un solo file, nessun framework, nessun @import, nessuna URL esterna (CSP font-src 'self').
Contrasti WCAG misurati (script luminanza relativa, 01/09/2026; rimisurati 02/09/2026, identici):
gesso #F1DFC0 su notte #14124A 13.21:1 AAA
gesso su lavagna #221262 12.06:1 AAA
fatto #3BD98C su notte 9.46:1 AAA (link, spunte)
fatto su lavagna 8.63:1 AAA
notte su fatto (testo del bottone) 9.46:1 AAA
cenere #9E9AC2 su notte 6.46:1 AA (meta, didascalie; AAA per testo grande)
cenere su lavagna 5.90:1 AA
gesso su fondo .fatto (fatto 12% su notte = #192A52) 10.74:1 AAA
fatto su fondo .fatto 7.69:1 AAA
cenere su fondo .fatto 5.26:1 AA
stampa: #14124A su bianco 17.28:1 · #55556E su bianco 7.21:1 · #14124A su riga alterna #F3F2F7 15.52:1 ·
#55556E su #F3F2F7 6.48:1 · #3BD98C su bianco 1.83:1 (per questo in stampa l'accento diventa
inchiostro: --sf-fatto = #14124A)
Divieti: cenere su fatto 1.46:1, gesso su fatto 1.40:1 → sull'accento si scrive solo in --sf-notte. */
/* ---------- 1. Font self-hosted (OFL; file in assets/fonts, sottoinsieme latin) ----------
Barlow Condensed: due file statici (600, 700). Instrument Sans e Spline Sans Mono: Google serve un
solo woff2 variabile per famiglia, quindi un @font-face con l'intervallo di pesi: `400 700` per
Instrument Sans (pesi usati 400/500/700) e `400 500` per Spline Sans Mono (pesi usati 400/500):
4 @font-face e 4 file totali invece dei 7 previsti in design.md §2. I quattro nomi qui sotto sono quelli
misurati in assets/fonts il 02/09/2026; i due file "variabili" contengono la tabella fvar (misurato
sulla table directory WOFF2, 02/09/2026). */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
src: url("../fonts/barlowcondensed-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
src: url("../fonts/barlowcondensed-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("../fonts/instrumentsans-400-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
src: url("../fonts/splinesansmono-400-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- 2. Token (design.md §5) ---------- */
:root {
--sf-notte: #14124A; /* fondo pagina */
--sf-lavagna: #221262; /* fondo secondario: pannelli, tracker, barra, figure */
--sf-gesso: #F1DFC0; /* testo */
--sf-fatto: #3BD98C; /* accento: spunte, link, vettori fatti, bottone */
--sf-cenere: #9E9AC2; /* neutro: meta, tratteggio, didascalie */
--sf-riga: rgba(241, 223, 192, 0.18); /* filetti, bordi tabella */
--sf-fatto-velo: rgba(59, 217, 140, 0.12); /* fondo dello stato "fatto" */
--sf-col: 68ch;
--sf-spazio: clamp(1.1rem, 3.5vw, 2.25rem);
--sf-barra-h: 3.25rem;
--sf-tratto: 1.5px;
--sf-tocco: 44px; /* bersaglio minimo touch */
--sf-titoli: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
--sf-corpo: "Instrument Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--sf-mono: "Spline Sans Mono", Consolas, "Courier New", monospace;
}
/* ---------- 3. Reset minimo e base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0; background: var(--sf-notte); color: var(--sf-gesso);
font-family: var(--sf-corpo); font-size: 1rem; line-height: 1.65;
/* niente -webkit-font-smoothing: su fondo scuro il 400 si assottiglierebbe */
}
img, svg { max-width: 100%; height: auto; display: block; }
p, li, dd, td, th { overflow-wrap: break-word; }
a { color: var(--sf-fatto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sf-fatto); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--sf-titoli); font-weight: 700; line-height: 1.1; letter-spacing: 0.005em; margin: 0 0 0.5em; overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 8vw, 3.25rem); font-weight: 700; text-transform: none; }
h2 { font-size: clamp(1.55rem, 5vw, 2.1rem); font-weight: 600; margin-top: 2.2em; padding-top: 0.55em; border-top: var(--sf-tratto) solid var(--sf-riga); }
h3 { font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 600; margin-top: 1.6em; }
h4 { font-size: 1.1rem; font-weight: 600; margin-top: 1.4em; }
p, ul, ol, dl { margin: 0 0 1em; }
li { margin-bottom: 0.35em; }
strong, b { font-weight: 500; }
small { font-size: 0.88em; }
code, kbd, samp { font-family: var(--sf-mono); font-size: 0.92em; }
pre { font-family: var(--sf-mono); font-size: 0.9rem; overflow-x: auto; background: var(--sf-lavagna); padding: 0.8rem 1rem; border: 1px solid var(--sf-riga); }
blockquote { margin: 1.2em 0; padding: 0.2em 0 0.2em 1em; border-left: 3px solid var(--sf-cenere); }
blockquote p { margin-bottom: 0.4em; }
blockquote cite { font-family: var(--sf-mono); font-size: 0.85em; color: var(--sf-cenere); font-style: normal; }
hr { border: 0; border-top: var(--sf-tratto) solid var(--sf-riga); margin: 2em 0; }
::selection { background: var(--sf-fatto); color: var(--sf-notte); }
/* Etichetta "da lavagna": mono, maiuscoletto, cenere. Riusata da facts, toc, th, meta, prodotto. */
.facts h2, .facts h3, .toc h2, th, .meta, .breadcrumb, .source-line, figcaption, .tracker-stato, .giorni-stato, .stat dt, section.sfida dt {
font-family: var(--sf-mono);
}
/* ---------- 4. Testata ---------- */
.masthead { background: var(--sf-lavagna); border-bottom: var(--sf-tratto) solid var(--sf-riga); }
.masthead .wrap, .page, .colophon .wrap {
max-width: calc(var(--sf-col) + 2 * var(--sf-spazio)); margin: 0 auto; padding-left: var(--sf-spazio); padding-right: var(--sf-spazio);
}
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem var(--sf-spazio); padding-top: 0.8rem; padding-bottom: 0.8rem; }
.brand { font-family: var(--sf-titoli); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; text-decoration: none; color: var(--sf-gesso); }
.brand small { display: block; font-family: var(--sf-mono); font-weight: 400; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--sf-cenere); }
.nav { display: flex; flex-wrap: wrap; gap: 0.2rem 0.2rem; font-family: var(--sf-mono); font-size: 0.85rem; width: 100%; }
.nav a { color: var(--sf-gesso); text-decoration: none; padding: 0.55rem 0.55rem; min-height: var(--sf-tocco); display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--sf-fatto); }
.nav a[aria-current="page"] { color: var(--sf-fatto); }
/* ---------- 5. Colonna di lettura ---------- */
.page { padding-top: 1.5rem; padding-bottom: 3rem; }
article { max-width: var(--sf-col); }
.breadcrumb { font-size: 0.8rem; color: var(--sf-cenere); margin-bottom: 1.2rem; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.4rem; color: var(--sf-fatto); }
.breadcrumb a { color: var(--sf-cenere); text-decoration: none; display: inline-block; padding: 0.35rem 0; } /* link in linea: esenti dal minimo 44 px (WCAG 2.5.8), ma con un po' d'aria */
.breadcrumb a:hover { color: var(--sf-gesso); }
.meta { font-size: 0.82rem; color: var(--sf-cenere); margin: -0.2rem 0 1.4rem; }
.meta span + span::before { content: " · "; }
.answer { font-size: 1.15rem; line-height: 1.5; border-top: var(--sf-tratto) solid var(--sf-riga); border-bottom: var(--sf-tratto) solid var(--sf-riga); padding: 1rem 0; margin: 0 0 1.5rem; }
.facts { background: var(--sf-lavagna); border: 1px solid var(--sf-riga); border-left: 3px solid var(--sf-fatto); padding: 1rem 1.2rem; margin: 0 0 1.5rem; font-size: 0.95rem; }
.facts h2, .facts h3 { border: 0; margin: 0 0 0.5rem; padding: 0; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-cenere); }
.facts ul, .facts ol { margin: 0; padding-left: 1.1rem; }
.facts p:last-child { margin-bottom: 0; }
.toc { border: 1px solid var(--sf-riga); padding: 0.8rem 1.2rem; margin: 0 0 1.5rem; font-size: 0.95rem; }
.toc h2 { border: 0; margin: 0 0 0.4rem; padding: 0; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-cenere); }
.toc ol { margin: 0; padding-left: 1.3rem; }
.toc li { break-inside: avoid; }
.toc a { color: var(--sf-gesso); text-decoration: none; display: inline-block; padding: 0.55rem 0; } /* 0.95rem × 1.65 + 2 × 0.55rem ≈ 44 px */
.toc a:hover { color: var(--sf-fatto); text-decoration: underline; }
/* ---------- 6. Tabelle ---------- */
table { border-collapse: collapse; width: 100%; margin: 0 0 1.4em; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5em 0.7em; border-bottom: 1px solid var(--sf-riga); }
th { font-family: var(--sf-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-cenere); }
thead th { border-bottom: var(--sf-tratto) solid var(--sf-gesso); }
tbody tr:nth-child(even) { background: var(--sf-lavagna); }
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; border: 1px solid var(--sf-riga); scrollbar-gutter: stable; }
.table-wrap:focus-visible { outline: 2px solid var(--sf-fatto); outline-offset: 2px; }
.table-wrap table { margin: 0; min-width: 28rem; }
.table-wrap th:first-child, .table-wrap td:first-child { position: sticky; left: 0; background: var(--sf-notte); }
.table-wrap tbody tr:nth-child(even) th:first-child, .table-wrap tbody tr:nth-child(even) td:first-child { background: var(--sf-lavagna); }
/* ---------- 7. Esercizi del giorno e tracker ---------- */
section.esercizi h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; }
section.esercizi h3::before { content: ""; flex: 0 0 0.85rem; height: var(--sf-tratto); background: var(--sf-fatto); }
/* label.spunta: inserita dal JS subito dopo ogni h3. Bersaglio ≥ 44 px: min-height + padding. */
label.spunta {
display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--sf-tocco);
padding: 0.3rem 0.9rem 0.3rem 0.6rem; margin: 0 0 0.8rem; cursor: pointer; user-select: none;
font-family: var(--sf-mono); font-size: 0.88rem; color: var(--sf-cenere);
border: 1px solid var(--sf-riga); background: var(--sf-lavagna);
}
label.spunta:hover { border-color: var(--sf-cenere); color: var(--sf-gesso); }
label.spunta input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--sf-fatto); cursor: pointer; }
label.spunta:has(input:checked) { color: var(--sf-fatto); border-color: var(--sf-fatto); background: var(--sf-fatto-velo); }
label.spunta:focus-within { outline: 2px solid var(--sf-fatto); outline-offset: 2px; } /* anche senza :has() */
label.spunta input:focus-visible { outline: none; } /* l'anello è sulla label */
.tracker { background: var(--sf-lavagna); border: 1px solid var(--sf-riga); border-top: 3px solid var(--sf-cenere); padding: 1rem 1.2rem 1.2rem; margin: 1.5rem 0 2rem; }
.tracker.fatto { border-top-color: var(--sf-fatto); background: var(--sf-fatto-velo); }
.tracker noscript, .tracker-msg { display: block; font-family: var(--sf-mono); font-size: 0.88rem; color: var(--sf-cenere); }
.tracker-stato { font-family: var(--sf-mono); font-size: 0.95rem; font-weight: 500; margin: 0 0 0.8rem; letter-spacing: 0.02em; }
.tracker.fatto .tracker-stato::before { content: "✓ "; color: var(--sf-fatto); }
.tracker label { display: block; font-family: var(--sf-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-cenere); margin: 0.9rem 0 0.3rem; }
.tracker textarea, .tracker input[type="number"], section.sfida input[type="date"] {
font: inherit; color: var(--sf-gesso); background: var(--sf-notte); border: 1px solid var(--sf-riga);
padding: 0.5rem 0.7rem; min-height: var(--sf-tocco); width: 100%; max-width: 100%;
}
.tracker textarea { resize: vertical; line-height: 1.5; }
.tracker input[type="number"], section.sfida input[type="date"] { font-family: var(--sf-mono); width: auto; min-width: 7rem; }
.tracker textarea:focus, .tracker input:focus, section.sfida input:focus { outline: 2px solid var(--sf-fatto); outline-offset: 0; border-color: var(--sf-fatto); }
/* sfida.js emette: poi label, input, label, input, label, input. Con l'auto-placement a 3 colonne
le coppie si sfalserebbero (label, input, label sulla prima riga): ogni label va in riga 2 e ogni
input in riga 3, la colonna la assegna l'ordine del sorgente. */
.tracker-log { margin-top: 0.8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.8rem; }
.tracker-log p { grid-row: 1; grid-column: 1 / -1; font-family: var(--sf-mono); font-size: 0.88rem; color: var(--sf-cenere); margin: 0.6rem 0 0; }
.tracker-log > label { grid-row: 2; }
.tracker-log > input { grid-row: 3; }
.tracker-log input[type="number"] { width: 100%; min-width: 0; }
input[type="file"][hidden] { display: none; }
/* Bottoni: testo notte su accento (9.46:1); secondario = contorno gesso. Altezza ≥ 44 px. */
button, .bottone {
font: inherit; font-family: var(--sf-mono); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.02em;
min-height: var(--sf-tocco); padding: 0.55rem 1.1rem; margin: 0 0.4rem 0.5rem 0; cursor: pointer;
color: var(--sf-notte); background: var(--sf-fatto); border: var(--sf-tratto) solid var(--sf-fatto); border-radius: 0;
}
button:hover, .bottone:hover { background: var(--sf-gesso); border-color: var(--sf-gesso); }
.tracker.fatto .tracker-fatto, button[data-azione="import"], button[data-azione="azzera"] { background: transparent; color: var(--sf-gesso); border-color: var(--sf-gesso); }
.tracker.fatto .tracker-fatto:hover, button[data-azione="import"]:hover, button[data-azione="azzera"]:hover { background: var(--sf-gesso); color: var(--sf-notte); }
button[data-azione="azzera"] { border-color: var(--sf-cenere); color: var(--sf-cenere); }
button[data-azione="azzera"]:hover { background: var(--sf-cenere); color: var(--sf-notte); border-color: var(--sf-cenere); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* ---------- 8. Indice dei giorni — variante compatta dell'elemento firma ----------
Ogni giorno è preceduto da un piccolo VETTORE (la freccia della lavagna tattica, non una casella):
tratteggio cenere = da fare. sfida.js legge il localStorage e aggiunge la classe .fatto al
(più uno "✓" in coda): il tratteggio diventa tratto pieno accento e il numero
del giorno passa in --sf-fatto. Nessuna figura a 30 unità: è una lista, e ogni riga porta il proprio segno. */
ol.giorni { list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: giorno; border-top: 1px solid var(--sf-riga); }
ol.giorni li { position: relative; margin: 0; padding: 0.15rem 0 0.15rem 2.6rem; min-height: var(--sf-tocco); border-bottom: 1px solid var(--sf-riga); display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.5rem; }
ol.giorni li::before { /* asta del vettore */
content: ""; position: absolute; left: 0; top: 50%; width: 1.5rem; height: 0;
border-top: 2px dashed var(--sf-cenere); transform: translateY(-50%);
}
ol.giorni li::after { /* punta del vettore */
content: ""; position: absolute; left: 1.1rem; top: 50%; width: 0.5rem; height: 0.5rem;
border-top: 2px solid var(--sf-cenere); border-right: 2px solid var(--sf-cenere); transform: translateY(-50%) rotate(45deg);
}
ol.giorni li a { color: var(--sf-gesso); text-decoration: none; display: inline-block; padding: 0.55rem 0; flex: 1 1 auto; }
ol.giorni li .segno { white-space: nowrap; margin-left: 0.35rem; }
ol.giorni li a:hover { color: var(--sf-fatto); text-decoration: underline; }
ol.giorni li.fatto::before { border-top-style: solid; border-top-color: var(--sf-fatto); }
ol.giorni li.fatto::after { border-color: var(--sf-fatto); }
ol.giorni li.fatto a { color: var(--sf-fatto); }
ol.giorni li .segno { font-family: var(--sf-mono); color: var(--sf-fatto); font-weight: 500; }
.giorni-stato { font-family: var(--sf-mono); font-size: 0.95rem; font-weight: 500; color: var(--sf-fatto); margin: -0.8rem 0 1.5rem; }
.giorni-stato::before { content: "▸ "; }
/* ---------- 9. Cruscotto /sfida/ ---------- */
section.sfida { margin: 1.5rem 0 2rem; }
/* build.py emette con ; la pagina di prova un piatto: coperti entrambi */
section.sfida dl, .stat { display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin: 0 0 1.5rem; }
section.sfida dl > div, .stat > div { background: var(--sf-lavagna); border: 1px solid var(--sf-riga); padding: 0.8rem 1rem; }
section.sfida dl:not(:has(div)) { grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; background: var(--sf-lavagna); border: 1px solid var(--sf-riga); padding: 0.8rem 1rem; }
section.sfida dt, .stat dt { font-family: var(--sf-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-cenere); margin: 0; }
section.sfida dd, .stat dd { margin: 0; font-family: var(--sf-titoli); font-size: 1.7rem; font-weight: 600; line-height: 1.15; color: var(--sf-gesso); text-wrap: balance; overflow-wrap: normal; }
section.sfida dd[data-stat="ultimo"], .stat dd[data-stat="ultimo"] { font-size: 1.25rem; }
section.sfida dl:not(:has(div)) dd { font-size: 1.1rem; font-family: var(--sf-mono); font-weight: 500; align-self: center; }
section.sfida table td { font-family: var(--sf-mono); font-size: 0.9rem; text-align: right; font-variant-numeric: tabular-nums; }
section.sfida table th:first-child, section.sfida table td:first-child { text-align: left; }
section.sfida tbody th { font-family: var(--sf-corpo); font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--sf-gesso); font-weight: 500; }
section.sfida tr[data-settimana="totale"] th, section.sfida tr[data-settimana="totale"] td { border-top: var(--sf-tratto) solid var(--sf-gesso); font-weight: 500; color: var(--sf-gesso); }
section.sfida .inizio label, section.sfida p > label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; font-family: var(--sf-mono); font-size: 0.88rem; color: var(--sf-cenere); }
section.sfida .azioni { display: flex; flex-wrap: wrap; gap: 0; margin: 1rem 0 0.5rem; }
p[data-msg] { font-family: var(--sf-mono); font-size: 0.9rem; color: var(--sf-gesso); min-height: 1.5em; margin: 0.3rem 0 1rem; }
p[data-msg]:not(:empty) { border-left: 3px solid var(--sf-fatto); padding-left: 0.7rem; }
p.sfida-stato { background: var(--sf-lavagna); border: 1px solid var(--sf-riga); border-left: 3px solid var(--sf-fatto); padding: 0.8rem 1.1rem; font-family: var(--sf-mono); font-size: 0.95rem; margin: 0 0 1.5rem; }
p.sfida-stato[hidden] { display: none; }
/* ---------- 10. Elemento firma: la lavagna tattica (design.md §3) ----------
…
Dentro l'svg: path.sf-muro (geometria), path.sf-area (bancone/tavolo), circle.sf-attore + circle.sf-tu,
text.sf-etichetta, path.sf-vettore[data-task="n"] (un vettore per ### esercizio), path.sf-uscita.
sfida.js aggiunge alla data-fatto="n n…" con i task spuntati e data-completo quando lo sono tutti:
il vettore passa da tratteggio cenere a tratto pieno accento (transizione stroke-dashoffset 400 ms),
il cerchio "tu" diventa accento. Senza JS resta tutto tratteggiato: è lo stato "da fare" del sorgente. */
figure.sf-lavagna { margin: 1.5rem 0 2rem; background: var(--sf-lavagna); border: 1px solid var(--sf-riga); }
figure.sf-lavagna svg { width: 100%; height: auto; display: block; font-family: var(--sf-mono); font-size: 13px; }
figure.sf-lavagna figcaption { font-family: var(--sf-mono); font-size: 0.8rem; color: var(--sf-cenere); padding: 0.6rem 0.9rem; border-top: 1px solid var(--sf-riga); }
figure.sf-lavagna figcaption b { font-weight: 500; color: var(--sf-gesso); }
.sf-muro { fill: none; stroke: var(--sf-gesso); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sf-area { fill: rgba(241, 223, 192, 0.08); stroke: var(--sf-gesso); stroke-width: 1.5; }
.sf-attore { fill: none; stroke: var(--sf-gesso); stroke-width: 1.5; }
.sf-tu { fill: var(--sf-gesso); stroke: var(--sf-gesso); stroke-width: 1.5; }
.sf-etichetta { fill: var(--sf-gesso); font-family: var(--sf-mono); font-size: 13px; }
.sf-vettore { fill: none; stroke: var(--sf-cenere); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; marker-end: url(#sf-punta); transition: stroke 400ms, stroke-dashoffset 400ms; }
.sf-uscita { fill: none; stroke: var(--sf-cenere); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; marker-end: url(#sf-punta-vuota); }
.sf-punta { fill: var(--sf-cenere); }
.sf-punta-vuota { fill: none; stroke: var(--sf-cenere); stroke-width: 1.5; }
.sf-lavagna[data-fatto~="1"] .sf-vettore[data-task="1"],
.sf-lavagna[data-fatto~="2"] .sf-vettore[data-task="2"],
.sf-lavagna[data-fatto~="3"] .sf-vettore[data-task="3"],
.sf-lavagna[data-fatto~="4"] .sf-vettore[data-task="4"],
.sf-lavagna[data-fatto~="5"] .sf-vettore[data-task="5"],
.sf-lavagna[data-fatto~="6"] .sf-vettore[data-task="6"],
.sf-lavagna[data-fatto~="7"] .sf-vettore[data-task="7"],
.sf-lavagna[data-fatto~="8"] .sf-vettore[data-task="8"],
.sf-lavagna[data-fatto~="9"] .sf-vettore[data-task="9"] { stroke: var(--sf-fatto); stroke-dasharray: none; stroke-width: 2.5; marker-end: url(#sf-punta-fatto); }
.sf-punta-fatto { fill: var(--sf-fatto); }
.sf-lavagna[data-completo] .sf-tu { fill: var(--sf-fatto); stroke: var(--sf-fatto); }
/* Cruscotto: le 4 lavagne di settimana in griglia (2×2 da 40rem in su, §3.3) */
.sf-lavagne { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
.sf-lavagne figure.sf-lavagna { margin: 0; }
.sf-lavagne figcaption { font-size: 0.74rem; }
/* ---------- 11. Sezioni: perché, FAQ, fonti, continua, figure ---------- */
section.perche { border-left: 3px solid var(--sf-cenere); padding-left: 1.1rem; margin: 2rem 0; }
section.perche h2 { border-top: 0; padding-top: 0; }
.faq h3 { margin-top: 1.3em; display: flex; gap: 0.6rem; }
.faq h3::before { content: "?"; font-family: var(--sf-mono); font-weight: 500; color: var(--sf-fatto); flex: 0 0 auto; }
.sources { border-top: var(--sf-tratto) solid var(--sf-riga); margin-top: 2.5rem; padding-top: 1rem; font-size: 0.92rem; }
.sources h2 { border: 0; margin: 0 0 0.6rem; padding: 0; font-size: 1.3rem; }
.sources ol, .sources ul { padding-left: 1.3rem; overflow-wrap: anywhere; }
.sources a { color: var(--sf-gesso); }
.sources a:hover { color: var(--sf-fatto); }
.source-line { font-size: 0.78rem; color: var(--sf-cenere); margin: -0.6em 0 1.4em; }
.source-line::before { content: "fonte ▸ "; color: var(--sf-fatto); }
.next { margin: 2.5rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--sf-riga); background: var(--sf-lavagna); }
.next h2 { border: 0; margin: 0 0 0.5rem; padding: 0; font-size: 0.8rem; font-family: var(--sf-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-cenere); }
.next p:last-child { margin-bottom: 0; }
figure.schematic, figure.photo { margin: 1.5rem 0 2rem; }
figure.schematic { background: var(--sf-lavagna); border: 1px solid var(--sf-riga); }
figure.schematic img { width: 100%; }
figure.schematic figcaption { font-size: 0.8rem; color: var(--sf-cenere); padding: 0.6rem 0.9rem; border-top: 1px solid var(--sf-riga); }
figure.photo figcaption { font-family: var(--sf-mono); font-size: 0.78rem; color: var(--sf-cenere); padding-top: 0.4rem; }
/* Avviso 18+: ben visibile (bordo pieno gesso, etichetta mono), non aggressivo (nessun rosso, nessun fondo pieno) */
p.avviso { border: var(--sf-tratto) solid var(--sf-gesso); padding: 0.9rem 1.1rem 0.9rem 3.2rem; margin: 1.5rem 0; position: relative; font-size: 0.95rem; background: var(--sf-lavagna); }
p.avviso::before { content: "18+"; position: absolute; left: 0.8rem; top: 0.85rem; font-family: var(--sf-titoli); font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--sf-gesso); }
/* ---------- 12. Barra di stato ancorata in basso (archetipo, design.md §4) ----------
build.py appende nav.prevnext come ultimo figlio di sulle pagine giorno: con sticky/bottom
resta al bordo inferiore mentre l'articolo scorre e si posa al suo posto alla fine. Senza JS mostra
solo i link prev/up/next, che è il contenuto minimo previsto. Se il builder aggiungerà .sf-barra
con il contatore "k di n", le stesse regole valgono (selettori condivisi). */
nav.prevnext, .sf-barra {
/* 02/09/2026: era position:sticky;bottom:0 e copriva il testo mentre si leggeva (collaudo in produzione).
Ora si posa alla fine dell'articolo, dove serve davvero. */
position: static; margin: 2rem calc(-1 * var(--sf-spazio)) 0;
background: var(--sf-lavagna); border-top: var(--sf-tratto) solid var(--sf-riga);
font-family: var(--sf-mono); font-size: 0.85rem; min-height: var(--sf-barra-h);
padding: 0 var(--sf-spazio) env(safe-area-inset-bottom);
}
nav.prevnext ul { list-style: none; margin: 0; padding: 0.5rem 0; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0.5rem; }
nav.prevnext li { margin: 0; display: flex; min-width: 0; }
nav.prevnext li.up { display: none; }
nav.prevnext a { display: flex; align-items: center; min-height: var(--sf-tocco); padding: 0.5rem 0.3rem; color: var(--sf-gesso); text-decoration: none; line-height: 1.35; } /* testo per esteso: niente ellissi, niente riquadri di altezze diverse */
nav.prevnext a:hover { color: var(--sf-fatto); }
nav.prevnext li.prev a::before { content: "← "; color: var(--sf-fatto); }
nav.prevnext li.next a::after { content: " →"; color: var(--sf-fatto); }
/* sotto 40rem: un link per riga, etichetta leggibile (prima erano sole frecce da 44 px) */
nav.prevnext li { flex: 1 1 100%; }
nav.prevnext li.prev a::before, nav.prevnext li.next a::after { font-size: 1.1rem; padding: 0 0.35rem; }
.sf-barra .sf-conto { font-weight: 500; letter-spacing: 0.04em; }
/* ---------- 13. Footer ---------- */
.colophon { background: var(--sf-lavagna); border-top: var(--sf-tratto) solid var(--sf-riga); margin-top: 2rem; }
.colophon .wrap { padding-top: 1.4rem; padding-bottom: 2rem; font-size: 0.88rem; }
.colophon p { margin: 0 0 0.5rem; }
.colophon .legal { font-family: var(--sf-mono); font-size: 0.76rem; color: var(--sf-cenere); }
.colophon .legal a { color: var(--sf-cenere); }
.colophon nav { display: flex; flex-wrap: wrap; gap: 0 0.2rem; margin-top: 0.8rem; font-family: var(--sf-mono); font-size: 0.8rem; }
.colophon nav a { color: var(--sf-gesso); text-decoration: none; padding: 0.6rem 0.6rem 0.6rem 0; min-height: var(--sf-tocco); display: inline-flex; align-items: center; margin-right: 0.6rem; }
.colophon nav a:hover { color: var(--sf-fatto); text-decoration: underline; }
/* ---------- 14. Da 40rem in su ---------- */
@media (min-width: 40rem) {
body { font-size: 1.0625rem; }
.nav { width: auto; margin-left: auto; gap: 0.2rem 0.6rem; }
.toc ol { columns: 2; column-gap: var(--sf-spazio); }
section.sfida dl:has(div), .stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-lavagne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
nav.prevnext li.up { display: flex; }
nav.prevnext li { flex: 0 1 auto; }
nav.prevnext a { max-width: 22rem; }
.tracker input[type="number"] { width: 8rem; }
.tracker-log { grid-template-columns: repeat(3, 8rem); }
section.sfida .azioni { gap: 0 0.2rem; }
}
@media (min-width: 60rem) {
section.sfida dl:has(div), .stat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---------- 15. Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* ---------- 15b. Contrasto elevato (forced-colors): i vettori disegnati con i bordi prendono il colore del testo,
il bottone e le spunte restano distinguibili dal bordo; lo stato "fatto" è già nel testo (✓, "k di n") ---------- */
@media (forced-colors: active) {
ol.giorni li::before, ol.giorni li::after, section.esercizi h3::before { border-color: CanvasText; background: CanvasText; }
label.spunta, .tracker, .facts, .toc, .next, p.avviso, figure.sf-lavagna { border-color: CanvasText; }
button, .bottone { border: 2px solid ButtonText; }
.sf-muro, .sf-attore, .sf-tu, .sf-vettore, .sf-uscita { stroke: CanvasText; }
.sf-etichetta, .sf-punta, .sf-punta-fatto { fill: CanvasText; }
}
/* ---------- 16. Stampa: le guide PDF sono il prodotto (design.md §7). Pagina chiara, accento = inchiostro. ---------- */
@media print {
@page { size: A4; margin: 15mm; }
:root { --sf-notte: #FFFFFF; --sf-lavagna: #FFFFFF; --sf-gesso: #14124A; --sf-fatto: #14124A; --sf-cenere: #55556E; --sf-riga: #14124A; --sf-fatto-velo: transparent; }
html { color-scheme: light; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { background: #fff; color: #14124A; font-size: 11pt; line-height: 1.45; padding-bottom: 0; }
.masthead, .tracker, nav.prevnext, .sf-barra, .colophon nav, .breadcrumb, .toc, label.spunta, section.sfida .azioni, section.sfida .inizio, p[data-msg], p.sfida-stato, .nav, .tracker-log { display: none !important; }
ol.giorni li { min-height: 0; }
.giorni-stato { color: #14124A; }
section.sfida dl > div, .stat > div { border: 1px solid #14124A; break-inside: avoid; }
.page, article { max-width: none; }
a { color: inherit; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--sf-mono); font-size: 0.85em; word-break: break-all; }
h2 { break-after: avoid; border-top-color: #14124A; }
h3, figure, .facts, .next, .answer, tr { break-inside: avoid; }
.facts, .next, pre, figure.schematic, figure.sf-lavagna, p.avviso { border: 1px solid #14124A; background: #fff; }
.table-wrap { overflow: visible; border: 0; }
.table-wrap th:first-child, .table-wrap td:first-child { position: static; }
tbody tr:nth-child(even) { background: #F3F2F7; }
figure.sf-lavagna svg .sf-vettore { stroke: #14124A; stroke-dasharray: 6 5; stroke-width: 1.5; marker-end: url(#sf-punta); } /* tutto "da fare", tratto inchiostro */
.sf-lavagna[data-completo] .sf-tu { fill: #14124A; }
.sf-area { fill: rgba(20, 18, 74, 0.08); }
ol.giorni li::before, ol.giorni li::after { border-color: #14124A; }
ol.giorni li a { color: inherit; text-decoration: none; }
section.esercizi h3::before { display: none; }
/* casella da compilare a mano nelle guide: prima del titolo dell'esercizio */
.sf-casella { display: inline-block; width: 0.9em; height: 0.9em; border: 1.5px solid #14124A; vertical-align: -0.1em; margin-right: 0.4em; }
.colophon { border-top: 1px solid #14124A; margin-top: 1.5rem; }
}