/* Bowling Savona — design system unico. Costruzione presa dal marchio:
   PIENO GIALLO + KEYLINE NERA. Il giallo e' sempre fondo, mai testo su chiaro
   (#F7C600 su bianco = 1,61:1). Il rosso della boccia non e' mai uno stato. */
:root{
  /* ================= MARCHIO ================= */
  --brand:        #F7C600;  /* --ink sopra = 11,48:1 */
  --brand-deep:   #C79E00;  /* :active del giallo · --ink sopra = 7,33:1 */
  --ink:          #101418;  /* bianco sopra = 18,50:1 */
  --ink-2:        #1B2026;  /* fondo scuro elevato · bianco sopra = 16,39:1 */
  --keyline:      0px;      /* tolto: rilievo morbido, il giallo non ha piu' il contorno nero */

  /* ================= SUPERFICI E TESTO ================= */
  --bg:           #EDEFF2;
  --surface:      #FFFFFF;
  --surface-2:    #F7F8FA;
  --line:         #DCE0E6;  /* SOLO filetti decorativi, mai il confine di un bersaglio */
  --line-strong:  #767F8C;  /* bordo di OGNI controllo · 4,05:1 bianco */
  --text:         #14171C;  /* 17,96:1 bianco */
  --muted:        #55606D;  /* 6,40:1 bianco · 5,56:1 su --bg */
  --on-dark:      #FFFFFF;
  --on-dark-mute: #B9C1CC;  /* 10,18:1 su --ink · 9,02:1 su --ink-2 */

  /* ================= STATI =================
     --danger e' piu' cupo di --brand-red: allarme e marchio non si confondono. */
  --ok:            #0E7A3A; /* 5,44:1 bianco */
  --ok-bg:         #DDF3E3;
  --ok-ink:        #0B4D27; /* 8,55:1 su --ok-bg */
  --ok-bright:     #35D07F; /* 9,23:1 su --ink — esiste solo su fondo scuro */
  --danger:        #B01E14; /* 6,90:1 bianco */
  --danger-bg:     #FBE3E1;
  --danger-ink:    #7A140D; /* 8,88:1 su --danger-bg */
  --danger-bright: #FF6A5A; /* 6,57:1 su --ink — solo su fondo scuro */
  --warn-bg:       #FEF3C7; /* significato UNICO: "in sospeso, c'e' qualcosa da fare" */
  --warn-ink:      #6B4A02; /* 7,24:1 su --warn-bg */
  --info-bg:       #E2E8F2;
  --info-ink:      #1C3457; /* 10,16:1 su --info-bg */
  --neutral-bg:    #E4E7EC; /* --text sopra = 14,49:1 */

  /* ============ SERIE GRAFICI: rampa neutra, mai giallo ne' rosso ============ */
  --s1:#101418; --s2:#33404E; --s3:#55606D; --s4:#7C8794; --s5:#8E98A5; --s6:#B4BCC7;

  /* ================= TIPOGRAFIA =================
     Karla = parole. Oswald = cifre e segnaletica. I fallback condensati
     esistono su Windows: senza rete gli importi restano stretti. */
  --font:      "Karla", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-head: "Oswald", "Bahnschrift Condensed", "Bahnschrift SemiCondensed",
               "Avenir Next Condensed", "Arial Narrow", "Segoe UI Semibold", var(--font);
  --t-micro:   .75rem;
  --t-small:   .875rem;
  --t-body:    1rem;
  --t-lead:    1.125rem;
  --t-money:   1.25rem;
  --t-h2:      1.375rem;
  --t-h1:      1.75rem;
  --t-hero:    2.25rem;
  --t-verdict: clamp(1.6rem, min(4vw, 7vh), 4rem); /* riservata: nient'altro ci arriva */
  --track:     .08em;

  /* ================= SPAZIO, FORMA, BERSAGLI ================= */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --tap:56px; --tap-sm:52px; --tap-lg:68px;

  /* ============ MISURE DELLA SHELL — unico punto di verita' ============ */
  --topbar-h:78px;   /* targa del marchio 62px + 2x8 di padding: e' l'altezza vera */
  --nav-h:54px;
  --stick: calc(var(--topbar-h) + var(--nav-h));
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ================= FIRMA: LINEA DI FALLO =================
     4px giallo + 2px nero. Il nero porta il contrasto che il giallo da solo
     non ha, quindi l'indicatore di stato passa WCAG 1.4.11. */
  --foul: linear-gradient(to bottom, var(--brand) 0 4px, var(--ink) 4px 6px);
  --foul-h: 6px;

  /* ================= OMBRE E MOVIMENTO ================= */
  /* Rilievo morbido: ombre sfumate al posto di quelle nette. --alzata e' il
     riposo, --alzata-giu l'elemento premuto, che si abbassa otticamente. */
  --shadow:      0 1px 2px rgba(16,20,24,.06), 0 8px 26px rgba(16,20,24,.09);
  --alzata:      0 1px 2px rgba(16,20,24,.10), 0 4px 12px rgba(16,20,24,.10);
  --alzata-giu:  0 1px 2px rgba(16,20,24,.16);
  --shadow-up:   0 -8px 28px rgba(16,20,24,.22);
  --dur-tap:   90ms;
  --dur-state: 160ms;
  --ease:      cubic-bezier(.2,0,0,1);
}

/* 16px sul telefono, ~19px sul monitor del banco: sostituisce ogni media query tipografica. */
html{ font-size: clamp(1rem, .9rem + .35vw, 1.25rem); -webkit-tap-highlight-color:transparent; }

/* Cifre tabellari dove il font le ha: Karla si', Oswald no (per questo le colonne td.num stanno in Karla). */
:where(.num, .money, .amount, .stat .v, .ladder b, .faceoff .v, .pad-display,
       .v-amount, td.num, input.money, .pin-dots){
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
input.money:focus-visible{ box-shadow: inset 0 0 0 3px var(--brand); }
/* Sulle superfici scure l'anello nero sarebbe invisibile: passa al giallo del marchio. */
:where(.topbar, .day-strip, .verdict, .stat--key)
  :where(a, button, input, summary, [tabindex]):focus-visible{ outline-color: var(--brand); }
/* Bottone scuro/rosso: sta quasi sempre su una superficie chiara, dove il giallo fuori dal
   bordo fa 1,6:1. L'anello entra nel riempimento: 11,5:1 sul nero, 4,3:1 sul rosso. */
.btn-dark:focus-visible, .btn-danger:focus-visible{ outline-color: var(--brand); outline-offset: -5px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms!important; animation-iteration-count:1!important;
    transition-duration:1ms!important; scroll-behavior:auto!important;
  }
}

/* ---------------- base ---------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ overscroll-behavior-y: contain; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--t-body); line-height:1.45;
  -webkit-text-size-adjust:100%;
}
[hidden]{ display:none !important; }
h1,h2,h3{ font-family:var(--font-head); font-weight:600; letter-spacing:.01em; margin:0; }
h1{ font-size:var(--t-h1); } h2{ font-size:var(--t-h2); } h3{ font-size:var(--t-lead); }
.muted{ color:var(--muted); }
.small{ font-size:var(--t-small); }
.err{ color:var(--danger); font-weight:700; }
.center{ text-align:center; } .right{ text-align:right; }
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
#app{ min-height:100%; display:grid; grid-template-rows:auto auto 1fr auto; }
@media (min-width:721px){
  body:has(.cal-corpo) #app{ height:100%; }
}
/* Nessuna incolonnatura: al banco lo schermo e' largo e le bande grigie ai lati
   non contengono niente. Il 1400 stava scritto a mano anche nella barra in alto,
   nelle linguette e nel verdetto: toglierlo da uno solo li disallineava. */
/* min-width:0 e' obbligatorio: #app e' una griglia e senza il limite di 1400px
   una tabella larga faceva crescere la pagina intera invece di scorrere dentro
   il suo riquadro. */
.view{ padding:var(--sp-4) max(var(--sp-4), var(--safe-r)) var(--sp-4) max(var(--sp-4), var(--safe-l));
  width:100%; min-width:0; }
