@layer components {
  /* Confirmation before a consequential action; one that changes live is red and needs its box ticked. */
  .confirm { width: min(44rem, calc(100vw - 3.2rem)); margin: auto; padding: 2rem 2rem 1.6rem; border: 1px solid var(--line); border-top: 4px solid var(--ink-3); border-radius: var(--r-section); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
  .confirm::backdrop { background: rgb(var(--shade) / .32); }
  .confirm[data-tone="danger"] { border-top-color: var(--error); }
  .confirm[data-tone="live"] { border-top-color: var(--danger); }
  .confirm-title { margin: 0 0 .8rem; font-size: 1.8rem; font-weight: 650; letter-spacing: -.01em; }
  .confirm[data-tone="live"] .confirm-title { color: var(--danger); }
  .confirm-message { margin: 0; color: var(--ink-2); line-height: 1.5; }
  .confirm-check { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid var(--danger); border-radius: var(--r-card); background: var(--danger-soft); color: var(--danger-ink); font-weight: 550; line-height: 1.4; cursor: pointer; }
  .confirm-check input { flex: none; width: 1.8rem; height: 1.8rem; margin: .1rem 0 0; accent-color: var(--danger); }
  .confirm-actions { display: flex; justify-content: flex-end; gap: .8rem; margin-top: 2rem; }
}