/* ============================================================================
 * site/templates/login.php — this page's own vocabulary.
 * Graduated from the <style> block that sat in the template (17 lines, #1309
 * part 3). Verbatim and in its original order; the page has its own <head> and this
 * file is linked right after design-system.css, where the block sat. It restyles
 * * and body — a layout reset for the one page rendered without the shell.
 * Nothing renders differently — proven by tests/style_fingerprint.mjs (every
 * computed property of every element at 400/900/1440 identical before and after).
 * ========================================================================== */
    /* Page-scoped layout only — components come from design-system.css.
       ponytail: minimal body base lives here until #19 adds the shared
       base layer to design-system.css; shed it then. */
    * { box-sizing: border-box; }
    body { margin: 0; font-family: var(--font-primary); background: var(--bg); color: var(--primary); }
    .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .login-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
    .login-card { width: 100%; max-width: 360px; position: relative; z-index: 1; box-shadow: var(--shadow-lg); }
    .login-smiley { width: 48px; height: 48px; margin: 0 auto var(--space-5); }
    .login-title { text-align: center; font-size: var(--text-xl); font-weight: 600; margin: 0 0 var(--space-6); }
    .login-error { display: none; color: var(--error); background: rgb(var(--error-rgb) / .12); border: 1px solid rgb(var(--error-rgb) / .4); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); }
    .login-error.show { display: block; }
    .login-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--text-secondary); font-size: var(--text-sm); }
    .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .login-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; }
    .login-card .field { max-width: none; }
    .login-submit { width: 100%; justify-content: center; margin-top: var(--space-2); }
    /* #1380 — the emailed-code door. Page vocabulary only: the form, the fields
       and the buttons are all kit classes; these are the two bits of copy the
       kit has no opinion about. */
    .login-note { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-3) 0 0; text-align: center; }
    .login-switch { display: block; width: 100%; margin-top: var(--space-4); background: none; border: 0; padding: 0;
                    font-size: var(--text-sm); color: var(--text-secondary); text-align: center; cursor: pointer; }
    .login-switch:hover { color: var(--primary); }
