.row-menu {
  flex: 0 0 auto;
}

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

.day-tips {
  padding-left: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.day-tip {
  list-style: disc;
}

.day-frame {
  display: block;
  scroll-margin-top: 3rem;
}

.day {
  container-type: inline-size;
  /* The cycles menu's panel spans this box (UI::Menu align: :fill). */
  position: relative;
  padding: var(--space-3);
  background: var(--surface);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-md);
}

.day-today {
  box-shadow: 0 0 0 2px var(--accent);
}

.day-selected {
  border-color: var(--ink-muted);
}

/* The Calendar week's column: the planner's tinted day bar
   (.day-column-bar) bleeds to the column's edges, so it reads this box's
   padding and radius. */
.day-calendar {
  --day-column-pad-y: var(--space-3);
  --day-column-pad-x: var(--space-3);
  --day-column-radius: var(--radius-md);
}

.day-calendar-selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.day-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-content: start;
}

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

.day-title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.day-title-link {
  color: inherit;
  text-decoration: none;
}

.day-title-link:hover {
  text-decoration: underline;
}

.day-head-chip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5rem;
  vertical-align: middle;
}

.day-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

.day-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

.day-action {
  white-space: normal;
  text-align: center;
}

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

/* The Days page's day cards (Views::Builder::BuilderDay): a day's head and
   strata, one row of them that scrolls sideways at every width; the head
   opens the whole day in a popover panel sized like a day section. */
.day-grid-strip {
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  align-items: start;
  overflow-x: auto;
}

.builder-day-card {
  --day-column-pad-y: var(--space-2);
  --day-column-pad-x: var(--space-3);
  --day-column-radius: var(--radius-md);
  --day-band-bleed: var(--space-3);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-md);
}

.builder-day-card-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.builder-day-popover {
  display: block;
}

.builder-day-panel {
  width: min(48rem, calc(100vw - 2rem));
  max-height: 80vh;
  padding: 0;
}

/* The weekly planner's board (Views::WeeklyPlanners::DayBoard): each
   day's column followed by its detail. On a phone the days stack, an
   opened day's detail sits right under its own column, and the strip of
   days jumps between them; from 48rem the seven columns share one row and
   the opened detail spans the row under them. */
.planner-week {
  container-type: inline-size;
}

/* The week brief over the board (Views::WeeklyPlanners::WeekBrief): the
   smaller group, where the week sits and what it spends, beside the larger
   one, what to act on. Stacked until there is room for both. */
.planner-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
}

