/* css/auth.css - A2 auth package (SelfCraft).
   Screens 02-06 as a full-page overlay inside workout-tracker.html, the
   signed-out banner (07), the iOS install sheet content (08), the Settings
   Account section (19), and the header avatar chip (22).
   Built entirely on css/workout.css tokens - ZERO new tokens (package ledger). */

/* ── Full-page auth overlay ─────────────────────────────────────────── */
.auth-overlay{position:fixed;inset:0;z-index:400;background:var(--bg);color:var(--txt);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth-overlay.open{display:block}
.auth-page{max-width:430px;margin:0 auto;padding:28px 22px 30px;min-height:100%}
.auth-page.auth-center{display:flex;flex-direction:column;justify-content:center;min-height:100vh}
.auth-page.auth-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh;padding:0 34px}

/* Wordmark: "Self" accent + "Craft" ink, JetBrains Mono (Caveat handwritten). */
.auth-wm{font:700 22px var(--font-num);color:var(--txt);font-family:var(--font-heading, var(--font-num))}
.auth-wm i{color:var(--acc);font-style:normal}
:root[data-voice="clean"] .auth-wm, .auth-wm{font-family:var(--font-num)}
:root[data-voice="handwritten"] .auth-wm{font-family:var(--font-hand);font-size:26px}

.auth-title{font-family:var(--font-heading);font-size:20px;font-weight:700;margin:20px 0 16px}
.auth-sub{font-size:13.5px;line-height:1.5;color:var(--mut2);margin:8px 0 18px}

.auth-field{margin-bottom:12px}
.auth-lbl{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--mut);margin-bottom:6px;text-transform:uppercase}
.auth-inp{width:100%;height:48px;border-radius:10px;background:var(--s2);border:1px solid var(--b1);color:var(--txt);padding:0 14px;font-size:15px;font-family:var(--font-ui);outline:none}
.auth-inp.mono{font-family:var(--font-num);font-size:14px;font-weight:500}
.auth-inp::placeholder{color:var(--pencil);font-style:italic}
.auth-inp:focus{border-color:var(--acc);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--acc) 35%,transparent)}
.auth-inp.bad{border:1.5px solid var(--red)}
.auth-err{font-size:11.5px;color:var(--red);margin-top:5px}
.auth-form-err{font-size:11.5px;color:var(--red);margin:14px 0 8px}
.auth-ok{font-size:12.5px;color:var(--grn);font-weight:650;margin-top:14px;text-align:center}

.auth-btn{width:100%;height:52px;border-radius:14px;background:var(--acc);color:var(--acc-text);border:none;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-family:var(--font-ui);cursor:pointer;margin-top:18px}
.auth-btn:disabled{opacity:.55;cursor:default}
.auth-btn:active:not(:disabled){transform:scale(.97)}
.auth-btn-ghost{width:100%;height:46px;border-radius:12px;background:none;border:1px solid var(--b2);color:var(--txt);display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;font-family:var(--font-ui);cursor:pointer}
.auth-btn-ghost:disabled{opacity:.55;cursor:default}

.auth-link{color:var(--acc);font-weight:700;cursor:pointer;background:none;border:none;font-size:inherit;font-family:inherit;padding:0}
.auth-foot{text-align:center;font-size:13px;margin-top:16px;color:var(--mut)}
.auth-foot2{text-align:center;font-size:13px;margin-top:24px;color:var(--mut)}

/* Role chips (screen 02): 2-up single select */
.auth-roles{display:flex;gap:10px}
.auth-role{flex:1;background:var(--s1);border:1.5px solid var(--b1);border-radius:14px;padding:13px 12px;cursor:pointer;text-align:left;font-family:var(--font-ui)}
.auth-role .auth-role-t{font-size:14px;font-weight:700;color:var(--txt)}
.auth-role .auth-role-s{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.4}
.auth-role.sel{border-color:var(--acc)}
.auth-role.sel .auth-role-t{color:var(--acc)}

/* Verify / expired centered screens */
.auth-badge{width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:24px}
.auth-badge.ok{background:color-mix(in srgb,var(--grn) 14%,transparent);color:var(--grn)}
.auth-badge.warn{background:color-mix(in srgb,var(--org) 14%,transparent);color:var(--org)}
.auth-mid-title{font-family:var(--font-heading);font-size:19px;font-weight:700}
.auth-mid-body{font-size:14px;line-height:1.55;margin-top:10px;color:var(--mut2)}
.auth-mid-body .mono{font-family:var(--font-num);font-weight:600;font-size:13px;color:var(--txt)}

/* Reset success box (screen 05) */
.auth-success-box{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--grn) 12%,transparent);border:1px solid color-mix(in srgb,var(--grn) 35%,transparent);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--mut2);line-height:1.5}
.auth-success-box .tick{color:var(--grn)}

