/* ============================================================================
   LexNova Open — le 50 schede degli strumenti e le 13 categorie.
   open.css resta per i calcoli (tabelle, modali, risultati); qui la scheda
   viene rivestita con il sistema di hig.css: stessa barra, stessa scala
   tipografica, stesse superfici, modo scuro compreso.
   Ordine: open.css → hig.css → hig-tool.css.
   ========================================================================== */

/* i token vecchi di open.css rimandano a quelli semantici */
:root{
  --ink:var(--label); --ink-2:var(--label-2); --ink-3:var(--label-3); --muted:var(--label-3);
  --acc:var(--tint); --acc-ink:var(--tint-ink); --acc-soft:var(--tint-soft);
  --acc-line:var(--tint-line); --acc-deep:var(--deep);
  --line:var(--separator); --panel:var(--bg-tertiary); --bg-2:var(--bg-elevated);
  --bg-card:var(--bg-elevated); --bg-soft:var(--bg-tertiary);
  --navy:var(--label); --teal:var(--tint-ink); --amber:var(--tint-ink);
  --amber-soft:var(--tint-soft); --green:var(--tint); --red:var(--red-ink); --warn:var(--red-ink);
  --radius:var(--radius-xl); --radius-sm:var(--radius-md);
  --display:var(--font);
}

/* ── impianto della scheda ───────────────────────────────────────────────*/
.sk-wrap{ max-width:900px; margin-inline:auto;
  padding:0 var(--gutter-safe) clamp(64px,8vw,96px) }
.sk-bc{ padding-top:clamp(28px,4vw,40px); font-size:var(--f-footnote);
  line-height:var(--lh-footnote); color:var(--label-3) }
.sk-bc a{ color:var(--tint-ink) }
.sk-h1{ margin:18px 0 12px; font-size:clamp(2rem,1.3rem + 2.4vw,3rem); line-height:1.08;
  font-weight:700; letter-spacing:-.035em; color:var(--label) }
.sk-lead{ margin-bottom:clamp(28px,3vw,40px); font-size:var(--f-lead); line-height:1.4;
  color:var(--label-2); max-width:56ch; letter-spacing:-.012em }

/* il calcolatore: la superficie che conta, in primo piano */
.sk-tool{ margin-bottom:clamp(40px,5vw,60px); padding:clamp(24px,3vw,34px);
  background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-soft) }

/* campi */
.fg{ margin-bottom:18px }
.fg label{ display:block; margin-bottom:7px; font-size:var(--f-subhead); line-height:var(--lh-subhead);
  font-weight:600; letter-spacing:0; text-transform:none; color:var(--label) }
.fi{ width:100%; min-height:var(--tap); padding:12px 16px; font-family:inherit; font-size:var(--f-body);
  color:var(--label); background:var(--bg-elevated); border:1px solid var(--separator-opaque);
  border-radius:var(--radius-md); transition:border-color .18s ease, box-shadow .18s ease }
.fi:focus{ border-color:var(--tint-ink); box-shadow:0 0 0 3px var(--tint-soft) }
.fi-row,.fi-row-3{ gap:14px }
.chk-row label{ font-size:var(--f-callout); font-weight:500; color:var(--label-2) }
.chk-row input[type=checkbox]{ width:22px; height:22px; flex:none; margin:0;
  accent-color:var(--tint-ink) }
/* la riga della spunta è tutta bersaglio: 44px come chiede la linea guida.
   La casella e l'etichetta sono fratelli dentro .chk-row, legati da for=. */
.chk-row{ min-height:var(--tap); gap:12px }
.chk-row label{ display:flex; align-items:center; flex:1 1 auto;
  min-height:var(--tap); cursor:pointer }
.note{ margin-top:8px; font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-3) }
.hint{ margin-top:8px; padding:10px 14px; border-radius:var(--radius-md);
  background:var(--tint-soft); color:var(--tint-ink);
  font-size:var(--f-footnote); line-height:var(--lh-footnote) }

