/* ════════════════════════════════════════════════════════════════════════
   ROAD LOOK — the homepage's "road" design, carried across the whole app.
   The default design since 2026-10-07: pages/_document.js renders
   html[data-look="road"] on every non-admin page (/admin keeps its own design)
   and links this file after the head stylesheets. A visitor can keep the
   earlier look with ?look=classic (remembered per device; ?look=road shows the
   road look everywhere, ?look=off forgets the choice) — see lib/lookChoice.js.
   Every rule below needs html[data-look="road"], so the classic look is still
   exactly what it was wherever the attribute is absent.

   The look, in one breath: warm paper instead of grey, warm ink instead of
   cool black, a thin ink line around cards / fields / tables, a thicker ink
   outline plus a hard offset shadow on things you press, Bricolage
   headings, and the brand orange used as a fill (never as small text).

   Built in layers so it reaches every page without touching each component:
     1. tokens   — the shared colour / line / shadow / font variables that
                   ~6,000 inline styles and stylesheets already read
     2. base     — page background, headings, selection, focus
     3. controls — the shared button system, fields, tabs/chips, links
     4. surfaces — dialogs, sheets, the app frame, auth screens
     5. screens  — dispatch board, driver link, tracking page, marketing
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. tokens ─────────────────────────────────────────────────────────── */
html[data-look="road"],
html[data-look="road"] [data-theme="light"] {
  --road-paper: #FBF6EC;
  --road-card: #FFFDF8;
  --road-ink: #1E1B16;
  --road-body: #574D42;     /* 7.7:1 on paper */
  --road-muted: #75695B;    /* 5.0:1 on paper */
  --road-orange: #FC8D1A;   /* fills only */
  --road-orange-hover: #FF9B30;
  --road-orange-press: #F28412;
  --road-butter: #FFE3A8;
  --road-peach: #FFF1DE;
  --road-hair: rgba(30, 27, 22, 0.16);
  --road-sh-1: 2px 2px 0 var(--road-ink);
  --road-sh-2: 3px 3px 0 var(--road-ink);
  --road-sh-3: 5px 5px 0 var(--road-ink);
  --road-sh-4: 7px 7px 0 var(--road-ink);
  --road-display: var(--font-display, 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif);
}
html[data-look="road"]:not([data-theme="dark"]),
html[data-look="road"] [data-theme="light"] {
  --color-bg-page: var(--road-paper);
  --color-bg-surface: var(--road-card);
  --color-bg-surface-alt: #FFF8EE;
  --color-bg-hover: var(--road-peach);
  --color-bg-input: var(--road-card);
  --color-bg-selected: #FFEBCC;
  --color-scheduled-pickup-bg: var(--road-peach);
  --color-border: var(--road-ink);
  --color-border-light: var(--road-hair);
  --color-border-card: var(--road-ink);
  --color-border-subtle: var(--road-hair);
  --color-text-primary: var(--road-ink);
  --color-text-secondary: var(--road-body);
  --color-text-muted: var(--road-muted);
  --color-text-tertiary: var(--road-muted);
  --color-input-text: var(--road-ink);
  --color-card-bg: var(--road-card);
  --color-bg-elevated: var(--road-card);
  --color-surface: var(--road-card);
  --color-shadow: rgba(30, 27, 22, 0.10);
  --color-shadow-hover: rgba(30, 27, 22, 0.16);
  --color-link: #92400E;
  --color-btn-hover-bg: var(--road-peach);
  --color-btn-hover-border: var(--road-ink);
  --color-btn-hover-text: var(--road-ink);
  --color-btn-active-bg: var(--road-ink);
  --color-btn-active-text: var(--road-paper);
  --color-alert-bg: #FFF3D6;
  --color-alert-border: var(--road-ink);
  --rt-orange-soft: var(--road-peach);
  --rt-accent-wash: var(--road-peach);
  --rt-sunken: #EFE6D6;
  --rt-shadow-sm: var(--road-sh-1);
  --rt-shadow-md: var(--road-sh-2);
  --rt-shadow-lg: var(--road-sh-3);
  --rt-glass: rgba(255, 253, 248, 0.92);
  --rt-glass-line: var(--road-ink);
}
/* the dark variant (driver link, tracking, app dark mode): warm night paper,
   cream lines, the same hard-shadow grammar */
html[data-look="road"][data-theme="dark"],
html[data-look="road"] [data-theme="dark"] {
  --road-ink: #F3EADB;
  --road-card: #221E18;
  --road-paper: #16130F;
  --road-hair: rgba(243, 234, 219, 0.16);
  --road-sh-1: 2px 2px 0 #000;
  --road-sh-2: 3px 3px 0 #000;
  --road-sh-3: 5px 5px 0 #000;
  --road-sh-4: 7px 7px 0 #000;
  --color-bg-page: #16130F;
  --color-bg-surface: #221E18;
  --color-bg-surface-alt: #2A251E;
  --color-bg-hover: #322B22;
  --color-bg-input: #1C1914;
  --color-bg-selected: #3A2A14;
  --color-border: rgba(243, 234, 219, 0.78);
  --color-border-light: rgba(243, 234, 219, 0.16);
  --color-border-card: rgba(243, 234, 219, 0.78);
  --color-border-subtle: rgba(243, 234, 219, 0.16);
  --color-text-primary: #F5EDE0;
  --color-text-secondary: #DCD2C2;
  --color-text-muted: #BFB3A2;
  --color-input-text: #F5EDE0;
  --color-card-bg: #221E18;
  --color-bg-elevated: #221E18;
  --color-surface: #221E18;
  --rt-shadow-sm: 2px 2px 0 #000;
  --rt-shadow-md: 3px 3px 0 #000;
  --rt-shadow-lg: 5px 5px 0 #000;
  --rt-glass: rgba(34, 30, 24, 0.92);
  --rt-glass-line: rgba(243, 234, 219, 0.6);
}
/* the app's own token sets read from body — re-point them too */
html[data-look="road"] body.rui-scope {
  --rui-radius-field: 12px;
  --rui-radius-control: 12px;
  --rui-radius-card: 18px;
  --rui-radius-panel: 20px;
  --rui-radius-dialog: 22px;
  --rui-shadow-soft: var(--road-sh-2);
  --rui-shadow-float: var(--road-sh-3);
  --rui-shadow-dialog: var(--road-sh-4);
  --rui-focus-ring: 0 0 0 3px rgba(252, 141, 26, 0.45);
  --rui-accent-wash: var(--road-peach);
  --rui-driver-avatar-bg: var(--road-orange);
  --rui-picker-header-bg: var(--road-orange);
  --rt-button-surface: var(--road-card);
  --rt-button-surface-hover: var(--road-peach);
  --rt-button-ink: var(--color-text-primary);
  --rt-button-line: var(--road-ink);
  --rt-button-orange-line: var(--road-ink);
  --rt-button-shadow: var(--road-sh-2);
  --rt-button-shadow-hover: 4px 4px 0 var(--road-ink);
}
html[data-look="road"][data-theme="dark"] body.rui-scope {
  --rt-button-line: rgba(243, 234, 219, 0.85);
  --rt-button-orange-line: rgba(243, 234, 219, 0.85);
  --rt-button-shadow: 3px 3px 0 #000;
  --rt-button-shadow-hover: 4px 4px 0 #000;
}

/* ── 2. base ───────────────────────────────────────────────────────────── */
html[data-look="road"] body { background-color: var(--color-bg-page); }
html[data-look="road"] :is(h1, h2) {
  font-family: var(--rui-font-display, var(--road-display));
  letter-spacing: -0.02em;
}
html[data-look="road"] h3 { font-family: var(--rui-font-display, var(--road-display)); letter-spacing: -0.01em; }
html[data-look="road"] ::selection { background: var(--road-butter); color: #1E1B16; }
html[data-look="road"] :is(a, button, summary, [role="button"], [role="tab"]):focus-visible {
  outline: 3px solid var(--color-text-primary) !important;
  outline-offset: 3px !important;
}
html[data-look="road"] hr { border: 0; border-top: 1px solid var(--color-border-light); }

/* ── 3. controls ───────────────────────────────────────────────────────── */
/* 3a. the shared button system (fine outline / route rail / dispatch solid).
   Colours come from the --rt-button-* tokens above; here: the press feel, the
   rounder corners, and the rail drawn inside the ink outline. */
html[data-look="road"] body.rui-scope :where(
  [data-rt-button], .rt-btn--primary, .rt-btn--tonal, .rt-btn--ghost, .rt-btn--commit,
  .btn-primary, .btn-secondary, .btn-success, .btn-fulfill, .btn-copy, .btn-refresh,
  .brand-btn, .rt-cta, .manual-btn-primary, .manual-btn-ghost, .opb-primary, .opb-ghost,
  .round-setup-primary, .as-save-round
) {
  border-radius: 12px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--rt-button-line) !important;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease !important;
}
html[data-look="road"] body.rui-scope [data-rt-button="supporting"],
html[data-look="road"] body.rui-scope :where(.rt-btn--ghost, .btn-secondary, .btn-copy, .btn-refresh, .manual-btn-ghost, .opb-ghost) {
  box-shadow: var(--road-sh-1) !important;
}
/* route rail: the orange rail stays, now drawn inside the outline */
html[data-look="road"] body.rui-scope [data-rt-button="primary"],
html[data-look="road"] body.rui-scope :where(.rt-btn--primary, .rt-btn--tonal, .btn-primary, .brand-btn, .manual-btn-primary, .opb-primary, .round-setup-primary, .as-save-round) {
  border-inline-start-width: 2px !important;
  box-shadow: inset 6px 0 0 var(--road-orange), var(--rt-button-shadow) !important;
}
html[data-look="road"][dir="rtl"] body.rui-scope [data-rt-button="primary"],
html[data-look="road"][dir="rtl"] body.rui-scope :where(.rt-btn--primary, .rt-btn--tonal, .btn-primary, .brand-btn, .manual-btn-primary, .opb-primary, .round-setup-primary, .as-save-round) {
  box-shadow: inset -6px 0 0 var(--road-orange), var(--rt-button-shadow) !important;
}
/* dispatch solid: orange fill, ink text and outline */
html[data-look="road"] body.rui-scope [data-rt-button="commit"],
html[data-look="road"] body.rui-scope :where(.rt-btn--commit, .rt-cta, .btn-success, .btn-fulfill) {
  background: var(--road-orange) !important;
  color: #1E1B16 !important;
  border-color: #1E1B16 !important;
}
html[data-look="road"][data-theme="dark"] body.rui-scope [data-rt-button="commit"],
html[data-look="road"][data-theme="dark"] body.rui-scope :where(.rt-btn--commit, .rt-cta, .btn-success, .btn-fulfill) {
  border-color: #000 !important;
}
/* press feel */
html[data-look="road"] body.rui-scope :where(
  [data-rt-button], .rt-btn--primary, .rt-btn--tonal, .rt-btn--ghost, .rt-btn--commit,
  .btn-primary, .btn-secondary, .btn-success, .btn-fulfill, .btn-copy, .btn-refresh,
  .brand-btn, .rt-cta, .manual-btn-primary, .manual-btn-ghost, .opb-primary, .opb-ghost
):hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translate(-1px, -1px) !important;
}
html[data-look="road"] body.rui-scope :where(
  [data-rt-button], .rt-btn--primary, .rt-btn--tonal, .rt-btn--ghost, .rt-btn--commit,
  .btn-primary, .btn-secondary, .btn-success, .btn-fulfill, .btn-copy, .btn-refresh,
  .brand-btn, .rt-cta, .manual-btn-primary, .manual-btn-ghost, .opb-primary, .opb-ghost
):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}
html[data-look="road"] body.rui-scope [data-rt-button="danger"] {
  border-color: var(--rt-button-danger) !important;
  box-shadow: 2px 2px 0 var(--rt-button-danger) !important;
}

