/* Clean layout (layout "clean"): gradient body, auth card, stack width */

:root {
  --clean-gradient-start: oklch(0.99 0.075 70);
  --clean-gradient-middle: oklch(0.58 0.18 275 / 0.18);
  --clean-gradient-end: oklch(0.99 0.03 150);
}

.bg-gradient {
  background: linear-gradient(
    to bottom right,
    var(--clean-gradient-start),
    var(--clean-gradient-middle),
    var(--clean-gradient-end)
  );
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
}

.panel {
  --panel-width: var(--clean-auth-max-inline-size);

  max-inline-size: var(--panel-width);
  inline-size: 100%;
  padding: var(--panel-padding, 1rem);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.8em;
  box-shadow: 0 0 0 1px oklch(var(--color-shadow-black) / 0.02),
    0 .2em 1.6em -0.8em oklch(var(--color-shadow-black) / 0.2),
    0 .4em 2.4em -1em oklch(var(--color-shadow-black) / 0.3),
    0 .4em .8em -1.2em oklch(var(--color-shadow-black) / 0.4),
    0 .8em 1.2em -1.6em oklch(var(--color-shadow-black) / 0.5),
    0 1.2em 1.6em -2em oklch(var(--color-shadow-black) / 0.6);
}

@media (min-width: 640px) {
  .panel {
    --panel-padding: 2rem;
  }
}

/* Outer column on clean pages: caps width so errors do not stretch the layout. Pair with flex flex-column align-center gap-4. */
.clean-stack {
  inline-size: min(100%, var(--clean-auth-max-inline-size));
}