/* ============================================================
   auth.css — Sign In / Sign Up / Onboarding split-screen page.
   Reuses the shared CSS variables + .field/.btn/.card rules from
   styles.css (linked before this file on auth.html) so dark mode
   and form styling stay consistent with the rest of the app.
   ============================================================ */

html,body{height:100%;}
body{background:var(--bg);}

.auth-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Left brand panel ---------- */
/* Vertical rhythm here is deliberately tight: the logo (360x256) plus the five
   security cards used to total 768px, which pushed "Family Privacy" below the
   fold on a 674px-tall window. Trimming the panel padding, the logo gap, the
   card gap and the card padding brings the stack to ~660px with the logo left
   at full size. Horizontal padding is unchanged. */
.auth-brand{
  flex:0 0 38%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 40px;
  background:#0a1220;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.auth-brand-inner{
  max-width:440px;
  position:relative;
  z-index:1;
}
.auth-brand-logo-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:20px;
}
.auth-brand-logo-combined{width:100%;max-width:360px;height:auto;display:block;}
/* The image is width:100%, so its shine wrapper carries the sizing the image
   previously took from .auth-brand-logo-block directly. The shine itself is
   defined once in styles.css (.logo-shine) and needs nothing per-logo. */
.auth-brand-logo-block .logo-shine{display:block;width:100%;max-width:360px;}
.auth-security-panel{
  display:grid;
  gap:9px;
}
.auth-security-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:9px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  /* Hover treatment below needs a positioning context for the glow/sheen
     pseudo-elements, and overflow clipping so the sheen stays inside the
     rounded corners as it sweeps past. */
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),
             background-color .26s ease,
             border-color .26s ease,
             box-shadow .26s ease;
}
/* Keep the icon + text above the ::before glow and ::after sheen. */
.auth-security-item > *{position:relative;z-index:1;}

/* Warm gold glow, fades in from the icon side. */
.auth-security-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 140% at 12% 50%,
    rgba(200,153,46,.24), rgba(200,153,46,0) 62%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
/* Angled sheen that sweeps left-to-right once per hover. Same construction as
   styles.css's .stat-card-active::after / .bs-networth-footer::before sweeps
   (75deg gradient, left:-60% -> 115%, no skew), tinted gold instead of white
   so it reads against the navy panel. */
.auth-security-item::after{
  content:'';
  position:absolute;top:0;left:-60%;
  width:45%;height:100%;
  pointer-events:none;
  background:linear-gradient(75deg, transparent 0%, rgba(232,198,110,.30) 45%, rgba(255,246,216,.52) 50%, rgba(232,198,110,.30) 55%, transparent 100%);
  opacity:0;
}
.auth-security-item:hover{
  transform:translateY(-3px) scale(1.035);
  background:rgba(255,255,255,.10);
  border-color:rgba(200,153,46,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.38),
             0 0 22px rgba(200,153,46,.18);
  z-index:2;
}
.auth-security-item:hover::before{opacity:1;}
.auth-security-item:hover::after{animation:auth-security-sheen 1.6s ease-out;}

@keyframes auth-security-sheen{
  0%{left:-60%;opacity:0;}
  15%{opacity:1;}
  70%{opacity:.9;}
  100%{left:115%;opacity:0;}
}

