/* ============================================================
   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.75rem, 0.72rem + 0.15vw, 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;
  --anatomy-body:          #DEDAD0;
  --anatomy-muscle:        #AAA59A;
  --anatomy-outline:       #777168;


  /* 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>");
}

/* 2026-08-10: daily execution, capability progress, and account ownership. */
.briefing-auto-rest {
  margin-top: calc(-1 * var(--space-3));
}

.dash-readiness {
  display: grid;
  gap: 9px;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.dash-readiness__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dash-readiness__heading > span {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-readiness__heading > strong { font-size: var(--text-sm); }
.dash-readiness__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.dash-readiness__choices button {
  min-height: 44px;
  padding: 7px 8px;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 750;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.dash-readiness__choices button:hover,
.dash-readiness__choices button:focus-visible {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.dash-readiness__choices button.is-selected {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.dash-readiness > p {
  min-height: 1.4em;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.capability-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}
.capability-progress-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.capability-progress-card__label {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.capability-progress-card > strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
}
.capability-progress-card > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.capability-progress-card__trend {
  width: fit-content;
  margin-top: 3px;
  padding: 3px 7px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 750;
  border-radius: var(--radius-full);
  background: var(--color-surface);
}
.capability-progress-card__trend[data-trend='up'] { color: var(--color-success); }
.capability-progress-empty {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.capability-progress-empty > span { color: var(--color-text-muted); font-size: var(--text-sm); }

.program-archive-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 750;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  border-radius: var(--radius-md);
  cursor: pointer;
}
.program-archive-restore:hover,
.program-archive-restore:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-color: var(--color-primary);
}

.data-mgmt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.data-mgmt__group {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.data-mgmt__group > strong { font-size: var(--text-sm); }
.data-mgmt__group > span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.data-mgmt__group--danger { border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); }
.data-mgmt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}
.data-mgmt .btn-primary,
.data-mgmt .btn-secondary,
.data-mgmt .btn-danger,
.data-mgmt .import-label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.data-mgmt > .import-label { justify-self: start; }
.data-mgmt-status { grid-column: 1 / -1; min-height: 1.4em; }

@media screen and (max-width: 700px) {
  .data-mgmt { grid-template-columns: 1fr; }
  .data-mgmt__actions { display: grid; grid-template-columns: 1fr; }
  .data-mgmt > .import-label { width: 100%; }
}

@media screen and (max-width: 400px) {
  .dash-readiness__heading { display: grid; gap: 2px; }
  .dash-readiness__choices { gap: 4px; }
  .dash-readiness__choices button { min-width: 0; padding-inline: 4px; }
  .capability-progress-grid { grid-template-columns: 1fr; }
}

[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:     #908C85;
  --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;
  --anatomy-body:          #45454D;
  --anatomy-muscle:        #686873;
  --anatomy-outline:       #232329;


  --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:     #908C85;
    --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;
    --anatomy-body:          #45454D;
    --anatomy-muscle:        #686873;
    --anatomy-outline:       #232329;


    --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: flex-start;
  justify-content: center;
  padding: max(var(--space-6), env(safe-area-inset-top)) max(var(--space-6), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  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; }
body.auth-gate-open { overflow: hidden; }

body.app-confirm-open {
  overflow: hidden;
}

.app-confirm {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg-base) 76%, transparent);
  place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-confirm[hidden] {
  display: none;
}

.app-confirm__panel {
  width: min(100%, 440px);
  max-height: calc(100dvh - 36px);
  padding: 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-hard);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  animation: app-confirm-enter 180ms ease-out both;
}

.app-confirm__kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 840;
  letter-spacing: 0.12em;
}

.app-confirm__panel h2 {
  margin: 0;
  color: var(--ink-primary);
  font-size: clamp(23px, 4vw, 30px);
  line-height: 1.05;
}

.app-confirm__panel p {
  margin: 12px 0 0;
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.app-confirm__phrase {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.app-confirm__phrase[hidden] {
  display: none;
}

.app-confirm__phrase span {
  color: var(--ink-primary);
  font-size: 13px;
  font-weight: 760;
}

.app-confirm__phrase input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  outline: none;
  background: var(--bg-base);
  color: var(--ink-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-confirm__phrase input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.app-confirm__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 24px;
}

.app-confirm__actions button {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.app-confirm__accept {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--ink-on-accent) !important;
}

.app-confirm[data-tone='danger'] .app-confirm__kicker {
  color: var(--signal-alert);
}

.app-confirm[data-tone='danger'] .app-confirm__accept {
  border-color: var(--signal-alert) !important;
  background: var(--signal-alert) !important;
  color: var(--ink-inverse) !important;
}

.app-confirm__accept:disabled,
.app-confirm[data-tone='danger'] .app-confirm__accept:disabled {
  border-color: var(--border-hard) !important;
  background: var(--color-surface-2) !important;
  color: var(--ink-muted) !important;
  cursor: not-allowed;
  filter: none !important;
}

.app-confirm__actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .app-confirm__cancel:hover {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--border-hard));
    color: var(--accent);
  }

  .app-confirm__accept:hover {
    filter: brightness(1.08);
  }
}

@media screen and (max-width: 440px) {
  .app-confirm {
    align-items: end;
    padding-inline: 10px;
  }

  .app-confirm__panel {
    padding: 22px 18px 18px;
    border-radius: 18px;
  }

  .app-confirm__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-confirm__accept {
    grid-row: 1;
  }
}

@keyframes app-confirm-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-confirm__panel { animation: none; }
}
.auth-gate__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-block: auto;
  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);
  white-space: nowrap;
  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; }

.equipment-selector-shell { margin-top: var(--space-4); }
@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: 12px; }
.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: 12px; font-weight: 800; letter-spacing: 0.07em; 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; min-height: 46px; flex: 0 0 116px; }
.timer-limit-config .session-timer-stepper > button,
.timer-limit-config .session-timer-stepper > input { min-height: 44px; }
.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); }
.session-timer-laps {
  max-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border-soft);
}
.timer-lap-header,
.timer-lap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; }
.timer-lap-header { min-height: 30px; padding: 6px 2px; border-bottom: 1px solid var(--border-soft); color: var(--ink-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.timer-lap-header > strong,
.timer-lap-header > small { min-width: 82px; color: inherit; font: inherit; text-align: right; }
.timer-lap-row { 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-stopwatch-page-laps .timer-lap-header,
.timer-stopwatch-page-laps .timer-lap-row { grid-template-columns: minmax(0, 1fr) auto; }

.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-section-actions { display: flex; align-items: center; gap: 8px; }
.timer-multi-section-actions > 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-section-actions > button { min-height: 44px; padding: 0 13px; 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: 780; cursor: pointer; }
.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: 19px 16px 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: 44px; 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: 11px; font-weight: 760; cursor: pointer; }
.timer-multi-card__progress { position: absolute; top: 0; right: 0; left: 0; height: 3px; overflow: hidden; background: var(--border-soft); }
.timer-multi-card__progress > span { display: block; width: var(--multi-timer-remaining); height: 100%; background: var(--accent); transition: width 260ms 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-multi-overlay[hidden] { display: none !important; }
body.timer-multi-open { overflow: hidden; }
.timer-multi-overlay { position: fixed; inset: 0; z-index: 530; display: grid; padding: 20px; place-items: center; }
.timer-multi-overlay-backdrop { position: absolute; inset: 0; background: rgb(4 5 8 / 76%); backdrop-filter: blur(8px); }
.timer-multi-overlay-panel { position: relative; display: flex; width: min(100%, 560px); max-height: min(92dvh, 780px); flex-direction: column; overflow: hidden; 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%); }
.timer-multi-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border-soft); }
.timer-multi-overlay-header > div:first-child > span { display: block; margin-bottom: 3px; color: var(--accent); font-size: 10px; font-weight: 820; letter-spacing: 0.12em; text-transform: uppercase; }
.timer-multi-overlay-header h2 { margin: 0; color: var(--ink-primary); font-size: 24px; line-height: 1.1; }
.timer-multi-overlay-header-actions { display: flex; align-items: center; gap: 8px; }
.timer-multi-add-toggle { display: flex; min-height: 44px; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--color-surface-2); color: var(--ink-primary); font: inherit; font-size: 11px; font-weight: 780; cursor: pointer; }
.timer-multi-add-toggle[aria-expanded='true'] { border-color: color-mix(in srgb, var(--accent) 58%, var(--border-hard)); background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-2)); color: var(--accent); }
.timer-multi-add-toggle svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-width: 2; }
.timer-multi-overlay-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); cursor: pointer; }
.timer-multi-overlay-close svg { width: 22px; height: 22px; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.timer-multi-overlay-body { min-height: 0; padding: 18px 22px; overflow: auto; }
.timer-multi-add-form[hidden] { display: none; }
.timer-multi-add-form { display: grid; gap: 14px; margin-bottom: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-soft)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-2)); }
.timer-multi-add-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.timer-multi-add-heading strong { color: var(--ink-primary); font-size: 13px; }
.timer-multi-add-heading small { color: var(--ink-muted); font-size: 10px; }
.timer-multi-add-duration { gap: 6px; }
.timer-multi-add-duration .session-timer-stepper { width: 100%; }
.timer-multi-add-start { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--accent) 68%, var(--border-hard)); border-radius: 12px; background: var(--accent); color: var(--ink-on-accent); font: inherit; font-size: 12px; font-weight: 820; cursor: pointer; }
.timer-multi-overlay-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.timer-multi-overlay-summary > span { display: grid; gap: 3px; }
.timer-multi-overlay-summary strong { color: var(--ink-primary); font-size: 13px; }
.timer-multi-overlay-summary small { color: var(--ink-muted); font-size: 11px; }
.timer-multi-overlay-summary > button { min-height: 44px; padding: 0 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--color-surface-2); color: var(--ink-primary); font: inherit; font-size: 11px; font-weight: 780; cursor: pointer; }
.timer-multi-overlay-list { grid-template-columns: minmax(0, 1fr); }
.timer-multi-empty { display: grid; min-height: 116px; place-content: center; gap: 4px; padding: 20px; border: 1px dashed var(--border-hard); border-radius: 14px; color: var(--ink-primary); text-align: center; }
.timer-multi-empty strong { font-size: 13px; }
.timer-multi-empty small { color: var(--ink-muted); font-size: 11px; }
.timer-multi-overlay-footer { padding: 12px 22px 18px; border-top: 1px solid var(--border-soft); }
.timer-multi-overlay-footer button { width: 100%; min-height: 48px; border: 1px solid var(--border-hard); border-radius: 12px; background: var(--color-surface-2); color: var(--ink-primary); font: inherit; font-size: 12px; font-weight: 780; cursor: pointer; }

@media screen and (max-width: 720px) {
  .timer-multi-overlay { padding: 0; place-items: end center; }
  .timer-multi-overlay-panel { width: 100%; max-height: calc(100dvh - 12px); border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
  .timer-multi-overlay-header { padding: 18px 18px 13px; }
  .timer-multi-overlay-body { padding: 16px 18px; }
  .timer-multi-add-form { padding: 14px; }
  .timer-multi-add-duration { gap: 4px; }
  #timer-multi-overlay .session-timer-stepper:not(.is-wheel-open) > button { display: none; }
  #timer-multi-overlay .session-timer-stepper:not(.is-wheel-open) { grid-template-columns: minmax(0, 1fr); }
  #timer-multi-overlay .session-timer-stepper:not(.is-wheel-open) input { min-height: 46px; border-inline: 0; }
  .timer-multi-overlay-footer { padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
}

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

.reorder-drag-handle {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface-1);
  color: var(--ink-muted);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.reorder-drag-handle svg {
  width: 20px;
  height: 20px;
  fill: currentcolor;
  pointer-events: none;
}

.reorder-drag-handle:active,
body.is-reordering .reorder-drag-handle { cursor: grabbing; }

body.is-reordering {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.reorder-placeholder {
  opacity: 0.24;
  border-style: dashed !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.reorder-drag-ghost {
  position: fixed !important;
  z-index: 4200 !important;
  max-height: 56dvh;
  overflow: hidden !important;
  margin: 0 !important;
  pointer-events: none !important;
  opacity: 0.97;
  box-shadow: 0 24px 70px rgb(0 0 0 / 42%), 0 0 0 2px color-mix(in srgb, var(--accent) 74%, transparent) !important;
  transform-origin: center;
  will-change: transform;
}

.reorder-drag-ghost.program-studio-block .program-studio-block__body {
  display: none !important;
}

.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: 80;
  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: 140px minmax(140px, 0.8fr) minmax(240px, 1.05fr) 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: repeat(3, 44px); 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: 12px; font-weight: 800; }
.timer-block-order > .timer-block-order__drag { grid-row: 2; grid-column: 3; color: var(--accent); }
.timer-block-order button,
.timer-block-delete { min-width: 44px; 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 { grid-row: 2; }
.timer-block-order > .timer-block-order__earlier { grid-column: 1; }
.timer-block-order > .timer-block-order__later { grid-column: 2; }
.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-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.timer-block-name-heading > 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: 11px; 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: 12px; line-height: 1.45; }
.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-a11y { display: none; }
.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-workout { grid-column: 1 / -1; }
.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,
  .reorder-drag-handle: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: 140px minmax(120px, 0.75fr) minmax(220px, 1.1fr) 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: 140px 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: 140px minmax(0, 1fr) 44px; gap: 8px; }
  .timer-block-order { grid-template-columns: repeat(3, 44px); }
  .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: clip;
  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: 44px;
  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: 12px;
  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: 12px; line-height: 1.4; }

.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: 44px;
  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: 12px; line-height: 1.4; }
.timer-limit-config .session-timer-stepper { width: 146px; flex-basis: 146px; }
.timer-limit-config .session-timer-stepper--compact {
  width: 158px;
  flex-basis: 158px;
  grid-template-columns: 44px minmax(42px, 1fr) 44px;
}

.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: 12px; line-height: 1.4; }
.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);
    transition:
      padding-left 420ms cubic-bezier(0.16, 1, 0.3, 1),
      padding-right 420ms cubic-bezier(0.16, 1, 0.3, 1),
      border-radius 420ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
      backdrop-filter 420ms cubic-bezier(0.16, 1, 0.3, 1),
      -webkit-backdrop-filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  #view-timer.view.active .timer-mobile-start-dock.is-attachment-transitioning {
    transform-origin: top left;
    transition:
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      padding-left 420ms cubic-bezier(0.16, 1, 0.3, 1),
      padding-right 420ms cubic-bezier(0.16, 1, 0.3, 1),
      border-radius 420ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
      backdrop-filter 420ms cubic-bezier(0.16, 1, 0.3, 1),
      -webkit-backdrop-filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  #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: blur(0);
    -webkit-backdrop-filter: blur(0);
  }

  #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) 44px 44px 52px;
    grid-template-areas:
      'name order order order'
      'duration duration duration sound';
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 14px 12px 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: repeat(3, 44px);
    align-self: end;
    align-items: end;
    gap: 4px;
  }

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

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

  .timer-block-order > .timer-block-order__drag {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .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-duration { grid-area: duration; gap: 8px; }
  .timer-block-sound { grid-area: sound; min-width: 0; align-self: end; }
  .timer-block-sound > span { display: none; }
  .timer-block-sound .timer-workspace-sound-picker { width: 48px; }
  .timer-block-sound .session-timer-sound-trigger {
    width: 48px;
    min-width: 48px;
    padding: 0;
    justify-content: center;
  }
  .timer-block-sound .session-timer-sound-trigger > [data-timer-sound-label],
  .timer-block-sound .session-timer-sound-trigger > .timer-sound-disclosure { display: none; }
  .timer-block-sound .timer-sound-compact-icon { display: grid; width: 22px; height: 22px; place-items: center; }
  .timer-block-sound .timer-sound-compact-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
  }
  .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-a11y {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .timer-block-delete-a11y:focus-visible {
    z-index: 20;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: 44px;
    padding: 0 14px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    border: 1px solid var(--color-error);
    border-radius: 9px;
    background: var(--color-surface-1);
    color: var(--color-error);
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
  }

  .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: 3;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: 3px;
    padding: 0;
    align-items: center;
    pointer-events: none;
  }

  .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-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: 340px) {
  .timer-block-card__content {
    grid-template-areas:
      'order order order order'
      'name name name name'
      'duration duration duration sound';
  }

  .timer-block-order { justify-self: end; }
}

@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: 12px; }
  .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,
.container--wide {
  margin-inline: auto;
  padding-left: max(var(--container-pad), env(safe-area-inset-left));
  padding-right: max(var(--container-pad), env(safe-area-inset-right));
}
.container { max-width: var(--content-default); }
.container--wide { max-width: var(--content-wide); }

/* ── 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;
  padding-top: env(safe-area-inset-top);
}

.connection-status {
  position: sticky;
  top: calc(60px + env(safe-area-inset-top));
  z-index: 99;
  border-bottom: 1px solid color-mix(in srgb, var(--signal-info) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--signal-info-wash) 94%, var(--bg-elevated));
  color: var(--ink-primary);
}

.connection-status__inner {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-align: center;
}

.connection-status__inner svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: var(--signal-info);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 480px) {
  .connection-status__inner {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .connection-status__inner svg { margin-top: 1px; }
}
.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-explore {
  position: relative;
  flex: 0 0 auto;
}

.header-explore summary {
  list-style: none;
}

.header-explore summary::-webkit-details-marker {
  display: none;
}

.header-explore-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 5px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-interactive), background var(--transition-interactive);
}

.header-explore-trigger:hover,
.header-explore[open] .header-explore-trigger {
  color: var(--color-text);
  background: var(--color-surface-dynamic);
}

.header-explore.has-active-destination .header-explore-trigger {
  color: var(--color-primary-active);
  background: var(--color-primary-highlight);
  font-weight: 700;
}

.header-explore-trigger:focus-visible,
.header-explore-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.header-explore-trigger svg {
  transition: transform 160ms ease;
}

.header-explore[open] .header-explore-trigger svg {
  transform: rotate(180deg);
}

.header-explore-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 500;
  width: min(420px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
}

.header-explore-heading {
  display: grid;
  gap: 2px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.header-explore-heading strong {
  color: var(--color-text);
  font-size: 13px;
}

.header-explore-heading small,
.header-explore-option small {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}

.header-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding-block: 6px;
}

.header-explore-option.nav-btn {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px !important;
  text-align: left;
}

.header-explore-option > svg {
  width: 19px;
  height: 19px;
  justify-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
}

.header-explore-option > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.header-explore-option strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.header-actions .program-context-trigger__copy small {
  display: none;
}

.header-actions .program-context-trigger {
  min-width: 154px;
  max-width: 210px;
}

.header-actions .program-context-trigger__copy strong {
  font-size: 13px;
}
.theme-toggle,
.model-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.theme-toggle:hover,
.model-toggle:hover {
  border-color: var(--color-border);
  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); }
.badge-skill { background: color-mix(in srgb, var(--accent-skill) 14%, transparent); color: var(--accent-skill); }
.badge-mobility { background: color-mix(in srgb, var(--accent-flex) 14%, transparent); color: var(--accent-flex); }
/* 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-profile-menu-item.active,
[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);
}

/* ══════════════════════════════════════════════════════════════════
   PROGRAM CONTEXT SELECTOR
   One app-wide control mounted in persistent chrome. The header uses a
   compact menu for available Programs; the mobile drawer uses the same
   choices as a list. Full template discovery remains in Program Library.
   Research: _references/research/ux_audit/profile_switcher_patterns.md
   ══════════════════════════════════════════════════════════════════ */
.persona-switch {
  position: relative;
  display: block;
  max-width: 100%;
}
.program-context-trigger,
.program-context-option {
  --persona-accent: var(--accent);
}
.program-context-trigger {
  display: grid;
  min-width: 172px;
  max-width: 230px;
  min-height: 44px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.program-context-trigger:hover,
.program-context-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
  background: var(--color-surface-2);
}
.program-context-trigger:focus-visible,
.program-context-option:focus-visible,
.program-context-library:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.program-context-trigger__copy,
.program-context-option__copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.program-context-trigger__copy small,
.program-context-option__copy small,
.program-context-menu__heading small,
.program-context-library small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.program-context-trigger__copy strong,
.program-context-option__copy strong,
.program-context-library strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.program-context-trigger__copy small {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.program-context-trigger__chevron {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  transition: transform 160ms ease;
}
.program-context-trigger[aria-expanded="true"] .program-context-trigger__chevron {
  transform: rotate(180deg);
}
.program-context-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  width: min(330px, calc(100vw - 24px));
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
}
.program-context-menu[hidden] { display: none; }
.program-context-menu__heading {
  display: grid;
  gap: 2px;
  padding: 10px 10px 9px;
  border-bottom: 1px solid var(--border-soft);
}
.program-context-menu__heading strong {
  color: var(--color-text);
  font-size: 13px;
}
.program-context-menu__options {
  display: grid;
  gap: 2px;
  padding: 5px 0;
}
.program-context-option,
.program-context-library {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.program-context-option:hover,
.program-context-option:focus-visible,
.program-context-library:hover,
.program-context-library:focus-visible {
  background: var(--color-surface-2);
}
.program-context-option.is-active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--color-surface));
}
.program-context-option__check {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--accent);
}
.program-context-library {
  border-top-color: var(--border-soft);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  color: var(--accent);
}
.program-context-library > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.program-context-library > svg:last-child {
  justify-self: end;
}
.program-context-trigger[data-profile="gf"],
.program-context-option[data-profile="gf"]    { --persona-accent: var(--accent-flex); }
.program-context-trigger[data-profile="bruce"],
.program-context-option[data-profile="bruce"] { --persona-accent: var(--accent-core); }
.program-context-trigger[data-profile="rocky"],
.program-context-option[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-color 150ms ease, color 150ms ease;
}
[data-theme='dark'] .persona-chip__disc {
  color: #0B0B0C;
}
/* 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 {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}
@media (prefers-reduced-motion: reduce) {
  .program-context-trigger,
  .program-context-trigger__chevron,
  .persona-chip__disc { transition: none; }
}

/* Header mount: Program context and compact global appearance preferences sit
   left of the account control. Compact layouts use the drawer instead. */
.header-actions .persona-switch { flex: 0 1 auto; }

/* ══════════════════════════════════════════════════════════════════
   Demo-model controls: one compact global button in the desktop header and
   one explicit segmented choice inside the compact-layout drawer. The drawer
   thumb is driven by data-model on its container.
   ══════════════════════════════════════════════════════════════════ */
