/* Announcement bar - one short strip; wraps on phones, never animates. */
.ab-bar {
    --ab-fg: var(--e-accent-fg);
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    min-height: 44px; padding: 9px 14px; border-radius: var(--e-radius-sm);
    border: 1px solid color-mix(in srgb, var(--ab-fg) 30%, var(--e-line));
    background: color-mix(in srgb, var(--ab-fg) 10%, var(--e-bg));
    color: var(--e-ink); font-size: .95em; line-height: 1.4;
}
.ab-brand { background: linear-gradient(120deg, var(--e-accent) 0%, var(--e-accent-2) 100%); color: var(--e-accent-ink); border-color: transparent; }
html.e-custom-accent .ab-brand { background: var(--e-accent); }
.ab-custom { background: var(--ab-c, var(--e-accent)); color: var(--ab-ink, var(--e-accent-ink)); border-color: transparent; }
.ab-neutral { --ab-fg: var(--e-ink-2); background: var(--e-surface); border-color: var(--e-line); }
.ab-success { --ab-fg: var(--e-ok); }
.ab-warning { --ab-fg: var(--e-warn); }
.ab-danger { --ab-fg: var(--e-bad); }

.ab-ico { width: 20px; height: 20px; flex: none; color: var(--ab-fg); }
.ab-brand .ab-ico, .ab-custom .ab-ico { color: inherit; }
.ab-msg { margin: 0; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.ab-msg strong { font-weight: 750; }
.ab-center { justify-content: center; text-align: center; }
.ab-center .ab-msg { flex: 0 1 auto; }
.ab-center.ab-has-x { padding-left: 44px; padding-right: 44px; }

.ab-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 5px 14px;
    border-radius: 999px; font-weight: 650; font-size: .9em; text-decoration: none; white-space: nowrap;
    background: var(--ab-fg); color: var(--e-bg); border: 1.5px solid transparent;
}
.ab-brand .ab-cta, .ab-custom .ab-cta { background: transparent; color: inherit; border-color: currentColor; }
.ab-cta:hover { text-decoration: underline; text-underline-offset: 2px; }

.ab-x {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px -8px auto; padding: 0;
    border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; opacity: .78;
}
.ab-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.ab-xi { width: 18px; height: 18px; }
.ab-center .ab-x { position: absolute; right: 2px; top: 50%; margin: -20px 0 0; }
.ab-brand a:focus-visible, .ab-brand button:focus-visible, .ab-custom a:focus-visible, .ab-custom button:focus-visible { outline-color: currentColor; }
.ab-preview { margin: 6px 0 0; }

/* Outside its dates (or once dismissed) the frame collapses to nothing visible. */
html.ab-off .e-card { padding: 0; border-color: transparent; background: transparent; }
html.ab-off .e-head, html.ab-off .e-foot { display: none; }

@media (max-width: 360px) {
    .ab-bar { font-size: .9em; padding: 8px 10px; }
    .ab-center.ab-has-x { padding-left: 10px; }
}
html[data-compact="1"] .ab-bar { min-height: 38px; padding: 6px 12px; font-size: .9em; }