.auth-security-icon{
  font-size:18px;
  width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:rgba(200,153,46,.18);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),
             background-color .26s ease,
             box-shadow .26s ease;
}
.auth-security-item:hover .auth-security-icon{
  transform:scale(1.14) rotate(-4deg);
  background:rgba(200,153,46,.36);
  box-shadow:0 0 14px rgba(200,153,46,.38);
}
.auth-security-text-title{
  font-weight:700;font-size:13.2px;color:#fff;
  transition:color .26s ease;
}
.auth-security-text-sub{
  font-size:11.8px;color:rgba(255,255,255,.62);margin-top:1px;
  transition:color .26s ease;
}
.auth-security-item:hover .auth-security-text-title{color:#e8c66e;}
.auth-security-item:hover .auth-security-text-sub{color:rgba(255,255,255,.80);}

/* Respect a reduced-motion preference: keep the colour shift (it carries the
   hover affordance) but drop the movement and the sweeping sheen. */
@media (prefers-reduced-motion: reduce){
  .auth-security-item,
  .auth-security-icon,
  .auth-security-text-title,
  .auth-security-text-sub{transition:none;}
  .auth-security-item:hover{transform:none;}
  .auth-security-item:hover .auth-security-icon{transform:none;}
  .auth-security-item:hover::after{animation:none;}
}

/* ---------- Right panel ---------- */
.auth-panel{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:var(--bg);
}
.auth-panel-inner{
  width:100%;
  max-width:440px;
}
.auth-header-brand{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:28px;
}
.auth-header-logo-combined{height:150px;width:auto;max-width:100%;}
/* Light-mode version has its own flat background baked in (matched exactly
   to --bg in light mode) rather than real transparency, so it only merges
   seamlessly against the light panel - dark mode keeps the genuinely
   transparent logo-combined.png instead, which adapts to any background. */
.auth-header-logo-light{display:block;}
.auth-header-logo-dark{display:none;}
:root[data-theme="dark"] .auth-header-logo-light{display:none;}
:root[data-theme="dark"] .auth-header-logo-dark{display:block;}
/* The light-mode header logo sits on a pale background rather than navy, so
   `overlay` there would darken as much as it lightens. `soft-light` with a
   warmer band keeps it reading as a gentle sheen on that variant only. */
.shine-combined-white::after{
  mix-blend-mode:soft-light;
  background:linear-gradient(100deg,
    transparent 40%,
    rgba(255,214,120,.55) 47%,
    rgba(255,190,60,.95) 50%,
    rgba(255,214,120,.55) 53%,
    transparent 60%);
  background-size:260% 100%;
  background-repeat:no-repeat;
}

.auth-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-md);
  padding:32px;
}
.auth-title{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-style:normal;
  font-size:26px;font-weight:600;color:var(--text-900);margin:0 0 4px;
}
.auth-subtitle{
  font-size:13.4px;color:var(--text-400);margin:0 0 24px;
}

/* Sign In / Sign Up tabs */
.auth-tabs{
  display:flex;
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
}
.auth-tab{
  flex:1;
  text-align:center;
  padding:10px 0 12px;
  font-size:14px;font-weight:700;color:var(--text-400);
  cursor:pointer;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .12s ease, border-color .12s ease;
}
.auth-tab.active{
  color:var(--text-900);
  border-bottom-color:var(--gold-500);
}

/* styles.css only styles input[type=text/number/date/email/tel] — this
   page is the app's first use of password fields, so add that case here. */
.field input[type=password]{
  border:1px solid var(--border);
  border-radius:7px;
  padding:8px 34px 8px 10px;
  font-size:13.4px;
  font-family:inherit;
  background:var(--card);
  color:var(--text-900);
  width:100%;
}
.field-password-wrap{position:relative;}
.field-password-toggle{
  position:absolute;top:50%;right:2px;transform:translateY(-50%);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  color:var(--text-400);
  border-radius:6px;
  opacity:.85;
}
.field-password-toggle:hover{opacity:1;background:var(--subtle-bg);}

.auth-field-error{
  font-size:11.8px;color:var(--red);margin-top:5px;
}
.auth-form-error{
  font-size:12.6px;color:var(--red);background:var(--red-bg);
  border-radius:8px;padding:9px 12px;margin-bottom:16px;
}
.auth-form-note{
  font-size:12.2px;color:var(--text-400);background:var(--subtle-bg);
  border-radius:8px;padding:9px 12px;margin-bottom:16px;
}
.auth-row-between{
  display:flex;align-items:center;justify-content:space-between;
  margin:2px 0 20px;font-size:13px;
}
.auth-checkbox-row{
  display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text-600);
}
.auth-checkbox-row input{margin-top:3px;}
/* Privacy Policy / Terms of Service links in the agreement line (auth.js
   legalAgreeTextHtml). Underlined, not just coloured, so they read as links
   and not as emphasis. */