/* 3b. text fields: ink outline from the tokens; a hard orange focus shadow */
html[data-look="road"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea) {
  border-radius: 12px;
  accent-color: var(--road-orange);
}
html[data-look="road"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea):focus {
  outline: none !important;
  border-color: var(--color-text-primary) !important;
  box-shadow: 3px 3px 0 var(--road-orange) !important;
}
html[data-look="road"] :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--road-orange); }

/* ── 4. surfaces ───────────────────────────────────────────────────────── */
/* 4a. dialogs and sheets: ink outline + the biggest hard shadow. Overlay
   backdrops (full-screen) are left alone. */
html[data-look="road"] [role="dialog"]:not([class*="verlay"]):not([class*="backdrop"]):not([class*="Backdrop"]):not(.lp-modal):not(.image-zoom-overlay),
html[data-look="road"] [role="alertdialog"] {
  border: 2px solid var(--color-border) !important;
  box-shadow: var(--road-sh-4) !important;
}
html[data-look="road"] [class*="BrandModal_dialog__"],
html[data-look="road"] [class*="BrandModal_card__"],
html[data-look="road"] [class*="BrandModal_box__"] {
  border: 2px solid var(--color-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--road-sh-4) !important;
  background: var(--color-bg-surface) !important;
}

/* 4b. the app frame (settings, customers, drivers, reports …) */
html[data-look="road"] [class*="AppShell_shell__"] { background: var(--color-bg-page); }
html[data-look="road"] [class*="AppShell_rail__"] {
  background: var(--color-bg-surface) !important;
  border-inline-end: 2px solid var(--color-border) !important;
  box-shadow: none !important;
}
html[data-look="road"] [class*="AppShell_navItem__"] {
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
html[data-look="road"] [class*="AppShell_navItem__"]:hover { background: var(--color-bg-hover) !important; }
html[data-look="road"] [class*="AppShell_navItem__"][aria-current="page"],
html[data-look="road"] [class*="AppShell_navItem__"][class*="active"] {
  background: var(--road-butter) !important;
  color: #1E1B16 !important;
  border-color: var(--road-ink) !important;
  box-shadow: var(--road-sh-1) !important;
}
html[data-look="road"][data-theme="dark"] [class*="AppShell_navItem__"][aria-current="page"],
html[data-look="road"][data-theme="dark"] [class*="AppShell_navItem__"][class*="active"] {
  background: #3A2A14 !important;
  color: #F5EDE0 !important;
}
html[data-look="road"] [class*="AppShell_head__"] {
  border-bottom: 2px solid var(--color-border) !important;
  background: var(--color-bg-surface) !important;
}
html[data-look="road"] [class*="AppShell_title__"] { font-family: var(--rui-font-display, var(--road-display)) !important; letter-spacing: -0.02em; }
html[data-look="road"] [class*="AppShell_moreSheet__"] {
  border: 2px solid var(--color-border) !important;
  box-shadow: var(--road-sh-4) !important;
}

/* 4c. sign in / sign up — the form side is paper; the sign-in card inside it
   picks up its outline and shadow from the inline-card rule below */
html[data-look="road"] [class*="AuthSplitLayout_formPane__"] { background: var(--color-bg-page) !important; }
html[data-look="road"] [class*="AuthSplitLayout_visualPane__"] { border-inline-start: 2px solid var(--color-border); }
html[data-look="road"] [class*="AuthInputs_routeSwitch__"] { border: 2px solid var(--color-border) !important; border-radius: 12px !important; }
html[data-look="road"] [class*="AuthInputs_otpBox__"] { border: 2px solid var(--color-border) !important; border-radius: 12px !important; }
html[data-look="road"] [class*="AuthInputs_otpBoxActive__"] { box-shadow: 3px 3px 0 var(--road-orange) !important; }

/* 4d. generic cards drawn with inline styles: anything that already has a
   border in the shared line colour plus a soft shadow gets the hard shadow */
html[data-look="road"] [style*="var(--color-border)"][style*="box-shadow"]:not(button):not(input):not(select):not(textarea) {
  box-shadow: var(--road-sh-2) !important;
}

/* ── 5. screens ────────────────────────────────────────────────────────── */

/* 5a. marketing pages (pricing, help, landing, comparison, contact, …) —
   the same grammar as the homepage: an ink line under the top bar, paper
   behind everything, outlined cards with a hard shadow */
html[data-look="road"] #__next > div > div > :is(nav, header):first-of-type:not(.dashboard-toolbar--split),
html[data-look="road"] .rtblog-nav,
html[data-look="road"] .rt-doc-nav {
  border-bottom: 2px solid var(--color-border) !important;
  background: rgba(251, 246, 236, 0.94) !important;
}
html[data-look="road"] #__next > div > div:has(> :is(nav, header):first-of-type) {
  background: var(--color-bg-page) !important;
}
/* soft pastel hero washes give way to plain paper with a dot grid */
html[data-look="road"] :is(.rt-pricing-hero, .rtblog-hero, .rtblog-index-head) {
  background: radial-gradient(circle, rgba(30, 27, 22, 0.10) 1.1px, transparent 1.4px) 0 0 / 24px 24px, var(--color-bg-page) !important;
}
/* orange (or orange-gradient) words inside a headline become ink with the
   homepage's highlighter stroke behind them */
