/* =============================================================================
   SIGN-IN PAGES (S3i, 7 Oct 2026): _auth_shell.html = login, forgot_password, reset_password,
   clock_link_result. Used by clients (most, on phones) AND staff / coach / sales / partner
   (one sign-in for everyone). Look = the client app's "gym dark" (client-kit.css values), so
   signing in flows straight into the portal; Anton title, one red button.
   Part 2 (bottom): the printable staff badge (staff_pass.html), light, QR untouched.
   Loaded after style.css; every class starts with au- / sp-, so no other page is touched.
   One control height 44 px. Hover only for a mouse. White focus ring on dark.
   ============================================================================= */

.au-html{background:#1a1e25}
.au-body{
  --page:#1a1e25; --card:#242932; --raised:#2e343e; --line:#2c323c; --line-2:#3a414c; --line-3:#59616e; --field-line:#7a8291;
  --ink:#f4f5f7; --steel:#959cab; --field:#111418; --hover:rgba(255,255,255,.06);
  --red-btn:#d81920; --red-hover:#c5161c; --red-text:#ff6b70; --green:#3fc173; --amber:#f7a440;
  --ctl-h:44px; --r-ctl:12px; --r-card:14px;
  margin:0;padding:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--page);color:var(--ink);font:16px/1.4 var(--font-body);color-scheme:dark;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent
}
.au-body :focus-visible{outline:2px solid #fff;outline-offset:2px}

/* background video (login only, markup in _auth_bg_video.html); off with reduced motion */
.auth-bg-video,.auth-bg-scrim{display:none}
@media (prefers-reduced-motion:no-preference){
  .auth-bg-video{display:block;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .auth-bg-scrim{display:block;position:fixed;inset:0;background:rgba(35,31,32,.6);z-index:1}
}

/* ---- page + card ---- */
.au-main{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;
  padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.au-card{width:100%;max-width:400px;box-sizing:border-box;padding:32px 24px 24px;background:var(--card);border-radius:var(--r-card);
  box-shadow:0 0 0 1px var(--line),0 24px 48px rgba(0,0,0,.35)}
@media (max-width:359px){.au-card{padding:24px 16px 16px}}

/* logo: the PNG has wide empty edges, so it is cropped to the drawn part (box = 132 px wide) */
.au-logo{--lw:132px;width:var(--lw);height:calc(var(--lw) * .721);overflow:hidden;margin:0 auto 24px}
.au-logo img{display:block;max-width:none;width:calc(var(--lw) * 1.512);height:auto;margin:calc(var(--lw) * -.1203) 0 0 calc(var(--lw) * -.256)}

.au-title{margin:0 0 24px;text-align:center;font:400 26px/1.1 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}

/* ---- form ---- */
.au-form{display:flex;flex-direction:column;gap:16px;margin:0}
.au-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.au-lbl-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;min-height:24px}
.au-body .au-field label{display:block;margin:0;font-size:14px;font-weight:600;color:#fff}
.au-body input.au-in{display:block;width:100%;height:var(--ctl-h);min-height:var(--ctl-h);margin:0;padding:0 12px;box-sizing:border-box;
  border:1.5px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);color:#fff;font:16px var(--font-body);outline:none}
.au-body input.au-in::-ms-reveal,.au-body input.au-in::-ms-clear{display:none}
.au-body input.au-in[aria-invalid=true]{border-color:var(--red-text)}
.au-body input.au-in::placeholder{color:var(--steel);opacity:1}
.au-body input.au-in:focus{border-color:#fff;outline:none}
.au-body input.au-in:focus-visible{outline:2px solid #fff;outline-offset:1px}
.au-body input.au-in:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--field) inset;-webkit-text-fill-color:#fff;caret-color:#fff}

/* password + eye (44 px tap area inside the box) */
.au-pw{position:relative}
.au-body .au-pw input.au-in{padding-right:48px}
.au-eye{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;
  border:0;border-radius:var(--r-ctl);background:none;color:var(--steel);cursor:pointer}
.au-eye[hidden]{display:none}
.au-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.au-eye .au-eye-off,.au-eye[aria-pressed=true] .au-eye-on{display:none}
.au-eye[aria-pressed=true] .au-eye-off{display:block}
.au-eye[aria-pressed=true]{color:#fff}

/* tick row */
.au-body .au-check{display:flex;align-items:center;gap:12px;min-height:var(--ctl-h);margin:0;font-size:14px;font-weight:600;color:#fff;cursor:pointer}
.au-body .au-check input{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;box-sizing:border-box;
  border:2px solid var(--field-line);border-radius:6px;background:var(--field) center/16px no-repeat;cursor:pointer}
.au-body .au-check input:checked{border-color:#fff;background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (forced-colors:active){.au-body .au-check input{-webkit-appearance:auto;appearance:auto}}
.au-body .au-check input:focus{outline:none}
.au-body .au-check input:focus-visible{outline:2px solid #fff;outline-offset:2px}

.cf-turnstile{min-height:65px}

/* ---- buttons: one size; .go = the one red ---- */
.au-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:var(--ctl-h);margin:0;padding:0 16px;box-sizing:border-box;
  border:1.5px solid var(--line-2);border-radius:var(--r-ctl);background:transparent;color:var(--ink);font:700 14px var(--font-body);
  text-decoration:none;white-space:nowrap;cursor:pointer}
.au-btn.go{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
.au-btn .au-brand{width:18px;height:18px;flex:none}
.au-alt{display:flex;flex-direction:column;gap:8px}
/* phone app: "Sign in with Face ID" above the form (app-native.js shows it) */
.au-faceid{margin-bottom:16px}
.au-faceid svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.au-faceid[aria-busy="true"]{opacity:.6}

.au-or{display:flex;align-items:center;gap:12px;margin:24px 0 16px;font-size:14px;color:var(--steel)}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* ---- links ---- */
.au-small{display:inline-flex;align-items:flex-end;min-height:32px;padding-left:8px;font-size:14px;font-weight:600;color:var(--steel);text-decoration:underline;text-underline-offset:3px}
.au-foot{margin:16px 0 0;text-align:center}
.au-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl-h);padding:0 8px;font-size:14px;font-weight:600;color:#fff;
  text-decoration:underline;text-underline-offset:4px}

/* ---- messages ---- */
.au-flash{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;padding:12px 16px;box-sizing:border-box;border-radius:var(--r-ctl);
  font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.au-flash>svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.au-flash>span,.au-flash>div{flex:1;min-width:0}
.au-flash-name{display:block}
.au-flash.ok{background:rgba(63,193,115,.16);color:var(--green)}
.au-flash.err{background:rgba(237,28,36,.16);color:var(--red-text)}
.au-flash.wait{background:rgba(247,164,64,.16);color:var(--amber)}
.au-inline-form{display:block;margin:0}
.au-flash-act{display:inline-flex;align-items:center;min-height:32px;margin:4px 0 0;padding:0;border:0;background:none;color:#fff;
  font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- clock link: open sessions list + done state ---- */
.au-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.au-list li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;box-sizing:border-box;border-radius:var(--r-ctl);
  background:var(--raised);box-shadow:0 0 0 1px var(--line)}
.au-list-b{flex:1;min-width:0}
.au-list-b b{display:block;font-size:16px;font-weight:700;color:#fff;overflow-wrap:anywhere}
.au-list-b span{display:block;font-size:14px;color:var(--steel)}
.au-list-end{flex:none;font-size:14px;font-weight:600;color:var(--steel);font-variant-numeric:tabular-nums}
.au-done{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.au-done svg{width:56px;height:56px;box-sizing:border-box;margin-bottom:8px;padding:14px;border-radius:50%;background:rgba(63,193,115,.16);
  fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.au-done b{font-size:18px;font-weight:700;color:#fff;overflow-wrap:anywhere}
.au-done span{font-size:16px;font-weight:600;color:var(--green)}
.au-gap{margin-top:16px}

/* busy: the button is disabled while the form is sending (auth.js) */
.au-btn:disabled,.au-btn[aria-busy="true"]{cursor:progress;opacity:.7}
.au-btn[aria-busy="true"]{pointer-events:none}

/* pause button for the login background video (bottom right, 44 px) */
.au-vid{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(17,20,24,.7);color:#fff;cursor:pointer}
.au-vid[hidden]{display:none}
.au-vid svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.au-vid .au-vid-play{fill:currentColor;stroke-width:1.5}
.au-vid .au-vid-play,.au-vid[aria-pressed=true] .au-vid-pause{display:none}
.au-vid[aria-pressed=true] .au-vid-play{display:block}

/* ---- hover (mouse only) + motion ---- */
.au-btn,.au-eye,.au-small,.au-link,.au-flash-act,.au-body input.au-in{transition:background-color .12s,border-color .12s,color .12s}
@media (hover:hover){
  .au-btn:hover{background:var(--hover);border-color:var(--line-3);text-decoration:none}
  .au-btn.go:hover{background:var(--red-hover);border-color:var(--red-hover)}
  .au-eye:hover{color:#fff}
  .au-small:hover,.au-link:hover{color:#fff;text-decoration-thickness:2px}
  .au-flash-act:hover{text-decoration-thickness:2px}
  .au-vid:hover{background:rgba(17,20,24,.9)}
  .au-body input.au-in:hover:not(:focus){border-color:#a3aab8}
}
@media (prefers-reduced-motion:reduce){
  .au-btn,.au-eye,.au-small,.au-link,.au-flash-act,.au-body input.au-in{transition:none}
}


/* =============================================================================
   STAFF BADGE (staff_pass.html): printed card with the staff member's clock-in QR.
   The QR image and its 180 px box never change (front desk Honeywell reads the 25x25 code).
   ============================================================================= */
.sp-body{margin:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;box-sizing:border-box;
  background:#f1f2f2;color:#231f20;font-family:var(--font-body)}
.sp-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.sp-pass{width:100%;max-width:340px;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #d1d3d4,0 8px 24px rgba(35,31,32,.12)}
.sp-head{display:flex;justify-content:center;padding:16px;background:#231f20}
.sp-logo{--lw:120px;width:var(--lw);height:calc(var(--lw) * .721);overflow:hidden}
.sp-logo img{display:block;max-width:none;width:calc(var(--lw) * 1.512);height:auto;margin:calc(var(--lw) * -.1203) 0 0 calc(var(--lw) * -.256)}
.sp-body-in{display:flex;flex-direction:column;align-items:center;padding:24px 16px;text-align:center}
.sp-qr{display:block;width:180px;height:180px}
.sp-name{margin:16px 0 4px;font:400 22px/1.15 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:#231f20;overflow-wrap:anywhere}
.sp-sub{display:flex;flex-direction:column;gap:2px;margin:0;font-size:14px;color:#58595b}
.sp-sub span:first-child{font-weight:600;color:#231f20}
.sp-foot{padding:12px 16px;background:var(--c,#231f20);color:var(--c-ink,#fff);text-align:center;font-size:14px;font-weight:700}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;margin:0;padding:0 24px;box-sizing:border-box;border:0;border-radius:12px;
  background:#d81920;color:#fff;font:700 14px var(--font-body);cursor:pointer;transition:background-color .12s}
.sp-btn:focus-visible{outline:2px solid #231f20;outline-offset:2px}
@media (hover:hover){.sp-btn:hover{background:#c5161c}}
@media (prefers-reduced-motion:reduce){.sp-btn{transition:none}}
@media print{
  .sp-btn{display:none}
  .sp-body{min-height:auto;padding:0;background:#fff}
  .sp-pass{box-shadow:0 0 0 1px #d1d3d4}
  .sp-pass,.sp-head,.sp-foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}