/* ============================================================
   Curbside v3 — Valet Ops mobile design system
   Ships in v3.0.0. Token-driven, light/night/auto via [data-vo-theme].
   This file is enqueued AFTER app.css so its scoped rules override
   the legacy chrome without touching event handlers.
   ============================================================ */

/* ---------------- Tokens (root) ---------------- */
#vo-root[data-vo-theme="light"], #vo-root[data-vo-theme="auto"]{
	--p-bg:#f5f6f8; --p-surface:#ffffff; --p-elev:#fafbfd;
	--p-text:#0e1421; --p-text2:#42505f; --p-muted:#6b7280;
	--p-line:#e4e8ee; --p-line2:#f0f2f5;
	--p-navy:#294a70; --p-navy-d:#1a3354; --p-gold:#caa14a; --p-gold-d:#ad8632;
	--p-green:#16a674; --p-greenbg:#dff5e8; --p-green-d:#0f7a55;
	--p-amber:#e69b1e; --p-amberbg:#fff5e6;
	--p-red:#dc3545; --p-redbg:#fdecea;
	--p-blue:#3a87ff;
	--p-shadow-sm:0 1px 2px rgba(16,32,56,.06);
	--p-shadow-md:0 4px 16px rgba(16,32,56,.08);
	--p-shadow-lg:0 12px 32px rgba(16,32,56,.12);
}
#vo-root[data-vo-theme="dark"]{
	--p-bg:#0a0d14; --p-surface:#161a26; --p-elev:#1e2330;
	--p-text:#ffffff; --p-text2:#d2d8e4; --p-muted:#8a93a8;
	--p-line:#1e2330; --p-line2:#161a26;
	--p-navy:#5b8def; --p-navy-d:#4574df; --p-gold:#ddb55e; --p-gold-d:#bf9745;
	--p-green:#3dd598; --p-greenbg:rgba(61,213,152,.14); --p-green-d:#16a674;
	--p-amber:#ffc046; --p-amberbg:rgba(255,192,70,.12);
	--p-red:#ff6b6b; --p-redbg:rgba(255,107,107,.14);
	--p-blue:#5b8def;
	--p-shadow-sm:0 1px 2px rgba(0,0,0,.4);
	--p-shadow-md:0 4px 16px rgba(0,0,0,.5);
	--p-shadow-lg:0 12px 32px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
	#vo-root[data-vo-theme="auto"]{
		--p-bg:#0a0d14; --p-surface:#161a26; --p-elev:#1e2330;
		--p-text:#ffffff; --p-text2:#d2d8e4; --p-muted:#8a93a8;
		--p-line:#1e2330; --p-line2:#161a26;
		--p-navy:#5b8def; --p-navy-d:#4574df; --p-gold:#ddb55e; --p-gold-d:#bf9745;
		--p-green:#3dd598; --p-greenbg:rgba(61,213,152,.14); --p-green-d:#16a674;
		--p-amber:#ffc046; --p-amberbg:rgba(255,192,70,.12);
		--p-red:#ff6b6b; --p-redbg:rgba(255,107,107,.14);
		--p-blue:#5b8def;
	}
}

/* ---------------- Curbside-only base ---------------- */
#vo-root.curbside,
#vo-root.curbside body,
body:has(#vo-root.curbside){
	background:var(--p-bg);
	color:var(--p-text);
}
#vo-root.curbside{
	font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
	color:var(--p-text);
	min-height:100vh;
	min-height:100dvh;
	padding-bottom:88px; /* tabbar headroom */
	background:var(--p-bg);
}
#vo-root.curbside.no-tabbar{ padding-bottom:24px; }

/* ---------------- v3.1.1 — App-like behavior (no resize, no zoom) ----
   Locks viewport behavior so the SPA feels like a native app: no double-tap
   zoom (touch-action:manipulation kills the 300ms tap delay AND the zoom
   gesture), no auto-zoom on input focus (font-size:16px on every input is
   the iOS-side guard), no text resize on rotate (-webkit-text-size-adjust),
   no rubber-band overscroll bounce (overscroll-behavior:contain). */
#vo-root.curbside,
#vo-root.curbside *{
	touch-action:manipulation;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside{
	overscroll-behavior:contain;
	-webkit-touch-callout:none; /* kill long-press image save / link preview menus */
	-webkit-user-select:none;
	user-select:none;
}
/* Inputs + content-editable surfaces keep text selection. */
#vo-root.curbside input,
#vo-root.curbside textarea,
#vo-root.curbside [contenteditable="true"],
#vo-root.curbside .vo-msg-body,
#vo-root.curbside .vo-chat-input,
#vo-root.curbside select{
	-webkit-user-select:text;
	user-select:text;
	-webkit-touch-callout:default;
}
/* iOS auto-zoom prevention: every input has to be ≥16px. The .card scope had
   this already; here we extend it to every input/textarea/select inside vo-root
   regardless of nesting. */
#vo-root.curbside input,
#vo-root.curbside textarea,
#vo-root.curbside select{
	font-size:16px !important;
}

/* ---------------- Editorial sign-in ---------------- */
#vo-root.curbside #login.curbside-login{
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:40px 24px 32px;
	background:var(--p-bg);
}
#vo-root.curbside .cb-wordmark{
	font-size:11px; font-weight:700; letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--p-muted);
	margin:0 0 10px;
}
#vo-root[data-vo-theme="dark"].curbside .cb-wordmark{ color:var(--p-gold); }
@media (prefers-color-scheme:dark){
	#vo-root[data-vo-theme="auto"].curbside .cb-wordmark{ color:var(--p-gold); }
}
#vo-root.curbside .cb-hello{
	font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1.05;
	color:var(--p-text);
	margin:0 0 6px;
}
#vo-root.curbside .cb-sub{
	font-size:14px; color:var(--p-muted);
	margin:0 0 32px;
}

/* PIN dots */
#vo-root.curbside .cb-dots{
	display:flex; justify-content:center; gap:14px;
	margin:0 0 30px;
}
#vo-root.curbside .cb-dot{
	width:14px; height:14px; border-radius:50%;
	background:var(--p-line);
	transition:background .15s ease, transform .12s ease;
}
#vo-root.curbside .cb-dot.fill{
	background:var(--p-text);
	transform:scale(1.06);
}
#vo-root[data-vo-theme="dark"].curbside .cb-dot.fill{ background:var(--p-gold); }
@media (prefers-color-scheme:dark){
	#vo-root[data-vo-theme="auto"].curbside .cb-dot.fill{ background:var(--p-gold); }
}
#vo-root.curbside .cb-dots.shake{ animation:cbShake .42s ease; }
@keyframes cbShake{
	0%,100%{ transform:translateX(0); }
	20%,60%{ transform:translateX(-9px); }
	40%,80%{ transform:translateX(9px); }
}

/* Keypad */
#vo-root.curbside .cb-pad{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:10px;
	max-width:340px;
	margin:0 auto;
	width:100%;
}
#vo-root.curbside .cb-key{
	aspect-ratio:1.55/1;
	background:var(--p-surface);
	border:1px solid var(--p-line);
	border-radius:14px;
	font-size:22px; font-weight:600;
	color:var(--p-text);
	font-family:inherit;
	box-shadow:var(--p-shadow-sm);
	cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:transform .08s ease, background .12s ease;
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .cb-key:active{
	transform:scale(.96);
	background:var(--p-elev);
}
#vo-root.curbside .cb-key.cb-key-ghost{
	background:transparent;
	border:0;
	box-shadow:none;
	color:var(--p-navy);
}
#vo-root.curbside .cb-key.cb-key-ghost.cb-key-back{ color:var(--p-muted); }
#vo-root.curbside .cb-key svg{ width:24px; height:24px; }

#vo-root.curbside .cb-loginmsg{
	margin:14px auto 0; max-width:340px; text-align:center;
	font-size:13px; font-weight:600;
	color:var(--p-red);
	min-height:18px;
}

/* Hide legacy login chrome when curbside is active */
#vo-root.curbside #login .bar,
#vo-root.curbside #login > .card{ display:none !important; }
/* v3.1.1 — Use :not(.hide) so the .hide{display:none} class still wins after
   sign-in. Previously the `!important` here kept the login screen on top of
   home indefinitely. */
#vo-root.curbside #login.curbside-login:not(.hide){ display:flex; }
#vo-root.curbside #login.curbside-login.hide{ display:none !important; }
#vo-root.curbside #login.curbside-login .cb-dots{ display:flex; }
#vo-root.curbside #login.curbside-login .cb-pad{ display:grid; }

/* ---------------- Bottom tab nav ---------------- */
#vo-root.curbside .cb-tabbar{
	position:fixed; left:0; right:0; bottom:0;
	background:color-mix(in srgb, var(--p-surface) 92%, transparent);
	-webkit-backdrop-filter:blur(20px);
	backdrop-filter:blur(20px);
	border-top:1px solid var(--p-line);
	display:flex; justify-content:space-around; align-items:flex-start;
	padding:8px 6px calc(env(safe-area-inset-bottom, 14px) + 6px);
	z-index:1000;
}
#vo-root.curbside.no-tabbar .cb-tabbar{ display:none; }
#vo-root.curbside .cb-tab{
	display:flex; flex-direction:column; align-items:center; gap:3px;
	background:none; border:0;
	font-family:inherit;
	font-size:10px; font-weight:700; letter-spacing:.02em;
	color:var(--p-muted);
	padding:6px 14px 4px;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	position:relative;
	min-width:48px;
}
#vo-root.curbside .cb-tab svg{ width:24px; height:24px; }
#vo-root.curbside .cb-tab.on{ color:var(--p-navy); }
#vo-root.curbside .cb-tab .cb-tab-badge{
	position:absolute;
	top:2px; right:6px;
	min-width:16px; height:16px; padding:0 5px;
	background:var(--p-red); color:#fff;
	border-radius:9px;
	font-size:10px; font-weight:800; line-height:16px;
	text-align:center;
}

/* ---------------- Topbar (in-app) ---------------- */
#vo-root.curbside .cb-topbar{
	display:flex; align-items:center; justify-content:space-between;
	padding:18px 16px 8px;
}
#vo-root.curbside .cb-topbar h1{
	margin:0;
	font-size:22px; font-weight:800; letter-spacing:-.02em;
	color:var(--p-text);
}
#vo-root.curbside .cb-avatar{
	width:38px; height:38px; border-radius:50%;
	background:linear-gradient(135deg, var(--p-gold), var(--p-gold-d));
	color:#241c06;
	display:flex; align-items:center; justify-content:center;
	font-size:13px; font-weight:800;
	border:none;
	cursor:pointer;
}
#vo-root.curbside .cb-livepill{
	display:inline-flex; align-items:center; gap:5px;
	background:var(--p-greenbg); color:var(--p-green);
	padding:4px 10px; border-radius:999px;
	font-size:10px; font-weight:800; letter-spacing:.04em;
}
#vo-root.curbside .cb-livepill::before{
	content:""; width:6px; height:6px; border-radius:50%;
	background:var(--p-green);
	animation:cbPulse 1.6s infinite ease-in-out;
}
@keyframes cbPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------------- Shift card ---------------- */
#vo-root.curbside .cb-shift{
	background:linear-gradient(135deg, var(--p-navy), var(--p-navy-d));
	color:#fff;
	border-radius:18px;
	padding:16px 18px;
	margin:0 14px 12px;
	display:flex; justify-content:space-between; align-items:center;
	box-shadow:var(--p-shadow-md);
}
#vo-root.curbside .cb-shift-l{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#vo-root.curbside .cb-shift-h{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
#vo-root.curbside .cb-shift-s{ font-size:12px; color:#c4d2e6; }
/* v3.9.9 — live ops pulse (replaces the redundant LIVE pill in the shift card). */
#vo-root.curbside .cb-ops{ display:flex; gap:18px; flex-shrink:0; }
#vo-root.curbside .cb-op{ text-align:center; line-height:1; }
#vo-root.curbside .cb-op b{ display:block; font-size:20px; font-weight:800; color:#fff; }
#vo-root.curbside .cb-op span{ display:block; margin-top:4px; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
#vo-root.curbside .cb-op-hot b{ color:#ffd27a; }
#vo-root.curbside .cb-op-hot span{ color:#e69b1e; }
@media (max-width:380px){ #vo-root.curbside .cb-ops{ gap:12px; } #vo-root.curbside .cb-op b{ font-size:18px; } }
#vo-root.curbside .cb-shift .cb-livepill{
	background:rgba(255,255,255,.18); color:#dff5e8;
}
#vo-root.curbside .cb-shift .cb-livepill::before{ background:#dff5e8; }

/* ---------------- Primary CTAs ---------------- */
#vo-root.curbside .cb-ctas{ padding:0 14px; display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
#vo-root.curbside .cb-bigcta{
	display:flex; align-items:center; justify-content:center; gap:10px;
	background:linear-gradient(135deg, var(--p-green), var(--p-green-d));
	color:#fff;
	border:0; border-radius:14px;
	padding:16px;
	font-family:inherit; font-size:16px; font-weight:800; letter-spacing:-.01em;
	cursor:pointer;
	box-shadow:0 4px 14px rgba(22,166,116,.28);
	transition:transform .08s ease;
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .cb-bigcta:active{ transform:scale(.985); }
#vo-root.curbside .cb-bigcta svg{ width:20px; height:20px; }
#vo-root.curbside .cb-bigcta.ghost{
	background:var(--p-surface);
	color:var(--p-text);
	border:1px solid var(--p-line);
	box-shadow:var(--p-shadow-sm);
}
#vo-root[data-vo-theme="dark"].curbside .cb-bigcta{ color:#0a0d14; }
@media (prefers-color-scheme:dark){
	#vo-root[data-vo-theme="auto"].curbside .cb-bigcta{ color:#0a0d14; }
}

