/* ============================================
   LARS — "Equinox" dark redesign
   Ported from a claude.ai/design handoff. See plan @
   /Users/andrejbusch/.claude/plans/have-a-look-at-deep-cocke.md
   ============================================ */

/* --- Fonts: loaded via <link> in layout.js head for preconnect.
       This @import is a no-op fallback for direct CSS access (e.g.
       in case the page is served without the head fonts loaded). --- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- Design Tokens (Equinox) --- */
:root {
  /* Surface — cool near-black with subtle warm undertone */
  --bg-0: #07080A;          /* page */
  --bg-1: #0E1014;          /* primary surface (cards) */
  --bg-2: #14171D;          /* elevated surface */
  --bg-3: #1C2028;          /* hover / pressed */
  --bg-inset: #050608;      /* recessed (inputs, charts) */

  /* Lines */
  --line-1: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16);

  /* Foreground */
  --fg-1: #EDEEF2;
  --fg-2: #A4ABBA;
  --fg-3: #6B7281;
  --fg-4: #444B57;

  /* Signature — mint */
  --vital: #6EE7A8;
  --vital-dim: #4FB888;
  --vital-glow: rgba(110, 231, 168, 0.28);
  --vital-ink: #062619;

  /* Domain accents */
  --recovery: #6EE7A8;
  --sleep: #A78BFA;
  --strain: #5EC8FF;
  --nutrition: #FFB454;
  --behavior: #F5F5F0;
  --medication: #FF7B7B;
  --monitoring: #5EC8FF;

  /* Status */
  --ok: #6EE7A8;
  --warn: #FFB454;
  --bad: #FF7B7B;
  --info: #5EC8FF;

  /* Typography */
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Inter Tight', -apple-system, system-ui, sans-serif;  /* deprecated alias */

  /* Spacing (Equinox 8-step) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* Radii */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 20px;
  --r-5: 28px;
  --r-full: 999px;

  /* Shadows + glows */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-elev: 0 12px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --glow-vital: 0 0 24px var(--vital-glow);

  /* ─── Backwards-compat aliases ───
     Every legacy `--bg-*`, `--text-*`, `--accent-*`, `--status-*`, `--flag-*`
     variable used elsewhere in this file is re-pointed at the Equinox tokens
     above so existing page CSS keeps rendering — just dark + mint instead
     of warm + clinical. Later commits migrate individual pages off these
     aliases onto the new vocabulary directly. */
  --bg-primary: var(--bg-0);
  --bg-secondary: var(--bg-1);
  --bg-tertiary: var(--bg-2);
  --bg-dark: var(--bg-0);
  --bg-card: var(--bg-1);
  --bg-card-hover: var(--bg-3);
  --bg-accent: var(--bg-2);

  --text-primary: var(--fg-1);
  --text-secondary: var(--fg-2);
  --text-tertiary: var(--fg-3);
  --text-inverse: var(--vital-ink);
  --text-link: var(--vital);

  --accent-green: var(--vital);
  --accent-green-light: rgba(110, 231, 168, 0.10);
  --accent-green-soft: var(--vital-dim);
  --accent-amber: var(--warn);
  --accent-amber-light: rgba(255, 180, 84, 0.10);
  --accent-red: var(--bad);
  --accent-red-light: rgba(255, 123, 123, 0.10);
  --accent-blue: var(--info);
  --accent-blue-light: rgba(94, 200, 255, 0.10);
  --accent-purple: var(--sleep);
  --accent-purple-light: rgba(167, 139, 250, 0.10);

  --status-normal: var(--ok);
  --status-normal-bg: rgba(110, 231, 168, 0.10);
  --status-monitor: var(--warn);
  --status-monitor-bg: rgba(255, 180, 84, 0.10);
  --status-action: var(--bad);
  --status-action-bg: rgba(255, 123, 123, 0.10);
  --status-urgent: var(--bad);
  --status-urgent-bg: rgba(255, 123, 123, 0.15);

  --flag-normal: var(--ok);
  --flag-low: var(--warn);
  --flag-high: var(--warn);
  --flag-critical: var(--bad);

  /* Legacy spacing aliases (map to Equinox 8-step) */
  --space-xs: var(--s-1);
  --space-sm: var(--s-2);
  --space-md: var(--s-4);
  --space-lg: var(--s-6);
  --space-xl: var(--s-7);
  --space-2xl: var(--s-8);
  --space-3xl: 64px;

  /* Legacy radius aliases */
  --radius-sm: var(--r-1);
  --radius-md: var(--r-2);
  --radius-lg: var(--r-3);
  --radius-xl: var(--r-4);
  --radius-full: var(--r-full);

  /* Legacy borders — adapted to dark hairlines */
  --border-subtle: 1px solid var(--line-1);
  --border-medium: 1px solid var(--line-2);

  /* Legacy shadows — flattened for dark canvas */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-elev);
  --shadow-hover: var(--shadow-elev);

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 200ms;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 15px;       /* Equinox base */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  line-height: 1.45;
  letter-spacing: -0.005em;
  min-height: 100vh;
  /* Prevent any rogue child that exceeds the viewport from creating a
     horizontal scroll. Long URLs, tables, fixed-width images etc. should
     not let the user pan the entire layout sideways.
     IMPORTANT: use `clip`, NOT `hidden`. `overflow-x: hidden` turns the
     element into a scroll container in the cross axis which kills any
     `position: sticky` element inside (the sticky's scrollport becomes
     body instead of the viewport, and that scrollport never scrolls). */
  max-width: 100vw;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  /* Subtle vital-glow radial gradient top-right + cyan tint top-left,
     matching the Equinox canvas. Mobile-first; carries through to desktop. */
  background:
    radial-gradient(800px 400px at 70% -20%, rgba(110, 231, 168, 0.06) 0%, transparent 60%),
    radial-gradient(600px 300px at 0% 10%, rgba(94, 200, 255, 0.04) 0%, transparent 60%),
    var(--bg-0);
  background-attachment: fixed;
  padding-bottom: 88px;  /* space for bottom nav */
}

a { color: var(--vital); text-decoration: none; transition: opacity var(--duration) var(--ease); }
a:hover { opacity: 0.85; }

img { max-width: 100%; height: auto; }

::selection { background: rgba(110, 231, 168, 0.25); color: var(--fg-1); }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

.serif { font-family: var(--font-serif); letter-spacing: -0.01em; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* --- Layout --- */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.page-header {
  padding: var(--space-2xl) 0 var(--space-lg);
}

.page-header h1 {
  margin-bottom: var(--space-xs);
}

.page-header .subtitle {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 400;
}

.section {
  margin-bottom: var(--space-2xl);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-flat {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.card-elevated {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

.card + .card { margin-top: var(--space-md); }

/* --- Stat Cards --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
}

.stat-card {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  text-align: center;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.stat-unit {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* --- Metric Cards (trend-aware dashboard) --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.metric-card {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--duration) var(--ease);
}

.metric-card:hover {
  box-shadow: var(--shadow-md);
}

.metric-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.metric-card-avg {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-weight: 400;
}

.metric-card-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}

.metric-card-value-col {
  display: flex;
  flex-direction: column;
}

.metric-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}

.metric-card-unit {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.metric-card-sparkline {
  flex-shrink: 0;
}

.metric-card-sparkline svg {
  display: block;
}

.metric-card-trends {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  border-top: 1px solid var(--bg-tertiary);
  padding-top: var(--space-sm);
}

.trend-badge {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.trend-good {
  background: var(--accent-green-light);
  color: var(--accent-green);
}

.trend-bad {
  background: var(--accent-red-light);
  color: var(--accent-red);
}

.trend-flat {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.metric-card-last-measured {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-weight: 400;
  font-style: italic;
}

/* --- Highlights Strip --- */
.highlights-strip {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.highlight-chip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
}

.highlight-chip.highlight-good {
  background: var(--accent-green-light);
  color: var(--accent-green);
}

.highlight-chip.highlight-bad {
  background: var(--accent-red-light);
  color: var(--accent-red);
}

.highlight-label {
  font-weight: 600;
}

.highlight-change {
  font-weight: 400;
}

/* --- Plan Items / Checklist --- */
.plan-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: var(--border-subtle);
  background: var(--bg-card);
  transition: all var(--duration) var(--ease);
  cursor: pointer;
}

.plan-item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-medium);
}

.plan-item + .plan-item { margin-top: var(--space-sm); }

.plan-item.has-exception {
  opacity: 0.55;
  background: var(--bg-tertiary);
}

.plan-item.has-exception .plan-item-title {
  text-decoration: line-through;
}

.plan-item.auto-adjusted {
  border-left: 3px solid var(--accent-amber);
}

.plan-item-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #D4CFC8;
  border-radius: 50%;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration) var(--ease);
}

.plan-item.has-exception .plan-item-check {
  background: var(--text-tertiary);
  border-color: var(--text-tertiary);
  color: white;
}

.plan-item-content { flex: 1; min-width: 0; }

.plan-item-title {
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

.plan-item-meta {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.plan-item-category {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-accent);
  color: var(--text-secondary);
}

/* Category colors */
.cat-supplement { background: var(--accent-green-light); color: var(--accent-green); }
.cat-exercise { background: var(--accent-blue-light); color: var(--accent-blue); }
.cat-nutrition { background: var(--accent-amber-light); color: var(--accent-amber); }
.cat-sleep { background: var(--accent-purple-light); color: var(--accent-purple); }
.cat-behavior { background: #F0EDE8; color: var(--text-secondary); }
.cat-medication { background: var(--accent-red-light); color: var(--accent-red); }
.cat-monitoring { background: var(--accent-blue-light); color: var(--accent-blue); }

/* --- Badges / Pills --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.badge-normal { background: var(--status-normal-bg); color: var(--status-normal); }
.badge-monitor { background: var(--status-monitor-bg); color: var(--status-monitor); }
.badge-action { background: var(--status-action-bg); color: var(--status-action); }
.badge-urgent { background: var(--status-urgent-bg); color: var(--status-urgent); }

.badge-on_track, .badge-improving { background: var(--status-normal-bg); color: var(--status-normal); }
.badge-plateau { background: var(--status-monitor-bg); color: var(--status-monitor); }
.badge-regressing { background: var(--status-action-bg); color: var(--status-action); }

/* Biomarker flags */
.flag-normal { color: var(--flag-normal); }
.flag-low, .flag-high { color: var(--flag-low); }
.flag-critical_low, .flag-critical_high { color: var(--flag-critical); font-weight: 700; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-green);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-green-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: var(--border-subtle);
}

.btn-secondary:hover {
  background: var(--bg-accent);
  box-shadow: var(--shadow-sm);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: var(--border-medium);
}

.btn-outline:hover {
  background: var(--bg-tertiary);
}

.btn-danger {
  background: var(--accent-red-light);
  color: var(--accent-red);
}

.btn-sm {
  font-size: 0.8125rem;
  padding: 6px 14px;
}

.btn-lg {
  font-size: 1rem;
  padding: 14px 28px;
}

.btn:disabled, .btn.loading {
  opacity: 0.5;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Quick Actions (availability presets) --- */
.quick-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.quick-action {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: var(--border-subtle);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.quick-action:hover {
  background: var(--bg-accent);
  border-color: var(--border-medium);
}

.quick-action.active {
  background: var(--accent-green);
  color: white;
  border-color: var(--accent-green);
}

/* --- Tables --- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.data-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-subtle);
}

.data-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid #F3F1EE;
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td { background: var(--bg-tertiary); }

/* --- Upload Area --- */
.upload-zone {
  border: 2px dashed #D4CFC8;
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  background: var(--bg-tertiary);
  transition: all var(--duration) var(--ease);
  cursor: pointer;
}

.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
}

.upload-zone-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  opacity: 0.4;
}

.upload-zone-text {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.upload-zone-hint {
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  margin-top: var(--space-sm);
}

/* --- Chat --- */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 400px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) 0;
}

.chat-message {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  max-width: 85%;
}

.chat-message.user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.chat-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.chat-message.user .chat-avatar {
  background: var(--accent-green);
  color: white;
}

.chat-message.assistant .chat-avatar {
  background: var(--bg-dark);
  color: var(--text-inverse);
}

.chat-bubble {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.chat-message.user .chat-bubble {
  background: var(--accent-green);
  color: white;
  border-bottom-right-radius: var(--space-xs);
}

.chat-message.assistant .chat-bubble {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-bottom-left-radius: var(--space-xs);
}

.chat-action-banner {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-green-light);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--accent-green);
}

.chat-input-container {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: var(--border-subtle);
}

.chat-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 12px var(--space-lg);
  border: var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  outline: none;
  transition: border-color var(--duration) var(--ease);
}

.chat-input:focus {
  border-color: var(--accent-green);
}

/* --- Adherence Bar --- */
.adherence-bar-container {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.adherence-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.adherence-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s var(--ease);
}

.adherence-bar-fill.good { background: var(--accent-green); }
.adherence-bar-fill.fair { background: var(--accent-amber); }
.adherence-bar-fill.poor { background: var(--accent-red); }

.adherence-pct {
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 42px;
  text-align: right;
}

/* --- Priority Cards --- */
.priority-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: var(--border-subtle);
  background: var(--bg-card);
}

.priority-card + .priority-card { margin-top: var(--space-sm); }

.priority-rank {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-green);
  color: white;
  font-weight: 700;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.priority-content { flex: 1; }
.priority-area { font-weight: 600; margin-bottom: 2px; }
.priority-rationale { font-size: 0.8125rem; color: var(--text-secondary); }

/* --- Assessment Summary --- */
.assessment-card {
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-xl);
}

.assessment-card h3 {
  color: var(--text-inverse);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
  opacity: 0.9;
}

.assessment-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  opacity: 0.85;
}

/* --- Evaluation Outcome --- */
.eval-card {
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.eval-card:hover { box-shadow: var(--shadow-md); }
.eval-card + .eval-card { margin-top: var(--space-md); }

.eval-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.eval-date {
  font-weight: 600;
  font-size: 0.9375rem;
}

.eval-summary {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Empty States --- */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-tertiary);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.3;
}

.empty-state-text {
  font-size: 1rem;
  margin-bottom: var(--space-lg);
}

/* --- Bottom Navigation --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: var(--border-subtle);
  display: flex;
  justify-content: space-around;
  padding: var(--space-sm) 0;
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.nav-item:hover, .nav-item.active {
  color: var(--accent-green);
  opacity: 1;
}

.nav-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* --- Top bar --- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Honour iPhone Dynamic Island / notch safe-area on PWAs.
     max() picks the bigger of the regular padding and the safe-area
     inset — avoids stacking them and creating an oversize gap. */
  padding: max(var(--space-md), env(safe-area-inset-top, var(--space-md))) var(--space-lg) var(--space-md);
  border-bottom: var(--border-subtle);
  background: rgba(250,249,247,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.top-bar-logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.top-bar-sync {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.top-bar-sync:hover {
  border-color: var(--border-color);
  background: var(--bg-secondary);
}

.top-bar-sync.syncing .sync-dot {
  animation: pulse-sync 0.8s ease-in-out infinite;
}

@keyframes pulse-sync {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.top-bar-logout {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-decoration: none;
  padding: 4px 10px;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.top-bar-logout:hover {
  color: var(--accent-red);
  border-color: var(--accent-red);
  background: var(--accent-red-light);
}

.sync-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  margin-right: 4px;
  vertical-align: middle;
}

/* --- Loading / HTMX --- */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request.htmx-indicator {
  display: inline-block;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bg-accent);
  border-top-color: var(--accent-green);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* --- Utilities --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.w-full { width: 100%; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Responsive --- */
@media (max-width: 640px) {
  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.25rem; }
  .container { padding: 0 var(--space-md); }
  .page-header { padding: var(--space-lg) 0 var(--space-md); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 1.5rem; }
  .card, .card-flat, .card-elevated { padding: var(--space-md); }
  .assessment-card { padding: var(--space-lg); }
  .metrics-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .metric-card-value { font-size: 1.5rem; }
  .metric-card-sparkline svg { width: 80px; height: 28px; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* --- Check-in Form --- */
.checkin-form {
  padding: var(--space-md) var(--space-lg);
}

.checkin-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.checkin-row + .checkin-row {
  border-top: 1px solid var(--bg-tertiary);
}

.checkin-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 60px;
}

.checkin-emoji-group {
  display: flex;
  gap: var(--space-xs);
}

.checkin-emoji {
  font-size: 1.25rem;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background: var(--bg-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration) var(--ease);
  padding: 0;
}

.checkin-emoji:hover {
  background: var(--bg-accent);
  transform: scale(1.1);
}

.checkin-emoji.selected {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
  transform: scale(1.15);
}

.checkin-notes-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--bg-tertiary);
}

.checkin-notes-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  outline: none;
  resize: vertical;
  min-height: 36px;
  transition: border-color var(--duration) var(--ease);
}

.checkin-notes-input:focus {
  border-color: var(--accent-green);
}

/* --- Time of Day Groups --- */
.tod-group {
  margin-bottom: var(--space-lg);
}

.tod-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-xs);
}

/* --- Plan Item Rationale --- */
.plan-item-rationale {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 2px;
  line-height: 1.4;
}

/* --- Milestone Cards --- */
.milestone-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-green-light) 0%, #F0F9F3 100%);
  border: 1px solid var(--accent-green);
  margin-bottom: var(--space-sm);
  position: relative;
}

.milestone-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.milestone-content {
  flex: 1;
  min-width: 0;
}

.milestone-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--accent-green);
  margin-bottom: 2px;
}

.milestone-detail {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.milestone-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  transition: color var(--duration) var(--ease);
}

.milestone-dismiss:hover {
  color: var(--text-primary);
}

/* --- Coaching Messages --- */
.coaching-msg {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: var(--border-subtle);
  background: var(--bg-card);
  margin-bottom: var(--space-sm);
  position: relative;
}

.coaching-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.coaching-msg-type {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-accent);
  color: var(--text-secondary);
}

.coaching-msg-dismiss {
  background: none;
  border: none;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  transition: color var(--duration) var(--ease);
}

.coaching-msg-dismiss:hover {
  color: var(--text-primary);
}

.coaching-msg-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--space-xs);
}

.coaching-msg-body {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Coaching message type variants */
.coaching-msg-insight { border-left: 3px solid var(--accent-blue); }
.coaching-msg-insight .coaching-msg-type { background: var(--accent-blue-light); color: var(--accent-blue); }

.coaching-msg-encouragement { border-left: 3px solid var(--accent-green); }
.coaching-msg-encouragement .coaching-msg-type { background: var(--accent-green-light); color: var(--accent-green); }

.coaching-msg-alert { border-left: 3px solid var(--accent-red); }
.coaching-msg-alert .coaching-msg-type { background: var(--accent-red-light); color: var(--accent-red); }

.coaching-msg-suggestion { border-left: 3px solid var(--accent-amber); }
.coaching-msg-suggestion .coaching-msg-type { background: var(--accent-amber-light); color: var(--accent-amber); }

.coaching-msg-milestone { border-left: 3px solid var(--accent-purple); }
.coaching-msg-milestone .coaching-msg-type { background: var(--accent-purple-light); color: var(--accent-purple); }

/* --- Week View --- */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.week-range {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-sm);
}

.week-day {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration) var(--ease);
}

.week-day:hover {
  box-shadow: var(--shadow-sm);
}

.week-day-today {
  border-color: var(--accent-green);
  background: #FCFEFB;
}

.week-day-header {
  text-align: center;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--bg-tertiary);
  margin-bottom: var(--space-xs);
}

.week-day-name {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.week-day-date {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.week-day-today .week-day-date {
  color: var(--accent-green);
}

.week-day-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-xs) 0;
}

.week-day-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.week-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  padding: 2px 4px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.week-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-item-more {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  text-align: center;
  padding: 2px 0;
}

.week-day-count {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-align: center;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--bg-tertiary);
  margin-top: auto;
}

.week-day-empty {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-md) 0;
  font-style: italic;
}

.week-day-footer {
  margin-top: auto;
  padding-top: var(--space-xs);
  text-align: center;
}

/* --- Goal Progress Cards --- */
.goal-card {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.goal-title {
  font-weight: 600;
  font-size: 0.9375rem;
}

.goal-progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.goal-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.goal-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease);
  background: var(--accent-green);
}

.goal-pct {
  font-size: 0.8125rem;
  font-weight: 700;
  min-width: 42px;
  text-align: right;
  color: var(--accent-green);
}

.goal-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* --- Form Elements (Onboarding / Settings) --- */
.onboarding-form,
.settings-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.form-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-field small {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.form-input,
.form-textarea,
.form-select {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 10px var(--space-md);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  outline: none;
  transition: border-color var(--duration) var(--ease);
  width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent-green);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235C5650' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* --- Coaching Documents --- */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: var(--border-subtle);
  background: var(--bg-card);
}

.doc-item-info {
  flex: 1;
  min-width: 0;
}

.doc-item-title {
  font-weight: 600;
  font-size: 0.9375rem;
}