.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: 44px;
  height: 44px;
  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(44px); }
/* 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: 44px;
  height: 44px;
  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; }
}
/* ── 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; }
  /* The persona host is visibility-controlled by renderPersonaSwitch. The
     mobile header keeps the switch inside the navigation drawer instead. */
  #header-persona,
  .header-actions > .theme-toggle,
  .header-actions > .model-toggle { display: none !important; }
  .header-account-menu {
    position: fixed;
    top: calc(68px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: min(260px, calc(100vw - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right))));
    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 Program choice: one compact list inside the already-open drawer.
   This avoids nesting another popup while keeping long Program names readable. */
#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 {
  width: 100%;
}
.program-context-list {
  display: grid;
  gap: 5px;
}
.persona-switch--drawer .program-context-option {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: none;
}
.persona-switch--drawer .program-context-option:hover:not(.is-active) {
  border-color: var(--color-text-faint);
  background: var(--color-surface-2);
}
.persona-switch--drawer .program-context-option:focus-visible {
  outline-color: var(--color-primary);
}
.persona-switch--drawer .program-context-library--drawer {
  min-height: 54px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.persona-switch--drawer .program-context-library--drawer:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
}
.persona-switch--drawer .program-context-option .persona-chip__disc {
  width: 30px;
  height: 30px;
  font-size: 10px;
}
.persona-switch--drawer .program-context-option.is-active {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  border-color: var(--color-primary);
  color: var(--color-text);
}
:root:not([data-theme='dark']) .persona-switch--drawer .program-context-option.is-active {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  border-color: var(--color-primary);
  color: var(--color-text);
}
@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);
}
.schedule-mode-panel .mode-btn {
  border-radius: var(--radius-lg);
}
.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;
}

.schedule-mode-panel .program-phase-picker { display: none; }

/* 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(2, minmax(0, 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; }

.equipment-owned-surface { margin-bottom: var(--space-5); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.equipment-owned-surface__heading { display: grid; gap: 5px; margin-bottom: var(--space-4); }
.equipment-owned-surface__heading > span,
.eq-rec-card__heading > span { color: var(--color-primary); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.equipment-owned-surface__heading h2,
.eq-rec-card__heading h3 { margin: 0; padding: 0; border: 0; color: var(--color-text); }
.equipment-owned-surface__heading p,
.eq-rec-card__heading p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
#equipment-kit-host > .container--wide { max-width: none; padding: 0; }
#equipment-kit-host .equipment-selector-shell { margin-top: 0; }
#equipment-kit-host .equipment-panel { box-shadow: none; }
.eq-rec-card__heading { display: grid; gap: 5px; margin-bottom: var(--space-4); }
.equipment-summary-list { display: grid; gap: 10px; }
.equipment-kit-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.equipment-kit-metrics > span { display: grid; min-width: 0; gap: 3px; padding: 13px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); text-align: center; }
.equipment-kit-metrics strong { color: var(--color-primary); font-family: var(--font-mono); font-size: var(--text-lg); }
.equipment-kit-metrics small { color: var(--color-text-muted); font-size: 12px; }
.equipment-kit-summary-copy { margin: 12px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.equipment-summary-list .eq-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; margin: 0; padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.equipment-summary-check,
.equipment-impact-count { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-family: var(--font-mono); font-size: 12px; font-weight: 800; }
.equipment-empty-note { display: grid; gap: 4px; padding: 18px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
.equipment-empty-note span { color: var(--color-text-muted); font-size: var(--text-sm); }
.equipment-coverage-success { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid color-mix(in srgb, var(--color-success) 38%, var(--color-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface-2)); }
.equipment-coverage-success > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); font-weight: 900; }
.equipment-coverage-success > div { display: grid; gap: 3px; }
.equipment-coverage-success small { color: var(--color-text-muted); font-size: var(--text-sm); }

@media screen and (max-width: 400px) {
  #equipment-kit-host .equipment-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #equipment-kit-host .eq-toggle { min-height: 44px; height: auto; justify-content: flex-start; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.2; }
}

/* ── 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; }
/* Catalog and Science fill the right content edge with cards and tables at
   every width. Their section navigation is safer than a control over content. */
body.in-catalog .scroll-top,
body:has(#view-science.active) .scroll-top { display: none !important; }

/* ── 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;
  }

  #briefing-section-kit .equipment-toggles {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #briefing-section-kit .eq-toggle {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }
}

/* ============================================================
   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;
  justify-content: center;
  gap: 2px;
  margin-left: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  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; }
.history-signal {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 7px;
}
.history-signal-chip {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
  color: var(--ink-primary);
  font-size: 0.68rem;
  font-weight: 700;
}
.history-signal-chip span {
  color: var(--ink-muted);
  font-weight: 600;
}
.history-signal-chip[data-signal='joint-painful'] {
  border-color: color-mix(in srgb, var(--signal-alert) 55%, var(--border-soft));
  background: var(--signal-alert-wash);
  color: var(--signal-alert);
}
.history-signal-guidance {
  color: var(--ink-muted);
  font-size: 0.7rem;
  font-weight: 600;
}
.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);
}

.progress-empty-state {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.progress-empty-state__hero,
.progress-empty-state__roadmap,
.progress-empty-tools {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.progress-empty-state__hero {
  display: grid;
  align-content: center;
  min-height: 310px;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
}

.progress-empty-state__eyebrow {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.progress-empty-state__hero h2 {
  max-width: 680px;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
}

.progress-empty-state__hero p {
  max-width: 660px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

.progress-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.progress-empty-state__actions > * {
  min-height: 44px;
}

.progress-empty-state__actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.progress-empty-state__actions .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.progress-empty-state__roadmap {
  display: grid;
  align-content: center;
  padding: var(--space-3) var(--space-5);
}

.progress-empty-state__roadmap article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}

.progress-empty-state__roadmap article:last-child {
  border-bottom: 0;
}

.progress-empty-state__roadmap article > span {
  grid-row: 1 / 3;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
}

.progress-empty-state__roadmap strong {
  color: var(--color-text);
  font-size: var(--text-base);
}

.progress-empty-state__roadmap p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.progress-empty-tools {
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.progress-empty-tools > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  color: var(--color-text);
  font-weight: 750;
  cursor: pointer;
}

.progress-empty-tools > div {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-divider);
}

@media screen and (max-width: 820px) {
  .progress-empty-state {
    grid-template-columns: 1fr;
  }

  .progress-empty-state__hero {
    min-height: 0;
  }
}

@media screen and (max-width: 500px) {
  .progress-empty-state__hero,
  .progress-empty-state__roadmap {
    padding: var(--space-4);
  }

  .progress-empty-state__hero h2 {
    font-size: 30px;
  }

  .progress-empty-state__actions {
    display: grid;
  }
}

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

/* 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);
}

.catalog-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
}

.catalog-page-header > div {
  min-width: 0;
}

.catalog-suggest-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 8%, var(--color-surface));
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.catalog-suggest-trigger:hover,
.catalog-suggest-trigger:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--color-surface));
  color: var(--ink-primary);
}

/* 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: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  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-section-label--explore {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.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; }

  /* Keep destinations spatially stable as soon as the drawer opens. A moving
     panel can cancel a quick tap when the pointer lifts over a new location. */
  .nav-drawer-panel {
    opacity: 0;
    transform: none;
    transition: opacity 160ms ease;
  }
  .nav-drawer.open .nav-drawer-panel {
    opacity: 1;
    transform: 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-calendar,
.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-calendar:hover,
.cmd-kit:hover,
.cmd-briefing:hover {
  background: var(--color-surface-dynamic);
  border-color: var(--color-primary);
}
.cmd-profile .cmd-label,
.cmd-calendar .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;
}

.cmd-calendar .cmd-label-lg {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* 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: 12px;
  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-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 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,
  .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:not([hidden]),
  #profile-gf:not([hidden]),
  #profile-custom:not([hidden]),
  #profile-bruce:not([hidden]),
  #profile-rocky:not([hidden]) {
    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: block;
  margin: var(--space-3) 0 var(--space-5);
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.day-flow-hint.program-tip { padding: 0; }
.day-flow-hint.program-tip .program-tip__content {
  grid-column: 1 / -1;
  grid-row: 1;
}
.day-flow-hint__details > summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  gap: var(--space-2);
  align-items: center;
  min-height: 52px;
  padding: var(--space-2) 64px var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}
.day-flow-hint__details > summary::-webkit-details-marker { display: none; }
.day-flow-hint__details > summary svg { color: var(--color-primary); }
.day-flow-hint__summary-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 3px var(--space-2);
  align-items: baseline;
}
.day-flow-hint__summary-copy strong { color: var(--color-text); }
.day-flow-hint__summary-copy span { font-size: var(--text-xs); }
.day-flow-hint__chevron {
  color: var(--color-text-muted);
  transition: transform var(--transition-interactive);
}
.day-flow-hint__details[open] .day-flow-hint__chevron { transform: rotate(180deg); }
.day-flow-hint__details > p {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4) 44px;
  color: var(--color-text-muted);
}
.day-flow-hint__details > summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
  outline-offset: -2px;
  border-radius: inherit;
}

/* 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;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--space-3);
  transform: translateX(var(--program-tip-swipe-x));
  transition: transform 180ms ease, opacity 180ms ease;
  touch-action: pan-y;
  will-change: transform;
}
.program-tip__content { min-width: 0; }
.program-tip[hidden] { display: none !important; }
.program-tip.is-swiping { transition: none; }
.program-tip.is-dismissing { opacity: 0; }
.program-tip-dismiss {
  position: static;
  align-self: center;
  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);
}
.day-flow-hint .program-tip-dismiss {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  z-index: 1;
  margin: 4px 4px 0 0;
}
@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-reference-tip {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-2));
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.program-reference-tip p { margin: 0; }
.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: 14px;
  line-height: 1.5;
}
.briefing-program-tips__state {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: var(--color-text-muted);
  font-size: 12px;
  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: 14px;
  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=2890');
}
.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=2890');
}
.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=2890');
}
.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=2890');
}

[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=2890');
}
[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=2890');
}
[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=2890');
}
[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=2890');
}
@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=2890');
  }
}
@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=2890');
  }
  .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=2890');
  }
  .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=2890');
  }
  .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=2890');
  }

  [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=2890');
  }
  [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=2890');
  }
  [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=2890');
  }
  [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=2890');
  }
}
.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: var(--anatomy-body);
}
.muscle-diagram-container svg .muscle {
  fill: var(--anatomy-muscle);
  stroke: var(--anatomy-outline);
  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,
.model-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,
.model-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: 44px;
  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__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dash-hero__demo {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border-hard));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.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,
.dash-card--compact { 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-workout-details {
  margin: 0 0 var(--space-4);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}

.dash-workout-details__summary {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 760;
  list-style: none;
  cursor: pointer;
}

.dash-workout-details__summary::-webkit-details-marker {
  display: none;
}

.dash-workout-details__summary small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 650;
}

.dash-workout-details__summary::after {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: '';
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition-interactive);
}

.dash-workout-details[open] .dash-workout-details__summary {
  border-bottom: 1px solid var(--color-border);
}

.dash-workout-details[open] .dash-workout-details__summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.dash-workout-details .dash-workout__list {
  margin: 0;
  padding: 6px 13px 8px;
}

.dash-workout-details__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .dash-workout-details__summary:hover {
    color: var(--color-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-workout-details__summary::after {
    transition: none;
  }
}
.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%;
  min-height: 44px;
  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 prioritize actions over secondary history. */
  .dash-grid {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-col {
    display: contents;
  }
  .dash-card {
    width: 100%;
  }
  #dash-workout { order: 1; }
  #dash-links { order: 2; }
  #dash-progress { order: 3; }
  #dash-log { order: 4; }

  #dash-log.dash-card--demo {
    padding: var(--space-4);
    border-style: dashed;
    background: transparent;
  }

  #dash-log.dash-card--demo .dash-card__header {
    margin-bottom: 6px;
  }

  #dash-log.dash-card--demo .dash-card__empty--demo {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    padding-top: 0;
    font-size: 13px;
  }

  #dash-log.dash-card--demo .dash-card__empty--demo svg {
    width: 24px;
    height: 24px;
  }

  #dash-log.dash-card--demo .dash-login-btn {
    width: auto;
    grid-column: 2;
    justify-self: start;
    margin-top: 0;
    padding-inline: 13px;
  }

  .dash-hero__title {
    font-size: var(--text-2xl);
  }
}

@media screen and (max-width: 600px) {
  #view-dashboard .dash-card--workout {
    padding: var(--space-4);
  }
}

/* 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--pause {
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
  color: var(--color-primary);
}
.flow-runner__btn:disabled { opacity: 0.38; cursor: not-allowed; }
.flow-runner__btn--next {
  background: var(--color-primary);
  border: none;
  color: var(--color-bg);
}
.flow-runner__btn--next:hover { background: var(--color-primary-active); }

@media screen and (max-width: 400px) {
  .flow-runner__content { padding: var(--space-4); }
  .flow-runner__actions { gap: var(--space-2); }
  .flow-runner__btn { padding-inline: var(--space-2); font-size: 12px; }
}

/* 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 max(var(--space-6), env(safe-area-inset-bottom));
  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,
.model-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,
  .header-actions > .model-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;
  }
}

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

}

/* 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 44px;
    width: 44px;
    height: 44px;
    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;
}

/* The panel supplies the drawer motion. Interactive rows remain stationary so
   an early touch cannot lose its target while the panel is settling. */
.nav-drawer.open .nav-drawer-btn,
.nav-drawer.open .nav-drawer-pref {
  animation: none;
}

/* 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,
  .model-toggle,
  .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: 44px;
    height: 44px;
  }

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

@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; }
}

@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 {
    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 {
    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 {
    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 .weekly-carousel.can-scroll-right::after {
    opacity: 1;
  }

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

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

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

}

@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: 44px;
  min-height: 44px;
  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: 44px;
  min-height: 44px;
  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);
  }
}

@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-feedback {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 2%, var(--color-surface-2));
  overflow: clip;
}

.session-feedback summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 64px;
  padding: 12px 14px;
  color: var(--ink-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.session-feedback summary::-webkit-details-marker { display: none; }

.session-feedback summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-interactive);
}

.session-feedback[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.session-feedback-summary__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.session-feedback-summary__copy strong { font-size: var(--text-sm); }
.session-feedback-summary__copy span {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.session-feedback-summary__status {
  padding: 5px 9px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-full);
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.session-feedback-body {
  display: grid;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border-soft);
}

.session-feedback-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(300px, 1.28fr);
  gap: var(--space-4);
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.session-feedback-row__copy {
  display: grid;
  gap: 3px;
}

.session-feedback-row__copy strong {
  color: var(--ink-primary);
  font-size: var(--text-sm);
}

.session-feedback-row__copy span {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.session-feedback-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.session-feedback-options button {
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font: 700 var(--text-xs) var(--font-body);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), color var(--transition-interactive);
}

@media (hover: hover) {
  .session-feedback-options button:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-hard));
    color: var(--ink-primary);
  }
}

.session-feedback-options button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

.session-feedback-row[data-feedback-group='joint'] button[data-feedback-value='painful'][aria-pressed='true'] {
  border-color: var(--signal-alert);
  background: var(--signal-alert-wash);
  color: var(--signal-alert);
}

.session-feedback-guidance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--space-3);
  align-items: baseline;
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--signal-info);
  border-radius: 8px;
  background: var(--signal-info-wash);
  color: var(--signal-info);
}

.session-feedback-guidance[hidden] { display: none; }
.session-feedback-guidance[data-tone='progress'],
.session-feedback-guidance[data-tone='steady'] {
  border-left-color: var(--signal-ok);
  background: var(--signal-ok-wash);
  color: var(--signal-ok);
}

.session-feedback-guidance[data-tone='review'] {
  border-left-color: var(--signal-alert);
  background: var(--signal-alert-wash);
  color: var(--signal-alert);
}

.session-feedback-guidance strong { font-size: var(--text-xs); }
.session-feedback-guidance span {
  font-size: var(--text-xs);
  line-height: 1.45;
}

.session-feedback-safety {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .session-feedback-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .session-feedback-row__copy span { display: none; }

  .session-feedback-options button {
    padding-inline: 5px;
    font-size: 0.7rem;
  }

  .session-feedback-guidance {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

@media (max-width: 359px) {
  .session-feedback summary { gap: 8px; }
  .session-feedback-summary__copy span { display: none; }
}

.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 -------------------------- */

#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);
}

/* 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;
    container-name: catalog-card;
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: none;
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease;
  }

  #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;
    height: auto;
    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;
  }

  /* Narrow multi-column cards keep one compact identity band. Badges remain
     attached to the title instead of becoming a visually separate row. */
  @media screen and (min-width: 700px) {
    @container catalog-card (max-width: 389px) {
      #view-catalog .card-header {
        min-height: 140px;
      }
    }
  }

  #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: block;
    min-width: 0;
    margin: 9px 0 8px;
    overflow: visible;
    color: var(--ink-primary);
    font-size: 17px !important;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }

  #view-catalog .card-header-text .badge-row {
    display: flex;
    min-height: 24px;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
  }

  #view-catalog .exercise-card .badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 7px;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.045em;
    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: 98px;
    min-height: 98px;
    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 {
    display: flex;
    height: 142px;
    min-height: 142px;
    margin: 0 0 11px;
    padding: 11px 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
    flex-direction: column;
  }

  #view-catalog .catalog-card__cue.is-expanded {
    height: auto;
    min-height: 142px;
    overflow: visible;
  }

  #view-catalog .catalog-card__cue.is-animating {
    overflow: hidden;
  }

  #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__cue.is-expanded .card-notes {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  #view-catalog .catalog-card__cue-toggle {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 6px;
    margin: auto 0 -5px;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 760;
    line-height: 1;
    cursor: pointer;
  }

  #view-catalog .catalog-card__cue-toggle[hidden] {
    display: none;
  }

  #view-catalog .catalog-card__cue-toggle svg {
    flex: 0 0 auto;
    transition: transform 180ms ease;
  }

  #view-catalog .catalog-card__cue-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  #view-catalog .catalog-card__cue-toggle:hover,
  #view-catalog .catalog-card__cue-toggle:focus-visible {
    color: var(--ink);
  }

  #view-catalog .catalog-card__equipment {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 34px;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
  }

  #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 {
    height: auto;
    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: 150px;
    min-height: 150px;
    margin-bottom: 9px;
    padding: 10px 11px;
  }

  #view-catalog .catalog-card__cue.is-expanded {
    height: auto;
    min-height: 150px;
  }

  #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: 11px;
    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: 11px;
    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: 11px;
    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: 11px;
    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: 13px;
    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: 13px;
    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: 11px;
  }

  #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;
  }
}

/* Session time planner ---------------------------------------------------- */
.session-fit-overlay[hidden] {
  display: none !important;
}

body.session-fit-open {
  position: fixed;
  top: var(--session-fit-scroll-lock-y, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.session-fit-overlay {
  position: fixed;
  z-index: 680;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
}

.session-fit-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-base) 80%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: session-fit-fade 180ms ease both;
}

.session-fit-panel {
  position: relative;
  display: flex;
  width: min(720px, 100%);
  max-height: min(820px, calc(100dvh - 40px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-hard);
  border-radius: 24px;
  background: var(--color-surface);
  color: var(--ink-primary);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--bg-base) 72%, transparent);
  animation: session-fit-enter 190ms ease both;
}

.session-fit-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.session-fit-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.session-fit-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.05;
}

.session-fit-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-muted);
  cursor: pointer;
}

.session-fit-close svg,
.session-fit-summary__icon svg,
.session-fit-guardrail svg,
.session-fit-apply svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.session-fit-body {
  min-height: 0;
  padding: 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.session-fit-intro {
  max-width: 62ch;
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

.session-fit-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.session-fit-options button {
  display: grid;
  min-height: 66px;
  place-content: center;
  gap: 3px;
  padding: 9px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface-2);
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.session-fit-options button strong {
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1;
}

.session-fit-options button small {
  font-size: 10px;
  font-weight: 680;
}

.session-fit-options button.is-selected {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 13%, var(--color-surface-2));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.session-fit-options button.is-selected strong {
  color: var(--accent);
}

.session-fit-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
}

.session-fit-summary__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 16%, var(--color-surface));
  color: var(--accent);
}

.session-fit-summary > div {
  display: grid;
  gap: 3px;
}

.session-fit-summary strong {
  font-size: 14px;
}

.session-fit-summary span:last-child {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.session-fit-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.session-fit-preview > section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--color-surface-2);
}

.session-fit-preview > section:only-child {
  grid-column: 1 / -1;
}

.session-fit-preview:has(> #session-fit-deferred-section[hidden]) > section:first-child {
  grid-column: 1 / -1;
}

.session-fit-preview__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.session-fit-preview__heading span {
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 780;
}

.session-fit-preview__heading strong {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.session-fit-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.session-fit-list li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}

.session-fit-list li:last-child {
  border-bottom: 0;
}

.session-fit-list li span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
}

.session-fit-list li strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.session-fit-list--deferred li span,
.session-fit-list--deferred li strong {
  color: var(--ink-muted);
}

.session-fit-guardrail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.session-fit-guardrail svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--signal-ok);
}

.session-fit-footer {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 10px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
}

.session-fit-footer button {
  min-height: 48px;
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
}

.session-fit-cancel {
  border: 1px solid var(--border-hard);
  background: var(--color-surface-2);
  color: var(--ink-primary);
}

.session-fit-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.session-fit-apply svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

#view-programs .ex-card.is-session-deferred {
  border-style: dashed;
  opacity: 0.7;
}

#view-programs .ex-card__deferred-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  #view-programs .session-fit-launch:hover,
  #view-programs .session-edit-program:hover,
  .session-fit-close:hover,
  .session-fit-cancel: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));
  }

  .session-fit-options button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-hard));
  }
}

@media screen and (max-width: 768px) {
  #view-programs .day-detail-header > .session-header-actions .session-fit-launch,
  #view-programs .day-detail-header > .session-header-actions .session-edit-program {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }

  #view-programs .session-edit-program {
    grid-column: auto;
  }
}

