/* ============================================================
   rubailab, foglio di stile delle pagine di contenuto
   Stesso mondo della homepage (segnaletica direzionale italiana):
   stessi token, stesso blu di giorno e lime di notte, stessa
   grammatica di pannelli e cartelli. La homepage tiene il suo CSS
   inline perché è una pagina sola; queste pagine condividono un
   file, servito con cache immutabile e versionato in query string.
   ============================================================ */

@font-face{font-family:'Overpass';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/overpass-700.woff2') format('woff2')}
@font-face{font-family:'Overpass';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/overpass-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/bricolage-800.woff2') format('woff2')}

:root{
  --bg:#FFFFFF;
  --ink:#12141F;
  --ink-soft:#3C3F52;
  --muted:#5B6178;
  --ink-fixed:#12141F;
  --paper:#FFFFFF;
  --paper-tint:#EEF1FC;
  --line:#D7DCEF;
  --blue-field:#1D2AC2;
  --blue-field-deep:#141C8C;
  --blue-brand:#4B4BFF;
  --lime:#E6FF4B;
  --cta-bg:var(--blue-field);--cta-fg:#FFFFFF;
  --field-accent:var(--blue-field);
  --select-bg:var(--blue-brand);--select-fg:#FFFFFF;
  --on-blue:#FFFFFF;
  --on-blue-soft:rgba(255,255,255,.76);
  --on-blue-line:rgba(255,255,255,.30);
  --shadow-sm:0 1px 2px rgba(18,20,31,.06), 0 8px 20px rgba(18,20,31,.07);
  --shadow-lg:0 4px 10px rgba(18,20,31,.10), 0 26px 54px rgba(18,20,31,.14);
  --radius:8px;
  --notch:14px;
  --theme-transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
html[data-theme="dark"]{
  --bg:#17181C;
  --ink:#F4F5F6;
  --ink-soft:#C7CAD1;
  --muted:#A0A5AD;
  --paper:#2E3036;
  --paper-tint:#1E2024;
  --line:#7A7E85;
  --blue-field:#202226;
  --blue-field-deep:#0E0F12;
  --blue-brand:var(--lime);
  --cta-bg:var(--lime);--cta-fg:#17181C;
  --field-accent:var(--lime);
  --select-bg:var(--lime);--select-fg:#17181C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.5);
  --shadow-lg:0 4px 14px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.55), 0 0 36px rgba(230,255,75,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:var(--theme-transition);
}
h1,h2,h3,h4{font-family:'Overpass',system-ui,sans-serif;letter-spacing:-.01em;line-height:1.12;margin:0;font-weight:800}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0}
button{font:inherit}
::selection{background:var(--select-bg);color:var(--select-fg)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--blue-brand);outline-offset:2px}

.wrap{width:min(1200px,calc(100% - 44px));margin-inline:auto}
.wrap-narrow{width:min(760px,calc(100% - 44px));margin-inline:auto}
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:100;background:var(--ink-fixed);color:#fff;padding:12px 20px;
  border-radius:6px;font-family:'Overpass',sans-serif;font-weight:700;font-size:.875rem;transition:top .2s ease;
}
.skip-link:focus{top:16px}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background-color .3s ease;
}
html[data-theme="dark"] header.nav{background:color-mix(in srgb, var(--bg) 82%, transparent)}
header.nav.scrolled{border-bottom-color:var(--line)}
/* Griglia 1fr auto 1fr e non space-between: le colonne laterali hanno larghezze
   diverse (logo 93px, azioni ~230px), quindi con space-between il gruppo di link
   finisce spostato a sinistra. Con le due colonne laterali elastiche i link
   restano centrati sulla pagina, identici su tutte le pagine. */
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:74px}
.nav-inner>.logo{justify-self:start}
.nav-inner>.nav-actions{justify-self:end}
/* sfondo CSS e non due immagini alternate: si scarica solo la variante
   del tema attivo, non entrambe */
.logo{display:flex;align-items:center}
.logo-mark{
  display:block;width:93px;height:24px;
  background:url('/img/logo-wordmark-light.png') no-repeat left center/contain;
  background-image:image-set(url('/img/logo-wordmark-light.webp') type('image/webp'),
                             url('/img/logo-wordmark-light.png') type('image/png'));
}
.logo-mark-lg{width:100px;height:26px}
html[data-theme="dark"] .logo-mark{
  background-image:url('/img/logo-wordmark-dark.png');
  background-image:image-set(url('/img/logo-wordmark-dark.webp') type('image/webp'),
                             url('/img/logo-wordmark-dark.png') type('image/png'));
}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-family:'Overpass',sans-serif;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);position:relative;padding:4px 0;transition:color .2s ease;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--blue-brand);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;flex:none;transition:var(--theme-transition),transform .2s ease;
}
.theme-toggle:hover{border-color:var(--blue-brand);transform:translateY(-1px)}
.theme-toggle svg{width:18px;height:18px}
.burger{display:none;width:44px;height:44px;border-radius:6px;border:2px solid var(--line);background:var(--paper);cursor:pointer;place-items:center}
.nav-scrim{display:none}
.burger span{display:block;width:16px;height:2px;background:var(--ink);border-radius:999px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink);border-radius:999px}
.burger span::before{top:-5px}.burger span::after{top:5px}
html:not([data-theme="dark"]) .theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none}

