/* =====================================================================
   Assessment digitale · il contenuto del mazzo.

   La cornice è css/mazzo.css; la scala è css/assessment/scala.css. Qui le
   schede, essenziali: bianco, Jet, l'Imperial di Carlo solo dove porta
   informazione (i titoli, il livello, il passo successivo), la sfumatura da
   Imperial a Sky nei gradini e la pesca come accento caldo. Niente riquadri
   dentro i riquadri: i gruppi li fa lo spazio.

   12/10/2026: dall'indaco e dalla lavanda di Tacita alla palette Quisquilia.
   ===================================================================== */

body[data-intervista="assessment"],[data-tema="assessment"]{
  --vivo:var(--imperial); --su:var(--mint); --leggibile:var(--imperial); --wash:#e3e7f4;
}
[data-intervista="assessment"] .marchio-prodotto{background:var(--imperial);color:var(--mint);box-shadow:none}
[data-intervista="assessment"] .segmento{background-image:linear-gradient(var(--imperial),var(--imperial))}

.meta{font-size:13px;color:var(--nota);line-height:1.5}
.grande{font-size:clamp(17px,1.4vw,20px);line-height:1.5}

/* ============================================================ copertina */
.copertina{display:flex;flex-direction:column;gap:clamp(18px,3.2vh,34px);min-height:100%}
.copertina h1{font-size:clamp(40px,min(5.4vw,9vh),86px);line-height:.94;letter-spacing:-.045em;max-width:15ch}
.cop-lettura{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--testo-2);max-width:60ch;margin-top:clamp(12px,2vh,18px)}
.cop-scala{max-width:960px}
.cop-scala .sc-cella{height:clamp(36px,6.2vh,60px)}
.cop-piede{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:16px 28px;flex-wrap:wrap;
  padding-top:clamp(14px,2.4vh,22px);border-top:1px solid var(--linea)}
.cop-piede .meta{max-width:46ch}

/* ========================================================= una dimensione */
.dimensione{display:flex;flex-direction:column;gap:clamp(18px,3vh,32px);min-height:100%}
.dim-testa h2{font-size:clamp(34px,min(4.2vw,7.5vh),64px);line-height:.98;letter-spacing:-.04em;margin:0 0 clamp(10px,1.6vh,16px)}
.dim-livello{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.dim-quale{font-family:var(--mono);font-size:13px;color:var(--sky-profondo);font-variant-numeric:tabular-nums}
.dim-livello b{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.02em;color:var(--leggibile)}
.dim-num{font-family:var(--mono);font-size:13px;color:var(--nota);font-variant-numeric:tabular-nums}
/* i gradini in piccolo: la stessa barra della scala, da Imperial a Sky, capo pesca */
.gradini{display:inline-grid;grid-template-columns:repeat(4,24px);gap:4px}
.gradini i{height:10px;border-radius:5px;background:var(--carta-fredda);position:relative;--da:0%;--a:25%}
.gradini i:nth-child(2){--da:25%;--a:50%}
.gradini i:nth-child(3){--da:50%;--a:75%}
.gradini i:nth-child(4){--da:75%;--a:100%}
.gradini i.pieno{background:linear-gradient(90deg,color-mix(in oklab,var(--sky) var(--da),var(--imperial)),color-mix(in oklab,var(--sky) var(--a),var(--imperial)))}
.gradini i.tuo::after{content:'';position:absolute;right:2px;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--pesca)}
.gradini i.dopo{background:#fff;box-shadow:inset 0 0 0 1.5px var(--sky-profondo)}

/* le sue parole, riportate da Carlo: sono il centro della scheda */
.dim-nota{font-size:clamp(18px,min(1.65vw,3.1vh),24px);line-height:1.5;color:var(--jet);max-width:58ch;text-wrap:pretty}
.dimensione.vuota .dim-nota{color:var(--testo-2)}
.dim-piede{margin-top:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start;
  padding-top:clamp(14px,2.4vh,22px);border-top:1px solid var(--linea)}
.dim-dopo h3{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--leggibile);margin-bottom:6px}
.dim-dopo p{font-size:15.5px;line-height:1.5;color:var(--jet);max-width:52ch}
.dim-guarda{font-size:14px;line-height:1.5;color:var(--nota);max-width:46ch}
.dim-guarda b{display:block;font-weight:600;color:var(--testo-2);margin-bottom:4px}

/* =============================================================== le parole */
.scheda.piena[data-tema="assessment"]{background:var(--vivo);color:var(--su);display:flex;align-items:center}
.commento-grande{width:100%}
.commento-grande p{max-width:44ch}
.commento-grande p{font-family:var(--display);font-weight:500;font-size:clamp(18px,min(1.75vw,3.1vh),27px);line-height:1.4;letter-spacing:-.02em;text-wrap:pretty}
.commento-grande cite{display:block;font-style:normal;font-size:14px;margin-top:clamp(18px,3vh,28px);color:var(--pesca)}

/* ================================================================ il metodo */
.metodo-scheda h2{margin-bottom:clamp(18px,3vh,30px)}
.metodo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vh,28px) clamp(20px,3vw,44px);margin-bottom:clamp(18px,3vh,30px)}
.passo dt{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em;margin-bottom:6px}
.passo dd{font-size:15px;line-height:1.55;color:var(--testo-2);max-width:52ch}
.uso-limitato{padding-top:16px;border-top:1px solid var(--linea);max-width:80ch}
.uso-limitato b{display:block;font-family:var(--display);font-size:15px;margin-bottom:4px}
.uso-limitato p{font-size:13px;line-height:1.55;color:var(--nota)}

/* ============================================================== la chiusura */
.chiusura{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,56px);align-items:center;height:100%}
.chiusura h2{color:var(--mint)}
.chiusura .grande{color:rgba(249,255,251,.86);max-width:52ch;margin-bottom:24px}
.scura .esito{color:rgba(249,255,251,.72)}
.altre{display:grid;gap:10px}
.altre h3{font-size:15px;font-weight:600;color:rgba(249,255,251,.72);margin-bottom:2px}
.altra{display:block;text-decoration:none;color:var(--mint);border:1px solid rgba(249,255,251,.24);border-radius:18px;padding:14px 18px;background:rgba(249,255,251,.04);
  transition:border-color .2s,background .2s}
.altra:hover,.altra:focus-visible{border-color:var(--pesca);background:rgba(247,205,182,.08);outline:none}
.altra b{display:block;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em}
.altra span{font-size:14px;color:rgba(249,255,251,.72)}

/* ---------------------------------------------------------- tablet */
@media (max-width:1020px){
  .chiusura{grid-template-columns:minmax(0,1fr);height:auto}
  .dim-piede{grid-template-columns:minmax(0,1fr)}
}
/* --------------------------------------------------------- telefono */
@media (max-width:640px){
  .copertina h1{font-size:clamp(34px,10.5vw,48px)}
  .cop-piede .azioni,.chiusura .azioni{flex-direction:column;align-items:stretch;width:100%}
  .cop-piede .pulsante,.chiusura .pulsante{justify-content:center}
  .metodo{grid-template-columns:minmax(0,1fr)}
  .dim-nota{font-size:17px}
  .cop-scala .sc-cella{height:26px}
  .commento-grande p{font-size:18px}
}
@media (max-height:820px) and (min-width:641px){
  .dim-nota{font-size:clamp(17px,1.5vw,21px)}
  .passo dd{font-size:14px}
}