/* ── RECUPERO, FRECCE E BOLLINI DELL'ALLENAMENTO ──────────────
   La tavoletta del recupero che si apre in una ghiera, le frecce
   tonde per cambiare esercizio e i bollini dei gruppi muscolari
   nelle linguette. I colori passano dalle variabili tp- di
   pagine.css: Corallo in chiaro, l'arancio di sempre in scuro.  */

/* Niente zoom: né doppio tocco né pizzico (il resto in index.html),
   e campi a 16 px perché iOS non ingrandisca quando ci entri. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea{font-size:16px}

/* ── tavoletta chiusa ───────────────────────────────────────── */
#restbar .rb-mini{width:100%;display:flex;align-items:center;gap:12px;background:none;text-align:left;
  max-width:460px;margin:0 auto;padding:10px calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  color:inherit;cursor:pointer}
#restbar .rb-mini .rb-t{min-width:74px;font-size:26px;font-weight:700;color:var(--tp-ink);font-variant-numeric:tabular-nums}
#restbar .rb-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
#restbar .rb-name{font-size:12.5px;color:var(--rest-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#restbar .rb-mid .bar{background:var(--b-strong)}
#restbar .rb-more{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--tp-surface);color:var(--tp-ink);box-shadow:var(--tp-shadow)}

/* ── aperta: velo e ghiera ──────────────────────────────────── */
#restbar.open{inset:0;left:0!important;right:0!important;bottom:0!important;top:0;max-width:none!important;margin:0!important;
  background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;z-index:70;animation:none}
#restbar.open>.rb-veil{position:absolute;inset:0;background:rgba(25,33,57,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:rbFade .18s ease}
:root:not(.light) #restbar.open>.rb-veil{background:rgba(0,0,0,.55)}
#restbar.open>.rb-sheet{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:436px;margin:0 auto;
  background:var(--tp-surface);border-radius:28px;padding:18px;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  box-shadow:0 18px 50px -18px rgba(25,33,57,.35);animation:rbSu .24s cubic-bezier(.2,.8,.2,1)}
:root:not(.light) #restbar.open>.rb-sheet{border:1px solid var(--b-strong)}
@keyframes rbSu{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes rbFade{from{opacity:0}to{opacity:1}}
#restbar .rb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#restbar .rb-h{font:800 23px/1.2 var(--sans);letter-spacing:-.6px;color:var(--t1)}
#restbar .rb-sub{font-size:14px;color:var(--tp-muted);margin-top:2px}
#restbar .rb-x{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--tp-soft);color:var(--tp-ink);flex:none}

#restbar .rb-dial{position:relative;width:min(260px,72vw);aspect-ratio:1;margin:4px auto 6px;touch-action:none;cursor:grab;
  -webkit-user-select:none;user-select:none}
#restbar .rb-dial.drag{cursor:grabbing}
#restbar .rb-dial svg{width:100%;height:100%;display:block;overflow:visible}
#restbar .rb-dial .trk{fill:none;stroke:var(--tp-soft);stroke-width:18}
#restbar .rb-dial .arc{fill:none;stroke:var(--tp-accent);stroke-width:18;stroke-linecap:round;transition:stroke-dashoffset .35s ease}
#restbar .rb-dial.drag .arc{transition:none}
#restbar .rb-dial .tk{stroke:var(--b-med);stroke-width:2;stroke-linecap:round}
#restbar .rb-dial .tk.big{stroke:var(--tp-muted);stroke-width:2.6;opacity:.55}
#restbar .rb-dial .knob{fill:#fff;stroke:var(--tp-accent);stroke-width:5;filter:drop-shadow(0 4px 8px rgba(185,37,59,.28))}
#restbar .rb-dial.drag .knob{stroke-width:7}
#restbar .rb-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
#restbar .rb-c .rb-t{font-size:46px;font-weight:800;letter-spacing:-1.5px;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums}
#restbar .rb-of{font-size:12.5px;color:var(--tp-muted);margin-top:6px}
#restbar .rb-hint{font-size:11.5px;color:var(--tp-ink);margin-top:10px;font-weight:600;letter-spacing:.2px}
#restbar .rb-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#restbar .rb-row .tp-btn{font-size:16px;min-height:52px}

/* ── frecce tra gli esercizi: tonde, piene, sfumate ─────────── */
#exnav .nv{width:62px;height:62px;color:var(--tp-ink);border:0;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),rgba(28,31,42,.82);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.light #exnav .nv{
  background:radial-gradient(circle at 35% 25%,#fff 0,#fff 38%,rgba(255,240,237,.92) 100%);
  box-shadow:0 12px 26px -10px rgba(255,98,106,.45),0 2px 6px rgba(94,55,45,.06),inset 0 -3px 8px rgba(255,98,106,.10)}
#exnav .cnt{font:800 14px var(--sans);padding:10px 16px;border:0;color:var(--tp-ink);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.light #exnav .cnt{background:rgba(255,255,255,.9);box-shadow:0 10px 22px -12px rgba(255,98,106,.45)}

/* ── bollini delle linguette ────────────────────────────────── */
.exdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px;flex:none}
/* Sulla linguetta scelta il bollino prende un anello bianco:
   si stacca dal fondo qualunque sia il colore. */
.chip.on .exdot{box-shadow:0 0 0 2.5px #fff}

/* ── la linguetta ───────────────────────────────────────────────
   La barretta come quella in fondo all'iPhone: tirata su apre il
   recupero, tirata giù lo richiude (restLinguetta in index.html).
   touch-action:none perché il dito che la tira non faccia scorrere
   la pagina sotto. */
#restbar .rb-grab{display:block;width:38px;height:5px;border-radius:3px;background:var(--tp-muted);opacity:.4}
#restbar .rb-mini{position:relative;padding-top:16px;touch-action:none}
#restbar .rb-mini .rb-grab{position:absolute;top:6px;left:50%;transform:translateX(-50%)}
#restbar .rb-top{touch-action:none;cursor:grab;margin:-12px -18px 0;padding:8px 18px 0}
#restbar .rb-top .rb-grab{margin:0 auto 12px}