/* ============================================================================
   Auth family — login.php · reset.php · mfa.php (pre-login, no app chrome).
   Loaded after genesis.css, so it can lean on the shared tokens. All element
   selectors are scoped under .auth-* containers — never bare input/select —
   so nothing here can leak into the shared chrome on other screens.
   ============================================================================ */

/* full-height split: brand aside (wide screens) + form panel */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--bg)}

/* ---- left brand aside (hidden on narrow) ---- */
.auth-aside{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:44px;color:#fff;
  background:linear-gradient(150deg,#4F46E5 0%,#6366F1 48%,#7C7BF5 100%);
}
.auth-aside::after{ /* soft mesh glow */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(440px 440px at 82% 12%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(560px 560px at 8% 96%,rgba(0,0,0,.18),transparent 55%);
}
.auth-aside>*{position:relative;z-index:1}
/* animated canvas layer — behind the brand/pitch content (defined after .auth-aside>* to win the tie) */
.auth-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.auth-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;font-size:20px}
.auth-brand .mark{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;backdrop-filter:blur(4px)}
.auth-brand .mark svg{width:17px;height:17px}
.auth-brand .mark.logo{background:#fff;padding:3px;box-sizing:border-box;backdrop-filter:none}
/* white logo on the dark aside — bare, no chip */
.auth-brand .mark.logo-white{background:none;backdrop-filter:none;padding:0}
.auth-pitch{max-width:30ch}
.auth-pitch h2{font-size:30px;line-height:1.12;letter-spacing:-.03em;color:#fff;font-weight:600}
.auth-pitch p{margin-top:14px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.82)}
.auth-points{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.auth-points li{display:flex;align-items:center;gap:11px;font-size:14px;color:rgba(255,255,255,.92);list-style:none}
.auth-points .tick{width:22px;height:22px;flex:none;border-radius:var(--r-pill);background:rgba(255,255,255,.18);display:grid;place-items:center}
.auth-points .tick svg{width:13px;height:13px}
.auth-foot-note{font-size:12.5px;color:rgba(255,255,255,.62)}

/* ---- right form panel ---- */
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{width:100%;max-width:392px}
.auth-card .card-brand{display:none;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;font-size:18px;margin-bottom:28px}
.auth-card .card-brand .mark{width:26px;height:26px;border-radius:7px;background:var(--inverse);display:grid;place-items:center;color:var(--inverse-text)}
.auth-card .card-brand .mark svg{width:15px;height:15px}
.auth-card .card-brand .mark.logo{background:#fff;padding:2px;box-sizing:border-box}

.auth-head{margin-bottom:26px}
.auth-head .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--primary);font-weight:600;margin-bottom:12px}
.auth-head .eyebrow svg{width:13px;height:13px}
.auth-head h1{font-size:27px;letter-spacing:-.035em}
.auth-head p{margin-top:9px;color:var(--text-2);font-size:14.5px;line-height:1.5}
.auth-head p b{color:var(--text);font-weight:600}

/* ---- fields ---- */
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-field{display:flex;flex-direction:column;gap:7px}
.auth-field label{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center}
.auth-field .lbl-link{margin-left:auto;font-size:12.5px;font-weight:500}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input>svg{position:absolute;left:12px;width:16px;height:16px;color:var(--neutral);pointer-events:none}
.auth-input input[type=text],
.auth-input input[type=email],
.auth-input input[type=password]{
  width:100%;height:44px;padding:0 12px 0 38px;border:1px solid var(--border);border-radius:var(--r-btn);
  background:var(--surface);font-family:inherit;font-size:14.5px;color:var(--text);transition:border-color .15s,box-shadow .15s;
}
.auth-input input::placeholder{color:var(--neutral)}
.auth-input input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.auth-input.has-toggle input{padding-right:44px}
.auth-input .peek{position:absolute;right:6px;width:32px;height:32px;border-radius:var(--r-btn);border:none;background:none;display:grid;place-items:center;color:var(--neutral);cursor:pointer;transition:background .14s,color .14s}
.auth-input .peek:hover{background:var(--gray-100);color:var(--text)}
.auth-input .peek svg{width:17px;height:17px}
.auth-input .peek .eye-off{display:none}
.auth-input.show .peek .eye-on{display:none}
.auth-input.show .peek .eye-off{display:block}

/* remember + helper rows */
.auth-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-2)}
.auth-check{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;border:1px solid var(--border);border-radius:5px;background:var(--surface);cursor:pointer;display:grid;place-items:center;transition:background .14s,border-color .14s}
.auth-check:checked{background:var(--primary);border-color:var(--primary)}
.auth-check:checked::after{content:"";width:10px;height:10px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.auth-check:focus-visible{outline:none;box-shadow:var(--ring)}
.auth-row label{cursor:pointer}

/* ---- buttons ---- */
.auth-btn{height:46px;border-radius:var(--r-btn);border:none;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:filter .15s,background .15s,box-shadow .15s,transform .05s}
.auth-btn svg{width:17px;height:17px}
.auth-btn:active{transform:translateY(1px)}
.auth-btn.primary{background:var(--primary);color:#fff;box-shadow:var(--glow-primary)}
.auth-btn.primary:hover{background:var(--primary-hover)}
.auth-btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.auth-btn.ghost:hover{background:var(--gray-100)}
.auth-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}

/* footer link line */
.auth-alt{margin-top:24px;text-align:center;font-size:14px;color:var(--text-2)}
.auth-alt a{font-weight:600}
.auth-back{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-size:13.5px;font-weight:500;color:var(--text-2)}
.auth-back:hover{color:var(--text)}
.auth-back svg{width:15px;height:15px}

/* legal foot */
.auth-legal{margin-top:28px;text-align:center;font-size:11.5px;color:var(--neutral);line-height:1.5}

/* ---- OTP / MFA digit boxes ---- */
.otp{display:flex;gap:10px;justify-content:space-between}
.otp input{
  flex:1;min-width:0;height:58px;text-align:center;font-family:var(--font-mono);font-size:24px;font-weight:500;color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface);transition:border-color .15s,box-shadow .15s;
}
.otp input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.otp input.filled{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.05)}
.otp.bad input{border-color:var(--error);animation:otp-shake .4s}
@keyframes otp-shake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.otp-meta{display:flex;align-items:center;justify-content:space-between;margin-top:2px;font-size:13px;color:var(--text-2)}
.otp-resend{border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--primary);cursor:pointer;padding:0}
.otp-resend[disabled]{color:var(--neutral);cursor:not-allowed;font-weight:500}

