* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;

  --background: var(--fp-bg-page);
  --surface: var(--fp-surface);
  --surface-secondary: var(--fp-surface-raised);
  --border: var(--fp-border);
  --text: var(--fp-text-primary);
  --muted: var(--fp-text-muted);
  --accent: var(--fp-brand-primary);
  --accent-hover: var(--fp-brand-primary-hover);
  --danger: var(--fp-danger);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--text);
  background:
    radial-gradient(
      circle at top,
      rgba(53, 207, 223, 0.18),
      transparent 35%
    ),
    var(--background);
}

button,
input,
select,
textarea {
  font: inherit;
}

.builder-page {
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 80px;
}

.builder-card,
.program-result {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(32, 43, 44, 0.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}

.builder-card {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px;
}

.builder-header {
  margin-bottom: 32px;
}

.builder-badge {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(53, 207, 223, 0.35);
  border-radius: 999px;
  color: #bcc6c2;
  background: rgba(53, 207, 223, 0.12);
  font-size: 13px;
  font-weight: 700;
}

.builder-header h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1;
}

.builder-header p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  line-height: 1.65;
}

.form-group {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

label {
  font-size: 14px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 13px;
  outline: none;
  color: var(--text);
  background: var(--surface-secondary);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

input,
select {
  min-height: 49px;
  padding: 0 14px;
}

textarea {
  resize: vertical;
  padding: 14px;
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(53, 207, 223, 0.14);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-secondary);
  cursor: pointer;
}

.checkbox-option input {
  width: 17px;
  min-height: auto;
  accent-color: var(--accent);
}

#generate-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  color: var(--fp-text-inverse);
  background: var(--accent);
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

#generate-button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

#generate-button:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.builder-status {
  min-height: 22px;
  margin: 14px 0 0;
  color: var(--muted);
  text-align: center;
  white-space: pre-line;
}

.builder-status.error {
  color: var(--danger);
}

.program-result {
  max-width: 1450px;
  margin: 28px auto 0;
  padding: 32px;
}

.program-result h2 {
  margin-top: 0;
}

.program-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.program-summary span {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-secondary);
  font-size: 13px;
}

.workout-day {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-secondary);
}

.workout-day h3 {
  margin: 0 0 16px;
}

.hidden {
  display: none;
}
.workout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 230px;
    height: 50px;
    padding: 0 22px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(135deg, #6e9fc2, #7fc8b4);
    color: var(--fp-text-inverse);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.workout-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 24px rgba(110, 159, 194,.35);
}

.workout-btn:active {
    transform: translateY(0);
}
@media (max-width: 640px) {
  .builder-page {
    width: min(100% - 20px, 1120px);
    padding-top: 20px;
  }

  .builder-card,
  .program-result {
    padding: 22px;
    border-radius: 18px;
  }

  .form-grid,
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}
/* ================================
   Generated workout program
================================ */

#program-result {
  margin-top: 32px;
}

.program-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(53, 207, 223, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(53, 207, 223, 0.18),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(20, 29, 48, 0.98),
      rgba(26, 35, 36, 0.98)
    );
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.program-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.program-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #9e87ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.program-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.08;
}

.program-description {
  max-width: 680px;
  margin: 13px 0 0;
  color: #aeb9ce;
  font-size: 15px;
  line-height: 1.65;
}

.print-program-button {
  flex-shrink: 0;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.print-program-button:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 207, 223, 0.75);
  background: rgba(53, 207, 223, 0.16);
}

.save-program-button {
  flex-shrink: 0;
  padding: 12px 20px;
  border: 1px solid rgba(47, 155, 255, 0.62);
  border-radius: 12px;
  background: linear-gradient(135deg, #52d9e6 0%, #64b5ff 100%);
  box-shadow: 0 14px 34px rgba(47, 155, 255, 0.3);
  color: #04111f;
  font: inherit;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.save-program-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(47, 155, 255, 0.34);
  filter: saturate(1.08);
}

.save-program-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(53, 207, 223, 0.3), 0 18px 42px rgba(47, 155, 255, 0.34);
}

.save-program-button:disabled {
  cursor: not-allowed;
  border-color: rgba(174, 191, 210, 0.42);
  background: #8392a8;
  color: #101827;
  opacity: 0.82;
  transform: none;
  box-shadow: none;
}

.program-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.summary-item {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 20px 20px 22px;
  border: 1px solid rgba(110, 159, 194, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(32, 43, 44, 0.92), rgba(30, 41, 73, 0.78)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.summary-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #35cfdf, #6e9fc2, #2f9bff);
}

.summary-item::after {
  content: "";
  position: absolute;
  inset-inline-end: 16px;
  bottom: 14px;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(110, 159, 194, 0.2), transparent 68%);
  pointer-events: none;
}

