/* Sezione #per-chi: vedi CONTRATTO.md. Selettori sempre prefissati da #per-chi.
   Quattro segmenti, quattro scene diverse disegnate con CSS e SVG:
   1 la pila di dispense che si scioglie in parole (scrub),
   2 la scrivania di PDF con la riga che scende sulla pagina,
   3 il comodino col filo che sale dal libro al rigo,
   4 i manuali e le tre passate su un rigo a tre linee.
   Telefono prima: testo sopra, scena sotto. Da 48em layout alternati e asimmetrici. */

/* ---------- elenco e segmenti ---------- */
#per-chi .pc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(4.5rem, 3rem + 6vw, 9rem)}
#per-chi .pc-seg{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:center}
#per-chi .pc-text{display:flex;flex-direction:column;gap:var(--s-4);max-width:var(--max-text)}
#per-chi .pc-text .t-h3{font-weight:800;text-wrap:balance}
#per-chi .pc-num{color:var(--muted)}
#per-chi .pc-num span{color:var(--accent)}

/* la lettera rossa vale solo nella scena "viva" (una per schermata, regola 6.3) */
#per-chi .reticle__w--p,
#per-chi .pc-pass .pv{transition:color var(--dur) var(--ease-out)}
#per-chi .pc-seg:not(.is-live) .reticle__w--p,
#per-chi .pc-seg:not(.is-live) .pc-pass .pv{color:var(--ink)}

/* ---------- scena: contenitore comune ---------- */
#per-chi .pc-scene{position:relative;display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
#per-chi .pc-art{position:relative;width:100%;overflow:hidden}
#per-chi .pc-play{align-self:flex-end;font-family:var(--font-num);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;gap:.7em}
#per-chi .pc-play::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;transition:transform var(--dur-fast) ease}
#per-chi .pc-play[aria-pressed="true"]::before{width:8px;height:10px;border-width:0 3px;border-color:currentColor;border-style:solid;background:transparent}
#per-chi .pc-play[aria-pressed="true"]{color:var(--accent);border-color:transparent}

/* il mirino delle scene, piu' piccolo di quello dell'hero */
#per-chi .pc-ret{position:absolute;z-index:20}
#per-chi .pc-ret.reticle{--word-size:clamp(1.45rem, 1.1rem + 1.5vw, 2.35rem)}
#per-chi .pc-ret .reticle__rule{border-top-width:1px}

/* etichetta mono sui fogli */
#per-chi .pc-tag{font-size:.62rem;letter-spacing:.08em;color:var(--muted);line-height:1;margin-bottom:.9em;white-space:nowrap}

/* =====================================================================
   1. PER CHI STUDIA: la pila di dispense
   ===================================================================== */
#per-chi .pc-art--studio{aspect-ratio:1/1;border:var(--rule);border-radius:var(--radius-lg)}
#per-chi .pc-art--studio .pc-ret{top:7%;right:5%;width:64%}
#per-chi .pc-stack{position:absolute;left:7%;bottom:7%;width:58%;height:58%}
#per-chi .pc-sheet{position:absolute;left:calc(var(--i) * 9px);top:calc(var(--i) * 8px);width:calc(100% - 36px);height:calc(100% - 32px);z-index:calc(10 - var(--i))}
#per-chi .pc-paper{position:relative;height:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;padding:12% 10% 0;display:flex;flex-direction:column;gap:9%;box-shadow:var(--shadow);overflow:visible}
#per-chi .pc-sheet:not([style*="--i:0"]) .pc-paper{border-color:var(--line)}
#per-chi .pc-paper .pc-tag{margin:0}
#per-chi .pc-row{display:flex;gap:6%;height:5px}
#per-chi .pc-chunk{display:block;height:100%;border-radius:3px;background:var(--line-strong);opacity:.6;flex:none}

/* =====================================================================
   2. PER CHI LAVORA: la scrivania di PDF
   ===================================================================== */
#per-chi .pc-art--desk{aspect-ratio:1/1;border-radius:var(--radius);background:var(--surface)}
#per-chi .pc-desk{position:absolute;inset:7% 6% 34%}
#per-chi .pc-page{position:absolute;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:5% 6%;display:flex;flex-direction:column;gap:7%}
#per-chi .pc-page--a{left:0;top:10%;width:42%;height:82%}
#per-chi .pc-page--b{right:0;top:0;width:40%;height:80%}
#per-chi .pc-page--c{left:31%;top:6%;width:46%;height:94%;z-index:3;border-color:var(--line-strong);box-shadow:var(--shadow);gap:6%}
#per-chi .pc-page .pc-tag{margin:0 0 4%}
#per-chi .pc-page--b{align-items:flex-end}
#per-chi .pc-l{display:block;height:4px;border-radius:2px;background:var(--line-strong);opacity:.45;width:92%;flex:none}
#per-chi .pc-l:nth-of-type(3n+2){width:78%}
#per-chi .pc-l:nth-of-type(4n){width:64%}
#per-chi .pc-l:last-of-type{width:40%}
#per-chi .pc-page--c .pc-l{opacity:.7}
#per-chi .pc-hl{position:absolute;left:4%;right:4%;top:0;height:14px;margin-top:-5px;border-radius:3px;background:var(--accent-soft);border-left:2px solid var(--accent);pointer-events:none}
#per-chi .pc-badge{position:absolute;right:-8%;bottom:7%;font-size:.6rem;padding:.55em .8em;border:1px solid var(--accent);color:var(--accent);background:var(--bg);border-radius:var(--radius-pill);line-height:1;white-space:nowrap;opacity:0}
#per-chi .pc-art--desk .pc-ret{left:6%;right:6%;bottom:6%;width:auto}

