/* The Pending list (H1a) — docs/ui/PROPOSED.html P1 and P4, approved with the
 * owner's answers of 2026-09-25, drawn in the wireframe's language: the day
 * header's row (the display face, a muted count, the scope chip at the right),
 * one row of chips swiped sideways, then groups of bordered rows, each row two
 * lines — what it is, then its dates and references.
 *
 * Its own stylesheet (NEXT-PLAN §6.6: day.css and capture.css are near the
 * cap). Linked after day.css, whose .day__pick/.day__scope/.day__caret the
 * scope chip reuses. Every colour is a tokens.css variable, light and dark;
 * every control is a 44 px target. Nothing here sets overflow, transform or
 * contain on .shell, a view wrapper or .day (views.css rule 2): only the chip
 * row scrolls, and it holds nothing sticky.
 */

/* --------------------------------------------------------------- the header */

.pending__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.pending__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
}

.pending__bar > .view__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.pending__open {
  color: var(--ink-muted);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.pending__pick {
  margin-inline-start: auto;
  color: var(--ink-muted);
}

/* S (review finding 7): the scope chip — "All ▾", here and in the day's
 * header — was its three letters and the caret's room, 43 px. 44 at least;
 * day.css draws the rest of it, and this file is linked after that one. */
.day__scope {
  min-width: var(--touch);
}

/* ---------------------------------------------------------------- the chips */

/* One row, swiped sideways; the fade at the right edge says there is more,
 * and goes once the row is scrolled to its end or has nothing to scroll
 * (pending-chips.js marks it `data-end`; fidelity review of H1, round 1:
 * scrolled to its end, the last chip's words stood under the fade).
 * --chips-fade is the fade's share of the row; revealChip reads it too, so a
 * chip the keyboard reaches is scrolled clear of it. */
.pending__chips:not([hidden]) {
  --chips-fade: 15%;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  mask-image: linear-gradient(to right, #000 calc(100% - var(--chips-fade)), transparent);
}

.pending__chips[data-end] {
  mask-image: none;
}

.pending__chips::-webkit-scrollbar {
  display: none;
}

.pending__chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-md);
  white-space: nowrap;
  cursor: pointer;
}