.page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4);
}
.page-head label{ display:flex; align-items:center; gap:var(--sp-2); margin:0; }
.page-head label input{ width:auto; }
.page-head p, .card-head p, .wz-head p{ margin:0; }
.card{
  background:var(--surface); border:1px solid transparent;
  border-radius:var(--r); padding:var(--sp-4); box-shadow:var(--shadow);
}
.card + .card, .grid + .card{ margin-top:var(--sp-4); }
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-3); flex-wrap:wrap;
}
.grid{ display:grid; gap:var(--sp-4); }
.grid.cols-2{ grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr)); }
.modal-card .grid.cols-2{ grid-template-columns:repeat(auto-fit, minmax(min(200px,100%), 1fr)); gap:var(--sp-2) var(--sp-3); }
.grid.cols-4{ grid-template-columns:repeat(auto-fit, minmax(min(170px,100%), 1fr)); }
@media (min-width:380px) and (max-width:945px){
  .grid.cols-4:has(> .stat:nth-child(5)){ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid.cols-4:has(> .stat:nth-child(5)) > .stat--key{ grid-column:1 / -1; }
}
@media (min-width:414px) and (max-width:793px){
  .grid.cols-4:has(> .tile){ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }
.empty{ padding:var(--sp-6); text-align:center; color:var(--muted); }
/* Icone a tratto: una sola regola per tutto lo sprite. */
.ico{
  width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------------- topbar e marchio ---------------- */
.topbar{
  position:sticky; top:0; z-index:30; min-height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  background:var(--ink); color:var(--on-dark);
  padding:var(--sp-2) max(var(--sp-4), var(--safe-r)) var(--sp-2) max(var(--sp-4), var(--safe-l));
  padding-inline:max(var(--sp-4), var(--safe-l));
}
.brand{ display:flex; align-items:center; text-decoration:none; }
/* Il marchio ha "SAVONA" in nero: sulla barra scura sta su una targa chiara, come
   l'insegna sopra l'ingresso. Alto abbastanza da leggersi anche la riga piccola. */
.brand-logo{
  display:block; height:62px; width:auto;
  background:var(--surface); border-radius:var(--r-sm);
  padding:5px 14px;
}
.topbar-right{ display:flex; align-items:center; gap:var(--sp-4); }
.icon-btn{
  min-width:var(--tap-sm); min-height:var(--tap-sm); border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.10);
  color:var(--on-dark); display:grid; place-items:center; cursor:pointer;
}
.icon-btn .ico{ width:22px; height:22px; }
.icon-btn[aria-pressed="true"]{
  background:var(--brand); color:var(--ink);
}
/* Menu utente: <details> nativo. "Esci" esce dall'angolo e diventa una riga da 56px. */
.user-menu{ position:relative; }
.user-menu > summary{
  list-style:none; cursor:pointer; min-height:var(--tap-sm);
  display:flex; align-items:center; gap:var(--sp-2);
  padding:0 var(--sp-3); border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.38);          /* 3,03:1: il confine si vede */
  background:rgba(255,255,255,.10); font-size:var(--t-small); font-weight:700;
}
.user-menu > summary::after{ content:"\25BE"; color:var(--brand); }
.user-menu > summary::-webkit-details-marker{ display:none; }
.user-menu-panel{
  position:absolute; right:0; top:calc(100% + var(--sp-2)); z-index:40;
  min-width:240px; background:var(--surface); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r);
  padding:var(--sp-3); box-shadow:var(--shadow); display:grid; gap:var(--sp-2);
}

/* ---------------- navigazione (linea di fallo) ---------------- */
.nav{
  position:sticky; top:var(--topbar-h); z-index:20;
  display:flex; gap:var(--sp-1); min-height:var(--nav-h);
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:0 max(var(--sp-3), var(--safe-r)) 0 max(var(--sp-3), var(--safe-l));
  padding-inline:max(var(--sp-3), var(--safe-l));
  overflow-x:auto; scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }
@media (min-width:721px) and (max-width:960px){
  .nav{ mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .nav a{ padding:0 var(--sp-3); }
}
.nav a{
  flex:0 0 auto; position:relative; display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--nav-h); padding:0 var(--sp-4); text-decoration:none;
  color:var(--muted); font-weight:700; font-size:var(--t-small); white-space:nowrap;
}
.nav a .ico{ width:20px; height:20px; }
.nav a[aria-current="page"]{ color:var(--text); }
.nav .lbl-short{ display:none; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; inset:auto var(--sp-3) 0 var(--sp-3);
  height:var(--foul-h); background:var(--foul);
}
.subnav{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.subnav a{
  min-height:var(--tap-sm); display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:0 var(--sp-4); border-radius:var(--r-pill); text-decoration:none;
  color:var(--muted); font-weight:700; font-size:var(--t-small);
  border:1px solid var(--line-strong); background:var(--surface);
}
.subnav a[aria-current="true"]{ background:var(--ink-2); border-color:var(--ink-2); color:var(--on-dark); }

/* Stato della giornata: sta dentro la barra in alto, non ruba una fascia alla
   schermata. Sul monitor del banco quei 90px sono la differenza fra vedere tutta
   la procedura e doverla scorrere. */
#dayStrip{ flex:0 1 auto; min-width:0; }
.day-strip{
  display:flex; align-items:center; gap:var(--sp-3); min-width:0;
  border-left:5px solid var(--brand); padding-left:var(--sp-3);
  font-family:var(--font-head); font-weight:600; font-size:var(--t-body);
  text-transform:uppercase; letter-spacing:var(--track); color:var(--on-dark-mute);
  white-space:nowrap;
}
.day-strip .long{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.day-strip .when, .day-strip .btn{ flex:none; }
@media (max-width:900px){ .day-strip .long{ display:none; } }
.day-strip .when{ color:var(--brand); }
.day-strip.none{ border-left-color:var(--danger-bright); color:var(--danger-bright); }
.day-strip .btn{ min-height:44px; padding:0 var(--sp-3); font-size:var(--t-small); }

/* ---------------- card statistica ---------------- */
.stat{
  background:var(--surface); border:1px solid transparent; border-radius:var(--r); box-shadow:var(--shadow);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  display:grid; grid-template-rows:auto 1fr; gap:2px; align-content:start; min-width:0;
  container-type:inline-size;
}
.stat .k{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track);
  color:var(--muted); font-weight:700;
}
.stat .v{
  font-family:var(--font-head); font-weight:500; font-size:min(var(--t-hero), 20cqw);
  line-height:1.05; color:var(--text); align-self:end;
}
/* Il display del registratore di cassa. UNO per schermata, sempre su denaro. */
.stat--key{ background:var(--ink); border-color:transparent; color:var(--on-dark);
  box-shadow:0 1px 2px rgba(16,20,24,.16), 0 8px 26px rgba(16,20,24,.26); }
.stat--key .k{ color:var(--brand); }
.stat--key .v{ color:var(--on-dark); font-size:min(calc(var(--t-hero) * 1.15), 20cqw); }
.stat--in  .v{ color:var(--ok); }
.stat--out .v{ color:var(--danger); }
.stat--in[data-nonzero]  .v::before{ content:"+"; }
.stat--out[data-nonzero] .v::before{ content:"\2212"; }

/* ---------------- bottoni ---------------- */
a, button, summary, label, input, select, textarea, [role="button"]{ touch-action:manipulation; }
.btn{
  min-height:var(--tap); padding:0 var(--sp-5); border-radius:var(--r);
  border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text);
  font:inherit; font-weight:700; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  touch-action:manipulation; user-select:none;
  box-shadow:var(--alzata);
  transition:box-shadow var(--dur-tap) ease-out, background-color var(--dur-tap) var(--ease);
}
.btn:hover{ background:var(--surface-2); }
.btn:active{ box-shadow:var(--alzata-giu); transition-duration:0s; }
.btn:disabled, .btn[aria-busy="true"]{
  opacity:.5; cursor:not-allowed; box-shadow:none;
}
.btn-primary{
  background:var(--brand); color:var(--ink); border-color:transparent;
  box-shadow:0 1px 2px rgba(16,20,24,.10), 0 4px 14px rgba(199,158,0,.42);
}
.btn-primary:hover{ background:var(--brand); }
.btn-primary:active{ background:var(--brand-deep); box-shadow:var(--alzata-giu); }
.btn-dark{ background:var(--ink); border-color:transparent; color:var(--on-dark);
  box-shadow:0 1px 2px rgba(16,20,24,.16), 0 4px 14px rgba(16,20,24,.30); }
.btn-dark:hover{ background:var(--ink-2); }
.btn-danger{ background:var(--danger); border-color:transparent; color:#fff;
  box-shadow:0 1px 2px rgba(16,20,24,.16), 0 4px 14px rgba(176,30,20,.32); }
.btn-danger:hover{ background:var(--danger); }
.btn-lg{ min-height:var(--tap-lg); font-size:var(--t-lead); width:100%; }
.btn-sm{ min-height:var(--tap-sm); padding:0 var(--sp-3); font-size:var(--t-small); }
.btn-sm:has(> .ico:only-child){ padding:0; width:var(--tap-sm); }
td .btn-sm:has(> .ico:only-child){ width:44px; min-height:44px; }
.btn-block{ width:100%; }

/* ---------------- tile azione rapida ---------------- */
.tile{
  flex-direction:column; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-3); padding:var(--sp-4); min-height:104px; text-align:left; width:100%;
}
.tile .ico{ width:26px; height:26px; opacity:.8; }
.tile .tile-name{
  font-family:var(--font-head); font-weight:600; font-size:var(--t-h2); line-height:1.1;
}
.tile-primary{
  background:var(--brand); color:var(--ink); border-color:transparent;
  box-shadow:0 1px 2px rgba(16,20,24,.10), 0 6px 18px rgba(199,158,0,.40);
}
.tile-primary:hover{ background:var(--brand); }

