/* ============================================================
   Auth pages (/login, /signup, /forgot-password, /reset-password,
   /auth/callback): split screen. The form column on the left, a photo
   panel on the right from 900px; below that a slim brand bar, no photo.
   Behaviour: assets/js/pages/auth.js + components/auth-form.js.
   ============================================================ */

.authShell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }

/* ---- form column ---------------------------------------------------- */
.authMain { display: flex; flex-direction: column; min-width: 0; padding-inline: var(--gutter); }

.authBar {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--header-h); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.authBar .langMenu { margin-left: auto; }

.authMain__body {
  flex: 1; display: grid; align-content: center; justify-items: center;
  padding-block: var(--sp-6) var(--sp-7);
}
.authCard { display: grid; gap: var(--sp-5); width: min(100%, 400px); }
.authCard:focus { outline: none; }
/* Turnstile, under the card (auth-captcha.js): takes room only while it wants a click. */
.authCaptcha { width: min(100%, 400px); }
.authCaptcha[data-interactive] { margin-top: var(--sp-5); }

.authHead { display: grid; gap: var(--sp-2); }
.authHead h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; color: var(--charcoal); }
.authHead h1:focus { outline: none; }
.authHead p { font-size: var(--fs-md); color: var(--slate); }

/* ---- form ------------------------------------------------------------ */
.authForm { display: grid; gap: var(--sp-4); }
.authForm__fields { display: grid; gap: var(--sp-4); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.authForm .boxField { height: 48px; font-size: var(--fs-md); } /* 16px+: no zoom-on-focus in iOS Safari */
.authForm .phoneField { height: 48px; border-width: 1.5px; } /* as .boxField here */
.authForm .phoneField__code, .authForm .phoneField__input { font-size: var(--fs-md); }
.authForm__submit { width: 100%; margin-top: var(--sp-1); }
.authForm__submit:disabled { background: var(--hairline-strong); color: var(--slate); cursor: not-allowed; }

.authForm .formField[hidden] { display: none; }
.formField__labelRow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.formField__labelRow a { font-size: var(--fs-sm); font-weight: 700; }

.authBanner {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--negative-bg); color: var(--negative-ink); font-size: var(--fs-sm);
}
.authBanner .ico { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2; }
.authBanner[hidden] { display: none; }
.authNotice {
  padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--sale-bg); color: var(--sale-ink); font-size: var(--fs-sm);
}
.authNotice[hidden] { display: none; }

/* password: show/hide toggle inside the box */
.pwField { position: relative; }
.pwField .boxField { padding-right: 52px; }
.pwField__toggle {
  position: absolute; top: 2px; right: 2px; bottom: 2px;
  display: grid; place-items: center; width: 44px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--slate);
}
.pwField__toggle:hover { color: var(--ocean); }
.pwField__toggle .ico { width: 20px; height: 20px; }
.pwField__toggle .ico--hide, .pwField__toggle[aria-pressed="true"] .ico--show { display: none; }
.pwField__toggle[aria-pressed="true"] .ico--hide { display: block; }

.authHint { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--sale-ink); }
.authHint .ico { width: 14px; height: 14px; stroke-width: 2; }
.authHint[hidden] { display: none; }

.authHint--info { align-items: flex-start; color: var(--slate); }

/* tenant invite (/signup, /login with ?invite=): what the visitor was invited to */
.inviteCard {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--seafoam); border-radius: var(--r-lg);
  background: var(--seafoam-tint);
}
.inviteCard--loading { display: flex; align-items: center; gap: var(--sp-3); color: var(--slate); font-size: var(--fs-sm); }
.inviteCard--loading .spinner { width: 18px; height: 18px; color: var(--turquoise); }
.inviteCard__from { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--rental-ink); }
.inviteCard__from .ico { width: 16px; height: 16px; flex: none; stroke-width: 2; }
.inviteCard__lease { display: flex; align-items: center; gap: var(--sp-3); }
.inviteCard__icon {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px;
  border-radius: var(--r-md); background: var(--rental-bg); color: var(--rental-ink);
}
.inviteCard__icon .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.inviteCard__text { display: grid; gap: 2px; min-width: 0; }
.inviteCard__place { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--charcoal); overflow-wrap: anywhere; }
.inviteCard__address { font-size: var(--fs-xs); color: var(--slate); overflow-wrap: anywhere; }
.inviteCard__terms { font-size: var(--fs-xs); font-weight: 600; color: var(--turquoise-ink); }

