/* ── CARDIO NELL'ALLENAMENTO ──────────────────────────────────
   Il cronometro con l'anello, i tre modi, le fasi e i dati
   facoltativi. Stesso anello del recupero (recupero.css), più
   grande; i colori dalle variabili tp- di pagine.css.          */

.cd-modi{display:flex;gap:6px;margin-top:14px}
.cd-modi button{flex:1;padding:10px 0;border-radius:12px;font:700 13px var(--sans);background:var(--tp-surface);
  border:1px solid var(--tp-line);color:var(--tp-muted)}
.cd-modi button.on{background:var(--tp-soft);border-color:transparent;color:var(--tp-ink)}

.cd-card{margin-top:14px;padding:18px}
.cd-anello{position:relative;width:min(240px,64vw);aspect-ratio:1;margin:0 auto}
.cd-anello svg{width:100%;height:100%;display:block;overflow:visible}
.cd-anello .trk{fill:none;stroke:var(--tp-soft);stroke-width:18}
.cd-anello .arc{fill:none;stroke:var(--tp-accent);stroke-width:18;stroke-linecap:round;transition:stroke-dashoffset .5s linear}
.cd-anello .knob{fill:#fff;stroke:var(--tp-accent);stroke-width:5}
:root:not(.light) .cd-anello .knob{fill:var(--s1)}
.cd-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.cd-num{font:850 46px/1 var(--sans);letter-spacing:-1.5px;color:var(--t1);font-variant-numeric:tabular-nums}
.cd-di{font-size:13px;color:var(--tp-muted);margin-top:6px}
.cd-st{font:800 11.5px var(--sans);color:var(--tp-ink);margin-top:9px;letter-spacing:.4px;text-transform:uppercase}

.cd-obi{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;font-size:14px;color:var(--tp-muted)}
.cd-obi b{color:var(--t1);font-weight:800}
.cd-tasti{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-top:16px}
.cd-tasti .tp-btn{min-height:54px;font-size:16px;width:auto}
.cd-tasti .tp-btn:only-child{grid-column:1 / -1}
.cd-confasi{display:block;margin:12px auto 0;color:var(--tp-ink)}

.cd-fasi{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.cd-fasi div{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--bg);font-size:14px;color:var(--t1)}
.cd-fasi b{flex:1;font-weight:700}
.cd-fasi span:last-child{font-variant-numeric:tabular-nums;color:var(--tp-muted);font-size:13px}
.cd-fasi .fatto{background:var(--tp-soft)}
.cd-fasi .ora{background:var(--tp-surface);box-shadow:0 0 0 2px var(--tp-accent) inset}
.cd-fasi .ok{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font:900 12px var(--sans)}
.cd-fasi .fatto .ok{background:var(--tp-accent);color:#192139}
.cd-fasi .ora .ok{background:var(--tp-accent);color:#fff}
.cd-fasi .poi .ok{border:2px solid var(--tp-line)}

.cd-dati{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cd-dati label{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg);border-radius:14px;padding:8px 6px 9px}
.cd-dati .in{height:40px;text-align:center;font-size:20px;font-weight:800;background:transparent;border:0}
.cd-dati span{font-size:12px;color:var(--tp-muted)}
.cd-kcal{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;color:var(--tp-muted)}
.cd-kcal b{color:var(--t1)}