/*
 * /account/alerts (accounts/alerts/index; tasks/growth/milestones/13, D11):
 * the cards stacked, the alerts' table with its row of small buttons, and
 * the one-click offers as a list of condition and button.
 */
@layer pages {
  .alerts-page {
    --gap: var(--space-lg);
  }

  .alerts-page__note {
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .alerts-page__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2xs);
  }

  .alerts-page__offers {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .alerts-page__offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-block-end: var(--rule-width) solid var(--color-surface-sunken);
    font-size: var(--text-ui-sm);
  }
}