/* i font sono in fonts.css: file a parte con cache lunga (decisione 5) */

:root{
  --ground:#F1F2F0; --surface:#FFFFFF; --surface2:#E9EBE7; --ink:#1B1D1F; --ink2:#4E5357;
  --mut:#787E83; --line:#DBDED9; --line2:#CBCFC9;
  --accent:#EE8127; --accent-txt:#AD5709; --accent-soft:#FBEAD9;
  --chartA:#2B7DC0; --chartB:#E1761A;
  --good:#2E7D4F; --good-soft:#DCEFE3; --warn:#9A6A10; --warn-soft:#F7ECD2; --bad:#B03A2A; --bad-soft:#F8E2DD;
  --shadow:0 1px 2px rgba(27,29,31,.05), 0 8px 28px -12px rgba(27,29,31,.14);
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#131518; --surface:#1C1F23; --surface2:#24282D; --ink:#EAEBE9; --ink2:#BEC3C7;
    --mut:#8D9398; --line:#31363C; --line2:#3D434A;
    --accent:#EE8127; --accent-txt:#F5A055; --accent-soft:#3A2A1A;
    --chartA:#3E82C4; --chartB:#D9731A;
    --good:#5CB884; --good-soft:#1E3328; --warn:#DBA84E; --warn-soft:#38301C; --bad:#E06B58; --bad-soft:#3B221E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="light"]{
  --ground:#F1F2F0; --surface:#FFFFFF; --surface2:#E9EBE7; --ink:#1B1D1F; --ink2:#4E5357;
  --mut:#787E83; --line:#DBDED9; --line2:#CBCFC9;
  --accent:#EE8127; --accent-txt:#AD5709; --accent-soft:#FBEAD9;
  --chartA:#2B7DC0; --chartB:#E1761A;
  --good:#2E7D4F; --good-soft:#DCEFE3; --warn:#9A6A10; --warn-soft:#F7ECD2; --bad:#B03A2A; --bad-soft:#F8E2DD;
  --shadow:0 1px 2px rgba(27,29,31,.05), 0 8px 28px -12px rgba(27,29,31,.14);
}
:root[data-theme="dark"]{
  --ground:#131518; --surface:#1C1F23; --surface2:#24282D; --ink:#EAEBE9; --ink2:#BEC3C7;
  --mut:#8D9398; --line:#31363C; --line2:#3D434A;
  --accent:#EE8127; --accent-txt:#F5A055; --accent-soft:#3A2A1A;
  --chartA:#3E82C4; --chartB:#D9731A;
  --good:#5CB884; --good-soft:#1E3328; --warn:#DBA84E; --warn-soft:#38301C; --bad:#E06B58; --bad-soft:#3B221E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.6 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent-txt)}
svg text{font-family:'Manrope',system-ui,sans-serif}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:14px;height:58px}
.logo{font:800 19px/1 'Manrope';letter-spacing:.02em}
.logo b{color:var(--accent)}
.topbar .sub{font-size:13px;color:var(--mut);border-left:1px solid var(--line2);padding-left:14px}
.topbar .grow{flex:1}
.tbtn{border:1px solid var(--line2);background:var(--surface);border-radius:99px;
  padding:7px 15px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink2)}
.tbtn:hover{border-color:var(--accent);color:var(--accent-txt)}
@media (max-width:640px){.topbar .sub{display:none}.tbtn{padding:6px 11px;font-size:12px;white-space:nowrap}}

