/* ADHDer app authentication — compact, responsive, centered. */
:root { color-scheme:dark; --bg:#0c0d0e; --text:#f2f2f3; --muted:#999a9e; --tile:#191a1c; }
*,*::before,*::after { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.login-shell { width:100%; max-width:352px; margin:auto; }
.login-brand { display:flex; align-items:center; gap:16px; margin:0 0 30px; text-decoration:none; color:var(--text); max-width:max-content; }
.brand-word { font-weight:850; font-size:29px; letter-spacing:-.095em; line-height:1; white-space:nowrap; }
.brand-word sup { font-size:9px; letter-spacing:0; font-weight:650; vertical-align:top; position:relative; top:-2px; left:1px; }
.brand-descriptor { border-left:1px solid #57585b; padding-left:13px; color:#b4b5b8; font-size:8px; line-height:1.32; font-weight:750; letter-spacing:.095em; white-space:nowrap; }
h1 { font-size:30px; line-height:1.12; font-weight:700; letter-spacing:-.06em; margin:0 0 23px; }
.login-form { display:flex; flex-direction:column; gap:12px; }
.field { display:flex; flex-direction:column; gap:7px; }
.login-form .field label { color:var(--muted); font-size:12px; line-height:1.25; font-weight:450; }
.login-form input:not([type="checkbox"]) { display:block; width:100%; height:46px; min-height:46px; border:0; border-radius:12px; background:var(--tile); color:var(--text); padding:10px 14px; font:inherit; font-size:16px; outline:none; }
.login-form input:not([type="checkbox"])::placeholder { color:#75767a; }
.login-form input:not([type="checkbox"]):focus-visible { outline:2px solid #efefef; outline-offset:2px; }
.login-form .remember-choice { display:flex; flex-direction:row; align-items:center; gap:10px; margin:2px 0 0; padding:0; min-height:24px; width:100%; color:#bfc0c3; font-size:12.5px; line-height:1.36; font-weight:450; cursor:pointer; }
.login-form .remember-choice input[type="checkbox"] { position:static; display:block; appearance:auto; -webkit-appearance:checkbox; width:18px; height:18px; min-width:18px; min-height:18px; flex:0 0 18px; margin:0; padding:0; border:0; border-radius:0; background:transparent; accent-color:#eee; }
.login-form .remember-choice span { display:block; min-width:0; }
.login-form button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; margin-top:7px; padding:12px 17px; border:0; border-radius:12px; background:#f4f4f4; color:#111; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.login-form button:focus-visible, a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.login-switch { margin:20px 0 0; text-align:center; color:var(--muted); font-size:12.5px; line-height:1.4; }
.login-switch a,.terms-choice a { color:#f2f2f3; text-decoration:underline; text-underline-offset:3px; }
.login-error { margin:0 0 15px; color:#ffb8b8; font-size:12px; line-height:1.4; }
.login-error p { margin:0 0 4px; }
.register-shell .login-brand { margin-bottom:20px; }
.register-shell h1 { margin-bottom:18px; font-size:27px; }
.register-shell .login-form { gap:10px; }
.register-shell .login-form input:not([type="checkbox"]) { height:44px; min-height:44px; }
.register-shell .login-form .terms-choice { margin:0; }
.register-shell .login-form .remember-choice { align-items:center; }
.register-shell .login-form button { margin-top:4px; }
.register-shell .login-switch { margin-top:15px; }
.field-hint { color:#77787c; font-size:11px; }
.hp-field { position:absolute!important; left:-10000px!important; top:auto; width:1px!important; height:1px!important; overflow:hidden!important; }
@media (max-width:360px) { body { padding-inline:16px; } .brand-word { font-size:27px; } h1 { font-size:27px; } .login-brand { gap:12px; } }
@media (max-height:650px) { body { place-items:start center; } .login-shell { margin:auto 0; } .login-brand { margin-bottom:19px; } h1 { margin-bottom:17px; } .register-shell .login-brand { margin-bottom:13px; } }
@media (max-height:500px) { body { place-items:start center; } }
/* 2026-10-28: mascot above the wordmark (app login/register). */
.login-brand { flex-wrap:wrap; }
.login-mascot { flex:0 0 100%; display:block; width:auto; height:88px; margin:0 0 14px -6px; object-fit:contain; object-position:left center; }
.register-shell .login-mascot { height:68px; margin-bottom:10px; }
@media (min-width:700px) and (min-height:700px) { .login-mascot { height:104px; } .register-shell .login-mascot { height:80px; } }
@media (max-height:650px) { .login-mascot { height:60px; margin-bottom:10px; } .register-shell .login-mascot { height:48px; } }
/* 2026-10-28: Continue with Google (app login/register + /google-login.php). Google sign-in branding: white button, multicolour G. */
.google-login { margin:0 0 14px; }
a.google-login-button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:48px; padding:12px 17px; border:1px solid #747775; border-radius:12px; background:#fff; color:#1f1f1f; font:500 14px/1.2 Roboto,Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; letter-spacing:.01em; text-decoration:none; }
a.google-login-button:hover { background:#f2f2f2; }
.google-login-logo { display:block; width:20px; height:20px; flex:0 0 20px; }
.google-login-or { display:flex; align-items:center; gap:12px; margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1; text-transform:uppercase; letter-spacing:.12em; }
.google-login-or::before, .google-login-or::after { content:""; flex:1 1 auto; height:1px; background:#2c2d30; }
.register-shell .google-login { margin-bottom:10px; }
.register-shell .google-login-or { margin-top:10px; }
.google-login-note { margin:-8px 0 18px; color:#bfc0c3; font-size:13px; line-height:1.45; }
.google-login-note strong { color:var(--text); font-weight:600; overflow-wrap:anywhere; }
@media (max-height:650px) { .google-login { margin-bottom:10px; } .google-login-or { margin-top:10px; } }