/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* Cool off-white + barely-visible brand-tinted dot grid */
body {
  background-color: #fafbfc;
}

html.dark body,
.dark body {
  background-color: #171717;
}

/*
 * HTMX swap settle animation
 *
 * HTMX adds `.htmx-added` to new content after the swap, then removes it after
 * the settle delay (see htmx.config.defaultSettleDelay / hx-swap settle:…).
 * Start invisible while `.htmx-added` is present; when it is removed, the
 * transition below fades/slides the content in so the user sees what changed.
 */
.htmx-added {
  opacity: 0;
  transform: translateY(6px);
}

main [id] {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}