/* ─── Ironi — dark gym theme, iOS-inspired mobile UI ──────────── */

/* Icon system: Lucide SVGs inlined as currentColor strokes. Size with width/height. */
.wt-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
}
.wt-icon-sm { width: 16px; height: 16px; }
.wt-icon-lg { width: 32px; height: 32px; }
.wt-icon-xl { width: 48px; height: 48px; }


:root {
  /* ── Ironclad palette (see design.md) ─────────────────────────────────── */
  --bg: #0c0d10;             /* primary screen background */
  --bg2: #08090b;            /* deepest bg (desktop shell) */
  --panel: #16181d;          /* cards, rows, inputs */
  --panel2: #1e2127;         /* nested / raised surfaces, steppers */
  --bg-elev: #1e2127;        /* legacy alias → panel2 */
  --card: #16181d;           /* legacy alias → panel */
  --card-2: #1e2127;         /* legacy alias → panel2 */

  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --control-outline: rgba(255, 255, 255, 0.35);
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #f2f3f5;
  --text-muted: #8a8f98;
  --dim: #8a8f98;
  --text-faint: #5e636c;
  --dim2: #5e636c;

  --accent: #ccff00;         /* volt — FILL only (buttons, active pills, chart bars): always dark ink on top */
  --accent-rgb: 204, 255, 0;
  --accent-pressed: #b8e600;
  --accent-glow: rgba(var(--accent-rgb), 0.22);
  --accent-text: #0c0d10;
  --ink: #0c0d10;            /* text/icon ON the accent */
  /* Volt as TEXT / LINK / STROKE / small glyph. Dark = volt (identical to --accent);
     light overrides to a darker olive so it stays readable on white. */
  --accent-ink-text: #ccff00;

  --good: #5be08a;           /* positive workout progress, PRs */
  --bad: #ff6b6b;            /* destructive, negative trend */
  --warm: #ffa95b;           /* legs category / drop-set accent */
  --warm-glow: rgba(255, 169, 91, 0.18);
  --danger: #ff6b6b;

  /* Session-type category accents */
  --push: #ccff00;
  --pull: #7fd4ff;
  --legs: #ffa95b;

  --radius-card: 20px;
  --radius-input: 13px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.55);
  --shadow-cta: 0 12px 30px -10px rgba(var(--accent-rgb), 0.5);

  /* One Source Sans 3 family throughout; data uses tabular figures. */
  --font-ui: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --tab-h: 76px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─── Ironclad Light ──────────────────────────────────────────────────────────
   Opt-in light theme. A no-flash head script stamps data-theme="light" on <html>
   BEFORE this stylesheet loads. Dark stays the untouched default (data-theme
   absent or "dark"). Light uses Ironi green with white on-accent ink;
   standalone text/strokes use --accent-ink-text, kept dark for contrast. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f6f8;
  --bg2: #eceef1;
  --panel: #ffffff;
  --panel2: #eceef1;
  --bg-elev: #eceef1;
  --card: #ffffff;
  --card-2: #eceef1;

  --line: rgba(12, 13, 16, 0.10);
  --line2: rgba(12, 13, 16, 0.18);
  --control-outline: rgba(12, 13, 16, 0.45);
  --border: rgba(12, 13, 16, 0.10);
  --border-soft: rgba(12, 13, 16, 0.08);
  --border-strong: rgba(12, 13, 16, 0.18);

  --text: #17181c;
  --text-muted: #5c6270;
  --dim: #5c6270;
  --text-faint: #8a8f98;
  --dim2: #8a8f98;

  /* Ironi green owns light-theme fills, active states, chart bars and tints.
     White ink sits on the fill; standalone accent text stays dark on white. */
  --accent: #4d8000;
  --accent-rgb: 77, 128, 0;
  --accent-pressed: #416d00;
  --accent-glow: rgba(var(--accent-rgb), 0.22);
  --accent-text: #ffffff;
  --ink: #ffffff;
  --accent-ink-text: #3f6a00;

  --good: #1d9e50;
  --bad: #d64545;
  --warm: #c97a2b;
  --warm-glow: rgba(201, 122, 43, 0.16);
  --danger: #d64545;

  --push: #0c0d10;
  --pull: #2b8fc9;
  --legs: #c97a2b;

  /* Soft neutral-gray shadows instead of the dark theme's deep black + volt glow. */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 28px -18px rgba(12, 13, 16, 0.30);
  --shadow-cta: 0 10px 24px -10px rgba(var(--accent-rgb), 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Overscroll containment belongs ONLY on the viewport (html), never on body.
   `overflow-x: hidden` makes <body> its own scroll container; with
   `overscroll-behavior-y: contain` also on body, body swallowed wheel events
   and refused to chain them up to the viewport — so mouse/trackpad scrolling
   did nothing on desktop. (Touch scrolling bypasses this, which is why it
   still worked on mobile.) Keeping `contain` on html alone preserves
   pull-to-refresh / chain prevention without breaking desktop scroll. */
/* Disable double-tap-to-zoom app-wide (touch-action on the root constrains
   every descendant). `manipulation` keeps panning and pinch-zoom (an
   accessibility feature) — it only removes the double-tap gesture, which in
   an app just fires accidental 200% zooms when tapping quickly. */
html { touch-action: manipulation; }
html { overscroll-behavior-y: contain; }
body { overscroll-behavior-y: auto; }

/* App text is not selectable (long-press select/copy on labels, stats, and
   buttons breaks the native feel). Inputs and textareas opt back in — users
   must still be able to select/copy/paste what they type. The landing page
   (#landing) is a regular web page, so selection stays enabled there.
   -webkit-touch-callout kills the iOS long-press callout bubble. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
#landing {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(255, 169, 91, 0.05), transparent 60%),
    var(--bg);
}

a { color: var(--accent-ink-text); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ─── Layout shell ───────────────────────────────────────────────────────── */

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-top: calc(var(--safe-top) + 18px);
  padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px);
  position: relative;
  overflow-x: hidden;
}

.topbar {
  padding: 28px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar .greeting {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.topbar .display-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--warm));
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.section {
  padding: 8px 20px 24px;
}
.section-title {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 24px 0 10px;
  font-weight: 700;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 12px; }

/* Day picker on the start-workout screen — horizontal scrollable pills, one
   per day in the user's split. The active pill marks the day the preview /
   "Start workout" button will use. Tapping another pill swaps the preview.
   The wrapper holds an edge-fade overlay that hints at off-screen content
   when more pills exist beyond the visible window. */
.day-picker-wrap {
  position: relative;
}
.day-picker-wrap::before,
.day-picker-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 14px; /* match .day-picker padding-bottom so fade doesn't overlap the next section */
  width: 28px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}
.day-picker-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
  opacity: 0;
}
.day-picker-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
  opacity: 0;
}
.day-picker-wrap[data-overflow-left="true"]::before { opacity: 1; }
.day-picker-wrap[data-overflow-right="true"]::after { opacity: 1; }

.day-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 14px;
  margin: -2px -4px 0;
  scrollbar-width: none;
}
.day-picker::-webkit-scrollbar { display: none; }
.day-picker .day-pill {
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.day-picker .day-pill:first-child { margin-left: 4px; }
.day-picker .day-pill:last-child { margin-right: 4px; }
.day-picker .day-pill.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.day-picker .day-pill:active { transform: scale(0.97); }

.day-hero {
  background: linear-gradient(160deg, var(--card-2) 0%, var(--card) 100%);
  border-radius: 22px;
  padding: 22px;
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.day-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--accent-glow), transparent 65%);
  pointer-events: none;
}
/* Whole hero card is a "switch day" button before a session starts. */
.day-hero.tappable {
  cursor: pointer; text-align: left; width: 100%; display: block;
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.day-hero.tappable:active { transform: scale(0.985); border-color: var(--line2); }
.day-hero.tappable:focus-visible { outline: 2px solid var(--accent-ink-text); outline-offset: 2px; }
.day-hero .label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.day-hero .day-name {
  font-size: 34px;
  font-weight: 800;
  margin: 6px 0 4px;
  letter-spacing: -0.02em;
}
.day-hero .day-sub {
  font-size: 14px;
  color: var(--text-muted);
}

/* ─── Pre-workout exercise list (preview before starting) ───────────────── */

.exercise-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 14px;
}
.exercise-list li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--card);
}
.exercise-list li + li {
  border-top: 1px solid var(--border-soft);
}
.exercise-list .num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.exercise-list .name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.exercise-list .target {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── Active workout focus view (one exercise on screen) ────────────────── */

.focus {
  padding: 4px 4px 0;
}
.focus:has(.warmup) {
  /* App shell (18px + 16px) plus .section (8px + 24px). Accounting for
     both keeps a fitting warm-up exactly within the viewport; min-height
     still lets genuinely taller content grow and use normal page scrolling. */
  min-height: calc(100svh - var(--safe-top) - var(--tab-h) - var(--safe-bottom) - 66px);
  display: flex;
  flex-direction: column;
}

/* Animated container around the current exercise. position:relative so the
   peek/leaving panels (position:absolute) are anchored inside it.
   overflow-x: hidden clips any sliver of off-screen peek that escapes
   .app's horizontal clip on wider viewports. min-height is locked from JS
   during a drag so the slide doesn't shrink when swiping to an exercise
   with fewer sets — that shrink is what made the buttons / discard link
   underneath jump up close to the panel content. */
#focus-slide {
  position: relative;
  overflow-x: hidden;
}
/* Inner padding-top on every panel substitutes for .focus-card's old
   margin-top, which used to collapse up through the panel to create a 14px
   gap above the slide. That collapse doesn't happen inside absolute-positioned
   peek/leaving panels (they're their own BFC), which previously left peek's
   first card 14px lower than the in-flow current card — the "sections too
   close" visual glitch during a swipe. Using padding here keeps identical
   layout between peek and current, with no net change to overall layout
   (the 14px moved from outside to inside the panel). */
.exercise-panel {
  padding-top: 10px;
}
/* Peek and leaving exercise panels during a swipe/transition: absolute,
   anchored at the top of #focus-slide so they stack on top of the in-flow
   panel. Inline `left` / `transform` are managed by JS. */
.exercise-panel.peek,
.exercise-panel.leaving {
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.focus-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 6px;
}
.focus-top .back-btn {
  background: var(--card);
  border: 1px solid var(--border-soft);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.focus-top .day-tag {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: all 0.2s ease;
}
.dots .dot.done { background: var(--accent); opacity: 0.7; }
.dots .dot.current {
  background: var(--accent);
  width: 22px;
  border-radius: 999px;
  box-shadow: 0 0 12px var(--accent-glow);
}

.focus-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 16px 18px 14px;
  margin: 0 4px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.focus-card::after {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  width: 220px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.focus-card .ex-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  position: relative;
}
.focus-card .ex-target {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.focus-card .last-summary {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.focus-card .last-summary strong {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  display: block;
  margin-bottom: 2px;
}

.set-list {
  margin: 12px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.set {
  background: var(--card);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}
.set .set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 18px;
}
.set .set-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.set .set-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.set.active .set-label { color: var(--accent-ink-text); }
.set.done .set-label { color: var(--text-faint); }
.set .set-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.set.done .set-meta { opacity: 0.6; }
.set .set-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.set.active {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}
.set.done {
  background: var(--bg-elev);
  border-color: var(--border-soft);
}

.set .num-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elev);
  border: 1.5px solid transparent;
  color: var(--text);
  border-radius: 10px;
  padding: 9px 0;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}
.set .num-input::-webkit-outer-spin-button,
.set .num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.set .num-input:focus {
  border-color: var(--accent-ink-text);
  background: #1e2127;
}
.set .num-input::placeholder {
  color: var(--text-faint);
  font-weight: 500;
}
.set.done .num-input {
  background: transparent;
  color: var(--text-muted);
}

.set .x {
  color: var(--text-faint);
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}

.set .log-btn {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: transform 0.05s ease;
}
.set .log-btn:active { transform: scale(0.94); }
.set:not(.active) .log-btn {
  background: var(--bg-elev);
  color: var(--text-faint);
  box-shadow: none;
}
.set.done .log-btn {
  background: transparent;
  color: rgba(var(--accent-rgb), 0.55);
  border: 1.5px solid rgba(var(--accent-rgb), 0.25);
  box-shadow: none;
}
/* In-flight state while a set save is processing: the button is disabled, but
   the check stays visible so the fullscreen confirmation can visually originate
   from the user's tap. */
.set .log-btn.loading { pointer-events: none; }
.set .log-btn.pressed { transform: scale(0.97); }
.set .log-btn .btn-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  box-sizing: border-box;
  animation: spin 0.7s linear infinite;
}
/* Visually weaken the done row so the active row is the only one that
   reads as "this is the one to log next" — fixes the earlier confusion
   where both rows looked equally green. */
.set.done { opacity: 0.72; }
.set.done .num-input { opacity: 0.85; }

/* Drop-set chip in the set header: accent tint, visible at rest. */
.set .drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent-ink-text);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.set .drop-toggle .drop-plus {
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}
.set .drop-toggle.open {
  color: var(--accent-ink-text);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.18);
}
.set .drop-toggle.open .drop-plus { transform: rotate(45deg); display: inline-block; }
.set.done .drop-toggle { opacity: 0.6; }
/* Drop-set tail in the session-detail read-only view */
.detail-exercise .set-line .drop-tail {
  font-size: 12px;
  color: var(--warm);
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 4px;
}
.detail-exercise .set-line .drop-tail .suffix {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.unit-suffix {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: -6px;
  flex-shrink: 0;
}

/* Pinned nav at the bottom of the focus screen — truly fixed in the viewport
   so it stays in the SAME spot regardless of how tall the sliding panel
   above is (i.e. doesn't shift up/down with exercises that have 2 vs 4 sets).
   Sits above the tab bar; discard link rides just below it. Only renders
   when focus mode is active (via the inFocusMode body class). */
.focus-nav-fixed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 56px);
  width: calc(100% - 24px);
  max-width: 440px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  z-index: 40;
}
.focus-nav-fixed .btn-prev {
  background: var(--card);
  border: 1px solid var(--border-soft);
  color: var(--text);
}
.focus-nav-fixed .btn-prev:disabled {
  color: var(--text-faint);
}
.focus-nav-fixed .btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  padding: 14px;
}
.focus-nav-fixed .btn .nav-icon {
  width: 18px;
  height: 18px;
}

/* Discard link also pinned just below the nav so it stays in the same
   place across exercises. The focus slide gets matching bottom padding so
   shorter exercises don't get hidden behind the fixed controls. */
.focus .discard-link {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 22px);
  z-index: 40;
}
.focus #focus-slide {
  padding-bottom: 140px; /* clear the fixed nav + discard link */
}

.discard-link {
  display: block;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 13px;
  margin: 22px auto 0;
  padding: 10px;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

/* ─── Session detail (read-only view of a past session) ─────────────────── */

.detail-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 14px;
}
.detail-top .back-btn {
  background: var(--card);
  border: 1px solid var(--border-soft);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detail-top .fin-edit {
  margin-left: auto;
  background: var(--card);
  border: 1px solid var(--border-soft);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detail-top .fin-edit .wt-icon { width: 18px; height: 18px; }
.detail-top .day-info .day-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.detail-top .day-info .day-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px 16px;
}
.detail-stats .stat {
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}
.detail-stats .stat .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}
.detail-stats .stat .v {
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.detail-stats .stat .v.accent { color: var(--accent-ink-text); }

.detail-exercise {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin: 0 16px 12px;
}
.detail-exercise .name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.detail-exercise .sets {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-exercise .set-line {
  display: flex;
  align-items: center;
  gap: 14px;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.detail-exercise .set-line .label {
  width: 42px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.detail-exercise .set-line .reps,
.detail-exercise .set-line .weight {
  color: var(--text);
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.detail-exercise .set-line .reps .suffix,
.detail-exercise .set-line .weight .suffix {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.detail-exercise .set-line .dot {
  color: var(--text-faint);
  font-size: 14px;
}

/* ── Session detail redesign (v48) — Ironclad, information-forward ─────────── */
.sd-top { display: flex; align-items: flex-start; gap: 14px; padding: 8px 16px 16px; }
.sd-heading { flex: 1; min-width: 0; }
.sd-back {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.15s ease;
}
.sd-back:hover { border-color: var(--line2); }
.sd-eyebrow { font: 400 12px var(--font-mono); color: var(--dim); letter-spacing: 0.02em; }
.sd-title-row { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
/* (Category color dot removed from session detail — founder found the
   push/pull/legs color-coding confusing here. Share card + Reports keep it.) */
.sd-title { margin: 0; font: 700 26px var(--font-ui); letter-spacing: -0.6px; }
.sd-edit {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px;
}
.sd-edit .wt-icon { width: 17px; height: 17px; }
.sd-edit-actions, .de-actions { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.sd-edit-cancel, .sd-edit-save, .de-cancel, .de-save {
  min-height: 44px; padding: 8px 12px; border-radius: 10px;
  font: 700 12px var(--font-ui); cursor: pointer;
}
.sd-edit-cancel, .de-cancel { color: var(--text); background: transparent; border: 1px solid var(--line2); }
.sd-edit-save, .de-save {
  color: var(--dim2); background: var(--panel); border: 1px solid var(--line);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sd-edit-save.dirty, .de-save.dirty { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.sd-edit-save[aria-disabled="true"], .de-save[aria-disabled="true"] { cursor: default; }

.sd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px 20px; }
.sd-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px; }
.sd-stat-k { font: 400 10px var(--font-mono); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.sd-stat-v { font: 700 22px var(--font-mono); letter-spacing: -0.5px; margin-top: 8px; white-space: nowrap; }
.sd-stat-v.accent { color: var(--accent-ink-text); }
.sd-stat-v .u { font-size: 12px; color: var(--dim); margin-left: 3px; letter-spacing: 0; }

.sd-compare {
  width: calc(100% - 32px); margin: -6px 16px 20px; padding: 11px 12px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.sd-compare:hover { border-color: var(--line2); background: var(--panel2); }
.sd-compare:active { transform: scale(0.985); }
.sd-compare-ic {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.1);
}
.sd-compare-ic .wt-icon { width: 17px; height: 17px; }
.sd-compare-copy {
  min-width: 0; flex: 1; white-space: normal; overflow-wrap: anywhere;
  font: 600 12px/1.35 var(--font-ui); letter-spacing: -0.01em; text-align: left;
}
.sd-compare-metric {
  display: inline-flex; align-items: center; gap: 3px; flex: none; white-space: nowrap;
  font: 700 14px var(--font-mono); color: var(--dim);
}
.sd-compare-metric.up { color: var(--good); }
.sd-compare-metric.down { color: var(--bad); }
.sd-compare-arrow { font-size: 15px; line-height: 1; }
.sd-compare-chev { display: grid; place-items: center; margin-left: auto; color: var(--dim2); }
.sd-compare-chev .wt-icon { width: 17px; height: 17px; }

.sd-section-label { font: 600 12px var(--font-ui); color: var(--dim); margin: 0 18px 12px; }
.sd-list { display: flex; flex-direction: column; gap: 12px; margin: 0 16px; }
.sd-ex { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 8px; }
.sd-ex-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sd-ex-name { font: 600 15.5px var(--font-ui); letter-spacing: -0.2px; }

.sd-sets { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--line); }
.sd-set { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sd-set:last-child { border-bottom: none; }
.sd-set.editing { align-items: flex-start; flex-wrap: wrap; padding: 11px 0; }
.sd-set-n { font: 400 10px var(--font-mono); color: var(--dim2); width: 42px; flex: none; letter-spacing: 0.5px; }
.sd-set-val { font: 500 15px var(--font-mono); color: var(--text); }
.sd-set-val .x { color: var(--dim2); }
.sd-set-val .u { font-size: 11px; color: var(--dim); margin-left: 1px; }
.sd-drop {
  font: 500 11px var(--font-mono); color: var(--accent-ink-text);
  border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 6px; padding: 2px 7px;
}
.sd-set-editor { flex: 1; min-width: 0; }
.sd-set-editor .stepper-row, .sd-add-set-form .stepper-row { margin: 0; gap: 8px; }
.sd-set-editor .stepper, .sd-add-set-form .stepper { padding: 8px 5px; border: 1px solid var(--line); }
.sd-set-editor .st-btn, .sd-add-set-form .st-btn { width: 44px; height: 44px; }
.sd-set-editor .st-val, .sd-add-set-form .st-val { font-size: 22px; }
.sd-drop-edit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sd-drop-editor { padding: 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; }
.sd-drop-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
  font: 700 9px var(--font-mono); letter-spacing: 0.7px; color: var(--accent-ink-text);
}
.sd-drop-remove {
  width: 44px; height: 44px; margin: -11px -9px -11px 0; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--dim); border-radius: 8px; cursor: pointer;
}
.sd-drop-remove .wt-icon { width: 15px; height: 15px; }
.sd-set-actions { display: flex; gap: 8px; margin-top: 8px; }
.sd-set-remove {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); color: var(--text);
}
.sd-set-remove { width: 100%; padding: 0 12px; font: 600 12px var(--font-ui); }
.sd-set-remove { color: var(--bad); }
.sd-set-remove .wt-icon { width: 14px; height: 14px; }
.sd-set-drops { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; margin-left: 54px; }
.sd-add-set { border-bottom: 1px solid var(--line); padding: 9px 0; }
.sd-add-set-trigger {
  padding: 4px 0; border: 0; background: none; color: var(--dim); font: 500 12px var(--font-ui);
}
.sd-add-set-trigger:hover { color: var(--text); }
.sd-add-set-form { padding-top: 4px; }
.sd-add-set-actions { display: flex; gap: 8px; margin-top: 8px; }
.sd-add-set-save, .sd-add-set-cancel {
  min-height: 44px; flex: 1; padding: 0 10px; border-radius: 9px; font: 600 12px var(--font-ui);
}
.sd-add-set-save { border: 1px solid var(--accent); background: var(--accent); color: var(--ink); }
.sd-add-set-cancel { border: 1px solid var(--line); background: transparent; color: var(--dim); }
.sd-add-set-save:disabled { opacity: 0.55; cursor: wait; }
.sd-delete {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 26px auto 8px; padding: 10px 16px;
  background: none; border: none; cursor: pointer;
  font: 600 13px var(--font-ui); color: var(--danger);
}
.sd-delete .wt-icon, .sd-delete svg { width: 15px; height: 15px; }

@media (max-width: 600px) {
  .sd-set.editing { gap: 8px; }
  .sd-set.editing .sd-set-n { flex-basis: 100%; width: auto; }
  .sd-set-editor { flex-basis: 100%; }
  .sd-set-drops { margin-left: 0; }
  .sd-set-editor .stepper-row, .sd-add-set-form .stepper-row { gap: 6px; }
}

.history-row[data-session-id] { cursor: pointer; transition: transform 0.05s ease, border-color 0.15s ease; }
.history-row[data-session-id]:active { transform: scale(0.98); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 22px;
  border-radius: var(--radius-input);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: none;
  width: 100%;
  transition: transform 0.05s ease, box-shadow 0.2s ease, background 0.15s ease;
  text-transform: none;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--accent-pressed); }
.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(255, 77, 109, 0.3);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Hover affordances (pointer devices only, so touch doesn't stick) ────── */
.tabbar button, .btn, .chart-pill, .day-sheet-item, .day-sheet-cancel,
.history-row[data-session-id], .rp-progress, .we-delete, .switch-day-link,
.day-hero .day-name[role="button"] { cursor: pointer; }

@media (hover: hover) {
  /* Sidebar / bottom-bar nav items */
  .tabbar button:hover { color: var(--text); }
  .tabbar button:not(.active):hover { background: var(--panel2); }
  .tabbar button:hover .wt-icon { filter: drop-shadow(0 0 6px var(--accent-glow)); }
  .tabbar-brand:hover .wt-word { color: var(--accent-ink-text); }

  /* Buttons */
  .btn-ghost:hover { border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
  .btn-danger:hover { border-color: var(--danger); background: rgba(255, 77, 109, 0.08); }

  /* List rows / cards that navigate */
  .history-row[data-session-id]:hover { border-color: var(--line2); background: var(--panel2); }
  .day-sheet-item:hover { border-color: var(--line2); }
  .day-sheet-item.active:hover { border-color: var(--accent-ink-text); }
  .day-sheet-cancel:hover { color: var(--text); }

  /* Range / segmented pills */
  .chart-pill:not(.active):hover { color: var(--text); background: var(--panel2); }

  /* Day name doubles as the day-switcher trigger on the Today header */
  .day-hero .day-name[role="button"]:hover { color: var(--accent-ink-text); }
  .switch-day-link:hover { color: var(--accent-ink-text); }
}

.cta-bar {
  position: sticky;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 12px);
  padding: 0 20px;
  z-index: 5;
  margin-top: 24px;
}

/* ─── Bottom tab bar ─────────────────────────────────────────────────────── */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + var(--safe-bottom));
  width: calc(100% - 32px);
  max-width: 448px;
  height: var(--tab-h);
  background: rgba(20, 20, 28, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 12px;
  z-index: 50;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Keyboard-aware: when a field is focused (body.kb-open, set from the Keyboard
   plugin on native / visualViewport on web) the tab bar slides out of the way
   so the composer can sit snug above the on-screen keyboard. */
body.kb-open .tabbar {
  transform: translate(-50%, calc(100% + 40px));
  pointer-events: none;
}
.tabbar button {
  background: none;
  border: none;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: 14px;
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.15s ease, background 0.15s ease;
}
.tabbar button .wt-icon { width: 20px; height: 20px; }
.tabbar button.active { color: var(--accent-ink-text); }
.tabbar button.active .wt-icon { filter: drop-shadow(0 0 8px var(--accent-glow)); }

/* ─── Pull-to-refresh indicator (native-feel) ─────────────────────────────── */
/* A small Ironclad puck that follows a downward drag from the top of Today /
   History / Reports / Weight. JS drives transform + opacity inline while the
   finger moves (no transition so it tracks 1:1); .ptr-settle restores the
   spring on release. */
.ptr {
  position: fixed;
  top: calc(var(--safe-top) + 8px);
  left: 50%; margin-left: -18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 45; pointer-events: none;
  opacity: 0; transform: translateY(-46px);
}
.ptr-ring {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line2);
  border-top-color: var(--accent-ink-text);
}
.ptr.ptr-armed .ptr-ring { border-color: rgba(var(--accent-rgb), 0.35); border-top-color: var(--accent-ink-text); }
.ptr.ptr-settle { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease; }
.ptr.ptr-refresh .ptr-ring { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr.ptr-settle { transition: opacity 0.24s ease; }
  .ptr.ptr-refresh .ptr-ring { animation: ptr-spin 1.3s linear infinite; }
}

/* ─── Connectivity banner ─────────────────────────────────────────────── */
.connectivity-banner {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 22px);
  z-index: 49;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 13px;
  box-shadow: var(--shadow-card);
  font: 600 12px/1.35 var(--font-ui);
}
.connectivity-banner[hidden] { display: none; }
.connectivity-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--warm);
}
.connectivity-banner.is-checking .connectivity-dot { animation: connectivityPulse 1.2s ease-in-out infinite; }
@keyframes connectivityPulse { 50% { opacity: .35; } }

.local-completion-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 14px 0 18px;
  padding: 13px 14px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 13px;
  box-shadow: var(--shadow-card);
  font: 600 12px/1.45 var(--font-ui);
}
.local-completion-icon {
  width: 25px;
  height: 25px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent-ink-text);
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
}
.local-completion-icon .wt-icon { width: 15px; height: 15px; }
.local-completion-card.is-blocked {
  flex-wrap: wrap;
  border-color: color-mix(in srgb, var(--warm) 42%, var(--line2));
}
.local-completion-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.local-completion-copy strong { font: inherit; }
.local-completion-copy small {
  color: var(--muted);
  font: 500 11px/1.45 var(--font-ui);
}
.local-completion-action {
  width: 100%;
  margin-left: 36px;
  padding: 9px 11px;
  color: var(--warm);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--warm) 40%, var(--line2));
  border-radius: 9px;
  font: 700 11px/1.2 var(--font-ui);
  cursor: pointer;
}

/* ─── Login / signup / reset (Ironclad auth — matches designer's Auth screen) ─
   Full-screen radial-gradient backdrop, a left-aligned 400px column: WT tile,
   big title + subtitle, card-style fields (mono uppercase label over a
   borderless input), volt CTA, a bottom login/signup toggle, and fine print. */
.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% -10%, #15171c, #08090b 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(28px + var(--safe-top)) 22px calc(24px + var(--safe-bottom));
}
.auth-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}
.auth-logo {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
  flex: none;
}
.auth-title {
  font: 700 30px/1.05 var(--font-ui);
  letter-spacing: -0.8px;
  margin: 26px 0 0;
}
.auth-subtitle {
  font: 400 14px var(--font-ui);
  color: var(--dim);
  margin: 8px 0 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.auth-field {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 16px 12px;
  transition: border-color 0.15s ease;
}
.auth-field:focus-within { border-color: var(--line2); }
.auth-field-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.auth-field-label {
  display: block;
  font: 500 10px var(--font-mono);
  letter-spacing: 1px;
  color: var(--dim);
  text-transform: uppercase;
}
.auth-forgot {
  font: 500 11px var(--font-ui);
  color: var(--accent-ink-text);
  text-decoration: none;
}
.auth-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font: 500 16px var(--font-ui);
  margin-top: 4px;
  padding: 0;
}
.auth-input::placeholder { color: var(--dim2); letter-spacing: normal; }
.auth-input[type="password"] { letter-spacing: 2px; }

.auth-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  font: 400 11.5px var(--font-ui);
  color: var(--dim);
}
.auth-hint .tick {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex: none;
}

.auth-submit {
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: 15px;
  padding: 16px;
  text-align: center;
  font: 700 16px var(--font-ui);
  margin-top: 22px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.5);
  transition: transform 0.05s ease, background 0.15s ease;
}
.auth-submit:hover { background: var(--accent-pressed); }
.auth-submit:active { transform: scale(0.99); }
.auth-submit:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.auth-submit .btn-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  animation: spin 0.7s linear infinite;
}

.auth-switch {
  text-align: center;
  margin-top: 20px;
  font: 400 13px var(--font-ui);
  color: var(--dim);
  background: none;
  border: none;
  width: 100%;
}
.auth-switch a {
  color: var(--accent-ink-text);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.auth-terms {
  text-align: center;
  font: 400 11px var(--font-ui);
  color: var(--dim2);
  margin-top: 28px;
}

.auth-error {
  background: rgba(255, 107, 107, 0.1);
  color: var(--bad);
  padding: 12px 14px;
  border-radius: 12px;
  font: 500 13px var(--font-ui);
  margin-top: 18px;
  border: 1px solid rgba(255, 107, 107, 0.25);
  display: none;
}
.auth-error.show { display: block; }
.auth-success {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-ink-text);
  padding: 12px 14px;
  border-radius: 12px;
  font: 500 13px var(--font-ui);
  margin-top: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  display: none;
  line-height: 1.45;
}
.auth-success.show { display: block; }

/* ─── History ────────────────────────────────────────────────────────────── */

.month-section { margin-top: 14px; }
.month-section:first-child { margin-top: 0; }

.month-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 4px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  text-align: left;
}
.month-header .count {
  color: var(--accent-ink-text);
  font-variant-numeric: tabular-nums;
}
.month-header .sep { color: var(--text-faint); }
.month-header .label { color: var(--text); }
.month-header .chev {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--text-faint);
  transition: transform 0.18s ease;
}
.month-header .chev .wt-icon { width: 16px; height: 16px; }
.month-section:not(.collapsed) .month-header .chev { transform: rotate(90deg); }

.month-body { padding-top: 2px; }
.month-section.collapsed .month-body { display: none; }

/* Swipe-to-delete wrapper: clips the revealed Delete action behind the row. */
.hist-swipe {
  position: relative;
  margin-top: 8px;
  border-radius: 14px;
  overflow: hidden;
}
.hist-swipe .history-row { margin-top: 0; }
.hist-del-action {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: var(--bad);
  color: #fff;
  font: 700 11px var(--font-ui);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.hist-del-action .hist-del-ic { display: flex; }
.hist-del-action .hist-del-ic .wt-icon { width: 20px; height: 20px; }
.hist-swipe .history-row { position: relative; z-index: 1; }

.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  margin-top: 8px;
  gap: 12px;
}
.history-row .left { min-width: 0; flex: 1; }
.history-row .left .day-date {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.history-row .left .meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.history-row .chev {
  color: var(--text-faint);
  display: flex;
  align-items: center;
}
.history-row .chev .wt-icon { width: 18px; height: 18px; }

.history-row.rest {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.05);
  padding: 10px 16px;
  cursor: default;
}
.history-row.rest:active { transform: none; }
.history-row.rest .left .day-date {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-faint);
}
.history-row.rest .left .meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}
.history-row.rest .rest-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* ─── Reports ────────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 16px;
}
.stat .label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.stat .value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat .value.accent { color: var(--accent-ink-text); }
.stat .value.warm { color: var(--warm); }
.stat .sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
/* A stat tile rendered as a <button> — tappable, opens a deep-dive sub-view. */
.stat.stat-clickable {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: block;
  position: relative;
  transition: transform 0.05s ease, border-color 0.15s ease;
}
.stat.stat-clickable:active { transform: scale(0.99); }
.stat.stat-clickable::after {
  content: '›';
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 22px;
  color: var(--text-faint);
  line-height: 1;
}

/* ─── Last-workout comparison sub-view ─────────────────────────────────── */

.cmp-exercise {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 14px 14px 16px;
  margin: 12px 16px;
}
.cmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cmp-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cmp-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cmp-badge--up { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-ink-text); }
.cmp-badge--down { background: rgba(255, 169, 91, 0.12); color: var(--warm); }
.cmp-badge--new { background: rgba(255, 255, 255, 0.04); color: var(--text-faint); }
/* Mini line chart per exercise inside the "Last workout progress" view.
   Same visual language as the weight KPI chart but at a tighter size so
   several exercise cards fit on one mobile screen. Line color encodes the
   trend — green for improvement, warm for regression. */
.cmp-chart {
  margin: 4px -4px 0;
}
.cmp-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.cmp-chart-svg .cmp-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cmp-chart-svg.cmp-line-accent .cmp-line { stroke: var(--accent-ink-text); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),0.35)); }
.cmp-chart-svg.cmp-line-warm   .cmp-line { stroke: var(--warm);   filter: drop-shadow(0 0 4px rgba(255, 169, 91,0.32)); }
.cmp-chart-svg .cmp-line-dot {
  stroke: var(--card);
  stroke-width: 2;
}
.cmp-chart-svg.cmp-line-accent .cmp-line-dot { fill: var(--accent); }
.cmp-chart-svg.cmp-line-warm   .cmp-line-dot { fill: var(--warm); }
.cmp-chart-svg .wc-pt { opacity: 0.65; }
.cmp-chart-svg.cmp-line-accent .wc-pt { fill: var(--accent); }
.cmp-chart-svg.cmp-line-warm   .wc-pt { fill: var(--warm); }

.cmp-chart-meta {
  display: flex;
  justify-content: space-between;
  margin: 4px 4px 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cmp-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 12px;
  background: var(--bg-elev);
  border-radius: 12px;
  margin: 4px 0 0;
}
.cmp-chart-empty-v {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cmp-chart-empty-sub {
  font-size: 11px;
  color: var(--text-faint);
}

.cmp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.cmp-footer .cmp-prev-date { color: var(--text-faint); }

/* ─── Workout frequency card (Reports tab) ──────────────────────────────── */

.freq-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
}

