:root {
  --bg: #0e1216;
  --panel: #161c22;
  --panel2: #1c242c;
  --border: #2a333d;
  --text: #e9edf1;
  --muted: #98a4b0;
  --yellow: #ffd400;
  --red: #ee2222;
  --green-edge: #b9f6ca;
  --green-accent: #69f0ae;
  --green-bg: #0d2b1a;
  --header-h: 104px;
  --sbw: 300px;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  overflow: hidden; /* app-style: frames scroll individually */
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
[hidden] {
  display: none !important;
}
button {
  font-family: inherit;
}

/* ============ TOP BANNER ============ */
.site-header {
  position: relative;
  flex: 0 0 var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  background: linear-gradient(180deg, #171944 0%, #0e1216 100%);
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #1aaeff 0%, rgba(26, 174, 255, 0) 100%) 0
    0 1 0;
  box-shadow: none;
  z-index: 1300;
}
/* The React banner fills its mount. */
body.react-header-swap #react-live-header {
  flex: 0 0 var(--header-h);
  min-height: var(--header-h);
  overflow: visible;
}
body.react-header-swap #react-live-header .site-header {
  height: 100%;
  min-height: var(--header-h);
}
/* The account dropdown must sit above the mobile "Menu" toggle (z-index 1504). .user-box is a grid item, so
     its own z-index forms the stacking context that traps the dropdown - raise that, not the dropdown. In the legacy
     header the toggle covered the dropdown's first row, which only went unnoticed because that
     row was the Admin link shown to everyone. Non-admins no longer get that row. */
body.react-header-swap #react-live-header .user-box {
  z-index: 1650;
}
.logo {
  font-weight: 800;
  font-size: 1.08rem;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text);
  padding: 0;
}
.logo small {
  color: var(--muted);
  font-weight: 600;
}
.logo-img {
  height: 90px;
  width: auto;
  display: block;
  object-fit: contain;
}
.logo-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.header-tagline {
  flex: 1;
  min-width: 0;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 18px;
  color: var(--text);
  text-align: center;
  font-size: clamp(0.7rem, 1.05vw, 0.9rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.header-tagline strong {
  color: var(--yellow);
  font-weight: 900;
}
/* Members badge (styled like a button, not interactive): mobile only */
.members-btn {
  display: none;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.post-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.header-job-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}
.header-job-actions .btn {
  width: 100%;
  height: 38px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.post-trip-btn,
.post-freight-btn {
  color: #14181c !important;
}
.all-jobs-btn {
  background: var(--yellow) !important;
  color: var(--red) !important;
  border: 2px solid var(--yellow) !important;
  font-weight: 900;
}
.map-header-btn {
  background: var(--yellow) !important;
  color: #116b3a !important;
  border: 2px solid var(--yellow) !important;
  font-weight: 900;
}
.creator-links {
  position: absolute;
  z-index: 6;
  top: 7px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.creator-credit {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.creator-credit:hover {
  color: var(--yellow);
  text-decoration: underline;
}
.site-progress-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1.25;
}
.site-progress-note a {
  color: #c4ccd4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-progress-note a:hover {
  color: var(--yellow);
}
.desktop-progress-note {
  position: absolute;
  left: 16px;
  top: calc(100% + 2px);
  z-index: 1400;
  max-width: 360px;
  white-space: nowrap;
}
.mobile-progress-note {
  display: none;
}
.banner-auth {
  position: absolute;
  right: 16px;
  top: 8px;
  z-index: 1510;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 52px;
}
.banner-auth button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}
.banner-auth button:hover,
.banner-auth button:focus-visible {
  color: var(--yellow);
  text-decoration: underline;
}
.banner-auth :is(#userNameEl, .rx-userNameEl) {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  color: var(--yellow);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner-auth-signup[hidden] {
  display: none !important;
}
.account-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.desktop-action-menu {
  display: contents;
}
.desktop-action-menu-toggle {
  display: none;
}
.desktop-map-globe {
  display: none;
}
.desktop-brand-strip {
  display: contents;
}
.desktop-brand-side {
  display: none;
}

/* Desktop header: keep navigation and the larger logo inside one stable banner. */
@media (min-width: 769px) {
  :root {
    --header-h: 72px;
  }
  .site-header {
    gap: 6px;
    padding: 0 9px;
  }
  .logo-img {
    height: 64px;
  }
  .header-tagline {
    padding: 0 8px;
    font-size: 0.58rem;
    line-height: 1.1;
  }
  .site-header .header-right {
    padding-top: 0;
  }
  .header-job-actions {
    gap: 3px;
  }
  .header-job-actions .btn {
    height: 38px;
    min-height: 38px;
    padding: 7px 12px;
    font-size: 0.82rem;
  }
  .creator-links {
    top: 2px;
    right: 9px;
    gap: 2px;
  }
  .creator-credit {
    font-size: 0.48rem;
  }
  .desktop-progress-note {
    left: auto;
    right: 9px;
    top: calc(100% + 2px);
    bottom: auto;
    font-size: 0.46rem;
    text-align: right;
  }
  .site-header .user-name-display {
    min-height: 26px;
    padding: 0 5px;
  }
  .site-header .user-name {
    font-size: 0.92rem;
  }
  .site-header .account-menu-toggle {
    min-width: 92px;
    min-height: 34px;
    padding: 5px 10px;
    font-size: 0.78rem;
  }
  .site-header .user-menu-chevron {
    font-size: 0.62rem;
  }
  .site-header .messages-btn {
    font-size: 0.86rem;
  }
}

/* Account area: plain username, then themed menu and unread indicator. */
.user-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.25;
}
.user-name-display {
  display: flex;
  align-items: center;
  min-height: 26px;
  padding: 0 5px;
}
.user-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--yellow);
  white-space: nowrap;
}
.user-menu-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.account-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--yellow);
  border-radius: 8px;
  background: #11171d;
  color: var(--yellow);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}
.account-menu-toggle:hover,
.account-menu-toggle[aria-expanded="true"] {
  background: var(--yellow);
  color: #11171d;
}
.user-menu-chevron {
  display: inline-block;
  color: var(--yellow);
  font-size: 0.62rem;
  transition: transform 0.16s ease;
}
.account-menu-toggle[aria-expanded="true"] .user-menu-chevron {
  transform: rotate(180deg);
}
@keyframes unreadPulse {
  0%,
  45%,
  100% {
    box-shadow: 0 0 0 0 rgba(227, 32, 42, 0.15);
  }
  65% {
    box-shadow: 0 0 0 4px rgba(227, 32, 42, 0.28);
  }
}
.user-unread-badge {
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  place-items: center;
  border-radius: 8px;
  background: #e3202a;
  color: #fff;
  border: 1px solid #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  grid-auto-flow: column;
  gap: 4px;
  animation: unreadPulse 1.5s ease-in-out infinite;
  cursor: pointer;
}
.user-unread-badge::before {
  content: "✉";
  font-size: 0.68rem;
  line-height: 1;
}
.user-unread-badge:not([hidden]) {
  display: inline-grid;
}
.user-dropdown {
  position: absolute;
  left: 0;
  top: 66px;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--yellow);
  border-radius: 9px;
  background: #0b1015;
  opacity: 1;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.72);
  isolation: isolate;
  z-index: 1500;
}
.user-dropdown:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.user-dropdown [hidden] {
  display: none !important;
}
.user-dropdown .linkish,
.user-dropdown .messages-btn {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  width: 100%;
  height: auto;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 10px !important;
  justify-content: flex-start;
  gap: 7px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--text) !important;
  text-decoration: none;
  text-align: left;
  font-size: 0.8rem;
}
.user-dropdown .linkish:hover,
.user-dropdown .messages-btn:hover {
  background: #202830 !important;
  color: var(--yellow) !important;
}
.user-dropdown :is(#messageBadge, .rx-messageBadge) {
  position: static;
  margin-left: auto;
  border-color: #11171d;
}
.user-dropdown .message-menu-icon {
  font-size: 1.25em;
  line-height: 1;
  font-weight: 900;
}
.messages-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--yellow);
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  width: auto;
  display: flex;
  gap: 6px;
}
.messages-btn:hover {
  color: #ffe76a;
}
.message-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  border: 2px solid #10151a;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}
.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.logo-block {
  position: static;
  display: block;
}
.logged-in-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 5px;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000;
}
.current-user-name {
  font-size: 0.8rem !important;
  font-weight: bold;
  color: #28a745;
  white-space: nowrap;
}

.linkish:hover {
  color: var(--text);
}
@media (max-width: 768px) {
  .rx-routes {
    display: none !important;
  }
  /* React owns the live mobile posting surface; keep its four posting cards available. */
  #react-live-main .rx-routes {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }
  :is(#carouselNav, .rx-carouselNav) {
    display: none;
  }
}

/* Floating inventory: signed-in user's active jobs only. */
.inventory-tray {
  --inventory-card-width: clamp(
    58px,
    calc((min(100vw, var(--sbw)) - 40px) / 4),
    100px
  );
  --inventory-card-height: clamp(72px, calc(24vw - 10px), 98px);
  position: fixed;
  right: auto;
  bottom: 0;
  left: 0;
  z-index: 2300;
  display: block;
  width: min(100vw, var(--sbw));
  max-width: 100%;
  height: calc(var(--inventory-card-height) + 36px);
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition:
    transform 0.24s ease,
    opacity 0.18s ease;
}
.inventory-cards {
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 28px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: auto;
  max-width: none;
  height: var(--inventory-card-height);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  transition:
    transform 0.24s ease,
    opacity 0.18s ease;
}
.inventory-cards::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.inventory-heading {
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #11171d;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1;
  pointer-events: none;
}
.inventory-heading .hint-desktop {
  font-weight: 650;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.inventory-heading .hint-mobile {
  display: none;
  font-weight: 650;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.inventory-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 var(--inventory-card-width);
  width: var(--inventory-card-width);
  height: var(--inventory-card-height);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  scroll-snap-align: start;
  padding: 6px;
  border: 3px solid;
  border-radius: 10px;
  color: #11171d;
  text-align: left;
  cursor: grab;
  user-select: none;
  /* Custom pointer dragging owns the card gesture; the tray remains scrollable
     through its empty area when more cards are present. */
  touch-action: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.inventory-card:active {
  cursor: grabbing;
}
.inventory-card.freight,
.inventory-card.freight.last-day {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.82) 38%,
      rgba(255, 255, 255, 0.35) 62%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    url("assets/detail-art-freight.png") center/cover no-repeat;
  border-color: #268fd0;
}
.inventory-card.idle,
.inventory-card.idle.last-day {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.82) 38%,
      rgba(255, 255, 255, 0.35) 62%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    url("assets/detail-art-idle.png") center/cover no-repeat;
  border-color: #23a96e;
}
.inventory-card.driver,
.inventory-card.driver.last-day {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.82) 38%,
      rgba(255, 255, 255, 0.35) 62%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    url("assets/detail-art-driver.png") center/cover no-repeat;
  border-color: #d21f32;
}
.inventory-card.job,
.inventory-card.job.last-day {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.82) 38%,
      rgba(255, 255, 255, 0.35) 62%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    url("assets/detail-art-job.png") center/cover no-repeat;
  border-color: #e0b400;
}
.inventory-card-route {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 64%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.38;
}
.inventory-card-route-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inventory-card.freight .inventory-card-route-line {
  stroke: #268fd0;
}
.inventory-card.idle .inventory-card-route-line {
  stroke: #23a96e;
}
.inventory-card.driver .inventory-card-route-line {
  stroke: #d21f32;
}
.inventory-card.job .inventory-card-route-line {
  stroke: #e0b400;
}
.inventory-card-route-end {
  fill: #fff;
  stroke: #11171d;
  stroke-width: 1.5;
}
.inventory-card-head {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
}
.inventory-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  padding: 1px 4px;
  border-radius: 999px;
  font-size: 0.4rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow: hidden;
}
.inventory-card-ico {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}
.inventory-card-badge-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
}
.inventory-card.freight .inventory-card-badge {
  background: #268fd0;
  color: #fff;
}
.inventory-card.idle .inventory-card-badge {
  background: #23a96e;
  color: #fff;
}
.inventory-card.driver .inventory-card-badge {
  background: #d21f32;
  color: #fff;
}
.inventory-card.job .inventory-card-badge {
  background: #e6b400;
  color: #3a2c00;
}
.inventory-card-owner {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #41505c;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1.1;
}
.inventory-card-route-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-width: 0;
}
.inventory-card-place {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #11171d;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: left;
}
.inventory-card-place.to::before {
  content: "→ ";
  font-weight: 900;
}
.inventory-card-date {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #11171d;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: left;
  margin-top: 1px;
}
.inventory-drag-clone {
  position: fixed;
  z-index: 2600;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0.96;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75);
}
.inventory-overlay {
  position: fixed;
  inset: 0;
  z-index: 2250;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.inventory-drop-target {
  outline: 1px solid #ffd400 !important;
  outline-offset: 2px !important;
}
/* Drag affordance is classification-only: it never changes card size or layout. */
.inventory-drop-compatible {
  filter: none !important;
  opacity: 1 !important;
  animation: inventory-match-glow 3s ease-in-out infinite;
}
@keyframes inventory-match-glow {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px #ffd400,
      0 0 6px rgba(255, 212, 0, 0.18),
      0 4px 12px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px #ffd400,
      0 0 14px 3px rgba(255, 212, 0, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .inventory-drop-compatible {
    animation: none;
    box-shadow:
      inset 0 0 0 1px #ffd400,
      0 0 8px rgba(255, 212, 0, 0.25),
      0 4px 12px rgba(0, 0, 0, 0.5);
  }
}
.inventory-drop-incompatible {
  filter: grayscale(1) !important;
  opacity: 0.42 !important;
}
.inventory-drop-incompatible.inventory-drop-target {
  outline-color: rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 768px) {
  .rx-map .leaflet-control-attribution {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    margin: 0 !important;
  }
}

/* Full job-card popup. The content is authored at one native size and the
   stage is resized to the uniformly scaled result so neither axis can spill. */
.job-card-popup {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.job-card-popup[hidden] {
  display: none !important;
}
.job-card-popup .popup-viewport {
  width: 100%;
  height: 100%;
}
.job-card-popup .popup-stage {
  position: relative;
  flex: 0 0 auto;
}
.job-card-popup-content {
  position: relative;
  width: 900px;
  max-width: none;
  min-height: 0;
  transform-origin: top left;
}
.job-card-popup-content > .route-card {
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
  cursor: default;
}
.job-card-popup-close {
  position: absolute;
  z-index: 20;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: #b91521;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.job-card-popup-close:hover {
  background: #e3202a;
}
body.job-card-popup-open {
  overflow: hidden !important;
}
@media (max-width: 380px) {
  .job-card-popup {
    padding: 8px;
  }
  .job-card-popup-content {
    width: 760px;
  }
  .job-card-popup-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 1.6rem;
  }
}

@media (max-width: 768px) {
  .inventory-tray {
    right: auto;
    bottom: 0;
    left: 0;
    width: min(100vw, var(--sbw));
    height: calc(var(--inventory-card-height) + 36px);
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .inventory-cards {
    left: 16px;
    right: 0;
    bottom: 28px;
    gap: 8px;
    max-width: none;
  }
  .inventory-heading .hint-mobile {
    display: inline;
  }
  .inventory-heading .hint-desktop {
    display: none;
  }
  /* The driver's inventory strip belongs to the All Jobs list: with the list closed it is not shown at all (so it takes no room on the map). */
  body.sb-collapsed .inventory-tray {
    display: none;
  }
  /* No on-screen zoom buttons on phones (pinch to zoom). */
  .leaflet-control-zoom {
    display: none !important;
  }
  /* Keep required map attribution readable without the bright white strip. */
  .rx-map .leaflet-control-attribution,
  .small-route-map .leaflet-control-attribution,
  .match-map .leaflet-control-attribution,
  .job-offer-map .leaflet-control-attribution {
    background: linear-gradient(
      180deg,
      rgba(14, 18, 22, 0.72),
      #0e1216
    ) !important;
    color: #aeb8c2 !important;
    box-shadow: none !important;
  }
  .rx-map .leaflet-control-attribution a,
  .small-route-map .leaflet-control-attribution a,
  .match-map .leaflet-control-attribution a,
  .job-offer-map .leaflet-control-attribution a {
    color: #d6dde4 !important;
  }
}
/* ============ APP FRAME: two independent scroll areas ============ */
.app {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

/* The SVG sprite is a definition registry, not page content. Keep it out of the
   document flow so the React root height is owned by the header and app only. */
.offer-icon-sprite {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- Left frame: sidebar --- */
.sidebar {
  width: var(--sbw);
  flex: 0 0 var(--sbw);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%),
    linear-gradient(
      180deg,
      rgba(245, 243, 238, 0.16) 0%,
      rgba(245, 243, 238, 0.34) 68%,
      rgba(255, 255, 255, 0.62) 100%
    ),
    url("sidebarbg.png") center/cover no-repeat;
  border-right: 1px solid #d9d4ca;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  transition: margin-left 0.25s ease;
  z-index: 1100;
  box-shadow: inset 0 14px 18px -18px rgba(0, 0, 0, 0.6);
}
.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 18px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0)
  );
}
/* The lower edge is added only while the compact My Jobs area is visible. */
.sidebar::after {
  content: none;
}
body.sb-collapsed .sidebar {
  margin-left: calc(-1 * var(--sbw));
}
@media (min-width: 769px) {
  body.sidebar-no-load-motion .sidebar {
    transition: none !important;
  }
}
.sidebar-head {
  padding: 12px;
  border-bottom: 1px solid #d9d4ca;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}
.sidebar-title-row strong,
.sidebar .my-jobs-check,
.sidebar-foot,
.sidebar .link-btn {
  color: #11171d;
}
.sidebar :is(#searchBox, .rx-searchBox),
.sidebar :is(#filterSelect, .rx-filterSelect) {
  background: rgba(255, 255, 255, 0.84);
  border-color: #d2ccc1;
  color: #11171d;
}
.sidebar .my-jobs-check input {
  background: #fff;
}
.sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-title-row strong {
  font-size: 1.045rem;
  letter-spacing: 0.02em;
  color: #fff;
}
.count-badge {
  background: var(--yellow);
  color: #14181c;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.902rem;
  font-weight: 700;
  margin-left: 4px;
  color: #fff;
}
:is(#searchBox, .rx-searchBox) {
  background: #0f141a;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  width: 100%;
}
:is(#searchBox, .rx-searchBox):focus {
  outline: none;
  border-color: var(--yellow);
}
.search-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
}
.search-row :is(#searchBox, .rx-searchBox) {
  flex: 1;
  min-width: 0;
}
.my-jobs-check {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.my-jobs-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: #090d11;
  border: 2px solid var(--yellow);
  border-radius: 5px;
  cursor: pointer;
}
.my-jobs-check input::after {
  content: "✓";
  color: #69f0ae;
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1;
  transform: scale(0);
  transition: transform 0.12s ease;
}
.my-jobs-check input:checked::after {
  transform: scale(1);
}
.my-jobs-check input:focus-visible {
  outline: 2px solid var(--green-accent);
  outline-offset: 2px;
}
.type-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0f141a;
  color: #fff;
}
.type-filter-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.type-filter-row input {
  appearance: none;
  -webkit-appearance: none;
  display: grid !important;
  place-items: center !important;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  opacity: 1 !important;
  background: #090d11;
  border: 2px solid var(--yellow);
  border-radius: 5px;
  cursor: pointer;
}
.type-filter-row input::after {
  content: "✓";
  color: #69f0ae;
  font-size: 0.9rem;
  font-weight: 1000;
  line-height: 1;
  transform: scale(0);
  transition: transform 0.12s ease;
}
.type-filter-row input:checked::after {
  transform: scale(1);
}
.type-filter-row input:focus-visible {
  outline: 2px solid #69f0ae;
  outline-offset: 2px;
}
.mobile-my-jobs {
  display: none;
}
.sidebar-filter-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  height: 34px;
  align-self: center;
  margin: 0 0 0 auto;
  padding: 0;
  border: 1px solid rgba(93, 156, 211, 0.58);
  border-radius: 9px;
  background: #18232e;
  color: #dcecff;
  font: inherit;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}
.sidebar-filter-toggle:hover {
  border-color: #67a9e6;
  background: #22384b;
}
.sidebar-filter-toggle[aria-expanded="true"] {
  border-color: #69aef0;
  background: #1d4e79;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(77, 153, 218, 0.18);
}
.sidebar-filter-toggle:focus-visible {
  outline: 2px solid #9bcfff;
  outline-offset: 2px;
}
.sidebar-filter-toggle .ui-ic {
  display: block;
  flex: none;
}
.sidebar-filter-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.sidebar-filter-panel[hidden] {
  display: none !important;
}
:is(#filterSelect, .rx-filterSelect) {
  background: #0f141a;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  padding: 7px 9px;
  font: inherit;
  font-size: 0.82rem;
  width: 100%;
}
:is(#filterSelect, .rx-filterSelect):focus {
  outline: none;
  border-color: var(--yellow);
}
.sidebar-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-padding-bottom: 8px;
}
body.inventory-visible .sidebar-list {
  padding-bottom: calc(clamp(72px, calc(24vw - 10px), 98px) + 42px);
  scroll-padding-bottom: calc(clamp(72px, calc(24vw - 10px), 98px) + 42px);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 calc(100% - clamp(72px, calc(24vw - 10px), 98px) - 44px),
    transparent calc(100% - clamp(72px, calc(24vw - 10px), 98px) - 4px)
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 calc(100% - clamp(72px, calc(24vw - 10px), 98px) - 44px),
    transparent calc(100% - clamp(72px, calc(24vw - 10px), 98px) - 4px)
  );
}
body.inventory-visible .sidebar::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(clamp(72px, calc(24vw - 10px), 98px) + 108px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(245, 243, 238, 0) 0%,
    #fff calc(100% - 5px),
    #fff 100%
  );
}
.job-item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 104px;
  padding: 9px 11px;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.job-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.34;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 34%,
    #000 100%
  );
}
.job-item.driver::before {
  background-image:
    linear-gradient(180deg, rgba(190, 12, 26, 0.08), rgba(7, 12, 19, 0.7)),
    url("assets/job-card-driver-art.png");
}
.job-item.freight::before {
  background-image:
    linear-gradient(180deg, rgba(8, 31, 53, 0.08), rgba(7, 18, 28, 0.72)),
    url("assets/job-card-freight-art.png");
}
.job-item.idle::before {
  background-image:
    linear-gradient(180deg, rgba(12, 63, 43, 0.08), rgba(7, 23, 20, 0.72)),
    url("assets/job-card-idle-driver-art.png");
}
.job-item.job::before {
  background-image:
    linear-gradient(180deg, rgba(255, 196, 0, 0.05), rgba(120, 82, 0, 0.3)),
    url("assets/detail-art-job.png");
}
.job-card-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
  min-width: 0;
  margin: -9px -11px 2px;
  padding: 8px 9px 8px 11px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(
    105deg,
    rgba(194, 10, 22, 0.96) 0%,
    rgba(132, 10, 22, 0.9) 56%,
    rgba(95, 13, 24, 0.3) 100%
  );
  color: #fff;
}
.job-card-top.freight {
  background: linear-gradient(
    105deg,
    rgba(15, 91, 143, 0.96) 0%,
    rgba(13, 62, 101, 0.9) 56%,
    rgba(14, 39, 64, 0.25) 100%
  );
}
.job-card-top.idle {
  background: linear-gradient(
    105deg,
    rgba(12, 131, 83, 0.96) 0%,
    rgba(8, 84, 62, 0.9) 56%,
    rgba(9, 48, 39, 0.25) 100%
  );
}
.job-card-top.job {
  background: linear-gradient(
    105deg,
    rgba(232, 185, 0, 0.98) 0%,
    rgba(196, 145, 0, 0.94) 56%,
    rgba(140, 98, 0, 0.3) 100%
  );
  color: #241d00;
}
.job-card-top.job .job-type-label {
  background: rgba(255, 255, 255, 0.38);
  border-color: #241d00;
  color: #241d00;
}
.job-card-top.job .ji-route {
  color: #241d00;
  text-shadow: none;
}
.job-card-top-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding-right: 34px;
}
.job-card-identity {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.job-card-top .job-type-label {
  align-self: flex-start;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(35, 7, 10, 0.32);
  color: #fff;
  font-size: 0.62rem;
}
.job-card-top.freight .job-type-label {
  background: rgba(5, 26, 44, 0.35);
}
.job-card-top.idle .job-type-label {
  background: rgba(4, 45, 31, 0.35);
}
.job-card-subtitle {
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.86);
}
.job-card-id {
  display: none;
}
.job-card-owner {
  display: inline-block;
  min-width: 0;
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  color: #080d12;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.job-card-top .ji-route {
  display: block;
  min-width: 0;
  padding: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.job-card-top .route-to {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  border-radius: 50%;
  background: #080d12;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
  vertical-align: 2px;
}
.job-item:hover {
  border-color: #3d4956;
}
.job-item.selected {
  border-color: var(--yellow);
  background: #232b17;
}
/* Favourite colours on sidebar rows */
.job-item.fav {
  border-color: var(--green-edge);
  background: var(--green-bg);
}
.job-item.selected.fav {
  border-color: var(--green-accent);
}
.job-item.last-day,
.job-item.last-day.selected,
.job-item.last-day.fav,
.job-item.last-day.selected.fav {
  border-color: #ffa02e;
  background: linear-gradient(135deg, #c2570a 0%, #4a1f04 100%);
}
.job-item.freight.last-day,
.job-item.freight.last-day.selected,
.job-item.freight.last-day.fav,
.job-item.freight.last-day.selected.fav {
  border-color: #ff5a5a;
  background: linear-gradient(135deg, #611523 0%, #2b0e13 100%);
}
.job-item.last-day .ji-meta {
  color: #fff;
}
.ji-route {
  padding-right: 122px;
  font-weight: 800;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ji-route .arrow {
  color: var(--red);
}
.ji-meta {
  padding-right: 39px;
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.sidebar .job-item {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 36%,
    rgba(255, 255, 255, 0.74) 100%
  ) !important;
  color: #080d12;
}
.sidebar .job-item.driver {
  border-color: #d21f32 !important;
}
.sidebar .job-item.freight {
  border-color: #268fd0 !important;
}
.sidebar .job-item.idle {
  border-color: #23a96e !important;
}
.sidebar .job-item.job {
  border-color: #e0b400 !important;
  background: linear-gradient(180deg, #fffbe0 0%, #fff0a0 100%) !important;
  color: #241d00;
}
.sidebar .job-item .ji-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #080d12;
  font-size: 0.78rem;
  font-weight: 800;
}
.sidebar .job-item .ji-meta .job-date-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #080d12;
}
.sidebar .job-item .ji-meta .job-date-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}
.ji-star {
  color: var(--green-accent);
  font-size: 0.78rem;
  font-weight: 700;
}
.job-row-star {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 8px;
  width: 29px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #fff;
  color: #080d12;
  font-size: 0.94rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.45);
}
.job-row-star:hover {
  color: #080d12;
  border-color: #fff;
  background: #fff;
}
.job-row-star.active {
  color: #f2c400;
  border-color: #fff;
  background: #fff;
}
.idle-truck-status-sidebar {
  position: absolute;
  z-index: 2;
  top: 34px;
  right: 44px;
  display: grid;
  place-items: center;
  color: #080d12;
  pointer-events: none;
}
.idle-truck-icon {
  display: block;
  width: 20px;
  height: 20px;
}
.job-state-route {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 44px;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.sidebar .job-item .last-day-badge {
  align-self: flex-end;
  position: relative;
  z-index: 2;
  top: auto;
  right: auto;
  bottom: auto;
  max-width: 78px;
  margin-top: auto;
  padding: 2px 5px;
  font-size: 0.5rem;
  line-height: 1;
  pointer-events: none;
}
.job-row-owner {
  position: absolute;
  top: 7px;
  right: 8px;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 7px;
  font-size: 0.7rem;
}
@media (min-width: 769px) {
  .sidebar .ji-route {
    padding-right: 94px;
    font-size: 0.76rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
  }
  .sidebar .job-card-owner {
    max-width: 84px;
    font-size: 0.6rem;
  }
  .sidebar .job-row-owner {
    max-width: 88px;
    font-size: 0.64rem;
    padding-left: 5px;
    padding-right: 5px;
  }
  .sidebar .ji-meta {
    padding-right: 32px;
    font-size: 0.72rem;
  }
}
.side-empty {
  color: var(--muted);
  text-align: center;
  padding: 26px 10px;
  font-size: 0.88rem;
}
.sidebar-foot {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.52);
  padding: 10px 12px;
  border-top: 1px solid #d9d4ca;
  font-size: 0.74rem;
  color: var(--muted);
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.74rem;
}
.link-btn:hover {
  color: #ff6b6b;
}

/* --- MENU button (lives in the header, top-left corner) --- */
.header-left {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
}
.header-left .user-box {
  grid-column: 1;
  grid-row: 1/3;
}
.user-name-display #loginBtn {
  position: static;
  min-height: 26px;
  padding: 2px 5px;
  background: transparent;
  border-color: transparent;
  color: var(--yellow);
  font-weight: 900;
  text-decoration: underline;
}
.header-left .logo-block {
  grid-column: 2;
  grid-row: 1/3;
}
@media (min-width: 769px) {
  .board-mobile-instruction {
    display: none;
  }
  .header-left {
    grid-template-columns: 112px auto;
  }
  .header-left .user-box {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .header-left .logo-block {
    margin-left: 14px;
  }
  .header-right {
    padding-top: 30px;
  }
}

.backdrop {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1050;
  display: none;
}

/* --- Right frame: cards + detail + map (its own scrollbar) ---
     Top padding keeps content clear of the sliding MENU tab. */
.main-frame {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 48px;
}
h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}
.section-sub {
  color: var(--muted);
  margin: 0 0 16px;
  font-size: 0.92rem;
}
section {
  margin-bottom: 30px;
}

/* Cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.carousel-nav {
  display: none;
}
.route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--yellow);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
}
.route-card:hover {
  border-color: #3d4956;
  border-left-color: var(--yellow);
}
.card-expand-hint {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  opacity: 0.78;
}
.card-expand-hint .hint-mobile {
  display: none;
}
.card-expand-hint .hint-desktop {
  display: inline;
}
.route-card.selected {
  outline: 2px solid var(--yellow);
  outline-offset: -1px;
}
/* Favourite colours: very light green edges, dark green background */
.route-card.fav {
  border-color: var(--green-edge);
  border-left-color: var(--green-accent);
  background: var(--green-bg);
}
.route-card.fav:hover {
  border-color: var(--green-edge);
}
.route-card.selected.fav {
  outline-color: var(--green-accent);
}
.route-card.freight {
  background: linear-gradient(180deg, #14324a 0%, #0e2233 100%);
  border-color: #275d86;
  border-left-color: #268bc5;
}
.route-card.freight:hover {
  border-color: #3d7ba6;
}
.route-card.freight .chip {
  background: #0d1e2c;
  border-color: #244d6d;
}
.route-card.job {
  background: linear-gradient(180deg, #fff9d6 0%, #fff0a0 100%);
  border-color: #e0b400;
  border-left-color: #e0b400;
  color: #241d00;
}
.route-card.job:hover {
  border-color: #bd9800;
  border-left-color: #bd9800;
}
.route-card.job .job-type-label {
  background: #e8b900;
  color: #241d00;
  border: 1px solid #8f7000;
}
.route-card.job .chip {
  background: #fff8c9;
  border-color: #d4b52a;
  color: #4b3c00;
}
.route-card.job .route-foot {
  border-top-color: #d4b52a;
}
.board-detail-card.job .chip {
  background: #fff8c9;
  border-color: #d4b52a;
  color: #4b3c00;
}
.map-mini-card.job {
  background: linear-gradient(180deg, #fff9d6 0%, #fff0a0 100%);
  border-color: #e0b400;
  color: #241d00;
}
.job-item.freight {
  background: linear-gradient(180deg, #14324a 0%, #0e2233 100%);
  border-color: #275d86;
}
.job-item.idle {
  background: linear-gradient(180deg, #123d31 0%, #0c261f 100%);
  border-color: #39c98a;
}
.job-type-label {
  display: inline-flex;
  width: max-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.job-type-label.driver {
  background: #11171d;
  color: var(--yellow);
  border: 1px solid var(--yellow);
}
.job-type-label.freight {
  background: #11171d;
  color: #3ea6e0;
  border: 1px solid var(--yellow);
}
.route-card.last-day,
.route-card.last-day.selected,
.route-card.last-day.fav,
.route-card.last-day.selected.fav {
  border-color: #ffa02e;
  border-left-color: #ff8c1a;
  background: linear-gradient(145deg, #c2570a 0%, #4a1f04 72%);
  color: #fff;
}
.route-card.last-day:hover {
  border-color: #ffa02e;
  border-left-color: #ff8c1a;
}
.route-card.last-day.selected {
  outline-color: #ffa02e;
}
.route-card.freight.last-day,
.route-card.freight.last-day.selected,
.route-card.freight.last-day.fav,
.route-card.freight.last-day.selected.fav {
  border-color: #ff5a5a;
  border-left-color: var(--red);
  background: linear-gradient(145deg, #611523 0%, #2b0e13 72%);
  color: #fff;
}
.route-card.freight.last-day:hover {
  border-color: #ff5a5a;
  border-left-color: var(--red);
}
.route-card.freight.last-day.selected {
  outline-color: #ff5a5a;
}
.route-card.last-day .route-desc,
.route-card.last-day .route-foot {
  color: #fff;
}
.route-card.last-day .route-foot {
  border-top-color: rgba(255, 255, 255, 0.28);
}
.contact-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--yellow);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.contact-link:hover {
  color: #ffe76a;
}
.location-input-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.location-input-row input {
  min-width: 0;
  flex: 1;
}
.gps-btn {
  flex: none;
  white-space: nowrap;
  padding: 9px 10px;
  font-size: 0.76rem;
}
.mobile-town-suggestions {
  display: none;
}
.gps-status {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}
.gps-status.active {
  color: var(--yellow);
}
.route-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.route-title {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding-right: 30px;
}
.route-topline .route-title {
  flex: 1;
  padding-right: 0;
}
.card-corner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex: none;
  max-width: 48%;
}
.card-owner {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 769px) {
  :is(#cardGrid, .rx-cardGrid) .route-title {
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
  }
  :is(#cardGrid, .rx-cardGrid) .card-corner {
    max-width: 40%;
  }
  :is(#cardGrid, .rx-cardGrid) .card-owner {
    max-width: 105px;
    font-size: 0.68rem;
    padding-left: 6px;
    padding-right: 6px;
  }
  :is(#cardGrid, .rx-cardGrid) .route-card {
    gap: 7px;
    padding: 12px;
  }
}
.route-arrow {
  color: var(--red);
}
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 600;
}
.route-card.fav .chip {
  background: #123524;
  border-color: #2e5c40;
}
.chip.date {
  color: var(--yellow);
  border-color: #4a4415;
}
.last-day-badge {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  width: max-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e02a2a 0%, #b81414 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}
.route-card.fav .chip.date {
  color: var(--green-accent);
  border-color: #2e5c40;
}
.route-desc {
  color: #c6ced6;
  font-size: 0.87rem;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.route-desc.full {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.route-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.76rem;
}
.route-card.fav .route-foot {
  border-top-color: #2e5c40;
}
.foot-actions {
  display: flex;
  gap: 4px;
}
.del-btn,
.edit-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 3px 7px;
  border-radius: 6px;
}
.del-btn:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.08);
}
.edit-btn:hover {
  color: var(--yellow);
  background: rgba(255, 212, 0, 0.08);
}
.star-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: rgba(14, 18, 22, 0.72);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1;
  cursor: pointer;
}
.star-btn:hover {
  color: var(--green-accent);
}
.star-btn.active {
  color: var(--green-accent);
  border-color: var(--green-edge);
  background: rgba(105, 240, 174, 0.1);
}

/* Expanded detail panel (above the map) */
.detail-panel {
  background: linear-gradient(180deg, #20283f 0%, var(--panel2) 60%);
  border: 1px solid var(--border);
  border-left: 5px solid var(--yellow);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-panel.fav {
  background: linear-gradient(180deg, #14351f 0%, var(--green-bg) 60%);
  border-color: var(--green-edge);
  border-left-color: var(--green-accent);
}
.dp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dp-head .route-title {
  font-size: 1.15rem;
  padding-right: 0;
}
.dp-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 9px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-primary {
  background: var(--yellow);
  color: #14181c;
}
.btn-primary:hover {
  background: #ffe14d;
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}
.btn-danger:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}
.btn-solid-danger {
  background: #ee2222;
  color: #fff;
}
.btn-solid-danger:hover {
  background: #ff4444;
}
.btn-sm {
  padding: 7px 12px;
  font-size: 0.82rem;
}
.dp-foot {
  color: var(--muted);
  font-size: 0.78rem;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.detail-panel.fav .dp-foot {
  border-top-color: #2e5c40;
}

/* Desktop My Jobs selection: keep All Jobs visible while the map owns the
     available frame and the selected card floats over its upper-right corner. */
@media (min-width: 769px) {
  body.my-jobs-map-mode .main-frame {
    position: relative;
    overflow: hidden;
    padding: 12px;
  }
  body.my-jobs-map-mode .rx-routes,
  body.my-jobs-map-mode :is(#carouselNav, .rx-carouselNav) {
    display: none;
  }
  body.my-jobs-map-mode :is(#detailWrap, .rx-detailWrap):not([hidden]) {
    position: absolute;
    z-index: 4;
    top: 12px;
    right: 12px;
    width: min(25%, 220px);
    max-height: 50%;
    overflow: hidden;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    gap: 5px;
    border-left-width: 3px;
    border-radius: 9px;
    font-size: 0.68rem;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .dp-head {
    gap: 5px;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .job-type-label {
    padding: 1px 5px;
    font-size: 0.5rem;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .dp-identity {
    gap: 2px;
    max-width: 62%;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .dp-top-actions {
    gap: 3px;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .star-btn {
    width: 22px;
    height: 22px;
    font-size: 0.72rem;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .contact-link {
    min-height: 22px;
    padding: 2px 4px;
    font-size: 0.55rem;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .dp-owner,
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .chip {
    max-width: 100%;
    padding: 1px 4px;
    font-size: 0.52rem;
    line-height: 1.15;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel)
    .dp-head
    .route-title {
    font-size: 0.68rem;
    line-height: 1.1;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .route-title {
    font-size: 0.65rem;
    line-height: 1.1;
    padding-right: 0;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .chips {
    gap: 2px;
    max-height: 30px;
    overflow: hidden;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .route-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    line-height: 1.15;
    max-height: 2.3em;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .dp-foot {
    gap: 3px 4px;
    padding-top: 4px;
    font-size: 0.52rem;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .dp-foot .btn {
    min-height: 22px;
    padding: 2px 4px;
    font-size: 0.52rem;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel) .last-day-badge {
    padding: 2px 4px;
    font-size: 0.5rem;
  }
  body.my-jobs-map-mode :is(#mainRouteBanner, .rx-mainRouteBanner) {
    padding: 3px 6px;
    margin-bottom: 3px;
    font-size: 0.58rem;
    line-height: 1.1;
  }
  body.my-jobs-map-mode .rx-map-section {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  body.my-jobs-map-mode .rx-map-section .rx-map {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* Map */
.rx-map {
  height: clamp(340px, 56vh, 640px);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  z-index: 1;
}
:is(#mapFallback, .rx-mapFallback) {
  color: #ff6b6b;
  font-weight: 600;
}
:is(#mainShowFullMap, .rx-mainShowFullMap) {
  display: none !important;
}
.job-map-pin {
  width: 20px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.75));
}
/* When pinned into the card grid (mobile tap-to-focus), span the full row */
.rx-map-section.grid-pinned {
  grid-column: 1/-1;
  width: 100%;
  margin: 4px 0 16px;
}
/* Gradient fade from the React board map into the header. It lives inside the map (above the tiles and markers, z-index 450, below the
     Leaflet controls, 800+) so the Map filters and Calendar buttons sit on top of it instead of being dimmed by it. */
.main-frame.rx-boardMapFrame .rx-map::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    #0f141a 0%,
    rgba(15, 20, 26, 0.94) 16%,
    rgba(15, 20, 26, 0.68) 34%,
    rgba(15, 20, 26, 0.24) 62%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 450;
}
/* Modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* Locked route cards sit above source modals; confirmations stay topmost. */
:is(#matchModal, .rx-matchModal) {
  z-index: 9600;
}
:is(#confirmModal, .rx-confirmModal) {
  z-index: 9900;
}
/* The Via editor is opened from the job form (z-index 9800), so it must sit above it. */
:is(#viaModal, .rx-viaModal) {
  z-index: 9850;
}
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(94vw, 620px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px;
}
.modal-card.narrow {
  width: min(94vw, 420px);
}
.route-wizard {
  width: min(94vw, 460px);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal-head h2 {
  margin: 0;
}
.icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.95rem;
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.confirm-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.confirm-title-row h2 {
  margin: 0;
  font-size: 1.15rem;
}
.warn-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: rgba(238, 34, 34, 0.12);
  border: 1px solid rgba(238, 34, 34, 0.35);
}
.warn-badge.info {
  background: rgba(255, 212, 0, 0.1);
  border-color: rgba(255, 212, 0, 0.3);
}
.confirm-msg {
  color: #c6ced6;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.confirm-note {
  margin: 7px 0 0;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}
.stack label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  font-size: 0.9rem;
}
.route-wizard-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.route-wizard-title h2 {
  white-space: nowrap;
}
.wizard-progress {
  flex: none;
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.form-step {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 126px;
}
.form-step label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  font-size: 0.9rem;
}
.wizard-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.wizard-note.expiry-note {
  color: var(--yellow);
  font-weight: 800;
}
.via-match-note {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}
.via-summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0f141a;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.via-summary.empty {
  color: var(--muted);
}
.via-editor-card {
  width: min(94vw, 560px);
}
.via-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
}
.via-mobile-only {
  display: none !important;
}
.via-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: min(48dvh, 390px);
  overflow-y: auto;
  padding-right: 2px;
}
.via-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
}
.via-number {
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-weight: 900;
}
.via-row-actions {
  display: flex;
  gap: 4px;
}
.via-row-actions .btn {
  min-width: 34px;
  padding: 8px;
  font-size: 0.8rem;
}
.via-row-actions .via-promote-start {
  width: auto;
  padding-inline: 8px;
  color: #fff;
  border-color: var(--yellow);
  white-space: nowrap;
}
.via-route-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f141a;
  scrollbar-width: thin;
}
.via-chain-stop {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  scroll-snap-align: center;
  white-space: nowrap;
}
.via-chain-stop:not(:last-child)::after {
  content: "→";
  margin-left: 6px;
  color: var(--yellow);
  font-weight: 900;
}
.via-chain-chip {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #171d24;
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}
.via-chain-chip.fixed {
  border-color: rgba(255, 212, 0, 0.45);
  color: var(--yellow);
  cursor: default;
}
.via-chain-chip.selected {
  border-color: var(--yellow);
  background: rgba(255, 212, 0, 0.14);
  color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.12);
}
.via-chain-empty {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.via-single-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 0.86rem;
}
.via-single-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
.via-single-input-wrap .btn {
  white-space: nowrap;
}
.via-stop-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.via-stop-actions .btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 0.78rem;
}
.via-editor-msg {
  display: block;
  min-height: 20px;
  margin-top: 9px;
  font-size: 0.84rem;
  font-weight: 700;
}
.route-banner {
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 11px;
  box-sizing: border-box;
  color: #fff;
  background: #090c10;
  border: 1px solid var(--yellow);
  border-radius: 9px;
  font-size: clamp(0.68rem, 2.1vw, 0.84rem);
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}
.route-banner[hidden] {
  display: none;
}
.route-banner .route-arrow {
  color: var(--yellow);
  padding: 0 3px;
}
.wizard-message {
  display: block;
  min-height: 22px;
  margin-top: 10px;
}
.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-left: auto;
}
.wizard-actions .btn {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.opt {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.84em;
}
.card-match-btn {
  display: block;
  width: 100%;
  margin-top: 9px;
  min-height: 38px;
  border: 1px solid var(--yellow);
  border-radius: 8px;
  background: #11171d;
  color: var(--yellow);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 1000;
  cursor: pointer;
}
.card-match-btn:hover {
  background: #202830;
}
.card-match-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.match-results-card {
  width: min(94vw, 760px);
  max-height: 88vh;
}
.match-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.match-row {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #0f141a;
  overflow: hidden;
}
.match-row-summary {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.match-row-summary:hover,
.match-row.expanded .match-row-summary {
  background: #202830;
}
.match-type {
  padding: 2px 5px;
  border-radius: 4px;
  background: #111;
  color: var(--yellow);
  font-size: 0.63rem;
  font-weight: 1000;
}
.match-type.freight {
  background: #1467b3;
  color: #fff;
}
.match-row-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.77rem;
  font-weight: 750;
}
.match-score {
  color: var(--yellow);
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}
.match-qualification {
  grid-column: 2 / -1;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}
.match-expanded {
  padding: 8px;
  border-top: 1px solid var(--yellow);
}
.match-expanded .route-card {
  max-width: none;
  width: 100%;
}
.match-map {
  height: 230px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.match-group-title {
  margin: 9px 0 5px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}
.match-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
}
input,
select,
textarea {
  background: #0f141a;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  width: 100%;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--yellow);
}

/* Native date-picker icon — forced pure white.
     brightness(0) crushes whatever the browser drew to black, invert(1)
     flips it to white — works regardless of dark/light rendering mode,
     so it can never drift back to invisible like the plain invert did. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  cursor: pointer;
  opacity: 0.9;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
input[type="date"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-datetime-edit {
  color: var(--text);
}
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-text {
  color: var(--text);
}
textarea {
  resize: vertical;
}
.form-msg {
  color: #4ade80;
  font-weight: 600;
  font-size: 0.9rem;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
}
.stack .btn {
  margin-top: 4px;
}

/* Login tabs */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.tab {
  flex: 1;
  padding: 9px;
  border-radius: 9px;
  cursor: pointer;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
}
.tab.active {
  background: var(--yellow);
  color: #14181c;
  border-color: var(--yellow);
}
.forgot {
  text-align: center;
  margin: 14px 0 0;
}
.forgot a {
  color: var(--muted);
  font-size: 0.82rem;
}
.forgot a:hover {
  color: var(--text);
}

/* Private in-site messaging is React2-owned. Its styles live in
     react-shell/src/ui/communication.css, loaded with the React bundle. */

/* Scrollbars */
.main-frame::-webkit-scrollbar,
.modal-card::-webkit-scrollbar {
  width: 10px;
}
.main-frame::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
  background: #2a333d;
  border-radius: 6px;
}
.main-frame::-webkit-scrollbar-track {
  background: transparent;
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
  .card-expand-hint .hint-mobile {
    display: inline;
  }
  .card-expand-hint .hint-desktop {
    display: none;
  }
  .via-desktop-only {
    display: none !important;
  }
  .via-mobile-only:not([hidden]) {
    display: flex !important;
  }
  .via-help.via-mobile-only:not([hidden]) {
    display: block !important;
  }
  .via-reorder-note.via-mobile-only:not([hidden]) {
    display: block !important;
  }
  :root {
    --header-h: 50px;
    --sbw: 100%;
  }
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    touch-action: pan-x pan-y pinch-zoom;
  }
  html {
    height: auto;
    min-height: 100%;
  }
  body {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
    display: block;
  }
  .app {
    display: block;
    min-height: calc(100dvh - var(--header-h));
  }
  .app,
  .main-frame {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  *,
  html,
  body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  *::-webkit-scrollbar,
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
  .site-header {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 100vw;
    overflow: visible;
    flex: 0 0 var(--header-h);
    flex-basis: var(--header-h);
    height: var(--header-h);
    min-height: var(--header-h);
    max-height: var(--header-h);
    display: grid;
    grid-template-columns: minmax(76px, 1fr) minmax(128px, 1.35fr) minmax(
        76px,
        1fr
      );
    grid-template-rows: 76px 48px;
    align-items: center;
    gap: 0;
    padding: 0 max(8px, env(safe-area-inset-right)) 0
      max(8px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    z-index: 1300;
  }
  .site-header::after {
    display: none;
  }
  .header-left,
  .header-right {
    display: contents;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .logo-block,
  .post-actions {
    display: contents;
  }
  .header-job-actions {
    display: none !important;
  }
  .header-job-actions .btn {
    min-width: 0;
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 5px 4px;
    font-size: 0.67rem;
    line-height: 1.05;
    white-space: normal;
  }
  .creator-links {
    top: auto;
    bottom: 50px;
    right: max(8px, env(safe-area-inset-right));
    gap: 5px;
    z-index: 1503;
  }
  .creator-credit {
    font-size: 0.52rem;
  }
  .mobile-town-suggestions.open {
    display: flex;
    position: fixed;
    z-index: 2200;
    flex-direction: column;
    margin: 0;
    overflow-y: auto;
    border: 1px solid var(--yellow);
    border-radius: 8px;
    background: #11171d;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
  }
  .mobile-town-suggestions button {
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
  }
  .mobile-town-suggestions button:last-child {
    border-bottom: 0;
  }
  .mobile-town-suggestions button:active {
    background: rgba(255, 212, 0, 0.14);
    color: var(--yellow);
  }
  .logo {
    position: absolute;
    left: 42vw;
    right: max(8px, env(safe-area-inset-right));
    top: max(31px, calc(env(safe-area-inset-top) + 27px));
    height: 44px;
    justify-content: flex-end;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    transition: transform 0.18s ease;
    z-index: 2;
  }
  .site-header.has-unread .logo {
    transform: none;
  }
  .logo-img {
    height: 44px;
    max-width: 100%;
    object-fit: contain;
  }
  .logo small {
    display: none;
  }
  .user-name-display #loginBtn {
    position: static;
    min-height: 30px;
    padding: 3px 5px;
    background: transparent;
    border-color: transparent;
    color: var(--yellow);
    z-index: auto;
  }
  .banner-auth {
    right: max(10px, env(safe-area-inset-right));
    top: 8px;
    min-width: 70px;
    gap: 6px;
    pointer-events: auto;
    z-index: 1510;
  }
  .header-tagline {
    display: none;
  }
  .members-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    left: 51.5%;
    top: max(9px, env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 7;
    margin: 0;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1b242e 0%, #0d1218 100%);
    border: 1px solid var(--yellow);
    box-shadow:
      inset 0 1px 0 rgba(255, 212, 0, 0.22),
      0 4px 14px rgba(0, 0, 0, 0.5);
    color: var(--yellow);
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }
  .members-ico {
    font-size: 0.68rem;
    line-height: 1;
  }
  .members-num {
    font-size: 0.78rem;
    font-weight: 1000;
    letter-spacing: 0.02em;
  }
  .members-num:empty {
    display: none;
  }
  .members-word {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #ffe76a;
  }
  .user-box {
    position: absolute;
    top: max(6px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    width: calc(42vw - max(12px, env(safe-area-inset-left)));
    max-width: 150px;
    height: 64px;
    pointer-events: none;
    z-index: 1501;
  }
  .user-name-display {
    position: absolute;
    left: -3px;
    top: 3px;
    width: 100%;
    max-width: 100%;
    min-height: 26px;
    padding: 2px 5px;
    pointer-events: auto;
  }
  .user-menu-row {
    position: absolute;
    left: 0;
    top: 32px;
    pointer-events: auto;
  }
  .account-menu-toggle {
    min-width: 76px;
    min-height: 30px;
    padding: 3px 8px;
    font-size: 0.7rem;
  }
  .user-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    pointer-events: auto;
  }
  .user-unread-badge {
    min-width: 31px;
    height: 28px;
    padding: 0 5px;
    place-items: center;
    border-radius: 7px;
    background: var(--red);
    color: #fff;
    border: 1px solid #fff;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  }
  .user-dropdown {
    position: absolute;
    left: 0;
    top: 66px;
    width: min(190px, calc(100vw - 16px));
    padding: 6px;
    border: 1px solid var(--yellow);
    border-radius: 9px;
    background: #0b1015;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.72);
    pointer-events: auto;
    z-index: 1502;
  }
  .user-dropdown .linkish,
  .user-dropdown .messages-btn {
    pointer-events: auto;
  }
  .account-actions {
    display: contents;
  }
  :is(#myJobsBtn, .rx-myJobsBtn) {
    font-size: 0.76rem;
  }
  html:not(.sb-collapsed),
  body:not(.sb-collapsed),
  body:not(.sb-collapsed) .app,
  body:not(.sb-collapsed) .main-frame {
    overflow: hidden !important;
    height: 100% !important;
    height: 100dvh !important;
  }
  .sidebar,
  .sidebar-list {
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .job-item {
    touch-action: auto;
    overscroll-behavior: auto;
  }
  .sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    transition: transform 0.25s ease;
    border-right: 0;
    box-shadow:
      inset 0 14px 18px -18px rgba(0, 0, 0, 0.6),
      0 8px 24px rgba(0, 0, 0, 0.32);
  }
  body.sb-collapsed .sidebar {
    transform: translateX(calc(-100% - 12px));
  }
  .backdrop {
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
  }
  body:not(.sb-collapsed) .backdrop {
    pointer-events: auto;
    opacity: 1;
  }
  .sidebar-head {
    padding: 12px max(12px, env(safe-area-inset-right)) 10px
      max(12px, env(safe-area-inset-left));
  }
  .desktop-my-jobs {
    display: none;
  }
  .mobile-my-jobs {
    display: flex;
  }
  .sidebar-list {
    flex: 1 1 0;
    height: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    padding: 8px max(8px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    touch-action: pan-y !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rx-routes > h2,
  .rx-routes > .section-sub {
    display: none;
  }
  .rx-routes {
    margin-top: 0;
  }
  .cards-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    padding: 2px 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .route-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .route-card.selected {
    scroll-snap-align: start;
  }
  .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 26px;
    margin: -6px 2px 4px;
    pointer-events: none;
  }
  .carousel-arrow {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: 24px;
    padding: 0 3px;
    border: 0;
    background: transparent;
    color: var(--yellow);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.9;
  }
  .carousel-arrow span[aria-hidden="true"] {
    font-size: 1.25rem;
    line-height: 1;
  }
  .carousel-arrow:hover,
  .carousel-arrow:focus-visible {
    opacity: 1;
    color: #ffe76a;
    outline: none;
  }
  .rx-map-section.grid-pinned {
    width: 100%;
    margin: 4px 0 18px;
  }
  .rx-map-section.grid-pinned > h2,
  .rx-map-section.grid-pinned > .section-sub {
    display: none;
  }
  .rx-map-section.grid-pinned .rx-map {
    height: clamp(300px, 48dvh, 480px);
  }
  html,
  body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .app {
    height: calc(100dvh - var(--header-h));
    min-height: 0;
    overflow: hidden;
  }
  .main-frame {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overscroll-behavior: none;
  }
  .rx-routes {
    flex: 0 0 48%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .rx-routes .cards-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding-bottom: 4px;
  }
  .rx-routes .route-card {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    gap: 4px;
    padding: 10px;
  }
  .rx-routes .card-type-row,
  .rx-routes .route-topline,
  .rx-routes .chips,
  .rx-routes .route-foot {
    flex: 0 0 auto;
    min-width: 0;
  }
  .rx-routes .route-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 2.7em;
    overflow: hidden;
  }
  .rx-routes .chips {
    max-height: none;
    flex-wrap: wrap;
    overflow: visible;
  }
  .rx-routes .route-foot {
    min-height: 30px;
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
    gap: 2px 6px;
  }
  .rx-routes .route-desc {
    flex: 1 1 auto;
    min-height: 0;
  }
  .rx-routes .card-match-btn {
    flex: 0 0 34px;
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    height: 34px;
    margin-top: 0;
    box-sizing: border-box;
  }
  .rx-routes .route-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
  }
  .rx-routes .route-foot {
    margin-top: auto;
  }
  .rx-routes .carousel-nav {
    flex: 0 0 26px;
    margin: -2px 2px 2px;
  }
  .rx-map-section,
  .rx-map-section.grid-pinned {
    flex: 1 1 0;
    min-height: 180px;
    width: 100%;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .rx-map-section .rx-map,
  .rx-map-section.grid-pinned .rx-map {
    flex: 1 1 auto;
    min-height: 150px;
    height: auto;
  }
  .rx-map-section .route-banner {
    flex: 0 0 auto;
    margin-bottom: 5px;
  }
  .rx-map-section .small-map-link {
    flex: 0 0 auto;
    margin-top: 4px;
  }
  .modal {
    top: var(--visual-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--visual-viewport-height, 100dvh);
    align-items: flex-end;
    justify-content: center;
    padding: max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }
  :is(#modal, .rx-modal),
  :is(#viaModal, .rx-viaModal) {
    align-items: flex-start;
  }
  .modal-card,
  .modal-card.narrow {
    width: 100%;
    max-width: 620px;
    max-height: calc(
      var(--visual-viewport-height, 100dvh) -
        max(16px, env(safe-area-inset-top)) -
        max(16px, env(safe-area-inset-bottom))
    );
    margin: 0;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .modal-card.route-wizard {
    width: min(100%, 460px);
    height: auto;
    max-height: calc(
      var(--visual-viewport-height, 100dvh) -
        max(16px, env(safe-area-inset-top)) -
        max(16px, env(safe-area-inset-bottom))
    );
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
  }
  .route-wizard :is(#routeForm, .rx-routeForm) {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .route-wizard .form-step {
    flex: 0 0 auto;
    min-height: 0;
    gap: 7px;
  }
  .route-wizard .form-step label {
    position: relative;
    gap: 4px;
  }
  .route-wizard .form-step,
  .route-wizard .form-step label,
  .route-wizard .wizard-note,
  .route-wizard .wizard-message {
    text-align: left;
    align-items: stretch;
  }
  .route-wizard .opt {
    display: none;
  }
  :is(#fNameLabelText, #fName, .rx-fNameLabelText, .rx-fName) {
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
  :is(#editViaBtn, .rx-editViaBtn) {
    display: none;
    align-self: flex-start;
    color: #ff5b5b;
    border-color: #ff5b5b;
    font-weight: 900;
    text-align: left;
  }
  :is(#editViaBtn, .rx-editViaBtn).route-ready {
    display: inline-flex;
    animation: waypoint-prompt-pulse 1.15s ease-in-out infinite;
  }
  :is(#editViaBtn, .rx-editViaBtn):hover,
  :is(#editViaBtn, .rx-editViaBtn):focus {
    color: #ff8080;
    border-color: #ff8080;
  }
  @keyframes waypoint-prompt-pulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 91, 91, 0.7);
    }
    55% {
      transform: scale(1.035);
      box-shadow: 0 0 0 7px rgba(255, 91, 91, 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(#editViaBtn, .rx-editViaBtn).route-ready {
      animation: none;
    }
  }
  :is(#submitBtn, .rx-submitBtn) {
    background: #4ade80;
    border-color: #4ade80;
    color: #050805;
    font-weight: 1000;
  }
  :is(#submitBtn, .rx-submitBtn):hover,
  :is(#submitBtn, .rx-submitBtn):focus {
    background: #6ee79a;
    border-color: #6ee79a;
    color: #050805;
  }
  .route-wizard .wizard-note {
    line-height: 1.3;
  }
  .route-wizard textarea {
    min-height: 72px;
    max-height: 104px;
    resize: none;
  }
  .route-wizard .wizard-message {
    min-height: 0;
    margin-top: 4px;
  }
  .route-wizard .wizard-actions {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 0;
    justify-content: flex-start;
  }
  .route-wizard .wizard-actions .btn {
    min-width: 0;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
  }
  .route-wizard .modal-head {
    gap: 5px;
    align-items: center;
  }
  .route-wizard-title {
    gap: 5px;
    flex: 0 1 auto;
  }
  .route-wizard-title h2 {
    font-size: clamp(0.9rem, 4vw, 1.15rem);
  }
  .route-wizard .wizard-progress {
    font-size: 0.62rem;
  }
  .route-wizard .icon-btn {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }
  .modal-card:not(.message-card) .modal-head {
    top: -12px;
    margin: -12px -12px 8px;
    padding: 10px 12px 8px;
  }
  .modal-card:not(.message-card) input,
  .modal-card:not(.message-card) select,
  .modal-card:not(.message-card) textarea {
    padding: 8px 10px;
  }
  .modal-card:not(.message-card) .stack {
    gap: 8px;
  }
  .modal-card:not(.message-card) .stack label {
    gap: 3px;
  }
  .modal-card:not(.message-card) .tabs {
    margin-bottom: 9px;
  }
  .modal-card:not(.message-card) .forgot {
    margin-top: 9px;
  }
  .modal-card:not(.message-card) .modal-actions {
    margin-top: 10px;
    padding-top: 7px;
  }
  .modal-card:not(.message-card) .form-msg:empty {
    display: none;
  }
  .via-editor-card {
    height: auto;
    max-height: calc(
      var(--visual-viewport-height, 100dvh) -
        max(16px, env(safe-area-inset-top)) -
        max(16px, env(safe-area-inset-bottom))
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
  }
  .via-editor-card .via-help {
    margin-bottom: 7px;
  }
  .via-editor-card .via-match-note {
    margin-bottom: 7px;
    text-align: left;
  }
  .via-editor-card .via-route-chain {
    flex: 0 0 auto;
  }
  .via-editor-card .via-reorder-note {
    width: 100%;
    margin: 6px 0 0;
    color: #f5a623;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.35;
    text-align: left;
  }
  .via-editor-card .via-single-editor {
    flex: 0 0 auto;
  }
  .via-editor-card .via-route-chain,
  .via-editor-card .via-single-editor,
  .via-editor-card .via-editor-msg {
    width: 100%;
    text-align: left;
  }
  .via-editor-card .via-chain-chip {
    text-align: left;
  }
  .via-editor-card .via-editor-msg {
    min-height: 16px;
    margin-top: 5px;
  }
  .via-editor-card .modal-actions {
    position: static;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .modal-head {
    position: sticky;
    top: -12px;
    z-index: 2;
    margin: -12px -12px 8px;
    padding: 10px 12px 8px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  :is(#fName, .rx-fName):-webkit-autofill,
  :is(#fName, .rx-fName):-webkit-autofill:hover,
  :is(#fName, .rx-fName):-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #0f141a inset !important;
    box-shadow: 0 0 0 1000px #0f141a inset !important;
  }
  body :is(#viaModal, .rx-viaModal) .via-editor-card .modal-head {
    position: static;
    top: auto;
    z-index: auto;
    margin: 0 0 6px;
    padding: 0 0 6px;
    background: transparent;
    border-bottom: 1px solid var(--border);
  }
  body :is(#viaModal, .rx-viaModal) .via-editor-card .modal-head h2 {
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
  }
  body :is(#viaModal, .rx-viaModal) .via-editor-card .modal-head .icon-btn {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--panel);
    padding-top: 12px;
  }
  :is(#loginModal, .rx-loginModal) .modal-card {
    max-width: 420px;
  }
  :is(#loginModal, .rx-loginModal) .stack {
    gap: 10px;
  }
  :is(#loginModal, .rx-loginModal) .tabs {
    margin-bottom: 10px;
  }
  :is(#loginModal, .rx-loginModal) .forgot {
    margin-top: 10px;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
}
.detail-panel.last-day {
  background: linear-gradient(180deg, #5c500f 0%, #29240d 65%);
  border-color: #f1c40f;
  border-left-color: #f1c40f;
}
.card-corner .star-btn {
  position: static;
  flex: none;
}

@media (max-width: 380px) {
  :root {
    --header-h: 120px;
  }
  .site-header {
    grid-template-columns: minmax(82px, 1fr) minmax(116px, 1.25fr) minmax(
        62px,
        0.8fr
      );
    grid-template-rows: 72px 46px;
    padding-left: max(5px, env(safe-area-inset-left));
    padding-right: max(5px, env(safe-area-inset-right));
  }
  .site-header::after {
    bottom: 44px;
  }
  .logo {
    left: 42vw;
    top: max(31px, calc(env(safe-area-inset-top) + 27px));
    height: 42px;
  }
  .logo-img {
    height: 42px;
  }
  .header-job-actions {
    gap: 2px;
  }
  .header-job-actions .btn {
    padding: 4px 2px;
    font-size: 0.61rem;
  }
  #loginBtn {
    min-height: 34px;
    padding: 5px;
    font-size: 0.76rem;
  }
  .user-name {
    max-width: 34vw;
    font-size: 0.72rem;
  }
  .site-header.has-unread .logo {
    transform: none;
  }
  .route-card {
    padding: 12px;
  }
  .card-corner {
    max-width: 52%;
  }
  .card-owner {
    max-width: 98px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0.7rem;
  }
  .job-item {
    min-height: 88px;
    padding: 8px 9px;
  }
  .job-item::before {
    display: none;
  }
  .job-card-top {
    margin: -8px -9px 1px;
    padding: 6px 7px 6px 9px;
  }
  .job-card-top .ji-route {
    font-size: 0.76rem;
  }
  .job-card-subtitle {
    font-size: 0.58rem;
  }
  .job-card-owner {
    max-width: 72px;
    font-size: 0.54rem;
    padding: 2px 6px;
  }
  .ji-route {
    padding-right: 104px;
  }
  .job-row-owner {
    max-width: 94px;
  }
  .modal-card,
  .modal-card.narrow {
    padding: 10px;
  }
  .modal-head,
  .modal-card:not(.message-card) .modal-head {
    top: -10px;
    margin: -10px -10px 7px;
    padding: 9px 10px 7px;
  }
}

.small-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 32px;
  margin: 8px auto 0;
  padding: 5px 11px;
  border: 1px solid var(--yellow);
  border-radius: 8px;
  background: #11171d;
  color: var(--yellow);
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
  line-height: 1.1;
}
.small-route-modal {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: #080c10;
  padding: 0;
}

/* Blocked users opens from Messages, so it must sit above it. */
:is(#blockedModal, .rx-blockedModal) {
  z-index: 9800;
}
.small-route-shell {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  background: #0e1216;
}
.small-route-card {
  flex: 0 0 auto;
  width: 100%;
  max-height: 42dvh;
  min-height: 0;
  overflow: hidden;
}
.small-route-card .route-card {
  width: 100%;
  max-width: none;
  max-height: 42dvh;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.small-route-card .card-match-btn {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}
.small-route-banner {
  flex: 0 0 auto;
  margin: 7px 0;
}
.small-route-map {
  flex: 1 1 auto;
  min-height: 180px;
  border: 1px solid var(--yellow);
  border-radius: 11px;
  overflow: hidden;
}
.small-route-footer {
  flex: 0 0 auto;
  padding: 3px 0 1px;
  text-align: center;
}
body.small-route-open {
  overflow: hidden !important;
  touch-action: none;
}
body.small-route-open .small-route-map {
  touch-action: auto;
}

body.small-route-open .bdc-scroll {
  touch-action: pan-y;
}

/* Rich mobile "Driver Trip" card inside the locked .small-route-card box (see above).
   .small-route-card itself keeps its existing max-height/overflow untouched — only
   .bdc-scroll inside .big-driver-card scrolls, so the popup footprint never changes. */
.small-route-card .big-driver-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  background-color: #f8fafc;
  background-image: url("assets/job-card-driver-art.png");
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.45),
    0 16px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  color: #0f172a;
  box-sizing: border-box;
}

.big-driver-card .bdc-backdrop-frost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.65) 24%,
    rgba(248, 250, 252, 0.92) 50%,
    rgba(241, 245, 249, 0.98) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 0;
}

.small-route-card .bdc-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 12px 14px 20px;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 38, 38, 0.4) transparent;
}
.small-route-card .bdc-scroll::-webkit-scrollbar {
  width: 6px;
}
.small-route-card .bdc-scroll::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, 0.4);
  border-radius: 4px;
}

/* The card's frame is rounded (24px, minus its 2px border = 22px inside). The blurred backdrop and the scroll layer are full-size squares
   inside it, and their square corners showed past the rounded frame: give them the frame's inner radius. */
.big-driver-card .bdc-backdrop-frost,
.big-driver-card .bdc-scroll {
  border-radius: 22px;
}

/* Header row */
.big-driver-card .bdc-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: -12px -14px 12px;
  position: relative;
  z-index: 2;
}

.big-driver-card .bdc-trip-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #c41424 0%, #850b15 100%);
  padding: 8px 16px 8px 12px;
  border-radius: 22px 0 28px 0; /* top-left follows the card's inner corner */
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.45);
  color: #fff;
  flex-shrink: 0;
}
.big-driver-card .bdc-trip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.big-driver-card .bdc-trip-text {
  display: flex;
  flex-direction: column;
}
.big-driver-card .bdc-trip-title {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
}
.big-driver-card .bdc-trip-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  margin-top: 1px;
}

.big-driver-card .bdc-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 10px 0 0;
  min-width: 0;
}

.big-driver-card .bdc-slogan-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: rotate(-7deg);
  transform-origin: right center;
  pointer-events: none;
  margin-top: 2px;
}
.big-driver-card .bdc-slogan-text {
  font-family: "Brush Script MT", "Caveat", "Segoe Script", cursive, sans-serif;
  font-size: 0.92rem;
  line-height: 0.95;
  color: #1e293b;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  text-align: right;
  font-weight: 700;
}
.big-driver-card .bdc-slogan-stroke {
  margin-top: 2px;
  width: 56px;
  height: 6px;
}

.big-driver-card .bdc-top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.big-driver-card .bdc-top-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.big-driver-card .bdc-job-code {
  font-size: 0.82rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.03em;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.big-driver-card .bdc-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  border: none;
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  line-height: 1;
}
.big-driver-card .bdc-close-btn:hover {
  background: #b91c1c;
}
.big-driver-card .bdc-chevron-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

/* Hero route */
.big-driver-card .bdc-hero-route {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 12px;
  margin: 4px 0 12px;
  /* wrap, so the "via" line (a full-width row) drops below the two places instead of squeezing their names to "Bri…" */
  flex-wrap: wrap;
}
.big-driver-card .bdc-hero-point {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
.big-driver-card .bdc-hero-city {
  font-size: 1.55rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-driver-card .bdc-hero-state {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-driver-card .bdc-hero-arrow {
  font-size: 1.6rem;
  font-weight: 900;
  color: #dc2626;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -6px;
}

/* Quick meta row (4 pills) */
.big-driver-card .bdc-quick-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0 12px;
}
.big-driver-card .bdc-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.big-driver-card .bdc-meta-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #dc2626;
}
.big-driver-card .bdc-meta-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.big-driver-card .bdc-meta-label {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-driver-card .bdc-meta-val {
  font-size: 0.76rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Red Waypoint Timeline Bar */
.big-driver-card .bdc-timeline-wrap {
  position: relative;
  margin: 12px 4px 16px;
  padding-top: 4px;
}
.big-driver-card .bdc-timeline-line {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  height: 3px;
  background: #dc2626;
  z-index: 1;
  border-radius: 2px;
}
.big-driver-card .bdc-timeline-stops {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.big-driver-card .bdc-t-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 28px;
}
.big-driver-card .bdc-t-pin {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.big-driver-card .bdc-t-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #dc2626;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 5px 0 3px;
}
.big-driver-card .bdc-t-code {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  color: #0f172a;
  text-transform: uppercase;
}

/* 3 Spec Cards Grid */
.big-driver-card .bdc-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.28fr;
  gap: 6px;
  margin: 10px 0;
}
.big-driver-card .bdc-spec-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.big-driver-card .bdc-spec-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.big-driver-card .bdc-spec-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1e293b;
}
.big-driver-card .bdc-spec-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.big-driver-card .bdc-spec-label {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 500;
}
.big-driver-card .bdc-spec-val {
  font-size: 0.8rem;
  font-weight: 800;
  color: #0f172a;
}
.big-driver-card .bdc-spec-card--notes {
  gap: 5px;
}
.big-driver-card .bdc-notes-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.big-driver-card .bdc-notes-body {
  font-size: 0.72rem;
  color: #334155;
  line-height: 1.35;
  white-space: pre-line;
  word-break: break-word;
}

.big-driver-card .bdc-cargo-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: #334155;
  font-size: 0.72rem;
}
.big-driver-card .bdc-cargo-summary strong {
  color: #0f172a;
}
.big-driver-card .bdc-freight-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.big-driver-card .bdc-freight-gallery img {
  display: block;
  width: 100%;
  height: 116px;
  object-fit: cover;
  border-radius: 10px;
}
.freight-cargo-fields h3 {
  margin: 0 0 10px;
}
.freight-photo-upload {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.freight-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.freight-photo-chooser {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px dashed #6eaed8;
  border-radius: 10px;
  background: #eef8ff;
  color: #155e8c;
  font-weight: 750;
}
.freight-photo-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.freight-photo-preview {
  position: relative;
  width: min(22vw, 112px);
  min-width: 76px;
  aspect-ratio: 1;
}
.freight-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}
.freight-photo-preview button {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 3px 6px;
  background: #0f172acc;
  color: #fff;
  font-size: 0.72rem;
}
.freight-photo-message {
  color: #a33b1b;
}

/* Middle 2 Cards (Route Details & Posted By) */
.big-driver-card .bdc-info-strip {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6px;
  margin: 10px 0;
}
.big-driver-card .bdc-info-pill {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: left;
}
.big-driver-card .bdc-info-pill--route {
  cursor: pointer;
  position: relative;
}
.big-driver-card .bdc-info-pill-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.big-driver-card .bdc-info-pill-icon--red {
  background: #dc2626;
  color: #ffffff;
}
.big-driver-card .bdc-info-pill-icon--dark {
  background: #0f172a;
  color: #ffffff;
}
.big-driver-card .bdc-info-pill-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.big-driver-card .bdc-info-pill-title {
  font-size: 0.84rem;
  font-weight: 850;
  color: #0f172a;
}
.big-driver-card .bdc-info-pill-sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.big-driver-card .bdc-info-pill-meta {
  font-size: 0.64rem;
  color: #64748b;
  margin-top: 1px;
}
.big-driver-card .bdc-info-pill-arrow {
  font-size: 1.1rem;
  color: #64748b;
  font-weight: 800;
  flex-shrink: 0;
}
.big-driver-card .bdc-info-pill-label {
  font-size: 0.62rem;
  color: #64748b;
}
.big-driver-card .bdc-owner-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.big-driver-card .bdc-owner-name {
  font-size: 0.86rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-driver-card .bdc-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #d1fae5;
  color: #047857;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

/* Action Buttons */
.big-driver-card .bdc-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 12px 0 10px;
}
.big-driver-card .bdc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  text-align: left;
  min-width: 0;
}
.big-driver-card .bdc-btn:hover {
  transform: translateY(-1px);
}
.big-driver-card .bdc-btn:active {
  transform: translateY(1px);
}
.big-driver-card .bdc-btn-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.big-driver-card .bdc-btn-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.big-driver-card .bdc-btn-title {
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-driver-card .bdc-btn-sub {
  font-size: 0.64rem;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-driver-card .bdc-btn--message {
  background: linear-gradient(180deg, #c81d2a 0%, #9e121d 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.big-driver-card .bdc-btn--message .bdc-btn-sub {
  color: rgba(255, 255, 255, 0.85);
}
.big-driver-card .bdc-btn--offer {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.big-driver-card .bdc-btn--offer .bdc-btn-sub {
  color: rgba(255, 255, 255, 0.85);
}
.big-driver-card .bdc-btn--save {
  background: rgba(255, 255, 255, 0.8);
  color: #0f172a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.big-driver-card .bdc-btn--save .bdc-btn-sub {
  color: #64748b;
}

.big-driver-card .bdc-owner-actions {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
}
.big-driver-card .bdc-owner-actions .edit-btn,
.big-driver-card .bdc-owner-actions .del-btn {
  flex: 1 1 0;
  min-height: 36px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
}

/* Footer Stats Strip */
.big-driver-card .bdc-stats-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.big-driver-card .bdc-footer-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.big-driver-card [data-find-matches].bdc-footer-stat {
  cursor: pointer;
}
.big-driver-card .bdc-footer-stat-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.big-driver-card .bdc-footer-stat-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.big-driver-card .bdc-footer-stat-label {
  font-size: 0.64rem;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-driver-card .bdc-footer-stat-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  margin-top: 1px;
}
.big-driver-card .bdc-footer-stat-val--green {
  color: #059669;
}
.big-driver-card .bdc-footer-stat-val--date {
  font-size: 0.88rem;
  font-weight: 850;
}
.big-driver-card .bdc-footer-stat-sub {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scroll hint */
.small-route-card .big-driver-card .bdc-scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(241, 245, 249, 0.95)
  );
  border-radius: 0 0 24px 24px;
  z-index: 5;
}
.small-route-card .big-driver-card .bdc-scroll-hint-chevron {
  color: #dc2626;
  font-size: 1rem;
  animation: bdcScrollHintBounce 1.6s ease-in-out infinite;
}

/* Route details expand container */
.big-driver-card .bdc-route-details-expand {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.big-driver-card .bdc-route-details-expand ul {
  margin: 4px 0 6px 16px;
  padding: 0;
  font-size: 0.74rem;
  color: #334155;
}
.big-driver-card .bdc-route-details-expand .bdc-total-distance {
  font-size: 0.72rem;
  font-weight: 750;
  color: #0f172a;
}

@media (max-width: 340px) {
  .big-driver-card .bdc-specs-grid {
    grid-template-columns: 1fr 1fr;
  }
  .big-driver-card .bdc-spec-card--notes {
    grid-column: 1 / -1;
  }
  .big-driver-card .bdc-info-strip {
    grid-template-columns: 1fr;
  }
  .big-driver-card .bdc-action-buttons {
    grid-template-columns: 1fr;
  }
  .big-driver-card .bdc-quick-meta {
    grid-template-columns: 1fr 1fr;
  }
}
@keyframes bdcScrollHintBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* Full-screen multi-route map */
.full-map-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #080c10;
  padding: 0;
}
.full-map-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b1015;
}
:is(#fullMap, .rx-fullMap) {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.full-map-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 7000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #11171d;
  color: #fff;
  border: 2px solid var(--yellow);
  font-size: 1.15rem;
  pointer-events: auto;
}
.map-label-toggle {
  position: absolute !important;
  z-index: 5000;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #11171d;
  color: #fff;
  border: 2px solid var(--yellow);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  isolation: isolate;
}
.map-label-toggle input {
  display: block !important;
  appearance: auto !important;
  accent-color: var(--yellow);
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 1 !important;
  pointer-events: auto;
  cursor: pointer;
}
.special-map-type-filter {
  position: absolute;
  z-index: 5000;
  left: max(112px, calc(env(safe-area-inset-left) + 102px));
  bottom: max(12px, env(safe-area-inset-bottom));
  border: 2px solid var(--yellow);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
.full-map-modal.has-pinned .map-label-toggle,
.full-map-modal.has-pinned .special-map-type-filter {
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px));
}
.full-map-job-label {
  padding: 3px 7px;
  border-radius: 6px;
  background: #11171d;
  color: #fff;
  border: 1px solid var(--yellow);
  font-size: 0.7rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.38);
}
.full-map-job-label.freight {
  background: #1272a8;
  color: #fff;
  border-color: #fff;
}
.full-map-stack-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
}
.full-map-stack-label button {
  display: grid;
  width: 100%;
  max-width: min(250px, calc(100vw - 76px));
  padding: 4px 7px;
  border: 0;
  border-radius: 5px;
  background: #11171d;
  color: #fff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.full-map-stack-label button.freight {
  background: #1272a8;
  color: #fff;
}
.full-map-stack-label .stack-person,
.full-map-stack-label .stack-route {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.full-map-stack-label .stack-route {
  font-size: 0.64rem;
  font-weight: 700;
  opacity: 0.9;
}
.full-map-stack-icon {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #11171d;
  color: #fff;
  border: 2px solid var(--yellow);
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.full-map-modal .leaflet-tooltip {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.full-map-modal .leaflet-tooltip:before {
  display: none;
}
.special-start-user-tooltip {
  width: max-content;
  max-width: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  white-space: nowrap;
}
.special-start-user-tooltip .special-start-user-label,
.special-start-user-label {
  display: inline-block;
  width: max-content;
  max-width: none;
  padding: 2px 5px;
  border-radius: 3px;
  background: #050505;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.map-preview-wrap {
  position: absolute;
  z-index: 6000;
  left: max(10px, env(safe-area-inset-left));
  top: max(10px, env(safe-area-inset-top));
  width: min(430px, calc(100vw - 74px));
  max-height: calc(100dvh - 150px);
  overflow: auto;
}
.map-preview-wrap.compact {
  width: min(215px, calc(100vw - 74px));
  max-height: none;
  overflow: visible;
}
.map-mini-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 6px;
  align-items: center;
  min-height: 118px;
  padding: 6px 7px;
  border-radius: 8px;
  background: #11171d;
  border: 1px solid var(--yellow);
  border-left: 4px solid var(--yellow);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.map-mini-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 34%;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.38;
  mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 36%,
    #000 100%
  );
}
.map-mini-card.driver::before {
  background-image:
    linear-gradient(180deg, rgba(190, 12, 26, 0.08), rgba(7, 12, 19, 0.76)),
    url("assets/job-card-driver-art.png");
}
.map-mini-card.freight::before {
  background-image:
    linear-gradient(180deg, rgba(8, 31, 53, 0.08), rgba(7, 18, 28, 0.76)),
    url("assets/job-card-freight-art.png");
}
.map-mini-card.idle::before {
  background-image:
    linear-gradient(180deg, rgba(12, 63, 43, 0.08), rgba(7, 23, 20, 0.76)),
    url("assets/job-card-idle-driver-art.png");
}
.map-mini-top {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  min-width: 0;
}
.map-mini-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.map-mini-subtitle {
  font-size: 0.58rem;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.84);
}
.map-mini-id {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.56rem;
  font-weight: 900;
}
.map-mini-card.freight {
  background: linear-gradient(180deg, #14324a 0%, #0e2233 100%);
  color: #fff;
  border-color: #268bc5;
  border-left-color: #268bc5;
}
.map-mini-card.last-day.driver {
  border-color: #ffa02e;
  border-left-color: #ff8c1a;
  background: linear-gradient(145deg, #6f3106 0%, #291304 100%);
}
.map-mini-card.last-day.freight {
  border-color: #ff5a5a;
  border-left-color: var(--red);
  background: linear-gradient(145deg, #4b111b 0%, #230b10 100%);
}
.map-mini-name {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-mini-status {
  justify-self: start;
  color: var(--yellow);
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
}
.map-mini-card.freight .map-mini-status {
  color: #55b9ef;
}
.map-mini-card.idle .map-mini-status {
  color: #69f0ae;
}
.map-mini-date {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-mini-route {
  max-width: 100%;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0.02em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.map-mini-card.freight .map-mini-route {
  background: #0d1e2c;
  color: #fff;
}
.map-mini-card .pin-btn {
  grid-column: 2;
  grid-row: 1/5;
  width: auto !important;
  min-width: 48px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.62rem;
}
.pin-btn {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  background: #11171d;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 8px;
  padding: 7px 9px;
  font-weight: 900;
  cursor: pointer;
}
.pin-btn.pinned {
  background: var(--yellow);
  color: #11171d;
}
.map-preview-wrap .route-card {
  cursor: default;
  max-height: calc(100dvh - 170px);
  overflow: auto;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
}
.map-preview-wrap .route-card > .pin-btn {
  position: static;
  inset: auto;
  grid-column: auto;
  grid-row: auto;
  align-self: flex-end;
  margin-top: 2px;
  flex: none;
}
.pinned-map-strip {
  position: absolute;
  z-index: 850;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px max(8px, env(safe-area-inset-right))
    calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(8, 12, 16, 0.96);
  border-top: 1px solid #33404a;
  overscroll-behavior: contain;
}
.pinned-map-card {
  flex: 0 0 min(220px, 72vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 6px;
  padding: 8px 9px;
  border-radius: 9px;
  background: #11171d;
  border: 1px solid var(--yellow);
  color: #fff;
  cursor: pointer;
}
.pinned-map-card.freight {
  background: linear-gradient(180deg, #14324a 0%, #0e2233 100%);
  color: #fff;
  border-color: #fff;
}
.pinned-map-card.job {
  background: linear-gradient(180deg, #fff9d6 0%, #fff0a0 100%);
  color: #241d00;
  border-color: #e0b400;
}
.pinned-map-card strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinned-map-card small {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 5px;
  background: #26313a;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pinned-map-card.freight small {
  background: #0d1e2c;
  color: #fff;
}
.pinned-map-card.job small {
  background: #e8b900;
  color: #241d00;
}
.pinned-map-card .pin-btn {
  grid-column: 2;
  grid-row: 1/3;
  padding: 5px 7px;
}
.full-map-waypoint-label {
  padding: 2px 6px;
  border-radius: 5px;
  background: #ee2222;
  color: #fff;
  border: 1px solid #fff;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
}
.full-map-waypoint-label.freight {
  background: #1272a8;
}
.full-map-finish {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: #ee2222;
  color: #fff;
  border: 2px solid #fff;
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}
.full-map-finish.freight {
  background: #268bc5;
}
.map-pin-message {
  position: absolute;
  z-index: 880;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: #11171d;
  color: #fff;
  border: 1px solid var(--yellow);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.full-map-modal .leaflet-top.leaflet-left {
  top: auto;
  bottom: 12px;
  left: auto;
  right: 10px;
}
.full-map-modal .leaflet-top.leaflet-left .leaflet-control {
  margin-left: 0;
  margin-right: 0;
}
.full-map-modal.has-pinned .leaflet-top.leaflet-left {
  bottom: 92px;
}
.full-map-modal.has-pinned .leaflet-bottom {
  bottom: 78px;
}
body.full-map-open {
  overflow: hidden !important;
  touch-action: none;
}
@media (max-width: 768px) {
  .map-preview-wrap {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    width: calc(100vw - 68px);
    max-height: calc(var(--visual-viewport-height, 100dvh) - 118px);
  }
  .full-map-modal.has-pinned .map-preview-wrap {
    max-height: calc(var(--visual-viewport-height, 100dvh) - 150px);
  }
  .map-preview-wrap .route-card {
    max-height: calc(var(--visual-viewport-height, 100dvh) - 130px);
    padding: 11px;
  }
  .full-map-modal.has-pinned .map-preview-wrap .route-card {
    max-height: calc(var(--visual-viewport-height, 100dvh) - 162px);
  }
  .full-map-close {
    width: 38px;
    height: 38px;
  }
  .map-label-toggle {
    left: max(8px, env(safe-area-inset-left));
    min-height: 36px;
    padding: 5px 7px;
    font-size: 0.68rem;
  }
  .special-map-type-filter {
    left: max(91px, calc(env(safe-area-inset-left) + 83px));
    gap: 5px;
    padding: 5px 6px;
  }
  .special-map-type-filter label {
    gap: 3px;
    font-size: 0.65rem;
  }
  .special-map-type-filter input {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }
  .pinned-map-card {
    flex-basis: min(190px, 70vw);
  }
}
@media (max-width: 380px) {
  .map-preview-wrap.compact .map-mini-card {
    min-height: 88px;
  }
  .map-preview-wrap.compact .map-mini-card::before {
    display: none;
  }
  .map-preview-wrap.compact .map-mini-route {
    font-size: 0.68rem;
  }
}

@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --header-h: 96px;
  }
  .site-header {
    grid-template-rows: 50px 44px;
  }
  .site-header::after {
    bottom: 42px;
  }
  .logo {
    left: 38vw;
    right: 170px;
    top: 3px;
    height: 47px;
  }
  .logo-img {
    height: 47px;
  }
  .user-box {
    height: 44px;
  }
  .user-dropdown {
    top: 66px;
  }
}

/* Banner redesign holding state: keep account/member DOM and logic intact while hidden. */
.user-box,
.members-btn {
  display: none !important;
}

/* Keep the account area visible so the signed-in username can appear below Logout. */
.site-header .user-box {
  display: flex !important;
}

/* Mobile banner redesign: locked banner, fluid logo scale inside the fixed space. */
@media (max-width: 768px) {
  .site-header .desktop-action-menu {
    display: contents;
  }
  .site-header .desktop-map-globe {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 1520;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    cursor: pointer;
  }
  .site-header .desktop-map-globe img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .site-header .desktop-map-globe span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ee2222;
    font-size: 0.55rem;
    font-weight: 1000;
    letter-spacing: 0.04em;
    text-shadow:
      0 1px 2px #fff,
      0 0 3px #fff;
    pointer-events: none;
  }
  .site-header :is(#fullMapBtn, .rx-fullMapBtn) {
    display: none !important;
  }
  .site-header .logo {
    position: absolute;
    left: clamp(120px, 30vw, 156px);
    right: clamp(8px, 2.5vw, 16px);
    top: clamp(16px, 4.2vw, 24px);
    width: auto;
    height: clamp(42px, 12.5vw, 64px);
    max-width: none;
    background: none;
    justify-content: center;
    overflow: visible;
    transform: none !important;
    z-index: 2;
  }
  .creator-links {
    left: auto;
    right: clamp(8px, 2.5vw, 14px);
    bottom: 48px;
    max-width: calc(100vw - 24px);
    align-items: flex-end;
    text-align: right;
  }
  .creator-credit {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.48rem, 1.8vw, 0.62rem);
  }
}
@media (max-width: 380px) {
  .site-header .logo {
    left: 120px;
    right: 6px;
    height: clamp(38px, 12vw, 48px);
  }
}

/* Clean banner controls reuse the existing account, inbox and Jobs handlers. */
.members-btn,
.creator-links,
.header-tagline,
#userNameDisplay {
  display: none !important;
}
.site-header .user-box {
  position: static;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}
.site-header .user-menu-row {
  position: absolute;
  left: 14px;
  top: 8px;
  display: flex;
  align-items: center;
  z-index: 1510;
}
.site-header :is(#userMenuToggle, .rx-userMenuToggle) {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #10151a;
  color: #fff;
  font-size: 0;
  line-height: 1;
}
.site-header :is(#userMenuToggle, .rx-userMenuToggle)::before {
  content: "•••";
  font-size: 1rem;
  color: #fff;
  letter-spacing: 1px;
}
.site-header :is(#userMenuToggle, .rx-userMenuToggle) .user-menu-chevron {
  display: none;
}
.site-header :is(#userMenuToggle, .rx-userMenuToggle)[hidden] {
  display: none !important;
}
.site-header :is(#userUnreadBadge, .rx-userUnreadBadge) {
  position: absolute;
  left: 14px;
  top: 8px;
  z-index: 1520;
  display: block;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent center/contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  background-image: url("assets/mail-default.png");
}
.site-header :is(#userUnreadBadge, .rx-userUnreadBadge)[hidden] {
  display: none !important;
}
.site-header :is(#userUnreadBadge, .rx-userUnreadBadge)::before {
  content: none;
}
.site-header :is(#userUnreadBadge, .rx-userUnreadBadge).has-unread {
  background-image: url("assets/mail-unread.png");
}
.site-header :is(#userUnreadBadge, .rx-userUnreadBadge).has-unread::after {
  content: none;
  position: absolute;
  right: -4px;
  top: -4px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: #1a73e8;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.61rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
  animation: headerMailPulse 1.4s ease-in-out infinite;
}
@keyframes headerMailPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.75);
  }
  55% {
    box-shadow: 0 0 0 6px rgba(26, 115, 232, 0);
  }
}
.banner-auth {
  position: absolute;
  right: 16px;
  top: 8px;
  z-index: 1510;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 52px;
}
.banner-auth button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}
.banner-auth button:hover,
.banner-auth button:focus-visible {
  color: var(--yellow);
  text-decoration: underline;
}
.banner-auth-signup[hidden] {
  display: none !important;
}
.message-toast {
  position: fixed;
  right: 14px;
  top: calc(var(--header-h) + 10px);
  z-index: 5200;
  width: min(330px, calc(100vw - 28px));
  padding: 14px;
  background: #11171d;
  color: #fff;
  border: 1px solid var(--yellow);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.message-toast[hidden] {
  display: none !important;
}
.message-toast-close {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font:
    900 1.15rem/1 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  cursor: pointer;
}
.message-toast-close:hover,
.message-toast-close:focus-visible {
  color: var(--yellow);
}
.message-toast-title {
  padding-right: 26px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}
.message-toast-from {
  margin-top: 3px;
  font-size: 1rem;
  font-weight: 900;
}
.message-toast-preview {
  max-height: 110px;
  margin: 8px 0;
  overflow: auto;
  color: #e9edf1;
  font-size: 0.86rem;
  white-space: pre-wrap;
}
.message-toast textarea {
  width: 100%;
  resize: none;
  border: 1px solid #3a4652;
  border-radius: 3px;
  background: #0b1015;
  color: #fff;
  padding: 8px;
  font: inherit;
  font-size: 0.84rem;
}
.message-toast-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.message-toast-actions .btn {
  min-width: 0;
  padding: 7px 5px;
}
@media (min-width: 769px) {
  .site-header .logo-block {
    margin-left: 112px;
  }
}
@media (max-width: 768px) {
  .site-header .logo {
    left: clamp(64px, 20vw, 92px);
    right: 112px;
  }
  .site-header :is(#userUnreadBadge, .rx-userUnreadBadge) {
    left: max(8px, env(safe-area-inset-left));
    top: 8px;
  }
  .site-header .user-menu-row {
    left: max(58px, calc(env(safe-area-inset-left) + 58px));
    top: 8px;
  }
  .banner-auth {
    right: max(10px, env(safe-area-inset-right));
    top: 8px;
    min-width: 92px;
    max-width: 92px;
    gap: 6px;
  }
  .message-toast {
    right: max(8px, env(safe-area-inset-right));
    top: calc(var(--header-h) + 8px);
    width: calc(
      100vw - max(16px, env(safe-area-inset-left)) -
        max(16px, env(safe-area-inset-right))
    );
  }
}

/* ============================================================
   JOB OFFERS UI SCAFFOLD (Cline task — presentation only)
   Hidden and inactive until Codex connects the real offer logic.
   ============================================================ */

/* Background lock the offer popup will need. Codex toggles
   body.offer-background-lock when the popup is opened later. */
body.offer-background-lock {
  overflow: hidden !important;
  touch-action: none;
}

/* --- Offer panel presentation --- */
/* ============ Presentation classes for later Codex wiring (no JS state logic) ============ */
.offer-locked-target {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.18);
}
.offer-private-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  border: 1px solid #ff6b6b;
  font-size: 0.6rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.offer-status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #1c242c;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
}
.offer-status-new {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.offer-status-viewed {
  background: #1c242c;
  color: var(--muted);
  border-color: var(--border);
}
.offer-status-accepted {
  background: #0d2b1a;
  color: var(--green-accent);
  border-color: var(--green-accent);
}
.offer-status-declined {
  background: #3b1518;
  color: #ff9b9b;
  border-color: #7f252b;
}
.offer-status-withdrawn {
  background: #1c242c;
  color: var(--muted);
  border-color: var(--border);
  text-decoration: line-through;
}
.offer-status-expired {
  background: #4a1f04;
  color: #ffa02e;
  border-color: #ffa02e;
}
.offer-status-posted {
  background: #0d2b1a;
  color: #69f0ae;
  border-color: #69f0ae;
}
.offer-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 4px 4px;
  margin-top: 6px;
  border: 0;
  border-top: 1px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
  font-size: 0.66rem;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.offer-unread {
  border-left: 4px solid var(--red) !important;
  background: rgba(238, 34, 34, 0.08);
}
.offer-unread > .offer-list-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
  margin-left: auto;
}
.new-job-offer-label {
  display: none !important;
  position: relative;
  min-height: 22px;
  padding: 3px 9px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: job-offer-pulse 1.5s ease-in-out infinite;
}
.new-job-offer-label.visible {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
@keyframes job-offer-pulse {
  0%,
  45%,
  100% {
    box-shadow: 0 0 0 0 rgba(238, 34, 34, 0.45);
  }
  65% {
    box-shadow: 0 0 0 6px rgba(238, 34, 34, 0);
  }
}

/* Live Job Offers wiring. Kept separate from established card and messaging layouts. */
.my-jobs-offer-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.offer-link {
  border: 1px solid var(--yellow);
  border-radius: 7px;
  background: #171c21;
  color: var(--yellow);
  padding: 5px 9px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 1000;
  cursor: pointer;
}
.offer-link:hover {
  background: var(--yellow);
  color: #161616;
}
.private-offer-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.private-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.private-offer-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 900;
}
.private-offer-form input,
.private-offer-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.offer-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offer-list-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #10161c;
  overflow: hidden;
}
.offer-list-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.offer-list-summary strong {
  flex: 1;
}
.offer-list-summary time {
  color: var(--muted);
  font-size: 0.65rem;
}
.offer-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.offer-card-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.offer-card-pair .route-card {
  min-width: 0;
}
.offer-detail-map {
  height: 240px;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.offer-conversation {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offer-message {
  align-self: flex-start;
  max-width: 80%;
  padding: 8px;
  border-radius: 9px;
  background: #252d35;
}
.offer-message.mine {
  align-self: flex-end;
  background: #493f08;
}
.offer-message p {
  margin: 0;
  white-space: pre-wrap;
}
.offer-message time {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.6rem;
}
.offer-reply-form {
  display: flex;
  gap: 8px;
}
.offer-reply-form textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
}
.offer-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 768px) {
  .my-jobs-offer-wrap {
    gap: 1px;
  }
  .private-offer-grid,
  .offer-card-pair {
    grid-template-columns: 1fr;
  }
  .offer-list-summary {
    flex-wrap: wrap;
  }
  .offer-list-summary strong {
    flex-basis: 100%;
  }
  .offer-detail-map {
    height: 200px;
  }
  .offer-reply-form {
    flex-direction: column;
  }
  .offer-link {
    min-height: 36px;
  }
}

/* --- Mobile offer popup: side-by-side comparison, visual-viewport + safe-area aware --- */

/* ============================================================
   BETA 0.5.5 — mobile job-card and job-offer layout fixes.
   Mobile-only; desktop (>768px) unchanged.
   ============================================================ */
/* Reusable card header row: type label left, optional head actions right.
   Head actions only render on expanded cards (card-head-contact) and only
   show on mobile; on desktop the container stays hidden. */
.card-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.card-head-actions {
  display: none;
  flex: 0 0 auto;
  align-items: center;
}
@media (max-width: 768px) {
  /* Expanded card: Contact moves to the top-right beside DRIVER/FREIGHT.
     The footer copy is hidden so it never appears twice. */
  .route-card.card-head-contact .card-head-actions {
    display: inline-flex;
  }
  .route-card.card-head-contact .foot-actions .contact-link {
    display: none;
  }
  .card-head-actions .contact-link {
    font-size: 0.72rem;
  }

  /* Footer actions fit inside the card; Offer Job / Apply never clip. */
  .foot-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
  }
  .offer-link {
    min-height: 30px;
    padding: 3px 8px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .rx-routes .route-foot .offer-link {
    flex: 0 0 auto;
  }
  .rx-routes .chip.date {
    white-space: normal;
  }

  /* Expanded small-route card: no nested scrollbar; desc clamps. */
  .small-route-card {
    flex: 0 0 auto;
    width: 100%;
    max-height: 46dvh;
    min-height: 0;
    overflow: hidden;
  }
  .small-route-card .route-card {
    width: 100%;
    max-width: none;
    max-height: none;
    min-width: 0;
    overflow: hidden;
  }
  .small-route-card .route-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
  }
  .small-route-card .chips {
    flex-wrap: wrap;
  }
  .small-route-card .route-foot {
    flex-wrap: wrap;
    gap: 2px;
  }
  .small-route-map {
    flex: 1 1 auto;
    min-height: 160px;
  }
  .small-route-banner {
    flex: 0 0 auto;
    margin: 6px 0;
  }

  /* Full-map preview card: no nested scrollbar on mobile. */
  .map-preview-wrap .route-card {
    overflow: hidden;
  }

  .map-preview-wrap .route-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* ============================================================
   BETA 0.5.6 — My Jobs offer detail mode + Apply/Offer popup.
   ============================================================ */

  .myjobs-offer-detail-view {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    overflow: visible;
    touch-action: pan-y;
  }
  .offer-back-btn {
    align-self: flex-start;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  /* Scroll lock while any mobile job card is expanded. */
  body.mobile-job-card-expanded {
    overflow: hidden !important;
    touch-action: none;
  }
  body.mobile-job-card-expanded .main-frame {
    overflow: hidden !important;
  }
}

/* ============================================================
   BETA 0.5.7 — compatibility, filters, offer counters, Contact.
   ============================================================ */

/* Contact at top-right of every public card that offers Apply/Offer Job. */
.card-head-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
.card-head-actions .contact-link {
  font-size: 0.72rem;
  white-space: nowrap;
}
.route-card.card-head-contact .foot-actions .contact-link {
  display: none;
}

/* Green offer-count badge on Apply / Offer Job buttons. */
.offer-link {
  position: relative;
}
.offer-count-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #2e7d32;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 1000;
  line-height: 1;
  border: 1px solid #4caf50;
  pointer-events: none;
}

/* Compatible-job filters (buttons with aria-pressed). */
.job-offer-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.job-offer-filter {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.job-offer-filter.active {
  background: var(--yellow);
  color: #14181c;
  border-color: var(--yellow);
}
.job-offer-filter .offer-filter-count {
  font-weight: 1000;
}

@media (max-width: 768px) {
  .job-offer-filters {
    gap: 3px;
  }
  .job-offer-filter {
    padding: 3px 6px;
    font-size: 0.62rem;
    min-height: 28px;
  }
  .offer-compat-text {
    white-space: normal;
  }
}

/* ============================================================
   BETA 0.5.8 — expanded-card hierarchy + 2.5x logo.
   Scoped to expanded cards only; collapsed cards & All Jobs unchanged.
   ============================================================ */
:root {
  --card-pad: 14px;
  --card-gap: 10px;
  --card-action-gap: 8px;
}

/* Header: type far-left; Contact far-right; owner immediately below Contact. */
.route-card.is-expanded .card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.route-card.is-expanded .expanded-card-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
  max-width: 62%;
}
.route-card.is-expanded .expanded-card-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.route-card.is-expanded .expanded-card-top-actions > .contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #151b21;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
}
.route-card.is-expanded .expanded-card-top-actions > .contact-link:hover {
  color: #fff;
  border-color: #7a8793;
}
.route-card.is-expanded .expanded-card-identity > .card-owner {
  max-width: 100%;
}
.route-card.is-expanded .card-header .card-corner {
  max-width: 100%;
  min-width: 0;
}
.route-card.is-expanded .card-header .star-btn {
  position: static;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

/* Route: one complete location per line; words are never split in half. */
.route-card.is-expanded > .route-title,
.dp-route-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-right: 0;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}
.expanded-route-place {
  display: block;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}
.expanded-route-arrow {
  display: block;
  color: var(--red);
  font-size: 0.72em;
  line-height: 1;
  padding-left: 5px;
}

/* No duplicate Posted date. Expanded cards use one date/action/status line. */
.route-card .route-foot {
  justify-content: flex-end;
}
.route-card.is-expanded .route-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 10px;
  width: 100%;
}
.route-card.is-expanded .card-primary-date {
  box-sizing: border-box;
  grid-column: 1/-1;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  border-radius: 7px;
}
.route-card.is-expanded .foot-actions {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  gap: var(--card-action-gap);
  flex-wrap: wrap;
  justify-content: flex-start;
}
.route-card.is-expanded .route-foot > .last-day-badge {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
}
.route-card:not(.is-expanded) .route-foot > .last-day-badge {
  margin-left: auto;
}

/* Find Matches: compact menu-style utility, only as wide as its label. */
.route-card.is-expanded .card-match-btn {
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  margin-top: 8px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid var(--border);
  background: #151b21;
  color: #d4dae0;
}
.rx-routes .route-card.is-expanded .card-match-btn,
.small-route-card .route-card.is-expanded .card-match-btn {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  margin-top: 8px;
}
.rx-routes .route-card.is-expanded > .route-title {
  display: flex;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.route-card.is-expanded .card-match-btn:hover {
  color: #fff;
  border-color: #7a8793;
  background: #202830;
}
.route-card.is-expanded .card-match-btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Accepted jobs stay visible as records but cannot be opened or reused. */
.route-card.job-unavailable,
.job-item.job-unavailable {
  position: relative;
  isolation: isolate;
  filter: grayscale(1);
  background: #34383d !important;
  border-color: #777 !important;
  color: #c7c7c7 !important;
  cursor: default !important;
  pointer-events: none;
}
.route-card.job-unavailable > *:not(.job-unavailable-overlay),
.job-item.job-unavailable > *:not(.job-unavailable-overlay) {
  opacity: 0.28;
}
.job-unavailable-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px;
  background: rgba(45, 48, 52, 0.62);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 5px #000;
}
.job-unavailable-overlay strong {
  max-width: 100%;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.job-unavailable-overlay small {
  color: #6ee784;
  font-size: clamp(0.68rem, 2.3vw, 0.92rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px #000;
}

/* Containment. */
.route-card.is-expanded,
.route-card.is-expanded .card-header,
.route-card.is-expanded .route-title,
.route-card.is-expanded .chips,
.route-card.is-expanded .route-desc,
.route-card.is-expanded .route-foot {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/* The separate All Jobs expanded detail follows the same hierarchy. */
.detail-panel .dp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.detail-panel .dp-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
  max-width: 58%;
}
.detail-panel .dp-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.detail-panel .dp-top-actions .star-btn {
  position: static;
  flex: none;
}
.detail-panel .dp-top-actions .contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #151b21;
  color: var(--text);
  text-decoration: none;
}
.detail-panel .dp-owner {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-panel .dp-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 10px;
}
.detail-panel .card-primary-date {
  box-sizing: border-box;
  grid-column: 1/-1;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  border-radius: 7px;
}
.detail-panel .dp-foot-actions {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.detail-panel .dp-foot > .last-day-badge {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

@media (max-width: 520px) {
  .route-card.is-expanded .route-foot,
  .detail-panel .dp-foot {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .route-card.is-expanded .route-foot > .last-day-badge,
  .detail-panel .dp-foot > .last-day-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .route-card.is-expanded .card-primary-date,
  .detail-panel .card-primary-date {
    font-size: 0.68rem;
    padding-inline: 7px;
  }
}

/* ============================================================
   STANDALONE TESTING-GROUND FORMS
   Trip/Freight retain the existing #routeForm controls and behaviour. Idle is
   deliberately local-only until the evolution transfer.
   ============================================================ */
.standalone-form-modal {
  z-index: 9800;
  padding: 20px;
  overflow: auto;
  background: rgba(2, 10, 17, 0.82);
}
.standalone-route-form {
  width: min(860px, 100%);
  max-width: 860px !important;
  max-height: none !important;
  padding: 26px 30px 30px !important;
  border: 2px solid #496d86 !important;
  border-radius: 28px !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 246, 247, 0.7) 0%,
      rgba(248, 233, 235, 0.7) 100%
    ),
    url("popup%20background.png") center/cover no-repeat !important;
  color: #10223a !important;
  box-shadow:
    0 24px 76px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(71, 178, 239, 0.13) !important;
}
.standalone-route-form[data-form-mode="freight"] {
  border-color: #178ae6 !important;
  background:
    linear-gradient(
      135deg,
      rgba(245, 251, 255, 0.7) 0%,
      rgba(220, 239, 255, 0.7) 100%
    ),
    url("popup%20background.png") center/cover no-repeat !important;
}
.idle-standalone-form {
  border-color: #28b97c !important;
  background:
    linear-gradient(
      135deg,
      rgba(245, 255, 248, 0.7) 0%,
      rgba(225, 248, 235, 0.7) 100%
    ),
    url("popup%20background.png") center/cover no-repeat !important;
}
.standalone-route-form .modal-head {
  position: relative;
  top: auto;
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid rgba(19, 51, 78, 0.16);
  align-items: flex-start;
  background: transparent !important;
}
.standalone-route-form .route-wizard-title {
  display: block;
  min-width: 0;
}
.standalone-route-form .route-wizard-title h2 {
  margin: 8px 0 2px;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1;
  color: #071a31;
  letter-spacing: -0.045em;
}
.standalone-form-subtitle {
  margin: 0;
  color: #253a55;
  font-size: 1.14rem;
  font-weight: 600;
}
.standalone-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d72948, #a50e2c);
  color: white;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.standalone-route-form[data-form-mode="freight"] .standalone-type-badge {
  background: linear-gradient(135deg, #148ff2, #125ec7);
}
.idle-standalone-form .standalone-type-badge {
  background: linear-gradient(135deg, #0bb95f, #08743d);
}
.standalone-route-form .icon-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-color: #a9bdd0;
  background: rgba(255, 255, 255, 0.54);
  color: #10223a;
}
.standalone-route-form .wizard-actions {
  display: none;
}
.standalone-route-form :is(#routeForm, .rx-routeForm),
.idle-standalone-form form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.standalone-route-form .form-step {
  display: block !important;
  margin: 0 !important;
}
.standalone-route-form label,
.idle-standalone-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #0c2037;
  font-size: 0.94rem;
  font-weight: 900;
}
.standalone-route-form label b,
.idle-standalone-form label b {
  color: #e12842;
}
.standalone-route-form input,
.standalone-route-form select,
.standalone-route-form textarea,
.idle-standalone-form input,
.idle-standalone-form select,
.idle-standalone-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #b4c7da;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.68);
  color: #16304d;
  font: inherit;
  font-weight: 500;
  padding: 12px 14px;
  min-height: 48px;
  box-shadow: none;
}
.standalone-route-form textarea,
.idle-standalone-form textarea {
  min-height: 108px;
  resize: vertical;
}
.standalone-route-form input:focus,
.standalone-route-form select:focus,
.standalone-route-form textarea:focus,
.idle-standalone-form input:focus,
.idle-standalone-form select:focus,
.idle-standalone-form textarea:focus {
  outline: 3px solid rgba(16, 149, 238, 0.26);
  border-color: #148ff2;
}
.standalone-grid {
  display: grid;
  gap: 14px;
}
.standalone-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.standalone-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.standalone-route-form .location-input-row {
  display: flex;
}
.standalone-route-form .gps-btn,
.idle-standalone-form .gps-btn {
  align-self: flex-start;
  margin-top: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 9px;
  background: #152e49;
  color: white;
  border-color: #152e49;
  font-weight: 850;
}
.standalone-route-form :is(#editViaBtn, .rx-editViaBtn) {
  display: inline-flex !important;
  align-self: flex-start;
  margin-top: 8px;
  color: #173452;
  border-color: #7992aa;
  font-weight: 850;
}
.standalone-route-form .gps-status {
  color: #48647e;
}
.standalone-detail-section {
  margin: 2px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(19, 51, 78, 0.15);
}
.standalone-detail-section h3 {
  margin: 0 0 12px;
  color: #112945;
  font-size: 1.05rem;
}
.standalone-choice-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 14px;
  align-items: stretch;
}
.standalone-choice-row fieldset {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #b4c7da;
  border-radius: 11px;
}
.standalone-choice-row fieldset label,
.standalone-check {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.standalone-choice-row fieldset input,
.standalone-check input {
  width: 22px !important;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
}
.standalone-route-form .freight-only {
  display: none;
}
.standalone-route-form[data-form-mode="freight"] .freight-only {
  display: flex;
}
.standalone-route-form[data-form-mode="freight"] section.freight-only {
  display: block;
}
.standalone-route-form[data-form-mode="freight"] .driver-only {
  display: none;
}
.standalone-counter {
  display: block;
  text-align: right;
  color: #526b85;
  font-size: 0.78rem;
  font-weight: 800;
}
.standalone-route-form .expiry-note {
  padding: 10px 12px;
  border: 1px solid #b8d7ee;
  border-radius: 9px;
  background: #e2f2ff;
  color: #33658f;
  font-weight: 700;
}
.standalone-submit {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin-top: 4px;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e12a49, #bd1032) !important;
  color: white !important;
  font-size: 1.25rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em;
}
.standalone-route-form[data-form-mode="freight"] .standalone-submit {
  background: linear-gradient(135deg, #0797f6, #1065d8) !important;
}
.idle-standalone-form .standalone-submit {
  background: linear-gradient(135deg, #10bd61, #078b48) !important;
}
.standalone-route-form .location-input-row {
  align-items: center;
  gap: 7px;
}
.standalone-route-form .location-input-row input,
.idle-standalone-form .location-input-row input {
  min-width: 0;
  flex: 1;
}
.standalone-route-form .gps-icon-btn,
.idle-standalone-form .gps-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  background: #152e49;
  color: #fff;
  border-color: #152e49;
}
.standalone-route-form .gps-icon-btn:hover,
.standalone-route-form .gps-icon-btn:focus,
.idle-standalone-form .gps-icon-btn:hover,
.idle-standalone-form .gps-icon-btn:focus {
  background: #0d2033;
  border-color: #0d2033;
}
.standalone-route-form .gps-icon-btn.active {
  background: #b51f3a;
  border-color: #b51f3a;
}
.standalone-route-form label > .gps-status {
  margin-top: 2px;
}
.standalone-route-form[data-form-mode="freight"] .rx-fName::placeholder {
  color: #7a8794;
  opacity: 1;
}
.freight-requirements-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-items: end;
  gap: 12px;
}
.freight-requirements-head h3 {
  margin: 0 0 12px;
}
.freight-inline-field,
.compact-two-digit-field {
  min-width: 0;
}
.freight-inline-field .rx-required-title,
.compact-two-digit-field .rx-required-title {
  white-space: nowrap;
}
.freight-inline-field :is(select, input),
.compact-two-digit-field :is(select, input) {
  width: 78px;
  min-width: 78px;
  padding-left: 8px;
  padding-right: 8px;
}
.freight-truck-choice {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #b4c7da;
  border-radius: 11px;
}
.freight-truck-choice legend {
  margin: 0;
  padding: 0;
}
.freight-radio-options {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex-wrap: wrap;
}
.freight-radio-options label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px !important;
  white-space: nowrap;
}
.freight-radio-options input {
  width: 22px !important;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
}
.freight-secondary-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .freight-requirements-head {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }
  .freight-requirements-head h3 {
    margin-bottom: 0;
  }
  .freight-inline-field :is(select, input),
  .compact-two-digit-field :is(select, input) {
    width: 100%;
    min-width: 0;
  }
  .freight-truck-choice {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .freight-radio-options {
    gap: 8px 12px;
  }
}
.rx-required-title {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1.2;
}
.rx-required-marker {
  color: #e12842;
  font-weight: 950;
}
.rx-via-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
.standalone-route-form .rx-via-control-row .rx-editViaBtn {
  margin-top: 0;
}
.rx-form-route-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 0;
  white-space: nowrap;
  scrollbar-width: thin;
}
.rx-form-route-hop {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.rx-form-route-arrow {
  margin: 0 5px;
  color: #526b85;
  font-weight: 900;
}
.rx-form-route-place {
  font-weight: 850;
}
.rx-form-route-place--endpoint {
  color: #111827;
}
.rx-form-route-place--waypoint {
  color: #176b3b;
}
.standalone-route-form input[type="date"] {
  color: #526b85 !important;
  color-scheme: light;
}
.standalone-route-form input[type="date"]::-webkit-datetime-edit,
.standalone-route-form input[type="date"]::-webkit-datetime-edit-day-field,
.standalone-route-form input[type="date"]::-webkit-datetime-edit-month-field,
.standalone-route-form input[type="date"]::-webkit-datetime-edit-year-field,
.standalone-route-form input[type="date"]::-webkit-datetime-edit-text {
  color: #526b85 !important;
}
.standalone-route-form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  filter: grayscale(1) contrast(0.75);
  cursor: pointer;
}
.idle-standalone-form {
  width: min(900px, 100%);
  max-width: 900px !important;
}
.idle-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}
.idle-calendar-nav button,
.idle-calendar-actions button {
  border: 1px solid #83c9a8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: #0f5b37;
  font: inherit;
  font-weight: 850;
  padding: 8px 12px;
  cursor: pointer;
}
.idle-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 8px;
  border: 1px solid #c2dfcf;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.44);
}
.idle-weekday {
  padding: 4px 0;
  color: #48705d;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}
.idle-day,
.idle-calendar-empty {
  min-height: 38px;
  border: 1px solid #d4e4db;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  color: #173e2a;
  font: inherit;
  cursor: pointer;
}
.idle-day.selected {
  background: #16bd65;
  color: white;
  border-color: #16bd65;
}
.idle-day:disabled {
  background: #e4ece7;
  color: #9aaba0;
  cursor: not-allowed;
}
.idle-selection-count {
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #d9f5e4;
  color: #08743d;
  font-weight: 850;
}
.idle-calendar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.idle-standalone-form .form-msg {
  min-height: 20px;
  font-weight: 800;
}
.idle-card-actions {
  margin-top: 12px;
  justify-content: flex-end;
}
.idle-card-actions .idle-delete-btn {
  border-color: #e3aeb2;
  color: #b0202b;
  background: rgba(255, 255, 255, 0.55);
}
@media (max-width: 768px) {
  .standalone-form-modal {
    padding: 0;
    align-items: stretch;
  }
  .standalone-route-form,
  .idle-standalone-form {
    width: 100%;
    height: var(--visual-viewport-height, 100dvh);
    max-height: none !important;
    overflow-y: auto;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .standalone-route-form .modal-head {
    position: sticky;
    top: -16px;
    z-index: 2;
    margin: 0 -14px 14px !important;
    padding: 16px 14px 12px !important;
    background: inherit !important;
  }
  .standalone-route-form .route-wizard-title h2 {
    font-size: clamp(1.65rem, 9vw, 2.35rem);
  }
  .standalone-form-subtitle {
    font-size: 0.94rem;
  }
  .standalone-type-badge {
    min-height: 31px;
    padding: 0 14px;
    font-size: 0.76rem;
  }
  .standalone-grid.two,
  .standalone-grid.three,
  .standalone-choice-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .standalone-route-form :is(#routeForm, .rx-routeForm),
  .idle-standalone-form form {
    gap: 11px;
  }
  .standalone-route-form input,
  .standalone-route-form select,
  .standalone-route-form textarea,
  .idle-standalone-form input,
  .idle-standalone-form select,
  .idle-standalone-form textarea {
    min-height: 44px;
    padding: 10px 11px;
  }
  .standalone-route-form textarea,
  .idle-standalone-form textarea {
    min-height: 92px;
  }
  .standalone-submit {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 56px;
    font-size: 1rem !important;
    box-shadow: 0 -7px 18px rgba(255, 246, 247, 0.85);
  }
  .idle-standalone-form .standalone-submit {
    box-shadow: 0 -7px 18px rgba(245, 255, 248, 0.9);
  }
  .idle-calendar-nav button {
    padding: 7px 8px;
    font-size: 0.76rem;
  }
  .idle-day {
    min-height: 34px;
  }
  .idle-calendar-actions {
    justify-content: stretch;
  }
  .idle-calendar-actions button {
    flex: 1;
    padding: 8px 5px;
    font-size: 0.78rem;
  }
}

@media (max-width: 768px) {
  .desktop-progress-note {
    display: none;
  }
  .user-dropdown .mobile-progress-note {
    display: block;
    margin: 5px 4px 2px;
    padding: 8px 6px 3px;
    border-top: 1px solid var(--border);
    font-size: 0.6rem;
    text-align: left;
  }
  .user-dropdown .mobile-progress-note a {
    display: inline;
    color: #69f0ae;
    font-weight: 800;
  }
}

/* Final desktop header sizing. Keep this value aligned with the earlier desktop
   header rule so the banner has one predictable height in the cascade. */
@media (min-width: 769px) {
  :root {
    --header-h: 72px;
  }
  .all-jobs-btn {
    display: none !important;
  }
  .header-job-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Legacy header only: React-v3 owns its mail position in ui/site-header.css. */
  .site-header:not(.rx-site-header) :is(#userUnreadBadge, .rx-userUnreadBadge) {
    left: 149px;
    top: 6px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    z-index: 1520;
  }
  .site-header .user-menu-row {
    left: 150px;
    top: 0;
  }
  .site-header .user-menu-row :is(#userMenuToggle, .rx-userMenuToggle) {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }
  .site-header .user-menu-row {
    left: 194px;
  }
  /* Envelope is the messages entry on desktop: always shown when logged in. The three-dot account circle stays only for admins (their route to Admin). */
  .site-header
    :is(#userUnreadBadge, .rx-userUnreadBadge)[hidden]:not([data-out]) {
    display: grid !important;
  }
  .site-header .user-box:not([data-admin]) .user-menu-row {
    display: none;
  }
  .site-header .user-dropdown {
    left: 150px;
    top: 46px;
  }
  .site-header .user-dropdown {
    left: 194px;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu {
    display: grid;
    grid-template-columns: auto 38px;
    gap: 10px;
    order: 0;
    position: relative;
    flex: none;
    align-items: center;
  }
  .site-header:not(.rx-site-header) .mobile-action-menu-toggle {
    display: none;
  }
  .site-header:not(.rx-site-header) .desktop-map-globe {
    display: grid;
    position: relative;
    order: 0;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
    place-items: center;
  }
  .site-header:not(.rx-site-header) .desktop-map-globe img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .site-header:not(.rx-site-header) .desktop-map-globe span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ee2222;
    font-size: 0.58rem;
    font-weight: 1000;
    letter-spacing: 0.04em;
    text-shadow:
      0 1px 2px #fff,
      0 0 3px #fff;
    pointer-events: none;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 7px 13px;
    border: 1px solid rgba(255, 211, 43, 0.5);
    border-radius: 999px;
    background: linear-gradient(
      135deg,
      rgba(12, 23, 35, 0.96),
      rgba(35, 44, 65, 0.92)
    );
    color: #f4edd8;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: pointer;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.13),
      0 4px 10px rgba(0, 0, 0, 0.25);
  }
  .site-header:not(.rx-site-header) .desktop-action-menu-toggle:hover,
  .site-header:not(.rx-site-header)
    .desktop-action-menu-toggle[aria-expanded="true"] {
    border-color: rgba(255, 222, 91, 0.85);
    background: linear-gradient(
      135deg,
      rgba(32, 43, 56, 0.98),
      rgba(61, 57, 47, 0.95)
    );
    color: #fff8d6;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu .post-actions {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 1600;
    display: none;
    grid-column: 1/-1;
    width: 247px;
    padding: 10px;
    border: 1px solid var(--yellow);
    border-radius: 9px;
    background: rgba(23, 25, 68, 0.94);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65);
  }
  .site-header:not(.rx-site-header) .desktop-action-menu.open .post-actions {
    display: block;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu .header-job-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .site-header:not(.rx-site-header)
    .desktop-action-menu
    .header-job-actions
    .btn,
  .site-header:not(.rx-site-header) .desktop-action-menu .my-jobs-offer-wrap {
    width: 100%;
  }
  .site-header:not(.rx-site-header)
    .desktop-action-menu
    .header-job-actions
    .btn {
    height: 38px;
    min-height: 38px;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu .my-jobs-offer-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .site-header:not(.rx-site-header)
    .desktop-action-menu
    .evolution-menu-placeholder {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .site-header .header-right {
    order: 1;
  }
  .site-header .header-right .account-actions {
    order: 1;
  }
  /* Legacy header only: React-v3 owns its restored truck masthead geometry. */
  .site-header:not(.rx-site-header) .header-left .logo-block {
    position: absolute;
    left: 50%;
    top: 4px;
    margin-left: 0;
    transform: translateX(-50%);
    z-index: 5;
  }
  .desktop-brand-strip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    height: 72px;
    overflow: visible;
  }
  .desktop-brand-side {
    display: none;
    width: auto;
    height: 72px;
    object-fit: contain;
  }
  .site-header:not(.rx-site-header) .logo-img {
    height: 64px;
    max-height: 72px;
  }
}

/* Live/main desktop job-card: anchored inside the map frame, directly below
   its banner and flush with the sidebar edge. */
@media (min-width: 769px) {
  body.my-jobs-map-mode :is(#detailWrap, .rx-detailWrap):not([hidden]) {
    position: absolute;
    z-index: 4;
    left: 0;
    right: auto;
    top: 23px;
    bottom: auto;
    width: 225px;
    max-height: calc(100% - 23px);
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel).board-detail-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 340px;
    min-height: 340px;
    max-height: 340px;
    flex: 0 0 340px;
    padding: 26px 10px 10px;
    gap: 6px;
    border-left-width: 3px;
    border-radius: 9px;
    font-size: 0.78rem;
    cursor: pointer;
    overflow: auto;
    pointer-events: auto;
    transition: none;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card:not(.expanded)
    .route-desc.full,
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card:not(.expanded)
    .dp-foot-actions {
    display: none;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.expanded {
    width: 100%;
    height: 340px;
    min-height: 340px;
    max-height: 340px;
    overflow: auto;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .job-type-label {
    padding: 2px 7px;
    font-size: 0.62rem;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-pin-btn {
    position: static;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--yellow);
    border-radius: 5px;
    background: #14181c;
    color: var(--yellow);
    cursor: pointer;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-pin-btn.active {
    background: var(--yellow);
    color: #14181c;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.expanded
    .dp-pin-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-pin-btn
    .pin-icon-svg {
    width: 12px;
    height: 12px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .route-title {
    font-size: 0.78rem;
    line-height: 1.25;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .chip {
    font-size: 0.62rem;
    line-height: 1.2;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-foot {
    font-size: 0.62rem;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.expanded
    .route-desc.full {
    display: block;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.expanded
    .dp-foot-actions {
    display: flex;
  }
  /* Sidebar selections use the original compact card anchored at the map's far edge. */
  body.menu-job-map-mode :is(#detailWrap, .rx-detailWrap):not([hidden]) {
    left: auto;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: 220px;
    max-height: 50%;
  }
  body.menu-job-map-mode :is(#detailPanel, .rx-detailPanel).board-detail-card {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 50%;
    padding: 8px;
    gap: 5px;
    font-size: 0.68rem;
    overflow: hidden;
  }
  body.menu-job-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.expanded {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 50%;
    overflow: auto;
  }
}

/* ============================================================
   JOB OFFER PANEL — redesign (2026-09-14).
   Everything here is scoped under #offerPanel / #offerConfirm, so the
   board, banner, the four permanent colour cards and rest-stops.css are
   untouched. No :root token is redefined; the palette below is the
   proposed site-wide direction, applied to this one surface first.
   ============================================================ */

/* One self-hosted SIL OFL display face. Falls back to a system heavy face if
   the file is unavailable, so the panel never depends on it to be legible. */
@font-face {
  font-family: "Offer Display";
  src: url("assets/fonts/offer-display.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* The offer palette. Three selectors, not one, and the third is load-bearing:
   .offer-drag-clone is appended to document.body (job-offers.js:841) as a SIBLING
   of #offerPanel, not a descendant, and custom properties only inherit down the
   tree -- so a clone would otherwise inherit NONE of these. That is not a cosmetic
   slip: `background:var(--op-card)` with an unset custom property and no fallback
   is invalid at computed-value time, so the dragged card's background falls back to
   transparent and the page shows straight through it, while `color:var(--op-card-ink)`
   falls back to inherit. The carried card went see-through the moment it left the
   panel. Listing the clone here rather than redeclaring the palette gives it the
   identical block by construction, so the two cannot drift. Do not "tidy" this back
   to #offerPanel,#offerConfirm. */
:is(#offerPanel, .rx-offerPanel),
:is(#offerConfirm, .rx-offerConfirm),
.offer-drag-clone {
  --op-panel: #111a24;
  --op-panel-2: #0c141c;
  --op-line: #26384a;
  --op-line-soft: #1c2a38;
  --op-ink: #eaf1f8;
  --op-ink-soft: #9db0c4;
  --op-blue: #1470c8;
  --op-blue-bright: #2f8fe0;
  --op-card: #f5f8fc;
  --op-card-ink: #0f1720;
  --op-card-soft: #5d6f80;
  --op-card-line: #d3dde8;
  --op-drv: #cf2f45;
  --op-drv-wash: #fdeef1;
  --op-frt: #1470c8;
  --op-frt-wash: #eaf3fd;
  --op-green: #14683a;
  --op-seg: #d7e0ea;
  --op-seg-unknown: #c2ccd8;
  --op-display:
    "Offer Display", "Archivo Black", "Arial Black", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

/* --- shell --- */
.offer-panel-modal {
  position: fixed;
  inset: 0;
  z-index: 9760;
  background: rgba(4, 9, 14, 0.74);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 12px;
  overflow: hidden;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  top: 0 !important;
  left: 0 !important;
}
.offer-panel-modal[hidden] {
  display: none;
}
.popup-viewport {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  max-width: none !important;
  max-height: none !important;
}
.popup-stage {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  flex: 1;
}
@media (max-width: 767px) {
  .offer-panel-modal {
    inset: 0;
    padding: 0;
    background: transparent;
    align-items: stretch;
    justify-content: stretch;
  }
  .popup-viewport {
    width: 100vw;
    height: 100vh;
  }
  .offer-panel-card {
    border-radius: 0;
    border: none;
  }
}
@media (min-width: 768px) {
  .offer-panel-modal {
    width: 50vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 24px !important;
  }
  .popup-viewport {
    width: 100% !important;
    height: 100% !important;
  }
}
.offer-panel-card {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform-origin: top left;
  box-sizing: border-box;
}
/* 784px is 40% wider than the previous 560px, per the owner. The contents are
   scaled down to compensate (see the compact block below), so the panel shows
   more but each card occupies less. */
/* The owner's popup background image (popup background.png, repo root). The URL is
   percent-encoded. The filename's space would be LEGAL here as written, because the
   value is quoted -- url("a b.png") is a valid string, and styles.css:1502 ships
   exactly that form today -- so the reason is NOT that the space breaks it now. It
   is that the raw-space form is one deleted pair of quotes away from being dropped
   whole: url(a b.png) is invalid, and an invalid background value takes the scrim
   down with it, silently, with no error anywhere. Percent-encoding is the form that
   stays valid either way.
   The gradient in front of the image is a SCRIM, not a look. Its job is to bound how
   light the panel's own background can get, because that bounds the legibility of
   everything sitting directly on the card body -- not on one of the four surfaces
   below, and with no background of its own. The load-bearing examples are:
   .offer-sec-title (#2f8fe0); the whole Match rating row -- .offer-rate-label
   (--op-ink-soft), .offer-rate-val (#fff) and .offer-rate-cap (#7f92a6); the person
   meta line and the Clear control (--op-ink-soft); #offerPanelMsg (--op-ink-soft);
   and .job-offer-empty, which sets background:transparent. It is NOT the footnote --
   .offer-note carries its own background. That list names examples, NOT the complete
   set: anything later added to the panel with no background of its own joins it, so
   this comment is a worked example of the check to run, not an inventory.
   The BINDING case is the worst row among the inks named above: .offer-sec-title's
   #2f8fe0, at 1.75:1 against the scrim's ceiling -- its LIGHTER top stop,
   rgba(22,34,46,.70), composited over a near-white region of the photo, giving
   #5c646d -- and 2.70:1 against the darker bottom stop, where .offer-rate-cap's
   #7f92a6 is better on both (1.88:1 and 2.90:1). Every one of those is under the
   4.5:1 small-text threshold.
   Those are ARITHMETIC over a pure-white assumption, not measurements of a render.
   The image itself was measured, at full resolution, and the honest summary is dark by
   AVERAGE but not by PEAK. Per-band mean luminance is 0.06-0.21. The fraction of pixels
   above L 0.45 is small in most bands -- 0.33, 0.39, 0.19, 0.01, 0.00, 0.04, 0.74, 7.63,
   1.23, 0.20 per cent from top to bottom -- and is genuinely zero in exactly ONE band
   (band 4), not in most of them: the handful above the line elsewhere are the thin
   glowing arcs down each edge. The two bands carrying the most bright pixels are
   adjacent, and sit low in the image: 70-80% down at 7.63%, and 80-90% down at 1.23%.
   Which panel rows those land behind depends on how center/cover crops for a given
   panel height -- a render question, not an arithmetic one -- but on a tall panel it is
   the lower rows, the Match rating row among them.
   The peaks are what decide it, and they are near-white wherever they occur: the
   brightest pixel in the image is #fffff0 (L .996, band 6) and band 7's is #fefcea
   (L .985). Under the bottom stop they put .offer-sec-title at 2.71:1 and 2.76:1 against
   the 2.70:1 computed above -- so the pure-white assumption was very nearly EXACT, not
   pessimistic. A representative dark band mean would flatter it; the peak is the right
   thing to tune against, and it says the bound is reached, not cleared. Which of the two
   sits behind a given glyph is a question about pixel adjacency that cannot be settled
   without rendering. Raise the two stops if a bright area of this image lands behind a
   heading; lower them if the photo reads too faintly. See guichange.md. */
.offer-panel-card {
  position: relative;
  width: min(94vw, 784px);
  max-height: calc(100dvh - 32px);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--op-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(22, 34, 46, 0.7), rgba(17, 26, 36, 0.8)),
    url("popup%20background.png") center/cover no-repeat;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  color: var(--op-ink);
  height: auto;
}

/* --- header --- */
/* The four surfaces the owner asked to be "20% transparent" -- read literally as
   80% opaque, so a fifth of the panel colour is knocked out and the popup background
   image tints through. color-mix rather than a hand-written rgba: the panel colour
   is a token (--op-panel) and a hard-coded rgba would drift the moment that token
   changed, leaving these four surfaces a slightly different colour from the panel
   they sit on. Each is one number to invert (80% -> 20%) if the reading was wrong. */
/* Sizing in collision prevention block (line 2693) for mobile fit */
.offer-panel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  background: color-mix(in srgb, var(--op-panel) 80%, transparent);
  border-bottom: 1px solid var(--op-line-soft);
}
.offer-panel-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(180deg, #1c7fd6, #0f5697);
  color: #fff;
}
.offer-panel-headtext {
  flex: 1;
  min-width: 0;
}
.offer-panel-headtext h2 {
  margin: 0;
  font-family: var(--op-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: #fff;
}
.offer-panel-headtext p {
  margin: 2px 0 0;
  font-size: 1.1rem;
  color: var(--op-ink-soft);
}
.offer-panel-close {
  flex: none;
}

/* --- scrolling body, fits all content without chaining to the page --- */
/* Sizing handled by collision prevention block below (line 2694+) */
.offer-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* --- sections --- */
.offer-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.offer-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.offer-sec-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--op-blue-bright);
}

/* --- the other party / you --- */
.offer-person {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.1rem;
  color: var(--op-ink-soft);
  min-width: 0;
}
.offer-person-name {
  font-weight: 850;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12ch;
}
.offer-person-meta {
  white-space: nowrap;
}
.offer-person-state {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(47, 143, 224, 0.16);
  border: 1px solid rgba(47, 143, 224, 0.42);
  color: #8cc6f7;
  font-size: 1rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
}

/* --- light cards (their card, your cards) --- */
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--op-card-line);
  border-radius: 13px;
  background: var(--op-card);
  color: var(--op-card-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.offer-card-driver {
  background: var(--op-drv-wash);
  border-color: #f0c3cc;
}
.offer-card-freight {
  background: var(--op-frt-wash);
  border-color: #bcdaf7;
}
.offer-target-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* --- the two card sections share one frame and one grid ------------------- */
/* Both the other user's cards and your cards sit in this frame, so the two
   sections are the same size and style by construction rather than by two sets
   of numbers agreeing. */
/* Covers BOTH frames -- the one around the other user's card and the one around the
   user's own cards -- which is the owner's "offer frame" and "own offer cards panel"
   as one rule, because they are the same class. */
.offer-frame {
  padding: 7px;
  border: 1px solid var(--op-line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--op-panel) 80%, transparent);
}
/* Two slot-width cells per row. This is deliberately the same track definition
   as .offer-slots, so a card in these sections is the same size as a card in an
   offer slot -- which is what "leave room if the other user has more cards"
   needs: the second cell is simply reserved. */
.offer-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
/* The reserved second cell. Same box as an empty offer slot so the frame reads
   as a matched pair, but it is decoration, not a target: no data, no focus, and
   hidden from assistive tech. */
.offer-cell-reserve {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 100px;
  padding: 14px;
  border: 2px dashed var(--op-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--op-panel) 80%, transparent);
  color: var(--op-ink-soft);
  text-align: center;
}
/* One selectable own-card. The card is a sibling of the button, not inside it:
   <button> takes phrasing content only and the card is an <article> full of
   <div>s and a <p>, so wrapping would be invalid markup. The button instead
   covers the whole cell. */
.offer-job-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* The picked card LIFTS OUT of the list and lives in the Trade slot instead, so
   it is hidden here rather than highlighted. `visibility` and not `display`: this
   cell is a grid item in a two-up list, and collapsing it would reflow every other
   card under the reader's finger the moment a drag began.
   This rule used to ring the card in blue. That cue has moved to the slot -- the
   place the card actually went -- so leaving a ring here would point at a card
   that is no longer visible. */
.offer-job-cell.offer-job-selected {
  visibility: hidden;
}
/* Same treatment for the other user's card once it is in a slot: it hides in the
   frame above and appears in the Trade pair. Their cover button is deliberately
   NOT hidden with it -- that button is what takes the card back, and it sits on a
   cell that now looks empty. */
.offer-other-placed .offer-card {
  visibility: hidden;
}
/* The card being carried. Fixed-position copy of the source card that follows the
   pointer for the whole gesture; the source itself is hidden meanwhile. Mirrors
   .inventory-drag-clone on the board, which is the behaviour the owner asked for:
   the card stays under the cursor or finger rather than the original sliding.
   THE Z-INDEX IS DELIBERATELY NOT THE BOARD'S 2600, and copying it was the bug.
   The board's clone is only ever on screen when no modal is open, so 2600 is ample
   there. This one is different: the panel it is dragged inside IS a modal
   (.offer-panel-modal, z-index 9600, further down) and the clone is appended to
   <body> -- a sibling of #offerPanel -- so the two are compared in the same
   stacking context and 2600 loses. The panel's full-viewport backdrop and its
   opaque card painted straight over the ghost, so the card did not appear to
   follow the finger at all: the one behaviour the owner asked for was invisible.
   9650 clears the panel (9600) and stays under :is(#confirmModal,.rx-confirmModal) (9800) and the route
   modals (9700), none of which can be on screen while a panel drag is running. */
.offer-drag-clone {
  position: fixed;
  z-index: 9650;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.62);
}
/* The source CELL, hidden for the duration of the drag -- the "the card that was
   picked up hides" half of the owner's request.
   THIS RULE IS THE ONE THAT DOES THE WORK DURING A DRAG, and it has to exist
   separately from the two `.offer-job-selected` / `.offer-other-placed` rules
   above, which hide a card because it is PLACED, not because it is LIFTED. Without
   it, two of the three drag sources stay visible while a clone follows the pointer,
   and the reader sees the card twice:
     - an own card that is not yet selected -- the ordinary "drag a card into the
       slot" gesture, where nothing is placed until the drop lands;
     - a card being dragged back OUT of a Trade slot, which carries neither class
       because it is the slot cell, not the list cell, that is being emptied.
   A single class on the CELL therefore covers all three sources. The cell and not
   the <article> inside it: the cell is what the grid lays out, and it carries the
   compatibility line as well as the card, so hiding the card alone would strand a
   "Good match" line under an empty space. `visibility` for the same reason as
   above: the cell is a grid item and must keep its box. */
.offer-cell-lifted {
  visibility: hidden;
}
/* A brief press confirms the card is picked up; a held press settles into a
   ready-to-drag cue before the existing movement threshold lifts its clone. */
.offer-job-cell .offer-card {
  transition:
    transform 150ms cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 180ms ease,
    filter 180ms ease;
}
.offer-cell-pressing .offer-card {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.97);
}
.offer-cell-hold-ready .offer-card {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.03);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  animation: offer-card-hold-ready 850ms ease-in-out infinite;
}
@keyframes offer-card-hold-ready {
  0%,
  100% {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow: 0 14px 27px rgba(20, 112, 200, 0.42);
  }
}
.offer-drag-clone {
  animation: offer-card-pickup 170ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes offer-card-pickup {
  from {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.025);
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-job-cell .offer-card {
    transition: none;
  }
  .offer-cell-pressing .offer-card,
  .offer-cell-hold-ready .offer-card {
    transform: none;
    filter: none;
    outline: 2px solid var(--op-blue-bright);
    outline-offset: 2px;
    animation: none;
  }
  .offer-drag-clone {
    animation: none;
  }
}
/* Held only while a card is in flight. touch-action:none takes the rest of the
   gesture away from the scroller now that the lift has already happened, so a
   finger that started sideways can keep moving vertically without the panel
   stealing the gesture back mid-drag. */
body.offer-dragging .offer-panel-body {
  touch-action: none;
}
body.offer-dragging {
  -webkit-user-select: none;
  user-select: none;
}
.offer-job-cell:focus-within .offer-card {
  outline: 2px solid var(--op-blue-bright);
  outline-offset: 2px;
}
.offer-job-cell:has(.offer-job-hit:disabled) {
  opacity: 0.55;
}
.offer-job-hit {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
}
.offer-job-hit:focus {
  outline: none;
}
.offer-job-hit:disabled {
  cursor: not-allowed;
}
.offer-job-cell .offer-compat-line {
  padding: 0 3px 1px;
}
.offer-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.offer-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
}
.offer-pill-freight {
  background: var(--op-frt);
}
.offer-pill-driver {
  background: var(--op-drv);
}
.offer-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: #fde8ec;
  border: 1px solid #e9a9b5;
  color: #8e1f30;
}
.offer-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
  color: #0d141b;
}
.offer-route {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  font-weight: 750;
  color: #16202b;
}
.offer-route-ico {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--op-blue);
}
.offer-route-arrow {
  flex: none;
  display: grid;
  place-items: center;
  color: #93a6ba;
}
.offer-thumb {
  display: block;
  height: 54px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--op-card-line);
  background: #eef4fa;
}
.offer-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}
.offer-thumb-coast {
  fill: #e3ecf6;
  stroke: #b9c8d8;
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.offer-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(15, 23, 32, 0.11);
  font-size: 0.66rem;
  color: var(--op-card-soft);
}
.offer-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.offer-foot-ico {
  flex: none;
  color: #7a8b9c;
}
/* The lifecycle badge -- "Ended" / "N days left" / "Last day" -- always gets a row of
   its own, directly under the date row, at every card width. It is the LAST child of
   .offer-card-foot, which wraps, so previously it fitted on the date's line at some
   widths and wrapped to a second line at others. Two cards side by side in the Trade
   slots are the same width but carry different routes, dates and truck strings, so one
   would keep the badge inline while the other pushed it down and the two cards came out
   different heights for no reason visible in their content.
   flex-basis:100% inside a wrapping flex container forces the item onto a line of its
   own at every width, which is the whole fix. margin-left:auto is kept as the fallback
   right-alignment -- it resolves to 0 while the basis is 100%, but if the basis is ever
   dropped the badge returns to the right edge instead of jumping to the left -- and
   text-align:right reproduces that edge now that the box spans the row. text-align is
   only safe here because the badge has no background; if one is ever added it would
   paint the full width, and the basis is what would then need revisiting.
   CSS-only: the DOM order already has the badge last in both renderers (offerCardHTML
   in job-offers.js, and the harness's duplicate), so no markup moved.
   Note this does NOT make every card the same height on its own: a job with no dates
   gets no badge at all (daysHTML is empty when daysLeft() is null), so it is one row
   shorter. That is content, not layout -- reserve the row only if equal heights are
   wanted outright. */
.offer-days {
  flex-basis: 100%;
  margin-left: auto;
  text-align: right;
  font-weight: 1000;
  color: #8e1f30;
  white-space: nowrap;
}
.offer-days.calm {
  color: var(--op-card-soft);
  font-weight: 850;
}

/* --- the two offer slots --- */
/* `display:grid` rather than block: a grid item stretches to fill its cell on
   both axes, so whichever box sits inside -- the dropped card or the empty
   placeholder -- fills the slot. With `display:block` the placeholder stayed at
   its 100px min-height and left a gap under it whenever the other slot held a
   full card, which is the common case: a drag-to-offer opens the panel with the
   left slot already filled. */
.offer-slot {
  display: grid;
}
/* Two slots side by side, matching the mockup. Only the first takes a card --
   the schema holds one sender_job_id -- so the second is presentational. The
   cells stretch together, so the pair always reads as a matched set. */
/* The 8px inline inset matches .offer-frame's padding+border (7px + 1px), so a
   slot card is EXACTLY the width of a framed card. Without it the framed cards
   come out (W-26)/2 against the slots' (W-10)/2 -- narrower each, which is the
   opposite of the owner's "the same size as the job slots". It also makes both
   rows start at the same inset, so all three rows of cards line up in one
   column. Change this if .offer-frame's padding or border changes. */
.offer-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  margin-inline: 8px;
}
/* .offer-slot-off{pointer-events:none} is gone. It disabled pointer events on the
   second slot, which was correct while that slot was layout only. The owner asked
   for the other user's card to be draggable "so i can test both in the slots", so
   the second slot is now a real drop target with its own id (#offerPanelSlot2) and
   the class is no longer in the markup. Nothing is lost by removing it: the slot is
   only reachable through slot2HTML(), which never emits this class. */
.offer-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 100px;
  padding: 14px;
  border: 2px dashed var(--op-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--op-panel) 80%, transparent);
  color: var(--op-ink-soft);
  text-align: center;
}
/* Visually hidden, still announced. Added for the second slot while it was inert,
   to warn a screen reader off a box that did nothing. Both slots are real now, so
   nothing emits this class any more and the rule is currently unreferenced.
   Kept rather than deleted: it is a correct, generic utility and it is exactly the
   right tool if any future element in this panel needs an off-screen label. Dead
   utility, not dead behaviour -- but if the panel is ever cleaned up wholesale,
   this is one of the rules that can go. */
.offer-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.offer-slot-ico {
  color: var(--op-blue-bright);
}
.offer-slot-text {
  font-size: 0.76rem;
  font-weight: 850;
  color: var(--op-ink);
}
.offer-slot-drag {
  font-size: 0.64rem;
}
.offer-slot.drop-active .offer-slot-empty {
  border-color: var(--op-blue-bright);
  background: rgba(47, 143, 224, 0.14);
}
.offer-slot-clear {
  border: 0;
  background: transparent;
  color: var(--op-ink-soft);
  font-size: 0.64rem;
  font-weight: 850;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}
.offer-slot-clear[hidden] {
  display: none;
}
.offer-slot-clear:hover {
  color: #fff;
}

/* --- your cards list: filter chips ---------------------------------------- */
/* The chips sit UNDER the list now (owner, 2026-09-14), so the 2px breather
   flipped from margin-bottom to margin-top. Same 2px, other side: above the
   frame it needed the gap below it, from below it needs the gap above it. The
   chips carry no positioning of their own, so the margin is the only thing that
   had to move with them -- nothing here depends on DOM order, which is why
   renderFilters() needed no change at all. */
:is(#offerPanel, .rx-offerPanel) .job-offer-filters {
  gap: 5px;
  margin-top: 2px;
}
:is(#offerPanel, .rx-offerPanel) .job-offer-filter {
  border: 1px solid var(--op-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--op-ink-soft);
  font-size: 0.63rem;
  font-weight: 850;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
:is(#offerPanel, .rx-offerPanel) .job-offer-filter.active {
  background: var(--op-blue);
  color: #fff;
  border-color: var(--op-blue-bright);
}
:is(#offerPanel, .rx-offerPanel) .offer-filter-count {
  font-weight: 1000;
}
/* The own cards now lay out on the same two-up grid as the other user's, so a
   cell is the same size in both sections. The scroll cap is raised from 230px
   because a row is now a full card (~200px+) rather than a one-line list row --
   at the old cap a single row would have been clipped mid-card.

   NOTE the missing `overscroll-behavior`. This list is a scroll container NESTED inside
   another one -- .offer-panel-body is also overflow-y:auto -- and it used to carry
   `overscroll-behavior:contain`, which tells the browser NOT to chain the scroll to the
   parent. With the cursor over these cards the wheel therefore scrolled this list and
   nothing else, and once the list was exhausted -- or when it had no overflow at all, as
   with one or two own cards -- the event was swallowed and the panel body never moved.
   The owner reported exactly that: "scrolling gets disabled when cursor is inside the
   your cards frame". Chaining is what we want: reaching the end of the cards should carry
   on scrolling the panel. The page behind still cannot scroll, because .offer-panel-body
   keeps its own overscroll-behavior:contain and <body> carries
   .offer-background-lock{overflow:hidden!important}. Do not add it back. */
:is(#offerPanel, .rx-offerPanel) .job-offer-own-jobs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  max-height: min(460px, 44cqh);
  overflow-y: auto;
  padding: 2px;
}
:is(#offerPanel, .rx-offerPanel) .job-offer-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--op-line);
  border-radius: 11px;
  color: var(--op-ink-soft);
  font-size: 0.72rem;
  text-align: center;
  background: transparent;
  grid-column: 1/-1;
}
/* --- three actions --- */
.offer-selected-route {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eaf5fc;
  color: #15384c;
  font-size: 0.9rem;
}
.offer-route-choice {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}
.offer-route-choice legend {
  padding: 0 5px;
  font-weight: 700;
  font-size: 0.9rem;
}
.offer-route-choice-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.offer-route-choice-option:has(input:checked) {
  outline: 2px solid #1683c4;
}
.offer-route-choice-option small {
  color: #526170;
  white-space: nowrap;
}
.offer-panel-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.offer-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 9px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition:
    filter 0.15s,
    opacity 0.15s;
}
.offer-act-label {
  font-size: 1.15rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.offer-act-sub {
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.72;
  line-height: 1.15;
}
.offer-act-map {
  background: #eef3f9;
  color: #111a24;
  border-color: #cfd9e4;
}
.offer-act-send {
  background: var(--op-green);
  color: #fff;
}
.offer-act-private {
  background: #13253a;
  color: #fff;
  border-color: #2f7fd0;
}
.offer-act:hover:not([disabled]) {
  filter: brightness(1.08);
}
.offer-act[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.55);
}

/* --- map (must carry an explicit height: a 0px Leaflet container was the defect) --- */
.offer-map-wrap {
  flex-shrink: 0;
  border: 1px solid var(--op-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--op-panel-2);
}
.offer-map-wrap[hidden] {
  display: none;
}
.offer-panel-map {
  height: 260px;
  width: 100%;
}

/* --- match rating --- */
.offer-rating {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.offer-rate {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.offer-rate-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.offer-rate-ico {
  flex: none;
  color: var(--op-blue-bright);
}
.offer-rate-label {
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: var(--op-ink-soft);
}
.offer-rate-val {
  font-size: 0.78rem;
  font-weight: 1000;
  color: #fff;
  margin-top: auto;
  text-align: right;
}
.offer-rate-val.band {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.offer-rate-bar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
  height: 8px;
}
.offer-rate-seg {
  border-radius: 2px;
  background: var(--op-seg);
}
.offer-rate-seg.on {
  background: var(--op-blue);
}
.offer-rate.unknown .offer-rate-seg {
  background: var(--op-seg-unknown);
}
.offer-rate.unknown .offer-rate-val {
  color: var(--op-ink-soft);
}
.offer-rate-cap {
  font-size: 0.55rem;
  color: #7f92a6;
  line-height: 1.25;
}
/* Why the Match rating row looked right on a phone and wrong on desktop.

   The four measures are separate flex columns, so each one's height is its own.
   That is fine only while every label and caption stays on one line -- which is
   what a phone gives them, where two columns leave each measure roughly 350px.
   Four columns leave roughly 180px, and there the captions part company: the
   Overall caption ("Weighted 45% · 40% · 15% · 3 of 3 measures") wraps to a
   second line while the other three do not. That one column grows, margin-top
   :auto absorbs the slack in the other three, and the four bars and values land
   on four different baselines. The phone-only media rule never helped desktop
   because it is keyed to the viewport, and the @container rule never helped
   either because a desktop panel is ~784px, far above its 480px threshold.

   Subgrid fixes it structurally: the four measures share the parent's four rows,
   so label, bar, value and caption each occupy one common row across all four
   columns and line up however differently they wrap. This must come AFTER the
   base rules above, because .offer-rate-val's margin-top:auto is declared there
   and would otherwise win. The flex rules stay as the fallback for a browser
   without subgrid, degrading to the old per-column heights rather than breaking. */
@supports (grid-template-rows: subgrid) {
  /* span 4, not 1/-1. Each measure owns four rows -- head, bar, value, caption.
     At four columns that is one shared band and all four line up. At the phone's
     two columns, auto-placement gives each PAIR its own band, so the two rows of
     the 2x2 align within themselves. 1/-1 would instead pin every measure to the
     first four lines, and in the two-column layout two of them would land on top
     of each other. */
  .offer-rate {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
  /* The row gutter is set on the PARENT, not on .offer-rate. In a subgrid the
     gutters of the subgridded axis come from the parent grid, so .offer-rate's own
     `gap:6px` (still declared above for the flex fallback) is ignored for rows and
     the parent's `gap` would apply instead -- silently loosening the space between
     label, bar, value and caption from 6px to 10px and making every band ~12px
     taller. That is the opposite of the compactness this panel was just given. */
  .offer-rating {
    row-gap: 6px;
  }
  .offer-rate-val {
    margin-top: 0;
  }
}

/* --- footnote + status line --- */
.offer-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid #4a4326;
  border-left: 4px solid var(--yellow);
  border-radius: 9px;
  background: rgba(255, 212, 0, 0.07);
  color: #e7dfb8;
  font-size: 0.68rem;
  line-height: 1.4;
}
.offer-note svg {
  flex: none;
  color: var(--yellow);
  margin-top: 1px;
}
:is(#offerPanelMsg, .rx-offerPanelMsg) {
  display: block;
  font-size: 0.68rem;
  color: var(--op-ink-soft);
}
:is(#offerPanelMsg, .rx-offerPanelMsg):not(:empty) {
  padding: 0 16px 12px;
}
:is(#offerPanelMsg, .rx-offerPanelMsg).error {
  color: #ff9b9b;
}
/* The confirm card is a flex column with a gap, so an empty status line would
   still reserve a gap slot and leave a hole between the message box and the
   actions. Collapse it until it has something to say. */
:is(#offerConfirmMsg, .rx-offerConfirmMsg) {
  display: block;
  font-size: 0.68rem;
  color: var(--op-ink-soft);
}
:is(#offerConfirmMsg, .rx-offerConfirmMsg):empty {
  display: none;
}
:is(#offerConfirmMsg, .rx-offerConfirmMsg).error {
  color: #ff9b9b;
}

/* --- send confirmation --- */
.offer-confirm-card {
  width: min(94vw, 470px);
  max-height: calc(100dvh - 32px);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border: 1px solid var(--op-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #16222e, var(--op-panel));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  color: var(--op-ink);
}
.offer-confirm-card .modal-head {
  margin: 0;
}
.offer-confirm-card .modal-head h2 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}
.offer-confirm-cards {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.offer-confirm-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.63rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--op-blue-bright);
}
.offer-confirm-label span {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--op-ink-soft);
  font-size: 0.6rem;
}
.offer-confirm-message {
  width: 100%;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--op-line);
  border-radius: 10px;
  background: #0a1119;
  color: var(--op-ink);
  font: inherit;
  font-size: 0.78rem;
  resize: vertical;
}
.offer-confirm-message:focus {
  outline: 2px solid var(--op-blue-bright);
  outline-offset: 1px;
}
.offer-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}
.offer-confirm-actions .btn-ghost {
  background: transparent;
  border: 1px solid var(--op-line);
  color: var(--op-ink);
}
.offer-confirm-actions .btn-primary {
  background: var(--op-green);
  border-color: var(--op-green);
  color: #fff;
}

/* --- responsive --- */
@media (max-width: 768px) {
  .offer-panel-modal {
    padding: max(10px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .offer-panel-map {
    height: 200px;
  }
  .offer-panel-card {
    width: 100%;
    max-width: none;
    height: calc(
      100dvh - max(20px, env(safe-area-inset-top)) -
        max(20px, env(safe-area-inset-bottom))
    );
    height: calc(
      var(--visual-viewport-height, 100dvh) -
        max(20px, env(safe-area-inset-top)) -
        max(20px, env(safe-area-inset-bottom))
    );
    max-height: none;
    border-radius: 14px;
  }
  .offer-confirm-card {
    width: 100%;
    max-width: none;
    max-height: calc(
      100dvh - max(20px, env(safe-area-inset-top)) -
        max(20px, env(safe-area-inset-bottom))
    );
    max-height: calc(
      var(--visual-viewport-height, 100dvh) -
        max(20px, env(safe-area-inset-top)) -
        max(20px, env(safe-area-inset-bottom))
    );
  }
  /* .offer-panel-head / .offer-panel-body padding and gap used to be restated
     here. They are not any more: the fluid block at the end of this file scales
     them continuously across every width, and a second fixed statement here sat
     EARLIER in the source, so it was silently overridden -- the opposite of what
     it looked like it did. One source of truth now. */
  .offer-panel-actions {
    gap: 6px;
  }
  /* The tag row above the user's OWN cards goes on a phone. Owner's request: "if
     you remove them tags above the current user card and scale it down just a
     touch it would work". It identifies the reader to themselves, inside their own
     panel, and on a full-height phone layout one line of vertical space is worth
     more than that. The other user's tag row stays -- it names a person and a role
     the reader has no other way to know. Keyed to the id rather than a class,
     following #offerPanel .job-offer-own-jobs a few rules down: an id outranks
     .offer-person's own display:flex without needing an !important. */
  :is(#offerPanelMePerson, .rx-offerPanelMePerson) {
    display: none;
  }
  .offer-act {
    min-height: 58px;
    padding: 8px 4px;
  }
  .offer-act-label {
    font-size: 0.6rem;
  }
  .offer-act-sub {
    font-size: 0.52rem;
  }
  .offer-confirm-message {
    font-size: 16px;
  }
  /* Non-scrolling panel, all content fits without height constraint. */
  :is(#offerPanelMsg, .rx-offerPanelMsg):not(:empty) {
    padding: 0 12px 10px;
  }
}
/* At 320px four rating columns would be ~72px each and the labels would clip.
   This is the fallback for a browser without container queries; the @container
   rule below supersedes it wherever it is supported. */
@media (max-width: 420px) {
  /* column-gap, not gap. A bare `gap` here would also reset the row gutter, and
     this rule sits AFTER the @supports block that sets .offer-rating's row-gap to
     6px for the subgrid, so it would silently win and undo it on the narrowest
     screens. */
  .offer-rating {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
  }
  .offer-panel-actions {
    grid-template-columns: 1fr;
  }
  .offer-act {
    flex-direction: row;
    gap: 7px;
    min-height: 46px;
  }
  .offer-act-sub {
    display: none;
  }
  /* Two 130px cells side by side at 320px leaves no room for the copy, so the
     two-up grids stack here. Still both cells visible -- the point is to show
     the two-up layout. The own-jobs rule needs its id to match the specificity
     of the base rule, which carries an id. */
  .offer-slots,
  .offer-cards {
    grid-template-columns: 1fr;
  }
  :is(#offerPanel, .rx-offerPanel) .job-offer-own-jobs {
    grid-template-columns: 1fr;
  }
  /* .offer-slot-empty / .offer-cell-reserve used to be shrunk to 78px here. That
     was a STEP, and the owner replaced steps with one continuous scale: the
     fluid block at the end of the file now carries both boxes from a phone floor
     of 88px to a desktop ceiling of 100px with no breakpoint in between. The
     rule is gone rather than duplicated, because a second statement here would
     only be overridden by the later fluid one anyway. */
}
/* The rating row must respond to the PANEL's width, not the viewport's. Keyed to
   the viewport it got four squeezed columns with clipped labels whenever the
   panel was narrow inside a wide window -- the harness cells, and any browser
   window between 421px and ~560px. Above 480px of panel the four columns have
   real room and sit in one row as drawn; below it they pair up. Inside
   .offer-panel-card, whose width always tracks the viewport in the real app, so
   this still means one row on desktop and two rows on a phone. */
.offer-panel-card {
  container-type: inline-size;
}
@container (max-width:480px) {
  /* column-gap for the same reason as the @media rule above: the row gutter
     belongs to the @supports block. */
  .offer-rating {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
  }
}

/* Standalone forms scale from available height before their own body scrolls.
   Width is not used as the scaling driver: the desktop card stays centred and
   the phone sheet owns the usable visual viewport. */
.standalone-form-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
}
.standalone-route-form,
.idle-standalone-form {
  max-height: calc(var(--visual-viewport-height, 100dvh) - 40px) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}
@media (min-width: 769px) and (max-height: 940px) {
  .standalone-route-form,
  .idle-standalone-form {
    padding-block: clamp(14px, 2.2vh, 26px) !important;
  }
  .standalone-route-form .modal-head {
    margin-bottom: clamp(8px, 1.5vh, 18px) !important;
    padding-bottom: clamp(8px, 1.4vh, 16px) !important;
  }
  .standalone-route-form .route-wizard-title h2 {
    font-size: clamp(1.7rem, 4.1vh, 3.25rem);
  }
  .standalone-form-subtitle {
    font-size: clamp(0.85rem, 1.8vh, 1.14rem);
  }
  .standalone-type-badge {
    min-height: clamp(28px, 4.2vh, 38px);
    font-size: clamp(0.72rem, 1.8vh, 1rem);
  }
  .standalone-route-form :is(#routeForm, .rx-routeForm),
  .idle-standalone-form form {
    gap: clamp(7px, 1.45vh, 14px);
  }
  .standalone-route-form label,
  .idle-standalone-form label {
    gap: clamp(3px, 0.7vh, 6px);
    font-size: clamp(0.76rem, 1.55vh, 0.94rem);
  }
  .standalone-route-form input,
  .standalone-route-form select,
  .standalone-route-form textarea,
  .idle-standalone-form input,
  .idle-standalone-form select,
  .idle-standalone-form textarea {
    min-height: clamp(36px, 5.1vh, 48px);
    padding-block: clamp(7px, 1.25vh, 12px);
  }
  .standalone-route-form textarea,
  .idle-standalone-form textarea {
    min-height: clamp(68px, 11vh, 108px);
  }
  .standalone-grid,
  .standalone-choice-row {
    gap: clamp(7px, 1.4vh, 14px);
  }
  .standalone-detail-section {
    padding-top: clamp(8px, 1.6vh, 16px);
  }
  .standalone-detail-section h3 {
    margin-bottom: clamp(6px, 1.2vh, 12px);
    font-size: clamp(0.87rem, 1.8vh, 1.05rem);
  }
  .standalone-submit {
    min-height: clamp(46px, 7.4vh, 64px);
    font-size: clamp(0.92rem, 2.4vh, 1.25rem) !important;
  }
  .idle-day {
    min-height: clamp(26px, 4.2vh, 38px);
  }
}
@media (max-width: 768px) {
  .standalone-form-modal {
    height: var(--visual-viewport-height, 100dvh);
    padding: 0;
    align-items: stretch;
  }
  .standalone-route-form,
  .idle-standalone-form {
    height: var(--visual-viewport-height, 100dvh);
    max-height: var(--visual-viewport-height, 100dvh) !important;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .standalone-route-form .modal-head {
    top: -10px;
    margin: 0 -12px 8px !important;
    padding: 10px 12px 8px !important;
  }
  .standalone-route-form .route-wizard-title h2 {
    margin: 5px 0 1px;
    font-size: clamp(1.35rem, 7.2vw, 2rem);
  }
  .standalone-form-subtitle {
    font-size: clamp(0.76rem, 3.6vw, 0.94rem);
  }
  .standalone-type-badge {
    min-height: 26px;
    padding-inline: 11px;
    font-size: 0.68rem;
  }
  .standalone-route-form :is(#routeForm, .rx-routeForm),
  .idle-standalone-form form {
    gap: 8px;
  }
  .standalone-route-form label,
  .idle-standalone-form label {
    gap: 3px;
    font-size: 0.78rem;
  }
  .standalone-route-form input,
  .standalone-route-form select,
  .standalone-route-form textarea,
  .idle-standalone-form input,
  .idle-standalone-form select,
  .idle-standalone-form textarea {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 16px;
  }
  .standalone-route-form textarea,
  .idle-standalone-form textarea {
    min-height: 68px;
  }
  .standalone-grid,
  .standalone-choice-row {
    gap: 8px;
  }
  .standalone-detail-section {
    padding-top: 8px;
  }
  .standalone-detail-section h3 {
    margin-bottom: 6px;
    font-size: 0.88rem;
  }
  .standalone-route-form .gps-btn,
  .idle-standalone-form .gps-btn {
    min-height: 36px;
    margin-top: 4px;
    padding: 6px 10px;
    font-size: 0.77rem;
  }
  .standalone-route-form .expiry-note {
    margin: 0;
    padding: 7px 9px;
    font-size: 0.72rem;
  }
  .standalone-submit {
    min-height: 48px;
    font-size: 0.9rem !important;
    letter-spacing: 0.035em;
  }
  .idle-calendar {
    gap: 2px;
    padding: 5px;
  }
  .idle-day {
    min-height: 29px;
    font-size: 0.74rem;
  }
  .idle-weekday {
    font-size: 0.62rem;
  }
  .idle-calendar-nav {
    gap: 5px;
    margin: 1px 0 5px;
  }
  .idle-calendar-nav button,
  .idle-calendar-actions button {
    padding: 6px 7px;
    font-size: 0.68rem;
  }
  .idle-selection-count {
    margin: 5px 0;
    padding: 6px 8px;
    font-size: 0.72rem;
  }
}

/* --- compact contents, so the first three frames fit without scrolling --------
   Owner's request: "make the popup 40% larger and on mobile and web scale the
   contents down so the popup when it starts will show the first 3 frames clearly
   without scrolling." The three frames are Other user's cards, Trade, and Your
   cards -- everything up to and including the last card row. The panel grew 40%
   wider; the vertical cost of each card is what had to come down, so these rules
   only reduce height (padding, gaps, the thumbnail band, and type that wraps).
   Widths are untouched, so the card columns keep their proportions.

   These values USED to be fixed -- one set of small numbers applied at every
   width. The owner replaced that: "we dont need fixed sizes we can scale it as
   screen size changed". So every number below is now a continuous scale rather
   than a step. There is no breakpoint and no jump anywhere in this block.

   HOW THE SCALE IS BUILT. Each property is one clamp() whose MINIMUM is the old
   compact value (the value tuned for a phone) and whose MAXIMUM is the base
   rule's own value further up this file (the value drawn for a desktop panel).
   The two bound the scale; nothing else does. The middle term is the straight
   line between them, and it is derived, not guessed: the panel is
   min(94vw,784px) wide, so it runs 367px at a small phone to 784px at the
   desktop ceiling. A property that goes from F at 367px to C at 784px is
   F + (C-F)*(0.23981cqw - 0.88010), which is the coefficient and offset printed
   in each clamp below. cqw is 1% of the container's width, and the container is
   .offer-panel-card -- set a few lines up -- so these track the PANEL, not the
   viewport. In the real app the panel width always tracks the viewport, so the
   result on a phone is the floor, on a desktop the ceiling, and in between one
   unbroken scale. In the harness cells, where the panel is narrow inside a wide
   window, it is now the panel that decides -- which is the same fix the rating
   row needed above.

   THE FLOOR IS THE STOP. The owner asked for "a collision detect on the
   elements that will stop the scaling". CSS has no way to detect that two
   elements have touched; there is no property that reads a neighbour's box. What
   it has is this: the clamp minimum, which stops the scaling dead at a size that
   fits. Below 367px of panel the numbers stop moving and simply hold. That is
   the mechanism, and it is the closest honest equivalent -- if the elements
   still collide on a very small screen, the fix is to lower a floor here, not to
   look for a detector.

   THE FLOORS WERE LOWERED ONCE MORE, and that is the one thing to know when
   editing this block. The owner reported the phone layout still did not fit and
   asked to "scale it down just a touch". Only the MINIMUMS moved -- roughly a
   tenth off each, largest cuts on the tallest things: thumb 40->36px, the empty
   slot's min-height 88->78px, card padding 8->7px and 10->9px, panel-body gap
   12->10px. Every ceiling is untouched, so the desktop design drawn further up
   this file is exactly what it was. Because the middle term is the line between
   floor and ceiling, lowering a floor changes its slope as well as its endpoint:
   each clamp's coefficient and offset were recomputed from the pair rather than
   adjusted by hand, and every one of the 22 was round-tripped back to confirm it
   reads its floor at 367px of panel and its ceiling at 784px. Nothing here is
   copied forward from the previous block.

   Every value is still a judgement made without a browser to check it against --
   this environment has no automation, so the fit is reasoned, not observed. If
   the three frames overrun, the lever is .offer-thumb's clamp and .offer-card's
   padding clamp, in that order. Nothing below changes colours, weights or the
   information shown; only the space between things. */
.offer-panel-head {
  padding: clamp(10px, calc(1.44cqw + 4.72px), 16px)
    clamp(12px, calc(0.96cqw + 8.48px), 16px)
    clamp(9px, calc(0.96cqw + 5.48px), 13px);
}
.offer-panel-body {
  padding: clamp(10px, calc(0.96cqw + 6.48px), 14px)
    clamp(12px, calc(0.96cqw + 8.48px), 16px) 4px;
  gap: clamp(10px, calc(1.44cqw + 4.72px), 16px);
}
.offer-sec {
  gap: clamp(5px, calc(0.72cqw + 2.36px), 8px);
}
.offer-card {
  padding: clamp(7px, calc(0.96cqw + 3.48px), 11px)
    clamp(9px, calc(0.72cqw + 6.36px), 12px);
  gap: clamp(5px, calc(0.96cqw + 1.48px), 9px);
}
.offer-card-title {
  font-size: clamp(0.7rem, calc(0.58cqw + 0.67rem), 0.95rem);
}
.offer-route {
  font-size: clamp(0.6rem, calc(0.27cqw + 0.61rem), 0.74rem);
  gap: clamp(2px, calc(0.48cqw + 2.24px), 6px);
}
.offer-thumb {
  height: clamp(36px, calc(4.32cqw + 20.16px), 54px);
}
.offer-card-foot {
  padding-top: clamp(4px, calc(0.72cqw + 3.36px), 9px);
  gap: clamp(2px, calc(0.24cqw + 2.12px), 4px)
    clamp(6px, calc(0.96cqw + 4.48px), 12px);
  font-size: clamp(0.55rem, calc(0.23cqw + 0.55rem), 0.66rem);
}
.offer-slot-empty,
.offer-cell-reserve {
  min-height: clamp(78px, calc(5.28cqw + 58.64px), 100px);
  padding: clamp(10px, calc(0.96cqw + 6.48px), 14px);
}
.offer-slot-text {
  font-size: clamp(0.72rem, calc(0.38cqw + 0.63rem), 0.9rem);
}
.offer-job-cell .offer-compat-line {
  padding: 0 clamp(2px, calc(0.24cqw + 1.12px), 999px) 1px;
}

/* Evolution menu compatibility: the same menu trigger replaces All Jobs on mobile. */
@media (max-width: 768px) {
  .site-header:not(.rx-site-header) .desktop-action-menu-toggle {
    display: none;
  }
  .site-header:not(.rx-site-header) .mobile-action-menu-toggle {
    position: absolute;
    left: max(10px, env(safe-area-inset-left));
    top: calc(var(--header-h) - 44px);
    width: 132px;
    z-index: 1504;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    border: 1px solid rgba(255, 211, 43, 0.5);
    border-radius: 999px;
    background: linear-gradient(
      135deg,
      rgba(12, 23, 35, 0.96),
      rgba(35, 44, 65, 0.92)
    );
    color: #f4edd8;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.13),
      0 4px 10px rgba(0, 0, 0, 0.25);
    font: 900 0.7rem/1 inherit;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .site-header:not(.rx-site-header)
    .mobile-action-menu-toggle[aria-expanded="true"] {
    border-color: rgba(255, 222, 91, 0.85);
    background: linear-gradient(
      135deg,
      rgba(32, 43, 56, 0.98),
      rgba(61, 57, 47, 0.95)
    );
    color: #fff8d6;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu .post-actions {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    z-index: 2000;
    display: none;
    padding: 10px;
    border: 2px solid var(--yellow);
    border-radius: 10px;
    background: rgba(23, 25, 68, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
  }
  .site-header:not(.rx-site-header) .desktop-action-menu.open .post-actions {
    display: block;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu .header-job-actions {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
  }
  .site-header:not(.rx-site-header)
    .desktop-action-menu
    .header-job-actions
    .btn,
  .site-header:not(.rx-site-header) .desktop-action-menu .my-jobs-offer-wrap {
    width: 100%;
  }
  .site-header:not(.rx-site-header)
    .desktop-action-menu
    .header-job-actions
    .btn {
    height: 38px;
    min-height: 38px;
  }
  .site-header:not(.rx-site-header)
    .desktop-action-menu
    :is(#fullMapBtn, .rx-fullMapBtn) {
    display: flex !important;
  }
  .site-header:not(.rx-site-header) .desktop-action-menu .my-jobs-offer-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .site-header:not(.rx-site-header)
    .desktop-action-menu
    .evolution-menu-placeholder {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* React board: the map fills its main frame. */
.main-frame.rx-boardMapFrame {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.main-frame.rx-boardMapFrame .rx-map-section {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
}
.main-frame.rx-boardMapFrame .rx-map-section .rx-map {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  border: 0 !important;
  border-top: 0 !important;
  outline: 0;
  border-radius: 0;
}
.main-frame.rx-boardMapFrame .rx-routes {
  position: absolute;
  top: 14px;
  right: 14px;
  left: 14px;
  z-index: 5;
  pointer-events: none;
}
.main-frame.rx-boardMapFrame .rx-routes > h2,
.main-frame.rx-boardMapFrame .rx-routes > .section-sub,
.main-frame.rx-boardMapFrame :is(#carouselNav, .rx-carouselNav) {
  display: none;
}
.main-frame.rx-boardMapFrame :is(#mainRouteBanner, .rx-mainRouteBanner) {
  border: 0 !important;
  border-bottom: 0 !important;
  margin-bottom: 0;
  box-shadow: none;
  padding-bottom: 10px;
  background: linear-gradient(
    to bottom,
    #090c10 0%,
    #090c10 72%,
    rgba(9, 12, 16, 0.72) 88%,
    transparent 100%
  );
}
.main-frame.rx-boardMapFrame .rx-map .leaflet-top {
  top: auto;
  bottom: 14px;
}
.main-frame.rx-boardMapFrame .rx-map .leaflet-bottom.leaflet-right {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
}
.main-frame.rx-boardMapFrame .rx-map .leaflet-control-attribution {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  /* Required map attribution at the bottom edge on phones: at the top right it sat under the Calendar button. */
  .main-frame.rx-boardMapFrame .rx-map .leaflet-bottom.leaflet-right {
    top: auto !important;
    bottom: 0 !important;
  }
  .main-frame.rx-boardMapFrame .rx-map .leaflet-control-attribution {
    top: auto !important;
    bottom: 0 !important;
  }
  .main-frame.rx-boardMapFrame {
    padding: 0;
  }
  .main-frame.rx-boardMapFrame .rx-routes {
    top: 0;
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
  }
  /* Mobile: no collapse/expand — always show the full 2x2 grid, flush under the banner */
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid).menu-card-grid.btn-collapsed {
    position: static;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    top: auto;
    left: auto;
    z-index: auto;
  }
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid).menu-card-grid.btn-collapsed
    :is(#idleDriverBtn, .rx-idleDriverBtn) {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    min-height: 0;
  }
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid).menu-card-grid.btn-collapsed
    :is(#postFreightBtn, .rx-postFreightBtn),
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid).menu-card-grid.btn-collapsed
    :is(#postBtn, .rx-postBtn),
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid).menu-card-grid.btn-collapsed
    .placeholder-card-gold {
    display: block;
  }
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid).menu-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid)
    .menu-feature-card {
    width: auto;
    min-width: 0;
    max-width: none;
    aspect-ratio: auto;
  }
  .main-frame:has(:is(#cardGrid, .rx-cardGrid).menu-card-grid)
    :is(#cardGrid, .rx-cardGrid)
    .menu-feature-card
    .menu-card-img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

/* React live page layout.
   Header is normal flow. The app fills the remaining viewport and owns one
   sidebar column plus one main-frame column. The React mounts stay real flex/grid
   items so height and overflow have one clear owner. */
@media (min-width: 769px) {
  body.react-sidebar-swap .app {
    display: grid !important;
    grid-template-columns: var(--sbw) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: calc(100dvh - var(--header-h)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.react-sidebar-swap.sb-collapsed .app {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
  body.react-sidebar-swap #react-live-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    z-index: 10 !important;
  }
  body.react-sidebar-swap #react-live-sidebar > .sidebar {
    margin-left: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  body.react-sidebar-swap #react-live-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}
/* Mobile (<=768px): the original .sidebar rules already make it a fixed drawer driven by body.sb-collapsed,
   while the main mount fills the app below the header. */
@media (max-width: 768px) {
  body.react-sidebar-swap #react-live-sidebar {
    display: contents;
  }
  body.react-sidebar-swap .app {
    display: block !important;
    height: calc(100dvh - var(--header-h)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.react-sidebar-swap #react-live-main {
    display: flex !important;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
}

/* The React main frame fills its mount. No compensating margins or map insets
   are needed: the header and app already account for the vertical position. */
body.react-main-swap #react-live-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body.react-main-swap #react-live-main > .rx-mainFrame {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
  min-height: 0;
}

/* ============================================================
   Mobile banner: compact single row.
   Replaces the tall two-row mobile redesign. Order across the row:
   Menu · globe · mail · account (left) — logo (centre) — auth (right).
   The desktop logo.png is used instead of the mobile-only art.
   ============================================================ */
@media (max-width: 768px) {
  /* Layout height remains shared because the app frame uses --header-h. React
     banner geometry and controls live in ui/site-header.css. */
  :root {
    --header-h: 120px;
  }
}

/* Menu panel treatment requested for the React2 header dropdown. */
.site-header:not(.rx-site-header) .desktop-action-menu.open .post-actions {
  width: var(--sbw);
  max-width: calc(100vw - 18px);
  background: rgba(255, 255, 255, 0.8);
  left: -9px;
}
.site-header:not(.rx-site-header)
  .desktop-action-menu.open
  .header-job-actions
  > :is(button, a) {
  color: #000 !important;
  text-decoration: none !important;
  border: 1px solid #000 !important;
}
.site-header:not(.rx-site-header) .desktop-action-menu .map-header-btn,
.site-header:not(.rx-site-header) .desktop-map-globe {
  cursor: pointer;
}
.site-header:not(.rx-site-header)
  .desktop-action-menu.open
  .header-job-actions
  > a:hover,
.site-header:not(.rx-site-header)
  .desktop-action-menu.open
  .header-job-actions
  > a:focus-visible {
  color: #000 !important;
  text-decoration: none !important;
}
.mobile-town-suggestions.open {
  display: flex;
  position: fixed;
  z-index: 2200;
  flex-direction: column;
  margin: 0;
  overflow-y: auto;
  border: 1px solid var(--yellow);
  border-radius: 8px;
  background: #11171d;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}
.mobile-town-suggestions button {
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.mobile-town-suggestions button:last-child {
  border-bottom: 0;
}
.mobile-town-suggestions button:hover,
.mobile-town-suggestions button:focus-visible {
  background: rgba(255, 212, 0, 0.14);
  color: var(--yellow);
}
.inventory-tray {
  --inventory-card-width: clamp(
    90px,
    calc((min(100vw, var(--sbw)) - 40px) / 2.57),
    156px
  );
  --inventory-card-height: clamp(113px, calc(37.44vw - 16px), 152px);
  height: calc(var(--inventory-card-height) + 70px);
}
/* Horizontal padding gives the hover-zoomed first/last card room so the scroll
   container does not clip its left or right edge. */
.inventory-cards {
  left: 0;
  right: 0;
  bottom: 40px;
  gap: 10px;
  padding: 0 20px;
  scroll-padding: 0 20px;
}
.inventory-heading {
  bottom: 8px;
  left: 20px;
  right: 20px;
  height: 24px;
  gap: 8px;
}
.inventory-scroll-button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d21f32;
  font:
    900 14px/1 system-ui,
    sans-serif;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.inventory-scroll-button:hover,
.inventory-scroll-button:focus-visible {
  background: rgba(210, 31, 50, 0.12);
  outline: 2px solid #d21f32;
  outline-offset: 1px;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .inventory-tray {
    --inventory-hover-height: clamp(141px, calc(46.8vw - 20px), 190px);
    height: calc(var(--inventory-hover-height) + 70px);
  }
  .inventory-cards {
    height: var(--inventory-hover-height);
  }
  .inventory-card {
    transform-origin: center bottom;
    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease;
  }
  .inventory-card:hover {
    z-index: 2;
    transform: scale(1.25);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.62);
  }
}

/* ============================================================
   SELECTED JOB DETAIL CARD — smallcard2.png redesign (2026-09-25)
   Uniform portrait card for all four types (Freight / Available Driver /
   Backfreight / Job) in BOTH collapsed and expanded states. Real text only,
   artwork background, two-column stats (no Weight/Reward). Scoped to the
   desktop board detail panel (body.my-jobs-map-mode). */
@media (min-width: 769px) {
  /* Anchor the panel bottom-right as an auto-sized box so the card is never clipped. */
  body.my-jobs-map-mode :is(#detailWrap, .rx-detailWrap):not([hidden]) {
    position: absolute;
    inset: auto 12px 34px auto;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    display: block;
    overflow: visible;
    pointer-events: none;
  }
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel).board-detail-card {
    --dc-w: clamp(216px, 19vw, 248px);
    --dc-h: clamp(278px, 44vh, 302px);
    box-sizing: border-box;
    width: var(--dc-w);
    height: var(--dc-h);
    max-height: calc(100vh - 90px);
    padding: 10px;
    gap: 6px;
    border-radius: 12px;
    border-left-width: 3px;
    color: #11171d;
    overflow-y: auto;
    pointer-events: auto;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
  }
  /* Readability scrim over the artwork: opaque where the text sits, clear at the base. */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.94) 44%,
      rgba(255, 255, 255, 0.52) 72%,
      rgba(255, 255, 255, 0.14) 100%
    );
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    > * {
    position: relative;
    z-index: 1;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.freight {
    background-image: url("assets/detail-art-freight.png");
    border-color: #268fd0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.idle {
    background-image: url("assets/detail-art-idle.png");
    border-color: #23a96e;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.driver {
    background-image: url("assets/detail-art-driver.png");
    border-color: #d21f32;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.job {
    background-image: url("assets/detail-art-job.png");
    border-color: #e0b400;
  }
  /* Expanded = the full card matching largecard2.png. */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.expanded {
    width: calc(var(--dc-w) * 2);
    height: auto;
    min-height: 540px;
    max-width: calc(100vw - 320px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
  }

  /* Badge: solid colour gradient, white text with icon (matches largecard2.png). */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .job-type-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    border: 0;
    letter-spacing: 0.03em;
    font-size: 0.88rem;
    line-height: 1.05;
    padding: 4px 14px;
    border-radius: 999px;
    font-weight: 900;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.freight
    .job-type-label {
    background: linear-gradient(135deg, #268fd0 0%, #155e8c 100%);
    box-shadow: 0 3px 10px rgba(38, 143, 208, 0.4);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.idle
    .job-type-label {
    background: linear-gradient(135deg, #23a96e 0%, #136a43 100%);
    box-shadow: 0 3px 10px rgba(35, 169, 110, 0.4);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.driver
    .job-type-label {
    background: linear-gradient(135deg, #c41424 0%, #850b15 100%);
    box-shadow: 0 3px 10px rgba(196, 20, 36, 0.4);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.job
    .job-type-label {
    background: linear-gradient(135deg, #e6b400 0%, #9e7900 100%);
    box-shadow: 0 3px 10px rgba(230, 180, 0, 0.4);
    color: #fff;
  }

  /* Header Row: Pin left, Badge center, Star right */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-pin-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #14181c;
    color: var(--yellow);
    border: 1px solid var(--yellow);
    cursor: pointer;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-pin-btn.active {
    background: var(--yellow);
    color: #14181c;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .star-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1.15rem;
    border: 2px solid #1f6fd0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #1f6fd0;
    cursor: pointer;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .star-btn.active {
    color: #1f9d63;
    border-color: #2e7d55;
    background: rgba(105, 240, 174, 0.22);
  }

  /* Expanded content wrapper */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-expanded-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Route Header Block (FROM/TO track on left, Distance card on right) */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-header-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin: 6px 0 10px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-endpoints {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 16px;
    padding: 2px 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-track-pin {
    font-size: 0.92rem;
    line-height: 1;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-track-line {
    width: 2px;
    flex: 1 1 auto;
    background: repeating-linear-gradient(
      to bottom,
      #dc2626 0,
      #dc2626 3px,
      transparent 3px,
      transparent 6px
    );
    margin: 2px 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.freight
    .dp-route-track-line {
    background: repeating-linear-gradient(
      to bottom,
      #268fd0 0,
      #268fd0 3px,
      transparent 3px,
      transparent 6px
    );
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.idle
    .dp-route-track-line {
    background: repeating-linear-gradient(
      to bottom,
      #23a96e 0,
      #23a96e 3px,
      transparent 3px,
      transparent 6px
    );
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.job
    .dp-route-track-line {
    background: repeating-linear-gradient(
      to bottom,
      #e6b400 0,
      #e6b400 3px,
      transparent 3px,
      transparent 6px
    );
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-track-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.freight
    .dp-route-track-dot {
    background: #268fd0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.idle
    .dp-route-track-dot {
    background: #23a96e;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.job
    .dp-route-track-dot {
    background: #e6b400;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-step {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-step-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.04em;
    line-height: 1.1;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-step-name {
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-endpoints--single
    .dp-route-step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-route-pin-icon {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 2px;
  }

  /* Frosted Distance / Range Card on right */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-dist-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-dist-icon {
    color: #1f2937;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-dist-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-dist-label {
    font-size: 0.62rem;
    color: #64748b;
    font-weight: 600;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-dist-val {
    font-size: 0.96rem;
    font-weight: 900;
    color: #0f172a;
    white-space: nowrap;
  }

  /* Specs List with crisp black icons */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-specs-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 6px 0 14px;
    max-width: 65%;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    min-height: 22px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-ico {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1f2937;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-name {
    color: #475569;
    font-weight: 600;
    min-width: 88px;
    font-size: 0.74rem;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-value {
    color: #0f172a;
    font-weight: 850;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-pill {
    background: #d1fae5;
    color: #047857;
    font-weight: 850;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  /* 3 Action Buttons */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-buttons {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
    margin: auto 0 10px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
    text-align: left;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-btn:hover {
    transform: translateY(-1px);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-ico {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-title {
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-sub {
    font-size: 0.6rem;
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-btn--message {
    background: linear-gradient(180deg, #c81d2a 0%, #9e121d 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.4);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.freight
    .dp-action-btn--message {
    background: linear-gradient(180deg, #268fd0 0%, #176596 100%);
    box-shadow: 0 4px 14px rgba(38, 143, 208, 0.4);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.idle
    .dp-action-btn--message {
    background: linear-gradient(180deg, #23a96e 0%, #146e45 100%);
    box-shadow: 0 4px 14px rgba(35, 169, 110, 0.4);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.job
    .dp-action-btn--message {
    background: linear-gradient(180deg, #e6b400 0%, #a88100 100%);
    box-shadow: 0 4px 14px rgba(230, 180, 0, 0.4);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-btn--offer {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-action-btn--save {
    background: rgba(255, 255, 255, 0.8);
    color: #0f172a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
  }

  /* Footer Stats & Poster row */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-stats-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 4px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-footer-stats-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-f-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: default;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    [data-find-matches].dp-f-stat {
    cursor: pointer;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-f-stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-f-stat-label {
    font-size: 0.6rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-f-stat-val {
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-f-stat-val--green {
    color: #059669;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-f-stat-sub {
    font-size: 0.56rem;
    color: #94a3b8;
    white-space: nowrap;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-footer-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #0f172a;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #11171d;
    color: #fff;
    padding: 4px 10px;
    border-radius: 7px;
    font-weight: 800;
    font-size: 0.7rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-contact-btn:hover {
    background: #000;
    color: #ffd400;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-owner-btns {
    display: flex;
    gap: 4px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-owner-btns
    .btn {
    padding: 2px 6px;
    font-size: 0.66rem;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card:not(.expanded)
    .dp-foot {
    display: none;
  }

  /* Collapsed Compact View matching smallcard.png */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 3px;
    min-height: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 850;
    align-self: flex-start;
    margin: 1px 0 3px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-user-trophy {
    font-size: 0.76rem;
    line-height: 1;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-user-pill-name {
    color: #fff;
    white-space: nowrap;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-route {
    margin-bottom: 3px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-route-pair {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-single-loc {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-city {
    font-size: 0.9rem;
    font-weight: 900;
    color: #0f172a;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-arrow {
    font-size: 0.72rem;
    font-weight: 900;
    color: #64748b;
    line-height: 1;
    margin: -1px 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-sub {
    font-size: 0.72rem;
    color: #475569;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 2-Column Stats Grid matching smallcard.png */
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3px 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(17, 23, 29, 0.25);
    margin-top: 2px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-stat-col {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-stat-col--right {
    border-left: 1px solid rgba(17, 23, 29, 0.18);
    padding-left: 8px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.67rem;
    line-height: 1.2;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-stat-ico {
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1f2937;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-stat-ico
    svg {
    width: 13px;
    height: 13px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-stat-lbl {
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-c-stat-val {
    color: #0f172a;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   Mobile big cards for Freight / Available Driver / Job.
   Mirror of the Driver Trip card (BigDriverCard): same .big-driver-card /
   .bdc-* markup, keeping background art and applying uniform themes.
   ============================================================ */
.small-route-card .big-driver-card.driver {
  background-image: url("assets/job-card-driver-art.png");
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.45),
    0 16px 36px rgba(0, 0, 0, 0.35);
}
.small-route-card .big-driver-card.freight {
  background-image: url("assets/job-card-freight-art.png");
  box-shadow:
    0 0 0 1px rgba(38, 143, 208, 0.5),
    0 16px 36px rgba(0, 0, 0, 0.35);
}
.small-route-card .big-driver-card.idle {
  background-image: url("assets/job-card-idle-driver-art.png");
  box-shadow:
    0 0 0 1px rgba(35, 169, 110, 0.5),
    0 16px 36px rgba(0, 0, 0, 0.35);
}
.small-route-card .big-driver-card.job {
  background-image: url("assets/detail-art-job.png");
  box-shadow:
    0 0 0 1px rgba(230, 180, 0, 0.55),
    0 16px 36px rgba(0, 0, 0, 0.35);
}

.big-driver-card.freight .bdc-trip-badge {
  background: linear-gradient(135deg, #268fd0 0%, #155e8c 100%);
  box-shadow: 0 4px 14px rgba(38, 143, 208, 0.45);
}
.big-driver-card.idle .bdc-trip-badge {
  background: linear-gradient(135deg, #23a96e 0%, #136a43 100%);
  box-shadow: 0 4px 14px rgba(35, 169, 110, 0.45);
}
.big-driver-card.job .bdc-trip-badge {
  background: linear-gradient(135deg, #e6b400 0%, #9e7900 100%);
  box-shadow: 0 4px 14px rgba(230, 180, 0, 0.45);
}

.big-driver-card.freight .bdc-close-btn {
  background: #268fd0;
  box-shadow: 0 2px 8px rgba(38, 143, 208, 0.4);
}
.big-driver-card.freight .bdc-close-btn:hover {
  background: #1e78b2;
}
.big-driver-card.idle .bdc-close-btn {
  background: #23a96e;
  box-shadow: 0 2px 8px rgba(35, 169, 110, 0.4);
}
.big-driver-card.idle .bdc-close-btn:hover {
  background: #1c8b59;
}
.big-driver-card.job .bdc-close-btn {
  background: #e6b400;
  box-shadow: 0 2px 8px rgba(230, 180, 0, 0.4);
}
.big-driver-card.job .bdc-close-btn:hover {
  background: #c49a00;
}

.big-driver-card.freight .bdc-btn--message {
  background: linear-gradient(180deg, #268fd0 0%, #176596 100%);
  box-shadow: 0 4px 14px rgba(38, 143, 208, 0.4);
}
.big-driver-card.idle .bdc-btn--message {
  background: linear-gradient(180deg, #23a96e 0%, #146e45 100%);
  box-shadow: 0 4px 14px rgba(35, 169, 110, 0.4);
}
.big-driver-card.job .bdc-btn--message {
  background: linear-gradient(180deg, #e6b400 0%, #a88100 100%);
  box-shadow: 0 4px 14px rgba(230, 180, 0, 0.4);
}

.big-driver-card .bdc-hero-route--single {
  justify-content: space-between;
  align-items: flex-end;
}
.big-driver-card .bdc-hero-single-tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.big-driver-card .bdc-timeline-stops--single {
  justify-content: space-between;
  align-items: center;
}
.big-driver-card .bdc-t-range-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

@media (max-width: 380px) {
  .big-driver-card .bdc-slogan-wrap {
    display: none;
  }
}

.small-route-card .big-driver-card.freight .bdc-scroll {
  scrollbar-color: rgba(38, 143, 208, 0.45) transparent;
}
.small-route-card
  .big-driver-card.freight
  .bdc-scroll::-webkit-scrollbar-thumb {
  background: rgba(38, 143, 208, 0.45);
}
.small-route-card .big-driver-card.idle .bdc-scroll {
  scrollbar-color: rgba(35, 169, 110, 0.45) transparent;
}
.small-route-card .big-driver-card.idle .bdc-scroll::-webkit-scrollbar-thumb {
  background: rgba(35, 169, 110, 0.45);
}
.small-route-card .big-driver-card.job .bdc-scroll {
  scrollbar-color: rgba(230, 180, 0, 0.5) transparent;
}
.small-route-card .big-driver-card.job .bdc-scroll::-webkit-scrollbar-thumb {
  background: rgba(230, 180, 0, 0.5);
}

/* Expanded Freight cards compare distinct planner routes beside the selected map. */
@media (min-width: 900px) {
  body.freight-route-compare-mode .main-frame.rx-boardMapFrame {
    display: grid;
    grid-template-columns: minmax(270px, 36%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    overflow: hidden;
  }
  body.my-jobs-map-mode.freight-route-compare-mode
    :is(#detailWrap, .rx-detailWrap):not([hidden]) {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: 100%;
    max-height: none;
    overflow: hidden;
    pointer-events: auto;
    z-index: 2;
  }
  body.my-jobs-map-mode.freight-route-compare-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card,
  body.my-jobs-map-mode.freight-route-compare-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.expanded {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    max-width: none;
    overflow: auto;
  }
  body.freight-route-compare-mode .rx-map-section {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }
}

.freight-route-legend {
  position: absolute;
  z-index: 500;
  right: 14px;
  bottom: 48px;
  display: grid;
  gap: 7px;
  width: min(310px, calc(100% - 28px));
  max-height: min(45vh, 280px);
  overflow: auto;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: rgba(12, 17, 23, 0.9);
  color: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.38);
  font-size: 0.78rem;
  pointer-events: auto;
}
.freight-route-legend > strong {
  font-size: 0.84rem;
}
.freight-route-legend-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.freight-route-swatch {
  width: 17px;
  height: 4px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.freight-route-legend-item small {
  color: #d7e0e8;
  font-size: 0.72rem;
  white-space: nowrap;
}
.freight-route-status {
  color: #ffe8a3;
  line-height: 1.4;
}
.freight-route-confirm {
  justify-self: end;
  min-width: 92px;
  padding: 7px 16px;
  border: 0;
  border-radius: 6px;
  background: #f2c94c;
  color: #18212a;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.freight-route-confirm:hover {
  background: #ffdc67;
}

/* Keep the web board flush under the header with no top seam. */
body.react-sidebar-swap .app {
  margin-top: -1px;
}

/* Phone: the small card shown over the map after a job is chosen from My jobs; tapping it opens the full card */
@media (max-width: 768px) {
  .map-mini-card {
    position: absolute;
    z-index: 1200;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    --map-mini-width: clamp(90px, calc((100vw - 40px) / 2.57), 156px);
    --map-mini-height: clamp(113px, calc(37.44vw - 16px), 152px);
    width: var(--map-mini-width);
    cursor: pointer;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55));
  }
  .map-mini-card {
    display: block;
    min-height: 0;
    background: none;
    border: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .map-mini-card::before {
    display: none;
  }
  .map-mini-card .inventory-card {
    width: 100%;
    height: var(--map-mini-height);
    min-height: 0;
    flex: none;
    gap: 2px;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    touch-action: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  .map-mini-card .route-card {
    margin: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    pointer-events: none;
  }
  .map-mini-card .route-card .card-hint,
  .map-mini-card .route-card [class*="tap-hint"] {
    display: none;
  }
  .map-mini-card-hint {
    display: block;
    max-width: var(--map-mini-width);
    margin: 4px auto 0;
    text-align: center;
    font-size: 0.64rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px #000;
  }
}
@media (min-width: 769px) {
  .map-mini-card {
    display: none;
  }
}

/* A verified driver's note on a map place card (Leaflet popups) */
.leaflet-popup-content .place-note {
  margin-top: 6px;
  padding: 5px 7px;
  border-left: 3px solid #d4a017;
  background: rgba(212, 160, 23, 0.14);
  border-radius: 6px;
}

/* Desktop web view: keep the small inventory cards at the map's bottom-left,
   remove the map zoom buttons, and keep the sidebar free of the old white fade. */
@media (min-width: 769px) {
  .inventory-tray {
    left: var(--sbw);
    bottom: 0;
    width: min(calc(100vw - var(--sbw)), var(--sbw));
  }
  .rx-map .leaflet-control-zoom {
    display: none !important;
  }
  body.inventory-visible .sidebar-list {
    padding-bottom: 8px;
    scroll-padding-bottom: 8px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.inventory-visible .sidebar::after {
    content: none;
    display: none;
    background: none;
  }
  /* Readable MY JOBS helper chip, left-aligned with the first inventory card. */
  .inventory-heading {
    left: 20px;
    right: auto;
    bottom: 6px;
    height: auto;
    min-height: 24px;
    justify-content: flex-start;
    padding: 4px 9px;
    border: 1px solid #000;
    border-radius: 7px;
    background: rgba(17, 23, 29, 0.94);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  }
  .inventory-heading .hint-desktop {
    color: #fff;
    opacity: 0.88;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
  }
}

/* While a card is dragged, replace the MY JOBS hint with matching instructions. */
.inventory-heading.is-dragging {
  height: auto;
  max-width: calc(100% - 40px);
  line-height: 1.2;
  white-space: normal;
}
.inventory-heading.is-dragging .inventory-drag-hint {
  display: block;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.inventory-heading.is-dragging .inventory-drag-hint b {
  color: var(--yellow, #ffd400);
  font-weight: 950;
}
.inventory-heading.is-dragging .inventory-scroll-button {
  display: none;
}

/* Selected main-map cards stay inside the map frame; keep the existing card
   treatment while giving the right-side spec values enough room to wrap. */
@media (min-width: 769px) {
  body.my-jobs-map-mode :is(#detailPanel, .rx-detailPanel).board-detail-card {
    max-width: 100%;
    overflow-x: hidden;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-specs-list {
    max-width: 100%;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-line {
    min-width: 0;
    gap: 6px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-name {
    flex: 1 1 0;
    min-width: 0;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-spec-value {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 52%;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.78);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-pin-btn {
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid #d21f32;
    border-radius: 50%;
    color: #d21f32;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-pin-btn.active {
    border-color: #d21f32;
    background: #d21f32;
    color: #fff;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card.idle
    .job-type-label {
    gap: 5.4px;
    padding: 3.6px 12.6px;
    font-size: 0.79rem;
  }
}

/* Desktop: a selected Freight card gives the planner and map the whole width. */
@media (min-width: 769px) {
  body.react-sidebar-swap.freight-card-open .app {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
  body.freight-card-open #react-live-sidebar {
    display: none !important;
  }
  body.freight-card-open .rx-sidebarTab,
  body.freight-card-open .inventory-tray {
    display: none !important;
  }
  body.freight-card-open :is(#detailWrap, .rx-detailWrap) {
    display: none !important;
  }
}

/* In the expanded freight comparison layout, keep the floating job inventory
   in the map column instead of letting it cover the enlarged card. */
@media (min-width: 900px) {
  body.freight-route-compare-mode .inventory-tray {
    left: calc(var(--sbw) + max(31vw, 310px));
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* Keep the compact owner chip and expansion cue fixed over the card. */
@media (min-width: 769px) {
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-footer {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    width: auto;
    margin: 0;
    pointer-events: none;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-footer
    .dp-collapsed-user-pill {
    position: absolute;
    top: 47px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: max-content;
    max-width: min(156px, calc(100% - 16px));
    min-width: 0;
    margin: 0;
    padding: 4px 9px;
    border: 1px solid #075b91;
    border-radius: 999px;
    background: #147bb5;
    color: #fff;
    box-shadow: 0 2px 5px rgba(14, 53, 78, 0.28);
    overflow: hidden;
    pointer-events: auto;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-collapsed-footer
    .dp-user-pill-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    :is(.dp-user-name, .dp-user-pill-name) {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-expand-hint {
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #bf1728;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  }
}

/* Main Jobs map toolbar styles are owned by react-shell/src/ui/maps.css. */

/* No-match freight flow: keep the existing freight detail visible beside the
   profile-prefilled driver form, then let phone users switch between panels. */
.dp-no-match-cta {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(220, 91, 75, 0.42);
  border-radius: 10px;
  background: rgba(255, 244, 242, 0.08);
  color: #fff1ed;
  font-size: 0.9rem;
  line-height: 1.45;
}
.dp-no-match-cta button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #ff8e80;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dp-action-btn.is-disabled,
.dp-action-btn:disabled {
  opacity: 0.46;
  filter: grayscale(0.75);
  cursor: not-allowed;
}
.match-compose-view-card,
.match-compose-toggle-form {
  min-height: 38px;
  border: 1px solid rgba(15, 91, 56, 0.42);
  border-radius: 9px;
  padding: 7px 11px;
  background: linear-gradient(180deg, #e7f5e9 0%, #cbe8d0 100%);
  color: #103b2b;
  font:
    750 0.82rem/1.15 system-ui,
    sans-serif;
  cursor: pointer;
}
.match-compose-view-card:focus-visible,
.match-compose-toggle-form:focus-visible,
.dp-no-match-cta button:focus-visible {
  outline: 2px solid #ffd166;
  outline-offset: 2px;
}

@media (min-width: 769px) {
  .standalone-form-modal.match-compose-open {
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    padding: calc(var(--header-h, 52px) + 10px) 12px 12px;
    background: transparent;
    pointer-events: none;
  }
  .standalone-form-modal.match-compose-open .standalone-route-form {
    width: calc(50vw - 24px);
    max-width: none !important;
    height: 100%;
    max-height: 100% !important;
    margin: 0 auto 0 0;
    overflow: auto;
    pointer-events: auto;
  }
  .match-compose-view-card {
    display: none;
  }
  .rx-detailWrap.match-compose-target-wrap {
    position: fixed;
    z-index: 9801;
    top: calc(var(--header-h, 52px) + 10px);
    right: 12px;
    bottom: 12px;
    width: calc(50vw - 24px);
    max-height: none;
    overflow: hidden;
    pointer-events: auto;
  }
  .rx-detailWrap.match-compose-target-wrap .rx-detailPanel {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: auto;
  }
}
@media (max-width: 768px) {
  .standalone-form-modal.match-compose-open.match-card-view {
    display: none !important;
  }
  .rx-detailWrap.match-compose-target-wrap {
    position: fixed;
    z-index: 9700;
    top: calc(var(--header-h, 52px) + 8px);
    right: 8px;
    bottom: 8px;
    left: 8px;
    overflow: auto;
  }
  .rx-detailWrap.match-compose-target-wrap .rx-detailPanel {
    box-sizing: border-box;
    width: 100%;
    max-height: 100%;
    overflow: auto;
  }
  .match-compose-toggle-form {
    min-height: 34px;
    max-width: 130px;
    padding: 6px 8px;
    font-size: 0.72rem;
  }
}

/* The compact-card pin now sits beside Favourite and matches its footprint. */
@media (min-width: 769px) {
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-top-actions
    .dp-pin-btn {
    position: static;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #d21f32;
    border-radius: 8px;
    background: #fff;
    color: #d21f32;
  }
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-top-actions
    .dp-pin-btn.active {
    background: #fff;
    color: #d21f32;
  }
}

@media (max-width: 768px) {
  body.my-jobs-map-mode
    :is(#detailPanel, .rx-detailPanel).board-detail-card
    .dp-top-actions
    .dp-pin-btn {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid #d21f32;
    border-radius: 6px;
    background: #fff;
    color: #d21f32;
  }
}