/*
 * Standard breakpoints — use ONLY these three values in new media queries:
 *   640px  — mobile/small
 *   900px  — tablet/medium
 *   1200px — wide/large
 * CSS custom properties cannot be used inside @media rules, so these are
 * documented here as a reference comment only.
 */

/*
 * ============================================================
 * CANONICAL PRIMITIVE CATALOG
 * ============================================================
 * All pages are assembled exclusively from these building blocks.
 * Do not invent new one-off classes — extend this catalog instead.
 *
 * TOKENS
 *   All design tokens are --wp-*; see :root {} block below.
 *
 * BREAKPOINTS
 *   640px  — mobile/small
 *   900px  — tablet/medium
 *   1200px — wide/large
 *
 * ------------------------------------------------------------
 * CANONICAL PRIMITIVES
 * ------------------------------------------------------------
 *
 * Cards (containers)
 *   .card                  — base card surface
 *   .card--coach           — coach-themed card variant
 *   .card--panel           — panel/sidebar card variant
 *
 * Status badges (pills)
 *   .wp-pill               — base pill
 *   .wp-pill--muted        — neutral / inactive
 *   .wp-pill--success      — positive / complete
 *   .wp-pill--warning      — caution
 *   .wp-pill--danger       — error / critical
 *   .wp-pill--info         — informational
 *   .wp-pill--accent       — highlighted / branded
 *
 * Alert strips (banners)
 *   .wp-banner-info        — informational banner
 *   .wp-banner-warning     — warning banner
 *   .wp-banner-danger      — error/danger banner
 *   .wp-banner-success     — success banner
 *
 * Buttons
 *   .btn-primary           — primary action
 *   .btn-secondary         — secondary action
 *   .btn-danger            — destructive action
 *   .btn-ghost             — low-emphasis action
 *
 * Form controls
 *   .wp-input              — text input
 *   .wp-select             — select dropdown
 *
 * Transient feedback (toasts)
 *   .wp-toast              — toast container (hidden by default)
 *   .wp-toast--visible     — makes toast visible
 *   .wp-toast--warning     — warning color variant
 *
 * Loading
 *   .wp-spinner            — spinning loading indicator
 *
 * Tooltips
 *   .wp-term               — glossary tooltip (dotted underline)
 *
 * Progress indicators
 *   .wp-progress-bar / .wp-progress-fill / .wp-progress-fill--{success,danger,muted} — generic progress bar
 *   .ramp-progress-bar     — ramp/load progress bar
 *
 * Data tables
 *   .wp-table              — base table primitive
 *   .wp-table-container    — responsive scroll wrapper
 *   .wp-table thead/tbody/th/td — table sub-elements
 *
 * Collapsible sections
 *   .wp-details            — generic collapsible <details>
 *   .session-fit-details   — session-fit collapsible variant
 *
 * List groups
 *   .wp-list-group         — list group container
 *   .wp-list-group__item   — individual list item
 *
 * Milestone overlay
 *   .wp-celebration        — full-screen celebration overlay
 *   .wp-confetti           — confetti animation container
 *
 * ------------------------------------------------------------
 * LAYOUT HELPERS
 * ------------------------------------------------------------
 *
 * Flex utilities
 *   .wp-flex               — display: flex
 *   .wp-flex-col           — flex-direction: column
 *   .wp-flex-center        — flex + center alignment
 *   .wp-gap-xs / -sm / -md / -lg  — gap spacing scale
 *
 * KPI grid
 *   .wp-stat-grid          — auto-fit responsive stat/KPI grid
 *
 * Display utilities
 *   .wp-hidden             — display: none
 *   .wp-block              — display: block
 *   .wp-inline-block       — display: inline-block
 *   .wp-w-full             — width: 100%
 *
 * ------------------------------------------------------------
 * JINJA MACROS — app/templates/_macros.html
 * ------------------------------------------------------------
 *   flash_messages()                          — renders flash message list
 *   banner(variant)                           — semantic alert strip
 *   status_badge(text, variant)               — pill badge
 *   card_section()                            — card wrapper section
 *   empty_state(icon, title, text, link)      — empty-state placeholder
 *   stat_card(value, label)                   — KPI stat card
 *   info_box(variant, icon, title)            — info/warning/danger box
 *   step_nav(...)                             — multi-step navigation
 * ============================================================
 */

/* ═══════════════════════════════════════════════════════════════════
 * DEPRECATION NOTICE — --wp-* token namespace
 * ═══════════════════════════════════════════════════════════════════
 *
 * The --wp-* tokens below are the original design system (v1).
 * New code should use --color-* tokens defined in the v2 block further
 * down this file. The following families are FULLY MIGRATED — any new
 * usage will fail the CI linter (scripts/lint_css_tokens.py):
 *
 *   Migrated → use instead:
 *   --wp-warning-*     → --color-warning-*
 *   --wp-danger-*      → --color-danger-*
 *   --wp-success-*     → --color-success-*
 *   --wp-info-*        → --color-info-*
 *   --wp-text-primary  → --color-text-primary
 *   --wp-text-secondary→ --color-text-secondary
 *   --wp-text-muted    → --color-text-tertiary
 *   --wp-brand         → --color-primary
 *   --wp-brand-subtle  → --color-primary-wash
 *   --wp-surface-page  → --color-surface-page
 *   --wp-surface-card  → --color-surface-card
 *   --wp-surface-nav   → --color-surface-nav
 *   --wp-surface-muted → --color-surface-muted
 *
 *   Not yet migrated (use --space-* for new code, --wp-space-* still works):
 *   --wp-space-*       → --space-xs/sm/md/lg/xl (layout spacing spec defined)
 *   --wp-weight-*      (all clamped to 400/500 — safe to keep using)
 *   --wp-text-sm/base/xs/lg/... (font sizes — layout spec not yet defined)
 *   --wp-radius-*      (border-radius — use --radius-* tokens instead)
 *   --wp-leading-*     (line-height primitives)
 *   --wp-z-*           (z-index stack)
 *   --wp-skill-accent  (domain-specific, no spec equivalent)
 *   --wp-blog-*        (blog/science digest — separate styling context)
 *   --wp-format-*      (workout format chips — domain-specific)
 *   --wp-countdown-*   (countdown widget — domain-specific)
 *
 * Do not add new --wp-* token definitions or usages without discussion.
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
 * TOKEN QUICK-REFERENCE — use these; never hardcode raw values
 *
 * BORDER RADIUS
 *   --radius-inset:     4px   — tight insets, tags, chips
 *   --radius-element:   8px   — buttons, inputs, cards-within-cards
 *   --radius-container: 12px  — modals, page cards, panels
 *   --radius-pill:      999px — badge pills, toggles
 *   50% is also allowed for circles only
 *
 * BORDERS
 *   --border-default:   0.5px solid (subtle, most dividers)
 *   --border-emphasis:  0.5px solid (slightly stronger, active states)
 *   --border-accent:    0.5px solid (primary colour, focused inputs)
 *   --border-danger:    0.5px solid (error states)
 *   Never use 1px or 2px borders; never hardcode border colours.
 *
 * FONT WEIGHT
 *   400 (normal) and 500 (medium) only.
 *   600/700/800/bold are blocked by the lint gate.
 *   Use --wp-weight-normal (400) / --wp-weight-medium (500) tokens.
 *
 * LINE HEIGHT
 *   --wp-leading-none:    1      — display numbers, single-line hero text
 *   --wp-leading-tight:   1.25   — headings
 *   --wp-leading-snug:    1.375  — sub-headings, labels
 *   --wp-leading-normal:  1.5    — body copy (default)
 *   --wp-leading-relaxed: 1.625  — long-form / prose
 *   Raw values 1, 1.1, 1.2 also allowed; anything else needs lint-ignore.
 *
 * COLOURS — always use var(--color-*); never hardcode hex in rules.
 *   Surface:  --color-surface-page / -card / -nav / -input / -muted
 *   Text:     --color-text-primary / -secondary / -tertiary
 *   Semantic: --color-success / -warning / -danger / -info / -primary
 *   Light-mode overrides live in html:not(.wp-dark) { … } below.
 *
 * BOX SHADOW — not allowed except with /* lint-ignore *\/
 *   Use none, or add an explicit comment justifying the exception.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  --wp-space-xs: var(--space-xs, 4px);
  --wp-space-sm: var(--space-sm, 8px);
  --wp-space-md: var(--space-md, 16px);
  --wp-space-lg: var(--space-lg, 24px);
  --wp-space-xl: var(--space-xl, 32px);

  --wp-surface-page: #f1f5f9;
  --wp-surface-card: #ffffff;
  --wp-surface-nav: #1a1a2e;
  --wp-surface-muted: #e9ecef;

  --wp-border-default: #dee2e6;
  --wp-border-light: #ced4da;

  --wp-text-primary: #212529;
  --wp-text-secondary: #495057;
  --wp-text-muted: #6c757d;
  --wp-text-inverse: #ffffff;

  --accent: #5DCAA5;
  --accent-hover: #4db892;

  --wp-accent: #1a1a2e;
  --wp-accent-hover: #2d2d4e;

  --wp-success: #28a745;
  --wp-success-bg: #d4edda;
  --wp-success-dark: #1b5e20;
  --wp-warning: #fd7e14;
  --wp-warning-bg: #fff3cd;
  --wp-warning-text: #856404;
  --wp-warning-dark: #e65100;
  --wp-warning-border: #ffc107;
  --wp-warning-hover: #6d5303;
  --wp-danger: #dc3545;
  --wp-danger-bg: #f8d7da;
  --wp-info: #1565c0;

  /* Shape language — semantic radius tokens */
  --radius-inset:     4px;
  --radius-element:   8px;
  --radius-container: 12px;
  --radius-pill:      999px;

  /* Brand shadow (used by primary buttons) */
  --wp-shadow-brand: 0 1px 3px rgba(59, 130, 246, 0.3);
  --wp-shadow-brand-hover: 0 2px 8px rgba(59, 130, 246, 0.35);

  /* Focus ring (used by all interactive elements) */
  --wp-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);

  /* Daily quote block */
  --wp-daily-quote-bg-from: #fef3c7;
  --wp-daily-quote-bg-to: #fde68a;
  --wp-daily-quote-border: #fcd34d;
  --wp-daily-quote-text: #78350f;
  --wp-daily-quote-author: #92400e;

  /* DEPRECATED — no direct equivalent in --wp-text-* scale; keep until type reset */
  --wp-font-sm: 0.82rem;
  /* DEPRECATED — no direct equivalent in --wp-text-* scale; keep until type reset */
  --wp-font-base: 0.9rem;
  /* DEPRECATED — use --wp-text-sm (0.875rem) instead */
  --wp-font-md: 0.95rem;
  /* DEPRECATED — use --wp-text-base (1rem) instead */
  --wp-font-lg: 1rem;

  /* Interactive / brand */
  --wp-interactive: #0d6efd;
  --wp-interactive-bg: #e8f0fe;
  --wp-interactive-border: #b6d4fe;

  /* Nav surface */
  --wp-surface-nav-border: #3a3a5e;
  --wp-text-nav: #e0e0e0;
  --wp-text-nav-active: #ffffff;

  /* Info status */
  --wp-info-text: #1565c0;
  --wp-info-bg: #e3f2fd;
  --wp-info-border: #90caf9;

  /* Role badges */
  --wp-role-admin: #4caf50;
  --wp-role-coach: #00897b;
  --wp-role-athlete: #6c757d;

  /* Neutral palette */
  --wp-neutral-400: #adb5bd;
  --wp-neutral-500: #6c757d;

  /* Typography scale */
  --wp-text-xs: 0.75rem;
  --wp-text-sm: 0.875rem;
  --wp-text-base: 1rem;
  --wp-text-lg: 1.125rem;
  --wp-text-xl: 1.25rem;
  --wp-text-2xl: 1.5rem;
  --wp-text-3xl: 1.875rem;

  --wp-leading-none: 1;
  --wp-leading-tight: 1.25;
  --wp-leading-snug: 1.375;
  --wp-leading-normal: 1.5;
  --wp-leading-relaxed: 1.625;

  --wp-weight-normal: 400;
  --wp-weight-medium: 500;
  --wp-weight-semibold: 500;
  --wp-weight-bold: 500;
  --wp-weight-extrabold: 500;

  /* Shadows — decorative shadows set to none per design system */
  --wp-shadow-xs: none;
  --wp-shadow-sm: none;
  --wp-shadow-md: none;
  --wp-shadow-lg: none;
  --wp-shadow-nav: 0 2px 4px rgba(0,0,0,0.2);

  /* Motion */
  --wp-duration-fast: 0.1s;
  --wp-duration-base: 0.15s;
  --wp-duration-slow: 0.3s;
  --wp-duration-slower: 0.4s;
  --wp-transition-colors: background var(--wp-duration-base), color var(--wp-duration-base), border-color var(--wp-duration-base);
  --wp-transition-transform: transform var(--wp-duration-base) ease;
  --wp-transition-opacity: opacity var(--wp-duration-slow);

  /* Layout */
  --nav-height: 3rem;

  /* Z-index scale */
  --wp-z-base: 1;
  --wp-z-above: 10;
  --wp-z-sticky: 100;
  --wp-z-nav: 200;
  --wp-z-dropdown: 300;
  --wp-z-modal: 1000;
  --wp-z-overlay: 9999;
  --wp-z-topbar: 9000;

  /* Additional semantic tokens */
  --wp-surface-page-alt: #fdfdfd;
  --wp-success-text: #155724;
  --wp-danger-text: #721c24;
  --wp-interactive-hover: #0b5ed7;

  /* Brand accent */
  --wp-brand: #3b82f6;
  --wp-brand-hover: #2563eb;
  --wp-brand-subtle: #eff6ff;

  /* Coach / strategy surface */
  --wp-coach-surface: #fefce8;
  --wp-coach-border: #fde68a;

  /* Format badges */
  --wp-format-emom-bg: #dbeafe;
  --wp-format-emom-text: #1d4ed8;
  --wp-format-superset-bg: #fef3c7;
  --wp-format-superset-text: #92400e;
  --wp-format-circuit-bg: #dcfce7;
  --wp-format-circuit-text: #166534;
  --wp-format-build-to-bg: #fce7f3;
  --wp-format-build-to-text: #9d174d;

  /* Logged row */
  --wp-logged-bg: #f6fef6;
  --wp-logged-border: #c3e6cb;

  /* Streak heatmap intensity */
  --wp-streak-0-bg: #f1f5f9;
  --wp-streak-0-text: #94a3b8;
  --wp-streak-1-bg: #bbf7d0;
  --wp-streak-1-text: #166534;
  --wp-streak-2-bg: #86efac;
  --wp-streak-2-text: #166534;
  --wp-streak-3-bg: #4ade80;
  --wp-streak-3-text: #065f46;
  --wp-streak-4-bg: #6ee7b7;
  --wp-streak-4-text: #064e3b;

  /* Spinner */
  --wp-spinner-track: #e5e7eb;
  --wp-spinner-head: #6b7280;

  /* Skill accent */
  --wp-skill-accent: #7c3aed;

  /* Domain L1 colors */
  --wp-l1-strength: #ef4444;
  --wp-l1-engine: #3b82f6;
  --wp-l1-gymnastics: #8b5cf6;

  /* Goals strip (dark-bg component) */
  --wp-goals-strip-heading: #a0b4d6;
  --wp-goals-strip-secondary: #7a8fa6;
  --wp-goals-strip-detail: #8fa3c0;
  --wp-goals-strip-achieved: #4ade80;
  --wp-goals-dose-bg: #e0f2f1;
  --wp-goals-dose-text: #004d40;

  /* Blog components */
  --wp-blog-meta: #9ca3af;
  --wp-blog-code-bg: #f3f4f6;
  --wp-blog-blockquote-bg: #f0f7ff;
  --wp-blog-blockquote-text: #374151;
  --wp-blog-science-border: #bfdbfe;
  --wp-blog-wp-bg: #f0fdf4;
  --wp-blog-wp-border: #bbf7d0;
  --wp-blog-impact-text: #b45309;

  /* Border variants for semantic banners */
  --wp-danger-border: #f5c2c7;
  --wp-success-border: #badbcc;

  /* Summary card — intentionally dark in both themes */
  --wp-summary-card-bg: var(--color-surface-card);
  --wp-summary-card-border: transparent;

  /* Goal countdown */
  --wp-countdown-bg: var(--color-primary-wash);
  --wp-countdown-border: #93c5fd;
  --wp-countdown-label: #1e40af;
  --wp-countdown-number: #1d4ed8;
  --wp-countdown-unit: #3b82f6;
  --wp-countdown-target: #60a5fa;

  /* ── WodPilot Design System v2 ──────────────────────── */

  /* Typography scale additions */
  --wp-text-hero:    24px;
  --wp-text-section: 18px;
  --wp-text-card:    15px;
  --wp-text-body:    13px;
  --wp-text-meta:    12px;
  --wp-text-eyebrow: 11px;
  --wp-text-micro:   10px;

  /* Surfaces */
  --color-surface-page:  #0f1117;
  --color-surface-nav:   #0a0c10;
  --color-surface-card:  #161921;
  --color-surface-input: #1e2130;
  --color-surface-muted: #1e2330;
  /* Backward-compat aliases (deprecated — use --color-surface-* instead) */
  --surface-page:  var(--color-surface-page);
  --surface-nav:   var(--color-surface-nav);
  --surface-card:  var(--color-surface-card);
  --surface-input: var(--color-surface-input);

  /* Primary (teal) */
  --color-primary:       #1D9E75;
  --color-primary-light: #5DCAA5;
  --color-primary-dark:  #0F6E56;
  --color-primary-wash:  rgba(93,202,165,0.12);

  /* Secondary (blue-slate) */
  --color-secondary:        #2A3F59;
  --color-secondary-text:   #85B7EB;
  --color-secondary-border: #185FA5;
  --color-secondary-dark:   #0C1E33;

  /* Warning (amber) */
  --color-warning:      #EF9F27;
  --color-warning-text: #FAC775;
  --color-warning-bg:   #4A3010;

  /* Danger (red) */
  --color-danger:      #E24B4A;
  --color-danger-text: #F09595;
  --color-danger-bg:   #7A2020;

  /* Success (green) */
  --color-success:       #28C76F;
  --color-success-light: #86EFAC;
  --color-success-bg:    #052E16;
  --color-success-wash:  rgba(40,199,111,0.12);

  /* Info (blue) */
  --color-info:       #60A5FA;
  --color-info-light: #93C5FD;
  --color-info-bg:    #0C2D48;
  --color-info-wash:  rgba(96,165,250,0.12);

  /* Text */
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.60);
  --color-text-accent:    #5DCAA5;

  /* Borders (shorthand values, use as: border: var(--border-default)) */
  --border-default:  0.5px solid rgba(255,255,255,0.08);
  --border-emphasis: 0.5px solid rgba(255,255,255,0.15);
  --border-accent:   0.5px solid rgba(93,202,165,0.25);
  --border-danger:   0.5px solid rgba(226,75,74,0.25);

  /* Spacing scale (px — matches locked pixel-first approach)
   * Use these for new code. --wp-space-* aliases point here for
   * backward compatibility. Migration is not required — usages of
   * --wp-space-* are correct and will resolve to these values.
   *
   *  --space-xs   4px   tight gaps, icon padding
   *  --space-sm   8px   inner padding, small gaps
   *  --space-md  16px   standard section padding, card body
   *  --space-lg  24px   between-section gaps, larger card padding
   *  --space-xl  32px   page-level spacing, hero sections
   */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

