/* login.html: sign in, create account, forgot password, optional character pick. Storm theme, values from css/tokens.css only.
   Mobile first: one column; the brand panel joins at >= 960px. No libraries, no glass, one accent. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--c-bg);color:var(--c-text);font-family:var(--font);font-size:var(--t-body-size);line-height:var(--t-body-line);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
img{display:block;max-width:100%;height:auto}
a{color:var(--c-accent-ink);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s-4);top:var(--s-4);background:var(--c-surface);padding:var(--s-2) var(--s-3);z-index:9}
.cap{font-size:var(--t-caption-size);line-height:var(--t-caption-line);letter-spacing:var(--t-caption-track);color:var(--c-text-3);margin:0}
.over{font-size:var(--t-overline-size);line-height:var(--t-overline-line);letter-spacing:var(--t-overline-track);font-weight:var(--t-overline-weight);text-transform:uppercase;color:var(--c-accent-ink);margin:0 0 var(--s-3);display:flex;align-items:center;gap:var(--s-3)}
.over::before{content:"";width:28px;height:2px;background:var(--c-accent)}
/* film grain, same tile as the storm homepage */
body::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.page{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr}
/* ---------- brand panel (desktop only) */
.side{display:none}
@media (min-width:960px){
  .page{grid-template-columns:minmax(380px,5fr) 7fr}
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;padding:var(--s-7) var(--s-7) var(--s-6);overflow:hidden;isolation:isolate;border-right:1px solid var(--c-divider)}
  .side .clouds{position:absolute;inset:-10% -20% 0;z-index:-2;opacity:.9;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='700' preserveAspectRatio='none'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0032 .0065' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .102 0 0 0 0 .125 0 0 0 0 .157 0 0 0 1.9 -.78'/%3E%3C/filter%3E%3Crect width='1200' height='700' filter='url(%23c)'/%3E%3C/svg%3E");background-size:cover}
  .side .vig{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 30% 25%,transparent 40%,var(--c-vignette) 100%)}
  .side-logo{display:inline-flex;align-self:flex-start;border-radius:var(--r-sm)}
  .side-logo img{height:72px;width:auto}
  .side-copy{margin-top:auto;max-width:24rem}
  .side-h{font-size:var(--t-h1-size);line-height:var(--t-h1-line);letter-spacing:-.03em;font-weight:var(--t-h1-weight);margin:0;text-wrap:balance}
  .side-p{color:var(--c-text-2);font-size:var(--t-body-lg-size);line-height:var(--t-body-lg-line);margin:var(--s-4) 0 0}
  .side-bolt{display:flex;align-items:flex-end;gap:var(--s-3);margin:var(--s-6) 0 var(--s-6)}
  .side-bolt img{width:84px;border-radius:var(--r-md);box-shadow:0 0 0 1px var(--c-border),0 6px 18px rgb(0 0 0 / .45)}
  .side-legal{max-width:36ch}
}
/* ---------- form column */
.main{display:flex;flex-direction:column;min-width:0;padding:0 var(--s-5) var(--s-5)}
.top{display:flex;align-items:center;justify-content:space-between;min-height:64px;max-width:420px;width:100%;margin:0 auto;padding-top:env(safe-area-inset-top)}
.top-logo{display:inline-flex;align-items:center;min-height:var(--touch);border-radius:var(--r-sm)}
.top-logo img{height:30px;width:auto}
.link{display:inline-flex;align-items:center;gap:6px;min-height:var(--touch);padding:0 var(--s-3);margin-right:calc(var(--s-3) * -1);color:var(--c-text-2);text-decoration:none;font-weight:500;font-size:var(--t-small-size);border-radius:var(--r-sm);transition:color var(--m-fast) var(--ease-standard),background-color var(--m-fast) var(--ease-standard)}
.link:hover{color:var(--c-text);background:var(--c-raised)}
@media (min-width:960px){.top-logo{visibility:hidden}.main{padding:0 var(--s-7) var(--s-6)}}
.panel{width:100%;max-width:420px;margin:var(--s-4) auto 0;flex:1 0 auto}
@media (min-width:960px){.panel{margin-top:clamp(var(--s-6),9vh,var(--s-9))}}

.preview{display:flex;gap:var(--s-2);align-items:flex-start;margin:0 0 var(--s-6);padding:var(--s-2) var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-md);font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--c-text-2);background:var(--c-surface)}
.preview b{color:var(--c-text);font-weight:600}
.preview .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-signal-warn);margin-top:6px}

h1{font-size:var(--t-h2-size);line-height:var(--t-h2-line);letter-spacing:-.02em;font-weight:700;margin:0;outline:none}
@media (min-width:640px){h1{font-size:2rem}}
.sub{color:var(--c-text-2);margin:var(--s-2) 0 var(--s-5)}
.sub b{color:var(--c-text);font-weight:600;overflow-wrap:anywhere}

