/* Copyright 2026 G&G Technologies S.r.l. — SPDX-License-Identifier: Apache-2.0 */
/* What this app shapes differently. The palette, the buttons, the app bar and the footer come from
../../_lib/base.css and are not repeated here.
The vocabulary is the site's, not a new one: the raised panel with a 2px thread of gradient along
its top edge, the kicker with its dash, section titles in the display serif, and list bullets as
small gradient squares instead of the browser's dot. The root CLAUDE.md keeps that list, and the
reason it keeps it is that a new kind of box passes every check and still looks like it belongs
to another site. */
:root {
/* base.css has no --gradient: the site's sheet does, and this app cannot borrow from it — it is
generated by the build and versioned with a query string that changes under it. Declared here,
from the two accent tokens that base.css already themes, so it follows light and dark on its
own instead of needing a second declaration. */
--gradient: linear-gradient(90deg, var(--accent), var(--accent-text));
--radius-lg: 22px;
--reading: 720px;
}
/* ---------------------------------------------------------------------------------------------
the page grows with its content
--------------------------------------------------------------------------------------------- */
/* **This is the first app on the site whose content is a document rather than a workspace**, and
the shared sheet was written for the other kind.
`base.css` sets `html, body { height: 100% }` and makes the body a flex column with
`main { flex: 1 1 auto; min-height: 0 }`. For a chart or a game that is exactly right: the app
fills the window, and `min-height: 0` is what lets a plot area shrink instead of pushing the
controls off screen. Here it is wrong in a way that only shows once there is enough content —
the body stays as tall as the window, `main` is allowed to be squashed below the height of what
is inside it, and the overflow scrolls *behind* the footer. The saved-results list crossed the
footer's rule, which is how this was found.
`min-height` instead of `height` is the whole fix: on a short screen the body still fills the
window and the footer sits at the bottom; on a long one the body grows and the footer follows.
Kept here and not in `base.css` on purpose — the same rule that keeps things *out* of the shared
library until two apps need them keeps changes *to* it waiting for a second case. If a second
document-shaped app arrives, that is the moment to move this down. */
html { height: 100%; }
body {
height: auto;
min-height: 100%;
}
/* ---------------------------------------------------------------------------------------------
screens
--------------------------------------------------------------------------------------------- */
/* One column, the width of a line of prose, centred. Nothing here is a workspace: it is a page you
read and a question you answer, and both are hurt by width. */
.screen {
width: 100%;
max-width: var(--reading);
margin: 0 auto;
padding: 26px 18px 40px;
}
.screen h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: 30px;
line-height: 1.22;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.screen h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: 21px;
line-height: 1.3;
margin: 30px 0 10px;
}
.screen p { margin: 0 0 14px; }
.lede { color: var(--muted); font-size: 16px; }
.small { font-size: 12.5px; color: var(--faint); }
.note {
font-size: 12.5px;
color: var(--faint);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(127, 140, 170, 0.05);
padding: 10px 12px;
}
/* The one warning shape in the app: a floor that caps the level, an incoherent pair of answers, a
checklist past its verification date. Amber and not red — none of the three is an error, and a
red panel in front of somebody answering honestly reads as an accusation. */
.warn {
font-size: 13px;
color: var(--text);
border: 1px solid var(--border-strong);
border-left: none;
border-radius: var(--radius-sm);
background: var(--accent-soft);
padding: 10px 12px;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-text);
margin: 0 0 10px;
}
.kicker::before {
content: "";
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--gradient);
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.row.nav { margin-top: 22px; }
/* ---------------------------------------------------------------------------------------------
the raised panel
--------------------------------------------------------------------------------------------- */
.card {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
padding: 22px 22px 20px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 2px;
background: var(--gradient);
}
.card h2 { margin-top: 0; font-size: 23px; }
/* ---------------------------------------------------------------------------------------------
start
--------------------------------------------------------------------------------------------- */
.facts { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; gap: 9px; }
.facts li {
display: flex;
gap: 11px;
align-items: baseline;
font-size: 14px;
color: var(--muted);
}
.facts li::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--gradient);
transform: translateY(-1px);
}
.saved-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.saved-head h2 { margin: 0; font-size: 17px; }
.saved-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
/* **O sempre in linea, o sempre a capo.** La prima versione era una riga flex con sei elementi e
`flex-wrap`, quindi i due pulsanti scendevano solo quando il nome era abbastanza lungo da
spingerli: a volte sì e a volte no, senza una regola indovinabile da chi guarda. Ora sono due
blocchi — il testo, e i comandi — il testo va a capo dentro il suo, i comandi mai. */
.saved-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(127, 140, 170, 0.04);
padding: 9px 12px;
font-size: 13px;
}
.saved-main {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 3px 10px;
min-width: 0;
}
.saved-actions { display: flex; gap: 4px; flex: none; }
/* Sotto questa misura i comandi scendono **sempre**, e allineati a destra: in linea resterebbero
due bersagli da premere schiacciati contro il bordo, che su un telefono è il difetto peggiore. */
@media (max-width: 520px) {
.saved-list li { flex-direction: column; align-items: stretch; }
.saved-actions { justify-content: flex-end; }
}
.saved-list .when { color: var(--faint); font-size: 12px; }
.saved-list .score {
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-text);
}
.saved-list .partial { color: var(--faint); font-size: 12px; font-style: italic; }
/* ---------------------------------------------------------------------------------------------
progress
--------------------------------------------------------------------------------------------- */
.progress {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
font-size: 12px;
color: var(--faint);
}
.progress-label { flex: none; font-family: var(--font-mono); }
.progress-track {
flex: 1 1 auto;
height: 3px;
border-radius: 3px;
background: var(--border);
overflow: hidden;
min-width: 40px;
}
.progress-fill {
display: block;
height: 100%;
width: 0;
background: var(--gradient);
transition: width 160ms ease-out;
}
.progress-section { flex: none; }
@media (max-width: 520px) {
.progress-section { display: none; }
}
/* ---------------------------------------------------------------------------------------------
one question
--------------------------------------------------------------------------------------------- */
/* The section opener. Same panel as a question, so walking from one to the other does not feel
like leaving the questionnaire — which is the point: it is orientation, not an interruption. */
.opener h2 { font-size: 24px; margin-bottom: 10px; }
.opener p { color: var(--muted); max-width: 54ch; }
.opener button { margin-top: 6px; }
.question h2 { font-size: 22px; line-height: 1.28; margin-bottom: 8px; }
.hint-text {
font-size: 13px;
color: var(--faint);
margin: 0 0 16px !important;
max-width: 56ch;
}
.options { display: grid; gap: 8px; margin-top: 16px; }
/* A whole-width target, because on a phone a four-line answer with a small circle beside it is a
small circle: the row is the control, and pressing anywhere on it chooses. */
.option {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
text-align: left;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(127, 140, 170, 0.04);
font-size: 14.5px;
line-height: 1.4;
}
.option:hover { border-color: var(--border-strong); background: rgba(127, 140, 170, 0.09); }
.option .dot {
flex: none;
width: 16px;
height: 16px;
margin-top: 2px;
border-radius: 50%;
border: 1.5px solid var(--border-strong);
}
.option[aria-checked="true"] {
border-color: var(--accent);
background: var(--accent-soft);
}
.option[aria-checked="true"] .dot {
border-color: var(--accent);
background: radial-gradient(circle, var(--accent) 0 45%, transparent 46%);
}
/* No number, no letter, no points. An earlier draft numbered the options 0–3 beside the text and it
turned the question into an exam: people picked the middle rather than the true one. What each
option is worth is in the file and in the report, never next to the choice. */
.exit { margin-top: 14px; }
.question .warn { margin: 16px 0 0; }
/* The warning carries a button — the other half of the clashing pair — and it has to sit under the
sentence, not at the end of it. `display: block` and not just a margin: the warning is a ``,
so the button is inline by default, and a top margin on an inline box moves nothing. It read as
a stray link tacked on to the last word. */
.warn button {
display: block;
margin-top: 10px;
}
/* ---------------------------------------------------------------------------------------------
review
--------------------------------------------------------------------------------------------- */
.review-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
/* The question on top and the answer under it, both left-aligned on the same edge. Side by side
was the first shape and it broke on a phone: a question of ninety characters beside an answer of
sixty leaves each of them four words a line. */
.review-row {
display: grid;
gap: 3px;
width: 100%;
text-align: left;
padding: 11px 13px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(127, 140, 170, 0.04);
}
button.review-row:hover { border-color: var(--border-strong); background: rgba(127, 140, 170, 0.09); }
.review-question { font-size: 14px; line-height: 1.35; }
.review-answer { font-size: 12.5px; color: var(--accent-text); }
/* A question still without an answer says so in the ordinary text colour rather than in a warning
one: at this point in the questionnaire it is a fact, not a mistake. */
.review-answer.missing { color: var(--faint); font-style: italic; }
/* One of the two answers caught in a contradiction. Marked with the same accent the warning uses,
so the review says where the problem is instead of leaving it to be found by walking. */
.review-row.clash { border-color: var(--border-strong); background: var(--accent-soft); }
/* Removed by a rule. Shown, and not clickable: hiding it would leave a hole in the sequence and
the impression that an answer had been lost. */
.review-row.off { opacity: 0.55; }
.review-row.off .review-answer { color: var(--faint); }
/* ---------------------------------------------------------------------------------------------
compliance checklist
--------------------------------------------------------------------------------------------- */
.items { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: item; }
.items li {
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(127, 140, 170, 0.04);
padding: 15px 16px;
}
.items .q { font-weight: 500; margin: 0 0 8px; font-size: 15px; }
.items .obligation { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.items .src { font-size: 12px; color: var(--faint); margin: 10px 0 0; }
.items .src a { color: var(--faint); }
.items .from { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.choices { display: flex; flex-wrap: wrap; gap: 7px; }
.choice {
font-size: 13px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(127, 140, 170, 0.06);
}
.choice[aria-pressed="true"] {
border-color: var(--accent);
color: var(--accent-text);
background: var(--accent-soft);
font-weight: 500;
}
/* ---------------------------------------------------------------------------------------------
report
--------------------------------------------------------------------------------------------- */
.report-tools { margin: 0 0 10px; }
.report-nav { margin: 0 0 22px; }
/* ---------------------------------------------------------------- la testata
Un foglio consegnato a mano deve dire cosa è prima di dire cosa ha trovato. Il filetto sotto è
l'unico spesso del documento — separa l'intestazione dal contenuto, mentre tutti gli altri
separano contenuto da contenuto — ed è il motivo per cui basta a farsi riconoscere come testata
senza aggiungere né riquadri né fondi. */
.masthead {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--text);
margin: 0 0 22px;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mast-brand {
font-family: var(--font-display);
font-size: 16px;
letter-spacing: 0;
text-transform: none;
}
.mast-what { color: var(--muted); }
/* A destra, e in tondo: è l'unica parte scritta da una persona, e il maiuscoletto spaziato su un
nome proprio lo rende più difficile da leggere invece che più autorevole. */
.mast-meta {
margin-left: auto;
color: var(--faint);
letter-spacing: 0.02em;
text-transform: none;
font-size: 11.5px;
}
.report h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
/* ---------------------------------------------------------------- il punteggio
La cifra grande è il gesto tipografico più forte del foglio, ed è anche il solo che non costa
niente in credibilità: il numero *è* il soggetto del documento. Non un cruscotto, non una lancetta
— una cifra composta, come un dato in apertura di un pezzo. */
.score {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 10px;
margin: 14px 0 18px;
}
.score-n {
font-family: var(--font-display);
font-size: 66px;
line-height: 0.86;
letter-spacing: -0.03em;
font-variant-numeric: lining-nums tabular-nums;
}
.score-of { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.band {
font-family: var(--font-display);
font-size: 19px;
color: var(--accent-text);
margin: 0 0 0 4px !important;
padding-left: 15px;
border-left: 1px solid var(--border);
}
/* Quando la fascia va a capo il filetto verticale resta appeso sotto la cifra e non separa più
niente: sotto i 470px torna a essere una riga come le altre. */
@media (max-width: 470px) {
.score-n { font-size: 52px; }
.band { border-left: 0; padding-left: 0; margin-left: 0 !important; }
}
/* Six strips, not a wheel or a radar. A radar chart of six axes is read as a shape, and the shape
flatters whichever pair of dimensions happens to sit opposite: two identical sets of numbers look
different depending on the order the axes were written in. Bars have one meaning per bar. */
.gauge { display: grid; gap: 3px; margin: 0 0 24px; grid-template-columns: repeat(6, 1fr); }
.gauge span { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.gauge span i { display: block; height: 100%; background: var(--gradient); }
.dims { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.dims li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.dims .name { font-size: 14.5px; }
/* Tabellari: le sei cifre stanno una sotto l'altra e devono formare una colonna, altrimenti il
confronto verticale — che è il motivo per cui le dimensioni si leggono prima del totale —
costa un secondo sguardo per ogni riga. */
.dims .value {
font-family: var(--font-mono);
font-size: 14px;
color: var(--accent-text);
font-variant-numeric: tabular-nums;
}
.dims .meter {
grid-column: 1 / -1;
height: 5px;
border-radius: 3px;
background: var(--border);
overflow: hidden;
}
.dims .meter i { display: block; height: 100%; background: var(--gradient); }
.dims .count { grid-column: 1 / -1; font-size: 11.5px; color: var(--faint); }
.actions { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: action; }
.actions > li {
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(127, 140, 170, 0.04);
padding: 16px 17px;
}
.actions h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 18px;
margin: 0 0 4px;
display: flex;
gap: 10px;
align-items: baseline;
}
.actions h3::before {
counter-increment: action;
content: counter(action);
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent-text);
flex: none;
}
.actions .where { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; }
.actions p { font-size: 14px; margin: 0 0 9px; }
.actions dl { margin: 12px 0 0; display: grid; gap: 5px; font-size: 13px; }
.actions dt { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.actions dd { margin: 0 0 4px; color: var(--muted); }
.gaps, .deep { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.gaps li, .deep li {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 11px 13px;
font-size: 13.5px;
}
.gaps .answer { font-size: 12px; color: var(--faint); display: block; margin-top: 5px; }
/* L'intestazione di gruppo è una riga della lista senza il riquadro: un `
` invece di un titolo
fuori, così l'ordine del documento resta quello che si legge, e uno screen reader non trova un
titolo che interrompe una lista a metà. */
/* Stesso vestito del selettore del confronto sul report: sono due tendine che fanno lo stesso
mestiere — scegliere fra cose che l'app ha in memoria — e vestirle diverse le farebbe sembrare
due meccanismi diversi. */
.pick {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 18px;
font-size: 13px;
color: var(--muted);
}
/* I due comandi del questionario stanno sotto la tendina e prima del titolo, quindi la loro aria
si somma a quella di `.pick`: il margine di 18px va tolto lì e rimesso qui, altrimenti fra il
selettore e l'occhiello si apre un buco che sulla home dell'app si nota. È la regola già scritta
per le illustrazioni degli articoli — gli spazi verticali si sommano, non si sovrappongono. */
.pick:has(+ .pack-row) {
margin-bottom: 6px;
}
.pack-row {
margin: 0 0 18px;
}
.pick select {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 8px;
font: inherit;
max-width: 280px;
}
.compare {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--muted);
}
.compare select {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 8px;
font: inherit;
max-width: 260px;
}
/* Il delta sta accanto al numero, non al posto suo: quello che conta resta il punteggio di oggi, e
la differenza è un'annotazione. Verde e rosso **più il segno**, perché il colore da solo non è
un'informazione per chi non lo distingue — e su carta non c'è. */
.dims .delta { font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 9px; }
.dims .delta.up { color: var(--accent-text); }
.dims .delta.down { color: #f0a58a; }
.dims .delta.flat { color: var(--faint); }
.actions .related {
margin: 12px 0 6px;
font-size: 12.5px;
color: var(--muted);
}
.actions .related + ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 12.5px;
color: var(--faint);
display: grid;
gap: 6px;
}
/* Il quadratino in gradiente degli elenchi del sito, non il puntino del browser: è la ricetta
scritta nel vocabolario visivo, e qui vale come su ogni altra scheda. */
.actions .related + ul li {
position: relative;
padding-left: 15px;
line-height: 1.5;
}
.actions .related + ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 5px;
height: 5px;
background: var(--gradient);
border-radius: 1px;
}
/* I link del report prendono il colore d'accento, non l'azzurro di sistema. Sulla carta il colore
sparisce e resta la sottolineatura, che con l'etichetta della fonte basta a dire cos'è. */
.actions .related + ul a,
.gaps .src a {
color: var(--accent-text);
text-decoration-color: rgba(52, 211, 153, 0.45);
text-underline-offset: 2px;
}
.gaps li.group {
border: 0;
padding: 10px 0 0;
font-family: var(--font-display);
font-size: 15px;
color: var(--text);
}
.gaps li.group:first-child { padding-top: 0; }
.gaps .q { margin: 0; }
.gaps .from {
display: block;
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: 4px;
}
.gaps .obligation { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.gaps .src { margin: 8px 0 0; font-size: 12px; color: var(--faint); }
.gaps .src .from {
display: inline;
text-transform: none;
letter-spacing: 0;
color: var(--faint);
font-size: 12px;
margin: 0;
}
.appendix { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.appendix li {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 16px;
align-items: baseline;
border-bottom: 1px solid var(--border);
padding-bottom: 7px;
font-size: 13px;
}
.appendix .q { color: var(--muted); }
.appendix .a { text-align: right; }
/* Sotto i 560px la risposta va sotto la domanda invece di stringersi in una colonna di due parole
per riga: la stessa ragione per cui le righe dei risultati salvati si impilano. */
@media (max-width: 560px) {
.appendix li { grid-template-columns: 1fr; }
.appendix .a { text-align: left; color: var(--accent-text); }
}
/* La casella sta con i comandi, quindi non si stampa: `.report-tools` è già `.no-print`. */
.toggle {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--muted);
cursor: pointer;
}
.toggle input { accent-color: var(--accent); }
.deep .q { color: var(--muted); }
.deep .a { display: block; margin-top: 4px; }
/* ---------------------------------------------------------------------------------------------
print
--------------------------------------------------------------------------------------------- */
/* The report is meant to be printed and handed to somebody who was not in the room, so the printed
page has to be the whole document: no toolbar, no app bar, no footer with a link nobody can
click on paper, and colours that survive a black-and-white printer. */
@media print {
/* **The palette is redefined, not the selectors.**
The first version listed the elements that needed a darker colour on paper, and the list was
wrong in three places at once: the floor note came out near-white on white, the dimension
scores stayed accent green — which a black-and-white printer turns into pale grey — and the
opening paragraph printed washed out. Every one of them was an element nobody had thought to
add to the list, which is the defect the approach guarantees.
Redefining the tokens fixes the elements nobody thought of too. All three selectors are needed
and each is deliberate: `html:not([data-theme])` matches the specificity of base.css's
`prefers-color-scheme` block, `html[data-theme]` matches its explicit light and dark rules, and
a bare `html` on its own would lose to both. */
html,
html[data-theme],
html:not([data-theme]) {
color-scheme: light;
--bg: #fff;
--panel: #fff;
--panel-2: #fff;
--border: #bbb;
--border-strong: #888;
--text: #000;
--muted: #333;
--faint: #555;
--trace: #666;
/* The accent becomes ink. Colour on a report is decoration, and the one thing that must
survive being faxed, photocopied or printed in grey is which number is which. */
--accent: #444;
--accent-text: #000;
--accent-soft: transparent;
--gradient: #444;
}
@page { margin: 19mm 22mm 21mm; }
/* `body > header` e non `header`. Il selettore nudo nasconde la barra dell'app — che è quello che
serve — ma anche **la testata del foglio**, che è un `` a sua volta ed è l'elemento più
importante della pagina stampata. Il documento usciva senza intestazione, e a schermo non si
vedeva niente: è il tipo di difetto che esiste solo dentro `@media print`, cioè dove nessuno
guarda finché non stampa. Un selettore di elemento nudo vale su tutto l'albero; qui la barra
dell'app è figlia diretta di `body`, e dirlo costa due caratteri. */
.no-print, body > header { display: none !important; }
/* 11pt e non 10,5: su carta il serif di testo vuole un corpo che a schermo sembrerebbe grande, e
la differenza fra un documento che si legge e uno che si decifra sta quasi tutta qui. */
body { font-size: 11pt; line-height: 1.5; }
.screen { max-width: none; padding: 0; }
/* **La misura.** Era il difetto vero, e non di gusto: su A4 la riga arrivava a circa novantacinque
caratteri, contro i sessantacinque-settantacinque che si leggono senza perdere il rigo. Nessuno
l'aveva notato perché a schermo la colonna è già stretta, e il difetto esiste solo sulla carta —
cioè esattamente dove questo documento va a finire.
Il limite sta sulla **prosa**, non sul foglio: elenchi, punteggi e appendice continuano a usare
tutta la larghezza, che è come si comporta un impaginato serio — il testo corrente ha la sua
misura, le tabelle hanno la loro. */
.sheet > p, .sheet > h1, .sheet > h2,
.actions p, .gaps .obligation, .appendix + p { max-width: 68ch; }
/* **Il serif si dà al foglio, non a un elenco di selettori.** La prima stesura nominava i posti in
cui il testo doveva diventare serif, e ne saltava tre: i nomi delle sei dimensioni, il conteggio
sotto ciascuna e le due note. In un impaginato in serif tre righe in sans non si leggono come
una scelta, si leggono come un errore — ed è lo stesso difetto, e la stessa cura, della
tavolozza di stampa poco più sopra: si ridefinisce il contenitore, non la lista.
Restano in sans le **etichette**, che è composizione voluta e non una dimenticanza: occhiello,
testata, `quanto costa`, il conteggio delle domande. Testo in serif ed etichette in sans è il
contrasto con cui si compone un documento; farle serif anche loro appiattirebbe la gerarchia
invece di renderla coerente. */
.sheet { font-family: var(--font-display); }
.kicker, .masthead .mast-what, .actions .where, .actions dt, .dims .count, .gaps .from {
font-family: var(--font);
}
/* Le note diventano un inciso con un filetto a sinistra, non una scatola arrotondata: su carta il
riquadro con il fondo grigio è la traduzione letterale di un componente da schermo. */
.note, .warn {
background: none;
border: 0;
border-left: 1.5pt solid #666;
border-radius: 0;
padding: 2pt 0 2pt 10pt;
max-width: 62ch;
}
.masthead { border-bottom-width: 1.5pt; }
.score-n { font-size: 46pt; }
/* La testata si ripete in cima a ogni pagina? No: Chrome non ha le margin box di `@page`, quindi
un folio ricorrente non si può fare. Meglio dirlo che fingerlo con un elemento fisso, che in
stampa finirebbe sovrapposto al testo. */
h1 { font-size: 22pt; }
h2 { font-size: 13pt; letter-spacing: 0.01em; }
/* The panel's gradient fill and its filament both go: on paper the raised box is a rectangle
with a rule, and a grey wash costs toner without carrying meaning. */
.card { background: none; }
.card::before { display: none; }
.gauge span, .dims .meter { background: #ddd; }
.dims .delta.up, .dims .delta.down, .dims .delta.flat { color: #000; }
/* **Filetti invece di riquadri.** A schermo la scatola separa una raccomandazione dall'altra in
una colonna che scorre; su carta la pagina è già un contenitore, e tre rettangoli con il fondo
grigio costano toner senza aggiungere una distinzione che il bianco non faccia già. Un filetto
sopra, il numero appeso nel margine sinistro: è come si compone un elenco numerato in un
impaginato, ed è anche il motivo per cui si legge come un documento invece che come schede. */
.actions > li {
border: 0;
border-top: 0.5pt solid #000;
border-radius: 0;
background: none;
padding: 9pt 0 0;
margin-left: 22pt;
}
.actions h3 { position: relative; }
.actions h3::before {
position: absolute;
left: -22pt;
font-size: 11pt;
}
.gaps li, .deep li, .appendix li {
border: 0;
border-top: 0.5pt solid #999;
border-radius: 0;
padding: 7pt 0 0;
}
.gaps li.group {
border-top: 0;
padding-top: 10pt;
font-size: 12pt;
}
/* **Due colonne, ma solo qui.** Ventidue domande brevi con la risposta accanto sono la sola parte
del foglio che ci guadagna: risparmiano una pagina e restano leggibili, perché ogni riga è
un'unità che sta in poche parole. Ovunque altro le colonne farebbero danno — una raccomandazione
spezzata a metà colonna perde la parte che dice come capire se ha funzionato, e `break-inside`
su blocchi alti lascia buchi grandi quanto quello che dovrebbe risparmiare.
`column-fill: auto` riempie la prima colonna prima di passare alla seconda, invece di
bilanciarle: su una lista ordinata la lettura scende, gira e riscende, e una coda bilanciata
spezzerebbe l'ordine in fondo a ogni pagina. */
/* `display: block` **prima** di `columns`, e non è pignoleria: a schermo `.appendix` è una griglia,
e un contenitore a griglia ignora il multicolonna in silenzio. Le colonne risultavano dichiarate
— `columnCount` diceva 2 — e il contenuto restava in una colonna sola, larga quanto il foglio.
Nessun errore, nessun avviso: la regola c'era e non faceva niente. */
.appendix {
display: block;
columns: 2;
column-gap: 9mm;
column-fill: auto;
}
/* Le righe tornano a impilarsi come sul telefono: dentro una colonna da 78mm la risposta allineata
a destra si ridurrebbe a due parole per riga. Stessa forma, stessa ragione, altra larghezza. */
.appendix li {
display: block;
break-inside: avoid;
font-size: 9.5pt;
margin-bottom: 4pt;
}
.appendix .q, .appendix .a { display: block; }
.appendix .a { text-align: left; font-style: italic; }
/* Nothing gets orphaned from what explains it: a recommendation split across a page break loses
the half that says how you would know it worked. */
.actions li, .gaps li, .deep li, .items li, .appendix li { break-inside: avoid; }
h2 { break-after: avoid; }
}
/* La riga di paginazione dei risultati salvati: il contatore fra le due frecce, e niente spazio
sprecato ai lati — è una didascalia con due comandi, non una barra degli strumenti. */
.saved-nav {
margin: 14px 0 0;
gap: 12px;
align-items: baseline;
}
/* ---------------------------------------------------------------------------------------------
modal
--------------------------------------------------------------------------------------------- */
/* Un `