/* A deliberately scoped authentication surface. It leaves the operational UI intact. */

.auth-page {
  min-block-size: 100%;
  background:
    radial-gradient(circle at 7% 20%, rgb(69 147 193 / 16%), transparent 24rem),
    radial-gradient(circle at 92% 88%, rgb(242 169 59 / 14%), transparent 22rem),
    #f3f7fa;
}

.auth-page .site-header {
  position: relative;
  border-color: rgb(14 90 138 / 12%);
  background: rgb(255 255 255 / 82%);
}

.auth-page .site-header__inner { min-height: 5rem; }
.auth-page .page-content {
  display: grid;
  min-block-size: calc(100dvh - 5rem);
  padding-block: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.auth-page #planner-status { display: none; }

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.82fr);
  width: min(100%, 72rem);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgb(14 90 138 / 12%);
  border-radius: 1.35rem;
  background: white;
  box-shadow: 0 1.5rem 4.5rem rgb(22 50 72 / 16%);
}

.auth-layout__intro {
  position: relative;
  display: grid;
  min-block-size: 35rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  overflow: hidden;
  color: #f8fbfd;
  background: linear-gradient(145deg, #063f63 0%, #0e5a8a 55%, #1473a7 100%);
  isolation: isolate;
}

.auth-layout__intro::before,
.auth-layout__intro::after {
  position: absolute;
  z-index: -1;
  width: 23rem;
  height: 23rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  content: "";
}

.auth-layout__intro::before { top: -13rem; right: -10rem; }
.auth-layout__intro::after { bottom: -16rem; left: -12rem; }
.auth-layout__intro-content { max-width: 31rem; }

.auth-kicker,
.auth-card__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.auth-kicker { color: #b9e1f6; }
.auth-layout__intro h1 {
  max-width: 10ch;
  margin: 0.7rem 0 1rem;
  font-size: clamp(2.2rem, 4vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -0.052em;
}

.auth-layout__lead {
  max-width: 31rem;
  margin: 0;
  color: rgb(248 251 253 / 82%);
  font-size: 1.04rem;
  line-height: 1.65;
}

.auth-benefits {
  display: grid;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-benefits li { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.8rem; align-items: start; }
.auth-benefits__marker {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 0.55rem;
  color: #b9e1f6;
  font-size: 0.68rem;
  font-weight: 800;
}
.auth-benefits strong { display: block; color: white; font-size: 0.94rem; }
.auth-benefits small { display: block; margin-top: 0.1rem; color: rgb(248 251 253 / 72%); font-size: 0.82rem; line-height: 1.45; }

.auth-layout__form {
  display: grid;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  background: white;
}

.auth-card { width: min(100%, 26rem); margin-inline: auto; }
.auth-card__header { margin-bottom: 1.75rem; }
.auth-card__eyebrow { color: var(--brand); }
.auth-card__header h2 {
  margin: 0.45rem 0 0.45rem;
  color: #152b3a;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.auth-card__header p:last-child { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }

.auth-form { display: grid; gap: 1.05rem; }
.auth-field { display: grid; gap: 0.43rem; }
.auth-field__label { color: #263b49; font-size: 0.9rem; font-weight: 720; }
.auth-field input {
  min-height: 3.15rem;
  padding: 0.75rem 0.85rem;
  border-color: #c7d4dd;
  border-radius: 0.55rem;
  box-shadow: inset 0 1px 2px rgb(21 43 58 / 3%);
}
.auth-field input:hover { border-color: #90aebf; }
.auth-field--error input { border-color: var(--danger); background: #fffafa; }
.auth-field__hint { color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.auth-field__hint ul { margin: 0.25rem 0 0; padding-left: 1rem; }
.auth-field__errors .errorlist { margin: 0; padding-left: 1.1rem; }

.auth-alert {
  padding: 0.8rem 0.9rem;
  border: 1px solid #f1b9b4;
  border-radius: 0.55rem;
  color: #8c1d14;
  background: var(--danger-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}
.auth-alert .errorlist { margin: 0; padding-left: 1.1rem; }

.auth-form__submit { width: 100%; min-height: 3.15rem; margin-top: 0.25rem; border-radius: 0.55rem; }
.auth-form__help { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.55; }

.auth-layout--single { grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.82fr); width: min(100%, 63rem); }
.auth-layout--single .auth-layout__intro { min-block-size: 31rem; }

.auth-complete {
  display: grid;
  width: min(100%, 31rem);
  margin-inline: auto;
  text-align: center;
}
.auth-complete__card {
  padding: clamp(2rem, 6vw, 3.75rem);
  border: 1px solid rgb(14 90 138 / 12%);
  border-radius: 1.35rem;
  background: white;
  box-shadow: 0 1.5rem 4.5rem rgb(22 50 72 / 14%);
}
.auth-complete__mark {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  place-items: center;
  border-radius: 50%;
  color: #075234;
  background: var(--success-soft);
  font-size: 1.6rem;
  font-weight: 800;
}
.auth-complete h1 { margin: 0.45rem 0 0.6rem; color: #152b3a; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.045em; }
.auth-complete p:not(.auth-card__eyebrow) { margin: 0; color: var(--muted); }
.auth-complete__action { margin-top: 1.75rem; }

@media (max-width: 52rem) {
  .auth-page .page-content { display: block; min-block-size: auto; }
  .auth-layout,
  .auth-layout--single { grid-template-columns: 1fr; width: min(100%, 33rem); }
  .auth-layout__intro,
  .auth-layout--single .auth-layout__intro { min-block-size: 0; padding: 2rem; }
  .auth-layout__intro h1 { max-width: 15ch; font-size: clamp(2rem, 8vw, 2.8rem); }
  .auth-benefits { display: none; }
  .auth-layout__form { padding: 2rem; }
}

@media (max-width: 34rem) {
  .auth-page .site-header__inner { min-height: 4.5rem; }
  .auth-page .page-content { padding-block: 0.75rem 1.5rem; }
  .auth-layout,
  .auth-complete__card { border-radius: 1rem; }
  .auth-layout__intro,
  .auth-layout__form { padding: 1.5rem; }
  .auth-layout__lead { font-size: 0.94rem; }
  .auth-card__header { margin-bottom: 1.35rem; }
}