/* ── GitHub-style workout heatmap (last 16 weeks) ── */
.fh-wrap { margin-top: 14px; }
.fh-months {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px;
  margin-left: 30px; margin-bottom: 5px;
  font: 400 9px var(--font-mono); color: var(--dim2); letter-spacing: 0.5px;
}
.fh-months span { white-space: nowrap; overflow: visible; }
.fh-body { display: flex; gap: 6px; align-items: stretch; }
.fh-days {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 24px; flex: none; padding: 1px 0;
  font: 400 9px var(--font-mono); color: var(--dim2);
}
.fh-grid {
  flex: 1; display: grid;
  grid-template-rows: repeat(7, 1fr); grid-auto-flow: column;
  grid-auto-columns: 1fr; gap: 3px;
}
.fh-cell { display: block; aspect-ratio: 1 / 1; border-radius: 3px; background: #1d2027; }
.fh-cell.on { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.22); }
.fh-cell.future { background: transparent; }
.fh-wrap { margin-bottom: 4px; }
/* Right-aligned metric with a small label on top (freq + weekly cards). */
.rp-metric-block { text-align: right; flex: none; }

.freq-filter {
  display: flex;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 4px;
}
.freq-filter button {
  flex: none;
  background: none;
  border: none;
  color: var(--dim);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.freq-filter button.active {
  background: var(--panel2);
  color: var(--accent-ink-text);
  box-shadow: none;
}

.freq-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}
.freq-display .num {
  font-size: 56px;
  font-weight: 800;
  color: var(--accent-ink-text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.freq-display .slash {
  font-size: 36px;
  font-weight: 600;
  color: var(--text-faint);
}
.freq-display .denom {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.02em;
}

.freq-meta {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 14px;
}

.freq-bar {
  height: 8px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
}
.freq-bar .fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), #8fd400);
  border-radius: 999px;
  transition: transform 0.3s ease;
}

.freq-pct {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

/* Wrap around the sliding stats panel. position:relative + overflow:hidden
   clips the sliding panels to the card's inner area; the outgoing clone
   stacks on top of the incoming panel via position:absolute during the
   animation. The wrap's height is driven by the currently-mounted panel,
   so the card never collapses. */
.freq-panel-wrap {
  position: relative;
  overflow: hidden;
}
.freq-panel-wrap > .freq-panel.leaving {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
/* Peek panel for finger-follow drag — sits absolutely beside the current
   panel (offset by inline style) and translates in lockstep with the finger. */
.freq-panel-wrap > .freq-panel.peek {
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.exercise-picker {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-input);
  padding: 14px;
  color: var(--text);
  font-size: 15px;
  width: 100%;
  margin: 12px 0;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238a8a9c' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 36px;
}

.chart {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 18px;
  margin-top: 8px;
}
.chart .chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.chart .chart-title { font-size: 13px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.chart .chart-latest { font-size: 22px; font-weight: 800; color: var(--accent-ink-text); font-variant-numeric: tabular-nums; }

.bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.bar-row .date { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.bar-row .bar-track {
  height: 10px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.bar-row .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), #8fd400);
  border-radius: 999px;
}
.bar-row .vol { color: var(--text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.improvement-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.improvement-pill.up { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-ink-text); }
.improvement-pill.down { background: rgba(255, 77, 109, 0.15); color: var(--danger); }
.improvement-pill.flat { background: var(--bg-elev); color: var(--text-muted); }

/* ─── Per-exercise progress (redesign) ───────────────────────────────────── */

.ex-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.ex-kpi {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px 14px;
}
.ex-kpi .k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ex-kpi .v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ex-kpi-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}
.ex-kpi .sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ex-chart-card { margin-top: 14px; }
.ex-chart-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 0;
  font-size: 12px;
}
.ex-chart-trend-label { color: var(--text-faint); }
.weight-kpi-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bg-elev);
  color: var(--text-muted);
}
.weight-kpi-tag.up { background: rgba(var(--accent-rgb), 0.14); color: var(--accent-ink-text); }
.weight-kpi-tag.down { background: rgba(255, 169, 91, 0.14); color: var(--warm); }
.weight-kpi-tag.flat { background: var(--bg-elev); color: var(--text-muted); }

.ex-sessions-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 22px 4px 10px;
}
.ex-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ex-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  gap: 10px;
}
.ex-session-left { display: flex; flex-direction: column; gap: 2px; }
.ex-session-date {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ex-session-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ─── Weight tracker ────────────────────────────────────────────────────── */

.weight-hero {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 22px 20px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.weight-hero::after {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  width: 220px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.weight-hero .wh-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  position: relative;
}
.weight-hero .wh-value {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.weight-hero .wh-value .wh-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0;
}
.weight-hero .wh-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  position: relative;
}
/* Body-weight changes are intentionally neutral — we don't know whether the
   user's goal is to gain or lose, so coloring "up" red or "down" green would
   misrepresent intent. Same neutral palette for all directions. */
.weight-hero .wh-trend.up,
.weight-hero .wh-trend.down,
.weight-hero .wh-trend.flat  { background: var(--bg-elev); color: var(--text-muted); }
.weight-hero .wh-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 8px;
  position: relative;
}

.weight-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.weight-kpi {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px 14px;
}
.weight-kpi .k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.weight-kpi .v {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.weight-kpi .v.up,
.weight-kpi .v.down,
.weight-kpi .v.flat { color: var(--text); }
.weight-kpi .v.empty { color: var(--text-faint); font-weight: 600; font-size: 16px; }
.weight-kpi .sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.weight-log-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px;
  margin-top: 16px;
}
.weight-log-card .wl-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.weight-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.weight-log-row .num-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elev);
  border: 1.5px solid transparent;
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}
.weight-log-row .num-input::-webkit-outer-spin-button,
.weight-log-row .num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.weight-log-row .num-input:focus {
  border-color: var(--accent-ink-text);
  background: #1e2127;
}
.weight-log-row .unit-suffix {
  position: absolute;
  pointer-events: none;
}
.weight-log-row .save-btn {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.weight-log-row .save-btn:active { transform: scale(0.96); }
.weight-log-row .save-btn:disabled {
  background: var(--bg-elev);
  color: var(--text-faint);
  box-shadow: none;
}

.weight-chart-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px 12px 10px;
  margin-top: 14px;
}
.weight-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 10px;
}
.weight-chart-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.weight-chart-ranges {
  display: inline-flex;
  background: var(--bg-elev);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.chart-pill {
  background: transparent;
  border: none;
  color: var(--text-faint);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.chart-pill.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.weight-chart-body {
  width: 100%;
}
.weight-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.weight-chart-svg .wc-grid {
  stroke: var(--border-soft);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.weight-chart-svg .wc-line {
  fill: none;
  stroke: var(--accent-ink-text);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
.weight-chart-svg .wc-dot {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 2;
}
.weight-chart-svg .wc-pt {
  fill: var(--accent);
  opacity: 0.7;
}
.weight-chart-svg .wc-axis {
  fill: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
/* Body-weight chart is colour-neutral (design.md hard rule): no green, so the
   chart never implies up=good / down=bad. Only the body-weight SVG carries the
   .wc-neutral modifier; the exercise volume chart keeps the volt accent. */
.weight-chart-svg.wc-neutral .wc-line { stroke: #c9ced6; filter: none; }
.weight-chart-svg.wc-neutral .wc-dot { fill: #c9ced6; }
.weight-chart-svg.wc-neutral .wc-pt { fill: #c9ced6; }
/* Ambient accent pulse travelling along the trend line, dot to dot. The
   pathLength="100" attribute normalises the dash units so one dash cycle
   equals one full traversal regardless of the real path length. */
.weight-chart-svg .wc-pulse {
  fill: none;
  stroke: var(--accent-ink-text);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 12 88;
  stroke-dashoffset: 112;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  /* Slow, breathing traversal — gentle acceleration into the line and an
     unhurried exit reads as crafted rather than mechanical. */
  animation: wcPulse 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes wcPulse { to { stroke-dashoffset: -88; } }
@media (prefers-reduced-motion: reduce) {
  .weight-chart-svg .wc-pulse { display: none; }
}
.weight-chart-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

.weight-history-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 22px 4px 10px;
}
/* History gets its own scroll box so a long log doesn't stretch the whole
   page. Infinite-scroll paging is rooted at this container (see app.js). */
.weight-history-scroll {
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 2px 4px;
  margin: 0 -2px;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.weight-history-scroll::-webkit-scrollbar { width: 7px; }
.weight-history-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.weight-history-scroll::-webkit-scrollbar-track { background: transparent; }
.weight-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.weight-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 14px;
}
.weight-entry .we-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.weight-entry .we-weight {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.weight-entry .we-date {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.weight-entry .we-delta {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.weight-entry .we-delta.flat { background: var(--bg-elev); color: var(--text-muted); }
.weight-entry .we-delta.up { background: rgba(255, 155, 155, 0.10); color: #e6a5a5; }
.weight-entry .we-delta.down { background: rgba(140, 220, 170, 0.10); color: #96d9b4; }
.weight-entry .we-delta .we-arrow { font-weight: 700; opacity: 0.85; margin-right: 1px; }
.weight-entry .we-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.weight-entry .we-delete {
  background: transparent;
  border: none;
  color: var(--text-faint);
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}
.weight-entry .we-delete:active { color: var(--danger, #ff5a5a); }

.weight-empty {
  background: var(--card);
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Invisible target watched by IntersectionObserver to trigger lazy-loading
   the next batch of history entries when the user scrolls near the bottom. */
.weight-load-sentinel {
  height: 1px;
  margin-top: 4px;
}

/* ═══ Weight page redesign (v51) — Ironclad, aligned, information-forward ════ */
.wt-head { display: flex; align-items: center; gap: 14px; padding: 0 2px; margin-bottom: 16px; }
.wt-eyebrow { font: 400 12px var(--font-mono); letter-spacing: 2px; color: var(--dim); }
.wt-title { margin: 0; font: 700 28px var(--font-ui); letter-spacing: -0.6px; }

/* Current hero — left-aligned gradient card (matches Today hero / session detail). */
.wt-hero {
  background: linear-gradient(155deg, #1b1d23, #111216);
  border: 1px solid var(--line2); border-radius: 20px; padding: 20px;
  position: relative; overflow: hidden;
}
.wt-hero::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.10), transparent 70%); pointer-events: none;
}
.wt-hero-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wt-hero-k { font: 400 10px var(--font-mono); letter-spacing: 1px; color: var(--dim); }
/* Current weight is the page's hero number — volt, with a hand-tuned
   entrance: rise + blur settle here, count-up in JS (animateWeightHero). */
.wt-hero-v {
  font: 700 42px var(--font-mono); letter-spacing: -1px; line-height: 1; margin-top: 6px;
  color: var(--accent-ink-text);
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.22);
  animation: wtHeroIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.wt-hero-v .u { font-size: 16px; color: var(--dim); margin-left: 4px; letter-spacing: 0; text-shadow: none; }
@keyframes wtHeroIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wt-hero-v { animation: none; }
}
/* Body-weight direction stays colour-neutral (no green/red) — hard rule. */
.wt-hero-delta {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
  font: 500 14px var(--font-mono); color: var(--text); white-space: nowrap;
}
.wt-hero-delta .lbl { font: 400 9px var(--font-mono); color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }
.wt-hero-sub { position: relative; font: 400 12px var(--font-ui); color: var(--dim); margin-top: 12px; }

/* Log entry row. */
.wt-log { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-top: 12px; }
.wt-log-label { display: block; font: 500 10px var(--font-mono); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; margin-bottom: 10px; }
.wt-log-row { display: flex; gap: 10px; align-items: stretch; }
.wt-log-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px;
  transition: border-color 0.15s ease;
}
.wt-log-field:focus-within { border-color: var(--accent-ink-text); }
.wt-log-field input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text);
  font: 700 20px var(--font-mono); -moz-appearance: textfield; padding: 0;
}
.wt-log-field input::-webkit-outer-spin-button, .wt-log-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wt-log-field input::placeholder { color: var(--dim2); }
.wt-log-unit { flex: none; font: 500 14px var(--font-mono); color: var(--dim); }
.wt-log-save {
  flex: none; background: var(--accent); color: var(--ink); border: none; border-radius: 12px;
  padding: 0 22px; font: 700 14px var(--font-ui); cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), 0.5); transition: background 0.15s ease, transform 0.05s ease;
}
.wt-log-save:hover { background: var(--accent-pressed); }
.wt-log-save:active { transform: scale(0.97); }
.wt-log-save:disabled { background: var(--panel2); color: var(--dim2); box-shadow: none; cursor: not-allowed; }

/* Stat cards — one consistent, left-aligned template (label / value / sub). */
.wt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.wt-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.wt-stat-k { font: 400 10px var(--font-mono); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.wt-stat-v { font: 700 22px var(--font-mono); letter-spacing: -0.5px; margin-top: 8px; color: var(--text); white-space: nowrap; }
.wt-stat-v.empty { color: var(--dim2); font-size: 18px; }
/* Directional arrows on the change KPIs — same tints as the history delta
   chips (up = red, down = green); the number itself stays neutral. */
.wt-stat-arrow { font-weight: 700; margin-right: 3px; }
.wt-stat-v.up .wt-stat-arrow { color: #e6a5a5; }
.wt-stat-v.down .wt-stat-arrow { color: #96d9b4; }
.wt-stat-sub { font: 400 11px var(--font-ui); color: var(--dim2); margin-top: 3px; }

/* Chart card. */
.wt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 14px 12px; margin-top: 12px; }
.wt-card-head { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 12px; }
.wt-card-title { font: 600 13px var(--font-ui); color: var(--text); }
.wt-ranges { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; }
.wt-ranges .chart-pill { text-transform: none; letter-spacing: 0; font: 600 11px var(--font-ui); padding: 6px 11px; border-radius: 8px; }
.wt-ranges .chart-pill.active { background: var(--accent); color: var(--ink); box-shadow: none; }

.wt-history-head { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 2px 12px; }
.wt-history-count { font: 400 11px var(--font-mono); color: var(--dim); }

/* Refined history rows to match the Ironclad card language. */
.weight-entry { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.weight-entry .we-weight { font: 700 16px var(--font-mono); letter-spacing: -0.3px; }
.weight-entry .we-date { font: 400 11px var(--font-mono); color: var(--dim); margin-top: 2px; }
.weight-entry .we-delta { background: var(--bg); border: 1px solid var(--line); color: var(--dim); font: 500 12px var(--font-mono); }
.weight-entry .we-delete { color: var(--dim2); font-size: 15px; cursor: pointer; transition: color 0.15s ease; }
.weight-entry .we-delete:hover { color: var(--bad); }

/* ─── Profile ────────────────────────────────────────────────────────────── */

.profile-card {
  text-align: center;
  padding: 28px 20px;
}
.profile-card .avatar { width: 72px; height: 72px; font-size: 24px; margin: 0 auto 14px; }
.profile-card .name { font-size: 22px; font-weight: 800; }
.profile-card .email { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

.row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.row:last-child { border-bottom: none; }
.row .k { color: var(--text-muted); font-size: 14px; }
.row .v { font-weight: 700; }

/* ─── Empty / loading states ─────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty .wt-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  opacity: 0.5;
  stroke-width: 1.5;
}
.empty .title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty .sub { font-size: 13px; }

.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent-ink-text);
  border-radius: 50%;
  margin: 40px auto;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Skeleton loading ───────────────────────────────────────────────────── */
.skel-page { animation: skel-fade 0.2s ease both; }
@keyframes skel-fade { from { opacity: 0; } to { opacity: 1; } }
.skel {
  position: relative;
  overflow: hidden;
  background: var(--panel2, #1b1e24);
  border-radius: 7px;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  animation: skel-shimmer 1.25s ease-in-out infinite;
}
.skel.circle { border-radius: 50%; }
.skel-text {
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-width: 120px;
  height: 1em;
  vertical-align: middle;
  border-radius: 6px;
  background: var(--panel2, #1b1e24);
  color: transparent !important;
}
.skel-text::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  animation: skel-shimmer 1.25s ease-in-out infinite;
}
#member-since.skel-text { min-width: 80px; }
#profile-email.skel-text { min-width: 160px; }
.skel-line { height: 12px; }
.skel-lines { display: flex; flex-direction: column; gap: 9px; }
.skel-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.skel-row { display: flex; align-items: center; gap: 13px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
@keyframes skel-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Toast anchored above the tab bar so it doesn't collide with the day name
   that sits at the top of focus mode. "Signal badge" pattern: a circular
   badge whose ring sweeps and check/x strokes itself in, next to a Source Sans 3
   kicker + the message — an instrument-HUD seal of confirmation. */
.toast {
  position: fixed;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 28px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(360px, calc(100vw - 32px));
  background: rgba(14, 15, 19, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  padding: 11px 18px 11px 12px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  /* Above cardio full-screen takeovers (300) and modals (400) so a toast fired
     from a cardio screen or a modal action is still visible. */
  z-index: 420;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.connectivity-banner-visible .toast {
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 88px);
}

/* badge — ring + drawn glyph */
.toast-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
}
.toast-ring { position: absolute; inset: 0; }
.toast-ring circle {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: center;
}
.toast-glyph { width: 17px; height: 17px; position: relative; z-index: 1; }
.toast-glyph polyline,
.toast-glyph line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

/* text block — mono kicker + message */
.toast-tx { min-width: 0; }
.toast-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.2;
}
.toast-msg {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* gap under the kicker only when one is present (error toasts); a lone
   success message stays vertically centred against the badge */
.toast-kicker + .toast-msg { margin-top: 2px; }

/* kind states */
.toast.success .toast-ring circle { stroke: var(--accent-ink-text); }
.toast.success .toast-glyph { color: var(--accent-ink-text); }
.toast.neutral .toast-ring circle { stroke: var(--warm); }
.toast.neutral .toast-glyph { color: var(--warm); }
.toast-neutral-dot { fill: currentColor; stroke: none; }
.toast.error .toast-ring circle { stroke: var(--danger); }
.toast.error .toast-glyph { color: var(--danger); }

/* draw-on: ring sweeps, then the glyph strokes itself in */
.toast.show .toast-ring circle { animation: toast-ring 0.5s ease 0.08s forwards; }
.toast.show .toast-glyph polyline,
.toast.show .toast-glyph line { animation: toast-draw 0.34s ease 0.3s forwards; }
@keyframes toast-ring { to { stroke-dashoffset: 0; } }
@keyframes toast-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.15s ease; }
  .toast-ring circle,
  .toast-glyph polyline,
  .toast-glyph line { stroke-dashoffset: 0; animation: none !important; }
}

/* ─── PR celebration ─────────────────────────────────────────────────────── */

.pr-burst {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.22), rgba(12, 13, 16, 0.20) 34%, rgba(12, 13, 16, 0.62) 72%),
    rgba(5, 6, 8, 0.42);
  backdrop-filter: blur(5px);
  animation: pr-bg-in 0.28s ease both;
}
.pr-burst.out { animation: pr-bg-out 0.32s ease forwards; }
@keyframes pr-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pr-bg-out { to { opacity: 0; } }

.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(86vw, 360px);
  min-height: 286px;
  padding: 24px 24px 26px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.02) 38%),
    linear-gradient(155deg, rgba(27, 29, 35, 0.96), rgba(10, 11, 14, 0.98));
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 70px rgba(0, 0, 0, 0.72),
    0 18px 70px rgba(var(--accent-rgb), 0.13);
  animation: pr-pop 0.5s cubic-bezier(0.18, 0.9, 0.24, 1.2) both;
  cursor: pointer;
}
.pr-burst.out .pr-card { animation: pr-card-out 0.3s ease forwards; }
@keyframes pr-pop {
  0% { opacity: 0; transform: scale(0.6) translateY(8px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pr-card-out { to { opacity: 0; transform: scale(0.94) translateY(-6px); } }

.pr-stage {
  position: relative;
  width: 124px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pr-ring {
  position: absolute;
  inset: 2px auto auto 50%;
  margin-left: -56px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: pr-ring 0.9s ease-out 0.05s;
}
@keyframes pr-ring {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.7); }
}

.pr-badge {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #0c0d10;
  box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.12), 0 16px 46px rgba(var(--accent-rgb), 0.36);
  animation: pr-badge-glow 1.4s ease-in-out infinite alternate;
}
.pr-badge svg { width: 43px; height: 43px; stroke-width: 2.1; }
@keyframes pr-badge-glow {
  from { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.10), 0 14px 40px rgba(var(--accent-rgb), 0.28); }
  to { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0.05), 0 18px 52px rgba(var(--accent-rgb), 0.42); }
}

.pr-kicker {
  margin-top: 6px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-ink-text);
}
.pr-ex {
  margin-top: 10px;
  font: 700 24px/1.12 var(--font-ui, inherit);
  letter-spacing: -0.3px;
  color: var(--text);
  max-width: 100%;
  text-wrap: balance;
}
.pr-val {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font: 700 16px/1 var(--font-mono);
  color: var(--text);
}
.pr-val .pr-unit { margin-left: 4px; font-weight: 400; font-size: 12px; }

.pr-spark {
  position: absolute;
  top: 52px;
  left: 50%;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  animation: pr-spark 0.7s ease-out 0.06s;
}
.pr-spark.s1 { transform: translate(-50%, 0) rotate(20deg); }
.pr-spark.s2 { transform: translate(-50%, 0) rotate(-20deg); }
.pr-spark.s3 { transform: translate(-50%, 0) rotate(55deg); }
.pr-spark.s4 { transform: translate(-50%, 0) rotate(-55deg); }
@keyframes pr-spark {
  0% { opacity: 0.9; height: 6px; }
  100% { opacity: 0; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-burst, .pr-card, .pr-ring, .pr-badge, .pr-spark { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .pr-badge { animation: none; }
}

/* ─── Confirm modal ──────────────────────────────────────────────────────── */

.modal-host { /* container only; positioning lives on .modal-overlay */ }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 12, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Above the cardio full-screen takeovers (.cardio-screen z-index:300) and
     onboarding (300) so a confirm dialog is always reachable, never trapped
     behind an overlay. */
  z-index: 400;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.modal-overlay.show { opacity: 1; }
.modal-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 22px 22px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.modal-overlay.show .modal-card { transform: translateY(0) scale(1); }
.modal-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.modal-body {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.45;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.modal-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.05s ease, background 0.15s ease;
}
.modal-btn:active { transform: scale(0.97); }
.modal-btn-confirm {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.modal-btn-confirm.danger {
  background: var(--danger, #ff5a5a);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 90, 90, 0.32);
}

/* ─── Tab views ──────────────────────────────────────────────────────────── */

.view { display: none; }
.view.active { display: block; }
/* Interactive swipe-back: the moving sub-view carries a left-edge shadow so it
   reads as a card lifting off the screen beneath it. Set inline transform by JS. */
.view.swiping-back { box-shadow: -12px 0 28px rgba(0, 0, 0, 0.4); will-change: transform; }

/* Wrapper around all tab views. position:relative makes it the containing
   block for .view.peek / .view.leaving during a tab-swipe drag. No overflow
   clipping here — .app already has overflow-x: hidden, which clips the
   off-screen peek at the card edge. */
.view-stack {
  position: relative;
}
/* Peek / leaving views during a tab drag: force-visible and anchored at the
   top of the stack. left/transform are set inline by JS to mirror the
   freq-panel-wrap pattern. */
.view.peek,
.view.leaving {
  display: block !important;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
}

/* ─── Page transitions (Instagram-style carousel push/pop) ──────────────── */
/* The incoming panel animates in from one side while the outgoing panel
   (a fixed-position clone) slides out the other side, so both move together. */

@keyframes wt-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes wt-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes wt-slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes wt-slide-out-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
/* Spring-feel push with a mild overshoot on the incoming view. The outgoing
   view keeps the plain decel (its overshoot would only push it further
   off-screen). Durations stay in the 0.26-0.34s crisp band. */
.slide-in-right  { animation: wt-slide-in-right  0.3s cubic-bezier(0.34, 1.3, 0.64, 1); }
.slide-in-left   { animation: wt-slide-in-left   0.3s cubic-bezier(0.34, 1.3, 0.64, 1); }
.slide-out-left  { animation: wt-slide-out-left  0.28s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.slide-out-right { animation: wt-slide-out-right 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }

/* Desktop page-switch motion: a seamless fade + gentle upward rise (design
   system fadeUp), used instead of the horizontal carousel because the desktop
   nav is a vertical rail. Applied to the incoming view by playSlide(). */
@keyframes wt-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.page-fade-up { animation: wt-fade-up 0.26s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .page-fade-up { animation: none; }
  /* popIn restored as a spring entrance — keep reduced-motion users at the
     previous no-entrance behaviour. */
  .day-sheet, .chooser-sheet, .picker-sheet, .exform-sheet,
  .set.active, .cardio-screen { animation: none; }
}

.wt-transition-clone {
  margin: 0 !important;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  box-shadow: -12px 0 24px rgba(0, 0, 0, 0.35);
}

/* ─── Tablet range (7-inch tablets, 640–919px) ──────────────────────────────
   Between the 480px mobile column and the 920px two-column dashboard sits a
   dead zone: a 7" tablet (~800px CSS) shows the cramped mobile strip marooned
   in ~160px of dead margin each side, and the floating mic FAB (right:16px)
   detaches to the far viewport edge. Widen the single centered column to
   ~600px so it fills the space and reads well, and pull every viewport-fixed
   bar/FAB in to line up with that column's edges. Purely a re-centering — the
   mobile-first component layout above is otherwise untouched, and nothing
   here affects the >=920 dashboard or the >=1024 sidebar. */
@media (min-width: 640px) and (max-width: 919px) {
  .app { max-width: 600px; }
  /* Floating bars re-center to match the wider column (they cap via max-width;
     their calc(100% - Npx) keeps a gutter on the narrowest tablets). */
  .tabbar { max-width: 520px; }
  .trk-nav { max-width: 516px; }
  .focus-nav-fixed { max-width: 512px; }
  /* Mic FAB + hint sit just inside the column's right edge (col is 600px wide,
     centered → right edge = 50% + 300px; offset 16px in from there), instead
     of hugging the viewport edge far from the content. */
  .mic-fab, .mic-hint { right: calc(50% - 284px); }
}

/* ─── Desktop / wide-screen layout (consistent full-width) ──────────────────
   Below 920px the mobile-first layout above is untouched. At >=920px every
   browsing view spreads its cards into two columns so the whole app uses the
   width consistently, instead of a narrow strip. */
@media (min-width: 920px) {
  .app {
    max-width: 1080px;
    padding-left: 28px;
    padding-right: 28px;
  }

  /* Detail sub-views drilled into from the main tabs (comparison from Reports,
     session detail from History, splits manager/editor/day editor from Profile,
     the active-workout tracker) match the 880px main-view width so the column
     doesn't jump when you drill in. Single centered column, not a wide masonry. */
  #comparison-content,
  #session-content,
  #ai-report-content,
  #splits-content,
  #split-editor-content,
  #day-editor-content,
  .focus,
  .finish-done {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Main tab views (Today, History, Reports, Weight, Profile) all center at
     ONE shared desktop width so switching tabs never jumps the column. 880px
     fits Reports' 2-col dashboard rows and still reads well single-column. */
  #today-content { max-width: 880px; margin-left: auto; margin-right: auto; }

  /* Weight: centered column, with the four stat cards in one aligned row. */
  #weight-content { max-width: 880px; margin-left: auto; margin-right: auto; }
  #weight-content .wt-stats { grid-template-columns: repeat(4, 1fr); }

  /* Reports: a real dashboard — KPIs 4-across, frequency + split side by side. */
  #reports-content { max-width: 880px; margin-left: auto; margin-right: auto; }
  #reports-content .rp-kpis { grid-template-columns: repeat(4, 1fr); }
  #reports-content .rp-two { grid-template-columns: 1.15fr 1fr; align-items: start; }
  #reports-content .rp-trend-svg { height: 220px; }

  /* HISTORY: full-width day rows so each card matches the month header /
     divider width (a lone card in a 2-col grid looked half-width). */
  #view-history > .section { max-width: 880px; margin-left: auto; margin-right: auto; }

  /* REPORTS: frequency + stats side by side; per-exercise progress full width. */
  .reports-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 22px;
    align-items: start;
  }
  .report-block--wide { grid-column: 1 / -1; }
  .reports-grid .report-block > .section-title:first-child { margin-top: 8px; }

  /* PROFILE: same shared tab-view width as the rest (see #profile-content too). */
  #view-profile > .section { max-width: 880px; margin-left: auto; margin-right: auto; }

  /* ACTIVE-WORKOUT FOCUS: shares the standard 880px column (see the grouped
     sub-view rule above). The fixed prev/next bars (.trk-nav /
     .focus-nav-fixed) stay at their own narrower max-width, centered on the
     same axis — control bars, not content. */
}

/* ─── Ironclad design refresh (v39) ──────────────────────────────────────────
   Source Sans 3 for every numeric readout, stat value and mono micro-label, so
   numbers read as the data-hero the design system calls for. Source Sans 3 is
   already the base UI face (see :root --font-ui). */
.exercise-list .num, .exercise-list .target,
.focus-card .ex-target, .focus-card .last-summary,
.set .set-label, .set .set-meta, .set .num-input,
.detail-top .day-info .day-meta, .detail-stats .stat .v, .detail-exercise .set-line,
.month-header .count, .history-row .left .day-date,
.stat .value, .cmp-badge, .cmp-chart-meta, .cmp-chart-empty-v, .cmp-footer,
.freq-display, .freq-pct,
.chart .chart-latest, .bar-row .date, .bar-row .vol, .improvement-pill,
.ex-kpi .v, .ex-kpi .sub, .weight-kpi-tag, .ex-session-meta,
.weight-hero .wh-value, .weight-hero .wh-trend, .weight-kpi .v, .weight-kpi .sub,
.weight-log-row .num-input, .weight-chart-svg .wc-axis,
.weight-entry .we-weight, .weight-entry .we-date, .weight-entry .we-delta,
.day-hero .label, .topbar .greeting, .day-picker .day-pill,
.detail-exercise .set-line .drop-tail {
  font-family: var(--font-mono);
}
/* Mono letter-spacing looks best a touch loose on the small uppercase labels. */
.set .set-label, .day-hero .label, .topbar .greeting { letter-spacing: 0.08em; }

/* Login-page WT monogram inside the brand tile. */
.brand .logo .wt-monogram { font: 700 26px var(--font-mono); color: var(--ink); letter-spacing: -0.5px; }

/* Category dot colours for session type (push/pull/legs) if used by markup. */
.dot-push { background: var(--push); }
.dot-pull { background: var(--pull); }
.dot-legs { background: var(--legs); }

/* ─── Desktop left sidebar (>=1024px) ────────────────────────────────────────
   Above the wide breakpoint the floating bottom tab bar becomes a fixed 244px
   left rail (matching the desktop design), and the app content flows to its
   right. Below 1024px the mobile bottom bar is untouched. */
@media (min-width: 1024px) {
  .app {
    margin-left: 244px;
    max-width: 1180px;
    padding-top: 24px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .tabbar {
    left: 0;
    top: 0;
    bottom: 0;
    transform: none;
    width: 244px;
    max-width: 244px;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 3px;
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 22px 16px;
  }
  /* Brand header only shows in the desktop rail. */
  .tabbar .tabbar-brand { display: flex; }

  .tabbar button {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--dim);
  }
  .tabbar button .wt-icon { width: 20px; height: 20px; }
  .tabbar button.active { color: var(--text); background: var(--panel2); }
  .tabbar button.active .wt-icon { filter: none; }

  /* Fixed focus controls re-center within the content region (right of rail). */
  .focus:has(.warmup) { min-height: calc(100svh - 96px); }
  .focus-nav-fixed { left: calc(50% + 122px); }
  .trk-nav { left: calc(50% + 122px); }
  .connectivity-banner {
    left: calc(50% + 122px);
    bottom: 20px;
    max-width: 560px;
  }
  body.connectivity-banner-visible .toast { bottom: 76px; }
  /* Sticky Start tracks the Today column width; Finish's Done CTA tracks the
     shared 880px column too (grouped sub-view rule in the 920px block). */
  .today-start { max-width: 880px; margin-left: auto; margin-right: auto; }
  .focus .discard-link { left: calc(50% + 122px); }
}

/* Brand lives in the nav markup but is hidden on mobile. */
.tabbar-brand { display: none; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.tabbar-brand .wt-mono {
  width: 34px; height: 34px; border-radius: 10px;
  display: block; object-fit: cover;
  border: 1px solid var(--line); flex: none;
}
.tabbar-brand .wt-word { font: 700 15px var(--font-ui); letter-spacing: -0.2px; color: var(--text); }

/* ═══ Mobile app redesign (v42) — Today / Tracker / Finish, per designer ═══════
   Faithful to design/Workout Tracker Web App/Workout Tracker.dc.html (mobile). */

/* ── TODAY ─────────────────────────────────────────────────────────────────── */
.today-head { display: flex; justify-content: space-between; align-items: center; }
.today-kicker { font: 700 11px/1 var(--font-mono); letter-spacing: 2px; color: var(--accent-ink-text); }
.today-greet { font: 700 19px/1.15 var(--font-ui); letter-spacing: -0.3px; color: var(--text); }
.today-greet-name { color: var(--accent-ink-text); }
.today-date { font: 400 12px var(--font-ui); color: var(--dim); margin-top: 6px; }
.up-next-label { font: 600 12px var(--font-ui); color: var(--dim); margin: 20px 0 11px; }

/* day-hero already exists; retune to the design's exact proportions. */
.day-hero .hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.day-hero .day-name { font-size: 38px; line-height: 0.9; letter-spacing: -1.2px; margin: 0; }
.day-hero .day-meta { font: 400 12px var(--font-mono); color: var(--dim); margin-top: 9px; letter-spacing: 0.02em; }
.cycle-pips { display: flex; gap: 5px; margin-top: 18px; }
.cycle-pip { flex: 1; height: 5px; border-radius: 3px; background: #2a2d34; }
.cycle-pip.done { background: var(--accent); }
.cycle-pip.current { background: var(--accent); }

.today-ex-head { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 4px; }
.today-ex-title { font: 600 12px var(--font-ui); color: var(--dim); letter-spacing: 0.02em; }
.today-ex-actions { display: inline-flex; align-items: center; gap: 14px; }
.today-edit-day {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 0;
  border: none; background: none; color: var(--dim); cursor: pointer;
  font: 600 12px var(--font-ui); transition: color 0.15s ease;
}
.today-edit-day .wt-icon { width: 13px; height: 13px; }
.today-edit-day:hover { color: var(--accent-ink-text); }
.switch-day-link { font: 600 12px var(--font-ui); color: var(--accent-ink-text); background: none; border: none; cursor: pointer; padding: 4px 0; }
.today-ex-list { display: flex; flex-direction: column; }
.today-ex-row { display: flex; align-items: center; gap: 13px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.today-ex-row:last-child { border-bottom: none; }
.today-ex-row .n { font: 700 11px var(--font-mono); color: var(--dim2); width: 16px; flex: none; }
.today-ex-row .n.done { color: var(--accent-ink-text); }
.today-ex-row .nm { font: 500 14.5px var(--font-ui); flex: 1; }
.today-ex-row .sc { font: 400 12px var(--font-mono); color: var(--dim); white-space: nowrap; }

/* In normal flow right after the exercise list (was sticky — it floated over
   the last rows and left dead scroll space). */
.today-start { margin-top: 22px; }
.today-start .btn-start {
  width: 100%; background: var(--accent); color: var(--ink); border: none;
  border-radius: 17px; padding: 17px; font: 700 17px var(--font-ui);
  box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.5); cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease;
}
.today-start .btn-start:active { transform: scale(0.99); }
.today-start .btn-start:hover { background: var(--accent-pressed); }

/* Quick cardio entry under the Start button: opens the GPS type picker. */
.cardio-start-link {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  background: none; border: none; cursor: pointer;
  font: 600 13.5px var(--font-ui); letter-spacing: 0.2px; color: var(--dim);
  transition: color 0.15s ease;
}
.cardio-start-link:hover { color: var(--accent-ink-text); }

/* ── SWITCH-DAY SHEET ──────────────────────────────────────────────────────── */
.sheet-scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeScrim 0.2s ease;
}
@keyframes fadeScrim { from { opacity: 0; } to { opacity: 1; } }
/* Shared entrance for sheets / active-set card / full-screen takeovers. A
   subtle scale + fade; the spring easing on the sheet declarations gives the
   mild overshoot pop. Gated out under prefers-reduced-motion below. */
@keyframes popIn { from { transform: scale(0.985); opacity: 0.6; } to { transform: none; opacity: 1; } }
.day-sheet {
  width: 100%; max-width: 480px; background: var(--panel);
  border-radius: 26px 26px 0 0; padding: 22px 20px calc(26px + var(--safe-bottom));
  animation: popIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* Drag-to-dismiss grab handle (injected into every bottom sheet by setupSheetDrag). */
.sheet-grab {
  width: 36px; height: 4px; border-radius: 999px; flex: none;
  background: var(--dim2); opacity: 0.5; margin: -8px auto 12px;
}
.day-sheet-title { font: 700 19px var(--font-ui); letter-spacing: -0.3px; }
.day-sheet-sub { font: 400 13px var(--font-ui); color: var(--dim); margin-top: 6px; }
.day-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.day-sheet-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: 13px;
  padding: 15px 8px; text-align: center; cursor: pointer;
  font: 600 13px var(--font-ui); color: var(--text); transition: border-color 0.15s ease, background 0.15s ease;
}
.day-sheet-item .di-tag { display: block; font: 700 10px var(--font-mono); color: var(--dim2); margin-top: 5px; letter-spacing: 1px; }
.day-sheet-item.active { border-color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.08); }
.day-sheet-item.active .di-tag { color: var(--accent-ink-text); }
/* Rest days sit in the grid dimmed with a moon glyph — still selectable so the
   user can pin one and land on the rest screen. */
.day-sheet-item.rest { opacity: 0.62; border-style: dashed; color: var(--dim); }
.day-sheet-item.rest.active { opacity: 1; }
.day-sheet-item .di-rest {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  text-transform: uppercase;
}
.day-sheet-item .di-rest .wt-icon { width: 11px; height: 11px; }
/* Export-format picker: two stacked full-width options, left-aligned copy,
   subtext long enough that mono/uppercase tag styling doesn't fit. */
.exp-sheet .day-sheet-grid { grid-template-columns: 1fr; }
.exp-sheet .day-sheet-item { text-align: left; padding: 15px 14px; }
.exp-sheet .day-sheet-item .di-tag { font: 400 11.5px var(--font-mono); letter-spacing: 0; text-transform: none; }
.day-sheet-cancel {
  width: 100%; margin-top: 14px; background: none; border: 1px solid var(--line2);
  border-radius: 13px; padding: 13px; font: 600 14px var(--font-ui); color: var(--text); cursor: pointer;
}

/* AI target explainer (reuses the .day-sheet base) */
.coach-why-sheet { position: relative; padding-top: 24px; }
.coach-why-sheet .cwhy-close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--line2);
  border-radius: 12px; background: var(--panel2); color: var(--dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.coach-why-sheet .cwhy-close .wt-icon { width: 16px; height: 16px; }
.coach-why-sheet .cwhy-kicker {
  padding-right: 46px;
  font: 700 10px var(--font-mono); letter-spacing: 1.7px; color: var(--dim);
}
.coach-why-sheet .cwhy-target {
  margin-top: 10px; padding-right: 46px;
  font: 800 29px/1.15 var(--font-mono); letter-spacing: -0.8px;
  color: var(--accent-ink-text);
}
.coach-why-sheet .cwhy-target .ac-u {
  margin-left: 3px; font-size: 12px; letter-spacing: 0; color: inherit;
}
.coach-why-sheet .cwhy-reason {
  margin-top: 12px; font: 400 14.5px/1.5 var(--font-ui); color: var(--text);
}
.coach-why-sheet .cwhy-climb {
  list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px;
}
.coach-why-sheet .cwhy-climb li {
  min-height: 44px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--bg);
  display: flex; align-items: center; gap: 10px;
  font: 400 13px/1.35 var(--font-ui); color: var(--text);
}
.coach-why-sheet .cwhy-row-ic {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.coach-why-sheet .cwhy-row-ic .wt-icon { width: 14px; height: 14px; }
.coach-why-sheet .cwhy-reassure {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font: 400 13px/1.5 var(--font-ui); color: var(--dim);
}

/* Weight-step explainer (reuses the coach explainer's close + kicker styles) */
.weight-step-sheet { position: relative; padding-top: 24px; }
.weight-step-sheet .cwhy-close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--line2);
  border-radius: 12px; background: var(--panel2); color: var(--dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.weight-step-sheet .cwhy-close .wt-icon { width: 16px; height: 16px; }
.weight-step-sheet .cwhy-kicker {
  padding-right: 46px;
  font: 700 10px var(--font-mono); letter-spacing: 1.7px; color: var(--dim);
}
.weight-step-value {
  margin-top: 10px; padding-right: 46px;
  font: 800 32px/1.15 var(--font-mono); letter-spacing: -0.8px;
  color: var(--accent-ink-text);
}
.weight-step-copy {
  margin: 14px 0 0; font: 400 14.5px/1.5 var(--font-ui); color: var(--text);
}
.weight-step-note {
  margin: 10px 0 0; font: 400 13px/1.5 var(--font-ui); color: var(--dim);
}
.weight-step-cta {
  width: 100%; margin-top: 20px; padding: 14px 16px;
  border: none; border-radius: 13px; background: var(--accent); color: var(--ink);
  font: 700 14px var(--font-ui); cursor: pointer;
  box-shadow: var(--shadow-cta);
}

/* First-use voice-logging guide (reuses the .day-sheet base) */
.mic-guide .mg-icon {
  width: 46px; height: 46px; border-radius: 15px; background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--accent-ink-text);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.mic-guide .mg-icon .wt-icon { width: 22px; height: 22px; }
.mic-guide .mg-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.mic-guide .mg-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  font: 400 14px/1.5 var(--font-ui); color: var(--text);
}
.mic-guide .mg-steps b { font-weight: 600; color: var(--accent-ink-text); }
.mic-guide .mg-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel2); border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font-mono); color: var(--dim); margin-top: 1px;
}
.mic-guide .mg-note {
  margin-top: 16px; padding: 11px 13px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line);
  font: 400 12px/1.5 var(--font-ui); color: var(--dim);
}
.mic-guide .mg-note b { font-weight: 600; color: var(--text); }
.mic-guide .mg-try {
  width: 100%; margin-top: 18px; background: var(--accent); border: none;
  border-radius: 13px; padding: 14px; font: 700 14px var(--font-ui); color: var(--ink); cursor: pointer;
}

/* ── TRACKER (active workout) top bar + exercise header ────────────────────── */
.trk-topbar {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 0 0;
}
.trk-topbar .trk-finish {
  justify-self: end; min-height: 40px; border-radius: 13px; padding: 0 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 13px var(--font-ui); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.trk-topbar .trk-btn-ic { display: inline-flex; }
.trk-topbar .trk-btn-ic .wt-icon { width: 14px; height: 14px; }
.trk-topbar .trk-discard {
  justify-self: start; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dim); background: transparent; border: 0; border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent; appearance: none;
}
.trk-topbar .trk-discard .wt-icon { width: 18px; height: 18px; }
.trk-topbar .trk-discard:focus-visible,
.trk-topbar .trk-discard:hover {
  color: var(--text); background: rgba(255, 255, 255, 0.06);
}
.trk-topbar .trk-finish {
  color: var(--ink); background: var(--accent); border: 1px solid var(--accent);
  box-shadow: 0 10px 24px -16px rgba(var(--accent-rgb), 0.65);
}
.trk-topbar .trk-topbar-spacer { min-width: 0; }
/* Balances the warmup topbar against the active tracker's Finish button. */
.trk-topbar .trk-topbar-ghost { justify-self: end; width: 96px; }

/* ── WARM-UP SCREEN (fresh workout starts, before exercise 1) ───────────────
   One panel, caring tone: volt-tinted flame badge, four universal prompts as
   a numbered ledger, one volt CTA. Lives inside .focus so it inherits the
   shared 880px tracker column on desktop; the card itself caps at 560px so it
   reads as a considered interstitial, not a stretched list. */
.warmup {
  position: relative; overflow: hidden;
  width: 100%; max-width: 560px; margin: auto;
  padding: 30px 20px 20px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; text-align: center;
}
.warmup::before {
  /* Faint volt glow rising off the flame — warmth, literally. */
  content: ''; position: absolute; left: -20%; right: -20%; top: -40%; height: 72%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.09), transparent 72%);
  pointer-events: none;
}
.warmup > * { position: relative; }
.warmup-flame {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink-text);
  background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.28);
  animation: warmupPop 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.warmup-flame svg { width: 25px; height: 25px; }
.warmup-kicker {
  font: 700 11px var(--font-mono); letter-spacing: 2.5px;
  color: var(--accent-ink-text); margin-bottom: 8px;
}
.warmup-title {
  font: 700 24px/1.15 var(--font-ui); letter-spacing: -0.02em;
  color: var(--text); margin: 0 0 8px;
}
.warmup-sub {
  font: 400 14px/1.55 var(--font-ui); color: var(--dim);
  margin: 0 auto 20px; max-width: 340px;
}
.warmup-prose {
  font: 400 15px/1.6 var(--font-ui); color: var(--text);
  margin: 0 auto 22px; max-width: 340px;
}
.btn-warmed {
  width: 100%; background: var(--accent); color: var(--ink); border: none;
  border-radius: 15px; padding: 15px; font: 700 16px var(--font-ui);
  box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.5); cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease;
}
.btn-warmed:hover { background: var(--accent-pressed); }
.btn-warmed:active { transform: scale(0.99); }
.warmup-skip {
  display: block; margin: 13px auto 2px; background: none; border: none;
  font: 500 13px var(--font-ui); color: var(--dim); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.22);
}
.warmup-skip:hover { color: var(--text); }
@keyframes warmupPop {
  from { opacity: 0; transform: translateY(10px) scale(0.88); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .warmup-flame { animation: none; }
}
.trk-pips { display: flex; gap: 4px; margin-top: 12px; }
/* All pips are equal width. Completed = solid accent, upcoming = grey, and the
   ongoing exercise is the accent-coloured pip that gently pulses (opacity +
   soft glow) so it reads as "in progress" without changing size. */
.trk-pip { flex: 1; height: 4px; border-radius: 2px; background: #2a2d34; }
.trk-pip.done { background: var(--accent); }
.trk-pip.current { background: var(--accent); animation: trk-pip-pulse 1.8s ease-in-out infinite; }
@keyframes trk-pip-pulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .trk-pip.current { animation: none; opacity: 0.7; }
}

.ex-header { padding: 18px 2px 6px; }
.ex-header .ex-line { display: flex; justify-content: space-between; align-items: baseline; }
.ex-header .ex-line span { font: 400 11px var(--font-mono); color: var(--dim); white-space: nowrap; }
.ex-title-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 9px;
  margin-top: 12px; min-width: 0;
}
.ex-header .ex-title { font: 700 30px/1.05 var(--font-ui); letter-spacing: -0.9px; min-width: 0; }
.ex-demo-inline[hidden] { display: none !important; }
.ex-demo-inline { margin-top: 16px; border-radius: 16px; overflow: hidden; background: var(--panel2); }
.ex-chips { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.ex-chip {
  font: 500 12px var(--font-mono); border-radius: 9px; padding: 5px 10px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); color: var(--dim);
}
.ex-chip.chip-last { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.25); color: var(--accent-ink-text); }

