/* BOT Mobile Workspace v2
   Shared installed-app shell for every performer role. Role classes compose
   the allowed maps, queues and operations without falling back to an older UI.
   Business actions remain in performer-v4.js. */

/* Authentication workspace -------------------------------------------------
   The login is intentionally part of the same design language as the field
   app. It remains usable with the iOS keyboard open and explains failures in
   plain language instead of exposing API messages. */
.ops-auth.performer-auth {
  inset: var(--auth-viewport-top,0) 0 auto;
  width: 100%;
  height: var(--auth-viewport-height,100dvh);
  padding: 22px;
  overflow: auto;
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb,var(--ops-yellow) 30%,transparent) 0, transparent 31%),
    radial-gradient(circle at 86% 88%, color-mix(in srgb,var(--ops-cyan) 17%,transparent) 0, transparent 34%),
    color-mix(in srgb,var(--ops-bg) 92%,#15202a);
}
.performer-auth-shell {
  width: min(940px,100%); min-height: min(610px,calc(100dvh - 44px));
  display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr);
  overflow: hidden; border: 1px solid color-mix(in srgb,var(--ops-line) 82%,transparent);
  border-radius: 30px; background: var(--ops-surface); box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.performer-auth-intro {
  position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 38px; overflow: hidden; background:
    linear-gradient(145deg,rgba(255,215,0,.98),rgba(247,192,0,.96)); color: #171b1f;
}
.performer-auth-intro::before,
.performer-auth-intro::after { content:""; position: absolute; border: 1px solid rgba(23,27,31,.13); border-radius: 50%; }
.performer-auth-intro::before { width: 360px; height: 360px; right: -170px; top: 66px; }
.performer-auth-intro::after { width: 210px; height: 210px; right: -54px; top: 142px; }
.performer-auth-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.performer-auth-logo > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #171b1f; color: #ffd400; font-size: 17px; font-weight: 950; }
.performer-auth-logo small { max-width: 130px; font-size: 11px; font-weight: 820; line-height: 1.3; }
.performer-auth-intro-copy { position: relative; z-index: 1; max-width: 470px; }
.performer-auth-intro-copy .ops-kicker { color: rgba(23,27,31,.62); }
.performer-auth-intro-copy h1 { max-width: 430px; margin: 10px 0 16px; font-size: clamp(38px,5vw,62px); line-height: .98; letter-spacing: -.055em; }
.performer-auth-intro-copy p { max-width: 430px; margin: 0; color: rgba(23,27,31,.7); font-size: 15px; line-height: 1.5; }
.performer-auth-benefits { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.performer-auth-benefits span { min-width: 0; display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(23,27,31,.12); border-radius: 14px; background: rgba(255,255,255,.28); font-size: 9px; font-weight: 760; line-height: 1.35; }
.performer-auth-benefits b { font-size: 10px; letter-spacing: .08em; }
.ops-auth-card.performer-auth-card {
  width: 100%; max-height: none; display: flex; flex-direction: column; justify-content: center; gap: 15px;
  padding: clamp(28px,5vw,50px); overflow: auto; border: 0; border-radius: 0; box-shadow: none;
}
.performer-auth-head { display: flex; align-items: center; gap: 13px; }
.performer-auth-head .performer-mark { flex: 0 0 auto; }
.performer-auth-head > div:last-child { display: grid; gap: 4px; }
.performer-auth-head h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.performer-auth-head .ops-kicker { color: var(--ops-cyan); font-size: 9px; }
.performer-auth-lead { margin: 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
.performer-auth-connectivity { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 11px; background: color-mix(in srgb,var(--ops-green) 9%,var(--ops-surface-2)); color: var(--ops-green); font-size: 10px; font-weight: 800; }
.performer-auth-connectivity i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb,currentColor 14%,transparent); }
.performer-auth-connectivity[data-state="checking"] { color: var(--ops-amber); }
.performer-auth-connectivity[data-state="checking"] i { animation: auth-connectivity-pulse 1s ease-in-out infinite alternate; }
.performer-auth-connectivity[data-state="offline"] { background: color-mix(in srgb,var(--ops-red) 9%,var(--ops-surface-2)); color: var(--ops-red); }
.performer-login-form { gap: 12px; }
.performer-auth-field { gap: 7px; }
.performer-auth-field > span:first-child { color: var(--ops-muted); font-size: 10px; font-weight: 830; }
.performer-auth-field .ops-input { min-height: 54px; padding-inline: 15px; border-radius: 14px; background: var(--ops-surface-2); font-size: 16px; }
.performer-auth-field .ops-input:focus { border-color: var(--ops-yellow); box-shadow: 0 0 0 4px color-mix(in srgb,var(--ops-yellow) 18%,transparent); }
.performer-password-control { position: relative; display: block; }
.performer-password-control .ops-input { width: 100%; padding-right: 88px; }
.performer-password-control button { position: absolute; top: 6px; right: 6px; bottom: 6px; min-width: 72px; padding: 0 10px; border: 0; border-radius: 10px; background: color-mix(in srgb,var(--ops-text) 7%,var(--ops-surface-3)); color: var(--ops-muted); font-size: 9px; font-weight: 850; }
.performer-auth-card .auth-note { min-height: 0; padding: 0 2px; color: var(--ops-muted); font-size: 11px; line-height: 1.4; }
.performer-auth-card .auth-note:empty { display: none; }
.performer-auth-card .auth-note[data-type="error"] { display: block; padding: 10px 11px; border: 1px solid color-mix(in srgb,var(--ops-red) 35%,var(--ops-line)); border-radius: 11px; background: color-mix(in srgb,var(--ops-red) 8%,var(--ops-surface)); color: var(--ops-red); }
.performer-auth-card .auth-note[data-type="checking"] { display: block; color: var(--ops-amber); }
.performer-auth-submit { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; border-color: var(--ops-yellow); background: var(--ops-yellow); color: var(--ops-yellow-ink); font-size: 14px; }
.performer-auth-submit i { font-size: 18px; font-style: normal; }
.performer-auth-session-note { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 9px; color: var(--ops-muted); font-size: 9px; line-height: 1.45; }
.performer-auth-session-note i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb,var(--ops-green) 11%,var(--ops-surface-2)); color: var(--ops-green); font-style: normal; font-weight: 900; }
.performer-auth-help { border-top: 1px solid var(--ops-line-soft); padding-top: 12px; color: var(--ops-muted); font-size: 10px; }
.performer-auth-help summary { cursor: pointer; color: var(--ops-text); font-size: 10px; font-weight: 820; }
.performer-auth-help ol { margin: 10px 0 0; padding-left: 18px; line-height: 1.55; }
.performer-auth-card .install-help-link { align-self: flex-start; color: var(--ops-cyan); font-size: 10px; font-weight: 820; }
@keyframes auth-connectivity-pulse { to { opacity: .35; transform: scale(.78); } }

