/* Tasks surface (LMA-P1-ACTIONS) — docs/fsdd/design-guide/design-guide.md.
 * Tokens only (DG-T1); mobile-first base layout, desktop handled by the
 * shell column (DG-T7). Row anatomy mirrors the inbox (capture.css) so the
 * two lists read as one product. */

.action-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* DG-T2: section separation */
}

.action-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* DG-X2: >= 8px between adjacent targets */
}

.action-item {
  display: flex;
  align-items: stretch;
  gap: var(--space-2); /* DG-X2: link and button are separated siblings */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.action-item-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3); /* DG-T2: intra-card padding */
  min-height: var(--tap-min); /* DG-X2 */
  color: var(--color-ink);
  text-decoration: none;
}

.action-item-title {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

/* DG-T6: settled state = strikethrough + muted + the "Done" chip text —
 * never color alone. */
.action-item--settled .action-item-title {
  text-decoration: line-through;
  color: var(--color-ink-muted);
}

.action-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.action-item-source {
  font-size: var(--text-xs);
}

/* The re-mention badge (07 §1.3: mention frequency is a signal) — accent
 * tint, NOT danger: it is salience, not failure (DG-H5). One consolidated
 * badge per row (DG-H4); the count text is the non-color signal (DG-T6). */
.chip--mentions {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

/* Quiet one-tap lifecycle control (Done / Reopen / Undo) — never
 * accent-filled (DG-H3); >= --tap-min (DG-X2). */
.action-item-button {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: var(--tap-min); /* DG-X2 */
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2);
  cursor: pointer;
  align-self: center;
}

/* Inline undo affordance (DG-H2: undo over modal) — success tint, nothing
 * failed (DG-H5); announced politely via role="status" (DG-S4). */
.action-item-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2); /* DG-X2 */
  background: var(--color-success-tint);
  color: var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.action-item-undo-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Done disclosure: native <details>, no JS to fail; the summary is a full
 * tap target (DG-X2). */
.action-items-done {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.action-items-done-summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min); /* DG-X2 */
  font-size: var(--text-lg); /* DG-T3: section title scale */
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  cursor: pointer;
  margin-bottom: var(--space-3);
}