/* Extracted from site/login.html on 2026-04-14 */

body { background: var(--bg-muted); }
        .login-wrap { max-width: 400px; margin: 0 auto; padding: 80px 20px 60px; }
        .login-card { background: white; border-radius: 16px; border: 1.5px solid var(--border); padding: 36px 28px; text-align: center; }
        .login-card .logo {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 4px;
            line-height: 1;
        }
        .login-card .logo span { color: var(--accent); }
        /* No flex / gap on the parent: gap would also break "Scan" away
           from the brand-blue "Raise" span. Inline-block + margin-right
           keeps the icon attached to the wordmark as one unit while still
           letting Lucide swap <i> into <svg> with the right dimensions. */
        .login-card .logo > i.logo-icon,
        .login-card .logo > svg.logo-icon {
            display: inline-block;
            width: 28px;
            height: 28px;
            color: #0f172a;
            vertical-align: middle;
            margin-right: 8px;
            position: relative;
            top: -2px;
        }
        .login-card .logo .logo-icon svg path,
        .login-card .logo .logo-icon svg rect,
        .login-card .logo .logo-icon svg line { stroke: #0f172a; }
        .login-card .sub { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }
        .login-card label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
        .login-card input[type="email"] { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
            font-size: 15px; outline: none; box-sizing: border-box; margin-bottom: 16px; }
        .login-card input:focus { border-color: var(--accent); }
        .login-card button { width: 100%; padding: 14px; background: var(--accent); color: white; border: none;
            border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; }
        .login-card button:hover { opacity: 0.9; }
        .login-card button:disabled { opacity: 0.5; cursor: not-allowed; }
        .success-msg { display: none; padding: 16px; background: #ecfdf5; border-radius: 10px; margin-top: 16px; font-size: 14px; color: #065f46; line-height: 1.5; }
        .error-msg { display: none; padding: 12px; background: #fef2f2; border-radius: 10px; margin-bottom: 16px; font-size: 13px; color: #991b1b; }
        .divider { margin: 24px 0 16px; font-size: 13px; color: var(--text-muted); }
        .create-link { font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 600; }
        .create-link:hover { text-decoration: underline; }
        .sso-divider { margin: 20px 0; display: flex; align-items: center; gap: 12px; }
        .sso-divider::before, .sso-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
        .sso-divider span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
        .sso-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
            padding: 12px 20px; background: #1a1a2e; color: #fff; text-decoration: none;
            border-radius: 10px; font-weight: 600; font-size: 14px; box-sizing: border-box; }
        .sso-btn:hover { background: #2a2a4e; }
        .sso-btn svg { flex-shrink: 0; }

        /* Passkey button - shown only to returning visitors who have
           enrolled a passkey on this device (localStorage flag). Styled as
           a subtle ghost button, not the primary CTA. Selector matches
           `.login-card .passkey-btn` to outrank the generic
           `.login-card button` rule that colors the primary button blue. */
        .login-card .passkey-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
            padding: 12px 20px; background: white; color: #1a1a2e;
            border: 1.5px solid var(--border); border-radius: 10px;
            font-weight: 600; font-size: 14px; cursor: pointer; box-sizing: border-box;
        }
        .login-card .passkey-btn:hover { border-color: var(--accent); background: #f9fafb; }
        .login-card .passkey-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .login-card .passkey-btn svg { flex-shrink: 0; color: #1a1a2e; }
        .passkey-status { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

        .school-sso { display: flex; flex-direction: column; gap: 8px; }
        .school-sso .sso-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
            padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 14px;
            text-decoration: none; box-sizing: border-box; border: 1.5px solid var(--border);
            background: white; color: #1a1a2e;
        }
        .school-sso .sso-btn:hover { border-color: var(--accent); background: #f9fafb; }
        /* Clever brand button: #1464FF, sampled directly from Clever's
           official C mark PNG (clever.com favicon, /img/sso/clever-icon.png).
           Button background HAS to match the icon background exactly or
           the icon's blue square is visible against the button blue and
           reads as off-brand. Hover darkens 12% (#0F50CC). */
        .school-sso .sso-btn-clever { background: #1464FF; color: white; border-color: #1464FF; }
        .school-sso .sso-btn-clever:hover { background: #0F50CC; border-color: #0F50CC; }
        .school-sso .sso-btn-clever .sso-btn-icon {
            border-radius: 4px; /* matches the icon's rounded square corners */
        }
        .school-sso .sso-btn-classlink { background: #0a4d7f; color: white; border-color: #0a4d7f; }
        .school-sso .sso-btn-classlink:hover { background: #083a60; border-color: #083a60; }
        .school-sso .sso-btn .sso-btn-icon { width: 22px; height: 22px; flex-shrink: 0; display: block; }

        .help-list {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .help-list li {
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-muted);
            padding-left: 18px;
            position: relative;
        }
        .help-list li::before {
            content: "→";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--accent);
            font-weight: 700;
        }
        .help-list strong { color: var(--text-secondary); font-weight: 600; margin-right: 4px; }
        .help-list a { color: var(--accent); text-decoration: none; font-weight: 600; }
        .help-list a:hover { text-decoration: underline; }