/* ============================================================================
   SpotterAI — stylesheet
   ----------------------------------------------------------------------------
   A single, cohesive design language: dark, athletic "premium fitness tech".
   Everything is driven by design tokens (CSS variables) so spacing, color,
   radius, and shadow stay consistent across the whole product.

   ── CONTENTS ────────────────────────────────────────────────────────────────
   This sheet grew in THREE layers, applied in source order (later wins). Layers
   B and C deliberately re-style shell / nav / title selectors from layer A — so
   .sidebar, .container, .section-title--lg etc. appear 2–3× on purpose. Do NOT
   "dedupe" a repeated selector without first checking what the later layers set.

   A. CORE  (§1–21, from the top)
      tokens · reset · layout · buttons · header · hero · disclaimer · cards ·
      generator · results · plan output · how-it-works · footer · form check ·
      coach chat · dashboard · navigation & account modal · cloud sync ·
      workout session · nutrition diary
   B. INSTRUMENT-HUD IDENTITY  (search: "Atmosphere: blueprint dot-grid")
      dot-grid · mono HUD readouts · focus-bracket corners · audit-card scan ·
      hero radar bloom · segmented meters · button sheen · display titles ·
      data-table readouts
   C. FORMAT OVERHAUL  (search: "FORMAT OVERHAUL")
      icon-rail desktop shell · terminal page headers · Today command center
   ─────────────────────────────────────────────────────────────────────────────
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Design tokens
---------------------------------------------------------------------------- */
:root {
  /* Color — base: cool paper white with a faint iris undertone ("Record").
     Deliberately NOT a warm cream/sand: the tint runs toward the brand's own
     forest-green hue, not toward default warmth. Surfaces are opaque, not
     glass — depth comes from hairline borders, not blur and bloom. */
  --bg: #f5f8f6;
  --bg-soft: #eef2ef; /* second neutral layer: sidebar, toolbars, panels */
  --surface: #ffffff; /* card / elevated */
  --surface-solid: #ffffff; /* opaque variant where blur isn't wanted */
  --surface-2: #eff3f0; /* control / hover */
  --border: #dbe3dd; /* hairline */
  --border-soft: #e7ede9;
  --sheen: transparent; /* no glass highlight in the light register */

  /* Color — text: near-black ink with a faint green cast → cool greys.
     Every tier verified ≥4.5:1 (AA body) on bg, surface, AND surface-2. */
  --text: #141a17; /* 16.5:1 on bg */
  --text-muted: #4f5a54; /* 6.7:1 on bg */
  --text-faint: #5d6a63; /* 5.3:1 on bg — quietest tier, still AA body */

  /* Color — accent: deep forest green. Carries AA as text on paper (7.4:1)
     and takes white ink on fills (7.9:1).
     NOTE — this deliberately merges the brand with the "passed / safe" signal
     that core_values.md previously kept separate. In a product whose whole
     claim is that plans get checked, green meaning both "our brand" and
     "this passed" is one idea, not two. Warn (amber) and danger (red) carry
     the other tiers, and the severity glyphs/pills do the discriminating. */
  --accent: #1a5c42;
  --accent-hover: #12452f;
  --accent-soft: rgba(26, 92, 66, 0.09);
  --accent-ring: rgba(26, 92, 66, 0.30);
  --accent-ink: #ffffff; /* white ink on accent fills (AA-strong) */
  --accent-2: #1f6b57; /* pine companion — quiet, used sparingly */

  /* Color — status. "Passed / safe" is now the brand green itself (see above).
     All tiers clear AA body on bg, surface, and surface-2. */
  --success: #1a5c42;
  --warn: #87620d;
  --danger: #c22f26;
  --success-soft: rgba(26, 92, 66, 0.10);
  --success-ring: rgba(26, 92, 66, 0.28);
  --warn-soft: rgba(135, 98, 13, 0.10);
  --danger-soft: rgba(194, 47, 38, 0.09);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius — tightened for the record/document register (was 8/12/16/22) */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-full: 999px;

  /* Shadows — near-flat. Elevation reads through borders, not drop shadows. */
  --shadow-sm: 0 1px 2px rgba(20, 26, 23, 0.05);
  --shadow-md: 0 1px 2px rgba(20, 26, 23, 0.04), 0 8px 20px -14px rgba(20, 26, 23, 0.18);
  --shadow-lg: 0 1px 3px rgba(20, 26, 23, 0.05), 0 24px 48px -28px rgba(20, 26, 23, 0.24);
  --glow-accent: 0 1px 2px rgba(20, 26, 23, 0.10);
  --glow-accent-strong: 0 0 0 1px var(--accent-ring), 0 2px 6px -2px rgba(26, 92, 66, 0.28);

  /* Typography — Sora (display) + Inter (UI) + JetBrains Mono (data) */
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(2.7rem, 6.2vw, 4.9rem);
  --fs-h1: clamp(1.95rem, 3.8vw, 3rem);
  --fs-h2: clamp(1.45rem, 2.7vw, 2.05rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Layout + motion */
  --container: 1120px;
  --transition: 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------------------------------------------------------
   2. Reset & base
---------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* The [hidden] attribute must always win over component display rules
   (e.g. .state { display: flex }), so result states toggle correctly. */
[hidden] {
  display: none !important;
}

html {
  /* Tells the UA to render form controls, scrollbars, and the caret light. */
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss03" 1;
  min-height: 100vh;
}

/* Ambient field. The dark build ran violet/orchid glow blooms here; the light
   register drops them entirely — glow on paper reads as a smudge. Layer B
   (search "Atmosphere") paints the ruled measure grid onto this same element. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  /* Buttons don't inherit text color by default (UA sets it to canvastext/black),
     so any button-text relying on inheritance renders black on our dark surfaces.
     Inherit like <a> does; variants that need a specific color (.btn--primary,
     .google-btn, …) still set it explicitly and win over this. */
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Accessibility helpers */
.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;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-full);
  font-weight: 600;
  z-index: 100;
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--space-3);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ----------------------------------------------------------------------------
   3. Layout primitives
---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

.section--alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
/* App views also carry .section--alt. On the dark build the alt band was
   imperceptible (#0a090f vs #0c0b13); on paper it paints a tinted slab that
   ends mid-page and leaves a hard seam wherever the view is shorter than the
   viewport. App screens get one continuous surface; the cards carry contrast. */
.view.section--alt {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
/* Left-aligned page header for the app pages (dashboard, nutrition, …). */
.section-head--start {
  max-width: none;
  margin: 0 0 var(--space-6);
  text-align: left;
}

.section-title {
  font-size: var(--fs-h2);
}
.section-title--lg {
  /* font-size is set in the app-page header block (§F2) so task screens
     read as product headers, not marketing heroes. */
  margin-top: var(--space-2);
}

.section-subtitle {
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.section-subtitle--center {
  margin-inline: auto;
}

.accent-text {
  color: var(--accent);
}

/* Eyebrow label — editorial tracked caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.eyebrow--center {
  justify-content: center;
}
.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Page meta line — quiet, informational (date, storage note, beta status).
   Deliberately NOT the tracked-caps kicker; that voice is reserved for the
   hero and in-card component labels. */
.section-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   4. Buttons
---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--glow-accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-accent-strong);
  transform: translateY(-1px);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.btn--sm {
  padding: 0.55rem 1rem;
  font-size: var(--fs-small);
}
.btn--block {
  width: 100%;
}
.btn__icon {
  transition: transform var(--transition);
}
.btn--primary:hover .btn__icon {
  transform: translateX(3px);
}

/* ----------------------------------------------------------------------------
   4b. App shell — persistent left sidebar + main content
---------------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--border);
  background: var(--bg-soft);
}
.sidebar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.sidebar__brand .wordmark__glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  color: var(--accent);
  box-shadow: var(--glow-accent);
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.sidebar__nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.62rem 0.78rem;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.sidebar__nav .nav-link__icon {
  flex: none;
  opacity: 0.75;
}
.sidebar__nav .nav-link:hover {
  background: rgba(20, 26, 23, 0.05);
  color: var(--text);
}
.sidebar__nav .nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}
/* Glowing left indicator bar on the active item */
.sidebar__nav .nav-link.is-active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent);
}
.sidebar__nav .nav-link.is-active .nav-link__icon {
  opacity: 1;
}
/* The <button> nav item (Account) needs button resets to match the <a> links. */
.sidebar__nav button.nav-link { font: inherit; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; text-align: left; }
/* Account lives in the sidebar foot on desktop; only surface it in the mobile
   bottom nav (where there's no visible foot). */
/* It's a <button>, so it inherits the UA's `2px outset` border unless reset.
   That border was invisible against the near-black shell and drew a hard black
   box around the tab on paper. */
.sidebar__nav .nav-link--more {
  display: none;
  border: 0;
  background: none;
  /* family only — font-size must keep cascading from .nav-link so the label
     matches its siblings instead of jumping to the UA button size. */
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
/* Mobile "More" sheet (secondary destinations + Account) — desktop never shows it. */
.more-sheet { display: none; }
.sidebar__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.sidebar__foot .profile-btn {
  flex: 1;
  min-width: 0;
  margin-left: 0;
  justify-content: flex-start;
}
.sidebar__foot .profile-btn__name {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-main > main {
  flex: 1;
}

/* Mobile: sidebar reflows — brand + profile become a slim top bar, the nav a
   fixed bottom tab bar. */
@media (max-width: 960px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    /* Safe areas: with viewport-fit=cover the bar extends under the notch /
       status bar in standalone PWA mode; pad into the insets. */
    padding: max(var(--space-2), env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--space-4), env(safe-area-inset-left, 0px));
    border-right: none;
    border-bottom: 1px solid var(--border);
    /* IMPORTANT: no backdrop-filter/transform here — it would become the
       containing block for the position:fixed bottom nav and pin it to the top
       bar instead of the screen bottom (which then hides the profile). */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    z-index: 50;
  }
  .sidebar__brand { padding: 0; font-size: 1.05rem; }
  .sidebar__brand .wordmark__glyph { width: 30px; height: 30px; }
  .sidebar__foot { margin: 0 0 0 auto; padding: 0; border: none; }
  /* Make the profile control obviously tappable in the slim top bar. */
  .sidebar__foot .profile-btn { flex: none; padding: 4px; gap: 6px; border-color: var(--accent-ring); background: var(--accent-soft); }
  .sidebar__foot .profile-btn__avatar { width: 32px; height: 32px; font-size: 0.85rem; }
  .profile-btn__chev { display: none; }
  .profile-btn__name { display: inline-block; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 0.8rem; }
  /* Surface "Account" as a real tab in the bottom nav. The `button.nav-link`
     selector elsewhere sets `font-size: inherit`, which outranks a plain
     `.nav-link--more`; match its specificity so the label sizes like its
     sibling tabs instead of inheriting the 1rem shell size. */
  .sidebar__nav button.nav-link--more { display: flex; font-size: 0.64rem; }
  /* Keep 5 fixed tabs; the rest move into the More sheet. */
  .sidebar__nav .nav-link--sec { display: none; }
  .more-sheet:not([hidden]) {
    position: fixed;
    right: var(--space-3);
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: var(--space-2);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .more-sheet__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.65rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
  }
  .more-sheet__link:hover, .more-sheet__link:active { color: var(--text); background: var(--surface-2); }
  .more-sheet__link.is-active { color: var(--accent); background: var(--accent-soft); }
  .sidebar__nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex: none;
    flex-direction: row;
    gap: 0;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    /* Fully opaque. Blur on an always-visible fixed bar is a constant
       compositing cost on low-end phones for no legibility gain — and the old
       96% bg let page text ghost through the bar, which was invisible against
       near-black but obvious on paper. */
    background: var(--bg);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 60;
  }
  .sidebar__nav::-webkit-scrollbar { display: none; }
  .sidebar__nav .nav-link {
    flex: 1 0 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 56px;
    padding: 0.4rem 0.3rem;
    font-size: 0.64rem;
    text-align: center;
    color: var(--text-faint);
  }
  .sidebar__nav .nav-link span { white-space: nowrap; }
  .sidebar__nav .nav-link.is-active { background: transparent; color: var(--accent); }
  /* Bottom padding clears BOTH the fixed tab bar (~64px) and the coach FAB,
     which floats at bottom:78px and is ~52px tall — so content can scroll fully
     out from under the FAB at the end of a page. */
  .app-main { padding-top: calc(54px + env(safe-area-inset-top, 0px)); padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  /* #id specificity: the base .chat-fab rule is declared LATER in the file and
     would otherwise win, dropping the FAB onto the bottom tab bar. */
  #chat-fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* ----------------------------------------------------------------------------
   5. Header & wordmark (legacy — retained for the footer wordmark)
---------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solid, not frosted: translucency + blur is the dark-UI move, and on paper
     it muddies the ruled grid showing through. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.wordmark__glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
}
.wordmark__accent {
  color: var(--accent);
}
.wordmark--sm {
  font-size: 1.1rem;
}
.wordmark--sm .wordmark__glyph {
  width: 32px;
  height: 32px;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-link {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--transition);
}
.nav-link:hover {
  color: var(--text);
}

/* ----------------------------------------------------------------------------
   6. Hero
---------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  max-width: 18ch;
  margin-top: var(--space-5);
}
.hero__lede {
  margin-top: var(--space-5);
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-start;
  margin-top: var(--space-6);
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Hero product preview — a static mock of the code-based audit output */
.hero__visual {
  display: flex;
  justify-content: center;
}
.audit-card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-5);
  background:
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.audit-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.audit-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.audit-card__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.audit-card__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-ring);
  animation: audit-pulse 2.4s ease-out infinite;
}
@keyframes audit-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-ring); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .audit-card__pulse { animation: none; }
}
.audit-card__score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.score-ring__track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.score-ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 52;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.score-ring__num { fill: var(--text); font: 700 27px var(--font-mono); text-anchor: middle; font-variant-numeric: tabular-nums; }
.score-ring__den { fill: var(--text-faint); font: 500 11px var(--font-mono); text-anchor: middle; }
.audit-card__verdict { display: flex; flex-direction: column; gap: 3px; }
.audit-card__verdict strong { font-size: 1.05rem; }
.audit-card__verdict span { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; }
.audit-card__checks {
  list-style: none;
  padding: var(--space-4) 0 0;
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.audit-card__checks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text);
}
.audit-card__checks .ico {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.audit-card__checks li.is-ok .ico { stroke: var(--success); }
.audit-card__checks li.is-warn .ico { stroke: var(--warn); }
.audit-card__checks li.is-warn { color: var(--text-muted); }

/* Flags-first preview card (hero) */
.audit-card__verdict-line {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.audit-card__counts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  margin: var(--space-2) 0 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.audit-card__counts li { display: inline-flex; align-items: baseline; gap: 5px; }
.audit-card__counts strong { font-family: var(--font-mono); font-size: 0.95rem; color: var(--text); }
.audit-card__counts .is-crit strong { color: var(--danger); }
.audit-card__counts .is-warn strong { color: var(--warn); }
.audit-card__counts .is-ok strong { color: var(--success); }
.audit-card__foot {
  margin-top: var(--space-4);
  font-size: 0.74rem;
  color: var(--text-faint);
}
.audit-card__qs { font-family: var(--font-mono); color: var(--text-muted); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { justify-content: flex-start; }
  .audit-card { max-width: 440px; }
}
.hero__trust span {
  white-space: nowrap;
}
.hero__trust a {
  color: var(--accent);
  font-weight: 600;
}
.hero__trust-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.hero__trust-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
   Product loop (Plan -> Train -> Log -> Adapt -> Re-audit)
---------------------------------------------------------------------------- */
.loop {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.loop__step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.loop__step--accent {
  border-color: var(--accent-ring);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-ring);
}
.loop__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
}
.loop__name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.loop__desc {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.5;
}
.loop__arrow {
  display: flex;
  align-items: center;
  color: var(--text-faint);
  font-size: 1.2rem;
}
.loop__cycle {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--accent);
  font-weight: 500;
}
@media (max-width: 860px) {
  .loop { flex-direction: column; }
  .loop__arrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; }
}

/* ----------------------------------------------------------------------------
   Safety Lab — note + content blocks
---------------------------------------------------------------------------- */
.safety-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
  border-radius: var(--r-sm);
  max-width: 70ch;
}
.lab-block {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.lab-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.lab-block__title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lab-block__sub {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 72ch;
}

/* ----------------------------------------------------------------------------
   Audit — flags-first results (replaces the old score-first gauge card)
---------------------------------------------------------------------------- */
.audit { padding: var(--space-5); }
.audit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.audit__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint); font-weight: 600; }
.audit__verdict { margin-top: var(--space-2); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; }
.audit__verdict.is-critical { color: var(--danger); }
.audit__verdict.is-warning { color: var(--warn); }
.audit__verdict.is-suggestion,
.audit__verdict.is-ok { color: var(--success); }
.audit__score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.audit__score-num { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.audit__score-den { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-faint); }
.audit__score-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.audit__counts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-4) 0; margin: var(--space-4) 0; border-block: 1px solid var(--border); font-size: var(--fs-small); color: var(--text-muted); }
.audit__counts li { display: inline-flex; align-items: baseline; gap: 6px; }
.audit__counts strong { font-family: var(--font-mono); font-size: 1.05rem; color: var(--text); }
.audit__counts .is-crit strong { color: var(--danger); }
.audit__counts .is-warn strong { color: var(--warn); }
.audit__counts .is-ok strong { color: var(--success); }
.audit__flags { display: flex; flex-direction: column; gap: var(--space-3); }
.audit__clear { color: var(--text-muted); font-size: var(--fs-small); }