.planner-brief-lead {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

.planner-brief-actions {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

/* A chip row's label takes the line above its chips, so both rows of
   chips start at the same edge. */
.planner-brief-label {
  flex-basis: 100%;
}

@media (min-width: 64rem) {
  .planner-brief {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* The dashboard's Needs attention card between the brief and the board
   (Views::WeeklyPlanners::Index), set apart from both. */
.planner-attention {
  margin-block: var(--space-3);
}

.planner-strip {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-sunken);
}

.planner-days {
  /* Read by the opened column, which reaches down through the gap to meet
     its plan (weekly_planner.css .day-column-expanded). */
  --planner-days-gap: var(--space-2);
  display: grid;
  gap: var(--planner-days-gap);
}

/* The foot of each planner column: the bar that opens the day's plan below
   the board. It bleeds to the column's edges and bottom, and every column's
   bar sits at the foot, so the row of them lines up. */
.planner-day-open {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin: auto calc(-1 * var(--day-column-pad-x)) calc(-1 * var(--day-column-pad-y));
  padding: 0 var(--space-2);
  border: 0;
  border-top: var(--line-width) solid var(--line);
  background: var(--stratum-cycles);
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.planner-day-open:hover {
  background: var(--stratum-head);
  color: var(--ink);
}

.planner-day-open:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.planner-day-open[aria-expanded="true"] {
  border-top-color: transparent;
  background: var(--surface);
  color: var(--accent-ink);
}

@media (pointer: fine) {
  .planner-day-open {
    min-height: var(--tap-dense);
  }
}

/* The weekly planner column's plan: its workouts, stimuli, movements and
   muscles. */
.planner-day-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The day's scheduled and drafted workouts, one card each. */
.planner-day-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@container (min-width: 48rem) {
  .planner-strip {
    display: none;
  }

  .planner-days {
    --planner-days-gap: var(--space-1);
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  /* Side by side, the seven columns share their rows (subgrid), so each
     part of a day sits at the same height in every day and is as tall as
     the day that needs the most:
       1 head  2 cycles  3 minutes  4 workouts  5 stimuli  6 movements
       7 muscles  8 the day's action  9 open bar
     A part a day lacks leaves its row empty rather than pulling the rest
     up. The column hands the rows to the shared strata through the
     properties below, and the plan's four to .planner-day-plan. */
  .planner-day-column {
    --day-column-display: grid;
    --day-strata-row: 2 / span 7;
    --day-strata-rows: subgrid;
    --day-strata-gap: var(--space-2);
    --day-strata-column: 1;
    --day-cycles-row: 1;
    --day-alerts-row: 2;
    --day-workouts-row: 3 / span 4;
    --day-workouts-display: grid;
    --day-workouts-rows: subgrid;
    --day-workouts-pad: 0;
    grid-row: 1 / span 9;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .planner-day-actions {
    grid-row: 7;
    grid-column: 1;
    align-self: start;
  }

  .planner-day-open {
    margin-top: var(--space-2);
  }

  .planner-day-plan {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    /* Each part keeps its own height at the top of its row. */
    align-items: start;
  }

  .planner-day-detail {
    grid-row: 10;
    grid-column: 1 / -1;
  }
}

/* A day's strata under its head bar (Components::DayStrata), darkest to
   lightest: the cycles band, the alerts on the host's surface with no
   band, then the workouts. A band bleeds out of its host's padding to the
   host's edges; the host sets --day-band-bleed to its own side padding. */
.day-strata {
  display: grid;
  /* A host that lays its days on shared rows (the weekly planner's board)
     places the strata on them through these properties; anywhere else
     they fall back to a plain stack. */
  grid-row: var(--day-strata-row, auto);
  grid-template-rows: var(--day-strata-rows, none);
  /* One track that may shrink below its content's widest line, so a long
     button or chip wraps or clips inside a narrow column (the planner's
     seven across) instead of widening the strata past it. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--day-strata-gap, var(--space-1));
}

.day-band {
  display: var(--day-workouts-display, block);
  grid-row: var(--day-workouts-row, auto);
  grid-column: var(--day-strata-column, auto);
  grid-template-rows: var(--day-workouts-rows, none);
  margin: 0 calc(-1 * var(--day-band-bleed, var(--space-2)));
  padding: var(--day-workouts-pad, var(--space-1)) var(--day-band-bleed, var(--space-2));
}

.day-band-cycles {
  /* The box a cycle row's "N cycles" menu spans (UI::Menu align: :fill
     reads the trigger's nearest positioned ancestor): the day's full
     width, on every host, not whatever positioned box lies further out. */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Chips sit at the top of a band a shared row made taller. */
  align-content: flex-start;
  gap: var(--space-1);
  grid-row: var(--day-cycles-row, auto);
  padding: var(--space-1) var(--day-band-bleed, var(--space-2));
  background: var(--stratum-cycles);
}

.day-alerts {
  /* On shared rows the alerts keep a row of their own. */
  grid-row: var(--day-alerts-row, auto);
  grid-column: var(--day-strata-column, auto);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.day-strip {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-sunken);
}

@container (min-width: 36rem) {
  .day-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .day-head {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .day-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(11rem, 1fr);
    align-items: start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .day-strip {
    display: none;
  }
}

/* A day's status (Components::DayStatus): in progress, finished, released.
   The tone is the chip's (caution, good, accent); this adds the outline,
   dashed while the day is still open, and the weight. The control is the
   same pill with a select in it. */
.day-status {
  margin: 0;
  border: var(--line-width) solid currentColor;
  font-weight: 600;
}

.day-status-in_progress {
  border-style: dashed;
}

.day-status-mark {
  font-size: 0.85em;
  line-height: 1;
}

.day-status-control {
  overflow: visible;
  padding-inline-end: var(--space-1);
}

/* The select takes the pill's colors, so its open list reads in them too;
   the pill draws the border and the focus ring. */
.day-status-select {
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: inherit;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.day-status-select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.builder-day-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.builder-day-status:empty {
  display: none;
}

/* The day's next status as one button (Views::Builder::DayStatusSlot). */
.builder-day-step {
  display: contents;
}