.doc-item-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.doc-item-actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-sm);
}

/* --- Chat Actions --- */
.chat-actions {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-xs) 0;
}

/* --- Evaluation Detail Toggle --- */
.eval-detail {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-subtle);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-line;
}

/* --- Generate Error --- */
.generate-error {
  color: var(--accent-red);
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: var(--space-sm);
  min-height: 1.2em;
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeIn 0.3s var(--ease) forwards;
}

/* Staggered cards */
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 50ms; }
.card:nth-child(3) { animation-delay: 100ms; }
.card:nth-child(4) { animation-delay: 150ms; }
.card:nth-child(5) { animation-delay: 200ms; }

/* --- Responsive: Week Grid --- */
@media (max-width: 640px) {
  .week-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .week-day {
    min-height: 90px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .checkin-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .checkin-emoji {
    width: 34px;
    height: 34px;
    font-size: 1.125rem;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .week-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Connected Apps ────────────────────────────────────────── */
.connection-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.connection-dot.connected {
  background: var(--accent-green);
}

/* --- Metric Detail Modal --- */
.metric-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: flex-end;
}

.metric-modal.open {
  display: flex;
}

.metric-modal-content {
  background: var(--bg-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  animation: slide-up 0.25s ease-out;
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (min-width: 640px) {
  .metric-modal {
    align-items: center;
  }
  .metric-modal-content {
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }
}

.metric-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-modal-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.metric-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0 4px;
  line-height: 1;
}

.metric-modal-periods {
  display: flex;
  gap: var(--space-xs);
}

.period-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--duration) var(--ease);
}

.period-btn.active {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green);
}

.metric-modal-chart {
  position: relative;
  height: 250px;
}

.metric-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  text-align: center;
  border-top: 1px solid var(--bg-tertiary);
  padding-top: var(--space-md);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Plan Item Actions --- */
.plan-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--bg-tertiary);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.btn-icon-sm {
  width: 28px;
  height: 28px;
  font-size: 0.8125rem;
}
.btn-icon-danger:hover {
  background: var(--accent-red-light, #fde8e8);
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8125rem;
}

/* --- Suggestion Cards --- */
.suggestion-card {
  background: var(--bg-secondary);
  border: 1px solid var(--accent-green-light);
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}
.suggestion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}
.suggestion-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--bg-tertiary);
}

/* --- Plan Item Form Modal --- */
.plan-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.plan-modal-overlay.open {
  display: flex;
}

.plan-modal-content {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-lg);
  animation: slide-up 0.25s ease-out;
}

@media (min-width: 768px) {
  .plan-modal-overlay {
    align-items: center;
  }
  .plan-modal-content {
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }
}

.plan-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}
.plan-modal-header h3 {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.25rem;
  margin: 0;
}

.form-group {
  margin-bottom: var(--space-md);
}
.form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-green);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--bg-tertiary);
}

/* --- Time Grid Calendar (Phase 5) --- */
.time-grid-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--space-md));
  padding: 0 var(--space-md);
}

.time-grid {
  display: grid;
  grid-template-columns: 44px repeat(7, 1fr);
  min-width: 620px;
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.tg-corner {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--bg-tertiary);
  border-right: 1px solid var(--bg-tertiary);
}

.tg-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--bg-tertiary);
  border-right: 1px solid rgba(0,0,0,0.04);
  font-size: 0.75rem;
}
.tg-day-header.tg-today {
  background: var(--accent-green-light);
}
.tg-day-name {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
}
.tg-day-num {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}
.tg-today .tg-day-num {
  background: var(--accent-green);
  color: white;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-time-label {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-align: right;
  padding: 2px 6px 0 0;
  border-right: 1px solid var(--bg-tertiary);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  height: 48px;
  line-height: 1;
}

.tg-cell {
  position: relative;
  border-right: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  min-height: 48px;
  padding: 2px;
  transition: background 0.15s;
}
.tg-cell:last-child {
  border-right: none;
}

.drop-target-highlight {
  background: var(--accent-green-light) !important;
}

/* Calendar items */
.cal-item {
  font-size: 0.6875rem;
  line-height: 1.3;
  padding: 3px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: grab;
  border-left: 3px solid var(--accent-green);
  background: var(--accent-green-light);
  color: var(--text-primary);
  transition: opacity 0.15s, box-shadow 0.15s;
}
.cal-item.cat-supplement { border-left-color: #6B8E23; background: #f2f6e9; }
.cal-item.cat-exercise { border-left-color: #2E86AB; background: #e8f4f8; }
.cal-item.cat-nutrition { border-left-color: #E8890C; background: #fef3e2; }
.cal-item.cat-sleep { border-left-color: #7B68EE; background: #f0edff; }
.cal-item.cat-medication { border-left-color: #DC143C; background: #fde8ec; }
.cal-item.cat-monitoring { border-left-color: #708090; background: #f0f1f3; }
.cal-item.cat-behavior { border-left-color: var(--accent-green); background: var(--accent-green-light); }

.cal-item.cal-item-missed {
  opacity: 0.5;
  text-decoration: line-through;
}

.cal-item.dragging {
  opacity: 0.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cal-item.tap-selected {
  outline: 2px solid var(--accent-green);
  outline-offset: 1px;
}

/* Unscheduled tray */
.unscheduled-tray {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}
.unscheduled-tray .cal-item {
  flex-shrink: 0;
}

/* ── Health Assessment / Biograph Pillars ─────────────────── */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

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

@media (max-width: 400px) {
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}

.pillar-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pillar-risk-lower {
  border-left-color: var(--accent-green);
}

.pillar-risk-increased {
  border-left-color: var(--accent-red);
}

.pillar-risk-moderate {
  border-left-color: var(--accent-amber);
}

.pillar-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.pillar-risk {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pillar-risk-lower .pillar-risk { color: var(--accent-green); }
.pillar-risk-increased .pillar-risk { color: var(--accent-red); }
.pillar-risk-moderate .pillar-risk { color: var(--accent-amber); }

.pillar-note {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-style: italic;
}

.pillar-findings {
  margin-top: 4px;
}

.pillar-finding {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.4;
  padding-left: 8px;
  border-left: 1px solid var(--border-color);
  margin-bottom: 2px;
}

/* Action Items Progress */

.action-progress-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.action-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.action-progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.action-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.action-progress-fill.good { background: var(--accent-green); }
.action-progress-fill.fair { background: var(--accent-amber); }
.action-progress-fill.poor { background: var(--accent-red); }

.action-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-category-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
  margin-bottom: 4px;
}

.action-category-label:first-child {
  margin-top: 0;
}

.action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 6px 0;
  border-bottom: 1px solid var(--bg-tertiary);
}

.action-item:last-child {
  border-bottom: none;
}

.action-completed .action-title {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.action-completed .action-desc {
  color: var(--text-tertiary);
}

.action-check {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  line-height: 1;
}

.action-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  font-size: 0.7rem;
}

.action-pending {
  color: var(--text-tertiary);
  border: 1.5px solid var(--border-color);
}

.action-done {
  color: white;
  background: var(--accent-green);
}

.action-scheduled {
  color: white;
  background: var(--accent-blue);
}

.action-deferred {
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
}

.action-content {
  flex: 1;
  min-width: 0;
}

.action-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.action-desc {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 1px;
}

/* ============================================
   Training Module — Personal Trainer surface
   ============================================ */

/* Top-bar Health/Metrics links */
.top-bar-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.top-bar-link:hover { background: var(--bg-accent); color: var(--text-primary); }
.top-bar-link.active { color: var(--accent-green); background: var(--accent-green-light); }

/* Section header row (h3 + right link) */
.section-h3 {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  margin: 0 0 12px 0;
}
.section-h3-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-h3-row .section-h3 { margin: 0; }
.section-link {
  font-size: 0.78rem;
  color: var(--accent-green);
  text-decoration: none;
  font-weight: 500;
}
.section-link:hover { text-decoration: underline; }
.muted { color: var(--text-tertiary); font-size: 0.88rem; }

/* Today's workout hero card */
.workout-hero {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.04);
}
.workout-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.workout-hero-meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.workout-hero-icon {
  font-size: 1.6rem;
  color: var(--accent-green);
  line-height: 1;
}
.workout-hero-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 4px;
}
.workout-hero-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.workout-status {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
}
.workout-status-proposed { background: var(--bg-accent); color: var(--text-secondary); }
.workout-status-approved { background: var(--accent-green-light); color: var(--accent-green); }
.workout-status-completed { background: #DCEFE3; color: #1F4D2E; }

.workout-hero-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--bg-accent);
  border-bottom: 1px solid var(--bg-accent);
  margin-bottom: 14px;
}
.workout-stat { min-width: 0; }
.workout-stat-wide { grid-column: span 2; }
.workout-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 3px;
}
.workout-stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.workout-stat-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}

.advisory {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 14px;
  background: #FFF6E0;
  border-left: 3px solid #B8860B;
  border-radius: 6px;
  color: #6B5008;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.advisory-icon { font-weight: bold; }

.workout-prescription {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.workout-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.workout-tag {
  font-size: 0.7rem;
  padding: 3px 9px;
  background: var(--bg-accent);
  color: var(--text-secondary);
  border-radius: 10px;
  font-weight: 500;
}
.workout-hero-actions { display: flex; gap: 10px; }

/* Vitals strip */
.vitals-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 10px;
}
.vitals-cell {
  background: var(--bg-card);
  border-radius: var(--r-2, 12px);
  padding: 12px 14px;
  border: 1px solid var(--line-1, rgba(255,255,255,0.06));
  box-shadow: var(--shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4));
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.vitals-cell:hover { border-color: var(--line-2, rgba(255,255,255,0.10)); }
.vitals-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 3px;
}
.vitals-value {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* Build chip — version marker */
.build-chip {
  position: fixed;
  bottom: 76px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.62rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  padding: 3px 8px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 100;
  opacity: 0.7;
}

/* Week strip — compact single-row cards (1 day per row). Same on
 * desktop and mobile; the row height is tight enough that 7 fit on a
 * single phone screen without scrolling. */
.week-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.week-row {
  display: grid;
  grid-template-columns: 28px 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.week-row.week-row-today {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
}
.week-row.week-row-rest .week-row-type { color: var(--text-tertiary); }
.week-row.week-row-completed { opacity: 0.7; }
.week-row.week-row-skipped { opacity: 0.45; }
.week-row-icon {
  font-size: 1.1rem;
  color: var(--accent-green);
  text-align: center;
}
.week-row-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.week-row-dow {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.week-row-date {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.week-row-type {
  font-size: 0.92rem;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-row-dur {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.week-day {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.04);
}
.week-day-today {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
}
.week-day-completed { opacity: 0.75; }
.week-day-skipped { opacity: 0.4; }
.week-day-dow {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.week-day-num {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2px 0 4px;
}
.week-day-icon {
  font-size: 1.05rem;
  color: var(--accent-green);
  margin-bottom: 2px;
}
.week-day-meta {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.week-day-type {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Goals row */
.goals-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.goal-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.04);
}
.goal-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.goal-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.goal-current {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--fg-0, var(--text-primary));
  letter-spacing: -0.01em;
}
.goal-pct {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--vital, var(--accent-green));
  background: rgba(110, 231, 168, 0.10);
  padding: 2px 6px;
  border-radius: 4px;
}
.goal-delta {
  font-size: 0.72rem;
  color: var(--fg-2, var(--text-secondary));
  font-weight: 500;
}
.goal-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.goal-baseline, .goal-target {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}
.goal-progress-bar {
  flex: 1;
  height: 5px;
  background: var(--bg-accent);
  border-radius: 3px;
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.goal-meta {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* Plan context card */
.plan-context-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(0,0,0,0.04);
}
.plan-block-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.plan-block-index {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.plan-block-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}
.plan-block-week {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.plan-block-focus {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 10px;
}
.plan-meta {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

/* Calendar summary */
.calendar-summary {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendar-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--bg-accent);
  font-size: 0.85rem;
}
.calendar-summary-row:last-child { border-bottom: none; }
.calendar-summary-label { color: var(--text-secondary); }
.calendar-summary-value { color: var(--text-primary); font-weight: 600; }

.empty-state-compact { padding: 14px; }
.empty-state-hint {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.empty-state-hint code {
  background: var(--bg-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
}

/* Goals edit page */
.goals-edit-list { display: flex; flex-direction: column; gap: 12px; }
.goals-edit-row {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(0,0,0,0.04);
}
.goals-edit-meta { margin-bottom: 8px; }
.goals-edit-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.goals-edit-target {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-family: 'SF Mono', monospace;
}
.goals-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.goals-edit-fields label,
.goals-new-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  gap: 4px;
}
.goals-edit-fields input,
.goals-edit-fields select,
.goals-new-form input {
  padding: 8px 10px;
  border: 1px solid var(--bg-accent);
  border-radius: 6px;
  background: var(--bg-primary);
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  font-family: inherit;
}
.goals-edit-actions { text-align: right; }
.goals-new-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
  align-items: end;
}
.goals-new-form button { grid-column: 1 / -1; max-width: 220px; }

.btn-sm { padding: 5px 12px; font-size: 0.82rem; }

/* ============================================
   Training Module — Pages (import, workout,
   schedule, gyms, feedback, preferences, more)
   ============================================ */

/* Make today's workout hero feel tappable on mobile */
.workout-hero-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.workout-hero-link:active { transform: scale(0.98); }

/* Calendar CTA tile when no import yet */
.calendar-cta-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 2px dashed var(--accent-green);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
}
.calendar-cta-card:active { background: var(--accent-green-light); }
.calendar-cta-icon {
  font-size: 1.6rem;
  color: var(--accent-green);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-green-light);
  border-radius: 10px;
}
.calendar-cta-body { flex: 1; min-width: 0; }
.calendar-cta-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.calendar-cta-sub { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }
.calendar-cta-arrow { color: var(--text-tertiary); font-size: 1.4rem; }

/* Import page — upload zone */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg-card);
  border: 2px dashed var(--accent-green);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.upload-zone:active { background: var(--accent-green-light); }
.upload-icon { font-size: 2.5rem; color: var(--accent-green); margin-bottom: 8px; }
.upload-label { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.upload-hint { font-size: 0.82rem; color: var(--text-tertiary); margin-top: 4px; }

.upload-preview {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
}
.upload-preview-name { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; word-break: break-all; }
.upload-preview-stats { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; }
.upload-preview-actions { display: flex; gap: 8px; }

.upload-status {
  margin-top: 12px; padding: 10px 14px; border-radius: 8px;
  font-size: 0.88rem; color: var(--text-secondary);
  background: var(--bg-accent);
}
.upload-status-ok { background: var(--accent-green-light); color: var(--accent-green); }
.upload-status-error { background: #FCE9E5; color: #8A2310; }

.import-last {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--bg-accent);
}
.import-last-label {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600; margin-bottom: 2px;
}
.import-last-value { font-size: 0.88rem; color: var(--text-primary); }

/* Workout detail page */
.workout-detail {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(0,0,0,0.04);
}
.workout-detail-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px solid var(--bg-accent); font-size: 0.9rem;
}
.workout-detail-row:last-of-type { border-bottom: none; }
.workout-detail-label { color: var(--text-secondary); }
.workout-detail-value { color: var(--text-primary); font-weight: 500; }

.set-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
  margin-bottom: 8px;
}
.set-row-done { background: var(--bg-tertiary); }
.set-name { font-weight: 600; color: var(--text-primary); }
.set-row-fields {
  display: grid; grid-template-columns: repeat(4, 1fr) auto;
  gap: 6px; align-items: center;
}
.set-row-done .set-row-fields {
  display: flex; gap: 12px; color: var(--text-secondary); font-size: 0.82rem;
}
.set-meta-row { display: flex; gap: 10px; margin-top: 12px; }
.set-meta-row label {
  display: flex; flex-direction: column; flex: 1;
  font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600; gap: 4px;
}
.form-input {
  padding: 8px 10px;
  border: 1px solid var(--bg-accent);
  border-radius: 6px;
  background: var(--bg-primary);
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  font-family: inherit;
  width: 100%;
}
.form-input-sm { padding: 6px 8px; font-size: 0.85rem; }
textarea.form-input { resize: vertical; min-height: 60px; }
.btn-icon {
  background: transparent;
  border: 1px solid var(--bg-accent);
  border-radius: 6px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.btn-icon:active { background: var(--bg-accent); }
.mt-md { margin-top: 12px; }

/* Voice recorder */
.voice-recorder { display: flex; flex-direction: column; gap: 10px; }
.voice-btn {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  padding: 14px 18px;
  font-size: 1rem;
}
.voice-btn-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.2s, transform 0.6s;
}
.voice-btn[data-state="recording"] .voice-btn-dot {
  background: #ff3030;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
.voice-status { font-size: 0.82rem; min-height: 1.2em; }

/* Plan view */
.plan-summary-card {
  background: var(--bg-card);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.55;
  border: 1px solid var(--bg-accent);
}

.plan-timeline { display: flex; flex-direction: column; gap: 8px; }
.plan-timeline-block {
  background: var(--bg-card);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--bg-accent);
}
.plan-timeline-current { border-color: var(--accent-green); background: var(--accent-green-light); }
.plan-timeline-deload { opacity: 0.85; border-style: dashed; }
.plan-timeline-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.plan-timeline-idx { font-size: 0.72rem; color: var(--text-tertiary); font-weight: 600; }
.plan-timeline-name { font-weight: 600; color: var(--text-primary); }
.plan-timeline-tag {
  font-size: 0.65rem; padding: 2px 8px; border-radius: 10px;
  background: var(--bg-accent); color: var(--text-secondary);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.plan-timeline-tag-current { background: var(--accent-green); color: var(--text-inverse); }
.plan-timeline-dates { font-size: 0.78rem; color: var(--text-secondary); }
.plan-timeline-focus { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.plan-timeline-load { font-size: 0.72rem; color: var(--text-tertiary); margin-top: 4px; }

.tests-list { display: flex; flex-direction: column; gap: 6px; }
.test-row {
  padding: 10px 12px; background: var(--bg-card); border-radius: 8px;
  border: 1px solid var(--bg-accent); font-size: 0.88rem;
}
.test-row-past { opacity: 0.6; }
.test-row-date { font-size: 0.7rem; color: var(--text-tertiary); font-weight: 600; }
.test-row-name { font-weight: 600; margin-top: 2px; }
.test-row-meta { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.test-row-notes { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }

.adaptation-rules { list-style: none; padding: 0; }
.adaptation-rules li {
  padding: 8px 12px; background: var(--bg-card);
  border-radius: 6px; margin-bottom: 4px; font-size: 0.88rem;
  border-left: 3px solid var(--accent-green); color: var(--text-primary);
}

.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.kv-cell {
  padding: 10px 12px; background: var(--bg-card); border-radius: 8px;
  border: 1px solid var(--bg-accent);
}
.kv-label {
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600;
}
.kv-value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-top: 2px; }

/* Schedule (4-week) */
.schedule-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.schedule-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.schedule-day {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  min-height: 88px;
}
.schedule-day-today { border-color: var(--accent-green); background: var(--accent-green-light); }
.schedule-day-has-item:active { transform: scale(0.97); }
.schedule-day-dow {
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600;
}
.schedule-day-num { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin: 2px 0 4px; }
.schedule-day-icon { font-size: 1rem; color: var(--accent-green); }
.schedule-day-meta { font-size: 0.65rem; color: var(--text-secondary); margin-top: 2px; text-align: center; }
.schedule-day-status {
  font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1px 4px; border-radius: 4px; margin-top: 2px; font-weight: 600;
}
.schedule-day-status-proposed { background: var(--bg-accent); color: var(--text-secondary); }
.schedule-day-status-approved { background: var(--accent-green-light); color: var(--accent-green); }
.schedule-day-status-completed { background: #DCEFE3; color: #1F4D2E; }
.schedule-day-status-skipped { background: #FCE9E5; color: #8A2310; }
.schedule-day-status-modified { background: #FFF6E0; color: #6B5008; }

/* Gym profiles */
.gym-card {
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--bg-accent);
  margin-bottom: 10px;
}
.gym-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.gym-card-name { font-weight: 600; color: var(--text-primary); }
.gym-card-location { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.gym-equipment { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.gym-eq-chip {
  font-size: 0.7rem; padding: 3px 8px; border-radius: 10px;
  background: var(--bg-accent); color: var(--text-secondary); font-weight: 500;
}
.gym-transcript {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4;
  padding: 8px; background: var(--bg-tertiary); border-radius: 6px; margin-top: 6px;
}
.badge {
  font-size: 0.6rem; padding: 2px 6px; background: var(--accent-green);
  color: var(--text-inverse); border-radius: 6px; vertical-align: middle;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Gym card — edit mode */
.gym-card-actions { display: flex; gap: 8px; align-items: center; }
.gym-card-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gym-card-edit .form-row { display: flex; flex-direction: column; gap: 4px; }
.gym-card-edit .form-row span { font-size: 0.78rem; color: var(--text-secondary); }
.gym-card-edit .form-row-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.gym-card-edit .form-row-inline span {
  font-size: 0.86rem;
  color: var(--text-primary);
}
.gym-edit-section { display: flex; flex-direction: column; gap: 8px; }
.gym-edit-section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.gym-edit-equip-list { display: flex; flex-direction: column; gap: 6px; }
.gym-equip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 32px;
  gap: 6px;
  align-items: center;
}
.gym-equip-row .form-input { padding: 8px 10px; font-size: 0.88rem; }
.gym-edit-actions { display: flex; gap: 10px; }
@media (max-width: 560px) {
  .gym-equip-row {
    grid-template-columns: minmax(0, 1fr) 32px;
  }
  .gym-equip-row .gym-equip-details {
    grid-column: 1;
    grid-row: 2;
  }
  .gym-equip-row .btn-icon {
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* Feedback page */
.rules-list { display: flex; flex-direction: column; gap: 6px; }
.rule-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg-card); border-radius: 8px;
  border: 1px solid var(--bg-accent);
}
.rule-row-text { font-size: 0.88rem; color: var(--text-primary); flex: 1; }
.rule-row-meta { display: flex; gap: 6px; align-items: center; }
.rule-scope, .rule-priority {
  font-size: 0.65rem; padding: 2px 6px; border-radius: 6px;
  background: var(--bg-accent); color: var(--text-secondary); font-weight: 600;
}
.feedback-list { display: flex; flex-direction: column; gap: 8px; }
.feedback-row {
  padding: 10px 12px; background: var(--bg-card); border-radius: 8px;
  border: 1px solid var(--bg-accent);
}
.feedback-row-when {
  font-size: 0.7rem; color: var(--text-tertiary); letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 600;
}
.feedback-row-summary { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); margin: 4px 0; }
.feedback-row-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }

/* More menu */
.more-list { display: flex; flex-direction: column; gap: 4px; }
.more-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--bg-card);
  border-radius: 8px; text-decoration: none; color: var(--text-primary);
  border: 1px solid var(--bg-accent);
}
.more-row:active { background: var(--bg-tertiary); }
.more-row-arrow { color: var(--text-tertiary); font-size: 1.2rem; }

/* Adjustment history */
.adjustment-row {
  padding: 10px 12px; background: var(--bg-card); border-radius: 8px;
  border-left: 3px solid var(--accent-amber); margin-bottom: 6px;
}
.adjustment-when { font-size: 0.7rem; color: var(--text-tertiary); font-weight: 600; }
.adjustment-summary { font-size: 0.88rem; font-weight: 500; color: var(--text-primary); margin-top: 2px; }
.adjustment-transcript { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; font-style: italic; }

/* Muted text block */
.muted-block {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin-top: 8px;
}
.muted-block code {
  background: var(--bg-accent); padding: 2px 6px; border-radius: 4px;
  font-size: 0.82rem;
}

/* Rest-day card on training home */
.rest-day-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--bg-accent);
}
.rest-day-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-accent);
  border-radius: 12px;
  font-size: 1.5rem; color: var(--text-secondary);
}
.rest-day-body { flex: 1; min-width: 0; }
.rest-day-title { font-weight: 600; color: var(--text-primary); font-size: 1rem; }
.rest-day-sub { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2px; }
.rest-day-link {
  font-size: 0.82rem; color: var(--accent-green);
  text-decoration: none; font-weight: 500;
}

/* Quick actions row on training home */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s, background 0.15s;
}
.quick-action:active { transform: scale(0.97); background: var(--bg-tertiary); }
.quick-action-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-green-light);
  color: var(--accent-green);
  border-radius: 10px;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.quick-action-body { min-width: 0; flex: 1; }
