/* Training plan section. Everything is scoped under .s-train.
   The markup is the finished "week 2" example, so it reads complete without JavaScript.
   With JavaScript the card starts on an empty week 1 ([data-view="log"]) and moves to week 2 ([data-view="next"]).
   Each row says what changed through data-change: none (week 1), reps, rest or hold. */
.s-train {
  --train-tile-inset: 8px;
  --train-tile-pad: calc(var(--gutter) - var(--train-tile-inset));
  --train-chip-size: var(--tap-min);
  --train-chip-gap: 6px;
  /* Tint behind a set that felt hard: derived from --effort (hex first for browsers without color-mix) */
  --train-hard-tint: #ffeee8;
  --train-hard-tint: color-mix(in srgb, var(--effort) 12%, var(--surface));
  --train-rise: 8px;
  --train-rx-size: 20px;
  --train-rx-gap: 26px;
  --train-rx-line: 32px;
  --train-mark-pad: 10px;
  --train-scene-size: 148px;
  --train-change-delay: 140ms;
  --train-stagger: 80ms;
  --train-i: 0;
  padding-block: calc(var(--section-gap) / 2);
  scroll-margin-top: calc(var(--space-xxxl) * -1);
  color: var(--jet-ink);
}

.s-train .train-symbols {
  position: absolute;
}

/* ---------- Heading ---------- */
.s-train .train-head {
  display: grid;
  gap: var(--space-md);
}

.s-train .train-head > .label {
  color: var(--jet);
  font-weight: 700;
}

.s-train .title {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--jet-ink);
}

/* Two icon labels in place of a paragraph. Plain text with an icon, so they do not read as buttons. */
.s-train .train-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xxl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-train .train-point {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.s-train .train-point-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--jet);
}

/* ---------- Tile: one tinted surface that holds the mascot scene and the demo ---------- */
.s-train .train-stage {
  margin-top: var(--space-xxl);
  padding-inline: var(--train-tile-inset);
}

.s-train .train-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-lg) var(--train-tile-pad) var(--train-tile-pad);
  background: var(--jet-tint);
  /* The stage radius every feature section uses: 32px, 40px on wide screens. */
  border-radius: 32px;
}

.s-train .train-demo-col {
  display: grid;
  min-width: 0;
}

/* The owner's scene, shown small: on phones it sits above the card */
.s-train .train-scene {
  order: -1;
  justify-self: center;
  width: var(--train-scene-size);
}

.s-train .train-scene img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 640px) {
  .s-train {
    --train-tile-inset: var(--gutter);
    --train-tile-pad: var(--space-section);
    --train-scene-size: 180px;
  }

  .s-train .train-stage {
    max-width: calc(var(--page-width) + 2 * var(--gutter));
    margin-inline: auto;
    margin-top: var(--space-xxxl);
  }

  .s-train .train-tile {
    padding-top: var(--space-xxl);
    border-radius: 40px;
  }
}

/* Side by side: the scene stands to the right of the card */
@media (min-width: 900px) {
  .s-train {
    --train-scene-size: 260px;
  }

  .s-train .train-tile {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-section);
    padding: var(--space-section);
  }

  .s-train .train-scene {
    order: 0;
  }
}

@media (min-width: 1080px) {
  .s-train {
    --train-scene-size: 320px;
  }

  .s-train .train-tile {
    gap: 56px;
    padding: 56px;
  }
}

/* ---------- Demo card ---------- */
.s-train .demo {
  container-type: inline-size;
  padding: var(--space-xl);
  border-radius: var(--radius-card-large);
  box-shadow: var(--shadow-sheet);
}

.s-train .demo-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label tally"
    "week legend";
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

/* The one "Example" marker for the invented numbers */
.s-train .example-tag {
  grid-area: label;
  justify-self: start;
  padding: 5px 10px;
  background: var(--jet-tint);
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.2;
  color: var(--jet);
}

.s-train .week {
  grid-area: week;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.s-train .week-roll {
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  vertical-align: bottom;
}

.s-train .week-digits {
  display: grid;
  transform: translateY(-50%);
}

.s-train .week-digit {
  height: 1.1em;
}

/* Week 2 result: a numbered blue circle and one or two words */
.s-train .tally {
  grid-area: tally;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.s-train .tally-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--jet);
  border-radius: 50%;
  color: var(--surface);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.s-train .tally-tick {
  display: none;
  width: 14px;
  height: 14px;
}

.s-train .demo[data-outcome="same"] .tally-tick {
  display: block;
}

.s-train .demo[data-outcome="same"] .tally-count {
  display: none;
}

/* Legend: what the two set marks mean. The same in both weeks, so nothing moves. */
.s-train .legend {
  grid-area: legend;
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-secondary);
}

