/* ==========================================================================
   Commently — Auth (Figma "Commently — Modern UI" · Login/Signup — Desktop v2).
   Two panels: a flat brand panel that explains the product + a calm form. Light and dark.
   IDs/field names are consumed by auth.js and join.js — do not rename them.
   ========================================================================== */
:root{
  --ink:#0e1a15;--muted:#56645d;--faint:#8a968f;--paper:#fff;--card:#fff;--subtle:#f0f3f1;
  --line:#e3e8e4;--line-strong:#cbd5cf;
  --brand:#0b3d2e;--brand-strong:#062a1f;--accent:#22a06b;--link:#127a55;--rose:#b42318;--mint-accent:#9fe3bf;
  --note-bg:#e6f4ec;--note-fg:#127a55;
  color-scheme:light;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html[data-theme="dark"]{
  --ink:#ecf2ef;--muted:#a5b3ac;--faint:#7d8b84;--paper:#0b110f;--card:#121a17;--subtle:#1a2420;
  --line:#222e29;--line-strong:#33433c;
  --accent:#2fbf7a;--link:#5fd39a;--rose:#ff8a80;
  --note-bg:#123024;--note-fg:#7fe0b2;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:15px/1.5 inherit;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
[hidden]{display:none!important}
.eyebrow{display:none}

.auth-shell{display:grid;grid-template-columns:minmax(420px,600px) minmax(0,1fr);min-height:100vh;background:var(--paper)}

/* ---------- Brand panel (left) ---------- */
.auth-brand{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:48px 56px;background:var(--brand);color:#fff}
.brand-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:-.02em}
.brand-logo .mark{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:#fff;color:var(--brand);font-size:14px;font-weight:700;letter-spacing:0}
.brand-pitch{display:flex;flex-direction:column;gap:16px;max-width:488px}
.brand-kicker{margin:0;color:var(--mint-accent);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.brand-pitch h2{margin:0;font-size:clamp(28px,2.5vw,34px);font-weight:600;line-height:1.24;letter-spacing:-.025em}
.brand-pitch>p:not(.brand-kicker){margin:0;color:#ffffffb8;font-size:16px;line-height:1.65}
.brand-caps{list-style:none;margin:16px 0 0;padding:0}
.brand-caps li{display:flex;gap:16px;padding:16px 0}
.brand-caps li+li{border-top:1px solid #ffffff1f}
.cap-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#ffffff14;color:var(--mint-accent)}
.cap-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cap-text{display:flex;flex-direction:column;gap:3px}
.cap-text b{font-size:15px;font-weight:600}
.cap-text small{color:#ffffffb3;font-size:14px;line-height:1.5}
.brand-channels{display:flex;flex-direction:column;gap:12px;color:#ffffff99;font-size:12px}
.brand-glyphs{display:flex;gap:20px;color:#ffffffbf}
.brand-glyphs svg{width:20px;height:20px;fill:currentColor}

/* ---------- Form (right) ---------- */
.auth-card{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:104px clamp(24px,calc(50% - 200px),220px) 88px}
.auth-top{position:absolute;top:28px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none}
.back-link:hover{color:var(--ink)}
.back-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.language-picker{display:inline-flex;align-items:center;margin:0 0 0 auto;font-size:0;line-height:0}
.language-picker select{
  min-height:36px;padding:7px 32px 7px 36px;border:1px solid var(--line);border-radius:8px;
  background-color:var(--card);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356645d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a968f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position:12px center,right 10px center;background-size:15px,14px;background-repeat:no-repeat,no-repeat;
}

h1{margin:0;font-size:32px;font-weight:600;line-height:1.25;letter-spacing:-.025em;color:var(--ink)}
.intro{margin:8px 0 28px;color:var(--muted);font-size:15px}

.google-button{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;margin-bottom:20px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--ink);font-weight:600;text-decoration:none}
.google-button:hover{background:var(--subtle)}
.or{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:var(--faint);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

form{display:grid;gap:18px}
.field{display:grid;gap:8px;color:var(--ink);font-size:13px;font-weight:500}
input[type=text],input[type=password],input[type=email],#code-field input{
  width:100%;height:46px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--card);color:var(--ink);font-size:15px;font-weight:400;
}
input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
html[data-theme="dark"] input:focus{border-color:var(--accent)}
::placeholder{color:var(--faint)}

.password-field{display:grid;gap:8px}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.field-head label{color:var(--ink);font-size:13px;font-weight:500}
.link-button{width:auto;height:auto;padding:0;border:0;background:none;color:var(--link);font:inherit;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer}
.link-button:hover{text-decoration:underline}
#code-field{display:grid;gap:8px;color:var(--ink);font-size:13px;font-weight:500}

button[type=submit]{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;margin-top:6px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
button[type=submit]:hover:not(:disabled){background:var(--brand-strong)}
button[type=submit]:disabled{opacity:.6;cursor:wait}
html[data-theme="dark"] button[type=submit]{background:var(--accent);color:#06140e}

.error{margin:0;color:var(--rose);font-size:13px}
.error:empty{display:none}

.signup-steps{display:grid;gap:10px;margin:4px 0 0;padding:0;list-style:none;counter-reset:step;color:var(--muted);font-size:13px}
.signup-steps li{display:flex;align-items:center;gap:10px;counter-increment:step}
.signup-steps li::before{content:counter(step);display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;color:var(--brand);font-size:11px;font-weight:600}
html[data-theme="dark"] .signup-steps li::before{color:var(--link)}

.footnote{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.footnote.plain{border:0;padding:0}
.auth-success{margin:16px 0 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:12px;background:var(--note-bg);color:var(--note-fg);font-size:13px;line-height:1.6}
.auth-success p{margin:0 0 10px}
.note{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;color:var(--muted)}
.note-icon{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--faint);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#account-switch{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
#account-switch a{color:var(--link);font-weight:600;text-decoration:none}
#account-switch a:hover{text-decoration:underline}
.legal{position:absolute;bottom:24px;left:0;right:0;margin:0;text-align:center;color:var(--faint);font-size:12px}
.legal a{color:var(--faint);text-decoration:none}
.legal a:hover{color:var(--ink)}
#forgot-form button[type=button]{justify-self:start}

/* ---------- Boot overlay ---------- */
html.booting .auth-shell{visibility:hidden}
html.booting body::after{content:"Commently";position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);color:var(--brand);font-size:28px;font-weight:700;letter-spacing:-.02em}

/* ---------- Responsive ---------- */
@media(max-width:1100px){.auth-shell{grid-template-columns:minmax(360px,460px) minmax(0,1fr)}.auth-brand{padding:40px}.auth-top{left:28px;right:28px}}
@media(max-width:860px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{order:2;padding:32px 24px;gap:28px}
  .auth-card{min-height:auto;justify-content:flex-start;padding:20px clamp(20px,6vw,40px) 40px}
  .auth-top{position:static;margin:0 0 36px}
  .legal{position:static;margin-top:24px;text-align:left}
}

/* Life (desktop only, above the 860px stacked layout; off for reduced motion). */
@media (min-width:861px){
  .auth-brand{position:relative;isolation:isolate;overflow:hidden}
  .auth-brand::before,.auth-brand::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none}
  .auth-brand::before{top:-120px;right:-140px;width:420px;height:420px;background:#22a06b55}
  .auth-brand::after{bottom:-160px;left:-120px;width:380px;height:380px;background:#9fe3bf2e}
  .brand-caps li{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .brand-caps li:hover{transform:translateX(4px)}
  .cap-icon{transition:background-color .25s,color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
  .brand-caps li:hover .cap-icon{background:var(--mint-accent);color:var(--brand);transform:rotate(-6deg) scale(1.06)}
  .brand-glyphs svg{transition:transform .25s cubic-bezier(.2,.8,.2,1),color .2s}
  .brand-glyphs svg:hover{transform:translateY(-3px) scale(1.12);color:#fff}
  input[type=text],input[type=password],input[type=email],#code-field input{transition:border-color .15s,box-shadow .2s}
  button[type=submit]{position:relative;overflow:hidden;transition:background-color .15s,box-shadow .25s,transform .15s}
  button[type=submit]:hover:not(:disabled){box-shadow:0 14px 28px -16px var(--brand)}
  button[type=submit]:active:not(:disabled){transform:scale(.98)}
  button[type=submit]::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff33 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
  button[type=submit]:hover:not(:disabled)::after{transform:translateX(120%);transition:transform .7s}
  .back-link svg{transition:transform .2s}
  .back-link:hover svg{transform:translateX(-3px)}
}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  @keyframes auth-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes auth-drift-a{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,90px) scale(1.1)}}
  @keyframes auth-drift-b{0%,100%{transform:translate(0,0)}50%{transform:translate(90px,-60px) scale(.9)}}
  .auth-brand::before{animation:auth-drift-a 15s ease-in-out infinite}
  .auth-brand::after{animation:auth-drift-b 18s ease-in-out infinite}
  .brand-pitch>*,.brand-caps li,.brand-channels{animation:auth-rise .7s cubic-bezier(.2,.8,.2,1) both}
  .brand-pitch>:nth-child(2){animation-delay:.06s}.brand-pitch>:nth-child(3){animation-delay:.12s}
  .brand-caps li:nth-child(1){animation-delay:.22s}.brand-caps li:nth-child(2){animation-delay:.3s}.brand-caps li:nth-child(3){animation-delay:.38s}.brand-caps li:nth-child(4){animation-delay:.46s}
  .brand-channels{animation-delay:.56s}
  .auth-card>:not(.auth-top){animation:auth-rise .6s cubic-bezier(.2,.8,.2,1) both}
  .auth-card>:nth-child(3){animation-delay:.05s}.auth-card>:nth-child(4){animation-delay:.1s}.auth-card>:nth-child(n+5){animation-delay:.15s}
}
/* Official app icon (the mint tile is part of the image). */
.brand-logo img.mark{display:block;width:32px;height:32px;border-radius:9px;background:none;object-fit:cover}