.quick-action-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-action-sub {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Week-day link affordance */
.week-day-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.1s;
}
.week-day-link:active { transform: scale(0.95); }

/* ============================================
   Spacing pass — fix tight padding/margins
   across forms, buttons, cards, and lists.
   ============================================ */

/* All buttons get more breathing room and consistent height */
.btn {
  padding: 12px 22px;
  min-height: 44px;        /* iOS recommended tap target */
}
.btn-sm {
  padding: 8px 16px;
  font-size: 0.82rem;
  min-height: 36px;
}
.btn-lg { padding: 16px 30px; min-height: 52px; }
.btn-icon { width: 36px; height: 36px; }

/* Form inputs: more internal padding, consistent height, breathing
   room from preceding labels and following buttons. */
.form-input {
  padding: 12px 14px;
  min-height: 44px;
}
.form-input-sm { padding: 10px 12px; min-height: 38px; }
textarea.form-input { min-height: 90px; padding: 12px 14px; }

/* Labels above inputs in form grids — give the label a gap to its field */
.goals-edit-fields label,
.goals-new-form label,
.set-meta-row label {
  gap: 6px;
}
.goals-new-form { gap: 14px; }
.goals-new-form button { margin-top: 6px; }

/* Sections get more vertical rhythm so headings and buttons breathe */
.section { margin-bottom: 24px; }
.section + .section { margin-top: 0; }
.section-h3 { margin-bottom: 14px; }
.section-h3-row { margin-bottom: 14px; }

/* Page header gets more space below before the first section */
.page-header { margin-bottom: 20px; }

/* Quick-action tiles: more padding inside, more gap to icon */
.quick-action { padding: 14px 16px; gap: 14px; }
.quick-action-icon { width: 40px; height: 40px; font-size: 1.15rem; }
.quick-action-label { font-size: 0.92rem; margin-bottom: 2px; }
.quick-action-sub { font-size: 0.74rem; }

/* Today's workout hero: roomier card */
.workout-hero { padding: 24px; }
.workout-hero-header { margin-bottom: 18px; }
.workout-hero-row { padding: 16px 0; gap: 18px; margin-bottom: 16px; }
.workout-hero-actions { gap: 12px; margin-top: 4px; }
.workout-prescription { padding: 4px 0; margin-bottom: 14px; }

/* Rest-day card */
.rest-day-card { padding: 16px 18px; gap: 16px; }

/* Vitals strip cells */
.vitals-cell { padding: 12px 14px; }

/* Week strip days */
.week-day { padding: 10px 6px; min-height: 96px; }

/* Goals row + cards */
.goals-row { gap: 12px; }
.goal-card { padding: 14px 16px; }

/* Calendar summary rows */
.calendar-summary { padding: 16px 18px; gap: 8px; }
.calendar-summary-row { padding: 6px 0; }

/* Workout detail */
.workout-detail { padding: 18px 20px; }
.workout-detail-row { padding: 8px 0; }
.set-row { padding: 12px 14px; gap: 10px; margin-bottom: 10px; }
.set-row-fields { gap: 8px; }
.set-meta-row { gap: 14px; margin-top: 16px; }
.adjustment-row { padding: 12px 14px; }

/* Gym + feedback rows */
.gym-card { padding: 16px 18px; }
.rule-row { padding: 12px 14px; gap: 12px; }
.feedback-row { padding: 12px 14px; }

/* Schedule grid (4-week) */
.schedule-day { padding: 10px 6px; min-height: 100px; gap: 2px; }
.schedule-toolbar { gap: 10px; margin-bottom: 4px; }
.schedule-week { gap: 6px; }

/* More menu rows */
.more-row { padding: 16px 18px; }
.more-list { gap: 6px; }

/* Plan timeline blocks */
.plan-timeline-block { padding: 14px 16px; }
.plan-timeline { gap: 10px; }

/* Voice recorder */
.voice-recorder { gap: 12px; margin-top: 4px; }
.voice-btn { min-height: 52px; gap: 12px; }

/* Upload zone */
.upload-zone { padding: 48px 24px; }
.upload-preview { padding: 16px 18px; margin-top: 16px; }
.upload-preview-actions { gap: 10px; margin-top: 12px; }
.upload-status { padding: 12px 16px; margin-top: 14px; }

/* Bottom nav — slight extra vertical padding for thumb */
.bottom-nav .nav-item { padding-top: 10px; padding-bottom: 10px; }

/* Stale-schedule warning banner */
.refit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: #FFF6E0;
  border: 1px solid #E5C97A;
  border-radius: 12px;
}
.refit-banner-body { flex: 1; min-width: 0; }
.refit-banner-title { font-weight: 600; color: #6B5008; font-size: 0.95rem; }
.refit-banner-sub { font-size: 0.82rem; color: #806000; margin-top: 2px; }
.refit-banner .btn { white-space: nowrap; }

/* ============================================
   Workout detail — Fitbod-style exercise cards
   ============================================ */

.workout-meta-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid var(--bg-accent);
}
.workout-meta-block {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 6px;
}
.workout-meta-focus {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.warmup-card {
  background: var(--accent-green-light);
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent-green);
}
.warmup-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-green);
  font-weight: 700;
  margin-bottom: 4px;
}
.warmup-text {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.exercises-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.exercise-card {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bg-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.exercise-card-img {
  width: 100%;
  height: 200px;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.exercise-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exercise-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
}
.exercise-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.exercise-card-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.exercise-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
}
.ex-chip {
  font-size: 0.7rem;
  padding: 3px 9px;
  background: var(--bg-accent);
  color: var(--text-secondary);
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
}

.exercise-card-target {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0 16px 10px;
  letter-spacing: 0.02em;
}

.exercise-card-notes {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0 16px 10px;
  line-height: 1.4;
  font-style: italic;
}

/* Set table inside the card */
.ex-set-header,
.ex-set-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr 1fr 52px;
  gap: 8px;
  align-items: center;
  padding: 6px 16px;
}
.ex-set-header {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  border-top: 1px solid var(--bg-accent);
  padding-top: 10px;
  padding-bottom: 4px;
  background: var(--bg-tertiary);
}
.ex-set-row {
  padding: 8px 16px;
}
.ex-set-row + .ex-set-row {
  border-top: 1px solid var(--bg-accent);
}
.ex-set-row-done {
  background: rgba(45, 90, 61, 0.04);
}
/* Time-based set rows: single big duration input. Re-purposes the
   reps + weight columns into one wide field. */
.ex-set-header-time,
.ex-set-row-time {
  grid-template-columns: 40px 1fr 1fr 52px;
}
.ex-set-input-dur {
  font-size: 1.05rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ex-set-n {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-align: center;
}
.ex-set-input {
  text-align: center;
  padding: 8px 6px;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.ex-set-input:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-weight: 600;
}
.ex-set-check {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--accent-green);
  background: white;
  color: var(--accent-green);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.ex-set-check:active { background: var(--accent-green-light); }
.ex-set-check.set-done {
  background: var(--accent-green);
  color: white;
}
.ex-set-check:disabled { cursor: default; opacity: 1; }

.exercise-card-instructions {
  border-top: 1px solid var(--bg-accent);
  padding: 10px 16px;
}
.exercise-card-instructions summary {
  font-size: 0.78rem;
  cursor: pointer;
}
.exercise-card-instructions ol {
  margin: 8px 0 0 20px;
  padding: 0;
}
.exercise-card-instructions li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 4px;
}

/* Add-exercise modal */
.ex-modal[hidden] { display: none !important; }
.ex-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.55);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}
.ex-modal-content {
  background: var(--bg-primary);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 12px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}
.ex-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ex-modal-head h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.ex-modal-filters {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.ex-modal-results {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -4px;
  padding: 0 4px 4px;
}
.ex-result {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  cursor: pointer;
}
.ex-result:active { transform: scale(0.98); background: var(--bg-tertiary); }
.ex-result-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-accent);
  flex-shrink: 0;
}
.ex-result-body { min-width: 0; flex: 1; }
.ex-result-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-result-meta {
  font-size: 0.76rem;
  color: var(--text-tertiary);
  text-transform: capitalize;
}

/* Goals intro card (empty state) */
.goals-intro-card {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border-radius: 14px;
  border: 2px dashed var(--accent-green);
}
.goals-intro-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-green-light);
  color: var(--accent-green);
  border-radius: 12px;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.goals-intro-body { flex: 1; min-width: 0; }
.goals-intro-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 4px;
}
.goals-intro-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.goals-intro-text em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-accent);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ============================================
   Coach intelligence layer — brief, balance,
   intake banner, intake form.
   ============================================ */

/* Intake banner (incomplete profile prompt) */
.intake-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--accent-amber-light);
  border: 1px solid #E5C97A;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s;
}
.intake-banner:active { transform: scale(0.99); }
.intake-banner-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #FFF;
  border-radius: 10px;
  font-size: 1.2rem;
  color: var(--accent-amber);
  flex-shrink: 0;
}
.intake-banner-body { flex: 1; min-width: 0; }
.intake-banner-title { font-weight: 600; color: var(--fg-1); font-size: 1rem; }
.intake-banner-sub { font-size: 0.82rem; color: var(--fg-2); margin-top: 2px; line-height: 1.4; }
.intake-banner-arrow { color: var(--accent-amber); font-size: 1.4rem; flex-shrink: 0; }

/* Coach brief paragraph */
.coach-brief {
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-green-light) 100%);
  border-radius: 14px;
  border-left: 4px solid var(--accent-green);
}
.coach-brief-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-green);
  margin-bottom: 8px;
}
.coach-brief-text {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.6;
  font-family: var(--font-serif);
  letter-spacing: -0.005em;
}