/* ---------------- form e campo importo ---------------- */
label{ display:block; font-weight:700; font-size:var(--t-small); color:var(--muted); margin-bottom:var(--sp-4); }
label .lbl{ display:block; color:var(--text); font-size:var(--t-body); margin-bottom:var(--sp-1); }
input, select, textarea{
  width:100%; min-height:var(--tap); padding:var(--sp-3);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); font:inherit; color:var(--text);
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{ text-align:left; min-height:1.3em; }
textarea{ min-height:84px; resize:vertical; }
.field-money{ display:block; }
.money-wrap{ position:relative; display:block; }
input.money{
  min-height:var(--tap-lg); text-align:right; padding-right:68px;
  font-family:var(--font-head); font-weight:500; font-size:var(--t-money); letter-spacing:.01em;
}
.pad-btn{
  position:absolute; right:var(--sp-2); top:50%; translate:0 -50%;
  width:var(--tap-sm); height:var(--tap-sm); border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface-2);
  color:var(--text); cursor:pointer; display:grid; place-items:center;
}
.hint{
  display:block; margin-top:var(--sp-2);
  background:var(--warn-bg); color:var(--warn-ink);
  border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3);
  font-size:var(--t-small); font-weight:700;
}

/* ---------------- modale e tastierino ---------------- */
body:has(#modal:not([hidden])){ overflow:hidden; scrollbar-gutter:stable; }
.modal{
  position:fixed; inset:0; z-index:60;
  background:rgba(16,20,24,.62);                    /* ripiego dove color-mix() manca */
  background:color-mix(in srgb, var(--ink) 62%, transparent);
  display:grid; place-items:end center;
  padding:var(--sp-4) var(--sp-4) 0; overflow-y:auto; overscroll-behavior:contain;
}
.modal-card{
  background:var(--surface); border-radius:var(--r) var(--r) 0 0;
  border-top:var(--foul-h) solid var(--brand);
  padding:var(--sp-5); padding-bottom:calc(var(--sp-5) + var(--safe-b));
  width:min(560px,100%); max-height:min(88dvh,760px); overflow-y:auto;
  box-shadow:var(--shadow-up);
  transition:translate var(--dur-state) var(--ease), opacity var(--dur-state) var(--ease);
}
@starting-style{ .modal-card{ translate:0 12px; opacity:0; } }
.modal-card.narrow{ width:min(420px,100%); }
.modal > .modal-card{ grid-area:1/1; }
.modal > .modal-card[inert]{ visibility:hidden; }
.modal:has(> .pad-card) > .wizard-card[inert]{ visibility:visible; }
@media (min-width:1000px){ .modal:has(> .wizard-card) > .pad-card{ place-self:end end; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.modal-actions{ display:grid; grid-template-columns:1fr 2fr; gap:var(--sp-4); margin-top:var(--sp-5); }
.modal-actions .btn{ width:100%; }

/* Cassetto del tastierino: velo trasparente, cosi' il verdetto resta visibile e vivo.
   Il velo continua pero' a ricevere i tocchi, altrimenti lo schermo fuori dal cassetto
   sarebbe del tutto morto e mancherebbe il fuori-per-chiudere delle altre modali. */
.modal.pad-open{ background:transparent; overscroll-behavior:auto; place-items:end end; padding-right:var(--sp-4); }
/* Il cassetto si ferma sotto al campo che si sta digitando (openNumpad misura --pad-top).
   Specificita' pari a .modal-card e piu' avanti nel sorgente, cosi' vince anche
   dentro la media query del telefono, dove .modal-card rialza il tetto. */
/* Il cassetto del tastierino non scorre mai: e' una colonna che si adatta, e
   se lo spazio e' poco sono i tasti a rimpicciolirsi, non il foglio ad
   allungarsi sotto il bordo dello schermo. */
.modal-card.pad-sheet{
  max-height: calc(100dvh - var(--pad-top, 200px));
  border-radius:var(--r) var(--r) 0 0;
  /* i tasti si stringono fin dove restano premibili; sotto quella soglia,
     su uno schermo davvero basso, il foglio scorre invece di tagliarli */
  display:flex; flex-direction:column; overflow-y:auto;
}
.modal-card.pad-sheet .pad-display{ min-height:56px; font-size:var(--t-h1); }
.modal-card.pad-sheet > *{ flex:0 0 auto; }
/* min-content: il tastierino cresce se c'e' spazio, mas non viene MAI compresso
   sotto i suoi tasti, o l'ultima riga finisce sotto i bottoni di conferma. */
.modal-card.pad-sheet .pad{ flex:1 1 auto; min-height:min-content; grid-auto-rows:minmax(40px, 1fr); }
.modal-card.pad-sheet .pad button{ min-height:0; }
.modal-card.pad-sheet .modal-actions{ margin-top:var(--sp-3); }
.pad-aux{ display:flex; justify-content:flex-end; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.pad-aux .btn{ min-height:44px; padding:0 var(--sp-3); font-size:var(--t-small); }
.pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-3); }
.pad button{
  min-height:clamp(44px, 8.5vh, 64px); font-family:var(--font-head); font-weight:500; font-size:1.6rem;
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--text); cursor:pointer; touch-action:manipulation;
  box-shadow:var(--alzata);
  transition:box-shadow var(--dur-tap) ease-out, background-color var(--dur-tap) ease-out;
}
.pad button:active{ box-shadow:var(--alzata-giu); background:var(--brand); transition-duration:0s; }
.icon-btn:active, .user-menu > summary:active{ background:rgba(255,255,255,.22); }
.nav a:active, .subnav a:not([aria-current="true"]):active, .cal .day:active, .cg-riga:active, .pad-btn:active{ background:var(--neutral-bg); }
.cal .ev:active{ background:var(--brand); }
.pad button .ico{ width:24px; height:24px; }
.pad-display{
  font-family:var(--font-head); font-weight:600; font-size:var(--t-hero);
  text-align:right; padding:var(--sp-3) var(--sp-4); min-height:72px;
  background:var(--ink); color:var(--brand);
  border-radius:var(--r-sm);
  white-space:nowrap; overflow-x:auto;
}
.pin-dots{
  letter-spacing:.4em; font-size:var(--t-hero); text-align:center; min-height:72px;
  display:grid; place-items:center; font-family:var(--font-head);
  background:var(--ink); color:var(--brand);
  border-radius:var(--r-sm);
}
@media (max-height:700px){
  .pad button{ min-height:52px; font-size:1.4rem; }
  .pad-display, .pin-dots{ min-height:60px; font-size:1.75rem; }
}

/* ---------------- procedura guidata ---------------- */
/* Dentro la pagina occupa tutta l'altezza rimasta, cosi' la chiusura di cassa
   non scorre mai: il riquadro e' la schermata. */
.view:has(> .closure-page){ display:flex; flex-direction:column; min-height:0; }
.closure-page{ display:flex; flex-direction:column; gap:var(--sp-4); height:100%; min-height:0; }
.report-page > .track{ gap:var(--sp-1); }
.report-page .track-step{ padding:var(--sp-2) var(--sp-3); gap:var(--sp-2); }
.report-page .track-step .n{ width:26px; height:26px; font-size:var(--t-small); border-width:1px; }
/* La spiegazione della fase serve dove sei, non sulle altre tre. */
.report-page .track-step:not(.on) .sub{ display:none; }
.report-page .track-step.on .sub{ font-size:var(--t-micro); }
/* Una riga sola per sapere dove sei: le pastiglie di fase, la nota della fase e
   il passo. Prima erano tre bande in fila che dicevano la stessa cosa e si
   mangiavano un quinto dello schermo. */
.closure-page .wz-head, .wizard-card .wz-head{ padding:var(--sp-2) var(--sp-5); gap:var(--sp-3); }
.closure-page .wz-head{ padding:var(--sp-2) var(--sp-4); border-bottom:none; }
.closure-page .wz-head h2{ display:none; }
.closure-page .wz-head .track{ margin:0; flex:1 1 auto; min-width:0; gap:var(--sp-1);
  grid-template-columns:repeat(4, minmax(0,1fr)); }
.closure-page .wz-head .track-step{ padding:var(--sp-1) var(--sp-2); gap:var(--sp-2); }
.closure-page .wz-head .track-step .n{ width:22px; height:22px; font-size:var(--t-micro); border-width:1px; }
.closure-page .wz-head .track-step .sub{ display:none; }
.closure-page .wz-head .track-step b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.closure-page .wz-bar{ padding:0 var(--sp-4); }
.closure-page .wz-bar i{ height:3px; }
/* Sullo stretto restano i numeri e il nome della fase in corso: quattro
   pastiglie impilate erano mezzo schermo per dire dove sei. */
@media (max-width:720px){
  .closure-page .wz-head{ gap:var(--sp-2); }
  .closure-page .wz-head .track{ grid-template-columns:repeat(4, auto); justify-content:start;
    flex:0 0 auto; }
  .closure-page .wz-head .track-step{ padding:2px 4px; }
  .closure-page .wz-head .track-step:not(.on) b{ display:none; }
  .closure-page .wz-head > div:not(.track){ display:none; }
}
.closure-page .wz-head > div, .wizard-card .wz-head > div{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; min-width:0; }
.closure-page .wz-head p, .wizard-card .wz-head p{ margin:0; }
.closure-page .wz-foot{ padding:var(--sp-2) var(--sp-5); padding-bottom:calc(var(--sp-2) + var(--safe-b)); }
.closure-page .wz-foot .btn{ min-height:clamp(48px, 7vh, 64px); }
.closure-page > .wizard{
  flex:1 1 0; height:auto; min-height:0;
  background:var(--surface); border:1px solid transparent;
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;
}
/* Occupa la larghezza e non scorre mai: un passo per schermata, tastierino
   sempre nello stesso punto. Al banco si lavora in piedi, con una mano sola. */
.wizard-card{
  width:min(1100px,100%); height:min(92dvh,900px); max-height:none;
  padding:0; overflow:hidden; border-radius:var(--r) var(--r) 0 0;
}
.wizard-card > .wizard{ height:100%; }
.wizard{ display:grid; grid-template-rows:auto auto 1fr auto; height:min(92dvh,900px); }
.wz-head{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line);
}
.wz-head h2{ margin:0; }
.wz-count{
  margin-left:auto; font-size:var(--t-micro); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--track); color:var(--muted);
}
.wz-bar{ display:flex; gap:3px; padding:0 var(--sp-5); }
.wz-bar i{ flex:1; height:5px; border-radius:3px; background:var(--neutral-bg); }
.wz-bar i.done{ background:var(--ink); }
.wz-bar i.on{ background:var(--brand); }