/* ── Dark theme ─────────────────────────────────────────────────────
 * Applied via .wp-dark on <html>. Toggle with the nav theme switch.
 * Only color tokens are overridden — spacing, type scale, radius, and
 * motion remain unchanged.
 * ─────────────────────────────────────────────────────────────────── */
html.wp-dark {
  --wp-surface-page: #0f1117;
  --wp-surface-card: #161921;
  --wp-surface-nav: #0a0c10;
  --wp-surface-muted: #1e2330;
  --wp-surface-page-alt: #131720;

  --wp-border-default: rgba(255,255,255,0.08);
  --wp-border-light: rgba(255,255,255,0.12);

  --wp-text-primary: #f3f4f6;
  --wp-text-secondary: rgba(255,255,255,0.65);
  --wp-text-muted: rgba(255,255,255,0.55);
  --wp-text-inverse: #0f1117;

  --wp-accent: var(--accent);
  --wp-accent-hover: var(--accent-hover);

  --wp-success: #5DCAA5;
  --wp-success-bg: rgba(93,202,165,0.1);
  --wp-success-text: #5DCAA5;
  --wp-success-border: rgba(93,202,165,0.25);
  --wp-warning: #EF9F27;
  --wp-warning-bg: rgba(239,159,39,0.1);
  --wp-warning-text: #EF9F27;
  --wp-warning-border: rgba(239,159,39,0.25);
  --wp-warning-hover: #f5b94e;
  --wp-danger: #E24B4A;
  --wp-danger-bg: rgba(226,75,74,0.1);
  --wp-danger-text: #E24B4A;
  --wp-danger-border: rgba(226,75,74,0.25);
  --wp-info: #60a5fa;
  --wp-info-text: #93c5fd;
  --wp-info-bg: rgba(96,165,250,0.1);
  --wp-info-border: rgba(96,165,250,0.2);

  --wp-interactive: var(--accent);
  --wp-interactive-bg: rgba(93,202,165,0.12);
  --wp-interactive-border: rgba(93,202,165,0.25);
  --wp-interactive-hover: var(--accent-hover);

  --wp-brand: var(--accent);
  --wp-brand-hover: var(--accent-hover);
  --wp-brand-subtle: rgba(93,202,165,0.08);

  --wp-surface-nav-border: rgba(255,255,255,0.08);
  --wp-text-nav: #cbd5e1;
  --wp-text-nav-active: #ffffff;

  --wp-neutral-400: #6b7280;
  --wp-neutral-500: #9ca3af;

  --wp-role-admin: #5DCAA5;
  --wp-role-coach: #5DCAA5;
  --wp-role-athlete: #9ca3af;

  --wp-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --wp-shadow-sm: 0 2px 4px rgba(0,0,0,0.35);
  --wp-shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --wp-shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --wp-shadow-nav: 0 2px 4px rgba(0,0,0,0.5);

  /* Brand shadow + focus ring — teal in dark mode */
  --wp-shadow-brand: 0 1px 3px rgba(93,202,165,0.3);
  --wp-shadow-brand-hover: 0 2px 8px rgba(93,202,165,0.35);
  --wp-focus-ring: 0 0 0 3px rgba(93,202,165,0.25);

  /* Summary card — deeper navy in dark mode */
  --wp-summary-card-bg: var(--color-surface-card);
  --wp-summary-card-border: #1e293b;

  /* Goal countdown */
  --wp-countdown-bg: var(--color-primary-wash);
  --wp-countdown-border: #2563eb;
  --wp-countdown-label: #93c5fd;
  --wp-countdown-number: #bfdbfe;
  --wp-countdown-unit: #60a5fa;
  --wp-countdown-target: #3b82f6;

  /* Daily quote block */
  --wp-daily-quote-bg-from: #78350f;
  --wp-daily-quote-bg-to: #92400e;
  --wp-daily-quote-border: #b45309;
  --wp-daily-quote-text: #fef3c7;
  --wp-daily-quote-author: #fde68a;

  --wp-format-emom-bg: #1e3a5f;
  --wp-format-emom-text: #93c5fd;
  --wp-format-superset-bg: #451a03;
  --wp-format-superset-text: #fcd34d;
  --wp-format-circuit-bg: #064e3b;
  --wp-format-circuit-text: #6ee7b7;
  --wp-format-build-to-bg: #831843;
  --wp-format-build-to-text: #f9a8d4;

  /* Coach surface */
  --wp-coach-surface: #1c1917;
  --wp-coach-border: #78716c;

  /* Logged row */
  --wp-logged-bg: rgba(93,202,165,0.06);
  --wp-logged-border: rgba(93,202,165,0.2);

  /* Spinner */
  --wp-spinner-track: #1e2330;
  --wp-spinner-head: #94a3b8;

  /* Domain accents */
  --wp-skill-accent: #a78bfa;
  --wp-l1-strength: #f87171;
  --wp-l1-engine: #60a5fa;
  --wp-l1-gymnastics: #a78bfa;

  /* Status dark shades */
  --wp-success-dark: #86efac;
  --wp-warning-dark: #fbbf24;

  /* Goals strip */
  --wp-goals-strip-heading: var(--accent);
  --wp-goals-strip-secondary: rgba(255,255,255,0.55);
  --wp-goals-strip-detail: rgba(255,255,255,0.55);
  --wp-goals-strip-achieved: var(--accent);
  --wp-goals-dose-bg: rgba(93,202,165,0.1);
  --wp-goals-dose-text: var(--accent);

  /* Blog components */
  --wp-blog-meta: #9ca3af;
  --wp-blog-code-bg: #334155;
  --wp-blog-blockquote-bg: #1e3a5f;
  --wp-blog-blockquote-text: #cbd5e1;
  --wp-blog-science-border: #1e40af;
  --wp-blog-wp-bg: #052e16;
  --wp-blog-wp-border: #065f46;
  --wp-blog-impact-text: #fbbf24;

  color-scheme: dark;
}

/* ── Light theme ────────────────────────────────────────────────────
 * Applied when .wp-dark is NOT on <html>. Overrides the --color-* and
 * --border-* tokens whose :root defaults are set to dark-mode values.
 * ─────────────────────────────────────────────────────────────────── */
html:not(.wp-dark) {
  --color-surface-page:  #f1f5f9;
  --color-surface-nav:   #1a1a2e;
  --color-surface-card:  #ffffff;
  --color-surface-input: #ffffff;
  --color-surface-muted: #e9ecef;

  --color-text-primary:   #212529;
  --color-text-secondary: #495057;
  --color-text-tertiary:  #6c757d;

  --color-warning-bg:   #fff3cd;
  --color-warning-text: #856404;
  --color-danger-bg:    #f8d7da;
  --color-danger-text:  #721c24;
  --color-success-bg:   #d4edda;
  --color-success-text: #155724;
  --color-info-bg:      #e3f2fd;
  --color-info-text:    #0c4a7a;

  --border-default:  0.5px solid rgba(0,0,0,0.10);
  --border-emphasis: 0.5px solid rgba(0,0,0,0.16);

  color-scheme: light;
}

/* ── Canonical button system ────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-warning,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-element);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--color-primary-light);
}

.btn-primary:active {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}

.btn-secondary:hover {
  background: var(--color-secondary-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: var(--border-emphasis);
}

.btn-ghost:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.btn-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.btn-warning:hover {
  opacity: 0.8;
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.btn-danger:hover {
  opacity: 0.8;
}

/* ── Typography Scale ─────────────────────────────────────────── */
.wp-text-hero {
  font-size: var(--wp-text-hero);
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin: 0;
}

.wp-text-section {
  font-size: var(--wp-text-section);
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: 6px;
  border-bottom: var(--border-emphasis);
}

.wp-text-card-heading {
  font-size: var(--wp-text-card);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-primary);
  margin: 0;
}

.wp-text-body {
  font-size: var(--wp-text-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  margin: 0;
}

.wp-text-meta {
  font-size: var(--wp-text-meta);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  margin: 0;
}

.wp-text-eyebrow {
  font-size: var(--wp-text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-text-accent);
  margin: 0 0 var(--space-xs) 0;
}

.wp-text-micro {
  font-size: var(--wp-text-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ── Info Box ─────────────────────────────────────────────────── */
.wp-info-box {
  font-size: var(--wp-text-body);
  border-radius: var(--radius-element);
  padding: 8px 12px;
  margin-top: 8px;
}

.wp-info-box--success { background: var(--color-success-bg); color: var(--color-success-light); }
.wp-info-box--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.wp-info-box--danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  }
.wp-info-box--info    { background: var(--color-info-bg);    color: var(--color-info-light);   }
.wp-info-box--brand   { background: var(--color-primary-wash); color: var(--color-primary);      }
.wp-info-box--default { background: var(--color-surface-page); color: var(--color-text-secondary); }

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-warning:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.btn-primary:disabled, .btn-primary[disabled],
.btn-secondary:disabled, .btn-secondary[disabled],
.btn-ghost:disabled, .btn-ghost[disabled],
.btn-warning:disabled, .btn-warning[disabled],
.btn-danger:disabled, .btn-danger[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Canonical form input spec (use for new templates; migrate existing by value over time) ── */
.wp-input, .wp-select {
  font-size: 16px;
  padding: 0.45rem 0.65rem;
  border: var(--border-default);
  border-radius: var(--radius-element);
  background: var(--color-surface-input);
  color: var(--color-text-primary);
  font-family: inherit;
  transition: border-color 0.15s, outline 0.15s;
}

.wp-input:focus, .wp-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}

.wp-input:focus-visible, .wp-select:focus-visible {
  outline-offset: 0;
}

/* Global focus-visible for links and raw form elements */
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-inset); /* lint-ignore: focus ring */
}

textarea:focus-visible,
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}

button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-inset); /* lint-ignore: focus ring */
}

.wp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Pill / badge base + semantic modifiers ─────────────────────── */
.wp-pill {
  display: inline-block;
  font-size: var(--wp-text-sm);
  padding: 0.15rem var(--wp-space-sm);
  border-radius: var(--radius-pill);
  font-weight: var(--wp-weight-medium);
  vertical-align: middle;
}

.wp-pill--muted {
  color: var(--color-text-tertiary);
  background: var(--color-surface-muted);
}