/* ---------- hero ---------- */
.hero{padding:56px 0 34px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.eyebrow{font:800 11px/1 'Manrope';letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.hero h1{font-size:clamp(34px,4.6vw,54px);margin:14px 0 18px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lead{max-width:56ch;color:var(--ink2);font-size:17.5px}
.hero .lead b{color:var(--ink)}
.heroFacts{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.hf{border-left:3px solid var(--accent);padding-left:12px}
.hf b{display:block;font:500 26px/1.1 'Fraunces';font-variant-numeric:lining-nums}
.hf span{font-size:12.5px;color:var(--mut)}
.heroArt{justify-self:center}
@media (max-width:860px){.hero{grid-template-columns:1fr}.heroArt{display:none}}

/* ---------- cards / setup ---------- */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:920px){.grid2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow)}
.card h2{font-size:23px;margin:6px 0 4px}
.card .hint{font-size:13.5px;color:var(--mut);max-width:64ch}
.fieldrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.field{display:flex;flex-direction:column;gap:5px;min-width:130px;flex:1}
.field>label{font:700 11.5px/1 'Manrope';letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
select,input[type=number],input[type=text]{background:var(--surface);border:1px solid var(--line2);
  border-radius:9px;padding:8px 10px;width:100%;color:var(--ink)}
select:hover,input:hover{border-color:var(--accent)}
.chipnote{display:inline-block;background:var(--surface2);border-radius:99px;
  padding:3px 11px;font-size:12px;color:var(--ink2);margin-top:8px}

/* window table */
.tscroll{overflow-x:auto;margin-top:14px}
table.winlist{width:100%;min-width:500px;border-collapse:collapse;font-size:14px}
.winlist th{font:700 11px/1.3 'Manrope';letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line2)}
.winlist td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.winlist input,.winlist select{padding:6px 7px;font-size:13.5px}
.winlist input[type=number]{width:64px;font-variant-numeric:tabular-nums}
.winlist .nm{min-width:110px}
.winlist .del{border:0;background:none;cursor:pointer;color:var(--mut);font-size:16px;padding:4px 8px;border-radius:6px}
.winlist .del:hover{color:var(--bad);background:var(--bad-soft)}
.addbtn{margin-top:12px;border:1px dashed var(--line2);background:none;border-radius:10px;
  padding:9px 16px;font-weight:700;font-size:13.5px;color:var(--accent-txt);cursor:pointer;width:100%}
.addbtn:hover{border-color:var(--accent);background:var(--accent-soft)}
.winlist.wide{min-width:1120px}
.winlist tr.hgrp th{border-bottom:0;padding-bottom:2px;font-size:10.5px}
.winlist .hgrp .ga{color:var(--chartA)} .winlist .hgrp .gb{color:var(--chartB)}
.winlist select.mini{max-width:118px;font-size:12px;padding:5px 4px}
.winlist input.num{width:56px}
/* la Uw dichiarata dall'utente: vuota è discreta, compilata si vede — da quel momento
   il numero che la pagina mostra non è più il suo, ed è giusto che si noti */
.winlist input.uwman{width:62px;font-size:12.5px}
.winlist input.uwman::placeholder{color:var(--mut);opacity:.7;font-size:11px}
.winlist input.uwman.on{border-color:var(--accent);background:var(--accent-soft);font-weight:700;color:var(--accent-txt)}
.winlist.wide{min-width:1120px}
.gear{border:0;background:none;cursor:pointer;color:var(--mut);font-size:15px;padding:4px 7px;border-radius:6px}
.gear:hover,.gear.on{color:var(--accent-txt);background:var(--accent-soft)}
tr.subrow td{background:var(--surface2);padding:12px 14px}
.subgrid{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.subgrid .field{min-width:100px;max-width:170px;flex:0 1 auto}
.subgrid .sep{border-left:1px solid var(--line2);align-self:stretch}
.subgrid .fnote{font-size:11.5px;color:var(--mut);max-width:200px;line-height:1.4}
.locdrop{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--surface);
  border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);max-height:290px;overflow:auto}
.locdrop button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:8px 12px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.locdrop button:hover,.locdrop button.sel{background:var(--accent-soft)}
.locdrop small{color:var(--mut)}
.manloc{margin-top:10px;font-size:13px}
.manloc summary{cursor:pointer;color:var(--accent-txt);font-weight:700}
.manloc textarea{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:9px;
  padding:8px 10px;color:var(--ink);font:12px/1.45 ui-monospace,SFMono-Regular,monospace}
.cath{font:800 15px/1 'Manrope';margin-bottom:4px}
.winlist.cat{min-width:600px;font-size:13px}
.winlist.cat input{width:52px;padding:4px 5px;font-size:12.5px}
.winlist.cat input.wnm{width:150px}
.winlist.cat select{font-size:12px;padding:4px 4px;max-width:110px}
.winlist.cat .ro td{color:var(--ink2)}
.affb{display:inline-block;font:800 9.5px/1 'Manrope';letter-spacing:.05em;border-radius:99px;
  padding:3px 7px;background:var(--surface2);color:var(--mut);vertical-align:1px}
.affb.ok{color:var(--good);background:var(--good-soft)}

/* A/B panel */
.ab{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media (max-width:560px){.ab{grid-template-columns:1fr}}
.abcol{border:1.5px solid var(--line2);border-radius:12px;padding:14px 15px;position:relative}
.abcol.colA{border-color:color-mix(in srgb,var(--chartA) 55%,var(--line2))}
.abcol.colB{border-color:color-mix(in srgb,var(--chartB) 65%,var(--line2))}
.abtag{position:absolute;top:-11px;left:12px;font:800 11px/1 'Manrope';letter-spacing:.1em;
  padding:4px 10px;border-radius:99px;color:#fff}
.colA .abtag{background:var(--chartA)}
.colB .abtag{background:var(--chartB)}
.abcol .field{margin-top:10px}
.sysnote{font-size:12px;color:var(--mut);margin-top:9px;line-height:1.45}
.chk{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;color:var(--ink2);cursor:pointer}
.chk input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.uwlive{margin-top:11px;background:var(--surface2);border-radius:9px;padding:8px 11px;font-size:13px}
.uwlive b{font-variant-numeric:tabular-nums}

/* stato del salvataggio: l'utente deve poter vedere che i dati restano */
.saveDot{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);
  background:var(--surface2);border-radius:99px;padding:6px 13px;line-height:1.3}
.saveDot::before{content:'';width:8px;height:8px;border-radius:99px;background:var(--mut);flex:none}
.saveDot.ok::before{background:var(--good)}
.saveDot.ko::before{background:var(--chartA)}
.savecard textarea{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}

/* legenda delle quattro Uw */
.uwtab td{vertical-align:top;font-size:13px;line-height:1.5}
.uwtab .uwWhat,.uwtab .uwWhere{color:var(--mut);font-size:12.5px}
.uwtab .uwNum{font-variant-numeric:tabular-nums;font-weight:800;text-align:right;white-space:nowrap}
.uwtab th:nth-child(3),.uwtab th:nth-child(4){text-align:right}

/* nodo: tutte le sezioni del progetto, A e B affiancate, una scheda per sezione */
.nodoGrp{break-inside:avoid;page-break-inside:avoid}
.nodoHead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:4px}
.nodoHead h3{margin:0}
.nodoFori{font-size:12.5px;color:var(--mut)}
/* A sopra e B sotto, ciascuno a piena larghezza: affiancati il disegno si dimezza e le
   quote diventano illeggibili. La scala resta comune, quindi il confronto regge lo stesso. */
.nodoDuo{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:12px;min-width:0}
.nodoLato{border-top:1px solid var(--line2);padding-top:12px;min-width:0}
.nodoLato:first-child{border-top:0;padding-top:0}
.nodoLato h4{margin:0 0 4px;font:800 15px/1.3 'Manrope'}
.nodoLato .sub{margin-bottom:2px}

/* marca i riquadri che mostrano un foro solo, per non scambiarli con i totali */
.unfoloTag{display:inline-block;font:800 10px/1 'Manrope';letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-txt);background:var(--accent-soft,rgba(238,129,39,.14));border-radius:99px;
  padding:5px 10px;margin-bottom:8px}

