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

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

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

/* The board's context over its days (DayBoard): the cycles the week owes a
   day and last week. */
.planner-context {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-1);
  background: var(--surface-sunken);
}

.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 day in order (workouts, drafts and
   planned stimulus blocks), movements and muscles. */
.planner-day-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The day in order, one card each (Components::Calendar::DaySequenceList),
   on the planner's column and open day and the plan calendar's Arrange tile. */
.planner-day-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.planner-day-sequence-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* One card of the day and its ⋯ menu beside it, as a tile: a scheduled
   workout on the scheduled chip's ground, a draft on the draft chip's, a
   planned block a dashed outline, a place not yet filled
   (Components::Calendar::SessionCard's state chips). */
.planner-day-sequence-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.planner-day-sequence-item-scheduled {
  background: var(--good-soft);
  box-shadow: inset 0 0 0 1px var(--good-fill);
}

.planner-day-sequence-item-draft {
  background: var(--caution-soft);
  box-shadow: inset 0 0 0 1px var(--caution-fill);
}

.planner-day-sequence-item-planned {
  border: 1px dashed var(--line);
}

/* The open day's list takes a stimulus dragged from its palette; while one
   is over it, it says so (stimulus-type-selector sets the class). */
.planner-day-sequence-drop {
  min-height: var(--tap);
  border-radius: var(--radius-md);
}

.day-card-drop-target {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* What on a day needs the coach (Views::WeeklyPlanners::DayAttention): a
   chip in the column's alerts that opens the day, and in the open day the
   problem beside its one next step. */
.planner-day-attention {
  cursor: pointer;
  border: 0;
  font: inherit;
}

.planner-day-attention-open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
}

.planner-day-attention-problem {
  flex: 1 1 20rem;
  font-size: var(--text-sm);
}

/* The open day (Views::WeeklyPlanners::DayCard): the tools that fill the
   day, the day in order, then what it loads; stacked on a phone, the tools
   and the order side by side from 48rem, all three from 72rem. */
.planner-open-day {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.planner-open-day-order,
.planner-open-day-tools,
.planner-open-day-load {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* One group of tools: the stimulus palette, the muscle focus, the
   movements. */
.planner-open-day-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A card's small print in the open day, on one wrapping line under its
   name: minutes, movements or mix advice, then its folded extras. */
.planner-open-day-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  flex-basis: 100%;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* A planned block's link to the workout template it should be built from. */
.planner-block-template {
  font-size: var(--text-sm);
  color: var(--accent-ink);
}

.planner-open-day-hint {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.planner-open-day-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

@container (min-width: 48rem) {
  .planner-open-day {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@container (min-width: 72rem) {
  .planner-open-day {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  }
}

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

  /* Side by side, the context stays at the top of the screen while the days
     and an opened day scroll under it (on a phone the strip of days does). */
  .planner-context {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .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 the day in order  5 movements
       6 muscles  7 the day's action  8 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 three to .planner-day-plan. */
  .planner-day-column {
    --day-column-display: grid;
    --day-strata-row: 2 / span 6;
    --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 3;
    --day-workouts-display: grid;
    --day-workouts-rows: subgrid;
    --day-workouts-pad: 0;
    grid-row: 1 / span 8;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .planner-day-actions {
    grid-row: 6;
    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: 9;
    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;
}