/* ============================================================================
   vitals.css — tweaks specific to the Vitals module ONLY.
   No fonts/colors/global styles here (core.css owns all tokens).
   Every class is prefixed .vitals-* and uses ONLY palette tokens via var(--…).
   Covers: recovery/strain rings, today KPI tiles, HR/HRV trend foot, the
   body & metabolism editor (inputs, segmented controls, live results, formula),
   BMI scale, calendar-stress event rows + coach, weekly trends, device cards.
   ========================================================================== */

/* who-am-i chip in the view-head actions */
.vitals-who{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:var(--text-muted);
  padding:5px 11px;border:1px solid var(--border);border-radius:20px;background:var(--panel)}

/* severity colour helpers (shared) */
.vitals-ok{color:var(--success)!important}
.vitals-warn{color:var(--warn)!important}
.vitals-bad{color:var(--danger)!important}

/* tiny status dot */
.vitals-dot{width:9px;height:9px;border-radius:50%;background:var(--text-faint);flex:none}
.vitals-dot.ok{background:var(--success);box-shadow:0 0 7px var(--success)}
.vitals-dot.warn{background:var(--warn);box-shadow:0 0 7px var(--warn)}
.vitals-dot.bad{background:var(--danger);box-shadow:0 0 7px var(--danger)}

/* ── 1. RECOVERY / STRAIN RINGS ─────────────────────────────────────────── */
.vitals-rec{display:flex;flex-direction:column}
.vitals-ring{position:relative;display:grid;place-items:center;margin:6px auto 4px;width:200px;height:200px}
.vitals-ring svg{width:200px;height:200px}
.vitals-ring-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.vitals-ring-num{font-family:var(--font-display);font-size:44px;font-weight:600;letter-spacing:-1px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.vitals-ring-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--text-faint);margin-top:5px;text-transform:uppercase}

.vitals-rec-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.vitals-mini{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--border)}
.vitals-mini-k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:1.5px;color:var(--text-faint)}
.vitals-mini-v{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text)}

/* the three stacked KPI tiles */
.vitals-kpicol{gap:var(--gap)}
.vitals-kpi{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.vitals-kpi .kpi-value{margin-top:2px}
.vitals-kspark{width:96px;height:26px;flex:none}

/* ── 2. HR/HRV TREND ────────────────────────────────────────────────────── */
.vitals-leg{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--text-muted)}
.vitals-leg i{width:14px;height:3px;border-radius:2px;display:inline-block}
.vitals-leg.hr i{background:var(--accent1)}
.vitals-leg.hrv i{background:var(--accent3)}
.vitals-trend-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px;margin-top:8px}
.vitals-trend-foot .stat-row{padding:8px 0}

/* ── 3. BODY & METABOLISM EDITOR ────────────────────────────────────────── */
/* the body card is a .span-2 grid item; min-width:0 stops its nowrap formula
   from forcing the whole card past the viewport on narrow screens. */
.vitals-body{min-width:0}

/* min-width:0 lets the fr tracks shrink below their content's min-content size
   (the nowrap formula + segmented controls), preventing a grid blowout that
   otherwise pushes this card wider than the viewport on narrow screens. */
.vitals-body-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;min-width:0}
.vitals-body-grid>*{min-width:0}
@media (max-width:880px){.vitals-body-grid{grid-template-columns:1fr}}

.vitals-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;min-width:0}
.vitals-inputs>*{min-width:0}
.vitals-field{display:flex;flex-direction:column;gap:6px}
.vitals-field--full{grid-column:1/-1}
.vitals-field-k{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:8px}
.vitals-field-k em{font-style:normal;color:var(--accent1);font-weight:600}
.vitals-actmult{font-style:normal;color:var(--accent1);font-weight:600}

.vitals-field-in{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:0 11px;transition:border-color .16s var(--ease)}
.vitals-field-in:focus-within{border-color:var(--border-hi);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 25%,transparent)}
.vitals-field-in input{flex:1;width:100%;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-display);font-size:19px;font-weight:600;padding:9px 0;font-variant-numeric:tabular-nums}
.vitals-field-in input::-webkit-outer-spin-button,.vitals-field-in input::-webkit-inner-spin-button{opacity:.4}
.vitals-field-in em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}

/* segmented sex/activity */
.vitals-seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
.vitals-seg button{flex:1;font-size:12px;font-weight:600;color:var(--text-muted);padding:8px 10px;border-radius:6px;transition:.15s var(--ease)}
.vitals-seg button:hover{color:var(--text)}
.vitals-seg button.active{background:var(--panel-hi);color:var(--accent1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 30%,transparent)}

.vitals-act{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.vitals-act button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--text-muted);transition:.15s var(--ease)}
.vitals-act button:hover{border-color:var(--border-hi);color:var(--text)}
.vitals-act button b{font-size:11px;font-weight:600}
.vitals-act button small{font-family:var(--font-mono);font-size:9px;color:var(--text-faint)}
.vitals-act button.active{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--accent1) 16%,var(--panel-hi)),var(--panel));color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 38%,transparent),0 0 16px var(--weather)}
.vitals-act button.active b{color:var(--accent1)}
.vitals-act button.active small{color:var(--accent1)}
@media (max-width:560px){.vitals-act{grid-template-columns:repeat(2,1fr)}}

