/* OsDot sign-in layout — one centred card, phone-first. */
.auth-page{min-height:100vh;background:var(--bg)}
.auth-frame{max-width:30rem;margin:0 auto;padding:1rem}
.auth-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;min-height:56px}
.auth-header .brand{display:flex;align-items:center;gap:.5rem;min-width:0;overflow-wrap:anywhere;min-height:44px;font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}
.auth-home{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--muted);text-decoration:none}
.auth-stage{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.5rem;box-shadow:var(--shadow)}
.auth-stage h1{font-size:1.5rem}
/* 0.2.2 (the owner's approval of batch 2, item 3): a page in this layout that leaves a button bare (the product's sign-in
   page, a module's own page) gets the shell's primary look, .secondary its second look, Light and Dark through the tokens;
   a form's buttons keep a gap from the field above. */
.auth-stage button:not(.button){display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.55rem 1.1rem;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer}
.auth-stage button.secondary:not(.button){background:var(--surface);color:var(--ink);border-color:var(--border)}
.auth-stage form>button,.auth-stage form>.button{margin:.75rem .5rem 0 0}
/* 0.2.9: a bare button hovers as .button does (the owner's rule of 2026-10-19) */
.auth-stage button:not(.button){transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.auth-stage button:not(.button,.secondary):is(:hover,:active):not([disabled]){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-hover-ink)}
.auth-stage button.secondary:not(.button):is(:hover,:active):not([disabled]){background:var(--secondary-hover);border-color:var(--secondary-hover);color:var(--secondary-hover-ink)}
@media (prefers-reduced-motion:reduce){.auth-stage button:not(.button){transition:none}}
@media (min-width:640px){.auth-frame{padding-top:3rem}.auth-stage{padding:2rem}}