/* ============================================================================
   AVFX CRM — REFERENCE-CHECKED DELETE DIALOGUE
   ----------------------------------------------------------------------------
   Loads alongside modal.css and form.css — this file adds only what the
   dialogue's own body needs. The reason select, the note box and the typed
   confirmation are the form kit's controls, unchanged.

   Specification: docs/packets/PACKET-05-delete-safety-kit.md
   ========================================================================== */

/* --- WHAT IS BEING DELETED -----------------------------------------------
   Named at the top, always. A dialogue that says "Delete this user?" without
   saying WHICH user is a dialogue people learn to dismiss without reading. */

.cd__rec {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-4);
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border-subtle);
}
.cd__rec-l { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--color-text-primary); }

/* --- WHILE THE SCAN RUNS -------------------------------------------------
   A skeleton in the dialogue's own frame, never a spinner over the page
   (docs/03-UX-PATTERNS.md §12). The shape matches the note that replaces it,
   so nothing jumps when the answer arrives. */

.cd__skel { display: flex; flex-direction: column; gap: var(--space-3); }
.cd__skel span {
  block-size: 12px; border-radius: var(--radius-xs);
  background: var(--color-surface-sunken);
  animation: cd-pulse 1.1s var(--ease-out) infinite;
}
.cd__skel span:first-child { inline-size: 100%; }
.cd__skel span:last-child  { inline-size: 62%; }
@keyframes cd-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cd__skel span { animation: none; } }

.cd__scanning {
  margin-block-start: var(--space-4);
  font-size: var(--fs-xs); color: var(--color-text-tertiary);
}

/* --- WHERE THE RECORD IS USED -------------------------------------------- */

.cd__h {
  margin-block: var(--space-6) var(--space-4);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-tertiary);
}

.cd__refs {
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  max-block-size: 220px; overflow-y: auto;
}

.cd__ref {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-xs);
  border-block-end: 1px solid var(--color-border-subtle);
}
.cd__ref:last-child { border-block-end: 0; }

/* A blocking reference is history and can never be removed; a fixable one is
   a live link the operator can undo. The two must not look alike — the whole
   decision turns on which kind is in front of them. */
.cd__ref-i { inline-size: 14px; block-size: 14px; flex: none; margin-block-start: 2px; color: var(--color-text-tertiary); }
.cd__ref.is-blocking { background: var(--color-danger-subtle); }
.cd__ref.is-blocking .cd__ref-i { color: var(--color-danger); }

.cd__ref-t { flex: 1; min-inline-size: 0; }
.cd__ref-t b { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.cd__fix { display: block; margin-block-start: var(--space-2); color: var(--color-text-secondary); font-size: var(--fs-2xs); }

.cd__ref-a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  flex: none; font-size: var(--fs-2xs); color: var(--color-primary);
}
.cd__ref-a svg { inline-size: 12px; block-size: 12px; }

/* --- REASON AND NOTE ------------------------------------------------------ */

/* STACKED, at every width — Reason, then Note, both full width. A standard, not
   a phone rule: 03-UX-PATTERNS.md §12, product owner 2026-09-23. Two columns
   made the note half a sentence wide and broke the top-to-bottom order the
   operator answers in: why, then detail, then the typed confirmation. */
.cd__ask {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  margin-block-start: var(--space-6);
}
.cd__note { block-size: auto; padding-block: var(--space-4); resize: vertical; line-height: var(--lh-base); }

/* --- TYPED CONFIRMATION ---------------------------------------------------
   Not a security control. It is roughly ten lines of browser code whose only
   job is to make the last step deliberate — muscle memory cannot type an
   email address it was not thinking about. The server never receives it and
   must never check it (BC-014). */

.cd__type {
  margin-block-start: var(--space-6);
  padding: var(--space-5);
  background: var(--color-danger-subtle);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
}
.cd__type .field__label { margin-block-end: var(--space-3); color: var(--color-danger-fg); }
.cd__type b { font-weight: var(--fw-semi); }