/* compass */
.compassRow{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-top:6px}
@media (max-width:560px){.compassRow{grid-template-columns:1fr;justify-items:center}}
.compassLegend{font-size:13.5px;color:var(--ink2);max-width:40ch}

/* ---------- section nav ---------- */
nav.secnav{position:sticky;top:58px;z-index:40;background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-top:34px}
.secnav .in{display:flex;gap:8px;overflow-x:auto;padding:10px 20px;max-width:1160px;margin:0 auto;scrollbar-width:none}
.secnav a{flex:0 0 auto;font:700 12.5px/1 'Manrope';text-decoration:none;color:var(--ink2);
  border:1px solid var(--line2);border-radius:99px;padding:8px 14px;background:var(--surface)}
.secnav a:hover{color:var(--accent-txt);border-color:var(--accent)}

/* ---------- result sections ---------- */
section.tool{padding:52px 0 8px;scroll-margin-top:112px}
section.tool>.wrap>h2{font-size:clamp(26px,3vw,34px);margin:12px 0 10px}
.toolIntro{color:var(--ink2);max-width:72ch;font-size:15.5px}
.statRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:24px 0 20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.stat .lb{font:700 11px/1.35 'Manrope';letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.stat .v{font:500 clamp(26px,2.6vw,34px)/1.15 'Fraunces';font-variant-numeric:lining-nums;margin-top:6px}
.stat .v small{font-size:.52em;font-family:'Manrope';font-weight:700;color:var(--mut);margin-left:3px}
.stat .cx{font-size:12.5px;color:var(--mut);margin-top:5px;line-height:1.45}
.stat.hl{background:linear-gradient(135deg,var(--accent-soft),var(--surface));border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.stat.hl .v{color:var(--accent-txt)}
.stat .v.na{color:var(--mut);font-size:22px}
.chartCard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow)}
.chartCard h3{font-size:17px;font-family:'Manrope';font-weight:800;margin-bottom:2px}
.chartCard .sub{font-size:13px;color:var(--mut);margin-bottom:14px}
.legend{display:flex;gap:18px;font-size:13px;color:var(--ink2);margin:2px 0 10px;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.note{font-size:13px;color:var(--mut);margin-top:14px;max-width:78ch;line-height:1.55}
.note b{color:var(--ink2)}
details.tbl{margin-top:12px;font-size:13.5px}
details.tbl summary{cursor:pointer;font-weight:700;color:var(--accent-txt)}
/* il contenitore, non la tabella: su schermo stretto la tabella dei numeri usciva dalla pagina
   e trascinava con sé tutto il corpo del documento */
details.tbl>div{overflow-x:auto;margin-top:10px}
details.tbl table{border-collapse:collapse;width:100%;min-width:430px;font-variant-numeric:tabular-nums}
details.tbl th,details.tbl td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:right}
details.tbl th:first-child,details.tbl td:first-child{text-align:left}
details.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}

