/* account.css — the sign-in front door (approved Aug 11 2026, mockups/accounts/signin.html).
   Styles lifted from the approved mockup's account.css; do not restyle.
   Loads AFTER styles.css and leans on its tokens (:root vars, .wordmark, .skip-link). */

.ed-input{border:1.5px solid var(--line-strong);border-radius:10px;padding:12px 13px;font-size:16px;background:var(--bg);width:100%;font-family:inherit;color:var(--ink)}
.ed-input:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}

/* Held-paint guard: the head script sets .auth-routing before first paint and
   go() (or its 2.5s failsafe) lifts it — pass-through visits bounce to the
   board without ever flashing the forms. */
.auth-routing .auth-shell{visibility:hidden}
.auth-shell{display:grid;min-height:100svh;grid-template-rows:auto 1fr}
@media (min-width:980px){.auth-shell{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.auth-top{background:linear-gradient(180deg,var(--navy),var(--navy-deep));padding:14px 20px}
.auth-top .wordmark{color:#fff}
.auth-top .wordmark em{color:var(--gold-straw)}
@media (min-width:980px){.auth-top{display:none}}
/* The photo side (Jack's pick, Aug 11 2026 — "N2"): golden-hour rounds on rolling hills.
   Unsplash photo-1751640029449-39ee462e18e7 by Nathan Field, Unsplash Licence. */
.auth-side{position:relative;display:none;overflow:clip;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 36%),
    url("/assets/signin-golden-hour.jpg") center/cover no-repeat,
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
}
@media (min-width:980px){.auth-side{display:flex;flex-direction:column;justify-content:flex-start;padding:64px 56px}}
.auth-side .wordmark{color:var(--ink)}
.auth-side .wordmark em{color:var(--gold)}
.auth-side .as-inner{max-width:560px}
.auth-side .as-line{color:var(--ink);font-size:15px;max-width:44ch;margin:14px 0 26px}

.auth-main{display:flex;align-items:center;justify-content:center;padding:44px 20px 56px}
.auth-box{width:100%;max-width:400px}
.auth-box h1{font-family:var(--serif);font-weight:700;font-size:30px;letter-spacing:-0.018em;margin:0 0 5px}
.auth-sub{color:var(--muted);font-size:14px;margin:0 0 24px}
.astate{display:none}
.astate.on{display:block;animation:vfade 140ms var(--ease-out)}
@keyframes vfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.astate.on{animation:none}}
.afield{margin-top:14px}
.afield label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.afield .lab-note{font-weight:400;color:var(--muted)}
.pw-wrap{position:relative}
.pw-wrap .ed-input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--primary);font-size:12.5px;font-weight:600;padding:8px 10px;min-height:40px;cursor:pointer;font-family:inherit;border-radius:8px}
.pw-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.aerr{display:none;color:var(--high);font-size:13px;margin-top:6px}
.aerr.on{display:block}
.ed-input.invalid{border-color:var(--high)}
.auth-btn{width:100%;margin-top:20px;background:var(--primary);color:#fff;border:0;border-radius:10px;padding:14px;min-height:48px;font-weight:600;font-size:15px;font-family:inherit;cursor:pointer;transition:transform 160ms var(--ease-out),background 150ms ease}
.auth-btn:active{transform:scale(0.98)}
.auth-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.auth-btn[aria-busy="true"]{opacity:0.7;pointer-events:none}
@media (hover:hover) and (pointer:fine){.auth-btn:hover{background:var(--primary-ink)}}
.auth-alt{margin-top:20px;font-size:13.5px;color:var(--muted)}
.auth-alt a{font-weight:600}
.auth-alt+.auth-alt{margin-top:10px}
.auth-ok{display:none;background:var(--good-bg);color:var(--good);border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600;margin-top:16px}
.auth-ok.on{display:block}
.auth-foot{margin-top:34px;font-size:12.5px;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);background:var(--navy);color:#fff;border-radius:12px;padding:12px 18px;font-size:13.5px;font-weight:600;box-shadow:0 18px 44px -12px rgba(10,26,52,0.55);opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);z-index:60;max-width:calc(100vw - 40px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── Continue with Google (S3, Aug 29 2026 — Grok round 2). The panel has carried this
   button since launch; the account page's own panes now match, so the document at the
   URL every "Create a free account" link advertises offers the same doors the panel
   does. Order mirrors panel.js authFormHtml: Google, the clickwrap line, then email. */
.gauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--bg);font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.gauth:hover{border-color:var(--primary)}
.gauth:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.gauth svg{width:18px;height:18px;flex:none}
.gauth-tos{font-size:12.5px;color:var(--muted);margin:10px 0 0;text-align:center}
.gauth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:18px 0 4px;text-transform:uppercase;letter-spacing:0.05em}
.gauth-or::before,.gauth-or::after{content:"";height:1px;background:var(--line-strong);flex:1}


/* ============================================================
   R7 SKIN — S3 step 5 (Sep 3 2026): the sign-in door. Drawing:
   mockups-s2/src/looks/r7-home/pages.mjs (signin): the dark bar, one
   photograph with a flat scrim, one white card in the middle. Same
   account.html, same states (sign in, create, reset, check your email,
   expired, resend, new password), same auth.js. The old photo column is
   retired: the photo is the whole ground now.
   ============================================================ */