.wz-body{
  display:grid; grid-template-columns:1fr minmax(300px,420px);
  gap:var(--sp-5); padding:var(--sp-5); min-height:0; align-items:stretch;
}
.wz-body.wide{ grid-template-columns:1fr; }
.wz-focus{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; min-height:0; }
.wz-focus > *{ flex:0 0 auto; }
.wz-label{
  font-family:var(--font-head); font-size:var(--t-h2); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track);
}
.wz-value{
  /* La misura segue l'altezza vera della finestra, non solo la larghezza: su uno
     schermo basso il numero rimpicciolisce invece di farsi tagliare. */
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.8rem, min(3.4vw, 7.5vh), 3.6rem);
  line-height:1.12; text-align:right; padding:var(--sp-3) var(--sp-4);
  flex:0 0 auto; min-height:calc(1.12em + var(--sp-3) * 2 + 2px);
  background:var(--ink); color:var(--brand);
  border-radius:var(--r);
  white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.wz-value::-webkit-scrollbar{ display:none; }
.wz-value::after{ content:" €"; font-size:.5em; }
/* Colonna a se': quello che si e' gia' digitato resta sempre sotto gli occhi,
   alto quanto il corpo, senza rubare spazio al numero e al tastierino. */
.wz-context{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-4); font-size:var(--t-small);
  overflow-y:auto; min-height:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:0 var(--sp-5); align-content:start;
}
.wz-context-t{
  grid-column:1/-1; position:sticky; top:0; padding:var(--sp-2) 0 4px;
  background:var(--surface-2); color:var(--muted);
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track);
}
.wz-body:has(> .wz-context:not(:has(> .wz-context-t:only-child))){
  grid-template-columns:minmax(0,1fr) minmax(280px,360px) minmax(190px,260px);
  grid-template-rows:minmax(0,1fr);
}
@media (max-width:1150px){
  .wz-body:has(> .wz-context){ grid-template-rows:minmax(0,1fr) auto; }
  .wz-body > .wz-context{ grid-column:1/-1; max-height:22vh; }
  .closure-page .wz-side{ min-height:0; grid-template-rows:auto minmax(0,1fr); }
  .closure-page .wz-side .pad{ min-height:0; grid-auto-rows:minmax(44px,1fr); }
  .closure-page .wz-side .pad button{ min-height:0; }
}
.wz-context > div{ display:flex; justify-content:space-between; gap:var(--sp-3); padding:3px 0; color:var(--muted);
  border-bottom:1px solid var(--line); }
.wz-context b{ color:var(--text); font-variant-numeric:tabular-nums; }
/* Somma a vista: quello che c'e' gia' piu' quello che si digita, e il totale. */
.wz-somma{
  display:grid; grid-template-columns:1fr auto; gap:2px 0;
  background:var(--surface-2); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-4);
  font-size:var(--t-small); color:var(--muted);
}
.wz-somma b{ text-align:right; padding-left:var(--sp-4); color:var(--text); font-variant-numeric:tabular-nums; }
.wz-somma .tot{ padding-top:4px; border-top:1px solid var(--line-strong); font-weight:700; color:var(--text); }
.wz-side{ display:grid; gap:var(--sp-3); align-content:start; }
.wz-side .pad{ margin-top:0; }
.wz-wide{ display:flex; flex-direction:column; gap:var(--sp-3); min-height:0; overflow-y:auto; }
.wz-wide > *{ flex:0 0 auto; }
/* Passo a piu' campi: si sfrutta la larghezza invece di un numero per schermata,
   perche' le letture di una piattaforma si controllano guardandole insieme. */
/* Le letture: una scheda per tipo di biglietto, con il numero di ieri accanto
   al campo. La tabella minuscola di prima non si leggeva e non si toccava. */
/* Tre zone: le schede scorrono, i due campi della quadratura stanno sotto in
   fondo alla colonna (dove lo spazio avanzava) e non si muovono mai, il conto
   sta a destra. Erano dentro il riepilogo, e li' si schiacciavano a zero. */
.wz-letture{
  display:grid; gap:var(--sp-2) var(--sp-3); min-height:0; overflow:hidden;
  grid-template-columns:minmax(0,1fr) minmax(230px,290px);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"testa testa" "griglia sommario" "campi sommario";
}
.wz-testa{ grid-area:testa; display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.wz-testa .hint{ margin:0; flex:1 1 220px; font-size:var(--t-micro); padding:var(--sp-1) var(--sp-3); }
.wz-testa .btn{ margin-left:auto; }
.tab-letture{
  grid-area:griglia; overflow-y:auto; min-height:0;
  background:
    linear-gradient(var(--surface) 30%, transparent) top / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, rgba(16,20,24,.18), transparent) bottom / 100% 12px no-repeat scroll;
}
.tab-letture .sez{ margin:var(--sp-2) 0 var(--sp-1); font-size:var(--t-small); }
.wz-letture > .wz-sommario{ grid-area:sommario; overflow-y:auto; min-height:0; }
.wz-letture .som-corpo{ display:grid; gap:var(--sp-3); align-content:start; }
.wz-letture > .wz-campi{
  grid-area:campi; overflow:visible; margin:0;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  padding-top:var(--sp-2); border-top:1px solid var(--line);
}
.wz-letture > .wz-campi label{ grid-template-columns:auto minmax(90px, 130px); gap:2px var(--sp-3);
  grid-template-areas:"lbl campo" "hint campo"; align-items:center; }
.wz-letture > .wz-campi .lbl{ grid-area:lbl; align-self:end; }
.wz-letture > .wz-campi .money-wrap{ grid-area:campo; }
.wz-letture > .wz-campi .small{ grid-area:hint; align-self:start; }
/* la colonna e' stretta: la scaletta rinuncia alla colonna del segno larga */
.wz-letture .ladder > div{ grid-template-columns:1.4ch 1fr minmax(8ch,auto); padding-left:var(--sp-2); gap:var(--sp-2); }
.wz-letture .ladder{ font-size:var(--t-small); }

