/* ============================================================
   TRAINING APP : STYLE.CSS
   Dark athletic aesthetic: obsidian bg, ember accent,
   poster display, tabular numerics.
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700;800&family=Bebas+Neue&family=JetBrains+Mono:wght@500;700&display=swap');

/* ── DESIGN TOKENS ── */
:root,
[data-theme='light'] {
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Impact', sans-serif;
  --font-poster:  'Bebas Neue', 'Barlow Condensed', 'Impact', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-xs:      clamp(0.72rem, 0.68rem + 0.20vw, 0.82rem);
  --text-sm:      clamp(0.86rem, 0.80rem + 0.30vw, 0.98rem);
  --text-base:    clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem);
  --text-lg:      clamp(1.18rem, 1.04rem + 0.70vw, 1.50rem);
  --text-xl:      clamp(1.50rem, 1.22rem + 1.25vw, 2.20rem);
  --text-2xl:     clamp(2.00rem, 1.30rem + 2.40vw, 3.40rem);
  --text-3xl:     clamp(2.75rem, 1.60rem + 4.00vw, 5.00rem);
  --text-display: clamp(3.50rem, 2.00rem + 6.00vw, 7.50rem);
  --text-hero:    clamp(4.00rem, 2.30rem + 8.00vw, 10.0rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Horizontal padding of .container / .container--wide. Full-bleed children
     (negative margin-inline + matching padding-inline, e.g.
     .catalog-filter-sticky) MUST bleed by this var, never a hardcoded space
     token: the value drops to --space-4 below 640px, and a hardcoded
     --space-6 bleed overflows the viewport by 8px per side there. */
  --container-pad: var(--space-6);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --ease-micro:    cubic-bezier(0.2, 0, 0.1, 1);
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-macro:    cubic-bezier(0.65, 0, 0.05, 1);
  --transition-interactive: 180ms var(--ease-standard);

  /* LIGHT PALETTE: warm paper with ember accent */
  --bg-base:       #FAF9F6;
  --bg-elevated:   #FFFFFF;
  --bg-raised:     #FFFFFF;
  --bg-sunken:     #EFEDE7;
  --border-soft:   #E4E1D9;
  --border-hard:   #C8C4B8;
  --surface-dynamic: #E8E4D9;

  --ink-primary:   #1A1917;
  --ink-secondary: #5A564D;
  --ink-muted:     #6F6A5F;
  --ink-inverse:   #FAF9F6;

  --accent:        #B94100;
  --accent-hot:    #A93A00;
  --accent-deep:   #672100;
  --ink-on-accent: #FFFFFF;
  --accent-wash:   #FFE4CF;
  --accent-glow:   rgba(217, 78, 0, 0.28);
  --glow-ember:    0 0 24px var(--accent-glow);

  --signal-ok:         #286F2B;
  --signal-ok-hover:   #1F5C2A;
  --signal-ok-wash:    #D3E9D5;
  --signal-alert:      #B83A1A;
  --signal-alert-wash: #F9DCD2;
  --signal-info:       #1E5AA8;
  --signal-info-wash:  #D3E0F3;

  /* Secondary & section accents */
  --accent-secondary:      #2563EB;
  --accent-secondary-wash: #DBEAFE;
  --accent-flex:           #0F766E;
  --accent-flex-wash:      #CCFBF1;
  --accent-flex-glow:      rgba(15, 118, 110, 0.28);
  --accent-core:           #7C3AED;
  --accent-core-wash:      #EDE4FF;
  --accent-stabilizer:     #27689F;
  --ink-on-stabilizer:     #FFFFFF;

  --heat-0-fill:    #F3F1EB;
  --heat-1-fill:    #C1D8C2;
  --heat-2-fill:    #83B685;
  --heat-3-fill:    #4B914F;
  --heat-outline:   #918C80;

  /* Day-type dots: harmonized ember family */
  --dot-push:     #D94E00;
  --dot-pull:     #B86B00;
  --dot-upper:    #9A5A1C;
  --dot-lower:    #5C7A2E;
  --dot-fullbody: #8A4A6A;
  --dot-hiit:     #C42E2E;
  --dot-rest:     #8C8678;

  /* Back-compat: old --color-* names point at new tokens so every existing selector still resolves */
  --color-bg:                 var(--bg-base);
  --color-surface:            var(--bg-elevated);
  --color-surface-1:          var(--bg-elevated);
  --color-surface-2:          var(--bg-raised);
  --color-surface-offset:     var(--bg-sunken);
  --color-surface-dynamic:    var(--surface-dynamic);
  --color-divider:            var(--border-soft);
  --color-border:             var(--border-hard);
  --color-text:               var(--ink-primary);
  --color-text-muted:         var(--ink-secondary);
  --color-text-faint:         var(--ink-muted);
  --color-text-inverse:       var(--ink-inverse);
  --color-primary:            var(--accent);
  --color-primary-hover:      var(--accent-hot);
  --color-primary-active:     var(--accent-deep);
  --color-primary-highlight:  var(--accent-wash);
  --color-gold:               var(--accent);
  --color-success:            var(--signal-ok);
  --color-success-hover:      var(--signal-ok-hover);
  --color-success-highlight:  var(--signal-ok-wash);
  --color-error:              var(--signal-alert);
  --color-error-highlight:    var(--signal-alert-wash);
  --color-info:               var(--signal-info);
  --color-info-highlight:     var(--signal-info-wash);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  --content-default: 1100px;
  --content-wide: 1400px;

  /* Subtle grain: inline SVG turbulence, ~400 bytes, no network cost */
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

[data-theme='dark'] {
  --bg-base:       #0B0B0C;
  --bg-elevated:   #141416;
  --bg-raised:     #1C1C20;
  --bg-sunken:     #0A0907;
  --border-soft:   #26262B;
  --border-hard:   #3A3A42;
  --surface-dynamic: #2A2A2F;

  --ink-primary:   #F5F4F1;
  --ink-secondary: #9A9A9F;
  --ink-muted:     #85817A;
  --ink-inverse:   #1A1917;

  --accent:        #FF6B1A;
  --accent-hot:    #FF8A3D;
  --accent-deep:   #B8430A;
  --ink-on-accent: #0B0B0C;
  --accent-wash:   #2A1405;
  --accent-glow:   rgba(255, 107, 26, 0.40);
  --glow-ember:    0 0 24px var(--accent-glow);

  --signal-ok:         #5EE0A2;
  --signal-ok-hover:   #3EC187;
  --signal-ok-wash:    #0F2412;
  --signal-alert:      #FF4D6D;
  --signal-alert-wash: #2E0F08;
  --signal-info:       #7FB3FF;
  --signal-info-wash:  #0A1C30;

  --accent-secondary:      #60A5FA;
  --accent-secondary-wash: #1E3A5F;
  --accent-flex:           #2DD4BF;
  --accent-flex-wash:      #0F2928;
  --accent-flex-glow:      rgba(45, 212, 191, 0.35);
  --accent-core:           #A78BFA;
  --accent-core-wash:      #1E1633;
  --accent-stabilizer:     #6FA8DC;
  --ink-on-stabilizer:     #0E1730;

  --heat-0-fill:    #1C1C20;
  --heat-1-fill:    #23483A;
  --heat-2-fill:    #2E7053;
  --heat-3-fill:    #419A70;
  --heat-outline:   #62626D;

  --dot-push:     #FF6B1A;
  --dot-pull:     #E08A2A;
  --dot-upper:    #C49050;
  --dot-lower:    #8CC04A;
  --dot-fullbody: #CC7AA8;
  --dot-hiit:     #FF4A3A;
  --dot-rest:     #6A6458;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-base:       #0B0B0C;
    --bg-elevated:   #141416;
    --bg-raised:     #1C1C20;
    --bg-sunken:     #0A0907;
    --border-soft:   #26262B;
    --border-hard:   #3A3A42;
    --surface-dynamic: #2A2A2F;

    --ink-primary:   #F5F4F1;
    --ink-secondary: #9A9A9F;
    --ink-muted:     #85817A;
    --ink-inverse:   #1A1917;

    --accent:        #FF6B1A;
    --accent-hot:    #FF8A3D;
    --accent-deep:   #B8430A;
    --ink-on-accent: #0B0B0C;
    --accent-wash:   #2A1405;
    --accent-glow:   rgba(255, 107, 26, 0.40);
    --glow-ember:    0 0 24px var(--accent-glow);

    --signal-ok:         #5EE0A2;
    --signal-ok-hover:   #3EC187;
    --signal-ok-wash:    #0F2412;
    --signal-alert:      #FF4D6D;
    --signal-alert-wash: #2E0F08;
    --signal-info:       #7FB3FF;
    --signal-info-wash:  #0A1C30;

    --accent-secondary:      #60A5FA;
    --accent-secondary-wash: #1E3A5F;
    --accent-flex:           #2DD4BF;
    --accent-flex-wash:      #0F2928;
    --accent-flex-glow:      rgba(45, 212, 191, 0.35);
    --accent-core:           #A78BFA;
    --accent-core-wash:      #1E1633;
    --accent-stabilizer:     #6FA8DC;
    --ink-on-stabilizer:     #0E1730;

    --heat-0-fill:    #1C1C20;
    --heat-1-fill:    #23483A;
    --heat-2-fill:    #2E7053;
    --heat-3-fill:    #419A70;
    --heat-outline:   #62626D;

    --dot-push:     #FF6B1A;
    --dot-pull:     #E08A2A;
    --dot-upper:    #C49050;
    --dot-lower:    #8CC04A;
    --dot-fullbody: #CC7AA8;
    --dot-hiit:     #FF4A3A;
    --dot-rest:     #6A6458;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
  }
}

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}
img, video, canvas { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }

/* ============================================================
   AUTH GATE, full-screen overlay shown until the user signs in.
   Hidden via [hidden] attribute on the root once auth resolves.
============================================================ */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: radial-gradient(
    circle at top,
    color-mix(in srgb, var(--accent-wash) 58%, var(--bg-base)),
    var(--bg-base) 68%
  );
  backdrop-filter: blur(4px);
}
/* HTML [hidden] default has lowest specificity; override explicitly so class-level display:flex doesn't win. */
.auth-gate[hidden] { display: none; }
.auth-gate__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: var(--space-8);
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-hard));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.auth-gate__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-muted, #7a7a8a);
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.auth-gate__close:hover {
  background: var(--bg-sunken);
  color: var(--color-text);
}
.auth-gate__logo {
  color: var(--accent);
  margin: 0 auto var(--space-4);
  display: flex;
  justify-content: center;
}
.auth-gate__title {
  font-family: var(--font-display, inherit);
  font-size: 1.75rem;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.02em;
  color: var(--ink-primary);
}
.auth-gate__subtitle {
  color: var(--color-text-muted, #b0b0c0);
  margin: 0 0 var(--space-6);
  font-size: 0.95rem;
}
.auth-gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.auth-gate__label {
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #b0b0c0);
}
.auth-gate__input {
  padding: 0.75rem 1rem;
  background: var(--bg-sunken);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-gate__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.auth-gate__submit {
  margin-top: var(--space-2);
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  color: var(--ink-on-accent);
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-md);
  border: none;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.auth-gate__submit:hover:not(:disabled) { filter: brightness(1.08); }
.auth-gate__submit:active:not(:disabled) { transform: translateY(1px); }
.auth-gate__submit:disabled { opacity: 0.55; cursor: progress; }
.auth-gate__altlink {
  display: block;
  margin: var(--space-2) auto var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted, #b0b0c0);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: none;
  transition: color 0.15s ease;
}
.auth-gate__altlink:hover { color: var(--accent); }
.auth-gate__status {
  min-height: 1.5em;
  font-size: 0.92rem;
  margin-bottom: var(--space-3);
}
.auth-gate__status.is-ok   { color: var(--signal-ok); }
.auth-gate__status.is-err  { color: var(--signal-alert); }
.auth-gate__footnote {
  color: var(--color-text-muted, #7a7a8a);
  font-size: 0.78rem;
  margin: 0;
}
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; }
p, li { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  /* Kill movement (transform/translate/scale) but preserve color/glow
     animations: those are character, not motion-sickness triggers. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Re-enable color/glow only animations (declared in the chrome polish appendix) */
  .programs-hero { animation: glow-breathe 8s ease-in-out infinite !important; }
  .day-card.is-today::after { animation: ember-pulse 2.4s ease-in-out infinite !important; }
  /* But disable any translate/scale on hover */
  .ex-card:hover, .day-card:hover, .btn-primary:hover, .btn-ghost:hover, .btn-icon:hover {
    transform: none !important;
  }
}

/* ============================================================
   TIMER WORKSPACE
   Four setup modes share the existing persistent runner and dock.
   ============================================================ */

.timer-workspace {
  padding-top: clamp(22px, 3vw, 42px);
  padding-bottom: clamp(70px, 8vw, 120px);
}

.timer-workspace [hidden],
.session-timer-setup [hidden] {
  display: none !important;
}

.timer-workspace-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--border-soft);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34%),
    linear-gradient(145deg, var(--color-surface-1), var(--color-surface-2));
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.timer-workspace-eyebrow,
.timer-panel-heading > div > span,
.timer-preset-copy > span {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.timer-workspace-hero h1 {
  margin: 0;
  color: var(--ink-primary);
  font-size: clamp(42px, 7vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.timer-workspace-hero p {
  max-width: 650px;
  margin: 16px 0 0;
  color: var(--ink-muted);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.65;
}

.timer-workspace-live {
  display: grid;
  min-width: 190px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 9%, var(--color-surface-1));
  color: var(--ink-primary);
  text-align: left;
  cursor: pointer;
}

.timer-workspace-live span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timer-workspace-live strong { margin-top: 5px; font-size: 16px; }
.timer-workspace-live small { margin-top: 2px; font-family: var(--font-mono); font-size: 28px; }

.timer-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.timer-mode-tabs > button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--color-surface-1);
  color: var(--ink-muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.timer-mode-tabs > button[aria-selected='true'] {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface-1));
  color: var(--ink-primary);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.timer-mode-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--accent);
  font-size: 20px;
}

.timer-mode-tabs > button > span:last-child { display: grid; min-width: 0; gap: 3px; }
.timer-mode-tabs strong { color: currentColor; font-size: 14px; }
.timer-mode-tabs small { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.timer-preset-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface-1) 88%, transparent);
}

.timer-preset-copy { flex: 0 0 auto; }
.timer-preset-copy > span { margin-bottom: 3px; font-size: 9px; }
.timer-preset-copy strong { color: var(--ink-primary); font-size: 13px; }

.timer-preset-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) minmax(170px, 0.9fr) auto;
  align-items: end;
  gap: 8px;
  width: min(760px, 100%);
}

.timer-preset-name input,
.timer-inline-control select,
.timer-block-card input,
.timer-block-card select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  /* iOS Safari and WKWebView zoom focused controls below 16px. Keep Timer
     form controls at the platform-safe floor without disabling page zoom. */
  font-size: 16px;
  outline: none;
}

.timer-preset-name input:focus,
.timer-inline-control select:focus,
.timer-block-card input:focus,
.timer-block-card select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.timer-secondary-button,
.timer-icon-button,
.timer-text-button {
  min-height: 44px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.timer-secondary-button { padding: 0 16px; }
.timer-secondary-button.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--color-surface-2)); color: var(--accent); }
.timer-icon-button { width: 44px; padding: 0; font-size: 22px; }
.timer-icon-button:disabled { opacity: 0.4; cursor: not-allowed; }
.timer-text-button { border-color: transparent; background: transparent; color: var(--accent); padding: 0 14px; }

.timer-mode-panels { margin-top: 18px; }

.timer-mode-panel {
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--border-soft);
  border-radius: 26px;
  background: var(--color-surface-1);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
}

.timer-panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}

.timer-panel-heading h2 { margin: 0; color: var(--ink-primary); font-size: clamp(25px, 3vw, 36px); letter-spacing: -0.035em; }
.timer-panel-heading > p,
.timer-panel-heading > div > p { max-width: 530px; margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.timer-panel-heading > div > p { margin-top: 8px; }
.timer-panel-heading--action { align-items: center; }

.timer-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.timer-config-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--color-surface-2);
}

.timer-config-card--primary { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--color-surface-2)), var(--color-surface-2)); }

.timer-config-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.timer-config-card-heading > span {
  display: grid;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.timer-config-card-heading > div { display: grid; gap: 2px; }
.timer-config-card-heading strong { color: var(--ink-primary); font-size: 14px; }
.timer-config-card-heading small { color: var(--ink-muted); font-size: 10px; }

.timer-quick-durations {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 14px;
}

.timer-quick-durations button,
.timer-segmented button {
  min-height: 40px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface-1);
  color: var(--ink-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.timer-quick-durations button[aria-pressed='true'],
.timer-segmented button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--color-surface-1));
  color: var(--accent);
}

.timer-duration-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.timer-number-field { display: grid; min-width: 0; gap: 6px; }
.timer-number-field > label,
.timer-block-card label > span,
.timer-block-duration-field > span,
.timer-stop-time-field > label { color: var(--ink-muted); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.timer-duration-colon { padding-bottom: 13px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 20px; }
.timer-workspace .session-timer-stepper { width: 100%; }

.timer-segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.timer-segmented--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.timer-segmented--large button { min-height: 50px; font-size: 13px; }

.timer-limit-config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 74px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--color-surface-1);
}

.timer-limit-config > span:not(.session-timer-stepper) { display: grid; gap: 3px; }
.timer-limit-config strong { color: var(--ink-primary); font-size: 12px; }
.timer-limit-config small { color: var(--ink-muted); font-size: 10px; }
.timer-limit-config .session-timer-stepper { width: 116px; flex: 0 0 116px; }
.timer-limit-config--unlimited { justify-content: flex-start; }
.timer-infinity { color: var(--accent); font-family: var(--font-mono); font-size: 32px; }

.timer-stop-time {
  display: grid;
  width: min(310px, 100%);
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.timer-stop-time-field { display: grid; min-width: 0; gap: 5px; }
.timer-limit-config .timer-stop-time .session-timer-stepper { width: 100%; flex: 1 1 auto; }

.timer-config-card--options { display: flex; flex-direction: column; }
.timer-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
}

.timer-config-card-heading + .timer-option-row { border-top: 0; }
.timer-option-row > span,
.timer-option-row > label > span { display: grid; gap: 3px; }
.timer-option-row strong { color: var(--ink-primary); font-size: 12px; }
.timer-option-row small { color: var(--ink-muted); font-size: 10px; line-height: 1.35; }
.timer-inline-control { display: grid !important; grid-template-columns: minmax(100px, 1fr) auto; gap: 6px; }
.timer-inline-control select { min-height: 40px; }
.timer-inline-control button { min-height: 40px; padding: 0 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--color-surface-1); color: var(--ink-primary); font: inherit; font-size: 11px; font-weight: 760; cursor: pointer; }
.timer-option-row--toggle input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--accent); }

.timer-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  margin-top: 18px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-contrast, #111);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.timer-start-button:disabled { opacity: 0.45; cursor: not-allowed; }
.timer-mobile-start-anchor,
.timer-mobile-start-dock { display: none; }

.timer-timed-layout,
.timer-program-layout,
.timer-block-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 14px;
  margin-top: 18px;
}

.timer-big-message {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.timer-big-message > span { color: var(--accent); font-family: var(--font-mono); font-size: clamp(42px, 7vw, 76px); font-variant-numeric: tabular-nums; letter-spacing: -0.055em; }
.timer-big-message strong { color: var(--ink-primary); font-size: 15px; }
.timer-big-message small { color: var(--ink-muted); font-size: 11px; }
.timer-countdown-config { display: grid; min-height: 210px; align-content: center; }
.timer-duration-triple { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }

.timer-stopwatch-page-laps,
.session-timer-laps { display: grid; width: 100%; gap: 0; }
.timer-stopwatch-page-laps { max-width: 560px; max-height: 150px; overflow: auto; border-top: 1px solid var(--border-soft); }
.timer-lap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 40px; padding: 7px 2px; border-bottom: 1px solid var(--border-soft); }
.timer-lap-row > span { color: var(--ink-muted); font-size: 11px; font-weight: 760; }
.timer-lap-row > strong,
.timer-lap-row > small { color: var(--ink-primary); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.timer-lap-row > small { color: var(--ink-muted); }

.timer-multi-countdown-section { margin-top: 18px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--border-soft); border-radius: 20px; background: var(--color-surface-2); }
.timer-multi-countdown-section > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.timer-multi-countdown-section > header span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.timer-multi-countdown-section > header h3 { margin: 3px 0 0; color: var(--ink-primary); font-size: 20px; }
.timer-multi-countdown-section > header > strong { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 13%, var(--color-surface-1)); color: var(--accent); font-family: var(--font-mono); }
.timer-multi-countdown-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.timer-multi-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; gap: 14px; padding: 16px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--color-surface-1); }
.timer-multi-card__copy { display: grid; min-width: 0; gap: 3px; }
.timer-multi-card__copy > span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.timer-multi-card__copy > strong { overflow: hidden; color: var(--ink-primary); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.timer-multi-card__copy > small { color: var(--ink-primary); font-family: var(--font-mono); font-size: clamp(28px, 4vw, 42px); font-variant-numeric: tabular-nums; letter-spacing: -0.045em; }
.timer-multi-card__actions { display: grid; align-content: center; gap: 6px; }
.timer-multi-card__actions button { min-width: 76px; min-height: 38px; padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--color-surface-2); color: var(--ink-primary); font: inherit; font-size: 10px; font-weight: 760; cursor: pointer; }
.timer-multi-card__progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent) var(--multi-timer-remaining), var(--border-soft) 0); transition: background 180ms linear; }
.timer-multi-card.is-paused { opacity: 0.78; }
.timer-multi-card.is-complete { border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft)); }

.timer-block-list { display: grid; gap: 9px; margin-top: 18px; }

.timer-block-add {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
}

.timer-block-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--color-surface-2);
  isolation: isolate;
}

.timer-block-card:has(.timer-workspace-sound-picker [aria-expanded='true']) {
  z-index: 45;
  overflow: visible;
}

.timer-block-card:has(.timer-block-name input[aria-expanded='true']) {
  z-index: 45;
  overflow: visible;
}

.timer-block-card__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 76px minmax(140px, 0.7fr) minmax(370px, 1.65fr) minmax(150px, 0.75fr) 44px;
  align-items: end;
  gap: 10px;
  padding: 12px;
  background: var(--color-surface-2);
}

.timer-block-order { display: grid; grid-template-columns: 1fr 32px 32px; align-items: end; gap: 4px; }
.timer-block-order > span { grid-row: 1; grid-column: 1 / -1; color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 800; }
.timer-block-order button,
.timer-block-delete { min-width: 32px; min-height: 44px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--color-surface-1); color: var(--ink-muted); font-size: 16px; cursor: pointer; }
.timer-block-order button:disabled { opacity: 0.3; cursor: not-allowed; }
.timer-block-name,
.timer-block-sound { display: grid; gap: 5px; }
.timer-block-name { min-width: 0; }
.timer-block-name > label { display: flex; min-width: 0; align-items: center; }
.timer-block-name-index { display: none; }
.timer-block-name-combobox { position: relative; min-width: 0; }
.timer-block-name-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: max(100%, 270px);
  max-height: 286px;
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-hard);
  border-radius: 13px;
  background: var(--color-surface);
  box-shadow: 0 18px 42px rgb(0 0 0 / 34%);
}
.timer-block-name-menu[hidden] { display: none !important; }
.timer-block-name-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 4px;
}
.timer-block-name-option {
  display: grid;
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  align-content: center;
  gap: 2px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.timer-block-name-option > span { overflow: hidden; font-size: 13px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.timer-block-name-option > small { color: var(--ink-muted); font-size: 9px; font-weight: 720; letter-spacing: 0.05em; text-transform: uppercase; }
.timer-block-name-option.is-active,
.timer-block-name-option[aria-selected='true'] {
  background: color-mix(in srgb, var(--accent) 13%, var(--color-surface-2));
  color: var(--accent);
}
.timer-block-name-remove {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}
.timer-block-name-empty { margin: 0; padding: 12px 10px; color: var(--ink-muted); font-size: 11px; line-height: 1.4; }
.timer-block-duration { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 5px; }
.timer-block-duration-field { display: grid; min-width: 0; gap: 5px; }
.timer-block-duration > span { padding-bottom: 12px; color: var(--ink-muted); font-family: var(--font-mono); }
.timer-block-duration .timer-block-duration-stepper {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.timer-block-duration input { text-align: center; }
.timer-block-delete { width: 44px; color: var(--ink-muted); font-size: 22px; }
.timer-block-delete-action,
.timer-block-delete-handle { display: none; }

.timer-program-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 230px;
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
    var(--color-surface-2);
}

.timer-program-now { display: grid; align-content: center; gap: 8px; }
.timer-program-now > span,
.timer-program-rest > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.timer-program-now strong,
.timer-program-now button { max-width: 500px; color: var(--ink-primary); font-size: clamp(26px, 4vw, 45px); line-height: 1.05; letter-spacing: -0.04em; }
.timer-program-now button { width: fit-content; padding: 0 0 3px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: transparent; color: var(--ink-primary); font-family: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.timer-program-now button:hover,
.timer-program-now button:focus-visible { color: var(--accent); }
.timer-program-now small { color: var(--ink-muted); font-size: 13px; }
.timer-program-rest { display: grid; align-content: center; justify-items: end; gap: 6px; }
.timer-program-rest strong { color: var(--ink-primary); font-family: var(--font-mono); font-size: clamp(32px, 5vw, 52px); }
.timer-program-empty,
.timer-program-complete { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.timer-program-empty strong,
.timer-program-complete strong { color: var(--ink-primary); font-size: 20px; }
.timer-program-empty small,
.timer-program-complete small { max-width: 430px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.timer-program-complete > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; background: color-mix(in srgb, #42b978 18%, transparent); color: #42b978; font-size: 24px; }
.timer-program-behavior { display: flex; flex-direction: column; }
.timer-program-actions { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.timer-program-actions .timer-start-button { margin-top: 0; }

.session-timer-quick-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  margin: 14px 0 18px;
}

.session-timer-quick-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
}

.session-timer-quick-tabs button,
.session-timer-full-link {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}

.session-timer-quick-tabs button[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 14%, var(--color-surface-1));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 2px 8px rgb(0 0 0 / 14%);
}
.session-timer-full-link {
  min-width: 104px;
  padding: 0 14px;
  border: 1px solid var(--border-soft);
  background: var(--color-surface-2);
  color: var(--accent);
}
.session-timer-program-setup { display: grid; gap: 12px; }
.session-timer-program-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 130px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-soft)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2)); }
.session-timer-program-context .timer-program-now { gap: 5px; }
.session-timer-program-context .timer-program-now strong { font-size: 20px; }
.session-timer-program-context .timer-program-rest strong { font-size: 28px; }
.session-timer-program-auto { margin-top: 0; }
.session-timer-program-actions { display: grid; grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr); gap: 9px; }
.session-timer-program-actions .session-timer-test,
.session-timer-program-actions .session-timer-start { width: 100%; }
.session-timer-program-actions .is-active { border-color: var(--accent); color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .timer-block-name-option:hover { background: color-mix(in srgb, var(--accent) 9%, var(--color-surface-2)); }
  .timer-block-name-remove:hover { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }
  .timer-mode-tabs > button:hover,
  .timer-secondary-button:hover,
  .timer-icon-button:not(:disabled):hover,
  .timer-quick-durations button:hover,
  .timer-segmented button:hover,
  .timer-inline-control button:hover,
  .timer-block-order button:not(:disabled):hover,
  .timer-block-delete:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
    color: var(--accent);
  }

  .timer-mode-tabs > button:hover { transform: translateY(-1px); }
}

@media screen and (max-width: 980px) {
  .timer-mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timer-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timer-config-card--options { grid-column: 1 / -1; }
  .timer-block-card__content { grid-template-columns: 70px minmax(150px, 0.7fr) minmax(300px, 1.3fr) 44px; }
  .timer-block-sound { grid-column: 2 / 4; }
  .timer-block-delete { grid-column: 4; grid-row: 1; }
}

@media screen and (max-width: 720px) {
  .timer-workspace { padding-top: 14px; }
  .timer-workspace-hero { align-items: start; flex-direction: column; border-radius: 22px; }
  .timer-workspace-live { width: 100%; min-width: 0; grid-template-columns: 1fr auto; align-items: center; }
  .timer-workspace-live span { grid-column: 1; }
  .timer-workspace-live strong { grid-column: 1; }
  .timer-workspace-live small { grid-column: 2; grid-row: 1 / 3; }
  .timer-preset-bar { align-items: stretch; flex-direction: column; }
  .timer-preset-controls { grid-template-columns: minmax(0, 1fr); }
  .timer-config-grid,
  .timer-timed-layout,
  .timer-program-layout,
  .timer-block-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .timer-config-card--options { grid-column: auto; }
  .timer-panel-heading { align-items: start; flex-direction: column; gap: 10px; }
  .timer-panel-heading--action { flex-direction: row; align-items: center; }
  .timer-block-card__content { grid-template-columns: 62px minmax(0, 1fr) 44px; }
  .timer-block-order { grid-column: 1; grid-row: 1 / 3; align-self: stretch; }
  .timer-block-name { grid-column: 2; }
  .timer-block-delete { grid-column: 3; grid-row: 1; }
  .timer-block-duration { grid-column: 2; }
  .timer-block-sound { grid-column: 2 / 4; }
  .timer-program-context { min-height: 190px; }
}

@media screen and (max-width: 480px) {
  .timer-workspace-hero { padding: 22px 18px; }
  .timer-mode-tabs { gap: 7px; }
  .timer-mode-tabs > button { min-height: 68px; padding: 10px; gap: 9px; }
  .timer-mode-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
  .timer-mode-tabs small { display: none; }
  .timer-mode-panel { padding: 18px 14px; border-radius: 20px; }
  .timer-panel-heading--action { align-items: stretch; flex-direction: column; }
  .timer-quick-durations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timer-duration-pair { gap: 5px; }
  .timer-duration-colon { padding-bottom: 12px; }
  .timer-limit-config { align-items: stretch; flex-direction: column; }
  .timer-limit-config .session-timer-stepper { width: 100%; flex-basis: auto; }
  .timer-option-row { align-items: stretch; flex-direction: column; }
  .timer-option-row--toggle { align-items: center; flex-direction: row; }
  .timer-inline-control { width: 100%; }
  .timer-start-button { width: 100%; }
  .timer-block-card__content { grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 8px; }
  .timer-block-order { grid-template-columns: repeat(2, 1fr); }
  .timer-block-order > span { text-align: center; }
  .timer-block-duration { grid-column: 2 / 4; }
  .timer-block-sound { grid-column: 2 / 4; }
  .timer-program-context,
  .session-timer-program-context { grid-template-columns: minmax(0, 1fr); }
  .timer-program-rest,
  .session-timer-program-context .timer-program-rest { justify-items: start; }
  .timer-program-actions { align-items: stretch; flex-direction: column; }
  .timer-program-actions > * { width: 100%; }
  .session-timer-quick-nav { grid-template-columns: minmax(0, 1fr); }
  .session-timer-quick-tabs { width: 100%; }
  .session-timer-full-link { width: 100%; }
  .session-timer-program-actions { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 400px) {
  .timer-block-duration { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 5px; }
}

/* ── LAYOUT ── */
/* Dedicated Timer page, aligned with the focused Program session-timer sheet. */
.container--wide.timer-workspace {
  width: min(calc(100% - 24px), 900px);
  max-width: 900px;
  margin: clamp(16px, 3vw, 34px) auto clamp(72px, 8vw, 112px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-hard);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: 0 28px 90px rgb(0 0 0 / 24%);
}
body:has(#view-timer.active) .scroll-top { display: none; }

.timer-workspace-hero {
  align-items: center;
  padding: 20px 22px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.timer-workspace-eyebrow { margin-bottom: 3px; font-size: 10px; letter-spacing: 0.12em; }
.timer-workspace-hero h1 { font-size: 28px; line-height: 1.05; letter-spacing: -0.025em; }
.timer-workspace-hero p { max-width: 590px; margin-top: 8px; font-size: 13px; line-height: 1.5; }

.timer-workspace-live {
  min-width: 168px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--color-surface-2));
}
.timer-workspace-live strong { margin-top: 3px; font-size: 13px; }
.timer-workspace-live small { font-size: 22px; }

.timer-mode-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 16px 22px 0;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
}

.timer-mode-tabs > button {
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: center;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.timer-mode-tabs > button[aria-selected='true'] {
  border-color: transparent;
  background: var(--color-surface-1);
  color: var(--accent);
  box-shadow: 0 2px 8px rgb(0 0 0 / 14%);
}

.timer-mode-icon,
.timer-mode-tabs small { display: none; }
.timer-mode-tabs > button > span:last-child { display: block; }
.timer-mode-tabs strong { font-size: 12px; }

.timer-preset-bar {
  display: block;
  margin: 14px 22px 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface-2);
}

.timer-preset-summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
  list-style: none;
  cursor: pointer;
}
.timer-preset-summary::-webkit-details-marker { display: none; }
.timer-preset-summary-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 780;
}
.timer-preset-summary-action::after {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: '';
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}
.timer-preset-bar[open] .timer-preset-summary-action::after { transform: rotate(225deg) translate(-1px, -1px); }
.timer-preset-copy > span { margin-bottom: 2px; }
.timer-preset-copy strong { font-size: 12px; }
.timer-preset-controls { grid-template-columns: minmax(180px, 1.15fr) minmax(170px, 0.9fr) auto; }
.timer-preset-bar[open] .timer-preset-controls { margin-top: 10px; }

.timer-preset-name input,
.timer-inline-control select,
.timer-block-card input,
.timer-block-card select {
  border-color: var(--border-hard);
  border-radius: 10px;
  background-color: var(--color-surface);
}

.timer-inline-control select,
.timer-block-card select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.timer-secondary-button,
.timer-icon-button,
.timer-text-button { border-radius: 10px; }

.timer-mode-panels { margin-top: 0; }
.timer-mode-panel {
  padding: 20px 22px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.timer-panel-heading {
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 0;
  border-bottom: 0;
}
.timer-panel-heading--action { align-items: center; flex-direction: row; }
.timer-panel-heading h2 { font-size: 24px; letter-spacing: -0.025em; }
.timer-panel-heading > p,
.timer-panel-heading > div > p { max-width: 620px; font-size: 13px; line-height: 1.5; }
.timer-panel-heading > div > p { margin-top: 6px; }

.timer-config-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.timer-config-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.timer-config-card--primary { background: transparent; }
.timer-config-card-heading { margin-bottom: 10px; }
.timer-config-card-heading > span { display: none; }
.timer-config-card-heading strong { font-size: 13px; }
.timer-config-card-heading small { font-size: 11px; line-height: 1.35; }

.timer-quick-durations { gap: 6px; margin-bottom: 12px; }
.timer-quick-durations button {
  min-height: 44px;
  border-radius: 10px;
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: 12px;
}

.timer-segmented {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
}
.timer-segmented button {
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 12px;
}
.timer-segmented button[aria-pressed='true'] {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 16%, var(--color-surface));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

.timer-limit-config {
  min-height: 64px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface-2);
}
.timer-limit-config strong { font-size: 13px; }
.timer-limit-config small { font-size: 11px; line-height: 1.35; }
.timer-limit-config .session-timer-stepper { width: 146px; flex-basis: 146px; }

.timer-config-card--options { gap: 8px; }
.timer-option-row,
.timer-config-card-heading + .timer-option-row {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
}
.timer-option-row strong { font-size: 13px; }
.timer-option-row small { font-size: 11px; }
.timer-inline-control select,
.timer-inline-control button { min-height: 44px; border-radius: 10px; }

.timer-start-button {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border-radius: 11px;
  color: var(--ink-on-accent);
}

.timer-timed-layout,
.timer-program-layout,
.timer-block-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

.timer-big-message {
  min-height: 180px;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
}
.timer-countdown-config {
  min-height: 180px;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
}

.timer-block-card { border-radius: 12px; }
.timer-program-context {
  min-height: 150px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
}
.timer-program-now strong { font-size: clamp(22px, 4vw, 32px); }
.timer-program-rest strong { font-size: clamp(28px, 5vw, 40px); }

@media (hover: hover) and (pointer: fine) {
  .timer-mode-tabs > button:hover { transform: none; background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .timer-mode-tabs > button[aria-selected='true']:hover { background: var(--color-surface-1); }
}

@media screen and (max-width: 720px) {
  .container--wide.timer-workspace {
    width: min(calc(100% - 16px), 900px);
    margin-top: 8px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    border-radius: 22px;
  }
  .container--wide.timer-workspace.has-attached-mobile-start { padding-bottom: 0; }
  .timer-workspace-hero { align-items: flex-start; padding: 16px 18px 13px; border-radius: 0; }
  .timer-workspace-live { width: 100%; }
  .timer-mode-tabs { margin: 14px 18px 0; }
  .timer-preset-bar { margin: 12px 18px 0; }
  .timer-mode-panel { padding: 18px; }
  .timer-preset-controls { grid-template-columns: minmax(0, 1fr); }

  #view-timer .timer-mode-panel > .timer-start-button,
  #view-timer .timer-program-actions #timer-program-start { display: none; }

  #view-timer.view.active .timer-mobile-start-dock {
    position: fixed;
    z-index: 510;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid var(--border-hard);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 -14px 34px rgb(0 0 0 / 22%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  #view-timer.view.active .timer-mobile-start-anchor {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 18px;
    pointer-events: none;
  }

  #view-timer.view.active .timer-mobile-start-dock.is-attached {
    position: static;
    padding-inline: 18px;
    border-radius: 0 0 20px 20px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #view-timer.view.active .timer-mobile-start-dock .timer-start-button {
    width: min(100%, 864px);
    min-height: 54px;
    margin: 0 auto;
  }

  body.session-timer-running:not(.session-timer-open) #view-timer.view.active .timer-mobile-start-dock,
  body.session-timer-running:not(.session-timer-open) #view-timer.view.active .timer-mobile-start-dock.is-attached {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid var(--border-hard);
    border-radius: 0;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 -14px 34px rgb(0 0 0 / 22%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.session-timer-running:not(.session-timer-open) #view-timer.view.active .timer-mobile-start-dock .timer-start-button {
    width: calc(38% - 6px);
    min-height: 54px;
    margin: 0;
    padding-inline: 8px;
    font-size: 12px;
  }

  body.session-timer-running:not(.session-timer-open) #view-timer.view.active ~ .session-timer-dock,
  body.session-timer-running:not(.session-timer-open) .session-timer-dock {
    z-index: 511;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: calc(38% + 6px);
    min-width: 0;
    min-height: 54px;
    border-radius: 14px;
  }

  body.session-timer-open #view-timer.view.active .timer-mobile-start-dock { display: none; }

  .timer-multi-countdown-list { grid-template-columns: minmax(0, 1fr); }
  .timer-multi-card { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
  .timer-multi-card__copy > small { font-size: clamp(28px, 10vw, 40px); }
  .timer-duration-triple { gap: 4px; }
  .timer-duration-triple .timer-duration-colon { padding-bottom: 12px; font-size: 16px; }

  #view-timer .session-timer-stepper:not(.is-wheel-open) > button,
  #session-timer-overlay .session-timer-stepper:not(.is-wheel-open) > button { display: none; }
  #view-timer .session-timer-stepper:not(.is-wheel-open),
  #session-timer-overlay .session-timer-stepper:not(.is-wheel-open) { grid-template-columns: minmax(0, 1fr); }
  #view-timer .session-timer-stepper:not(.is-wheel-open) input,
  #session-timer-overlay .session-timer-stepper:not(.is-wheel-open) input { min-height: 46px; border-inline: 0; }
}

@media screen and (max-width: 720px) {
  .timer-block-list {
    gap: 10px;
    margin-top: 14px;
  }

  .timer-block-add { margin-top: 10px; }

  .timer-block-card {
    --timer-block-delete-width: 88px;
    border-radius: 14px;
    background: var(--color-surface-2);
  }

  .timer-block-card__content {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name order'
      'duration duration'
      'sound sound';
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 14px 16px 16px;
    background: var(--color-surface-2);
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(var(--timer-block-swipe-offset, 0), 0, 0);
    transition: transform 160ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  .timer-block-card.is-block-swipe-armed .timer-block-card__content {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .timer-block-card.is-block-swiping .timer-block-card__content {
    transition: none;
    will-change: transform;
  }
  .timer-block-card.is-delete-revealed .timer-block-card__content {
    transform: translate3d(var(--timer-block-swipe-offset, calc(-1 * var(--timer-block-delete-width))), 0, 0);
    will-change: transform;
  }

  .timer-block-order {
    grid-area: order;
    grid-template-columns: 40px 40px;
    align-self: end;
    align-items: end;
    gap: 6px;
  }

  .timer-block-order > span { display: none; }

  .timer-block-order button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .timer-block-name { grid-area: name; }
  .timer-block-name-index { display: inline; }
  .timer-block-name-label { display: none; }
  .timer-block-name-menu {
    width: min(320px, calc(100vw - 48px));
    max-height: min(220px, calc(100dvh - 160px));
  }
  .timer-block-card:has(.timer-block-name input[aria-expanded='true']) .timer-block-delete-handle {
    visibility: hidden;
    pointer-events: none;
  }
  .timer-block-duration { grid-area: duration; gap: 8px; }
  .timer-block-sound { grid-area: sound; min-width: 0; }
  .timer-block-name input,
  .timer-block-duration input,
  .timer-block-sound .session-timer-sound-trigger { min-height: 48px; }
  .timer-block-duration > span { padding-bottom: 14px; }
  .timer-block-delete { display: none; }

  .timer-block-delete-action {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: var(--timer-block-delete-width);
    place-items: stretch;
    overflow: hidden;
    border-left: 1px solid color-mix(in srgb, var(--color-error) 72%, transparent);
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-error) 70%, #26070d),
      color-mix(in srgb, var(--color-error) 92%, #26070d)
    );
    pointer-events: none;
    visibility: hidden;
  }

  .timer-block-card.is-block-swiping .timer-block-delete-action,
  .timer-block-card.is-delete-revealed .timer-block-delete-action { visibility: visible; }
  .timer-block-card.is-delete-revealed .timer-block-delete-action { pointer-events: auto; }

  .timer-block-delete-confirm {
    width: 100%;
    min-width: var(--timer-block-delete-width);
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  .timer-block-delete-confirm:active { background: color-mix(in srgb, #000 14%, transparent); }
  .timer-block-delete-confirm:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

  .timer-block-delete-handle {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: 28px;
    min-width: 28px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-items: end;
    border: 0;
    border-radius: 0;
    background: transparent;
    touch-action: manipulation;
  }

  .timer-block-delete-handle span {
    display: block;
    width: 3px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-error);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 16%, transparent);
    opacity: 0.78;
    transition: height 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
  }

  .timer-block-delete-handle:focus-visible { outline: 2px solid var(--color-error); outline-offset: -4px; }
  .timer-block-card.is-block-swiping .timer-block-delete-handle,
  .timer-block-card.is-delete-revealed .timer-block-delete-handle { pointer-events: none; }
  .timer-block-card.is-block-swiping .timer-block-delete-handle span,
  .timer-block-card.is-delete-revealed .timer-block-delete-handle span {
    height: calc(100% - 6px);
    opacity: 1;
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-error) 34%, transparent);
  }

  .timer-block-sound .timer-workspace-sound-menu {
    right: 0;
    left: auto;
  }
}

@media screen and (max-width: 480px) {
  .timer-workspace-hero { padding: 16px 16px 13px; }
  .timer-workspace-hero h1 { font-size: 25px; }
  .timer-mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 16px; }
  .timer-mode-tabs > button { min-height: 42px; padding: 0 8px; }
  .timer-preset-bar { margin-inline: 16px; }
  .timer-mode-panel { padding: 18px 16px; }
  .timer-panel-heading--action { align-items: stretch; flex-direction: column; }
  .timer-quick-durations { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .timer-quick-durations button { min-width: 0; padding: 0 3px; font-size: 10px; }
  .timer-limit-config { align-items: center; flex-direction: row; }
  .timer-limit-config .session-timer-stepper { width: 132px; flex-basis: 132px; }
  .timer-limit-config[hidden] { display: none; }
  .timer-limit-config--unlimited { align-items: center; }
  .timer-limit-config.timer-limit-config--time { align-items: stretch; flex-direction: column; }
  .timer-limit-config .timer-stop-time .session-timer-stepper { width: 100%; flex-basis: auto; }
  .timer-option-row { align-items: stretch; flex-direction: column; }
  .timer-option-row--toggle { align-items: center; flex-direction: row; }
}

.container { max-width: var(--content-default); margin-inline: auto; padding-inline: var(--container-pad); }
.container--wide { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--container-pad); }

/* ── HEADER / NAV ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Belt and braces: header content must never widen the page. */
  overflow-x: clip;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 60px;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.logo svg { color: var(--color-primary); }

.main-nav {
  display: flex;
  gap: var(--space-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-interactive), background var(--transition-interactive);
}
.nav-btn:hover { color: var(--color-text); background: var(--color-surface-dynamic); }
.nav-btn.active { color: var(--color-primary-active); background: var(--color-primary-highlight); font-weight: 600; }

.header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}
.theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
}
.theme-toggle:hover { background: var(--color-surface-dynamic); color: var(--color-text); }

/* Header account control (login / email + sign out) */
.header-account { position: relative; display: flex; align-items: center; }
.header-login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  background: none; border: none; border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition-interactive);
}
.header-login-btn:hover { background: var(--color-surface-dynamic); color: var(--color-text); }
.header-account-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-full);
  color: var(--color-text-muted); cursor: pointer;
  transition: all var(--transition-interactive);
}
.header-account-btn:hover { background: var(--color-surface-dynamic); color: var(--color-text); }
.header-account-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px; padding: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 60;
}
.header-account-menu.open { display: block; }
.header-account-menu-email {
  padding: 8px 10px; font-size: var(--text-xs); color: var(--color-text-muted);
  word-break: break-all; border-bottom: 1px solid var(--color-border); margin-bottom: 4px;
}
.header-account-menu-signout {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: none; border: none; border-radius: var(--radius-md);
  color: var(--color-text); font-family: inherit; font-size: var(--text-sm);
  font-weight: 600; cursor: pointer;
}
.header-account-menu-signout:hover { background: var(--color-surface-dynamic); color: var(--color-primary); }
@media (max-width: 560px) { .header-login-label { display: none; } }
/* The display rules above outrank the [hidden] attribute; restore it so
   renderAccountMenu()'s .hidden toggles actually show/hide these buttons. */
.header-login-btn[hidden], .header-account-btn[hidden] { display: none !important; }

/* ── VIEWS / PAGES ── */
.view { display: none; }
.view.active { display: block; }

/* ── PAGE HEADER ── */
.page-header {
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-8);
}
.page-header h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.page-header p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 65ch;
}

/* ── EQUIPMENT PANEL ── */
.equipment-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}
.equipment-panel h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
}
.equipment-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  flex: 0 0 100%;
}
.equipment-panel-head > div {
  min-width: 0;
}
.equipment-panel-head .equipment-selection-status {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.2;
}
.equipment-clear-btn {
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.equipment-clear-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.equipment-select-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  flex: 0 0 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-primary) 65%, var(--color-border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-2));
  color: var(--color-primary-active);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.equipment-select-all-btn:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-2));
}
.equipment-select-all-btn:focus-visible,
.equipment-clear-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.equipment-select-all-btn:disabled {
  display: none;
}
.equipment-clear-btn:disabled {
  opacity: 0.42;
  cursor: default;
}
.equipment-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.eq-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-interactive);
  user-select: none;
}
.eq-toggle .eq-icon { font-size: 1rem; }
.eq-toggle:hover { border-color: var(--color-primary); color: var(--color-text); }
.eq-toggle.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* ── EXERCISE CATALOG ── */
.catalog-controls {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  align-items: center;
}
.search-input {
  flex: 1;
  min-width: 200px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-interactive);
}
.search-input:focus { border-color: var(--color-primary); }

.filter-select {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-interactive);
}
.filter-select:focus { border-color: var(--color-primary); }

/* Labeled wrapper so the Level/Goal selects match the "LABEL Value" pattern of
   the Muscle/Equipment picker buttons. The wrapper carries the border; the
   select inside goes bare. */
.filter-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-interactive);
}
.filter-select-wrap:focus-within { border-color: var(--color-primary); }
.filter-select.filter-select--bare {
  border: 0;
  background: transparent;
  padding-left: var(--space-2);
  font-weight: 700;
}

.muscle-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.muscle-tab {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.muscle-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.muscle-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--ink-on-accent);
}

.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}
.exercise-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive);
}
.exercise-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.exercise-card.hidden { display: none; }
.card-header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
/* Catalog card: larger thumbnail, hero-ish on the left of the card header */
.card-header > .ex-card__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
}
.card-header-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-header-text .badge-row { margin-top: var(--space-1); }
@media (max-width: 480px) {
  .card-header > .ex-card__thumb { flex-basis: 80px; width: 80px; height: 80px; }
}
.card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.badge-row {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge-beginner { background: var(--color-success-highlight); color: var(--color-success); }
.badge-intermediate { background: var(--color-primary-highlight); color: var(--color-primary-active); }
.badge-advanced { background: var(--color-error-highlight); color: var(--color-error); }
.badge-hypertrophy { background: var(--color-info-highlight); color: var(--color-info); }
.badge-strength { background: var(--color-error-highlight); color: var(--color-error); }
.badge-both { background: var(--color-surface-dynamic); color: var(--color-text); }
/* Light-mode badge contrast — darker foregrounds so all variants clear AA */
:root:not([data-theme='dark']) .badge-beginner   { color: #1f5c2a; }
:root:not([data-theme='dark']) .badge-advanced   { color: #8c1f1f; }
:root:not([data-theme='dark']) .badge-strength   { color: #8c1f1f; }
:root:not([data-theme='dark']) .badge-hypertrophy { color: #0f4480; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .badge-beginner   { color: var(--color-success); }
  :root:not([data-theme='light']) .badge-advanced   { color: var(--color-error); }
  :root:not([data-theme='light']) .badge-strength   { color: var(--color-error); }
  :root:not([data-theme='light']) .badge-hypertrophy { color: var(--color-info); }
}
[data-theme='dark'] .badge-beginner   { color: var(--color-success); }
[data-theme='dark'] .badge-advanced   { color: var(--color-error); }
[data-theme='dark'] .badge-strength   { color: var(--color-error); }
[data-theme='dark'] .badge-hypertrophy { color: var(--color-info); }

/* Dark-mode active-state contrast fix (2026-07 visual audit items 1 and 7): --color-primary-active
   (accent-deep) measures only 3.20 against --color-primary-highlight (accent-wash) in dark
   mode, fails AA 4.5. Use the brighter --accent-hot for dark mode instead, ratio 7.46.
   Light mode already passes at 8.09 with --color-primary-active and is unaffected.
   .video-btn--direct (the rendered "Watch Tutorial" button, item 7) shares the identical
   pairing and the identical dark-mode failure. */
[data-theme='dark'] .nav-btn.active,
[data-theme='dark'] .mode-btn.active,
[data-theme='dark'] .badge-intermediate,
[data-theme='dark'] .video-btn--direct,
[data-theme='dark'] .equipment-select-all-btn,
[data-theme='dark'] .nav-drawer-btn.active,
[data-theme='dark'] .cmd-day-chip .cmd-day-label,
[data-theme='dark'] .cmd-profile-menu-item.active,
[data-theme='dark'] .day-anchor-btn:hover,
[data-theme='dark'] .catalog-muscle-btn.open,
[data-theme='dark'] .muscle-pick--all,
[data-theme='dark'] .catalog-kit-btn.active,
[data-theme='dark'] .catalog-filter-sticky.kit-expanded .catalog-kit-btn,
[data-theme='dark'] .catalog-filter-toggle[aria-expanded="true"],
[data-theme='dark'] .catalog-filter-toggle.has-filters {
  color: var(--accent-hot);
}
[data-theme='dark'] .catalog-muscle-btn.open .catalog-muscle-btn-label,
[data-theme='dark'] .catalog-kit-btn.active .catalog-kit-btn-label {
  color: var(--accent-hot);
  opacity: 0.88;
}

.card-body { padding: 0 var(--space-5) var(--space-4); }
.card-muscles {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.card-muscles strong { color: var(--color-text); }

.card-notes {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-3);
  margin-bottom: var(--space-3);
  font-style: italic;
}

.card-progression {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.card-progression strong {
  color: var(--color-text-muted);
  font-style: normal;
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.eq-chips {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.eq-chip {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
}

.video-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-dynamic);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-border);
  transition: all var(--transition-interactive);
  text-decoration: none;
}
.video-btn:hover {
  background: #B91C1C;
  color: #fff;
  border-color: #B91C1C;
}
.video-btn svg { flex-shrink: 0; }

/* ── CATALOG EMPTY STATE ── */
.catalog-empty {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--color-text-muted);
}
.catalog-empty svg { margin: 0 auto var(--space-4); opacity: 0.3; }
.catalog-empty h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--color-text); }

/* ── PROGRAM VIEW ── */
/* Unified profile switcher (segmented pill), shared visual language with the
   Progress and Dashboard switchers so "pick a person" looks the same app-wide. */
.profile-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: var(--space-6);
  padding: 3px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
}
.profile-tab {
  padding: 6px 18px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: center;
  transition: all var(--transition-interactive);
  cursor: pointer;
}
.profile-tab:hover:not(.active) { color: var(--color-text); }
.profile-tab.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED PERSONA SWITCHER  ("whose training am I viewing?")
   One control app-wide, mounted once in the persistent header. Shown
   only when the viewer can see more than one profile (JF: JF + Anita);
   guests and single-profile users get no switcher at all. Segmented
   control: sunken track, ember active thumb, per-person colored initial
   disc. role="group" + aria-current (per Primer segmented-control
   guidance, deliberately NOT radiogroup/tablist). Replaces the four
   old per-view switchers (dashboard buttons, command-bar dropdown,
   progress pill, nutrition pill) so "pick a person" reads identically
   everywhere. Research: _references/research/ux_audit/profile_switcher_patterns.md
   ══════════════════════════════════════════════════════════════════ */
.persona-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  max-width: 100%;
}
.persona-chip {
  --persona-accent: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px 4px 4px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease,
              border-color 150ms ease, box-shadow 150ms ease;
}
.persona-chip[data-profile="gf"]    { --persona-accent: var(--accent-flex); }
.persona-chip[data-profile="bruce"] { --persona-accent: var(--accent-core); }
.persona-chip[data-profile="rocky"] { --persona-accent: var(--accent-secondary); }
.persona-chip__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--persona-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 150ms ease, color 150ms ease;
}
.persona-chip:hover:not(.is-active) { color: var(--color-text); }
.persona-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.persona-chip.is-active .persona-chip__disc {
  background: #fff;
  color: var(--persona-accent);
}
[data-theme='dark'] .persona-chip__disc {
  color: #0B0B0C;
}
[data-theme='dark'] .persona-chip[data-profile="you"]   { --persona-disc-ink: #7A2800; }
[data-theme='dark'] .persona-chip[data-profile="gf"]    { --persona-disc-ink: #0B655E; }
[data-theme='dark'] .persona-chip[data-profile="bruce"] { --persona-disc-ink: #5B35B8; }
[data-theme='dark'] .persona-chip[data-profile="rocky"] { --persona-disc-ink: #1F58A7; }
[data-theme='dark'] .persona-chip.is-active .persona-chip__disc {
  color: var(--persona-disc-ink, #672100);
}
/* Light-mode active-tab contrast fix (2026-07 visual audit item 1): --color-text-inverse
   (near-white) on --color-primary (accent) measures 3.96 in light mode, fails AA 4.5.
   Use --color-primary-active (accent-deep) as the fill instead, ratio 9.36. Dark mode
   already passes (6.17) and is unaffected. Also covers the Programs-view .profile-tab
   switcher, which shares the identical background/text pairing. */
:root:not([data-theme='dark']) .profile-tab.active,
:root:not([data-theme='dark']) .persona-chip.is-active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}
.persona-chip:focus-visible {
  outline: 2px solid var(--persona-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .persona-chip, .persona-chip__disc { transition: none; }
}

/* Header mount: the switch sits in the right action cluster, left of the
   account control. Compact it and drop names on narrow screens (keeps a
   44px disc-only touch target so it never wraps or scrolls). */
.header-actions .persona-switch { flex-shrink: 0; }
/* Below 640px the full chip names ("Bruce Lee" + "Rocky Balboa") no longer fit
   next to the hamburger, logo, login, and theme toggle; the header used to
   overflow the viewport and drag the whole page ~20px sideways. Collapse to
   disc-only chips for the entire narrow band, not just <=480px. */
@media (max-width: 640px) {
  .header-actions .persona-chip__name { display: none; }
  .header-actions .persona-chip {
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .header-actions .persona-chip__disc { width: 30px; height: 30px; }
  .header-inner { gap: var(--space-3); }
}

/* ══════════════════════════════════════════════════════════════════
   Demo-model switch (header + nav drawer): male / female exercise
   images. A display preference, so it sits beside the theme toggle
   and borrows the .persona-switch pill language (sunken track,
   accent fill). The accent thumb is a ::before that slides between
   the two fixed-width segments, driven by data-model on the
   container (set by syncImageModelSwitch in js/app.js).
   ══════════════════════════════════════════════════════════════════ */
.model-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.model-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.model-switch[data-model="female"]::before { transform: translateX(34px); }
/* Light-mode thumb contrast: same AA fix as .persona-chip.is-active above. */
:root:not([data-theme='dark']) .model-switch::before { background: var(--color-primary-active); }
.model-switch__opt {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 150ms ease;
}
.model-switch__opt[aria-pressed="true"] { color: var(--color-text-inverse); }
.model-switch__opt:hover:not([aria-pressed="true"]) { color: var(--color-text); }
.model-switch__opt:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .model-switch::before { transition: none; }
}
/* ── Desktop homes of the demo-model switch: Catalog filter bar (labelled
   field) + Programs command bar. Contextual placement, since exercise images
   are the content on those views. Hidden below 768px, where the nav drawer
   carries it. See _references/research/ux_audit/demo_model_switch_placement.md */
.model-switch-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.model-switch-field__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .model-switch-field,
  .model-switch--cmd { display: none; }
}

/* ── Mobile header: hamburger (left) / SOMA logo (centered) / account (right).
   The persona switch, theme toggle, and model switch all move into the nav
   drawer at this width. The three-column grid keeps the logo centered on the
   viewport regardless of the side controls' widths. ── */
@media (max-width: 767.98px) {
  .site-header { overflow: visible; }
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-2);
  }
  .header-inner > .nav-menu-btn   { justify-self: start; }
  .header-inner > .logo-btn       { justify-self: center; }
  .header-inner > .header-actions { justify-self: end; }
  /* The logo is alone in the centre now, so bring back the "SOMA" wordmark
     that the old crowded-header rule hid below 640px. */
  .header-inner > .logo-btn span { display: inline; }
  /* #header-persona carries an inline display set by renderPersonaSwitch, so
     hiding it on mobile needs !important to win. */
  #header-persona,
  .header-actions > .theme-toggle { display: none !important; }
  .header-account-menu {
    position: fixed;
    top: 68px;
    right: 12px;
    width: min(260px, calc(100vw - 24px));
    min-width: 0;
    z-index: 300;
  }
}

/* ── Nav-drawer preferences group (persona / theme / images), one divider for
   the whole group rather than one per row. ── */
.nav-drawer-prefs {
  margin-top: var(--space-3);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-divider);
}
.nav-drawer-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-1) var(--space-4);
}
.nav-drawer-pref__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
/* The drawer uses explicit two-position controls. Both halves are real
   buttons, while the thumb only communicates the selected state. */
.theme-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
}
.theme-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 60px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-switch[data-theme="light"]::before { transform: translateX(60px); }
.theme-switch__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 60px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.theme-switch__opt[aria-pressed="true"] { color: var(--color-text-inverse); }
.theme-switch__opt:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
:root:not([data-theme='dark']) .theme-switch::before { background: var(--color-primary-active); }
.nav-drawer-pref .model-switch--drawer::before,
.nav-drawer-pref .model-switch--drawer .model-switch__opt {
  width: 60px;
  height: 38px;
}
.nav-drawer-pref .model-switch--drawer[data-model="female"]::before { transform: translateX(60px); }
.model-switch--drawer .model-switch__opt { gap: 5px; font-size: 11px; font-weight: 700; }
/* Mobile persona choice: two equal program tiles. The previous stacked rows
   consumed too much height and the separate Viewing badge competed with the
   athlete name. These compact tiles make the choice immediately scannable,
   keep both targets at 72px, and remain safe at 320px. */
#drawer-persona-row {
  display: block;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
#drawer-persona-row .nav-drawer-pref__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.persona-switch--drawer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 0;
  background: transparent;
}
.persona-switch--drawer .persona-chip {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: none;
}
.persona-switch--drawer .persona-chip:hover:not(.is-active) {
  border-color: var(--color-text-faint);
  background: var(--color-surface-2);
}
.persona-switch--drawer .persona-chip:focus-visible {
  outline-color: var(--color-primary);
}
.persona-switch--drawer .persona-chip__disc {
  width: 30px;
  height: 30px;
  font-size: 10px;
}
.persona-switch--drawer .persona-chip__name {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}
.persona-switch--drawer .persona-chip.is-active {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  border-color: var(--color-primary);
  color: var(--color-text);
  box-shadow: inset 0 -3px 0 var(--color-primary);
}
:root:not([data-theme='dark']) .persona-switch--drawer .persona-chip.is-active {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.persona-switch--drawer .persona-chip.is-active .persona-chip__disc {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.persona-switch--drawer .persona-chip.is-active::after {
  content: '✓';
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch::before { transition: none; }
}

.schedule-mode-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.schedule-mode-panel h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.mode-btns { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mode-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-surface-2);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.mode-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.mode-btn.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
  font-weight: 700;
}

/* Weekly schedule grid */
.weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
/* JF's free-week plan only has 5 training days — scope to 5 cols so chips
   span the container instead of leaving 2 empty grid slots */
#you-free-week.weekly-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 768px) {
  .weekly-grid { grid-template-columns: repeat(4, 1fr); }
  #you-free-week.weekly-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .weekly-grid { grid-template-columns: repeat(2, 1fr); }
  #you-free-week.weekly-grid { grid-template-columns: repeat(2, 1fr); }
}

.day-card {
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  padding: var(--space-3);
  background: var(--color-surface);
  cursor: pointer;
  transition: all var(--transition-interactive);
  text-align: center;
}
.day-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.day-card.active { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.day-card.rest { opacity: 0.5; cursor: default; }
.day-card.rest:hover { border-color: var(--color-border); box-shadow: none; }
.day-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
}
.day-card.active .day-label { color: var(--color-primary); }
.day-title {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.day-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: var(--space-2) auto 0;
}
.dot-push { background: var(--dot-push); }
.dot-pull { background: var(--dot-pull); }
.dot-lower { background: var(--dot-lower); }
.dot-fullbody { background: var(--dot-fullbody); }
.dot-rest { background: var(--dot-rest); }
.dot-hiit { background: var(--dot-hiit); }
.dot-upper { background: var(--dot-upper); }

/* Day detail panel */
.day-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
}
.day-detail-header {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-left: 4px solid var(--color-primary);
  border-top-left-radius: calc(var(--radius-xl) - 1px);
  border-top-right-radius: calc(var(--radius-xl) - 1px);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.day-detail-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.day-detail-header .day-label-sm {
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0.7;
}
.day-detail-body { padding: var(--space-6); }

/* .session-section is unified with .session-block into one card
   component (see "UNIFIED SESSION BLOCK CARD"). Each block is its own
   card now, so the old stacked-divider between sections is removed. */
.session-section + .session-section {
  border-top: 0;
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.section-label::before {
  content: '';
  display: block;
  width: 12px;
  height: 2px;
  background: var(--color-primary);
}

/* Warmup list */
.warmup-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.warmup-list li {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border-left: 3px solid var(--color-primary);
}
/* Sub-steps of a grouped optional item (e.g. Bruce's wake-up routine):
   indented under their header line instead of posing as siblings. */
.warmup-list li.optional-sub,
.coaching-notes li.optional-sub {
  margin-left: var(--space-6);
  font-size: var(--text-xs);
  border-left-color: var(--color-border);
}

/* Exercise table */
.exercise-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.exercise-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 500px;
}
/* Fixed layout for the numbered "spaced" table variant */
.exercise-table-spaced {
  table-layout: fixed;
}
.exercise-table-spaced col.col-num        { width: 40px; }
.exercise-table-spaced col.col-ex         { width: 36%; }
.exercise-table-spaced col.col-setsreps   { width: 11%; }
.exercise-table-spaced col.col-restsets   { width: 10%; }
.exercise-table-spaced col.col-rir        { width: 9%; }
.exercise-table-spaced col.col-notes      { width: 24%; }
.exercise-table-spaced col.col-notes-wide { width: 32%; }
.exercise-table-spaced th, .exercise-table-spaced td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.cell-setsreps { font-variant-numeric: tabular-nums; }
.cell-rest {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rest-value-small {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--signal-ok) 12%, transparent);
  color: var(--signal-ok);
  font-weight: 700;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.exercise-table th {
  background: var(--color-surface-offset);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.exercise-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.exercise-table tr:last-child td { border-bottom: none; }
.exercise-table tr:hover td { background: var(--color-surface-offset); }

/* Exercise row numbering */
.exercise-num-cell {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--text-lg);
  text-align: center;
  vertical-align: top;
  padding-top: var(--space-4) !important;
}
.exercise-table-spaced tr.program-ex-row td {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* Rest row between exercises */
.rest-row td {
  background: color-mix(in srgb, var(--signal-ok) 5%, transparent) !important;
  border-top: 1px dashed color-mix(in srgb, var(--signal-ok) 22%, transparent) !important;
  border-bottom: 1px dashed color-mix(in srgb, var(--signal-ok) 22%, transparent) !important;
  padding: var(--space-2) var(--space-4) !important;
}
.rest-row:hover td { background: color-mix(in srgb, var(--signal-ok) 10%, transparent) !important; }
.rest-cell {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
.rest-icon {
  font-size: var(--text-base);
  margin-right: 4px;
  opacity: 0.8;
}
.rest-label {
  font-weight: 700;
  color: var(--signal-ok);
  text-transform: uppercase;
  margin-right: 6px;
}
.rest-value {
  font-weight: 700;
  color: var(--color-text);
  margin-right: 8px;
}
.rest-rationale {
  font-style: italic;
  color: var(--color-text-muted);
  opacity: 0.8;
}

.exercise-name-cell {
  font-weight: 600;
  color: var(--color-text);
}
.exercise-note-cell {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
}
.rir-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-dynamic);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Skill block */
.skill-block {
  background: var(--color-primary-highlight);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.skill-block-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-3);
}
.skill-block table { min-width: 400px; }

/* GtG schedule */
.gtg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.gtg-table th, .gtg-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
}
.gtg-table th {
  background: var(--color-surface-offset);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}
.gtg-table tr:last-child td { border-bottom: none; }

/* ── SKILLS VIEW ── */
.skill-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.skill-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive);
}
.skill-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.skill-card-header {
  background: var(--color-surface-offset);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.skill-card-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
}
/* Flexibility card timeline pill (e.g. "2-9 months depending on baseline").
   The old 140px max-width forced long phrases to wrap INSIDE the pill
   itself (3 cramped lines next to a one-line title) instead of letting the
   pill drop to its own row below the title, which .flex-card-header's
   flex-wrap was already set up to allow. Widened the cap so short phrases
   still sit inline on desktop, and forced a full-width own-row on mobile
   (below) so long phrases always read as one clean wrapped block instead
   of a narrow tower. Sole remaining user of this class is Flexibility;
   Skills cards moved to their own .skill-tl treatment. */
.timeline-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-align: right;
  max-width: 260px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .timeline-badge {
    flex: 1 1 100%;
    max-width: none;
    text-align: left;
  }
}
.skill-card-body { padding: var(--space-4) var(--space-5); }
.skill-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }

.progression-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.prog-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  position: relative;
  padding-bottom: var(--space-3);
}
.prog-step:last-child { padding-bottom: 0; }
.prog-step::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.prog-step:last-child::before { display: none; }
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-dynamic);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  z-index: 1;
  flex-shrink: 0;
}
.prog-step.current .step-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--ink-on-accent);
}
.step-content { padding-top: var(--space-1); }
.step-level {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: 2px;
}
.step-hold { font-size: var(--text-xs); color: var(--color-primary); font-weight: 600; }
.step-criteria { font-size: var(--text-xs); color: var(--color-text-muted); }
.step-notes { font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; margin-top: 2px; }

/* ── SRA / SCIENCE VIEW ── */
.science-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.science-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.science-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.science-card + .science-card {
  margin-top: var(--space-2);
}
.science-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}
.science-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.science-table th, .science-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
}
.science-table th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.science-table tr:last-child td { border-bottom: none; }

/* Enhanced table styling (science, volume, gtg - NOT exercise-table which has mobile grid) */
.science-table thead th,
.volume-table thead th,
.gtg-table thead th {
  border-bottom: 2px solid var(--color-primary);
  padding: var(--space-3) var(--space-3);
  color: var(--color-text);
}
.science-table tbody tr:nth-child(even) td,
.volume-table tbody tr:nth-child(even) td,
.gtg-table tbody tr:nth-child(even) td {
  background: var(--bg-sunken);
}
.science-table tbody tr:hover td,
.volume-table tbody tr:hover td,
.gtg-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
}
.science-table td,
.volume-table td,
.gtg-table td {
  padding: var(--space-3) var(--space-3);
}

/* Nutrition meal-timing table enhancement */
.exercise-table th {
  border-bottom-width: 2px;
  border-bottom-color: var(--color-primary);
}
.exercise-table tbody tr:nth-child(even) td {
  background: var(--bg-sunken);
}

.principles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.principle-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.principle-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.principle-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── FLEXIBILITY VIEW ── */
.flex-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-5);
}
.flex-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.flex-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.flex-card-header {
  background: var(--color-surface-offset);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-card-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
}
.flex-card-body { padding: var(--space-4) var(--space-5); }
.phase-block { margin-bottom: var(--space-4); }
.phase-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.exercise-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.exercise-row:last-child { border-bottom: none; }
.exercise-row-name { font-weight: 500; }
.exercise-row-duration { color: var(--color-primary); font-weight: 600; white-space: nowrap; font-size: var(--text-xs); }

/* ── EQUIPMENT VIEW ── */
.eq-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.eq-rec-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.eq-rec-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.eq-rec-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.eq-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  align-items: flex-start;
}
.eq-item:last-child { border-bottom: none; }
.priority-stars { color: var(--color-primary); font-size: var(--text-xs); white-space: nowrap; }
.eq-item-info { flex: 1; }
.eq-item-name { font-weight: 600; font-size: var(--text-sm); margin-bottom: 2px; }
.eq-item-purpose { font-size: var(--text-xs); color: var(--color-text-muted); }
.eq-item-cost { font-size: var(--text-xs); color: var(--color-success); font-weight: 600; margin-top: 2px; }

/* ── VOLUME TABLE ── */
.volume-table-wrap { overflow-x: auto; margin-top: var(--space-4); }
.volume-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.volume-table th, .volume-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
}
.volume-table th {
  background: var(--color-surface-offset);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}
.volume-table tr:last-child td { border-bottom: none; }
.check-green { color: var(--color-success); font-weight: 700; }

/* ── ALERT / INFO BOXES ── */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.alert-warning {
  background: color-mix(in oklab, var(--color-primary-highlight), transparent 30%);
  border: 1px solid var(--color-primary);
}
.alert-warning .alert-icon { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.alert-info {
  background: var(--color-info-highlight);
  border: 1px solid var(--color-info);
}
.alert-info .alert-icon { color: var(--color-info); flex-shrink: 0; margin-top: 2px; }
.alert-text { font-size: var(--text-sm); }
.alert-text strong { display: block; font-weight: 700; margin-bottom: var(--space-1); }

/* Collapsible alert — clickable header, body hidden until toggled */
.alert-collapsible { cursor: pointer; user-select: none; }
.alert-collapsible .alert-text { flex: 1; min-width: 0; }
.alert-collapsible .alert-text strong { margin-bottom: 0; }
.alert-collapsible .alert-body { display: none; margin-top: var(--space-2); font-weight: 400; }
.alert-collapsible.open .alert-body { display: block; }
.alert-collapsible.open .alert-text strong { margin-bottom: var(--space-1); }
.alert-chevron {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}
.alert-collapsible.open .alert-chevron { transform: rotate(180deg); }
.alert-collapsible:hover .alert-chevron { color: var(--color-text); }

/* ── AM SESSION ── */
.am-session {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.am-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-success);
  margin-bottom: var(--space-2);
}
.am-session h4 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.yoga-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.yoga-flow li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  position: relative;
}
.yoga-flow li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-success);
}

/* Variant: thumbnail-prefixed flow rows (used by AM knee bulletproofing routine) */
.yoga-flow--thumbs {
  gap: var(--space-3);
}
.yoga-flow--thumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: 0;
}
.yoga-flow--thumbs li::before {
  content: '';
  position: static;
  display: none;
}
.yoga-flow--thumbs .ex-card__thumb {
  flex: 0 0 auto;
}
.yoga-flow__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── NOTES/TIPS ── */
.coaching-notes {
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--color-primary) 5%, transparent),
      color-mix(in srgb, var(--color-primary) 5%, transparent)),
    var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.coaching-notes h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.coaching-notes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.coaching-notes li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  position: relative;
}
.coaching-notes li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/* ── PROGRESS / ACCORDION ── */
.section-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  transition: all var(--transition-interactive);
  text-align: left;
}
.section-toggle:hover { background: var(--color-surface-dynamic); }
.section-toggle .chevron { transition: transform 0.2s ease; }
.section-toggle.open .chevron { transform: rotate(180deg); }
.collapsible { display: none; }
.collapsible.open { display: block; }

/* ── UTIL ── */
.tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-surface-dynamic);
  color: var(--color-text-muted);
}
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.font-bold { font-weight: 700; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.flex { display: flex; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* ── SCROLL to top ── */
.scroll-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--ink-on-accent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-interactive);
}
.scroll-top:hover { background: var(--color-primary-hover); }
.scroll-top.visible { display: flex; }
/* While a session-log form is open (a fixed bottom sheet on mobile) the FAB
   would sit right on top of its effort dots; step aside. */
body:has(.session-log-widget.expanded) .scroll-top { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  #view-programs .ex-card__title-link a,
  #view-dashboard .dash-exercise-link,
  #view-skills .exercise-name-link,
  #view-flexibility .exercise-name-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Set the var (not padding directly) so full-bleed children that mirror
     the container padding (.catalog-filter-sticky) shrink in lockstep. */
  .container, .container--wide { --container-pad: var(--space-4); }
  .main-nav { gap: var(--space-1); }
  .exercise-grid { grid-template-columns: 1fr; }
  .skill-cards { grid-template-columns: 1fr; }
  .science-grid { grid-template-columns: 1fr; }
  .flex-sections { grid-template-columns: 1fr; }
  .eq-rec-grid { grid-template-columns: 1fr; }
  .profile-tabs { flex-wrap: wrap; }
  .day-detail-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   V2 ADDITIONS — Tooltips, Regression, Video links, UX polish
   ============================================================ */

/* ── Tooltip system ── */
.tooltip-trigger {
  position: relative;
  display: inline;
  cursor: help;
  border-bottom: 1px dashed var(--color-text-muted);
}
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--ink-on-accent);
  font-size: 9px;
  font-weight: 700;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
}
.tooltip-box {
  position: fixed;
  width: 260px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-dynamic);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--text-xs);
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  pointer-events: none;
  white-space: normal;
  text-align: left;
  font-weight: 400;
  animation: tooltipFadeIn 0.15s ease;
}
@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Section help chips ── */
.section-help {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: var(--space-2);
  cursor: help;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
}

/* ── Exercise name as video link in programs ── */
.exercise-name-link {
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
  font-weight: inherit;
}
.exercise-name-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.link-play-icon {
  opacity: 0;
  color: var(--color-primary);
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
.exercise-name-link:hover .link-play-icon {
  opacity: 1;
}
.exercise-name-text {
  color: var(--color-text);
}

/* ── Video button variants ── */
.video-btn--direct {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
}
[data-theme='light'] .video-btn--direct {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.video-btn--search {
  opacity: 0.75;
}
.video-btn.mt-3 {
  margin-top: var(--space-3);
}

/* ── "Too hard?" regression button ── */
.regression-details {
  margin-top: var(--space-2);
}
.regression-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  transition: all 0.15s ease;
  user-select: none;
}
.regression-trigger::-webkit-details-marker { display: none; }
.regression-trigger:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.regression-body {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.regression-arrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}
.regression-step {
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: 6px;
}
.regression-step.easier {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.regression-step.target {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.regression-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0;
}

/* ── Progression pills in catalog cards ── */
.progression-details {
  margin-top: var(--space-3);
}
.progression-details summary {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.progression-details summary::-webkit-details-marker { display: none; }
.progression-details summary::before {
  content: '▶';
  font-size: 8px;
  transition: transform 0.2s ease;
}
.progression-details[open] summary::before {
  transform: rotate(90deg);
}
.progression-steps-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
}
.prog-step-pill {
  font-size: var(--text-xs);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.prog-step-pill--current {
  background: var(--color-success-highlight);
  color: var(--color-success);
  border-color: var(--color-success);
}
.prog-arrow {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ── Rest day content ── */
.rest-day-content {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  margin-bottom: var(--space-4);
}
.rest-icon {
  font-size: 3rem;
  margin-bottom: var(--space-3);
}
.rest-headline {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

/* ── Session badge ── */
.session-badge {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal-info) 18%, transparent);
  color: var(--signal-info);
  margin-left: var(--space-2);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Skill block explainer ── */
.skill-block-explainer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--signal-info) 7%, var(--color-surface));
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--signal-info);
  line-height: 1.6;
}

/* ── Explainer block ── */
.explainer-block {
  background: var(--color-surface-2);
  border-radius: 10px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
}
.explainer-block h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}
.explainer-block p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ── Flex intro text ── */
.flex-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary);
}

/* ── Muscle label chips in catalog ── */
.card-muscles {
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
/* Primary and Secondary each get their own row with an aligned label column,
   so the two no longer run together as one inline string (the "Quadriceps
   SECONDARY Glutes" problem). Label column is fixed-width so the muscle names
   line up; names wrap under themselves on narrow cards without disturbing it. */
.card-muscle-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.card-muscle-row + .card-muscle-row {
  margin-top: 3px;
}
.muscle-label {
  flex-shrink: 0;
  min-width: 92px;
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-primary);
}
.muscle-label.secondary {
  color: var(--color-text-muted);
}
.muscle-names {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
}
.secondary-muscles {
  color: var(--color-text-faint);
}

/* ── mt-4 utility ── */
.mt-3 { margin-top: var(--space-3); }

/* ── Zuzka video btn ── */
.yoga-flow li {
  line-height: 1.7;
}

/* ── Scrolling to day detail smooth ── */
.day-detail {
  scroll-margin-top: 80px;
}

/* ============================================================
   V2.1 — VISUAL POLISH FIXES
   Issues: cramped sections, orphaned text, mobile stacking,
   card overflow, spacing inconsistency, flexibility layout
   ============================================================ */

/* ── 1. PAGE HEADER — tighter, full-width subtitle ── */
.page-header {
  padding: var(--space-8) 0 var(--space-6) !important;
  margin-bottom: var(--space-6) !important;
}
.page-header h1 {
  margin-bottom: var(--space-1) !important;
}
.page-header p {
  max-width: 100% !important;
  line-height: 1.5;
}

/* ── 2. EQUIPMENT PANEL — slimmer, always wrapping row ── */
.equipment-panel {
  padding: var(--space-3) var(--space-5) !important;
  margin-bottom: var(--space-5) !important;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.equipment-panel h3 {
  margin-bottom: 0 !important;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: var(--text-xs) !important;
}
.equipment-toggles {
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-2) !important;
}
/* Smaller, more compact pills */
.eq-toggle {
  padding: 5px 12px !important;
  font-size: var(--text-xs) !important;
}
.eq-toggle .eq-icon { font-size: 0.875rem !important; }

/* ── 3. NAV — mobile scrollable, no clipping ── */
.main-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 1;
}
.nav-btn {
  font-size: clamp(0.7rem, 0.65rem + 0.3vw, 0.875rem) !important;
  padding: var(--space-2) clamp(6px, 0.5vw + 4px, 12px) !important;
}

/* ── 4. EXERCISE CATALOG GRID — 3 columns, no title wrapping ── */
.exercise-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--space-5) !important;
}
.card-name {
  font-size: var(--text-base) !important;
  line-height: 1.25 !important;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Card header: thumbnail on left, header text (tag + name + badges) stacked on right */
.card-header {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--space-4) !important;
  padding: var(--space-4) var(--space-4) var(--space-2) !important;
}
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* Tighten card body padding */
.card-body {
  padding: 0 var(--space-4) var(--space-4) !important;
}
.card-muscles {
  margin-bottom: var(--space-2) !important;
}
.card-notes {
  margin-bottom: var(--space-3) !important;
}

/* ── 5. PROGRAM TABLE — regression button INSIDE row, not below ── */
.exercise-name-cell {
  vertical-align: middle !important;
}
/* Give the regression area breathing room inside the td */
.regression-details {
  margin-top: var(--space-2) !important;
  margin-bottom: 0 !important;
}
.regression-trigger {
  font-size: 0.72rem !important;
  padding: 3px 10px !important;
  opacity: 0.75;
  transition: opacity var(--transition-interactive);
}
.regression-trigger:hover { opacity: 1; }

/* Program table cells — better vertical rhythm */
.exercise-table td {
  padding: var(--space-3) var(--space-4) var(--space-2) !important;
  vertical-align: middle !important;
}
.exercise-table td.exercise-name-cell {
  vertical-align: top !important;
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}

/* ── 6. FLEXIBILITY LAYOUT — equal columns, badge fix ── */
.flex-sections {
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: start !important;
}
.flex-card-header {
  align-items: flex-start !important;
  gap: var(--space-3) !important;
  flex-wrap: wrap;
}
.flex-card-header h3 {
  flex: 1;
  min-width: 120px;
}
/* The duration badge — always right, never stretching title */
.flex-duration-badge {
  flex-shrink: 0;
  text-align: right;
}

/* ── 7. SPACING RHYTHM — consistent section gaps ── */
.session-section {
  margin-bottom: var(--space-5) !important;
}
.session-section + .session-section {
  padding-top: var(--space-5) !important;
  border-top: 0 !important;
}
.day-detail-body {
  padding: var(--space-5) !important;
}

/* Science cards equal height */
.science-grid {
  align-items: start !important;
}
.science-card {
  height: 100%;
}

/* Programs: phase selector + program tabs tighter */
.profile-tabs {
  margin-bottom: var(--space-4) !important;
}
.mode-tabs {
  margin-bottom: var(--space-4) !important;
}
.program-intro-box {
  margin-bottom: var(--space-4) !important;
}

/* Weekly grid cards — reduce height on low-content days */
.day-card {
  padding: var(--space-2) var(--space-3) !important;
  min-height: unset !important;
}

/* ── 8. MOBILE RESPONSIVENESS ── */
@media (max-width: 768px) {
  .equipment-panel {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
  }
  .equipment-panel h3 {
    margin-bottom: var(--space-1) !important;
  }
  .equipment-toggles {
    width: 100%;
  }
  /* Wrap rather than single-column stack */
  .eq-toggle {
    flex: 0 1 auto;
  }
  .flex-sections {
    grid-template-columns: 1fr !important;
  }
  .exercise-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .page-header {
    padding: var(--space-6) 0 var(--space-4) !important;
  }
  .page-header h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }
  /* Nav items fit without clipping */
  .nav-btn {
    font-size: 0.7rem !important;
    padding: 5px 7px !important;
  }
  .logo span {
    display: none; /* hide "SOMA" wordmark, keep icon on tiny screens */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .flex-sections {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   V2.1b — REMAINING FIX PASS
   ============================================================ */

/* Flex card exercise rows: prevent description from wrapping into cramped columns */
.flex-card-body .exercise-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
}
.flex-card-body .exercise-row-name {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Exercise description (if present) under name — full width, no cramping */
.flex-card-body .exercise-row-desc {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  margin-bottom: var(--space-1);
  line-height: 1.4;
}

/* Mobile equipment: 2-column grid instead of single stack */
@media (max-width: 768px) {
  .equipment-toggles {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2) !important;
  }
  .eq-toggle {
    width: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .equipment-toggles {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   V2.1c — FLEX CARD ROW FIX + MOBILE PILL FIX
   ============================================================ */

/* Fix exercise-row in flex cards: name+desc side gets proper flex sizing */
.flex-card-body .exercise-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
  grid-template-columns: unset !important; /* cancel V2.1b grid rule */
}
/* The wrapping div around name + notes */
.flex-card-body .exercise-row > div:first-child {
  flex: 1;
  min-width: 0;
}
.flex-card-body .exercise-row-name {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
/* Duration badge stays right, never shrinks */
.flex-card-body .exercise-row-duration {
  flex-shrink: 0 !important;
  align-self: flex-start;
  padding-top: 1px;
}

/* Mobile equipment: prevent pill text from wrapping — allow truncation */
@media (max-width: 768px) {
  .eq-toggle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   V2.1d — FLEX ROW DURATION WRAP FIX
   Long duration strings (e.g. PNF prescriptions) now wrap gracefully
   ============================================================ */
.exercise-row-duration {
  white-space: normal !important; /* allow wrap for long prescriptions */
  text-align: right;
  max-width: 160px;
  line-height: 1.3;
}
/* Ensure the name side still takes all remaining space */
.flex-card-body .exercise-row > div:first-child,
.exercise-row-name {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
}

/* ============================================================
   V3.0 — MAJOR FEATURE UPDATE
   1. Progression Picker (replaces "Too hard?" button)
   2. Session Blocks (AM/PM visual split)
   3. Equipment Substitution badges
   4. Science two-column layout
   ============================================================ */

/* ── 1. PROGRESSION PICKER (redesigned 2026-04-13) ──
   - Flex space-between so chips distribute evenly
   - Track line spans chip-center to chip-center precisely
   - Neutral past state (no confusing green)
   - Visible future state in BOTH light and dark modes
   - Selected chip prominent via gold fill + solid glow
================================================ */
.progression-picker,
.equip-picker {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius-lg);
}
.prog-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.prog-chips {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Key: even spacing across full width */
  position: relative;
  padding: 0;
  /* Add horizontal padding equal to half the chip width so the track lines
     exactly span chip-center to chip-center after justify-content applies */
  margin: 0 16px;
}
/* Background track line — spans full available width (from chip 1 center to chip N center) */
.prog-track-bg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-border);
  opacity: 0.5;
  transform: translateY(-50%);
  z-index: 0;
  border-radius: 2px;
}
/* Filled progress track — gold, width controlled by JS */
.prog-track-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  background: var(--color-gold);
  transform: translateY(-50%);
  z-index: 0;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.prog-chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  /* IMPORTANT: translate -16px left to compensate for margin-left of first chip,
     but since we use justify-content: space-between with margin on the container,
     no translate needed. */
}
/* PAST — neutral muted (not green; green was confusing with "current") */
.prog-chip.passed {
  border-color: var(--color-border);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  opacity: 0.65;
}
/* FUTURE — visible dashed outline in BOTH light and dark modes */
.prog-chip.future {
  border-color: var(--color-border);
  border-style: dashed;
  color: var(--color-text-muted);
  background: transparent;
  opacity: 0.8;
}
/* SELECTED — most prominent, gold fill, strong glow */
.prog-chip.selected {
  background: var(--accent);
  border-color: var(--accent);
  border-style: solid;
  color: var(--ink-on-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 16px var(--accent-glow);
  transform: scale(1.15);
  opacity: 1;
}
/* HOVER: only shows when not currently selected */
.prog-chip:hover:not(.selected) {
  border-color: var(--accent);
  border-style: solid;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: scale(1.08);
  z-index: 2;
  opacity: 1;
}
.prog-chip:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Equipment-variant chips. Reuse .prog-chip wholesale for the base, the states
   and the a11y: .prog-chip, .selected (gold fill + glow), :hover, :focus-visible.
   The mobile tap-target bump targets .prog-chip directly, so these pills inherit
   the 44x44 minimum for free.
   Override ONLY the geometry: .prog-chip is a fixed 32px circle, these are text
   pills. Deliberately NOT reusing .prog-chips: that has justify-content:
   space-between and margin: 0 16px, both sized for the progression track line,
   which variants must not have. */
.eqv-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.eqv-chip {
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* UNSELECTED: match the neutral tone of .prog-chip.passed. The bare .prog-chip base
   uses --color-surface, which renders pure white in the light theme and clashes with
   the progression chips sitting directly below this picker. A variant is an available
   alternative, not a future step, so it keeps a SOLID border (never the dashed
   .future outline, which would read as "locked"). */
.eqv-chip:not(.selected) {
  background: var(--color-surface-offset);
}

/* Keyboard accessibility, visible focus indicators on interactive elements */
.nav-btn:focus-visible,
.profile-tab:focus-visible,
.mode-btn:focus-visible,
.day-card:focus-visible,
.section-toggle:focus-visible,
.video-btn:focus-visible,
.muscle-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
.prog-selected-name {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--space-2);
  min-height: 1.3em;
}
.prog-selected-name::before {
  content: '▸ ';
  opacity: 0.6;
}

/* ── 2. UNIFIED SESSION BLOCK CARD ──────────────────────────────
   Every day-view block (warm-up, skill, work, core, rehab,
   cool-down / flexibility) renders as the SAME card component.
   Block identity is expressed through ONE accent colour (--sb-accent):
   a left rule, a faint wash, and the header badge. Nothing else
   differs between block types, so the whole day reads as one stack. */
.session-block,
.session-section {
  position: relative;
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--sb-accent, transparent) 5%, transparent),
      color-mix(in srgb, var(--sb-accent, transparent) 5%, transparent)),
    var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--sb-accent, var(--border-hard));
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.session-block-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.session-block-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  flex: 1;
}
.session-block-duration {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Time of day badges */
.session-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* Per-block accent (semantic training phase). The card shell is
   identical; only --sb-accent and the badge colour change. */
.session-warmup,
.session-am                      { --sb-accent: var(--accent-hot); }
.session-skill                   { --sb-accent: var(--signal-info); }
.session-hypertrophy             { --sb-accent: var(--accent); }
.session-work,
.session-pm                      { --sb-accent: var(--accent); }
.session-core                    { --sb-accent: var(--accent-core); }
.session-rehab                   { --sb-accent: var(--signal-ok); }
.session-cooldown,
.session-flex                    { --sb-accent: var(--accent-flex); }
.session-hiit                    { --sb-accent: var(--signal-alert); }

/* Header badges, one per block type, colour-matched to the accent */
.am-badge,
.warmup-badge { background: linear-gradient(135deg, var(--accent-hot), var(--accent)); color: var(--ink-on-accent); }
.pm-badge,
.work-badge   { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; }
.skill-badge  { background: linear-gradient(135deg, var(--signal-info), color-mix(in srgb, var(--signal-info) 65%, #000)); color: #fff; }
.hyp-badge    { background: linear-gradient(135deg, var(--accent-hot), var(--accent)); color: var(--ink-on-accent); }
.rehab-badge  { background: linear-gradient(135deg, var(--signal-ok), var(--signal-ok-hover)); color: var(--ink-on-accent); }
.core-badge   { background: linear-gradient(135deg, var(--accent-core), color-mix(in srgb, var(--accent-core) 60%, #000)); color: #fff; }
.flex-badge   { background: linear-gradient(135deg, var(--accent-flex), color-mix(in srgb, var(--accent-flex) 60%, #000)); color: var(--ink-on-accent); }
.hiit-badge   { background: linear-gradient(135deg, var(--signal-alert), color-mix(in srgb, var(--signal-alert) 60%, #000)); color: #fff; }
[data-theme='dark'] .pm-badge,
[data-theme='dark'] .work-badge {
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  color: #0B0B0C;
}
[data-theme='dark'] .skill-badge {
  background: linear-gradient(135deg, #2F6FBE, #173F73);
}
[data-theme='dark'] .core-badge {
  background: linear-gradient(135deg, #6942C5, #40247F);
}
[data-theme='dark'] .hiit-badge {
  background: linear-gradient(135deg, #C92F49, #841C30);
}

/* Cool-down / flexibility checklist — proper padded chips inside the
   block card, replacing the old bare full-width bullet list. Auto-fits
   2-3 columns on desktop, single column on mobile. */
.cooldown-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.cooldown-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.cooldown-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.42em;
  border-radius: var(--radius-full);
  background: var(--accent-flex);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-flex) 22%, transparent);
}
.cooldown-list li a { color: inherit; }
.cooldown-list li a:hover { color: var(--accent-flex); }

/* Focus tag */
.session-focus-tag {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-gold);
}

/* ── 3. EQUIPMENT SUBSTITUTION BADGE ── */
.sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--signal-info) 15%, transparent);
  color: var(--signal-info);
  border: 1px solid color-mix(in srgb, var(--signal-info) 32%, transparent);
  margin-left: 6px;
  cursor: help;
  white-space: nowrap;
}
/* Warn variant: no alternative in chain fits user's kit */
.sub-badge.sub-badge--warn {
  background: color-mix(in srgb, var(--signal-alert) 15%, transparent);
  color: var(--signal-alert);
  border-color: color-mix(in srgb, var(--signal-alert) 35%, transparent);
}
/* Row-level state hooks: subtle left-border accent for substituted / unresolved rows */
.program-ex-row.is-substituted > td:first-child {
  border-left: 3px solid var(--signal-info);
}
.program-ex-row.is-unresolved > td:first-child {
  border-left: 3px solid var(--signal-alert);
}
.sub-reason {
  font-size: 10px;
  color: var(--signal-info);
  margin-top: 2px;
  font-style: italic;
  line-height: 1.3;
  opacity: 0.85;
}

/* ── 4. SCIENCE TWO-COLUMN LAYOUT ── */
.science-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.science-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.science-subcol h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-display);
}
.science-author {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  letter-spacing: 0;
}
.science-table td, .science-table th {
  vertical-align: top;
}
/* Prevent Notes column from being crushed */
.science-table td:last-child {
  min-width: 100px;
}

@media (max-width: 768px) {
  .science-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ── 5. PROGRAM SECTION "WHAT TO DO" CLARITY ── */
/* Day header now clearly shows AM + PM time slots */
.day-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}
.day-schedule-pills {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.day-schedule-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
}
.day-schedule-pill.morning { background: color-mix(in srgb, var(--accent-hot) 18%, transparent); color: var(--accent-hot); }
.day-schedule-pill.afternoon { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.day-schedule-pill.skill { background: color-mix(in srgb, var(--signal-info) 18%, transparent); color: var(--signal-info); }
/* Light-mode text fix (2026-07 visual audit item 2): --accent-hot/--accent text on the
   18%-tint pill background measures 2.35/3.27 in light mode, fails AA 4.5. Use
   --color-primary-active (accent-deep) instead, ratio 8.13/7.73. Dark mode already
   passes (5.26/4.59) and is unaffected. */
:root:not([data-theme='dark']) .day-schedule-pill.morning,
:root:not([data-theme='dark']) .day-schedule-pill.afternoon {
  color: var(--color-primary-active);
}

/* ──────────────────────────────────────────────
   REST TIMER — fixed-bottom countdown bar
   ────────────────────────────────────────────── */

/* Inline "▶ Start rest" button next to rest period in exercise tables */
.rest-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
  font-family: inherit;
}
.rest-start-btn:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
}
.rest-start-btn::before {
  content: "▶";
  font-size: 9px;
}

/* Floating timer bar — shows when active */
.rest-timer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-surface-2);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  padding: var(--space-4) var(--space-5);
  transform: translateY(110%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}
.rest-timer-bar.visible {
  transform: translateY(0);
}
.rest-timer-exercise {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 120px;
  text-align: left;
}
.rest-timer-exercise strong {
  color: var(--color-text);
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
}
.rest-timer-countdown {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  min-width: 110px;
  text-align: center;
  line-height: 1;
}
.rest-timer-countdown.done {
  color: var(--color-success);
  animation: rest-flash 0.32s ease-in-out 5;
}
@keyframes rest-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.rest-timer-actions {
  display: flex;
  gap: var(--space-2);
}
.rest-timer-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-interactive);
  font-family: inherit;
}
.rest-timer-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.rest-timer-btn.dismiss {
  background: transparent;
}
@media (max-width: 480px) {
  .rest-timer-bar { padding: var(--space-3) var(--space-4); }
  .rest-timer-countdown { font-size: 28px; min-width: 84px; }
  .rest-timer-exercise { font-size: var(--text-xs); }
  .rest-timer-exercise strong { font-size: var(--text-sm); }
}

/* ──────────────────────────────────────────────
   SESSION LOG WIDGET — per-exercise inline log form
   ────────────────────────────────────────────── */
.session-log-widget {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}
.session-log-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
}
.session-log-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.session-log-form {
  display: none;
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-width: 640px;
}
.session-log-widget.expanded .session-log-form {
  display: block;
}
.session-log-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}
.session-log-heading__eyebrow {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.session-log-heading__title {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.25;
}
/* Retroactive logging: date picker at the top of the form. Defaults to the
   slot's own resolved date (today, or that day-of-week's date this week), lets
   the user back- (or same-week-forward-) date a save. Reuses the same input
   look as .session-log-actual/.session-log-notes below for visual consistency. */
.session-log-date-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.session-log-form input.session-log-date {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  box-sizing: border-box;
  color-scheme: dark;
}
:root[data-theme="light"] .session-log-form input.session-log-date {
  color-scheme: light;
}
.session-log-form input.session-log-date:focus {
  outline: none;
  border-color: var(--color-primary);
}
.session-log-form input.session-log-actual,
.session-log-form textarea.session-log-notes {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  box-sizing: border-box;
}
.session-log-form input.session-log-actual:focus,
.session-log-form textarea.session-log-notes:focus {
  outline: none;
  border-color: var(--color-primary);
}
.session-log-form textarea.session-log-notes {
  min-height: 54px;
  resize: vertical;
}
.session-log-mods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.session-log-mod-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted, var(--color-text));
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.session-log-mod-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.session-log-mod-chip .session-log-mod-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  display: inline-block;
  position: relative;
  flex: 0 0 14px;
}
.session-log-mod-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.session-log-mod-chip.is-active .session-log-mod-check {
  background: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}
.session-log-mod-chip.is-active .session-log-mod-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.session-log-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.session-log-actions .session-log-close {
  margin-left: auto;
}
.session-log-save {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
}
.session-log-save:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.session-log-close {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms;
}
.session-log-close:hover {
  border-color: var(--color-text);
  color: var(--color-text);
  background: var(--color-surface-2);
}
.session-log-status {
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: 600;
}
.session-log-last {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-left: 3px solid var(--color-success);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.session-log-last strong {
  color: var(--color-text);
}

/* ── Per-set logging form (Phase 2 + design polish) ── */
/* Screen-reader-only utility for hidden labels that stay accessible */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Column header row: CSS Grid with explicit column widths. Rows use the
   same grid-template-columns (set inline) so columns align by construction. */
.set-rows-header {
  display: grid;
  column-gap: 10px;
  align-items: center;
  padding: 0 2px var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  margin-bottom: var(--space-2);
  /* grid-template-columns is set inline per widget so it matches data rows */
}
.col-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
  text-align: center;
}
/* Both header and row first cells are grid-centered for perfect alignment */

.set-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.set-row {
  display: grid;
  column-gap: 10px;
  align-items: center;
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  /* grid-template-columns is set inline per row */
}
.set-row:hover {
  background: color-mix(in srgb, var(--color-surface-2) 40%, transparent);
}

/* Every cell justifies its content centered by default; overrides below. */
.set-row > *,
.set-rows-header > * { justify-self: center; align-self: center; }
.set-field--num { display: flex; align-items: center; justify-content: center; }
.set-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 30%, transparent);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.set-field--prev {
  flex: 0 0 auto;
  min-width: 48px;
}
button.set-prev {
  min-height: 30px;
  font-weight: 600;
}
.set-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
}
.set-prev {
  flex: 0 0 auto;
  min-width: 38px;
  max-width: 60px;
  font-size: 10px;
  color: var(--color-text-muted);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-prev--empty { color: color-mix(in srgb, var(--color-text-muted) 50%, transparent); }
/* Each .set-field occupies one grid cell. Content centered via the grid rule above. */
.set-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.effort-scale {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.effort-trigger-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1;
  max-width: 72px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.effort-trigger.is-selected + .effort-trigger-text { color: var(--color-text); font-weight: 700; }

/* Single trigger circle shown by default. Tap to open the full picker. */
.effort-trigger {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 2px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 100ms, background 120ms, border-color 120ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.effort-trigger:hover { transform: scale(1.08); border-color: var(--color-primary); color: var(--color-primary); }
.effort-trigger:active { transform: scale(0.94); }
.effort-trigger.is-selected { border-style: solid; color: transparent; }
.effort-trigger--easy     { background: #4ade80; border-color: #4ade80; }
.effort-trigger--moderate { background: #a3e635; border-color: #a3e635; }
.effort-trigger--hard     { background: #facc15; border-color: #facc15; }
.effort-trigger--near     { background: #fb923c; border-color: #fb923c; }
.effort-trigger--failure  { background: #ef4444; border-color: #ef4444; }

/* Vertical dropdown-style popover: each effort level is a full-width row
   with a colored circle on the left and a label + description on the right. */
.effort-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.effort-scale.is-open .effort-popover { display: flex; }

/* Option row. Each row is a button covering dot + text. */
.effort-dot {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 120ms;
}
.effort-dot:hover { background: var(--color-surface-2); }
.effort-dot:active { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.effort-dot.is-active { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }

.effort-dot-marker {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid;
  background: transparent;
  transition: background 120ms, transform 120ms;
}
.effort-dot:hover .effort-dot-marker { transform: scale(1.12); }

.effort-dot-labels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
  min-width: 0;
}
.effort-dot-main {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.effort-dot-desc {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Per-level ring colors (marker border) */
.effort-dot--easy       .effort-dot-marker { border-color: #4ade80; }
.effort-dot--moderate   .effort-dot-marker { border-color: #a3e635; }
.effort-dot--hard       .effort-dot-marker { border-color: #facc15; }
.effort-dot--near       .effort-dot-marker { border-color: #fb923c; }
.effort-dot--failure    .effort-dot-marker { border-color: #ef4444; }

/* Selected state fills the marker and highlights the main label */
.effort-dot--easy.is-active     .effort-dot-marker { background: #4ade80; }
.effort-dot--moderate.is-active .effort-dot-marker { background: #a3e635; }
.effort-dot--hard.is-active     .effort-dot-marker { background: #facc15; }
.effort-dot--near.is-active     .effort-dot-marker { background: #fb923c; }
.effort-dot--failure.is-active  .effort-dot-marker { background: #ef4444; }
.effort-dot.is-active .effort-dot-main { color: var(--color-primary); }

/* On narrow viewports, make the popover wider and anchored to the right edge */
  @media (max-width: 480px) {
    .effort-popover {
      min-width: 260px;
      right: 0;
      left: auto;
  }
  .effort-dot { padding: 12px 14px; }
  .effort-dot-marker { flex-basis: 22px; width: 22px; height: 22px; }
  .effort-dot-main { font-size: var(--text-base); }
  .effort-dot-desc { font-size: 12px; }
}

/* Delta arrow next to the metric field */
.set-delta {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
}
.set-delta--up   { color: #4ade80; background: color-mix(in srgb, #4ade80 15%, transparent); }
.set-delta--down { color: #ef4444; background: color-mix(in srgb, #ef4444 15%, transparent); }
.set-delta--same { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-text-muted) 15%, transparent); }

/* Copy-prev tappable button */
button.set-prev {
  border: 1px dashed transparent;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 3px;
  transition: all 120ms;
}
button.set-prev:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.set-prev--copied {
  background: color-mix(in srgb, var(--color-success) 25%, transparent) !important;
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
}
.set-field-label {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.set-input {
  width: 100%;
  min-height: 32px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  box-sizing: border-box;
}
.set-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Pill stepper, replaces the native browser spinner arrows */
.stepper {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 160ms, box-shadow 160ms;
  max-width: 100%;
  -webkit-user-select: none;
  user-select: none;
}
.stepper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.stepper .set-input {
  /* Stepper cell is 120px: minus(40) + input + plus(40) = 120. Input = 40px. */
  width: 40px;
  flex: 0 0 40px;
  min-width: 40px;
  min-height: 38px;
  padding: 0 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-user-select: text;
  user-select: text;
}
.stepper .set-input::-webkit-outer-spin-button,
.stepper .set-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper .set-input:focus {
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  box-shadow: none;
}
.stepper-btn {
  width: 40px;
  flex: 0 0 40px;
  min-height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms, color 120ms, transform 120ms;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.stepper-btn--minus { border-right: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent); }
.stepper-btn--plus  { border-left:  1px solid color-mix(in srgb, var(--color-border) 40%, transparent); }

/* Hover must never tint a neighboring number field. Touch browsers can retain
   :hover after a tap, so hover feedback is limited to precise pointing devices
   and changes only the icon color. */
@media (hover: hover) and (pointer: fine) {
  .stepper-btn:hover {
    background: transparent;
    color: var(--color-primary);
  }
}
.stepper-btn:active,
.stepper-btn.is-pressed,
.stepper-btn.is-stepper-pressing,
.stepper-btn.is-hold-repeating {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-primary);
  transform: scale(0.94);
}
.stepper-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
@media (max-width: 480px) {
  .stepper .set-input { width: 92px; min-height: 42px; font-size: var(--text-xl); }
  .stepper-btn { width: 42px; min-height: 42px; font-size: 22px; }
}
.set-remove {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 120ms;
}
.set-remove:hover {
  color: var(--color-primary);
  border-color: var(--color-border);
}
.set-add {
  width: 100%;
  padding: 6px;
  margin-bottom: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
}
.set-add:hover {
  border-style: solid;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
/* Logged-today affordance on the toggle button */
.session-log-toggle.logged-today {
  border-color: var(--color-success);
  color: var(--color-success);
}
/* Has-draft: values kept in the form but not yet committed to the log */
.session-log-toggle.has-draft {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.session-log-toggle.has-draft::after {
  content: '•';
  margin-left: 4px;
  color: var(--color-gold);
  font-weight: 900;
}
.session-log-toggle.logged-today.has-draft::after { display: none; }

/* Sparkline, inline next to exercise names */
.sparkline {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-primary);
}
.sparkline-empty {
  opacity: 0;
}
.ex-sparkline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-2);
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: all 140ms ease;
}
.ex-sparkline-wrap:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.ex-sparkline-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Exercise history modal (Phase 4) ── */
body.modal-open { overflow: hidden; }
.ex-history-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-history-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.ex-history-panel {
  position: relative;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: min(840px, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 640px) {
  .ex-history-panel {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
}
.ex-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.ex-history-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.ex-history-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
.ex-history-meta {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ex-history-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
  transition: all 120ms;
}
.ex-history-close:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ex-history-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ex-history-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.ex-history-chart-wrap {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.ex-history-chart-canvas {
  position: relative;
  height: 220px;
  width: 100%;
}
.ex-history-chart-canvas canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.ex-history-chart-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.ex-history-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.history-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-4);
  text-align: center;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.history-table th {
  text-align: left;
  padding: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
}
.history-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.history-date {
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.history-sets strong { color: var(--color-text); }
.history-notes {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
.history-legacy {
  margin-top: 4px;
  font-size: 10px;
  color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
}
.history-pr-chips { margin-left: 6px; }
.pr-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-gold) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-gold) 50%, transparent);
  color: var(--color-gold);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── PR celebration banner (Phase 5) ── */
.pr-banner-host {
  position: fixed;
  top: var(--space-4);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--space-4);
  z-index: 2000;
  pointer-events: none;
}
.pr-banner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  min-width: 280px;
  max-width: 480px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-gold) 22%, var(--color-surface)),
    var(--color-surface));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--color-gold) 30%, transparent);
  color: var(--color-text);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 240ms ease, transform 240ms ease;
  cursor: pointer;
}
.pr-banner--in { opacity: 1; transform: translateY(0); }
.pr-banner--out { opacity: 0; transform: translateY(-10px); }
.pr-banner-icon { font-size: 22px; line-height: 1; }
.pr-banner-text { flex: 1; min-width: 0; }
.pr-banner-kind {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}
.pr-banner-exercise {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Progress tab (Phase 6) ── */
.progress-profile-switch {
  display: inline-flex;
  gap: 4px;
  margin-bottom: var(--space-4);
  padding: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.progress-profile-btn {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--text-sm);
  font-family: inherit;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 140ms;
}
.progress-profile-btn.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.progress-section {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.progress-section-header { margin-bottom: var(--space-4); }
.progress-section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 4px;
}
.progress-section-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Heatmap */
.heatmap-wrap {
  overflow-x: auto;
  padding: var(--space-2) 0;
}
.consistency-heatmap { display: block; }
.consistency-heatmap .heat { stroke: var(--heat-outline); stroke-width: 1; }
.heat-0 { fill: var(--heat-0-fill); }
.heat-1 { fill: var(--heat-1-fill); }
.heat-2 { fill: var(--heat-2-fill); }
.heat-3 { fill: var(--heat-3-fill); }
.heat-4 { fill: var(--color-success); }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 10px;
  color: var(--color-text-muted);
}
.heatmap-legend .heat {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Volume bars */
.volume-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vol-row {
  display: grid;
  grid-template-columns: 90px 1fr 72px;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-xs);
}
.vol-label { color: var(--color-text); font-weight: 600; }
.vol-bar-track {
  position: relative;
  height: 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.vol-band {
  position: absolute;
  top: 0; bottom: 0;
  pointer-events: none;
}
.vol-band--mev  { width: 2px; background: var(--color-gold); opacity: 0.55; }
.vol-band--mav  { background: color-mix(in srgb, var(--color-success) 15%, transparent); }
.vol-band--mrv  { width: 2px; background: var(--color-primary); opacity: 0.55; }
.vol-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  transition: width 200ms ease;
}
.vol-fill--under { background: color-mix(in srgb, var(--color-text-muted) 40%, transparent); }
.vol-fill--mev   { background: color-mix(in srgb, var(--color-gold) 70%, transparent); }
.vol-fill--sweet { background: color-mix(in srgb, var(--color-success) 70%, transparent); }
.vol-fill--over  { background: color-mix(in srgb, var(--color-primary) 70%, transparent); }
.vol-value {
  text-align: right;
  font-family: var(--font-mono, monospace);
  color: var(--color-text);
  font-weight: 600;
}
.vol-target { color: var(--color-text-muted); font-weight: 400; font-size: 10px; }
.vol-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: 10px;
  color: var(--color-text-muted);
}
.vol-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.vol-legend-item .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Measurements */
.measurements-form {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.meas-date { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.meas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.meas-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.meas-field input {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
}
.meas-field input:focus { outline: none; border-color: var(--color-primary); }
.meas-status { margin-left: var(--space-3); font-size: var(--text-xs); color: var(--color-success); }
.meas-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.meas-chart-wrap {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.meas-chart-wrap--whr { grid-column: 1 / -1; border-color: var(--color-gold); }
.meas-chart-title { margin: 0 0 6px; font-size: var(--text-xs); font-weight: 700; color: var(--color-text); }
.meas-chart { width: 100%; height: 160px; }

.pr-table .pr-name { font-weight: 600; }
.pr-table .pr-kinds { white-space: nowrap; }

.muted { color: var(--color-text-muted); font-style: italic; font-size: var(--text-sm); }

/* Data management (Phase 7) */
.data-mgmt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.data-mgmt .btn-primary,
.data-mgmt .btn-secondary,
.data-mgmt .btn-danger {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms;
  border: 1px solid var(--color-border);
}
.data-mgmt .btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.data-mgmt .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.data-mgmt .btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.data-mgmt .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.data-mgmt .btn-danger {
  background: transparent;
  color: color-mix(in srgb, var(--color-primary) 80%, white);
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.data-mgmt .btn-danger:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.import-label {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.import-label input { display: none; }
.import-label:hover { border-color: var(--color-primary); color: var(--color-primary); }
.data-mgmt-status {
  font-size: var(--text-xs);
  font-weight: 600;
}
.data-mgmt-status[data-kind="success"] { color: var(--color-success); }
.data-mgmt-status[data-kind="error"] { color: var(--color-primary); }

/* ============================================================
   V4.0 — UX REFACTOR (Phase A: CSS foundation)
   Additive primitives for subsequent phases. Do not mutate
   earlier rules; later phases may add !more additive overrides.
   ============================================================ */

/* Role-split palette aliases. --color-today is reserved for the
   "is-today" outline on the day strip; --color-step-current is
   reserved for the progression picker's current step so gold is
   no longer doing double duty as "active tab" + "current step". */
:root {
  --color-today: var(--accent);
  --color-step-current: var(--signal-ok);
}

/* Accessibility — visually hidden but screen-reader accessible. */
.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;
}

/* Tap target floor — minimum 44×44 per Apple HIG / Material.
   Apply as a utility class to small interactive elements. */
.tap-44 {
  min-width: 44px;
  min-height: 44px;
}

/* Compact page-header variant — applied in Phase E to the Programs
   page header so the billboard H1 (56px) becomes a utility chrome
   size (24–36px fluid). Base .page-header h1 rule untouched. */
.page-header--compact h1 {
  font-size: var(--text-xl);
  letter-spacing: -0.005em;
  margin-bottom: var(--space-1);
}
.page-header--compact p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Type retune — the exercise name is the most important string
   in a row, so outweigh the note column. Raise specificity via
   td-qualified selector so this beats the V2.1 !important block. */
.exercise-table td.exercise-name-cell {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
}

/* Note column — drop italics for gym-distance legibility. Nudge
   color one shade brighter for contrast. */
.exercise-table td.exercise-note-cell {
  font-style: normal;
  color: var(--color-text);
  opacity: 0.82;
}

/* Sub-badge — bump base font from 10px → fluid xs (12–14). Color
   is already teal via existing rule; only size changes. */
.sub-badge {
  font-size: var(--text-xs);
  padding: 3px 9px;
}

/* Scroll-margin-top for any element we smooth-scroll to. Used by
   Phase F anchor bar. The 80px offset accounts for the 61px site
   header plus an upcoming 0–64px sticky command bar (Phase E). */
[id^="anchor-"],
.day-anchor-target {
  scroll-margin-top: 80px;
}

/* End V4.0 Phase A ---------------------------------------------*/

/* ============================================================
   V4.0 Phase B — Data surfacing
   Last-session line is now ABOVE the Log button and styled to
   read as the primary "what I did last time" info. Progress chip
   renders in the day-detail-header.
   ============================================================ */

/* Last-session line — prominent, inline, read-before-tap. Override
   the earlier .session-log-last rule (line ~2564) via specificity. */
.session-log-widget .session-log-last {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin: var(--space-1) 0 var(--space-2);
  padding: 4px 10px;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-text);
  background: rgba(46, 204, 113, 0.08);
  border-left: 3px solid var(--color-step-current);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.session-log-widget .session-log-last strong {
  color: var(--color-text);
  font-weight: 700;
}
.session-log-last-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-step-current);
  opacity: 0.9;
}
.session-log-last-notes {
  color: var(--color-text-muted);
  font-style: normal;
}
.session-log-last-when {
  color: var(--color-text-muted);
  font-size: 10px;
  opacity: 0.8;
  margin-left: auto;
  padding-left: var(--space-2);
}

/* Progress context chip — lives inside .day-detail-header, shows
   "Week N · M sessions this week" so the user always has context. */
.progress-context-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
}
.progress-context-chip .pcc-week {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.progress-context-chip .pcc-sep {
  opacity: 0.4;
}
.progress-context-chip .pcc-sessions {
  opacity: 0.95;
}

/* End V4.0 Phase B ---------------------------------------------*/

/* ============================================================
   V4.0 Phase C — Polish sweep
   - Tap target bumps to 44×44 for .prog-chip, .session-log-toggle,
     .eq-toggle (Apple HIG / Material minimum)
   - .day-card.is-today outline badge
   - Sub-badge wrapper span for card-mode text reflow (Phase D prep)
   - aria-current / aria-selected visual reinforcement
   ============================================================ */

/* Progression picker chips — bump from 32px to 44px, keep centering */
.prog-chip {
  min-width: 44px;
  min-height: 44px;
  font-size: 13px;
}
/* The track line is 50% centered; recalc offset so selected chip centers */
.prog-track-bg,
.prog-track-fill {
  /* Track still at vertical center; no change needed — percentage-based */
}

/* Session log toggle — bump up to 44 min-height, more breathing room */
.session-log-toggle,
.session-log-widget .session-log-toggle {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.2;
}

/* Equipment toggles — ensure tappable on mobile, keep desktop compact */
.eq-toggle {
  min-height: 44px;
}

/* ── Today badge on the current day card ── */
.day-card.is-today {
  position: relative;
  outline: 2px solid var(--color-today);
  outline-offset: 2px;
}
.day-card-today-pip {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-today);
  box-shadow: 0 0 0 2px var(--color-bg);
}

/* ── Sub-badge text wrapper (used by Phase D card layout to wrap cleanly) ── */
.sub-badge-text {
  font-weight: 700;
}

/* End V4.0 Phase C ---------------------------------------------*/

/* ============================================================
   V4.0 Phase D — Mobile layout
   Below 768px:
   - Main nav hides, hamburger button shows, nav drawer appears
   - Program tables become card-per-exercise (CSS grid on TR)
   - Weekly day strip becomes a horizontal scroll strip (not a 2×4 tile grid)
   - Desktop view is untouched — all rules scoped inside mq blocks
   ============================================================ */

/* Hamburger button — hidden on desktop, shown on mobile via mq */
.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-menu-btn:hover {
  background: var(--color-surface-dynamic);
}
.nav-menu-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Nav drawer — full-viewport overlay, panel slides in from the left */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.nav-drawer.open {
  opacity: 1;
  pointer-events: auto;
}
.nav-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: min(320px, 88vw);
  height: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.nav-drawer.open .nav-drawer-panel {
  transform: translateX(0);
}
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  flex: 0 0 auto;
  position: sticky;
  top: calc(-1 * var(--space-4));
  z-index: 2;
  padding-top: var(--space-4);
  background: var(--color-surface);
}
.nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}
.nav-drawer-brand > span {
  display: grid;
  gap: 1px;
}
.nav-drawer-brand small {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.nav-drawer-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.nav-drawer-section-label {
  padding: 0 var(--space-3) var(--space-1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.nav-drawer-links {
  display: grid;
  gap: 2px;
}
.nav-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
}
.nav-drawer-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.nav-drawer-btn svg {
  width: 20px;
  height: 20px;
  margin-right: var(--space-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.nav-drawer-btn:hover {
  background: var(--color-surface-dynamic);
}
.nav-drawer-btn.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
  font-weight: 700;
}
.nav-drawer-btn.active svg { color: currentColor; }
.nav-drawer-btn:focus-visible,
.nav-drawer-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
body.nav-drawer-open {
  overflow: hidden;
}

/* ────────────────────────────────────────────
   Mobile media block — ≤ 768px
   ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Show hamburger, hide inline nav below 768 */
  .nav-menu-btn { display: inline-flex; }
  .main-nav { display: none; }

  /* Weekly day strip: horizontal scroll, one card per viewport-ish */
  .weekly-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .weekly-grid::-webkit-scrollbar { display: none; }
  .weekly-grid .day-card {
    flex: 0 0 180px;
    min-width: 180px;
    scroll-snap-align: start;
  }

  /* ── Program exercise table → card-per-row ── */
  .exercise-table-wrap {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .exercise-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
    border: 0 !important;
  }
  .exercise-table colgroup,
  .exercise-table col {
    display: none !important;
  }
  .exercise-table thead {
    display: none !important;
  }
  .exercise-table,
  .exercise-table tbody {
    display: block !important;
    width: 100% !important;
  }
  .exercise-table tr.program-ex-row {
    display: grid !important;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "num  name  name"
      ".    prescription prescription"
      ".    rest  rir"
      ".    notes notes";
    gap: var(--space-1) var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }
  .exercise-table tr.program-ex-row.is-substituted {
    border-left: 3px solid var(--color-step-current);
  }
  .exercise-table tr.program-ex-row.is-unresolved {
    border-left: 3px solid var(--color-error);
  }
  /* Reset the V2.1 desktop-only left-border on the first td */
  .exercise-table tr.program-ex-row > td:first-child {
    border-left: 0 !important;
  }
  .exercise-table tr.program-ex-row > td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: baseline !important;
  }
  .exercise-table tr.program-ex-row .exercise-num-cell {
    grid-area: num;
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    padding-top: 2px !important;
  }
  .exercise-table tr.program-ex-row td.exercise-name-cell {
    grid-area: name;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: var(--text-base);
    font-weight: 700;
  }
  .exercise-table tr.program-ex-row .cell-setsreps {
    grid-area: prescription;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    padding-top: var(--space-1) !important;
  }
  .exercise-table tr.program-ex-row .cell-rest {
    grid-area: rest;
    text-align: left !important;
    font-size: var(--text-xs);
  }
  .exercise-table tr.program-ex-row .cell-rir {
    grid-area: rir;
    text-align: right;
    font-size: var(--text-xs);
  }
  .exercise-table tr.program-ex-row td.exercise-note-cell {
    grid-area: notes;
    font-size: var(--text-xs);
    color: var(--color-text);
    opacity: 0.75;
    margin-top: var(--space-1);
  }

  /* Plain table rows (skill blocks: Bruce isometrics, Rocky footwork) have no
     .program-ex-row class, so they used to fall through to raw table layout
     with the thead hidden: three squeezed columns and 400px-tall rows. Stack
     them as simple cards instead. */
  .exercise-table tr:not(.program-ex-row):not(.rest-row) {
    display: block !important;
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .exercise-table tr:not(.program-ex-row):not(.rest-row) > td,
  .exercise-table tr:not(.program-ex-row):not(.rest-row) > th {
    display: block !important;
    width: 100% !important;
    padding: 2px 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  .exercise-table tr:not(.program-ex-row):not(.rest-row) td.exercise-name-cell {
    font-weight: 700;
    font-size: var(--text-base);
  }
  .exercise-table tr:not(.program-ex-row):not(.rest-row) td.exercise-note-cell {
    font-size: var(--text-xs);
    opacity: 0.8;
  }

  /* Rest-row between cards — compact horizontal pill */
  .exercise-table tr.rest-row {
    display: flex !important;
    justify-content: center;
    margin: calc(var(--space-3) * -1) 0 var(--space-3);
    padding: 0;
    background: transparent !important;
    border: 0 !important;
  }
  .exercise-table tr.rest-row td.rest-cell {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 12px !important;
    background: rgba(46, 204, 113, 0.08) !important;
    border: 1px dashed rgba(46, 204, 113, 0.3) !important;
    border-radius: var(--radius-full) !important;
    font-size: 10px;
    width: auto;
  }

  /* Equipment panel — already stacked in V2.1, but ensure spacing */
  .equipment-panel {
    padding: var(--space-3) var(--space-4) !important;
  }
}

/* ────────────────────────────────────────────
   Narrow mobile block — ≤ 480px
   ──────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Make day cards a bit narrower on phones so 2 cards fit side by side
     in the viewport when snapping */
  .weekly-grid .day-card {
    flex: 0 0 160px;
    min-width: 160px;
  }
  /* Tighten prescription cell on narrow phones */
  .exercise-table tr.program-ex-row {
    grid-template-columns: 38px 1fr auto;
    padding: var(--space-3);
  }
}

/* End V4.0 Phase D ---------------------------------------------*/

/* ============================================================
   V4.0 Phase E — Information architecture restructure
   - New .command-bar sticky row: [Profile ▾] [Day] [Kit] [Briefing]
   - New .briefing-drawer holding moved .equipment-panel + 3 info alerts
   - Hide original pre-day chrome on the programs view (everything in
     .page-header + .profile-tabs + the global equipment panel +
     the 3 Anita accordions) via CSS. Briefing drawer surfaces them
     on demand instead of taxing every page load.
   ============================================================ */

/* ── Command bar — sticky under site header ── */
.command-bar {
  position: sticky;
  top: 61px; /* below sticky site-header (61px) */
  z-index: 90;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* Gap between sticky command bar and the content below it */
.command-bar + .briefing-drawer + .container--wide,
.command-bar + .container--wide {
  padding-top: var(--space-4);
}
.command-bar .cmd-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  min-height: 64px;
}
.cmd-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.cmd-cluster-right {
  margin-left: auto;
}

.cmd-profile,
.cmd-kit,
.cmd-briefing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.cmd-profile:hover,
.cmd-kit:hover,
.cmd-briefing:hover {
  background: var(--color-surface-dynamic);
  border-color: var(--color-primary);
}
.cmd-profile .cmd-label,
.cmd-kit .cmd-label,
.cmd-briefing .cmd-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.cmd-profile .cmd-value,
.cmd-kit .cmd-value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.cmd-profile .cmd-caret {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.cmd-briefing .cmd-label-lg {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Day chip — the center identifier of what day you're on */
.cmd-day-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 6px var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-highlight);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  min-width: 0;
  max-width: 36vw;
}
.cmd-day-chip .cmd-day-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-active);
}
.cmd-day-chip .cmd-day-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Profile dropdown menu */
.cmd-profile-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cmd-profile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cmd-profile-menu-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.cmd-profile-menu-item:hover {
  background: var(--color-surface-dynamic);
}
.cmd-profile-menu-item.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
  font-weight: 700;
}
.cmd-profile-menu-sep {
  height: 1px;
  margin: var(--space-2) calc(-1 * var(--space-2));
  background: rgba(255,255,255,0.08);
}
.cmd-profile-menu-account {
  padding: var(--space-1) var(--space-3);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted, #7a7a8a);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.cmd-profile-menu-signout { color: #ff9090; font-weight: 500; }
.cmd-profile-menu-signout:hover { background: rgba(255,120,120,0.08); color: #ff9090; }
.cmd-profile-menu-signin { color: var(--color-accent-gold, #f5a623); font-weight: 600; }
.cmd-profile-menu-signin:hover { background: rgba(245,166,35,0.08); color: var(--color-accent-gold, #f5a623); }

/* ── Briefing drawer — right-side overlay ── */
.briefing-drawer {
  position: fixed;
  inset: 0;
  z-index: 180;
  isolation: isolate;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  /* Keep the closed, translated panel inside the viewport's paint boundary.
     Without this clip, some desktop zoom and viewport combinations include
     the off-screen 560px panel in the document's horizontal scroll range. */
  overflow: hidden;
  overflow: clip;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.briefing-drawer.open {
  opacity: 1;
  pointer-events: auto;
}
.briefing-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(560px, 92vw);
  height: 100%;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.briefing-drawer.open .briefing-drawer-panel {
  transform: translateX(0);
}
.briefing-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
  background: var(--color-surface);
  position: relative;
  z-index: 1;
}
.briefing-drawer-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}
.briefing-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
}
.briefing-drawer-close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.briefing-drawer-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.briefing-drawer-close-label {
  display: none;
  font-size: var(--text-sm);
  font-weight: 750;
  line-height: 1;
}
.briefing-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.briefing-drawer-footer {
  display: none;
  flex: 0 0 auto;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.briefing-drawer-footer-close {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-2));
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 750;
  cursor: pointer;
}
.briefing-drawer-footer-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.briefing-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.briefing-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}
/* Inside the briefing drawer, the equipment panel shouldn't have the outer
   .container--wide margin since the drawer body already provides padding. */
.briefing-drawer .container--wide {
  padding: 0;
  margin: 0;
  max-width: none;
}
body.briefing-drawer-open {
  overflow: hidden;
}

/* ── Hide the original pre-day chrome on the programs view ── */
/* The command bar replaces everything below, but we leave the DOM in place
   so the existing renderers can still reference it. We hide it all here. */
#view-programs .container--wide > .page-header,
#view-programs .container--wide > .profile-tabs {
  display: none;
}
/* Hide the 3 Anita info accordions that live directly inside #profile-gf.
   Initially they sit in the markup; initBriefingDrawer() moves them into
   the briefing drawer so we need to hide them there until that move runs. */
body.in-programs #profile-gf > .alert.alert-collapsible {
  display: none;
}
/* Hide the global equipment panel when we're on the programs view — the
   command bar + briefing drawer surface it on demand instead. Direct-child
   selector means once initBriefingDrawer moves it into the drawer, this rule
   no longer matches and the panel stays visible inside the drawer. */
body.in-programs > .container--wide > .equipment-panel {
  display: none;
}
/* Once the equipment panel moves, the original wrapper is empty — hide it. */
body.in-programs > .container--wide:empty {
  display: none;
}

/* V4.0 Phase E — apply the compact page-header variant to the day-detail-header */
.day-detail-header h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.005em;
}

/* Command bar responsive — below 768px, compress labels */
@media (max-width: 768px) {
  body.briefing-drawer-open {
    position: fixed;
    top: var(--briefing-scroll-lock-y, 0px);
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .briefing-drawer {
    width: 100vw;
    height: 100%;
    height: 100dvh;
    min-height: 100svh;
  }
  .command-bar .cmd-bar-inner {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    min-height: 60px;
    flex-wrap: nowrap;
  }
  .cmd-profile .cmd-label,
  .cmd-kit .cmd-label {
    display: none;
  }
  .cmd-day-chip {
    max-width: 40vw;
    padding: 4px var(--space-2);
  }
  .cmd-day-chip .cmd-day-title {
    font-size: var(--text-xs);
  }
  .cmd-profile,
  .cmd-kit,
  .cmd-briefing {
    padding: var(--space-2);
  }
  .cmd-briefing .cmd-label-lg {
    display: inline;
    font-size: 11px;
    line-height: 1;
  }
  .briefing-drawer-panel {
    width: 100vw;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }
  .briefing-drawer-header {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }
  .briefing-drawer-close {
    width: auto;
    min-width: 82px;
    padding: 0 14px;
  }
  .briefing-drawer-close-label {
    display: inline;
  }
  .briefing-drawer-footer {
    display: flex;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }
}

/* End V4.0 Phase E ---------------------------------------------*/

/* ============================================================
   V4.0 Phase F — In-day jump anchors
   A small pill row at the top of each day-detail-body that lets
   the user smooth-scroll to Warm-up / Skill / Work / Core / Cool-down.
   Phase A scroll-margin-top utility ensures sticky header doesn't cover.
   ============================================================ */
.day-anchor-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-divider);
}
.day-anchor-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.day-anchor-btn:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
}
@media (max-width: 640px) {
  .day-anchor-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .day-anchor-bar::-webkit-scrollbar { display: none; }
  .day-anchor-btn {
    flex: 0 0 auto;
  }
}
/* End V4.0 Phase F ---------------------------------------------*/

/* ============================================================
   V4.0 Phase G — Print stylesheet
   Hide all interactive chrome and show only the day plan in a clean
   light layout suitable for paper. JF can print Anita's session for
   gym-side reference.
   ============================================================ */
@media print {
  /* Reset to light colors regardless of theme */
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Hide everything that's interactive-only or off-day */
  .site-header,
  .nav-drawer,
  .nav-menu-btn,
  .command-bar,
  .briefing-drawer,
  .scroll-top,
  .theme-toggle,
  .rest-timer-bar,
  .session-log-toggle,
  .session-log-form,
  .session-log-last,
  .progression-picker,
  .equip-picker,
  .day-anchor-bar,
  .equipment-panel,
  .page-header,
  .profile-tabs,
  .alert.alert-collapsible,
  .day-card-today-pip,
  .schedule-mode-panel,
  .section-toggle,
  .collapsible {
    display: none !important;
  }

  /* Show only the active view */
  .view:not(.active) { display: none !important; }

  /* Within the active view, only show the active profile and only its
     day-detail (skip the weekly grid + reference accordions) */
  .profile-content { display: none !important; }
  #profile-you[style*="display: block"],
  #profile-gf[style*="display: block"],
  #profile-bruce[style*="display: block"],
  #profile-rocky[style*="display: block"] {
    display: block !important;
  }
  .weekly-grid { display: none !important; }

  /* Day detail layout — clean paper look */
  .day-detail {
    border: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .day-detail-header {
    background: #ffffff !important;
    color: #000000 !important;
    border-left: 4px solid #000 !important;
    padding: 0 0 8px !important;
    margin-bottom: 16px !important;
  }
  .day-detail-header h2 {
    font-size: 22pt !important;
    color: #000 !important;
  }
  .day-label-sm {
    font-size: 11pt !important;
    color: #555 !important;
  }
  .day-schedule-pills,
  .progress-context-chip { display: none !important; }

  .session-block,
  .session-section {
    page-break-inside: avoid;
    background: #ffffff !important;
    border: 1px solid #ccc !important;
    margin-bottom: 12pt !important;
    padding: 10pt !important;
  }
  .session-block-header {
    border-bottom: 1px solid #ccc;
    margin-bottom: 8pt;
    padding-bottom: 6pt;
  }
  .session-time-badge,
  .session-block-duration {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #999 !important;
  }
  .section-label {
    font-size: 12pt !important;
    color: #000 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Exercise table — print as a real table */
  .exercise-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 10pt !important;
  }
  .exercise-table th,
  .exercise-table td {
    border: 1px solid #999 !important;
    padding: 4pt 6pt !important;
    color: #000 !important;
    text-align: left !important;
    vertical-align: top !important;
  }
  .exercise-table thead { display: table-header-group !important; }
  .exercise-name-cell {
    font-weight: 700 !important;
  }
  .sub-badge {
    background: transparent !important;
    border: 1px solid #999 !important;
    color: #000 !important;
  }
  .rest-row td {
    background: #f0f0f0 !important;
    text-align: center !important;
    font-style: italic;
    border-top: 1px dashed #999 !important;
    border-bottom: 1px dashed #999 !important;
  }
  .rir-badge {
    background: transparent !important;
    color: #000 !important;
  }

  /* Coaching notes + warmup lists — keep visible */
  .coaching-notes,
  .warmup-list,
  .yoga-flow,
  .cooldown-list {
    background: #ffffff !important;
    color: #000 !important;
  }

  /* Avoid orphan headings */
  h1, h2, h3, h4 { page-break-after: avoid; }

  /* Make the page a tighter paper layout */
  @page { margin: 0.5in; }
}
/* End V4.0 Phase G ---------------------------------------------*/

/* ============================================================
   V4.0 Phase H Hotfix 1 — Collapsible warm-up sections
   The morning yoga and afternoon warm-up sections are wrapped in
   <details> so they're collapsed by default, lifting the strength
   work block into the desktop fold.
   ============================================================ */
details.session-collapsible {
  cursor: default;
}
details.session-collapsible > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
details.session-collapsible > summary::-webkit-details-marker {
  display: none;
}
details.session-collapsible > summary::after {
  content: '▾';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 13px;
  color: var(--color-text-muted);
  transition: transform 200ms ease;
}
details.session-collapsible[open] > summary::after {
  transform: translateY(-50%) rotate(0deg);
}
.session-collapse-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-left: var(--space-2);
}
details.session-collapsible[open] .session-collapse-hint::after {
  content: 'ed';
}
.session-collapsible-body {
  padding-top: var(--space-3);
}

/* ── Collapsible session blocks (all blocks, matching the warm-up) ── */
.session-collapsible-js > .session-block-header {
  cursor: pointer;
  user-select: none;
}
.session-collapse-chevron {
  margin-left: var(--space-2);
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform 200ms var(--ease-standard);
  flex-shrink: 0;
}
.session-collapsible-js.is-collapsed .session-collapse-chevron {
  transform: rotate(-90deg);
}
.session-collapsible-js.is-collapsed > .session-collapsible-body {
  display: none;
}
/* Every block now shows a rotating chevron, so retire the text hint. */
.session-collapse-hint { display: none; }

/* Day-view flow hint, sits under the jump bar and explains the order. */
.day-flow-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-raised));
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.day-flow-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--color-primary); }
.day-flow-hint strong { color: var(--color-text); }

/* Optional session guidance can be controlled globally from Briefing or
   dismissed one card at a time. Horizontal touch motion belongs to the card;
   vertical motion remains native page scrolling. */
.program-tip {
  --program-tip-swipe-x: 0px;
  position: relative;
  padding-right: 56px;
  transform: translateX(var(--program-tip-swipe-x));
  transition: transform 180ms ease, opacity 180ms ease;
  touch-action: pan-y;
  will-change: transform;
}
.program-tip[hidden] { display: none !important; }
.program-tip.is-swiping { transition: none; }
.program-tip.is-dismissing { opacity: 0; }
.program-tip-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) {
  .program-tip-dismiss:hover {
    color: var(--color-text);
    background: var(--color-surface-dynamic);
    border-color: var(--border-soft);
  }
}
.program-tip-dismiss:focus-visible {
  color: var(--color-text);
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
  outline-offset: 2px;
}
.program-tip.coaching-notes h4 { padding-right: 28px; }

.briefing-program-tips {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.briefing-program-tips__toggle {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-align: left;
  background: var(--color-surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: background var(--transition-interactive), border-color var(--transition-interactive);
}
.briefing-program-tips__toggle:hover {
  background: var(--color-surface-dynamic);
  border-color: var(--border-hard);
}
.briefing-program-tips__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.briefing-program-tips__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.briefing-program-tips__copy strong {
  font-size: var(--text-sm);
  line-height: 1.25;
}
.briefing-program-tips__copy > span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.briefing-program-tips__state {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.briefing-program-tips__track {
  width: 42px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  transition: background 180ms ease, border-color 180ms ease;
}
.briefing-program-tips__track > span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  transform: translateX(0);
  transition: transform 180ms ease, background 180ms ease;
}
.briefing-program-tips__toggle.is-on .briefing-program-tips__track {
  background: color-mix(in srgb, var(--color-primary) 28%, var(--color-surface-2));
  border-color: color-mix(in srgb, var(--color-primary) 65%, var(--border-hard));
}
.briefing-program-tips__toggle.is-on .briefing-program-tips__track > span {
  background: var(--color-primary);
  transform: translateX(18px);
}
.briefing-program-tips__restore {
  min-height: 44px;
  padding: 8px 13px;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: left;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--border-soft));
  border-radius: var(--radius-md);
}
.briefing-program-tips__restore:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Briefing "how to run this session" guide + jargon glossary. */
.briefing-flow-guide { margin-bottom: var(--space-5); }
.briefing-flow-guide__title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.briefing-flow-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
}
.briefing-flow-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.briefing-flow-steps strong { color: var(--color-text); }
.bfs-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 0.4em;
  border-radius: var(--radius-full);
  background: var(--border-hard);
}
.bfs-warmup { background: var(--accent-hot); }
.bfs-work   { background: var(--signal-ok); }
.bfs-core   { background: var(--accent-core); }
.bfs-flex   { background: var(--accent-flex); }
.briefing-flow-glossary {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.briefing-flow-glossary b { color: var(--color-text); font-weight: 700; }
/* End V4.0 Phase H Hotfix 1 ------------------------------------*/

/* ============================================================
   V4.0 Phase I, Content views polish
   Apply reusable Phase A primitives across the 6 non-programs
   views: catalog, skills, flexibility, nutrition, science, equipment.
   Same wins the programs view got (compact H1, tap targets, sticky
   filter bar on catalog, non-italic form cues on skills).
   ============================================================ */

/* Video tutorial buttons (catalog + skills) bumped to 44 min height */
.video-btn,
.video-btn--direct,
.video-btn--search {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Muscle filter tabs bumped to 44 min height */
.muscle-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sticky filter bar on catalog, below the site header. Holds search,
   difficulty, goal selects, and the 20 muscle filter tabs. User can
   scroll through 176 cards without losing their filter context.
   Full-bleed via --container-pad, NOT a raw space token: the parent
   container's padding shrinks below 640px, and a hardcoded --space-6
   bleed overflowed the viewport by 8px per side on phones. */
.catalog-filter-sticky {
  position: sticky;
  top: 61px;
  z-index: 85;
  background: var(--color-bg);
  padding: var(--space-3) 0;
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.catalog-filter-sticky .catalog-controls {
  margin-bottom: var(--space-3);
}
.catalog-filter-sticky .muscle-tabs {
  margin-bottom: 0;
}

/* Skills view form cues: drop italic, match Phase A exercise-note-cell style */
#view-skills .skill-step-notes,
#view-skills .skill-progression-phase em,
#view-skills .skill-progression-phase i,
.skill-step-notes,
.skill-card em,
.skill-card i {
  font-style: normal;
  opacity: 0.82;
}

/* ARIA helper: active muscle tab gets a visible aria-current indicator */
.muscle-tab[aria-current="true"] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* End V4.0 Phase I ---------------------------------------------*/

/* ============================================================
   V4.1 PHASE 3: CHROME POLISH
   Hero strip, button system, day-card upgrade, grain overlay,
   custom scrollbar, view transitions, keyframes.
   Source order: this block is at the end of the file so its
   selectors override the original day-card / button rules.
   ============================================================ */

/* ── Keyframes ── */
@keyframes ember-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 107, 26, 0); }
}
@keyframes glow-breathe {
  0%, 100% { filter: brightness(1.00) saturate(1.00); }
  50%      { filter: brightness(1.06) saturate(1.08); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Background grain overlay ──
   Fixed full-screen subtle noise. Inline data-URI from --grain-url. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: var(--grain-url);
  opacity: 0.035;
  mix-blend-mode: overlay;
}
[data-theme='light'] body::before { mix-blend-mode: multiply; opacity: 0.045; }
:root:not([data-theme='dark']) body::before { mix-blend-mode: multiply; opacity: 0.045; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body::before { mix-blend-mode: overlay; opacity: 0.035; }
}

/* ── Custom scrollbar ── */
html { scrollbar-color: var(--border-hard) var(--bg-base); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--border-hard);
  border: 2px solid var(--bg-base);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── View transitions for day swap ── */
@supports (view-transition-name: root) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: var(--ease-standard);
  }
}

/* ── Programs hero strip ── */
.programs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--space-6) 0 var(--space-8);
  padding: clamp(var(--space-8), 4vw, var(--space-16)) 0;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 80% 60% at 15% 40%, color-mix(in srgb, var(--accent-hot) 22%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 90%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-sunken) 100%);
  border: 1px solid var(--border-hard);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 20px 60px -20px rgba(0,0,0,0.45);
  animation: glow-breathe 8s ease-in-out infinite;
}
.programs-hero[data-type='rest'] {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--signal-info) 12%, transparent), transparent 70%),
    linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-sunken) 100%);
}
/* Per-profile hero art. Two problems a photo background creates that a
   flat gradient never had: (1) `cover` crops proportionally more off the
   top/bottom as the box gets wider relative to its (content-driven, not
   image-driven) height, so on wide desktops the subject's head can crop
   clean off if the anchor is vertically centered, and (2) text legibility
   now depends on what happens to be behind it, which varies by profile and
   viewport. Fixed with: a taller box on wide screens (min-height, so cover
   has less to crop), a near-top vertical anchor (keeps heads in frame,
   sacrifices dead space at the bottom instead), a full-width base scrim
   plus a stronger left-side fade for the name/day text, and matching
   text-shadow + opaque glass stat cards as a second line of defense that
   doesn't depend on getting the gradient math perfect for every photo. */
.programs-hero[data-profile='bruce'],
.programs-hero[data-profile='rocky'],
.programs-hero[data-profile='you'],
.programs-hero[data-profile='gf'] {
  --program-hero-position-x: 72%;
  --program-hero-position-y: 18%;
  background-position: var(--program-hero-position-x) var(--program-hero-position-y);
  background-size: cover;
  background-repeat: no-repeat;
  /* Dark artwork keeps a local dark palette. Light mode replaces both the
     art and these tokens below so the hero belongs to the active theme. */
  --bg-sunken:     #0A0907;
  --ink-primary:   #F5F4F1;
  --ink-secondary: #D1CEC7;
  --ink-muted:     #B9B4AA;
  --accent:        #FF6B1A;
  --accent-hot:    #FF8A3D;
  --accent-deep:   #B8430A;
  --accent-glow:   rgba(255, 107, 26, 0.40);
  --border-hard:   #3A3A42;
}
@media (min-width: 1024px) {
  .programs-hero[data-profile='bruce'],
  .programs-hero[data-profile='rocky'],
  .programs-hero[data-profile='you'],
  .programs-hero[data-profile='gf'] {
    min-height: clamp(420px, 30vw, 640px);
  }
}
.programs-hero[data-profile='bruce'] {
  background-image:
    linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
    linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
    url('../images/heroes/bruce-dark-aligned.webp?v=2690');
}
.programs-hero[data-profile='rocky'] {
  background-image:
    linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
    linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
    url('../images/heroes/rocky.webp?v=2690');
}
.programs-hero[data-profile='you'] {
  background-image:
    linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
    linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
    url('../images/heroes/you.webp?v=2690');
}
.programs-hero[data-profile='gf'] {
  background-image:
    linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
    linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
    url('../images/heroes/gf.webp?v=2690');
}

[data-theme='light'] .programs-hero[data-profile='bruce'],
[data-theme='light'] .programs-hero[data-profile='rocky'],
[data-theme='light'] .programs-hero[data-profile='you'],
[data-theme='light'] .programs-hero[data-profile='gf'] {
  --bg-sunken:     #FBF7F0;
  --ink-primary:   #171513;
  --ink-secondary: #403A35;
  --ink-muted:     #6B625A;
  --accent:        #C84B12;
  --accent-hot:    #E96019;
  --accent-deep:   #9D370B;
  --accent-glow:   rgba(200, 75, 18, 0.20);
  --border-hard:   #D4C9BC;
}

[data-theme='light'] .programs-hero[data-profile='bruce'] {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
    linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
    url('../images/heroes/bruce-light-aligned-final.webp?v=2690');
}
[data-theme='light'] .programs-hero[data-profile='rocky'] {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
    linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
    url('../images/heroes/rocky-light.webp?v=2690');
}
[data-theme='light'] .programs-hero[data-profile='you'] {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
    linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
    url('../images/heroes/you-light.webp?v=2690');
}
[data-theme='light'] .programs-hero[data-profile='gf'] {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
    linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
    url('../images/heroes/gf-light.webp?v=2690');
}
@media (max-width: 768px) {
  .programs-hero[data-profile='bruce'],
  .programs-hero[data-profile='rocky'],
  .programs-hero[data-profile='you'],
  .programs-hero[data-profile='gf'] {
    --program-hero-position-x: 80%;
    --program-hero-position-y: 12%;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  [data-theme='light'] .programs-hero[data-profile='bruce'] {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
      linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
      url('../images/heroes/bruce-light-aligned-final.webp?v=2690');
  }
}
@media (max-width: 600px) {
  .programs-hero[data-profile='bruce'] {
    background-image:
      linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
      linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
      url('../images/heroes/bruce-dark-mobile-aligned.webp?v=2690');
  }
  .programs-hero[data-profile='rocky'] {
    background-image:
      linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
      linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
      url('../images/heroes/rocky-mobile.webp?v=2690');
  }
  .programs-hero[data-profile='you'] {
    background-image:
      linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
      linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
      url('../images/heroes/you-mobile.webp?v=2690');
  }
  .programs-hero[data-profile='gf'] {
    background-image:
      linear-gradient(180deg, rgba(8,7,6,0.1) 0%, rgba(8,7,6,0.4) 100%),
      linear-gradient(100deg, var(--bg-sunken) 0%, color-mix(in srgb, var(--bg-sunken) 84%, transparent) 34%, transparent 64%),
      url('../images/heroes/gf-mobile.webp?v=2690');
  }

  [data-theme='light'] .programs-hero[data-profile='bruce'] {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
      linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
      url('../images/heroes/bruce-light-mobile-final.webp?v=2690');
  }
  [data-theme='light'] .programs-hero[data-profile='rocky'] {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
      linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
      url('../images/heroes/rocky-light-mobile.webp?v=2690');
  }
  [data-theme='light'] .programs-hero[data-profile='you'] {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
      linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
      url('../images/heroes/you-light-mobile.webp?v=2690');
  }
  [data-theme='light'] .programs-hero[data-profile='gf'] {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(239,229,216,0.10) 100%),
      linear-gradient(100deg, rgba(251,247,240,0.96) 0%, rgba(251,247,240,0.72) 34%, transparent 64%),
      url('../images/heroes/gf-light-mobile.webp?v=2690');
  }
}
.programs-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
[data-theme='light'] .programs-hero[data-profile] .programs-hero__vignette {
  background: radial-gradient(ellipse at center, transparent 48%, rgba(116,82,45,0.10) 100%);
}
.programs-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-10);
  padding-inline: var(--space-6);
  animation: hero-rise 480ms var(--ease-standard) both;
}
.programs-hero__inner--rest {
  grid-template-columns: 1fr;
}
@media (max-width: 768px) {
  .programs-hero__inner { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
}
.programs-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.9);
}
.programs-hero__name {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-primary);
  background: linear-gradient(180deg, var(--ink-primary) 0%, var(--ink-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 36px var(--accent-glow)) drop-shadow(0 6px 22px rgba(0,0,0,0.55));
  margin: 0;
}
.programs-hero__day {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-top: var(--space-3);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.9);
}
.programs-hero__day span { color: var(--accent); }
.programs-hero__day-sep {
  display: inline-block;
  margin: 0 0.4em;
  color: var(--ink-muted);
  font-weight: 400;
  transform: translateY(-0.05em);
}
.programs-hero__stats {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .programs-hero__stats { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}
.programs-hero__stat {
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--bg-sunken) 68%, transparent);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  min-width: 7rem;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 28px -10px rgba(0,0,0,0.6);
}
.programs-hero__stat-value {
  display: block;
  font-family: var(--font-poster);
  font-size: var(--text-3xl);
  color: var(--ink-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.programs-hero__stat-unit {
  font-size: 0.5em;
  color: var(--ink-muted);
  margin-left: 0.1em;
}
.programs-hero__stat-label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

[data-theme='light'] .programs-hero[data-profile] .programs-hero__eyebrow,
[data-theme='light'] .programs-hero[data-profile] .programs-hero__day {
  text-shadow: 0 1px 0 rgba(255,255,255,0.82), 0 3px 12px rgba(102,70,41,0.14);
}
[data-theme='light'] .programs-hero[data-profile] .programs-hero__name {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.72))
    drop-shadow(0 8px 18px rgba(102,70,41,0.14));
}
[data-theme='light'] .programs-hero[data-profile] .programs-hero__stat {
  background: rgba(255,255,255,0.72);
  border-color: rgba(91,69,48,0.18);
  border-left-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.84),
    0 12px 30px -18px rgba(86,59,35,0.34);
}
[data-theme='light'] .programs-hero[data-profile] .programs-hero__stat-value,
[data-theme='light'] .programs-hero[data-profile] .programs-hero__stat-label {
  text-shadow: none;
}

/* ── Button system ── */
.btn-primary,
.btn-ghost,
.btn-icon,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background 180ms var(--ease-standard),
    border-color 180ms var(--ease-standard),
    box-shadow 220ms var(--ease-standard),
    transform 120ms var(--ease-micro),
    color 180ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--ink-on-accent);
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  box-shadow:
    0 0 0 1px var(--accent-hot),
    0 6px 22px -6px var(--accent-glow),
    0 0 28px var(--accent-glow);
  transform: translateY(-1px);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg-base), 0 0 0 5px var(--accent);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-primary);
  border-color: var(--border-hard);
}
.btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 20px -4px var(--accent-glow);
  transform: translateY(-1px);
}
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg-base), 0 0 0 5px var(--accent);
}
.btn-ghost:active { background: var(--bg-sunken); transform: translateY(0); }

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--bg-raised);
  color: var(--ink-secondary);
  border-color: var(--border-hard);
  border-radius: var(--radius-md);
}
.btn-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 0 18px -4px var(--accent-glow);
  transform: translateY(-1px);
}
.btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg-base), 0 0 0 5px var(--accent);
}
.btn-icon:active { transform: scale(0.94); }

.btn-danger {
  background: var(--signal-alert);
  color: var(--ink-on-accent);
  border-color: var(--signal-alert);
}
.btn-danger:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px -6px rgba(239, 90, 63, 0.5);
}
.btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg-base), 0 0 0 5px var(--signal-alert);
}

/* ── Day-card upgrade (overrides the original .day-card block) ── */
.day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 8px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 200ms var(--ease-standard),
    background 200ms var(--ease-standard),
    transform 200ms var(--ease-standard),
    box-shadow 260ms var(--ease-standard);
}
.day-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 4px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--dot-rest);
  transition:
    box-shadow 220ms var(--ease-standard),
    filter 220ms var(--ease-standard),
    background 220ms var(--ease-standard);
}
.day-card[data-type='push']::before     { background: var(--dot-push); }
.day-card[data-type='pull']::before     { background: var(--dot-pull); }
.day-card[data-type='upper']::before    { background: var(--dot-upper); }
.day-card[data-type='lower']::before    { background: var(--dot-lower); }
.day-card[data-type='fullbody']::before { background: var(--dot-fullbody); }
.day-card[data-type='hiit']::before     { background: var(--dot-hiit); }
.day-card[data-type='rest']::before     { background: var(--dot-rest); }

.day-card:hover {
  border-color: var(--border-hard);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px var(--accent-glow), 0 0 0 1px var(--border-hard);
}
.day-card:hover::before { filter: brightness(1.2); box-shadow: 0 0 16px currentColor; }

.day-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)) 100%);
}
.day-card.active::before {
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  box-shadow: 0 0 18px var(--accent-glow);
}
.day-card.rest { opacity: 0.55; cursor: default; }
.day-card.rest:hover { transform: none; box-shadow: none; border-color: var(--border-soft); }

/* Hide the legacy 8px round dot since the rail now communicates day type */
.day-card .day-type-dot { display: none; }

/* Long day titles ("Roadwork + Forearms & Grip") end on a clean 2-line clamp
   instead of clipping mid-word against the card edge. */
.day-card .day-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* "Today" pill: small ember badge + pulse */
.day-card.is-today::after {
  content: "TODAY";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-on-accent);
  background: var(--accent);
  border-radius: var(--radius-full);
  animation: ember-pulse 2.4s ease-in-out infinite;
}
/* Hide the existing tiny dot pip since we now have the TODAY pill */
.day-card.is-today .day-card-today-pip { display: none; }

.weekly-carousel {
  position: relative;
}
.weekly-carousel-arrow {
  display: none;
}

/* ── Print: hide hero, grain, and decorative animations ── */
@media print {
  .programs-hero,
  body::before {
    display: none !important;
  }
  .day-card::before { background: #888 !important; box-shadow: none !important; }
  .day-card.is-today::after { display: none !important; }
}
/* End V4.1 Phase 3 -------------------------------------------------*/

/* ============================================================
   V4.1 PHASE 4: EXERCISE CARDS
   article.ex-card replaces tr.program-ex-row inside .ex-list.
   Gated by the FEATURE_EX_CARDS flag in js/app.js. The 3 primary
   render sites (JF work, JF core, Anita work) flip via the flag;
   secondary sites (skill, rehab, cooldown, yoga, warmup) stay
   tabular because they have no widgets.

   Critical: cards keep .program-ex-row as a secondary class so
   .closest('.program-ex-row') in progressionPicker / sessionLog
   still resolves, and the print stylesheet still matches.
   ============================================================ */

.ex-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ── V4.5 Compact exercise cards: collapsed/expanded pattern ── */
.ex-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: visible;
  transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.ex-card:hover {
  border-color: var(--border-hard);
  box-shadow: var(--shadow-sm);
}

/* Summary row: always visible, clickable */
.ex-card__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-left: 4px solid var(--border-hard);
  transition: border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
  /* user-select left default so exercise names are copyable. Dragging to select
     text won't fire the tap-to-expand handler in modern browsers. */
}
/* Numeric index chips are decorative, don't let them select */
.ex-card__index { user-select: none; }

/* ── Exercise thumbnail (Phase 9) ── */
/* 80x80 square, gold radial halo under transparent cutout to mimic rim light */
.ex-card__thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background:
    radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--color-gold) 11%, transparent) 0%,
      color-mix(in srgb, var(--color-gold) 4%, transparent) 45%,
      transparent 80%),
    var(--color-surface-2);
  overflow: hidden;
  transition: transform 200ms var(--ease-standard), border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
  user-select: none;
}
.ex-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
  display: block;
}
/* Lift on hover, scale down on active, skip if user prefers reduced motion */
.ex-card__summary:hover .ex-card__thumb {
  transform: scale(1.04);
  border-color: color-mix(in srgb, var(--color-gold) 45%, var(--color-border));
  background:
    radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--color-gold) 18%, transparent) 0%,
      color-mix(in srgb, var(--color-gold) 6%, transparent) 45%,
      transparent 80%),
    var(--color-surface-2);
}
.ex-card__summary:active .ex-card__thumb { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .ex-card__thumb { transition: none; }
  .ex-card__summary:hover .ex-card__thumb,
  .ex-card__summary:active .ex-card__thumb { transform: none; }
}

/* Glyph fallback, two letters in display font. Sized to fit two chars cleanly
   inside the 80px tile with the gold halo around. */
.ex-card__thumb--glyph {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-gold) 70%, var(--color-text));
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

/* Narrow-viewport thumbnail sizing lives with the mobile grid rewrite
   further down (the "Mobile exercise-row redesign" block), since below
   640px .ex-card__summary switches from a flex row to a grid and the
   thumbnail's size is part of that same layout decision. */
.ex-card__summary:hover {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

.ex-card__index {
  font-family: var(--font-poster);
  font-size: var(--text-xl);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
  flex-shrink: 0;
  line-height: 1;
}

.ex-card__info {
  flex: 1;
  min-width: 0;
}
.ex-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ex-card__title-link a,
.ex-card__title-link {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-primary);
  line-height: 1.2;
  text-decoration: none;
  transition: color 180ms var(--ease-standard);
}
.ex-card__title-link a:hover { color: var(--accent); }

.ex-card__prescription {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.ex-card__rx {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ex-card__rest-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-secondary);
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 120ms var(--ease-standard), border-color 200ms, color 200ms, background 200ms;
}
/* Pop on hover, matching the in-between rest-divider pill */
.ex-card__rest-pill:hover {
  transform: scale(1.06);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ex-card__rest-pill:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .ex-card__rest-pill { transition: border-color 200ms, color 200ms; }
  .ex-card__rest-pill:hover, .ex-card__rest-pill:active { transform: none; }
}
.ex-card__rest-pill .rest-value-small {
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  display: inline;
}
.ex-card__rir-inline {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  white-space: nowrap;
  cursor: help;
}

/* Log widget in summary row: popover form */
.ex-card__log-wrap {
  flex-shrink: 0;
  position: relative;
}
.ex-card__log-wrap:has(.session-log-widget.expanded) {
  z-index: 121;
}
.ex-card__log-wrap .session-log-widget {
  margin-top: 0;
}
.ex-card__log-wrap .session-log-last {
  display: none;
}
.ex-card__log-wrap .session-log-form {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 100;
  width: 600px;
  padding: var(--space-4);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.3);
  border-color: color-mix(in srgb, var(--color-border) 85%, var(--color-primary));
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-2) 80%, var(--color-surface)), var(--color-surface));
}
/* Narrow screens: the old rule centered the form on its positioned ancestor
   (the log wrap at the card's RIGHT edge), so "left: 50%" pushed most of the
   form offscreen and clipped the whole EFFORT column. Fixed bottom-sheet
   instead, anchored to the viewport, for the entire narrow band. */
@media (max-width: 660px) {
  .ex-card__log-wrap .session-log-form {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-height: 72vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .ex-card__log-wrap .session-log-heading {
    position: sticky;
    top: calc(-1 * var(--space-4));
    z-index: 3;
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-surface));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 72%, transparent);
  }
  /* The desktop logger uses fixed grid columns for perfect table alignment.
     On phones those columns exceed the sheet width, so each set becomes a
     compact wrapping row with its labels attached to the actual controls. */
  .ex-card__log-wrap .set-rows-header {
    display: none;
  }
  .ex-card__log-wrap .set-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  }
  .ex-card__log-wrap .set-row:last-child {
    border-bottom: 0;
  }
  .ex-card__log-wrap .set-field--num {
    order: 1;
    flex: 0 0 34px;
  }
  .ex-card__log-wrap .set-field--load {
    order: 2;
  }
  .ex-card__log-wrap .set-field--metric {
    order: 3;
  }
  .ex-card__log-wrap .set-field--load,
  .ex-card__log-wrap .set-field--metric {
    flex: 1 1 86px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .ex-card__log-wrap .set-remove {
    order: 4;
    flex: 0 0 24px;
    margin-bottom: 9px;
  }
  .ex-card__log-wrap .set-side {
    order: 5;
  }
  .ex-card__log-wrap .set-field--prev {
    order: 6;
  }
  .ex-card__log-wrap .set-field--effort {
    order: 7;
    flex: 1 1 120px;
    justify-content: flex-start;
    gap: var(--space-2);
  }
  .ex-card__log-wrap .set-field--load > .sr-only,
  .ex-card__log-wrap .set-field--metric > .sr-only,
  .ex-card__log-wrap .set-field--effort > .sr-only {
    position: static !important;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
  }
  .ex-card__log-wrap .set-field--effort .effort-scale {
    flex-direction: row;
    gap: var(--space-2);
  }
  .ex-card__log-wrap .stepper {
    width: 100%;
  }
  .ex-card__log-wrap .stepper .set-input {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    min-height: 42px;
    font-size: var(--text-lg);
  }
  .ex-card__log-wrap .stepper-btn {
    width: 36px;
    flex: 0 0 36px;
    min-height: 42px;
  }
}
@media (max-width: 360px) {
  .ex-card__log-wrap .stepper-btn {
    width: 30px;
    flex-basis: 30px;
  }
  .ex-card__log-wrap .stepper .set-input {
    font-size: var(--text-base);
  }
}
.ex-card__log-wrap .session-log-form::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* Chevron */
.ex-card__chevron {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 200ms var(--ease-standard);
  display: flex;
  align-items: center;
}

/* Detail area: hidden by default */
.ex-card__detail {
  display: none;
  padding: var(--space-3) var(--space-4) var(--space-4);
  padding-left: calc(var(--space-4) + 4px + 2ch + var(--space-3) + var(--space-3));
  border-top: 1px dashed var(--border-soft);
}
.ex-card__notes {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  line-height: 1.5;
  font-style: italic;
}

/* Expanded state */
.ex-card.is-expanded .ex-card__detail {
  display: block;
}
.ex-card.is-expanded .ex-card__chevron {
  transform: rotate(180deg);
}

/* ============ MUSCLE DIAGRAM (in expanded ex-card) ============ */
.muscle-diagram {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.muscle-diagram__legend {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: 0.05em;
}
.muscle-diagram__chip {
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-weight: 600;
  color: #f5f5f5;
}
.muscle-diagram__chip--primary { background: var(--accent, #e94560); }
.muscle-diagram__chip--secondary { background: color-mix(in srgb, var(--accent) 45%, #f5c451); color: #1a1a2e; }
.muscle-diagram__chip--stabilizer { background: var(--accent-stabilizer); color: var(--ink-on-stabilizer); }

.muscle-diagram__list {
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.75rem;
  row-gap: 0.4rem;
  font-size: var(--text-sm, 0.85rem);
}
.muscle-diagram__list-term {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  align-self: center;
}
.muscle-diagram__list-term--primary { color: var(--accent, #e94560); }
.muscle-diagram__list-term--secondary { color: color-mix(in srgb, var(--accent) 55%, #f5c451); }
.muscle-diagram__list-term--stabilizer { color: var(--accent-stabilizer); }
.muscle-diagram__list-def {
  margin: 0;
  color: var(--ink-secondary, #cfd2dd);
  line-height: 1.45;
}

.muscle-diagram-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: block;
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 0 420px;
}
.muscle-diagram-container svg {
  width: 100%;
  height: auto;
  display: block;
}
.muscle-diagram-container svg .body {
  fill: #2a2d44;
}
.muscle-diagram-container svg .muscle {
  fill: #4a4f6e;
  stroke: #1f2238;
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill 250ms ease;
}
.muscle-diagram-container svg .muscle.muscle-primary { fill: var(--accent, #e94560); }
.muscle-diagram-container svg .muscle.muscle-secondary { fill: color-mix(in srgb, var(--accent) 45%, #f5c451); }
.muscle-diagram-container svg .muscle.muscle-stabilizer { fill: var(--accent-stabilizer); }
.ex-card.is-expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.ex-card.is-expanded .ex-card__summary {
  border-left-color: var(--accent);
}
.ex-card.is-expanded .ex-card__index {
  color: var(--accent);
}

/* Substitution / unresolved state */
.ex-card.is-substituted .ex-card__summary {
  border-left-color: var(--signal-info);
}
.ex-card.is-unresolved {
  opacity: 0.85;
}
.ex-card.is-unresolved .ex-card__summary {
  border-left-color: var(--signal-alert);
}

/* ══════════════════════════════════════════════════════════════════
   Mobile exercise-row redesign (2026-07-21).
   The desktop layout is one flex row: index, thumb, info (name +
   prescription, stacked internally), log button, chevron — and it works
   because there's enough width for the name to sit on one line beside the
   thumb even with the info column already stacking name-over-prescription.
   Squeezed onto a ~390px screen, that same single row leaves ~140px for
   info once thumb + log button + chevron are subtracted, so even an
   ordinary name like "Barbell Back Squat" wrapped 2-3 lines.
   Fix: below 640px, unwrap .ex-card__info via `display: contents` so its
   two children (name, prescription) become direct flex items of
   .ex-card__summary alongside index/thumb/log/chevron, then reorder with
   `order` into 2 rows: index + thumb + name + chevron on row 1 (name gets
   the full remaining row width, no longer sharing it with the log button),
   prescription pills full-width on row 2, Log button right-aligned below
   that. No DOM/JS changes, this is pure CSS re-placement of the same
   elements (display:contents is safe here: .ex-card__info carries no
   ARIA role/label of its own, just layout).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ex-card__summary {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: var(--space-3);
  }
  .ex-card__index {
    order: 0;
    font-size: var(--text-base);
  }
  .ex-card__thumb {
    order: 1;
    width: 60px;
    height: 60px;
  }
  .ex-card__thumb--glyph { font-size: 20px; }
  .ex-card__info { display: contents; }
  .ex-card__name {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
  }
  .ex-card__chevron {
    order: 3;
    margin-left: auto;
    align-self: flex-start;
  }
  .ex-card__prescription {
    order: 4;
    flex: 1 1 100%;
    margin-top: 0;
  }
  .ex-card__log-wrap {
    order: 5;
    margin-left: auto;
  }
}
@media (max-width: 480px) {
  .ex-card__summary {
    padding: var(--space-2) var(--space-3);
  }
  .ex-card__detail {
    padding: var(--space-2) var(--space-3) var(--space-3);
    padding-left: var(--space-3);
  }
}
@media (min-width: 481px) and (max-width: 640px) {
  .ex-card__detail { padding-left: var(--space-4); }
}

/* ── Rest divider (replaces tr.rest-row in card mode) ── */
.rest-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0;
  padding: 0 var(--space-2);
}
.rest-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hard), transparent);
}
.rest-divider__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--bg-base);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 4px var(--bg-elevated), 0 0 16px var(--accent-glow);
  text-transform: uppercase;
  white-space: nowrap;
}
.rest-divider__icon { font-size: 0.9rem; }
.rest-divider__label { color: var(--ink-muted); font-weight: 600; }
.rest-divider__value { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* ── Print: cards ── */
@media print {
  .ex-list { display: block !important; }
  .ex-card {
    display: block !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    padding: 6pt !important;
    margin: 0 0 4pt 0 !important;
  }
  .ex-card__summary { border-left-color: #000 !important; cursor: default !important; }
  .ex-card__index { font-family: serif !important; color: #000 !important; }
  .ex-card__title-link a { color: #000 !important; }
  .ex-card__rx { font-family: serif !important; color: #000 !important; }
  .ex-card__rest-pill, .ex-card__rir-inline {
    border-color: #000 !important;
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .ex-card__chevron { display: none !important; }
  .ex-card__detail { display: block !important; }
  .ex-card__notes { color: #333 !important; font-style: italic !important; }
  .rest-divider { display: block !important; text-align: center !important; margin: 4pt 0 !important; }
  .rest-divider__line { display: none !important; }
  .rest-divider__pill {
    border-color: #000 !important;
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}
/* End V4.1 Phase 4 -------------------------------------------------*/

/* ============================================================
   V4.0 Phase II, Responsive content tables
   Nutrition and Science views have dense 2 to 6 column tables
   (meal timing, supplements, volume landmarks, recovery timelines,
   rep-range guidance). At desktop width they look fine. Below 768
   the table-layout:fixed wrapper horizontally scrolls and the user
   has to swipe sideways to see columns.
   This block converts those specific tables to a stacked card-per-row
   layout below 768px, same pattern as the Phase D programs rows
   but scoped to #view-nutrition and #view-science so V4.1 card
   layouts elsewhere stay untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* Nutrition + Science tables become card stacks */
  #view-nutrition .exercise-table-wrap,
  #view-science .exercise-table-wrap {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  #view-nutrition .exercise-table,
  #view-science .science-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border: 0 !important;
    background: transparent !important;
  }
  #view-nutrition .exercise-table colgroup,
  #view-nutrition .exercise-table col,
  #view-science .science-table colgroup,
  #view-science .science-table col {
    display: none !important;
  }
  /* Keep thead visible for nutrition (small row count) but compact it */
  #view-nutrition .exercise-table thead,
  #view-science .science-table thead {
    display: none !important;
  }
  #view-nutrition .exercise-table tbody,
  #view-science .science-table tbody {
    display: block !important;
    width: 100% !important;
  }
  #view-nutrition .exercise-table tr,
  #view-science .science-table tr {
    display: block !important;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  #view-nutrition .exercise-table td,
  #view-science .science-table td {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-1) 0 !important;
    border: 0 !important;
    text-align: left !important;
    font-size: var(--text-sm);
  }
  #view-nutrition .exercise-table td::before,
  #view-science .science-table td::before {
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--color-text-muted);
    flex: 0 0 auto;
    min-width: 90px;
  }
  /* First td is usually the "label" column, make it the card title */
  #view-nutrition .exercise-table td:first-child,
  #view-science .science-table td:first-child {
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-divider) !important;
    padding-bottom: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
    display: block !important;
  }
  #view-nutrition .exercise-table td:first-child::before,
  #view-science .science-table td:first-child::before {
    display: none;
  }
}
/* End V4.0 Phase II -----------------------------------------------*/

/* ============================================================
   V4.2 Deploy 1, Usage audit high-impact fixes
   H3: clamp catalog card form cues to 3 lines so rows do not
   stretch to fit the longest card. Cards become more uniform and
   ~240px of empty space per short card goes away.
   ============================================================ */

.exercise-card .card-notes {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* End V4.2 Deploy 1 -----------------------------------------------*/

/* ============================================================
   V4.2 Deploy 2, Medium impact usage audit fixes
   M1 clear-filters button in empty state
   M2 non-italic form cues on catalog + V4.1 cards
   M3 filter toast
   M4 logo-as-button styling
   M5 is JS-only, no CSS needed
   ============================================================ */

/* M1: clear-filters button inside the empty state */
.catalog-empty-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.catalog-empty-reset:hover {
  background: var(--color-primary-hover, var(--color-primary));
  transform: translateY(-1px);
}

/* M2: non-italic notes on catalog cards + V4.1 ex-card notes */
.exercise-card .card-notes,
.ex-card__notes,
#view-skills .skill-card em,
#view-skills .skill-card i {
  font-style: normal;
  opacity: 0.82;
}

/* M3: filter toast, transient, top-center, non-blocking */
.filter-toast {
  position: fixed;
  top: calc(61px + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 300;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  max-width: 90vw;
  text-align: center;
}
.filter-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* M4: logo button reset so it looks exactly like the old div */
button.logo-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
button.logo-btn:hover {
  transform: scale(1.02);
}
button.logo-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* End V4.2 Deploy 2 -----------------------------------------------*/

/* ============================================================
   V4.2 Deploy 3, Low-impact polish
   L1 slash-key search shortcut (JS only)
   L2 equipment vocabulary (JS only)
   L3 theme toggle state re-sync (JS only)
   L4 hashchange navigation (JS only)
   L5 catalog card hover accent
   L6 clickable card body
   ============================================================ */

/* L5 + L6: card hover state + clickable body affordance */
.exercise-card {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.exercise-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md);
  transform: translateY(-1px);
}
.exercise-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Card body is a click target now so stop tiny interactive elements
   inside the card (badges, progression pills, equipment chips) from
   inheriting the pointer cursor when they are non-interactive. */
.exercise-card .badge,
.exercise-card .muscle-label,
.exercise-card .prog-step-pill,
.exercise-card .eq-chip {
  cursor: default;
}

/* End V4.2 Deploy 3 -----------------------------------------------*/

/* ============================================================
   V4.2 Deploy 4, Critical audit misses from the usage audit
   Fixes four things I missed on the visual pass:
   D4-1: sticky filter bar was 184px, 25% of a 728 viewport.
         Combined with site header: 245px, 34%. Muscle tabs wrapped
         into 2-3 rows on desktop. Now a single horizontal scroll
         strip, target ~80px for the filter bar.
   D4-2: equipment panel is position static so it scrolls away when
         the user starts browsing. Hide it entirely on catalog view
         (body.in-catalog) to reclaim 69 vertical pixels. Users can
         still change kit from any other view or the briefing drawer.
   D4-3: Watch Tutorial button sat at different Y inside cards in
         the same row because content length varied. Make the card
         a flex column and pin video-btn to the bottom via margin-top.
   D4-4: zero px gap between PROGRESSION PATH details and the Watch
         Tutorial button. Add breathing room after details + eq-chips.
   ============================================================ */

/* Deploy 5: equipment panel moves into .catalog-filter-sticky at
   runtime when the user is on catalog. Default state is collapsed
   (display none). User clicks the Kit N/8 button in the controls
   row to toggle it. This keeps the default sticky chrome around
   21% of viewport instead of 34%. Inline margin-top on the
   original wrapper is overridden below. */
.catalog-filter-sticky > .container--wide {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.catalog-filter-sticky.kit-expanded > .container--wide {
  display: block !important;
  margin-bottom: 6px !important;
  padding: 4px 0 !important;
  animation: kitSlideDown 180ms ease-out;
}
@keyframes kitSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.catalog-filter-sticky .equipment-panel {
  padding: 6px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.catalog-filter-sticky .equipment-panel::-webkit-scrollbar {
  height: 4px;
}
.catalog-filter-sticky .equipment-panel h3 {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.catalog-filter-sticky .equipment-panel .equipment-toggles {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  flex: 1 1 auto;
  padding: 0;
}
.catalog-filter-sticky .equipment-panel .eq-toggle {
  min-height: 32px;
  height: 32px;
  padding: 4px 10px;
  font-size: 11px;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.catalog-filter-sticky .equipment-panel .eq-toggle .eq-icon {
  font-size: 13px;
}

/* Deploy 5b: muscle picker dropdown replaces the horizontal scroll
   strip of 20 tabs. Grouped grid of chips opens on click. */
.catalog-muscle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  white-space: nowrap;
  flex: 0 0 auto;
}
.catalog-muscle-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-dynamic);
}
.catalog-muscle-btn.open {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary-active);
}
.catalog-muscle-btn-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.catalog-muscle-btn.open .catalog-muscle-btn-label {
  color: var(--color-primary-active);
  opacity: 0.7;
}
.catalog-muscle-btn-value {
  font-weight: 700;
}
.catalog-muscle-btn-caret {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 160ms;
}
.catalog-muscle-btn.open .catalog-muscle-btn-caret {
  transform: rotate(180deg);
  color: var(--color-primary-active);
}

/* The dropdown panel itself */
.catalog-muscle-panel {
  display: none;
  margin-top: 8px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: kitSlideDown 180ms ease-out;
}
.catalog-muscle-panel.open {
  display: block;
}
.catalog-equip-panel {
  padding: var(--space-4);
}
.catalog-equipment-head {
  margin-bottom: var(--space-3);
}
.catalog-equipment-head h3 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.catalog-equipment-toggles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.catalog-equipment-toggles .catalog-equip-option {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  padding-inline: var(--space-3);
}
.catalog-equipment-toggles .catalog-equip-option .eq-icon {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  color: currentColor;
  font-size: 14px;
}
.muscle-pick-group {
  margin-bottom: var(--space-3);
}
.muscle-pick-group:last-child {
  margin-bottom: 0;
}
.muscle-pick-group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.muscle-pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.muscle-pick {
  min-height: 36px;
  padding: 6px 14px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
}
.muscle-pick:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.muscle-pick.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--ink-on-accent);
}
.muscle-pick--all {
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  min-height: 44px;
}
.muscle-pick-icon {
  margin-right: 6px;
  color: var(--color-primary);
}

/* Kit pill button in the catalog controls row */
.catalog-kit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  white-space: nowrap;
  flex: 0 0 auto;
}
.catalog-kit-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-dynamic);
}
.catalog-kit-btn.active,
.catalog-filter-sticky.kit-expanded .catalog-kit-btn {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary-active);
}
.catalog-kit-btn-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.catalog-kit-btn.active .catalog-kit-btn-label {
  color: var(--color-primary-active);
  opacity: 0.7;
}
.catalog-kit-btn svg {
  flex-shrink: 0;
}
.catalog-kit-btn .kit-count {
  font-weight: 700;
  font-size: var(--text-sm);
}

/* D4-1: single-row muscle tab strip on desktop + tighter filter bar.
   Target combined chrome (site header + filter bar) under ~180px on a
   724 viewport (~25%) so the user gets 75+% for cards. */
.catalog-filter-sticky {
  padding-top: 6px;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.catalog-filter-sticky .catalog-controls {
  margin-bottom: 6px;
  gap: var(--space-2);
}
.catalog-filter-options {
  display: contents;
}
.catalog-filter-toggle {
  display: none;
}
.catalog-filter-sticky .search-input,
.catalog-filter-sticky .filter-select {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: var(--text-sm);
}
.catalog-filter-sticky .muscle-tabs {
  display: none !important;
}
.catalog-filter-sticky .muscle-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  gap: var(--space-2);
  padding-bottom: 4px;
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.catalog-filter-sticky .muscle-tabs::-webkit-scrollbar {
  height: 6px;
}
.catalog-filter-sticky .muscle-tabs::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
.catalog-filter-sticky .muscle-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* D4-3 + D4-4: exercise card flex column so Watch Tutorial pins
   to the bottom regardless of content length, with a gap above it.
   Important: gap is expressed as margin-BOTTOM on the preceding
   element, so margin-top: auto on the video-btn still resolves to
   "push as far down as possible". Using margin-top on the button
   would override the auto value and break flex alignment. */
.exercise-card {
  display: flex;
  flex-direction: column;
}
.exercise-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* Progression Path + Watch Tutorial are pinned together to the card
   bottom, so the "Progression Path" row lands just above the button on
   every card no matter how much description or how many chips sit above. */
.exercise-card .card-body > .card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.exercise-card .card-footer > details.progression-details {
  margin: 0;
}
.exercise-card .card-body > .eq-chips {
  margin-bottom: var(--space-3);
}
/* Cancel any legacy margin-bottom on card-notes so the flex container
   can actually give the video-btn the full leftover space. */
.exercise-card .card-body > .card-notes {
  margin-bottom: var(--space-2);
}

/* End V4.2 Deploy 4 -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 1A: Mobile tap targets + focus-visible
   Audit found 5 interactive elements below the 44px WCAG minimum:
     - .progression-details summary: 19px (catalog cards)
     - button.logo-btn: 24x24 (header)
     - .theme-toggle: 36x36 (header)
     - .filter-select: 37px (catalog filters)
     - .search-input: 41px (catalog search)
     - .catalog-muscle-btn: ~34px (catalog muscle picker)
   Also: upgrade :focus to :focus-visible on inputs/selects.
   ============================================================ */

/* Progression path summary: 19px to 44px tap target */
.progression-details summary {
  min-height: 44px;
  padding-block: var(--space-2);
}

/* Logo button: 24px to 44px tap target */
button.logo-btn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

/* Theme toggle: 36px to 44px */
.theme-toggle {
  width: 44px;
  height: 44px;
}

/* Filter selects: 37px to 44px */
.filter-select {
  min-height: 44px;
}

/* Search input: 41px to 44px */
.search-input {
  min-height: 44px;
}

/* Muscle picker button: ~34px to 44px */
.catalog-muscle-btn {
  min-height: 44px;
}

/* Focus-visible rings on elements that only had :focus */
.search-input:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.filter-select:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.catalog-muscle-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.progression-details summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.catalog-kit-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.eq-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.session-log-toggle:focus-visible,
.session-log-save:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* End V4.3 Phase 1A -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 1B: Catalog pagination
   Shows 40 cards at a time with "Show More" button and result count.
   ============================================================ */

.catalog-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}
.catalog-result-count {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.catalog-clear-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.catalog-clear-btn:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
}
.catalog-clear-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.catalog-show-more {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: var(--space-6) auto var(--space-8);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms, color 140ms, transform 140ms;
}
.catalog-show-more:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  transform: translateY(-1px);
}
.catalog-show-more:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* End V4.3 Phase 1B -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 2A: Dashboard (Home view)
   ============================================================ */

/* The equipment ownership panel ("Available Equipment") only belongs where the
   kit actually changes what is shown: the Programs view moves it into the briefing
   drawer, and the Catalog has its own browse-by-equipment picker. On every other
   view (dashboard, skills, flexibility, science, nutrition, progress, equipment)
   it is irrelevant clutter, so hide it at its home slot (a direct child of body).
   Programs and Catalog move the panel OUT of this slot, so this rule leaves their
   placements untouched. This supersedes the old per-view in-dashboard/in-catalog
   hides. */
body > .container--wide > .equipment-panel { display: none !important; }

.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0 var(--space-4);
}
.dash-hero__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.dash-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
.dash-hero__profile-switch {
  display: flex;
  gap: var(--space-2);
}
.dash-profile-btn {
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 120ms;
  min-height: 44px;
  min-width: 64px;
}
.dash-profile-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.dash-profile-btn:hover:not(.active) {
  border-color: var(--color-text-muted);
}

.dash-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
}
.dash-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dash-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  min-height: 180px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive);
}
.dash-card--workout {
  border-color: var(--color-primary);
  border-width: 1.5px;
}
.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.dash-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.dash-card__badge {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.dash-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.dash-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  gap: var(--space-2);
}
.dash-card--demo { min-height: 0; }
.dash-card--demo .dash-card__empty--demo {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0 0;
  text-align: left;
  font-style: normal;
}
.dash-card--demo .dash-card__empty--demo p { margin: 0; }
.dash-card--demo .dash-card__empty--demo .mode-btn,
.dash-card--demo .dash-card__empty--demo .dash-login-btn {
  grid-column: 1 / -1;
  justify-self: stretch;
  min-height: 44px;
  margin-top: var(--space-1);
}

@media (max-width: 600px) {
  .catalog-filter-sticky .catalog-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
  }
  .catalog-filter-sticky .search-input {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }
  .catalog-filter-toggle {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 112px;
    min-height: 46px;
    padding: 8px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
  }
  .catalog-filter-toggle[aria-expanded="true"],
  .catalog-filter-toggle.has-filters {
    border-color: var(--color-primary);
    background: var(--color-primary-highlight);
    color: var(--color-primary-active);
  }
  .catalog-filter-toggle-caret {
    flex: 0 0 auto;
    transition: transform 160ms ease;
  }
  .catalog-filter-toggle[aria-expanded="true"] .catalog-filter-toggle-caret {
    transform: rotate(180deg);
  }
  .catalog-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--ink-on-accent);
    font-size: 10px;
    line-height: 1;
  }
  .catalog-filter-count[hidden] {
    display: none;
  }
  .catalog-filter-options {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 2px;
    animation: kitSlideDown 160ms ease-out;
  }
  .catalog-filter-sticky.filters-expanded .catalog-filter-options {
    display: grid;
  }
  .catalog-filter-sticky .catalog-muscle-btn,
  .catalog-filter-sticky .filter-select-wrap {
    width: 100%;
    min-width: 0;
  }
  .catalog-filter-sticky .filter-select--bare {
    min-width: 0;
    flex: 1 1 auto;
  }
  .catalog-filter-sticky {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .catalog-filter-sticky .catalog-controls {
    margin-bottom: 0;
  }
  .catalog-filter-sticky.filters-expanded .catalog-controls {
    margin-bottom: 6px;
  }
  .catalog-equip-panel {
    padding: var(--space-4);
  }
  .catalog-equipment-toggles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-equipment-toggles .catalog-equip-option {
    min-height: 44px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .catalog-filter-toggle {
    min-width: 104px;
    padding-inline: 10px;
  }
}

.section-jump {
  display: none;
}

@media (max-width: 640px) {
  /* Long reference pages get an at-a-glance route map on phones. It remains
     horizontal so it adds one compact row instead of another tall panel. */
  .section-jump {
    display: flex;
    gap: 6px;
    width: 100%;
    margin: calc(var(--space-2) * -1) 0 var(--space-5);
    padding: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-sunken);
  }
  .section-jump::-webkit-scrollbar { display: none; }
  .section-jump__btn {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius-lg) - 3px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .section-jump__btn:active { color: var(--color-text); }
  .section-jump__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }
  /* Mobile knowledge views: turn long reference pages into calm, clearly
     grouped reading surfaces without hiding any training information. */
  #view-skills .skill-cards,
  #view-flexibility .flex-sections,
  #view-science .science-grid {
    gap: var(--space-5);
  }
  #view-skills .skill-card-header {
    padding: var(--space-4);
    gap: var(--space-3);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 68%),
      var(--color-surface-offset);
  }
  #view-skills .skill-card-body { padding: var(--space-3) var(--space-4) var(--space-4); }
  #view-skills .prog-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: var(--space-3) 0;
  }
  #view-skills .prog-step.current {
    margin-inline: calc(var(--space-2) * -1);
    padding-inline: var(--space-2);
    border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  }
  #view-skills .prog-step .step-content {
    min-width: 0;
    padding-top: 1px;
  }
  #view-skills .skill-mark-btn {
    grid-column: 2;
    justify-self: start;
    min-height: 40px;
    padding-inline: var(--space-3);
  }
  #view-skills .step-notes,
  #view-skills .step-criteria { line-height: 1.45; }

  #view-flexibility .flex-card-header {
    padding: var(--space-4);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent-flex) 9%, transparent), transparent 68%),
      var(--color-surface-offset);
  }
  #view-flexibility .flex-card-body { padding: var(--space-4); }
  #view-flexibility .phase-block {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent-flex) 3%, var(--color-surface-2));
  }
  #view-flexibility .phase-title {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-flex) 20%, var(--color-border));
    line-height: 1.45;
  }
  #view-flexibility .exercise-row { padding-block: 10px; }
  #view-flexibility .exercise-row-duration {
    padding: 3px 7px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent-flex) 11%, transparent);
    color: var(--accent-flex);
  }
  #view-flexibility .exercise-row-desc { line-height: 1.45; }

  #view-science .science-card {
    padding: var(--space-4);
    border-top: 2px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
  }
  #view-science .science-card h3 { line-height: 1.25; }
  #view-science .science-card p { line-height: 1.6; }

  /* Workout cards previously lost 80 px to two nested 20 px insets. Keep the
     block framing, but give exercise names and controls the phone width. */
  #view-programs .day-detail-body { padding: var(--space-2) !important; }
  #view-programs .session-block {
    padding: var(--space-4) 6px;
  }

  /* Mobile session redesign: flatter blocks, compact headers, and exercise
     rows that behave like a focused training checklist instead of nested
     desktop cards. */
  #view-programs .session-block,
  #view-programs .session-section {
    background: var(--color-surface);
    border-width: 1px;
    border-left-width: 2px;
    border-radius: var(--radius-lg);
    box-shadow: none;
  }
  #view-programs .weekly-grid {
    padding-inline: 4px;
    scroll-padding-inline: 4px;
  }
  #view-programs .weekly-carousel {
    margin-bottom: var(--space-4);
  }
  #view-programs .weekly-carousel .weekly-grid {
    margin-bottom: 0;
  }
  #view-programs .weekly-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    width: 34px;
    height: 48px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--bg-elevated) 68%, transparent);
    color: var(--color-text);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--bg-base) 34%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.72;
    cursor: pointer;
    transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
  }
  #view-programs .weekly-carousel-arrow span {
    font-size: 28px;
    line-height: 1;
    transform: translateY(-1px);
  }
  #view-programs .weekly-carousel-arrow--prev { left: 6px; }
  #view-programs .weekly-carousel-arrow--next { right: 6px; }
  #view-programs .weekly-carousel-arrow:active {
    transform: translateY(-50%) scale(0.94);
    background: color-mix(in srgb, var(--accent) 13%, var(--bg-elevated));
  }
  #view-programs .weekly-carousel-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
  #view-programs .weekly-grid .day-card.is-today {
    outline: 0;
  }
  #view-programs .weekly-grid .day-card.is-today.active {
    border-width: 2px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-today) 48%, transparent);
  }
  #view-programs .session-block-header {
    gap: var(--space-2);
    margin-bottom: 0;
  }
  #view-programs .session-time-badge {
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: 0.07em;
  }
  #view-programs .session-block-title {
    font-size: var(--text-base);
    line-height: 1.2;
  }
  #view-programs .section-help {
    padding: 4px 8px;
    font-size: 10px;
    line-height: 1.2;
  }
  #view-programs .session-collapsible-body { padding-top: var(--space-2); }
  #view-programs .ex-list { margin-top: var(--space-2); }

  /* Legacy skill tables become independent cards on phones. Remove the table
     frame and neutralize alternating cell fills so no rectangular cells or
     connecting rails show through the rounded card surface. */
  #view-programs .exercise-table-wrap {
    border: 0 !important;
    border-radius: 0;
    background: transparent;
  }
  #view-programs .exercise-table,
  #view-programs .exercise-table tbody {
    border: 0 !important;
    background: transparent !important;
  }
  #view-programs .exercise-table tr:not(.program-ex-row):not(.rest-row) {
    overflow: hidden;
    border-color: var(--border-soft);
    background: var(--bg-elevated);
    box-shadow: none;
    transition: border-color 160ms ease, background 160ms ease;
  }
  #view-programs .exercise-table tr:not(.program-ex-row):not(.rest-row):hover {
    border-color: var(--border-hard);
    background: color-mix(in srgb, var(--accent) 3%, var(--bg-elevated));
  }
  #view-programs .exercise-table tr:not(.program-ex-row):not(.rest-row) > td,
  #view-programs .exercise-table tr:not(.program-ex-row):not(.rest-row):hover > td {
    background: transparent !important;
    border: 0 !important;
  }

  #view-programs .ex-card {
    border-radius: var(--radius-md);
    border-left: 2px solid color-mix(in srgb, var(--sb-accent, var(--accent)) 48%, var(--border-hard));
    background: var(--bg-elevated);
    box-shadow: none;
  }
  #view-programs .ex-card__summary {
    position: relative;
    display: grid;
    grid-template-columns: 22px 48px minmax(0, 1fr) auto;
    grid-template-areas:
      "index thumb name chevron"
      "prescription prescription prescription log";
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-left: 0;
  }
  #view-programs .ex-card__index {
    position: static;
    grid-area: index;
    display: grid;
    place-items: center;
    width: 22px;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 800;
  }
  #view-programs .ex-card__thumb {
    grid-area: thumb;
    width: 48px;
    height: 48px;
  }
  #view-programs .ex-card__name {
    grid-area: name;
    min-width: 0;
    padding: 0;
  }
  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: var(--text-base);
    line-height: 1.25;
  }
  #view-programs .ex-card__chevron {
    grid-area: chevron;
    align-self: center;
    margin: 0;
  }
  #view-programs .ex-card__prescription {
    grid-area: prescription;
    margin: 0;
    gap: 6px;
  }
  #view-programs .ex-card__rx { font-size: var(--text-sm); }
  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rir-inline {
    padding: 3px 7px;
    font-size: var(--text-xs);
  }
  #view-programs .ex-card__log-wrap {
    grid-area: log;
    margin: 0;
    align-self: end;
  }
  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-height: 40px;
    padding: 7px 11px;
    border-radius: var(--radius-md);
  }
  #view-programs .rest-divider {
    gap: var(--space-2);
    margin: 5px 0;
    padding: 0;
  }
  #view-programs .rest-divider__pill {
    min-height: 40px;
    padding: 5px 10px;
    gap: 6px;
    box-shadow: none;
    background: var(--color-surface);
    font-size: 10px;
  }
  #view-programs .rest-divider__value { font-size: var(--text-xs); }
}

/* Workout stats row */
.dash-workout__stats {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  flex: 1;
}
.dash-stat__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.dash-stat__unit {
  margin-left: 2px;
  font-size: 0.58em;
  color: var(--color-text-muted);
}
.dash-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Exercise list preview */
.dash-workout__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.dash-exercise {
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.dash-exercise:last-child { border-bottom: 0; }
.dash-exercise--more {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Start Workout CTA */
.dash-start-btn {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: background 180ms, transform 180ms, box-shadow 220ms;
}
.dash-start-btn:hover {
  background: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent-hot) 40%, var(--accent) 100%);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 28px var(--accent-glow);
}
.dash-start-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--accent-glow);
}
.dash-start-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Rest-day recovery card */
.dash-rest-line {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.dash-rest-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dash-rest-actions .mode-btn { width: 100%; }

.dash-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-primary) 44%, var(--color-border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.dash-login-btn:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  transform: translateY(-1px);
}
.dash-login-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Week-at-a-glance rows (Progressions card fallback on rest days) */
.dash-week-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
}
.dash-week-row:last-child { border-bottom: 0; }
.dash-week-row:hover .dash-week-title { color: var(--color-primary); }
.dash-week-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.dash-week-day {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  width: 34px;
  flex-shrink: 0;
}
.dash-week-title {
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-week-row.is-today .dash-week-day,
.dash-week-row.is-today .dash-week-title { color: var(--color-primary); font-weight: 700; }
.dash-week-today {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Progression items. gap + min-width:0 on the name are load-bearing: without
   them a long exercise name ("Barbell Clean and Press") and the step badge
   collide with zero space between them on narrow viewports, since
   justify-content:space-between provides no minimum gap once there's no
   room left, it just lets the two children touch. */
.dash-prog-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.dash-prog-item:last-child { border-bottom: 0; }
.dash-prog-name {
  font-size: var(--text-sm);
  font-weight: 600;
  min-width: 0;
  flex: 1 1 auto;
}
.dash-prog-step {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: 700;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Log entries */
.dash-log-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.dash-log-entry:last-child { border-bottom: 0; }
.dash-log-date {
  font-size: var(--text-sm);
  font-weight: 600;
}
.dash-log-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Quick access grid */
.dash-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.dash-link-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  min-height: 44px;
}
.dash-link-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.dash-link-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.dash-link-icon {
  font-size: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}

/* Mobile: stack cards in single column */
@media (max-width: 768px) {
  /* Dissolve the two columns and reorder back to the natural single-column
     reading order: workout, progressions, recent sessions, quick access. */
  .dash-grid {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-col {
    display: contents;
  }
  .dash-card {
    width: 100%;
  }
  #dash-workout { order: 1; }
  #dash-progress { order: 2; }
  #dash-log { order: 3; }
  #dash-links { order: 4; }
  .dash-hero__title {
    font-size: var(--text-2xl);
  }
}

/* Dashboard exercise links */
.dash-exercise-link {
  color: var(--color-text);
  text-decoration: none;
  transition: color 120ms;
}
.dash-exercise-link:hover {
  color: var(--color-primary);
}

/* End V4.3 Phase 2A -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 2B: Cross-section linking
   ============================================================ */

/* Highlight pulse when navigating to a specific catalog card */
@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 0 var(--color-primary); }
  30% { box-shadow: 0 0 0 4px var(--color-primary); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.exercise-card.highlight-pulse {
  animation: highlightPulse 1.5s ease-out;
  border-color: var(--color-primary);
}

/* End V4.3 Phase 2B -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 4C: Session log feedback
   ============================================================ */

.soma-toast {
  position: fixed;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--signal-ok);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  z-index: 200;
  transition: bottom 300ms ease;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
}
.soma-toast.visible {
  bottom: var(--space-6);
}

.session-log-toggle.logged-today {
  border-color: var(--signal-ok) !important;
  color: var(--signal-ok) !important;
}

/* End V4.3 Phase 4C -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 4D: Rest timer
   ============================================================ */

.rest-divider__pill {
  cursor: pointer;
  transition: background 200ms, border-color 200ms, transform 120ms;
}
.rest-divider__pill:hover {
  border-color: var(--color-primary);
  transform: scale(1.03);
}
.rest-divider__pill:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.rest-divider__pill.rest-timer-active {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-highlight) !important;
}
.rest-divider__pill.rest-timer-active .rest-divider__value {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.rest-divider__pill.rest-timer-done {
  border-color: var(--signal-ok) !important;
  background: color-mix(in srgb, var(--signal-ok) 10%, transparent) !important;
}
.rest-divider__pill.rest-timer-done .rest-divider__label {
  color: var(--signal-ok);
  font-weight: 700;
}

/* Paused state */
.rest-divider__pill.rest-timer-paused {
  border-color: var(--ink-muted) !important;
  background: var(--bg-raised) !important;
}
.rest-divider__pill.rest-timer-paused .rest-divider__value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-secondary);
}

/* Timer control buttons (reset, stop) */
.rest-timer-controls {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: var(--space-2);
}
.rest-timer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--ink-primary) 15%, transparent);
  cursor: pointer;
  transition: background 140ms, transform 140ms;
}
.rest-timer-btn svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  overflow: visible;
}
.rest-timer-btn:hover {
  background: color-mix(in srgb, var(--ink-primary) 30%, transparent);
  transform: scale(1.1);
}
.rest-timer-btn--stop:hover {
  background: color-mix(in srgb, var(--signal-alert) 25%, transparent);
}

/* End V4.3 Phase 4D -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 3A: Skills progress tracking
   ============================================================ */

/* Skills card header (redesigned 2026-07-20). The old layout crammed a
   "Step N/M: Level" badge and the full timeline string into a narrow
   right-aligned column, which wrapped raggedly. Now the left column holds
   title + description + a clean timeline meta row, and the right column is a
   single compact progress pill that never wraps. */
.skill-card-heading {
  flex: 1 1 auto;
  min-width: 0;
}
.skill-card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.45;
}
.skill-status {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
/* Timeline meta row: clock icon + one item per pipe-separated milestone,
   muted label with an emphasized duration, generous column gap so the
   milestones read as distinct rather than one run-on string. */
.skill-tl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  margin-top: var(--space-3);
}
.skill-tl__clock {
  color: var(--color-text-muted);
  opacity: 0.75;
  flex-shrink: 0;
}
.skill-tl__item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--text-xs);
  line-height: 1.3;
}
.skill-tl__label { color: var(--color-text-muted); }
.skill-tl__val { color: var(--color-text); font-weight: 700; }

.prog-step {
  position: relative;
}
.prog-step.passed .step-dot {
  background: var(--signal-ok) !important;
  border-color: var(--signal-ok) !important;
  color: var(--ink-on-accent) !important;
}
.prog-step.passed .step-content {
  opacity: 0.6;
}
.prog-step.current .step-dot {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--ink-on-accent) !important;
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.skill-mark-btn {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
  align-self: center;
}
.skill-mark-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.skill-mark-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.skill-mark-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Make prog-step a row with button on the right */
.prog-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.prog-step .step-content {
  flex: 1;
}

/* End V4.3 Phase 3A -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 3B: Flexibility routine runner
   ============================================================ */

.flow-start-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms, transform 140ms;
}
.flow-start-btn:hover {
  background: var(--color-primary-active);
  transform: translateY(-1px);
}
.flow-start-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.flow-runner {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--color-bg);
  display: none;
  align-items: center;
  justify-content: center;
}
.flow-runner.visible {
  display: flex;
}

.flow-runner__content {
  width: 100%;
  max-width: 500px;
  padding: var(--space-6);
  text-align: center;
}
.flow-runner__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.flow-runner__counter {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.flow-runner__close {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 120ms;
}
.flow-runner__close:hover { border-color: var(--color-primary); color: var(--color-text); }

.flow-runner__progress-bar {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-bottom: var(--space-8);
  overflow: hidden;
}
.flow-runner__progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 300ms ease;
}

.flow-runner__exercise {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  margin: 0 0 var(--space-2);
}
.flow-runner__duration {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.flow-runner__notes {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.flow-runner__timer {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--text-display, 4rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin: var(--space-6) 0;
}
.flow-runner__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.flow-runner__btn {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 140ms;
  min-height: 44px;
}
.flow-runner__btn--prev {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
}
.flow-runner__btn--prev:hover { border-color: var(--color-text); color: var(--color-text); }
.flow-runner__btn--next {
  background: var(--color-primary);
  border: none;
  color: var(--color-bg);
}
.flow-runner__btn--next:hover { background: var(--color-primary-active); }

/* End V4.3 Phase 3B -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 4A: Science SVG diagrams
   ============================================================ */

.sra-diagram, .rep-range-bar {
  margin-bottom: var(--space-4);
}
.sra-svg {
  width: 100%;
  max-width: 600px;
  height: auto;
}
.sra-svg text {
  font-family: var(--font-body);
}
.rep-range-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-bottom: var(--space-3);
}
.rep-range-svg text {
  font-family: var(--font-body);
}

/* End V4.3 Phase 4A -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 5A: Polish pass
   ============================================================ */

.site-footer {
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-8);
  opacity: 0.7;
}
.site-footer .container--wide {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-footer__tagline {
  font-size: 10px;
  letter-spacing: 0.04em;
}
.footer-sep {
  margin: 0 var(--space-2);
  opacity: 0.4;
}

/* End V4.3 Phase 5A -----------------------------------------------*/

/* ============================================================
   V4.3 Phase 4B: Nutrition macro donut charts
   ============================================================ */

.macro-donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
}
.macro-donut {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.macro-donut-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.macro-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.macro-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Daily-targets stat tiles — uniform shell, per-macro top accent that
   ties each tile back to the donut legend. */
.macro-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.macro-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-4);
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--ms-accent, var(--accent));
  border-radius: var(--radius-md);
}
.macro-stat--cal     { --ms-accent: var(--accent); }
.macro-stat--protein { --ms-accent: var(--signal-ok); }
.macro-stat--carbs   { --ms-accent: var(--accent-hot); }
.macro-stat--fats    { --ms-accent: var(--dot-fullbody); }
.macro-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-text-muted);
}
.macro-stat__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
}
.macro-stat__value--num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ms-accent, var(--accent));
  line-height: 1.1;
}
.macro-stat__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* End V4.3 Phase 4B -----------------------------------------------*/

/* ============================================================
   V4.4 VISUAL POLISH: shadows, animations, palette, spacing
   ============================================================ */

/* -- Card entry animations (catalog) -- */
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.exercise-grid > .exercise-card {
  animation: cardSlideUp 320ms var(--ease-standard) both;
}
.exercise-grid > .exercise-card:nth-child(1)  { animation-delay: 0ms; }
.exercise-grid > .exercise-card:nth-child(2)  { animation-delay: 40ms; }
.exercise-grid > .exercise-card:nth-child(3)  { animation-delay: 40ms; }
.exercise-grid > .exercise-card:nth-child(4)  { animation-delay: 80ms; }
.exercise-grid > .exercise-card:nth-child(5)  { animation-delay: 100ms; }
.exercise-grid > .exercise-card:nth-child(6)  { animation-delay: 120ms; }
.exercise-grid > .exercise-card:nth-child(7)  { animation-delay: 140ms; }
.exercise-grid > .exercise-card:nth-child(8)  { animation-delay: 160ms; }
.exercise-grid > .exercise-card:nth-child(n+9) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .exercise-grid > .exercise-card {
    animation: none !important;
  }
}

/* -- Flexibility section: calmer teal palette -- */
#view-flexibility {
  --accent:                var(--accent-flex);
  --accent-hot:            var(--accent-flex);
  --accent-wash:           var(--accent-flex-wash);
  --accent-glow:           var(--accent-flex-glow);
  --color-primary:         var(--accent-flex);
  --color-primary-hover:   var(--accent-flex);
  --color-primary-active:  var(--accent-flex);
  --color-primary-highlight: var(--accent-flex-wash);
}

/* -- Science section: column border for two-col layout -- */
.science-two-col {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-5);
}
.science-two-col > .science-subcol + .science-subcol {
  border-left: 1px solid var(--color-divider);
  padding-left: var(--space-6);
}
@media (max-width: 768px) {
  .science-two-col > .science-subcol + .science-subcol {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-4);
  }
}

/* -- Muscle group tag on exercise cards -- */
.card-muscle-tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
}

/* End V4.4 Visual Polish -------------------------------------------*/

/* ============================================================
   V4.5 RESPONSIVE QUALITY PASS
   ============================================================ */

/* Keep touch controls reliable anywhere the header becomes a compact toolbar. */
.header-login-btn,
.header-account-btn,
.theme-toggle {
  min-width: 44px;
  height: 44px;
}
.auth-gate__close {
  width: 44px;
  height: 44px;
}
.auth-gate__altlink {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* A full desktop navigation row is too dense on tablets and small laptops.
   Use the proven drawer before labels start disappearing off the edge. */
@media (max-width: 1100px) {
  .nav-menu-btn { display: inline-flex; }
  .main-nav { display: none; }
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-2);
  }
  .header-inner > .nav-menu-btn { justify-self: start; }
  .header-inner > .logo-btn { justify-self: center; }
  .header-inner > .header-actions { justify-self: end; }
  .header-inner > .logo-btn span { display: inline; }
  #header-persona,
  .header-actions > .theme-toggle { display: none !important; }
}

/* Replace full-height colored rails with a short block marker. Long rails
   visually connected unrelated exercise cards inside large session blocks. */
#briefing-drawer .briefing-section[hidden] {
  display: none !important;
}
#briefing-section-kit > .briefing-section-title {
  display: none;
}

#view-programs .session-block,
#view-programs .session-section {
  border-left: 0;
}
#view-programs .session-block::before,
#view-programs .session-section::before {
  content: '';
  position: absolute;
  top: var(--space-4);
  left: 0;
  width: 3px;
  height: 46px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--sb-accent, var(--border-hard));
}

/* Calm table rows. Dividers already provide structure, so alternating black
   cell rectangles only made tables look patched together. */
.science-table tbody tr:nth-child(even) td,
.volume-table tbody tr:nth-child(even) td,
.gtg-table tbody tr:nth-child(even) td,
.exercise-table tbody tr:nth-child(even) td {
  background: transparent;
}
.science-table tbody tr:hover td,
.volume-table tbody tr:hover td,
.gtg-table tbody tr:hover td,
.exercise-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 4%, var(--color-surface));
}

/* Balance the four long flexibility references as three natural columns on
   desktop and two on tablets. This removes the large blank grid row. */
#view-flexibility .flex-sections {
  display: block !important;
  column-count: 1;
  column-gap: var(--space-5);
}
#view-flexibility .flex-card {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-5);
  break-inside: avoid;
  vertical-align: top;
}
@media (min-width: 700px) {
  #view-flexibility .flex-sections { column-count: 2; }
}
@media (min-width: 1101px) {
  #view-flexibility .flex-sections { column-count: 3; }
}

/* Tablet catalog: use the available width instead of stretching every card
   into a single oversized row. */
@media (min-width: 700px) and (max-width: 900px) {
  #view-catalog .exercise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-4) !important;
  }
}

/* Keep the filter controls collapsed anywhere the full desktop row is too
   narrow. This intentionally begins immediately above the phone breakpoint. */
@media (min-width: 601px) and (max-width: 900px) {
  #view-catalog .catalog-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
  }
  #view-catalog .catalog-filter-sticky .search-input {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }
  #view-catalog .catalog-filter-toggle {
    display: inline-flex;
    grid-column: 2;
    min-width: 116px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
  }
  #view-catalog .catalog-filter-toggle[aria-expanded="true"],
  #view-catalog .catalog-filter-toggle.has-filters {
    border-color: var(--color-primary);
    background: var(--color-primary-highlight);
    color: var(--color-primary-active);
  }
  #view-catalog .catalog-filter-options {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #view-catalog .catalog-filter-sticky.filters-expanded .catalog-filter-options {
    display: grid;
  }
  #view-catalog .catalog-filter-sticky .catalog-muscle-btn,
  #view-catalog .catalog-filter-sticky .filter-select-wrap {
    width: 100%;
    min-width: 0;
  }
}

/* The desktop curve can use more of its card. Phones get a readable four-stage
   explanation instead of a heavily scaled diagram with tiny labels. */
.sra-svg {
  max-width: 900px;
  margin-inline: auto;
}
.sra-mobile-stages {
  display: none;
}
@media (max-width: 640px) {
  .sra-svg { display: none; }
  .sra-mobile-stages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .sra-mobile-stage {
    display: grid;
    gap: 2px;
    min-height: 84px;
    align-content: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
  }
  .sra-mobile-stage strong {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: var(--text-base);
  }
  .sra-mobile-stage span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
  }
  .sra-mobile-stage.is-target {
    border-color: var(--signal-ok);
    background: color-mix(in srgb, var(--signal-ok) 7%, var(--color-surface));
  }
  .sra-mobile-stage.is-target strong { color: var(--signal-ok); }
}

/* Horizontal day navigation uses dedicated edge rails, so arrows never cover
   day titles. The controls remain full touch targets with quiet visuals. */
@media (max-width: 768px) {
  #view-programs .weekly-grid {
    padding-inline: 12px;
    scroll-padding-inline: 52px;
  }
  #view-programs .weekly-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
    color: var(--color-text);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--bg-base) 28%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.62;
    cursor: pointer;
    transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
  }
  #view-programs .weekly-carousel-arrow span {
    font-size: 21px;
    line-height: 1;
    transform: translateY(-1px);
  }
  #view-programs .weekly-carousel-arrow--prev { left: -5px; }
  #view-programs .weekly-carousel-arrow--next { right: -5px; }
  #view-programs .weekly-carousel-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

/* Finish the mobile target-size sweep for secondary controls. */
@media (max-width: 768px) {
  .section-jump__btn,
  #view-programs .day-anchor-btn,
  #view-skills .skill-mark-btn,
  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle,
  #view-programs .ex-card__rest-pill,
  #view-programs .rest-divider__pill,
  #view-programs .session-block-header[role="button"],
  .muscle-pick {
    min-height: 44px;
  }
  .section-help {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    cursor: pointer;
  }
  .section-jump {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .nav-drawer-pref .theme-switch__opt,
  .nav-drawer-pref .theme-switch::before,
  .nav-drawer-pref .model-switch--drawer::before,
  .nav-drawer-pref .model-switch--drawer .model-switch__opt {
    width: 62px;
    height: 44px;
  }
  .nav-drawer-pref .theme-switch[data-theme="light"]::before,
  .nav-drawer-pref .model-switch--drawer[data-model="female"]::before {
    transform: translateX(62px);
  }
}

/* Dark cards read as raised surfaces, not black cutouts. */
[data-theme='dark'] .skill-card-header,
[data-theme='dark'] #view-flexibility .flex-card-header {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--bg-raised));
}

/* Two regular rows preserve reading order and keep both tablet columns useful
   through the bottom of the long Flexibility page. Desktop retains the
   balanced three-column masonry layout above 1100px. */
@media (min-width: 700px) and (max-width: 1100px) {
  #view-flexibility .flex-sections {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    gap: var(--space-5);
    column-count: initial;
  }
  #view-flexibility .flex-card {
    margin: 0;
  }
}

@media (max-width: 640px) {
  /* Program cards reserve their right edge for Log and disclosure actions.
     A floating overlay repeatedly covered those controls while scrolling. */
  body.in-programs .scroll-top {
    display: none !important;
  }
  .catalog-clear-btn {
    min-height: 44px;
  }
}

/* The logger is a primary phone interaction, so every control gets a true
   touch target. The narrowest layout moves the set number above the two
   steppers, preserving usable input width instead of shrinking +/- buttons. */
@media (max-width: 660px) {
  .ex-card__log-wrap .session-log-date,
  .ex-card__log-wrap .set-add,
  .ex-card__log-wrap .session-log-save,
  .ex-card__log-wrap .session-log-close {
    min-height: 44px;
  }
  .ex-card__log-wrap .stepper .set-input {
    min-height: 44px;
  }
  .ex-card__log-wrap .stepper-btn {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
    min-height: 44px;
  }
  .ex-card__log-wrap .effort-trigger,
  .ex-card__log-wrap .set-remove {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .ex-card__log-wrap .set-remove {
    margin-bottom: 0;
  }
}

@media (max-width: 360px) {
  .ex-card__log-wrap .set-row {
    column-gap: var(--space-2);
  }
  .ex-card__log-wrap .set-field--num {
    flex: 0 0 100%;
    justify-content: flex-start;
  }
  .ex-card__log-wrap .set-field--load,
  .ex-card__log-wrap .set-field--metric {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }
  .ex-card__log-wrap .set-field--effort {
    flex: 1 1 calc(100% - 52px);
  }
  .ex-card__log-wrap .set-remove {
    order: 8;
    flex: 0 0 44px;
  }
}

/* 320px safeguard: let the program hero shrink with the viewport instead of
   preserving the stat cards' desktop minimum widths off-screen. */
@media (max-width: 360px) {
  .programs-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-3);
  }
  .programs-hero__identity,
  .programs-hero__stats {
    width: 100%;
    min-width: 0;
  }
  .programs-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .programs-hero__stat {
    min-width: 0;
    padding: var(--space-3) var(--space-2);
  }
  .programs-hero__day {
    font-size: var(--text-base);
    line-height: 1.3;
  }
  .programs-hero__stat-value {
    font-size: var(--text-2xl);
  }
  .programs-hero__stat-label {
    font-size: 0.625rem;
  }
}

/* End V4.5 Responsive Quality Pass ------------------------------- */

/* ============================================================
   V4.6 Program exercise cards
   One scan path: identity, prescription, action, optional detail.
   ============================================================ */

#view-programs .ex-list {
  gap: var(--space-2);
  margin-top: var(--space-3);
}

#view-programs .ex-card {
  overflow: clip;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 3%, var(--bg-elevated));
  box-shadow: none;
}

#view-programs .ex-card:has(.session-log-widget.expanded) {
  overflow: visible;
  z-index: 120;
}

#view-programs .ex-card:hover {
  border-color: color-mix(in srgb, var(--border-hard) 76%, var(--accent) 24%);
  box-shadow: none;
}

#view-programs .ex-card__summary {
  display: grid;
  grid-template-columns: 24px 60px minmax(0, 1fr) auto 44px;
  grid-template-areas: "index thumb info log toggle";
  align-items: center;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-left: 0;
  background: transparent;
}

#view-programs .ex-card__summary:hover {
  border-left-color: transparent;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

#view-programs .ex-card__index {
  grid-area: index;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}

#view-programs .ex-card__thumb {
  grid-area: thumb;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--accent) 9%, transparent) 0%,
      transparent 72%),
    var(--color-surface-2);
}

#view-programs .ex-card__info {
  grid-area: info;
  min-width: 0;
}

#view-programs .ex-card__name {
  min-width: 0;
  gap: var(--space-2);
}

#view-programs .ex-card__name .ex-sparkline-wrap {
  margin-left: 0;
  padding: 4px 6px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border-soft));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-2));
}

#view-programs .ex-card__title-link,
#view-programs .ex-card__title-link a {
  font-size: var(--text-base);
  line-height: 1.25;
}

#view-programs .link-play-icon {
  opacity: 0.5;
}

#view-programs .ex-card__prescription {
  margin-top: 6px;
  gap: 6px;
}

#view-programs .ex-card__rx {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ink-primary);
  font-size: var(--text-sm);
}

#view-programs .ex-card__rest-pill,
#view-programs .ex-card__rir-inline {
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}

#view-programs .ex-card__rest-pill {
  gap: 5px;
  border-color: var(--border-soft);
  background: var(--color-surface-2);
  color: var(--ink-secondary);
}

#view-programs .ex-card__rest-pill:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
  color: var(--ink-primary);
}

#view-programs .ex-card__rest-label {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#view-programs .ex-card__rir-inline {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

#view-programs .ex-card__log-wrap {
  grid-area: log;
  margin: 0;
}

#view-programs .session-log-toggle,
#view-programs .session-log-widget .session-log-toggle {
  min-width: 56px;
  min-height: 44px;
  justify-content: center;
  padding: 0 12px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-hard));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--color-surface-2));
  color: var(--ink-primary);
  font-size: var(--text-xs);
  font-weight: 750;
}

#view-programs .session-log-toggle:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--color-surface-2));
  color: var(--accent);
}

#view-programs .ex-card__chevron {
  grid-area: toggle;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

#view-programs .ex-card__chevron:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
}

#view-programs .ex-card__chevron:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#view-programs .ex-card.is-expanded {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-hard));
  box-shadow: none;
}

#view-programs .ex-card.is-expanded .ex-card__summary {
  border-left-color: transparent;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

#view-programs .ex-card__detail {
  padding: var(--space-4);
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-raised) 97%, var(--accent) 3%);
}

#view-programs .ex-card.is-expanded .ex-card__detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
}

#view-programs .ex-card__guidance {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--signal-info) 20%, var(--border-soft));
  border-radius: 10px;
  background: color-mix(in srgb, var(--signal-info) 6%, var(--color-surface));
}

#view-programs .ex-card__guidance-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  color: var(--signal-info);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

#view-programs .ex-card__notes {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: 1.5;
}

#view-programs .progression-picker,
#view-programs .equip-picker {
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: none;
}

#view-programs .prog-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--ink-primary);
  font-size: 10px;
  letter-spacing: 0.08em;
}

#view-programs .prog-label__meta {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
}

#view-programs .prog-chips {
  margin: 0;
}

#view-programs .prog-track-bg,
#view-programs .prog-track-fill {
  left: 22px;
}

#view-programs .prog-track-bg {
  right: 22px;
  height: 2px;
  opacity: 0.55;
}

#view-programs .prog-track-fill {
  height: 2px;
  background: var(--accent);
}

#view-programs .prog-chip {
  width: 44px;
  height: 44px;
  border-width: 1.5px;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  font-size: var(--text-xs);
  opacity: 1;
  box-shadow: none;
  transform: none;
}

#view-programs .prog-chip.passed,
#view-programs .prog-chip.future {
  background: var(--color-surface-2);
  opacity: 1;
}

#view-programs .prog-chip.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
  box-shadow: none;
  transform: none;
}

#view-programs .prog-chip:hover:not(.selected) {
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-2));
  transform: none;
}

#view-programs .eqv-chips {
  gap: var(--space-2);
}

#view-programs .eqv-chip {
  width: auto;
  min-width: 56px;
  padding: 0 14px;
  border-radius: var(--radius-full);
}

#view-programs .prog-selected-name {
  min-height: 0;
  margin-top: var(--space-2);
  color: var(--ink-primary);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.35;
}

#view-programs .prog-selected-name::before {
  content: 'Current: ';
  color: var(--ink-muted);
  opacity: 1;
}

#view-programs .muscle-diagram {
  grid-column: 1 / -1;
  margin-top: 0;
  border-color: var(--border-soft);
  background: var(--color-surface);
}

@media (max-width: 480px) {
  #view-programs .muscle-diagram__legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  #view-programs .muscle-diagram__chip {
    min-width: 0;
    padding: 4px 2px;
    overflow: hidden;
    font-size: 9px;
    letter-spacing: 0.025em;
    text-align: center;
  }
}

@media (max-width: 640px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 20px 48px minmax(0, 1fr) 44px;
    grid-template-areas:
      "index thumb name toggle"
      "meta meta meta log";
    column-gap: var(--space-2);
    row-gap: 6px;
    min-height: 0;
    padding: 10px var(--space-3);
  }

  #view-programs .ex-card__index {
    grid-area: index;
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 10px;
  }

  #view-programs .ex-card__thumb {
    grid-area: thumb;
    width: 48px;
    height: 48px;
  }

  #view-programs .ex-card__info {
    display: contents;
  }

  #view-programs .ex-card__name {
    grid-area: name;
    align-self: center;
    flex-wrap: nowrap;
    gap: 5px;
  }

  #view-programs .ex-card__title-link {
    flex: 1 1 auto;
    min-width: 0;
  }

  #view-programs .ex-card__name .ex-sparkline-wrap {
    flex: 0 0 42px;
    width: 42px;
    height: 30px;
    margin-left: 0;
    padding: 4px;
    justify-content: center;
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border-soft));
    background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-2));
  }

  #view-programs .ex-card__name .ex-sparkline-wrap .sparkline {
    width: 34px;
    height: 14px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: var(--text-sm);
  }

  #view-programs .ex-card__prescription {
    grid-area: meta;
    align-self: center;
    margin: 0;
  }

  #view-programs .ex-card__log-wrap {
    grid-area: log;
    align-self: center;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 52px;
    padding-inline: 10px;
  }

  #view-programs .ex-card__chevron {
    grid-area: toggle;
    align-self: center;
    margin: 0;
  }

  #view-programs .ex-card__detail {
    padding: var(--space-3);
  }

  #view-programs .ex-card.is-expanded .ex-card__detail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  #view-programs .ex-card__guidance {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  #view-programs .progression-picker,
  #view-programs .equip-picker {
    padding: var(--space-3);
  }
}

@media (max-width: 480px) {
  #view-programs .ex-card__rest-label {
    display: none;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rir-inline {
    padding-inline: 8px;
  }
}

@media (width < 400px) {
  #view-programs .ex-card__prescription {
    gap: 2px;
  }

  #view-programs .ex-card__rx {
    font-size: 12px;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rir-inline {
    padding-inline: 3px;
    font-size: 10px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 48px;
    padding-inline: 6px;
  }

  #view-programs .ex-card__rest-pill:not(.rest-timer-active):not(.rest-timer-paused):not(.rest-timer-done) .rest-value-small {
    font-size: 0;
  }

  #view-programs .ex-card__rest-pill:not(.rest-timer-active):not(.rest-timer-paused):not(.rest-timer-done) .rest-value-small::after {
    content: attr(data-short);
    font-size: 10px;
  }
}

/* End V4.6 Program Exercise Cards ------------------------------- */

/* ============================================================
   V4.7 MOTION AND PROGRAM HEADER POLISH
   Motion is used for orientation, state changes, and feedback.
   It stays short, low-distance, and fully disabled for users who
   request reduced motion.
   ============================================================ */

:root {
  --motion-fast: 130ms;
  --motion-base: 220ms;
  --motion-slow: 340ms;
  --motion-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-press: cubic-bezier(0.2, 0, 0.1, 1);
}

@keyframes soma-view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes soma-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes soma-disclose {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes soma-select {
  0% { transform: scale(0.975); }
  70% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

@keyframes soma-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes soma-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Route changes should establish location without slowing navigation. */
.view.active {
  animation: soma-view-in var(--motion-slow) var(--motion-enter) both;
}

/* Programs and Timer own viewport-fixed controls. Even an opacity animation
   creates a stacking context that can let later page content cover them. */
#view-programs.view.active,
#view-timer.view.active { animation: none; }

/* Stagger the primary content groups on reference and dashboard screens. */
.view.active .dash-card,
.view.active .skill-card,
.view.active .flex-card,
.view.active .science-card {
  animation: soma-card-in var(--motion-slow) var(--motion-enter) both;
}
.view.active .dash-card:nth-of-type(2),
.view.active .skill-card:nth-child(2),
.view.active .flex-card:nth-child(2),
.view.active .science-card:nth-child(2) { animation-delay: 45ms; }
.view.active .dash-card:nth-of-type(3),
.view.active .skill-card:nth-child(3),
.view.active .flex-card:nth-child(3),
.view.active .science-card:nth-child(3) { animation-delay: 80ms; }
.view.active .dash-card:nth-of-type(n+4),
.view.active .skill-card:nth-child(n+4),
.view.active .flex-card:nth-child(n+4),
.view.active .science-card:nth-child(n+4) { animation-delay: 110ms; }

/* A newly rendered training day is a real context change. */
#view-programs .day-detail {
  animation: soma-card-in 300ms var(--motion-enter) both;
}

/* Disclosures appear as one connected surface instead of snapping in. */
#view-programs .ex-card.is-expanded .ex-card__detail,
#view-programs .session-collapsible-js:not(.is-collapsed) > .session-collapsible-body,
#view-programs details.session-collapsible[open] > .session-collapsible-body,
.catalog-muscle-panel.open,
.catalog-equip-panel.open {
  animation: soma-disclose var(--motion-base) var(--motion-enter) both;
  transform-origin: top center;
}

/* Modal surfaces arrive from the point of attention. */
.auth-gate:not([hidden]) .auth-gate__panel,
.history-overlay.visible .history-modal,
.ex-history-modal .ex-history-panel {
  animation: soma-modal-in 280ms var(--motion-enter) both;
}

.ex-history-modal .ex-history-backdrop {
  animation: soma-fade-in 180ms ease-out both;
}

/* Drawer contents follow the panel instead of appearing before it settles. */
.nav-drawer.open .nav-drawer-btn,
.nav-drawer.open .nav-drawer-pref {
  animation: soma-view-in 260ms var(--motion-enter) both;
}
.nav-drawer.open .nav-drawer-btn:nth-child(2) { animation-delay: 25ms; }
.nav-drawer.open .nav-drawer-btn:nth-child(3) { animation-delay: 40ms; }
.nav-drawer.open .nav-drawer-btn:nth-child(4) { animation-delay: 55ms; }
.nav-drawer.open .nav-drawer-btn:nth-child(5) { animation-delay: 70ms; }
.nav-drawer.open .nav-drawer-btn:nth-child(n+6) { animation-delay: 85ms; }
.nav-drawer.open .nav-drawer-pref { animation-delay: 95ms; }

/* Selected controls acknowledge the action once, then stay still. */
.day-card.active,
.mode-btn.active,
.eq-toggle.active,
.prog-chip.selected,
.muscle-pick.active {
  animation: soma-select var(--motion-base) var(--motion-enter);
}

/* Tactile press feedback across the app's principal controls. */
:is(
  .btn-primary,
  .btn-ghost,
  .btn-icon,
  .dash-start-btn,
  .dash-link-btn,
  .nav-drawer-btn,
  .persona-chip,
  .theme-switch,
  .model-switch,
  .day-card,
  .section-jump__btn,
  .section-help,
  .cmd-kit,
  .cmd-briefing,
  .catalog-muscle-btn,
  .catalog-filter-toggle,
  .skill-mark-btn,
  .session-log-toggle
):active {
  transform: scale(0.97);
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--motion-press);
}

.dash-link-icon,
.nav-drawer-btn svg,
.section-jump__btn {
  transition: transform var(--motion-base) var(--motion-enter),
              color var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .dash-link-btn:hover .dash-link-icon { transform: translateX(3px); }
  .nav-drawer-btn:hover svg { transform: translateX(2px) scale(1.04); }
  .section-jump__btn:hover { transform: translateY(-1px); }
  #view-programs .session-collapsible-js > .session-block-header:hover .session-collapse-chevron {
    color: var(--sb-accent, var(--accent));
  }
}

/* Keep simple mobile block headers compact and centered. The work block has
   extra guide controls, so it gets a separate, structured hierarchy. */
@media (max-width: 640px) {
  #view-programs .session-block {
    padding: var(--space-4);
  }

  #view-programs .session-block-header {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 36px;
    gap: var(--space-3);
    align-items: center;
    min-height: 44px;
  }

  #view-programs .session-block-header > .session-time-badge {
    grid-column: 1;
    justify-self: start;
    margin: 0;
  }

  #view-programs .session-block-header > .session-block-title {
    grid-column: 2;
    min-width: 0;
    padding: 0;
    font-size: clamp(var(--text-base), 5.5vw, var(--text-lg));
    line-height: 1.1;
  }

  #view-programs .session-block-header > .session-collapse-chevron {
    grid-column: 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--sb-accent, var(--accent)) 25%, var(--border-soft));
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--sb-accent, var(--accent)) 7%, var(--bg-raised));
    color: color-mix(in srgb, var(--sb-accent, var(--accent)) 68%, var(--ink-secondary));
  }

  #view-programs details.session-collapsible > .session-block-header {
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 36px;
  }

  #view-programs details.session-collapsible > .session-block-header::after {
    right: 4px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--sb-accent, var(--accent)) 25%, var(--border-soft));
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--sb-accent, var(--accent)) 7%, var(--bg-raised));
    color: color-mix(in srgb, var(--sb-accent, var(--accent)) 68%, var(--ink-secondary));
  }

  #view-programs .session-block-header > .section-help {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    justify-self: start;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--sb-accent, var(--accent)) 5%, var(--bg-raised));
    border-color: color-mix(in srgb, var(--sb-accent, var(--accent)) 22%, var(--border-soft));
    color: var(--ink-secondary);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.15;
    cursor: help;
  }

  #view-programs .session-hypertrophy > .session-block-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  #view-programs .session-hypertrophy > .session-block-header > .session-time-badge {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #view-programs .session-hypertrophy > .session-block-header > .session-block-title {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-right: 42px;
    font-size: var(--text-lg);
  }

  #view-programs .session-hypertrophy > .session-block-header > .section-help {
    width: 100%;
    justify-self: stretch;
    text-align: center;
  }

  #view-programs .session-hypertrophy > .session-block-header > .section-help:first-of-type {
    grid-column: 1;
    grid-row: 3;
  }

  #view-programs .session-hypertrophy > .session-block-header > .section-help:nth-of-type(2) {
    grid-column: 2;
    grid-row: 3;
  }

  #view-programs .session-hypertrophy > .session-block-header > .session-collapse-chevron {
    position: absolute;
    top: 26px;
    right: 0;
    width: 32px;
    height: 32px;
  }

  #view-programs .session-collapsible-js.is-collapsed .session-collapse-chevron {
    transform: rotate(-90deg);
  }
}

.day-anchor-shell {
  position: relative;
}

.day-anchor-arrow {
  display: none;
}

@media (max-width: 640px) {
  #view-programs .day-anchor-shell {
    margin-bottom: var(--space-4);
  }

  #view-programs .day-anchor-shell .day-anchor-bar {
    margin-bottom: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  #view-programs .day-anchor-shell.can-scroll-left .day-anchor-bar {
    padding-left: 30px;
    scroll-padding-left: 30px;
  }

  #view-programs .day-anchor-shell.can-scroll-right .day-anchor-bar {
    padding-right: 30px;
    scroll-padding-right: 30px;
  }

  #view-programs .day-anchor-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    color: var(--color-text);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--bg-base) 28%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.78;
    transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
  }

  #view-programs .day-anchor-arrow span {
    font-size: 19px;
    line-height: 1;
    transform: translateY(-1px);
  }

  #view-programs .day-anchor-arrow--prev { left: 0; }
  #view-programs .day-anchor-arrow--next { right: 0; }

  #view-programs .day-anchor-arrow:active {
    transform: translateY(-50%) scale(0.94);
  }

  #view-programs .day-anchor-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 340px) {
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-time-badge {
    grid-column: 1;
    grid-row: 1;
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-block-title {
    grid-column: 1;
    grid-row: 2;
    padding-right: 36px;
    font-size: var(--text-base);
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .section-help {
    grid-column: 1;
    grid-row: 3;
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-collapse-chevron {
    position: absolute;
    top: 26px;
    right: 0;
  }

  .cmd-briefing .cmd-label-lg { font-size: 10px; }
  .cmd-kit,
  .cmd-briefing { gap: 4px; padding-inline: 6px; }
  .cmd-day-chip { max-width: 36vw; }
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .view.active .dash-card,
  .view.active .skill-card,
  .view.active .flex-card,
  .view.active .science-card,
  #view-programs .day-detail,
  #view-programs .ex-card.is-expanded .ex-card__detail,
  #view-programs .session-collapsible-body,
  .catalog-muscle-panel,
  .catalog-equip-panel,
  .auth-gate__panel,
  .history-modal,
  .ex-history-panel,
  .ex-history-backdrop,
  .nav-drawer-btn,
  .nav-drawer-pref,
  .day-card.active,
  .mode-btn.active,
  .eq-toggle.active,
  .prog-chip.selected,
  .muscle-pick.active,
  .programs-hero,
  .day-card.is-today::after {
    animation: none !important;
  }

  :is(
    .btn-primary,
    .btn-ghost,
    .btn-icon,
    .dash-start-btn,
    .dash-link-btn,
    .nav-drawer-btn,
    .persona-chip,
    .theme-switch,
    .model-switch,
    .day-card,
    .section-jump__btn,
    .section-help,
    .cmd-kit,
    .cmd-briefing,
    .catalog-muscle-btn,
    .catalog-filter-toggle,
    .skill-mark-btn,
    .session-log-toggle
  ):active {
    transform: none !important;
  }
}

/* End V4.7 Motion and Program Header Polish --------------------- */

/* V4.8 Program block header system
   Every training block now shares one grid, one right-edge disclosure
   position, and one marker tied to the header rather than the full card. */
#view-programs .session-block::before,
#view-programs .session-section::before {
  display: none;
}

#view-programs .session-block-header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  margin-bottom: 0;
}

#view-programs .session-block-header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-5) - 1px);
  width: 3px;
  height: calc(100% - 8px);
  min-height: 40px;
  max-height: 64px;
  transform: translateY(-50%);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--sb-accent, var(--border-hard));
}

#view-programs .session-block-header > .session-time-badge {
  grid-column: 1;
  margin: 0;
}

#view-programs .session-block-header > .session-block-title {
  grid-column: 2;
  min-width: 0;
  padding: 0;
  font-size: clamp(var(--text-base), 2.4vw, var(--text-lg));
  line-height: 1.12;
}

#view-programs .session-block-header > .session-block-duration,
#view-programs .session-block-header > .section-help {
  grid-column: 3;
  margin: 0;
}

#view-programs .session-block-header > .session-collapse-chevron {
  position: static;
  grid-column: 4;
  display: grid;
  width: 36px;
  height: 36px;
  margin: 0;
  place-items: center;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--sb-accent, var(--accent)) 24%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--sb-accent, var(--accent)) 6%, var(--bg-raised));
  color: color-mix(in srgb, var(--sb-accent, var(--accent)) 72%, var(--ink-secondary));
  font-size: 0;
  transform: rotate(0);
}

#view-programs .session-collapse-chevron::before {
  content: '';
  width: 7px;
  height: 7px;
  transform: translateY(-2px) rotate(45deg);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

#view-programs .session-collapsible-js.is-collapsed > .session-block-header > .session-collapse-chevron,
#view-programs details.session-collapsible:not([open]) > .session-block-header > .session-collapse-chevron {
  transform: rotate(-90deg);
}

#view-programs details.session-collapsible[open] > .session-block-header > .session-collapse-chevron {
  transform: rotate(0);
}

#view-programs details.session-collapsible > .session-block-header {
  grid-template-columns: auto minmax(0, 1fr) auto 36px;
  padding-right: 0;
}

#view-programs details.session-collapsible > .session-block-header::after {
  display: none;
}

#view-programs .session-hypertrophy > .session-block-header {
  grid-template-columns: auto minmax(0, 1fr) 36px;
}

#view-programs .session-hypertrophy > .session-block-header > .session-time-badge {
  grid-column: 1;
  grid-row: 1;
}

#view-programs .session-hypertrophy > .session-block-header > .session-block-title {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
}

#view-programs .session-hypertrophy > .session-block-header > .session-collapse-chevron {
  grid-column: 3;
  grid-row: 1;
  width: 36px;
  height: 36px;
}

#view-programs .session-guide-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--sb-accent, var(--accent)) 14%, var(--border-soft));
}

#view-programs .session-guide-actions > .section-help {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--sb-accent, var(--accent)) 20%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sb-accent, var(--accent)) 5%, var(--bg-raised));
  color: var(--ink-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}

#view-programs .session-guide-actions > .section-help::before {
  content: 'i';
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--sb-accent, var(--accent)) 13%, transparent);
  color: color-mix(in srgb, var(--sb-accent, var(--accent)) 82%, var(--color-text));
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
  #view-programs .session-block-header[role='button']:hover > .session-collapse-chevron,
  #view-programs details.session-collapsible > .session-block-header:hover > .session-collapse-chevron {
    border-color: color-mix(in srgb, var(--sb-accent, var(--accent)) 44%, var(--border-soft));
    background: color-mix(in srgb, var(--sb-accent, var(--accent)) 11%, var(--bg-raised));
  }

  #view-programs .session-guide-actions > .section-help:hover {
    border-color: color-mix(in srgb, var(--sb-accent, var(--accent)) 42%, var(--border-soft));
    background: color-mix(in srgb, var(--sb-accent, var(--accent)) 10%, var(--bg-raised));
    color: var(--color-text);
  }
}

@media (max-width: 768px) {
  #view-programs .session-block-header::before {
    left: -7px;
  }
}

@media (max-width: 640px) {
  #view-programs .session-block-header,
  #view-programs details.session-collapsible > .session-block-header,
  #view-programs .session-hypertrophy > .session-block-header {
    gap: var(--space-2);
  }

  #view-programs .session-block-header::before {
    left: calc(-1 * var(--space-4) - 1px);
  }

  #view-programs .session-block-header > .session-block-title {
    font-size: clamp(var(--text-base), 5.2vw, var(--text-lg));
  }
}

@media (width < 400px) {
  #view-programs .session-block-header,
  #view-programs details.session-collapsible > .session-block-header,
  #view-programs .session-hypertrophy > .session-block-header {
    grid-template-columns: minmax(0, 1fr) auto 36px;
  }

  #view-programs .session-block-header > .session-time-badge,
  #view-programs .session-hypertrophy > .session-block-header > .session-time-badge {
    grid-column: 1;
    grid-row: 1;
  }

  #view-programs .session-block-header > .session-block-title,
  #view-programs .session-hypertrophy > .session-block-header > .session-block-title {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-right: 4px;
  }

  #view-programs .session-block-header > .session-block-duration,
  #view-programs .session-block-header > .section-help {
    grid-column: 2;
    grid-row: 1;
  }

  #view-programs .session-block-header > .session-collapse-chevron,
  #view-programs .session-hypertrophy > .session-block-header > .session-collapse-chevron {
    position: static;
    grid-column: 3;
    grid-row: 1;
  }

  #view-programs .session-guide-actions {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #view-programs .session-guide-actions > .section-help {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    padding-inline: 9px;
    font-size: 10px;
  }

  #view-programs .session-guide-actions > .section-help::before {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    gap: var(--space-2);
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-time-badge {
    grid-column: 1;
    grid-row: 1;
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-block-title {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .section-help {
    grid-column: 2;
    grid-row: 1;
  }

  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-collapse-chevron {
    position: static;
    top: auto;
    right: auto;
    grid-column: 3;
    grid-row: 1;
  }

}

@media (prefers-reduced-motion: reduce) {
  #view-programs .session-collapse-chevron {
    transition: none !important;
  }
}

/* End V4.8 Program block header system ------------------------- */

/* V4.9 Program carousel edge affordances
   Quiet edge fades separate navigation controls from partially visible cards,
   so labels never compete with the arrows. */
@media (max-width: 768px) {
  #view-programs .weekly-carousel::before,
  #view-programs .weekly-carousel::after,
  #view-programs .day-anchor-shell::before,
  #view-programs .day-anchor-shell::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 42px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-fast) ease;
  }

  #view-programs .weekly-carousel::before,
  #view-programs .day-anchor-shell::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-base) 20%, color-mix(in srgb, var(--bg-base) 84%, transparent) 62%, transparent);
  }

  #view-programs .weekly-carousel::after,
  #view-programs .day-anchor-shell::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg-base) 20%, color-mix(in srgb, var(--bg-base) 84%, transparent) 62%, transparent);
  }

  #view-programs .weekly-carousel.can-scroll-left::before,
  #view-programs .day-anchor-shell.can-scroll-left::before,
  #view-programs .weekly-carousel.can-scroll-right::after,
  #view-programs .day-anchor-shell.can-scroll-right::after {
    opacity: 1;
  }

  #view-programs .weekly-carousel-arrow {
    z-index: 5;
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    opacity: 0.86;
  }

  #view-programs .weekly-carousel-arrow span {
    font-size: 18px;
  }

  #view-programs .weekly-carousel-arrow--prev { left: 0; }
  #view-programs .weekly-carousel-arrow--next { right: 0; }

  #view-programs .day-anchor-shell.can-scroll-left .day-anchor-bar {
    padding-left: 38px;
    scroll-padding-left: 38px;
  }

  #view-programs .day-anchor-shell.can-scroll-right .day-anchor-bar {
    padding-right: 38px;
    scroll-padding-right: 38px;
  }

  #view-programs .day-anchor-arrow {
    z-index: 5;
    width: 28px;
    height: 28px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    opacity: 0.88;
  }

  #view-programs .day-anchor-arrow span {
    font-size: 17px;
  }

  #view-programs .day-anchor-arrow--prev { left: 1px; }
  #view-programs .day-anchor-arrow--next { right: 1px; }
}

@media (max-width: 640px) {
  #view-programs .programs-hero__stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

/* End V4.9 Program carousel edge affordances ------------------- */

/* V4.10 Session entry action
   A single primary action removes the last bit of planning from the day view
   and lands the athlete at the correct first block. */
#view-programs .session-start-btn {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 172px;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 14px 8px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 75%, var(--border-hard));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  color: var(--ink-on-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent);
  cursor: pointer;
}

#view-programs .session-start-btn__icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--ink-on-accent) 13%, transparent);
}

#view-programs .session-start-btn__copy {
  display: grid;
  gap: 1px;
  text-align: left;
}

#view-programs .session-start-btn__copy strong {
  font-size: var(--text-sm);
  line-height: 1.05;
}

#view-programs .session-start-btn__copy small {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  opacity: 0.74;
}

@media (hover: hover) and (pointer: fine) {
  #view-programs .session-start-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}

@media (max-width: 768px) {
  #view-programs .session-start-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-programs .session-start-btn {
    transition: none !important;
  }
}

/* End V4.10 Session entry action -------------------------------- */

/* V4.11 Restrained Program navigation and section rows
   This replaces the pill-heavy prototype with a quiet list hierarchy:
   one neutral card, one small semantic label, one title, and one disclosure. */
#view-programs .session-block,
#view-programs .session-section {
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  box-shadow: none;
}

#view-programs .session-block-header {
  grid-template-columns: minmax(0, 1fr) auto 36px;
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  row-gap: 3px;
  min-height: 64px;
  align-items: center;
}

#view-programs .session-block-header::before {
  display: none;
}

#view-programs .session-block-header > .session-time-badge,
#view-programs .session-hypertrophy > .session-block-header > .session-time-badge {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--sb-accent, var(--color-primary)) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
}

#view-programs .session-block-header > .session-time-badge svg {
  width: 14px;
  height: 14px;
}

#view-programs .session-block-header > .session-block-title,
#view-programs .session-hypertrophy > .session-block-header > .session-block-title {
  grid-column: 1 / 3;
  grid-row: 2;
  min-width: 0;
  padding: 0;
  color: var(--color-text);
  font-size: clamp(19px, 2.15vw, 24px);
  font-weight: 760;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

#view-programs .session-block-header > .section-help {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  width: auto;
  min-width: 40px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 7px;
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  justify-self: end;
  cursor: help;
}

#view-programs .session-block-header > .session-collapse-chevron,
#view-programs .session-hypertrophy > .session-block-header > .session-collapse-chevron {
  position: static;
  top: auto;
  right: auto;
  grid-column: 3;
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-muted);
  box-shadow: none;
}

#view-programs .session-collapse-chevron::before {
  width: 7px;
  height: 7px;
  border-width: 0 1.5px 1.5px 0;
}

#view-programs .session-hypertrophy > .session-block-header {
  grid-template-columns: minmax(0, 1fr) auto 36px;
}

#view-programs .session-guide-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 2px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}

#view-programs .session-hypertrophy.is-collapsed .session-guide-actions {
  display: none;
}

#view-programs .session-guide-actions__label {
  flex: 0 0 auto;
  margin-right: 5px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#view-programs .session-guide-actions > .section-help {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

#view-programs .session-guide-actions > .section-help::before {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  #view-programs .session-block-header[role='button']:hover > .session-collapse-chevron,
  #view-programs details.session-collapsible > .session-block-header:hover > .session-collapse-chevron,
  #view-programs .session-block-header > .section-help:hover,
  #view-programs .session-guide-actions > .section-help:hover {
    border-color: transparent;
    background: var(--color-surface-2);
    color: var(--color-text);
  }
}

#view-programs .day-anchor-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}

#view-programs .day-anchor-shell::before,
#view-programs .day-anchor-shell::after {
  display: none;
}

#view-programs .day-anchor-shell .day-anchor-bar,
#view-programs .day-anchor-shell.can-scroll-left .day-anchor-bar,
#view-programs .day-anchor-shell.can-scroll-right .day-anchor-bar {
  grid-column: 2;
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  flex-wrap: nowrap;
  border: 0;
  background: transparent;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
}

#view-programs .day-anchor-shell .day-anchor-bar::-webkit-scrollbar {
  display: none;
}

#view-programs .day-anchor-btn {
  display: inline-flex;
  flex: 0 0 128px;
  width: 128px;
  min-width: 128px;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 740;
  white-space: nowrap;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

#view-programs .day-anchor-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--accent);
}

#view-programs .day-anchor-btn::after {
  content: '';
  width: 8px;
  height: 10px;
  flex: 0 0 8px;
  margin-left: auto;
  background: currentColor;
  clip-path: polygon(40% 0, 60% 0, 60% 58%, 100% 58%, 50% 100%, 0 58%, 40% 58%);
  opacity: 0.58;
}

#view-programs .day-anchor-btn:hover,
#view-programs .day-anchor-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 8%, var(--color-surface));
  color: var(--color-text);
}

#view-programs .day-anchor-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
  outline-offset: 1px;
}

#view-programs .day-anchor-btn:active {
  transform: translateY(1px);
}

#view-programs .day-anchor-arrow {
  position: static;
  top: auto;
  z-index: 1;
  display: none;
  width: 44px;
  min-width: 44px;
  height: auto;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  transform: none;
  border: 0;
  border-radius: 0;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  box-shadow: none;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#view-programs .day-anchor-arrow--prev {
  grid-column: 1;
  border-right: 1px solid var(--border-soft);
}

#view-programs .day-anchor-arrow--next {
  grid-column: 3;
  border-left: 1px solid var(--border-soft);
}

#view-programs .day-anchor-arrow:active {
  transform: none;
  background: color-mix(in srgb, var(--accent) 7%, var(--color-surface));
}

#view-programs .day-anchor-arrow:disabled {
  display: none;
}

@media (max-width: 768px) {
  #view-programs .day-anchor-arrow:not(:disabled) {
    display: grid;
  }

  #view-programs .day-anchor-arrow span {
    font-size: 18px;
    transform: translateY(-1px);
  }
}

@media (width < 400px) {
  #view-programs .session-block-header,
  #view-programs details.session-collapsible > .session-block-header,
  #view-programs .session-hypertrophy > .session-block-header,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    grid-template-rows: auto auto;
    column-gap: var(--space-2);
    row-gap: 3px;
  }

  #view-programs .session-block-header > .session-time-badge,
  #view-programs .session-hypertrophy > .session-block-header > .session-time-badge,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-time-badge {
    grid-column: 1;
    grid-row: 1;
  }

  #view-programs .session-block-header > .session-block-title,
  #view-programs .session-hypertrophy > .session-block-header > .session-block-title,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-block-title {
    grid-column: 1 / 3;
    grid-row: 2;
    padding: 0;
    font-size: 19px;
  }

  #view-programs .session-block-header > .section-help,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .section-help {
    grid-column: 2;
    grid-row: 1;
  }

  #view-programs .session-block-header > .session-collapse-chevron,
  #view-programs .session-hypertrophy > .session-block-header > .session-collapse-chevron,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-collapse-chevron {
    position: static;
    grid-column: 3;
    grid-row: 1 / 3;
  }

  #view-programs .session-guide-actions {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* End V4.11 Restrained Program navigation and section rows ------ */

/* V4.12 Program help affordances and disclosure alignment
   Native details and scripted blocks share the same three-column header.
   Help stays beside its semantic label while disclosure stays at the far edge. */
#view-programs .session-block-header,
#view-programs details.session-collapsible > .session-block-header,
#view-programs .session-hypertrophy > .session-block-header,
#view-programs .session-block:not(.session-hypertrophy) > .session-block-header {
  grid-template-columns: auto minmax(0, 1fr) 36px;
  grid-template-rows: auto auto;
}

#view-programs .session-block-header > .session-time-badge,
#view-programs .session-hypertrophy > .session-block-header > .session-time-badge,
#view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-time-badge {
  grid-column: 1;
  grid-row: 1;
}

#view-programs .session-block-header > .session-block-title,
#view-programs .session-hypertrophy > .session-block-header > .session-block-title,
#view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-block-title {
  grid-column: 1 / 3;
  grid-row: 2;
}

#view-programs .session-block-header > .section-help,
#view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .section-help {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

#view-programs .session-block-header > .session-collapse-chevron,
#view-programs details.session-collapsible > .session-block-header > .session-collapse-chevron,
#view-programs .session-hypertrophy > .session-block-header > .session-collapse-chevron,
#view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-collapse-chevron {
  grid-column: 3;
  grid-row: 1 / 3;
}

#view-programs .session-block-header > .section-help,
#view-programs .session-guide-actions > .section-help {
  gap: 6px;
  color: var(--ink-secondary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 58%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}

#view-programs .session-block-header > .section-help::before,
#view-programs .session-guide-actions > .section-help::before {
  content: 'i';
  display: grid;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.tooltip-box {
  width: min(260px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
}

/* End V4.12 Program help affordances and disclosure alignment ----- */

/* ============================================================
   V4.13 Responsive workout logger
   A viewport-contained dialog with readable set cards at every width.
   ============================================================ */

body.session-log-open {
  overflow: hidden;
}

.session-log-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 180ms var(--ease-standard);
}

.session-log-overlay.is-visible {
  opacity: 1;
}

.session-log-overlay__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, #050507 76%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: default;
}

.session-log-overlay .session-log-widget {
  position: relative;
  z-index: 1;
  width: min(840px, calc(100vw - 32px));
  margin: 0;
  font-size: var(--text-sm);
  transform: translateY(10px) scale(0.99);
  transition: transform 200ms var(--ease-standard);
}

.session-log-overlay.is-visible .session-log-widget {
  transform: translateY(0) scale(1);
}

.session-log-overlay .session-log-toggle,
.session-log-overlay .session-log-last {
  display: none !important;
}

.session-log-overlay .session-log-form,
.session-log-overlay .session-log-widget.expanded .session-log-form {
  display: flex;
  width: 100%;
  height: min(760px, calc(100dvh - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-hard));
  border-radius: 20px;
  background: var(--bg-elevated);
  box-shadow:
    0 32px 80px color-mix(in srgb, #000 58%, transparent),
    0 10px 28px color-mix(in srgb, #000 28%, transparent);
  color: var(--ink-primary);
}

.session-log-overlay .session-log-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: var(--space-4);
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--accent) 3%, var(--bg-elevated));
}

.session-log-heading__copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.session-log-overlay .session-log-heading__eyebrow {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.session-log-overlay .session-log-heading__title {
  overflow-wrap: anywhere;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.12;
}

.session-log-heading__close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  font-family: var(--font-body);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.session-log-heading__close:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-2));
  color: var(--accent);
}

.session-log-heading__close:active {
  transform: scale(0.95);
}

.session-log-heading__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.session-log-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.session-log-overlay .session-log-date-row {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 3%, var(--color-surface-2));
  color: var(--ink-secondary);
}

.session-log-date-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.session-log-date-label,
.session-log-notes-label {
  color: var(--ink-primary);
  font-size: var(--text-sm);
  font-weight: 750;
}

.session-log-date-help {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.session-log-overlay .session-log-form input.session-log-date {
  flex: 0 0 auto;
  min-width: 174px;
  min-height: 44px;
  padding: 0 12px;
  border-color: var(--border-hard);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--ink-primary);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.session-log-overlay .session-log-form input.session-log-date:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.session-log-overlay .session-log-mods {
  margin: 0 0 var(--space-4);
}

.session-log-overlay .set-rows {
  gap: 12px;
  margin: 0 0 12px;
}

.session-log-overlay .set-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 2.5%, var(--color-surface-2));
  box-shadow: none;
}

.session-log-overlay .set-row__content {
  display: contents;
}

.session-log-overlay .set-delete-action,
.session-log-overlay .set-delete-handle {
  display: none;
}

.session-log-overlay .set-row:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 3%, var(--color-surface-2));
}

.session-log-overlay .set-row > * {
  justify-self: stretch;
  align-self: stretch;
}

.set-row__header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 46px;
}

.set-row__identity {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.session-log-overlay .set-field--num {
  display: inline-flex;
  min-width: 0;
  gap: 6px;
}

.set-num-label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-log-overlay .set-num {
  width: 28px;
  height: 28px;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-2));
  box-shadow: none;
  color: var(--accent);
  font-size: 13px;
}

.session-log-overlay .set-side {
  display: inline-grid;
  width: 34px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.session-log-overlay .set-field--prev {
  display: inline-flex;
}

.session-log-overlay button.set-prev {
  display: inline-flex;
  width: auto;
  min-width: 0;
  max-width: 220px;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 1;
}

.session-log-overlay button.set-prev span {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.session-log-overlay .set-delta {
  margin: 0;
}

.session-log-overlay .set-row__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.session-log-overlay .set-field--load,
.session-log-overlay .set-field--metric,
.session-log-overlay .set-field--effort {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.session-log-overlay .set-field-label {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-log-overlay .stepper {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border-color: var(--border-hard);
  border-radius: 12px;
  background: var(--bg-elevated);
}

.session-log-overlay .stepper .set-input {
  width: auto;
  min-width: 0;
  min-height: 48px;
  flex: 1 1 0;
  padding: 0 4px;
  color: var(--ink-primary);
  font-size: 1.15rem;
}

.session-log-overlay .stepper-btn {
  width: 46px;
  min-width: 46px;
  min-height: 48px;
  flex: 0 0 46px;
  color: var(--ink-secondary);
}

.session-log-overlay .effort-scale {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 0;
}

.session-log-overlay .effort-trigger {
  display: grid;
  width: 100%;
  height: 50px;
  min-width: 0;
  padding: 0 12px;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--ink-primary);
  text-align: left;
}

.session-log-overlay .effort-trigger:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-hard));
  color: var(--ink-primary);
}

.session-log-overlay .effort-trigger.is-selected {
  border-style: solid;
  background: var(--bg-elevated);
  color: var(--ink-primary);
}

.effort-trigger-swatch {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px dashed var(--border-hard);
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 800;
}

.session-log-overlay .effort-trigger.is-selected .effort-trigger-swatch {
  border-style: solid;
}

.session-log-overlay .effort-trigger--easy .effort-trigger-swatch {
  border-color: #22a95f;
  background: #22a95f;
}

.session-log-overlay .effort-trigger--moderate .effort-trigger-swatch {
  border-color: #72a61f;
  background: #72a61f;
}

.session-log-overlay .effort-trigger--hard .effort-trigger-swatch {
  border-color: #d69a00;
  background: #d69a00;
}

.session-log-overlay .effort-trigger--near .effort-trigger-swatch {
  border-color: #ed7a25;
  background: #ed7a25;
}

.session-log-overlay .effort-trigger--failure .effort-trigger-swatch {
  border-color: #d73c3c;
  background: #d73c3c;
}

.session-log-overlay .effort-trigger-text {
  max-width: none;
  overflow: hidden;
  color: var(--ink-primary);
  font-size: var(--text-sm);
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-log-overlay .effort-trigger-chevron {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--ink-muted);
  font-size: 0;
  transition: transform 140ms ease;
}

.session-log-overlay .effort-trigger-chevron::before {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: '';
  transform: rotate(45deg) translate(-1px, -1px);
}

.session-log-overlay .effort-scale.is-open .effort-trigger-chevron {
  transform: rotate(180deg);
}

.session-log-overlay .effort-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(296px, calc(100vw - 40px));
  min-width: 0;
  max-height: min(320px, calc(100dvh - 40px));
  margin: 0;
  box-sizing: border-box;
  border-color: var(--border-hard);
  background: var(--bg-elevated);
  box-shadow:
    0 18px 42px color-mix(in srgb, #000 42%, transparent),
    0 4px 14px color-mix(in srgb, #000 24%, transparent);
  overflow-y: auto;
  z-index: 120;
}

.session-log-overlay .effort-dot {
  min-height: 46px;
}

.session-log-overlay .effort-scale.opens-up .effort-popover {
  top: auto;
  bottom: calc(100% + 8px);
}

.session-log-overlay .effort-scale.is-open {
  z-index: 121;
}

.session-log-overlay .effort-scale.is-open .effort-popover {
  display: flex;
}

.session-log-overlay .effort-scale.is-open .effort-dot {
  min-width: 0;
  min-height: 0;
  padding: 7px 10px;
}

.session-log-overlay .effort-scale.is-open .effort-dot-labels {
  gap: 0;
}

.session-log-overlay .effort-scale.is-open .effort-dot-main {
  line-height: 1.15;
}

.session-log-overlay .effort-scale.is-open .effort-dot-desc {
  line-height: 1.2;
}

@media (max-width: 660px) {
  .session-log-overlay .effort-popover {
    right: auto;
    left: 0;
    width: 100%;
  }
}

.session-log-overlay .set-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  font-size: 20px;
}

.session-log-overlay .set-remove:hover {
  border-color: color-mix(in srgb, var(--color-error) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  color: var(--color-error);
}

.session-log-overlay .set-add {
  min-height: 48px;
  margin: 0 0 var(--space-4);
  border-color: var(--border-hard);
  border-radius: 12px;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
}

.session-log-overlay .set-add:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.session-log-notes-field {
  display: grid;
  gap: 8px;
}

.session-log-notes-label span {
  color: var(--ink-muted);
  font-weight: 500;
}

.session-log-overlay .session-log-form textarea.session-log-notes {
  min-height: 96px;
  margin: 0;
  padding: 12px 14px;
  border-color: var(--border-hard);
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font-size: var(--text-base);
  line-height: 1.45;
}

.session-log-overlay .session-log-form textarea.session-log-notes:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.session-log-overlay .session-log-actions {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(110px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 76px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--accent) 2%, var(--bg-elevated));
}

.session-log-overlay .session-log-actions .session-log-close {
  margin: 0;
}

.session-log-overlay .session-log-save,
.session-log-overlay .session-log-close {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: var(--text-sm);
}

.session-log-overlay .session-log-save {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.session-log-overlay .session-log-close {
  border-color: var(--border-hard);
  background: var(--color-surface-2);
  color: var(--ink-secondary);
}

.session-log-overlay .session-log-status {
  min-width: 0;
  color: var(--signal-ok);
  line-height: 1.35;
  text-align: right;
}

@media (max-width: 660px) {
  .session-log-overlay {
    align-items: end;
    padding: 8px;
  }

  .session-log-overlay .session-log-widget {
    width: calc(100vw - 16px);
    transform: translateY(20px);
  }

  .session-log-overlay .session-log-form,
  .session-log-overlay .session-log-widget.expanded .session-log-form {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  .session-log-overlay .session-log-heading {
    padding: 16px;
  }

  .session-log-body {
    padding: 16px;
    scrollbar-gutter: auto;
  }

  .session-log-overlay .session-log-date-row {
    margin-bottom: 12px;
  }

  .session-log-overlay .set-row {
    gap: 12px;
    padding: 14px;
  }

  .session-log-overlay .set-row__controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-log-overlay .set-field--effort {
    grid-column: 1 / -1;
  }

  .session-log-overlay .stepper-btn {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }

  .session-log-overlay .session-log-actions {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 0.48fr);
    min-height: 76px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .session-log-overlay .session-log-status {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 399px) {
  .session-log-overlay {
    padding: 4px;
  }

  .session-log-overlay .session-log-widget {
    width: calc(100vw - 8px);
  }

  .session-log-overlay .session-log-form,
  .session-log-overlay .session-log-widget.expanded .session-log-form {
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    border-radius: 16px;
  }

  .session-log-overlay .session-log-heading {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 14px;
  }

  .session-log-overlay .session-log-heading__title {
    font-size: 1.2rem;
  }

  .session-log-heading__close {
    width: 40px;
    height: 40px;
  }

  .session-log-body {
    padding: 12px;
  }

  .session-log-overlay .session-log-date-row {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 11px;
  }

  .session-log-date-help {
    display: none;
  }

  .session-log-overlay .session-log-form input.session-log-date {
    width: 100%;
    min-width: 0;
  }

  .session-log-overlay .set-row {
    padding: 12px;
  }

  .set-row__header {
    padding-right: 42px;
  }

  .session-log-overlay .set-row__controls {
    gap: 8px;
  }

  .session-log-overlay .stepper-btn {
    width: 40px;
    min-width: 40px;
    flex-basis: 40px;
  }

  .session-log-overlay .stepper .set-input {
    font-size: var(--text-base);
  }

  .session-log-overlay .set-remove {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .session-log-overlay .session-log-actions {
    padding-inline: 12px;
  }

  .session-log-overlay .session-log-save,
  .session-log-overlay .session-log-close {
    padding-inline: 12px;
  }
}

@media (max-width: 340px) {
  .session-log-overlay .set-row__controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-log-overlay .set-field--effort {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-log-overlay,
  .session-log-overlay .session-log-widget {
    transition: none;
  }
}

/* End V4.13 Responsive workout logger -------------------------- */

/* V4.14 Compact Program carousel and centered disclosures
   Edge controls keep a stable, quiet footprint while CSS-drawn chevrons
   stay optically centered in every collapsed and expanded state. */
@media (max-width: 768px) {
  #view-programs .day-anchor-shell {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  #view-programs .day-anchor-arrow,
  #view-programs .day-anchor-arrow:not(:disabled),
  #view-programs .day-anchor-arrow:disabled {
    display: grid;
    width: 36px;
    min-width: 36px;
    min-height: 52px;
    place-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #view-programs .day-anchor-arrow:not(:disabled) {
    visibility: visible;
    color: color-mix(in srgb, var(--ink-secondary) 82%, transparent);
    opacity: 0.82;
  }

  #view-programs .day-anchor-arrow:disabled {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }

  #view-programs .day-anchor-arrow--prev,
  #view-programs .day-anchor-arrow--next {
    border: 0;
  }

  #view-programs .day-anchor-arrow span {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    font-size: 0;
    transform: none;
  }

  #view-programs .day-anchor-arrow span::before {
    content: '';
    position: absolute;
    inset: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
  }

  #view-programs .day-anchor-arrow--prev span::before {
    transform: rotate(135deg);
  }

  #view-programs .day-anchor-arrow:not(:disabled):hover,
  #view-programs .day-anchor-arrow:not(:disabled):focus-visible,
  #view-programs .day-anchor-arrow:not(:disabled):active {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
    opacity: 1;
  }

  #view-programs .day-anchor-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    gap: 6px;
    padding-inline: 13px;
    font-size: 11px;
  }

  #view-programs .day-anchor-btn svg {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }
}

@media (max-width: 599px) {
  #view-programs .day-anchor-shell .day-anchor-bar::after {
    content: '';
    flex: 0 0 8px;
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  #view-programs .day-anchor-shell {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }

  #view-programs .day-anchor-arrow,
  #view-programs .day-anchor-arrow:not(:disabled),
  #view-programs .day-anchor-arrow:disabled {
    display: none;
    width: 0;
    min-width: 0;
  }

  #view-programs .day-anchor-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    font-size: 12px;
  }
}

#view-programs .session-block-header > .session-collapse-chevron,
#view-programs details.session-collapsible > .session-block-header > .session-collapse-chevron,
#view-programs .session-hypertrophy > .session-block-header > .session-collapse-chevron,
#view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-collapse-chevron,
#view-programs .session-collapsible-js.is-collapsed > .session-block-header > .session-collapse-chevron,
#view-programs details.session-collapsible:not([open]) > .session-block-header > .session-collapse-chevron,
#view-programs details.session-collapsible[open] > .session-block-header > .session-collapse-chevron {
  display: grid;
  place-items: center;
  transform: none;
}

#view-programs .session-collapse-chevron::before {
  width: 8px;
  height: 8px;
  border-width: 0 1.75px 1.75px 0;
  transform: translateY(-2.5px) rotate(45deg);
  transform-origin: center;
}

#view-programs .session-collapsible-js.is-collapsed > .session-block-header > .session-collapse-chevron::before,
#view-programs details.session-collapsible:not([open]) > .session-block-header > .session-collapse-chevron::before {
  transform: translateX(-2.5px) rotate(-45deg);
}

#view-programs details.session-collapsible[open] > .session-block-header > .session-collapse-chevron::before {
  transform: translateY(-2.5px) rotate(45deg);
}

/* End V4.14 Compact Program carousel and centered disclosures --- */

/* V4.15 Restrained day summary and exercise rows
   The session entry and exercise checklist now use the same quiet hierarchy
   as the Program section cards. Accent color communicates meaning and action
   without turning metadata or whole controls into competing blocks. */
@media screen {
  #view-programs .day-detail {
    overflow: hidden;
    border-color: var(--border-soft);
    background: var(--color-surface);
    box-shadow: none;
  }

  #view-programs .day-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-5);
    padding: var(--space-5);
    border-left: 0;
    border-bottom: 1px solid var(--border-soft);
    background: var(--color-surface);
  }

  #view-programs .day-detail-header > div {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
  }

  #view-programs .day-detail-header .day-label-sm {
    flex: 1 0 100%;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    opacity: 1;
    text-transform: uppercase;
  }

  #view-programs .day-detail-header h2 {
    flex: 1 0 100%;
    margin: -2px 0 2px;
    color: var(--ink-primary);
    font-size: clamp(23px, 3.2vw, 30px);
    font-weight: 780;
    letter-spacing: -0.018em;
    line-height: 1.08;
  }

  #view-programs .day-detail-header .day-schedule-pills {
    display: inline-flex;
    width: auto;
    margin: 0 !important;
    gap: 12px;
  }

  #view-programs .day-detail-header .day-schedule-pill {
    min-height: 24px;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  #view-programs .day-detail-header .day-schedule-pill.skill {
    color: var(--signal-info);
  }

  #view-programs .day-detail-header .day-schedule-pill svg {
    width: 14px;
    height: 14px;
  }

  #view-programs .day-detail-header .progress-context-chip {
    min-height: 24px;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: 0.02em;
    backdrop-filter: none;
  }

  #view-programs .day-detail-header .progress-context-chip::before {
    content: '';
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: var(--radius-full);
    background: var(--border-hard);
  }

  #view-programs .day-detail-header .pcc-week {
    color: var(--ink-secondary);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.065em;
    opacity: 1;
  }

  #view-programs .day-detail-header .pcc-sep {
    opacity: 0.46;
  }

  #view-programs .day-detail-header .pcc-sessions {
    opacity: 1;
  }

  #view-programs .session-start-btn {
    min-width: 176px;
    min-height: 52px;
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 14px 7px 8px;
    border-color: var(--border-hard);
    border-radius: 12px;
    background: var(--color-surface-2);
    color: var(--ink-primary);
    box-shadow: none;
    transition:
      border-color 150ms ease,
      background 150ms ease,
      color 150ms ease,
      transform 150ms ease;
  }

  #view-programs .session-start-btn__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    background: var(--accent);
    color: var(--ink-on-accent);
  }

  #view-programs .session-start-btn__copy {
    gap: 2px;
  }

  #view-programs .session-start-btn__copy strong {
    color: var(--ink-primary);
    font-size: 13px;
    font-weight: 780;
  }

  #view-programs .session-start-btn__copy small {
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 620;
    opacity: 1;
  }

  #view-programs .ex-list {
    gap: 7px;
  }

  #view-programs .ex-card {
    border-color: var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
    transition:
      border-color 150ms ease,
      background 150ms ease;
  }

  #view-programs .ex-card:hover {
    border-color: var(--border-hard);
    background: color-mix(in srgb, var(--accent) 2.5%, var(--color-surface-2));
  }

  #view-programs .ex-card__summary {
    grid-template-columns: 20px 56px minmax(0, 1fr) auto 40px;
    gap: 12px;
    min-height: 82px;
    padding: 11px 12px 11px 16px;
  }

  #view-programs .ex-card__summary:hover {
    background: transparent;
  }

  #view-programs .ex-card__index {
    width: 20px;
    height: 28px;
    min-width: 20px;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
  }

  #view-programs .ex-card__thumb {
    width: 56px;
    height: 56px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--color-surface);
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    color: var(--ink-primary);
    font-size: 14px;
    font-weight: 740;
    line-height: 1.24;
  }

  #view-programs .link-play-icon {
    color: var(--accent);
    opacity: 0.62;
  }

  #view-programs .ex-card__prescription {
    min-height: 28px;
    margin-top: 4px;
    gap: 4px;
  }

  #view-programs .ex-card__rx {
    min-height: 28px;
    color: var(--ink-primary);
    font-size: 12px;
    font-weight: 720;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rir-inline {
    min-height: 28px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 10px;
  }

  #view-programs .ex-card__rest-pill {
    color: var(--ink-muted);
  }

  #view-programs .ex-card__rest-pill:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--accent) 7%, var(--color-surface));
    color: var(--ink-primary);
  }

  #view-programs .ex-card__rest-label {
    font-size: 9px;
    letter-spacing: 0.065em;
  }

  #view-programs .ex-card__rir-inline {
    color: var(--accent);
    font-weight: 760;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 50px;
    min-height: 40px;
    padding: 0 10px;
    border-color: var(--border-hard);
    border-radius: 10px;
    background: transparent;
    color: var(--ink-primary);
    font-size: 11px;
    font-weight: 760;
  }

  #view-programs .session-log-toggle:hover {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: var(--accent);
  }

  #view-programs .ex-card__chevron {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  #view-programs .ex-card.is-expanded,
  #view-programs .ex-card.is-expanded:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-hard));
    background: var(--color-surface-2);
  }

  #view-programs .ex-card.is-expanded .ex-card__summary {
    background: transparent;
  }
}

@media screen and (hover: hover) and (pointer: fine) {
  #view-programs .session-start-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
    box-shadow: none;
    transform: translateY(-1px);
  }
}

@media screen and (max-width: 768px) {
  #view-programs .day-detail-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

@media screen and (min-width: 900px) {
  #view-programs .ex-card__info {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
  }

  #view-programs .ex-card__prescription {
    justify-self: end;
    margin-top: 0;
  }
}

@media screen and (max-width: 640px) {
  #view-programs .day-detail-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  #view-programs .day-detail-header > div {
    gap: 6px 10px;
  }

  #view-programs .day-detail-header h2 {
    font-size: clamp(21px, 6.4vw, 25px);
  }

  #view-programs .day-detail-header .day-schedule-pill,
  #view-programs .day-detail-header .progress-context-chip,
  #view-programs .day-detail-header .pcc-week {
    font-size: 9px;
  }

  #view-programs .session-start-btn {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
  }

  #view-programs .session-start-btn__icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  #view-programs .ex-card__summary {
    grid-template-columns: 18px 48px minmax(0, 1fr) 46px;
    grid-template-areas:
      "index thumb name toggle"
      "meta meta meta log";
    column-gap: 8px;
    row-gap: 5px;
    padding: 10px 10px 10px 12px;
  }

  #view-programs .ex-card__index {
    width: 18px;
    min-width: 18px;
    height: 24px;
    font-size: 10px;
  }

  #view-programs .ex-card__thumb {
    width: 48px;
    height: 48px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 12px;
  }

  #view-programs .ex-card__prescription {
    min-width: 0;
    gap: 1px;
  }

  #view-programs .ex-card__rx {
    flex: 0 0 auto;
    min-height: 26px;
    font-size: 11px;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rir-inline {
    min-height: 26px;
    padding-inline: 5px;
    font-size: 9px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 46px;
    min-height: 40px;
    padding-inline: 7px;
  }

  #view-programs .ex-card__chevron {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

@media screen and (width < 400px) {
  #view-programs .day-detail-header {
    padding: 14px;
  }

  #view-programs .day-detail-header .progress-context-chip::before {
    display: none;
  }

  #view-programs .day-detail-header .pcc-sessions {
    display: none;
  }

  #view-programs .ex-card__summary {
    grid-template-columns: 16px 44px minmax(0, 1fr) 44px;
    padding-inline: 9px;
  }

  #view-programs .ex-card__thumb {
    width: 44px;
    height: 44px;
  }

  #view-programs .ex-card__chevron {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rir-inline {
    padding-inline: 2px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 44px;
    padding-inline: 5px;
  }
}

@media screen and (width <= 360px) {
  #view-programs .ex-card__rir-inline {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-inline: 0;
  }
}

/* V4.30 Stable effort popover and lighter exercise names */
#view-programs .ex-card__title-link,
#view-programs .ex-card__title-link a,
#view-programs .ex-card__title-link .exercise-name-text,
#view-programs .skill-reference-card__title,
#view-programs .skill-reference-card__title .exercise-name-link,
#view-programs .skill-reference-card__title .exercise-name-text,
#view-catalog .card-name {
  font-weight: 600 !important;
}

@media screen and (max-width: 660px) {
  .session-log-overlay .session-log-date-row {
    display: grid;
    min-height: 60px;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px 10px;
  }

  .session-log-overlay .session-log-date-copy {
    display: block;
  }

  .session-log-overlay .session-log-date-label {
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .session-log-overlay .session-log-date-help {
    display: none;
  }

  .session-log-overlay .session-log-form input.session-log-date {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
    box-sizing: border-box;
    font-size: 15px;
  }

  .session-log-overlay .set-rows {
    gap: 8px;
    margin-bottom: 8px;
  }

  .session-log-overlay .set-row {
    grid-template-columns: 42px minmax(0, 1fr) 44px;
    grid-template-rows: auto;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .session-log-overlay .set-row__header {
    grid-column: 1;
    grid-row: 1;
    min-height: 44px;
    align-self: start;
    padding: 0;
  }

  .session-log-overlay .set-row__identity {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 5px;
  }

  .session-log-overlay .set-field--num {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .session-log-overlay .set-num {
    width: 30px;
    height: 30px;
  }

  .session-log-overlay button.set-prev {
    width: 40px;
    max-width: 40px;
    min-height: 24px;
    justify-content: center;
    padding: 3px 4px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-log-overlay button.set-prev span {
    display: none;
  }

  .session-log-overlay .set-row__controls {
    grid-column: 2;
    grid-row: 1;
    gap: 8px;
  }

  .session-log-overlay .set-field--load,
  .session-log-overlay .set-field--metric,
  .session-log-overlay .set-field--effort {
    gap: 5px;
  }

  .session-log-overlay .set-field-label,
  .session-log-overlay .set-num-label {
    font-size: 9px;
  }

  .session-log-overlay .stepper,
  .session-log-overlay .effort-trigger {
    min-height: 44px;
    height: 44px;
  }

  .session-log-overlay .stepper .set-input {
    min-height: 42px;
    font-size: 1rem;
  }

  .session-log-overlay .stepper-btn {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    flex-basis: 42px;
  }

  .session-log-overlay .set-remove {
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-self: start;
    justify-self: end;
  }
}

@media screen and (max-width: 340px) {
  .session-log-overlay .session-log-date-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .session-log-overlay .session-log-date-label {
    font-size: 12px;
  }

  .session-log-overlay .session-log-form input.session-log-date {
    font-size: 14px;
  }

  .session-log-overlay .set-row {
    grid-template-columns: 38px minmax(0, 1fr) 40px;
    gap: 6px;
    padding: 9px 8px;
  }

  .session-log-overlay .set-remove {
    width: 40px;
    height: 44px;
    min-width: 40px;
  }
}

/* End V4.30 Stable effort popover and lighter exercise names ----- */

@media screen and (prefers-reduced-motion: reduce) {
  #view-programs .day-detail,
  #view-programs .session-start-btn,
  #view-programs .ex-card {
    transition: none !important;
  }
}

/* End V4.15 Restrained day summary and exercise rows ------------ */

/* V4.16 Exercise action card
   The exercise identity, prescription, and actions now occupy distinct zones.
   Rest timing is presented as an explicit action instead of passive metadata. */
@media screen {
  #view-programs .ex-list {
    gap: 10px;
  }

  #view-programs .ex-card {
    border-color: var(--border-soft);
    border-radius: 14px;
    background: var(--color-surface);
  }

  #view-programs .ex-card__summary {
    display: grid;
    grid-template-columns: 64px minmax(220px, 1fr) auto auto 40px;
    grid-template-rows: 16px auto;
    grid-template-areas:
      "thumb index stats actions toggle"
      "thumb identity stats actions toggle";
    align-items: center;
    column-gap: 16px;
    row-gap: 3px;
    min-height: 92px;
    padding: 14px 16px;
  }

  #view-programs .ex-card__index {
    grid-area: index;
    display: inline-flex;
    width: auto;
    height: auto;
    min-width: 0;
    align-items: center;
    justify-self: start;
    gap: 5px;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  #view-programs .ex-card__index > span {
    color: var(--ink-muted);
    font-size: 8px;
    font-weight: 720;
  }

  #view-programs .ex-card__thumb {
    grid-area: thumb;
    width: 64px;
    height: 64px;
    align-self: center;
    border-color: var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  #view-programs .ex-card__info {
    grid-area: identity;
    display: block;
    min-width: 0;
  }

  #view-programs .ex-card__name {
    min-width: 0;
    flex-wrap: nowrap;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 15px;
    font-weight: 760;
    line-height: 1.2;
  }

  #view-programs .ex-card__prescription {
    grid-area: stats;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding-left: 16px;
    flex-wrap: nowrap;
    border-left: 1px solid var(--border-soft);
  }

  #view-programs .ex-card__rx,
  #view-programs .ex-card__rir-inline {
    display: grid;
    min-width: 0;
    min-height: 0;
    align-content: center;
    gap: 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
  }

  #view-programs .ex-card__metric-label {
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
  }

  #view-programs .ex-card__rx strong,
  #view-programs .ex-card__rir-inline strong {
    color: var(--ink-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.15;
  }

  #view-programs .ex-card__rir-inline strong {
    color: var(--accent);
  }

  #view-programs .ex-card__actions {
    grid-area: actions;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid var(--border-soft);
  }

  #view-programs .ex-card__rest-pill {
    display: inline-flex;
    min-width: 142px;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 5px 9px 5px 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-hard));
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 8%, var(--color-surface-2));
    color: var(--ink-primary);
    box-shadow: none;
    cursor: pointer;
    transition:
      border-color 150ms ease,
      background 150ms ease,
      color 150ms ease,
      transform 150ms ease;
  }

  #view-programs .ex-card__rest-pill > .rest-divider__icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--ink-on-accent);
    font-size: 14px;
    line-height: 1;
  }

  #view-programs .ex-card__rest-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
    text-align: left;
  }

  #view-programs .ex-card__rest-label {
    display: block;
    color: var(--ink-primary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.025em;
    line-height: 1.05;
    text-transform: none;
  }

  #view-programs .ex-card__rest-pill .rest-value-small {
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 680;
    line-height: 1.1;
  }

  #view-programs .ex-card__rest-arrow {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
  }

  #view-programs .ex-card__rest-pill:hover,
  #view-programs .ex-card__rest-pill:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--color-surface-2));
    color: var(--ink-primary);
    transform: translateY(-1px);
  }

  #view-programs .ex-card__rest-pill:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
    outline-offset: 2px;
  }

  #view-programs .ex-card__rest-pill:active {
    transform: scale(0.98);
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    min-width: 204px;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--color-surface-2));
  }

  #view-programs .ex-card__rest-pill.rest-timer-active .rest-value-small,
  #view-programs .ex-card__rest-pill.rest-timer-paused .rest-value-small {
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active .ex-card__rest-arrow,
  #view-programs .ex-card__rest-pill.rest-timer-paused .ex-card__rest-arrow {
    display: none;
  }

  #view-programs .ex-card__rest-pill .rest-timer-controls {
    gap: 3px;
    margin-left: 2px;
  }

  #view-programs .ex-card__rest-pill .rest-timer-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  #view-programs .ex-card__rest-pill .rest-timer-btn svg {
    width: 15px;
    height: 15px;
    min-width: 15px;
  }

  #view-programs .ex-card__log-wrap {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 54px;
    min-height: 44px;
    padding: 0 11px;
    border-color: var(--border-hard);
    border-radius: 11px;
    background: transparent;
    color: var(--ink-primary);
  }

  #view-programs .ex-card__chevron {
    grid-area: toggle;
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

@media screen and (min-width: 520px) and (max-width: 1095.98px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 56px minmax(0, 1fr) auto 40px;
    grid-template-rows: 16px auto auto;
    grid-template-areas:
      "thumb index index toggle"
      "thumb identity identity toggle"
      "stats stats actions actions";
    column-gap: 14px;
    row-gap: 3px;
    min-height: 126px;
    padding: 13px 14px;
  }

  #view-programs .ex-card__thumb {
    width: 56px;
    height: 56px;
  }

  #view-programs .ex-card__prescription,
  #view-programs .ex-card__actions {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  #view-programs .ex-card__actions {
    padding-left: 14px;
  }
}

@media screen and (max-width: 519px) {
  #view-programs .ex-list {
    gap: 9px;
  }

  #view-programs .ex-card__summary {
    grid-template-columns: 52px minmax(0, 1fr) 40px;
    grid-template-rows: 15px auto auto auto;
    grid-template-areas:
      "thumb index toggle"
      "thumb identity toggle"
      "stats stats stats"
      "actions actions actions";
    column-gap: 11px;
    row-gap: 3px;
    min-height: 0;
    padding: 12px;
  }

  #view-programs .ex-card__thumb {
    width: 52px;
    height: 52px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 13px;
  }

  #view-programs .ex-card__prescription {
    width: 100%;
    min-height: 28px;
    gap: 18px;
    margin-top: 7px;
    padding: 9px 0 0;
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  #view-programs .ex-card__actions {
    width: 100%;
    min-height: 42px;
    gap: 7px;
    padding: 4px 0 0;
    border: 0;
  }

  #view-programs .ex-card__rest-pill {
    min-width: 0;
    min-height: 42px;
    flex: 1 1 auto;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    min-width: 0;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 54px;
    min-height: 42px;
  }
}

@media screen and (width <= 360px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 46px minmax(0, 1fr) 36px;
    padding: 10px;
  }

  #view-programs .ex-card__thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
  }

  #view-programs .ex-card__index {
    font-size: 8px;
  }

  #view-programs .ex-card__index > span {
    font-size: 7px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 12px;
  }

  #view-programs .ex-card__prescription {
    gap: 14px;
  }

  #view-programs .ex-card__rx strong,
  #view-programs .ex-card__rir-inline strong {
    font-size: 11px;
  }

  #view-programs .ex-card__rest-pill {
    padding-right: 7px;
  }

  #view-programs .ex-card__rest-pill > .rest-divider__icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 48px;
    padding-inline: 7px;
  }

  #view-programs .ex-card__chevron {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active .rest-timer-btn,
  #view-programs .ex-card__rest-pill.rest-timer-paused .rest-timer-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active > .rest-divider__icon,
  #view-programs .ex-card__rest-pill.rest-timer-paused > .rest-divider__icon {
    display: none;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    gap: 4px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  #view-programs .ex-card__rest-pill {
    transition: none !important;
  }
}

/* End V4.16 Exercise action card ------------------------------- */

/* V4.17 Catalogue exercise card
   Catalogue cards use the same calm hierarchy as Program exercise cards:
   identity, targets, form cue, equipment, then explicit actions. */
@media screen {
  #view-catalog .exercise-grid {
    align-items: stretch;
    gap: 16px !important;
  }

  #view-catalog .exercise-card {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: none;
    cursor: pointer;
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  #view-catalog .exercise-card:hover {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border-hard));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--bg-base) 28%, transparent);
    transform: translateY(-2px);
  }

  #view-catalog .exercise-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  #view-catalog .exercise-grid:has(.catalog-anatomy-details[open]) {
    align-items: start;
  }

  #view-catalog .exercise-grid:has(.catalog-anatomy-details[open]) .exercise-card {
    height: auto;
  }

  #view-catalog .card-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 108px;
    grid-template-areas: "identity image";
    align-items: stretch !important;
    gap: 16px !important;
    min-height: 140px;
    padding: 16px 16px 14px !important;
  }

  #view-catalog .card-header > .ex-card__thumb {
    grid-area: image;
    width: 108px;
    height: 108px;
    min-width: 108px;
    align-self: start;
    border-color: var(--border-soft);
    border-radius: 13px;
    background: var(--color-surface-2);
  }

  #view-catalog .card-header-text {
    grid-area: identity;
    display: flex;
    min-width: 0;
    min-height: 108px;
    flex-direction: column;
    gap: 0;
  }

  #view-catalog .card-muscle-tag {
    margin: 1px 0 0;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.1em;
    line-height: 1.1;
  }

  #view-catalog .card-name {
    display: -webkit-box;
    min-width: 0;
    margin: 9px 0 8px;
    overflow: hidden;
    color: var(--ink-primary);
    font-size: 17px !important;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  #view-catalog .card-header-text .badge-row {
    display: flex;
    min-height: 24px;
    align-items: flex-end;
    gap: 6px;
    margin: auto 0 0;
  }

  #view-catalog .exercise-card .badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 7px;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.055em;
    line-height: 1;
  }

  #view-catalog .card-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0 16px 16px !important;
  }

  #view-catalog .card-muscles {
    display: grid;
    height: 82px;
    min-height: 82px;
    align-content: start;
    gap: 7px;
    margin: 0 !important;
    padding: 13px 0 12px;
    overflow: hidden;
    border-top: 1px solid var(--border-soft);
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.35;
  }

  #view-catalog .card-muscle-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  #view-catalog .card-muscle-row + .card-muscle-row {
    margin-top: 0;
  }

  #view-catalog .muscle-label {
    min-width: 0;
    color: var(--accent);
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.085em;
    line-height: 1.35;
  }

  #view-catalog .muscle-label.secondary {
    color: var(--ink-muted);
  }

  #view-catalog .muscle-names {
    min-width: 0;
    color: var(--ink-primary);
    font-size: 12px;
    font-weight: 620;
    line-height: 1.35;
  }

  #view-catalog .secondary-muscles {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-muted);
    font-weight: 500;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  #view-catalog .catalog-anatomy-details {
    width: 100%;
    margin: 0 0 11px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: transparent;
  }

  #view-catalog .catalog-anatomy-details summary {
    display: grid;
    width: 100%;
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto 10px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    color: var(--ink-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    list-style: none;
    cursor: pointer;
    transition:
      background 150ms ease,
      color 150ms ease;
  }

  #view-catalog .catalog-anatomy-details summary::-webkit-details-marker {
    display: none;
  }

  #view-catalog .catalog-anatomy-details summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform 160ms ease;
  }

  #view-catalog .catalog-anatomy-details__hint {
    color: var(--ink-muted);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #view-catalog .catalog-anatomy-details__hint::before {
    content: 'View';
  }

  #view-catalog .catalog-anatomy-details[open] .catalog-anatomy-details__hint::before {
    content: 'Hide';
  }

  #view-catalog .catalog-anatomy-details summary:hover,
  #view-catalog .catalog-anatomy-details summary:focus-visible {
    background: color-mix(in srgb, var(--accent) 7%, var(--color-surface-2));
    color: var(--accent);
  }

  #view-catalog .catalog-anatomy-details summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
    outline-offset: -2px;
  }

  #view-catalog .catalog-anatomy-details[open] {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-hard));
    background: var(--color-surface-2);
  }

  #view-catalog .catalog-anatomy-details[open] summary {
    border-bottom: 1px solid var(--border-soft);
    color: var(--accent);
  }

  #view-catalog .catalog-anatomy-details[open] summary::after {
    transform: rotate(225deg) translate(-2px, 2px);
  }

  #view-catalog .catalog-anatomy-details__body {
    padding: 12px;
  }

  #view-catalog .catalog-anatomy-details .muscle-diagram {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #view-catalog .catalog-anatomy-details .muscle-diagram__legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 7px;
  }

  #view-catalog .catalog-anatomy-details .muscle-diagram__chip {
    min-width: 0;
    padding: 4px 3px;
    overflow: hidden;
    border-radius: 5px;
    font-size: 8px;
    letter-spacing: 0.025em;
    text-align: center;
  }

  #view-catalog .catalog-anatomy-details .muscle-diagram-container {
    max-width: 390px;
    contain-intrinsic-size: 0 260px;
  }

  #view-catalog .catalog-anatomy-details .muscle-diagram__list {
    column-gap: 8px;
    row-gap: 5px;
    margin-top: 8px;
    font-size: 11px;
  }

  #view-catalog .catalog-anatomy-details .muscle-diagram__list-term {
    font-size: 9px;
  }

  #view-catalog .catalog-anatomy-details .muscle-diagram__list-def {
    font-size: 11px;
    line-height: 1.35;
  }

  #view-catalog .catalog-card__cue {
    height: 100px;
    min-height: 100px;
    margin: 0 0 11px;
    padding: 11px 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  #view-catalog .catalog-card__meta-label {
    display: block;
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 780;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  #view-catalog .catalog-card__cue .catalog-card__meta-label {
    color: var(--accent);
  }

  #view-catalog .catalog-card__cue .card-notes {
    display: -webkit-box;
    margin: 7px 0 0 !important;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: var(--ink-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.48;
    opacity: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  #view-catalog .catalog-card__equipment {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 34px;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
  }

  #view-catalog .catalog-card__equipment .eq-chips {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    margin: 0;
  }

  #view-catalog .catalog-card__equipment .eq-chip {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-color: var(--border-soft);
    border-radius: 7px;
    background: var(--color-surface-2);
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 620;
    line-height: 1;
  }

  #view-catalog .catalog-card__equipment .eq-chip--none {
    border-style: dashed;
    background: transparent;
  }

  #view-catalog .card-body > .card-footer {
    display: flex;
    margin-top: auto;
    padding-top: 11px;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border-soft);
  }

  #view-catalog .card-footer > details.progression-details {
    width: 100%;
    margin: 0;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: transparent;
    overflow: hidden;
  }

  #view-catalog .progression-details summary {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 740;
    letter-spacing: 0.07em;
    line-height: 1;
    cursor: pointer;
    transition:
      background 150ms ease,
      border-color 150ms ease,
      color 150ms ease;
  }

  #view-catalog .progression-details summary::before {
    display: none;
  }

  #view-catalog .progression-details summary::after {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform 160ms ease;
  }

  #view-catalog .progression-details summary:hover,
  #view-catalog .progression-details summary:focus-visible {
    background: color-mix(in srgb, var(--accent) 7%, var(--color-surface-2));
    color: var(--ink-primary);
  }

  #view-catalog .progression-details summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
    outline-offset: -2px;
  }

  #view-catalog .progression-details[open] {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-hard));
    background: var(--color-surface-2);
  }

  #view-catalog .progression-details[open] summary {
    color: var(--accent);
  }

  #view-catalog .progression-details[open] summary::after {
    transform: rotate(225deg) translate(-2px, 2px);
  }

  #view-catalog .progression-steps-inline,
  #view-catalog .card-progression-text {
    margin: 0;
    padding: 2px 11px 11px;
  }

  #view-catalog .progression-steps-inline {
    gap: 5px;
  }

  #view-catalog .prog-step-unit {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
  }

  #view-catalog .prog-step-pill {
    min-height: 25px;
    padding: 5px 8px;
    border-color: var(--border-soft);
    border-radius: 7px;
    background: var(--color-surface);
    font-size: 9px;
    line-height: 1.25;
    white-space: normal;
  }

  #view-catalog .prog-step-pill--current {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
    background: color-mix(in srgb, var(--accent) 8%, var(--color-surface));
    color: var(--accent);
  }

  #view-catalog .exercise-card .video-btn {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-hard));
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 7%, var(--color-surface-2));
    color: var(--accent);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.07em;
    line-height: 1;
    box-shadow: none;
    transition:
      border-color 150ms ease,
      background 150ms ease,
      color 150ms ease,
      transform 150ms ease;
  }

  #view-catalog .exercise-card .video-btn svg {
    width: 15px;
    height: 15px;
  }

  #view-catalog .exercise-card .video-btn:hover,
  #view-catalog .exercise-card .video-btn:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, var(--color-surface-2));
    color: var(--accent);
    transform: translateY(-1px);
  }

  #view-catalog .exercise-card .video-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
    outline-offset: 2px;
  }
}

@media screen and (min-width: 1101px) and (max-width: 1499px) {
  #view-catalog .exercise-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 1500px) {
  #view-catalog .exercise-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 699px) {
  #view-catalog .exercise-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #view-catalog .card-header {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 12px !important;
    min-height: 110px;
    padding: 14px 14px 12px !important;
  }

  #view-catalog .card-header > .ex-card__thumb {
    width: 82px;
    height: 82px;
    min-width: 82px;
    border-radius: 11px;
  }

  #view-catalog .card-header-text {
    min-height: 82px;
  }

  #view-catalog .card-muscle-tag {
    font-size: 9px;
  }

  #view-catalog .card-name {
    margin: 7px 0 6px;
    font-size: 15px !important;
  }

  #view-catalog .card-body {
    padding: 0 14px 14px !important;
  }

  #view-catalog .card-muscles {
    height: auto;
    min-height: 0;
    padding: 11px 0 10px;
    overflow: visible;
  }

  #view-catalog .card-muscle-row {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  #view-catalog .catalog-card__cue {
    height: auto;
    min-height: 0;
    margin-bottom: 9px;
    padding: 10px 11px;
  }

  #view-catalog .catalog-anatomy-details {
    margin-bottom: 9px;
  }

  #view-catalog .catalog-anatomy-details__body {
    padding: 10px;
  }

  #view-catalog .catalog-card__equipment {
    min-height: 30px;
    grid-template-columns: 80px minmax(0, 1fr);
    margin-bottom: 8px;
  }

  #view-catalog .catalog-card__equipment--none {
    display: none;
  }

  #view-catalog .card-body > .card-footer {
    padding-top: 9px;
    gap: 7px;
  }
}

@media screen and (width <= 360px) {
  #view-catalog .card-header {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px !important;
    min-height: 102px;
    padding: 12px 12px 10px !important;
  }

  #view-catalog .card-header > .ex-card__thumb {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }

  #view-catalog .card-header-text {
    min-height: 72px;
  }

  #view-catalog .card-name {
    font-size: 14px !important;
  }

  #view-catalog .card-body {
    padding: 0 12px 12px !important;
  }

  #view-catalog .card-muscle-row {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 6px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  #view-catalog .exercise-card,
  #view-catalog .exercise-card .video-btn,
  #view-catalog .progression-details summary,
  #view-catalog .progression-details summary::after,
  #view-catalog .catalog-anatomy-details summary,
  #view-catalog .catalog-anatomy-details summary::after {
    transition: none !important;
  }
}

/* End V4.17 Catalogue exercise card ---------------------------- */

/* V4.18 Catalogue progression navigation and Science reference
   Progression disclosures need breathing room and direct navigation.
   Science uses one responsive visual system across phone and desktop. */
@media screen {
  #view-catalog .progression-details[open] summary {
    border-bottom: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--accent) 4%, var(--color-surface-2));
  }

  #view-catalog .progression-details[open] .progression-steps-inline,
  #view-catalog .progression-details[open] .card-progression-text {
    padding: 12px 12px 13px;
  }

  #view-catalog .prog-step-pill {
    appearance: none;
    font-family: inherit;
    text-align: left;
  }

  #view-catalog .prog-step-link {
    cursor: pointer;
    transition:
      border-color 140ms ease,
      background 140ms ease,
      color 140ms ease,
      transform 140ms ease;
  }

  #view-catalog .prog-step-link:hover,
  #view-catalog .prog-step-link:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 11%, var(--color-surface));
    color: var(--accent);
    transform: translateY(-1px);
  }

  #view-catalog .prog-step-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: 2px;
  }

  #view-catalog .prog-step-link.prog-step-pill--current {
    cursor: pointer;
  }

  #view-science .science-grid {
    gap: 18px;
  }

  #view-science .science-card {
    height: auto;
    padding: clamp(20px, 2.3vw, 30px);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: var(--color-surface);
    box-shadow: none;
    transform: none;
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease;
  }

  #view-science .science-card:hover {
    transform: none;
  }

  #view-science .science-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
  }

  #view-science .science-card > h3 {
    margin: 0 0 12px;
    color: var(--ink-primary);
    font-family: var(--font-display);
    font-size: clamp(23px, 2.2vw, 30px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.08;
  }

  #view-science .science-card__lead {
    max-width: 940px;
    margin: 0 0 9px;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  #view-science .science-card__note {
    display: inline-flex;
    margin: 0 0 18px;
    padding: 8px 11px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--color-surface-2);
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 620;
    line-height: 1.4;
  }

  #view-science .sra-diagram {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
  }

  #view-science .sra-chart {
    position: relative;
    width: 100%;
    height: clamp(230px, 24vw, 310px);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background:
      linear-gradient(to right, color-mix(in srgb, var(--accent) 3%, transparent), transparent 46%),
      var(--color-surface-2);
  }

  #view-science .sra-chart .sra-svg {
    display: block !important;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  #view-science .sra-chart__baseline {
    stroke: var(--border-hard);
    stroke-width: 1.25;
    stroke-dasharray: 8 8;
    vector-effect: non-scaling-stroke;
  }

  #view-science .sra-chart__fill--fatigue {
    fill: url(#sra-fill-fatigue);
  }

  #view-science .sra-chart__fill--adapt {
    fill: url(#sra-fill-adapt);
  }

  #view-science .sra-chart__fill--missed {
    fill: url(#sra-fill-missed);
  }

  #view-science .sra-chart__curve {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  #view-science .sra-chart__workout-line {
    stroke: color-mix(in srgb, var(--accent) 72%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
  }

  #view-science .sra-chart__point {
    fill: var(--color-surface);
    stroke: var(--accent);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
  }

  #view-science .sra-chart__point--workout {
    fill: var(--accent);
  }

  #view-science .sra-chart__point--adapt {
    fill: var(--signal-ok);
    stroke: var(--color-surface);
  }

  #view-science .sra-chart__label {
    position: absolute;
    z-index: 1;
    display: grid;
    gap: 1px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.2;
    pointer-events: none;
  }

  #view-science .sra-chart__label strong {
    color: var(--ink-primary);
    font-size: 11px;
    font-weight: 760;
  }

  #view-science .sra-chart__label span {
    color: var(--ink-muted);
    font-size: 9px;
  }

  #view-science .sra-chart__label--baseline {
    top: 54%;
    left: 1.7%;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--color-surface-2);
    transform: translateY(-50%);
  }

  #view-science .sra-chart__label--workout {
    top: 7%;
    left: 5.7%;
    color: var(--accent);
  }

  #view-science .sra-chart__label--workout strong {
    color: var(--accent);
  }

  #view-science .sra-chart__label--fatigue {
    bottom: 4%;
    left: 19%;
  }

  #view-science .sra-chart__label--recovery {
    top: 42%;
    left: 42%;
  }

  #view-science .sra-chart__label--adaptation {
    top: 6%;
    left: 68%;
    min-width: 118px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--signal-ok) 42%, var(--border-soft));
    border-radius: 9px;
    background: color-mix(in srgb, var(--signal-ok) 9%, var(--color-surface-2));
    transform: translateX(-50%);
  }

  #view-science .sra-chart__label--adaptation strong {
    color: var(--signal-ok);
  }

  #view-science .sra-chart__label--missed {
    top: 44%;
    right: 3%;
    text-align: right;
  }

  #view-science .sra-stage-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  #view-science .sra-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 2px;
    min-height: 64px;
    align-content: center;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  #view-science .sra-stage > span {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 760;
  }

  #view-science .sra-stage strong {
    color: var(--ink-primary);
    font-size: 12px;
    line-height: 1.2;
  }

  #view-science .sra-stage small {
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.35;
  }

  #view-science .sra-stage.is-target {
    border-color: color-mix(in srgb, var(--signal-ok) 48%, var(--border-soft));
    background: color-mix(in srgb, var(--signal-ok) 7%, var(--color-surface-2));
  }

  #view-science .sra-stage.is-target > span,
  #view-science .sra-stage.is-target strong {
    color: var(--signal-ok);
  }

  #view-science .science-table-wrap {
    margin-top: 2px;
  }

  #view-science .science-two-col {
    gap: 16px;
    margin-top: 18px;
  }

  #view-science .science-subcol {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: var(--color-surface-2);
  }

  #view-science .science-subcol h3 {
    margin: 0 0 7px;
    color: var(--ink-primary);
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.15;
  }

  #view-science .science-subcol > p {
    min-height: 44px;
    color: var(--ink-muted) !important;
    line-height: 1.5;
  }

  #view-science .science-author {
    display: block;
    margin-top: 5px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.3;
  }

  #view-science .rep-range-bar {
    margin: 12px 0 16px;
    padding: 8px 10px 2px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: var(--color-surface);
  }

  #view-science .rep-range-svg {
    display: block;
    max-width: none;
    margin: 0;
  }

  #view-science .science-table {
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface);
  }

  #view-science .science-table thead th {
    padding: 11px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border-soft));
    background: var(--color-surface-2);
    color: var(--ink-muted);
    font-size: 9px;
  }

  #view-science .science-table td {
    padding: 11px 12px;
    color: var(--ink-primary);
    line-height: 1.45;
  }

  #view-science .science-table tbody tr:last-child td {
    border-bottom: 0;
  }

  #view-science .principles-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
  }

  #view-science .principle-item {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  #view-science .principle-dot {
    width: 7px;
    height: 7px;
    margin-top: 7px;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  #view-science .principle-text {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.52;
  }

  @media (hover: hover) and (pointer: fine) {
    #view-science .science-card:hover {
      border-color: color-mix(in srgb, var(--accent) 30%, var(--border-soft));
      box-shadow: 0 12px 30px color-mix(in srgb, var(--bg-base) 18%, transparent);
    }

    #view-science .science-table tbody tr,
    #view-nutrition .exercise-table tbody tr,
    .volume-table tbody tr,
    .gtg-table tbody tr {
      transition:
        background 140ms ease,
        border-color 140ms ease;
    }

    #view-science .science-table tbody tr:hover,
    #view-nutrition .exercise-table tbody tr:hover,
    .volume-table tbody tr:hover,
    .gtg-table tbody tr:hover {
      background: color-mix(in srgb, var(--accent) 5%, var(--color-surface));
    }

    #view-science .science-table tbody tr:hover td,
    #view-nutrition .exercise-table tbody tr:hover td,
    .volume-table tbody tr:hover td,
    .gtg-table tbody tr:hover td {
      background: transparent !important;
    }
  }
}

@media screen and (max-width: 768px) {
  #view-science .science-card {
    padding: 17px;
    border-top: 1px solid var(--border-soft);
    border-radius: 17px;
  }

  #view-science .science-card > h3 {
    font-size: 23px;
  }

  #view-science .science-card__lead {
    font-size: 13px;
    line-height: 1.55;
  }

  #view-science .science-card__note {
    display: flex;
    margin-bottom: 13px;
    font-size: 11px;
  }

  #view-science .sra-chart {
    height: 228px;
    border-radius: 13px;
  }

  #view-science .sra-chart__label {
    font-size: 9px;
  }

  #view-science .sra-chart__label strong {
    font-size: 10px;
  }

  #view-science .sra-chart__label span {
    display: none;
  }

  #view-science .sra-chart__label--baseline {
    top: 55%;
    left: 1%;
  }

  #view-science .sra-chart__label--workout {
    top: 7%;
    left: 6%;
  }

  #view-science .sra-chart__label--fatigue {
    bottom: 5%;
    left: 18%;
  }

  #view-science .sra-chart__label--recovery {
    top: 43%;
    left: 41%;
  }

  #view-science .sra-chart__label--adaptation {
    top: 5%;
    left: 68%;
    min-width: 0;
    padding: 5px 7px;
  }

  #view-science .sra-chart__label--missed {
    top: 44%;
    right: 3%;
  }

  #view-science .sra-stage-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-science .sra-stage {
    min-height: 70px;
    padding: 10px;
  }

  #view-science .science-two-col {
    gap: 12px;
    margin-top: 14px;
  }

  #view-science .science-subcol {
    padding: 14px;
    border-radius: 13px;
  }

  #view-science .science-subcol > p {
    min-height: 0;
  }

  #view-science .science-table {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #view-science .science-table tr,
  #view-nutrition .exercise-table tr {
    margin-bottom: 8px;
    padding: 13px 14px;
    border-color: var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  #view-science .science-table td,
  #view-nutrition .exercise-table td {
    min-width: 0;
    background: transparent !important;
  }

  #view-science .science-table td:first-child,
  #view-nutrition .exercise-table td:first-child {
    background: transparent !important;
  }

  #view-science .principles-list {
    grid-template-columns: 1fr;
  }

  #view-science .section-jump {
    margin-bottom: 16px;
    padding: 4px;
    border-color: var(--border-soft);
    border-radius: 13px;
    background: var(--color-surface);
  }

  #view-science .section-jump__btn {
    border-color: transparent;
    border-radius: 9px;
    background: var(--color-surface-2);
  }
}

@media screen and (max-width: 380px) {
  #view-science .science-card {
    padding: 14px;
  }

  #view-science .sra-chart {
    height: 210px;
  }

  #view-science .sra-chart__label--recovery {
    left: 39%;
  }

  #view-science .sra-chart__label--missed {
    right: 2%;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  #view-catalog .prog-step-link,
  #view-science .science-card,
  #view-science .science-table tbody tr,
  #view-nutrition .exercise-table tbody tr {
    transition: none !important;
  }
}

#science-sra,
#science-volume,
#science-mechanics,
#science-muscles,
#science-principles,
#view-skills [id^="skill-card-"],
#view-flexibility [id^="flex-card-"] {
  scroll-margin-top: 78px;
}

@media (hover: none), (pointer: coarse) {
  #view-skills .skill-card:hover,
  #view-flexibility .flex-card:hover,
  #view-science .science-card:hover {
    border-color: var(--border-soft);
    box-shadow: none;
    transform: none;
  }
}

/* End V4.18 Catalogue progression and Science reference -------- */

/* V4.21 Skills and flexibility visual wayfinding.
   The image is a recognition layer, not a second card or decorative badge. */
#view-skills .skill-card-visual,
#view-flexibility .flex-card-visual {
  position: relative;
  display: grid;
  width: 100%;
  height: 152px;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 58%),
    linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
}

#view-flexibility .flex-card-visual {
  background:
    radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent-flex) 16%, transparent), transparent 58%),
    linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
}

#view-skills .skill-card-visual::after,
#view-flexibility .flex-card-visual::after {
  content: '';
  position: absolute;
  inset: auto 8% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 36%, transparent), transparent);
}

#view-skills .skill-card-visual img,
#view-flexibility .flex-card-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  padding: 10px 20px 8px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 16%));
  transform: scale(1);
  transition: transform 180ms var(--ease-standard);
}

#view-skills .skill-card:hover .skill-card-visual img,
#view-flexibility .flex-card:hover .flex-card-visual img {
  transform: scale(1.025);
}

#view-skills .skill-card-header,
#view-flexibility .flex-card-header {
  position: relative;
  z-index: 1;
}

.flow-runner__visual {
  display: grid;
  height: 170px;
  margin: 0 0 var(--space-4);
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-flex) 24%, var(--border-soft));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--accent-flex) 14%, transparent), transparent 58%),
    var(--color-surface);
}

.flow-runner__visual img {
  width: 100%;
  height: 100%;
  padding: 10px 18px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 16%));
}

@media (min-width: 700px) {
  #view-skills .skill-card-visual {
    height: 178px;
  }

  #view-flexibility .flex-card-visual {
    height: 138px;
  }
}

@media (max-width: 399px) {
  #view-skills .skill-card-visual,
  #view-flexibility .flex-card-visual {
    height: 132px;
  }

  #view-skills .skill-card-visual img,
  #view-flexibility .flex-card-visual img {
    padding-inline: 12px;
  }

  .flow-runner__visual {
    height: 142px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-skills .skill-card-visual img,
  #view-flexibility .flex-card-visual img {
    transition: none;
  }
}

/* End V4.21 Skills and flexibility visual wayfinding ---------- */

/* V4.19 Route-aware progression ladders and unified SRA annotations.
   Ordered tiles keep sequence clear without detached wrap arrows.
   SRA phase labels share one rail, scale, and surface treatment. */
@media screen {
  #view-catalog .progression-steps-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    list-style: none;
  }

  #view-catalog .prog-step-unit {
    display: block;
    min-width: 0;
  }

  #view-catalog .prog-step-pill {
    display: grid;
    width: 100%;
    min-height: 43px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }

  #view-catalog .prog-step-index {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    background: var(--color-surface-2);
    color: var(--ink-subtle);
    font-size: 9px;
    font-weight: 780;
    line-height: 1;
  }

  #view-catalog .prog-step-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #view-catalog .prog-step-link:hover,
  #view-catalog .prog-step-link:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 7%, var(--color-surface));
    color: var(--ink-primary);
    transform: none;
  }

  #view-catalog .prog-step-link:hover .prog-step-index,
  #view-catalog .prog-step-link:focus-visible .prog-step-index {
    background: color-mix(in srgb, var(--accent) 13%, var(--color-surface-2));
    color: var(--accent);
  }

  #view-catalog .prog-step-pill--current {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 10%, var(--color-surface));
    color: var(--ink-primary);
  }

  #view-catalog .prog-step-pill--current .prog-step-index {
    background: var(--accent);
    color: var(--on-accent, #111);
  }

  #view-science .sra-chart__label:not(.sra-chart__label--baseline) {
    top: 15px;
    right: auto;
    bottom: auto;
    left: var(--sra-label-x, 50%);
    min-width: 96px;
    justify-items: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    text-align: center;
    transform: translateX(-50%);
  }

  #view-science .sra-chart__label--workout {
    --sra-label-x: 9.2%;
  }

  #view-science .sra-chart__label--fatigue {
    --sra-label-x: 27%;
  }

  #view-science .sra-chart__label--recovery {
    --sra-label-x: 45%;
  }

  #view-science .sra-chart__label--adaptation {
    --sra-label-x: 65.6%;
  }

  #view-science .sra-chart__label--missed {
    --sra-label-x: 89.5%;
  }

  #view-science .sra-chart__label--workout strong {
    color: var(--accent);
  }

  #view-science .sra-chart__label--adaptation strong {
    color: var(--signal-ok);
  }
}

@media screen and (max-width: 780px) {
  #view-science .sra-chart__label:not(.sra-chart__label--baseline) {
    min-width: 84px;
    padding-inline: 6px;
  }
}

@media screen and (max-width: 700px) {
  #view-science .sra-chart__label:not(.sra-chart__label--baseline) {
    top: 11px;
    min-width: 42px;
    max-width: 50px;
    padding: 3px 2px;
    border-color: transparent;
    background: transparent;
  }

  #view-science .sra-chart__label:not(.sra-chart__label--baseline) strong {
    font-size: 8px;
    line-height: 1.05;
  }

  #view-science .sra-chart__label:not(.sra-chart__label--baseline) span {
    display: none;
  }

  #view-science .sra-chart__label:not(.sra-chart__label--baseline).sra-chart__label--missed {
    min-width: 36px;
    max-width: 36px;
  }
}

@media screen and (max-width: 350px) {
  #view-catalog .progression-steps-inline {
    grid-template-columns: 1fr;
  }
}

/* End V4.19 Progression ladders and SRA annotations ------------ */

/* V4.20 Science chart anchors and evidence-aligned rep spectrum.
   Every SRA label now maps to one exact curve point. Rep outcomes
   overlap on a shared axis instead of implying false hard zones. */
@media screen {
  #view-science .sra-chart__guide {
    stroke: color-mix(in srgb, var(--ink-muted) 44%, transparent);
    stroke-width: 1.25;
    stroke-dasharray: 4 6;
    vector-effect: non-scaling-stroke;
  }

  #view-science .sra-chart__guide--workout {
    stroke: color-mix(in srgb, var(--accent) 72%, transparent);
  }

  #view-science .sra-chart__guide--adaptation {
    stroke: color-mix(in srgb, var(--signal-ok) 64%, transparent);
  }

  #view-science .sra-chart__anchor-halo,
  #view-science .sra-chart__anchor {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  #view-science .sra-chart__anchor-halo {
    stroke: var(--color-surface-2);
    stroke-width: 11;
  }

  #view-science .sra-chart__anchor {
    stroke: var(--accent);
    stroke-width: 5;
  }

  #view-science .sra-chart__anchor--adaptation {
    stroke: var(--signal-ok);
  }

  #view-science .sra-chart__label--workout {
    --sra-label-x: 9.21%;
  }

  #view-science .sra-chart__label--fatigue {
    --sra-label-x: 26.97%;
  }

  #view-science .sra-chart__label--recovery {
    --sra-label-x: 42.98%;
  }

  #view-science .sra-chart__label--adaptation {
    --sra-label-x: 65.63%;
  }

  #view-science .sra-chart__label--missed {
    --sra-label-x: 92.85%;
  }

  #view-science .rep-range-bar.rep-spectrum {
    --rep-endurance: #e26082;
    display: grid;
    gap: 14px;
    margin: 12px 0 16px;
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 48%),
      var(--color-surface);
  }

  [data-theme='light'] #view-science .rep-range-bar.rep-spectrum {
    --rep-endurance: #aa234a;
  }

  #view-science .rep-spectrum__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  #view-science .rep-spectrum__intro > div {
    display: grid;
    gap: 4px;
  }

  #view-science .rep-spectrum__eyebrow {
    color: var(--ink-muted);
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  #view-science .rep-spectrum__intro strong {
    color: var(--ink-primary);
    font-size: 17px;
    font-weight: 780;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }

  #view-science .rep-spectrum__overlap {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-soft));
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 7%, var(--color-surface-2));
    color: var(--ink-secondary);
    font-size: 9px;
    font-weight: 730;
    letter-spacing: 0.025em;
    line-height: 1;
  }

  #view-science .rep-spectrum__continuum {
    display: grid;
    grid-template-columns: auto minmax(70px, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: var(--ink-subtle);
    font-size: 9px;
    font-weight: 670;
    line-height: 1;
  }

  #view-science .rep-spectrum__gradient {
    height: 8px;
    border-radius: var(--radius-full);
    background: linear-gradient(
      90deg,
      var(--signal-info) 0%,
      color-mix(in srgb, var(--signal-info) 58%, var(--accent)) 22%,
      var(--accent) 48%,
      color-mix(in srgb, var(--accent) 48%, var(--rep-endurance)) 72%,
      var(--rep-endurance) 100%
    );
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--border-hard) 64%, transparent),
      0 5px 18px -8px color-mix(in srgb, var(--accent) 50%, transparent);
  }

  #view-science .rep-spectrum__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  #view-science .rep-spectrum__card {
    --spectrum-color: var(--accent);
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 3px 9px;
    min-width: 0;
    min-height: 108px;
    align-content: start;
    padding: 13px 12px;
    border: 1px solid color-mix(in srgb, var(--spectrum-color) 26%, var(--border-soft));
    border-radius: 12px;
    background:
      linear-gradient(150deg, color-mix(in srgb, var(--spectrum-color) 8%, transparent), transparent 58%),
      var(--color-surface-2);
  }

  #view-science .rep-spectrum__card--strength {
    --spectrum-color: var(--signal-info);
  }

  #view-science .rep-spectrum__card--endurance {
    --spectrum-color: var(--rep-endurance);
  }

  #view-science .rep-spectrum__swatch {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--spectrum-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--spectrum-color) 12%, transparent);
  }

  #view-science .rep-spectrum__card > div {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  #view-science .rep-spectrum__card small {
    color: var(--ink-muted);
    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
  }

  #view-science .rep-spectrum__card strong {
    color: var(--spectrum-color);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
  }

  #view-science .rep-spectrum__card p {
    grid-column: 2;
    margin: 4px 0 0;
    color: var(--ink-muted);
    font-size: 9px;
    line-height: 1.4;
  }

  #view-science .rep-spectrum__note {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.5;
  }

  #view-science .rep-range-table {
    margin-top: 0;
  }
}

@media screen and (max-width: 420px) {
  #view-science .rep-range-bar.rep-spectrum {
    padding: 12px;
  }

  #view-science .rep-spectrum__intro {
    align-items: flex-start;
  }

  #view-science .rep-spectrum__overlap {
    max-width: 92px;
    text-align: center;
    line-height: 1.2;
  }

  #view-science .rep-spectrum__continuum {
    grid-template-columns: auto minmax(40px, 1fr) auto;
    gap: 7px;
    font-size: 8px;
  }

  #view-science .rep-spectrum__cards {
    grid-template-columns: 1fr;
  }

  #view-science .rep-spectrum__card {
    min-height: 0;
    grid-template-columns: 8px minmax(0, 1fr) minmax(108px, 1.2fr);
    align-items: center;
    padding: 11px;
  }

  #view-science .rep-spectrum__card p {
    grid-column: 3;
    margin: 0;
  }
}

/* End V4.20 Science chart anchors and rep spectrum ------------- */

/* V4.22 Skill progression visual rows.
   Existing catalogue movements keep their catalogue images. Dedicated images
   are used only for intermediate poses that do not exist in the catalogue. */
#view-skills .skill-cards {
  grid-template-columns: minmax(0, 1fr);
}

#view-skills .prog-step {
  display: grid;
  grid-template-columns: 28px 82px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
  min-height: 108px;
  padding: 13px 0;
}

#view-skills .prog-step::before {
  top: 54px;
}

#view-skills .prog-step__visual {
  position: relative;
  display: grid;
  width: 82px;
  height: 74px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 62%),
    var(--color-surface-2);
}

#view-skills .prog-step__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 5px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 14%));
}

#view-skills .prog-step .step-content {
  min-width: 0;
  padding-top: 0;
}

#view-skills .prog-step .skill-mark-btn {
  grid-column: 3;
  justify-self: start;
  min-width: 0;
}

#view-skills .prog-step.passed .prog-step__visual {
  opacity: 0.66;
}

#view-skills .prog-step.current .prog-step__visual {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--border-soft));
  background:
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 62%),
    var(--color-surface-2);
}

@media screen and (min-width: 1024px) {
  #view-skills .skill-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 640px) {
  #view-skills .prog-step {
    grid-template-columns: 28px 74px minmax(0, 1fr);
    min-height: 104px;
    column-gap: 10px;
    padding: 12px 0;
  }

  #view-skills .prog-step::before {
    top: 51px;
  }

  #view-skills .prog-step__visual {
    width: 74px;
    height: 70px;
  }

  #view-skills .prog-step .skill-mark-btn {
    grid-column: 3;
    justify-self: start;
    min-width: 0;
  }
}

@media screen and (max-width: 399px) {
  #view-skills .prog-step {
    grid-template-columns: 26px 64px minmax(0, 1fr);
    column-gap: 8px;
  }

  #view-skills .prog-step__visual {
    width: 64px;
    height: 62px;
    border-radius: var(--radius-md);
  }

  #view-skills .prog-step__visual img {
    padding: 3px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  #view-skills .prog-step__visual img {
    transition: none;
  }
}

/* End V4.22 Skill progression visual rows ---------------------- */

/* V4.23 Flexibility drill visual rows. */
#view-flexibility .flex-card-body .exercise-row.exercise-row--visual {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 86px;
  padding: 9px 0;
}

#view-flexibility .exercise-row__visual {
  position: relative;
  display: grid;
  width: 78px;
  height: 68px;
  flex: none !important;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--accent-flex) 12%, transparent), transparent 62%),
    var(--color-surface);
}

#view-flexibility .exercise-row__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgb(0 0 0 / 12%));
}

#view-flexibility .exercise-row__copy {
  min-width: 0;
}

#view-flexibility .exercise-row--visual .exercise-row-name {
  font-weight: 700;
  line-height: 1.25;
}

#view-flexibility .exercise-row--visual .exercise-row-desc {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.42;
}

#view-flexibility .exercise-row--visual .exercise-row-duration {
  align-self: center;
  max-width: 150px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-flex) 18%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent-flex) 9%, transparent);
  color: var(--accent-flex);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

@media screen and (max-width: 900px) {
  #view-flexibility .flex-card-body .exercise-row.exercise-row--visual {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 78px;
    padding: 9px 0;
  }

  #view-flexibility .exercise-row__visual {
    width: 64px;
    height: 60px;
  }

  #view-flexibility .exercise-row--visual .exercise-row-duration {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    margin-top: -3px;
  }
}

@media screen and (max-width: 399px) {
  #view-flexibility .flex-card-body .exercise-row.exercise-row--visual {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #view-flexibility .exercise-row__visual {
    width: 56px;
    height: 54px;
  }
}

/* End V4.23 Flexibility drill visual rows ---------------------- */

/* V4.24 Reference wayfinding and skill progression.
   Compact edge controls make horizontal rails discoverable. Skill steps use
   a segmented progress map and independent training cards instead of a loose
   vertical number line. */
.section-jump-shell {
  display: none;
}

@media screen and (max-width: 640px) {
  .section-jump-shell {
    position: relative;
    display: block;
    margin-bottom: 20px;
  }

  .section-jump-shell .section-jump {
    margin-bottom: 0;
    padding-inline: 42px;
    scroll-padding-inline: 42px;
  }

  .section-jump-shell.is-at-start .section-jump {
    padding-left: 4px;
    scroll-padding-left: 4px;
  }

  .section-jump__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, var(--border-soft));
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    color: var(--color-text);
    box-shadow: 0 6px 18px rgb(0 0 0 / 20%);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition:
      opacity 140ms ease,
      border-color 140ms ease,
      background 140ms ease,
      transform 140ms ease;
  }

  .section-jump__arrow--prev { left: 6px; }
  .section-jump__arrow--next { right: 6px; }

  .section-jump__arrow svg {
    width: 17px;
    height: 17px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .section-jump__arrow:hover {
    border-color: color-mix(in srgb, var(--color-primary) 44%, var(--border-soft));
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  }

  .section-jump__arrow:active {
    transform: translateY(-50%) scale(0.94);
  }

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

  .section-jump__arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }

  .section-jump-shell:not(.is-at-start)::before,
  .section-jump-shell:not(.is-at-end)::after {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    z-index: 2;
    width: 42px;
    pointer-events: none;
  }

  .section-jump-shell:not(.is-at-start)::before {
    left: 1px;
    background: linear-gradient(90deg, var(--bg-sunken), transparent);
  }

  .section-jump-shell:not(.is-at-end)::after {
    right: 1px;
    background: linear-gradient(270deg, var(--bg-sunken), transparent);
  }
}

#view-flexibility .exercise-row__visual img {
  clip-path: inset(6px round 4px);
}

#view-skills .skill-path {
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 62%),
    var(--color-surface-2);
}

#view-skills .skill-path__topline,
#view-skills .skill-path__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#view-skills .skill-path__eyebrow,
#view-skills .skill-path__count,
#view-skills .skill-path__current span {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

#view-skills .skill-path__count {
  letter-spacing: 0.04em;
}

#view-skills .skill-path__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
  margin: 10px 0 9px;
}

#view-skills .skill-path__segment {
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--border-soft);
}

#view-skills .skill-path__segment.is-complete {
  background: color-mix(in srgb, var(--signal-ok) 76%, var(--border-soft));
}

#view-skills .skill-path__segment.is-current {
  background: linear-gradient(90deg, var(--signal-ok), var(--color-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 13%, transparent);
}

#view-skills .skill-path__current {
  justify-content: flex-start;
}

#view-skills .skill-path__current strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-skills .progression-steps {
  gap: 10px;
}

#view-skills .prog-step {
  display: grid;
  grid-template-columns: 34px 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 98px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  box-shadow: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

#view-skills .prog-step::before {
  display: none;
}

#view-skills .prog-step.current {
  margin: 0;
  padding: 12px;
  border-color: transparent;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--signal-ok) 9%, var(--color-surface-2)),
      color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-2)) 48%,
      var(--color-surface-2) 80%
    ) padding-box,
    linear-gradient(120deg, var(--signal-ok), var(--color-primary) 58%, color-mix(in srgb, var(--color-primary) 30%, var(--border-soft))) border-box;
  box-shadow:
    inset 4px 0 0 var(--color-primary),
    0 10px 28px -24px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

#view-skills .prog-step.passed {
  border-color: color-mix(in srgb, var(--signal-ok) 28%, var(--border-soft));
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--signal-ok) 8%, transparent), transparent 58%),
    var(--color-surface-2);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--signal-ok) 76%, var(--border-soft));
}

#view-skills .prog-step.passed .step-content,
#view-skills .prog-step.passed .prog-step__visual {
  opacity: 0.9;
}

#view-skills .step-dot,
#view-skills .prog-step.current .step-dot,
#view-skills .prog-step.passed .step-dot {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border-soft) !important;
  border-radius: 10px;
  background: var(--bg-sunken) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
}

#view-skills .prog-step.current .step-dot {
  border-color: color-mix(in srgb, var(--color-primary) 72%, var(--signal-ok)) !important;
  background: linear-gradient(135deg, var(--signal-ok), var(--color-primary) 64%) !important;
  color: var(--ink-on-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

#view-skills .prog-step.passed .step-dot {
  border-color: color-mix(in srgb, var(--signal-ok) 48%, var(--border-soft)) !important;
  background: color-mix(in srgb, var(--signal-ok) 14%, var(--bg-sunken)) !important;
  color: var(--signal-ok) !important;
}

#view-skills .prog-step__visual {
  width: 82px;
  height: 74px;
  border-radius: 13px;
}

#view-skills .prog-step .step-content {
  min-width: 0;
  padding: 0;
}

#view-skills .prog-step .step-level {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}

#view-skills .prog-step .step-hold {
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
}

#view-skills .prog-step .step-criteria,
#view-skills .prog-step .step-notes {
  font-size: 11px;
  line-height: 1.42;
}

#view-skills .prog-step .skill-mark-btn {
  grid-column: 4;
  justify-self: end;
  min-width: 88px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#view-skills .prog-step .skill-mark-btn.active {
  border-color: color-mix(in srgb, var(--color-primary) 46%, var(--signal-ok));
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--signal-ok) 12%, var(--bg-sunken)), color-mix(in srgb, var(--color-primary) 14%, var(--bg-sunken)));
  color: var(--color-primary);
}

#view-skills .prog-step.passed .skill-mark-btn {
  border-color: color-mix(in srgb, var(--signal-ok) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--signal-ok) 11%, var(--bg-sunken));
  color: var(--signal-ok);
}

/* V4.20 Catalog picker parity and stable Program disclosure rhythm.
   Level and Goal use the same button and panel system as Muscle and Equipment.
   This avoids native-select scroll jumps inside the sticky catalog bar and
   gives all four filters one visual and interaction language. */
#view-catalog .catalog-choice-btn {
  min-width: 128px;
}

#view-catalog .catalog-choice-panel {
  padding: var(--space-4);
}

#view-catalog .catalog-choice-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

#view-catalog .catalog-choice-panel-head h3 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#view-catalog .catalog-choice-panel-head span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 650;
}

#view-catalog .catalog-choice-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

#view-catalog .catalog-choice-option {
  width: 100%;
  min-height: 44px;
}

#view-programs .session-hypertrophy > .session-block-header {
  align-content: start;
  row-gap: 10px;
}

#view-programs .session-hypertrophy > .session-block-header > .session-guide-actions {
  margin-top: 0;
}

/* Keep equipment substitution context below the exercise name. Long original
   names must never compete with the title or disclosure control for width. */
#view-programs .ex-card__substitution {
  display: flex;
  min-width: 0;
  margin-top: 6px;
}

#view-programs .ex-card__substitution .sub-badge {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

#view-programs .ex-card__substitution .sub-badge-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 519px) {
  #view-programs .ex-card__substitution {
    margin-top: 5px;
  }

  #view-programs .ex-card__substitution .sub-badge {
    padding: 3px 7px;
    font-size: 10px;
    line-height: 1.25;
  }
}

@media (max-width: 900px) {
  #view-catalog .catalog-choice-btn {
    width: 100%;
  }
}

@media (max-width: 600px) {
  #view-catalog .catalog-choice-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-catalog .catalog-filter-options .catalog-muscle-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-width: 0;
    min-height: 52px;
    column-gap: 6px;
    row-gap: 1px;
    padding: 6px 10px;
    text-align: left;
  }

  #view-catalog .catalog-filter-options .catalog-muscle-btn-label {
    grid-column: 1;
    grid-row: 1;
  }

  #view-catalog .catalog-filter-options .catalog-muscle-btn-value {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-catalog .catalog-filter-options .catalog-muscle-btn-caret {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

@media (hover: hover) and (pointer: fine) {
  #view-skills .prog-step:not(.current):hover {
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--border-soft));
    transform: translateY(-1px);
  }
}

@media screen and (max-width: 760px) {
  #view-skills .prog-step,
  #view-skills .prog-step.current {
    grid-template-columns: 32px 74px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }

  #view-skills .step-dot,
  #view-skills .prog-step.current .step-dot,
  #view-skills .prog-step.passed .step-dot {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  #view-skills .prog-step__visual {
    width: 74px;
    height: 68px;
  }

  #view-skills .prog-step .skill-mark-btn {
    grid-column: 3;
    justify-self: start;
    min-width: 0;
    min-height: 38px;
    padding: 7px 12px;
  }
}

@media screen and (max-width: 399px) {
  #view-skills .skill-path {
    padding: 12px;
  }

  #view-skills .prog-step,
  #view-skills .prog-step.current {
    grid-template-columns: 28px 62px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  #view-skills .step-dot,
  #view-skills .prog-step.current .step-dot,
  #view-skills .prog-step.passed .step-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 10px;
  }

  #view-skills .prog-step__visual {
    width: 62px;
    height: 58px;
  }

  #view-skills .prog-step .step-level {
    font-size: 14px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .section-jump__arrow,
  #view-skills .prog-step {
    transition: none;
  }
}

/* End V4.24 Reference wayfinding and skill progression --------- */

/* V4.25 Program reference visuals and readable mobile type
   Position-dependent guidance gains existing project imagery. Primary mobile
   text no longer shrinks below the common 16-17 px app reading range. */
@media screen {
  #view-programs .skill-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  #view-programs .skill-reference-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--color-surface-2);
  }

  #view-programs .program-reference-visual {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--color-surface);
    color: var(--ink-muted);
  }

  #view-programs .program-reference-visual img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }

  #view-programs .program-reference-visual--skill {
    width: 92px;
    height: 92px;
    border-radius: 12px;
  }

  #view-programs .program-reference-visual--fallback {
    border-style: dashed;
    background:
      radial-gradient(circle at center,
        color-mix(in srgb, var(--sb-accent, var(--accent)) 12%, var(--color-surface)) 0,
        var(--color-surface) 68%);
    color: var(--sb-accent, var(--accent));
  }

  #view-programs .skill-reference-card__body {
    min-width: 0;
  }

  #view-programs .skill-reference-card__eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: var(--ink-muted);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  #view-programs .skill-reference-card__eyebrow span:last-child {
    color: var(--signal-info);
    letter-spacing: 0.04em;
    text-transform: none;
  }

  #view-programs .skill-reference-card__title {
    margin: 0 0 6px;
    color: var(--ink-primary);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.2;
  }

  #view-programs .skill-reference-card__title .exercise-name-link,
  #view-programs .skill-reference-card__title .exercise-name-text {
    color: inherit;
    font: inherit;
    line-height: inherit;
  }

  #view-programs .skill-reference-card__prescription {
    margin-bottom: 7px;
    color: var(--signal-info);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.3;
  }

  #view-programs .skill-reference-card__notes {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.52;
  }

  #view-programs .cooldown-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #view-programs .cooldown-list li.cooldown-list__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 66px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 13px;
    background: var(--color-surface-2);
    font-size: 15px;
    line-height: 1.35;
  }

  #view-programs .cooldown-list li.cooldown-list__item::before {
    display: none;
  }

  #view-programs .program-reference-visual--mobility {
    width: 64px;
    height: 56px;
    border-radius: 10px;
  }

  #view-programs .cooldown-list__copy {
    display: block;
    min-width: 0;
    font-weight: 620;
  }

  #view-programs .cooldown-list__copy .exercise-name-link,
  #view-programs .cooldown-list__copy .exercise-name-text {
    color: inherit;
    font: inherit;
    line-height: inherit;
  }

  #view-catalog .card-name {
    font-size: 18px !important;
  }

  #view-catalog .muscle-names,
  #view-catalog .catalog-card__cue .card-notes {
    font-size: 13px;
  }
}

@media screen and (max-width: 899px) {
  #view-programs .skill-reference-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 699px) {
  #view-programs .skill-block-explainer {
    font-size: 14px;
    line-height: 1.55;
  }

  #view-programs .skill-reference-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  #view-programs .program-reference-visual--skill {
    width: 78px;
    height: 78px;
  }

  #view-programs .skill-reference-card__title {
    font-size: 17px;
  }

  #view-programs .skill-reference-card__prescription {
    font-size: 13px;
  }

  #view-programs .skill-reference-card__notes {
    font-size: 14px;
  }

  #view-programs .cooldown-list {
    grid-template-columns: 1fr;
  }

  #view-programs .cooldown-list li.cooldown-list__item {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 72px;
    font-size: 16px;
  }

  #view-programs .program-reference-visual--mobility {
    width: 72px;
    height: 62px;
  }

  #view-catalog .card-name {
    font-size: 17px !important;
  }

  #view-catalog .muscle-names,
  #view-catalog .catalog-card__cue .card-notes {
    font-size: 14px;
    line-height: 1.45;
  }

  #view-catalog .exercise-card .badge {
    font-size: 10px;
  }

  #view-catalog .catalog-card__equipment .eq-chip {
    font-size: 11px;
  }

  #view-flexibility .exercise-row--visual .exercise-row-name {
    font-size: 16px;
  }

  #view-flexibility .exercise-row--visual .exercise-row-desc {
    font-size: 14px;
    line-height: 1.45;
  }

  #view-flexibility .exercise-row--visual .exercise-row-duration {
    font-size: 12px;
  }

  #view-skills .prog-step .step-level {
    font-size: 16px;
  }

  #view-skills .prog-step .step-hold,
  #view-skills .prog-step .step-criteria,
  #view-skills .prog-step .step-notes {
    font-size: 13px;
    line-height: 1.42;
  }

  #view-skills .prog-step .skill-mark-btn {
    font-size: 12px;
  }
}

@media screen and (max-width: 519px) {
  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 17px;
    line-height: 1.18;
  }

  #view-programs .ex-card__rx strong,
  #view-programs .ex-card__rir-inline strong {
    font-size: 14px;
  }

  #view-programs .ex-card__metric-label {
    font-size: 9px;
  }

  #view-programs .ex-card__rest-label {
    font-size: 12px;
  }

  #view-programs .ex-card__rest-pill .rest-value-small {
    font-size: 10px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    font-size: 13px;
  }
}

@media screen and (max-width: 400px) {
  #view-programs .ex-card__name .ex-sparkline-wrap {
    display: none;
  }

  #view-programs .skill-reference-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  #view-programs .program-reference-visual--skill {
    width: 68px;
    height: 68px;
  }

  #view-programs .skill-reference-card__eyebrow {
    display: block;
    margin-bottom: 6px;
  }

  #view-programs .skill-reference-card__eyebrow span:last-child {
    display: none;
  }

  #view-programs .skill-reference-card__title {
    font-size: 16px;
  }

  #view-programs .cooldown-list li.cooldown-list__item {
    grid-template-columns: 62px minmax(0, 1fr);
    min-height: 64px;
    gap: 10px;
    font-size: 16px;
  }

  #view-programs .program-reference-visual--mobility {
    width: 62px;
    height: 54px;
  }

  #view-catalog .card-name {
    font-size: 16px !important;
  }
}

@media screen and (width <= 360px) {
  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 16px;
  }

  #view-programs .ex-card__rx strong,
  #view-programs .ex-card__rir-inline strong {
    font-size: 13px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  #view-programs .skill-reference-card,
  #view-programs .program-reference-visual {
    transition: none;
  }
}

/* End V4.25 Program reference visuals and readable mobile type */

/* V4.26 Full-width compact Program flow
   On phones and compact tablets, let the day picker and selected-day surface
   use the container's full width. Desktop keeps its deliberate outer gutter. */
@media screen and (max-width: 768px) {
  #view-programs .weekly-carousel,
  #view-programs .day-detail {
    margin-inline: calc(var(--container-pad) * -1);
  }
}

/* End V4.26 Full-width compact Program flow ---------------------- */

/* V4.27 Full-width compact reference rails
   Skills, Flexibility, and Science gain useful width on compact layouts.
   Desktop restores the calmer container gutter around large card grids. */
@media screen and (max-width: 768px) {
  #view-skills .section-jump-shell,
  #view-skills .skill-cards,
  #view-flexibility .section-jump-shell,
  #view-flexibility .flex-sections,
  #view-science .science-grid {
    margin-inline: calc(var(--container-pad) * -1);
  }
}

/* End V4.27 Full-width compact reference rails ------------------ */

/* V4.28 Compact desktop logger */
@media screen and (min-width: 700px) {
  .session-log-overlay {
    padding: 20px;
  }

  .session-log-overlay .session-log-widget {
    width: min(760px, calc(100vw - 40px));
  }

  .session-log-overlay .session-log-form,
  .session-log-overlay .session-log-widget.expanded .session-log-form {
    height: auto;
    max-height: calc(100dvh - 40px);
    border-radius: 16px;
  }

  .session-log-overlay .session-log-heading {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 14px 18px;
  }

  .session-log-heading__close {
    width: 40px;
    height: 40px;
  }

  .session-log-overlay .session-log-heading__title {
    font-size: 1.35rem;
  }

  .session-log-body {
    padding: 14px 18px;
  }

  .session-log-overlay .session-log-date-row {
    min-height: 54px;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  .session-log-overlay .session-log-form input.session-log-date {
    min-height: 40px;
  }

  .session-log-overlay .set-rows {
    gap: 8px;
    margin-bottom: 8px;
  }

  .session-log-overlay .set-row {
    grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
  }

  .session-log-overlay .set-row__header {
    padding-right: 0;
  }

  .session-log-overlay .set-row__controls {
    gap: 8px;
  }

  .session-log-overlay .set-field--load,
  .session-log-overlay .set-field--metric,
  .session-log-overlay .set-field--effort {
    gap: 5px;
  }

  .session-log-overlay .stepper,
  .session-log-overlay .effort-trigger {
    min-height: 42px;
    height: 42px;
  }

  .session-log-overlay .stepper .set-input {
    min-height: 40px;
    font-size: 1rem;
  }

  .session-log-overlay .stepper-btn {
    width: 38px;
    min-width: 38px;
    min-height: 40px;
    flex-basis: 38px;
  }

  .session-log-overlay .set-remove {
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    align-self: center;
    justify-self: center;
  }

  .session-log-overlay .set-add {
    min-height: 42px;
    margin-bottom: 10px;
  }

  .session-log-overlay .session-log-form textarea.session-log-notes {
    min-height: 60px;
    padding: 10px 12px;
    font-size: var(--text-sm);
  }

  .session-log-overlay .session-log-actions {
    min-height: 62px;
    padding: 10px 18px;
  }

  .session-log-overlay .session-log-save,
  .session-log-overlay .session-log-close {
    min-height: 42px;
  }
}

/* End V4.28 Compact desktop logger ----------------------------- */

/* V4.29 Exercise legibility and compact feedback
   Exercise content receives its own larger scale without zooming navigation or
   page chrome. Logger feedback stays brief and mobile-safe. */
@media screen {
  #view-programs .ex-list {
    gap: 15px;
  }

  #view-programs .ex-card__summary {
    grid-template-columns: 88px minmax(264px, 1fr) auto auto 50px;
    grid-template-rows: 20px auto;
    column-gap: 20px;
    min-height: 128px;
    padding: 18px 20px;
  }

  #view-programs .ex-card__index {
    font-size: 11px;
  }

  #view-programs .ex-card__index > span {
    font-size: 10px;
  }

  #view-programs .ex-card__thumb {
    width: 88px;
    height: 88px;
    border-radius: 15px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 24px;
    line-height: 1.16;
  }

  #view-programs .ex-card__prescription {
    min-height: 57px;
    gap: 22px;
    padding-left: 22px;
  }

  #view-programs .ex-card__metric-label {
    font-size: 10px;
  }

  #view-programs .ex-card__rx strong,
  #view-programs .ex-card__rir-inline strong {
    font-size: 17px;
  }

  #view-programs .ex-card__actions {
    min-height: 57px;
    gap: 11px;
    padding-left: 22px;
  }

  #view-programs .ex-card__rest-pill {
    min-width: 187px;
    min-height: 57px;
    padding: 7px 12px 7px 8px;
  }

  #view-programs .ex-card__rest-pill > .rest-divider__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 18px;
  }

  #view-programs .ex-card__rest-label {
    font-size: 13px;
  }

  #view-programs .ex-card__rest-pill .rest-value-small {
    font-size: 11px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 68px;
    min-height: 57px;
    font-size: 14px;
  }

  #view-programs .ex-card__chevron {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

  #view-programs .skill-reference-card__title {
    font-size: 24px;
  }

  #view-catalog .card-name {
    font-size: 24px !important;
  }

  #view-programs .ex-card__substitution .sub-badge {
    max-width: min(100%, 420px);
  }

  #view-programs .ex-card__substitution .sub-badge-text {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  #view-programs .ex-card__index .sub-badge--adapted {
    appearance: none;
    display: inline-flex;
    width: auto;
    min-width: 0;
    align-items: center;
    gap: 3px;
    margin: 0 0 0 3px;
    padding: 0;
    border: 0;
    border-bottom: 1px dotted currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--signal-info);
    font: inherit;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.075em;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
  }

  #view-programs .ex-card__index .sub-badge--adapted:hover,
  #view-programs .ex-card__index .sub-badge--adapted:focus-visible {
    color: var(--ink-primary);
  }

  #view-programs .ex-card__index .sub-badge--adapted:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--signal-info) 48%, transparent);
    outline-offset: 3px;
  }

  #view-programs .ex-card__index .sub-badge__icon {
    color: var(--signal-info);
    font-size: 11px;
    line-height: 1;
  }

  .soma-toast {
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 14px;
    opacity: 0;
    pointer-events: none;
    transition: bottom 220ms ease, opacity 180ms ease;
  }

  .soma-toast.visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media screen and (min-width: 520px) and (max-width: 1095.98px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 77px minmax(0, 1fr) auto 48px;
    grid-template-rows: 20px auto auto;
    column-gap: 18px;
    min-height: 163px;
    padding: 17px 18px;
  }

  #view-programs .ex-card__thumb {
    width: 77px;
    height: 77px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 23px;
  }

  #view-programs .ex-card__prescription,
  #view-programs .ex-card__actions {
    margin-top: 11px;
    padding-top: 13px;
  }
}

@media screen and (max-width: 519px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 68px minmax(0, 1fr) 48px;
    grid-template-rows: 19px auto auto auto;
    column-gap: 13px;
    row-gap: 4px;
    padding: 15px;
  }

  #view-programs .ex-card__thumb {
    width: 68px;
    height: 68px;
    border-radius: 13px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 22px;
    line-height: 1.14;
  }

  #view-programs .ex-card__prescription {
    min-height: 37px;
    gap: 24px;
    margin-top: 10px;
    padding-top: 12px;
  }

  #view-programs .ex-card__actions {
    min-height: 53px;
    gap: 10px;
    padding-top: 7px;
  }

  #view-programs .ex-card__prescription,
  #view-programs .ex-card__actions {
    padding-inline: 0;
  }

  #view-programs .ex-card__rest-pill {
    min-height: 53px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 68px;
    min-height: 53px;
  }

  #view-programs .ex-card__substitution {
    margin-top: 7px;
  }

  #view-programs .ex-card__substitution .sub-badge {
    width: 100%;
    padding: 5px 8px;
    font-size: 11px;
    line-height: 1.3;
  }

  #view-programs .ex-card__substitution .sub-badge-text {
    display: block;
    overflow-wrap: anywhere;
  }

  #view-programs .skill-reference-card__title {
    font-size: 22px;
  }

  #view-catalog .card-name {
    font-size: 22px !important;
  }

  .session-log-overlay .session-log-date-row,
  .session-log-overlay .session-log-date-copy,
  .session-log-overlay .session-log-form input.session-log-date {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .soma-toast {
    bottom: calc(-80px - env(safe-area-inset-bottom));
    width: fit-content;
    font-size: 13px;
    line-height: 1.35;
  }

  .soma-toast.visible {
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

@media screen and (min-width: 520px) and (width < 641px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 77px minmax(0, 1fr) 50px;
    grid-template-rows: 20px auto auto auto;
    grid-template-areas:
      "thumb index toggle"
      "thumb identity toggle"
      "stats stats stats"
      "actions actions actions";
  }

  #view-programs .ex-card__prescription {
    width: 100%;
    padding-inline: 0;
  }

  #view-programs .ex-card__actions {
    width: 100%;
    margin-top: 0;
    padding: 7px 0 0;
    border: 0;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media screen and (width <= 360px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 62px minmax(0, 1fr) 44px;
    padding: 13px;
  }

  #view-programs .ex-card__thumb {
    width: 62px;
    height: 62px;
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: 21px;
  }

  #view-programs .ex-card__rest-pill {
    min-width: 0;
  }

  #view-programs .skill-reference-card__title,
  #view-catalog .card-name {
    font-size: 21px !important;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .soma-toast {
    transition: none;
  }
}

/* End V4.29 Exercise legibility and compact feedback ----------- */

/* V4.31 Safari-safe phone logger
   Phone cards prioritize readable controls over maximum density. The date is
   always a full-width row, while a slim set header frees the whole card width
   for load, reps, and effort controls. */
@media screen and (max-width: 699.98px) {
  .session-log-overlay .session-log-date-row {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    padding: 11px 12px 12px;
    overflow: hidden;
  }

  .session-log-overlay .session-log-date-copy {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .session-log-overlay .session-log-date-label {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .session-log-overlay .session-log-date-help {
    display: none;
  }

  .session-log-overlay .session-log-form input.session-log-date {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    min-height: 46px;
    padding-inline: 12px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .session-log-overlay .set-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .session-log-overlay .set-row__header {
    grid-column: 1;
    grid-row: 1;
    min-height: 32px;
    align-self: center;
    padding: 0 42px 0 0;
  }

  .session-log-overlay .set-row__identity {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .session-log-overlay .set-field--num {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .session-log-overlay .set-num {
    width: 30px;
    height: 30px;
  }

  .session-log-overlay button.set-prev {
    width: auto;
    max-width: 126px;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 10px;
  }

  .session-log-overlay button.set-prev span {
    display: inline;
  }

  .session-log-overlay .set-row__controls,
  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  .session-log-overlay .set-field--effort {
    grid-column: 1 / -1;
  }

  .session-log-overlay .stepper {
    min-height: 48px;
  }

  .session-log-overlay .stepper .set-input {
    min-width: 44px;
    min-height: 46px;
    padding-inline: 2px;
    font-size: 18px;
  }

  .session-log-overlay .stepper-btn {
    width: 42px;
    min-width: 42px;
    min-height: 46px;
    flex-basis: 42px;
  }

  .session-log-overlay .effort-trigger {
    min-height: 48px;
  }

  .session-log-overlay .set-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

@media screen and (max-width: 360px) {
  .session-log-overlay .set-row__controls,
  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-log-overlay .set-field--effort {
    grid-column: auto;
  }
}

/* End V4.31 Safari-safe phone logger --------------------------- */

/* V4.32 Program duration alignment
   Duration belongs with the time-of-day metadata, not in a third header row. */
#view-programs .session-block-header > .session-block-duration {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  margin: 0;
}

/* End V4.32 Program duration alignment ------------------------- */

/* V4.33 Typography hierarchy normalization
   The enlarged exercise cards exposed older reference and supporting text
   that was too quiet beside them. Increase readable and interactive content
   directly while preserving compact eyebrows and indexes. */
@media screen {
  #view-catalog .page-header p,
  #view-skills .page-header p,
  #view-flexibility .page-header p,
  #view-science .page-header p {
    font-size: 16px;
    line-height: 1.55;
  }

  #view-dashboard .dash-card__subtitle,
  #view-dashboard .dash-rest-line,
  #view-dashboard .dash-exercise {
    font-size: 16px;
    line-height: 1.5;
  }

  #view-dashboard .dash-card__empty {
    font-size: 15px;
    line-height: 1.5;
  }

  #view-dashboard .dash-link-btn {
    font-size: 14px;
  }

  #view-dashboard .dash-start-btn,
  #view-dashboard .dash-rest-actions .mode-btn,
  #view-dashboard .dash-login-btn {
    font-size: 15px;
  }

  #view-skills .section-jump__btn,
  #view-flexibility .section-jump__btn,
  #view-science .section-jump__btn {
    min-height: 44px;
    font-size: 13px;
  }

  #view-catalog .muscle-names {
    font-size: 15px;
  }

  #view-catalog .catalog-card__cue .card-notes {
    font-size: 14px;
    line-height: 1.5;
  }

  #view-catalog .catalog-card__equipment .eq-chip {
    font-size: 12px;
  }

  #view-catalog .progression-details summary {
    font-size: 12px;
  }

  #view-catalog .prog-step-pill {
    min-height: 30px;
    font-size: 12px;
    line-height: 1.3;
  }

  #view-catalog .exercise-card .video-btn {
    font-size: 13px;
  }

  #view-skills .skill-card-desc {
    font-size: 16px;
    line-height: 1.5;
  }

  #view-skills .skill-tl__item {
    font-size: 14px;
  }

  #view-skills .prog-step .step-level,
  #view-skills .prog-step .step-level .exercise-name-link,
  #view-skills .prog-step .step-level .exercise-name-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
  }

  #view-skills .prog-step .step-hold,
  #view-skills .prog-step .step-criteria,
  #view-skills .prog-step .step-notes {
    font-size: 14px;
    line-height: 1.45;
  }

  #view-skills .prog-step .skill-mark-btn {
    font-size: 13px;
  }

  #view-skills .skill-card-body .eq-chip,
  #view-skills .skill-card-body .eq-chip .exercise-name-link,
  #view-skills .skill-card-body .eq-chip .exercise-name-text {
    font-size: 16px;
    font-weight: 600;
  }

  #view-skills .skill-card-body > .mt-4 .video-btn {
    font-size: 14px;
  }

  #view-flexibility .flex-intro {
    font-size: 16px;
    line-height: 1.55;
  }

  #view-flexibility .exercise-row--visual .exercise-row-name,
  #view-flexibility .exercise-row--visual .exercise-row-name .exercise-name-link,
  #view-flexibility .exercise-row--visual .exercise-row-name .exercise-name-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
  }

  #view-flexibility .exercise-row--visual .exercise-row-desc {
    font-size: 15px;
    line-height: 1.5;
  }

  #view-flexibility .exercise-row--visual .exercise-row-duration,
  #view-flexibility .timeline-badge {
    font-size: 13px;
  }

  #view-flexibility .phase-title {
    font-size: 14px;
    line-height: 1.35;
  }

  #view-flexibility .alert-text {
    font-size: 15px;
    line-height: 1.5;
  }

  #view-flexibility .video-btn,
  #view-flexibility .flow-start-btn {
    font-size: 14px;
  }

  #view-programs .equipment-clear-btn,
  #view-programs .eq-toggle {
    font-size: 13px;
  }

  #view-programs .briefing-flow-steps li {
    font-size: 16px;
    line-height: 1.5;
  }

  #view-programs .briefing-flow-glossary {
    font-size: 14px;
    line-height: 1.5;
  }

  #view-programs .day-anchor-btn {
    font-size: 13px;
  }

  #view-programs .day-flow-hint,
  #view-programs .warmup-list > li {
    font-size: 16px;
    line-height: 1.5;
  }

  #view-programs .section-help,
  #view-programs .session-block-header > .section-help,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .section-help,
  #view-programs .session-guide-actions > .section-help {
    font-size: 13px;
  }

  #view-programs .skill-reference-card__notes {
    font-size: 15px;
  }

  #view-science .science-card__lead {
    font-size: 16px;
    line-height: 1.6;
  }

  #view-science .science-card__note {
    font-size: 14px;
    line-height: 1.45;
  }

  #view-science .sra-chart__label {
    font-size: 11px;
  }

  #view-science .sra-chart__label strong {
    font-size: 12px;
  }

  #view-science .sra-chart__label span {
    font-size: 10px;
  }

  #view-science .sra-stage strong {
    font-size: 14px;
  }

  #view-science .sra-stage small {
    font-size: 12px;
  }

  #view-science .science-subcol > p,
  #view-science .science-table td {
    font-size: 15px;
  }

  #view-science .science-author {
    font-size: 12px;
  }

  #view-science .principle-text {
    font-size: 15px;
  }

  #view-science .rep-spectrum__eyebrow,
  #view-science .rep-spectrum__overlap,
  #view-science .rep-spectrum__continuum,
  #view-science .rep-spectrum__card small {
    font-size: 10px;
  }

  #view-science .rep-spectrum__card strong {
    font-size: 15px;
  }

  #view-science .rep-spectrum__card p {
    font-size: 12px;
    line-height: 1.45;
  }

  #view-science .rep-spectrum__note {
    font-size: 13px;
    line-height: 1.55;
  }
}

@media screen and (max-width: 760px) {
  #view-skills .prog-step .step-level,
  #view-skills .prog-step .step-level .exercise-name-link,
  #view-skills .prog-step .step-level .exercise-name-text {
    font-size: 17px;
  }

  #view-skills .prog-step .step-hold,
  #view-skills .prog-step .step-criteria,
  #view-skills .prog-step .step-notes {
    font-size: 13px;
  }

  #view-skills .prog-step .skill-mark-btn {
    font-size: 12px;
  }

  #view-flexibility .exercise-row--visual .exercise-row-name,
  #view-flexibility .exercise-row--visual .exercise-row-name .exercise-name-link,
  #view-flexibility .exercise-row--visual .exercise-row-name .exercise-name-text {
    font-size: 17px;
  }

  #view-flexibility .phase-title {
    font-size: 13px;
  }

  #view-science .sra-chart__label {
    font-size: 10px;
  }

  #view-science .sra-chart__label strong {
    font-size: 11px;
  }
}

@media screen and (max-width: 360px) {
  #view-skills .prog-step .step-level,
  #view-skills .prog-step .step-level .exercise-name-link,
  #view-skills .prog-step .step-level .exercise-name-text {
    font-size: 16px;
  }

  #view-flexibility .exercise-row--visual .exercise-row-name,
  #view-flexibility .exercise-row--visual .exercise-row-name .exercise-name-link,
  #view-flexibility .exercise-row--visual .exercise-row-name .exercise-name-text {
    font-size: 16px;
  }
}

/* End V4.33 Typography hierarchy normalization ---------------- */

/* V4.34 Minimal mobile workout logger
   Phone logging uses one quiet set list instead of a stack of nested cards.
   The visible date surface is controlled by SOMA while the native date input
   remains the full interactive target, preventing Safari intrinsic overflow. */
.session-log-date-control {
  display: contents;
}

.session-log-date-display {
  display: none;
}

@media screen and (max-width: 699.98px) {
  .session-log-overlay {
    align-items: end;
    padding: 4px;
  }

  .session-log-overlay .session-log-widget {
    width: calc(100vw - 8px);
  }

  .session-log-overlay .session-log-form,
  .session-log-overlay .session-log-widget.expanded .session-log-form {
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    border-color: var(--border-hard);
    border-radius: 18px;
    background: var(--bg-elevated);
  }

  .session-log-overlay .session-log-heading {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-elevated);
  }

  .session-log-overlay .session-log-heading__copy {
    gap: 3px;
  }

  .session-log-overlay .session-log-heading__eyebrow {
    font-size: 10px;
  }

  .session-log-overlay .session-log-heading__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
  }

  .session-log-heading__close {
    width: 40px;
    height: 40px;
    border-color: transparent;
    background: transparent;
    font-size: 23px;
  }

  .session-log-body {
    padding: 0 12px 12px;
    scrollbar-gutter: auto;
  }

  .session-log-overlay .session-log-date-row {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 12px;
    margin: 0 0 6px;
    padding: 6px 2px 8px;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
  }

  .session-log-overlay .session-log-date-copy {
    display: block;
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
  }

  .session-log-overlay .session-log-date-label {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .session-log-overlay .session-log-date-help {
    display: none;
  }

  .session-log-date-control {
    position: relative;
    display: flex;
    width: 168px;
    min-width: 0;
    max-width: calc(100% - 104px);
    height: 44px;
    flex: 0 1 168px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--border-hard);
    border-radius: 11px;
    background: var(--color-surface-2);
    color: var(--ink-primary);
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }

  .session-log-date-control::after {
    width: 14px;
    height: 13px;
    flex: 0 0 14px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    background: linear-gradient(currentColor, currentColor) 0 3px / 100% 1.5px no-repeat;
    color: var(--ink-secondary);
    content: '';
  }

  .session-log-date-control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  .session-log-date-display {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--ink-primary);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-log-overlay .session-log-form input.session-log-date {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100%;
    min-height: 0;
    padding: 0;
    opacity: 0;
    border: 0;
    cursor: pointer;
  }

  .session-log-overlay .set-rows {
    display: block;
    margin: 0 0 8px;
    overflow: visible;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-text) 1.5%, var(--color-surface-2));
  }

  .session-log-overlay .set-row {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 12px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .session-log-overlay .set-row:last-child {
    border-bottom: 0;
  }

  .session-log-overlay .set-row:hover {
    border-color: var(--border-soft);
    background: color-mix(in srgb, var(--accent) 2%, transparent);
  }

  .session-log-overlay .set-row:has(.effort-scale.is-open) {
    z-index: 125;
  }

  .session-log-overlay .set-row__header {
    grid-column: 1;
    grid-row: 1;
    min-height: 26px;
    align-self: center;
    padding: 0 34px 0 0;
  }

  .session-log-overlay .set-row__identity {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .session-log-overlay .set-field--num {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
  }

  .session-log-overlay .set-num-label {
    font-size: 9px;
  }

  .session-log-overlay .set-num {
    display: inline-flex;
    width: auto;
    min-width: 0;
    height: auto;
    align-items: baseline;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
  }

  .session-log-overlay button.set-prev {
    width: auto;
    min-width: 0;
    max-width: 130px;
    min-height: 24px;
    padding: 3px 7px;
    border-color: var(--border-soft);
    background: var(--bg-elevated);
    font-size: 10px;
  }

  .session-log-overlay button.set-prev span {
    display: inline;
  }

  .session-log-overlay .set-row__controls,
  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .session-log-overlay .set-field--load,
  .session-log-overlay .set-field--metric {
    gap: 4px;
  }

  .session-log-overlay .set-field--effort {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) .set-field--effort {
    display: flex;
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .session-log-overlay .set-field-label {
    font-size: 9px;
  }

  .session-log-overlay .stepper,
  .session-log-overlay .effort-trigger {
    min-height: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .session-log-overlay .stepper .set-input {
    min-width: 0;
    min-height: 42px;
    padding-inline: 2px;
    font-size: 17px;
  }

  .session-log-overlay .stepper-btn {
    width: 38px;
    min-width: 38px;
    min-height: 42px;
    flex-basis: 38px;
  }

  .session-log-overlay .effort-trigger {
    padding: 0 10px;
    grid-template-columns: 19px minmax(0, 1fr) 16px;
    gap: 8px;
  }

  .session-log-overlay .effort-trigger-swatch {
    width: 18px;
    height: 18px;
  }

  .session-log-overlay .effort-trigger-text {
    font-size: 14px;
    font-weight: 650;
  }

  .session-log-overlay .set-remove {
    position: absolute;
    top: 5px;
    right: 3px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 18px;
  }

  .session-log-overlay .set-add {
    min-height: 44px;
    margin: 0 0 10px;
    border-color: var(--border-soft);
    border-radius: 12px;
    background: transparent;
  }

  .session-log-notes-field {
    gap: 6px;
  }

  .session-log-overlay .session-log-form textarea.session-log-notes {
    min-height: 64px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .session-log-overlay .session-log-actions {
    grid-template-columns: minmax(0, 1.7fr) minmax(104px, 0.8fr);
    min-height: 66px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--bg-elevated);
  }

  .session-log-overlay .session-log-save,
  .session-log-overlay .session-log-close {
    min-height: 46px;
    padding-inline: 12px;
  }

  .session-log-overlay .session-log-status {
    grid-column: 1 / -1;
    font-size: 12px;
    text-align: left;
  }
}

@media screen and (max-width: 360px) {
  .session-log-body {
    padding-inline: 10px;
  }

  .session-log-date-control {
    width: 158px;
    max-width: calc(100% - 96px);
    flex-basis: 158px;
    padding-inline: 10px;
  }

  .session-log-date-display {
    font-size: 14px;
  }

  .session-log-overlay .set-row {
    padding-inline: 10px;
  }

  .session-log-overlay .stepper-btn {
    width: 35px;
    min-width: 35px;
    flex-basis: 35px;
  }

  .session-log-overlay .set-row__controls,
  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-log-overlay .set-field--effort {
    grid-column: 1 / -1;
  }

  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) .set-field--effort {
    grid-column: auto;
  }

  .session-log-overlay .session-log-actions {
    padding-inline: 10px;
  }
}

/* End V4.34 Minimal mobile workout logger ---------------------- */

/* V4.35 Mobile logger grid
   A set is a compact training record, not a form card. Shared headings and
   concise RIR controls remove repetition while keeping every input explicit. */
.session-log-overlay .set-rows-heading {
  display: none;
}

@media screen and (max-width: 699.98px) {
  .session-log-overlay .session-log-form,
  .session-log-overlay .session-log-widget.expanded .session-log-form {
    height: auto;
    max-height: calc(100dvh - 16px);
  }

  .session-log-overlay .session-log-body {
    flex: 0 1 auto;
  }

  .session-log-overlay .set-rows {
    display: block;
    margin: 4px 0 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .session-log-overlay .set-rows-heading,
  .session-log-overlay .set-row {
    display: grid;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    column-gap: 5px;
    row-gap: 2px;
    align-items: center;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='loaded'] .set-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 92px 28px;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='simple'] .set-row {
    grid-template-columns: 28px minmax(0, 1fr) 110px 28px;
  }

  .session-log-overlay .set-rows-heading {
    min-height: 24px;
    padding: 0 6px 3px;
    color: var(--ink-muted);
  }

  .session-log-overlay .set-grid-heading {
    min-width: 0;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
  }

  .session-log-overlay .set-grid-heading--set {
    grid-column: 1;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--load {
    grid-column: 2;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--metric {
    grid-column: 3;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--effort {
    grid-column: 4;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--remove {
    grid-column: 5;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-grid-heading--metric {
    grid-column: 2;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-grid-heading--effort {
    grid-column: 3;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-grid-heading--remove {
    grid-column: 4;
  }

  .session-log-overlay .set-row {
    min-height: 58px;
    padding: 7px 6px;
    border: 0;
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .session-log-overlay .set-row:last-child {
    border-bottom: 1px solid var(--border-soft);
  }

  .session-log-overlay .set-row:hover {
    border-color: var(--border-soft);
    background: color-mix(in srgb, var(--accent) 2%, transparent);
  }

  .session-log-overlay .set-row__header,
  .session-log-overlay .set-row__identity,
  .session-log-overlay .set-row__controls {
    display: contents;
  }

  .session-log-overlay .set-field--num {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .session-log-overlay .set-num-label,
  .session-log-overlay .set-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .session-log-overlay .set-num {
    display: grid;
    width: 26px;
    min-width: 26px;
    height: 26px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  .session-log-overlay .set-side {
    width: 22px;
    height: 18px;
    min-width: 22px;
    min-height: 18px;
    border-radius: 5px;
    font-size: 9px;
  }

  .session-log-overlay .set-field--load {
    grid-column: 2;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--metric {
    grid-column: 3;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--effort {
    grid-column: 4;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-field--metric {
    grid-column: 2;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-field--effort {
    grid-column: 3;
    grid-row: 1;
  }

  .session-log-overlay .set-field--load,
  .session-log-overlay .set-field--metric,
  .session-log-overlay .set-field--effort {
    display: block;
    min-width: 0;
  }

  .session-log-overlay .stepper,
  .session-log-overlay .effort-trigger {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    border-radius: 10px;
  }

  .session-log-overlay .stepper-btn {
    width: 30px;
    min-width: 30px;
    min-height: 42px;
    flex-basis: 30px;
    font-size: 18px;
  }

  .session-log-overlay .stepper .set-input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 1px;
    font-size: 16px;
  }

  .session-log-overlay .effort-trigger {
    padding: 0 8px;
    grid-template-columns: 15px minmax(0, 1fr) 12px;
    gap: 5px;
  }

  .session-log-overlay .effort-trigger-swatch {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
  }

  .session-log-overlay .effort-trigger-text {
    font-size: 0;
    font-weight: 700;
  }

  .session-log-overlay .effort-trigger-text::after {
    color: var(--ink-primary);
    content: attr(data-short);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .session-log-overlay .effort-trigger-chevron,
  .session-log-overlay .effort-trigger-chevron::before {
    width: 6px;
    height: 6px;
  }

  .session-log-overlay .effort-popover {
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    width: min(260px, calc(100vw - 40px));
    padding: 4px;
    gap: 1px;
  }

  .session-log-overlay .effort-scale.is-open .effort-dot {
    min-height: 42px;
    padding: 5px 8px;
  }

  .session-log-overlay .effort-scale.opens-up .effort-popover {
    top: auto;
    bottom: calc(100% + 4px);
  }

  .session-log-overlay .set-remove {
    position: static;
    grid-row: 1;
    display: grid;
    width: 28px;
    height: 44px;
    min-width: 28px;
    min-height: 44px;
    place-items: center;
    justify-self: end;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 17px;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-remove {
    grid-column: 5;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-remove {
    grid-column: 4;
  }

  .session-log-overlay .set-field--prev {
    grid-column: 2 / -2;
    grid-row: 2;
    display: flex;
    margin-top: 0;
    justify-self: start;
  }

  .session-log-overlay button.set-prev {
    min-height: 16px;
    max-width: 160px;
    padding: 0 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 9px;
  }

  .session-log-overlay button.set-prev span {
    font-size: 8px;
  }

  .session-log-overlay .set-delta {
    display: none;
  }

  .session-log-overlay .set-add {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 40px;
    margin: 2px auto 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 750;
  }

  .session-log-overlay .set-add:hover {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
  }

  .session-log-overlay .session-log-notes-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .session-log-overlay .session-log-form textarea.session-log-notes {
    min-height: 48px;
    max-height: 84px;
    padding: 11px 12px;
  }

  .session-log-overlay .session-log-actions {
    display: block;
    min-height: 64px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }

  .session-log-overlay .session-log-save {
    width: 100%;
    min-height: 46px;
  }

  .session-log-overlay .session-log-close {
    display: none;
  }

  .session-log-overlay .session-log-status {
    display: block;
    padding: 5px 2px 0;
    font-size: 11px;
    text-align: center;
  }
}

@media screen and (max-width: 340px) {
  .session-log-overlay .set-rows[data-layout='loaded'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='loaded'] .set-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 28px;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--load {
    grid-column: 2;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--metric {
    grid-column: 3;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--effort {
    display: none;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--remove {
    grid-column: 4;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--effort {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: 5px;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-remove {
    grid-column: 4;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--prev {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='simple'] .set-row {
    grid-template-columns: 28px minmax(0, 1fr) 96px 28px;
  }
}

/* End V4.35 Mobile logger grid ------------------------------- */

/* V4.36 Thumb-safe set actions
   Mobile rows reserve their width for the training inputs. Effort stays
   color-led, while deletion uses a deliberate swipe or tap-to-reveal action. */
.session-log-overlay > .effort-popover--portal {
  position: fixed;
  inset: auto;
  display: flex;
  min-width: 0;
  margin: 0;
  overscroll-behavior: contain;
  z-index: 2305;
  animation: effort-menu-enter 140ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

@media screen and (max-width: 699.98px) {
  .session-log-overlay .set-rows[data-layout='loaded'] .set-rows-heading {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 64px;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-rows-heading {
    grid-template-columns: 30px minmax(0, 1fr) 64px;
  }

  .session-log-overlay .set-rows-heading {
    padding-right: 18px;
  }

  .session-log-overlay .set-row {
    --set-delete-width: 82px;
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text) 2%, var(--color-surface));
    isolation: isolate;
  }

  .session-log-overlay .set-row:has(.effort-scale.is-open) {
    z-index: 125;
    overflow: visible;
  }

  .session-log-overlay .set-row__content {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    box-sizing: border-box;
    column-gap: 5px;
    row-gap: 2px;
    align-items: center;
    padding: 7px 18px 7px 6px;
    background: var(--color-surface);
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(var(--set-swipe-offset, 0px), 0, 0);
    transition: transform 160ms cubic-bezier(0.2, 0.75, 0.25, 1);
    will-change: transform;
  }

  .session-log-overlay .set-row__content * {
    -webkit-tap-highlight-color: transparent;
  }

  .session-log-overlay .set-row.is-set-swipe-armed .set-row__content {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-row__content {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 64px;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-row__content {
    grid-template-columns: 30px minmax(0, 1fr) 64px;
  }

  .session-log-overlay .set-row.is-set-swiping .set-row__content {
    transition: none;
  }

  .session-log-overlay .set-row.is-set-swiping .stepper:focus-within {
    border-color: var(--border-hard);
    box-shadow: none;
  }

  .session-log-overlay .set-row.is-set-swiping .stepper .set-input:focus,
  .session-log-overlay .set-row.is-set-swiping .stepper-btn:active {
    background: transparent;
    box-shadow: none;
    color: var(--ink-secondary);
    transform: none;
  }

  .session-log-overlay .set-row.is-set-swiping .effort-trigger:active {
    transform: none;
  }

  .session-log-overlay .set-row.is-delete-revealed .set-row__content {
    transform: translate3d(var(--set-swipe-offset, calc(-1 * var(--set-delete-width))), 0, 0);
  }

  .session-log-overlay .set-row.is-delete-tap-opening.is-delete-revealed .set-row__content {
    transition-delay: 82ms;
  }

  .session-log-overlay .set-row:hover {
    border-color: var(--border-soft);
    background: color-mix(in srgb, var(--color-text) 2%, var(--color-surface));
  }

  .session-log-overlay .set-row:hover .set-row__content {
    background: var(--color-surface);
  }

  .session-log-overlay .set-delete-action {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: var(--set-delete-width);
    place-items: stretch;
    overflow: hidden;
    border-left: 1px solid color-mix(in srgb, var(--color-error) 72%, transparent);
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-error) 70%, #26070d),
      color-mix(in srgb, var(--color-error) 92%, #26070d)
    );
    pointer-events: none;
  }

  .session-log-overlay .set-row.is-delete-revealed .set-delete-action {
    pointer-events: auto;
  }

  .session-log-overlay .set-delete-confirm {
    width: 100%;
    min-width: 82px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    opacity: 1;
    transform: none;
    transition: background 120ms ease;
  }

  .session-log-overlay .set-delete-confirm:active {
    background: color-mix(in srgb, #000 14%, transparent);
  }

  .session-log-overlay .set-delete-confirm:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  .session-log-overlay .set-delete-handle {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: 28px;
    min-width: 28px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-items: end;
    border: 0;
    border-radius: 0;
    background: transparent;
    touch-action: manipulation;
    transition: opacity 80ms linear;
  }

  .session-log-overlay .set-delete-handle span {
    display: block;
    width: 3px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-error);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 16%, transparent);
    opacity: 0.78;
    transform-origin: center;
    transition:
      height 82ms cubic-bezier(0.2, 0.75, 0.25, 1),
      opacity 82ms linear,
      box-shadow 82ms linear;
  }

  .session-log-overlay .set-delete-handle:focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: -4px;
  }

  .session-log-overlay .set-row.is-delete-tap-opening .set-delete-handle span,
  .session-log-overlay .set-row.is-set-swiping .set-delete-handle span,
  .session-log-overlay .set-row.is-delete-revealed .set-delete-handle span,
  .session-log-overlay .set-row.is-delete-closing .set-delete-handle span {
    height: calc(100% - 4px);
    opacity: 1;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-error) 24%, transparent),
      0 0 12px color-mix(in srgb, var(--color-error) 32%, transparent);
  }

  .session-log-overlay .set-row.is-set-swiping .set-delete-handle,
  .session-log-overlay .set-row.is-delete-revealed .set-delete-handle,
  .session-log-overlay .set-row.is-delete-closing .set-delete-handle {
    pointer-events: none;
  }

  .session-log-overlay .set-remove {
    display: none;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--effort {
    grid-column: 4;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-grid-heading--effort {
    grid-column: 3;
  }

  .session-log-overlay .effort-trigger {
    width: 64px;
    min-width: 64px;
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
    grid-template-columns: 22px 10px;
    justify-content: center;
    gap: 7px;
  }

  .session-log-overlay .effort-trigger-swatch {
    width: 20px;
    height: 20px;
  }

  .session-log-overlay .effort-trigger-text,
  .session-log-overlay .effort-trigger-text::after {
    display: none;
    content: none;
  }

  .session-log-overlay .effort-trigger-chevron,
  .session-log-overlay .effort-trigger-chevron::before {
    width: 7px;
    height: 7px;
  }

  .session-log-overlay .stepper,
  .session-log-overlay .effort-trigger {
    min-height: 48px;
  }

  .session-log-overlay .stepper-btn {
    width: 36px;
    min-width: 36px;
    min-height: 46px;
    flex-basis: 36px;
  }

  .session-log-overlay .stepper .set-input {
    min-height: 46px;
  }

  .session-log-overlay .set-field--prev {
    grid-column: 2 / -1;
  }
}

@media screen and (max-width: 340px) {
  .session-log-overlay .set-rows[data-layout='loaded'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='loaded'] .set-row__content {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-rows-heading {
    min-height: 36px;
    row-gap: 5px;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-grid-heading--effort {
    display: block;
    width: 64px;
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--effort {
    width: 64px;
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--prev {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='simple'] .set-row__content {
    grid-template-columns: 28px minmax(0, 1fr) 60px;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-grid-heading--effort {
    grid-column: 3;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-field--effort {
    grid-column: 3;
  }

  .session-log-overlay .set-row__content {
    padding-right: 16px;
  }

  .session-log-overlay .set-rows-heading {
    padding-right: 16px;
  }

  .session-log-overlay .effort-trigger {
    width: 60px;
    min-width: 60px;
  }

  .session-log-overlay .stepper-btn {
    width: 34px;
    min-width: 34px;
    flex-basis: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-log-overlay .set-row__content,
  .session-log-overlay .set-delete-handle,
  .session-log-overlay .set-delete-handle span,
  .session-log-overlay .set-delete-action,
  .session-log-overlay .set-delete-confirm {
    transition: none;
  }

  .session-log-overlay > .effort-popover--portal {
    animation: none;
  }
}

/* End V4.36 Thumb-safe set actions -------------------------- */

@keyframes effort-menu-enter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* V4.37 Flat mobile session hierarchy
   The day surface is the section container on phones. Training blocks become
   lightweight section rows, while exercise cards remain the actionable layer. */
@media screen and (max-width: 640px) {
  #view-programs .session-block,
  #view-programs .session-section {
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #view-programs .session-block-header,
  #view-programs details.session-collapsible > .session-block-header,
  #view-programs .session-hypertrophy > .session-block-header,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header {
    width: 100%;
    padding: 14px 12px;
  }

  #view-programs .session-block-header::before {
    left: 0;
  }

  #view-programs .session-guide-actions {
    margin-top: 8px;
  }

  #view-programs .session-block .ex-list {
    width: 100%;
    margin: 0;
    gap: 12px;
  }

  #view-programs .session-block .ex-list .ex-card {
    border-radius: 14px;
  }

  #view-programs .session-collapsible-body {
    padding: 4px 0 20px;
  }

  #view-programs details.session-collapsible > .session-collapsible-body {
    padding-inline: 12px;
  }

  #view-programs .skill-block-explainer {
    margin: 0 12px 14px;
  }

  #view-programs .skill-reference-grid,
  #view-programs .cooldown-list {
    margin: 0;
  }
}

/* End V4.37 Flat mobile session hierarchy ------------------ */

/* V4.38 Private-program visual parity
   JF and Anita now share the same image-rich guidance language as the public
   programs. Legacy tables are replaced by calm, scannable cards and rows. */
#view-programs .program-reference-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

#view-programs .program-reference-list__item {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 72px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--color-surface-2);
}

#view-programs .program-reference-list__item::before {
  content: none;
}

#view-programs .program-reference-list .program-reference-visual {
  width: 66px;
  height: 56px;
  border-radius: 10px;
}

#view-programs .program-reference-list__copy,
#view-programs .program-reference-list__copy .exercise-name-link,
#view-programs .program-reference-list__copy .exercise-name-text {
  min-width: 0;
  color: var(--ink-primary);
  font-size: 15px;
  font-weight: 560;
  line-height: 1.38;
}

#view-programs .session-optional {
  --sb-accent: var(--color-primary);
}

#view-programs .coaching-notes + .session-optional {
  margin-top: var(--space-4);
}

#view-programs .program-optional-intro {
  margin: 2px 0 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border-soft));
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-2));
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.55;
}

#view-programs .program-reference-list__item--text {
  grid-column: 1 / -1;
  display: block;
  min-height: 0;
  padding: 13px 15px;
  border-left: 3px solid var(--sb-accent, var(--color-primary));
}

#view-programs .program-reference-list__item--text .program-reference-list__copy {
  display: block;
}

#view-programs .program-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

#view-programs .program-guidance-card {
  position: relative;
  display: grid;
  grid-template-columns: 32px 82px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface-2);
}

#view-programs .program-guidance-card__index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sb-accent, var(--signal-ok)) 50%, var(--border-soft));
  border-radius: 9px;
  color: var(--sb-accent, var(--signal-ok));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 720;
}

#view-programs .program-reference-visual--prehab,
#view-programs .program-reference-visual--guidance {
  width: 82px;
  height: 76px;
  border-radius: 11px;
}

#view-programs .program-guidance-card__body {
  min-width: 0;
}

#view-programs .program-guidance-card__title {
  margin: 0 0 7px;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

#view-programs .program-guidance-card__title .exercise-name-link,
#view-programs .program-guidance-card__title .exercise-name-text {
  color: inherit;
  font: inherit;
}

#view-programs .program-guidance-card__prescription {
  color: var(--sb-accent, var(--signal-ok));
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 720;
}

#view-programs .program-guidance-card__notes {
  grid-column: 2 / -1;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.48;
}

#view-programs .program-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#view-programs .program-schedule-day {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--color-surface);
}

#view-programs .program-schedule-day.is-today {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-soft));
  box-shadow: inset 3px 0 0 var(--accent);
}

#view-programs .program-schedule-day__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

#view-programs .program-schedule-day__eyebrow {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#view-programs .program-schedule-day__header h3 {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

#view-programs .program-schedule-day__today {
  color: var(--accent);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#view-programs .program-schedule-day__activities {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

#view-programs .program-schedule-activity {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 7px 0;
}

#view-programs .program-schedule-activity + .program-schedule-activity {
  border-top: 1px solid var(--border-soft);
}

#view-programs .program-reference-visual--schedule {
  width: 54px;
  height: 50px;
  border-radius: 9px;
}

#view-programs .program-schedule-activity__copy {
  min-width: 0;
}

#view-programs .program-schedule-activity__label {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-programs .program-schedule-activity__copy .exercise-name-link,
#view-programs .program-schedule-activity__copy .exercise-name-text {
  color: var(--ink-primary);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.35;
}

#view-programs .program-callout-visual {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

#view-programs .program-callout-visual p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

#view-programs .program-mini-session {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--color-surface);
}

#view-programs .program-mini-session__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--border-soft);
}

#view-programs .program-mini-session__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-programs .program-mini-session__header h3 {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

#view-programs .program-mini-session__duration {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

#view-programs .program-mini-session__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#view-programs .program-mini-step {
  display: grid;
  grid-template-columns: 28px 68px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

#view-programs .program-mini-step + .program-mini-step {
  border-left: 1px solid var(--border-soft);
}

#view-programs .program-mini-step__number {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 720;
}

#view-programs .program-mini-step .program-reference-visual {
  width: 68px;
  height: 62px;
  border-radius: 10px;
}

#view-programs .program-mini-step__copy {
  min-width: 0;
}

#view-programs .program-mini-step__copy > span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-programs .program-mini-step__copy .exercise-name-link,
#view-programs .program-mini-step__copy .exercise-name-text {
  color: var(--ink-primary);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.35;
}

#view-programs .program-supporting-copy {
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.48;
}

#view-programs .program-metric-list {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface);
}

#view-programs .program-metric-list__header,
#view-programs .program-metric-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(110px, .8fr) minmax(160px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

#view-programs .program-metric-list__header {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-programs .program-metric-row {
  border-top: 1px solid var(--border-soft);
  color: var(--ink-secondary);
  font-size: 14px;
}

#view-programs .program-metric-row strong {
  color: var(--ink-primary);
  font-weight: 600;
}

#view-programs .program-metric-row__target {
  color: var(--signal-ok);
  font-weight: 600;
}

#view-programs .program-roadmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#view-programs .program-roadmap__step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface);
}

#view-programs .program-roadmap__number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  border-radius: 10px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 720;
}

#view-programs .program-roadmap__range {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#view-programs .program-roadmap h3 {
  margin: 0 0 6px;
  color: var(--ink-primary);
  font-size: 17px;
  font-weight: 600;
}

#view-programs .program-roadmap p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.48;
}

@media screen and (max-width: 899px) {
  #view-programs .program-guidance-grid,
  #view-programs .program-schedule-grid,
  #view-programs .program-roadmap {
    grid-template-columns: 1fr;
  }

  #view-programs .program-mini-session__steps {
    grid-template-columns: 1fr;
  }

  #view-programs .program-mini-step + .program-mini-step {
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }
}

@media screen and (max-width: 640px) {
  #view-programs .session-optional .session-collapsible-body {
    padding-top: 2px;
  }

  #view-programs .program-optional-intro {
    margin: 2px 12px 10px;
    padding: 13px 14px;
    font-size: 15px;
  }

  #view-programs .program-reference-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 2px 12px 0;
  }

  #view-programs .program-reference-list__item {
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 70px;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
  }

  #view-programs .program-reference-list__item--text {
    display: block;
    min-height: 0;
    margin: 8px 0;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--sb-accent, var(--color-primary));
    border-radius: 11px;
    background: var(--color-surface-2);
  }

  #view-programs .program-reference-list .program-reference-visual {
    width: 60px;
    height: 54px;
  }

  #view-programs .program-reference-list__copy,
  #view-programs .program-reference-list__copy .exercise-name-link,
  #view-programs .program-reference-list__copy .exercise-name-text {
    font-size: 16px;
  }

  #view-programs .program-guidance-grid {
    gap: 0;
    margin: 0 12px;
  }

  #view-programs .program-guidance-card {
    grid-template-columns: 30px 70px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
  }

  #view-programs .program-reference-visual--prehab,
  #view-programs .program-reference-visual--guidance {
    width: 70px;
    height: 66px;
  }

  #view-programs .program-guidance-card__notes {
    font-size: 14px;
  }

  #view-programs .program-schedule-day {
    padding: 14px;
  }

  #view-programs .program-mini-session__header {
    padding: 15px;
  }

  #view-programs .program-mini-step {
    grid-template-columns: 24px 64px minmax(0, 1fr);
    padding: 12px 14px;
  }

  #view-programs .program-mini-step .program-reference-visual {
    width: 64px;
    height: 58px;
  }

  #view-programs .program-metric-list__header {
    display: none;
  }

  #view-programs .program-metric-row {
    grid-template-columns: 1fr auto;
    gap: 5px 14px;
    padding: 13px 14px;
  }

  #view-programs .program-metric-row strong {
    grid-column: 1 / -1;
  }

  #view-programs .program-metric-row__target {
    text-align: right;
  }
}

/* End V4.38 Private-program visual parity ------------------ */

/* V4.39 Two-state program-card breakpoint ------------------ */
@media screen and (min-width: 520px) and (max-width: 1095.98px) {
  #view-programs .ex-card__summary::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: start;
    width: 100%;
    height: 1px;
    background: var(--border-soft);
    pointer-events: none;
  }

  #view-programs .ex-card__prescription,
  #view-programs .ex-card__actions {
    align-self: stretch;
    border-top: 0;
  }

  #view-programs .ex-card__prescription {
    justify-self: stretch;
  }

  #view-programs .ex-card__actions {
    min-width: 0;
    padding-left: 16px;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    min-width: 160px;
    padding-inline: 7px 10px;
  }

  #view-programs .ex-card__rest-pill > .rest-divider__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  #view-programs .ex-card__rest-label {
    font-size: 12px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-width: 60px;
    padding-inline: 10px;
  }
}

@media screen and (min-width: 1096px) {
  #view-programs .ex-card__summary {
    grid-template-columns:
      clamp(72px, 6vw, 88px)
      minmax(clamp(190px, 18vw, 264px), 1fr)
      auto
      auto
      clamp(42px, 4vw, 50px);
    column-gap: clamp(10px, 1vw, 20px);
    padding-inline: clamp(16px, 1.5vw, 20px);
  }

  #view-programs .ex-card__thumb {
    width: clamp(72px, 6vw, 88px);
    height: clamp(72px, 6vw, 88px);
  }

  #view-programs .ex-card__title-link,
  #view-programs .ex-card__title-link a {
    font-size: clamp(21px, 1.7vw, 24px);
  }

  #view-programs .ex-card__prescription {
    gap: clamp(14px, 1.4vw, 22px);
    padding-left: clamp(12px, 1.2vw, 22px);
  }

  #view-programs .ex-card__actions {
    gap: clamp(8px, 1vw, 11px);
    padding-left: clamp(12px, 1.2vw, 22px);
  }

  #view-programs .ex-card__rest-pill {
    min-width: clamp(156px, 14vw, 187px);
  }

  #view-programs .ex-card__chevron {
    width: clamp(42px, 4vw, 50px);
    height: clamp(42px, 4vw, 50px);
    min-width: clamp(42px, 4vw, 50px);
  }
}

@media screen and (min-width: 520px) and (max-width: 720px) {
  #view-programs .ex-card__summary {
    grid-template-columns: 77px minmax(0, 1fr) 50px;
    grid-template-rows: 20px auto auto auto;
    grid-template-areas:
      "thumb index toggle"
      "thumb identity toggle"
      "stats stats stats"
      "actions actions actions";
  }

  #view-programs .ex-card__prescription {
    width: 100%;
    padding-inline: 0;
  }

  #view-programs .ex-card__actions {
    width: 100%;
    margin-top: 0;
    padding: 7px 0 0;
    border: 0;
  }

  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* End V4.39 Intermediate program-card collision guard ------ */

/* V4.40 Selectable per-exercise rest duration --------------- */
@media screen {
  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    display: grid;
    grid-template-columns: 38px minmax(72px, 1fr) 22px;
    grid-template-rows: 20px 26px;
    min-width: 178px;
    min-height: 56px;
    column-gap: 6px;
    row-gap: 0;
    align-items: center;
    padding: 5px 7px 5px 5px;
    overflow: hidden;
    cursor: pointer;
  }

  #view-programs .ex-card__rest-start,
  #view-programs .ex-card__rest-arrow,
  #view-programs .rest-duration-option,
  #view-programs .ex-card__rest-pill .rest-timer-btn {
    appearance: none;
    margin: 0;
    border: 0;
    font: inherit;
  }

  #view-programs .ex-card__rest-start {
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  #view-programs .ex-card__rest-start--icon {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: var(--radius-full);
  }

  #view-programs .ex-card__rest-start--icon .rest-divider__icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--ink-on-accent);
    font-size: 16px;
    line-height: 1;
    transition: transform 150ms ease, filter 150ms ease;
  }

  #view-programs .ex-card__rest-start--icon .rest-divider__icon svg {
    display: block;
    width: 17px;
    height: 17px;
  }

  #view-programs .ex-card__rest-start--label {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    min-height: 20px;
    text-align: left;
  }

  #view-programs .ex-card__rest-label {
    display: block;
  }

  #view-programs .ex-card__rest-start--label:hover .ex-card__rest-label,
  #view-programs .ex-card__rest-start--label:focus-visible .ex-card__rest-label {
    color: var(--accent);
  }

  #view-programs .ex-card__rest-start--icon:hover .rest-divider__icon,
  #view-programs .ex-card__rest-start--icon:focus-visible .rest-divider__icon {
    filter: brightness(1.08);
    transform: scale(1.04);
  }

  #view-programs .ex-card__rest-start:focus-visible,
  #view-programs .ex-card__rest-arrow:focus-visible,
  #view-programs .rest-duration-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
    outline-offset: 1px;
  }

  #view-programs .rest-duration-options {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-self: start;
    gap: 2px;
    white-space: nowrap;
    cursor: default;
  }

  #view-programs .rest-duration-option {
    display: inline-grid;
    min-width: 28px;
    min-height: 24px;
    padding: 2px 5px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 720;
    line-height: 1;
    cursor: pointer;
    transition: color 130ms ease, border-color 130ms ease, background 130ms ease, transform 130ms ease;
  }

  #view-programs .rest-duration-option > span {
    margin-left: 2px;
    font-size: 0.8em;
  }

  #view-programs .rest-duration-option:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border-hard));
    color: var(--ink-primary);
  }

  #view-programs .rest-duration-option:active {
    transform: scale(0.95);
  }

  #view-programs .rest-duration-option.is-selected {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 20%, var(--color-surface-2));
    color: var(--accent);
  }

  #view-programs .rest-duration-separator,
  #view-programs .rest-duration-unit,
  #view-programs .rest-duration-static {
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 680;
    line-height: 1;
  }

  #view-programs .rest-duration-static {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    padding-left: 1px;
  }

  #view-programs .ex-card__rest-arrow {
    grid-column: 3;
    grid-row: 1 / 3;
    display: grid;
    width: 22px;
    height: 42px;
    padding: 0;
    place-items: center;
    background: transparent;
    color: var(--accent);
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }

  #view-programs .ex-card__rest-pill > .rest-divider__value {
    display: none;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  #view-programs .ex-card__rest-pill .rest-timer-controls {
    grid-column: 3;
    grid-row: 1 / 3;
    align-items: center;
    justify-self: end;
    gap: 3px;
    margin: 0;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: 38px minmax(44px, 1fr) auto;
    min-width: 204px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active .rest-duration-options,
  #view-programs .ex-card__rest-pill.rest-timer-paused .rest-duration-options,
  #view-programs .ex-card__rest-pill.rest-timer-active .rest-duration-static,
  #view-programs .ex-card__rest-pill.rest-timer-paused .rest-duration-static,
  #view-programs .ex-card__rest-pill.rest-timer-active .ex-card__rest-start--label,
  #view-programs .ex-card__rest-pill.rest-timer-paused .ex-card__rest-start--label,
  #view-programs .ex-card__rest-pill.rest-timer-active .ex-card__rest-arrow,
  #view-programs .ex-card__rest-pill.rest-timer-paused .ex-card__rest-arrow {
    display: none;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active > .rest-divider__value,
  #view-programs .ex-card__rest-pill.rest-timer-paused > .rest-divider__value {
    display: block;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
  }

  #view-programs .ex-card__rest-pill:hover,
  #view-programs .ex-card__rest-pill:focus-within {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--color-surface-2));
    transform: none;
  }
}

@media screen and (max-width: 720px) {
  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: 38px minmax(70px, 1fr) 20px;
    min-width: 0;
    min-height: 58px;
    flex: 1 1 auto;
    padding-inline: 5px 6px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-height: 58px;
  }

  #view-programs .ex-card__rest-label {
    font-size: 11px;
  }

  #view-programs .rest-duration-option {
    min-width: 30px;
    min-height: 26px;
    padding-inline: 5px;
    font-size: 10px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: 36px minmax(42px, 1fr) auto;
  }
}

@media screen and (max-width: 360px) {
  #view-programs .ex-card__rest-pill,
  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: 34px minmax(64px, 1fr) 18px;
    column-gap: 4px;
  }

  #view-programs .ex-card__rest-start--icon {
    width: 34px;
    height: 34px;
  }

  #view-programs .ex-card__rest-start--icon .rest-divider__icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  #view-programs .rest-duration-option {
    min-width: 32px;
    min-height: 28px;
    padding-inline: 4px;
  }

  #view-programs .rest-duration-separator,
  #view-programs .rest-duration-unit {
    font-size: 8px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: 32px minmax(38px, 1fr) auto;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  #view-programs .rest-duration-option,
  #view-programs .ex-card__rest-start--icon .rest-divider__icon {
    transition: none;
  }
}

/* End V4.40 Selectable per-exercise rest duration ----------- */
/* ============================================================
   PROGRAM INTAKE
   Short public test flow with local drafts and write-only submission
   ============================================================ */

#view-intake {
  min-height: calc(100vh - 60px);
  background:
    radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 31rem),
    var(--color-bg);
}

.intake-page {
  padding-top: clamp(20px, 3vw, 44px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.intake-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto 24px;
  padding: clamp(26px, 4vw, 48px);
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) 0%, var(--color-surface) 58%),
    var(--color-surface);
  box-shadow: var(--shadow-md);
}

.intake-hero::after {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  right: -88px;
  top: -130px;
  border: 42px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.intake-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary-active);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
}

.intake-hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.02em;
}

.intake-hero > div > p {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--color-text-muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
}

.intake-privacy {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 230px;
  padding: 13px 16px;
  position: relative;
  z-index: 1;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-bg) 76%, transparent);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.intake-privacy svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: var(--color-primary-active);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intake-privacy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text);
  font-size: 14px;
}

.intake-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.intake-progress {
  position: sticky;
  top: 84px;
  padding: 22px 18px 18px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.intake-progress__eyebrow {
  padding: 0 8px 14px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.intake-progress ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.intake-progress li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 9px;
  border-radius: 13px;
  color: var(--color-text-muted);
}

.intake-progress li > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 12px;
}

.intake-progress li strong {
  font-size: 14px;
  font-weight: 600;
}

.intake-progress li.is-active {
  background: var(--color-primary-highlight);
  color: var(--color-primary-active);
}

.intake-progress li.is-active > span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--ink-on-accent);
}

.intake-progress li.is-complete {
  color: var(--color-text);
}

.intake-progress li.is-complete > span {
  border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-border));
  color: var(--color-primary-active);
}

.intake-clear {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}

.intake-clear:hover {
  color: var(--color-primary-active);
}

.intake-form {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.intake-mobile-progress {
  display: none;
}

.intake-autosave {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px clamp(26px, 4vw, 48px) 0;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.intake-autosave i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: background 160ms ease, box-shadow 160ms ease;
}

.intake-autosave.is-saved i {
  background: #4fd69c;
  box-shadow: 0 0 0 4px color-mix(in srgb, #4fd69c 14%, transparent);
}

.intake-step {
  padding: clamp(26px, 4vw, 48px);
  animation: intake-step-in 220ms ease both;
}

.intake-step[hidden] {
  display: none;
}

@keyframes intake-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.intake-step__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--color-border);
}

.intake-step__header > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--color-primary-highlight);
  color: var(--color-primary-active);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
}

.intake-step__header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 650;
  line-height: 1.05;
}

.intake-step__header p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5;
}

.intake-field {
  min-width: 0;
  margin: 0;
  padding: 0 0 26px;
  border: 0;
}

.intake-field + .intake-field {
  padding-top: 2px;
}

.intake-field > label,
.intake-field > legend {
  display: block;
  width: 100%;
  margin-bottom: 11px;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
}

.intake-field em,
.intake-field label > span,
.intake-field legend > span {
  margin-left: 6px;
  color: var(--color-primary-active);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intake-field label > span,
.intake-field legend > span {
  color: var(--color-text-muted);
}

.intake-field__hint {
  margin: -4px 0 12px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.intake-field input[type='text'],
.intake-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  outline: 0;
  resize: vertical;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.intake-field input[type='text']:focus,
.intake-field textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.intake-field textarea::placeholder,
.intake-field input::placeholder {
  color: var(--color-text-muted);
  opacity: .72;
}

.intake-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.intake-choice-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intake-choice-grid--days {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.intake-choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg);
  cursor: pointer;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.intake-choice:hover {
  border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
}

.intake-choice:active {
  transform: scale(.992);
}

.intake-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.intake-choice:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  outline-offset: 2px;
}

.intake-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.intake-choice__control {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid var(--color-text-muted);
  border-radius: 50%;
  background: var(--color-surface);
}

.intake-choice input[type='checkbox'] + .intake-choice__control {
  border-radius: 6px;
}

.intake-choice input:checked + .intake-choice__control {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 4px var(--color-surface);
}

.intake-choice input[type='checkbox']:checked + .intake-choice__control {
  box-shadow: none;
}

.intake-choice input[type='checkbox']:checked + .intake-choice__control::after {
  content: '';
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--ink-on-accent);
  border-bottom: 2px solid var(--ink-on-accent);
  transform: translateY(-1px) rotate(-45deg);
}

.intake-choice__copy {
  min-width: 0;
}

.intake-choice__copy strong {
  display: block;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
}

.intake-choice__copy small {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.intake-safety-note {
  margin: -4px 0 26px;
  padding: 14px 16px;
  border-left: 3px solid #f0b429;
  border-radius: 10px;
  background: color-mix(in srgb, #f0b429 12%, var(--color-bg));
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
}

.intake-field.has-error > label,
.intake-field.has-error > legend {
  color: #ef5a67;
}

.intake-field.has-error input[type='text'],
.intake-field.has-error textarea,
.intake-field.has-error .intake-choice {
  border-color: #ef5a67;
}

.intake-errors {
  min-height: 22px;
  padding: 0 clamp(26px, 4vw, 48px);
  color: #ef5a67;
  font-size: 14px;
  font-weight: 650;
}

.intake-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px clamp(26px, 4vw, 48px) 24px;
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-bg));
}

.intake-back,
.intake-next,
.intake-export {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.intake-actions [hidden] {
  display: none;
}

.intake-next,
.intake-export--primary {
  min-width: 168px;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--ink-on-accent);
}

.intake-export:disabled {
  cursor: wait;
  opacity: .72;
  transform: none;
}

.intake-back:hover,
.intake-export:not(.intake-export--primary):hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.intake-next:hover,
.intake-export--primary:hover {
  background: var(--color-primary-active);
  transform: translateY(-1px);
}

.intake-next svg,
.intake-export svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intake-review {
  display: grid;
  gap: 12px;
}

.intake-review__section {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-bg);
}

.intake-review__section h3 {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary-active);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.intake-review__section dl {
  margin: 0;
}

.intake-review__section dl > div {
  display: grid;
  grid-template-columns: minmax(110px, .34fr) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 16px;
}

.intake-review__section dl > div + div {
  border-top: 1px solid var(--color-border);
}

.intake-review__section dt {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 650;
}

.intake-review__section dd {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.intake-export-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.intake-submit-note {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.intake-export-status {
  min-height: 22px;
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.intake-export-status.is-error {
  color: #ef6b77;
  font-weight: 650;
}

.intake-success {
  display: grid;
  justify-items: center;
  max-width: 720px;
  margin: clamp(48px, 8vw, 112px) auto;
  padding: clamp(36px, 7vw, 76px);
  border: 1px solid color-mix(in srgb, #4fd69c 52%, var(--color-border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, #4fd69c 12%, transparent), transparent 19rem),
    var(--color-surface);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.intake-success__icon {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 22px;
  background: color-mix(in srgb, #4fd69c 18%, var(--color-surface));
  color: #4fd69c;
}

.intake-success__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intake-success h1 {
  max-width: 600px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 62px);
  font-weight: 650;
  line-height: 1;
}

.intake-success > p {
  max-width: 570px;
  margin: 20px 0 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.6;
}

.intake-success__reference {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
}

.intake-success__reference span {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.intake-success__reference strong {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 14px;
}

.intake-success__new {
  min-height: 48px;
  margin-top: 30px;
  padding: 0 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
}

.intake-success__new:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

@media (max-width: 860px) {
  .intake-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .intake-privacy {
    width: fit-content;
  }
  .intake-shell {
    grid-template-columns: 1fr;
  }
  .intake-progress {
    display: none;
  }
  .intake-mobile-progress {
    display: grid;
    gap: 9px;
    padding: 18px 26px 0;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .intake-mobile-progress__track {
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-border);
  }
  .intake-mobile-progress__track i {
    display: block;
    height: 100%;
    width: 20%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width 180ms ease;
  }
  .intake-autosave {
    padding: 12px 26px 0;
  }
}

@media (max-width: 640px) {
  #view-intake {
    background: var(--color-bg);
  }
  .intake-page {
    --container-pad: 0px;
    padding-top: 0;
    padding-bottom: 48px;
  }
  .intake-hero {
    margin: 0;
    padding: 30px 20px 24px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }
  .intake-hero h1 {
    max-width: 330px;
    font-size: clamp(38px, 11vw, 52px);
  }
  .intake-hero > div > p {
    font-size: 17px;
  }
  .intake-privacy {
    min-width: 0;
    width: 100%;
  }
  .intake-shell {
    gap: 0;
  }
  .intake-form {
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .intake-mobile-progress {
    padding: 18px 20px 0;
  }
  .intake-autosave {
    padding: 12px 20px 0;
  }
  .intake-step {
    padding: 26px 20px 20px;
  }
  .intake-step__header {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 22px;
    margin-bottom: 24px;
  }
  .intake-step__header > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .intake-step__header h2 {
    font-size: 31px;
  }
  .intake-step__header p {
    font-size: 15px;
  }
  .intake-field {
    padding-bottom: 24px;
  }
  .intake-field > label,
  .intake-field > legend {
    font-size: 17px;
  }
  .intake-choice-grid,
  .intake-choice-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .intake-choice-grid--days {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .intake-choice {
    min-height: 62px;
    padding: 11px 12px;
    gap: 10px;
  }
  .intake-choice__copy strong {
    font-size: 15px;
  }
  .intake-errors {
    padding-inline: 20px;
  }
  .intake-actions {
    padding: 16px 20px max(20px, env(safe-area-inset-bottom));
  }
  .intake-next {
    flex: 1;
  }
  .intake-back {
    min-width: 96px;
  }
  .intake-review__section dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .intake-export-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .intake-export {
    width: 100%;
  }
  .intake-success {
    min-height: calc(100vh - 128px);
    align-content: center;
    margin: 0;
    padding: 40px 22px max(48px, env(safe-area-inset-bottom));
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .intake-success > p {
    font-size: 16px;
  }
}

@media (max-width: 380px) {
  .intake-choice-grid,
  .intake-choice-grid--compact {
    grid-template-columns: 1fr;
  }
  .intake-choice-grid--days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .intake-choice {
    min-height: 58px;
  }
}

/* Science V4.27: readiness model and evidence sources */
#view-science .science-card__takeaway {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 16px;
  align-items: start;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 7%, var(--color-surface-2));
}

#view-science .science-card__takeaway strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

#view-science .science-card__takeaway span {
  color: var(--ink-primary);
  font-size: 15px;
  line-height: 1.55;
}

#view-science .readiness-model {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
}

#view-science .readiness-chart {
  position: relative;
  width: 100%;
  height: clamp(278px, 28vw, 330px);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink-primary) 2%, transparent), transparent 60%),
    var(--color-surface-2);
}

#view-science .readiness-chart__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#view-science .readiness-chart__grid {
  stroke: var(--border-hard);
  stroke-width: 1.2;
  stroke-dasharray: 8 8;
  vector-effect: non-scaling-stroke;
}

#view-science .readiness-chart__capacity-fill {
  fill: url(#readiness-capacity-fill);
}

#view-science .readiness-chart__capacity-line,
#view-science .readiness-chart__readiness-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#view-science .readiness-chart__capacity-line {
  stroke: var(--signal-ok);
  stroke-width: 3;
}

#view-science .readiness-chart__readiness-line {
  stroke: var(--accent);
  stroke-width: 4;
}

#view-science .readiness-chart__session-guide {
  stroke: color-mix(in srgb, var(--accent) 68%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
}

#view-science .readiness-chart__session-dot {
  fill: var(--accent);
  stroke: var(--color-surface-2);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

#view-science .readiness-chart__rail {
  position: absolute;
  z-index: 2;
  inset: 14px 0 auto;
  height: 34px;
  pointer-events: none;
}

#view-science .readiness-chart__rail span {
  position: absolute;
  left: var(--session-x);
  min-width: 80px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
  transform: translateX(-50%);
}

#view-science .readiness-chart__axis {
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 10px;
  left: 6%;
  display: flex;
  justify-content: space-between;
  color: var(--ink-secondary);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

#view-science .readiness-chart__legend {
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 6%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 7px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  pointer-events: none;
}

#view-science .readiness-chart__legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

#view-science .readiness-chart__legend i {
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

#view-science .readiness-chart__legend i.is-capacity {
  background: var(--signal-ok);
}

#view-science .readiness-chart__caption {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.5;
}

#view-science .readiness-signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}

#view-science .readiness-signal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface-2);
}

#view-science .readiness-signal > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface));
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 780;
}

#view-science .readiness-signal strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-primary);
  font-size: 13px;
  line-height: 1.25;
}

#view-science .readiness-signal p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.45;
}

#view-science .science-card__myth-check {
  display: grid;
  grid-template-columns: minmax(150px, 0.27fr) minmax(0, 1fr);
  gap: 18px;
  margin: 0 0 18px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--signal-ok) 30%, var(--border-soft));
  border-radius: 13px;
  background: color-mix(in srgb, var(--signal-ok) 6%, var(--color-surface-2));
}

#view-science .science-card__myth-check > span {
  color: var(--signal-ok);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.4;
}

#view-science .science-card__myth-check p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.55;
}

#view-science .readiness-table-wrap {
  margin-top: 0;
}

#view-science .volume-landmark-list {
  display: grid;
  gap: 8px;
}

#view-science .volume-landmark {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface);
}

#view-science .volume-landmark > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface-2));
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 780;
}

#view-science .volume-landmark > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  min-width: 0;
}

#view-science .volume-landmark strong {
  color: var(--ink-primary);
  font-size: 13px;
  line-height: 1.35;
}

#view-science .volume-landmark b {
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

#view-science .volume-landmark p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.45;
}

#view-science .science-sources {
  display: grid;
  grid-template-columns: minmax(190px, 0.33fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}

#view-science .science-sources__intro h4 {
  margin: 0 0 6px;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
}

#view-science .science-sources__intro p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.5;
}

#view-science .science-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#view-science .science-source-link {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 36px 12px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface-2);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

#view-science .science-source-link span {
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 730;
  line-height: 1.3;
}

#view-science .science-source-link small {
  color: var(--ink-secondary);
  font-size: 10px;
  line-height: 1.4;
}

#view-science .science-source-link b {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--accent);
  font-size: 14px;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  #view-science .science-source-link:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
    background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-2));
    transform: translateY(-1px);
  }
}

@media screen and (max-width: 900px) {
  #view-science .readiness-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-science .science-sources {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  #view-science .science-card__takeaway,
  #view-science .science-card__myth-check {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #view-science .readiness-chart {
    height: 278px;
    border-radius: 13px;
  }

  #view-science .readiness-chart__svg {
    height: calc(100% - 46px);
  }

  #view-science .readiness-chart__rail {
    top: 11px;
  }

  #view-science .readiness-chart__rail span {
    min-width: 58px;
    padding: 5px 6px;
    font-size: 9px;
  }

  #view-science .readiness-chart__legend {
    right: 6%;
    bottom: 28px;
    justify-content: center;
    gap: 6px 12px;
  }

  #view-science .readiness-signal-grid,
  #view-science .science-source-grid {
    grid-template-columns: 1fr;
  }

  #view-science .science-card__takeaway span {
    font-size: 14px;
  }

  #view-science .science-card__myth-check p {
    font-size: 12px;
  }

  #view-science .volume-landmark > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  #view-science .volume-landmark b {
    text-align: left;
  }

  #view-science .volume-landmark p {
    grid-column: 1;
  }
}

@media screen and (max-width: 360px) {
  #view-science .readiness-chart__axis {
    font-size: 9px;
  }

  #view-science .readiness-chart__legend {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-science .science-source-link {
    transition: none;
  }
}

/* Science V4.28: exercise mechanics and evidence boundaries */
#view-science .mechanics-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 12px;
}

#view-science .mechanics-concept {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface-2);
}

#view-science .mechanics-concept > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface));
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

#view-science .mechanics-concept > div {
  min-width: 0;
}

#view-science .mechanics-concept small,
#view-science .mechanics-decision > span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

#view-science .mechanics-concept strong,
#view-science .mechanics-decision strong {
  display: block;
  color: var(--ink-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

#view-science .mechanics-concept p,
#view-science .mechanics-decision p {
  margin: 6px 0 0;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.52;
}

#view-science .mechanics-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

#view-science .mechanics-decision {
  min-width: 0;
  padding: 16px 17px;
  border: 1px solid color-mix(in srgb, var(--signal-ok) 30%, var(--border-soft));
  border-radius: 14px;
  background: color-mix(in srgb, var(--signal-ok) 6%, var(--color-surface-2));
}

#view-science .mechanics-decision.is-specific {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
}

#view-science .mechanics-decision > span {
  color: var(--signal-ok);
}

#view-science .mechanics-decision.is-specific > span {
  color: var(--accent);
}

#view-science .mechanics-evidence-note {
  margin-top: 0;
}

@media screen and (max-width: 900px) {
  #view-science .mechanics-concept-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  #view-science .mechanics-concept-grid {
    gap: 8px;
    margin-top: 16px;
  }

  #view-science .mechanics-concept {
    padding: 14px;
  }

  #view-science .mechanics-decision-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #view-science .mechanics-decision {
    padding: 14px;
  }

  #view-science .mechanics-concept strong,
  #view-science .mechanics-decision strong {
    font-size: 14px;
  }

  #view-science .mechanics-concept p,
  #view-science .mechanics-decision p {
    font-size: 12px;
  }
}

/* V4.41 Session cadence timer ----------------------------------- */
@media screen {
  #view-programs .day-detail-header > .session-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  #view-programs .session-timer-launch {
    display: inline-flex;
    min-width: 132px;
    min-height: 52px;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--border-hard);
    border-radius: 12px;
    background: transparent;
    color: var(--ink-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
  }

  #view-programs .session-timer-launch__icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 14%, var(--color-surface-2));
    color: var(--accent);
    font-size: 17px;
  }

  #view-programs .session-timer-launch > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }

  #view-programs .session-timer-launch strong {
    font-size: 13px;
    font-weight: 780;
    line-height: 1.15;
  }

  #view-programs .session-timer-launch small {
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 620;
    line-height: 1.15;
    white-space: nowrap;
  }

  #view-programs .session-timer-launch:hover,
  #view-programs .session-timer-launch:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
  }

  #view-programs .session-timer-launch:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
    outline-offset: 2px;
  }

  .session-timer-overlay[hidden],
  .session-timer-dock[hidden],
  .session-timer-setup[hidden],
  .session-timer-runner[hidden] {
    display: none !important;
  }

  body.session-timer-open { overflow: hidden; }

  .session-timer-overlay {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: grid;
    padding: 20px;
    place-items: center;
  }

  .session-timer-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(4 5 8 / 76%);
    backdrop-filter: blur(8px);
    opacity: var(--session-timer-backdrop-opacity, 1);
    transition: opacity 190ms ease;
  }

  .session-timer-panel {
    position: relative;
    display: flex;
    width: min(100%, 520px);
    max-height: min(92dvh, 760px);
    flex-direction: column;
    overflow: auto;
    border: 1px solid var(--border-hard);
    border-radius: 22px;
    background: var(--color-surface);
    color: var(--ink-primary);
    box-shadow: 0 28px 90px rgb(0 0 0 / 48%);
    transform: translateY(var(--session-timer-drag-y, 0));
    transition: transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
  }

  .session-timer-panel.is-dragging { transition: none; }
  .session-timer-panel.is-minimizing { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }

  .session-timer-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--border-soft);
    touch-action: pan-x;
  }

  .session-timer-drag-handle { display: none; }

  .session-timer-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 820;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .session-timer-header h2 {
    margin: 0;
    color: var(--ink-primary);
    font-size: 24px;
    line-height: 1.1;
  }

  .session-timer-close {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--ink-secondary);
    font: inherit;
    font-size: 25px;
    cursor: pointer;
  }

  .session-timer-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .session-timer-setup,
  .session-timer-runner { padding: 18px 22px 22px; }

  .session-timer-intro,
  .session-timer-background-note {
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .session-timer-fieldset {
    margin: 18px 0 0;
    padding: 0;
    border: 0;
  }

  .session-timer-fieldset legend,
  .session-timer-limit-panel strong,
  .session-timer-option strong {
    color: var(--ink-primary);
    font-size: 13px;
    font-weight: 760;
  }

  .session-timer-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
  }

  .session-timer-preset {
    min-height: 44px;
    padding: 0 6px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--color-surface-2);
    color: var(--ink-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
  }

  .session-timer-preset[aria-pressed='true'] {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 14%, var(--color-surface-2));
    color: var(--accent);
  }

  .session-timer-duration {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
    align-items: end;
    gap: 8px;
    margin-top: 12px;
  }

  .session-timer-duration-field { display: grid; min-width: 0; gap: 5px; }

  .session-timer-duration-field > label,
  .session-timer-total-time-field > label {
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .session-timer-stepper {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    grid-template-columns: 44px minmax(38px, 1fr) 44px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--border-hard);
    border-radius: 11px;
    background: var(--color-surface-2);
    -webkit-user-select: none;
    user-select: none;
  }

  .session-timer-stepper button {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink-secondary);
    font: inherit;
    font-size: 21px;
    font-weight: 650;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .session-timer-stepper button:first-child { border-right: 1px solid var(--border-soft); }
  .session-timer-stepper button:last-child { border-left: 1px solid var(--border-soft); }
  .session-timer-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

  .session-timer-stepper input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink-primary);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 760;
    text-align: center;
    -webkit-user-select: text;
    user-select: text;
  }

  .session-timer-stepper > button.is-stepper-pressing {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--accent);
  }

  .session-timer-stepper > button.is-hold-repeating {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
  }

  .session-timer-stepper input:focus {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: var(--accent);
  }

  .session-timer-stepper input::-webkit-inner-spin-button,
  .session-timer-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
  .session-timer-stepper input[type='number'] { appearance: textfield; }

  .session-timer-duration-separator {
    padding-bottom: 12px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 20px;
    text-align: center;
  }

  .session-timer-limit-fieldset { margin-top: 18px; }

  .session-timer-limit-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 9px;
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  .session-timer-limit-tabs button {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
  }

  .session-timer-limit-tabs button[aria-pressed='true'] {
    background: color-mix(in srgb, var(--accent) 16%, var(--color-surface));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
  }

  .session-timer-limit-panel,
  .session-timer-option {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  .session-timer-limit-panel[hidden] { display: none; }

  .session-timer-limit-panel > span:first-child,
  .session-timer-option > span {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .session-timer-limit-panel small,
  .session-timer-option small {
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 1.35;
  }

  .session-timer-stepper--compact {
    width: 146px;
    min-height: 44px;
    flex: 0 0 146px;
    grid-template-columns: 38px minmax(42px, 1fr) 38px;
  }

  .session-timer-stepper--compact input { font-size: 16px; }

  .session-timer-limit-panel--time {
    display: flex;
    align-items: center;
  }

  .session-timer-limit-copy { flex: 1 1 auto; }

  .session-timer-total-time {
    display: grid;
    width: min(300px, 100%);
    flex: 0 1 300px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .session-timer-total-time-field { display: grid; min-width: 0; gap: 5px; }
  .session-timer-total-time .session-timer-stepper { width: 100%; }

  .session-timer-limit-panel--unlimited { justify-content: flex-start; }
  .session-timer-limit-panel--unlimited > span:last-child {
    display: grid;
    min-width: 0;
    gap: 3px;
  }
  .session-timer-limit-panel--unlimited > span:first-child {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 24px;
  }

  .session-timer-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 14px;
  }

  .session-timer-option { margin-top: 0; }
  .session-timer-option > input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--accent); }

  .session-timer-sound-option { align-items: stretch; flex-direction: column; gap: 9px; }

  .session-timer-sound-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 8px;
  }

  .session-timer-sound-picker {
    position: relative;
    min-width: 0;
  }

  .session-timer-sound-trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 11px 0 13px;
    border: 1px solid var(--border-hard);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--ink-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 760;
    text-align: left;
    cursor: pointer;
  }

  .session-timer-sound-trigger svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
  }

  .session-timer-sound-trigger[aria-expanded='true'] {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--border-hard));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .session-timer-sound-trigger[aria-expanded='true'] svg { transform: rotate(180deg); }

  .session-timer-sound-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 7px);
    z-index: 6;
    display: grid;
    /* Matches .timer-block-name-menu so the two dropdowns in the Blocks section
       line up: at least as wide as its own trigger, never narrower than 270px,
       and always inside the viewport. */
    width: min(max(100%, 270px), calc(100vw - 48px));
    max-height: min(330px, 62vh);
    gap: 3px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-hard);
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    box-shadow: 0 18px 42px rgb(0 0 0 / 34%);
    backdrop-filter: blur(16px);
  }

  .session-timer-sound-menu[hidden] { display: none; }

  /* Workspace pickers sit at the right of their option row, so a left-anchored
     menu runs off the screen once it is wider than its trigger. Anchoring to the
     trigger's right edge keeps it on screen and still lines it up with the
     block-name menu, whose trigger is full width. */
  .timer-workspace-sound-menu {
    right: 0;
    left: auto;
  }

  /* Each row is the option plus its own preview control, so a sound can be
     auditioned without selecting it and closing the menu first. Mirrors
     .timer-block-name-option-row. */
  .session-timer-sound-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 3px;
  }

  /* Two classes so these win over `.session-timer-sound-menu button` without
     editing that shared rule, which the preset menu also relies on. */
  .session-timer-sound-menu .session-timer-sound-preview {
    display: grid;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-content: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
  }

  .session-timer-sound-menu .session-timer-sound-preview svg { width: 15px; height: 15px; fill: currentcolor; }
  .session-timer-sound-menu .session-timer-sound-preview:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
  .session-timer-sound-menu .session-timer-sound-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .session-timer-sound-menu .session-timer-sound-preview.is-playing { color: var(--accent); }

  .session-timer-sound-menu button {
    position: relative;
    display: grid;
    min-height: 48px;
    gap: 2px;
    padding: 7px 34px 7px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .session-timer-sound-menu button > span { font-size: 12px; font-weight: 760; }
  .session-timer-sound-menu button > small { color: var(--ink-muted); font-size: 10px; line-height: 1.25; }

  .session-timer-sound-menu button[aria-selected='true'] {
    background: color-mix(in srgb, var(--accent) 14%, var(--color-surface-2));
    color: var(--accent);
  }

  .session-timer-sound-menu button[aria-selected='true']::after {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--accent);
    content: '';
    transform: translateY(-50%);
  }

  .session-timer-setup-actions {
    margin-top: 18px;
  }

  .session-timer-test,
  .session-timer-start,
  .session-timer-run-actions button,
  .session-timer-primary-actions button,
  .session-timer-stop {
    min-height: 48px;
    border: 1px solid var(--border-hard);
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
  }

  .session-timer-test { min-height: 44px; }
  .session-timer-test:disabled { opacity: 0.42; cursor: not-allowed; }

  .session-timer-test,
  .session-timer-run-actions button,
  .session-timer-primary-actions button,
  .session-timer-stop { background: var(--color-surface-2); color: var(--ink-primary); }

  .session-timer-start {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--ink-on-accent);
  }

  .session-timer-background-note { margin-top: 12px; font-size: 11px; }

  .session-timer-runner {
    display: grid;
    justify-items: center;
    gap: 18px;
  }

  .session-timer-progress {
    display: grid;
    width: min(66vw, 300px);
    aspect-ratio: 1;
    padding: 10px;
    place-items: center;
    border-radius: var(--radius-full);
    background: conic-gradient(var(--accent) var(--timer-progress), var(--border-soft) 0);
    contain: paint;
  }

  .session-timer-progress-inner {
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
    border-radius: inherit;
    background: var(--color-surface);
    text-align: center;
  }

  .session-timer-progress-inner span,
  .session-timer-progress-inner small {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .session-timer-program-exercise {
    max-width: 220px;
    padding: 3px 5px;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 760;
    line-height: 1.35;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .session-timer-program-exercise:hover,
  .session-timer-program-exercise:focus-visible { color: var(--accent); }

  .session-timer-progress-inner strong {
    margin: 6px 0 4px;
    color: var(--ink-primary);
    font-family: var(--font-mono);
    font-size: clamp(52px, 16vw, 76px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.055em;
    line-height: 1;
  }

  .session-timer-run-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .session-timer-run-actions[hidden] { display: none; }
  .session-timer-run-actions > button[hidden] { display: none !important; }

  .session-timer-run-actions.is-single-action {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-timer-run-actions.is-single-action > button:not([hidden]) {
    width: min(100%, 240px);
    justify-self: center;
  }

  .session-timer-run-actions button,
  .session-timer-primary-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .session-timer-run-actions button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }

  .session-timer-action-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  #session-timer-previous .session-timer-action-icon path,
  #session-timer-skip .session-timer-action-icon path,
  .session-timer-resume-icon path,
  .session-timer-stop-icon rect {
    fill: currentColor;
    stroke: none;
  }

  .session-timer-primary-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .session-timer-resume-icon { display: none; }
  #session-timer-pause.is-resume .session-timer-pause-icon { display: none; }
  #session-timer-pause.is-resume .session-timer-resume-icon { display: block; }

  @media screen and (max-width: 479px) {
    .session-timer-direction-detail { display: none; }
  }

  .session-timer-stop {
    width: 100%;
    background: transparent;
    border-color: color-mix(in srgb, var(--signal-danger) 42%, var(--border-soft));
    color: var(--signal-danger);
  }

  .session-timer-dock {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 310;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    min-width: 210px;
    min-height: 58px;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border-hard));
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    color: var(--ink-primary);
    box-shadow: 0 14px 40px rgb(0 0 0 / 34%);
    backdrop-filter: blur(14px);
    font: inherit;
  }

  .session-timer-dock-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--ink-on-accent);
    cursor: pointer;
  }

  .session-timer-dock-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  .session-timer-dock-resume-icon { display: none; }
  .session-timer-dock-toggle.is-resume .session-timer-dock-pause-icon { display: none; }
  .session-timer-dock-toggle.is-resume .session-timer-dock-resume-icon { display: block; }

  .session-timer-dock-open {
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 5px 0 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .session-timer-dock-copy { display: grid; justify-items: start; }
  .session-timer-dock-copy small { color: var(--ink-muted); font-size: 9px; font-weight: 760; letter-spacing: 0.075em; text-transform: uppercase; }
  .session-timer-dock-copy strong { font-family: var(--font-mono); font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.05; }

  .session-timer-dock-cue {
    padding-left: 10px;
    border-left: 1px solid var(--border-soft);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 720;
    white-space: nowrap;
  }

  body.session-log-open .session-timer-dock { opacity: 0; pointer-events: none; }
}

@media screen and (max-width: 768px) {
  #view-programs .day-detail-header > .session-header-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-programs .day-detail-header > .session-header-actions .session-start-btn,
  #view-programs .session-timer-launch {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    gap: 8px;
    padding-inline: 8px;
  }
}

@media screen and (max-width: 640px) {
  #view-programs .session-start-btn__icon,
  #view-programs .session-timer-launch__icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  #view-programs .day-detail-header > .session-header-actions .session-start-btn,
  #view-programs .session-timer-launch {
    gap: 5px;
    padding-inline: 6px;
  }

  .session-timer-overlay { align-items: end; padding: 0; }

  .session-timer-panel {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .session-timer-header { padding: 16px 18px 12px; }
  .session-timer-header { padding-top: 24px; }
  .session-timer-drag-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    display: block;
    width: 38px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-hard);
    transform: translateX(-50%);
  }
  .session-timer-setup,
  .session-timer-runner { padding: 16px 18px 18px; }
  .session-timer-options { grid-template-columns: minmax(0, 1fr); }
  .session-timer-dock { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media screen and (max-width: 399px) {
  body.session-timer-running:not(.session-timer-open) #view-timer.view.active .timer-mobile-start-dock .timer-start-button {
    width: calc(35% - 5px);
  }

  body.session-timer-running:not(.session-timer-open) .session-timer-dock {
    left: calc(35% + 7px);
  }

  body.session-timer-running:not(.session-timer-open) .session-timer-dock-cue { display: none; }
  .timer-duration-triple { grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr) 6px minmax(0, 1fr); }
  .timer-duration-triple .session-timer-stepper input { padding-inline: 4px; }
}

@media screen and (max-width: 480px) {
  .session-timer-limit-panel--time { align-items: stretch; flex-direction: column; }
  .session-timer-total-time { width: 100%; flex-basis: auto; }
}

@media screen and (max-width: 359px) {
  .session-timer-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .session-timer-limit-panel:not(.session-timer-limit-panel--unlimited) { align-items: stretch; flex-direction: column; }
  .session-timer-stepper--compact { width: 100%; flex-basis: auto; }
}

@media screen and (min-width: 600px) and (max-width: 768px) {
  #view-programs .day-anchor-btn {
    width: 0;
    min-width: 0;
    flex: 1 1 0;
    gap: 5px;
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .session-timer-stepper > button.is-pointer-hovered {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
  }

  .session-timer-sound-menu button:hover {
    background: color-mix(in srgb, var(--accent) 9%, var(--color-surface-2));
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-programs .session-timer-launch,
  .session-timer-overlay,
  .session-timer-panel,
  .session-timer-dock {
    animation: none !important;
    transition: none !important;
  }
}

/* End V4.41 Session cadence timer ----------------------------- */

/* Timer workspace contrast and sound-picker alignment. */
.timer-workspace .timer-mode-tabs {
  border-color: var(--border-hard);
  background: color-mix(in srgb, var(--color-surface-2) 82%, var(--ink-primary) 3%);
}

.timer-workspace .timer-mode-tabs > button {
  background: color-mix(in srgb, var(--color-surface-1) 72%, transparent);
  color: var(--ink-secondary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-secondary) 18%, transparent);
}

.timer-workspace .timer-mode-tabs > button[aria-selected='true'] {
  background: color-mix(in srgb, var(--accent) 14%, var(--color-surface-1));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 52%, transparent), 0 2px 8px rgb(0 0 0 / 16%);
}

.timer-workspace-sound-host,
.timer-workspace-sound-picker {
  width: 100%;
  min-width: 0;
}

.timer-workspace-sound-picker .session-timer-sound-trigger {
  background: var(--color-surface);
}

.timer-workspace-sound-picker .timer-workspace-sound-menu {
  z-index: 40;
}

.timer-block-sound > span {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timer-inline-control [data-timer-sound-test]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Canonical Timer quantity group: paired labels with the shared SOMA stepper. */
.timer-stop-time .session-timer-stepper {
  width: 100%;
  flex-basis: auto;
}

@media screen and (max-width: 600px) {
  .timer-limit-config.timer-limit-config--time {
    align-items: stretch;
    flex-direction: column;
  }
}

@media screen and (max-width: 359px) {
  .timer-stop-time { grid-template-columns: minmax(0, 1fr); }
}

/* Timer presets use the same custom-picker language as Timer sounds. */
.timer-preset-bar[open] {
  position: relative;
  z-index: 50;
  overflow: visible;
}

.timer-preset-controls {
  width: 100%;
  grid-template-columns: minmax(180px, 1.15fr) minmax(170px, 0.9fr) auto;
  align-items: end;
  gap: 10px;
}

.timer-preset-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.timer-preset-field > span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.timer-preset-picker {
  position: relative;
  min-width: 0;
}

.timer-preset-trigger {
  min-height: 46px;
  border-color: var(--border-hard);
  background: var(--color-surface);
  color: var(--ink-primary);
  font-size: 14px;
}

.timer-preset-trigger:disabled {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--color-surface-2) 86%, transparent);
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.78;
}

.timer-preset-menu {
  top: calc(100% + 7px);
  bottom: auto;
  z-index: 60;
  width: max(100%, 260px);
  max-width: min(360px, calc(100vw - 48px));
}

.timer-preset-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 8px;
}

.timer-preset-actions .timer-secondary-button {
  min-height: 46px;
  padding: 0 14px;
  border-color: var(--border-hard);
  background: var(--color-surface);
  font-size: 12px;
}

.timer-preset-actions .timer-preset-save {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.timer-preset-actions .timer-preset-delete {
  border-color: color-mix(in srgb, var(--color-error) 52%, var(--border-hard));
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
}

.timer-preset-actions button:disabled {
  border-color: var(--border-soft);
  background: var(--color-surface-2);
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.48;
}

.timer-preset-trigger:focus-visible,
.timer-preset-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.timer-preset-menu button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

@media screen and (max-width: 720px) {
  .timer-preset-controls { grid-template-columns: minmax(0, 1fr); }
  .timer-preset-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timer-preset-menu { width: 100%; max-width: 100%; }
}

@media screen and (max-width: 480px) {
  .timer-block-sound .timer-workspace-sound-menu {
    right: 0;
    left: auto;
  }
}

/* Shared inline Timer quantity wheel. It expands from the selected stepper in place. */
.timer-quantity-wheel-inline[hidden] { display: none !important; }

.session-timer-stepper { position: relative; }

.session-timer-stepper.is-wheel-open {
  z-index: 72;
  overflow: visible;
}

.timer-block-card:has(.session-timer-stepper.is-wheel-open) {
  z-index: 46;
  overflow: visible;
}

.timer-block-card:has(.session-timer-stepper.is-wheel-open) .timer-block-delete-handle {
  pointer-events: none;
}

.timer-quantity-wheel-inline {
  position: absolute;
  z-index: 74;
  top: 50%;
  left: 50%;
  width: max(100%, 168px);
  max-width: calc(100vw - 24px);
  height: 168px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border-hard));
  border-radius: 14px;
  background: var(--color-surface-2);
  box-shadow: 0 18px 42px rgb(0 0 0 / 34%);
  clip-path: inset(36% 0 36% 0 round 11px);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + var(--timer-wheel-shift-x, 0px)), -50%);
  transform-origin: center;
  transition: clip-path 180ms cubic-bezier(0.2, 0.75, 0.25, 1), opacity 130ms ease;
}

.timer-quantity-wheel-inline.is-open {
  clip-path: inset(0 round 14px);
  opacity: 1;
  pointer-events: auto;
}

.timer-quantity-wheel-inline::before,
.timer-quantity-wheel-inline::after {
  content: '';
  position: absolute;
  z-index: 3;
  right: 0;
  left: 0;
  height: 50px;
  pointer-events: none;
}

.timer-quantity-wheel-inline::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-surface-2) 8%, color-mix(in srgb, var(--color-surface-2) 76%, transparent), transparent);
}

.timer-quantity-wheel-inline::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-surface-2) 8%, color-mix(in srgb, var(--color-surface-2) 76%, transparent), transparent);
}

.timer-quantity-wheel-selection {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border-hard));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface));
  pointer-events: none;
  transform: translateY(-50%);
}

.timer-quantity-wheel-adjust {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--color-surface-1);
  color: var(--ink-secondary);
  font-size: 22px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease, transform 100ms ease;
}

.timer-quantity-wheel-inline.is-confirm-mode .timer-quantity-wheel-adjust { display: grid; }
.timer-quantity-wheel-adjust--decrease { left: 6px; }
.timer-quantity-wheel-adjust--increase { right: 6px; }

.timer-quantity-wheel-adjust:active {
  transform: translateY(-50%) scale(0.96);
}

.timer-quantity-wheel-list {
  position: relative;
  z-index: 2;
  height: 168px;
  padding-block: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.timer-quantity-wheel-list::-webkit-scrollbar { display: none; }

.timer-quantity-wheel-list.is-direct-manipulation {
  scroll-behavior: auto !important;
  scroll-snap-type: none;
}

.timer-quantity-wheel-list > button {
  display: grid;
  width: 100%;
  min-height: 56px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  scroll-snap-align: center;
  cursor: ns-resize;
  transition: color 120ms ease, font-size 120ms ease, opacity 120ms ease;
}

.timer-quantity-wheel-list > button.is-selected {
  color: var(--accent);
  font-size: 24px;
  font-weight: 820;
}

.timer-quantity-wheel-inline.is-confirm-mode .timer-quantity-wheel-list > button {
  padding-inline: 54px;
}

.timer-quantity-wheel-list:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

#view-timer .session-timer-stepper input[data-timer-wheel='true'],
#session-timer-overlay .session-timer-stepper input[data-timer-wheel='true'] {
  cursor: ns-resize;
  caret-color: transparent;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .timer-quantity-wheel-inline { transition: none; }
  .timer-quantity-wheel-list { scroll-behavior: auto !important; }
  .timer-quantity-wheel-list > button { transition: none; }
}

@media (hover: hover) and (pointer: fine) {
  .timer-quantity-wheel-adjust:hover {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-1));
    color: var(--accent);
  }

  .timer-workspace .timer-mode-tabs > button:hover {
    background: color-mix(in srgb, var(--accent) 9%, var(--color-surface-1));
    color: var(--ink-primary);
  }

  .timer-workspace .timer-mode-tabs > button[aria-selected='true']:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--color-surface-1));
    color: var(--accent);
  }

  .timer-preset-trigger:not(:disabled):hover,
  .timer-preset-actions .timer-preset-load:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 9%, var(--color-surface));
  }

  .timer-preset-actions .timer-preset-save:hover {
    border-color: var(--accent-hot);
    background: var(--accent-hot);
  }

  .timer-preset-actions .timer-preset-delete:not(:disabled):hover {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 16%, var(--color-surface));
  }
}