/* THE BOX — Control Room
   Identità dalla presentazione V3. Tema unico, scuro: il brand è nero.
   Nessun colore fuori da questi token. */

:root{
  --ink:#0A0A0A;
  --surface:#121212;
  --surface-2:#181817;
  --line:#2A2A28;
  --red:#E62027;
  --red-dim:#7A1218;
  --cyan:#2E9BCC;
  --bone:#F2F2F0;
  --grey:#8E8E8A;
  --grey-dim:#5C5C58;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html{background:#0A0A0A}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

/* ---------------- contenitore principale ---------------- */

.frame{
  position:relative;
  max-width:460px;
  margin:0 auto;
  padding:26px 20px 26px;
  min-height:100vh;
}
.frame::before,.frame::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;z-index:3;
}
.frame::before{top:8px;left:8px;border-left:2px solid var(--red);border-top:2px solid var(--red)}
.frame::after{bottom:8px;right:8px;border-right:2px solid var(--red);border-bottom:2px solid var(--red)}

/* ---------------- etichette macchina ---------------- */

.eyebrow{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
.eyebrow.mute{color:var(--grey-dim)}
.eyebrow.stale{
  color:var(--red);border:1px solid var(--red);padding:5px 7px;line-height:1.3;
  background:rgba(230,32,39,.10);
  flex-basis:100%;order:2;margin-top:11px;text-align:center;   /* riga sua: è lunga */
}
.lab{
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);display:block;
}
.dot{display:inline-block;width:5px;height:5px;background:var(--red);margin-left:6px;
  border-radius:50%;vertical-align:middle}

.rail{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:22px;
}
.rail .eyebrow{text-align:right}

/* ---------------- numeri ---------------- */

.big{
  font-weight:800;letter-spacing:-.03em;line-height:.94;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.neg{color:var(--red)}

/* ---------------- schermata di sblocco ---------------- */

.lock{padding:22px 0 0}
.wordmark{margin:0;line-height:0}
.wordmark img{
  display:block;width:100%;max-width:330px;height:auto;
}
.rail-brand{display:flex;align-items:center;gap:9px;min-width:0}
.rail-brand .eyebrow{white-space:nowrap}
.railmark{display:block;height:11px;width:auto;flex:none}
.lock .sub{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.42em;
  text-transform:uppercase;color:var(--bone);margin:20px 0 0;padding-left:2px;
}
.lockform{margin:38px 0 0;border-top:1px solid var(--line);padding-top:20px}
.lockform .lab{margin-bottom:9px}
.field{
  width:100%;display:block;background:var(--surface);color:var(--bone);
  border:1px solid var(--line);border-radius:0;padding:14px 13px;
  font-family:var(--mono);font-size:16px;letter-spacing:.08em;
}
.field:focus{outline:none;border-color:var(--red)}
.btn{
  margin-top:10px;width:100%;display:block;background:transparent;color:var(--red);
  border:1px solid var(--red);border-radius:0;padding:14px 12px;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;
}
.btn:hover,.btn:focus-visible{background:var(--red);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:progress}
.err{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--red);
  margin:14px 0 0;border-left:2px solid var(--red);padding-left:11px;line-height:1.6;
}
.note{
  font-family:var(--mono);font-size:10.5px;color:var(--grey-dim);letter-spacing:.03em;
  border-left:2px solid var(--red-dim);padding-left:12px;margin:34px 0 0;line-height:1.75;
}
.note b{color:var(--grey);font-weight:700}

/* ---------------- titolo di stato ---------------- */

.c-title{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.14;
  margin:2px 0 6px;text-wrap:balance;
}
.c-title em{font-style:normal;color:var(--red)}
.c-title .frase{
  display:block;font-size:17px;font-weight:600;letter-spacing:-.005em;
  color:#C9C9C5;margin-top:6px;line-height:1.3;
}
.statoline{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin:0 0 16px;
}
.statoline.ok{color:var(--cyan)}

/* ---------------- griglia a pannelli (cubo) ---------------- */

.cgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);border:1px solid var(--line);
}
.ctile{
  background:var(--ink);padding:15px 13px 13px;min-height:104px;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0;
  position:relative;
}
.ctile .lab{padding-right:30px}   /* spazio per il punto interrogativo */
.ctile.wide{grid-column:1/-1;min-height:0}
.ctile.lit{
  background:linear-gradient(180deg,rgba(230,32,39,.16),rgba(230,32,39,.04));
  box-shadow:inset 0 0 0 1px var(--red);
}
.ctile.lit .lab,.ctile.lit .num{color:var(--red)}
.ctile .num{font-size:26px;margin-top:8px}
.ctile .num.assente{color:var(--grey-dim)}
.ctile .tsub{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--grey-dim);
  margin-top:5px;line-height:1.4;
}
.ctile.lit .tsub{color:rgba(242,242,240,.62)}

