/* ============================================================================
   demo-kit.css — il "kit" visivo condiviso dalle 3 demo di Ghisa.

   Una sola fonte di stile per Cliente (/demo, blu), PT (/demo-pt, giallo) e
   Palestra (/demo-palestre, rosso). Estratto da demo-palestre.html, che era lo
   standard di riferimento. Ogni pagina demo:
     1. include questo file,
     2. imposta il PROPRIO accento ridefinendo --accent & co. in un <style>
        (o inline su :root),
     3. aggiunge solo i suoi contenuti/varianti specifiche.

   Cambiare l'accento ri-tinge l'intera demo: TUTTO ciò che è "colore del brand"
   punta a --accent / --accent-soft / --accent-line / --accent-ink.

   È marketing/online-only → NON entra nella SHELL del service worker.
   ========================================================================== */

:root{
  --iron:#141519; --iron-2:#1B1D23; --iron-3:#23262E; --iron-4:#2B2F39;
  --chalk:#F3EFE8; --chalk-dim:#9AA0AC; --chalk-faint:#7E858F;
  --line:#2A2E38; --line-2:#3A3F4B;
  --yellow:#E9B93E; --red:#D5473B; --blue:#3E82D6; --green:#49A96D;
  --ink:var(--chalk); --bg:var(--iron); --card:var(--iron-2);
  --display:'Barlow Condensed',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Accento di DEFAULT (rosso). Ogni pagina lo ridefinisce col suo colore:
     Cliente = blu, PT = giallo, Palestra = rosso. */
  --accent:#D5473B;
  --accent-soft:rgba(213,71,59,.12);
  --accent-line:rgba(213,71,59,.4);
  --accent-ink:#fff;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;max-width:100vw;overflow-x:clip}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;margin:0}
p{margin:0}
a{color:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;padding:13px 22px;border-radius:7px;
  border:1px solid transparent;cursor:pointer;transition:transform .14s,background .14s,border-color .14s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--accent);color:var(--accent-ink);font-weight:500}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--chalk-dim);background:var(--iron-3)}

/* navbar */
.top{position:sticky;top:0;z-index:40;background:rgba(20,21,25,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.top .brand img{height:34px;display:block}

/* intro / hero */
.intro{padding:36px 0 6px;text-align:center}
.intro .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;transition:color .3s}
.intro h1{font-size:clamp(30px,5vw,46px)}
.intro p{color:var(--chalk-dim);max-width:640px;margin:14px auto 0}

/* ---- personalizzatore brand (usato da PT e Palestra) ---- */
.brander{max-width:760px;margin:26px auto 0;background:var(--iron-2);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px}
.brander .bh{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px;transition:color .3s}
.brander .row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.brander .fld{flex:1;min-width:180px}
.brander label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-dim);display:block;margin-bottom:6px}
.brander input[type=text]{width:100%;background:var(--iron-3);border:1px solid var(--line-2);border-radius:9px;
  color:var(--ink);font-family:var(--display);font-size:20px;font-weight:700;text-transform:uppercase;padding:10px 13px}
.brander input[type=text]:focus{outline:none;border-color:var(--accent)}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s}
.sw:hover{transform:scale(1.12)}
.sw.on{border-color:var(--chalk)}
.logo-up{display:flex;align-items:center;gap:10px}
.logo-btn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--chalk-dim);
  background:var(--iron-3);border:1px dashed var(--line-2);border-radius:9px;padding:10px 14px;cursor:pointer;transition:border-color .14s,color .14s}
.logo-btn:hover{border-color:var(--accent);color:var(--ink)}
.logo-prev{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--line);display:none}
.brander .hint2{font-family:var(--mono);font-size:11px;color:var(--chalk-faint);margin-top:14px;line-height:1.5}

/* ---- tour + switch ruolo ---- */
.tour{max-width:760px;margin:26px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
.tour .nav{display:flex;gap:8px}
.tour .tbtn{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--chalk-dim);
  background:var(--iron-2);border:1px solid var(--line);border-radius:9px;padding:11px 16px;cursor:pointer;transition:.14s}