.s-train .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.s-train .legend-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.s-train .legend-mark[data-state="done"] {
  background: var(--jet);
  color: var(--surface);
}

.s-train .legend-mark[data-state="hard"] {
  background: var(--train-hard-tint);
}

.s-train .legend-mark[data-state="hard"]::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--effort);
  border-radius: 50%;
}

.s-train .legend-tick {
  width: 12px;
  height: 12px;
}

/* ---------- Exercise rows: name and set marks, then two numbers ---------- */
.s-train .rows {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.s-train .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name sets"
    "rx rx";
  align-items: center;
  column-gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}

.s-train .row:nth-child(2) {
  --train-i: 1;
}

.s-train .ex-name {
  grid-area: name;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.s-train .rx {
  grid-area: rx;
  display: flex;
  align-items: center;
  gap: var(--train-rx-gap);
  margin-top: var(--space-sm);
  font-size: var(--train-rx-size);
  font-weight: 700;
  height: var(--train-rx-line);
  line-height: var(--train-rx-line);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* In week 2 what stayed the same steps back, and the changed value sits in a solid blue pill.
   The pill is painted behind the metric and takes no room, so the columns line up in every row. */
.s-train .metric {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  color: var(--ink-secondary);
}

.s-train .metric[data-metric="reps"] {
  min-width: 4.5em;
}

.s-train .row[data-change="none"] .metric,
.s-train .demo[data-outcome="same"] .metric {
  color: var(--jet-ink);
}

.s-train .row[data-change="reps"] .metric[data-metric="reps"],
.s-train .row[data-change="rest"] .metric[data-metric="rest"] {
  color: var(--surface);
}

.s-train .row[data-change="reps"] .metric[data-metric="reps"]::before,
.s-train .row[data-change="rest"] .metric[data-metric="rest"]::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--train-mark-pad));
  background: var(--jet);
  border-radius: var(--radius-pill);
}

.s-train .metric-value {
  position: relative;
  display: inline-block;
}

/* Line icons stand in for the words "sets and reps" and "rest"; they take the text colour */
.s-train .rx-icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.s-train .row[data-change="none"] .rx-icon,
.s-train .demo[data-outcome="same"] .rx-icon {
  color: var(--jet);
}

/* ---------- Set marks: one size in both weeks ---------- */
.s-train .sets {
  grid-area: sets;
  display: flex;
  gap: var(--train-chip-gap);
}

.s-train .set {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--train-chip-size);
  height: var(--train-chip-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--jet-tint);
  color: var(--jet);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.s-train .set-check,
.s-train .set-dot {
  display: none;
}

.s-train .set-check {
  width: 20px;
  height: 20px;
}

.s-train .set-dot {
  width: 12px;
  height: 12px;
  background: var(--effort);
  border-radius: 50%;
}

.s-train .set[data-state="done"] {
  background: var(--jet);
  color: var(--surface);
}

.s-train .set[data-state="hard"] {
  background: var(--train-hard-tint);
}

.s-train .set:not([data-state="empty"]) .set-num {
  display: none;
}

.s-train .set[data-state="done"] .set-check,
.s-train .set[data-state="hard"] .set-dot {
  display: block;
}

.s-train .set:focus-visible,
.s-train .demo-reset:focus-visible {
  border-radius: 50%;
}

.s-train .demo-primary:focus-visible {
  border-radius: var(--radius-pill);
}

/* ---------- Actions: only useful when scripts run ---------- */
.s-train .demo-actions {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.s-train .demo-primary,
.s-train .demo-reset {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.s-train .demo-primary {
  flex: 1 1 auto;
  gap: var(--space-sm);
  padding-inline: var(--space-xl);
  background: var(--jet);
  transition:
    transform var(--duration-rest) var(--ease-snappy),
    opacity var(--duration-rest) var(--ease-snappy);
}

.s-train .demo-primary::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/icon-takeoff.svg") center / contain no-repeat;
  mask: url("/assets/icons/icon-takeoff.svg") center / contain no-repeat;
}

.s-train .demo[data-view="next"] .demo-primary::before {
  content: none;
}

.s-train .demo-primary:active {
  transform: scale(0.98);
}

/* Reset is a round icon button, out of sight until there is something to reset */
.s-train .demo-reset {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--button-height);
  height: var(--button-height);
  padding: 0;
  background: var(--jet-tint);
  border-radius: 50%;
  color: var(--jet);
}

