/* biohybrid — foglio di stile.
 *
 * Due vincoli decidono tutto: si legge in palestra (penombra o sole in faccia,
 * mani sudate, di fretta) e si usa con un pollice solo. Da qui: contrasto alto,
 * bersagli mai sotto i 48px, numeri in monospaziato tabellare perche' un
 * registro di allenamento si legge come uno strumento di misura.
 *
 * Il tema segue il sistema. L'ottone e' spento, non oro lucido: sta accanto al
 * ferro senza sembrare un premio. */

:root{
  --nero:#0B0B0D; --ferro:#141418; --ferro-alto:#1D1D23; --bordo:#2A2A32;
  --acc:#D3A83B; --acc-chiaro:#EBCD87; --acc-scuro:#8A6D1C; --su-acc:#17130A;
  --testo:#F0EDE4; --grigio:#8C877C; --grigio-scuro:#5E5A53;
  --verde:#7FA86B; --arancio:#D97B34; --rosso:#D9534F;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Roboto Mono",Menlo,monospace;
}
@media (prefers-color-scheme:light){
  :root{
    --nero:#F5F3EE; --ferro:#FFFFFF; --ferro-alto:#EDEAE2; --bordo:#D5D0C4;
    --acc:#8A6D1C; --acc-chiaro:#A9871F; --acc-scuro:#5E4A11; --su-acc:#FFFFFF;
    --testo:#16161A; --grigio:#635E52; --grigio-scuro:#847F72;
    --verde:#3F7A4E; --arancio:#B45F1E; --rosso:#B3403C;
  }
}
:root[data-tema="scuro"]{
  --nero:#0B0B0D; --ferro:#141418; --ferro-alto:#1D1D23; --bordo:#2A2A32;
  --acc:#D3A83B; --acc-chiaro:#EBCD87; --acc-scuro:#8A6D1C; --su-acc:#17130A;
  --testo:#F0EDE4; --grigio:#8C877C; --grigio-scuro:#5E5A53;
  --verde:#7FA86B; --arancio:#D97B34; --rosso:#D9534F;
}
:root[data-tema="chiaro"]{
  --nero:#F5F3EE; --ferro:#FFFFFF; --ferro-alto:#EDEAE2; --bordo:#D5D0C4;
  --acc:#8A6D1C; --acc-chiaro:#A9871F; --acc-scuro:#5E4A11; --su-acc:#FFFFFF;
  --testo:#16161A; --grigio:#635E52; --grigio-scuro:#847F72;
  --verde:#3F7A4E; --arancio:#B45F1E; --rosso:#B3403C;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;padding:var(--safe-t) 0 calc(72px + var(--safe-b));
  background:var(--nero);color:var(--testo);
  font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
main{padding:10px 18px 24px;max-width:640px;margin:0 auto}

h1{font-size:25px;font-weight:800;letter-spacing:-.025em;margin:8px 0 2px}
h2{font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
   color:var(--acc);margin:26px 0 10px}
p{margin:0 0 10px}
a{color:var(--acc);text-decoration:none}
.sotto{color:var(--grigio);font-size:13px;margin:0 0 18px}
.tenue{color:var(--grigio);font-size:12.5px}
.mini{font-size:11.5px;color:var(--grigio-scuro)}

.card{background:var(--ferro);border:1px solid var(--bordo);border-radius:14px;
      padding:15px;margin-bottom:11px}
.card.acc{border-color:color-mix(in srgb,var(--acc) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 8%,transparent),transparent 64px),var(--ferro)}
.riga{display:flex;justify-content:space-between;align-items:center;gap:10px}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700}
.num-grande{font-size:30px;letter-spacing:-.02em;line-height:1}

.pillola{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:99px;border:1px solid var(--bordo);
  font:600 10.5px/1.6 var(--mono);letter-spacing:.04em;
  color:var(--grigio);background:var(--ferro-alto);white-space:nowrap}
.pillola.on{color:var(--su-acc);background:var(--acc);border-color:var(--acc)}
.pillola.verde{color:var(--verde);border-color:color-mix(in srgb,var(--verde) 42%,transparent)}

button,.bottone{font:inherit;cursor:pointer;border:1px solid var(--bordo);
  background:var(--ferro-alto);color:var(--testo);
  min-height:50px;padding:13px 16px;border-radius:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-acc{background:linear-gradient(180deg,var(--acc-chiaro),var(--acc) 55%,var(--acc-scuro));
  color:var(--su-acc);border-color:var(--acc);font-weight:800}
.largo{width:100%}
button:active,.bottone:active{transform:scale(.985)}
button:disabled{opacity:.4}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}

label{display:block;font:600 9.5px/1.8 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio-scuro);margin-bottom:3px}
input,select{
  width:100%;min-height:50px;padding:12px;border-radius:11px;
  background:var(--nero);border:1px solid var(--bordo);color:var(--testo);
  font-size:17px;font-family:inherit}
/* 17px minimo: sotto i 16 Safari ingrandisce la pagina all'apertura della
   tastiera e poi non la rimpicciolisce piu'. */
input[type="number"]{font-family:var(--mono);font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:none;border-color:var(--acc)}
.campi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.campo{margin-bottom:12px}

#barra{position:fixed;bottom:0;left:0;right:0;display:grid;
  grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--nero) 93%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--bordo);
  padding-bottom:var(--safe-b);z-index:20}
#barra a{padding:12px 4px 14px;text-align:center;font:700 9.5px/1.4 var(--sans);
  color:var(--grigio-scuro);letter-spacing:.03em;position:relative}
#barra a .ico{display:block;font-size:18px;line-height:1.1;margin-bottom:2px}
#barra a.attivo{color:var(--acc)}
#barra a.attivo::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:24px;height:2px;background:var(--acc);
  border-radius:0 0 2px 2px}

.striscia{position:sticky;top:0;z-index:30;padding:9px 16px;font-size:12.5px;
  font-weight:700;text-align:center;background:var(--ferro-alto);
  border-bottom:1px solid var(--bordo);color:var(--acc)}
.nascosta{display:none}

.esercizio{border-left:2px solid var(--bordo);padding-left:12px}
.esercizio.fatto{border-left-color:var(--verde)}
.esercizio.corrente{border-left-color:var(--acc)}
.serie-fatte{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.serie-fatte span{font:600 11.5px/1 var(--mono);padding:7px 9px;border-radius:8px;
  background:var(--ferro-alto);border:1px solid var(--bordo)}
.serie-fatte b{color:var(--acc);margin-right:4px}

#timer{position:fixed;left:0;right:0;bottom:calc(72px + var(--safe-b));
  background:color-mix(in srgb,var(--ferro) 97%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid color-mix(in srgb,var(--acc) 34%,transparent);
  padding:11px 16px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;z-index:15}
#timer .conteggio{font:800 2.1rem/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--acc)}
#timer.pronto .conteggio{color:var(--verde)}
#timer button{min-height:42px;padding:9px 14px;font-size:14px}
body.con-timer{padding-bottom:calc(160px + var(--safe-b))}

.vuoto{text-align:center;color:var(--grigio);padding:40px 20px}
.coach{display:flex;gap:9px;align-items:flex-start;margin-top:11px;
  padding-top:11px;border-top:1px dashed var(--bordo)}
.coach p{margin:0;font-size:12px;color:var(--grigio);font-style:italic}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}