/* Muscle-balance widget */
.balance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.balance-row {
  display: grid;
  grid-template-columns: 180px 1fr 70px;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
}
.balance-row-zero { background: #FFF6E0; border-color: #E5C97A; }
.balance-label { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }
.balance-bar {
  height: 8px;
  background: var(--bg-accent);
  border-radius: 4px;
  overflow: hidden;
}
.balance-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.balance-fill-cardio { background: var(--accent-blue); }
.balance-value {
  text-align: right;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
@media (max-width: 480px) {
  .balance-row { grid-template-columns: 110px 1fr 64px; gap: 8px; }
  .balance-label { font-size: 0.78rem; }
}

/* ─────────────────────────────────────────────
 * Weekly targets — Fitbod-style set-count widget
 * ───────────────────────────────────────────── */
.targets-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Keep 2x2 on mobile too — the desktop version reads better than the
   stacked single column, and a 412px screen still has room for two
   compact cards side by side. */
.target-cat {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 10px 12px;
}
.target-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.target-cat-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}
.target-cat-val {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.target-cat-val .muted { font-weight: 400; font-size: 0.86rem; }
.target-bar {
  height: 10px;
  background: var(--bg-accent);
  border-radius: 5px;
  overflow: hidden;
}
.target-bar-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 5px;
  transition: width 0.3s ease;
}
.target-bar-fill-over { background: #E0A458; }
.target-cat-val-over { color: #E0A458; }
.zone-bar-fill-over { background: #E0A458 !important; }

.targets-detail { margin-top: 14px; }
.targets-detail > summary {
  cursor: pointer;
  font-size: 0.82rem;
  padding: 6px 0;
}
.targets-muscle-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.tm-row {
  display: grid;
  grid-template-columns: 100px 1fr 64px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-card);
  border-radius: 6px;
  border: 1px solid var(--bg-accent);
}
.tm-label {
  font-size: 0.78rem;
  text-transform: capitalize;
  color: var(--text-secondary);
}
.tm-bar {
  height: 6px;
  background: var(--bg-accent);
  border-radius: 3px;
  overflow: hidden;
}
.tm-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.tm-row.tm-done .tm-fill { background: var(--accent-green); }
.tm-row.tm-mid .tm-fill { background: #C9A24F; }
.tm-row.tm-low .tm-fill { background: #C97B5A; }
.tm-val {
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.targets-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* Targets edit page */
.target-edit-cat { margin-bottom: 18px; }
.target-edit-row {
  display: grid;
  grid-template-columns: 1fr 80px 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-accent);
}
.target-edit-name {
  text-transform: capitalize;
  font-size: 0.92rem;
}
.target-edit-input {
  font-size: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 8px;
}

/* 8-week history grid */
.history-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-row {
  display: grid;
  grid-template-columns: 60px repeat(4, 1fr) 60px;
  align-items: end;
  gap: 6px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--bg-accent);
}
.history-row.history-head {
  font-size: 0.74rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  align-items: center;
}
.history-row.history-head .history-cell { display: block; height: auto; padding: 0; }
.history-week {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.history-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 60px;
  justify-content: flex-end;
}
.history-cell-total {
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}
.history-bar {
  width: 100%;
  max-width: 32px;
  height: 50px;
  background: var(--bg-accent);
  border-radius: 3px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.history-bar-fill {
  width: 100%;
  background: var(--accent-green);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}
.history-cell.hc-mid .history-bar-fill { background: #C9A24F; }
.history-cell.hc-low .history-bar-fill { background: #C97B5A; }
.history-num {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* Tests-due card */
.tests-due-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.test-due-row {
  display: block;
  padding: 12px 14px;
  background: #FFF6E0;
  border: 1px solid #E5C97A;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.test-due-name {
  font-weight: 600;
  font-size: 0.94rem;
  margin-bottom: 2px;
}
.test-due-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Tests list + detail */
.test-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.test-card {
  display: block;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.test-card-due {
  background: #FFF6E0;
  border-color: #E5C97A;
}
.test-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.test-card-name { font-weight: 600; }
.test-card-cadence {
  font-size: 0.74rem;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.test-card-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin: 6px 0;
}
.test-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.test-card-due-pill {
  background: #C97B5A;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.72rem;
}
.protocol-steps {
  padding-left: 20px;
  margin: 8px 0 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.test-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.test-form .form-row span {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.test-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.test-history-row {
  display: grid;
  grid-template-columns: 100px 80px 1fr;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 6px;
  align-items: center;
}
.test-history-date {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.test-history-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.test-history-notes {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Baseline card on /tests/:id */
.baseline-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-green);
  border-left: 4px solid var(--accent-green);
  border-radius: 10px;
  padding: 14px 16px;
}
.baseline-card-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--accent-green);
  font-weight: 700;
}
.baseline-card-value {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.baseline-card-sub {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.baseline-card-help {
  font-size: 0.78rem;
  font-style: italic;
}

/* Preferences split (strength/z2/z5/mobility per week) */
.prefs-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  grid-column: 1 / -1;  /* span the full prefs form (.goals-new-form is auto-fit) */
}
.prefs-split-label {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
}
.prefs-split-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prefs-split-cell span {
  font-size: 0.82rem;
  color: var(--text-primary);
}
.prefs-split-cell input {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 8px;
}
.prefs-split-hint { grid-column: 1 / -1; font-size: 0.72rem; }
.prefs-split-pattern {
  grid-column: 1 / -1;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prefs-pattern-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.prefs-pattern-label select { font-size: 0.92rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-primary); }
.prefs-pattern-hint { font-size: 0.74rem; }

.prefs-hr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 560px) {
  .prefs-hr-grid { grid-template-columns: repeat(3, 1fr); }
}
.prefs-hr-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.prefs-hr-grid input {
  font-size: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 8px;
}

/* Preferences day-of-week chips */
.prefs-daygrid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  grid-column: 1 / -1;  /* span the full prefs form */
}
/* Notes textarea + status label takes full width in the prefs form */
.goals-new-form .goals-edit-status { grid-column: 1 / -1; }
.goals-new-form .goals-edit-status textarea { width: 100%; }
.prefs-daygrid-label { font-size: 0.78rem; color: var(--text-secondary); }
.prefs-daygrid-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.prefs-day-chip {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.prefs-day-chip.active {
  background: #FFF6E0;
  border-color: #E5C97A;
  color: #7A5A1E;
}
.prefs-daygrid-hint { font-size: 0.74rem; }

/* Exercise vote (more / less) */
.exercise-vote-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  border-top: 1px dashed var(--bg-accent);
  margin-top: 6px;
}
.exercise-vote-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-right: auto;
}
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--bg-accent);
  background: var(--bg-card);
  border-radius: 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.vote-btn:hover { background: var(--bg-accent); }
.vote-btn:active { transform: scale(0.96); }
.vote-btn:disabled { opacity: 0.5; cursor: progress; }
.vote-btn .vote-face { font-size: 1rem; line-height: 1; }
.vote-up.vote-active {
  background: var(--accent-green-light, #E6F0E0);
  border-color: var(--accent-green);
  color: var(--accent-green);
}
.vote-down.vote-active {
  background: #FBE6D9;
  border-color: #C97B5A;
  color: #8C3A1A;
}
@media (max-width: 480px) {
  .exercise-vote-row { flex-wrap: wrap; }
  .exercise-vote-label { width: 100%; margin-bottom: 2px; }
}

/* Learned rules + Audit (Phase D) */
.learned-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.learned-card-proposed { border-left: 4px solid #C9A24F; }
.learned-card-approved { border-left: 4px solid var(--accent-green); opacity: 0.85; }
.learned-card-dismissed { opacity: 0.55; }
.learned-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.learned-card-text { font-size: 0.94rem; line-height: 1.4; outline: none; }
.learned-card-text[contenteditable="true"]:focus { background: var(--bg-accent); padding: 6px 8px; border-radius: 6px; margin: -6px -8px; }
.learned-card-meta { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.74rem; }
.learned-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.learned-card-evidence { margin-top: 8px; font-size: 0.82rem; }
.learned-card-evidence ul { padding-left: 18px; margin: 4px 0; color: var(--text-secondary); }

.audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.audit-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 12px 14px;
}
.audit-card-name {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 6px;
}
.audit-stat { font-size: 0.84rem; line-height: 1.5; }
.audit-stat b { font-variant-numeric: tabular-nums; }
.audit-stat-bad { color: #8C3A1A; }
.audit-list { display: flex; flex-direction: column; gap: 4px; }
.audit-row {
  display: grid;
  grid-template-columns: 140px 130px 1fr 90px;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 6px;
}
.audit-row-when { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.audit-row-surface { font-weight: 600; }
.audit-row-meta { color: var(--text-secondary); }
.audit-row-outcome { text-align: right; font-weight: 600; text-transform: uppercase; font-size: 0.72rem; }
.audit-row-ok .audit-row-outcome { color: var(--accent-green); }
.audit-row-validator_failed .audit-row-outcome, .audit-row-parse_error .audit-row-outcome { color: #8C3A1A; }
@media (max-width: 560px) {
  .audit-row { grid-template-columns: 1fr; gap: 2px; }
  .audit-row-when { font-size: 0.7rem; }
}

/* Gym chip (Phase C — one-tap "where am I" switcher) */
.gym-chip-section { position: relative; padding-bottom: 0; }
.gym-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 18px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.gym-chip-icon { color: var(--accent-green); font-size: 1rem; }
.gym-chip-caret { font-size: 0.74rem; color: var(--text-secondary); }
.gym-picker {
  display: none;
  position: absolute;
  top: 100%;
  left: 16px;
  z-index: 30;
  margin-top: 6px;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.gym-picker.open { display: block; }
.gym-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text-primary);
  cursor: pointer;
}
.gym-picker-row:hover { background: var(--bg-accent); }
.gym-picker-row-active { background: var(--accent-green-light); color: var(--accent-green); font-weight: 600; }
.gym-picker-row-link { color: var(--accent-green); text-decoration: none; border-top: 1px solid var(--bg-accent); margin-top: 4px; padding-top: 8px; }

/* Cardio zones widget */
.zone-list { display: flex; flex-direction: column; gap: 8px; }
.zone-row {
  display: grid;
  grid-template-columns: 120px 1fr 130px;
  gap: 12px;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
}
.zone-label { font-size: 0.86rem; color: var(--text-secondary); font-weight: 600; }
.zone-bar { position: relative; height: 10px; background: var(--bg-inset, var(--bg-accent)); border-radius: var(--r-full, 999px); }
.zone-bar-fill { height: 100%; border-radius: var(--r-full, 999px); transition: width 0.4s cubic-bezier(0.22,1,0.36,1); }
/* The weekly minimum target, drawn as a tick on the track: the goal is a
   visible line to cross, not a number to remember. */
.zone-bar-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--fg-3, #6B7281); border-radius: 1px; opacity: 0.9;
}
.zone-val {
  text-align: right;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 600;
}
.zone-val-ok { color: var(--accent-green); }
.zone-val-over { color: #C97B5A; }
@media (max-width: 480px) {
  .zone-row { grid-template-columns: 90px 1fr 100px; gap: 8px; }
  .zone-label { font-size: 0.78rem; }
}

/* Unplanned external activity */
.unplanned-list { display: flex; flex-direction: column; gap: 4px; }
.unplanned-row {
  display: grid;
  grid-template-columns: 50px 1fr 60px 130px;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 6px;
  font-size: 0.84rem;
}
.unplanned-day { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.unplanned-type { font-weight: 600; text-transform: capitalize; }
.unplanned-dur { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.unplanned-zone {
  text-align: right;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.unplanned-zone-z1, .unplanned-zone-z2 { color: var(--accent-green); }
.unplanned-zone-z3 { color: #C9A24F; }
.unplanned-zone-z4 { color: #C97B5A; }
.unplanned-zone-z5 { color: #8C3A1A; }
.unplanned-more { padding: 4px 12px; font-size: 0.78rem; }
@media (max-width: 480px) {
  .unplanned-row { grid-template-columns: 44px 1fr 50px 90px; gap: 6px; font-size: 0.78rem; }
}

/* Auto-completed from external source */
.reconciled-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--accent-green-light);
  border: 1px solid var(--accent-green);
  border-radius: 10px;
}
.reconciled-icon {
  font-size: 1.4rem;
  color: var(--accent-green);
  font-weight: 700;
}
.reconciled-title { font-weight: 600; font-size: 0.94rem; color: var(--accent-green); }
.reconciled-sub { font-size: 0.78rem; color: var(--text-secondary); }
.reconciled-banner .btn { margin-left: auto; flex-shrink: 0; }

/* Day-of auto-adjust banner */
.auto-adjust-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #FFF6E0;
  border: 1px solid #E5C97A;
  border-radius: 10px;
}
.auto-adjust-icon {
  font-size: 1.4rem;
  color: #C9A24F;
}
.auto-adjust-title { font-weight: 600; font-size: 0.94rem; }
.auto-adjust-sub { font-size: 0.78rem; color: var(--text-secondary); text-transform: capitalize; }

/* Calendar conflict banner (Phase C) */
.calendar-conflict-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #FBE6D9;
  border: 1px solid #C97B5A;
  border-radius: 10px;
}
.calendar-conflict-icon { font-size: 1.4rem; color: #8C3A1A; }
.calendar-conflict-title { font-weight: 600; font-size: 0.94rem; color: #8C3A1A; }
.calendar-conflict-sub { font-size: 0.78rem; color: var(--text-secondary); }

/* Workout actions (regenerate / adjust / capture rule) */
.workout-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
@media (max-width: 560px) {
  .workout-actions-grid { grid-template-columns: 1fr; }
}
.workout-action-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 12px 14px;
  gap: 2px;
  line-height: 1.2;
  height: auto;
  min-height: 72px;
  white-space: normal;
}
.workout-action-icon {
  font-size: 1.2rem;
  color: var(--accent-green);
}
.workout-action-label {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text-primary);
}
.workout-action-sub {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-weight: 400;
}
.workout-panel {
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
}
.workout-panel-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

/* Principles page */
.principles-meta-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.principles-meta-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.principles-preview > summary { cursor: pointer; padding: 4px 0; font-size: 0.82rem; }
.principles-pre {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 320px;
  overflow: auto;
}
.facts-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.facts-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
}
.facts-key {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 700;
}
.facts-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.facts-evi { font-size: 0.72rem; font-style: italic; word-break: break-word; }
@media (max-width: 560px) {
  .facts-row { grid-template-columns: 90px 1fr; }
  .facts-evi { grid-column: 1 / -1; }
}

.principles-history { display: flex; flex-direction: column; gap: 8px; }
.principles-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
}
.principles-row-active { border-color: var(--accent-green); background: var(--accent-green-light); }
.principles-row-name { font-weight: 600; font-size: 0.92rem; }
.principles-row-actions { display: flex; gap: 6px; align-items: center; }

/* Re-plan page */
.replan-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 14px 16px;
}
.replan-stat {
  font-size: 0.92rem;
  margin-top: 2px;
}
.replan-step {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.replan-step-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.replan-step-name {
  font-weight: 600;
  margin-bottom: 2px;
}
@media (max-width: 480px) {
  .replan-step-head { flex-direction: column; align-items: stretch; }
}

/* Upload form (Fitbod CSV) */
.upload-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.upload-form input[type=file] {
  flex: 1;
  min-width: 200px;
}
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

/* Intake form */
.intake-form .section { padding-bottom: 4px; }
.intake-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.intake-form input,
.intake-form select,
.intake-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
  background: var(--bg-primary);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  width: 100%;
  min-height: 44px;
}
.intake-form textarea {
  min-height: 80px;
  line-height: 1.5;
  resize: vertical;
}
.intake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* Body-part filter chips in the add-exercise modal */
.ex-bodypart-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 6px;
}
.ex-bp-chip {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  color: var(--text-secondary);
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.15s;
}
.ex-bp-chip:active { transform: scale(0.96); }
.ex-bp-chip.active {
  background: var(--accent-green);
  color: white;
  border-color: var(--accent-green);
}

.ex-result-add {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green-light);
  color: var(--accent-green);
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ex-result-sub {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Unit toggle on /preferences */
.unit-toggle-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.unit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 140px;
}
.unit-toggle:has(input:checked) {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
  color: var(--accent-green);
}
.unit-toggle input[type="radio"] {
  accent-color: var(--accent-green);
}

/* Reply input on the coach brief card */
.coach-brief-reply {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(45, 90, 61, 0.25);
}
.coach-brief-reply summary {
  font-size: 0.82rem;
  color: var(--accent-green);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.coach-brief-reply summary:hover { text-decoration: underline; }
.coach-brief-reply textarea {
  margin-top: 10px;
  font-size: 0.9rem;
}
.coach-brief-reply-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* Reset default button styling on .ex-result rows */
button.ex-result {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
button.ex-result:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* ============================================
   Workout detail v2 — mobile-first, bigger numbers,
   sticky header, lightbox, timer, no-RPE layout.
   ============================================ */

/* Sticky header at the top of the workout page.
   Sticks BELOW the fixed app topbar — `top` must equal the topbar's
   height (including its safe-area-inset padding), otherwise it slides
   underneath when scrolled. */
.workout-sticky-header {
  position: sticky;
  top: max(60px, calc(env(safe-area-inset-top, 14px) + 46px));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line-1);
  margin: -16px -24px 16px;
}
.workout-sticky-left { min-width: 0; flex: 1; }
.workout-sticky-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workout-sticky-sub {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.workout-sticky-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Freeze chip (workout immutability toggle, top-right of sticky header) */
.freeze-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  padding: 0 8px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid var(--line-1);
  color: var(--fg-2);
  font-size: 1rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.freeze-chip:hover { background: var(--bg-2); }
.freeze-chip:active { transform: scale(0.96); }
.freeze-chip-on {
  background: rgba(110, 231, 168, 0.12);
  border-color: var(--vital);
  color: var(--vital);
}

/* Unit chip (kg/lb toggle in header) */
.unit-chip {
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--accent-green-light);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.unit-chip:active { transform: scale(0.96); }

/* Set counter (top right of sticky header) */
.set-counter {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
}
.set-counter-num {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-green);
  font-variant-numeric: tabular-nums;
}
.set-counter-sep { color: var(--text-tertiary); font-weight: 500; }
.set-counter-target {
  color: var(--text-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.set-counter-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 4px;
}

/* Collapsed meta details */
.workout-meta-collapsed {
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  padding: 12px 14px;
}
.workout-meta-collapsed > summary {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.workout-meta-collapsed[open] > summary { margin-bottom: 8px; }
.workout-meta-warmup {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.45;
}

/* Exercise card — new layout */
.exercise-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px 14px 12px;
  border: 1px solid var(--bg-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.exercise-card-head-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.exercise-card-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-tertiary);
  padding: 0;
  border: 1px solid var(--bg-accent);
  cursor: zoom-in;
  flex-shrink: 0;
}
.exercise-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.exercise-card-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--text-tertiary);
}
.exercise-card-thumb:active { transform: scale(0.97); }

.exercise-card-head-body { min-width: 0; }
.exercise-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.exercise-card-target {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.exercise-card-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exercise-card-controls .btn-icon {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
}

/* Override old exercise-card-img (replaced by thumb) */
.exercise-card .exercise-card-img { display: none; }

/* Set table — bigger inputs, no RPE column */
.ex-set-header,
.ex-set-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr 56px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}
.ex-set-header {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  border-top: 1px solid var(--bg-accent);
  padding-top: 12px;
  padding-bottom: 4px;
  text-align: center;
}
.ex-set-header > :first-child { text-align: center; }
.ex-set-row {
  padding: 6px 0;
}
.ex-set-row + .ex-set-row {
  border-top: 1px solid rgba(0,0,0,0.04);
}
.ex-set-row-done {
  background: rgba(45, 90, 61, 0.05);
  border-radius: 6px;
  padding-left: 4px;
  padding-right: 4px;
}
.ex-set-n {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ex-set-input {
  text-align: center;
  padding: 10px 6px;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 48px;
}
.ex-set-input:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
  font-weight: 700;
  opacity: 1;
}
.ex-set-check {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid var(--accent-green);
  background: white;
  color: var(--accent-green);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.ex-set-check:active { background: var(--accent-green-light); transform: scale(0.95); }
.ex-set-check.set-done {
  background: var(--bg-card);
  border-color: var(--bg-accent);
  color: var(--text-secondary);
}
.ex-set-check.ex-set-check-save {
  background: var(--accent-green);
  color: white;
}

.ex-set-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Duration input row at the bottom (no more RPE) */
.duration-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  margin-bottom: 12px;
}
.duration-input-row > span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.duration-input-row > input {
  max-width: 100px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Image lightbox */
.img-lightbox[hidden] { display: none !important; }
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.img-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.img-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 1;
}

/* Timer overlay (full-screen for time-based exercises) */
.timer-overlay[hidden] { display: none !important; }
.timer-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  color: var(--text-inverse);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.timer-close {
  position: absolute;
  /* Push past the Dynamic Island / status bar on iPhone PWAs. The
     previous `top: 16px` left the button behind the safe-area inset
     so the user had no way to exit the timer overlay. */
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px));
  right: max(16px, env(safe-area-inset-right, 16px));
  /* Bigger hit target (52×52) for an absolutely-critical exit button. */
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  color: white;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  /* Sit above any other timer chrome */
  z-index: 10;
}
.timer-close:active { background: rgba(255,255,255,0.22); transform: scale(0.96); }
.timer-name {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  text-align: center;
}
.timer-display {
  font-size: 5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  margin-bottom: 36px;
  font-family: var(--font-serif);
}
.timer-actions {
  display: flex;
  gap: 12px;
}
.timer-actions .btn { min-width: 120px; }

/* Replace-mode hint on the search modal */
.ex-modal.ex-modal-replace .ex-modal-head h3::after {
  content: ' (replace)';
  color: var(--accent-green);
  font-weight: 500;
}

/* Mobile breakpoint tweaks */
@media (max-width: 480px) {
  .workout-sticky-header { padding: 10px 12px; margin: -16px -16px 12px; }
  .set-counter { padding: 5px 10px; }
  .set-counter-num { font-size: 1.05rem; }
  .set-counter-label { display: none; }
  .ex-set-row, .ex-set-header { grid-template-columns: 36px 1fr 1fr 48px; gap: 6px; }
  .ex-set-input { font-size: 1.1rem; padding: 9px 4px; }
  .ex-set-check { width: 44px; height: 44px; font-size: 1.1rem; }
  .exercise-card { padding: 12px 12px 10px; }
  .exercise-card-head-row { grid-template-columns: 56px 1fr auto; gap: 10px; }
  .exercise-card-thumb { width: 56px; height: 56px; }
  .timer-display { font-size: 4rem; }
}

/* ============================================
   Custom exercise form (/exercises/new)
   ============================================ */

/* Muscle checkbox grid */
.muscle-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.muscle-picker-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.muscle-picker-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  margin-bottom: 4px;
}
.muscle-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  text-transform: capitalize;
}
.muscle-chip:has(input:checked) {
  background: var(--accent-green-light);
  border-color: var(--accent-green);
  color: var(--accent-green);
}
.muscle-chip-secondary:has(input:checked) {
  background: var(--bg-tertiary);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.muscle-chip input[type="checkbox"] {
  accent-color: var(--accent-green);
}

/* Tracking-type cards */
.track-type-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.track-type-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  cursor: pointer;
}
.track-type-card:has(input:checked) {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
}
.track-type-card input[type="radio"] {
  accent-color: var(--accent-green);
  flex-shrink: 0;
}
.track-type-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.track-type-sub {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Modal footer (custom exercise link in search) */
.ex-modal-footer {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--bg-accent);
  text-align: center;
}

/* ============================================
   Schedule v2 — mobile-first vertical list,
   readable rows you can actually tap.
   ============================================ */

/* Week header (above the day list) */
.schedule-week-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.schedule-week-title {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
}
.schedule-week-range {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
}
.schedule-week-stats {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.schedule-week-stats strong { color: var(--text-primary); font-weight: 700; }
.schedule-week-stat-sep { color: var(--text-tertiary); }

/* Override the old 7-column grid: stack vertically on mobile */
.schedule-week.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Row card */
.schedule-day-row {
  display: grid;
  grid-template-columns: 48px 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-accent);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  min-height: 56px;
}
a.schedule-day-row:active { background: var(--bg-tertiary); transform: scale(0.99); }
.schedule-day-today {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
}
.schedule-day-rest { opacity: 0.85; background: var(--bg-tertiary); }
.schedule-day-completed { opacity: 0.7; }
.schedule-day-skipped { opacity: 0.55; }

/* Date column */
.sdr-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.sdr-dow {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  margin-bottom: 4px;
}
.sdr-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-serif);
}
.schedule-day-today .sdr-num { color: var(--accent-green); }

/* Icon column */
.sdr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-accent);
  border-radius: 10px;
  font-size: 1.1rem;
  color: var(--accent-green);
}
.schedule-day-rest .sdr-icon { color: var(--text-tertiary); background: transparent; }

/* Body column */
.sdr-body { min-width: 0; }
.sdr-type {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdr-type-rest { color: var(--text-tertiary); font-weight: 500; }
.sdr-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badge */
.sdr-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--bg-accent);
  color: var(--text-secondary);
  white-space: nowrap;
}
.sdr-status-proposed { background: var(--bg-accent); color: var(--text-secondary); }
.sdr-status-approved { background: var(--accent-green-light); color: var(--accent-green); }
.sdr-status-completed { background: rgba(110, 231, 168, 0.14); color: var(--vital); }
.sdr-status-skipped { background: rgba(255, 123, 123, 0.14); color: var(--bad); }
.sdr-status-modified { background: rgba(255, 180, 84, 0.14); color: var(--warn); }

/* Arrow (tappable indicator) */
.sdr-arrow {
  color: var(--text-tertiary);
  font-size: 1.4rem;
  line-height: 1;
}

/* Inline move-day controls under each schedule row */
.schedule-day-wrap { display: flex; flex-direction: column; gap: 0; }
.sdr-move-row {
  display: flex;
  gap: 6px;
  padding: 4px 14px 8px;
  margin-top: -4px;
  justify-content: flex-end;
}
.sdr-move-row .btn-icon {
  padding: 4px 10px;
  font-size: 1rem;
  line-height: 1;
}
.sdr-move-btn { padding: 4px 10px; }

/* Hide the old 7-column grid styles inherited from schedule-week */
.schedule-list .schedule-day {
  /* Reset everything inherited from the old grid layout */
  text-align: left;
  padding: 12px 14px;
  min-height: 56px;
  gap: 12px;
}
.schedule-list .schedule-day-dow,
.schedule-list .schedule-day-num,
.schedule-list .schedule-day-meta {
  /* Suppress old layout */
  all: unset;
}

