/* ============================================================================
   TeamKeys shell — LE MARCHE DI FAMIGLIA (cognitive / mental).
   Foglio di VETRO. Solo marche: nessuna regola di layout, nessuna larghezza,
   nessuna misura della cornice.

   ─── QUESTO FOGLIO E' TEMPORANEO, E LE TRE RIGHE CHE SEGUONO SONO LA CONDIZIONE
   ─── CON CUI E' NATO (D-127). Senza, fra un mese e' un file che nessuno sa
   ─── perche' c'e', e la convenzione «un foglio per la shell» muore per inerzia
   ─── invece che per decisione.
   PERCHE' ESISTE: queste regole andrebbero in app/shell/shell.css, ma quel file
     lo sta riscrivendo il fronte CORNICE per il dimensionamento, e due
     riscritture concorrenti dello stesso foglio non si dis-fanno. Un foglio
     additivo si'.
   CHI LO ASSORBE: chi possiede shell.css.
   QUANDO: a R2 chiusa (la task di dimensionamento di CORNICE). Non «prima o
     poi»: quel giorno si copiano queste regole dentro shell.css, si toglie la
     riga <link> da index.html e si cancella questo file.

   L'INVARIANTE 3 NON SI TOCCA: qui non nasce nessun valore. Ogni colore, tipo,
   spazio e raggio viene da app/design/tokens.css. Se un token manca, si
   aggiunge LA', non qui.

   IL COLORE NON PORTA MAI UN SIGNIFICATO DA SOLO (invariante 4, D-021). In ogni
   posto in cui una tinta di famiglia compare qui, accanto c'e' la PAROLA:
   «Cognitive», «Mental». Spegni tutti i colori di questo foglio e ogni fatto
   resta leggibile. E' anche l'unica ragione per cui la coppia di famiglia puo'
   permettersi di stare alla stessa luminosita': a pari luminosita' le due tinte
   collassano a 1,06:1 per un dicromatico, quindi il colore qui RIPETE una cosa
   gia' detta, non la dice (vedi il blocco delle famiglie in tokens.css e il
   controllo v5fam).

   LE DUE TINTE SONO DUE, NON QUATTRO. Il mockup ratificato proponeva una coppia
   «marca» piu' chiara accanto alla coppia «testo». La coppia marca e' stata
   scartata con i numeri (E-023): misurata sul solo vetro reggeva, ma queste
   marche stanno anche sul CAMPO nudo, dove cadeva a 2,49:1 e 2,59:1, sotto il
   pavimento non-testo. Resta un token per famiglia, piu' scuro.

   E DA UN TOKEN SOLO SEGUE UNA REGOLA CHE VA SAPUTA PRIMA DI TOCCARE QUESTO
   FOGLIO: la stessa tinta non e' legale nei due mestieri sulle stesse
   superfici. Come MARCA (pallino, filetto — pavimento 3:1) regge ovunque, campo
   nudo compreso: 3,51 e 3,63 nel peggio raggiungibile. Come TESTO (parola,
   cifra — pavimento 4,50) regge SOLO sul vetro, dove misura 4,70 e 4,86.
   Percio' ogni regola qui che tinge del TESTO e' innestata su `.panel`, e la
   parola in legenda — che sta sul campo — resta inchiostro col pallino accanto
   a portare il colore. Chi aggiunge una regola tinta a questo foglio deve
   chiedersi PRIMA se quel pixel e' marca o testo, e su cosa poggia.
   ============================================================================ */

/* --- la legenda: una riga sola, sopra la classifica ------------------------ */
/* Vive fuori dal pannello perche' parla di TUTTA la lista, non di una riga. */
.fam-key{display:flex;align-items:center;gap:var(--tk-space-3);
     margin-top:var(--tk-space-3)}
.fam-key > span{display:flex;align-items:center;gap:var(--tk-space-2)}

/* il pallino. E' una MARCA, non testo: pavimento 3:1, e i due token di
   famiglia lo superano su ogni superficie raggiungibile (v5fam lo rimisura a
   ogni corsa invece di fidarsi di questo commento). */
.fam-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.fam-dot.cognitive{background:var(--tk-glass-domain-cognitive)}
.fam-dot.mental{background:var(--tk-glass-domain-mental)}