.tour .tbtn:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
.tour .tbtn:disabled{opacity:.35;cursor:default}
.tour .step-dots{display:flex;gap:7px}
.tour .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);transition:background .2s,transform .2s}
.tour .dot.on{background:var(--accent);transform:scale(1.25)}
.roles{display:flex;justify-content:center;gap:0;margin:18px auto 0;background:var(--iron-2);border:1px solid var(--line);border-radius:14px;padding:5px;max-width:560px}
.role-btn{flex:1;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--chalk-dim);
  background:none;border:none;cursor:pointer;padding:12px 8px;border-radius:10px;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:4px}
.role-btn .rb-sub{font-size:9.5px;letter-spacing:.02em;opacity:.7;text-transform:none}
.role-btn.on{color:var(--accent-ink);background:var(--accent);font-weight:600}

/* ---- switch schermo: Mobile / Desktop ---- */
.screenv{display:flex;justify-content:center;gap:0;margin:20px auto 0;background:var(--iron-2);
  border:1px solid var(--line);border-radius:11px;padding:4px;width:max-content}
.screenv-btn,.env-btn{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--chalk-dim);background:none;border:none;cursor:pointer;padding:8px 15px;border-radius:8px;
  transition:.15s;display:inline-flex;align-items:center;gap:6px}
.env-btn.on{color:var(--accent-ink);background:var(--accent);font-weight:600}
.env-btn svg{width:13px;height:13px}

/* ---- device: desktop (admin/pt) e phone (cliente) ---- */
/* Telefono contenuto: 300px di larghezza e — soprattutto — ALTEZZA LIMITATA con
   scroll interno (come un telefono vero). Senza il tetto d'altezza la scheda intera
   lo allungava a "grattacielo" (1000px+): è ciò che lo faceva sembrare enorme. */
.stage{max-width:560px;margin:20px auto 0}
/* Telefono con proporzioni VERE: stretto (300px) e lungo (schermo ~600px → rapporto
   ~2:1, come un telefono reale, non un tablet tozzo). */
