/* Shared decorative layer, including the Keycloak host. Never intercepts focus or input. */
.n-journey-canvas,
.login-pf body {
  position: relative;
  isolation: isolate;
  background-color: var(--n-canvas);
}

.n-journey-canvas::before,
.n-journey-canvas::after,
.login-pf body::before,
.login-pf body::after {
  position: fixed;
  z-index: -1;
  inset-inline: 0;
  width: 100%;
  /* Match the SVG ratio at every width: a fixed strip clips enlarged dots. */
  height: max(293.34px, 29.334vw);
  content: "";
  pointer-events: none;
  background: url("./journey-background.svg") center / max(1100px, 110vw) auto
    no-repeat;
}

.n-journey-canvas::before,
.login-pf body::before {
  top: 14vh;
}
.n-journey-canvas::after,
.login-pf body::after {
  bottom: 8vh;
  transform: scaleX(-1);
}

/* The same geometry stays subordinate to the work surface in the dark palette. */
[data-theme="dark"] .n-journey-canvas::before,
[data-theme="dark"] .n-journey-canvas::after,
.n-journey-canvas[data-theme="dark"]::before,
.n-journey-canvas[data-theme="dark"]::after {
  opacity: 0.35;
}

/* Desktop peers stretch to the same row height; mobile follows natural content height. */
.n-access-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--n-space-8);
}
.n-access-panels > * {
  min-width: 0;
  margin: 0;
}
@media (max-width: 800px) {
  .n-access-panels {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--n-space-5);
  }
}