/* EquiBook — LA BASE COMUNE dei cinque mockup «la navigazione del professionista» (01/10/2026).
   Cinque impostazioni diverse, UNA sola scheda del cavallo e UN solo modo di registrare (regola 19): cambia da dove
   si parte e come ci si muove, non cosa si trova. Per questo le viste stanno qui e ogni mockup dichiara solo casa e barra.
   I token sono quelli dell'app (stessi nomi, stessi valori: `src/style/token.css`). */
:root{--sfondo:#0c1120;--sfondo-2:#111729;--pannello:#161d33;--pannello-2:#1d2542;--bordo:#2a3358;--incavo:#0e1730;
      --testo:#e8ecf7;--testo-soft:#9aa6c9;--testo-debole:#74809f;--accento:#e8c170;--su-accento:#1a1304;
      --ok:#3ddc84;--avviso:#f5b642;--errore:#ff6b6b;--info:#4fd1e0;--titolo-eco:#2b3660;
      --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
      --fs-micro:10px;--fs-xs:11px;--fs-sm:12px;--fs-base:13px;--fs-corpo:14px;--fs-lg:16px;--fs-xl:18px;
      --r-xs:8px;--r-sm:10px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;--tocco:44px;--h-tabbar:60px;--largo:460px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sfondo);color:var(--testo);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.45;
     -webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:var(--largo);margin:0 auto;padding:var(--sp-4) var(--sp-4) calc(var(--h-tabbar) + 96px)}
h1{font-size:30px;font-weight:900;letter-spacing:-.01em;line-height:1.1;margin:var(--sp-3) 0 var(--sp-1)}
h1+.filetto{width:44px;height:3px;background:var(--accento);border-radius:2px;margin-bottom:var(--sp-3)}
.torna{display:inline-flex;align-items:center;min-height:var(--tocco);font-size:var(--fs-base);font-weight:700;color:var(--info);text-decoration:none}
.timbro{position:fixed;right:6px;bottom:calc(var(--h-tabbar) + 6px + env(safe-area-inset-bottom));z-index:3;font-size:var(--fs-micro);color:var(--testo-debole);
        background:var(--sfondo);border-radius:var(--r-xs);padding:1px 5px;pointer-events:none}
.senza-barra .timbro{bottom:6px}
/* le spiegazioni stanno dietro la ⓘ e partono chiuse (canone) */
details.sp{margin:0 0 var(--sp-3)}
details.sp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:var(--tocco);font-size:var(--fs-sm);color:var(--testo-debole)}
details.sp>summary::-webkit-details-marker{display:none}
details.sp>summary .i{flex:0 0 auto;width:17px;height:17px;border-radius:50%;border:1px solid var(--testo-debole);display:grid;place-items:center;font-size:var(--fs-micro);font-weight:800;font-style:italic}
details.sp .box{font-size:var(--fs-base);color:var(--testo-soft);background:var(--sfondo-2);border:1px solid var(--bordo);border-radius:var(--r-md);padding:11px 13px}
details.sp .box b{color:var(--testo)}
details.sp .box p{margin:0 0 var(--sp-2)}details.sp .box p:last-child{margin:0}

