/* Above page canvases, below navbar menus and modal layers. */
#site-alerts { position: relative; z-index: 1040; flex: 0 0 auto; width: 100%; }
#site-alerts[hidden] { display: none; }
.site-alert { background: var(--alert-bg); color: var(--alert-fg); border-bottom: 1px solid color-mix(in srgb, var(--alert-fg) 15%, transparent); border-inline-start: 4px solid var(--alert-accent); font-size: 14px; }
.site-alert__inner { display: flex; align-items: center; gap: 20px; padding: 20px 28px; max-width: 1600px; margin: auto; }
.site-alert__icon { font-size: 25px; color: var(--alert-accent); flex-shrink: 0; }
.site-alert__copy { flex: 1; min-width: 0; line-height: 1.6; overflow-wrap: anywhere; }
.site-alert__label { display: block; color: var(--alert-accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 3px; }
.site-alert__title { font-weight: 700; margin-inline-end: 10px; }
.site-alert__message { white-space: pre-line; }
.site-alert__link { color: var(--alert-fg); border: 1px solid currentColor; border-radius: 999px; padding: 8px 17px; text-decoration: none; font-weight: 650; flex-shrink: 0; max-width: 100%; overflow-wrap: anywhere; }
.site-alert__link:hover { color: var(--alert-bg); background: var(--alert-fg); }
.site-alert__close { display: grid; place-items: center; padding: 0; border: 0; color: inherit; background: transparent; line-height: 1; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; cursor: pointer; }
.site-alert__close::before, .site-alert__close::after { content: ""; grid-area: 1 / 1; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); pointer-events: none; }
.site-alert__close::after { transform: rotate(-45deg); }
.site-alert__close:hover { background: color-mix(in srgb, var(--alert-fg) 12%, transparent); }
.site-alert :focus-visible { outline: 3px solid var(--alert-accent); outline-offset: 3px; }
.site-alert--compact .site-alert__inner { padding-block: 8px; }
.site-alert--center .site-alert__copy { text-align: center; }
.alert-editor { border: 1px solid #dce5e7; border-radius: 18px; background: #fff; padding: 24px; margin-block: 24px; }
.alert-editor h2 { font-size: 22px; }
.alert-editor label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 6px; }
.alert-editor__preview { border-radius: 12px; overflow: hidden; margin-block: 20px; }
.alert-editor__list { display: grid; gap: 10px; margin-top: 20px; }
.alert-editor__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid #e0e7eb; border-radius: 12px; }
.alert-editor__item small { display: block; color: #586773; }
@media (max-width: 600px) {
    .site-alert__inner { gap: 12px; padding: 16px; flex-wrap: wrap; }
    .site-alert__copy { flex-basis: calc(100% - 100px); }
    .site-alert__link { margin-inline-start: 36px; }
    .site-alert__close { margin-inline-start: auto; }
    .alert-editor { padding: 16px; }
    .alert-editor__item { align-items: flex-start; flex-direction: column; }
}