/* The centered card shell shared by the auth and account/settings 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. Fills the full reading column so every
     page shares one card width. */
  .form-panel {
    --panel-padding: 3rem 1.5ch;
    --panel-gap: 0.75rem;
  }

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

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

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

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

  .form-panel__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);
    }
  }

  /* Development-only code box on the verify page. */
  .form-panel__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);
    }
  }

  .form-panel__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);
  }
}