.letture-griglia{
  display:grid; gap:var(--sp-2);
  /* la misura vera della scheda: sotto questa si accavallava e la griglia
     partiva a scorrere di lato */
  /* auto-fit e non auto-fill: due soli contatori (le VLT) prendono la riga
     intera invece di stare stretti in un angolo con il numero tagliato. */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 336px), 1fr));
}
.lettura{
  display:grid; align-items:center; gap:1px 6px;
  grid-template-columns:auto minmax(7.5ch,1fr) auto auto;
  grid-template-areas: "nome nome nome nome" "prec oggi zero esito";
  padding:3px var(--sp-3) 4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
}
.lettura.scritta{ background:var(--surface); border-color:var(--line-strong); }
.lettura.nuovo{ border-color:var(--brand); box-shadow:inset 3px 0 0 var(--brand); }
.l-nome{ grid-area:nome; display:flex; align-items:baseline; gap:var(--sp-2); min-width:0; }
.l-nome b{ font-size:var(--t-small); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.l-nome span{ font-size:var(--t-micro); color:var(--muted); white-space:nowrap; }
.l-prec{ grid-area:prec; display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.l-prec span{ font-size:var(--t-micro); color:var(--muted); }
.l-prec b{ font-family:var(--font-head); font-size:var(--t-lead); font-variant-numeric:tabular-nums; }
.l-oggi{ grid-area:oggi; }
.l-oggi input.money{ min-height:44px; width:100%; max-width:16ch; padding:0 var(--sp-1);
  text-align:center; font-size:var(--t-lead); }
.l-oggi .pad-btn{ display:none; }
.l-zero{ grid-area:zero; min-height:44px; padding:0 8px; font-size:var(--t-micro); white-space:nowrap; }
.l-esito{ grid-area:esito; display:grid; justify-items:end; min-width:7.5ch; white-space:nowrap; }
/* Il campo che blocca l'avanzamento si fa trovare. */
input.money.manca{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }
.l-esito .vend{ font-size:var(--t-micro); color:var(--muted); font-weight:700; }
.l-esito .inc{ font-family:var(--font-head); font-variant-numeric:tabular-nums; }
.lettura.nuovo .l-prec::after{ content:" \2192 0"; font-size:var(--t-micro); font-weight:700; color:var(--warn-ink); white-space:nowrap; }

/* Sul telefono tre riquadri che scorrono per conto loro dentro mezzo schermo
   non si usano: una colonna sola, uno scorrimento solo, nell'ordine in cui si
   compila (schede, quadratura, conto). */
@media (max-width:900px){
  .wz-letture{ display:flex; flex-direction:column; gap:var(--sp-2); overflow-y:auto; }
  .wz-letture > *{ flex:0 0 auto; }
  .tab-letture, .wz-letture > .wz-sommario{ overflow:visible; }
  .letture-griglia{ grid-template-columns:1fr; }
}

.wz-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:var(--sp-3); align-content:start; overflow-y:auto; min-height:0;
}
.wz-grid label{ display:grid; gap:2px; align-content:start; }
.wz-grid .lbl{ font-size:var(--t-micro); }
.wz-grid .small{ font-size:var(--t-micro); line-height:1.25; }
.wz-grid input.money{ min-height:48px; }
.wz-sommario{ display:grid; gap:var(--sp-3); align-content:start; overflow-y:auto; min-height:0; }
/* Se non c'e' ancora niente da mostrare resta solo il titolo: meglio sparire. */
.wz-context:has(> .wz-context-t:only-child){ display:none; }
/* Lo scarto, a caratteri grandi, sopra le opzioni del motivo: si sceglie
   sapendo di quanto si sta parlando. */
.wz-occhiello{ display:grid; }
.scarto{
  display:grid; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r); background:var(--ink); color:var(--on-dark);
  border-top:var(--foul-h) solid var(--danger-bright);
}
.scarto .s-testa{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.scarto .k{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--on-dark-mute); }
.scarto .v{
  margin-left:auto; font-family:var(--font-head); font-weight:600; line-height:1.1;
  font-size:clamp(1.8rem, min(3vw, 6vh), 3rem); color:var(--danger-bright);
}
.scarto.piu{ border-top-color:var(--brand); }
.scarto.piu .v{ color:var(--brand); }
.scarto .s-conti{ display:flex; gap:var(--sp-5); flex-wrap:wrap;
  font-size:var(--t-small); color:var(--on-dark-mute); }
.scarto .s-conti b{ color:var(--on-dark); font-variant-numeric:tabular-nums; }

/* Il gesto che resta da fare, in cima al riepilogo della serata. */
.promemoria{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3);
  background:var(--warn-bg); color:var(--warn-ink);
  border-radius:var(--r); border-left:var(--foul-h) solid var(--ink);
}
.promemoria b{ display:block; font-family:var(--font-head); font-size:var(--t-lead); }
.promemoria span{ display:block; font-size:var(--t-small); }
.promemoria .btn{ margin-left:auto; }

.wz-choice{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr)); gap:var(--sp-3); }
.closure-page .wz-choice{ grid-template-columns:repeat(auto-fit, minmax(min(180px,100%),1fr)); }
.wz-opt{
  flex-direction:column; align-items:flex-start; gap:2px;
  min-height:96px; padding:var(--sp-4); text-align:left;
}
.closure-page .wz-opt{ min-height:64px; padding:var(--sp-3) var(--sp-4); }
.wz-opt b{ font-family:var(--font-head); font-size:var(--t-h2); font-weight:600; }
.wz-opt span{ font-weight:400; font-size:var(--t-small); color:var(--muted); }
.wz-opt.on{ background:var(--brand); border-color:transparent;
  box-shadow:0 1px 2px rgba(16,20,24,.10), 0 6px 18px rgba(199,158,0,.40); }
.wz-opt.on span{ color:var(--ink); }
.wz-review{ display:flex; flex-direction:column; gap:var(--sp-4); overflow-y:auto; min-height:0; }
.wz-review > *{ flex:0 0 auto; min-width:0; }
.closure-page .wz-wide > .wz-value{ font-size:clamp(1.6rem, 3vw, 2.6rem); padding:var(--sp-2) var(--sp-4); }
.closure-page .wz-wide > .ladder > div{ padding:2px 0 2px var(--sp-3); }
.closure-page .wz-review > .ladder{ font-size:var(--t-small); padding:var(--sp-2) var(--sp-3); }
.closure-page .wz-review > .ladder > div{ padding:2px 0 2px var(--sp-3); gap:var(--sp-2); }
.closure-page .wz-review > .ladder > div.tot{ padding-top:var(--sp-2); margin-top:var(--sp-1); }
@media (min-width:1000px){
  .closure-page .wz-review{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr); gap:var(--sp-3) var(--sp-5); overflow:hidden;
  }
  .closure-page .wz-review > .verdict,
  .closure-page .wz-review > .faceoff{ grid-column:1; }
  .closure-page .wz-review > .ladder{ grid-column:2; grid-row:1 / -1; overflow-y:auto; min-height:0; }
  .closure-page .wz-review > p{ grid-column:1; align-self:start; }
}

.wz-foot{
  display:grid; grid-template-columns:1fr 2fr; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); padding-bottom:calc(var(--sp-4) + var(--safe-b));
  border-top:1px solid var(--line); background:var(--surface-2);
}
.wz-foot .btn{ width:100%; }
@media (max-width:860px){
  .wz-body,
  .wz-body:has(> .wz-context){
    grid-template-columns:1fr; grid-template-rows:auto; gap:var(--sp-4); padding:var(--sp-4);
  }
  /* l'elenco di quello che si e' gia' inserito, sul telefono, sta in fondo */
  .wz-body > .wz-context{ grid-column:1; max-height:26vh; }
  .closure-page .wz-head, .closure-page .wz-foot{ padding-left:var(--sp-4); padding-right:var(--sp-4); }
  .wz-head{ padding:var(--sp-3) var(--sp-4); }
  .wz-bar{ padding:0 var(--sp-4); }
  .wz-foot{ padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b)); }
  .wizard{ height:min(94dvh,900px); }
  .wz-value{ font-size:clamp(1.8rem, min(8vw, 8vh), 3.5rem); }
}
@media (max-width:480px){
  .wz-foot .btn{ padding:0 var(--sp-3); }
  .wz-foot [data-back]{ white-space:nowrap; }
  .closure-page .wz-foot{ padding-left:var(--sp-4); padding-right:var(--sp-4); }
}

/* ---------------- tabelle (e schede su telefono) ---------------- */
.table-wrap{
  overflow-x:auto;
  background:
    linear-gradient(90deg,  var(--surface) 40%, transparent) 0 0 / 48px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 40%, transparent) 100% 0 / 48px 100% no-repeat local,
    linear-gradient(90deg,  rgba(16,20,24,.18), transparent) 0 0 / 16px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(16,20,24,.18), transparent) 100% 0 / 16px 100% no-repeat scroll;
}
.table-wrap:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }
table{ width:100%; border-collapse:collapse; font-size:var(--t-small); }
/* Sopra il monitor del banco la riga smette di allungarsi: con width:100% una
   tabella a nove colonne portava l'importo a due metri dalla sua etichetta. */