/* Muted bracketed PR reference beside the exercise title. */
.ex-pr {
  flex: 0 1 auto; min-width: 0;
  font: 600 12px/1.2 var(--font-mono); color: var(--dim);
  letter-spacing: 0; white-space: normal;
}
.ex-pr-u { font-size: 9px; color: var(--dim2); margin-left: 1px; }

@media (max-width: 380px) {
  .ex-pr { flex-basis: 100%; }
}

/* ── SET CARDS (done / active / pending) with ± steppers ──────────────────── */
.set-list { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 8px; }

/* Session-only extra sets. This stays deliberately smaller than the Log
   button and matches the casual, inline feel of "+ Drop set". */
.extra-set-action { display: flex; justify-content: center; margin: 4px 0 2px; }
.extra-set-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 12px; border: 1px solid var(--line2);
  border-radius: 999px; background: transparent; color: var(--dim);
  font: 700 12px var(--font-ui); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.extra-set-add .wt-icon { width: 14px; height: 14px; }
.extra-set-add:hover { color: var(--text); border-color: var(--dim2); background: var(--panel); }
.extra-set-add:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .extra-set-add { transition: none; } }

/* Live working-set volume: current exercise against its most recent completed
   session. The longer result owns the full track; the percentage stays
   uncapped so progress beyond the reference remains explicit. */
.trk-vol {
  display: grid; gap: 9px; margin: 14px 0 0; padding: 12px 13px;
  border-radius: 15px; background: var(--panel);
}
.trk-vol-row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 42px;
  align-items: center; gap: 9px;
}
.trk-vol-label {
  font: 500 11px/1 var(--font-ui); color: var(--dim); white-space: nowrap;
}
.trk-vol-track {
  display: block; height: 5px; overflow: hidden;
  border-radius: 999px; background: var(--panel2);
}
.trk-vol-fill {
  display: block; height: 100%; border-radius: inherit;
  transition: width 300ms ease, background-color 180ms ease;
}
.trk-vol-fill.today { background: var(--dim); }
.trk-vol-fill.last { background: var(--dim2); }
.trk-vol-pct,
.trk-vol-pct-spacer {
  width: 42px; justify-self: end;
}
.trk-vol-pct {
  padding: 3px 5px; border-radius: 9px; text-align: center;
  background: var(--panel2); color: var(--dim);
  font: 700 10px/1.2 var(--font-mono); font-variant-numeric: tabular-nums;
}
.trk-vol.reached .trk-vol-fill.today { background: var(--accent); }
.trk-vol.reached .trk-vol-pct { background: var(--accent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .trk-vol-fill { transition: none; }
}

/* DONE */
.set.done {
  background: var(--panel); border: none; border-radius: 15px; padding: 13px 15px;
  opacity: 1; display: block;
}
.set.done .done-head { display: flex; align-items: center; gap: 12px; }
.set.done .done-check {
  width: 23px; height: 23px; border-radius: 8px; background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.set.done .done-check svg { width: 14px; height: 14px; }
.set.done .done-label { font: 400 11px var(--font-mono); color: var(--dim); white-space: nowrap; }
.set.done .done-val { margin-left: auto; font: 500 17px var(--font-mono); white-space: nowrap; }
.set.done .done-val .x { color: var(--dim2); }
.set.done .done-val .u { font-size: 11px; color: var(--dim); }
.set.done .done-drop {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line2);
  display: flex; align-items: center; gap: 9px;
  /* Match the main set value's right offset (edit pencil 30px + 12px gap) so
     the drop value aligns under it on the right, not floating to the edge. */
  padding-right: 42px;
}
.set.done .done-drop .dchip {
  font: 700 9px var(--font-mono); color: var(--accent-ink-text);
  border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: 5px; padding: 2px 6px;
}
.set.done .done-drop .dval { margin-left: auto; font: 500 13px var(--font-mono); color: var(--dim); white-space: nowrap; }
.set.done .done-edit {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease;
}
.set.done .done-edit svg { width: 14px; height: 14px; }
.set.done .done-edit:active { transform: scale(0.92); }
@media (hover: hover) {
  .set.done .done-edit:hover { color: var(--accent-ink-text); border-color: rgba(var(--accent-rgb), 0.4); }
}

/* Edit-set editor: Cancel + Save sit side by side under the steppers. */
.set.editing .log-row { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; }
.set.editing .log-row .log-btn { flex: 1; margin-top: 0; }
.set .edit-cancel {
  flex: none; padding: 0 18px; border-radius: 12px;
  font: 500 14px var(--font-ui); color: var(--dim);
  background: var(--panel2); border: 1px solid var(--line); cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.set .edit-cancel:active { transform: scale(0.96); }
@media (hover: hover) {
  .set .edit-cancel:hover { color: var(--text); border-color: var(--line2); }
}

/* ACTIVE */
.set.active {
  background: linear-gradient(155deg, #22252c, #15171b);
  border: 1.5px solid var(--accent); border-radius: 17px; padding: 15px;
  box-shadow: none; display: block; animation: popIn 0.25s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.set.active.set-completing { pointer-events: none; }
.set.active.set-completing > :not(.set-complete-overlay):not(.set-complete-preview) {
  opacity: 0;
  transition: opacity 0.16s ease;
}
.set.active.set-complete-settle {
  background: var(--panel); border: none; border-radius: 15px; padding: 13px 15px;
  box-shadow: none; animation: none;
  transition:
    height 0.3s cubic-bezier(0.2, 0.82, 0.2, 1),
    min-height 0.3s cubic-bezier(0.2, 0.82, 0.2, 1),
    padding 0.3s cubic-bezier(0.2, 0.82, 0.2, 1),
    border-radius 0.3s cubic-bezier(0.2, 0.82, 0.2, 1),
    background 0.24s ease;
}
.set.active.set-complete-settle > :not(.set-complete-overlay):not(.set-complete-preview) {
  display: none;
}
.set-complete-preview {
  opacity: 0; transform: translateY(5px) scale(0.985);
  transition: opacity 0.22s ease 0.06s, transform 0.28s cubic-bezier(0.2, 0.82, 0.2, 1) 0.04s;
}
.set-complete-show-preview .set-complete-preview {
  opacity: 1; transform: none;
}
.set-complete-overlay {
  position: absolute; z-index: 6; pointer-events: none;
  left: var(--complete-left); top: var(--complete-top);
  right: var(--complete-right); bottom: var(--complete-bottom);
  border-radius: 13px; background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4), 0 18px 38px rgba(var(--accent-rgb), 0.22);
  animation: set-complete-cover 0.26s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.set-complete-check {
  display: inline-flex; align-items: center; justify-content: center;
  animation: set-complete-check 0.26s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.set-complete-check .wt-icon { width: 24px; height: 24px; stroke-width: 3; }
.set-complete-overlay.settle {
  left: -1px; top: -1px; right: -1px; bottom: -1px;
  animation: set-complete-overlay-settle 0.18s ease-in both;
}
.set-complete-overlay.settle .set-complete-check {
  animation: set-complete-check-settle 0.18s cubic-bezier(0.34, 0, 0.2, 1) both;
}
.set-complete-overlay.reduce {
  left: -1px; top: -1px; right: -1px; bottom: -1px;
  animation: set-complete-cover-reduced 0.12s ease-out both;
}
.set-complete-overlay.reduce .set-complete-check { animation: set-complete-check-reduced 0.12s ease-out both; }
@keyframes set-complete-cover {
  0% {
    left: var(--complete-left); top: var(--complete-top);
    right: var(--complete-right); bottom: var(--complete-bottom);
    border-radius: 13px;
  }
  55% {
    left: -1px; top: -1px; right: -1px; bottom: -1px;
    border-radius: 18px;
    box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0.08), 0 20px 42px rgba(var(--accent-rgb), 0.22);
  }
  100% {
    left: -1px; top: -1px; right: -1px; bottom: -1px;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(12, 13, 16, 0.08);
  }
}
@keyframes set-complete-check {
  0% { opacity: 0.9; transform: scale(0.92); }
  45% { opacity: 1; transform: scale(1.78); }
  100% { opacity: 1; transform: scale(1.62); }
}
@keyframes set-complete-overlay-settle {
  0% { opacity: 1; box-shadow: inset 0 0 0 1px rgba(12, 13, 16, 0.08); }
  100% { opacity: 0; box-shadow: none; }
}
@keyframes set-complete-check-settle {
  0% { opacity: 1; transform: scale(1.72); }
  62% { opacity: 0.72; transform: scale(0.78); }
  100% { opacity: 0; transform: scale(0.48); }
}
@media (prefers-reduced-motion: reduce) {
  .set.active.set-completing > :not(.set-complete-overlay):not(.set-complete-preview) { transition: none; }
  .set.active.set-complete-settle,
  .set-complete-preview {
    transition: none;
  }
  .set-complete-overlay {
    left: -1px; top: -1px; right: -1px; bottom: -1px;
    animation: set-complete-cover-reduced 0.12s ease-out both;
  }
  .set-complete-check { animation: set-complete-check-reduced 0.12s ease-out both; }
}
@keyframes set-complete-cover-reduced {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes set-complete-check-reduced {
  0% { opacity: 0.7; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1.45); }
}
.set.active .act-head { display: flex; justify-content: flex-end; align-items: center; min-height: 28px; }
.set.active .act-label { display: none; }
.set.active .drop-toggle {
  font: 800 12px var(--font-ui); color: var(--accent-ink-text);
  background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 999px; cursor: pointer;
  text-transform: none; letter-spacing: 0; padding: 7px 11px;
  display: inline-flex; align-items: center; gap: 4px;
}
.set.active .drop-toggle.open {
  color: var(--accent-ink-text);
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.7);
}

/* Coach-suggested drop-set chip — VOLT (distinct from the warm manual "+ Drop
   set" toggle), at the pill scale of the LAST reference pills. On the active
   set it sits in the tool row; on a done last set it sits just below the head.
   Tapping pre-fills the drop editor. */
.set .set-drop-chip {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  font: 800 11px var(--font-ui); letter-spacing: 0.3px;
  color: var(--bg); background: var(--accent);
  border: none; border-radius: 999px; padding: 5px 9px 5px 7px;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: transform 0.05s ease, filter 0.12s ease;
}
.set .set-drop-chip .wt-icon { width: 12px; height: 12px; }
.set .set-drop-chip:active { transform: scale(0.94); }
.set.done .set-drop-chip.on-done { margin: 8px 0 2px 34px; }
.stepper-row { display: flex; gap: 11px; margin-top: 13px; }
.stepper {
  flex: 1 1 0; min-width: 0; background: var(--bg); border-radius: 13px; padding: 9px 6px; text-align: center;
}
.stepper .st-cap { font: 400 9px var(--font-mono); color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }
.stepper .st-cap-help {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  color: inherit; cursor: pointer; border-radius: 5px; outline: none;
}
.stepper .st-cap-help:focus-visible {
  outline: 1px solid var(--accent-ink-text); outline-offset: 2px;
}
.stepper .st-cap-help-icon { display: inline-flex; color: inherit; }
.stepper .st-cap-help-icon .wt-icon { width: 13px; height: 13px; }
.stepper .st-ctl { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 5px; min-width: 0; }
.st-btn {
  width: 34px; height: 34px; border-radius: 9px; background: var(--panel2); border: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 18px var(--font-ui); color: var(--dim); cursor: pointer; flex: none;
  -webkit-user-select: none; user-select: none; transition: background 0.12s ease, transform 0.05s ease;
}
.st-btn:active { transform: scale(0.92); }
.st-btn.plus { color: var(--text); }
.st-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* the number IS the input (tap to type); styled as the big centered value */
.st-val {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none; text-align: center;
  font: 700 26px var(--font-mono); color: var(--text); padding: 0;
  -moz-appearance: textfield;
}
.st-val::-webkit-outer-spin-button, .st-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.weight .st-val { color: var(--accent-ink-text); }
.st-val::placeholder { color: var(--dim2); }

/* drop-set tail editor inside the active card — reuses the same .stepper /
   .st-cap / .st-ctl layout as the normal set so the two match. The "DROP SET
   TAIL" label sits ABOVE the entering section (not wrapped around it). */
.drop-block { margin-top: 13px; }
.drop-block .drop-cap {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 9px var(--font-mono); color: var(--accent-ink-text); letter-spacing: 0.5px; margin-bottom: 8px;
}
.drop-block .drop-remove {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--dim); padding: 2px; cursor: pointer;
}
.drop-block .drop-remove .wt-icon { width: 13px; height: 13px; }
.drop-block .stepper-row { margin-top: 0; }
.set .drop-toggle[hidden] { display: none !important; }

/* Metric types (stage 1b): the load stepper is swapped out in plain-bodyweight
   mode via the hidden attribute — defeat any display value from .stepper. */
.stepper[hidden] { display: none !important; }

/* Bodyweight 3-mode segmented control (Bodyweight | Weighted | Assisted) —
   same skin as the Profile units segmented (.pf-seg), sized down to sit
   inside the active set card above the steppers. */
.bw-seg {
  display: flex; gap: 4px; background: var(--bg); border-radius: 11px;
  padding: 4px; margin-top: 12px;
}
.bw-seg-btn {
  flex: 1 1 0; min-width: 0; border: none; background: transparent; color: var(--dim); cursor: pointer;
  font: 600 12px var(--font-ui); padding: 8px 4px; border-radius: 8px; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.bw-seg-btn:hover { color: var(--text); }
.bw-seg-btn.sel { background: var(--accent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .bw-seg-btn { transition: none; }
}

.inc-sheet .inc-copy {
  margin: 16px 0 14px; color: var(--dim); font: 400 14px var(--font-ui); line-height: 1.45;
}
.inc-options { display: flex; flex-wrap: wrap; gap: 8px; }
.inc-option {
  flex: 1 1 76px; min-width: 0; border: 1px solid var(--line); border-radius: 13px;
  background: var(--bg); color: var(--text); padding: 11px 10px;
  font: 700 13px var(--font-mono); cursor: pointer;
}
.inc-option.active { border-color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.08); color: var(--accent-ink-text); }
.inc-custom-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 12px 13px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--dim); font: 600 13px var(--font-ui);
}
.inc-input-wrap { display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font: 700 12px var(--font-mono); }
.inc-input {
  width: 84px; border: none; background: transparent; color: var(--accent-ink-text);
  text-align: right; font: 700 18px var(--font-mono); outline: none;
}
.inc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.inc-reset, .inc-save {
  border-radius: 13px; padding: 13px 10px; cursor: pointer;
  font: 700 14px var(--font-ui);
}
.inc-reset { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.inc-save { background: var(--accent); border: none; color: var(--ink); }
.inc-profile-sheet .inc-copy {
  margin: 4px 0 14px; color: var(--dim); font: 400 13px/1.45 var(--font-ui);
}
.inc-profile-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; border: none; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.inc-profile-row:last-child { border-bottom: none; }
.inc-profile-main { flex: 1; min-width: 0; display: block; }
.inc-profile-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 650 14px var(--font-ui); color: var(--text);
}
.inc-profile-day {
  display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 11px var(--font-mono); color: var(--dim);
}
.inc-profile-val {
  flex: none; font: 800 13px var(--font-mono); color: var(--accent-ink-text); white-space: nowrap;
}
.inc-profile-saved {
  flex: none; font: 800 8px var(--font-mono); letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--dim2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px;
}
.inc-profile-row .pf-action-arrow { flex: none; color: var(--dim2); display: flex; }

/* Duration input shows mm:ss — slightly smaller than the big numeric values
   so 6 characters ("10:00") still fit the stepper cell. Load/duration/distance
   values are the "effort" numbers → accent mono like the weight input. */
.stepper.dur .st-val { font-size: 22px; }
.stepper.dur .st-val, .stepper.load .st-val, .stepper.dist .st-val { color: var(--accent-ink-text); }

.set .log-btn {
  width: 100%; min-height: 48px; background: var(--accent); color: var(--ink); border: none;
  border-radius: 13px; padding: 13px; margin-top: 12px; box-shadow: none;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 15px var(--font-ui); cursor: pointer;
}
.set .log-btn .log-label { font: 700 15px var(--font-ui); }
.set .log-btn .log-icon { display: inline-flex; }
.set .log-btn .log-icon .wt-icon { width: 22px; height: 22px; stroke-width: 3; }
.set .log-btn.loading { pointer-events: none; }
.set .log-btn.pressed { transform: scale(0.97); }
.set .log-btn .btn-spinner {
  width: 15px; height: 15px; border: 2.5px solid rgba(12, 13, 16, 0.35);
  border-top-color: var(--ink); border-radius: 50%; display: inline-block;
  animation: spin 0.7s linear infinite;
}

/* PENDING */
.set.pending {
  background: var(--panel); border: 1px solid var(--line); border-radius: 15px;
  padding: 13px 15px; display: flex; flex-direction: row; align-items: center; gap: 12px; opacity: 0.5;
}
.set.pending .pend-check { width: 23px; height: 23px; border-radius: 8px; border: 1.5px solid var(--dim2); flex: none; }
.set.pending .pend-label { font: 400 11px var(--font-mono); color: var(--dim); white-space: nowrap; }
.set.pending .pend-val { margin-left: auto; font: 400 13px var(--font-mono); color: var(--dim2); white-space: nowrap; }
/* Per-set "last time" reference — a clear pill so the user can actually read
   what to match/beat (was greyed-out and easy to miss). */
.set.pending .pend-last {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--panel2); border: 1px solid var(--line2);
  font: 700 13px var(--font-mono); color: var(--text);
}
.set.pending .pend-last .pl-k { font: 700 9px var(--font-mono); letter-spacing: 1px; color: var(--dim); }
.set.pending .pend-last .pl-u { font-size: 9px; color: var(--dim); margin-left: 1px; }
.set.pending .pend-last .pl-ago { font: 400 10px var(--font-mono); color: var(--dim); opacity: 0.8; margin-left: 3px; }

/* Same pill on the active set editor, volt-tinted since it's the set being
   logged right now. */
.set.active .act-last {
  display: inline-flex; align-items: center; gap: 7px; width: max-content;
  margin: 10px 0 4px; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.set.active .act-last .al-k { font: 700 9px var(--font-mono); letter-spacing: 1.2px; color: var(--accent-ink-text); }
.set.active .act-last .al-v { font: 700 13px var(--font-mono); color: var(--text); }
.set.active .act-last .al-u { font-size: 9px; color: var(--accent-ink-text); margin-left: 1px; }
.set.active .act-last .al-ago { font: 400 10px var(--font-mono); color: var(--dim); opacity: 0.9; }

/* Coach target — the double-progression suggestion the editor is pre-filled
   with. Volt-filled pill so it reads as "this is the plan", above LAST TIME. */
.set.active .act-coach {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px 8px; width: 100%;
  margin: 8px 0 4px; padding: 10px 12px; border-radius: 13px; white-space: normal;
  background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.5);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.set.active .act-coach .ac-ic { display: flex; color: var(--accent-ink-text); }
.set.active .act-coach .ac-ic .wt-icon { width: 14px; height: 14px; }
.set.active .act-coach .ac-help { display: flex; color: var(--accent-ink-text); }
.set.active .act-coach .ac-help .wt-icon { width: 14px; height: 14px; }
.set.active .act-coach .ac-k { font: 800 12px var(--font-ui); color: var(--accent-ink-text); }
/* Long values (e.g. "12 × 45kg assist") fold to a centered second line
   instead of a ragged left-aligned wrap inside the pill. */
.set.active .act-coach .ac-v { font: 800 18px var(--font-mono); color: var(--text); letter-spacing: -0.2px; text-align: center; }
.set.active .act-coach .ac-u { font-size: 9px; color: var(--accent-ink-text); margin-left: 1px; }
/* Coach + Last pills sit side by side when both fit */
.set.active .act-coach + .act-last { margin-top: 10px; }
/* Muted last-time hint under the coach pill — visually subordinate on
   purpose, the coach suggestion stays the hero. */
.set.active .act-last-hint {
  margin: 1px auto 4px; text-align: center;
  font: 400 11px/1.35 var(--font-mono); color: var(--dim2);
}

/* One-line coach rationale under the exercise header chips */
/* Prev / Next bottom bar */
.trk-nav {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 20px);
  width: calc(100% - 36px); max-width: 444px;
  display: flex; gap: 10px; z-index: 40;
}
.trk-nav .nav-prev {
  flex: 1; border: 1px solid var(--line2); background: var(--bg); border-radius: 14px;
  padding: 13px; text-align: center; font: 600 13px var(--font-ui); color: var(--text); cursor: pointer;
}
.trk-nav .nav-prev:disabled { color: var(--dim2); cursor: not-allowed; }
.trk-nav .nav-next {
  flex: 2; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel2));
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding: 13px; text-align: center; font: 700 14px var(--font-ui);
  color: var(--accent-ink-text); cursor: pointer;
}
.trk-nav .nav-next:active { opacity: 0.85; }
.trk-nav .nav-next.finish { background: var(--accent); color: var(--ink); font-weight: 700; }

/* Voice set logging — floating mic, visible only during a live workout */
.mic-fab {
  position: fixed; z-index: 41;
  right: 16px;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 92px);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--panel2); border: 1px solid var(--line2);
  color: var(--text); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.6);
  -webkit-tap-highlight-color: transparent;
}
.mic-fab.show { display: flex; }
.mic-fab .wt-icon { width: 21px; height: 21px; position: relative; z-index: 2; }
.mic-fab.listening { background: var(--accent); border-color: var(--accent-ink-text); color: var(--ink); }
.mic-fab .mic-ring {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; pointer-events: none;
}
.mic-fab.listening .mic-ring { animation: micPulse 1.6s ease-out infinite; }
.mic-fab.listening .mic-ring.r2 { animation-delay: 0.8s; }
@keyframes micPulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}
.mic-fab .mic-spin {
  display: none; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent-ink-text); pointer-events: none;
}
.mic-fab.processing .mic-spin { display: block; animation: micSpin 0.8s linear infinite; }
@keyframes micSpin { to { transform: rotate(360deg); } }

/* Transcript / parse-result pill floating above the mic */
.mic-hint {
  position: fixed; z-index: 41;
  right: 16px; max-width: min(78vw, 340px);
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 152px);
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px;
  padding: 9px 12px; font: 500 12px/1.45 var(--font-ui); color: var(--text);
  text-align: right;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mic-hint.show { opacity: 1; transform: none; }
.mic-hint.ok { border-color: rgba(var(--accent-rgb), 0.4); }
.mic-hint.err { border-color: rgba(255, 107, 107, 0.45); }

/* Brief volt flash on inputs a voice command just filled */
.set.active .st-val.voice-fill { color: var(--accent-ink-text); transition: color 0.5s ease 0.6s; }

@media (min-width: 1024px) {
  /* Keep the FAB pinned to the centered column's right edge, not the viewport's */
  .mic-fab, .mic-hint { right: calc(50% - 344px); }
}
@media (prefers-reduced-motion: reduce) {
  .mic-fab.listening .mic-ring { animation: none; opacity: 0.5; }
  .mic-fab.listening .mic-ring.r2 { opacity: 0; }
}

/* ── VOICE WIDGET — rich full-screen set-logging overlay ────────────────────
   Opened by the mic during a live workout: dimmed/blurred backdrop, a card
   that rises + scales in, a live waveform, a spoken transcript and an enlarged
   set editor whose ± steppers proxy the real active-set row. Check logs via the
   real Log path; cross discards. Design system: panel gradient, volt accent,
   Source Sans 3 numbers, Lucide icons — no emojis. */