/* ---------------- Eyebrow + section labels ---------------- */
#vo-root.curbside .cb-eyebrow{
	display:flex; align-items:center; gap:6px;
	font-size:10.5px; font-weight:800; letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--p-muted);
	padding:0 14px; margin:14px 0 8px;
}
#vo-root.curbside .cb-eyebrow svg{ width:12px; height:12px; color:var(--p-amber); }

/* ---------------- Cards ---------------- */
#vo-root.curbside .cb-card{
	background:var(--p-surface);
	border:1px solid var(--p-line);
	border-radius:14px;
	padding:14px;
	margin:0 14px 8px;
	box-shadow:var(--p-shadow-sm);
	display:flex; justify-content:space-between; align-items:center;
	gap:12px;
}
#vo-root.curbside .cb-card-l{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
#vo-root.curbside .cb-card-h{
	display:flex; align-items:center; gap:6px;
	font-size:14.5px; font-weight:700; color:var(--p-text);
}
#vo-root.curbside .cb-card-m{ font-size:12.5px; color:var(--p-muted); }
#vo-root.curbside .cb-card-r{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }

/* Urgency left-border treatments */
#vo-root.curbside .cb-card.cb-urg-red{
	border-left:4px solid var(--p-red);
	background:linear-gradient(90deg, var(--p-redbg) 0%, var(--p-surface) 24%);
}
#vo-root.curbside .cb-card.cb-urg-amber{
	border-left:4px solid var(--p-amber);
	background:linear-gradient(90deg, var(--p-amberbg) 0%, var(--p-surface) 24%);
}
#vo-root.curbside .cb-card.cb-urg-blue{
	border-left:4px solid var(--p-blue);
}

/* Pills */
#vo-root.curbside .cb-pill{
	display:inline-block;
	padding:3px 9px; border-radius:999px;
	font-size:10px; font-weight:800; letter-spacing:.04em;
}
#vo-root.curbside .cb-pill-on{ background:var(--p-greenbg); color:var(--p-green); }
#vo-root.curbside .cb-pill-amb{ background:var(--p-amberbg); color:var(--p-amber); }
#vo-root.curbside .cb-pill-red{ background:var(--p-redbg); color:var(--p-red); }
#vo-root.curbside .cb-pill-quiet{
	background:color-mix(in srgb, var(--p-line) 80%, transparent);
	color:var(--p-text2);
}
#vo-root.curbside .cb-pill-navy{ background:rgba(41,74,112,.12); color:var(--p-navy); }

/* ---------------- Stat tiles ---------------- */
#vo-root.curbside .cb-stats{
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:8px;
	padding:0 14px; margin-bottom:14px;
}
#vo-root.curbside .cb-stat{
	background:var(--p-surface);
	border:1px solid var(--p-line);
	border-radius:13px;
	padding:12px 10px;
	text-align:center;
	box-shadow:var(--p-shadow-sm);
}
#vo-root.curbside .cb-stat b{
	display:block;
	font-size:22px; font-weight:800; letter-spacing:-.02em;
	color:var(--p-text);
	margin-bottom:2px;
}
#vo-root.curbside .cb-stat span{
	display:block;
	font-size:10.5px; font-weight:600;
	color:var(--p-muted); text-transform:uppercase; letter-spacing:.04em;
}
#vo-root.curbside .cb-stat.amber b{ color:var(--p-amber); }
#vo-root.curbside .cb-stat.green b{ color:var(--p-green); }
#vo-root.curbside .cb-stat.red b{ color:var(--p-red); }

/* ---------------- Avatar bubble (driver list) ---------------- */
#vo-root.curbside .cb-avbubble{
	width:28px; height:28px; border-radius:50%;
	background:var(--p-blue); color:#fff;
	display:inline-flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:800; letter-spacing:-.01em;
	flex-shrink:0;
}
#vo-root.curbside .cb-avbubble.green{ background:var(--p-green); }
#vo-root.curbside .cb-avbubble.gold{ background:var(--p-gold); color:#241c06; }
#vo-root.curbside .cb-avbubble.navy{ background:var(--p-navy); }

/* ---------------- Profile / Me tab ---------------- */
#vo-root.curbside .cb-me-head{
	display:flex; flex-direction:column; align-items:center;
	padding:24px 16px 16px;
}
#vo-root.curbside .cb-me-avatar{
	width:72px; height:72px; border-radius:50%;
	background:linear-gradient(135deg, var(--p-gold), var(--p-gold-d));
	color:#241c06;
	display:flex; align-items:center; justify-content:center;
	font-size:26px; font-weight:800;
	margin-bottom:10px;
	box-shadow:var(--p-shadow-md);
}
#vo-root.curbside .cb-me-name{
	font-size:20px; font-weight:800; letter-spacing:-.02em;
	color:var(--p-text);
}
#vo-root.curbside .cb-me-role{
	font-size:12.5px; color:var(--p-muted);
	margin-top:2px;
}
#vo-root.curbside .cb-section{
	background:var(--p-surface);
	border:1px solid var(--p-line);
	border-radius:14px;
	margin:0 14px 12px;
	overflow:hidden;
}
#vo-root.curbside .cb-section h3{
	margin:0;
	padding:14px 16px 6px;
	font-size:11px; font-weight:800; letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--p-muted);
}
#vo-root.curbside .cb-row{
	display:flex; align-items:center; justify-content:space-between;
	padding:13px 16px;
	border-top:1px solid var(--p-line2);
	font-size:14.5px; color:var(--p-text);
	cursor:pointer;
	background:transparent; border-left:0; border-right:0; border-bottom:0;
	width:100%; text-align:left; font-family:inherit;
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .cb-row:first-of-type{ border-top:0; }
#vo-root.curbside .cb-row svg{ width:18px; height:18px; color:var(--p-muted); }
#vo-root.curbside .cb-row:active{ background:var(--p-elev); }

/* Theme picker pills */
#vo-root.curbside .cb-themepick{
	display:flex; gap:6px; padding:10px 14px;
	background:var(--p-elev);
	border-top:1px solid var(--p-line2);
}
#vo-root.curbside .cb-themepick button{
	flex:1; padding:9px 0;
	background:var(--p-surface); border:1px solid var(--p-line);
	border-radius:10px;
	font-family:inherit; font-size:12.5px; font-weight:700;
	color:var(--p-text);
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .cb-themepick button.on{
	background:linear-gradient(135deg, var(--p-navy), var(--p-navy-d));
	color:#fff;
	border-color:transparent;
}

/* ---------------- Generic screen body wrapper ---------------- */
#vo-root.curbside .cb-screen{
	padding:0 0 16px;
}
#vo-root.curbside .cb-screen-h{
	padding:18px 16px 10px;
}
#vo-root.curbside .cb-screen-h h1{
	margin:0;
	font-size:22px; font-weight:800; letter-spacing:-.02em;
	color:var(--p-text);
}
#vo-root.curbside .cb-screen-empty{
	padding:40px 24px; text-align:center;
	color:var(--p-muted);
	font-size:13.5px;
}

/* ---------------- Legacy screen polish (when curbside class is on) ----
   These rules gently restyle the existing screens that we DON'T rewrite
   (intake, queue, chat, etc.) so they don't look stuck in v2.x while
   the rest of the shell uses the new design tokens. */
#vo-root.curbside #home{
	padding:0;
}
#vo-root.curbside #login{ display:none; }
#vo-root.curbside #login.curbside-login{ display:flex !important; }

/* Hide legacy "Sign out" button on home — it's now in the Me tab */
/* v3.1.5 — Force-hide the legacy bottom "Sign out" button on every signed-in
   screen. Without !important the legacy .back rule (display:inline-flex)
   wins and the button renders at the scroll-down bottom of every screen.
   Result: user scrolls down + accidentally taps Sign out = logs off. */
#vo-root.curbside #home > button.back,
#vo-root.curbside #clockinq > button.back,
#vo-root.curbside #mypay > button.back,
#vo-root.curbside #mysched > button.back,
#vo-root.curbside #dashV > button.back,
#vo-root.curbside #dashM > button.back,
#vo-root.curbside #dstats > button.back,
#vo-root.curbside #team > button.back,
#vo-root.curbside #leader > button.back,
#vo-root.curbside #approvals > button.back,
#vo-root.curbside #assign > button.back,
#vo-root.curbside #schedbuild > button.back,
#vo-root.curbside #queue > button.back,
#vo-root.curbside #tickets > button.back,
#vo-root.curbside #closeout > button.back,
#vo-root.curbside #timeoff > button.back,
#vo-root.curbside #checkout-pos > button.back,
#vo-root.curbside #intake > button.back{
	display:none !important;
	visibility:hidden !important;
	height:0 !important;
	margin:0 !important;
	padding:0 !important;
}
/* v3.8.7 — chat + chatlist KEEP their back button (iPhone Messages style needs
   it: tap thread → see back arrow to return to threads list). */

/* Hide legacy heads on screens that get the new topbar */
#vo-root.curbside #home #homeHead .vo-head,
#vo-root.curbside #home #homeHead .vo-head-h1,
#vo-root.curbside #home #homeHead .vo-head-name{ display:none; }
#vo-root.curbside #home #homeHead:empty{ display:none; }

/* Keep the role picker visible above the design tokens (still v2 style) */
#vo-root.curbside #rolepick{
	padding:20px 16px;
	min-height:100vh; min-height:100dvh;
}
#vo-root.curbside #rolepick .bar h1{
	font-size:24px; font-weight:800; letter-spacing:-.02em;
	color:var(--p-text);
}
#vo-root.curbside #rolepick .bar{ background:none; padding:0 0 18px; }
#vo-root.curbside #rolepick .tile{
	background:var(--p-surface); border:1px solid var(--p-line);
	border-radius:14px; padding:18px 16px;
	margin-bottom:10px;
	font-size:16px; font-weight:700; color:var(--p-text);
	box-shadow:var(--p-shadow-sm);
	width:100%; text-align:left;
	font-family:inherit;
	display:flex; flex-direction:column; gap:4px;
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside #rolepick .tile small{
	font-weight:400; font-size:13px; color:var(--p-muted);
}
#vo-root.curbside #rolepick button.back{
	background:none; border:0;
	color:var(--p-muted); font-size:13px;
	padding:10px 0;
}

/* ---------------- Safe-area & responsive ---------------- */
@supports (padding: max(0px)){
	#vo-root.curbside{
		padding-left:env(safe-area-inset-left);
		padding-right:env(safe-area-inset-right);
	}
}
@media (max-width:340px){
	#vo-root.curbside .cb-stats{ gap:6px; }
	#vo-root.curbside .cb-stat b{ font-size:18px; }
	#vo-root.curbside .cb-bigcta{ font-size:15px; padding:14px; }
}

/* ============================================================
   v3.1.0 — Curbside polish bridge for legacy screens
   Re-skins the existing .card / .bar / .tile / etc. so every
   screen (intake, queue, chat, time-off, schedule builder,
   tickets, pickup, walkaround result, lost-found, my-pay, etc.)
   inherits Curbside tokens without rewriting its JS or markup.
   All rules scoped to #vo-root.curbside.
   ============================================================ */

#vo-root.curbside{
	background:var(--p-bg) !important;
	color:var(--p-text);
}

/* ----- Screen wrapper polish (any top-level screen div under #vo-root) ----- */
#vo-root.curbside > div[id]:not(#login):not(#me):not(#cbTabbar):not(#errbar){
	background:var(--p-bg);
}

/* ----- Screen header bar (used everywhere) ----- */
#vo-root.curbside .bar{
	background:transparent !important;
	border:0 !important;
	padding:18px 16px 10px !important;
	display:flex !important; align-items:center !important; justify-content:space-between !important;
}
#vo-root.curbside .bar h1{
	margin:0 !important;
	font-size:22px !important; font-weight:800 !important; letter-spacing:-.02em !important;
	color:var(--p-text) !important;
}
#vo-root.curbside .who{
	font-size:12.5px !important; color:var(--p-muted) !important;
	background:var(--p-elev) !important;
	padding:5px 10px !important; border-radius:999px !important;
	border:1px solid var(--p-line) !important;
}
#vo-root.curbside .back{
	background:transparent !important;
	border:0 !important;
	color:var(--p-navy) !important;
	font-size:14px !important; font-weight:700 !important;
	padding:14px 16px 6px !important;
	display:inline-flex !important; align-items:center !important; gap:6px !important;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	width:auto !important;
}
#vo-root.curbside .back:active{ opacity:.6; }

