/* The village door's own sign in page, Figma 13:3772 (desktop) and 13:9697
   (mobile), "06. Log In." step 01. Loaded after engine.css and the village's
   own token override (see login.html.j2), so the --swv-* names below are
   Figma's own values (--swv-neutral-950 is exactly #0C0B09, --swv-neutral-200
   exactly #ECEBE2) only for a village whose DESIGN.md sets none of its own;
   Temple Village's DESIGN.md is a village that does, and this file paints its
   generated ramp exactly the same way. The .dv1-nav / .dhero-mark /
   .dhero-burger top bar is reused rather than building a second one. Nothing
   here duplicates a rule engine.css already states; this file only adds what
   is specific to this page. */

body.login-page{
  background:var(--swv-neutral-200);
  color:var(--swv-neutral-950);
  font-family:var(--swv-serif);
  min-height:100vh;
  position:relative;
}

.login-ground{position:fixed;inset:0;overflow:hidden;background:var(--swv-neutral-200);z-index:0}
.login-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Same shape as engine.css's own .abt-hero-veil: a radial wash centred on the
   copy, a top-to-bottom gradient for the nav and the foot. Built from the
   page's own ground colour, --swv-neutral-200, rather than a literal colour,
   so a village whose DESIGN.md gives that token its own value washes toward
   its own ground and not Secret Waterfall's #ECEBE2; color-mix against
   transparent is the same alpha-over-a-token technique engine.css's own
   --dim/--dim-soft use, and for the unchanged token it is arithmetically the
   same rgba(236,235,226,*) this rule read before. With no login image set for
   a tenant (content.assets has none today), this sits over a background
   that is already solid --swv-neutral-200, so it is a no-op until one is
   added and the heading's contrast is against a flat, measurable ground
   either way. */
.login-veil{position:absolute;inset:0;background:
  radial-gradient(52% 46% at 50% 46%, color-mix(in srgb, var(--swv-neutral-200) 94%, transparent), color-mix(in srgb, var(--swv-neutral-200) 72%, transparent) 55%, color-mix(in srgb, var(--swv-neutral-200) 15%, transparent) 85%),
  linear-gradient(180deg, color-mix(in srgb, var(--swv-neutral-200) 65%, transparent) 0%, color-mix(in srgb, var(--swv-neutral-200) 10%, transparent) 22%, color-mix(in srgb, var(--swv-neutral-200) 10%, transparent) 68%, color-mix(in srgb, var(--swv-neutral-200) 70%, transparent) 100%)
}

.login-nav{position:absolute;top:0;left:0;right:0;z-index:2}
/* dhero-mark's own webp/svg art carries whichever tenant colour is correct
   for a dark photo ground (see logo-mono-vs-logo-mono-ink memory); Figma
   draws this nav's mark and burger in ink (#0C0B09) instead, and there is no
   per-tenant "ink" variant asset to reuse the way LOGO_MONO_INK.webp exists
   for Secret Waterfall Village alone. brightness(0) turns whatever colour
   the tenant's mark is into a solid dark silhouette on its own alpha, which
   only ever raises its contrast against this near-white ground rather than
   risking the invisible-sand-mark mistake that memory documents. */
.login-nav .dhero-mark{filter:brightness(0)}
.login-nav .dhero-burger i{background:var(--swv-neutral-950)}

.login-main{
  position:relative;z-index:1;min-height:100vh;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;padding:112px 24px 56px;text-align:center;
}

.login-heading{
  font:400 40px/44px var(--swv-serif);letter-spacing:-1.2px;
  color:var(--swv-neutral-950);max-width:700px;margin:0;
}

.login-google-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:191px;height:40px;border-radius:999px;background:var(--swv-accent-950);
  transition:background .2s;
}
.login-google-btn:hover{background:var(--swv-accent-900)}
.login-google-mark{flex:none}
.login-google-text{
  font:400 14px/18px var(--swv-sans);letter-spacing:-.42px;color:var(--swv-neutral-50);
}

.login-consent{
  font:400 13px/18px var(--swv-sans);letter-spacing:-.1px;
  color:var(--swv-neutral-600);max-width:360px;margin:0;
}
/* The "Powered by" credit is a link now (render_login, powered_by_href):
   it stays as quiet as the plain text it replaced, so no underline until a
   reader is actually pointed at it. */