/* bottoni del calcolatore */
.btn-calc{ width:100%; min-height:var(--tap); margin-top:10px; padding:0 22px; border:none;
  border-radius:999px; background:var(--tint); color:var(--on-tint); box-shadow:none;
  font-family:inherit; font-size:var(--f-body); font-weight:600; letter-spacing:-.01em;
  transition:filter .18s ease, transform .18s ease }
.btn-calc:hover{ filter:brightness(1.06); transform:none }
.btn-calc:active{ transform:scale(.98) }
.btn-pdf{ width:100%; min-height:var(--tap); margin-top:10px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--separator); color:var(--label);
  font-family:inherit; font-size:var(--f-subhead); font-weight:600 }
.btn-pdf:hover{ border-color:var(--tint-line); background:var(--tint-soft); color:var(--tint-ink) }

/* risultato */
.result-box{ margin-top:22px; padding:24px 26px; border-radius:var(--radius-lg);
  background:var(--tint-soft); border:1px solid var(--tint-line); color:var(--label) }
.result-label{ font-size:var(--f-caption); font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--tint-ink); margin-bottom:8px }
.result-detail{ margin-top:10px; font-size:var(--f-footnote); line-height:var(--lh-footnote);
  color:var(--label-2) }

/* ── testo normativo ────────────────────────────────────────────────────*/
.sk-sec{ margin:clamp(40px,5vw,64px) 0 }
.sk-sec h2{ margin-bottom:14px; font-size:clamp(1.5rem,1.15rem + 1.2vw,2rem); line-height:1.15;
  font-weight:700; letter-spacing:-.03em; color:var(--label) }
.sk-sec h3{ margin:26px 0 8px; font-size:var(--f-title3); line-height:var(--lh-title3);
  font-weight:600; color:var(--label) }
.sk-sec p{ margin-bottom:14px; font-size:var(--f-callout); line-height:1.6;
  color:var(--label-2); max-width:68ch }
.sk-sec ul,.sk-sec ol{ margin:0 0 16px 20px; color:var(--label-2) }
.sk-sec li{ margin-bottom:8px; font-size:var(--f-callout); line-height:1.55 }
.sk-sec table{ width:100%; border-collapse:collapse; font-size:var(--f-subhead);
  background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-md); overflow:hidden; margin:16px 0 }
.sk-sec th,.sk-sec td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--separator) }
.sk-sec th{ font-weight:600; color:var(--label); background:var(--bg-tertiary) }
.sk-sec td{ color:var(--label-2) }
.table-scroll{ border:1px solid var(--separator); border-radius:var(--radius-md);
  overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain }
/* `max-content` allargherebbe anche le tabelle di ricerca, dove una colonna è
   prosa (la descrizione ATECO arriva a 77 caratteri): `min-content` tiene
   insieme i numeri e le parole senza spezzarli, e lascia andare a capo il testo */
.table-scroll .ref-table{ min-width:min-content }
/* su telefono 400px di finestra sono troppo pochi: la nota sotto la tabella
   veniva tagliata a metà riga */
@media (max-width:760px){ .table-scroll{ max-height:min(72vh,620px) } }
/* 10,5px maiuscoletto non si legge su un telefono */
.ref-table th{ font-size:var(--f-caption); line-height:var(--lh-caption); letter-spacing:.06em }
.ref-table td{ font-size:var(--f-footnote); line-height:var(--lh-footnote) }

/* domande frequenti della scheda: il titolo sta dentro la stessa carta */
.sk-faq{ background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-xl); overflow:hidden; padding:0 }
.sk-faq h2{ margin:0; padding:24px 22px 18px; border-bottom:1px solid var(--separator);
  font-size:var(--f-title2); line-height:var(--lh-title2); letter-spacing:-.025em }
.sk-faq details{ border:none }
.sk-faq details + details{ border-top:1px solid var(--separator) }
.sk-faq details:last-of-type{ border-bottom:none }
.sk-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  list-style:none; min-height:var(--tap); padding:18px 22px; font-size:var(--f-body);
  line-height:var(--lh-body); font-weight:600; color:var(--label); cursor:pointer }
