/* Extracted from signup.html so it can run under a strict CSP
   (style-src 'self' — no 'unsafe-inline' on <style> blocks).
   The original inline <style>...</style> in signup.html is now a
   <link rel="stylesheet"> reference to this file. */

/* Fonts hoisted to HTML <link> in signup.html for parallel fetch — see commit log. */

* { box-sizing: border-box; }
        body { font-family: 'Manrope', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #0f172a; color: white; margin:0; padding: 20px; }
        .card { background: #1e293b; padding: 40px; border-radius: 16px; border: 1px solid #334155; width: 100%; max-width: 360px; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6), 0 4px 10px -2px rgba(0,0,0,0.32); text-align: center;}
        h1 { font-family: 'Bricolage Grotesque', 'Segoe UI', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: #38bdf8; margin-bottom: 25px; }
        /* font-size:16px on inputs prevents iOS auto-zoom on focus */
        input { width: 100%; background: #0f172a; border: 1px solid #334155; color: white; padding: 14px; margin-bottom: 15px; border-radius: 8px; font-size: 16px; outline: none; transition: border-color 0.2s; font-family: inherit; }
        input:focus { border-color: #38bdf8; }
        button { background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #0f172a; width: 100%; font-size: 1rem; padding: 14px; border-radius: 8px; border: none; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; margin-top: 5px; min-height: 48px; font-family: inherit; box-shadow: 0 8px 22px -6px rgba(56,189,248,0.40), 0 2px 6px rgba(0,0,0,0.3); transition: transform 0.18s cubic-bezier(.2,.8,.2,1), filter 0.18s ease; }
        button:hover { filter: brightness(1.06); transform: translateY(-1px); }
        button:active { transform: translateY(0); }
        p { margin-top: 15px; font-size: 0.85rem; color: #94a3b8; }
        a { color: #38bdf8; text-decoration: none; font-weight: bold; }
        @media (max-width: 480px) {
            body { padding: 0; align-items: stretch; }
            .card { max-width: 100%; min-height: 100vh; min-height: 100dvh; border-radius: 0; border: none; padding: 32px 22px; display: flex; flex-direction: column; justify-content: center; }
        }
        /* Visually-hidden — for screen-reader-only labels. */
        .visually-hidden {
            position: absolute !important;
            width: 1px; height: 1px;
            padding: 0; margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Phase 5: legal links + consent line on auth pages. */
        .auth-legal-links {
            margin-top: 22px;
            font-size: 0.78rem;
            color: rgba(148,163,184,0.85);
            text-align: center;
        }
        .auth-legal-links a,
        .auth-legal-links button { color: rgba(148,163,184,1); text-decoration: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; width: auto; min-height: 0; display: inline; box-shadow: none; }
        .auth-legal-links a:hover,
        .auth-legal-links button:hover { color: var(--accent, #38bdf8); text-decoration: underline; }
        .auth-legal-links span { margin: 0 8px; opacity: 0.6; }

        .auth-legal-consent {
            margin-top: 16px;
            font-size: 0.78rem;
            color: rgba(148,163,184,0.85);
            text-align: center;
            line-height: 1.5;
        }
        .auth-legal-consent a { color: rgba(148,163,184,1); text-decoration: underline; }
        .auth-legal-consent a:hover { color: var(--accent, #38bdf8); }

        /* Phase 5.4 — DOB / age-gate field. Matches the styling of the
           other inputs but with an explicit visible label since type=date
           pickers are notoriously vague otherwise. */
        .dob-label {
            display: block;
            font-size: 0.78rem;
            color: rgba(148, 163, 184, 0.95);
            text-align: left;
            margin: 6px 4px 4px;
            font-weight: 600;
            letter-spacing: 0.2px;
            text-transform: uppercase;
        }
        .dob-label .dob-hint {
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
            color: #cbd5e1;
        }
        .dob-help {
            font-size: 0.72rem;
            color: #cbd5e1;
            margin: 4px 4px 12px;
            text-align: left;
            line-height: 1.4;
        }
        input[type="date"]#dob {
            color-scheme: dark;
            cursor: pointer;
        }
        input[type="date"]#dob[aria-invalid="true"] {
            border-color: #f87171;
        }