/* The personal email-in address under the drop area. */
.email-in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block-start: var(--space-2);
}

.inbox-list {
  display: grid;
  /* Each item is now a two-tone block of its own, and needs to end
     before the next one begins — anything tighter reads as one striped
     surface rather than a queue of separate things. */
  gap: var(--space-6);
  margin-block: var(--space-4);
  container-type: inline-size;
}

/* Bank message: helps the booking decision; clamped, full text on hover. */
.transaction-message {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-style: italic;
}

/* Recently processed: context survives the card leaving the queue. */
.inbox-history { margin-block-start: var(--space-5); }
.inbox-history > summary { cursor: pointer; color: var(--muted); font-size: var(--text-3); }
.inbox-history > summary:hover { color: var(--accent); }
.inbox-history .table-scroll { margin-block: var(--space-3); }

/* The identity cell absorbs the table's slack so date, action and amount
   gather instead of drifting apart (design_system.md Tables rule 9; the
   month grid is the reference). The identity is the one column allowed
   to wrap — its filenames and descriptions are the prose here. */
.activity-table th:nth-child(2),
.activity-table td:nth-child(2) { inline-size: 100%; }
.activity-table th:not(:nth-child(2)),
.activity-table td:not(:nth-child(2)) { white-space: nowrap; }
.activity-table .activity-what { overflow-wrap: anywhere; }

/* Undo is an action, not a button row (Tables rule 6): a form button
   dressed as the muted action link the grammar expects. */
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
.btn-link:hover { color: var(--accent); }

/* Manual booking form: inline disclosure under the proposal button. */
.booking-form > summary { cursor: pointer; margin-block-start: var(--space-2); }
.booking-form > summary:hover { color: var(--accent); }
.booking-form[open] > summary { margin-block-end: var(--space-2); }