/* R — roll-forward on the device: Close day's forced choice and the line by
 * its answers (docs/ui/NEXT-PLAN.md §5 "R"; close-slipped.js, close-day.js
 * rule 7). Its own stylesheet: day.css and capture.css take no new rules
 * (NEXT-PLAN §6.6). Colours from tokens.css only, so light and dark follow.
 * The `slipped n×` badge on the strip and on Pending needs none: it is one
 * more clause of the meta and of line 2, in their own styles. */

/* ---------------------------------- a private item's veil on the amber wash
 *
 * veil.js's button keeps cards.css's --accent green, which is 3.76:1 on the
 * dark --tint-warn (#4E9C6D on #452F19) — under the 4.5:1 its body-size text needs
 * (review of R, round 1; search.css made the same correction for its amber
 * cards on 2026-09-25). On the wash it wears the wash's own ink, --warn-ink:
 * 4.92:1 light, 6.97:1 dark. The strip's rows carried the same pairing before
 * R (H1b, V2A); R draws its slipped badge in those rows, so one rule covers
 * both. day.css takes no new rules (NEXT-PLAN §6.6), hence here. */
.planned .veil__show,
.slipped__words .veil__show {
  color: var(--warn-ink);
}

/* ------------------------------------------- Slipped three times (first) */

.slipped__lede {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* Each item in the strip's wash, as a line that becomes a chase is
 * (.close__chase): the plan's own warning colour, with the state edge. */
.slipped__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--tint-warn);
  border-left: 3px solid var(--emphasis-edge);
  border-radius: var(--radius-sm);
}

.slipped__item + .slipped__item {
  margin-top: var(--space-2);
}

.slipped__words {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.slipped__meta {
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--warn-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* PLAN-v2's four answers and wave T's two (T8: Set a due date, Waiting on…):
 * two by two on a phone, three to a row from 30rem — six answers in two even
 * rows, five (no Waiting on… for a chase) in a row of three and one of two.
 * None is chosen until he chooses (rule 1); the chosen one is filled, as the
 * sheet's other chips are (day.css .sheet__pick). */
.slipped__answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 30rem) {
  .slipped__answers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.slipped__answer {
  justify-content: center;
  min-height: var(--touch);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-base);
  text-align: center;
}

.slipped__answer[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Pick a day: wave T's one When control (T6; day-sheets.css `.when`) — its
 * label, In 3 days and In a week, and Other date… whose second line is H1b's
 * native date input (row-sheet.js P3c). */
.slipped__day-label {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

/* Every When in an item's row — Pick a day, and wave T's due date and first
 * chase (T8) — puts its days two by two, as P3c's sheet does: three across in
 * the wash, at 390 px, `Tomorrow` broke mid-word (the chip may wrap anywhere,
 * capture.css). */
.slipped__item .when__days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* What the chosen answer does (H1b's keys), heard as well as seen. */
.slipped__said {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.slipped__said:empty {
  display: none;
}

/* ---------------------------------------- the line by Close day (rule 7)
 *
 * Only while something slipped three times does the foot hold two lines: D's
 * chase summary (when a typed line becomes a chase) and, under it, what the
 * forced choice still waits for — the line Close day is described by. It
 * stays once every item is answered, calmer, so nothing under the thumb
 * moves. Without a slipped item the foot is D's summary alone, unchanged. */
.close__foot {
  flex: none;
}

.close__foot > .close__summary:not([hidden]) + .close__waits {
  border-top: 0;
  padding-top: 0;
}

.close__foot + .sheet__choices {
  border-top: 0;
}

.close__waits--done {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}