/* =====================================================================
   Assessment digitale · la scala del profilo (js/assessment/scala.js).

   Una riga per dimensione, quattro gradini per riga: pieni fino al livello
   raggiunto, il successivo solo contornato. È il solo grafico del profilo: lo
   usano la pagina d'inizio, il risultato e il mazzo, e va dentro il file
   scaricato. I gradini si riempiono una volta, da sinistra, quando la
   scala entra nello schermo.
   ===================================================================== */

.scala{width:100%;border-collapse:separate;border-spacing:6px 10px;margin:-10px -6px;table-layout:fixed}
.scala thead th{text-align:left;vertical-align:bottom;padding:0 2px 2px;font-weight:400}
.scala thead td:first-child{width:30%}
.scala thead td:last-child{width:17%}
.sc-num{display:block;font-family:var(--mono);font-weight:500;font-size:13px;color:var(--sky-profondo);line-height:1;font-variant-numeric:tabular-nums}
.sc-nome{display:block;font-size:12.5px;color:var(--nota);margin-top:6px;line-height:1.25}
.scala tbody th{text-align:left;font-family:var(--display);font-weight:600;font-size:clamp(15px,1.25vw,18px);letter-spacing:-.015em;
  color:var(--jet);padding-right:12px;line-height:1.2}

/* I gradini pieni sono una barra dati del sito: da Imperial a Sky lungo i quattro
   livelli, con il capo pesca sul gradino raggiunto. Ogni colonna porta il suo tratto
   della sfumatura, così la riga si legge come una barra sola spezzata. */
.sc-cella{height:clamp(30px,4.2vh,42px);border-radius:10px;background:var(--carta-fredda);position:relative;overflow:hidden;--da:0%;--a:25%}
.scala tr > .sc-cella:nth-child(3){--da:25%;--a:50%}
.scala tr > .sc-cella:nth-child(4){--da:50%;--a:75%}
.scala tr > .sc-cella:nth-child(5){--da:75%;--a:100%}
.sc-cella.pieno{background:transparent}
.sc-cella.pieno::before{content:'';position:absolute;inset:0;border-radius:inherit;transform-origin:left center;
  background:linear-gradient(90deg,color-mix(in oklab,var(--sky) var(--da),var(--imperial)),color-mix(in oklab,var(--sky) var(--a),var(--imperial)))}
/* il gradino raggiunto porta il capo pesca: è lì che sei */
.sc-cella.tuo::after{content:'';position:absolute;right:7px;top:7px;bottom:7px;width:6px;border-radius:3px;background:var(--pesca)}
.sc-cella.dopo{background:#fff;box-shadow:inset 0 0 0 1.5px var(--sky-profondo)}
.sc-cella.oltre{background:var(--carta-fredda)}
.sc-cella.vuoto{background:transparent;box-shadow:inset 0 0 0 1px var(--linea-forte)}
.sc-livello{font-size:14px;color:var(--imperial);font-weight:600;padding-left:10px;line-height:1.25}
.sc-livello.vuoto{color:var(--nota);font-weight:400;font-style:italic}

@media (prefers-reduced-motion:no-preference){
  .scala.entra .sc-cella.pieno::before{animation:sc-riempi .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 45ms)}
  @keyframes sc-riempi{from{transform:scaleX(0)}}
}

/* Dove lo spazio è stretto (il riquadro d'esempio, una colonna, il telefono) la
   tabella non regge: i nomi si tagliano e i livelli vanno a capo parola per parola.
   Allora ogni dimensione diventa due righe, il nome e il livello sopra, i quattro
   gradini sotto; la testata tiene solo i numeri. Decide lo spazio del contenitore,
   non lo schermo. */
.scala-box{container-type:inline-size;width:100%}
@container (max-width:640px){
  .scala,.scala thead,.scala tbody{display:block}
  .scala{margin:0;border-spacing:0}
  .scala tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:6px}
  .scala thead tr{margin-bottom:10px}
  .scala thead td{display:none}
  .sc-nome{display:none}
  .sc-num{font-size:12px}
  .scala tbody tr{row-gap:6px;margin-bottom:16px}
  .scala tbody tr:last-child{margin-bottom:0}
  .scala tbody th{grid-column:1 / span 2;grid-row:1;padding:0;font-size:16px}
  .sc-livello{grid-column:3 / span 2;grid-row:1;text-align:right;padding:0;font-size:13.5px;align-self:end}
  .sc-cella{grid-row:2;height:28px;border-radius:8px}
  .sc-cella.tuo::after{right:6px;top:6px;bottom:6px;width:5px}
}