.login-consent a{color:inherit;text-decoration:none}
.login-consent a:hover{text-decoration:underline}

/* The emailed link form, offered beside Google rather than under it: an
   owner is provisioned with no password at all, so this is the only door
   many of them have. login-link-lead only shows when Google is also on the
   page, since "or" means nothing when this form is the one way in. */
.login-link-lead{
  font:400 16px/20px var(--swv-sans);letter-spacing:-.1px;
  color:var(--swv-neutral-600);margin:0;
}
.login-link-form{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;max-width:320px;
}
.login-link-field{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}
.login-link-caption{
  font:400 12px/14px var(--swv-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--swv-neutral-600);
}
.login-link-field input{
  width:100%;box-sizing:border-box;padding:10px 14px;border-radius:999px;
  border:1px solid var(--swv-neutral-600);background:transparent;
  font:400 16px/20px var(--swv-sans);color:var(--swv-neutral-950);
}
.login-link-field input:focus-visible{outline:2px solid var(--swv-accent-500);outline-offset:2px}
.login-link-btn{
  width:100%;height:40px;border-radius:999px;border:none;cursor:pointer;
  background:var(--swv-accent-950);color:var(--swv-neutral-50);
  font:400 14px/18px var(--swv-sans);letter-spacing:-.42px;
  transition:background .2s;
}
.login-link-btn:hover:not(:disabled){background:var(--swv-accent-900)}
.login-link-btn:disabled{opacity:.6;cursor:default}
.login-link-status{
  font:400 16px/20px var(--swv-sans);letter-spacing:-.1px;
  color:var(--swv-neutral-600);max-width:320px;margin:0;min-height:20px;
}

@media(max-width:860px){
  .login-main{padding:88px 24px 40px}
  .login-heading{font-size:34px;line-height:38px}
  /* Secret Waterfall's phone design, scoped to its body the way engine.css scopes it, so every other village's
     sign in page keeps the two lines above. The design sets the title about 40% down the screen with the button under
     it; the stack starts there rather than being centred as a whole, so the
     email form below still fits a 844px phone. */
  body[data-project-slug] .login-main{padding:max(88px,38svh) var(--swv-space-24) var(--swv-space-48);gap:var(--swv-space-24);
    justify-content:flex-start}
  /* h1 (40px) sets "Your Private Villa" 254px wide, the design's line, and the whole title is wider than the 342px
     column so it wraps after "Villa". engine.css balances headings, which would break it after "Private"; wrap does not. */
  body[data-project-slug] .login-heading{font-size:var(--swv-text-h1);line-height:1.15;text-wrap:wrap}
  /* the pills share the kit's pill height and grow their tap target to the
     control height on a transparent pseudo element */
  body[data-project-slug] .login-google-btn,body[data-project-slug] .login-link-btn{position:relative;height:var(--swv-pill-h)}
  body[data-project-slug] .login-google-btn::before,body[data-project-slug] .login-link-btn::before{content:"";position:absolute;
    inset:calc((var(--swv-pill-h) - var(--swv-control-h))/2) 0}
  body[data-project-slug] .login-link-field input{min-height:var(--swv-control-h);border-radius:var(--swv-radius-pill)}
  body[data-project-slug] .login-consent{font-size:var(--swv-text-caption)}
}

/* Beside the Google button alone. Quieter than the body copy and sitting
   directly under the control it describes, so it reads as a condition of
   that button rather than as a footer for the whole page. */
.login-consent-google{margin:10px 0 0;font-size:16px;line-height:1.45;opacity:.72;text-align:center}

/* At phone width the two buttons grow their 44px tap target on a ::before
   that reaches past the pill (above), and a clipped button would cut it off.
   The rolling label (engine.css, .roll-label) clips its button, so here the
   button is left unclipped and the label does not roll; a phone has no hover
   to roll it on anyway. */
@media(max-width:860px){
  body[data-project-slug] .login-google-btn,body[data-project-slug] .login-link-btn{overflow:visible}
  body[data-project-slug] :is(.login-google-btn,.login-link-btn):is(:hover,:focus-visible) > .roll-label{animation:none}
}