/* Desktop ≥ 720 px: optionally show 2 rows in a wider grid */
@media (min-width: 720px) {
  .schedule-week.schedule-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* Phone — tighten internal padding so even compact rows feel roomy */
@media (max-width: 480px) {
  .schedule-day-row { padding: 10px 12px; gap: 10px; grid-template-columns: 40px 32px 1fr auto auto; }
  .sdr-num { font-size: 1.25rem; }
  .sdr-icon { width: 32px; height: 32px; }
  .sdr-type { font-size: 0.9rem; }
  .sdr-meta { font-size: 0.74rem; }
  .sdr-status { padding: 3px 6px; font-size: 0.58rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   EQUINOX COMPONENT PRIMITIVES — appended last so cascade wins over legacy
   Ported from the claude.ai/design handoff (equinox/project/styles.css).
   Subsequent commits refactor existing page CSS to consume these directly.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Typography utilities ─────────────────── */
.t-display { font-family: var(--font-sans); font-weight: 500; font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; }
.t-h1      { font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.022em; }
.t-h2      { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.t-body    { font-size: 14px; color: var(--fg-2); }
.t-cap     { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
.t-num     { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; letter-spacing: -0.01em; }
.t-num-xl  { font-family: var(--font-sans); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.t-num-lg  { font-family: var(--font-sans); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.t-num-md  { font-family: var(--font-sans); font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .fg-4 { color: var(--fg-4); }
.vital-c { color: var(--vital); }

/* ── Layout primitives ─────────────────── */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.spread { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.flex-1 { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.padded { padding: 0 var(--s-4); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--s-3); }

/* ── Cards (Equinox) ───────────────────
   These override the legacy .card / .card-flat above by cascade order. */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: var(--s-4);
  box-shadow: none;
}
.card:hover { background: var(--bg-1); transform: none; box-shadow: none; }
.card-elev {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}
.card-flat {
  background: transparent;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: var(--s-4);
  box-shadow: none;
}
.card-inset {
  background: var(--bg-inset);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: var(--s-3);
}

/* ── Pills / badges ─────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  background: var(--bg-2);
  white-space: nowrap;
}
.pill-ok   { color: var(--vital); border-color: rgba(110,231,168,0.25); background: rgba(110,231,168,0.06); }
.pill-warn { color: var(--warn);  border-color: rgba(255,180,84,0.25);  background: rgba(255,180,84,0.06); }
.pill-bad  { color: var(--bad);   border-color: rgba(255,123,123,0.25); background: rgba(255,123,123,0.06); }
.pill-info { color: var(--info);  border-color: rgba(94,200,255,0.25);  background: rgba(94,200,255,0.06); }
.pill-solid {
  background: var(--vital);
  color: var(--vital-ink);
  border-color: transparent;
  font-weight: 600;
}

/* ── Buttons (Equinox) ─────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  text-transform: none;
  transition: background 120ms ease, transform 80ms ease;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }
.btn:hover  { background: var(--bg-3); }
.btn-primary {
  background: var(--vital);
  color: var(--vital-ink);
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--glow-vital);
}
.btn-primary:hover  { background: var(--vital); filter: brightness(1.05); }
.btn-ghost    { background: transparent; }
.btn-outline  { background: transparent; border-color: var(--line-2); color: var(--fg-1); }
.btn-outline:hover { background: var(--bg-2); }
.btn-secondary { background: var(--bg-2); border-color: var(--line-2); color: var(--fg-1); }
.btn-danger    { background: rgba(255,123,123,0.10); border-color: rgba(255,123,123,0.30); color: var(--bad); }
.btn-danger:hover { background: rgba(255,123,123,0.18); }
.btn-sm  { padding: 7px 12px; font-size: 12.5px; }
.btn-lg  { padding: 14px 22px; font-size: 15px; }
.btn:disabled, .btn.loading { opacity: 0.5; cursor: not-allowed; }

/* ── Round mint check (set-completion + plan-item toggle) ─────────────────── */
.check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 120ms ease;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
}
.check:hover { border-color: var(--vital-dim); }
.check.checked {
  background: var(--vital);
  border-color: var(--vital);
  color: var(--vital-ink);
  box-shadow: 0 0 12px var(--vital-glow);
}

/* ── Section heading ─────────────────── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s-6) var(--s-4) var(--s-3);
}
.section-head:first-child { margin-top: var(--s-4); }
.section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}

/* ── List item (plan / generic list rows) ─────────────────── */
.list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  transition: background 120ms ease;
}
.list-item:hover { background: var(--bg-2); }
.list-item.done .title { color: var(--fg-3); text-decoration: line-through; }

/* ── Metric tile ─────────────────── */
.metric-tile {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.metric-tile-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric-tile-label .label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.metric-tile .value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.metric-tile .unit {
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}
.metric-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Sparkline ─────────────────── */
.spark        { display: block; max-width: 100%; }
.spark-band   { fill: currentColor; opacity: 0.10; }
.spark-line   { stroke: currentColor; stroke-width: 1.5; fill: none; }
.spark-dot    { fill: currentColor; }

/* ── Ring chart wrapper ─────────────────── */
.ring-wrap   { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }

/* ── Category dot ─────────────────── */
.cat-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cat-supplement { background: var(--vital); }
.cat-exercise   { background: var(--strain); }
.cat-nutrition  { background: var(--nutrition); }
.cat-sleep      { background: var(--sleep); }
.cat-behavior   { background: var(--behavior); }
.cat-medication { background: var(--medication); }
.cat-monitoring { background: var(--monitoring); }
.cat-strength   { background: var(--vital); }
.cat-cardio     { background: var(--strain); }
.cat-mobility   { background: var(--sleep); }
.cat-recovery   { background: var(--behavior); }
.cat-test       { background: var(--nutrition); }

/* ── Chat (Coach screen) ─────────────────── */
.chat-feed { display: flex; flex-direction: column; gap: 14px; padding: 8px var(--s-4) 16px; }
.bubble {
  max-width: 84%;
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
}
.bubble-coach {
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid var(--line-1);
  border-top-left-radius: 6px;
  align-self: flex-start;
}
.bubble-user {
  background: var(--vital);
  color: var(--vital-ink);
  border-top-right-radius: 6px;
  align-self: flex-end;
  font-weight: 500;
  box-shadow: 0 0 24px var(--vital-glow);
}
.bubble-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.composer {
  position: sticky;
  bottom: 88px;
  margin: 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.composer input {
  flex: 1;
  font-size: 14.5px;
  padding: 10px 0;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
.composer input::placeholder { color: var(--fg-3); }

/* ── Quick-ask chip (Equinox; legacy .chip exists for tags — we override) ─── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { color: var(--fg-1); background: var(--bg-2); border-color: var(--line-3); }
.chip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 var(--s-4);
  scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }

/* ── Tabs ─────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-full);
  padding: 4px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: -0.005em;
  cursor: pointer;
}
.tab.active { background: var(--bg-3); color: var(--fg-1); }

/* ── Week strip (day pills) ─────────────────── */
.weekstrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 0 var(--s-4);
}
.daycell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border-radius: var(--r-2);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
}
.daycell.today { border-color: var(--vital); box-shadow: 0 0 16px rgba(110, 231, 168, 0.1); }
.daycell .dayname {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.daycell .daynum { font-size: 14px; font-weight: 500; }
.daycell.today .daynum { color: var(--vital); }

/* ── Progress bars (Equinox) ─────────────────── */
.progress {
  height: 4px;
  background: var(--bg-3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--vital);
  border-radius: var(--r-full);
  box-shadow: 0 0 8px var(--vital-glow);
}
.progress-fill.warn { background: var(--warn); box-shadow: 0 0 8px rgba(255,180,84,0.3); }
.progress-fill.bad  { background: var(--bad);  box-shadow: 0 0 8px rgba(255,123,123,0.3); }

/* ── Range bar (target band + current marker) ─────────────────── */
.range-bar { position: relative; height: 6px; background: var(--bg-3); border-radius: var(--r-full); }
.range-bar .band {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(110, 231, 168, 0.18);
  border-radius: var(--r-full);
}
.range-bar .marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vital);
  box-shadow: 0 0 8px var(--vital-glow), 0 0 0 2px var(--bg-1);
}

/* ── Mood emoji buttons ─────────────────── */
.mood-row { display: flex; gap: 6px; justify-content: space-between; }
.mood-btn {
  flex: 1;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--fg-2);
  position: relative;
  cursor: pointer;
}
.mood-btn.selected {
  border-color: var(--vital);
  background: rgba(110, 231, 168, 0.08);
  color: var(--vital);
  box-shadow: 0 0 16px var(--vital-glow);
}

/* ── Scrollable rows ─────────────────── */
.h-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding: 0 var(--s-4);
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* ── Hairline divider ─────────────────── */
.hr { height: 1px; background: var(--line-1); margin: var(--s-2) 0; }

/* ── Hero glow background ─────────────────── */
.hero-glow { position: relative; overflow: hidden; isolation: isolate; }
.hero-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 30%, rgba(110, 231, 168, 0.15) 0%, transparent 35%),
    radial-gradient(circle at 70% 70%, rgba(94, 200, 255, 0.08) 0%, transparent 40%);
  z-index: -1;
  pointer-events: none;
}

/* ── Animations ─────────────────── */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.pulse { animation: pulse-glow 2s ease-in-out infinite; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── Form inputs (dark + mint focus) ─────────────────── */
.form-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="time"],
input[type="date"],
input[type="search"],
input[type="password"],
textarea,
select {
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  color: var(--fg-1);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--vital);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(110, 231, 168, 0.10);
}
.form-input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--fg-3); }

/* ════════════════════════════════════════════════════════════════════════
   EQUINOX SHELL — topbar + bottom-nav + screen container
   Appended last (after primitives) so cascade overrides the legacy
   .top-bar / .bottom-nav rules earlier in this file.
   ════════════════════════════════════════════════════════════════════════ */

/* Body padding overlap: the screen wrapper handles bottom nav spacing now */
body { padding-bottom: 0; }

/* ── Screen container ─────────────────── */
.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 412px;
  margin: 0 auto;
  position: relative;
  /* Belt-and-braces overflow control: anything that exceeds the screen
     width clips here, not at the viewport edge. */
  overflow-x: clip;
  background:
    radial-gradient(800px 400px at 70% -20%, rgba(110, 231, 168, 0.06) 0%, transparent 60%),
    radial-gradient(600px 300px at 0% 10%, rgba(94, 200, 255, 0.04) 0%, transparent 60%),
    var(--bg-0);
}
@media (min-width: 480px) {
  .screen {
    border-left: 1px solid var(--line-1);
    border-right: 1px solid var(--line-1);
  }
}
/* screen-body padding allows the FIXED topbar + bottom-nav to overlap
   without obscuring content. Top padding scales with the safe-area
   inset so the first row of content sits clear of the Dynamic Island. */
.screen-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: max(60px, calc(env(safe-area-inset-top, 14px) + 46px));
  padding-bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 72px));
}

/* ── Topbar (Equinox) ─────────────────── */
.topbar {
  /* FIXED rather than sticky — sticky causes a 2-4px wobble on iOS
     during inertial / rubber-band scroll. fixed locks the bar to the
     viewport hard, no movement during scroll. Centered to match the
     412px-max screen frame. */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 412px;
  z-index: 50;
  /* iOS PWA: status-bar-style is "black-translucent" so the status bar
     overlays the page. max() picks the BIGGER of 14px and the actual
     safe-area inset — on iPhone PWAs the inset (~59px with Dynamic
     Island) already includes enough breathing room below the status
     bar, so we don't add anything on top of it; on browser/desktop
     where the inset is 0, the 14px fallback kicks in. */
  padding: max(14px, env(safe-area-inset-top, 14px)) var(--s-4) 10px;
  /* Solid background needed now that we're fixed — the gradient
     transparency would let scrolled content peek through. */
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-1);
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: var(--fg-1);
}
.topbar-brand .topbar-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Icon button (topbar + general) ─────────────────── */
.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--fg-2);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.icon-btn:hover  { background: var(--bg-2); color: var(--fg-1); }
.icon-btn.active { color: var(--vital); background: var(--bg-2); }

/* ── Bottom nav (Equinox) ─────────────────── */
.bottom-nav {
  /* See .topbar above for why fixed beats sticky on iOS. */
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 412px;
  z-index: 60;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-0);
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--line-1);
  /* Reset legacy */
  border-radius: 0;
  box-shadow: none;
}
.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: var(--r-2);
  color: var(--fg-3);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  background: transparent;
  position: relative;
  transition: color 120ms ease;
}
.bottom-nav .nav-item.active { color: var(--vital); }
.bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: var(--vital);
  border-radius: var(--r-full);
  box-shadow: 0 0 8px var(--vital-glow);
}
.bottom-nav .nav-item .ic { width: 22px; height: 22px; }
/* Hide any legacy nav-icon span if it slips through */
.bottom-nav .nav-item .nav-icon { display: none; }

/* ── Build chip (dark variant) ─────────────────── */
.build-chip {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 999;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(7, 8, 10, 0.85);
  color: var(--fg-3);
  border: 1px solid var(--line-1);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Section heads inside our long-form pages: keep simple .page-header dark ── */
.page-header { padding: 16px; }
.page-header h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.022em;
  color: var(--fg-1);
}
.page-header .subtitle { color: var(--fg-2); font-size: 14px; margin-top: 4px; }

/* ── Container (legacy main wrap) — flatten so .screen takes over layout ──── */
.container { padding: 0; max-width: none; }

/* ════════════════════════════════════════════════════════════════════════
   EQUINOX FIXES — dark-mode tune-ups for legacy widgets where the
   token aliases produced muddy borders. Each rule overrides an
   earlier (legacy) class definition by cascade order.
   ════════════════════════════════════════════════════════════════════════ */

/* Unplanned activity rows */
.unplanned-row {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 10px 14px;
  color: var(--fg-1);
}
.unplanned-day { color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.unplanned-type { color: var(--fg-1); font-weight: 500; font-size: 14px; text-transform: capitalize; }
.unplanned-dur { color: var(--fg-2); font-family: var(--font-mono); font-size: 12.5px; }
.unplanned-zone { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.unplanned-zone-z1 { color: var(--fg-3); }       /* Z1 is mostly noise, dim it */
.unplanned-zone-z2 { color: var(--vital); }
.unplanned-zone-z3 { color: var(--warn); }
.unplanned-zone-z4 { color: #FF9F45; }            /* between warn and bad */
.unplanned-zone-z5 { color: var(--bad); }
.unplanned-zone.muted { color: var(--fg-4); }

/* Banners that previously used --bg-card with no border now show as dark patches */
.intake-banner,
.refit-banner,
.calendar-conflict-banner,
.auto-adjust-banner,
.reconciled-banner,
.test-due-row {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  color: var(--fg-1);
}
.intake-banner-title,
.refit-banner-title,
.calendar-conflict-title,
.auto-adjust-title { color: var(--fg-1); }
.intake-banner-sub,
.refit-banner-sub,
.calendar-conflict-sub,
.auto-adjust-sub,
.test-due-sub { color: var(--fg-2); }

/* Generic .section-h3-row and .section-h3 — the dashboard's section headings.
   The cream theme had these as larger serif-ish headings; we want them mono caps. */
.section-h3-row { padding: 0 var(--s-4); margin: var(--s-6) 0 var(--s-3); }
.section-h3 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.section-h3-row .muted { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: 0.06em; }

/* Generic .muted variants on dark */
.muted, .muted-block { color: var(--fg-3); }
.muted-block { font-size: 13px; line-height: 1.45; }

/* Top-level page-header (used on many secondary pages) */
.page-header { padding: 12px var(--s-4) 0; }
.page-header h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.022em;
  color: var(--fg-1);
}
.page-header h1.serif { font-family: var(--font-sans); }
.page-header .subtitle { color: var(--fg-2); font-size: 13.5px; margin-top: 6px; }

/* Targets bars / zone bars — make sure the fill is mint on dark */
.target-bar-fill,
.tm-fill,
.zone-bar-fill { background: var(--vital); }

/* Generic .section spacing on dashboard — push content edges away from the screen border */
.section { padding: 0 var(--s-4); margin-bottom: var(--s-5); }

/* Sections inside the workout detail can use full bleed (no horizontal pad) */
.section.section-bleed { padding: 0; }

/* ════════════════════════════════════════════════════════════════════════
   EQUINOX FIXES — round 2 (tests cards / schedule density / voice button)
   ════════════════════════════════════════════════════════════════════════ */

/* 1) Fitness Tests Due — was hard-coded cream #FFF6E0 → muddy on dark.
   Repaint as a subtle warning-tinted dark surface with mint title. */
.test-due-row {
  background: var(--bg-1);
  border: 1px solid rgba(255, 180, 84, 0.22);
  border-radius: var(--r-3);
  padding: 14px 16px;
  box-shadow: 0 0 0 0 transparent;
  color: var(--fg-1);
  position: relative;
}
.test-due-row::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px; width: 3px;
  background: var(--warn);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  box-shadow: 0 0 8px rgba(255, 180, 84, 0.25);
}
.test-due-name { color: var(--fg-1); font-weight: 600; font-size: 15px; }
.test-due-sub  { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }

/* Also the /tests page list — same family, same treatment when "due" */
.test-card {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  color: var(--fg-1);
}
.test-card-due {
  background: var(--bg-1);
  border-color: rgba(255, 180, 84, 0.22);
}
.test-card-name    { color: var(--fg-1); }
.test-card-cadence { color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.06em; }
.test-card-desc    { color: var(--fg-2); }
.test-card-meta    { color: var(--fg-3); }
.test-card-due-pill { background: var(--warn); color: var(--vital-ink); }

/* 2) Schedule — full-width cards, always. Kill the desktop 2-column grid. */
.schedule-week.schedule-list {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 720px) {
  .schedule-week.schedule-list {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
  }
}
/* Repaint the day-row card on dark */
.schedule-day-row {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  color: var(--fg-1);
  padding: 14px 16px;
}
.schedule-day-row.schedule-day-today { border-color: var(--vital); box-shadow: 0 0 16px rgba(110,231,168,0.08); }

/* 3 & 4) Voice button — was 14/18px padding + 1rem font + display:flex with
   width filling the parent. Bring it down to a normal Equinox btn size. */
.voice-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  max-width: 240px;
  padding: 10px 18px !important;
  font-size: 14px !important;
  border-radius: var(--r-full);
  /* btn-primary mint look */
  background: var(--vital);
  color: var(--vital-ink);
  border: 1px solid transparent;
  font-weight: 600;
  box-shadow: var(--glow-vital);
  cursor: pointer;
}
.voice-btn:hover { filter: brightness(1.05); }
.voice-btn .voice-btn-dot { background: var(--vital-ink); opacity: 0.6; }
.voice-btn[data-state="recording"] { background: var(--bad); color: white; box-shadow: 0 0 16px rgba(255,123,123,0.35); }
.voice-btn[data-state="recording"] .voice-btn-dot { background: white; opacity: 1; }
/* phone media-query override was also forcing min-height: 52px on voice-btn — kill it */
@media (max-width: 480px) {
  .voice-btn { min-height: 0 !important; padding: 10px 18px !important; }
  .voice-recorder { gap: 10px; margin-top: 4px; }
}
/* Voice recorder column shouldn't stretch the button */
.voice-recorder { align-items: flex-start; }

/* ════════════════════════════════════════════════════════════════════════
   EQUINOX FIXES — round 3
   /tests cream background (kill with !important), /replan spacing,
   /audit row width, /exercises/new muscle-pick checkboxes
   ════════════════════════════════════════════════════════════════════════ */

/* 1) /tests page — make sure the cream background CANNOT win the cascade.
   The legacy rule at L4193 lives on through any cached CSS — !important
   stops it for good. */
.test-card        { background: var(--bg-1) !important; border-color: var(--line-1) !important; color: var(--fg-1) !important; }
.test-card-due    { background: var(--bg-1) !important; border-color: rgba(255, 180, 84, 0.30) !important; }
.test-card-name   { color: var(--fg-1) !important; font-size: 16px; font-weight: 600; }
.test-card-desc   { color: var(--fg-2) !important; }
.test-card-cadence{ color: var(--fg-3) !important; font-family: var(--font-mono); letter-spacing: 0.06em; }
.test-card-meta   { color: var(--fg-3) !important; }
.test-card-due-pill { background: var(--warn) !important; color: var(--vital-ink) !important; font-family: var(--font-mono); letter-spacing: 0.04em; }
/* Same for the dashboard tests-due strip */
.test-due-row     { background: var(--bg-1) !important; border-color: rgba(255, 180, 84, 0.30) !important; color: var(--fg-1) !important; }
.test-due-name    { color: var(--fg-1) !important; }
.test-due-sub     { color: var(--fg-3) !important; }

/* 2) /replan page — tame the vertical spacing + line up everything. */
.replan-card,
.replan-step {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-1) !important;
  color: var(--fg-1) !important;
  border-radius: var(--r-3);
  padding: 14px 16px;
}
.replan-step + .replan-step { margin-top: 8px; }
.replan-stat { color: var(--fg-2); font-size: 13.5px; line-height: 1.5; }
.replan-stat b { color: var(--fg-1); }
.replan-step-head { gap: 12px; }
.replan-step-name { color: var(--fg-1); font-weight: 600; font-size: 14.5px; }
/* The big primary CTA: keep the mint pill compact + breathing room */
#rebuild-all-btn { padding: 12px 22px; font-size: 14px; max-width: 360px; }
/* Section heads inside /replan: use mono caps + tighter top margin */
.page-header + .section,
.section + .section { margin-top: 12px; }

/* 3) /audit page — the recent-events row was 460px wide on a 412px screen.
   Stack to a column always. The summary cards also need dark surface. */
