/* Login and account pages, in the book's look: chart-paper ground, ink outlines, Fredoka
   headings, Atkinson body, buttons pressed like a seal into wax. Colors come from
   /pages/ds/kdo/tokens.css (light on :root, dark on [data-theme="dark"]). */
*{box-sizing:border-box}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{
  margin:0;min-height:100vh;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;
}
a{color:var(--link)}a:hover{color:var(--ink)}
[data-theme="dark"] a:not(.btn):not(.brand){color:var(--terracotta)}[data-theme="dark"] a:not(.btn):not(.brand):hover{color:var(--ink)}
h1,h2{font-family:var(--font-head);font-weight:600;line-height:1.15;margin:0}
h1{font-size:32px}
h2{font-size:22px;margin-bottom:6px}
p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:680px;margin:0 auto;padding:20px 16px 0}
.brand{font-family:var(--font-head);font-weight:600;font-size:19px;color:var(--ink);text-decoration:none}
.back{font-size:15px}

.sheet{max-width:680px;margin:0 auto;padding:24px 16px 56px;display:flex;flex-direction:column;gap:20px}
.card{background:var(--card);border:var(--stroke-ink) solid var(--ink);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;gap:12px}

.hero{flex-direction:row;align-items:center;gap:20px}
.hero .art{flex:none;width:132px;height:132px;border:var(--stroke-ink) solid var(--ink);border-radius:50%;background:#C4E0FA;display:grid;place-items:center;overflow:hidden}
.hero .art img{width:112px;height:auto;display:block}
.hero--gate .art{width:150px;height:118px;border-radius:var(--radius-md)}
.hero--gate .art img{width:140px}
.hero h1{margin-bottom:6px}
.lead{color:var(--ink-soft)}
@media (max-width:520px){
  .hero{flex-direction:column;align-items:flex-start}
  h1{font-size:28px}
}

label,.label{font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--ink-soft)}
input{
  font:inherit;color:var(--ink);background:var(--paper);
  border:var(--stroke-ink) solid var(--ink);border-radius:var(--radius-sm);
  padding:10px 12px;min-height:48px;width:100%;
}
input::placeholder{color:var(--ink-soft);opacity:.8}
input:focus-visible{outline:3px solid var(--node);outline-offset:2px}
form{display:flex;flex-direction:column;gap:10px}
form.inline{flex-direction:row;flex-wrap:wrap}
form.inline input{flex:1 1 220px;width:auto;font-family:var(--font-mono);letter-spacing:.04em}

.btn{
  font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;
  background:var(--paper);border:var(--stroke-ink) solid var(--ink);border-radius:var(--radius-sm);
  padding:9px 16px;min-height:48px;cursor:pointer;box-shadow:var(--press);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s,box-shadow .08s;align-self:flex-start;
}
.btn:hover{color:var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--press)}
.btn:focus-visible{outline:3px solid var(--node);outline-offset:3px}
.btn--primary{background:var(--highlight)}
.btn--small{padding:4px 12px;min-height:36px;font-size:15px}
.btn--quiet{background:var(--card)}
form .btn{align-self:flex-start}

.or{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:15px}
.or::before,.or::after{content:"";flex:1;border-top:2px dashed var(--ink-soft);opacity:.45}
.hint{color:var(--ink-soft);font-size:15px}
.hint:empty{display:none}
.note{border-left:4px solid var(--villain);padding:6px 12px;background:var(--card);border-radius:0 var(--radius-sm) var(--radius-sm) 0}

.msg:empty{display:none}
.msg{font-size:15px;border-radius:var(--radius-sm);padding:8px 12px;border:2px solid transparent}
.msg--ok{background:var(--ok-fill);color:var(--ink);border-color:var(--ok)}
.msg--bad{background:var(--bad-fill);color:var(--ink);border-color:var(--bad)}
.msg--info{background:var(--node-fill);color:var(--ink);border-color:var(--node)}
[data-theme="dark"] .msg--ok{background:#22311A}
[data-theme="dark"] .msg--bad{background:#3A2219}

.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.email{font-weight:700;font-size:19px;overflow-wrap:anywhere}
.pill{font-family:var(--font-head);font-weight:600;font-size:14px;border:2px solid var(--ink);border-radius:var(--radius-pill);padding:3px 12px;white-space:nowrap}
.pill--ok{background:var(--ok-fill);color:#2F4310}
.pill--free{background:var(--node-fill);color:var(--ink)}
[data-theme="dark"] .pill--ok{background:var(--laurel);color:#111A2C}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat{border:2px solid var(--grid);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;background:var(--paper)}
.stat strong{font-family:var(--font-head);font-weight:600;font-size:30px;line-height:1.1}
.stat span{font-size:14px;color:var(--ink-soft);line-height:1.3}
.stat em{font-style:normal;font-size:13px;color:var(--ink-soft)}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.keys li{display:flex;justify-content:space-between;align-items:center;gap:12px;border:2px solid var(--grid);border-radius:var(--radius-sm);padding:8px 8px 8px 12px;background:var(--paper)}
.keys li.empty{color:var(--ink-soft);justify-content:flex-start;padding:8px 12px}
.ktext{display:flex;flex-direction:column;min-width:0}
.kname{font-weight:700;overflow-wrap:anywhere}
.kwhen{font-size:14px;color:var(--ink-soft)}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}