/* Flag card — what / why / fix / safer alternatives */
.flag { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.flag--critical { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.flag--warning { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.flag--suggestion { border-color: color-mix(in srgb, var(--text-muted) 25%, var(--border)); }
.flag__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.flag__sev { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 9px; border-radius: var(--r-full); }
.flag--critical .flag__sev { color: var(--danger); background: var(--danger-soft); }
.flag--warning .flag__sev { color: var(--warn); background: var(--warn-soft); }
.flag--suggestion .flag__sev { color: var(--text-muted); background: rgba(20, 26, 23, 0.06); }
.flag__label { font-weight: 600; letter-spacing: -0.01em; }
.flag__why { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }
.flag__row { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text); line-height: 1.5; }
.flag__row-label { display: inline-block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; margin-right: 6px; }
.flag__rule { margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-2); }
.flag__rule > summary { cursor: pointer; font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.flag__rule > summary::marker { color: var(--accent); }
.flag__rule-body { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.flag__rule-lim { display: block; margin-top: 4px; color: var(--text-faint); font-size: 0.8rem; }

/* Passed checks (collapsed) */
.audit__passed { margin-top: var(--space-4); }
.audit__passed > summary { cursor: pointer; font-size: var(--fs-small); color: var(--text-muted); padding: var(--space-2) 0; }
.audit__passed > summary::marker { color: var(--success); }
.audit__passed-list { list-style: none; padding: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.audit__passed-list li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: var(--space-5); }
.audit__passed-list li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--success); font-size: 0.8rem; font-weight: 700; }
.audit__passed-label { font-size: var(--fs-small); color: var(--text); }
.audit__passed-detail { font-size: 0.8rem; color: var(--text-faint); }
.audit__foot { margin-top: var(--space-4); font-size: 0.8rem; color: var(--text-faint); }

/* Trust Report */
.trust { margin-top: var(--space-4); padding: 0; overflow: hidden; }
.trust__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; }
.trust__title { font-family: var(--font-display); font-weight: 600; }
.trust__conf { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--border); white-space: nowrap; }
.trust__conf--high { color: var(--success); background: var(--success-soft); border-color: var(--success-ring); }
.trust__conf--medium { color: var(--warn); background: var(--warn-soft); }
.trust__conf--low { color: var(--danger); background: var(--danger-soft); }
.trust__body { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--space-5); }
.trust__row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--border-soft); }
.trust__row dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.trust__row dd { font-size: var(--fs-small); color: var(--text); }
.trust__block h5 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-2); }
.trust__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.trust__list li { font-size: var(--fs-small); color: var(--text-muted); padding-left: var(--space-3); position: relative; }
.trust__list li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); }
.trust__disclaimer { font-size: 0.8rem; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: var(--space-3); }

/* Audit history — watch the plan's score move over versions */
.trust__history h5 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.trust__trend { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; padding: 3px 8px; border-radius: var(--r-full); border: 1px solid var(--border); white-space: nowrap; }
.trust__trend--up { color: var(--success); background: var(--success-soft); border-color: var(--success-ring); }
.trust__trend--down { color: var(--danger); background: var(--danger-soft); }
.trust__spark { max-width: 420px; margin: var(--space-2) 0 var(--space-3); }
.trust__spark .chart { width: 100%; height: auto; }
.trust__vers { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trust__ver { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; border-top: 1px solid var(--border-soft); }
.trust__ver-tag { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); min-width: 2.2rem; }
.trust__ver-score { font-weight: 700; font-size: var(--fs-small); color: var(--text); min-width: 1.8rem; }
.trust__ver-when { font-size: 0.72rem; margin-left: auto; white-space: nowrap; }
.trust__ver-note { flex-basis: 100%; font-size: 0.76rem; line-height: 1.35; }

