/* Sign-in and sign-up on Liquid Glass (templates/account/_site_auth_base.html: account/login.html,
   account/signup.html, landlords/signup.html). css/lg-core.css (tokens, the four Directions, glass) and
   static/site/site.css (fields, buttons, alerts) load first; every value below is a --lg-* token.

   A split screen: the photo panel (.au-side, a rounded dark tile, always dark because it sits on a photo)
   and the form side (.au-main), whose content is a centred glass sheet (.au-content) on the page colour.
   Under 960px the photo panel becomes a slim brand bar above the sheet. Every class starts with "au-".
   account/_av_base.html (static/css/auth-v2.css) draws the same look for allauth's other pages. */

.au-body { min-height: 100vh; background: var(--lg-bg); }
.au-shell { display: grid; grid-template-columns: minmax(400px, 0.92fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }

/* ---------- Photo panel ---------------------------------------------------------------- */

.au-side {
  position: sticky; top: var(--lg-s-4); height: calc(100vh - 2 * var(--lg-s-4)); height: calc(100svh - 2 * var(--lg-s-4));
  margin: var(--lg-s-4) 0 var(--lg-s-4) var(--lg-s-4);
  overflow: hidden; isolation: isolate; border-radius: var(--lg-r-2xl);
  display: flex; flex-direction: column; padding: var(--lg-s-7) clamp(28px, 3.2vw, 48px);
  color: var(--lg-white);
  background: var(--hlm-panel);
  box-shadow: var(--lg-elev-2);
}
/* Shown while the photo loads, if it never does, and as the phone's brand bar: the hero-lm ink with the
   active accent and the signature gradient's magenta and orange glowing in it. A brand moment: the logo's colours
   around the Direction's (or a brokerage's) own colour. */
.au-side::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(90% 60% at 100% 0%, var(--hlm-glow-accent), transparent 70%),
    radial-gradient(80% 60% at 0% 100%, var(--hlm-glow-magenta), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, var(--hlm-glow-orange), transparent 70%),
    var(--hlm-panel);
}
.au-side::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--lg-black) 58%, transparent) 0%,
      color-mix(in srgb, var(--lg-black) 8%, transparent) 20%,
      color-mix(in srgb, var(--lg-black) 30%, transparent) 42%,
      color-mix(in srgb, var(--lg-black) 80%, transparent) 64%,
      color-mix(in srgb, var(--lg-black) 92%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--lg-black) 35%, transparent), transparent 70%);
}
.au-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }

.au-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s-4); }
.au-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--lg-s-2); color: var(--lg-white); text-decoration: none !important; min-width: 0; }
/* The reversed horizontal logo: height only, the width follows (brand kit). */
.au-brand img { display: block; width: auto; max-width: 100%; height: var(--lg-logo-h-signin); object-fit: contain; object-position: left center; flex: none; }
.au-brand-label { max-width: 100%; font-family: var(--lg-font-display); font-size: var(--lg-t-caption); font-weight: var(--lg-weight-label); letter-spacing: var(--lg-tracking-label); text-transform: uppercase; line-height: var(--lg-leading-tight); color: color-mix(in srgb, var(--lg-white) 72%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-brand:focus-visible { outline-color: var(--lg-white); }

.au-side-body { margin-top: auto; padding-top: var(--lg-s-8); max-width: 34rem; }
.au-side-title { font-family: var(--lg-font-display); font-size: var(--lg-t-display); line-height: var(--lg-leading-tight); font-weight: var(--lg-weight-display); letter-spacing: var(--lg-tracking-display); text-wrap: balance; }
.au-side-title em { font-style: normal; color: color-mix(in srgb, var(--lg-accent) 40%, var(--lg-white)); }
/* The one brand moment in the words: the headline's marked word in the signature gradient (large text on the
   panel's dark foot: every stop reads at least 3:1 there). Browsers without text clipping keep the tint above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .au-side-title em { background: var(--hlm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.au-side-lede { margin-top: var(--lg-s-3); max-width: 46ch; font-size: var(--lg-t-body); line-height: 1.5; color: color-mix(in srgb, var(--lg-white) 84%, transparent); }
.au-perks { list-style: none; padding: 0; margin: var(--lg-s-6) 0 0; display: grid; gap: var(--lg-s-2); }
/* Glass on the photo: dark tint, blur, a white top highlight and hairline. */
.au-perks li {
  display: flex; gap: var(--lg-s-3); align-items: center; padding: var(--lg-s-3) 14px; border-radius: var(--lg-r-lg);
  background: color-mix(in srgb, var(--lg-black) 36%, transparent);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lg-white) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lg-white) 12%, transparent);
}
.au-perk-ic { width: 38px; height: 38px; flex: none; border-radius: var(--lg-r-tile); display: grid; place-items: center; background: color-mix(in srgb, var(--lg-white) 14%, transparent); color: var(--lg-white); }
.au-perk-ic .s-ic { width: 20px; height: 20px; }
.au-perks b { display: block; font-size: var(--lg-t-control); font-weight: 600; line-height: 1.3; }
.au-perks li > span:last-child > span { display: block; margin-top: 2px; font-size: var(--lg-t-secondary); line-height: 1.4; color: color-mix(in srgb, var(--lg-white) 76%, transparent); }

