/* The site's confirm / message window (assets/dialog.js) — same card as the login and delete-account windows */
.sc-dialog {
	width: min(380px, calc(100vw - 32px)); box-sizing: border-box; padding: 32px 26px 22px; border: 0; border-radius: 24px;
	max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; /* no sideways scrollbar (square corners) */
	background: #fff; color: var(--sc-c-ink, #2c3b33); text-align: center; font-family: inherit;
	box-shadow: 0 30px 80px rgba(20, 30, 25, .3);
}
.sc-dialog[open] { animation: sc-dialog-in .3s cubic-bezier(.2, .8, .2, 1); }
.sc-dialog::backdrop { background: rgba(25, 35, 30, .38); backdrop-filter: blur(3px); animation: sc-dialog-fade .25s ease; }
@keyframes sc-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes sc-dialog-fade { from { opacity: 0; } }
.sc-dialog-x {
	position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: inherit; font-size: 26px; line-height: 1; opacity: .55; cursor: pointer;
}
.sc-dialog-x:hover { opacity: 1; background: rgba(20, 30, 25, .06); }
.sc-dialog-icon {
	display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
	background: color-mix(in srgb, var(--sc-c-btn, #3d7a66) 14%, #fff); color: var(--sc-c-btn, #3d7a66);
}
.sc-dialog-icon svg { width: 26px; height: 26px; }
.sc-dialog.is-danger .sc-dialog-icon { background: #fbeeed; color: #b85a53; }
.sc-dialog h2 { margin: 0 0 .35em; font-size: 1.45rem; line-height: 1.25; }
.sc-dialog-text { white-space: pre-line; margin: 0 0 1.3rem; font-size: 1rem; line-height: 1.55; opacity: .8; }
.sc-dialog-text[hidden] + .sc-dialog-actions { margin-top: 1.1rem; } /* title only */
.sc-dialog-actions { display: flex; flex-direction: column; gap: 18px; } /* 18px: room for the button ring (13px) */
/* ok / cancel / danger: look from assets/buttons.css (.sc-btn, --danger) */
.sc-dialog-actions button:focus-visible, .sc-dialog-x:focus-visible { outline: 2px solid var(--sc-c-btn, #3d7a66); outline-offset: 2px; }
.sc-dialog-x:focus { outline: 0; }

/* form messages (forms with data-sc-validate, dialog.js) */
.sc-invalid { border-color: #b85a53 !important; box-shadow: 0 0 0 1px #b85a53; }
.sc-field-msg { display: block; margin-top: 5px; font-size: .85rem; font-weight: 500; color: #a24c46; }
.sc-field-msg::before { content: '! '; font-weight: 700; }
body.dark-mode .sc-field-msg { color: #e0938c; }

body.dark-mode .sc-dialog { background: var(--sc-c-card); color: var(--sc-c-text); }
body.dark-mode .sc-dialog-icon { background: rgba(255, 255, 255, .08); }
body.dark-mode .sc-dialog.is-danger .sc-dialog-icon { background: rgba(184, 90, 83, .18); color: #e0938c; }
body.dark-mode .sc-dialog-cancel { background: transparent; color: inherit; border-color: rgba(255, 255, 255, .2); }
body.dark-mode .sc-dialog-x:hover { background: rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) { .sc-dialog[open], .sc-dialog::backdrop { animation: none; } }
@media (max-width: 480px) { .sc-dialog { padding: 30px 22px 18px; } } /* 22px sides: the button ring (16px, assets/buttons.css) fits */