/* ---------- pulsanti ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Overpass',sans-serif;font-weight:700;font-size:.875rem;letter-spacing:.03em;text-transform:uppercase;
  padding:14px 22px 14px 24px;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg);box-shadow:var(--shadow-sm);clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.btn-primary:hover{box-shadow:var(--shadow-lg)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue-brand);color:var(--blue-brand)}
.btn-lg{padding:17px 28px 17px 30px;font-size:.9375rem}
.btn svg{width:15px;height:15px;flex:none}

/* ---------- intestazione di pagina: cartello blu ---------- */
.page-head{background:var(--blue-field);color:#fff;padding:clamp(40px,6vw,76px) 0 clamp(36px,5vw,60px);transition:background-color .3s ease}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin-bottom:22px;
  font-family:'Overpass',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-blue-soft)}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:"";width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.breadcrumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current="page"]{color:#fff}
.page-head h1{
  font-family:'Bricolage Grotesque','Overpass',system-ui,sans-serif;font-weight:800;
  font-size:clamp(2rem,4.8vw,3.375rem);line-height:1.06;letter-spacing:-.02em;color:#fff;text-wrap:balance;max-width:20ch;
}
.page-head .standfirst{margin-top:20px;font-size:clamp(1.0312rem,1.5vw,1.1875rem);line-height:1.68;color:var(--on-blue-soft);max-width:62ch}
.page-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 20px;
  font-family:'Overpass',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--on-blue-soft)}
.page-meta span{display:inline-flex;align-items:center;gap:8px}
.page-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-blue-line)}

/* ---------- corpo dell'articolo ---------- */
.prose{padding:clamp(44px,6vw,84px) 0 clamp(56px,7vw,100px)}
.prose h2{font-size:clamp(1.5rem,3vw,2.125rem);margin:clamp(44px,5vw,64px) 0 16px;text-wrap:balance;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.125rem,2vw,1.375rem);margin:34px 0 12px;text-wrap:balance;scroll-margin-top:96px}
.prose p{margin:0 0 18px;color:var(--ink-soft)}
.prose p.lead{font-size:clamp(1.0312rem,1.4vw,1.1875rem);line-height:1.72;color:var(--ink);margin-bottom:26px}
/* Elenchi: la voce è un blocco con il segnaposto posizionato, non un contenitore
   flex. Con display:flex ogni figlio diventa una colonna, quindi un <strong> a
   inizio voce finiva incolonnato a sinistra e il resto del testo di fianco. Con
   il segnaposto in position:absolute il testo torna a essere un flusso unico e
   il grassetto resta inline, come in un paragrafo normale. */
.prose ul,.prose ol{margin:0 0 24px;padding-left:0;list-style:none;display:grid;gap:12px}
.prose ol:not(.toc-list){counter-reset:step}
.prose ul>li,
.prose ol:not(.toc-list)>li{
  display:block;position:relative;color:var(--ink-soft);line-height:1.65;
}
.prose ul>li{padding-left:26px}
.prose ul>li::before{
  content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;
  border-top:2.4px solid var(--blue-brand);border-right:2.4px solid var(--blue-brand);transform:rotate(45deg);
}
.prose ol:not(.toc-list)>li{padding-left:36px}
.prose ol:not(.toc-list)>li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:.1em;width:22px;height:22px;border-radius:50%;
  background:var(--blue-field);color:#fff;display:grid;place-items:center;
  font-family:'Overpass',sans-serif;font-size:.6875rem;font-weight:800;
}
html[data-theme="dark"] .prose ol:not(.toc-list)>li::before{background:var(--lime);color:#17181C}
/* nelle voci "termine: definizione" il termine deve staccarsi senza spezzarsi */
.prose li>strong:first-child{color:var(--ink);font-weight:600}
.prose a:where(:not(.btn):not(.route-more)){color:var(--blue-brand);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.prose a:where(:not(.btn):not(.route-more)):hover{text-decoration-thickness:2.5px}
.prose strong{color:var(--ink);font-weight:600}
.prose code{background:var(--paper-tint);border:1px solid var(--line);padding:.1em .4em;border-radius:6px;font-size:.9em}
.prose hr{border:none;border-top:1px solid var(--line);margin:clamp(40px,5vw,60px) 0}

/* pannello integrativo bianco: riquadri di sintesi, avvertenze, fonti */
/* La barra accento è un ::before ritagliato da overflow:hidden, non un bordo:
   così segue la curvatura dell'angolo invece di tagliarlo. È lo stesso
   meccanismo delle schede servizio della homepage (.route::before), qui in
   posizione di riposo perché un pannello di testo non reagisce al passaggio. */
.panel{
  position:relative;overflow:hidden;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:clamp(20px,2.6vw,28px);margin:0 0 26px;transition:var(--theme-transition);
}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--field-accent)}
.panel h3{margin-top:0;font-size:1.0625rem}
.panel p:last-child,.panel ul:last-child,.panel ol:last-child{margin-bottom:0}
.panel-tint{background:var(--paper-tint)}
.panel-label{
  display:block;font-family:'Overpass',sans-serif;font-size:.6875rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}