.au-side-foot { margin-top: var(--lg-s-6); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--lg-t-caption); color: color-mix(in srgb, var(--lg-white) 70%, transparent); }
.au-side-foot span { display: inline-flex; align-items: center; gap: 6px; }
.au-side-foot .s-ic { width: 14px; height: 14px; }

/* Short laptop screens: keep the panel's words whole by dropping the least important first. */
@media (min-width: 960px) and (max-height: 820px) { .au-side-lede { display: none; } .au-perks { margin-top: var(--lg-s-5); } }
@media (min-width: 960px) and (max-height: 660px) { .au-perks { display: none; } }

/* ---------- Theme switch (round icon button, SPEC 5.8) --------------------------------------- */

.au-theme {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--lg-icon-btn); color: var(--lg-text-secondary);
  transition: color var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
  -webkit-tap-highlight-color: transparent;
}
.au-theme:hover { color: var(--lg-text); background: var(--lg-icon-btn-hover); }
.au-theme:active { transform: scale(.9); }
.au-theme:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; }
.au-theme .s-ic { width: 18px; height: 18px; }
.au-theme .au-ic-sun { display: none; }
.dark .au-theme .au-ic-sun { display: block; }
.dark .au-theme .au-ic-moon { display: none; }
.au-theme--bar { display: none; background: color-mix(in srgb, var(--lg-white) 14%, transparent); color: var(--lg-white); }
.au-theme--bar:hover { background: color-mix(in srgb, var(--lg-white) 24%, transparent); color: var(--lg-white); }
@media (pointer: coarse) { .au-theme { width: var(--lg-hit); height: var(--lg-hit); } }

/* ---------- Form side: a centred glass sheet ------------------------------------------------ */

.au-main { display: flex; flex-direction: column; min-width: 0; padding: var(--lg-s-5) clamp(24px, 4vw, 64px) var(--lg-s-5); outline: none; }
.au-top { display: flex; justify-content: flex-end; align-items: center; min-height: 40px; }
.au-content {
  width: 100%; max-width: 512px; margin: auto; padding: var(--lg-s-8);
  border-radius: var(--lg-r-2xl);
  background: var(--lg-glass-3);
  -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
  box-shadow: var(--lg-elev-3);
}
.au-content--wide { max-width: 604px; }

/* Role tabs: a segmented control (SPEC 5.2). */
.au-roles-label { padding-left: 6px; margin-bottom: var(--lg-s-2); font-size: var(--lg-t-label); font-weight: 600; color: var(--lg-text-secondary); }
.au-roles { display: flex; gap: 2px; padding: 3px; border-radius: var(--lg-r-sm); background: var(--lg-fill); }
.au-role {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 var(--lg-s-3);
  border-radius: var(--lg-r-xs); color: var(--lg-text); font-size: var(--lg-t-label); font-weight: 400; white-space: nowrap; text-decoration: none !important;
  transition: background-color var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
  -webkit-tap-highlight-color: transparent;
}
.au-role:hover { background: var(--lg-fill-ink); }
.au-role:active { transform: scale(.95); }
.au-role .s-ic { width: 18px; height: 18px; color: var(--lg-text-secondary); transition: color var(--lg-dur) var(--lg-ease); }
.au-role[aria-current="true"] { background: var(--lg-surface-solid); font-weight: 600; box-shadow: var(--lg-indicator-shadow); }
.au-role[aria-current="true"] .s-ic { color: var(--lg-accent-text); }
.au-role:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; }
@media (pointer: coarse) { .au-role { min-height: var(--lg-hit); } }

