/* The capture dock's chip row, as increment G made it (capture-chips.js).
 *
 * Its own stylesheet because capture.css stood at 799 of HARD RULE 8's 800
 * lines after G's fidelity round 1, with F still to add to it (NEXT-PLAN §6:
 * split by feature). Linked after capture.css, so a rule here wins a tie
 * with one there (`.chip--warning` over `.chip`). Every colour comes from
 * tokens.css. The pressed answer shares the kind row's filled rule, which
 * stays in capture.css. */

/* `Close it: … / Open new` for a line whose party already has that item
 * open. One group, wrapping inside the chip row like any chip. */
.chip-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 100%;
}

/* A long item's words wrap; they read from the start, as the chip above does. */
.chip--answer {
  text-align: start;
}

/* "Already open: … (same set)" about another open item — a caution, not a control. */
.chip--warning {
  border-color: var(--border);
  color: var(--warn-ink);
}

/* Round 1, finding 4: with `Close it` pressed the line's chip says what Save
 * will do (`Done: …`, or still to record) — muted, as the card's sub-line. */
.chip--pending.chip--closing {
  border-style: dashed;
  border-color: var(--border);
  color: var(--ink-muted);
}

/* Round 1, finding 5: veil.js's `Private item — tap to show` beside a private
 * item's pair, at the chips' size, its 44 px its own height: the overhanging
 * tap area it has in a card's row would lie over the chip above it here. */
.capture__bar .veil__show {
  min-height: var(--touch);
  font-size: var(--text-sm);
}

.capture__bar .veil__show::after {
  content: none;
}

/* Round 1, finding 3. With the soft keyboard up the page is resized to what
 * is left (interactive-widget=resizes-content), and a line whose party has
 * that item open made the chip row taller than the dock's room: the compose
 * row spilled out of the dock's top over the day's header, text over text.
 * Now the chip row is at most 30dvh and scrolls inside itself; the form above
 * gives up its height first (its fields scroll in themselves); only then does
 * the compose row give any, from its chip row alone — the kinds and the box
 * never move. The form's factor is large rather than the compose row's small:
 * a lone item with a factor under 1 takes only that share of the deficit
 * (css-flexbox §9.7), and the rest would spill again. No min-height on the
 * chips: a floor would make every one-chip row taller, and the dock's height
 * budget has nothing to spare. */
.capture__bar > .form {
  flex-shrink: 1000;
}

.capture__bar > .capture__compose {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.capture__compose > * {
  flex: none;
}

.capture__compose > #capture-chips {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 30dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Round 3, finding 5: while chips lie below the row's edge (capture-chips.js
 * edgeCue sets data-more) its last 1.75rem fades out, the sign that more is
 * there — the row showed none, and a pair or an `Already open` warning sat
 * out of sight. Round 4, finding 3: while chips lie above (data-above) its
 * first 1rem fades too, so a chip cut at the top reads as scrolled, not as
 * drawn under the kind row. capture-chips.js FADE_REM holds the same two
 * heights: a pair or warning is brought into view clear of them. The mask
 * reads alpha only; the token is any opaque one. */
#capture-chips[data-more] {
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 1.75rem), transparent);
  mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 1.75rem), transparent);
}

#capture-chips[data-above] {
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) 1rem);
  mask-image: linear-gradient(to bottom, transparent, var(--ink) 1rem);
}

#capture-chips[data-above][data-more] {
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) 1rem, var(--ink) calc(100% - 1.75rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--ink) 1rem, var(--ink) calc(100% - 1.75rem), transparent);
}

/* A scroller clips what is drawn outside it: the focus ring goes inside. */
#capture-chips :is(button.chip, .veil__show):focus-visible {
  outline-offset: -2px;
}

/* Wave T (T1): a line's one plan chip is a toggle, Planned ↔ Due, at a
 * thumb's 44 px — the one chip here with a floor, since it is the one a tap
 * changes the save with. Pressed is Due: the orange edge and text of
 * lateness, never colour alone (its words say Due). */
#capture-chips button.chip--date {
  min-height: var(--touch);
}

#capture-chips button.chip--date[aria-pressed="true"] {
  border-color: var(--emphasis-edge);
  color: var(--warn-ink);
}