/* Login presentation. Scoped to .ob-bay.lpx. System fonts only (CSP).
 * Night defaults; Day and Custom remap the same tokens, never forced Night. */
.ob-bay.lpx{--lp-bg:#08080a;--lp-char:#121215;--lp-char2:#18181c;--lp-input:#0c0c0e;--lp-nardo:#6b6e72;--lp-line:#26272b;--lp-line2:#3a3c41;--lp-text:#f4f4f5;--lp-dim:#a6a8ad;--lp-faint:#7d8085;--lp-red:#c8202f;--lp-red2:#a91a27;--lp-on-red:#fff;--lp-ring:rgba(200,32,47,.38);--lp-shade:rgba(8,8,10,.86);
 background:var(--lp-bg);color:var(--lp-text);position:relative;min-height:100vh;min-height:100svh;overflow-x:clip;font-family:system-ui,-apple-system,'Segoe UI','Helvetica Neue',sans-serif}
html[data-mt-appearance=day] .ob-bay.lpx{--lp-bg:#eef0f2;--lp-char:#fbfbfc;--lp-char2:#f4f5f7;--lp-input:#fff;--lp-line:#d9dce0;--lp-line2:#c3c7cd;--lp-text:#15171a;--lp-dim:#50545b;--lp-faint:#6b7078;--lp-red:#b81c2a;--lp-red2:#9a1723;--lp-ring:rgba(184,28,42,.25);--lp-shade:rgba(238,240,242,.9)}
html[data-mt-appearance=custom] .ob-bay.lpx{--lp-bg:var(--mt-background,#08080a);--lp-char:var(--mt-panel,#121215);--lp-char2:var(--mt-hover,var(--mt-panel,#18181c));--lp-input:var(--mt-input,#0c0c0e);--lp-line:var(--mt-border,#26272b);--lp-line2:var(--mt-border,#3a3c41);--lp-text:var(--mt-ink,#f4f4f5);--lp-dim:var(--mt-muted,#a6a8ad);--lp-faint:var(--mt-muted,#7d8085);--lp-red:var(--mt-accent,#c8202f);--lp-red2:var(--mt-accent-hover,#a91a27);--lp-on-red:var(--mt-accent-ink,#fff)}
/* Older styles.css/nardo-theme.css rules force login cards and inputs dark with
 * !important. Override only this employee entrance, using the selected palette. */
#app .ob-bay.lpx .login-card{background:var(--lp-char)!important;color:var(--lp-text)!important;border-color:var(--lp-line)!important;border-top-color:var(--lp-red)!important}
#app .ob-bay.lpx .login-card :is(h1,label,b){color:var(--lp-text)!important}
#app .ob-bay.lpx .login-card :is(p,.hint,small){color:var(--lp-dim)!important}
#app .ob-bay.lpx #login-form :is(input:not([type=checkbox]),select){background:var(--lp-input)!important;color:var(--lp-text)!important;border:1px solid var(--lp-line2)!important;color-scheme:dark}
html[data-mt-appearance=day] #app .ob-bay.lpx #login-form :is(input:not([type=checkbox]),select){color-scheme:light}
#app .ob-bay.lpx #login-form input::placeholder{color:var(--lp-faint)!important}
#app .ob-bay.lpx .ob-in>svg,#app .ob-bay.lpx .ob-eye svg{color:var(--lp-dim)!important;stroke:currentColor;opacity:1}
#app .ob-bay.lpx .lf-social{color:var(--lp-text)!important}
#app .ob-bay.lpx #login-form :is(input,select):focus{border-color:var(--lp-text)!important;box-shadow:0 0 0 3px var(--lp-ring)}
.ob-bay.lpx *{box-sizing:border-box}
/* Centered layout: subtle technical grid, no photo, no split, one card at every breakpoint. */
.ob-bay.lpx.lpx-center{display:flex;flex-direction:column;background-color:var(--lp-bg);background-image:linear-gradient(var(--lp-grid,rgba(255,255,255,.028)) 1px,transparent 1px),linear-gradient(90deg,var(--lp-grid,rgba(255,255,255,.028)) 1px,transparent 1px);background-size:44px 44px;background-position:center top}
html[data-mt-appearance=day] .ob-bay.lpx{--lp-grid:rgba(20,22,26,.045)}
.ob-bay.lpx .ob-bay-photo,.lpx-brand,.lpx-phone-brand{display:none!important}
.ob-bay.lpx>.ph-sback{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:auto;z-index:4;padding:8px max(16px,env(safe-area-inset-left))}
.ob-bay.lpx>.ph-sback a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--lp-dim);font-size:14px}
.ob-bay.lpx>.ph-sback a:hover{color:var(--lp-text)}
.ob-bay.lpx>.ph-sback svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ob-bay.lpx>.ob-bay-inner.lpx-stage{position:relative;z-index:1;flex:1 0 auto;width:100%;max-width:none;margin:0;min-height:100vh;min-height:100svh;padding:calc(64px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;background:none;border:0}
.ob-bay.lpx .login-card,.lpx-portals{width:100%;max-width:440px;margin-left:auto;margin-right:auto}
.ob-bay.lpx .login-card{display:flex;flex-direction:column;gap:0;padding:32px 32px 24px;background:var(--lp-char);color:var(--lp-text);border:1px solid var(--lp-line);border-top:2px solid var(--lp-red);border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 56px -28px rgba(0,0,0,.8);animation:lpIn .4s cubic-bezier(.2,.7,.2,1) both}
.ob-bay.lpx .ob-bay-brand.lpx-card-brand{margin:0 0 20px;text-align:center}
.ob-bay.lpx .ob-bay-brand .eyebrow,.ob-bay.lpx .ob-bay-brand .hint,.ob-bay.lpx .lpx-card-brand .bs-pubnav{display:none}
.ob-bay.lpx .login-logo{display:block;width:170px;max-width:62%;height:auto;margin:0 auto}
.lpx-welcome{margin:0 0 24px;text-align:center}
.lpx-welcome h1{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--lp-text);font-weight:700;text-transform:none}
.lpx-welcome p{margin:8px 0 0;color:var(--lp-dim);font-size:15px;line-height:1.45}
.ob-bay.lpx #login-form{gap:16px}
.ob-bay.lpx #login-form .form-field[hidden]{display:none!important}
.ob-bay.lpx .form-field label,.ob-bay.lpx #login-form .rc-pick>label{display:block;color:var(--lp-text);opacity:.86;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;margin:0 0 8px}
.ob-bay.lpx .ob-in input{min-height:50px;width:100%;background:var(--lp-input);color:var(--lp-text);border:1px solid var(--lp-line2);border-radius:8px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.ob-bay.lpx .ob-in input::placeholder{color:var(--lp-faint)}
.ob-bay.lpx .ob-in input:hover{border-color:var(--lp-nardo)}
.ob-bay.lpx .ob-in input:focus{border-color:var(--lp-text);outline:0;box-shadow:0 0 0 3px var(--lp-ring)}
.ob-bay.lpx .ob-in input:user-invalid{border-color:#e0545f}
.ob-bay.lpx .ob-eye{min-width:44px;min-height:44px}
.ob-bay.lpx .ob-eye:focus-visible{outline:2px solid var(--lp-text);outline-offset:-2px;border-radius:6px}
.ob-bay.lpx #login-form .btn.teal[type=submit]{position:relative;min-height:52px;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--lp-red)!important;border:1px solid var(--lp-red);color:var(--lp-on-red)!important;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,transform .12s;box-shadow:none}
.ob-bay.lpx #login-form .btn.teal[type=submit]:hover{background:var(--lp-red2)!important}
.ob-bay.lpx #login-form .btn.teal[type=submit]:active{transform:translateY(1px)}
.ob-bay.lpx #login-form .btn.teal[type=submit]:focus-visible{outline:2px solid var(--lp-text);outline-offset:3px}
.ob-bay.lpx #login-form .btn.teal[type=submit]:disabled{opacity:.72;cursor:not-allowed}
.ob-bay.lpx #login-form[aria-busy=true] .btn.teal[type=submit]{opacity:.85;cursor:progress}
.ob-bay.lpx #login-form[aria-busy=true] .btn.teal[type=submit]:before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:lpSpin .7s linear infinite;flex:none}
#login-form .lpx-err{margin:0;padding:12px;border:1px solid rgba(224,84,95,.5);border-left:3px solid #e0545f;border-radius:8px;background:rgba(200,32,47,.1);color:var(--lp-text,#f3d6d9);font-size:14px;line-height:1.45}
#login-form .lpx-err:before{content:"Sign-in problem: ";font-weight:700}
#login-form .lpx-err[hidden]{display:none}
.ob-bay.lpx .login-card .ph-shelp{order:0;display:flex;justify-content:center;margin:12px 0 0}
.ob-bay.lpx .login-card .ph-shelp .ph-txt,.ob-bay.lpx .lpx-textbtn{background:none;border:0;padding:0 4px;min-height:44px;color:var(--lp-text);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-decoration-color:var(--lp-line2);text-underline-offset:4px;cursor:pointer}
.ob-bay.lpx .login-card .ph-shelp .ph-txt:hover,.ob-bay.lpx .lpx-textbtn:hover{text-decoration-color:var(--lp-red)}
.lpx-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;color:var(--lp-faint);font-size:12px;letter-spacing:.04em}
.lpx-secure svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.lpx-newemp{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 4px;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--lp-line);color:var(--lp-dim);font-size:14px}
.lpx-newemp .lpx-textbtn{font-size:14px}
.ob-bay.lpx .login-card .ph-sreg,.ob-bay.lpx .login-card .bs-mini-signup{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:16px -32px -24px;padding:8px 32px;min-height:52px;background:var(--lp-char2);border-top:1px solid var(--lp-line);border-radius:0 0 13px 13px;color:var(--lp-dim);font-size:13px}
.ob-bay.lpx .login-card .ph-sreg a,.ob-bay.lpx .login-card a.bs-mini-signup{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--lp-dim);font-weight:600;font-size:13px;text-decoration:none}
.ob-bay.lpx .login-card .ph-sreg a:hover,.ob-bay.lpx .login-card a.bs-mini-signup:hover{color:var(--lp-text)}
.ob-bay.lpx .login-card .ph-sreg a:after{content:"\2192";color:var(--lp-red);font-size:15px;transition:transform .15s}
.ob-bay.lpx .login-card .ph-sreg a:hover:after{transform:translateX(3px)}
.ob-bay.lpx .login-card .ob-divider,.ob-bay.lpx .login-card .ob-ghost{display:none}
.ob-bay.lpx .login-card :focus-visible{outline:2px solid var(--lp-text);outline-offset:2px;border-radius:4px}
.lpx-portals{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 16px;margin-top:16px;font-size:13px;color:var(--lp-faint)}
.lpx-portals-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.lpx-portals .tt-portal-links{display:contents}
.lpx-portals a,.lpx-portals .lpx-portal-a{background:none!important;border:0!important;padding:0!important;margin:0!important;width:auto!important;min-height:44px;display:inline-flex;align-items:center;color:var(--lp-dim)!important;font:inherit;font-size:13px!important;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:none!important}
.lpx-portals a:hover,.lpx-portals .lpx-portal-a:hover{color:var(--lp-text)!important;text-decoration:underline;text-underline-offset:3px}
.lpx-portals :focus-visible{outline:2px solid var(--lp-text);outline-offset:2px;border-radius:4px}
.ob-bay.lpx .lf-footer{position:relative;z-index:1;display:block;width:100%;margin:0;padding:24px max(24px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left));background:var(--lp-bg);border-top:1px solid var(--lp-line);color:var(--lp-dim)}
.ob-bay.lpx .lf-in{max-width:1100px;margin:0 auto;display:grid;gap:12px}
.ob-bay.lpx .lf-nav{display:grid;gap:4px}
.ob-bay.lpx .lf-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.ob-bay.lpx .lf-a{background:none!important;border:0!important;padding:0!important;margin:0!important;width:auto!important;box-shadow:none!important;min-height:44px;display:inline-flex;align-items:center;font:inherit;font-size:14px;color:var(--lp-text)!important;text-decoration:none;cursor:pointer}
.ob-bay.lpx .lf-legal .lf-a{font-size:13px;color:var(--lp-dim)!important}
.ob-bay.lpx .lf-a:hover{text-decoration:underline;text-underline-offset:3px}
.ob-bay.lpx .lf-a:focus-visible{outline:2px solid var(--lp-text);outline-offset:2px;border-radius:4px}
.ob-bay.lpx .lf-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:12px;border-top:1px solid var(--lp-line)}
.ob-bay.lpx .lf-copy{font-size:13px;color:var(--lp-faint)}
.ob-bay.lpx .lf-est{position:static;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lp-faint)}
.ob-bay.lpx .lf-icons{position:static;display:flex;gap:8px}
body:has(.mt-td) .ob-bay.lpx .lf-footer{padding-left:max(24px,env(safe-area-inset-left))}
/* Short landscape windows (iPad landscape w/ keyboard, zoomed laptops): tighten rhythm, keep sizes. */
@media (max-height:820px){
 .ob-bay.lpx>.ob-bay-inner.lpx-stage{padding-top:calc(52px + env(safe-area-inset-top,0px));padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 .ob-bay.lpx .login-card{padding-top:24px}
 .ob-bay.lpx .ob-bay-brand.lpx-card-brand{margin-bottom:12px}
 .ob-bay.lpx .login-logo{width:140px}
 .lpx-welcome{margin-bottom:16px}.lpx-welcome h1{font-size:25px}.lpx-welcome p{font-size:14px;margin-top:4px}
 .ob-bay.lpx #login-form{gap:12px}
 .ob-bay.lpx .form-field label,.ob-bay.lpx #login-form .rc-pick>label{margin-bottom:4px}
 .ob-bay.lpx .ob-in input{min-height:48px}
}
@media (max-width:599px){
 .ob-bay.lpx>.ob-bay-inner.lpx-stage{justify-content:flex-start;padding-top:calc(60px + env(safe-area-inset-top,0px));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .ob-bay.lpx .login-card{padding:24px 18px 18px;border-radius:12px}
 .ob-bay.lpx .login-card .ph-sreg,.ob-bay.lpx .login-card .bs-mini-signup{margin:16px -18px -18px;padding:8px 18px;border-radius:0 0 11px 11px}
 .ob-bay.lpx .login-logo{width:148px}
 .lpx-welcome h1{font-size:25px}.lpx-welcome p{font-size:14px}
 .ob-bay.lpx .lf-nav ul{gap:0 16px}
}
@keyframes lpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lpSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ob-bay.lpx .login-card,.lpx-brand-in,.ob-bay.lpx .ob-card,.ob-bay.lpx .ob-bay-brand{animation:none!important}.ob-bay.lpx *{transition:none!important}.ob-bay.lpx #login-form[aria-busy=true] .btn.teal[type=submit]:before{animation-duration:2s}}

/* ===== Cinematic wide card (supersedes the 440px column). ===== */
/* nardo-theme.css forces .ob-login.login-screen{background:#050505!important}; beat it here. */
#app .ob-bay.lpx.lpx-center,#app .ob-bay.lpx.lpx-center.ob-login.login-screen{background:var(--lp-bg)!important;background-image:none!important;isolation:isolate}
.ob-bay.lpx.lpx-center{--lp-veil:linear-gradient(180deg,rgba(6,6,8,.78) 0%,rgba(6,6,8,.62) 40%,rgba(6,6,8,.9) 100%);--lp-glow:rgba(200,32,47,.16);--lp-cool:rgba(190,214,236,.07);--lp-grid:rgba(255,255,255,.035);--lp-geo:rgba(255,255,255,.07)}
html[data-mt-appearance=day] .ob-bay.lpx.lpx-center{--lp-veil:linear-gradient(180deg,rgba(238,240,242,.9),rgba(238,240,242,.84) 45%,rgba(238,240,242,.95));--lp-glow:rgba(184,28,42,.08);--lp-cool:rgba(255,255,255,.3);--lp-grid:rgba(20,22,26,.05);--lp-geo:rgba(20,22,26,.08)}
html[data-mt-appearance=custom] .ob-bay.lpx.lpx-center{--lp-veil:linear-gradient(180deg,color-mix(in srgb,var(--lp-bg) 80%,transparent),color-mix(in srgb,var(--lp-bg) 66%,transparent) 40%,color-mix(in srgb,var(--lp-bg) 92%,transparent))}
/* Layer 1 (official photo): responsive source selection via image-set + plain url() fallback.
 * Desktop/wide: 1254 square (1x) / 960 medium; cover, no distortion, upper focal keeps wall branding.
 * Veil lightened so the technician, vehicle and shop branding stay visible; card keeps its own panel. */
.ob-bay.lpx.lpx-center{--lp-veil:linear-gradient(180deg,rgba(6,6,8,.5) 0%,rgba(6,6,8,.32) 40%,rgba(6,6,8,.72) 100%);--lp-photo:url(/login-operations.webp);--lp-pos:center 7%}
@supports (background-image:image-set(url(/login-operations.webp) 1x)){.ob-bay.lpx.lpx-center{--lp-photo:image-set(url(/login-operations.webp) 1x)}}
html[data-mt-appearance=day] .ob-bay.lpx.lpx-center{--lp-veil:linear-gradient(180deg,rgba(238,240,242,.62),rgba(238,240,242,.5) 45%,rgba(238,240,242,.8))}
html[data-mt-appearance=custom] .ob-bay.lpx.lpx-center{--lp-veil:linear-gradient(180deg,color-mix(in srgb,var(--lp-bg) 55%,transparent),color-mix(in srgb,var(--lp-bg) 38%,transparent) 40%,color-mix(in srgb,var(--lp-bg) 78%,transparent))}
.ob-bay.lpx.lpx-center:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-color:var(--lp-bg);background-image:radial-gradient(ellipse 60% 50% at 50% 46%,transparent 0,rgba(0,0,0,.2) 100%),radial-gradient(ellipse 45% 40% at 12% 100%,var(--lp-glow),transparent 70%),var(--lp-veil),url(/login-operations.webp);background-image:radial-gradient(ellipse 60% 50% at 50% 46%,transparent 0,rgba(0,0,0,.2) 100%),radial-gradient(ellipse 45% 40% at 12% 100%,var(--lp-glow),transparent 70%),var(--lp-veil),var(--lp-photo);background-position:center,center,center,var(--lp-pos);background-size:cover;background-repeat:no-repeat}
/* Day keeps the photo's colour (no heavy desaturation), only a light veil. */
html[data-mt-appearance=day] .ob-bay.lpx.lpx-center:before{filter:none}
/* Mid-size landscape (tablet landscape, laptops <=1366 CSS px at 1x): 960 medium at 1x, full at 2x. */
@media (max-width:1366px) and (min-aspect-ratio:1/1){.ob-bay.lpx.lpx-center{--lp-photo:url(/login-operations-medium.webp);--lp-photo:image-set(url(/login-operations-medium.webp) 1x,url(/login-operations.webp) 2x)}}
/* On ultrawide screens anchor near the top so wall branding and faces survive the cover crop. */
@media (min-aspect-ratio:2/1){.ob-bay.lpx.lpx-center{--lp-pos:center 2%}}
/* Portrait (phones, tablets portrait, foldables): dedicated left-oriented 700x1254 crop favoring
 * the mechanic and car; cover + left-weighted focal keeps faces from being cut. Small phones at 1x get 480x860. */
@media (max-aspect-ratio:1/1){.ob-bay.lpx.lpx-center{--lp-photo:url(/login-operations-mobile.webp);--lp-photo:image-set(url(/login-operations-mobile-small.webp) 1x,url(/login-operations-mobile.webp) 2x);--lp-pos:30% 38%}}
/* Portrait tablets have room for the wider shop: keep the mechanic beside, not behind, the card. */
@media (max-aspect-ratio:1/1) and (min-width:600px){.ob-bay.lpx.lpx-center{--lp-photo:url(/login-operations.webp);--lp-photo:image-set(url(/login-operations.webp) 1x);--lp-pos:15% 40%}}
/* Layer 2: technical grid now very faint and edge-only so it no longer obscures the photo. */
.ob-bay.lpx.lpx-center{--lp-grid:rgba(255,255,255,.018);--lp-geo:rgba(255,255,255,.035)}
html[data-mt-appearance=day] .ob-bay.lpx.lpx-center{--lp-grid:rgba(20,22,26,.025);--lp-geo:rgba(20,22,26,.04)}
.ob-bay.lpx.lpx-center:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--lp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--lp-grid) 1px,transparent 1px);background-size:44px 44px;background-position:center;-webkit-mask:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,#000 100%);mask:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,#000 100%)}
/* Layer 3: a few slow drifting data points (transform only; off for reduced motion / slow devices). */
.ob-bay.lpx>.ob-bay-inner.lpx-stage:before{content:"";position:fixed;inset:-20% 0 0;z-index:-1;pointer-events:none;opacity:.55;background:radial-gradient(1.5px 1.5px at 18% 72%,var(--lp-red),transparent),radial-gradient(1.5px 1.5px at 82% 64%,rgba(220,232,244,.8),transparent),radial-gradient(1px 1px at 30% 30%,rgba(220,232,244,.7),transparent),radial-gradient(1.5px 1.5px at 70% 22%,var(--lp-red),transparent),radial-gradient(1px 1px at 9% 40%,rgba(220,232,244,.6),transparent),radial-gradient(1px 1px at 91% 88%,rgba(220,232,244,.6),transparent);animation:lpDrift 48s linear infinite alternate}
html[data-mt-appearance=day] .ob-bay.lpx>.ob-bay-inner.lpx-stage:before{opacity:.3}
@keyframes lpDrift{to{transform:translate3d(0,-8%,0)}}
@media (prefers-reduced-motion:reduce),(update:slow){.ob-bay.lpx>.ob-bay-inner.lpx-stage:before{animation:none}}
@media (prefers-reduced-data:reduce){.ob-bay.lpx.lpx-center:before{background-image:var(--lp-veil)}}