@media (max-width: 720px) {
  .ops-auth.performer-auth { padding: 0; align-items: stretch; overflow-y: auto; background: var(--ops-surface); }
  .performer-auth-shell { min-height: var(--auth-viewport-height,100dvh); display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
  .performer-auth-intro {
    min-height: calc(82px + env(safe-area-inset-top)); max-height: calc(82px + env(safe-area-inset-top));
    flex: 0 0 auto; justify-content: center; padding: env(safe-area-inset-top) 20px 0;
  }
  .performer-auth-intro::before { width: 190px; height: 190px; right: -92px; top: -45px; }
  .performer-auth-intro::after { width: 105px; height: 105px; right: 4px; top: 20px; }
  .performer-auth-logo > span { width: 45px; height: 45px; border-radius: 13px; font-size: 14px; }
  .performer-auth-logo small { max-width: none; font-size: 11px; }
  .performer-auth-intro-copy { display: none; }
  .performer-auth-benefits { display: none; }
  .ops-auth-card.performer-auth-card { flex: 1 0 auto; justify-content: flex-start; gap: 13px; margin-top: -10px; padding: 25px 20px max(24px,env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--ops-surface); }
  .performer-auth-head .performer-mark { display: none; }
  .performer-auth-head h2 { font-size: 25px; }
  .performer-auth-connectivity { min-height: 32px; }
  .performer-auth-field .ops-input { min-height: 52px; }
  .performer-auth-submit { min-height: 54px; }
}

@media (max-width: 720px) {
  .performer-auth.keyboard-open { overscroll-behavior: contain; }
  .performer-auth.keyboard-open .performer-auth-shell { min-height: 100%; }
  .performer-auth.keyboard-open .performer-auth-intro { display: none; }
  .performer-auth.keyboard-open .ops-auth-card.performer-auth-card {
    min-height: 100%; justify-content: center; gap: 8px; margin: 0;
    padding: max(8px,env(safe-area-inset-top)) 18px max(8px,env(safe-area-inset-bottom));
    overflow-y: auto; border-radius: 0;
  }
  .performer-auth.keyboard-open .performer-auth-head h2 { font-size: 21px; }
  .performer-auth.keyboard-open .performer-auth-head .ops-kicker { display: none; }
  .performer-auth.keyboard-open .performer-auth-lead,
  .performer-auth.keyboard-open .performer-auth-connectivity,
  .performer-auth.keyboard-open .performer-auth-session-note,
  .performer-auth.keyboard-open .performer-auth-help,
  .performer-auth.keyboard-open .install-help-link { display: none; }
  .performer-auth.keyboard-open .performer-login-form { gap: 7px; }
  .performer-auth.keyboard-open .performer-auth-field { gap: 4px; }
  .performer-auth.keyboard-open .performer-auth-field .ops-input { min-height: 46px; }
  .performer-auth.keyboard-open .performer-password-control button { top: 4px; right: 4px; bottom: 4px; }
  .performer-auth.keyboard-open .performer-auth-submit { min-height: 46px; }
  .performer-auth.keyboard-open .auth-note[data-type="error"] { padding: 7px 9px; font-size: 10px; }
}

@media (max-width: 720px) and (max-height: 650px) {
  .performer-auth-intro { min-height: calc(70px + env(safe-area-inset-top)); max-height: calc(70px + env(safe-area-inset-top)); }
  .ops-auth-card.performer-auth-card { gap: 9px; padding-top: 19px; }
  .performer-auth-session-note,
  .performer-auth-help { display: none; }
}

.route-map-toolbar { display: none; }
.route-search-flow { display: grid; gap: 12px; }
.route-search-flow > small { color: var(--ops-muted); font-size: 11px; line-height: 1.45; }
.route-search-results { display: grid; gap: 7px; max-height: min(58dvh, 520px); overflow: auto; }
.route-search-results > button {
  min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--ops-line-soft);
  border-radius: 14px; background: var(--ops-surface-2); color: var(--ops-text); text-align: left;
}
.route-search-results > button > span { min-width: 0; display: grid; gap: 3px; }
.route-search-results b { font-size: 15px; }
.route-search-results small,
.route-search-results em { overflow: hidden; color: var(--ops-muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.route-search-results strong { min-width: 34px; min-height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(34,160,107,.12); color: var(--ops-green); font-size: 10px; }
.route-search-results strong.warning { background: rgba(230,167,0,.13); color: var(--ops-amber); }
.route-search-results strong.danger,
.route-search-results strong.critical { background: rgba(228,72,85,.12); color: var(--ops-red); }
.route-search-results .ops-icon { width: 18px; height: 18px; color: var(--ops-muted); }

.b2b-cargo-banner {
  width: 100%; min-width: 0; min-height: 76px; display: grid;
  grid-template-columns: 48px minmax(0,1fr) 20px; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--ops-cyan) 30%,var(--ops-line));
  border-radius: 18px; background: color-mix(in srgb,var(--ops-cyan) 7%,var(--ops-surface));
  color: var(--ops-text); text-align: left;
}
.b2b-cargo-symbol { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: color-mix(in srgb,var(--ops-cyan) 14%,var(--ops-surface)); color: var(--ops-cyan); }
.b2b-cargo-symbol .ops-icon { width: 25px; height: 25px; }
.b2b-cargo-banner > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.b2b-cargo-banner b { font-size: 16px; }
.b2b-cargo-banner small { overflow: hidden; color: var(--ops-muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.b2b-cargo-banner > .ops-icon { width: 19px; height: 19px; color: var(--ops-muted); }
.b2b-cargo-back { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 8px; padding: 0; border: 0; background: transparent; color: var(--ops-muted); font-size: 12px; font-weight: 750; }
.b2b-cargo-back .ops-icon { width: 18px; height: 18px; }
.b2b-cargo-help { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 11px; padding: 13px; border-radius: 15px; background: color-mix(in srgb,var(--ops-cyan) 8%,var(--ops-surface-2)); }
.b2b-cargo-help > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--ops-surface); color: var(--ops-cyan); }
.b2b-cargo-help .ops-icon { width: 22px; height: 22px; }
.b2b-cargo-help > div { min-width: 0; display: grid; gap: 3px; }
.b2b-cargo-help b { font-size: 13px; }
.b2b-cargo-help small { color: var(--ops-muted); font-size: 10px; line-height: 1.4; }

