/* ============================================================================
   TOAST — single source of truth.
   Canonical CSS for the toast notification (.toasts stack + .toast surface,
   lead icon, body, close button, and the --success/--error/--warning/--info
   variants). Shared by comp-toast.html and any future consumer. Import AFTER
   colors_and_type.css. Tokens flip in dark via _dark.css.
   ============================================================================ */

.toasts { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

/* Surface-styled toast — light in light mode, dark in dark mode.
   Tokens flip automatically via _dark.css. */
.toast {
  background: var(--color-bg-surface);
  color: var(--color-fg-default);
  border: 1px solid var(--color-border-default);
  padding: 12px 18px;
  border-radius: 6px;
  display: inline-flex; gap: 12px; align-items: center;
  box-shadow: var(--shadow-3);
  font-size: 14px; min-width: 280px; max-width: 480px;
}
.toast i.lead { font-size: 18px; flex: none; line-height: 1; }
.toast .body { flex: 1; }
.toast .body strong { font-weight: 500; }
.toast .body small {
  display: block;
  color: var(--color-fg-secondary);
  font-size: 12px;
  margin-top: 2px;
}
.toast .body a {
  color: var(--color-fg-link); text-decoration: underline; border-radius: 2px;
  transition: color 120ms ease-out, box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast .body a:hover,
.toast .body a[data-state~="hover"] { color: var(--gov-color-primary-700); }
.toast .body a:active,
.toast .body a[data-state~="pressed"] { color: var(--gov-color-primary-800); }
/* link focus ring = shared base a ring (animates via that rule). */

/* Close button — icon optically centered inside a 24×24 hit target.
   `bi-x` has a small built-in baseline offset; line-height:1 + grid
   centering + a hair of negative margin pulls it onto the geometric
   centre in both themes. */
.toast button.close {
  all: unset; cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  width: 24px; height: 24px; border-radius: 999px;
  display: inline-grid; place-items: center;
  color: var(--color-fg-tertiary);
  flex: none;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast button.close i {
  font-size: 18px;
  line-height: 1;
  display: block;
  /* bi-x glyph sits ~0.5px low and 0.5px left of its em-box centre;
     nudge it back to optical centre. */
  margin-top: -1px;
}
.toast button.close:hover,
.toast button.close[data-state~="hover"] {
  background: var(--gov-color-neutral-100);
  color: var(--color-fg-default);
}
.toast button.close:active,
.toast button.close[data-state~="pressed"] {
  background: var(--gov-color-neutral-200);
  color: var(--color-fg-default);
}
/* `all: unset` is unlayered (0,2,0) and its box-shadow:none beats the layered
   @layer base focus ring (unlayered beats layered) — so the ring must be
   re-asserted here at matching specificity, or the close button has NO focus
   ring (forced OR real keyboard). */
.toast button.close:focus-visible,
.toast button.close[data-state~="focus"] {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.toast--success i.lead { color: var(--gov-color-success-500); }
.toast--error   i.lead { color: var(--gov-color-error-500); }
.toast--warning i.lead { color: var(--gov-color-warning-500); }
.toast--info    i.lead { color: var(--gov-color-info-500); }