/* Public authentication documents. */
@layer ripcity-app {
  /* Auth views compose native markup: .auth-page wraps one .auth-card holding a
     heading, an optional .auth-error, and a native form with visible labels. */
  .auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wa-space-l);
    width: min(100%, 30rem);
  }

  .auth-card {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-l);
    width: min(100%, 30rem);
    padding: var(--wa-space-xl);
    background: var(--wa-color-surface-raised);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    box-shadow: var(--wa-shadow-m);
  }

  .auth-card h1 {
    margin: 0;
    color: var(--wa-color-text-loud);
    font-size: var(--wa-font-size-xl);
    font-weight: var(--wa-font-weight-bold);
    line-height: 1.2;
  }

  .auth-card p {
    margin: 0;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
  }

  .auth-card form {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    margin: 0;
  }

  .auth-card label {
    margin-block-start: var(--wa-space-s);
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
  }

  .auth-card input:not([type="hidden"]) {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: var(--wa-space-s) var(--wa-space-m);
    color: var(--wa-color-text-normal);
    font: inherit;
    /* iOS Safari zooms focused form controls whose computed text is below 16px. */
    font-size: 16px;
    background: var(--wa-color-surface-default);
    border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-m);
  }

  .auth-card button {
    width: 100%;
    margin-block-start: var(--wa-space-l);
    padding: var(--wa-space-s) var(--wa-space-m);
    color: var(--wa-color-brand-on-loud);
    font: inherit;
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-semibold);
    background: var(--wa-color-brand-fill-loud);
    border: var(--wa-border-width-s) solid transparent;
    border-radius: var(--wa-border-radius-m);
    cursor: pointer;
    transition: opacity var(--wa-transition-fast);
  }

  .auth-card button:hover {
    opacity: 0.9;
  }

  .auth-card > a {
    align-self: center;
    font-size: var(--wa-font-size-s);
  }

  .auth-card .auth-error {
    padding: var(--wa-space-s) var(--wa-space-m);
    color: var(--wa-color-danger-on-quiet);
    background: var(--wa-color-danger-fill-quiet);
    border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal);
    border-inline-start-width: var(--wa-border-width-l);
    border-radius: var(--wa-border-radius-m);
  }
  @media (max-width: 56rem) {
    .auth-card {
      padding: var(--wa-space-l);
    }
  }
}