/* Planned today — the day page's strip between the header and the timeline.
 *
 * Moved out of day.css in wave M (increment D), rule for rule and in the same
 * order, when that file stood at 778 of HARD RULE 8's 800 lines. Linked
 * right after day.css and before cards.css, where these rules stood. Every
 * colour comes from tokens.css; planned.js draws the rows. */

/* ------------------------------------------------- Planned today (C1, §5) */

/* One amber block of orange rows — MOCKUP:78-80. Rows and controls inherit
 * the colour and the 500 weight; the grey lines below opt out of both. The
 * text is the cards' 0.9375rem: the wireframe draws strip and cards at one
 * size, and at the body's 1rem the morning strip ran to 253px against §0.10's
 * ~180 and broke its chase row inside a date (C3 review, M1). Wave M's scale
 * (tokens.css) raised the cards to 16 px on a phone; the strip stays at 15 px
 * there (--text-md) and at 15 px on the desk (its --text-base), so the morning
 * strip keeps to its 200 px (test_planned_chase.py) — integration, wave M. */
.planned {
  background: var(--tint-warn);
  color: var(--warn-ink);
  font-size: var(--text-md);
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}

@media (min-width: 1100px) {
  .planned {
    font-size: var(--text-base);
  }
}

.planned__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Column 1 holds the tick; column 3 a payment-out's amount and, below it,
 * the push control (§5 C2 "Row controls"). "Tomorrow" narrows the text
 * column enough that a long row wraps at phone width, so the row is laid from
 * its TOP, and the text's first line (and an amount) is padded down to the
 * middle of the 44px tick: the box and "Tomorrow" sit on the first line, never
 * between two. Padded at the top only, so a wrapped row grows by half a
 * control, not a whole one (the height budget, §0.10); a one-line row is the
 * 44px it always was. */
.planned__row {
  display: grid;
  grid-template-columns: var(--touch) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-2);
  min-height: var(--touch);
}

.planned__text,
.planned__amount {
  padding-top: calc((var(--touch) - 1lh) / 2);
}

/* The tick: a full 44px target whose 1.1rem box is drawn in the row's own
 * orange, `border: 2px solid currentColor` — MOCKUP:79's small square box. */
.planned__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.planned__box {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-radius: 3px;
}

/* Held behind the toast's Undo: the words are struck through and both
 * controls say they are unavailable; a TICK held there also shows its check.
 * A row "Tomorrow" is holding does not: a row moved to tomorrow is not done. */
.planned__row--ticked .planned__box::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.04rem;
  width: 0.3rem;
  height: 0.58rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.planned__row--held .planned__text {
  text-decoration: line-through;
}

/* aria-disabled, never `disabled`: a keyboard owner's focus survives the
 * hold (planned.js); the tap is refused in planned-actions.js. */
.planned__tick[aria-disabled="true"],
.planned__push[aria-disabled="true"] {
  cursor: default;
}

.planned__push[aria-disabled="true"] {
  opacity: 0.5;
}

.planned__tick:focus-visible,
.planned__push:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Column 3: the amount on top, "Tomorrow" under it, both right-aligned. */
.planned__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* The push control: compact, muted text, and still a 44 × 44 target. */
.planned__push {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.planned__overdue {
  font-weight: 700;
}

/* One clause of a row's meta — `open 9 d`, `last 21 Sep` — never broken, so
 * a narrow row wraps between clauses and a date stays whole (C3 review, M1). */
.planned__clause {
  white-space: nowrap;
}

/* A link to the Pending list (H1a; §1 decision 20's in-place expansion is
 * retired) — a text link, 44px like every control. */
.planned__more:not([hidden]) {
  display: inline-flex;
  align-items: center;
}

.planned__more {
  border: 0;
  background: transparent;
  padding: 0 var(--space-2);
  min-height: var(--touch);
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.planned__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The grey lines: what the other side owes, and the quiet-day sentence. */
.planned__awaited,
.planned__empty {
  margin: 0;
  padding: var(--space-1) 0;
  color: var(--ink-muted);
  font-weight: 400;
}

/* The grey line opens Pending on Overdue (H1a; the frame's P3 ›). The whole
 * sentence is the link, in the line's own grey. Its box takes the line's own
 * padding above it and reaches down through the line's foot, the strip's and
 * the gap below — space no other control uses — so it never covers the row
 * above (code review of H1a: a 44 px box pulled up over the last row's
 * Tomorrow stole its taps) nor the first card below. That came to 40 px, so
 * the line's foot is 5 px deeper than its head (.planned__awaited below):
 * 4 to reach 44, and 1 because the card's rounded corners take the whole
 * pixel above its edge (review of H1, round 1, measured by elementFromPoint).
 * The morning strip is 198.9 px of its 200. The › is drawn here, never in
 * the words, and says nothing to a screen reader. */
.planned__awaited-link {
  display: block;
  margin: calc(-1 * var(--space-1)) 0 calc(-1 * (var(--space-2) * 2 + var(--space-1) + 1px));
  padding: var(--space-1) 0 calc(var(--space-2) * 2 + var(--space-1) + 1px);
  color: inherit;
  text-decoration: none;
}

.planned__awaited-link::after {
  content: " \203A" / "";
}

.planned__awaited-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* What the other side owes is the strip's footnote: the 0.8125rem of
 * "Tomorrow", so the wireframe's sentence keeps to one line at 390px (the
 * wireframe itself wraps it at 238px) — a deviation for §0.10's budget, C3
 * review M1. The quiet-day sentence stands where rows would, at their size.
 * Wave M's integration keeps this one line at its 13 px on purpose: at the
 * scale's 14 px it wraps at 390 px and the morning strip is 222 px against its
 * 200 (test_planned_chase.py). The one number under 1rem left on Today. */
.planned__awaited {
  padding-bottom: calc(var(--space-2) + 1px);
  font-size: 0.8125rem;
}

/* No rows and nothing awaited: a single muted, untinted line (§5). */
.planned--empty {
  background: none;
  color: var(--ink-muted);
}

/* The quiet-day line takes the focus when the last row it replaces had it
 * (planned.js refocus): the strip's own ring, not the browser's. */
.planned__empty:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}