:root{
  --surface:#f2f4f1;
  --surface-raised:#ffffff;
  --surface-sunk:#e7eae5;
  --ink:#141a17;
  --ink-muted:#556359;
  --ink-faint:#8a958e;
  --line:#dce1da;
  --line-strong:#c3cbc2;
  --accent:#0f4a3c;
  --accent-ink:#ffffff;
  --accent-soft:#e3ede7;
  --brass:#8c6f43;
  --positive:#2c6a4d;
  --warning:#8a5a15;
  --critical:#9b2c1d;
  --shadow:0 1px 2px rgba(20,26,23,.05), 0 8px 24px -12px rgba(20,26,23,.14);
  --scrim:rgba(20,26,23,.42);

  --step-0:1rem;
  --step-1:1.125rem;
  --step-2:1.3125rem;
  --step-3:1.625rem;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius:3px;
  --radius-pill:999px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#0e110f;
    --surface-raised:#171b18;
    --surface-sunk:#1f2421;
    --ink:#e9ede8;
    --ink-muted:#9aa59e;
    --ink-faint:#6e7a73;
    --line:#262c28;
    --line-strong:#39413b;
    --accent:#5cc0a1;
    --accent-ink:#0e110f;
    --accent-soft:#16302a;
    --brass:#c3a374;
    --positive:#5cc0a1;
    --warning:#dfa758;
    --critical:#e8796a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --scrim:rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"]{
  --surface:#0e110f;
  --surface-raised:#171b18;
  --surface-sunk:#1f2421;
  --ink:#e9ede8;
  --ink-muted:#9aa59e;
  --ink-faint:#6e7a73;
  --line:#262c28;
  --line-strong:#39413b;
  --accent:#5cc0a1;
  --accent-ink:#0e110f;
  --accent-soft:#16302a;
  --brass:#c3a374;
  --positive:#5cc0a1;
  --warning:#dfa758;
  --critical:#e8796a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.6);
}


@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/spectral-600.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/instrument-600.woff2) format("woff2")}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:var(--step-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Spectral", ui-serif, Georgia, "Times New Roman", serif;font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
code,.mono{font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;font-size:.875em}
img,svg{max-width:100%}
/* Un elemento con display:flex ignora l'attributo hidden: questa regola lo rimette in riga. */
[hidden]{display:none!important}

/* Filetto ottone: la firma del sistema, usata come marcatore di sezione. */
.rule{height:1px;background:var(--brass);opacity:.5;border:0;margin:0}
.eyebrow{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--brass);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


.wrap{max-width:52rem;margin:0 auto;padding:0 var(--space-4) var(--space-8)}
.wrap.wide{max-width:72rem}

/* ------------------------------------------------------------------- topbar */
.topbar{
  display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  padding:var(--space-5) 0;margin-bottom:var(--space-6);
  border-bottom:1px solid var(--line);
}
.topbar .brand{
  font-family:"Spectral", ui-serif, Georgia, "Times New Roman", serif;font-size:1.125rem;font-weight:600;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink);
}
.topbar .brand small{
  display:block;font-family:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--brass);margin-top:2px;
}
.topbar nav{margin-left:auto;display:flex;gap:var(--space-5);flex-wrap:wrap;font-size:.875rem}
.topbar nav a{color:var(--ink-muted);text-decoration:none;padding:var(--space-2) 0;min-height:40px;
  display:inline-flex;align-items:center}
.topbar nav a:hover{color:var(--ink)}

/* --------------------------------------------------------------- tipografia */
h1{font-size:1.75rem;line-height:1.15}
h2{font-size:1.3125rem;margin-bottom:var(--space-4)}
h3{font-size:1rem}
.muted{color:var(--ink-muted)}
.small{font-size:.875rem}
.hint{font-size:.8125rem;color:var(--ink-muted);margin-top:var(--space-2);line-height:1.5}

/* -------------------------------------------------------------------- blocchi */
.card{
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-5);margin-bottom:var(--space-4);
}
.panel-quiet{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4)}
.grid{display:grid;gap:var(--space-4)}
@media(min-width:44rem){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
.row{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:flex-end}
.row>.field{flex:1 1 12rem;margin-bottom:0}
.spread{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.stack{display:grid;gap:var(--space-3)}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-5) 0}

/* --------------------------------------------------------------------- form */
.field{margin-bottom:var(--space-4)}
label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:var(--space-2);color:var(--ink)}
input,textarea,select{
  width:100%;min-height:44px;
  font-family:inherit;font-size:1rem;line-height:1.45;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:var(--space-3);transition:border-color 140ms ease;
}
input:hover,textarea:hover,select:hover{border-color:var(--ink-faint)}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--accent)}
textarea{min-height:8rem;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--space-7)}

/* Target minimo 44px su tutto ciò che si tocca: è la regola numero due della
   skill del progetto, e su un pannello usato dal telefono si sente. */