/* ----------------------------------------------------------------------------
   Safety Lab content — benchmark, catches/misses, bad-plan examples, architecture
---------------------------------------------------------------------------- */
.bench__status { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 11px; border-radius: var(--r-full); white-space: nowrap; align-self: center; }
.bench__status--pass { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-ring); }
.bench__status--fail { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger); }
.bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: 0; }
.bench__item { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.bench__item dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.bench__item dd { margin-top: 6px; font-family: var(--font-mono); font-size: 1.45rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.bench__item dd.is-ok { color: var(--success); }
.bench__item dd.is-warn { color: var(--warn); }

.lab-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.lab-col { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.lab-col h4 { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-3); }
.lab-col--good h4 { color: var(--success); }
.lab-col--bad h4 { color: var(--warn); }
.lab-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lab-col li { position: relative; padding-left: var(--space-5); font-size: var(--fs-small); color: var(--text-muted); }
.lab-col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lab-col--good li::before { content: "✓"; color: var(--success); }
.lab-col--bad li::before { content: "—"; color: var(--warn); }

.badplan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.badplan { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-3); }
.badplan__title { font-size: 1.05rem; font-weight: 600; }
.badplan__plan, .badplan__repair { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.badplan__tag { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: var(--r-sm); margin-right: 6px; }
.badplan__tag--bad { color: var(--danger); background: var(--danger-soft); }
.badplan__tag--fix { color: var(--success); background: var(--success-soft); }
.badplan__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.badplan__caught { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.badplan__caught li { position: relative; padding-left: var(--space-4); font-size: var(--fs-small); color: var(--text); }
.badplan__caught li::before { content: "!"; position: absolute; left: 4px; color: var(--warn); font-weight: 700; }
.badplan__repair { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: auto; }

.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.tech { padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.tech h5 { font-size: 0.92rem; font-weight: 600; color: var(--accent); margin-bottom: 5px; }
.tech p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }

.detail-uncertainty { margin: var(--space-2) 0 var(--space-3); padding: var(--space-2) var(--space-3); font-size: 0.8rem; color: var(--text-muted); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--r-sm); line-height: 1.45; }
.detail-uncertainty strong { color: var(--warn); }

/* ----------------------------------------------------------------------------
   Guided onboarding overlay
---------------------------------------------------------------------------- */
.onb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(20, 26, 23, 0.42); }
.onb.is-open { display: flex; }
.onb__panel { width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.onb__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; }
.onb__progress { flex: 1; display: flex; gap: 6px; }
.onb-step { flex: 1; font-size: 0; height: 4px; border-radius: var(--r-full); background: var(--surface-2); position: relative; }
.onb-step.is-active { background: var(--accent); }
.onb-step.is-done { background: var(--accent-ring); }
.onb__close { flex: none; }
.onb__body { padding: var(--space-5); overflow-y: auto; }
.onb-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.onb-sub { margin-top: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.onb-field { margin-bottom: var(--space-4); }
.onb-flabel { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin-bottom: var(--space-2); }
.onb-fhint { display: block; font-size: 0.75rem; color: var(--text-faint); margin-bottom: var(--space-2); margin-top: -4px; }
.onb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.onb-chip { min-width: 44px; min-height: 44px; padding: 0.55rem 0.95rem; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: var(--transition); }
.onb-chip:hover { color: var(--text); border-color: var(--accent-ring); }
.onb-chip.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-ring); }
.onb-input { max-width: 100%; }
.onb-measurement-input { display: flex; align-items: center; gap: var(--space-2); }
.onb-measurement-input .onb-input { min-width: 0; width: 100%; }
.onb-unit { flex: none; min-width: 2ch; font-size: var(--fs-small); color: var(--text-faint); font-weight: 600; }
.onb-height-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.onb-error { display: block; min-height: 1.2em; margin-top: 5px; font-size: 0.75rem; color: var(--danger); line-height: 1.35; }
.onb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.onb-ack { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.onb-ack input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.onb-ack strong { color: var(--text); }
.onb__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
.onb__foot-right { display: flex; align-items: center; gap: var(--space-3); }
@media (max-width: 480px) { .onb-cols { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------
   Exercise Library — animated movement demos
---------------------------------------------------------------------------- */
.ex-anim { margin: 0 0 var(--space-4); padding: var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-lg); }
.ex-anim__svg { width: 152px; height: 190px; }
.ex-limbfill, .ex-head { fill: url(#exBody); }
/* Front-lit gradient (back edge shadowed → front edge highlit) for 3D depth. */
.ex-stop-dark { stop-color: color-mix(in srgb, var(--accent) 56%, #07030f); }
.ex-stop-mid { stop-color: var(--accent); }
.ex-stop-light { stop-color: color-mix(in srgb, var(--accent) 70%, #ffffff); }
/* Worked-muscle highlight — a soft pulsing bloom. */
.ex-musc { fill: url(#exMusc); mix-blend-mode: screen; animation: ex-musc-pulse 1.7s ease-in-out infinite; }
.ex-stop-musc0 { stop-color: color-mix(in srgb, var(--accent) 22%, #ffffff); stop-opacity: 0.95; }
.ex-stop-musc1 { stop-color: var(--accent); stop-opacity: 0; }
@keyframes ex-musc-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }
.ex-bar { stroke: #cbd1df; stroke-width: 4; stroke-linecap: round; }
.ex-dbhandle { stroke: #cbd1df; stroke-width: 3.5; stroke-linecap: round; }
.ex-plate { fill: #9aa2b3; }
.ex-collar { fill: #dfe3ec; } /* plate hub / dumbbell bell highlight */
.ex-ground { stroke: var(--border); stroke-width: 2; stroke-linecap: round; }
.ex-shadow { fill: rgba(20, 26, 23, 0.14); }
.ex-anim__cap { font-size: 0.8rem; color: var(--text-muted); text-align: center; line-height: 1.4; }
.ex-anim__dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; box-shadow: 0 0 8px 1px var(--accent); animation: ex-pulse 1.7s ease-in-out infinite; }

/* Joint pivots (view-box units). */
.ex-fig, .ex-torso, .ex-arm, .ex-forearm, .ex-thigh, .ex-shin { transform-box: view-box; }
.ex-torso, .ex-thigh { transform-origin: 70px 92px; }   /* hip */
.ex-arm { transform-origin: 71px 53px; }                 /* shoulder */
.ex-forearm { transform-origin: 74px 73px; }             /* elbow */
.ex-shin { transform-origin: 70px 121px; }               /* knee */

@keyframes ex-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Every demo plays a full rep cycle (direction: normal), not a ping-pong:
   a controlled eccentric, a beat at the stretch, a faster concentric "drive",
   then a breath at lockout. Two shared breakpoint schemes keep all joints of
   one movement in sync:
     eccentric-first (squats, dips, presses from lockout): 0 → 46,56 → 84,100
     effort-first (pulls, curls, raises, extensions):      0 → 32,46 → 86,100
   Easing: eccentric = cubic-bezier(.55,.08,.58,.9) (smooth, controlled);
   concentric = cubic-bezier(.16,.72,.28,1) (fast off the turn, settles). */
[data-anim] .ex-fig, [data-anim] .ex-torso, [data-anim] .ex-arm,
[data-anim] .ex-forearm, [data-anim] .ex-thigh, [data-anim] .ex-shin,
[data-anim] .ex-foot {
  animation-duration: 3s; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-direction: normal;
}
.ex-foot { transform-box: view-box; transform-origin: 70px 148px; }

/* Squat — hips travel back AND down to just above parallel, knees track over
   the toes, torso leans so the load stays over midfoot, feet stay flat (the
   foot counter-rotates against the shin like a real ankle). */
[data-anim="squat"] .ex-fig { animation-name: ex-sq-fig; }
[data-anim="squat"] .ex-thigh { animation-name: ex-sq-thigh; }
[data-anim="squat"] .ex-shin { animation-name: ex-sq-shin; }
[data-anim="squat"] .ex-foot { animation-name: ex-sq-foot; }
[data-anim="squat"] .ex-torso { animation-name: ex-lean-s; }
[data-anim="squat"] .ex-arm { animation-name: ex-arm-fwd; }
@keyframes ex-sq-fig { 0% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: translate(-10px, 18px); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: translate(0px, 0px); } }
@keyframes ex-sq-thigh { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-58deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-sq-shin { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(90deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-sq-foot { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-32deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-lean-s { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(16deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-arm-fwd { 0% { transform: rotate(-4deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-46deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(-4deg); } }

/* Lunge — deep single-leg drop, torso proud, flat foot. */
[data-anim="lunge"] .ex-fig { animation-name: ex-lu-fig; }
[data-anim="lunge"] .ex-thigh { animation-name: ex-lu-thigh; }
[data-anim="lunge"] .ex-shin { animation-name: ex-lu-shin; }
[data-anim="lunge"] .ex-foot { animation-name: ex-lu-foot; }
[data-anim="lunge"] .ex-torso { animation-name: ex-lean-l; }
@keyframes ex-lu-fig { 0% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: translate(-6px, 14px); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: translate(0px, 0px); } }
@keyframes ex-lu-thigh { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-48deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-lu-shin { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(76deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-lu-foot { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-28deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-lean-l { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(10deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }

/* Hip hinge — fold at the hip with soft knees; the arms hang plumb so the
   bar tracks a straight vertical line close to the legs. */
[data-anim="hinge"] .ex-torso { animation-name: ex-hinge; }
[data-anim="hinge"] .ex-arm { animation-name: ex-arm-hang; }
[data-anim="hinge"] .ex-thigh { animation-name: ex-hinge-knee; }
@keyframes ex-hinge { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(58deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-arm-hang { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-56deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
@keyframes ex-hinge-knee { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-12deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }

/* Horizontal push — drive forward, control back. */
[data-anim="horizontal_push"] .ex-arm { animation-name: ex-hp-arm; }
[data-anim="horizontal_push"] .ex-forearm { animation-name: ex-extend; }
@keyframes ex-hp-arm { 0% { transform: rotate(-86deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-96deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-86deg); } }
@keyframes ex-extend { 0% { transform: rotate(78deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(4deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(78deg); } }

/* Vertical push — drive from the rack, control the bar back down. The arm
   and forearm counter-rotate so a held bar stays level through the press. */
[data-anim="vertical_push"] .ex-arm { animation-name: ex-vp-arm; }
[data-anim="vertical_push"] .ex-forearm { animation-name: ex-vp-fore; }
@keyframes ex-vp-arm { 0% { transform: rotate(-60deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-178deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-60deg); } }
@keyframes ex-vp-fore { 0% { transform: rotate(-130deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-130deg); } }

/* Horizontal pull — pull to the waist, squeeze, release slow. */
[data-anim="horizontal_pull"] .ex-torso { animation-name: ex-row-torso; }
[data-anim="horizontal_pull"] .ex-arm { animation-name: ex-hpull-arm; }
[data-anim="horizontal_pull"] .ex-forearm { animation-name: ex-hpull-fore; }
@keyframes ex-row-torso { 0% { transform: rotate(18deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(14deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(18deg); } }
@keyframes ex-hpull-arm { 0% { transform: rotate(-104deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-58deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-104deg); } }
@keyframes ex-hpull-fore { 0% { transform: rotate(6deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(48deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(6deg); } }

/* Vertical pull — pull down to the chest, extend back up slow. */
[data-anim="vertical_pull"] .ex-arm { animation-name: ex-vpull-arm; }
[data-anim="vertical_pull"] .ex-forearm { animation-name: ex-vpull-fore; }
@keyframes ex-vpull-arm { 0% { transform: rotate(-176deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-56deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-176deg); } }
@keyframes ex-vpull-fore { 0% { transform: rotate(2deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(72deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(2deg); } }

/* Isolation — a biceps curl: up quick, squeeze, lower slow. */
[data-anim="isolation"] .ex-arm { animation-name: ex-iso-arm; }
[data-anim="isolation"] .ex-forearm { animation-name: ex-curl; }
@keyframes ex-iso-arm { 0% { transform: rotate(-4deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-4deg); } }
@keyframes ex-curl { 0% { transform: rotate(2deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-128deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(2deg); } }

/* Plyometric — a real countermovement jump: dip with the arms swinging back,
   explode up (arms throw overhead, toes point), land soft into a shallow
   catch, stand, breathe. One extra breakpoint scheme: 0,12 → 32 → 44 → 58 → 74,100. */
[data-anim="plyometric"] .ex-fig { animation-name: ex-ply-fig; }
[data-anim="plyometric"] .ex-thigh { animation-name: ex-ply-thigh; }
[data-anim="plyometric"] .ex-shin { animation-name: ex-ply-shin; }
[data-anim="plyometric"] .ex-foot { animation-name: ex-ply-foot; }
[data-anim="plyometric"] .ex-arm { animation-name: ex-ply-arm; }
@keyframes ex-ply-fig { 0%, 12% { transform: translateY(0); animation-timing-function: cubic-bezier(.5,.1,.6,.9); } 32% { transform: translateY(14px); animation-timing-function: cubic-bezier(.1,.8,.3,1); } 44% { transform: translateY(-16px); animation-timing-function: cubic-bezier(.6,0,.9,.6); } 58% { transform: translateY(8px); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 74%, 100% { transform: translateY(0); } }
@keyframes ex-ply-thigh { 0%, 12% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.5,.1,.6,.9); } 32% { transform: rotate(-45deg); animation-timing-function: cubic-bezier(.1,.8,.3,1); } 44% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.6,0,.9,.6); } 58% { transform: rotate(-26deg); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 74%, 100% { transform: rotate(0deg); } }
@keyframes ex-ply-shin { 0%, 12% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.5,.1,.6,.9); } 32% { transform: rotate(80deg); animation-timing-function: cubic-bezier(.1,.8,.3,1); } 44% { transform: rotate(12deg); animation-timing-function: cubic-bezier(.6,0,.9,.6); } 58% { transform: rotate(46deg); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 74%, 100% { transform: rotate(0deg); } }
@keyframes ex-ply-foot { 0%, 12% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.5,.1,.6,.9); } 32% { transform: rotate(-35deg); animation-timing-function: cubic-bezier(.1,.8,.3,1); } 44% { transform: rotate(16deg); animation-timing-function: cubic-bezier(.6,0,.9,.6); } 58% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 74%, 100% { transform: rotate(0deg); } }
@keyframes ex-ply-arm { 0%, 12% { transform: rotate(-10deg); animation-timing-function: cubic-bezier(.5,.1,.6,.9); } 32% { transform: rotate(32deg); animation-timing-function: cubic-bezier(.1,.8,.3,1); } 44% { transform: rotate(-128deg); animation-timing-function: cubic-bezier(.6,0,.9,.6); } 58% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 74%, 100% { transform: rotate(-10deg); } }

/* Isometric — a steady brace with a slow breath (full cycle, no snap). */
[data-anim="isometric"] .ex-fig { animation-name: ex-brace; animation-duration: 3.2s; }
[data-anim="isometric"] .ex-arm { animation-name: ex-brace-arm; animation-duration: 3.2s; }
@keyframes ex-brace { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes ex-brace-arm { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(-30deg); } }

/* Unknown — a gentle idle breath */
[data-anim="idle"] .ex-fig { animation-name: ex-brace; animation-duration: 3.4s; }

/* --- Exercise-specific poses & motions (per-exercise realism) -------------- */
/* Apparatus strokes */
.ex-mount { stroke: #8a90a0; stroke-width: 3; stroke-linecap: round; }
.ex-benchpad { fill: #3a3750; stroke: #575170; stroke-width: 1; }
[data-pose="supine"] .ex-shadow { opacity: 0.35; }

/* Arm poses: static holds that override the pattern's arm animation.
   The gear rides in the forearm group, so it follows the hold. */
[data-arms] .ex-arm, [data-arms] .ex-forearm { animation: none !important; }
[data-arms="backrack"] .ex-arm { transform: rotate(-26deg); }
[data-arms="backrack"] .ex-forearm { transform: rotate(-148deg); }
[data-arms="frontrack"] .ex-arm { transform: rotate(-58deg); }
[data-arms="frontrack"] .ex-forearm { transform: rotate(-118deg); }
[data-arms="goblet"] .ex-arm { transform: rotate(-34deg); }
[data-arms="goblet"] .ex-forearm { transform: rotate(-96deg); }
[data-arms="sides"] .ex-arm { transform: rotate(-4deg); }
[data-arms="sides"] .ex-forearm { transform: rotate(0deg); }
[data-arms="overhead"] .ex-arm { transform: rotate(-176deg); }
[data-arms="overhead"] .ex-forearm { transform: rotate(-4deg); }
/* …but hinge still needs the racked bar to hang naturally under gravity: the
   backrack hold rides with the torso, which is what a good morning does. */

/* Pull-up: hang from the fixed bar — pull up strong, lower under control. */
[data-pose="hang"] .ex-fig { animation: ex-pullup 3.2s infinite; }
[data-pose="hang"] .ex-thigh { animation: none; transform: rotate(-10deg); }
[data-pose="hang"] .ex-shin { animation: none; transform: rotate(28deg); }
@keyframes ex-pullup { 0% { transform: translateY(-4px); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: translateY(-26px); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: translateY(-4px); } }
[data-anim="pullup"] .ex-shadow { opacity: 0.4; }

/* Bench press: supine on a bench, pressing up. */
[data-pose="supine"] .ex-fig { animation: none; transform: translate(2px, 22px) rotate(-90deg); transform-origin: 70px 92px; }
[data-pose="supine"] .ex-thigh { animation: none; transform: rotate(-64deg); }
[data-pose="supine"] .ex-shin { animation: none; transform: rotate(112deg); }
[data-pose="supine"] .ex-torso { animation: none; }
[data-anim="benchpress"] .ex-arm { animation-name: ex-bench-arm; }
[data-anim="benchpress"] .ex-forearm { animation-name: ex-bench-fore; }
/* Eccentric-first: lower from lockout to the chest, pause, drive up. */
@keyframes ex-bench-arm { 0% { transform: rotate(-92deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-58deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(-92deg); } }
@keyframes ex-bench-fore { 0% { transform: rotate(2deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(74deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(2deg); } }

/* Calf raise: heels rise while the toes stay planted (foot plantar-flexes
   about the ball of the foot), squeeze at the top, lower slow. */
[data-anim="calfraise"] .ex-fig { animation-name: ex-calf; }
[data-anim="calfraise"] .ex-foot { animation-name: ex-calf-foot; transform-origin: 80px 149px; }
@keyframes ex-calf { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: translateY(-5px); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: translateY(0); } }
@keyframes ex-calf-foot { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(24deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(0deg); } }

/* Leg extension: knee straightens from bent. */
[data-anim="legext"] .ex-thigh { animation: none; transform: rotate(-24deg); }
[data-anim="legext"] .ex-shin { animation-name: ex-legext-shin; }
@keyframes ex-legext-shin { 0% { transform: rotate(56deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-6deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(56deg); } }

/* Leg curl: prone (lying), heel curls toward the glutes. */
[data-anim="legcurl"] .ex-fig { animation: none; transform: translate(0px, 56px) rotate(90deg); transform-origin: 70px 92px; }
[data-anim="legcurl"] .ex-torso { animation: none; }
[data-anim="legcurl"] .ex-arm { animation: none; transform: rotate(-84deg); }
[data-anim="legcurl"] .ex-forearm { animation: none; transform: rotate(-6deg); }
[data-anim="legcurl"] .ex-shin { animation-name: ex-legcurl-shin; }
[data-anim="legcurl"] .ex-shadow { opacity: 0.35; }
@keyframes ex-legcurl-shin { 0% { transform: rotate(4deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(98deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(4deg); } }

/* Triceps pushdown: elbow pinned, forearm extends down. */
[data-anim="pushdown"] .ex-arm { animation-name: ex-pd-arm; }
[data-anim="pushdown"] .ex-forearm { animation-name: ex-pd-fore; }
@keyframes ex-pd-arm { 0% { transform: rotate(-10deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-6deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-10deg); } }
@keyframes ex-pd-fore { 0% { transform: rotate(-92deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-92deg); } }

/* Raise / fly: near-straight arm sweeps up to shoulder height. */
[data-anim="raise"] .ex-arm { animation-name: ex-raise-arm; }
[data-anim="raise"] .ex-forearm { animation-name: ex-raise-fore; }
@keyframes ex-raise-arm { 0% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-86deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-8deg); } }
@keyframes ex-raise-fore { 0% { transform: rotate(-4deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-4deg); } }

/* Hanging leg raise: static hang (after the hang-pose rules so these win),
   legs sweep up to L-sit and lower. */
[data-anim="hangraise"] .ex-fig { animation: none; transform: translateY(-16px); }
[data-anim="hangraise"] .ex-thigh { animation-name: ex-hlr-thigh; }
[data-anim="hangraise"] .ex-shin { animation-name: ex-hlr-shin; }
@keyframes ex-hlr-thigh { 0% { transform: rotate(-12deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-80deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-12deg); } }
@keyframes ex-hlr-shin { 0% { transform: rotate(30deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(12deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(30deg); } }

/* Prone (face-down on the floor): push-up on hands / plank on forearms. */
[data-pose="prone"] .ex-fig { animation: none; transform: translate(0px, 26px) rotate(80deg); transform-origin: 70px 92px; }
[data-pose="prone"] .ex-torso, [data-pose="prone"] .ex-thigh, [data-pose="prone"] .ex-shin { animation: none; }
[data-pose="prone"] .ex-shadow { opacity: 0.35; }
[data-anim="pushup"] .ex-fig { animation-name: ex-pushup-fig; }
[data-anim="pushup"] .ex-arm { animation-name: ex-pushup-arm; }
[data-anim="pushup"] .ex-forearm { animation-name: ex-pushup-fore; }
@keyframes ex-pushup-fig { 0% { transform: translate(0px, 26px) rotate(80deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: translate(0px, 40px) rotate(80deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: translate(0px, 26px) rotate(80deg); } }
@keyframes ex-pushup-arm { 0% { transform: rotate(-96deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-44deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(-96deg); } }
@keyframes ex-pushup-fore { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-52deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(0deg); } }
[data-anim="plank"] .ex-fig { animation-name: ex-plank-fig; animation-duration: 3.2s; }
[data-anim="plank"] .ex-arm { animation: none; transform: rotate(-86deg); }
[data-anim="plank"] .ex-forearm { animation: none; transform: rotate(-88deg); }
@keyframes ex-plank-fig { 0%, 100% { transform: translate(0px, 38px) rotate(81deg); } 50% { transform: translate(0px, 40px) rotate(81deg); } }

/* Dip: suspended on the bar, shins tucked, elbows bend as the body lowers. */
[data-anim="dip"] .ex-fig { animation-name: ex-dip-fig; }
[data-anim="dip"] .ex-torso { animation: none; transform: rotate(8deg); }
[data-anim="dip"] .ex-thigh { animation: none; transform: rotate(20deg); }
[data-anim="dip"] .ex-shin { animation: none; transform: rotate(80deg); }
[data-anim="dip"] .ex-arm { animation-name: ex-dip-arm; }
[data-anim="dip"] .ex-forearm { animation-name: ex-dip-fore; }
[data-anim="dip"] .ex-shadow { opacity: 0.4; }
@keyframes ex-dip-fig { 0% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: translateY(-7px); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: translateY(-18px); } }
@keyframes ex-dip-arm { 0% { transform: rotate(-4deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(28deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(-4deg); } }
@keyframes ex-dip-fore { 0% { transform: rotate(4deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-36deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(4deg); } }

/* Bridge (glute bridge on the floor / hip thrust off a bench): lying face-up,
   knees bent, hips drive up — torso pivots at the shoulders, thigh follows. */
[data-pose="supinefloor"] .ex-fig { animation: none; transform: translate(2px, 54px) rotate(-90deg); transform-origin: 70px 92px; }
[data-pose="supinefloor"] .ex-torso { animation: none; }
[data-pose="supinefloor"] .ex-thigh { animation: none; transform: rotate(-72deg); }
[data-pose="supinefloor"] .ex-shin { animation: none; transform: rotate(162deg); }
[data-pose="supinefloor"] .ex-shadow { opacity: 0.3; }
[data-pose="thrust"] .ex-fig { animation: none; transform: translate(2px, 44px) rotate(-72deg); transform-origin: 70px 92px; }
[data-pose="thrust"] .ex-torso { animation: none; }
[data-pose="thrust"] .ex-thigh { animation: none; transform: rotate(-72deg); }
[data-pose="thrust"] .ex-shin { animation: none; transform: rotate(144deg); }
[data-pose="thrust"] .ex-shadow { opacity: 0.35; }
[data-anim="bridge"] .ex-torso { transform-origin: 71px 53px; animation-name: ex-bridge-torso; }
[data-anim="bridge"] .ex-thigh { animation-name: ex-bridge-thigh; }
[data-anim="bridge"] .ex-arm { animation: none; transform: rotate(-12deg); }
[data-anim="bridge"] .ex-forearm { animation: none; transform: rotate(0deg); }
@keyframes ex-bridge-torso { 0% { transform: rotate(2deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-18deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(2deg); } }
@keyframes ex-bridge-thigh { 0% { transform: translate(0px, 0px) rotate(-72deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: translate(12px, -1px) rotate(-86deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: translate(0px, 0px) rotate(-72deg); } }

/* Kneeling family: crunch (hands at head), nordic (rigid fall), ab rollout. */
[data-pose="kneel"] .ex-fig { animation: none; transform: translateY(27px); }
[data-pose="kneel"] .ex-thigh { animation: none; }
[data-pose="kneel"] .ex-shin { animation: none; transform: rotate(90deg); }
[data-pose="kneel"] .ex-shadow { opacity: 0.5; }
[data-anim="crunch"] .ex-torso { animation-name: ex-crunch-torso; }
[data-anim="crunch"] .ex-arm { animation: none; transform: rotate(-150deg); }
[data-anim="crunch"] .ex-forearm { animation: none; transform: rotate(-58deg); }
@keyframes ex-crunch-torso { 0% { transform: rotate(8deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(46deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(8deg); } }
[data-anim="nordic"] .ex-torso { animation-name: ex-nordic-torso; }
[data-anim="nordic"] .ex-arm { animation-name: ex-nordic-arm; }
[data-anim="nordic"] .ex-forearm { animation: none; transform: rotate(-6deg); }
/* Nordic tempo: the slow fight down IS the exercise — long eccentric (0→58),
   brief bottom, quicker assisted return. */
@keyframes ex-nordic-torso { 0% { transform: rotate(4deg); animation-timing-function: cubic-bezier(.4,.05,.7,.6); } 58%, 64% { transform: rotate(42deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 88%, 100% { transform: rotate(4deg); } }
@keyframes ex-nordic-arm { 0% { transform: rotate(-22deg); animation-timing-function: cubic-bezier(.4,.05,.7,.6); } 58%, 64% { transform: rotate(-64deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 88%, 100% { transform: rotate(-22deg); } }
[data-anim="rollout"] .ex-torso { animation-name: ex-roll-torso; }
[data-anim="rollout"] .ex-arm { animation-name: ex-roll-arm; }
[data-anim="rollout"] .ex-forearm { animation: none; transform: rotate(-4deg); }
@keyframes ex-roll-torso { 0% { transform: rotate(24deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(64deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(24deg); } }
@keyframes ex-roll-arm { 0% { transform: rotate(-70deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-96deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(-70deg); } }

/* Russian twist: v-sit, arms sweep. */
[data-pose="vsit"] .ex-fig { animation: none; transform: translateY(50px); }
[data-pose="vsit"] .ex-torso { animation: none; transform: rotate(-30deg); }
[data-pose="vsit"] .ex-thigh { animation: none; transform: rotate(-100deg); }
[data-pose="vsit"] .ex-shin { animation: none; transform: rotate(40deg); }
[data-pose="vsit"] .ex-shadow { opacity: 0.4; }
[data-anim="twist"] .ex-arm { animation-name: ex-twist-arm; animation-duration: 2s; }
[data-anim="twist"] .ex-forearm { animation: none; transform: rotate(-12deg); }
@keyframes ex-twist-arm { 0%, 100% { transform: rotate(-52deg); } 22%, 32% { transform: rotate(-96deg); } 54% { transform: rotate(-52deg); } 74%, 84% { transform: rotate(-96deg); } }

/* Shrug: bar hangs at the thighs — up quick, squeeze, lower slow. */
[data-anim="shrug"] .ex-fig { animation-name: ex-shrug-fig; }
@keyframes ex-shrug-fig { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: translateY(-4px); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: translateY(0); } }

/* Overhead triceps extension: arm up, forearm lowers behind the head. */
[data-anim="ohext"] .ex-arm { animation: none; transform: rotate(-168deg); }
[data-anim="ohext"] .ex-forearm { animation-name: ex-ohext-fore; }
@keyframes ex-ohext-fore { 0% { transform: rotate(96deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(6deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(96deg); } }

/* Skullcrusher: supine on the bench, upper arm fixed, forearm hinges. */
[data-anim="skullcrusher"] .ex-arm { animation: none; transform: rotate(-88deg); }
[data-anim="skullcrusher"] .ex-forearm { animation-name: ex-skull-fore; }
/* Eccentric-first: lower the bar to the forehead, then press back up. */
@keyframes ex-skull-fore { 0% { transform: rotate(-6deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 46%, 56% { transform: rotate(-84deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 84%, 100% { transform: rotate(-6deg); } }

/* Kick-leg (hip abduction / glute kickback): leg sweeps back and out. */
[data-anim="kickleg"] .ex-torso { animation: none; transform: rotate(6deg); }
[data-anim="kickleg"] .ex-thigh { animation-name: ex-kickleg-thigh; }
[data-anim="kickleg"] .ex-shin { animation: none; transform: rotate(-4deg); }
@keyframes ex-kickleg-thigh { 0% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(26deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-2deg); } }

/* Face pull: arm at face height, hand pulls in with the elbow high. */
[data-anim="facepull"] .ex-arm { animation-name: ex-fp-arm; }
[data-anim="facepull"] .ex-forearm { animation-name: ex-fp-fore; }
@keyframes ex-fp-arm { 0% { transform: rotate(-98deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-64deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-98deg); } }
@keyframes ex-fp-fore { 0% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-64deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-2deg); } }

/* Triceps kickback: hinged over, upper arm pinned, forearm extends back. */
[data-anim="kickback"] .ex-torso { animation: none; transform: rotate(38deg); }
[data-anim="kickback"] .ex-thigh { animation: none; transform: rotate(-10deg); }
[data-anim="kickback"] .ex-shin { animation: none; transform: rotate(12deg); }
[data-anim="kickback"] .ex-arm { animation: none; transform: rotate(22deg); }
[data-anim="kickback"] .ex-forearm { animation-name: ex-kb-fore; }
@keyframes ex-kb-fore { 0% { transform: rotate(-86deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-86deg); } }

/* Leg press: reclined into the seat, legs drive the sled plate away. */
[data-pose="recline"] .ex-fig { animation: none; transform: translate(-14px, 30px) rotate(-42deg); transform-origin: 70px 92px; }
[data-pose="recline"] .ex-torso { animation: none; }
[data-pose="recline"] .ex-arm { animation: none; transform: rotate(-10deg); }
[data-pose="recline"] .ex-forearm { animation: none; transform: rotate(-6deg); }
[data-pose="recline"] .ex-shadow { opacity: 0.4; }
[data-anim="legpress"] .ex-thigh { animation-name: ex-lp-thigh; }
[data-anim="legpress"] .ex-shin { animation-name: ex-lp-shin; }
@keyframes ex-lp-thigh { 0% { transform: rotate(-72deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-72deg); } }
@keyframes ex-lp-shin { 0% { transform: rotate(84deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(18deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(84deg); } }

/* Seated leg curl: thigh fixed on the pad, heel curls down and back. */
[data-anim="legcurlseat"] .ex-thigh { animation: none; transform: rotate(-24deg); }
[data-anim="legcurlseat"] .ex-shin { animation-name: ex-lcs-shin; }
@keyframes ex-lcs-shin { 0% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(58deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-8deg); } }

/* Bent-over row (barbell/dumbbell): deep hinge held, bar pulls to the hip. */
[data-anim="row"] .ex-torso { animation-name: ex-row2-torso; }
[data-anim="row"] .ex-thigh { animation: none; transform: rotate(-14deg); }
[data-anim="row"] .ex-shin { animation: none; transform: rotate(10deg); }
[data-anim="row"] .ex-arm { animation-name: ex-row2-arm; }
[data-anim="row"] .ex-forearm { animation-name: ex-row2-fore; }
@keyframes ex-row2-torso { 0% { transform: rotate(40deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(36deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(40deg); } }
@keyframes ex-row2-arm { 0% { transform: rotate(-58deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-16deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-58deg); } }
@keyframes ex-row2-fore { 0% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-2deg); } }

/* Bent-over reverse fly / rear delt: hinged, straight arm sweeps up wide. */
[data-anim="bentraise"] .ex-torso { animation: none; transform: rotate(36deg); }
[data-anim="bentraise"] .ex-thigh { animation: none; transform: rotate(-12deg); }
[data-anim="bentraise"] .ex-shin { animation: none; transform: rotate(10deg); }
[data-anim="bentraise"] .ex-arm { animation-name: ex-br-arm; }
[data-anim="bentraise"] .ex-forearm { animation: none; transform: rotate(-6deg); }
@keyframes ex-br-arm { 0% { transform: rotate(-40deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(30deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(-40deg); } }

/* Seated cable row: long-sit, handle pulled to the waist. */
[data-pose="longsit"] .ex-fig { animation: none; transform: translateY(44px); }
[data-pose="longsit"] .ex-thigh { animation: none; transform: rotate(-70deg); }
[data-pose="longsit"] .ex-shin { animation: none; transform: rotate(-5deg); }
[data-pose="longsit"] .ex-shadow { opacity: 0.45; }
[data-pose="longsit"] .ex-torso { animation-name: ex-seatrow-torso; }
@keyframes ex-seatrow-torso { 0% { transform: rotate(10deg); animation-timing-function: cubic-bezier(.16,.72,.28,1); } 32%, 46% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.55,.08,.58,.9); } 86%, 100% { transform: rotate(10deg); } }

/* Pallof press: arms locked long in front, bracing against rotation. */
[data-anim="pallof"] .ex-fig { animation-name: ex-brace; animation-duration: 3s; }
[data-anim="pallof"] .ex-arm { animation: none; transform: rotate(-80deg); }
[data-anim="pallof"] .ex-forearm { animation: none; transform: rotate(-4deg); }

/* Give the named motions the shared rep-cycle defaults (3s, normal). */
[data-anim="pullup"] .ex-arm, [data-anim="benchpress"] .ex-arm, [data-anim="benchpress"] .ex-forearm,
[data-anim="calfraise"] .ex-fig, [data-anim="calfraise"] .ex-foot,
[data-anim="legext"] .ex-shin, [data-anim="legcurl"] .ex-shin,
[data-anim="pushdown"] .ex-arm, [data-anim="pushdown"] .ex-forearm,
[data-anim="raise"] .ex-arm, [data-anim="raise"] .ex-forearm,
[data-anim="hangraise"] .ex-thigh, [data-anim="hangraise"] .ex-shin,
[data-anim="pushup"] .ex-fig, [data-anim="pushup"] .ex-arm, [data-anim="pushup"] .ex-forearm,
[data-anim="plank"] .ex-fig,
[data-anim="dip"] .ex-fig, [data-anim="dip"] .ex-arm, [data-anim="dip"] .ex-forearm,
[data-anim="bridge"] .ex-torso, [data-anim="bridge"] .ex-thigh,
[data-anim="crunch"] .ex-torso, [data-anim="nordic"] .ex-torso, [data-anim="nordic"] .ex-arm,
[data-anim="rollout"] .ex-torso, [data-anim="rollout"] .ex-arm,
[data-anim="twist"] .ex-arm, [data-anim="shrug"] .ex-fig,
[data-anim="ohext"] .ex-forearm, [data-anim="skullcrusher"] .ex-forearm,
[data-anim="kickleg"] .ex-thigh, [data-anim="facepull"] .ex-arm, [data-anim="facepull"] .ex-forearm,
[data-anim="kickback"] .ex-forearm,
[data-anim="legpress"] .ex-thigh, [data-anim="legpress"] .ex-shin,
[data-anim="legcurlseat"] .ex-shin,
[data-anim="row"] .ex-torso, [data-anim="row"] .ex-arm, [data-anim="row"] .ex-forearm,
[data-anim="bentraise"] .ex-arm, [data-pose="longsit"] .ex-torso,
[data-anim="pallof"] .ex-fig {
  animation-duration: 3s; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-direction: normal;
}
/* Per-lift tempo: grinding compounds run slower, small isolation moves
   quicker, the nordic eccentric slowest of all. */
[data-anim="squat"] :is(.ex-fig, .ex-torso, .ex-arm, .ex-forearm, .ex-thigh, .ex-shin, .ex-foot),
[data-anim="hinge"] :is(.ex-fig, .ex-torso, .ex-arm, .ex-forearm, .ex-thigh, .ex-shin, .ex-foot),
[data-anim="rollout"] :is(.ex-torso, .ex-arm) { animation-duration: 3.4s; }
[data-anim="lunge"] :is(.ex-fig, .ex-torso, .ex-arm, .ex-forearm, .ex-thigh, .ex-shin, .ex-foot),
[data-anim="benchpress"] :is(.ex-arm, .ex-forearm),
[data-anim="vertical_push"] :is(.ex-arm, .ex-forearm),
[data-anim="dip"] :is(.ex-fig, .ex-arm, .ex-forearm),
[data-anim="legpress"] :is(.ex-thigh, .ex-shin) { animation-duration: 3.2s; }
[data-anim="isolation"] :is(.ex-arm, .ex-forearm),
[data-anim="pushdown"] :is(.ex-arm, .ex-forearm),
[data-anim="kickback"] .ex-forearm, [data-anim="kickleg"] .ex-thigh,
[data-anim="calfraise"] :is(.ex-fig, .ex-foot), [data-anim="shrug"] .ex-fig,
[data-anim="plyometric"] :is(.ex-fig, .ex-thigh, .ex-shin, .ex-foot, .ex-arm) { animation-duration: 2.4s; }
[data-anim="pushup"] :is(.ex-fig, .ex-arm, .ex-forearm) { animation-duration: 2.8s; }
[data-anim="nordic"] :is(.ex-torso, .ex-arm) { animation-duration: 3.6s; }
[data-anim="plank"] .ex-fig, [data-anim="pallof"] .ex-fig { animation-duration: 3.2s; }
[data-anim="twist"] .ex-arm { animation-duration: 2s; }

@media (prefers-reduced-motion: reduce) {
  .ex-anim__svg *, .ex-anim__dot { animation: none !important; }
}

/* ----------------------------------------------------------------------------
   Exercise Library
---------------------------------------------------------------------------- */
.lib-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.lib-search { max-width: 320px; }
.lib-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lib-chip { padding: 0.4rem 0.85rem; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: var(--transition); }
.lib-chip:hover { color: var(--text); border-color: var(--accent-ring); }
.lib-chip.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-ring); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
/* content-visibility: off-screen cards skip render entirely, so a long grid
   of animated exercise figures only pays for the ones actually in view. */
.lib-card { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); cursor: pointer; transition: var(--transition); content-visibility: auto; contain-intrinsic-size: auto 250px; }
.lib-card:hover { border-color: var(--accent-ring); transform: translateY(-1px); }
.lib-card__name { font-weight: 600; font-size: var(--fs-small); letter-spacing: -0.01em; color: var(--text); }
.lib-card__meta { font-size: 0.78rem; color: var(--text-muted); }
.lib-card__diff { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.lib-tag { font-size: 0.75rem; }
.lib-tag--fav { color: var(--warn); }
.lib-tag--dis { color: var(--text-faint); }
.lib-empty { grid-column: 1 / -1; padding: var(--space-6); text-align: center; }

/* Exercise detail modal */
.exercise-dialog { max-width: 620px; }
.lib-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.lib-badge { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--r-full); padding: 3px 9px; }
.lib-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.lib-block { margin-bottom: var(--space-4); }
.lib-block--safety { padding: var(--space-3) var(--space-4); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--r-sm); }
.lib-h5 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; margin-bottom: var(--space-2); }
.lib-h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.lib-p { font-size: var(--fs-small); color: var(--text); line-height: 1.55; }
.lib-muted { font-size: 0.8rem; color: var(--text-faint); line-height: 1.45; }
.lib-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-list li { position: relative; padding-left: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.lib-list li::before { content: "·"; position: absolute; left: 5px; color: var(--accent); }
.lib-inplan { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--fs-small); color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); }
.lib-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.lib-swaps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lib-swap { padding: 0.5rem 0.85rem; font-size: var(--fs-small); color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: var(--transition); }
.lib-swap:hover { border-color: var(--accent); color: var(--accent); }
.lib-fallback { padding: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); line-height: 1.55; }
.lib-swapdone { text-align: center; padding: var(--space-4); }
.lib-swapdone .lib-actions { justify-content: center; }
@media (max-width: 560px) { .lib-cols2 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------
   Workout session — difficulty feedback + completion summary
---------------------------------------------------------------------------- */
.session-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; margin-top: var(--space-3); border-top: 1px solid var(--border); }
.session-feedback__label { font-size: var(--fs-small); color: var(--text-muted); }
.session-diff { display: flex; gap: var(--space-2); }
.session-diff__chip { padding: 0.4rem 0.8rem; font-size: var(--fs-small); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: var(--transition); }
.session-diff__chip:hover { color: var(--text); border-color: var(--accent-ring); }
.session-diff__chip.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-ring); }
.session-pain { margin-left: auto; color: var(--warn); }

.summary-dialog { max-width: 480px; }
.summary-name { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-4); }
.summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.summary-stat { padding: var(--space-3); text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.summary-stat__v { display: block; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.summary-stat__l { font-size: 0.66rem; color: var(--text-muted); }
.summary-prs { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); font-size: var(--fs-small); color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--r-sm); }
.summary-prs__badge { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); margin-right: 6px; }
.summary-row { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--space-2); }
.summary-k { display: inline-block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; margin-right: 6px; }
.summary-pain { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r-sm); }
.summary-nudge { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-faint); }
.summary-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ----------------------------------------------------------------------------
   Split Lab
---------------------------------------------------------------------------- */
.split-hero { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); }
.split-score { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 3px solid var(--accent-ring); }
.split-score__n { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; line-height: 1; }
.split-score__d { font-size: 0.7rem; color: var(--text-muted); }
.split-score--good { border-color: var(--success); } .split-score--good .split-score__n { color: var(--success); }
.split-score--ok { border-color: var(--accent); } .split-score--ok .split-score__n { color: var(--accent); }
.split-score--warn { border-color: var(--warn); } .split-score--warn .split-score__n { color: var(--warn); }
.split-score--bad { border-color: var(--danger); } .split-score--bad .split-score__n { color: var(--danger); }
.split-hero__grade { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.split-hero__src { font-weight: 400; font-size: var(--fs-small); color: var(--text-faint); }
.split-hero__sum { margin-top: 4px; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.split-tip { font-size: 0.78rem; color: var(--text-faint); margin-bottom: var(--space-4); }

.split-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.split-card { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--space-4); }
.split-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.split-h { font-size: 0.95rem; font-weight: 700; }
.split-legend { font-size: 0.7rem; color: var(--text-faint); }
.vdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 2px 0 6px; vertical-align: middle; }
.vdot--low { background: var(--warn); } .vdot--ok { background: var(--success); } .vdot--high { background: var(--danger); }

.vbars { display: flex; flex-direction: column; gap: 9px; }
.vbar { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: var(--space-3); }
.vbar__label { font-size: var(--fs-small); color: var(--text-muted); }
.vbar__track { height: 9px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.vbar__fill { display: block; height: 100%; border-radius: var(--r-full); }
.vbar__fill--ok { background: var(--success); }
.vbar__fill--low { background: var(--warn); }
.vbar__fill--high { background: var(--danger); }
.vbar__fill--none { background: transparent; }
.vbar__val { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); min-width: 56px; text-align: right; }
.vbar__freq { color: var(--text-faint); font-size: 0.68rem; margin-left: 4px; }

.bals { display: flex; flex-direction: column; gap: var(--space-4); }
.bal__head { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 5px; }
.bal__bar { display: flex; height: 9px; border-radius: var(--r-full); overflow: hidden; background: var(--surface-2); }
.bal__l { background: var(--accent); } .bal__r { background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.bal__cap { display: block; margin-top: 5px; font-size: 0.68rem; color: var(--text-faint); }

.sflags { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sflag { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
.sflag p { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.sflag--warning { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.sflag--critical { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.sflag--suggestion { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.sflag__tier { flex: none; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 7px; border-radius: var(--r-full); background: var(--surface); color: var(--text-muted); margin-top: 2px; }
.sflag--warning .sflag__tier { color: var(--warn); } .sflag--critical .sflag__tier { color: var(--danger); } .sflag--suggestion .sflag__tier { color: var(--accent); }
.split-pass { font-size: var(--fs-small); color: var(--success); }

.wcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.wcard { padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 6px; }
.wcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.wcard__name { font-size: 0.95rem; }
.wcard__badge { flex: none; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: var(--r-full); background: var(--surface); color: var(--text-muted); }
.wcard--balanced .wcard__badge { color: var(--success); }
.wcard--too-long .wcard__badge { color: var(--warn); }
.wcard__meta { font-size: 0.72rem; color: var(--text-faint); }
.wcard__note { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; flex: 1; }
.wcard__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: 4px; }
.wcard__del { font-size: 0.72rem; }
.split-empty .split-note, .split-note { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }
.split-note a { color: var(--accent); }
@media (max-width: 820px) { .split-grid { grid-template-columns: 1fr; } .split-hero { flex-direction: column; text-align: center; } }

/* ----------------------------------------------------------------------------
   Pain Mode modal
---------------------------------------------------------------------------- */
.pain-dialog { max-width: 540px; }
.pain-intro { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-4); }
.pain-field { margin-bottom: var(--space-4); }
.pain-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin-bottom: var(--space-2); }
.pain-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pain-chip { padding: 0.5rem 0.9rem; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: var(--transition); }
.pain-chip:hover { color: var(--text); border-color: var(--accent-ring); }
.pain-chip.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-ring); }
.pain-result { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.pain-result--critical { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.pain-result--warning { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.pain-result__headline { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.pain-result--critical .pain-result__headline { color: var(--danger); }
.pain-result--warning .pain-result__headline { color: var(--warn); }
.pain-result__advice { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pain-result__advice li { position: relative; padding-left: var(--space-4); font-size: var(--fs-small); color: var(--text); line-height: 1.5; }
.pain-result__advice li::before { content: "•"; position: absolute; left: 4px; color: var(--text-faint); }
.pain-changed { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--success); }
.pain-disclaimer { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-faint); }
.pain-result__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ----------------------------------------------------------------------------
   First-week guided experience
---------------------------------------------------------------------------- */
.fw-card { position: relative; padding: var(--space-5); margin-bottom: var(--space-5); border-color: var(--accent-ring); box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-ring); }
.fw-card--review { background: var(--accent-soft); }
.fw-dismiss { position: absolute; top: var(--space-3); right: var(--space-3); width: 28px; height: 28px; display: grid; place-items: center; font-size: 1.1rem; color: var(--text-faint); background: none; border: none; border-radius: var(--r-sm); cursor: pointer; }
.fw-dismiss:hover { color: var(--text); background: var(--surface-2); }
.fw-eyebrow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 600; }
.fw-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; padding-right: var(--space-5); }
.fw-line { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }
.fw-k { display: inline-block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); font-weight: 600; margin-right: 6px; }
.fw-items { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fw-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); color: var(--text-muted); }
.fw-item.is-done { color: var(--text); }
.fw-check { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); font-size: 0.75rem; color: var(--success); }
.fw-item.is-done .fw-check { border-color: var(--success); background: var(--success-soft); }
.fw-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin: var(--space-4) 0; }
.fw-stat { padding: var(--space-3); text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.fw-stat__v { display: block; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; color: var(--text); }
.fw-stat__l { font-size: 0.64rem; color: var(--text-muted); }
.fw-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 560px) { .fw-stats { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------------------------------
   Today screen (consumer daily home base)
---------------------------------------------------------------------------- */
.today-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
/* Week at a glance — one chip per planned session */
.week-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.week-strip__label { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-right: var(--space-1); }
.week-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; font-size: 0.74rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); }
.week-chip__dot { display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: 0.6rem; border-radius: 50%; border: 1px solid var(--border); color: var(--success); }
.week-chip--done { color: var(--text); }
.week-chip--done .week-chip__dot { border-color: var(--success); background: var(--success-soft); }
.week-chip--today { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); }
.week-chip--today .week-chip__dot { border-color: var(--accent); box-shadow: 0 0 7px 0 var(--accent); }
.week-chip--upcoming { opacity: 0.75; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.today-col { display: flex; flex-direction: column; gap: var(--space-4); }
.today-card { padding: var(--space-5); }
.today-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.today-card__eyebrow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); font-weight: 600; }
.today-card__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.today-card__text { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }
.today-muted { color: var(--text-faint); }
.today-badge { flex: none; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--r-full); padding: 4px 10px; }
.today-warmup { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.today-warmup strong { color: var(--text); }
.today-ex { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; }
.today-ex li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-soft); }
.today-ex__name { font-size: var(--fs-small); color: var(--text); }
.today-ex__sr { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.today-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.today-note { font-size: var(--fs-small); line-height: 1.55; margin-top: var(--space-2); }
.today-note--ok { color: var(--success); }
.today-note--warn { color: var(--warn); }
.today-note--info { color: var(--text-muted); }
.today-stats { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.today-stat { display: flex; flex-direction: column; }
.today-stat__v { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }
.today-stat__l { font-size: 0.72rem; color: var(--text-muted); }
.today-card--coach { border-color: var(--accent-ring); }
.today-empty { text-align: center; padding: var(--space-5) var(--space-4); }
.today-empty .btn { margin-top: var(--space-4); }
@media (max-width: 880px) { .today-grid { grid-template-columns: 1fr; } }

/* Homepage user scenarios */
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.scenario { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-3); }
.scenario__title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.scenario__input, .scenario__row, .scenario__why { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.scenario__k { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; margin-bottom: 2px; }
.scenario__input { color: var(--text); }
.scenario__why { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.scenario__why .scenario__k { color: var(--accent); }

/* Homepage limitations ("what not to trust") */
.limits { padding: var(--space-6); }
.limits__intro { margin-top: var(--space-3); font-size: 1.02rem; color: var(--text-muted); max-width: 72ch; }
.limits__intro strong { color: var(--text); }
.limits__list { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2) var(--space-5); }
.limits__list li { position: relative; padding-left: var(--space-5); font-size: var(--fs-small); color: var(--text-muted); }
.limits__list li::before { content: "✕"; position: absolute; left: 2px; color: var(--danger); font-size: 0.8rem; font-weight: 700; }
.limits__redirect { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--r-sm); }

/* Safety Lab teaser (homepage) */
.lab-teaser { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); padding: var(--space-6); align-items: center; }
.lab-teaser__copy .btn { margin-top: var(--space-4); }
.lab-teaser__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lab-teaser__stat { padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.lab-teaser__num { display: block; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.lab-teaser__num.is-ok { color: var(--success); }
.lab-teaser__num.is-warn { color: var(--warn); }
.lab-teaser__label { font-size: 0.78rem; color: var(--text-muted); }
@media (max-width: 760px) { .lab-teaser { grid-template-columns: 1fr; } }

/* Architecture flow (homepage) */
.arch-flow { list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.arch-flow__node { padding: 0.55rem 0.85rem; font-size: var(--fs-small); font-weight: 500; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); white-space: nowrap; }
.arch-flow__node span { color: var(--text-faint); font-size: 0.74rem; }
.arch-flow__node--ai { border-color: var(--accent-ring); color: var(--accent); }
.arch-flow__node--code { font-family: var(--font-mono); font-size: 0.8rem; }
.arch-flow__node--loop { border-color: var(--accent-ring); color: var(--accent); background: var(--accent-soft); }
.arch-flow__arrow { color: var(--text-faint); }
.arch-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2) var(--space-5); }
.arch-grid li { position: relative; padding-left: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.arch-grid li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.arch-grid strong { color: var(--text); font-weight: 600; }

/* Final CTA (homepage) */
.final-cta { text-align: center; padding: var(--space-8) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); }
.final-cta__title { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; }
.final-cta__sub { margin: var(--space-3) auto 0; max-width: 56ch; color: var(--text-muted); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); }
.first-workout-cta { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--accent-ring); border-radius: var(--r-md); background: var(--accent-soft); }
.first-workout-cta p { margin-bottom: var(--space-3); color: var(--text-muted); }
.limits__redirect strong { color: var(--accent); }

/* Rule explanation cards + training principles */
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.rule-card { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-2); }
.rule-card__name { font-size: 1rem; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.rule-card__row { font-size: var(--fs-small); color: var(--text); line-height: 1.5; }
.rule-card__k { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; }
.rule-card__limit { color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: auto; }
.principles { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2) var(--space-5); }
.principles li { position: relative; padding-left: var(--space-5); font-size: var(--fs-small); color: var(--text-muted); }
.principles li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.principles__note { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); max-width: 80ch; }

/* Privacy & data */
.privacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.privacy-col { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.privacy-col--local { border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.privacy-col--sent { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.privacy-col h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: var(--space-3); }
.privacy-col--local h4 { color: var(--success); }
.privacy-col--sent h4 { color: var(--accent); }
.privacy-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.privacy-col li { position: relative; padding-left: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.privacy-col li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.privacy-controls { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.privacy-controls strong { color: var(--text); }

/* Safety boundary notice (generator) */
.boundary-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: var(--r-md); color: var(--text); }
.boundary-notice svg { color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.boundary-notice p { font-size: var(--fs-small); color: var(--text-muted); }

/* Form-check confidence meter + pain state */
.form-conf { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.form-conf__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.form-conf__label { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; }
.form-conf__label[data-level="high"] { color: var(--success); }
.form-conf__label[data-level="med"] { color: var(--warn); }
.form-conf__label[data-level="low"] { color: var(--danger); }
.form-conf__track { height: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); overflow: hidden; }
.form-conf__bar { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; border-radius: var(--r-full); transition: transform 200ms ease; background: var(--danger); }
.form-conf__bar[data-level="high"] { background: var(--success); }
.form-conf__bar[data-level="med"] { background: var(--warn); }
.form-conf__bar[data-level="low"] { background: var(--danger); }
.form-conf__note { margin-top: var(--space-2); font-size: 0.76rem; color: var(--text-faint); }
.form-side__list--tight { margin-top: var(--space-2); gap: 6px !important; }
.form-side__list--tight li { font-size: 0.8rem; }
.form-pain-btn { width: 100%; }
.form-pain-msg { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: var(--r-sm); }

/* Nutrition safety section spacing (reuses .audit / .flag / .trust styling) */
.nut-safety { margin-top: var(--space-5); }
.nut-trust { margin-top: var(--space-4); }
.nut-wontdo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.nut-wontdo__col { padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.nut-wontdo__col--no { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.nut-wontdo__col--yes { border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.nut-wontdo__col h5 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.nut-wontdo__col--no h5 { color: var(--danger); }
.nut-wontdo__col--yes h5 { color: var(--success); }
.nut-wontdo__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.nut-wontdo__col li { position: relative; padding-left: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.nut-wontdo__col--no li::before { content: "✕"; position: absolute; left: 2px; color: var(--danger); font-size: 0.8rem; font-weight: 700; }
.nut-wontdo__col--yes p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }

/* ----------------------------------------------------------------------------
   Plan repair — before/after comparison
---------------------------------------------------------------------------- */
.repair { margin-top: var(--space-4); padding: var(--space-5); border-color: var(--accent-ring); box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-ring); }
.repair__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; }
.repair__title { margin-top: var(--space-2); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.repair__sub { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); max-width: 64ch; }
.repair__compare { display: flex; align-items: stretch; gap: var(--space-3); margin: var(--space-4) 0; }
.repair__col { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.repair__col--after { border-color: var(--accent-ring); }
.repair__col-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.repair__col-flags { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.repair__col-flags.is-warn { color: var(--warn); }
.repair__col-flags.is-ok { color: var(--success); }
.repair__col-score { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.repair__arrow { display: flex; align-items: center; color: var(--accent); font-size: 1.3rem; }
.repair__changes { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.repair__changes li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.repair__changes li { gap: 3px; }
.repair__issue { font-size: var(--fs-small); color: var(--text-muted); }
.repair__fix { font-size: var(--fs-small); color: var(--text); }
.repair__why, .repair__tradeoff { display: block; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.repair__tradeoff { color: var(--text-faint); }
.repair__k { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; margin-right: 5px; }
.repair__why .repair__k { color: var(--accent); }
.repair__fix::before { content: "\2192  "; color: var(--accent); }
.repair__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.repair__caution { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-muted); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r-sm); }
@media (max-width: 560px) { .repair__compare { flex-direction: column; } .repair__arrow { transform: rotate(90deg); justify-content: center; } }

/* Quiet fact row under the hero — one line, mono numerals, no tiles. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.hero__facts strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hero__facts span + span::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--text-faint);
  line-height: 1.4;
}

/* ----------------------------------------------------------------------------
   7. Disclaimer
---------------------------------------------------------------------------- */
.disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
}
.disclaimer__icon {
  color: var(--warn);
  flex-shrink: 0;
  margin-top: 2px;
}
.disclaimer p {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.disclaimer strong {
  color: var(--text);
}

/* ----------------------------------------------------------------------------
   8. Card base
---------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  /* No backdrop-filter. The dark build kept a saturate() pass to enrich the
     aurora bloom through translucent glass; surfaces are opaque now, so the
     filter had nothing left to act on and only cost a compositing layer. */
}
.card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   9. Generator layout (form + results)
---------------------------------------------------------------------------- */
.generator {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-6);
  align-items: start;
}

.generator--results-only {
  display: block;
  max-width: 1080px;
}

/* The form sticks while you scroll the results on desktop. */
.form {
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  position: sticky;
  top: 92px;
}
.form__head {
  margin-bottom: var(--space-5);
}
.section-subtitle {
  font-size: 0.95rem;
}

/* Fields */
.field {
  border: 0;
  padding: 0;
  margin-bottom: var(--space-5);
}
.field:last-of-type {
  margin-bottom: var(--space-4);
}
.field__label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-3);
  padding: 0;
}
.field__hint {
  font-weight: 400;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* Chip toggles (custom radios/checkboxes) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chips--compact {
  gap: var(--space-2);
}
.chip {
  position: relative;
  display: inline-flex;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  user-select: none;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}
.chip:hover span {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
  transform: translateY(-1px);
}
.chip--square span {
  min-width: 3rem;
  padding-inline: 0.6rem;
}
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
/* Caution chips (injuries) signal a flagged input in amber, not the brand red. */
.chip--caution input:checked + span {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  color: var(--warn);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Textarea */
.textarea {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea::placeholder {
  color: var(--text-faint);
}
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form__foot {
  margin-top: var(--space-3);
  font-size: 0.78rem;
  color: var(--text-faint);
  text-align: center;
}

/* ----------------------------------------------------------------------------
   10. Results — shared state container
---------------------------------------------------------------------------- */
.results {
  min-height: 480px;
}
/* The results panel (#state-results) receives programmatic focus after rendering
   to move SR/scroll position; it is not a tabbable control, so suppress its ring.
   (app.js focuses .state--results, not the .results wrapper.) */
.results:focus,
.results:focus-visible,
.state--results:focus,
.state--results:focus-visible {
  outline: none;
}
.state {
  display: flex;
  flex-direction: column;
}

/* Empty & error states share centered styling */
.state--empty,
.state--error {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 480px;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}
.empty-art {
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: var(--space-2);
}
.state__title {
  font-size: 1.3rem;
}
.state__text {
  color: var(--text-muted);
  max-width: 42ch;
}
.state__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: var(--space-2);
}
.state__icon--danger {
  color: var(--danger);
  background: var(--danger-soft);
}

/* ----------------------------------------------------------------------------
   11. Loading state (branded skeleton + spinner)
---------------------------------------------------------------------------- */
.state--loading {
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-height: 480px;
}
.loading-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.spinner {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
.loading-title {
  font-weight: 600;
  font-family: var(--font-display);
}
.loading-step {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.skeleton-gauge {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  margin: var(--space-4) auto;
  background:
    radial-gradient(circle at center, var(--surface) 52%, transparent 53%),
    conic-gradient(var(--surface-2), var(--border), var(--surface-2));
  position: relative;
  overflow: hidden;
}
.skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.skeleton-row {
  height: 18px;
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--surface-2) 30%, #23262e 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-row:nth-child(2) {
  width: 85%;
}
.skeleton-row:nth-child(3) {
  width: 65%;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ----------------------------------------------------------------------------
   12. Results — success
---------------------------------------------------------------------------- */
.state--results {
  gap: var(--space-5);
}

/* Fallback / info notice */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.notice svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.notice strong {
  color: var(--text);
}

/* Score card */
.score-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}
.score-card__gauge {
  position: relative;
  width: 184px;
  height: 184px;
  flex-shrink: 0;
}
.gauge {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}
.gauge__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 14;
}
.gauge__progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease;
}
/* The safety gauge stays a semantic green→amber→red scale, independent of the
   red brand accent — a red ring must never read as a "good" score. */
.gauge__progress.is-excellent { stroke: var(--success); }
.gauge__progress.is-good { stroke: var(--success); }
.gauge__progress.is-caution { stroke: var(--warn); }
.gauge__progress.is-danger { stroke: var(--danger); }

.gauge__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gauge__value {
  font-family: var(--font-mono);
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.gauge__max {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-faint);
  margin-top: var(--space-1);
  letter-spacing: 0.02em;
}

.score-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.score-card__title {
  font-size: 1.5rem;
  margin-top: var(--space-1);
}
.score-card__title.is-excellent { color: var(--success); }
.score-card__title.is-good { color: var(--success); }
.score-card__title.is-caution { color: var(--warn); }
.score-card__title.is-danger { color: var(--danger); }

.score-card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.score-card__text strong {
  color: var(--text);
}
.score-legend {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.score-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dot--pass { background: var(--success); }
.dot--warn { background: var(--warn); }
.dot--fail { background: var(--danger); }

/* Checks card */
.checks-card {
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}
.checks {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.check {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
  animation: rise 0.5s both;
  animation-delay: calc(var(--i) * 60ms);
}
.check--pass { border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.check--warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.check--fail { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

.check__icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.check--pass .check__icon { color: var(--success); }
.check--warn .check__icon { color: var(--warn); }
.check--fail .check__icon { color: var(--danger); }

.check__body {
  flex: 1;
  min-width: 0;
}
.check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.check__label {
  font-weight: 600;
  font-size: 0.95rem;
}
.check__badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
}
.check__badge--pass { background: var(--success-soft); color: var(--success); }
.check__badge--warn { background: var(--warn-soft); color: var(--warn); }
.check__badge--fail { background: var(--danger-soft); color: var(--danger); }

.check__detail {
  margin-top: var(--space-2);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ----------------------------------------------------------------------------
   13. Plan output
---------------------------------------------------------------------------- */
.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.plan__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.plan__title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-top: var(--space-1);
}
.plan__facts {
  display: flex;
  gap: var(--space-5);
}
.plan__facts div {
  text-align: right;
}
.plan__facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.plan__facts dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.day-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  animation: rise 0.5s both;
  animation-delay: calc(var(--i) * 70ms);
}
.day-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow-lg);
}
.day-card__head {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.day-card__day {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.day-card__focus {
  font-size: 1.05rem;
  margin-top: var(--space-1);
}
.day-card__table-wrap {
  overflow-x: auto;
}

.ex-table {
  font-size: 0.875rem;
}
/* Plan editor — per-exercise substitute/remove + per-day add */
.ex-row-acts { white-space: nowrap; text-align: right; padding-right: var(--space-3); }
.ex-act { width: 26px; height: 26px; margin-left: 2px; font-size: 0.95rem; line-height: 1; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: var(--transition); }
.ex-act:hover { color: var(--accent); border-color: var(--accent-ring); }
.ex-act--del:hover { color: var(--danger); border-color: var(--danger); }
.day-add { width: 100%; margin-top: var(--space-2); padding: 0.5rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); background: none; border: 1px dashed var(--border); border-radius: var(--r-sm); cursor: pointer; transition: var(--transition); }
.day-add:hover { color: var(--accent); border-color: var(--accent-ring); }
.day-edit:empty { display: none; }
.ex-edit-panel { margin-top: var(--space-2); padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--accent-ring); border-radius: var(--r-md); }
.ex-edit-title { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-2); }
.ex-edit-muted { font-size: 0.78rem; color: var(--text-faint); margin-bottom: var(--space-2); }
.ex-edit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.ex-edit-chip, .ex-edit-result { padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: var(--transition); }
.ex-edit-chip:hover, .ex-edit-result:hover { color: var(--accent); border-color: var(--accent); }
.ex-edit-search { width: 100%; margin-bottom: var(--space-2); }
.ex-edit-results { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-edit-result--custom { border-style: dashed; color: var(--text-muted); }
.ex-edit-cancel { display: inline-block; margin-top: var(--space-2); font-size: 0.78rem; }
/* On phones the editable table is tight — stack the action buttons + trim
   padding so Substitute AND Remove both stay on-screen (no sideways scroll). */
@media (max-width: 600px) {
  .day-card__table-wrap { overflow-x: visible; }
  .ex-table--editable th, .ex-table--editable td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .ex-table--editable .num { padding-left: 5px; padding-right: 5px; }
  .ex-row-acts { padding-left: 2px; padding-right: 2px; }
  .ex-row-acts .ex-act { display: block; width: 30px; height: 28px; margin: 0 0 4px auto; }
}
.ex-table thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: var(--space-3) var(--space-4);
}
.ex-table th.num,
.ex-table td.num {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}
.ex-table tbody tr {
  border-top: 1px solid var(--border-soft);
}
.ex-table tbody tr:hover {
  background: var(--surface-2);
}
.ex-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}
.ex-name {
  display: block;
  font-weight: 500;
  color: var(--text);
}
.ex-note {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.4;
}
.ex-table td.num {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 500;
}

/* Plan notes */
.plan-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.plan-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
}
.plan-note h5 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.plan-note p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   13b. Adaptive coach loop (re-tune from training, then re-audit)
---------------------------------------------------------------------------- */
.adapt-card {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--surface);
}
.adapt-card__eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.adapt-card__text {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.adapt-hint {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0;
}
.adapt-hint--error {
  color: var(--warn);
}
#adapt-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
#adapt-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-ink) 45%, transparent);
  border-top-color: var(--accent-ink);
  animation: spin 0.8s linear infinite;
}
.adapt-changes {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--space-4) var(--space-5);
}
.adapt-changes__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.adapt-changes__summary {
  margin-top: var(--space-3);
  font-size: 0.92rem;
  color: var(--text);
}
.adapt-changes__label {
  margin-top: var(--space-4);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.adapt-changes__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.adapt-changes__list li {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   13c. Quick log (natural language + voice)
---------------------------------------------------------------------------- */
.quicklog {
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.quicklog__badge {
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: middle;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  letter-spacing: 0.04em;
}
.quicklog__hint {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.quicklog__form {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  margin-top: var(--space-3);
}
.quicklog__input {
  flex: 1;
  min-width: 0;
}
.quicklog__mic {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.quicklog__mic:hover svg,
.quicklog__mic.is-recording svg { color: var(--accent); }
.quicklog__mic:hover {
  border-color: var(--accent);
}
.quicklog__mic.is-recording {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  animation: ql-pulse 1.1s ease-in-out infinite;
}
@keyframes ql-pulse {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.quicklog__result {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ql-title {
  font-size: 0.9rem;
  color: var(--text);
}
.ql-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ql-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-small);
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.ql-list li:last-child {
  border-bottom: none;
}
.ql-name {
  color: var(--text);
}
.ql-meta {
  flex: none;
  color: var(--text-faint);
}
.ql-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.ql-note,
.ql-loading,
.ql-success {
  font-size: var(--fs-small);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ql-success {
  color: var(--accent);
}
.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ----------------------------------------------------------------------------
   13d. Coaching depth — deload flag, exercise progress, auto-progression
---------------------------------------------------------------------------- */
.deload-flag {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: var(--r-md);
}
.deload-flag__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--warn);
}
.deload-flag__text {
  flex: 1;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text);
}
.deload-flag__dismiss {
  flex: none;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 2px;
}
.deload-flag__dismiss:hover {
  color: var(--text);
}
.exprog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.exprog__pick {
  min-width: 0;
  max-width: 60%;
}
.ex-target {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.ex-block__prev .ex-target {
  margin-left: 2px;
}

/* ----------------------------------------------------------------------------
   13e. Session tools — rest timer + plate/1RM calculators
---------------------------------------------------------------------------- */
.rest-timer {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3) 0;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: var(--r-md);
  overflow: hidden;
}
.rest-timer__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-2); }
.rest-timer__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.rest-timer__time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
}
.rest-presets { display: flex; gap: 4px; }
.rest-preset {
  padding: 0.3rem 0.55rem; font-size: 0.74rem; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: var(--transition);
}
.rest-preset:hover { color: var(--text); border-color: var(--accent-ring); }
.rest-preset.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-ring); }
.rest-custom {
  width: 5.6ch; padding: 0.3rem 0.35rem; font-size: 0.74rem; font-weight: 600; text-align: center; color: var(--text);
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-full); font-variant-numeric: tabular-nums;
}
.rest-custom:focus { outline: none; border-style: solid; border-color: var(--accent); }
.rest-custom::placeholder { color: var(--text-faint); font-weight: 500; }
.rest-timer__btns { margin-left: auto; display: flex; gap: var(--space-2); }
/* Toggle controls by state: idle shows presets + Start, running shows +15s/Skip. */
.rest-timer.is-running .rest-presets,
.rest-timer.is-running [data-rest="start"],
.rest-timer:not(.is-running) [data-rest="add"],
.rest-timer:not(.is-running) [data-rest="skip"] { display: none; }
.rest-timer.is-running .rest-timer__time { animation: rest-pulse 1s ease-in-out infinite; }
@keyframes rest-pulse { 50% { opacity: 0.55; } }
.rest-timer__bar { height: 4px; background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: var(--r-full); overflow: hidden; }
.rest-timer__fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--accent); border-radius: var(--r-full); transition: transform 0.95s linear; }
.session-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.tool {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
}
.tool__title {
  font-size: 0.82rem;
  margin-bottom: var(--space-2);
}
.tool__row {
  display: flex;
  gap: var(--space-2);
}
.tool__row .field-label-sm {
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.tool__out {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
}
.plate-chip {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
  color: var(--text);
}
.plate-line {
  line-height: 1.9;
}
.orm-est {
  margin-bottom: var(--space-2);
}
.orm-est strong {
  color: var(--accent);
  font-size: 1.05rem;
}
.orm-table {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px var(--space-3);
}
.orm-table li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-muted);
}
.dash-share {
  margin-top: var(--space-3);
  width: 100%;
}
/* Zero-cost calendar export (plan results) */
.calendar-export {
  margin-top: var(--space-4);
  padding: var(--space-5);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.calendar-export__head { margin-bottom: var(--space-4); }
.calendar-export__head h3 { font-size: 1.05rem; }
.calendar-export__head p { margin-top: var(--space-2); max-width: 68ch; color: var(--text-muted); font-size: var(--fs-small); }
.calendar-export .btn--block { min-height: 48px; }
.calendar-export__dialog {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.calendar-export__dialog .field .input,
.calendar-export__dialog input,
.calendar-export__dialog select { width: 100%; min-height: 44px; }
.calendar-export__error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  line-height: 1.5;
}
.calendar-export__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.calendar-export__actions .btn { min-height: 44px; }

/* On-device rest-timer alert toggle (Account) */
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--text);
  font-size: var(--fs-small);
  cursor: pointer;
}
.toggle-row input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.toggle-row:has(input:disabled) { color: var(--text-faint); cursor: not-allowed; }

.notification-status { margin: var(--space-3) 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
.notification-error { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); font-size: 0.8rem; line-height: 1.5; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); border-radius: var(--r-sm); }

@media (max-width: 600px) {
  .calendar-export { padding: var(--space-4); }
  .calendar-export__actions .btn { width: 100%; }
}

/* ----------------------------------------------------------------------------
   13f. Chat safety guard + Evals (red-team) page
---------------------------------------------------------------------------- */
.chat-guard {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  font-size: 0.8rem;
}
/* Coach applied a plan edit */
.chat-applied {
  display: flex; gap: var(--space-2); margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3); font-size: 0.8rem;
  border: 1px solid var(--success-ring); background: var(--success-soft); border-radius: var(--r-sm);
}
.chat-applied__tick { color: var(--success); font-weight: 700; }
.chat-applied strong { color: var(--text); }
.chat-applied ul { margin: 4px 0 4px; padding-left: 1.1em; color: var(--text-muted); }
.chat-applied__link { display: inline-block; margin-top: 2px; color: var(--accent); font-weight: 600; }
.chat-guard--warn {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.chat-guard__head {
  display: block;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warn);
  margin-bottom: 4px;
}
.chat-guard--warn .chat-guard__head {
  color: var(--danger);
}
.chat-guard ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-guard li {
  color: var(--text-muted);
}
.chat-guard strong {
  color: var(--text);
}

#eval-rerun {
  margin-top: var(--space-3);
}
.eval-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.eval-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.eval-summary.is-pass {
  border-color: color-mix(in srgb, var(--success) 50%, var(--border));
}
.eval-summary.is-fail {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
}
.eval-summary__big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text);
}
.eval-summary.is-pass .eval-summary__big {
  color: var(--success);
}
.eval-summary__label {
  color: var(--text-muted);
  font-size: var(--fs-small);
}
/* Filters + scenario types (red-team report) */
.eval-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0; }
.eval-controls .eval-filters { margin: 0; }
.eval-sort { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); }
.eval-sort select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 9px; font: inherit; font-size: var(--fs-small); cursor: pointer; }
.eval-error { padding: var(--space-5); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-small); }
.bench__tag { display: inline-block; font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px 9px; vertical-align: middle; margin-left: 8px; }
.eval-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.eval-filter { display: inline-flex; align-items: center; gap: 6px; padding: 0.4rem 0.85rem; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: var(--transition); }
.eval-filter:hover { color: var(--text); border-color: var(--accent-ring); }
.eval-filter.is-active { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); }
.eval-filter__n { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.85; }
.eval-case__type { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 7px; border-radius: var(--r-full); vertical-align: middle; margin-left: 6px; }
.eval-case__type--good, .eval-case__type--guard { color: var(--success); background: var(--success-soft); }
.eval-case__type--risky { color: var(--warn); background: var(--warn-soft); }
.eval-case__type--edge { color: var(--text-muted); background: rgba(20, 26, 23, 0.06); }
.eval-flagchips { display: flex; flex-wrap: wrap; gap: 6px; }
.eval-chip { font-size: 0.72rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px 10px; }
.eval-case__sub--muted { color: var(--text-faint); }
.eval-empty { padding: var(--space-5); text-align: center; }

.eval-cases {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.eval-case {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.eval-case__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.eval-case__head:hover {
  background: var(--surface-2);
}
.eval-case__status {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.eval-case.is-pass .eval-case__status {
  background: color-mix(in srgb, var(--success) 22%, transparent);
  color: var(--success);
}
.eval-case.is-fail .eval-case__status {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}
.eval-case__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eval-case__name {
  font-weight: 600;
}
.eval-case__desc {
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.eval-case__score {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
}
.eval-case__score small {
  font-size: 0.7rem;
  color: var(--text-faint);
  font-weight: 400;
}
.eval-case__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
}
.eval-case__sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: var(--space-3) 0 var(--space-2);
}
.eval-exp {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-small);
}
.eval-exp .ok {
  color: var(--success);
}
.eval-exp .bad {
  color: var(--danger);
}
.eval-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.eval-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.eval-check__badge {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.eval-check--pass .eval-check__badge {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.eval-check--warn .eval-check__badge {
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  color: var(--warn);
}
.eval-check--fail .eval-check__badge {
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  color: var(--danger);
}
.eval-check div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.eval-check strong {
  font-size: var(--fs-small);
  color: var(--text);
}
.eval-check .muted {
  font-size: 0.8rem;
}

/* ----------------------------------------------------------------------------
   14. How it works
---------------------------------------------------------------------------- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  counter-reset: step;
}
.step {
  padding: var(--space-6);
  position: relative;
}
.step__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.step__title {
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
}
.step__text {
  color: var(--text-muted);
  font-size: 0.92rem;
}
.step__text em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

.method-note {
  margin-top: var(--space-5);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}
.method-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3) var(--space-5);
}
.method-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.92rem;
  color: var(--text-muted);
}
.method-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.method-list strong {
  color: var(--text);
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   15. Footer
---------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding-block: var(--space-7);
  background: var(--bg-soft);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-6);
  align-items: start;
}
.site-footer__tag {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 30ch;
}
.site-footer__disclaimer {
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.6;
}
.site-footer__disclaimer strong {
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   16. Entrance animation
---------------------------------------------------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------------------------
   17. Responsive
---------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .generator {
    grid-template-columns: 1fr;
  }
  .form {
    position: static;
  }
  .results {
    min-height: 0;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .hero__facts {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero__facts span + span::before {
    content: none;
  }
  .score-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .score-legend {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4);
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .plan__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .plan__facts {
    width: 100%;
    justify-content: flex-start;
  }
  .plan__facts div {
    text-align: left;
  }
  .gauge__value {
    font-size: 2.9rem;
  }
}

/* ----------------------------------------------------------------------------
   18. Reduced motion
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover,
  .day-card:hover,
  .chip:hover span {
    transform: none;
  }
}

/* ----------------------------------------------------------------------------
   14. Form check (camera)
---------------------------------------------------------------------------- */
.form-check {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.camera {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.camera__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Mirror video + overlay canvas for a natural selfie view (they stay aligned). */
.camera__stage video,
.camera__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.camera__stage canvas {
  pointer-events: none;
}

/* Live overlay: rep count + cues (NOT mirrored, so text reads normally). */
.cam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
  pointer-events: none;
}
.cam-overlay__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.cam-overlay__rec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text);
  background: rgba(10, 11, 13, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.cam-overlay__rec[hidden] {
  display: none;
}
.cam-overlay__rec-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--danger);
  animation: rec-blink 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cam-overlay__rec-dot {
    animation: none;
  }
}
@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.cam-overlay__reps {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(10, 11, 13, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cam-overlay__count {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.cam-overlay__reps-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.cam-overlay__cues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Cue badges — bright fills with dark ink so they read over any video frame.
   Brand red is avoided here so cues don't clash with "good/warn" semantics. */
.cue {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 600;
}
.cue--good {
  background: var(--success);
  color: var(--accent-ink);
}
.cue--warn {
  background: var(--warn);
  color: #3a2a05;
}

.cam-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
}
.cam-placeholder svg {
  color: var(--text-faint);
  margin-bottom: var(--space-1);
}
.cam-placeholder__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.cam-placeholder__text {
  max-width: 36ch;
  font-size: var(--fs-small);
}
.cam-placeholder__privacy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.78rem;
  color: var(--text-faint);
}

.camera__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.camera__buttons {
  display: flex;
  gap: var(--space-2);
}

/* Custom-styled exercise dropdown (no default browser chrome) */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  padding: 0.6rem 2.2rem 0.6rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--transition);
}
.form-select:hover {
  border-color: var(--text-faint);
}
.form-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.form-select:disabled {
  opacity: 0.55;
  cursor: default;
}
.form-select optgroup {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
}
.form-select option {
  color: var(--text);
  background: var(--surface-2);
}

/* Side readout panel */
/* Recommended camera angle for the selected exercise (next to the picker). */
.form-pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.form-pick .form-select {
  flex: 1;
  min-width: 0;
}
.form-angle {
  order: 1; /* after the select */
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-full);
}

.form-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form-side__status {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.form-side__status[data-tone="good"] {
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.35);
}
.form-side__status[data-tone="warn"] {
  color: var(--warn);
  border-color: rgba(251, 191, 36, 0.35);
}
.form-side__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-side__heading {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}
.form-side__setup,
.form-side__list {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.form-side__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: 1.1em;
  list-style: disc;
}
.form-side__muted {
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.form-side__disclaimer {
  padding-top: var(--space-3);
  font-size: 0.78rem;
  color: var(--text-faint);
  border-top: 1px solid var(--border-soft);
}
.form-side__setup--constant {
  color: var(--text-faint);
  font-size: 0.78rem;
}
.form-lastrep {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.form-lastrep__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}
.form-lastrep.pulse {
  animation: lastrep-pulse 600ms ease;
}
@keyframes lastrep-pulse {
  0% { transform: scale(0.96); opacity: 0.35; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 900px) {
  .form-check {
    grid-template-columns: 1fr;
  }
}

/* Post-set report (rendered by form-coach.js after Stop) */
.form-report {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form-report[hidden] {
  display: none;
}
.form-report__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text);
}
.form-report__meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.form-report__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-report__heading {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}
.form-report__reps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.rep-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0 var(--space-2);
  font-size: var(--fs-small);
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface-2);
}
.rep-chip--good {
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--success);
}
.rep-chip--warn {
  border-color: rgba(251, 191, 36, 0.45);
  color: var(--warn);
}
.rep-chip--unjudged {
  color: var(--text-faint);
  border-style: dashed;
}
.rep-chip--best {
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
}
.form-report__findings,
.form-report__tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
  list-style: none;
}
.form-finding {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.form-finding--good {
  color: var(--success);
}
.form-finding__count {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  white-space: nowrap;
}
.form-report__tips li strong {
  color: var(--text);
}
.form-report__clean {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--success);
}
.form-report__note {
  font-size: 0.78rem;
  color: var(--text-faint);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-3);
}
.form-video__player {
  width: 100%;
  max-height: 60vh;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.form-video__markers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.marker-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: var(--r-full);
  cursor: pointer;
}
.marker-btn--best {
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--success);
}
.marker-btn:hover {
  background: var(--surface-3, var(--surface-2));
  border-color: var(--border-strong, var(--border));
}
.marker-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.form-video__note {
  border-top: 0;
  padding-top: 0;
}

/* ----------------------------------------------------------------------------
   15. Coach chatbot (floating widget)
---------------------------------------------------------------------------- */
.chat-fab {
  position: fixed;
  right: max(var(--space-5), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  box-shadow: var(--glow-accent), var(--shadow-md);
  transition: transform var(--transition), background var(--transition);
}
.chat-fab:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}
.chat-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.chat-panel {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 91;
  width: min(390px, calc(100vw - 2 * var(--space-4)));
  height: min(620px, calc(100vh - 2 * var(--space-5)));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.chat-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.chat-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.chat-panel__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(255, 59, 59, 0.3);
}
.chat-panel__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.chat-panel__context {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
  color: var(--text-faint);
}
.chat-panel__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.chat-panel__close:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.chat-panel__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
}
.chat-msg {
  max-width: 85%;
  padding: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.55;
  border-radius: var(--r-md);
}
.chat-msg p {
  margin: 0 0 0.5em;
}
.chat-msg p:last-child {
  margin-bottom: 0;
}
.chat-msg ul {
  margin: 0.3em 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.chat-msg code {
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  background: var(--bg);
  border-radius: 4px;
}
.chat-msg--assistant {
  align-self: flex-start;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--r-sm);
}
.chat-msg--user {
  align-self: flex-end;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border-bottom-right-radius: var(--r-sm);
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-typing .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: chat-typing 1s infinite ease-in-out;
}
.chat-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.chat-suggestion {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  text-align: left;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: var(--transition);
}
.chat-suggestion:hover {
  color: var(--text);
  border-color: var(--accent);
}
.chat-suggestion:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}
.chat-input {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  padding: 0.65rem 0.8rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  resize: none;
  transition: var(--transition);
}
.chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-input::placeholder {
  color: var(--text-faint);
}
.chat-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--transition);
}
.chat-send:hover {
  background: var(--accent-hover);
}
.chat-send:disabled {
  opacity: 0.5;
  cursor: default;
}
.chat-send:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-foot {
  padding: 0 var(--space-4) var(--space-3);
  font-size: 0.72rem;
  text-align: center;
  color: var(--text-faint);
}

@media (max-width: 480px) {
  .chat-panel {
    right: var(--space-3);
    left: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    height: min(76vh, 560px);
  }
  .chat-fab__label {
    display: none;
  }
  .chat-fab {
    padding: var(--space-3);
  }
}

/* ----------------------------------------------------------------------------
   16. Dashboard (gamified tracker)
---------------------------------------------------------------------------- */
/* Dashboard tabs — one section on screen at a time */
.dash-tabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--space-5);
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.dash-tab {
  min-height: 44px;
  padding: 0 var(--space-5);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.dash-tab:hover { color: var(--text); }
.dash-tab.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}
.dash-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-panel > .card + .card,
.dash-panel > .deload-flag + .card { margin-top: var(--space-5); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
/* Panels stack cards full-width; the 2-col dash-grid stays for Nutrition */
.dash-panel .dash-grid { grid-template-columns: minmax(0, 1fr); }
.dash-rankcard,
.dash-achievements-card {
  grid-column: 1 / -1;
}
.dash-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
}
/* Keep the history from dominating the page. */
#workout-history {
  flex: 1;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* First-run welcome card (shown only on an empty profile) */
.dash-welcome {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background:
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.dash-welcome__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.dash-welcome__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.dash-welcome__text {
  margin-top: var(--space-2);
  max-width: 64ch;
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.5;
}
.dash-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Generic text/number input used across the dashboard */
.input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: var(--transition);
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input--sm { max-width: 100px; }
.field-inline {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.field-inline .input { flex: 1; min-width: 90px; }
.field-inline .input--sm { flex: 0 0 auto; }

/* Bento: let a card span the full grid width */
.dash-span { grid-column: 1 / -1; }

/* Rank hero — rank/level + XP on the left, stat tiles on the right */
.dash-rankcard {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  padding: var(--space-5);
}
.dash-rankcard #dash-stats {
  grid-template-columns: repeat(2, 1fr);
}
.dash-rankcard .dash-share {
  grid-column: 1 / -1;
  width: auto;
  justify-self: start;
  margin-top: var(--space-1);
}
@media (max-width: 760px) {
  .dash-rankcard { grid-template-columns: 1fr; }
}
#dash-rank {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.rank-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 132px;
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--rank, var(--accent));
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rank, var(--accent)) 22%, transparent), transparent 72%),
    var(--surface-2);
}
.rank-badge__tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--rank, var(--accent));
}
.rank-badge__level {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rank-meta {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rank-meta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.rank-xp {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rank-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--warn);
}
.rank-streak svg { width: 16px; height: 16px; }
.rank-bar {
  height: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
}
.rank-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rank-next { font-size: var(--fs-small); color: var(--text-muted); }

/* Stat tiles */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.stat-tile__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-tile__label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Charts */
.chart, .ring { display: block; width: 100%; height: auto; }
.chart-empty {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 132px;
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.chart-empty::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 12px;
  left: 10px;
  height: 2px;
  background: var(--border);
}

.dash-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.entry-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0;
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--border-soft);
}
#workout-history > .workout-empty:only-child {
  min-height: 132px;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  border-bottom: 0;
}
.entry-list li > span:first-child { flex: 1; color: var(--text); }
.muted { color: var(--text-faint); }
.entry-del {
  width: 24px;
  height: 24px;
  margin-left: auto;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.entry-del:hover { color: var(--danger); background: var(--danger-soft); }
.dash-subchart { margin-top: var(--space-2); }
.dash-subchart__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dash-hint { font-size: 0.78rem; color: var(--text-faint); }
.field-label-sm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.field-label-sm .input { max-width: 120px; }
.btn-link {
  padding: 0;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}
.btn-link:hover { color: var(--accent); }

.btn-link-danger {
  padding: 0;
  font-size: 0.78rem;
  color: var(--text-faint);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.btn-link-danger:hover { color: var(--danger); }

/* Achievements */
.badges__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-3);
}
.badges__toggle,
.hist-more .btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-2);
}
.badges__empty { margin: 0; }
.hist-more { display: flex; justify-content: center; }
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 10rem;
  padding: var(--space-4);
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.badge__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
}
.badge__icon svg { width: 22px; height: 22px; }
.badge__name { font-weight: 600; font-size: var(--fs-small); color: var(--text); }
.badge__desc {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-faint);
}
.badge__xp {
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}
.badge.is-unlocked { border-color: rgba(255, 59, 59, 0.4); }
.badge.is-unlocked .badge__icon { color: var(--accent); background: var(--accent-soft); }
.badge.is-locked .badge__icon { color: var(--text-faint); background: var(--surface); }