.wp-pill--success {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.wp-pill--warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.wp-pill--danger {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.wp-pill--info {
  color: var(--color-info-light);
  background: var(--color-info-bg);
}

.wp-pill--accent {
  color: var(--color-text-primary);
  background: var(--wp-accent);
}

.today-steps {
  display: flex;
  gap: var(--wp-space-xs);
  padding: var(--wp-space-sm) 0;
  list-style: none;
  margin: 0;
  overflow-x: auto;
}

.today-step {
  display: flex;
  align-items: center;
  gap: var(--wp-space-xs);
  padding: var(--wp-space-xs) var(--wp-space-sm);
  font-size: var(--wp-text-sm);
  color: var(--color-text-tertiary);
  border-radius: var(--radius-pill);
  border: var(--border-default);
  background: var(--color-surface-card);
  white-space: nowrap;
  flex-shrink: 0;
}

.today-step--active {
  color: var(--color-text-primary);
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  font-weight: var(--wp-weight-semibold);
}

.today-step--complete {
  color: var(--color-success);
  border-color: var(--color-success);
  background: var(--color-surface-card);
}

.today-step--upcoming {
  color: var(--color-text-tertiary);
  border-color: var(--wp-border-default);
  background: var(--color-surface-muted);
}

.today-step--locked {
  color: var(--color-text-tertiary);
  border-color: var(--wp-border-default);
  background: var(--color-surface-muted);
  opacity: 0.6;
  cursor: help;
}

.persistence-badge--saved {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.persistence-badge--coach-picked {
  color: var(--wp-accent, #1a1a2e); /* lint-ignore */
  background: var(--color-surface-muted, #f1f5f9); /* lint-ignore */
}

.persistence-badge--ai-pick {
  color: var(--wp-format-emom-text);
  background: var(--color-primary-wash);
}

.piece-label-display {
  display: none;
  font-size: var(--wp-text-sm);
  font-weight: var(--wp-weight-semibold);
  flex: 1;
  min-width: 100px;
  padding: 0.2rem 0.3rem;
}

.persistence-badge--coach-picked {
  color: var(--color-secondary-text);
  background: var(--color-secondary);
}

.persistence-badge--ai-pick {
  color: var(--color-info-text);
  background: var(--color-info-wash);
}

.piece-label-display {
  display: none;
  font-size: var(--wp-font-md);
  font-weight: 500;
  flex: 1;
  min-width: 100px;
  padding: 0.2rem 0.3rem;
}

.session-feeling-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: var(--wp-weight-semibold);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-top: 0.5rem;
}
.session-feeling-badge--fresh { background: #dcfce7; color: #166534; } /* lint-ignore */
.session-feeling-badge--tired { background: #fef9c3; color: #854d0e; } /* lint-ignore */
.session-feeling-badge--rough { background: #fee2e2; color: #991b1b; } /* lint-ignore */
html.wp-dark .session-feeling-badge--fresh { background: #064e3b; color: #6ee7b7; } /* lint-ignore */
html.wp-dark .session-feeling-badge--tired { background: #451a03; color: #fcd34d; } /* lint-ignore */
html.wp-dark .session-feeling-badge--rough { background: #450a0a; color: #fca5a5; } /* lint-ignore */

.readiness-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp-space-sm);
  margin: var(--wp-space-sm) 0 0;
  padding: var(--wp-space-xs) var(--wp-space-sm);
  border-radius: var(--radius-inset);
  font-size: var(--wp-text-sm);
}

.readiness-band__label {
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-secondary);
}

.readiness-band__value {
  font-weight: var(--wp-weight-semibold);
}

.readiness-band__detail {
  flex-basis: 100%;
  color: var(--color-text-tertiary);
}

.readiness-band--high {
  background: var(--color-success-bg);
}

.readiness-band--high .readiness-band__value {
  color: var(--color-success);
}

.readiness-band--moderate {
  background: var(--color-warning-bg);
}

.readiness-band--moderate .readiness-band__value {
  color: var(--color-warning-text);
}

.readiness-band--low {
  background: var(--color-danger-bg);
}

.readiness-band--low .readiness-band__value {
  color: var(--color-danger);
}

.readiness-band__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-sm) var(--wp-space-md);
  width: 100%;
  margin-top: var(--wp-space-xs);
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
}

.readiness-band__metrics span {
  white-space: nowrap;
}

.readiness-band__penalty {
  width: 100%;
  margin-top: calc(var(--wp-space-xs) / 2);
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
}

/* Auth shell — token mapping (loads after app.css via base.html) */
.auth-page {
  background: var(--color-surface-page);
  padding: var(--wp-space-xl) var(--wp-space-md);
  min-height: 100vh;
  position: relative;
}

.auth-card {
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-container);
  padding: var(--wp-space-xl) var(--wp-space-xl) var(--wp-space-lg);
  position: relative;
  z-index: var(--wp-z-base);
}

.auth-brand-name {
  color: var(--wp-accent);
}

.auth-brand-tagline {
  color: var(--color-text-tertiary);
  font-size: var(--wp-text-base);
  font-weight: var(--wp-weight-medium);
}

@media (max-width: 640px) {
  .auth-page {
    background: var(--color-surface-page);
    padding: var(--wp-space-lg) var(--wp-space-sm);
  }
}

.today-session-header {
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-element);
  padding: var(--wp-space-lg);
  margin-bottom: var(--wp-space-md);
}

.today-pills-wrap {
  position: sticky;
  top: var(--nav-height);
  z-index: var(--wp-z-sticky);
  background: var(--color-surface-page);
  border-bottom: 0.5px solid var(--wp-border-default);
  padding-top: 0.25rem;
  margin: 0 -0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.today-pills-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2rem;
  background: var(--color-surface-page);
  pointer-events: none;
}

.today-component-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--wp-space-sm);
  padding: var(--wp-space-sm) 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.today-component-pills::-webkit-scrollbar {
  display: none;
}

.component-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--wp-space-xs) var(--wp-space-md);
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: var(--wp-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--wp-transition-colors);
}

.component-pill__ordinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  color: var(--color-surface-card);
  font-size: 0.6rem;
  font-weight: var(--wp-weight-semibold);
  flex-shrink: 0;
}

.component-pill--active .component-pill__ordinal,
.component-pill--active.component-pill--active-work .component-pill__ordinal {
  background: var(--color-text-primary);
  color: var(--color-primary);
}

.component-pill__dur {
  font-size: 0.7rem;
  opacity: 0.75;
}

.component-pill:hover {
  background: var(--color-surface-muted);
  border-color: var(--wp-border-light);
}

.component-pill:focus-visible {
  outline: 2px solid var(--wp-accent);
  outline-offset: 2px;
}

.component-pill--active,
.component-pill--active.component-pill--active-work {
  color: var(--color-text-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--wp-weight-semibold);
}

.component-pill--active:hover,
.component-pill--active.component-pill--active-work:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

.component-pill--done {
  color: var(--color-text-secondary);
  background: var(--color-success-wash);
  border-color: rgba(40, 199, 111, 0.30);
  opacity: 0.7;
}

.btn-cruise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: var(--wp-weight-medium);
  font-family: inherit;
  color: var(--color-text-secondary);
  background: transparent;
  border: var(--border-emphasis);
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin-left: var(--wp-space-sm);
  white-space: nowrap;
  transition: background var(--wp-duration-base), color var(--wp-duration-base);
}

.btn-cruise:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.btn-cruise:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.component-pill--done .component-pill__ordinal {
  background: var(--color-success);
  color: var(--color-surface-card);
  font-size: 0;
}

.component-pill--done .component-pill__ordinal::before {
  content: "✓";
  font-size: 0.6rem;
}

.component-pill--done:hover {
  opacity: 1;
}

.component-pill--active-work {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  font-weight: var(--wp-weight-semibold);
}

.component-pill--active-work:hover {
  border-color: var(--color-warning-text);
}

.component-pill--empty {
  color: var(--color-text-tertiary);
  border-color: var(--wp-border-default);
  opacity: 0.6;
}

.component-pill--empty:hover {
  opacity: 0.85;
}

.component-pill--add {
  min-width: 44px;
  padding: 0;
  border-style: dashed;
  color: var(--color-text-tertiary);
  background: transparent;
}

.component-pill--add:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-wash);
}

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

.component-pill--covered {
  color: var(--color-text-tertiary);
  border-color: var(--wp-border-default);
  opacity: 0.6;
}

.today-panel[hidden] {
  display: none !important;
}

.session-fit-details {
  margin-top: var(--wp-space-md);
  border: var(--border-default);
  border-radius: var(--radius-element);
  padding: var(--wp-space-sm) var(--wp-space-md);
}

.session-fit-details > summary {
  cursor: pointer;
  font-size: var(--wp-text-base);
  font-weight: var(--wp-weight-medium);
  color: var(--color-text-secondary);
  padding: var(--wp-space-xs) 0;
}

.session-fit-details[open] > summary {
  margin-bottom: var(--wp-space-sm);
}