/* ----- Cards (universal — .card class is used in every screen) ----- */
#vo-root.curbside .card{
	background:var(--p-surface) !important;
	border:1px solid var(--p-line) !important;
	border-radius:14px !important;
	box-shadow:var(--p-shadow-sm) !important;
	color:var(--p-text);
	margin:0 14px 10px !important;
	padding:14px 16px !important;
}
#vo-root.curbside .card h2,
#vo-root.curbside .card h3{
	color:var(--p-text);
	font-size:15px; font-weight:800; letter-spacing:-.01em;
	margin:0 0 8px;
}
#vo-root.curbside .card label{
	color:var(--p-muted);
	font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
#vo-root.curbside .card input[type="text"],
#vo-root.curbside .card input[type="tel"],
#vo-root.curbside .card input[type="email"],
#vo-root.curbside .card input[type="number"],
#vo-root.curbside .card input[type="search"],
#vo-root.curbside .card input[type="date"],
#vo-root.curbside .card input[type="time"],
#vo-root.curbside .card input[type="password"],
#vo-root.curbside .card textarea,
#vo-root.curbside .card select{
	background:var(--p-elev);
	color:var(--p-text);
	border:1px solid var(--p-line);
	border-radius:11px;
	padding:12px 14px;
	font-size:16px; /* iOS zoom prevention */
	font-family:inherit;
	width:100%;
	box-sizing:border-box;
}
#vo-root.curbside .card input:focus,
#vo-root.curbside .card textarea:focus,
#vo-root.curbside .card select:focus{
	outline:none;
	border-color:var(--p-navy);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--p-navy) 25%, transparent);
}

/* ----- Primary CTAs (.vo-prim / .vo-prim2 used on every home flavor) ----- */
#vo-root.curbside .vo-prim,
#vo-root.curbside .vo-prim2{
	display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
	width:calc(100% - 28px) !important;
	margin:0 14px 10px !important;
	padding:16px !important;
	font-family:inherit !important;
	font-size:16px !important; font-weight:800 !important;
	border:0 !important; border-radius:14px !important;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	transition:transform .08s ease;
}
#vo-root.curbside .vo-prim:active,
#vo-root.curbside .vo-prim2:active{ transform:scale(.985); }
#vo-root.curbside .vo-prim.green{
	background:linear-gradient(135deg, var(--p-green), var(--p-green-d)) !important;
	color:#fff !important;
	box-shadow:0 4px 14px rgba(22,166,116,.28);
}
#vo-root.curbside .vo-prim.navy{
	background:linear-gradient(135deg, var(--p-navy), var(--p-navy-d)) !important;
	color:#fff !important;
	box-shadow:0 4px 14px rgba(41,74,112,.28);
}
#vo-root.curbside .vo-prim2{
	background:var(--p-surface) !important;
	color:var(--p-text) !important;
	border:1px solid var(--p-line) !important;
	box-shadow:var(--p-shadow-sm) !important;
}
#vo-root.curbside .vo-clockout{
	display:block !important;
	width:calc(100% - 28px) !important;
	margin:18px 14px 8px !important;
	padding:13px !important;
	background:var(--p-surface) !important;
	color:var(--p-red) !important;
	border:1px solid var(--p-line) !important;
	border-radius:12px !important;
	font-family:inherit;
	font-size:14px; font-weight:700;
	cursor:pointer;
}

/* ----- Stats row (legacy under home) ----- */
#vo-root.curbside .vo-statrow{
	display:grid !important; grid-template-columns:repeat(3, 1fr) !important;
	gap:8px !important;
	padding:0 14px !important; margin:6px 0 14px !important;
}
#vo-root.curbside .vo-stat{
	background:var(--p-surface) !important;
	border:1px solid var(--p-line) !important;
	border-radius:13px !important;
	padding:12px 10px !important;
	text-align:center !important;
	box-shadow:var(--p-shadow-sm);
}
#vo-root.curbside .vo-stat b{
	color:var(--p-text);
	font-size:22px; font-weight:800; letter-spacing:-.02em;
	display:block; margin-bottom:2px;
}
#vo-root.curbside .vo-stat span{
	color:var(--p-muted);
	font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
	display:block;
}

/* ----- Tile grid (legacy home tiles) — keep them but tokenize ----- */
#vo-root.curbside .vo-grid2{
	display:grid !important; grid-template-columns:repeat(2, 1fr) !important;
	gap:10px !important; padding:0 14px !important;
}
#vo-root.curbside .vo-grid2 .tile,
#vo-root.curbside .tile{
	background:var(--p-surface) !important;
	border:1px solid var(--p-line) !important;
	border-radius:14px !important;
	padding:16px 14px !important;
	color:var(--p-text) !important;
	font-size:14.5px; font-weight:700;
	cursor:pointer;
	font-family:inherit;
	text-align:left;
	display:flex; flex-direction:column; gap:4px;
	box-shadow:var(--p-shadow-sm);
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .vo-grid2 .tile small{
	color:var(--p-muted) !important;
	font-weight:400; font-size:12px;
}
#vo-root.curbside .vo-grid2 .tile:active,
#vo-root.curbside .tile:active{ transform:scale(.985); background:var(--p-elev) !important; }

/* ----- Account banner ----- */
#vo-root.curbside .acctban{
	background:var(--p-elev) !important;
	color:var(--p-text2) !important;
	border:1px solid var(--p-line) !important;
	border-radius:12px !important;
	margin:0 14px 12px !important;
	padding:10px 14px !important;
	font-size:13px !important;
	display:flex !important; align-items:center !important; gap:8px !important;
}

/* ----- Clock-in reminder (state A on driver/lot home) ----- */
#vo-root.curbside .vo-clockremind{
	background:linear-gradient(135deg, var(--p-amberbg), color-mix(in srgb, var(--p-amberbg) 50%, var(--p-surface))) !important;
	border:1px solid color-mix(in srgb, var(--p-amber) 35%, transparent) !important;
	border-radius:14px !important;
	margin:6px 14px 14px !important;
	padding:14px 16px !important;
	display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px;
	color:var(--p-text);
}
#vo-root.curbside .vo-clockremind span{
	color:var(--p-text);
	font-size:14px; font-weight:700;
}
#vo-root.curbside .vo-clockremind button{
	background:linear-gradient(135deg, var(--p-amber), color-mix(in srgb, var(--p-amber) 70%, #000)) !important;
	color:#241c06 !important;
	border:0 !important; border-radius:10px !important;
	padding:9px 14px !important;
	font-weight:800; font-family:inherit;
	font-size:13px;
	cursor:pointer;
	display:inline-flex; align-items:center; gap:6px;
}

/* ----- "Waiting for approval" card (state A) ----- */
#vo-root.curbside .vo-waiting{
	background:var(--p-surface) !important;
	border:1px solid var(--p-line) !important;
	border-radius:14px !important;
	margin:0 14px 14px !important;
	padding:22px 16px !important;
	text-align:center !important;
	color:var(--p-text);
}
#vo-root.curbside .vo-waiting .dot{
	width:10px; height:10px; border-radius:50%;
	background:var(--p-amber);
	display:inline-block;
	margin-right:6px;
	animation:cbPulse 1.6s infinite ease-in-out;
}

/* ----- Wait card (front/manager — "waiting to go to lot") ----- */
#vo-root.curbside .vo-wait-card{
	background:var(--p-surface) !important;
	border:1px solid var(--p-line) !important;
	border-radius:14px !important;
	margin:0 14px 12px !important;
	padding:14px 16px !important;
	color:var(--p-text);
}
#vo-root.curbside .vo-wait-card h2{
	color:var(--p-text);
	font-size:14px; font-weight:800; letter-spacing:.01em; margin:0 0 10px;
}
#vo-root.curbside .vo-wait-row{
	display:flex; justify-content:space-between; align-items:center;
	padding:8px 0;
	border-top:1px solid var(--p-line2);
	color:var(--p-text);
}
#vo-root.curbside .vo-wait-row:first-of-type{ border-top:0; }
#vo-root.curbside .vo-wait-venue{ font-weight:700; color:var(--p-text); }
#vo-root.curbside .vo-wait-front{ font-size:11.5px; color:var(--p-muted); margin-left:8px; }
#vo-root.curbside .vo-wait-n{
	background:var(--p-elev);
	color:var(--p-text); font-weight:800;
	padding:3px 10px; border-radius:999px;
	font-size:12px;
	border:1px solid var(--p-line);
}
#vo-root.curbside .vo-wait-n.hot{ background:var(--p-redbg); color:var(--p-red); border-color:transparent; }
#vo-root.curbside .vo-wait-toggle{
	background:transparent;
	color:var(--p-navy);
	border:0;
	font-weight:700; font-size:12.5px;
	padding:8px 0 0;
	cursor:pointer;
}

/* ----- Schedule nudge ----- */
#vo-root.curbside .vo-schednudge{
	background:var(--p-amberbg) !important;
	color:var(--p-text);
	border:1px solid color-mix(in srgb, var(--p-amber) 35%, transparent);
	border-radius:12px;
	margin:0 14px 12px !important;
	padding:11px 14px !important;
	display:flex !important; align-items:center !important; gap:8px !important;
	font-size:13px;
}

/* ----- Messages (msg.err / msg.ok) ----- */
#vo-root.curbside .msg{
	border-radius:10px !important;
	padding:9px 12px !important;
	margin:8px 14px 0 !important;
	font-size:13px; font-weight:600;
}
#vo-root.curbside .msg.ok{ background:var(--p-greenbg) !important; color:var(--p-green) !important; }
#vo-root.curbside .msg.err{ background:var(--p-redbg) !important; color:var(--p-red) !important; }

/* ----- Metrics grid (dashboards, my stats, my pay) ----- */
#vo-root.curbside .metrics{
	display:grid !important;
	grid-template-columns:repeat(3, 1fr) !important;
	gap:8px !important;
	margin:0 0 10px !important;
}
#vo-root.curbside .metrics > div,
#vo-root.curbside .metrics > .metric{
	background:var(--p-elev) !important;
	border:1px solid var(--p-line) !important;
	border-radius:10px !important;
	padding:10px 8px !important;
	text-align:center;
}

/* ----- Time-off form pills (already custom but now token-tinted) ----- */
#vo-root.curbside .vo-toggle-group{ background:var(--p-elev); border-radius:14px; padding:4px; }
#vo-root.curbside .vo-toggle-group .vo-toggle{
	color:var(--p-text2);
}
#vo-root.curbside .vo-toggle-group .vo-toggle.active,
#vo-root.curbside .vo-toggle-group .vo-toggle:has(input:checked){
	background:linear-gradient(135deg, var(--p-navy), var(--p-navy-d)) !important;
	color:#fff !important;
}
#vo-root.curbside .vo-day-toggle{ color:var(--p-text2); background:var(--p-surface); border-color:var(--p-line); }
#vo-root.curbside .vo-day-toggle:has(input:checked),
#vo-root.curbside .vo-day-toggle.active{
	background:linear-gradient(135deg, var(--p-navy), var(--p-navy-d)) !important;
	color:#fff !important;
}

/* ----- Intake page: photo slots + AI button ----- */
#vo-root.curbside .vo-photo-slot{
	background:var(--p-elev) !important;
	color:var(--p-text) !important;
	border:1px dashed color-mix(in srgb, var(--p-navy) 35%, var(--p-line)) !important;
	border-radius:14px !important;
}
#vo-root.curbside .vo-ai-btn{
	background:linear-gradient(135deg, var(--p-gold), var(--p-gold-d)) !important;
	color:#241c06 !important;
	box-shadow:0 4px 14px rgba(202,161,74,.28);
}

/* ----- Driver pickup view -----
   v3.9.19 — REMOVED the background/color/border !important overrides here.
   They beat the inline book-color background that openDpull() sets, forcing the
   pickup screen white. The full-bleed layout + book-color bg is defined in the
   .vo-dpull block lower in this file; this stub intentionally sets nothing
   visual so the inline book color wins. */

/* ----- Pull-to-refresh indicator (added by curbside.js) ----- */
#vo-root.curbside .cb-ptr{
	height:0;
	overflow:hidden;
	display:flex; align-items:center; justify-content:center;
	color:var(--p-muted);
	font-size:12px; font-weight:700; letter-spacing:.06em;
	transition:height .12s ease;
}
#vo-root.curbside .cb-ptr.active{ height:46px; }
#vo-root.curbside .cb-ptr-spinner{
	width:18px; height:18px; border-radius:50%;
	border:2px solid var(--p-line);
	border-top-color:var(--p-navy);
	animation:cbSpin .8s linear infinite;
	margin-right:8px;
}
@keyframes cbSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
	#vo-root.curbside .cb-livepill::before,
	#vo-root.curbside .vo-waiting .dot,
	#vo-root.curbside .cb-ptr-spinner{ animation:none; }
}

/* ============================================================
   v3.1.6 — Hide legacy home tiles that the bottom tabbar now owns.
   The tab nav routes you to Lot / Tickets / Chat / Me — duplicating
   them as tiles in the legacy home grid is just noise. Keep only
   the manager-specific tools that don't have a dedicated tab:
   Dashboard, Build schedule, Clock-in queue, Driver locations,
   Time-off requests (manager approval queue), Assignments,
   Request Car, Check out, Close-out, Walkaround, etc.
   ============================================================ */