/* Toasts */
.toast-root {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(320px, calc(100vw - 2 * var(--space-5)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}
.toast.show { opacity: 1; transform: none; }
.toast--xp { border-color: rgba(255, 59, 59, 0.4); }
.toast--ach { border-color: rgba(255, 210, 74, 0.5); }
.toast__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-full);
}
.toast__icon svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .dash-grid { gap: var(--space-4); }
}

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

@media (max-width: 600px) {
  .dash-card,
  .quicklog { padding: var(--space-4); }
}

@media (max-width: 480px) {
  .badges__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ----------------------------------------------------------------------------
   18. Navigation, pages, profiles & account modal
---------------------------------------------------------------------------- */
.site-header__inner {
  justify-content: flex-start;
  gap: var(--space-3);
}
.site-header__nav { margin-left: auto; }
.nav-link.is-active { color: var(--text); }
.nav-link.is-active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.header-gh {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  padding: 7px;
  border-radius: var(--r-sm);
  transition: var(--transition);
}
.header-gh:hover {
  color: var(--text);
  background: var(--surface-2);
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Profile button */
.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
  padding: 0.35rem 0.6rem 0.35rem 0.4rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: var(--transition);
}
.profile-btn:hover { border-color: var(--text-faint); }
.profile-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-btn__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-full);
}
.profile-btn__name { font-size: 0.9rem; font-weight: 600; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-btn__chev { color: var(--text-faint); }

/* Page views: subtle entrance when switched in */
.view { animation: view-in 280ms ease both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.workout-list { gap: 0; }

/* Account modal */
.account-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(20, 26, 23, 0.38);
  opacity: 0;
  /* visibility:hidden takes the closed overlay out of compositing entirely.
     It flips after the fade so the transition still reads. (The backdrop-blur
     this originally guarded against is gone in the light register; the rule
     stays because it also keeps a closed full-viewport layer off the
     compositor.) */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility 0s linear 240ms;
}
.account-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--transition), visibility 0s; }
.account-dialog {
  width: min(440px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--transition);
}
.account-modal.is-open .account-dialog { transform: none; }
.account-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.account-dialog__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--transition);
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.account-current {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.account-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-full);
  flex: none;
}
.account-avatar--sm { width: 30px; height: 30px; font-size: 0.85rem; }