.au-head { margin-top: var(--lg-s-6); }
.au-title { font-family: var(--lg-font-display); font-size: var(--lg-t-title); line-height: 1.25; font-weight: 700; letter-spacing: var(--lg-tracking-title); color: var(--lg-text); text-wrap: balance; }
.au-title--first { margin-top: var(--lg-s-3); }
.au-sub { margin-top: 6px; font-size: var(--lg-t-label); line-height: 1.5; color: var(--lg-text-secondary); }

.au-form { margin-top: var(--lg-s-6); }
.au-pw { padding-right: 48px; }
.au-pw::-ms-reveal { display: none; }
.au-pw-help { margin-top: 2px; }
.au-pw-help ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.s-input-action .au-ic-hide { display: none; }
.s-input-action[aria-pressed="true"] .au-ic-show { display: none; }
.s-input-action[aria-pressed="true"] .au-ic-hide { display: block; }
.s-input-action:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; }
@media (pointer: coarse) { .au-form .s-input-wrap > .s-input-action { width: var(--lg-hit); height: var(--lg-hit); right: 0; } }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s-3); flex-wrap: wrap; }
.au-row .s-check { align-items: center; }
.au-row .s-check input { margin: 0; }
.au-forgot { font-size: var(--lg-t-label); font-weight: 600; }
.au-terms a { color: var(--lg-accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.au-submit { margin-top: var(--lg-s-1); }
.au-submit[aria-busy="true"] { opacity: .75; pointer-events: none; }

/* Subtle areas inside the sheet: fills, never glass on glass. */
.au-new { margin-top: var(--lg-s-6); padding: var(--lg-s-4) 18px; border-radius: var(--lg-r-lg); background: var(--lg-fill-ink); }
.au-new p { font-size: var(--lg-t-label); line-height: 1.5; color: var(--lg-text-secondary); }
.au-new b { color: var(--lg-text); font-weight: 600; }
.au-new .s-link { margin-top: var(--lg-s-2); font-size: var(--lg-t-label); }
.au-new-actions { display: flex; flex-wrap: wrap; gap: var(--lg-s-2); margin-top: var(--lg-s-3); }
/* On the fill inside the sheet the accent tint pill reads with the ink colour (4.5:1 in every Direction). */
.au-new-actions .s-btn--soft { --b-ink: var(--lg-text); }
.au-new .au-new-note { margin-top: var(--lg-s-3); font-size: var(--lg-t-secondary); color: var(--lg-text-secondary); }

.au-alt { margin-top: var(--lg-s-6); font-size: var(--lg-t-label); color: var(--lg-text-secondary); }
.au-alt a { font-weight: 600; }
.au-legal { margin-top: var(--lg-s-4); font-size: var(--lg-t-caption); line-height: 1.5; color: var(--lg-text-tertiary); }
.au-legal a { color: var(--lg-text-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* Account chooser: each card is one link (its call to action stretches over the whole card). */
.au-choices { display: grid; gap: var(--lg-s-3); margin-top: var(--lg-s-6); }
.au-choice {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--lg-s-4); align-items: center;
  padding: 18px 18px 18px var(--lg-s-5); border-radius: var(--lg-r-lg); background: var(--lg-surface-solid); box-shadow: var(--lg-elev-1);
  transition: box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
}
.au-choice:hover { box-shadow: var(--lg-elev-2); }
.au-choice:active { transform: scale(.96); }
.au-choice:focus-within { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; }
.au-choice-ic { width: 40px; height: 40px; border-radius: var(--lg-r-tile); display: grid; place-items: center; background: var(--lg-accent-soft); color: var(--lg-accent-text); align-self: start; }
.au-choice-ic .s-ic { width: 22px; height: 22px; }
.au-choice-t { font-size: var(--lg-t-body); font-weight: 600; line-height: 1.3; color: var(--lg-text); }
.au-choice-d { margin-top: var(--lg-s-1); font-size: var(--lg-t-label); line-height: 1.45; color: var(--lg-text-secondary); }
.au-choice-cta { margin-top: var(--lg-s-2); font-size: var(--lg-t-secondary); color: var(--lg-text-secondary); }
.au-choice-cta a { font-weight: 600; color: var(--lg-accent-text); }
.au-choice-cta a::after { content: ""; position: absolute; inset: 0; border-radius: var(--lg-r-lg); }
.au-choice-cta a:focus-visible { outline: none; }
.au-choice-go { width: 20px; height: 20px; color: var(--lg-text-tertiary); transition: color var(--lg-dur) var(--lg-ease), transform var(--lg-dur) var(--lg-ease); }
.au-choice:hover .au-choice-go { color: var(--lg-accent-text); transform: translateX(3px); }

.au-note { display: flex; gap: var(--lg-s-3); align-items: flex-start; margin-top: 14px; padding: 14px var(--lg-s-4); border-radius: var(--lg-r-lg); background: var(--lg-fill-ink); font-size: var(--lg-t-label); line-height: 1.5; color: var(--lg-text-secondary); }
.au-note > .s-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--lg-accent-text); }
.au-note b { color: var(--lg-text); font-weight: 600; }
.au-note a { font-weight: 600; }

.au-divider { display: flex; align-items: center; gap: 14px; margin: var(--lg-s-8) 0 var(--lg-s-4); font-size: var(--lg-t-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lg-text-tertiary); }
.au-divider::before, .au-divider::after { content: ""; flex: 1; height: 1px; background: var(--lg-separator); }
.au-invite-row { display: grid; gap: 10px; justify-items: start; }
.au-invite-row > .s-input-wrap { width: 100%; }
.au-nobr { white-space: nowrap; }

/* Footer under the sheet */
.au-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s-2) 18px; flex-wrap: wrap; padding-top: var(--lg-s-5); font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); }
.au-foot-copy { display: none; }
.au-foot-links { display: flex; gap: 18px; margin-left: auto; }
.au-foot-links a { color: var(--lg-text-tertiary); }
.au-foot-links a:hover { color: var(--lg-text); }