/* Invite accept (screen 06) */
.auth-invite-card{background:var(--s1);border:1px solid var(--b1);border-radius:16px;padding:20px;text-align:center;margin-top:18px}
.auth-invite-av{width:56px;height:56px;border-radius:999px;background:var(--acc);color:var(--acc-text);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin:0 auto 12px}
.auth-invite-t{font-family:var(--font-heading);font-size:17px;font-weight:700}
.auth-invite-s{font-size:13px;color:var(--mut2);margin-top:5px}
.auth-consent{background:var(--s2);border:1px solid var(--b1);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--mut2);line-height:1.5;margin:14px 0 16px}
.auth-consent b{color:var(--txt)}

/* ── Signed-out banner (screen 07) ──────────────────────────────────── */
.wl-signedout-banner{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--org) 12%,var(--bg));border-top:1px solid color-mix(in srgb,var(--org) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--org) 35%,transparent);padding:10px 16px;font-size:12.5px;color:var(--mut2);line-height:1.4}
.wl-signedout-banner b{color:var(--org)}
.wl-signedout-signin{margin-left:auto;background:var(--org);color:var(--bg);font-weight:700;font-size:12px;border-radius:8px;padding:7px 12px;flex:none;border:none;cursor:pointer;font-family:var(--font-ui)}

/* ── Header avatar chip (screen 22, verdict #2) ─────────────────────── */
/* Batch 2026-08-28 (item 4): #mainNav is a flex row and .logo already carries
   margin-right:auto (css/workout.css), which bunches everything after the logo
   (avatar chip, .ntabs, sync dot) into one right-hand group. `order` moves the
   chip to the END of that group - past the nav tabs and sync dot - without
   touching .ntabs or reordering the markup itself (NG-3). Flex `order` does not
   change DOM/tab order, only paint order, so keyboard/tab navigation is
   unaffected. Checked both layouts: on mobile (<=640px, css/workout.css) .ntabs
   is pulled out of flow into a fixed bottom bar, so up top this just leaves the
   chip after the sync dot - still a sane top-right corner position. */
.wl-avatar-chip{width:32px;height:32px;border-radius:999px;background:var(--acc);color:var(--acc-text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:none;cursor:pointer;flex:none;padding:0;font-family:var(--font-ui);order:2}
nav.in-session .wl-avatar-chip{display:none}

/* ── iOS install sheet content (screen 08; chrome = .feedback-sheet) ─── */
.wl-install-title{font-family:var(--font-heading);font-size:16.5px;font-weight:700}
.wl-install-body{font-size:13.5px;line-height:1.55;margin-top:8px;color:var(--mut2)}
.wl-install-step{display:flex;gap:10px;align-items:center;background:var(--s2);border-radius:10px;padding:11px 13px;margin-top:10px;font-size:13px}
.wl-install-step .n{font:700 12px var(--font-num);color:var(--acc)}
.wl-install-step .glyph{color:var(--acc)}
.wl-install-later{width:100%;height:46px;border-radius:12px;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--mut2);cursor:pointer;margin-top:14px;font-family:var(--font-ui)}

/* ── Settings Account section (screen 19) ───────────────────────────── */
.set-acct-row{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--b1)}
.set-acct-row:last-child{border-bottom:none}
.set-acct-av{width:32px;height:32px;border-radius:999px;background:var(--acc);color:var(--acc-text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.set-acct-name{font-size:13.5px;font-weight:650;color:var(--txt)}
.set-acct-email{font-family:var(--font-num);font-size:11px;color:var(--mut);margin-top:1px}
.set-acct-rolechip{font-family:var(--font-num);font-weight:700;font-size:10px;letter-spacing:.05em;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);flex:none}
.set-acct-action{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--txt);font-size:13px;font-weight:650;font-family:var(--font-ui);cursor:pointer;padding:0;min-height:52px;border-bottom:1px solid var(--b1)}
.set-acct-action:last-child{border-bottom:none}
.set-acct-action .arr{color:var(--mut);font-size:15px}
.set-acct-editbtn{background:none;border:none;color:var(--acc);font-size:12px;font-weight:650;cursor:pointer;font-family:var(--font-ui);flex:none;padding:4px 0}
.set-acct-nameinput{height:36px;border-radius:8px;background:var(--s2);border:1px solid var(--acc);color:var(--txt);padding:0 10px;font-size:13.5px;font-weight:650;font-family:var(--font-ui);outline:none;width:100%}

/* Sign-out / remove-coach / reset-link confirm sheet buttons */
.auth-btn-danger{width:100%;height:46px;border-radius:12px;background:var(--red);color:var(--bg);border:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:var(--font-ui);cursor:pointer}

/* ── Coach invite link (C1, screen 10) ──────────────────────────────── */
.wl-invite-box{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--b1);border-radius:12px;padding:12px 14px;margin:14px 0 10px}
.wl-invite-box .url{font-size:12px;font-weight:500;color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.wl-newbtn.copied{background:var(--acc);color:var(--acc-text);border-color:var(--acc)}

/* ── My Coaches (C1, screen 19) ─────────────────────────────────────── */
.set-coach-remove{background:none;border:none;color:var(--red);font-size:12px;font-weight:650;font-family:var(--font-ui);cursor:pointer;flex:none;padding:4px 0}