#vo-root.curbside .vo-grid2 > button[onclick*="'queue'"],
#vo-root.curbside .vo-grid2 > button[onclick*="'tickets'"],
#vo-root.curbside .vo-grid2 > button[onclick*="'chatlist'"],
#vo-root.curbside .vo-grid2 > button[onclick*="'mypay'"],
#vo-root.curbside .vo-grid2 > button[onclick*="'mysched'"],
#vo-root.curbside .vo-grid2 > button[onclick*="'timeoff'"],
#vo-root.curbside .vo-grid2 > button[onclick*="'dstats'"],
#vo-root.curbside .vo-grid2 > button[onclick*="'leader'"]{
	display:none !important;
}
/* v3.9.22 — but DO show the review tiles inside the clocked-out gate (the
   tabbar doesn't replace these when there's no other content on the screen).
   Use block (not flex) so they keep the centered icon-over-label tile look
   instead of spreading icon far-left / label far-right. */
#vo-root.curbside .vo-clockgate-review .vo-grid2 > button{
	display:block !important;
	text-align:center !important;
}
#vo-root.curbside .vo-clockgate-review .vo-grid2 > button svg{
	display:block !important; margin:0 auto 7px !important;
}

/* ============================================================
   v3.9.22 — Clock-in / clocked-out gate (vertically centered card)
   ============================================================ */
#vo-root.curbside #homeBody:has(.vo-clockgate){ display:block; }
/* v3.9.22 — when the clock-in gate is the ONLY thing on Home (STATE A: no
   review tiles), lock the screen so the background can't scroll/rubber-band.
   STATE C (clocked out, has .vo-clockgate-review) keeps normal scrolling so
   the review tiles are reachable. */
#vo-root.curbside #home:has(.vo-clockgate):not(:has(.vo-clockgate-review)){
	overflow:hidden !important;
	height:100dvh; max-height:100dvh;
	touch-action:none !important;
	padding-bottom:0 !important;
}
#vo-root.curbside .vo-clockgate{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:16px; padding:8px 4px 24px;
}
/* gate-only (STATE A): fill the viewport minus the tabbar so it sits centered
   and there's nothing below to scroll to. */
#vo-root.curbside #home:not(:has(.vo-clockgate-review)) .vo-clockgate{
	min-height:calc(100dvh - 150px);
}
/* gate + review (STATE C): just enough height to center the hero card nicely,
   then the review tiles flow below. */
#vo-root.curbside .vo-clockgate:has(~ .vo-clockgate-review),
#vo-root.curbside .vo-clockgate-review{ min-height:0; }
#vo-root.curbside .vo-clockgate-card{
	width:100%; max-width:420px;
	background:var(--p-surface,#fff);
	border:1px solid var(--p-border,#e4e8ee);
	border-radius:24px;
	padding:30px 26px 26px;
	text-align:center;
	box-shadow:0 18px 50px rgba(22,38,63,.10);
}
#vo-root.curbside .vo-clockgate-badge{
	width:60px; height:60px; margin:0 auto 16px;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg,#15a692,#0e7a6c);
	color:#fff; box-shadow:0 8px 20px rgba(14,122,108,.32);
}
#vo-root.curbside .vo-clockgate-badge.done{
	background:linear-gradient(135deg,#294a70,#1a3354);
	box-shadow:0 8px 20px rgba(22,38,63,.30);
}
#vo-root.curbside .vo-clockgate-badge svg{ width:30px; height:30px; }
#vo-root.curbside .vo-clockgate-eyebrow{
	font-size:12.5px; font-weight:700; text-transform:uppercase;
	letter-spacing:.06em; color:var(--gold,#cf8a15); margin-bottom:8px;
}
#vo-root.curbside .vo-clockgate-h{
	font-family:"Playfair Display",Georgia,serif;
	font-size:26px; font-weight:800; line-height:1.15;
	color:var(--p-text,#16263f); margin-bottom:10px; letter-spacing:-.01em;
}
#vo-root.curbside .vo-clockgate-sub{
	font-size:14.5px; line-height:1.5; color:var(--p-text-dim,#5c6878);
	margin-bottom:22px;
}
#vo-root.curbside .vo-clockgate-btn{
	width:100%; padding:16px;
	border:0; border-radius:16px;
	font-family:inherit; font-size:16px; font-weight:800;
	color:#fff; cursor:pointer;
	display:flex; align-items:center; justify-content:center; gap:10px;
	background:linear-gradient(135deg,#15a692,#0e7a6c);
	box-shadow:0 6px 18px rgba(14,122,108,.30);
	-webkit-tap-highlight-color:transparent;
	transition:transform .08s ease;
}
#vo-root.curbside .vo-clockgate-btn:active{ transform:scale(.985); }
#vo-root.curbside .vo-clockgate-btn svg{ width:22px; height:22px; }
#vo-root.curbside .vo-clockgate-pending{
	width:100%; max-width:420px;
	display:flex; align-items:center; justify-content:center; gap:8px;
	padding:13px 16px; border-radius:14px;
	border:1px solid var(--amber-border,#e8c98a);
	background:var(--amber-bg,#fff7e8); color:#8a5a0b;
	font-size:14px; font-weight:700; cursor:pointer;
}
#vo-root.curbside .vo-clockgate-pending svg{ width:18px; height:18px; }
#vo-root.curbside .vo-clockgate-pending b{ font-weight:800; }
#vo-root.curbside .vo-clockgate-review{
	width:100%; max-width:480px; margin-top:4px;
}
#vo-root.curbside .vo-clockgate-review-h{
	font-size:12.5px; font-weight:700; text-transform:uppercase;
	letter-spacing:.04em; color:var(--p-text-dim,#6b7280);
	margin:4px 0 12px; text-align:center;
}

/* ============================================================
   v3.2.0 — Lot Queue rebuild
   ============================================================ */
#vo-root.curbside .cb-q-card{
	padding:14px 16px;
	display:flex; flex-direction:column; gap:10px;
	transition: border-color .2s ease;
}
#vo-root.curbside .cb-q-row{
	display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
#vo-root.curbside .cb-q-l{ flex:1 1 auto; min-width:0; }
#vo-root.curbside .cb-q-r{ flex:0 0 auto; }
#vo-root.curbside .cb-q-h{
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
#vo-root.curbside .cb-q-ticket{
	font-size:22px; font-weight:800; letter-spacing:-.02em;
	color:var(--p-text);
	line-height:1;
}
#vo-root.curbside .cb-q-veh{
	font-size:13px; font-weight:700; color:var(--p-text2);
	letter-spacing:.02em;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	min-width:0;
}
#vo-root.curbside .cb-q-sub{
	font-size:11.5px; font-weight:600; letter-spacing:.05em;
	color:var(--p-muted);
	text-transform:uppercase;
	margin-top:4px;
}
#vo-root.curbside .cb-q-wait{
	display:inline-block;
}

/* Action buttons inside the queue card */
#vo-root.curbside .cb-q-act{
	display:flex; align-items:center; justify-content:center; gap:8px;
	width:100%;
	padding:12px 14px;
	border-radius:11px;
	border:0;
	font-family:inherit;
	font-size:14.5px; font-weight:800;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	transition:transform .08s ease, filter .12s ease;
}
#vo-root.curbside .cb-q-act:active{ transform:scale(.985); }
#vo-root.curbside .cb-q-act-claim{
	background:linear-gradient(135deg, var(--p-green), var(--p-green-d));
	color:#fff;
	box-shadow:0 4px 14px rgba(22,166,116,.25);
}
#vo-root.curbside .cb-q-act-claim svg{ width:18px; height:18px; }
#vo-root.curbside .cb-q-act-deliver{
	background:linear-gradient(135deg, var(--p-gold), var(--p-gold-d));
	color:#241c06;
	box-shadow:0 4px 14px rgba(202,161,74,.25);
	flex:1 1 auto;
}
#vo-root.curbside .cb-q-act-ghost{
	background:var(--p-surface);
	color:var(--p-text);
	border:1px solid var(--p-line);
	flex:0 0 auto;
	padding:12px 16px;
}
#vo-root.curbside .cb-q-act-readonly{
	background:var(--p-elev);
	color:var(--p-muted);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.06em;
	font-size:12px;
	padding:11px 14px;
	border-radius:11px;
	text-align:center;
	cursor:default;
}
#vo-root.curbside .cb-q-act-row{
	display:flex; gap:8px;
}
#vo-root.curbside .cb-q-act-row .cb-q-act{ width:auto; }

/* Live urgency border treatment — already declared on .cb-urg-*, this just
   ensures the queue cards animate their colors smoothly when the timer ticks
   them up to the next level. */
#vo-root.curbside .cb-q-card{
	transition: background .25s ease, border-color .25s ease, border-left-color .25s ease;
}

@media (max-width:380px){
	#vo-root.curbside .cb-q-ticket{ font-size:20px; }
	#vo-root.curbside .cb-q-veh{ font-size:12.5px; }
	#vo-root.curbside .cb-q-act-row{ flex-direction:column; }
	#vo-root.curbside .cb-q-act-row .cb-q-act{ width:100%; }
}

/* ============================================================
   v3.3.0 — Driver pickup view (#dpull) Curbside polish
   ============================================================ */
#vo-root.curbside #dpull{
	min-height:100vh; min-height:100dvh;
	padding:0 !important;
	background:transparent !important;
}
#vo-root.curbside .vo-dpull{
	min-height:100vh; min-height:100dvh;
	padding:env(safe-area-inset-top, 18px) 24px calc(env(safe-area-inset-bottom, 18px) + 18px) 24px !important;
	display:flex; flex-direction:column;
	border-radius:0 !important;
	margin:0 !important;
}
#vo-root.curbside .vo-dpull-top{
	display:flex; align-items:center; justify-content:space-between;
	margin-bottom:24px;
	opacity:.82;
}
#vo-root.curbside .vo-dpull-back{
	background:transparent !important;
	border:0 !important;
	color:inherit !important;
	font-size:14px; font-weight:700;
	padding:8px 0 !important;
	cursor:pointer;
	display:inline-flex; align-items:center; gap:4px;
	width:auto !important;
}
#vo-root.curbside .vo-dpull-venue{
	font-size:11px; font-weight:800; letter-spacing:.14em;
	text-transform:uppercase;
	opacity:.78;
}
#vo-root.curbside .vo-dpull-pickup{
	font-size:12px; font-weight:800; letter-spacing:.14em;
	text-transform:uppercase;
	opacity:.78;
}
/* v3.9.17 — ticket is now a small inline tag inside the eyebrow, not the headline. */
#vo-root.curbside .vo-dpull-pickup #dpullTicket{ font-variant-numeric:tabular-nums; }
/* Account name is the headline so the driver instantly knows where to go. */
#vo-root.curbside .vo-dpull-account{
	font-size:40px; font-weight:900; letter-spacing:-.02em;
	line-height:1.02;
	margin:14px 0 22px;
	word-break:break-word;
}
/* legacy ticket block (kept harmless if present) */
#vo-root.curbside .vo-dpull-ticket{
	font-size:84px; font-weight:900; letter-spacing:-.04em;
	line-height:.95;
	margin-bottom:24px;
	font-variant-numeric:tabular-nums;
}
#vo-root.curbside .vo-dpull-loc-cap{
	font-size:11px; font-weight:800; letter-spacing:.18em;
	text-transform:uppercase;
	opacity:.7;
	margin-bottom:6px;
}
#vo-root.curbside .vo-dpull-loc{
	font-size:54px; font-weight:900; letter-spacing:-.02em;
	line-height:1;
	margin-bottom:28px;
	word-break:break-word;
}
#vo-root.curbside .vo-dpull-veh{
	font-size:24px; font-weight:800; letter-spacing:-.01em;
	line-height:1.12;
	margin-bottom:14px;
	opacity:.95;
}
#vo-root.curbside .vo-dpull-meta{
	display:flex; flex-wrap:wrap; gap:8px;
	padding-bottom:18px;
}
/* v3.9.17 — 4-up condition photo grid on the pickup screen. */
#vo-root.curbside .vo-dpull-photos{
	display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
	margin-bottom:auto; padding-bottom:22px;
}
#vo-root.curbside .vo-dpull-photo{
	display:block; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
	background:rgba(255,255,255,.14);
}
#vo-root.curbside .vo-dpull-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:380px){ #vo-root.curbside .vo-dpull-account{ font-size:32px; } }
#vo-root.curbside .vo-dpull-tag{
	display:inline-block;
	background:rgba(255,255,255,.16);
	padding:5px 12px; border-radius:999px;
	font-size:11.5px; font-weight:800; letter-spacing:.06em;
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
}
#vo-root.curbside .vo-dpull-bottom{
	margin-top:auto;
	display:flex; flex-direction:column; gap:10px;
}
#vo-root.curbside .vo-dpull-deliver{
	font-size:17px; font-weight:900; letter-spacing:.02em;
	padding:18px !important;
	border-radius:14px !important;
	border:0 !important;
	cursor:pointer;
	font-family:inherit;
	-webkit-tap-highlight-color:transparent;
	transition:transform .08s ease;
	box-shadow:0 8px 24px rgba(0,0,0,.18);
}
#vo-root.curbside .vo-dpull-deliver:active{ transform:scale(.985); }
#vo-root.curbside .vo-dpull-handoff{
	font-size:14px; font-weight:700;
	padding:14px 18px !important;
	border-radius:12px !important;
	border:1px solid currentColor !important;
	background:transparent !important;
	cursor:pointer;
	font-family:inherit;
	opacity:.85;
	-webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .vo-dpull-handoff:active{ opacity:.65; }

