/* Shared inline notices: the neutral card stays the same for every status. */
.app-alert.alert {
    --app-alert-tone: #446f9c;
    --bs-alert-color: #65736c;
    --bs-alert-bg: #fff;
    --bs-alert-border-color: #e0e7e2;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px !important;
    border: 1px solid #e0e7e2 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #65736c !important;
    box-shadow: none;
    font-size: var(--fs-alert, .9rem);
    line-height: 1.5;
    text-align: start;
    overflow-wrap: anywhere;
}
.app-alert.alert-warning { --app-alert-tone: #94600f; }
.app-alert.alert-danger { --app-alert-tone: #b84949; }
.app-alert.alert-success { --app-alert-tone: #287858; }
.app-alert.alert-secondary, .app-alert.alert-light, .app-alert.alert-dark { --app-alert-tone: #52645a; }
.app-alert-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--app-alert-tone);
}
.app-alert-icon > svg { display: block; width: 32px; height: 32px; }
.app-alert-content { flex: 1 1 auto; min-width: 0; }
.app-alert-title {
    display: block;
    margin: 0 0 4px;
    color: var(--app-alert-tone);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.app-alert-body { min-width: 0; }
.app-alert .alert-heading,
.app-alert-body > :is(h1, h2, h3, h4, h5, h6) {
    color: var(--app-alert-tone);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
.app-alert .alert-link { color: var(--app-alert-tone); text-decoration: underline; }
.app-alert-body > :last-child { margin-bottom: 0; }
/* Legacy headings can contain a status icon; the card already supplies one. */
.app-alert .alert-heading > .bi:first-child { display: none; }
.app-alert.alert-dismissible { padding-inline-end: 52px !important; }
.app-alert.alert-dismissible .btn-close {
    top: 12px;
    right: 12px;
    padding: 10px;
    margin: 0;
}
.app-alert-body :is(.d-flex, .btn-group) { max-width: 100%; flex-wrap: wrap; }
.app-alert-body .btn { white-space: normal; }
/* Explicit visibility belongs to the caller, including the native hidden attribute. */
.app-alert[hidden] { display: none !important; }
@media (max-width: 640.98px) {
    .app-alert.alert { padding: 16px !important; gap: 12px !important; }
    .app-alert.alert-dismissible { padding-inline-end: 52px !important; }
}
@media (pointer: coarse) {
    .app-alert.alert-dismissible .btn-close { min-width: 44px; min-height: 44px; top: 4px; right: 4px; box-sizing: border-box; }
}
@media (forced-colors: active) {
    .app-alert.alert { border-color: CanvasText !important; }
    .app-alert-icon, .app-alert-title { color: CanvasText; }
}