.badge{display:inline-block;font:800 11px/1 'Manrope';letter-spacing:.05em;border-radius:99px;padding:5px 10px}
.badge.g{background:var(--good-soft);color:var(--good)}
.badge.w{background:var(--warn-soft);color:var(--warn)}
.badge.b{background:var(--bad-soft);color:var(--bad)}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:860px){.duo{grid-template-columns:minmax(0,1fr)}}

/* tooltip */
#tip{position:fixed;z-index:99;pointer-events:none;background:var(--ink);color:var(--ground);
  font:600 12.5px/1.5 'Manrope';padding:8px 12px;border-radius:9px;max-width:260px;
  opacity:0;transition:opacity .12s;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#tip b{font-variant-numeric:tabular-nums}

/* summary */
.score{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px}
.scoreItem{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.scoreItem .t{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px}
.scoreItem .d{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.5}
.scoreItem .d b{font-variant-numeric:tabular-nums}
.payback{margin-top:22px}
.cta{margin-top:30px;background:linear-gradient(120deg,var(--accent-soft),var(--surface) 70%);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--r);
  padding:26px 28px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h3{font-size:22px}
.cta p{color:var(--ink2);font-size:14.5px;max-width:52ch;margin-top:6px}
.cta a.btn{background:var(--accent);color:#fff;text-decoration:none;font-weight:800;
  border-radius:99px;padding:13px 26px;font-size:15px;white-space:nowrap}
.cta a.btn:hover{filter:brightness(.94)}

/* metodo */
.metodo{margin:56px 0 30px;font-size:14px;color:var(--ink2)}
.metodo h2{font-size:24px;margin-bottom:10px}
.metodo ul{margin:10px 0 0;padding-left:20px;line-height:1.7}
.metodo details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--surface)}
.metodo summary{font-weight:800;cursor:pointer;color:var(--ink)}
footer.end{border-top:1px solid var(--line);padding:26px 0 40px;margin-top:20px;
  font-size:13px;color:var(--mut);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .stat,.chartCard{transition:transform .18s ease}
  svg .bar{transition:width .35s ease, x .35s ease}
}
@media print{
  header.top,nav.secnav,.addbtn,.winlist .del,.cta,#tip{display:none !important}
  body{background:#fff;color:#111}
  .card,.stat,.chartCard{box-shadow:none;break-inside:avoid}
  section.tool{padding:22px 0 0}
}
.src{font-size:.72em;letter-spacing:.04em;text-transform:uppercase;padding:1px 5px;border-radius:5px;
  background:var(--surface2);color:var(--mut);border:1px solid var(--line2);margin-left:4px;white-space:nowrap}
.atto{display:flex;gap:16px;align-items:flex-start;max-width:1080px;margin:52px auto 6px;
  padding:0 20px}
.atto .attoN{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--accent);
  color:#fff;font-weight:800;font-size:17px;display:grid;place-items:center;margin-top:2px}
.atto h2{margin:0 0 3px;font-size:clamp(19px,2.6vw,25px);letter-spacing:-.01em}
.atto p{margin:0;color:var(--mut);font-size:14px;max-width:62ch}
.navSep{flex:0 0 auto;padding:0 4px 0 10px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);opacity:.75;align-self:center;white-space:nowrap;
  border-left:1px solid var(--line2);margin-left:6px}