.stage.phone{max-width:300px}
.device{background:var(--iron-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);transition:border-radius .3s}
.device.is-phone{border-radius:36px;border:9px solid #0c0d10;box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 2px #23262e}
.device.is-phone .notch{height:24px;display:flex;align-items:center;justify-content:center;background:#0c0d10}
.device.is-phone .notch::before{content:"";width:84px;height:6px;border-radius:6px;background:#23262e}
/* schermo alto (telefono lungo) col contenuto che scrolla dentro; padding laterale 0
   così la scheda usa TUTTA la larghezza (il respiro lo dà #app). Era il .scr-body a
   16px a stringere le righe kg/rip nelle demo PT/palestre. */
.device.is-phone .scr-body{max-height:600px;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.device.is-phone .scr-body::-webkit-scrollbar{width:4px}
.device.is-phone .scr-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
/* ---- righe-serie (KG/RIP) leggibili nel telefono stretto ----
   In app.css la .setrow è: setno + tgt + 2 input flex + ck. A 300px il problema erano
   i PADDING ANNIDATI (.panel, .ex, .exbody) che sommati lasciavano ~130px alla riga →
   input da 14px, illeggibili (screen 4). Rimedio: compattare quei padding nel telefono
   così la riga arriva a ~230px e i 2 input (kg / rip) prendono ~60px l'uno. */
/* Un filo di respiro laterale attorno alla scheda vera (il .panel del motore ha
   padding laterale 0 di suo, così la scheda usa quasi tutta la larghezza). */
.device.is-phone #app{padding:0 6px}
.device.is-phone .exhead{padding:11px 7px;gap:7px}
.device.is-phone .exbody{padding:0 6px 11px}
.device.is-phone .setrow{gap:4px}
.device.is-phone .setrow .setno{width:13px;font-size:11px}
.device.is-phone .setrow .tgt{width:28px;font-size:10px;padding:4px 1px}
.device.is-phone .setrow input{min-width:0;flex:1;font-size:15px;padding:0 3px;text-align:center}
.device.is-phone .setrow .ck{width:32px;height:32px;font-size:14px}
.device.is-phone .setrow .unit{width:10px;font-size:10px}
.device.is-phone .colhead{padding-left:18px;gap:4px}
/* ---- card assistito (vista Coach/PT) nel device STRETTO ----
   Le card della vista PT vera (.card con nome .m + .badge stato + .act coi 4 pulsanti
   azione) sono nate per un telefono da 375px+. Dentro il device demo (~240-300px di card)
   i 4 bottoni (40px l'uno) + la pill non lasciavano spazio al nome: .m collassava a 0px e
   "MARCO NERI" andava a capo lettera-lettera sopra la pill FERMO (screen utente).
   Rimedio fedele all'app: la card va a capo — nome+pill sulla prima riga (il nome
   prende lo spazio, ellissi solo se lunghissimo), le AZIONI su una riga propria sotto,
   allineate a destra. Nessuna sovrapposizione, tutto resta leggibile e cliccabile.

   ATTENZIONE (bug trovato su iPhone vero): NON basta ancorarlo a .device.is-phone. Sul
   telefono la vista Coach/PT mostra il device in modalità MONITOR (.is-desk), che a schermo
   stretto è largo appena ~325px → le card erano strette uguale ma il fix non le toccava.
   Perciò: la variante .is-phone vale sempre (qui sotto), e la variante .is-desk è aggiunta
   più in basso DENTRO @media(max-width:560px) — cioè solo sui telefoni, dove anche il
   "monitor" è stretto. Su desktop il monitor è largo e resta com'era. */
.device.is-phone #scr .card{flex-wrap:wrap;align-items:center}
.device.is-phone #scr .card .m{flex:1 1 auto;min-width:0}
.device.is-phone #scr .card .m .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device.is-phone #scr .card .badge{order:2}
.device.is-phone #scr .card .act{order:3;flex-basis:100%;justify-content:flex-end;margin-top:8px;gap:6px}
/* ---- header dell'app vera dentro il device: compatto e SENZA sfori ----
   Nel telefono stretto un nome lungo (STUDIO FERRO / PALESTRA OLIMPO) + i controlli
   (i/⚙️/Esci) sforavano a destra (scroll orizzontale, "Esci" tagliato). Regole:
   - l'header non va mai a capo e non sfora (nowrap + overflow hidden)
   - il blocco nome si accorcia con l'ellissi (min-width:0)
   - i controlli restano fissi a destra (flex-shrink:0)
   - la "i" e l'ingranaggio sono CERCHI PERFETTI (width=height, non deformabili)
   - "Esci" compatto. Vale in telefono E monitor (dove il device monta l'app vera). */
#scr header{padding:10px 12px;overflow:hidden}
#scr .brand{flex-wrap:nowrap;gap:8px}
#scr .brand > div:not(.who){min-width:0;flex:1 1 auto}   /* il blocco nome+sub si accorcia */
#scr .brand h1{font-size:17px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr .brand .sub{font-size:8.5px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr .brand .mark{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
#scr .brand .who{gap:5px;flex:0 0 auto;margin-left:6px}
/* la "i" (guida) e l'ingranaggio: cerchi perfetti, mai schiacciati */
#scr .brand .who button.guida-btn{width:24px;height:24px;min-height:0;padding:0;border-radius:50%;
  flex:0 0 auto;font-size:13px;line-height:1}
#scr .brand .who button.imp-btn{width:24px;height:24px;min-height:0;padding:0;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center}
#scr .brand .who button.imp-btn .imp-ico svg{width:18px;height:18px}
/* "Esci": testo compatto, non taglia (o lo si può accorciare) */
#scr .brand .who > button:not(.guida-btn):not(.imp-btn){padding:0 2px;min-height:24px;font-size:10px;
  flex:0 0 auto;white-space:nowrap}
/* fumetto che spiega i pulsanti dell'header della demo (guida/impostazioni/esci).
   È VISIBILE di default (niente transizione opacity 0→1 che, se non parte — es. finestra
   in background —, lo lascerebbe invisibile). L'entrata è un keyframe che comunque
   FINISCE a visibile, quindi robusto. */
.demo-pop{position:absolute;z-index:70;max-width:228px;background:var(--iron-4);color:var(--chalk);
  border:1px solid var(--accent-line);border-radius:10px;padding:10px 12px;font-family:var(--body);
  font-size:12px;line-height:1.5;box-shadow:0 14px 34px -12px rgba(0,0,0,.75)}
/* entrata solo sul transform (l'opacity resta SEMPRE 1): se l'animazione non parte
   — finestra in background — il fumetto è comunque pienamente visibile. */
.demo-pop{animation:popIn .16s ease}
@keyframes popIn{from{transform:translateY(-5px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){ .demo-pop{animation:none} }
/* nav in basso un filo più compatta nel telefono */
.device.is-phone #scr nav{height:54px;border-radius:19px}
.device.is-phone #scr nav button{font-size:10px;border-radius:14px}
.device.is-phone #scr nav button svg{width:20px;height:20px}
/* barra-finestra "desktop": tre pallini, appare solo in modalità desktop del device */
.device .winbar{display:none;align-items:center;gap:7px;padding:9px 14px;background:#0c0d10;border-bottom:1px solid var(--line)}
.device:not(.is-phone) .winbar{display:flex}
.device .winbar i{width:11px;height:11px;border-radius:50%;background:#3A3F4B;display:block}
.device .winbar i:nth-child(1){background:#E36049} .device .winbar i:nth-child(2){background:#E9B93E} .device .winbar i:nth-child(3){background:#49A96D}

/* ---- MONITOR (toggle "Computer" della demo cliente) ----
   Un vero schermo da scrivania: rettangolo ORIZZONTALE (16:10), non un rettangolo
   verticale. Cornice spessa scura + piedistallo sotto. Il contenuto scrolla dentro
   la finestra come su un monitor vero. La classe .is-desk la mette solo il toggle. */
.stage.desk{max-width:920px;margin-bottom:48px}   /* monitor largo e realistico + spazio piedistallo */
.device.is-desk{border-radius:16px;border:12px solid #0c0d10;position:relative;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.9),0 0 0 2px #23262e}
/* il piedistallo del monitor: collo + base */
.device.is-desk::after{content:"";position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);
  width:16px;height:24px;background:#23262e;border-radius:0 0 3px 3px}
.device.is-desk .base{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);
  width:180px;height:9px;background:#23262e;border-radius:5px}
/* dentro il monitor: altezza schermo realistica, il contenuto scrolla; sfondo app largo */
.device.is-desk .scr-body{max-height:560px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.device.is-desk .scr-body::-webkit-scrollbar{width:8px}
.device.is-desk .scr-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.device.is-desk .scr-body::-webkit-scrollbar{width:6px}
.device.is-desk .scr-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.scr-head{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--accent-soft),transparent);transition:background .3s}
.scr-logo{width:36px;height:36px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;color:var(--accent-ink);font-size:18px;flex-shrink:0;overflow:hidden;transition:background .3s}
.scr-logo img{width:100%;height:100%;object-fit:cover}
.scr-brand .n{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;line-height:1}
.scr-brand .s{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim);margin-top:2px}
.scr-role{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:20px;padding:4px 9px;transition:.3s}
.scr-body{padding:16px;min-height:240px}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* pezzi app */
.stats{display:flex;gap:8px;margin-bottom:14px}
.stat{flex:1;background:var(--iron-3);border:1px solid var(--line);border-radius:9px;padding:11px 8px;text-align:center}
.stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--chalk-dim)}
.stat .v{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.1;margin-top:3px}
.stat.accent .v{color:var(--accent);transition:color .3s} .stat.green .v{color:var(--green)} .stat.red .v{color:var(--red)}
.sec-t{font-family:var(--display);font-weight:700;font-size:16px;text-transform:uppercase;margin:14px 0 9px;display:flex;align-items:center;gap:8px}
.sec-t .n{font-family:var(--mono);font-size:11.5px;color:var(--chalk-dim);font-weight:400}
/* la "i" informativa (come nell'app): tocca/passa sopra → spiegazione in un fumetto */
.i-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;border:1px solid var(--accent-line);color:var(--accent);background:var(--accent-soft);
  font-family:var(--display);font-weight:700;font-size:12px;font-style:italic;cursor:pointer;flex:0 0 auto;
  transition:.15s;user-select:none;line-height:1}
.i-tip:hover,.i-tip.open{background:var(--accent);color:var(--accent-ink)}
.i-tip .bub{position:absolute;top:24px;left:50%;transform:translateX(-50%) translateY(-4px);
  width:210px;background:var(--iron-4);border:1px solid var(--accent-line);border-radius:10px;
  padding:10px 12px;font-family:var(--body);font-weight:400;font-style:normal;font-size:12px;line-height:1.5;
  color:var(--chalk);text-transform:none;letter-spacing:0;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:20;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
.i-tip .bub::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:9px;height:9px;background:var(--iron-4);border-left:1px solid var(--accent-line);border-top:1px solid var(--accent-line)}
.i-tip:hover .bub,.i-tip.open .bub{opacity:1;transform:translateX(-50%) translateY(0)}
/* vicino al bordo destro il fumetto rischia di uscire: la variante lo aggancia a destra */
.i-tip.right .bub{left:auto;right:-4px;transform:translateX(0) translateY(-4px)}
.i-tip.right .bub::before{left:auto;right:9px;transform:rotate(45deg)}
.i-tip.right:hover .bub,.i-tip.right.open .bub{transform:translateX(0) translateY(0)}
.back-l{font-family:var(--mono);font-size:11px;color:var(--accent);cursor:pointer;background:none;border:none;padding:0;margin-bottom:8px;transition:color .3s}
.hint{font-size:12.5px;color:var(--chalk-dim);margin:0 0 12px;line-height:1.5}
.card{background:var(--iron-3);border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:9px;display:flex;align-items:center;gap:11px;transition:border-color .14s,transform .14s}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--accent-line);transform:translateX(2px)}
.card .av{width:38px;height:38px;border-radius:10px;background:var(--iron-4);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--chalk-dim);flex-shrink:0}
.card .m{flex:1;min-width:0}
.card .m .t{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;line-height:1}
.card .m .s{font-family:var(--mono);font-size:11px;color:var(--chalk-dim);margin-top:3px}
.card .chev{color:var(--chalk-dim);font-size:18px;flex-shrink:0}
.pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:4px 9px;white-space:nowrap;flex-shrink:0}
.pill.ok{color:var(--green);background:rgba(73,169,109,.12);border:1px solid rgba(73,169,109,.4)}
.pill.warn{color:var(--yellow);background:rgba(233,185,62,.12);border:1px solid rgba(233,185,62,.4)}
.pill.bad{color:var(--red);background:rgba(213,71,59,.12);border:1px solid rgba(213,71,59,.4)}
/* esercizi (cliente) */
.ex{background:var(--iron-3);border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:9px}
.ex .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ex .exn{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;line-height:1}
.ex .presc{font-family:var(--mono);font-size:11px;color:var(--accent);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:8px;padding:3px 8px;white-space:nowrap;transition:.3s}
.ex .sets{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.setbtn{font-family:var(--mono);font-size:12px;color:var(--chalk);background:var(--iron-4);border:1px solid var(--line);
  border-radius:7px;padding:7px 11px;cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:6px}
.setbtn:hover{border-color:var(--accent-line)}
.setbtn.done{color:var(--green);border-color:rgba(73,169,109,.45);background:rgba(73,169,109,.1)}
.ex .last{font-family:var(--mono);font-size:10.5px;color:var(--chalk-dim);margin-top:9px}
/* timer di recupero (cliente) */
.rest{margin-top:6px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:11px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;transition:.3s}
.rest .rt{font-family:var(--display);font-weight:700;font-size:30px;color:var(--accent);line-height:1;transition:color .3s;font-variant-numeric:tabular-nums}
.rest .rl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-dim)}
.rest .rstop{margin-left:auto;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--chalk-dim);background:none;border:1px solid var(--line-2);border-radius:7px;padding:7px 12px;cursor:pointer}
.coach{background:linear-gradient(180deg,var(--accent-soft),transparent);border:1px solid var(--accent-line);border-radius:11px;padding:13px 14px;margin-top:4px;transition:.3s}
.coach .ch{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;transition:color .3s}
.coach .ct{font-size:14px;line-height:1.5}
.explain{font-family:var(--mono);font-size:12.5px;color:var(--chalk-dim);line-height:1.6;max-width:560px;margin:18px auto 0;text-align:center;padding:0 4px}
.explain b{color:var(--chalk)}

