/* Split-screen sign-in: form on the left, full-bleed image on the
 * right. Deliberately its own page and its own stylesheet - the
 * choreography in style.css is delicate, and this page needs a
 * layout style.css was never meant to produce (edge-to-edge image,
 * no header, no footer chrome). */

*, *::before, *::after { box-sizing: border-box; }

html, body.login {
   margin: 0;
   min-block-size: 100dvb;
}

body.login {
   background: #fff;
   font: 300 1rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #181213;
}

.login__layout {
   display: grid;
   grid-template-columns: 1fr;
   min-block-size: 100dvb;

   @media (width >= 60rem) {
      grid-template-columns: minmax(26rem, 42%) 1fr;
   }
}

.login__panel {
   display: flex;
   flex-direction: column;
   padding: 2rem 1.75rem;
   min-block-size: 100dvb;

   @media (width >= 30rem) {
      padding: 2.5rem 3rem;
   }

   @media (width >= 60rem) {
      padding: 3rem 4rem;
   }
}

.login__brand {
   display: inline-flex;
   align-items: center;
   color: inherit;
   text-decoration: none;
   align-self: start;

   /* Text-only wordmark, same as everywhere else on the site (see
    * header img in style.css) - no separate icon mark exists to pair
    * it with. */
   span {
      font-size: 1.4rem;
      font-weight: 500;
      letter-spacing: -.02em;
   }
}

.login__content {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-inline-size: 26rem;
   margin-inline: auto;
   inline-size: 100%;
   padding-block: 3rem;
}

/* One state visible at a time, chosen by auth.js via the container's
 * [data-state]. Everything is hidden until then, so the sign-in form
 * never flashes underneath the "checking your session" message. */
.login__state { display: none; }
[data-login][data-state="loading"] [data-panel="loading"],
[data-login][data-state="sign-in"] [data-panel="sign-in"],
[data-login][data-state="redirect"] [data-panel="redirect"],
[data-login][data-state="error"] [data-panel="error"] { display: block; }

.login__eyebrow {
   font-size: .85rem;
   font-weight: 300;
   letter-spacing: .2em;
   text-transform: uppercase;
   opacity: .6;
   margin: 0 0 .75rem;
}

.login__content h1 {
   font-size: clamp(1.75rem, 3.4vw, 2.25rem);
   line-height: 1.15;
   letter-spacing: -.02rem;
   font-weight: 300;
   margin: 0 0 2rem;
}

.login__note {
   margin-block-start: 1.5rem;
   font-size: 1rem;
}

.login__link {
   color: inherit;
   border-bottom: 1px solid currentColor;
   text-decoration: none;
   padding-block-end: .1rem;

   &:hover { opacity: .7; }
}

.login__footer {
   display: flex;
   gap: 1.5rem;
   margin: 0;
   font-size: .85rem;
   opacity: .6;

   a {
      color: inherit;
      text-decoration: none;

      &:hover { text-decoration: underline; }
   }
}

.login__image {
   display: none;
   background: #181213 url("../assets/login-bg.jpg") center / cover no-repeat;

   @media (width >= 60rem) {
      display: block;
   }
}


/* ------------------------------------------------------------------ */
/* Clerk's sign-in card, unbuilt back down to page furniture - a
 * border and shadow would read as a floating widget dropped onto the
 * page rather than as part of it. Sizing overrides live in auth.js's
 * APPEARANCE (rootBox/cardBox), since Clerk only takes those as
 * inline styles; only what plain CSS can reach is here. */

[data-panel="sign-in"] .cl-rootBox,
[data-panel="sign-in"] .cl-cardBox,
[data-panel="sign-in"] .cl-card {
   inline-size: 100%;
   max-inline-size: none;
}

[data-panel="sign-in"] .cl-card {
   box-shadow: none;
   border: none;
   padding: 0;
   background: transparent;
}

[data-panel="sign-in"] .cl-footer {
   background: transparent;
   border: none;
   padding-block-start: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
   .login__link { transition: none; }
}