/* signup / reset live checklist: each rule turns teal once met */
.pwChecks { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.pwChecks li {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--slate);
  transition: color var(--dur-fast) var(--ease);
}
.pwChecks .ico {
  width: 16px; height: 16px; padding: 2px; stroke-width: 3; border-radius: var(--r-pill);
  color: transparent; background: var(--hairline);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pwChecks li[data-met] { color: var(--turquoise-ink); }
.pwChecks li[data-met] .ico { color: var(--white); background: var(--turquoise-ink); }

.authSwitch { font-size: var(--fs-sm); color: var(--slate); text-align: center; }
.authSwitch a { font-weight: 700; }
.authLegal { font-size: var(--fs-xs); color: var(--slate); text-align: center; }
.authLegal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- state panels (check email, link expired, …): replace the form ------ */
.authPanel { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; animation: authIn var(--dur-med) var(--ease); }
.authPanel__icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--sp-1);
  border-radius: var(--r-pill); background: var(--seafoam); color: var(--ocean-deep);
}
.authPanel__icon .ico { width: 28px; height: 28px; stroke-width: 1.8; }
.authPanel--error .authPanel__icon { background: var(--negative-bg); color: var(--negative-ink); }
.authPanel h1 { font-size: var(--fs-xl); color: var(--charcoal); letter-spacing: -.01em; }
.authPanel h1:focus { outline: none; }
.authPanel p { font-size: var(--fs-md); color: var(--slate); max-width: 38ch; overflow-wrap: anywhere; }
.authPanel p b { color: var(--charcoal); }
.authPanel .btn--primary { width: 100%; margin-top: var(--sp-2); }
.authPanel__links { display: grid; justify-items: center; gap: var(--sp-2); }
.authPanel__link {
  padding: var(--sp-2); border: 0; background: none;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ocean);
}
.authPanel__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.authPanel__link:disabled { color: var(--slate); cursor: default; text-decoration: none; }
.authPanel__status { min-height: 1.5em; font-size: var(--fs-sm); }

.authLoading { display: grid; justify-items: center; gap: var(--sp-3); color: var(--slate); font-size: var(--fs-md); }
.authLoading .spinner { width: 28px; height: 28px; color: var(--turquoise); border-width: 3px; }

/* ---- /oauth/consent: an AI app asking to use the account (pages/auth.js initConsent) */
.consent { display: grid; gap: var(--sp-5); }
.consent__scope {
  display: grid; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.consent__scope h2 { font-size: var(--fs-md); color: var(--charcoal); }
.consent__list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.consent__list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--slate); }
.consent__list .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--turquoise); stroke-width: 2.2; }
.consent__cannot { font-size: var(--fs-sm); color: var(--charcoal); }
.consent__actions { display: grid; gap: var(--sp-3); }
.consent__actions .btn { width: 100%; }
.consent__actions .btn:disabled { opacity: .6; cursor: progress; }
.consent__status { min-height: 1.5em; margin-top: calc(-1 * var(--sp-3)); font-size: var(--fs-sm); color: var(--slate); text-align: center; }
.consent__revoke { font-size: var(--fs-xs); color: var(--slate); text-align: center; }

.authCard > * { animation: authIn var(--dur-med) var(--ease); }
@keyframes authIn { from { opacity: 0; transform: translateY(6px); } }

/* ---- photo panel (decorative) --------------------------------------- */
.authArt { display: none; }

@media (min-width: 900px) {
  .authShell { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
  .authMain { padding-inline: var(--sp-7); }
  .authBar { margin-inline: calc(-1 * var(--sp-7)); padding-inline: var(--sp-7); border-bottom-color: transparent; }

  .authArt {
    position: sticky; top: 0; display: block; height: 100dvh; overflow: hidden;
    background: var(--ocean-deep); color: var(--on-dark);
  }
  .authArt__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .authArt::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
  .authArt__mark {
    position: absolute; z-index: 1; top: -6%; right: -14%; width: 72%; height: auto; aspect-ratio: 1;
    color: var(--white); opacity: .09;
  }
  .authArt__copy {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    display: grid; gap: var(--sp-5); padding: var(--sp-7) var(--sp-7) var(--sp-8);
  }
  .authArt__copy h2 { font-size: var(--fs-2xl); letter-spacing: -.02em; max-width: 18ch; }
  .authArt__values { display: grid; gap: var(--sp-3); }
  .authArt__values li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); }
  .authArt__values .ico {
    width: 26px; height: 26px; padding: 5px; flex: none; stroke-width: 2.6;
    border-radius: var(--r-pill); background: var(--seafoam); color: var(--ocean-deep);
  }
  .authArt__credit {
    position: absolute; z-index: 2; right: var(--sp-4); bottom: var(--sp-3);
    font-size: var(--fs-xs); color: var(--on-dark-muted);
  }
  .authArt__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
}

@media (max-width: 479px) {
  .authHead h1 { font-size: var(--fs-xl); }
}