/* The announcement bar: one type of notice (the backend's Notice rows), and the one definition of it for every base template (the marketing pages and V1 app on Bootstrap, V2 on Tailwind). Plain CSS with no framework classes, like brand.css, so the same markup (coreapp/templates/notices/announcement_bar.html) renders identically everywhere. Values mirror V2's original bar with app.css tokens resolved: the #333 strip, the quill rainbow tones with their AA ink rules, 72rem centered content, icon left / dismiss right / text centered on desktop, newspaper-wrapped on mobile.

   The V2 look has the page's rounded top corners overlapping the bar's bottom edge, with the page content (the nav) starting right there, inside the curve. Here the two corners are drawn by the bar itself: two small inline SVGs (announcement_bar.html) hang below the bar's bottom edge, each a bar-colored square with a quarter circle cut out, so whatever content follows shows through the arc and the bar's color fills the notch outside it. Nothing else on the page participates: no wrapper, no negative margin, no page color to know, no class to toggle on dismissal, and a sticky nav simply scrolls away from the corners. Remove the bar and the curve goes with it. The squares sit above Bootstrap's sticky nav (z-index 1020) and below the mobile nav sheet (2000) and modals. */

.announcement-bar {
    --announcement-bar-radius: 2rem;
    --announcement-bar-bg: #333333;
    position: relative;
    background-color: var(--announcement-bar-bg);
    color: #fff;
    /* V2's type, pinned so the bar reads the same on the Outfit-set marketing and V1 app pages: Inter (app.css --font-sans), text-sm, leading-relaxed, normal weight. Both heads declare the Inter faces this uses (400 here, 600 for links). */
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.625;
    letter-spacing: normal;
}
.announcement-bar-inner {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 1.5rem;
}
/* The two corner notches: bar-colored squares below the bar with the page's rounded corner cut out, drawn as inline SVG paths in the template (vector edges stay anti-aliased where a CSS gradient's hard stop would look stepped). */
.announcement-bar-corner {
    position: absolute;
    /* Raised one pixel into the bar (same color) so the square overlaps it instead of meeting it edge to edge: at fractional zoom levels that seam could show as a hairline. The square stays square, so the arc stays a true quarter circle; the one pixel of notch it gives up at the very bottom is a sliver a few hundredths of a pixel wide, since the arc runs tangent to the edge there. */
    bottom: calc(1px - var(--announcement-bar-radius));
    width: var(--announcement-bar-radius);
    height: var(--announcement-bar-radius);
    display: block;
    fill: var(--announcement-bar-bg);
    z-index: 1021;
    pointer-events: none;
}
.announcement-bar-corner-left { left: 0; }
.announcement-bar-corner-right { right: 0; transform: scaleX(-1); }
.announcement-bar-icon {
    float: left;
    margin-right: 0.5rem;
    width: 1.5rem;
    text-align: center;
}
.announcement-bar-dismiss {
    float: right;
    margin: 0 0 0 0.5rem;
}
.announcement-bar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.announcement-bar-close:hover { background: rgba(255, 255, 255, 0.85); color: #000; }
/* Content rules are explicit rather than inherited from the host framework: Bootstrap underlines links and gives paragraphs a bottom margin, Tailwind's preflight strips both, and the bar must read the same on either. Links are bold and underlined, with the underline thickening on hover; paragraphs carry no margins. */
.announcement-bar-content a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.announcement-bar-content a:hover { text-decoration-thickness: 2px; }
.announcement-bar-content > p { margin: 0; }
@media (min-width: 640px) {
    .announcement-bar-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.75rem; padding-left: 3rem; padding-right: 3rem; }
    .announcement-bar-icon { order: 1; float: none; margin: 0; }
    .announcement-bar-content { order: 2; flex: 1; text-align: center; }
    .announcement-bar-dismiss { order: 3; float: none; margin: 0; }
}
/* Below the width where the marketing nav expands (Bootstrap xxl, 1400px) the V1 navs' buttons sit near the page edges, and a 2rem corner crowds them: a tighter 1rem curve until then. Pages whose nav keeps clear of the edges include the bar with roomy=True (V2 does) and hold the 2rem corner down to phones. */
@media (max-width: 1399.98px) {
    .announcement-bar:not(.announcement-bar-roomy) { --announcement-bar-radius: 1rem; }
}
@media (max-width: 639.98px) {
    .announcement-bar { --announcement-bar-radius: 1rem; }
}

/* The bar's palette (owner-reviewed on PR #274, checked against WCAG AA for the bar's 14px text): green, blue, and pink use the palette's deep variants (app.css --color-quill-*-deep) so they hold white text like red and purple do; orange and gray are lightened a step from the palette tones so the dark ink reads better on them; yellow keeps the palette tone with dark ink. The last four names are the Bootstrap color names older Configuration rows still store, mapped onto the nearest tone. The tone sets the variable so the corner notches take the same color. */
.announcement-bar-red, .announcement-bar-danger { --announcement-bar-bg: #DC2626; }
.announcement-bar-orange { --announcement-bar-bg: #F69656; }
.announcement-bar-yellow, .announcement-bar-warning { --announcement-bar-bg: #F5C04A; }
.announcement-bar-green, .announcement-bar-success { --announcement-bar-bg: #1E7A43; }
.announcement-bar-blue, .announcement-bar-primary { --announcement-bar-bg: #2563EB; }
.announcement-bar-purple { --announcement-bar-bg: #8E5BD8; }
.announcement-bar-pink { --announcement-bar-bg: #D6356E; }
.announcement-bar-gray { --announcement-bar-bg: #ADADAD; }
/* Dark ink on the three light tones (white fails AA on them: orange 2.7:1, yellow 1.7:1, gray 2.9:1 even before lightening); white on everything else. */
.announcement-bar-orange, .announcement-bar-yellow, .announcement-bar-gray, .announcement-bar-warning { color: rgb(0 0 0 / 0.85); }
.announcement-bar-orange .announcement-bar-close, .announcement-bar-yellow .announcement-bar-close, .announcement-bar-gray .announcement-bar-close,
.announcement-bar-warning .announcement-bar-close { color: rgb(0 0 0 / 0.7); }
.announcement-bar-orange .announcement-bar-close:hover, .announcement-bar-yellow .announcement-bar-close:hover, .announcement-bar-gray .announcement-bar-close:hover,
.announcement-bar-warning .announcement-bar-close:hover { background: rgba(0, 0, 0, 0.75); color: #fff; }