/* "I handled this" — module 29's one control, on three screens.
 *
 * Its own file rather than more of `screens.css`, which module 14 established
 * with `autonomy.css` and module 26 with `tasks.css`, and which the 500-line
 * rule makes the right call again: `beach.css` is at the limit exactly and
 * `screens.css` is a phone-screen file while this is a component three screens
 * share. `tests/app/test_layouts.py` discovers every stylesheet in this
 * directory, so a file that is not linked from the shell, from the offline page
 * and from the service worker fails there rather than on his phone.
 *
 * Everything here builds on `beach.css`'s tokens. Every colour is a palette
 * token; there is no hex in this file, which is what keeps the approved set the
 * approved set.
 *
 * Drawn at 393, which is what an iPhone 16 Pro Max reports and the width every
 * frame in `design/beach.pen` is drawn at. */

.handled {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.handled > form { display: block; }

/* Quiet, and still a real target. The whole control is `--tap` tall even though
 * it reads as a small chip: this sits under a row he is scrolling past on a
 * train, and the two mistakes it can make are being missed and being hit by
 * accident. Undo is what covers the second one; height is what covers the
 * first. */
.handled-mark, .handled-undo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 12px;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.handled-mark {
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
}
.handled-mark:hover, .handled-mark:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.handled-mark:active { background: var(--accent-soft); }

/* Marked. The state and the way out of it, side by side — a one-way action on a
 * phone is a trap, so the undo is where the tap was rather than on a screen he
 * has to go and find. */
.handled-said {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  min-height: var(--tap);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ok);
}
.handled-undo {
  color: var(--muted);
  background: none;
  border: 0;
  text-decoration: underline;
  font-weight: 500;
}
.handled-undo:hover, .handled-undo:focus-visible { color: var(--ink); }

/* While it is in flight. HTMX puts `.htmx-request` on the element it is posting
 * from, and a control that looks identical mid-request is a control he taps
 * twice on a bad signal. */
.handled form.htmx-request button { opacity: 0.5; }

/* On the queue, where the row already carries approve and reject. The note
 * beside it is the load-bearing part: marking the mail handled does not touch
 * the draft, and a control that looked like it might is worse than no control.
 * `card-actions` is above it, so this is separated rather than crowded. */
.card-handled {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.card-handled .handled { margin-top: 0; }
.card-handled .note { flex: 1 1 auto; min-width: 0; }