/* Account pages (sign in, sign up, forgot and set password): same tokens and page opening as the rest of the site.
   Scoped under the page container so it wins over the older shared rules in styles.css. */
#_pages_content .b-auth{max-width:440px;margin:24px auto;padding:24px 32px;box-sizing:border-box;background:var(--b-surface);border:1px solid var(--b-line);border-radius:var(--b-r-card);box-shadow:none;font-family:var(--b-font)}
#_pages_content .b-auth .title{font:800 var(--b-h1)/1.15 var(--b-font);letter-spacing:-0.015em;color:var(--b-text);margin:0 0 6px}
#_pages_content .b-auth .subtitle{font:400 16px/1.5 var(--b-font);color:var(--b-text-2);margin:0 0 8px}
#_pages_content .b-auth .label{display:block;margin:12px 0 6px;font:700 12px var(--b-font);letter-spacing:.08em;text-transform:uppercase;color:var(--b-text-2)}
#_pages_content .b-auth .input{width:100%;box-sizing:border-box;padding:11px 14px;background:var(--b-bg);border:1px solid var(--b-line);border-radius:var(--b-r-sm);color:var(--b-text);font:16px var(--b-font);outline:none}
#_pages_content .b-auth .input::placeholder{color:var(--b-text-3)}
#_pages_content .b-auth .input:focus{border-color:var(--b-teal)}
#_pages_content .b-auth .input-pw{padding-right:42px}
#_pages_content .b-auth .btn-primary{display:block;width:100%;max-width:none;margin-top:18px;padding:12px 26px;background:var(--b-teal);color:#0F1117;border:0;border-radius:var(--b-r-pill);box-shadow:none;font:700 14px var(--b-font);cursor:pointer}
#_pages_content .b-auth .btn-primary:hover{opacity:.85;background:var(--b-teal)}
#_pages_content .b-auth .msg{min-height:0;margin-top:10px;font-size:14px;color:var(--b-text-2)}
#_pages_content .b-auth .msg:empty{display:none}
#_pages_content .b-auth .divider-text{display:flex;align-items:center;gap:12px;margin:14px 0 10px;font-size:12px;color:var(--b-text-3)}
#_pages_content .b-auth .divider-text::before,#_pages_content .b-auth .divider-text::after{content:"";flex:1;height:1px;background:var(--b-line)}
#_pages_content .b-auth .oauth-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#_pages_content .b-auth .btn-oauth{display:block;text-align:center;padding:10px 12px;background:var(--b-surface-2);border:1px solid var(--b-line);border-radius:var(--b-r-pill);color:var(--b-text);font:600 14px var(--b-font);text-decoration:none}
#_pages_content .b-auth .btn-oauth:hover{border-color:var(--b-teal)}
#_pages_content .b-auth .auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:14px}
#_pages_content .b-auth .auth-links:has(> :only-child){justify-content:center}
#_pages_content .b-auth .link{color:var(--b-teal);font-weight:600;text-decoration:none}
#_pages_content .b-auth .link:hover{text-decoration:underline}
@media (max-width:480px){#_pages_content .b-auth{margin:24px 16px;padding:24px 20px}}
/* Phones: Create account (three fields) fills the height between the top bar and the tab bar: every gap grows
   with the extra height (x = --avail - 470px), from tight on the shortest phones to roomy on tall ones, so
   Google / GitHub and the Sign in link stay on screen and there's no empty band below (Sign in already fits) */
@media (max-width:768px){
  #_pages_content .b-auth:has(#su_pw2_toggle){--avail:calc(100svh - 126px - env(safe-area-inset-bottom));--x:calc(var(--avail) - 470px);
    margin:clamp(8px,calc(8px + var(--x) * 0.085),36px) 16px clamp(8px,calc(8px + var(--x) * 0.043),24px);
    padding:clamp(14px,calc(14px + var(--x) * 0.076),40px) 20px}
  #_pages_content .b-auth:has(#su_pw2_toggle) .title{font-size:clamp(24px,calc(24px + var(--x) * 0.025),30px)}
  #_pages_content .b-auth:has(#su_pw2_toggle) .subtitle{font-size:clamp(14px,calc(14px + var(--x) * 0.009),16px);margin-bottom:clamp(4px,calc(4px + var(--x) * 0.025),12px)}
  #_pages_content .b-auth:has(#su_pw2_toggle) .label{margin:clamp(7px,calc(7px + var(--x) * 0.051),22px) 0 clamp(5px,calc(5px + var(--x) * 0.013),9px)}
  #_pages_content .b-auth:has(#su_pw2_toggle) .input{padding:clamp(8px,calc(8px + var(--x) * 0.025),16px) 14px}
  #_pages_content .b-auth:has(#su_pw2_toggle) .btn-primary{margin-top:clamp(10px,calc(10px + var(--x) * 0.060),28px);padding-top:clamp(12px,calc(12px + var(--x) * 0.013),16px);padding-bottom:clamp(12px,calc(12px + var(--x) * 0.013),16px)}
  #_pages_content .b-auth:has(#su_pw2_toggle) .divider-text{margin:clamp(8px,calc(8px + var(--x) * 0.051),24px) 0 clamp(6px,calc(6px + var(--x) * 0.034),16px)}
  #_pages_content .b-auth:has(#su_pw2_toggle) .btn-oauth{padding-top:clamp(10px,calc(10px + var(--x) * 0.013),14px);padding-bottom:clamp(10px,calc(10px + var(--x) * 0.013),14px)}
  #_pages_content .b-auth:has(#su_pw2_toggle) .auth-links{margin-top:clamp(8px,calc(8px + var(--x) * 0.051),24px)}
}

@media (max-width:768px){html.standalone #_pages_content .b-auth:has(#su_pw2_toggle){--avail:calc(100svh - 126px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}}   /* app: status bar too */