.vw-scrim {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + 20px) 18px calc(var(--safe-bottom) + 20px);
  background: rgba(8, 9, 11, 0.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: vwScrimIn 0.2s ease both;
  -webkit-tap-highlight-color: transparent;
}
.vw-scrim.out { animation: vwScrimOut 0.24s ease both; }
@keyframes vwScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vwScrimOut { from { opacity: 1; } to { opacity: 0; } }

.vw-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(155deg, #1b1d23, #111216);
  border: 1px solid var(--line2); border-radius: 26px;
  padding: 20px 20px 22px;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.8);
  animation: vwCardIn 0.34s cubic-bezier(0.18, 0.9, 0.28, 1) both;
}
.vw-scrim.out .vw-card { animation: vwCardOut 0.22s ease both; }
@keyframes vwCardIn { from { opacity: 0; transform: translateY(46px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes vwCardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(30px) scale(0.94); } }

/* Round mic toggle + reactive sound-wave rings. Tap starts / stops listening
   (recording never stops on its own — only a manual tap or the 15s hard cap).
   The rings ripple continuously AND push outward / brighten from the live mic
   level, exposed as --vw-lvl by the analyser. */
.vw-mic-wrap {
  display: flex; align-items: center; justify-content: center;
  height: 128px; margin: 6px 0 2px;
}
.vw-mic {
  --vw-lvl: 0;
  position: relative; width: 94px; height: 94px; flex: none;
  border-radius: 50%; cursor: pointer;
  /* Inactive (idle / processing / confirm): neutral grey, dim icon, no rings.
     Distinct from the active fill in BOTH themes. */
  background: var(--panel2); color: var(--dim);
  border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.vw-mic:active { transform: scale(0.95); }
/* Active (listening): ink-filled accent treatment + the reactive rings. */
.vw-card.is-listening .vw-mic {
  background: var(--accent); color: var(--ink);
  border-color: transparent;
  box-shadow: 0 14px 34px -12px rgba(var(--accent-rgb), 0.55);
}
.vw-mic-core { position: relative; z-index: 2; display: flex; }
.vw-mic-core .wt-icon { width: 38px; height: 38px; }
/* Concentric rings: base ripple keyframe (breathe in silence) + a live-level
   scale/opacity so speech visibly pushes them out. Only box-shadow animates in
   the keyframe, so the inline level transform never fights it. */
.vw-mic-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.45);
  transform: scale(calc(1 + var(--vw-lvl) * 0.85));
  opacity: calc(0.14 + var(--vw-lvl) * 0.7);
  animation: vwRing 2.4s ease-out infinite;
  pointer-events: none;
  display: none; /* rings only ripple while actively listening */
}
.vw-card.is-listening .vw-mic-ring { display: block; }
.vw-mic-ring.r2 { animation-delay: 0.8s; }
.vw-mic-ring.r3 { animation-delay: 1.6s; }
@keyframes vwRing {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.3); }
  70% { box-shadow: 0 0 0 22px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.vw-status-lbl {
  font: 700 12px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent-ink-text); text-align: center; margin-top: 14px;
}
.vw-card.is-processing .vw-status-lbl { color: var(--dim); }
.vw-card.is-confirm .vw-status-lbl { color: var(--accent-ink-text); }
.vw-card.is-error .vw-status-lbl { color: var(--bad); }
/* Error: swap the mic for the retry button; the label carries the message. */
.vw-card.is-error .vw-mic-wrap { display: none; }

/* Error-state retry (mic) button — hidden otherwise */
.vw-retry {
  display: none; margin: 2px auto 0; align-items: center; gap: 8px;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px;
  padding: 9px 14px; font: 600 13px var(--font-ui); color: var(--text); cursor: pointer;
}
.vw-retry .wt-icon { width: 16px; height: 16px; color: var(--accent-ink-text); }
.vw-card.is-error .vw-retry { display: inline-flex; }

.vw-setlabel {
  text-align: center; margin: 16px 0 12px;
  font: 700 11px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dim2);
}

/* Enlarged set editor — one panel per metric field */
.vw-panels { display: grid; gap: 10px; }
.vw-panels-1 { grid-template-columns: 1fr; }
.vw-panels-2 { grid-template-columns: 1fr 1fr; }
.vw-field {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 15px 7px; text-align: center;
  min-width: 0; /* let 1fr tracks stay equal instead of growing to the nowrap cap */
}
.vw-cap {
  font: 700 10px var(--font-mono); letter-spacing: 1px; text-transform: uppercase;
  color: var(--dim); margin-bottom: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vw-ctl { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.vw-step {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--text);
  font: 400 22px/1 var(--font-ui); display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vw-step.minus { color: var(--dim); }
.vw-step:active { transform: scale(0.92); }
.vw-val {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  font: 700 30px var(--font-mono); letter-spacing: -1px; color: var(--text);
}
/* Weight / duration / distance readouts are volt; reps stays neutral text */
.vw-k-weight .vw-val, .vw-k-dur .vw-val, .vw-k-dist .vw-val, .vw-k-mdist .vw-val { color: var(--accent-ink-text); }
.vw-val.vw-pop { animation: vwPop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes vwPop { 0% { transform: scale(0.7); opacity: 0.3; } to { transform: none; opacity: 1; } }

.vw-transcript {
  min-height: 18px; margin-top: 14px; text-align: center; word-break: break-word;
  font: 400 13px/1.4 var(--font-ui); color: var(--text);
}
.vw-interp {
  min-height: 16px; margin-top: 6px; text-align: center;
  font: 500 12px/1.4 var(--font-ui); color: var(--dim);
}
.vw-card.is-confirm .vw-interp { color: var(--accent-ink-text); }

.vw-actions { display: flex; gap: 12px; margin-top: 18px; }
.vw-reject {
  flex: none; width: 62px; height: 56px; border-radius: 16px;
  background: none; border: 1px solid rgba(255, 107, 107, 0.4); color: var(--bad);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vw-reject .wt-icon { width: 22px; height: 22px; }
.vw-confirm {
  flex: 1; height: 56px; border-radius: 16px; border: none;
  background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.5);
  -webkit-tap-highlight-color: transparent;
}
.vw-confirm .wt-icon { width: 26px; height: 26px; }
.vw-reject:active, .vw-confirm:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .vw-scrim, .vw-scrim.out, .vw-card, .vw-scrim.out .vw-card { animation: none !important; }
  .vw-mic-ring { animation: none; transform: none; opacity: 0.32; }
  .vw-val.vw-pop { animation: none; }
  .vw-mic:active, .vw-step:active, .vw-reject:active, .vw-confirm:active { transform: none; }
}

/* ── REST TIMER — full-screen rest overlay with a collapsed mini state ─────── */
.rest-bar {
  position: fixed; z-index: 72; inset: 0;
  display: grid; place-items: center;
  padding: calc(var(--safe-top) + 22px) 22px calc(var(--safe-bottom) + 24px);
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.11), transparent 31%),
    radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.045), transparent 34%),
    rgba(8, 9, 11, 0.94);
  backdrop-filter: blur(18px) saturate(1.08);
  opacity: 0; pointer-events: none;
  transform: translateY(18px) scale(0.985);
  /* Container fade/settle. Entrance is quick (the shell's staggered build-in
     carries the detail); exit is quicker still so it clears without lingering. */
  transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.16, 0.95, 0.28, 1);
  -webkit-tap-highlight-color: transparent;
}
html.modal-lock,
body.modal-lock {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
.rest-bar.from-set-transition .rest-shell,
.rest-bar.from-set-transition .rest-close {
  opacity: 0;
  transform: none;
  transition: none;
}
.rest-bar.from-set-transition.show {
  opacity: 0;
  pointer-events: none;
}
.rest-bar.from-set-transition.timer-revealed.show {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
.rest-bar.from-set-transition.timer-revealed .rest-shell,
.rest-bar.from-set-transition.timer-revealed .rest-close {
  opacity: 1;
  transform: none;
}
.rest-bar.show { opacity: 1; transform: none; pointer-events: auto; }

/* Entrance choreography — the overlay reads as a continuation of the set
   checkmark rather than a jump-cut. The container fades + settles (base
   transition above); the shell's pieces then build in a quick stagger: the
   ring rises + scales up first, the title and controls follow. Runs once when
   .show lands (removed on stop, so it replays for each new rest). Skipped in
   the minimized/done states (they carry their own motion). */
.rest-bar.show:not(.minimized):not(.done) .rest-ring {
  animation: restEnterRing 0.52s cubic-bezier(0.18, 1.1, 0.32, 1) 0.02s both;
}
.rest-bar.show:not(.minimized):not(.done) .rest-timer-title {
  animation: restEnterRise 0.44s cubic-bezier(0.16, 0.95, 0.28, 1) 0.05s both;
}
.rest-bar.show:not(.minimized):not(.done) .rest-ctls {
  animation: restEnterRise 0.46s cubic-bezier(0.16, 0.95, 0.28, 1) 0.13s both;
}
.rest-bar.show:not(.minimized):not(.done) .rest-close {
  animation: restEnterFade 0.42s ease 0.16s both;
}
@keyframes restEnterRing {
  from { opacity: 0; transform: translateY(16px) scale(0.84); }
  to   { opacity: 1; transform: none; }
}
@keyframes restEnterRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes restEnterFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rest-shell {
  width: min(100%, 480px);
  min-height: min(640px, calc(100svh - var(--safe-top) - var(--safe-bottom) - 46px));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center;
}
.rest-timer-title {
  margin: 0;
  font: 700 30px/1 var(--font-ui);
  letter-spacing: 0;
  color: var(--text);
}
.rest-close {
  position: absolute; top: calc(var(--safe-top) + 18px); right: 18px;
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(22, 24, 29, 0.72); color: var(--dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.rest-close .wt-icon { width: 19px; height: 19px; }
.rest-close:active { transform: scale(0.96); color: var(--text); }
.rest-ring {
  position: relative; width: min(72vw, 292px); height: min(72vw, 292px); flex: none;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.45));
}
.rest-ring::after {
  content: ""; position: absolute; inset: 34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 68%);
  animation: restGlow 2.4s ease-in-out infinite;
}
.rest-ring svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.rest-ring .rr-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1.8; }
.rest-ring .rr-fg {
  fill: none; stroke: var(--accent-ink-text); stroke-width: 1.9; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s linear, stroke 0.2s ease;
}
.rest-ring-done {
  position: absolute; z-index: 2; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.rest-ring-done { display: none; }
.rest-ring-done svg,
.rest-ring-done .wt-icon {
  display: block;
  width: 92px; height: 92px;
  color: var(--ink);
  stroke: currentColor;
  stroke-width: 2.7;
}
.rest-copy {
  position: absolute; z-index: 2; inset: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  justify-content: center; pointer-events: none;
}
.rest-k { font: 700 10px var(--font-mono); letter-spacing: 2.4px; color: var(--dim); }
.rest-time {
  font: 700 clamp(58px, 16vw, 86px)/0.92 var(--font-mono);
  color: var(--text); font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.rest-time.bump { animation: restBump 0.35s ease; }
@keyframes restBump { 40% { transform: scale(1.06); color: var(--accent-ink-text); } }
.rest-over { display: none; font: 700 30px/1.05 var(--font-ui); color: var(--accent-ink-text); letter-spacing: -0.5px; }
.rest-ctls {
  width: min(100%, 388px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: none;
}
.rest-btn {
  min-width: 0; height: 52px; padding: 0 10px; border-radius: 14px;
  background: rgba(30, 33, 39, 0.86); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}
.rest-btn .wt-icon { width: 18px; height: 18px; }
.rest-btn:active { transform: scale(0.94); }
.rest-plus { font-family: var(--font-mono); color: var(--accent-ink-text); }
.rest-skip { color: var(--ink); background: var(--accent); border-color: var(--accent-ink-text); }
.rest-mini { display: none; }
/* paused — the volt drains to grey so the freeze is legible at a glance */
.rest-bar.paused .rr-fg { stroke: var(--dim); }
.rest-bar.paused .rest-time { color: var(--dim); }
.rest-bar.paused .rest-ring::after { animation-play-state: paused; }
/* done — "Rest over — go!" with the restart button doubling as repeat */
.rest-bar.done .rest-ring {
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0.08), 0 30px 70px -18px rgba(var(--accent-rgb), 0.55);
  animation: restDonePop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.rest-bar.done .rest-ring::after,
.rest-bar.done .rest-ring > svg { display: none; }
.rest-bar.done .rest-ring-done { display: flex; color: var(--ink); }
.rest-bar.done .rest-timer-title,
.rest-bar.done .rest-k, .rest-bar.done .rest-time { display: none; }
.rest-bar.done .rest-over { display: block; }
.rest-bar.done [data-rt="pause"], .rest-bar.done .rest-plus { display: none; }
.rest-bar.done .rest-ctls {
  width: min(100%, 300px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
}
@keyframes restDonePop { 0% { transform: scale(0.6); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes restSweep { to { transform: rotate(360deg); } }
@keyframes restGlow { 50% { opacity: 0.42; transform: scale(1.08); } }

.rest-bar.minimized {
  inset: auto auto calc(var(--tab-h) + var(--safe-bottom) + 84px) 50%;
  width: auto; height: auto; display: block; padding: 0;
  background: transparent; backdrop-filter: none;
  transform: translateX(-50%) translateY(12px) scale(0.96);
  pointer-events: auto;
}
.rest-bar.minimized.show { transform: translateX(-50%); }
.rest-bar.minimized .rest-shell,
.rest-bar.minimized .rest-close { display: none; }
.rest-bar.minimized .rest-mini {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 124px; height: 48px; padding: 0 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 999px;
  background: linear-gradient(155deg, rgba(27, 29, 35, 0.96), rgba(17, 18, 22, 0.96));
  color: var(--text); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
.rest-mini-ic { color: var(--accent-ink-text); display: inline-flex; }
.rest-mini-ic .wt-icon { width: 16px; height: 16px; }
.rest-mini-time { font: 700 18px/1 var(--font-mono); font-variant-numeric: tabular-nums; }

/* The mic FAB + its hint lift clear of the bar while it's on screen.
   (.mic-hint re-declares its own transition list — a bare `transition:
   bottom` here would wipe its opacity/transform fade.) */
.mic-fab { transition: bottom 0.28s ease; }
.mic-hint { transition: opacity 0.18s ease, transform 0.18s ease, bottom 0.28s ease; }
body.rest-on .mic-fab { bottom: calc(var(--tab-h) + var(--safe-bottom) + 152px); }
body.rest-on .mic-hint { bottom: calc(var(--tab-h) + var(--safe-bottom) + 212px); }

/* Manual start — quiet icon button beside "+ drop set" on the active set */
.set.active .act-tools { display: inline-flex; align-items: center; gap: 10px; }
.set.active .rest-start {
  width: 26px; height: 26px; padding: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line2);
  color: var(--dim); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.set.active .rest-start .wt-icon { width: 13px; height: 13px; }
.set.active .rest-start:active { color: var(--accent-ink-text); border-color: var(--accent-ink-text); }

/* ── WATER REMINDER — full-screen hydration nudge, same language as rest ──── */
.water-chip {
  position: fixed; z-index: 74; inset: 0;
  display: grid; place-items: center;
  padding: calc(var(--safe-top) + 22px) 22px calc(var(--safe-bottom) + 24px);
  background:
    radial-gradient(circle at 50% 38%, rgba(127, 212, 255, 0.15), transparent 31%),
    radial-gradient(circle at 50% 88%, rgba(var(--accent-rgb), 0.055), transparent 34%),
    rgba(8, 9, 11, 0.94);
  backdrop-filter: blur(18px) saturate(1.08);
  color: var(--text);
  opacity: 0; pointer-events: none;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.16, 0.95, 0.28, 1);
  -webkit-tap-highlight-color: transparent;
}
.water-chip.show { opacity: 1; transform: none; pointer-events: auto; }
.water-shell {
  width: min(100%, 430px);
  min-height: min(640px, calc(100vh - var(--safe-top) - var(--safe-bottom) - 46px));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; text-align: center;
}
.water-close {
  position: absolute; top: calc(var(--safe-top) + 18px); right: 18px;
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(22, 24, 29, 0.72); color: var(--dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.water-close .wt-icon { width: 19px; height: 19px; }
.water-close:active { transform: scale(0.96); color: var(--text); }
.water-orb {
  width: 230px; height: 230px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background:
    radial-gradient(circle at 50% 44%, rgba(127, 212, 255, 0.22), transparent 58%),
    rgba(127, 212, 255, 0.08);
  border: 1px solid rgba(127, 212, 255, 0.22);
  box-shadow: 0 0 0 14px rgba(127, 212, 255, 0.045), 0 30px 70px -22px rgba(0, 0, 0, 0.75);
}
.water-orb::before {
  content: ""; position: absolute; inset: -14px; border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 66%, rgba(127, 212, 255, 0.74) 73%, transparent 80%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: restSweep 2.9s linear infinite;
}
.water-ic {
  width: 112px; height: 112px; border-radius: 50%; flex: none;
  background: var(--pull); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 22px 54px -18px rgba(127, 212, 255, 0.72);
  position: relative; z-index: 1;
}
.water-ic .wt-icon { width: 54px; height: 54px; stroke-width: 2.2; }
.water-chip.show .water-ic { animation: waterBob 2.4s ease-in-out infinite; }
@keyframes waterBob { 50% { transform: translateY(-5px); } }
.water-copy { display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 320px; }
.water-copy .wtr-k { font: 700 10px var(--font-mono); letter-spacing: 2.4px; color: var(--pull); }
.water-copy .wtr-t {
  display: block; font: 700 36px/1.02 var(--font-ui);
  letter-spacing: 0; color: var(--text);
}
.water-copy .wtr-s {
  display: block; font: 500 14px/1.5 var(--font-ui);
  color: var(--dim); max-width: 280px;
}
.water-btn {
  width: min(100%, 320px); height: 54px; border-radius: 15px;
  border: 1px solid var(--pull); background: var(--pull); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font: 800 14px var(--font-ui); cursor: pointer;
  box-shadow: 0 20px 44px -22px rgba(127, 212, 255, 0.86);
  -webkit-tap-highlight-color: transparent;
}
.water-btn:active { transform: scale(0.98); }

@media (min-width: 1024px) {
  .rest-shell { min-height: 620px; }
  .rest-time { font-size: 92px; }
  .rest-ring { width: 306px; height: 306px; }
  /* Center chips on the app column (sidebar shifts it right), same as .trk-nav */
  .rest-bar.minimized { left: calc(50% + 122px); }
  .water-shell { min-height: 620px; }
  .water-orb { width: 276px; height: 276px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .rest-time { font-size: 88px; }
  .rest-ring { width: 276px; height: 276px; }
  .water-orb { width: 266px; height: 266px; }
}
@media (prefers-reduced-motion: reduce) {
  .rest-bar, .water-chip { transition: opacity 0.15s ease; transform: none; }
  .rest-bar.minimized { transform: translateX(-50%); }
  .rest-ring::after, .water-orb::before { animation: none; }
  .rest-bar.done .rest-ring { animation: none; }
  /* Entrance is a plain fade with the container — no build-in stagger. */
  .rest-bar.show .rest-ring,
  .rest-bar.show .rest-timer-title,
  .rest-bar.show .rest-ctls,
  .rest-bar.show .rest-close { animation: none; }
  .rest-time.bump { animation: none; }
  .water-chip.show .water-ic { animation: none; }
  .rest-ring .rr-fg { transition: none; }
}

/* ── FINISH / SESSION COMPLETE ─────────────────────────────────────────────── */
.finish-hero { text-align: center; padding: 8px 4px 0; }
.finish-check {
  width: 64px; height: 64px; border-radius: 20px; background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
  box-shadow: 0 14px 34px -10px rgba(var(--accent-rgb), 0.5);
}
.finish-check svg { width: 32px; height: 32px; }
.finish-title { font: 700 27px/1.05 var(--font-ui); letter-spacing: -0.6px; margin-top: 16px; }
.finish-sub { font: 400 13px var(--font-ui); color: var(--dim); margin-top: 7px; }
.finish-vs {
  background: linear-gradient(155deg, #1b1d23, #111216); border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 22px; padding: 22px; margin-top: 22px;
}
.finish-vs .vs-label { font: 600 11px var(--font-ui); color: var(--dim); letter-spacing: 1px; }
.finish-vs .vs-row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.finish-vs .vs-pct { font: 700 44px/0.9 var(--font-mono); }
.finish-vs .vs-pct.up { color: var(--good); }
.finish-vs .vs-pct.down { color: var(--bad); }
.finish-vs .vs-pct.flat { color: var(--text); }
.finish-vs .vs-row { justify-content: space-between; }
.finish-vs .vs-cap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.finish-vs .vs-cap-k { font: 400 11px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.finish-vs .vs-cap-v { font: 700 17px var(--font-mono); color: var(--text); white-space: nowrap; }
.finish-section-label { font: 600 12px var(--font-ui); color: var(--dim); margin: 22px 0 12px; }
.finish-list { display: flex; flex-direction: column; gap: 10px; }
.finish-ex { background: var(--panel); border-radius: 15px; padding: 14px 15px; }
.finish-ex .fe-head { display: flex; justify-content: space-between; align-items: center; }
.finish-ex .fe-name { font: 500 14px var(--font-ui); }
.finish-ex .fe-delta { font: 700 13px var(--font-mono); }
.finish-ex .fe-delta.up { color: var(--good); }
.finish-ex .fe-delta.down { color: var(--bad); }
.finish-ex .fe-delta.flat { color: var(--dim); }
.finish-ex .fe-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 11px; }
.finish-ex .fe-bar { flex: 1; border-radius: 3px; transform-origin: bottom; animation: barGrow 0.5s ease; }
.finish-ex .fe-vol { font: 400 11px var(--font-mono); color: var(--dim); margin-left: 6px; align-self: center; white-space: nowrap; }
.finish-coach {
  background: var(--panel); border: 1px dashed var(--line2); border-radius: 16px;
  padding: 16px; margin-top: 22px; display: flex; gap: 13px; align-items: center;
}
.finish-coach .fc-badge {
  width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #ccff00, #8fd400);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.finish-coach .fc-badge svg { width: 19px; height: 19px; }
.finish-coach .fc-title { font: 600 13px var(--font-ui); }
.finish-coach .fc-sub { font: 400 11.5px var(--font-ui); color: var(--dim); margin-top: 2px; }
/* Header-row layout: badge + label inline on top, the review body (paragraph
   OR the full-width AI-trainer momentum list) spans below. The old side-by-side
   flex indented the whole body past the 38px badge, which reads as broken left
   padding for the momentum rows — same fix the history card (.sd-coach) uses. */
.finish-coach.live {
  border-style: solid; animation: fin-rise 0.5s ease 0.15s both;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 13px;
}
.finish-coach.live .fc-copy { display: contents; }
.finish-coach.live .fc-body { grid-column: 1 / -1; min-width: 0; margin-top: 8px; }
.finish-coach.live .fc-title {
  font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink-text); margin: 3px 0 7px;
}
.finish-coach.live .fc-body .skel-text { height: 12px; margin: 0 0 8px; }
.finish-coach.live .fc-text { font: 400 13.5px/1.55 var(--font-ui); color: var(--text); margin: 0; white-space: pre-wrap; }
.finish-coach.live .ai-md,
.cc-msg.coach .ai-md {
  font: 400 13.5px/1.55 var(--font-ui); color: var(--text);
}
.fc-type-target.typing .ai-md-p:last-child::after,
.fc-type-target.typing .ai-md-list li:last-child::after {
  content: ""; display: inline-block; width: 7px; height: 1.1em; margin-left: 3px;
  background: var(--accent); border-radius: 1px; vertical-align: -0.18em;
  animation: air-caret 0.75s steps(1) infinite;
}
.ai-fb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px; font: 600 11px var(--font-ui); color: var(--dim);
}
.ai-fb-btn {
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel2);
  color: var(--text); padding: 5px 9px; font: 700 10.5px var(--font-ui); cursor: pointer;
}
.ai-fb-btn.active, .ai-fb-btn:active { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent-ink-text); }
.ai-fb-btn:disabled { cursor: default; opacity: 0.78; }
/* Non-Pro upsell inside the coach card (client AI gate + 403 safety net) */
.fc-upsell {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px 14px;
  background: var(--accent); color: var(--ink);
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  font: 700 12.5px var(--font-ui); letter-spacing: 0.2px;
}
.fc-upsell .wt-icon { width: 14px; height: 14px; }
.fc-upsell:active { background: var(--accent-pressed); }
.finish-coach.live .fc-text.muted { color: var(--dim); }

/* AI Trainer's Take v2: one deterministic row per performed exercise. */
.air-summary .ai-md { font: 400 13.5px/1.55 var(--font-ui); color: var(--text); }
.air-stale {
  display: flex; gap: 7px; align-items: flex-start; margin: 11px 0 2px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--dim); font: 500 11.5px/1.4 var(--font-ui);
}
.air-stale .wt-icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.air-list { display: grid; gap: 8px; margin-top: 14px; }
.air-ex { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--panel2); }
.air-ex.next-action { border-left: 2px solid var(--accent-ink-text); }
.air-row {
  width: 100%; min-height: 58px; display: flex; gap: 9px; align-items: center; text-align: left;
  padding: 11px 12px; border: 0; background: transparent; color: var(--text); cursor: pointer;
}
.air-row-copy { min-width: 0; display: grid; gap: 3px; flex: 1; }
.air-row-copy strong { overflow: hidden; text-overflow: ellipsis; font: 600 13px var(--font-ui); white-space: nowrap; }
.air-row-copy span { color: var(--dim); font: 400 10.5px/1.3 var(--font-mono); }
.air-badge { flex: none; border-radius: 999px; padding: 4px 7px; font: 700 9px var(--font-mono); text-transform: uppercase; }
.air-badge.pr { background: rgba(var(--accent-rgb), .14); color: var(--accent-ink-text); }
.air-badge.first, .air-badge.plateau { background: var(--panel); color: var(--dim); }
.air-badge.regression { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.air-change {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font: 700 10px var(--font-mono); white-space: nowrap;
}
.air-change.up { color: var(--good); }
.air-change.down { color: var(--bad); }
.air-change.flat { color: var(--dim); }
.air-change .wt-icon { width: 12px; height: 12px; }
.air-chevron { width: 18px; height: 18px; color: var(--dim); transition: transform .2s ease; }
.air-chevron .wt-icon { width: 18px; height: 18px; }
.air-ex.open .air-chevron { transform: rotate(180deg); }
.air-detail { border-top: 1px solid var(--line); padding: 12px; }
.air-detail[hidden] { display: none; }
.air-compare { display: flex; flex-wrap: wrap; gap: 5px 9px; align-items: baseline; margin-bottom: 9px; }
.air-compare strong { font: 700 12px var(--font-mono); color: var(--text); }
.air-compare span { font: 400 10.5px var(--font-mono); color: var(--dim); }
.air-explanation .ai-md { font: 400 12.5px/1.5 var(--font-ui); color: var(--text); }
.air-target {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: 600 11.5px/1.4 var(--font-ui);
}
.air-target.primary { border-color: rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .07); }
.air-target .wt-icon { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--accent-ink-text); }
.air-chart-slot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.air-chart-loading { display: grid; gap: 8px; }
.air-chart-loading .skel-chart { height: 150px; border-radius: 10px; }
.air-chart-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: end; }
.air-chart-head > div { grid-row: 1 / span 2; display: grid; align-content: center; gap: 2px; }
.air-chart-head span { font: 600 10px var(--font-ui); color: var(--dim); }
.air-chart-head small { font: 500 9.5px var(--font-ui); color: var(--dim2); }
.air-chart-head strong { font: 700 21px var(--font-mono); color: var(--text); text-align: right; }
.air-chart-head em { font: 600 9.5px var(--font-mono); font-style: normal; text-align: right; }
.air-chart-head em.up { color: var(--good); }
.air-chart-head em.down { color: var(--bad); }
.air-chart-head em.flat { color: var(--dim); }
.air-chart-ranges { display: flex; gap: 5px; margin: 11px 0 5px; }
.air-chart-ranges button {
  min-width: 36px; padding: 5px 8px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--dim); font: 600 9px var(--font-mono); cursor: pointer;
}
.air-chart-ranges button.active { border-color: var(--line2); background: var(--panel); color: var(--text); }
.air-chart-wrap { position: relative; min-height: 180px; }
.air-chart { width: 100%; height: 180px; display: block; overflow: visible; touch-action: pan-y; }
.air-chart text { fill: var(--dim2); font: 400 8px var(--font-mono); }
.air-chart-stack { position: relative; display: grid; gap: 10px; }
.air-chart-panel { min-width: 0; padding-top: 9px; border-top: 1px solid var(--line); }
.air-chart-panel:first-child { padding-top: 0; border-top: 0; }
.air-chart-panel-head {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 9px; align-items: end; margin-bottom: 2px;
}
.air-chart-panel-head > div { grid-row: 1 / span 2; display: grid; align-content: center; gap: 1px; }
.air-chart-panel-head span { font: 600 9.5px var(--font-ui); color: var(--dim); }
.air-chart-panel-head small { font: 500 8.5px var(--font-ui); color: var(--dim2); }
.air-chart-panel-head strong { font: 700 16px var(--font-mono); color: var(--text); text-align: right; }
.air-chart-panel-head em { font: 600 8.5px var(--font-mono); font-style: normal; text-align: right; }
.air-chart-panel-head em.up { color: var(--good); }
.air-chart-panel-head em.down { color: var(--bad); }
.air-chart-panel-head em.flat { color: var(--dim); }
.air-chart-panel-svg { width: 100%; height: 96px; display: block; overflow: visible; touch-action: pan-y; }
.air-chart-panel-svg text { fill: var(--dim2); font: 400 7.5px var(--font-mono); }
.air-chart-guide { stroke: var(--line); stroke-width: .7; }
.air-chart-area { stroke: none; }
.air-chart-gradient { color: inherit; }
.air-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.air-chart-baseline { stroke: var(--dim2); stroke-width: 1; stroke-dasharray: 3 4; }
.air-chart-last { fill: var(--dim) !important; font-size: 7.5px !important; }
.air-chart-point { fill: currentColor; stroke: var(--panel); stroke-width: 1.5; }
.air-chart-pr { fill: var(--panel); stroke: var(--accent-ink-text); stroke-width: 1.5; }
.air-chart-pr-label { fill: var(--accent-ink-text) !important; font-weight: 700 !important; }
.air-chart-hairline { stroke: var(--dim); stroke-width: .8; }
.air-chart-focus { stroke: var(--panel); stroke-width: 2; }
.air-chart-hairline[hidden], .air-chart-focus[hidden] { display: none; }
.air-chart-hit { cursor: crosshair; }
.air-chart-tooltip {
  position: absolute; top: 8px; z-index: 3; min-width: 116px; max-width: 170px; padding: 8px 9px;
  transform: translateX(-50%); border: 1px solid var(--line2); border-radius: 9px; background: var(--panel);
  box-shadow: 0 10px 28px rgba(0,0,0,.3); pointer-events: none;
}
.air-chart-tooltip[hidden] { display: none; }
.air-chart-tooltip strong, .air-chart-tooltip span, .air-chart-tooltip em { display: block; }
.air-chart-tooltip strong { font: 500 9px var(--font-mono); color: var(--dim); }
.air-chart-tooltip span { margin-top: 4px; font: 600 11px var(--font-ui); color: var(--text); }
.air-chart-tooltip em { margin-top: 2px; font: 500 9.5px var(--font-mono); color: var(--dim); font-style: normal; }
.air-chart-shared-tip { top: 34px; min-width: 142px; max-width: 190px; }
.air-chart-shared-tip em { display: flex; justify-content: space-between; gap: 10px; }
.air-chart-shared-tip em b { color: var(--dim); font: 600 9px var(--font-ui); }
.air-chart-shared-tip em i { color: var(--text); font-style: normal; white-space: nowrap; }
.air-chart-shared-tip em small { color: var(--dim); font: inherit; }
.air-chart-empty { min-height: 86px; display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--dim); font: 500 11px/1.4 var(--font-ui); text-align: center; }
.air-chart-empty .wt-icon { width: 17px; height: 17px; flex: none; }
.air-footer { display: flex; justify-content: flex-end; margin-top: 8px; }
.air-wrong { display: inline-flex; gap: 5px; align-items: center; padding: 6px 0; border: 0; background: transparent; color: var(--dim); font: 600 10.5px var(--font-ui); cursor: pointer; }
.air-wrong .wt-icon { width: 13px; height: 13px; }
.air-wrong.flagged { color: var(--bad); }
@media (prefers-reduced-motion: no-preference) {
  .air-chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: airChartDraw .4s ease forwards; }
}
@keyframes airChartDraw { to { stroke-dashoffset: 0; } }
/* Locked (non-Pro) finish-screen coach take: the fake paragraph is typewritten
   then blurred (blur rule shared with .rp-ai-fake) so it reads like the coach
   wrote a real note that's gated behind Pro. Lockline reuses .rp-ai-lockline. */
.finish-coach .fc-fake .fc-text { margin: 0; }
.finish-coach .rp-ai-lockline { margin-top: 10px; }
/* Typewriter caret while the coach's take "types" itself in */
.fc-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--accent); vertical-align: text-bottom;
  animation: fc-blink 0.9s steps(1) infinite;
}
@keyframes fc-blink { 50% { opacity: 0; } }
/* Session-detail (history) placement: sits between the heading and the stat
   cards. Header-row layout — small badge inline with the label, note text
   full-width below (the finish-page side-by-side layout indents the whole
   paragraph past the big badge, which reads as broken left padding here). */
.finish-coach.sd-coach {
  margin: 4px 16px 18px; animation: none;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px;
}
.finish-coach.sd-coach .fc-badge { width: 26px; height: 26px; border-radius: 8px; }
.finish-coach.sd-coach .fc-badge svg { width: 14px; height: 14px; }
.finish-coach.sd-coach .fc-copy { display: contents; }
.finish-coach.sd-coach .fc-title { margin: 0; }
.finish-coach.sd-coach .fc-body { grid-column: 1 / -1; margin-top: 10px; }
.finish-done { margin-top: 22px; }
.finish-done .btn-done {
  width: 100%; background: var(--accent); color: var(--ink); border: none;
  border-radius: 16px; padding: 16px; font: 700 16px var(--font-ui); cursor: pointer;
}

@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── Finish celebration (v74): confetti + rings + achievement chip + quote ── */
.finish-check-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.finish-hero.celebrate .finish-check { animation: fin-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes fin-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { transform: scale(1.16); } 100% { opacity: 1; transform: scale(1); } }
.fin-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: fin-ring 1.1s ease-out 2; pointer-events: none; }
.fin-ring.d { animation-delay: 0.4s; }
@keyframes fin-ring { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(2.3); opacity: 0; } }
.fin-confetti { position: absolute; left: 50%; top: 50%; animation: fin-confetti 1.4s ease-out both; pointer-events: none; }
@keyframes fin-confetti {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) rotate(220deg) scale(1); }
}
.fin-achieve {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 8px 15px; border-radius: 100px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  font: 700 12.5px var(--font-mono); color: var(--accent-ink-text); white-space: nowrap;
  animation: fin-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
.fin-achieve svg { width: 14px; height: 14px; }
@keyframes fin-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Share your workout (v74): canvas card preview + format toggle + share ── */
/* Stacked layout: big preview on top so the user can actually read the card,
   format/actions below (was a cramped side-by-side thumbnail). */
.share-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px;
}
.share-preview-wrap { display: flex; justify-content: center; }
.share-preview {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid var(--line2); background: var(--bg);
  transition: opacity 0.2s ease;
}
.share-preview.story { width: 62%; aspect-ratio: 9 / 16; }
.share-preview.loading { opacity: 0.35; }
.share-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.share-fmts { display: flex; gap: 6px; }
.share-fmt {
  flex: 1; border: 1px solid var(--line2); background: transparent; border-radius: 9px;
  padding: 8px 4px; font: 600 11px var(--font-mono); color: var(--dim); cursor: pointer;
  white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.share-fmt.active { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent-ink-text); }