@media(max-width:640px){.atto{margin-top:34px;gap:12px}.atto .attoN{width:31px;height:31px;font-size:14px}}

/* ============================================================================
   TIPOGRAFIA — leggibilità del testo corrente
   Il grigio piccolo era troppo piccolo e troppo grigio: le note del metodo, le
   didascalie dei grafici e i suggerimenti dei campi sono testo che si legge davvero,
   non decorazione. Qui si alzano corpo, interlinea e contrasto, si dà una misura di
   riga sensata (la riga lunga si perde, quella corta spezza) e si sillaba in italiano,
   che senza sillabazione produce buchi vistosi su parole come "trasmittanza".
   ========================================================================== */
p,li,.note,.sub,.hint,.cx,.sysnote,.toolIntro{hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.note{font-size:13.6px;line-height:1.62;max-width:74ch;color:var(--ink2)}
.note b{color:var(--ink)}
.chartCard .sub{font-size:13.6px;line-height:1.55;max-width:80ch;color:var(--ink2)}
.card .hint{font-size:14px;line-height:1.6;max-width:66ch;color:var(--ink2)}
.sysnote{font-size:12.8px;line-height:1.55;max-width:52ch}
.stat .cx{font-size:12.8px;line-height:1.5}
.scoreItem .d{font-size:13.4px}
.metodo{font-size:14.5px;line-height:1.65}
.metodo li{margin-bottom:10px;max-width:88ch}
.legend{font-size:13.4px}
/* i numeri nelle tabelle stanno in colonna solo se hanno tutti la stessa larghezza */
table.winlist{font-variant-numeric:tabular-nums}
/* la nav delle sezioni scorre: senza sfumatura sembra tagliata a metà */
.secnav .in{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.secnav .in::-webkit-scrollbar{display:none}

@media (max-width:720px){
  body{font-size:15.5px}
  .card{padding:18px 16px}
  .chartCard{padding:16px 14px}
  section.tool{padding:38px 0 8px}
  .note,.chartCard .sub,.card .hint{max-width:none}
  /* le tabelle larghe scorrono da sole: qui si dice che si possono scorrere */
  .tscroll{position:relative}
  .tscroll::after{content:'scorri →';position:sticky;right:0;bottom:0;float:right;
    font:700 10px/1 'Manrope';letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
    background:var(--surface2);border-radius:99px;padding:5px 9px;margin-top:6px}
  .statRow{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .stat{padding:13px 14px}
}
/* I grafici sono SVG da 660 unità: schiacciati su un telefono le quote scendono sotto i 5 px e
   non si leggono più. Sotto una certa larghezza smettono di rimpicciolirsi e si scorrono, come
   le tabelle. Se il browser non conosce :has() resta il comportamento di prima. */
@media (max-width:860px){
  .chartCard div:has(> svg){overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .chartCard svg{min-width:540px}
  .nodoDis svg{min-width:620px}
}
@media print{
  /* in stampa la sillabazione resta, la misura di riga no: la pagina è più stretta */
  .note,.chartCard .sub,.card .hint,.toolIntro{max-width:none}
  .tscroll::after{display:none}
  .nodoGrp,.uwleg{break-inside:avoid;page-break-inside:avoid}
}

/* ---- stile dell'applicazione: guscio, numeri vecchi, avvisi misura ----
   Si appoggia alle variabili e alle classi della pagina (card, field, tbtn, …). */
.guscio{display:none;min-height:70vh;align-items:flex-start;justify-content:center;padding:56px 16px}
body[data-schermo="accesso"] #accesso{display:flex}
body[data-schermo="progetti"] #progetti{display:flex}
body[data-schermo="accesso"] > :not(#accesso):not(#tip):not(header):not(#misHint),
body[data-schermo="progetti"] > :not(#progetti):not(#tip):not(header):not(#misHint){display:none}
body[data-schermo="accesso"] .soloLavoro,
body[data-schermo="progetti"] .soloLavoro{display:none}
.guscioCard{max-width:460px;width:100%}
.guscioCard.largo{max-width:760px}
#prElenco table{width:100%;border-collapse:collapse}
#prElenco th,#prElenco td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left;font-size:14px;vertical-align:middle}
#prElenco .azioni{display:flex;gap:6px;flex-wrap:wrap}

/* i numeri dell'istante prima, mentre la porta risponde: si vede */
body.staleNumeri section.tool,
body.staleNumeri .heroFacts,
body.staleNumeri .uwlive{opacity:.55;transition:opacity .15s ease}
#calcStato{font-size:12.5px;color:var(--mut);align-self:center;white-space:nowrap}

/* misure: avviso, mai correzione muta */
input.misWarn{outline:2px solid var(--warn,#c98a00);outline-offset:1px}
#misHint{position:fixed;z-index:99;max-width:250px;background:var(--card,#fff);border:1px solid var(--line2);
  border-radius:8px;padding:6px 10px;font-size:12.5px;color:var(--ink2);box-shadow:0 6px 20px rgba(0,0,0,.18)}
#misHint.warn{border-color:var(--warn,#c98a00)}
input.mis{max-width:74px}

/* ============ LA QUARTA CONSEGNA: identità e documento ============ */

/* il componente unico dell'identità: stesso DOM nelle tre uscite, il contesto
   decide solo la misura (schermo compatto, foglio da lettera) */
#docTesta{max-width:1080px;margin:0 auto;padding:10px 20px 0}
.idnTesta .idnRiga{display:flex;align-items:center;gap:14px}
.idnTesta .idnLogo{max-height:44px;max-width:200px;object-fit:contain}
.idnTesta .idnRagione{font-weight:800;font-size:17px;letter-spacing:-.01em}
.idnTesta .idnDati{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.5}
.idnTesta .idnDoc{margin-top:8px;font-size:12.5px;color:var(--ink2);line-height:1.55}
.idnTesta .idnApertura{margin-top:8px;font-size:13.5px;line-height:1.6;max-width:80ch;color:var(--ink2)}
.idnChiusura{margin-top:26px;border-top:1px solid var(--line2);padding-top:14px}
.idnChiusura .idnChiTesto{font-size:13.5px;line-height:1.6;max-width:80ch;color:var(--ink2)}
.idnChiusura .idnChiFirma{font-weight:800;margin-top:8px}
.idnChiusura .idnDati{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.5}
.idnChiusura .idnLegali{font-size:10.5px;color:var(--mut);margin-top:8px;line-height:1.5;max-width:96ch}
.idnAvviso{color:var(--warn,#c98a00)}
#chiusuraDoc{max-width:1080px;margin:0 auto}

/* l'anteprima dal vivo nella schermata dell'identità */
.idnAnteprimaWrap{margin-top:14px;border:1px dashed var(--line2);border-radius:10px;padding:12px 14px;background:var(--surface2)}
#idnAnteprimaBox .idnTesta{padding:0}

/* il pannello dei documenti: sopra la pagina, mai dentro il flusso */
#docPan{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
#docPan[hidden]{display:none}
.docPanCard{max-width:860px;width:100%}
#docElenco table{width:100%;border-collapse:collapse}
#docElenco th,#docElenco td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left;font-size:13.5px;vertical-align:top}

/* ============ MODALITÀ STAMPA (?stampa=<report>) ============
   La pagina è la stessa: qui si spegne la macchina (comandi, guscio, salvataggio)
   e si accende il foglio. Il PDF passa da @media print, quindi le regole di
   stampa della pagina valgono già; queste si aggiungono. */
body.stampaDoc header.top, body.stampaDoc nav.secnav, body.stampaDoc #tip,
body.stampaDoc #misHint, body.stampaDoc #docPan,
body.stampaDoc .savecard, body.stampaDoc details.manloc,
body.stampaDoc .hero .heroArt,
body.stampaDoc button{display:none !important}
body.stampaDoc .valStampa{font-weight:700}
body.stampaDoc .valStampa.valVuoto::after{content:'—';color:var(--mut);font-weight:400}
body.stampaDoc #docTesta{padding-top:0;border-bottom:2px solid var(--line2);padding-bottom:10px;margin-bottom:8px}
/* la chiusura si stampa: non è più la CTA della pagina */
@media print{ body.stampaDoc #chiusuraDoc{display:block !important} }

/* il taglio SINTESI: esattamente #colpo e #riepilogo, coi loro atti (1 e 5).
   Tutto il resto del percorso non esiste su questo foglio. */
body.taglio-sintesi #ingressi,
body.taglio-sintesi .hero,
body.taglio-sintesi #nodo, body.taglio-sintesi #posa, body.taglio-sintesi #termica,
body.taglio-sintesi #solare, body.taglio-sintesi #oscuranti, body.taglio-sintesi #estate,
body.taglio-sintesi #condensa, body.taglio-sintesi #acustica, body.taglio-sintesi #luce,
body.taglio-sintesi .wrap.metodo,
body.taglio-sintesi .atto:not(:has(+ #colpo)):not(:has(+ #riepilogo)){display:none !important}
body.taglio-sintesi section.tool{padding-top:6px}

/* in stampa i campi affiancati si impilano: le colonne di -layout intrecciavano
   «273» col titolo della colonna accanto e l'unità finiva su un'altra riga —
   un numero senza unità sul foglio è un numero che stampa.js non può difendere */
body.stampaDoc .fieldrow{display:block}
body.stampaDoc .fieldrow .field{max-width:none !important;margin-top:6px}
body.stampaDoc .field label{display:inline;margin-right:6px}
body.stampaDoc .field .valStampa{display:inline}

/* ---- la quinta consegna: i cataloghi dell'organizzazione ---- */
/* L'AVVISO DI PLAUSIBILITÀ SI VEDE, o non esiste: è la regola di CLAUDE.md
   («un comando che cambia il risultato non lascia il disegno identico»)
   applicata alla validazione — plausibile.js lo pretende nel DOM. */
/* Gli avvisi vivono FUORI dal riquadro che scorre (vedi catAvvisiHTML): larghi quanto il
   pannello, mai tagliati, a ogni misura di schermo. */
.catAvvisi{margin:8px 0 0}
/* I COLORI SONO QUELLI TEMATIZZATI DELLA CASA, e non è pignoleria: `#c8151b` era un rosso che
   non esisteva in nessun'altra riga del client, e il foglio ha già la coppia `--bad` /
   `--bad-soft` (#B03A2A chiaro, #E06B58 scuro) proprio perché il rosso chiaro non regge sul
   fondo scuro. E `--muted` NON ESISTE: il token è `--mut`, con 41 usi qui dentro; scritto col
   nome sbagliato il ripiego rendeva #666 su #888 in entrambi i temi, cioè un contrasto sotto
   soglia proprio sulla traccia che il serramentista deve poter rileggere mesi dopo.
   L'avviso di plausibilità è il cuore di questa consegna: era l'unico elemento della pagina che
   ignorava il tema (`CLAUDE.md`: chiaro E scuro sempre). */
.catAvviso{margin:6px 0;padding:8px 10px;border-left:3px solid var(--bad);border-radius:4px;
  background:var(--bad-soft);font-size:13px;line-height:1.45}
.catAvviso .tbtn{margin-left:8px;font-size:12px;padding:2px 8px}
.catConferma{margin:6px 0;padding:6px 10px;border-left:3px solid var(--mut);
  border-radius:4px;font-size:12.5px;color:var(--mut);line-height:1.4}
.catSub td{background:transparent !important}
#catBox table.cat input, #catBox table.cat select{font-size:13px}
#catBox .cath{margin-bottom:2px}

/* la richiesta della classe (sesta consegna, Passo 4): non è un errore — è una
   domanda, e si distingue dall'avviso rosso: qui manca un dato, non ce n'è uno
   sospetto. Bordo con l'accento della casa, mai verde. */
.catChiede{margin:6px 0;padding:8px 10px;border-left:3px solid var(--acc);border-radius:4px;
  font-size:13px;line-height:1.45}
.catScheda{white-space:nowrap}
.catScheda .tbtn{font-size:12px;padding:2px 8px}

/* il riallineamento (sesta consegna): l'anteprima è una lista di righe con la
   scelta, i campi da → a, e i numeri del risultato che si muoveranno */
.rialRiga{display:block;margin:6px 0;padding:8px 10px;border-left:3px solid var(--acc);
  border-radius:4px;background:var(--card2, transparent);font-size:13px;line-height:1.45;cursor:pointer}
.rialRiga.rialInerte{border-left-color:var(--mut);color:var(--mut);cursor:default}
.rialCampi{margin:3px 0 0 22px;font-size:12.5px}
.rialRis{margin:3px 0 0 22px;font-size:12.5px;color:var(--mut)}
.rialCarta{margin:6px 0;padding:8px 10px;border-left:3px solid var(--bad);border-radius:4px;
  background:var(--bad-soft);font-size:13px;line-height:1.45}
#riallineaBox{margin-top:8px}

/* sul foglio del cliente i comandi «dal catalogo» non esistono: sono comandi,
   e la modalità stampa spegne i comandi (regola della quarta consegna) */
body.stampaDoc .catOrgRow, body.stampaDoc #catProgNota, body.stampaDoc #riallineaBox,
body.stampaDoc #riallineaApri{display:none !important}