/* Walkyn's account page: what an email link opens (verify, reset, recover).
   Tokens and fonts are the site's (site-prerelease/styles.css). */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/dm-sans-latin.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(fonts/sora-latin.woff2) format('woff2')}

:root{
  --bg:#FAF8F6;
  --surface:#FFFFFF;
  --ink:#1E1B1B;
  --muted:rgba(30,27,27,.62);
  --line:rgba(30,27,27,.13);
  --field:#F3F0ED;
  --shadow:0 1px 2px rgba(30,27,27,.05), 0 24px 48px -28px rgba(30,27,27,.32);
  --accent:#FE4E31;
  --accent-deep:#E0381C;
  --accent-text:#C4321A;
  --ok:#1E8F57;
  --cell:#1E1B1B;
  --cell-ink:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#100E0E;
    --surface:#1B1817;
    --ink:#F7F3F0;
    --muted:rgba(247,243,240,.62);
    --line:rgba(255,255,255,.14);
    --field:#24201F;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 48px -28px rgba(0,0,0,.9);
    --accent-text:#FF6A4F;
    --ok:#3FD98A;
    --cell:#F7F3F0;
    --cell-ink:#1E1B1B;
  }
}
:root[data-theme="dark"]{
  --bg:#100E0E;--surface:#1B1817;--ink:#F7F3F0;--muted:rgba(247,243,240,.62);
  --line:rgba(255,255,255,.14);--field:#24201F;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 48px -28px rgba(0,0,0,.9);
  --accent-text:#FF6A4F;--ok:#3FD98A;--cell:#F7F3F0;--cell-ink:#1E1B1B;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.55 'DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;
  padding:40px 16px calc(32px + env(safe-area-inset-bottom));
}

.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;
  font:700 20px/1 'Sora',sans-serif;letter-spacing:-.01em}
.mark{width:40px;height:30px}

.card{
  width:100%;max-width:420px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:36px 28px 30px;
  text-align:center;
}
h1{font:700 24px/1.2 'Sora',sans-serif;letter-spacing:-.02em;margin:18px 0 8px}
.body{margin:0;color:var(--muted)}
.body strong{color:var(--ink);font-weight:600;word-break:break-word}

/* The cell: the logo's hexagon, ink, holding what happened. */
.cell{width:88px;height:88px;margin:0 auto}
.cell svg{width:100%;height:100%;overflow:visible}
.hex{fill:var(--cell);stroke:var(--cell);stroke-width:14;stroke-linejoin:round;
  transform-origin:60px 60px;transition:fill .3s,stroke .3s}
.glyph{fill:none;stroke:var(--cell-ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  opacity:0}
.cell[data-state="wait"] .hex{animation:breathe 1.4s ease-in-out infinite}
.cell[data-state="ok"] .hex{fill:var(--accent);stroke:var(--accent);animation:land .5s cubic-bezier(.2,.9,.3,1.3)}
.cell[data-state="ok"] .g-ok{opacity:1;stroke:#1E1B1B;stroke-dasharray:70;stroke-dashoffset:70;
  animation:draw .45s .2s ease-out forwards}
.cell[data-state="no"] .g-no{opacity:1}
.cell[data-state="key"] .g-key{opacity:1}
@keyframes breathe{50%{transform:scale(.9) rotate(30deg)}}
@keyframes land{0%{transform:scale(.7) rotate(-60deg)}100%{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .hex,.glyph{animation:none!important}
  .cell[data-state="ok"] .g-ok{stroke-dashoffset:0}
}

.reset{margin-top:22px;text-align:left}
.reset label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
.field{display:flex;align-items:center;background:var(--field);border:1.5px solid transparent;
  border-radius:14px;transition:border-color .15s}
.field:focus-within{border-color:var(--accent)}
.field input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:500 16px/1 'DM Sans',sans-serif;padding:15px 14px;outline:none}
.show{border:0;background:none;color:var(--muted);font:600 13px 'DM Sans',sans-serif;
  padding:0 14px;cursor:pointer;align-self:stretch}
.hint{margin:6px 2px 0;font-size:13px;color:var(--muted)}
.hint.bad{color:var(--accent-text)}

.button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;
  margin-top:20px;border:0;border-radius:14px;cursor:pointer;text-decoration:none;
  background:var(--accent);color:#1E1B1B;font:700 16px/1 'Sora',sans-serif;
  transition:transform .12s,opacity .12s}
.button:active{transform:scale(.98);opacity:.85}
.button[disabled]{opacity:.5;cursor:default}
.button.quiet{background:var(--field);color:var(--ink)}
.actions{margin-top:6px}

.steps{list-style:none;margin:20px 0 0;padding:16px 18px;text-align:left;
  background:var(--field);border-radius:16px;font-size:15px}
.steps li{display:flex;gap:12px;align-items:baseline}
.steps li+li{margin-top:8px}
.steps b{font:700 13px 'Sora',sans-serif;color:var(--accent-text);min-width:14px}

.foot{font-size:14px;color:var(--muted)}
.foot a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}