@media screen and (max-width: 600px) {
  .session-fit-overlay {
    align-items: end;
    padding: 0;
  }

  .session-fit-panel {
    width: 100%;
    max-height: calc(100dvh - 10px);
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }

  .session-fit-header {
    padding: 18px 16px 14px;
  }

  .session-fit-header h2 {
    font-size: 27px;
  }

  .session-fit-body {
    padding: 16px;
  }

  .session-fit-intro {
    font-size: 13px;
  }

  .session-fit-options {
    gap: 6px;
  }

  .session-fit-options button {
    min-height: 60px;
    padding-inline: 4px;
  }

  .session-fit-options button strong {
    font-size: 15px;
  }

  .session-fit-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-fit-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 360px) {
  .session-fit-options button small {
    font-size: 9px;
  }

  .session-fit-summary {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 12px;
  }

  .session-fit-summary__icon {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-fit-overlay__backdrop,
  .session-fit-panel,
  .session-fit-options button {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes session-fit-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes session-fit-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@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: 4px;
    scroll-padding-inline: 4px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .section-jump__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 44px;
    height: 44px;
    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;
    opacity: 1;
    transition: opacity 180ms ease;
  }

  .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-card-progress {
  display: grid;
  gap: 10px;
  padding: 14px 20px 18px;
}

#view-skills .skill-card-progress .skill-path {
  margin-bottom: 0;
}

#view-skills .skill-card.is-expanded .skill-card-progress {
  border-bottom: 1px solid var(--border-soft);
}

#view-skills .skill-card-body[hidden] {
  display: none;
}

.reference-card-toggle {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--bg-sunken);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.reference-card-toggle__label {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.reference-card-toggle__label strong {
  font-size: 13px;
  font-weight: 750;
}

.reference-card-toggle__label small,
.reference-card-toggle__action {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.reference-card-toggle__action {
  color: var(--color-primary);
}

.reference-card-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.reference-card-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.reference-card-toggle:hover,
.reference-card-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-sunken));
}

.reference-card-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 54%, transparent);
  outline-offset: 2px;
}

#view-flexibility .flex-card-summary {
  display: grid;
  gap: 12px;
  padding: 14px 20px 18px;
}

#view-flexibility .flex-card-summary .flex-intro,
#view-flexibility .flex-card-summary .flex-card-safety {
  margin: 0;
}

#view-flexibility .flex-card-summary__actions {
  display: grid;
  gap: 8px;
}

#view-flexibility .flex-card-summary .flow-start-btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

#view-flexibility .flex-card.is-expanded .flex-card-summary {
  border-bottom: 1px solid var(--border-soft);
}

#view-flexibility .flex-card-body[hidden] {
  display: none;
}

#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 {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.46;
}

#view-skills .prog-step .skill-mark-btn {
  grid-column: 4;
  justify-self: end;
  min-width: 88px;
  min-height: 44px;
  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-filter-options {
    grid-auto-flow: column;
    grid-auto-columns: minmax(126px, 1fr);
    grid-template-columns: none;
    gap: 8px;
    padding: 2px 0 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  #view-catalog .catalog-filter-options::-webkit-scrollbar {
    display: none;
  }

  #view-catalog .catalog-filter-options > * {
    scroll-snap-align: start;
  }

  #view-catalog .catalog-choice-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-catalog .catalog-muscle-panel.open {
    max-height: min(54dvh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  #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 .skill-card-progress {
    padding: 12px 16px 16px;
  }

  #view-skills .skill-card-desc {
    font-size: 13px;
  }

  #view-flexibility .flex-card-summary {
    padding: 12px 16px 16px;
  }

  #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: 44px;
    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,
  .reference-card-toggle svg {
    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: 44px;
    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-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: 11px;
  }

  #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: 380px) {
  .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;
  }

  .session-log-overlay .session-log-previous {
    gap: 9px;
    margin: 0 2px 8px;
    padding: 5px 0 10px;
  }

  .session-log-overlay .session-log-previous__line {
    display: grid;
    gap: 1px;
  }

  .session-log-overlay .session-log-previous__summary {
    font-size: 13px;
  }

  .session-log-overlay .session-log-previous__date {
    font-size: 10px;
  }

  .session-log-overlay .session-log-use-previous {
    min-width: 92px;
    padding-inline: 10px;
    font-size: 12px;
  }
}

@media screen and (max-width: 380px) {
  .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: 44px;
    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;
    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 {
    display: none;
  }

  #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: 1;
    display: inline-flex;
    width: 100%;
    max-width: 132px;
    min-height: 44px;
    min-width: 0;
    align-items: center;
    justify-self: start;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-surface-1) 70%, transparent);
    white-space: nowrap;
    cursor: default;
  }

  #view-programs .rest-duration-option {
    display: inline-grid;
    min-width: 44px;
    min-height: 44px;
    flex: 1 1 0;
    grid-auto-flow: column;
    gap: 3px;
    padding: 2px 7px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    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: 0;
    font-size: 9px;
    font-weight: 680;
  }

  #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: 1;
    align-self: center;
    justify-self: start;
    padding-left: 1px;
  }

  #view-programs .ex-card__rest-arrow {
    grid-column: 3;
    grid-row: 1;
    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: 1;
    justify-self: start;
  }

  #view-programs .ex-card__rest-pill .rest-timer-controls {
    grid-column: 3;
    grid-row: 1;
    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;
    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: 900px) {
  #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: 44px minmax(100px, 1fr);
    grid-template-rows: 44px;
    min-width: 0;
    min-height: 54px;
    flex: 1 1 auto;
    padding-inline: 5px 6px;
  }

  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle {
    min-height: 54px;
  }

  #view-programs .ex-card__rest-start--label,
  #view-programs .ex-card__rest-arrow {
    display: none;
  }

  #view-programs .ex-card__rest-start--icon {
    grid-row: 1;
    width: 44px;
    height: 44px;
  }

  #view-programs .ex-card__rest-start--icon .rest-divider__icon {
    width: 40px;
    height: 40px;
  }

  #view-programs .rest-duration-options,
  #view-programs .rest-duration-static {
    grid-column: 2;
    grid-row: 1;
  }

  #view-programs .rest-duration-option {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 7px;
    font-size: 11px;
  }

  #view-programs .rest-duration-option > span {
    font-size: 12px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: 44px minmax(44px, 1fr) auto;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active > .rest-divider__value,
  #view-programs .ex-card__rest-pill.rest-timer-paused > .rest-divider__value,
  #view-programs .ex-card__rest-pill .rest-timer-controls {
    grid-row: 1;
  }

  #view-programs .ex-card__rest-pill .rest-timer-btn,
  #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: 44px;
    height: 44px;
    min-width: 44px;
  }
}

@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: 44px minmax(100px, 1fr);
    column-gap: 4px;
  }

  #view-programs .rest-duration-option {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 6px;
  }

  #view-programs .rest-duration-separator,
  #view-programs .rest-duration-unit {
    font-size: 10px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: minmax(44px, 1fr) auto;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active > .rest-divider__value,
  #view-programs .ex-card__rest-pill.rest-timer-paused > .rest-divider__value {
    grid-column: 1;
  }

  #view-programs .ex-card__rest-pill .rest-timer-controls {
    grid-column: 2;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active .ex-card__rest-start--icon,
  #view-programs .ex-card__rest-pill.rest-timer-paused .ex-card__rest-start--icon {
    display: none;
  }
}

@media screen and (max-width: 340px) {
  #view-programs .ex-card__rest-pill.rest-timer-active,
  #view-programs .ex-card__rest-pill.rest-timer-paused {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 28px 44px;
    min-height: 84px;
    padding-block: 5px;
  }

  #view-programs .ex-card__rest-pill.rest-timer-active > .rest-divider__value,
  #view-programs .ex-card__rest-pill.rest-timer-paused > .rest-divider__value {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }

  #view-programs .ex-card__rest-pill .rest-timer-controls {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }
}

@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);
  overflow-anchor: none;
  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);
  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: block;
  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 summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
}

.intake-privacy summary::-webkit-details-marker {
  display: none;
}

.intake-privacy summary::after {
  content: '+';
  margin-left: auto;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
}

.intake-privacy[open] summary::after {
  content: '\2212';
}

.intake-privacy p {
  margin: 9px 0 0 33px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.intake-privacy svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: var(--color-primary);
  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-hero.is-compact {
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  padding: 18px 26px;
  border-radius: 20px;
}

.intake-hero.is-compact::after {
  width: 150px;
  height: 150px;
  top: -102px;
  border-width: 28px;
}

.intake-hero.is-compact .intake-kicker {
  margin-bottom: 5px;
  font-size: 11px;
}

.intake-hero.is-compact h1 {
  max-width: none;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.05;
}

.intake-hero.is-compact > div > p,
.intake-hero.is-compact .intake-privacy {
  display: none;
}

.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);
}

.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);
  font-size: 12px;
  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-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);
  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-review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.intake-review-back {
  margin-right: auto;
}

.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: 18px 20px 14px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }
  .intake-hero.is-compact {
    padding: 13px 20px 14px;
    border-width: 0 0 1px;
    border-radius: 0;
  }
  .intake-hero.is-compact .intake-kicker {
    margin-bottom: 3px;
  }
  .intake-hero.is-compact h1 {
    max-width: none;
    font-size: 24px;
  }
  .intake-hero h1 {
    max-width: 330px;
    font-size: clamp(32px, 9vw, 40px);
  }
  .intake-hero > div > p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
  }
  .intake-privacy {
    min-width: 0;
    width: 100%;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
  }
  .intake-privacy summary {
    min-height: 44px;
  }
  .intake-privacy p {
    margin-top: 4px;
  }
  .intake-shell {
    gap: 0;
  }
  .intake-form {
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .intake-mobile-progress {
    padding: 12px 20px 0;
  }
  .intake-autosave {
    padding: 8px 20px 0;
  }
  .intake-step {
    padding: 18px 20px 20px;
  }
  .intake-step__header {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 18px;
  }
  .intake-step__header > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .intake-step__header h2 {
    font-size: 27px;
  }
  .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-review-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .intake-review-back {
    width: 100%;
    margin-right: 0;
    order: 3;
  }
  .intake-review-actions .intake-export--primary {
    order: 1;
  }
  .intake-review-actions .intake-export:not(.intake-export--primary) {
    order: 2;
  }
  .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 {
    grid-template-columns: 1fr;
  }
  .intake-choice-grid--compact,
  .intake-choice-grid--days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .intake-choice-grid--compact {
    gap: 7px;
  }
  .intake-choice-grid--compact .intake-choice {
    min-height: 56px;
    grid-template-columns: 19px minmax(0, 1fr);
    padding-inline: 10px;
    gap: 8px;
  }
  .intake-choice-grid--compact .intake-choice__control {
    width: 19px;
    height: 19px;
  }
  .intake-choice-grid--compact .intake-choice__copy strong {
    font-size: 13px;
    line-height: 1.22;
  }
  .intake-actions {
    gap: 8px;
    padding-inline: 14px;
  }
  .intake-back {
    min-width: 72px;
    padding-inline: 11px;
  }
  .intake-next {
    min-width: 0;
    padding-inline: 11px;
    font-size: 14px;
    white-space: nowrap;
  }
  .intake-next svg {
    width: 16px;
    height: 16px;
  }
  .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: 12px;
  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: 11px;
  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: 11px;
  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;
}

@media screen and (max-width: 900px) {
  #view-science .readiness-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 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: 11px;
  }

  #view-science .readiness-chart__legend {
    right: 6%;
    bottom: 28px;
    justify-content: center;
    gap: 6px 12px;
  }

  #view-science .readiness-signal-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: 11px;
  }

  #view-science .readiness-chart__legend {
    font-size: 11px;
  }
}

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

/* Science V4.52: focused topic reader */
#view-science .science-topic-nav {
  display: grid;
  width: 100%;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 var(--space-5);
  padding: 8px;
  overflow: visible;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

#view-science .science-topic-tab {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - 3px);
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), color var(--transition-interactive);
}

#view-science .science-topic-tab[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 12%, var(--color-surface-2));
  color: var(--accent);
}

#view-science .science-topic-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#view-science .science-topic-outlet {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  scroll-margin-top: 96px;
}

#view-science .science-topic-outlet > .science-card {
  width: 100%;
  min-width: 0;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  #view-science .science-topic-tab:hover {
    border-color: var(--border-hard);
    color: var(--ink-primary);
  }
}

@media screen and (max-width: 600px) {
  #view-science .science-topic-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 var(--space-4);
    padding: 6px;
  }

  #view-science .science-topic-tab:last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-science .science-topic-tab {
    transition: none;
  }
}

/* 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: 12px; line-height: 1.3; }

  .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 {
    --timer-progress: 0deg;
    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-progress.is-stopwatch {
    width: 100%;
    min-height: 190px;
    aspect-ratio: auto;
    padding: 28px 0;
    border-radius: 0;
    background: none;
    contain: none;
  }

  .session-timer-progress.is-stopwatch .session-timer-progress-inner {
    width: 100%;
    height: auto;
    border-radius: 0;
    background: transparent;
  }

  .session-timer-progress.is-stopwatch .session-timer-progress-inner strong {
    width: 100%;
    font-size: clamp(36px, 11vw, 76px);
    letter-spacing: -0.065em;
    white-space: nowrap;
  }

  .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-runner { gap: 12px; }
  .session-timer-progress.is-stopwatch {
    min-height: 128px;
    padding-block: 16px;
  }
  .session-timer-laps { max-height: 92px; }
  .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; }
}

/* Programs reuses the canonical Timer workspace inside one contextual modal.
   The workspace itself moves between this host and the Timer route, so setup,
   persistence, sounds, and the runner cannot drift into separate products. */
.timer-context-overlay[hidden] { display: none !important; }

.timer-context-overlay {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
}

.timer-context-backdrop {
  position: absolute;
  inset: 0;
  opacity: var(--timer-context-backdrop-opacity, 1);
  background: rgb(4 5 8 / 76%);
  backdrop-filter: blur(8px);
  transition: opacity 180ms ease;
}

.timer-context-panel {
  position: relative;
  display: flex;
  width: min(100%, 1040px);
  max-height: min(94dvh, 900px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-hard);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 28px 90px rgb(0 0 0 / 48%);
  transform: translate3d(0, var(--timer-context-drag-y, 0px), 0);
}

.timer-context-panel.is-settling,
.timer-context-panel.is-dismissing {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timer-context-header {
  position: relative;
  display: flex;
  min-height: 68px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--color-surface-2);
}

.timer-context-drag-handle { display: none; }

.timer-context-header > div { display: grid; gap: 2px; }
.timer-context-header span { color: var(--accent); font-size: 10px; font-weight: 820; letter-spacing: 0.12em; text-transform: uppercase; }
.timer-context-header h2 { margin: 0; font-size: 20px; }

.timer-context-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--ink-secondary);
  cursor: pointer;
}

.timer-context-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.timer-context-workspace-host {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.timer-context-workspace-host .container--wide.timer-workspace {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-bottom: 18px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.timer-context-workspace-host .timer-workspace-hero { display: none; }
.timer-context-workspace-host .timer-workspace .timer-mode-tabs { top: 0; }

@media screen and (max-width: 720px) {
  .timer-context-overlay { padding: 0; place-items: end center; }
  .timer-context-panel {
    width: 100%;
    max-height: calc(100dvh - 10px);
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .timer-context-header {
    padding-top: 20px;
    touch-action: none;
  }
  .timer-context-drag-handle {
    position: absolute;
    top: 7px;
    left: 50%;
    display: block;
    width: 38px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-hard);
    transform: translateX(-50%);
  }
  .timer-context-workspace-host .container--wide.timer-workspace { margin-top: 0; }
}

/* Phone sound choices are a true sheet. The header owns the swipe-down handle
   and the opaque paint boundary, while only the option list can scroll. */
.modal-swipe-dismiss-panel {
  translate: 0 var(--modal-surface-drag-y, 0px);
}

.modal-swipe-dismiss-panel.is-settling,
.modal-swipe-dismiss-panel.is-dismissing {
  transition: translate 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .modal-swipe-dismiss-panel,
  .modal-swipe-dismiss-panel.is-settling,
  .modal-swipe-dismiss-panel.is-dismissing {
    transition: none;
  }
}

@media screen and (max-width: 768px) {
  .modal-swipe-dismiss-header {
    position: relative;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .modal-swipe-dismiss-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 34px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-hard);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

.timer-sound-sheet-backdrop {
  opacity: var(--timer-sound-sheet-backdrop-opacity, 1);
  transition: opacity 180ms ease;
}

.timer-sound-sheet-panel {
  transform: translate3d(0, var(--timer-sound-sheet-drag-y, 0px), 0);
}

.timer-sound-sheet-panel.is-settling,
.timer-sound-sheet-panel.is-dismissing {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timer-sound-sheet-drag-handle { display: none; }

@media screen and (max-width: 480px) {
  .timer-sound-sheet-header {
    min-height: 70px;
    padding-top: 16px;
    touch-action: none;
    contain: paint;
  }
  .timer-sound-sheet-drag-handle {
    position: absolute;
    top: 7px;
    left: 50%;
    display: block;
    width: 38px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-hard);
    transform: translateX(-50%);
  }
}

/* The active Timer dock and Start new action share one compact height. Swiping
   the dock body left reveals a guarded destructive action underneath. */
.session-timer-dock {
  --session-timer-dock-swipe-x: 0px;
  position: fixed;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: color-mix(in srgb, var(--signal-danger) 82%, var(--color-surface));
  isolation: isolate;
}

.session-timer-dock-face {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border-hard));
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  transform: translate3d(var(--session-timer-dock-swipe-x), 0, 0);
}

.session-timer-dock:not(.is-swiping) .session-timer-dock-face {
  transition: transform 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.session-timer-dock-stop-hint {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  display: grid;
  width: 48%;
  place-items: center;
  padding-inline: 8px;
  background: color-mix(in srgb, var(--signal-danger) 82%, var(--color-surface));
  color: var(--ink-on-accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.04em;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 120ms ease;
}

.session-timer-dock.is-swiping .session-timer-dock-stop-hint { opacity: 1; }
.session-timer-dock-open { touch-action: pan-y; }

.session-timer-dock-face > .session-timer-dock-toggle,
.session-timer-dock-face > .session-timer-dock-open {
  align-self: center;
}

.session-timer-dock-face > .session-timer-dock-open {
  height: 44px;
}

.session-timer-dock-copy {
  align-content: center;
  align-self: center;
  row-gap: 1px;
}

.session-timer-dock-cue { align-self: center; }

.session-timer-dock-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0 var(--session-timer-dock-progress, 0%), transparent var(--session-timer-dock-progress, 0%) 100%);
  opacity: 0;
  pointer-events: none;
}

.session-timer-dock.has-finite-progress .session-timer-dock-progress { opacity: 0.86; }

@media screen and (max-width: 720px) {
  #view-timer.view.active .timer-mobile-start-dock .timer-start-button,
  body.session-timer-running:not(.session-timer-open) #view-timer.view.active .timer-mobile-start-dock .timer-start-button,
  body.session-timer-running:not(.session-timer-open) .session-timer-dock {
    height: 50px;
    min-height: 50px;
  }
  body.session-timer-running:not(.session-timer-open) .session-timer-dock { padding: 0; }
  body.session-timer-running:not(.session-timer-open) .session-timer-dock-face {
    height: 50px;
    min-height: 50px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px;
    padding: 5px;
  }
  body.session-timer-running:not(.session-timer-open) .session-timer-dock-toggle {
    width: 38px;
    height: 38px;
  }
  body.session-timer-running:not(.session-timer-open) .session-timer-dock-open {
    height: 38px;
    min-height: 38px;
  }
}

@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 {
  position: sticky;
  z-index: 60;
  top: 61px;
  margin: 0;
  padding: 10px 22px;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: var(--border-hard);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: 0 10px 24px rgb(0 0 0 / 12%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.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%);
}

@media screen and (max-width: 720px) {
  .timer-workspace .timer-mode-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 8px 18px;
  }
}

@media screen and (max-width: 480px) {
  .timer-workspace .timer-mode-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding-inline: 12px;
  }

  .timer-workspace .timer-mode-tabs > button {
    min-height: 48px;
    padding-inline: 3px;
  }

  .timer-workspace .timer-mode-tabs strong { font-size: 12px; }

  .timer-block-card:has(.timer-workspace-sound-picker [aria-expanded='true']) .timer-block-card__content {
    transform: none;
  }

  .timer-workspace-sound-picker .timer-workspace-sound-menu { max-height: min(52dvh, 420px); }
}

html.modal-surface-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

body.timer-sound-sheet-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.timer-sound-sheet[hidden] { display: none !important; }

.timer-sound-sheet {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
}

.timer-sound-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(4 5 8 / 76%);
  backdrop-filter: blur(8px);
}

.timer-sound-sheet-panel {
  position: relative;
  display: flex;
  width: min(100%, 440px);
  max-height: min(82dvh, 620px);
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border-hard);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--ink-primary);
  box-shadow: 0 28px 90px rgb(0 0 0 / 48%);
}

.timer-sound-sheet-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  background: var(--color-surface-2);
}

.timer-sound-sheet-header h2 {
  margin: 0;
  color: var(--ink-primary);
  font-size: 18px;
  line-height: 1.2;
}

.timer-sound-sheet-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--ink-secondary);
  cursor: pointer;
}

.timer-sound-sheet-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.timer-sound-sheet-content {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.timer-sound-sheet-content .timer-workspace-sound-menu.is-sheet-content {
  position: static;
  display: block;
  width: 100%;
  max-height: none;
  overflow: visible;
  z-index: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media screen and (max-width: 480px) {
  .timer-sound-sheet {
    padding: 0;
    place-items: end center;
  }

  .timer-sound-sheet-panel {
    width: 100%;
    max-height: calc(88dvh - env(safe-area-inset-top));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }

  .timer-sound-sheet-content { padding-bottom: env(safe-area-inset-bottom); }
}

.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;
}

@media screen and (min-width: 481px) {
  .timer-workspace-sound-picker .timer-workspace-sound-menu.is-viewport-positioned {
    position: fixed;
    z-index: 1320;
    top: var(--timer-sound-menu-top);
    right: auto;
    bottom: auto;
    left: var(--timer-sound-menu-left);
    width: var(--timer-sound-menu-width);
    max-height: var(--timer-sound-menu-max-height);
  }
}

.timer-block-sound > span {
  color: var(--ink-muted);
  font-size: 12px;
  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;
  }
}

/* Timer modes keep the explicit segmented choice on wider screens. On compact
   screens the selected mode and its value share one row, so Stop after does
   not consume two full control rows before the next setting. */
.soma-picker.timer-limit-picker { display: none; }
.timer-limit-layout { position: relative; }

