/* Persistent page notices share rounded surfaces; transient toasts have their own lifecycle. */
.page-notification {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--notification-border);
    border-radius: 8px;
    background: var(--notification-background);
    color: var(--notification-text);
    font-size: var(--interface-value-size);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.page-notification > strong,
.page-notification__body > h2 {
    display: block;
    margin: 0 0 3px;
    color: var(--notification-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
.page-notification p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.page-notification p + p { margin-top: 3px; }

/* P1 identifies a permanent error or cancellation; P2 provides warning and follow-up guidance. */
.page-notification--p1 {
    --notification-background: #fffafa;
    --notification-border: #f0d8d5;
    --notification-text: #65504e;
    --notification-heading: #94423d;
    --notification-icon-background: #faeae8;
    --notification-icon: #b64942;
}
.page-notification--p2 {
    --notification-background: #fff7e8;
    --notification-border: #f0dfbc;
    --notification-text: #735216;
    --notification-heading: #735216;
    --notification-icon-background: #fbeccd;
    --notification-icon: #997020;
}

/* Notices with an icon retain readable body width and the same typography. */
.page-notification--with-icon {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}
.page-notification__body { min-width: 0; align-self: center; }
.page-notification__icon {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 7px;
    background: var(--notification-icon-background);
    color: var(--notification-icon);
}
.page-notification__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Narrow screens keep notices compact without adding dismissal controls. */
@media (max-width: 620px) {
    .page-notification { gap: 8px; margin-bottom: 18px; padding: 11px 12px; }
}