/* Alert — atom for inline notifications (success/warn/danger).
 *
 * Extracted from components.css in U5 (issue #476) per CLAUDE.md §2
 * R4 (per-component CSS). Alerts are static at present; the
 * :focus-visible hook below is reserved for a future close-button
 * affordance that lives inside the alert component. */

/* ─── v2 DS — .lc-alert family ─── */
.lc-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-3);
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
}
.lc-alert--success { background: var(--color-success-soft); border-left-color: var(--color-success); }
.lc-alert--warn    { background: var(--color-warn-soft);    border-left-color: var(--color-warn); }
.lc-alert--danger  { background: var(--color-danger-soft);  border-left-color: var(--color-danger); }
.lc-alert__title { font-weight: var(--fw-semibold); font-size: var(--fs-14); }
.lc-alert__body  { font-size: var(--fs-13); color: var(--color-ink-muted); }

/* R16 forward-looking hook: when an embedded close button is added
 * (a future PR), it will receive the standard focus ring. The rule is
 * declared now so the close button does not need its own atomic file
 * and so future contributors do not forget the focus state. */
.lc-alert :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  border-radius: var(--r-1);
}