/* ---------------- prossime date ---------------- */

.drow{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.drow:last-child{border-bottom:0;padding-bottom:2px}
.drows{margin-top:8px}
.drow .k{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);white-space:nowrap;
}
.drow .v{font-size:14px;font-weight:600;text-align:right;min-width:0}
.drow .v small{
  display:block;font-family:var(--mono);font-size:8.5px;font-weight:400;
  color:var(--grey-dim);letter-spacing:.06em;margin-top:2px;text-transform:uppercase;
}
.vuoto{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--grey-dim);
  margin:10px 0 2px;
}

/* ---------------- quadro annuale ---------------- */

.yearhead{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:2px;flex-wrap:wrap;
}
.yearhead .yr{
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.2em;
  color:var(--grey);text-transform:uppercase;
}
.ysel{display:flex;align-items:center;gap:6px}
.ysel button{
  background:none;border:0;padding:2px 4px;cursor:pointer;
  font-family:var(--mono);font-size:11px;color:var(--grey-dim);line-height:1;
}
.ysel button:hover:not([disabled]){color:var(--red)}
.ysel button[disabled]{opacity:.3;cursor:default}
.ysel .y{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--grey-dim);
  background:none;border:0;padding:2px 3px;cursor:pointer;
}
.ysel .y.on{color:var(--bone);font-weight:700}

.ybig{font-size:32px;margin:8px 0 2px}
.ysub{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--grey-dim)}
.yrow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 2px;
  border-top:1px solid var(--line);padding-top:12px;
}
.yrow .n{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.yrow .l{
  font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-dim);margin-top:3px;line-height:1.3;
}

/* ---------------- grafici ---------------- */

.chartbox{margin-top:12px}
.chartbox .lab{margin-bottom:10px}
svg{display:block;width:100%;height:auto}
.axis{font-family:var(--mono);font-size:7px;fill:var(--grey-dim);letter-spacing:.08em}
.zero{stroke:#3A3A36;stroke-width:1}
.gridline{stroke:#1E1E1C;stroke-width:1}

.proj{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;
  border-top:1px solid var(--line);padding-top:11px;
}
.proj .l{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);
}
.proj .v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--cyan);text-align:right}
.proj.stack{flex-direction:column;align-items:flex-start;gap:6px}
.proj.stack .v{text-align:left}
.proj .v.mancante{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.08em;
  color:var(--grey-dim);text-transform:uppercase}
.proj .v small{
  display:block;font-family:var(--mono);font-size:7.5px;font-weight:400;letter-spacing:.1em;
  color:var(--grey-dim);text-align:right;margin-top:2px;text-transform:uppercase;
}

.legend{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.legend span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);display:flex;align-items:center;gap:5px;
}
.legend i{width:9px;height:9px;display:inline-block}
.legend i.pos{background:var(--cyan)}
.legend i.negi{background:var(--red)}

/* ---------------- footer ---------------- */

.foot{
  margin-top:22px;border-top:1px solid var(--line);padding-top:12px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.foot .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--grey-dim)}
.foot .p{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--red);font-weight:700}

.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

@media (max-width:359px){
  .ctile .num{font-size:22px}
  .yrow{grid-template-columns:repeat(2,1fr);row-gap:12px}
}


/* ---------------- spiegazioni ---------------- */

.aiuto{
  position:absolute;top:9px;right:8px;z-index:2;
  width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:50%;
  font-family:var(--mono);font-size:10px;font-weight:700;color:var(--grey-dim);
  cursor:pointer;line-height:1;
}
.aiuto:hover,.aiuto:focus-visible,.aiuto[aria-expanded="true"]{
  border-color:var(--red);color:var(--red);
}
.aiuto.inline{
  position:static;display:inline-flex;vertical-align:middle;
  width:22px;height:22px;margin:0 0 4px 9px;
}
.proj .aiuto{position:static;display:inline-flex;width:20px;height:20px;
  margin-left:6px;vertical-align:middle}

.foglietto{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  max-width:460px;margin:0 auto;
  background:var(--surface-2);border-top:2px solid var(--red);
  padding:18px 20px 26px;
  box-shadow:0 -18px 44px rgba(0,0,0,.66);
}
.foglietto p{
  margin:9px 0 0;font-size:14px;line-height:1.5;color:#DCDCD8;max-width:40ch;
}
.foglietto .lab{color:var(--red);padding-right:34px}
.aiuto-x{
  position:absolute;top:10px;right:12px;
  width:32px;height:32px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:22px;line-height:1;color:var(--grey);
}
.aiuto-x:hover,.aiuto-x:focus-visible{color:var(--red)}

@media (prefers-reduced-motion:no-preference){
  .foglietto{animation:sale .18s ease-out}
  @keyframes sale{from{transform:translateY(100%)}to{transform:translateY(0)}}
}