.auth-legal-link{color:var(--gold-600);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.auth-legal-link:hover{text-decoration-thickness:2px;}
.auth-link{
  color:var(--gold-600);font-weight:600;cursor:pointer;text-decoration:none;
  background:none;border:none;padding:0;font-size:inherit;
}
.auth-link:hover{text-decoration:underline;}
/* Primary CTA. The lift + sweeping sheen match the left panel's security
   cards, so the page's two "premium" moments animate identically. Applies to
   every .auth-submit (Sign In, Create Account, Verify OTP, ...) since they are
   all the same gold CTA. The band stays white here - it has to read against
   .btn-gold's gold fill, not the navy panel. */
.auth-submit{
  width:100%;justify-content:center;margin-top:6px;
  position:relative;overflow:hidden;
}
.auth-submit::after{
  content:'';
  position:absolute;top:0;left:-60%;
  width:45%;height:100%;
  pointer-events:none;
  background:linear-gradient(75deg, transparent 0%, rgba(255,255,255,.32) 45%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.32) 55%, transparent 100%);
  opacity:0;
}
.auth-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(200,153,46,.42),
             0 0 20px rgba(200,153,46,.26);
}
.auth-submit:hover::after{animation:auth-submit-sheen 1.6s ease-out;}
/* styles.css's .btn:active press feedback is same-specificity and loses to the
   :hover rule above (this file loads later), so restate it with the lift. */
.auth-submit:active{transform:translateY(-1px) scale(.98);}