/* buttons */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;min-height:48px;padding:0 var(--s-5);border:0;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-on-accent);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:box-shadow var(--m-fast) var(--ease-standard),transform var(--m-fast) var(--ease-standard)}
.btn:hover{box-shadow:0 0 0 1px rgba(255,194,26,.4),0 0 22px rgba(255,194,26,.22)}
.btn:active{transform:translateY(1px)}
.btn[aria-busy="true"]{cursor:progress}
.btn[disabled]{opacity:.7}
.spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(17,17,17,.25);border-top-color:var(--c-on-accent);animation:spin .7s linear infinite}
.btn[aria-busy="true"] .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-google{display:flex;align-items:center;justify-content:center;gap:var(--s-3);width:100%;min-height:48px;padding:0 var(--s-5);border:1px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text);font:inherit;font-weight:500;cursor:pointer;transition:border-color var(--m-fast) var(--ease-standard),background-color var(--m-fast) var(--ease-standard)}
.btn-google:hover{border-color:var(--c-text-3);background:var(--c-raised)}
.btn-quiet{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--touch);margin-top:var(--s-3);padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-text-2);font:inherit;font-size:var(--t-small-size);font-weight:500;cursor:pointer}
.btn-quiet:hover{color:var(--c-text);background:var(--c-surface)}
.note{margin:var(--s-3) 0 0;padding:var(--s-3);border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-border);font-size:var(--t-small-size);line-height:var(--t-small-line);color:var(--c-text-2)}
.or{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-5) 0;color:var(--c-text-3);font-size:var(--t-caption-size);letter-spacing:var(--t-overline-track);text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--c-border)}

/* fields */
.field{margin-bottom:var(--s-4)}
.field label{display:inline-block;font-size:var(--t-small-size);font-weight:600;margin-bottom:6px}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.opt{font-weight:400;color:var(--c-text-3);margin-left:4px}
.tiny-link{font-size:var(--t-small-size);font-weight:500;text-decoration:none;padding:6px 0}
.tiny-link:hover{text-decoration:underline}
input[type=email],input[type=text],input[type=password]{display:block;width:100%;min-height:48px;padding:0 var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:1rem;transition:border-color var(--m-fast) var(--ease-standard),box-shadow var(--m-fast) var(--ease-standard)}
input:hover{border-color:var(--c-text-3)}
input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(255,194,26,.18)}
input[aria-invalid="true"]{border-color:var(--c-signal-down)}
input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(248,113,113,.18)}
input:-webkit-autofill{-webkit-text-fill-color:var(--c-text);-webkit-box-shadow:0 0 0 40px var(--c-surface) inset;caret-color:var(--c-text)}
.pw{position:relative}
.pw input{padding-right:76px}
.pw-toggle{position:absolute;top:2px;right:2px;bottom:2px;min-width:64px;padding:0 var(--s-3);border:0;border-radius:8px;background:transparent;color:var(--c-text-2);font:inherit;font-size:var(--t-small-size);font-weight:600;cursor:pointer}
.pw-toggle:hover{color:var(--c-text);background:var(--c-raised)}
.hint{margin:6px 0 0;font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--c-text-3)}
.hint.caps{color:var(--c-signal-warn)}
.err{margin:6px 0 0;font-size:var(--t-small-size);line-height:var(--t-small-line);color:var(--c-signal-down)}
.err:empty{display:none}
.field:has(.err:not(:empty)) .hint:not(.caps){display:none}
.meter{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:var(--s-2)}
.meter i{height:3px;border-radius:2px;background:var(--c-border);transition:background-color var(--m-fast) var(--ease-standard)}
.meter[data-s="1"] i:nth-child(-n+1){background:var(--c-signal-down)}
.meter[data-s="2"] i:nth-child(-n+2){background:var(--c-signal-warn)}
.meter[data-s="3"] i{background:var(--c-signal-up)}
.alert{margin:0 0 var(--s-4);padding:var(--s-3);border-radius:var(--r-md);border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.08);color:var(--c-text);font-size:var(--t-small-size);line-height:var(--t-small-line)}
.alert a{color:var(--c-accent-ink)}
.fine{margin:var(--s-4) 0 0;font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--c-text-3);text-align:center}
.switch{margin:var(--s-6) 0 0;text-align:center;color:var(--c-text-2);font-size:var(--t-small-size)}
.switch a{font-weight:600}
.done{padding:var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface);margin-top:var(--s-4)}
.done .sub{margin:0}
.done .note{border:0;padding:0;margin-top:var(--s-3);background:transparent}

/* character pick */
.chars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 var(--s-5)}
@media (min-width:960px){.chars{gap:var(--s-2)}.panel.wide{max-width:520px}}
.char{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:0;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);font:inherit;cursor:pointer;overflow:hidden;transition:border-color var(--m-fast) var(--ease-standard),transform var(--m-fast) var(--ease-standard)}
.char img{width:100%;aspect-ratio:4/5;object-fit:cover}
.char span{padding:4px 2px 6px;font-size:var(--t-caption-size);font-weight:600;text-align:center}
.char:hover{border-color:var(--c-text-3)}
.char[aria-checked="true"]{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.char[aria-checked="true"]::after{content:"";position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pick-actions .btn-quiet{margin-top:var(--s-2)}
.pick-cap{text-align:center;margin-top:var(--s-4)}

.foot-logo{display:flex;justify-content:center;margin-bottom:var(--s-4)}.foot-logo img{height:72px;width:auto}
@media (min-width:960px){.foot-logo{display:none}}
.foot{max-width:420px;width:100%;margin:var(--s-7) auto 0;padding-bottom:env(safe-area-inset-bottom)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1) var(--s-5);font-size:var(--t-caption-size);color:var(--c-text-3)}
.foot a{color:var(--c-text-2);text-decoration:none;min-height:var(--touch);display:inline-flex;align-items:center}
.foot a:hover{color:var(--c-text);text-decoration:underline}
.foot .ph{display:inline-flex;align-items:center;min-height:var(--touch)}
.noscript{text-align:center;color:var(--c-text-2)}
/* view enter: a short fade + rise (motion tokens); reduced motion = opacity only */
.js .view:not([hidden]){animation:enter var(--m-base) var(--ease-out) both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .view:not([hidden]){animation:fade 150ms linear both}@keyframes fade{from{opacity:0}to{opacity:1}}.spin{animation-duration:1.6s}.btn,.char{transition:none}}