.fatigue {
  display: grid;
  gap: var(--space-2);
}

.fatigue-note {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* The panel of Components::LoadVerdict's "What this means" popover (and
   Components::HeadlineExplainer's "What these mean"): a
   reading width, so a paragraph per reason does not run the viewport wide. */
.load-explainer {
  width: 24rem;
  padding: var(--space-2) var(--space-3);
}

/* Components::DayReadings: a day's Load and Muscles as two labelled lines.
   In a narrow host (a planner column, a day card) the muscle sits under its
   level, beside the same label in every host, so a level and the muscle it
   names stay together and no column wraps differently from its neighbour. */
.day-readings {
  container-type: inline-size;
  /* Inline-size containment gives a flex item no width of its own: take the
     whole line, which also keeps the pair off the minutes chip's line. */
  flex: 1 1 100%;
  display: grid;
  gap: var(--space-1);
}

.day-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
}

.day-reading-name {
  min-width: 3.25rem;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.day-reading-body {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

@container (max-width: 16rem) {
  .day-reading-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

.day-reading-detail {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.day-reading-rest {
  color: var(--ink-muted);
  font-weight: 600;
}