.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;
}

/* Components::Calendar::MuscleBands: muscles across days as one graph.
   The grid takes the columns the days sit on where it hangs under them
   (--muscle-bands-columns, the week row's), else one even column per day
   (--muscle-bands-days) between the muscles' names and their peaks. The
   day heads take the first row; under them the names stand in a column,
   the drawing spans every day column, and the peaks stand after it, each
   column one slot per muscle (--muscle-bands-rows) at the drawing's row
   height, so name, ribbon and peak line up. */
.muscle-bands {
  --muscle-bands-row: 2rem;
  display: grid;
  grid-template-columns: var(--muscle-bands-columns, 9rem repeat(var(--muscle-bands-days, 7), minmax(0, 1fr)) 6rem);
  align-items: start;
  gap: var(--space-1);
  padding-block: var(--space-2);
}

.muscle-bands-head {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
}

.muscle-bands-day {
  text-align: center;
}

/* The names are a toggle group (UI::ToggleGroup, quiet small buttons), one
   per row at the row's height; the pointer over one lights its row, a
   press holds the row lit (the kit's pressed button;
   muscle_bands_controller.js). */
.muscle-bands-names {
  display: grid;
  grid-auto-rows: var(--muscle-bands-row);
  align-items: center;
  justify-items: start;
  gap: 0;
}

.muscle-bands-name-lit {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.muscle-bands-graph {
  min-width: 0;
}

.muscle-bands-peaks {
  display: grid;
  grid-auto-rows: var(--muscle-bands-row);
  align-items: center;
}

.muscle-bands-peak {
  display: flex;
  align-items: center;
  padding-inline: var(--space-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.muscle-bands-peak-lit {
  background: var(--accent-soft);
}

/* The one drawing, stretched to its cell: one row per muscle; each ribbon's
   fill is a gradient whose stops take each day's tone. */
.muscle-ribbons {
  display: block;
  width: 100%;
  height: calc(var(--muscle-bands-rows, 1) * var(--muscle-bands-row));
}

/* The band behind a row, there to take the pointer and to light with its
   muscle; the ribbons, which step back while another row is lit, and the
   lit one, outlined. The outline keeps its width however the drawing is
   stretched. */
.muscle-ribbons-row {
  fill: transparent;
  cursor: pointer;
}

.muscle-ribbons-row-lit {
  fill: var(--accent-soft);
}

.muscle-ribbon {
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

.muscle-ribbon-dim {
  opacity: 0.3;
}

.muscle-ribbon-lit {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.muscle-ribbon-shape {
  vector-effect: non-scaling-stroke;
}

.muscle-ribbon-stop-good {
  stop-color: var(--good);
}

.muscle-ribbon-stop-caution {
  stop-color: var(--caution);
}

.muscle-ribbon-stop-danger {
  stop-color: var(--danger);
}

.muscle-ribbon-stop-severe {
  stop-color: var(--severe);
}