/* ═══════════════════════════════════════════════════════════════════════════ eduNotes — AUTH PAGE GLUE (Stage 4 · wave 1) ─────────────────────────────────────────────────────────────────────────── Ported from design/mockups/auth/page.css. Auth is the ONE STANDALONE wave: login.html / register.html do NOT extend base.html — no app-shell, sidebar, toolbar or tab bar (those only exist after sign-in). The .c-login card sits directly on a calm backdrop with the page's own theme toggle, top-right. What lives here (one-page layout, not reusable) vs. components.css: · .auth-stage — the centred backdrop layout (this file) · .auth-theme-btn — the standalone page theme toggle (this file) · .c-login family — card / fields / error / footer / note (components.css) · .c-pw-field — password input + eye toggle (components.css) Backdrop = var(--surface-page): #D8E5F5 light, #1C1C1E dark. Theme-aware token, so it sidesteps the --ice fixed-token trap by construction. NOTE: .c-scope (the --ctl-h* control-height tokens + box-sizing) is carried on in each template — without it the .c-input/.c-btn collapse to text height (the .c-scope gotcha). The app-shell normally provides it; auth drops the shell, so the page must carry it itself. ═══════════════════════════════════════════════════════════════════════════ */ /* The stage fills the viewport and centres the card. */ .auth-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-xxl); background: var(--surface-page); } /* Standalone page theme toggle (top-LEFT — the only change from the locked design; Daniel approved the move). There's no sidebar to host it, so it lives on the page itself — exactly like the live auth pages. (Visible now that the covering bug is fixed — the button sits INSIDE .auth-stage; see the template comment.) */ .auth-theme-btn { position: absolute; top: 16px; left: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-sm); transition: color 0.1s, background 0.1s; } .auth-theme-btn:hover { color: var(--primary); background: var(--surface-hover); } .auth-theme-btn svg { width: 17px; height: 17px; } html[data-theme="dark"] .auth-theme-btn:hover { color: var(--text-body); background: rgba(255,255,255,0.08); } /* The footer "Create account" / "Sign in" control is a REAL (kept for navigation), styled as a ghost button. The library's .c-btn doesn't zero the anchor underline (it assumes a