/* Components::DayDetailsModal. Everything the kit already expresses (panels,
   row lists, chips, a chip list) carries no rule here. What's left is the
   handful of things the kit has no primitive for:

   - a one-sentence explainer under the Intensity heading (Panel's own
     note: is for a short count or window, not a full sentence)
   - a workout row's name reading as the parent of its own movements
   - the "Avoid" / "Good targets" sub-headings inside the Planning outlook
     panel, and the "Unlinked" sub-heading Components::DayScoresSection
     renders one level below its own panel title: the same shape, a
     small-caps sub-heading sitting above a list rather than beside a value
   - each flagged movement's inline heading, since the "Suggest swap" link
     (day_warnings.css) sits inside the heading text itself, not in a
     separate panel-actions slot

   A panel spaces its own direct children (--space-2 between the head and
   each child, and between children), so none of the rules below carries a
   vertical margin of its own: that spacing would only add to the panel's.

   The comparison table this section leads into (Components::MuscleActivationComparison,
   W6) keeps its own rules in warnings.css for a later pass; nothing here
   touches it. */

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

/* The workout's own name inside its row-list row-title, set apart from its
   movements (styled the same as any other row-title) by weight alone. */
.day-details-workout-name {
  font-weight: 600;
}

/* This modal never renders wide (Modal.new takes no wide: here), so its
   panel tops out well short of a tablet width regardless of viewport. At a
   phone width, the row-list's standard indent (row-detail's padding-left)
   leaves too little room for a movement's name and its two chips to share a
   line, and the row wraps its chips onto their own line below the name
   (checked against every row in the demo day; "Flurbo Press" plus its
   "moderate volume" chip is the tightest fit). The movements list cancels
   the indent by default and restores it once the panel's content box (its
   border-box width less the panel's own padding and border) reaches 22rem,
   the point past which no row wraps. `UI::RowList#row_detail`'s `flush:` is
   a plain boolean, not a responsive one, so it cannot express "flush below
   22rem, indented above it"; this rule does it here instead. The literal is
   not a token: ui/row-list.css sets `.row-detail`'s own indent
   (`padding-left: calc(3rem + var(--space-2))`) as a literal too, with no
   custom property to read, so this negates that exact literal and must
   change if that rule's does. */
.day-details-movements {
  margin-left: calc(-1 * (3rem + var(--space-2)));
}

@container (min-width: 22rem) {
  .day-details-movements {
    margin-left: 0;
  }
}

.day-details-subheading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}

.day-details-comparison-name {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* Components::DayPlanSwaps: the day's plan beside the suggestions, one
   kind (stimulus, movements) at a time. On a phone the suggested column
   follows the planned one; from 28rem of the modal's width they sit side by
   side. */
.day-plan-kind {
  display: grid;
  gap: var(--space-2);
  container-type: inline-size;
}

.day-plan-columns {
  display: grid;
  gap: var(--space-3);
}

.day-plan-column {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.day-plan-column-head {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.day-plan-minutes {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.day-plan-more {
  font-size: var(--text-sm);
}

@container (min-width: 28rem) {
  .day-plan-columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* Adding to the day's plan (Components::DayPlanAdd): a movement found by
   name and a stimulus for its minutes, side by side once there is room. */
.day-plan-add {
  display: grid;
  gap: var(--space-3);
}

.day-plan-add-form {
  min-width: 0;
}

.day-plan-add-submit {
  display: flex;
  align-items: flex-end;
}

@media (min-width: 48rem) {
  .day-plan-add {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}