.audit-card { background: var(--bg-1) !important; border-color: var(--line-1) !important; color: var(--fg-1) !important; }
.audit-card-name { color: var(--fg-3) !important; font-family: var(--font-mono); letter-spacing: 0.08em; }
.audit-stat { color: var(--fg-2); }
.audit-stat b { color: var(--fg-1); }
.audit-stat-bad { color: var(--bad) !important; }
.audit-row {
  background: var(--bg-1) !important;
  border-color: var(--line-1) !important;
  color: var(--fg-1) !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    'when outcome'
    'surface outcome'
    'meta outcome';
  padding: 10px 14px;
  gap: 4px 10px;
}
.audit-row-when     { grid-area: when; color: var(--fg-3) !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.audit-row-surface  { grid-area: surface; color: var(--fg-1) !important; font-weight: 600; font-size: 13.5px; }
.audit-row-meta     { grid-area: meta; color: var(--fg-3) !important; font-size: 11.5px; line-height: 1.4; }
.audit-row-outcome  { grid-area: outcome; align-self: center; }
.audit-row-ok .audit-row-outcome { color: var(--vital) !important; }
.audit-row-validator_failed .audit-row-outcome,
.audit-row-parse_error .audit-row-outcome { color: var(--bad) !important; }
.audit-summary,
.audit-grid {
  grid-template-columns: 1fr !important;
}

/* 4) /exercises/new — muscle picker. The native <input type=checkbox>
   was rendering as a white square inside each card on dark. Hide it
   completely (still focusable for a11y) — the card's checked state is
   already communicated via .muscle-chip:has(input:checked). */
.muscle-chip {
  position: relative;
  background: var(--bg-1) !important;
  border-color: var(--line-1) !important;
  color: var(--fg-2) !important;
}
.muscle-chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.muscle-chip:has(input:checked) {
  background: rgba(110, 231, 168, 0.10) !important;
  border-color: var(--vital) !important;
  color: var(--vital) !important;
  box-shadow: inset 0 0 0 1px var(--vital), 0 0 16px var(--vital-glow);
}
.muscle-chip-secondary:has(input:checked) {
  background: var(--bg-2) !important;
  border-color: var(--line-3) !important;
  color: var(--fg-1) !important;
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.muscle-picker-label { color: var(--fg-3) !important; font-family: var(--font-mono); letter-spacing: 0.08em; font-size: 11px; }

/* While we're here: same blank-square problem will show on any standalone
   checkbox elsewhere. Style it once globally with an Equinox mint look. */
input[type="checkbox"]:not(.muscle-chip input):not([hidden]) {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--line-3);
  background: var(--bg-inset);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  transition: all 120ms ease;
  flex-shrink: 0;
}
input[type="checkbox"]:not(.muscle-chip input):not([hidden]):checked {
  background: var(--vital);
  border-color: var(--vital);
  box-shadow: 0 0 8px var(--vital-glow);
}
input[type="checkbox"]:not(.muscle-chip input):not([hidden]):checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--vital-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:not(.muscle-chip input):not([hidden]):focus-visible {
  outline: 2px solid var(--vital);
  outline-offset: 2px;
}

/* Radios — same treatment */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  background: var(--bg-inset);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
}
input[type="radio"]:checked {
  border-color: var(--vital);
  box-shadow: 0 0 8px var(--vital-glow);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--vital);
}

/* ════════════════════════════════════════════════════════════════════════
   EQUINOX FIXES — round 4
   - Legacy /plan "Assessment" was dark-mint ink (--text-inverse) on
     near-black (--bg-dark): both aliases resolved to nearly the same
     colour. Repaint with proper white-on-elevated-dark.
   - Quick-action icons on the dashboard are now inline SVG; size them
     to match the bottom-nav icons.
   - Gyms page: title/Edit/×/DEFAULT-pill cluster too tight; add
     breathing room.
   ════════════════════════════════════════════════════════════════════════ */

/* Legacy assessment card (Health Plan) */
.assessment-card {
  background: var(--bg-1) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--line-1);
  border-left: 3px solid var(--vital);
  border-radius: var(--r-3);
  padding: 18px 20px;
  box-shadow: 0 0 24px rgba(110, 231, 168, 0.04);
}
.assessment-card h3 {
  color: var(--fg-1) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--vital) !important;
  opacity: 1 !important;
  margin-bottom: 8px;
}
.assessment-card p {
  color: var(--fg-2) !important;
  opacity: 1 !important;
  font-size: 14px !important;
  line-height: 1.6;
}

/* Quick-action SVG icon — same size + color as bottom-nav */
.quick-action-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vital);
  background: var(--bg-2);
  border-radius: var(--r-2);
  border: 1px solid var(--line-1);
  flex-shrink: 0;
}
.quick-action-icon svg { width: 20px; height: 20px; }
/* Repaint the surrounding quick-action card on dark */
.quick-action {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-1) !important;
  color: var(--fg-1) !important;
  border-radius: var(--r-3) !important;
}
.quick-action:hover { background: var(--bg-2) !important; border-color: var(--line-2) !important; }
.quick-action-label { color: var(--fg-1) !important; }
.quick-action-sub { color: var(--fg-3) !important; }

/* Gyms page — head row: name + DEFAULT pill + Edit + ×
   The default treatment was border-radius:0 pill, edit button immediately
   adjacent to title. Open the row up. */
.gym-card { background: var(--bg-1) !important; border-color: var(--line-1) !important; padding: 16px 18px !important; }
.gym-card-head { gap: 12px; padding-bottom: 4px; }
.gym-card-name { color: var(--fg-1) !important; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.gym-card-location { color: var(--fg-3) !important; font-size: 12px; }
.gym-card-actions { gap: 6px !important; align-items: center; }
/* DEFAULT pill — restyled to Equinox standard */
.gym-card .badge,
.badge {
  background: rgba(110, 231, 168, 0.10) !important;
  color: var(--vital) !important;
  border: 1px solid rgba(110, 231, 168, 0.30);
  border-radius: var(--r-full);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}
/* Equipment chips inside the gym card — restyle on dark */
.gym-equipment { gap: 6px; margin-top: 10px; }
.gym-eq-chip {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-1);
  color: var(--fg-2) !important;
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-size: 11.5px;
  letter-spacing: 0;
}
.gym-transcript {
  background: var(--bg-inset) !important;
  color: var(--fg-2) !important;
  border: 1px solid var(--line-1);
}

/* ============================================================
   EQUINOX ROUND 5 — workout page on dark
   ============================================================ */

/* Workout sticky header at top of /workout/:id */
.workout-sticky-header {
  background: rgba(14, 16, 20, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-1) !important;
  margin: -16px -16px 16px;
}
.workout-sticky-title {
  color: var(--fg-1) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}
.workout-sticky-sub {
  color: var(--fg-3) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* kg/lb chip in header */
.unit-chip {
  background: transparent;
  border: 1px solid var(--vital);
  color: var(--vital);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 999px;
}

/* Set counter pill */
.set-counter {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-1) !important;
  padding: 6px 14px;
  border-radius: 12px;
}
.set-counter-num {
  color: var(--fg-1) !important;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
}
.set-counter-sep, .set-counter-target {
  color: var(--fg-3) !important;
  font-family: var(--font-mono) !important;
}
.set-counter-label {
  color: var(--fg-3) !important;
  font-family: var(--font-mono) !important;
}

/* Set check button — Equinox round mint check */
.ex-set-check {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-2) !important;
  border: 1px solid var(--line-1) !important;
  color: var(--vital) !important;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}
.ex-set-check:hover {
  background: var(--bg-3) !important;
  border-color: var(--vital) !important;
}
.ex-set-check:active {
  background: rgba(110, 231, 168, 0.15) !important;
  transform: scale(0.94);
}
.ex-set-check.set-done {
  background: rgba(110, 231, 168, 0.12) !important;
  border-color: rgba(110, 231, 168, 0.4) !important;
  color: var(--vital) !important;
}
.ex-set-check.ex-set-check-save {
  background: var(--vital) !important;
  border-color: var(--vital) !important;
  color: #07080A !important;
}

/* Auto-adjust banner: force dark even when source rule wins specificity battles */
.auto-adjust-banner {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-1) !important;
  color: var(--fg-1) !important;
  border-radius: 12px;
}
.auto-adjust-icon { color: var(--vital) !important; }
.auto-adjust-title { color: var(--fg-1) !important; font-weight: 600 !important; }
.auto-adjust-sub {
  color: var(--fg-3) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ============================================================
   SCHEDULE DRAG-AND-DROP (replaces ← → Move… row)
   ============================================================ */

/* Cards are draggable: prevent native long-press menu/text-selection
   so the long-press initiates our drag cleanly.
   !important because iOS 17+ Safari sometimes wins specificity wars on
   anchor elements and re-enables the link-preview callout. */
.schedule-day-wrap[data-workout-id]:not([data-workout-id=""]) .schedule-day-row,
.schedule-day-wrap[data-workout-id]:not([data-workout-id=""]) a.schedule-day-row,
a.week-row[href] {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  touch-action: pan-y;
}

/* Lifted-card state during drag */
.schedule-day-wrap.dragging {
  z-index: 100;
  position: relative;
  pointer-events: none; /* let drop-target detection happen via document pointermove */
  transition: none !important;
}
.schedule-day-wrap.dragging .schedule-day-row {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--vital);
  opacity: 0.96;
}

/* Highlight the day the pointer is currently over */
.schedule-day-wrap.drop-target .schedule-day-row {
  background: rgba(110, 231, 168, 0.06);
  border-color: var(--vital);
  box-shadow: inset 0 0 0 1px var(--vital);
}

/* Hide the now-removed move-row everywhere it might still render in stale HTML */
.sdr-move-row { display: none !important; }

/* ============================================================
   Workout type icons (Equinox SVG set)
   ============================================================ */
.type-ic {
  width: 100%;
  height: 100%;
  max-width: 22px;
  max-height: 22px;
  display: block;
}

/* Schedule day icon tile — center the SVG cleanly */
.sdr-icon .type-ic { width: 20px; height: 20px; }
.sdr-icon { padding: 0; }

/* Workout sticky header — title row icon needs to sit inline with text */
.workout-sticky-title .type-ic {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 4px;
}

/* Hero icon on the home page next-up card */
.workout-hero-icon .type-ic { width: 22px; height: 22px; }

/* ============================================================
   Voice recorder breathing room — button was glued to the
   paragraph above on /gyms and /feedback
   ============================================================ */
.voice-recorder {
  margin-top: 18px !important;
}
.muted-block + .voice-recorder,
p + .voice-recorder,
.section-h3 + .voice-recorder {
  margin-top: 20px !important;
}

/* Same pattern for other primary CTAs that follow a description block */
.section-h3 + .btn,
.section-h3 + .btn-primary,
.muted-block + .btn,
.muted-block + .btn-primary,
p + .btn-primary {
  margin-top: 16px;
}

/* htmx-request: a subtle ramp during cross-page swap so the user
   sees that the new page is on its way, instead of nothing happening
   for a beat. */
body.htmx-request {
  opacity: 0.85;
  transition: opacity 120ms ease;
}

/* ============================================================
   Workout detail page — exercise card readability
   Larger title for at-arm's-length / no-glasses reading,
   action icons reflowed horizontally below the title to save
   vertical space.
   ============================================================ */

.exercise-card-head-row {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  grid-template-areas:
    "thumb body"
    "controls controls" !important;
  gap: 12px !important;
  align-items: start;
  margin-bottom: 12px;
}
.exercise-card-thumb,
.exercise-card-thumb-placeholder { grid-area: thumb; }
.exercise-card-head-body { grid-area: body; }

/* Bigger exercise title so it's legible without reading glasses */
.exercise-card-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1, var(--text-primary));
}

/* Slightly larger target line too — it pairs with the title */
.exercise-card-target {
  font-size: 14px;
  margin-top: 4px;
}

/* Horizontal control row below thumb+body, full width */
.exercise-card-controls {
  grid-area: controls;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line-1, var(--bg-accent));
}
.exercise-card-controls .btn-icon {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

/* Tighten the head on small screens so we don't waste horizontal space */
@media (max-width: 480px) {
  .exercise-card-head-row {
    grid-template-columns: 56px 1fr !important;
    gap: 10px !important;
  }
  .exercise-card-title { font-size: 20px; }
}

/* ============================================================
   Workout card — compact single action row
   Up / Down / Replace / Delete + spacer + 😊 More / 😕 Less
   ============================================================ */

/* Tighten meta chips under title */
.exercise-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
  margin-top: 6px !important;
}

/* Merged action row — management on left, vote on right */
.exercise-card-controls {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  margin-top: 6px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--line-1, var(--bg-accent));
}
.exercise-card-controls .btn-icon {
  width: 40px;
  height: 40px;
  font-size: 16px;
  flex-shrink: 0;
}
.ex-ctl-spacer { flex: 1 1 auto; }

/* Vote buttons inside the controls row — emoji-only, tile size matches btn-icon */
.exercise-card-controls .vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  background: var(--bg-2, var(--bg-card));
  border: 1px solid var(--line-1, var(--bg-accent));
  cursor: pointer;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.exercise-card-controls .vote-btn .vote-face { line-height: 1; }
.exercise-card-controls .vote-btn .vote-label { display: none; }
.exercise-card-controls .vote-up.vote-active {
  background: rgba(110,231,168,0.12);
  border-color: var(--vital);
}
.exercise-card-controls .vote-down.vote-active {
  background: rgba(255,123,123,0.12);
  border-color: var(--bad, #ff7b7b);
}

/* Hide the now-removed separate vote-row if it ever ships in stale HTML */
.exercise-vote-row { display: none !important; }

/* Less padding on the card overall, less gap between title block and action row */
.exercise-card { padding: 12px 14px 12px !important; }
.exercise-card-head-row { margin-bottom: 6px !important; }

/* ============================================================
   Unplanned activity row — prevent overflow from long type names
   ============================================================ */
.unplanned-row {
  grid-template-columns: 50px minmax(0, 1fr) auto auto !important;
  overflow: hidden;
}
.unplanned-row > * { min-width: 0; }
.unplanned-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
@media (max-width: 480px) {
  .unplanned-row {
    grid-template-columns: 44px minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
  }
}

/* ============================================================
   Timer overlay — high-contrast mono digits, prep-countdown state
   ============================================================ */
.timer-display {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  color: var(--fg-1) !important;
  text-shadow: 0 0 24px rgba(110, 231, 168, 0.18);
  font-size: 6rem !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px !important;
}
.timer-display-prep {
  color: var(--vital) !important;
  font-size: 7rem !important;
  text-shadow: 0 0 40px rgba(110, 231, 168, 0.45);
}
.timer-display-hit {
  color: var(--vital) !important;
  text-shadow: 0 0 32px rgba(110, 231, 168, 0.55);
}
.timer-target {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 28px;
  text-align: center;
}

/* ============================================================
   Phase D — narrative cards + audit findings (the "why" surface)
   ============================================================ */
.plan-rationale-card {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-left: 3px solid var(--vital);
  border-radius: 12px;
  padding: 16px 18px;
}
.plan-rationale-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vital);
  margin-bottom: 10px;
}
.plan-rationale-text {
  color: var(--fg-1);
  line-height: 1.55;
  font-size: 15px;
}
.plan-rationale-detail summary {
  margin-top: 12px;
  color: var(--vital);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.plan-rationale-detail summary::-webkit-details-marker { display: none; }

/* Audit card */
.audit-card {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  padding: 14px 16px;
}
.audit-card summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.audit-card summary::-webkit-details-marker { display: none; }
.audit-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  color: var(--fg-2);
}
.audit-card.audit-concerns .audit-chip {
  background: rgba(255, 180, 84, 0.12);
  border-color: rgba(255, 180, 84, 0.4);
  color: #ffb454;
}
.audit-card.audit-pass .audit-chip {
  background: rgba(110, 231, 168, 0.12);
  border-color: rgba(110, 231, 168, 0.4);
  color: var(--vital);
}
.audit-summary { color: var(--fg-2); font-size: 13px; }
.audit-findings { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.audit-finding {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-left: 3px solid var(--fg-3);
  border-radius: 10px;
  padding: 10px 12px;
}
.audit-finding-high   { border-left-color: var(--bad, #ff7b7b); }
.audit-finding-medium { border-left-color: #ffb454; }
.audit-finding-low    { border-left-color: var(--fg-3); }
.audit-finding-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.audit-severity {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-1);
  color: var(--fg-3);
}
.audit-stage {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.audit-issue { color: var(--fg-1); font-weight: 600; font-size: 14px; }
.audit-evidence, .audit-suggestion {
  margin-top: 4px;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.45;
}

/* ============================================================
   Audit refinement trail (per-round summary in the audit card)
   ============================================================ */
.audit-trail {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.audit-trail-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.audit-trail-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-top: 1px dashed var(--line-1);
}
.audit-trail-row:first-of-type { border-top: none; }
.audit-trail-round { font-family: var(--font-mono); color: var(--fg-3); font-weight: 600; }
.audit-trail-count { color: var(--fg-2); }
.audit-trail-verdict {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.audit-trail-verdict-pass { background: rgba(110,231,168,0.15); color: var(--vital); }
.audit-trail-verdict-concerns { background: rgba(255,180,84,0.15); color: #ffb454; }
.audit-trail-verdict-skipped { color: var(--fg-3); }
.audit-trail-findings { color: var(--fg-3); font-size: 11px; font-family: var(--font-mono); }

/* Dashboard quick-action when rendered as a <button> (for actions like
   "Prep next 7 days" that fire a fetch instead of navigating).
   Strip default button chrome so it matches the <a> tiles visually. */
.quick-action-btn {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* Border-box + no explicit width — grid cell sizes the tile, padding
     and border are included in that size so it can't overshoot the cell. */
  box-sizing: border-box;
  width: auto;
  min-width: 0;
}
.quick-action-btn:disabled { opacity: 0.65; cursor: progress; }
/* Make sure the parent grid + every child respects the row width. */
.quick-actions { box-sizing: border-box; }
.quick-actions > * { box-sizing: border-box; min-width: 0; }

/* ============================================================
   Profile tab bar — sits below the page-header on /intake,
   /goals, /preferences, /feedback so all four feel like tabs
   of one /profile page even though they remain separate URLs.
   ============================================================ */
.profile-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  margin: 0 var(--s-4) var(--s-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.profile-tab {
  flex: 1 1 0;
  min-width: max-content;
  text-align: center;
  padding: 9px 14px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 120ms, color 120ms;
}
.profile-tab:hover { background: var(--bg-2); color: var(--fg-1); }
.profile-tab-active {
  background: var(--bg-2);
  color: var(--vital);
  box-shadow: inset 0 0 0 1px var(--vital);
}

/* Inline-flow gym chip — sits inside .sdr-meta on the same line as
   "45m · focus" so the schedule row stays exactly as tall as before.
   Borderless, dotted-underline (mint on hover) so the user can tell
   it's tappable without consuming layout space. Native picker still
   opens on tap. */
.sdr-gym {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-2);
  max-width: 130px;
  vertical-align: baseline;
}
.sdr-gym:hover { color: var(--fg-1); text-decoration-color: var(--vital); }
.sdr-gym:focus { outline: none; color: var(--vital); }
.sdr-gym:disabled { cursor: progress; opacity: 0.6; }

/* ============================================================
   Workout page: gym picker strip near the top
   ============================================================ */
.workout-gym-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 12px;
}
.workout-gym-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.workout-gym-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 26px 6px 12px;
  background: var(--bg-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa0aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>") no-repeat right 8px center;
  background-size: 10px 6px;
  border: 1px solid var(--line-1);
  border-radius: 10px;
  color: var(--fg-1);
  font-size: 13px;
  cursor: pointer;
  flex-grow: 1;
  min-width: 140px;
}
.workout-gym-select:focus { outline: none; border-color: var(--vital); }

/* Restorative-sleep parenthetical inside the Total-sleep vitals cell —
   smaller, dimmer than the main hour reading. */
.vitals-cell .vitals-sub {
  font-size: 0.62em;
  color: var(--fg-3);
  font-weight: 500;
  display: inline-block;
  margin-left: 2px;
}

/* ============================================================
   ADD WORKOUT — modal (plan ahead / log what I did)
   ============================================================ */
.aw-modal { max-width: 460px; }
.aw-body { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.aw-row { display: flex; flex-direction: column; gap: 8px; }
.aw-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
}
.aw-input {
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--fg-1); border-radius: var(--radius-md, 10px);
  padding: 10px 12px; font-size: 0.95rem; width: 100%;
  font-family: inherit;
}
.aw-date-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aw-date-wrap .aw-input { flex: 1; min-width: 150px; }
.aw-chips { display: flex; gap: 6px; }

/* Mode segmented control */
.aw-seg {
  display: flex; gap: 4px; background: var(--bg-2);
  border: 1px solid var(--line-1); border-radius: var(--radius-md, 10px);
  padding: 4px;
}
.aw-seg-btn {
  flex: 1; border: 0; background: transparent; color: var(--fg-2);
  padding: 8px 6px; border-radius: var(--radius-sm, 7px);
  font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: background 0.12s, color 0.12s; white-space: nowrap;
}
.aw-seg-btn.aw-seg-on { background: var(--vital); color: var(--vital-ink); font-weight: 600; }
.aw-hint { color: var(--fg-3); font-size: 0.76rem; margin: -8px 0 0; line-height: 1.4; }

.aw-record { display: flex; justify-content: center; padding: 4px 0; }
.aw-record .voice-btn { width: 100%; }

.aw-text-toggle { border-top: 1px solid var(--line-1); padding-top: 12px; }
.aw-text-toggle summary {
  cursor: pointer; color: var(--fg-2); font-size: 0.85rem; list-style: none;
}
.aw-text-toggle summary::-webkit-details-marker { display: none; }
.aw-text-toggle summary::before { content: '＋ '; color: var(--fg-3); }
.aw-text-toggle[open] summary::before { content: '－ '; }
.aw-textarea {
  width: 100%; margin: 10px 0; background: var(--bg-2);
  border: 1px solid var(--line-2); color: var(--fg-1);
  border-radius: var(--radius-md, 10px); padding: 10px 12px;
  font-size: 0.92rem; font-family: inherit; resize: vertical;
}

.aw-status {
  font-size: 0.85rem; color: var(--fg-2); padding: 10px 12px;
  background: var(--bg-2); border-radius: var(--radius-md, 10px);
  border: 1px solid var(--line-1); line-height: 1.45;
}
.aw-status-ok { border-color: var(--vital); color: var(--fg-1); }
.aw-status-error { border-color: var(--bad); color: var(--bad); }

.aw-collision {
  border: 1px solid var(--line-3); border-radius: var(--radius-md, 10px);
  padding: 12px; background: var(--bg-2);
}
.aw-collision-head { font-size: 0.85rem; color: var(--fg-2); line-height: 1.5; margin-bottom: 12px; }
.aw-collision-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Floating action button variant (unused by default; available) */
.aw-fab {
  position: fixed; right: 18px; bottom: 84px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--vital); color: var(--vital-ink);
  font-size: 1.4rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   EXERCISE DETAIL SHEET — thumb tap → crossfading start/end
   frames + today's prescription + numbered how-to steps
   ============================================================ */
.ex-detail[hidden] { display: none !important; }
.ex-detail {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  /* Touches that start on the dimmed backdrop must not scroll anything. */
  touch-action: none;
}
.ex-detail-content {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  max-height: 92vh; max-height: 92dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* iOS: when the sheet's scroll hits its end, do NOT chain the gesture
     into the page behind (rubber-band bleed). */
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 481px) {
  .ex-detail { align-items: center; }
  .ex-detail-content { border-radius: 20px; }
}
.ex-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ex-detail-cap {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vital);
}

/* Image stage: the FIRST frame is in normal flow and defines the stage
   height (no forced aspect-ratio → no white letterbox bars). The second
   frame stacks absolutely over it and crossfades; both frames of a
   library pair share identical dimensions, so they align exactly. */
.ex-detail-stage {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #fff;
}
.ex-detail-stage[hidden] { display: none !important; }
.ex-detail-img { display: block; width: 100%; height: auto; }
.ex-detail-img-alt {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  opacity: 0; animation: exXfade 3.6s ease-in-out infinite;
}
@keyframes exXfade {
  0%, 38%  { opacity: 0; }
  50%, 88% { opacity: 1; }
  100%     { opacity: 0; }
}
.ex-detail-dots {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center;
}
.ex-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,0.22); }
.ex-dot-alt { position: relative; }
.ex-dot-alt::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--vital); opacity: 0;
  animation: exXfade 3.6s ease-in-out infinite;
}