.summary-item span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8, 13, 13, 0.52);
  color: #9ddcff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.summary-item strong {
  position: relative;
  z-index: 1;
  display: block;
  color: #ffffff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 950;
  line-height: 1.25;
  text-wrap: balance;
}

.program-days {
  display: grid;
  gap: 26px;
}

.weekly-volume-summary {
  margin-top: 30px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: rgba(15, 23, 39, 0.82);
}
.weekly-volume-header h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #ffffff;
}
.weekly-volume-header p {
  margin: 0 0 18px;
  color: rgba(226, 232, 240, 0.68);
  font-size: 13.5px;
}
.muscle-volume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.muscle-volume-row {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.muscle-volume-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.muscle-volume-name {
  font-weight: 800;
  color: #f1f5f9;
  font-size: 14px;
}
.muscle-volume-status {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.muscle-volume-status--below {
  color: var(--fp-warning, #e1b75d);
  background: var(--fp-warning-soft, rgba(225, 183, 93, 0.16));
}
/* In the preferred zone: the only status that reads as fully "done". */
.muscle-volume-status--in-preferred-zone {
  color: var(--fp-success, #55c98a);
  background: var(--fp-success-soft, rgba(85, 201, 138, 0.16));
}
/* Valid but below/above the preferred target: a genuinely different, less
   confident visual from "in-preferred-zone" -- this is the fix for "10
   sets of chest reads the same as a well-targeted 16". Still not a warning
   color (the plan IS valid), just a softer, more neutral affirmative. */
.muscle-volume-status--valid-below-preferred,
.muscle-volume-status--valid-above-preferred {
  color: var(--fp-accent, #7fb3e0);
  background: var(--fp-accent-soft, rgba(127, 179, 224, 0.16));
}
.muscle-volume-status--above {
  color: var(--fp-danger, #ef6f7f);
  background: var(--fp-danger-soft, rgba(239, 111, 127, 0.16));
}
/* Secondary/optional/incomplete are deliberately neutral, not
   success/warning/danger colored: none of them are a verdict on whether
   the plan is valid, so they must not visually read as one. */
.muscle-volume-status--secondary,
.muscle-volume-status--not-targeted,
.muscle-volume-status--incomplete {
  color: rgba(226, 232, 240, 0.65);
  background: rgba(255, 255, 255, 0.06);
  cursor: help;
}
.muscle-volume-quality-score,
.muscle-volume-starting-week-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.65);
}
.muscle-volume-numbers {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.muscle-volume-numbers strong {
  font-size: 16px;
  color: #ffffff;
}
.muscle-volume-range {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.6);
}
.muscle-volume-bar {
  position: relative;
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.muscle-volume-bar-target {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.muscle-volume-bar-fill {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f9bff, #35cfdf);
}
.muscle-volume-row[data-status="below"] .muscle-volume-bar-fill,
.muscle-volume-row[data-status="above"] .muscle-volume-bar-fill {
  background: linear-gradient(90deg, #e1b75d, #ef6f7f);
}
.muscle-volume-detail {
  margin-top: 8px;
}
.muscle-volume-detail summary {
  cursor: pointer;
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.55);
}
.muscle-volume-unmapped-notice {
  margin: 16px 0 0;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.55);
}
@media (max-width: 640px) {
  .muscle-volume-grid {
    grid-template-columns: 1fr;
  }
}

.workout-day {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 4px solid #35cfdf;
  border-radius: 20px;
  background: rgba(15, 23, 39, 0.82);
}

.workout-day-2 {
  border-top-color: #16c7a3;
}

.workout-day-3 {
  border-top-color: #ff9f43;
}

.workout-day-4 {
  border-top-color: #38a8ff;
}

.workout-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.025);
}

.day-label {
  display: block;
  margin-bottom: 5px;
  color: #9e87ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workout-day-2 .day-label {
  color: #46dcbc;
}

.workout-day-3 .day-label {
  color: #ffb267;
}

.workout-day-4 .day-label {
  color: #6bbcff;
}

.workout-day-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
}

.exercise-count {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #aeb9ce;
  font-size: 12px;
  font-weight: 750;
}

/* ================================
   Exercise result cards
================================ */

.exercise-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
}

.muscle-exercise-group {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(110, 159, 194, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(32, 43, 44, 0.74), rgba(8, 13, 13, 0.48)),
    rgba(255, 255, 255, 0.025);
}

.muscle-exercise-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px 4px;
}

.muscle-exercise-group-header span {
  color: #7fc8b4;
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 950;
  letter-spacing: -0.02em;
}

.muscle-exercise-group-header strong {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(53, 207, 223, 0.14);
  color: #9d8fc7;
  font-size: 12px;
  font-weight: 900;
}

