/* Auth core: sign-in and setup pages (portal density pass, package P9).
   Loaded only by templates/auth/layout.html (admin sign-in, code check, secure link, activate, setup,
   admin reauth) and by the staff sign-in pages (staff_portal/login, invitation, pin_setup, reauth,
   employee/email_login), after admin.css and staff-portal.css. Presentation only: no selector here
   hides or reorders a field, a CSRF input or a passkey hook.
   Rules: calm and quick. A small wordmark, a 24px title (28px desktop), one line of lede, 44px fields and
   one 44px primary button, secondary links as small text with 44px hit areas, errors as one slim line.
   On phones the form starts right under the wordmark (no vertical centring), so the field and the
   button stay visible when the on-screen keyboard opens. Desktop keeps the brand art (the brand moment). */

/* ---- A. admin sign-in shell (body.auth-page, templates/auth/layout.html) ---- */
body.auth-page{font-family:var(--rp-font-ui);color:var(--rp-text)}
body.auth-page h1,body.auth-page .brand{font-family:var(--rp-font-brand)}
.auth-page .auth-form-side{padding:var(--rp-s5) clamp(20px,4vw,56px) var(--rp-s4)}
/* small wordmark; the link itself is the 44px target */
.auth-page .auth-form-side>.brand{align-self:flex-start;min-height:var(--rp-hit);font-size:1rem;gap:10px;letter-spacing:-.3px}
.auth-page .auth-form-side>.brand small{margin-top:1px;font-size:.75rem;color:var(--rp-text-3)}
.auth-page .auth-form-side>.brand .brand-mark{width:23px;height:27px;gap:2px}
.auth-page .auth-form-side>.brand .brand-mark i{width:4px;height:22px}
.auth-page .auth-form-side>.brand .brand-mark i:nth-child(2){height:26px}
.auth-page .auth-form-side>.brand .brand-mark i:nth-child(3){height:19px}
.auth-page .auth-form-side>.brand .brand-mark i:nth-child(4){height:15px}
.auth-page .auth-form-content{max-width:360px;padding:var(--rp-s6) 0}
.auth-page .auth-form-content h1{font-size:1.75rem;line-height:1.15;letter-spacing:-.6px;margin:0 0 var(--rp-s2)}
.auth-page .auth-intro{margin:0 0 var(--rp-s5);font-size:var(--rp-t1);line-height:1.5;color:var(--rp-text-3)}
.auth-page .auth-form-content .notice{margin:0 0 var(--rp-s4)}
.auth-page .auth-form-content .stacked-form{gap:var(--rp-s4)}
.auth-page .auth-form-content .stacked-form label{margin-bottom:4px;font-size:var(--rp-t2);color:var(--rp-text-2)}
.auth-page .auth-form-content input:not([type=hidden]):not([type=checkbox]){min-height:44px;padding:9px 12px;border-radius:var(--rp-radius);font-size:.9375rem}
.auth-page .auth-form-content form small{margin-top:4px;font-size:var(--rp-t3);line-height:1.45;color:var(--rp-text-3)}
.auth-page .auth-form-content .stacked-form button,.auth-page .auth-form-content>.button{width:100%;min-height:44px;margin:0;padding:0 16px;border-radius:var(--rp-radius);font-size:var(--rp-t1)}
.auth-page .auth-form-content>.button{justify-content:space-between;margin-top:var(--rp-s4)}
.auth-page .auth-form-content .stacked-form>p{margin:0 0 var(--rp-s3);font-size:var(--rp-t1);color:var(--rp-text-2);overflow-wrap:anywhere}
.auth-page .auth-helper{margin:var(--rp-s3) 0 0;font-size:var(--rp-t3);line-height:1.5;color:var(--rp-text-3)}
.auth-page .auth-divider{margin:var(--rp-s4) 0 0}
/* secondary link: small text, a 44px tall row */
.auth-page .clock-link{display:inline-flex;min-height:var(--rp-hit);gap:6px;font-size:var(--rp-t2);color:var(--rp-text-3)}
.auth-page .clock-link .icon{width:15px;height:15px}
.auth-page .clock-link strong{color:var(--rp-accent-2)}
.auth-page .auth-form-side footer{margin-top:auto;font-size:var(--rp-t3);color:var(--rp-text-3)}
/* passkeys (hooks untouched: data-passkey-* and .passkey-status stay as they are) */
.auth-page .passkey-login-action{margin:0 0 var(--rp-s4)}
.auth-page .passkey-login-action.secondary-order{margin:var(--rp-s4) 0 0;padding-top:var(--rp-s4)}
.auth-page .passkey-login-action>p{margin:4px 0 0;font-size:var(--rp-t3);color:var(--rp-text-3)}
.auth-page .passkey-button{min-height:44px!important;border-radius:var(--rp-radius);font-size:var(--rp-t1)}