/* ---- password strength meter (reset → set new) ---- */
.pw-meter{display:flex;gap:5px;margin-top:9px}
.pw-meter .seg{flex:1;height:5px;border-radius:var(--r-pill);background:var(--gray-200);transition:background .2s}
.pw-hint{margin-top:7px;font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.pw-hint .dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--neutral)}
.pw-s1 .seg:nth-child(-n+1){background:var(--error)}        .pw-s1 .pw-hint{color:var(--error)}        .pw-s1 .pw-hint .dot{background:var(--error)}
.pw-s2 .seg:nth-child(-n+2){background:var(--warning)}      .pw-s2 .pw-hint{color:var(--warning)}      .pw-s2 .pw-hint .dot{background:var(--warning)}
.pw-s3 .seg:nth-child(-n+3){background:#3B82F6}             .pw-s3 .pw-hint{color:#3B82F6}             .pw-s3 .pw-hint .dot{background:#3B82F6}
.pw-s4 .seg{background:var(--success)}                      .pw-s4 .pw-hint{color:var(--success)}      .pw-s4 .pw-hint .dot{background:var(--success)}

/* ---- success / sent state (reset request, etc.) ---- */
.auth-success{text-align:center;display:flex;flex-direction:column;align-items:center}
.auth-success[hidden]{display:none}  /* author display:flex would otherwise beat the UA [hidden] rule */
.auth-success .seal{width:62px;height:62px;border-radius:var(--r-pill);background:rgba(16,185,129,.12);color:var(--success);display:grid;place-items:center;margin-bottom:20px}
.auth-success .seal svg{width:30px;height:30px}
.auth-success h1{font-size:24px;letter-spacing:-.03em}
.auth-success p{margin-top:10px;color:var(--text-2);font-size:14.5px;line-height:1.55;max-width:34ch}
.auth-success .to{margin-top:4px;font-weight:600;color:var(--text)}
.auth-success .auth-form{width:100%;margin-top:24px}

/* ---- passkey enrolment offer (enroll-passkey.php) ---- */
.auth-hero{width:60px;height:60px;border-radius:16px;margin-bottom:22px;display:grid;place-items:center;color:var(--primary);background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.22)}
.auth-hero svg{width:30px;height:30px}
.enroll-points{margin:22px 0 26px;display:flex;flex-direction:column;gap:12px;list-style:none}
.enroll-points li{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text-2)}
.enroll-points li b{color:var(--text);font-weight:600}
.enroll-points .tk{width:22px;height:22px;flex:none;border-radius:var(--r-pill);background:rgba(16,185,129,.12);color:var(--success);display:grid;place-items:center}
.enroll-points .tk svg{width:12px;height:12px}
.enroll-actions{display:flex;flex-direction:column;gap:10px}
.enroll-offer[hidden]{display:none}

/* small inline note (e.g. demo hint) */
.auth-note{margin-top:14px;display:flex;gap:9px;padding:11px 13px;border-radius:var(--r-btn);background:var(--gray-100);border:1px solid var(--border);font-size:12.5px;color:var(--text-2);line-height:1.5}
.auth-note svg{width:15px;height:15px;flex:none;color:var(--neutral);margin-top:1px}
.auth-note b{color:var(--text);font-weight:600}

/* ---- responsive: collapse the aside ---- */
@media (max-width:880px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-card .card-brand{display:flex}
}
@media (prefers-reduced-motion:reduce){.otp.bad input{animation:none}.auth-btn,.auth-input input,.otp input{transition:none}}