/* Stage: the card alone is centered in the full viewport. onboarding.css caps .ob-bay-inner at 440px; undo. */
#app .ob-bay.lpx>.ob-bay-inner.lpx-stage{width:100%;max-width:none;margin:0;position:relative;min-height:100vh;min-height:100svh;padding:calc(56px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center}
/* Secondary portals follow the viewport stage; never overlap a growing card. */
.ob-bay.lpx>.lpx-portals{position:relative;margin:0 auto;max-width:620px;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px))}
/* Card: wide, short, one cohesive glass-charcoal surface. */
#app .ob-bay.lpx .login-card{width:100%;max-width:620px;margin:0 auto;padding:28px 36px 0;border-radius:16px;background:color-mix(in srgb,var(--lp-char) 90%,transparent)!important;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 80px -36px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.25);flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px}
@supports not (background:color-mix(in srgb,red 50%,transparent)){#app .ob-bay.lpx .login-card{background:var(--lp-char)!important}}
.ob-bay.lpx .login-card>*{flex:1 0 100%;min-width:0}
.ob-bay.lpx .ob-bay-brand.lpx-card-brand{margin:0 0 14px;text-align:center}
#app .ob-bay.lpx .login-logo{width:156px;max-width:52%;margin:0 auto}
.ob-bay.lpx .lpx-welcome{margin:0 0 20px}
.ob-bay.lpx .lpx-welcome h1{font-size:32px;letter-spacing:-.025em}
.ob-bay.lpx .lpx-welcome p{margin-top:6px;font-size:15px}
/* Real control rhythm: reset inherited margins, then grid. */
#app .ob-bay.lpx #login-form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0}
#app .ob-bay.lpx #login-form>*{margin:0;grid-column:1/-1;min-width:0}
#app .ob-bay.lpx #login-form .form-field{gap:6px;margin:0}
#app .ob-bay.lpx #login-form .form-field label,#app .ob-bay.lpx #login-form .rc-pick>label{margin:0 0 6px}
#app .ob-bay.lpx #login-form .form-field>label{margin:0}
#app .ob-bay.lpx .ob-in input{min-height:48px;font-size:16px}
#app .ob-bay.lpx #login-form .rc-select{min-height:48px}
#app .ob-bay.lpx #login-form .rc-menu-btn{width:48px;height:48px}
#app .ob-bay.lpx #login-form .rc-under{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
#app .ob-bay.lpx #login-form .rc-under>*{margin:0}
#app .ob-bay.lpx #login-form .rc-under>.rc-tip{margin:0 0 0 30px}
#app .ob-bay.lpx #login-form .btn.teal[type=submit]{min-height:50px;margin:2px 0 0}
/* Links below the form: recovery + activation share one row; secure note; registration bar. */
.ob-bay.lpx .login-card>.ph-shelp,.ob-bay.lpx .login-card>.lpx-newemp{order:1}
.ob-bay.lpx .login-card>.lpx-secure{order:2;margin:2px 0 10px}
.ob-bay.lpx .login-card>.ph-sreg,.ob-bay.lpx .login-card>.bs-mini-signup{order:3}
.ob-bay.lpx .login-card>#login-form{order:0}
#app .ob-bay.lpx .login-card .ph-shelp{margin:8px 0 0}
#app .ob-bay.lpx .lpx-newemp{margin:0;padding:0;border:0}
#app .ob-bay.lpx .login-card .ph-sreg,#app .ob-bay.lpx .login-card .bs-mini-signup{margin:0 -36px;padding:4px 36px;min-height:48px;border-radius:0 0 15px 15px}
/* Wide cards (iPad portrait and up): two-column credential row, grouped company options. */
@media (min-width:640px){
 #app .ob-bay.lpx .login-card{max-width:500px}
 #app .ob-bay.lpx #login-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
 #app .ob-bay.lpx #login-form>.form-field:has(#ob-l-user){grid-column:1}
 #app .ob-bay.lpx #login-form>.form-field:has(#ob-l-pass){grid-column:2}
 #app .ob-bay.lpx #login-form .rc-under{grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
 #app .ob-bay.lpx #login-form .rc-under>*{grid-column:1/-1}
 #app .ob-bay.lpx #login-form .rc-under>.rc-row:first-child{grid-column:1;grid-row:1}
 #app .ob-bay.lpx #login-form .rc-under>.rc-prefs{grid-column:2;grid-row:1}
 .ob-bay.lpx .login-card>.ph-shelp,.ob-bay.lpx .login-card>.lpx-newemp{flex:1 1 auto;width:auto}
 #app .ob-bay.lpx .login-card .ph-shelp{justify-content:flex-start;margin:6px 0 0}
 #app .ob-bay.lpx .lpx-newemp{justify-content:flex-end;margin:6px 0 0}
}
@media (min-width:1100px){#app .ob-bay.lpx .login-card{max-width:560px}}
@media (min-width:1280px){#app .ob-bay.lpx .login-card{max-width:620px;padding-left:40px;padding-right:40px}#app .ob-bay.lpx .login-card .ph-sreg,#app .ob-bay.lpx .login-card .bs-mini-signup{margin:0 -40px;padding:4px 40px}}
/* Short windows (1366x768, iPad landscape with keyboard): tighter rhythm, same control sizes. */
@media (max-height:820px){
 #app .ob-bay.lpx>.ob-bay-inner.lpx-stage{padding-top:calc(48px + env(safe-area-inset-top,0px));padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
 #app .ob-bay.lpx .login-card{padding-top:22px}
 .ob-bay.lpx .ob-bay-brand.lpx-card-brand{margin-bottom:10px}
 #app .ob-bay.lpx .login-logo{width:136px}
 .ob-bay.lpx .lpx-welcome{margin-bottom:14px}.ob-bay.lpx .lpx-welcome h1{font-size:27px}.ob-bay.lpx .lpx-welcome p{font-size:14px;margin-top:2px}
 #app .ob-bay.lpx #login-form{row-gap:12px}
}
/* No room for the bottom band: portals flow after the card. */
@media (max-height:700px),(max-width:639px){.ob-bay.lpx .lpx-stage>.lpx-portals{position:static;padding:0;margin-top:12px}}
/* Phones: purpose-built single column, top-weighted, scrolls naturally. */
@media (max-width:639px){
 #app .ob-bay.lpx>.ob-bay-inner.lpx-stage{justify-content:flex-start;padding:calc(56px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left))}
 #app .ob-bay.lpx .login-card{padding:22px 18px 0;border-radius:14px}
 #app .ob-bay.lpx .login-card .ph-sreg,#app .ob-bay.lpx .login-card .bs-mini-signup{margin:0 -18px;padding:4px 18px;border-radius:0 0 13px 13px}
 #app .ob-bay.lpx .login-logo{width:140px}
 .ob-bay.lpx .lpx-welcome h1{font-size:26px}
 #app .ob-bay.lpx .lpx-newemp{margin-top:0}
 #app .ob-bay.lpx .login-card>.lpx-secure{justify-content:flex-end;padding-left:112px;font-size:11px}
 .ob-bay.lpx.lpx-center:after{background-size:auto,1px 100%,32px 32px,32px 32px}
}
@media (prefers-reduced-motion:reduce){#app .ob-bay.lpx .login-card{animation:none!important}}

/* Homepage: dedicated Tool Truck Login entry, distinct from employee Sign In */
a.ph-tt{font-size:13px;font-weight:650;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:inherit;white-space:nowrap}
a.ph-tt:hover,a.ph-tt:focus-visible{border-color:currentColor}
html[data-mt-appearance="day"] a.ph-tt{border-color:rgba(21,23,28,.3)}
.ph-tt-li a small{display:block;font-size:12px;font-weight:400;opacity:.75;margin-top:2px}
@media (max-width:640px){a.ph-tt{display:none}}