/*
 * Auth pages — /login, /register, /forgot, /reset, /verify/resend,
 * /login/magic, /login/2fa.
 *
 * Lives outside app.css so /login + /register can share one cached file
 * across visits, and so we never block a tiny auth page on the large
 * dashboard stylesheet. Pair with <link rel="stylesheet" href=".../auth.css">
 * AFTER app.css in each view.
 */

/* ----- Header row: brand on left, secondary link on right ---------- */
.auth-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.brand-link{text-decoration:none;display:inline-block}
.auth-head-alt{font-size:12.5px;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line-2);padding-bottom:1px}
.auth-head-alt:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ----- Tag / benefit list ------------------------------------------ */
.auth-tag{color:var(--muted);font-size:13.5px;margin:2px 0 10px;line-height:1.5}
.auth-bens{list-style:none;margin:0 0 14px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.auth-bens li{display:flex;gap:8px;align-items:baseline}
.auth-bens .bul{color:var(--green);font-weight:700;flex:none}

/* ----- "What you get" tool preview row ----------------------------- */
.auth-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 14px}
.auth-preview-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;text-align:center}
.auth-preview-tile .ic{font-size:16px;line-height:1;color:var(--accent)}
.auth-preview-tile .lb{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.auth-preview-foot{font-size:11.5px;color:var(--faint);text-align:center;margin:-8px 0 14px}

/* ----- Field hints / typo nudge ------------------------------------ */
.field-hint{margin:5px 0 0;font-size:11.5px;color:var(--faint);line-height:1.4}
.field-typo{margin:5px 0 0;font-size:11.5px;color:#fbbf24;line-height:1.4}
.field-typo a{color:#fbbf24;font-weight:600;text-decoration:underline;cursor:pointer}

/* ----- Inline AUP summary above Terms checkbox --------------------- */
.aup-summary{margin:0 0 8px;padding:8px 12px;background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.18);border-radius:8px;font-size:11.5px;color:var(--muted);line-height:1.5}
.aup-summary strong{color:#fbbf24;font-weight:700}

/* ----- Agree checkbox ----------------------------------------------- */
.auth-agree{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted);cursor:pointer}
.auth-agree input{width:auto;margin-top:3px;flex:none}
.auth-agree a{color:var(--accent)}
.auth-next{font-size:11.5px;color:var(--faint);text-align:center;margin:8px 0 0;line-height:1.5}

/* ----- Password input + show toggle --------------------------------- */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:62px}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:transparent;border:0;color:var(--muted);font-size:11.5px;font-weight:600;padding:6px 8px;border-radius:6px;cursor:pointer;letter-spacing:.03em}
.pw-toggle:hover{color:var(--accent);background:var(--bg-2)}
.pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ----- Password strength meter -------------------------------------- */
.pwn-bar{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:6px}
.pwn-bar > span{display:block;height:100%;width:0;transition:width .15s,background .15s}
.pwn-bar.s0 > span{background:#b33;width:18%}
.pwn-bar.s1 > span{background:#e57f3a;width:36%}
.pwn-bar.s2 > span{background:#fbbf24;width:55%}
.pwn-bar.s3 > span{background:#86d166;width:78%}
.pwn-bar.s4 > span{background:#4ade80;width:100%}
.pwn-label{font-size:11.5px;margin-top:4px;line-height:1.4}
.pwn-label.bad{color:#e88}
.pwn-label.good{color:#4ade80}

/* ----- Honeypot ----------------------------------------------------- */
.hp-wrap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ----- Submit busy state ------------------------------------------- */
[data-submit-btn][disabled]{opacity:.7;cursor:progress}

/* ----- Focus rings -------------------------------------------------- */
.auth-card input:focus-visible,
.auth-card button:focus-visible,
.auth-card a.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ----- Flash alerts: slide-in --------------------------------------- */
.auth-card .alert{animation:authFlashIn .28s ease-out both}
@keyframes authFlashIn{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .auth-card .alert{animation:none}
}

/* ----- OAuth row ---------------------------------------------------- */
.oauth-row{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}
.oauth-btn{background:var(--bg-2);border:1px solid var(--line-2);color:var(--txt);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;border-radius:8px;font-weight:600;font-size:13.5px}
.oauth-btn:hover{border-color:var(--accent)}
.oauth-ico{width:16px;height:16px;display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:center;flex:none}
.oauth-ico-google{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.1 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.4-.4-3.5z'/><path fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.8 1.1 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/><path fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.5-5.2l-6.2-5.3c-2 1.5-4.6 2.5-7.3 2.5-5.3 0-9.7-3.4-11.3-8.1l-6.6 5.1C9.5 39.6 16.2 44 24 44z'/><path fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.4-2.4 4.4-4.5 5.8l6.2 5.3C40.7 36 44 30.6 44 24c0-1.3-.1-2.4-.4-3.5z'/></svg>")}
.oauth-ico-github{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23e6e8ee' viewBox='0 0 24 24'><path d='M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2-.2-.3-.5-1.5.1-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.3 2.9.2 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3'/></svg>")}
.oauth-sep{display:flex;align-items:center;gap:10px;margin:8px 0 14px;color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* ----- Tighten on small phones -------------------------------------- */
@media (max-width: 420px){
  .auth-preview{grid-template-columns:repeat(4,1fr);gap:4px}
  .auth-preview-tile{padding:6px 2px}
  .auth-preview-tile .lb{font-size:10px}
}

/* ====================================================================
   Two-column split layout (used by /register).
   Desktop ≥820px: marketing on left, form on right.
   Mobile <820px: form first (order:1), marketing collapses below.
   ==================================================================== */
.auth-card--split{
  max-width:860px;
  padding:0;
  overflow:hidden;          /* clip the aside's tint to the rounded corners */
}

/* Top bar runs full-width above the split — keeps brand + Sign-in
   anchored on every viewport. */
.auth-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 26px;border-bottom:1px solid var(--line);
  background:var(--panel)
}
.auth-topbar .brand{margin:0;font-size:20px;line-height:1}

/* The grid itself */
.auth-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:0
}

/* Left = marketing aside. Subtle gradient tint to differentiate from
   the form column without adding a hard divider line. */
.auth-aside{
  padding:26px 26px 22px;
  background:linear-gradient(180deg,var(--bg-2) 0%,rgba(0,0,0,0) 70%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px
}
.auth-aside .auth-tag{margin:0;font-size:13.5px}
.auth-aside .auth-tag strong{color:var(--accent);font-weight:700}
.auth-aside .auth-bens{margin:0}
.auth-aside .auth-preview{margin:0}
.auth-aside .aup-summary{margin:0}

/* Right = form column. */
.auth-main{
  padding:26px 26px 22px;
  display:flex;flex-direction:column;gap:0
}
.auth-main > .alert{margin-bottom:10px}
.auth-main .oauth-row{margin-top:0}
.auth-main form.stack{display:flex;flex-direction:column;gap:12px}

/* 2-up row for Name + Email on desktop. Stacks on small screens. */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Mobile: collapse to a single column, form first. */
@media (max-width: 820px){
  .auth-card--split{max-width:440px}
  .auth-split{grid-template-columns:1fr}
  .auth-aside{
    order:2;
    border-right:0;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--bg-2) 100%);
    padding:20px 22px
  }
  .auth-main{order:1;padding:20px 22px}
  .row-2{grid-template-columns:1fr;gap:12px}
}

/* Extra-small phones — drop the tag's bottom margin, tighten everything. */
@media (max-width: 420px){
  .auth-card--split{border-radius:14px}
  .auth-topbar{padding:14px 18px}
  .auth-main,.auth-aside{padding:16px 18px}
}