/* ── dialog ──
 * The in-app confirm dialog. Deliberately wears the share card's clothes — same
 * border, radius, shadow and esc chip — because it is the same kind of object.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Confirm dialog ───────────────────────────────────
   Deliberately the share card's clothes: same border, radius, shadow and `esc` chip,
   because it is the same kind of object — a small panel the app puts in front of you
   and takes away again. A second visual language for "are you sure" would be one more
   thing to recognise. */
#confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;                 /* above the share card, which can be open behind it */
  background: color-mix(in srgb, var(--bg-page) 55%, transparent);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#confirm-overlay.hidden { display: none; }

#confirm-card {
  width: 420px;
  max-width: 100%;
  background: color-mix(in srgb, var(--bg-raised) 98%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--accent-soft);
  overflow: hidden;
  animation: share-in 0.2s var(--ease);
}

.cf-body { padding: 16px 18px 4px; }
.cf-body p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--fg-dim);
}
/* The subject of the sentence — the note or folder being destroyed — reads in the
   foreground colour so it is unmissable at a glance. */
.cf-body b { color: var(--fg); font-weight: 500; }

.cf-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 16px;
}
/* A destructive confirm wears the danger colour instead of the accent: the accent is
   this app's "yes, good" colour and it should not also mean "yes, delete it". */
.cf-actions .btn.primary.danger {
  background: var(--danger);
  color: var(--bg-page);
}