/* Make sure #dpull doesn't inherit tabbar bottom padding (it's its own surface) */
#vo-root.curbside:not(.no-tabbar) #dpull:not(.hide) ~ .cb-tabbar,
#vo-root.curbside:not(.no-tabbar) #dpull:not(.hide){
	/* Stay above the tabbar */
}

@media (max-width:380px){
	#vo-root.curbside .vo-dpull-ticket{ font-size:72px; }
	#vo-root.curbside .vo-dpull-loc{ font-size:44px; }
	#vo-root.curbside .vo-dpull-veh{ font-size:22px; }
}

/* ============================================================
   v3.4.0 — Clock-in queue, My Pay, My Stats, Close-out polish
   These screens all use legacy .card chrome (which the v3.1.0
   token bridge already covers). Below: action buttons + inline
   form rows + spacing fixes for each.
   ============================================================ */

/* ----- Generic action button polish (legacy .small / .green / .alt) ----- */
#vo-root.curbside button.small,
#vo-root.curbside .card button.small{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	padding:10px 14px !important;
	border-radius:11px !important;
	font-family:inherit;
	font-size:13.5px; font-weight:800; letter-spacing:.02em;
	border:0;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	transition:transform .08s ease;
}
#vo-root.curbside button.small:active{ transform:scale(.985); }
#vo-root.curbside button.small.green,
#vo-root.curbside button.green.small{
	background:linear-gradient(135deg, var(--p-green), var(--p-green-d)) !important;
	color:#fff !important;
	box-shadow:0 3px 10px rgba(22,166,116,.22);
}
#vo-root.curbside button.small.alt,
#vo-root.curbside button.alt.small{
	background:var(--p-surface) !important;
	color:var(--p-text) !important;
	border:1px solid var(--p-line) !important;
}
#vo-root.curbside button.gold,
#vo-root.curbside button.gold.small,
#vo-root.curbside button.small.gold{
	background:linear-gradient(135deg, var(--p-gold), var(--p-gold-d)) !important;
	color:#241c06 !important;
	box-shadow:0 3px 10px rgba(202,161,74,.22);
}

/* ----- Clock-in queue cards ----- */
#vo-root.curbside #clockinqBody .card{
	padding:16px 18px !important;
}
#vo-root.curbside #clockinqBody .qtop{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	margin-bottom:10px;
	flex-wrap:wrap;
}
#vo-root.curbside #clockinqBody .qtop b{
	font-size:15.5px; color:var(--p-text); font-weight:800;
}
#vo-root.curbside #clockinqBody .pill{
	display:inline-block; padding:2px 9px; border-radius:999px;
	font-size:11px; font-weight:800; letter-spacing:.04em;
	background:var(--p-elev); color:var(--p-text2);
	border:1px solid var(--p-line);
	margin-left:6px;
}
/* The adjust-time panel (#adj-N) — when shown, give it proper Curbside form chrome */
#vo-root.curbside [id^="adj-"]:not(.hide){
	background:var(--p-elev);
	border-radius:10px;
	padding:14px !important;
	margin-top:12px !important;
}
#vo-root.curbside [id^="adj-"] label{
	display:block;
	font-size:11px; font-weight:800; letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--p-muted);
	margin:8px 0 4px;
}
#vo-root.curbside [id^="adj-"] input{
	margin-bottom:4px;
}

/* ----- My Pay (#mypay) — paystub list + week selector ----- */
#vo-root.curbside #mypayBody select{
	padding:11px 14px; border-radius:11px;
	border:1px solid var(--p-line);
	background:var(--p-surface);
	color:var(--p-text);
	font-family:inherit;
}
#vo-root.curbside #mypayBody .vo-stub-row,
#vo-root.curbside #mypayBody .vo-stub-card,
#vo-root.curbside #mypayBody .card{
	border-radius:14px !important;
}

/* ----- My Stats (#dstats) — day-card grid ----- */
#vo-root.curbside #dstatsBody .card{
	padding:14px 16px !important;
}
#vo-root.curbside #dstatsBody .metrics{
	display:grid !important;
	grid-template-columns:repeat(2, 1fr) !important;
	gap:8px !important;
	margin:0 0 10px !important;
}
@media (min-width:480px){
	#vo-root.curbside #dstatsBody .metrics{ grid-template-columns:repeat(4, 1fr) !important; }
}
#vo-root.curbside #dstatsBody .metrics > div{
	background:var(--p-elev) !important;
	border:1px solid var(--p-line) !important;
	border-radius:11px !important;
	padding:11px 8px !important;
	text-align:center;
}

/* ----- Close-out (#closeout) — end-of-night cash reconciliation ----- */
#vo-root.curbside #closeoutBody .card{
	padding:16px 18px !important;
}
#vo-root.curbside #closeoutBody label{
	display:block;
	font-size:11.5px; font-weight:800; letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--p-muted);
	margin:10px 0 6px;
}
#vo-root.curbside #closeoutBody input[type="number"]{
	padding:12px 14px;
	border-radius:11px;
	border:1px solid var(--p-line);
	background:var(--p-elev);
	color:var(--p-text);
	font-family:inherit;
	font-size:18px !important;
	font-weight:800;
	font-variant-numeric:tabular-nums;
	text-align:right;
	width:100%;
	box-sizing:border-box;
}
#vo-root.curbside #closeoutBody .vo-co-expected,
#vo-root.curbside #closeoutBody .vo-co-variance{
	font-size:22px; font-weight:900; letter-spacing:-.01em;
	font-variant-numeric:tabular-nums;
}
#vo-root.curbside #closeoutBody .vo-co-variance.ok{ color:var(--p-green); }
#vo-root.curbside #closeoutBody .vo-co-variance.warn{ color:var(--p-amber); }
#vo-root.curbside #closeoutBody .vo-co-variance.bad{ color:var(--p-red); }

/* ----- Approvals (#approvals) — manager time-off queue ----- */
#vo-root.curbside #approvalsBody .card{
	padding:16px 18px !important;
}
#vo-root.curbside #approvalsBody .qtop{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	margin-bottom:8px;
}

/* ----- Assignments (#assign) — front-desk venue assignments ----- */
#vo-root.curbside #assignBody .card{
	padding:14px 16px !important;
}

/* ----- Polish for the legacy who-is-on-shift block (uses .card + various rows) ----- */
#vo-root.curbside .vo-who-row{
	display:flex; justify-content:space-between; align-items:center;
	padding:8px 0;
	border-top:1px solid var(--p-line2);
}
#vo-root.curbside .vo-who-row:first-of-type{ border-top:0; }

/* ============================================================
   v3.5.0 — Schedule, Time-off, My Schedule, Walkaround polish
   ============================================================ */

/* ----- Schedule builder (#schedbuild) ----- */
#vo-root.curbside #schedbuild #sbNav{
	padding:0 14px;
	display:flex; gap:6px;
	overflow-x:auto;
	margin-bottom:14px;
	scrollbar-width:none;
}
#vo-root.curbside #schedbuild #sbNav::-webkit-scrollbar{ display:none; }
#vo-root.curbside #schedbuild #sbNav button,
#vo-root.curbside #schedbuild .vo-sched-daytab,
#vo-root.curbside #schedbuild .vo-sched-nav-tab{
	padding:8px 14px !important;
	background:var(--p-surface);
	color:var(--p-text2);
	border:1px solid var(--p-line);
	border-radius:999px;
	font-family:inherit;
	font-size:12.5px; font-weight:700;
	cursor:pointer;
	white-space:nowrap;
	flex:0 0 auto;
}
#vo-root.curbside #schedbuild #sbNav button.active,
#vo-root.curbside #schedbuild .vo-sched-daytab.active,
#vo-root.curbside #schedbuild .vo-sched-nav-tab.active{
	background:linear-gradient(135deg, var(--p-navy), var(--p-navy-d)) !important;
	color:#fff !important;
	border-color:transparent !important;
}
#vo-root.curbside #schedbuild .vo-sched-row,
#vo-root.curbside #schedbuild .vo-sb-row{
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	padding:8px 0;
}
#vo-root.curbside #schedbuild .sbadd,
#vo-root.curbside .sbadd{
	display:inline-flex; align-items:center; gap:5px;
	padding:6px 12px;
	background:var(--p-elev);
	color:var(--p-navy);
	border:1px dashed var(--p-line);
	border-radius:999px;
	font-family:inherit;
	font-size:12px; font-weight:700;
	cursor:pointer;
}
#vo-root.curbside .sbchip,
#vo-root.curbside #schedbuild .sbchip{
	display:inline-flex; align-items:center; gap:5px;
	padding:5px 10px;
	background:var(--p-surface);
	color:var(--p-text);
	border:1px solid var(--p-line);
	border-radius:999px;
	font-size:12px; font-weight:700;
}

/* ----- My Schedule (#mysched) — read-only week view ----- */
#vo-root.curbside #myschedBody .card{
	padding:14px 16px !important;
}
#vo-root.curbside #myschedBody .vo-mysched-day-row{
	display:flex; align-items:center; justify-content:space-between;
	padding:10px 0;
	border-top:1px solid var(--p-line2);
}
#vo-root.curbside #myschedBody .vo-mysched-day-row:first-of-type{ border-top:0; }
#vo-root.curbside #myschedBody .vo-mysched-day-name{
	font-weight:700;
	color:var(--p-text);
}
#vo-root.curbside #myschedBody .vo-mysched-day-shift{
	color:var(--p-text2);
	font-size:13px;
	font-variant-numeric:tabular-nums;
}

/* ----- Time-off request form (#timeoff) ----- */
#vo-root.curbside #timeoff .card{
	padding:16px 18px !important;
}
#vo-root.curbside #timeoff label{
	display:block;
	font-size:11.5px; font-weight:800; letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--p-muted);
	margin:12px 0 6px;
}
#vo-root.curbside #timeoff label:first-of-type{ margin-top:0; }
#vo-root.curbside #timeoff input[type="date"],
#vo-root.curbside #timeoff input[type="time"],
#vo-root.curbside #timeoff input[type="text"],
#vo-root.curbside #timeoff textarea,
#vo-root.curbside #timeoff select{
	width:100%;
	padding:13px 14px;
	border-radius:11px;
	border:1px solid var(--p-line);
	background:var(--p-elev);
	color:var(--p-text);
	box-sizing:border-box;
	font-family:inherit;
}
#vo-root.curbside #timeoff textarea{ min-height:80px; }
#vo-root.curbside #timeoff .vo-to-partial,
#vo-root.curbside #timeoff .vo-to-sublbl{
	margin-top:8px;
}
#vo-root.curbside #timeoff .vo-to-stack{
	display:flex; flex-direction:column; gap:12px;
}
#vo-root.curbside #timeoff .vo-to-row{
	display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
#vo-root.curbside #timeoff .vo-to-attach,
#vo-root.curbside #timeoff .vo-to-attach-btn{
	display:inline-flex; align-items:center; gap:6px;
	background:var(--p-elev);
	border:1px dashed var(--p-line);
	color:var(--p-text2);
	padding:9px 14px;
	border-radius:10px;
	cursor:pointer;
	font-family:inherit;
	font-size:13px;
}
#vo-root.curbside #timeoff .vo-to-submit,
#vo-root.curbside #timeoff .vo-prim{
	margin-top:18px !important;
}

/* ----- My time-off requests history list ----- */
#vo-root.curbside #myRequests .card,
#vo-root.curbside #myRequests .vo-to-req{
	padding:13px 16px !important;
	margin-bottom:8px !important;
}
#vo-root.curbside #myRequests .vo-to-req-status{
	display:inline-block;
	padding:3px 9px;
	border-radius:999px;
	font-size:10.5px; font-weight:800; letter-spacing:.05em;
	text-transform:uppercase;
}
#vo-root.curbside #myRequests .vo-to-req-status.pending{ background:var(--p-amberbg); color:var(--p-amber); }
#vo-root.curbside #myRequests .vo-to-req-status.approved{ background:var(--p-greenbg); color:var(--p-green); }
#vo-root.curbside #myRequests .vo-to-req-status.denied{ background:var(--p-redbg); color:var(--p-red); }