/* tabella dei dati: scorre da sola, il corpo pagina non scorre mai in orizzontale */
.table-scroll{overflow-x:auto;margin:0 0 26px;border:1.5px solid var(--line);border-radius:var(--radius);transition:var(--theme-transition)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9375rem}
caption{text-align:left;padding:14px 18px 0;color:var(--muted);font-size:.8125rem}
th,td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
thead th{
  font-family:'Overpass',sans-serif;font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-tint);
}
tbody tr:last-child td{border-bottom:none}
td strong{color:var(--ink)}

/* indice di pagina */
.toc{background:var(--paper-tint);border:1.5px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:0 0 34px;transition:var(--theme-transition)}
.toc-list{counter-reset:toc;display:grid;gap:8px;margin:0;list-style:none}
.toc-list>li{display:flex;gap:10px;color:var(--ink-soft);font-size:.9375rem;line-height:1.5}
.toc-list>li::before{
  counter-increment:toc;content:counter(toc) ".";
  font-family:'Overpass',sans-serif;font-weight:800;font-size:.8125rem;color:var(--muted);
  flex:none;min-width:1.4em;text-align:right;padding-top:.12em;
}
/* i link dell'indice non sono link di lettura: niente sottolineatura permanente */
.prose .toc-list a{color:var(--ink-soft);text-decoration:none}
.prose .toc-list a:hover{color:var(--blue-brand);text-decoration:underline;text-underline-offset:3px}

.route-more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Overpass',sans-serif;font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-brand);border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .2s ease,gap .2s ease;
}
.route-more:hover{border-bottom-color:var(--blue-brand);gap:12px}
.route-more svg{width:15px;height:15px;flex:none}

/* blocco di chiusura: richiamo al contatto */
.cta-band{background:var(--blue-field);color:#fff;padding:clamp(44px,6vw,72px) 0;transition:background-color .3s ease}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.125rem);color:#fff;text-wrap:balance;max-width:24ch}
.cta-band p{margin-top:16px;color:var(--on-blue-soft);max-width:60ch}
.cta-band .btn-ghost{color:#fff;border-color:var(--on-blue-line)}
.cta-band .btn-ghost:hover{border-color:#fff;color:#fff}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
html[data-theme="dark"] .cta-band .btn-primary{background:var(--lime);color:#17181C}

/* ---------- footer ---------- */
footer{background:var(--paper-tint);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 32px;transition:var(--theme-transition)}
.foot-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot-top>div:first-child{max-width:34ch}
.foot-top p{margin-top:16px;color:var(--muted);font-size:.9375rem}
.foot-nav{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.foot-col h2{font-family:'Overpass',sans-serif;line-height:1.3;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:700}
.foot-col a{display:block;font-size:.9375rem;color:var(--ink-soft);padding:5px 0;transition:color .2s ease}
.foot-col a:hover{color:var(--blue-brand)}
/* Tre colonne con le laterali elastiche: la riga di aggiornamento resta centrata
   sulla pagina a prescindere dalla lunghezza del copyright e dei dati legali. */
.foot-bot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 24px;padding-top:26px;font-size:.8438rem;color:var(--muted)}
.foot-bot>:last-child{justify-self:end;text-align:right}
.foot-updated{display:inline-flex;align-items:center;gap:8px;justify-self:center;text-align:center}
.foot-updated svg{width:15px;height:15px;flex:none;color:var(--blue-brand)}
.foot-bot a{text-decoration:underline;text-underline-offset:2px}

@media(max-width:820px){
  .page-head h1{max-width:none}
}
/* menu mobile: identico a quello della homepage, stesso markup e stesso JS */
@media(max-width:720px){
  body{font-size:1rem}
  .nav-links{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 22px;
    transform:translateY(-130%);visibility:hidden;
    transition:transform .35s cubic-bezier(.2,.7,.3,1),visibility 0s linear .35s;
  }
  .nav-links.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow-lg)}
  .nav-scrim{
    display:block;position:fixed;inset:74px 0 0 0;background:rgba(18,20,31,.4);z-index:55;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
  }
  .nav-scrim.open{opacity:1;visibility:visible;transition:opacity .3s ease}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links a::after{display:none}
  .burger{display:grid}
  .nav-actions .btn{display:none}
  .foot-bot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .foot-bot>:last-child{justify-self:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}