/* Sign-in / magic-link pages. */

@layer components {
  /* Always composed with .panel; re-skins its padding via the custom-property
     API (a roomier vertical inset) rather than re-declaring padding, so it wins
     regardless of stylesheet load order. */
  .auth {
    --panel-padding: 3rem 1.5ch;
    max-inline-size: 23.75rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    h2 {
      font-size: var(--text-medium);
    }

    p {
      font-size: var(--text-small);
      color: var(--color-text-subtle);
    }
  }

  .wordmark {
    font-size: var(--text-x-large);
    font-weight: 700;

    span {
      color: var(--color-primary);
    }
  }

  .auth__title {
    font-size: var(--text-large);
    text-wrap: balance;
  }

  .auth__form {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-block-start: 0.75rem;
  }

  .auth__divider {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    font-size: var(--text-x-small);
    color: var(--color-text-muted);

    &::before,
    &::after {
      content: "";
      flex: 1;
      block-size: 1px;
      background: var(--color-border);
    }
  }

  .auth__note {
    font-size: var(--text-small);
  }

  /* Development-only code box on the verify page. */
  .auth__dev-code {
    display: flex;
    align-items: center;
    gap: 0.75ch;
    padding: 0.5rem var(--inline-space);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    font-size: var(--text-x-small);
    color: var(--color-text-subtle);

    code {
      font-family: var(--font-mono);
      font-size: var(--text-normal);
      font-weight: 700;
      letter-spacing: 0.15em;
      color: var(--color-ink);
    }
  }

  .auth__dev-tag {
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    font-weight: 700;
    padding: 0.125rem var(--inline-space-half);
    border-radius: var(--radius-xs);
    background: var(--color-ink);
    color: var(--color-canvas);
  }
}