/* ==========================================================================
   AUTH SCREENS — login, register, password change
   A two-plane stage: a quiet brand panel and a raised credential card, both
   extruded from the same material.
   ========================================================================== */

.auth-body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--neu-surface);
}

.auth-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Brand panel ---- */

.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--neu-sp-7);
  padding: var(--neu-sp-8) var(--neu-sp-9);
  overflow: hidden;
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-lg);
}

.auth-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--neu-sp-4); }
.auth-brand__mark {
  width: auto;
  height: 3rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(23, 23, 21, 0.1);
  border-radius: var(--neu-r-sm);
  background: #fafaf9;
  box-sizing: border-box;
  object-fit: contain;
}

.auth-aside__copy { position: relative; z-index: 2; max-width: 34rem; }

.auth-eyebrow {
  margin: 0 0 var(--neu-sp-4);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-caps);
  text-transform: uppercase;
  color: var(--neu-text-faint);
}

.auth-headline {
  margin: 0 0 var(--neu-sp-4);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: var(--neu-weight-bold);
  line-height: 1.12;
  letter-spacing: var(--neu-tracking-tight);
  color: var(--neu-text-strong);
}

.auth-sub {
  margin: 0;
  max-width: 30rem;
  font-size: var(--neu-text-base);
  line-height: var(--neu-leading-loose);
  color: var(--neu-text-muted);
}

/* A faint extruded lattice — reads as machined material, never as decoration. */
.auth-aside__grid {
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(var(--neu-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--neu-line) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(72% 62% at 30% 40%, var(--neu-text-strong) 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 62% at 30% 40%, var(--neu-text-strong) 0%, transparent 78%);
}

/* ---- Credential panel ---- */

.auth-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--neu-sp-6), 5vw, var(--neu-sp-8));
}

.auth-theme {
  position: absolute;
  top: var(--neu-sp-6);
  right: var(--neu-sp-6);
  z-index: var(--neu-z-sticky);
}

/* The login view ships its own .login-container/.login-card; neutralise the
   full-height centering here so it sits inside this column instead. */
.auth-main .login-container { min-height: auto; width: 100%; padding: 0; }

/* login.hbs also renders a floating logo block that the shell used to own. */
.auth-main > #logo.logo,
.auth-stage > #logo.logo { display: none; }

/* Generic auth card for views that do not bring their own (register, etc.) */
.auth-card {
  width: 100%;
  max-width: 27rem;
  padding: var(--neu-sp-8);
  border-radius: var(--neu-r-xl);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xl);
  animation: neu-rise var(--neu-dur-5) var(--neu-ease-out) both;
}
.auth-card h1 {
  margin: 0 0 var(--neu-sp-2);
  font-size: var(--neu-text-2xl);
  font-weight: var(--neu-weight-bold);
  letter-spacing: var(--neu-tracking-tight);
  text-transform: capitalize;
}
.auth-card__sub { margin: 0 0 var(--neu-sp-7); color: var(--neu-text-muted); font-size: var(--neu-text-md); }

.auth-form { display: flex; flex-direction: column; gap: var(--neu-sp-5); }
.auth-form .form-group { margin: 0; }
.auth-form input[type='text'],
.auth-form input[type='email'],
.auth-form input[type='password'] { width: 100%; max-width: none; margin: 0; }

.auth-error {
  display: flex;
  gap: var(--neu-sp-2);
  margin: 0 0 var(--neu-sp-5);
  padding: var(--neu-sp-3) var(--neu-sp-4);
  border-left: 3px solid var(--neu-danger);
  border-radius: var(--neu-r-sm);
  background: var(--neu-danger-soft);
  color: var(--neu-danger);
  font-size: var(--neu-text-sm);
}
.auth-success {
  display: flex;
  gap: var(--neu-sp-2);
  margin: 0 0 var(--neu-sp-5);
  padding: var(--neu-sp-3) var(--neu-sp-4);
  border-left: 3px solid var(--neu-success);
  border-radius: var(--neu-r-sm);
  background: var(--neu-success-soft);
  color: var(--neu-success);
  font-size: var(--neu-text-sm);
}

.auth-radio-row {
  display: flex;
  gap: var(--neu-sp-2);
  padding: var(--neu-sp-1);
  border-radius: var(--neu-r-md);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-sm);
}
.auth-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--neu-sp-2);
  padding: 0.55rem var(--neu-sp-3);
  border-radius: var(--neu-r-sm);
  color: var(--neu-text-muted);
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-medium);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease), color var(--neu-dur-2) var(--neu-ease);
}
.auth-radio:has(input:checked) {
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  color: var(--neu-text-strong);
}

@media (max-width: 960px) {
  .auth-stage { grid-template-columns: 1fr; }
  .auth-aside {
    gap: var(--neu-sp-6);
    padding: var(--neu-sp-7) var(--neu-sp-6);
    box-shadow: var(--neu-press-sm);
  }
  .auth-headline { font-size: 1.6rem; }
  .auth-sub { display: none; }
  .auth-main { padding: var(--neu-sp-7) var(--neu-sp-5) var(--neu-sp-9); }
  .auth-theme {
    position: fixed;
    top: var(--neu-sp-4);
    right: var(--neu-sp-4);
    z-index: var(--neu-z-sticky);
  }
}

@media (max-width: 560px) {
  .auth-aside { min-height: 4.75rem; padding: var(--neu-sp-4) var(--neu-sp-5); }
  .auth-aside__copy { display: none; }
  .auth-card { padding: var(--neu-sp-6); }
  .auth-main { align-items: flex-start; padding: var(--neu-sp-7) var(--neu-sp-4) var(--neu-sp-6); }
  .auth-theme { top: var(--neu-sp-4); right: var(--neu-sp-4); }
  .auth-brand__mark { max-width: calc(100vw - 7rem); height: 2.5rem; }
  .auth-main .login-card { padding: var(--neu-sp-5); }
  .auth-main .login-header { margin-bottom: var(--neu-sp-5); }
  .auth-main .login-form { gap: var(--neu-sp-4); }
}

/* login.hbs subtitle + register password row */
.login-sub {
  margin: var(--neu-sp-2) 0 0;
  color: var(--neu-text-muted);
  font-size: var(--neu-text-md);
  text-transform: none;
}
.register-password { display: flex; align-items: center; gap: var(--neu-sp-2); }
.register-password input { flex: 1; min-width: 0; }
.register-password .button-icon { flex: 0 0 auto; width: 2.5rem; min-height: 2.5rem; }