/* ============================================================================
   NOTICES — single source of truth.
   Canonical CSS for inline notices/alerts (.notice + icon/body, the
   --info/--warning/--success/--error variants, and the compact --inline form).
   Shared by comp-notices.html and any future consumer. Import AFTER
   colors_and_type.css. The raised surface flips in dark via --color-bg-raised.
   ============================================================================ */

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
  border-left: 4px solid;
  background: var(--color-bg-raised);
}
.notice__icon { font-size: 20px; flex: none; padding-top: 1px; }
.notice__body { font-size: 14px; line-height: 1.55; color: var(--color-fg-default); }
.notice__body strong { font-weight: 500; }
.notice__body a { color: inherit; text-decoration: underline; }

.notice--info       { border-left-color: var(--gov-color-info-500);    background: var(--gov-color-info-50); }
.notice--info    .notice__icon { color: var(--gov-color-info-500); }
.notice--warning    { border-left-color: var(--gov-color-warning-500); background: var(--gov-color-warning-50); }
.notice--warning .notice__icon { color: var(--gov-color-warning-500); }
.notice--success    { border-left-color: var(--gov-color-success-500); background: var(--gov-color-success-50); }
.notice--success .notice__icon { color: var(--gov-color-success-500); }
.notice--error      { border-left-color: var(--gov-color-error-500);   background: var(--gov-color-error-50); }
.notice--error   .notice__icon { color: var(--gov-color-error-500); }

/* Compact / inline variant */
.notice--inline { padding: 8px 12px; gap: 10px; font-size: 13px; border-left-width: 3px; }
.notice--inline .notice__icon { font-size: 15px; }
.notice--inline .notice__body { font-size: 13px; line-height: 1.4; }