.pending__chip--on {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

.pending__count {
  font-weight: 600;
}

/* The Overdue count, orange (the frame's P1): what is late is the number to see. */
.pending__count--hot {
  color: var(--warn-ink);
  font-weight: 700;
}

.pending__chip--on .pending__count--hot {
  color: inherit;
}

button.pending__chip:focus-visible,
.pending__chip--select:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Party and Type: the select is the whole chip, the pill its wrapper. Each is
 * as wide as its chosen label (pending-chips.js rule 1): a select's own width
 * is its longest option's, which made them 145 and 169 px (review, round 1).
 * Chromium, as Close day's box: the phone's Chrome, Edge, PSDiary.exe. */
.pending__chip--select {
  padding: 0;
}

.pending__select {
  appearance: none;
  field-sizing: content;
  min-height: var(--touch);
  /* The caret's room at the right: its own em and a word's space before it. */
  padding: 0 calc(var(--space-3) + 1em) 0 var(--space-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.pending__select:focus-visible {
  outline: none;
}

.pending__caret {
  position: absolute;
  right: var(--space-3);
  pointer-events: none;
}

/* --------------------------------------------------------------- the groups */

.pending__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pending__group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1) var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

.pending__group-meta {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: nowrap;
}

.pending__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ----------------------------------------------------------------- the rows */

/* The lead (the box, Log chase or ✓/–), the two lines, then the ⋯. Laid from
 * the top: line 1 is padded down to the middle of the 44 px lead, so a row
 * that wraps grows by its words, not by a control (planned.css's rule). */
.pending__row {
  display: grid;
  grid-template-columns: var(--touch) minmax(0, 1fr) var(--touch);
  align-items: start;
  column-gap: var(--space-1);
  min-height: var(--touch);
  padding: 0 0 var(--space-1);
}

.pending__row + .pending__row {
  border-top: 1px solid var(--border);
}

/* A to-do filed under a waiting item: one step in, under it. */
.pending__row--child {
  padding-inline-start: var(--space-6);
}

.pending__lead,
.pending__side {
  display: flex;
  justify-content: center;
}

/* Positioned for the words' button's ::after, which covers it (below). */
.pending__body {
  position: relative;
  min-width: 0;
}

/* The words, and the amount at the right of the first line (the frame's P1). */
.pending__l1 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding-top: calc((var(--touch) - 1lh) / 2);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pending__row--late .pending__l1 {
  color: var(--warn-ink);
}

.pending__row--shut .pending__l1 {
  color: var(--ink-muted);
  font-weight: 400;
}

.pending__row--held .pending__words {
  text-decoration: line-through;
}

.pending__words {
  flex: 1 1 auto;
  min-width: 0;
}

.pending__amount {
  flex: none;
  color: var(--ink);
  font-weight: 600;
}

.pending__l2 {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* A clause never breaks inside itself: a narrow row wraps between clauses. */
.pending__clause {
  white-space: nowrap;
}

.pending__clause--late {
  color: var(--warn-ink);
}

.pending__clause--strong {
  font-weight: 700;
}

/* ------------------------------------------------------------ the controls */

.pending__tick,
.pending__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
}

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

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

.pending__dots {
  font-weight: 700;
  letter-spacing: -0.05em;
}

/* Log chase: a quiet bordered button in the box's place — whose move it is.
 * S: its two words are 12 px (--text-xs), where they were 11. */
.pending__chase {
  width: var(--touch);
  min-height: var(--touch);
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
}

.pending__tick[aria-disabled="true"],
.pending__chase[aria-disabled="true"],
.pending__dots[aria-disabled="true"] {
  cursor: default;
}

.pending__chase[aria-disabled="true"],
.pending__dots[aria-disabled="true"] {
  opacity: 0.5;
}

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

/* ✓ done, – dropped (the frame's P4a). */
.pending__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  color: var(--ink-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------ empty states */

.pending__empty:not([hidden]) {
  display: block;
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-muted);
}

.pending__empty-title {
  margin: 0 0 var(--space-1);
  color: var(--ink);
  font-weight: 600;
}

.pending__empty-line {
  margin: 0;
}

.pending__empty code {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.pending__showall {
  min-height: var(--touch);
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

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

/* ======================================================================
 * H1b — a to-do's words are its sheet's button, and the sheet itself:
 * Pick a day · Unplan · Drop (docs/ui/PROPOSED.html P3b and P3c; the
 * owner's N8 of 2026-09-25), on Today's strip and on Pending; and the
 * photos filed under an item (DAY-PAGE-PLAN §8 Q6). The strip's rules live
 * here, not in day.css (774 of its 800 lines), because this file is the one
 * every page already links after it.
 * ====================================================================== */

/* ------------------------------------------------------ the strip's words */

/* The text column is the words' cell, the row's full height, so the button
 * is a 44 px target however short its words; the words and the meta keep
 * flowing as one paragraph inside it, as they did in the plain span, so the
 * strip is no taller (the morning's 200 px gate). */
.planned__cell {
  display: flex;
  align-self: stretch;
  min-width: 0;
}

.planned__cell > .planned__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Laid from the top, as the span was: a button would centre its words. */
.planned__words {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding-inline: 0;
  padding-bottom: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.planned__line {
  min-width: 0;
}

/* The dotted underline says the words are a button (P3a); the meta has none. */
.planned__said,
.pending__say {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.planned__words[aria-disabled="true"],
.pending__say[aria-disabled="true"] {
  cursor: default;
}

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

/* -------------------------------------------------- a Pending row's words */

/* The words' button answers a tap anywhere on the row's body — both lines,
 * the amount, the space above line 1 — through a ::after laid over the body,
 * as the strip's words take their whole text column (fidelity review of H1,
 * round 1: line 1 alone answered, across 32 px, and a tap on line 2 did
 * nothing). The button itself stays in line 1's flow, so no row grows, and
 * its ring is drawn on the ::after, round all that a tap answers. The
 * photos on line 2 stand above the layer (below), so each keeps its link. */
/* S: the button's own box is 44 px tall as well, however short its words
 * (a one-line to-do's stood 20 px): padded above and below to the lead's
 * height and pulled back by the same margin, so line 1 and line 2 stay
 * exactly where they were — it reaches up over line 1's own top padding and
 * down under line 2, ground its ::after already answered for. */
.pending__say {
  display: block;
  width: 100%;
  margin: calc((1lh - var(--touch)) / 2) 0;
  padding: calc((var(--touch) - 1lh) / 2) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* Out over the gaps beside the body and the row's foot — no control's
 * ground — so the ring stands clear of the words' first letter and line 2. */
.pending__say::after {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--space-1)) calc(-1 * var(--space-1));
  border-radius: var(--radius-sm);
}

.pending__say:focus-visible {
  outline: none;
}

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

/* ------------------------------------------------------- the row's sheet */

/* At the foot of the screen, under the thumb (P3b); the other sheets centre. */
.sheet__card.rowsheet-card {
  margin-block: auto 0;
}

.rowsheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.rowsheet__meta {
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

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

.rowsheet__chip,
.rowsheet__day {
  flex: 1 1 0;
  justify-content: center;
  min-height: var(--touch);
  color: var(--ink);
  font-size: var(--text-base);
}

.rowsheet__keys {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rowsheet__key {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.rowsheet__key b {
  color: var(--ink);
  font-weight: 600;
}

/* Wave T (T3, T5): what the item IS, under where it goes — Important, a toggle
 * (pressed: the strip's own orange wash and ink, and its border, so the state
 * is never colour alone), and Note…. */
.rowsheet__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

.rowsheet__flag[aria-pressed="true"] {
  border: 2px solid var(--emphasis-edge);
  background: var(--tint-warn);
  color: var(--warn-ink);
}

/* Wave T (T5): the note's glance under the meta, and its step (note-step.js). */
.rowsheet__note {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* T4: the Repeat… step (row-sheet.js rule 10) stands as the note's does; its
 * choices are .rowsheet__flag toggles, pressed for the rule the item has. */
.notestep,
.rowsheet__repeat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.note__input {
  min-height: 7.5rem;
  line-height: 1.45;
  resize: vertical;
}

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

.note__actions > .btn {
  flex: 1 1 auto;
}

/* Save note with nothing changed (note-step.js rule 2): a Tab stop still, drawn
 * quiet as day-sheets.css draws an answer waiting for its chip; the tap is refused. */
.note__save[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* Wave T (T3): an important row's mark before its words — a bordered `!` in
 * the row's own ink (row-sheet.js importantMark). Inline, with line-height 1,
 * so neither the strip (its 200 px) nor a Pending row grows a pixel. */
.planned__important,
.pending__important {
  display: inline;
  flex: none;
  margin-inline-end: 0.35em;
  padding: 0 0.3em;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font-weight: 700;
  line-height: 1;
}

/* P3c: `Pick a day:`, then two by two, each day with its date under it. */
.rowsheet__label {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

.rowsheet__days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.rowsheet__day {
  flex-direction: column;
  gap: 0;
  padding-block: var(--space-1);
  border-radius: var(--radius);
  line-height: 1.25;
  text-align: center;
}

.rowsheet__date {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

/* Other date…: the native date input is the chip's second line. */
.rowsheet__other {
  cursor: pointer;
}

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

.rowsheet__input {
  width: 100%;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: center;
}

.rowsheet__input:focus-visible {
  outline: none;
}

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

/* ------------------------------------------------- photos on a Pending row */

/* At the end of line 2, as the frame's challan draws its thumbnail (P1),
 * and above the words' layer (.pending__say::after), so its link is its own. */
.pending__photos {
  position: relative;
  z-index: 1;
  margin-inline-start: var(--space-1);
}

.pending__photos > .entry__thumbs {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}

/* A waiting row's Todoist tick (remind-sheet.js, wave-1 merge): the box at the
 * start of its line, as every checkbox row reads — capture.css's align-self:
 * end is for a checkbox in a form's grid, and put it at this column's end. */
.remindsheet .remindsheet__field {
  align-self: start;
}

.remindsheet__status:empty {
  display: none;
}