.muscle-exercise-group-grid {
  display: grid;
  gap: 16px;
}

.exercise-card {
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) minmax(300px, 1fr);
  min-height: 285px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(7, 11, 20, 0.84), rgba(32, 43, 44, 0.72)),
    rgba(7, 11, 20, 0.55);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.exercise-card:hover {
  border-color: rgba(53, 207, 223, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.exercise-card-media {
  position: relative;
  min-height: 285px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(35, 124, 255, 0.15), transparent 48%),
    #020617;
}

.exercise-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.exercise-card-number {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(5, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 900;
}

.exercise-demo-button {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(5, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.exercise-demo-button:hover {
  background: rgba(53, 207, 223, 0.35);
  transform: translateY(-1px);
}

.exercise-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 2.4vw, 30px);
}

.exercise-card-name {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.exercise-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.intensity-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
  text-decoration: underline dotted rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

.intensity-help:focus-visible {
  border-radius: 5px;
  outline: 2px solid #6e9fc2;
  outline-offset: 3px;
}

.exercise-note {
  overflow-wrap: anywhere;
  display: block;
  margin: 12px 0 0;
  color: #8794aa;
  font-size: 12px;
  line-height: 1.45;
}

.muscle-badge,
.equipment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.muscle-badge {
  background: rgba(53, 207, 223, 0.15);
  color: #b9a8ff;
}

.equipment-badge {
  background: rgba(22, 199, 163, 0.13);
  color: #62e1c5;
}

.exercise-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.exercise-stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 10px;
  border: 1px solid rgba(142, 157, 153, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.72), rgba(32, 43, 44, 0.82)),
    rgba(255, 255, 255, 0.035);
  text-align: center;
}

.exercise-stat-label {
  color: #8fb5d6;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.exercise-stat-value {
  color: #ffffff;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 950;
  line-height: 1.05;
}

.reroll-button {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  min-width: 96px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(53, 207, 223, 0.7);
  border-radius: 12px;
  background: rgba(4, 17, 31, 0.94);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.reroll-button:hover {
  background: #35cfdf;
  color: #04111f;
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(53, 207, 223, 0.35);
}

.reroll-button:active {
  transform: translateY(0);
}

.reroll-button:focus-visible {
  outline: 3px solid rgba(53, 207, 223, 0.48);
  outline-offset: 3px;
}
.reroll-button.is-loading {
  pointer-events: none;
  opacity: 0.8;
  box-shadow: inset 0 -3px 0 #35cfdf;
}
/* Mobile */

@media (max-width: 760px) {
  .program-card {
    padding: 21px 14px;
    border-radius: 20px;
  }

  .program-header {
    flex-direction: column;
  }

  .print-program-button {
    width: 100%;
  }

  .program-summary {
    grid-template-columns: 1fr;
  }

  .workout-day-header {
    align-items: flex-start;
    padding: 19px 17px;
  }

  .workout-day-header h3 {
    font-size: 19px;
  }

  .program-actions{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:10px}
  .program-actions button{width:100%;min-height:48px}
  .exercise-cards{grid-template-columns:1fr;padding:14px;gap:14px}
  .muscle-exercise-group{padding:12px;border-radius:18px}
  .muscle-exercise-group-header{align-items:flex-start;flex-direction:column;gap:8px}
  .exercise-card{grid-template-columns:1fr;min-height:0}
  .exercise-card-media{aspect-ratio:16/11;min-height:0}
  .exercise-card-body{justify-content:flex-start}
  .exercise-card-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .muscle-badge,.equipment-badge{white-space:normal;text-align:center}
}

/* Print / PDF */
@media (min-width: 1200px) {

  .builder-page {
    width: min(1500px, calc(100% - 32px));
  }

  .program-result {
    max-width: 1450px;
  }
}
@media print {
  body {
    background: #ffffff !important;
  }

  body * {
    visibility: hidden;
  }

  #program-result,
  #program-result * {
    visibility: visible;
  }

  #program-result {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
  }

  .program-card,
  .workout-day {
    background: #ffffff !important;
    color: #202b2c !important;
    box-shadow: none !important;
  }

  .program-card {
    padding: 15px;
    border: 0;
  }

  .program-header h2,
  .workout-day-header h3,
  .exercise-card-name,
  .summary-item strong,
  .exercise-stat-value {
    color: #202b2c !important;
  }

  .program-description,
  .exercise-note {
    color: #8e9d99 !important;
  }

  .print-program-button {
    display: none;
  }

  .exercise-card {
    break-inside: avoid;
    border: 1px solid #d3dbd7 !important;
    background: #ffffff !important;
  }

  .reroll-button,
  .exercise-demo-button {
    display: none;
  }

  .workout-day {
    break-inside: avoid;
    margin-bottom: 18px;
  }
}

