/* SocialSway — authentication surface.
   Dark-primary premium system. The light theme tokens are deliberately
   unchanged: lib and suite contrast fixtures quote them literally. */
:root{color-scheme:dark;--bg:#060a10;--surface:#0c1520;--panel:#0e1822;--panel-2:#111d29;--border:#1d2b39;--border-soft:#16222e;--hair:rgba(255,255,255,.06);--text:#f1efea;--muted:#94a8b8;--accent:#5cc8f2;--accent-soft:rgba(92,200,242,.13);--accent-ink:#04121d;--danger:#ffa2a2;--focus:#9dd8ff;--shadow:rgba(0,0,0,.55);--glow-a:rgba(92,200,242,.10);--glow-b:rgba(70,120,190,.09);--wordmark:url("/brand/socialsway/socialsway-logo-dark-1600.png")}
:root[data-theme="light"]{color-scheme:light;--bg:#e8eadf;--surface:#dee2d4;--panel:#fafaf5;--panel-2:#f3f4ea;--border:#aab29c;--border-soft:#c3c9b7;--hair:rgba(23,52,86,.08);--text:#20251d;--muted:#596451;--accent:#173456;--accent-soft:rgba(23,52,86,.09);--accent-ink:#fff;--danger:#9c2525;--focus:#173456;--shadow:rgba(32,37,29,.16);--glow-a:rgba(23,52,86,.07);--glow-b:rgba(89,100,81,.06);--wordmark:url("/brand/socialsway/socialsway-logo-light-1600.png")}

*{box-sizing:border-box}
html,body{margin:0;min-width:0;min-height:100%;overflow-x:clip}
body{min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---- ambient depth: two soft light sources, no image, no canvas ---- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(58% 46% at 14% 16%,var(--glow-a),transparent 68%),
  radial-gradient(52% 44% at 82% 84%,var(--glow-b),transparent 70%)}

/* ---- layout ---- */
.auth-layout{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(380px,520px);align-items:center;gap:clamp(32px,6vw,96px);padding:clamp(20px,5vw,72px);max-width:1560px;margin:0 auto}

/* ---- brand side ---- */
.brand-panel{max-width:640px}
/* Official SocialSway lockup (1600x333, 4.8:1). Swapped per theme via the
   --wordmark token so the correct dark/light artwork is always used. */
.wordmark{width:212px;height:44px;background:var(--wordmark) left center/contain no-repeat}
.eyebrow{margin:34px 0 12px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.brand-panel h1{font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.038em;font-weight:640;margin:0 0 20px;max-width:14ch}
.lede{max-width:52ch;margin:0;color:var(--muted);font-size:17px;line-height:1.6}

/* ---- orchestration schematic ---- */
.orchestration{margin:40px 0 0;padding:0;max-width:520px}
.orchestration svg{width:100%;height:auto;display:block;overflow:visible}
.flow-lanes path{fill:none;stroke:var(--border);stroke-width:1.15}
.flow-ticks path{fill:none;stroke:var(--muted);stroke-width:1.15;stroke-linecap:round;opacity:.42}
.flow-curve{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;opacity:.72}
.flow-nodes circle{fill:var(--bg);stroke:var(--border);stroke-width:1.3}
.flow-nodes .is-origin,.flow-nodes .is-terminal{fill:var(--accent);stroke:none}

.security-note{display:grid;gap:6px;margin-top:40px;padding:16px 18px;border:1px solid var(--border-soft);border-left:2px solid var(--accent);border-radius:0 12px 12px 0;background:linear-gradient(90deg,var(--accent-soft),transparent 62%)}
.security-note strong{font-size:14px;font-weight:650;letter-spacing:-.01em}
.security-note span,.hint{color:var(--muted);font-size:13.5px;line-height:1.5}

/* ---- login panel ---- */
.auth-panel{position:relative;display:flex;align-items:center;padding:clamp(26px,3.4vw,44px);min-height:470px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,var(--panel-2),var(--panel) 46%);box-shadow:0 1px 0 var(--hair) inset,0 28px 70px -24px var(--shadow)}
.auth-panel::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,transparent,var(--hair) 22%,var(--hair) 78%,transparent)}
#authState{width:100%}