.sk-faq summary::-webkit-details-marker{ display:none }
.sk-faq summary::marker{ content:"" }
.sk-faq summary:hover{ background:var(--tint-soft) }
.sk-faq summary::after{ content:""; width:11px; height:11px; flex:none;
  border-right:2px solid var(--label-3); border-bottom:2px solid var(--label-3);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease, border-color .2s ease }
.sk-faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px);
  border-color:var(--tint-ink) }
.sk-faq .a{ padding:0 22px 20px; font-size:var(--f-callout); line-height:1.55; color:var(--label-2) }

/* strumenti collegati */
.sk-rel{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:14px; margin-top:18px }
.sk-rel a{ display:block; padding:18px 20px; border-radius:var(--radius-lg);
  background:var(--bg-elevated); border:1px solid var(--separator);
  transition:border-color .2s ease, transform .2s ease }
.sk-rel a:hover{ border-color:var(--tint-line); background:var(--bg-elevated); transform:translateY(-2px) }
.sk-rel b{ display:block; margin-bottom:4px; font-size:var(--f-callout); line-height:1.3;
  font-weight:600; color:var(--label) }
.sk-rel span{ font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-2) }
.sk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:14px; margin:20px 0 36px }
.sk-grid a{ display:block; padding:20px 22px; border-radius:var(--radius-lg);
  background:var(--bg-elevated); border:1px solid var(--separator);
  transition:border-color .2s ease, transform .2s ease }
.sk-grid a:hover{ border-color:var(--tint-line); transform:translateY(-2px) }
.sk-grid b{ display:block; margin-bottom:5px; font-size:var(--f-body); line-height:1.3;
  font-weight:600; letter-spacing:-.015em; color:var(--label) }
.sk-grid span{ font-size:var(--f-subhead); line-height:1.4; color:var(--label-2) }
.sk-catt{ margin:clamp(36px,4vw,52px) 0 6px; font-size:var(--f-h3); line-height:1.15;
  font-weight:600; letter-spacing:-.025em; color:var(--label) }
.sk-catt a{ color:inherit }

/* richiamo alla chat */
.sk-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin:clamp(36px,4vw,56px) 0; padding:28px 30px; border-radius:var(--radius-xl);
  background:var(--tint-soft); border:1px solid var(--tint-line) }
.sk-cta p{ margin:0; max-width:56ch; font-size:var(--f-callout); line-height:1.5; color:var(--label) }
.sk-cta a{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap);
  padding:0 22px; border-radius:999px; background:var(--tint); color:var(--on-tint);
  font-size:var(--f-body); font-weight:600; white-space:nowrap }
.sk-cta a:hover{ filter:brightness(1.06) }
.sk-upd{ margin-top:clamp(36px,4vw,52px); padding-top:18px; border-top:1px solid var(--separator);
  font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-3) }

/* ── il risultato del calcolo ─────────────────────────────────────────────
   open.css lo fissa a 32px: «€ 12.345.678,90» chiede ~226px in una scatola che
   a 320px ne ha 180, e non c'è nessun overflow lungo la catena fino a <body>,
   quindi diventa scorrimento orizzontale dell'intera pagina. */
.result-value{ font-size:clamp(1.5rem, 1.05rem + 2.2vw, 2rem); line-height:1.1;
  letter-spacing:-.03em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums }
.result-box{ padding:clamp(18px,4vw,24px) clamp(16px,4.5vw,26px) }
.sk-tool{ padding:clamp(16px, 4vw, 34px) }

/* il bottone «copia» era 11px maiuscoletto sovrapposto al risultato */
.btn-copy{ text-transform:none; letter-spacing:0; font-size:var(--f-footnote);
  font-weight:600; min-height:32px }
@media (max-width:560px){
  .btn-copy{ position:static; min-height:var(--tap); margin-bottom:12px }
}

/* le briciole di pane vanno a capo e sono toccabili */
.sk-bc{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px }
.sk-bc a{ display:inline-flex; align-items:center; min-height:var(--tap) }
/* i collegamenti dentro il piede sono in mezzo al testo: si allarga il bersaglio
   senza scucire la riga */
.ftr-in p a{ display:inline-block; padding:11px 6px; margin:0 -6px }



