/* Exercise library page: search, body-part and equipment chips, a list of exercises, and a
   sheet with a calorie estimate and the how-to steps. */
.s-exercises {
  --ex-tile: 48px;
  --ex-tile-large: 64px;
  --ex-chip-height: 44px;
  --ex-mascot: 96px;
  --ex-sheet-width: 30rem;
  --ex-burn-size: clamp(56px, 16vw, 72px);
  --ex-flame: 40px;
  --ex-step-size: 44px;
  --ex-seg-height: 40px;
  --ex-weight-width: 5.5rem;
  --ex-level-dot: 8px;
  --ex-thumb: 28px;
  --ex-track: 8px;
  padding-block: var(--space-xxxl) var(--section-gap);
}

.s-exercises .ex-head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.s-exercises .ex-mascot {
  flex: none;
  width: var(--ex-mascot);
  height: auto;
  padding: var(--space-sm);
  background: var(--jet-tint);
  border-radius: var(--radius-card);
}

.s-exercises .ex-head-copy {
  display: grid;
  gap: var(--space-xs);
}

.s-exercises .ex-nojs {
  margin-top: var(--space-xxl);
}

.js .s-exercises .ex-nojs,
html:not(.js) .s-exercises .ex-app {
  display: none;
}

.s-exercises .ex-app {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xxl);
}

/* Search */
.s-exercises .ex-search {
  position: relative;
  display: block;
}

.s-exercises .ex-search-icon {
  position: absolute;
  inset: 0 auto 0 var(--space-lg);
  width: 22px;
  background: url("/assets/icons/icon-search.svg") center / contain no-repeat;
  pointer-events: none;
}

.s-exercises .ex-search-input {
  width: 100%;
  min-height: var(--button-height);
  padding: 0 var(--space-lg) 0 calc(var(--space-lg) + 22px + var(--space-md));
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font: inherit;
  appearance: none;
}

.s-exercises .ex-search-input::placeholder {
  color: var(--ink-tertiary);
}

/* Chips: one row that scrolls sideways on a phone. */
.s-exercises .ex-chips {
  display: flex;
  gap: var(--space-sm);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-xs) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.s-exercises .ex-chips::-webkit-scrollbar {
  display: none;
}

.s-exercises .ex-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--ex-chip-height);
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-rest) var(--ease-standard), color var(--duration-rest) var(--ease-standard),
    transform var(--duration-rest) var(--ease-standard);
}

.s-exercises .ex-chip:active {
  transform: scale(0.96);
}

.s-exercises .ex-chip[aria-pressed="true"] {
  background: var(--jet);
  color: var(--surface);
}

.s-exercises .ex-chip-gear {
  background: var(--jet-tint);
  color: var(--jet-ink);
}

.s-exercises .ex-chip:disabled {
  opacity: 0.4;
  cursor: default;
}

.s-exercises .ex-gear-icon {
  width: 22px;
  height: 22px;
  background: center / contain no-repeat;
}

.s-exercises .ex-chip[aria-pressed="true"] .ex-gear-icon {
  filter: brightness(0) invert(1);
}

.s-exercises [data-gear="body"] .ex-gear-icon { background-image: url("/assets/icons/icon-body.svg"); }
.s-exercises [data-gear="dumbbell"] .ex-gear-icon { background-image: url("/assets/icons/icon-dumbbell.svg"); }
.s-exercises [data-gear="barbell"] .ex-gear-icon { background-image: url("/assets/icons/icon-barbell.svg"); }
.s-exercises [data-gear="kettlebell"] .ex-gear-icon { background-image: url("/assets/icons/icon-kettlebell.svg"); }
.s-exercises [data-gear="cable"] .ex-gear-icon { background-image: url("/assets/icons/icon-cable.svg"); }
.s-exercises [data-gear="machine"] .ex-gear-icon { background-image: url("/assets/icons/icon-machine.svg"); }
.s-exercises [data-gear="bands"] .ex-gear-icon { background-image: url("/assets/icons/icon-bands.svg"); }
.s-exercises [data-gear="other"] .ex-gear-icon { background-image: url("/assets/icons/icon-ball.svg"); }

.s-exercises .ex-count {
  margin-top: var(--space-sm);
}

.s-exercises .ex-count.is-error {
  color: var(--critical);
  font-size: 15px;
}

/* List */
.s-exercises .ex-list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

/* Holds the page's height while the list downloads, so the footer does not jump. */
.s-exercises .ex-app:not(.is-ready) .ex-list {
  min-height: 100vh;
}

.s-exercises .ex-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--duration-rest) var(--ease-standard), box-shadow var(--duration-rest) var(--ease-standard);
}

.s-exercises .ex-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sheet);
}

.s-exercises .ex-card:active {
  transform: scale(0.98);
}

.s-exercises .ex-tile {
  display: grid;
  place-items: center;
  width: var(--ex-tile);
  height: var(--ex-tile);
  background: var(--jet-tint);
  border-radius: var(--radius-control);
}

.s-exercises .ex-tile-large {
  flex: none;
  width: var(--ex-tile-large);
  height: var(--ex-tile-large);
  border-radius: var(--radius-card);
}

.s-exercises .ex-tile-large .ex-tile-icon {
  width: 36px;
  height: 36px;
}