@media screen and (max-width: 640px) {
  .timer-limit-segmented { display: none; }

  .timer-limit-layout {
    display: grid;
    grid-template-columns: minmax(126px, 0.62fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--color-surface-2);
  }

  .timer-limit-layout.timer-limit-layout--time {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .timer-limit-layout.timer-limit-layout--time .timer-limit-picker .soma-picker__trigger {
    grid-template-columns: minmax(0, 1fr) 38px;
    padding-left: 10px;
  }

  .timer-limit-layout.timer-limit-layout--time .timer-limit-picker__trigger small {
    display: none;
  }

  .timer-limit-layout.timer-limit-layout--time .timer-limit-picker__affordance {
    width: 38px;
  }

  .timer-limit-layout.timer-limit-layout--time .timer-limit-config .timer-stop-time {
    width: 100%;
  }

  .timer-limit-layout:has(.timer-limit-picker.is-open) { z-index: 78; }

  .soma-picker.timer-limit-picker {
    display: block;
    min-width: 0;
  }

  .timer-limit-picker .soma-picker__trigger {
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    overflow: hidden;
    padding: 0 0 0 12px;
    border-color: var(--border-hard);
    border-radius: 11px;
    background: var(--bg-card);
    cursor: ns-resize;
    touch-action: pan-x;
  }

  .timer-limit-picker .soma-picker__trigger > span {
    display: grid;
    min-width: 0;
    gap: 3px;
    text-align: left;
    white-space: normal;
  }

  .timer-limit-picker .soma-picker__trigger strong {
    color: var(--ink-primary);
    font-size: 13px;
  }

  .timer-limit-picker .soma-picker__trigger small {
    overflow: hidden;
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timer-limit-picker__affordance {
    display: grid;
    width: 44px;
    height: 100%;
    min-height: 62px;
    place-items: center;
    border-left: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--accent) 8%, var(--color-surface-2));
    color: var(--accent);
  }

  .timer-limit-picker__affordance svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 160ms ease;
  }

  .timer-limit-picker.is-open .timer-limit-picker__affordance svg {
    transform: rotate(180deg);
  }

  .timer-limit-picker.is-gesture-active .soma-picker__trigger {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border-hard));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  .timer-limit-picker .soma-picker__menu {
    min-width: min(244px, calc(100vw - 32px));
    padding: 5px;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
  }

  .timer-limit-picker .soma-picker__option {
    min-height: 48px;
    scroll-snap-align: center;
    border-radius: 9px;
    font-size: 13px;
  }

  .timer-limit-layout .timer-limit-config,
  .timer-limit-layout .timer-limit-config.timer-limit-config--time {
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    min-height: 64px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .timer-limit-layout .timer-limit-config > span:not(.session-timer-stepper):not(.timer-infinity) {
    display: none;
  }

  .timer-limit-layout .timer-limit-config .session-timer-stepper {
    width: 108px;
    flex-basis: 108px;
  }

  .timer-limit-layout .timer-limit-config .timer-stop-time {
    width: 126px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .timer-limit-layout .timer-stop-time-field { gap: 3px; }
  .timer-limit-layout .timer-stop-time-field > label { font-size: 12px; }
  .timer-limit-layout .timer-limit-config--unlimited { width: 48px; justify-content: center; }
}

@media screen and (max-width: 359px) {
  .timer-stop-time { grid-template-columns: minmax(0, 1fr); }
  .timer-limit-layout .timer-limit-config .timer-stop-time {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timer-limit-picker .soma-picker__trigger small {
    display: none;
  }

  .timer-limit-layout.timer-limit-layout--time {
    grid-template-columns: 116px 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(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.timer-preset-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.timer-preset-field > span,
.timer-preset-field > label {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.timer-preset-picker {
  position: relative;
  min-width: 0;
}

.timer-preset-combobox {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 46px;
  overflow: hidden;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--color-surface);
}

.timer-preset-combobox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.timer-preset-combobox #timer-preset-name {
  width: 100%;
  min-height: 46px;
  min-width: 0;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-primary);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.timer-preset-trigger {
  display: grid;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--border-hard);
  border-radius: 0;
  background: transparent;
  color: var(--ink-primary);
  font-size: 14px;
}

.timer-preset-trigger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.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;
}

.timer-sound-compact-icon { display: none; }

@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'],
#timer-multi-overlay .session-timer-stepper input[data-timer-wheel='true'],
.program-studio .program-studio-field--sets input[data-timer-wheel='true'],
.program-studio .program-studio-field--effort 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));
  }
}

/* V4.50 Previous-session carry-forward
   Prior performance is quiet context, while copying it is one explicit action.
   The row stays shell-free so the logger does not become a stack of cards. */
.session-log-previous {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: -2px 2px 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border-soft);
}

.session-log-previous[hidden] {
  display: none;
}

.session-log-previous__copy,
.session-log-previous__line {
  min-width: 0;
}

.session-log-previous__copy {
  display: grid;
  gap: 3px;
}

.session-log-previous__label {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.session-log-previous__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.session-log-previous__summary {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-log-previous__date {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  white-space: nowrap;
}

.session-log-use-previous {
  min-width: 104px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 750;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.session-log-use-previous:active {
  transform: scale(0.97);
}

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

.session-log-use-previous.is-applied {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .session-log-use-previous:hover {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-log-use-previous {
    transition: none;
  }
}

/* End V4.50 Previous-session carry-forward -------------------- */

/* V4.51 Active workout companion
   Start session becomes an execution aid instead of a scroll shortcut. The
   companion stays transient and delegates logging and rest to their existing
   controls, keeping one source of truth for both behaviors. */
body.program-session-active #view-programs {
  padding-bottom: 128px;
}

.program-session-companion {
  position: fixed;
  z-index: 520;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100% - 32px), 900px);
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--ink-primary);
  box-shadow: var(--shadow-lg);
  animation: program-session-companion-in 240ms var(--motion-enter) both;
}

.program-session-companion[hidden] {
  display: none;
}

.program-session-companion__progress {
  height: 3px;
  overflow: hidden;
  background: var(--border-soft);
}

.program-session-companion__progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--motion-base) var(--motion-standard);
}

.program-session-companion__body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 13px 14px 14px 18px;
}

.program-session-companion__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.program-session-companion__step {
  color: var(--accent);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.program-session-companion__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-primary);
  font-size: var(--text-base);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-session-companion__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.3;
}

.program-session-companion__meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-session-companion__meta > span + span {
  padding-left: 8px;
  border-left: 1px solid var(--border-soft);
}

.program-session-companion__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.program-session-companion__icon-action,
.program-session-companion__action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 760;
  cursor: pointer;
}

.program-session-companion__icon-action {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.program-session-companion__action--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.program-session-companion__action.is-running {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 12%, var(--color-surface-2));
  color: var(--accent);
}

.program-session-companion__close {
  color: var(--ink-muted);
}

.program-session-companion button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.program-session-companion button:disabled {
  opacity: 0.34;
  cursor: default;
}

.program-session-companion button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#view-programs .session-start-btn.is-active {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface-2));
  color: var(--accent);
  box-shadow: none;
}

#view-programs .session-start-btn.is-active .session-start-btn__icon {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

#view-programs .ex-card.is-session-current {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-hard));
  box-shadow: inset 3px 0 0 var(--accent);
}

@keyframes program-session-companion-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (hover: hover) and (pointer: fine) {
  .program-session-companion__icon-action:not(:disabled):hover,
  .program-session-companion__action:not(:disabled):not(.program-session-companion__action--primary):hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 8%, var(--color-surface-2));
    color: var(--accent);
  }

  .program-session-companion__action--primary:hover {
    background: var(--accent-hot);
  }
}

@media screen and (max-width: 720px) {
  body.program-session-active #view-programs {
    padding-bottom: calc(138px + env(safe-area-inset-bottom));
  }

  .program-session-companion {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
  }

  .program-session-companion__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .program-session-companion__name {
    font-size: var(--text-sm);
  }

  .program-session-companion__meta {
    font-size: 10px;
  }

  .program-session-companion__controls {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1.2fr) minmax(0, 0.9fr) 44px;
    gap: 4px;
  }

  .program-session-companion__action {
    min-width: 0;
    padding-inline: 8px;
  }

  @keyframes program-session-companion-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (max-width: 340px) {
  .program-session-companion__action {
    gap: 5px;
    padding-inline: 6px;
    font-size: 11px;
  }

  .program-session-companion__action svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .program-session-companion {
    animation: none;
  }

  .program-session-companion__progress > span {
    transition: none;
  }
}

/* End V4.51 Active workout companion -------------------------- */

/* V4.52 Program Studio and canonical custom-program execution */
body.program-studio-open {
  overflow: hidden;
}

.program-studio-overlay[hidden] {
  display: none !important;
}

.program-studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 760;
  display: grid;
  padding: 24px;
  place-items: center;
}

.program-studio-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-sunken) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.program-studio {
  position: relative;
  width: min(100%, 1320px);
  max-height: min(94dvh, 980px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-hard);
  border-radius: 24px;
  background: var(--color-surface);
  color: var(--ink-primary);
  box-shadow: 0 32px 110px color-mix(in srgb, var(--bg-sunken) 74%, transparent);
  animation: program-studio-enter 260ms var(--ease-standard);
}

#program-studio-app {
  display: flex;
  min-height: min(86dvh, 820px);
  flex-direction: column;
}

.program-studio-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.program-studio-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.program-studio-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
}

.program-studio-title__compact {
  display: none;
}

.program-studio-close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  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: 27px;
  line-height: 1;
  cursor: pointer;
}

.program-studio-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  gap: 10px;
  align-items: end;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--color-surface-2);
}

.program-studio-origin-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--accent) 5%, var(--color-surface));
  color: var(--ink-secondary);
}

.program-studio-origin-notice > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
}

.program-studio-origin-notice > div {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 9px;
  align-items: baseline;
}

.program-studio-origin-notice span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.program-studio-origin-notice strong {
  color: var(--ink-primary);
  font-size: 12px;
}

.program-studio-origin-notice p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.program-studio-field {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 7px;
  margin: 0;
  color: var(--ink-primary);
  font: inherit;
}

.program-studio-field > span {
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.program-studio-field > span small {
  margin-left: 5px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.program-studio-field--exercise > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-studio-field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  outline: 0;
  background: var(--bg-base);
  color: var(--ink-primary);
  font: inherit;
  font-size: 14px;
}

.program-studio-field input::placeholder {
  color: var(--ink-muted);
}

.program-studio-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.program-studio-note-trigger {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--bg-base);
  color: var(--ink-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.program-studio-note-trigger:hover,
.program-studio-note-trigger:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-base));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  outline: 0;
}

.program-studio-note-trigger__text {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-primary);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-studio-note-trigger__meta {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.program-studio-note-trigger > svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.program-studio-day-picker {
  display: none;
}

.program-studio-program-picker {
  width: min(100%, 560px);
}

.program-studio-program-picker .soma-picker__label {
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.program-studio-program-picker .soma-picker__label small {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.program-studio-program-combobox {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 48px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--bg-base);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.program-studio-program-combobox:focus-within,
.program-studio-program-picker.is-open .program-studio-program-combobox {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.program-studio-program-combobox > input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 13px;
  border: 0;
  border-radius: 10px 0 0 10px;
  outline: 0;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 680;
}

.program-studio-program-combobox > input::placeholder {
  color: var(--ink-muted);
}

.program-studio-program-combobox > .soma-picker__trigger {
  width: 48px;
  min-height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--border-soft);
  border-radius: 0 10px 10px 0;
  background: var(--color-surface-2);
}

.program-studio-program-combobox > .soma-picker__trigger:hover,
.program-studio-program-combobox > .soma-picker__trigger:focus-visible,
.program-studio-program-picker.is-open .program-studio-program-combobox > .soma-picker__trigger {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-2));
  box-shadow: none;
}

.program-studio-program-picker .soma-picker__menu {
  top: calc(100% + 7px);
}

.program-studio-program-picker__empty {
  margin: 0;
  padding: 10px;
  color: var(--ink-muted);
  font-size: 11px;
}

.program-studio-program-picker__new {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-top: 6px;
  padding-block: 10px !important;
  border: 1px dashed color-mix(in srgb, var(--accent) 58%, var(--border-hard)) !important;
  background: color-mix(in srgb, var(--accent) 7%, var(--color-surface-2)) !important;
  color: var(--accent);
}

.program-studio-program-picker__new > svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 13%, var(--color-surface-2));
}

.program-studio-program-picker__new > span {
  display: grid;
  gap: 2px;
}

.program-studio-program-picker__new strong {
  color: var(--accent);
  font-size: 12px;
}

.program-studio-program-picker__new small {
  color: var(--ink-muted);
  font-size: 10px;
}

.program-studio-program-picker__state {
  margin-left: auto;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.program-studio-days button,
.program-studio-day-actions button,
.program-studio-order-actions button,
.program-studio-exercise__actions button,
.program-studio-add-block,
.program-studio-add-exercise,
.program-studio-footer button {
  min-height: 44px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}


.program-studio-workspace {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: 210px minmax(0, 1fr);
}

.program-studio-workspace.is-single-day {
  grid-template-columns: minmax(0, 1fr);
}

.program-studio-days {
  position: sticky;
  top: 91px;
  align-self: start;
  display: grid;
  max-height: calc(94dvh - 215px);
  gap: 7px;
  overflow-y: auto;
  padding: 18px 14px 24px;
  border-right: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface-2) 58%, var(--color-surface));
}

.program-studio-day-tab {
  display: grid;
  min-width: 0;
  gap: 2px;
  justify-items: start;
  padding: 10px 12px;
  text-align: left;
}

.program-studio-day-tab span {
  color: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.program-studio-day-tab strong {
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-studio-day-tab.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface-2));
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.program-studio-add-day {
  border-style: dashed !important;
  color: var(--accent) !important;
}

.program-studio-day-editor {
  min-width: 0;
  padding: 22px 24px 28px;
}

.program-studio-day-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.program-studio-day-identity {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(120px, 0.42fr) minmax(220px, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  background: var(--bg-base);
}

.program-studio-day-identity .program-studio-field {
  gap: 3px;
  padding: 8px 12px;
}

.program-studio-day-identity .program-studio-field + .program-studio-field {
  border-left: 1px solid var(--border-soft);
}

.program-studio-day-identity .program-studio-field input {
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
}

.program-studio-day-identity .program-studio-field input:focus {
  box-shadow: none;
}

.program-studio-day-fields {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(130px, 0.45fr) minmax(240px, 1fr);
  gap: 10px;
}

.program-studio-day-actions,
.program-studio-order-actions,
.program-studio-exercise__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.program-studio-block__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.program-studio-day-actions button {
  padding-inline: 13px;
}

.program-studio-delete,
.program-studio-delete-program {
  color: var(--signal-alert) !important;
}

.program-studio-blocks {
  display: grid;
  gap: 14px;
}

.program-studio-block-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px dashed var(--border-hard);
  border-radius: 17px;
  background: color-mix(in srgb, var(--accent) 4%, var(--color-surface-2));
}

.program-studio-block-empty__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 12%, var(--color-surface-2));
  color: var(--accent);
}

.program-studio-block-empty h3,
.program-studio-block-empty p {
  margin: 0;
}

.program-studio-block-empty h3 {
  color: var(--ink-primary);
  font-size: 15px;
}

.program-studio-block-empty p {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.program-studio-block-empty button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 16px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  background: var(--accent);
  color: var(--ink-on-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.program-studio-block {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 17px;
  background: var(--color-surface-2);
}

.program-studio-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.program-studio-block__identity {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.program-studio-block-identity-control {
  display: grid;
  min-width: min(560px, 46vw);
  flex: 1 1 560px;
  grid-template-columns: minmax(180px, 1fr) auto;
  overflow: visible;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--bg-base);
}

.program-studio-block-identity-control .program-studio-field--name {
  min-width: 0;
}

.program-studio-block-identity-control .program-studio-field--name > input {
  min-height: 44px;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: transparent;
}

.program-studio-block-identity-control .program-studio-field--name > input:focus {
  box-shadow: none;
}

.program-studio-kind-wrap {
  position: relative;
  display: grid;
}

.program-studio-block-identity-control .program-studio-kind-trigger {
  border: 0;
  border-left: 1px solid var(--border-soft);
  border-radius: 0 10px 10px 0;
}

.program-studio-validation-summary {
  display: grid;
  gap: 2px;
  margin: 14px 24px 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--signal-alert) 52%, var(--border-hard));
  border-radius: 11px;
  background: color-mix(in srgb, var(--signal-alert) 8%, var(--color-surface-2));
  color: var(--signal-alert);
}

.program-studio-validation-summary strong,
.program-studio-validation-summary p {
  margin: 0;
}

.program-studio-validation-summary strong {
  font-size: 12px;
}

.program-studio-validation-summary p {
  color: var(--ink-secondary);
  font-size: 11px;
}

.program-studio-schedule {
  margin: 14px 24px 0;
  overflow: visible;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface-2);
}

.program-studio-schedule__toggle {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 38px minmax(0, 1fr) auto 20px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.program-studio-schedule__toggle > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--color-surface));
  color: var(--accent);
}

.program-studio-schedule__toggle > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.program-studio-schedule__toggle small {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.program-studio-schedule__toggle strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-studio-schedule__toggle > span:nth-child(3) {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
}

.program-studio-schedule__toggle > svg {
  transition: transform var(--transition-interactive);
}

.program-studio-schedule.is-open .program-studio-schedule__toggle > svg {
  transform: rotate(180deg);
}

.program-studio-schedule__toggle:hover,
.program-studio-schedule__toggle:focus-visible {
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
  outline: 0;
}

.program-studio-schedule > .program-studio-field-error {
  margin: -3px 14px 11px 62px;
}

.program-studio-schedule__body {
  display: grid;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--border-soft);
}

.program-studio-schedule__body[hidden] {
  display: none;
}

.program-studio-schedule__intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.program-studio-schedule__intro h3,
.program-studio-schedule__intro p,
.program-studio-schedule-weekly p,
.program-studio-schedule-dates h4,
.program-studio-schedule-dates p,
.program-studio-schedule-preview h4,
.program-studio-schedule-preview p {
  margin: 0;
}

.program-studio-schedule__intro h3 {
  color: var(--ink-primary);
  font-size: 15px;
}

.program-studio-schedule__intro p,
.program-studio-schedule-weekly p,
.program-studio-schedule-dates p,
.program-studio-schedule-preview p {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.program-studio-schedule-mode {
  width: min(100%, 270px);
  flex: 0 0 270px;
}

.program-studio-schedule-mode .soma-picker__trigger,
.program-studio-schedule-assignment__picker .soma-picker__trigger,
.program-studio-schedule-date__picker .soma-picker__trigger {
  min-height: 44px;
  border-radius: 10px;
  background: var(--bg-base);
}

.program-studio-schedule-weekly {
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-base));
}

.program-studio-schedule-weekly strong {
  color: var(--ink-primary);
  font-size: 12px;
}

.program-studio-schedule-rotation,
.program-studio-schedule-weeks,
.program-studio-schedule-dates,
.program-studio-schedule-dates__list {
  display: grid;
  gap: 12px;
}

.program-studio-schedule-anchor {
  width: min(100%, 280px);
}

.program-studio-schedule-anchor > small {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.4;
}

.program-studio-schedule-week {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-base);
}

.program-studio-schedule-week > header,
.program-studio-schedule-dates > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.program-studio-schedule-week > header > .program-studio-field {
  width: min(100%, 320px);
}

.program-studio-schedule-week__actions {
  display: flex;
  gap: 6px;
}

.program-studio-schedule-week__actions button,
.program-studio-schedule-dates > header button,
.program-studio-schedule-date > button,
.program-studio-schedule-add-week {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}

.program-studio-schedule-week__actions button:first-child,
.program-studio-schedule-week__actions button:nth-child(2),
.program-studio-schedule-date > button {
  width: 44px;
  padding: 0;
}

.program-studio-schedule-week__actions button:disabled {
  opacity: 0.32;
  cursor: default;
}

.program-studio-schedule-add-week {
  justify-self: start;
  border-style: dashed;
  color: var(--accent);
}

.program-studio-schedule-week__assignments {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.program-studio-schedule-assignment {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.program-studio-schedule-assignment > span {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.program-studio-schedule-assignment__picker .soma-picker__trigger {
  min-width: 0;
  padding: 8px 9px;
  font-size: 10px;
}

.program-studio-schedule-assignment__picker .soma-picker__trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-studio-schedule-assignment__picker .soma-picker__menu,
.program-studio-schedule-date__picker .soma-picker__menu {
  min-width: min(320px, calc(100vw - 48px));
}

.program-studio-schedule-dates {
  padding-top: 4px;
}

.program-studio-schedule-dates h4,
.program-studio-schedule-preview h4 {
  color: var(--ink-primary);
  font-size: 13px;
}

.program-studio-schedule-date {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr) 44px;
  gap: 8px;
  align-items: end;
}

.program-studio-schedule-empty {
  padding: 12px;
  border: 1px dashed var(--border-soft);
  border-radius: 10px;
  text-align: center;
}

.program-studio-schedule-preview {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.program-studio-schedule-preview > div > span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.program-studio-schedule-preview ol {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-studio-schedule-preview li {
  display: grid;
  min-width: 0;
  min-height: 70px;
  gap: 5px;
  align-content: start;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-base);
}

.program-studio-schedule-preview li[data-status='scheduled'] {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-base));
}

.program-studio-schedule-preview time {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 780;
}

.program-studio-schedule-preview li > span {
  overflow: hidden;
  color: var(--ink-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.program-studio-field-error {
  display: block;
  color: var(--signal-alert);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.program-studio [aria-invalid='true'] {
  border-color: var(--signal-alert) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-alert) 15%, transparent) !important;
}

.program-studio-exercise.has-validation-error {
  border-color: color-mix(in srgb, var(--signal-alert) 62%, var(--border-hard));
}

.program-studio-exercise.has-validation-error .program-studio-exercise-toggle__index,
.program-studio-exercise.has-validation-error .program-studio-exercise__summary small {
  color: var(--signal-alert);
}

.program-studio-program-combobox:has([aria-invalid='true']),
.program-studio-block-identity-control:has([aria-invalid='true']),
.program-studio-day-identity:has([aria-invalid='true']) {
  border-color: var(--signal-alert);
}

.program-studio-block__index {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.program-studio-block__summary,
.program-studio-block-toggle {
  display: none;
}

.program-studio-block__summary {
  min-width: 0;
}

.program-studio-block__summary strong,
.program-studio-block__summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-studio-block__summary strong {
  color: var(--ink-primary);
  font-size: 13px;
}

.program-studio-block__summary small {
  color: var(--ink-muted);
  font-size: 11px;
}

.program-studio-block-toggle {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--bg-base);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.program-studio-block-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  transition: transform var(--transition-interactive);
}

.program-studio-block-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.program-studio-block__body[hidden] {
  display: none;
}

.program-studio-kind-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--bg-base);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.program-studio-kind-trigger > svg:first-child {
  color: var(--accent);
}

.program-studio-kind-trigger > svg:last-child {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  transition: transform var(--transition-interactive);
}

.program-studio-kind-trigger[aria-expanded='true'] {
  border-color: var(--accent);
  color: var(--accent);
}

.program-studio-kind-trigger[aria-expanded='true'] > svg:last-child {
  transform: rotate(180deg);
}

.program-studio-kind-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 7px);
  left: 62px;
  display: grid;
  width: min(360px, calc(100vw - 70px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--border-hard);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.program-studio-kind-menu[hidden] {
  display: none;
}

.program-studio-kind-option {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.program-studio-kind-option span {
  color: var(--accent);
}

.program-studio-kind-option strong {
  font-size: 11px;
}

.program-studio-kind-option.is-selected {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-2));
  color: var(--accent);
}