/* ----- Walkaround result (#walkaround-result) ----- */
#vo-root.curbside #walkaround-result{
	padding:0 14px 16px;
}
#vo-root.curbside .vo-wk-vip{
	background:linear-gradient(135deg, var(--p-gold), var(--p-gold-d));
	color:#241c06;
	padding:14px 18px;
	border-radius:14px;
	font-weight:800;
	display:flex; align-items:center; gap:10px;
	margin:14px 0 12px;
	box-shadow:0 4px 14px rgba(202,161,74,.22);
}
#vo-root.curbside .vo-wk-card{
	background:var(--p-surface);
	border:1px solid var(--p-line);
	border-radius:14px;
	padding:14px 16px;
	margin-bottom:10px;
}
#vo-root.curbside .vo-wk-sides{
	display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
	margin:12px 0;
}
@media (min-width:480px){
	#vo-root.curbside .vo-wk-sides{ grid-template-columns:repeat(4, 1fr); }
}
#vo-root.curbside .vo-wk-side{
	aspect-ratio:1; background:var(--p-elev);
	border:1px solid var(--p-line);
	border-radius:10px;
	position:relative;
	overflow:hidden;
	background-position:center; background-size:cover;
}
#vo-root.curbside .vo-wk-side-lbl{
	position:absolute; bottom:6px; left:6px; right:6px;
	padding:4px 8px;
	background:rgba(0,0,0,.55);
	color:#fff;
	border-radius:6px;
	font-size:10px; font-weight:800; letter-spacing:.06em;
	text-transform:uppercase;
	text-align:center;
}
#vo-root.curbside .vo-wk-damage{
	background:var(--p-amberbg);
	color:var(--p-amber);
	padding:11px 14px;
	border-radius:10px;
	font-size:13px; font-weight:700;
	margin-bottom:10px;
	border:1px solid color-mix(in srgb, var(--p-amber) 30%, transparent);
}
#vo-root.curbside .vo-ai-fields .vo-conf{
	display:inline-block;
	padding:2px 7px; border-radius:5px;
	font-size:10px; font-weight:800; letter-spacing:.04em;
	margin-left:6px;
}
#vo-root.curbside .vo-ai-fields .vo-conf.hi{ background:var(--p-greenbg); color:var(--p-green); }
#vo-root.curbside .vo-ai-fields .vo-conf.md{ background:var(--p-amberbg); color:var(--p-amber); }
#vo-root.curbside .vo-ai-fields .vo-conf.lo{ background:var(--p-redbg); color:var(--p-red); }

/* ----- Driver locations (#team) — clean Leaflet container + roster below ----- */
#vo-root.curbside #teamMap{
	border-radius:14px !important;
	border:1px solid var(--p-line) !important;
	box-shadow:var(--p-shadow-sm);
	margin:0 14px 14px !important;
	overflow:hidden;
}
#vo-root.curbside #teamBody .card{
	padding:12px 14px !important;
}

/* ----- Leaderboard (#leader) ----- */
#vo-root.curbside #leaderBody .card{
	padding:12px 16px !important;
	display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#vo-root.curbside #leaderBody .vo-leader-rank{
	font-size:22px; font-weight:900;
	color:var(--p-navy);
	font-variant-numeric:tabular-nums;
	min-width:38px;
	text-align:center;
}
#vo-root.curbside #leaderBody .vo-leader-name{
	font-weight:700;
	color:var(--p-text);
}
#vo-root.curbside #leaderBody .vo-leader-score{
	font-size:18px; font-weight:800;
	color:var(--p-text);
	font-variant-numeric:tabular-nums;
}

/* ----- Catch-all: remove any duplicate page-title h1 inside .card on signed-in screens ----- */
#vo-root.curbside #home .card > h1,
#vo-root.curbside #queue .card > h1{ display:none; }

/* ----- Small UX nicety: every screen's first .card gets a bit of breathing room ----- */
#vo-root.curbside > div[id]:not(#login):not(#cbTabbar):not(#errbar) > .card:first-of-type,
#vo-root.curbside > div[id]:not(#login):not(#cbTabbar):not(#errbar) > div > .card:first-of-type{
	margin-top:4px !important;
}

/* ============================================================
   v3.6.1 — Toggle-group pill alignment fix
   The Sick/Personal/Unpaid/Vacation/Other pills on the time-off form
   were rendering at different heights because the active state's
   gradient box-shadow visually inflated the pill while the inactive
   ones were just text. Lock the box dimensions so only the BACKGROUND
   changes between states — never padding, height, or border.
   ============================================================ */
#vo-root .vo-toggle-group,
#vo-root.curbside .vo-toggle-group{
	display:grid !important;
	grid-template-columns:repeat(var(--vo-toggle-cols, 5), 1fr) !important;
	gap:4px !important;
	padding:4px !important;
	align-items:stretch !important;
}
#vo-root .vo-toggle-group .vo-toggle,
#vo-root.curbside .vo-toggle-group .vo-toggle{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	min-height:40px !important;
	padding:9px 8px !important;
	border:1px solid transparent !important; /* reserve space so active border doesn't shift size */
	border-radius:10px !important;
	box-sizing:border-box !important;
	width:100% !important;
	min-width:0 !important;
	box-shadow:none !important; /* shadow was visually inflating active state */
	transition:background .15s ease, color .15s ease !important;
	margin:0 !important;
	line-height:1.15 !important;
	white-space:nowrap !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
}
#vo-root.curbside .vo-toggle-group .vo-toggle.active,
#vo-root.curbside .vo-toggle-group .vo-toggle:has(input:checked){
	background:linear-gradient(135deg, var(--p-navy), var(--p-navy-d)) !important;
	color:#fff !important;
	box-shadow:none !important; /* keep the size identical to inactive */
}
/* For toggle groups with fewer than 5 children (2/3/4-option pickers), the
   --vo-toggle-cols custom property can be set inline. Default falls back to
   counting visible direct children. */
#vo-root .vo-toggle-group:has(> .vo-toggle:nth-child(2):last-child){ --vo-toggle-cols:2; }
#vo-root .vo-toggle-group:has(> .vo-toggle:nth-child(3):last-child){ --vo-toggle-cols:3; }
#vo-root .vo-toggle-group:has(> .vo-toggle:nth-child(4):last-child){ --vo-toggle-cols:4; }
#vo-root .vo-toggle-group:has(> .vo-toggle:nth-child(5):last-child){ --vo-toggle-cols:5; }

/* ============================================================
 * v3.7.0 — Face ID / sign-in security card on the Me tab
 * ============================================================ */

#vo-root.curbside #cbSecBody{ display:flex; flex-direction:column; gap:10px; padding:2px 0; }
#vo-root.curbside .cb-sec-loading{ color:var(--p-muted); font-size:13px; padding:8px 4px; }
#vo-root.curbside .cb-sec-intro{
	color:var(--p-text); font-size:13.5px; line-height:1.45; opacity:.85;
	padding:0 4px 2px;
}
/* v3.7.2 — Override the theme's `button { width: 100% !important }` rule (see
   CLAUDE.md) which was forcing the Remove button to fill the row, collapsing
   the device-name column to 0px and triggering per-character wrap. Every
   button inside the security card now carries explicit width discipline. */
#vo-root.curbside .cb-sec-cta{
	display:flex !important; align-items:center; justify-content:center; gap:10px;
	width:100% !important; min-height:48px; padding:0 16px;
	background:linear-gradient(135deg, var(--p-gold), var(--p-gold-d));
	color:#1a1100; font-weight:700; font-size:15px;
	border:none; border-radius:14px;
	box-shadow:0 4px 12px rgba(230,155,30,.28);
	cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .cb-sec-cta:disabled{ opacity:.55; cursor:default; box-shadow:none; }
#vo-root.curbside .cb-sec-cta svg{ width:22px !important; height:22px !important; flex:0 0 auto; }
#vo-root.curbside .cb-sec-list-h{
	font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color:var(--p-muted); padding:6px 4px 0;
}
#vo-root.curbside .cb-sec-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
#vo-root.curbside .cb-sec-row{
	display:flex !important; align-items:center; justify-content:space-between; gap:10px;
	padding:10px 12px; border-radius:12px;
	background:var(--p-surface); border:1px solid var(--p-border);
	width:100%;
}
#vo-root.curbside .cb-sec-row-l{ min-width:0 !important; flex:1 1 auto !important; width:auto !important; overflow:hidden; }
#vo-root.curbside .cb-sec-row-name{
	font-weight:600; font-size:14.5px; color:var(--p-text);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	word-break:normal !important;
}
#vo-root.curbside .cb-sec-row-sub{
	font-size:12px; color:var(--p-muted); margin-top:2px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	word-break:normal !important;
}
#vo-root.curbside .cb-sec-rm{
	flex:0 0 auto !important;
	width:auto !important; min-width:0 !important;
	background:transparent; color:var(--p-red) !important;
	border:1px solid var(--p-border); border-radius:8px;
	padding:6px 12px; font-size:12.5px; font-weight:700;
	cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#vo-root.curbside .cb-sec-rm:hover{ background:rgba(198,40,40,.06); }
#vo-root.curbside .cb-sec-note{
	color:var(--p-muted); font-size:12.5px; line-height:1.45;
	background:var(--p-surface); border:1px dashed var(--p-border);
	border-radius:10px; padding:10px 12px;
}
#vo-root.curbside .cb-sec-msg{ font-size:13px; padding:2px 4px; min-height:18px; }
#vo-root.curbside .cb-sec-msg.cb-sec-ok{ color:var(--p-green); }
#vo-root.curbside .cb-sec-msg.cb-sec-err,
#vo-root.curbside .cb-sec-note.cb-sec-err{ color:var(--p-red); }

/* ============================================================
 * v3.7.1 — Me tab scroll-clearance
 * ============================================================
 * Reported on iPhone Safari: Sign out (and the new Sign-in
 * security card) couldn't be scrolled to because the tabbar +
 * Safari's bottom address bar were eating the final ~120px.
 * Belt-and-suspenders: bump the Me-tab content's bottom padding
 * to cover the tabbar height (~64px) + safe-area inset +
 * Safari's collapsing bottom bar (~60px max). */
#vo-root.curbside #me .cb-screen{
	padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px));
}
/* The .cb-row's natural color is overridden inline (red/navy/muted)
   per row, but make sure the tap target is uniformly tall on Me. */
#vo-root.curbside #me .cb-row{ min-height:54px; }

/* ============================================================
 * v3.7.2 — Post-PIN "Use Face ID next time?" bottom sheet
 * ============================================================ */

#vo-root .cb-fid-offer{
	position:fixed; inset:0; z-index:99999;
	pointer-events:none;
}
#vo-root .cb-fid-offer-back{
	position:absolute; inset:0;
	background:rgba(16,24,40,.32);
	opacity:0; transition:opacity .22s ease;
	pointer-events:none;
}
#vo-root .cb-fid-offer-sheet{
	position:absolute; left:0; right:0; bottom:0;
	background:var(--p-surface, #fff);
	border-radius:22px 22px 0 0;
	padding:14px 22px calc(28px + env(safe-area-inset-bottom, 0px));
	box-shadow:0 -14px 40px rgba(20,32,56,.18);
	transform:translateY(100%);
	transition:transform .26s cubic-bezier(.2,.7,.2,1);
	max-width:520px; margin:0 auto;
	text-align:center;
}
#vo-root .cb-fid-offer.cb-fid-offer-in .cb-fid-offer-back{ opacity:1; pointer-events:auto; }
#vo-root .cb-fid-offer.cb-fid-offer-in .cb-fid-offer-sheet{ transform:translateY(0); pointer-events:auto; }
#vo-root .cb-fid-offer-grip{
	width:42px; height:5px; border-radius:3px;
	background:rgba(20,32,56,.18);
	margin:0 auto 16px;
}
#vo-root .cb-fid-offer-icon{
	width:54px; height:54px;
	color:var(--p-gold, #e69b1e);
	margin:0 auto 8px; display:block;
}
#vo-root .cb-fid-offer-sheet h3{
	font-family:"Playfair Display", Georgia, serif;
	font-size:24px; font-weight:700; letter-spacing:-.01em;
	margin:4px 0 8px;
	color:var(--p-text);
}
#vo-root .cb-fid-offer-sheet p{
	font-size:14.5px; line-height:1.45;
	color:var(--p-muted);
	margin:0 0 18px;
}
#vo-root .cb-fid-offer-yes{
	display:block !important;
	width:100% !important; min-height:50px;
	background:linear-gradient(135deg, var(--p-gold, #e69b1e), var(--p-gold-d, #cf8a15)) !important;
	color:#1a1100 !important;
	font-size:16px; font-weight:700;
	border:none !important; border-radius:14px;
	box-shadow:0 4px 14px rgba(230,155,30,.32);
	cursor:pointer;
	margin:0 0 10px;
}
#vo-root .cb-fid-offer-no{
	display:block !important;
	width:100% !important; min-height:46px;
	background:transparent !important;
	color:var(--p-muted) !important;
	font-size:14.5px; font-weight:600;
	border:none !important;
	cursor:pointer;
}

/* Lightweight toast for confirmation messages. */
#vo-root .cb-toast{
	position:fixed; left:50%; bottom:calc(110px + env(safe-area-inset-bottom, 0px));
	transform:translate(-50%, 20px); z-index:99998;
	background:rgba(20,32,56,.94);
	color:#fff;
	padding:12px 18px;
	border-radius:12px;
	font-size:14px; font-weight:500;
	max-width:80vw;
	box-shadow:0 8px 24px rgba(20,32,56,.32);
	opacity:0;
	transition:opacity .2s ease, transform .2s ease;
	pointer-events:none;
}
#vo-root .cb-toast.cb-toast-in{ opacity:1; transform:translate(-50%, 0); }

/* ============================================================
 * v3.7.4 — Kill iOS native pull-to-refresh that was reloading the
 * page (and dumping users back to the sign-in screen) on scroll.
 * overscroll-behavior:none on html + body + the root is the only
 * way to disable it reliably; touch-action:pan-y on the root keeps
 * vertical scroll working but blocks the elastic top-of-page pull
 * that triggers reload. */
html, body{
	overscroll-behavior:none !important;
	overscroll-behavior-y:none !important;
}
#vo-root.curbside{
	overscroll-behavior:none !important;
	overscroll-behavior-y:none !important;
	touch-action:pan-y !important;
}

