/* Shared HTML dialogs for the portal and Django administration. */
.broadcast-content { white-space: pre-wrap; }
.ui-dialog { box-sizing: border-box; width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); font: 16px/1.55 var(--font-ui); overflow: auto; box-shadow: 0 24px 80px #0009; overflow-wrap: anywhere; color-scheme: inherit; }
.ui-dialog::backdrop { background: #000b; }
.ui-dialog-heading { padding: 24px 24px 0; }
.ui-dialog-eyebrow { color: var(--orange-pale); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; }
.ui-dialog h2 { color: var(--ink); background: transparent; font-size: 24px; font-weight: 700; line-height: 1.3; padding: 0; margin: 8px 0 20px; }
.ui-dialog-body { padding: 0 24px; white-space: pre-wrap; }
.ui-dialog-meta { color: var(--muted); padding: 0 24px; margin: 16px 0 24px; font-size: 13px; }
.ui-dialog-error { color: #ffc1b0; padding: 0 24px; margin: 16px 0; }
.ui-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--line); padding: 20px 24px; }
.notice-sound { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: 14px/1.4 var(--font-ui); cursor: pointer; }
.notice-sound input { margin: 0; accent-color: var(--orange); }
.notice-sound[hidden] { display: none; }
.ui-dialog-button { box-sizing: border-box; font: 700 14px/1.3 var(--font-ui); min-height: 44px; padding: 12px 18px; border: 1px solid var(--orange); border-radius: 6px; cursor: pointer; background: var(--orange); color: #1a0b03; white-space: normal; }
.ui-dialog-button.ui-dialog-secondary { border-color: var(--control-border); background: var(--sidebar); color: var(--ink); }
.ui-dialog-button:disabled { opacity: .65; cursor: wait; }
.ui-dialog-button:hover { filter: brightness(1.12); }
.ui-dialog :focus-visible { outline: 2px solid var(--orange-pale); outline-offset: 1px; }
/* The heading receives initial programmatic focus for screen readers; only
   interactive controls need a visible keyboard focus ring. */
body .ui-dialog h2[tabindex="-1"]:focus-visible { outline: none; }
.ui-dialog [hidden] { display: none; }
.feedback-stack { display: grid; gap: 12px; margin: 0 0 24px; }
.feedback-stack[hidden] { display: none; }
.message { margin: 0; padding: 10px 14px; border: 0; border-left: 3px solid var(--orange); border-radius: 4px; background: var(--panel); color: var(--ink); font: 400 13px/1.65 var(--font-ui); white-space: normal; overflow-wrap: anywhere; }
.message.error { border-left-color: #e36e5d; }
.message.warning { border-left-color: #d6973d; }
.message.success { border-left-color: #4f9b6b; }
.ui-dialog[data-severity="error"] .ui-dialog-heading { border-top: 3px solid #ea8e76; }
.ui-dialog[data-severity="warning"] .ui-dialog-heading { border-top: 3px solid #d8af71; }
.ui-dialog[data-severity="success"] .ui-dialog-heading { border-top: 3px solid #88b79a; }
.feedback-progress[hidden] { display: none; }
form[aria-busy="true"] button:disabled, form[aria-busy="true"] input[type="submit"]:disabled { opacity: .65; cursor: wait; }
@media (max-width: 400px) { .ui-dialog-heading { padding: 20px 18px 0; } .ui-dialog-body, .ui-dialog-meta, .ui-dialog-error { padding-left: 18px; padding-right: 18px; } .ui-dialog-actions { padding: 18px; } }

/* Page notifications share one component and stay before navigation and headings. */
[data-page-notifications]:not(:has(.message:not([hidden]):not(:empty))) { display: none; }
[data-page-notifications] > .message:empty { display: none; }
body .feedback-stack .message[tabindex="-1"]:focus-visible { outline: none; }
/* Every banner is one regular-weight text flow, including validation summaries. */
.message :is(ul, ol) { display: inline; list-style: none; padding: 0; margin: 0; }
.message p { display: inline; margin: 0; }
.message :is(strong, b) { font-weight: 400; }
.message :is(strong, b, p, ul, ol)::after { content: " "; }
.message li { display: inline; }
.message li + li::before { content: " "; }
.message a { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }

.notification-group { display: contents; }
.notification-messages { display: grid; gap: 12px; }