/* ============================================================
   Focus Planner Kit 2.0 — base
   Palette e impianto grafico presi dal prototipo approvato.
   ============================================================ */
:root{
  --teal-900:#0F4048;
  --teal-700:#1B5E66;
  --teal-500:#3E8E8C;
  --teal-300:#8FBFB5;
  --sage-100:#E3EDE3;
  --sage-50:#F1F7F0;
  --ink:#123238;
  --muted:#6C8A8F;
  --line:#CFE2DC;
  --paper:#FFFFFF;
  --shell:#F6FAF8;
  --gold:#C9A227;
  --esempio:#C0553F;
  --radius:14px;
  --shadow:0 1px 2px rgba(18,50,56,.04), 0 8px 24px rgba(18,50,56,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--shell); color:var(--ink);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- niente ingrandimento sul fuoco (iOS) ----------
   iOS ingrandisce la pagina quando il campo che riceve il fuoco ha meno di
   16px, e dentro un'app installata non torna più indietro da solo. Il corpo
   del testo qui è 15px, quindi tutti i campi ricadevano nella regola.
   Vale solo su schermi touch: sul desktop 15px resta la scelta di design.
   ⚠️ Le tre regole delle griglie in schede.css (.blocco input, .agenda .slot
   input, .kcard input) restano più piccole di proposito: portarle a 16px
   cambierebbe la densità delle schede. Lì a proteggere è maximum-scale
   nell'index. */
@media (pointer: coarse) {
  input,textarea,select{font-size:16px}
}

/* accesso clienti: finché la sessione non è verificata il planner non
   viene inizializzato, ma il backup resta disponibile in caso di revoca */
body.accesso-da-verificare>header,
body.accesso-da-verificare>.avvisi,
body.accesso-da-verificare>.wrap,
body.accesso-da-verificare>footer,
body.accesso-da-verificare>.wm{display:none}
.accesso-gate{width:min(480px,calc(100% - 32px));margin:8vh auto 32px;padding:32px;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 55px rgba(18,50,56,.12)}
.accesso-brand{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--teal-700);margin-bottom:22px}
.accesso-gate h1{font-size:30px;line-height:1.15;margin:0 0 12px;color:var(--ink)}
.accesso-gate>p{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 22px}
.accesso-gate form{display:grid;gap:10px}
.accesso-gate label{font-size:13px;font-weight:700;color:var(--ink)}
.accesso-gate input{width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.accesso-gate button{min-height:46px;border:0;border-radius:10px;padding:10px 16px;background:var(--teal-700);color:#fff;font-weight:700;cursor:pointer}
.accesso-gate button.secondario{background:transparent;color:var(--teal-800);border:1px solid var(--line)}
.accesso-gate button:disabled{opacity:.55;cursor:wait}
.accesso-gate .accesso-stato{font-size:14px;min-height:22px;margin:14px 0 0;color:var(--muted)}
@media(max-width:600px){.accesso-gate{margin:24px auto;padding:24px}.accesso-gate h1{font-size:26px}}
:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.hidden{display:none !important}
#intestazione-stampa{display:none}   /* si vede solo in stampa */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* ---------- watermark foglia ---------- */
.wm{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.wm svg{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(900px,70vw);opacity:.055}

/* ---------- header ---------- */
/* env(safe-area-inset-*) vale 0 ovunque tranne che sull'iPhone installato,
   dove tiene l'header sotto la tacca invece che sotto il notch */
header{
  position:sticky;top:0;z-index:20;
  background:var(--teal-700); color:#fff;
  display:flex;align-items:center;gap:14px;
  padding:env(safe-area-inset-top,0px) 20px 0;
  height:calc(60px + env(safe-area-inset-top,0px));
}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:800;letter-spacing:.14em;font-size:13px;
  white-space:nowrap;min-width:0;overflow:hidden;flex-shrink:2}
.corto{display:none}
.brand .two{background:#000;padding:2px 7px;border-radius:4px;letter-spacing:.08em;font-size:11px}
.hspace{flex:1}
.hbtn{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;padding:7px 13px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:500;
  transition:.15s;white-space:nowrap;
}
.hbtn:hover{background:rgba(255,255,255,.22)}
/* "Esporta" è la via di fuga quando si cambia dispositivo: deve saltare all'occhio */
.hbtn.primario{background:#fff;border-color:#fff;color:var(--teal-700);font-weight:600}
.hbtn.primario:hover{background:var(--sage-100);border-color:var(--sage-100)}
.saved{font-size:11.5px;opacity:.75;min-width:88px;text-align:right}
.saved.allarme{opacity:1;font-weight:600;color:#FFD9CF}
.menubtn{display:none}

/* ---------- layout ---------- */
.wrap{display:flex;position:relative;min-height:calc(100vh - 60px - env(safe-area-inset-top,0px))}
nav{
  width:262px;flex:0 0 262px;background:var(--paper);
  border-right:1px solid var(--line);padding:20px 0 40px;
  align-self:flex-start;position:sticky;
  top:calc(60px + env(safe-area-inset-top,0px));
  max-height:calc(100vh - 60px - env(safe-area-inset-top,0px));overflow-y:auto;
}
.navnote{
  margin:0 16px 16px;padding:11px 13px;background:var(--sage-50);
  border:1px dashed var(--teal-300);border-radius:10px;
  font-size:11.5px;color:var(--teal-700);line-height:1.45;
}
.navnote b{display:block;font-size:12px;margin-bottom:2px}
.navlink{
  display:block;margin-top:8px;padding:0;background:none;border:0;cursor:pointer;
  font-size:11.5px;font-weight:600;color:var(--teal-700);text-decoration:underline;
  text-underline-offset:2px;text-align:left
}
.navlink:hover{color:var(--teal-900)}
/* ---------- menu a fisarmonica ----------
   Con 18 schede più il metodo il menu è lungo: su telefono, senza i gruppi
   richiudibili, per arrivare alla 18 si scorre mezzo minuto. */
.navsez{border-bottom:1px solid var(--line)}
.navsez:last-child{border-bottom:0}
.navgroup{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 16px 9px;margin:0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600
}
.navgroup:hover{color:var(--teal-700)}
.navgroup .freccia{font-size:12px;transition:transform .18s ease}
.navsez.chiusa .navgroup .freccia{transform:rotate(-90deg)}
.navsez.chiusa .navsez-corpo{display:none}
.navsez-corpo{padding-bottom:8px}
.navitem.manuale{
  display:block;margin:2px 10px 8px;padding:12px 14px;border-radius:10px;
  background:var(--sage-100);border-left:0;font-weight:600;color:var(--teal-900)
}
.navitem.manuale:hover{background:var(--sage-50);outline:1px solid var(--teal-300)}
.navitem.manuale .n{background:none;padding:0;min-width:0;font-size:15px;margin-right:4px}
.navitem.manuale small{
  display:block;margin-top:4px;font-weight:400;font-size:12px;line-height:1.35;color:var(--muted)
}
.navitem{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 16px;background:none;border:0;cursor:pointer;
  font-size:13.5px;color:var(--ink);border-left:3px solid transparent;
}
.navitem:hover{background:var(--sage-50)}
.navitem[aria-current="page"]{background:var(--sage-100);border-left-color:var(--teal-700);font-weight:600;color:var(--teal-900)}
.navitem .n{
  font-size:10.5px;font-weight:700;color:var(--teal-500);
  background:var(--sage-100);border-radius:5px;padding:2px 6px;min-width:26px;text-align:center
}
main{flex:1;padding:26px 30px 70px;max-width:1180px;min-width:0}
footer{padding:22px 30px 50px;font-size:12px;color:var(--muted);position:relative;z-index:1}
.versione-app{font-size:11px;opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- collegamento al percorso ---------- */
.quadbtn{
  display:inline-flex;align-items:center;gap:7px;max-width:230px;min-width:0;flex-shrink:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;padding:7px 12px;border-radius:9px;cursor:pointer;font-size:12.5px;
  transition:.15s
}
.quadbtn:hover{background:rgba(255,255,255,.22)}
.quadbtn .et{opacity:.7;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.quadbtn .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quadbtn .cv{opacity:.7;font-size:10px}

/* ---------- menu a tendina ---------- */
.tendina{
  position:fixed;z-index:70;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 44px rgba(15,64,72,.22);padding:6px;
  min-width:236px;max-width:min(330px,calc(100vw - 16px));max-height:72vh;overflow-y:auto
}
.tvoce{
  display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;
  padding:9px 12px;cursor:pointer;font-size:13.5px;color:var(--ink);font-family:inherit
}
.tvoce:hover{background:var(--sage-50)}
.tvoce.attiva{background:var(--sage-100);color:var(--teal-900);font-weight:600}
.tvoce .tt{display:block}
.tvoce .tn{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.35}
.tsep{height:1px;background:var(--line);margin:6px 4px}

/* ---------- pannello "come si compila" ---------- */
.guide{
  margin-top:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden
}
/* sopra la scheda: chiuso deve occupare una riga sola e non spingere giù niente */
.guide.sopra{
  margin:0 0 18px;box-shadow:none;background:var(--sage-50);border-color:var(--teal-300)
}
.guide.sopra > button{padding:11px 16px;font-size:13.5px}
.guide.sopra > button .ic{width:23px;height:23px;flex-basis:23px;font-size:13px;background:#fff}
.guide.sopra .content{background:var(--paper)}
.guide > button{
  width:100%;display:flex;align-items:center;gap:11px;padding:15px 20px;
  background:none;border:0;cursor:pointer;text-align:left;font-weight:600;color:var(--teal-700);font-size:14.5px
}
.guide > button .ic{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--sage-100);
  color:var(--teal-700);display:grid;place-items:center;font-size:14px
}
.guide > button .chev{margin-left:auto;transition:.2s;color:var(--muted);font-size:12px}
.guide.open > button .chev{transform:rotate(180deg)}
.guide .content{display:none;padding:0 20px 22px;border-top:1px solid var(--line)}
.guide.open .content{display:block}
.guide .content h4{margin:18px 0 7px;font-size:13.5px;color:var(--teal-900)}
.guide .content p,.guide .content li{font-size:13.5px;color:#33565C;margin:0 0 8px}
.guide .content ul{margin:0 0 10px;padding-left:19px}
.quote{background:var(--sage-50);border-left:3px solid var(--teal-500);border-radius:0 9px 9px 0;
  padding:11px 15px;font-size:13px;color:var(--teal-900);margin:12px 0}

/* ---------- finestre di dialogo e schermata di primo accesso ---------- */
/* align-items:flex-start + margin:auto sul box: è l'unica combinazione che su
   schermi bassi non taglia la parte alta della finestra quando è più alta del viewport */
.modale{
  position:fixed;inset:0;z-index:60;background:rgba(15,64,72,.58);
  display:flex;align-items:flex-start;justify-content:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch
}
.modale .box{
  background:var(--paper);border-radius:16px;box-shadow:0 24px 60px rgba(15,64,72,.3);
  max-width:560px;width:100%;padding:26px 28px;margin:0;position:relative
}
/* quando ci sta, la finestra sta al centro; quando è più alta, parte dall'alto e si scorre */
@media (min-height:760px){ .modale{align-items:center} }
.modale .box.largo{max-width:640px}
.modale h2{margin:0 0 12px;font-size:20px;line-height:1.25;color:var(--teal-700);font-weight:800}
.modale p{font-size:14.5px;line-height:1.62;color:#2A4A50;margin:0 0 12px}
.modale p:last-of-type{margin-bottom:0}
.modale .azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.mbtn{
  border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;
  border-radius:10px;padding:10px 18px;cursor:pointer;font-size:13.5px;font-weight:600;
  font-family:inherit
}
.mbtn:hover{background:var(--teal-900);border-color:var(--teal-900)}
.mbtn.chiaro{background:#fff;color:var(--teal-700)}
.mbtn.chiaro:hover{background:var(--sage-50)}
.mbtn.pericolo{background:#B4432E;border-color:#B4432E}
.mbtn.pericolo:hover{background:#963725;border-color:#963725}
.mbtn.neutro{background:none;border-color:transparent;color:var(--muted);font-weight:500}
.mbtn.neutro:hover{background:var(--sage-50);color:var(--teal-700)}

/* Passi della schermata di primo accesso.
   ⚠️ Il selettore DEVE restare "> li", figli diretti. Con ".passi li" il
   contatore prendeva anche gli <li> dentro <details class="altridisp">: la lista
   dei dispositivi si mangiava i numeri 3-4-5-6 e l'ultimo passo diventava "7". */
.passi{counter-reset:passo;margin:18px 0 0;padding:0;list-style:none}
.passi > li{
  counter-increment:passo;position:relative;padding:0 0 16px 42px;
  font-size:14.5px;line-height:1.6;color:#2A4A50
}
.passi > li::before{
  content:counter(passo);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:9px;background:var(--sage-100);color:var(--teal-700);
  display:grid;place-items:center;font-weight:700;font-size:13px
}
.passi li b{color:var(--teal-900)}
.istruzioni{
  background:var(--sage-50);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;margin-top:8px;font-size:13.5px;color:var(--teal-900)
}
.istruzioni .via{font-weight:600}
.altridisp{margin-top:10px;font-size:12.5px}
.altridisp summary{cursor:pointer;color:var(--muted)}
.altridisp ul{margin:8px 0 0;padding-left:18px}
.altridisp li{font-size:12.5px;color:#33565C;margin-bottom:5px}

/* barra dei promemoria, sotto l'header */
.avvisi{position:relative;z-index:2}
.avviso{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--sage-100);border-bottom:1px solid var(--line);
  padding:10px 20px;font-size:13px;color:var(--teal-900)
}
.avviso.annulla{background:#FDF4F1;border-bottom-color:#EBC7BC}
.avviso .testo{flex:1;min-width:200px}
.avviso .abtn{
  border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;border-radius:8px;
  padding:6px 13px;cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit;white-space:nowrap
}
.avviso .abtn.chiaro{background:#fff;color:var(--teal-700)}
.avviso .abtn.neutro{background:none;border-color:transparent;color:var(--muted);font-weight:500}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  main{padding:22px 20px 60px}
  nav{width:224px;flex-basis:224px}
}
@media(max-width:768px){
  .menubtn{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;font-size:17px}
  .brand{font-size:11.5px;letter-spacing:.1em}
  /* ⚠️ il padding-top qui NON si può togliere: è lo spazio della barra di
     stato dell'iPhone (ora, batteria, notch). Senza, il marchio e i pulsanti
     finiscono sotto l'orologio e non si leggono. */
  header{gap:8px;padding:env(safe-area-inset-top,0px) 10px 0}
  .hbtn.opt{display:none}
  .saved{min-width:0}
  /* nell'header di un telefono ci stanno solo le cose essenziali */
  .lungo{display:none}
  .corto{display:inline}
  .quadbtn{max-width:118px;padding:7px 9px}
  .quadbtn .et{display:none}
  .hbtn.primario{padding:7px 11px}
  nav{
    position:fixed;top:calc(60px + env(safe-area-inset-top,0px));left:0;z-index:19;
    width:min(300px,86vw);flex-basis:auto;

    /* ⚠️ ALTEZZA ESPLICITA, non top + bottom:0.
       Prima il menu diceva top:60px e bottom:0 e lasciava che l'altezza venisse
       da sola. Misurato il 21/08/2026 su schermo 375×812: il menu risultava alto
       1192px, cioè quanto il suo contenuto, con l'ultima scheda a y=1110 —
       fuori dallo schermo e irraggiungibile. Senza un'altezza definita non
       c'era niente da far scorrere DENTRO il menu, quindi il dito trascinava la
       pagina sotto: da fuori sembrava che il menu fosse bloccato.
       La riga in dvh vale su iPhone, dove la barra di Safari compare e scompare
       e 100vh è più alto di quello che si vede davvero; quella in vh resta come
       ripiego per i browser che non conoscono dvh. */
    max-height:none;
    height:calc(100vh - 60px - env(safe-area-inset-top,0px));
    height:calc(100dvh - 60px - env(safe-area-inset-top,0px));

    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:0 10px 40px rgba(18,50,56,.18);

    /* Adesso che il menu ha un'altezza, queste tre righe fanno sì che a
       scorrere sia lui e non la pagina: touch-action:pan-y dice al browser che
       il dito in verticale appartiene al menu, overscroll-behavior:contain
       ferma il passaggio al livello sopra quando si arriva in cima o in fondo.
       overflow-y è ripetuto qui apposta, così la regola si legge tutta insieme. */
    overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
    -webkit-overflow-scrolling:touch
  }
  nav.open{transform:translateX(0)}
  .navscrim{position:fixed;inset:calc(60px + env(safe-area-inset-top,0px)) 0 0;background:rgba(18,50,56,.32);z-index:18}
  main{padding:26px 14px calc(60px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:480px){
  body{font-size:14.5px}
  main{padding:22px 11px 56px}
}

/* ============================================================
   Percorso temporale, Libreria e onboarding personalizzato
   ============================================================ */

/* ---------- onboarding approvato: quiz a sinistra, anteprima a destra ---------- */
/* ---------- perché con il menu aperto la pagina NON viene bloccata ----------
   Sembra la mossa ovvia: menu aperto → html,body{overflow:hidden}. È stata
   provata il 21/08/2026 e va scartata. Bloccando lo scorrimento, l'intestazione
   smette di avere un contenitore che scorre e position:sticky la riporta alla
   sua posizione naturale: misurata a -109px, cioè fuori dallo schermo.
   Il menu resta dov'è senza bloccare niente, perché ha un'altezza sua e
   overscroll-behavior:contain (vedi la regola nav qui sopra). Sul velo scuro
   ci pensa il gestore di touchmove in app.js. */

body.onboarding-aperto{overflow:hidden}
.onboarding-tagline{display:none;margin-left:auto;font-size:14px;letter-spacing:.01em;color:rgba(255,255,255,.9)}
body.onboarding-aperto header .menubtn,
body.onboarding-aperto header .quadbtn,
body.onboarding-aperto header .hspace,
body.onboarding-aperto header #btnExport,
body.onboarding-aperto header #btnImport,
body.onboarding-aperto header #btnReset,
body.onboarding-aperto header .saved{display:none}
body.onboarding-aperto header .onboarding-tagline{display:block}
/* La tagline è decorativa e su telefono non ci sta: con margin-left:auto rubava
   lo spazio al marchio, che avendo overflow:hidden finiva tagliato a metà parola
   ("FOCUS PLANNER KI") perdendo anche il badge 2.0.
   ⚠️ Deve stare QUI, dopo la regola display:block: ha la stessa specificità, e le
   media query non ne aggiungono — se sta più in alto nel file, non vince. */
@media(max-width:768px){
  body.onboarding-aperto header .onboarding-tagline{display:none}
  body.onboarding-aperto header .brand{flex-shrink:0}
}
.onboarding{
  position:fixed;z-index:55;inset:calc(60px + env(safe-area-inset-top,0px)) 0 0;
  overflow-y:auto;background:var(--shell);padding:56px 48px 64px
}
.onboarding-inner{
  width:min(1340px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:28px;position:relative
}
.onboarding-main,.onboarding-preview{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:38px 40px
}
.onboarding-preview{background:var(--sage-50);padding:38px 32px}
.onboarding-step{
  display:inline-block;background:var(--sage-100);color:var(--teal-700);border-radius:7px;
  padding:4px 10px;font-size:12px;font-weight:700;margin-bottom:12px
}
.onboarding-progress{height:3px;background:#E9F0ED;margin:0 0 28px;overflow:hidden}
.onboarding-progress span{display:block;height:100%;background:var(--teal-700);transition:width .2s ease}
.onboarding-main h1{font-size:36px;line-height:1.16;color:var(--teal-900);margin:0 0 12px;max-width:720px}
.onboarding-main>p{font-size:16px;color:var(--muted);margin:0 0 26px;max-width:650px}
.onboarding-options{display:grid;gap:10px}
.onboarding-option{
  display:flex;align-items:center;gap:14px;width:100%;min-height:58px;text-align:left;
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 16px;cursor:pointer
}
.onboarding-option:hover{background:var(--sage-50);border-color:var(--teal-300)}
.onboarding-option.scelta{background:var(--sage-50);border-color:var(--teal-500);color:var(--teal-900)}
.onboarding-option .radio{width:20px;height:20px;border:2px solid #AFC5C1;border-radius:50%;flex:0 0 20px}
.onboarding-option.scelta .radio{border:6px solid var(--teal-700)}
.onboarding-option b{font-size:15px;font-weight:600}
.onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px}
.onboarding-next,.onboarding-enter{
  min-width:220px;border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;
  border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer
}
.onboarding-next:hover,.onboarding-enter:hover{background:var(--teal-900);border-color:var(--teal-900)}
.onboarding-next:disabled{opacity:.45;cursor:not-allowed}
.onboarding-back,.onboarding-close{
  border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer;padding:10px
}
.onboarding-close{position:absolute;right:14px;top:10px;z-index:2;font-size:24px;line-height:1}
.onboarding-preview h2{font-size:23px;line-height:1.2;color:var(--teal-700);margin:0 0 8px}
.onboarding-preview>p{font-size:14.5px;color:var(--muted);margin:0 0 24px}
.onboarding-preview ol{counter-reset:preview;list-style:none;margin:0;padding:0}
.onboarding-preview li{
  counter-increment:preview;display:grid;grid-template-columns:30px 1fr;gap:12px;position:relative;
  padding:0 0 14px
}
.onboarding-preview li:not(:last-child)::after{
  content:"";position:absolute;left:14px;top:29px;bottom:1px;border-left:1px solid var(--teal-300)
}
.preview-num{
  width:30px;height:30px;border-radius:50%;background:var(--teal-700);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;position:relative;z-index:1
}
.preview-num::after{content:counter(preview)}
.preview-card{
  min-height:70px;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px
}
.preview-icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:8px;
  color:var(--teal-700);background:var(--sage-100)
}
.preview-icon svg{width:22px;height:22px;stroke-width:1.8}
.onboarding-preview li b{display:block;color:var(--teal-900);font-size:14px;margin:3px 0 2px}
.onboarding-preview li small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.preview-note{border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:13px}
.onboarding-inner.risultato .onboarding-main{display:flex;flex-direction:column;justify-content:center}
.onboarding-risultato-lista{display:grid;gap:8px;margin:6px 0 26px}
.onboarding-risultato-lista div{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:9px 0}
.onboarding-risultato-lista span{color:var(--teal-700);font-weight:800;min-width:20px}
.onboarding-enter{align-self:flex-start}
.onboarding-preview.protezione{align-self:stretch}
/* passo 0: installazione. Una sola colonna, larga come la card del quiz. */
.onboarding-inner.passo-installa{width:min(892px,100%);grid-template-columns:minmax(0,1fr)}
.passo-installa .onboarding-actions{justify-content:flex-start}
.installa-scegli{font-weight:600;color:var(--teal-900);margin:0 0 12px}
.installa-scelte{display:grid;gap:10px}
.installa-scelta{width:100%}
.installa-pannello[hidden]{display:none}
.installa-pannello{
  border:1px solid var(--teal-300);border-top:0;border-radius:0 0 12px 12px;
  background:var(--sage-50);padding:18px 18px 14px;margin:-6px 0 0
}
.installa-scelta.scelta{border-radius:12px 12px 0 0}
.installa-ora{margin:0 0 16px}
.installa-passi{counter-reset:passo;list-style:none;margin:0;padding:0}
.installa-passi li{
  counter-increment:passo;display:grid;grid-template-columns:28px minmax(0,1fr);
  gap:12px;align-items:start;padding:0 0 14px;font-size:14.5px;color:var(--ink);line-height:1.5
}
.installa-passi li:last-child{padding-bottom:0}
.installa-passi .num{
  width:28px;height:28px;border-radius:50%;background:var(--teal-700);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700
}
.installa-passi .num::after{content:counter(passo)}
.icona-condividi{vertical-align:-6px;margin:0 2px;color:var(--teal-700)}
.installa-nota{margin-top:14px}
.installa-ostacolo{margin:0 0 18px;font-size:14.5px;line-height:1.5}
.installa-fatto h1{margin-top:6px}

/* ---------- pagine di sistema ---------- */
.system-hero{border-bottom:1px solid var(--line);padding:2px 0 24px;margin-bottom:12px}
.system-hero>span,.calendar-head span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-500);font-weight:700}
.system-hero h2{font-size:27px;line-height:1.2;margin:5px 0 8px;color:var(--teal-900)}
.system-hero p{font-size:15px;color:var(--muted);margin:0;max-width:700px}
.system-empty{padding:42px 28px;text-align:center;background:var(--sage-50);border:1px solid var(--line);border-radius:14px}
.system-empty h2{font-size:22px;color:var(--teal-900);margin:0 0 8px}
.system-empty p{font-size:15px;color:var(--muted);margin:0 auto 20px;max-width:520px}
.system-empty button,.path-actions button,.library-actions button,.path-footer button,.text-action{
  border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;border-radius:9px;
  padding:8px 14px;font-weight:600;cursor:pointer
}
.system-empty button:hover,.path-actions button:hover,.library-actions button:hover{background:var(--teal-900)}
.path-list{margin-top:8px}
.path-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line)}
.path-index{width:30px;height:30px;border-radius:50%;background:var(--teal-700);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.path-copy h3{font-size:16px;color:var(--teal-900);margin:0 0 2px}
.path-copy p{font-size:13.5px;color:var(--muted);margin:0}
.path-copy small{display:block;font-size:11.5px;color:var(--teal-500);margin-top:5px}
.path-actions,.library-actions,.path-footer{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.path-actions button.secondario,.library-actions button.secondario,.path-footer button.secondario{
  background:#fff;color:var(--teal-700);border-color:var(--line)
}
.path-actions button.secondario:hover,.library-actions button.secondario:hover,.path-footer button.secondario:hover{background:var(--sage-50)}
.path-footer{justify-content:flex-start;margin-top:24px}
.text-action{margin-top:18px;background:none;color:var(--teal-700);border-color:transparent;padding-left:0}
.calendar-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center;margin-bottom:24px}
.calendar-head h2{margin:3px 0 0;color:var(--teal-900);font-size:25px}
.calendar-head button{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--teal-700);font-size:20px;cursor:pointer}
.calendar-head button:hover{background:var(--sage-50)}
.month-list{border-top:1px solid var(--line)}
.month-item{display:grid;width:100%;grid-template-columns:170px minmax(0,1fr) 130px;gap:16px;align-items:center;text-align:left;padding:16px 4px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer}
.month-item:hover{background:var(--sage-50)}
.month-type{font-size:12px;color:var(--teal-500);font-weight:700}
.month-item b{font-size:14.5px;color:var(--teal-900)}
.month-item small{font-size:11.5px;color:var(--muted);text-align:right}
.library-intro{border-bottom:1px solid var(--line);padding-bottom:20px}
.library-intro h2{font-size:27px;color:var(--teal-900);margin:0 0 8px}
.library-intro p{font-size:15px;color:var(--muted);margin:0;max-width:720px}
.library-grid{margin-top:4px}
.library-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:15px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line)}
.library-num{font-size:11px;font-weight:800;color:var(--teal-500);background:var(--sage-100);border-radius:6px;padding:4px 6px;text-align:center}
.library-copy h3{margin:0 0 3px;font-size:15.5px;color:var(--teal-900)}
.library-copy p{margin:0;font-size:13.5px;color:var(--muted)}
.library-copy small{display:block;margin-top:4px;font-size:11.5px;color:var(--teal-500)}

/* ---------- controllo della singola istanza ---------- */
.instancebar{display:flex;align-items:center;gap:18px;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 20px}
.instance-title{min-width:0;display:grid}
.instance-title>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-500);font-weight:700}
.instance-title>b{font-size:15px;color:var(--teal-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.instance-title>small{font-size:11.5px;color:var(--muted)}
.instance-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.instance-actions button{border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;border-radius:8px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer}
.instance-actions button.secondario{background:#fff;color:var(--teal-700);border-color:var(--line)}
.instance-actions button:disabled{opacity:.35;cursor:not-allowed}
.instance-count{font-size:11.5px;color:var(--muted);min-width:42px;text-align:center}
.dlg-field{display:grid;gap:5px;font-size:12px;font-weight:700;color:var(--teal-900);margin:14px 0}
/* Usate nel riquadro che compare quando il salvataggio del backup non riesce:
   il nome del file e il motivo tecnico. Senza queste due regole il testo c'era
   ma sembrava scritto per sbaglio. */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.94em}
.dettaglio-tecnico{margin:16px 0 0;font-size:12px;color:var(--muted)}

.dlg-field input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fff}

@media(max-width:980px){
  .onboarding{padding:30px 22px 48px}
  .onboarding-inner{grid-template-columns:1fr 340px;gap:18px}
  .onboarding-main,.onboarding-preview{padding:30px 26px}
  .onboarding-main h1{font-size:30px}
}
@media(max-width:768px){
  .onboarding{padding:18px 12px 36px}
  .onboarding-inner{grid-template-columns:1fr}
  .onboarding-main,.onboarding-preview{padding:24px 20px;border-radius:14px}
  .onboarding-main h1{font-size:27px}
  .onboarding-preview{order:2}
  /* La barra della scheda prendeva mezza schermata prima ancora del titolo:
     su telefono sta in una riga sola, e "Nuova scheda" e "Duplica" si
     ritrovano dentro il menu ⋯ (vedi app.js). */
  .instancebar{flex-direction:row;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:14px}
  .instance-title{min-width:0;flex:1 1 auto}
  .instance-title span{display:none}
  .instance-title b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .instance-title small{display:none}
  .instance-actions{justify-content:flex-end;width:auto;flex:0 0 auto;gap:4px}
  #istanzaNuova,#istanzaDuplica{display:none}
  #istanzaGestisci{font-size:18px;line-height:1;padding:6px 10px}
  .path-row,.library-item{grid-template-columns:34px minmax(0,1fr)}
  .path-actions,.library-actions{grid-column:2;justify-content:flex-start}
  .month-item{grid-template-columns:110px minmax(0,1fr)}
  .month-item small{grid-column:2;text-align:left}
}
@media(max-width:480px){
  .onboarding-main,.onboarding-preview{padding:22px 16px}
  .onboarding-main h1{font-size:25px}
  .onboarding-next,.onboarding-enter{min-width:0;width:100%}
  .onboarding-actions{align-items:stretch;flex-direction:column-reverse}
  .onboarding-actions>span{display:none}
  .onboarding-back{text-align:left}
  .path-row,.library-item{padding:15px 0}
  .instance-actions button{flex:1 1 auto}
}


/* ============================================================
   20 agosto 2026 — le parti nuove
   ============================================================ */

/* il consiglio sotto le tre scelte del dispositivo: è un consiglio, non un
   allarme, quindi tono e colori restano quelli tenui */
.installa-consiglio{margin-top:18px;line-height:1.5}

/* ---------- Oggi ---------- */
.oggi-titolo{font-size:15px;color:var(--teal-700);margin:22px 0 10px}
.oggi-conta{margin-top:18px;font-size:13.5px;color:var(--muted)}
.oggi-azioni{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}

/* ---------- i tre selettori del piano giornaliero ----------
   Sono facoltativi: si può usare la scheda senza mettere nessuna data. */
.pickbox{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px;
  background:var(--sage-50)
}
.pickrow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pickrow:last-of-type{margin-bottom:0}
.pickrow .fieldlabel{min-width:150px;flex:0 0 auto}
.picks{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.pick{
  min-width:30px;padding:5px 8px;border:1px solid var(--line);background:#fff;
  border-radius:7px;font-size:13px;line-height:1;color:var(--ink);cursor:pointer;
  font-variant-numeric:tabular-nums
}
.pick:hover{border-color:var(--teal-300)}
.pick.on{background:var(--teal-700);border-color:var(--teal-700);color:#fff;font-weight:600}

/* ---------- attività urgenti e importanti (scheda 10) ---------- */
.urgenti{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 10px;min-width:640px
}
.urgenti .bandalbl{
  display:grid;place-items:center;background:var(--sage-100);border:1px solid var(--line);
  border-radius:10px;padding:8px 0
}
.urgenti .bandalbl.vuota{background:none;border:0}
.urgenti .bandalbl span{
  writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--teal-700)
}
.urgenti .banda{display:contents}
.urgenti .bandagriglia{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:6px 0}
.urgenti .bandagriglia.intestazioni{padding-bottom:0}
.urgenti .bandacol{min-width:0}
.urgenti .bandacol h3{
  margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700)
}

/* ---------- esercizi E1 ed E2 ---------- */
.esercizio-riga{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start}
.esercizio-campi{display:grid;gap:8px;min-width:0}
.esercizio-campi label,.campo-largo{
  display:block;font-size:12px;color:var(--muted);min-width:0
}
.campo-largo{margin-bottom:12px}
.campo-largo:last-child{margin-bottom:0}

/* ---------- niente scorrimento della pagina sotto le griglie ----------
   Sull'iPhone, arrivando in fondo alla griglia settimanale il dito trascinava
   la PAGINA: l'intestazione usciva di lato, perché position:sticky tiene solo
   in verticale. overscroll-behavior ferma il passaggio al livello sopra. */
.calwrap,.weekwrap,.agendawrap,.tabwrap{
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y
}
html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}

/* il segnale che la griglia continua: sul telefono non è ovvio */
.calwrap,.weekwrap,.agendawrap,.tabwrap{position:relative}
.tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabwrap table{min-width:420px}
.calwrap::after,.weekwrap::after,.agendawrap::after,.tabwrap::after{
  content:"";position:sticky;float:right;top:0;right:0;width:26px;height:100%;
  margin-left:-26px;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.92))
}

/* ---------- schermi stretti ---------- */
@media(max-width:700px){
  /* i campi in testa alla scheda andavano a capo solo a metà: l'etichetta
     restava larga 250px e il campo usciva dallo schermo di una trentina di
     pixel, tagliato e impossibile da toccare */
  /* il titolo e i campi non stanno affiancati su uno schermo stretto:
     il campo restava largo un terzo e il testo dentro era tagliato */
  .sheet-head{flex-direction:column;align-items:stretch}
  .sheet-head h1{width:100%}
  .headbar{flex-direction:column;align-items:stretch;min-width:0;width:100%}
  .headbar label{width:100%;min-width:0;display:flex;flex-direction:column;gap:4px}
  .headbar label input,.headbar label .txt{width:100%;min-width:0;flex:1 1 auto}
  .sheet-head,.sheet,main,.wrap{min-width:0}
  .pickrow{flex-direction:column;gap:6px}
  .pickrow .fieldlabel{min-width:0}
  .urgenti{min-width:560px}
}

/* ---------- ruota delle abitudini ---------- */
.wheelcol{min-width:0}
.nome-abitudine{pointer-events:auto}
.premio-frase{
  margin:22px 0 8px;text-align:center;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.5
}
.progress.piccola{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px
}
.progress.piccola .big{font-size:17px;font-weight:700;color:var(--teal-700)}
.progress.piccola .lbl{font-size:12.5px;color:var(--muted)}
.progress.piccola .bar{flex:1 1 120px;min-width:80px;height:6px;background:var(--sage-100);border-radius:99px;overflow:hidden}
.progress.piccola .bar i{display:block;height:100%;background:var(--teal-500)}
.swatch.scegli{border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.swatch.scegli:hover{outline:2px solid var(--teal-300)}
.tavolozza{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:8px;
  border:1px solid var(--line);border-radius:10px;background:#fff
}
.tavolozza .swatch{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer}
.tavolozza .swatch.scelto{outline:2px solid var(--teal-700);outline-offset:1px}

@media(max-width:700px){
  /* la ruota va a tutta larghezza e i campi vanno sotto */
  .wheelwrap{grid-template-columns:1fr}
  .wheel{width:100%;height:auto;max-width:420px;margin:0 auto;display:block}
}