/* app.css — componenti DESIGN.md §3. Mobile-first 360px, touch ≥44px, transizioni ≤150ms. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--sn-font-sans);
  font-size: var(--sn-tsx-17);
  line-height: 1.4;
  color: var(--sn-text);
  background: var(--sn-bg);
  -webkit-text-size-adjust: 100%;
}
#app { min-height: 100dvh; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--sn-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- shell / header (§3.1) ---------- */
.shell { display: flex; flex-direction: column; min-height: 100dvh; }
.app-h {
  position: sticky; top: 0; z-index: 6;
  background: var(--sn-surface);
  border-bottom: 1px solid var(--sn-border);
  padding: var(--sn-sp-4) var(--sn-sp-4) 0;
}
.hd-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--sn-header-h); }
h1 { font-size: var(--sn-tsx-25); line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 720px) { h1 { font-size: var(--sn-tsx-31); } }
.hd-actions { display: flex; gap: var(--sn-sp-2); }
.icon-btn {
  width: var(--sn-tap-min); height: var(--sn-tap-min);
  border: 1px solid var(--sn-border); border-radius: var(--sn-r-sm);
  background: var(--sn-surface); color: var(--sn-text);
  font-size: 20px; cursor: pointer; display: grid; place-items: center;
}
.icon-btn:active { transform: scale(.98); }
.tabs { display: flex; gap: var(--sn-sp-1); }
.tab {
  flex: 1; min-height: var(--sn-tap-min); border: none; background: none;
  font: 600 var(--sn-tsx-17)/1 var(--sn-font-sans); color: var(--sn-text-muted);
  border-bottom: 3px solid transparent; cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--sn-brand); border-bottom-color: var(--sn-brand); }

/* ---------- pill Express (§3.5/§4.1): minuti, tabular-nums, mai rosso ---------- */
.pill-slot { padding: var(--sn-sp-2) 0 var(--sn-sp-3); min-height: 0; }
.express {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--sn-tap-min); padding: 0 var(--sn-sp-3);
  border-radius: var(--sn-r-pill); border: 1px solid transparent;
  background: var(--sn-premium-bg); color: var(--sn-premium-ink);
  font: 600 var(--sn-tsx-16)/1 var(--sn-font-sans); cursor: pointer;
}
.express .num { font-family: var(--sn-font-num); font-variant-numeric: tabular-nums; font-weight: 700; min-width: 9ch; }
.express.warn { background: var(--sn-warn-bg); color: var(--sn-warn-ink); }
.express.off { background: var(--sn-surface-2); color: var(--sn-text-muted); }
.express.idle { background: var(--sn-surface-2); color: var(--sn-premium-ink); }
.express:active { transform: scale(.98); }

/* ---------- main + adslot (§3.4/§11: altezza riservata, zero CLS) ---------- */
.main {
  flex: 1;
  padding: var(--sn-sp-4) var(--sn-sp-4) calc(var(--sn-adslot-h) + env(safe-area-inset-bottom) + var(--sn-sp-12));
  max-width: 66ch; width: 100%; margin: 0 auto;
}
.sc-adslot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(var(--sn-adslot-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--sn-ad); border-top: 1px solid var(--sn-border);
  display: flex; align-items: center; justify-content: center; gap: var(--sn-sp-2);
}
.sc-adslot.hidden { display: none; }
.ad-tag { position: absolute; top: 3px; left: var(--sn-sp-2); font-size: var(--sn-tsx-13); color: var(--sn-text-muted); }
.ad-card {
  max-width: 300px; height: 42px; border: 1px solid var(--sn-border); border-radius: var(--sn-r-sm);
  background: var(--sn-surface); color: var(--sn-text-muted); cursor: pointer;
  display: flex; align-items: center; gap: var(--sn-sp-2); padding: 0 var(--sn-sp-3);
  font-size: var(--sn-tsx-16); overflow: hidden; white-space: nowrap;
}
.ad-card .ad-t { font-weight: 600; color: var(--sn-text); }