.program-studio-order-actions button,
.program-studio-exercise__actions button {
  display: grid;
  width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
}

.program-studio-order-actions button:disabled,
.program-studio-exercise__actions button:disabled,
.program-studio-day-actions button:disabled {
  opacity: 0.32;
  cursor: default;
}

.program-studio-suggestions {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-hard);
  border-radius: 13px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.program-studio-suggestions[hidden] {
  display: none;
}

.program-studio-suggestions button {
  display: grid;
  width: 100%;
  min-height: 44px;
  gap: 2px;
  align-content: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.program-studio-exercise-suggestions button strong {
  font-size: 14px;
  line-height: 1.25;
}

.program-studio-exercise-suggestions button {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 5px 8px;
}

.program-studio-exercise-suggestion__thumb {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--color-surface-2);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.program-studio-exercise-suggestion__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  object-fit: contain;
  padding: 2px;
}

.program-studio-exercise-suggestion__thumb.is-image-backed .program-studio-exercise-suggestion__glyph {
  visibility: hidden;
}

.program-studio-exercise-suggestion__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.program-studio-exercise-suggestion__copy > span {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.3;
}

.program-studio-exercises {
  display: grid;
  gap: 7px;
}

.program-studio-exercise {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(190px, 1.2fr) 70px minmax(110px, 0.55fr) minmax(88px, 0.4fr) minmax(150px, 0.8fr) 194px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--bg-base);
}

.program-studio-exercise-toggle {
  display: none;
}

.program-studio-exercise__mobile-header {
  display: none;
}

.program-studio-exercise__body {
  display: contents;
}

.program-studio-exercise__prescription {
  display: contents;
}

.program-studio-field-help {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin: -6px -5px -6px 2px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-muted);
  vertical-align: middle;
  cursor: help;
}

.program-studio-field-help:hover,
.program-studio-field-help:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface-2));
  color: var(--accent);
  outline: 0;
}

.program-studio-prescription-mode {
  color: var(--ink-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.program-studio-exercise__section-heading,
.program-studio-exercise__action-label {
  display: none;
}

.program-studio-exercise.is-guided {
  grid-template-columns: 32px minmax(210px, 1.25fr) minmax(155px, 0.65fr) minmax(190px, 0.9fr) 194px;
}

.program-studio-exercise__index {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  min-height: 44px;
  align-self: end;
  place-items: center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 760;
}

.program-studio-exercise__main {
  display: grid;
  min-width: 0;
  grid-row: 1;
  grid-column: 2;
}

.program-studio-exercise .program-studio-field--sets {
  grid-row: 1;
  grid-column: 3;
}

.program-studio-exercise .program-studio-field--reps {
  grid-row: 1;
  grid-column: 4;
}

.program-studio-exercise .program-studio-field--effort {
  grid-row: 1;
  grid-column: 5;
}

.program-studio-exercise .program-studio-field--notes {
  grid-row: 1;
  grid-column: 6;
}

.program-studio-exercise .program-studio-source-row {
  grid-row: 2;
  grid-column: 2 / 7;
}

.program-studio-exercise .program-studio-prescription-suggestion {
  grid-row: 3;
  grid-column: 2 / 7;
}

.program-studio-exercise .program-studio-exercise__actions {
  grid-row: 1;
  grid-column: 7;
}

.program-studio-exercise.is-guided .program-studio-exercise__main {
  grid-row: 1;
  grid-column: 2;
}

.program-studio-exercise.is-guided .program-studio-field--reps {
  grid-row: 1;
  grid-column: 3;
}

.program-studio-exercise.is-guided .program-studio-field--notes {
  grid-row: 1;
  grid-column: 4;
}

.program-studio-exercise.is-guided .program-studio-source-row {
  grid-row: 2;
  grid-column: 2 / 5;
}

.program-studio-exercise.is-guided .program-studio-exercise__actions {
  grid-row: 1;
  grid-column: 5;
}

.program-studio-source {
  width: fit-content;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 720;
}

.program-studio-prescription-suggestion {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface-2));
}

.program-studio-prescription-suggestion > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.program-studio-prescription-suggestion strong {
  color: var(--ink-primary);
  font-size: 12px;
}

.program-studio-prescription-suggestion small {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.4;
}

.program-studio-prescription-suggestion button {
  min-height: 40px;
  flex: 0 0 auto;
  padding-inline: 13px;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-hard));
  color: var(--accent);
  font-size: 11px;
}

.program-studio-empty-row {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--border-hard);
  border-radius: 12px;
  color: var(--ink-muted);
  font-size: 12px;
  text-align: center;
}

.program-studio-add-exercise,
.program-studio-add-block {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
  border-style: dashed;
  color: var(--accent);
}

.program-studio-add-block {
  min-height: 50px;
  margin-top: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-2));
}

.program-studio-footer {
  position: sticky;
  z-index: 25;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.program-studio-footer p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
}

.program-studio-footer p[data-tone='success'] {
  color: var(--color-success);
}

.program-studio-footer p[data-tone='error'] {
  color: var(--signal-alert);
}

.program-studio-footer > div {
  display: flex;
  gap: 7px;
}

.program-studio-footer button {
  padding-inline: 16px;
}

.program-studio-footer .program-studio-use {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.program-studio-delete-program {
  border-color: color-mix(in srgb, var(--signal-alert) 45%, var(--border-hard)) !important;
  background: color-mix(in srgb, var(--signal-alert) 7%, var(--color-surface-2)) !important;
}

#view-programs .day-detail-header > .session-header-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (min-width: 769px) {
  #view-programs .day-detail-header--custom {
    align-items: flex-end;
    padding-block: var(--space-4);
  }

  #view-programs .day-detail-header--custom > div:first-child,
  #view-programs .day-detail-header--custom > .session-header-actions--custom {
    min-width: 0;
    align-self: flex-end;
  }
}

#view-programs .session-edit-program,
#view-programs .session-fit-launch,
#view-programs .day-detail-header > .session-header-actions .session-start-btn,
#view-programs .day-detail-header > .session-header-actions .session-timer-launch {
  display: inline-flex;
  min-width: 132px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#view-programs .day-detail-header > .session-header-actions :is(
  .session-edit-program,
  .session-fit-launch,
  .session-start-btn,
  .session-timer-launch
) strong {
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
  text-align: center;
}

#view-programs .day-detail-header > .session-header-actions :is(
  .session-edit-program,
  .session-fit-launch
) > svg,
#view-programs .day-detail-header > .session-header-actions :is(
  .session-start-btn__icon,
  .session-timer-launch__icon
) {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
}

#view-programs .day-detail-header > .session-header-actions :is(
  .session-start-btn__icon,
  .session-timer-launch__icon
) svg {
  width: 18px;
  height: 18px;
}

#view-programs .day-detail-header > .session-header-actions .session-start-btn__copy,
#view-programs .day-detail-header > .session-header-actions .session-timer-launch > span:last-child {
  align-items: center;
  text-align: center;
}

#view-programs .session-edit-program svg {
  flex: 0 0 auto;
  color: var(--accent);
}

#view-programs .session-fit-launch svg {
  flex: 0 0 auto;
  color: var(--accent);
}

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

#view-programs .program-custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#view-programs .program-custom-badge--skill,
#view-programs .program-custom-badge--power {
  color: var(--accent-secondary);
}

#view-programs .program-custom-badge--core {
  color: var(--accent-core);
}

#view-programs .program-custom-badge--mobility,
#view-programs .program-custom-badge--cooldown,
#view-programs .program-custom-badge--prehab {
  color: var(--accent-flex);
}

.program-guided-list {
  display: grid;
  gap: 1px;
}

.program-guided-item {
  display: grid;
  grid-template-columns: 28px 48px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.program-guided-item:last-child {
  border-bottom: 0;
}

.program-guided-item__index {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

#view-programs .program-guided-item > .ex-card__thumb {
  grid-area: auto !important;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  align-self: center;
  font-size: 11px;
}

.program-guided-item strong {
  font-size: 13px;
}

.program-guided-item p {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 11px;
}

.program-guided-item__rx {
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.program-guided-item__rx:empty {
  display: none;
}

.program-guided-item__complete {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--bg-base);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}

.program-guided-item__complete.is-complete {
  border-color: color-mix(in srgb, var(--accent-flex) 70%, var(--border-hard));
  color: var(--accent-flex);
}

.program-custom-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 42px 18px;
  border: 1px dashed var(--border-hard);
  border-radius: 16px;
  text-align: center;
}

.program-custom-empty > svg {
  color: var(--accent);
}

@media screen and (max-width: 720px) {
  .program-studio-block-empty {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 24px 18px;
    text-align: center;
  }

  .program-studio-block-empty button {
    width: 100%;
  }
}

.program-custom-empty h3,
.program-custom-empty p {
  margin: 0;
}

.program-custom-empty p {
  color: var(--ink-muted);
  font-size: 12px;
}

.program-custom-empty button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--ink-on-accent);
  font: inherit;
  font-weight: 780;
}

@media (hover: hover) and (pointer: fine) {
  .program-studio-close:hover,
  .program-studio-days button:hover,
  .program-studio-day-actions button:not(:disabled):hover,
  .program-studio-order-actions button:not(:disabled):hover,
  .program-studio-exercise__actions button:not(:disabled):hover,
  .program-studio-add-block:hover,
  .program-studio-add-exercise:hover,
  .program-studio-footer button:hover,
  .program-studio-kind-trigger:hover,
  #view-programs .session-edit-program:hover {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border-hard));
    background: color-mix(in srgb, var(--accent) 8%, var(--color-surface-2));
    color: var(--accent);
  }

  .program-studio-kind-option:hover,
  .program-studio-suggestions button:hover {
    background: color-mix(in srgb, var(--accent) 9%, var(--color-surface-2));
    color: var(--accent);
  }
}

.program-studio button:focus-visible,
#view-programs .session-edit-program:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media screen and (min-width: 721px) and (max-width: 1120px) {
    .program-studio-block-identity-control {
      min-width: 0;
      flex-basis: 420px;
    }

    .program-studio-exercises {
      overflow-x: hidden;
    }

    .program-studio-exercise {
      grid-template-columns: 30px minmax(0, 1fr) 70px 112px 88px 176px;
    }

    .program-studio-exercise__main {
      grid-row: 1;
      grid-column: 2 / 5;
    }

    .program-studio-field--sets {
      grid-row: 1;
      grid-column: 5;
    }

    .program-studio-exercise__actions {
      grid-row: 1;
      grid-column: 6;
    }

    .program-studio-field--reps {
      grid-row: 2;
      grid-column: 2 / 4;
    }

    .program-studio-field--effort {
      grid-row: 2;
      grid-column: 4 / 5;
    }

    .program-studio-field--notes {
      grid-row: 2;
      grid-column: 5 / 7;
    }

    .program-studio-exercise .program-studio-source-row {
      grid-row: 3;
      grid-column: 2 / 7;
    }

    .program-studio-exercise .program-studio-prescription-suggestion {
      grid-row: 4;
      grid-column: 2 / 7;
    }

    .program-studio-exercise.is-guided {
      grid-template-columns: 32px minmax(0, 1fr) 170px 194px;
    }

    .program-studio-exercise.is-guided .program-studio-exercise__main {
      grid-row: 1;
      grid-column: 2 / 4;
    }

    .program-studio-exercise.is-guided .program-studio-exercise__actions {
      grid-row: 1;
      grid-column: 4;
    }

    .program-studio-exercise.is-guided .program-studio-field--reps {
      grid-row: 2;
      grid-column: 2 / 3;
    }

    .program-studio-exercise.is-guided .program-studio-field--notes {
      grid-row: 2;
      grid-column: 3 / 5;
    }

    .program-studio-exercise.is-guided .program-studio-source-row {
      grid-row: 3;
      grid-column: 2 / 5;
    }

    .program-studio-exercise.is-guided .program-studio-prescription-suggestion {
      grid-row: 4;
      grid-column: 2 / 5;
    }
}

@media screen and (max-width: 900px) {
  .program-studio-overlay {
    padding: 12px;
  }

  .program-studio {
    max-height: calc(100dvh - 24px);
  }

  .program-studio-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-studio-schedule-week__assignments,
  .program-studio-schedule-preview ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-studio-workspace {
    display: block;
  }

  .program-studio-days {
    position: sticky;
    z-index: 22;
    top: calc(75px + env(safe-area-inset-top));
    display: flex;
    max-height: none;
    gap: 7px;
    overflow-x: auto;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--color-surface) 95%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .program-studio-days::-webkit-scrollbar {
    display: none;
  }

  .program-studio-day-tab {
    width: 142px;
    flex: 0 0 142px;
    scroll-snap-align: start;
  }

  .program-studio-day-tab.is-selected {
    box-shadow: inset 0 -3px 0 var(--accent);
  }

  .program-studio-add-day {
    min-width: 92px;
    flex: 0 0 92px;
  }

  .program-studio-day-editor {
    padding: 16px 14px 24px;
  }

  .program-studio-day-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .program-studio-day-identity {
    width: 100%;
    grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.3fr);
  }

  .program-studio-day-actions {
    justify-content: flex-end;
  }
}

@media screen and (max-width: 820px) {
  .program-studio-overlay {
    display: block;
    padding: 0;
  }

  .program-studio {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-width: 0;
    border-radius: 0;
  }

  #program-studio-app {
    min-height: 100dvh;
  }

  .program-studio-header {
    min-height: calc(68px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  }

  .program-studio-header h2 {
    max-width: 250px;
    font-size: 24px;
  }

  .program-studio-title__wide {
    display: none;
  }

  .program-studio-title__compact {
    display: inline;
  }

  .program-studio-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
  }

  .program-studio-day-picker {
    display: grid;
  }

  .program-studio-day-picker .soma-picker__label {
    color: var(--ink-secondary);
    font-weight: 820;
  }

  .program-studio-day-picker .soma-picker__trigger {
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--border-hard);
    border-radius: 11px;
    background: var(--bg-base);
    font-size: 16px;
  }

  .program-studio-day-picker .soma-picker__menu {
    max-height: min(310px, 42dvh);
  }

  .program-studio-day-picker .soma-picker__option {
    min-height: 46px;
    font-size: 14px;
  }

  .program-studio-origin-notice {
    padding: 12px 14px;
  }

  .program-studio-validation-summary {
    margin: 10px 14px 0;
  }

  .program-studio-schedule {
    margin: 10px 14px 0;
  }

  .program-studio-schedule__toggle {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
  }

  .program-studio-schedule__toggle > span:nth-child(3) {
    display: none;
  }

  .program-studio-schedule__body {
    padding: 13px;
  }

  .program-studio-schedule__intro,
  .program-studio-schedule-week > header,
  .program-studio-schedule-dates > header {
    align-items: stretch;
    flex-direction: column;
  }

  .program-studio-schedule-mode,
  .program-studio-schedule-anchor,
  .program-studio-schedule-week > header > .program-studio-field {
    width: 100%;
    flex-basis: auto;
  }

  .program-studio-schedule-week__actions {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) minmax(0, 1fr);
  }

  .program-studio-schedule-date {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) 44px;
  }

  .program-studio-field input {
    font-size: 16px;
  }

  .program-studio-day-fields {
    grid-template-columns: minmax(96px, 0.72fr) minmax(0, 1.6fr);
    gap: 8px;
  }

  .program-studio-day-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-studio-days {
    align-items: end;
    overflow: visible;
  }

  .program-studio-day-picker {
    min-width: 0;
    flex: 1 1 auto;
  }

  .program-studio-day-tab {
    display: none;
  }

  .program-studio-add-day {
    min-width: 94px;
    flex: 0 0 94px;
  }

  .program-studio-block {
    padding: 11px;
  }

  .program-studio-block__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .program-studio-block__identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .program-studio-block-identity-control {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  }

  .program-studio-block-identity-control .program-studio-kind-trigger {
    grid-column: auto;
    width: auto;
  }

  .program-studio-kind-trigger {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
  }

  .program-studio-kind-trigger > svg:last-child {
    margin-left: auto;
  }

  .program-studio-block-toggle {
    display: inline-flex;
    width: 100%;
  }

  .program-studio-block__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 44px);
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
  }

  .program-studio-block__actions .program-studio-order-actions {
    display: contents;
  }

  .program-studio-block.is-collapsed .program-studio-block__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 0;
  }

  .program-studio-block.is-collapsed .program-studio-block__identity {
    align-self: center;
    grid-template-rows: auto auto;
    row-gap: 4px;
  }

  .program-studio-block.is-collapsed .program-studio-block__index {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: end;
  }

  .program-studio-block.is-collapsed .program-studio-order-actions > .reorder-drag-handle {
    display: grid;
    place-items: center;
    border-color: transparent;
    background: transparent;
  }

  .program-studio-block.is-collapsed .program-studio-block__summary {
    display: grid;
    grid-row: 2;
    grid-column: 1;
    gap: 2px;
  }

  .program-studio-block.is-collapsed .program-studio-order-actions > .reorder-drag-handle:hover,
  .program-studio-block.is-collapsed .program-studio-order-actions > .reorder-drag-handle:active,
  body.is-reordering .program-studio-block.is-collapsed .program-studio-order-actions > .reorder-drag-handle {
    border-color: var(--border-soft);
    background: var(--color-surface-1);
  }

  .program-studio-block.is-collapsed .program-studio-kind-trigger {
    display: none;
  }

  .program-studio-block.is-collapsed .program-studio-block-identity-control {
    display: none;
  }

  .program-studio-block.is-collapsed .program-studio-block__actions {
    display: flex;
    padding-top: 0;
    border-top: 0;
  }

  .program-studio-block.is-collapsed .program-studio-block-toggle {
    width: auto;
  }

  .program-studio-block.is-collapsed .program-studio-order-actions {
    display: contents;
  }

  .program-studio-block.is-collapsed .program-studio-order-actions > :not(.reorder-drag-handle) {
    display: none;
  }

  .program-studio-kind-menu {
    top: calc(100% + 5px);
    left: 0;
    width: min(330px, calc(100vw - 54px));
  }

  .program-studio-order-actions {
    gap: 4px;
  }

  .program-studio-order-actions button,
  .program-studio-exercise__actions button {
    width: 44px;
    min-height: 44px;
  }

  .program-studio-field > span small {
    display: block;
    margin: 3px 0 0;
  }

  .program-studio-exercise-suggestions button strong {
    font-size: 16px;
  }

  .program-studio-exercise-suggestion__copy > span {
    font-size: 12px;
  }

  .program-studio-exercise {
    display: block;
    padding: 0;
    overflow: visible;
    border-radius: 15px;
  }

  .program-studio-exercise__mobile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
  }

  .program-studio-exercise-toggle {
    display: grid;
    width: 100%;
    min-height: 58px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--ink-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .program-studio-exercise-toggle__index {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
  }

  .program-studio-exercise__summary {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .program-studio-exercise__summary strong,
  .program-studio-exercise__summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .program-studio-exercise__summary strong {
    font-size: 14px;
  }

  .program-studio-exercise__summary small {
    color: var(--ink-muted);
    font-size: 11px;
  }

  .program-studio-exercise-toggle__action {
    min-width: 36px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
  }

  .program-studio-exercise-toggle > svg:last-child {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    transition: transform var(--transition-interactive);
  }

  .program-studio-exercise.is-expanded .program-studio-exercise-toggle > svg:last-child {
    transform: rotate(180deg);
  }

  .program-studio-exercise__actions > .reorder-drag-handle {
    display: none;
  }

  .program-studio-exercise__body {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px 12px 12px;
    border-top: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--color-surface-2) 50%, var(--bg-base));
  }

  .program-studio-exercise.is-expanded .program-studio-exercise__body {
    display: grid;
  }

  .program-studio-exercise__body > .program-studio-exercise__index {
    display: none;
  }

  .program-studio-exercise .program-studio-exercise__main {
    grid-row: 1;
    grid-column: 1;
  }

  .program-studio-exercise .program-studio-exercise__actions {
    display: grid;
    grid-row: auto;
    grid-column: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    justify-self: stretch;
    padding-top: 2px;
  }

  .program-studio-exercise .program-studio-exercise__actions button {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 8px;
  }

  .program-studio-exercise__action-label {
    display: inline;
    font-size: 10px;
  }

  .program-studio-exercise__prescription {
    display: grid;
    grid-template-columns: minmax(64px, 0.6fr) minmax(96px, 1.4fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    background: var(--bg-base);
  }

  .program-studio-exercise__section-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink-secondary);
  }

  .program-studio-exercise__section-heading strong {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .program-studio-exercise__section-heading span {
    color: var(--ink-muted);
    font-size: 10px;
  }

  .program-studio-exercise__prescription .program-studio-field--sets,
  .program-studio-exercise__prescription .program-studio-field--reps,
  .program-studio-exercise__prescription .program-studio-field--effort {
    grid-row: auto;
    grid-column: auto;
  }

  .program-studio-exercise__prescription .program-studio-field--effort {
    grid-column: auto;
  }

  .program-studio-exercise__prescription:has(.program-studio-field--effort) {
    grid-template-columns: minmax(58px, 0.55fr) minmax(88px, 1.2fr) minmax(72px, 0.72fr);
  }

  .program-studio-exercise .program-studio-field--notes,
  .program-studio-exercise .program-studio-source-row,
  .program-studio-exercise .program-studio-prescription-suggestion {
    grid-row: auto;
    grid-column: 1;
  }

  .program-studio-note-trigger__meta {
    display: none;
  }

  .program-studio-exercise-suggestions {
    position: static;
    max-height: min(42dvh, 340px);
    margin-top: 6px;
    box-shadow: none;
  }

  .program-studio-exercise.is-guided,
  .program-studio-exercise.is-guided .program-studio-exercise__main,
  .program-studio-exercise.is-guided .program-studio-exercise__actions,
  .program-studio-exercise.is-guided .program-studio-field--reps,
  .program-studio-exercise.is-guided .program-studio-field--notes,
  .program-studio-exercise.is-guided .program-studio-source-row,
  .program-studio-exercise.is-guided .program-studio-prescription-suggestion {
    grid-row: auto;
    grid-column: 1;
  }

  .program-studio-exercise.is-guided .program-studio-exercise__prescription {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-studio-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  .program-studio-footer p {
    position: static;
    width: auto;
    min-height: 16px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: 10px;
    line-height: 1.35;
  }

  .program-studio-footer > div {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  #view-programs .day-detail-header > .session-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-programs .session-edit-program {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
  }

  .program-guided-item {
    grid-template-columns: 22px 42px minmax(0, 1fr) auto;
    gap: 9px;
    padding-inline: 8px;
  }

  #view-programs .program-guided-item > .ex-card__thumb {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .program-guided-item__rx {
    grid-column: 3 / 5;
  }

  .program-guided-item__complete {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
  }
}

