/* ── Fonts (Barlow Condensed + Barlow — "Sports/Fitness" pairing) ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Verdikt design system v2.0 — "Data-Dense Dashboard" (Running & Cycling
     GPS palette, ui-ux-pro-max) — light (default) ─────────────────────────── */
  --ink:        #0F172A;
  --paper:      #F8FAFC;

  --bg:        #F8FAFC;   /* slate-50 */
  --surface:   #FFFFFF;
  --surface2:  #F1F5F9;   /* slate-100 */
  --border:    rgba(15,23,42,.12);
  --accent:    #C2410C;   /* primary — energetic orange, darkened from the
                             source #EA580C to clear WCAG AA (4.5:1) as both
                             text-on-light and white-text-on-fill */
  --accent2:   #059669;   /* accent — pace green */
  --text:      #0F172A;
  --muted:     #64748B;   /* slate-500 */
  --muted2:    #475569;   /* slate-600 */
  --radius:    10px;
  --shadow:    0 2px 12px rgba(15,23,42,.08);

  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body:    Barlow, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Status colors — dedicated, independent of brand (--accent/--accent2).
     Every "good/neutral/bad" indicator in the app (verdict badge, recovery
     quality, race readiness, split quality, stat deltas) shares this
     three-tier signal; it no longer aliases the brand colors, so "this is
     the brand" and "this is a signal" are separate concerns. Light-mode
     values are darkened from the design doc's dark-only source palette to
     clear WCAG AA (4.5:1) against a white/near-white surface — the same
     light/dark adjustment the v1.0 palette made for --accent/--slate. */
  --green:  #047857;   /* good / positive — emerald-700 */
  --yellow: #475569;   /* neutral / caution — slate-600 */
  --red:    #B91C1C;   /* poor / negative — red-700 */
  --blue:   #1D4ED8;   /* informational emphasis, not a good/bad signal */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0F172A;
    --surface:   #192134;
    --surface2:  #111827;
    --border:    rgba(248,250,252,.14);
    --text:      #F1F5F9;
    --muted:     #94A3B8;
    --muted2:    #94A3B8;
    --shadow:    0 2px 12px rgba(0,0,0,.4);

    /* Lighter variants of the same status/brand hues — dark backgrounds
       need lighter foregrounds to hit the same 4.5:1 AA contrast target. */
    --accent: #EA580C;
    --green:  #10B981;
    --yellow: #94A3B8;
    --red:    #F87171;
    --blue:   #60A5FA;
  }
}

/* Fixed (non-theme-swapping) status colors for the one surface that never
   inverts with the theme — .home-verdict-card is always an ink card, so its
   badge text always needs the dark-surface-safe status colors regardless of
   which theme is active. */
:root {
  --status-good-on-dark:    #10B981;
  --status-neutral-on-dark: #94A3B8;
  --status-bad-on-dark:     #F87171;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

header h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.connections {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.account-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.account-indicator-name { white-space: nowrap; }
.account-indicator-switch {
  color: var(--accent);
  white-space: nowrap;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.badge.connected    { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.badge.disconnected { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); }

.verdict-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  margin-left: 10px;
}
/* Verdict states — green=Push, yellow=Hold, red & rest=Ease (a hard stop and
   a rest day are both "ease" to the athlete). Dedicated status colors, not
   brand aliases. */
.verdict-badge.green  { background: color-mix(in srgb, var(--green) 18%, transparent);  color: var(--green);  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.verdict-badge.yellow { background: color-mix(in srgb, var(--yellow) 20%, transparent); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); }
.verdict-badge.red    { background: color-mix(in srgb, var(--red) 20%, transparent);    color: var(--red);    border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }
.verdict-badge.rest   { background: color-mix(in srgb, var(--red) 20%, transparent);    color: var(--red);    border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }

/* Home screen coach verdict — the first thing an athlete should see.
   Always an ink card on the paper page, regardless of light/dark theme —
   this is the one surface in the product that doesn't invert. */
.home-verdict-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}
.home-verdict-card .verdict-badge {
  margin-left: 0;
  font-size: 15px;
  padding: 7px 16px;
}
.home-verdict-card .verdict-badge.green  { background: color-mix(in srgb, var(--status-good-on-dark) 22%, transparent);    color: var(--status-good-on-dark);    border-color: color-mix(in srgb, var(--status-good-on-dark) 45%, transparent); }
.home-verdict-card .verdict-badge.yellow { background: color-mix(in srgb, var(--status-neutral-on-dark) 28%, transparent); color: var(--status-neutral-on-dark); border-color: color-mix(in srgb, var(--status-neutral-on-dark) 50%, transparent); }
.home-verdict-card .verdict-badge.red,
.home-verdict-card .verdict-badge.rest   { background: color-mix(in srgb, var(--status-bad-on-dark) 22%, transparent);     color: var(--status-bad-on-dark);     border-color: color-mix(in srgb, var(--status-bad-on-dark) 45%, transparent); }
.home-verdict-reason {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper);
}
/* Training DNA's one-line explainer under the verdict reason -- always
   quieter than .home-verdict-reason (smaller, dimmer, no weight), so it
   reads as supporting context, never a second reason competing with the
   verdict itself. */