/* ============================================================
 * v3.7.8 — Universal bottom padding so every signed-in screen
 * clears the persistent tabbar.
 * ============================================================
 * The root has padding-bottom:88px but legacy screens
 * (#intake, #queue, #closeout, etc.) have internal padding/scroll
 * that don't always inherit it. Result: the last form field or
 * row got hidden behind the tabbar. This adds explicit bottom
 * clearance to every screen that shows the tabbar — 120px
 * (tabbar ~64 + spacing) plus iOS safe-area inset. */
#vo-root.curbside:not(.no-tabbar) #home,
#vo-root.curbside:not(.no-tabbar) #me,
#vo-root.curbside:not(.no-tabbar) #rolepick,
#vo-root.curbside:not(.no-tabbar) #intake,
#vo-root.curbside:not(.no-tabbar) #queue,
#vo-root.curbside:not(.no-tabbar) #tickets,
#vo-root.curbside:not(.no-tabbar) #chat,
#vo-root.curbside:not(.no-tabbar) #chatlist,
#vo-root.curbside:not(.no-tabbar) #closeout,
#vo-root.curbside:not(.no-tabbar) #checkout-pos,
#vo-root.curbside:not(.no-tabbar) #dstats,
#vo-root.curbside:not(.no-tabbar) #leader,
#vo-root.curbside:not(.no-tabbar) #team,
#vo-root.curbside:not(.no-tabbar) #approvals,
#vo-root.curbside:not(.no-tabbar) #assign,
#vo-root.curbside:not(.no-tabbar) #park,
#vo-root.curbside:not(.no-tabbar) #dpickup,
#vo-root.curbside:not(.no-tabbar) #pickup,
#vo-root.curbside:not(.no-tabbar) #dpull,
#vo-root.curbside:not(.no-tabbar) #clockdriver,
#vo-root.curbside:not(.no-tabbar) #timeoff,
#vo-root.curbside:not(.no-tabbar) #clockinq,
#vo-root.curbside:not(.no-tabbar) #mypay,
#vo-root.curbside:not(.no-tabbar) #mysched,
#vo-root.curbside:not(.no-tabbar) #schedbuild,
#vo-root.curbside:not(.no-tabbar) #walkaround,
#vo-root.curbside:not(.no-tabbar) #walkaround-result,
#vo-root.curbside:not(.no-tabbar) #dashV,
#vo-root.curbside:not(.no-tabbar) #dashM {
	/* v3.8.5 — bumped to 160px so the last row clears the tabbar with room
	   to spare, regardless of safe-area inset depth. */
	padding-bottom:calc(160px + env(safe-area-inset-bottom, 0px)) !important;
}

/* v3.8.5 — top safe-area padding so first-row content doesn't bleed under
   the iPhone dynamic island / status bar.
   v3.8.6 — extended to every signed-in screen (was missing #chat / #queue /
   #tickets / #intake / etc — the `.bar` heading was rendering under the
   status bar invisibly on those). */
#vo-root.curbside:not(.no-tabbar) #home,
#vo-root.curbside:not(.no-tabbar) #me,
#vo-root.curbside:not(.no-tabbar) #rolepick,
#vo-root.curbside:not(.no-tabbar) #intake,
#vo-root.curbside:not(.no-tabbar) #queue,
#vo-root.curbside:not(.no-tabbar) #tickets,
#vo-root.curbside:not(.no-tabbar) #chat,
#vo-root.curbside:not(.no-tabbar) #chatlist,
#vo-root.curbside:not(.no-tabbar) #closeout,
#vo-root.curbside:not(.no-tabbar) #checkout-pos,
#vo-root.curbside:not(.no-tabbar) #dstats,
#vo-root.curbside:not(.no-tabbar) #leader,
#vo-root.curbside:not(.no-tabbar) #team,
#vo-root.curbside:not(.no-tabbar) #approvals,
#vo-root.curbside:not(.no-tabbar) #assign,
#vo-root.curbside:not(.no-tabbar) #park,
#vo-root.curbside:not(.no-tabbar) #dpickup,
#vo-root.curbside:not(.no-tabbar) #pickup,
#vo-root.curbside:not(.no-tabbar) #dpull,
#vo-root.curbside:not(.no-tabbar) #clockdriver,
#vo-root.curbside:not(.no-tabbar) #timeoff,
#vo-root.curbside:not(.no-tabbar) #clockinq,
#vo-root.curbside:not(.no-tabbar) #mypay,
#vo-root.curbside:not(.no-tabbar) #mysched,
#vo-root.curbside:not(.no-tabbar) #schedbuild,
#vo-root.curbside:not(.no-tabbar) #walkaround-result,
#vo-root.curbside:not(.no-tabbar) #dashV,
#vo-root.curbside:not(.no-tabbar) #dashM {
	padding-top:calc(env(safe-area-inset-top, 0px) + 16px) !important;
}

/* v3.8.5 — defensive scroll behavior. Some iOS WKWebView configurations
   default body to overflow:hidden when an outer wrapper has position:fixed.
   Force native vertical scroll on the body so the page reliably scrolls past
   the tabbar. -webkit-overflow-scrolling:touch enables iOS momentum scroll. */
html, body{
	overflow-y:auto !important;
	-webkit-overflow-scrolling:touch !important;
}

/* ============================================================
 * v3.8.7 — iPhone Messages-style chat rebuild.
 * #chat = fixed full-bleed flex column:
 *   ┌─────────────────────────────────────────┐
 *   │  ← Messages    Conversation Title       │  ← sticky header (back + name)
 *   ├─────────────────────────────────────────┤
 *   │                                         │
 *   │       message bubbles, scroll           │  ← flex-grow body
 *   │                                         │
 *   ├─────────────────────────────────────────┤
 *   │  📷  [type a message    ]   ⬆          │  ← sticky composer, follows keyboard
 *   └─────────────────────────────────────────┘
 * Body shows tabbar HIDDEN while #chat is the active screen. JS adds the
 * .vo-chat-active class to <body> on show('chat'), removes on leave.
 * ============================================================ */
#vo-root.curbside #chat:not(.hide){
	/* Full-bleed fixed layout so we control everything inside. */
	position:fixed !important;
	top:0 !important; left:0 !important; right:0 !important;
	bottom:0 !important;
	display:flex !important;
	flex-direction:column !important;
	background:var(--p-bg, #f4f6f9) !important;
	z-index:10 !important;
	padding:0 !important;
	margin:0 !important;
	overflow:hidden !important;
}

/* HEADER — back button + title sit at the very top, padded for status bar. */
#vo-root.curbside #chat > button.back{
	display:inline-flex !important;
	visibility:visible !important;
	height:auto !important;
	width:auto !important;
	align-items:center !important;
	gap:6px !important;
	position:absolute !important;
	top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
	left:12px !important;
	z-index:3 !important;
	padding:8px 12px !important;
	margin:0 !important;
	background:transparent !important;
	color:var(--p-navy, #294a70) !important;
	border:none !important;
	font-size:15px !important;
	font-weight:600 !important;
	cursor:pointer !important;
	-webkit-appearance:none !important;
}
#vo-root.curbside #chat > .bar.vo-msg-bar{
	position:relative !important;
	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	justify-content:center !important;
	padding:calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px !important;
	background:#fff !important;
	border-bottom:1px solid #e5e9f0 !important;
	box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
	flex:0 0 auto !important;
	min-height:56px !important;
	margin:0 !important;
}
#vo-root.curbside #chat > .bar.vo-msg-bar h1{
	margin:0 !important;
	font-size:17px !important;
	font-weight:700 !important;
	letter-spacing:-.01em !important;
	color:var(--p-text, #1c1c1e) !important;
	text-align:center !important;
}
#vo-root.curbside #chat > .bar.vo-msg-bar .who{
	font-size:12px !important;
	color:#8e8e93 !important;
	margin-top:2px !important;
	display:block !important;
}

/* BODY — scrollable message list, flex-grows to fill available space. */
#vo-root.curbside #chat > #chatBody.vo-msg-body{
	flex:1 1 auto !important;
	min-height:0 !important;
	max-height:none !important;
	overflow-y:auto !important;
	-webkit-overflow-scrolling:touch !important;
	background:var(--p-bg, #f4f6f9) !important;
	border-radius:0 !important;
	padding:14px 12px 8px !important;
	margin:0 !important;
	display:flex !important;
	flex-direction:column !important;
	gap:6px !important;
}

/* MENTION dropdown (when typing @ in compose) — sits ABOVE the composer. */
#vo-root.curbside #chat > #chatMention.vo-msg-mention{
	flex:0 0 auto !important;
	margin:0 !important;
	padding:6px 12px !important;
	background:#fff !important;
	border-top:1px solid #e5e9f0 !important;
}

/* COMPOSER — sticky to the bottom of #chat, follows keyboard via safe-area
   inset + visualViewport (browser handles this when composer is in normal
   doc-flow inside a fixed flex parent). */
#vo-root.curbside #chat > .vo-msg-compose{
	flex:0 0 auto !important;
	display:grid !important;
	grid-template-columns:44px 1fr 44px !important;
	gap:8px !important;
	align-items:center !important;
	padding:8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
	margin:0 !important;
	background:#fff !important;
	border-top:1px solid #e5e9f0 !important;
}
#vo-root.curbside #chat > .vo-msg-compose .vo-msg-attach{
	width:44px !important; height:44px !important;
	border-radius:50% !important;
	background:#f0f2f6 !important;
	border:none !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	font-size:18px !important;
	cursor:pointer !important;
	padding:0 !important;
	color:#8e8e93 !important;
}
#vo-root.curbside #chat > .vo-msg-compose input[type="text"]{
	width:100% !important;
	margin:0 !important;
	padding:10px 16px !important;
	border-radius:20px !important;
	border:1px solid #d8dde5 !important;
	background:#fff !important;
	font-size:16px !important; /* 16px prevents iOS auto-zoom */
	box-sizing:border-box !important;
	min-width:0 !important;
}
#vo-root.curbside #chat > .vo-msg-compose input[type="text"]:focus{
	outline:0 !important;
	border-color:var(--p-navy, #294a70) !important;
	box-shadow:0 0 0 3px rgba(41, 74, 112, .12) !important;
}
#vo-root.curbside #chat > .vo-msg-compose .vo-msg-send{
	width:44px !important; height:44px !important;
	border-radius:50% !important;
	background:#3a87ff !important;
	color:#fff !important;
	border:none !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	cursor:pointer !important;
	padding:0 !important;
	-webkit-appearance:none !important;
}
#vo-root.curbside #chat > .vo-msg-compose .vo-msg-send svg{ width:18px; height:18px; }

/* When on the chat screen, HIDE the bottom tabbar entirely — it overlaps
   the composer when the soft keyboard opens, and there's a back button at
   the top of the header for navigation. JS toggles .vo-chat-active on body. */
body.vo-chat-active #vo-root.curbside .cb-tabbar{ display:none !important; }

/* Pending photo preview chip — small thumbnail above composer. */
#vo-root.curbside #chat > #chatPending.vo-msg-pending{
	flex:0 0 auto !important;
	padding:6px 12px !important;
	background:#fff !important;
	border-top:1px solid #e5e9f0 !important;
}

/* ===========================================================================
   v3.9.0 — Uber-style driver dispatch queue (#voDispatchSlot)
   Live card that appears between primary CTAs and the tile grid whenever
   there are unclaimed requested cars in the driver's venue. Each row peeps +
   pulses on first paint, ages amber after 2 min, red after 5 min.
   =========================================================================== */
