/* ============================================================
   Spyne — authentication screens
   Sign in · Sign up · Password reset · Confirmation · Unlock
   ============================================================ */
:root{
  --pine:#0B6B4E;
  --pine-dark:#07452F;
  --pine-deep:#062E20;
  --ink:#0D1F18;
  --slate:#54685F;
  --mist:#E7F0EB;
  --paper:#F7FAF8;
  --line:#DCE7E1;
  --teal:#14B8A6;
  --cobalt:#2563EB;
  --spine:linear-gradient(180deg,#14B8A6 0%,#2563EB 100%);
  --amber:#B97F14;
  --amber-bg:#FBF0D7;
  --danger:#B4432C;
  --danger-bg:#FBE9E5;
  --ok:#0B6B4E;
  --ok-bg:#DCF3E7;
  --font-display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pine);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid rgba(20,184,166,.55);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------- shell ---------------- */
.auth{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:100vh}

/* ---------------- left brand panel ---------------- */
.auth-aside{
  position:relative;
  background:var(--pine-deep);
  color:#DCEAE3;
  padding:44px 52px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.auth-aside::before{ /* ambient glow */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 340px at 12% 6%,rgba(20,184,166,.20),transparent 62%),
    radial-gradient(460px 380px at 92% 96%,rgba(37,99,235,.18),transparent 60%);
}
.auth-aside::after{ /* the spine */
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--spine);
}
.auth-aside > *{position:relative;z-index:1}