/* ── le icone: il set dell'app, a linea ── */
svg.ic{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
svg.ic.p{width:18px;height:18px}

/* ── L'APP: da qui in giù è il prototipo, si tocca ── */
#app{border-top:1px solid var(--bordo);margin-top:var(--sp-2);min-height:100vh}
.ebtop{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:var(--sp-2);background:var(--sfondo);min-height:60px;padding:var(--sp-2) 0}
.ebtop .nv{flex:0 0 var(--tocco);width:var(--tocco);height:var(--tocco);display:grid;place-items:center;border:0;background:none;color:var(--testo-soft);border-radius:var(--r-md)}
.ebtop .nv.sx{margin-left:-10px}.ebtop .nv.dx{margin-right:-10px}
.ebtop .tx{flex:1;min-width:0}
.ebtop .t1{font-size:21px;font-weight:900;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ebtop.radice .t1{font-size:26px}
.ebtop .t2{font-size:var(--fs-xs);color:var(--testo-debole);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--pannello-2);border:1px solid var(--bordo);display:grid;place-items:center;
    font-size:var(--fs-sm);font-weight:800;color:var(--testo-soft)}
button.av{padding:0}
.av.cav{border-radius:var(--r-md);width:44px;height:52px;color:var(--testo-debole)}

.sez{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
     color:var(--accento);margin:var(--sp-5) 0 var(--sp-1)}
.sez:first-child{margin-top:var(--sp-2)}
.sez small{font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none;color:var(--testo-debole)}
.sez button{border:0;background:none;font-size:var(--fs-sm);font-weight:700;letter-spacing:0;text-transform:none;color:var(--info);min-height:var(--tocco);padding:0}
.mese{font-size:var(--fs-xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--testo-debole);margin:var(--sp-4) 0 0}

/* una riga: si tocca tutta; il comando a destra è un bersaglio suo, da 44 */
.riga{display:flex;align-items:center;gap:var(--sp-3);min-height:60px;padding:var(--sp-2) 0;border-top:1px solid var(--bordo);width:100%;text-align:left;
      background:none;border-left:0;border-right:0;border-bottom:0}
.riga.prima,.sez+.riga,.mese+.riga{border-top:0}
.riga .tx{flex:1;min-width:0}
.riga .n{font-size:var(--fs-corpo);font-weight:800;line-height:1.3}
.riga .d{font-size:var(--fs-sm);color:var(--testo-debole);margin-top:1px}
.riga .st{font-size:var(--fs-sm);font-weight:700;margin-top:1px}
.st.rosso{color:var(--errore)}.st.giallo{color:var(--avviso)}
.riga .gg{flex:0 0 42px;font-size:var(--fs-sm);font-weight:800;color:var(--testo-soft);line-height:1.2}
.riga .gg small{display:block;font-size:var(--fs-micro);font-weight:700;color:var(--testo-debole);text-transform:uppercase;letter-spacing:.04em}
.riga>svg.ic{color:var(--testo-debole)}
.mini{flex:0 0 auto;min-height:var(--tocco);padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid var(--bordo);background:var(--pannello-2);
      font-size:var(--fs-base);font-weight:800;color:var(--info)}
.riga .tocca{border:0;background:none;padding:0;text-align:left;min-height:var(--tocco)}
.vuoto{font-size:var(--fs-base);color:var(--testo-debole);padding:var(--sp-4) 0}
.nota{font-size:var(--fs-sm);color:var(--testo-debole);margin:var(--sp-3) 0 0}

/* le schede dentro la scheda del cavallo (in alto, sottolineate) */
.tabs{display:flex;gap:var(--sp-4);border-bottom:1px solid var(--bordo);margin:0 0 var(--sp-2);position:sticky;top:60px;background:var(--sfondo);z-index:3}
.tabs button{border:0;background:none;min-height:var(--tocco);padding:0;font-size:var(--fs-corpo);font-weight:800;color:var(--testo-debole);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--testo);border-bottom-color:var(--accento)}
.chi{font-size:var(--fs-sm);color:var(--testo-soft);margin:0 0 var(--sp-3)}
.chi b{color:var(--testo)}

/* la barra in basso: quella dell'app */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:6;display:flex;width:min(100%,var(--largo));background:var(--sfondo-2);
        border-top:1px solid var(--bordo);box-shadow:0 -6px 22px rgba(0,0,0,.35)}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--h-tabbar);
             padding:var(--sp-2) var(--sp-1) calc(var(--sp-2) + env(safe-area-inset-bottom));background:none;border:0;color:var(--testo-soft);font-size:var(--fs-micro);position:relative}
.tabbar .tab.on{color:var(--accento)}
.tabbar .tab .conta{position:absolute;top:5px;left:calc(50% + 7px);background:var(--accento);color:var(--su-accento);font-size:var(--fs-micro);font-weight:700;
                    border-radius:var(--r-pill);padding:0 var(--sp-1);line-height:15px;min-width:15px;text-align:center}
.tabbar .tab.piu{flex:0 0 76px}
.tabbar .tab.piu span{width:52px;height:52px;border-radius:50%;background:var(--accento);color:var(--su-accento);display:grid;place-items:center;margin-top:-22px;
                      box-shadow:0 6px 18px rgba(0,0,0,.45)}
.tabbar .tab.piu svg.ic{stroke-width:2.2}
/* il tasto d'azione: uno solo per schermata */
.fab{position:fixed;z-index:6;right:max(var(--sp-4), calc(50% - var(--largo) / 2 + var(--sp-4)));bottom:calc(var(--h-tabbar) + var(--sp-4) + env(safe-area-inset-bottom));
     height:56px;padding:0 var(--sp-5) 0 var(--sp-4);border-radius:var(--r-pill);border:0;background:var(--accento);color:var(--su-accento);
     display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-corpo);font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.fab svg.ic{stroke-width:2.2}
.senza-barra .fab{bottom:calc(var(--sp-5) + env(safe-area-inset-bottom))}
/* la barra della scelta multipla (prende il posto della barra in basso) */
.barsel{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:7;width:min(100%,var(--largo));background:var(--pannello-2);border-top:1px solid var(--bordo);
        display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));min-height:var(--h-tabbar)}
.barsel .btn{width:auto;min-height:var(--tocco);padding:0 var(--sp-5);font-size:var(--fs-corpo)}
.barsel .q{flex:1;font-size:var(--fs-base);font-weight:700;color:var(--testo-soft)}

/* il foglio dal basso: uno alla volta, con la ✕ */
.velo{position:fixed;inset:0;z-index:20;background:rgba(4,7,16,.62);display:flex;align-items:flex-end;justify-content:center}
.foglio{width:min(100%,var(--largo));background:var(--pannello);border:1px solid var(--bordo);border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;
        padding:var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));max-height:86vh;overflow:auto}