@media screen and (max-width: 399px) {
  .program-guided-item {
    grid-template-columns: 20px 42px minmax(0, 1fr);
  }

  #view-programs .program-guided-item > .ex-card__thumb {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .program-guided-item__rx,
  .program-guided-item__complete {
    grid-column: 3;
  }

  .program-guided-item__complete {
    grid-row: auto;
  }
}

@media screen and (max-width: 399px) {
  .program-studio-header h2 {
    max-width: 215px;
    font-size: 22px;
  }

  .program-studio-day-fields,
  .program-studio-day-identity {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-studio-day-identity .program-studio-field + .program-studio-field {
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  .program-studio-schedule-week__assignments {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-studio-schedule-assignment {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
  }

  .program-studio-schedule-date {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .program-studio-schedule-date__picker {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .program-studio-schedule-preview ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-studio-exercise-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
  }

  .program-studio-exercise-toggle__action {
    display: none;
  }

  .program-studio-exercise__prescription {
    grid-template-columns: minmax(74px, 0.68fr) minmax(0, 1.32fr);
    padding: 10px;
  }

  .program-studio-exercise__prescription:has(.program-studio-field--effort) {
    grid-template-columns: minmax(52px, 0.52fr) minmax(82px, 1.2fr) minmax(64px, 0.68fr);
    gap: 7px;
  }

  .program-studio-exercise__prescription .program-studio-field > span {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .program-studio-kind-menu {
    grid-template-columns: minmax(0, 1fr);
    max-height: 60dvh;
    overflow-y: auto;
  }

  .program-studio-exercise__actions {
    gap: 6px;
  }

  .program-studio-footer button {
    padding-inline: 8px;
    font-size: 11px;
  }
}

@keyframes program-studio-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .program-studio {
    animation: none;
  }

  .program-studio-kind-trigger > svg:last-child {
    transition: none;
  }
}

/* End V4.52 Program Studio ------------------------------------ */

/* V4.53 Exercise-aware workout logger
   One compact logger supports reps, holds, attempts, distance, loaded work,
   unilateral work, and explicit set intent without changing the save flow. */
.session-log-unit-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -4px 2px 12px;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.session-log-unit-toggle {
  display: grid;
  width: 116px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--bg-elevated);
}

.session-log-unit-toggle button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.session-log-unit-toggle button[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 14%, var(--color-surface));
  color: var(--accent);
}

.session-log-unit-toggle button:focus-visible,
.set-type-trigger:focus-visible,
.set-type-popover button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.set-type-trigger {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.set-type-trigger--warmup {
  border-color: color-mix(in srgb, var(--color-info) 40%, transparent);
  background: var(--color-info-highlight);
  color: var(--color-info);
}

.set-type-trigger--drop {
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.set-type-trigger--failure {
  border-color: color-mix(in srgb, var(--color-error) 44%, transparent);
  background: var(--color-error-highlight);
  color: var(--color-error);
}

.set-type-popover {
  position: fixed;
  z-index: 2310;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--border-hard);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  animation: effort-menu-enter 140ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.set-type-popover button {
  display: grid;
  min-height: 44px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  padding: 5px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.set-type-popover button[aria-checked='true'] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.set-type-popover__code {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 850;
}

.set-type-popover__code--warmup { color: var(--color-info); }
.set-type-popover__code--drop { color: var(--accent); }
.set-type-popover__code--failure { color: var(--color-error); }
.set-type-popover__check { color: var(--accent); text-align: center; }

.session-log-overlay .set-row__controls:has(.set-field--distance):not(:has(.set-field--load)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(120px, 0.85fr);
}

.session-log-overlay .set-row__controls:has(.set-field--distance):has(.set-field--load) {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 0.9fr) minmax(120px, 0.85fr);
}

.session-log-overlay .set-field--distance,
.session-log-overlay .set-field--time {
  min-width: 0;
}

@media (hover: hover) and (pointer: fine) {
  .session-log-unit-toggle button:hover,
  .set-type-popover button:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--ink-primary);
  }
}

@media screen and (max-width: 699.98px) {
  .session-log-unit-row {
    margin: -2px 2px 8px;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='distance'] .set-row__content {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 64px;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-row__content {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 64px;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-grid-heading--distance,
  .session-log-overlay .set-rows[data-layout='distance'] .set-field--distance {
    grid-column: 2;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-grid-heading--time,
  .session-log-overlay .set-rows[data-layout='distance'] .set-field--time {
    grid-column: 3;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-grid-heading--effort,
  .session-log-overlay .set-rows[data-layout='distance'] .set-field--effort {
    grid-column: 4;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-rows-heading {
    min-height: 40px;
    row-gap: 5px;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-grid-heading--load,
  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-field--load {
    grid-column: 2;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-grid-heading--distance,
  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-field--distance {
    grid-column: 3;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-grid-heading--effort,
  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-field--effort {
    grid-column: 4;
    grid-row: 1;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-grid-heading--time,
  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-field--time {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-field--prev {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-row__content {
    min-height: 118px;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-field--distance,
  .session-log-overlay .set-rows[data-layout='distance'] .set-field--time,
  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-field--distance,
  .session-log-overlay .set-rows[data-layout='distance-loaded'] .set-field--time {
    display: block;
    min-width: 0;
  }
}

@media screen and (max-width: 340px) {
  .session-log-overlay .set-rows[data-layout='distance'] .set-rows-heading,
  .session-log-overlay .set-rows[data-layout='distance'] .set-row__content {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-rows-heading {
    min-height: 40px;
    row-gap: 5px;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-grid-heading--effort,
  .session-log-overlay .set-rows[data-layout='distance'] .set-field--effort {
    width: 60px;
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-field--prev {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .session-log-overlay .set-rows[data-layout='distance'] .set-row__content {
    min-height: 118px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .set-type-popover { animation: none; }
}

/* End V4.53 Exercise-aware workout logger --------------------- */

/* Training intelligence, shared account-owned coaching surfaces */
.exercise-pinned-cue,
.progression-review,
.warmup-ramp,
.weekly-exposure__metrics article,
.weekly-exposure__muscles,
.training-calendar,
.training-day-detail,
.conditioning-history,
.program-archive-compare,
.program-discovery {
  border: 1px solid var(--border-soft);
  background: var(--color-surface-2);
}

.exercise-pinned-cue {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

.exercise-pinned-cue__icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.exercise-pinned-cue__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.exercise-pinned-cue__label {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exercise-pinned-cue__copy strong {
  overflow-wrap: anywhere;
  color: var(--ink-primary);
  font-size: 13px;
  line-height: 1.35;
}

.exercise-pinned-cue > button,
.progression-review__approve,
.warmup-ramp__body > button,
.program-discovery-card__actions > button,
.program-studio-suggest-catalog {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface));
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.exercise-pinned-cue > button:hover,
.progression-review__approve:hover,
.warmup-ramp__body > button:hover,
.program-discovery-card__actions > button:hover,
.program-studio-suggest-catalog:hover {
  background: color-mix(in srgb, var(--accent) 17%, var(--color-surface));
}

.exercise-pinned-cue--empty {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.exercise-pinned-cue--empty > .exercise-pinned-cue__empty-action {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 11px;
  border-color: var(--border-soft);
  background: transparent;
  color: var(--ink-secondary);
}

.exercise-pinned-cue__empty-action > span:first-child {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--accent);
}

.exercise-pinned-cue--empty > .exercise-pinned-cue__empty-action:hover,
.exercise-pinned-cue--empty > .exercise-pinned-cue__empty-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--color-surface));
  color: var(--ink-primary);
}

.pinned-cue-modal {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: grid;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  place-items: center;
}

.pinned-cue-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-base) 76%, transparent);
  backdrop-filter: blur(10px);
}

.pinned-cue-modal__panel {
  position: relative;
  display: grid;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-hard);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.pinned-cue-modal__panel > header,
.pinned-cue-modal__panel > footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
}

.pinned-cue-modal__panel > header {
  border-bottom: 1px solid var(--border-soft);
}

.pinned-cue-modal__panel > header span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.pinned-cue-modal__panel > header h2 {
  margin: 3px 0 0;
  color: var(--ink-primary);
  font-size: 22px;
}

.pinned-cue-modal__panel > header button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
}

.pinned-cue-modal__body {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding: 18px;
}

.pinned-cue-modal__body label {
  display: grid;
  gap: 8px;
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 800;
}

.pinned-cue-modal__body textarea {
  min-height: 132px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  background: var(--bg-base);
  color: var(--ink-primary);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.pinned-cue-modal__body p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.pinned-cue-modal__panel > footer {
  border-top: 1px solid var(--border-soft);
}

.pinned-cue-modal__panel > footer button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-weight: 800;
}

.pinned-cue-modal__panel > footer .pinned-cue-modal__save {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.pinned-cue-modal__panel > footer button:disabled {
  border-color: var(--border-soft);
  background: var(--color-surface-2);
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.catalog-suggestion-modal__panel {
  width: min(600px, 100%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.catalog-suggestion-modal__body {
  min-height: 0;
  gap: 14px;
}

.catalog-suggestion-modal__body label > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--ink-secondary);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.catalog-suggestion-modal__body label > span small {
  color: var(--ink-muted);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.catalog-suggestion-modal__body input,
.catalog-suggestion-modal__body textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  background: var(--bg-base);
  color: var(--ink-primary);
  font: inherit;
  font-size: 16px;
}

.catalog-suggestion-modal__body input {
  min-height: 48px;
}

.catalog-suggestion-modal__body input:focus,
.catalog-suggestion-modal__body textarea:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 1px;
}

.catalog-suggestion-status {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.catalog-suggestion-status:empty {
  display: none;
}

.catalog-suggestion-status[data-tone='success'] {
  border-color: color-mix(in srgb, var(--signal-ok) 36%, var(--border-soft));
  color: var(--signal-ok);
}

.catalog-suggestion-status[data-tone='attention'] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  color: var(--accent);
}

.catalog-suggestion-modal__body .catalog-suggestion-privacy {
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  color: var(--ink-muted);
}

.program-studio-note-modal__panel {
  width: min(620px, 100%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.program-studio-note-modal__body {
  min-height: 0;
}

.program-studio-note-modal__body textarea {
  min-height: clamp(180px, 34dvh, 300px);
}

.program-studio-note-modal__context {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface-2);
}

.program-studio-note-modal__context strong {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.program-studio-note-modal__panel > footer > div {
  display: flex;
  gap: 8px;
}

.program-studio-note-modal__panel > footer .program-studio-note-modal__default {
  color: var(--accent);
}

@media screen and (max-width: 600px) {
  .program-studio-note-modal {
    padding: max(10px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    place-items: end center;
  }

  .program-studio-note-modal__panel {
    width: 100%;
    max-height: min(88dvh, 720px);
    border-radius: 18px;
  }

  .program-studio-note-modal__panel > header,
  .program-studio-note-modal__panel > footer {
    padding: 12px;
  }

  .program-studio-note-modal__panel > header h2 {
    max-width: calc(100vw - 110px);
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .program-studio-note-modal__body {
    padding: 14px 12px;
  }

  .program-studio-note-modal__body textarea {
    min-height: clamp(160px, 30dvh, 240px);
  }

  .program-studio-note-modal__panel > footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .program-studio-note-modal__panel > footer > span:empty {
    display: none;
  }

  .program-studio-note-modal__panel > footer > button,
  .program-studio-note-modal__panel > footer > div,
  .program-studio-note-modal__panel > footer > div > button {
    width: 100%;
  }

  .program-studio-note-modal__panel > footer > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.progression-review {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
}

.progression-review > header {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.progression-review > header > div {
  min-width: 0;
}

.progression-review > header span:first-child,
.progression-review__recommendation > span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.progression-review h3 {
  margin: 3px 0 0;
  color: var(--ink-primary);
  font-size: 16px;
}

.progression-review > p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.progression-review__status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--bg-base);
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
}

.progression-review[data-status='candidate'] .progression-review__status {
  background: color-mix(in srgb, var(--signal-ok) 14%, var(--bg-base));
  color: var(--signal-ok);
}

.progression-review__evidence {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progression-review__evidence li {
  display: grid;
  min-width: 0;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--ink-secondary);
  font-size: 11px;
}

.progression-review__evidence li strong {
  color: var(--ink-primary);
  text-transform: capitalize;
}

.progression-review__recommendation {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--bg-base);
}

.warmup-ramp {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
}

.warmup-ramp > summary {
  display: flex;
  min-height: 62px;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.warmup-ramp > summary::-webkit-details-marker {
  display: none;
}

.warmup-ramp > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.warmup-ramp summary strong {
  color: var(--ink-primary);
}

.warmup-ramp summary small {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.4;
}

.warmup-ramp > summary > span:last-child {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.program-discovery__count {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--ink-secondary);
}

.program-discovery__count strong {
  color: var(--accent);
  font-size: 12px;
}

.program-discovery__count span {
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 800;
}

.warmup-ramp__body,
.program-discovery__body {
  border-top: 1px solid var(--border-soft);
  padding: 14px;
}

.warmup-ramp__body {
  display: grid;
  gap: 12px;
}

.warmup-ramp__body > label {
  display: grid;
  gap: 6px;
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 800;
}

.warmup-ramp__body input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--bg-base);
  color: var(--ink-primary);
  font: inherit;
  font-size: 16px;
  appearance: textfield;
}

.warmup-ramp__body input::-webkit-inner-spin-button,
.warmup-ramp__body input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.warmup-ramp__steps {
  display: grid;
  gap: 6px;
}

.warmup-ramp__step {
  display: grid;
  grid-template-columns: 42px 74px 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--bg-base);
  color: var(--ink-secondary);
  font-size: 11px;
}

.warmup-ramp__step strong {
  color: var(--ink-primary);
}

.warmup-ramp__step small {
  color: var(--ink-muted);
}

.warmup-ramp__empty,
.warmup-ramp__body > p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.warmup-ramp__body > button:disabled,
.progression-review__approve:disabled,
.program-studio-suggest-catalog:disabled {
  opacity: 0.55;
  cursor: default;
}

.weekly-exposure {
  display: grid;
  gap: 12px;
}

.weekly-exposure__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.weekly-exposure__metrics article {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 14px;
  border-radius: 13px;
}

.weekly-exposure__metrics article > span,
.training-day-detail > header span,
.program-archive-compare section > header span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.weekly-exposure__metrics article > strong {
  color: var(--ink-primary);
  font-size: clamp(20px, 3vw, 28px);
}

.weekly-exposure__metrics article > small {
  color: var(--ink-muted);
  font-size: 10px;
}

.weekly-exposure__muscles {
  padding: 16px;
  border-radius: 14px;
}

.weekly-exposure__muscles header h3 {
  margin: 0 0 4px;
  color: var(--ink-primary);
  font-size: 16px;
}

.weekly-exposure__muscles header p {
  max-width: 760px;
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.exposure-muscle-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 34px;
  gap: 9px;
  align-items: center;
  min-height: 28px;
  color: var(--ink-secondary);
  font-size: 11px;
}

.exposure-muscle-row > div {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--bg-base);
}

.exposure-muscle-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.exposure-muscle-row strong {
  color: var(--ink-primary);
  text-align: right;
}

.training-calendar-layout {
  display: grid;
  max-width: 1440px;
  grid-template-columns: minmax(560px, 1.45fr) minmax(280px, 0.55fr);
  gap: 12px;
  align-items: start;
  margin-inline: auto;
}

.training-calendar,
.training-day-detail {
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
}

.training-calendar__toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px auto;
  gap: 7px;
  align-items: center;
  margin-bottom: 12px;
}

.training-calendar__toolbar > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.training-calendar__toolbar span,
.training-calendar__metrics span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.training-calendar__toolbar strong {
  overflow: hidden;
  color: var(--ink-primary);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-calendar__toolbar button {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-base);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.training-calendar__toolbar button:hover:not(:disabled),
.training-calendar__toolbar button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.training-calendar__toolbar button:disabled {
  cursor: default;
  opacity: 0.35;
}

.training-calendar__toolbar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.training-calendar__today {
  min-width: 60px !important;
  padding-inline: 11px !important;
}

.training-calendar__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
}

.training-calendar__metrics article {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-base);
}

.training-calendar__metrics strong {
  overflow: hidden;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-calendar__metrics strong small {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 12px;
}

.training-calendar__metrics p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.training-calendar__weekdays,
.training-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.training-calendar__weekdays span {
  padding: 4px 0 7px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.training-calendar__day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 50px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--bg-base);
  color: var(--ink-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.training-calendar__day:hover:not(:disabled),
.training-calendar__day:focus-visible {
  border-color: var(--border-hard);
  color: var(--ink-primary);
  outline: none;
}

.training-calendar__day:disabled {
  cursor: default;
  opacity: 0.3;
}

.training-calendar__day.is-outside {
  opacity: 0.42;
}

.training-calendar__day.has-session {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  color: var(--ink-primary);
}

.training-calendar__day.is-today:not(.is-selected) {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--border-soft));
  color: var(--accent);
}

.training-calendar__day.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-weight: 800;
}

.training-calendar__day i {
  position: absolute;
  right: 4px;
  bottom: 3px;
  display: grid;
  min-width: 15px;
  height: 15px;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.training-calendar__day.is-selected i {
  background: color-mix(in srgb, var(--ink-on-accent) 18%, transparent);
  color: var(--ink-on-accent);
}

.training-calendar__legend {
  display: flex;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 12px;
}

.training-calendar__legend span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.training-calendar__legend i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.training-day-detail > header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.training-day-detail h3 {
  margin: 3px 0 0;
  color: var(--ink-primary);
  font-size: 16px;
}

.training-day-detail > header > strong {
  color: var(--accent);
  font-size: 11px;
}

.training-day-detail > div,
.conditioning-history {
  display: grid;
}

.training-day-detail__empty {
  margin: 0;
  padding: 18px 2px 4px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.5;
}

.training-day-detail > div > button,
.conditioning-history > button {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.training-day-detail button > span,
.conditioning-history button > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.training-day-detail button small,
.conditioning-history button small {
  overflow-wrap: anywhere;
  color: var(--ink-muted);
  font-size: 10px;
}

.conditioning-history {
  overflow: hidden;
  border-radius: 14px;
}

.conditioning-history > button {
  grid-template-columns: 90px minmax(0, 1fr) auto;
  padding: 10px 14px;
}

.conditioning-history time {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.program-archive-compare {
  display: grid;
  grid-template-columns: minmax(170px, 0.32fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 14px;
}

.program-archive-compare nav {
  display: grid;
  align-content: start;
  border-right: 1px solid var(--border-soft);
}

.program-archive-compare nav button {
  display: grid;
  min-height: 54px;
  gap: 2px;
  align-content: center;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.program-archive-compare nav button[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.program-archive-compare nav button span {
  color: var(--ink-muted);
  font-size: 10px;
}

.program-archive-compare section {
  min-width: 0;
  padding: 14px;
}

.program-archive-compare section > header,
.program-archive-compare section > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.program-archive-compare section > header {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.program-archive-compare section > header > div {
  display: grid;
  gap: 3px;
}

.program-archive-compare section > div {
  min-height: 44px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-secondary);
  font-size: 11px;
}

.program-archive-compare section > div > span:first-child {
  grid-column: 1 / -1;
  padding-top: 8px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.program-discovery {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

.program-library-shell {
  padding-block: clamp(24px, 4vw, 52px) 72px;
}

.program-library-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
}

.program-library-hero__copy {
  min-width: 0;
}

.program-library-hero__copy h1 {
  margin: 5px 0 7px;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 0.98;
}

.program-library-hero__copy p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.program-library-back,
.program-library-new {
  display: inline-flex;
  min-height: 46px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.program-library-back:hover,
.program-library-back:focus-visible,
.program-library-new:hover,
.program-library-new:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.program-library-new {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.program-library-new:hover,
.program-library-new:focus-visible {
  background: color-mix(in srgb, var(--accent) 86%, var(--ink-primary));
  color: var(--ink-on-accent);
}

.program-discovery__heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 1px solid var(--border-soft);
}

.program-discovery__heading > div {
  min-width: 0;
}

.program-discovery__heading h2 {
  margin: 4px 0 3px;
  color: var(--ink-primary);
  font-size: clamp(20px, 3vw, 28px);
}

.program-discovery__heading p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.program-discovery__heading > .program-discovery__count {
  min-width: 76px;
  justify-content: center;
  padding: 11px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--color-surface);
}

.program-studio-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.program-discovery__body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.program-discovery-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.program-discovery-search {
  display: grid;
  min-width: 0;
  min-height: 46px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--ink-muted);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.program-discovery-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.program-discovery-search input {
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-size: 13px;
}

.program-discovery-search input::placeholder {
  color: var(--ink-muted);
}

.program-discovery-search input::-webkit-search-cancel-button {
  display: none;
}

.program-discovery-search__clear {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.program-discovery-search__clear:hover {
  background: var(--color-surface-2);
  color: var(--ink-primary);
}

.program-discovery-filter-toggle {
  display: none;
  min-height: 46px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.program-discovery-filter-toggle.has-filters,
.program-discovery-filter-toggle[aria-expanded='true'] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--color-surface));
  color: var(--accent);
}

.program-discovery-filter-toggle > svg:last-child {
  transition: transform 160ms ease;
}

.program-discovery-filter-toggle[aria-expanded='true'] > svg:last-child {
  transform: rotate(180deg);
}

.program-discovery-filter-count {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  place-items: center;
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg-base);
  font-size: 10px;
}

.program-discovery-filters {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.soma-picker {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 5px;
}

.soma-picker__label {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.soma-picker__trigger {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--color-surface);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.soma-picker__trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soma-picker__trigger > svg {
  width: 15px;
  height: 15px;
  color: var(--ink-muted);
  transition: color 150ms ease, transform 150ms ease;
}

.soma-picker__trigger:hover,
.soma-picker__trigger:focus-visible,
.soma-picker.is-open .soma-picker__trigger {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: 0;
}

.soma-picker.is-open .soma-picker__trigger > svg {
  color: var(--accent);
  transform: rotate(180deg);
}

.soma-picker__menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  display: grid;
  max-height: min(320px, 46dvh);
  gap: 4px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-hard);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}

.soma-picker__menu[hidden] {
  display: none;
}

.soma-picker__menu.is-viewport-positioned {
  position: absolute;
  z-index: 1400;
}

.soma-picker__option {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.soma-picker__option:hover,
.soma-picker__option:focus-visible {
  background: var(--color-surface-2);
  color: var(--ink-primary);
  outline: 0;
}

.soma-picker__option.is-selected {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 11%, var(--color-surface));
  color: var(--accent);
}

.soma-picker__option > svg {
  width: 15px;
  height: 15px;
  justify-self: end;
}

.program-discovery-reset {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.program-discovery-reset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.program-discovery-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.program-discovery-card,
.program-discovery-empty {
  display: grid;
  min-width: 0;
  gap: 12px;
  align-content: space-between;
  padding: 15px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface);
}

.program-discovery-card > header > span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.program-discovery-card h3,
.program-discovery-empty h3 {
  margin: 3px 0 0;
  color: var(--ink-primary);
  font-size: 15px;
}

.program-discovery-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.program-discovery-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 0;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.program-discovery-card__meta span {
  padding: 0 9px;
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.2;
  text-transform: capitalize;
}

.program-discovery-card__meta span:first-child {
  padding-left: 0;
}

.program-discovery-card__meta span + span {
  border-left: 1px solid var(--border-soft);
}

.program-discovery-card__meta strong {
  color: var(--ink-primary);
}

.program-discovery-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.program-discovery-card__tags span {
  padding: 4px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  font-size: 9px;
  text-transform: capitalize;
}

.program-discovery-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.35fr);
  gap: 8px;
}

.program-discovery-card__actions > button {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--color-surface));
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.program-discovery-card__actions > button:only-child {
  grid-column: 1 / -1;
}

.program-discovery-card__actions > button:hover,
.program-discovery-card__actions > button:focus-visible {
  background: color-mix(in srgb, var(--accent) 17%, var(--color-surface));
  outline: 0;
}

.program-discovery-card__actions > .program-discovery-card__preview {
  justify-content: center;
  border-color: var(--border-hard);
  background: transparent;
  color: var(--ink-primary);
}

.program-discovery-card__actions > button svg {
  flex: 0 0 auto;
}

.program-template-preview-overlay[hidden] {
  display: none !important;
}

.program-template-preview-overlay {
  position: fixed;
  z-index: 820;
  inset: 0;
  display: grid;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  place-items: center;
}

.program-template-preview__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-sunken) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.program-template-preview {
  position: relative;
  display: grid;
  width: min(100%, 780px);
  max-height: min(88dvh, 860px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-hard);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.program-template-preview__header {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--color-surface);
}

.program-template-preview__header span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.program-template-preview__header h2 {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
}

.program-template-preview__close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  cursor: pointer;
}

.program-template-preview__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
}

.program-template-preview__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 22px;
}

.program-template-preview__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.program-template-preview__summary > span {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface-2);
}

.program-template-preview__summary strong {
  color: var(--ink-primary);
  font-size: 16px;
  text-transform: capitalize;
}

.program-template-preview__summary small,
.program-template-preview__day header small,
.program-template-preview__day li small {
  color: var(--ink-muted);
  font-size: 10px;
}

.program-template-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.program-template-preview__tags span {
  padding: 5px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  font-size: 10px;
}

.program-template-preview__adaptation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.program-template-preview__adaptation article {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--color-surface-2);
}

.program-template-preview__adaptation span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.program-template-preview__adaptation p {
  margin: 6px 0 0;
  color: var(--ink-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.program-template-preview__schedule {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.program-template-preview__schedule > div > span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.program-template-preview__schedule > div > p {
  margin: 4px 0 3px;
  color: var(--ink-muted);
  font-size: 11px;
}

.program-template-preview__day {
  display: grid;
  grid-template-columns: minmax(170px, 0.65fr) minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface-2);
}

.program-template-preview__day header {
  display: grid;
  align-content: start;
  gap: 3px;
}

.program-template-preview__day header span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.program-template-preview__day header strong {
  color: var(--ink-primary);
  font-size: 13px;
  line-height: 1.35;
}

.program-template-preview__day ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-template-preview__day li {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--color-surface);
}

.program-template-preview__day li span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-template-preview__day li small {
  flex: 0 0 auto;
}

.program-template-preview__footer {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.4fr);
  gap: 8px;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background: var(--color-surface);
}

.program-template-preview__footer button {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-hard);
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.program-template-preview__footer button:last-child {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.program-discovery-empty {
  min-height: 120px;
  grid-column: 1 / -1;
  align-content: center;
  gap: 4px;
  place-items: center;
  text-align: center;
}

.program-discovery-empty > button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.program-studio-source-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.program-studio-suggest-catalog {
  min-height: 44px;
  padding: 0 12px;
  font-size: 12px;
}

@media screen and (max-width: 1120px) {
  .program-discovery-filter-toggle {
    display: inline-flex;
  }

  .program-discovery-filters {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--color-surface);
  }

  .program-discovery-filters.is-open {
    display: grid;
  }

  .program-discovery-reset {
    align-self: end;
  }
}

@media screen and (max-width: 900px) {
  .training-calendar-layout {
    grid-template-columns: 1fr;
  }

  .program-discovery-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .program-discovery-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 700px) {
  .program-library-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .program-library-hero__copy {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .program-library-new {
    justify-self: end;
  }

  .weekly-exposure__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-discovery-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-archive-compare {
    grid-template-columns: 1fr;
  }

  .program-archive-compare nav {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .program-archive-compare nav button {
    min-width: 136px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 0;
  }
}

.session-log-overlay .session-log-heading {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.session-log-heading__close {
  width: 44px;
  height: 44px;
}

@media screen and (max-width: 500px) {
  .program-library-shell {
    padding-block: 18px 54px;
  }

  .program-library-hero {
    margin-bottom: 14px;
  }

  .program-library-back,
  .program-library-new {
    min-height: 44px;
    padding-inline: 11px;
  }

  .program-library-hero__copy h1 {
    font-size: 36px;
  }

  .program-discovery__heading {
    align-items: flex-start;
    padding: 15px;
  }

  .program-discovery__heading > .program-discovery__count {
    min-width: auto;
    padding: 8px 9px;
  }

  .program-discovery__heading > .program-discovery__count span {
    display: none;
  }

  .program-discovery__body {
    padding: 14px;
  }

  .program-studio-prescription-suggestion {
    align-items: stretch;
    flex-direction: column;
  }

  .program-studio-prescription-suggestion button {
    width: 100%;
  }

  .exercise-pinned-cue {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .exercise-pinned-cue > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .exercise-pinned-cue--logger:not(.exercise-pinned-cue--empty) {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .exercise-pinned-cue--logger:not(.exercise-pinned-cue--empty) > button {
    grid-column: auto;
    width: auto;
    padding-inline: 10px;
  }

  .exercise-pinned-cue--companion {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .exercise-pinned-cue--companion > button {
    grid-column: auto;
    width: auto;
    padding-inline: 10px;
  }

  .pinned-cue-modal {
    align-items: end;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .pinned-cue-modal__panel {
    width: 100%;
    border-radius: 18px;
  }

  .progression-review__evidence li {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .progression-review__evidence li strong {
    grid-column: 2;
  }

  .warmup-ramp__step {
    grid-template-columns: 38px 66px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 8px;
  }

  .warmup-ramp__step small {
    grid-column: 1 / -1;
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
  }

  .weekly-exposure__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .weekly-exposure__metrics article {
    padding: 11px;
  }

  .training-calendar,
  .training-day-detail {
    padding: 10px;
  }

  .training-calendar__toolbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    margin-bottom: 10px;
  }

  .training-calendar__toolbar strong {
    font-size: 16px;
  }

  .training-calendar__today {
    grid-column: 1 / -1;
    width: 100%;
  }

  .training-calendar__metrics {
    gap: 4px;
    margin-bottom: 11px;
  }

  .training-calendar__metrics article {
    padding: 8px;
  }

  .training-calendar__metrics strong {
    font-size: 18px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .training-calendar__metrics strong small {
    display: block;
    margin-top: 2px;
  }

  .training-calendar__metrics span,
  .training-calendar__metrics p,
  .training-calendar__metrics strong small {
    font-size: 12px;
  }

  .training-calendar__weekdays,
  .training-calendar__grid {
    gap: 3px;
  }

  .training-calendar__legend span:last-child {
    display: none;
  }

  .conditioning-history > button {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding-inline: 10px;
  }

  .program-discovery-results {
    grid-template-columns: 1fr;
  }

  .program-discovery-filter-control .soma-picker__trigger,
  .program-discovery-reset {
    height: 44px;
  }

  .program-discovery-card__actions > button {
    width: 100%;
  }
}

@media screen and (max-width: 720px) {
  .program-template-preview-overlay {
    align-items: end;
    padding: 0;
  }

  .program-template-preview {
    width: 100%;
    max-height: min(92dvh, 860px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px 16px 0 0;
  }

  .program-template-preview__header {
    min-height: 72px;
    padding: 14px 16px;
  }

  .program-template-preview__header::before {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-hard);
    content: '';
    transform: translateX(-50%);
  }

  .program-template-preview__body {
    padding: 16px;
  }

  .program-template-preview__adaptation {
    grid-template-columns: 1fr;
  }

  .program-template-preview__day {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .program-template-preview__day header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .program-template-preview__day header span,
  .program-template-preview__day header strong {
    grid-column: 1;
  }

  .program-template-preview__day header small {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .program-template-preview__footer {
    padding-inline: 16px;
  }
}

@media screen and (max-width: 360px) {
  .program-discovery-card__actions {
    grid-template-columns: 1fr;
  }

  .program-template-preview__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-template-preview__summary > span:last-child {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 360px) {
  .weekly-exposure__metrics {
    grid-template-columns: 1fr;
  }

  .program-discovery-toolbar {
    grid-template-columns: 1fr;
  }

  .program-discovery-filter-toggle {
    width: 100%;
  }

  .program-discovery-filters {
    grid-template-columns: 1fr;
  }

  .weekly-exposure__metrics article {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .weekly-exposure__metrics article > strong {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .weekly-exposure__metrics article > small {
    grid-column: 1;
  }

  .training-calendar__day {
    min-height: 44px;
  }

  .training-calendar__day i {
    right: 4px;
    bottom: 4px;
    min-width: 6px;
    width: 6px;
    height: 6px;
    font-size: 0;
  }

  .conditioning-history > button {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .conditioning-history time {
    grid-column: 1;
  }

  .conditioning-history button > span {
    grid-column: 1;
  }

  .conditioning-history svg {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pinned-cue-modal__backdrop {
    backdrop-filter: none;
  }

}

/* Keep the two planning actions above the two execution actions on phones. */
@media screen and (max-width: 768px) {
  #view-programs .day-detail-header > .session-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-programs .session-edit-program,
  #view-programs .session-fit-launch {
    grid-column: auto;
    width: 100%;
    min-width: 0;
  }
}

/* Unified Program workspace hierarchy. The command bar owns the only weekly
   day tablist, while the selected workout owns one equal-width action bar. */
#view-programs .command-bar .cmd-bar-inner {
  display: flex;
  min-width: 0;
}

#view-programs .cmd-weekly-nav {
  position: relative;
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
}

#view-programs .cmd-weekly-nav::before,
#view-programs .cmd-weekly-nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 50px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

#view-programs .cmd-weekly-nav::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-surface) 68%, transparent) 48%, transparent 100%);
}

#view-programs .cmd-weekly-nav::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-surface) 68%, transparent) 48%, transparent 100%);
}

#view-programs .cmd-weekly-nav.can-scroll-left::before,
#view-programs .cmd-weekly-nav.can-scroll-right::after {
  opacity: 1;
}

#view-programs .cmd-weekly-nav .weekly-grid {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#view-programs .cmd-weekly-nav .weekly-grid::-webkit-scrollbar {
  display: none;
}

#view-programs .cmd-weekly-nav .day-card {
  flex: 1 0 168px;
  min-width: 168px;
  min-height: 68px;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 11px 14px 11px 19px;
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
  font: inherit;
}

#view-programs .cmd-weekly-nav .day-card:hover {
  transform: none;
}

#view-programs .cmd-weekly-nav .day-card.rest {
  cursor: pointer;
}

#view-programs .cmd-weekly-nav .day-card.rest:hover {
  border-color: var(--border-hard);
  background: var(--bg-elevated);
}

#view-programs .cmd-weekly-nav .day-label {
  margin: 0;
  padding-right: 34px;
  font-size: 12px;
  line-height: 1.2;
}

#view-programs .cmd-weekly-nav .day-title {
  font-size: 13px;
  line-height: 1.28;
}

#view-programs .cmd-weekly-nav .day-card.is-today::after {
  top: 5px;
  right: 5px;
  padding: 1px 5px;
  font-size: 8px;
}

#view-programs .cmd-weekly-nav .weekly-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  overflow: hidden;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--border-hard) 72%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: var(--color-text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg-base) 32%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.9;
  transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

#view-programs .cmd-weekly-nav .weekly-carousel-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

#view-programs .cmd-weekly-nav .weekly-carousel-arrow--prev { left: 6px; }
#view-programs .cmd-weekly-nav .weekly-carousel-arrow--next { right: 6px; }

#view-programs .cmd-weekly-nav .weekly-carousel-arrow:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  color: var(--accent);
  opacity: 1;
}

#view-programs .cmd-weekly-nav .weekly-carousel-arrow span {
  font-size: 26px;
  line-height: 1;
}

#view-programs .cmd-mobile-day-picker {
  display: none;
}

#view-programs .cmd-kit-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding-left: 2px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

#view-programs .cmd-kit-summary strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 800;
}

#view-programs .cmd-kit-summary span {
  font-size: 11px;
  font-weight: 600;
}

#view-programs .cmd-calendar {
  gap: 7px;
}

#view-programs .day-detail-header--actions-only {
  display: block;
  padding: var(--space-4);
  border-left: 0;
}

#view-programs .day-detail-header--actions-only > .session-header-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#view-programs .day-detail-header--actions-only > .session-header-actions > button {
  width: 100%;
  min-width: 0;
}

