/* Platform message bar — Feature 4259 / PBI 4323 and 4324.
   First child of <main> in the authenticated layout: header.header is position:fixed, so a bar above
   it in normal flow would sit underneath the nav. */

.platform-message {
    width: 100%;
    /* Clears the page content below; without it the bar sits flush against the first card. */
    margin-bottom: 1.25rem;
    border-radius: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    /* Left border carries the severity as a second, non-colour cue alongside the icon and the word. */
    border-left: 6px solid transparent;
    font-size: 14px;
    line-height: 1.4;
}

.platform-message__inner {
    display: flex;
    /* Centred, not flex-start: the icon, label, body and close control are all different heights, and
       top-aligning them left everything on different baselines. */
    align-items: center;
    gap: .5rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: .625rem 1rem;
    min-height: 44px;
}

.platform-message__icon {
    flex: 0 0 auto;
    font-size: 18px;
    /* line-height 1 so the glyph box is the glyph, and centring lines it up with the text rather than
       with the font's leading. */
    line-height: 1;
}

.platform-message__severity {
    flex: 0 0 auto;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 12px;
    line-height: 1;
}

.platform-message__body {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    /* Slightly tighter than the block default so a one-line message sits on the same optical centre
       as the icon and the label. */
    line-height: 1.35;
}

/* The body is author-written HTML: keep it from introducing vertical margins that would make the bar
   jump as messages change. */
.platform-message__body p {
    margin: 0;
}

.platform-message__body p + p {
    margin-top: .35rem;
}

.platform-message__body a {
    text-decoration: underline;
    color: inherit;
}

.platform-message__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .125rem;
}

.platform-message__count {
    /* Fixed width and tabular figures so stepping from 9/10 to 10/10 does not shift the arrows. */
    min-width: 2.5rem;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: .75;
    line-height: 1;
}

.platform-message__dismiss-form {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0;
}

/* Shared by the arrows and the close control: a flex box of its own so the glyph is centred in the
   hit area rather than sitting on the text baseline. */
.platform-message__arrow,
.platform-message__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: .7;
    line-height: 1;
}

.platform-message__arrow:hover,
.platform-message__arrow:focus-visible,
.platform-message__dismiss:hover,
.platform-message__dismiss:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .06);
}

.platform-message__arrow:focus-visible,
.platform-message__dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.platform-message__arrow {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

/* Larger than the arrows: dismissal is permanent, so the target should not be the smallest thing in
   the bar. */
.platform-message__dismiss {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.platform-message--information {
    background: #e8f1fb;
    border-left-color: #1a56a0;
    color: #0f2f57;
}

.platform-message--warning {
    background: #fff4e5;
    border-left-color: #b26a00;
    color: #4a2c00;
}

.platform-message--error {
    background: #fdecea;
    border-left-color: #b3261e;
    color: #5f1412;
}

/* Windows high-contrast: system colours replace the palette, so the icon and the severity word are
   the only things left distinguishing the three. That is why they are not decorative. */
@media (forced-colors: active) {
    .platform-message {
        border: 1px solid CanvasText;
        border-left-width: 6px;
    }
}

/* The carousel is paused by the customer, not by this query — stopping it entirely would hide
   messages from someone who asked only for less motion. */
@media (prefers-reduced-motion: reduce) {
    .platform-message {
        transition: none;
    }
}

@media (max-width: 767px) {
    .platform-message__inner {
        padding: .5rem .75rem;
        flex-wrap: wrap;
    }

    .platform-message__body {
        /* Drop to its own line so a long incident notice is not squeezed into a few characters
           between the label and the close button. */
        flex-basis: 100%;
        order: 3;
    }

    /* Explicit order for all three: they otherwise default to 0 and fall back on DOM order, which
       put the close button ahead of the arrows it should follow. */
    .platform-message__nav {
        order: 1;
        margin-left: auto;
    }

    .platform-message__dismiss-form {
        order: 2;
    }

    /* Noise on a narrow screen where the controls already crowd the label row; the arrows stay,
       because they are the only way to reach the other messages. */
    .platform-message__count {
        display: none;
    }
}