.share-actions { display: flex; gap: 8px; }
.btn-share {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1; min-width: 0; border: none; border-radius: 12px; padding: 12px;
  background: var(--accent); color: var(--ink); font: 700 14px var(--font-ui); cursor: pointer;
}
.btn-share svg { width: 16px; height: 16px; }
.btn-dl {
  flex: none; width: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line2); background: transparent; border-radius: 12px;
  color: var(--text); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.btn-dl svg { width: 17px; height: 17px; }
.share-hint { font: 400 11px var(--font-ui); color: var(--dim2); line-height: 1.4; }
@media (hover: hover) {
  .share-fmt:hover { color: var(--text); border-color: var(--line2); }
  .share-fmt.active:hover { color: var(--accent-ink-text); }
  .btn-share:hover { filter: brightness(1.06); }
  .btn-dl:hover { color: var(--accent-ink-text); border-color: rgba(var(--accent-rgb), 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .fin-confetti, .fin-ring { display: none; }
  .finish-hero.celebrate .finish-check, .fin-achieve, .finish-coach.live { animation: none; }
}

/* ═══ Reports dashboard (v53) — professional KPI board, Ironclad ════════════ */
.rp-head { padding: 0 2px; margin-bottom: 16px; }
.rp-eyebrow { font: 400 12px var(--font-mono); letter-spacing: 2px; color: var(--dim); }
.rp-title { margin: 4px 0 0; font: 700 28px var(--font-ui); letter-spacing: -0.6px; }

/* KPI row — the scannable headline metrics. */
.rp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.rp-kpi-k { font: 400 10px var(--font-mono); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.rp-kpi-v { font: 700 24px var(--font-mono); letter-spacing: -0.5px; margin-top: 8px; color: var(--text); white-space: nowrap; }
.rp-kpi-v.accent { color: var(--accent-ink-text); }
.rp-kpi-v .u { font-size: 12px; color: var(--dim); margin-left: 3px; letter-spacing: 0; }
.rp-kpi-sub { font: 400 11px var(--font-ui); color: var(--dim2); margin-top: 3px; }
.rp-kpi-sub.up { color: var(--good); }
.rp-kpi-sub.down { color: var(--bad); }

/* Generic dashboard card. */
.rp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-top: 12px; }
.rp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.rp-card-title { font: 600 14px var(--font-ui); color: var(--text); }
.rp-card-sub { font: 400 11px var(--font-mono); color: var(--dim); margin-top: 3px; }
.rp-card-metric { font: 700 15px var(--font-mono); color: var(--accent-ink-text); white-space: nowrap; text-align: right; }
.rp-card-metric span { font-weight: 400; font-size: 11px; color: var(--dim); }

/* ─── Growth chart (per-workout-day volume curves) ─── */
.gr-card {
  overflow: visible; border-radius: 20px; padding: 18px 18px 16px;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.9);
}
.gr-head { flex-wrap: wrap; row-gap: 12px; margin-bottom: 16px; }
.gr-ranges { flex: none; }
.gr-body { margin-top: 0; }
.gr-loading { margin-top: 12px; }

/* Header: volt eyebrow + title + range-aware sub. */
.gr-eyebrow { font: 400 10.5px var(--font-mono); letter-spacing: 0.14em; color: var(--accent-ink-text); margin-bottom: 8px; }
.gr-title { font: 600 21px var(--font-ui); color: #fff; letter-spacing: -0.01em; line-height: 1.05; }
.gr-sub { font: 400 12px var(--font-mono); color: rgba(255,255,255,0.42); margin-top: 7px; }

/* Range pills — flat volt-on-glass toggle (overrides .wt-ranges). */
.gr-ranges.wt-ranges { background: rgba(255,255,255,0.04); border-radius: 9px; padding: 3px; gap: 2px; }
.gr-ranges .chart-pill {
  font: 400 11px var(--font-mono); text-transform: none; letter-spacing: 0;
  padding: 4px 10px; border-radius: 7px; color: rgba(255,255,255,0.5); background: transparent; box-shadow: none;
}
.gr-ranges .chart-pill.active { color: var(--accent-ink-text); background: rgba(var(--accent-rgb),0.13); font-weight: 700; }

/* View segmented control (By day | Overall). Rounded pill-in-container skin
   to match the Profile units segmented (.pf-seg). */
.gr-views {
  display: flex; gap: 4px; margin: 14px 0 4px; padding: 4px;
  background: var(--panel2); border-radius: 12px;
}
.gr-vtab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font: 500 12px var(--font-ui); letter-spacing: 0.01em;
  color: rgba(255,255,255,0.5); padding: 9px 12px; border-radius: 9px;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gr-vtab:hover { color: rgba(255,255,255,0.82); }
.gr-vtab.sel { color: var(--ink); background: var(--accent); font-weight: 700; }

/* Overall (aggregate) view: single volt line, soft volt→transparent area fill,
   filled latest dot. Sharp miter joins to match the sharp-edged control. */
.gr-osvg .gr-oline { fill: none; stroke-width: 1.75; stroke-linejoin: miter; stroke-linecap: butt; }
.gr-osvg .gr-oarea { stroke: none; }
.gr-osvg .gr-odot { stroke: var(--panel); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .gr-osvg .gr-ofade { animation: grFade 0.7s ease forwards; }
}
@keyframes grFade { from { opacity: 0; } to { opacity: 1; } }

/* Legend: flat wrapping items = swatch + day name + growth %. */
.gr-legend { display: flex; flex-wrap: wrap; gap: 10px 15px; margin-top: 15px; }
.gr-leg {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: transparent; border: none; padding: 0; transition: opacity 0.15s ease;
}
.gr-leg.off { opacity: 0.42; }
.gr-leg.off .gr-leg-nm { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.3); }
.gr-leg-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--sw); }
.gr-leg.off .gr-leg-sw { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sw); }
.gr-leg-nm { font: 500 12.5px var(--font-ui); color: rgba(255,255,255,0.82); white-space: nowrap; }
.gr-leg-g { font: 400 11.5px var(--font-mono); }
.gr-leg-g.up { color: #8fce9b; }
.gr-leg-g.down { color: #e08b74; }
.gr-leg-g.flat { color: rgba(255,255,255,0.35); }

/* Plot area. The SVG scales to the container width (viewBox + width:100%). */
.gr-plot { position: relative; }
.gr-svg { width: 100%; max-width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.gr-svg .gr-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.gr-svg .gr-axis { fill: rgba(255,255,255,0.32); font-size: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gr-svg .gr-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
/* Line-chart look: no static markers; a single dot + ring appear on hover. */
.gr-svg .gr-dot { stroke: var(--panel); stroke-width: 2; opacity: 0; transition: r 0.12s ease; }
.gr-svg .gr-dot.on { r: 4.5; opacity: 1; }
.gr-svg .gr-ring { fill: none; stroke-width: 1; opacity: 0.4; }
.gr-svg .gr-cursor { stroke: rgba(255,255,255,0.2); stroke-width: 1; stroke-dasharray: 3 3; }

/* Staggered line draw-in (reduced-motion gated: no .gr-draw class emitted). */
.gr-svg .gr-draw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: grDraw 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--gr-delay, 0s);
}
@keyframes grDraw { to { stroke-dashoffset: 0; } }

/* Tooltip: date line, then swatch + day name + bold volume. */
.gr-tip {
  position: absolute; pointer-events: none; z-index: 5; white-space: nowrap;
  background: #1c1f27; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px 11px; box-shadow: 0 12px 32px -10px rgba(0,0,0,0.8);
  transform: translate(-50%, calc(-100% - 12px));
}
.gr-tip[hidden] { display: none; }
.gr-tip-d { display: block; font: 400 10.5px var(--font-mono); color: rgba(255,255,255,0.45); margin-bottom: 6px; }
.gr-tip-row { display: flex; align-items: center; gap: 7px; }
.gr-tip-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.gr-tip-day { font: 500 12px var(--font-ui); color: rgba(255,255,255,0.8); }
.gr-tip-v { font: 700 12.5px var(--font-mono); color: #fff; margin-left: 8px; }

.gr-foot { margin-top: 12px; font: 400 10.5px var(--font-mono); color: var(--dim2); text-align: center; }

/* Empty / low-data state: faint 4-band grid, volt glyph, copy, volt-outline CTA. */
.gr-empty {
  position: relative; overflow: hidden; border-radius: 14px;
  min-height: 210px; padding: 30px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.015);
}
.gr-empty.small { min-height: 0; padding: 20px 14px; background: none; }
.gr-empty-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 100% 25%;
}
.gr-empty-ic { display: block; opacity: 0.55; margin-bottom: 16px; position: relative; }
.gr-empty-t { font: 600 15px var(--font-ui); color: rgba(255,255,255,0.9); position: relative; }
.gr-empty-s { font: 400 11.5px var(--font-mono); line-height: 1.6; color: rgba(255,255,255,0.4); margin-top: 9px; max-width: 300px; margin-left: auto; margin-right: auto; position: relative; }
.gr-empty-cta {
  margin-top: 20px; position: relative; cursor: pointer;
  font: 600 12.5px var(--font-ui); color: var(--accent-ink-text);
  background: transparent; border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 9px; padding: 8px 16px;
  transition: background 0.15s ease;
}
.gr-empty-cta:hover { background: rgba(var(--accent-rgb),0.08); }

@media (min-width: 700px) {
  .gr-card { padding: 26px 26px 22px; }
  .gr-head { margin-bottom: 22px; }
  .gr-title { font-size: 26px; }
  .gr-sub { font-size: 13px; }
  .gr-ranges .chart-pill { font-size: 12px; padding: 5px 13px; }
  .gr-legend { gap: 11px 22px; margin-top: 20px; }
  .gr-leg-nm { font-size: 13px; }
  .gr-leg-g { font-size: 12px; }
  .gr-empty { min-height: 300px; }
  .gr-empty-t { font-size: 16px; }
  .gr-empty-s { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-svg .gr-draw { animation: none; stroke-dashoffset: 0; }
}
/* view-comparison has no .section wrapper — give its content the app gutters. */
#comparison-content { padding: 8px 16px 24px; }

/* ─── AI reports (Reports-tab section + detail sub-view + all-reports sheet) ── */
.rp-ai { margin-top: 12px; }
.rp-ai-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0; }
.rp-ai-ic { color: var(--accent-ink-text); display: flex; flex: none; }
.rp-ai-ic .wt-icon { width: 16px; height: 16px; }
.rp-ai-head .rp-seeall { margin-left: auto; }
.rp-ai-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.rp-ai-cards.single { grid-template-columns: 1fr; }
.rp-ai-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 100%; min-width: 0; text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px; cursor: pointer; transition: border-color 0.15s ease;
}
.rp-ai-card:hover { border-color: rgba(var(--accent-rgb), 0.4); }
/* Big line = report kind, small line = date range (ellipsized so a long
   range can never push the half-width card past the screen gutter). */
.rp-ai-k { font: 700 15px var(--font-ui); letter-spacing: -0.3px; color: var(--text); padding-right: 20px; }
.rp-ai-period {
  font: 400 10px var(--font-mono); letter-spacing: 0.6px; color: var(--accent-ink-text); text-transform: uppercase;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-ai-preview {
  font: 400 12px var(--font-ui); line-height: 1.45; color: var(--dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rp-ai-chev { position: absolute; top: 14px; right: 12px; color: var(--dim2); display: flex; }
.rp-ai-chev .wt-icon { width: 16px; height: 16px; }

/* Locked (non-Pro) report teaser: the server withheld the prose; the blurred
   line is a static placeholder, never real content. */
.rp-ai-card.locked .rp-ai-fake, .finish-coach .fc-fake { filter: blur(4px); opacity: 0.65; user-select: none; pointer-events: none; }
.rp-ai-lockline { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 600 11px var(--font-ui); color: var(--accent-ink-text); text-align: left; }
.rp-ai-lockline .wt-icon, .rp-ai-lockline svg { width: 12px; height: 12px; flex: none; }
.air-sheet-row.locked .air-sheet-period { color: var(--dim); }

/* Detail sub-view (no .section wrapper — same gutters/column as comparison). */
#ai-report-content { padding: 8px 16px 24px; }
.air-head { margin-top: 10px; }
.air-kicker { font: 400 10px var(--font-mono); letter-spacing: 1.5px; color: var(--accent-ink-text); text-transform: uppercase; }
.air-title { font: 700 28px var(--font-ui); letter-spacing: -0.6px; margin: 6px 0 0; }
.air-period { font: 500 13px var(--font-mono); color: var(--dim); margin-top: 6px; }
.air-sec-k { font: 400 9px var(--font-mono); letter-spacing: 1.25px; color: var(--accent-ink-text); text-transform: uppercase; }
.air-diagnosis { margin-top: 18px; }
.air-diag-main {
  padding: 16px; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), rgba(22, 24, 29, 0.86));
}
.air-diag-main h3 { font: 700 20px var(--font-ui); letter-spacing: -0.45px; line-height: 1.15; margin: 7px 0 8px; }
.air-diag-main p { font: 400 14px var(--font-ui); line-height: 1.5; color: var(--dim); margin: 0; }
.air-diag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.air-diag-card {
  min-width: 0; display: flex; flex-direction: column; gap: 7px;
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.air-diag-ic { color: var(--accent-ink-text); display: flex; }
.air-diag-ic .wt-icon { width: 16px; height: 16px; }
.air-diag-k { font: 600 10px var(--font-mono); letter-spacing: 0.8px; color: var(--dim); text-transform: uppercase; }
.air-diag-v { font: 600 13px var(--font-ui); line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.air-risk-badge {
  align-self: flex-start; padding: 4px 7px; border-radius: 999px;
  font: 700 9px var(--font-mono); letter-spacing: 0.7px; color: var(--accent-text); background: var(--accent);
}
.air-diag-card.risk.medium .air-risk-badge { color: #111; background: #f4c542; }
.air-diag-card.risk.high .air-risk-badge { color: #fff; background: #e65b5b; }
.air-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.air-score {
  min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.air-score-k { font: 400 9px var(--font-mono); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air-score-v { font: 700 24px var(--font-mono); letter-spacing: -0.7px; color: var(--text); margin-top: 5px; }
.air-score-v.accent { color: var(--accent-ink-text); }
.air-score-s { font: 500 11px var(--font-ui); line-height: 1.3; color: var(--dim2); margin-top: 3px; min-height: 28px; }
.air-panel { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.air-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.air-panel-head h3 { font: 700 17px var(--font-ui); letter-spacing: -0.35px; margin: 4px 0 0; }
.air-chart-legend { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; font: 600 10px var(--font-mono); color: var(--dim); text-transform: uppercase; }
.air-chart-legend span:first-child::before, .air-chart-legend span:last-child::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 5px; vertical-align: 0;
}
.air-chart-legend span:first-child::before { background: var(--accent); }
.air-chart-legend span:last-child::before { background: var(--line2); }
.air-chart-row { display: grid; grid-template-columns: 86px 1fr 42px; align-items: center; gap: 10px; margin-top: 11px; }
.air-chart-label { font: 600 12px var(--font-ui); color: var(--text); }
.air-chart-track { position: relative; height: 30px; border-radius: 10px; background: var(--panel2); overflow: hidden; }
.air-chart-bar { position: absolute; left: 0; height: 11px; border-radius: 999px; }
.air-chart-bar.now { top: 5px; background: var(--accent); }
.air-chart-bar.prev { bottom: 5px; background: var(--line2); }
.air-chart-nums { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font: 700 11px var(--font-mono); color: var(--dim); }
.air-day-bars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
  gap: 6px; align-items: end; min-height: 112px; margin: 2px 0 14px; padding: 8px 2px 0;
}
.air-day { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.air-day-track {
  width: 100%; height: 82px; display: flex; align-items: flex-end; justify-content: center;
  border-radius: 10px; background: var(--panel2); overflow: hidden;
}
.air-day-bar { width: 100%; border-radius: 10px 10px 0 0; background: var(--line2); opacity: 0.75; }
.air-day-bar.active { background: var(--accent); opacity: 1; box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18); }
.air-day-label { font: 700 9px var(--font-mono); color: var(--dim2); text-transform: uppercase; white-space: nowrap; }
.air-coverage, .air-pr-list { scroll-margin-top: 16px; }
.air-cov-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.air-cov-chip {
  padding: 7px 9px; border-radius: 999px; border: 1px solid var(--line);
  font: 700 11px var(--font-mono); color: var(--dim); background: var(--panel2);
}
.air-cov-chip.hit { border-color: rgba(var(--accent-rgb), 0.35); color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.08); }
.air-cov-chip.miss { border-color: rgba(230, 91, 91, 0.34); color: #ff9c9c; }
.air-category-chart { scroll-margin-top: 16px; }
.air-category-row { padding: 10px 0; border-top: 1px solid var(--line); }
.air-category-row:first-of-type { border-top: none; padding-top: 0; }
.air-category-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.air-category-top span { font: 700 13px var(--font-ui); color: var(--text); }
.air-category-top b { font: 700 10px var(--font-mono); color: var(--dim); white-space: nowrap; }
.air-category-track { height: 9px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.air-category-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.air-exercise-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.air-exercise-row:first-of-type { border-top: none; padding-top: 0; }
.air-ex-name { font: 700 14px var(--font-ui); letter-spacing: -0.2px; color: var(--text); }
.air-ex-sub { font: 500 11px var(--font-mono); color: var(--dim2); margin-top: 2px; }
.air-ex-move { display: flex; align-items: center; gap: 7px; font: 700 12px var(--font-mono); color: var(--dim); white-space: nowrap; }
.air-ex-move b { color: var(--dim2); font: inherit; }
.air-ex-state { padding: 5px 7px; border-radius: 999px; font: 700 9px var(--font-mono); letter-spacing: 0.7px; text-transform: uppercase; color: var(--dim); background: var(--panel2); }
.air-exercise-row.up .air-ex-state { color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.09); }
.air-exercise-row.down .air-ex-state { color: #ff9c9c; background: rgba(230, 91, 91, 0.12); }
.air-pr-count { font: 700 24px var(--font-mono); color: var(--accent-ink-text); line-height: 1; }
.air-pr-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.air-pr-row:first-of-type { border-top: none; padding-top: 0; }
.air-pr-ic { color: var(--accent-ink-text); display: flex; }
.air-pr-ic .wt-icon { width: 15px; height: 15px; }
.air-pr-name { font: 700 13px var(--font-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.air-pr-val { font: 700 12px var(--font-mono); color: var(--dim); white-space: nowrap; }
.air-empty-line { font: 500 13px var(--font-ui); line-height: 1.45; color: var(--dim); }
.air-body { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.air-coach-take { border-color: rgba(var(--accent-rgb), 0.22); }
.air-typing-text { margin-top: 8px; }
.air-body.typing .ai-md-p:last-child::after,
.air-body.typing .ai-md-list li:last-child::after {
  content: ""; display: inline-block; width: 7px; height: 1.1em; margin-left: 3px;
  background: var(--accent); border-radius: 1px; vertical-align: -0.18em;
  animation: air-caret 0.75s steps(1) infinite;
}
@keyframes air-caret {
  0%, 52% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
.air-p { font: 400 15px var(--font-ui); line-height: 1.65; color: var(--text); margin: 0 0 14px; }
.air-p:last-child { margin-bottom: 0; }
.air-typing-text .ai-md {
  font: 400 15px/1.65 var(--font-ui); color: var(--text);
}
.ai-md { display: block; overflow-wrap: break-word; }
.ai-md-p { margin: 0 0 8px; }
.ai-md-p:last-child { margin-bottom: 0; }
.ai-md-h {
  font: 700 11.5px/1.35 var(--font-mono); letter-spacing: 0.08em;
  color: var(--accent-ink-text); text-transform: uppercase; margin: 0 0 7px;
}
.ai-md-list { margin: 6px 0 0; padding-left: 18px; }
.ai-md-list + .ai-md-p,
.ai-md-list + .ai-md-h { margin-top: 9px; }
.ai-md-list li { margin: 4px 0; padding-left: 1px; }
.ai-md strong { font-weight: 700; color: var(--text); }

@media (max-width: 700px) {
  .air-diag-grid, .air-stats { grid-template-columns: 1fr; }
  .air-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
  .air-score-v { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .air-score-s { min-height: 0; }
  .air-chart-row { grid-template-columns: 74px 1fr 34px; gap: 8px; }
  .air-day-bars { gap: 5px; min-height: 98px; }
  .air-day-track { height: 70px; }
  .air-category-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .air-exercise-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .air-ex-move { white-space: normal; flex-wrap: wrap; }
  .air-ex-state { justify-self: start; }
  .air-pr-row { grid-template-columns: 22px minmax(0, 1fr); }
  .air-pr-val { grid-column: 2; white-space: normal; }
}

/* All-reports bottom sheet (on the .day-sheet base). */
.air-sheet-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.air-sheet-row {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; text-align: left; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; cursor: pointer;
}
.air-sheet-row:active { border-color: var(--line2); }
.air-sheet-k { font: 400 9px var(--font-mono); letter-spacing: 1px; color: var(--accent-ink-text); text-transform: uppercase; }
.air-sheet-period { font: 700 14px var(--font-mono); letter-spacing: -0.3px; color: var(--text); }
.air-sheet-row .rp-ai-chev { top: 50%; transform: translateY(-50%); }

/* Shared Pro upsell bottom sheet (day-sheet base) — the ONE paywall surface. */
.pro-upsell { text-align: center; }
.pro-upsell .pu-lock {
  width: 46px; height: 46px; border-radius: 15px; margin: 4px auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent-ink-text);
}
.pro-upsell .pu-lock .wt-icon, .pro-upsell .pu-lock svg { width: 20px; height: 20px; }
.pro-upsell .day-sheet-title { text-align: center; }
.pro-upsell .pu-line { font: 400 14px var(--font-ui); line-height: 1.5; color: var(--dim); margin: 8px 0 18px; }
.pro-upsell .pu-gopro {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; border: none; border-radius: var(--radius-input); padding: 14px;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
  font: 700 15px var(--font-ui); letter-spacing: -0.2px;
  box-shadow: var(--shadow-cta); transition: background 0.15s ease;
}
.pro-upsell .pu-gopro:active { background: var(--accent-pressed); }
.pro-upsell .pu-gopro .wt-icon, .pro-upsell .pu-gopro svg { width: 16px; height: 16px; }

/* Two-up row (frequency + split). */
.rp-two { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.rp-two > * { margin-top: 0; }
.rp-two .rp-card, .rp-two .freq-card { margin-top: 0; }
#frequency-content .freq-card { margin: 0; }
#frequency-content .rp-card-head { margin-bottom: 16px; align-items: center; }

/* Training split bars. */
.rp-split { display: flex; flex-direction: column; gap: 13px; margin-top: 8px; }
.rp-split-row { display: flex; align-items: center; gap: 12px; }
.rp-split-k { width: 46px; flex: none; font: 500 12.5px var(--font-ui); color: var(--text); }
.rp-split-track { flex: 1; height: 8px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.rp-split-fill { height: 100%; width: 100%; border-radius: 5px; transform-origin: left center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.rp-split-v { width: 40px; flex: none; text-align: right; font: 600 12px var(--font-mono); color: var(--dim); }

.rp-empty { padding: 26px 10px; text-align: center; color: var(--dim); font: 400 12px var(--font-ui); }

/* Latest-progress feature card (tap → comparison). */
.rp-progress {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: linear-gradient(150deg, #1a1d16, #111216); border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 18px; padding: 18px; margin-top: 12px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.rp-progress:hover { border-color: rgba(var(--accent-rgb), 0.4); }
.rp-progress-l { flex: 1; }
.rp-progress-k { font: 400 10px var(--font-mono); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.rp-progress-v { font: 700 32px var(--font-mono); letter-spacing: -1px; margin-top: 6px; }
.rp-progress-v.up { color: var(--good); }
.rp-progress-v.down { color: var(--bad); }
.rp-progress-v.flat { color: var(--text); }
.rp-progress-sub { font: 400 12px var(--font-ui); color: var(--dim); margin-top: 6px; }

/* Body-weight entry card (Weight lives under Reports now). Deliberately
   self-contained so it can be repositioned freely within the dashboard.
   Neutral styling: body-weight UI never takes the volt accent. */
.rp-weight {
  width: 100%; display: flex; align-items: center; gap: 13px; margin-top: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 17px;
  padding: 15px 16px; cursor: pointer; text-align: left; color: var(--text);
  transition: border-color 0.15s ease;
}
.rp-weight:hover { border-color: var(--line2); }
.rp-weight .rw-badge {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  background: var(--panel2); border: 1px solid var(--line);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
}
.rp-weight .rw-badge .wt-icon { width: 17px; height: 17px; }
.rp-weight .rw-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-weight .rw-title { font: 600 14.5px var(--font-ui); }
.rp-weight .rw-sub { font: 400 12px/1.45 var(--font-ui); color: var(--dim); }
.rp-weight > .wt-icon { width: 16px; height: 16px; color: var(--dim2); flex: none; }
.rp-progress-arrow { color: var(--dim2); display: flex; flex: none; }
.rp-progress-arrow .wt-icon { width: 20px; height: 20px; }
.rp-progress-content { margin-top: 0; }
.rp-progress-exname {
  font: 700 15px var(--font-ui); letter-spacing: -0.2px; color: var(--accent-ink-text);
  margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--line);
}

/* Per-exercise progress: top-lift rows + "See all" sheet trigger. */
.rp-seeall { background: none; border: none; padding: 4px 0; font: 600 12.5px var(--font-ui); color: var(--accent-ink-text); cursor: pointer; flex: none; }
.rp-ex-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 13px 2px; cursor: pointer; color: var(--text);
}
.rp-ex-row:last-of-type { border-bottom: none; }
.rp-ex-nm { font: 500 14px var(--font-ui); flex: 1; min-width: 0; }
.rp-ex-row.active .rp-ex-nm { color: var(--accent-ink-text); }
.rp-ex-meta { font: 400 11px var(--font-mono); color: var(--dim); white-space: nowrap; }
.rp-ex-chev { display: flex; color: var(--dim2); }
.rp-ex-chev svg { width: 15px; height: 15px; }

/* Exercise picker bottom sheet (reuses .day-sheet base). */
.ex-sheet { max-height: 76vh; display: flex; flex-direction: column; }
.ex-sheet-search {
  width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line2); color: var(--text);
  font: 400 14px var(--font-ui);
}
.ex-sheet-search:focus { outline: none; border-color: var(--accent-ink-text); }
.ex-sheet-list { flex: 1; overflow-y: auto; margin-top: 8px; overscroll-behavior: contain; }
.ex-sheet-group { font: 600 10.5px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin: 14px 2px 4px; }
.ex-sheet-row {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); padding: 12px 2px;
  font: 500 14px var(--font-ui); color: var(--text); cursor: pointer;
}
.ex-sheet-none { padding: 24px 0; text-align: center; color: var(--dim2); font: 400 13px var(--font-ui); }

/* ═══════════ Splits: manager · editor · day editor · pickers (Ironclad) ═══ */

/* Today rest / empty-split card */
.rest-hero {
  margin-top: 14px; background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 34px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.rest-hero .rest-icon { width: 46px; height: 46px; color: var(--accent-ink-text); opacity: 0.9; }
.rest-hero .rest-icon svg { width: 46px; height: 46px; stroke-width: 1.5; }
.rest-title { font: 700 21px var(--font-ui); letter-spacing: -0.4px; color: var(--text); margin-top: 16px; }
.rest-sub { font: 400 13.5px/1.6 var(--font-ui); color: var(--dim); margin-top: 8px; max-width: 320px; }
.rest-cta {
  margin-top: 20px; background: var(--accent); color: var(--ink);
  font: 700 14px var(--font-ui); border: none; border-radius: var(--radius-pill);
  padding: 12px 22px; cursor: pointer; transition: background 0.15s ease;
}
.rest-cta:hover { background: var(--accent-pressed); }

/* ─── Rest / empty-day screen — premium, minimal recovery hero ───────────── */
.rest-screen {
  margin-top: 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.rd-ring {
  width: 96px; height: 96px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink-text);
  background: color-mix(in srgb, var(--accent-ink-text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-ink-text) 22%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-ink-text) 4%, transparent);
}
.rd-ring svg { width: 40px; height: 40px; stroke-width: 1.5; }
.rest-h { font: 700 26px var(--font-ui); letter-spacing: -0.6px; color: var(--text); margin-top: 22px; }
.rest-p { font: 400 14px/1.6 var(--font-ui); color: var(--dim); margin-top: 10px; max-width: 320px; }
.rest-pips { justify-content: center; margin-top: 20px; }
.rest-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 26px; width: 100%; }
.rest-actions .rest-cta { margin-top: 0; }
.rest-cta.ghost {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-strong);
}
.rest-cta.ghost:hover { background: var(--card); border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
.rest-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); font: 600 13px var(--font-ui); padding: 8px 10px;
}
.rest-link svg { width: 15px; height: 15px; }
.rest-link:hover { color: var(--accent-ink-text); }
.rest-cardio { margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .rd-ring { animation: restBreathe 6s ease-in-out infinite; }
  @keyframes restBreathe {
    0%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-ink-text) 4%, transparent); }
    50% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent-ink-text) 2%, transparent); }
  }
}

/* Profile "Your split" card */
.pf-section-label { font: 700 11px var(--font-mono); letter-spacing: 1.5px; color: var(--dim2); margin: 22px 2px 10px; }
.pf-split-card {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.pf-split-l { flex: 1; min-width: 0; }
.pf-split-k { font: 700 10px var(--font-mono); letter-spacing: 1.5px; color: var(--accent-ink-text); }
.pf-split-name { font: 700 17px var(--font-ui); letter-spacing: -0.3px; color: var(--text); margin-top: 5px; }
.pf-split-meta { font: 400 12.5px var(--font-mono); color: var(--dim); margin-top: 4px; }
.pf-split-arrow { color: var(--dim2); display: flex; flex: none; }
.pf-split-arrow .wt-icon { width: 20px; height: 20px; }

/* Shared sub-view frame */
.sp-wrap { padding: 4px 16px 40px; }
.sp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sp-back {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.15s ease;
}
.sp-back .wt-icon { width: 20px; height: 20px; }
.sp-eyebrow { font: 700 11px var(--font-mono); letter-spacing: 2px; color: var(--dim2); }
.de-top .sp-eyebrow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-title { font: 700 27px var(--font-ui); letter-spacing: -0.6px; color: var(--text); margin: 0; }
.sp-lede { font: 400 13.5px/1.55 var(--font-ui); color: var(--dim); margin: 8px 2px 20px; }

/* Manager list */
.sp-list { display: flex; flex-direction: column; gap: 10px; }
.sp-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 4px;
  transition: border-color 0.15s ease;
}
.sp-item.current { border-color: rgba(var(--accent-rgb), 0.45); }
.sp-item-main { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 12px 14px; cursor: pointer; }
.sp-item-name { font: 700 16px var(--font-ui); letter-spacing: -0.3px; color: var(--text); }
.sp-item-meta { font: 400 12px var(--font-mono); color: var(--dim); margin-top: 3px; }
.sp-item-side { flex: none; padding-right: 8px; }
.sp-active-chip { font: 700 10px var(--font-mono); letter-spacing: 1px; color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.1); padding: 5px 9px; border-radius: var(--radius-pill); }
.sp-mini { font: 700 12px var(--font-ui); color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.sp-mini:hover { border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
.sp-add {
  width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 1.5px dashed var(--line2); border-radius: 15px; color: var(--text);
  font: 700 14px var(--font-ui); padding: 15px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.sp-add:hover { border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
.sp-add .wt-icon { width: 18px; height: 18px; }
.ed-add-row { display: flex; gap: 10px; }
.ed-add-row .sp-add { min-width: 0; }

/* Chooser + picker + exercise-form sheets (share the day-sheet base) */
.chooser-sheet, .picker-sheet, .exform-sheet {
  width: 100%; max-width: 480px; background: var(--panel);
  border-radius: 26px 26px 0 0; padding: 22px 20px calc(22px + var(--safe-bottom));
  animation: popIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); max-height: 86vh; display: flex; flex-direction: column;
}
.chooser-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; overflow-y: auto; }
.preset-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.preset-card:hover { border-color: var(--accent-ink-text); }
.preset-l { flex: 1; min-width: 0; }
.preset-name { font: 700 15.5px var(--font-ui); letter-spacing: -0.3px; color: var(--text); }
.preset-desc { font: 400 12px/1.5 var(--font-ui); color: var(--dim); margin-top: 4px; }
.preset-tag { font: 700 10px var(--font-mono); letter-spacing: 0.5px; color: var(--accent-ink-text); margin-top: 7px; text-transform: uppercase; }
.preset-arrow { color: var(--dim2); flex: none; display: flex; }
.preset-arrow .wt-icon { width: 18px; height: 18px; }
.chooser-custom {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 1.5px dashed var(--line2); border-radius: 14px; color: var(--text);
  font: 700 13.5px var(--font-ui); padding: 13px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.chooser-custom:hover { border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
.chooser-custom .wt-icon { width: 17px; height: 17px; }

/* AI program builder — featured card at the top of the chooser */
.chooser-ai {
  margin-top: 16px; display: flex; align-items: center; gap: 12px; text-align: left;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.04));
  border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: 14px; padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s ease;
}
.chooser-ai:hover { border-color: var(--accent-ink-text); }
.chooser-ai-ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.16); color: var(--accent-ink-text);
}
.chooser-ai-ic .wt-icon { width: 19px; height: 19px; }
.chooser-ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chooser-ai-body .t { font: 700 15.5px var(--font-ui); letter-spacing: -0.3px; color: var(--text); }
.chooser-ai-body .s { font: 400 12px/1.5 var(--font-ui); color: var(--dim); }
/* PRO tag on the AI entry when the user isn't Pro (billing live only) */
.chooser-pro-tag {
  flex: none; font: 700 9.5px var(--font-mono); letter-spacing: 1.2px;
  background: var(--accent); color: var(--ink);
  border-radius: var(--radius-pill); padding: 3px 8px;
}

/* AI questionnaire (shared by the chooser sheet and onboarding step) */
.ai-qs { margin-top: 16px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.ai-q-label { font: 700 10px var(--font-mono); letter-spacing: 1.4px; color: var(--dim); margin-bottom: 9px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip {
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  font: 600 13px var(--font-ui); transition: border-color 0.15s ease, color 0.15s ease;
}
.ai-chip:hover { color: var(--text); border-color: var(--line2); }
.ai-chip.sel { background: var(--accent); border-color: var(--accent-ink-text); color: var(--ink); font-weight: 700; }
.ai-generate {
  margin-top: 20px; width: 100%; padding: 15px; border: none; border-radius: 14px;
  background: var(--accent); color: var(--ink); font: 700 15px var(--font-ui);
  cursor: pointer; transition: filter 0.15s ease;
}
.ai-generate:hover { filter: brightness(1.06); }
.ai-generate-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ai-generate-label .wt-icon { width: 17px; height: 17px; }
.ai-wait { margin-top: 12px; text-align: center; font: 400 12px/1.5 var(--font-ui); color: var(--dim); }
/* Onboarding hosts the same chips on the dark ambient background */
.ob-ai-qs .ai-chip { background: rgba(255, 255, 255, 0.04); }
.ob-ai-qs .ai-chip.sel { background: var(--accent); }

/* In-editor AI split generation state */
.ai-split-pending,
.ai-split-error {
  margin-top: 18px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ai-split-orbit {
  width: 70px; height: 70px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink-text);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0.035);
  animation: aiSplitPulse 1.6s ease-in-out infinite;
}
.ai-split-orbit .wt-icon { width: 28px; height: 28px; }
.ai-split-k {
  margin-top: 24px;
  font: 700 10px var(--font-mono);
  letter-spacing: 1.4px;
  color: var(--accent-ink-text);
  text-transform: uppercase;
}
.ai-split-summary {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 18px;
}
.ai-split-summary span {
  padding: 7px 11px; border-radius: var(--radius-pill);
  background: var(--panel); border: 1px solid var(--line);
  font: 700 10.5px var(--font-mono); color: var(--dim);
}
.ai-split-error-ic {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger);
  background: rgba(255, 77, 109, 0.08);
  border: 1px solid rgba(255, 77, 109, 0.26);
  margin-bottom: 20px;
}
.ai-split-error-ic .wt-icon { width: 24px; height: 24px; }
.ai-split-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.ai-split-actions .sp-add { margin-top: 0; }
@keyframes aiSplitPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0.035); }
  50% { transform: translateY(-3px); box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0.02); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-split-orbit { animation: none; }
}