@media screen and (max-width: 900px) {
  #view-programs .command-bar .cmd-bar-inner {
    padding-inline: var(--space-3);
  }

  #view-programs .cmd-cluster-right {
    gap: 4px;
  }

  #view-programs .cmd-cluster-right .cmd-label-lg,
  #view-programs .cmd-kit .cmd-label {
    display: none;
  }

  #view-programs .cmd-calendar,
  #view-programs .cmd-kit,
  #view-programs .cmd-briefing {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0;
  }

  #view-programs .cmd-kit .cmd-kit-summary {
    display: none;
  }
}

@media screen and (max-width: 720px) {
  #view-programs .programs-hero {
    display: block;
    min-height: 260px;
    margin: 0;
    padding: var(--space-6) 0;
    border-inline: 0;
    border-radius: 0;
    animation: none;
  }

  #view-programs .programs-hero[data-profile] {
    --program-hero-position-x: 76%;
    --program-hero-position-y: 12%;
  }

  #view-programs .programs-hero__inner {
    min-height: 212px;
    align-content: space-between;
    gap: var(--space-5);
    padding-inline: var(--space-4);
    animation-duration: 220ms;
  }

  #view-programs .programs-hero__name {
    max-width: 76%;
    font-size: clamp(3.25rem, 18vw, 5rem);
  }

  #view-programs .programs-hero__day {
    max-width: 82%;
    margin-top: var(--space-2);
    font-size: clamp(0.9rem, 4vw, 1.08rem);
  }

  #view-programs .programs-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  #view-programs .programs-hero__stat {
    min-width: 0;
    padding: 9px 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #view-programs .programs-hero__stat-value {
    font-size: clamp(1.45rem, 8vw, 2.1rem);
  }

  #view-programs .programs-hero__stat-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  #view-programs .command-bar {
    top: 60px;
  }

  #view-programs .command-bar .cmd-bar-inner {
    display: grid;
    width: 100%;
    min-height: 70px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-inline: 12px;
    padding-block: 8px;
  }

  #view-programs .cmd-weekly-nav {
    width: 100%;
    min-width: 0;
  }

  #view-programs .cmd-cluster-right {
    justify-self: end;
    min-width: 0;
    margin-left: 0;
    gap: 8px;
  }

  #view-programs.programs-layout--single-day-custom .command-bar .cmd-bar-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-programs.programs-layout--single-day-custom .cmd-cluster-right {
    grid-column: 1;
    justify-self: end;
  }

  #view-programs .cmd-weekly-nav::before,
  #view-programs .cmd-weekly-nav::after,
  #view-programs .cmd-weekly-nav > .weekly-carousel-arrow,
  #view-programs .cmd-weekly-nav > .weekly-grid {
    display: none !important;
  }

  #view-programs .cmd-mobile-day-picker {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
  }

  #view-programs .cmd-mobile-day-trigger {
    display: grid;
    width: 100%;
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 10px;
    align-items: center;
    padding: 7px 12px 7px 14px;
    border: 1px solid var(--border-hard);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--color-text);
    text-align: left;
  }

  #view-programs .cmd-mobile-day-trigger svg {
    color: var(--ink-secondary);
    transition: transform 180ms ease, color 180ms ease;
  }

  #view-programs .cmd-mobile-day-picker.is-open .cmd-mobile-day-trigger {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border-hard));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  #view-programs .cmd-mobile-day-picker.is-open .cmd-mobile-day-trigger svg {
    transform: rotate(180deg);
    color: var(--accent);
  }

  #view-programs .cmd-mobile-day-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  #view-programs .cmd-mobile-day-label {
    overflow: hidden;
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #view-programs .cmd-mobile-day-title {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-programs .cmd-mobile-day-panel {
    position: absolute;
    z-index: 12;
    top: calc(100% + 8px);
    left: 0;
    width: min(326px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--border-hard);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  #view-programs .cmd-mobile-day-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px 8px;
    border-bottom: 1px solid var(--border-soft);
  }

  #view-programs .cmd-mobile-day-panel__header strong {
    font-size: 13px;
  }

  #view-programs .cmd-mobile-day-panel__header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  #view-programs .cmd-mobile-day-panel__header span {
    color: var(--ink-secondary);
    font-size: 12px;
  }

  #view-programs .cmd-mobile-calendar-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: var(--color-surface-2);
    color: var(--accent);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
  }

  #view-programs .cmd-mobile-calendar-link span {
    color: inherit;
    font-size: inherit;
  }

  #view-programs .cmd-mobile-day-wheel-shell {
    position: relative;
    height: 180px;
    overflow: hidden;
  }

  #view-programs .cmd-mobile-day-wheel-shell::before,
  #view-programs .cmd-mobile-day-wheel-shell::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    z-index: 3;
    height: 58px;
    pointer-events: none;
  }

  #view-programs .cmd-mobile-day-wheel-shell::before {
    top: 0;
    background: linear-gradient(var(--bg-elevated), transparent);
  }

  #view-programs .cmd-mobile-day-wheel-shell::after {
    bottom: 0;
    background: linear-gradient(transparent, var(--bg-elevated));
  }

  #view-programs .cmd-mobile-day-selection {
    position: absolute;
    z-index: 1;
    top: 60px;
    right: 8px;
    left: 8px;
    height: 60px;
    border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--border-hard));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 9%, var(--color-surface));
    pointer-events: none;
  }

  #view-programs .cmd-mobile-day-wheel {
    position: relative;
    z-index: 2;
    height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 60px;
    scroll-padding-block: 60px;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    touch-action: pan-y;
  }

  #view-programs .cmd-mobile-day-wheel::-webkit-scrollbar {
    display: none;
  }

  #view-programs .cmd-mobile-day-option {
    display: grid;
    width: 100%;
    height: 60px;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 20px;
    scroll-snap-align: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-secondary);
    text-align: left;
    opacity: 0.58;
    transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
  }

  #view-programs .cmd-mobile-day-option > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #view-programs .cmd-mobile-day-option > strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-programs .cmd-mobile-day-option.is-preview,
  #view-programs .cmd-mobile-day-option.is-selected {
    color: var(--color-text);
    opacity: 1;
  }

  #view-programs .cmd-mobile-day-option.is-preview > span,
  #view-programs .cmd-mobile-day-option.is-selected > span {
    color: var(--accent);
  }

  #view-programs .day-detail-header--actions-only > .session-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-programs .cmd-weekly-nav:not([hidden]) + .cmd-cluster-right .cmd-calendar {
    display: none;
  }

  #view-programs .schedule-mode-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
  }

  #view-programs .schedule-mode-panel h3 {
    margin: 0;
    white-space: nowrap;
  }

  #view-programs .schedule-mode-panel .mode-btns {
    display: none;
  }

  #view-programs .program-phase-picker {
    display: block;
    min-width: 0;
  }

  #view-programs .program-phase-picker .soma-picker__trigger {
    min-height: 48px;
    padding: 8px 11px 8px 13px;
    border-radius: 11px;
    font-size: 13px;
  }
}

/* Program calendar: one date-first overview for the repeating Program week and
   the account's actual completed sessions. */
.program-calendar {
  position: fixed;
  inset: 0;
  z-index: 410;
  display: none;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  place-items: center;
}

.program-calendar.is-open { display: grid; }

.program-calendar__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-base) 34%, rgb(0 0 0 / 74%));
  backdrop-filter: blur(5px);
}

