/* The family's dialogs (Atrium copy of TuteLoop's public/css/dialog.css; dialog.js): SweetAlert2 themed to the theme's tokens, so they follow the tone
   and light or dark. The buttons are the app's own .pl-btn, Cancel beside the primary. */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px); }   /* a dialog dims the page; a toast's container (a full-height strip) must not */
.cl-dialog { background: var(--surface) !important; color: var(--text-1); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-hover); font-family: var(--font-sans); }
.cl-dialog .cl-dialog-title { color: var(--text-1); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.cl-dialog .cl-dialog-text { color: var(--text-2); font-size: 14px; line-height: 1.6; white-space: pre-line; }   /* a list of errors joined with \n reads one per line */
.cl-dialog .cl-dialog-actions { gap: 10px; }
.cl-dialog .cl-dialog-actions .pl-btn { margin: 0; }
.cl-dialog .swal2-cancel { border-color: var(--text-3); }   /* a .pl-btn is the dialog's own surface colour: the outline keeps it a button */
.cl-dialog .cl-dialog-danger { background: var(--rose); color: var(--bg); border-color: var(--rose); }   /* the page colour on rose: 6:1 in both modes, white is 3:1 in dark */
.cl-dialog .cl-dialog-danger:hover { filter: brightness(1.08); }
.cl-dialog .swal2-icon.swal2-question { border-color: var(--accent); color: var(--accent); }
.cl-dialog .swal2-icon.swal2-warning { border-color: var(--amber); color: var(--amber); }
.cl-dialog .swal2-icon.swal2-info { border-color: var(--accent); color: var(--accent); }
.cl-dialog .swal2-icon.swal2-success { border-color: var(--emerald); color: var(--emerald); }
.cl-dialog .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--emerald) 35%, transparent); }
.cl-dialog .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--emerald); }
.cl-dialog .swal2-icon.swal2-error { border-color: var(--rose); color: var(--rose); }
.cl-dialog .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--rose); }
.cl-dialog .cl-dialog-input { background: var(--input-bg); color: var(--text-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; font: 14px/1.5 var(--font-sans); margin: 14px 0 4px; width: auto; }
.cl-dialog .cl-dialog-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); outline: none; }
.cl-dialog .cl-dialog-input::placeholder { color: var(--text-3); }
.cl-dialog .swal2-validation-message { background: var(--surface-2); color: var(--rose); }

/* The toast: a card in the corner, the progress bar in the accent. */
.cl-dialog.swal2-toast { padding: 12px 16px; box-shadow: var(--shadow-hover); }
.cl-dialog.swal2-toast .cl-dialog-title { font-size: 13.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; margin: 0 0 0 4px; }
.cl-dialog.swal2-toast .swal2-timer-progress-bar { background: var(--accent); opacity: .6; }