@media (min-width:1500px){
  .table-wrap table{ width:auto; min-width:min(100%, 1100px); }
  .ladder > div, .chart-head{ max-width:96ch; }
}
th, td{ padding:var(--sp-3); text-align:left; border-bottom:1px solid var(--line); }
th{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track);
  color:var(--text); font-weight:700; white-space:nowrap; background:var(--surface-2);
}
td{ color:var(--muted); white-space:normal; vertical-align:top; }
td:first-child, td b{ color:var(--text); }
td.num, th.num{ text-align:right; white-space:nowrap; }
td.num{ font-family:var(--font); font-weight:700; font-size:var(--t-money); color:var(--text); }
td.num.is-in{ color:var(--ok); }
td.num.is-out{ color:var(--danger); }
td.txt{ min-width:18ch; }
@media (hover:hover) and (pointer:fine){
  tbody tr:hover{ background:var(--surface-2); }
}

/* ---------------- verdetto di quadratura ---------------- */
.verdict{
  --v-bg: var(--ink-2); --v-rule: var(--line-strong);
  width:100%; margin:0 0 var(--sp-4);
  background:var(--v-bg); color:var(--on-dark);
  border-top:var(--foul-h) solid var(--v-rule);
  border-radius:var(--r); padding:var(--sp-3) var(--sp-4) var(--sp-4);
  display:grid; gap:var(--sp-1);
  transition:background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.wz-review .verdict{ margin:0; }
.verdict .v-label{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--on-dark-mute);
}
.verdict .v-row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; min-width:0; }
.verdict .v-sign{ width:48px; height:48px; flex:none; }
.verdict .v-word{
  font-family:var(--font-head); font-weight:600; line-height:1;
  text-transform:uppercase; letter-spacing:.02em; font-size:var(--t-verdict);
}
.verdict .v-amount{
  font-family:var(--font-head); font-weight:600; line-height:1;
  font-size:var(--t-verdict); white-space:nowrap;
}
.verdict .v-hint{ font-size:var(--t-small); color:var(--on-dark-mute); margin:0; }

.verdict .v-live{ display:grid; gap:var(--sp-1); }

/* QUADRA — parola gialla + spunta verde, nessuno zero da leggere. */
.verdict[data-state="ok"]{ --v-bg:var(--ink); --v-rule:var(--ok-bright); }
.verdict[data-state="ok"] .v-word{ color:var(--brand); }
.verdict[data-state="ok"] .v-sign{ color:var(--ok-bright); }
.verdict[data-state="ok"] .v-amount{ display:none; }

/* NON QUADRA — birillo abbattuto + cifra firmata. */
.verdict[data-state="off"]{ --v-bg:var(--ink); --v-rule:var(--danger-bright); }
.verdict[data-state="off"] .v-word{ font-size:var(--t-h2); color:var(--danger-bright); }
.verdict[data-state="off"] .v-amount{ color:var(--danger-bright); }
.verdict[data-state="off"] .v-sign{ color:var(--danger-bright); }

/* Scala di quadratura: colonna del segno incolonnata, un solo totale marcato. */
.ladder{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); font-size:var(--t-body);
}
.ladder > div{
  display:grid; grid-template-columns:2ch 1fr minmax(9ch,auto);
  gap:var(--sp-3); align-items:baseline;
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-4); color:var(--muted);
}
.ladder > div::before{ content:"+"; font-weight:700; color:var(--muted); }
.ladder > div.neg::before{ content:"\2212"; color:var(--danger); }
.ladder > div.plain::before{ content:""; }
.ladder b{ grid-column:3; text-align:right; font-weight:700; color:var(--text); }
.ladder > div.sub b{ color:var(--muted); }
.ladder > div.tot{
  padding:var(--sp-3) 0 var(--sp-1); margin-top:var(--sp-2);
  border-top:2px solid var(--ink); color:var(--text); font-weight:700;
}
.ladder > div.tot::before{ content:"="; color:var(--ink); }
.ladder > div.tot b{ font-family:var(--font-head); font-size:var(--t-money); }
.ladder > div.ok::before{ content:""; }
.ladder > div.ko::before{ content:"!"; color:var(--danger); font-weight:700; }
.ladder > div.attesa::before{ content:"?"; color:var(--warn-ink); font-weight:700; }
.ladder > div.attesa b{ color:var(--muted); }
.ladder > div.ko b{ color:var(--danger); }

/* Le cinque righe di quadratura di una piattaforma di gioco: in fila sul
   desktop, in colonna al banco. Sono le stesse del foglio Excel. */
.quadro{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; margin-top:var(--sp-3);
}
.quadro > div{ background:var(--surface); padding:var(--sp-3) var(--sp-4); display:grid; gap:2px; }
.quadro span{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track); color:var(--muted); }
.quadro i{ font-style:normal; text-transform:none; letter-spacing:0; }
.quadro b{ font-family:var(--font-head); font-size:var(--t-h2); font-variant-numeric:tabular-nums; }
.quadro > div.attesa{ background:var(--warn-bg); }
.quadro > div.attesa b, .quadro > div.attesa span{ color:var(--warn-ink); }
.quadro > div.ko{ background:var(--danger-bg); }
.quadro > div.ko b, .quadro > div.ko span{ color:var(--danger-ink); }
.quadro > div.esito b{ font-size:var(--t-body); }
.quadro:has(> :nth-child(6)){ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:600px){ .quadro:has(> :nth-child(6)){ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:971px){ .quadro:has(> :nth-child(6)){ grid-template-columns:repeat(6, minmax(0,1fr)); } }
.storico:empty{ display:none; }
.storico{ margin-top:var(--sp-3); }

/* I due numeri che generano il delta, affiancati. */
.faceoff{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; margin-bottom:var(--sp-3);
}
.faceoff > div{ background:var(--surface); padding:var(--sp-3) var(--sp-4); }
.faceoff .k{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track);
  color:var(--muted); font-weight:700;
}
.faceoff .v{ font-family:var(--font-head); font-weight:600; font-size:var(--t-hero); line-height:1.1; }
.faceoff .v.txt{ font-family:var(--font); font-size:var(--t-lead); font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
@media (max-width:480px){ .faceoff{ grid-template-columns:1fr; } }

/* Motivi della differenza a un tocco: al banco non esiste una tastiera fisica. */
.reasons{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(160px,100%),1fr)); gap:var(--sp-2); }
.reasons label{ position:relative; display:block; margin:0; }
.reasons input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.reasons span{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:var(--tap); padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--text);
  font-size:var(--t-small); font-weight:700;
}
.reasons input:checked + span{
  background:var(--ink); border-color:var(--ink); color:var(--on-dark);
  box-shadow:inset 0 -6px 0 -2px var(--brand);
}
.reasons input:focus-visible + span{ outline:3px solid var(--ink); outline-offset:2px; }
.reasons label:only-child span{ justify-content:flex-start; text-align:left; gap:var(--sp-3); }
.reasons label:only-child span::before{
  content:""; width:22px; height:22px; flex:none; display:grid; place-items:center;
  border:2px solid var(--line-strong); border-radius:6px; background:var(--surface);
  font-size:15px; line-height:1; color:var(--ink);
}
.reasons label:only-child input:checked + span::before{
  content:"\2713"; background:var(--brand); border-color:var(--brand);
}

/* ---------------- traccia di fase ---------------- */
.track{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:var(--sp-2); margin-bottom:var(--sp-5); }
.track-step{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3); border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--line); color:var(--muted);
}
.track-step .n{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-head); font-weight:600;
  background:var(--surface); border:2px solid var(--line); color:var(--muted);
}
.track-step b{ font-size:var(--t-small); }
.track-step .sub{ display:block; font-size:var(--t-micro); color:var(--muted); }
.track-step.done{ background:var(--brand); border-color:var(--ink); color:var(--ink); }
.track-step.done .n{ background:var(--ink); border-color:var(--ink); color:var(--brand); }
.track-step.on{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }
.track-step.on .n{ background:var(--brand); border-color:var(--ink); color:var(--ink); }
.track-step.on .sub, .track-step.done .sub{ color:inherit; opacity:.85; }
@media (max-width:560px){ .track{ grid-template-columns:1fr; } }

/* ---------------- pill ---------------- */
.pill{
  display:inline-block; padding:4px 11px; border-radius:var(--r-pill);
  font-family:var(--font); font-size:var(--t-micro); font-weight:700; letter-spacing:.03em;
}
.pill.ok     { background:var(--ok-bg);     color:var(--ok-ink); }
.pill.bad    { background:var(--danger-bg); color:var(--danger-ink); }
.pill.warn   { background:var(--warn-bg);   color:var(--warn-ink); }
.pill.info   { background:var(--info-bg);   color:var(--info-ink); }
.pill.neutral{ background:var(--neutral-bg);color:var(--text); }
.pill.brand  { background:var(--brand); color:var(--ink); }

/* ---------------- calendario e agenda ---------------- */
.cal-head, .cal{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:var(--sp-2); }
.cal{ margin-top:var(--sp-2); flex:1 1 0; min-height:0; overflow-y:auto;
  grid-auto-rows:minmax(58px, 1fr); }