@keyframes auth-submit-sheen{
  0%{left:-60%;opacity:0;}
  15%{opacity:1;}
  70%{opacity:.9;}
  100%{left:115%;opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .auth-submit:hover{transform:none;}
  .auth-submit:hover::after{animation:none;}
}
.auth-switch-line{
  text-align:center;font-size:13px;color:var(--text-400);margin-top:20px;
}

/* PIN Code Auto-Fetch — Onboarding Step 2's read-only address summary.
   The shared .field-hint-error/.field-hint-success/.searchselect* rules
   moved to styles.css since index.html (Family Head/Member address
   editing) doesn't load this auth-page-only stylesheet. */
.auth-address-summary{
  font-size:12.6px;color:var(--text-600);background:var(--subtle-bg);
  border-radius:8px;padding:9px 12px;margin-bottom:16px;
}

/* OTP screen */
.field input.auth-otp-input{
  width:100%;
  font-size:26px;
  letter-spacing:10px;
  text-align:center;
  font-weight:700;
  padding:14px 10px;
  color:var(--text-900);
}
.auth-otp-meta{
  font-size:12.6px;color:var(--text-400);text-align:center;margin:14px 0 22px;
  line-height:1.6;
}
.auth-otp-timer{
  text-align:center;font-size:12.6px;color:var(--text-400);margin-top:16px;
}
.auth-back-row{
  margin-bottom:16px;
}

/* Onboarding stepper */
.auth-stepper{
  display:flex;align-items:center;margin-bottom:28px;
}
.auth-step{
  display:flex;align-items:center;flex:1;
}
.auth-step-dot{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12.6px;font-weight:800;
  background:var(--subtle-bg);color:var(--text-400);
  border:2px solid var(--border);
  flex-shrink:0;
}
.auth-step.done .auth-step-dot{background:var(--green);border-color:var(--green);color:#fff;}
.auth-step.active .auth-step-dot{background:var(--gold-500);border-color:var(--gold-500);color:#1a1305;}
.auth-step-line{flex:1;height:2px;background:var(--border);margin:0 6px;}
.auth-step.done + .auth-step .auth-step-line, .auth-step-line.done{background:var(--green);}

.auth-wizard-title{font-size:18px;font-weight:800;color:var(--text-900);margin:0 0 4px;}
.auth-wizard-sub{font-size:13px;color:var(--text-400);margin:0 0 20px;}
.auth-char-counter{font-size:11px;color:var(--text-400);text-align:right;margin-top:3px;}

.auth-wizard-actions{
  display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:10px;
}
.auth-wizard-actions-right{display:flex;gap:10px;}

/* Review & Submit summary */
.auth-summary-card{
  border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:14px;
}
.auth-summary-card-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
}
.auth-summary-card-head h4{margin:0;font-size:13.6px;font-weight:800;color:var(--text-900);}
.auth-summary-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;
}
.auth-summary-item-label{font-size:11px;color:var(--text-400);text-transform:uppercase;letter-spacing:.03em;}
.auth-summary-item-value{font-size:13.4px;color:var(--text-900);font-weight:600;margin-top:2px;}

/* Success screen */
.auth-success{text-align:center;padding:20px 6px;}
.auth-success-icon{font-size:48px;margin-bottom:14px;}
.auth-success h2{font-size:20px;font-weight:800;color:var(--text-900);margin:0 0 10px;}
.auth-success p{font-size:13.6px;color:var(--text-400);margin:0 0 26px;line-height:1.6;}

@media (max-width: 900px){
  .auth-shell{flex-direction:column;}
  .auth-brand{flex:none;padding:36px 24px;}
  .auth-panel{padding:32px 20px;}
  .auth-summary-grid{grid-template-columns:1fr;}
}

/* ---------- Typography (Font Style spec, extended to the whole auth page:
   Sign In, Sign Up, Forgot Password, OTP, and onboarding all render inside
   this same .auth-panel/.auth-brand markup, so scoping to those containers
   covers every screen without touching the rest of the app's forms. .field
   label/input are the app's SHARED global form classes (used on every
   Asset/Liability/etc. form too) - scoped here with .auth-panel so this
   page's fields get the elegant serif treatment without changing every
   other form in the app that also uses .field. ---------- */
.auth-security-text-title,
.auth-security-text-sub,
.auth-tab,
.auth-subtitle,
.auth-checkbox-row,
.auth-link,
.auth-switch-line,
.auth-submit,
.auth-form-note,
.auth-otp-meta,
.auth-otp-timer,
.auth-wizard-sub,
.auth-summary-item-label,
.auth-summary-item-value,
.auth-panel .field label,
.auth-panel .field-hint{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-style:normal;
}
.auth-panel .field input[type=text],
.auth-panel .field input[type=email],
.auth-panel .field input[type=tel],
.auth-panel .field input[type=password],
.auth-panel .field input[type=number],
.auth-panel .field input[type=date],
.auth-panel .field select{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-style:normal;
  font-size:14.5px;
}
.auth-security-text-title{font-size:14.5px;}
.auth-tab{font-size:15.5px;}
.auth-subtitle{font-size:14.5px;}
.auth-panel .field label{font-size:13.4px;}

/* ---------- Back to the public site ----------
   Both logos link to "/" (home.html), and the Home button sits in the top-left
   corner of the dark brand panel - so it is styled for that navy ground
   (translucent white on a blur, gold on hover), not for the light form panel.
   The brand panel stacks above the form below 900px, so the button stays in
   the same top-left corner at every width. */
.auth-logo-home{display:inline-block;text-decoration:none;color:inherit;cursor:pointer;}
.auth-logo-home:hover{filter:brightness(1.06);}
.auth-brand{position:relative;}
.auth-home-link{
  position:absolute;top:20px;left:22px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:20px;
  font-size:12.8px;font-weight:600;letter-spacing:.01em;text-decoration:none;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(2px);
  transition:transform .18s ease-out, border-color .18s ease-out, color .18s ease-out, background .18s ease-out;
}
.auth-home-link:hover{
  transform:translateX(-2px);
  color:#f0d79a;
  background:rgba(255,255,255,.12);
  border-color:rgba(240,215,154,.5);
}
.auth-home-link:focus-visible{outline:2px solid rgba(240,215,154,.8);outline-offset:2px;}
@media (max-width: 900px){
  .auth-home-link{top:14px;left:14px;padding:7px 13px;}
}