.s-train .demo-reset:disabled {
  visibility: hidden;
}

.s-train .demo-reset-icon {
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  .s-train .demo-primary:hover,
  .s-train .demo-reset:hover {
    opacity: 0.86;
  }
}

/* ---------- Card widths ---------- */
/* Narrow card: tighter marks so the name and its sets still share a line */
@container (max-width: 280px) {
  .s-train .demo-head {
    grid-template-areas:
      "label tally"
      "week week"
      "legend legend";
  }

  .s-train .row {
    --train-rx-gap: 22px;
    column-gap: var(--space-sm);
  }

  .s-train .sets {
    --train-chip-gap: 2px;
  }

  .s-train .ex-name {
    font-size: 15px;
    letter-spacing: -0.02em;
  }
}

@container (min-width: 440px) {
  .s-train .rows {
    gap: var(--space-lg);
    margin-top: var(--space-xl);
  }

  .s-train .row {
    --train-rx-size: 22px;
    grid-template-areas:
      "name sets"
      "rx sets";
    column-gap: var(--space-xl);
    padding-top: var(--space-lg);
  }

  .s-train .ex-name {
    font-size: 20px;
  }

  .s-train .sets {
    --train-chip-size: 48px;
    --train-chip-gap: var(--space-sm);
  }

  .s-train .demo-primary {
    flex: none;
    min-width: 232px;
  }

  .s-train .demo-actions {
    margin-top: var(--space-xxl);
  }
}

@media (min-width: 640px) {
  .s-train .demo {
    padding: var(--space-xxxl);
  }

  .s-train .week {
    font-size: 44px;
  }
}

/* ---------- With JavaScript ---------- */
.js .s-train .demo-actions {
  display: flex;
}

.js .s-train .tally {
  transition:
    opacity var(--duration-snappy) var(--ease-standard),
    transform var(--duration-snappy) var(--ease-standard),
    visibility 0s linear 0s;
}

.js .s-train .week-digits {
  transition: transform var(--duration-gentle) var(--ease-standard);
}

/* Week 2: the new value rises into its mark */
.js .s-train .demo[data-view="next"] .row[data-change="reps"] .metric[data-metric="reps"] .metric-value,
.js .s-train .demo[data-view="next"] .row[data-change="rest"] .metric[data-metric="rest"] .metric-value {
  animation: train-rise var(--duration-standard) var(--ease-standard) both;
  animation-delay: calc(var(--train-change-delay) + var(--train-i) * var(--train-stagger));
}

.js .s-train .demo[data-view="next"] .metric::before {
  animation: train-pop var(--duration-standard) var(--ease-standard) both;
  animation-delay: calc(var(--train-change-delay) + var(--train-i) * var(--train-stagger));
}

.js .s-train button.set {
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--duration-rest) var(--ease-snappy);
}

.js .s-train button.set:disabled {
  cursor: default;
}

.js .s-train button.set:not(:disabled):active {
  transform: scale(0.9);
}

.js .s-train button.set .set-check,
.js .s-train button.set .set-dot {
  animation: train-pop var(--duration-snappy) var(--ease-snappy) both;
}

@media (hover: hover) {
  .js .s-train .demo[data-view="log"] button.set[data-state="empty"]:hover {
    box-shadow: inset 0 0 0 2px var(--jet);
  }
}

/* Week 1: the log. Also the look before the script has started. */
.js .s-train .demo:is([data-view="log"], :not([data-view])) .week-digits {
  transform: none;
}

.js .s-train .demo:is([data-view="log"], :not([data-view])) .tally {
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--train-rise));
  transition-delay: 0s, 0s, var(--duration-snappy);
}

/* Until the script has drawn the empty log, keep the example out of sight */
.js .s-train .demo:not([data-view]) .rows {
  visibility: hidden;
}

@keyframes train-rise {
  from {
    opacity: 0;
    transform: translateY(var(--train-rise));
  }
}

@keyframes train-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* If the script cannot start, show the finished example exactly as without JavaScript */
.js .s-train .demo[data-view="static"] .demo-actions {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .s-train .demo *,
  .s-train .demo *::before,
  .s-train .demo *::after {
    animation: none !important;
    transition: none !important;
  }

  .s-train .demo-primary:active,
  .js .s-train button.set:not(:disabled):active {
    transform: none;
  }
}