.home-verdict-dna-note {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(248,250,252,.62);
}
.home-verdict-dna-note.hidden { display: none; }

/* "Why" links row (B8) — hands off from Home's verdict to the Job 2
   (Evidence & Explanation) tabs that back it up. */
.home-verdict-why-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.home-verdict-why-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(248,250,252,.55);
}
.home-verdict-why-link {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(248,250,252,.25);
  background: transparent;
  color: rgba(248,250,252,.85);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.home-verdict-why-link:hover {
  border-color: rgba(248,250,252,.5);
  background: rgba(248,250,252,.08);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn, .btn-sm {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface2);
  transition: background .15s, border-color .15s;
}
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn.primary, .btn-sm.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:hover, .btn-sm:hover { background: var(--surface2); border-color: var(--accent); }
.btn.primary:hover, .btn-sm.primary:hover { background: color-mix(in srgb, var(--accent) 82%, black); }

button.range-btn, button.act-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  transition: all .15s;
}
button.range-btn.active, button.act-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.range-btn:hover, button.act-btn:hover { border-color: var(--accent); color: var(--text); }

/* ── Layout ────────────────────────────────────────────────────────────────── */
main {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Auth pages (login / claim / reset / forgot-password) ────────────────────── */
/* D2 (Sprint 3) -- always an ink page, same "doesn't invert with the
   theme" treatment as .home-verdict-card, so the login screen carries
   brand warmth instead of the bare light/dark-neutral card it used to
   be. A soft accent glow behind the wordmark keeps it from reading as
   just "a dark page." */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 20px;
  background:
    radial-gradient(ellipse 480px 320px at 50% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    var(--ink);
}
.auth-hero { text-align: center; }
.auth-wordmark {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--paper);
  margin: 0;
}
.auth-tagline {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(248,250,252,.62);
}
.auth-card { width: 100%; max-width: 360px; }
.auth-title { font-size: 20px; margin: 0 0 16px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.auth-form input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form button { margin-top: 4px; }
.auth-error { color: var(--red); font-size: 13px; margin-bottom: 12px; }
.auth-success { color: var(--green); font-size: 13px; margin-bottom: 12px; }
.auth-links { margin-top: 14px; font-size: 13px; }
.auth-links a { color: var(--accent); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.card.hidden { display: none; }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.card-header h2 { font-size: 15px; font-weight: 700; }
.range-btns { display: flex; gap: 6px; }

/* ── Athlete card ──────────────────────────────────────────────────────────── */
.athlete-inner { display: flex; align-items: center; gap: 14px; }
#athlete-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.athlete-inner h2 { font-size: 18px; }

/* ── Stats grid ────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  line-height: 1.1;
}
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Metric info tooltips (Post-Roadmap Backlog: Training Concepts &
   Metrics Education) -- a small dismissible "what is this" affordance
   reused everywhere a dashboard metric needs plain-language framing,
   not a new pattern per metric. Click-to-toggle rather than
   hover-only, since this is a touch-first PWA. ─────────────────────── */
.metric-label-row { display: flex; align-items: center; gap: 5px; }
.info-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.info-btn:hover, .info-btn:focus-visible { color: var(--accent); }
.info-tip {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
  line-height: 1.4;
  text-align: left;
}
.info-tip.hidden { display: none; }

/* Color accents for TSB */
.stat-card.positive .stat-value { color: var(--green); }
.stat-card.negative .stat-value { color: var(--red); }

/* ── Activities list ───────────────────────────────────────────────────────── */
.activities-list { display: flex; flex-direction: column; gap: 10px; }

.activity-card {
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 12px 14px;
  transition: border-color .15s;
}
.activity-card:hover { border-color: var(--accent); }

.ac-top { display: flex; align-items: flex-start; gap: 10px; }
.ac-icon { font-size: 18px; line-height: 1.4; }
.ac-titleblock { flex: 1; min-width: 0; }
.ac-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-date { font-size: 12px; color: var(--muted); margin-top: 1px; }
.ac-hero { font-weight: 700; font-size: 15px; white-space: nowrap; }

.ac-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ac-substats { display: flex; gap: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.ac-hr  { color: var(--red); }
.ac-tss { color: var(--yellow); }
.ac-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── RPE capture ───────────────────────────────────────────────────────────── */
.rpe-toggle {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.rpe-toggle:hover { border-color: var(--accent); color: var(--text); }
.rpe-toggle.rpe-logged { color: var(--accent); border-color: var(--accent); font-weight: 600; }

.rpe-form {
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rpe-scale { display: flex; gap: 4px; flex-wrap: wrap; }
.rpe-num {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}
.rpe-num:hover { border-color: var(--accent); }
.rpe-num.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.rpe-note {
  flex: 1;
  min-width: 140px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}
.rpe-actions { display: flex; gap: 6px; }
.rpe-save, .rpe-cancel {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
}
.rpe-save { background: var(--accent); border-color: var(--accent); color: #fff; }
.rpe-cancel { background: var(--surface2); color: var(--muted); }

/* Activity picker — shown from the bottom-nav Log button when more than
   one un-logged activity exists, reuses .session-modal-overlay */
.activity-pick-list { display: flex; flex-direction: column; gap: 8px; }
.activity-pick-row {
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.activity-pick-row:hover { border-color: var(--accent); }

/* RPE bottom sheet — reuses .session-modal-overlay, larger touch targets */
.rpe-sheet .rpe-scale-lg { margin-bottom: 12px; }
.rpe-num-lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: 700;
}
.rpe-sheet .rpe-note { width: 100%; margin-bottom: 14px; padding: 10px 12px; font-size: 14px; }
.rpe-sheet .rpe-actions .btn { width: 100%; text-align: center; padding: 10px; }

/* ── AI Post-Workout Debrief ───────────────────────────────────────────────── */
.debrief-toggle {
  background: transparent;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.debrief-toggle-muted { opacity: 0.35; }

.debrief-panel {
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.debrief-text { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }

/* Full-screen debrief reading view — reuses .session-modal-overlay */
.debrief-modal { max-width: 480px; }
.debrief-text-lg { font-size: 16px; line-height: 1.65; margin-bottom: 16px; }
.debrief-modal .debrief-tags { margin-bottom: 16px; }
.debrief-modal .btn { width: 100%; text-align: center; padding: 10px; }
.debrief-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.debrief-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}

/* ── Weekly Debrief summary ───────────────────────────────────────────────── */
.weekly-summary-body { display: flex; flex-direction: column; gap: 8px; }
.weekly-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.weekly-summary-icon { flex-shrink: 0; }
.weekly-summary-row.good { color: var(--green); }
.weekly-summary-row.risk { color: var(--red); }

/* ── Utility ───────────────────────────────────────────────────────────────── */
.muted      { color: var(--muted); }
.center-text { text-align: center; padding: 16px 0; }
.hint       { font-size: 12px; color: var(--muted); font-style: italic; }
code        { background: var(--surface2); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  margin-bottom: 4px;
}
/* Job groups (B6) — Today's Coaching / Evidence & Explanation /
   Planning & Configuration. A thin divider marks the job boundary
   without a heavier visual break than the tab strip itself. */
.tab-nav-group { display: flex; gap: 6px; }
.tab-nav-divider {
  align-self: stretch;
  width: 1px;
  margin: 6px 2px 1px;
  background: var(--border);
}
.tab-btn {
  padding: 8px 18px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--muted);
  background: transparent;
  transition: all .15s;
  position: relative;
  bottom: -1px;
}
.tab-btn.active {
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
  color: var(--text);
}
.tab-btn:hover { color: var(--text); }

.tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* ── Nav icons — brand stroke icons, replacing emoji ─────────────────────── */
.tab-icon { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
.tab-icon svg { width: 15px; height: 15px; display: block; }
.bn-icon svg { width: 20px; height: 20px; display: block; }
.tab-dot.hidden { display: none; }

.tab-content { display: none; flex-direction: column; gap: 20px; }
.tab-content.active { display: flex; }

/* ── Bottom navigation (mobile only — shown via the 600px media query) ──────── */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  align-items: center;
  justify-content: space-around;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 4px 2px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  position: static;
  bottom: auto;
}
.bn-btn.active { color: var(--accent); }
.bn-icon { font-size: 19px; line-height: 1; position: relative; }
.bn-label { font-size: 10px; font-weight: 600; white-space: nowrap; }
.bn-btn .tab-dot { position: absolute; top: -2px; right: -6px; margin: 0; }

/* ── More sheet (bottom-nav overflow) — reuses .session-modal-overlay ───────── */
.more-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.more-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.more-sheet-item:hover { background: var(--surface2); }
.more-sheet-icon { font-size: 17px; }

/* ── Onboarding checklist (D1) — reuses .session-modal-overlay ─────────────── */
.onboarding-checklist { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 16px; }
.onboarding-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.onboarding-checklist-item:hover { background: var(--surface2); }
.onboarding-checklist-icon { font-size: 17px; }
.onboarding-modal .onboarding-done-btn { width: 100%; }

/* ── Plan banner ───────────────────────────────────────────────────────────── */
.plan-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.plan-race-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.plan-race-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
}
.sep { color: var(--border); }
.plan-target { color: var(--accent); font-weight: 600; }

.plan-countdown { text-align: center; }
.countdown-value {
  font-size: 40px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -2px;
  line-height: 1;
}
.countdown-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

.adaptation-bar {
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.adaptation-bar.down {
  background: rgba(255,92,92,.12);
  border: 1px solid rgba(255,92,92,.3);
  color: var(--red);
}
.adaptation-bar.up {
  background: rgba(62,207,142,.12);
  border: 1px solid rgba(62,207,142,.3);
  color: var(--green);
}
.adaptation-bar.hidden { display: none; }

.adaptation-log-summary {
  margin-top: 8px;
  font-size: 12px;
}
.adaptation-log-summary.hidden { display: none; }

/* ── Week navigation ───────────────────────────────────────────────────────── */
.week-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.week-label {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  text-align: center;
}

/* ── Weekly grid ───────────────────────────────────────────────────────────── */
.plan-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.plan-day {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color .15s;
}
.plan-day.today {
  border-color: var(--accent);
  background: rgba(252,76,2,.06);
}
.plan-day.past { opacity: 0.45; }
.plan-day.rest-day { opacity: 0.3; }

.plan-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plan-day-name  { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.plan-day-date  { font-size: 11px; color: var(--muted); }

.plan-day-icon  { font-size: 20px; margin: 4px 0; }
.plan-day-label { font-size: 12px; font-weight: 700; line-height: 1.3; }
.plan-day-dist  { font-size: 12px; color: var(--blue); font-weight: 600; }
.plan-day-pace  { font-size: 11px; color: var(--muted); }
.plan-day-reps  { font-size: 11px; color: var(--yellow); font-weight: 600; }
.plan-day-adapt { font-size: 10px; color: var(--red); font-style: italic; margin-top: 2px; }
.plan-day-adapt.up { color: var(--green); }

.plan-day-optional {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: auto;
}

.week-total-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.week-total-val { font-weight: 700; font-size: 16px; color: var(--blue); }

/* ── Plan overview list ────────────────────────────────────────────────────── */
.plan-overview-list { display: flex; flex-direction: column; gap: 8px; }

.plan-overview-row {
  display: grid;
  grid-template-columns: 80px 1fr repeat(4, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
}
.plan-overview-row.current-week { border-color: var(--accent); }
.ov-week  { font-weight: 700; }
.ov-icons { display: flex; gap: 4px; font-size: 16px; min-width: 0; overflow: hidden; flex-wrap: wrap; }
.ov-km    { color: var(--blue); font-weight: 600; white-space: nowrap; }
.ov-phase { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 800px) {
  .plan-week-grid { grid-template-columns: repeat(4, 1fr); }
  .plan-overview-row { grid-template-columns: 70px 1fr auto; }
  .ov-phase { display: none; }
}
@media (max-width: 500px) {
  .plan-week-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Session detail (Runna-style) ──────────────────────────────────────────── */
.plan-day-summary {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
  display: none;  /* shown in detail view */
}

.plan-day-segments { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }

.seg {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1.4;
}
.seg.warmup   { background: color-mix(in srgb, var(--blue) 10%, transparent);  color: var(--blue);  border-left: 2px solid var(--blue); }
.seg.main     { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text);  border-left: 2px solid var(--accent); }
.seg.rest     { background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--muted); border-left: 2px solid var(--muted); }
.seg.cooldown { background: color-mix(in srgb, var(--green) 8%, transparent);  color: var(--green); border-left: 2px solid var(--green); }
.seg.note     { background: transparent; color: var(--muted); font-style: italic; border-left: none; padding-left: 0; }

.seg-pace { font-weight: 600; color: var(--accent); margin-left: 4px; }

/* Session modal / expanded day */
.session-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.session-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.session-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.session-modal-title { font-size: 18px; font-weight: 800; }
.session-modal-meta  { font-size: 13px; color: var(--muted); margin-top: 2px; }
.modal-close {
  background: none; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; padding: 0; line-height: 1;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); }
.session-modal-summary {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.session-modal-segments { display: flex; flex-direction: column; gap: 6px; }
.modal-seg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.modal-seg .seg-label { font-weight: 600; }
.modal-seg .seg-pace  { color: var(--accent); font-size: 12px; margin-top: 1px; }
.modal-seg.warmup   { background: color-mix(in srgb, var(--blue) 10%, transparent);   border-left: 3px solid var(--blue); }
.modal-seg.main     { background: color-mix(in srgb, var(--accent) 8%, transparent);  border-left: 3px solid var(--accent); }
.modal-seg.rest     { background: color-mix(in srgb, var(--muted) 10%, transparent);  border-left: 3px solid var(--muted); }
.modal-seg.cooldown { background: color-mix(in srgb, var(--green) 8%, transparent);   border-left: 3px solid var(--green); }
.modal-seg.note     { background: var(--surface2); border-left: 3px solid var(--border); color: var(--muted); font-style: italic; }

.plan-day { cursor: pointer; }
.plan-day:hover { border-color: var(--accent); }

/* ── Settings form ─────────────────────────────────────────────────────────── */
.settings-form { display: flex; flex-direction: column; gap: 24px; }

.settings-group h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.settings-row label { font-size: 13px; }
.settings-row .hint { color: var(--muted); font-size: 11px; }

.input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-wrap input[type="number"],
.input-wrap input[type="date"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  width: 100px;
  transition: border-color .15s;
}
.input-wrap input[type="date"] { width: 140px; }
.input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}
.unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pace-preview { font-size: 12px; color: var(--accent); font-weight: 600; min-width: 50px; }

.settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}
.settings-saved {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  transition: opacity .3s;
}
.settings-saved.hidden { opacity: 0; }

/* ── Settings → derived fields with per-field overrides ─────────────────────── */
.settings-row.derived-field-row { display: flex; flex-direction: column; gap: 6px; }
.derived-field-display { display: flex; align-items: center; gap: 8px; }
.derived-value { font-size: 14px; font-weight: 600; }
.derived-source-tag { font-size: 11px; color: var(--muted); }
.override-toggle, .override-cancel { font-size: 11px; }
.elite-suggestion-banner { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* ── Generic visibility utility (Q1.7 self-service integrations) ───────────── */
.hidden { display: none; }

/* ── Settings → Integrations (Q1.7) ────────────────────────────────────────── */
/* Each provider is now its own .card (see templates/index.html) -- this
   class only handles the flex layout of that card's badge/buttons/form,
   not the provider title, which is a standard .card-header now. */
.integration-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.integration-row .card-header { flex: 1 0 100%; margin-bottom: 10px; }
.integration-row form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 0 100%;
}
.settings-error {
  font-size: 12px;
  color: var(--red);
  flex: 1 0 100%;
}

/* ── Push to Watch button ──────────────────────────────────────────────────── */
.modal-push-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal-push-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s;
}
.push-status {
  font-size: 12px;
  font-weight: 500;
}

/* ── Today panel ───────────────────────────────────────────────────────────── */
.recovery-row { margin-bottom: 16px; }

.recovery-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.rec-metric {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.rec-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.rec-lbl {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rec-metric.good   .rec-val { color: var(--green); }
.rec-metric.ok     .rec-val { color: var(--yellow); }
.rec-metric.poor   .rec-val { color: var(--red); }

.load-risk-banner {
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,92,92,.1);
  border: 1px solid rgba(255,92,92,.3);
  color: var(--red);
}
.load-risk-banner.hidden { display: none; }

.resequenced-banner {
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(62,207,142,.1);
  border: 1px solid rgba(62,207,142,.3);
  color: var(--green);
}
.resequenced-banner.hidden { display: none; }

.today-notes {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.today-note {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
}
.today-note.adapted {
  border-left-color: var(--yellow);
  color: var(--yellow);
  background: rgba(245,197,66,.08);
}
.today-note.good {
  border-left-color: var(--green);
  color: var(--green);
  background: rgba(62,207,142,.08);
}

.today-session-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.today-icon  { font-size: 32px; }
.today-label { font-size: 18px; font-weight: 800; }
.today-meta  { font-size: 13px; margin-top: 2px; }

.today-rest {
  padding: 20px 0;
  text-align: center;
}

@media (max-width: 600px) {
  .recovery-metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ── Race calendar ─────────────────────────────────────────────────────────── */
.race-form-grid { display: flex; flex-direction: column; gap: 0; }

.races-list-inner { display: flex; flex-direction: column; gap: 10px; }

.race-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s;
}
.race-row:hover { border-color: var(--accent); }

.race-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
.race-badge.A { background: rgba(252,76,2,.2);   color: var(--accent); border: 2px solid var(--accent); }
.race-badge.B { background: rgba(74,158,255,.2); color: var(--blue);   border: 2px solid var(--blue); }
.race-badge.C { background: rgba(107,114,128,.2); color: var(--muted); border: 2px solid var(--muted); }

.race-info   { min-width: 0; overflow: hidden; }
.race-name   { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-meta   { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-date   { font-size: 13px; font-weight: 600; white-space: nowrap; }
.race-countdown { font-size: 12px; color: var(--muted); white-space: nowrap; }

.race-actions { display: flex; gap: 6px; }
.race-edit-btn, .race-del-btn {
  padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: transparent;
  color: var(--muted); transition: all .15s;
}
.race-edit-btn:hover { border-color: var(--blue);   color: var(--blue); }
.race-del-btn:hover  { border-color: var(--red);    color: var(--red); }

.race-row.past { opacity: 0.45; }

.race-readiness {
  margin-top: -4px;
  padding: 6px 16px 6px 58px;
  font-size: 12px;
}
.race-readiness .readiness-status { font-weight: 700; margin-right: 8px; }
.race-readiness.green  .readiness-status { color: var(--green); }
.race-readiness.yellow .readiness-status { color: var(--yellow); }
.race-readiness.red    .readiness-status { color: var(--red); }
.race-readiness.hidden { display: none; }

/* B-race indicator in weekly calendar */
.plan-day.b-race {
  border-color: var(--blue) !important;
  background: rgba(74,158,255,.06);
}
.plan-day.b-race .plan-day-label { color: var(--blue); }

/* ── Today override buttons ────────────────────────────────────────────────── */
.today-overrides {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.today-overrides.hidden { display: none; }
.override-label {
  font-size: 12px;
  color: var(--muted);
  width: 100%;
  margin-bottom: 2px;
}
.override-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  transition: all .15s;
}
.override-btn:hover { border-color: var(--accent); color: var(--accent); }
.override-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ── Week overview in Today panel ──────────────────────────────────────────── */
.today-week-overview {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.today-week-overview.hidden { display: none; }

.week-split-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.week-split-header h3 { font-size: 13px; font-weight: 700; white-space: nowrap; }

.week-split-bar-wrap { flex: 1; min-width: 160px; }
.week-split-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface2);
  display: flex;
  overflow: hidden;
  margin-bottom: 4px;
}
.split-easy    { background: var(--green);  transition: width .4s; }
.split-quality { background: var(--accent); transition: width .4s; }

.split-labels { display: flex; justify-content: space-between; }
.split-easy-lbl    { font-size: 11px; color: var(--green);  font-weight: 600; }
.split-quality-lbl { font-size: 11px; color: var(--accent); font-weight: 600; }
.split-total { font-size: 12px; white-space: nowrap; }

.today-week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.today-week-day {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
}
.today-week-day.is-today   { border-color: var(--accent); background: rgba(252,76,2,.08); }
.today-week-day.is-past    { opacity: 0.5; }
.today-week-day.is-rest    { opacity: 0.3; }
.today-week-day.is-quality { border-color: rgba(252,76,2,.4); }

.wd-name  { color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; }
.wd-icon  { font-size: 16px; margin: 4px 0 2px; }
.wd-km    { font-weight: 700; font-size: 12px; }
.wd-label { color: var(--muted); font-size: 10px; margin-top: 1px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .today-week-days { grid-template-columns: repeat(4, 1fr); }
}

/* ── Mobile / PWA improvements ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Safe area for notch/home bar */
  body { padding-bottom: env(safe-area-inset-bottom); }

  header { padding: 10px 14px; position: sticky; top: 0; z-index: 20; }
  header h1 { font-size: 16px; }

  /* Badges: hide hint text on small screens */
  .hint { display: none; }
  .badge { font-size: 11px; padding: 2px 8px; }

  main { padding: 0 12px 84px; gap: 14px; margin: 14px auto; }

  /* Top tab strip is replaced by the bottom nav on mobile */
  .tab-nav { display: none; }
  footer { display: none; }

  /* Bottom nav — shown only on mobile */
  .bottom-nav { display: flex; }

  /* Stats grid — 2 columns on phone */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value { font-size: 22px; }

  /* Activity cards — tighter padding on phone */
  .activity-card { padding: 10px 12px; }
  .ac-name { font-size: 12px; }

  /* Recovery metrics — 2x2 on phone */
  .recovery-metrics { grid-template-columns: repeat(2, 1fr); }
  .rec-val { font-size: 18px; }

  /* Today week days — 4 cols on phone */
  .today-week-days { grid-template-columns: repeat(4, 1fr); }

  /* Plan week grid — 4 cols on phone, 3 per row if needed */
  .plan-week-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .plan-day { min-height: 100px; padding: 8px 6px; }
  .plan-day-label { font-size: 11px; }

  /* Settings form — full width inputs */
  .settings-row { grid-template-columns: 1fr; gap: 6px; }
  .input-wrap input, .input-wrap select { width: 100% !important; }

  /* Race rows — simplified */
  .race-row { grid-template-columns: 36px 1fr auto; gap: 10px; }
  .race-date, .race-countdown { display: none; }

  /* Session modal — full screen on phone */
  .session-modal-overlay { padding: 0; align-items: flex-end; }
  .session-modal {
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 90vh;
    width: 100%;
  }

  /* Charts — shorter on phone */
  canvas { max-height: 180px; }

  /* Plan overview rows */
  .plan-overview-row { grid-template-columns: 60px 1fr auto; }
  .ov-phase { display: none; }
}

/* ── Recovery Tab ──────────────────────────────────────────────────────────── */
.recovery-narrative {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.recovery-narrative.all_good        { color: var(--green); }
.recovery-narrative.sleep_only,
.recovery-narrative.hrv_only,
.recovery-narrative.battery_only    { color: var(--yellow); }
.recovery-narrative.multi_signal_dip { color: var(--red); }

.recovery-index-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ri-gauge-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.ri-value-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ri-value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}
.ri-label { font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.ri-details { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ri-recommendation {
  font-size: 18px;
  font-weight: 700;
}
.ri-forced {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--yellow);
  background: rgba(245,197,66,.1);
  color: var(--yellow);
}
.ri-forced.hidden { display: none; }
.ri-components {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ri-comp {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.recovery-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rm-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.rm-val { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.rm-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.rm-card.good  .rm-val { color: var(--green); }
.rm-card.ok    .rm-val { color: var(--yellow); }
.rm-card.poor  .rm-val { color: var(--red); }

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── Tab section headings — groups cards within Performance/Recovery under
   the approved ownership hierarchy (One Coach ownership alignment). ────── */
.tab-section-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.tab-section-heading:first-child { margin-top: 0; }

/* ── Performance Tab ───────────────────────────────────────────────────────── */
.perf-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.perf-metric-card {
  text-align: center;
  padding: 20px 16px;
}
.perf-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.perf-val   { font-size: 32px; font-weight: 900; letter-spacing: -1px; color: var(--text); }
.perf-sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }
.perf-trend { font-size: 12px; font-weight: 600; margin-top: 6px; }
.perf-trend.up   { color: var(--green); }
.perf-trend.down { color: var(--red); }

.load-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.load-metric { text-align: center; }
.load-val    { font-size: 24px; font-weight: 800; }
.load-lbl    { font-size: 11px; color: var(--muted); margin-top: 2px; }
.load-feedback { font-size: 13px; margin-bottom: 14px; }

.load-balance { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.lb-label { width: 120px; color: var(--muted); flex-shrink: 0; }
.lb-bar-bg { flex: 1; height: 8px; background: var(--surface2); border-radius: 4px; position: relative; }
.lb-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.lb-bar-target {
  position: absolute; top: -3px;
  width: 2px; height: 14px;
  background: var(--muted);
  border-radius: 1px;
}
.lb-val { width: 50px; text-align: right; font-weight: 600; }

/* ── Predictions Tab ───────────────────────────────────────────────────────── */
.preds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pred-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.pred-dist  { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.pred-time  { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.pred-pace  { font-size: 11px; color: var(--muted); margin-top: 4px; }

.goals-list { display: flex; flex-direction: column; gap: 14px; }
.goal-row {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.goal-name   { font-size: 15px; font-weight: 700; }
.goal-date   { font-size: 12px; color: var(--muted); }
.goal-times  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.goal-time-item { text-align: center; }
.goal-time-val  { font-size: 18px; font-weight: 700; }
.goal-time-lbl  { font-size: 11px; color: var(--muted); }
.goal-progress-bar {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.goal-progress-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.goal-status { font-size: 12px; font-weight: 600; }

/* ── Training DNA Tab ──────────────────────────────────────────────────────── */
/* Insight-first, deliberately: .dna-insight-* is styled to read as a
   headline sentence, not a data row. .dna-raw-* (coefficients) is styled
   quieter and lives inside a collapsed <details> -- the one place a raw
   number is allowed to stand alone. */
.dna-summary-card h2 { margin-bottom: 6px; }
.dna-summary-card p  { margin: 0; }

.dna-insights-list { display: flex; flex-direction: column; gap: 14px; }
.dna-insight-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.dna-insight-question {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.dna-insight-headline {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 6px;
}
.dna-insight-detail {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.55;
  margin-bottom: 10px;
}

/* Confidence badges never borrow Verdikt Slate -- slate is reserved for the
   Ease verdict (see .verdict-badge above); a confidence tier is a
   different kind of signal and doesn't get to reuse that meaning. */
.dna-confidence-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.dna-confidence-badge.established {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.dna-confidence-badge.building,
.dna-confidence-badge.early_read {
  background: color-mix(in srgb, var(--yellow) 20%, transparent);
  color: var(--yellow);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent);
}
.dna-confidence-badge.early_read { opacity: .7; }
/* "Still Learning" means no number is shown at all -- visually distinct
   from early_read (a real, if thin, number) so the two are never read as
   the same thing: outlined only, no fill, lowest-emphasis badge in the
   set. */
.dna-confidence-badge.learning {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
}

.dna-confidence-legend { display: flex; flex-direction: column; gap: 10px; }
.dna-confidence-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dna-confidence-row .dna-confidence-badge { flex-shrink: 0; min-width: 88px; text-align: center; }

/* Recovery Data Freshness (Y2 Track B) -- same badge language as
   .dna-confidence-badge above (a confidence tier, not a Verdikt-Slate
   verdict), applied to Garmin-sync age instead of DNA fit quality. */
.recovery-freshness-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.recovery-freshness-badge:empty { display: none; }
.recovery-freshness-badge.fresh {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.recovery-freshness-badge.aging {
  background: color-mix(in srgb, var(--yellow) 20%, transparent);
  color: var(--yellow);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent);
}
.recovery-freshness-badge.stale {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
}
.recovery-freshness-badge.unknown {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
}

.dna-history-charts { display: flex; flex-direction: column; gap: 22px; }
.dna-history-chart-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.dna-history-chart-note { font-size: 11px; margin-top: 6px; }

.dna-empty-reasons { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.dna-empty-reason-row {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.dna-empty-reason-question { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.dna-empty-reason-text { font-size: 12px; }

.dna-raw-summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dna-raw-data { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.dna-raw-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted2);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.dna-raw-row:last-child { border-bottom: none; }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .perf-top-grid   { grid-template-columns: 1fr 1fr; }
  .load-grid       { grid-template-columns: repeat(2, 1fr); }
  .preds-grid      { grid-template-columns: repeat(2, 1fr); }
  .two-col-grid    { grid-template-columns: 1fr; }
  .recovery-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .goal-times      { grid-template-columns: 1fr 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Verdikt typography system — display / body / mono
   Styling only: no selector below changes layout, structure, or behavior.
   ══════════════════════════════════════════════════════════════════════════ */

header h1, h2, h3,
.tab-btn, .btn, .btn-sm,
.bn-label, .perf-label, .rec-lbl,
.race-badge, .goal-status {
  font-family: var(--font-display);
}

header h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.home-verdict-reason {
  font-family: var(--font-body);
}

.perf-val, .rec-val, .stat-value, .week-total-val,
.plan-day-dist, .ov-km, .split-quality-lbl, .split-easy-lbl,
#today-date, #recovery-date, #preds-date, .ac-hr, .ac-tss,
.goal-time-lbl, #lt-pace, #lt-hr {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}