/* PASSAPORTO SCOLASTICO — foglio di stile
   Identità: documento di viaggio. Copertina bordeaux, carta di sicurezza
   con guilloche, timbri di frontiera, zona a lettura ottica (MRZ). */

:root{
  --desk:#6B1A2B; --desk-edge:#4E1120;
  --paper:#F4F6F0; --paper-2:#E8EDE2; --paper-3:#DCE3D5;
  --ink:#22271F; --ink-soft:#5E6759; --ink-faint:#8C9585;
  --rule:#C6CFBE; --rule-soft:#DCE3D5;
  --burgundy:#7B1E32; --burgundy-lift:#9A2C43; --on-burgundy:#F7EEE4;
  --blue:#1E3D72; --green:#2C6B4C; --alert:#C1442A; --gold:#A9812F;
  --on-accent:#F4F6F0;
  --guilloche:rgba(34,39,31,.055);
  --stamp-blend:multiply;
  --shadow:0 1px 0 rgba(34,39,31,.06), 0 18px 40px -22px rgba(34,39,31,.45);
  --f-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --f-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"Courier Prime","Courier New",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --desk:#25121A; --desk-edge:#160A0F;
    --paper:#1A201B; --paper-2:#222922; --paper-3:#2B332B;
    --ink:#E4E9DD; --ink-soft:#A4AD9C; --ink-faint:#78816F;
    --rule:#3A443A; --rule-soft:#2C342C;
    --burgundy:#E58097; --burgundy-lift:#F0A0B2; --on-burgundy:#F7EEE4;
    --blue:#93B6F2; --green:#6FC79A; --alert:#F79A7E; --gold:#DCB663;
    --on-accent:#161A17;
    --guilloche:rgba(228,233,221,.05);
    --stamp-blend:screen;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 44px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --desk:#25121A; --desk-edge:#160A0F;
  --paper:#1A201B; --paper-2:#222922; --paper-3:#2B332B;
  --ink:#E4E9DD; --ink-soft:#A4AD9C; --ink-faint:#78816F;
  --rule:#3A443A; --rule-soft:#2C342C;
  --burgundy:#E58097; --burgundy-lift:#F0A0B2; --on-burgundy:#F7EEE4;
  --blue:#93B6F2; --green:#6FC79A; --alert:#F79A7E; --gold:#DCB663;
  --on-accent:#161A17;
  --guilloche:rgba(228,233,221,.05);
  --stamp-blend:screen;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 44px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;
  background:var(--desk);
  background-image:radial-gradient(120% 80% at 50% -10%,
    color-mix(in srgb,var(--desk) 84%, #fff 16%) 0%, var(--desk) 46%, var(--desk-edge) 100%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--f-ui); font-size:15px; line-height:1.5;
  min-height:100vh; -webkit-text-size-adjust:100%;
}
img{max-width:100%}
[hidden]{display:none !important}
button{font:inherit; color:inherit}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:400}
p{margin:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- guscio ---------- */
.desk{min-height:100vh; padding:16px 12px 44px; display:flex; justify-content:center}
.booklet{
  position:relative; width:100%; max-width:520px; background:var(--paper);
  border-radius:3px; box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column; align-self:flex-start;
}
.booklet.wide{max-width:940px}
.booklet::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(57deg, transparent 0 4px, var(--guilloche) 4px 4.7px),
    repeating-linear-gradient(-57deg, transparent 0 4px, var(--guilloche) 4px 4.7px);
}
.sheet{position:relative; z-index:1; padding:20px 18px 26px; display:flex; flex-direction:column; gap:18px}

/* ---------- barra ---------- */
.bar{
  position:relative; z-index:2; display:flex; align-items:center; gap:9px;
  padding:9px 14px; background:var(--paper-2); border-bottom:1px solid var(--rule);
  font-family:var(--f-data); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.bar .who{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar .sep{color:var(--ink-faint)}
.bar .pts{margin-left:auto; color:var(--blue); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.linkish{
  background:none; border:0; padding:4px 6px; margin:-4px -6px; cursor:pointer;
  font-family:var(--f-data); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.linkish:hover{color:var(--burgundy)}

/* ---------- atomi tipografici ---------- */
.eyebrow{font-family:var(--f-data); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.field .k{font-family:var(--f-data); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); display:block}
.field .v{font-family:var(--f-data); font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; display:block}
.rule{height:1px; background:var(--rule); border:0; margin:0}
.muted{color:var(--ink-soft)}
.tiny{font-size:12.5px; line-height:1.45}
.stack{display:flex; flex-direction:column; gap:12px}

/* ---------- pulsanti ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:14px 18px; border:1px solid var(--burgundy); background:var(--burgundy); color:var(--on-accent);
  border-radius:2px; cursor:pointer; font-weight:600; font-size:13.5px;
  letter-spacing:.1em; text-transform:uppercase; font-family:var(--f-ui);
  transition:background .15s ease, transform .08s ease;
}
.btn:hover{background:var(--burgundy-lift); border-color:var(--burgundy-lift)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.38; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink-soft); background:var(--paper-2)}
.btn.slim{padding:10px 14px; font-size:11.5px; width:auto}
.row{display:flex; gap:9px; flex-wrap:wrap}
.row .btn{width:auto; flex:1 1 auto}

/* ---------- copertina ---------- */
.cover{
  background:linear-gradient(168deg,#8A2438 0%,#6B1A2B 46%,#4E1120 100%);
  color:#F2E4D8; padding:32px 22px 28px; display:flex; flex-direction:column; gap:20px;
  position:relative; z-index:1;
}
.cover::after{content:""; position:absolute; inset:9px; border:1px solid rgba(242,228,216,.26); border-radius:2px; pointer-events:none}
.cover .crest{width:60px; height:60px; align-self:center}
.cover h1{font-family:var(--f-display); font-size:clamp(34px,9.5vw,46px); line-height:.98; text-align:center; color:#F7EEE4}
.cover .sub{font-family:var(--f-data); font-size:10px; letter-spacing:.26em; text-transform:uppercase; text-align:center; color:rgba(242,228,216,.7)}
.cover .lede{text-align:center; font-size:14.5px; color:rgba(247,238,228,.87); max-width:34ch; margin:0 auto}
.inp{display:flex; flex-direction:column; gap:5px}
.inp label{font-family:var(--f-data); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,228,216,.62)}
.inp input{
  width:100%; padding:11px 12px; background:rgba(247,238,228,.07); color:#F7EEE4;
  border:1px solid rgba(242,228,216,.3); border-radius:2px;
  font-family:var(--f-data); font-size:16px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.inp input::placeholder{color:rgba(242,228,216,.34); font-weight:400; letter-spacing:.04em}
.inp input:focus{border-color:#E8C88C; background:rgba(247,238,228,.12); outline:none}
.cover .btn{background:#E8C88C; border-color:#E8C88C; color:#4E1120}
.cover .btn:hover{background:#F2DBAE; border-color:#F2DBAE}
.cover .err{font-family:var(--f-data); font-size:11px; letter-spacing:.06em; color:#F7B9A4; text-transform:uppercase}
.cover-facts{display:flex; border-top:1px solid rgba(242,228,216,.22); padding-top:13px}
.cover-facts div{flex:1; text-align:center}
.cover-facts .n{display:block; font-family:var(--f-data); font-size:19px; font-weight:700; line-height:1.15; color:#E8C88C; font-variant-numeric:tabular-nums}
.cover-facts .l{display:block; margin-top:3px; font-family:var(--f-data); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:rgba(242,228,216,.6)}

/* ---------- mappa delle frontiere ---------- */
.head h2{font-family:var(--f-display); font-size:30px; line-height:1.06}
.progress-strip{display:flex; align-items:center; gap:9px; font-family:var(--f-data); font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.meter{flex:1; height:6px; background:var(--paper-3); border-radius:99px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--blue); border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.3,1)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px}
.post{
  position:relative; text-align:left; padding:12px 12px 13px; background:var(--paper-2);
  border:1px solid var(--rule); border-radius:2px; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; gap:6px; min-height:116px;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
.post:hover{border-color:var(--ink-faint); background:var(--paper-3)}
.post:active{transform:translateY(1px)}
.post .code{font-family:var(--f-data); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--burgundy)}
.post .nome{font-size:14px; font-weight:600; line-height:1.18; letter-spacing:-.01em}
.post .luogo{font-family:var(--f-data); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.post .dots{display:flex; gap:4px; margin-top:auto; padding-top:6px}
.post .dots i{flex:1; height:3px; background:var(--paper-3); border-radius:99px}
.post .dots i.on{background:var(--green)}
.post.done{background:var(--paper)}
.post.done .nome{color:var(--ink-soft)}

/* ---------- timbri ---------- */
.stamp{
  font-family:var(--f-data); color:var(--blue); mix-blend-mode:var(--stamp-blend);
  border:2px solid currentColor; border-radius:4px; padding:4px 8px 3px;
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  transform:rotate(var(--rot,-7deg)); opacity:.84; text-align:center; line-height:1.12;
  box-shadow:inset 0 0 0 1px currentColor;
}
.stamp .s-code{font-size:15px; font-weight:700; letter-spacing:.18em}
.stamp .s-lab{font-size:7.5px; letter-spacing:.13em; text-transform:uppercase}
.post .stamp{position:absolute; right:5px; bottom:20px; --rot:-11deg; opacity:.7; transform:rotate(-11deg) scale(.84); color:var(--green)}
.stamp-big{--rot:-8deg; font-size:1.35em; align-self:center; padding:9px 16px 7px}
.stamp-big .s-code{font-size:26px}
.stamp-big .s-lab{font-size:9px}
.stamp-drop{animation:drop .42s cubic-bezier(.2,1.2,.35,1) both}
@keyframes drop{
  0%{transform:rotate(-8deg) scale(2.4); opacity:0}
  60%{opacity:.95}
  100%{transform:rotate(-8deg) scale(1); opacity:.84}
}

/* ---------- prove ---------- */
.crumb{display:flex; align-items:baseline; gap:8px; font-family:var(--f-data); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.crumb b{color:var(--burgundy); font-weight:700}
.prova-head h2{font-family:var(--f-display); font-size:26px; line-height:1.1}
.domanda{font-size:16px; line-height:1.45}

.opts{display:flex; flex-direction:column; gap:8px}
.opt{
  display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left;
  padding:12px 13px; background:var(--paper-2); border:1px solid var(--rule);
  border-radius:2px; cursor:pointer; font-size:14.5px; line-height:1.35;
  transition:border-color .12s ease, background .12s ease;
}
.opt:hover:not(:disabled){border-color:var(--ink-faint)}
.opt .mark{
  flex:none; width:20px; height:20px; border:1px solid var(--ink-faint); border-radius:2px;
  font-family:var(--f-data); font-size:10px; font-weight:700; display:grid; place-items:center;
  color:var(--ink-faint); margin-top:1px;
}
.opt.sel{border-color:var(--blue); background:color-mix(in srgb,var(--blue) 9%, var(--paper-2))}
.opt.sel .mark{border-color:var(--blue); background:var(--blue); color:var(--on-accent)}
.opt.ok{border-color:var(--green); background:color-mix(in srgb,var(--green) 11%, var(--paper-2))}
.opt.ok .mark{border-color:var(--green); background:var(--green); color:var(--on-accent)}
.opt.ko{border-color:var(--alert); background:color-mix(in srgb,var(--alert) 10%, var(--paper-2))}
.opt.ko .mark{border-color:var(--alert); background:var(--alert); color:var(--on-accent)}
.opt.part{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 12%, var(--paper-2))}
.opt.part .mark{border-color:var(--gold); background:var(--gold); color:var(--on-accent)}
.opt:disabled{cursor:default}

.seq{display:flex; flex-direction:column; gap:7px}
.slot{
  display:flex; align-items:center; gap:11px; padding:11px 13px; min-height:44px;
  border:1px dashed var(--rule); border-radius:2px; background:var(--paper-2);
  font-size:14px; text-align:left; width:100%; line-height:1.3;
}
.slot .n{font-family:var(--f-data); font-size:12px; font-weight:700; color:var(--ink-faint); width:16px; flex:none}
.slot.filled{border-style:solid; cursor:pointer}
.slot.ok{border-color:var(--green)}
.slot.ko{border-color:var(--alert)}
.pool{display:flex; flex-wrap:wrap; gap:7px}
.chip{padding:9px 12px; border:1px solid var(--rule); background:var(--paper-2); border-radius:2px; font-size:13.5px; cursor:pointer; text-align:left; line-height:1.3}
.chip:hover{border-color:var(--ink-faint)}
.chip.used{opacity:.3; pointer-events:none; text-decoration:line-through}

.match{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.match .col{display:flex; flex-direction:column; gap:7px}
.mitem{
  position:relative; padding:10px 11px; border:1px solid var(--rule); background:var(--paper-2);
  border-radius:2px; font-size:12.5px; line-height:1.32; cursor:pointer; text-align:left;
  min-height:54px; display:flex; align-items:center;
}
.mitem:hover{border-color:var(--ink-faint)}
.mitem.active{border-color:var(--blue); background:color-mix(in srgb,var(--blue) 10%, var(--paper-2))}
.mitem.ok{border-color:var(--green); background:color-mix(in srgb,var(--green) 10%, var(--paper-2))}
.mitem.ko{border-color:var(--alert); background:color-mix(in srgb,var(--alert) 9%, var(--paper-2))}
.mitem .tag{
  position:absolute; top:-7px; right:-6px; width:18px; height:18px; border-radius:99px;
  background:var(--blue); color:var(--on-accent); font-family:var(--f-data); font-size:10px; font-weight:700;
  display:grid; place-items:center;
}
.mitem.ok .tag{background:var(--green)}
.mitem.ko .tag{background:var(--alert)}

.fb{border-left:3px solid var(--rule); padding:11px 0 11px 13px; display:flex; flex-direction:column; gap:6px}
.fb.good{border-color:var(--green)}
.fb.part{border-color:var(--gold)}
.fb.bad{border-color:var(--alert)}
.fb .verdict{font-family:var(--f-data); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.fb.good .verdict{color:var(--green)}
.fb.part .verdict{color:var(--gold)}
.fb.bad .verdict{color:var(--alert)}
.fb p{font-size:14px; line-height:1.45; color:var(--ink-soft)}

/* ---------- pagina dati / profilo ---------- */
.datapage{border:1px solid var(--rule); border-radius:2px; background:var(--paper-2); padding:15px; display:flex; flex-direction:column; gap:14px}
.dp-top{display:flex; gap:14px}
.photo{
  flex:none; width:84px; height:104px; border:1px solid var(--rule); border-radius:2px;
  background:var(--paper-3); display:grid; place-items:center; overflow:hidden;
}
.photo .initials{font-family:var(--f-display); font-size:38px; color:var(--burgundy)}
.dp-fields{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; align-content:start; min-width:0}
.dp-fields .field{min-width:0}
.dp-fields .v{overflow:hidden; text-overflow:ellipsis}
.mrz{
  background:var(--paper-3); border-top:1px solid var(--rule); margin:0 -15px -15px;
  padding:10px 15px; overflow-x:auto;
}
.mrz pre{margin:0; font-family:var(--f-data); font-size:12px; letter-spacing:.09em; line-height:1.5; white-space:pre; color:var(--ink)}

.rank{display:flex; flex-direction:column; gap:11px}
.rank-row{display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:baseline}
.rank-row .pos{font-family:var(--f-data); font-size:12px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.rank-row .nm{font-size:15px; font-weight:600}
.rank-row .nm small{display:block; font-family:var(--f-data); font-size:9.5px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.rank-row .pc{font-family:var(--f-data); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--burgundy)}
.rank-row .track{grid-column:2/4; height:7px; background:var(--paper-3); border-radius:99px; overflow:hidden; margin-top:-2px}
.rank-row .track i{display:block; height:100%; background:var(--burgundy); border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.3,1)}
.rank-row.second .pc,.rank-row.second .track i{color:var(--blue); background:var(--blue)}
.rank-row.second .pc{background:none}
.rank-row.rest .pc{color:var(--ink-soft)}
.rank-row.rest .track i{background:var(--ink-faint)}

.comp{display:flex; flex-direction:column; gap:8px}
.comp-row{display:grid; grid-template-columns:1fr 44px; gap:10px; align-items:center; font-size:13.5px}
.comp-row .track{grid-column:1/2; height:5px; background:var(--paper-3); border-radius:99px; overflow:hidden}
.comp-row .track i{display:block; height:100%; background:var(--gold); border-radius:99px}
.comp-row .lbl{grid-column:1/2}
.comp-row .val{grid-row:1/3; grid-column:2/3; font-family:var(--f-data); font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft)}

.note{background:var(--paper-2); border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:2px; padding:12px 13px; font-size:14px; line-height:1.5}
.note .who{font-family:var(--f-data); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:5px}
.closing{font-family:var(--f-display); font-size:24px; line-height:1.2; text-align:center; color:var(--burgundy); padding:8px 0}

/* ---------- area docenti ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:2px; overflow:hidden}
.kpi{background:var(--paper-2); padding:12px 13px}
.kpi .n{font-family:var(--f-data); font-size:26px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.kpi .l{font-family:var(--f-data); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px}
.bars{display:flex; flex-direction:column; gap:13px}
.bar-row{display:grid; grid-template-columns:40px 1fr auto; gap:4px 10px; align-items:baseline; font-size:13.5px}
.bar-row.nocode{grid-template-columns:1fr auto}
.bar-row .c{font-family:var(--f-data); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--burgundy)}
.bar-row .nm{font-weight:500; line-height:1.2}
.bar-row .v{font-family:var(--f-data); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink)}
.bar-row .track{grid-column:1/-1; height:9px; background:var(--paper-3); border-radius:2px; overflow:hidden}
.bar-row.nocode .track{grid-column:1/-1}
.bar-row .track i{display:block; height:100%; background:var(--blue); border-radius:2px}
.bar-row.nocode .track i{background:var(--gold)}
.tablewrap{overflow-x:auto; border:1px solid var(--rule); border-radius:2px}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:520px}
th,td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--rule-soft); white-space:nowrap}
th{font-family:var(--f-data); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); background:var(--paper-2); position:sticky; top:0}
td.num{font-family:var(--f-data); font-variant-numeric:tabular-nums; text-align:right}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--paper-2)}
.pill{display:inline-block; padding:2px 7px; border-radius:99px; font-family:var(--f-data); font-size:10px; font-weight:700; letter-spacing:.1em;
  background:color-mix(in srgb,var(--burgundy) 14%, var(--paper)); color:var(--burgundy)}
.empty{padding:26px 14px; text-align:center; color:var(--ink-faint); font-size:14px}

@media (max-width:420px){
  .dp-fields{grid-template-columns:1fr}
  .match{gap:6px}
  .mitem{font-size:12px; padding:9px}
}

/* ---------- stampa: la carta del talento ---------- */
@media print{
  body{background:#fff !important; color:#111 !important}
  .desk{padding:0; display:block}
  .booklet{max-width:none; box-shadow:none; border-radius:0}
  .booklet::before{display:none}
  .bar,.row,.linkish,.btn{display:none !important}
  .sheet{padding:0; gap:14px}
  .datapage,.note{break-inside:avoid}
  .rank-row .track i,.comp-row .track i{print-color-adjust:exact; -webkit-print-color-adjust:exact}
}