.auth-logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:-.02em}
.auth-logo:hover{text-decoration:none}
.auth-logo small{font-family:var(--font-mono);font-weight:400;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:#7FA294;margin-top:7px}

.aside-body{margin-top:auto;padding:44px 0 40px}
.aside-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7DD3B8;display:flex;align-items:center;gap:.7em;margin-bottom:20px}
.aside-eyebrow::before{content:"";width:24px;height:2px;background:var(--spine);border-radius:2px}
.auth-aside h2{font-family:var(--font-display);font-size:clamp(1.7rem,2.6vw,2.35rem);
  line-height:1.12;letter-spacing:-.025em;color:#fff;font-weight:700}
.auth-aside .aside-lede{margin-top:16px;color:#A8C4B8;font-size:1rem;max-width:34ch}

/* vertebra checklist — the ticks sit on the spine */
.aside-list{margin-top:32px;display:grid;gap:2px}
.aside-list li{display:flex;gap:14px;align-items:flex-start;padding:11px 0;font-size:.94rem;color:#CFE3DA}
.aside-list .tick{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(125,211,184,.5);
  display:grid;place-items:center;color:#7DD3B8;margin-top:1px;
}
.aside-list .tick svg{width:12px;height:12px}

/* small proof card */
.aside-proof{
  margin-top:34px;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:18px 20px;background:rgba(255,255,255,.045);backdrop-filter:blur(3px);
}
.aside-proof p{font-family:var(--font-display);font-size:1.02rem;line-height:1.4;
  color:#fff;font-weight:600;letter-spacing:-.01em}
.aside-proof span{display:block;margin-top:10px;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#7FA294}

.aside-foot{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:#5E8375}

/* ---------------- right form panel ---------------- */
.auth-main{display:flex;flex-direction:column;padding:32px 40px 44px}
.auth-topbar{display:flex;justify-content:flex-end;align-items:center;gap:14px;
  font-size:.88rem;color:var(--slate);min-height:40px}
.auth-topbar .logo-sm{display:none}
.auth-panel{margin:auto;width:100%;max-width:436px;padding:36px 0}

.auth-head{margin-bottom:28px}
.auth-head h1{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.1rem);
  line-height:1.14;letter-spacing:-.025em;font-weight:700}
.auth-head p{margin-top:10px;color:var(--slate);font-size:.97rem}

/* ---------------- form ---------------- */
.form-row{display:grid;gap:18px}
.form-row.two{grid-template-columns:1fr 1fr}
.field{display:grid;gap:7px;margin-bottom:18px}
.field:last-of-type{margin-bottom:0}
.field label{font-size:.87rem;font-weight:600;letter-spacing:-.005em}
.field .hint{font-size:.79rem;color:var(--slate);line-height:1.45}
.input-wrap{position:relative;display:flex;align-items:center}
.field input{
  width:100%;font-family:var(--font-body);font-size:.97rem;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:#9DAFA6}
.field input:hover{border-color:#C3D5CC}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(20,184,166,.14)}
.field input[type=password]{padding-right:52px;letter-spacing:.02em}
.field.has-error input{border-color:var(--danger);background:#FFFCFB}
.field.has-error input:focus{box-shadow:0 0 0 4px rgba(180,67,44,.13)}
.field-error{font-size:.8rem;color:var(--danger);font-weight:500}

/* show / hide password */
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:var(--slate);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 10px;border-radius:8px;
}
.pw-toggle:hover{color:var(--pine);background:var(--mist)}

/* password strength */
.pw-meter{margin-top:9px}
.pw-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pw-bars i{height:4px;border-radius:99px;background:var(--line);transition:background .25s}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:#D9534F}
.pw-meter[data-score="2"] i:nth-child(-n+2){background:#E0A32E}
.pw-meter[data-score="3"] i:nth-child(-n+3){background:#4FA36B}
.pw-meter[data-score="4"] i{background:var(--pine)}
.pw-label{margin-top:7px;font-size:.78rem;color:var(--slate)}
.pw-label b{font-weight:600;color:var(--ink)}

/* checkbox + row */
.field-inline{display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;margin:20px 0 24px}
.check{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;
  color:var(--slate);cursor:pointer;user-select:none}
.check input{appearance:none;width:19px;height:19px;border:1.5px solid var(--line);
  border-radius:6px;background:#fff;cursor:pointer;flex:none;position:relative;transition:.15s}
.check input:hover{border-color:#C3D5CC}
.check input:checked{background:var(--pine);border-color:var(--pine)}
.check input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:14px 24px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;
  transition:background .15s,transform .12s,box-shadow .15s;
}
.btn-primary{background:var(--pine);color:#fff;box-shadow:0 10px 24px -10px rgba(11,107,78,.62)}
.btn-primary:hover{background:var(--pine-dark);transform:translateY(-1px);text-decoration:none}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);font-size:.9rem;
  width:auto;padding:9px 18px;border-radius:10px}
.btn-ghost:hover{border-color:var(--pine);color:var(--pine);text-decoration:none}

/* alt links under the form */
.auth-alt{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--slate)}
.auth-alt + .auth-alt{margin-top:10px;padding-top:0;border-top:0}
.auth-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.86rem}
.auth-links a{color:var(--slate);font-weight:500}
.auth-links a:hover{color:var(--pine)}

/* reassurance strip under primary CTA */
.assure{display:flex;align-items:center;gap:9px;margin-top:16px;
  font-size:.83rem;color:var(--slate)}
.assure svg{flex:none;width:15px;height:15px;color:var(--pine)}

/* ---------------- flash / alerts ---------------- */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;
  font-size:.91rem;margin-bottom:22px;border:1px solid}
.alert svg{flex:none;width:18px;height:18px;margin-top:2px}
.alert-notice{background:var(--ok-bg);border-color:#BFE5D2;color:#0A4A36}
.alert-notice svg{color:var(--ok)}
.alert-error{background:var(--danger-bg);border-color:#F1C9C0;color:#8C3320}
.alert-error svg{color:var(--danger)}
.alert-info{background:var(--amber-bg);border-color:#EFDCAE;color:#7A5409}
.alert-info svg{color:var(--amber)}
.alert h4{font-size:.92rem;font-weight:600;margin-bottom:3px}
.alert ul{list-style:none;display:grid;gap:4px;margin-top:6px}
.alert ul li{font-size:.87rem}
.alert ul li::before{content:"— ";opacity:.6}

/* ---------------- sent-state (check your inbox) ---------------- */
.sent{text-align:center;padding:8px 0}
.sent-icon{width:64px;height:64px;margin:0 auto 22px;border-radius:20px;
  background:var(--mist);color:var(--pine);display:grid;place-items:center}
.sent-icon svg{width:30px;height:30px}
.sent h1{font-family:var(--font-display);font-size:1.7rem;letter-spacing:-.02em;font-weight:700}
.sent p{margin-top:12px;color:var(--slate);font-size:.97rem}
.sent .mail{font-weight:600;color:var(--ink)}

/* ---------------- responsive ---------------- */

/* Both columns are percentages, so on a wide monitor the form column grows
   to ~1000px while the form itself stays 436px — the leftover piles up as
   dead space beside the divider, and it reads as a gap because the brand
   panel's own content hugs its left edge. Past this width the form column
   stops growing (the extra goes to the brand panel) and the brand panel
   centres its content in a column of its own, so both sides stay balanced.
   The 600px cap is inert until the panel is wider than its own padding. */
@media (min-width:1200px){
  .auth{grid-template-columns:minmax(0,1fr) minmax(560px,660px)}
  .auth-aside > *{width:100%;max-width:600px;margin-inline:auto}
}

@media (max-width:940px){
  .auth{grid-template-columns:1fr;min-height:auto}
  .auth-aside{padding:26px 26px 30px;order:-1}
  .auth-aside::after{width:4px}
  .aside-body{margin-top:26px;padding:0}
  .auth-aside h2{font-size:1.5rem}
  .aside-list,.aside-proof,.aside-foot{display:none}   /* keep the mobile header tight */
  .auth-aside .aside-lede{font-size:.94rem}
  .auth-main{padding:26px 22px 40px}
  .auth-panel{padding:14px 0}
  .form-row.two{grid-template-columns:1fr}
}
@media (max-width:420px){
  .auth-head h1{font-size:1.55rem}
  .field-inline{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------------------------------------------------------------
   reCAPTCHA v3
   ---------------------------------------------------------------
   The floating badge is hidden because this app's CSP is nonce-based
   for style-src, so the <style> element reCAPTCHA injects to position
   it is blocked and the badge would otherwise land unstyled in the
   corner of the page. Google permits hiding it provided the
   attribution is shown instead — that is .recaptcha-notice, rendered
   by shared/_spam_protection. Do not remove one without the other.
   --------------------------------------------------------------- */
.grecaptcha-badge { visibility: hidden; }

.recaptcha-notice {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7b8a94;
}

.recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
}