button,.button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  font-family:inherit;font-size:.9375rem;font-weight:600;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid transparent;border-radius:var(--radius);
  padding:0 var(--space-5);cursor:pointer;text-decoration:none;
  transition:background 140ms ease,border-color 140ms ease;
}
button:hover,.button:hover{background:var(--ink)}
button.ghost,.button.ghost{
  background:transparent;color:var(--ink);border-color:var(--line-strong);
}
button.ghost:hover,.button.ghost:hover{background:var(--surface-sunk);border-color:var(--ink-faint)}
button.danger{background:var(--critical)}
button:disabled{opacity:.45;cursor:default}
button.small,.button.small{min-height:40px;font-size:.875rem;padding:0 var(--space-4)}

.copyable{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.copyable input{flex:1 1 9rem;font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;font-size:.875rem}

/* ------------------------------------------------------------------ messaggi */
.notice{
  border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-5);
  font-size:.9375rem;line-height:1.5;border:1px solid;border-left-width:3px;
}
.notice.ok{border-color:var(--positive);background:var(--accent-soft)}
.notice.err{border-color:var(--critical);background:var(--surface-raised)}
.notice.warn{border-color:var(--warning);background:var(--surface-raised)}

/* -------------------------------------------------------------------- dati */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th,td{text-align:left;padding:var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom:1px solid var(--line);vertical-align:top}
th{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--brass);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td code{word-break:break-all;color:var(--ink-muted)}
@media(max-width:35rem){th,td{padding:var(--space-3) var(--space-3) var(--space-3) 0}}

.pill{
  display:inline-block;font-size:.75rem;font-weight:600;padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill);background:var(--surface-sunk);color:var(--ink-muted);
  white-space:nowrap;
}
/* Stato codificato anche dalla forma, non solo dal colore: chi non distingue
   i colori deve leggere lo stato lo stesso. */
.pill.on{background:var(--accent-soft);color:var(--positive)}
.pill.on::before{content:"● ";font-size:.7em;vertical-align:1px}
.pill.off{background:var(--surface-sunk);color:var(--warning)}
.pill.off::before{content:"○ ";font-size:.7em;vertical-align:1px}

/* Le cifre sono il contenuto: niente scatola intorno, solo un filetto ottone. */
.stat{padding:var(--space-4) 0;border-top:2px solid var(--brass)}
.stat .n{
  font-family:"Spectral", ui-serif, Georgia, "Times New Roman", serif;font-size:2.25rem;font-weight:600;
  line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.stat .k{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-muted);margin-top:var(--space-2);
}

.chart-wrap{padding-bottom:var(--space-6)}
.chart{display:flex;align-items:flex-end;gap:var(--space-1);height:8rem;padding-top:var(--space-3)}
.chart .bar{
  flex:1;min-width:6px;min-height:2px;position:relative;
  background:var(--accent);border-radius:1px 1px 0 0;
}
.chart .bar span{
  position:absolute;bottom:-1.25rem;left:50%;transform:translateX(-50%);
  font-size:.625rem;color:var(--ink-muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

ul.plain{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}

/* Blocco richiudibile: quello che quasi nessuno compila sta chiuso. */
.fold{margin-top:var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-4)}
.fold summary{
  cursor:pointer;font-size:.875rem;font-weight:600;color:var(--ink-muted);
  min-height:44px;display:flex;align-items:center;list-style:none;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"+";color:var(--brass);font-size:1.1em;margin-right:var(--space-3);width:1ch}
.fold[open] summary::before{content:"−"}
.fold summary:hover{color:var(--ink)}
.fold[open] summary{margin-bottom:var(--space-4)}

/* -------------------------------------------------------------- interruttori */
input[type="checkbox"]{
  width:22px;height:22px;min-height:22px;padding:0;margin:2px 0 0;flex:none;
  accent-color:var(--accent);cursor:pointer;
}
.toggle-list{display:grid;gap:0}
.toggle-row{display:flex;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-4) 0;border-top:1px solid var(--line)}
.toggle-row:first-child{border-top:0;padding-top:0}
.toggle-row label{font-size:.9375rem;margin-bottom:var(--space-1);cursor:pointer;
  display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.toggle-row .hint{margin-top:0}

/* ---------------------------------------------------------------- richieste */
.req{
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-4) var(--space-5);
}
.req.urgent{border-left:3px solid var(--critical)}
.req-head{display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline}
.req-time{font-size:.8125rem;color:var(--ink-muted);white-space:nowrap}
.req-title{font-size:1.1875rem;margin:var(--space-2) 0 var(--space-4)}
.req-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.req-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.req-actions form{margin:0}

/* Striscia cliccabile: una cosa sola da fare, detta in una riga. */
.alert-strip{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);min-height:48px;
  background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);text-decoration:none;
  font-size:.9375rem;
}
.alert-strip.quiet{background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);
  border-left:3px solid var(--warning)}
.alert-strip.quiet span:last-child{color:var(--accent);font-weight:600}

ol.howto{margin:0;padding-left:1.25rem;display:grid;gap:var(--space-3);line-height:1.5}

/* Il numero degli usi e la strada verso il grafico: un pulsante, non un link in grigio. */
.usage-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  flex-wrap:wrap;margin-top:var(--space-4)}
.usage-strip p{font-size:.9375rem}
.usage-strip strong{font-family:"Spectral", ui-serif, Georgia, "Times New Roman", serif;font-size:1.25rem}

/* Riga di coda: un'informazione che non merita un riquadro. */
.quiet-line{
  margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-muted);
}