.auth-shell{position:relative;isolation:isolate;min-height:100svh;grid-template-rows:auto 1fr;grid-template-columns:none!important;background:url("/assets/signin-golden-hour.jpg") center/cover no-repeat,var(--slate-800)}
.auth-shell::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(17,20,25,.55)}
.auth-side{display:none!important}
.auth-top{display:flex!important;align-items:center;height:56px;padding:0 24px;background:var(--slate-800)}
.auth-top .wordmark{color:var(--on-dark);font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.02em}
.auth-top .wordmark em{color:var(--gold)}
.auth-top .wordmark img{height:24px}
.auth-main{padding:56px 24px 64px}
.auth-box{max-width:420px;background:#fff;border-radius:12px;padding:30px 30px 26px;box-shadow:0 1px 2px rgba(0,0,0,.2),0 30px 70px -30px rgba(0,0,0,.8)}
.auth-box h1{font-family:var(--sans);font-size:28px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.auth-sub{font-size:15px;margin:0 0 18px}
.gauth{border:1px solid rgba(24,30,40,.2);border-radius:10px;height:46px;padding:0 16px;font-size:15px;font-weight:600;color:var(--ink);background:#fff}
.gauth:hover{border-color:var(--ink)}
.gauth:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.gauth-tos{font-size:13px}
.gauth-or{font-size:13px;font-weight:600;letter-spacing:.06em;margin:16px 0 4px}
.gauth-or::before,.gauth-or::after{background:rgba(24,30,40,.12)}
.afield{margin-top:12px}
.afield label{font-size:13.5px;font-weight:600;color:var(--muted)}
.ed-input{border:1px solid rgba(24,30,40,.2);border-radius:10px;height:44px;padding:0 13px;font-size:16px;color:var(--ink);background:#fff}
.ed-input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink);box-shadow:none}
.ed-input.invalid{border-color:var(--high)}
.pw-toggle{color:var(--ink);font-size:13px;border-radius:8px}
.pw-toggle:focus-visible{outline-color:var(--ink)}
.aerr{font-size:13px;color:var(--high)}
.auth-btn{margin-top:18px;background:var(--gold);color:var(--ink);border-radius:10px;min-height:46px;padding:0 16px;font-size:15px;font-weight:600}
.auth-btn:focus-visible{outline-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.auth-btn:hover{background:var(--gold-hover)}}
.auth-alt{font-size:14px;color:var(--muted);text-align:center;margin-top:16px}
.auth-alt a{color:var(--ink);font-weight:600}
.auth-alt+.auth-alt{margin-top:8px}
.auth-ok{background:var(--good-bg);color:var(--good);border-radius:10px;font-size:14px}
.auth-foot{font-size:13px;text-align:center;margin-top:24px}
.toast{background:var(--slate-800);color:var(--on-dark);border-radius:10px;font-size:14px;box-shadow:0 18px 44px -12px rgba(0,0,0,.55)}
@media (max-width:640px){.auth-top{padding:0 20px}.auth-main{padding:28px 20px 48px}.auth-box{padding:24px 20px 22px}}

/* ============================================================
   S3 REBUILD (Sep 3 2026): the sign-in door as drawn (mockups-s2
   signin.html, checklist docs/s3-checklists/signin.md). The page now
   carries the full R7 nav (styles.css part A) above the photo; the
   photo section is the viewport minus the bar; the card is a 12px
   grid with the small print last. Same states, same auth.js.
   ============================================================ */
.auth-shell{min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));grid-template-rows:1fr}
.auth-main{display:grid;place-items:center;padding:56px 24px}
.auth-box{display:block}
.astate.on{display:grid;gap:12px}
.auth-box h1{margin:0}
.auth-sub{margin:-4px 0 6px}
.gauth{margin:0}
.gauth-or{margin:4px 0}
.afield{margin:0}
.afield label{margin-bottom:6px}
.auth-btn{margin-top:4px}
.auth-alt{margin:0}
.auth-alt+.auth-alt{margin:0}
.gauth-tos{margin:2px 0 0;text-align:center}
.gauth-tos a{color:var(--ink);font-weight:600}
.auth-ok{margin:0}
.pw-toggle{color:var(--muted);font-size:13.5px;font-weight:600}
@media (max-width:640px){.auth-main{padding:56px 24px}.auth-box{padding:30px 30px 26px}}
/* reviewer fixes (Sep 3) */
.astate.on form{display:grid;gap:12px}
.auth-box{border:1px solid #E2E6EC}
.auth-alt a,.gauth-tos a{text-decoration:none}
.auth-alt a:hover,.gauth-tos a:hover{text-decoration:underline;text-underline-offset:3px}
.auth-btn{height:44px;min-height:44px;padding:0 20px;border:1px solid var(--gold)}
.auth-btn:active{transform:none}
@media (hover:hover) and (pointer:fine){.auth-btn:hover{background:var(--gold-hover);border-color:var(--gold-hover)}}
.pw-toggle{right:0;padding:8px 12px}
/* controls pass (Sep 3): the busy button is disabled and says so; a real checkbox size; hover on Show */
.auth-btn:disabled{opacity:.55;cursor:not-allowed}
.pw-toggle:hover{color:var(--ink);background:rgba(24,30,40,.05);border-radius:8px}
#upTos{width:20px;height:20px}
.tosck{min-height:44px;align-items:center}
@media (max-width:640px){.pw-toggle{min-height:44px}}