/* Il calendario riempie l'altezza rimasta: il mese si vede tutto, senza scorrere. */
.view:has(> .eventi-page){ display:flex; flex-direction:column; min-height:0; }
.eventi-page{ display:flex; flex-direction:column; gap:var(--sp-3); height:100%; min-height:0; }
/* Una barra sola invece di intestazione di pagina + intestazione di card:
   erano 156px per sei comandi, su 970 di schermo. */
.cal-bar{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-2) 0;
}
.cal-bar h1{ font-size:var(--t-h2); margin:0; }
.cal-bar select{ width:auto; }
.cal-bar #q{ flex:1 1 200px; max-width:320px; }
.cal-bar .btn-primary{ margin-left:auto; }
.cal-nav{ display:flex; align-items:center; gap:var(--sp-2); }
.cal-nav .mese{ min-width:15ch; white-space:nowrap; text-align:center; text-transform:capitalize; }
.cal-corpo{
  flex:1 1 0; min-height:0; display:grid; gap:var(--sp-3);
  grid-template-columns:minmax(0,1fr) minmax(260px, 340px);
}
.eventi-page .card{ min-height:0; display:flex; flex-direction:column; }
.cal-agenda{ flex:1 1 0; }
@media (max-width:1100px){
  .cal-corpo{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .eventi-page .cal-giorno{ max-height:30vh; }
}
.dow{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track);
  color:var(--muted); text-align:center; font-weight:700; padding:var(--sp-1) 0;
}
.cal .day{
  min-height:0; overflow:hidden; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); padding:4px 6px;
  display:flex; flex-direction:column; gap:3px;
  cursor:pointer; text-align:left; font:inherit; color:inherit;
}
.cal .day:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }
.cal .dtesta{ display:flex; align-items:baseline; justify-content:space-between; gap:4px; }
.cal .piu{ font-size:var(--t-micro); color:var(--muted); font-weight:700; padding-right:2px; }

/* Colonna del giorno: la prenotazione si legge per intero, non in dieci caratteri. */
.cal-giorno{ padding:0; overflow:hidden; }
.cg-head{
  display:flex; align-items:center; gap:var(--sp-3); justify-content:space-between;
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line);
}
.cg-head b{ display:block; font-family:var(--font-head); text-transform:capitalize; }
.cg-head span{ display:block; }
.cg-lista{ overflow-y:auto; min-height:0; display:grid; gap:1px; background:var(--line); }
.cg-riga{
  display:grid; gap:2px; text-align:left; border:0; cursor:pointer;
  background:var(--surface); padding:var(--sp-3) var(--sp-4); font:inherit; color:inherit;
}
.cg-riga:hover{ background:var(--surface-2); }
.cg-riga:focus-visible{ outline-offset:-3px; }
.cg-riga:active{ background:var(--neutral-bg); }
.cg-riga .ora{ font-family:var(--font-head); font-weight:600; color:var(--muted); font-size:var(--t-small); }
.cg-riga .nome{ font-weight:700; }
.cg-riga .meta{ font-size:var(--t-small); color:var(--muted); }
.cg-riga .nota{ font-size:var(--t-small); color:var(--muted); font-style:italic; }
.cal .day.out{ background:var(--neutral-bg); color:var(--muted); border-color:var(--line); }
.cal .day.out .ev{ opacity:.72; }
.cal .day.today{ border:2px solid var(--ink); box-shadow:inset 0 -6px 0 -2px var(--brand); }
.cal .day.sel{ outline:3px solid var(--ink); outline-offset:-3px; box-shadow:inset 0 0 0 6px var(--brand); }
.cal .day:active{ background:var(--neutral-bg); }
.cal .dnum{
  font-family:var(--font-head); font-weight:600; font-size:var(--t-small);
  padding:0 2px; line-height:1.15; color:inherit;
}
.cal .ev{
  display:flex; align-items:center; gap:5px; min-height:32px; width:100%;
  padding:0 5px; border:0; border-radius:var(--r-sm);
  font-family:inherit; font-size:var(--t-micro); font-weight:700; text-align:left;
  background:var(--neutral-bg); color:var(--text); cursor:pointer;
  overflow:hidden; white-space:nowrap;
}
.cal .ev .ev-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal .ev:active{ background:var(--line); }
/* Il numero di partecipanti si legge senza aprire la scheda. */
.cal .ev::before{
  content:attr(data-tipo); flex:none; min-width:18px; height:18px; padding:0 3px;
  display:grid; place-items:center; border-radius:4px;
  background:var(--ink); color:var(--brand);
  font-family:var(--font-head); font-size:.7rem;
}

/* ---------------- barre statistiche ---------------- */
.chart-row{ display:grid; gap:var(--sp-2); }
.chart-head{ display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--t-small); }
.chart-bar{ display:flex; height:24px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface); border:1px solid var(--line-strong); }
.chart-seg{ height:100%; border-right:2px solid var(--surface); }
.chart-seg:last-child{ border-right:0; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3); font-size:var(--t-small); }
.legend-key{
  display:inline-block; width:14px; height:14px; border-radius:3px;
  border:1px solid var(--line-strong); vertical-align:-2px; margin-right:6px;
}

/* ---------------- toast ---------------- */
.toasts{
  position:fixed; left:50%; translate:-50% 0; top:calc(var(--stick) + var(--sp-3));
  z-index:90; display:grid; gap:var(--sp-2); width:min(520px,92vw);
}
.toast{
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r);
  background:var(--ink); color:var(--on-dark); font-weight:700;
  box-shadow:var(--shadow); border-left:6px solid var(--on-dark-mute);
  transition:opacity var(--dur-state) var(--ease), translate var(--dur-state) var(--ease);
}
@starting-style{ .toast{ opacity:0; translate:0 8px; } }
.toast.esce{ opacity:0; }
.toast.ok { border-left-color:var(--ok-bright); }
.toast.bad{ border-left-color:var(--danger-bright); }

/* Mentre si chiude la cassa lo spazio serve al conteggio, non alla firma. */
body:has(.closure-page) .piede{ display:none; }