.account-section { margin-top: var(--space-5); }
.account-h {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}
.account-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.account-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.account-row__name { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-row .account-pin { max-width: 84px; }
.account-del {
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.account-del:hover { color: var(--danger); background: var(--danger-soft); }
.account-empty { padding: var(--space-2); }
.account-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.account-form .input { flex: 1; min-width: 120px; }
.account-note { margin-top: var(--space-2); font-size: 0.74rem; color: var(--text-faint); }
.account-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}
.account-import-label { cursor: pointer; }
.account-import-label input { display: none; }
.account-actions .btn-link-danger { margin-left: auto; }
.account-flash { margin-top: var(--space-1); font-size: 0.74rem; color: var(--accent); }

/* Danger zone — destructive "clear all data" */
.account-danger { padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--danger) 26%, var(--border-soft)); }
.account-danger .account-h { color: var(--danger); }
.btn--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}
.btn--danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* Units (metric / imperial) segmented toggle */
.unit-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.unit-opt {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  padding: var(--space-3) var(--space-4); color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: var(--transition);
}
.unit-opt strong { color: var(--text); font-size: 0.92rem; }
.unit-opt span { font-size: 0.72rem; color: var(--text-faint); }
.unit-opt:hover { border-color: var(--accent-ring); }
.unit-opt.is-active { border-color: var(--accent); background: var(--accent-soft); }
.unit-opt.is-active strong { color: var(--accent); }

