.service-announcement {
    --notice-background: #eef2ff;
    --notice-border: #a5b4fc;
    --notice-ink: #312e81;
    position: relative;
    z-index: 40;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding-block: .8rem;
    padding-inline: max(1rem, calc((100% - 74rem) / 2 + 1rem)) max(3.5rem, calc((100% - 74rem) / 2 + 3.5rem));
    border: 0;
    border-bottom: 1px solid var(--notice-border);
    border-radius: 0;
    background: var(--notice-background);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .08);
    color: var(--notice-ink);
    font: 600 .9rem/1.45 ui-sans-serif, system-ui, sans-serif;
}

/* The bar names its own family inside a `font` shorthand, so it does not
   inherit the script-aware stack app.css keeps on :root - which is how a
   Japanese service notice ends up in a different face from the page under it,
   or in tofu. Hand it that stack everywhere except English, where the list
   above is what shipped and stays exactly as it is.
   The fallback repeats that list because this file is loaded on its own by
   templates/mailbox/index.html.twig, which overrides the stylesheet block and
   never links app.css: without it, --font-sans is undefined there and the
   declaration would resolve to `unset` and inherit the SPA's font instead. */
.service-announcement:not(:lang(en)) { font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }

.service-announcement[data-announcement-level="warning"] {
    --notice-background: #fffbeb;
    --notice-border: #f59e0b;
    --notice-ink: #78350f;
}

.service-announcement[data-announcement-level="critical"] {
    --notice-background: #fef2f2;
    --notice-border: #ef4444;
    --notice-ink: #7f1d1d;
}

.service-announcement > strong { margin-inline-end: .4rem; }

.service-announcement__dismiss {
    position: absolute;
    top: .45rem;
    inset-inline-end: .45rem;
    width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 1px solid var(--notice-border);
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

.service-announcement__dismiss:hover {
    background: color-mix(in srgb, var(--notice-ink) 9%, transparent);
    box-shadow: none;
    transform: none;
}

@media (prefers-color-scheme: dark) {
    .service-announcement {
        --notice-background: #211e3a;
        --notice-border: #7565aa;
        --notice-ink: #e7e1ff;
    }

    .service-announcement[data-announcement-level="warning"] {
        --notice-background: #2b2110;
        --notice-border: #b7791f;
        --notice-ink: #fde68a;
    }

    .service-announcement[data-announcement-level="critical"] {
        --notice-background: #311516;
        --notice-border: #b91c1c;
        --notice-ink: #fecaca;
    }
}