/* Alert: a message box. Variants: --success, --error.
   Use role="alert" for errors that appear after an action (and move focus to it), role="status" for polite updates.
   For a form error summary, list links to the invalid fields in .alert__list. */

.alert { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--alert-color) 40%, transparent); border-radius: var(--radius-note); background: var(--alert-bg); color: var(--ink); }
.alert[hidden] { display: none; }
.alert--success { --alert-color: var(--success); --alert-bg: var(--success-bg); }
.alert--error { --alert-color: var(--danger); --alert-bg: var(--danger-bg); }
.alert__icon { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--alert-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alert__title { margin: 0; font-weight: 800; }
.alert__body { margin: var(--space-1) 0 0; font-size: .95rem; line-height: 1.5; }
.alert__list { margin: var(--space-2) 0 0; padding-left: 1.2rem; font-size: .95rem; }
.alert__list a { color: var(--alert-color); font-weight: 600; }