/* Editor day list */
.ed-title-btn { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.ed-title-edit { color: var(--dim2); display: flex; }
.ed-title-edit .wt-icon { width: 17px; height: 17px; }
.ed-title-btn:hover .ed-title-edit { color: var(--accent-ink-text); }
.ed-days { display: flex; flex-direction: column; gap: 10px; }
.ed-day-row { display: flex; align-items: stretch; gap: 8px; }
.ed-reorder { display: flex; flex-direction: column; gap: 3px; flex: none; justify-content: center; }
.ed-move {
  width: 30px; height: 24px; border-radius: 7px; background: var(--panel2); border: 1px solid var(--line);
  color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.ed-move .wt-icon { width: 15px; height: 15px; }
.ed-move:hover:not(:disabled) { color: var(--accent-ink-text); border-color: var(--line2); }
.ed-move:disabled { opacity: 0.3; cursor: default; }
.ed-day {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.ed-day.flex1 { flex: 1; min-width: 0; }
.ed-day:hover { border-color: var(--line2); }
.ed-day.rest { opacity: 0.66; }
.ed-day-wd { font: 700 11px var(--font-mono); letter-spacing: 1px; color: var(--dim2); width: 34px; flex: none; }
.ed-day-body { flex: 1; min-width: 0; }
.ed-day-name { font: 700 15.5px var(--font-ui); letter-spacing: -0.3px; color: var(--text); }
.ed-day-meta { font: 400 12px var(--font-mono); color: var(--dim); margin-top: 3px; }
.ed-day-arrow { color: var(--dim2); flex: none; display: flex; }
.ed-day-arrow .wt-icon { width: 18px; height: 18px; }
.ed-day-del { width: 42px; flex: none; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--dim2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.ed-day-del .wt-icon { width: 17px; height: 17px; }
.ed-day-del:hover { color: var(--bad); border-color: var(--bad); }
.ed-foot { margin-top: 24px; }
.ed-current-note { font: 400 13px var(--font-ui); color: var(--dim); text-align: center; }
.ed-activate { width: 100%; background: var(--accent); color: var(--ink); border: none; border-radius: var(--radius-input); font: 700 15px var(--font-ui); padding: 15px; cursor: pointer; transition: background 0.15s ease; }
.ed-activate:hover { background: var(--accent-pressed); }
/* Danger delete at the editor's foot — same idiom as .sd-delete on session detail. */
.ed-delete {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px auto 0; padding: 10px 16px;
  background: none; border: none; cursor: pointer;
  font: 600 13px var(--font-ui); color: var(--danger);
}
.ed-delete .wt-icon, .ed-delete svg { width: 15px; height: 15px; }

/* Day editor */
.rest-toggle { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.rest-toggle-label { font: 600 14.5px var(--font-ui); color: var(--text); }
.switch { width: 46px; height: 28px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); position: relative; cursor: pointer; transition: background 0.18s ease; flex: none; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--dim); transition: transform 0.18s ease, background 0.18s ease; }
.switch.on { background: var(--accent); border-color: var(--accent-ink-text); }
.switch.on .knob { transform: translateX(18px); background: var(--ink); }
.de-rest { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; color: var(--dim); font: 400 13.5px/1.5 var(--font-ui); }
.de-rest .wt-icon { width: 24px; height: 24px; color: var(--accent-ink-text); flex: none; }
.de-list { display: flex; flex-direction: column; gap: 9px; }
.de-ex { display: flex; align-items: stretch; gap: 8px; }
.de-ex-main { flex: 1; min-width: 0; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; cursor: pointer; transition: border-color 0.15s ease; }
.de-ex-main:hover { border-color: var(--line2); }
.de-ex-name { font: 600 15px var(--font-ui); color: var(--text); }
.de-ex-meta { font: 700 12px var(--font-mono); color: var(--accent-ink-text); margin-top: 3px; }
.de-ex-del { width: 42px; flex: none; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--dim2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.de-ex-del .wt-icon { width: 17px; height: 17px; }
.de-ex-del:hover { color: var(--bad); border-color: var(--bad); }
.de-empty { font: 400 13.5px var(--font-ui); color: var(--dim); text-align: center; padding: 22px 12px; background: var(--panel); border: 1px dashed var(--line2); border-radius: 13px; }

/* Exercise picker */
.picker-head { display: flex; align-items: center; justify-content: space-between; }
.picker-close { width: 34px; height: 34px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.picker-close .wt-icon { width: 18px; height: 18px; }
.picker-search { display: flex; align-items: center; gap: 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin-top: 14px; }
.picker-search .wt-icon { width: 18px; height: 18px; color: var(--dim2); flex: none; }
.picker-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font: 400 16px var(--font-ui); }
.picker-search input::placeholder { color: var(--dim2); }
.picker-custom-add[hidden] { display: none !important; }
.picker-custom-add { margin-top: 10px; display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--accent-ink-text); font: 700 13px var(--font-ui); border-radius: 11px; padding: 11px; cursor: pointer; }
.picker-custom-add .wt-icon { width: 16px; height: 16px; }
.picker-list { margin-top: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.picker-group { font: 700 11px var(--font-mono); letter-spacing: 1.5px; color: var(--dim2); margin: 16px 0 9px; display: flex; align-items: baseline; gap: 7px; }
.picker-group:first-child { margin-top: 4px; }
.picker-group-n { font: 400 10px var(--font-mono); color: var(--dim2); opacity: 0.7; letter-spacing: 0; }
.picker-none { font: 400 13px var(--font-ui); color: var(--dim); padding: 20px 4px; text-align: center; }

/* Muscle-group filter chips */
.picker-filters { flex: none; display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 11px; padding-bottom: 2px; }
.picker-filters::-webkit-scrollbar { display: none; }
.picker-filter { flex: none; background: var(--panel2); border: 1px solid var(--line); color: var(--dim); font: 600 12px var(--font-ui); border-radius: var(--radius-pill); padding: 7px 13px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.picker-filter.on { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent-ink-text); }

/* Exercise rows with demo thumbnails */
.picker-row { display: flex; align-items: center; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.picker-row:last-child { border-bottom: none; }
.picker-thumb { flex: none; width: 56px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--panel2); border: none; padding: 0; cursor: pointer; }
.picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-thumb.none { background: var(--panel2); }
.picker-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: none; color: var(--text); text-align: left; cursor: pointer; padding: 2px 0; }
.picker-row-name { font: 500 14px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.picker-row-eq { font: 400 11px var(--font-mono); color: var(--dim2); text-transform: capitalize; }
.picker-row-add { flex: none; color: var(--dim2); display: flex; }
.picker-row-add .wt-icon { width: 17px; height: 17px; }
.picker-row.added .picker-row-name { color: var(--accent-ink-text); }
.picker-row.added .picker-row-add { color: var(--accent-ink-text); }

/* Exercise demo overlay (2-frame crossfade) */
.exdemo-scrim { display: flex; align-items: center; justify-content: center; padding: 24px; }
.exdemo { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.exdemo-frames { position: relative; aspect-ratio: 850 / 567; background: #fff; }
.exdemo-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.exdemo-f2 { opacity: 0; animation: exdemo-xfade 2.2s ease-in-out infinite; }
@keyframes exdemo-xfade { 0%, 45% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .exdemo-f2 { animation: none; } }
.exdemo-body { padding: 16px 18px 18px; }
.exdemo-name { font: 600 17px var(--font-ui); }
.exdemo-eq { font: 400 11px var(--font-mono); color: var(--dim2); text-transform: capitalize; margin-top: 3px; }
.exdemo-body .exform-save { margin-top: 14px; }

/* Exercise form sheet */
.exform-field { margin-top: 14px; }
.exform-row { display: flex; gap: 12px; }
.exform-row .exform-field { flex: 1; }
.exform-label { display: block; font: 700 11px var(--font-mono); letter-spacing: 1px; color: var(--dim2); margin-bottom: 7px; }
.exform-input { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; color: var(--text); font: 500 16px var(--font-ui); outline: none; transition: border-color 0.15s ease; }
.exform-input:focus { border-color: var(--accent-ink-text); }
.exform-save { width: 100%; margin-top: 20px; background: var(--accent); color: var(--ink); border: none; border-radius: var(--radius-input); font: 700 15px var(--font-ui); padding: 15px; cursor: pointer; transition: background 0.15s ease; }
.exform-save:hover { background: var(--accent-pressed); }

/* Prompt modal field */
.prompt-field { margin: 6px 0 4px; }
.prompt-label { display: block; font: 700 11px var(--font-mono); letter-spacing: 1px; color: var(--dim2); margin-bottom: 8px; }
.prompt-input { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; color: var(--text); font: 500 16px var(--font-ui); outline: none; }
.prompt-input:focus { border-color: var(--accent-ink-text); }

/* Desktop centering for the split sub-views lives in the shared 880px
   sub-view rule inside the 920px media block (with comparison/session/etc). */

/* ─── Onboarding (post-signup one-time flow) ────────────────────────────────
   Full-screen overlay. Faithful to the designer's "Onboarding" Ironclad mockup:
   welcome → pick split → make it yours → ready. SVG icons (no emoji), retinted
   to the real presets, plus an age/gender step. */
.onboarding-root {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
}
body.ob-open { overflow: hidden; }

.ob-screen {
  position: relative;
  height: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% -10%, #15171c, #08090b 72%);
  overflow: hidden;
  isolation: isolate;
}
.ob-screen .volt { color: var(--accent-ink-text); }

/* ── ambient field: two drifting auroras + slow floating dots (behind all) ── */
.ob-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ob-aurora { position: absolute; border-radius: 50%; }
.ob-aurora-a {
  top: -40px; left: -30px; width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(127, 212, 255, 0.1), transparent 70%);
  animation: ob-aurora 13s ease-in-out infinite;
}
.ob-aurora-b {
  bottom: 40px; right: -40px; width: 210px; height: 210px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.09), transparent 70%);
  animation: ob-aurora 16s ease-in-out infinite reverse;
}
@keyframes ob-aurora {
  0% { transform: translate(-8%, 0) scale(1); opacity: 0.45; }
  50% { transform: translate(10%, 6%) scale(1.25); opacity: 0.8; }
  100% { transform: translate(-8%, 0) scale(1); opacity: 0.45; }
}
.ob-fdot { position: absolute; border-radius: 50%; }
.ob-fdot-1 { top: 28%; left: 12%; width: 6px; height: 6px; background: var(--accent); animation: ob-dot 6s ease-in-out infinite; }
.ob-fdot-2 { top: 44%; right: 15%; width: 5px; height: 5px; background: #7fd4ff; animation: ob-dot 7.5s ease-in-out 0.8s infinite; }
.ob-fdot-3 { top: 66%; left: 20%; width: 4px; height: 4px; background: var(--accent); animation: ob-dot 8.5s ease-in-out 1.4s infinite; }
.ob-fdot-4 { top: 18%; right: 22%; width: 4px; height: 4px; background: #ffa95b; animation: ob-dot 9s ease-in-out 0.4s infinite; }
@keyframes ob-dot { 0%, 100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(-20px); opacity: 0.65; } }

/* moving glow that drifts to a new vertical spot each step */
.ob-glow {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120px);
  width: 380px; height: 380px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12), transparent 68%);
  transition: transform 0.55s ease;
}

/* top chrome: back + progress bar */
.ob-chrome { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.ob-back {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 9px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  transition: opacity 0.3s ease, background 0.15s ease;
}
.ob-back .wt-icon { width: 18px; height: 18px; }
.ob-back:hover { background: var(--panel2); }
.ob-progress { flex: 1; display: flex; gap: 6px; }
.ob-seg-bar { flex: 1; height: 5px; border-radius: 3px; background: #2a2d34; transition: background 0.35s ease; }
.ob-seg-bar.on { background: var(--accent); }

/* step container + motion */
.ob-step { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ob-in-fwd { animation: ob-slide-fwd 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
.ob-in-back { animation: ob-slide-back 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes ob-slide-fwd { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes ob-slide-back { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }

.ob-scroll { overflow-y: auto; scrollbar-width: none; }
.ob-scroll::-webkit-scrollbar { width: 0; }

/* primary CTA */
.ob-cta {
  position: relative; overflow: hidden;
  flex: none; width: 100%; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 16px; padding: 17px;
  background: var(--accent); color: var(--ink);
  font: 700 16px var(--font-ui); cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.ob-cta:hover { filter: brightness(1.04); }
.ob-cta:active { transform: scale(0.98); }
.ob-cta[disabled] { opacity: 0.7; pointer-events: none; }
.ob-cta-txt { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.ob-cta .btn-spinner {
  width: 17px; height: 17px; box-sizing: border-box;
  border: 2.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
/* glow pulse + a shine that sweeps across the button (mockup "sheen") */
.ob-cta-glow { animation: ob-glow 2.8s ease-in-out infinite; }
.ob-cta-glow::after {
  content: ''; position: absolute; top: 0; left: 0; width: 36%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: ob-sheen 3.4s ease-in-out 1.2s infinite;
}
@keyframes ob-sheen {
  0% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(360%) skewX(-20deg); }
}
@keyframes ob-glow {
  0%, 100% { box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.5); }
  50% { box-shadow: 0 18px 46px -8px rgba(var(--accent-rgb), 0.85); }
}

/* headings shared */
.ob-title { margin: 0; font: 700 27px var(--font-ui); letter-spacing: -0.8px; }
.ob-sub { margin: 8px 0 0; font: 400 14px/1.5 var(--font-ui); color: var(--dim); }

/* ── step 0: welcome ── */
.ob-hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.ob-logo {
  width: 56px; height: 56px; border-radius: 16px;
  display: block; object-fit: cover;
  border: 1px solid var(--line);
  animation: ob-floaty 5s ease-in-out infinite;
}
@keyframes ob-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ob-title-lg { margin: 26px 0 0; font: 700 37px/1.05 var(--font-ui); letter-spacing: -1.4px; }
.ob-lead { margin: 16px 0 0; max-width: 300px; font: 400 15px/1.55 var(--font-ui); color: var(--dim); }
.ob-demo {
  position: relative; margin-top: 24px; padding: 15px; border-radius: 18px;
  background: linear-gradient(150deg, #1b1d23, #111216);
  border: 1px solid var(--line2); overflow: hidden;
  animation: ob-rise 0.5s ease 0.1s both;
}
@keyframes ob-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ob-demo-top { display: flex; justify-content: space-between; align-items: center; }
.ob-demo-live { font: 400 10px var(--font-mono); color: var(--accent-ink-text); }
.ob-demo-ex { font: 400 10px var(--font-mono); color: var(--dim); }
.ob-demo-nums { display: flex; gap: 9px; margin-top: 11px; }
.ob-demo-cell { flex: 1; padding: 7px 0; text-align: center; border-radius: 11px; background: var(--bg); }
.ob-demo-cell .k { font: 400 8px var(--font-mono); color: var(--dim); }
.ob-demo-cell .v { font: 700 22px var(--font-mono); }
/* the "Log set" bar with a filling progress sweep behind the label */
.ob-demo-bar {
  position: relative; margin-top: 11px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--panel2); color: var(--ink); overflow: hidden;
  font: 700 13px var(--font-ui);
}
.ob-demo-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--accent); animation: ob-fill 3.2s ease-in-out infinite; }
@keyframes ob-fill { 0% { width: 0; } 65%, 100% { width: 100%; } }
.ob-demo-bar-label, .ob-demo-bar .wt-icon { position: relative; z-index: 1; }
.ob-demo-bar .wt-icon { width: 16px; height: 16px; stroke-width: 2.6; }
/* the little check stamp that pops in over the card */
.ob-demo-stamp {
  position: absolute; right: 15px; bottom: 15px;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--good); color: var(--ink);
  animation: ob-stamp 3.2s ease-in-out infinite;
}
.ob-demo-stamp .wt-icon { width: 16px; height: 16px; stroke-width: 3; }
@keyframes ob-stamp {
  0%, 45% { opacity: 0; transform: scale(1.8); }
  62% { opacity: 1; transform: scale(0.85); }
  80%, 100% { opacity: 1; transform: scale(1); }
}

/* ── step 1: pick split ── */
.ob-split-list { flex: 1; min-height: 0; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ob-split-card {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 14px; border-radius: 16px; cursor: pointer;
  background: var(--panel); border: 1.5px solid var(--line);
  color: var(--text); /* <button> defaults to black text; force the theme colour */
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.ob-split-name { color: var(--text); }
.ob-split-card:hover { border-color: var(--line2); }
.ob-split-card:active { transform: scale(0.985); }
.ob-split-card.sel { background: rgba(var(--accent-rgb), 0.07); border-color: var(--accent-ink-text); }
.ob-split-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.ob-split-ic .wt-icon { width: 19px; height: 19px; }
.ob-split-body { flex: 1; min-width: 0; }
.ob-split-name { display: flex; align-items: center; gap: 8px; font: 600 15px var(--font-ui); }
.ob-pick-badge {
  font: 700 8px var(--font-mono); color: var(--ink); background: var(--accent);
  border-radius: 5px; padding: 2px 6px; letter-spacing: 0.5px;
}
.ob-split-sub { display: block; margin-top: 3px; font: 400 11.5px var(--font-mono); color: var(--dim); }
.ob-radio {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2px solid var(--dim2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.ob-radio .wt-icon { width: 13px; height: 13px; color: var(--ink); opacity: 0; transition: opacity 0.15s ease; }
.ob-split-card.sel .ob-radio { border-color: var(--accent-ink-text); background: var(--accent); }
.ob-split-card.sel .ob-radio .wt-icon { opacity: 1; }

/* ── step 1 (new): how many days a week ── */
.ob-days-list { flex: 1; min-height: 0; margin-top: 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ob-days-card {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 16px 18px; min-height: 64px; border-radius: 16px; cursor: pointer;
  background: var(--panel); border: 1.5px solid var(--line); color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  animation: ob-stagger 0.34s ease both; animation-delay: calc(var(--i) * 40ms + 0.04s);
}
.ob-days-card:hover { border-color: var(--line2); }
.ob-days-card:active { transform: scale(0.985); }
.ob-days-card.sel { background: rgba(var(--accent-rgb), 0.07); border-color: var(--accent-ink-text); }
.ob-days-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-days-n { flex: none; width: 34px; text-align: center; font: 700 30px var(--font-mono); letter-spacing: -1px; color: var(--text); }
.ob-days-card.sel .ob-days-n { color: var(--accent-ink-text); }
.ob-days-body { flex: 1; min-width: 0; }
.ob-days-lbl { display: block; font: 600 14px var(--font-ui); color: var(--text); }
.ob-days-hint { display: block; margin-top: 3px; font: 400 11.5px/1.4 var(--font-mono); color: var(--dim); }
.ob-days-card.sel .ob-radio { border-color: var(--accent-ink-text); background: var(--accent); }
.ob-days-card.sel .ob-radio .wt-icon { opacity: 1; }
@keyframes ob-stagger { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── step 2 (new): recommendation hero ── */
.ob-rec { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.ob-rec-kicker { text-align: center; font: 700 11px var(--font-mono); letter-spacing: 1.5px; color: var(--accent-ink-text); }
.ob-rec-hero {
  position: relative; overflow: hidden; margin-top: 14px; padding: 26px 22px;
  border-radius: 22px; text-align: center;
  background: linear-gradient(155deg, #1b1d23, #111216); border: 1px solid var(--line2);
  animation: ob-rise 0.5s ease 0.08s both;
}
.ob-rec-hero::after {
  content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.13), transparent 70%);
}
.ob-rec-ic { position: relative; width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.ob-rec-ic .wt-icon { width: 27px; height: 27px; }
.ob-rec-name { position: relative; margin-top: 16px; font: 700 24px var(--font-ui); letter-spacing: -0.6px; color: var(--text); }
.ob-rec-desc { position: relative; margin-top: 10px; font: 400 13.5px/1.55 var(--font-ui); color: var(--dim); }
.ob-week { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.ob-week-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a2d34; }
.ob-week-dot.on { background: var(--accent); box-shadow: 0 0 8px -1px rgba(var(--accent-rgb), 0.6); }
.ob-rec-note { margin: 16px 0 0; text-align: center; font: 400 12.5px/1.5 var(--font-ui); color: var(--dim); }
.ob-rec-alt { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; margin-top: 12px; }
.ob-alt-link {
  border: none; background: transparent; cursor: pointer; padding: 8px 12px; min-height: 44px;
  border-radius: 10px; font: 600 13px var(--font-ui); color: var(--dim);
  transition: color 0.15s ease, background 0.15s ease;
}
.ob-alt-link:hover { color: var(--text); background: var(--panel); }
.ob-alt-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--text); }

/* ── step 2 (preview): your week in detail ── */
.ob-pv-head { flex: none; }
.ob-pv-kicker { font: 700 11px var(--font-mono); letter-spacing: 1.5px; color: var(--accent-ink-text); margin-bottom: 10px; }
.ob-pv-body { flex: 1; min-height: 0; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ob-pv-loading, .ob-pv-retry { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--dim); font: 400 13.5px var(--font-ui); }
.ob-pv-loading .btn-spinner { width: 24px; height: 24px; box-sizing: border-box; border: 2.5px solid var(--dim2); border-top-color: var(--accent-ink-text); border-radius: 50%; animation: spin 0.7s linear infinite; }
.ob-pv-retry-msg { margin: 0; }
.ob-pv-retry-btn { border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 12px; padding: 12px 22px; min-height: 44px; font: 600 14px var(--font-ui); cursor: pointer; transition: border-color 0.15s ease; }
.ob-pv-retry-btn:hover { border-color: var(--accent-ink-text); }
.ob-pv-retry-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ob-pv-day {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  animation: ob-stagger 0.34s ease both; animation-delay: calc(var(--i) * 45ms + 0.04s);
}
.ob-pv-day-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; padding: 0 8px; }
.ob-pv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 8px -1px currentColor; }
.ob-pv-day-name { font: 700 15px var(--font-ui); letter-spacing: -0.2px; color: var(--text); }

/* rest day = a slim, quiet row */
.ob-pv-day.rest { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: transparent; border-style: dashed; }
.ob-pv-rest-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim2); flex: none; }
.ob-pv-rest-name { font: 600 13px var(--font-ui); color: var(--dim); }
.ob-pv-rest-tag { margin-left: auto; font: 400 10px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim2); }

.ob-pv-ex-list { display: flex; flex-direction: column; gap: 2px; }
.ob-pv-ex { border-radius: 10px; transition: opacity 0.22s ease, transform 0.22s ease; }
.ob-pv-ex.removing { opacity: 0; transform: translateX(-14px); }
.ob-pv-ex-head {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 8px; min-height: 48px; border: none; background: transparent; cursor: pointer;
  color: var(--text); border-radius: 10px; transition: background 0.15s ease;
}
.ob-pv-ex-head:hover { background: var(--panel2); }
.ob-pv-ex-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ob-pv-ex-name { flex: 1; min-width: 0; font: 500 14px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-pv-ex-meta { flex: none; display: flex; align-items: center; gap: 9px; }
.ob-pv-ex-sum { font: 500 13px var(--font-mono); color: var(--dim); white-space: nowrap; }
.ob-pv-ex-flag { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 0.2s ease; box-shadow: 0 0 6px -1px rgba(var(--accent-rgb), 0.7); }
.ob-pv-ex.edited .ob-pv-ex-flag { opacity: 1; }
.ob-pv-ex.edited .ob-pv-ex-sum { color: var(--text); }
.ob-pv-ex-chev { display: flex; color: var(--dim2); transition: transform 0.28s ease; }
.ob-pv-ex-chev .wt-icon { width: 16px; height: 16px; }
.ob-pv-ex.open .ob-pv-ex-chev { transform: rotate(180deg); }

/* smooth auto-height expand via the 0fr→1fr grid trick */
.ob-pv-ex-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.ob-pv-ex.open .ob-pv-ex-body { grid-template-rows: 1fr; }
.ob-pv-ex-body-in { overflow: hidden; }

.ob-pv-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; }
.ob-pv-ctrl-lbl { font: 400 10px var(--font-mono); letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; }
.ob-pv-step { display: inline-flex; align-items: center; gap: 4px; background: var(--panel2); border-radius: 11px; padding: 4px; }
.ob-pv-step-btn {
  width: 40px; height: 40px; flex: none; border: none; border-radius: 8px; cursor: pointer;
  background: var(--panel); color: var(--dim); font: 400 20px var(--font-mono); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.ob-pv-step-btn.plus { color: var(--text); }
.ob-pv-step-btn:hover { background: var(--line); }
.ob-pv-step-btn:active { transform: scale(0.92); }
.ob-pv-step-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-pv-step-v { min-width: 28px; text-align: center; font: 700 16px var(--font-mono); color: var(--text); }
.ob-pv-step.small { padding: 3px; }
.ob-pv-step.small .ob-pv-step-btn { width: 34px; height: 34px; font-size: 18px; }
.ob-pv-step.small .ob-pv-step-v { min-width: 22px; font-size: 14px; }
.ob-pv-reps { display: inline-flex; align-items: center; gap: 6px; }
.ob-pv-reps-dash { color: var(--dim2); font: 400 13px var(--font-mono); }
.ob-pv-remove {
  width: 100%; margin-top: 4px; border: none; background: transparent; cursor: pointer;
  padding: 11px; min-height: 44px; border-radius: 10px; font: 600 13px var(--font-ui); color: var(--bad);
  transition: background 0.15s ease;
}
.ob-pv-remove:hover { background: rgba(255, 107, 107, 0.1); }
.ob-pv-remove:focus-visible { outline: 2px solid var(--bad); outline-offset: -2px; }

.ob-pv-undo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 2px; }
.ob-pv-undo-msg { flex: 1; min-width: 0; font: 400 12px var(--font-ui); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-pv-undo-btn { flex: none; border: none; background: transparent; cursor: pointer; padding: 8px 12px; min-height: 40px; border-radius: 9px; font: 700 12px var(--font-mono); letter-spacing: 1px; color: var(--accent-ink-text); }
.ob-pv-undo-btn:hover { background: rgba(var(--accent-rgb), 0.1); }
.ob-pv-undo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── step 3: make it yours ── */
.ob-fields { flex: 1; min-height: 0; margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.ob-field-label { font: 600 12px var(--font-ui); color: var(--dim); letter-spacing: 0.5px; margin-bottom: 10px; }
.ob-about { display: flex; flex-direction: column; gap: 10px; }
.ob-age {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px;
}
.ob-age-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  color: var(--text); font: 700 24px var(--font-mono); letter-spacing: -0.5px;
}
.ob-age-input::placeholder { color: var(--dim2); }
.ob-age-unit { font: 400 12px var(--font-mono); color: var(--dim); }
.ob-seg { display: flex; gap: 8px; background: var(--panel); border-radius: 14px; padding: 5px; }
.ob-seg-btn {
  flex: 1; padding: 12px 4px; border: none; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--dim); font: 600 14px var(--font-ui);
  transition: background 0.2s ease, color 0.2s ease;
}
.ob-seg-btn:hover { color: var(--text); }
.ob-seg-btn.sel { background: var(--accent); color: var(--ink); }
.ob-goals { display: flex; gap: 8px; }
.ob-goal {
  flex: 1; padding: 14px 0; border-radius: 13px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 1.5px solid var(--line);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ob-goal:hover { border-color: var(--line2); }
.ob-goal.sel { background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent-ink-text); }
.ob-goal-n { font: 700 22px var(--font-mono); color: var(--text); }
.ob-goal.sel .ob-goal-n { color: var(--accent-ink-text); }
.ob-goal-k { font: 400 9px var(--font-mono); color: var(--dim); }
.ob-goal-note { margin-top: 12px; font: 400 12px var(--font-ui); color: var(--dim); }
.ob-remind {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.ob-remind-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent-ink-text);
}
.ob-remind-ic .wt-icon { width: 17px; height: 17px; }
.ob-remind-copy { flex: 1; min-width: 0; }
.ob-remind-copy .t { display: block; font: 500 13.5px var(--font-ui); }
.ob-remind-copy .s { display: block; margin-top: 2px; font: 400 11px var(--font-mono); color: var(--dim); }
.ob-switch {
  width: 46px; height: 27px; flex: none; border: none; border-radius: 14px; cursor: pointer;
  padding: 3px; background: var(--panel2); transition: background 0.2s ease;
}
.ob-switch.on { background: var(--accent); }
.ob-switch-dot { display: block; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.ob-switch.on .ob-switch-dot { transform: translateX(19px); }

/* ── step 3: ready ── */
.ob-ready { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ob-check-wrap { position: relative; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; }
/* one-shot confetti burst around the check */
.ob-confetti { position: absolute; left: 50%; top: 50%; animation: ob-confetti 1.3s ease-out both; }
@keyframes ob-confetti {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) rotate(220deg) scale(1); }
}
.ob-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ob-ring 1.1s ease-out infinite; }
.ob-ring.d { animation-delay: 0.4s; }
@keyframes ob-ring { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }
.ob-check {
  width: 80px; height: 80px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--ink);
  box-shadow: 0 14px 34px -8px rgba(var(--accent-rgb), 0.55);
  animation: ob-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ob-check .wt-icon { width: 38px; height: 38px; stroke-width: 2.8; }
@keyframes ob-pop { 0% { opacity: 0; transform: scale(0.5); } 60% { transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }
.ob-title-c { margin: 28px 0 0; font: 700 30px var(--font-ui); letter-spacing: -1px; }
.ob-sub-c { margin: 10px 0 0; max-width: 270px; font: 400 15px var(--font-ui); color: var(--dim); }
.ob-summary {
  width: 100%; margin-top: 26px; padding: 4px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
}
.ob-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ob-sum-row.last { border-bottom: none; }
.ob-sum-row .k { font: 400 13px var(--font-ui); color: var(--dim); }
.ob-sum-row .v { font: 600 13px var(--font-ui); color: var(--text); }
.ob-foot { flex: none; text-align: center; margin-top: 14px; font: 400 12px var(--font-ui); color: var(--dim2); }

@media (prefers-reduced-motion: reduce) {
  .ob-in-fwd, .ob-in-back, .ob-cta-glow, .ob-logo, .ob-ring, .ob-check,
  .ob-aurora, .ob-fdot, .ob-demo, .ob-demo-fill, .ob-demo-stamp, .ob-confetti,
  .ob-days-card, .ob-rec-hero, .ob-pv-day { animation: none !important; }
  .ob-cta-glow::after { display: none; }
  .ob-glow { transition: none; }
  .ob-demo-fill { width: 100%; }
  .ob-demo-stamp { opacity: 1; transform: none; }
  .ob-pv-ex, .ob-pv-ex-body, .ob-pv-ex-chev { transition: none !important; }
}

/* ─── Profile page (rich SaaS account screen, v62) ──────────────────────────── */
/* identity hero */
.pf-hero {
  display: block;
  background: linear-gradient(150deg, var(--panel), #121317);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 16px; position: relative; overflow: hidden;
  /* the hero is a <button> (tap anywhere to edit) — reset button chrome */
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.pf-hero:active { background: linear-gradient(150deg, var(--panel2), #15161b); }
.pf-hero-top { display: flex; align-items: center; gap: 13px; }
.pf-hero::before {
  content: ''; position: absolute; top: -60px; right: -40px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.1), transparent 70%); pointer-events: none;
}
.pf-avatar {
  width: 54px; height: 54px; flex: none; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--accent), #a6cc00); color: var(--ink);
  font: 700 24px var(--font-mono); box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb), 0.5);
}
.pf-id { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pf-name { font: 700 19px var(--font-ui); letter-spacing: -0.4px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-email { font: 400 12px var(--font-mono); color: var(--dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-meta {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line);
  font: 500 11.5px var(--font-mono); color: var(--dim);
  letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-hero-edit {
  flex: none; position: relative; z-index: 1;
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03); color: var(--dim);
}
.pf-hero-edit .wt-icon { width: 16px; height: 16px; }
.pf-hero:hover .pf-hero-edit { color: var(--accent-ink-text); border-color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.08); }

/* lifetime stats */
.pf-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.pf-stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 15px;
  display: flex; flex-direction: column; gap: 8px;
}
.pf-stat-ic {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink-text);
}
.pf-stat-ic .wt-icon { width: 17px; height: 17px; }
.pf-stat-v { font: 700 24px var(--font-mono); letter-spacing: -0.5px; color: var(--text); line-height: 1; }
.pf-stat-sub { font: 400 12px var(--font-mono); color: var(--dim); letter-spacing: 0; }
.pf-stat-na { color: var(--dim2); }
.pf-stat-k { font: 400 11px var(--font-mono); color: var(--dim); letter-spacing: 0.02em; }

/* section labels + generic card */
.pf-group-label { font: 700 11px var(--font-mono); letter-spacing: 1.5px; color: var(--dim2); margin: 24px 2px 10px; text-transform: uppercase; }
.pf-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }

/* preferences */
.pf-pref { display: flex; align-items: center; gap: 12px; padding: 16px 16px; }
.pf-pref + .pf-pref { border-top: 1px solid var(--line); }
.pf-pref-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink-text);
}
.pf-pref-ic .wt-icon { width: 17px; height: 17px; }
.pf-pref-copy { flex: 1; min-width: 0; }
.pf-pref-copy .t { display: block; font: 600 14px var(--font-ui); color: var(--text); }
.pf-pref-copy .s { display: block; margin-top: 2px; font: 400 11.5px var(--font-mono); color: var(--dim); }
.pf-pref .pf-seg { flex: none; }
.pf-pref-timer { flex-direction: column; align-items: stretch; gap: 12px; }
.pf-pref-timer-head,
.pf-pref-theme-head { display: flex; align-items: center; gap: 12px; }
.pf-pref-timer-options {
  margin-left: 46px; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
}
.pf-pref-timer-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.pf-pref-timer-row + .pf-pref-timer-row { border-top: 1px solid var(--line); }
.pf-pref-theme { flex-direction: column; align-items: stretch; gap: 12px; }
.pf-pref-theme .pf-seg { width: 100%; max-width: none; box-sizing: border-box; }
@media (max-width: 380px) {
  .pf-pref-timer-options { margin-left: 0; }
}
@media (max-width: 340px) {
  .pf-pref-timer-row:first-child { flex-wrap: wrap; }
  .pf-pref-timer-row:first-child .pf-pref-copy { flex-basis: 100%; }
  .pf-pref-timer-row:first-child .pf-step { margin-left: auto; }
}
.pf-pref-button {
  width: 100%; border: none; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.pf-pref-button:hover { background: var(--panel2); }
.pf-pref-button .pf-action-arrow { color: var(--dim2); display: flex; }

/* notification-permission status line */
.pf-perm { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); font: 400 12px var(--font-mono); color: var(--dim); }
.pf-perm .wt-icon { width: 15px; height: 15px; flex: none; }
.pf-perm-txt { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pf-perm-btn { flex: none; border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink-text); font: 600 12px var(--font-ui); padding: 8px 15px; border-radius: 9px; cursor: pointer; transition: background 0.15s ease; }
.pf-perm-btn:hover { background: rgba(var(--accent-rgb), 0.18); }
.pf-perm.ok { color: var(--good); }
.pf-perm.ok .wt-icon { color: var(--good); }
.pf-perm.warn { color: var(--bad); }
.pf-perm.warn .wt-icon { color: var(--bad); }