/* ---------------- firma ---------------- */
/* Montserrat Bold e la sfumatura sono quelli della cartella marchio di Exroot. */
.piede{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  padding:var(--sp-3); font-size:var(--t-micro);
  color:var(--muted); letter-spacing:.04em;
}
.exroot{
  font-family:"Montserrat", var(--font); font-weight:700; font-size:1.05em;
  letter-spacing:.01em;
  background:linear-gradient(100deg, #91ffa0, #51cce6 55%, #735acc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not (background-clip: text){ .exroot{ color:#735acc; } }

/* ---------------- login ---------------- */
.login{
  min-height:100%; display:grid; place-items:center; padding:var(--sp-5);
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 64px, var(--ink-2) 64px 66px),
    var(--ink);
}
.login-card{
  background:var(--surface); border-radius:var(--r); width:min(420px,100%);
  padding:calc(var(--sp-6) + var(--foul-h)) var(--sp-6) var(--sp-6);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  background-image:var(--foul);
  background-size:100% var(--foul-h); background-position:0 0; background-repeat:no-repeat;
}
.login-logo{ width:220px; max-width:100%; display:block; margin:0 auto var(--sp-4); }
.login-card h1{ text-align:center; }
.login-card > p.muted{ text-align:center; margin:var(--sp-1) 0 var(--sp-4); }
.login-card .btn{ margin-top:var(--sp-2); }
#boot{ position:fixed; inset:0; z-index:5; }
body:has(#app:not([hidden])) #boot,
body:has(#login:not([hidden])) #boot{ display:none; }

/* Riquadro di quadratura del riepilogo: vive sia a schermo sia sul foglio stampato,
   quindi ha uno stile suo anche fuori dal @media print. */
.print-verdict{
  margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface-2); display:grid; gap:2px;
}
.print-verdict .k{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track);
  color:var(--muted); font-weight:700;
}
.print-verdict .v{ font-family:var(--font-head); font-size:var(--t-h2); line-height:1.15; }

/* ---------------- telefono verticale ---------------- */
@media screen and (max-width:720px){
  :root{ --stick: var(--topbar-h); }   /* la nav e' passata in basso */
  #app{
    padding-bottom:calc(var(--nav-h) + 14px + var(--safe-b));
    grid-template-rows:auto 1fr auto;  /* la nav non e' piu' una riga: era il piede a prendersi lo spazio */
  }
  .piede{ padding:var(--sp-2); }
  :root{ --topbar-h:68px; }
  .topbar{ padding:var(--sp-2) var(--sp-3); }
  .brand-logo{ height:38px; padding:4px 8px; }
  .view{ padding:var(--sp-3); }
  .day-strip .long{ display:none; }
  .day-strip{ font-size:var(--t-small); border-left-width:4px; padding-left:var(--sp-2); }
  .nav{
    position:fixed; inset:auto 0 0 0; top:auto; z-index:40;
    display:grid; grid-template-columns:repeat(6,1fr);
    border-bottom:0;
    padding:0 0 var(--safe-b); overflow:visible; box-shadow:var(--shadow-up);
  }
  .nav a{
    flex:1 1 0; min-width:0; flex-direction:column; justify-content:center;
    gap:2px; padding:var(--sp-2) 2px; font-size:clamp(.56rem, 2.9vw, .68rem); text-align:center;
  }
  .nav a .ico{ width:22px; height:22px; }
  .nav .lbl-long{ display:none; }
  .nav .lbl-short{ display:inline; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .nav a[aria-current="page"]::after{
    inset:0 auto auto 0; width:100%; height:var(--foul-h);
    background:linear-gradient(to top, var(--brand) 0 4px, var(--ink) 4px 6px);
  }
  .modal{ padding:0; }
  .modal-card{ width:100%; max-height:min(88dvh,760px); }
  .modal-card.wizard-card{ height:min(94dvh,900px); max-height:none; }

  /* tabelle -> schede: le etichette arrivano dalle --cN dichiarate sul <table> */
  .t-cards thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .t-cards, .t-cards tbody, .t-cards tr, .t-cards td{ display:block; width:100%; }
  .t-cards tr{
    background:var(--surface); border:1px solid var(--line);
    border-left:4px solid var(--ink); border-radius:var(--r-sm);
    padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3);
  }
  .t-cards td{
    display:grid; grid-template-columns:40% 1fr; gap:var(--sp-3);
    align-items:baseline; border:0; padding:var(--sp-1) 0; text-align:left;
  }
  .t-cards td:empty{ display:none; }
  .t-cards td::before{
    font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--track);
    color:var(--muted); font-weight:700;
    font-family:var(--font); text-align:left;
  }
  .t-cards td.num{ text-align:right; }
  .t-cards td.num .blocco{ white-space:normal; }
  .t-cards td:nth-child(1)::before{ content:var(--c1,""); }
  .t-cards td:nth-child(2)::before{ content:var(--c2,""); }
  .t-cards td:nth-child(3)::before{ content:var(--c3,""); }
  .t-cards td:nth-child(4)::before{ content:var(--c4,""); }
  .t-cards td:nth-child(5)::before{ content:var(--c5,""); }
  .t-cards td:nth-child(6)::before{ content:var(--c6,""); }
  .t-cards td:nth-child(7)::before{ content:var(--c7,""); }
  .t-cards td:nth-child(8)::before{ content:var(--c8,""); }
  .t-cards td:nth-child(9)::before{ content:var(--c9,""); }
  .t-cards td.right:not(:empty){ display:flex; justify-content:flex-end; }
  .t-cards td.right:not(:empty)::before{ content:none; }

  /* Sul telefono la traccia delle fasi e la striscia della giornata ruberebbero
     mezzo schermo alla procedura: l'intestazione del riquadro le dice entrambe. */
  .closure-page > .track, .report-page > .track{ display:none; }
  body:has(.closure-page) #dayStrip{ display:none; }
  /* Durante una chiusura la barra in basso sparisce: e' una procedura a fuoco singolo,
     ha i suoi Indietro/Avanti, e quei 68px sono la differenza fra stare in schermata
     e dover scorrere per raggiungere il pulsante. Si esce dal marchio in alto. */
  body:has(.closure-page:not(.apertura)) .nav{ display:none; }
  body:has(.closure-page:not(.apertura)) #app{ padding-bottom:0; }
  .closure-page > .wizard{ min-height:0; }
  .wz-value{ font-size:clamp(2rem, 1rem + 6vw, 3rem); padding:var(--sp-3) var(--sp-4); }
  .pad button{ min-height:56px; font-size:1.4rem; }
  .wz-head h2{ font-size:var(--t-lead); }

  .cal-corpo{ display:none; }        /* sotto i 720 resta l'agenda: bersagli a piena larghezza */
  #mode option:not([value="agenda"]){ display:none; }
  .cal-bar h1{ width:100%; }
  .chart-bar{ display:none; }        /* i numeri li da' la tabella a schede */
}

/* ---------------- schermi bassissimi (telefono in orizzontale) ---------------- */
@media (max-height:480px){
  .modal{ padding:0; }
  .modal-card:not(.wizard-card){ padding:var(--sp-3); padding-bottom:calc(var(--sp-3) + var(--safe-b)); }
  .modal-card:not(.wizard-card):not(.pad-sheet){ max-height:100dvh; }
  .modal-head{ margin-bottom:var(--sp-2); }
  .modal-card > p.muted{ margin:4px 0; }
  .pad{ gap:var(--sp-2); margin-top:var(--sp-2); }
  .pad button{ min-height:36px; font-size:1.25rem; }
  .pad-display, .pin-dots{ min-height:44px; font-size:1.4rem; }
  .modal-actions{ margin-top:var(--sp-3); position:sticky; bottom:0; background:var(--surface); }
  .modal-actions .btn{ min-height:44px; }
}

/* ---------------- stampa ---------------- */
.print-only{ display:none; }
@media print{
  html{ font-size:11pt; }
  body,.view{ background:#fff; padding:0; }
  .topbar,.nav,.subnav,.no-print,.toasts,.modal,#dayStrip,.track,.verdict,
  .piede,.btn,.tile,.pad-btn,.wz-foot{ display:none !important; }
  .card{ box-shadow:none; border:1px solid #999; margin-bottom:8mm; }
  .stat, .ladder, .chart-row, tr{ break-inside:avoid; }
  .card-head{ break-after:avoid; }
  .print-sign{ break-before:avoid; }
  .grid.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:4mm; }
  .stat{ box-shadow:none; border:1px solid #999; break-inside:avoid; }
  .stat--key{ background:#fff; color:#000; border:2px solid #000; box-shadow:none; }
  .stat--key .k, .stat--key .v{ color:#000; }
  .print-only{ display:block; }   /* senza !important: .print-head e .print-sign restano flex e grid */
  .print-head{ display:flex; align-items:center; gap:8mm; border-bottom:2px solid #000; padding-bottom:4mm; margin-bottom:6mm; }
  .print-head img{ height:22mm; width:auto; }
  .print-head h1{ font-size:16pt; margin:0; }
  .print-verdict{
    border:3px solid #000; padding:5mm; text-align:center; margin:6mm 0; break-inside:avoid;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .print-verdict .k{ font-size:10pt; text-transform:uppercase; letter-spacing:.1em; }
  .print-verdict .v{ font-family:var(--font-head); font-size:24pt; line-height:1.1; }
  .print-sign{ display:grid; grid-template-columns:1fr 1fr; gap:10mm; margin-top:14mm; break-inside:avoid; }
  .print-sign div{ border-top:1px solid #000; padding-top:2mm; font-size:9pt; }
  table{ font-size:9pt; }
  th,td{ padding:2mm 3mm; border-bottom-color:#999; }
  td.num{ font-size:10pt; }
  th{ background:none; border-bottom:2px solid #000; }
  .ladder, .wz-context > div{ border-color:#999; }
  .faceoff, .quadro, .cg-lista{ background:#999; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .chart-bar{ display:flex; border:1px solid #999; }
  .chart-bar, .chart-seg, .legend-key{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  @page{ margin:12mm; }
}

/* Lo storico in stile foglio: molte colonne strette, la data ferma a sinistra
   mentre il resto scorre, e i gruppi di colonne per piattaforma come le fasce
   colorate dell'Excel. */
.storico{ width:auto; min-width:100%; font-size:var(--t-micro); border-collapse:separate; border-spacing:0; }
.storico th, .storico td{ padding:6px 9px; border-bottom:1px solid var(--line); white-space:nowrap; }
.storico th{ font-size:var(--t-micro); }
.storico th.gruppo{ text-align:center; background:var(--surface-2); border-left:1px solid var(--line-strong); }
.storico .giorno{ position:sticky; left:0; z-index:1; background:var(--surface); text-align:left; }
.storico tfoot .giorno{ background:var(--surface-2); }
.storico thead .giorno{ z-index:2; background:var(--surface); }
.storico td.vuota{ color:var(--muted); }
.storico td.nuovo{ box-shadow:inset 0 0 0 2px var(--brand); }
.storico .tot{ font-weight:700; border-left:1px solid var(--line-strong); }
.storico tfoot td{ font-weight:700; background:var(--surface-2); border-top:2px solid var(--ink); }
.storico td .muted{ font-weight:400; }
.storico tbody tr:hover td{ background:var(--surface-2); }
.storico tbody tr:hover .giorno{ background:var(--neutral-bg); }
/* Il totale del periodo non si lascia schiacciare dal titolo accanto. */
.testa-storico{ flex-wrap:wrap; gap:var(--sp-3); }
.testa-storico > div:first-child{ min-width:min(100%, 260px); flex:1 1 260px; }
.testa-storico .stat{ flex:0 0 auto; min-width:min(100%, 240px); }