.ex-detail-title { font-size: 1.55rem; font-weight: 700; color: var(--fg-1); margin: 14px 0 10px; }
.ex-detail-today {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--vital); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 0.88rem; color: var(--fg-1);
}
.ex-detail-today[hidden] { display: none !important; }
.ex-detail-today-cap {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vital); font-weight: 600;
}
.ex-detail-notes {
  border-left: 3px solid var(--vital);
  padding: 2px 0 2px 12px; margin-bottom: 12px;
  color: var(--fg-2); line-height: 1.55; font-size: 0.95rem;
}
.ex-detail-notes[hidden] { display: none !important; }
.ex-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ex-detail-howto[hidden] { display: none !important; }
.ex-detail-steps {
  list-style: none; counter-reset: exstep;
  padding: 0; margin: 12px 0 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ex-detail-steps li {
  counter-increment: exstep; position: relative;
  padding-left: 38px; color: var(--fg-2); line-height: 1.55; font-size: 0.95rem;
}
.ex-detail-steps li::before {
  content: counter(exstep);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px;
  border: 1px solid var(--vital); border-radius: 7px;
  color: var(--vital);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
}

/* ============================================================
   PORTRAIT-ONLY GATE
   iOS can't lock orientation from the web, so when a phone is
   held in landscape we hide the app behind a rotate-back prompt
   rather than reflowing into a broken sideways layout. Gated to
   short viewports (phone landscape ≈ ≤500px tall) so tablets and
   desktop windows are never covered.
   ============================================================ */
.rotate-gate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    background: var(--bg-0, #07080A);
    color: var(--fg-1, #EDEEF2);
  }
  .rotate-gate svg { color: var(--vital, #6EE7A8); }
  .rotate-gate-title { font-size: 1.1rem; font-weight: 700; }
  .rotate-gate-sub { font-size: 0.85rem; color: var(--fg-3, #6B7281); }
  /* Freeze the app underneath so it can't scroll behind the gate. */
  .screen { display: none !important; }
}

/* ============================================================
   CAPACITY INDEX — dashboard card + /fitness deep dive
   Appended last so these rules win over the generic .section /
   .btn cascade above without needing !important anywhere.
   ============================================================ */

/* ── dashboard card ───────────────────────────────────────── */
.cap-card {
  display: block;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(110,231,168,0.07), transparent 60%),
    var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-card);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.cap-card:hover,
.cap-card:focus-visible { border-color: rgba(110,231,168,0.34); }
.cap-card:active { transform: scale(0.995); }

.cap-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
}
.cap-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cap-coverage {
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: var(--bg-3);
  color: var(--fg-3);
}
.cap-score { display: flex; align-items: baseline; gap: var(--s-3); margin-top: 6px; }
.cap-num {
  font-size: 52px;
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.cap-delta { font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.cap-delta-up   { color: var(--vital); }
.cap-delta-down { color: var(--bad); }
.cap-delta-flat { color: var(--fg-3); font-size: 12px; }

.cap-age { text-align: right; font-family: var(--font-mono); }
.cap-age-label {
  display: block; font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
}
.cap-age-value {
  display: block; font-size: 28px; font-weight: 300;
  color: var(--fg-1); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cap-age-sub { display: block; font-size: 10px; color: var(--fg-4); }

.cap-bars { display: flex; flex-direction: column; gap: 7px; margin-top: var(--s-5); }
.cap-bar {
  display: grid;
  grid-template-columns: 78px 1fr 32px;
  gap: var(--s-3);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cap-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-track {
  height: 5px; background: var(--bg-inset);
  border-radius: var(--r-full); overflow: hidden; display: block;
}
.cap-fill        { display: block; height: 100%; background: var(--vital-dim); border-radius: var(--r-full); }
.cap-fill-strong { display: block; height: 100%; background: var(--vital); border-radius: var(--r-full); }
.cap-fill-none   { display: block; height: 100%; background: var(--fg-4); border-radius: var(--r-full); }
.cap-bar-val {
  text-align: right; color: var(--fg-1);
  font-variant-numeric: tabular-nums; font-size: 11px;
}
.cap-bar-val-none { color: var(--fg-4); }

.cap-action {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-1);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}

.cap-card-empty { text-align: left; }
.cap-empty-title { font-size: 18px; margin-top: 8px; color: var(--fg-1); }
.cap-empty-sub { font-size: 13.5px; color: var(--fg-2); margin-top: 6px; line-height: 1.5; }
.cap-empty-cta { margin-top: var(--s-4); font-size: 13px; color: var(--vital); }

/* ── /fitness hero ────────────────────────────────────────── */
.fit-hero {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  justify-content: space-between; align-items: flex-start;
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(110,231,168,0.09), transparent 62%),
    var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: var(--s-6);
}
.fit-hero-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3);
}
.fit-hero-num {
  font-size: 68px; line-height: 0.9; font-weight: 250;
  letter-spacing: -0.04em; color: var(--fg-1);
  font-variant-numeric: tabular-nums; margin: 10px 0 8px;
}
.fit-hero-scale { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; max-width: 30ch; }
.fit-hero-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 150px; }
.fit-stat { display: flex; flex-direction: column; gap: 1px; }
.fit-stat-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-3);
}
.fit-stat-value {
  font-size: 22px; font-weight: 400; color: var(--fg-1);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.fit-mom-up { color: var(--vital); }
.fit-mom-down { color: var(--bad); }
.fit-stat-sub { font-size: 10.5px; color: var(--fg-4); }
.fit-hero-empty { flex-direction: column; }
.fit-hero-empty-title { font-size: 20px; color: var(--fg-1); margin: 8px 0 6px; }
.fit-hero-empty-sub { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; max-width: 46ch; }

.fit-chart-wrap {
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-2); padding: var(--s-4); height: 190px;
}

/* ── pillar accordion ─────────────────────────────────────── */
.fit-pillars { display: flex; flex-direction: column; gap: 1px;
  background: var(--line-1); border: 1px solid var(--line-1);
  border-radius: var(--r-2); overflow: hidden; }
.fit-pillar { background: var(--bg-1); }
.fit-pillar-head {
  display: grid; grid-template-columns: 38px 96px 1fr 42px;
  gap: var(--s-3); align-items: center;
  padding: 13px var(--s-4); cursor: pointer; list-style: none;
}
.fit-pillar-head::-webkit-details-marker { display: none; }
.fit-pillar-head:hover { background: var(--bg-2); }
.fit-pillar-weight {
  font-family: var(--font-mono); font-size: 11px; color: var(--vital-dim);
  font-variant-numeric: tabular-nums;
}
.fit-pillar-name { font-size: 13.5px; color: var(--fg-1); }
.fit-pillar-track { height: 5px; background: var(--bg-inset); border-radius: var(--r-full); overflow: hidden; }
.fit-fill        { display: block; height: 100%; background: var(--vital-dim); border-radius: var(--r-full); }
.fit-fill-strong { display: block; height: 100%; background: var(--vital); border-radius: var(--r-full); }
.fit-fill-none   { display: block; height: 100%; background: var(--fg-4); border-radius: var(--r-full); }
.fit-pillar-index {
  font-family: var(--font-mono); font-size: 12px; text-align: right;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.fit-pillar-missing .fit-pillar-index { color: var(--fg-4); font-size: 10px; }
.fit-pillar-body {
  padding: 0 var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  font-size: 13px; color: var(--fg-2); line-height: 1.55;
}
.fit-pillar-line b { color: var(--fg-1); }
.fit-warn { color: var(--warn); }
.fit-detail-row {
  display: grid; grid-template-columns: 108px auto 1fr; gap: var(--s-3);
  align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line-1);
}
.fit-detail-label { font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.fit-detail-value { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1);
  font-variant-numeric: tabular-nums; }
.fit-detail-note { font-size: 11.5px; color: var(--fg-4); }
.fit-dose {
  background: var(--bg-inset); border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 5px;
}
.fit-dose-head { display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: 12.5px; flex-wrap: wrap; }
.fit-dose-head b { color: var(--fg-1); font-variant-numeric: tabular-nums; }
.fit-dose-delta { font-family: var(--font-mono); font-size: 11px; color: var(--vital-dim); }
.fit-dose-scale { display: flex; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.fit-dose-src { font-size: 10.5px; color: var(--fg-4); }
.fit-pillar-note { font-size: 12px; color: var(--fg-3); font-style: italic; }
.fit-pillar-src { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
  letter-spacing: 0.04em; }

/* ── gaps ─────────────────────────────────────────────────── */
.fit-gaps { display: flex; flex-direction: column; gap: var(--s-2); }
.fit-gap {
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-left: 2px solid var(--warn);
  border-radius: var(--r-1); padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; text-align: left; font-family: inherit;
}
.fit-gap-action { cursor: pointer; }
.fit-gap-action:hover { background: var(--bg-2); }
.fit-gap-head { display: flex; justify-content: space-between; gap: var(--s-3);
  align-items: baseline; flex-wrap: wrap; }
.fit-gap-name { font-size: 13.5px; color: var(--fg-1); }
.fit-gap-weight, .fit-gap-due {
  font-family: var(--font-mono); font-size: 10px; color: var(--warn);
  letter-spacing: 0.05em;
}
.fit-gap-why { font-size: 12px; color: var(--fg-3); line-height: 1.5; }
.fit-allgood {
  background: rgba(110,231,168,0.07); border: 1px solid rgba(110,231,168,0.20);
  border-radius: var(--r-1); padding: var(--s-4);
  font-size: 13.5px; color: var(--vital);
}

/* ── test battery ─────────────────────────────────────────── */
.fit-tests { display: flex; flex-direction: column; gap: var(--s-2); }
.fit-test {
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-2); padding: var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease;
}
.fit-test:hover, .fit-test:focus-visible { border-color: var(--line-3); background: var(--bg-2); }
.fit-test-due { border-left: 2px solid var(--vital); }
.fit-test-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.fit-test-name { font-size: 14.5px; color: var(--fg-1); font-weight: 500; }
.fit-test-pill {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-full);
  background: rgba(110,231,168,0.14); color: var(--vital);
}
.fit-test-next { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); }
/* Deep Coach Review */
.dr-body { line-height: 1.65; }
.dr-body .dr-h1 { font-size: 1.15rem; font-weight: 600; margin: var(--s-4) 0 var(--s-3); color: var(--fg-1); }
.dr-body .dr-h2 { font-size: 0.95rem; font-weight: 600; margin: var(--s-5) 0 var(--s-2); color: var(--fg-1);
  text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); }
.dr-body .dr-h3 { font-size: 0.9rem; font-weight: 600; margin: var(--s-4) 0 var(--s-2); color: var(--fg-2); }
.dr-p { margin: 0 0 var(--s-3); color: var(--fg-2); font-size: 0.92rem; }
.dr-list { margin: 0 0 var(--s-3); padding-left: 1.2em; color: var(--fg-2); font-size: 0.92rem; }
.dr-list li { margin-bottom: 6px; }
.dr-home-link { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.dr-card {
  display: block; text-decoration: none;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line-2); border-left: 3px solid var(--vital, #6EE7A8);
  border-radius: var(--r-2, 10px); padding: 14px 16px;
  background: linear-gradient(135deg, rgba(110,231,168,0.06), transparent 60%), var(--bg-2, rgba(255,255,255,0.02));
  transition: border-color 0.15s ease;
}
.dr-card:hover, .dr-card:focus-visible { border-color: var(--line-3); }
.dr-card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dr-card-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--vital, #6EE7A8);
}
.dr-card-date { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); }
.dr-card-headline { font-size: 15.5px; font-weight: 500; color: var(--fg-1); line-height: 1.4; margin-bottom: 8px; }
.dr-card-cta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; }

.ingest-alert {
  border: 1px solid rgba(224,164,88,0.4); border-left: 3px solid #E0A458;
  background: rgba(224,164,88,0.08); color: var(--fg-2);
  border-radius: var(--r-2, 8px); padding: 10px 14px; font-size: 0.85rem; line-height: 1.5;
}
.ingest-alert strong { color: #E0A458; }

.vitals-trend { font-size: 0.75em; }
.vitals-trend-good { color: var(--vital, #6EE7A8); }
.vitals-trend-bad { color: #E0A458; }

/* Soft fade on htmx body swaps — perceived smoothness without JS work */
@keyframes lars-page-in { from { opacity: 0.35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
body.htmx-added, body[data-page-in] { animation: lars-page-in 0.18s ease-out; }
main, .page-header { animation: lars-page-in 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) { main, .page-header, body[data-page-in] { animation: none; } }

/* Consistent, visible keyboard-focus rings on interactive primitives */
.btn:focus-visible, .nav-item:focus-visible, .fit-test:focus-visible, .more-row:focus-visible {
  outline: 2px solid var(--vital, #6EE7A8); outline-offset: 2px; border-radius: var(--r-1, 8px);
}
.btn { transition: transform 0.1s ease, filter 0.15s ease; }
.btn:active { transform: scale(0.98); }

.zone-gap-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--r-full);
  background: rgba(201,123,90,0.14); color: #C97B5A;
  white-space: nowrap;
}
.zone-gap-ok { background: rgba(110,231,168,0.14); color: var(--vital); }
.fit-test-auto {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--bg-3, rgba(255,255,255,0.06)); color: var(--fg-3);
  border: 1px solid var(--line-2);
}
.fit-test-desc { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
.fit-test-foot {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
  letter-spacing: 0.04em;
}

/* ── instruction modal ────────────────────────────────────── */
.fit-modal[hidden] { display: none; }
.fit-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
}
.fit-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.66); }
.fit-modal-panel {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-4) var(--r-4) 0 0;
  width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-elev);
  animation: fit-slide-up 0.24s ease-out;
}
@keyframes fit-slide-up { from { transform: translateY(3%); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fit-modal-panel { animation: none; } }
@media (min-width: 700px) {
  .fit-modal { align-items: center; padding: var(--s-5); }
  .fit-modal-panel { border-radius: var(--r-3); max-height: 86vh; }
}
.fit-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line-1);
}
.fit-modal-head h3 { margin: 4px 0 0; font-size: 19px; font-weight: 500; color: var(--fg-1); }
.fit-modal-eyebrow {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--vital-dim);
}
.fit-modal-x {
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg-2);
  width: 32px; height: 32px; border-radius: var(--r-full);
  font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.fit-modal-x:hover { background: var(--bg-3); color: var(--fg-1); }
.fit-modal-body {
  overflow-y: auto; padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-5);
  -webkit-overflow-scrolling: touch;
}
.fit-why {
  background: rgba(110,231,168,0.06);
  border-left: 2px solid var(--vital-dim);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  padding: var(--s-3) var(--s-4);
}
.fit-why-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--vital-dim); display: block; margin-bottom: 5px;
}
.fit-why p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.fit-meta-row {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-size: 11.5px; color: var(--fg-3);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-1);
}
.fit-meta-row b { color: var(--fg-1); }
.fit-instr h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 var(--s-3);
}
.fit-instr ul, .fit-instr ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 7px; }
.fit-instr li { font-size: 13px; line-height: 1.55; color: var(--fg-2); }
.fit-instr li::marker { color: var(--fg-4); }
.fit-instr-accuracy li::marker { color: var(--warn); }
.fit-recording {
  font-size: 12.5px; line-height: 1.55; color: var(--fg-3);
  background: var(--bg-inset); border-radius: var(--r-1); padding: var(--s-3) var(--s-4);
}
.fit-log-form { display: flex; flex-direction: column; gap: var(--s-3);
  border-top: 1px solid var(--line-2); padding-top: var(--s-5); }
.fit-log-form h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-3); margin: 0;
}
.fit-unit { color: var(--fg-4); font-style: normal; font-family: var(--font-mono); font-size: 10px; }
.fit-hint { display: block; font-size: 11px; color: var(--fg-4); margin-top: 3px; }
.fit-invalid { display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: 12px; color: var(--fg-3); line-height: 1.45; cursor: pointer; }
.fit-invalid input { margin-top: 2px; accent-color: var(--warn); }
.fit-form-status[hidden] { display: none; }
.fit-form-status {
  font-size: 12.5px; color: var(--fg-2); padding: var(--s-3);
  border-radius: var(--r-1); background: var(--bg-2); line-height: 1.5;
}
.fit-form-status-ok { color: var(--vital); background: rgba(110,231,168,0.08); }
.fit-form-status-error { color: var(--bad); background: rgba(255,123,123,0.08); }
.fit-history { display: flex; flex-direction: column; gap: 1px; }
.fit-history-row {
  display: grid; grid-template-columns: 88px 66px 1fr; gap: var(--s-3);
  padding: 7px 0; border-top: 1px solid var(--line-1);
  font-size: 12px; color: var(--fg-3); align-items: baseline;
}
.fit-history-score { font-family: var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.fit-history-note { font-size: 11.5px; color: var(--fg-4); }

/* ── manual entry + method ────────────────────────────────── */
.fit-manual { display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-2); padding: var(--s-4); }
.fit-method summary { cursor: pointer; list-style: none; }
.fit-method summary::-webkit-details-marker { display: none; }
.fit-method summary::after { content: ' ›'; color: var(--fg-4); }
.fit-method[open] summary::after { content: ' ⌄'; }
.fit-method-body { display: flex; flex-direction: column; gap: var(--s-4);
  font-size: 13px; line-height: 1.65; color: var(--fg-2); margin-top: var(--s-3); }
.fit-method-body p { margin: 0; }
.fit-method-body b { color: var(--fg-1); }
.fit-method-body code {
  font-family: var(--font-mono); font-size: 11.5px; background: var(--bg-inset);
  padding: 2px 5px; border-radius: 3px; color: var(--fg-1);
  display: inline-block; overflow-wrap: anywhere;
}
.fit-sources { display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
  letter-spacing: 0.04em; line-height: 1.6; border-top: 1px solid var(--line-1);
  padding-top: var(--s-3); }

/* Signed measurement input — direction toggle + unsigned magnitude.
   Mobile decimal keypads have no minus key, so the sign is a control
   rather than a character the user has to type. */