.program-calendar__panel {
  position: relative;
  display: flex;
  width: min(100%, 720px);
  max-height: min(94dvh, 850px);
  flex-direction: column;
  overflow: hidden auto;
  border: 1px solid var(--border-hard);
  border-radius: 22px;
  background: var(--color-surface);
  color: var(--ink-primary);
  box-shadow: var(--shadow-lg);
}

.program-calendar__header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.program-calendar__header > div:first-child { display: grid; min-width: 0; gap: 2px; }

.program-calendar__header span,
.program-calendar__selected > div > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.program-calendar__header h2 {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 31px);
  line-height: 1;
}

.program-calendar__month-actions { display: flex; flex: 0 0 auto; gap: 6px; }

.program-calendar__month-actions button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
}

.program-calendar__month-actions button:first-child svg { transform: rotate(180deg); }
.program-calendar__month-actions .program-calendar__close { margin-left: 4px; border-radius: var(--radius-full); }
.program-calendar__month-actions button:hover,
.program-calendar__month-actions button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

.program-calendar__scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 16px 20px 12px;
  padding: 13px 15px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-surface-2);
}

.program-calendar__scope > div { display: grid; gap: 3px; }
.program-calendar__scope strong { font-size: 14px; }
.program-calendar__scope span { color: var(--ink-secondary); font-size: 12px; line-height: 1.4; }
.program-calendar__scope dl { display: flex; margin: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 11px; }
.program-calendar__scope dl div { display: grid; min-width: 82px; place-content: center; padding: 7px; text-align: center; }
.program-calendar__scope dl div + div { border-left: 1px solid var(--border-soft); }
.program-calendar__scope dt { color: var(--ink-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.program-calendar__scope dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 15px; font-weight: 800; }

.program-calendar__weekdays,
.program-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-inline: 18px; }

.program-calendar__weekdays span {
  display: grid;
  min-height: 30px;
  place-items: center;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.program-calendar__grid { row-gap: 3px; }

.program-calendar__day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 52px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.program-calendar__day:hover,
.program-calendar__day:focus-visible { border-color: var(--border-hard); background: var(--color-surface-2); outline: none; }
.program-calendar__day.is-outside { color: var(--ink-muted); opacity: 0.42; }
.program-calendar__day.is-today { border-color: color-mix(in srgb, var(--accent) 64%, var(--border-hard)); color: var(--accent); font-weight: 800; }
.program-calendar__day.is-selected { border-color: var(--accent); background: var(--accent); color: var(--ink-on-accent); font-weight: 800; box-shadow: var(--shadow-md); }
.program-calendar__day > i { position: absolute; bottom: 5px; left: 50%; display: flex; gap: 2px; transform: translateX(-50%); }
.program-calendar__day b,
.program-calendar__legend i { display: block; width: 5px; height: 5px; border-radius: var(--radius-full); }
.program-calendar .is-program { background: var(--accent-secondary); }
.program-calendar .is-logged { background: var(--accent); }
.program-calendar .is-review { background: var(--signal-alert); }
.program-calendar__day.is-selected b { background: var(--ink-on-accent); }

.program-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 20px 14px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 650;
}

.program-calendar__legend span { display: inline-flex; align-items: center; gap: 6px; }

.program-calendar__selected {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.program-calendar__selected > div { display: grid; gap: 3px; }
.program-calendar__selected strong { font-size: 15px; }
.program-calendar__selected p { margin: 0; color: var(--ink-secondary); font-size: 12px; }
.program-calendar__selected button {
  min-width: 150px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  background: var(--accent);
  color: var(--ink-on-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.program-calendar__selected button:disabled { border-color: var(--border-soft); background: var(--color-surface-2); color: var(--ink-muted); }

@media screen and (max-width: 600px) {
  .program-calendar { align-items: end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .program-calendar__panel { width: 100%; max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
  .program-calendar__header { padding: 14px 10px 11px 14px; }
  .program-calendar__month-actions { gap: 3px; }
  .program-calendar__month-actions .program-calendar__close { margin-left: 1px; }
  .program-calendar__scope { grid-template-columns: minmax(0, 1fr); gap: 9px; margin: 10px 8px 7px; padding: 10px 12px; }
  .program-calendar__scope dl { width: 100%; }
  .program-calendar__scope dl div { min-width: 0; flex: 1; }
  .program-calendar__weekdays,
  .program-calendar__grid { padding-inline: 4px; }
  .program-calendar__grid { row-gap: 0; }
  .program-calendar__day { min-height: 44px; border-radius: 9px; }
  .program-calendar__legend { padding: 9px 11px 11px; }
  .program-calendar__selected { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 11px 8px max(11px, env(safe-area-inset-bottom)); }
  .program-calendar__selected button { width: 100%; min-width: 0; }
}

@media screen and (max-width: 359px) {
  .program-calendar__header h2 { font-size: 22px; }
  .program-calendar__month-actions button { width: 44px; }
  .program-calendar__weekdays,
  .program-calendar__grid { padding-inline: 0; }
}

@media screen and (max-width: 399px) {
  #view-programs .programs-hero {
    min-height: 244px;
  }

  #view-programs .programs-hero__inner {
    min-height: 196px;
  }

  #view-programs .command-bar .cmd-bar-inner {
    gap: 8px;
    padding-inline: 10px;
  }

  #view-programs .cmd-mobile-day-trigger {
    padding-inline: 11px 8px;
  }

  #view-programs .cmd-cluster-right {
    gap: 6px;
  }

  #view-programs .schedule-mode-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-programs .cmd-mobile-day-trigger svg,
  #view-programs .cmd-mobile-day-option {
    transition: none;
  }

  #view-programs .cmd-mobile-day-wheel {
    scroll-behavior: auto !important;
  }
}

/* Preserve the grouped account layout against the earlier Phase 7 flex rule. */
.progress-section .data-mgmt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

@media screen and (max-width: 700px) {
  .progress-section .data-mgmt { grid-template-columns: 1fr; }
}

.skip-link {
  position: fixed;
  z-index: 100000;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  color: var(--ink-on-accent);
  font-size: var(--text-sm);
  font-weight: 750;
  background: var(--color-primary);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-md);
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--transition-interactive);
}
.skip-link:focus { transform: translateY(0); }

/* Nutrition task hierarchy: today's decision first, references on demand. */
.nutrition-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-3);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--color-surface)) 0%, var(--color-surface) 62%);
}

.nutrition-today__copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.nutrition-today__copy > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nutrition-today__copy h2 {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
}

.nutrition-today__copy p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.nutrition-today__target {
  display: grid;
  min-width: 176px;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.nutrition-today__target small {
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 730;
}

.nutrition-today__target strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
}

.nutrition-today__target span {
  color: var(--ink-secondary);
  font-size: 12px;
}

.nutrition-today__action {
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-size: var(--text-sm);
  font-weight: 780;
  cursor: pointer;
}

.nutrition-section-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: var(--space-4);
}

.nutrition-section-nav button {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 730;
  text-align: left;
  cursor: pointer;
}

.nutrition-section-nav button > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
}

.nutrition-reference.card {
  padding: 0;
  overflow: clip;
}

.nutrition-reference__summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px;
  gap: var(--space-3);
  align-items: center;
  min-height: 72px;
  padding: 12px var(--space-5);
  color: var(--ink-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nutrition-reference__summary::-webkit-details-marker { display: none; }

.nutrition-reference__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.nutrition-reference__summary > span:first-child {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.nutrition-reference__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.nutrition-reference__heading strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.nutrition-reference__heading small {
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.nutrition-reference__summary svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-secondary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform var(--transition-interactive);
}

.nutrition-reference[open] .nutrition-reference__summary svg { transform: rotate(180deg); }

.nutrition-reference__body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-soft);
}

.nutrition-reference__body > :first-child { margin-top: var(--space-4); }

@media (hover: hover) and (pointer: fine) {
  .nutrition-today__action:hover { background: var(--accent-hot); }
  .nutrition-section-nav button:hover,
  .nutrition-reference__summary:hover { background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-2)); }
}

@media screen and (max-width: 900px) {
  .nutrition-today { grid-template-columns: minmax(0, 1fr) auto; }
  .nutrition-today__action { grid-column: 1 / -1; }
}

@media screen and (max-width: 600px) {
  .nutrition-today {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .nutrition-today__copy { grid-column: 1 / -1; }
  .nutrition-today__target { min-width: 0; }
  .nutrition-today__action { grid-column: auto; align-self: center; }
  .nutrition-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutrition-reference__summary { padding-inline: var(--space-4); }
  .nutrition-reference__body { padding-inline: var(--space-4); }
}

@media screen and (max-width: 360px) {
  .nutrition-today { grid-template-columns: 1fr; }
  .nutrition-today__action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nutrition-reference__summary svg { transition: none; }
}

/* Evidence disclosure contract: concise by default, sources available in place. */
.evidence-disclosure {
  margin-top: var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface-2) 88%, transparent);
  overflow: clip;
}

.evidence-disclosure__summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 24px;
  gap: var(--space-3);
  align-items: center;
  min-height: 68px;
  padding: 12px 16px;
  color: var(--ink-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.evidence-disclosure__summary::-webkit-details-marker { display: none; }

.evidence-disclosure__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.evidence-disclosure__mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--color-surface));
  color: var(--accent);
}

.evidence-disclosure__mark svg,
.evidence-disclosure__chevron {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.evidence-disclosure__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.evidence-disclosure__heading strong {
  font-size: var(--text-sm);
  line-height: 1.3;
}

.evidence-disclosure__heading small {
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.evidence-disclosure__confidence {
  display: inline-flex;
  min-height: 44px;
  max-width: 230px;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
  text-align: center;
}

.evidence-disclosure__confidence svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.evidence-disclosure__confidence:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.evidence-disclosure__chevron {
  color: var(--ink-secondary);
  transition: transform var(--transition-interactive);
}

.evidence-disclosure[open] .evidence-disclosure__chevron { transform: rotate(180deg); }

.evidence-disclosure__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border-soft);
}

.evidence-disclosure__body > p {
  max-width: 78ch;
  margin: 14px 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.evidence-disclosure__sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.evidence-disclosure__source {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 64px;
  padding: 11px 38px 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive);
}

.evidence-disclosure__source span {
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.evidence-disclosure__source small {
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.evidence-disclosure__source b {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--accent);
  font-size: 14px;
  transform: translateY(-50%);
}

.nutrition-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.45fr);
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-3);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--color-surface));
}

.nutrition-trust__copy {
  display: grid;
  gap: 5px;
}

.nutrition-trust__copy > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nutrition-trust__copy > strong {
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
}

.nutrition-trust__copy > p {
  max-width: 70ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.nutrition-trust__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.nutrition-trust__meta > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.nutrition-trust__meta dt {
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nutrition-trust__meta dd {
  margin: 0;
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.evidence-disclosure--nutrition {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.nutrition-supplement-note {
  margin: var(--space-3) 0 0;
  color: var(--ink-secondary);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.nutrition-supplement-note strong { color: var(--ink-primary); }

@media (hover: hover) and (pointer: fine) {
  .evidence-disclosure__summary:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
  .evidence-disclosure__confidence:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .evidence-disclosure__source:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
    background: color-mix(in srgb, var(--accent) 5%, var(--color-surface));
    transform: translateY(-1px);
  }
}

@media screen and (max-width: 768px) {
  .nutrition-trust { grid-template-columns: 1fr; }
}

@media screen and (max-width: 600px) {
  .evidence-disclosure__summary {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    gap: 10px;
    padding-inline: 12px;
  }

  .evidence-disclosure__confidence {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }

  .evidence-disclosure__chevron {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .evidence-disclosure__body { padding-inline: 12px; }
  .evidence-disclosure__sources { grid-template-columns: 1fr; }
  .nutrition-trust { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .evidence-disclosure__chevron,
  .evidence-disclosure__source { transition: none; }
}

@media screen and (max-width: 700px) {
  .catalog-page-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .catalog-suggest-trigger {
    width: fit-content;
  }

  .catalog-suggestion-modal__panel {
    max-height: min(720px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))));
  }

  .catalog-suggestion-modal__panel > footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-suggestion-modal__panel > footer button {
    width: 100%;
    padding-inline: 10px;
  }
}

@media screen and (max-width: 399px) {
  .catalog-suggest-trigger {
    width: 100%;
  }

  .catalog-suggestion-modal__body {
    padding: 14px;
  }

  .catalog-suggestion-modal__body textarea {
    min-height: 108px;
  }
}

/* The application stays behind one stable branded surface until account,
   Program, and route state have resolved. This prevents private viewers from
   seeing public or stale cached Programs during startup. */
html[data-app-state="booting"] body {
  overflow: hidden;
}

.app-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: var(--ink-primary);
  background: var(--color-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.app-boot-screen::before {
  content: "";
  position: absolute;
  width: min(70vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%);
  pointer-events: none;
}

.app-boot-screen__brand,
.app-boot-screen__status,
.app-boot-screen__progress,
.app-boot-screen__recovery {
  position: relative;
}

.app-boot-screen__brand {
  display: inline-flex;
  gap: 13px;
  align-items: center;
  color: var(--accent);
}

.app-boot-screen__brand span {
  color: var(--ink-primary);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 760;
  letter-spacing: 0.12em;
}

.app-boot-screen__status {
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  font-weight: 650;
}

.app-boot-screen__progress {
  width: min(220px, 62vw);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-soft);
}

.app-boot-screen__progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: app-boot-progress 1.15s ease-in-out infinite;
}

.app-boot-screen__recovery {
  display: grid;
  width: min(100%, 440px);
  gap: 14px;
  text-align: center;
}

.app-boot-screen__recovery[hidden] {
  display: none;
}

.app-boot-screen__recovery p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.app-boot-screen__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-boot-screen__actions button {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  color: var(--ink-primary);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.app-boot-screen__actions button:hover {
  border-color: var(--accent);
}

.app-boot-screen__actions button:focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.app-boot-screen__local {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--ink-on-accent) !important;
}

.app-boot-screen.is-recoverable .app-boot-screen__progress span {
  animation-play-state: paused;
}

@media (max-width: 399px) {
  .app-boot-screen__actions {
    grid-template-columns: 1fr;
  }
}

html[data-app-state="ready"] .app-boot-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes app-boot-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-screen { transition: none; }
  .app-boot-screen__progress span { animation: none; }
}

/* Workout date picker: one shared history-aware calendar for web and the
   future native shell. The picker reads existing Program and log state only;
   the hidden date field remains the canonical session-log value. */
.session-log-overlay .session-log-date-control.session-log-date-trigger {
  display: inline-flex;
  width: auto;
  min-width: 230px;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 16px;
  border: 1px solid var(--border-hard);
  border-radius: 13px;
  background: var(--color-surface-1);
  color: var(--ink-primary);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), box-shadow var(--transition-interactive);
}

.session-log-overlay .session-log-date-control.session-log-date-trigger::after {
  content: none;
}

.session-log-overlay .session-log-date-control.session-log-date-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-hard));
  background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-1));
}

.session-log-overlay .session-log-date-control.session-log-date-trigger:focus-visible,
.session-log-overlay .session-log-date-control.session-log-date-trigger[aria-expanded='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.session-log-date-trigger .session-log-date-display {
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.session-log-date-trigger > svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.session-log-calendar {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  place-items: center;
}

.session-log-calendar.is-open {
  display: grid;
}

.session-log-calendar__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-base) 34%, rgb(0 0 0 / 74%));
  backdrop-filter: blur(5px);
}

.session-log-calendar__panel {
  position: relative;
  display: flex;
  width: min(100%, 720px);
  max-height: min(94dvh, 850px);
  flex-direction: column;
  overflow: hidden auto;
  border: 1px solid var(--border-hard);
  border-radius: 22px;
  background: var(--color-surface);
  color: var(--ink-primary);
  box-shadow: var(--shadow-lg);
}

.session-log-calendar__header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.session-log-calendar__header > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.session-log-calendar__header span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.session-log-calendar__header h3 {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 31px);
  line-height: 1;
}

.session-log-calendar__month-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.session-log-calendar__month-actions button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface-2);
  color: var(--ink-secondary);
  cursor: pointer;
}

.session-log-calendar__month-actions button:first-child svg {
  transform: rotate(180deg);
}

.session-log-calendar__month-actions button:hover:not(:disabled),
.session-log-calendar__month-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-hard));
  color: var(--accent);
  outline: none;
}

.session-log-calendar__month-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.session-log-calendar__month-actions .session-log-calendar__close {
  margin-left: 4px;
  border-radius: var(--radius-full);
}

.session-log-calendar__month-summary {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 20px 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--color-surface-2);
}

.session-log-calendar__month-summary span {
  display: grid;
  min-height: 54px;
  place-content: center;
  padding: 8px;
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.session-log-calendar__month-summary span + span {
  border-left: 1px solid var(--border-soft);
}

.session-log-calendar__month-summary strong {
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 16px;
}

.session-log-calendar__weekdays,
.session-log-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-inline: 18px;
}

.session-log-calendar__weekdays span {
  display: grid;
  min-height: 30px;
  place-items: center;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-log-calendar__grid {
  row-gap: 3px;
}

.session-log-calendar__day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 52px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive);
}

.session-log-calendar__day:hover:not(:disabled) {
  border-color: var(--border-soft);
  background: var(--color-surface-2);
}

.session-log-calendar__day:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: -2px;
}

.session-log-calendar__day.is-outside {
  color: var(--ink-muted);
  opacity: 0.5;
}

.session-log-calendar__day:disabled {
  color: var(--ink-muted);
  opacity: 0.27;
  cursor: default;
}

.session-log-calendar__day.is-today {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border-hard));
  color: var(--accent);
  font-weight: 800;
}

.session-log-calendar__day.has-current-exercise:not(.is-selected) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-secondary) 68%, transparent);
}

.session-log-calendar__day.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-weight: 800;
  box-shadow: var(--shadow-md);
}

.session-log-calendar__day-number {
  font-size: 14px;
  line-height: 1;
}

.session-log-calendar__day-count {
  position: absolute;
  top: 4px;
  right: 5px;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  opacity: 0.78;
}

.session-log-calendar__markers {
  position: absolute;
  bottom: 5px;
  left: 50%;
  display: flex;
  gap: 2px;
  transform: translateX(-50%);
}

.session-log-calendar__markers i,
.session-log-calendar__legend i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
}

.session-log-calendar__markers .is-program,
.session-log-calendar__legend .is-program { background: var(--accent-secondary); }
.session-log-calendar__markers .is-logged,
.session-log-calendar__legend .is-logged { background: var(--accent); }
.session-log-calendar__markers .is-review,
.session-log-calendar__legend .is-review { background: var(--signal-alert); }
.session-log-calendar__day.is-selected .session-log-calendar__markers i { background: var(--ink-on-accent); }

.session-log-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 20px 14px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 650;
}

.session-log-calendar__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.session-log-calendar__selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(235px, 0.55fr);
  gap: 18px;
  margin: 0 20px 16px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 5%, var(--color-surface-2));
}

.session-log-calendar__selected-copy {
  display: grid;
  align-content: start;
  gap: 4px;
}

.session-log-calendar__selected-copy > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-log-calendar__selected-copy strong {
  color: var(--ink-primary);
  font-size: 15px;
}

.session-log-calendar__selected-copy p,
.session-log-calendar__review {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.session-log-calendar__review {
  margin-top: 5px;
  color: var(--signal-alert);
  font-weight: 700;
}

.session-log-calendar__selected dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--color-surface-1);
}

.session-log-calendar__selected dl > div {
  display: grid;
  place-content: center;
  padding: 8px 5px;
  text-align: center;
}

.session-log-calendar__selected dl > div + div {
  border-left: 1px solid var(--border-soft);
}

.session-log-calendar__selected dt {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}

.session-log-calendar__selected dd {
  margin: 2px 0 0;
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
}

.session-log-calendar__footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr minmax(170px, auto);
  gap: 8px;
  padding: 13px 20px max(13px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.session-log-calendar__footer button {
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--border-hard);
  border-radius: 11px;
  background: var(--color-surface-2);
  color: var(--ink-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

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

.session-log-calendar__footer .session-log-calendar__today {
  color: var(--accent);
}

.session-log-calendar__footer .session-log-calendar__confirm {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

@media screen and (max-width: 600px) {
  .session-log-overlay .session-log-date-row {
    align-items: stretch;
  }

  .session-log-overlay .session-log-date-control.session-log-date-trigger {
    width: 100%;
    min-width: 0;
  }

  .session-log-calendar {
    align-items: end;
    padding: max(8px, env(safe-area-inset-top)) 0 0;
  }

  .session-log-calendar__panel {
    width: 100%;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
  }

  .session-log-calendar__header {
    padding: 14px 10px 11px 14px;
  }

  .session-log-calendar__month-actions {
    gap: 3px;
  }

  .session-log-calendar__month-actions .session-log-calendar__close {
    margin-left: 1px;
  }

  .session-log-calendar__month-summary {
    margin: 10px 8px 7px;
  }

  .session-log-calendar__month-summary span {
    min-height: 49px;
    padding: 5px 2px;
    font-size: 12px;
  }

  .session-log-calendar__weekdays,
  .session-log-calendar__grid {
    padding-inline: 4px;
  }

  .session-log-calendar__grid {
    row-gap: 0;
  }

  .session-log-calendar__day {
    min-height: 44px;
    border-radius: 9px;
  }

  .session-log-calendar__legend {
    gap: 6px 11px;
    padding: 9px 11px 11px;
    font-size: 12px;
  }

  .session-log-calendar__selected {
    grid-template-columns: 1fr;
    gap: 11px;
    margin: 0 8px 10px;
    padding: 12px;
  }

  .session-log-calendar__selected dl > div {
    min-height: 45px;
  }

  .session-log-calendar__footer {
    grid-template-columns: auto auto minmax(0, 1fr);
    padding: 9px 8px max(9px, env(safe-area-inset-bottom));
  }

  .session-log-calendar__footer button {
    padding-inline: 10px;
    font-size: 12px;
  }
}

@media screen and (max-width: 359px) {
  .session-log-calendar__header h3 {
    font-size: 22px;
  }

  .session-log-calendar__month-actions button {
    width: 44px;
  }

  .session-log-calendar__weekdays,
  .session-log-calendar__grid {
    padding-inline: 0;
  }

  .session-log-calendar__month-summary {
    margin-top: 8px;
  }

  .session-log-calendar__day-count {
    top: 3px;
    right: 3px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .session-log-calendar__day,
  .session-log-overlay .session-log-date-control.session-log-date-trigger {
    transition: none;
  }
}