/*
 * pcu-system-bar — one full-width system notice above an application area.
 *
 * HUMAN-OWNED. The surface is `uui-alert size="full-width"`; this sheet only releases what a
 * product area needs and Figma's 1216px artboard did not: a notice text longer than the line.
 */

pcu-system-bar {
    display: block;
    min-inline-size: 0;
}

/*
 * Figma sets title and supporting text `nowrap` on one line. In a narrower area a long sentence
 * would push the actions out of view, so the supporting text wraps under the title instead.
 * Same four-attribute weight as the generated rule plus the host, so no `!important`.
 */
pcu-system-bar > [data-uui-component="alert"][color][size="full-width"][breakpoint="desktop"] .uui-alert__text {
    flex-wrap: wrap;
}

pcu-system-bar > [data-uui-component="alert"][color][size="full-width"][breakpoint="desktop"] .uui-alert__supporting {
    min-inline-size: 0;
    white-space: normal;
}

/*
 * `appearance: "banner"` — Untitled UI's slim banner in its brand theme (Core 27 has no such
 * set): legacy `primary-pressed` surface, white title and text, light pill badge in front,
 * close cross in its dark-background version. Left-aligned like the owner's mockup (2026-10-15).
 */
.pcu-system-bar__banner {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-block-size: 56px;
    padding: var(--uui-spacing-lg) var(--uui-spacing-6xl);

    /* @cleanup: Replace the legacy token once UUI provides the matching brand color. */
    background: var(--rd-primary-pressed);
    color: var(--uui-text-primary_on-brand);
    font-family: var(--uui-font-family), sans-serif;
}

.pcu-system-bar__banner-content {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-xl);
    min-inline-size: 0;
}

.pcu-system-bar__banner-content > [data-uui-component="badge"] {
    flex-shrink: 0;
    text-transform: uppercase;
}

.pcu-system-bar__banner-text {
    margin: 0;
    min-inline-size: 0;
    color: inherit; /* legacy site CSS colours bare <p> */
    font-size: var(--uui-text-md-font-size);
    line-height: var(--uui-text-md-line-height);
}

.pcu-system-bar__banner-title {
    font-weight: var(--uui-font-weight-semibold);
}

/* Not the brand-tinted secondary ink: keep full contrast on the banner. */
.pcu-system-bar__banner-supporting {
    color: var(--uui-text-primary_on-brand);
}

.pcu-system-bar__banner-close {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--uui-spacing-xl);
    transform: translateY(-50%);
}