.coach-page {
  display: grid;
  gap: var(--space-3);
  max-width: 48rem;
  margin: 0 auto;
}

/* The head's controls, and the one menu they fold into while the class
   clock runs (Views::Coaches::Show render_head, render_more_menu). */
.coach-head-controls {
  display: contents;
}

.coach-head-controls[hidden] {
  display: none;
}

.coach-head-more {
  display: contents;
}

.coach-head-more[hidden] {
  display: none;
}

/* The class clock (class_clock_controller.js): Start class, then the
   running clock, the now card and End class. Sticky, so it stays in view
   down the page. 40% of the screen until the foot is dragged
   (--class-clock-max, set by the controller). */
.class-clock {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: var(--class-clock-max, 40svh);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.class-clock-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* Start at's panel: the time to start the clock, Save and Clear. */
.class-clock-start-at {
  width: 14rem;
  padding: var(--space-2) var(--space-3);
}

/* The elapsed clock: a figure the coach can find, not the headline. */
.class-clock-time {
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* Before a start set ahead: when it starts, and how long until. */
.class-clock-now {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* The headline of the now card: the part under way and the time left in
   it, read from arm's length; then how far from its plan the class runs,
   and before the clock the pinned part's Unfocus. */
.class-clock-head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: baseline;
  padding-top: var(--space-2);
  border-top: var(--line-width) solid var(--line);
}

.class-clock-head[hidden] {
  display: none;
}

.class-clock-part {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.class-clock-left {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Past the plan's end: how far over the class runs, in the caution ink. */
.class-clock-left[data-over] {
  color: var(--caution-ink);
}

.class-clock-shift {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--caution-ink);
}

/* The card's body: the part's own drills or the workout as written, in
   whatever the clock bar and the headline leave of the box, scrolling
   when the part is longer. */
.class-clock-card {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: var(--space-1);
}

.class-clock-body {
  padding: 0;
}

/* The foot under the card: a step to the part before and after, then,
   at the very bottom of the box, what is next and when, between two
   bars to drag by, a thumb's width each, so a phone holds it on either
   side. The bars drag the clock's height; the arrows do from the keyboard. */
.class-clock-foot {
  flex: none;
  display: grid;
  gap: var(--space-1);
  border-top: var(--line-width) solid var(--line);
  padding-top: var(--space-1);
}

.class-clock-next {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-dense);
  font-size: var(--text-md);
  color: var(--ink-muted);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

/* display: grid outranks the browser's own [hidden] rule. */
.class-clock-foot[hidden] {
  display: none;
}

.class-clock-steps {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.class-clock-next:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* What is next, wrapping rather than cut: the part and the countdown
   first; the time of day where the screen has room for it. */
.class-clock-next-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.class-clock-next-when {
  display: none;
}

@media (min-width: 40rem) {
  .class-clock-next-when {
    display: inline;
  }
}

/* The next part a minute out: the line comes forward and pulses slowly;
   twenty seconds out, faster (class_clock_controller.js soon). */
.class-clock-next-text[data-soon] {
  color: var(--accent-ink);
  font-weight: 600;
}

.class-clock-next-text[data-soon="slow"] {
  animation: class-clock-pulse 2s ease-in-out infinite;
}

.class-clock-next-text[data-soon="fast"] {
  animation: class-clock-pulse 0.6s ease-in-out infinite;
}

@keyframes class-clock-pulse {
  50% {
    opacity: 0.5;
  }
}

/* The part the clock reaches next, a minute out and then twenty seconds
   out: a halo that pulses at the foot's pace. */
.coach-halo-slow {
  animation: coach-halo 2s ease-in-out infinite;
}

.coach-halo-fast {
  animation: coach-halo 0.6s ease-in-out infinite;
}

@keyframes coach-halo {
  50% {
    box-shadow: 0 0 0 4px var(--accent-fill);
  }
}

/* With a part under way, every other part steps back so it stands out. */
.coach-dim {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .class-clock-next-text[data-soon],
  .coach-halo-slow,
  .coach-halo-fast {
    animation: none;
  }

  .coach-halo-slow,
  .coach-halo-fast {
    box-shadow: 0 0 0 4px var(--accent-fill);
  }
}

.class-clock-grip {
  height: 0.25rem;
  border-radius: var(--radius-sm);
  background: var(--line);
}

/* The planning pieces (the equipment, What to build, the days around
   and the fatigue) and the Session's planning tools, put away while the
   clock runs; the days around and the fatigue sit behind one disclosure. */
.coach-planning {
  display: contents;
}

.coach-planning[hidden] {
  display: none;
}

.coach-around {
  display: grid;
  gap: var(--space-3);
}

.coach-plan-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.coach-plan-tools[hidden] {
  display: none;
}

/* A phase's body: its shared cue and its drills, what the now card copies. */
.coach-phase-body {
  display: block;
}

/* A warmup phase as one block: marked by the button in its heading, or
   reached by the class clock, it takes aria-current="step" and a tint all
   round. */
.coach-phase-block {
  padding: var(--space-1) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-md);
}

.coach-phase-block[aria-current="step"] {
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
}

/* A phase's drills while the page is edited: an emptied phase keeps a
   dashed row's worth of room to drag a drill back into. */
.coach-warmup-drills:empty {
  min-height: var(--tap-dense);
  border: var(--line-width) dashed var(--line);
  border-radius: var(--radius-md);
}

/* A band under the Session's Warmup row and each transition's
   (Components::DayTimeline, a UI::Disclosure band): that period's drills,
   opened by a tap on the summary, which names the period and its phases. */
.warmup-band-name {
  font-weight: 600;
}

.warmup-band-phases {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* The period's phases, drawn in the band's body with the panel's inset.
   While editing, a period with no phase keeps a dashed row's worth of
   room to drag a phase into. */
.coach-phases {
  padding: var(--space-1) var(--space-3);
}

.coach-phases:empty {
  min-height: var(--tap-dense);
  margin: var(--space-1) var(--space-3);
  border: var(--line-width) dashed var(--line);
  border-radius: var(--radius-md);
}

/* A phase's grip while editing, at the head of its heading, so the phase
   drags to another place or into another period's band. */
.coach-phase-grip {
  align-self: center;
}

.coach-cues {
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}

.coach-cue {
  list-style: disc;
}

.coach-phase {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
}

/* The clock a phase starts at, ahead of its name: a fixed width, so the
   names after it line up down the warmup. */
.coach-phase-clock {
  min-width: 3.5rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* The heading's end: the mark button, and while editing the phase's
   Change beside it. */
.coach-phase-tools {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: auto;
}

.coach-warmup-cue {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.coach-warmup-dose {
  display: block;
  width: 7rem;
  font-size: var(--text-sm);
  color: var(--ink);
}

.coach-warmup-drill {
  flex: 1 1 0;
  min-width: 0;
}

.coach-warmup-drill-cue {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* A workout's name in the Session, a button that opens its description
   (Components::DayTimeline on the coach page): its popover takes the
   title's room in the row, and the button has the row title's look with
   none of a button's. */
.coach-session-name {
  flex: 1 1 0;
  min-width: 0;
}

.coach-session-title {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
}

.coach-session-peek {
  width: 26rem;
  padding: var(--space-2) var(--space-3);
}

/* The controls a row or heading ends with while the coach page is being
   edited (Components::WarmupSection and DayTimeline with editing:):
   Change and +, each opening a popover that holds the form. */
.coach-edit-tools {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: auto;
}

.coach-edit-panel {
  width: 22rem;
  padding: var(--space-2) var(--space-3);
}

/* A work row's start, slid along the class and read out as its clock,
   over a strip of the class's sections with Gathering and Cleanup marked
   at its ends; the slider and the strip run the same length, so the
   thumb reads against the sections under it. */
.coach-start-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2);
  align-items: center;
}

.coach-start-hint {
  grid-column: 1 / -1;
}

.coach-start-track {
  display: flex;
  gap: 1px;
  height: var(--space-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.coach-start-band {
  flex: 0 0 0;
  min-width: 1px;
  background: var(--line);
}

.coach-start-band-edge {
  background: var(--caution-fill);
}

.coach-start-band-work {
  background: var(--ink-muted);
}

.coach-start-band-this {
  background: var(--accent);
}

.coach-start-clock {
  min-width: 3.5rem;
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}