.fit-signed-row { flex-wrap: wrap; }
.fit-signed {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.fit-signed .form-input { max-width: 96px; text-align: right; }
.fit-sign-toggle {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--bg-inset);
}
.fit-sign-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.fit-sign-toggle label {
  padding: 7px 13px;
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.fit-sign-toggle label + input + label { border-left: 1px solid var(--line-2); }
.fit-sign-toggle input:checked + label {
  background: var(--vital-dim);
  color: var(--vital-ink);
  font-weight: 600;
}
.fit-sign-toggle input:focus-visible + label {
  outline: 2px solid var(--vital);
  outline-offset: -2px;
}

/* Recent hand-entered measurements — find and undo a mistyped value. */
.fit-entries { display: flex; flex-direction: column; gap: 1px;
  background: var(--line-1); border: 1px solid var(--line-1);
  border-radius: var(--r-2); overflow: hidden; }
.fit-entry {
  background: var(--bg-1); padding: var(--s-3) var(--s-4);
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3);
  align-items: center;
}
.fit-entry-main { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.fit-entry-label { font-size: 13.5px; color: var(--fg-1); }
.fit-entry-value {
  font-family: var(--font-mono); font-size: 13px; color: var(--vital);
  font-variant-numeric: tabular-nums;
}
.fit-entry-meta {
  grid-column: 1; display: flex; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
  letter-spacing: 0.04em;
}
.fit-entry-fixed { color: var(--warn); }
.fit-entry-del {
  grid-column: 2; grid-row: 1 / span 2;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--fg-3); border-radius: var(--r-full);
  padding: 5px 12px; font-size: 11.5px; font-family: inherit; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.fit-entry-del:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.fit-entry-del:disabled { opacity: 0.4; cursor: default; }

/* ════════════════════════════════════════════════════════════════════════
   LAYER 10 · READABILITY (presbyopia pass)
   Appended last so the cascade wins over every earlier layer.
   Design rules:
     · nothing user-facing below 12px; standard mono label = 13px
     · key numbers ≥ 22px, tabular-nums, line-height 1
     · tracking falls as size rises (0.16em@10px → 0.08em@13px)
     · muted text ≥ --fg-2 contrast; --fg-3/--fg-4 lightened
     · every tap target ≥ 44px
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* type scale (px on purpose: deterministic floor, immune to root-rem compounding) */
  --fs-micro: 12px;   /* absolute floor — non-interactive chips/status */
  --fs-cap: 13px;     /* standard mono micro-label */
  --fs-sm: 15px;      /* secondary text, metas, descriptions */
  --fs-body: 17px;    /* body */
  --fs-lg: 19px;      /* emphasized body */
  --fs-h2: 21px;
  --fs-h1: 24px;
  --fs-num-m: 26px;   /* vitals, stat values, set counter */
  --fs-num-l: 44px;
  --fs-num-xl: 64px;  /* capacity score */
  --fs-num-hero: 76px;/* fitness hero */

  /* contrast pass: was #6B7281 (≈4.0:1 on --bg-1) / #444B57 (≈2.0:1) */
  --fg-3: #8C94A6;    /* ≈6.3:1 on --bg-1 */
  --fg-4: #767E8F;    /* ≈4.7:1 on --bg-1 */

  --border-color: var(--line-2); /* was referenced but never defined */

  /* fixed-chrome heights, referenced by every offset that used to hardcode them */
  --topbar-h: 64px;
  --nav-h: 84px;
}

/* base: 15px → 17px. All rem-declared legacy sizes grow ×1.133 with it. */
html { font-size: 17px; }

/* ── global fixes ─────────────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--fg-2); }
.muted-block { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; }

/* the .t-* utilities finally earn their keep (used to replace inline styles) */
.t-cap  { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.t-sm   { font-size: var(--fs-sm); color: var(--fg-2); }
.t-body { font-size: var(--fs-body); color: var(--fg-2); }
.t-h1   { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.02em; }
.t-h2   { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.015em; }
.t-num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-num-xl { font-size: var(--fs-num-xl); font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-num-lg { font-size: 32px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.t-num-md { font-size: var(--fs-num-m); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }

/* ── the mono micro-label system: 9–11px → 13px, tracking 0.16→0.08 ───── */
.section-h3, .section-title, .t-cap,
.cap-label, .cap-age-label,
.fit-hero-label, .fit-stat-label, .fit-modal-eyebrow, .fit-why-label,
.fit-instr h4, .fit-log-form h4,
.dr-card-label, .plan-rationale-label, .coach-brief-label,
.workout-gym-label, .aw-label, .ex-detail-cap, .ex-detail-today-cap,
.warmup-label, .vitals-label,
.metric-tile-label .label, .bubble-meta, .daycell .dayname,
.audit-stage, .audit-trail-head, .diag-stat-label,
.assessment-card h3, .auto-adjust-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.section-h3 { color: var(--fg-3); }
.section-h3-row { align-items: center; gap: 10px; }
.section-h3-row .muted { font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--fg-3); letter-spacing: 0.05em; }
.section-link { font-size: 14px; }

/* informational chips & quiet metas: floor 12px, they stay small but legible */
.pill, .badge,
.fit-test-pill, .fit-test-auto, .fit-test-next, .fit-test-foot,
.zone-gap-chip, .cap-coverage, .cap-age-sub, .fit-stat-sub,
.unplanned-zone, .sdr-status, .schedule-day-status,
.week-row-dow, .sdr-dow, .set-counter-label,
.dr-card-date, .goal-pct, .goal-delta, .goal-baseline, .goal-target,
.fit-gap-weight, .fit-gap-due, .fit-dose-scale, .fit-dose-src, .fit-pillar-src,
.workout-tag, .fit-pillar-missing .fit-pillar-index {
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
}
.zone-gap-chip { padding: 4px 10px; line-height: 1.35; }

/* ── page chrome ──────────────────────────────────────────────────────── */
.page-header h1 { font-size: 28px; letter-spacing: -0.02em; }
.subtitle { font-size: var(--fs-sm); color: var(--fg-2); }

.topbar-brand { font-size: 14px; letter-spacing: 0.14em; }

.bottom-nav {
  background: color-mix(in srgb, var(--bg-0) 82%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  padding-top: 8px;
}
.bottom-nav .nav-item {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 48px;
  justify-content: center;
  color: var(--fg-3);
}
.bottom-nav .nav-item .ic { width: 25px; height: 25px; }
.screen-body { padding-bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + var(--nav-h))); }

/* build chip: out of the nav, above it, legible */
.build-chip {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 6px);
  font-size: var(--fs-micro);
  color: var(--fg-4);
  z-index: 55;
}

/* buttons & forms */
.btn { min-height: 46px; font-size: 16px; }
.btn-sm { min-height: 44px; font-size: 14px; padding: 8px 14px; }
.btn-lg { min-height: 54px; font-size: 18px; }
.btn-icon { width: 44px; height: 44px; font-size: 18px; }
.form-input { font-size: var(--fs-body); min-height: 48px; }
select.form-input, .workout-gym-select, .sdr-gym { min-height: 44px; font-size: var(--fs-sm); }
textarea.form-input { min-height: 72px; }
.profile-tab { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.empty-state-text { font-size: var(--fs-sm); }
.empty-state-hint { font-size: 14px; }

/* ═══ HOME ═══════════════════════════════════════════════════════════── */

/* capacity card */
.cap-num { font-size: var(--fs-num-xl); font-weight: 320; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cap-delta { font-size: var(--fs-sm); }
.cap-delta-flat { font-size: 14px; }
.cap-coverage { font-size: var(--fs-micro); }
.cap-age-value { font-size: 32px; font-weight: 350; font-variant-numeric: tabular-nums; }
.cap-age-sub { color: var(--fg-4); }
.cap-bar {
  grid-template-columns: 94px 1fr 42px;
  font-size: var(--fs-cap);
  letter-spacing: 0.05em;
  gap: 10px;
  min-height: 24px;
  align-items: center;
}
.cap-bar-val { font-size: 14px; }
.cap-track { height: 6px; border-radius: 3px; }
.cap-fill, .cap-fill-strong, .cap-fill-none { border-radius: 3px; }
.cap-action { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.5; }

/* ingest alert */
.ingest-alert { font-size: var(--fs-sm); line-height: 1.5; }

/* deep review card */
.dr-card-headline { font-size: var(--fs-body); line-height: 1.45; }
.dr-card-cta { font-size: var(--fs-cap); font-family: var(--font-mono); letter-spacing: 0.05em; }

/* coach brief */
.coach-brief-text { font-size: 16px; line-height: 1.6; }
.coach-brief-reply summary { font-size: 14px; min-height: 44px; display: flex; align-items: center; }

/* zones — tick marks + amber over-target semantics untouched, just bigger */
.zone-row { grid-template-columns: 96px 1fr auto; gap: 10px; }
.zone-label { font-size: var(--fs-sm); }
.zone-bar { height: 12px; border-radius: 6px; }
.zone-bar-fill { border-radius: 6px; }
.zone-bar-tick { width: 2.5px; }
.zone-val { font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.zone-val .muted { font-size: var(--fs-cap); font-weight: 500; }

/* vitals: 2-up grid, number-first cells */
.vitals-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vitals-cell { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--r-2); padding: 12px 14px; }
.vitals-label { color: var(--fg-3); margin-bottom: 4px; }
.vitals-value { font-size: 24px; font-weight: 550; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.vitals-value .vitals-sub { font-size: 14px; font-weight: 450; color: var(--fg-2); }
.vitals-trend { font-size: 0.62em; vertical-align: 2px; }

/* weekly targets — ▲ over-target stays amber, everything bigger */
.target-cat-label { font-size: var(--fs-sm); }
.target-cat-val { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.target-cat-val .muted { font-size: 14px; font-weight: 500; }
.target-bar { height: 8px; border-radius: 4px; }
.target-bar-fill { border-radius: 4px; }
.targets-detail summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; }
.tm-label, .tm-val { font-size: var(--fs-cap); }

/* unplanned activity */
.unplanned-row { font-size: 14px; min-height: 40px; align-items: center; }
.unplanned-day { font-size: var(--fs-cap); }

/* tests due */
.test-due-row { min-height: 56px; }
.test-due-name { font-size: 16px; }
.test-due-sub { font-size: var(--fs-cap); color: var(--fg-3); }

/* week strip */
.week-row { grid-template-columns: 30px 58px 1fr auto; min-height: 56px; }
.week-row-dow { color: var(--fg-3); }
.week-row-date { font-size: 21px; font-weight: 550; font-variant-numeric: tabular-nums; }
.week-row-type { font-size: 16px; }
.week-row-dur { font-size: 14px; color: var(--fg-2); }

/* goals */
.goal-label { font-size: var(--fs-sm); }
.goal-current { font-size: var(--fs-h1); font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-meta { font-size: var(--fs-cap); color: var(--fg-3); }

/* plan + calendar cards */
.plan-block-index { font-size: var(--fs-cap); }
.plan-block-name { font-size: var(--fs-body); font-weight: 600; }
.plan-block-week { font-size: 14px; }
.plan-block-focus { font-size: var(--fs-sm); line-height: 1.5; }
.plan-meta { font-size: var(--fs-cap); color: var(--fg-3); }
.calendar-summary-label { font-size: 14px; }
.calendar-summary-value { font-size: var(--fs-sm); font-weight: 550; }

/* ═══ WORKOUT DETAIL — new defaults (gym mode goes further below) ═════── */

/* fixes a live clipping bug: the old -16px side margins bled past a
   parent that has no padding, cutting the title at the viewport edge */
.workout-sticky-header {
  top: max(var(--topbar-h), calc(env(safe-area-inset-top, 14px) + 50px));
  gap: 8px;
  margin: -16px 0 16px;
  padding: 12px 16px;
}
.workout-sticky-left { min-width: 0; }
.workout-sticky-title {
  font-size: 17px; font-weight: 650; line-height: 1.2;
  white-space: normal; overflow: visible;
}
.workout-sticky-sub { font-size: var(--fs-micro); font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--fg-3); white-space: nowrap; }
.workout-sticky-right { gap: 6px; flex-shrink: 0; }
.freeze-chip { width: 44px; height: 44px; font-size: 18px; }
.unit-chip { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.06em; }
.set-counter { padding: 8px 10px; }
.set-counter-num { font-size: 22px; font-weight: 650; }
.set-counter-target, .set-counter-sep { font-size: 15px; }

.gymmode-chip { color: var(--fg-2); border-color: var(--line-3); }
html.gym .gymmode-chip { background: var(--vital); border-color: var(--vital); color: var(--vital-ink); }

.plan-rationale-text { font-size: var(--fs-sm); line-height: 1.55; }
.workout-meta-collapsed summary { font-size: var(--fs-sm); min-height: 44px; display: flex; align-items: center; }
.workout-meta-focus, .workout-meta-warmup { font-size: var(--fs-sm); line-height: 1.5; }
.workout-gym-strip { align-items: center; }

.exercise-card-title { font-size: var(--fs-h1); font-weight: 650; line-height: 1.12; letter-spacing: -0.015em; }
.exercise-card-target { font-size: 16px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ex-chip { font-size: var(--fs-micro); padding: 3px 9px; }
.exercise-card-controls .btn-icon { width: 44px; height: 44px; font-size: 18px; }
.exercise-card-controls .vote-btn { width: 44px; height: 44px; }

.ex-set-header { font-size: var(--fs-cap); font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--fg-3); }
.ex-set-header, .ex-set-row { grid-template-columns: 44px 1fr 1fr 60px; gap: 10px; }
.ex-set-n { font-size: var(--fs-body); font-family: var(--font-mono); color: var(--fg-3); }
.ex-set-row { min-height: 56px; align-items: center; }
.ex-set-input {
  font-size: 22px; font-weight: 600; min-height: 52px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.ex-set-input::placeholder { font-weight: 450; }
.ex-set-check { width: 52px; height: 52px; border-radius: 13px; font-size: 21px; }
.ex-set-actions .btn { min-height: 44px; }

/* the ⋯ reveal exists only in gym mode */
.ex-more-btn { display: none; }

/* ── GYM MODE: XXL set logging + hidden secondary chrome ─────────────── */
html.gym .workout-gym-strip,
html.gym .exercise-card-meta,
html.gym .exercise-card-controls { display: none; }
html.gym .exercise-card.ex-controls-open .exercise-card-controls { display: flex; }
html.gym .exercise-card { position: relative; }
html.gym .exercise-card-head-body { padding-right: 44px; }
html.gym .ex-more-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 8px; right: 8px;
}

html.gym .exercise-card-title { font-size: 28px; }
html.gym .exercise-card-target { font-size: var(--fs-lg); color: var(--fg-1); }
html.gym .exercise-card-thumb { width: 56px; height: 56px; }

html.gym .ex-set-header, html.gym .ex-set-row { grid-template-columns: 36px 1fr 1fr 72px; gap: 10px; }
html.gym .ex-set-n { font-size: var(--fs-lg); }
html.gym .ex-set-row { min-height: 72px; }
html.gym .ex-set-input { font-size: 28px; min-height: 64px; }
html.gym .ex-set-check { width: 68px; height: 64px; border-radius: 14px; font-size: 26px; }
html.gym .set-counter-num { font-size: 26px; }
html.gym .plan-rationale-card { display: none; }
html.gym .workout-meta-collapsed { display: none; }

/* ═══ FITNESS ═══════════════════════════════════════════════════════── */

.fit-hero { display: block; }
.fit-hero-num { font-size: var(--fs-num-hero); font-weight: 300; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.fit-hero-scale { font-size: var(--fs-cap); color: var(--fg-3); }
.fit-hero-side {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-1);
}
.fit-stat { display: flex; flex-direction: column; gap: 3px; }
.fit-stat-value { font-size: var(--fs-num-m); font-weight: 550; font-variant-numeric: tabular-nums; }
.fit-stat-sub { color: var(--fg-4); font-size: var(--fs-micro); letter-spacing: 0; line-height: 1.35; }

.fit-pillar-head { grid-template-columns: 46px minmax(96px, auto) 1fr 48px; gap: 10px; min-height: 52px; align-items: center; }
.fit-pillar-weight { font-size: var(--fs-cap); }
.fit-pillar-name { font-size: var(--fs-sm); }
.fit-pillar-index { font-size: 14px; }
.fit-pillar-track { height: 6px; border-radius: 3px; }
.fit-pillar-line { font-size: var(--fs-sm); line-height: 1.5; }
.fit-detail-label { font-size: var(--fs-cap); }
.fit-detail-value { font-size: var(--fs-sm); font-weight: 550; }
.fit-detail-note { font-size: var(--fs-cap); color: var(--fg-3); }
.fit-pillar-note { font-size: 14px; line-height: 1.5; }

.fit-gap-name { font-size: 16px; }
.fit-gap-why { font-size: 14px; color: var(--fg-2); line-height: 1.45; }
.fit-gap { min-height: 56px; }

.fit-test { min-height: 88px; }
.fit-test-name { font-size: var(--fs-body); font-weight: 600; }
.fit-test-desc { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.45; }
.fit-test-pill, .fit-test-auto { padding: 3px 9px; }

/* fitness modals: roomier, scrollable, 48px inputs */
.fit-modal-panel { max-height: min(90dvh, 860px); padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
.fit-modal-body { overflow-y: auto; }
.fit-modal-head h3 { font-size: var(--fs-h2); }
.fit-modal-x { width: 44px; height: 44px; font-size: 24px; }
.fit-why p { font-size: var(--fs-sm); line-height: 1.55; }
.fit-meta-row { font-size: 14px; }
.fit-instr li { font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 6px; }
.fit-recording { font-size: 14px; }
.form-row { gap: 8px; }
.form-row > span { font-size: 14px; }
.fit-unit { font-size: var(--fs-micro); }
.fit-hint { font-size: var(--fs-micro); color: var(--fg-3); }
.fit-invalid { font-size: 14px; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.fit-history-row { font-size: 14px; min-height: 36px; align-items: center; }
.fit-history-score { font-size: var(--fs-sm); font-weight: 600; }
.fit-history-note { font-size: var(--fs-cap); color: var(--fg-3); }
.fit-form-status { font-size: 14px; }

.fit-entry-label { font-size: var(--fs-sm); }
.fit-entry-value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fit-entry-meta { font-size: var(--fs-cap); color: var(--fg-3); }
.fit-entry-del { min-height: 44px; font-size: 14px; }
.fit-allgood { font-size: var(--fs-sm); }
.fit-method-body { font-size: var(--fs-sm); line-height: 1.6; }
.fit-method-body code { font-size: 14px; }
.fit-sources { font-size: var(--fs-micro); color: var(--fg-4); }
.fit-chart-wrap { min-height: 140px; }

/* ═══ SCHEDULE / REVIEW / COACH / MORE (foundation; refined at impl.) ══ */

.sdr-dow { color: var(--fg-3); }
.sdr-num { font-size: 24px; font-variant-numeric: tabular-nums; }
.sdr-type { font-size: var(--fs-body); }
.sdr-meta { font-size: 14px; }
.sdr-status { font-size: var(--fs-micro); }
.schedule-week-title { font-size: var(--fs-sm); }

.dr-p, .dr-body p, .dr-list li { font-size: var(--fs-body); line-height: 1.6; }
.dr-h1 { font-size: var(--fs-h2); }
.dr-h2 { font-size: var(--fs-sm); font-family: var(--font-mono); letter-spacing: 0.06em; }
.dr-h3 { font-size: var(--fs-sm); }

.chat-bubble { font-size: var(--fs-body); line-height: 1.55; }
.chat-input { font-size: var(--fs-body); min-height: 48px; }

.more-row { min-height: 58px; font-size: var(--fs-body); align-items: center; }
.more-row .muted { font-size: 14px; }
.more-row-arrow { font-size: 20px; }

/* Banners with a trailing action: the unclassed text block between icon
   and button had min-width:auto, so long copy pushed the button past the
   375px edge (overflow-x is clipped, leaving it half-tappable). Text
   shrinks and wraps; the action never leaves the screen. */
.reconciled-banner > div:not(.reconciled-icon),
.refit-banner .refit-banner-body,
.calendar-conflict-banner > div:not(.calendar-conflict-icon),
.auto-adjust-banner .auto-adjust-body,
.intake-banner .intake-banner-body {
  min-width: 0;
  overflow-wrap: break-word;
}
.reconciled-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.reconciled-banner .btn,
.refit-banner .btn { flex-shrink: 0; min-height: 44px; }
.reconciled-banner .reconciled-title { font-size: var(--fs-sm); }
.reconciled-banner .reconciled-sub { font-size: 13px; color: var(--fg-2); }

/* phone breakpoint: re-assert floors against legacy ≤480px shrink rules */
@media (max-width: 480px) {
  .zone-label { font-size: var(--fs-sm); }
  .unplanned-row { font-size: 14px; }
  .sdr-status { font-size: var(--fs-micro); }
  .sdr-meta { font-size: 14px; }
  .set-counter-label { display: inline; } /* legacy hid it <=480px */
  .exercise-card-title { font-size: var(--fs-h1); }
  html.gym .exercise-card-title { font-size: 28px; }
  .ex-set-input { font-size: 22px; }
  html.gym .ex-set-input { font-size: 28px; }
  .ex-set-check { width: 52px; height: 52px; }
  .cap-bar { grid-template-columns: 88px 1fr 40px; }
}