/* ============================================================
   COMPONENT · SUGGESTION  (c-suggestion)
   A caught thing, resting calmly — the collapsed inbox row. The captured text +
   a quiet meta line + one primary "Sort this" control that expands the clarify
   form in place. A full inbox becomes a scannable list of safely-caught things,
   not a wall of forms (chunk 03; chunk 13 absorbs/extends this).

   The D2 seam: when the bot proposes a disposition the collapsed row will show
   that proposal pre-selected ("I'd file this under Reference — ok?"). Until then
   the trigger expands the manual picker.

   Semantic tokens only → both themes flip for free. No rgba(0,0,0,*); depth comes
   from --seam-* (built on --shadow-color). Reduced-motion respected.
   ============================================================ */

.c-suggestion {
  display: block;
  padding-block: var(--space-3);
}

.c-suggestion__body {
  width: 100%;
}

/* Warm, readable captured text — sentence-case content the user reads as their own
   words, NOT chrome. --color-text-strong stays legible on cream (no phosphor leak). */
.c-suggestion__text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--color-text-strong);
}

/* Quiet provenance: source · a plain captured-at timestamp. Never an age counter. */
.c-suggestion__meta {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* The one primary control. A calm ghost button, not an alarm. */
.c-suggestion__trigger {
  align-self: flex-start;
}

.c-suggestion__form {
  margin-top: var(--space-1);
}

/* Mobile is the product: a full-width, ≥44px tap target on a phone. */
@media (max-width: 30rem) { /* literal of --bp-sm — custom props can't ride media queries */
  .c-suggestion__trigger {
    align-self: stretch;
    width: 100%;
    min-height: 2.75rem; /* 44px touch floor */
  }
}