/* alert_banner — bespoke: brand tokens, the full-bleed/contained split, and
   the sizes Bootstrap's spacing scale cannot express (those resolve through
   the --sp- and --radius- token families in static/style.css). Layout and
   typography Bootstrap does express lives on the markup (alert_banner.html). */
.pm-alert-banner {
    margin-top: var(--sp-2xs);
    border-bottom: 1px solid var(--div);
    border-left: 3px solid var(--orange);
    background: linear-gradient(90deg, var(--alert-bg-1) 0%, var(--alert-bg-2) 100%);
}

.pm-alert-in {
    max-width: var(--content-max);
    gap: var(--sp-xs);
}

/* Equal sides, not a shared size: the markup's `rounded-circle` needs them to
   match or the badge renders as an ellipse. */
.pm-alert-icon {
    width: 18px;
    height: 18px;
    background: var(--orange);
    color: var(--pm-surface);
    font-size: var(--fs-2xs);
}

.pm-alert-text {
    font-size: var(--fs-sm);
    color: var(--text);
}

/* Inline prose tags — styled by element, not by a class hook, so their weight
   stays here rather than becoming .fw-bold/.fw-semibold on the markup. */
.pm-alert-text strong { color: var(--orange-700); font-weight: 700; } /* A11Y: --orange is 3.04:1 on the banner gradient, fails AA; --orange-700 = #C24B0E, 4.70:1 */
.pm-alert-text b { color: var(--navy); font-weight: 600; }

/* Card variant (ISSUE #285 /channels) — additive; the band rules above are
   untouched so GET /'s banner is byte-identical. */
.pm-alert-card {
    background: var(--pm-surface);
    border: 1px solid var(--div);
    border-left: 3px solid var(--orange);
    gap: var(--sp-xl);
}

/* Equal sides, not a shared size: rounded-circle needs them to match or the
   badge renders as an ellipse (same reasoning as .pm-alert-icon above). */
.pm-alert-icon-lg {
    width: 40px;
    height: 40px;
    background: var(--orange-soft);
    color: var(--orange-700); /* A11Y: --orange on --orange-soft is 2.89:1; --orange-700 = 4.47:1, matching the codebase's existing orange-700-on-orange-soft convention (e.g. static/style.css:2164) */
}

.pm-alert-card-title {
    font-family: var(--ff-serif);
    color: var(--navy);
}