/* segmented control (units + gender modal) */
/* Reminder-time picker (native time input, mono like all data) */
.pf-time {
  flex: none; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--panel2); color: var(--text);
  font: 600 14px var(--font-mono); padding: 8px 12px;
  -webkit-appearance: none; appearance: none; color-scheme: dark;
}
.pf-time:focus { outline: none; border-color: var(--accent-ink-text); }
.pf-time::-webkit-calendar-picker-indicator { filter: invert(0.6); }

/* Language picker (Profile → Preferences) — same skin as .pf-time */
.pf-lang {
  flex: none; max-width: 52%; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--panel2); color: var(--text);
  font: 600 14px var(--font-ui); padding: 8px 12px;
  -webkit-appearance: none; appearance: none; color-scheme: dark;
  text-overflow: ellipsis;
}
.pf-lang:focus { outline: none; border-color: var(--accent-ink-text); }

.pf-seg { display: inline-flex; gap: 4px; background: var(--panel2); border-radius: 12px; padding: 4px; }
.pf-seg-3 { display: flex; }
.pf-seg-3 .pf-seg-btn { flex: 1; }
.pf-seg-btn {
  border: none; background: transparent; color: var(--dim); cursor: pointer;
  font: 600 13px var(--font-ui); padding: 9px 14px; border-radius: 9px;
  transition: background 0.2s ease, color 0.2s ease; white-space: nowrap;
}
.pf-seg-btn:hover { color: var(--text); }
.pf-seg-btn.sel { background: var(--accent); color: var(--ink); }

/* toggle switch */
.pf-switch {
  width: 46px; height: 27px; flex: none; border: none; border-radius: 14px; cursor: pointer;
  padding: 3px; background: var(--panel2); transition: background 0.2s ease;
}
.pf-switch.on { background: var(--accent); }
.pf-switch-dot { display: block; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.pf-switch.on .pf-switch-dot { transform: translateX(19px); }

/* Rest-timer duration stepper (Profile → Preferences) — same skin as .pf-seg */
.pf-step { display: inline-flex; align-items: center; gap: 2px; background: var(--panel2); border-radius: 12px; padding: 4px; flex: none; }
.pf-step-btn {
  width: 30px; height: 28px; border: none; border-radius: 9px;
  background: transparent; color: var(--text);
  font: 600 16px/1 var(--font-ui); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pf-step-btn:active { background: var(--accent); color: var(--ink); }
.pf-step-val {
  min-width: 44px; text-align: center;
  font: 700 13px var(--font-mono); color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* account action rows */
.pf-action {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: none; background: transparent; cursor: pointer; padding: 15px 16px;
  transition: background 0.15s ease;
}
.pf-action + .pf-action { border-top: 1px solid var(--line); }
.pf-action:hover { background: var(--panel2); }
.pf-action-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--text);
}
.pf-action:hover .pf-action-ic { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-ink-text); }
.pf-action-ic .wt-icon { width: 17px; height: 17px; }
.pf-action-copy { flex: 1; min-width: 0; }
.pf-action-copy .t { display: block; font: 600 14px var(--font-ui); color: var(--text); }
.pf-action-copy .s { display: block; margin-top: 2px; font: 400 11.5px var(--font-mono); color: var(--dim); }
.pf-action-arrow { flex: none; color: var(--dim2); display: flex; }
.pf-action-arrow .wt-icon { width: 18px; height: 18px; }
.pf-action-danger .pf-action-ic { color: var(--bad); }
.pf-action-danger:hover { background: rgba(255, 107, 107, 0.08); }
.pf-action-danger:hover .pf-action-ic { background: rgba(255, 107, 107, 0.14); color: var(--bad); }
.pf-action-danger .pf-action-copy .t { color: var(--bad); }

.pf-foot { text-align: center; margin: 26px 0 6px; font: 400 11px var(--font-mono); color: var(--dim2); letter-spacing: 0.04em; }

/* Ironi Pro upgrade card (shipped hidden behind BILLING_LIVE in app.js) */
.pf-pro-card {
  background: linear-gradient(150deg, var(--panel), #121317);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 16px; position: relative; overflow: hidden;
}
.pf-pro-card::before {
  content: ''; position: absolute; top: -70px; right: -50px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12), transparent 70%); pointer-events: none;
}
.pf-pro-head { display: flex; align-items: flex-start; gap: 12px; position: relative; z-index: 1; }
.pf-pro-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent-ink-text);
}
.pf-pro-ic .wt-icon { width: 18px; height: 18px; }
.pf-pro-copy { flex: 1; min-width: 0; }
.pf-pro-title {
  font: 700 16px var(--font-ui); letter-spacing: -0.2px; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pf-pro-badge {
  font: 700 9.5px var(--font-mono); letter-spacing: 1.2px;
  background: var(--accent); color: var(--ink);
  border-radius: var(--radius-pill); padding: 3px 8px;
}
/* Soft-cancel (cancel-at-period-end): muted amber badge + access line. */
.pf-pro-badge.is-off { background: rgba(255, 176, 32, 0.16); color: #ffb020; }
.pf-pro-sub { margin-top: 5px; font: 400 12.5px var(--font-ui); color: var(--dim); line-height: 1.5; }
.pf-pro-renew { margin-top: 6px; font: 400 11.5px var(--font-mono); color: var(--dim); }
.pf-pro-renew.is-off { color: #ffb020; }
.pf-pro-note {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
  font: 400 11.5px var(--font-ui); color: var(--dim); line-height: 1.5;
  position: relative; z-index: 1;
}
.pf-pro-note a { color: var(--accent-ink-text); }

/* "View pricing & plans" — always shown in the Membership card (free AND Pro).
   Button chrome is reset so it keeps the same quiet link treatment. */
.pf-pricing-link {
  display: inline-block; margin-top: 12px;
  padding: 0; border: 0; background: none; text-align: left;
  font: 500 12px var(--font-ui); color: var(--accent-ink-text);
  position: relative; z-index: 1;
}
.pf-pricing-link:active { opacity: 0.7; }

/* Membership action row — compact, content-sized controls (not a full-bleed
   bar). Neutral secondary "Manage subscription"; volt primary "Resume Pro". */
.pf-mem-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.pf-mem-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-input);
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font: 700 13px var(--font-ui); letter-spacing: -0.1px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.pf-mem-btn:active { transform: scale(0.98); }
.pf-mem-btn .wt-icon { width: 16px; height: 16px; }
.pf-mem-btn .pf-mem-ic { display: flex; color: var(--dim); }
.pf-mem-btn .pf-mem-arrow { display: flex; margin-left: 2px; color: var(--dim2); }
.pf-mem-btn .pf-mem-arrow .wt-icon { width: 15px; height: 15px; }
.pf-mem-btn:disabled, .pf-mem-btn.busy { opacity: 0.5; cursor: default; transform: none; }
.pf-mem-btn.is-primary {
  background: var(--accent); color: var(--accent-text);
  border-color: transparent; box-shadow: var(--shadow-cta);
}
.pf-mem-btn.is-primary .pf-mem-ic, .pf-mem-btn.is-primary .pf-mem-arrow { color: var(--accent-text); }
.pf-mem-btn.is-primary:active { background: var(--accent-pressed); }
@media (hover: hover) {
  .pf-mem-btn:hover { border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
  .pf-mem-btn:hover .pf-mem-ic { color: var(--accent-ink-text); }
  .pf-mem-btn.is-primary:hover { background: var(--accent-pressed); color: var(--accent-text); border-color: transparent; }
  .pf-mem-btn.is-primary:hover .pf-mem-ic { color: var(--accent-text); }
}
@media (prefers-reduced-motion: reduce) { .pf-mem-btn:active { transform: none; } }

/* plan chooser */
.pf-plans { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
@media (min-width: 1024px) { .pf-plans { grid-template-columns: repeat(3, 1fr); } }
.pf-plan {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 10px; cursor: pointer; text-align: left; color: inherit; font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pf-plan.sel {
  border-color: var(--accent-ink-text);
  background: rgba(var(--accent-rgb), 0.07);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.pf-plan-k { font: 600 11px var(--font-ui); color: var(--dim); }
.pf-plan.sel .pf-plan-k { color: var(--text); }
.pf-plan-v { font: 700 15px var(--font-mono); letter-spacing: -0.3px; color: var(--text); white-space: nowrap; }
.pf-plan.sel .pf-plan-v { color: var(--accent-ink-text); }
.pf-plan-line { font: 400 10px var(--font-mono); color: var(--dim2); white-space: normal; }
.pf-plan-save {
  position: absolute; top: -7px; right: 8px;
  font: 700 8.5px var(--font-mono); letter-spacing: 0.6px;
  background: var(--accent); color: var(--ink);
  border-radius: var(--radius-pill); padding: 2px 6px;
}

/* Go Pro CTA */
.pf-gopro {
  width: 100%; margin-top: 14px; position: relative; z-index: 1;
  border: none; border-radius: var(--radius-input); padding: 14px;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
  font: 700 15px var(--font-ui); letter-spacing: -0.2px;
  box-shadow: var(--shadow-cta);
  transition: background 0.15s ease, opacity 0.15s ease;
}
.pf-gopro:active { background: var(--accent-pressed); }
.pf-gopro:disabled, .pf-gopro.busy { opacity: 0.6; cursor: default; box-shadow: none; }

/* Google Play "Restore purchases" — quiet text link under the CTA (Android). */
.pf-restore {
  display: block; width: 100%; margin-top: 10px; position: relative; z-index: 1;
  background: none; border: none; cursor: pointer;
  color: var(--dim); font: 600 13px var(--font-ui); letter-spacing: -0.1px;
  padding: 6px; transition: color 0.15s ease, opacity 0.15s ease;
}
.pf-restore:active { color: var(--text); }
.pf-restore:disabled, .pf-restore.busy { opacity: 0.5; cursor: default; }

/* edit-profile modal */
.pf-edit-card .pf-edit-label { display: block; font: 700 10px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); margin: 14px 0 7px; }
.pf-edit-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--panel2);
  border-radius: 12px; padding: 13px 14px; color: var(--text); font: 500 16px var(--font-ui);
  outline: none; transition: border-color 0.15s ease;
}
.pf-edit-input:focus { border-color: var(--accent-ink-text); }
.pf-edit-card .pf-seg { display: flex; width: 100%; }

/* desktop: center + widen the profile column, stats 4-across */
@media (min-width: 1024px) {
  #profile-content { max-width: 880px; margin-left: auto; margin-right: auto; }
  #profile-content .pf-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ Ironi Pro upgrade screen (#view-pro) ════════════════════════════════════
   Full-screen, conversion-focused paywall opened from every gated CTA. Mirrors
   the landing #pricing visual language (volt-framed plan cards, featured
   6-month card, big Source Sans 3 prices) retuned to in-app panels/tokens. */
.pro-screen { padding: 4px 16px 48px; max-width: 640px; margin: 0 auto; }
.pro-top { display: flex; align-items: center; margin-bottom: 6px; }
.pro-screen .back-btn {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--panel); border-radius: 12px;
  color: var(--text); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.pro-screen .back-btn:active { background: var(--panel2); }
.pro-screen .back-btn .wt-icon, .pro-screen .back-btn svg { width: 20px; height: 20px; }

/* Hero */
.pro-hero { text-align: center; padding: 10px 4px 6px; }
.pro-hero-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 14px;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent-ink-text);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18), 0 10px 30px -10px rgba(var(--accent-rgb), 0.4);
}
.pro-hero-ic .wt-icon, .pro-hero-ic svg { width: 26px; height: 26px; }
.pro-hero-kicker { font: 700 11px var(--font-mono); letter-spacing: 2.4px; color: var(--accent-ink-text); }
.pro-hero-title { margin: 8px 0 0; font: 700 27px/1.15 var(--font-ui); letter-spacing: -0.7px; color: var(--text); }
.pro-hero-sub { margin: 10px auto 0; max-width: 440px; font: 400 14.5px/1.55 var(--font-ui); color: var(--dim); }

/* Benefits */
.pro-benefits-label {
  margin: 28px 2px 12px; font: 700 11px var(--font-mono); letter-spacing: 2px; color: var(--dim2);
}
.pro-benefits { display: flex; flex-direction: column; gap: 10px; }
.pro-benefit {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 14px 15px;
}
.pro-benefit-ic {
  width: 36px; height: 36px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink-text);
}
.pro-benefit-ic .wt-icon, .pro-benefit-ic svg { width: 19px; height: 19px; }
.pro-benefit-copy { flex: 1; min-width: 0; }
.pro-benefit-t { font: 700 14.5px var(--font-ui); letter-spacing: -0.2px; color: var(--text); }
.pro-benefit-s { margin-top: 3px; font: 400 12.5px/1.5 var(--font-ui); color: var(--dim); }

/* Plan cards — mirrors landing .lp-plan, adapted to in-app tokens. */
/* ── Interval chooser: segmented 3-tab control + one price panel ──────────── */
.pro-plan-picker { margin-top: 26px; }
/* Segmented control. A subtle inset track holds the three tabs. */
.pro-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: var(--radius-card);
  background: var(--panel); border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.pro-tab {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; cursor: pointer; color: var(--dim); font: 700 11.5px var(--font-ui);
  letter-spacing: 0.2px; background: transparent; border: 0; border-radius: 9px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pro-tab:hover { color: var(--text); }
.pro-tab.sel {
  color: var(--ink); background: var(--accent);
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), 0.55);
}
.pro-tab-label { line-height: 1; }
/* BEST VALUE marker on the 6-month tab. A volt dot when idle; a contrasting
   pill when that tab is selected (dot would vanish on the volt fill). */
.pro-tab-badge {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  font-size: 0; overflow: hidden; flex: none;
}
.pro-tab.sel .pro-tab-badge {
  width: auto; height: auto; border-radius: var(--radius-pill);
  padding: 2px 6px; background: var(--ink); color: var(--accent-ink-text);
  font: 700 7.5px var(--font-mono); letter-spacing: 0.8px; overflow: visible;
}
/* The single price panel below the tabs. */
.pro-panel {
  margin-top: 12px; padding: 24px 16px; text-align: center;
  background:
    linear-gradient(165deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0) 52%),
    linear-gradient(155deg, #1b1d23, #101115);
  border: 1.5px solid var(--accent); border-radius: var(--radius-card);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.14), 0 18px 44px -22px rgba(var(--accent-rgb), 0.42);
}
.pro-panel-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: proPanelIn 0.24s ease both;
}
@keyframes proPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pro-panel-inner { animation: none; } }
/* Launch-offer headline: tiny caps label + volt "{pct}% OFF" pill. */
.pro-panel-offer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.pro-panel-offer-lbl { font: 700 8.5px var(--font-mono); letter-spacing: 1.2px; color: var(--accent-ink-text); text-transform: uppercase; }
.pro-panel-offer-pct {
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.14); color: var(--accent-ink-text);
  font: 700 10px var(--font-mono); letter-spacing: 0.4px;
}
.pro-panel-amount { margin-top: 6px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.pro-panel-amount .anchor {
  font: 400 17px var(--font-mono); letter-spacing: -0.4px; color: var(--dim2);
  text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.3);
}
.pro-panel-amount .n { font: 700 40px var(--font-mono); letter-spacing: -1.4px; color: var(--text); }
.pro-panel-permo { font: 400 13px var(--font-mono); color: var(--dim); }
.pro-panel-per { font: 400 12px var(--font-mono); color: var(--dim2); }
.pro-panel-save {
  margin-top: 8px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.14); color: var(--accent-ink-text);
  font: 700 10.5px var(--font-mono); letter-spacing: 0.4px;
}

/* Primary CTA (reuses .pf-gopro visuals) + reassurance footnote. */
.pro-cta { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; }
.pro-cta .wt-icon, .pro-cta svg { width: 18px; height: 18px; }
.pro-reassure {
  margin: 16px auto 0; max-width: 420px; text-align: center;
  font: 400 12px/1.5 var(--font-ui); color: var(--dim2);
}
.pro-restore { margin-top: 12px; }

@media (min-width: 1024px) { #pro-content { max-width: 720px; margin-left: auto; margin-right: auto; } }

/* ═══ Post-purchase welcome celebration (full-screen overlay) ═════════════════
   Fired once after a successful upgrade (web checkout return or verified Play
   purchase). Confetti + what's unlocked + a single "Start training" CTA. */
.pro-welcome-scrim {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background: rgba(6, 7, 9, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.24s ease; overflow-y: auto;
}
.pro-welcome-scrim.show { opacity: 1; }
.pro-welcome {
  width: 100%; max-width: 440px; margin: auto; text-align: center;
  background: linear-gradient(160deg, #1a1c22, #101115);
  border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: var(--radius-card);
  padding: 30px 24px 26px; position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.1), 0 30px 70px -24px rgba(0, 0, 0, 0.8);
  transform: translateY(14px) scale(0.98); opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
}
.pro-welcome-scrim.show .pro-welcome { transform: translateY(0) scale(1); opacity: 1; }
.pro-welcome::before {
  content: ''; position: absolute; top: -90px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 220px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.16), transparent 70%);
}
.pw-burst { margin: 4px auto 6px; }
.pw-mark { position: relative; z-index: 1; }
.pw-kicker { font: 700 11px var(--font-mono); letter-spacing: 2.4px; color: var(--accent-ink-text); margin-top: 16px; }
.pw-title { margin: 8px 0 0; font: 700 25px/1.15 var(--font-ui); letter-spacing: -0.6px; color: var(--text); }
.pw-sub { margin: 10px auto 0; max-width: 360px; font: 400 13.5px/1.55 var(--font-ui); color: var(--dim); }
.pw-benefits { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 4px; text-align: left; }
.pw-benefit {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
}
.pw-benefit-ic {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink-text);
}
.pw-benefit-ic .wt-icon, .pw-benefit-ic svg { width: 17px; height: 17px; }
.pw-benefit-t { font: 700 13.5px var(--font-ui); letter-spacing: -0.2px; color: var(--text); }
.pw-benefit-s { margin-top: 2px; font: 400 11.5px/1.45 var(--font-ui); color: var(--dim); }
.pw-cta { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .pro-welcome { transition: opacity 0.2s ease; transform: none; }
  .pro-welcome-scrim.show .pro-welcome { transform: none; }
}

/* ═══ Cancellation goodbye ═════════════════════════════════════════════════════
   The somber counterpart to .pro-welcome. Same panel/scrim scaffolding, but the
   volt accents are swapped for a calm, warm-neutral palette — no party, no glow.
   Reuses .pro-welcome layout + entrance (and its reduced-motion rule). */
.pro-bye {
  background: linear-gradient(160deg, #191a1e, #101115);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 70px -24px rgba(0, 0, 0, 0.82);
}
.pro-bye::before {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.05), transparent 70%);
}
.pby-mark {
  width: 58px; height: 58px; margin: 2px auto 4px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--dim);
}
.pby-mark .wt-icon, .pby-mark svg { width: 24px; height: 24px; }
.pby-kicker { color: var(--dim); }
.pby-recap-label {
  margin: 24px 0 8px; text-align: left;
  font: 700 10.5px var(--font-mono); letter-spacing: 1.8px; color: var(--faint, var(--dim));
  text-transform: uppercase;
}
/* Muted benefit rows — these are what they're leaving, not a sales pitch. */
.pby-benefit-ic { background: rgba(255, 255, 255, 0.04); color: var(--dim); }
.pby-benefits .pw-benefit-t { color: var(--dim); }
/* Warm win-back button — keeps the primary shape but reads calm, not urgent. */
.pby-resume { margin-top: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pby-resume .wt-icon, .pby-resume svg { width: 17px; height: 17px; }
.pby-dismiss {
  display: block; width: 100%; margin: 12px 0 0; padding: 10px; background: none; border: 0;
  font: 600 13px var(--font-ui); color: var(--dim); cursor: pointer; letter-spacing: -0.1px;
}
.pby-dismiss:hover { color: var(--text); }

/* ═══ Trial chip (membership card) ═════════════════════════════════════════════
   Small volt mono chip sitting inline in the Profile membership title while the
   workout-count AI trial is live: "PRO TRIAL · N workouts left". Mirrors the
   .pf-pro-badge mono treatment but tinted rather than solid so it reads as a
   status, not an action. */
.trial-chip {
  font: 700 9.5px var(--font-mono); letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--accent-ink-text);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap;
}

/* ═══ Trial-gift celebration (post-onboarding overlay) ═════════════════════════
   Fires once, right after onboarding completes, to announce the first-5-
   workouts AI trial as a gift. Richer sibling of .pr-burst: a full-screen
   scrim + canvas confetti (JS-driven, DPR-aware) + a spring-in card whose
   contents stagger in. Sits one layer above the day-sheet / PR-overlay stack;
   below only the post-purchase welcome (z 1400). */
.trial-cel-scrim {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background: rgba(12, 13, 16, 0.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.28s ease;
}
.trial-cel-scrim.show { opacity: 1; }
.trial-cel-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.trial-cel-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 400px; margin: auto; text-align: center;
  padding: 30px 26px 26px; border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.02) 40%),
    linear-gradient(155deg, rgba(27, 29, 35, 0.97), rgba(10, 11, 14, 0.98));
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 26px 74px rgba(0, 0, 0, 0.74),
    0 18px 70px rgba(var(--accent-rgb), 0.14);
  transform: scale(0.92) translateY(10px); opacity: 0;
  transition: transform 0.44s cubic-bezier(0.2, 0.9, 0.24, 1.18), opacity 0.3s ease;
}
.trial-cel-scrim.show .trial-cel-card { transform: scale(1) translateY(0); opacity: 1; }
/* Contents stagger in behind the card's spring. */
.trial-cel-disc, .trial-cel-kicker, .trial-cel-title,
.trial-cel-body, .trial-cel-feats, .trial-cel-dots, .trial-cel-cta {
  opacity: 0; transform: translateY(8px);
}
.trial-cel-feats {
  list-style: none; margin: 14px auto 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 320px; text-align: left;
}
.trial-cel-feats li {
  display: flex; align-items: flex-start; gap: 9px;
  font: 400 14px/1.5 var(--font-ui); color: var(--dim);
}
.trial-cel-feats li svg {
  flex: none; width: 16px; height: 16px; margin-top: 2px;
  padding: 2px; color: var(--ink); background: var(--accent); border-radius: 50%;
}
.trial-cel-scrim.show .trial-cel-disc { animation: trial-cel-rise 0.5s ease 0.14s both; }
.trial-cel-scrim.show .trial-cel-kicker { animation: trial-cel-rise 0.5s ease 0.20s both; }
.trial-cel-scrim.show .trial-cel-title { animation: trial-cel-rise 0.5s ease 0.26s both; }
.trial-cel-scrim.show .trial-cel-body { animation: trial-cel-rise 0.5s ease 0.32s both; }
.trial-cel-scrim.show .trial-cel-feats { animation: trial-cel-rise 0.5s ease 0.38s both; }
.trial-cel-scrim.show .trial-cel-dots { animation: trial-cel-rise 0.5s ease 0.44s both; }
.trial-cel-scrim.show .trial-cel-cta { animation: trial-cel-rise 0.5s ease 0.50s both; }
@keyframes trial-cel-rise { to { opacity: 1; transform: translateY(0); } }

.trial-cel-disc {
  width: 76px; height: 76px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent-ink-text);
  box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.06), 0 14px 40px rgba(var(--accent-rgb), 0.28);
}
.trial-cel-disc .wt-icon, .trial-cel-disc svg { width: 34px; height: 34px; stroke-width: 2; }
.trial-cel-kicker {
  margin-top: 18px; font: 700 11px var(--font-mono); letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--accent-ink-text);
}
.trial-cel-title {
  margin: 10px 0 0; font: 700 25px/1.15 var(--font-ui); letter-spacing: -0.6px; color: var(--text);
  text-wrap: balance;
}
.trial-cel-body {
  margin: 12px auto 0; max-width: 340px;
  font: 400 13.5px/1.6 var(--font-ui); color: var(--dim);
}
.trial-cel-dots {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 9px; margin: 20px 0 2px;
}
.trial-cel-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--accent); background: rgba(var(--accent-rgb), 0.10);
}
.trial-cel-dots-lbl {
  margin-left: 4px; font: 700 10.5px var(--font-mono); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--dim2, var(--dim));
}
.trial-cel-cta { margin-top: 20px; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .trial-cel-card { transition: opacity 0.22s ease; transform: none; }
  .trial-cel-scrim.show .trial-cel-card { transform: none; }
  .trial-cel-disc, .trial-cel-kicker, .trial-cel-title,
  .trial-cel-body, .trial-cel-dots, .trial-cel-cta {
    opacity: 1; transform: none; animation: none !important;
  }
}

/* ═══ AI coach chat (Coach tab) ═══════════════════════════════════════════════
   Top-level tab. Coach messages are flat text blocks with a small volt badge
   (same sparkle mark as the finish-screen coach card); user messages are
   right-aligned panel bubbles. Composer is viewport-fixed above the tab bar
   (same mechanics as .trk-nav). */

/* Premium nav treatment: Coach is the paid feature, so its tab sits in volt
   even at rest, with one slow soft glow breathing on the icon. Placed after
   the desktop tabbar overrides so it wins in both nav layouts. */
.tabbar button[data-tab="coach"] { color: var(--accent-ink-text); }
.tabbar button[data-tab="coach"]:hover { color: var(--accent-ink-text); }
.tabbar button[data-tab="coach"] .wt-icon { filter: drop-shadow(0 0 5px var(--accent-glow)); }
.tabbar button[data-tab="coach"].active { color: var(--accent-ink-text); }
.tabbar button[data-tab="coach"].active .wt-icon { filter: drop-shadow(0 0 9px var(--accent-glow)); }
@media (prefers-reduced-motion: no-preference) {
  .tabbar button[data-tab="coach"] .wt-icon { animation: coach-tab-breathe 3.8s ease-in-out infinite; }
}
@keyframes coach-tab-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px var(--accent-glow)); opacity: 0.88; }
  50% { filter: drop-shadow(0 0 10px var(--accent-glow)); opacity: 1; }
}

/* Premium entrance: header and thread rise in softly when the tab opens.
   Single from→to keyframes (multi-keyframe entrances stutter). */
@media (prefers-reduced-motion: no-preference) {
  #coach-chat-content.cc-enter .cc-top { animation: cc-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
  #coach-chat-content.cc-enter .cc-thread { animation: cc-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Chat screen */
#coach-chat-content {
  /* 880 = the shared desktop column (same as every other tab/sub-view);
     mobile is shell-capped well below this so the value only bites ≥920px. */
  max-width: 880px; margin: 0 auto;
  /* Top: clears the fixed .cc-top header (the .app shell already supplies
     safe-top + 18px, so this is just the header's remaining height).
     Bottom: room for the fixed composer + tab bar under the thread. */
  padding: 52px 16px calc(var(--tab-h) + var(--safe-bottom) + 168px);
}
/* Pinned at the top while the conversation scrolls, so history + "New chat"
   stay reachable. FIXED, not sticky — .app's overflow-x:hidden kills sticky
   (same reason .lp-nav is fixed). Centering is left/right+margin:auto, NOT a
   translateX(-50%), because the cc-rise entrance animates transform and would
   clobber it. Background is frosted glass, NOT a flat --bg rectangle: the body
   paints subtle radial glows over --bg, so an opaque --bg box reads as a black
   block. Semi-transparent --bg tint (rgba of #0c0d10) + backdrop blur keeps
   the title/buttons readable (incl. under the notch/status bar) while messages
   blur softly beneath; the hairline bottom border makes it read as a page
   header, not a floating box. Solid --bg fallback below for browsers without
   backdrop-filter.
   z-index 30: above the thread, below the composer (40) and sheets/modals. */
.cc-top {
  position: fixed; top: 0; left: 0; right: 0; margin: 0 auto;
  width: 100%; max-width: 480px; box-sizing: border-box;
  padding: calc(var(--safe-top) + 14px) 16px 12px;
  background: rgba(12, 13, 16, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cc-top { background: var(--bg); }
}
.cc-heading { min-width: 0; flex: 1; }
.cc-title { font: 700 28px var(--font-ui); letter-spacing: -0.6px; }
.cc-hist {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 35px; height: 35px; background: none; border: 1px solid var(--line2);
  border-radius: 100px; color: var(--text); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cc-hist:hover { border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
.cc-hist .wt-icon { width: 15px; height: 15px; }
.cc-new {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line2); border-radius: 100px;
  padding: 8px 13px; font: 600 12.5px var(--font-ui); color: var(--text); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cc-new:hover { border-color: var(--accent-ink-text); color: var(--accent-ink-text); }
.cc-new .wt-icon { width: 14px; height: 14px; }

.cc-thread { display: flex; flex-direction: column; gap: 14px; }
.cc-coach-block { align-self: flex-start; max-width: 94%; display: flex; flex-direction: column; gap: 5px; }
.cc-msg.user {
  align-self: flex-end; max-width: 82%;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 16px 16px 4px 16px; padding: 10px 14px;
  font: 400 14.5px/1.5 var(--font-ui); color: var(--text);
  white-space: pre-wrap; overflow-wrap: break-word;
}
.cc-msg.coach { display: flex; gap: 10px; align-items: flex-start; max-width: 94%; }
.cc-coach-block .cc-msg.coach { max-width: 100%; }
.cc-coach-feedback .ai-fb {
  margin: 0 0 0 34px; gap: 5px; font-size: 10px; color: var(--muted);
}
.cc-coach-feedback .ai-fb-btn {
  padding: 3px 7px; font-size: 10px; background: transparent; color: var(--dim);
}
.cc-coach-badge {
  flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.cc-coach-badge svg { width: 13px; height: 13px; }
.cc-msg.coach .cc-text {
  min-width: 0; font: 400 14.5px/1.6 var(--font-ui); color: var(--text);
  white-space: pre-wrap; overflow-wrap: break-word; padding-top: 3px;
}
.cc-msg.coach .cc-text .ai-md { white-space: normal; }
.cc-note { text-align: center; font: 400 12px/1.5 var(--font-ui); color: var(--dim2); padding: 2px 18px; }

/* Typing indicator (reduced-motion → static dots) */
.cc-typing .cc-thinking-wrap { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.cc-typing .cc-thinking-text { font: 600 12.5px var(--font-ui); color: var(--dim); }
.cc-typing .dots { display: flex; gap: 4px; padding: 0 2px; }
.cc-typing .dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dim);
  animation: ccDot 1.1s ease infinite;
}
.cc-typing .dots i:nth-child(2) { animation-delay: 0.18s; }
.cc-typing .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ccDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-typing .dots i { animation: none; opacity: 0.6; }
}

/* Conversation-cap notice */
.cc-cap { text-align: center; padding: 12px 0 0; }
.cc-cap p { font: 400 13px/1.5 var(--font-ui); color: var(--dim); margin: 0 0 12px; }
.cc-cap-btn {
  background: var(--accent); color: var(--ink); border: none; border-radius: 13px;
  padding: 12px 20px; font: 700 13.5px var(--font-ui); cursor: pointer;
}

/* Fixed composer (mirrors .trk-nav placement above the tab bar).
   Shares the SAME centered box as the #coach-chat-content thread column so the
   input bar lines up with the coach messages: same max-width as .app (480), same
   16px inner gutters as the thread, centered on the viewport. Wider breakpoints
   below bump it to the thread's 640 column. */
.cc-composer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 20px);
  width: 100%; max-width: 480px; box-sizing: border-box;
  padding-left: 16px; padding-right: 16px; z-index: 40;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  transition: bottom 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Keyboard open: the tab bar is hidden, so drop the composer snug above the
   keyboard. --kb-inset is 0 on native (the webview already resizes with
   resize:"native") and equals the occluded height on web/PWA. */
body.kb-open .cc-composer {
  bottom: calc(var(--safe-bottom) + 10px + var(--kb-inset, 0px));
}

.cc-input-row {
  width: 100%; display: flex; align-items: flex-end; gap: 8px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 22px;
  padding: 7px 7px 7px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.cc-input-row textarea {
  flex: 1; min-width: 0; background: none; border: none; outline: none; resize: none;
  color: var(--text); font: 400 16px/1.45 var(--font-ui);
  max-height: 112px; padding: 8px 0; margin: 0;
}
.cc-input-row textarea::placeholder { color: var(--dim2); }
.cc-send {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--ink); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity 0.15s ease;
}
.cc-send:disabled { opacity: 0.35; cursor: default; }
.cc-send .wt-icon { width: 18px; height: 18px; }

/* Composer mic: dictate a message (speech → text into the input, never sends) */
.cc-mic {
  flex: none; width: 38px; height: 38px; border-radius: 50%; position: relative;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cc-mic:hover { color: var(--text); border-color: var(--accent-ink-text); }
.cc-mic .wt-icon { width: 17px; height: 17px; }
.cc-mic.listening {
  background: var(--accent); border-color: var(--accent-ink-text); color: var(--ink);
  animation: ccMicPulse 1.4s ease infinite;
}
@keyframes ccMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
}
.cc-mic.processing { border-color: rgba(var(--accent-rgb), 0.4); color: var(--dim2); }
.cc-mic.processing .wt-icon { opacity: 0; }
.cc-mic.processing::after {
  content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.25); border-top-color: var(--accent-ink-text);
  animation: ccMicSpin 0.7s linear infinite;
}
@keyframes ccMicSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cc-mic.listening { animation: none; }
  .cc-mic.processing::after { animation: none; }
}

/* Session-picker sheet (on the .day-sheet base) */
.cc-sess-list {
  margin-top: 16px; display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto;
}
.cc-sess-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 14px; font: 600 13.5px var(--font-ui); color: var(--text);
  cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cc-sess-item:hover { border-color: var(--line2); }
.cc-sess-item .date { flex: none; font: 400 11px var(--font-mono); color: var(--dim2); letter-spacing: 0.5px; }
.cc-sess-item.active { border-color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.08); }
.cc-sess-item.active .date { color: var(--accent-ink-text); }
.cc-sess-empty { text-align: center; font: 400 13px var(--font-ui); color: var(--dim); padding: 14px 0; }