@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface.route-zone-workspace {
    --mobile-panel: color-mix(in srgb,var(--ops-surface) 97%,transparent);
    --mobile-canvas: color-mix(in srgb,var(--ops-bg-2) 76%,var(--ops-surface));
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-app {
    grid-template-rows: calc(78px + env(safe-area-inset-top)) minmax(0,1fr) calc(76px + env(safe-area-inset-bottom));
    background: var(--ops-bg-2);
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-topbar {
    min-height: 78px; padding: env(safe-area-inset-top) 14px 0; gap: 9px;
    border-bottom: 1px solid var(--ops-line-soft); background: var(--mobile-panel);
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-avatar {
    width: 40px; height: 40px; display: grid; border: 0; border-radius: 12px;
    background: var(--ops-yellow); color: var(--ops-yellow-ink); font-size: 12px;
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-identity { min-width: 0; gap: 10px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-copy { min-width: 0; gap: 3px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-copy b { max-width: min(43vw,180px); font-size: 15px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-copy small { max-width: min(45vw,190px); font-size: 10px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-live-cluster { min-width: 0; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-live-cluster .ops-status {
    max-width: 39vw; min-height: 38px; padding: 0 9px; border: 0; border-radius: 12px;
    overflow: hidden; background: color-mix(in srgb,var(--ops-green) 11%,var(--ops-surface));
    color: var(--ops-green); font-size: 9px; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-live-cluster .ops-status.amber {
    background: color-mix(in srgb,var(--ops-amber) 11%,var(--ops-surface)); color: var(--ops-amber);
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace #worker-refresh,
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-gps { display: none; }

  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-route[data-route-panel="work"] .task-rail { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .work-layout { display: block; padding: 0; background: var(--ops-bg-2); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .work-map-shell { inset: 0; border: 0; border-radius: 0; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-toolbar {
    position: absolute; z-index: 18; top: 12px; left: 12px; right: 72px;
    display: grid; gap: 8px; pointer-events: none;
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-toolbar[hidden] { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-search {
    min-width: 0; min-height: 45px; display: flex; align-items: center; gap: 9px; padding: 0 13px;
    border: 1px solid rgba(30,40,48,.12); border-radius: 13px; background: rgba(255,255,255,.96);
    color: #6b747b; box-shadow: 0 8px 22px rgba(31,42,51,.14); text-align: left; pointer-events: auto;
  }
  html[data-theme="dark"][data-design="next"] body.performer-surface.route-zone-workspace .route-map-search { background: rgba(17,26,38,.96); color: var(--ops-muted); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-search .ops-icon { width: 19px; height: 19px; flex: 0 0 auto; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 3px; scrollbar-width: none; pointer-events: auto; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-chips::-webkit-scrollbar { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-chips button {
    min-height: 35px; flex: 0 0 auto; padding: 0 11px; border: 1px solid rgba(30,40,48,.1);
    border-radius: 999px; background: rgba(255,255,255,.94); color: #636c73;
    box-shadow: 0 5px 14px rgba(31,42,51,.1); font-size: 10px; font-weight: 760;
  }
  html[data-theme="dark"][data-design="next"] body.performer-surface.route-zone-workspace .route-map-chips button { background: rgba(17,26,38,.95); color: var(--ops-muted); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-chips button.active {
    border-color: var(--ops-yellow); background: var(--ops-yellow); color: var(--ops-yellow-ink); box-shadow: 0 6px 16px rgba(225,185,0,.2);
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-chips b { font: inherit; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .map-fleet-summary { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .map-controls { top: 12px; right: 12px; bottom: auto; gap: 8px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .map-controls .ops-icon-btn { width: 48px; min-height: 48px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .work-layout.zone-console-open .map-controls { top: 12px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace #map-qr-scan,
  html[data-design="next"] body.performer-surface.route-zone-workspace #map-bike-search { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace #map-settings { width: 48px; min-height: 48px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-zone-console { bottom: 12px; left: 12px; right: 12px; width: auto; max-height: min(52dvh,430px); border-radius: 22px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-zone-console.claimed { right: 74px; width: auto; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-zone-compact {
    min-height: 72px; grid-template-columns: 7px minmax(0,1fr) 40px; padding: 10px 12px;
    border-color: rgba(30,40,48,.12); border-radius: 18px; background: var(--mobile-panel);
    box-shadow: 0 12px 30px rgba(31,42,51,.17);
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-zone-compact b { font-size: 14px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-zone-compact small,
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-zone-compact em { font-size: 9px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .mission-inspector {
    left: 10px; right: 10px; bottom: 10px; max-height: min(50dvh,440px); padding: 16px;
    border: 1px solid var(--ops-line-soft); border-radius: 22px; background: var(--mobile-panel);
    box-shadow: 0 -14px 42px rgba(31,42,51,.2);
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .mission-inspector::before { background: color-mix(in srgb,var(--ops-muted) 55%,transparent); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .mission-card h2 { font-size: 23px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .mission-card p { color: var(--ops-muted); line-height: 1.45; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .mission-actions .ops-btn.primary { border-color: var(--ops-yellow); background: var(--ops-yellow); color: var(--ops-yellow-ink); }

  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-route[data-route-panel="inwork"] { background: var(--ops-bg-2); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-route[data-route-panel="inwork"] .performer-page-head {
    width: calc(100% - 28px); max-width: 640px; padding: 22px 0 14px;
  }
  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-route[data-route-panel="inwork"] .performer-page-head .ops-kicker { display: block; color: var(--ops-cyan); font-size: 9px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-route[data-route-panel="inwork"] .performer-page-head h1 { margin-top: 5px; font-size: 34px; line-height: 1; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-route[data-route-panel="inwork"] .performer-page-head p { display: block; max-width: none; margin-top: 8px; font-size: 12px; line-height: 1.45; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .performer-route[data-route-panel="inwork"] .inwork-layout { width: calc(100% - 24px); max-width: 640px; gap: 12px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .inwork-summary { border-color: var(--ops-line-soft); border-radius: 18px; background: var(--ops-surface); box-shadow: 0 7px 20px rgba(31,42,51,.06); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .inwork-summary > div { min-height: 74px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .inwork-summary b { font-size: 25px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-toolbar { gap: 9px; padding: 11px; border-color: var(--ops-line-soft); border-radius: 18px; background: var(--ops-surface); box-shadow: 0 7px 20px rgba(31,42,51,.05); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-toolbar > div:first-child { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-toolbar > small { padding: 0 4px; font-size: 9px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-filters button { min-height: 38px; background: var(--ops-surface-2); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-filters button.active { background: var(--ops-yellow); color: var(--ops-yellow-ink); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-banner { box-shadow: 0 7px 20px rgba(31,42,51,.06); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-address-groups { gap: 12px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-address-group { gap: 10px; padding: 12px; border-color: var(--ops-line-soft); border-radius: 20px; background: color-mix(in srgb,var(--ops-surface) 76%,var(--ops-bg-2)); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-address-group > header { padding: 2px 3px 4px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-address-group h2 { font-size: 17px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-address-group .inwork-task-stack { gap: 9px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-card { padding: 14px; border-color: var(--ops-line-soft); border-radius: 17px; background: var(--ops-surface); box-shadow: 0 5px 16px rgba(31,42,51,.06); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-card h2 { margin-top: 8px; font-size: 22px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-card .inwork-card-meta span { min-height: 27px; font-size: 10px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-problem { padding: 10px; background: var(--ops-surface-2); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-sla { padding: 9px 10px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-card .inwork-card-actions { grid-template-columns: minmax(0,1fr); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-task-card .inwork-card-actions .ops-btn.primary { border-color: var(--ops-yellow); background: var(--ops-yellow); color: var(--ops-yellow-ink); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-panel { margin: 0; padding: 16px; border-radius: 22px; background: var(--ops-surface); box-shadow: 0 8px 24px rgba(31,42,51,.07); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-panel h2 { font-size: 28px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-list { gap: 8px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-list label { min-height: 64px; padding: 11px 12px; border-color: var(--ops-line-soft); background: var(--ops-surface-2); }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-list b { font-size: 15px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-panel footer .ops-btn.primary { min-height: 54px; border-color: var(--ops-yellow); background: var(--ops-yellow); color: var(--ops-yellow-ink); font-size: 12px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-cargo-panel footer .ops-icon { width: 18px; height: 18px; }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-card {
    gap: 10px; margin-bottom: 0; padding: 12px; border-radius: 18px;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-head {
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-head h2,
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-head p { display: none; }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-head .ops-btn {
    width: auto; min-height: 34px; padding: 0 11px; font-size: 9px;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-kpis {
    grid-template-columns: repeat(4,minmax(0,1fr)); border-radius: 14px;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-kpis span {
    min-width: 0; gap: 1px; padding: 9px 4px; border-right: 1px solid var(--ops-line-soft); border-bottom: 0;
    text-align: center;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-kpis span:nth-child(2) { border-right: 1px solid var(--ops-line-soft); }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-kpis b { font-size: 19px; }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-kpis small {
    overflow: hidden; font-size: 7px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-next-card {
    min-height: 66px; gap: 9px; padding: 10px 11px; border-radius: 14px;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-next-card span { min-width: 0; gap: 2px; }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-next-card small { font-size: 8px; }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-next-card b { font-size: 17px; }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-next-card em {
    overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-next-card strong {
    min-width: 38px; height: 38px; border-radius: 12px; font-size: 15px;
  }
  html[data-design="next"] body.performer-surface.mobile-repair-workspace .repair-workspace-card + .inwork-summary { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace.cargo-workspace-open .performer-route[data-route-panel="inwork"] .performer-page-head { display: none; }
  html[data-design="next"] body.performer-surface.route-zone-workspace.cargo-workspace-open .inwork-layout { padding-top: 14px; padding-bottom: 10px; }
}

@media (max-width: 380px) {
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-toolbar { right: 66px; left: 8px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .map-controls { right: 8px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .route-map-chips button { padding-inline: 9px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-copy b { max-width: 36vw; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-copy small { max-width: 38vw; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .worker-live-cluster .ops-status { max-width: 37vw; padding-inline: 7px; }
  html[data-design="next"] body.performer-surface.route-zone-workspace .b2b-zone-console.claimed { right: 66px; }
}

/* Profile owns two rows on mobile: scrollable content + the fixed app nav.
   Keep this after the universal three-row shell, otherwise the hidden topbar
   leaves the nav in the flexible middle row and makes the profile look empty. */
@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-app {
    grid-template-rows: minmax(0,1fr) calc(76px + env(safe-area-inset-bottom));
  }
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-topbar { display: none; }
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-route[data-route-panel="profile"] {
    grid-row: 1; min-height: 0; display: block; overflow-y: auto;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-nav { grid-row: 2; }
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .profile-layout {
    display: grid; grid-template-columns: minmax(0,1fr); align-content: start;
  }
}

/* Universal performer shell ------------------------------------------------
   The previous mobile composition was accidentally scoped to the two
   route-zone roles.  Every performer now receives the same installed-app
   frame; role classes still decide which data and actions are available. */
@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface.performer-next-shell {
    --mobile-panel: color-mix(in srgb,var(--ops-surface) 97%,transparent);
    -webkit-text-size-adjust: 100%;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .performer-app {
    grid-template-rows: calc(78px + env(safe-area-inset-top)) minmax(0,1fr) calc(76px + env(safe-area-inset-bottom));
    background: var(--ops-bg-2);
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .performer-topbar {
    min-height: 78px; padding: env(safe-area-inset-top) 14px 0; gap: 9px;
    border-bottom: 1px solid var(--ops-line-soft); background: var(--mobile-panel);
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-identity { min-width: 0; gap: 10px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-avatar {
    width: 40px; height: 40px; display: grid !important; flex: 0 0 auto;
    border: 0; border-radius: 12px; background: var(--ops-yellow);
    color: var(--ops-yellow-ink); font-size: 12px; font-weight: 950;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-copy { min-width: 0; gap: 3px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-copy b { max-width: min(43vw,180px); font-size: 15px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-copy small { max-width: min(45vw,190px); font-size: 10px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-live-cluster { min-width: 0; }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-live-cluster .ops-status {
    max-width: 39vw; min-height: 38px; padding: 0 9px; border: 0; border-radius: 12px;
    overflow: hidden; background: color-mix(in srgb,var(--ops-green) 11%,var(--ops-surface));
    color: var(--ops-green); font-size: 9px; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-live-cluster .ops-status.amber {
    background: color-mix(in srgb,var(--ops-amber) 11%,var(--ops-surface)); color: var(--ops-amber);
  }
  html[data-design="next"] body.performer-surface.performer-next-shell #worker-refresh,
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-gps { display: none; }

  /* One map-first mobile workspace for scouts, drivers, energizers, security
     and mechanics.  Role classes still control the data, filters and actions;
     the visual frame no longer falls back to the old slide-up task rail. */
  html[data-design="next"] body.performer-surface.field-app-workspace .performer-route[data-route-panel="work"] .task-rail { display: none; }
  html[data-design="next"] body.performer-surface.field-app-workspace .work-layout {
    display: block; padding: 0; background: var(--ops-bg-2);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .work-map-shell {
    inset: 0; border: 0; border-radius: 0;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-status-strip,
  html[data-design="next"] body.performer-surface.field-app-workspace .map-fleet-summary { display: none; }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-toolbar {
    position: absolute; z-index: 18; top: 12px; right: 72px; left: 12px;
    display: grid; gap: 8px; pointer-events: none;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-toolbar[hidden] { display: none; }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-search {
    min-width: 0; min-height: 45px; display: flex; align-items: center; gap: 9px; padding: 0 13px;
    border: 1px solid rgba(30,40,48,.12); border-radius: 13px; background: rgba(255,255,255,.96);
    color: #6b747b; box-shadow: 0 8px 22px rgba(31,42,51,.14); text-align: left; pointer-events: auto;
  }
  html[data-theme="dark"][data-design="next"] body.performer-surface.field-app-workspace .route-map-search {
    background: rgba(17,26,38,.96); color: var(--ops-muted);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-search .ops-icon {
    width: 19px; height: 19px; flex: 0 0 auto;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-search span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-chips {
    display: flex; gap: 6px; overflow-x: auto; padding: 0 0 3px; scrollbar-width: none; pointer-events: auto;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-chips::-webkit-scrollbar { display: none; }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-chips button {
    min-height: 35px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 0 11px;
    border: 1px solid rgba(30,40,48,.1); border-radius: 999px; background: rgba(255,255,255,.94);
    color: #636c73; box-shadow: 0 5px 14px rgba(31,42,51,.1); font-size: 10px; font-weight: 760;
  }
  html[data-theme="dark"][data-design="next"] body.performer-surface.field-app-workspace .route-map-chips button {
    background: rgba(17,26,38,.95); color: var(--ops-muted);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-chips button.active {
    border-color: var(--ops-yellow); background: var(--ops-yellow); color: var(--ops-yellow-ink);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-chips .ops-icon { width: 14px; height: 14px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-controls {
    top: 12px; right: 12px; bottom: auto; gap: 8px;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-controls .ops-icon-btn {
    width: 48px; min-height: 48px; border-radius: 15px;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace #map-bike-search { display: none; }
  html[data-design="next"] body.performer-surface.field-app-workspace .mission-inspector {
    left: 10px; right: 10px; bottom: 10px; max-height: min(50dvh,440px); padding: 16px;
    border: 1px solid var(--ops-line-soft); border-radius: 22px; background: var(--mobile-panel);
    box-shadow: 0 -14px 42px rgba(31,42,51,.2);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .mission-inspector::before {
    background: color-mix(in srgb,var(--ops-muted) 55%,transparent);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .mission-card h2 { font-size: 23px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .mission-card p {
    color: var(--ops-muted); line-height: 1.45;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .mission-actions .ops-btn.primary {
    border-color: var(--ops-yellow); background: var(--ops-yellow); color: var(--ops-yellow-ink);
  }

  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate {
    align-items: end; justify-items: center; padding: 12px;
    background: linear-gradient(180deg,transparent 14%,color-mix(in srgb,var(--ops-bg) 76%,transparent) 72%);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-card {
    position: relative; width: min(100%,520px); display: grid;
    grid-template-columns: 46px minmax(0,1fr); justify-items: stretch; align-items: center; gap: 7px 12px;
    padding: 23px 16px 16px; border-color: var(--ops-line-soft); border-radius: 22px;
    background: var(--mobile-panel); box-shadow: 0 -14px 42px rgba(31,42,51,.2); text-align: left;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-card::before {
    content:""; position:absolute; top:8px; left:50%; width:38px; height:4px;
    transform:translateX(-50%); border-radius:999px; background:color-mix(in srgb,var(--ops-muted) 48%,transparent);
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-mark {
    width:46px; height:46px; border-radius:14px;
  }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-mark .ops-icon { width:23px; height:23px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-copy { min-width:0; display:grid; gap:3px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-copy .ops-kicker { color:var(--ops-cyan); font-size:8px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-copy h2 { font-size:20px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-copy p { max-width:none; font-size:10px; line-height:1.42; }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-work-gate-card > .ops-btn {
    grid-column:1/-1; min-height:50px; margin-top:4px; border-color:var(--ops-yellow);
    background:var(--ops-yellow); color:var(--ops-yellow-ink); font-size:13px;
  }
}

@media (max-width: 380px) {
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-copy b { max-width: 36vw; }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-copy small { max-width: 38vw; }
  html[data-design="next"] body.performer-surface.performer-next-shell .worker-live-cluster .ops-status { max-width: 37vw; padding-inline: 7px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .route-map-toolbar { right: 66px; left: 8px; }
  html[data-design="next"] body.performer-surface.field-app-workspace .map-controls { right: 8px; }
}

/* Final route override: this must follow the universal shell above. */
@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-app {
    grid-template-rows: minmax(0,1fr) calc(76px + env(safe-area-inset-bottom));
  }
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-topbar { display: none; }
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-route[data-route-panel="profile"] {
    grid-row: 1; min-height: 0; display: block; overflow-y: auto;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell[data-performer-route="profile"] .performer-nav { grid-row: 2; }

  /* Compact installed-app rhythm: keep useful labels visible without the
     oversized web-page typography that crowded the iPhone layout. */
  html[data-design="next"] body.performer-surface.performer-next-shell .performer-nav button {
    min-width: 0; gap: 3px; padding: 5px 2px 4px; font-size: 8.5px; line-height: 1.08;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .performer-nav button > span:last-child {
    min-height: 18px; display: grid; place-items: center; white-space: normal;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .performer-nav .nav-icon {
    width: 20px; height: 20px;
  }
  html[data-design="next"] body.performer-surface.performer-next-shell .performer-page-head h1 { font-size: 29px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .performer-page-head p { font-size: 11px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .profile-next-avatar { width: 90px; height: 90px; font-size: 35px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .profile-next-hero h2 { font-size: 23px; }
  html[data-design="next"] body.performer-surface.performer-next-shell .profile-next-hero > p { font-size: 12px; }
}