/* ---------- Tablet and phone: the photo panel becomes a slim brand bar -------------------- */

@media (max-width: 959px) {
  .au-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .au-side { position: relative; top: auto; height: auto; margin: var(--lg-s-3) var(--lg-s-3) 0; padding: 10px var(--lg-s-3) 10px var(--lg-s-4); border-radius: var(--lg-r-lg); }
  .au-side::after { display: none; }
  .au-side-body, .au-side-foot { display: none; }
  .au-brand img { height: var(--lg-logo-h-nav); }
  .au-brand-label { display: none; }
  .au-theme--bar { display: grid; }
  .au-top { display: none; }
  .au-main { padding: 0 var(--lg-s-3) var(--lg-s-5); }
  .au-content { margin: var(--lg-s-4) auto 0; padding: var(--lg-s-7) var(--lg-s-6); }
  .au-foot { justify-content: center; text-align: center; margin-top: var(--lg-s-6); padding-top: var(--lg-s-4); box-shadow: inset 0 1px 0 var(--lg-separator); }
  .au-foot-copy { display: block; }
  .au-foot-links { margin-left: 0; }
}

@media (max-width: 560px) {
  .au-content { padding: var(--lg-s-6) var(--lg-s-5); border-radius: var(--lg-r-xl); }
  .au-invite-row { justify-items: stretch; }
  .au-choice { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: var(--lg-s-4); }
  .au-choice-go { display: none; }
  .au-new { padding: var(--lg-s-4); }
}

@media (max-width: 400px) {
  .au-roles { gap: 2px; padding: 3px; }
  .au-role { padding: 0 var(--lg-s-2); }
  .au-role .s-ic { display: none; }
}