html[data-look="road"]:not([data-theme="dark"]) :is(h1, h2) > span[style*="color"] {
  color: #1E1B16 !important;
  -webkit-text-fill-color: #1E1B16 !important;
  background: linear-gradient(100deg, rgba(255, 190, 110, 0) 1%, #FFC27A 3%, #FFB55C 96%, rgba(255, 181, 92, 0) 99%) 0 88% / 100% 42% no-repeat !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.06em;
}
/* plan cards (also on /pricing) */
html[data-look="road"] .rt-plan-card {
  background: var(--color-bg-surface) !important;
  border: 2px solid var(--color-border) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 var(--road-ink) !important;
}
html[data-look="road"] .rt-plan-card-hl { background: #FFF3DF !important; box-shadow: 10px 10px 0 var(--road-ink) !important; }
html[data-look="road"] .rt-plan-badge { border: 2px solid var(--road-ink); box-shadow: var(--road-sh-1) !important; }
html[data-look="road"] .rt-plan-card .rt-plan-cta:not(:disabled) {
  border: 2px solid var(--road-ink) !important; border-radius: 12px !important; background: var(--road-card) !important;
  color: var(--road-ink) !important; box-shadow: var(--road-sh-2) !important;
}
html[data-look="road"] .rt-plan-card-hl .rt-plan-cta:not(:disabled) { background: var(--road-orange) !important; }
html[data-look="road"] .rt-plan-billing { background: #FFF6E6 !important; border: 2px dashed var(--road-ink) !important; border-radius: 14px !important; }
html[data-look="road"] .rt-compare-card { border: 2px solid var(--road-ink) !important; box-shadow: var(--road-sh-3) !important; }
html[data-look="road"] .rt-cta-press,
html[data-look="road"] .sh-cta-press {
  border: 2px solid var(--road-ink) !important; border-radius: 12px !important; box-shadow: var(--road-sh-2) !important;
  transition: transform 140ms ease, box-shadow 140ms ease !important;
}
html[data-look="road"] :is(.rt-cta-press, .sh-cta-press):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--road-ink) !important; }
html[data-look="road"] :is(.rt-cta, .rt-cta-press, .sh-cta-press):active { transform: translate(2px, 2px); box-shadow: none !important; }
/* inline-styled pills that already carry a border: an ink outline */
html[data-look="road"] :is([style*="border-radius:999px"], [style*="border-radius: 999px"])[style*="border:"] {
  border-color: var(--road-ink) !important;
}
/* inline-styled cards: border in the shared line + a radius → hard shadow */
html[data-look="road"] :is([style*="border-radius:16px"], [style*="border-radius: 16px"], [style*="border-radius:20px"], [style*="border-radius: 20px"], [style*="border-radius:14px"], [style*="border-radius: 14px"], [style*="border-radius:12px"], [style*="border-radius: 12px"])[style*="var(--color-border)"]:not(button):not(a):not(input):not(select):not(textarea):not(span) {
  box-shadow: var(--road-sh-2) !important;
}
/* tables on marketing + app pages */
html[data-look="road"] table th { background: var(--road-butter); color: #1E1B16; }
html[data-look="road"][data-theme="dark"] table th { background: #3A2A14; color: #F5EDE0; }

/* 5b. the blog ("Dispatch Brief") */
html[data-look="road"] .rtblog { background: var(--color-bg-page); }
html[data-look="road"] :is(.rtblog-card, .rtblog-cta-card, .rtblog-related-item, .rtblog-path, .rtblog-faq-item, .rtblog-note, .rtblog-key, .rtblog-inline-cta, .rtblog-image-frame, .rtblog-table-wrap, .rtblog-stat) {
  border: 2px solid var(--road-ink) !important;
  border-radius: 18px !important;
  box-shadow: var(--road-sh-2) !important;
  background-color: var(--road-card);
}
html[data-look="road"] .rtblog-card { transition: transform 160ms ease, box-shadow 160ms ease; }
html[data-look="road"] .rtblog-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--road-ink) !important; }
html[data-look="road"] :is(.rtblog-kicker, .rtblog-card-cat) { color: #1E1B16 !important; }
html[data-look="road"] :is(.rtblog-cta-btn, .rtblog-cta) {
  background: var(--road-orange) !important; color: #1E1B16 !important; border: 2px solid var(--road-ink) !important;
  border-radius: 12px !important; box-shadow: var(--road-sh-2) !important;
}
html[data-look="road"] .rtblog-pullquote { border-inline-start: 6px solid var(--road-orange) !important; background: var(--road-peach); border-radius: 0 16px 16px 0; }
html[data-look="road"] .rtblog-step-num { background: var(--road-orange) !important; color: #1E1B16 !important; border: 2px solid var(--road-ink) !important; }
html[data-look="road"] .rtblog-statband { border-block: 2px solid var(--road-ink); }

/* 5c. help centre + developer docs */
html[data-look="road"] .rt-help-guide :is(h2, h3) { font-family: var(--rui-font-display, var(--road-display)); }
html[data-look="road"] :is(.rt-code-block, .rt-error-card) { border: 2px solid var(--road-ink) !important; border-radius: 14px !important; box-shadow: var(--road-sh-2) !important; }

/* 5d. dispatch board (/dashboard) */
html[data-look="road"] :is(.sidebar-section, .selection-bar) {
  border: 2px solid var(--color-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--road-sh-2) !important;
  background: var(--color-bg-surface) !important;
}
html[data-look="road"] .sidebar-control {
  border: 2px solid var(--color-border) !important;
  border-radius: 12px !important;
  background: var(--color-bg-surface) !important;
  box-shadow: var(--road-sh-1) !important;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease !important;
}
html[data-look="road"] .sidebar-control:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--road-ink) !important; }
html[data-look="road"] .sidebar-control:active { transform: translate(1px, 1px); box-shadow: none !important; }
html[data-look="road"] .sidebar-control.is-selected {
  background: var(--road-orange) !important;
  color: #1E1B16 !important;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--road-ink) !important;
}
html[data-look="road"] :is(.sidebar-control-icon, .sidebar-section-icon, .sidebar-section-caret, .dashboard-toolbar-context-icon) {
  border: 1.5px solid var(--color-border) !important;
  background: var(--road-butter) !important;
  color: #1E1B16 !important;
}
html[data-look="road"][data-theme="dark"] :is(.sidebar-control-icon, .sidebar-section-icon, .sidebar-section-caret, .dashboard-toolbar-context-icon) { background: #3A2A14 !important; color: #F5EDE0 !important; }
html[data-look="road"] :is(.sidebar-count, .dashboard-toolbar-count) {
  background: var(--road-butter) !important; color: #1E1B16 !important; border: 1.5px solid var(--road-ink);
}
html[data-look="road"] :is(.dashboard-toolbar-context, .dashboard-toolbar-actions) {
  border: 2px solid var(--color-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--road-sh-2) !important;
  /* see-through, so the map and the order list stay visible behind the top
     bar (no blur: it cannot be drawn while the bar slides) */
  background: color-mix(in srgb, var(--color-bg-surface) 70%, transparent) !important;
}
/* the route card's frame while the top bar slides (see the rt-toolbar-morph
   rules in styles/globals.css) — keep in step with the rule above */
html[data-look="road"].rt-toolbar-morph::view-transition-group(rt-toolbar-card) {
  border: 2px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--road-sh-2);
  background: color-mix(in srgb, var(--color-bg-surface) 70%, transparent);
}
html[data-look="road"] .dashboard-toolbar-control { border: 2px solid var(--color-border) !important; box-shadow: var(--road-sh-1) !important; }
html[data-look="road"] .view-seg { border: 2px solid var(--color-border) !important; background: var(--color-bg-page) !important; }
html[data-look="road"] .vs-btn.active { background: var(--road-ink) !important; color: var(--road-paper) !important; box-shadow: none !important; }
html[data-look="road"][data-theme="dark"] .vs-btn.active { color: #16130F !important; }
html[data-look="road"] .sort-btn { border: 2px solid var(--color-border) !important; box-shadow: var(--road-sh-1) !important; }
html[data-look="road"] .order-card {
  border: 2px solid var(--color-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--road-sh-2) !important;
  background: var(--color-bg-surface) !important;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
html[data-look="road"] .order-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--road-ink) !important; }
html[data-look="road"] :is(.order-card.selected, .order-card.is-selected, .order-card[aria-selected="true"]) { background: #FFF3DF !important; }
html[data-look="road"] .shop-badge { border: 1.5px solid var(--road-ink); color: #1E1B16 !important; }
html[data-look="road"] :is(.rounds-popup, .insights-popup) {
  border: 2px solid var(--color-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--road-sh-4) !important;
  background: var(--color-bg-surface) !important;
}
html[data-look="road"] :is(.metric-card, .sidebar-metric) { border: 2px solid var(--color-border) !important; border-radius: 14px !important; box-shadow: var(--road-sh-1) !important; }
html[data-look="road"] :is(.driver-chip, .cps-btn, .dashboard-rounds-view-tab) { border: 2px solid var(--color-border) !important; border-radius: 10px !important; }
html[data-look="road"] :is(.cps-btn.active, .dashboard-rounds-view-tab.active, .dashboard-rounds-view-tab[aria-selected="true"]) { background: var(--road-ink) !important; color: var(--road-paper) !important; }
html[data-look="road"] :is(.route-ticket, .route-stop) {
  border: 2px solid var(--color-border) !important;
  box-shadow: var(--road-sh-2) !important;
}
html[data-look="road"] .sidebar-sticky-footer { border-top: 2px solid var(--color-border) !important; background: var(--color-bg-page) !important; }
/* map controls float on a busy map: thick outline + hard shadow */
html[data-look="road"] .leaflet-bar {
  border: 2px solid var(--road-ink) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--road-sh-2) !important;
}
html[data-look="road"] .leaflet-bar a { background: var(--road-card) !important; color: var(--road-ink) !important; border-bottom-color: var(--road-ink) !important; }
html[data-look="road"] .leaflet-bar a:last-child { border-bottom: 0 !important; }
html[data-look="road"] .leaflet-popup-content-wrapper { border: 2px solid var(--road-ink); border-radius: 14px; box-shadow: var(--road-sh-3); }
/* the public demo's dock + toasts */
html[data-look="road"] .rt-dx-dock { background: var(--road-card) !important; border: 2px solid var(--road-ink) !important; box-shadow: var(--road-sh-3) !important; }
html[data-look="road"] .rt-dx-btn { border: 2px solid var(--road-ink) !important; border-radius: 12px !important; box-shadow: var(--road-sh-1) !important; }
html[data-look="road"] :is(.rt-dx-btn.primary, .rt-dx-signup) { background: var(--road-orange) !important; color: #1E1B16 !important; border: 2px solid var(--road-ink) !important; box-shadow: var(--road-sh-2) !important; }
html[data-look="road"] .rt-dx-toast { border: 2px solid var(--road-ink) !important; box-shadow: var(--road-sh-2) !important; }

/* 5d-2. the phone kit (mobile dashboard and every page built on it) */
html[data-look="road"] .rt-tabbar {
  background: var(--color-bg-surface) !important;
  border-top: 2px solid var(--color-border) !important;
  box-shadow: none !important;
}
html[data-look="road"] .rt-tab.is-on { color: var(--color-text-primary) !important; }
html[data-look="road"] .rt-tab.is-on::before {
  top: 0 !important; width: 28px !important; height: 4px !important; border-radius: 0 0 4px 4px !important;
  background: var(--road-orange) !important; box-shadow: none !important;
}
html[data-look="road"] .rt-card {
  border: 2px solid var(--color-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--road-sh-2) !important;
}
html[data-look="road"] .rt-chip {
  border: 2px solid var(--color-border) !important;
  border-radius: 12px !important;
  background: var(--color-bg-surface) !important;
  box-shadow: var(--road-sh-1) !important;
}
html[data-look="road"] .rt-chip.is-on { background: var(--road-orange) !important; color: #1E1B16 !important; box-shadow: none !important; transform: translate(1px, 1px); }
html[data-look="road"] .rt-pill { border: 1.5px solid var(--color-border); }
html[data-look="road"] .rt-segmented { background: var(--color-bg-page) !important; border: 2px solid var(--color-border) !important; border-radius: 14px !important; }
html[data-look="road"] .rt-segmented button { border-radius: 10px !important; }
html[data-look="road"] .rt-segmented button.is-on { background: var(--road-ink) !important; color: var(--road-paper) !important; box-shadow: none !important; }
html[data-look="road"][data-theme="dark"] .rt-segmented button.is-on { color: #16130F !important; }
html[data-look="road"] .rt-sheet {
  border: 2px solid var(--color-border) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  /* no offset shadow: a closed sheet waits just below the screen edge, and
     a shadow above it would peek out as a dark line */
  box-shadow: none !important;
}
html[data-look="road"] .rt-sheet__grab i { background: var(--road-ink) !important; opacity: 0.85; }
html[data-look="road"] .rt-listrow { border-bottom: 1px solid var(--color-border-light) !important; }
html[data-look="road"] .rt-iconbtn {
  border: 2px solid var(--color-border) !important;
  background: var(--color-bg-surface) !important;
  box-shadow: var(--road-sh-1) !important;
}
html[data-look="road"] .rt-iconbtn--accent { background: var(--road-orange) !important; color: #1E1B16 !important; }
html[data-look="road"] :is(.mobile-map-dock, .mobile-map-sheet, .mobile-map-tools, .mobile-map-search__input-frame) {
  border: 2px solid var(--color-border) !important;
  box-shadow: var(--road-sh-2) !important;
}

/* 5e. the driver + picker link (/delivery/<token>) — "night shift" road.
   The page keeps its own dark/light switch; both get the road grammar from
   the --d-* colours below. Many parts carry inline colours, so the rules use
   !important, and :not(#rt-d) only lifts priority above the page's own
   scoped styles and the shared button system. Status colours set inline by
   the page (station circles, the green "Sent" button) are kept on purpose. */
html[data-look="road"] body:has(.picker-container) {
  --d-bg: #16130F;
  --d-card: #221E18;
  --d-card-2: #2A251E;
  --d-line: rgba(243, 234, 219, 0.78);
  --d-line-soft: rgba(243, 234, 219, 0.32);
  --d-hair: rgba(243, 234, 219, 0.12);
  --d-dot: rgba(243, 234, 219, 0.07);
  --d-ink: #F5EDE0;
  --d-body: #DCD2C2;
  --d-muted: #B8AC9B;
  --d-shadow: #000;
  --d-shadow-line: #000;
  --d-accent: #FC8D1A;
  --d-accent-shadow: rgba(252, 141, 26, 0.45);
  --d-butter: #FFE3A8;
  --d-note-bg: rgba(255, 227, 168, 0.10);
  --d-ok: #4ADE80;
  --d-ok-bg: rgba(74, 222, 128, 0.12);
  --d-ok-shadow: rgba(74, 222, 128, 0.40);
  --d-bad: #FCA5A5;
  --d-bad-bg: rgba(248, 113, 113, 0.12);
  --d-bad-shadow: rgba(248, 113, 113, 0.40);
  background: var(--d-bg) !important;
}
html[data-look="road"][data-theme="light"] body:has(.picker-container) {
  --d-bg: #FBF6EC;
  --d-card: #FFFDF8;
  --d-card-2: #FFF6E8;
  --d-line: #1E1B16;
  --d-line-soft: rgba(30, 27, 22, 0.35);
  --d-hair: rgba(30, 27, 22, 0.12);
  --d-dot: rgba(30, 27, 22, 0.08);
  --d-ink: #1E1B16;
  --d-body: #574D42;
  --d-muted: #75695B;
  --d-shadow: #1E1B16;
  --d-shadow-line: #1E1B16;
  --d-accent-shadow: #1E1B16;
  --d-note-bg: #FFF3D6;
  --d-ok: #15803D;
  --d-ok-bg: #E3F6E8;
  --d-ok-shadow: #15803D;
  --d-bad: #B91C1C;
  --d-bad-bg: #FDECEC;
  --d-bad-shadow: #B91C1C;
}

/* the page: warm night paper with a faint dot grid */
html[data-look="road"] .picker-container:not(#rt-d) {
  background: radial-gradient(circle, var(--d-dot) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--d-bg) !important;
  color: var(--d-ink);
}

/* header: big title, the box icon as a road-sign tile, a lane marking below */
html[data-look="road"] .picker-container:not(#rt-d) .picker-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 20px 64px 26px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--d-accent) 0 22px, transparent 22px 36px);
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-header h1 {
  font-family: var(--rui-font-display, var(--road-display)) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--d-ink) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-header h1 svg {
  width: 36px !important;
  height: 36px !important;
  padding: 6px;
  box-sizing: border-box;
  margin: 0 !important;
  background: var(--d-accent);
  color: #1E1B16 !important;
  fill: currentColor;
  border: 2px solid var(--d-shadow-line);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--d-shadow);
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-summary { color: var(--d-body) !important; font-size: 14px !important; font-weight: 600; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-header > button,
html[data-look="road"] .picker-container:not(#rt-d) .picker-header > .picker-language {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
}

/* chat / scan / van: labelled tiles on phones, square floating keys on wide screens */
html[data-look="road"] .picker-container:not(#rt-d) .delivery-floating-action {
  border-radius: 14px !important;
  border: 2px solid var(--d-line) !important;
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  box-shadow: 3px 3px 0 var(--d-shadow) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .delivery-floating-action svg { color: var(--d-ink); fill: currentColor; }
html[data-look="road"] .picker-container:not(#rt-d) .delivery-floating-action:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 var(--d-shadow) !important; }
@media (max-width: 600px) {
  html[data-look="road"] .picker-container:not(#rt-d) .delivery-floating-actions {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px !important;
    margin: 14px 0 0 !important;
  }
  html[data-look="road"] .picker-container:not(#rt-d) .delivery-floating-action {
    width: auto !important;
    height: auto !important;
    min-height: 66px;
    padding: 8px 6px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  /* the label people need: the button's own (translated) name */
  html[data-look="road"] .picker-container:not(#rt-d) .delivery-floating-action::after {
    content: attr(aria-label);
    font: 700 12px/1.2 var(--font-ui, system-ui, sans-serif);
    color: var(--d-body);
    text-align: center;
  }
}

/* "Viewer mode — GPS is off" + I'm the driver */
html[data-look="road"] .picker-container:not(#rt-d) > .delivery-floating-actions + div[style]:not(.delivery-progress-bar):has(> button) {
  margin: 14px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: var(--d-note-bg) !important;
  border: 2px dashed var(--d-line-soft) !important;
  color: var(--d-ink) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) > .delivery-floating-actions + div[style]:not(.delivery-progress-bar):has(> button) > button {
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
  font-weight: 800 !important;
  min-height: 40px;
}

/* progress: a road with lane stripes; the next stop is the big orange sign */
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 4px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .progress-bar-track {
  height: 14px !important;
  border-radius: 8px !important;
  background: var(--d-card-2) !important;
  border: 2px solid var(--d-line) !important;
  overflow: hidden !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .progress-bar-fill {
  background: repeating-linear-gradient(-45deg, var(--d-accent) 0 9px, #FFAE4F 9px 18px) !important;
  border-radius: 0 !important;
}
/* the phone thumb bar: call, directions and the stop's main button */
html[data-look="road"] .picker-container:not(#rt-d) .thumb-bar {
  background: var(--d-card) !important;
  border-top: 2px solid var(--d-line) !important;
  box-shadow: 0 -4px 0 var(--d-hair) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .thumb-btn {
  border: 2px solid var(--d-line) !important;
  border-radius: 16px !important;
  background: var(--d-card-2) !important;
  color: var(--d-ink) !important;
  box-shadow: 2px 2px 0 var(--d-shadow-line) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .thumb-main {
  background: var(--d-accent) !important;
  border-color: var(--d-shadow-line) !important;
  color: #1E1B16 !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .thumb-main.is-sent {
  background: #22C55E !important;
  color: #052E16 !important;
}
/* one block per stop: done is green, the next one wears the orange sign */
html[data-look="road"] .picker-container:not(#rt-d) .stop-segments { height: 14px; gap: 4px; }
html[data-look="road"] .picker-container:not(#rt-d) .stop-seg {
  border: 2px solid var(--d-line);
  border-radius: 6px;
  background: var(--d-card-2) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .stop-seg.is-done { background: #22C55E !important; border-color: var(--d-shadow-line); }
html[data-look="road"] .picker-container:not(#rt-d) .stop-seg.is-next {
  background: repeating-linear-gradient(-45deg, var(--d-accent) 0 6px, #FFAE4F 6px 12px) !important;
  border-color: var(--d-shadow-line);
  box-shadow: none;
}
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > span {
  color: var(--d-ink) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
/* distance + planned arrival inside the orange next-stop sign */
html[data-look="road"] .picker-container:not(#rt-d) .next-stop-fact {
  background: rgba(30, 27, 22, 0.14) !important;
  color: #1E1B16 !important;
}
/* a planned time that has passed: dark chip, readable on the orange sign */
html[data-look="road"] .picker-container:not(#rt-d) .next-stop-fact.is-late {
  background: #1E1B16 !important;
  color: #FFF7ED !important;
  box-shadow: none !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > button {
  background: var(--d-accent) !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--d-shadow) !important;
  min-height: 60px;
  padding: 10px 14px !important;
  margin-top: 12px !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--d-shadow) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > button,
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > button * { color: #1E1B16 !important; }
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > button > span:not(.next-stop-chip) { font-size: 15px !important; font-weight: 800 !important; }
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > button > span:not(.next-stop-chip) span[style] { font-weight: 600 !important; opacity: 0.8; }
html[data-look="road"] .picker-container:not(#rt-d) .delivery-progress-bar > button .next-stop-chip {
  background: #1E1B16 !important;
  color: #FFE3A8 !important;
  border-radius: 7px !important;
}

/* the route map card */
html[data-look="road"] .picker-container:not(#rt-d) > .delivery-progress-bar + div {
  margin: 18px 0 0 !important;
  background: var(--d-card) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 var(--d-shadow) !important;
  overflow: hidden !important;
}
html[data-look="road"] .picker-container:not(#rt-d) > .delivery-progress-bar + div > div:first-child {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  padding: 12px 14px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) > .delivery-progress-bar + div > div:first-child span { color: var(--d-ink) !important; font-weight: 800 !important; }
html[data-look="road"] .picker-container:not(#rt-d) > .delivery-progress-bar + div > div:nth-child(2) { border-top: 2px solid var(--d-line); }
html[data-look="road"] .picker-container:not(#rt-d) > .delivery-progress-bar + div > div:nth-child(2) > div:not(.leaflet-container) {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
}

/* summary of all items */
html[data-look="road"] .picker-container:not(#rt-d) .items-summary-section {
  margin: 20px 0 0 !important;
  background: var(--d-card) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 var(--d-shadow) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .summary-header {
  background: var(--d-card) !important;
  border-bottom: 2px solid var(--d-line) !important;
  padding: 14px 16px !important;
  color: var(--d-muted) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .summary-header h2 {
  font-family: var(--rui-font-display, var(--road-display)) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--d-ink) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .summary-header h2 svg { color: var(--d-accent) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .summary-items { padding: 6px 10px 10px !important; }
html[data-look="road"] .picker-container:not(#rt-d) .summary-item {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 var(--d-hair);
  padding: 12px 8px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .summary-item:last-child { box-shadow: none; }
html[data-look="road"] .picker-container:not(#rt-d) .summary-item-title span { color: var(--d-ink) !important; font-weight: 700 !important; }
html[data-look="road"] .picker-container:not(#rt-d) :is(.summary-item-image, .item-image) { position: relative; }
html[data-look="road"] .picker-container:not(#rt-d) .summary-item-image img {
  border: 2px solid var(--d-line);
  border-radius: 12px !important;
  box-sizing: border-box;
}
html[data-look="road"] .picker-container:not(#rt-d) :is(.summary-item-price, .item-price) { color: var(--d-ink) !important; font-weight: 800 !important; }
html[data-look="road"] .picker-container:not(#rt-d) .summary-item-complete { background: var(--d-ok-bg) !important; box-shadow: none; }

/* the + / − counter: one chunky control; + is the orange key you press most */
html[data-look="road"] .picker-container:not(#rt-d) .pick-buttons {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 2px solid var(--d-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--d-card-2);
  box-shadow: 2px 2px 0 var(--d-shadow);
}
html[data-look="road"] .picker-container:not(#rt-d) .pick-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--d-body) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .pick-btn.plus { background: var(--d-accent) !important; color: #1E1B16 !important; }
html[data-look="road"] .picker-container:not(#rt-d) .pick-btn:disabled { opacity: 0.35 !important; }
html[data-look="road"] .picker-container:not(#rt-d) :is(.pick-count, .pick-count-input) {
  width: 52px !important;
  height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-inline: 2px solid var(--d-line) !important;
  border-radius: 0 !important;
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-align: center;
  box-shadow: none !important;
}
html[data-look="road"] .picker-container:not(#rt-d) :is(.item-complete, .summary-item-complete) .pick-buttons { border-color: var(--d-ok); }
html[data-look="road"] .picker-container:not(#rt-d) :is(.item-complete, .summary-item-complete) .pick-btn.plus { background: transparent !important; color: var(--d-muted) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .pick-qty-label { color: var(--d-muted) !important; font-size: 13px !important; }
html[data-look="road"] .picker-container:not(#rt-d) .pick-qty-label strong { color: var(--d-ink) !important; font-size: 17px !important; }

/* order cards */
html[data-look="road"] .picker-container:not(#rt-d) .orders-container { margin-top: 24px; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-order {
  background: var(--d-card) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 0 var(--d-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order:has(.next-stop-chip):not(.order-fulfilled):not(.order-missed) {
  border-color: var(--d-accent) !important;
  box-shadow: 5px 5px 0 var(--d-accent-shadow) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order.order-fulfilled { border-color: var(--d-ok) !important; box-shadow: 5px 5px 0 var(--d-ok-shadow) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-order.order-missed { border-color: var(--d-bad) !important; box-shadow: 5px 5px 0 var(--d-bad-shadow) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .order-collapse-bar {
  background: var(--d-card-2) !important;
  border-bottom: 2px solid var(--d-line) !important;
  padding: 12px 14px !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
/* (the newer workspace reuses some of these class names next to its own
   module classes — those, with "__" in a class, keep their own rules) */
html[data-look="road"] .picker-container:not(#rt-d) .order-collapse-bar > span:not(.order-num):not(.next-stop-chip):not([class*="__"]) { color: var(--d-body) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .order-collapse-bar > span:has(> strong) { flex: 1 1 160px; min-width: 0; }
html[data-look="road"] .picker-container:not(#rt-d) .order-collapse-bar strong { color: var(--d-ink) !important; font-weight: 800 !important; }
html[data-look="road"] .picker-container:not(#rt-d) .order-num {
  min-width: 32px;
  height: 32px;
  display: inline-grid !important;
  place-items: center;
  padding: 0 6px !important;
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 9px !important;
  box-shadow: 2px 2px 0 var(--d-shadow);
  font-family: var(--rui-font-display, var(--road-display));
  font-weight: 800 !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .order-collapse-bar .next-stop-chip {
  background: var(--d-butter) !important;
  color: #1E1B16 !important;
  border: 1.5px solid var(--d-shadow-line);
  border-radius: 7px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-header {
  background: var(--d-card) !important;
  padding: 16px !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--d-hair) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .order-title,
html[data-look="road"] .picker-container:not(#rt-d) .order-title span {
  font-family: var(--rui-font-display, var(--road-display)) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--d-ink) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) :is(.customer-info, .address-info) { color: var(--d-body) !important; font-size: 14.5px !important; }
html[data-look="road"] .picker-container:not(#rt-d) :is(.customer-info, .address-info) span:not([style]) { color: var(--d-ink) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .customer-info a[style] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  margin-inline-start: 4px;
  background: var(--d-card-2) !important;
  color: var(--d-ink) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
  font-weight: 800 !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .address-info > div[style]:not(:first-child),
html[data-look="road"] .picker-container:not(#rt-d) .order-note {
  background: var(--d-note-bg) !important;
  color: var(--d-ink) !important;
  border: 0 !important;
  border-inline-start: 4px solid var(--d-accent) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .order-note * { color: inherit !important; }
/* on phones an icon with a small word under it, on wider screens icon and
   word side by side; the size follows the content */
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-header .btn-waze {
  min-width: 48px !important;
  min-height: 48px !important;
  justify-content: center;
  border-radius: 14px !important;
  border: 2px solid var(--d-line) !important;
  background: var(--d-card-2) !important;
  color: var(--d-ink) !important;
  box-shadow: 3px 3px 0 var(--d-shadow) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-header > div:last-child > div:first-child .btn-waze {
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
  border-color: var(--d-shadow-line) !important;
}

/* cartons + note */
html[data-look="road"] .picker-container:not(#rt-d) .driver-note-section {
  padding: 12px 16px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--d-hair);
}
html[data-look="road"] .picker-container:not(#rt-d) .carton-inline {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 2px solid var(--d-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--d-card-2);
}
html[data-look="road"] .picker-container:not(#rt-d) .carton-label { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--d-body) !important; font-weight: 700; }
html[data-look="road"] .picker-container:not(#rt-d) .carton-btn {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border: 0 !important;
  border-inline-start: 2px solid var(--d-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--d-ink) !important;
  font-size: 20px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .carton-count {
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  border-inline-start: 2px solid var(--d-line);
  color: var(--d-ink) !important;
  font-weight: 800;
}
html[data-look="road"] .picker-container:not(#rt-d) .btn-note-toggle {
  border: 0 !important;
  background: transparent !important;
  color: var(--d-body) !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700 !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .order-status-bar {
  background: transparent !important;
  color: var(--d-muted) !important;
  padding: 12px 16px 0 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}

/* product rows */
html[data-look="road"] .picker-container:not(#rt-d) .picker-items { padding: 4px 10px !important; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 var(--d-hair) !important;
  padding: 14px 8px !important;
  gap: 12px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-item:last-child { box-shadow: none !important; }
html[data-look="road"] .picker-container:not(#rt-d) .item-image {
  width: 64px !important;
  height: 64px !important;
  flex: none !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 14px !important;
  overflow: visible !important;
  background: var(--d-card-2) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 12px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .item-title { color: var(--d-ink) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.3 !important; }
html[data-look="road"] .picker-container:not(#rt-d) .item-title > span {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 0 7px;
  background: var(--d-butter) !important;
  color: #1E1B16 !important;
  border: 1.5px solid var(--d-shadow-line);
  border-radius: 7px;
  font-size: 13px;
  line-height: 20px;
}
html[data-look="road"] .picker-container:not(#rt-d) :is(.item-variant, .summary-item .item-variant) { color: var(--d-body) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .item-sku { color: var(--d-muted) !important; font-family: var(--rt-font-mono, ui-monospace, monospace); font-size: 12px !important; }
/* per-item extras are quiet text actions, so the counter stays the thing you press */
html[data-look="road"] .picker-container:not(#rt-d) .item-action-buttons { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 0 12px !important; margin-top: 2px !important; }
html[data-look="road"] .picker-container:not(#rt-d) :is(.btn-item-missed, .btn-swap-toggle) {
  width: auto !important;
  min-height: 34px;
  padding: 4px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
html[data-look="road"] .picker-container:not(#rt-d) :is(.btn-item-missed, .btn-swap-toggle) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto !important;
  white-space: nowrap;
}
html[data-look="road"] .picker-container:not(#rt-d) .btn-item-missed { color: var(--d-bad) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .btn-swap-toggle { color: var(--d-body) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .pick-controls { gap: 10px !important; }
/* room for the larger photo beside the product name */
html[data-look="road"] .picker-container:not(#rt-d) .picker-item .item-details { flex: 1 1 calc(100% - 84px) !important; min-width: 0; }
html[data-look="road"] .picker-container:not(#rt-d) .summary-item-info { flex: 1 1 calc(100% - 72px) !important; min-width: 0; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-item.item-complete { background: var(--d-ok-bg) !important; box-shadow: none !important; }
html[data-look="road"] .picker-container:not(#rt-d) :is(.picker-item.item-complete .item-image, .summary-item-complete .summary-item-image)::after {
  content: "\2713";
  position: absolute;
  inset-inline-end: -8px;
  bottom: -8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--d-ok);
  color: #0B2A16;
  font: 900 14px/1 var(--font-ui, system-ui, sans-serif);
  border: 2px solid var(--d-shadow-line);
  border-radius: 8px;
}
html[data-look="road"][data-theme="light"] .picker-container:not(#rt-d) :is(.picker-item.item-complete .item-image, .summary-item-complete .summary-item-image)::after { color: #FFFFFF; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-item.item-missed { background: var(--d-bad-bg) !important; box-shadow: inset 4px 0 0 var(--d-bad) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-item.item-swapped { background: var(--d-note-bg) !important; box-shadow: inset 4px 0 0 var(--d-accent) !important; }
html[data-look="road"][dir="rtl"] .picker-container:not(#rt-d) .picker-item.item-missed { box-shadow: inset -4px 0 0 var(--d-bad) !important; }
html[data-look="road"][dir="rtl"] .picker-container:not(#rt-d) .picker-item.item-swapped { box-shadow: inset -4px 0 0 var(--d-accent) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .add-product-section { padding: 4px 16px 14px !important; }
html[data-look="road"] .picker-container:not(#rt-d) .btn-add-custom {
  width: 100%;
  min-height: 48px;
  border: 2px dashed var(--d-line-soft) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--d-body) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* proof: four equal tiles */
html[data-look="road"] .picker-container:not(#rt-d) .order-extras {
  background: var(--d-card-2) !important;
  border: 0 !important;
  border-top: 2px solid var(--d-line) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .proof-section { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
html[data-look="road"] .picker-container:not(#rt-d) .btn-proof {
  width: 100% !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  text-align: start;
  line-height: 1.25 !important;
  gap: 8px;
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
  font-weight: 700 !important;
}

/* footer: the total as the big number, then status and the one main action */
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer {
  background: var(--d-card-2) !important;
  border: 0 !important;
  border-top: 1px solid var(--d-hair) !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between !important;
  gap: 12px;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer > span:first-child {
  font-family: var(--rui-font-display, var(--road-display));
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--d-ink) !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .order-pending-text { color: var(--d-muted) !important; display: inline-flex; align-items: center; gap: 6px; }
html[data-look="road"] .picker-container:not(#rt-d) .order-pending-text::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-accent);
  animation: rt-road-pulse 1.4s ease-in-out infinite;
}
html[data-look="road"] .picker-container:not(#rt-d) .btn-missed {
  min-height: 44px;
  background: transparent !important;
  color: var(--d-bad) !important;
  border: 2px solid var(--d-bad) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer + div { background: var(--d-card-2) !important; padding: 12px 16px 18px !important; }
/* the lines between the stations become lane markings, in the page's own state colour */
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer + div > div:first-child > div:nth-child(even) {
  height: 4px !important;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
  mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer + div > div:first-child > div:nth-child(odd) { box-shadow: 2px 2px 0 var(--d-shadow) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer + div > div:nth-child(2) * { color: var(--d-body); font-weight: 700; }
/* in the light theme the page's own label colours are made for dark */
html[data-look="road"][data-theme="light"] .picker-container:not(#rt-d) .picker-order-footer + div > div:nth-child(2) * { color: var(--d-body) !important; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer + div > div:last-child > button {
  min-height: 58px !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--d-shadow) !important;
  color: #1E1B16 !important;
  font-family: var(--rui-font-display, var(--road-display)) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer + div > div:last-child > button svg { fill: currentColor; }
html[data-look="road"] .picker-container:not(#rt-d) .picker-order-footer + div > div:last-child > button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--d-shadow) !important; }

/* dialogs on this page (Are you the driver? / How many cartons? …) */
html[data-look="road"] body:has(.picker-container) [role="dialog"]:not(#rt-d) {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--d-shadow) !important;
}
html[data-look="road"] body:has(.picker-container) [role="dialog"]:not(#rt-d) :is(h1, h2, h3) { color: var(--d-ink) !important; font-family: var(--rui-font-display, var(--road-display)) !important; }
html[data-look="road"] body:has(.picker-container) [role="dialog"]:not(#rt-d) [data-rt-button="primary"] {
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--d-shadow) !important;
  font-weight: 800 !important;
}
html[data-look="road"] body:has(.picker-container) [role="dialog"]:not(#rt-d) [data-rt-button="primary"]:disabled { opacity: 0.45 !important; box-shadow: none !important; }
html[data-look="road"] body:has(.picker-container) [role="dialog"]:not(#rt-d) button:not([data-rt-button="primary"]):not([aria-label*="lose"]) {
  border-color: var(--d-line) !important;
}
html[data-look="road"] .demo-cta-float { border: 2px solid var(--road-ink) !important; box-shadow: var(--road-sh-2) !important; }

/* 5e-2. the rebuilt picker + driver workspace (picker-v2 / driver-v2, the
   newer screen some businesses get). Same --d-* colours as above; its CSS
   modules keep stable names, so the rules match the readable part of each
   class (e.g. "PickerItems_itemRow__"). The many tinted button colours (blue,
   green, purple) settle into one tile style, so the orange main action and
   the red "missed" action are the only coloured ones. */
html[data-look="road"] body:has([class*="PickerWorkspace_workspace__"]) {
  --d-bg: #16130F;
  --d-card: #221E18;
  --d-card-2: #2A251E;
  --d-line: rgba(243, 234, 219, 0.78);
  --d-line-soft: rgba(243, 234, 219, 0.32);
  --d-hair: rgba(243, 234, 219, 0.12);
  --d-dot: rgba(243, 234, 219, 0.07);
  --d-ink: #F5EDE0;
  --d-body: #DCD2C2;
  --d-muted: #B8AC9B;
  --d-shadow: #000;
  --d-shadow-line: #000;
  --d-accent: #FC8D1A;
  --d-accent-shadow: rgba(252, 141, 26, 0.45);
  --d-butter: #FFE3A8;
  --d-note-bg: rgba(255, 227, 168, 0.10);
  --d-ok: #4ADE80;
  --d-ok-bg: rgba(74, 222, 128, 0.12);
  --d-bad: #FCA5A5;
  --d-bad-bg: rgba(248, 113, 113, 0.12);
  background: var(--d-bg) !important;
}
html[data-look="road"][data-theme="light"] body:has([class*="PickerWorkspace_workspace__"]) {
  --d-bg: #FBF6EC;
  --d-card: #FFFDF8;
  --d-card-2: #FFF6E8;
  --d-line: #1E1B16;
  --d-line-soft: rgba(30, 27, 22, 0.35);
  --d-hair: rgba(30, 27, 22, 0.12);
  --d-dot: rgba(30, 27, 22, 0.08);
  --d-ink: #1E1B16;
  --d-body: #574D42;
  --d-muted: #75695B;
  --d-shadow: #1E1B16;
  --d-shadow-line: #1E1B16;
  --d-accent-shadow: #1E1B16;
  --d-note-bg: #FFF3D6;
  --d-ok: #15803D;
  --d-ok-bg: #E3F6E8;
  --d-bad: #B91C1C;
  --d-bad-bg: #FDECEC;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) {
  background: radial-gradient(circle, var(--d-dot) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--d-bg) !important;
  color: var(--d-ink) !important;
}

/* header + lane marking */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_pickerHeader__"], [class*="DriverWorkspace_workspaceHeader__"]) {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-bottom: 24px !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_pickerHeader__"], [class*="DriverWorkspace_workspaceHeader__"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--d-accent) 0 22px, transparent 22px 36px);
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_pickerHeader__"], [class*="DriverWorkspace_workspaceHeader__"]) :is(h1, h2) {
  font-family: var(--rui-font-display, var(--road-display)) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--d-ink) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_pickerSummary__"], [class*="DriverWorkspace_roundSummary__"]) { color: var(--d-body) !important; }

/* surfaces: one card grammar */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is(
  [class*="PickerAssembly_orderCard__"], [class*="PickerAssembly_serviceStopCard__"], [class*="DriverWorkspace_card__"],
  [class*="PickerItems_summary__"], [class*="DeliveryWorkTools_panel__"], [class*="LoadVanControl_card__"],
  [class*="DriverWorkspace_roundBatch__"], [class*="PickerCustomerCommunications_panel__"]
) {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 0 var(--d-shadow) !important;
  overflow: hidden;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_orderCard__"], [class*="DriverWorkspace_card__"]):has(:is([class*="PickerAssembly_nextStopChip__"], [class*="DeliveryRouteOverview_eyebrow__"])) {
  border-color: var(--d-accent) !important;
  box-shadow: 5px 5px 0 var(--d-accent-shadow) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is(
  [class*="PickerAssembly_orderCollapseBar__"], [class*="PickerAssembly_orderHeader__"], [class*="PickerAssembly_serviceStopHeader__"],
  [class*="DriverWorkspace_cardHeader__"], [class*="PickerItems_summaryHeader__"], [class*="PickerCustomerCommunications_collapseButton__"]
) {
  background: var(--d-card-2) !important;
  color: var(--d-ink) !important;
  border-bottom: 2px solid var(--d-line) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_orderTitle__"], [class*="DriverWorkspace_customer__"], [class*="PickerItems_summaryToggleButton__"], [class*="PickerCustomerCommunications_collapseTitle__"]) {
  font-family: var(--rui-font-display, var(--road-display)) !important;
  font-weight: 800 !important;
  color: var(--d-ink) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerAssembly_orderTitle__"] { font-size: 21px !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is(
  [class*="PickerAssembly_orderTools__"], [class*="PickerAssembly_orderTotal__"], [class*="PickerAssembly_proofActions__"],
  [class*="PickerAssembly_serviceStopActions__"], [class*="DriverLifecycleControl_section__"], [class*="DriverWorkspace_orderTotal__"]
) {
  background: var(--d-card-2) !important;
  border: 0 !important;
  border-top: 1px solid var(--d-hair) !important;
  border-radius: 0 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_orderTotal__"], [class*="DriverWorkspace_orderTotal__"]) strong {
  font-family: var(--rui-font-display, var(--road-display));
  font-size: 19px;
  color: var(--d-ink) !important;
}

/* stop numbers and the next-stop label */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_orderNumber__"], [class*="DriverWorkspace_stopNumber__"]) {
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
  font-family: var(--rui-font-display, var(--road-display));
  font-weight: 800 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_nextStopChip__"], [class*="DeliveryRouteOverview_eyebrow__"], [class*="PickerItems_distinctVariant__"]) {
  background: var(--d-butter) !important;
  color: #1E1B16 !important;
  border: 1.5px solid var(--d-shadow-line) !important;
  border-radius: 7px !important;
}

/* progress + the next stop as the big orange sign */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DeliveryRouteOverview_routeStatus__"] { background: transparent !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DeliveryRouteOverview_progressTrack__"] {
  height: 14px !important;
  background: var(--d-card-2) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DeliveryRouteOverview_progressFill__"] {
  background: repeating-linear-gradient(-45deg, var(--d-accent) 0 9px, #FFAE4F 9px 18px) !important;
  border-radius: 0 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DeliveryRouteOverview_nextStop__"] {
  background: var(--d-accent) !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--d-shadow) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DeliveryRouteOverview_nextStop__"] :is(span, button):not([class*="DeliveryRouteOverview_primaryNavigation__"]):not([class*="DeliveryRouteOverview_eyebrow__"]) { color: #1E1B16 !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DeliveryRouteOverview_nextStop__"] [class*="DeliveryRouteOverview_eyebrow__"] { background: #1E1B16 !important; color: #FFE3A8 !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DeliveryRouteOverview_nextStop__"] [class*="DeliveryRouteOverview_primaryNavigation__"] {
  background: #1E1B16 !important;
  color: #FFE3A8 !important;
  border-color: #1E1B16 !important;
}

/* every secondary action: one neutral tile */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is(
  [class*="PickerAssembly_smsAction__"], [class*="PickerAssembly_whatsappAction__"], [class*="PickerAssembly_callButton__"],
  [class*="PickerAssembly_toolButton__"], [class*="PickerAssembly_labelLink__"], [class*="PickerProofPhotos_captureButton__"],
  [class*="PickerProofPhotos_galleryButton__"], [class*="PickerReflowDoorstep_addAction__"], [class*="PickerReflowDoorstep_secondaryAction__"],
  [class*="PickerWorkspace_noteQuietButton__"], [class*="DriverSignatureCapture_primaryButton__"], [class*="LoadVanControl_openButton__"],
  [class*="DeliveryWorkTools_button__"], [class*="DriverScanControl_primaryButton__"], [class*="DriverWorkspace_secondaryAction__"],
  [class*="DriverWorkspace_phoneAction__"], [class*="DriverWorkspace_smsAction__"], [class*="DriverWorkspace_whatsappAction__"],
  [class*="DriverWorkspace_collapseButton__"], [class*="DeliveryThemeToggle_button__"], [class*="DeliveryOfficeChatTrigger_trigger__"]
) {
  background: var(--d-card-2) !important;
  color: var(--d-ink) !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
  font-weight: 700 !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
/* directions is the move you make most once you drive: orange */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerAssembly_orderDirections__"], [class*="DriverWorkspace_primaryAction__"]) {
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--d-shadow) !important;
  font-weight: 800 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is(button, a, label):is([class*="Action__"], [class*="Button__"], [class*="Directions__"], [class*="trigger__"], [class*="Link__"]):active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

/* the one main action of a stop, and the quiet "missed" one */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DriverLifecycleControl_primaryButton__"] {
  min-height: 56px;
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
  border: 2px solid var(--d-shadow-line) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--d-shadow) !important;
  font-family: var(--rui-font-display, var(--road-display)) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="DriverLifecycleControl_dangerButton__"], [class*="PickerItems_missingButton__"], [class*="DriverWorkspace_itemMissingButton__"]) {
  background: transparent !important;
  color: var(--d-bad) !important;
  border: 2px solid var(--d-bad) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerItems_missingButton__"], [class*="DriverWorkspace_itemMissingButton__"]) {
  border: 0 !important;
  padding-inline: 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="DriverLifecycleControl_heading__"] { font-family: var(--rui-font-display, var(--road-display)) !important; color: var(--d-ink) !important; }

/* notes and info strips: one calm note style instead of blue/purple/amber boxes */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is(
  [class*="PickerAssembly_deliveryInstructions__"], [class*="DriverWorkspace_instructions__"], [class*="PickerReflowDoorstep_reflowRail__"],
  [class*="PickerCustomerCommunications_notice__"], [class*="PickerAssembly_addressUnits__"], [class*="DriverWorkspace_addressUnits__"]
) {
  background: var(--d-note-bg) !important;
  color: var(--d-ink) !important;
  border: 0 !important;
  border-inline-start: 4px solid var(--d-accent) !important;
  border-radius: 10px !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is(
  [class*="PickerAssembly_orderStatusBar__"], [class*="PickerReflowDoorstep_doorstep__"], [class*="DriverWorkspace_addressBlock__"],
  [class*="DriverWorkspace_contactBlock__"], [class*="DeliveryDriverIdentityControl_mode__"]
) {
  background: var(--d-card-2) !important;
  color: var(--d-ink) !important;
  border: 2px dashed var(--d-line-soft) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerAssembly_orderStatusBar__"] { border-width: 0 0 2px !important; border-radius: 0 !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerWorkspace_noteStatus__"], [class*="DriverWorkspace_statusBadge__"], [class*="LoadVanControl_progress__"]) {
  background: transparent !important;
  color: var(--d-body) !important;
  border: 1.5px solid var(--d-line-soft) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="DeliveryWorkTools_details__"], [class*="PickerAssembly_pickupItems__"], [class*="DriverWorkspace_itemsSection__"], [class*="DriverScanControl_section__"]) {
  border-color: var(--d-hair) !important;
}

/* product rows and the + / − counter */
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerAssembly_items__"] { background: transparent !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerItems_productImage__"], [class*="PickerItems_summaryImage__"], [class*="DriverWorkspace_itemImage__"]) {
  border: 2px solid var(--d-line) !important;
  border-radius: 12px !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerItems_title__"] { color: var(--d-ink) !important; font-weight: 800 !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) :is([class*="PickerItems_meta__"], [class*="PickerItems_variant__"]:not([class*="PickerItems_distinctVariant__"])) { color: var(--d-body) !important; }
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerItems_countField__"] {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 2px solid var(--d-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--d-card-2) !important;
  box-shadow: 2px 2px 0 var(--d-shadow) !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerItems_countField__"] button {
  min-width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--d-body) !important;
  box-shadow: none !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerItems_countField__"] [class*="PickerItems_incrementButton__"] {
  background: var(--d-accent) !important;
  color: #1E1B16 !important;
}
html[data-look="road"] [class*="PickerWorkspace_workspace__"]:not(#rt-d) [class*="PickerItems_countInput__"] {
  height: 46px !important;
  width: 52px !important;
  margin: 0 !important;
  border: 0 !important;
  border-inline: 2px solid var(--d-line) !important;
  border-radius: 0 !important;
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-align: center;
  box-shadow: none !important;
}

/* a few parts paint a fill with the line colour (fine as a 1px divider in
   the classic look, too loud once that colour is the ink outline): buttons
   like "Manage", inactive tabs, empty chart bars, badges and track bars get a
   soft neutral fill instead, so their dark text stays readable. Thin lines and
   sheet handles keep the ink colour on purpose. */
html[data-look="road"] { --road-fill: #E7DFD0; }
html[data-look="road"][data-theme="dark"] { --road-fill: #3A332A; }
html[data-look="road"] :is(
  [style*="background: var(--color-border)"], [style*="background-color: var(--color-border)"],
  .shipping-badge, .mobile-map-dock__traffic > i, .route-ticket .cb-track
) {
  background: var(--road-fill) !important;
}
/* (and the delivery-workspace parts that do the same) */
html[data-look="road"] .visit-stop-children {
  background: transparent !important;
  gap: 12px !important;
  padding: 10px !important;
}
html[data-look="road"] [class*="DeliveryWorkTools_switchTrack__"],
html[data-look="road"] [class*="DriverWorkspace_etaSwitch__"]:not([class*="DriverWorkspace_etaSwitchOn__"]) {
  background: var(--color-bg-hover) !important;
  box-shadow: inset 0 0 0 2px var(--color-border);
}
html[data-look="road"] [class*="DeliveryWorkTools_switchTarget__"] input:checked + [class*="DeliveryWorkTools_switchTrack__"] { background: #FC8D1A !important; }
html[data-look="road"] [class*="PickerWorkspace_loadingShapes__"] span { background: var(--color-border-light) !important; }

/* 5f. the customer tracking page (/tracking) — stays light: paper + ink */
html[data-look="road"] body:has(.status-card) { background: var(--road-paper) !important; }
/* the page column paints its own cool grey (#f5f6fa) behind the warm cards */
html[data-look="road"] .tracking-page { background: #FBF6EC !important; --color-bg-surface-alt: #FFF8EE; }
html[data-look="road"] :is(.status-card, .timeline, .products-list, .message-section, .map-container) {
  background: #FFFDF8 !important;
  border: 2px solid #1E1B16 !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 #1E1B16 !important;
}
html[data-look="road"] .status-card { border-inline-start-width: 2px !important; }
html[data-look="road"] .phone-link { border: 2px solid #1E1B16 !important; box-shadow: 3px 3px 0 #1E1B16 !important; background: #FFFDF8 !important; }
html[data-look="road"] .lang-picker { border: 2px solid #1E1B16 !important; box-shadow: 2px 2px 0 #1E1B16 !important; }
html[data-look="road"] .message-input { border: 2px solid #1E1B16 !important; border-radius: 12px !important; }
html[data-look="road"] .tracking-footer { border-top: 2px solid #1E1B16 !important; background: #FBF6EC !important; }
html[data-look="road"] .map-ctrl { border: 2px solid #1E1B16 !important; box-shadow: 2px 2px 0 #1E1B16 !important; }
html[data-look="road"] :is(.eta-hero, .status-card) :is(h1, h2, .eta-time) { font-family: var(--rui-font-display, var(--road-display)); }
/* delivery steps, "in 25 minutes" and the stops-before-you road: ink outlines
   and hard shadows like the cards around them */
html[data-look="road"] .trk-step-dot { border-color: #1E1B16 !important; }
html[data-look="road"] .trk-step.is-next .trk-step-dot { border-color: rgba(30, 27, 22, 0.35) !important; }
html[data-look="road"] .trk-step.is-current .trk-step-dot { box-shadow: 2px 2px 0 #1E1B16 !important; }
html[data-look="road"] .trk-step.is-failed .trk-step-dot { border-color: #B91C1C !important; }
html[data-look="road"] :is(.trk-van, .trk-home) { border: 2px solid #1E1B16 !important; box-shadow: 2px 2px 0 #1E1B16 !important; }
html[data-look="road"] .trk-done { border: 1.5px solid #1E1B16; }
html[data-look="road"] .trk-gap { border-top-color: rgba(30, 27, 22, 0.35) !important; }
html[data-look="road"] .eta-countdown { background: #FFE3A8 !important; border: 1.5px solid #1E1B16; color: #1E1B16 !important; }
html[data-look="road"] .quick-btn {
  border: 2px solid #1E1B16 !important;
  background: #FFFDF8 !important;
  color: #1E1B16 !important;
  box-shadow: 2px 2px 0 #1E1B16;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
html[data-look="road"] .quick-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1E1B16; }
html[data-look="road"] .quick-btn:active { transform: translate(1px, 1px); box-shadow: none; }
html[data-look="road"] .trk-live { color: #574D42 !important; }

/* 5g. the automations demo (/demo/automations). The page paints itself light
   with fixed colours, so these use the light road colours directly. Its dark
   "triggers" band becomes a light outlined panel (marketing pages stay
   uniformly light), and orange words become ink on a soft fill. */
html[data-look="road"] .page:has(> section.triggers) { background: transparent !important; }
html[data-look="road"] .page:has(> section.triggers) .badge {
  background: #FFE3A8 !important; color: #1E1B16 !important;
  border: 2px solid #1E1B16; box-shadow: 2px 2px 0 #1E1B16;
}
html[data-look="road"] .page:has(> section.triggers) .hl {
  color: #1E1B16 !important;
  background: linear-gradient(100deg, rgba(255, 190, 110, 0) 1%, #FFC27A 3%, #FFB55C 96%, rgba(255, 181, 92, 0) 99%) 0 88% / 100% 42% no-repeat;
  padding: 0 0.06em;
}
html[data-look="road"] .page:has(> section.triggers) :is(.cta-primary, .cta-secondary) {
  border: 2px solid #1E1B16 !important;
  box-shadow: 3px 3px 0 #1E1B16 !important;
  transition: transform 140ms ease, box-shadow 140ms ease !important;
}
html[data-look="road"] .page:has(> section.triggers) .cta-primary { background: #FC8D1A !important; color: #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) .cta-secondary { background: #FFFDF8 !important; color: #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) :is(.cta-primary, .cta-secondary):hover { transform: translate(-1px, -1px) !important; box-shadow: 4px 4px 0 #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) :is(.cta-primary, .cta-secondary):active { transform: translate(2px, 2px) !important; box-shadow: none !important; }
html[data-look="road"] .page:has(> section.triggers) :is(.step, .integrations, .feature) {
  background: #FFFDF8 !important;
  border: 2px solid #1E1B16 !important;
  box-shadow: 5px 5px 0 #1E1B16 !important;
}
html[data-look="road"] .page:has(> section.triggers) :is(.integrations, .feature) { box-shadow: 3px 3px 0 #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) .step-num {
  color: #1E1B16 !important; border: 2px solid #1E1B16; box-shadow: 2px 2px 0 #1E1B16 !important;
}
html[data-look="road"] .page:has(> section.triggers) :is(.step-meta, .integ-more) {
  background: #FFF1DE !important; color: #1E1B16 !important; border: 1.5px solid #1E1B16;
}
html[data-look="road"] .page:has(> section.triggers) .step-shot img { border: 2px solid #1E1B16; box-shadow: 4px 4px 0 #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) .feat-icon { border: 2px solid #1E1B16; }
html[data-look="road"] .page:has(> section.triggers) .triggers {
  background: #FFF1DE !important; color: #1E1B16 !important;
  border: 2px solid #1E1B16; box-shadow: 5px 5px 0 #1E1B16;
}
html[data-look="road"] .page:has(> section.triggers) .triggers::before { opacity: 0.45; }
html[data-look="road"] .page:has(> section.triggers) .triggers-h2 { color: #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) .triggers-eyebrow {
  background: #FFE3A8 !important; color: #1E1B16 !important; border: 1.5px solid #1E1B16;
}
html[data-look="road"] .page:has(> section.triggers) .chip {
  background: #FFFDF8 !important; color: #1E1B16 !important;
  border: 2px solid #1E1B16 !important; box-shadow: 2px 2px 0 #1E1B16;
}
html[data-look="road"] .page:has(> section.triggers) .chip:is(:hover, :focus-visible) {
  background: #FFE3A8 !important; border-color: #1E1B16 !important;
}
html[data-look="road"] .page:has(> section.triggers) .chip::after { border: 2px solid #1E1B16; box-shadow: 3px 3px 0 #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) .chip::before { border-top-color: #1E1B16 !important; }
html[data-look="road"] .page:has(> section.triggers) .footer-links a:hover { color: #1E1B16 !important; }

/* 5h. the driver settlement sheet (/tools/driver-settlement) — a Hebrew work
   document with its own fixed light colours */
html[data-look="road"] .dsp { background: #FBF6EC; }
html[data-look="road"] .dsp :is(.login-card, .period, .step, .driver-picker) {
  background: #FFFDF8 !important;
  border: 2px solid #1E1B16 !important;
  box-shadow: 4px 4px 0 #1E1B16 !important;
}
html[data-look="road"] .dsp .driver-card { border: 2px solid #1E1B16 !important; border-right: 6px solid #FC8D1A !important; box-shadow: 2px 2px 0 #1E1B16; }
html[data-look="road"] .dsp :is(input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select) {
  border: 2px solid #1E1B16 !important;
  border-radius: 10px !important;
  background: #FFFDF8 !important;
}
html[data-look="road"] .dsp :is(.btn, .btn-quiet, .chip, .del-driver) { border: 2px solid #1E1B16 !important; box-shadow: 2px 2px 0 #1E1B16; }
html[data-look="road"] .dsp .btn-primary { border: 2px solid #1E1B16 !important; box-shadow: 3px 3px 0 #1E1B16 !important; }
html[data-look="road"] .dsp .step-num { color: #1E1B16 !important; background: #FFE3A8; border-color: #1E1B16 !important; }
html[data-look="road"] .dsp .doc-head { border-bottom-color: #1E1B16 !important; }

/* ── 7. less motion ───────────────────────────────────────────────────── */
/* ── 6. motion ── the road look's own animations. All of it sits behind
   prefers-reduced-motion: no-preference, so devices set to "reduce motion"
   get none of it. Entrances use the separate translate / scale properties, so
   they add to (never replace) the transforms that centre a dialog. */
@media (prefers-reduced-motion: no-preference) {
  /* dialogs and sheets drop in, and their hard shadow lands with them */
  html[data-look="road"] :is([role="dialog"]:not([class*="verlay"]):not([class*="backdrop"]):not([class*="Backdrop"]), [role="alertdialog"], [class*="BrandModal_dialog__"], [class*="BrandModal_card__"]) {
    animation: rt-road-drop 220ms cubic-bezier(.2, .9, .3, 1.2) both;
  }
  /* menus and popups open with a quick pop */
  html[data-look="road"] :is(.rounds-popup, .insights-popup, [class*="AppShell_moreSheet__"], .leaflet-popup-content-wrapper) {
    animation: rt-road-pop 160ms ease-out both;
  }
  /* toasts slide up from the bottom edge */
  html[data-look="road"] :is(.rt-dx-toast, .pickup-action-toast, [role="status"][class*="toast"], [class*="Toast_toast__"]) {
    animation: rt-road-rise 240ms cubic-bezier(.2, .9, .3, 1.2) both;
  }
  /* the road moves: progress stripes roll forward on the driver page */
  html[data-look="road"] :is(.progress-bar-fill, [class*="DeliveryRouteOverview_progressFill__"]) {
    animation: rt-road-lane 1.2s linear infinite;
  }
  /* ticking a product off stamps its green check */
  html[data-look="road"] :is(.picker-item.item-complete .item-image, .summary-item-complete .summary-item-image)::after {
    animation: rt-road-stamp 260ms cubic-bezier(.2, .9, .3, 1.4) both;
  }
  /* the next-stop sign settles in when the page opens */
  html[data-look="road"] :is(.delivery-progress-bar > button, [class*="DeliveryRouteOverview_nextStop__"]) {
    animation: rt-road-drop 320ms 120ms cubic-bezier(.2, .9, .3, 1.2) both;
  }
}
@keyframes rt-road-drop { from { opacity: 0; translate: 0 10px; scale: 0.97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rt-road-pop { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }
@keyframes rt-road-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes rt-road-lane { to { background-position: 25.46px 0; } }
@keyframes rt-road-stamp { 0% { scale: 0; } 70% { scale: 1.2; } 100% { scale: 1; } }

/* the little "still collecting" dot on the driver page */
@keyframes rt-road-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* For people who ask their device for less motion: no lifting on hover and
   no sliding — pressed things still show the pressed shadow change. */
@media (prefers-reduced-motion: reduce) {
  /* :not(#rt-still) only raises priority so this beats the hover rules above */
  html[data-look="road"] :is(
    [data-rt-button], .rt-btn--primary, .rt-btn--tonal, .rt-btn--ghost, .rt-btn--commit,
    .btn-primary, .btn-secondary, .btn-success, .btn-fulfill, .btn-copy, .btn-refresh,
    .brand-btn, .rt-cta, .rt-cta-press, .sh-cta-press, .manual-btn-primary, .manual-btn-ghost,
    .opb-primary, .opb-ghost, .sidebar-control, .rtblog-card, .rt-chip,
    .page:has(> section.triggers) :is(.cta-primary, .cta-secondary)
  ):not(#rt-still) {
    transition: none !important;
  }
  html[data-look="road"] :is(
    [data-rt-button], .rt-btn--primary, .rt-btn--tonal, .rt-btn--ghost, .rt-btn--commit,
    .btn-primary, .btn-secondary, .btn-success, .btn-fulfill, .btn-copy, .btn-refresh,
    .brand-btn, .rt-cta, .rt-cta-press, .sh-cta-press, .manual-btn-primary, .manual-btn-ghost,
    .opb-primary, .opb-ghost, .sidebar-control, .rtblog-card, .rt-chip,
    .page:has(> section.triggers) :is(.cta-primary, .cta-secondary)
  ):is(:hover, :active, .is-on):not(#rt-still) {
    transform: none !important;
  }
  html[data-look="road"] .picker-container .order-pending-text::before { animation: none !important; opacity: 1; }
}