/* ---------- FAB (§3.7): mai sovrapposto all'adslot ---------- */
.sc-fab {
  position: fixed; right: var(--sn-sp-5);
  bottom: calc(var(--sn-adslot-h) + var(--sn-sp-4) + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: var(--sn-r-pill); border: none;
  background: var(--sn-btn-brand); color: var(--sn-btn-brand-on);
  font-size: 28px; line-height: 1; cursor: pointer; z-index: 7;
  box-shadow: var(--sn-shadow-2); display: grid; place-items: center;
}
.sc-fab:active { transform: scale(.96); }

/* ---------- card scadenza (§3.2) ---------- */
.group-label {
  font: 600 var(--sn-tsx-13)/1 var(--sn-font-sans); color: var(--sn-text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin: var(--sn-sp-4) var(--sn-sp-1) var(--sn-sp-2);
}
.sc-card {
  display: flex; gap: var(--sn-sp-3); align-items: center;
  background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-r-md);
  padding: var(--sn-sp-3); min-height: 72px; margin-bottom: var(--sn-sp-3);
  box-shadow: var(--sn-shadow-1); cursor: pointer;
}
.sc-card:active { transform: scale(.98); }
.sc-card .date {
  flex: none; width: 48px; height: 48px; border-radius: var(--sn-r-sm);
  display: grid; place-content: center; text-align: center; font-family: var(--sn-font-num);
}
.sc-card .date .d { font-size: var(--sn-tsx-13); font-weight: 600; text-transform: uppercase; }
.sc-card .date .n { font-size: var(--sn-tsx-20); font-weight: 700; line-height: 1.1; }
.date.due { background: var(--sn-due-bg); color: var(--sn-due-ink); }
.date.warn { background: var(--sn-warn-bg); color: var(--sn-warn-ink); }
.date.late { background: var(--sn-danger-bg); color: var(--sn-danger-ink); }
.date.done { background: var(--sn-ok-bg); color: var(--sn-ok-ink); }
.sc-card .body { flex: 1; min-width: 0; }
.sc-card .body .t { font: 600 var(--sn-tsx-17)/1.3 var(--sn-font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card .body .m { font: 400 var(--sn-tsx-16)/1.4 var(--sn-font-sans); color: var(--sn-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card.paid .body .t { color: var(--sn-text-muted); text-decoration: line-through; }

/* ---------- badge stato (§3.3): non interattivo, mai maiuscolo ---------- */
.badge {
  flex: none; font: 600 var(--sn-tsx-16)/1 var(--sn-font-sans);
  padding: 6px 10px; border-radius: var(--sn-r-pill); white-space: nowrap;
}
.badge.due { background: var(--sn-due-bg); color: var(--sn-due-ink); }
.badge.warn { background: var(--sn-warn-bg); color: var(--sn-warn-ink); }
.badge.late { background: var(--sn-danger-bg); color: var(--sn-danger-ink); }
.badge.ok { background: var(--sn-ok-bg); color: var(--sn-ok-ink); }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--sn-tap-min); padding: 0 var(--sn-sp-6);
  border-radius: var(--sn-r-pill); border: none; cursor: pointer;
  font: 600 var(--sn-tsx-17) var(--sn-font-sans);
  transition: transform 120ms ease-out;
}
.btn:active { transform: scale(.98); }
.btn:disabled { background: var(--sn-surface-2); color: var(--sn-text-muted); cursor: not-allowed; transform: none; }
.btn-primary { background: var(--sn-btn-brand); color: var(--sn-btn-brand-on); min-height: 52px; }
.btn-ghost { background: var(--sn-surface-2); color: var(--sn-text); }
.btn-danger { background: var(--sn-danger-bg); color: var(--sn-danger-ink); }
.btn-premium { background: var(--sn-premium-grad); color: #fff; min-height: 52px; }
.btn.sm { min-height: var(--sn-tap-min); font-size: var(--sn-tsx-16); padding: 0 var(--sn-sp-4); }
.link-btn { background: none; border: none; color: var(--sn-brand-strong); font: 600 var(--sn-tsx-16) var(--sn-font-sans); cursor: pointer; min-height: var(--sn-tap-min); padding: 0 var(--sn-sp-2); }
[data-theme="dark"] .link-btn { color: var(--sn-brand); }

/* ---------- empty state (§3.8) ---------- */
.sc-empty { text-align: center; padding: var(--sn-sp-12) var(--sn-sp-6); }
.sc-empty .logo { color: var(--sn-brand); margin-bottom: var(--sn-sp-4); }
.sc-empty h2 { font-size: var(--sn-tsx-20); margin-bottom: var(--sn-sp-2); }
.sc-empty p { font-size: var(--sn-tsx-17); color: var(--sn-text-muted); margin-bottom: var(--sn-sp-6); }

/* ---------- chip e campi (§3.10/§3.11) ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sn-sp-2); }
.sc-chip {
  min-height: var(--sn-tap-min); padding: 0 var(--sn-sp-4) calc(0px); /* QA: tocco 44px (era 40, viola DESIGN §2.3/§3.10) */
  border-radius: var(--sn-r-pill); border: 1px solid var(--sn-border);
  background: var(--sn-surface); color: var(--sn-text);
  font: 600 var(--sn-tsx-16) var(--sn-font-sans); cursor: pointer;
  display: inline-flex; align-items: center;
}
.sc-chip.sm { min-height: var(--sn-tap-min); }
.sc-chip.on { background: var(--sn-btn-brand); border-color: var(--sn-btn-brand); color: var(--sn-btn-brand-on); }
.sc-chip.static { cursor: default; background: var(--sn-brand-tint); color: var(--sn-due-ink); border-color: transparent; }
.sc-field { display: block; margin-bottom: var(--sn-sp-4); }
.sc-label { display: block; font: 600 var(--sn-tsx-16) var(--sn-font-sans); margin-bottom: var(--sn-sp-1); }
.sc-help { display: block; font-size: var(--sn-tsx-16); color: var(--sn-text-muted); margin-top: var(--sn-sp-1); }
.sc-input {
  width: 100%; min-height: 48px; border: 1px solid var(--sn-border); border-radius: var(--sn-r-sm);
  background: var(--sn-surface); color: var(--sn-text);
  font: 400 var(--sn-tsx-17) var(--sn-font-sans); padding: var(--sn-sp-2) var(--sn-sp-3);
}
.sc-input.err { border-color: var(--sn-danger-ink); }
textarea.sc-input { min-height: 64px; }
input[type="date"].sc-input, input[type="number"].sc-input { font-family: var(--sn-font-num); }

/* ---------- sheet (§3.12/§3.14) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(14, 21, 19, .48);
  display: flex; align-items: flex-end; justify-content: center;
}
.sc-sheet {
  position: relative;
  width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  overscroll-behavior: contain;
  background: var(--sn-surface); border-radius: var(--sn-r-lg) var(--sn-r-lg) 0 0;
  box-shadow: var(--sn-shadow-2);
  padding: var(--sn-sp-2) var(--sn-sp-4) calc(var(--sn-sp-8) + env(safe-area-inset-bottom));
  animation: slide-up 240ms ease-out;
}
@keyframes slide-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--sn-border); margin: var(--sn-sp-2) auto var(--sn-sp-4); }
.sheet-x {
  position: absolute; top: var(--sn-sp-2); right: var(--sn-sp-2);
  width: var(--sn-tap-min); height: var(--sn-tap-min); border: none; background: none;
  color: var(--sn-text-muted); font-size: 18px; cursor: pointer;
}
.sheet-h { font-size: var(--sn-tsx-20); line-height: 1.2; margin-bottom: var(--sn-sp-3); padding-right: var(--sn-sp-8); }
.sheet-p { font-size: var(--sn-tsx-17); color: var(--sn-text-muted); margin-bottom: var(--sn-sp-3); }

/* ---------- paywall ---------- */
.pw-h { font-size: var(--sn-tsx-20); line-height: 1.2; margin: var(--sn-sp-2) 0 var(--sn-sp-2); padding-right: var(--sn-sp-8); }
.pw-p { font-size: var(--sn-tsx-16); color: var(--sn-text-muted); margin-bottom: var(--sn-sp-3); }
.pw-benefits { list-style: none; margin: var(--sn-sp-3) 0; }
.pw-benefits li { font-size: var(--sn-tsx-17); padding: var(--sn-sp-2) 0 var(--sn-sp-2) var(--sn-sp-6); position: relative; }
.pw-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--sn-brand); font-weight: 700; }
.pw-price { margin: var(--sn-sp-3) 0 var(--sn-sp-4); }
.pw-hero { display: block; font-size: var(--sn-tsx-25); }
.pw-hero.num { font-family: var(--sn-font-num); font-variant-numeric: tabular-nums; }
.pw-badge { display: inline-block; margin-top: var(--sn-sp-1); font: 600 var(--sn-tsx-16) var(--sn-font-sans); background: var(--sn-premium-bg); color: var(--sn-premium-ink); border-radius: var(--sn-r-pill); padding: 2px 10px; }
.pw-small { font-size: var(--sn-tsx-16); color: var(--sn-text-muted); margin-top: var(--sn-sp-1); }
.pw-label { font: 600 var(--sn-tsx-13) var(--sn-font-sans); color: var(--sn-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sn-sp-1); }
.pw-cta { width: 100%; margin-bottom: var(--sn-sp-3); }
.pw-divider { text-align: center; color: var(--sn-text-muted); font-size: var(--sn-tsx-16); margin: var(--sn-sp-2) 0 var(--sn-sp-3); }
.pw-residuo { font-size: var(--sn-tsx-16); }
.pw-close { margin-top: var(--sn-sp-3); }
.pw-nonora { display: block; margin: var(--sn-sp-2) auto; background: none; border: none; color: var(--sn-text-muted); font: 400 var(--sn-tsx-17) var(--sn-font-sans); cursor: pointer; min-height: var(--sn-tap-min); }

/* ---------- onboarding ---------- */
.ob { max-width: 480px; margin: 0 auto; padding: var(--sn-sp-6) var(--sn-sp-4) var(--sn-sp-12); text-align: center; }
.ob-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sn-sp-6); }
.ob-dots .dot { color: var(--sn-text-muted); font-size: var(--sn-tsx-20); }
.ob-dots .dot.on { color: var(--sn-brand); }
.ob-skip { background: none; border: none; color: var(--sn-text-muted); font-size: var(--sn-tsx-16); cursor: pointer; min-height: var(--sn-tap-min); }
.ob .logo { color: var(--sn-brand); margin-bottom: var(--sn-sp-4); }
.ob-h { font-size: var(--sn-tsx-25); line-height: 1.2; margin-bottom: var(--sn-sp-4); }
.ob-chips { justify-content: center; margin-bottom: var(--sn-sp-8); }
.ob-cta { width: 100%; margin-top: var(--sn-sp-6); }
.ob-card { display: block; text-align: left; background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-r-md); padding: var(--sn-sp-3); margin-bottom: var(--sn-sp-3); }
.ob-card .ob-t { display: block; font-weight: 600; margin: 0 var(--sn-sp-2) var(--sn-sp-1) var(--sn-sp-2); }
.ob-card .ob-n { display: block; font-size: var(--sn-tsx-16); color: var(--sn-text-muted); margin-top: var(--sn-sp-1); }
.ob-card input[type="checkbox"] { width: 24px; height: 24px; vertical-align: middle; }
.ob-card input[type="date"] { display: inline-block; width: auto; min-height: var(--sn-tap-min); }
.ob-disclaimer { font-size: var(--sn-tsx-16); color: var(--sn-text-muted); text-align: left; margin-top: var(--sn-sp-4); }