/* Header responsive: hamburger + dropdown nav */
@media (max-width: 860px) {
  /* Right group, in visual order: …  profile-avatar  hamburger */
  .site-header__inner { gap: var(--space-2); }
  .nav-toggle { display: inline-grid; order: 3; }
  .profile-btn { order: 2; margin-left: auto; margin-right: var(--space-2); padding: 4px; gap: 0; }
  .profile-btn__name,
  .profile-btn__chev { display: none; }
  .site-header__nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__nav .nav-link {
    padding: 0.7rem 0.4rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { color: var(--accent); }
}

/* ----------------------------------------------------------------------------
   19. Cloud sync (Google) UI
---------------------------------------------------------------------------- */
.google-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--transition);
}
.google-btn:hover { background: #f5f6f7; box-shadow: var(--shadow-sm); }
.google-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sync-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sync-user__photo {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  object-fit: cover;
}
.sync-user__meta { flex: 1; min-width: 0; font-size: var(--fs-small); overflow: hidden; }
.sync-user__meta strong { color: var(--text); }
.sync-user__meta .muted { font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sync-status {
  flex: none;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--r-full);
}
.sync-status--synced { color: var(--success); background: var(--success-soft); }
.sync-status--syncing { color: var(--warn); background: var(--warn-soft); }
.sync-status--error { color: var(--danger); background: var(--danger-soft); }

/* ----------------------------------------------------------------------------
   20. Workout session (Hevy-style) + history + exercise picker
---------------------------------------------------------------------------- */
.dash-workout-card { grid-column: 1 / -1; }

/* Idle */
.workout-idle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.workout-idle__head .card-title { margin: 0; }
.routine-list { display: flex; flex-direction: column; gap: var(--space-2); }
.workout-grouplabel {
  margin: var(--space-2) 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.routine {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.routine__start {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--transition);
}
.routine__start:hover { border-color: var(--accent); }
.routine__start--plan { width: 100%; }
.routine__meta { font-size: 0.74rem; font-weight: 500; color: var(--text-faint); }
.routine__del {
  width: 38px;
  font-size: 1.1rem;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
}
.routine__del:hover { color: var(--danger); border-color: var(--danger); }

/* Saved workouts — prominent "tap to load into the tracker" cards */
.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.saved-w { position: relative; display: flex; }
.saved-w__load {
  flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 0.85rem 0.95rem; padding-right: 2.4rem;
  font-family: var(--font-body); color: var(--text); cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--accent-ring); border-radius: var(--r-md); transition: var(--transition);
}
.saved-w__load:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--glow-accent); }
.saved-w__load--plan { padding-right: 0.95rem; }
.saved-w__name { font-size: 0.92rem; font-weight: 600; }
.saved-w__meta { font-size: 0.72rem; color: var(--accent); font-weight: 500; }
.saved-w .routine__del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; line-height: 1; border-color: transparent; background: transparent; }
.workout-hint { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; margin-top: var(--space-2); padding: var(--space-3); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm); }

