/* A waiting item's sheet (H2) — docs/ui/PROPOSED.html P1b, approved: its own
 * way to close first, then Next chase, Drop and Reassign, two by two; and
 * the steps its answers ask in the same sheet (waiting-sheet.js).
 *
 * Its own stylesheet: pending.css is at 657 of its 800 lines, and day.css
 * and capture.css take no new rules (the wave's brief). It builds on what is
 * there — the sheet (capture.css, day.css), the row's sheet (pending.css
 * .rowsheet*, P3b and P3c's chips and days) and the house chip — and colour
 * comes from tokens.css alone, light and dark. Every control is a 44 px
 * target (--touch). */

/* ----------------------------------------------------------------- P1b */

/* Two by two, as the frame draws them (`.sh-chips.grid2`). */
.waitsheet__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

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

/* Its own way to close comes first, and stands out (the frame's `.pri`): the
 * green tint the chosen category wears, edged in the structural green. Not a
 * filled button: nothing is chosen for him, and none of the four is pressed. */
.waitsheet__chip--rule {
  border-color: var(--accent);
  background: var(--tint-chosen);
}

/* V3D's Todoist tick, under the answers: the box at the start of its line
 * (pending.css's .remindsheet__field rule needs a flex column to act in). */
.waitsheet .remindsheet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------ the steps */

.waitsheet__input {
  font-size: 1rem;
}

/* The close itself: the one button that closes, waiting (aria-disabled — a
 * Tab stop still) until what the rule needs is there; the hint above says
 * what for, in its own line, so nothing under the thumb moves. */
.waitsheet__close[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.waitsheet__close[aria-disabled="true"]:hover {
  border-color: var(--accent);
}

.waitsheet__hint {
  margin: 0;
}

/* The step's camera: its button, then the photo just taken, small. */
.waitsheet__photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.waitsheet__shoot {
  min-height: var(--touch);
  padding: 0 var(--space-3);
  color: var(--ink);
  font-size: var(--text-base);
}

.waitsheet__shoot[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.waitsheet__thumb:not([hidden]) {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  object-fit: cover;
}

.waitsheet__status:empty {
  display: none;
}

/* Who signed: the party's people as chips that wrap, then Someone else…, whose
 * name field opens under them. A chosen one fills in green, as C3's do. */
.waitsheet__signers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.waitsheet__signer {
  min-height: var(--touch);
  padding: 0 var(--space-3);
  color: var(--ink);
  font-size: var(--text-base);
}

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

.waitsheet .rowsheet__day[aria-pressed="true"] .rowsheet__date {
  color: var(--accent-ink);
}

.waitsheet__name:not([hidden]) {
  display: block;
}

/* The tick's label sits on its own line, without a form field's foot. */
.waitsheet .remindsheet .field {
  margin-bottom: 0;
}

/* ------------------------------------------------- step 2: Reassign on P3b */

/* Pending's own-row sheet with Reassign: four answers, two by two, as P1b's
 * (H2 step 2; P1's note, "plus Reassign"). Three stay one row (pending.css). */
.rowsheet__chips--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ------------------------------------------------------------ step 2: By PO */

/* P2's switch in the header row: By party | By PO, one pill of two halves,
 * the one on wearing the chosen tint (the frame's `.switch em.on`). The row
 * wraps when it must (at 360 px the scope chip takes a line of its own), so
 * nothing goes sideways; the switch keeps to the right, the scope after it. */
.pending__bar {
  flex-wrap: wrap;
}

.pending__switch:not([hidden]) {
  display: inline-flex;
  margin-inline-start: auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.pending__switch:not([hidden]) + .pending__pick {
  margin-inline-start: 0;
}

.pending__switch-btn {
  min-height: var(--touch);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
}

.pending__switch-btn[aria-pressed="true"] {
  background: var(--tint-chosen);
  color: var(--ink);
  font-weight: 600;
}

.pending__switch-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* No PO, folded into one line (P2): the heading's weight, a chevron that turns
 * once it is open; its rows follow under their parties, as P1 draws them. */
.pending__fold {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.pending__fold-mark {
  color: var(--ink-muted);
  font-weight: 400;
}

.pending__fold[aria-expanded="true"] .pending__fold-mark {
  transform: rotate(90deg);
}

.pending__fold:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------ step 2: what a close offers next */

/* Above the list, under `Suggested`: one card per offer — what closed, the
 * question, its one action and Not now (close-offers.js). A suggestion, not a
 * row: the surface the rows sit on, edged in the supporting lime, never the
 * warning orange the late rows wear. Short (fidelity review, round 1): the two
 * answers are P1b's chips side by side, never a full-width button with Not now
 * on a row of its own; By PO folds the block to one `Suggested · 2 ›` line
 * (No PO's look, P2), so the PO's own group is on the first screen. */
.pending__offers:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pending__offers-title {
  margin: 0 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

.offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--ps-lime);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.offer__lead {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.offer__question {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.offer__act,
.offer__dismiss {
  flex: 0 1 auto;
  min-height: var(--touch);
  cursor: pointer;
}

.offer__act:focus-visible,
.offer__dismiss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Held behind the Undo: both buttons wait (aria-disabled, a Tab stop still). */
.offer--held .offer__question {
  text-decoration: line-through;
}

.offer [aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

/* -------------------------------- step 2: a done: line's closes, after Save */

/* Under `Saved.` in the capture dock (done-offer.js): the line as typed, then
 * a chip per open item it names — each a 44 px target, the rule's green edge
 * on it (P1b's `.waitsheet__chip--rule`), since each opens a close.
 *
 * The block has a ceiling of its own and scrolls inside itself, as the
 * popover above the box does (capture.css .suggest): the dock is capped at the
 * screen less the tab bar and has no overflow, so an evening's write-up with
 * four or more done: lines grew it over the tab bar, crushed the compose box
 * behind ₹ · Photo · Note and pushed `Saved.` off the top at 360 (fidelity
 * review, round 1). It shrinks before the compose does (min-height 0); the
 * padding keeps a chip's focus ring inside the scroller's clip. */
.capture__closes:not([hidden]) {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 0;
  max-height: min(15rem, 35dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1);
}

.closes__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.closes__line {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.closes__prefix {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.closes__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.closes__chip {
  min-height: var(--touch);
  border-color: var(--accent);
  background: var(--tint-chosen);
  color: var(--ink);
  text-align: start;
}

.closes__chip[aria-disabled="true"] {
  border-color: var(--border);
  background: var(--bg);
  color: var(--ink-muted);
  cursor: default;
}

/* ------------------------------------------------ wave T (T2): Waiting on…
 *
 * waiting-on.js: who it waits on (a native select, a phone's wheel), the
 * first chase's day (the one When control, day-sheets.css `.when`) and the
 * button that acts once both are chosen. A step of the row's sheet (pending.css
 * .rowsheet) and a part of Close day's Stuck (rollforward.css .slipped__*). */
.waiton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.waiton__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.waiton__label {
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

.waiton__select {
  max-width: 100%;
}

.waiton__wait:not([hidden]) {
  width: 100%;
}