/* ---------- vista mese ---------- */
.month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sn-sp-3); }
.month-title { font-size: var(--sn-tsx-20); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--sn-sp-4); }
.cal-g { font: 600 var(--sn-tsx-13) var(--sn-font-sans); color: var(--sn-text-muted); text-align: center; padding: var(--sn-sp-1) 0; text-transform: uppercase; }
.cal-d {
  min-height: var(--sn-tap-min); border: 1px solid transparent; border-radius: var(--sn-r-sm);
  background: var(--sn-surface); color: var(--sn-text); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 400 var(--sn-tsx-16) var(--sn-font-num); position: relative;
}
.cal-d.vuoto { background: none; cursor: default; }
.cal-d.oggi { border-color: var(--sn-brand); }
.cal-d.sel { background: var(--sn-brand-tint); }
.cal-dot { font-size: var(--sn-tsx-13); border-radius: var(--sn-r-pill); padding: 1px 6px; font-weight: 700; }
.cal-dot.due { background: var(--sn-warn-bg); color: var(--sn-warn-ink); }
.cal-dot.ok { background: var(--sn-ok-bg); color: var(--sn-ok-ink); }

/* ---------- scheda ---------- */
.scheda { padding-top: var(--sn-sp-2); }
.back { margin-bottom: var(--sn-sp-3); }
.scheda-stato { display: inline-block; margin-bottom: var(--sn-sp-2); }
.scheda-data { font-size: var(--sn-tsx-25); line-height: 1.2; }
.scheda-titolo { font-size: var(--sn-tsx-20); color: var(--sn-text-muted); margin-bottom: var(--sn-sp-4); }
.scheda-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--sn-sp-2) var(--sn-sp-4); margin-bottom: var(--sn-sp-6); }
.scheda-grid .k { color: var(--sn-text-muted); font-size: var(--sn-tsx-16); }
.scheda-grid .v { font-weight: 600; word-break: break-word; }
.scheda-cta { width: 100%; margin-bottom: var(--sn-sp-4); }
.scheda-menu { display: flex; flex-direction: column; gap: var(--sn-sp-2); }