.foglio .ft{display:flex;align-items:center;gap:var(--sp-2);min-height:52px}
.foglio .ft .tx{flex:1;min-width:0}
.foglio .ft .t1{font-size:var(--fs-xl);font-weight:900}
.foglio .ft .t2{font-size:var(--fs-sm);color:var(--testo-debole)}
.foglio .ft .nv{flex:0 0 var(--tocco);width:var(--tocco);height:var(--tocco);display:grid;place-items:center;border:0;background:none;color:var(--testo-soft);margin-right:-10px}
.foglio .riga>svg.ic{color:var(--accento)}

/* il modulo (ridotto: qui si prova la strada, non il modulo) */
.cmp{margin:0 0 var(--sp-4)}
.cmp>label{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--testo-debole);margin-bottom:6px}
.cmp input,.cmp textarea{width:100%;background:var(--pannello-2);color:var(--testo);border:1px solid var(--bordo);border-radius:var(--r-md);padding:12px 13px;font:inherit;font-size:16px;font-weight:700}
.cmp textarea{min-height:120px;font-weight:600;resize:vertical}
.cmp .val{font-size:var(--fs-corpo);font-weight:700}
.scelte{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.scelte button{min-height:var(--tocco);padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid var(--bordo);background:var(--pannello-2);font-size:var(--fs-base);font-weight:800;color:var(--testo-soft)}
.scelte button[aria-pressed=true]{background:var(--accento);border-color:var(--accento);color:var(--su-accento)}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;min-height:52px;border-radius:var(--r-md);border:0;background:var(--accento);color:var(--su-accento);
     font-size:var(--fs-lg);font-weight:800}
.btn.linea{background:none;border:1px solid var(--bordo);color:var(--info)}
.btn:disabled{opacity:.45}

/* il campo di ricerca */
.cerca{display:flex;align-items:center;gap:var(--sp-2);background:var(--pannello-2);border:1px solid var(--bordo);border-radius:var(--r-md);padding:0 var(--sp-3);min-height:52px;color:var(--testo-debole)}
.cerca input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--testo);font:inherit;font-size:16px;font-weight:700}
.cerca input::placeholder{color:var(--testo-debole);font-weight:600}
.cerca.grande{min-height:64px;border-radius:var(--r-lg);border-color:var(--accento)}
.cerca.grande input{font-size:var(--fs-xl)}
.tipo{font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--testo-debole)}

/* le tre tessere di «Registra» */
.tess{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-2)}
.tess button{min-height:112px;border-radius:var(--r-lg);border:1px solid var(--bordo);background:var(--pannello);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
             font-size:var(--fs-lg);font-weight:800}
.tess button svg.ic{width:34px;height:34px;color:var(--accento)}
.tess button.larga{grid-column:1 / -1;min-height:148px;font-size:var(--fs-xl)}
.tess button.larga svg.ic{width:46px;height:46px}
.tess button.rec{border-color:var(--errore);background:color-mix(in srgb, var(--errore) 10%, var(--pannello))}
.tess button.rec svg.ic{color:var(--errore)}
.tess button small{font-size:var(--fs-sm);font-weight:600;color:var(--testo-debole)}

/* la spunta della scelta multipla */
.spunta{flex:0 0 var(--tocco);width:var(--tocco);height:var(--tocco);display:grid;place-items:center;border:0;background:none;padding:0;margin-left:-8px}
.spunta i{width:26px;height:26px;border-radius:50%;border:2px solid var(--testo-debole);display:grid;place-items:center}
.spunta[aria-pressed=true] i{background:var(--accento);border-color:var(--accento);color:var(--su-accento)}
.spunta svg.ic{width:16px;height:16px;stroke-width:3}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--h-tabbar) + 84px);z-index:30;background:var(--pannello-2);border:1px solid var(--ok);color:var(--testo);
       border-radius:var(--r-pill);padding:10px 18px;font-size:var(--fs-base);font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap}

/* ── la pagina di confronto ── */
.imp{display:block;background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);color:inherit;text-decoration:none}
.imp .lt{display:flex;align-items:center;gap:var(--sp-3)}
.imp .l{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-md);background:var(--accento);color:var(--su-accento);display:grid;place-items:center;font-size:var(--fs-xl);font-weight:900}
.imp .n{font-size:var(--fs-xl);font-weight:900;line-height:1.2}
.imp .p{font-size:var(--fs-sm);color:var(--testo-debole)}
.imp dl{margin:var(--sp-3) 0 0;display:grid;grid-template-columns:78px 1fr;gap:6px var(--sp-3);font-size:var(--fs-base)}
.imp dt{font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--testo-debole);padding-top:3px}
.imp dd{margin:0;color:var(--testo-soft)}
.imp .apri{display:flex;align-items:center;justify-content:center;min-height:var(--tocco);margin-top:var(--sp-3);border-radius:var(--r-md);border:1px solid var(--bordo);
           font-size:var(--fs-corpo);font-weight:800;color:var(--info)}
.fonti a{color:var(--info)}
table.fz{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.fz td{padding:7px 0;border-top:1px solid var(--bordo);vertical-align:top}
table.fz td:last-child{text-align:right;color:var(--testo-debole);white-space:nowrap;padding-left:var(--sp-2)}