/* login.css — the login, signup and reset pages (DPW2 W-B, 2026-10-21). They belong to the editor: its tokens
   (site/assets/editor/core.css, loaded before this file on body.ed), plain, left-aligned, dark. No card, no glow. */
body.ed.au { height: auto; min-height: 100svh; overflow: auto; display: block; background: var(--e-bg); font-size: var(--fs-body); }
.au-wrap { max-width: 440px; padding: clamp(24px, 12vh, 120px) var(--sp-4) var(--sp-5); margin-left: clamp(0px, 10vw, 160px); }
.au-brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--e-dim); font-size: var(--fs-sec); font-weight: var(--fw-semi); text-decoration: none; margin-bottom: var(--sp-5); }
.au-brand svg { width: 18px; height: 18px; fill: var(--e-text); }
.au h1 { font-size: var(--fs-head); font-weight: var(--fw-bold); letter-spacing: -.01em; line-height: 1.2; color: var(--e-text); }
.au-sub { color: var(--e-dim); font-size: var(--fs-sec); margin: var(--sp-2) 0 var(--sp-5); line-height: 1.5; }
.au-sub b { color: var(--e-text); font-weight: var(--fw-semi); }

.au-step { display: none; }
.au-main[data-step] .au-step[data-s] { display: none; }
.au-main[data-step="a"] .au-step[data-s="a"], .au-main[data-step="b"] .au-step[data-s="b"], .au-main[data-step="c"] .au-step[data-s="c"],
.au-main[data-step="d"] .au-step[data-s="d"], .au-main[data-step="x"] .au-step[data-s="x"] { display: block; animation: au-in var(--e-mid) var(--e-ease); }
@keyframes au-in { from { opacity: 0; transform: translateY(4px); } }

.au-f { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.au-f[hidden] { display: none; }
.au-f > span { font-size: var(--fs-sec); font-weight: var(--fw-semi); color: var(--e-text); }
.au-f input, .au-code input {
  height: var(--hit); border-radius: var(--e-r-in); border: 1px solid var(--e-line2); background: var(--e-field);
  color: var(--e-text); font: var(--fs-in) var(--sans); padding: 0 var(--sp-3); outline: none; width: 100%;
  transition: border-color var(--e-fast), box-shadow var(--e-fast);
}
.au-f input:focus, .au-code input:focus { border-color: var(--e-sel-b); box-shadow: 0 0 0 3px var(--e-sel-a); }
.au-f input[aria-invalid="true"] { border-color: rgba(255,107,107,.55); }
.au-hint { font-size: var(--fs-meta); color: var(--e-faint); line-height: 1.45; min-height: 17px; }
.au-hint.ok { color: var(--e-ok); }
.au-hint.bad { color: var(--e-danger); }
.au-pre { display: flex; align-items: stretch; border: 1px solid var(--e-line2); border-radius: var(--e-r-in); background: var(--e-field); transition: border-color var(--e-fast), box-shadow var(--e-fast); }
.au-pre:focus-within { border-color: var(--e-sel-b); box-shadow: 0 0 0 3px var(--e-sel-a); }
.au-pre i { font-style: normal; display: flex; align-items: center; padding-left: var(--sp-3); color: var(--e-faint); font-size: var(--fs-in); white-space: nowrap; }
.au-pre input { border: 0; background: none; box-shadow: none !important; padding-left: 1px; }

.au-ts { margin: 0 0 var(--sp-3); }
.au-ts:empty { margin: 0; }
.au-btn {
  position: relative; width: 100%; height: var(--hit); margin-top: var(--sp-1); border-radius: var(--e-r-in); border: 0; cursor: pointer;
  background: var(--e-pri); color: var(--e-pri-ink); font: var(--fw-bold) var(--fs-body) var(--sans); transition: opacity var(--e-fast), background var(--e-fast);
}
.au-btn:hover:not(:disabled) { background: #fff; }
.au-btn:disabled { opacity: .38; cursor: default; }
.au-btn.busy span { opacity: 0; }
.au-btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); border-top-color: var(--e-pri-ink); animation: au-spin .7s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-err { min-height: 20px; margin-top: var(--sp-3); font-size: var(--fs-sec); color: var(--e-danger); opacity: 0; transition: opacity var(--e-fast); }
.au-err.on { opacity: 1; }
.au-err.good { color: var(--e-ok); }

.au-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); max-width: 360px; }
.au-code input { padding: 0; text-align: center; font: var(--fw-semi) 20px var(--mono); height: 52px; }
.au-row { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3); }
.au-link { background: none; border: 0; color: var(--e-dim); font: var(--fs-sec) var(--sans); cursor: pointer; padding: 0; min-height: var(--hit); text-decoration: none; display: inline-flex; align-items: center; }
.au-link:hover:not(:disabled) { color: var(--e-text); text-decoration: underline; }
.au-link:disabled { color: var(--e-faint); opacity: .7; cursor: default; }
.au-foot { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--e-line); color: var(--e-faint); font-size: var(--fs-sec); }
.au-foot a { color: var(--e-dim); }
.au-foot a:hover { color: var(--e-text); }
.au-addr { font-family: var(--mono); color: var(--e-text); }
.au-note { padding: var(--sp-3) var(--sp-4); border-radius: var(--e-r-in); background: var(--e-card); border: 1px solid var(--e-line); color: var(--e-dim); font-size: var(--fs-sec); line-height: 1.5; margin-bottom: var(--sp-4); }
.au-note b { color: var(--e-text); font-weight: var(--fw-semi); }

@media (max-width: 860px) { body.ed.au { --fs-in: 16px; } .au-wrap { margin-left: 0; padding-top: 40px; } }
@media (prefers-reduced-motion: reduce) { .au-step { animation: none !important; } }