/* =====================================================================
   3. PER CHI HA UN LIBRO CHE ASPETTA: il comodino
   ===================================================================== */
#per-chi .pc-art--night{aspect-ratio:1/1;overflow:visible}
#per-chi .pc-night{position:absolute;inset:0;width:100%;height:100%}
#per-chi .pc-night .pc-s{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#per-chi .pc-night .pc-f{fill:var(--bg)}
#per-chi .pc-night .pc-thin{stroke-width:1;opacity:.7}
#per-chi .pc-night .pc-cone{fill:var(--ink);opacity:.06}
#per-chi .pc-night .pc-thread{stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
#per-chi .pc-art--night .pc-ret{left:3%;right:3%;bottom:70%;width:auto}

/* =====================================================================
   4. PER CHI PREPARA UN CONCORSO: manuali e tre passate
   ===================================================================== */
#per-chi .pc-art--exam{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);overflow:visible}
#per-chi .pc-pile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:15rem;padding-bottom:var(--s-2);border-bottom:1px solid var(--line-strong)}
#per-chi .pc-vol{position:relative;display:flex;align-items:center;width:var(--w);height:calc(var(--h) * 1.9rem);padding:0 1.6em;background:var(--surface-2);border-radius:2px 5px 5px 2px;box-shadow:inset 0 -1px 0 var(--line-strong)}
/* il dorso: due filetti verticali vicino ai bordi, come sui manuali rilegati */
#per-chi .pc-vol::before,#per-chi .pc-vol::after{content:"";position:absolute;top:22%;bottom:22%;width:1px;background:var(--line-strong)}
#per-chi .pc-vol::before{left:.7em}
#per-chi .pc-vol::after{right:.7em}
#per-chi .pc-vol:nth-child(2){margin-left:6%}
#per-chi .pc-vol:nth-child(3){margin-left:2%}
#per-chi .pc-vol b{font-family:var(--font-num);font-weight:400;font-size:.62rem;letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--muted);white-space:nowrap}

#per-chi .pc-staff{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-5)}
#per-chi .pc-pass{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:var(--s-3);row-gap:var(--s-3)}
#per-chi .pc-pass__k{color:var(--accent)}
#per-chi .pc-pass--work .pc-pass__k{color:var(--muted)}
#per-chi .pc-pass__t{font-weight:700;font-size:var(--fs-body);line-height:1.2}
#per-chi .pc-pass__s{color:var(--muted);font-size:.66rem;text-align:right}
#per-chi .pc-track{grid-column:1/-1;position:relative;height:2px;background:var(--line)}
#per-chi .pc-fill{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%}
#per-chi .pc-pass--work .pc-fill{background:var(--line-strong)}
/* le tacche ai due capi, come sul mirino */
#per-chi .pc-track::before,#per-chi .pc-track::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:var(--line-strong)}
#per-chi .pc-track::before{left:0}
#per-chi .pc-track::after{right:0}

/* ---------- da 48em: layout alternati, mai due uguali ---------- */
@media (min-width:48em){
  #per-chi .pc-seg{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6)}
  #per-chi .pc-seg > *{min-width:0}

  /* 1: testo stretto a sinistra, scena grande a destra */
  #per-chi .pc-seg--studio .pc-text{grid-column:1/span 4;grid-row:1}
  #per-chi .pc-seg--studio .pc-scene{grid-column:6/-1;grid-row:1}
  #per-chi .pc-art--studio{aspect-ratio:6/5}
  #per-chi .pc-art--studio .pc-ret{width:58%;top:9%}
  #per-chi .pc-stack{width:50%;height:62%}

  /* 2: scena a sinistra, testo spinto a destra e piu' in basso */
  #per-chi .pc-seg--lavoro .pc-scene{grid-column:1/span 7;grid-row:1}
  #per-chi .pc-seg--lavoro .pc-text{grid-column:9/-1;grid-row:1;align-self:end;padding-bottom:var(--s-8)}
  #per-chi .pc-art--desk{aspect-ratio:7/6}
  #per-chi .pc-page--c{left:26%;width:48%}

  /* 3: testo rientrato, comodino libero senza cornice */
  #per-chi .pc-seg--libro .pc-text{grid-column:2/span 4;grid-row:1;align-self:start;padding-top:var(--s-8)}
  #per-chi .pc-seg--libro .pc-scene{grid-column:7/span 6;grid-row:1}

  /* 4: testo sopra a sinistra, scena larga sotto e rientrata */
  #per-chi .pc-seg--concorso .pc-text{grid-column:1/span 5}
  #per-chi .pc-seg--concorso .pc-scene{grid-column:4/-1;margin-top:var(--s-6)}
  #per-chi .pc-art--exam{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-8);align-items:end}
  #per-chi .pc-pile{max-width:none}
  #per-chi .pc-vol{height:calc(var(--h) * 2.3rem)}
  #per-chi .pc-vol b{font-size:.68rem}
}
@media (min-width:64em){
  #per-chi .pc-pass__t{font-size:var(--fs-lead)}
  #per-chi .pc-pass__s{font-size:var(--fs-mono)}
}