/* ---------------------------------------------------------------------------------------
   licenze.css — matrici di compatibilita' fra licenze (js/local/licenze.js).
   Cinque tinte, quelle che i dati nominano (green, teal, yellow, orange, red): sfondo
   colorato e testo scuro della stessa tinta, sia nei badge della tabella sia nelle celle
   del quadro completo, che scorre in orizzontale con la colonna delle partenze ferma.

   LE TINTE SONO STATE RIFATTE IL 14 OTTOBRE 2026, perche' le prime cinque erano quasi
   indistinguibili. Erano pastelli tutti alla stessa chiarezza (#dcfce7, #ccfbf1, #fef9c3,
   #ffedd5, #fee2e2), e a quella chiarezza lo spazio dei colori e' troppo stretto: misurata
   la distanza in OKLab (×100) fra verde e turchese, **2,3** su una soglia di 15, e **1,7**
   simulando la protanopia. Nel quadro 9×9 il livello lo porta il solo colore — il segno
   nella cella e' ✓ o ✗ per tutti e cinque, perche' e' la prima parola dello stato — quindi
   due tinte indistinguibili sono due livelli indistinguibili.

   Le nuove separano in tono E in chiarezza, e la chiarezza scende nell'ordine semantico
   (verde sicuro → rosso incompatibile), cosi' l'ordine si vede anche senza riconoscere i
   toni. Misure: distanza peggiore fra tutte le coppie **9,4** in protanopia e 10,1 fra
   coppie contigue in deuteranopia (soglia 8), contro 1,7; **12,6** a vista piena, che resta
   sotto la soglia di 15 ma e' cinque volte la distanza di prima. Quella soglia e' tarata
   sui tratti di un grafico, dove il colore e' l'unico canale: qui ogni cella porta lo stato
   per esteso in `title` e in `aria-label`, la tabella per licenza lo scrive in parole e la
   legenda lo ripete. Arrivarci con cinque tinte chiare non e' possibile: servirebbero fondi
   pieni con testo bianco, cioe' un'altra pagina.
   Il testo di ciascuna sta fra 4,9:1 e 7,1:1 sul suo fondo (AA a 4,5:1).
   --------------------------------------------------------------------------------------- */
.lic-scelta-box { max-width: 24rem; }
.lic-badge { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .85rem;
             font-weight: 600; white-space: nowrap; }
.lic-green  { background: #9bf1a8; color: #085023; }
.lic-teal   { background: #6ad8f9; color: #004c63; }
.lic-yellow { background: #f9e14a; color: #694500; }
.lic-orange { background: #ffa44e; color: #7d2800; }
.lic-red    { background: #f98284; color: #720006; }

.lic-risultati th[scope="row"] { white-space: nowrap; }

.lic-quadro { font-size: .85rem; min-width: 46rem; }
.lic-quadro th.lic-col { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
                         vertical-align: bottom; text-align: left; font-weight: 600; padding: .5rem .25rem; }
/* La cella d'angolo e' tagliata da una diagonale: sopra a destra il rilascio (le colonne),
   sotto a sinistra la partenza (le righe). La linea e' uno sfondo, quindi segue la cella
   qualunque altezza prendano le intestazioni verticali. */
.lic-quadro th.lic-angolo { position: relative; min-width: 9rem; padding: 0; font-weight: 400; color: #5f6b7a;
                            font-size: .78rem;
                            --bs-table-bg: transparent;
                            background: linear-gradient(to top right, transparent calc(50% - .6px), #8f98a2 50%,
                                        transparent calc(50% + .6px)); }
.lic-angolo-r, .lic-angolo-p { position: absolute; white-space: nowrap; }
.lic-angolo-r { top: .4rem; right: .5rem; }
.lic-angolo-p { bottom: .4rem; left: .5rem; }
/* la stessa licenza in partenza e in rilascio: corsivo su fondo grigio, nella tabella e
   sulla diagonale del quadro */
.lic-risultati tr.lic-stessa > * { --bs-table-bg: #eceff1; font-style: italic; }
/* (due classi sulla cella: deve vincere sulla tinta, che arriva piu' sotto) */
.lic-quadro td.lic-cella.lic-stessa { --bs-table-bg: #e2e5e9; --bs-table-color: #495057; font-style: italic; }
.lic-quadro .lic-riga { position: sticky; left: 0; z-index: 1; background: #fff; white-space: nowrap;
                        box-shadow: inset -1px 0 0 #dee2e6; }
.lic-quadro .lic-riga.lic-scelta { background: #e7f1ff; }
.lic-quadro .lic-riga .btn-link { text-decoration: none; font-weight: 600; }
.lic-quadro .lic-cella { text-align: center; font-size: 1rem; cursor: help; min-width: 2.4rem; }
/* Bootstrap 5.3 dipinge le celle con var(--bs-table-bg), che vince sullo sfondo di una
   classe: la tinta va data alla variabile, insieme al colore del testo. */
.lic-quadro td.lic-green  { --bs-table-bg: #9bf1a8; --bs-table-color: #085023; }
.lic-quadro td.lic-teal   { --bs-table-bg: #6ad8f9; --bs-table-color: #004c63; }
.lic-quadro td.lic-yellow { --bs-table-bg: #f9e14a; --bs-table-color: #694500; }
.lic-quadro td.lic-orange { --bs-table-bg: #ffa44e; --bs-table-color: #7d2800; }
.lic-quadro td.lic-red    { --bs-table-bg: #f98284; --bs-table-color: #720006; }

.lic-legende { margin-top: .5rem; }
.lic-legenda { border-left: 4px solid #adb5bd; background: #f8f9fa; padding: .75rem 1rem; border-radius: 0 .375rem .375rem 0; height: 100%; }
.lic-legenda li + li { margin-top: .2rem; }
.lic-campione { display: inline-block; width: .9rem; height: .9rem; border-radius: .2rem; margin-right: .4rem;
                vertical-align: -.1rem; }

/* la scheda Approfondimento, come nelle pillole: righe di lettura comoda */
.lic-approfondimento { max-width: 60rem; }
.lic-approfondimento ul.small li { margin-bottom: .35rem; }