/* Hallmark · shape: session sheet · genre: editorial · theme: Sport (deal 1/3, seed ironlog-gym-android-app-e5e5·be0f5380·2026-11-09·r0) · job: try · draw: manual
 * hero: stage · nav: wordmark and one action · footer: mast · imagery: the product · signature: Push Day A written as the session sheet
 * axes: light/display-condensed/chromatic-volt · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: R, cut the phone frame and the rating row so the session sheet is the only picture */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: smooth; }

.skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus,
.skip:focus-visible {
  transform: none;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

::selection { background: var(--color-accent); color: var(--color-ink); }

h1, h2, h3 {
  text-transform: uppercase;
  line-height: 1.02;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
}

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-paper);
  border-bottom: var(--rule-bar) solid var(--color-rule-2);
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.5rem;
}

.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hero__body {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-lg);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  width: 100%;
  min-width: 0;
}

.hero__copy h1 { max-width: 14ch; }

.hero__copy .lead {
  max-width: none;
  margin-top: var(--space-lg);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-bar) solid transparent;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-md);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--secondary {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: var(--color-paper);
}

.btn--primary:hover {
  background: color-mix(in oklab, var(--color-accent) 84%, var(--color-ink));
  color: var(--color-accent-ink);
}

.btn--secondary:hover {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-paper-3);
  color: var(--color-muted);
  border-color: var(--color-rule);
}

.visual {
  margin: 0;
  min-width: 0;
  background: var(--color-paper);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.visual__name,
.visual__day {
  margin: 0;
  padding-inline: var(--space-md);
}

.visual__name {
  padding-top: var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-2xl);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.visual__day {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-md);
  color: var(--color-muted);
}

.sheet {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.visual .sheet { table-layout: fixed; }

.visual .sheet th:first-child,
.visual .sheet td:first-child { width: 3.5rem; }

.sheet th,
.sheet td {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: break-word;
  min-width: 0;
}

.sheet th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
}

.visual .sheet td { padding-block: var(--space-lg); }

.lift {
  display: block;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-lg);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  overflow-wrap: break-word;
}

.vn {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.idx {
  font-family: var(--font-outlier);
  font-weight: 500;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  width: 3rem;
}

.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.facts p {
  margin: 0;
  padding: var(--space-md);
  max-width: none;
}

.facts p + p { border-left: var(--rule-hair) solid var(--color-rule); }

.time {
  display: block;
  font-family: var(--font-outlier);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mark {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.visual figcaption {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.programs { padding-top: var(--section-gap); }

.meals {
  margin-top: var(--section-gap-s);
  padding-block: var(--space-2xl);
  background: var(--color-paper-2);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.week { padding-top: var(--section-gap-l); }

.start {
  margin-top: var(--section-gap);
  padding-block: var(--space-3xl);
  background: var(--color-ink);
  color: var(--color-paper);
}

.section-head { margin-bottom: var(--space-xl); }

.section-head .lead { margin-top: var(--space-md); }

.live td { background: var(--color-paper-2); }

.live .mark {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.meals .sheet,
.week .sheet,
.programs .sheet { margin-top: var(--space-lg); }

.start .lead { color: var(--color-paper); }

.clone {
  margin: var(--space-xl) 0 0;
  padding: var(--space-md) var(--space-lg);
  max-width: 100%;
  overflow-x: auto;
  background: var(--color-ink-2);
  color: var(--color-paper);
  border-radius: var(--radius-card);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.stages {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-columns);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-bar) solid var(--color-paper);
}

.stages li {
  min-width: 0;
  padding-top: var(--space-lg);
}

.stages li + li { border-left: var(--rule-hair) solid color-mix(in oklab, var(--color-paper) 35%, transparent); padding-left: var(--space-lg); }

.stage-no {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-3xl);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.stages h3 {
  margin-top: var(--space-sm);
  max-width: 16ch;
  color: var(--color-paper);
}

.stages p {
  margin-top: var(--space-sm);
  max-width: 32ch;
  color: var(--color-paper);
}

.stages .now {
  padding: var(--space-lg);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.stages .now h3,
.stages .now p,
.stages .now .stage-no { color: var(--color-accent-ink); }

.start .actions { margin-top: var(--space-xl); }

.start .btn--secondary {
  border-color: var(--color-paper);
  color: var(--color-paper);
  background: transparent;
}

.start .btn--secondary:hover {
  background: var(--color-paper);
  color: var(--color-ink);
}

.start :focus-visible { outline-color: var(--color-accent); }

.mast {
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.mast__row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
}

.mast p { max-width: 36ch; color: var(--color-muted); margin-top: var(--space-sm); }

.mast nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.mast a:not(.wordmark) {
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
}

.mast a:not(.wordmark):hover { text-decoration-color: var(--color-accent-deep); }

a:not(.btn):hover { text-decoration-color: var(--color-accent-deep); }

@media (max-width: 40rem) {
  .programs .sheet,
  .meals .sheet,
  .week .sheet { table-layout: auto; }
}

@media (max-width: 75rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
}

@media (max-width: 64rem) {
  .hero { min-height: 0; }
  .hero__grid,
  .stages { grid-template-columns: minmax(0, 1fr); }
  .stages li + li {
    border-left: 0;
    padding-left: 0;
    border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-paper) 35%, transparent);
    margin-top: var(--space-lg);
  }
  .stages .now { margin: 0; }
}