.builder-navigation {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 20px;
}

.builder-navigation a {
  color: #bcc6c2;
  font-weight: 750;
  text-decoration: none;
}


/* Visually hidden helper (shared) */
.visually-hidden-select{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}

/* =========================================================
   Workout Builder guided wizard
   ========================================================= */
.builder-card{max-width:1120px}
.builder-wizard{display:block}
.wizard-progress{margin-bottom:24px;padding:16px 18px;border:1px solid rgba(53, 207, 223,.2);border-radius:16px;background:rgba(53, 207, 223,.07)}
.wizard-progress-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:11px;color:#bcc6c2;font-size:13px}.wizard-progress-topline strong{color:#fff;font-size:15px}.wizard-progress-track{height:8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}.wizard-progress-track span{display:block;width:14.285%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#35cfdf,#2f9bff);transition:width .28s ease}
.wizard-step{display:none;min-height:520px;animation:wizardStepIn .28s ease-out}.wizard-step.is-active{display:block}.wizard-step-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}.wizard-step-heading>span{display:grid;width:44px;height:44px;place-items:center;flex:0 0 44px;border:1px solid rgba(53, 207, 223,.35);border-radius:14px;color:#bcc6c2;background:rgba(53, 207, 223,.12);font-weight:900}.wizard-step-heading h2{margin:0;color:#fff;font-size:clamp(25px,4vw,36px)}.wizard-step-heading p{margin:7px 0 0;color:var(--muted);line-height:1.55}
.visually-hidden-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.visual-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.visual-choice-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.visual-choice-grid--equipment{grid-template-columns:repeat(3,minmax(0,1fr))}.visual-choice-card{position:relative;display:block;min-height:450px;overflow:hidden;border:2px solid rgba(255,255,255,.09);border-radius:19px;cursor:pointer;background:#202b2c;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.visual-choice-card:hover{transform:translateY(-2px);border-color:rgba(53, 207, 223,.55);box-shadow:0 18px 40px rgba(0,0,0,.28)}.visual-choice-card input{position:absolute;opacity:0;pointer-events:none}.visual-choice-image,.visual-choice-shade{position:absolute;inset:0}.visual-choice-image{background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .28s ease}.visual-choice-card:hover .visual-choice-image{transform:scale(1.035)}.visual-choice-shade{background:linear-gradient(180deg,rgba(8, 13, 13,.02) 0%,rgba(8, 13, 13,.1) 42%,rgba(8, 13, 13,.82) 100%)}.visual-choice-content{position:absolute;inset:auto 18px 17px;z-index:2;display:grid;gap:5px}.visual-choice-content strong{color:#fff;font-size:20px;text-shadow:0 2px 10px rgba(0,0,0,.5)}.visual-choice-content small{color:#d6deeb;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.5)}.visual-choice-check{position:absolute;top:14px;right:14px;z-index:3;display:none;width:36px;height:36px;place-items:center;border-radius:50%;color:var(--fp-text-inverse);background:#2f9bff;box-shadow:0 10px 22px rgba(47, 155, 255,.3);font-weight:950}.visual-choice-card:has(input:checked){border-color:#35cfdf;box-shadow:0 0 0 3px rgba(53, 207, 223,.18),0 20px 45px rgba(0,0,0,.34)}.visual-choice-card:has(input:checked) .visual-choice-check{display:grid}.visual-choice-card--wide{grid-column:1/-1}.visual-choice-card--equipment{min-height:172px}.visual-choice-card--equipment .visual-choice-content strong{font-size:17px}

/* Primary goals */
.visual-choice-card--goal-muscle .visual-choice-image{background-image:linear-gradient(135deg,rgba(110, 159, 194,.24),rgba(8, 13, 13,.15)),url('/images/workout-builder/goals/build-muscle.webp');background-position:center 12%}
.visual-choice-card--goal-fat .visual-choice-image{background-image:linear-gradient(135deg,rgba(16,185,129,.22),rgba(8, 13, 13,.15)),url('/images/workout-builder/goals/lost-fat.webp');background-position:center 10%}
.visual-choice-card--goal-strength .visual-choice-image{background-image:linear-gradient(135deg,rgba(214, 164, 93,.22),rgba(8, 13, 13,.15)),url('/images/workout-builder/goals/increase-strength.webp');background-position:center 32%}
.visual-choice-card--goal-skills .visual-choice-image{background-image:linear-gradient(135deg,rgba(53, 207, 223,.28),rgba(8, 13, 13,.15)),url('/images/workout-builder/goals/calisthenics-skills.webp');background-position:center 42%}
.visual-choice-card--goal-performance .visual-choice-image{background-image:linear-gradient(135deg,rgba(14,165,233,.22),rgba(8, 13, 13,.15)),url('/images/workout-builder/goals/maintain-performance.webp');background-position:35% 0%}

/* Training experience */
.visual-choice-card--beginner .visual-choice-image{background-image:linear-gradient(135deg,rgba(47, 155, 255,.2),rgba(8, 13, 13,.2)),url('/images/workout-builder/experience/beginner.webp');background-position:center 40%}
.visual-choice-card--intermediate .visual-choice-image{background-image:linear-gradient(135deg,rgba(110, 159, 194,.22),rgba(8, 13, 13,.2)),url('/images/workout-builder/experience/intermediate.webp');background-position:center 38%}
.visual-choice-card--advanced .visual-choice-image{background-image:linear-gradient(135deg,rgba(217, 111, 112,.2),rgba(8, 13, 13,.2)),url('/images/workout-builder/experience/advanced.webp');background-position:center 42%}

/* Training style */
.visual-choice-card--gym .visual-choice-image{background-image:linear-gradient(135deg,rgba(110, 159, 194,.2),rgba(8, 13, 13,.2)),url('/images/workout-builder/styles/gym.webp');background-position:center 36%}
.visual-choice-card--calisthenics .visual-choice-image{background-image:linear-gradient(135deg,rgba(53, 207, 223,.24),rgba(8, 13, 13,.2)),url('/images/workout-builder/styles/calishtenics.webp');background-position:center 58%}
.visual-choice-card--hybrid .visual-choice-image{background-image:linear-gradient(135deg,rgba(16,185,129,.22),rgba(8, 13, 13,.2)),url('/images/workout-builder/styles/hybrid.webp');background-position:center 28%}

/* Equipment */
.visual-choice-card--bodyweight .visual-choice-image{background-image:linear-gradient(135deg,rgba(47, 155, 255,.16),rgba(8, 13, 13,.25)),url('/images/workout-builder/equipment/bodyweight.webp');background-position:center}
.visual-choice-card--pullup .visual-choice-image{background-image:linear-gradient(135deg,rgba(14,165,233,.16),rgba(8, 13, 13,.25)),url('/images/workout-builder/equipment/pull-up-bar.webp');background-position:center 22%}
.visual-choice-card--rings .visual-choice-image{background-image:linear-gradient(135deg,rgba(53, 207, 223,.18),rgba(8, 13, 13,.25)),url('/images/workout-builder/equipment/rings.webp');background-position:center 45%}
.visual-choice-card--dumbbells .visual-choice-image{background-image:linear-gradient(135deg,rgba(214, 164, 93,.16),rgba(8, 13, 13,.25)),url('/images/workout-builder/equipment/dumbbells.webp');background-position:center 40%}
.visual-choice-card--barbell .visual-choice-image{background-image:linear-gradient(135deg,rgba(217, 111, 112,.16),rgba(8, 13, 13,.25)),url('/images/workout-builder/equipment/barbell.webp');background-position:center 48%}
.visual-choice-card--machines .visual-choice-image{background-image:linear-gradient(135deg,rgba(100,116,139,.18),rgba(8, 13, 13,.25)),url('/images/workout-builder/equipment/machines.webp');background-position:center 38%}

/* Training priority */
.visual-choice-card--hypertrophy .visual-choice-image{background-image:linear-gradient(135deg,rgba(53, 207, 223,.22),rgba(8, 13, 13,.2)),url('/images/workout-builder/priorities/hypertrophy.webp');background-position:center 12%}
.visual-choice-card--priority-strength .visual-choice-image{background-image:linear-gradient(135deg,rgba(217, 111, 112,.2),rgba(8, 13, 13,.2)),url('/images/workout-builder/priorities/strength.webp');background-position:center 45%}
.visual-choice-card--priority-skills .visual-choice-image{background-image:linear-gradient(135deg,rgba(14,165,233,.2),rgba(8, 13, 13,.2)),url('/images/workout-builder/priorities/skills.webp');background-position:center 46%}
.visual-choice-card--fitness .visual-choice-image{background-image:linear-gradient(135deg,rgba(47, 155, 255,.2),rgba(8, 13, 13,.2)),url('/images/workout-builder/priorities/general-fitness.webp');background-position:30% 35%}
.wizard-fields-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.wizard-fields-grid label,.limitations-field{display:grid;gap:8px}.wizard-fields-grid label>span,.limitations-field>span{color:#d3dbd7;font-weight:800}.available-days-fieldset{margin:24px 0 0;padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:17px}.available-days-fieldset legend{padding:0 8px;color:#fff;font-weight:850}.available-days-fieldset p{margin:4px 0 14px;color:var(--muted)}.weekday-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}.weekday-grid label{position:relative}.weekday-grid input{position:absolute;opacity:0}.weekday-grid span{display:grid;min-height:50px;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:13px;color:#d3dbd7;background:var(--surface-secondary);cursor:pointer;font-weight:850;transition:.16s ease}.weekday-grid input:checked+span{border-color:#35cfdf;color:#fff;background:rgba(53, 207, 223,.24);box-shadow:0 0 0 3px rgba(53, 207, 223,.12)}.weekday-grid input:disabled+span{opacity:.4;cursor:not-allowed}
.wizard-review{margin-top:20px;padding:16px 18px;border:1px solid rgba(47, 155, 255,.2);border-radius:16px;background:rgba(47, 155, 255,.07);color:#d1fae5;line-height:1.6}.wizard-review strong{color:#fff}.wizard-error{margin:18px 0 0;padding:12px 14px;border:1px solid rgba(255,102,122,.28);border-radius:12px;color:#fecdd3;background:rgba(255,102,122,.08)}
.wizard-actions{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:24px}.wizard-button{min-height:52px;border:0;border-radius:14px;color:#fff;font-weight:900;cursor:pointer}.wizard-button--back{min-width:130px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06)}.wizard-button--next,.wizard-button--generate{background:linear-gradient(135deg,#167fdc,#2f9bff)}.wizard-button:disabled{opacity:.45;cursor:not-allowed}.wizard-button--generate{grid-column:2}.wizard-button.hidden{display:none!important}
@keyframes wizardStepIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:820px){.visual-choice-grid,.visual-choice-grid--three,.visual-choice-grid--equipment{grid-template-columns:1fr 1fr}.wizard-fields-grid{grid-template-columns:1fr}.weekday-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.wizard-step{min-height:0}}
@media(max-width:560px){.visual-choice-grid,.visual-choice-grid--three,.visual-choice-grid--equipment{grid-template-columns:1fr}.visual-choice-card--wide{grid-column:auto}.visual-choice-card{min-height:185px}.visual-choice-card--equipment{min-height:165px}.wizard-progress-topline{align-items:flex-start;flex-direction:column;gap:4px}.wizard-actions{grid-template-columns:1fr 1fr}.wizard-button--back{min-width:0}.wizard-button--generate{grid-column:2}.weekday-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wizard-hint{margin:-6px 0 14px;padding:10px 14px;border-radius:10px;background:rgba(53, 207, 223,.1);border:1px solid rgba(53, 207, 223,.25);color:#bcc6c2;font-size:13px;font-weight:700}
.wizard-hint.hidden{display:none!important}
.visual-choice-card--equipment.is-implied{opacity:.85}
.visual-choice-card--equipment.is-implied .visual-choice-check{background:#35cfdf}


/* ── Effort / RIR guidance ──────────────────────────────────────────────
   The RIR value used to be explained by a title="" tooltip, which is
   hover-only: unusable on touch, unreachable by keyboard and invisible to
   screen readers. It is now a real button opening a shared dialog. */

/* .exercise-card is a two-column grid whose body column can shrink to its
   300px minimum, leaving ~52px stat tiles. Grid items default to
   min-width:auto and therefore refuse to shrink, so the tile contents
   overflowed instead of wrapping. (At that width the pre-existing "10-12"
   and "75s" values clip too -- this makes all four tiles resilient rather
   than only the new one.) */
.exercise-card-stats > .exercise-stat {
  min-width: 0;
}

.exercise-stat-value {
  overflow-wrap: anywhere;
}

/* Uppercase + letter-spacing makes a single label word wider than a 52px
   tile, so it has to be allowed to break rather than overflow. */
.exercise-card-stats .exercise-stat-label {
  overflow-wrap: anywhere;
}

/* "1-2 RIR" is longer than the bare "1-2" this tile used to show, so it gets
   a slightly smaller ceiling than the other three values. */
.exercise-stat--effort .exercise-stat-value {
  font-size: clamp(15px, 1.5vw, 20px);
}

.exercise-stat--effort .exercise-stat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The stat tiles are narrow grid columns. Without wrapping, "Effort" plus
     the 24px button overflows the tile and the label text is clipped. */
  flex-wrap: wrap;
  gap: 4px 6px;
}

.rir-help-trigger {
  /* 24px keeps the control usable on touch without enlarging the stat tile;
     the tile itself remains the larger hit area around it. flex: 0 0 auto is
     required -- inside the flex label the button otherwise shrinks to a few
     pixels wide and stops being tappable. */
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(142, 181, 214, 0.5);
  border-radius: 999px;
  color: #8fb5d6;
  background: rgba(143, 181, 214, 0.12);
  font-size: 12px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
}

.rir-help-trigger:hover {
  color: #ffffff;
  background: rgba(143, 181, 214, 0.28);
}

.rir-help-trigger:focus-visible {
  outline: 2px solid #8fb5d6;
  outline-offset: 2px;
}

.training-effort-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid rgba(53, 207, 223, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(53, 207, 223, 0.1), rgba(110, 159, 194, 0.07)),
    rgba(8, 13, 24, 0.52);
}

.training-effort-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #d9f9ff;
  background: rgba(53, 207, 223, 0.16);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.training-effort-copy {
  min-width: 0;
}

.training-effort-copy h3 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.training-effort-copy p {
  margin: 0;
  color: #a9bccd;
  font-size: 13px;
  line-height: 1.55;
}

.training-effort-help {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.rir-help-popover {
  position: absolute;
  z-index: 120;
  max-width: min(320px, calc(100vw - 24px));
  padding: 16px 18px;
  border: 1px solid rgba(142, 181, 214, 0.35);
  border-radius: 16px;
  color: #dce8f2;
  background: #0f1b2b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.55;
}

.rir-help-popover[hidden] {
  display: none;
}

.rir-help-popover .rir-help-title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.rir-help-popover p {
  margin: 0 0 8px;
}

.rir-help-close {
  min-height: 34px;
  margin-top: 4px;
  padding: 7px 14px;
  border: 1px solid rgba(142, 181, 214, 0.4);
  border-radius: 10px;
  color: #dce8f2;
  background: rgba(143, 181, 214, 0.14);
  font-weight: 800;
  cursor: pointer;
}

.rir-help-close:focus-visible {
  outline: 2px solid #8fb5d6;
  outline-offset: 2px;
}

/* Mobile generated-plan presentation
   ----------------------------------
   The result used to inherit padding from .program-result, .program-card,
   .workout-day, .exercise-cards and .muscle-exercise-group. At phone widths
   those five gutters reduced a 390px viewport to an exercise card barely
   wider than 180px. Keep the desktop hierarchy, but flatten the decorative
   wrappers on phones so the exercise itself is the primary surface. */
@media (max-width: 480px) {
  .builder-page {
    width: auto;
    margin-inline-start: max(12px, env(safe-area-inset-left));
    margin-inline-end: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  #program-result,
  .program-result {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .program-card {
    padding: 0;
    border-radius: 22px;
  }

  .program-header,
  .program-summary,
  .training-effort-panel {
    margin-inline: 15px;
  }

  .program-header {
    padding-top: 18px;
  }

  .program-summary {
    margin-bottom: 26px;
  }

  .training-effort-panel {
    gap: 11px;
    margin-bottom: 24px;
    padding: 14px;
  }

  .training-effort-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 11px;
  }

  .training-effort-copy h3 {
    font-size: 15px;
  }

  .training-effort-copy p {
    font-size: 12.5px;
  }

  .training-effort-help {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .program-days {
    gap: 24px;
  }

  .workout-day {
    width: 100%;
    margin-top: 0;
    padding: 0;
    overflow: visible;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: transparent;
  }

  .workout-day-header {
    align-items: center;
    padding: 15px 2px 12px;
    background: transparent;
  }

  .workout-day-header h3 {
    font-size: 20px;
  }

  .exercise-cards {
    width: 100%;
    padding: 0;
    gap: 22px;
  }

  .muscle-exercise-group {
    width: 100%;
    min-width: 0;
    padding: 0;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .muscle-exercise-group-header {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    padding: 0 2px 2px;
  }

  .muscle-exercise-group-header span {
    min-width: 0;
    font-size: clamp(18px, 5.8vw, 22px);
  }

  .muscle-exercise-group-header strong {
    padding: 6px 10px;
    font-size: 11px;
  }

  .muscle-exercise-group-grid {
    gap: 16px;
  }

  .exercise-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }

  .exercise-card-media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 11;
    border-radius: 21px 21px 0 0;
  }

  .exercise-card-image {
    object-fit: contain;
  }

  .exercise-demo-button {
    min-height: 44px;
    padding: 9px 14px;
  }

  .reroll-button {
    min-width: 96px;
    height: 44px;
  }

  .exercise-card-body {
    min-width: 0;
    padding: 17px 16px 18px;
  }

  .exercise-card-name {
    margin-bottom: 11px;
    font-size: clamp(26px, 8vw, 30px);
    line-height: 1.08;
    text-wrap: balance;
  }

  .exercise-card-badges {
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
  }

  .muscle-badge,
  .equipment-badge {
    min-width: 0;
    white-space: nowrap;
  }

  .exercise-card-stats {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 15px;
  }

  .exercise-stat {
    min-height: clamp(88px, 25vw, 98px);
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
  }

  .exercise-card-stats .exercise-stat-label {
    overflow-wrap: normal;
    line-height: 1.25;
  }

  .exercise-stat-value,
  .exercise-stat--effort .exercise-stat-value {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }

  .exercise-stat-value {
    font-size: clamp(20px, 6.4vw, 25px);
  }

  .exercise-stat--effort .exercise-stat-value {
    font-size: clamp(17px, 5.2vw, 21px);
  }

  .exercise-stat--effort .exercise-stat-label {
    flex-wrap: nowrap;
  }

  .weekly-volume-summary {
    margin-inline: 14px;
    padding: 18px 16px;
  }
}

/* The desktop card needs at least 630px for its two minimum columns. At the
   narrow 768px tablet probe, the surrounding desktop panels leave less than
   that and the body clips inside the card. Bridge only that narrow tablet
   band to the existing stacked presentation; larger desktop stays intact. */
@media (min-width: 761px) and (max-width: 820px) {
  .exercise-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .exercise-card-media {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .exercise-card-body {
    justify-content: flex-start;
  }

  .exercise-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rir-help-popover {
    transition: none;
  }
}

/* ── Muscle Focus (optional builder step) ─────────────────────────────── */

.focus-mode-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.focus-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.focus-mode-card {
  display: block;
  position: relative;
  padding: 16px 18px;
  border: 1px solid rgba(142, 157, 153, 0.18);
  border-radius: 16px;
  background: rgba(30, 41, 59, 0.55);
  cursor: pointer;
}

/* The visually hidden radio must occupy no space. Without an explicit size
   it inherits the global `input { width: 100% }` and, being absolutely
   positioned, spills past the card and causes horizontal page overflow at
   narrow widths. It stays in the DOM (not display:none) so it remains
   focusable and reachable by assistive technology. */
.focus-mode-card input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.focus-mode-body {
  display: grid;
  gap: 6px;
}

.focus-mode-body strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.focus-mode-body span {
  color: #a9bccd;
  font-size: 13px;
  line-height: 1.5;
}

/* Selection is not signalled by colour alone: the card gains a border weight
   change and a check glyph as well as a tint. */
.focus-mode-card:has(input:checked) {
  border-color: #6be1ee;
  border-width: 2px;
  padding: 15px 17px;
  background: rgba(107, 225, 238, 0.12);
}

.focus-mode-card:has(input:checked) .focus-mode-body strong::after {
  content: " ✓";
  color: #6be1ee;
}

.focus-mode-card:has(input:focus-visible) {
  outline: 2px solid #6be1ee;
  outline-offset: 2px;
}

.muscle-focus-picker {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.muscle-focus-picker[hidden] {
  display: none;
}

.muscle-view-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.muscle-view-button {
  min-height: 44px;
  flex: 1 1 auto;
  padding: 10px 14px;
  border: 1px solid rgba(142, 157, 153, 0.22);
  border-radius: 12px;
  color: #cfe0ee;
  background: rgba(30, 41, 59, 0.6);
  font-weight: 800;
  cursor: pointer;
}

.muscle-view-button.is-active {
  border-color: #6be1ee;
  color: #03151e;
  background: #6be1ee;
}

.muscle-view-button:focus-visible,
.muscle-chip:focus-visible {
  outline: 2px solid #6be1ee;
  outline-offset: 2px;
}

.muscle-diagram svg {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}

.muscle-diagram .muscle-body {
  fill: rgba(148, 163, 184, 0.16);
}

.muscle-diagram .muscle-region {
  fill: rgba(148, 163, 184, 0.42);
  cursor: pointer;
}

.muscle-diagram .muscle-region:hover {
  fill: rgba(107, 225, 238, 0.55);
}

.muscle-diagram .muscle-region.is-selected {
  fill: #6be1ee;
  stroke: #ffffff;
  stroke-width: 1.5;
}

.muscle-chip-hint {
  margin: 0 0 10px;
  color: #a9bccd;
  font-size: 13px;
}

.muscle-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.muscle-chip {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(142, 157, 153, 0.25);
  border-radius: 999px;
  color: #cfe0ee;
  background: rgba(30, 41, 59, 0.6);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* Not colour-only: selected chips also gain a check glyph and a heavier
   border, so the state survives greyscale and colour-vision differences. */
.muscle-chip.is-selected {
  border-color: #6be1ee;
  border-width: 2px;
  color: #03151e;
  background: #6be1ee;
}

.muscle-chip.is-selected::after {
  content: " ✓";
}

.muscle-focus-summary {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(107, 225, 238, 0.3);
  border-radius: 16px;
  background: rgba(107, 225, 238, 0.08);
}

.muscle-focus-summary-heading {
  margin: 0;
  color: #8fe8f4;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.muscle-focus-summary-muscles {
  margin: 6px 0 0;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.muscle-focus-summary-note {
  margin: 6px 0 0;
  color: #a9bccd;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .muscle-focus-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .muscle-diagram svg {
    max-width: 170px;
  }
}