/* ---------- dialog / toast / perm banner / varia ---------- */
.dlg-h { font-size: var(--sn-tsx-20); margin-bottom: var(--sn-sp-2); }
.dlg-p { font-size: var(--sn-tsx-17); color: var(--sn-text-muted); margin-bottom: var(--sn-sp-4); }
.dlg-row { display: flex; gap: var(--sn-sp-2); justify-content: flex-end; margin-top: var(--sn-sp-2); }
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(var(--sn-adslot-h) + var(--sn-sp-4) + env(safe-area-inset-bottom)); display: flex; justify-content: center; z-index: 30; pointer-events: none; }
.sc-toast {
  pointer-events: auto;
  background: var(--sn-text); color: var(--sn-bg);
  border-radius: var(--sn-r-pill); padding: var(--sn-sp-2) var(--sn-sp-4);
  font-size: var(--sn-tsx-16); max-width: 90vw;
  display: flex; gap: var(--sn-sp-2); align-items: center;
}
.toast-act { background: none; border: none; color: var(--sn-brand-strong); font: 700 var(--sn-tsx-16) var(--sn-font-sans); cursor: pointer; }
[data-theme="dark"] .toast-act { color: var(--sn-brand); }
.perm-banner { background: var(--sn-brand-tint); border-radius: var(--sn-r-md); padding: var(--sn-sp-4); margin: var(--sn-sp-4) 0; }
.perm-banner p { font-size: var(--sn-tsx-16); color: var(--sn-text-muted); margin: var(--sn-sp-1) 0 var(--sn-sp-2); }
.data-bar { display: flex; flex-wrap: wrap; gap: var(--sn-sp-1); margin-top: var(--sn-sp-8); border-top: 1px solid var(--sn-border); padding-top: var(--sn-sp-2); }
.tpl-item { display: block; width: 100%; text-align: left; background: var(--sn-surface-2); border: 1px solid var(--sn-border); border-radius: var(--sn-r-md); padding: var(--sn-sp-3); margin-bottom: var(--sn-sp-2); cursor: pointer; min-height: var(--sn-tap-min); }
.tpl-item .tpl-t { display: block; font-weight: 600; font-size: var(--sn-tsx-17); color: var(--sn-text); }
.tpl-item .tpl-n { display: block; font-size: var(--sn-tsx-16); color: var(--sn-text-muted); }
.form-save { width: 100%; margin-top: var(--sn-sp-2); }
.sponsor-tag { display: inline-block; font: 600 var(--sn-tsx-13) var(--sn-font-sans); color: var(--sn-premium-ink); background: var(--sn-premium-bg); border-radius: var(--sn-r-pill); padding: 2px 10px; margin-bottom: var(--sn-sp-3); }
.num { font-variant-numeric: tabular-nums; }