.theme-button{position:absolute;right:14px;top:14px;width:44px;min-height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.theme-button:hover{color:var(--text);border-color:var(--accent)}

.state-tag{display:inline-block;color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.auth-panel h2{font-size:clamp(26px,2.6vw,31px);line-height:1.14;letter-spacing:-.032em;font-weight:640;margin:12px 0 8px}
.auth-panel p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ---- form ---- */
form{display:grid;gap:18px;margin-top:28px}
.field{display:grid;gap:8px}
label{color:var(--text);font-size:13.5px;font-weight:620;letter-spacing:-.005em}
.field-control{position:relative;display:block}
input{width:100%;min-height:48px;border:1px solid var(--border);border-radius:11px;padding:12px 14px;background:var(--surface);color:var(--text);font:inherit;font-size:15px}
input::placeholder{color:var(--muted);opacity:.7}
input:hover{border-color:var(--border)}
.field-control input{padding-right:52px}
input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--surface) inset;caret-color:var(--text)}

.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;min-height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:none;color:var(--muted);cursor:pointer}
.pw-toggle:hover{color:var(--accent)}
.pw-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

button.primary,.button-link{min-height:48px;display:grid;place-items:center;border:0;border-radius:11px;padding:12px 18px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:15px;font-weight:680;letter-spacing:-.01em;cursor:pointer;text-align:center;text-decoration:none}
button.primary:hover:not(:disabled),.button-link:hover{filter:brightness(1.08)}
button.primary:active:not(:disabled){transform:translateY(1px)}
button.primary:disabled{opacity:.55;cursor:not-allowed}

.text-link{display:inline-flex;min-height:44px;align-items:center;color:var(--muted);font-size:14px;font-weight:600;text-decoration-color:var(--border);text-underline-offset:3px}
.text-link:hover{color:var(--accent);text-decoration-color:var(--accent)}

.error{margin:0;color:var(--danger);font-size:14px;font-weight:620;line-height:1.45}
.error:empty{display:none}
.success{padding:14px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.account-summary{display:grid;gap:7px;margin:22px 0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.loading{color:var(--muted);font-size:14.5px}

/* ---- focus: one consistent, highly visible treatment ---- */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- short desktop viewports (720p, laptops): tighten the vertical
     rhythm so the split layout never scrolls to reach the form ---- */
@media(min-width:901px) and (max-height:840px){
  .auth-layout{padding-block:clamp(16px,3.4vh,40px)}
  .wordmark{width:190px;height:40px}
  .eyebrow{margin:22px 0 9px}
  .brand-panel h1{font-size:clamp(30px,3.5vw,44px);margin-bottom:16px}
  .lede{font-size:15.5px}
  .orchestration{margin-top:26px;max-width:430px}
  .security-note{margin-top:26px;padding:14px 16px}
  .auth-panel{min-height:0}
}

/* ---- responsive: single column, login-first ---- */
@media(max-width:900px){
  .auth-layout{grid-template-columns:1fr;align-content:start;align-items:start;gap:22px;padding:clamp(16px,4vw,28px)}
  .brand-panel{max-width:none;padding-top:26px}
  .eyebrow{margin:22px 0 10px}
  .brand-panel h1{font-size:clamp(28px,7vw,36px);max-width:20ch;margin-bottom:0}
  .lede,.orchestration,.security-note{display:none}
  .auth-panel{min-height:0;padding:24px 20px;margin-bottom:24px}
  .auth-panel h2{font-size:25px}
  form{gap:16px;margin-top:22px}
}
@media(max-width:340px){
  .auth-layout{padding:12px}
  .brand-panel{padding-top:18px}
  .brand-panel h1{font-size:26px}
  .auth-panel{padding:20px 15px}
  .theme-button{right:10px;top:10px}
  .wordmark{width:178px;height:37px}
}

/* ---- motion: additive only, so reduced-motion users lose nothing ---- */
@media(prefers-reduced-motion:no-preference){
  button,input,a,.theme-button,.pw-toggle{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,filter .16s ease,transform .08s ease}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2.2%,0) scale(1.06)}}
  .brand-panel{animation:rise .5s cubic-bezier(.22,.7,.3,1) both}
  .auth-panel{animation:rise .5s cubic-bezier(.22,.7,.3,1) .07s both}
  .ambient{animation:drift 26s ease-in-out infinite alternate;will-change:transform}
  .flow-curve{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.5s cubic-bezier(.3,.7,.3,1) .4s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}