/* ============================================================================
   mobile.css  —  ServicePulse mobile layout
   Shown at ≤ 980px; hidden on desktop.
   Referenced in index.html as ./css/mobile.css?v=5
   ============================================================================ */

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Desktop: hide the mobile bars, show the page top bar ─────────────────── */
#mobileTopBar       { display: none; }
#mobileTabBar       { display: none; }
#mtSettingsPopover  { display: none; }
#pageTopBar         { display: flex; }

/* ── ≤ 980px: swap bars ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Hide the desktop page-top bar */
  #pageTopBar { display: none !important; }

  /* ── Mobile top bar ──────────────────────────────────────────────────────── */
  #mobileTopBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 130;
    height: 54px;
    padding: 0 10px;
    background: rgba(7, 10, 22, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mtbLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .mtbRight {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  /* Hamburger + date icon buttons */
  .mtbBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mtbBtn:hover,
  .mtbBtn:active { background: rgba(255, 255, 255, 0.14); }

  /* Logo link */
  .mtbLogo {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    flex-shrink: 0;
  }
  .mtbLogoText {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  .mtbLogoText span { color: #ef4444; }

  /* Current page title */
  .mtbPageTitle {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    margin-left: 2px;
  }

  /* Date button override (wider, text inside) */
  #mtbDateBtn {
    width: auto;
    padding: 0 12px;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }

  /* ── Push page content below the top bar ─────────────────────────────────── */
  .wrap {
    padding-top: 64px !important;  /* top bar (54px) + breathing room */
    padding-bottom: 72px !important; /* bottom tab bar height + breathing room */
  }

  /* ── Side menu: full-screen overlay on mobile ────────────────────────────── */
  .sideMenu {
    position: fixed !important;
    top: 54px !important;           /* flush below the top bar */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    z-index: 125 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ── Mobile bottom tab bar ───────────────────────────────────────────────── */
  #mobileTabBar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 130;
    background: rgba(7, 10, 22, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Respect device safe area (iPhone notch/home indicator) */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #mobileTabBar nav {
    display: flex;
    align-items: stretch;
    height: 56px;
  }

  /* Each tab */
  .mtTab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 6px 4px;
    border-radius: 0;
    transition: color 0.12s, background 0.12s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    /* Button reset (so <button class="mtTab"> matches <a class="mtTab">) */
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    margin: 0;
  }
  .mtTab svg,
  .mtTab img,
  .mtTab .mtTabIcon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
    transition: filter 0.12s;
  }
  .mtTab span {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.15px;
  }

  /* Active tab */
  .mtTab.active {
    color: #ef4444;
  }
  /* Active state: keep the menu icon's own colors (do NOT recolor strokes).
     Add a glow + a slight scale for emphasis. */
  .mtTab.active svg,
  .mtTab.active img,
  .mtTab.active .mtTabIcon {
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.50));
    transform: scale(1.06);
  }
  /* Active tab indicator line */
  .mtTab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: #ef4444;
  }

  .mtTab:active {
    background: rgba(255, 255, 255, 0.06);
  }

  /* ── Mobile tab bar — Settings popover ─────────────────────────────────── */
  #mtSettingsPopover {
    position: fixed;
    right: 8px;
    bottom: 64px; /* sits above the tab bar (which is ~56px tall + safe-area) */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    min-width: 180px;
    max-width: calc(100vw - 16px);
    background: rgba(15, 20, 45, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0,0,0,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 1100; /* above tab bar (1000) */
  }
  #mtSettingsPopover.open { display: flex; }
  #mtSettingsPopover .mtSpItem {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  #mtSettingsPopover .mtSpItem:hover,
  #mtSettingsPopover .mtSpItem:active {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
  }
  #mtSettingsPopover .mtSpNoAccess {
    padding: 10px 14px 6px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(234, 240, 255, 0.45);
  }

  /* ── Mobile tab bar — Date picker popover ─────────────────────────────── */
  #mtDatePopover {
    position: fixed;
    left: 8px;
    bottom: 64px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    min-width: 200px;
    max-width: calc(100vw - 16px);
    background: rgba(15, 20, 45, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0,0,0,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 1100;
  }
  #mtDatePopover.open { display: flex; }
  #mtDatePopover .mtDpOpt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  #mtDatePopover .mtDpOpt:hover,
  #mtDatePopover .mtDpOpt:active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  #mtDatePopover .mtDpOpt.active {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
  }
  #mtDatePopover .mtDpOpt.active::before {
    content: '✓ ';
    color: #ef4444;
  }
  #mtDatePopover .mtDpDivider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 3px 6px;
  }
  #mtDatePopover .mtDpCustom {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px 4px;
  }
  #mtDatePopover .mtDpCustom.open { display: flex; }
  #mtDatePopover .mtDpCusRow {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #mtDatePopover .mtDpCusLbl {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 32px;
    flex-shrink: 0;
  }
  #mtDatePopover .mtDpCusInput {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 8px;
    outline: none;
    color-scheme: dark;
    transition: border-color 0.15s;
  }
  #mtDatePopover .mtDpCusInput:focus {
    border-color: rgba(239, 68, 68, 0.6);
  }
  #mtDatePopover .mtDpApply {
    background: rgba(239, 68, 68, 0.75);
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    padding: 7px;
    cursor: pointer;
    width: 100%;
    margin-top: 2px;
    transition: background 0.15s;
  }
  #mtDatePopover .mtDpApply:hover,
  #mtDatePopover .mtDpApply:active {
    background: rgba(239, 68, 68, 0.95);
  }

  /* ── Sign Out tab — red color treatment to match icon and signal destructive action ── */
  .mtTab.mtTabSignOut {
    color: rgba(239, 68, 68, 0.75);
  }
  .mtTab.mtTabSignOut:active {
    background: rgba(239, 68, 68, 0.10);
  }
}

/* ── ≤ 540px tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #mobileTopBar { height: 50px; }
  .wrap { padding-top: 60px !important; padding-bottom: 68px !important; }
  .sideMenu { top: 50px !important; }

  .mtbLogoText { font-size: 15px; }
  .mtbPageTitle { font-size: 13px; }
  #mtbDateBtn { font-size: 11px; padding: 0 8px; }

  #mobileTabBar nav { height: 52px; }
  .mtTab { gap: 2px; padding: 5px 2px; }
  .mtTab svg, .mtTab img, .mtTab .mtTabIcon { width: 20px; height: 20px; }
  .mtTab span { font-size: 9px; }
}

/* ── ≤ 380px: very small phones — hide page title in top bar ─────────────── */
@media (max-width: 380px) {
  .mtbPageTitle { display: none; }
  .mtbLogoText { font-size: 14px; }
}

/* ============================================================================
   Side menu scrim: tap anywhere outside menu to close
   ============================================================================ */
@media (max-width: 980px) {
  .menuScrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 120;
    display: none;
  }
  #menuToggle:checked ~ .menuScrim { display: block; }
}

/* ============================================================================
   Popup / modal safe-area adjustments for mobile
   ============================================================================ */