/* live results column */
.vitals-results{display:flex;flex-direction:column;gap:10px}
.vitals-result{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px}
.vitals-result--hero{background:linear-gradient(140deg,color-mix(in srgb,var(--accent1) 12%,var(--panel-hi)),var(--panel));border-color:var(--border-hi);box-shadow:0 0 22px var(--weather)}
.vitals-result-k{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:baseline;gap:7px}
.vitals-result-k small{font-size:9px;color:var(--text-faint);letter-spacing:1px}
.vitals-result-v{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.5px;line-height:1.1;margin-top:3px;color:var(--text);font-variant-numeric:tabular-nums}
.vitals-result--hero .vitals-result-v{font-size:36px;color:var(--accent1)}
.vitals-result-u{font-size:11px;color:var(--text-muted);margin-top:2px}

/* formula readout — the code is nowrap, so the row scrolls internally on
   narrow screens (min-width:0 lets it shrink instead of pushing the card). */
.vitals-formula{display:flex;align-items:center;gap:11px;margin-top:14px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--border);overflow-x:auto;min-width:0}
.vitals-formula code{min-width:0}
.vitals-formula-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--text-faint);flex:none}
.vitals-formula code{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);white-space:nowrap}

/* ── BMI sidecard ───────────────────────────────────────────────────────── */
.vitals-bmi{display:flex;flex-direction:column}
.vitals-bmi-big{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:6px 0 2px}
.vitals-bmi-big span{font-family:var(--font-display);font-size:52px;font-weight:600;letter-spacing:-1.5px;color:var(--text);font-variant-numeric:tabular-nums}
.vitals-bmi-big small{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--text-faint)}
.vitals-bmi-cat{text-align:center;font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:14px}

.vitals-bmi-scale{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:18px}
.vitals-bmi-seg{height:34px;border-radius:6px;background:color-mix(in srgb,var(--c) 22%,var(--bg2));border:1px solid color-mix(in srgb,var(--c) 35%,transparent);display:grid;place-items:center}
.vitals-bmi-seg span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:color-mix(in srgb,var(--c) 75%,var(--text))}
.vitals-bmi-marker{position:absolute;top:-6px;width:3px;height:46px;background:var(--text);border-radius:3px;box-shadow:0 0 10px var(--text);transition:left .5s var(--ease);transform:translateX(-50%)}
.vitals-bmi-marker::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--text)}
.vitals-bmi-rows{margin-top:auto}

/* ── 4. CALENDAR STRESS ─────────────────────────────────────────────────── */
.vitals-stress-list{display:flex;flex-direction:column;gap:8px}
.vitals-ev{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--border-hi);transition:border-color .16s var(--ease),transform .16s var(--ease)}
.vitals-ev:hover{transform:translateX(2px);border-color:var(--border-hi)}
.vitals-ev--warn{border-left-color:var(--warn);background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 6%,transparent),var(--bg2))}
.vitals-ev--bad{border-left-color:var(--danger);background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 7%,transparent),var(--bg2))}
.vitals-ev-time{display:flex;flex-direction:column;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text);min-width:46px;line-height:1.25;font-variant-numeric:tabular-nums}
.vitals-ev-time small{font-size:9.5px;color:var(--text-faint);font-weight:400}
.vitals-ev-rail{width:3px;height:30px;border-radius:3px;background:var(--cc);flex:none;box-shadow:0 0 8px var(--cc)}
.vitals-ev-body{flex:1;min-width:0}
.vitals-ev-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitals-ev-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.vitals-rtag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.vitals-rtag.ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 30%,transparent)}
.vitals-ev-score{font-family:var(--font-display);font-size:18px;font-weight:600;min-width:34px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

/* coach card */
.vitals-advice{display:flex;flex-direction:column}
.vitals-advice-ring{display:grid;place-items:center;margin:2px 0 8px}
.vitals-advice-ring .chart{height:132px;width:132px}
.vitals-advice-text{font-size:12.5px;line-height:1.55;color:var(--text-muted);padding:11px 12px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent3);margin-bottom:11px}
.vitals-advice-rows .stat-row{padding:8px 0}

/* ── 6. DEVICES ─────────────────────────────────────────────────────────── */
.vitals-dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.vitals-dev-grid{grid-template-columns:1fr}}
.vitals-dev{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--border);transition:border-color .16s var(--ease),transform .16s var(--ease)}
.vitals-dev:hover{transform:translateY(-1px);border-color:var(--border-hi)}
.vitals-dev--on{border-color:color-mix(in srgb,var(--da) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--da) 9%,var(--bg2)),var(--bg2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--da) 22%,transparent)}
.vitals-dev-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;background:var(--panel);border:1px solid var(--border);flex:none}
.vitals-dev--on .vitals-dev-ico{border-color:color-mix(in srgb,var(--da) 40%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--da) 30%,transparent)}
.vitals-dev-body{flex:1;min-width:0}
.vitals-dev-name{font-size:13px;font-weight:600;color:var(--text)}
.vitals-dev-sub{font-size:11px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitals-dev-btn{flex:none}
.vitals-dev--on .vitals-dev-btn{color:var(--da);border-color:color-mix(in srgb,var(--da) 40%,transparent)}
.vitals-dev-note{font-size:11px;margin-top:13px;line-height:1.5}

/* ── responsive reflow ──────────────────────────────────────────────────── */
@media (max-width:820px){
  .vitals-who{display:none}
  .vitals-trend-foot{grid-template-columns:repeat(2,1fr)}
}