.wp-toast {
  position: fixed;
  bottom: var(--wp-space-lg);
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--wp-accent);
  color: var(--color-text-primary);
  padding: var(--wp-space-sm) var(--wp-space-lg);
  border-radius: var(--radius-element);
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: var(--wp-z-overlay);
  max-width: 90vw;
  text-align: center;
}
.wp-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wp-toast--warning {
  background: var(--color-warning);
  color: var(--color-text-primary);
}
.wp-toast--success {
  background: var(--wp-success, #28a745);
  color: #fff;
}
.wp-toast--danger {
  background: var(--wp-danger, #dc3545);
  color: #fff;
}
.wp-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 0.5px solid var(--wp-spinner-track);
  border-top-color: var(--wp-spinner-head);
  border-radius: 50%;
  animation: wp-spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes wp-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .session-per-piece-details {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .session-plan-piece-table {
    min-width: 500px;
  }

  .session-fit-details {
    overflow-x: hidden;
  }

  .stress-bars {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Glossary tooltip (abbr with dotted underline + hover definition) ─── */
.wp-term {
  text-decoration: underline dotted;
  text-decoration-color: var(--color-text-tertiary);
  text-underline-offset: 2px;
  cursor: help;
  font-style: normal;
}

/* ── Milestone celebration overlay ────────────────────────────────────── */
.wp-celebration {
  position: fixed;
  inset: 0;
  z-index: var(--wp-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  animation: wp-cel-fadein 0.3s ease;
}
.wp-celebration--dismissed {
  opacity: 0;
  pointer-events: none;
  transition: var(--wp-transition-opacity);
}
.wp-celebration__card {
  background: var(--color-surface-card);
  border-radius: var(--radius-container);
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 360px;
  width: 90vw;
  animation: wp-cel-slideup 0.4s ease;
}
.wp-celebration__icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}
.wp-celebration__text {
  font-size: 1.1rem;
  font-weight: var(--wp-weight-semibold);
  margin: 0 0 0.5rem;
}
.wp-celebration__detail {
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
  margin: 0 0 1rem;
}
.wp-celebration__dismiss {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-element);
  font-size: 0.95rem;
  cursor: pointer;
}
.wp-celebration__dismiss:hover {
  opacity: 0.9;
}
@keyframes wp-cel-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wp-cel-slideup {
  from { transform: translateY(1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.wp-celebration__badge-title {
  font-size: 0.85rem;
  font-weight: var(--wp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp-accent, #1a1a2e); /* lint-ignore */
  margin: 0 0 0.25rem;
}
.wp-celebration__card {
  border: var(--border-default);
}

/* ── Confetti burst ─────────────────────────────────────────────────── */
.wp-confetti {
  position: fixed;
  inset: 0;
  z-index: var(--wp-z-overlay);
  pointer-events: none;
  overflow: hidden;
}
.wp-confetti__piece {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 40%;
  left: 50%;
  border-radius: var(--radius-inset);
  opacity: 0;
  animation: wp-confetti-burst 1.4s ease-out forwards;
}
.wp-confetti__piece--0 { background: #f44336; } /* lint-ignore */
.wp-confetti__piece--1 { background: #ff9800; } /* lint-ignore */
.wp-confetti__piece--2 { background: #ffeb3b; } /* lint-ignore */
.wp-confetti__piece--3 { background: #4caf50; } /* lint-ignore */
.wp-confetti__piece--4 { background: #2196f3; } /* lint-ignore */
.wp-confetti__piece--5 { background: #9c27b0; } /* lint-ignore */
.wp-confetti__piece:nth-child(1)  { --dx: -140px; --dy: -200px; --rot:  720deg; animation-delay: 0s; }
.wp-confetti__piece:nth-child(2)  { --dx:  100px; --dy: -220px; --rot: -540deg; animation-delay: .02s; }
.wp-confetti__piece:nth-child(3)  { --dx: -80px;  --dy: -180px; --rot:  450deg; animation-delay: .04s; }
.wp-confetti__piece:nth-child(4)  { --dx:  160px; --dy: -160px; --rot: -360deg; animation-delay: .06s; }
.wp-confetti__piece:nth-child(5)  { --dx: -200px; --dy: -120px; --rot:  600deg; animation-delay: .08s; }
.wp-confetti__piece:nth-child(6)  { --dx:  50px;  --dy: -240px; --rot: -480deg; animation-delay: .1s; }
.wp-confetti__piece:nth-child(7)  { --dx: -120px; --dy: -260px; --rot:  540deg; animation-delay: .12s; }
.wp-confetti__piece:nth-child(8)  { --dx:  180px; --dy: -140px; --rot: -720deg; animation-delay: .14s; }
.wp-confetti__piece:nth-child(9)  { --dx: -60px;  --dy: -280px; --rot:  400deg; animation-delay: .16s; }
.wp-confetti__piece:nth-child(10) { --dx:  130px; --dy: -100px; --rot: -300deg; animation-delay: .18s; }
.wp-confetti__piece:nth-child(11) { --dx: -180px; --dy: -240px; --rot:  660deg; animation-delay: .04s; }
.wp-confetti__piece:nth-child(12) { --dx:  70px;  --dy: -300px; --rot: -420deg; animation-delay: .06s; }
.wp-confetti__piece:nth-child(13) { --dx: -150px; --dy: -80px;  --rot:  500deg; animation-delay: .08s; }
.wp-confetti__piece:nth-child(14) { --dx:  200px; --dy: -200px; --rot: -600deg; animation-delay: .1s; }
.wp-confetti__piece:nth-child(15) { --dx: -30px;  --dy: -320px; --rot:  380deg; animation-delay: .12s; }
.wp-confetti__piece:nth-child(16) { --dx:  110px; --dy: -260px; --rot: -440deg; animation-delay: .02s; }
.wp-confetti__piece:nth-child(17) { --dx: -190px; --dy: -160px; --rot:  580deg; animation-delay: .06s; }
.wp-confetti__piece:nth-child(18) { --dx:  40px;  --dy: -180px; --rot: -340deg; animation-delay: .1s; }
.wp-confetti__piece:nth-child(19) { --dx: -100px; --dy: -300px; --rot:  700deg; animation-delay: .14s; }
.wp-confetti__piece:nth-child(20) { --dx:  150px; --dy: -120px; --rot: -560deg; animation-delay: .08s; }
.wp-confetti__piece:nth-child(21) { --dx: -170px; --dy: -220px; --rot:  460deg; animation-delay: .12s; }
.wp-confetti__piece:nth-child(22) { --dx:  90px;  --dy: -280px; --rot: -640deg; animation-delay: .04s; }
.wp-confetti__piece:nth-child(23) { --dx: -40px;  --dy: -140px; --rot:  520deg; animation-delay: .16s; }
.wp-confetti__piece:nth-child(24) { --dx:  170px; --dy: -240px; --rot: -400deg; animation-delay: .02s; }
.wp-confetti__piece:nth-child(25) { --dx: -130px; --dy: -100px; --rot:  620deg; animation-delay: .1s; }
.wp-confetti__piece:nth-child(26) { --dx:  60px;  --dy: -320px; --rot: -500deg; animation-delay: .14s; }
.wp-confetti__piece:nth-child(27) { --dx: -210px; --dy: -180px; --rot:  440deg; animation-delay: .06s; }
.wp-confetti__piece:nth-child(28) { --dx:  120px; --dy: -200px; --rot: -580deg; animation-delay: .18s; }
.wp-confetti__piece:nth-child(29) { --dx: -70px;  --dy: -260px; --rot:  560deg; animation-delay: .08s; }
.wp-confetti__piece:nth-child(30) { --dx:  190px; --dy: -160px; --rot: -660deg; animation-delay: .12s; }
@keyframes wp-confetti-burst {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4); }
}


/* ── Notification bell + dropdown ─────────────────────────────────────── */
.nav-notifications {
  position: relative;
  display: inline-block;
}
.nav-bell {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  position: relative;
  transition: color var(--wp-duration-base);
}
.nav-bell:hover { color: var(--wp-text-nav-active); }
.nav-bell:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-inset);
}
.nav-bell__badge {
  position: absolute;
  top: -2px;
  right: -4px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: var(--wp-weight-bold);
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-element);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.nav-notifications__dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-element);
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--wp-z-overlay);
}
.nav-notifications__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: var(--border-default);
}
.nav-notifications__mark-all {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}
.nav-notifications__empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  margin: 0;
}
.nav-notifications__loading {
  padding: 0.5rem;
  color: var(--color-text-tertiary);
  text-align: center;
  list-style: none;
}
.nav-notification {
  padding: 0.75rem 1rem;
  border-bottom: var(--border-default);
}
.nav-notification--unseen {
  background: var(--color-primary-wash);
}
.nav-notification--seen {
  background: var(--color-surface-card);
}
.nav-notification__msg {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  line-height: var(--wp-leading-snug);
}
.nav-notification__time {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.nav-notification__body {
  flex: 1;
  min-width: 0;
}
.nav-notification__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  font-size: 1.1rem;
  padding: 0 0.25rem;
  line-height: 1;
  border-radius: var(--wp-radius-element, 4px);
  flex-shrink: 0;
  transition: color 0.15s;
  align-self: flex-start;
}
.nav-notification__dismiss:hover { color: var(--color-danger, #ef4444); }
.nav-notifications__footer {
  padding: 0.5rem 1rem;
  text-align: center;
  border-top: var(--border-default);
}
.nav-notifications__view-all {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.nav-notifications__view-all:hover { text-decoration: underline; }
.nav-notification {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* ── Constraint narrative ─────────────────────────────────────────────── */
.constraint-detail {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: var(--border-default);
}
.constraint-detail__section {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.constraint-detail__section strong {
  color: var(--color-text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.constraint-detail__list {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.constraint-detail__list li {
  margin-bottom: 0.15rem;
}
/* ══════════════════════════════════════════════════════════════════
   Engagement strip — streak tracker + goal countdown
   ══════════════════════════════════════════════════════════════════ */

/* ── Streak tracker ──────────────────────────────────────────────── */
.streak-tracker {
  flex: 1;
  min-width: 200px;
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-element);
  padding: 0.6rem 0.75rem;
}
.streak-tracker__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.streak-tracker__current {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}
.streak-tracker__emoji { font-size: 1.1rem; }
.streak-tracker__count { font-size: 1.6rem; font-weight: var(--wp-weight-extrabold); color: var(--color-text-primary); line-height: var(--wp-leading-none); }
.streak-tracker__unit { font-size: 0.7rem; color: var(--color-text-tertiary); font-weight: var(--wp-weight-semibold); }
.streak-tracker__meta { display: flex; flex-direction: column; gap: 0.1rem; }
.streak-tracker__label { font-size: 0.75rem; font-weight: var(--wp-weight-bold); color: var(--color-success); text-transform: uppercase; letter-spacing: 0.04em; }
.streak-tracker__stats { font-size: 0.65rem; color: var(--color-text-tertiary); }
.streak-tracker__heatmap {
  display: flex;
  gap: 3px;
}

/* ── Dark mode — engagement features ─────────────────────────────── */
.wp-dark .streak-cell--i1 { background: rgba(93,202,165,0.08); }
.wp-dark .streak-cell--i1 .streak-cell__count { color: var(--accent); }
.wp-dark .streak-cell--i2 { background: rgba(93,202,165,0.15); }
.wp-dark .streak-cell--i2 .streak-cell__count { color: var(--accent); }
.wp-dark .streak-cell--i3 { background: rgba(93,202,165,0.25); }
.wp-dark .streak-cell--i3 .streak-cell__count { color: #c6f0e2; } /* lint-ignore */
.wp-dark .streak-cell--i4 { background: rgba(93,202,165,0.4); }
.wp-dark .streak-cell--i4 .streak-cell__count { color: #fff; }


.rest-day-message {
  background: var(--color-surface-card);
  border: var(--border-default);
  border-left: 4px solid var(--color-success);
}
.rest-day-message__title { color: var(--color-success); }
.rest-day-message__body  { color: var(--color-text-secondary); }

.wp-dark .rest-day-message {
  background: var(--color-surface-card);
  border-color: #065f46; /* lint-ignore */
  color: #6ee7b7; /* lint-ignore */
}
.wp-dark .rest-day-message__title { color: #86efac; } /* lint-ignore */
.wp-dark .rest-day-message__body { color: #6ee7b7; } /* lint-ignore */

/* ── Achievements ───────────────────────────────────────────────── */
.ach-header { text-align: center; margin-bottom: var(--wp-space-lg); }
.ach-header h1 { font-size: 1.4rem; margin: 0 0 0.25rem; }
.ach-progress { font-size: 0.85rem; color: var(--color-text-tertiary); }
.ach-progress-bar { width: 200px; height: 6px; background: var(--color-surface-muted); border-radius: var(--wp-radius-pill); margin: 0.5rem auto; overflow: hidden; }
.ach-progress-fill { height: 100%; background: var(--color-success); border-radius: var(--wp-radius-pill); transition: width 0.6s ease; }

.ach-category { margin-bottom: var(--wp-space-xl); }
.ach-category-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); font-weight: 500; margin-bottom: var(--wp-space-sm); padding-bottom: 0.25rem; border-bottom: 0.5px solid var(--wp-border-default); }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--wp-space-md); }

.ach-badge { background: var(--color-surface-card); border: 0.5px solid var(--wp-border-default); border-radius: var(--wp-radius-md); padding: var(--wp-space-md) var(--wp-space-sm); text-align: center; transition: transform 0.15s ease; position: relative; }
.ach-badge:hover { transform: translateY(-2px); box-shadow: none; }

.ach-badge--locked { opacity: 0.45; filter: grayscale(0.8); }
.ach-badge--locked .ach-emoji { filter: grayscale(1); }

.ach-emoji { font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.4rem; }
.ach-title { font-size: 0.8rem; font-weight: 500; color: var(--color-text-primary); margin-bottom: 0.2rem; line-height: 1.2; }
.ach-desc { font-size: 0.68rem; color: var(--color-text-tertiary); line-height: 1.4; }

.ach-tier { position: absolute; top: 4px; right: 6px; font-size: 0.55rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: var(--wp-radius-pill); }
.ach-tier--bronze { background: #cd7f32; color: #fff; } /* lint-ignore */
.ach-tier--silver { background: #a0a0a0; color: #fff; } /* lint-ignore */
.ach-tier--gold { background: #d4a017; color: #fff; } /* lint-ignore */
.ach-tier--legendary { background: linear-gradient(135deg, #7b2ff7, #c026d3); color: #fff; } /* lint-ignore */

.ach-date { font-size: 0.6rem; color: var(--color-text-tertiary); margin-top: 0.3rem; }

.ach-badge--new::after { content: "NEW"; position: absolute; top: 4px; left: 6px; font-size: 0.5rem; font-weight: 500; background: var(--color-success); color: #fff; padding: 1px 4px; border-radius: var(--wp-radius-pill); }

.ach-badge-progress { margin-top: 0.3rem; }
.ach-badge-progress-bar { height: 4px; background: var(--color-surface-muted); border-radius: var(--radius-inset); overflow: hidden; }
.ach-badge-progress-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-inset); transition: width 0.4s ease; }
.ach-badge-progress-label { font-size: 0.55rem; color: var(--color-text-tertiary); margin-top: 0.15rem; }

@media (max-width: 640px) {
  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--wp-space-sm); }
  .ach-badge { padding: var(--wp-space-sm); }
  .ach-emoji { font-size: 1.6rem; }
}

.wp-dark .ach-badge { background: var(--color-surface-card); border-color: var(--wp-border-default); }
.wp-dark .ach-title { color: var(--color-text-primary); }
.wp-dark .ach-desc { color: var(--color-text-tertiary); }
.wp-dark .ach-badge--locked { opacity: 0.35; }
.wp-dark .ach-category-title { color: var(--color-text-tertiary); border-bottom-color: var(--wp-border-default); }
.wp-dark .ach-progress { color: var(--color-text-tertiary); }
.wp-dark .ach-progress-bar { background: var(--color-surface-muted); }
.wp-dark .ach-badge-progress-bar { background: var(--color-surface-muted); }

/* ── Theme toggle button ────────────────────────────────────────── */
.nav-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem;
  color: var(--accent);
  line-height: var(--wp-leading-none);
  transition: opacity 0.15s;
}
.nav-theme-toggle:hover {
  opacity: 0.75;
}
.nav-theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-inset);
}
.nav-theme-toggle__icon::before {
  content: '☀';
}
.wp-dark .nav-theme-toggle__icon::before {
  content: '☾';
}
/* ── Utility classes (replace inline style="color/background:..." in templates) ── */
.wp-text-primary { color: var(--color-text-primary); }
.wp-text-secondary { color: var(--color-text-secondary); }
.wp-text-muted { color: var(--color-text-tertiary); }
.wp-text-inverse { color: var(--color-text-primary); }
.wp-text-success { color: var(--color-success); }
.wp-text-warning { color: var(--color-warning-text); }
.wp-text-danger { color: var(--color-danger); }
.wp-bg-page { background: var(--color-surface-page); }
.wp-bg-muted { background: var(--color-surface-muted); }
.wp-bg-danger-subtle { background: var(--color-danger-bg); }
.wp-border-default { border-color: var(--wp-border-default); }
.wp-font-semibold { font-weight: var(--wp-weight-semibold); }
.wp-font-bold { font-weight: var(--wp-weight-bold); }
.wp-font-medium { font-weight: var(--wp-weight-medium); }

/* Text size */
.wp-text-sm { font-size: var(--wp-text-sm); }
.wp-text-xs { font-size: var(--wp-text-xs); }
.wp-text-base { font-size: var(--wp-text-base); }

/* Display & flex */
.wp-hidden { display: none; }
.wp-flex { display: flex; }
.wp-flex-col { display: flex; flex-direction: column; }
.wp-flex-wrap { display: flex; flex-wrap: wrap; }
.wp-flex-center { display: flex; align-items: center; }
.wp-flex-1 { flex: 1; }
.wp-items-start { align-items: flex-start; }
.wp-items-center { align-items: center; }
.wp-justify-between { justify-content: space-between; }
.wp-ml-auto { margin-left: auto; }

/* Gap */
.wp-gap-xs { gap: var(--wp-space-xs); }
.wp-gap-sm { gap: var(--wp-space-sm); }
.wp-gap-md { gap: var(--wp-space-md); }
.wp-gap-lg { gap: var(--wp-space-lg); }

/* Spacing — margin */
.wp-mx-auto { margin-left: auto; margin-right: auto; }
.wp-max-w-narrow { max-width: 640px; }

.wp-mt-xs { margin-top: var(--wp-space-xs); }
.wp-mt-sm { margin-top: var(--wp-space-sm); }
.wp-mt-md { margin-top: var(--wp-space-md); }
.wp-mt-lg { margin-top: var(--wp-space-lg); }
.wp-mt-xl { margin-top: var(--wp-space-xl); }

.wp-mb-xs { margin-bottom: var(--wp-space-xs); }
.wp-mb-sm { margin-bottom: var(--wp-space-sm); }
.wp-mb-md { margin-bottom: var(--wp-space-md); }
.wp-mb-lg { margin-bottom: var(--wp-space-lg); }
.wp-mb-xl { margin-bottom: var(--wp-space-xl); }
.wp-my-sm { margin-top: var(--wp-space-sm); margin-bottom: var(--wp-space-sm); }

/* Spacing — padding */
.wp-p-xs { padding: var(--wp-space-xs); }
.wp-p-sm { padding: var(--wp-space-sm); }
.wp-p-md { padding: var(--wp-space-md); }
.wp-p-lg { padding: var(--wp-space-lg); }
.wp-p-xl { padding: var(--wp-space-xl); }

.wp-py-xs { padding-top: var(--wp-space-xs); padding-bottom: var(--wp-space-xs); }
.wp-py-sm { padding-top: var(--wp-space-sm); padding-bottom: var(--wp-space-sm); }
.wp-py-md { padding-top: var(--wp-space-md); padding-bottom: var(--wp-space-md); }
.wp-py-lg { padding-top: var(--wp-space-lg); padding-bottom: var(--wp-space-lg); }
.wp-py-xl { padding-top: var(--wp-space-xl); padding-bottom: var(--wp-space-xl); }

.wp-px-xs { padding-left: var(--wp-space-xs); padding-right: var(--wp-space-xs); }
.wp-px-sm { padding-left: var(--wp-space-sm); padding-right: var(--wp-space-sm); }
.wp-px-md { padding-left: var(--wp-space-md); padding-right: var(--wp-space-md); }
.wp-px-lg { padding-left: var(--wp-space-lg); padding-right: var(--wp-space-lg); }
.wp-px-xl { padding-left: var(--wp-space-xl); padding-right: var(--wp-space-xl); }
/* Semantic banners */
.wp-banner-info { background: var(--color-info-bg); border: var(--border-emphasis); border-radius: var(--radius-element); padding: var(--wp-space-sm) var(--wp-space-md); }
.wp-banner-warning { background: var(--color-warning-bg); border: 0.5px solid var(--color-warning); border-radius: var(--radius-element); padding: var(--wp-space-sm) var(--wp-space-md); }
.wp-banner-danger { background: var(--color-danger-bg); border: var(--border-danger); border-radius: var(--radius-element); padding: var(--wp-space-sm) var(--wp-space-md); }
.wp-banner-success { background: var(--color-success-bg); border: var(--border-accent); border-radius: var(--radius-element); padding: var(--wp-space-sm) var(--wp-space-md); }

/* Text alignment */
.wp-text-left { text-align: left; }
.wp-text-center { text-align: center; }
.wp-text-right { text-align: right; }
.wp-text-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

/* Display */
.wp-block { display: block; }
.wp-inline-block { display: inline-block; }

/* Sizing */
.wp-w-full { width: 100%; }

/* Cursor */
.wp-cursor-pointer { cursor: pointer; }

/* Margin extras */
.wp-m-0 { margin: 0; }
.wp-mb-0 { margin-bottom: 0; }

/* Progress bar */
.wp-progress-bar { height: 6px; background: var(--color-surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
.wp-progress-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.4s ease; }
.wp-progress-fill--success { background: var(--color-success); }
.wp-progress-fill--danger { background: var(--color-danger); }
.wp-progress-fill--muted { background: var(--color-text-tertiary); }

/* Border utilities */
.wp-border { border: var(--border-default); }
.wp-border-top { border-top: var(--border-default); }

/* ── Data table canonical primitive ────────────────────────────── */
.wp-table-container {
  overflow-x: auto;
  border-radius: var(--radius-element);
  border: var(--border-default);
}
.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp-text-sm);
}
.wp-table th,
.wp-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: var(--border-default);
  vertical-align: top;
}
.wp-table thead th {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--wp-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: var(--border-emphasis);
}
.wp-table tbody tr:last-child td {
  border-bottom: none;
}
.wp-table tbody tr:hover td {
  background: var(--color-primary-wash);
}
.wp-border-bottom { border-bottom: var(--border-default); }
.wp-border-none { border: none; }
.wp-rounded-sm { border-radius: var(--radius-inset); }
.wp-rounded-md { border-radius: var(--radius-element); }

/* ── Engagement strip ──────────────────────────────────────────────── */
.engagement-strip {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0;
  align-items: stretch;
}
/* Compact variant: tighter spacing for streamlined pre-workout flow */
.engagement-strip--compact {
  margin: 0.35rem 0 0.25rem;
  gap: 0.5rem;
}
@media (max-width: 640px) {
  .engagement-strip { flex-direction: column; }
}

/* ── "More context" collapsible (secondary pre-session info) ─────── */
.today-more-context {
  margin: 0.25rem 0 0.5rem;
  border: var(--border-default);
  border-radius: var(--radius-element);
  background: var(--color-surface-card);
}
.today-more-context__toggle {
  display: block;
  padding: 0.45rem 0.75rem;
  font-weight: var(--wp-weight-medium);
  user-select: none;
}
.today-more-context__body {
  padding: 0 0.75rem 0.6rem;
}

/* ── Tighter today-phase-pre spacing ─────────────────────────────── */
.today-phase-pre { margin-bottom: 0.25rem; }
.today-phase-pre .card { margin-bottom: 0.5rem; }

.streak-cell {
  flex: 1;
  aspect-ratio: 1;
  border-radius: var(--radius-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: var(--wp-weight-bold);
  transition: var(--wp-transition-transform);
}
.streak-cell:hover { transform: scale(1.2); }
.streak-cell__count { opacity: 0.7; }
.streak-cell--i0 { background: #f0fdf4; color: #86efac; } /* lint-ignore */
.streak-cell--i1 { background: var(--wp-streak-1-bg); color: var(--wp-streak-1-text); }
.streak-cell--i2 { background: #4ade80; color: #fff; } /* lint-ignore */
.streak-cell--i3 { background: #22c55e; color: #fff; } /* lint-ignore */
.streak-cell--i4 { background: #16a34a; color: #fff; } /* lint-ignore */

/* ── Daily quote ───────────────────────────────────────────────────── */
.daily-quote {
  flex: 1;
  background: var(--color-warning-bg);
  border: var(--border-default);
  border-radius: var(--radius-container);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: wp-fade-slide-up 0.5s ease 0.1s both;
}
.daily-quote__text {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--wp-daily-quote-text);
  margin: 0 0 0.3rem;
  line-height: var(--wp-leading-snug);
}
.daily-quote__author {
  font-size: 0.7rem;
  color: var(--wp-daily-quote-author);
  font-weight: var(--wp-weight-semibold);
  margin: 0;
  text-align: right;
}

/* ── Session summary card ──────────────────────────────────────────── */
.summary-card {
  background: var(--wp-summary-card-bg);
  border: var(--border-default);
  border-radius: var(--radius-container);
  padding: 1.25rem;
  color: #fff;
  margin: 0.75rem 0;
  position: relative;
  overflow: hidden;
  animation: wp-fade-slide-up 0.6s ease both;
}
.summary-card::before {
  display: none;
}
.summary-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.summary-card__brand {
  font-size: 0.7rem;
  font-weight: var(--wp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}
.summary-card__date {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}
.summary-card__theme {
  font-size: 1rem;
  font-weight: var(--wp-weight-bold);
  margin-bottom: 0.5rem;
}
.summary-card__difficulty {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: var(--wp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-element);
  margin-bottom: 0.5rem;
}
.summary-card__difficulty--easy { background: var(--color-success); color: #fff; }
.summary-card__difficulty--medium { background: var(--color-warning); color: #fff; }
.summary-card__difficulty--spicy { background: var(--color-danger); color: #fff; }
.summary-card__score-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.summary-card__score-value {
  font-size: 2rem;
  font-weight: var(--wp-weight-extrabold);
  line-height: var(--wp-leading-none);
}
.summary-card__score-type {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}
.summary-card__rpe-value {
  font-size: 1.4rem;
  font-weight: var(--wp-weight-bold);
  color: #fbbf24; /* lint-ignore */
}
.summary-card__rpe-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-left: 0.15rem;
}
.summary-card__rx {
  font-size: 0.75rem;
  font-weight: var(--wp-weight-bold);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-inset);
  background: rgba(255,255,255,0.15);
}
.summary-card__prs {
  margin: 0.5rem 0;
}
.summary-card__pr {
  font-size: 0.85rem;
  font-weight: var(--wp-weight-semibold);
  color: #fbbf24; /* lint-ignore */
  margin-bottom: 0.2rem;
}
.summary-card__streak {
  font-size: 0.85rem;
  margin: 0.4rem 0;
  color: rgba(255,255,255,0.8);
}
.summary-card__movements {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.4rem;
}
.summary-card__share {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.12);
  border: var(--border-emphasis);
  color: rgba(255,255,255,0.7);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-element);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}
.summary-card__share:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ── Piece difficulty badge ────────────────────────────────────────── */
.piece-difficulty {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: var(--wp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-element);
  margin-left: 0.4rem;
  vertical-align: middle;
}
.piece-difficulty--easy { background: var(--color-success-bg); color: var(--color-success-light); }
.piece-difficulty--medium { background: var(--color-warning-bg); color: var(--color-warning-text); }
.piece-difficulty--spicy { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* ── Micro-animations ──────────────────────────────────────────────── */
@keyframes wp-fade-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.card, .strategy-card {
  animation: wp-fade-slide-up 0.4s ease both;
}
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.2s; }
.ramp-progress-bar__fill,
.ach-badge-progress-fill {
  transition: width 0.8s ease-out;
}

/* ── Dark mode overrides for engagement features ───────────────────── */
.wp-dark .streak-tracker {
  background: var(--color-surface-card);
  border-color: #047857; /* lint-ignore */
}
.wp-dark .streak-tracker__count { color: #86efac; } /* lint-ignore */
.wp-dark .streak-tracker__unit { color: #86efac; } /* lint-ignore */
.wp-dark .streak-tracker__label { color: #4ade80; } /* lint-ignore */
.wp-dark .streak-tracker__stats { color: #6ee7b7; } /* lint-ignore */
.wp-dark .streak-cell--i0 { background: #064e3b; color: #6ee7b7; } /* lint-ignore */
.wp-dark .streak-cell--i1 { background: #047857; color: #d1fae5; } /* lint-ignore */
.wp-dark .streak-cell--i2 { background: #166534; color: #bbf7d0; } /* lint-ignore */
.wp-dark .streak-cell--i3 { background: #15803d; color: #dcfce7; } /* lint-ignore */
.wp-dark .streak-cell--i4 { background: #14532d; color: #dcfce7; } /* lint-ignore */



.wp-dark .rest-day-message {
  background: var(--color-surface-card);
  border-color: #047857; /* lint-ignore */
}
.wp-dark .rest-day-message__title { color: #86efac; } /* lint-ignore */
.wp-dark .rest-day-message__body { color: #d1fae5; } /* lint-ignore */

/* ── Goal countdown ────────────────────────────────────────────────── */
.goal-countdown {
  flex: 0 0 auto;
  background: var(--wp-countdown-bg);
  border: var(--border-default);
  border-radius: var(--radius-element);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 140px;
  animation: wp-fade-slide-up 0.5s ease 0.15s both;
}
.goal-countdown__icon { font-size: 1.4rem; }
.goal-countdown__body { display: flex; flex-direction: column; gap: 0.1rem; }
.goal-countdown__label {
  font-size: 0.7rem;
  color: var(--wp-countdown-label);
  font-weight: var(--wp-weight-semibold);
  line-height: 1.2;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goal-countdown__number {
  font-size: 1.6rem;
  font-weight: var(--wp-weight-extrabold);
  color: var(--wp-countdown-number);
  line-height: var(--wp-leading-none);
}
.goal-countdown__unit {
  font-size: 0.7rem;
  color: var(--wp-countdown-unit);
  font-weight: var(--wp-weight-semibold);
}
.goal-countdown__target {
  font-size: 0.6rem;
  color: var(--wp-countdown-target);
}

/* ── Near-miss badge nudge ─────────────────────────────────────────── */
.near-miss-nudge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--color-warning-bg);
  border: 0.5px solid var(--color-warning);
  border-radius: var(--radius-element);
  font-size: 0.8rem;
  animation: wp-fade-slide-up 0.5s ease 0.2s both;
}
.near-miss-nudge__emoji { font-size: 1.1rem; }
.near-miss-nudge__text {
  flex: 1;
  color: var(--wp-daily-quote-author);
  font-weight: var(--wp-weight-medium);
}
.near-miss-nudge__bar {
  width: 60px;
  height: 6px;
  background: var(--wp-daily-quote-bg-to);
  border-radius: var(--radius-inset);
  overflow: hidden;
}
.near-miss-nudge__fill {
  height: 100%;
  background: #f59e0b; /* lint-ignore */
  border-radius: var(--radius-inset);
  transition: width 0.8s ease-out;
}
.wp-dark .near-miss-nudge {
  background: var(--color-warning-bg);
  border-color: #b45309; /* lint-ignore */
}
.wp-dark .near-miss-nudge__text { color: #fef3c7; } /* lint-ignore */
.wp-dark .near-miss-nudge__bar { background: #78350f; } /* lint-ignore */
.wp-dark .near-miss-nudge__fill { background: #fbbf24; } /* lint-ignore */

/* ── Session nickname ──────────────────────────────────────────────── */
.summary-card__nickname {
  margin-bottom: 0.5rem;
}
.summary-card__nickname-text {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-style: italic;
  transition: color 0.2s;
}
.summary-card__nickname-text:hover {
  color: rgba(255,255,255,0.7);
}
.summary-card__nickname-form {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.summary-card__nickname-input {
  background: rgba(255,255,255,0.1);
  border: var(--border-emphasis);
  border-radius: var(--radius-inset);
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  flex: 1;
  outline: none;
}
.summary-card__nickname-input:focus {
  border-color: rgba(255,255,255,0.4);
}
.summary-card__nickname-save {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #4ade80; /* lint-ignore */
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-inset);
  cursor: pointer;
  font-size: 0.9rem;
}

/* ── Personalized greeting ─────────────────────────────────────────── */
.today-greeting {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  margin: -0.3rem 0 0.3rem;
  font-weight: var(--wp-weight-medium);
}

/* ── Seasonal celebration greeting ─────────────────────────────────── */
.wp-celebration__seasonal-greeting {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-tertiary);
  margin: 0 0 0.25rem;
}

/* ── "You're on fire" toast ────────────────────────────────────────── */
.wp-fire-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-danger);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-element);
  font-size: 0.85rem;
  font-weight: var(--wp-weight-semibold);
  z-index: var(--wp-z-overlay);
  animation: wp-toast-in 0.4s ease forwards;
  white-space: nowrap;
}
.wp-fire-toast--hide {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: all 0.4s ease;
}
@keyframes wp-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Logged badge bounce ───────────────────────────────────────────── */
@keyframes wp-badge-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  50%  { transform: scale(0.9); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Load dashboard ────────────────────────────────────────────────── */
.load-dashboard {
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-element);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.load-dashboard__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  font-weight: var(--wp-weight-semibold);
  font-size: var(--wp-text-sm);
  cursor: pointer;
  list-style: none;
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  border-bottom: var(--border-default);
}
.load-dashboard__toggle::-webkit-details-marker { display: none; }
.load-dashboard[open] .load-dashboard__toggle { border-bottom-color: var(--wp-border-default); }

.load-dashboard__badge {
  font-size: var(--wp-text-xs);
  font-weight: var(--wp-weight-semibold);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  border: var(--border-default);
  color: var(--color-text-secondary);
}
.load-dashboard__badge--sweet_spot { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success, var(--color-success)); }
.load-dashboard__badge--low        { background: var(--color-info-bg);     color: var(--color-info-light); border-color: var(--color-info); }
.load-dashboard__badge--very_low   { background: var(--color-info-bg);     color: var(--color-info-light); border-color: var(--color-info); }
.load-dashboard__badge--elevated   { background: var(--color-warning-bg);  color: var(--color-warning);   border-color: var(--color-warning); }
.load-dashboard__badge--high_risk  { background: var(--color-danger-bg);   color: var(--color-danger);    border-color: var(--color-danger); }

.load-briefing {
  padding: 0.6rem 0.85rem 0;
}
.load-briefing__sentence {
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 0.25rem;
}

.load-dashboard__body {
  padding: 0.5rem 0.85rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.load-dashboard__section h4 {
  font-size: var(--wp-text-xs);
  font-weight: var(--wp-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  margin: 0 0 0.4rem;
}

/* Training load gauge */
.load-gauge__bar {
  position: relative;
  height: 8px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.load-gauge__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--wp-neutral-400);
  transition: width 0.4s ease;
}
.load-gauge__fill--sweet_spot { background: var(--color-success); }
.load-gauge__fill--low        { background: var(--color-info-light); }
.load-gauge__fill--very_low   { background: var(--color-info-light); }
.load-gauge__fill--elevated   { background: var(--color-warning); }
.load-gauge__fill--high_risk  { background: var(--color-danger); }

.load-gauge__marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--color-text-tertiary);
  border-radius: 1px; /* lint-ignore */
  transform: translateX(-50%);
}
.load-gauge__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: 0.2rem;
}
.load-gauge__description {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Domain readiness bars */
.readiness-row {
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.readiness-row__label {
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.readiness-row__bar {
  height: 6px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.readiness-row__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--wp-neutral-400);
  transition: width 0.4s ease;
}
.readiness-row__fill--fresh    { background: var(--color-success); }
.readiness-row__fill--good     { background: var(--color-success); opacity: 0.7; }
.readiness-row__fill--moderate { background: var(--color-warning); }
.readiness-row__fill--depleted { background: var(--color-danger); }
.readiness-row__desc {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Session parameters */
.load-params {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
}
.load-params dt {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.load-params dd {
  font-size: var(--wp-text-sm);
  color: var(--color-text-primary);
  font-weight: var(--wp-weight-medium);
  margin: 0;
}
.load-params__vs-normal {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--wp-weight-normal);
}

/* Load alerts */
.load-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-element);
  border-left: 4px solid var(--wp-border-default);
  background: var(--color-surface-card);
  margin-bottom: 0.5rem;
  font-size: var(--wp-text-sm);
}
.load-alert--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.load-alert--danger  { border-left-color: var(--color-danger);  background: var(--color-danger-bg);  }
.load-alert--info    { border-left-color: var(--color-info-light); background: var(--color-info-bg);  }
.load-alert p { margin: 0.2rem 0 0; color: var(--color-text-secondary); }
.load-alert__dismiss {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}
.load-alert__dismiss:hover { color: var(--color-text-primary); }

/* ── Footer easter egg ─────────────────────────────────────────────── */
.wp-footer-egg {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--color-surface-card);
  border: var(--border-default);
  color: var(--color-text-tertiary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-element);
  font-size: 0.8rem;
  z-index: var(--wp-z-overlay);
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.wp-footer-egg--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Session complete card ───────────────────────────────────────── */
.session-complete-card {
  text-align: center;
  padding: 1.5rem 1rem;
  margin: 1rem 0;
  border: 0.5px solid var(--color-primary);
}
.session-complete-card__icon { font-size: 2rem; margin: 0 0 0.25rem; }
.session-complete-card__text { color: var(--color-text-secondary); margin: 0; font-size: var(--wp-text-sm); }

/* ── Health prompt cards (wellbeing, symptom, rehab intake) ──────── */
.wellbeing-card {
  background: var(--color-surface-card);
  border: var(--border-default);
  border-left: 4px solid var(--wp-interactive);
  border-radius: var(--radius-element);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.wellbeing-card__header {
  margin-bottom: 0.75rem;
}
.wellbeing-card__title {
  display: block;
  font-weight: var(--wp-weight-bold);
  font-size: 0.95rem;
  color: var(--color-text-primary);
}
.wellbeing-card__sub {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  margin-top: 0.15rem;
}

/* Wellbeing scales (1-7 rating buttons) */
.wellbeing-items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wellbeing-item label {
  display: block;
  font-size: 0.85rem;
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}
.wellbeing-scale {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wellbeing-anchor {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  min-width: 5rem;
  flex-shrink: 0;
}
.wellbeing-anchor:last-child {
  text-align: right;
}
.wellbeing-btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-inset);
  border: var(--border-default);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: var(--wp-weight-semibold);
  cursor: pointer;
  transition: var(--wp-transition-colors);
  padding: 0;
}
.wellbeing-btn:hover {
  border-color: var(--wp-interactive);
  color: var(--wp-interactive);
}
.wellbeing-btn--selected {
  background: var(--wp-interactive);
  border-color: var(--wp-interactive);
  color: #fff;
}

/* Wellbeing actions (Save/Skip buttons) */
.wellbeing-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.wellbeing-actions button {
  padding: 0.4rem 1rem;
  border-radius: var(--radius-inset);
  font-size: 0.85rem;
  font-weight: var(--wp-weight-semibold);
  cursor: pointer;
  border: var(--border-default);
  transition: var(--wp-transition-colors);
}
.wellbeing-actions button:first-child {
  background: var(--wp-interactive);
  border-color: var(--wp-interactive);
  color: #fff;
}
.wellbeing-actions button:first-child:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wellbeing-actions button:first-child:not(:disabled):hover {
  opacity: 0.9;
}
.wellbeing-actions button:last-child {
  background: transparent;
  color: var(--color-text-tertiary);
}
.wellbeing-actions button:last-child:hover {
  color: var(--color-text-primary);
  border-color: var(--wp-border-light);
}

/* Symptom questionnaire */
.symptom-items {
  margin-bottom: 0.5rem;
}
.symptom-prompt-text {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 0.5rem;
}
.symptom-prompt-text em {
  color: var(--color-text-tertiary);
}
.symptom-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  cursor: pointer;
}
.symptom-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--wp-interactive);
  flex-shrink: 0;
}
.symptom-label {
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

/* ── Constraints summary (between tabs and panels) ──────────────── */
.constraints-summary {
  background: var(--color-surface-card);
  border: var(--border-default);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-element);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.constraints-summary__title {
  font-size: 0.85rem;
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
}
.constraints-summary__title::-webkit-details-marker {
  display: none;
}
.constraints-summary__title::before {
  content: '\25B8 ';
  color: var(--color-text-tertiary);
}
details[open] > .constraints-summary__title::before {
  content: '\25BE ';
}

/* ── Session context warnings ───────────────────────────────────── */
.session-context {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-element);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  border: var(--border-default);
}
.session-context--warning {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-text-primary);
}
.session-context--info {
  background: var(--color-info-bg);
  border-color: var(--color-info, var(--color-info));
  color: var(--color-text-primary);
}
.session-context--caution {
  background: var(--color-warning-bg);
  border-color: var(--color-warning, var(--color-warning));
  color: var(--color-text-primary);
}
.session-context--opportunity {
  background: var(--color-success-bg);
  border-color: var(--color-success, var(--color-success));
  color: var(--color-text-primary);
}

/* ── Dark mode overrides for health prompts ─────────────────────── */
.wp-dark .wellbeing-card {
  border-left-color: var(--wp-interactive);
}
.wp-dark .wellbeing-btn {
  background: var(--color-surface-muted);
  border-color: var(--wp-border-default);
  color: var(--color-text-secondary);
}
.wp-dark .wellbeing-btn--selected {
  background: var(--wp-interactive);
  border-color: var(--wp-interactive);
  color: #fff;
}
.wp-dark .constraints-summary {
  border-left-color: var(--color-warning);
}

/* ── Mobile responsive for health prompts ───────────────────────── */
@media (max-width: 640px) {
  .wellbeing-scale {
    flex-wrap: wrap;
  }
  .wellbeing-anchor {
    min-width: auto;
    width: 100%;
    text-align: left;
  }
  .wellbeing-anchor:last-child {
    text-align: left;
  }
  .wellbeing-btn {
    width: 2.2rem;
    height: 2.2rem;
  }
  .wellbeing-actions {
    flex-direction: column;
  }
  .wellbeing-actions button {
    width: 100%;
  }
}

/* ── Mode toggle bar (smart gate skip) ─────────────────────────── */
.mode-toggle-bar {
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.8rem;
}
.mode-toggle__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mode-toggle__icon {
  font-size: 1.1rem;
}
.mode-toggle__status {
  font-size: 0.9rem;
  font-weight: var(--wp-weight-semibold);
  flex: 1;
  min-width: 0;
}
.mode-toggle__switch {
  font-size: 0.82rem;
  white-space: nowrap;
  text-decoration: none;
}

/* ── Template inline style cleanup — component utilities ─────────── */

/* Finisher block */
.wp-finisher-block {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-warning-bg);
  border: var(--border-default);
  border-radius: var(--radius-element);
  font-size: 13px;
  line-height: 1.4;
}
.wp-finisher-header {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-warning-text);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wp-finisher-optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.wp-finisher-done-badge {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-accent);
  font-weight: 500;
}
.wp-finisher-pre {
  margin: 0 0 0.4rem;
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--color-text-secondary);
}
.wp-finisher-scaling {
  font-size: 12px;
  color: var(--color-warning-text);
  font-style: italic;
}

/* Scale detail box */
.wp-scale-detail-box {
  padding: 0.6rem 0.75rem;
  background: var(--color-surface-input);
  border: var(--border-default);
  border-radius: var(--radius-element);
}
.wp-scale-label {
  display: block;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 0.3rem;
}

/* Strength format banner */
.wp-str-format-banner {
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-element);
  background: var(--color-surface-input);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.wp-str-format-badge {
  font-weight: 500;
  font-size: 13px;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-element);
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}

/* Metrics badges */
.wp-training-state-badge {
  border-radius: var(--radius-element);
  padding: 0.3rem 0.8rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 0.2rem;
}
.wp-ontrack-badge {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
  border-radius: var(--radius-element);
  padding: 0.18rem 0.6rem;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.wp-active-badge {
  background: var(--color-primary);
  color: var(--color-text-primary);
  border-radius: var(--radius-element);
  padding: 0.12rem 0.45rem;
  font-size: 11px;
  font-weight: 500;
}
.wp-acr-badge {
  border-radius: var(--radius-element);
  padding: 0.18rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.wp-acr-value {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
}

/* Science digest items */
.wp-digest-challenge { border-left: 0.5px solid var(--color-danger); }
.wp-digest-refinement { border-left: 0.5px solid var(--color-warning); }

/* Science relevance tags */
.wp-relevance-tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  background: var(--color-primary-wash);
  color: var(--color-text-accent);
}

/* Mobile date picker legend dots */
.wp-date-legend-dot {
  width: 1.2rem;
  height: 4px;
  border-radius: var(--radius-inset);
}
.wp-date-legend-dot--easy { background: var(--color-primary-light); }
.wp-date-legend-dot--moderate { background: var(--color-warning); }
.wp-date-legend-dot--hard { background: var(--color-danger); }
.wp-date-legend-dot--rest { background: rgba(255,255,255,0.15); }

/* Progress card privacy badges */
.wp-privacy-badge {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
}
.wp-privacy-badge--public { background: var(--color-success-bg); color: var(--color-success); }
.wp-privacy-badge--squad { background: var(--color-secondary); color: var(--color-secondary-text); }
.wp-privacy-badge--private { background: var(--color-surface-input); color: var(--color-text-primary); }

/* Progress card share tabs */
.wp-share-tab {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
}
.wp-share-tab--active { background: var(--color-primary); color: var(--color-text-primary); font-weight: 500; }
.wp-share-tab--inactive { background: var(--color-surface-input); color: var(--color-text-primary); }

/* ── Form field group ────────────────────────────────────── */
.wp-field {
  margin-bottom: var(--wp-space-md, 1rem);
}
.wp-field > label:not(.wp-checkbox-label) {
  display: block;
  font-size: var(--wp-text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.375rem;
}
.wp-field .wp-input,
.wp-field select {
  width: 100%;
}
.wp-field-hint {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  margin: 0.35rem 0 0 0;
  line-height: 1.4;
}
.wp-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--wp-text-sm);
  font-weight: 500;
  line-height: 1.4;
}
.wp-checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── Me / Profile sub-navigation ───────────────────────── */
.me-subnav {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--border-default);
  padding-bottom: 0;
}
.me-subnav__link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: var(--wp-text-sm);
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-decoration: none;
  border-bottom: 2px solid transparent; /* lint-ignore */
  margin-bottom: -1px;
}
.me-subnav__link--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-primary);
}

/* ── Me / Settings — alpha status cards ─────────────────── */
.wp-alpha-card {
  color: #fff; /* lint-ignore */
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: none;
  border-radius: var(--radius-element);
}
.wp-alpha-card--active    { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } /* lint-ignore */
.wp-alpha-card--accepted  { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); } /* lint-ignore */
.wp-alpha-card--pending   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } /* lint-ignore */
.wp-alpha-card--apply     { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* lint-ignore */
.wp-alpha-card__title {
  margin: 0 0 0.5rem 0;
  font-weight: 500;
  font-size: var(--wp-text-base);
}
.wp-alpha-card__body {
  margin: 0 0 0.75rem 0;
  font-size: var(--wp-text-sm);
  opacity: 0.95;
}
.wp-alpha-card__cta {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: #fff; /* lint-ignore */
  font-weight: 500;
  border-radius: 6px; /* lint-ignore */
  text-decoration: none;
  font-size: var(--wp-text-sm);
}
.wp-alpha-card--active   .wp-alpha-card__cta { color: #059669; } /* lint-ignore */
.wp-alpha-card--accepted .wp-alpha-card__cta { color: #1e40af; } /* lint-ignore */
.wp-alpha-card--pending  .wp-alpha-card__cta { color: #d97706; } /* lint-ignore */
.wp-alpha-card--apply    .wp-alpha-card__cta { color: #667eea; } /* lint-ignore */

/* ── Me / Settings — Pro badge and locked CTA ─────────── */
.ff-badge--pro {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); /* lint-ignore */
  color: #1f2937; /* lint-ignore */
}
.ff-cta-link--pro {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* lint-ignore */
}

/* ── Me / Settings — info cards ─────────────────────────── */
.wp-card-side-primary {
  border-left: 3px solid var(--color-primary);
  padding: 0.9rem 1rem;
}
.wp-card-side-neutral {
  border-left: 3px solid var(--wp-border, rgba(128,128,128,0.3)); /* lint-ignore */
  padding: 0.9rem 1rem;
}
.wp-card-side-primary p,
.wp-card-side-neutral p {
  margin: 0;
}
.wp-card-side-primary p + p,
.wp-card-side-neutral p + p {
  margin-top: 0.2rem;
}

/* ── Me / Settings — feature-flag rows ──────────────────── */
.ff-group { margin-bottom: 2rem; }
.ff-group-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 0.5rem 0;
}
.ff-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: var(--border-default);
}
.ff-row:last-child { border-bottom: none; }
.ff-label { font-size: 0.9rem; font-weight: 500; }
.ff-desc { font-size: 0.78rem; color: var(--color-text-tertiary); margin-top: 0.1rem; }
.ff-badge {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 999px; /* lint-ignore */
  margin-left: 0.5rem;
  vertical-align: middle;
  background: var(--color-primary);
  color: #fff; /* lint-ignore */
}
.ff-badge--success { background: var(--color-success); }
.ff-badge-coach { background: var(--color-secondary); }
.ff-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ff-toggle input { opacity: 0; width: 0; height: 0; }
.ff-slider {
  position: absolute; inset: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.15);
  border-radius: 999px; /* lint-ignore */
  transition: background 0.2s;
}
html.wp-dark .ff-slider { background: rgba(255,255,255,0.15); }
.ff-slider:before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.ff-toggle input:checked + .ff-slider { background: var(--color-success); }
.ff-toggle input:checked + .ff-slider:before { transform: translateX(20px); }
.ff-toggle input:disabled + .ff-slider { opacity: 0.5; cursor: wait; }
.ff-toggle--disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.ff-slider--off { background: rgba(0,0,0,0.15); cursor: not-allowed; }
html.wp-dark .ff-slider--off { background: rgba(255,255,255,0.15); }
.ff-cta-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.3em 0.8em;
  border-radius: 6px; /* lint-ignore */
  background: var(--color-primary);
  color: #fff; /* lint-ignore */
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ff-coach-section { margin-top: 2rem; }
.ff-coach-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--color-text-tertiary);
}
.ff-cycle-details {
  padding: 0.75rem 1rem 1rem;
  background: var(--wp-surface-alt, rgba(128,128,128,0.06));
  border-top: 1px solid var(--wp-border, rgba(128,128,128,0.15)); /* lint-ignore */
}
.ff-cycle-consent {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  margin: 0 0 0.75rem;
}
.ff-cycle-inputs { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ff-cycle-field { display: flex; flex-direction: column; gap: 0.2rem; }
.ff-cycle-field label { font-size: 0.8rem; font-weight: 500; }
.ff-cycle-field input {
  width: 90px;
  padding: 0.3em 0.5em;
  border: 1px solid var(--wp-border, #ccc); /* lint-ignore */
  border-radius: 5px; /* lint-ignore */
  font-size: 0.9rem;
  background: var(--wp-surface);
  color: var(--wp-text);
}
.ff-cycle-hint { font-size: 0.72rem; color: var(--color-text-tertiary); }

/* ── Bodyweight history table (me/index.html) ───────────────────── */
.bw-history-table { font-size: 0.8rem; border-collapse: collapse; margin-top: 0.5rem; width: 100%; max-width: 260px; }
.bw-history-table th { text-align: left; color: var(--wp-text-muted); font-weight: 600; padding: 0.25rem 0.5rem 0.25rem 0; border-bottom: 1px solid var(--wp-border-default); } /* lint-ignore */
.bw-history-table td { padding: 0.3rem 0.5rem 0.3rem 0; color: var(--wp-text-secondary); border-bottom: 1px solid var(--wp-surface-muted); } /* lint-ignore */
.bw-history-table tr:last-child td { border-bottom: none; }
.bw-sparkline { display: block; width: 100%; max-width: 260px; height: 52px; margin-top: 0.75rem; border-radius: 4px; background: var(--wp-surface-muted); } /* lint-ignore */

/* ── Strength card (_strength_card.html) ────────────────────────── */
.str-card { border: 1px solid var(--wp-border-default); border-radius: 6px; padding: 0.75rem; margin-bottom: 0.75rem; background: var(--wp-surface-card); } /* lint-ignore */
.str-card.acc-row--logged { background: var(--wp-success-bg); border-color: var(--wp-success); } /* lint-ignore */
.str-card-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.str-e1rm-badge { font-size: 0.78rem; color: var(--wp-text-muted); margin-left: auto; white-space: nowrap; } /* lint-ignore */
.str-anchor-panel { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.35rem 0.5rem; background: var(--wp-surface-page); border-radius: 4px; font-size: 0.85rem; margin-bottom: 0.4rem; } /* lint-ignore */
.str-anchor-sep { color: var(--wp-border-default); margin: 0 0.2rem; }
.str-pct-readout { font-size: 0.8rem; color: var(--wp-text-muted); font-style: italic; } /* lint-ignore */
.str-wave-grid { display: flex; flex-direction: column; gap: 0.2rem; }
.str-set-row { display: flex; align-items: center; gap: 0.4rem; }
.str-set-label { font-size: 0.8rem; color: var(--wp-text-muted); width: 3.2rem; flex-shrink: 0; } /* lint-ignore */
.str-unit-label { font-size: 0.8rem; color: var(--wp-text-muted); } /* lint-ignore */
.str-no-history-hint { font-size: 0.8rem; color: var(--wp-text-muted); font-style: italic; margin-top: 0.3rem; } /* lint-ignore */
.str-rpe-session-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.str-rpe-session-label { font-size: 0.85rem; color: var(--wp-text-secondary); } /* lint-ignore */
.str-rpe-target-hint { font-size: 0.8rem; color: var(--wp-text-muted); font-style: italic; } /* lint-ignore */
.str-advanced-options { margin-bottom: 0.4rem; }
.str-advanced-options summary { font-size: 0.85rem; color: var(--wp-text-secondary); cursor: pointer; padding: 0.25rem 0; } /* lint-ignore */
.str-advanced-options summary:hover { color: var(--wp-text-primary); } /* lint-ignore */
.str-confidence-banner { font-size: 0.78rem; color: var(--wp-text-muted); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.35rem; } /* lint-ignore */
.str-confidence-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.str-confidence-dot.high { background: var(--wp-success); } /* lint-ignore */
.str-confidence-dot.moderate { background: var(--wp-warning); } /* lint-ignore */
.str-confidence-dot.low { background: var(--wp-text-muted); } /* lint-ignore */
.str-diagnostic-banner { background: var(--wp-info-bg); border: 1px solid var(--wp-border-default); border-radius: 6px; padding: 0.6rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.85rem; } /* lint-ignore */
.str-diagnostic-badge { display: inline-block; background: var(--wp-brand); color: var(--wp-surface-card); font-size: 0.7rem; font-weight: 600; border-radius: 3px; padding: 0.1rem 0.4rem; letter-spacing: 0.03em; margin-bottom: 0.35rem; } /* lint-ignore */
.str-diagnostic-purpose { color: var(--wp-text-secondary); } /* lint-ignore */
.str-top-set-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.str-top-set-label { font-size: 0.85rem; color: var(--wp-text-secondary); } /* lint-ignore */
.str-warmup-section { margin-bottom: 0.75rem; }
.str-warmup-label { font-size: 0.8rem; color: var(--wp-text-muted); margin-bottom: 0.35rem; } /* lint-ignore */
.str-warmup-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; font-size: 0.85rem; }
.str-warmup-check { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; flex: 1; }
.str-plate-math { font-size: 0.78rem; color: var(--wp-text-muted); margin-left: auto; } /* lint-ignore */
.str-warmup-done { color: var(--wp-success); font-size: 0.9rem; } /* lint-ignore */
.str-build-sets-label { font-size: 0.78rem; color: var(--wp-text-muted); margin-bottom: 0.2rem; } /* lint-ignore */
.str-build-sets-list { display: flex; flex-direction: column; gap: 0.2rem; }
.str-build-set-row { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.str-build-set-check { flex-shrink: 0; }
.str-build-set-weight { font-weight: 600; } /* lint-ignore */
.str-col-headers { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; font-size: 0.78rem; color: var(--wp-text-muted); font-weight: 500; } /* lint-ignore */

/* ── Onboarding wizard (onboarding/index.html) ───────────────────── */
.wizard-wrap { max-width: 640px; margin: 0 auto; }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.step-indicator { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--wp-text-primary); color: var(--wp-surface-card); font-size: 0.8rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } /* lint-ignore */
.step-dot.done { background: var(--wp-success); } /* lint-ignore */
.step-dot.current { background: var(--wp-brand); } /* lint-ignore */
.wizard-nav { display: flex; gap: 1rem; margin-top: 1.5rem; }
.radio-group label, .choice-group label { display: block; margin-bottom: 0.5rem; cursor: pointer; }
.slider-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.slider-row input[type=range] { flex: 1; }
.slider-val { width: 2rem; text-align: center; font-weight: bold; } /* lint-ignore */
.optional-note { font-size: 0.85rem; color: var(--wp-text-muted); margin-bottom: 0.75rem; } /* lint-ignore */
.metric-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.metric-row label { min-width: 200px; }
.metric-row input { width: 90px; }
.metric-row select { width: 70px; }
.wizard-skip { text-align: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--wp-border-default); } /* lint-ignore */
.wizard-skip form { display: inline; }
.wizard-skip button { background: none; border: none; color: var(--wp-text-muted); font-size: 0.9rem; cursor: pointer; text-decoration: underline; padding: 0.25rem 0.5rem; } /* lint-ignore */
.wizard-skip button:hover { color: var(--wp-text-secondary); } /* lint-ignore */

/* ── Training log (workouts/index.html) ─────────────────────────── */
.workouts-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.workouts-entry { border: 1px solid var(--wp-border-default); border-radius: 4px; margin-bottom: 0.5rem; background: var(--wp-surface-card); } /* lint-ignore */
.workouts-entry__header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; flex-wrap: wrap; cursor: pointer; user-select: none; }
.workouts-entry__header:hover { background: var(--wp-surface-page); } /* lint-ignore */
.workouts-entry__date { font-weight: 600; min-width: 6.5rem; font-size: 0.9rem; } /* lint-ignore */
.workouts-entry__date a { color: inherit; text-decoration: none; }
.workouts-entry__date a:hover { text-decoration: underline; }
.workouts-entry__type { font-size: 0.8rem; color: var(--wp-text-muted); min-width: 4.5rem; } /* lint-ignore */
.workouts-entry__desc { flex: 1; font-size: 0.85rem; color: var(--wp-text-primary); word-break: break-word; min-width: 0; } /* lint-ignore */
.workouts-entry__score { font-size: 0.85rem; color: var(--wp-text-secondary); white-space: nowrap; } /* lint-ignore */
.workouts-entry__score--empty { color: var(--wp-text-muted); font-style: italic; } /* lint-ignore */
.workouts-entry__meta { font-size: 0.8rem; color: var(--wp-text-muted); white-space: nowrap; } /* lint-ignore */
.workouts-entry__expand-hint { font-size: 0.75rem; color: var(--wp-text-muted); white-space: nowrap; flex-shrink: 0; } /* lint-ignore */
.workouts-entry__expand-hint::after { content: ' ▼'; }
.workouts-entry--expanded .workouts-entry__expand-hint::after { content: ' ▲'; }
.workouts-entry__tag { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.4rem; border-radius: 3px; background: var(--wp-surface-muted); color: var(--wp-text-secondary); white-space: nowrap; } /* lint-ignore */
.workouts-entry__tag--engine { background: var(--wp-surface-muted); color: var(--wp-brand); } /* lint-ignore */
.workouts-entry__tag--gymnastics { background: var(--wp-success-bg); color: var(--wp-success); } /* lint-ignore */
.workouts-entry__tag--strength { background: var(--wp-danger-bg); color: var(--wp-danger); } /* lint-ignore */
.workouts-entry__tag--mixed { background: var(--wp-warning-bg); color: var(--wp-warning); } /* lint-ignore */
.workouts-entry__timestamp { font-size: 0.75rem; color: var(--wp-text-muted); white-space: nowrap; } /* lint-ignore */
.workouts-entry__body { display: none; padding: 0.5rem 0.75rem 0.75rem; border-top: 1px solid var(--wp-border-default); background: var(--wp-surface-page); } /* lint-ignore */
.workouts-entry--expanded .workouts-entry__body { display: block; }
.workouts-body__section { margin-bottom: 0.6rem; }
.workouts-body__label { font-size: 0.75rem; font-weight: 600; color: var(--wp-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; } /* lint-ignore */
.workouts-body__value { font-size: 0.85rem; color: var(--wp-text-primary); } /* lint-ignore */
.workouts-body__actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.workouts-body__actions .btn-link { background: none; border: none; cursor: pointer; font-size: 0.8rem; padding: 0 0.25rem; color: var(--wp-brand); text-decoration: underline; } /* lint-ignore */
.workouts-body__actions .btn-link.danger { color: var(--wp-danger); } /* lint-ignore */
.workouts-edit-warning { padding: 0.4rem 0.75rem; border: 1px solid var(--wp-warning); border-radius: 3px; background: var(--wp-warning-bg); font-size: 0.8rem; color: var(--wp-warning); margin-bottom: 0.5rem; display: none; } /* lint-ignore */
.workouts-entry--editing .workouts-edit-warning { display: block; }
.workouts-edit-form { display: none; margin-top: 0.5rem; }
.workouts-entry--editing .workouts-edit-form { display: block; }
.workouts-edit-form .wp-edit-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; margin-bottom: 0.5rem; }
.workouts-edit-form .wp-edit-field { display: flex; flex-direction: column; gap: 0.2rem; }
.workouts-edit-form label { font-size: 0.8rem; color: var(--wp-text-secondary); } /* lint-ignore */
.workouts-edit-form .wp-inline-input, .workouts-edit-form .wp-inline-input select { font-size: 0.85rem; padding: 0.2rem 0.35rem; border: 1px solid var(--wp-border-default); border-radius: 3px; } /* lint-ignore */
.workouts-edit-form .wp-score-value { width: 5rem; }
.workouts-edit-form .wp-rpe { width: 3.5rem; }
.workouts-edit-form .wp-sets { width: 3.5rem; }
.workouts-edit-form .wp-load { width: 4rem; }
.workouts-edit-form .wp-reps { width: 4.5rem; }
.workouts-edit-form .wp-mov-key { width: 10rem; }
.workouts-edit-form .wp-edit-actions { display: flex; gap: 0.5rem; align-items: center; }
.workouts-pagination { display: flex; gap: 0.75rem; align-items: center; justify-content: center; padding: 1rem 0; font-size: 0.9rem; }
.workouts-pagination a { color: var(--wp-brand); text-decoration: none; } /* lint-ignore */
.workouts-pagination a:hover { text-decoration: underline; }
.workouts-pagination__info { color: var(--wp-text-muted); } /* lint-ignore */

/* ── Calibration (calibration/index.html) ───────────────────────── */
.cal-section { margin-bottom: 2rem; }
.cal-section-sub { font-size: 0.8rem; font-weight: 400; color: var(--wp-text-muted); margin-left: 0.4rem; }
.cal-table-wrap { overflow-x: auto; max-width: 100%; margin-bottom: 0.5rem; }
.cal-table { border-collapse: collapse; font-size: 0.9rem; margin-bottom: 0; min-width: max-content; }
.cal-table th, .cal-table td { padding: 0.25rem 0.6rem; border: 1px solid var(--wp-text-secondary); text-align: left; } /* lint-ignore */
.cal-table th { background: var(--wp-text-primary); color: var(--wp-surface-page); } /* lint-ignore */
.cal-help { font-size: 0.85rem; color: var(--wp-text-muted); margin: 0.25rem 0 0.5rem; } /* lint-ignore */
.cal-add-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-top: 0.75rem; }
.cal-add-form label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; }
.cal-add-form input, .cal-add-form select { font-size: 0.9rem; padding: 0.2rem 0.4rem; }
.cal-add-form-hint { width: 100%; padding: 0.5rem 0.6rem; background: var(--wp-surface-muted); border-radius: 4px; border-left: 3px solid var(--wp-text-muted); font-size: 0.82rem; color: var(--wp-text-muted); margin: 0.25rem 0; } /* lint-ignore */
/* Glossary row */
.cal-glossary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.8rem; background: var(--wp-surface-muted); border-radius: 6px; }
.cal-gloss-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; }
.cal-gloss-term { color: var(--wp-text-primary); }
.cal-gloss-desc { color: var(--wp-text-muted); }
/* Breakpoint structured editor */
.cal-bp-editor { margin-top: 0.5rem; }
.cal-bp-table { width: auto; }
.cal-bp-input { width: 7rem; font-size: 0.9rem; padding: 0.2rem 0.4rem; }
.cal-col-actions { width: 4rem; text-align: center; } /* lint-ignore */
.cal-row-del { padding: 0.1rem 0.4rem; font-size: 0.85rem; border: none; background: none; cursor: pointer; }
.cal-inline-error { display: block; font-size: 0.75rem; color: var(--wp-text-danger); margin-top: 0.1rem; }
.cal-input-error { border-color: var(--wp-text-danger) !important; } /* lint-ignore */
.cal-bp-actions { margin: 0.4rem 0; }
.cal-save-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
/* Order warning */
.cal-warn { font-size: 0.82rem; color: var(--wp-text-warning, #b85c00); background: var(--wp-surface-warning, #fff8ec); border: 1px solid var(--wp-text-warning, #b85c00); border-radius: 4px; padding: 0.3rem 0.6rem; margin: 0.4rem 0; } /* lint-ignore */
/* Preview panel */
.cal-preview { margin-top: 1rem; padding: 0.75rem 1rem; background: var(--wp-surface-muted); border-radius: 6px; border-left: 3px solid var(--wp-color-primary, #3b82f6); }
.cal-preview-table { width: auto; }
/* Anchor groups */
.cal-anchor-group { margin-bottom: 0.75rem; border: 1px solid var(--wp-border-default); border-radius: 6px; overflow: hidden; }
.cal-anchor-summary { cursor: pointer; padding: 0.5rem 0.75rem; background: var(--wp-surface-muted); user-select: none; list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.cal-anchor-summary::-webkit-details-marker { display: none; }
.cal-anchor-count { font-weight: 400; }
.cal-anchor-group .cal-table { margin-bottom: 0; width: 100%; }
.cal-add-details { border: 1px dashed var(--wp-border-default); }
.cal-add-details .cal-add-form { padding: 0.75rem; }
/* Direction badges */
.cal-direction-badge { font-size: 0.78rem; padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap; }
.cal-direction-badge--lower { background: var(--wp-surface-info, #e0f0ff); color: var(--wp-text-info, #1a5fa8); } /* lint-ignore */
.cal-direction-badge--higher { background: var(--wp-surface-success, #e6f4ea); color: var(--wp-text-success, #1a6632); } /* lint-ignore */
textarea.cal-bp-textarea { font-family: monospace; font-size: 0.9rem; width: 100%; max-width: 18rem; min-height: 8rem; box-sizing: border-box; }

/* ── Movements admin table (movements/index.html) ───────────────── */
.movements-table-wrap { overflow: auto; margin: 0.5rem 0; max-height: 70vh; border: 1px solid var(--wp-border-default); } /* lint-ignore */
.movements-table { border-collapse: collapse; font-size: 0.9rem; }
.movements-table th, .movements-table td { padding: 0.4rem 0.625rem; border: 1px solid var(--wp-border-default); text-align: left; vertical-align: top; } /* lint-ignore */
.movements-table th { background: var(--wp-surface-muted); white-space: nowrap; } /* lint-ignore */
.movements-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--wp-border-default); } /* lint-ignore */
.movements-table th:nth-child(1), .movements-table td:nth-child(1) { position: sticky; left: 0; z-index: 1; background: var(--wp-surface-card); min-width: 7rem; box-shadow: 1px 0 0 var(--wp-border-default); } /* lint-ignore */
.movements-table thead th:nth-child(1) { z-index: 3; background: var(--wp-surface-muted); } /* lint-ignore */
.movements-table th:nth-child(2), .movements-table td:nth-child(2) { position: sticky; left: 7rem; z-index: 1; background: var(--wp-surface-card); min-width: 9rem; box-shadow: 1px 0 0 var(--wp-border-default); } /* lint-ignore */
.movements-table thead th:nth-child(2) { z-index: 3; background: var(--wp-surface-muted); } /* lint-ignore */
.movements-table-wrap .movements-col-extra { display: none; }
.movements-table-wrap.show-all-columns .movements-col-extra { display: table-cell; }
.movements-inline-input { width: 100%; max-width: 8rem; box-sizing: border-box; }
.movements-inline-select { max-width: 8rem; }
.movements-cell-wrap { max-width: 10rem; word-break: break-word; }
.movements-help { font-size: 0.9rem; color: var(--wp-text-muted); margin: 0.25rem 0 0.5rem; } /* lint-ignore */
.movements-view-toggle { margin-left: 0; }
.movements-unit-badge { font-size: 0.8em; color: var(--wp-text-muted); font-weight: normal; white-space: nowrap; } /* lint-ignore */
.movements-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.movements-search { display: flex; align-items: center; gap: 0.35rem; }
.movements-search input[type="search"] { min-width: 0; }
.movements-actions .btn, .movements-actions button[type="submit"], .movements-actions button[type="button"] { display: inline-block; padding: 0.45rem 1.1rem; font-size: 0.9rem; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; } /* lint-ignore */
.movements-actions a.btn { text-decoration: none; box-sizing: border-box; }
.movements-table .btn-secondary { padding: 0.35rem 0.75rem; font-size: 0.85rem; border-radius: 6px; border: none; background: var(--wp-surface-muted); color: var(--wp-text-secondary); cursor: pointer; font-family: inherit; } /* lint-ignore */
.movements-table .btn-secondary:hover { opacity: 0.85; }
/* split controls toolbar */
.movements-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.movements-controls-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.movements-controls-data { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.movements-controls .btn, .movements-controls button[type="submit"], .movements-controls button[type="button"] { display: inline-block; padding: 0.45rem 1.1rem; font-size: 0.9rem; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; } /* lint-ignore */
.movements-controls a.btn { text-decoration: none; box-sizing: border-box; }
/* dirty-state row highlight */
.movements-table tbody tr.movements-row--dirty { background: #fffbe6; }
@media (prefers-color-scheme: dark) { .movements-table tbody tr.movements-row--dirty { background: #2a2600; } } /* lint-ignore */
.movements-table tbody tr.movements-row--dirty td:nth-child(1), .movements-table tbody tr.movements-row--dirty td:nth-child(2) { background: #fffbe6; } /* lint-ignore */
@media (prefers-color-scheme: dark) { .movements-table tbody tr.movements-row--dirty td:nth-child(1), .movements-table tbody tr.movements-row--dirty td:nth-child(2) { background: #2a2600; } } /* lint-ignore */
/* unsaved-changes banner */
.movements-dirty-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; background: #fff8e1; border: 1px solid #f9a825; border-radius: 6px; font-size: 0.9rem; color: #5f4000; } /* lint-ignore */
@media (prefers-color-scheme: dark) { .movements-dirty-banner { background: #2a1f00; border-color: #7a5500; color: #ffd866; } } /* lint-ignore */
/* per-row Save + Details action buttons */
.movements-table td.actions { white-space: nowrap; }
/* mobile drawer */
.movements-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; }
.movements-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 100vw); background: var(--wp-surface-card); border-left: 1px solid var(--wp-border-default); z-index: 201; display: flex; flex-direction: column; overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,0.18); } /* lint-ignore */
.movements-drawer[hidden] { display: none; }
.movements-drawer-overlay[hidden] { display: none; }
.movements-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--wp-border-default); background: var(--wp-surface-muted); }
.movements-drawer-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--wp-text-muted); padding: 0.2rem 0.4rem; border-radius: 4px; }
.movements-drawer-close:hover { background: var(--wp-surface-muted); color: var(--wp-text-primary); }
.movements-drawer-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.movements-drawer-input { width: 100%; box-sizing: border-box; padding: 0.4rem 0.6rem; border: 1px solid var(--wp-border-light); border-radius: 4px; font-size: 0.95rem; font-family: inherit; background: var(--wp-surface-card); color: var(--wp-text-primary); }
.movements-drawer-hint { font-size: 0.8rem; color: var(--wp-text-muted); margin: 0.2rem 0 0; }
.movements-drawer-actions { display: flex; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--wp-border-default); margin-top: auto; }
body.movements-drawer-open { overflow: hidden; }
/* add movement form two-column layout */
.movements-add-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .movements-add-layout { grid-template-columns: 1fr; } } /* lint-ignore */
.movements-add-preview { background: var(--wp-surface-muted); border: 1px solid var(--wp-border-default); border-radius: 8px; padding: 1rem; }
.movements-add-preview-title { margin: 0 0 0.5rem; font-size: 1rem; }
.movements-add-preview-block { display: flex; flex-direction: column; gap: 0.4rem; }
.movements-preview-row { display: flex; gap: 0.75rem; align-items: baseline; }
.movements-preview-label { font-size: 0.8rem; color: var(--wp-text-muted); min-width: 7rem; flex-shrink: 0; }
.movements-preview-wod { font-family: monospace; font-size: 0.85rem; background: var(--wp-surface-card); border: 1px solid var(--wp-border-default); border-radius: 4px; padding: 0.5rem 0.75rem; white-space: pre-wrap; min-height: 2.5rem; }
.movements-preview-divider { border: none; border-top: 1px solid var(--wp-border-default); margin: 0.5rem 0; }
.movements-preview-placeholder { color: var(--wp-text-muted); font-style: italic; }
.movements-field-hint { font-size: 0.8rem; color: var(--wp-text-muted); margin: 0.2rem 0 0; }
.movements-required { color: #c0392b; font-size: 0.85em; }
.movements-add-key-input { font-family: monospace; }

/* ── Parse review table (today/parse.html) ──────────────────────── */
.parse-mv-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.parse-mv-table th, .parse-mv-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 0.5px solid var(--wp-border-default); vertical-align: middle; } /* lint-ignore */
.parse-mv-table thead tr { border-bottom: 0.5px solid var(--wp-border-default); } /* lint-ignore */
.parse-mv-table th { color: var(--color-text-tertiary); font-weight: 500; }
.parse-mv-input { border: 0.5px solid var(--wp-border-default); border-radius: 0.25rem; padding: 0.2rem 0.4rem; font-size: 0.875rem; background: var(--color-surface-muted); }
.parse-mv-input--name { width: 100%; }
.parse-mv-input--num { width: 5rem; text-align: right; }
.parse-mv-input--new { border-style: dashed; background: transparent; }
@media (max-width: 640px) {
  .parse-mv-table, .parse-mv-table thead, .parse-mv-table tbody, .parse-mv-table tr, .parse-mv-table th, .parse-mv-table td { display: block; }
  .parse-mv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .parse-mv-table tr { background: var(--wp-surface-card, #fff); border: 0.5px solid var(--wp-border-default); border-radius: 0.375rem; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
  .parse-mv-table td { border-bottom: none; padding: 0.2rem 0; }
  .parse-mv-table td::before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); display: block; margin-bottom: 0.15rem; }
  .parse-mv-table td:empty { display: none; }
  .parse-mv-input--name { width: 100%; box-sizing: border-box; }
  .parse-mv-input--num { width: 100%; box-sizing: border-box; text-align: left; }
}

/* ── Billing page (me/billing.html) ─────────────────────────────── */
.billing-plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.billing-plan-name { font-size: 1.4rem; font-weight: 700; color: var(--wp-text-primary); margin: 0; } /* lint-ignore */
.billing-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 99px; } /* lint-ignore */
.billing-badge--active { background: var(--wp-success-bg); color: var(--wp-success); } /* lint-ignore */
.billing-badge--trial  { background: var(--wp-info-bg, #eff6ff); color: var(--wp-brand); } /* lint-ignore */
.billing-badge--warning { background: var(--wp-warning-bg); color: var(--wp-warning); } /* lint-ignore */
.billing-badge--free   { background: var(--wp-surface-muted); color: var(--wp-text-muted); } /* lint-ignore */
.billing-features-list { list-style: none; padding: 0; margin: 0; }
.billing-features-list li { padding: 0.3rem 0; font-size: 0.9rem; color: var(--wp-text-secondary); } /* lint-ignore */
.billing-features-list li::before { content: '✓ '; color: var(--wp-success); font-weight: 700; } /* lint-ignore */
.billing-cancel-confirm { margin-top: 0.75rem; }
.billing-compare-table { width: 100%; border-collapse: collapse; margin-top: 0.25rem; }
.billing-compare-feature-col { width: 55%; }
.billing-compare-plan-col { width: 22.5%; text-align: center; padding: 0.5rem 0.25rem 0.75rem; font-size: 0.9rem; vertical-align: top; } /* lint-ignore */
.billing-compare-plan-col--current { background: var(--wp-info-bg, #eff6ff); border-radius: 6px 6px 0 0; }
.billing-compare-plan-name { font-weight: 700; font-size: 1rem; color: var(--wp-text-primary); display: block; } /* lint-ignore */
.billing-compare-feature { padding: 0.45rem 0; font-size: 0.88rem; color: var(--wp-text-secondary); border-bottom: 1px solid var(--wp-border-default); } /* lint-ignore */
.billing-compare-val { text-align: center; padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--wp-border-default); }
.billing-compare-val--yes { color: var(--wp-success); font-weight: 700; font-size: 0.95rem; } /* lint-ignore */
.billing-compare-val--no { color: var(--wp-text-muted); font-size: 0.95rem; } /* lint-ignore */
.billing-support-link { margin-top: 0.25rem; text-align: center; }
.billing-support-link a { color: var(--wp-brand); }
.btn-danger { display: inline-block; padding: 0.45rem 1.1rem; font-size: 0.9rem; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; background: var(--wp-danger); color: #fff; font-weight: 600; } /* lint-ignore */
.btn-danger:hover { opacity: 0.88; }
.wp-ml-sm { margin-left: 0.5rem; }
.wp-mt-sm { margin-top: 0.5rem; }
.wp-mb-xs { margin-bottom: 0.25rem; }
.wp-mb-sm { margin-bottom: 0.5rem; }
.wp-font-medium { font-weight: 600; } /* lint-ignore */

/* ── Motion safety ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Pricing page ────────────────────────────────────────────────── */
.pricing-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--wp-space-xl) var(--wp-space-md);
}

.pricing-hero {
  text-align: center;
  margin-bottom: var(--wp-space-xl);
}

.pricing-hero h1 {
  font-size: var(--wp-text-3xl);
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--wp-leading-tight);
  margin: 0 0 0.5rem 0;
}

.pricing-hero p {
  font-size: var(--wp-text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.pricing-card-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--wp-space-xl);
}

.pricing-card {
  background: var(--color-surface-card);
  border: 1px solid var(--wp-border-default); /* lint-ignore */
  border-radius: var(--radius-container);
  padding: 2rem;
  width: 100%;
  max-width: 480px;
}

.pricing-card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
}

.pricing-card-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--wp-border-default); /* lint-ignore */
}

.pricing-plan-name {
  display: inline-block;
  font-size: var(--wp-text-sm);
  font-weight: var(--wp-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.pricing-amount {
  font-size: 3.5rem;
  font-weight: var(--wp-weight-semibold);
  line-height: 1;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.pricing-currency {
  font-size: 1.5rem;
  vertical-align: super;
  color: var(--color-text-secondary);
}

.pricing-period {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  font-weight: var(--wp-weight-normal);
}

.pricing-tagline {
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--wp-leading-relaxed);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.pricing-features li {
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-surface-muted, var(--wp-surface-muted)); /* lint-ignore */
  padding-left: 1.4rem;
  position: relative;
  line-height: var(--wp-leading-snug);
}

.pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 600; /* lint-ignore */
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.8rem 1.5rem;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-element);
  font-size: var(--wp-text-base);
  font-weight: var(--wp-weight-semibold);
  text-decoration: none;
  margin-bottom: 0.75rem;
  transition: background var(--wp-duration-base);
}

.pricing-cta:hover {
  background: var(--color-primary-light);
  color: #ffffff;
  text-decoration: none;
}

.pricing-fine-print {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  text-align: center;
  margin: 0;
}

.pricing-free-note {
  background: var(--color-surface-card);
  border: 1px solid var(--wp-border-default); /* lint-ignore */
  border-radius: var(--radius-element);
  padding: 1rem 1.25rem;
  margin-bottom: var(--wp-space-xl);
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
  line-height: var(--wp-leading-relaxed);
}

.pricing-free-note p { margin: 0; }

.pricing-faq { margin-bottom: var(--wp-space-xl); }

.pricing-faq h2 {
  font-size: var(--wp-text-lg);
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 1rem 0;
}

.faq-item {
  border-bottom: 1px solid var(--wp-border-default); /* lint-ignore */
}

.faq-item summary {
  font-size: var(--wp-text-sm);
  font-weight: var(--wp-weight-semibold);
  color: var(--color-text-primary);
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-item[open] summary::after { content: '−'; }

.faq-item p {
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
  line-height: var(--wp-leading-relaxed);
  margin: 0 0 0.85rem 0;
}

.faq-item a { color: var(--color-primary); }

@media (max-width: 640px) {
  .pricing-wrap { padding: var(--wp-space-lg) var(--wp-space-sm); }
  .pricing-hero h1 { font-size: var(--wp-text-2xl); }
  .pricing-amount { font-size: 2.75rem; }
  .pricing-card { padding: 1.25rem; }
}

/* ── Profile page — section-based layout ───────────────────────── */
.profile-section {
  border: var(--border-default);
  border-radius: var(--radius-element);
  margin-bottom: var(--wp-space-md);
  background: var(--color-surface-card);
  overflow: hidden;
}
.profile-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  user-select: none;
}
.profile-section > summary::-webkit-details-marker { display: none; }
.profile-section__title {
  flex: 1;
  font-weight: 500;
  font-size: var(--wp-text-base);
  color: var(--color-text-primary);
}
.profile-section__chevron {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  transition: transform 0.2s;
}
.profile-section[open] .profile-section__chevron { transform: rotate(180deg); }
.profile-section__status {
  font-size: var(--wp-text-xs);
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-element);
  white-space: nowrap;
}
.profile-section__status--complete {
  color: var(--color-success);
  background: var(--color-success-wash);
}
.profile-section__status--incomplete {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}
.profile-section__body {
  padding: 0 1rem 0.75rem;
  border-top: 0.5px solid var(--wp-border-default);
}
.profile-field--missing > label { display: flex; align-items: center; gap: 0.3rem; }
.profile-field-missing-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-warning);
  flex-shrink: 0;
}
.profile-field--missing .wp-input,
.profile-field--missing select.wp-input { border-left: 2px solid var(--color-warning); } /* lint-ignore */
.profile-field-value-hint {
  font-size: var(--wp-text-xs);
  color: var(--color-warning-text);
  margin-top: 0.2rem;
  margin-bottom: 0;
}
.profile-completion-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--wp-space-md);
}
.profile-completion-bar__track {
  flex: 1;
  height: 6px; /* lint-ignore */
  background: var(--color-surface-muted);
  border-radius: var(--radius-element);
  overflow: hidden;
}
.profile-completion-bar__fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-element);
  transition: width 0.3s;
}
.profile-completion-bar__label {
  font-size: var(--wp-text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ── Bodyweight sparkline meta ───────────────────────────────────── */
.bw-spark-meta {
  font-size: var(--wp-text-xs);
  color: var(--color-text-tertiary);
  margin: 0.25rem 0 0.5rem 0;
  max-width: 260px;
}

/* ── Upgrade prompt card ─────────────────────────────────────────── */
.wp-upgrade-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface-card);
  border: var(--border-default);
  border-left: 3px solid var(--color-primary); /* lint-ignore */
  border-radius: var(--wp-radius-lg, 8px);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.wp-upgrade-card--compact { padding: 0.5rem 0.75rem; font-size: var(--wp-text-sm); }
.wp-upgrade-card__icon { font-size: 1.25rem; flex-shrink: 0; }
.wp-upgrade-card__body { flex: 1; min-width: 0; font-size: var(--wp-text-sm); }
.wp-upgrade-card__desc { display: block; color: var(--color-text-secondary); margin-top: 0.1rem; }
.wp-upgrade-card__cta {
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--wp-radius-md, 6px);
  padding: 0.35rem 0.9rem;
  font-size: var(--wp-text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.wp-upgrade-card__cta:hover { opacity: 0.9; }

/* ── Today WOD hero ──────────────────────────────────────────────── */
.today-wod-hero {
  border-left: 3px solid var(--color-primary);
  overflow-x: hidden;
}
.today-wod-hero__textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 6rem;
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
  border: 0.5px solid var(--color-border);
  border-radius: var(--wp-radius-md, 6px);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  font-family: inherit;
}

/* ── Today score log RPE / version rows ─────────────────────────── */
.today-score-log__rpe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.today-score-log__version-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Today score log touch targets ──────────────────────────────── */
.today-score-log .rpe-btn,
.today-score-log .today-score-log__rpe-btn {
  min-width: 44px;
  min-height: 44px;
}
.today-score-log .performed-version-btn,
.today-score-log .today-score-log__version-btn {
  min-height: 44px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.today-score-log__submit {
  min-height: 48px;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

/* ── Coaching intelligence collapsible ──────────────────────────── */
.today-coaching-intelligence > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--wp-radius-md, 6px);
  user-select: none;
}
.today-coaching-intelligence > summary::-webkit-details-marker { display: none; }
.today-coaching-intelligence > summary::after {
  content: '\25BE';
  margin-left: auto;
  font-size: 0.8rem;
  transition: transform 0.2s;
}
.today-coaching-intelligence[open] > summary::after {
  transform: rotate(180deg);
}

/* ── Component pill row (horizontal scroll on mobile) ───────────── */
.today-component-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.today-component-pills::-webkit-scrollbar { display: none; }

/* ── Score confirmed success state ──────────────────────────────── */
.today-score-confirmed {
  padding: 0.75rem 1rem;
  border-radius: var(--wp-radius-md, 6px);
  background: var(--color-success-bg);
  border-left: 4px solid var(--color-success);
}
.today-score-confirmed p { margin: 0; }

@media (max-width: 640px) {
  .today-wod-hero__textarea { min-height: 5rem; font-size: 1rem; }
  .today-score-log__submit { font-size: 1.05rem; }
  .today-score-log .goals-input,
  .today-score-log .today-score-log__score-value { font-size: 1rem; }
}