/* ─── Announcement Modal (F-007) ─────────────────────────────────────────────
   Extends the base .modal pattern from modal.css with an email preview inset
   and a three-action layout (Cancel left / Skip+Send right).
   ─────────────────────────────────────────────────────────────────────────── */

/* Email preview inset card — "card within card" styling */
.announce-modal__preview {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.announce-modal__preview-subject {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

.announce-modal__preview-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  line-height: 1.65;
  margin-bottom: 0.5rem;
}

.announce-modal__preview-link {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  word-break: break-all;
  margin-bottom: 0;
}

/* Zero-customer state message */
.announce-modal__no-customers {
  color: var(--color-ink-muted);
}

/* Actions row — allows Cancel to sit at far left while Skip/Send stay right */
.announce-modal__actions {
  flex-wrap: wrap;
}

/* Cancel link — plain text, positioned left using order: -1.
   DOM order puts Cancel last (so it does not receive first focus when dialog
   opens via showModal()), but CSS order pushes it visually to the far left.
   This avoids the browser activating the Cancel link via keyboard focus when
   the dialog opens automatically after a form submit. */
.announce-modal__cancel-link {
  order: -1;
  margin-right: auto;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-ink-muted);
  text-decoration: none;
  align-self: center;
  transition: color var(--duration-fast) var(--ease-default);
}

.announce-modal__cancel-link:hover {
  color: var(--color-ink);
}

.announce-modal__cancel-link:active {
  opacity: 0.7;
}

.announce-modal__cancel-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-button);
}