/* ── §REMOVE — the archive-or-delete explainer (contacts.js showRemoveModal) ──
   Its own file because it is appended to <body>: subscribers.css keeps every
   selector inside #page-engage-contacts (tests/subscribers-css-is-contained),
   and a modal outside the page cannot inherit its --sub-* tokens, so the values
   are the same ones, restated. */
.rm-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(21, 23, 43, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rm-card {
  background: #fff; color: #15172b; border: 1px solid #e8e4d8; border-radius: 18px;
  width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 24px; box-shadow: 0 24px 60px rgba(21, 23, 43, .18);
  font-family: "Inter", system-ui, sans-serif;
}
.rm-title { margin: 0 0 4px; font: 600 20px/1.3 "Bricolage Grotesque", "Inter", system-ui, sans-serif; }
.rm-lede { margin: 0 0 16px; color: #5b5e75; font-size: 14px; }
.rm-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-choices:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 560px) { .rm-choices { grid-template-columns: 1fr; } }
.rm-choice {
  text-align: left; background: #fff; border: 1.5px solid #e8e4d8; border-radius: 12px;
  padding: 14px 16px; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 2px;
}
.rm-choice:hover { border-color: #ddd9ff; }
.rm-choice:focus-visible { outline: 2px solid #6a4cf1; outline-offset: 2px; }
.rm-choice.is-on { border-color: #6a4cf1; background: #efeaff; }
.rm-choice[data-choice="delete"].is-on { border-color: #c0423a; background: #fcefed; }
.rm-choice-head { font-weight: 600; font-size: 15px; }
.rm-choice-sub { color: #5b5e75; font-size: 13px; }
.rm-points { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #33364d; }
.rm-points li + li { margin-top: 2px; }
.rm-delete-extra { margin-top: 14px; }
.rm-kept {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: #fbf3df; border: 1px solid #ecd6a8; color: #6b4a0c;
}
.rm-type { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #33364d; }
.rm-type-input {
  width: 160px; padding: 8px 12px; border: 1px solid #e8e4d8; border-radius: 8px;
  font: 14px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em;
}
.rm-type-input:focus { outline: 2px solid #c0423a; outline-offset: 1px; border-color: transparent; }
.rm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.rm-btn {
  padding: 10px 18px; border-radius: 10px; border: 1px solid #e8e4d8; background: #fff;
  font: 600 14px "Inter", system-ui, sans-serif; color: #15172b; cursor: pointer;
}
.rm-btn.rm-go { background: #6a4cf1; border-color: #6a4cf1; color: #fff; }
.rm-btn.rm-go.rm-danger { background: #c0423a; border-color: #c0423a; }
.rm-btn:disabled { opacity: .45; cursor: default; }