` per coerenza con le altre tabelle
dell'app, ma non porta stile: lo stile è tutto qui, su una classe che
riguarda solo questa matrice. --- */
.heatmap-scroll {
overflow: auto;
max-height: min(72vh, 40rem);
}
/* `table-layout: fixed` e non `auto`, ed è la riga che tiene in piedi tutta
la matrice. Con la disposizione automatica la larghezza di una colonna la
detta il suo **contenuto più largo**, che qui non è mai la cella — una
cifra sola — ma l'intestazione: «P· LETTURA» è lunga il doppio di «TIRO»,
e la colonna la seguiva. Ne usciva una griglia di rettangoli di sette
misure diverse in cui la dimensione della cella sembrava voler dire
qualcosa, mentre dipendeva soltanto da quanto è lungo il nome dell'area.
In una matrice il posto di un valore è già un'informazione: se anche la
sua forma varia, l'occhio legge una differenza che non c'è.
Con la disposizione fissa comandano le larghezze dichiarate sulla prima
riga — la riga d'intestazione — e il contenuto non le sposta più. Quel
che cambia in cambio: un'intestazione più larga della sua colonna va a
capo invece di allargarla, ed è il motivo per cui qui sotto `.heatmap-area`
perde il `nowrap` che aveva.
`width: max-content` non è decorativo e non si tolga: con la larghezza
**automatica** Chrome determina prima la larghezza della tabella con
l'algoritmo normale — cioè guardando i contenuti — e le colonne tornavano
disuguali nonostante `table-layout: fixed`, misurate fra 52 e 68 px. Con
`max-content` la larghezza della tabella è per definizione la somma delle
colonne dichiarate, e le dichiarazioni valgono davvero. Se la somma non
sta nella pagina, scorre: `.heatmap-scroll` e le colonne appiccicate
esistono per quello. */
.heatmap-table {
table-layout: fixed;
width: max-content;
border-collapse: separate;
border-spacing: 2px;
font-variant-numeric: tabular-nums;
/* Larghezza di riferimento della colonna anagrafica: la usano sia la
cella del numero sia lo scostamento a cui si ancora quella del nome.
Un solo posto da cambiare, altrimenti fra le due si apre una fessura
larga quanto l'errore. */
--heatmap-num-w: 3rem;
/* La colonna del nome ha una misura sua, dichiarata: con la disposizione
fissa nessuna colonna può più crescere da sé, nemmeno questa. Undici
rem tengono «Arthur Jimmy Giabardo» (163 px misurati) più lo spazio
che lo stacca dal filetto; oltre, il nome si accorcia con i puntini
invece di invadere la prima area. */
--heatmap-name-w: 11rem;
/* La misura unica di **tutte** le colonne di valutazione. Non nasce dalla
cella, che di suo starebbe in molto meno, ma dall'intestazione più
larga che non si può mandare a capo: «ATTEGGIAM.» è una parola sola, e
una parola sola è il pavimento sotto cui questa misura non può
scendere. Le altre intestazioni lunghe («P· BASTONE», «P· LETTURA»)
hanno uno spazio e si spezzano in due righe.
Sessanta pixel: «ATTEGGIAM.» ne misura 55,4 alla spaziatura ridotta di
qui sotto. Con questa misura, quattordici aree più l'anagrafica fanno
1098 px e stanno dentro i 1102 della card sul monitor su cui è stata
provata — di poco, e di proposito: allargarla anche solo di un gradino
fa comparire una barra di scorrimento su una tabella che ci starebbe. */
--heatmap-col-w: 3.75rem;
}
/* Sfondo pieno su tutto ciò che è appiccicato, e non è pignoleria: con
`border-collapse: separate` una cella non ha un fondo di riga da cui
ereditare, e una `th` trasparente lascia vedere in trasparenza le righe
che le passano sotto.
L'ombra senza sfocatura e con due pixel di espansione serve al problema
gemello: `border-spacing: 2px` lascia due pixel di **vuoto** fra una
cella e l'altra, e in quel vuoto passerebbe il contenuto che scorre. Due
pixel di espansione nel colore della superficie chiudono la fessura su
tutti e quattro i lati senza invadere la cella vicina, che comincia
esattamente dove l'ombra finisce. */
.heatmap-table thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--color-surface);
box-shadow: 0 0 0 2px var(--color-surface);
font: var(--type-thead);
letter-spacing: var(--type-thead-ls);
text-transform: uppercase;
text-align: left;
vertical-align: bottom;
padding-bottom: var(--space-1);
}
.heatmap-corner,
.heatmap-num {
width: var(--heatmap-num-w);
}
/* Le larghezze che la disposizione fissa legge: stanno tutte sulla riga
d'intestazione, perché è quella la riga che decide. */
.heatmap-table thead .heatmap-name {
width: var(--heatmap-name-w);
}
.heatmap-area {
width: var(--heatmap-col-w);
}
/* Le due celle dell'anagrafica restano ancorate a sinistra: scorrendo verso
destra per arrivare alle ultime aree si deve continuare a vedere *di chi*
si sta leggendo la riga. Lo scostamento del nome è la larghezza del
numero più i quattro pixel di `border-spacing` che stanno prima e dopo. */
.heatmap-num,
.heatmap-table tbody .heatmap-name {
position: sticky;
z-index: 2;
background: var(--color-surface);
box-shadow: 0 0 0 2px var(--color-surface);
}
.heatmap-num {
left: 0;
}
.heatmap-table .heatmap-name {
left: calc(var(--heatmap-num-w) + 4px);
}
/* Gli angoli in alto a sinistra sono appiccicati su tutti e due gli assi, e
devono stare sopra sia alla riga d'intestazione sia alla colonna dei
nomi: quando si scorre in diagonale sono l'unica cosa che si sovrappone
a entrambe. */
.heatmap-table thead .heatmap-corner,
.heatmap-table thead .heatmap-name {
position: sticky;
z-index: 4;
}
.heatmap-table thead .heatmap-corner {
left: 0;
}
.heatmap-area {
/* Le intestazioni ruotate sono illeggibili su schermi piccoli e in
stampa: si abbrevia il testo e il nome intero resta nel `title`. */
writing-mode: horizontal-tb;
color: var(--color-text-muted);
/* Niente `nowrap`: con la disposizione fissa un'intestazione che non ci
sta va a capo, e andare a capo è esattamente quel che deve fare —
prima allargava la colonna, e la colonna si portava dietro la cella. */
padding: 0 0 var(--space-1);
text-align: center;
line-height: 1.15;
/* Spaziatura più stretta della `--type-thead-ls` di regola, e solo qui.
A 0,07em «ATTEGGIAM.» misura 59 px e obbligherebbe **tutte** e
quattordici le colonne a 68, portando la tabella a 1250 px e a una
barra di scorrimento su un monitor che la conterrebbe. Il maiuscoletto
regge una spaziatura minore senza chiudersi; una colonna in più da
scoprire scorrendo no. */
letter-spacing: 0.04em;
}
/* Il nome del giocatore è un `
`, ma è il soggetto della
riga, non la sua etichetta di colonna: prende il ruolo di un nome. Il
filetto a destra separa l'anagrafica dal blocco delle valutazioni — due
cose che si leggono in modo diverso, una per parole e una per colore. */
.heatmap-name {
font: var(--type-body-strong);
text-align: left;
white-space: nowrap;
/* La colonna ha ora una larghezza dichiarata, e un nome più lungo non la
allarga più: senza questi due, traboccherebbe sulla prima area invece
di fermarsi. I puntini sono un ripiego che non dovrebbe mai vedersi —
il nome intero resta comunque nel link. */
overflow: hidden;
text-overflow: ellipsis;
padding-right: var(--space-2);
border-right: 1px solid var(--color-border);
}
.heatmap-cell {
/* Nessuna larghezza qui: con la disposizione fissa la detta la riga
d'intestazione, e dichiararla due volte in due posti diversi vuol dire
soltanto avere due numeri da tenere d'accordo. */
height: 2.25rem;
text-align: center;
border-radius: var(--radius-sm);
font: var(--type-figure-cell);
/* Dopo la scorciatoia, mai prima: `font` azzera `font-variant-numeric`
anche quando era ereditato dalla tabella. */
font-variant-numeric: tabular-nums;
}
.heatmap-cell-empty { background: var(--lvl-empty); }
/* «Non pertinente» è un'altra cosa da «non ancora valutata», e la
differenza non può essere un grigio un po' più chiaro: due grigi vicini
si distinguono solo affiancandoli, e nella matrice non capita mai.
Il tratteggio si riconosce da solo, anche in fotocopia. */
.heatmap-cell-na {
background-color: var(--lvl-na);
/* Righe sottili e rade: è una campitura, non una barratura. */
background-image: repeating-linear-gradient(
45deg,
var(--lvl-na-line) 0 1.5px,
transparent 1.5px 9px
);
color: var(--color-text-muted);
font: var(--type-figure-cell);
font-variant-numeric: tabular-nums;
}
/* --- §6.3: piccoli multipli ---------------------------------------------
Quattordici riquadri piccoli invece di quattordici serie colorate su un
grafico solo: oltre le sette-otto serie i colori non si distinguono più.
Ogni riquadro porta sotto la sua tabella con i valori esatti, che è anche
la sua versione leggibile a voce.
(v1.29) Colonne fisse e non più `auto-fill`: con `auto-fill` era la
griglia a decidere quante colonne ci stessero, e su un monitor largo ne
metteva cinque o sei da 13rem — riquadri in cui due barre affiancate
diventano due strisce e la tabella dei valori va a capo. Quattro è il
numero su cui i mockup sono disegnati, ed è il massimo con cui la riga
«Livello 1 2 3 4 n.v.» sta ancora su una riga sola. --- */
.small-multiples {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
@media (min-width: 36rem) {
.small-multiples {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 75rem) {
.small-multiples {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.small-multiple {
margin: 0;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.small-multiple-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.small-multiple-title {
margin: 0;
min-width: 0;
font: var(--type-title);
}
/* --- Il badge di tendenza -------------------------------------------------
Verde, grigio, rosso: sono gli unici tre stati e non una scala, quindi i
colori di stato dell'app bastano — nessuna tinta nuova. La freccia sta
**prima** della parola e non al posto suo: il verso non deve vivere solo
nella tinta, e chi non distingue il verde dal rosso legge «Migliora».
La freccia arriva già formata da Rust (↗ ↘ →) e quei tre segni cadono
fuori dal subset imbarcato di Barlow: li disegna il carattere di sistema.
È accettabile perché sono segni geometrici e non lettere — accanto a un
glifo condensato non stonano — ed è un altro motivo per cui la parola c'è
sempre. --- */
.trend-badge {
flex: none;
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-pill);
font: var(--type-label);
letter-spacing: var(--type-label-ls);
white-space: nowrap;
}
.trend-arrow {
line-height: 1;
}
.trend-migliora { background: var(--color-ok-bg); color: var(--color-ok-text); }
.trend-stabile { background: var(--color-bg); color: var(--color-text-muted); }
.trend-peggiora { background: var(--color-danger-bg); color: var(--color-danger-text); }
.stack-row {
display: flex;
align-items: flex-end;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.stack {
flex: 1 1 0;
min-width: 0;
}
/* Barre larghe e non colonnine: il numero dei giocatori sta **dentro** il
segmento, e per starci il segmento deve essere largo quanto una parola.
Con due rilevazioni la coppia riempie il riquadro; con cinque si
stringono tutte insieme, ed è il momento in cui la tabella sotto smette
di essere una ridondanza. */
.stack-bar {
display: flex;
flex-direction: column;
height: 5.5rem;
background: var(--lvl-empty);
border-radius: var(--radius-sm);
overflow: hidden;
}
.stack-segment {
display: flex;
align-items: center;
justify-content: center;
/* Un giocatore su quattordici è un segmento alto sei pixel: la cifra non
ci sta, e una barra con dei numeri e dei buchi si legge peggio di una
barra senza numeri. Il minimo è l'altezza di una riga di testo. La
distorsione che introduce è dichiarata dalla tabella qui sotto, che
porta gli stessi numeri senza nessuna scala di mezzo. */
min-height: 1.25rem;
font: var(--type-figure-cell);
font-variant-numeric: tabular-nums;
}
/* Sotto la barra il **periodo**, in maiuscoletto: fra due barre affiancate
la domanda è in che mese si sta guardando, non come quella rilevazione
era stata chiamata — il nome scelto dall'allenatore vive nel `title` del
gruppo. Troncamento da `.t-clip`. */
.stack-label {
margin-top: var(--space-2);
font: var(--type-eyebrow);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--color-text-muted);
text-align: center;
}
.stack-table {
width: 100%;
border-collapse: collapse;
font: var(--type-caption);
font-variant-numeric: tabular-nums;
}
.stack-table th,
.stack-table td {
padding: var(--space-1);
text-align: right;
border-bottom: 1px solid var(--color-border);
}
.stack-table thead th {
font: var(--type-thead);
font-variant-numeric: tabular-nums;
letter-spacing: var(--type-thead-ls);
text-transform: uppercase;
color: var(--color-text-muted);
}
.stack-table thead th:first-child,
.stack-table th[scope="row"] {
text-align: left;
}
/* Troncamento da `.t-clip`. */
.stack-table th[scope="row"] {
font: var(--type-caption);
font-variant-numeric: tabular-nums;
color: var(--color-text-muted);
max-width: 7rem;
}
/* L'ultima riga non porta filetto: sotto non c'è niente da separare, e la
riga chiusa fa sembrare la tabella troncata. */
.stack-table tbody tr:last-child th,
.stack-table tbody tr:last-child td {
border-bottom: 0;
}
/* --- §6.5: riquadri di sintesi ------------------------------------------
L'unica superficie di queste viste che porta il colore di **famiglia** del
tema, e può portarlo perché qui non c'è nessun livello colorato con cui
confondersi. Il colore sta sul filetto e sul nome del tema, non a
riempire un rettangolo: qui identifica un tema, e un rettangolo pieno si
leggerebbe come uno stato.
(v1.29) L'ordine di lettura è cambiato, ed è tutto il senso della
revisione: prima il nome dell'area, poi la frazione grande, poi sei
parole che dicono di che cosa è la frazione, poi il bottone. La frase
lunga che c'era prima («4 giocatori su 12 valutati sono ancora sotto
Applicare») era giusta ma andava letta tutta per arrivare al numero, e
queste tre card si guardano di sfuggita per decidere quale toccare. --- */
.summary-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: var(--space-3);
margin: var(--space-4) 0;
}
.summary-card {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--fam, var(--color-primary));
border-radius: var(--radius-md);
padding: var(--space-3);
}
.summary-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-2);
}
.summary-area {
margin: 0;
font: var(--type-eyebrow);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--fam, var(--color-text));
}
/* La quota in percentuale, nell'angolo. Pastiglia **neutra** e non in tinta
di famiglia come nel mockup: tre delle sette famiglie sono tinte chiare
(giallo, arancio, rosa), e un «33 %» giallo su fondo giallo diluito, a
12 px, non si legge. Il colore di famiglia resta dove porta un
significato — il filetto e il nome dell'area — e qui non manca a
nessuno: la pastiglia è già identificata dalla card che la contiene. */
.summary-share {
flex: none;
padding: 2px var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-bg);
color: var(--color-text-muted);
font: var(--type-eyebrow);
font-variant-numeric: tabular-nums;
letter-spacing: var(--type-eyebrow-ls);
}
/* La frazione, non il solo numeratore: «4» da solo non dice niente, «4 / 12»
è già un giudizio. Tabulari perché le tre card si leggono in fila e i
numeri devono incolonnarsi anche quando non stanno in una colonna. */
.summary-figure {
margin: var(--space-2) 0 0 0;
font: var(--type-figure);
font-variant-numeric: tabular-nums;
}
.summary-note {
margin: 0 0 var(--space-3) 0;
font: var(--type-caption);
color: var(--color-text-muted);
}
.summary-note strong {
font: var(--type-label);
letter-spacing: var(--type-label-ls);
color: var(--color-text);
}
/* Il bottone pieno, a tutta larghezza della card, con la freccia appoggiata
al bordo destro. `margin-top: auto` lo incolla al fondo: le tre card
hanno nomi di area di lunghezza diversa, e senza questa riga i tre
bottoni finirebbero a tre altezze diverse — una fila di bersagli che non
sono in fila.
L'altezza minima di 44px arriva da `.btn` e non va ridotta: è il
bersaglio da pollice. Il corpo scende invece a quello del bottone piccolo
perché «Pianifica una seduta su Lettura del gioco e transizione» dentro
17rem, a 16 px, sono tre righe. */
.summary-cta {
margin-top: auto;
width: 100%;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
font: var(--type-button-sm);
text-align: left;
}
.summary-cta-arrow {
flex: none;
}
/* --- Avanzamento di una rilevazione -------------------------------------- */
.progress-bar-col {
width: 30%;
min-width: 6rem;
}
.progress-track {
height: 0.5rem;
background: var(--lvl-empty);
border-radius: var(--radius-pill);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--color-primary);
}
/* --- Il form di compilazione --------------------------------------------
Le scelte di livello sono radio e non una tendina: cinque bersagli
visibili si toccano con il pollice a bordo pista, una tendina va aperta.
La prima opzione è «non valutata», che è anche il valore iniziale — il
form non deve mai suggerire un livello per riempire un vuoto. */
.area-block {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
margin-bottom: var(--space-4);
}
.area-block > legend {
font: var(--type-label);
letter-spacing: var(--type-label-ls);
padding: 0 var(--space-2);
}
.level-choice {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.level-option {
margin: 0;
cursor: pointer;
}
/* Il radio nativo resta nel DOM (accessibilità, tastiera, `:focus-visible`)
ma non si vede: è il chip a fare da bersaglio, con un'area di tocco
generosa come il resto dell'app. */
.level-option input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
/* La scelta non selezionata è **desaturata**, non sbiadita: `opacity`
avrebbe fatto sfumare anche il testo verso lo sfondo della pagina, e sul
passo più scuro della rampa il bianco sarebbe sceso attorno a 2:1.
`grayscale` cambia la tinta lasciando intatto il rapporto di luminanza
fra testo e fondo, quindi tutte e cinque le opzioni restano leggibili e
quella scelta si riconosce dal colore *e* dal bordo — mai dal solo
colore. */
.level-chip {
display: inline-block;
padding: var(--space-2) var(--space-3);
min-height: 2.75rem;
line-height: 1.5rem;
border-radius: var(--radius-pill);
border: 2px solid transparent;
font: var(--type-body-strong);
filter: grayscale(0.85);
}
.level-chip-empty {
background: var(--lvl-empty);
color: var(--color-text-muted);
}
.level-option input:checked + .level-chip {
filter: none;
border-color: var(--color-text);
font-weight: 700;
}
.level-option input:focus-visible + .level-chip {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
.level-option input:disabled + .level-chip {
cursor: default;
}
.area-note {
display: block;
}
.sub-skills > summary {
cursor: pointer;
font: var(--type-title);
color: var(--color-text-muted);
padding: var(--space-2) 0;
}
.sub-skill-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: var(--space-2);
}
.sub-skill {
font: var(--type-body);
margin: 0;
}
.scale-help {
margin-bottom: var(--space-4);
}
.scale-help > summary {
cursor: pointer;
font: var(--type-label);
letter-spacing: var(--type-label-ls);
padding: var(--space-2) 0;
}
.scale-list dt {
font: var(--type-label);
letter-spacing: var(--type-label-ls);
margin-top: var(--space-2);
display: flex;
align-items: center;
gap: var(--space-2);
}
.scale-list dd {
margin: 0 0 0 1.5rem;
color: var(--color-text-muted);
}
.player-pager {
display: flex;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-4);
}
.player-pager-next {
margin-left: auto;
}
/* --- Stampa --------------------------------------------------------------
La scheda del singolo giocatore si stampa per il colloquio con i genitori
(§8: si esporta il singolo, mai la matrice di squadra). I colori di sfondo
vanno forzati, altrimenti la rampa sparisce e restano barre bianche. */
@media print {
.profile-bar,
.heatmap-cell,
.stack-segment,
.dumbbell-dot,
.ramp-swatch,
.level-chip {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Il riquadro che scorre non ha senso su carta, e lasciarlo com'è
stamperebbe la sola porzione visibile della matrice tagliando il resto.
Le posizioni appiccicate vanno sciolte per la ragione gemella: su carta
non c'è niente da cui staccarsi, e un'intestazione `sticky` in stampa
esce sovrapposta alle prime righe. */
.heatmap-scroll {
overflow: visible;
max-height: none;
}
.heatmap-table thead th,
.heatmap-table .heatmap-name,
.heatmap-table .heatmap-num {
position: static;
box-shadow: none;
}
/* Su schermo la tabella è larga quanto le sue colonne dichiarate e, se
non ci sta, scorre. Su carta non c'è niente da far scorrere: la stessa
regola stamperebbe la parte sinistra e taglierebbe il resto al margine.
`width: 100%` con la disposizione **ancora fissa** lascia al foglio il
compito di stringere le colonne, e le stringe tutte nella stessa
proporzione — che è il punto: le celle restano uguali fra loro anche
quando sono più strette che a monitor. Con `table-layout: auto`
tornerebbero a inseguire la lunghezza dell'intestazione. */
.heatmap-table {
width: 100%;
}
/* Il tratteggio del «non pertinente» è un `background-image`, quindi
`print-color-adjust: exact` più sopra lo porta sul foglio insieme ai
fondi pieni. Se un driver lo mangia comunque resta il punto in mezzo
alla cella, che è il motivo per cui il punto c'è. */
/* Un bottone stampato è inchiostro speso per una cosa che non si può
toccare (VISION §9). */
.summary-cta,
.player-pager {
display: none;
}
}
/* --- (v1.25) Tabella di inserimento rapido del roster ---------------------
Il roster si compila una volta l'anno, tutto insieme, con la lista della
società di fianco. Le celle sono strette perché la tabella deve stare in
una schermata: se per vedere l'ultima riga bisogna scorrere, si perde il
colpo d'occhio che è il motivo per cui la pagina esiste. */
.quick-add-table input[type="text"],
.quick-add-table input[type="number"],
.quick-add-table select {
width: 100%;
min-width: 0;
padding: var(--space-1) var(--space-2);
}
.quick-add-table input[type="number"] {
/* Anno, mese e maglia sono al massimo quattro cifre: lasciarli larghi
quanto i cognomi ruberebbe spazio proprio alle colonne che ne hanno
bisogno. */
max-width: 6.5ch;
}
.quick-add-table td,
.quick-add-table th {
padding: var(--space-1) var(--space-2);
}
/* Il numero di riga. Non è decorativo: è il numero che i messaggi d'errore
usano per dire quale riga correggere («riga 7: manca l'anno di nascita di
Marco Bernasconi»), e senza averlo davanti quel messaggio non aiuta. */
.quick-add-num {
width: 2.5rem;
text-align: right;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
/* Le tre caselle dei ruoli su una riga sola: a U12 più di un ruolo è la
norma, non l'eccezione, quindi si spuntano spesso in due. */
.quick-add-roles {
white-space: nowrap;
}
.quick-add-roles label {
display: inline-flex;
align-items: center;
gap: 0.15rem;
margin-right: var(--space-2);
font: var(--type-label);
letter-spacing: var(--type-label-ls);
}
/* La riga di riempimento. Sfondo diverso dalle righe dati perché non è una
riga di dati: niente di ciò che si scrive qui viene salvato da solo. */
.quick-add-fill td {
background: var(--color-surface-2, var(--color-bg));
border-bottom: 2px solid var(--color-border);
vertical-align: middle;
}
.quick-add-fill-label {
font: var(--type-eyebrow);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--color-text-muted);
text-align: right;
}
.quick-add-fill select {
max-width: 11ch;
margin-right: var(--space-1);
}
/* La riga che non passa e il suo motivo, subito sotto. Il colore da solo non
basterebbe — chi distingue male i rossi vedrebbe quattordici righe uguali —
quindi il messaggio è scritto per esteso sotto la riga che lo riguarda, e
il bordo a sinistra serve a ritrovarla scorrendo. */
.quick-add-row-error td {
background: var(--color-danger-bg);
}
.quick-add-row-error td:first-child {
box-shadow: inset 3px 0 0 var(--color-danger-border);
}
.quick-add-error-message td {
padding-top: 0;
color: var(--color-danger-text);
background: var(--color-danger-bg);
font: var(--type-caption);
}
/* (v1.27) La riga che chiede «è lui?». Colore diverso dall'errore ed è
voluto: non c'è niente di sbagliato in quello che è stato scritto, manca
una risposta che solo chi conosce il gruppo può dare. */
.quick-add-question td {
padding-top: 0;
background: var(--color-info-bg, var(--color-surface-2, var(--color-bg)));
font: var(--type-caption);
}
.quick-add-question select {
margin-left: var(--space-2);
max-width: 28ch;
}
/* --- (v1.25) Un'area, tutta la squadra -----------------------------------
La trasposta del form per giocatore: quattordici righe con la stessa scala
ripetuta. I chip qui portano il solo numero di livello — il nome per esteso
moltiplicato per quattordici righe riempirebbe lo schermo di parole
identiche, e la legenda in cima più il `title` di ogni chip dicono già cosa
significano. Il numero resta perché la scala è ordinale e l'ordine è
l'informazione. */
.level-choice-compact {
flex-wrap: nowrap;
gap: var(--space-1);
margin-bottom: 0;
}
.level-choice-compact .level-chip {
/* Quadrato e non pillola: cinque bersagli per riga per quattordici righe,
e la pillola larga li porterebbe fuori schermo. L'altezza resta quella
degli altri bersagli dell'app — a bordo pista si tocca col pollice, non
col mouse. */
min-width: 2.75rem;
padding: var(--space-2) 0;
text-align: center;
border-radius: var(--radius-sm);
}
.area-grid td {
vertical-align: middle;
}
.area-grid-name {
display: block;
font: var(--type-title);
}
/* L'anno e il mese sotto il nome. Piccoli e in grigio perché sono contesto,
non un dato da confrontare: servono a ricordare, mentre si guarda una
colonna di livelli, che fra gennaio e dicembre ci sono undici mesi di
sviluppo (§2.3). */
.area-grid-age {
display: block;
font: var(--type-eyebrow);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--color-text-muted);
}
.area-grid-note input[type="text"] {
width: 100%;
min-width: 14rem;
padding: var(--space-1) var(--space-2);
}
.area-grid-details {
display: block;
margin-top: var(--space-1);
font: var(--type-caption);
color: var(--color-text-muted);
}
/* I due link fra un'area e la successiva. Larghi e in fondo: si arriva qui
dopo aver percorso quattordici righe, e la cosa che serve subito dopo è
l'area seguente. */
.pager {
display: flex;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-4);
}
.pager:has(> :only-child) {
/* Una sola freccia — prima o ultima area — non deve stare al centro né
saltare da un lato all'altro: resta dove starebbe se ci fossero
entrambe. */
justify-content: flex-start;
}
.pager > :last-child:not(:only-child) {
margin-left: auto;
}
/* --- (v1.25) Selettore della passata: area o una delle sue sotto-voci -----
Non è una modalità diversa, è la stessa tabella con una lente più stretta:
quello che si osserva davvero è un'esercitazione di incroci, non «il
pattinaggio». Un elenco di link e non un menu a tendina, perché le voci
sono al massimo sette e si vogliono vedere tutte insieme — un menu
chiederebbe un click per sapere cosa c'è dentro. */
.sub-switch {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.sub-switch-label {
font: var(--type-eyebrow);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--color-text-muted);
}
.sub-switch-option {
padding: var(--space-1) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
font: var(--type-label);
letter-spacing: var(--type-label-ls);
text-decoration: none;
color: var(--color-text);
}
/* La passata attiva si riconosce dal fondo pieno *e* dal bordo, non dal solo
colore: `aria-current` la dice a chi non vede la differenza di tinta. */
.sub-switch-option.is-current {
background: var(--color-chip-bg);
border-color: var(--color-chip-border);
color: var(--color-chip-text);
font: var(--type-label);
letter-spacing: var(--type-label-ls);
}
/* Il nome della sotto-voce nel titolo, dopo quello dell'area: più leggero,
perché è la lente e non il soggetto. */
.area-sub-title {
color: var(--color-text-muted);
font: var(--type-title);
}
/* Riga senza livello d'area: al posto dei chip, il motivo. Controlli che non
salvano sarebbero peggio di nessun controllo. */
/* Il livello d'area accanto al nome durante una passata su una sotto-voce:
contesto, quindi discreto, ma non invisibile — è il giudizio che si sta
approfondendo. */
.area-grid-context {
font: var(--type-caption);
color: var(--color-text);
}
.area-grid-blocked {
font: var(--type-caption);
color: var(--color-text-muted);
}
/* --- (v1.25) Scheda del singolo giocatore ---------------------------------
§8 del requisito: se serve condividere qualcosa in un colloquio si esporta
la scheda del singolo, mai la matrice di squadra.
Fuori da `@media print`, come il foglio G+S della seduta e per lo stesso
motivo (§10bis... no: ARCHITECTURE.md §7.8septies): è la **visibilità** a
decidere quando il foglio si vede — in stampa sempre, a schermo solo in
anteprima — non il fatto che le regole esistano. Tutti i selettori sono
`.player-sheet-*`, quindi finché `.print-only` resta `display: none` a
schermo non cambia niente.
Unità in `pt` e `cm`: sono unità fisiche e valgono anche a schermo
(1cm CSS = 96dpi/2.54), ed è la ragione per cui l'anteprima può essere
fedele senza una seconda resa. */
.player-sheet {
font: var(--typep-body);
line-height: 1.4;
color: #000;
}
.player-sheet-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1cm;
margin-bottom: 10pt;
padding-bottom: 8pt;
border-bottom: 1pt solid #000;
}
/* 6cm e non a tutta pagina: il logo ha il fondo nero, e una fascia larga
21cm sarebbe mezza cartuccia spesa per una riga di identità. */
.player-sheet-logo {
width: 6cm;
height: auto;
display: block;
}
.player-sheet-meta {
text-align: right;
font: var(--typep-caption);
color: #444;
}
.player-sheet-name {
display: flex;
align-items: center;
gap: 8pt;
margin: 0 0 6pt;
font: var(--typep-screen);
line-height: 1.1;
}
.player-sheet-number {
display: inline-block;
min-width: 1.5em;
padding: 1pt 5pt;
border: 1.5pt solid #000;
border-radius: 3pt;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Anagrafica su due colonne che scorrono: etichetta grigia, valore nero.
`dl` e non una tabella perché sono coppie nome/valore, ed è la struttura
che una tecnologia assistiva legge come tali. */
.player-sheet-id {
display: grid;
grid-template-columns: auto 1fr;
gap: 2pt 10pt;
margin: 0 0 10pt;
}
.player-sheet-id dt {
color: #555;
font: var(--typep-eyebrow);
letter-spacing: var(--typep-eyebrow-ls);
}
.player-sheet-id dd {
margin: 0;
}
.player-sheet-note {
margin: 0 0 10pt;
padding: 5pt 7pt;
border-left: 2pt solid #000;
font: var(--typep-caption);
}
.player-sheet-section {
margin: 12pt 0 5pt;
font: var(--typep-section);
/* Il titolo non deve restare da solo in fondo a una pagina con la sua
tabella che comincia sulla successiva. */
break-after: avoid;
page-break-after: avoid;
}
.player-sheet-table {
width: 100%;
border-collapse: collapse;
font: var(--typep-body);
}
.player-sheet-table th,
.player-sheet-table td {
text-align: left;
vertical-align: top;
padding: 3pt 6pt 3pt 0;
border-bottom: 0.5pt solid #bbb;
}
.player-sheet-table thead th {
border-bottom: 1pt solid #000;
font: var(--typep-eyebrow);
letter-spacing: var(--typep-eyebrow-ls);
text-transform: uppercase;
color: #444;
}
/* La barra **e** l'etichetta del livello, non l'una o l'altra: su carta in
bianco e nero la rampa di colore non sopravvive, la lunghezza sì, e il
testo regge da solo se anche quella si perde. */
.player-sheet-bar-track {
display: inline-block;
width: 2.2cm;
height: 7pt;
margin-right: 5pt;
border: 0.5pt solid #999;
vertical-align: middle;
}
/* Il riempimento lo porta la classe `.lvl-N` della rampa ordinale, come nel
profilo a schermo: una sola tabella di colori per una sola scala. Qui
c'era `background: currentColor`, che essendo scritto dopo vinceva sulla
rampa e lasciava la barra vuota — la classe c'era ma non si vedeva.
`print-color-adjust: exact` perché senza, molti browser stampano gli
sfondi come bianco e la barra sparirebbe sul foglio. Non è decorazione: la
lunghezza è il livello. Il livello è comunque scritto per esteso accanto,
quindi anche una stampante che ignorasse tutto lascia la scheda leggibile. */
.player-sheet-bar {
display: block;
height: 100%;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.player-sheet-empty {
color: #777;
}
.player-sheet-free-note {
margin: 0;
font: var(--typep-caption);
}
.player-sheet-foot {
margin-top: 14pt;
padding-top: 5pt;
border-top: 0.5pt solid #999;
font: var(--typep-caption);
color: #555;
}
/* In anteprima il foglio è A4 esatto, con i margini di `@page` resi come
padding — stesso trattamento del foglio G+S. */
.sheet-preview .player-sheet {
box-sizing: border-box;
width: 21cm;
min-height: 29.7cm;
padding: 1.2cm 1.5cm;
margin: 0 auto;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
/* --- (v1.26, PIANO-CATEGORIE.md Fase 2) Categorie d'età --- */
/* La fonte di ogni categoria, sotto la tabella. Corpo piccolo e a due
colonne su schermo largo: è la riga che si legge una volta e poi mai più,
ma che serve a chi fra due anni deve decidere se fidarsi dei numeri. */
.category-sources {
margin: var(--space-4) 0 0;
font: var(--type-caption);
color: var(--color-text-muted);
}
.category-sources dt {
font-weight: 600;
}
.category-sources dd {
margin: 0 0 var(--space-2);
}
/* Le due fasce di ammissione stanno affiancate, e la larghezza le tiene
insieme: separate da un a-capo smetterebbero di leggersi come coppia. */
.admission-pair {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.admission-pair > * {
flex: 1 1 12rem;
}
/* (v1.26, PIANO-CATEGORIE.md Fase 3b) L'avviso di fascia d'età. Corpo
piccolo e a capo sotto il nome: è un'informazione da leggere una volta e
poi confermare, non un errore da correggere — un ragazzo fuori fascia si
tessera lo stesso, motivando. */
.admission-warning {
display: block;
font: var(--type-caption);
color: var(--color-warning-text);
}
/* --- (v1.26, Fase 5) La vista persona --- */
/* Le stagioni in fila. Numerata nel markup (``) perché è una sequenza
temporale, ma senza i numeri a schermo: contarle non serve a nessuno, e
una carriera non è una classifica. */
.person-timeline {
list-style: none;
padding: 0;
margin: 0;
}
.person-season {
border-left: 3px solid var(--color-border);
padding: 0 0 var(--space-4) var(--space-4);
margin: 0;
}
.person-season:last-child {
padding-bottom: 0;
}
.person-season-head h2 {
margin: 0;
font: var(--type-title);
}
.person-season-team {
margin: 0 0 var(--space-1);
}
.person-assessments {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
}
.person-assessments li {
padding: var(--space-1) 0;
border-bottom: 1px solid var(--color-border);
}
.person-assessments li:last-child {
border-bottom: none;
}
/* Le righe di contesto — ruolo e stato di una stagione, data e squadra di
una rilevazione — vanno a capo sotto il nome. Inline si incollavano al
titolo che le precede e la riga diventava una frase sola senza pause. */
.person-season-line {
display: block;
margin: 0;
font: var(--type-caption);
color: var(--color-text-muted);
}
/* Il link alla scheda della persona, accanto al nome nel roster. Una freccia
e non una parola: la riga è già piena, e «tutte le sue stagioni» starebbe
su due righe in una colonna che ne ha una. Il titolo dice il resto. */
.roster-person-link {
margin-left: var(--space-1);
text-decoration: none;
color: var(--color-text-muted);
}
/* ===========================================================================
Il cancello (PIANO-CLOUD.md §A1)
===========================================================================
`login.html` non estende `base.html` — niente header, niente sidebar,
niente griglia `.app-shell` — quindi ha bisogno del proprio impianto di
pagina, non solo di ritocchi. Sono poche regole: una porta chiusa deve
avere una cosa sola su cui puntare lo sguardo.
Il fondo è quello dell'app (`--color-bg`) e non un colore a sé: chi
arriva qui deve riconoscere subito dove sta entrando, e una schermata di
login che sembra un altro sito è il modo migliore per far dubitare che
lo sia. */
.login-body {
min-height: 100vh;
/* `dvh` dove c'è: su iOS la barra degli indirizzi entra e esce dalla
viewport, e con `100vh` la card salterebbe mentre si digita. */
min-height: 100dvh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
}
.login-card {
width: 100%;
max-width: 22rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-5);
text-align: center;
}
/* Il logo porta già nome e tagline: qui non serve nessun titolo di testo
accanto, per la stessa ragione per cui non ce n'è nella sidebar. */
.login-logo {
width: 11rem;
height: auto;
margin: 0 auto var(--space-4);
display: block;
}
/* La regola globale `form` (più in alto) dà a ogni form superficie, bordo e
padding: dentro la card di login diventa una scatola dentro la scatola —
due cornici concentriche attorno a un campo solo. Qui il form non è un
blocco *dentro* una pagina, è il contenuto della card, quindi le tre
proprietà si annullano invece di aggiungere una terza cornice. */
.login-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: left;
background: none;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 0;
}
.login-form label {
font-weight: 600;
}
.login-form input[type="password"] {
width: 100%;
box-sizing: border-box;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
/* 16px pieni e non di meno: sotto i 16px iOS ingrandisce la pagina
appena il campo prende il fuoco, e la card finisce fuori schermo
proprio mentre si scrive. */
font-size: 16px;
font-family: inherit;
}
.login-form input[type="password"]:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
.login-card .banner {
text-align: left;
}
/* Sul telefono — che è il modo in cui questa pagina verrà aperta più spesso,
a bordo pista — 2.5rem di padding per lato su una card da 22rem lasciano
al campo meno spazio di quanto meriti l'unica cosa da fare qui. Si stringe
la cornice, non il contenuto. */
@media (max-width: 26rem) {
.login-body {
padding: var(--space-3);
}
.login-card {
padding: var(--space-4);
}
.login-logo {
width: 9rem;
}
}
/* Il logout vive nel piede della sidebar, dove stava la riga «Uso locale ·
nessun login» che questo cancello ha reso falsa. Discreto di proposito:
è un'azione che serve una volta ogni mai, e in una app usata da una
persona sola un pulsante «esci» in evidenza è solo un modo di uscire per
sbaglio. */
.sidebar-logout {
margin-top: var(--space-2);
}
.sidebar-logout button {
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
opacity: 0.75;
text-decoration: underline;
cursor: pointer;
}
.sidebar-logout button:hover,
.sidebar-logout button:focus-visible {
opacity: 1;
}
|