@media(max-width:720px){
  .auth-page .auth-form-side{min-height:100vh;min-height:100dvh;padding:var(--rp-s3) var(--rp-s5) var(--rp-s4)}
  .auth-page .auth-form-side>.brand{font-size:1rem}
  /* top-aligned under the wordmark: nothing for the keyboard to push out of view */
  .auth-page .auth-form-content{margin:0 auto;max-width:420px;padding:var(--rp-s5) 0 var(--rp-s5)}
  .auth-page .auth-form-content h1{font-size:1.5rem}
  .auth-page .auth-form-side footer{padding-top:var(--rp-s4)}
}
@media(max-width:620px){
  body.auth-page :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:max(1rem,16px)!important}
}

/* ---- B. staff sign-in pages (section.auth-core inside the staff shell) ---- */
.auth-core{max-width:400px;padding:var(--rp-s6) var(--rp-s5);color:var(--rp-text)}
.staff-connect .auth-core{margin:auto}
.staff-connect .auth-core-solo{margin:0 auto}
/* signed-out single-column pages sit on white, like the sign-in page (no card) */
html:has(body.staff-connect .auth-core-solo),body.staff-connect:has(.auth-core-solo){background:white}
/* inside the signed-in shell (staff reauth, email settings) the page gutter already pads */
:is(.staff-connected,.staff-onboarding) .auth-core{margin:0;padding:0}
.auth-core h1{margin:0 0 var(--rp-s2);font-size:1.75rem;line-height:1.15;letter-spacing:-.6px}
.auth-core .rp-eyebrow{margin-bottom:var(--rp-s1)}
.auth-core .staff-lead,.auth-core .auth-core-lead{margin:0 0 var(--rp-s5);font-size:var(--rp-t1);line-height:1.5;color:var(--rp-text-3)}
.auth-core .staff-pin-identity{margin:0 0 var(--rp-s1);font-size:var(--rp-t1);color:var(--rp-text)}
.auth-core .notice,.auth-core>.notice.error{margin:0 0 var(--rp-s4)}
.auth-core .stacked-form{gap:var(--rp-s4)}
.auth-core .stacked-form label{margin-bottom:4px;font-size:var(--rp-t2);color:var(--rp-text-2)}
.auth-core select{height:44px}
.auth-core input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.auth-core select{min-height:44px;padding:9px 12px;border-radius:var(--rp-radius);font-size:.9375rem}
.auth-core small{margin-top:4px;font-size:var(--rp-t3);line-height:1.45;color:var(--rp-text-3)}
.auth-core .staff-pin-form .notice.error,.auth-core .stacked-form .notice.error{margin:6px 0 0}
/* one primary action, 44px */
.auth-core form button[type=submit]:not(.auth-core-text-action){width:100%;min-height:44px;margin:0;padding:0 16px;border-radius:var(--rp-radius);font-size:var(--rp-t1);justify-content:space-between}
.auth-core-solo form button[type=submit]:not(.auth-core-text-action){justify-content:center}
/* secondary actions: text with a 44px row */
.auth-core .staff-login-help,.auth-core .auth-core-links{margin:var(--rp-s2) 0 0;font-size:var(--rp-t1)}
.auth-core .staff-login-help a,.auth-core .auth-core-links a{display:inline-flex;align-items:center;min-height:var(--rp-hit)}
.auth-core .staff-login-onboarding,.auth-core .staff-login-note p,.auth-core .auth-core-meta{margin:0 0 var(--rp-s2);font-size:var(--rp-t3);line-height:1.5;color:var(--rp-text-3)}
.auth-core .staff-login-note{display:block;margin:0;padding:0;border:0}
.auth-core form+.auth-core-meta,.auth-core form+.staff-login-help{margin-top:var(--rp-s3)}
.auth-core .staff-pin-signout{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--rp-s3);margin-top:var(--rp-s3)}
.auth-core .staff-pin-signout small{margin:0}
:is(button,a).auth-core-text-action,button[type=submit].auth-core-text-action{display:inline-flex;align-items:center;width:auto;min-height:var(--rp-hit);padding:0;border:0;background:transparent;color:var(--rp-accent-2);font-size:var(--rp-t1);font-weight:600}
:is(button,a).auth-core-text-action:hover,button[type=submit].auth-core-text-action:hover{background:transparent;text-decoration:underline}
/* passkeys (hooks untouched) */
.auth-core .staff-passkey-login{margin:0 0 var(--rp-s4)}
.auth-core .staff-passkey-login.secondary-order{margin:var(--rp-s4) 0 0;padding-top:var(--rp-s4)}
.auth-core .staff-passkey-login .passkey-button{min-height:44px!important;border-radius:var(--rp-radius);font-size:var(--rp-t1)}
.auth-core .passkey-personal-device{font-size:var(--rp-t1)}
.auth-core .passkey-warning,.auth-core .passkey-login-action>p{margin:2px 0 var(--rp-s3);font-size:var(--rp-t3);line-height:1.5;color:var(--rp-text-3)}
.auth-core .passkey-login-action>p{margin:4px 0 0}

@media(max-width:620px){
    .auth-core{max-width:none;padding:var(--rp-s5) max(16px,env(safe-area-inset-right)) var(--rp-s5) max(16px,env(safe-area-inset-left))}
  .staff-connect .auth-core{margin:0}
  :is(.staff-connected,.staff-onboarding) .auth-core{padding:0}
  .auth-core h1{font-size:1.5rem}
}