main {
  width: clamp(16rem, 23rem, calc(100vw - (2 * var(--spacing))));
  background-color: color-mix(in oklab, white, transparent 80%);
  margin: var(--spacing);
  border-radius: var(--spacing-half);
  padding: var(--spacing-thick) var(--spacing);

  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  gap: var(--spacing);
}

header {
  --gap: var(--spacing-dense);
  text-align: center;

  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: var(--gap);

  & small {
    margin-top: calc(-1 * var(--gap) * 0.75);
  }
}

.create-password {
  &:has(:invalid) :is(input[type='submit'], button[type='submit']) {
    filter: grayscale(100%);
    pointer-events: none;
  }

  & ul {
    color: var(--color-gray-500);
    padding-left: 1rem;
    text-align: left;
  }

  & li {
    transition: var(--transition);
    list-style-type: disc;
  }

  .valid {
    list-style-image: url(/shared/img/check-outline.svg);
    color: var(--color-success);
  }
}