#vo-root.curbside .vo-dispatch-slot:empty { display: none; }
#vo-root.curbside .vo-dispatch-card {
  background: linear-gradient(135deg, #1a3354 0%, #294a70 100%);
  border-radius: 16px;
  padding: 14px;
  margin: 14px 0 4px;
  box-shadow: 0 10px 30px -10px rgba(20,40,80,.35), 0 2px 8px rgba(0,0,0,.15);
  color: #fff;
  animation: voDispatchInit .35s ease-out;
}
@keyframes voDispatchInit { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
#vo-root.curbside .vo-dispatch-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 2px;
}
#vo-root.curbside .vo-dispatch-eyebrow {
  font: 700 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: #e69b1e;
}
#vo-root.curbside .vo-dispatch-count {
  font: 700 12px/1 'Inter', system-ui, sans-serif;
  background: rgba(255,255,255,.14); padding: 4px 8px; border-radius: 999px;
  color: #fff;
}
#vo-root.curbside .vo-dispatch-list { display: flex; flex-direction: column; gap: 8px; }
#vo-root.curbside .vo-dispatch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 10px;
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 12px;
  padding: 12px 14px;
  border-left: 4px solid #294a70;
  animation: voDispatchRowIn .25s ease-out;
}
@keyframes voDispatchRowIn { from { transform: scale(.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#vo-root.curbside .vo-dispatch-row-amber { border-left-color: #e69b1e; background: #fffbef; }
#vo-root.curbside .vo-dispatch-row-red {
  border-left-color: #c62828;
  background: #fff4f4;
  animation: voDispatchRowIn .25s ease-out, voDispatchPulse 1.8s ease-in-out infinite;
}
@keyframes voDispatchPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(198,40,40,.0); }
  50%     { box-shadow: 0 0 0 6px rgba(198,40,40,.18); }
}
#vo-root.curbside .vo-dispatch-row-l { min-width: 0; }
#vo-root.curbside .vo-dispatch-ticket {
  font: 700 22px/1.05 'Playfair Display', Georgia, serif;
  color: #1a3354; letter-spacing: -.01em;
}
#vo-root.curbside .vo-dispatch-venue {
  font: 700 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: #6b7280; margin-top: 4px;
}
#vo-root.curbside .vo-dispatch-veh {
  font: 600 13px/1.25 'Inter', system-ui, sans-serif;
  color: #294a70; margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#vo-root.curbside .vo-dispatch-wait {
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  color: #6b7280; margin-top: 6px;
}
#vo-root.curbside .vo-dispatch-row-amber .vo-dispatch-wait { color: #cf8a15; }
#vo-root.curbside .vo-dispatch-row-red   .vo-dispatch-wait { color: #c62828; font-weight: 700; }
#vo-root.curbside .vo-dispatch-accept {
  background: linear-gradient(135deg, #e69b1e 0%, #cf8a15 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 22px !important;
  font: 700 15px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 4px 12px -2px rgba(207,138,21,.5);
  cursor: pointer;
  min-width: 100px;
  width: auto !important;   /* defeat theme `#vo-root button { width: 100% !important }` */
  transition: transform .12s ease, box-shadow .12s ease;
}
#vo-root.curbside .vo-dispatch-accept:active {
  transform: scale(.96);
  box-shadow: 0 2px 6px -2px rgba(207,138,21,.5);
}
#vo-root.curbside .vo-dispatch-accept:disabled {
  opacity: .55; cursor: wait;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  box-shadow: none;
}

/* v3.9.0 — PARK vs PULL lane badges + lane tints */
#vo-root.curbside .vo-dispatch-badge {
  display: inline-block;
  font: 700 10px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  margin-bottom: 8px;
}
#vo-root.curbside .vo-dispatch-badge-pull {
  background: linear-gradient(135deg, #e69b1e, #cf8a15);
  color: #1a1a1a;
}
#vo-root.curbside .vo-dispatch-badge-park {
  background: linear-gradient(135deg, #15a692, #0e7a6c);
  color: #fff;
}
/* PARK rows pick up a teal left-border by default (overridden by amber/red age tints). */
#vo-root.curbside .vo-dispatch-row-park { border-left-color: #15a692; }
#vo-root.curbside .vo-dispatch-row-park.vo-dispatch-row-amber { border-left-color: #e69b1e; }
#vo-root.curbside .vo-dispatch-row-park.vo-dispatch-row-red   { border-left-color: #c62828; }
/* PARK accept button stays teal so the lane stays visually distinct. */
#vo-root.curbside .vo-dispatch-row-park .vo-dispatch-accept {
  background: linear-gradient(135deg, #15a692 0%, #0e7a6c 100%) !important;
  box-shadow: 0 4px 12px -2px rgba(14,122,108,.5);
}
#vo-root.curbside .vo-dispatch-row-park .vo-dispatch-accept:active {
  box-shadow: 0 2px 6px -2px rgba(14,122,108,.5);
}

/* ===========================================================================
   v3.9.2 — Pickup screen (front lead "Send for pickup") polish
   Prior to v3.9.2 the .vo-rq-sec/.vo-rq-sec-h/.vo-rq-sec-n/.vo-rq-empty
   selectors had NO CSS, so the count number rendered glued to the section
   label ("Front0" / "Lot0") with no spacing and the empty-state messages
   were plain unstyled text.
   =========================================================================== */
#vo-root.curbside .vo-rq-sec {
  margin: 18px 0 8px;
}
#vo-root.curbside .vo-rq-sec-h {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 2px 8px;
  padding: 0 2px;
}
#vo-root.curbside .vo-rq-sec-h > span:first-child {
  font: 700 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: #6b7280;
}
#vo-root.curbside .vo-rq-sec-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 8px;
  background: #eef2f7; color: #294a70;
  font: 700 12px/1 'Inter', system-ui, sans-serif;
  border-radius: 999px;
}
#vo-root.curbside .vo-rq-empty {
  background: #f4f6f9;
  color: #6b7280;
  font: 500 14px/1.3 'Inter', system-ui, sans-serif;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed #d8dee8;
  text-align: center;
}
#vo-root.curbside .vo-rq-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  width: 100% !important;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left !important;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#vo-root.curbside .vo-rq-card:active {
  transform: scale(.99);
  border-color: #294a70;
  box-shadow: 0 4px 14px -4px rgba(20,40,80,.18);
}
#vo-root.curbside .vo-rq-tkt {
  font: 700 18px/1 'Playfair Display', Georgia, serif;
  color: #1a3354;
}
#vo-root.curbside .vo-rq-info { min-width: 0; }
#vo-root.curbside .vo-rq-info b {
  display: block;
  font: 600 14px/1.25 'Inter', system-ui, sans-serif;
  color: #1a1a1a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#vo-root.curbside .vo-rq-meta {
  display: block;
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  color: #6b7280;
  margin-top: 4px;
}
#vo-root.curbside .vo-rq-arrow {
  font-size: 22px; color: #294a70;
  width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center;
}

/* v3.9.11 — Park-location fast picker (location pills + number pad). */
#vo-root.curbside #pkLocPicker{ margin:4px 0 12px; }
#vo-root.curbside .vo-loc-grp{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
#vo-root.curbside .vo-loc-nums{ gap:6px; }
#vo-root.curbside .vo-loc-pill{ appearance:none; border:1.5px solid #d8dee8; background:#fff; color:#294a70; font:700 14px/1 'Inter',system-ui,sans-serif; padding:11px 16px; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#vo-root.curbside .vo-loc-pill.active{ background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; border-color:#1a3354; }
#vo-root.curbside .vo-loc-num{ appearance:none; border:1.5px solid #d8dee8; background:#fff; color:#1a1a1a; font:700 15px/1 'Inter',system-ui,sans-serif; min-width:44px; padding:11px 0; border-radius:12px; cursor:pointer; flex:1 0 calc(20% - 6px); text-align:center; -webkit-tap-highlight-color:transparent; }
#vo-root.curbside .vo-loc-num.active{ background:linear-gradient(135deg,#e69b1e,#cf8a15); color:#fff; border-color:#cf8a15; }
#vo-root.curbside .vo-loc-num-x{ color:#c62828; border-color:#f0c8c8; font-weight:600; flex-basis:calc(40% - 6px); }
#vo-root.curbside .vo-loc-preview{ font:700 16px/1.2 'Inter',system-ui,sans-serif; color:#9aa3b2; padding:8px 2px 2px; }
#vo-root.curbside .vo-loc-preview.set{ color:#294a70; }

/* v3.9.12 — Front/manager floating action button (New Client). */
#vo-root.curbside .cb-fab{
  position:fixed; right:18px; z-index:9000;
  bottom:calc(86px + env(safe-area-inset-bottom,0px)); /* clear the tabbar */
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,#e69b1e,#cf8a15); color:#fff;
  box-shadow:0 10px 24px -6px rgba(207,138,21,.55), 0 3px 8px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease;
}
#vo-root.curbside .cb-fab:active{ transform:scale(.92); }
#vo-root.curbside .cb-fab svg{ width:28px; height:28px; }

/* v3.9.18 — Dashboard / stat drill-down modal + tappable stat tiles. */
#vo-root.curbside .vo-stat-tap,#vo-root.curbside .metric-tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; border:none; font:inherit; text-align:center; }
#vo-root.curbside .vo-stat-tap:active,#vo-root.curbside .metric-tap:active{ transform:scale(.97); }
.vo-drill-modal{ position:fixed; inset:0; z-index:11000; background:rgba(10,18,30,.55); display:none; align-items:flex-end; justify-content:center; }
.vo-drill-sheet{ background:#fff; width:100%; max-width:560px; border-radius:18px 18px 0 0; max-height:82vh; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom,0px); }
.vo-drill-h{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #eef2f7; font:800 17px/1 'Inter',system-ui,sans-serif; color:#1a3354; }
.vo-drill-x{ background:#eef2f7; border:none; width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1; color:#294a70; cursor:pointer; }
.vo-drill-list{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 12px 16px; }
.vo-drill-seccap{ font:800 11px/1 'Inter',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#6b7280; margin:14px 6px 8px; }
.vo-drill-row{ display:flex; align-items:center; gap:12px; width:100%; background:#f7f9fc; border:1px solid #eef2f7; border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer; text-align:left; font:inherit; -webkit-tap-highlight-color:transparent; }
.vo-drill-row:active{ background:#eef2f7; }
.vo-drill-tk{ font:900 20px/1 'Playfair Display',Georgia,serif; color:#1a3354; min-width:54px; }
.vo-drill-mid{ flex:1; min-width:0; }
.vo-drill-veh{ display:block; font:700 14px/1.2 'Inter',system-ui,sans-serif; color:#1a1a1a; }
.vo-drill-sub{ display:block; font:500 12px/1.3 'Inter',system-ui,sans-serif; color:#6b7280; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vo-drill-tags{ display:flex; align-items:center; gap:6px; color:#9aa3b2; }
.vo-drill-tag{ font:800 10px/1 'Inter',system-ui,sans-serif; background:#eef2f7; color:#294a70; padding:4px 7px; border-radius:6px; }
.vo-drill-tag.vip{ background:#fff3d6; color:#cf8a15; }
.vo-drill-empty{ text-align:center; color:#6b7280; padding:40px 20px; font-size:14px; }

/* ============================================================
   v3.9.28 — Drivers screen (live locations) cards
   ============================================================ */
#vo-root.curbside .vo-drv-summary{
	display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;
}
#vo-root.curbside .vo-drv-sumstat{
	background:var(--p-surface); border:1px solid var(--p-line);
	border-radius:14px; padding:14px 8px; text-align:center;
	box-shadow:var(--p-shadow-sm);
}
#vo-root.curbside .vo-drv-sumstat b{
	display:block; font-size:26px; font-weight:800; color:var(--p-text);
	font-variant-numeric:tabular-nums; line-height:1;
}
#vo-root.curbside .vo-drv-sumstat b.vo-drv-live{ color:#15a692; }
#vo-root.curbside .vo-drv-sumstat span{
	display:block; margin-top:4px; font-size:11.5px; font-weight:700;
	text-transform:uppercase; letter-spacing:.03em; color:var(--p-muted);
}
#vo-root.curbside .vo-drv-list{ display:flex; flex-direction:column; gap:10px; }
#vo-root.curbside .vo-drv-card{
	background:var(--p-surface); border:1px solid var(--p-line);
	border-left-width:4px; border-radius:14px; padding:13px 15px;
	box-shadow:var(--p-shadow-sm);
}
#vo-root.curbside .vo-drv-card.vo-drv-live{   border-left-color:#15a692; }
#vo-root.curbside .vo-drv-card.vo-drv-recent{ border-left-color:#cf8a15; }
#vo-root.curbside .vo-drv-card.vo-drv-stale{  border-left-color:#c62828; }
#vo-root.curbside .vo-drv-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#vo-root.curbside .vo-drv-id{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700; color:var(--p-text); }
#vo-root.curbside .vo-drv-onshift{
	font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
	color:#0e7a6c; background:rgba(21,166,146,.12); padding:2px 8px; border-radius:999px;
}
#vo-root.curbside .vo-drv-role{ font-size:11.5px; color:var(--p-muted); font-weight:600; }
#vo-root.curbside .vo-drv-map{
	display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
	font-size:13px; font-weight:700; color:var(--p-navy); text-decoration:none;
	padding:6px 12px; border:1px solid var(--p-line); border-radius:10px; background:var(--p-bg);
}
#vo-root.curbside .vo-drv-map svg{ width:15px; height:15px; }
#vo-root.curbside .vo-drv-loc{ display:flex; align-items:center; gap:8px; margin-top:9px; font-size:13.5px; color:var(--p-text-dim); }
#vo-root.curbside .vo-drv-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
#vo-root.curbside .vo-drv-foot{
	display:flex; align-items:flex-start; gap:6px; margin-top:14px;
	font-size:12px; color:var(--p-muted); line-height:1.4;
}
#vo-root.curbside .vo-drv-foot svg{ width:14px; height:14px; flex:0 0 auto; margin-top:1px; }

/* v3.9.31 — inline ticket Scan button on Park / Pickup */
#vo-root.curbside .vo-scan-row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
#vo-root.curbside .vo-scan-row > input{ width:100% !important; }
#vo-root.curbside .vo-scan-btn{
	width:auto !important; flex:0 0 auto; white-space:nowrap;
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	padding:0 16px !important; min-height:48px; border-radius:12px;
	border:1px solid var(--p-line); background:var(--p-surface); color:var(--p-navy);
	font-weight:700; font-size:14px; cursor:pointer;
}
#vo-root.curbside .vo-scan-btn .vo-ico{ width:18px; height:18px; flex:0 0 18px; vertical-align:middle !important; display:block; }
#vo-root.curbside .vo-scan-btn:active{ background:var(--p-elev); }
#vo-root.curbside .vo-rq-scan .vo-ico{ width:18px; height:18px; vertical-align:-3px; margin-right:5px; }