/* ChatGPT-style history drawer (left slide-in) for the AI Coach chat. */
.cc-drawer-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.6);
  display: flex; justify-content: flex-start;
  animation: fadeScrim 0.2s ease;
}
.cc-drawer-backdrop.closing { animation: fadeScrim 0.2s ease reverse; }
.cc-drawer {
  display: flex; flex-direction: column;
  width: 82vw; max-width: 320px; height: 100%;
  background: var(--panel); border-right: 1px solid var(--line2);
  padding: calc(18px + var(--safe-top)) 16px calc(18px + var(--safe-bottom));
  box-shadow: 2px 0 28px rgba(0, 0, 0, 0.4);
  animation: ccDrawerIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-drawer-backdrop.closing .cc-drawer { animation: ccDrawerIn 0.2s ease reverse; }
@keyframes ccDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.cc-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 14px;
}
.cc-drawer-title { font: 700 19px var(--font-ui); letter-spacing: -0.3px; color: var(--text); }
.cc-drawer-x {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: none; border-radius: 10px; color: var(--dim); cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.cc-drawer-x svg { width: 20px; height: 20px; }
.cc-drawer-new {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--bg); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px; margin-bottom: 6px; cursor: pointer;
  font: 600 14px var(--font-ui); color: var(--text); text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cc-drawer-new svg { width: 18px; height: 18px; flex: none; color: var(--accent-ink-text); }
.cc-drawer-list { margin-top: 10px; flex: 1; max-height: none; padding-right: 2px; }
@media (hover: hover) {
  .cc-drawer-x:hover { color: var(--text); background: var(--bg); }
  .cc-drawer-new:hover { border-color: var(--accent-ink-text); }
}
/* Desktop: sit just right of the 244px nav rail, overlaying the coach column. */
@media (min-width: 1024px) {
  .cc-drawer-backdrop { justify-content: flex-start; padding-left: 244px; }
  .cc-drawer { width: 300px; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-drawer-backdrop, .cc-drawer-backdrop.closing,
  .cc-drawer, .cc-drawer-backdrop.closing .cc-drawer { animation: none; }
}

/* Desktop: content column centered in the region right of the 244px rail;
   the fixed composer re-centers the same way .trk-nav does. */
/* Tablet / small desktop (no sidebar yet): the thread column hits the shared
   880 desktop cap, so the composer matches that same centered 880 box. */
@media (min-width: 920px) {
  .cc-composer { max-width: 880px; }
  /* Wide screens: a capped frosted box floats in empty space and reads
     as a mis-colored rectangle. Let the bar span the full width (a real app
     top bar) and center its CONTENT on the 880px chat column via side
     paddings instead. */
  .cc-top {
    max-width: none;
    padding-left: max(16px, calc((100% - 880px) / 2));
    padding-right: max(16px, calc((100% - 880px) / 2));
  }
}

@media (min-width: 1024px) {
  /* With the 244px rail, both the thread and the composer re-center on the
     region to its right (50% + 122px) and share the same column width —
     bumped to the app-standard 880px desktop column so Coach doesn't render
     narrower than the other tabs. Thread and composer MUST stay in lockstep. */
  .cc-composer { left: calc(50% + 122px); width: calc(100% - 244px - 32px); max-width: 880px; }
  /* Bar spans from the rail to the right edge; the 920px+ side paddings are
     relative to the bar's own width (100vw - 244px), so the padded content
     column centers at 244 + (100vw-244-880)/2 = 50% + 122px — the composer's
     exact axis. */
  .cc-top { left: 244px; }
  #coach-chat-content { max-width: 880px; }
}

/* ─── Ironclad Light: per-component forks for baked (non-token) colors ─────────
   These selectors hard-code dark-only literals (white text, black glows, dark
   panels) that don't flip via the token block above. Scoped under
   :root[data-theme="light"] so the DARK theme stays byte-identical — the dark
   rules are untouched; these only add light-mode values. */

/* Body ambient glow: drop the volt/warm radials that muddy a light page. */
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(12, 13, 16, 0.04), transparent 60%),
    var(--bg);
}

/* Growth chart (.gr-*) bakes white text / dark tooltip. */
:root[data-theme="light"] .gr-title { color: var(--text); }
:root[data-theme="light"] .gr-sub { color: var(--dim); }
:root[data-theme="light"] .gr-ranges.wt-ranges { background: var(--panel2); }
:root[data-theme="light"] .gr-ranges .chart-pill { color: var(--dim); }
:root[data-theme="light"] .gr-ranges .chart-pill.active { color: var(--accent-ink-text); background: rgba(var(--accent-rgb), 0.10); }
:root[data-theme="light"] .gr-vtab { color: var(--dim); }
:root[data-theme="light"] .gr-vtab:hover { color: var(--text); }
:root[data-theme="light"] .gr-vtab.sel { color: var(--ink); }
:root[data-theme="light"] .gr-leg.off .gr-leg-nm { text-decoration-color: var(--line2); }
:root[data-theme="light"] .gr-leg-nm { color: var(--text); }
:root[data-theme="light"] .gr-leg-g.up { color: var(--good); }
:root[data-theme="light"] .gr-leg-g.down { color: var(--bad); }
:root[data-theme="light"] .gr-leg-g.flat { color: var(--dim2); }
:root[data-theme="light"] .gr-svg .gr-grid { stroke: var(--line); }
:root[data-theme="light"] .gr-svg .gr-axis { fill: var(--dim2); }
:root[data-theme="light"] .gr-svg .gr-cursor { stroke: var(--line2); }
:root[data-theme="light"] .gr-tip { background: var(--panel2); border-color: var(--line); }
:root[data-theme="light"] .gr-tip-d { color: var(--dim2); }
:root[data-theme="light"] .gr-tip-day { color: var(--text); }
:root[data-theme="light"] .gr-tip-v { color: var(--text); }
:root[data-theme="light"] .gr-empty { background: rgba(12, 13, 16, 0.02); }
:root[data-theme="light"] .gr-empty-grid { background-image: linear-gradient(to bottom, rgba(12, 13, 16, 0.05) 1px, transparent 1px); }
:root[data-theme="light"] .gr-empty-t { color: var(--text); }
:root[data-theme="light"] .gr-empty-s { color: var(--dim); }

/* Toggle-switch knob is pure white — invisible on the light "off" track, so
   give it a soft shadow to lift it off the surface (iOS light-switch look). */
:root[data-theme="light"] .pf-switch-dot,
:root[data-theme="light"] .ob-switch-dot { box-shadow: 0 1px 3px rgba(12, 13, 16, 0.28); }
:root[data-theme="light"] .pf-switch,
:root[data-theme="light"] .ob-switch { background: #d3d7dd; }
/* The grey light track above out-specifies .pf-switch.on - re-assert the
   official green accent for the ON state. */
:root[data-theme="light"] .pf-switch.on,
:root[data-theme="light"] .ob-switch.on { background: var(--accent); }

/* A few line-through / decoration literals used elsewhere. */
:root[data-theme="light"] .gr-leg.off .gr-leg-sw { box-shadow: inset 0 0 0 1.5px var(--sw); }

/* Baked dark card gradients → light equivalents. */
:root[data-theme="light"] .pf-hero,
:root[data-theme="light"] .pf-pro-card { background: linear-gradient(150deg, #ffffff, #eef0f3); }
:root[data-theme="light"] .pf-hero:active { background: linear-gradient(150deg, var(--panel2), #e4e6ea); }
:root[data-theme="light"] .pf-hero-edit { background: rgba(12, 13, 16, 0.04); }

/* Floating bottom nav = dark glass; light glass on the light theme. */
:root[data-theme="light"] .tabbar {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 40px -18px rgba(12, 13, 16, 0.28);
}

/* Reports: heatmap empty cells + the latest-progress promo card bake dark. */
:root[data-theme="light"] .fh-cell { background: #dce0e6; }
:root[data-theme="light"] .fh-cell.on { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.25); }
:root[data-theme="light"] .fh-cell.future { background: transparent; }
:root[data-theme="light"] .rp-progress { background: linear-gradient(150deg, #f2f6e6, #eef0f3); }

/* Body-weight hero: baked dark gradient → light card (volt count-up stays via --accent-ink-text). */
:root[data-theme="light"] .wt-hero { background: linear-gradient(155deg, #ffffff, #eef0f3); border-color: var(--line2); }
:root[data-theme="light"] .wt-hero-v { text-shadow: none; }

/* Active-set tracker card: baked dark gradient → light (keeps the volt focus border). */
:root[data-theme="light"] .set.active { background: linear-gradient(155deg, #ffffff, #f0f2f5); }

/* Auth screen (reset.html) baked-dark radial → light. Card/inputs/buttons use
   tokens and flip automatically; only the screen backdrop is hardcoded. */
:root[data-theme="light"] .auth-screen { background: radial-gradient(120% 80% at 50% -10%, #ffffff, #eceef1 70%); }

/* ─── Ironclad Light: color/contrast audit fixes (2026-07-14) ──────────────────
   Two kinds of fix below, all light-scoped so DARK stays byte-identical:
   (A) Dark ISLANDS that stay dark in both themes (floating toast pill, the
       immersive rest timer, the PR celebration): their text/icons used
       --text / --accent-ink-text which turned dark/black on the light theme and
       vanished on the dark surface — re-pin those to light + volt here.
   (B) Baked dark-only literals or dark-theme tints (avatar olive, weight delta
       greens/reds, the AI-badge volt gradient, the cancelled-Pro amber) that the
       token block can't reach. */

/* (A) Toast — dark glass pill in both themes. Keep its copy light and restore
   the volt success glyph (--accent-ink-text is now black → invisible on dark). */
:root[data-theme="light"] .toast { color: #f2f3f5; }
:root[data-theme="light"] .toast-kicker { color: #9aa0a8; }
:root[data-theme="light"] .toast.success .toast-ring circle { stroke: #ccff00; }
:root[data-theme="light"] .toast.success .toast-glyph { color: #ccff00; }

/* Rest timer — full-screen focus overlay, now themed LIGHT in light mode
   (was a dark island). Backdrop goes to the light surface; title/time/k use
   tokens (dark ink on light); the ring, buttons and mini pill get a light
   fork. The done-state ring stays the accent fill (near-black on light) with
   a white check — high contrast either way. */
:root[data-theme="light"] .rest-bar {
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.06), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(var(--accent-rgb), 0.03), transparent 40%),
    rgba(245, 246, 248, 0.96);
}
:root[data-theme="light"] .rest-timer-title,
:root[data-theme="light"] .rest-time { color: var(--text); }
:root[data-theme="light"] .rest-k { color: var(--dim); }
:root[data-theme="light"] .rest-ring { filter: drop-shadow(0 22px 44px rgba(12, 13, 16, 0.16)); }
:root[data-theme="light"] .rest-ring .rr-bg { stroke: rgba(12, 13, 16, 0.12); }
:root[data-theme="light"] .rest-ring .rr-fg { stroke: var(--accent); }
:root[data-theme="light"] .rest-close {
  background: #ffffff; border-color: var(--line2); color: var(--dim);
}
:root[data-theme="light"] .rest-btn {
  background: #ffffff; border-color: var(--line2); color: var(--text);
}
:root[data-theme="light"] .rest-skip {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
}
:root[data-theme="light"] .rest-plus,
:root[data-theme="light"] .rest-over { color: var(--accent-ink-text); }
:root[data-theme="light"] .rest-mini {
  background: linear-gradient(155deg, #ffffff, #eef0f3);
  border-color: var(--line2); color: var(--text);
  box-shadow: var(--shadow-card);
}

/* Tracker top progress pips — three states must stay distinct on light. The
   base `.trk-pip` light override below wins on specificity over `.trk-pip.done`
   / `.trk-pip.current` (which only set `background: var(--accent)`), so without
   re-pinning done/current here EVERY pip would read as the pale pending track.
   Pending = light grey; completed = solid ink; current = ink with a gentle
   breathe (glow is near-invisible on light, so the opacity pulse is the tell,
   and its floor stays high enough not to be mistaken for pending). */
:root[data-theme="light"] .trk-pip { background: #dce0e6; }
:root[data-theme="light"] .trk-pip.done { background: var(--accent); }
:root[data-theme="light"] .trk-pip.current {
  background: var(--accent);
  animation: trk-pip-pulse-light 1.8s ease-in-out infinite;
}
@keyframes trk-pip-pulse-light {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { opacity: 1; box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .trk-pip.current { animation: none; opacity: 0.85; }
}

/* AI COACH SUGGESTION pill — on dark it's a volt-tinted wash that clearly reads
   as the accent. On light, --accent is near-black and the 0.16 tint became a
   faint grey wash with dark text, so it barely registered as "the plan". Flip
   it to the filled-accent treatment other light accents use (solid ink fill,
   white copy) so it stays the obvious hero above LAST TIME. The value keeps its
   white weight; the sparkle icon strokes currentColor → force white here. */
:root[data-theme="light"] .set.active .act-coach {
  background: var(--accent); border-color: var(--accent);
}
:root[data-theme="light"] .set.active .act-coach .ac-ic,
:root[data-theme="light"] .set.active .act-coach .ac-k,
:root[data-theme="light"] .set.active .act-coach .ac-v,
:root[data-theme="light"] .set.active .act-coach .ac-u { color: var(--ink); }
:root[data-theme="light"] .set.active .act-coach .ac-ic svg { stroke: var(--ink); }

/* (A) PR celebration — dark card on a dark scrim. Restore the dark-theme look:
   volt badge (with its dark icon), volt kicker/ring/sparks, light headline. */
:root[data-theme="light"] .pr-badge { background: #ccff00; }
:root[data-theme="light"] .pr-kicker { color: #ccff00; }
:root[data-theme="light"] .pr-ex,
:root[data-theme="light"] .pr-val { color: #f2f3f5; }
:root[data-theme="light"] .pr-ring { border-color: #ccff00; }
:root[data-theme="light"] .pr-spark { background: #ccff00; }

/* (A) Coach chat + finish/session AI badges - keep the badge artwork on its
   intentional dark island while the surrounding light theme uses green.
   CSS `stroke` overrides the SVG presentation attribute. */
:root[data-theme="light"] .cc-coach-badge svg { stroke: #ffffff; }
:root[data-theme="light"] .finish-coach .fc-badge { background: linear-gradient(135deg, #0c0d10, #2a2c33); }
:root[data-theme="light"] .finish-coach .fc-badge svg { stroke: #ffffff; }

/* Coach chat header: the frosted bar bakes a dark glass tint + white hairline
   (designed for dark). Re-tint to a light glass so it reads as the page's own
   top bar instead of a gray slab. */
:root[data-theme="light"] .cc-top {
  background: rgba(245, 246, 248, 0.72);
  border-bottom-color: rgba(12, 13, 16, 0.08);
}

/* (B) Profile avatar — baked olive second stop (#a6cc00) made a green box on the
   black-accent theme; go graphite so the white initial reads and it stays neutral. */
:root[data-theme="light"] .pf-avatar { background: linear-gradient(150deg, #0c0d10, #3a3d44); }

/* (B) Profile "Pro cancelled" amber (#ffb020) is a dark-theme gold, too pale on
   white — use the light warm token. */
:root[data-theme="light"] .pf-pro-badge.is-off,
:root[data-theme="light"] .pf-pro-renew.is-off { color: var(--warm); }

/* (B) Weight delta chips + change-KPI arrows used dark-theme pastel green/red
   (#96d9b4 / #e6a5a5) — barely legible on the light tinted pills. Use the light
   good/bad tokens. */
:root[data-theme="light"] .weight-entry .we-delta.up { color: var(--bad); }
:root[data-theme="light"] .weight-entry .we-delta.down { color: var(--good); }
:root[data-theme="light"] .wt-stat-v.up .wt-stat-arrow { color: var(--bad); }
:root[data-theme="light"] .wt-stat-v.down .wt-stat-arrow { color: var(--good); }

/* Finish-screen "vs last" comparison card + the Pro pricing panel bake a dark
   gradient; their inner copy is token-driven (dark on light). Flip the fill to a
   light card so every token colour resolves correctly (matches .wt-hero etc). */
:root[data-theme="light"] .finish-vs { background: linear-gradient(155deg, #ffffff, #eef0f3); border-color: var(--line2); }
:root[data-theme="light"] .pro-panel { background: linear-gradient(150deg, #ffffff, #eef0f3); }
:root[data-theme="light"] .pro-panel-amount .o { text-decoration-color: rgba(12, 13, 16, 0.3); }

/* Voice-capture modal — dark card on a dim scrim; flip to a light modal so the
   token text/waveform read (waveform bars use --accent = black on light). */
:root[data-theme="light"] .vw-card { background: linear-gradient(155deg, #ffffff, #eef0f3); }

/* ─── Cardio / GPS activity tracking ────────────────────────────────────────
   Recording takeover, finish summary, detail view, splits table, maps, Today
   hero, manual entry + type sheets, day-editor Gym/Cardio control. Uses the
   Ironclad tokens; sheets reuse the .day-sheet / .sheet-scrim base. */

/* Full-screen takeovers (recording / finish / detail) */
.cardio-screen {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
  overflow: hidden; /* the inner scroll region owns the scrolling */
  animation: popIn .2s ease;
}
html.cardio-recording { overflow: hidden; }
/* min-height:0 lets the flex child shrink below its content so overflow-y
   actually scrolls (default min-height:auto pins it to content height). */
.cf-scroll, .cd-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(28px + var(--safe-top)) 20px calc(40px + var(--safe-bottom)); max-width: 620px; margin: 0 auto; width: 100%; }

/* ── Recording screen ── */
.cr-screen { padding: calc(14px + var(--safe-top)) 0 calc(18px + var(--safe-bottom)); }
.cr-head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.cr-close, .cr-maptoggle { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line2);
  background: var(--panel); color: var(--text); display: grid; place-items: center; }
.cr-close .wt-icon, .cr-maptoggle .wt-icon { width: 20px; height: 20px; }
.cr-type { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.cr-type .wt-icon { width: 20px; height: 20px; color: var(--accent-ink-text); }
.cr-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 18px 0; padding: 10px 12px;
  background: rgba(255,169,91,.1); border: 1px solid rgba(255,169,91,.28); border-radius: 12px;
  color: var(--dim); font-size: 12.5px; line-height: 1.4; }
.cr-note .wt-icon { width: 16px; height: 16px; flex: none; color: #ffa95b; margin-top: 1px; }
/* Scrollable middle region so the map + stats never trap the bottom controls
   off-screen on short phones. Controls live OUTSIDE this and stay reachable. */
.cr-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; }
.cr-map { flex: none; height: 40vh; margin: 14px 18px 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line2); }
/* flex:1 0 auto → centers vertically when there's room, keeps full content
   (never shrinks below it) so the scroll region can scroll it when tall. */
.cr-stats { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 20px; }
.cr-primary { display: flex; align-items: baseline; gap: 10px; }
.cr-big { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: clamp(72px, 22vw, 128px);
  letter-spacing: -4px; line-height: 1; color: var(--text); }
.cr-big-unit { font-weight: 700; font-size: 26px; color: var(--accent-ink-text); }
.cr-row { display: flex; gap: 40px; }
.cr-stat { text-align: center; }
.cr-k { font-family: 'Source Sans 3', sans-serif; font-size: 10px; letter-spacing: 1.5px; color: var(--dim2); }
.cr-v { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 34px; letter-spacing: -1px; margin-top: 4px; }
.cr-acq { font-family: 'Source Sans 3', sans-serif; font-size: 11px; letter-spacing: 1px; color: var(--dim2); text-transform: uppercase; }
.cr-screen.is-paused .cr-big, .cr-screen.is-paused .cr-v { color: var(--dim); }
.cr-controls { flex: none; display: flex; gap: 12px; padding: 14px 18px 0; }
.cr-btn { flex: 1; height: 60px; border-radius: 16px; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px; border: none; }
.cr-btn .wt-icon { width: 20px; height: 20px; }
.cr-pause { flex: 0 0 40%; background: var(--panel2); color: var(--text); border: 1px solid var(--line2); }
.cr-finish { position: relative; overflow: hidden; background: var(--accent); color: var(--ink);
  touch-action: none; /* a hold must not scroll the screen */ }
/* Fill drives left→right via scaleX. inset:0 previously pinned it full-width so
   the width tween never showed — transform-origin left + scaleX is the fix. On
   release the base (.28s ease) drains it back; holding overrides to .9s linear. */
.cr-finish-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: rgba(12,13,16,.22); transition: transform .28s ease; }
.cr-finish.holding .cr-finish-fill { transform: scaleX(1); transition: transform .9s linear; }
.cr-finish-tx { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cr-finish { transition: transform .14s ease; }
  .cr-finish.holding { transform: scale(.975); }
}
/* Full-screen hold-to-finish progress. The button's inline fill is invisible in
   the light theme (button is near-black there), so while the finger is down we
   raise a scrim with an unmissable volt line that reads in BOTH themes. Literal
   volt (#ccff00) on a dark scrim is intentional — it pops regardless of theme.
   pointer-events:none keeps the press driving the button underneath. */
.cr-hold-overlay {
  position: fixed; inset: 0; z-index: 330;
  display: flex; align-items: center; justify-content: center; padding: 0 32px;
  background: rgba(8, 9, 11, 0.82);
  pointer-events: none;
  opacity: 0; transition: opacity .16s ease;
}
.cr-hold-overlay.shown { opacity: 1; }
.cr-hold-overlay.leaving { opacity: 0; }
.cr-hold-inner { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cr-hold-label {
  font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: -.3px; color: #f2f3f5; text-align: center;
}
.cr-hold-track {
  position: relative; width: 100%; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); overflow: hidden;
}
/* The fill ALWAYS animates — the growing line is meaningful feedback, so it is
   deliberately NOT gated behind prefers-reduced-motion. Only the glow is. */
.cr-hold-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  border-radius: 999px; background: #ccff00;
  transform: scaleX(0); transform-origin: left center;
  animation: crHoldGrow 900ms linear forwards;
}
@keyframes crHoldGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .cr-hold-fill { box-shadow: 0 0 18px rgba(204, 255, 0, .55); }
}

/* ── Finish summary + detail shared ── */
.cf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cf-type { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.cf-type .wt-icon { width: 20px; height: 20px; color: var(--accent-ink-text); }
.cf-edit {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; color: var(--text);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
}
.cf-edit[hidden] { display: none; }
.cf-edit .wt-icon { width: 18px; height: 18px; }
.cf-done { background: var(--accent); color: var(--ink); border: none; border-radius: 12px; padding: 9px 20px; font-weight: 700; font-size: 14px; }
.cd-top { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; }
.cd-back { width: 40px; height: 40px; border-radius: 50%; flex: none; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); display: grid; place-items: center; }
.cf-back { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line2);
  background: var(--panel); color: var(--text); display: grid; place-items: center; }
.cd-back .wt-icon, .cf-back .wt-icon { width: 20px; height: 20px; }
.cd-heading { min-width: 0; padding-top: 1px; }
.cd-date { font-family: 'Source Sans 3', sans-serif; font-size: 12px; color: var(--dim); }
.cd-title-row { display: flex; align-items: center; margin-top: 5px; }
.cd-title { margin: 0; font: 700 26px var(--font-ui); letter-spacing: -.6px;
  display: flex; align-items: center; gap: 9px; }
.cd-title .wt-icon { width: 22px; height: 22px; color: var(--accent-ink-text); }
.cf-hero { text-align: center; margin: 22px 0 20px; }
.cf-hero-dist { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.cf-hero-dist > span:first-child { font-family: 'Source Sans 3', sans-serif; font-weight: 700;
  font-size: clamp(56px, 18vw, 96px); letter-spacing: -4px; line-height: 1; }
.cf-hero-unit { font-weight: 700; font-size: 24px; color: var(--accent-ink-text); }
.cf-hero-sub { margin-top: 10px; color: var(--dim); font-size: 13.5px; }
.cf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cf-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px; text-align: center; }
.cf-k { font-family: 'Source Sans 3', sans-serif; font-size: 9.5px; letter-spacing: 1.2px; color: var(--dim2); }
.cf-v { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.8px; margin-top: 8px; }
.cf-vu { font-size: 11px; color: var(--dim); margin-left: 3px; letter-spacing: 0; }

/* Maps */
.cardio-map { height: 240px; margin-top: 16px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line2); background: var(--panel2); }
.cardio-map-fail { height: 100%; display: grid; place-items: center; font-family: 'Source Sans 3', sans-serif;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim2); }
.leaflet-container { background: var(--panel2); font: inherit; }
.leaflet-container .leaflet-control-attribution { background: rgba(12,13,16,.6); color: var(--dim); font-size: 9px; }
.leaflet-container .leaflet-control-attribution a { color: var(--dim); }
/* OpenStreetMap ships one raster tile set. Darken only the tile pane so every
   Leaflet surface follows the app theme while route lines, markers and map
   controls stay in their original high-contrast colours. */
:root[data-theme="dark"] .leaflet-container .leaflet-tile-pane {
  filter: brightness(.6) invert(1) contrast(1.7) hue-rotate(180deg) saturate(.3) brightness(.65);
}
:root[data-theme="light"] .leaflet-container .leaflet-tile-pane { filter: none; }
:root[data-theme="dark"] .leaflet-container .leaflet-control-attribution {
  background: rgba(12, 13, 16, .82); color: var(--dim);
}
:root[data-theme="dark"] .leaflet-container .leaflet-control-attribution a { color: var(--dim); }
:root[data-theme="light"] .leaflet-container .leaflet-control-attribution {
  background: rgba(255, 255, 255, .86); color: var(--dim);
}
:root[data-theme="light"] .leaflet-container .leaflet-control-attribution a { color: var(--dim); }

/* Splits table */
.cardio-splits { margin-top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px 12px; }
.cs-head { display: flex; justify-content: space-between; font-family: 'Source Sans 3', sans-serif; font-size: 10px;
  letter-spacing: 1.2px; color: var(--dim2); padding: 10px 0 6px; border-bottom: 1px solid var(--line); }
.cs-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.cs-n { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 14px; width: 24px; color: var(--dim); }
.cs-bar { flex: 1; height: 8px; background: #20232a; border-radius: 5px; overflow: hidden; }
.cs-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.cs-p { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 14px; width: 60px; text-align: right; }

/* AI Coach's take */
.cf-coach { margin-top: 18px; background: linear-gradient(155deg, #1b1d23, #111216); border: 1px solid var(--line2); border-radius: 18px; padding: 16px 18px; }
.cf-coach-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--accent-ink-text); }
.cf-coach-head .wt-icon { width: 16px; height: 16px; }
.cf-coach-body { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.cf-coach-wait { font-size: 13px; color: var(--dim); }
.cf-coach-loading, .cardio-loading { display: flex; gap: 6px; padding: 6px 0; }
.cardio-loading { justify-content: center; padding: 40px 0; }
.cf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim2); animation: cfPulse 1s ease-in-out infinite; }
.cf-dot:nth-child(2) { animation-delay: .15s; } .cf-dot:nth-child(3) { animation-delay: .3s; }
@keyframes cfPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* Notes + actions */
.cf-notes-wrap { display: block; margin-top: 18px; }
.cf-notes-k, .cd-notes .cf-notes-k { font-family: 'Source Sans 3', sans-serif; font-size: 10px; letter-spacing: 1.2px; color: var(--dim2); }
.cf-notes { width: 100%; margin-top: 8px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
  padding: 12px 14px; color: var(--text); font: inherit; font-size: 15px; resize: vertical; }
.cd-notes { margin-top: 18px; }
.cd-notes-body { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.cf-actions { margin-top: 20px; }
.cf-share { width: 100%; height: 52px; border-radius: 15px; background: var(--panel2); border: 1px solid var(--line2);
  color: var(--text); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cf-share .wt-icon { width: 18px; height: 18px; }
.cd-delete { width: 100%; margin-top: 24px; height: 50px; border-radius: 14px; background: transparent;
  border: 1px solid rgba(255,107,107,.3); color: var(--bad); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.cd-delete .wt-icon { width: 17px; height: 17px; }

/* ── Detail edit mode (draft editor — matches the gym history editor) ── */
.cd-top .sd-edit, .cd-top .sd-edit-actions { margin-left: auto; }
.cd-edit { margin: 20px 0 4px; }
.cd-edit-field .cf-notes-k { display: block; }
.cd-edit-types { margin-top: 10px; }
.cd-edit-types .cardio-type-btn { padding: 12px 6px; }
.cd-edit-types .cardio-type-ic, .cd-edit-types .cardio-type-ic .wt-icon { width: 24px; height: 24px; }
.cd-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; align-items: stretch; }
.cd-dur-stepper { display: flex; flex-direction: column; justify-content: center; padding: 12px 8px; }
.cd-dur-stepper .st-val { font-size: 22px; color: var(--accent-ink-text); }
.cd-dist-field { justify-content: center; }
.cd-dist-field .cm-input { font-family: 'Source Sans 3', sans-serif; }

/* ── Today cardio hero ── */
.cardio-hero { position: relative; text-align: left; }
.cardio-hero-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(204,255,0,.12);
  color: var(--accent-ink-text); display: grid; place-items: center; margin-bottom: 12px; }
.cardio-hero-ic .wt-icon { width: 24px; height: 24px; }
.cardio-switch { display: block; margin: 14px auto 0; }

/* ── Unsynced banner (Today) ── */
.cardio-unsynced { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 14px;
  background: rgba(255,169,91,.1); border: 1px solid rgba(255,169,91,.28); border-radius: 14px; }
.cardio-unsynced .cu-ic { color: #ffa95b; display: grid; place-items: center; }
.cardio-unsynced .cu-ic .wt-icon { width: 18px; height: 18px; }
.cardio-unsynced .cu-msg { flex: 1; font-size: 13.5px; color: var(--text); }
.cardio-unsynced .cu-retry { background: var(--accent); color: var(--ink); border: none; border-radius: 10px;
  padding: 7px 16px; font-weight: 700; font-size: 13px; }
.cardio-unsynced .cu-retry:disabled { opacity: .6; }

/* ── History activity icons ── */
.cardio-row { display: flex; align-items: center; }
.history-row-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(var(--accent-rgb), .1);
  color: var(--accent-ink-text); display: grid; place-items: center; flex: none; }
.history-row-ic .wt-icon { width: 19px; height: 19px; }
.cardio-row .left { flex: 1; }

/* ── Day-switch sheet: cardio actions ── */
.day-sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.day-sheet-action { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 13px 15px; color: var(--text); }
.day-sheet-action .dsa-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(204,255,0,.12);
  color: var(--accent-ink-text); display: grid; place-items: center; flex: none; }
.day-sheet-action .dsa-ic .wt-icon { width: 20px; height: 20px; }
.day-sheet-action .dsa-tx { display: flex; flex-direction: column; gap: 2px; }
.day-sheet-action .dsa-t { font-weight: 700; font-size: 15px; }
.day-sheet-action .dsa-s { font-size: 12px; color: var(--dim); }

/* ── Type picker + manual entry sheets ── */
.cardio-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.cardio-type-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; color: var(--text); font-weight: 700; font-size: 13.5px; }
.cardio-type-btn.on { border-color: var(--accent); background: rgba(204,255,0,.08); }
.cardio-type-ic { width: 30px; height: 30px; color: var(--accent-ink-text); }
.cardio-type-ic .wt-icon { width: 30px; height: 30px; }
.cm-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-field { display: flex; flex-direction: column; gap: 7px; }
.cm-k { font-family: 'Source Sans 3', sans-serif; font-size: 10px; letter-spacing: 1px; color: var(--dim2); }
.cm-input { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px;
  color: var(--text); font: inherit; font-size: 16px; }
.cardio-save { width: 100%; margin-top: 18px; height: 52px; border-radius: 15px; background: var(--accent);
  color: var(--ink); border: none; font-weight: 700; font-size: 16px; }
.cardio-save:disabled { opacity: .45; }

/* ── Day editor: Gym / Cardio segmented control + cardio config ── */
.de-kind { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--line2); border-radius: 13px;
  padding: 4px; margin: 4px 0 18px; }
.de-kind-btn { flex: 1; padding: 10px; border-radius: 10px; background: transparent; border: none;
  color: var(--dim); font-weight: 700; font-size: 14px; }
.de-kind-btn.on { background: var(--panel2); color: var(--text); }
.de-cardio { display: flex; flex-direction: column; }
.de-c-k { font-family: 'Source Sans 3', sans-serif; font-size: 10px; letter-spacing: 1.2px; color: var(--dim2); margin: 8px 0 10px; }
.de-c-opt { color: var(--dim2); text-transform: none; letter-spacing: 0; }
.de-c-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.de-c-type { padding: 14px 8px; border-radius: 13px; background: var(--panel); border: 1px solid var(--line2);
  color: var(--text); font-weight: 700; font-size: 14px; }
.de-c-type.on { border-color: var(--accent); background: rgba(204,255,0,.08); }
.de-c-targets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.de-c-note { margin-top: 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 13px; color: var(--dim); font-size: 13px; line-height: 1.45; }

/* ── Live map: "waiting for GPS" placeholder (never render tiles at 0,0) ── */
.cr-map-wait { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px; text-align: center; }
.cr-map-wait .wt-icon { width: 26px; height: 26px; color: var(--accent-ink-text); animation: cfPulse 1.4s ease-in-out infinite; }
.cr-map-wait .cmw-t { font-family: 'Source Sans 3', sans-serif; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim); }

/* ── Recording: GPS error / permission state (replaces the acq hint) ── */
.cr-acq.is-error { color: #ffa95b; text-transform: none; letter-spacing: .2px; font-size: 12.5px;
  line-height: 1.45; max-width: 320px; text-align: center; }

/* ── Share sheet (finish + detail): big preview on top, controls below ── */
.cardio-share-scrim { position: fixed; inset: 0; z-index: 340; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadeScrim .18s ease; }
.cardio-share-sheet { width: 100%; max-width: 560px; background: var(--bg); border-top-left-radius: 22px;
  border-top-right-radius: 22px; border: 1px solid var(--line); border-bottom: none;
  padding: 8px 16px calc(20px + var(--safe-bottom)); animation: cssSheetUp .24s cubic-bezier(.22,1,.36,1); }
@keyframes cssSheetUp { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }
.cardio-share-sheet .css-grip { width: 38px; height: 4px; border-radius: 3px; background: var(--line2); margin: 6px auto 12px; }
.cardio-share-sheet .css-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cardio-share-sheet .css-title > span { font-weight: 700; font-size: 15px; }
.cardio-share-sheet .css-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--panel); color: var(--text); display: grid; place-items: center; }
.cardio-share-sheet .css-close .wt-icon { width: 17px; height: 17px; }
@media (min-width: 640px) { .cardio-share-scrim { align-items: center; } .cardio-share-sheet { border-radius: 22px; border-bottom: 1px solid var(--line); margin: 0 16px; } }

/* Desktop: turn the phone-first recorder into a compact workspace. */
@media (min-width: 1024px) {
  .cr-head,
  .cr-note {
    width: min(calc(100% - 40px), 1040px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .cr-scroll {
    width: min(calc(100% - 40px), 1040px);
    margin: 0 auto;
    padding: 20px 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 20px;
    align-items: center;
  }
  .cr-map {
    width: 100%;
    max-width: none;
    height: min(52vh, 520px);
    min-height: 340px;
    margin: 0;
    align-self: center;
  }
  .cr-stats {
    width: 100%;
    max-width: none;
    min-height: min(52vh, 520px);
    margin: 0;
    padding: 32px;
    gap: 30px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
  }
  .cr-big { font-size: clamp(80px, 8vw, 108px); }
  .cr-v { font-size: 30px; }
  .cr-map[hidden] + .cr-stats {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 560px;
    min-height: min(48vh, 480px);
  }
  .cr-controls {
    width: min(100%, 520px);
    max-width: none;
    margin: 0 auto;
  }
}

/* Ironclad Light: the cardio AI-coach card bakes a dark gradient (like .finish-vs
   / .pro-panel) — flip it to a light card so its token text reads on light. */
:root[data-theme="light"] .cf-coach { background: linear-gradient(155deg, #ffffff, #eef0f3); border-color: var(--line2); }