@media (max-width: 980px) {
  /* Keep fixed popups above the bottom tab bar, constrain height so they scroll if needed */
  .svcInfoPopup,
  .techInfoPopup,
  .gpInfoPopup {
    max-height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px) - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   Login page: hide tab bar and offset
   ============================================================================ */
@media (max-width: 980px) {
  body.login-active #mobileTabBar { display: none !important; }
  body.login-active .wrap { padding-bottom: 16px !important; }
  body.login-active #mobileTopBar { display: none !important; }
}

/* ============================================================================
   ADDITIONAL MOBILE IMPROVEMENTS  (appended)
   ============================================================================ */

/* ── Prevent horizontal overflow globally on mobile ─────────────────────── */
@media (max-width: 980px) {
  html {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }
  body {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #app {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Clip at every major page wrapper */
  .pageServicesDash,
  .pageTechDash,
  .pageAdvisorDash,
  .pageGoals,
  .pageTrend,
  .pageSettings {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Kill the desktop-floating hamburger notch on ALL pages —
     the mobile top bar already has the hamburger. */
  .techMenuFloat,
  .trMenuFloat,
  .advMenuNotch { display: none !important; }

  /* Remove the left-indent that the notch stage created to make room for the
     floating hamburger — no longer needed on mobile. */
  .techNotchStage,
  .trNotchStage,
  .advNotchStage {
    margin-left: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .techNotchStage .panel.techHeaderPanel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    border-left: 1px solid rgba(200,45,45,.45) !important;
  }
}

/* ── Touch targets: selects & inputs ──────────────────────────────────────── */
@media (max-width: 980px) {
  select { min-height: 44px; }
  /* Override the global app.css rule that forces 16px on all inputs/selects —
     keep font-size ≥ 16px to prevent iOS zoom, but allow custom sizing */
  select, input[type="text"], input[type="number"], input[type="date"] {
    font-size: 16px !important;  /* prevent iOS auto-zoom */
  }
}

/* ── Trend page: extra tightening at 540px ───────────────────────────────── */
@media (max-width: 540px) {
  .trMainRow  { gap: 8px; }
  .trFilters  { padding: 10px 10px 12px; gap: 6px; }
  .trFG       { flex: 1 1 140px; }
  .trGraphPanel { min-height: 280px; }
  /* font-size → canonicalTypographyRules */
  .trBotBody  { padding: 10px 12px 14px; gap: 10px; }
  .trFiltersTitle { font-size: 9px; }

  /* Trend filter panel: full-column stacked at very small widths */
  .trFG { flex: 1 1 100%; }
}

/* ── Services Dashboard: header wrapping ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Main header panel: stack the two panels vertically */
  .pageServicesDash .techHeaderPanel .dashTopRow {
    flex-direction: column !important;
    gap: 10px !important;
  }
  /* Section header right cluster: allow wrap */
  .pageServicesDash .svcDashSecHeadRight {
    flex-wrap: wrap !important;
    gap: 10px !important;
    white-space: normal !important;
    justify-content: flex-start !important;
  }
  .pageServicesDash .svcDashSecHeadRightTop {
    flex-wrap: wrap !important;
    gap: 10px !important;
    white-space: normal !important;
  }
  /* Shrink note text under filters */
  .pageServicesDash .techHeaderPanel .svcHdrNote { font-size: 12px; }
  .pageServicesDash .techHeaderPanel .svcHdrNote .svcHdrNoteL1,
  .pageServicesDash .techHeaderPanel .svcHdrNote .svcHdrNoteL2 {
    white-space: normal !important;
  }
}
@media (max-width: 540px) {
  /* Service cat card header: sdCatHdrRow to wrap tighter */
  .pageServicesDash .sdCatHdrRow { gap: 12px !important; }
  /* Dial shrink inside service header rows */
  .pageServicesDash .svcDashSecHeadRight .svcGaugeWrap {
    width: 44px !important; height: 44px !important;
  }
  .pageServicesDash .svcDashSecHeadRight .svcGauge {
    --sz: 44px !important; width: 44px !important; height: 44px !important;
  }
  /* Section title */
  .pageServicesDash .svcDashSecName { font-size: 18px !important; }
  /* Tech meta rows inside service cards */
  .pageServicesDash .svcTechMetaRow { flex-wrap: wrap !important; }
}

/* ── Advisor detail: catCard header wrap ─────────────────────────────────── */
@media (max-width: 540px) {
  body.route-advisor .catCard .catHeader { flex-wrap: nowrap !important; flex-direction: row !important; }
  body.route-advisor .sdCatHdrRow { justify-content: flex-start !important; }

  /* Focus stats text shrink */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
}

/* ── Tech detail: catCard header wrap ────────────────────────────────────── */
@media (max-width: 540px) {
  body.route-tech .catCard .catHeader { flex-wrap: nowrap !important; flex-direction: row !important; }
  body.route-tech .techCatHdrRight {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ── Metric blocks (catCard body) ────────────────────────────────────────── */
@media (max-width: 540px) {
  .catCard .metricBlock { padding: 10px 10px !important; }
  .catCard .mbLeft  { padding-right: 10px !important; }
  .catCard .mbRight { padding-left: 10px !important; }
}

/* ── Goals page: info popup keeps in viewport ────────────────────────────── */
@media (max-width: 768px) {
  #goalsInfoPopup {
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    width: auto !important;
  }
}

/* ── Advisor main list: rank badge absolute → relative ───────────────────── */
@media (max-width: 540px) {
  /* Already handled in renderAdvisorMain.js @media(max-width:768px).
     Extra safety: prevent badge clipping on very small screens. */
  .pageAdvisorDash .advRow .techMetaRight {
    position: static !important;
    margin-left: auto !important;
    align-self: flex-start !important;
  }
  .pageAdvisorDash .advRow .pills { padding-right: 0 !important; }
  /* Advisor list rank badge: match tech list sizing (60×60) */
  .pageAdvisorDash .advRow .techMetaRight .rankFocusBadge {
    --w: 60px !important;
    --h: 60px !important;
  }
}

/* ── Panel phead padding on small screens ────────────────────────────────── */
@media (max-width: 540px) {
  .panel .phead { padding: 12px 12px 10px !important; }
  .panel .list  { padding: 0 10px 10px !important; }
}

/* ── catCard padding tighter on phone ────────────────────────────────────── */
@media (max-width: 540px) {
  .catCard { padding: 10px 10px !important; border-radius: 14px !important; }
}

/* ── Section header: keep dials from overflowing ────────────────────────── */
@media (max-width: 540px) {
  .secHdrRight  { flex-wrap: wrap !important; gap: 8px !important; }
  .secNamePills { gap: 5px !important; }
}

/* ── Footer: add extra bottom space so it clears the tab bar ─────────────── */
@media (max-width: 980px) {
  .footer { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Rank / GP badge sizing: keep readable on tiny phones ───────────────── */
@media (max-width: 380px) {
  .rankFocusBadge {
    width: 56px !important; height: 56px !important;
    --w: 56px !important; --h: 56px !important;
  }
  body.route-advisor .gpFocusBadge,
  body.route-tech   .gpFocusBadge {
    --w: 58px !important; --h: 58px !important;
  }
}

/* ── Pill sizing on advisor/tech list pages at phone widths ──────────────── */
@media (max-width: 380px) {
  .pill      { padding: 5px 8px !important; gap: 4px !important; }
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
}

/* ============================================================================
   POPUP & STAT STAR MOBILE IMPROVEMENTS
   ============================================================================ */

/* On very narrow phones, make info popups nearly full-width */
@media (max-width: 400px) {
  .svcInfoPopup,
  .techInfoPopup {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    left: 10px !important;
  }
}

/* Touch-friendly stat stars: expand tap area */
@media (max-width: 980px) {
  .svcStatStar.svcStarInline {
    padding: 2px 0 0px 0;
    min-height: 0px;
    display: inline-flex !important;
    align-items: center;
  }

  /* GP popup: full-width on mobile */
  .gpInfoPopup {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    left: 10px !important;
    max-height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px) - 24px) !important;
    overflow-y: auto !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — MOBILE LAYOUT IMPROVEMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Header diag wrapper: stack vertically */
  .pageServicesDash .svcdashHeaderWrap {
    grid-template-columns: 1fr !important;
  }

  /* Section head: allow flex wrapping */
  .pageServicesDash .svcDashSecHead {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pageServicesDash .svcDashSecHeadRight {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  .pageServicesDash .svcDashSecHeadRightTop {
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: flex-start !important;
  }

  /* Section title smaller */
  /* font-size → canonicalTypographyRules */

  /* Stat values in section head */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
}

@media (max-width: 540px) {
  /* Service section title tighten */
  /* font-size → canonicalTypographyRules */

  /* Section head dials: beat injected <style> (0,4,0 !important) via body prefix
     (0,4,1). Mobile: focus → 66px, mini → 56px. */
  body .pageServicesDash .svcSecHeadDials .svcGaugeWrap.focus,
  body .pageServicesDash .svcSecHeadDials .svcGaugeWrap.focus .svcGauge {
    --sz: 66px !important; width: 66px !important; height: 66px !important;
  }
  body .pageServicesDash .svcSecHeadDials .svcGaugeWrap.mini,
  body .pageServicesDash .svcSecHeadDials .svcGaugeWrap.mini .svcGauge {
    --sz: 56px !important; width: 56px !important; height: 56px !important;
  }
  body .pageServicesDash .svcSecHeadDials { gap: 14px !important; flex-wrap: wrap !important; row-gap: 8px !important; }
  body .pageServicesDash .svcSecHeadDials .svcGaugeCol {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  body .pageServicesDash .svcSecHeadDials .svcGaugeLbl {
    max-width: 85px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Section header mini dial text: 10/9/9px w800, label 9px/800, margin-top −2px */
  body .pageServicesDash .svcSecHeadDials .svcGaugeWrap.mini .pctMain { font-size: 10px !important; font-weight: 800 !important; }
  body .pageServicesDash .svcSecHeadDials .svcGaugeWrap.mini .pctArrow { font-size: 9px !important; font-weight: 800 !important; }
  body .pageServicesDash .svcSecHeadDials .svcGaugeWrap.mini .pctSub { font-size: 9px !important; font-weight: 800 !important; }
  body .pageServicesDash .svcSecHeadDials .svcGaugeLbl { font-size: 9px !important; font-weight: 800 !important; margin-top: 4px !important; }

  /* Header dials: match svcSecHeadDials mini spec (68px for ALL dials).
     Gap between dials: 16px. Label: 11px, margin-top 6px. */
  body .pageServicesDash .svcHdrGoalDials .svcGaugeWrap,
  body .pageServicesDash .svcHdrGoalDials .svcGauge {
    --sz: 56px !important; width: 56px !important; height: 56px !important;
  }
  body .pageServicesDash .svcHdrGoalDials .svcGaugeWrap {
    flex: 0 0 56px !important;
  }
  body .pageServicesDash .svcHdrGoalDials { gap: 12px !important; }
  body .pageServicesDash .svcHdrGoalDials .svcGaugeCol {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  body .pageServicesDash .svcHdrGoalDials .svcGaugeLbl {
    max-width: 85px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
  }
  /* Dial inner text: 10/9/9 w800 */
  body .pageServicesDash .svcHdrGoalDials .pctMain {
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  body .pageServicesDash .svcHdrGoalDials .pctArrow {
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-top: 0px !important;
  }
  body .pageServicesDash .svcHdrGoalDials .pctSub {
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* sdCatHdrRow dial at phone: 56px */
  .pageServicesDash .sdCatHdrRow .sdCatDialCol { width: 56px !important; }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeWrap {
    width: 56px !important; height: 56px !important;
  }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeCol {
    width: 56px !important;
  }

  /* sdCatFocusStats tighten */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */

  /* sdCatHdrRow gap tighter */
  .pageServicesDash .sdCatHdrRow { gap: 14px !important; }

  /* View mode buttons: stacked vertically, 25% larger than v38 shrunk size */
  .pageServicesDash .svcViewModeBtns { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; margin-top: 0 !important; width: auto !important; }
  .pageServicesDash .svcViewModeBtn  { flex: 0 0 auto !important; width: auto !important; font-size: 10px !important; padding: 4px 16px !important; border-width: 1.5px !important; border-radius: 7px !important; text-align: center !important; }
}

/* ============================================================================
   SERVICES DASHBOARD — MOBILE TOP HEADER LAYOUT
   - Title "Services Dashboard" wraps to two lines (Services / Dashboard)
   - Advisors / Technicians buttons stack vertically (handled in 540px block above)
   - Focus stats (overallBlock) absolutely positioned to top-right, sharing rows
     with the title; buttons/pills/dials below get full width since overallBlock
     is removed from flow
   - Beats app.css :768px rule that forces .techTitleRow to flex-direction:column
   ============================================================================ */
@media (max-width: 540px) {
  /* Force titleRow back to row layout and make it a positioning context.
     body prefix bumps specificity above app.css `.techTitleRow` (0,1,0) → 0,2,1 */
  body .pageServicesDash .titleRow.techTitleRow {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    position: relative !important;
  }
  /* Left column (techNameWrap): take full width — overallBlock is absolute */
  body .pageServicesDash .titleRow.techTitleRow > .techNameWrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Right column (overallBlock): absolute top-right, sits beside the 2-line title */
  body .pageServicesDash .titleRow.techTitleRow > .overallBlock {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    flex: 0 0 auto !important;
    text-align: right !important;
    z-index: 2 !important;
  }
  /* Force "Services Dashboard" title to stay compact.
     word-spacing:100vw was previously used to force a line break but it
     creates a >100vw inline box that causes horizontal scroll on iOS Safari
     even with overflow-x:hidden on body. Removed in favour of natural wrap
     via max-width constraint. */
  .pageServicesDash .techH2Big {
    word-spacing: normal !important;
    display: block !important;
    line-height: 1.05 !important;
    max-width: calc(100% - 110px) !important;
  }
  /* ── LAYOUT: title + buttons share .svcHdrTitleBtnWrap (flex column,
     width:fit-content). Pills and dials are direct children of techDashTopRow. ── */

  /* ── OVERFLOW FIX: force every container in the services dashboard
     header chain to respect viewport width. Apply box-sizing:border-box
     + max-width:100% + overflow-x:hidden at EVERY level. ── */
  .pageServicesDash,
  .pageServicesDash .svcdashHeaderWrap,
  .pageServicesDash .techNotchStage,
  .pageServicesDash .panel.techHeaderPanel,
  .pageServicesDash .panel.techHeaderPanel > .phead,
  .pageServicesDash .titleRow.techTitleRow,
  .pageServicesDash .techNameWrap,
  .pageServicesDash .techDashTopRow,
  .pageServicesDash .svcHdrTitleBtnWrap {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* techDashTopRow: tighten gap */
  .pageServicesDash .techDashTopRow {
    gap: 8px !important;
  }

  /* Title+button wrapper takes full width on mobile */
  .pageServicesDash .techDashTopRow > .svcHdrTitleBtnWrap {
    width: 100% !important;
  }

  /* Tighten gap between trend arrow and stat number on mobile.
     Main header: the inner flex inside techFocusTop has inline gap:8px.
     The trendArrowBtn itself has inline margin:0 -4px 0 0 — leave that alone,
     just reduce the gap. !important beats inline style. */
  .pageServicesDash .techHeaderPanel .overallBlock .techFocusTop > div:first-child {
    gap: 2px !important;
  }
  /* Section focus stats: inline gap:5px on .statValTop — tighten to 2px */
  .pageServicesDash .svcSecFocusStats .statValTop {
    gap: 2px !important;
  }

  /* Category section header focus stats — scaled for 60px container.
     body prefix (0,3,1 / 0,4,1) beats app.css canonical (0,3,0 / 0,4,0). */
  body .pageServicesDash .svcSecFocusStats .statValTop {
    font-size: 22px !important;
  }
  body .pageServicesDash .svcSecFocusStats > div:first-child .statLbl {
    font-size: 10px !important;
  }
  body .pageServicesDash .svcSecFocusStats .statValBot {
    font-size: 14px !important;
  }
  body .pageServicesDash .svcSecFocusStats > div:last-child .statLbl,
  .pageTechDash .catHdrRight .svcSecFocusStats > div:last-child .statLbl {
    font-size: 9px !important;
  }

  /* Filter row: horizontal single row, shrunk 25%.
     body prefix gives 0,4,1 specificity. */
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 4px !important;
    width: 100% !important;
  }
  /* Team / Focus / Pre-MPI dropdown wrappers: explicit 120px width.
     nth-child(1)(2)(3) covers techs view (Team+Focus) and advisors view
     (Focus+Pre-MPI for sold_ro mode, Focus alone otherwise). */
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(1):not(:last-child),
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(2):not(:last-child),
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(3):not(:last-child) {
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    box-sizing: border-box !important;
  }
  /* csel-wrap inside dropdown wrappers: 120px (override desktop app.css line 2035 min-width:150px;
     6-class specificity beats desktop's 4-class; all inside @media so desktop unaffected) */
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(1):not(:last-child) .csel-wrap,
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(2):not(:last-child) .csel-wrap,
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(3):not(:last-child) .csel-wrap {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    box-sizing: border-box !important;
  }
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(1):not(:last-child) .csel-trigger,
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(2):not(:last-child) .csel-trigger,
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:nth-child(3):not(:last-child) .csel-trigger {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    box-sizing: border-box !important;
  }
  /* Icons block (last child): close to dropdowns (8px gap), not pushed to right edge */
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow > div:last-child {
    margin-left: 8px !important;
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    margin-bottom: 0 !important;
  }
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow select {
    width: 100% !important;
    height: 75% !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  body .pageServicesDash .techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .filterRow label {
    font-size: 10px !important;
  }

  /* $ and lightbulb icons: 35px on mobile */
  body .pageServicesDash .gpToggleBtn {
    width: 35px !important;
    height: 35px !important;
  }
  body .pageServicesDash .gpToggleBtn svg {
    width: 35px !important;
    height: 35px !important;
  }
  body .pageServicesDash .aiLightbulbBtn {
    width: 35px !important;
    height: 35px !important;
  }
  body .pageServicesDash .aiLightbulbBtn svg {
    width: 35px !important;
    height: 35px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — MOBILE CATEGORY SECTION HEADER LAYOUT
   - Focus stats: absolutely positioned top-right of the entire svcDashSecHead
     (sits on the top row, aligned with the title)
   - Pills: 2 per row (CSS grid 2 columns)
   - svcDashSecHeadRight grid: dials on left, rank/gp badge on right
   - Beats injected <style> rules with body prefix and grid override.
   ============================================================================ */
@media (max-width: 540px) {
  /* Section head: position context for absolute badge + stats.
     body prefix (0,2,1) beats injected (0,2,0). */
  body .pageServicesDash .svcDashSecHead {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    gap: 8px !important;
    padding: 10px 14px 12px !important;
    overflow: visible !important;
  }

  /* Left: full width */
  body .pageServicesDash .svcDashSecHead > .svcDashSecHeadLeft {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  /* Title row: leave room for focus stats on right (badge is now inline with dials) */
  body .pageServicesDash .svcDashSecTitleRow {
    padding-right: 100px !important;
  }

  /* Show mobile section title variant */
  body .pageServicesDash .svcDashSecTitle .secTitleFull { display: none !important; }
  body .pageServicesDash .svcDashSecTitle .secTitleMob  { display: inline !important; }

  /* Hide original pills on mobile */
  body .pageServicesDash .svcDashSecPillsLeft {
    display: none !important;
  }

  /* Right: normal flex, no position:relative so absolute children
     reference svcDashSecHead instead */
  body .pageServicesDash .svcDashSecHeadRight {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    position: static !important;
  }

  /* ── TOP ROW (absolute, pinned to svcDashSecHead) ─────────────── */

  /* Rank/GP badge: inline with dials (same row, after all dials on the right) */
  body .pageServicesDash .svcDashSecHeadRight > .gpSwapRank,
  body .pageServicesDash .svcDashSecHeadRight > .gpSwapGp {
    position: static !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    z-index: auto !important;
  }

  /* Focus stats: top-right, far right */
  body .pageServicesDash .svcDashSecHead .svcSecFocusStats {
    position: absolute !important;
    top: 14.31px !important;
    right: 8px !important;
    z-index: 2 !important;
    margin-left: 0 !important;
  }

  /* svcDashSecHeadRightTop wrapper (when present): inline with dials */
  body .pageServicesDash .svcDashSecHeadRight > .svcDashSecHeadRightTop {
    position: static !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    z-index: auto !important;
  }

  /* ── BOTTOM ROW (normal flow: pills left, dials right) ────────── */

  /* Pills: 2×2 grid, each column sized to its own content */
  body .pageServicesDash .svcDashSecPillsMob {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  body .pageServicesDash .svcDashSecPillsMob > .svcPillRow {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
  }
  body .pageServicesDash .svcDashSecPillsMob .pill {
    min-width: 0 !important;
  }

  /* Dials: push to the right */
  body .pageServicesDash .svcDashSecHeadRight > .svcSecHeadDials {
    margin-left: auto !important;
  }
}

/* ============================================================================
   TECHNICIAN DETAIL — MOBILE LAYOUT IMPROVEMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Section header: allow wrapping */
  body.route-tech .secHdrRight { flex-wrap: wrap !important; gap: 12px !important; }

  /* Rank badge on same row as dials: order dials=1, rank=1, stats=2 */
  body.route-tech .secHdrRight > .secHdrDials { order: 1 !important; }
  body.route-tech .secHdrRight > .secHdrRank { order: 1 !important; align-self: center !important; }
  body.route-tech .secHdrRight > .svcSecFocusStats { order: 2 !important; }

  /* Section stats: tighten */
  body.route-tech .svcSecFocusStats { text-align: left !important; align-items: flex-start !important; }
  /* font-size → canonicalTypographyRules */

  /* Section focus dials: smaller */
  body.route-tech .secFocusDial .svcGaugeWrap { width: 66px !important; height: 66px !important; }
  body.route-tech .secFocusDial .svcGauge { --sz: 66px !important; width: 66px !important; height: 66px !important; }
}

@media (max-width: 540px) {
  /* catCard header at phone: tighten */
  /* font-size → canonicalTypographyRules */
  body.route-tech .catCard .techCatHdrRight { gap: 8px !important; }

  /* Mini dials in section heads */
  body.route-tech .secMiniDials .svcGaugeWrap { width: 44px !important; height: 44px !important; }
  body.route-tech .secMiniDials .svcGauge { --sz: 44px !important; width: 44px !important; height: 44px !important; }

  /* Pills in section head */
  body.route-tech .secNamePills { gap: 5px !important; }

  /* metricBlock left/right labels */
  body.route-tech .catCard .mbLeft  { padding-right: 8px !important; }
  body.route-tech .catCard .mbRight { padding-left:  8px !important; }

  /* trendArrowBtn SVG in catCard mbLeft: match advisor detail 'sm' size */
  body.route-tech .catCard .mbLeft .trendArrowBtn svg {
    width:  8px !important;
    height: 26px !important;
  }

  /* Prevent long service names from overflowing catCard header */
  body.route-tech .catCard .catHdrLeft { max-width: calc(100vw - 130px) !important; }
  body.route-tech .catCard .catHdrLeft .catTitle {
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
  }
}

/* ============================================================================
   ADVISOR DETAIL — MOBILE LAYOUT IMPROVEMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Section header stats */
  body.route-advisor .secHdrRight { flex-wrap: wrap !important; gap: 12px !important; }

  /* Rank badge on same row as dials: order dials=1, rank=1, stats=2 */
  body.route-advisor .secHdrRight > .secHdrDials { order: 1 !important; }
  body.route-advisor .secHdrRight > .secHdrRank { order: 1 !important; align-self: center !important; }
  body.route-advisor .secHdrRight > .svcSecFocusStats { order: 2 !important; }

  body.route-advisor .svcSecFocusStats { text-align: left !important; align-items: flex-start !important; }

  /* Section focus dial smaller */
  body.route-advisor .secFocusDial .svcGaugeWrap { width: 66px !important; height: 66px !important; }
  body.route-advisor .secFocusDial .svcGauge { --sz: 66px !important; width: 66px !important; height: 66px !important; }
}

@media (max-width: 540px) {
  /* catCard title size */
  /* font-size → canonicalTypographyRules */

  /* sdCatFocusStats */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */

  /* Section titleRow dials: focus → 66px, mini → 56px */
  body.route-advisor .secHdrRight .secFocusDial .svcGaugeWrap { width: 66px !important; height: 66px !important; }
  body.route-advisor .secHdrRight .secFocusDial .svcGauge { --sz: 66px !important; width: 66px !important; height: 66px !important; }
  body.route-advisor .secHdrRight .secHdrDials .svcGaugeWrap.mini { width: 56px !important; height: 56px !important; flex: 0 0 56px !important; }
  body.route-advisor .secHdrRight .secHdrDials .svcGaugeWrap.mini .svcGauge { --sz: 56px !important; width: 56px !important; height: 56px !important; }
  /* Mini dial text: 10/9/9 w800, label 9px/800, margin-top reduced */
  body.route-advisor .secHdrRight .secHdrDials .svcGaugeWrap.mini .pctMain { font-size: 10px !important; font-weight: 800 !important; }
  body.route-advisor .secHdrRight .secHdrDials .svcGaugeWrap.mini .pctArrow { font-size: 9px !important; font-weight: 800 !important; }
  body.route-advisor .secHdrRight .secHdrDials .svcGaugeWrap.mini .pctSub { font-size: 9px !important; font-weight: 800 !important; }
  body.route-advisor .secHdrDials .svcGaugeLbl { font-size: 9px !important; font-weight: 800 !important; margin-top: 3px !important; }

  /* Prevent long names from overflowing */
  body.route-advisor .catCard .catHdrLeft { max-width: calc(100vw - 130px) !important; }
  body.route-advisor .catCard .catHdrLeft .catTitle {
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
  }

  /* sdCatHdrRow gap */
  body.route-advisor .sdCatHdrRow { gap: 12px !important; }
}

/* ============================================================================
   ADVISOR MAIN LIST — MOBILE LAYOUT IMPROVEMENTS
   ============================================================================ */

@media (max-width: 540px) {
  /* Tighten advisor row pills to prevent overflow */
  .pageAdvisorDash .advRow { padding: 10px 10px !important; }
  .pageAdvisorDash .advRow .pills { gap: 6px !important; }
}

/* ============================================================================
   GOALS PAGE — MOBILE IMPROVEMENTS
   ============================================================================ */

@media (max-width: 540px) {
  /* Goals table: allow horizontal scroll */
  .pageGoals .goalsTable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================================
   GLOBAL MOBILE TOUCH + OVERFLOW SAFETY
   ============================================================================ */

@media (max-width: 980px) {
  /* Ensure all fixed-positioned popups don't go under mobile tab bar
     (fallback if JS positioning is slightly off) */
  .svcInfoPopup[style*="top"],
  .techInfoPopup[style*="top"] {
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }

  /* Panels: no overflow-x */
  .panel { overflow-x: hidden; }

  /* Prevent inner tables from breaking layout */
  table { max-width: 100%; }

  /* Keep pill labels on a single row */
  .pill .k, .pill .v { white-space: nowrap !important; }
  /* But keep muted stat lines from wrapping unexpectedly */
  .svcMetaTopLine, .svcMetaSoldLine { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }

  /* Diag popup: full width on mobile */
  #svcDiagPopup {
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
  }
}

@media (max-width: 540px) {
  /* Wrap header panel top row items */
  .dashTopRow { flex-direction: column !important; gap: 10px !important; }

  /* Shrink h2 big titles */
  /* font-size → canonicalTypographyRules */

  /* Pill-sm sizing */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
}

/* ============================================================================
   TREND PAGE — ADDITIONAL SMALL PHONE FIXES
   ============================================================================ */

@media (max-width: 400px) {
  /* font-size → canonicalTypographyRules */
  .trFilters { padding: 8px 8px 10px !important; }
}

/* ============================================================================
   SERVICES DASHBOARD — DIAG PICK PANEL (PIE + TOP/BOTTOM BOXES)
   The pickRow uses inline grid with 3 columns (pie | top box | bottom box).
   On mobile we stack them: pie on top, then the two boxes side-by-side,
   and at very small widths the boxes stack too.
   ============================================================================ */

@media (max-width: 720px) {
  /* Stack the 3-column pick row: pie → top → bottom */
  .pageServicesDash .diagBandRow .pickRow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
  }
  /* Pie chart: span full width in first row */
  .pageServicesDash .diagBandRow .pickRow .diagLabelCol {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
  /* Pie: slightly smaller at tablet width */
  .pageServicesDash .diagBandRow .diagPieSvg {
    width: 160px !important;
    height: 160px !important;
  }
  /* diagBandRow padding tighten */
  .pageServicesDash .diagBandRow {
    padding: 10px 8px 10px 8px !important;
  }
  /* pickBox stretches inside its grid cell */
  .pageServicesDash .diagBandRow .pickRow > div {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* At phone width: stack top & bottom boxes vertically too */
  .pageServicesDash .diagBandRow .pickRow {
    grid-template-columns: 1fr !important;
  }
  /* Pie chart slightly smaller on phones */
  .pageServicesDash .diagBandRow .diagPieSvg {
    width: 140px !important;
    height: 140px !important;
  }
  /* tighten pick panel header */
  .pageServicesDash .techPickPanel.diagSection .phead {
    padding: 12px 10px 10px !important;
    gap: 10px !important;
  }
  /* pick toggle row: wrap label + toggle onto separate line if needed */
  .pageServicesDash .techPickPanel.diagSection .pickToggleRow {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .pageServicesDash .techPickPanel.diagSection .pickHdrLabel {
  /* font-size → canonicalTypographyRules */
  }
  /* pickBox: tighter padding inside */
  .pageServicesDash .pickBox {
    padding: 0 !important;
  }
  .pageServicesDash .pickBox .pickMiniHdr {
    padding: 6px 10px !important;
    /* font-size → canonicalTypographyRules */
  }
  .pageServicesDash .pickBox .pickList {
    padding: 4px 8px 8px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — SERVICE CARDS GRID
   Already has inline @media overrides at 1200 and 820px.
   Add extra safety at phone widths.
   ============================================================================ */

@media (max-width: 600px) {
  .pageServicesDash .svcCardsGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — CATEGORY SECTION EXPANSION CONSTRAINT
   When a <details class="svcDashSec"> opens, the body contents could push
   the implicit grid track wider than the viewport (the parent .svcDashSections
   uses display:grid with no template, so default grid-auto-columns:auto sizes
   to content). Pin the grid template to a single 1fr column with a 0 min so
   the section width stays constant — expansion only grows downward.
   ============================================================================ */
@media (max-width: 980px) {
  .pageServicesDash .svcDashSections {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .pageServicesDash details.svcDashSec {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .pageServicesDash .svcDashBody {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — SECTION HEAD LAYOUT ON NARROW PHONES
   ============================================================================ */

@media (max-width: 480px) {
  /* Section head: tighten gap when stacked */
  .pageServicesDash .svcDashSecHead {
    padding: 10px 10px 10px !important;
    gap: 10px !important;
  }
  /* Dials: smaller gap between them */
  .pageServicesDash .svcSecHeadDials {
    gap: 16px !important;
  }
  /* Focus stats: smaller text */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  /* Section title: tighter */
  /* font-size → canonicalTypographyRules */
  .pageServicesDash .svcDashBody { padding: 8px 8px 12px !important; }
  /* Service card tech rows: tighten */
  .pageServicesDash .svcTechRow { padding: 6px 8px !important; }
}

/* ============================================================================
   SERVICES DASHBOARD — HEADER WRAP DETAILS
   ============================================================================ */

@media (max-width: 600px) {
  /* Ensure the header section gauges don't overflow */
  .pageServicesDash .svcHdrGoalDials {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  /* Header main filters bar: tighter on small phones */
  .pageServicesDash .techHeaderPanel .mainFiltersBar {
    gap: 6px !important;
  }
  /* Pill labels tighten */
  .pageServicesDash .svcDashSecPillsLeft {
    padding-left: 20px !important;
    gap: 5px !important;
  }
}

/* ============================================================================
   DIAG POPUP (pie slice click → service list)
   Already set to nearly full-width; improve max-height & scroll on mobile
   ============================================================================ */

@media (max-width: 980px) {
  #svcDiagPopup {
    /* Center horizontally */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: min(320px, calc(100vw - 20px)) !important;
    /* Constrain height so it scrolls above the tab bar */
    max-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #svcDiagPopup > div:last-child {
    max-height: none !important;  /* let parent control height */
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — CATEGORY CARD IMPROVEMENTS
   ============================================================================ */

@media (max-width: 480px) {
  /* catCard header: keep single row on narrow phones */
  .catCard .catHeader {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .catCard .catHdrLeft { min-width: 0 !important; flex: 1 1 0% !important; }
  /* sdCatHdrRow: compact in single-row layout */
  .sdCatHdrRow {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0px !important;
  }
}

/* ============================================================================
   MAIN / ADVISOR LIST — ROW LAYOUT IMPROVEMENTS
   ============================================================================ */

@media (max-width: 480px) {
  /* Tech/advisor list rows: stack meta below name */
  .techRow .mini {
    font-size: 12px !important;
  }
  /* Rank badge: tighter at very small widths */
  .rankFocusBadge {
    width: 62px !important;
    height: 62px !important;
    --w: 62px !important;
    --h: 62px !important;
  }
}

/* ============================================================================
   GLOBAL SAFE AREA + OVERFLOW — EXTRA GUARDS
   ============================================================================ */

@media (max-width: 980px) {
  /* Prevent any panel from creating horizontal scroll */
  .panel, .catCard, .pickBox, .techPickPanel {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* Fix GP info popup: always clear the tab bar */
  .gpInfoPopup {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Trend arrow buttons: tap target on mobile */
  .trendArrowBtn {
    min-width: 12px !important;
    min-height: 24px !important;
  }
}

/* ============================================================================
   SETTINGS PAGES — TABLE / GRID OVERFLOW
   ============================================================================ */

@media (max-width: 768px) {
  /* Dealer settings + service settings: let tables scroll horizontally */
  .pageDealerSettings table,
  .pageServiceSettings table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Settings section headers: wrap on tablet */
  .settingsSecHead { flex-wrap: wrap !important; gap: 8px !important; }
}

@media (max-width: 540px) {
  /* Form rows in settings: stack label above input */
  .settingsFormRow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .settingsFormRow label { min-width: 0 !important; }
  /* Color threshold inputs: full-width */
  .settingsFormRow input[type="number"] {
    width: 100% !important;
  }
}

/* ============================================================================
   LOGIN PAGE — CENTER & PAD ON MOBILE
   ============================================================================ */

@media (max-width: 480px) {
  .loginCard {
    padding: 20px 16px 24px !important;
    border-radius: 16px !important;
    margin: 0 10px !important;
  }
  .loginTitle { font-size: 22px !important; }
}

/* ============================================================================
   GLOBAL TOUCH IMPROVEMENTS
   ============================================================================ */

@media (max-width: 980px) {
  /* All buttons: tap target (WCAG AA) */
  button:not(.mtbBtn):not(.mtTab):not(.catPagerDot):not(.pickCarBtn) {
    /* min-height removed per design refinement */
  }
  /* Prevent text selection on interactive elements during touch scroll */
  .pickBox, .techRow, .svcTechRow, .advRow {
    -webkit-user-select: none;
    user-select: none;
  }
  /* Smooth momentum scrolling for all scroll containers */
  .svcDashSections,
  .wrap,
  .sideMenu {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   RANK BADGE rfbFocus LABEL — FONT SCALING FOR LONGER LABELS
   At ≤380px the badge shrinks to 56px; "Sold/ASR" (8 chars) needs a
   slightly smaller font-size so it never clips inside the badge.
   ============================================================================ */
@media (max-width: 380px) {
  .rankFocusBadge .rfbFocus {
    font-size: calc(var(--h) * 0.125) !important;
    letter-spacing: 0 !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — SECTION HEADER RANK/GP BADGE ON MOBILE
   .rankFocusBadge.md sizing is now handled by the ≤480px .md rule (60×60).
   GP badges keep their own sizing.
   ============================================================================ */
@media (max-width: 980px) {
  .pageServicesDash .svcDashSecHeadRight .gpFocusBadge,
  .pageServicesDash .svcDashSecHeadRightTop .gpFocusBadge {
    --w: 85px !important; --h: 80px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — HEADER WRAP: FULL COLUMN STACK ON SMALL PHONES
   ============================================================================ */
@media (max-width: 540px) {
  .pageServicesDash .svcdashHeaderWrap {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Filter selects: full width */
  .pageServicesDash .techHeaderPanel .mainFiltersBar select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* GP toggle button: stay reachable */
  .pageServicesDash .gpToggleBtn {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================================
   ADVISOR MAIN LIST — ROW WRAP ON NARROW PHONES
   ============================================================================ */
@media (max-width: 480px) {
  .pageAdvisorDash .advRow {
    flex-wrap: wrap !important;
  }
  .pageAdvisorDash .advRow .dashLeft {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .pageAdvisorDash .advRow .techMetaRight {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-self: flex-start !important;
  }
}

/* ============================================================================
   TECH MAIN LIST — ROW WRAP ON NARROW PHONES
   ============================================================================ */
@media (max-width: 480px) {
  .pageTechDash .techRow {
    flex-wrap: wrap !important;
  }
  .pageTechDash .techRow .techRowLeft {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .pageTechDash .techRow .techMetaRight {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-self: flex-start !important;
  }
}

/* ============================================================================
   GOALS PAGE — WIDE LAYOUT OVERFLOW GUARD ON MOBILE
   ============================================================================ */
@media (max-width: 768px) {
  .goalsBig {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .goalsBigTop {
    flex-direction: column !important;
    gap: 10px !important;
  }
}
@media (max-width: 540px) {
  .goalBox,
  .goalBoxInner {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — SERVICE CARD TECH ROWS ON VERY SMALL PHONES
   ============================================================================ */
@media (max-width: 400px) {
  .pageServicesDash .svcTechRow {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .pageServicesDash .svcTechRow .svcTechName {
    flex: 1 1 100% !important;
    white-space: normal !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — CATCARD TECH ROW GOAL STAT: WRAP ON VERY NARROW SCREENS
   Stack the focus stat and goal stat on separate lines when < 380px.
   The centered dot separator is hidden when wrapping to keep layout clean.
   ============================================================================ */
@media (max-width: 380px) {
  .pageServicesDash .svcTechMetaRow {
    flex-wrap: wrap !important;
    gap: 3px !important;
    justify-content: flex-end !important;
  }
  .pageServicesDash .svcTechMetaRow .svcMetaDot {
    display: none !important;
  }
}

/* ============================================================================
   GLOBAL — PREVENT HORIZONTAL SCROLL ON MOBILE
   ============================================================================ */
@media (max-width: 980px) {
  .wrap > * {
    max-width: 100%;
    box-sizing: border-box;
  }
  .panel,
  .catCard,
  .diagSection,
  .techPickPanel {
    box-sizing: border-box !important;
  }
  /* Kill any stray min-width on side menu items that could widen the viewport */
  .sideMenu * { max-width: 100%; }
}

/* ============================================================================
   DIAG / PICK PANEL — RANK BADGE LABEL INSIDE PICK LIST ROW ON PHONE
   ============================================================================ */
@media (max-width: 480px) {
  /* Pick panel tech rows: allow rank number + name to share one line */
  .pageServicesDash .techPickPanel.diagSection .techRow {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
}


/* ============================================================================
   GOAL STAT LABELS — ENSURE THEY FIT ON NARROW PHONES
   The new "ASR/RO Goal", "Sold/RO Goal", "Sold/ASR Goal", "Pre-MPI Goal"
   labels are slightly longer than the previous secondary stat labels.
   Scale them down on narrow screens so they never clip.
   ============================================================================ */

/* Services Dashboard: goal stat labels in section headers */
@media (max-width: 540px) {
  .pageServicesDash .svcSecFocusStats .statLbl { /* font-size → canonicalTypographyRules */ letter-spacing: 0 !important; }
  /* Cat card header goal stat labels */
  .pageServicesDash .sdCatFocusStats .sdCatStatLbl { /* font-size → canonicalTypographyRules */ letter-spacing: 0 !important; }
}

/* Tech / Advisor detail: goal stat labels in section headers */
@media (max-width: 540px) {
  body.route-tech .svcSecFocusStats .statLbl,
  body.route-advisor .svcSecFocusStats .statLbl {
    /* font-size → canonicalTypographyRules */
    letter-spacing: 0 !important;
    white-space: normal !important;
    max-width: 90px;
  }
}

/* ============================================================================
   MAIN HEADER PANEL — GOAL SUB-STAT ON PHONE
   When the bottom stat shows a goal label ("Sold/RO Goal" etc.) which is
   longer than previous labels like "Sold/RO", shrink the tag font a touch.
   ============================================================================ */
@media (max-width: 540px) {
  .pageServicesDash .overallBlock .tag,
  .tfBotLbl {
    font-size: 10px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }
  /* Shrink the goal value number a bit so it fits alongside the label */
  .pageServicesDash .overallBlock .overallMetric {
    font-size: 24px !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL HEADER — PINNED FOCUS STATS ON MOBILE
   tfTopVal/tfBotVal/tfTopLbl/tfBotLbl — tech detail header stat classes.
   advHdrFocusNum/Lbl/CmpNum/Lbl     — advisor detail header stat classes.
   ============================================================================ */
@media (max-width: 540px) {
  .techFocusStatsPinned { gap: 8px !important; }

  /* Tech detail: scale down stat values */
  .tfTopVal { font-size: 28px !important; }
  .tfBotVal { font-size: 22px !important; }
  .tfTopLbl { font-size: 10px !important; white-space: normal !important; }
  .tfBotLbl { font-size: 10px !important; white-space: normal !important; }

  /* Advisor detail: scale down stat values */
  .advHdrFocusNum { font-size: 28px !important; }
  .advHdrCmpNum   { font-size: 22px !important; }
  .advHdrFocusLbl { font-size: 10px !important; white-space: normal !important; }
  .advHdrCmpLbl   { font-size: 10px !important; white-space: normal !important; }

  /* Advisor detail: tighten the techRankPinned cluster */
  body.route-advisor .techRankPinned { gap: 8px !important; }
}

@media (max-width: 380px) {
  /* Tech detail: further shrink on very small phones */
  .tfTopVal { font-size: 24px !important; }
  .tfBotVal { font-size: 18px !important; }

  /* Advisor detail: further shrink on very small phones */
  .advHdrFocusNum { font-size: 24px !important; }
  .advHdrCmpNum   { font-size: 18px !important; }

  /* Advisor badge smaller to free up space */
  body.route-advisor .techRankPinned .rankFocusBadge.lg,
  body.route-advisor .techRankPinned .gpFocusBadge.lg {
    --w: 60px !important; --h: 60px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — HEADER OVERALL BLOCK LAYOUT ON PHONE
   ============================================================================ */
@media (max-width: 480px) {
  .pageServicesDash .overallBlock {
    text-align: right;
  }
  .pageServicesDash .overallBlock .bigMain {
    font-size: 30px !important;
    font-weight: 800 !important;
  }
  .pageServicesDash .overallBlock .tag {
    font-size: 11px !important;
    font-weight: 600 !important;
  }
}

/* ============================================================================
   GOALS PAGE — HEALTH CHECK POPUP (goalInfoPopup) MOBILE FIXES
   Popup is position:fixed and JS-positioned. Only constrain max-width here —
   never override left/top/right since !important beats inline JS styles.
   ============================================================================ */
@media (max-width: 768px) {
  .goalInfoPopup {
    max-width: calc(100vw - 20px) !important;
  }
  /* The info button itself: larger tap target */
  .goalInfoBtn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
}

/* ============================================================================
   GOALS PAGE — ROW LAYOUT ON NARROW PHONES
   Stack goal input fields vertically so nothing clips.
   ============================================================================ */
@media (max-width: 480px) {
  /* Quad body: single column on small phones */
  .goalQuadBody .goalRow {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Goal name cell: full width */
  .goalRow .goalLeft {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Goal mini inputs: slightly larger for touch */
  .goalMini {
    min-height: 34px !important;
    font-size: 14px !important;
  }
  /* Goal avg value text: tighter */
  .gAvg {
    font-size: 11px !important;
  }
  /* Goals big panel: no horizontal overflow */
  .panel.goalsBig {
    overflow-x: hidden !important;
  }
}

/* ============================================================================
   GOALS PAGE — ILLUSTRATION ANNOTATION ON MOBILE
   Hide the dial illustration on very small phones to save vertical space.
   ============================================================================ */
@media (max-width: 400px) {
  #goalsDialIllust { display: none !important; }
}

/* ============================================================================
   GOALS PAGE — GOALS BIG TOP HEADER ON MOBILE
   The save/sync area and title: stack vertically.
   ============================================================================ */
@media (max-width: 540px) {
  .goalsBigTop {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .goalsBigTop > * { flex-shrink: 0; }
  /* Sync message button */
  #goalsSyncMsg { font-size: 11px !important; }
}

/* ============================================================================
   GOALS PAGE — BRAKES / TIRES GRID ON NARROW PHONES
   The 3-column brakesGrid / tiresGrid becomes single-column.
   ============================================================================ */
@media (max-width: 540px) {
  .brakesGrid,
  .tiresGrid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Expanded state: keep it readable */
  .brakesGrid.expanded,
  .tiresGrid.expanded {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   GOALS PAGE — gipHeader / gipRow TEXT SIZE ON PHONE
   ============================================================================ */
@media (max-width: 480px) {
  .gipHeader { font-size: 13px !important; }
  .gipLab    { font-size: 10px !important; }
  .gipVal    { font-size: 14px !important; }
}

/* ============================================================================
   SERVICES DASHBOARD — CATCARD MINIMIZE BUTTON: LARGER TOUCH TARGET ON MOBILE
   ============================================================================ */
@media (max-width: 980px) {
  .pageServicesDash .catMinBtn {
    font-size: 16px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — CATCARD MINIMIZE BUTTON + ± ALL: TOUCH TARGET
   ============================================================================ */
@media (max-width: 980px) {
  body.route-tech .catMinBtn,
  body.route-advisor .catMinBtn {
    font-size: 18px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
  body.route-tech .secAllMinBtn,
  body.route-advisor .secAllMinBtn {
    min-height: 28px !important;
    padding: 4px 0 !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — MIXED CATCARD LAYOUT (svc-mixed): STACK ON PHONE
   When minimized cards exist alongside expanded ones, svcLayoutRow flex rows
   should collapse to a single column on narrow phones.
   ============================================================================ */
@media (max-width: 600px) {
  body.route-tech .categoryGrid.svc-mixed,
  body.route-advisor .categoryGrid.svc-mixed {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  body.route-tech .svcLayoutRow,
  body.route-advisor .svcLayoutRow {
    flex-direction: column !important;
    gap: 10px !important;
  }
  body.route-tech .svcCol,
  body.route-advisor .svcCol {
    width: 100% !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — TECH NAME MAX-WIDTH: UNCAP ON MOBILE
   The inline CSS caps svcTechLeft a at 200px which is too narrow on phone
   where the card is full-width and names have more room.
   ============================================================================ */
@media (max-width: 820px) {
  .pageServicesDash .svcTechLeft a {
    max-width: none !important;
    flex: 1 1 auto !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — CATCARD HEADER: SINGLE ROW ON MOBILE
   Override the injected ≤540 flex-direction:column so svcMetaLine (left)
   and sdCatHdrRow (right) share the same row directly under the catTitle.
   ============================================================================ */
@media (max-width: 540px) {
  body .pageServicesDash .catHeader {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  body .pageServicesDash .catHdrLeft {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  body .pageServicesDash .sdCatHdrRow {
    gap: 8px !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important;
    margin-top: 0 !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — SECTION TITLE ROW: TIGHTER ON VERY SMALL PHONES
   ============================================================================ */
@media (max-width: 400px) {
  /* font-size → canonicalTypographyRules */
  .pageServicesDash .svcDashSecTitleRow { gap: 6px !important; }
  /* Section toggle +/- button: bigger tap area */
  .pageServicesDash .secToggle {
    width: 28px !important;
    height: 28px !important;
    font-size: 20px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — HEADER WRAP BLOCK: PREVENT OVERFLOW ON SMALL PHONES
   ============================================================================ */
@media (max-width: 480px) {
  .pageServicesDash .svcdashHeaderWrap {
    gap: 10px !important;
  }
  /* Header overall metric block: tighter */
  .pageServicesDash .svcHdrGoalDials {
    gap: 10px !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — DIAG PICK PANEL (PIE + TOP/BOTTOM 3 BOXES)
   Mirror the services dashboard stacking: pie spans full width, then the two
   boxes sit side-by-side; at phone widths all three stack into a single column.
   ============================================================================ */

@media (max-width: 720px) {
  body.route-tech .diagBandRow .pickRow,
  body.route-advisor .diagBandRow .pickRow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  body.route-tech .diagBandRow .pickRow .diagLabelCol,
  body.route-advisor .diagBandRow .pickRow .diagLabelCol {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    display: flex !important;
  }
  body.route-tech .diagBandRow .diagPieSvg,
  body.route-advisor .diagBandRow .diagPieSvg {
    width: 160px !important;
    height: 160px !important;
  }
  body.route-tech .diagBandRow,
  body.route-advisor .diagBandRow {
    padding: 10px 8px !important;
  }
  body.route-tech .diagBandRow .pickRow > div,
  body.route-advisor .diagBandRow .pickRow > div {
    width: 100%;
  }
  body.route-tech .pickHdrLabel,
  body.route-advisor .pickHdrLabel {
  /* font-size → canonicalTypographyRules */
  }
}

@media (max-width: 480px) {
  body.route-tech .diagBandRow .pickRow,
  body.route-advisor .diagBandRow .pickRow {
    grid-template-columns: 1fr !important;
  }
  body.route-tech .diagBandRow .diagPieSvg,
  body.route-advisor .diagBandRow .diagPieSvg {
    width: 140px !important;
    height: 140px !important;
  }
  body.route-tech .techPickPanel.diagSection .phead,
  body.route-advisor .advPickPanel.diagSection .phead {
    padding: 12px 10px 10px !important;
    gap: 10px !important;
  }
  body.route-tech .pickHdrLabel,
  body.route-advisor .pickHdrLabel {
  /* font-size → canonicalTypographyRules */
  }
  body.route-tech .techPickPanel .pickBox,
  body.route-advisor .advPickPanel  .pickBox {
    padding: 8px !important;
  }
  body.route-tech .techPickPanel .pickBox .pickMiniHdr,
  body.route-advisor .advPickPanel  .pickBox .pickMiniHdr {
    padding: 0 2px 4px !important;
    /* font-size → canonicalTypographyRules */
  }
}

/* ============================================================================
   TECH DETAIL — SECTION HEADER DIALS: SHRINK AT PHONE WIDTH
   ============================================================================ */

@media (max-width: 540px) {
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.focus {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 66px !important;
  }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.focus .svcGauge {
    --sz: 66px !important;
    width: 66px !important;
    height: 66px !important;
  }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.mini {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
  }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.mini .svcGauge {
    --sz: 56px !important;
    width: 56px !important;
    height: 56px !important;
  }
  /* Mini dial text: 10/9/9 w800, label 9px/800, margin-top reduced */
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.mini .pctMain { font-size: 10px !important; font-weight: 800 !important; }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.mini .pctArrow { font-size: 9px !important; font-weight: 800 !important; }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.mini .pctSub { font-size: 9px !important; font-weight: 800 !important; }
  body.route-tech .secHdrDials .svcGaugeLbl { font-size: 9px !important; font-weight: 800 !important; margin-top: 3px !important; }
  body.route-tech .secHdrDials { gap: 14px !important; }
}

@media (max-width: 380px) {
  body.route-tech .secHdrDials { gap: 10px !important; }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.focus {
    width: 58px !important; height: 58px !important; flex: 0 0 58px !important;
  }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.focus .svcGauge {
    --sz: 58px !important; width: 58px !important; height: 58px !important;
  }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.mini {
    width: 48px !important; height: 48px !important; flex: 0 0 48px !important;
  }
  body.route-tech .secHdrRight .secHdrDials .svcGaugeWrap.mini .svcGauge {
    --sz: 48px !important; width: 48px !important; height: 48px !important;
  }
}

/* ============================================================================
   TECH DETAIL — MAIN HEADER: TIGHTEN RANK+STATS CLUSTER AT PHONE WIDTH
   ============================================================================ */

@media (max-width: 480px) {
  body.route-tech .gpFocusBadge.lg { --w: 70px !important; --h: 70px !important; }
  body.route-tech .techRankPinned .rankFocusBadge.lg {
    --w: 70px !important; --h: 70px !important;
  }
  body.route-tech .techRankPinned { gap: 8px !important; }
}

@media (max-width: 380px) {
  body.route-tech .gpFocusBadge.lg { --w: 60px !important; --h: 60px !important; }
  body.route-tech .techRankPinned .rankFocusBadge.lg {
    --w: 60px !important; --h: 60px !important;
  }
  body.route-tech .secHdrRank .rankFocusBadge.lg,
  body.route-advisor .secHdrRank .rankFocusBadge.lg {
    --w: 58px !important; --h: 58px !important;
    width: 58px !important; height: 58px !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — METRIC BLOCK: GRACEFUL STACK ON VERY NARROW PHONES
   ============================================================================ */

@media (max-width: 360px) {
  body.route-tech .catCard .metricBlock.metricBlockDivided,
  body.route-advisor .catCard .metricBlock.metricBlockDivided {
    flex-direction: column !important;
    gap: 6px !important;
  }
  body.route-tech .catCard .mbLeft,
  body.route-tech .catCard .mbRight,
  body.route-advisor .catCard .mbLeft,
  body.route-advisor .catCard .mbRight {
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================================
   TECH / ADVISOR — GP TOGGLE BUTTON: LARGER TAP TARGET
   ============================================================================ */

@media (max-width: 980px) {
  body.route-tech .gpToggleBtn,
  body.route-advisor .gpToggleBtn {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — SECTION HEADER PILLS: SAFE WRAP + TIGHT SIZING
   ============================================================================ */

@media (max-width: 540px) {
  .pill.pill-sm { padding: 4px 10px !important; }
  .pill.pill-sm .k { font-size: 11px !important; }
  .pill.pill-sm .v { font-size: 13px !important; }
  /* Beat app.css section-header pill rule (k=15/v=17, spec 0,4,1) so 11/13 wins on mobile */
  .pageServicesDash .svcDashSecHeadLeft .pill.pill-sm .k,
  .pageServicesDash .svcDashSecPillsMob .pill.pill-sm .k,
  body.route-tech .secNamePills .pill.pill-sm .k,
  body.route-advisor .secNamePills .pill.pill-sm .k { font-size: 11px !important; }
  .pageServicesDash .svcDashSecHeadLeft .pill.pill-sm .v,
  .pageServicesDash .svcDashSecPillsMob .pill.pill-sm .v,
  body.route-tech .secNamePills .pill.pill-sm .v,
  body.route-advisor .secNamePills .pill.pill-sm .v { font-size: 13px !important; }
}

@media (max-width: 480px) {
  .secNamePills { flex-wrap: wrap !important; gap: 5px !important; }
}

@media (max-width: 380px) {
  .secNamePills { gap: 4px !important; }
}

/* ============================================================================
   ADVISOR DETAIL — sdCatHdrRow: AGGRESSIVE STACK ON VERY SMALL PHONES
   ============================================================================ */

@media (max-width: 380px) {
  body.route-advisor .sdCatHdrRow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  body.route-advisor .sdCatFocusStats {
    align-self: flex-start !important;
    text-align: left !important;
  }
  body.route-advisor .sdCatFocusStats > div { text-align: left !important; }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — CATEGORY GRID: SINGLE COLUMN ON SMALL PHONES
   ============================================================================ */

@media (max-width: 600px) {
  body.route-tech .categoryGrid,
  body.route-tech .techCategoryGrid,
  body.route-advisor .categoryGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================================
   GLOBAL — FIXED POPUPS: GUARANTEE CLEARANCE ABOVE TAB BAR
   ============================================================================ */

@media (max-width: 980px) {
  #diagBandPopup {
    max-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }
  #rankInfoPopup {
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }
  .trendPopup, #trendPopup {
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — FILTER BAR: ENSURE GOAL SCOPE SELECT FITS
   ============================================================================ */

@media (max-width: 380px) {
  body.route-tech .controls.mainAlwaysOpen .filterRow,
  body.route-advisor .controls.mainAlwaysOpen .filterRow {
    grid-template-columns: 1fr 1fr !important;
  }
  body.route-tech .controls.mainAlwaysOpen .filterRow > div:last-child,
  body.route-advisor .controls.mainAlwaysOpen .filterRow > div:last-child {
    grid-column: 1 / -1;
  }
}

/* ============================================================================
   TECH NAME + BACK BUTTON: PREVENT OVERFLOW ON VERY SMALL PHONES
   ============================================================================ */

@media (max-width: 380px) {
  body.route-tech .techH2Big { /* font-size → canonical */ word-break: break-word !important; }
  body.route-tech .techTeamLine { font-size: 12px !important; }
}


/* ============================================================================
   CATCARD HEADER — MUTED STAT ROWS: SCALE DOWN ON VERY NARROW PHONES
   Now that muted text is 14px (up from 11px on services dash), guard against
   overflow on the narrowest phones.
   ============================================================================ */

@media (max-width: 380px) {
  .pageServicesDash .catHeader .muted,
  body.route-tech   .catCard .muted.svcMetaLine,
  body.route-advisor .catCard .muted.svcMetaLine { /* font-size → canonicalTypographyRules */ }
  .pageServicesDash .catHdrLeft .muted .catHdrNum,
  body.route-tech   .catCard .muted.svcMetaLine .catHdrNum,
  body.route-advisor .catCard .muted.svcMetaLine .catHdrNum { /* font-size → canonicalTypographyRules */ }
}

/* ============================================================================
   SERVICES DASHBOARD — CATCARD sdCatHdrRow: DIAL + BADGE + STATS SHRINK
   The catCard dial is 78×78 and gpFocusBadge.sm is 74×68.
   At phone widths shrink both so the sdCatHdrRow stays comfortable.
   ============================================================================ */

@media (max-width: 480px) {
  /* Shrink catCard dial column */
  .pageServicesDash .sdCatHdrRow .sdCatDialCol               { width: 56px !important; }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeWrap {
    width: 56px !important; height: 56px !important; flex: 0 0 56px !important;
  }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGauge     {
    --sz: 56px !important; width: 56px !important; height: 56px !important;
  }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeLbl  { width: 56px !important; }

  /* Shrink sdCatFocusStats values */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */

  /* gpFocusBadge in sdCatHdrRow — rankFocusBadge.md sizing handled by ≤480px .md rule */
  .pageServicesDash .sdCatHdrRow .gpFocusBadge.sm  { --w: 64px !important; --h: 60px !important; }
}

@media (max-width: 380px) {
  .pageServicesDash .sdCatHdrRow .sdCatDialCol               { width: 48px !important; }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeWrap {
    width: 48px !important; height: 48px !important; flex: 0 0 48px !important;
  }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGauge     {
    --sz: 48px !important; width: 48px !important; height: 48px !important;
  }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeLbl  { width: 48px !important; }

  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */

  .pageServicesDash .sdCatHdrRow .gpFocusBadge.sm  { --w: 58px !important; --h: 54px !important; }
  /* rankFocusBadge.md sizing handled by ≤480px .md rule */
}

/* ============================================================================
   TECH DETAIL — CATCARD RIGHT CLUSTER (dial + catRank / sdCatFocusStats):
   SHRINK AT PHONE WIDTH
   ============================================================================ */

@media (max-width: 480px) {
  body.route-tech .catCard .techCatHdrRight .svcGaugeWrap {
    width: 62px !important; height: 62px !important; flex: 0 0 62px !important;
  }
  body.route-tech .catCard .techCatHdrRight .svcGauge     {
    --sz: 62px !important; width: 62px !important; height: 62px !important;
  }
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
}

@media (max-width: 380px) {
  body.route-tech .catCard .techCatHdrRight .svcGaugeWrap {
    width: 54px !important; height: 54px !important; flex: 0 0 54px !important;
  }
  body.route-tech .catCard .techCatHdrRight .svcGauge     {
    --sz: 54px !important; width: 54px !important; height: 54px !important;
  }
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
}

/* ============================================================================
   ADVISOR DETAIL — CATCARD sdCatHdrRow: DIAL + BADGE SHRINK AT PHONE WIDTH
   sdCatFocusStats already goes 20px/16px at ≤540px; add dial + badge shrink.
   ============================================================================ */

@media (max-width: 480px) {
  body.route-advisor .catCard .sdCatHdrRow .svcGaugeWrap {
    width: 62px !important; height: 62px !important; flex: 0 0 62px !important;
  }
  body.route-advisor .catCard .sdCatHdrRow .svcGauge     {
    --sz: 62px !important; width: 62px !important; height: 62px !important;
  }
  body.route-advisor .catCard .sdCatHdrRow .gpFocusBadge.sm {
    --w: 64px !important; --h: 60px !important;
  }
  /* rankFocusBadge.md sizing handled by ≤480px .md rule */
}

@media (max-width: 380px) {
  body.route-advisor .catCard .sdCatHdrRow .svcGaugeWrap {
    width: 54px !important; height: 54px !important; flex: 0 0 54px !important;
  }
  body.route-advisor .catCard .sdCatHdrRow .svcGauge     {
    --sz: 54px !important; width: 54px !important; height: 54px !important;
  }
  /* sdCatFocusStats: further shrink at 380px */
  /* font-size → canonicalTypographyRules */
  /* font-size → canonicalTypographyRules */
  body.route-advisor .catCard .sdCatHdrRow .gpFocusBadge.sm {
    --w: 58px !important; --h: 54px !important;
  }
  /* rankFocusBadge.md sizing handled by ≤480px .md rule */
}

/* ============================================================================
   TECHNICIAN DASHBOARD — MOBILE HEADER + TECH ROW LAYOUT (CSS ONLY)
   Header: Row 1 title (centered), Row 2 stats (centered), Row 3 pills.
   Uses display:contents on .techNameWrap to unwrap it so its children
   (title + pills) become grid siblings of .techHeaderStats.
   Filters: Fluids + Focus row 1, Comparison + icons row 2.
   Tech rows: rank badge on name row top-right, comp pills all one row.
   ============================================================================ */
@media (max-width: 540px) {

  /* ── Unwrap techNameWrap so title and pills become grid items ── */
  .pageTechDash .titleRow.techTitleRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 4px !important;
    align-items: center !important;
    justify-items: center !important;
  }
  .pageTechDash .titleRow.techTitleRow > .techNameWrap {
    display: contents !important;
  }
  /* Shrink title so "Technician Dashboard" fits one line, centered */
  .pageTechDash .techH2Big {
    font-size: 30px !important;
    white-space: nowrap !important;
  }
  .pageTechDash .techDashTopRow {
    justify-content: center !important;
  }

  /* All main header panel titles: 30px on mobile */
  .pageServicesDash .techH2Big,
  .pageAdvisorDash .advTitle {
    font-size: 30px !important;
  }
  /* Row 1: title */
  .pageTechDash .techDashTopRow {
    order: 1 !important;
  }
  /* Row 2: stats wrapper (direct grid child) — order:2 puts it after title */
  .pageTechDash .titleRow.techTitleRow > div:not(.techNameWrap) {
    order: 2 !important;
    justify-self: center !important;
  }
  /* Row 2: focus stat block — centered under title */
  .pageTechDash .titleRow .svcSecFocusStats.lg {
    order: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    flex-shrink: 1 !important;
  }
  .pageTechDash .titleRow .svcSecFocusStats.lg .statValTop {
    font-size: 20px !important;
  }
  .pageTechDash .titleRow .svcSecFocusStats.lg .statLbl {
    font-size: 9px !important;
  }
  .pageTechDash .titleRow .svcSecFocusStats.lg .trendArrowBtn svg,
  .pageAdvisorDash .titleRow .svcSecFocusStats.lg .trendArrowBtn svg {
    height: 17px !important;
    width: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 1px !important;
  }
  /* Row 3: pills — left-aligned, full width */
  .pageTechDash .titleRow.techTitleRow > .techNameWrap > div:last-child {
    order: 3 !important;
    justify-self: start !important;
  }

  /* ── Filter row: 2×2 grid ── */
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    align-items: end !important;
  }
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen > div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen > div:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen > div:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen > div:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen select {
    width: 100% !important;
    height: 75% !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen label {
    font-size: 10px !important;
  }
  .pageTechDash .mainFiltersBar .controls.mainAlwaysOpen button:not(.gpToggleBtn):not(.aiLightbulbBtn) {
    padding: 4px 6px !important;
    font-size: 12px !important;
  }
  .pageTechDash .aiLightbulbBtn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .pageTechDash .mainFiltersBar {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* ── Tech rows: rank badge top-right of name row, comp pills one row ── */
  .pageTechDash .techRow.dashTechRow {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 2px !important;
    position: relative !important;
  }
  .pageTechDash .techRow.dashTechRow .dashLeft {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding-right: 75px !important;
    gap: 0px !important;
  }
  .pageTechDash .techRow.dashTechRow .techNameStats {
    gap: 2px !important;
  }
  .pageTechDash .techRow.dashTechRow .dashRight {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .pageTechDash .techRow.dashTechRow .pills {
    flex: 1 1 100% !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  /* Rank badge: absolute top-right */
  .pageTechDash .techRow.dashTechRow .techMetaRight {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    margin: 0 !important;
  }
  /* Comp pills: flex-grow to fill row */
  .pageTechDash .techRow.dashTechRow .pill {
    width: 56px !important;
    height: 56px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    max-width: 64px !important;
    padding: 5px 3px !important;
    border-radius: 10px !important;
    gap: 2px !important;
  }
  .pageTechDash .techRow.dashTechRow .pillGroup {
    gap: 4px !important;
    padding: 3px 4px !important;
    flex: 1 1 auto !important;
  }
  .pageTechDash .techRow.dashTechRow .pillGroup.focusGroup .pill,
  .pageTechDash .techRow.dashTechRow .pill.goalFocusSel {
    transform: none !important;
  }
  /* Comp pill text: font-size handled in base.js canonical block */

  /* ── Express/Kia team headers ── */

  /* Title: reduce by 4px (inline 32px → 28px) */
  .pageTechDash .catHeaderSplit .catTitle {
    font-size: 28px !important;
  }

  /* Pills: keep existing two-row layout, left-justified */
  .pageTechDash .catDashPills {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .pageTechDash .catDashPills .pills {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  /* Thin grey divider between pills and filters in main header */
  .pageTechDash .titleRow.techTitleRow {
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }

  /* Remove border-bottom from team panel headers */
  .pageTechDash .techTeamPanel .phead {
    border-bottom: none !important;
  }

  /* Match gap between main header→Express to Express→Kia (18px) */
  .pageTechDash .teamsGrid {
    margin-top: 18px !important;
  }
}

/* ── Tech Dashboard: Expand/Collapse for Express/Kia team panels ── */
.pageTechDash .techTeamPanel.minimized .list {
  display: none !important;
}
.pageTechDash .techTeamPanel.minimized {
  padding-bottom: 12px !important;
}
.pageTechDash .techTeamMinBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 3px !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: color 120ms !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
}
.pageTechDash .techTeamMinBtn:hover {
  color: #fff !important;
}
.pageTechDash .catHeaderSplit:hover .techTeamMinBtn {
  color: #fff !important;
}

/* ============================================================================
   CATCARD TITLE — LINE-HEIGHT TIGHTEN + SCALE ON SMALL PHONES
   24px title with float-based wrap: tighter line-height keeps two-line
   titles compact and brings the muted rows closer.
   At 380px, scale down so long service names don't force excessive wrapping.
   ============================================================================ */

@media (max-width: 540px) {
  .pageServicesDash .catTitle,
  body.route-tech   .catTitle,
  body.route-advisor .catTitle {
    line-height: 1.1 !important;
  }
}

@media (max-width: 380px) {
  .pageServicesDash .catTitle,
  body.route-tech   .catTitle,
  body.route-advisor .catTitle {
  /* font-size → canonicalTypographyRules */
  }
}

/* ============================================================================
   GOALS PAGE — goalsBigTop GRID → FLEX OVERRIDE ON MOBILE
   The inline style uses display:grid. flex-direction on a grid container
   has no effect; we must override display too so the title+toggles+
   Combined Projections panel stack cleanly.
   ============================================================================ */
@media (max-width: 768px) {
  .goalsBigTop {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  /* Override the grid-column/grid-row placements set inline */
  .goalsBigTop > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
  }
  /* Combined Projections panel: full-width at tablet */
  .goalsMidGoals {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  /* Mode toggle buttons: allow wrap */
  #goalsModeStore,
  #goalsModeIndividual {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 8px 14px !important;
  }
}

@media (max-width: 480px) {
  /* Individual selectors row: stack team + person dropdowns vertically */
  #goalsIndSelectors {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #goalsTeamSel,
  #goalsIndSel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   CATCARD HEADER — SINGLE-ROW COMPACTION (MOBILE)
   Move dial + rank badge + focus stats to the same row as the title.
   ============================================================================ */

@media (max-width: 980px) {
  /* 1. catMinBtn margin-right: -6px, margin-top: 0px */
  .pageServicesDash .catMinBtn,
  body.route-tech .catMinBtn,
  body.route-advisor .catMinBtn {
    margin-right: -6px !important;
    margin-top: 0px !important;
  }

  /* 2. svcMetaLine margin-top */
  body .pageServicesDash .catHeader .muted {
    margin-top: 0px !important;
  }
  body.route-tech   .catCard .muted.svcMetaLine,
  body.route-advisor .catCard .muted.svcMetaLine {
    margin-top: -8px !important;
  }

  /* 2a. Tighten dot separator spacing in muted stats */
  body .pageServicesDash .catHeader .muted,
  body.route-tech   .catCard .muted.svcMetaLine,
  body.route-advisor .catCard .muted.svcMetaLine {
    word-spacing: 0px !important;
  }

  /* 2b. Sold line (svcMetaSoldLine) margin-top: -4px */
  body .pageServicesDash .catHeader .muted .svcMetaSoldLine,
  body.route-tech   .catCard .muted.svcMetaLine .svcMetaSoldLine,
  body.route-advisor .catCard .muted.svcMetaLine .svcMetaSoldLine {
    margin-top: -4px !important;
  }

  /* 3. catHdrNum: 11px, catHdrLbl: 10px */
  body .pageServicesDash .catHdrLeft .muted .catHdrNum,
  body.route-tech   .catCard .muted.svcMetaLine .catHdrNum,
  body.route-advisor .catCard .muted.svcMetaLine .catHdrNum {
    font-size: 11px !important;
  }
  body .pageServicesDash .catHdrLeft .muted .catHdrLbl,
  body.route-tech   .catCard .muted.svcMetaLine .catHdrLbl,
  body.route-advisor .catCard .muted.svcMetaLine .catHdrLbl {
    font-size: 10px !important;
  }

  /* 4. Header title (catTitle): 19px */
  body .pageServicesDash .catCard .catTitle,
  body.route-tech   .catCard .catTitle,
  body.route-advisor .catCard .catTitle {
    font-size: 19px !important;
  }

  /* 5. Focus stats top: 24px */
  body .pageServicesDash  .sdCatFocusStats .sdCatStatTop,
  body.route-advisor .sdCatFocusStats .sdCatStatTop,
  body.route-tech    .sdCatFocusStats .sdCatStatTop {
    font-size: 24px !important;
  }
  /* Focus stats bottom: 17px */
  body .pageServicesDash  .sdCatFocusStats .sdCatStatMid,
  body .pageServicesDash  .sdCatFocusStats .sdCatStatBot,
  body.route-advisor .sdCatFocusStats .sdCatStatMid,
  body.route-tech    .sdCatFocusStats .sdCatStatMid,
  body.route-tech    .sdCatFocusStats .sdCatStatBot {
    font-size: 17px !important;
  }

  /* 6. Trend arrow margin-right: -12px */
  .pageServicesDash  .sdCatFocusStats .trendArrowBtn,
  body.route-advisor .sdCatFocusStats .trendArrowBtn,
  body.route-tech    .sdCatFocusStats .trendArrowBtn {
    margin-right: -12px !important;
  }

  /* 7. Dial text: pctMain 12px, pctArrow/pctSub 10px */
  body .pageServicesDash .sdCatHdrRow .pctMain,
  body.route-advisor .sdCatHdrRow .pctMain,
  body.route-tech .catCard .techCatHdrRight .pctMain {
    font-size: 12px !important;
  }
  body .pageServicesDash .sdCatHdrRow .pctArrow,
  body.route-advisor .sdCatHdrRow .pctArrow,
  body.route-tech .catCard .techCatHdrRight .pctArrow {
    font-size: 10px !important;
  }
  body .pageServicesDash .sdCatHdrRow .pctSub,
  body.route-advisor .sdCatHdrRow .pctSub,
  body.route-tech .catCard .techCatHdrRight .pctSub {
    font-size: 10px !important;
  }

  /* 8. catHeader: single row on mobile (services dash uses grid — see renderServicesHome.js) */
  body.route-tech .catCard .catHeader,
  body.route-advisor .catCard .catHeader {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  body.route-tech .catCard .catHdrLeft,
  body.route-advisor .catCard .catHdrLeft {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  /* 9. sdCatHdrRow / techCatHdrRight: gap 8px between dial, badge, stats */
  body .pageServicesDash .sdCatHdrRow,
  body.route-advisor .sdCatHdrRow,
  body.route-tech .catCard .techCatHdrRight {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
}

/* ── sdCatHdrRow dial text: mobile (all breakpoints use same size) ── */
@media (max-width: 540px) {
  body .pageServicesDash .sdCatHdrRow .pctMain,
  body.route-advisor .catCard .sdCatHdrRow .pctMain  { font-size: 10px !important; font-weight: 800 !important; }
  body .pageServicesDash .sdCatHdrRow .pctArrow,
  body.route-advisor .catCard .sdCatHdrRow .pctArrow { font-size: 9px !important; font-weight: 800 !important; }
  body .pageServicesDash .sdCatHdrRow .pctSub,
  body.route-advisor .catCard .sdCatHdrRow .pctSub   { font-size: 9px !important; font-weight: 800 !important; }
  body .sdCatHdrRow .svcGaugeLbl { font-size: 9px !important; font-weight: 800 !important; margin-top: 4px !important; }
}

/* Services dash catHeader grid handled by renderServicesHome.js injected <style> */
@media (max-width: 480px) {
  body .catCard .catHeader {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  body .catCard .catHdrLeft {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

/* ============================================================================
   TREND ARROW POPUP — MOBILE SAFE SIZING
   The popup is position:fixed, full-screen overlay.
   On mobile we reduce padding and ensure it scrolls if needed.
   ============================================================================ */

@media (max-width: 768px) {
  #__trendArrowModal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #__trendArrowModal > div {
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: calc(100dvh - 54px) !important;
  }
  /* Shrink header titles */
  #__trendArrowModal > div > div:first-child > div:first-child > span:first-child {
    font-size: 17px !important;
  }
  /* Wrap header controls to two lines on very narrow */
  #__trendArrowModal > div > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 14px 16px 12px !important;
  }
  /* Ensure chart area has a reasonable min height */
  #__trendModalCanvas {
    min-height: 260px !important;
  }
}

@media (max-width: 480px) {
  /* Hide "Go to Reporting" link to save space; keep goal checkbox and close */
  #__trendArrowModal a[href="#/trend"] {
    display: none !important;
  }
  /* Goal label text shorter on tiny phones */
  #__trendModalGoalLabel span:last-child {
    font-size: 11px !important;
  }
}

/* ============================================================================
   REPORTING PAGE — FILTER CHIPS: TIGHTER WRAPPING ON MOBILE
   Chips now appear above the dropdown; ensure they wrap nicely.
   ============================================================================ */

@media (max-width: 900px) {
  /* Chips in horizontal filter row: constrain width so they don't overflow */
  .trFilters .trChips {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .trFilters .trChip {
    max-width: 160px !important;
  }
  /* Person filter group gets more room when chips are present */
  #trPersonG {
    flex: 1 1 200px !important;
    min-width: 140px !important;
  }
}


/* ── AI Insights popup — mobile ───────────────────────────── */
@media (max-width: 980px) {
  .aiPopup{width:96vw;max-height:92vh;border-radius:14px;}
  .aiPopHead{padding:12px 16px 10px;}
  .aiPopActions{padding:8px 16px;flex-wrap:wrap;gap:8px;}
  .aiPopBody{padding:12px 16px;}
}
@media (max-width: 540px) {
  .aiPopup{width:100%;max-height:100vh;border-radius:0;top:0;left:0;transform:none;}
  .aiToneWrap{flex:1;}
  .aiToneBtn{flex:1;font-size:10px;padding:5px 8px;}
  .aiGenBtn{font-size:11px;padding:6px 14px;}
  .aiPopTitle{font-size:14px;}
}
/* ============================================================================
   RANK BADGE — TECH DASHBOARD TECH-ROW + ADVISOR DASHBOARD ADV-ROW (≤540px)
   60×60 mobile badge for list-view rows on both dashboards.
   ============================================================================ */
@media (max-width: 540px) {
  .pageTechDash .techRow .rankFocusBadge.md,
  .pageAdvisorDash .advRow .rankFocusBadge.md {
    width: 60px !important; height: 60px !important;
    --w: 60px !important; --h: 60px !important;
    --line1f: .23 !important; --line2f: .73 !important;
    --padX: 16px !important;
  }
  .pageTechDash .techRow .rankFocusBadge.md .rfbFocus,
  .pageAdvisorDash .advRow .rankFocusBadge.md .rfbFocus {
    font-size: 8px !important;
  }
  .pageTechDash .techRow .rankFocusBadge.md .rfbMain,
  .pageAdvisorDash .advRow .rankFocusBadge.md .rfbMain {
    font-size: 28px !important;
    height: 29px !important;
  }
  .pageTechDash .techRow .rankFocusBadge.md .rfbOf,
  .pageAdvisorDash .advRow .rankFocusBadge.md .rfbOf {
    top: 54px !important;
  }
  .pageTechDash .techRow .rankFocusBadge.md .rfbOfNum,
  .pageAdvisorDash .advRow .rankFocusBadge.md .rfbOfNum {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* ============================================================================
   RANK BADGE — MOBILE SIZE + TEXT SCALING (≤480px)
   .md sizing is handled by the later 480px block (72px).
   .lg sizing and base font ratios live here.
   ============================================================================ */
@media (max-width: 480px) {
  /* ── Large badge size ────────────────────────────────────────────────── */
  .rankFocusBadge.lg {
    width: 78px !important; height: 78px !important;
    --w: 78px !important; --h: 78px !important;
    --r: 18px !important; --padX: 24px !important;
    --line2f: .74 !important;
  }

  /* ── rfbMain height per badge size ──────────────────────────────────── */
  .rankFocusBadge.lg .rfbMain { height: 34px !important; font-size: 36px !important; top: 36px !important; }

  /* ── rfbOf / rfbFocus overrides for .lg ─────────────────────────────── */
  .rankFocusBadge.lg .rfbOf    { top: 68px !important; }
  .rankFocusBadge.lg .rfbFocus { font-size: 9px !important; }

  /* ── Base font ratios ─────────────────────────────────────────────────── */
  .rankFocusBadge .rfbFocus  { font-size: calc(var(--h) * 0.15 - 1px) !important; }
  .rankFocusBadge .rfbMain   { font-size: calc(var(--h) * 0.45) !important; }
  .rankFocusBadge .rfbOfNum  { font-size: calc(var(--h) * 0.15) !important; }
  .rankFocusBadge .rfbOfWord { font-size: calc(var(--h) * 0.14) !important; }

  /* ── rfbOf: padding tweak only — base top formula works at 60px ──────── */
  .rankFocusBadge .rfbOf {
    padding-bottom: 2px !important;
  }
}

/* ── Tiny-phone preserve: keep rfbFocus's clip-prevention size at ≤380px ──
   The original ≤380px rule used 0.125 to keep "Sold/ASR" from clipping inside
   the 56px badge. Re-assert it below the 480px block so it survives the cascade. */
@media (max-width: 380px) {
  .rankFocusBadge .rfbFocus  { font-size: calc(var(--h) * 0.125 - 1px) !important; }
}

/* ============================================================================
   SERVICES DASHBOARD — CATCARD TECH ROWS: KEEP STATS INLINE WITH NAMES
   Override the injected 540px rule that forces flex-direction:column.
   Shrink stat text so name + stats fit on a single row.
   ============================================================================ */
@media (max-width: 540px) {
  .pageServicesDash .svcTechRow {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .pageServicesDash .svcTechMeta {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .pageServicesDash .svcTechMetaRow {
    font-size: 12px !important;
  }
  .pageServicesDash .svcTechMetaRow b {
    font-size: 12px !important;
  }
  .pageServicesDash .svcMetaDot {
    font-size: 16px !important;
    margin: 0 2px !important;
  }
  .pageServicesDash .svcTechMetaRow .goalArrowSvg {
    width: 11px !important;
    height: 11px !important;
    margin: 0 2px !important;
  }
  body .pageServicesDash .svcTechLeft a {
    max-width: 130px !important;
    font-size: 12px !important;
  }
  .pageServicesDash .svcRankNum {
    font-size: 13px !important;
    min-width: 18px !important;
  }
  .pageServicesDash .svcTechLeft {
    gap: 4px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — CATCARD FOCUS STATS: EQUALIZE GAP BETWEEN ROWS
   The gap between the top stat pair and bottom stat pair was 8px (container gap)
   while within each pair the label was tight (-3px margin). Reduce to 4px.
   ============================================================================ */
@media (max-width: 980px) {
  .pageServicesDash .sdCatFocusStats {
    gap: 4px !important;
    width: 78px !important;
    height: 72px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }
  /* CatCard top focus stat label: margin-top -4px */
  body .pageServicesDash .sdCatFocusStats > div:first-child .sdCatStatLbl {
    margin-top: -4px !important;
  }
  /* CatCard dial label: margin-left + smaller font */
  .pageServicesDash .sdCatHdrRow .svcGaugeLbl {
    margin-left: 11px !important;
    font-size: 9px !important;
  }
  /* CatCard dial wrap: remove right margin, add left margin on mobile */
  .catHeader .svcGaugeWrap {
    margin-right: 0px !important;
    margin-left: 11px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — TREND ARROW SIZING ON MOBILE
   Match the Technician Dashboard sizes (20px height) across all arrow locations.
   ============================================================================ */
@media (max-width: 980px) {
  /* Main header panel trend arrow */
  .pageServicesDash .overallBlock .trendArrowBtn svg {
    height: 28px !important;
    width: auto !important;
  }
  .pageServicesDash .overallBlock .trendArrowBtn {
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Section header trend arrows */
  .pageServicesDash .svcSecFocusStats .trendArrowBtn svg {
    height: 22px !important;
    width: auto !important;
  }
  .pageServicesDash .svcSecFocusStats .trendArrowBtn {
    /* padding/margin removed — handled by inline + 540px rules */
  }
  /* CatCard header trend arrows: mobile sdCatFocusStats (14×14px) */
  .pageServicesDash .sdCatFocusStats .trendArrowBtn svg,
  body.route-advisor .sdCatFocusStats .trendArrowBtn svg,
  body.route-tech    .sdCatFocusStats .trendArrowBtn svg {
    width: 14px !important;
    height: 14px !important;
    padding-top: 0 !important;
  }
  .pageServicesDash .sdCatFocusStats .trendArrowBtn {
    padding: 0 !important;
    margin: 0 -4px 0 0 !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — SECTION HEADER FOCUS STAT LABEL MARGINS ON MOBILE
   Top label: -4px, Bottom label: 0px
   ============================================================================ */
@media (max-width: 980px) {
  body .pageServicesDash .svcSecFocusStats > div:first-child .statLbl {
    margin-top: 0px !important;
  }
  body .pageServicesDash .svcSecFocusStats > div:last-child .statLbl {
    margin-top: -1px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — CATCARD HEADER: BADGE MARGIN + STAT GAP ON MOBILE
   ============================================================================ */
@media (max-width: 980px) {
  /* Fix 4: rank badge margin-right → 0px on mobile */
  .pageServicesDash .sdCatHdrRow .rankFocusBadge {
    margin-right: 0px !important;
  }
  /* Fix 5: sdCatStatTop gap 6→2px (overrides inline style) */
  .pageServicesDash .sdCatStatTop {
    gap: 2px !important;
  }
  /* svcGaugeLbl + sdCatDialCol svcGaugeLbl + techCatHdrRight: margin-right 0 on mobile */
  .svcGaugeLbl {
    margin-right: 0px !important;
  }
  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeLbl {
    margin-right: 0px !important;
  }
  body.route-tech .catCard .techCatHdrRight {
    margin-right: 0px !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — PICK TOGGLE SLIDER: SMALLER + CENTERED ON MOBILE
   ============================================================================ */
@media (max-width: 980px) {
  .pageServicesDash .techPickPanel.diagSection .pickToggle {
    width: 40px !important;
    height: 22px !important;
  }
  .pageServicesDash .techPickPanel.diagSection .pickToggle .slider:before {
    width: 16px !important;
    height: 16px !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .pageServicesDash .techPickPanel.diagSection .pickToggle input:checked + .slider:before {
    transform: translateX(18px) translateY(-50%) !important;
  }
}

/* ============================================================================
   SERVICES DASHBOARD — MOBILE CATCARD + HEADER TWEAKS
   ============================================================================ */
@media (max-width: 980px) {
  .pageServicesDash .sdCatStatLbl.sdCatStatLblTop {
    margin-top: -4px !important;
  }
  .pageServicesDash .svcDashBody {
    padding-top: 0px !important;
  }
  .pageServicesDash .secAllMinBtn {
    margin-bottom: 0px !important;
  }
  .pageServicesDash .sdCatHdrRow .rankFocusBadge {
    margin-right: 8px !important;
  }
  .pageServicesDash .sdCatStatTop {
    gap: 2px !important;
  }
  .pageServicesDash .techH2Big {
    margin-bottom: 4px !important;
  }
  .pageServicesDash .catPagerArrowRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 2px;
  }
  .pageServicesDash .catPagerDots {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pageServicesDash .catPagerDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease;
  }
  .pageServicesDash .catPagerDot.active {
    background: rgba(200,45,45,.85);
  }
  .pageServicesDash .pickCarBtn {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.2);
    color: #eaf0ff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s ease, background .12s ease;
    flex-shrink: 0;
  }
  .pageServicesDash .pickCarBtn:active {
    background: rgba(0,0,0,.75);
  }
  .pageServicesDash .pickCarBtn[disabled] {
    opacity: .25;
    pointer-events: none;
  }
}
@media (min-width: 981px) {
  .pageServicesDash .catPagerArrowRow { display: none !important; }
}

/* ── Hide EKG heartbeat SVG on mobile (all pages) ── */
@media (max-width: 980px) {
  svg[viewBox="0 0 120 48"][width="113"] { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADVISOR DASHBOARD — MOBILE HEADER (mirrors Technician Dashboard layout)
   Title → Focus Stats → Pills → Filters (side-by-side)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {

  /* ── Unwrap techNameWrap so title and pills become grid items ── */
  .pageAdvisorDash .titleRow.techTitleRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 4px !important;
    align-items: center !important;
    justify-items: center !important;
  }
  .pageAdvisorDash .titleRow.techTitleRow > .techNameWrap {
    display: contents !important;
  }

  /* Title: centered, 30px */
  .pageAdvisorDash .techH2Big {
    font-size: 30px !important;
    white-space: nowrap !important;
  }
  .pageAdvisorDash .techDashTopRow {
    justify-content: center !important;
  }

  /* Row 1: title */
  .pageAdvisorDash .techDashTopRow {
    order: 1 !important;
  }
  /* Row 2: stats wrapper (direct grid child) — order:2 puts it after title */
  .pageAdvisorDash .titleRow.techTitleRow > div:not(.techNameWrap) {
    order: 2 !important;
    justify-self: center !important;
  }
  /* Row 2: focus stat block — centered under title */
  .pageAdvisorDash .titleRow .svcSecFocusStats.lg {
    order: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    flex-shrink: 1 !important;
  }
  .pageAdvisorDash .titleRow .svcSecFocusStats.lg .statValTop {
    font-size: 24px !important;
  }
  .pageAdvisorDash .titleRow .svcSecFocusStats.lg .statLbl {
    font-size: 11px !important;
  }
  /* Row 3: pills — left-aligned, full width */
  .pageAdvisorDash .titleRow.techTitleRow > .techNameWrap > div:last-child {
    order: 3 !important;
    justify-self: start !important;
  }

  /* Header pills: 10px .k, 13px .v, container padding 6px 10px */
  .pageAdvisorDash .pill.pill-lg .k {
    font-size: 10px !important;
  }
  .pageAdvisorDash .pill.pill-lg .v {
    font-size: 13px !important;
  }
  .pageAdvisorDash .pill.pill-lg {
    padding: 6px 10px !important;
  }

  /* ── Filters: side-by-side row (not stacked), icons to the right ── */
  .pageAdvisorDash .mainFiltersBar .controls.mainAlwaysOpen {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: flex-end !important;
  }
  .pageAdvisorDash .mainFiltersBar .controls.mainAlwaysOpen > div {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  /* Icons container ($ + lightbulb): push to the right */
  .pageAdvisorDash .mainFiltersBar .controls.mainAlwaysOpen > div:last-child {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .pageAdvisorDash .mainFiltersBar .controls.mainAlwaysOpen select {
    width: 100% !important;
    min-height: 0 !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  .pageAdvisorDash .mainFiltersBar .controls.mainAlwaysOpen .csel-trigger {
    padding: 4px 6px !important;
    font-size: 12px !important;
  }
  .pageAdvisorDash .mainFiltersBar .controls.mainAlwaysOpen label {
    font-size: 10px !important;
  }
  .pageAdvisorDash .mainFiltersBar .controls.mainAlwaysOpen button:not(.gpToggleBtn):not(.aiLightbulbBtn) {
    padding: 4px 6px !important;
    font-size: 12px !important;
  }
  .pageAdvisorDash .mainFiltersBar {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}

/* ============================================================================
   LG FOCUS STATS — MOBILE SIZING AT 540px
   Applies to: Services Dashboard, Tech Detail, Advisor Detail
   Excludes: Tech Dashboard (.pageTechDash), Advisor Dashboard (.pageAdvisorDash)
   ============================================================================ */
@media (max-width: 540px) {
  /* ── Container: 78px tall × 86px wide ── */
  .pageServicesDash .svcSecFocusStats.lg,
  body.route-tech .svcSecFocusStats.lg,
  body.route-advisor .svcSecFocusStats.lg {
    height: 78px !important;
    width: 86px !important;
  }
  /* ── statValTop: 19px, 3px margin-top ── */
  .pageServicesDash .svcSecFocusStats.lg .statValTop,
  body.route-tech .svcSecFocusStats.lg .statValTop,
  body.route-advisor .svcSecFocusStats.lg .statValTop {
    font-size: 19px !important;
    margin-top: 3px !important;
  }
  /* ── statLbl: 9px, 0px margin-top ── */
  .pageServicesDash .svcSecFocusStats.lg .statLbl,
  body.route-tech .svcSecFocusStats.lg .statLbl,
  body.route-advisor .svcSecFocusStats.lg .statLbl {
    font-size: 9px !important;
    margin-top: 0px !important;
  }
  /* ── statLblTop: 11px font-size ── */
  .pageServicesDash .svcSecFocusStats.lg .statLblTop,
  body.route-tech .svcSecFocusStats.lg .statLblTop,
  body.route-advisor .svcSecFocusStats.lg .statLblTop {
    font-size: 11px !important;
  }
  /* ── statValBot: 16px, 0px margin-top, 1px margin-bottom ── */
  .pageServicesDash .svcSecFocusStats.lg .statValBot,
  body.route-tech .svcSecFocusStats.lg .statValBot,
  body.route-advisor .svcSecFocusStats.lg .statValBot {
    font-size: 16px !important;
    margin-top: 0px !important;
    margin-bottom: 1px !important;
  }
  /* ── statLblBot: 10px font-size ── */
  .pageServicesDash .svcSecFocusStats.lg .statLblBot,
  body.route-tech .svcSecFocusStats.lg .statLblBot,
  body.route-advisor .svcSecFocusStats.lg .statLblBot {
    font-size: 10px !important;
  }
  /* ── trendArrow SVG: 18px height, 14px width ── */
  .pageServicesDash .svcSecFocusStats.lg .trendArrowBtn svg,
  body.route-tech .svcSecFocusStats.lg .trendArrowBtn svg,
  body.route-advisor .svcSecFocusStats.lg .trendArrowBtn svg,
  .pageTechDash .catHdrRight .svcSecFocusStats.lg .trendArrowBtn svg {
    height: 18px !important;
    width: 14px !important;
    padding-top: 0px !important;
  }
  /* ── trendArrow-lg SVG overrides: 10px width, 2px padding-top ── */
  .pageServicesDash .svcSecFocusStats.lg .trendArrowBtn.trendArrow-lg svg,
  body.route-tech .svcSecFocusStats.lg .trendArrowBtn.trendArrow-lg svg,
  body.route-advisor .svcSecFocusStats.lg .trendArrowBtn.trendArrow-lg svg {
    width: 10px !important;
    padding-top: 2px !important;
  }
  /* ── trendArrowBtn: -3px margin-right ── */
  .pageServicesDash .svcSecFocusStats.lg .trendArrowBtn,
  body.route-tech .svcSecFocusStats.lg .trendArrowBtn,
  body.route-advisor .svcSecFocusStats.lg .trendArrowBtn {
    margin-right: -3px !important;
  }
}

/* ============================================================================
   TECH / ADVISOR DETAIL — MOBILE HEADER PANEL REFINEMENTS
   ============================================================================ */
@media (max-width: 540px) {

  /* ── Restore absolute positioning for badge+stats cluster ──
     app.css @768px sets .techRankPinned to position:static.
     body prefix (0,2,1) beats app.css (0,1,0). ── */
  body.route-tech .techRankPinned,
  body.route-advisor .techRankPinned {
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin-top: 0 !important;
    justify-content: flex-end !important;
  }

  /* ── Constrain name so it doesn't overlap badge+stats ── */
  body.route-tech .techTitlePinnedLeft,
  body.route-advisor .titleRow.techTitleRow > div:first-child {
    max-width: 55% !important;
  }

  /* ── Header name: 30px ── */
  body.route-tech .techH2Big,
  body.route-advisor .techH2Big {
    font-size: 30px !important;
  }

  /* ── Pills: .k 10px, .v 13px ── */
  body.route-tech .pill.pill-lg .k,
  body.route-advisor .pill.pill-lg .k {
    font-size: 10px !important;
  }
  body.route-tech .pill.pill-lg .v,
  body.route-advisor .pill.pill-lg .v {
    font-size: 13px !important;
  }

  /* ── Badge: 78px large (explicit width/height to beat app.css 64px) ── */
  body.route-tech .techRankPinned .rankFocusBadge.lg,
  body.route-advisor .techRankPinned .rankFocusBadge.lg {
    --w: 78px !important; --h: 78px !important;
    --line2f: .86 !important;
    width: 78px !important; height: 78px !important;
  }
  body.route-tech .techRankPinned .gpFocusBadge.lg,
  body.route-advisor .techRankPinned .gpFocusBadge.lg {
    --w: 78px !important; --h: 78px !important;
    --line2f: .86 !important;
    width: 78px !important; height: 78px !important;
  }

  /* ── Badge .rfbMain: 36px, top 36px inside .lg in header ── */
  body.route-tech .techRankPinned .rankFocusBadge.lg .rfbMain,
  body.route-advisor .techRankPinned .rankFocusBadge.lg .rfbMain,
  body.route-tech .techRankPinned .gpFocusBadge.lg .rfbMain,
  body.route-advisor .techRankPinned .gpFocusBadge.lg .rfbMain {
    font-size: 36px !important;
    top: 36px !important;
  }

  /* ── Badge .rfbOf: top 60px inside .lg in header ── */
  body.route-tech .techRankPinned .rankFocusBadge.lg .rfbOf,
  body.route-advisor .techRankPinned .rankFocusBadge.lg .rfbOf,
  body.route-tech .techRankPinned .gpFocusBadge.lg .rfbOf,
  body.route-advisor .techRankPinned .gpFocusBadge.lg .rfbOf {
    top: 60px !important;
  }

  /* ── Badge .rfbFocus: 9px inside .lg in header ── */
  body.route-tech .techRankPinned .rankFocusBadge.lg .rfbFocus,
  body.route-advisor .techRankPinned .rankFocusBadge.lg .rfbFocus,
  body.route-tech .techRankPinned .gpFocusBadge.lg .rfbFocus,
  body.route-advisor .techRankPinned .gpFocusBadge.lg .rfbFocus {
    font-size: 9px !important;
  }

  /* ── Focus stats: tighter gap ── */
  body.route-tech .techFocusStatsPinned,
  body.route-advisor .techFocusStatsPinned {
    gap: 4px !important;
  }

  /* ── Back button: shrink to 20×20, perfectly round ── */
  body.route-tech .techTeamLine button[title="Back"],
  body.route-advisor .techTeamLine button[title="Back"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }
  body.route-tech .techTeamLine button[title="Back"] svg,
  body.route-advisor .techTeamLine button[title="Back"] svg {
    width: 10px !important;
    height: 10px !important;
  }

  /* ── Custom select trigger: compact padding + 12px font ── */
  body.route-tech button.csel-trigger,
  body.route-advisor button.csel-trigger {
    padding: 4px 6px !important;
    font-size: 12px !important;
  }

  /* ── Filters: flex row with icons on same line ──
     Injected <style> uses grid at (0,4,0). Adding .techHeaderPanel = (0,5,0).
     Switch to flex so filters + $ + lightbulb sit in one row. ── */
  body.route-tech .techHeaderPanel .controls.mainAlwaysOpen .filterRow,
  body.route-advisor .techHeaderPanel .controls.mainAlwaysOpen .filterRow {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: end !important;
    gap: 6px !important;
  }
  body.route-tech .techHeaderPanel .controls.mainAlwaysOpen .filterRow > div,
  body.route-advisor .techHeaderPanel .controls.mainAlwaysOpen .filterRow > div {
    flex: 0 1 auto !important;
  }
  body.route-tech .techHeaderPanel .controls.mainAlwaysOpen .filterRow select,
  body.route-advisor .techHeaderPanel .controls.mainAlwaysOpen .filterRow select {
    width: 100% !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  body.route-tech .techHeaderPanel .controls.mainAlwaysOpen .filterRow label,
  body.route-advisor .techHeaderPanel .controls.mainAlwaysOpen .filterRow label {
    font-size: 10px !important;
  }
}

/* ── Progressive badge shrink at narrower breakpoints ── */
@media (max-width: 480px) {
  body.route-tech .techRankPinned .rankFocusBadge.lg,
  body.route-advisor .techRankPinned .rankFocusBadge.lg {
    --w: 70px !important; --h: 70px !important;
    width: 70px !important; height: 70px !important;
  }
  body.route-tech .techRankPinned .gpFocusBadge.lg,
  body.route-advisor .techRankPinned .gpFocusBadge.lg {
    --w: 70px !important; --h: 70px !important;
    width: 70px !important; height: 70px !important;
  }
  /* Section header .lg badge: 66px (slightly smaller than pinned 70) */
  body.route-tech .secHdrRank .rankFocusBadge.lg,
  body.route-advisor .secHdrRank .rankFocusBadge.lg {
    --w: 66px !important; --h: 66px !important;
    width: 66px !important; height: 66px !important;
  }
}
@media (max-width: 380px) {
  body.route-tech .techRankPinned .rankFocusBadge.lg,
  body.route-advisor .techRankPinned .rankFocusBadge.lg {
    --w: 60px !important; --h: 60px !important;
    width: 60px !important; height: 60px !important;
  }
  body.route-tech .techRankPinned .gpFocusBadge.lg,
  body.route-advisor .techRankPinned .gpFocusBadge.lg {
    --w: 60px !important; --h: 60px !important;
    width: 60px !important; height: 60px !important;
  }
}

/* ============================================================================
   rankFocusBadge .md — mobile (≤480px viewport)
   Overrides the ≤480px .md rule (60×60) with explicit pixel values.
   Specificity ladder duplicates for Services Dashboard & goal-mode contexts.
   ============================================================================ */
@media (max-width: 480px) {
  /* ── Badge container ─────────────────────────────────────────────────── */
  .rankFocusBadge.md {
    --w: 72px !important; --h: 72px !important;
    --line1f: .24 !important; --line2f: .77 !important;
    --padX: 18px !important;
    width: 72px !important; height: 72px !important;
  }

  /* ── Child elements — base specificity ───────────────────────────────── */
  .rankFocusBadge.md .rfbFocus {
    font-size: 9px !important; font-weight: 800 !important;
    top: 4px !important;
  }
  .rankFocusBadge.md .rfbMain {
    font-size: 32px !important; font-weight: 800 !important;
    height: 34px !important;
  }
  .rankFocusBadge.md .rfbMain::before {
    font-weight: 800 !important;
  }
  .rankFocusBadge.md .rfbOf {
    top: 65px !important; font-weight: 800 !important;
  }
  .rankFocusBadge.md .rfbOfWord {
    font-size: 8px !important; font-weight: 800 !important;
  }
  .rankFocusBadge.md .rfbOfNum {
    font-size: 9px !important; font-weight: 800 !important;
    padding-left: 18px !important; padding-right: 18px !important;
  }
}

/* ── All gauge dials: half stroke-width on mobile ── */
@media (max-width: 980px) {
  .svcGauge .bg,
  .svcGauge .fg {
    stroke-width: 2.5 !important;
  }
}

/* ============================================================================
   MOBILE — svcSecFocusStats.lg REFINEMENTS (width, arrow, stat spacing)
   ============================================================================ */
@media (max-width: 980px) {
  .pageServicesDash .svcSecFocusStats.lg,
  body.route-tech .svcSecFocusStats.lg,
  .route-tech .secHdrRight .svcSecFocusStats.lg,
  body.route-advisor .svcSecFocusStats.lg,
  .route-advisor .secHdrRight .svcSecFocusStats.lg {
    width: 86px !important;
  }

  .svcSecFocusStats.lg .statValTop > .trendArrowBtn.trendArrow-lg {
    margin-right: -3px !important;
    margin-top: 0px !important;
  }

  .svcSecFocusStats.lg .statValTop > .trendArrowBtn.trendArrow-lg svg {
    padding-top: 2px !important;
    width: 10px !important;
  }

  .pageServicesDash .svcSecFocusStats.lg .statValTop,
  body.route-tech .svcSecFocusStats.lg .statValTop,
  .route-tech .secHdrRight .svcSecFocusStats.lg .statValTop,
  body.route-advisor .svcSecFocusStats.lg .statValTop,
  .route-advisor .secHdrRight .svcSecFocusStats.lg .statValTop {
    font-size: 19px !important;
    margin-top: 3px !important;
  }

  .pageServicesDash .svcSecFocusStats.lg .statLblTop,
  body.route-tech .svcSecFocusStats.lg .statLblTop,
  .route-tech .secHdrRight .svcSecFocusStats.lg .statLblTop,
  body.route-advisor .svcSecFocusStats.lg .statLblTop,
  .route-advisor .secHdrRight .svcSecFocusStats.lg .statLblTop {
    font-size: 11px !important;
  }
  /* top-label (first-child) override: beats app.css (0,5,2) 12px first-child rule */
  .pageServicesDash .svcSecFocusStats.lg > div:first-child .statLbl,
  body.route-tech .svcSecFocusStats.lg > div:first-child .statLbl,
  body.route-advisor .svcSecFocusStats.lg > div:first-child .statLbl {
    font-size: 11px !important;
  }

  .pageServicesDash .svcSecFocusStats.lg .statValBot,
  body.route-tech .svcSecFocusStats.lg .statValBot,
  .route-tech .secHdrRight .svcSecFocusStats.lg .statValBot,
  body.route-advisor .svcSecFocusStats.lg .statValBot,
  .route-advisor .secHdrRight .svcSecFocusStats.lg .statValBot {
    margin-bottom: 1px !important;
  }

  .pageServicesDash .svcSecFocusStats.lg .statLblBot,
  body.route-tech .svcSecFocusStats.lg .statLblBot,
  .route-tech .secHdrRight .svcSecFocusStats.lg .statLblBot,
  body.route-advisor .svcSecFocusStats.lg .statLblBot,
  .route-advisor .secHdrRight .svcSecFocusStats.lg .statLblBot {
    font-size: 10px !important;
  }

  .pageServicesDash .sdCatHdrRow .sdCatFocusStats {
    align-self: flex-start !important;
    width: 86px !important;
  }

  .pageServicesDash .sdCatHdrRow .pctStack2 .pctMain,
  body.route-tech .catCard .techCatHdrRight .pctStack2 .pctMain,
  body.route-advisor .sdCatHdrRow .pctStack2 .pctMain {
    font-size: 12px !important;
  }

  .pageServicesDash .sdCatHdrRow .svcGaugeWrap.focus,
  body.route-tech .catCard .techCatHdrRight .svcGaugeWrap.focus,
  body.route-advisor .sdCatHdrRow .svcGaugeWrap.focus {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
  }

  .pageServicesDash .sdCatHdrRow .svcGaugeLbl,
  body.route-tech .catCard .techCatHdrRight .svcGaugeLbl,
  body.route-advisor .sdCatHdrRow .svcGaugeLbl {
    margin-top: 4px !important;
  }

  .trendArrowBtn.trendArrow-sm svg {
    margin-top: 6px !important;
  }

  .pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeLbl,
  body.route-tech .catCard .techCatHdrRight .svcGaugeLbl,
  body.route-advisor .catCard .sdCatHdrRow .sdCatDialCol .svcGaugeLbl {
    margin-left: 11px !important;
  }
}