/* ── barra e piede della scheda ─────────────────────────────────────────*/
.hdr{ position:sticky; top:0; z-index:200; background:none; border:none;
  padding:calc(8px + env(safe-area-inset-top)) var(--gutter-safe) 0 }
/* il marchio stava su --wrap (1120) mentre il testo della scheda sta su 900:
   a 1440px logo e titolo erano disallineati di 126px */
.hdr-in{ max-width:900px; margin-inline:auto; display:flex; align-items:center; gap:10px;
  min-height:52px; padding:6px 8px 6px 16px; border-radius:999px; border:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease }
.is-scrolled .hdr-in{ background:var(--material); border-color:var(--material-line);
  -webkit-backdrop-filter:var(--material-blur); backdrop-filter:var(--material-blur);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.55) }
.brand{ display:inline-flex; align-items:center; gap:9px; min-height:var(--tap);
  min-width:0; flex:0 1 auto;
  font-size:var(--f-subhead); font-weight:600; letter-spacing:-.01em; color:var(--label) }
.brand img{ width:20px; height:20px; flex:none }
.brand span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hdr-nav{ display:flex; align-items:center; gap:2px; margin-inline:auto }
.hdr-nav a{ display:inline-flex; align-items:center; min-height:36px; padding:0 13px;
  border-radius:999px; font-size:var(--f-subhead); font-weight:500; color:var(--label-2) }
.hdr-nav a:hover{ color:var(--label); background:color-mix(in srgb, var(--label) 8%, transparent) }
.hdr-cta{ display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:36px;
  padding:0 16px; border-radius:999px; background:var(--tint); color:var(--on-tint);
  font-size:var(--f-subhead); font-weight:600; white-space:nowrap }
.hdr-cta:hover{ filter:brightness(1.06) }
/* Sotto i 900px le voci passano nel foglio del menu (#more/#sheet di hig.js):
   la soglia è la stessa della barra delle pagine principali, se no fra 760 e 900
   si vedrebbero insieme la navigazione e il bottone del menu. */
@media (max-width:900px){ .hdr-nav{ display:none } }

.ftr{ margin-top:clamp(56px,7vw,88px); background:var(--bg-elevated);
  border-top:1px solid var(--separator) }
.ftr-in{ max-width:900px; margin-inline:auto;
  padding:clamp(32px,4vw,48px) var(--gutter-safe);
  font-size:var(--f-subhead); line-height:1.6; color:var(--label-2) }
.ftr-in p{ margin-bottom:10px }
.ftr-in a{ color:var(--tint-ink) }
.ftr-note{ margin-top:16px; font-size:var(--f-footnote); color:var(--label-3) }

/* le finestre modali di open.js */
.modal{ background:var(--bg-elevated); border-radius:var(--radius-xl); color:var(--label) }
.modal-overlay{ background:rgba(0,0,0,.45) }
.modal-head{ border-bottom:1px solid var(--separator) }
.modal-close{ background:var(--bg-elevated); border:1px solid var(--separator); color:var(--label) }

/* fuoco visibile ovunque, anche dentro i calcolatori */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:3px;
}

/* ── togliere i tic anche sulle schede ───────────────────────────────────
   Le superfici si staccano col tono, non con un filo grigio attorno a tutto. */
.sk-tool{ border:none; background:var(--bg-muted); box-shadow:none }
.sk-faq{ border:none; background:var(--bg-muted) }
.sk-faq h2{ border-bottom:1px solid var(--separator) }
.sk-rel a,.sk-grid a{ border:none; background:var(--bg-muted) }
.sk-rel a:hover,.sk-grid a:hover{ background:var(--tint-soft) }
.result-box{ border:none }
.fi{ background:var(--bg-elevated) }
.sk-cta{ border:none }

/* col dito il bottone della barra è alto 44px come ogni altro bersaglio.
   Sta qui, in fondo, perché `.hdr-cta{min-height:36px}` è dichiarato in questo
   stesso foglio e a parità di peso vince l'ultima regola scritta. */
@media (pointer:coarse){
  .hdr-cta{ min-height:var(--tap) }
  .hdr-nav a{ min-height:var(--tap) }
}