.s-exercises .ex-card-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.s-exercises .ex-card-name {
  font-weight: 600;
  line-height: 1.25;
}

.s-exercises .ex-card-meta {
  font-size: 13px;
  color: var(--ink-tertiary);
}

.s-exercises .ex-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.s-exercises .ex-level::before {
  content: "";
  width: var(--ex-level-dot);
  height: var(--ex-level-dot);
  border-radius: 50%;
  background: var(--recovery);
}

.s-exercises .ex-level-intermediate::before {
  background: var(--caution);
}

.s-exercises .ex-level-expert::before {
  background: var(--effort);
}

.s-exercises .ex-more {
  justify-self: center;
  min-height: var(--button-height);
  margin-top: var(--space-md);
  padding-inline: var(--space-xxxl);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Sheet: slides up from the bottom on a phone, sits in the middle on a wide screen. */
.s-exercises .ex-sheet {
  width: 100%;
  max-width: none;
  max-height: 92dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card-large) var(--radius-card-large) 0 0;
  background: var(--canvas);
  color: var(--ink);
  box-shadow: var(--shadow-sheet);
  overscroll-behavior: contain;
}

.s-exercises .ex-sheet::backdrop {
  background: color-mix(in srgb, var(--jet-ink) 45%, transparent);
}

.s-exercises .ex-sheet-body {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-xxl) var(--gutter) var(--space-xxxl);
}

.s-exercises .ex-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: 50%;
  background: var(--surface-sunken);
  cursor: pointer;
}

.s-exercises .ex-close::before,
.s-exercises .ex-close::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%) rotate(45deg);
}

.s-exercises .ex-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.s-exercises .ex-sheet-head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-right: var(--tap-min);
}

.s-exercises .ex-sheet-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Calculator */
.s-exercises .ex-calc {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--surface);
  border-radius: var(--radius-card);
}

.s-exercises .ex-burn {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
}

.s-exercises .ex-burn-icon {
  align-self: center;
  width: var(--ex-flame);
  height: var(--ex-flame);
  background: url("/assets/icons/icon-flame.svg") center / contain no-repeat;
}

.s-exercises .ex-burn-number {
  font-size: var(--ex-burn-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.s-exercises .ex-burn-unit {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.s-exercises .ex-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.s-exercises .ex-field-label {
  font-size: 15px;
  font-weight: 600;
}

.s-exercises .ex-field-value {
  font-size: 17px;
  font-weight: 700;
}

.s-exercises .ex-range {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--tap-min);
  margin: 0;
  background: none;
  accent-color: var(--jet);
  cursor: pointer;
}

.s-exercises .ex-segment {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
}

.s-exercises .ex-seg {
  min-height: var(--ex-seg-height);
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.s-exercises .ex-segment-small .ex-seg {
  padding-inline: var(--space-md);
}

.s-exercises .ex-seg[aria-pressed="true"] {
  background: var(--jet);
  color: var(--surface);
}

.s-exercises .ex-weight {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.s-exercises .ex-step {
  flex: none;
  width: var(--ex-step-size);
  height: var(--ex-step-size);
  border: 0;
  border-radius: 50%;
  background: var(--jet-tint);
  color: var(--jet);
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.s-exercises .ex-weight-input {
  width: var(--ex-weight-width);
  min-height: var(--ex-step-size);
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
}

.s-exercises .ex-weight-input::-webkit-inner-spin-button,
.s-exercises .ex-weight-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.s-exercises .ex-weight .ex-segment {
  margin-left: auto;
}

.s-exercises .ex-calc-note {
  margin: 0;
  text-align: center;
}

/* Steps */
.s-exercises .ex-steps-block {
  display: grid;
  gap: var(--space-md);
}

.s-exercises .ex-steps {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ex-step;
}

.s-exercises .ex-step-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-secondary);
  counter-increment: ex-step;
}

.s-exercises .ex-step-line::before {
  content: counter(ex-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jet);
  color: var(--surface);
  font-family: var(--font-rounded);
  font-size: 13px;
  font-weight: 700;
}

.s-exercises .ex-steps.is-plain .ex-step-line {
  grid-template-columns: 1fr;
}

.s-exercises .ex-steps.is-plain .ex-step-line::before {
  content: none;
}

.s-exercises :is(.ex-chip, .ex-card, .ex-more, .ex-close, .ex-seg, .ex-step, .ex-search-input, .ex-weight-input):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--jet) 55%, transparent);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .s-exercises {
    --ex-mascot: 120px;
  }

  .s-exercises .ex-chips {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .s-exercises .ex-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-exercises .ex-sheet {
    width: min(var(--ex-sheet-width), calc(100% - 2 * var(--gutter)));
    max-height: 88dvh;
    margin: auto;
    border-radius: var(--radius-card-large);
  }
}

@media (min-width: 1000px) {
  .s-exercises .ex-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .s-exercises .ex-sheet[open] {
    animation: ex-sheet-in 0.35s var(--ease-standard);
  }

  .s-exercises .ex-sheet[open]::backdrop {
    animation: ex-fade-in 0.25s linear;
  }
}

@keyframes ex-sheet-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes ex-fade-in {
  from {
    opacity: 0;
  }
}