/* Active session */
.session-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.session-name { flex: 1; font-weight: 600; }
.session-unit { flex: none; display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); }
.session-unit__opt {
  padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  background: none; border: none; border-radius: var(--r-full); cursor: pointer; transition: var(--transition);
}
.session-unit__opt:hover { color: var(--text); }
.session-unit__opt.is-active { color: var(--accent-ink); background: var(--accent); }
.session-timer {
  flex: none;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}
.session-exercises { display: flex; flex-direction: column; gap: var(--space-3); }

.ex-block {
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ex-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.ex-block__title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ex-block__name { font-weight: 600; color: var(--text); }
.ex-block__prev { font-size: 0.72rem; color: var(--text-faint); }
.ex-block__del {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.ex-block__del:hover { color: var(--danger); background: var(--danger-soft); }

.set-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
.set-table th {
  padding: 0.2rem 0.25rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}
.set-table th:first-child, .set-table th:nth-child(2) { text-align: left; }
.set-row > td { padding: 0.2rem 0.2rem; text-align: center; }
.set-n { width: 1.8rem; font-weight: 600; color: var(--text-muted); text-align: left !important; }
.set-prev { font-size: 0.74rem; color: var(--text-faint); text-align: left !important; white-space: nowrap; }
.set-in {
  width: 100%;
  min-width: 3rem;
  max-width: 5rem;
  padding: 0.4rem 0.3rem;
  text-align: center;
}
.set-ctl { width: 4.2rem; white-space: nowrap; }
.set-done, .set-del {
  width: 28px;
  height: 30px;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--transition);
}
.set-done {
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
}
.set-done:hover { border-color: var(--success); color: var(--success); }
.set-del {
  color: var(--text-faint);
  background: transparent;
  border: none;
}
.set-del:hover { color: var(--danger); }
.set-row.is-done > td { background: var(--success-soft); }
.set-row.is-done .set-done { color: var(--accent-ink); background: var(--success); border-color: var(--success); }

.add-set {
  width: 100%;
  margin-top: var(--space-2);
  padding: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--transition);
}
.add-set:hover { color: var(--text); border-color: var(--text-faint); }
.session-add { width: 100%; margin-top: var(--space-3); }
.session-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.session-actions__right { display: flex; gap: var(--space-2); }

