/* Invitation confirmation screen — v2 design system (R11, issue #681).
 *
 * Page-specific centered-card layout for the single-purpose accept/decline
 * screen (GET/PATCH/DELETE /invitations/:token, application layout — no
 * navbar). The card surface itself reuses the shared .lc-card molecule
 * (molecules/directory-card.css); this file owns only the page-level
 * centering and the accept/decline button row. Modeled on the analogous
 * single-purpose auth-adjacent screen in pages/devise.css, but the card
 * body composes only text + .lc-btn atoms, so it stays at the pages/
 * level rather than becoming an organism.
 */

.invitation-page {
  display: flex;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}

.invitation-card {
  width: 100%;
  max-width: 480px;
}

.invitation-card__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.invitation-card__body {
  margin: 0 0 var(--sp-5);
  color: var(--color-ink-muted);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
}

.invitation-card__actions {
  display: block;
}

.invitation-card__accept-form,
.invitation-card__decline-form {
  margin: 0;
}

.invitation-card__button-row {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
}

.invitation-card__button-row > .lc-btn,
.invitation-card__decline-form {
  flex: 1;
}

.invitation-card__button-row .lc-btn {
  width: 100%;
  margin: 0;
}

@media (max-width: 480px) {
  .invitation-card__button-row {
    flex-direction: column;
  }
}