/* Disegnatore grondaie Carli Metalli: stile comune ("vetro" sopra la carta millimetrata verde Carli) */
:root{
  --verde:#37DD00;          /* verde Carli (dal foglio Esempio.pdf) */
  --verde-scuro:#1E8A00;    /* per le scritte verdi: piu' leggibile sul bianco */
  --verde-ombra:rgba(30,110,0,.16);
  --rosso:#E01B1B;          /* valori in rosso, come nel foglio Esempio */
  --ink:#16201a;
  --ink-2:#3b4a40;
  --ink-3:#64736a;
  --rule:rgba(30,80,20,.14);
  --quota:#1d4f7a;
  --hl:#d42a16;
  --hl-soft:rgba(240,90,60,.13);
  --carta:#fdfefc;
  --vetro:rgba(255,255,255,.58);
  --vetro-2:rgba(255,255,255,.34);
  --bordo-vetro:rgba(255,255,255,.82);
  --font:"Bahnschrift","DIN Alternate","DIN Condensed","Roboto Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  --logo:"Arial Rounded MT Bold","Arial Rounded MT","Nunito","Arial Black",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font:15px/1.4 var(--font);font-stretch:92%;
  font-variant-numeric:lining-nums tabular-nums;-webkit-font-smoothing:antialiased;
  background-color:#f4faf1;
  /* carta millimetrata: linee ogni 2 mm, marcate ogni 10 mm (a schermo 1 mm = 5 px circa) */
  background-image:
    linear-gradient(rgba(55,221,0,.30) 1px,transparent 1px),
    linear-gradient(90deg,rgba(55,221,0,.30) 1px,transparent 1px),
    linear-gradient(rgba(55,221,0,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(55,221,0,.12) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px;
  background-position:-1px -1px;
  background-attachment:fixed;
}
/* luci colorate dietro il vetro: danno qualcosa da "rifrangere" */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 12% 18%,rgba(55,221,0,.22),transparent 70%),
    radial-gradient(34vw 34vw at 88% 12%,rgba(160,240,120,.28),transparent 70%),
    radial-gradient(44vw 40vw at 70% 92%,rgba(55,221,0,.16),transparent 70%),
    radial-gradient(30vw 30vw at 20% 95%,rgba(255,255,255,.7),transparent 70%);
}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
a{color:inherit}

/* ---------- vetro ---------- */
.vetro{
  position:relative;
  background:linear-gradient(140deg,var(--vetro),var(--vetro-2));
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--bordo-vetro);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 1px 2px rgba(20,60,10,.06),
    0 12px 34px var(--verde-ombra);
}
/* riflesso in alto, come una lastra curva */
.vetro::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 38%);
  mix-blend-mode:soft-light;
}

/* ---------- marchio ---------- */
.marchio{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.marchio b{
  font-family:var(--logo);font-weight:900;font-size:26px;letter-spacing:.5px;
  color:rgba(255,255,255,.92);-webkit-text-stroke:1.6px var(--verde);paint-order:stroke fill;
}
.marchio span{font-size:13px;color:var(--verde-scuro);margin-top:3px;letter-spacing:.2px}

/* ---------- barra in alto ---------- */
.barra{
  position:sticky;top:12px;z-index:30;margin:12px auto 0;max-width:1480px;
  display:flex;align-items:center;gap:18px;padding:10px 14px 10px 20px;border-radius:20px;
}
.barra .sep{width:1px;align-self:stretch;background:var(--rule)}
.barra .titolo{min-width:0;flex:1 1 auto}
.barra .titolo h1{font-size:22px;line-height:1.1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .titolo small{display:block;color:var(--ink-3);font-size:13px}

/* ---------- pulsanti ---------- */
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{
  height:40px;padding:0 16px;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.9);color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(20,60,10,.08),0 4px 12px rgba(20,60,10,.08);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(20,60,10,.1),0 8px 18px rgba(20,60,10,.12)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.pri{
  color:#0d2a03;border-color:rgba(255,255,255,.6);
  background:linear-gradient(180deg,#5cf02a,var(--verde));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,80,0,.15),0 6px 16px rgba(55,221,0,.35);
}
.btn.quiet{background:transparent;border-color:transparent;box-shadow:none}
.btn.quiet:hover:not(:disabled){background:rgba(255,255,255,.5);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.lnk:focus-visible{outline:3px solid var(--quota);outline-offset:2px}

noscript{display:block;padding:20px;text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* browser senza sfocatura: vetro piu' opaco, si legge lo stesso */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vetro{background:rgba(255,255,255,.9)}
}

/* margine dai bordi della finestra per barra e area di lavoro */
.barra,.lavoro{width:calc(100% - 28px)}
@media (max-width:1000px){.barra,.lavoro{width:auto}}