// Auth layout: centers a single card (login/signup). Uses the Wire UI card,
// passing an extra `class` so we can constrain its width.
component AuthLayout {
  view {
    <div class="auth-wrap">
      <section class="auth-card" aria-label="Authentication">
        <slot></slot>
      </section>
    </div>
  }

  style {
    .auth-wrap {
      display: grid;
      min-height: 100vh;
      place-items: center;
      padding: 1.5rem;
    }

    .auth-card {
      width: min(100%, 28rem);
      padding: 2rem;
      border: 1px solid var(--wire-color-border);
      border-radius: var(--wire-radius-lg);
      background: var(--wire-color-surface);
      box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 0.18);
    }
  }
}