/* History */
.hist { border-bottom: 1px solid var(--border-soft); }
.hist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.6rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.hist__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hist__name { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.hist__sub { font-size: 0.72rem; color: var(--text-faint); }
.hist__vol { flex: none; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.hist__detail { padding: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.hist__ex { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-small); }
.hist__ex strong { color: var(--text); font-weight: 600; }

/* Exercise picker modal */
.picker-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  padding: 8vh var(--space-4) var(--space-4);
  background: rgba(20, 26, 23, 0.38);
  opacity: 0;
  /* See .account-modal: keep the closed full-screen layer out of compositing. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility 0s linear 240ms;
}
.picker-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--transition), visibility 0s; }
.picker-dialog {
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: 80vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.picker-head {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.picker-head .input { flex: 1; }
.exercise-results {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exercise-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.exercise-opt:hover { background: var(--surface-2); }
.exercise-opt__muscle { flex: none; font-size: 0.72rem; color: var(--text-faint); }
.exercise-opt--custom { color: var(--accent); }
.exercise-opt.is-loading { pointer-events: none; opacity: 0.7; }
.exercise-opt.is-loading .exercise-opt__muscle {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite; font-size: 0; flex: none;
}
.exercise-empty { padding: var(--space-3); }

@media (max-width: 520px) {
  .set-in { min-width: 2.6rem; padding: 0.4rem 0.2rem; }
  .set-prev { font-size: 0.68rem; }
}

/* ----------------------------------------------------------------------------
   21. Nutrition diary (MyFitnessPal-style)
---------------------------------------------------------------------------- */
.nut-datenav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.nut-date {
  min-width: 9rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}
.nut-todaybtn { margin-left: var(--space-2); }
.nut-meals-card { grid-column: 1 / -1; }

/* Calories summary */
.nut-summary { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.cal-ring { position: relative; width: 132px; height: 132px; flex: none; }
.cal-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cal-ring__num { font-family: var(--font-mono); font-weight: 600; font-size: 1.7rem; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.cal-ring__sub { font-size: 0.72rem; color: var(--text-muted); }
.cal-meta { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: var(--space-2); }
.cal-line { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-small); color: var(--text-muted); }
.cal-line strong { font-size: 1.05rem; color: var(--text); }
.macro-rows { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.macro-row__top { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text); margin-bottom: 3px; }
.macro-bar { height: 7px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.macro-bar span { display: block; height: 100%; border-radius: var(--r-full); transition: width 400ms ease; }

/* Meals */
.nut-meals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.meal {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.meal__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.meal__head-right { display: inline-flex; align-items: baseline; gap: var(--space-3); }
.meal__act { padding: 2px 9px; font-size: 0.7rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--r-full); cursor: pointer; transition: var(--transition); }
.meal__act:hover { background: var(--accent); color: var(--accent-ink); }
.meal__name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }
.meal__kcal { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.meal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.meal__empty { padding: 0.25rem 0; }
.food-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.food-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.food-row__name { font-size: var(--fs-small); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.food-row__sub { font-size: 0.7rem; color: var(--text-faint); }
.food-row__kcal { flex: none; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.food-row__del { flex: none; width: 22px; height: 22px; font-size: 0.95rem; color: var(--text-faint); background: transparent; border: none; border-radius: var(--r-sm); cursor: pointer; }
.food-row__del:hover { color: var(--danger); }
/* The row body is a button (tap to edit) — reset button chrome, keep layout. */
button.food-row__main { font: inherit; text-align: left; background: none; border: none; padding: 0; cursor: pointer; color: inherit; border-radius: var(--r-sm); }
button.food-row__main:hover .food-row__name { color: var(--accent); }
/* Inline diary-row editor */
.food-row.is-editing { display: block; }
.food-edit { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.food-edit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.food-edit__grid label { display: flex; flex-direction: column; gap: 2px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.food-edit__acts { display: flex; align-items: center; gap: var(--space-3); }
/* Saved-meal rows in the picker */
.food-tpl { display: flex; align-items: center; gap: var(--space-1); }
.food-tpl .food-opt { flex: 1; min-width: 0; }
.food-tpl__del { flex: none; width: 24px; height: 24px; font-size: 1rem; color: var(--text-faint); background: none; border: none; border-radius: var(--r-sm); cursor: pointer; }
.food-tpl__del:hover { color: var(--danger); }
.hist__acts { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
/* Barcode scanner */
.scan-box { position: relative; margin-top: var(--space-3); border-radius: var(--r-md); overflow: hidden; background: #000; }
.scan-box__video { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.scan-box__frame { position: absolute; inset: 18% 12%; border: 2px solid var(--accent); border-radius: var(--r-sm); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); pointer-events: none; }
.scan-box__hint { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2) var(--space-3); text-align: center; font-size: var(--fs-small); color: #fff; background: rgba(0, 0, 0, 0.55); }
.meal__add {
  margin-top: var(--space-2);
  padding: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--transition);
}
.meal__add:hover { border-color: var(--accent); }

/* Water */
.water { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: var(--space-3); }
.water__amt { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.water__bar { height: 10px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.water__bar span { display: block; height: 100%; background: #6b8fa3; border-radius: var(--r-full); transition: width 400ms ease; }
.water__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.water__btns > .btn { flex: 1; }
.water__custom { display: inline-flex; align-items: center; gap: var(--space-2); flex: 1 0 auto; }
.water-custom {
  width: 5.5ch; padding: 0.4rem 0.5rem; font-size: var(--fs-small); text-align: center; color: var(--text);
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.water-custom::-webkit-outer-spin-button, .water-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.water-custom:focus { outline: none; border-style: solid; border-color: var(--accent); }
.water-custom::placeholder { color: var(--text-faint); }

.nut-targets { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); }
.nut-targets .dash-actions { grid-column: 1 / -1; }

/* Food picker */
.picker-head--titled { align-items: center; justify-content: space-between; }
.picker-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.picker-searchbar { padding: var(--space-3); border-bottom: 1px solid var(--border); }
.picker-searchbar .input { width: 100%; }
.food-results {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.food-grouplabel {
  padding: var(--space-2) var(--space-2) 2px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.food-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.55rem 0.7rem;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.food-opt:hover { background: var(--surface-2); }
.food-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.food-opt__name { font-size: var(--fs-small); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.food-opt__sub { font-size: 0.72rem; color: var(--text-faint); }
.food-opt__tag { flex: none; font-size: 0.66rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.food-opt--quick { color: var(--accent); }
.food-opt--quick .food-opt__name { color: var(--accent); }
.food-opt--ai .food-opt__name { color: var(--accent); }
.food-opt__tag--ai {
  color: var(--accent);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
}

.food-detail { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.detail-back { align-self: flex-start; font-size: var(--fs-small); color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; }
.detail-back:hover { color: var(--text); }
.detail-food { font-weight: 600; color: var(--text); }
.detail-qty { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.detail-qty .field-label-sm { flex-direction: column; align-items: stretch; gap: 4px; flex: 1; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-3); }
.detail-grid .field-label-sm { flex-direction: column; align-items: stretch; gap: 4px; }
.detail-preview {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.detail-cal { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.detail-note {
  font-size: var(--fs-small);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
}
.fallback-notice__body { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: var(--space-3); flex-wrap: wrap; }
.detail-recovery { display: flex; flex-direction: column; gap: var(--space-2); }
.detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.detail-loading p { margin: 0; }

@media (max-width: 600px) {
  .nut-meals,
  .nut-targets { grid-template-columns: 1fr; }
  .nut-targets .dash-actions { grid-column: auto; }
}

/* ============================================================================
   INSTRUMENT HUD SKIN
   ----------------------------------------------------------------------------
   SpotterAI's identity is the deterministic audit — so the interface dresses
   like the instrument it is: blueprint dot-grid + film grain atmosphere, mono
   readout labels, bracket-cornered panels, segmented meters, a scanning audit
   card, and a radar bloom in the hero. Same iris palette. Additive layer only:
   these rules override earlier ones purely by cascade order.
   ============================================================================ */

:root {
  --hud-tick: color-mix(in srgb, var(--accent) 52%, transparent);
  --hud-tick-soft: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* --- 1. Atmosphere: ruled measure grid ------------------------------------
   Light register: a faint ruled grid in ink, the way graph paper and record
   forms are ruled. Replaces the dark build's dot-grid-over-violet-blooms.
   No film grain — grain on paper reads as dirt, not texture. */
body::before {
  background-image:
    linear-gradient(to right, rgba(20, 26, 23, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 26, 23, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- 2. Mono HUD readouts -------------------------------------------------- */
.eyebrow,
.plan__eyebrow,
.today-card__eyebrow,
.fw-eyebrow,
.workout-grouplabel,
.food-grouplabel,
.account-h,
.week-strip__label,
.split-legend,
.audit-card__live {
  font-family: var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Slashed zeros on every big instrument numeral. */
.audit-card__score,
.split-score__n,
.today-stat__v,
.summary-stat__v,
.fw-stat__v,
.session-timer,
.rest-timer__time {
  font-feature-settings: "zero" 1;
}

/* --- 3. Instrument panels: focus-bracket corners --------------------------- */
.audit-card,
.split-hero,
.fw-card,
.day-card,
.today-card--workout {
  position: relative;
}
.audit-card::after,
.split-hero::after,
.fw-card::after,
.day-card::after,
.today-card--workout::after {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background:
    linear-gradient(var(--hud-tick), var(--hud-tick)) left 0 top 0 / 15px 2px,
    linear-gradient(var(--hud-tick), var(--hud-tick)) left 0 top 0 / 2px 15px,
    linear-gradient(var(--hud-tick), var(--hud-tick)) right 0 top 0 / 15px 2px,
    linear-gradient(var(--hud-tick), var(--hud-tick)) right 0 top 0 / 2px 15px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) left 0 bottom 0 / 15px 2px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) left 0 bottom 0 / 2px 15px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) right 0 bottom 0 / 15px 2px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) right 0 bottom 0 / 2px 15px;
  background-repeat: no-repeat;
}

/* --- 4/5. Ambient loops removed in the light register ----------------------
   The dark build ran two always-on decorative loops: a violet scan sweep
   across the audit card and a 26s conic radar bloom behind the hero. Both are
   decoration, not state, and on paper they read as a printing defect. Removed
   rather than recolored. `anim-gate.js` still stamps .is-offstage; the rule
   below stays so the pulse it targets keeps pausing off-screen.
   Motion that survives: state transitions only (150-250ms). */
.audit-card {
  overflow: hidden;
}
.hero.is-offstage .audit-card__pulse {
  animation-play-state: paused;
}

.hero {
  position: relative;
  overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }
.hero__title { letter-spacing: -0.04em; }

/* --- 6. Segmented instrument meters ---------------------------------------- */
.macro-bar span,
.water__bar span,
.vbar__fill,
.bal__l,
.bal__r,
.rest-timer__fill {
  /* Ticks cut out of the filled bar, so they read on accent and status fills. */
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    rgba(255, 255, 255, 0.62) 6px 8px
  );
}

/* --- 7. Primary buttons ----------------------------------------------------
   The hover sheen sweep is gone: a specular glint is a dark-UI device, and on
   a white button field it just flashes. Hover is carried by the color step. */

/* --- 8. Details: selection matches the instrument --------------------------- */
::selection { background: var(--accent); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .audit-card__pulse { animation: none !important; }
}

/* --- 9. Display titles: solid ink, tight tracking --------------------------- */
.hero__title,
.section-title--lg {
  letter-spacing: -0.04em;
  color: var(--text);
  text-wrap: balance;
}

/* --- 10. Data tables read like instrument readouts -------------------------- */
.ex-table thead th {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}
.ex-table .num,
.food-row__kcal,
.meal__kcal {
  font-family: var(--font-mono);
  font-feature-settings: "zero" 1;
}

/* ============================================================================
   FORMAT OVERHAUL — new shell, headers, and Today command center
   ============================================================================ */

/* --- F1. Desktop shell: slim icon rail instead of a wide sidebar ----------- */
@media (min-width: 961px) {
  .app-shell { grid-template-columns: 96px minmax(0, 1fr); }
  .sidebar { padding: var(--space-5) var(--space-2); align-items: center; }
  .sidebar__brand { justify-content: center; padding: 0; }
  .sidebar__brand .wordmark__text { display: none; }
  .sidebar__brand .wordmark__glyph { width: 40px; height: 40px; }
  .sidebar__nav { width: 100%; align-items: stretch; }
  .sidebar__nav .nav-link {
    flex-direction: column;
    gap: 5px;
    padding: 0.62rem 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    align-items: center;
  }
  .sidebar__nav .nav-link__icon { width: 20px; height: 20px; }
  .sidebar__nav .nav-link.is-active::before { display: none; }
  .sidebar__nav .nav-link.is-active {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-ring);
  }
  .sidebar__foot { flex-direction: column; gap: var(--space-3); align-items: center; }
  .sidebar__foot .profile-btn { flex: none; padding: 3px; gap: 0; }
  .sidebar__foot .profile-btn__name,
  .sidebar__foot .profile-btn__chev { display: none; }
  .sidebar__foot .profile-btn__avatar { width: 34px; height: 34px; }
  /* Content breathes wider now that the rail is slim. */
  .container { max-width: 1240px; }
}

/* --- F2. Terminal page headers: huge title, tick ruler, ghost index -------- */
.section-head {
  position: relative;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}
/* tick ruler under every page header */
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background:
    linear-gradient(var(--border), var(--border)) 0 100% / 100% 1px,
    repeating-linear-gradient(90deg, var(--hud-tick-soft) 0 1px, transparent 1px 28px) 0 100% / 100% 8px;
  background-repeat: no-repeat;
  pointer-events: none;
}
.section-head > * { position: relative; z-index: 1; }
/* App-page titles: product-scale, not marketing-hero. Keeps the terminal-header
   character with presence, but lets the tools lead (esp. on mobile, where the
   old 2.5rem floor pushed content below the fold). The PLAN landing keeps its
   full display scale via .hero__title. */
.section-title--lg { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.1; }

/* --- F3. Today command center ---------------------------------------------- */
.cmd {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-6);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  background:
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.cmd::after { /* focus brackets, matching the instrument panels */
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background:
    linear-gradient(var(--hud-tick), var(--hud-tick)) left 0 top 0 / 15px 2px,
    linear-gradient(var(--hud-tick), var(--hud-tick)) left 0 top 0 / 2px 15px,
    linear-gradient(var(--hud-tick), var(--hud-tick)) right 0 top 0 / 15px 2px,
    linear-gradient(var(--hud-tick), var(--hud-tick)) right 0 top 0 / 2px 15px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) left 0 bottom 0 / 15px 2px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) left 0 bottom 0 / 2px 15px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) right 0 bottom 0 / 15px 2px,
    linear-gradient(var(--hud-tick-soft), var(--hud-tick-soft)) right 0 bottom 0 / 2px 15px;
  background-repeat: no-repeat;
}
.cmd__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.cmd__title {
  margin-top: var(--space-2);
  /* Sora carries the display voice — and 800 is actually loaded for it;
     without this the browser fake-bolds Inter 700. */
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--text);
  text-wrap: balance;
}
.cmd__warmup { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }
.cmd__warmup strong { color: var(--text); }
.cmd__note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-faint); }
.cmd__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.cmd__start { padding: 0.85rem 2.2rem; font-size: 1rem; }
.cmd__manifest { min-width: 0; align-self: center; }
.cmd__manifest-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.cmd__list { list-style: none; padding: 0; margin: 0; counter-reset: cmdex; }
.cmd-ex {
  counter-increment: cmdex;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
}
.cmd-ex:last-child { border-bottom: none; }
.cmd-ex::before {
  content: counter(cmdex, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--accent) 65%, var(--text-faint));
}
.cmd-ex__name { flex: 1; min-width: 0; color: var(--text); }
.cmd-ex__rx { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.cmd-ex__rx em { font-style: normal; color: var(--text-faint); }
.today-telemetry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
@media (max-width: 900px) {
  .cmd { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5); }
  .cmd__title { font-size: clamp(2.2rem, 9vw, 3rem); }
  .today-telemetry { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   Touch ergonomics — coarse pointers get 44px-class targets; fine pointers
   (mouse/trackpad) keep the denser desktop sizing.
---------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .btn--sm { min-height: 44px; }
  .btn-link,
  .btn-link-danger { min-height: 44px; display: inline-flex; align-items: center; }
  .input { min-height: 44px; }
  .chip span { padding: 0.7rem 1.05rem; }
  .quicklog__mic { width: 44px; min-height: 44px; }
  .session-unit__opt { padding: 0.55rem 0.85rem; }
  .rest-preset { padding: 0.55rem 0.8rem; }
  .rest-custom { padding: 0.55rem 0.35rem; }
  .more-sheet__link { min-height: 44px; }

  /* Dense table controls keep their visual size so the set table still fits
     at 320px; the tap zone is extended instead, sized so neighbouring zones
     don't overlap each other. */
  .set-done,
  .set-del,
  .ex-act { position: relative; }
  .set-done::after,
  .set-del::after { content: ""; position: absolute; inset: -7px -2px; }
  .ex-act::after { content: ""; position: absolute; inset: -3px -1px; }
}

/* ============================================================================
   D. TYPE & SURFACE PASS
   ----------------------------------------------------------------------------
   Fourth layer (see the CONTENTS block at the top of this file). Fixes the
   three things that made the light build still read as machine-generated:

     1. A blueprint grid behind every page. Technical-looking texture that
        serves no task. Removed; the page is paper now.
     2. A geometric display sans at a fluid clamp up to 4.9rem with -0.04em
        tracking. That combination is the generated-hero signature. Replaced
        with a warm humanist serif on a fixed, smaller scale, paired against
        Inter on a real contrast axis (serif vs sans) instead of two sans faces.
     3. Tracked uppercase micro-labels on ~66 rules. Caps-plus-tracking is
        scaffolding when it labels an ordinary field. It survives only where a
        short caps token is a genuine convention: severity and status pills.

   Additive layer: these rules override earlier ones purely by cascade order.
   ============================================================================ */

/* --- 1. Surface: no grid ---------------------------------------------------- */
body::before {
  background-image: none;
}

/* --- 2. Type: humanist serif display on a fixed scale ----------------------- */
:root {
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  /* Fixed scale, ratio ~1.4 at the top and ~1.2 through the middle. The hero
     keeps a narrow clamp purely so long words can't overflow at 320px; the
     ceiling is well under the shouting range the old 4.9rem sat in. */
  --fs-display: clamp(2.15rem, 4.6vw, 3.2rem);
  --fs-h1: 2.15rem;
  --fs-h2: 1.55rem;
}

h1, h2, h3, h4, h5,
.hero__title,
.section-title--lg,
.cmd__title {
  /* A serif needs air where the geometric sans needed none: near-zero tracking
     and a looser leading, or the ascenders and descenders collide. */
  letter-spacing: -0.008em;
  line-height: 1.18;
  font-weight: 700;
}
.hero__title,
.cmd__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.12;
}
.sidebar__brand,
.wordmark {
  letter-spacing: -0.005em;
}

/* --- 3. Field labels: sentence case, body font ------------------------------
   The label families below all did the same job — naming a field inside a card
   — in tracked caps. They read as ordinary labels now. */
.audit__eyebrow,
.audit__score-label,
.flag__row-label,
.trust__row dt,
.trust__block h5,
.bench__item dt,
.badplan__label,
.onb-flabel,
.lib-card__diff,
.lib-h5,
.summary-k,
.pain-label,
.fw-eyebrow,
.fw-k,
.week-strip__label,
.today-card__eyebrow,
.scenario__k,
.rule-card__k,
.nut-wontdo__col h5,
.workout-grouplabel,
.food-grouplabel,
.account-h,
.split-legend,
.plan__eyebrow,
.eyebrow {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 0.8rem;
  font-weight: 600;
}
/* Data readouts keep the mono voice — numerals, versions, durations, scores.
   That is the part of the instrument language that was always earned. */
.audit-card__score,
.split-score__n,
.today-stat__v,
.summary-stat__v,
.fw-stat__v,
.session-timer,
.rest-timer__time,
.bench__item dd {
  font-family: var(--font-mono);
}

/* --- 4. Caps survive only as status tokens --------------------------------- */
.flag__sev,
.trust__conf,
.bench__status,
.badplan__tag,
.sflag__tier,
.wcard__badge,
.lib-badge,
.today-badge,
.summary-prs__badge,
.audit-card__live {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}

/* --- 5. Navigation labels: sentence case ------------------------------------
   The desktop rail rendered its tabs as tracked mono caps (TODAY / PLAN /
   SPLIT LAB). Same scaffolding as the field labels above, and the most visible
   instance of it, since the rail is on every screen. The bench chip is a
   descriptor, not a status, so it de-caps too; PASSING stays a status pill. */
@media (min-width: 961px) {
  .sidebar__nav .nav-link {
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.005em;
    text-transform: none;
    font-weight: 500;
  }
}
@media (max-width: 960px) {
  .sidebar__nav .nav-link,
  .sidebar__nav button.nav-link--more {
    font-family: var(--font-body);
    letter-spacing: 0.005em;
    text-transform: none;
  }
}
.bench__tag {
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 0.72rem;
}

/* --- 6. Complete de-caps sweep ----------------------------------------------
   Section 3 enumerated the label classes by hand and missed a third of them
   (form check, adapt cards, chat guard, library, nutrition). This is the full
   set, extracted mechanically: every selector in layers A-C that set
   `text-transform: uppercase`, minus the ten status tokens listed in section 4,
   which keep their caps because a short state word is genuinely easier to scan
   that way. Kept: severity pills, trust confidence, PASSING, tier badges. */.account-h,
.adapt-card__eyebrow,
.adapt-changes__badge,
.adapt-changes__label,
.audit__eyebrow,
.audit__score-label,
.badplan__label,
.bench__item dt,
.bench__tag,
.cam-overlay__reps-label,
.chat-guard__head,
.check__badge,
.cmd__eyebrow,
.cmd__manifest-label,
.dash-subchart__label,
.day-card__day,
.eval-case__sub,
.eval-case__type,
.eval-check__badge,
.ex-table thead th,
.eyebrow,
.flag__row-label,
.food-edit__grid label,
.food-grouplabel,
.food-opt__tag,
.form-angle,
.form-report__heading,
.form-side__heading,
.fw-eyebrow,
.fw-k,
.lib-card__diff,
.lib-h5,
.nut-wontdo__col h5,
.onb-flabel,
.pain-label,
.plan-note h5,
.plan__eyebrow,
.plan__facts dt,
.rank-badge__level,
.repair__col-label,
.repair__eyebrow,
.repair__k,
.rest-timer__label,
.rule-card__k,
.scenario__k,
.score-card__eyebrow,
.set-table th,
.sidebar__nav .nav-link,
.split-legend,
.stat-tile__label,
.summary-k,
.today-card__eyebrow,
.trust__block h5,
.trust__row dt,
.week-strip__label,
.workout-grouplabel {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.005em;
}