/* la parola. E' TESTO, quindi pavimento 4,50, e qui c'e' la riga che il mockup
   non poteva vedere: le due tinte reggono 4,70 e 4,86 SUL VETRO, ma sul campo
   nudo scendono a 3,51 e 3,63. Legali come marca, NON come parola.
   Percio' la parola nasce INCHIOSTRO e prende la tinta solo dentro un
   pannello, che e' l'unico posto dove il pavimento del testo e' superato. In
   legenda, sul campo, il colore lo porta il PALLINO e la parola resta ink: la
   legenda dice comunque «questo colore significa Cognitive», che e' tutto il
   suo mestiere.
   Non e' prudenza: e' la stessa lezione di E-023, cioe' misurare dove la cosa
   sta e non dove faceva comodo misurarla. v5fam lo rimisura a ogni corsa, con
   il pavimento GIUSTO per ciascun consumatore. */
.fam-word{font:var(--tk-weight-semibold) var(--tk-text-micro) var(--tk-font-mono);
     letter-spacing:var(--tk-tracking-wide);text-transform:uppercase;
     color:var(--tk-glass-ink-primary)}
.panel .fam-word.cognitive{color:var(--tk-glass-domain-cognitive)}
.panel .fam-word.mental{color:var(--tk-glass-domain-mental)}

/* --- la riga della classifica generale, forma B ---------------------------- */
/* Tre numeri per riga: Cog, Men, Tot. Ordina il Tot; gli altri due informano.
   L'anatomia della riga (.row, .n, .d) resta quella di .indices in shell.css:
   qui si aggiunge solo cio' che prima non esisteva. */

/* il METRO della riga: «N of M games». Sta sulla riga e non nell'intestazione
   perche' la copertura cambia da giocatore a giocatore (D-074: mai un numero
   nudo). Prende l'inchiostro SECONDARIO, non quello faint: il mockup usava
   #888392, che misura 2,19:1 sul peggio raggiungibile e non e' un colore da
   testo — tokens.css lo dice di se' («NOT for text»). Il secondario tiene
   5,08:1 sullo stesso peggio. */
.lb-metre{font:var(--tk-weight-regular) var(--tk-text-micro) var(--tk-font-mono);
     color:var(--tk-glass-ink-secondary);letter-spacing:var(--tk-tracking-wide);
     display:block}

/* le tre colonnine. Numero sopra, etichetta sotto: l'etichetta E' il secondo
   canale del colore, e per questo non e' facoltativa. */
.lb-scores{display:flex;align-items:center;gap:var(--tk-space-2);flex:0 0 auto}
.lb-chip{display:flex;flex-direction:column;align-items:flex-end}
.lb-chip .n{font:var(--tk-weight-semibold) var(--tk-text-mono) var(--tk-font-mono);
     font-variant-numeric:tabular-nums}
.lb-chip .l{font:var(--tk-weight-semibold) var(--tk-text-micro) var(--tk-font-mono);
     letter-spacing:var(--tk-tracking-wide);text-transform:uppercase}
/* le cifre tinte sono TESTO, e vivono solo dentro il pannello della lista:
   stessa ragione della parola, stesso pavimento 4,50 superato solo sul vetro. */
.panel .lb-chip.cognitive .n,.panel .lb-chip.cognitive .l{color:var(--tk-glass-domain-cognitive)}
.panel .lb-chip.mental .n,.panel .lb-chip.mental .l{color:var(--tk-glass-domain-mental)}
/* il TOTALE resta inchiostro: e' il numero che ordina, e ordinare non e' una
   famiglia. Dargli una tinta lo farebbe sembrare una terza famiglia. */
.lb-chip.totale .n{color:var(--tk-glass-ink-primary)}
.lb-chip.totale .l{color:var(--tk-glass-ink-secondary)}
/* l'assenza. Una famiglia mai toccata stampa un trattino, mai uno zero
   (invariante 1) — e il trattino prende l'inchiostro secondario, non la tinta
   di famiglia: un trattino colorato sembrerebbe un valore.
   IL SELETTORE PORTA `.panel` PER SPECIFICITA', non per eleganza. Senza, la
   regola tinta qui sopra (.panel .lb-chip.mental .n, quattro classi) batte
   questa (tre classi) e il trattino esce ORO. Non e' un ragionamento: il banco
   forma-b l'ha misurato sul pixel — «il trattino e' tinto rgb(130, 91, 0)» —
   mentre il CSS letto a occhio sembrava giusto. */
.panel .lb-chip .n.assente{color:var(--tk-glass-ink-secondary)}

/* --- LA POSIZIONE NON SI TINGE MAI ----------------------------------------
   Il riferimento di design lo vieta a lettere: «THE RANK IS A NUMERAL, NEVER A
   COLOUR. No podium gold, no green for you». In una classifica l'oro dice
   «primo posto» prima di dire «mentale», e i due significati si pesterebbero i
   piedi. Qui non c'e' nessuna regola che tocchi .n del rango ne' le prime tre
   righe, e non deve nascerne una: questa riga di commento e' il posto in cui
   chi ci prova legge perche' no. */