/* Sign-in page (static/index.html), owner review 9 Oct 2026 (D310-D319).
   Loaded after styles.css. Every rule is scoped under .auth so it wins over the older sign-in
   rules there (Part 3 "sign-in page" and the D264 block), whatever happens to that file.
   Neutral page (#F5F3EE), white card, a line-art isometric store as the hero; colour only in the
   three small module dots (Openings blue, VM pink, Store Snag green). */

.auth{
  --s3-ink:#1A1A1A; --s3-line:#E3E0D8; --s3-page:#F5F3EE; --s3-stroke:1.25px;
  --s3-open:#2F62F4; --s3-vm:#E23E7A; --s3-snag:#0F9D74;
  min-height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);background:var(--s3-page)
}
body:has(.auth){background:#F5F3EE}

/* left: brand, drawing, three stages */
.auth .auth-hero{background:transparent;border-right:none;padding:28px 48px 28px 56px;display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0}
/* viewBox is cropped to the drawing itself, so the store fills the column; its height is what is
   left of the viewport after brand, stage cards and foot (about 320px), so nothing scrolls */
.auth .store3d{position:relative;margin:16px 0 18px;width:min(100%,760px,calc((100vh - 320px) * 1.21));min-width:min(100%,420px);aspect-ratio:586/484;align-self:center}
.auth .store3d-art{display:block;width:100%;height:100%;overflow:visible}

/* the drawing: one ink, one stroke width, soft neutral fills */
.auth .iso polygon,.auth .iso line,.auth .iso path,.auth .iso ellipse,.auth .iso polyline{stroke:var(--s3-ink);stroke-width:var(--s3-stroke);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.auth .iso .tiles line{stroke:var(--s3-line);stroke-width:1px}
.auth .iso .glass{fill:#FFFFFF;fill-opacity:.3}
.auth .iso .glint{stroke-opacity:.3;stroke-width:1px}
.auth .iso .fold{stroke-opacity:.45;stroke-width:1px}
.auth .iso .rail{stroke-width:1.5px}
.auth .iso .glow{stroke:none;opacity:.6}
.auth .iso .fascia-word{fill:#FFFFFF;stroke:none;font:700 12px/1 'Bricolage Grotesque','Hanken Grotesk',Arial,sans-serif;letter-spacing:3.5px}

/* the lights come on once */
@media (prefers-reduced-motion:no-preference){
  .auth .iso .glow{opacity:0;animation:s3-glow 2.6s ease-out .5s forwards}
  .auth .iso .bulb{animation:s3-bulb 2.6s ease-out .5s both}
}
@keyframes s3-glow{0%{opacity:0}35%{opacity:1}100%{opacity:.6}}
@keyframes s3-bulb{0%{fill:#E9E6DE}35%{fill:#FFFFFF}100%{fill:#FFF8E6}}

/* three stages: white cards, a dot each, no tinted backgrounds */
.auth .life{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:760px}
.auth .life-step{position:relative;display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:10px;row-gap:1px;align-content:start;min-height:0;padding:13px 14px 14px;border-radius:12px;background:#FFFFFF;border:1px solid var(--s3-line)}
.auth .life-step::before{display:none}
.auth .life-step>*{grid-column:2}
.auth .life-dot{grid-column:1;grid-row:1;width:8px;height:8px;border-radius:50%;margin-top:6px}
.auth .life-open .life-dot{background:var(--s3-open)}
.auth .life-vm .life-dot{background:var(--s3-vm)}
.auth .life-snag .life-dot{background:var(--s3-snag)}
.auth .life-step b{grid-row:1;font-family:var(--display,'Bricolage Grotesque'),sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--s3-ink)}
.auth .life-mod{font-size:12px;font-weight:600;color:var(--mute,#5F5D58)}
.auth .life-text{font-size:12.5px;line-height:1.45;color:var(--ink2,#3B3A36);margin-top:4px}
.auth .auth-hero .auth-foot{margin-top:16px;padding-top:0;line-height:16px;font-size:12px;color:var(--mute,#5F5D58)}

/* right: white card on the page */
.auth .auth-side{background:transparent;border-left:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 48px 40px 24px}
.auth .auth-brand-phone{display:none}
.auth .auth-card{width:100%;max-width:400px;background:#FFFFFF;border:1px solid var(--s3-line);border-radius:16px;box-shadow:0 1px 2px rgba(26,26,26,.04);padding:32px 30px}
.auth .auth-card h2{font-size:28px}

@media (max-width:1180px){
  .auth .auth-hero{padding:32px 28px 28px 36px}
  .auth .store3d{width:min(100%,760px,calc((100vh - 440px) * 1.21))}
  .auth .life{grid-template-columns:1fr;max-width:640px}
  .auth .life-step{padding:11px 14px}
  .auth .life-text{margin-top:2px}
}

/* phones and narrow tablets: sign in first, then the drawing, then the stages */
@media (max-width:860px){
  .auth{display:flex;flex-direction:column;min-height:0}
  .auth .auth-side{order:1;padding:20px 16px 8px;align-items:stretch;gap:18px;border-bottom:none}
  .auth .auth-brand-phone{display:flex}
  .auth .auth-card{max-width:none;padding:24px 18px}
  .auth .auth-card h2{font-size:26px}
  .auth .auth-hero{order:2;padding:12px 16px 32px}
  .auth .auth-hero .brand{display:none}
  .auth .auth-hero .auth-foot{display:none}
  .auth .store3d{width:100%;min-width:0;max-width:560px;margin:8px auto 16px;align-self:center}
  .auth .life{margin:0 auto}
  .auth .life{max-width:560px}
}
@media (max-width:560px){
  .auth{--s3-stroke:1px}
}

/* The module dot sits on the stage title; no second dot before the module name (D313). */
.auth .life-mod::before{display:none}