/* chiusura (CTA finale) */
.close{text-align:center;padding:52px 0 70px}
.close h2{font-size:clamp(26px,4.5vw,40px)}
.close p{color:var(--chalk-dim);max-width:540px;margin:12px auto 0}
.close .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ponte tra le demo (la "catena" palestra → PT → cliente) */
.chain{max-width:760px;margin:30px auto 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.chain a{flex:1;min-width:210px;background:var(--iron-2);border:1px solid var(--line);border-radius:13px;
  padding:15px 16px;text-decoration:none;transition:border-color .14s,transform .14s;display:block}
.chain a:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.chain .cl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim);margin-bottom:5px}
.chain .ct{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;line-height:1.05}
.chain .cd{font-size:12.5px;color:var(--chalk-dim);margin-top:5px;line-height:1.45}
.chain .cgo{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:9px;transition:color .3s}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--iron-4);
  border:1px solid var(--accent-line);color:var(--ink);font-family:var(--mono);font-size:13px;padding:11px 18px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:560px){
  .role-btn .rb-sub{display:none}
  .brander .row{flex-direction:column;align-items:stretch}
  .tour{flex-direction:column;gap:12px}

  /* ---- SUI TELEFONI, anche il device in modalità MONITOR (.is-desk) è stretto ----
     La vista Coach/PT forza la modalità monitor (setSchermo('desk')), ma su un telefono
     quel "monitor" è largo appena ~325px: le stesse strettoie del telefono (nome che va a
     capo sulle card, righe kg/rip minuscole, padding che mangia spazio). Qui riapplico al
     device .is-desk gli stessi override che il telefono (.is-phone) ha già. Vale SOLO
     dentro questa media query: sul desktop il monitor resta largo e intatto. */
  .device.is-desk #scr .card{flex-wrap:wrap;align-items:center}
  .device.is-desk #scr .card .m{flex:1 1 auto;min-width:0}
  .device.is-desk #scr .card .m .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .device.is-desk #scr .card .badge{order:2}
  .device.is-desk #scr .card .act{order:3;flex-basis:100%;justify-content:flex-end;margin-top:8px;gap:6px}
  /* righe-serie kg/rip leggibili anche nel monitor stretto */
  .device.is-desk #app{padding:0 6px}
  .device.is-desk .exhead{padding:11px 7px;gap:7px}
  .device.is-desk .exbody{padding:0 6px 11px}
  .device.is-desk .setrow{gap:4px}
  .device.is-desk .setrow .setno{width:13px;font-size:11px}
  .device.is-desk .setrow .tgt{width:28px;font-size:10px;padding:4px 1px}
  .device.is-desk .setrow input{min-width:0;flex:1;font-size:15px;padding:0 3px;text-align:center}
  .device.is-desk .setrow .ck{width:32px;height:32px;font-size:14px}
  .device.is-desk .setrow .unit{width:10px;font-size:10px}
  .device.is-desk .colhead{padding-left:18px;gap:4px}
}
/* ---- entrata "wow" della vista dentro il device ----
   Quando la vista cliente (o una vista dell'app) si monta in #scr, header, scheda
   e nav entrano in cascata con un fade+slide morbido. Elegante, non chiassoso. */
#scr header{animation:scrIn .4s cubic-bezier(.2,.7,.3,1) both}
#scr #app,#scr #demoScheda{animation:scrIn .45s cubic-bezier(.2,.7,.3,1) .06s both}
#scr nav{animation:scrIn .45s cubic-bezier(.2,.7,.3,1) .12s both}
@keyframes scrIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* il device stesso "respira" quando cambi schermo (telefono↔monitor) */
.device{transition:box-shadow .3s ease}
.device.is-desk{animation:deskPop .4s cubic-bezier(.34,1.3,.5,1) both}
@keyframes deskPop{from{opacity:.4;transform:scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .view,.btn,.card,.chain a,#scr header,#scr #app,#scr #demoScheda,#scr nav,.device.is-desk{animation:none!important;transition:none!important}
}