/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Interior Moderna OPS Dashboard
   Comprehensive mobile-first fixes for all views.
   Loaded AFTER modern-theme.css and ux-polish.css to override.
   ═══════════════════════════════════════════════════════════ */

/* ─── Base: prevent horizontal overflow globally — see also inside @media(max-width:768px) ─── */
/* (This outer rule is the canonical one; the duplicate inside the 768px block below is redundant.) */
.main {
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   PICK LIST DETAIL — compact warehouse phone layout
   A pick row is a working unit, not a form. Keep the location, SKU and
   order glanceable; put secondary metadata on one line; keep actions in
   one thumb row. Scoped twice to beat the older generic mobile card rules.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header: one compact identity row, then a 38px action strip. */
  #mainContent#mainContent .pld-page-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
    margin-bottom: 7px !important;
  }
  #mainContent#mainContent .pld-heading-copy,
  #mainContent#mainContent .pld-title-row {
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent#mainContent .pld-title-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  #mainContent#mainContent .pld-title-row .page-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
  #mainContent#mainContent .pld-title-row .pld-mobile-short-title {
    display: inline !important;
  }
  #mainContent#mainContent .pld-title-row .pld-mobile-short-title + .pld-full-title {
    display: none !important;
  }
  #mainContent#mainContent .pld-back-btn,
  #mainContent#mainContent .pld-edit-name-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent#mainContent .pld-title-row > .pill {
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 4px 7px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
    font-size: 10px !important;
  }
  #mainContent#mainContent .pld-heading-copy > .page-subtitle {
    display: block !important;
    margin: 1px 0 0 42px !important;
    max-width: calc(100% - 42px) !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 10px !important;
  }
  #mainContent#mainContent .pld-heading-copy .pld-mobile-full-name {
    display: block !important;
    line-height: 1.2 !important;
  }
  #mainContent#mainContent .pld-heading-copy .pld-mobile-full-name + .pld-detail-meta {
    display: none !important;
  }
  #mainContent#mainContent .pld-header-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 6px !important;
  }
  #mainContent#mainContent .pld-header-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }
  #mainContent#mainContent .pld-header-actions button[data-pl-action="toggle-focus-mode"] {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  #mainContent#mainContent .pld-header-actions button:not([data-pl-action="toggle-focus-mode"]) .pld-action-label {
    display: none !important;
  }

  /* Compress progress, stats and the help disclosure above the first pick. */
  #mainContent#mainContent .pld-progress-mb {
    height: 4px !important;
    margin: 5px 0 7px !important;
  }
  #mainContent#mainContent .pld-page-header + .pld-progress-mb + .wh-kpi-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-bottom: 7px !important;
  }
  #mainContent#mainContent .pld-page-header + .pld-progress-mb + .wh-kpi-row .wh-kpi-card {
    min-height: 46px !important;
    padding: 6px 8px !important;
  }
  #mainContent#mainContent .pld-page-header + .pld-progress-mb + .wh-kpi-row .wh-kpi-label {
    margin-bottom: 0 !important;
    font-size: 9px !important;
  }
  #mainContent#mainContent .pld-page-header + .pld-progress-mb + .wh-kpi-row .wh-kpi-value {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
  #mainContent#mainContent .pld-status-legend {
    margin-bottom: 7px !important;
    padding: 2px 0 !important;
    font-size: 11px !important;
  }

  /* Remove the nested table gutters and let each row become its own grid. */
  #mainContent#mainContent .table-container:has(.pick-detail-row),
  #mainContent#mainContent .table-scroll:has(.pick-detail-row) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #mainContent#mainContent .table-scroll:has(.pick-detail-row) > table,
  #mainContent#mainContent .table-scroll:has(.pick-detail-row) > table > tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent#mainContent tr.pick-detail-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1.7fr) minmax(92px, 0.62fr) auto !important;
    grid-template-areas:
      "select product status note"
      "shelf shelf actions actions" !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
    padding: 8px !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
  }
  #mainContent#mainContent tr.pick-detail-row > td {
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden;
  }
  #mainContent#mainContent tr.pick-detail-row > td::before {
    display: none !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-cb-cell {
    position: static !important;
    grid-area: select;
    align-self: start !important;
    justify-self: start !important;
    z-index: 2;
    display: flex !important;
    overflow: visible;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-item-cb {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
  }
  #mainContent#mainContent tr.pick-detail-row > td[data-label="Status"] {
    grid-area: status;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding-top: 1px !important;
    overflow: visible !important;
  }
  #mainContent#mainContent tr.pick-detail-row > td[data-label="Status"] .pill {
    white-space: nowrap !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-mobile-wait {
    display: block !important;
  }
  #mainContent#mainContent tr.pick-detail-row > td[data-label="SKU"] {
    display: none !important;
  }
  #mainContent#mainContent tr.pick-detail-row > td[data-label="Product"] {
    grid-area: product;
    display: flex !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    padding-right: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: var(--text) !important;
  }
  #mainContent#mainContent tr.pick-detail-row > td[data-label="Qty"] { display: none !important; }
  #mainContent#mainContent tr.pick-detail-row > td[data-label="Shelf"] {
    grid-area: shelf;
    align-self: end !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  #mainContent#mainContent tr.pick-detail-row > td[data-label="Order"] {
    display: none !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-note-td {
    grid-area: note;
    display: flex !important;
    align-self: start !important;
    justify-self: center !important;
    overflow: visible !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-note-td > .pld-note-btn {
    display: none !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-customer-td { display: none !important; }
  #mainContent#mainContent tr.pick-detail-row > .pld-actions-cell {
    grid-area: actions;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    border-top: 0 !important;
    overflow: visible;
    align-self: end !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-mobile-note-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-mobile-note-btn.has-note {
    border-color: var(--yellow-strong, var(--yellow)) !important;
    background: var(--yellow-dim, rgba(245, 180, 0, 0.1)) !important;
    color: var(--yellow-strong, #8a5a00) !important;
  }
  /* Single column since the product photo was removed from pick rows
     (2026-08-01, Cole): similar-looking items invited picking by picture
     instead of by SKU. */
  #mainContent#mainContent tr.pick-detail-row .pld-product-main {
    display: block !important;
    width: 100% !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-product-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  /* 2026-09-03: the 12px/1.12 that used to sit on this GROUPED rule was a decoy
     for .pld-mobile-product-sku only — the sku rule below has identical
     specificity and wins on source order, so editing the 12px here changed
     nothing and would have cost the next person an hour. It was NOT a decoy for
     .pld-mobile-product-order, which has no size of its own, so those two
     declarations moved down to it verbatim rather than being deleted. Computed
     values for both selectors are unchanged. */
  #mainContent#mainContent tr.pick-detail-row .pld-mobile-product-sku,
  #mainContent#mainContent tr.pick-detail-row .pld-mobile-product-order {
    display: block !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-mobile-product-sku {
    margin: 0 0 1px !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-mobile-product-order {
    margin-bottom: 2px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    font-weight: 650 !important;
  }

  /* Dense typography, while keeping shelf and SKU as the strongest signals. */
  #mainContent#mainContent tr.pick-detail-row .pld-sku-text,
  #mainContent#mainContent tr.pick-detail-row .pld-sku-missing {
    flex: 0 0 auto;
    font-size: 14px !important;
    line-height: 1.05 !important;
    word-break: break-word;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-shelf-code {
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }
  #mainContent#mainContent tr.pick-detail-row .composite-badge,
  #mainContent#mainContent tr.pick-detail-row .pill {
    padding: 2px 5px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-wait-badge {
    margin: 0 !important;
    white-space: nowrap;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-desktop-wait {
    display: none !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-shelf-picker-btn,
  #mainContent#mainContent tr.pick-detail-row .pld-inline-shelf-select {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid var(--border-strong, #777) !important;
    border-radius: 8px !important;
    background: var(--surface-1, #f2f0ec) !important;
    color: var(--text) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-shelf-picker-label {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.08 !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-shelf-picker-label .pld-shelf-code {
    font-size: 10px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-shelf-picker-btn--pallet .pld-shelf-code {
    font-size: 26px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em;
    white-space: nowrap !important;
  }
  #mainContent#mainContent tr.pick-detail-row .pld-shelf-picker-edit {
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    border-left: 1px solid var(--border) !important;
    padding-left: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-actions-cell button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-actions-cell .pld-pick-btn {
    flex-grow: 2 !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-actions-cell .pld-split-btn,
  #mainContent#mainContent tr.pick-detail-row > .pld-actions-cell .pld-merge-btn {
    display: none !important;
  }
  #mainContent#mainContent tr.pick-detail-row > .pld-actions-cell .pld-remove-btn {
    flex: 0 0 38px !important;
    width: 38px !important;
    padding: 0 !important;
    border: 1px solid var(--red) !important;
    background: color-mix(in srgb, var(--red) 10%, transparent) !important;
    color: var(--red) !important;
  }

  /* Focus mode repeats SKU/shelf/order in its route banner. Remove those
     duplicates and collapse the remaining row without leaving grid holes. */
  #mainContent#mainContent .pld-focus-table tr.pick-detail-row {
    grid-template-columns: 28px minmax(0, 1.7fr) minmax(92px, 0.62fr) auto !important;
    grid-template-areas:
      "select product status note"
      "shelf shelf actions actions" !important;
  }

  /* The bulk bar remains reachable without covering most of the next row. */
  #mainContent#mainContent .pld-label-bar {
    gap: 6px !important;
    padding: 7px 8px !important;
  }
  #mainContent#mainContent .pld-label-bar button {
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}

/* Mobile-only duplicate header row inside the inventory matrix tbody.
   Rendered always in HTML; hidden on desktop, shown inside the @media
   (max-width:768px) block below. */
.matrix-table tr.inv-mobile-header { display: none; }

/* Inventory Overview — mode toggle (New / Openbox pill bar) and the
   "In stock only" checkbox share one row. Pills on the left, checkbox
   pushed to the right by space-between. Applies at every breakpoint. */
.inv-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.inv-mode-row > div:first-child { margin-bottom: 0 !important; }

/* ─── Tablet (1024px) ─── */
@media (max-width: 1024px) {
  /* Grids defined in JS views via class — force 2-col */
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (768px and below)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Core Layout ─── */
  .main {
    overflow-x: hidden;
    padding: 12px;
    padding-bottom: 24px; /* bottom nav is permanently hidden — small base gap only */
    /* min-width:0 lets the 1fr grid column shrink below children's min-content
       width — without it, a 600px-wide table inside .inv-scroll forces
       <main> to grow past 375px viewport. */
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Force the grid track to not exceed the viewport so children can't
     push <main> outside the 375px screen. */
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ─── View wrapper padding: tighten inline padding on mobile ─── */
  #mainContent > div[style*="padding:24px"],
  #mainContent > div[style*="padding: 24px"],
  #mainContent > div[style*="padding:32px"],
  #mainContent > div[style*="padding: 32px"] {
    padding: 12px !important;
  }

  /* ─── Sidebar: slide-in fixes ─── */
  .sidebar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ─── Header compact ─── */
  .header {
    padding: 0 8px;
    height: auto;
    min-height: 52px;
    align-items: flex-start;
    gap: 8px;
  }
  .header-left .logo {
    font-size: 14px;
  }
  .header-left .logo-sub {
    display: none;
  }
  .header-right {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .header-status-group,
  .header-action-group,
  .header-account-group {
    gap: 6px;
  }
  .header-status-group {
    flex: 1 1 auto;
  }
  .header-action-group,
  .header-account-group {
    flex: 0 1 auto;
  }

  /* ─── All grids: force responsive ─── */
  .kpi-grid-4,
  .kpi-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Catch grids defined via classes in views */
  .brief-grid,
  .sc-card-grid,
  .pl-grid,

  /* Auto-fill/auto-fit grids — lower the minmax floor */
  .brief-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ─── Cards: full width, no overflow ─── */
  .brief-card,
  .kpi-card,
  .si-card,
  .ci-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── Tables: always horizontally scrollable ─── */
  .table-container,
  .table-wrap,
  .ra-table-wrap,
  [class*="-table-wrap"],
  [class*="table-container"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  /* Tables themselves should not be constrained */
  table {
    min-width: max-content;
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Ensure data-tables are scrollable even without explicit wrapper.
     Use display:table (not block) to preserve table layout semantics,
     and wrap with overflow on the parent instead. */
  .data-table {
    width: 100%;
    min-width: max-content;
  }

  /* ─── Flex rows: force wrap ─── */
  .toolbar,
  .filter-bar,
  .filter-row,
  .page-header,
  .page-header > div[style*="display:flex"],
  .controls,
  [class*="-toolbar"],
  [class*="-controls"],
  [class*="-filters"],
  [class*="-filter-bar"],
  [class*="filter-row"] {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  /* ─── Search inputs: don't overflow ─── */
  input[type="search"],
  input[type="text"],
  .search-input,
  .form-input,
  [class*="-search"] input {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* ─── Select dropdowns: full width on mobile ─── */
  /* 16px font-size is required to prevent iOS Safari auto-zoom on focus. */
  select,
  .filter-select {
    max-width: 100% !important;
    min-height: 44px;
    font-size: 16px;
  }

  input[type="number"],
  input[type="date"],
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  /* ─── Touch targets: minimum 44px ─── */
  button,
  .btn,
  .action-btn,
  .nav-item,
  .tab,
  .tab-btn,
  [role="button"],
  [role="tab"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Header icon cluster must hit the 44×44 touch-target minimum at mobile.
     modern-theme.css has `.refresh-btn { min-height: 34px }` at (0,1,0)
     which beats the generic `button { min-height: 44px }` rule above —
     force parity on the header button row to recover the touch floor. */
  .notification-bell-btn,
  .theme-toggle-btn,
  .health-dot-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .header-right .refresh-btn,
  .header-right .sync-now-btn {
    min-height: 44px;
    padding: 8px 12px;
  }
  /* Hide Sign Out from mobile top bar — it lives in the bottom-nav More
     menu now (Account section) where a phone user can reach it without
     a 67px button stealing space from page titles + actions. */
  .header-right .sign-out-btn { display: none !important; }
  /* …but NOT the brands-hub exit, which only borrows that class for its
     styling. This rule was written for Sign Out, which was relocated into the
     More sheet; Brands was added later and got caught by it, leaving the ONE
     `/brands` link in the document set to `display: none` on a phone — no
     route into the incubator existed at 375px at all. It is owner-only and
     hidden by the server for everyone else, so it costs no space for anyone
     but Cole. */
  .header-right a.sign-out-btn#brandsHubLink { display: inline-flex !important; }
  /* The drawer is the first place phone users look for account controls.
     Keep Sign Out pinned to its bottom as well as in the More sheet, so it is
     reachable without scrolling through every dashboard section. */
  .sidebar-mobile-account {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--sidebar-border, var(--border));
    background: color-mix(in srgb, var(--sidebar-bg) 96%, transparent);
    backdrop-filter: blur(10px);
  }
  .sidebar-mobile-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--red, #b91c1c) 34%, var(--sidebar-border, var(--border)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--red, #b91c1c) 8%, var(--sidebar-bg));
    color: var(--red, #b91c1c);
    font: 650 13px/1 var(--font-body, sans-serif);
    cursor: pointer;
  }
  .sidebar-mobile-signout:focus-visible {
    outline: 2px solid var(--accent, #b08d57);
    outline-offset: 2px;
  }
  /* Add Account section divider in the More sheet so Sign Out is
     visually separated from view links. */
  .quick-jump-section + .quick-jump-section .quick-jump-section-label[data-i18n="qj.account-section"] {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
  }

  .header-freshness-wrap,
  .api-health-wrap,
  .sync-status,
  .live-indicator,
  .view-as-switcher,
  .view-mode-indicator {
    min-height: 40px;
  }

  /* ─── Tabs: horizontal scroll instead of overflow ─── */
  .tabs,
  .tab-bar,
  [class*="-tabs"],
  [class*="tab-bar"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar,
  [class*="-tabs"]::-webkit-scrollbar {
    display: none;
  }

  /* ─── Modals: full width on mobile ─── */
  .modal,
  [class*="-modal"] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 100px) !important;
    max-height: calc(100dvh - 100px) !important;
    margin: 12px !important;
  }

  .rcv-qty-btn,
  .hub-view-tab,
  .hub-compose-btn,
  .hub-ch-btn,
  .hub-action-btn,
  .hub-send-btn,
  .ct-email-save-btn,
  .ct-link-btn,
  .hub-snooze-opt,
  .hub-snooze-custom input[type="date"],
  .hub-assignee-select {
    min-height: 44px !important;
  }
  .rcv-qty-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    font-size: 18px !important;
  }
  .hub-view-tab,
  .hub-compose-btn,
  .hub-action-btn,
  .ct-email-save-btn,
  .ct-link-btn {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  .hub-ch-btn {
    min-width: 44px !important;
    padding: 8px 10px !important;
  }
  .hub-ch-label {
    font-size: 10px !important;
  }
  .hub-snooze-custom {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .hub-snooze-custom label {
    width: 100%;
    font-size: 12px !important;
  }
  .hub-snooze-custom input[type="date"],
  .hub-snooze-custom .hub-snooze-opt {
    width: 100%;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  .hub-snooze-custom input[type="date"] {
    font-size: 16px !important;
  }

  /* ─── Login card fix ─── */
  .login-card {
    width: calc(100vw - 32px) !important;
    max-width: 360px !important;
    margin: 0 16px;
  }

  .notification-panel,
  .freshness-tooltip,
  .api-health-panel,
  .health-popover {
    max-width: calc(100vw - 16px);
  }

  /* ─── Two-column layouts: stack ─── */
  .sc-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ─── Fixed-column grids used in views: stack ─── */
  .mb-ad-perf-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─── Specific view fixes ─── */

  /* Storefront Health: stack the 200px+1fr layout */
  [class*="sh-grid"],
  [class*="sh-layout"] {
    grid-template-columns: 1fr !important;
  }

  /* Strategy Command: card grid overflow fix */
  .sc-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cart Insights: 9-col filter and dual-pane layout */
  .ci-layout,
  [class*="ci-grid"],
  [class*="ci-layout"] {
    grid-template-columns: 1fr !important;
  }

  /* Financial Alerts: 4-col summary */

  /* Discontinuation: 4-col and 3-col grids */

  /* Customer views */

  /* Revenue / Financial views */

  /* Travel: flight result row */

  /* Accounting: 4-col panel */

  /* Data Quality */

  /* Anomalies */

  /* System views */

  /* Agent views */

  /* Pipeline / Tracker */

  /* Listing drafts */

  /* Product views */

  /* Nexus Optimizer */

  /* Markdown optimizer */

  /* Marketing */

  /* SKU views */

  /* Refunds */

  /* Jarvis views */
  .jm-grid,

  /* Intelligence / Synthesis */
  .intel-grid,

  /* Decision Playbook */

  /* Vault */

  /* Warehouse */
  .wh-grid,

  /* Labels */
  .lbl-grid,

  /* Order Exceptions */

  /* Bulk Orders */

  /* Smart Reorder */

  /* Supplier Scorecard */

  /* Collection views */

  /* Self-Healing */

  /* Control Plane */

  /* Event Log */

  /* Photoshoots */

  /* Approval Queue */

  /* Website */

  /* Support */
  .sup-grid,

  /* ROAS Trend */

  /* Price Lab */
  .pl-grid {
    grid-template-columns: 1fr !important;
  }

  /* Expense Tracking */
  .exp-kpi-row {
    flex-wrap: wrap !important;
  }

  /* Retirement Advisor */
  .ret-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cashflow */

  /* Revenue Forecast */

  /* Competitor Intel */

  /* ─── SVG Charts: constrain width ─── */
  svg {
    max-width: 100%;
    height: auto;
  }

  /* ─── calc(100vh) scroll containers — account for bottom nav ─── */
  [style*="max-height:calc(100vh"],
  [style*="max-height: calc(100vh"] {
    max-height: calc(100dvh - 140px) !important;
    max-height: calc(100dvh - 140px) !important;
  }

  /* ─── Minimum readable font size on mobile ─── */
  /* 13px is the readable floor — 11px fails WCAG on small phones. */
  .kpi-label,
  .kpi-sub,
  .status-badge,
  .view-table th,
  [class*="-label"]:not(.bottom-nav-label):not(.stat-label):not(.suggestion-label),
  [class*="-stat-label"]:not(.stat-label),
  [class*="card-label"] {
    font-size: 13px !important;
  }

  /* ─── Code/pre blocks ─── */
  pre, code {
    overflow-x: auto;
    max-width: 100%;
    word-break: break-word;
  }

  /* ─── Images ─── */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ─── Inline style grid overrides ───
     These catch grids set via inline style="" attributes.
     Many views use inline repeat(3/4/5, 1fr) grids that need
     to collapse on mobile. At 768px: 2-col. At 480px: 1-col (below). */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Catch "1fr 1fr" and "1fr 1fr 1fr" style grids (not using repeat()) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Product detail 2-col layout */
  .pd-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* minmax grids with floor > 320px — force single column on mobile */
  [style*="minmax(340px"],
  [style*="minmax(350px"],
  [style*="minmax(360px"],
  [style*="minmax(370px"],
  [style*="minmax(380px"],
  [style*="minmax(400px"],
  [style*="minmax(420px"],
  [style*="minmax(440px"],
  [style*="minmax(460px"],
  [style*="minmax(480px"],
  [style*="minmax(500px"] {
    grid-template-columns: 1fr !important;
  }

  /* Bottom nav CSS removed 2026-08-27: no element with id="mobileBottomNav"
     exists in index.html or portal.html, so buildMobileBottomNav() returns
     early and the markup never renders. Don't re-add the CSS without the markup. */

  /* ─── Fix 1: body overflow — allow vertical scroll on mobile ─── */
  body {
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100dvh;
    min-height: 100dvh;
    /* Prevent iOS momentum-scroll bleed-through behind fixed panels */
    overscroll-behavior-y: none;
  }

  /* ─── Fix 2: .side-panel — full viewport width on mobile ─── */
  .side-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
  }

  /* ─── The Messages drawers read as a LAYER, not a page ───────────────────
     Cole, on mobile: a hyperlinked order number or SKU "takes us into a new
     page ... it should just do a side drawer so that we can keep where we are
     in a convo."

     At 100vw the drawer covers the conversation completely, and a surface with
     nothing behind it is a page — there is no visual claim that anything was
     preserved, and nothing to aim at to get back. Leaving a strip of the
     conversation visible under a dimmed scrim is what makes it read as
     something laid OVER the thread you are still in.

     Scoped to the four panels the Messages tab opens rather than every
     `.side-panel` in the dashboard: the other views' panels are their own
     contract, and this is not the change to make on their behalf. */
  .side-panel.msg-order-panel,
  .side-panel.msg-sku-panel,
  .side-panel.msg-info-panel,
  .side-panel.msg-inbox-ctx-panel {
    width: 92vw !important;
    max-width: 92vw !important;
    left: auto !important;
    right: 0 !important;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
  }

  /* ─── Fix 3: .notification-panel — constrained to viewport width ─── */
  .notification-panel {
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    right: 12px !important;
    left: 12px !important;
  }

  /* ─── Fix 4: .row-detail-panel — remove min-width that overflows mobile ─── */
  .row-detail-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
  }

  /* ─── Fix 5: .responder-layout and .hub-container — stack on mobile ─── */
  .responder-layout {
    flex-direction: column !important;
    height: auto !important;
    gap: 0 !important;
  }
  .responder-layout > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 40vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .hub-container {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100dvh - 140px);
  }
  .hub-container > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 40vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* ─── Fix: Jarvis chat — account for bottom nav ��── */
  /* Exclude jarvis-container-intel-* — those are small panels on the
     Container Tracker, not the full-screen Jarvis chat surface. The
     wildcard was sizing them to ~692px (viewport - 120) on mobile,
     blowing out the layout. */
  [class*="jarvis-container"]:not([class*="jarvis-container-intel"]) {
    height: calc(100dvh - 120px) !important;
    height: calc(100dvh - 120px) !important;
  }

  /* ─── Fix: agent-comms 2-col layout — stack on mobile ─── */
  .ac-wrap {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  /* ─── Fix: customer-intelligence layout — stack on mobile ──�� */
  .ci-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .ci-layout > *:first-child {
    width: 100% !important;
    max-height: 40vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* ─── Fix: logistics overview-grid 2-col → stack on mobile ─── */
  .overview-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─── Fix: scheduler toast — clear the safe-area only ─── */
  #sched-toast {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ─── Fix: dependency-graph canvas — no bottom nav to subtract ─── */
  #dgCanvas {
    height: 100% !important;
  }
  #dgStats, #dgHelp {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #dgLegend {
    display: none !important;
  }

  /* ─── Fix 6: #assistantBtn — clear the safe-area only ─── */
  #assistantBtn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }

  /* ─── Fix 7: Toasts + batch bar — clear the safe-area only ─── */
  .hub-toast,
  .lbl-toast,
  #aqBatchBar {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ─── Fix 8: Missing grid collapses ─── */
  .kpi-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lbl-grid-2,
  .lbl-grid-3,
  .lbl-grid-4,
  .lbl-grid-addr {
    grid-template-columns: 1fr !important;
  }
  .pd-price-grid,
  .rev-bottom-grid,
  .manage-grid,
  .sa-grid-2,
  .rl-grid-2,
  .ret-form-grid-2,
  .cust-repeat-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .rl-grid-3,
  .mi-add-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE (480px and below)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .main {
    padding: 8px;
    padding-bottom: 20px;
  }

  /* All multi-column grids → single column */
  .kpi-grid-4,
  .kpi-grid-3,

  .sc-stats {
    grid-template-columns: 1fr !important;
  }

  /* Inline style grids → single column at 480px */
  [style*="grid-template-columns: repeat("],
  [style*="grid-template-columns:repeat("] {
    grid-template-columns: 1fr !important;
  }

  /* Even tighter view padding at 480px */
  #mainContent > div[style*="padding"] {
    padding: 8px !important;
  }



  /* Compact header — must stay `height: auto` so the flex-wrap second row
     (.header-right buttons) doesn't overflow into .main and collide with
     the page greeting. */
  .header {
    padding: 0 6px;
    height: auto;
    min-height: 48px;
  }
  .logo {
    font-size: 12px;
  }

  /* Page title */
  .page-title {
    font-size: 15px;
  }

  /* Cards tighter padding */
  .brief-card,
  .kpi-card,
  [class*="-card"] {
    padding: 10px !important;
  }

  /* Sidebar takes full width */
  .sidebar {
    width: 100% !important;
  }

  /* Collapse 5-col grid to single column */
  .kpi-grid-5 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   VERY SMALL (375px and below — iPhone SE, etc.)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .main {
    padding: 6px;
    padding-bottom: 16px;
  }

  /* Even tighter gaps */
  .brief-grid,
  [class*="-grid"] {
    gap: 6px !important;
  }

  .header {
    padding: 0 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  /* 56px of padding-bottom used to clear the (now removed) bottom nav. */
  .main {
    padding-bottom: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════
   iOS SAFE AREAS
   ═══════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .main {
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
  }
}

/* ═══════════════════════════════════════════════════════════
   FORM-05: Support customer filters — readable on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Support view date + number filter inputs (inline-styled in JS, override here) */
  #customersSearchInput { font-size: 16px !important; }
  /* Toolbar date/number inputs */
  .toolbar input[type="date"],
  .toolbar input[type="number"] {
    font-size: 16px !important;
    padding: 8px !important;
    min-height: 44px !important;
  }
  /* Clear filters button */
  .toolbar button[onclick*="Clear"],
  .toolbar button[onclick*="clear"] {
    font-size: 14px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOB-01: Quick Jump sheet — all sidebar views on mobile
   ═══════════════════════════════════════════════════════════ */
.quick-jump-section {
  padding: 6px 16px 2px;
}
.quick-jump-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 0 2px;
}
.quick-jump-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,0.12));
  cursor: pointer;
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.quick-jump-item:last-child {
  border-bottom: none;
}
.quick-jump-item:active {
  background: var(--surface-2);
}
.quick-jump-item:focus-visible {
  background: var(--surface-2);
  outline: 2px solid var(--accent, #c8a97e);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════
   SCAN-03..07 — Card layout for wide tables on mobile
   Targets the 5 tables with min-width ≥ 640px that would
   otherwise require horizontal scroll on narrow screens.
   Each row becomes a vertical card with label: value pairs.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Shared card-row mixin ── */
  /* Applied per table selector below. thead is hidden;
     each td shows its column header via data-label attr
     (set by JS at render time when present, falls back
     gracefully when absent). */

  /* ── 1. Products logistics table (.prod-logistics-table, min-width 980px) ── */
  .prod-logistics-table,
  .prod-logistics-table thead,
  .prod-logistics-table tbody,
  .prod-logistics-table th,
  .prod-logistics-table td,
  .prod-logistics-table tr {
    display: block;
  }
  .prod-logistics-table thead tr { display: none; }
  .prod-logistics-table tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  .prod-logistics-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
  }
  .prod-logistics-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
  }
  /* Override min-width so it doesn't force scroll */
  .prod-logistics-table { min-width: 0 !important; width: 100%; }

  /* ── Inv-matrix toolbar layout: Sort + View share ONE row 50/50,
     "In stock only" checkbox is compact (no big filter-select chrome).
     Toolbar itself is constrained to its parent so it can't push mainContent
     past viewport width. ── */
  #mainContent .toolbar {
    /* Override modern-theme.css's .toolbar { flex-direction: column } at
       max-width:768px so Sort + View can share a row at 50/50. */
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
  }
  #mainContent .toolbar > .search-input {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Sort + View share a row at ~50% each. The toolbar's gap is 8px (set by
     the Pass 1 rule near line 2786), so 50% - 4px on each side gives an exact
     fit with no sub-pixel overflow that would wrap View to the next row. */
  #mainContent .toolbar > .filter-select:not(.inv-instock-toggle) {
    flex: 0 1 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 4px) !important;
    box-sizing: border-box;
  }
  /* "In stock only" — compact pill, sits next to View on its own row.
     `.filter-select` rule gives it max-width: 100% — override to auto. */
  .inv-instock-toggle {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    color: var(--text-muted) !important;
    line-height: 1 !important;
    width: fit-content !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    margin-top: 2px;
  }
  .inv-instock-toggle input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
  }

  /* ── 2. Inventory matrix table — KEEP as a real <table> with columns on
     mobile (Cole 2026-04-24). Was display:block card layout; reverted at
     user request. Make text/padding compact so all 10 columns fit a 375px
     viewport with horizontal scroll inside .inv-scroll wrapper. ── */
  .inv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Full-bleed: kill the .table-container { padding: 0 12px } inset for
     inv-matrix only, so the table touches both viewport edges. */
  .table-container:has(> .inv-scroll) {
    margin: 0 -12px !important;
    padding: 0 !important;
    max-width: none !important;
    width: calc(100% + 24px) !important;
  }
  .matrix-table { font-size: 11px; min-width: max-content; }
  .matrix-table th, .matrix-table td { padding: 4px 5px; white-space: nowrap; }
  .matrix-table th { font-size: 9.5px; letter-spacing: 0.2px; }
  .matrix-table td.sku-cell { font-size: 11px; }
  .matrix-table td.title-cell { font-size: 10.5px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
  .matrix-table td.matrix-qty { font-size: 11px; padding: 4px 5px; min-width: 32px; }
  /* Tighten location-column header min-width too */
  .matrix-table thead th.loc-col,
  .matrix-table tr.inv-mobile-header th.loc-col { min-width: 36px; padding: 3px 4px; }
  .inv-th-sku,
  .matrix-table td.sku-cell { min-width: 42px; max-width: 70px; padding-left: 6px; padding-right: 4px; }
  /* "of FL-73-x" parent badge stacked under SKU on mobile too */
  .matrix-table tbody td.sku-cell .sku-parent-of {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .inv-th-dims { min-width: 80px; }

  /* ── Mobile column header row: hide desktop <thead>, show the duplicate
     header <tr class="inv-mobile-header"> rendered inside <tbody> right
     below the "Location Totals" mega-title row (Cole 2026-04-25). ── */
  .matrix-table thead { display: none; }
  .matrix-table tr.inv-mobile-header { display: table-row; }
  .matrix-table tr.inv-mobile-header th {
    background: var(--surface-2, var(--surface));
    font-size: 9.5px;
    letter-spacing: 0.2px;
    padding: 4px 5px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
  }
  .matrix-table tr.inv-mobile-header th.loc-col,
  .matrix-table tr.inv-mobile-header th.inv-th-total { text-align: center; }

  /* ── Toggle group (Confirm Receipt / Transfer, etc.) — tighter padding on
     mobile so it fits next to a back button + title in a single row. ── */
  .toggle-btn { padding: 7px 10px !important; font-size: 11px !important; }
  .toggle-group { flex-shrink: 0; }

  /* ── Inv-matrix search input — bump from 35px to 44px touch height,
     make sticky so it stays reachable while scrolling 1300+ SKU cards. ── */
  /* 2026-09-03 UX audit round 4: scoped to #matrixSearchInput — the old
     placeholder match also stuck 9 unrelated search inputs (Products, reorder
     recs, cost-chain, bulk-orders, PI, and an in-modal search) to the top of
     their toolbars, floating them over the rows below. 44px height already
     comes from the #mainContent input rule below. */
  #matrixSearchInput {
    padding: 10px 14px !important;
    border-radius: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface);
  }

  /* ── Locations shelf-detail header on mobile — let it wrap so the new
     "Bulk Transfer From Here" button + close X stay reachable next to a
     long shelf code (Cole 2026-04-25). ── */
  .shelf-inline-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .loc-shelf-hd-actions {
    flex-wrap: wrap;
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start;
  }
  .loc-close-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Per-row Transfer / Remove icon buttons in the shelf items table —
     bump the tap target so workers don't mis-hit on a 375px screen
     (the original 22×22 next to a cell border was a coin-toss). */
  .loc-action-td .btn-sm,
  .loc-action-td {
    white-space: nowrap;
    padding: 4px 6px !important;
  }

  /* Shelf inline detail panel + items table — span full screen width on
     mobile so SKU rows are not cut off (Cole 2026-05-07). The panel is
     inserted as a sibling row in the shelves grid; on mobile it should
     break out of its parent column and use the full viewport width. */
  .wh-shelf-inline-detail {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 6px !important;
    box-sizing: border-box;
  }
  .wh-shelf-inline-detail .loc-table-full {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .wh-shelf-inline-detail .loc-table-full td,
  .wh-shelf-inline-detail .loc-table-full th {
    padding: 8px 4px !important;
    font-size: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Hide barcode column on mobile — lowest-value, longest content; SKU is
     enough to identify the line. Re-shows in the inline-edit drawer. */
  .wh-shelf-inline-detail .loc-table-full th:nth-child(5),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(5) {
    display: none !important;
  }
  /* Column widths sum to 100% so rows span the full panel. */
  .wh-shelf-inline-detail .loc-table-full th:nth-child(1),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(1) { width: 22% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(2),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(2) { width: 28% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(3),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(3) { width: 18% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(4),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(4) { width: 12% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(6),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(6) { width: 20% !important; padding-right: 8px !important; }
  .wh-shelf-inline-detail .loc-action-td .loc-edit-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
    min-width: 0 !important;
  }
  .loc-action-td .btn-sm + .btn-sm {
    margin-left: 8px;
  }

  /* Location search-results table — also a `loc-table-full`, but its cells
     use rowspan (SKU / Barcode / Total span multiple shelf rows) which the
     generic card-table hydration mangles. Now skipped from hydration; render
     as a compact, horizontally scrollable real table so columns stay aligned
     and it never blows out the viewport width. */
  .loc-results-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .loc-results-panel .loc-table-full {
    width: 100%;
    font-size: 12px;
  }
  .loc-results-panel .loc-table-full th,
  .loc-results-panel .loc-table-full td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* ── Add/Remove + Transfer item modals — near full-screen on phones so the
     camera barcode scanner gets real screen space. Previously the SKU input
     was crushed (showing only "Sc") and the camera was a small inset 16:9
     strip. (Cole 2026-05-21) ── */
  .stp-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 94dvh !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 14px !important;
  }
  .stp-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
  }
  .stp-body {
    padding: 12px !important;
    gap: 12px !important;
  }
  .stp-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: var(--surface) !important;
    flex-wrap: wrap !important;
    padding: 10px 0 2px !important;
    margin-top: 2px !important;
  }
  /* Scan row — let the SKU input span its own full line instead of being
     squeezed between the camera button, qty field and Add button. */
  .stp-scan-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .stp-scan-input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    font-size: 16px !important;       /* 16px keeps iOS from zooming on focus */
  }
  .stp-scan-row .wh-scan-btn {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 auto !important;
  }
  .stp-scan-row .stp-qty-input {
    flex: 0 0 62px !important;
    width: 62px !important;
    height: 48px !important;
    font-size: 16px !important;
    text-align: center !important;
  }
  .stp-scan-row .stp-scan-add-btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
  /* Inline camera scanner — break out of the modal padding to span the full
     screen width edge to edge, and stand tall so barcodes are easy to line
     up. The old 16:9 / 280px-capped strip is replaced by a 56vh viewport. */
  .loc-modal-scanner-slot {
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .loc-modal-scanner-inner { gap: 10px !important; }
  .loc-modal-scanner-video-wrap {
    aspect-ratio: auto !important;
    height: 56vh !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  .loc-modal-scanner-controls {
    padding: 0 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .loc-modal-scanner-controls .loc-inline-scanner-status {
    flex: 1 1 auto !important;
  }
  .loc-modal-scanner-controls .btn-sm {
    min-height: 44px !important;
    flex: 0 0 auto !important;
  }

  /* ── All Orders / Fulfillment view — compact stats + reordered toolbar
     on mobile (Cole 2026-05-07). 9 stats in 3-col grid (was 2-col with
     74px tall cards = wall of stats); toolbar reorganized into:
        Row 1: search input (full width)
        Row 2: location select (full width)
        Rows 3-4: 8 buttons in 2×4 grid (7 status filters + Sync Tracking) ── */
  /* Smaller cards, right at the very top (Cole 2026-07-17): 4-per-row so the
     9 KPIs take ~3 short rows and the orders list starts sooner. Tight bottom
     margin — the Risk Intelligence panel that used to sit above these was
     removed, so the strip is the first thing under the header. */
  #mainContent#mainContent #fulfillStatsRow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
  }
  #mainContent#mainContent #fulfillStatsRow .stat-card {
    min-height: 0 !important;
    padding: 5px 8px !important;
  }
  #mainContent#mainContent #fulfillStatsRow .stat-label {
    font-size: 9px !important;
    margin-bottom: 1px !important;
  }
  #mainContent#mainContent #fulfillStatsRow .stat-value {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  #mainContent#mainContent #fulfillStatsRow .stat-subval {
    font-size: 10px !important;
    color: var(--text-muted);
  }

  /* Fulfillment toolbar (rewritten 2026-07-16 density pass): search takes a
     full row; location select + Sync Tracking pair up on one row; the status
     chips defer to the density layer's .lf-filter-group scroll-strip (one
     horizontally scrollable row of pills — see MOBILE DENSITY LAYER at the
     end of this file). The old 4-col grid + display:contents treatment
     stretched every chip to width:100% and fought the strip. */
  #mainContent #fulfillToolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 8px 0 10px !important;
  }
  #mainContent #fulfillToolbar > .search-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #mainContent #fulfillToolbar > .filter-select {
    flex: 1 1 calc(58% - 6px) !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #mainContent #fulfillToolbar > #syncTrackingBtn {
    flex: 1 1 calc(42% - 6px) !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
    box-sizing: border-box;
  }
  #mainContent #fulfillToolbar > .lf-filter-group {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent #fulfillToolbar > .lf-filter-group > .ret-filter-btn .fb-count {
    font-size: 10px !important;
    margin-left: 3px !important;
  }

  /* ── Returns Stock flat table — consolidate for mobile (Cole 2026-05-07;
     one-row-per-unit restored 2026-06-09). The wrap carries
     data-mobile-table-skip so the generic mobile card hydrator
     (ui-enhancements.js) leaves it alone — each unit stays a single
     compact table row instead of exploding into a tall stacked card.
     Notes / Declared / Received / Last edit moved to the click-to-expand row
     detail (2026-06-09) — the mobile column set is now SKU / Order / WH /
     Condition / Actions (Shopify + Condition-on-Pending hidden below).
     Action buttons collapse to icon-only via .rs-btn-label. ── */
  #mainContent .rs-flat-wrap table { min-width: 0 !important; }
  #mainContent .rs-btn-label { display: none !important; }
  #mainContent .rs-flat-wrap td[data-rs-col="actions"] button { white-space: nowrap; }
  #mainContent .rs-flat-wrap td[data-rs-col="order"] > span + span {
    /* "· Apr 12" date suffix — drop on phones; the order # is the identifier */
    display: none;
  }
  /* Shopify column hidden on mobile — on the Pending tab it's "not listed"
     for every row (noise), and listing is a desktop, admin-only action.
     (Notes / Declared / Received / Last edit are no longer columns at all —
     they live in the click-to-expand row detail now.) */
  #mainContent .rs-flat-wrap th[data-rs-col="shopify"],
  #mainContent .rs-flat-wrap td[data-rs-col="shopify"] {
    display: none !important;
  }
  /* On the Pending tab every row is "⏳ Unconfirmed" by definition (the tab
     IS the unconfirmed queue), so the Condition column is pure redundancy on
     a phone. Drop it there — leaves SKU / Order / WH / Actions, which fits a
     375px screen with no horizontal scroll. The Confirmed tab keeps it (real,
     varied conditions). */
  #mainContent .rs-flat-wrap.rs-pending th[data-rs-col="condition"],
  #mainContent .rs-flat-wrap.rs-pending td[data-rs-col="condition"] {
    display: none !important;
  }
  #mainContent .rs-flat-wrap td[data-rs-col="condition"] > span,
  #mainContent .rs-flat-wrap td[data-rs-col="shopify"] span {
    white-space: nowrap !important;
  }
  #mainContent .rs-flat-wrap td,
  #mainContent .rs-flat-wrap th {
    padding: 3px 5px !important;
    font-size: 11px !important;
  }
  #mainContent .rs-flat-wrap td[data-rs-col="warehouse"] {
    font-size: 10px !important;
  }
  /* ── Thin, dense rows on mobile (Cole 2026-06-09: "make the rows more thin
     on mobile and more compact horizontally — there's so much dead space").
     The trash/undo buttons carried inline min-height that the global 44px
     touch-target rule bumped to 44px, making every row ~57px even though
     Confirm/→ were 24px. Pin every action button in this dense table to 28px
     (still tappable) so the row collapses to ~34px. ── */
  #mainContent .rs-flat-wrap table button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 7px !important;
  }
  /* Drop the secondary "→" move button in the Actions cell on mobile — it's
     a rarely-used "move before confirming" shortcut; the primary Confirm and
     the 🗑 trash stay. Trims the widest column. */
  #mainContent .rs-flat-wrap .rs-flat-move { display: none !important; }
  #mainContent .rs-flat-wrap td[data-rs-col="actions"] > div { gap: 10px !important; }
  /* Cap the SKU column — auto-layout was handing it ~164px for an 8-char
     SKU, leaving a dead gap before Order #. 92px fits the vast majority;
     longer SKUs ellipsis (full value already visible on tap / in the row). */
  #mainContent .rs-flat-wrap td[data-rs-col="sku"],
  #mainContent .rs-flat-wrap th[data-rs-col="sku"] {
    width: 92px !important;
    max-width: 92px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Slim the condition / shopify pills so the row reads tighter. */
  #mainContent .rs-flat-wrap td[data-rs-col="condition"] > span,
  #mainContent .rs-flat-wrap td[data-rs-col="shopify"] span {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* ── Returns Stock chrome compacting (Cole 2026-06-09: "the search bar
     and everything else is super inefficient"). The shared .wh-grid-search
     wrapper carried 14px padding around an already-44px input (86px total)
     and the segmented status/warehouse tab rows ran 40px tall — together
     they pushed the first unit row ~310px down the page. Tighten without
     shrinking the input font below 16px (iOS zoom-on-focus guard). The
     extra :not() qualifiers match the specificity of the generic
     .pick-tab-group segmented-control rule below so these win. ── */
  #mainContent .rs-search-bar { margin-bottom: 8px !important; }
  #mainContent .rs-search-bar .wh-grid-search {
    padding: 2px 12px !important;
    margin-bottom: 0 !important;
  }
  #mainContent .rs-search-bar .wh-grid-search input[id^="rsSearch"] {
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #mainContent .pick-tab-group.rs-wh-subtabs { margin-bottom: 6px !important; }
  #mainContent .pick-tab-group.rs-status-subtabs:not(.pl-wh-subtabs):not(.rs-wh-subtabs) {
    margin-bottom: 8px !important;
  }
  #mainContent .pick-tab-group.rs-status-subtabs:not(.pl-wh-subtabs):not(.rs-wh-subtabs) .pick-tab {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }

  /* ── Receive flow step indicator — equalize visual weight between
     check-icon (done) and number (pending). Was: 14px svg vs 16px font
     made the eye lag when scanning the row. ── */
  .rcv-step-num {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
  }
  .rcv-step-label { font-size: 12px; }
  .rcv-steps { gap: 4px; }
  .rcv-step-line { flex: 1 0 12px; min-width: 12px; }

  /* ── Bin Map: condense 211-shelf grid for mobile. Cards drop from 120px
     min-width to 90px so 3 cards fit per row at 335px instead of 2.
     Shrink padding + font sizes to chop card height roughly in half. ── */
  #binMapRoot [style*="grid-template-columns"][style*="minmax(120px"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* ── Pick List Detail items table — convert each pick row to a stacked
     card on mobile so the warehouse worker can see Status / SKU / Shelf /
     Customer / Pick & Skip buttons without horizontal scrolling. ── */
  tr.pick-detail-row,
  tr.pick-detail-row td { display: block; }
  tr.pick-detail-row {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border) !important;
    border-radius: var(--radius, 8px);
    margin-bottom: 10px;
    padding: 10px 12px;
  }
  tr.pick-detail-row td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px;
    padding: 4px 0 !important;
    border: none !important;
    min-height: 26px;
  }
  tr.pick-detail-row td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 70px;
  }
  /* Hide the row-checkbox cell on mobile — bulk actions live in their own
     toolbar; per-row checkboxes are awkward to thumb-tap accurately. */
  tr.pick-detail-row td.pld-cb-cell { display: none; }
  /* Actions cell: hide label, full-width button row at bottom of card */
  tr.pick-detail-row td.pld-actions-cell::before { display: none; }
  tr.pick-detail-row td.pld-actions-cell {
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 1px dashed var(--border) !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  tr.pick-detail-row td.pld-actions-cell button {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 13px;
  }
  /* Hide the picklist-detail thead on mobile (we render labels via ::before) */
  .pld-th-status, .pld-th-actions { /* keep desktop styles */ }
  /* Wrap the whole table-scroll wrapper to 100% on mobile so it doesn't add
     a useless horizontal scrollbar around what's now a card list. */
  .table-scroll:has(.pick-detail-row) { overflow-x: visible !important; }
  .table-scroll:has(.pick-detail-row) > table > thead { display: none; }

  /* ── SKU + Shelf prominence on phones ──
     Warehouse staff complained these were getting visually lost behind
     stacked badges (composite / OB / two-per-box). Force the cell to lay
     out as a column so the SKU mono text stays the FIRST visible thing
     and any badge wraps to the next line below. Same treatment for shelf
     so the picker can read it eyes-up while walking. */
  tr.pick-detail-row td[data-label="SKU"],
  tr.pick-detail-row td[data-label="Shelf"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  tr.pick-detail-row td[data-label="SKU"] .pld-sku-text,
  tr.pick-detail-row td[data-label="SKU"] .pld-sku-missing,
  tr.pick-detail-row td[data-label="Shelf"] .pld-shelf-code {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    word-break: break-all;
  }
  tr.pick-detail-row td[data-label="Shelf"] .pld-shelf-cross,
  tr.pick-detail-row td[data-label="Shelf"] .pld-shelf-lastseen {
    font-size: 13px !important;
    word-break: break-word;
  }

  /* ── Pick List Detail header actions (Print / Add Items / Pick All) overflow
     the page-header at narrow widths because each button has bg/border + 13px
     text. Wrap them and let each grow to fit. ── */
  .pld-header-actions { flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; }
  .pld-header-actions button { flex: 1 1 auto !important; min-height: 44px !important; padding: 8px 10px !important; font-size: 12px !important; }

  /* Next Pick already repeats the shelf, SKU, order and pending state in the
     large route banner above the card. Remove those duplicate rows in focus
     mode and keep only packing flags, useful item details, notes and actions.
     This cuts the typical phone card roughly in half without hiding anything
     from the full-list view. */
  .pld-focus-summary { padding: 12px 14px !important; }
  .pld-focus-summary .btn { min-height: 44px !important; }
  .pld-focus-table tr.pick-detail-row {
    margin-bottom: 6px;
    padding: 8px 12px;
  }
  .pld-focus-table tr.pick-detail-row td[data-label="Status"],
  .pld-focus-table tr.pick-detail-row td[data-label="Qty"],
  .pld-focus-table tr.pick-detail-row td[data-label="Shelf"],
  .pld-focus-table tr.pick-detail-row td[data-label="Order"],
  .pld-focus-table tr.pick-detail-row td.pld-empty-value {
    display: none !important;
  }
  .pld-focus-table tr.pick-detail-row td[data-label="SKU"] {
    min-height: 34px;
    padding: 2px 0 6px !important;
  }
  .pld-focus-table tr.pick-detail-row td[data-label="Notes"] {
    align-items: center !important;
    min-height: 44px;
    padding: 4px 0 !important;
  }
  .pld-focus-table tr.pick-detail-row td.pld-actions-cell {
    margin-top: 4px;
    padding-top: 8px !important;
  }
  .pld-footer-actions .btn,
  .pld-footer-actions button {
    min-height: 44px !important;
  }

  /* ── Returns Stock unit tables (.wh-returns-table-sm + .wh-returns-table-lg)
     card layout. When the SKU details panel is expanded, the unit tables
     overflow horizontally (5-6 columns × 11 padding × inline action buttons).
     Convert to stacked cards so the worker can see SKU + Order + Reported
     Condition + Action button without swiping. ── */
  .wh-returns-table-sm,
  .wh-returns-table-sm thead,
  .wh-returns-table-sm tbody,
  .wh-returns-table-sm th,
  .wh-returns-table-sm td,
  .wh-returns-table-sm tr,
  .wh-returns-table-lg,
  .wh-returns-table-lg thead,
  .wh-returns-table-lg tbody,
  .wh-returns-table-lg th,
  .wh-returns-table-lg td,
  .wh-returns-table-lg tr { display: block; }
  .wh-returns-table-sm thead tr,
  .wh-returns-table-lg thead tr { display: none; }
  .wh-returns-table-sm,
  .wh-returns-table-lg { min-width: 0 !important; }
  .wh-returns-table-sm tr,
  .wh-returns-table-lg tr {
    background: var(--surface-1, var(--surface));
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 10px 12px;
  }
  .wh-returns-table-sm td,
  .wh-returns-table-lg td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px;
    padding: 4px 0 !important;
    border: none !important;
    min-height: 24px;
    white-space: normal !important;
  }
  .wh-returns-table-sm td::before,
  .wh-returns-table-lg td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 70px;
  }
  /* Action cell: hide the label, let the buttons fill the row */
  .wh-returns-table-sm td[data-label="Action"]::before,
  .wh-returns-table-sm td[data-label="Actions"]::before,
  .wh-returns-table-lg td[data-label="Action"]::before,
  .wh-returns-table-lg td[data-label="Actions"]::before { display: none; }
  .wh-returns-table-sm td[data-label="Action"],
  .wh-returns-table-sm td[data-label="Actions"],
  .wh-returns-table-lg td[data-label="Action"],
  .wh-returns-table-lg td[data-label="Actions"] {
    margin-top: 6px;
    padding-top: 6px !important;
    border-top: 1px dashed var(--border) !important;
  }

  /* ── Returns Stock per-SKU collapse. With ~70 SKU blocks each containing
     1-3 condition tables, the desktop layout produces a 25,000px scroll
     wall on mobile. Force <details class="rs-sku-block"> closed by default
     so workers see the SKU + count chip strip, expand the ones they need. ── */
  details.rs-sku-block { padding: 0 !important; }
  details.rs-sku-block:not([data-mobile-open]) { /* override the inline open */ }
  /* JS-free hack: hide the summary's open arrow when closed via removing [open]. */
  details.rs-sku-block[open] .rs-sku-chevron { transform: rotate(0deg); }
  details.rs-sku-block:not([open]) .rs-sku-chevron { transform: rotate(-90deg); }
  details.rs-sku-block summary.rs-sku-summary { padding: 12px 14px !important; }
  details.rs-sku-block summary::-webkit-details-marker { display: none; }
  details.rs-sku-block summary { list-style: none; }

  /* ── Warehouse Activity Log on mobile — one-liner per row (Cole 2026-05-07).
     Previously rendered as vertical stacked cards (12 fields × N rows = wall
     of text). Now: single horizontal line per movement with the most
     important info; secondary fields hidden. Tap-and-hold (title attrs) for
     full detail. ── */
  .wh-activity-table { width: 100% !important; min-width: 0 !important; border-collapse: collapse !important; }
  .wh-activity-table thead { display: none !important; }
  .wh-activity-table tbody { display: block !important; }
  .wh-activity-table tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.06)) !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  .wh-activity-table td {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 0 !important;
  }
  .wh-activity-table td::before { content: none !important; }
  /* Visible primary cells on mobile, in display order: When · SKU · Δ · From→To */
  .wh-activity-table td[data-label="When"] { flex: 0 0 auto; color: var(--text-muted) !important; font-size: 11px !important; }
  .wh-activity-table td[data-label="SKU"] { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 600; }
  .wh-activity-table td[data-label="Δ"] { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; min-width: 38px; text-align: right; }
  .wh-activity-table td[data-label="From → To"] { flex: 1 1 auto; min-width: 0; color: var(--text-muted); font-size: 11px !important; text-align: right; }
  /* Hide secondary cells — full detail still in DOM via title="..." for
     accessibility / desktop view; collapsed on mobile to keep the one-liner. */
  .wh-activity-table td[data-label="Move"],
  .wh-activity-table td[data-label="Reason"],
  .wh-activity-table td[data-label="Shelf before"],
  .wh-activity-table td[data-label="Shelf after"],
  .wh-activity-table td[data-label="WH total after"],
  .wh-activity-table td[data-label="By"],
  .wh-activity-table td[data-label="Note"] { display: none !important; }

  /* ── Inv-matrix on mobile: drop the desktop max-height: calc(100vh - 300px)
     scroll cap. With ~1300 SKUs each rendered as a stacked card (~200px),
     a nested scroll container that only shows ~3 cards at a time is awful
     UX — the user fights two scrollbars. Let the page scroll naturally. ── */
  .inv-scroll { max-height: none !important; overflow-y: visible !important; }

  /* ── Container Tracker — keep as a real <table> with horizontal scroll,
     not stacked cards (Cole 2026-04-24). Tighten font/padding so the
     8-column table swipes cleanly inside its overflow:auto wrapper. ── */
  .table-scroll table:not(.matrix-table):not(.wh-activity-table):not(.wh-returns-table-sm) { font-size: 11px; }

  /* ── Jarvis Container Intelligence — collapse to <details> at mobile so
     it doesn't eat half the screen above the actual container list.
     Force `display: block` on the panel (existing .jarvis-container-intel-panel
     CSS uses flex, which breaks native <details> hide-when-closed behavior),
     and explicitly hide the body when not open. ── */
  details.jarvis-intel-details { display: block !important; }
  details.jarvis-intel-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
  details.jarvis-intel-details > summary::-webkit-details-marker { display: none; }
  details.jarvis-intel-details:not([open]) > #jarvisContainerIntelBody { display: none !important; }
  .jarvis-container-intel-body { max-height: 360px; overflow-y: auto; }

  /* (Stacked-card layout for table-scroll tables removed 2026-04-24 per
     Cole — those tables now render as real horizontally-scrolling tables
     with visible column headers, matching matrix-table behavior.) */

  /* ── 2026-04-30 mobile audit fixes ──
     Several JS files inline `style="max-width:440px..480px"` on modal
     containers. On a 390px phone these overflow the viewport. Override
     hardcoded widths in the 400-500px band so they shrink. */
  div[style*="max-width:440px"],
  div[style*="max-width: 440px"],
  div[style*="max-width:460px"],
  div[style*="max-width: 460px"],
  div[style*="max-width:480px"],
  div[style*="max-width: 480px"],
  div[style*="max-width:500px"],
  div[style*="max-width: 500px"] {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Locations shelf detail: inline `min-width:200px` on selects forces
     the Scan-In/Out form to overflow on phones. Constrain to viewport. */
  select[style*="min-width:200px"],
  select[style*="min-width: 200px"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* KPI value font-size override for any warehouse view that injected
     scoped styles before the picklists.js tighten landed. */
  .wh-kpi-value { font-size: 17px !important; }
  .wh-kpi-label { font-size: 10px !important; }

  /* ── Bin Map: warehouse switcher tab strip overflows at narrow widths.
     Make it horizontally scrollable instead of wrapping awkwardly. ── */
  [class*="bin-map-warehouse-tabs"],
  [class*="binmap-tabs"] { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; }
  [class*="bin-map-warehouse-tabs"]::-webkit-scrollbar,
  [class*="binmap-tabs"]::-webkit-scrollbar { display: none; }

  /* ── 3. Shipping claims table (inline min-width:760px) ── */
  /* Targets the data-table inside overflow-x:auto wrap in shipping-claims.js */
  .data-table[style*="min-width:760px"],
  .data-table[style*="min-width: 760px"] {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
  }
  .data-table[style*="min-width:760px"] thead,
  .data-table[style*="min-width: 760px"] thead,
  .data-table[style*="min-width:760px"] tbody,
  .data-table[style*="min-width: 760px"] tbody,
  .data-table[style*="min-width:760px"] th,
  .data-table[style*="min-width: 760px"] th,
  .data-table[style*="min-width:760px"] td,
  .data-table[style*="min-width: 760px"] td,
  .data-table[style*="min-width:760px"] tr,
  .data-table[style*="min-width: 760px"] tr { display: block; }
  .data-table[style*="min-width:760px"] thead tr,
  .data-table[style*="min-width: 760px"] thead tr { display: none; }
  .data-table[style*="min-width:760px"] tr,
  .data-table[style*="min-width: 760px"] tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  .data-table[style*="min-width:760px"] td,
  .data-table[style*="min-width: 760px"] td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
    white-space: normal;
  }
  .data-table[style*="min-width:760px"] td::before,
  .data-table[style*="min-width: 760px"] td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 90px;
  }

  /* ── 4. Event log table (.el-table, min-width 640px) ── */
  .el-table,
  .el-table thead,
  .el-table tbody,
  .el-table th,
  .el-table td,
  .el-table tr {
    display: block;
  }
  .el-table thead tr { display: none; }
  .el-table tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  .el-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
    white-space: normal;
    word-break: break-word;
  }
  .el-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
  }
  .el-table { min-width: 0 !important; width: 100%; }

  /* ── 5. Refunds table (#refundsTable, min-width 640px) ── */
  #refundsTable,
  #refundsTable thead,
  #refundsTable tbody,
  #refundsTable th,
  #refundsTable td,
  #refundsTable tr {
    display: block;
  }
  #refundsTable thead tr { display: none; }
  #refundsTable tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  #refundsTable td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
    white-space: normal;
  }
  #refundsTable td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
  }
  #refundsTable { min-width: 0 !important; width: 100%; }

} /* end @media (max-width: 768px) — SCAN card layouts */

/* ═══════════════════════════════════════════════════════════
   2026-05 mobile audit hardening — whole dashboard
   Shared fixes for touch targets, dense filters, and nested overflow.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header controls were being reduced to 38px by the late dashboard.css
     top-bar refresh. Keep the phone header compact, but do not drop below
     the practical 44px tap floor. */
  .header .icon-btn,
  .header .mobile-menu-btn.icon-btn,
  .header .theme-toggle-btn.icon-btn,
  .header .shell-search-btn.icon-btn,
  .header .notification-bell-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }
  .header .icon-btn.shell-search-btn {
    width: 44px !important;
    padding: 0 !important;
  }
  .header .font-scale-group {
    height: 44px !important;
    min-height: 44px !important;
  }
  .header .font-scale-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  /* Mobile forms: prevent iOS zoom and make controls thumb-friendly even
     when individual views inline small heights/padding. */
  #mainContent input:not([type="checkbox"]):not([type="radio"]),
  #mainContent select,
  #mainContent textarea,
  #mainContent .form-input,
  #mainContent .search-input,
  #mainContent .filter-select {
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  /* View roots and injected panels should never widen the phone canvas. A lot
     of OPS views render inline max-width/grid styles from JS, so this catches
     the shared failure mode without touching desktop density. */
  #mainContent,
  #mainContent > *,
  #mainContent .view-panel,
  #mainContent .u-panel,
  #mainContent .kpi-grid,
  #mainContent .kpi-card,
  #mainContent .sys-stats-row,
  #mainContent .sup-stats-row,
  #mainContent [style*="max-width:1100px"],
  #mainContent [style*="max-width: 1100px"],
  #mainContent [style*="max-width:1200px"],
  #mainContent [style*="max-width: 1200px"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #mainContent .sys-stat-card,
  #mainContent .sup-stat-card {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* Global Jarvis summary panel: it was hard-coded to 380px plus right offset,
     which is wider than a 390px phone once padding/borders are included. */
  #summarize-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #summarize-panel p,
  #summarize-panel span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #summarize-panel button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Shared tab/action bars across finance, reviews, Jarvis, approvals,
     collections, MTO, and onboarding. JS-injected styles vary by view, so
     normalize the mobile behavior here. */
  #mainContent .sub-tab-bar,
  #mainContent .rm-tab-bar,
  #mainContent .mto-tab-row,
  #mainContent .jv-tabs,
  #mainContent .aq-category-tabs,
  #mainContent .rf-horizon-tabs,
  #mainContent .reorder-tabs,
  #mainContent [class*="-tab-row"],
  #mainContent [class*="-tabs"] {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-width: 100%;
    min-width: 0;
  }
  #mainContent .sub-tab-btn,
  #mainContent .rm-tab,
  #mainContent .mto-tab,
  #mainContent .jv-tab,
  #mainContent .aq-cat-tab,
  #mainContent .rf-horizon-btn,
  #mainContent .reorder-tab,
  #mainContent .onb-top-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    align-items: center;
    justify-content: center;
  }
  #mainContent .jv-tab {
    flex: 1 1 calc(50% - 1px) !important;
    padding: 10px 8px !important;
  }
  #mainContent .jv-tab-badge {
    margin-left: 4px !important;
    max-width: 100%;
  }
  #mainContent .jv-aiops-summary-grid,
  #mainContent .jv-aiops-panels {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .jv-aiops-panel,
  #mainContent .jv-aiops-section-top {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  /* Mobile-safe wrappers for injected dashboard prose/markdown. */
  #mainContent .vault-split-grid,
  #mainContent .vault-split-grid > *,
  #mainContent [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent [style*="overflow-x:auto"],
  #mainContent [style*="overflow-x: auto"],
  #mainContent .table-scroll,
  #mainContent .table-container {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    contain: inline-size;
  }
  #mainContent code,
  #mainContent pre,
  #mainContent .coll-rule-text {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  /* Product Catalog compact toolbar: desktop uses a single horizontal strip.
     On phones, wrapping beats sideways drift and clipped category selects. */
  .toolbar.prod-catalog-toolbar-compact {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px !important;
    max-width: 100%;
  }
  .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }
  .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster-search {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .toolbar.prod-catalog-toolbar-compact .filter-select,
  .toolbar.prod-catalog-toolbar-compact .search-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .toolbar.prod-catalog-toolbar-compact .filter-pills {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar.prod-catalog-toolbar-compact .filter-pills::-webkit-scrollbar {
    display: none;
  }

  /* Tab strips used by picklists / returns: wrap into reachable rows instead
     of letting the last tab sit offscreen. */
  .pick-tab-group {
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-width: 100%;
    gap: 6px !important;
  }
  .pick-tab-group .pick-tab {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    text-align: center;
  }

  /* Cart Insights has a table inside a grid item; without min-width:0 the
     table's scroll width can widen the whole main content column. */
  #cartInsightsFilters,
  .ci-dual-pane,
  .ci-dual-pane > *,
  .ci-table-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent > div[style*="padding:0 32px"],
  #mainContent > div[style*="padding: 0 32px"] {
    padding: 0 8px 24px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .ci-dual-pane {
    overflow: hidden;
  }
  .ci-dual-pane [style*="overflow:auto"],
  .ci-dual-pane [style*="overflow: auto"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Support inbox filters can be longer than a phone. Wrap them into compact
     rows; sideways filter rails hid useful choices from warehouse/support
     users and inflated main.scrollWidth during mobile audits. */
  #unifiedFilterBar {
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #unifiedFilterBar .toggle-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 44px !important;
    white-space: normal;
  }
  #unifiedFilterBar > span[style*="width:1px"] {
    display: none !important;
  }
  #inboxBody,
  #inboxList,
  .inbox-ticket-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .inbox-ticket-card > div,
  .inbox-ticket-card span,
  .inbox-ticket-card .text-dim {
    min-width: 0 !important;
    max-width: 100%;
  }
  .page-header #inboxSearch {
    width: 100% !important;
  }

  /* Label Generator account balance banner: compact pill on desktop, readable
     wrapped strip on phones. */
  .lbl-header-row {
    flex-wrap: wrap !important;
    max-width: 100%;
  }
  .lbl-balance-banner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    border-radius: 8px !important;
    justify-content: flex-start;
    overflow-wrap: anywhere;
  }
  .lbl-balance-banner > * {
    min-width: 0;
  }

  /* Returns: the live table has 13 operational columns. On phones it should
     read as return cards, not a 1900px spreadsheet inside the main canvas. */
  #mainContent .ret-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .ret-table thead {
    display: none;
  }
  #mainContent .ret-table tbody {
    display: block;
    width: 100%;
  }
  #mainContent .ret-table tr {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
  }
  #mainContent .ret-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    width: 100% !important;
    /* dashboard.css caps the SKU column at 120px and the Notes column at 160px.
       On desktop that caps a COLUMN. Here the same td is a card ROW, so the cap
       became the width of the whole row: measured 2026-08-31 at 375px, every
       row was 337px except SKU (120px) and Notes (160px). With an 82px label
       beside it the SKU had ~28px of inline space and split mid-token —
       "UNKNOWN" rendered as "UNKN"/"OWN", "C-40-DIA" as "C-40-"/"DIA". A SKU
       broken across two lines reads as a different, complete identifier. */
    max-width: 100% !important;
    border: none !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  #mainContent .ret-table td::before {
    flex: 0 0 82px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* Notes are one card value, not three competing flex columns. Without this
     wrapper the note text, resolution suggestion, and Inbox link each became a
     direct child of the cardified td; space-between squeezed the suggestion to
     a few characters wide. Keep the value together and let its text wrap while
     the two action labels remain readable. */
  #mainContent .ret-table .ret-notes-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    text-align: right;
  }
  #mainContent .ret-table .ret-notes-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #mainContent .ret-table .ret-notes-break {
    flex-basis: 100%;
    height: 0;
  }
  #mainContent .ret-table .ret-res-pill,
  #mainContent .ret-table .ret-inbox-link {
    flex: 0 0 auto;
    white-space: nowrap !important;
  }
  #mainContent .ret-table .ret-inbox-link {
    min-width: 44px;
    justify-content: center;
  }
  #mainContent .ret-table td:nth-child(1)::before { content: "Select"; }
  #mainContent .ret-table td:nth-child(2)::before { content: "Order"; }
  #mainContent .ret-table td:nth-child(3)::before { content: "SKU"; }
  #mainContent .ret-table td:nth-child(4)::before { content: "Type"; }
  #mainContent .ret-table td:nth-child(5)::before { content: "Declared"; }
  #mainContent .ret-table td:nth-child(6)::before { content: "Confirmed"; }
  #mainContent .ret-table td:nth-child(7)::before { content: "Requested"; }
  #mainContent .ret-table td:nth-child(8)::before { content: "Destination"; }
  #mainContent .ret-table td:nth-child(9)::before { content: "Status"; }
  #mainContent .ret-table td:nth-child(10)::before { content: "Refund"; }
  #mainContent .ret-table td:nth-child(11)::before { content: "Cost"; }
  #mainContent .ret-table td:nth-child(12)::before { content: "Notes"; }
  #mainContent .ret-table td:nth-child(13)::before { content: "Actions"; }
  #mainContent .ret-table th:first-child,
  #mainContent .ret-table td.ful-td-cb,
  #mainContent .ret-table td:first-child,
  #mainContent .ret-table td.ret-order-num,
  #mainContent .ret-table th:nth-child(2) {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
  #mainContent .ret-table td.ful-td-cb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  #mainContent .ret-table td.ful-td-cb::before {
    display: none;
    content: "" !important;
  }
  #mainContent .ret-table .td-nowrap {
    flex-wrap: wrap;
  }
  #mainContent .ret-table button,
  #mainContent .ret-table .btn,
  #mainContent .ret-table a {
    min-height: 44px;
  }

  /* Returns SC Warehouse inventory is injected after the main table loads, so
     it needs its own card treatment to avoid a delayed 480px table widening
     the page after the initial render looks clean. */
  #mainContent .ret-sc-section,
  #mainContent #scWarehouseContent {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  #mainContent #scWarehouseContent table.data-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent #scWarehouseContent table.data-table thead {
    display: none;
  }
  #mainContent #scWarehouseContent table.data-table tbody,
  #mainContent #scWarehouseContent table.data-table tr {
    display: block;
    width: 100%;
  }
  #mainContent #scWarehouseContent table.data-table tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
  }
  #mainContent #scWarehouseContent table.data-table td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100% !important;
    border: none !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
  }
  #mainContent #scWarehouseContent table.data-table td::before {
    flex: 0 0 82px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  #mainContent #scWarehouseContent table.data-table td:nth-child(1)::before { content: "SKU"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(2)::before { content: "Product"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(3)::before { content: "Qty"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(4)::before { content: "Received"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(5)::before { content: "Condition"; }

  /* Marketing SEO side-by-side panels collapse to one column on phone. */
  #mainContent .seo-gsc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100%;
    min-width: 0;
  }
  #mainContent .seo-gsc-grid > *,
  #mainContent .seo-table-mb,
  #mainContent .seo-content-pad {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Collections catalog: the default list is a plain desktop table. Turn only
     the catalog table into compact cards; the matrix remains intentionally
     horizontally scrollable. */
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) {
    min-width: 0 !important;
    width: 100% !important;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) thead {
    display: none;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border: none !important;
    padding: 5px 0 !important;
    min-width: 0;
    white-space: normal;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td::before {
    flex: 0 0 82px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(1)::before { content: "Collection"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(2)::before { content: "Type"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(3)::before { content: "Products"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(4)::before { content: "Status"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(5)::before { content: "Handle"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .coll-shell #coll-tab-body .coll-divider-row {
    padding: 0 !important;
  }
  .coll-shell #coll-tab-body .coll-divider-row td {
    display: block !important;
    padding: 8px 10px !important;
  }
  .coll-shell #coll-tab-body .coll-divider-row td::before {
    content: "" !important;
    display: none;
  }

  /* Finance table cells use small link-buttons for zero values. They can sit
     at the visual edge of a scroller, so keep them from clipping. */
  #mainContent .is-cell-btn,
  #mainContent .ii-row {
    min-height: 44px !important;
  }
  #mainContent .is-cell-btn {
    min-width: 44px !important;
  }

  /* Morning Brief owner actions include markdown paths and long task titles.
     Let them wrap rather than quietly widening their card. */
  .mb-owner-action-row,
  .mb-owner-actions-loading,
  .mb-top3-content,
  .mb-top3-item-title,
  .mb-top3-item-detail {
    min-width: 0 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Ordinary dashboard tables become compact, app-style cards on phones.
     ui-enhancements.js adds a data-label from each table's headers and tags
     each cell (primary identifier / action / field), so this works across
     finance, marketing, support, approvals, inventory and warehouse lists
     without hand-writing labels for every view. Each card lays its fields
     out in a responsive 2-3 column grid — a tiny caption above the value —
     instead of one wasteful full-width row per field. Specialist
     high-density tables opt out in JS and keep their own mobile treatment. */
  #mainContent table[data-mobile-card-table="true"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  #mainContent table[data-mobile-card-table="true"] thead {
    display: none !important;
  }
  #mainContent table[data-mobile-card-table="true"] tbody {
    display: block !important;
    width: 100% !important;
  }
  /* Ghost-row guard (2026-07-16): the `tr { display:grid !important }` below
     out-specifies a non-important inline `display:none` on hidden expander /
     detail rows, rendering them as empty bordered ghost cards. Re-hide any
     row whose inline style sets display:none. */
  #mainContent table[data-mobile-card-table="true"] tr[style*="display:none"],
  #mainContent table[data-mobile-card-table="true"] tr[style*="display: none"] {
    display: none !important;
  }
  /* Density pass 2026-07-16: tighter grid + padding so a generic cardified
     row spends its pixels on data, not chrome. */
  #mainContent table[data-mobile-card-table="true"] tr {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 1px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 5px !important;
    padding: 6px 9px !important;
    border: 1px solid var(--border) !important;
    border-radius: 7px !important;
    background: var(--surface) !important;
    box-sizing: border-box !important;
  }
  #mainContent table[data-mobile-card-table="true"] td {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    font-size: 11.5px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block !important;
    max-width: 100% !important;
    margin-bottom: 1px !important;
    color: var(--text-muted) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Primary identifier cell (first non-control field) — the card's title:
     spans the full width, slightly larger. */
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="primary"] {
    grid-column: 1 / -1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding-bottom: 3px !important;
  }
  /* Action cells (buttons / inputs) and genuine colspan cells span the full
     card width; action buttons flow in a wrapping row. */
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="wide"],
  #mainContent table[data-mobile-card-table="true"] td[colspan] {
    grid-column: 1 / -1 !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="wide"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 6px !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="wide"]::before,
  #mainContent table[data-mobile-card-table="true"] td[colspan]::before {
    display: none !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[colspan] {
    display: block !important;
    text-align: left !important;
  }
  #mainContent table[data-mobile-card-table="true"] td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent table[data-mobile-card-table="true"] button,
  #mainContent table[data-mobile-card-table="true"] .btn,
  #mainContent table[data-mobile-card-table="true"] a {
    white-space: normal !important;
  }
}

@media (max-width: 420px) {
  .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster {
    flex-basis: 100% !important;
  }
  .pick-tab-group .pick-tab {
    flex-basis: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   2026-05 mobile app polish — compact, readable, full-screen
   Makes the shell feel like an app instead of a desktop page squeezed down.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .app {
    grid-template-rows: 56px minmax(0, 1fr) !important;
    min-height: 100dvh;
    overflow: hidden;
  }

  .header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }
  .header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  .header-left > div {
    min-width: 0;
  }
  .header-left .logo,
  .logo {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-left .logo-sub,
  .logo-sub {
    display: none !important;
  }
  .header-right {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .header-status-group,
  .header-account-group,
  .font-scale-group,
  .header .refresh-btn,
  .header .sync-now-btn,
  .header .lang-toggle-btn {
    display: none !important;
  }
  .header-action-group {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .header .mobile-menu-btn.icon-btn,
  .header .mobile-messages-btn.icon-btn,
  .header .shell-search-btn.icon-btn,
  .header .theme-toggle-btn.icon-btn {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }

  /* New-message banner: WhatsApp/OS-notification style — slides down from the
     very top of the screen instead of the desktop bottom-right stack (see
     css/messages.css base rule + skills/messages-map.md §4b). */
  #imMsgBannerWrap {
    top: calc(56px + env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: auto !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    flex-direction: column !important;
  }
  @keyframes imMsgBannerInTop {
    from { opacity: 0; transform: translateY(-14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .im-msg-banner {
    animation-name: imMsgBannerInTop !important;
  }
  .im-msg-banner--leaving {
    transform: translateY(-10px) scale(.97) !important;
  }

  /* Ambient activity gets one quiet bottom-left slot on phones. It must not
     push page content down or form a stack across the top; js/action-toasts.js
     replaces the current card synchronously when something newer arrives. */
  /* Ambient activity bar: full width (no sidebar on a phone) and parked
     directly on top of the bottom nav, so it never covers a nav target or the
     conversation composer above it. */
  #imActivityBar {
    left: 0 !important;
    /* Keyboard-safe: the script measures the live global header bottom, so the
       alert never follows the composer down toward the software keyboard. */
    top: var(--im-activity-bar-top, calc(56px + env(safe-area-inset-top, 0px))) !important;
    bottom: auto !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 4px 14px rgba(22, 19, 15, 0.12) !important;
    transform: none !important;
  }

  .main {
    min-height: 0 !important;
    height: calc(100dvh - 56px) !important;
    padding: 10px 8px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #mainContent {
    padding: 0 8px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #mainContent > div,
  #mainContent > section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #mainContent .page-header {
    margin: 0 0 10px !important;
    padding: 0 !important;
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  #mainContent .page-header > div {
    min-width: 0;
  }
  #mainContent .page-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }
  #mainContent .page-subtitle {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #mainContent .page-header .btn,
  #mainContent .page-header .refresh-btn,
  #mainContent .page-header button {
    flex: 0 0 auto;
    min-height: 44px !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
  }

  #mainContent .stats-row,
  #mainContent .stat-grid,
  #mainContent .stat-cards,
  #mainContent .sup-stats-row,
  #mainContent .sys-stats-row,
  #mainContent .kpi-grid,
  #mainContent .kpi-grid-3,
  #mainContent .kpi-grid-4,
  #mainContent [class*="stats-row"],
  #mainContent [class*="stat-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    align-items: stretch;
  }
  #mainContent .stat-card,
  #mainContent .sup-stat-card,
  #mainContent .sys-stat-card,
  #mainContent .kpi-card,
  #mainContent .lbl-kpi-card,
  #mainContent [class*="-stat-card"],
  #mainContent [class*="-kpi-card"] {
    width: auto !important;
    min-width: 0 !important;
    min-height: 74px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden;
  }
  #mainContent .stat-label,
  #mainContent .sup-stat-label,
  #mainContent .sys-stat-label,
  #mainContent .kpi-label,
  #mainContent .lbl-kpi-label,
  #mainContent [class*="-stat-label"] {
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    overflow-wrap: anywhere;
  }
  #mainContent .stat-value,
  #mainContent .sup-stat-value,
  #mainContent .sys-stat-value,
  #mainContent .kpi-value,
  #mainContent .lbl-kpi-value,
  #mainContent [class*="-stat-value"] {
    font-size: 26px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }
  #mainContent .stat-card *,
  #mainContent .sup-stat-card *,
  #mainContent .sys-stat-card *,
  #mainContent .kpi-card *,
  #mainContent .lbl-kpi-card * {
    max-width: 100%;
  }
  #mainContent .stat-card svg,
  #mainContent .sup-stat-card svg,
  #mainContent .sys-stat-card svg,
  #mainContent .kpi-card svg,
  #mainContent .lbl-kpi-card svg {
    max-height: 18px;
    flex-shrink: 0;
  }

  #mainContent .lbl-kpi-row {
    display: grid !important;
    /* 4 cols × 2 rows on mobile (Cole 2026-05-07: was 3 cols which left
       the 7th card orphaned full-width via the orphan-card guard).
       4 cols means 7 cards = 4+3 with the 7th sharing row-2 cleanly. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px 0 12px !important;
    overflow: visible !important;
  }
  #mainContent .lbl-kpi-card {
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
  }
  /* The generic mobile KPI rule above raises every value to 26px. Balance is
     prose when unavailable ("check WJS"), so keep its intentional compact size
     instead of ellipsizing the only useful instruction. */
  #mainContent .lbl-kpi-card--balance .lbl-kpi-value {
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }
  #mainContent .lbl-kpi-label {
    margin-bottom: 4px !important;
    text-align: left;
  }
  #mainContent .stat-cards .stat-value {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
  #mainContent .stat-cards .stat-card:last-child .stat-value {
    font-size: 18px !important;
    line-height: 1.12 !important;
    word-break: break-word;
  }
  #mainContent .sup-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #mainContent .sup-stats-row .sup-stat-card {
    min-height: 66px !important;
    padding: 9px 10px !important;
  }
  #mainContent .sup-stats-row .sup-stat-value {
    font-size: 22px !important;
  }
  #mainContent .sup-stats-row .sup-stat-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #mainContent .pick-tab-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  #mainContent .pick-tab-group .pick-tab {
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  #mainContent .pick-tab-group .pick-tab.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast, #fff) !important;
  }
  #mainContent .pick-tab-group.pl-wh-subtabs .pick-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Picklist + Returns Stock mobile filter rows — split warehouse chips and
     status tabs into two visually distinct strips so they don't blend
     together (Cole 2026-05-07). Warehouse row: compact horizontal pill
     strip. Status row: segmented control. Shared between picklist
     (.pl-wh-subtabs) and returns stock (.rs-wh-subtabs). */
  #mainContent .pick-tab-group.pl-wh-subtabs,
  #mainContent .pick-tab-group.rs-wh-subtabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
  }
  #mainContent .pick-tab-group.pl-wh-subtabs::-webkit-scrollbar,
  #mainContent .pick-tab-group.rs-wh-subtabs::-webkit-scrollbar { display: none; }
  #mainContent .pick-tab-group.pl-wh-subtabs .pick-tab,
  #mainContent .pick-tab-group.rs-wh-subtabs .pick-tab {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 16px !important;
    background: var(--surface-2, rgba(0,0,0,0.04)) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
  }
  #mainContent .pick-tab-group.pl-wh-subtabs .pick-tab.active,
  #mainContent .pick-tab-group.rs-wh-subtabs .pick-tab.active {
    background: var(--brand-tan, rgba(170, 138, 100, 0.18)) !important;
    border-color: rgba(170, 138, 100, 0.35) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
  }

  /* Status row: segmented-control style. Single rounded container with
     equal-flex children separated by hairline dividers — visually distinct
     from the pill warehouse strip above. */
  #mainContent .pick-tab-group:not(.pl-wh-subtabs):not(.rs-wh-subtabs) {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 3px !important;
    background: var(--surface-2, rgba(0,0,0,0.04)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .pick-tab-group:not(.pl-wh-subtabs):not(.rs-wh-subtabs) .pick-tab {
    flex: 1 1 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
  }
  #mainContent .pick-tab-group:not(.pl-wh-subtabs):not(.rs-wh-subtabs) .pick-tab.active {
    background: var(--surface) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
    border-color: transparent !important;
  }

  #mainContent .filters-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 10px 0 12px !important;
    width: 100%;
  }
  #mainContent .filters-bar > input,
  #mainContent .filters-bar > select,
  #mainContent .filters-bar > button {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #mainContent .filters-bar > input:first-child {
    grid-column: 1 / -1;
  }
  #mainContent .filters-bar > span {
    display: none !important;
  }

  #mainContent .toolbar {
    width: 100%;
    gap: 8px !important;
    margin: 8px 0 12px !important;
  }
  #mainContent .toolbar > input,
  #mainContent .toolbar > select,
  #mainContent .toolbar .search-input {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  #mainContent .filter-btn,
  #mainContent .ret-filter-btn,
  #mainContent .toggle-btn,
  #mainContent .tab-btn,
  #mainContent .sub-tab-btn {
    border-radius: 8px !important;
  }
  #mainContent .toolbar:has(.ret-filter-btn) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 10px !important;
  }
  #mainContent .toolbar:has(.ret-filter-btn)::-webkit-scrollbar {
    display: none;
  }
  #mainContent .toolbar:has(.ret-filter-btn) .ret-filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #mainContent .table-container,
  #mainContent .view-panel,
  #mainContent .u-panel,
  #mainContent .brief-card,
  #mainContent [class*="-panel"] {
    border-radius: 8px !important;
  }

  #mainContent #refundsTable {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent #refundsTable thead {
    display: none;
  }
  #mainContent #refundsTable tbody {
    display: block;
    width: 100%;
  }
  #mainContent #refundsTable tr.refund-row {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
    overflow: hidden;
    box-sizing: border-box;
  }
  #mainContent #refundsTable tr.refund-row td {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    width: 100% !important;
    border: none !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    color: var(--text) !important;
    text-align: right;
  }
  #mainContent #refundsTable tr.refund-row td::before {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }
  #mainContent #refundsTable tr.refund-row td:nth-child(1)::before { content: "Date"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(2)::before { content: "Order"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(3)::before { content: "Customer"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(4)::before { content: "SKUs"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(5)::before { content: "Amount"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(6)::before { content: "Reason"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(7)::before { content: "Return"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(8)::before { content: "Restock"; }
  #mainContent #refundsTable tr.refund-detail-row > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    white-space: normal !important;
  }
  #mainContent #refundsTable .status-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #mainContent #refundsTable tr.refund-row td > * {
    min-width: 0;
    max-width: 100%;
  }
  #mainContent #refundsTable tr.refund-row td:nth-child(4) {
    white-space: normal !important;
  }
  #mainContent #refundsTable tr.refund-row td:nth-child(6) {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  #mainContent:has(#refundsTable) .stat-card .stat-value {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent:has(#refundsTable) .stat-card:nth-child(4) .stat-value {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.15 !important;
  }
  #mainContent button[style*="min-height:34px"],
  #mainContent button[style*="min-height: 34px"] {
    min-height: 44px !important;
  }

  #mainContent input[type="checkbox"],
  #mainContent input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex: 0 0 auto;
  }
  #mainContent #inboxSpamToggle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  #mainContent #unifiedFilterBar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 2px 4px !important;
    margin-bottom: 10px !important;
  }
  #mainContent #unifiedFilterBar::-webkit-scrollbar {
    display: none;
  }
  #mainContent #unifiedFilterBar .toggle-btn {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  #mainContent #unifiedFilterBar > span[style*="width:1px"] {
    display: none !important;
  }
  #mainContent .data-table th,
  #mainContent .data-table td,
  #mainContent table th,
  #mainContent table td {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  #mainContent .data-table td,
  #mainContent table td {
    white-space: normal;
  }
  #mainContent .sa-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  #mainContent .la-table-wrap {
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box;
    max-width: 100% !important;
    overflow: visible !important;
  }
  #mainContent .la-table,
  #mainContent .la-table tbody,
  #mainContent .la-table tr {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #mainContent .la-table td {
    display: block !important;
    width: 100% !important;
  }
  #mainContent .la-table thead {
    display: none !important;
  }
  #mainContent .la-table tr {
    box-sizing: border-box;
    position: relative;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent .la-table td {
    box-sizing: border-box;
    position: relative;
    max-width: none !important;
    min-height: 28px;
    padding: 5px 0 5px 92px !important;
    border: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }
  #mainContent .la-table td::before {
    position: absolute;
    left: 0;
    top: 5px;
    width: 82px;
    color: var(--text-muted);
    content: "";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  #mainContent .la-table td:nth-child(1) {
    min-height: 28px;
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  #mainContent .la-table td:nth-child(1)::before { display: none; }
  #mainContent .la-table td:nth-child(2)::before { content: "Severity"; }
  #mainContent .la-table td:nth-child(3)::before { content: "Type"; }
  #mainContent .la-table td:nth-child(4)::before { content: "Provider"; }
  #mainContent .la-table td:nth-child(5)::before { content: "Reference"; }
  #mainContent .la-table td:nth-child(6)::before { content: "Order"; }
  #mainContent .la-table td:nth-child(7)::before { content: "Created"; }
  #mainContent .la-table td:nth-child(8)::before { content: "Status"; }
  #mainContent .la-table td:nth-child(9) {
    padding-left: 0 !important;
    padding-top: 8px !important;
  }
  #mainContent .la-table td:nth-child(9)::before { display: none; }
  #mainContent .la-table td:nth-child(5) {
    padding-left: 0 !important;
    font-size: 11px !important;
    line-height: 1.45;
    word-break: break-all !important;
  }
  #mainContent .la-table td:nth-child(5)::before {
    display: block;
    position: static;
    width: auto;
    margin-bottom: 4px;
  }
  #mainContent .la-table .la-resolve-btn {
    min-height: 40px;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .header-left .logo,
  .logo {
    max-width: 176px;
    font-size: 12px !important;
  }
  #mainContent .pick-tab-group .pick-tab {
    flex-basis: auto !important;
  }
}

/* Bottom nav was removed from the shell on 2026-04-27. Keep the hard-hide,
   but also remove the old reserved gutter and floating-control lift so phone
   users do not lose the bottom of every view to a phantom nav bar. */
@media (max-width: 768px) {
  .main {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  #toast-container,
  .hub-toast,
  .lbl-toast,
  #sched-toast {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #assistantBtn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #aqBatchBar {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:has(#sidebar.mobile-open) #mainContent {
    overflow: hidden !important;
    touch-action: none;
  }
}

/* Final mobile overflow sweep — covers narrow summary tables, chip rails, and
   closed side panels that the full-route crawler still caught after the
   generic card-table pass. */
@media (max-width: 768px) {
  #mainContent .fin-summary-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent .fin-summary-table tbody,
  #mainContent .fin-summary-table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .fin-summary-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    box-sizing: border-box !important;
  }
  #mainContent .fin-summary-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .fin-summary-table td[colspan] {
    grid-column: 1 / -1;
    text-align: left !important;
  }

  #mainContent #unifiedFilterBar,
  #mainContent .toolbar:has(.ret-filter-btn),
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #mainContent #unifiedFilterBar .toggle-btn,
  #mainContent .toolbar:has(.ret-filter-btn) .ret-filter-btn,
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] .toggle-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] {
    grid-column: 1 / -1;
  }
  #mainContent #syncTrackingBtn,
  #mainContent .lbl-section-summary,
  #mainContent .obx-wh-sub,
  #mainContent .sfc-arch-grid,
  #mainContent .sfc-arch-grid > *,
  #mainContent .sfc-info-box {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  #mainContent .sfc-arch-grid {
    grid-template-columns: 1fr !important;
  }

  #mainContent .la-panel,
  #mainContent .sa-panel {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  #mainContent .la-panel:not(.open),
  #mainContent .sa-panel:not(.open) {
    transform: translateX(calc(100% + 64px)) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #mainContent .la-panel.open,
  #mainContent .sa-panel.open {
    visibility: visible !important;
  }
  #mainContent .la-panel-close,
  #mainContent .sa-panel-close {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mainContent .pl-mom-table,
  #mainContent .pl-mom-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent .pl-mom-table tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    box-sizing: border-box !important;
  }
  #mainContent .pl-mom-table tr:first-child {
    display: none !important;
  }
  #mainContent .pl-mom-table td {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 5px 0 !important;
    border: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }
  #mainContent .pl-mom-table td::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
  }
  #mainContent .pl-mom-table td:nth-child(1)::before { content: "Metric"; }
  #mainContent .pl-mom-table td:nth-child(2)::before { content: "This month"; }
  #mainContent .pl-mom-table td:nth-child(3)::before { content: "Prior month"; }
  #mainContent .pl-mom-table td:nth-child(4)::before { content: "Change"; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 1 (Cole 2026-05-06):
 * "right now it looks horrible, many spots aren't even, symmetrical, or
 *  difficult to view if you scroll all over the page, we need to have it
 *  way more compact and everything even, symmetrical and parallel".
 *
 * Targets the highest-impact systemic issues across every section:
 *   1. Orphan-card guard — odd-count grids no longer leave the last card
 *      sitting alone in its row. Last card spans full width.
 *   2. Bottom-nav clearance — main content has 96px bottom padding so the
 *      mobile bottom-nav doesn't eat the last row of any view.
 *   3. Equal filter-button heights — pick-tabs / toggle-btns / oex tabs
 *      stay the same height whether they have a badge or not.
 *   4. Compact toolbars — search-bars, condition filters, sort dropdowns
 *      collapse cleanly to one row of consistent height.
 *   5. Tighter section gaps — page header / tab bar / filter bar / content
 *      use a uniform 12px rhythm instead of mixed 14/16/12.
 * Every rule is mobile-only (≤768px) so desktop is untouched.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. Orphan-card guard. When a grid (stat-cards, kpi-grid, pick-tab-group,
   *    oex-columns, etc.) has an odd number of items, the last one spans
   *    full width so the row doesn't end with an empty slot. Grid `display`
   *    rows treat `:nth-child(odd):last-child` consistently across browsers. */
  #mainContent .stat-cards > *:nth-child(odd):last-child,
  #mainContent .stat-grid > *:nth-child(odd):last-child,
  #mainContent .stats-row > *:nth-child(odd):last-child,
  #mainContent .kpi-grid > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-3 > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-4 > *:nth-child(odd):last-child,
  #mainContent .sup-stats-row > *:nth-child(odd):last-child,
  #mainContent .sys-stats-row > *:nth-child(odd):last-child,
  #mainContent [class*="stats-row"] > *:nth-child(odd):last-child,
  #mainContent [class*="stat-grid"] > *:nth-child(odd):last-child,
  #mainContent .oex-columns > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  /* For flex-based tab/pill groups (pick-tab-group, oex-tabs, toolbar) the
   *    same pattern uses flex-basis: 100%. Targets odd-count last item. */
  #mainContent .pick-tab-group > .pick-tab:nth-child(odd):last-child,
  #mainContent #unifiedFilterBar > .toggle-btn:nth-child(odd):last-child,
  #mainContent .oex-tabs > .oex-tab:nth-child(odd):last-child {
    flex: 1 1 100% !important;
  }

  /* 2. Bottom clearance. The mobile bottom-nav is permanently hidden, so the
   *    old 96px buffer left dead whitespace on every view. Small base gap +
   *    safe-area inset for notched devices is enough. */
  #mainContent {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 3. Equal filter-button heights. Active state, badged state, plain state
   *    all sit at exactly 40px so a row of tabs is a clean horizontal band.
   *    The badge inside the tab gets `align-self: center` so it doesn't
   *    push the tab taller. */
  #mainContent .pick-tab-group .pick-tab,
  #mainContent .oex-tab,
  #mainContent #unifiedFilterBar .toggle-btn,
  #mainContent .ret-filter-btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  #mainContent .pick-tab-group .pick-tab > span,
  #mainContent .oex-tab > span,
  #mainContent #unifiedFilterBar .toggle-btn > span {
    align-self: center;
    flex-shrink: 0;
  }

  /* 4. Compact toolbars — search bar, condition filters, sort dropdowns
   *    all sit on consistent 40px row heights with the same padding. */
  #mainContent .toolbar,
  #mainContent .rs-search-bar,
  #mainContent .wh-grid-search {
    margin-bottom: 12px !important;
    gap: 8px !important;
  }
  #mainContent .wh-grid-search input,
  #mainContent .toolbar input[type="text"],
  #mainContent .toolbar input[type="search"],
  #mainContent .rs-search-bar input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }
  #mainContent .toolbar select,
  #mainContent .rs-search-bar select {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  /* 5. Tighter, uniform vertical rhythm. Every section between page-header
   *    and content (warehouseTabs / mainTabs / stockSubFilter / search /
   *    conditionFilter) uses the same 12px gap. Removes the staircase of
   *    14/16/8/12 margins that made pages feel jittery while scrolling. */
  #mainContent .page-header {
    margin-bottom: 12px !important;
  }
  #mainContent .pick-tab-group {
    margin-bottom: 12px !important;
  }
  #mainContent .stat-cards,
  #mainContent .stat-grid,
  #mainContent .stats-row,
  #mainContent .kpi-grid,
  #mainContent [class*="stats-row"],
  #mainContent [class*="stat-grid"] {
    margin-bottom: 12px !important;
  }

  /* 6. Order-Exceptions 3-column → 1-column on mobile (the existing breakpoint
   *    was ≤1100px which already collapses to 1, but tighten gaps). */
  #mainContent .oex-columns {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .oex-column {
    border-radius: 10px !important;
  }

  /* 7. Auto-card cell value alignment. The mobile-card transformation
   *    (table[data-mobile-card-table]) rights-align values; cap the value
   *    cell so multi-button rows don't wrap awkwardly under their label.
   *    Right-side button clusters (e.g. Returns Stock action row) wrap to
   *    a tight column instead of squeezing horizontally. */
  #mainContent table[data-mobile-card-table="true"] td > div[style*="display:flex"],
  #mainContent table[data-mobile-card-table="true"] td > div[style*="display: flex"] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  /* 8. Page-subtitle wrapping — long subtitles were horizontal-scrolling
   *    rather than wrapping. Force wrap. */
  #mainContent .page-subtitle {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* 9. Soften the active pick-tab brown — it's overbearing on small screens
   *    where it dominates the entire visual hierarchy. The active state
   *    should communicate "selected" without competing with content. */
  #mainContent .pick-tab.active {
    background: var(--brand-soft, #f5f0e8) !important;
    color: var(--brand-deep, #5a4a32) !important;
    border-color: var(--brand-mid, #c9b289) !important;
    font-weight: 700 !important;
  }

  /* ─── Mobile UX pass 2 (2026-05-06) ────────────────────────────────────
   *  Targets the four issues the pass-1 review surfaced.
   * ───────────────────────────────────────────────────────────────────── */

  /* P2.1 — .toggle-btn active state was using --text (near-black) which
   *        reads as "modal dialog" in a tab strip and sat in stark contrast
   *        with the soft pick-tab.active. Inbox + Drafts + Issues all use
   *        toggle-btn — match the pick-tab style so every filter strip
   *        looks the same on mobile. */
  #mainContent .toggle-btn.active {
    background: var(--brand-soft, #f5f0e8) !important;
    color: var(--brand-deep, #5a4a32) !important;
    border-color: var(--brand-mid, #c9b289) !important;
    font-weight: 700 !important;
  }

  /* P2.2 — Tab badge equality. When a pick-tab carries a count badge (218,
   *        9, etc.), it was visually heavier than its sibling. Constrain
   *        the badge to a 16px circle inside the 40px tab so the row sits
   *        on a single visual baseline. */
  #mainContent .pick-tab > span:first-child[style*="border-radius:10px"],
  #mainContent .pick-tab > span:first-child[style*="border-radius: 10px"] {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    line-height: 18px !important;
    border-radius: 9px !important;
    flex-shrink: 0;
  }

  /* P2.3 — High-density tables (matrix-table, cmx-table, prod-logistics-
   *        table, etc.) keep horizontal-scroll on mobile, but the wrapper
   *        was extending past viewport because parent containers had no
   *        min-width:0. Lock the scroll container to 100% viewport so it
   *        becomes a contained pannable region instead of forcing the
   *        whole page to scroll. */
  #mainContent .matrix-table-wrap,
  #mainContent .matrix-wrap,
  #mainContent [class*="-table-wrap"]:not([class*="mobile-card"]),
  #mainContent .table-scroll {
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* P2.4 — Page-title at 375px was wrapping to 2 lines on long titles like
   *        "Customer Intelligence" or "Strategy Command". Drop to 18px on
   *        ≤ 400px viewports to keep them on one line. The 20px breakpoint
   *        in the existing rule (line 2645) stays for 400-768. */
  @media (max-width: 400px) {
    #mainContent .page-title {
      font-size: 18px !important;
    }
    #mainContent .page-subtitle {
      font-size: 11.5px !important;
    }
  }

  /* P2.5 — Section-header h2/h3 inside cards were sized inconsistently
   *        across views (16-20px). Force a consistent 15px h3 / 17px h2
   *        on mobile so vertical rhythm is predictable. */
  #mainContent .oex-wrap > h2,
  #mainContent .stat-cards + h2,
  #mainContent .stat-cards + h3 {
    font-size: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Orders (Agent 1, 2026-05-06)
 * "many spots aren't even, symmetrical, or have really difficult to view if
 *  you scroll all over the page, we need to have it way more compact and
 *  everything even, symmetrical and parallel".
 *
 * Scope: Orders nav only (fulfillment, mto, order-exceptions, labels-hub,
 * label-anomalies, labels, shipping-claims, purchase-orders-hub, bulk-orders,
 * smart-reorder). Every selector is scoped + mobile-only (≤768px) so desktop
 * is untouched and other nav sections are unaffected.
 *
 * Issues addressed:
 *   1. Stat-card grids that aren't even 2-col (mismatched heights, orphan
 *      last-card on odd counts in containers Pass 1 missed: log-kpi-row,
 *      la-kpi-grid, oex-stat-cards, po-stat-grid, po-tabbar).
 *   2. Stat-card values rendered at 22-28px in 175px-wide cards — reduce to
 *      20px so two columns fit cleanly without text wrap.
 *   3. Inline-style 4-col stat grids in shipping-claims that bypass Pass 1's
 *      class-based collapse rules.
 *   4. Filter rows that overflow horizontally (oex-tabs, la-filter-bar,
 *      lf-filter-group) instead of wrapping cleanly.
 *   5. Inline supplier <select> in MTO toolbar with hardcoded font/padding
 *      that breaks the 40px row height established in Pass 1.
 *   6. Modal/inline grids inside Labels & shipping-claims forms that
 *      stay 2-col on mobile, squishing labels under their inputs.
 *   7. PO hub tab cards (po-tab) chunky on small screens (84px min-height,
 *      18px padding, 20px radius) — tighten on mobile.
 *   8. Smart Reorder header action button cluster wraps awkwardly.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1a. Stat-card grid orphan-card guard — extends Pass 1 to cover the
   *     class names used by the Orders views. */
  #mainContent .log-kpi-row > *:nth-child(odd):last-child,
  #mainContent .la-kpi-grid > *:nth-child(odd):last-child,
  #mainContent .oex-stat-cards > *:nth-child(odd):last-child,
  #mainContent .po-stat-grid > *:nth-child(odd):last-child,
  #mainContent .po-kpi-grid > *:nth-child(odd):last-child,
  #mainContent .po-tabbar > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
    flex-basis: 100%;
  }

  /* 1b. Force consistent 2-col grids (Pass 1 already handles class-based ones;
   *     these are inline-style grids the Orders views generate). */
  #mainContent #sc-stats-row > div[style*="grid-template-columns"],
  #mainContent #sc-page-body div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* PO hub: po-stat-grid auto-fit minmax(180px,1fr) → force 2-col.
   * Tabbar inline grid override needs !important to beat the inline style. */
  #mainContent .po-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #mainContent .po-tabbar[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* 2. Even stat-card heights so a 2-col grid is a clean horizontal band.
   *    Stat-row in fulfillment has 9 cards; ensure each card is the same
   *    height regardless of whether it has a sub-value, single number, or
   *    placeholder em-dash. */
  #mainContent .stats-row .stat-card,
  #mainContent .log-kpi-card,
  #mainContent .la-kpi-card,
  #mainContent .oex-stat-card,
  #mainContent .po-stat-card {
    min-height: 76px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }

  /* 2b. Tame oversized stat values that don't fit 2-col on a 375px viewport. */
  #mainContent .oex-stat-card .oex-stat-num {
    font-size: 22px !important;
  }
  #mainContent .po-stat-card .stat-value,
  #mainContent .la-kpi-value,
  #mainContent .log-kpi-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  /* Smart Reorder summary cards use inline border-left + 28px font in 4
   * fixed-width cards. Force the 28px down on mobile via inline-style match. */
  #mainContent .card[style*="border-left:3px solid"] > div[style*="font-size:28px"] {
    font-size: 22px !important;
  }

  /* 3. Filter rows that wrap cleanly instead of horizontal-scroll. */
  #mainContent .oex-tabs {
    flex-wrap: wrap !important;
    border-bottom: none !important;
    gap: 6px !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
  }
  #mainContent .oex-tab {
    flex: 1 1 calc(50% - 6px) !important;
    text-align: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
  }
  #mainContent .oex-tab.active {
    background: var(--surface-2) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
  }
  #mainContent .oex-add-btn {
    margin-left: 0 !important;
    flex: 1 1 100% !important;
  }

  /* 3b. Label Anomalies filter bar — selects/inputs were 12px font + 5px
   *     padding (cramped, sub-tap-target). Bump to 40px height to match
   *     Pass 1's filter-button band. */
  #mainContent .la-filter-bar {
    gap: 8px !important;
  }
  #mainContent .la-filter-bar select,
  #mainContent .la-filter-bar input,
  #mainContent .la-filter-bar input[type="date"] {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    flex: 1 1 calc(50% - 4px) !important;
    box-sizing: border-box !important;
  }

  /* 3c. Fulfillment lf-filter-group — 7 buttons wrap into a tidy 2-col grid
   *     so widths are even regardless of badge presence. */
  #mainContent .lf-filter-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100%;
  }
  #mainContent .lf-filter-group > .ret-filter-btn:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .lf-filter-group .ret-filter-btn {
    width: 100%;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  /* 4. MTO toolbar — supplier <select> and "Clear" button used hardcoded
   *    inline padding/font, breaking the 40px row established in Pass 1. */
  #mainContent .toolbar select[onchange*="mtoSupplierFilter"],
  #mainContent .toolbar button[data-action="mto-clear-supplier-filter"] {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }
  /* MTO toggle-group should fill the row evenly. */
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 6px !important;
    width: 100%;
    padding: 2px 2px 6px !important;
    margin: 0 -2px !important;
    scroll-snap-type: x proximity;
    /* Fade right edge as a "more →" hint */
    mask-image: linear-gradient(to right, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
  }
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    scroll-snap-align: start;
    border-radius: 20px !important;
  }
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn.active {
    box-shadow: 0 0 0 2px rgba(200,169,126,0.4);
  }

  /* ───────────────────────────────────────────────────────────────
   * MTO Pipeline — hide the 6-card KPI grid on mobile (2026-06-16).
   *
   * The KPI cards (Awaiting PO, In Production, …) were ~268px of the
   * 812px viewport, pushing the first order off-screen so only ~4 rows
   * were visible "by default". Every KPI card is a duplicate of a
   * stage-filter chip (identical mto-stage / mto-stage-filter handler),
   * and the counts now ride ON the filter chips (`.mto-cnt`), so the
   * grid is pure redundancy on a phone. The one unique signal — Oldest
   * Active — is preserved as the `.mto-mobile-aging` pill in the header.
   * Scoped via :has(.mb-mto-stage-card) so only the MTO KPI row is hit;
   * other views that reuse .log-kpi-row are untouched.
   * ─────────────────────────────────────────────────────────────── */
  #mainContent .log-kpi-row:has(.mb-mto-stage-card) {
    display: none !important;
  }

  /* ───────────────────────────────────────────────────────────────
   * MTO Pipeline — sticky toolbar so search + filters stay reachable
   * while scrolling a long list on a phone.
   * ─────────────────────────────────────────────────────────────── */
  #mainContent .toolbar:has(input#mtoSearchInput) {
    position: sticky !important;
    top: 0;
    z-index: var(--z-sticky, 10);
    background: var(--bg, var(--surface));
    padding: 8px 0 6px !important;
    margin: 0 0 6px !important;
    box-shadow: 0 4px 12px -8px rgba(0,0,0,0.4);
  }

  /* ───────────────────────────────────────────────────────────────
   * MTO Pipeline — phone compact list (one row per unit, 2026-06-10).
   *
   * Each unit renders as ONE compact two-line row, not a tall card:
   *   line 1: [☐] #order  Product title…              [Status pill]
   *   line 2:      SKU    customer            supplier
   * Everything else (age, qty, service, sea/USA legs, payment,
   * dates, notes) lives behind the row tap → expandable detail.
   * A stage-colored left border keeps at-a-glance scanning:
   *   red    = Awaiting PO        purple = Production Complete
   *   orange = In Production      yellow = In Transit
   *   blue   = At USA Warehouse
   *
   * Hidden cells: .mb-hide-mobile (Service, Sea/USA carriers +
   * tracking #s, Ordered date, Order-Journey icon) plus Age, Qty,
   * Ship To, Payment, Notes via explicit display:none below.
   * ─────────────────────────────────────────────────────────────── */
  #mainContent .toolbar input#mtoSearchInput { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  #mainContent .table-container:has(.mto-row),
  #mainContent .table-container:has(.mto-row) .table-scroll,
  #mainContent .table-container:has(.mto-row) table { overflow: visible !important; }
  #mainContent .table-container:has(.mto-row) .table-scroll { max-height: none !important; }
  #mainContent .table-container:has(.mto-row) table { min-width: 0 !important; width: 100% !important; }
  #mainContent .table-container:has(.mto-row) thead { display: none !important; }
  #mainContent .table-container:has(.mto-row) table,
  #mainContent .table-container:has(.mto-row) tbody { display: block !important; }
  /* Other rows (empty-state, truncation footer, expandable drill-down) */
  #mainContent .table-container:has(.mto-row) tbody tr:not(.mto-row) { display: block !important; }
  #mainContent .table-container:has(.mto-row) tbody tr:not(.mto-row) > td {
    display: block !important;
    width: 100% !important;
    padding: 16px 8px !important;
    text-align: center !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.expandable-detail-row > td {
    padding: 0 !important;
    text-align: left !important;
  }

  /* The row: 5-col × 2-line grid — compact, one unit per row. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1.1fr) minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    background: var(--surface-1, var(--surface)) !important;
    border: 1px solid var(--border) !important;
    border-left-width: 4px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    padding: 8px 24px 8px 10px !important;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    overflow: hidden;
  }
  /* More-info chevron — the whole row is tappable and opens the detail. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row::after {
    content: '\203A';
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--text-dim);
  }
  /* Stage-colored left border — instant visual scanning. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row { border-left-color: var(--border) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-awaiting)            { border-left-color: var(--red) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-po_placed)           { border-left-color: var(--orange) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-production_complete) { border-left-color: var(--purple) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-shipped_from_vendor) { border-left-color: var(--yellow) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-at_warehouse)        { border-left-color: var(--blue) !important; }
  /* handed to the last carrier, still moving (mig 1135) */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-final_mile_tendered) { border-left-color: var(--green) !important; }
  /* 'delivered' = closed: human tag (Suly 2026-06-23) or carrier-promoted (mig 1135) */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-delivered)           { border-left-color: var(--text-muted) !important; }
  /* legacy stage value — straggler rows render like at_warehouse */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-ready_to_ship)       { border-left-color: var(--blue) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row.mto-row-selected {
    background: rgba(200,169,126,0.08) !important;
    box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0,0,0,0.22);
  }
  /* Hide columns that don't fit on a phone card. */
  #mainContent .table-container:has(.mto-row) .mb-hide-mobile,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mb-hide-mobile { display: none !important; }

  /* Every visible td in a card: block, no labels by default, tight spacing.
     background:transparent kills the desktop even-row td striping, which
     reads as random gray boxes inside the compact mobile rows. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td::before { display: none !important; }

  /*
   * Compact two-line layout (2026-06-10):
   *   line 1: [☐] [#order] [product title… (truncates)] [status pill]
   *   line 2:      [SKU]   [customer (truncates)]   [supplier, right]
   * The checkbox and status pill span both lines, vertically centered.
   * Age / Qty / Ship To / Payment / Notes cells are hidden — they live
   * in the row-tap expandable detail.
   */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-age,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-qty,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-shipto,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-payment,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-customization,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-docs,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-notes { display: none !important; }
  /* Future-proof guard (2026-07-16): any td WITHOUT an explicit grid placement
     below must be hidden, not auto-flowed — two later-added columns
     (Customization, Docs) auto-flowed into the 2-line grid and mangled every
     card (~200px tall, crushed title/customer) until this pass caught it.
     New columns default to the row-tap detail; opt them into the card by
     giving them a placement rule here. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row
    > td:not(.mto-td-cb):not(.mto-td-order):not(.mto-td-product):not(.mto-td-status):not(.mto-td-sku):not(.mto-td-customer):not(.mto-td-supplier) {
    display: none !important;
  }

  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-cb {
    grid-row: 1 / 3; grid-column: 1;
    align-self: center;
    display: flex !important;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-cb input {
    width: 18px; height: 18px;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-order {
    grid-row: 1; grid-column: 2;
    display: flex !important;
    align-items: center;
    gap: 2px;
    white-space: nowrap !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-order .mto-order-num-link {
    font-size: 13px !important;
    font-weight: 700;
    color: var(--accent);
    padding: 4px 2px;
    display: inline-flex;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-order .order-link-icon {
    font-size: 12px;
    padding: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-product {
    grid-row: 1; grid-column: 3 / 5;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-status {
    grid-row: 1 / 3; grid-column: 5;
    justify-self: end;
    align-self: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-status .pill {
    font-size: 10px;
    padding: 4px 9px;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-status .mto-tracking-btn { display: none !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-sku {
    grid-row: 2; grid-column: 2;
    font-size: 11px !important;
    color: var(--text-dim);
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-sku .sku-link {
    max-width: none !important;
    font-size: 11px !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-customer {
    grid-row: 2; grid-column: 3;
    font-size: 11px !important;
    color: var(--text-muted);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-customer .mto-customer-intel-arrow { display: none !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-supplier {
    grid-row: 2; grid-column: 4;
    justify-self: end;
    font-size: 11px !important;
    color: var(--text-dim);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
  }

  /* Tabular numbers so order #s and SKUs don't jitter as values change. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row .mono {
    font-variant-numeric: tabular-nums;
  }

  /* MTO dropdown — on mobile, anchor wider and let it choose its position
     automatically (capped to viewport width minus 16px margin). */
  .mto-dropdown {
    min-width: 200px !important;
    max-width: calc(100vw - 16px) !important;
    font-size: 14px;
  }
  .mto-dropdown-item {
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }

  /* Product title — bold-ish, room to wrap to 2 lines. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-product {
    font-weight: 600;
    color: var(--text);
    font-size: 13px !important;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-product .prod-variant-name {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
  }

  /* SKU — small mono inside the meta row. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-sku .sku-link {
    max-width: 100% !important;
    font-size: 11px;
    color: var(--text-dim);
  }

  /* ─── MTO detail/summary panel: slide up from bottom on mobile. ─── */
  .mto-detail-panel {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 88vh;
    max-height: 88vh;
    border-left: none !important;
    border-top: 1px solid var(--border);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.55) !important;
    animation: mto-panel-slide-up 0.22s ease-out !important;
  }
  @keyframes mto-panel-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .mto-detail-header {
    padding: 14px 16px !important;
    position: sticky; top: 0; z-index: 2;
  }
  .mto-detail-header::before {
    content: '';
    position: absolute; top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
  }
  .mto-detail-title { font-size: 16px !important; }
  .mto-detail-close { font-size: 26px !important; padding: 4px 10px !important; min-height: 44px; }
  .mto-detail-body { padding: 14px 16px 32px !important; }
  .mto-summary-item { padding: 12px !important; }
  .mto-summary-item-title { font-size: 14px !important; }

  /* 5. Inline 2-col grids in Labels modal forms + shipping-claims modal:
   *    collapse to 1 col so labels stay above their inputs. Already covered
   *    by lbl-grid-2/3 rules above for class-based grids; these are the
   *    inline-style escapees. */
  #mainContent .lbl-acc-body[style*="grid-template-columns:1fr 1fr"],
  #mainContent .lbl-review-expand td > div[style*="grid-template-columns"],
  #mainContent .modal div[style*="grid-template-columns:1fr 1fr"],
  #mainContent .modal div[style*="grid-template-columns: 1fr 1fr"],
  #mainContent .modal div[style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Shipping-claims detail: 1fr 320px sidebar layout collapses to stacked */
  #mainContent div[style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 6. PO hub po-tab cards — chunky on mobile. Tighter padding/min-height. */
  #mainContent .po-tab {
    min-height: 64px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    gap: 4px !important;
  }
  #mainContent .po-tab-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }
  #mainContent .po-tab-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
  #mainContent .po-panel-head h3 {
    font-size: 18px !important;
  }
  #mainContent .po-panel {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  #mainContent .po-toolbar {
    padding: 10px !important;
    border-radius: 12px !important;
  }
  /* Force po-toolbar to single-column flex on phones (the existing 980px
   * rule does this, but make sure search/select inside fill the row). */
  #mainContent .po-toolbar .search-input,
  #mainContent .po-toolbar select.search-input,
  #mainContent .po-toolbar .filter-select {
    width: 100% !important;
    min-height: 40px !important;
    flex: 1 1 100%;
  }

  /* 7. Smart Reorder header action cluster — let buttons wrap and equalize. */
  #mainContent .page-header > div[style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
    width: 100%;
    margin-top: 8px;
  }
  #mainContent .page-header > div[style*="display:flex"][style*="gap:8px"] > button {
    flex: 1 1 calc(50% - 4px);
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  /* 8. Page-header on Orders views: title + subtitle + action button.
   *    The header should stack on mobile so titles aren't pushed off
   *    the screen by a wide button cluster. */
  #mainContent .page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 9. Shipping-claims stat cards used inline text-align:center which
   *    visually conflicts with normal .stat-card left-align. Force left
   *    alignment so all cards across all Orders views read the same. */
  #mainContent #sc-stats-row .stat-card[style*="text-align:center"] {
    text-align: left !important;
  }
  #mainContent #sc-stats-row .stat-card .stat-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  /* 10. Label Anomalies side panel — already 100vw on small screens; the
   *     resolve-button row at the bottom needs a comfortable gap (the panel
   *     is fixed and bypasses .main padding). Bottom-nav is gone, so a
   *     safe-area-aware button gap is enough. */
  #mainContent .la-panel,
  body > .la-panel {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 11. Tables inside Orders views that scroll horizontally need a clear
   *     boundary so users can see they're in a horizontal scroll region. */
  #mainContent .la-table-wrap,
  #mainContent .oex-table-wrap,
  #mainContent .po-table-wrap,
  #mainContent .po-mt-table-wrap {
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Customers (Agent 2, 2026-05-06)
 * Scope: support-inbox, messages, support-analytics-hub, returns,
 *        customers (Customer Intelligence). 5 views in the Customers nav.
 *
 * Targets symmetry/parity issues at iPhone 13 mini (375px) that pass-1+2
 * didn't catch:
 *   1. .c360-root horizontal padding eating screen real estate
 *   2. 5-up KPI / segment grids leaving uneven last row at 2-col
 *   3. .c360-tabs / .si-tabs / .ci-filters wrapping unevenly — switch to
 *      horizontal-scroll strip with consistent 40px height
 *   4. .ci-filter-btn / .si-tab-btn / .c360-tab tap targets normalized to
 *      40px so they parallel the pass-1 .pick-tab/.toggle-btn band
 *   5. .ci-sidebar 40vh max-height too short once header+search+filter
 *      stack inside it — bumped to 50vh
 *   6. .sup-stats-row 7-card row → orphan-card guard so last single card
 *      spans full width (instead of sitting alone in its row)
 *   7. .hub-thread-header / .hub-compose-top mobile padding compaction
 *   8. .msg-filter-bar grid → stack search to full width
 *   9. .ret-grid-2 (undefined desktop class used by Add Issue modal) gets
 *      a 1-col fallback so the modal doesn't render as a flat row
 *  10. .si-draft-actions / .si-draft-meta wrap cleanly
 *  11. .ci-event-card padding compaction so timeline doesn't hug the dot
 *  12. .c360-page-header stacks header-actions below title cleanly
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1. c360 root padding — 24px each side eats >12% of a 375px viewport.
   *    Drop to 12px to match the .main padding pass-1 already established. */
  #mainContent .c360-root {
    padding: 0 12px 40px !important;
  }

  /* 2. Page-header symmetry on Customer Intelligence — header-actions
   *    (refresh button) should sit on its own row right-aligned, not jam
   *    beside the title where it overlaps the subtitle. */
  #mainContent .c360-page-header {
    padding: 16px 0 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .c360-header-actions {
    justify-content: flex-end !important;
  }

  /* 3. KPI / segment grid orphan-card guards. The c360 view declares its
   *    own @media at 768px collapsing kpi-grid-5 to 2-col, which leaves
   *    a 5th card alone. Pass-1's :nth-child(odd):last-child rule already
   *    targets these — restate explicitly here to win specificity over
   *    the inline <style> block in customer-intelligence.js. */
  #mainContent .c360-seg-cards > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-5 > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-3 > *:nth-child(odd):last-child {
    grid-column: 1 / -1 !important;
  }

  /* Equalize segment-card heights so 2-col rows stay parallel even when
   * one card has a longer subtitle than its sibling. */
  #mainContent .c360-seg-cards {
    align-items: stretch !important;
    gap: 10px !important;
  }
  #mainContent .c360-seg-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px !important;
  }
  #mainContent .c360-seg-card-count {
    font-size: 24px !important;
  }

  /* 4. .c360-tabs — turn into horizontal-scroll strip with uniform 40px
   *    rows so 6 tabs ("Overview / Segments / Customers / Insights /
   *    Timeline / Health") don't wrap into 3 lines. Hide scrollbar. */
  #mainContent .c360-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    margin-bottom: 12px !important;
    scrollbar-width: none;
  }
  #mainContent .c360-tabs::-webkit-scrollbar { display: none; }
  #mainContent .c360-tab {
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5. .ci-filters / .si-tabs — same horizontal-scroll treatment. The
   *    Customer-Intelligence Timeline tab has 5 filter chips that wrap
   *    awkwardly at 375px. */
  #mainContent .ci-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
    #mainContent .ci-filter-btn {
    flex-shrink: 0 !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  #mainContent .si-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    margin-bottom: 12px !important;
    scrollbar-width: none;
  }
  #mainContent .si-tabs::-webkit-scrollbar { display: none; }
  #mainContent .si-tab-btn {
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 6. .ci-sidebar — pass-1 caps it at 40vh which gives ~210px on a
   *    13-mini viewport (812px × .40 = 325px before chrome). Once the
   *    20px sidebar-header padding + 56px search-input row + tab/filter
   *    strip eat their share, the customer list shows ~3 rows. Bump to
   *    50vh so 5+ rows are visible without a separate scroll gesture. */
  #mainContent .ci-sidebar {
    max-height: 50vh !important;
  }
  #mainContent .ci-sidebar-header {
    padding: 12px !important;
  }
  #mainContent .ci-search-input {
    height: 40px !important;
    box-sizing: border-box;
  }
  #mainContent .ci-main {
    padding: 12px !important;
  }
  #mainContent .ci-profile-card {
    padding: 14px !important;
  }
  #mainContent .ci-profile-metrics {
    gap: 12px !important;
    justify-content: space-around;
  }
  #mainContent .ci-event {
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  
  /* 7. .sup-stats-row — Customer Issues stats pane has 7 cards. With
   *    flex 1 1 calc(50% - 8px) this lays out 3 rows of 2 + 1 orphan.
   *    Span the orphan full width so the band reads as a clean grid. */
  #mainContent .sup-stats-row {
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .sup-stats-row > .sup-stat-card:nth-child(odd):last-child {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
  }
  #mainContent .sup-stat-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #mainContent .sup-stat-value {
    font-size: 20px !important;
  }
  /* Worst-Product card has an inline font-size:13/22 toggle that breaks
   * card-height parity with its siblings. Force a stable 16px on mobile
   * and let the title clamp/ellipsis. */
  #mainContent .sup-stat-card .sup-stat-value[style*="font-size"] {
    font-size: 16px !important;
    line-height: 1.25 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* 8. .sup-table — no horizontal scroll wrapper anywhere in support.js.
   *    Tables (Customer Issues, Repeat Customers, Product Issues) blow
   *    past 375px viewport. Add the same overflow-x pattern modern-theme
   *    uses for [class*="-table-wrap"]. */
  #mainContent .sup-table {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #mainContent .sup-table thead,
  #mainContent .sup-table tbody {
    display: table;
    width: 100%;
    table-layout: auto;
  }

  /* 9. .ret-grid-2 — undefined desktop class used by the Add/Flag Issue
   *    modal in support.js. Without a default rule it renders flat (each
   *    .lbl-form-group becomes a stand-alone block). On mobile that's
   *    actually what we want — single column form. Lock it in. */
  #mainContent .ret-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .ret-form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 4px;
  }

  /* 10. Customer-Hub thread + compose padding compaction. Desktop has
   *     14px 18px header padding; on a 375px screen that 18px each side
   *     is wasted. Drop to 12px so the thread title + status button
   *     don't push each other into wraps. */
  #mainContent .hub-thread-header {
    padding: 12px !important;
  }
  #mainContent .hub-thread-messages {
    padding: 12px !important;
  }
  #mainContent .hub-compose-top,
  #mainContent .hub-compose-bottom {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  #mainContent .hub-compose-top {
    flex-wrap: wrap !important;
  }
  #mainContent .hub-textarea {
    padding: 10px 12px !important;
    min-height: 80px !important;
  }
  #mainContent .hub-mode-bar {
    padding: 6px 12px !important;
  }
  #mainContent .hub-sidebar-header {
    padding: 12px !important;
  }
  /* Pass-1+2 left .hub-sidebar at 40vh — same problem as .ci-sidebar.
   * Bump to 48vh so ticket list is usable without crowding the thread. */
  #mainContent .hub-container > .hub-sidebar,
  #mainContent .hub-sidebar {
    max-height: 48vh !important;
  }

  /* 11. Messages filter row. The .msg-filter-bar / .msg-search-input /
   *     .msg-tagged-select / .msg-channel-bar / .msg-channel-tab rules that
   *     used to live here were removed 2026-09-03: none of those class names
   *     appears anywhere in js/ or index.html since the 2026-06-29 Messages
   *     rewrite (current markup is .msg-shell / .msg-rail / .msg-filter-strip /
   *     .msg-thread-row, handled further down this file), and this file's own
   *     later comment already called them "long-dead". Dead !important rules
   *     are worse than none: the next person tuning Messages on a phone edits
   *     them, sees nothing change, and loses an hour. .msg-status-toggle and
   *     .msg-page-header below ARE still emitted and stay. */
  #mainContent .msg-status-toggle {
    display: flex !important;
    flex: 1 1 100%;
    gap: 6px;
  }
  #mainContent .msg-status-toggle > .toggle-btn {
    flex: 1 1 0 !important;
    min-height: 40px !important;
  }
  /* Page-header on Messages — lang select + new thread + refresh squish
   * on 375px. Wrap header actions to their own row. */
  #mainContent .msg-page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #mainContent .msg-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center;
  }
  #mainContent .msg-header-actions > .btn,
  #mainContent .msg-header-actions > .refresh-btn {
    min-height: 40px !important;
  }
  #mainContent .msg-thread-card {
    padding: 12px !important;
  }

  /* 12. Support-Insights cards + drafts — equal heights and stacked
   *     action buttons so the draft-action row doesn't squish. */
  #mainContent .si-wrap {
    padding: 12px !important;
  }
  #mainContent .si-cards {
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .si-card {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    min-height: 78px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #mainContent .si-cards > .si-card:nth-child(odd):last-child {
    flex-basis: 100% !important;
  }
  #mainContent .si-card-value {
    font-size: 22px !important;
  }
  #mainContent .si-draft-card {
    padding: 12px !important;
  }
  #mainContent .si-draft-meta {
    gap: 6px !important;
  }
  #mainContent .si-draft-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .si-btn {
    min-height: 40px !important;
    flex: 1 1 auto;
  }
  #mainContent .si-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mainContent .si-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .si-refresh-btn {
    min-height: 40px !important;
  }

  /* 13. Returns / RMA modal padding — .hub-return-modal already gets
   *     full-width via modern-theme; equalize internal padding so the
   *     order-search input and item rows sit on a clean 12px rhythm. */
  #mainContent .hub-return-modal {
    padding: 0 !important;
  }
  #mainContent .hub-return-modal-hdr {
    padding: 12px !important;
  }
  #mainContent .hub-ret-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }
  #mainContent .hub-ret-btn,
  #mainContent .hub-ret-btn-ghost {
    min-height: 40px !important;
    padding: 0 14px !important;
  }
  #mainContent .hub-ret-item-row {
    padding: 10px 12px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Products (Agent 3) (2026-05-06):
 * Cole's complaint: "many spots aren't even, symmetrical, or really
 * difficult to view if you scroll all over the page, we need to have it
 * way more compact and everything even, symmetrical and parallel".
 *
 * Scope: the 6 views under the Products sidebar section.
 *   • catalog-hub (Catalog + Collections subtabs)
 *   • product-intelligence (jarvis-readiness, jhs/jpa, signal-gauge, pd-grid)
 *   • storefront-hub (Config + Health subtabs)
 *   • sentinel (Storefront Anomalies + SKU Duplicates subtabs)
 *   • new-products / Listing Development (onb-*)
 *   • suppliers (sup-*)
 *
 * Pass 1 + 2 already covered: orphan-card guard, bottom-nav clearance,
 * pick-tab/toggle equality at 40px, compact toolbars, softer active tab,
 * stat-card grid normalization, sup-stat fitting, prod-logistics auto-card.
 * Pass 3 fills the gaps inside the Products section: sa-* (anomalies),
 * sd-* (duplicates), onb-* (onboarding), jarvis-readiness donut + legend,
 * jhs/jpa, sup-drawer drawer width on narrow screens.
 * Every rule is mobile-only (≤768px) and scoped under #mainContent.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. Storefront Anomalies — KPI grid is 5 columns on desktop and overflows
   *    on mobile. Force a clean 2-column rhythm so the 5 cards land as
   *    2/2/1, with the orphan-card guard from pass 1 stretching the last. */
  #mainContent .sa-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sa-kpi-grid > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .sa-kpi-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  #mainContent .sa-kpi-value {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
  #mainContent .sa-kpi-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* 2. Storefront Anomalies — outer wrapper has inline padding:20px and
   *    max-width:1400px. The 20px adds onto #mainContent's own gutter and
   *    squeezes content. Strip the redundant horizontal padding on mobile. */
  #mainContent [class*="sa-"]:not(.sa-panel):not(.sa-panel-backdrop) {
    box-sizing: border-box;
  }
  #mainContent .sa-kpi-grid + .sa-filter-bar,
  #mainContent .sa-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sa-filter-bar select,
  #mainContent .sa-filter-bar input {
    width: 100% !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 16px !important; /* prevent iOS zoom-on-focus */
    box-sizing: border-box;
  }

  /* 3. Storefront Anomalies — 9-column table. Desktop fits; mobile needs
   *    a clean horizontal scroll with a stable min-width and a sticky
   *    SKU column so the row label stays visible. */
  #mainContent .sa-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mainContent .sa-table {
    min-width: 720px;
  }
  #mainContent .sa-table th,
  #mainContent .sa-table td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  #mainContent .sa-table td:nth-child(2),
  #mainContent .sa-table th:nth-child(2) {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
  }

  /* 4. Storefront Anomalies — pagination row gets a clean even split so
   *    the Prev/Next buttons sit at equal heights with the count text. */
  #mainContent .sa-pagination {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  #mainContent .sa-pagination button {
    min-height: 40px !important;
    padding: 0 14px !important;
    flex: 0 0 auto;
  }
  #mainContent .sa-pagination span {
    flex: 1 1 100%;
    text-align: center;
    order: -1;
  }

  /* 5. SKU Duplicates — `.sd-cards` is undefined as a grid in baseline CSS,
   *    so the 4 KPI cards stack as a tall block column. Lay them out as a
   *    2-col grid that matches the rhythm used by every other Products view. */
  #mainContent .sd-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sd-cards > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .sd-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  #mainContent .sd-card-value {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  /* 6. SKU Duplicates — header row stacks; action buttons sit on a clean
   *    second row at full width instead of squeezing the title. */
  #mainContent .sd-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  #mainContent .sd-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #mainContent .sd-header-actions > * {
    flex: 1 1 calc(50% - 3px) !important;
    min-height: 40px !important;
  }

  /* 7. SKU Duplicates — filter chip row scrolls horizontally instead of
   *    wrapping with mismatched chip heights. */
  #mainContent .sd-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 4px;
    margin-bottom: 10px !important;
  }
  #mainContent .sd-filters > * {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    white-space: nowrap;
  }

  /* 8. Listing Development — `.onb-stats-row` collapses to a SINGLE column
   *    on mobile in product-onboarding's own inline rule. Five stacked
   *    stat cards is a tall scroll. Override to the 2-column rhythm used
   *    everywhere else. */
  #mainContent .onb-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .onb-stats-row > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .onb-stat-card {
    padding: 10px 12px !important;
    min-height: 74px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  #mainContent .onb-stat-number {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
  #mainContent .onb-stat-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  /* 9. Listing Development — tab-bar chips share a uniform 40px height to
   *    match the dashboard-wide pick-tab rhythm from pass 1. */
  #mainContent .onb-tab-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .onb-tab {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    flex: 1 1 calc(50% - 3px) !important;
    box-sizing: border-box !important;
  }

  /* 10. Listing Development — bulk-action bar is a sticky row that easily
   *     overlaps the bottom-nav. Make it stack vertically and respect the
   *     pass-1 96px content padding. */
  #mainContent .onb-bulk-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .onb-bulk-bar > * {
    width: 100% !important;
  }

  /* 11. Listing Development — main onb-table needs a clean horizontal
   *     scroll with a stable min-width so columns don't re-flow into
   *     unreadable narrow strips. */
  #mainContent .onb-table {
    min-width: 720px;
  }
  #mainContent .onb-table th,
  #mainContent .onb-table td {
    padding: 8px 10px !important;
  }

  /* 12. Product Intelligence — `.jhs-grades` (A/B/C/D/F count chips) wraps
   *     unevenly. Force equal-height row of pills. */
  #mainContent .jhs-grades {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  #mainContent .jhs-grade-count {
    min-height: 28px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
  }
  #mainContent .jarvis-health-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .jhs-stat {
    min-height: 64px;
    padding: 8px 10px;
    box-sizing: border-box;
    text-align: center;
  }
  #mainContent .jhs-val {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }
  #mainContent .jhs-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  /* 13. Product Intelligence — Jarvis readiness donut + legend stack
   *     cleanly: donut on top, legend below as a 2-col grid. */
  #mainContent .jarvis-readiness-donut-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #mainContent .jarvis-readiness-donut-chart {
    align-self: center;
  }
  #mainContent .jarvis-readiness-legend {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  #mainContent .jarvis-readiness-legend-item {
    min-height: 32px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box;
  }

  /* 14. Product Intelligence — Jarvis product analysis (`.jpa-*`) uses
   *     wrapped flex rows. Tighten to a clean column on mobile. */
  #mainContent .jarvis-product-analysis,
  #mainContent .jpa-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .jpa-signals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #mainContent .jpa-flags,
  #mainContent .jpa-recs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .jpa-flag {
    min-height: 24px !important;
    padding: 2px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 15. Product Intelligence — `.signal-gauge` (the labeled progress bar
   *     row) must occupy the full row width on mobile so the bar reads. */
  #mainContent .signal-gauge {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "bar" "detail" !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  #mainContent .signal-gauge .sg-label { grid-area: label; }
  #mainContent .signal-gauge .sg-bar { grid-area: bar; width: 100% !important; }
  #mainContent .signal-gauge .sg-detail { grid-area: detail; font-size: 11px; }

  /* 16. Suppliers — drawer was 420px / 90vw. On a 375px viewport that's
   *     ~338px which leaves a sliver of background. Push to a true full-
   *     width drawer below 480px so the form fields breathe. */
  #mainContent .sup-drawer-content,
  body > .sup-drawer-panel .sup-drawer-content {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #mainContent .sup-drawer-header,
  #mainContent .sup-drawer-body,
  #mainContent .sup-drawer-footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 17. Subtab pick-tab-groups for the three Products hubs (catalog-hub,
   *     storefront-hub, sentinel) — each is a 2-tab row, ensure each tab
   *     reaches the same 40px height and splits 50/50 cleanly. */
  #mainContent .catalog-hub-subtabs,
  #mainContent .storefront-hub-subtabs,
  #mainContent .sentinel-subtabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .catalog-hub-subtabs .pick-tab,
  #mainContent .storefront-hub-subtabs .pick-tab,
  #mainContent .sentinel-subtabs .pick-tab {
    width: 100% !important;
  }

  /* 18. Storefront Config — sfc-arch-card content tightens; pass 1 already
   *     stacks the grid to 1-col, but the inner padding was 20px which is
   *     too generous on a 375px viewport. */
  #mainContent .sfc-arch-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  #mainContent .sfc-arch-num {
    font-size: 13px !important;
  }
  #mainContent .sfc-arch-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  #mainContent .sfc-arch-detail {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Warehouse (Agent 4)  (Cole 2026-05-06)
 *
 * Scope: the 10 views under the Warehouse nav section.
 * Cole's brief: "many spots aren't even, symmetrical, or really difficult
 * to view if you scroll all over the page, we need to have it way more
 * compact and everything even, symmetrical and parallel".
 *
 * What this pass fixes (warehouse-only — desktop is untouched):
 *   1. Warehouse Overview — 7-card stat strip evens to a 2-col grid; the
 *      orphan card spans full-width (handled by pass 1 orphan rule, this
 *      pass forces grid mode so the rule applies).
 *   2. Warehouse Overview — top-shipped SKUs 5-col `<table>` inside the
 *      incoming-volume panel converts to mobile card rows via `td::before`.
 *   3. Warehouse Overview — top-5-rank chart table is too dense at 375px;
 *      shrink fonts + padding so all 5 rank columns + the leading Month
 *      column fit without horizontal scroll.
 *   4. Warehouse Overview — incoming volume eta-window rows use fixed
 *      72px+72px columns that overflow at 375px. Switch to flex with
 *      label/value baseline aligned, container/lines text wraps below.
 *   5. Containers (`ct-table`) — 10-col table with date inputs auto-cards
 *      via the existing `data-label` attrs. Edit inputs go full-width.
 *   6. Restock Tasks (`data-table`) — 7 col table cards via data-label
 *      injection. Action buttons stack to full-width touch targets.
 *   7. Cycle Count (`cc-count-table` / `cc-review-table`) — 4–5 col tables
 *      card-stack on mobile; reason `<select>` goes full-width.
 *   8. Inventory History — toolbar input min-widths shrink to fit 375px;
 *      tab bar height aligns with the 40px tab standard from pass 1.
 *   9. Openbox Ops — panel-head padding aligned with the 12px pass-1
 *      rhythm; webhook 4-col grid stays at 2-col on phones.
 *  10. Container detail / generic warehouse content — empty-state padding
 *      cut from 32px+ to a calmer 24px so the empty card isn't taller
 *      than the content card next to it.
 *  11. Containers Jarvis intel `details > summary` — the Refresh button
 *      no longer shoves the title onto a second wrapped line.
 *  12. Picklist summary table (variance card) — the 5-col `<table>` inside
 *      the yellow callout overflows at 375; shrink padding + font so it
 *      stays readable without horizontal scroll.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1. Warehouse Overview — force the 7-card current-state strip into a
   *    deterministic 2-col grid. .stats-row in dashboard.css is flex-based
   *    on desktop, so we explicitly grid-ify it here so the pass-1 orphan
   *    rule (.stats-row > *:nth-child(odd):last-child) actually fires.
   *    All seven cards now share the same width and the 7th spans full. */
  #mainContent .stats-row,
  #mainContent .stats-row.stats-row-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #mainContent .stats-row > .stat-card {
    min-width: 0 !important;
    padding: 10px 12px !important;
  }
  #mainContent .stats-row .stat-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  #mainContent .stats-row .stat-label {
    font-size: 10.5px !important;
  }
  #mainContent .stats-row .stat-detail {
    font-size: 10.5px !important;
    color: var(--text-muted) !important;
  }

  /* 1b. Inventory Overview header — 6 cards in a tight 3×2 grid so the
   *    whole summary fits above the fold on a 390px phone. Overrides the
   *    480px 1-col fallback in ux-polish.css and the 768px 2-col rule
   *    above. Tighter padding + smaller value font keep each card short. */
  #mainContent .stats-row.stats-row-inv-tight {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .stats-row.stats-row-inv-tight > .stat-card {
    padding: 8px 8px !important;
    min-height: 0 !important;
    border-radius: 6px !important;
  }
  #mainContent .stats-row.stats-row-inv-tight .stat-label {
    font-size: 9px !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.4px !important;
  }
  #mainContent .stats-row.stats-row-inv-tight .stat-value {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }
  #mainContent .stats-row.stats-row-inv-tight .stat-detail {
    font-size: 9.5px !important;
    margin-top: 2px !important;
  }
  /* Cancel the odd-orphan full-span rule (6 cards is divisible by 3). */
  #mainContent .stats-row.stats-row-inv-tight > *:nth-child(odd):last-child {
    grid-column: auto !important;
  }

  /* 2. Warehouse Overview — wh-incoming-volume-container's inline
   *    `<table>` becomes a card-row layout. Header hidden, each <td>
   *    gets a label prefix via the column's text content. */
  #mainContent #wh-incoming-volume-container .table-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
  #mainContent #wh-incoming-volume-container table thead {
    display: none;
  }
  #mainContent #wh-incoming-volume-container table,
  #mainContent #wh-incoming-volume-container table tbody,
  #mainContent #wh-incoming-volume-container table tr,
  #mainContent #wh-incoming-volume-container table td {
    display: block !important;
    width: auto !important;
  }
  #mainContent #wh-incoming-volume-container table tr {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--surface);
  }
  #mainContent #wh-incoming-volume-container table td {
    padding: 2px 0 !important;
    text-align: left !important;
    max-width: none !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    font-size: 11px !important;
  }
  /* First cell (SKU) styled as the row title */
  #mainContent #wh-incoming-volume-container table td:nth-child(1) {
    font-weight: 600;
    font-size: 12px !important;
    margin-bottom: 2px;
  }
  #mainContent #wh-incoming-volume-container table td:nth-child(n+2)::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
  }
  #mainContent #wh-incoming-volume-container table td:nth-child(2)::before { content: "Title:"; }
  #mainContent #wh-incoming-volume-container table td:nth-child(3)::before { content: "Cuft:"; }
  #mainContent #wh-incoming-volume-container table td:nth-child(4)::before { content: "Units:"; }
  #mainContent #wh-incoming-volume-container table td:nth-child(5)::before { content: "ETA:"; }

  /* 3. Warehouse Overview — top-5-rank chart density at 375px.
   *    Wrapping div has `overflow-x:auto`; we'd rather everything fit. */
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table {
    font-size: 10.5px !important;
  }
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table th,
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table td {
    padding: 4px 4px !important;
    min-width: 0 !important;
  }
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table td > div:first-child {
    font-size: 10.5px !important;
  }
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table td > div:last-child {
    font-size: 9.5px !important;
  }

  /* 4. Warehouse Overview — incoming-volume eta-window rows. The inline
   *    label+value uses fixed 72px columns; switch to a flex baseline
   *    layout that fits any phone width without overflow. */
  #mainContent #wh-incoming-volume-container > .stat-card > div[style*="display:flex"][style*="gap:20px"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent #wh-incoming-volume-container > .stat-card > div[style*="display:flex"][style*="gap:20px"] > div[style*="min-width:240px"] {
    min-width: 0 !important;
  }
  #mainContent #wh-incoming-volume-container div[style*="width:72px"] {
    width: auto !important;
    min-width: 56px !important;
    flex-shrink: 0 !important;
  }

  /* 5. Container Tracker — auto-card the 10-col ct-table using its
   *    existing data-label attrs. Edit inputs/selects go full-width. */
  #mainContent .ct-fullwidth .table-scroll { overflow: visible !important; }
  #mainContent .ct-table { min-width: 0 !important; width: 100% !important; }
  #mainContent .ct-table thead { display: none !important; }
  #mainContent .ct-table,
  #mainContent .ct-table tbody,
  #mainContent .ct-table tr,
  #mainContent .ct-table td {
    display: block !important;
    width: auto !important;
  }
  #mainContent .ct-table tr.con-row {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent .ct-table td {
    padding: 4px 0 !important;
    text-align: left !important;
    border: none !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-height: 28px !important;
  }
  #mainContent .ct-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 88px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }
  #mainContent .ct-table td input.ct-edit,
  #mainContent .ct-table td select.ct-edit {
    flex: 1 1 auto !important;
    min-height: 36px !important;
    width: auto !important;
    box-sizing: border-box;
  }
  #mainContent .ct-table td button {
    flex: 1 1 auto;
    min-height: 36px;
  }
  /* The first cell (Container code) reads as the row title — bold + bigger */
  #mainContent .ct-table td[data-label="Container"] {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
  }
  #mainContent .ct-table td[data-label="Container"] .con-code-link {
    font-size: 14px;
    font-weight: 700;
  }

  /* Containers Jarvis intel <details> — title + Refresh button into stack
   *    so the title isn't squeezed onto a second line. */
  #mainContent details.jarvis-intel-details > summary.jarvis-container-intel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent details.jarvis-intel-details > summary.jarvis-container-intel-header .btn {
    align-self: flex-start;
  }

  /* 6. Restock Tasks — auto-card the data-table. The render emits a 7-col
   *    table without data-label attrs, so we use nth-child mapping. */
  #mainContent table.data-table[aria-label="Pending restock tasks"] thead {
    display: none !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"],
  #mainContent table.data-table[aria-label="Pending restock tasks"] tbody,
  #mainContent table.data-table[aria-label="Pending restock tasks"] tr,
  #mainContent table.data-table[aria-label="Pending restock tasks"] td {
    display: block !important;
    width: auto !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] tr {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td {
    padding: 4px 0 !important;
    text-align: left !important;
    border: none !important;
    font-size: 12px !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(1)::before { content: "Created:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(2)::before { content: "Order:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(3)::before { content: "SKU:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(4)::before { content: "Qty:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(5)::before { content: "Warehouse:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(6)::before { content: "Note:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(7) {
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(7)::before { content: ""; display: none; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(7) .action-btn {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
  }

  /* 7. Cycle Count — card-stack the count + review tables. */
  #mainContent .cc-count-table thead,
  #mainContent .cc-review-table thead {
    display: none !important;
  }
  #mainContent .cc-count-table,
  #mainContent .cc-count-table tbody,
  #mainContent .cc-count-table tr,
  #mainContent .cc-count-table td,
  #mainContent .cc-review-table,
  #mainContent .cc-review-table tbody,
  #mainContent .cc-review-table tr,
  #mainContent .cc-review-table td {
    display: block !important;
    width: auto !important;
  }
  #mainContent .cc-count-table tr,
  #mainContent .cc-review-table tr {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent .cc-count-table td,
  #mainContent .cc-review-table td {
    padding: 4px 0 !important;
    text-align: left !important;
    border: none !important;
    font-size: 12px !important;
  }
  #mainContent .cc-count-table td::before,
  #mainContent .cc-review-table td::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
  }
  #mainContent .cc-count-table td:nth-child(1)::before,
  #mainContent .cc-review-table td:nth-child(1)::before { content: "SKU:"; }
  #mainContent .cc-count-table td:nth-child(1),
  #mainContent .cc-review-table td:nth-child(1) {
    font-weight: 600;
    font-size: 13px !important;
  }
  #mainContent .cc-count-table td:nth-child(2)::before,
  #mainContent .cc-review-table td:nth-child(2)::before { content: "Expected:"; }
  #mainContent .cc-count-table td:nth-child(3)::before,
  #mainContent .cc-review-table td:nth-child(3)::before { content: "Counted:"; }
  #mainContent .cc-count-table td:nth-child(4)::before,
  #mainContent .cc-review-table td:nth-child(4)::before { content: "Variance:"; }
  #mainContent .cc-review-table td:nth-child(5)::before { content: "Reason:"; }
  #mainContent .cc-review-table td:nth-child(5) select {
    width: 100% !important;
    min-height: 40px;
    box-sizing: border-box;
  }

  /* 8. Inventory History — toolbar inputs shrink to fit; tab bar aligns
   *    with the 40px standard tab height. */
  #mainContent #ihTtSku,
  #mainContent #ihTtWarehouse,
  #mainContent #ihTtAt,
  #mainContent #ihTlFrom,
  #mainContent #ihTlTo,
  #mainContent #ihTlTrigger {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    min-height: 40px !important;
    padding: 8px 10px !important;
  }
  #mainContent .u-flex-col-sm {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 6px) !important;
  }
  /* Inventory History tab bar — re-style as 40px even tabs */
  #mainContent .tab-btn,
  #mainContent .view-container > div[style*="border-bottom:1px solid var(--border)"] > .tab-btn {
    padding: 0 14px !important;
    min-height: 40px !important;
    height: 40px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* The view-container has padding:24px inline; trim on mobile */
  #mainContent .view-container[style*="padding:24px"] {
    padding: 12px !important;
  }

  /* 9. Openbox Ops — keep webhook grid at 2 cols on small phones (was set
   *    to 720px breakpoint, so 375px already gets 2 — but tighten gaps).
   *    Panel head padding aligned with pass-1 12/14 rhythm. */
  #mainContent .obx-panel-head {
    padding: 12px 14px !important;
  }
  #mainContent .obx-alerts-grid,
  #mainContent .obx-aging-grid {
    padding: 12px !important;
    gap: 8px !important;
  }
  #mainContent .obx-webhook-grid {
    gap: 6px !important;
    padding: 8px !important;
  }
  #mainContent .obx-kpi {
    padding: 10px 12px 12px !important;
  }
  
  /* 10. Empty-state padding — cap at 24px so empty cards don't tower over
   *     filled ones in the same scroll. Targets the warehouse views that
   *     emit `style="padding:32px*"` or `padding:48px` inline. */
  #mainContent .empty-state[style*="padding:48px"],
  #mainContent .empty-state[style*="padding: 48px"],
  #mainContent .empty-state[style*="padding:32px"],
  #mainContent .empty-state[style*="padding: 32px"] {
    padding: 24px 16px !important;
  }

  /* 11. Picklist variance summary mini-table inside the yellow callout —
   *     5-col table with inline 6px/8px padding overflows at 375. Tighten
   *     padding so it fits without forcing a horizontal scroll. */
  #mainContent div[style*="background:#fff8e1"] table {
    font-size: 11px !important;
    width: 100% !important;
  }
  #mainContent div[style*="background:#fff8e1"] table th,
  #mainContent div[style*="background:#fff8e1"] table td {
    padding: 4px 4px !important;
    word-break: break-word;
  }
  #mainContent div[style*="background:#fff8e1"] {
    padding: 10px 12px !important;
  }

  /* 12. Net flow chart caption row alignment — the legend below the SVG
   *     centers two pills with 18px gap; on 375 they collide with the
   *     14px page padding. Drop the gap to 12px so they don't bleed. */
  #mainContent .stat-card > div[style*="width:100%"] > div[style*="justify-content:center"] {
    gap: 12px !important;
    flex-wrap: wrap;
  }

  /* 13. Generic stat-card inline `padding:14px 16px` cards across overview
   *     line up to a uniform 12px 14px so the warehouse overview stack
   *     reads as one rhythmic column — matches pass-1 12px discipline. */
  #mainContent .stat-card[style*="padding:14px 16px"],
  #mainContent .stat-card[style*="padding: 14px 16px"] {
    padding: 12px 14px !important;
  }

  /* 14. Pick lists wh-kpi-row — the inline scoped `.wh-kpi-card` already
   *     has its own ≤640 rule (`flex: 1 1 calc(50% - 6px)`) but at 375
   *     with 4 cards we want the same calc applied at ≤768 so nothing
   *     spills onto a third lonely row when warehouse staff pull up the
   *     dashboard on a tablet just over 640. */
  #mainContent .wh-kpi-row {
    gap: 8px !important;
  }
  #mainContent .wh-kpi-card {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 4px) !important;
    padding: 10px 12px !important;
  }
  #mainContent .wh-kpi-value {
    font-size: 18px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Marketing+Finance (Agent 5, 2026-05-06)
 *
 * Targets the Marketing, Finance, and Analytics sections only. Cole's
 * complaint: "many spots aren't even, symmetrical, or have really difficult
 * to view if you scroll all over the page, we need to have it way more
 * compact and everything even, symmetrical and parallel."
 *
 * Fixes systemic issues across these views:
 *   1. Page padding wrappers that eat 48px on a 375px viewport
 *      (.cost-chain wrapper, finance subview wraps, pricing-suggestions).
 *   2. Inline-style fixed-width inputs/selects in filter rows that overflow
 *      horizontally instead of filling the row evenly.
 *   3. Wide horizontal-scroll tables with no min-width — columns crush, rows
 *      look uneven.
 *   4. Inline `max-width:NNNpx` on `<td>` cells (campaign-name truncation)
 *      that forced page-wide horizontal scroll on mobile.
 *   5. Page-header export-button rows that cramp under the title at 375px.
 *   6. Header strip / freshness chip rows with gaps too large for mobile.
 *
 * Every selector is scoped to #mainContent + a section-specific class so
 * desktop is untouched. Pass-3 does NOT modify pass-1/pass-2 rules.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ─── 1. Cost-Chain — full-width wrapper, even filter row ─────────────── */
  /* The view's outer div hardcodes padding:20px 24px;max-width:1400px which
   * cost ~48px of viewport on a 375px screen. Reset to the standard
   * #mainContent padding rhythm (12px sides). */
  #mainContent > div[style*="padding:20px 24px"][style*="max-width:1400px"],
  #mainContent > div[style*="padding: 20px 24px"][style*="max-width: 1400px"] {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* The cost-chain header bar: title block + 3-button cluster on the right.
   * On mobile the right-side button group collides with the title — wrap and
   * make buttons full-row width. */
  #mainContent div[style*="display:flex"][style*="justify-content:space-between"] > div[style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }

  /* Cost-chain filter row — 5 selects + search input + 6 buttons all crammed
   * into one flex row with `width:240px` / `max-width:220px` inline. Force
   * each control to equal-width so the row reads as a clean grid. */
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > input,
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > select,
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > button {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
  }
  /* The search input wants its own row so the placeholder is fully readable. */
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > input#cc-search {
    flex: 1 1 100% !important;
  }

  /* Cost-chain wide table — give the table a minimum width so the 19 columns
   * don't compress to unreadable widths inside .view-panel { overflow-x:auto }.
   * The min-width keeps each column at its design width and forces a clean
   * horizontal scroll inside the panel rather than the whole page scrolling. */
  #mainContent .view-panel[style*="overflow-x:auto"] > table.view-table[style*="table-layout:fixed"] {
    min-width: 1500px !important;
  }

  /* Cost-chain pagination row — keeps the 3 controls evenly spaced. */
  #mainContent div[style*="justify-content:center"][style*="margin-top:8px"] > button {
    min-height: 36px !important;
    padding: 0 14px !important;
  }

  /* ─── 2. Marketing Overview — header right buttons stack cleanly ─────── */
  /* `.mo-header-right` (Summarize + Export CSV) was sitting flex-end of the
   * page-header. On 375px the buttons squeeze under the page-subtitle. Let
   * the page-header wrap and give the right cluster its own row. */
  #mainContent .mo-header-right {
    flex-wrap: wrap !important;
    width: 100%;
    justify-content: flex-start !important;
    margin-top: 4px !important;
  }
  #mainContent .mo-header-right > button {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }

  /* Marketing freshness chips — already wrap, but tighten the gap and chip
   * padding so a 4-chip row doesn't take 3 lines. */
  #mainContent .mo-freshness-strip {
    gap: 6px !important;
    margin: 4px 0 10px 0 !important;
  }
  #mainContent .mo-freshness-chip {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  /* CAPI health strip — was `gap:16px` which forces wrap onto 4-5 lines.
   * Compact gap + smaller font so it reads as a tight metadata band. */
  #mainContent .mo-capi-health {
    gap: 8px 12px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  /* Section divider above Paid Channels table — keep the spacing consistent
   * with the 12px rhythm, override the inline `margin-top:16px`. */
  #mainContent .table-container[style*="margin-top:16px"],
  #mainContent .mo-section-header[style*="margin-top:16px"] {
    margin-top: 12px !important;
  }

  /* Marketing second stats-row had inline `margin-top:8px` which fights with
   * the existing kpi-grid `margin-bottom:12px`. Normalize to 0 — the grid
   * gap above already separates the channel-ROAS strip cleanly. */
  #mainContent .stats-row[style*="margin-top:8px"] {
    margin-top: 0 !important;
  }

  /* Marketing PAID CHANNELS table footer note — long URL/copy was extending
   * past the table's box on narrow screens. Force wrap. */
  #mainContent .table-container > div[style*="border-top:1px solid"] {
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  /* ─── 3. Paid Channels view — kill desktop-width inline TD widths ─────── */
  /* The campaign-name TD has inline `max-width:320px;overflow:hidden;
   * text-overflow:ellipsis;white-space:nowrap` for desktop. Inside an
   * already-overflow-x:auto .table-container that is fine, but on mobile
   * we want the full table to participate in horizontal scroll without one
   * column hard-pinning to 320px. Let the column be its natural narrow
   * width and rely on the parent's overflow-x to scroll. */
  #mainContent .table-container td[style*="max-width:320px"],
  #mainContent .table-container td[style*="max-width: 320px"],
  #mainContent .table-container td[style*="max-width:280px"],
  #mainContent .table-container td[style*="max-width: 280px"] {
    max-width: 220px !important;
  }

  /* Paid Channels filter row — was `display:flex;gap:8px` with inline
   * `margin:12px 0`. Wrap and equalize button heights with pass-1 toolbar
   * height. */
  #mainContent .toolbar[style*="margin:12px 0"] {
    margin: 8px 0 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .toolbar[style*="margin:12px 0"] > .filter-btn {
    flex: 1 1 calc(33.33% - 4px) !important;
    min-height: 36px !important;
    text-align: center;
  }

  /* ─── 4. Pricing Suggestions — full-bleed wrapper + even filter row ──── */
  /* The whole view is wrapped in `<div style="padding:0 24px 24px">`
   * which steals 48px on mobile. */
  #mainContent > div > div[style*="padding:0 24px 24px"],
  #mainContent > div > div[style*="padding: 0 24px 24px"] {
    padding: 0 0 24px !important;
  }

  /* Pricing-suggestions tab strip: chips defer to the density layer's
     #ps-tabs scroll-strip (one scrollable row); keep only the tap floor.
     (2026-07-16: the old flex 50% made 2 rows of giant half-width chips.) */
  #mainContent #ps-tabs > button {
    min-height: 36px !important;
  }
  #mainContent #ps-filters {
    gap: 8px !important;
  }
  #mainContent #ps-filters > #ps-verdict,
  #mainContent #ps-filters > #ps-sku {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
  }
  #mainContent #ps-filters > #ps-apply {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 0 16px !important;
  }

  /* Pricing-suggestions wide 9-col table needs a min-width so the
   * `overflow-x:auto` parent scrolls cleanly without crushing columns.
   * Scoped :not(cardified) 2026-07-16 — when hydrateMobileTables cardifies
   * the table, an 880px min-width forces a sideways-scrolling card stack. */
  #mainContent #ps-body > div[style*="overflow-x:auto"] > table:not([data-mobile-card-table="true"]) {
    min-width: 880px !important;
  }

  /* ─── 5. Finance subview wrappers (cashflow / landed / recurring / unit) ── */
  /* All four use `padding:24px` on a `.{cff,lc,rb,ue}-wrap` outer div. On
   * mobile the standard #mainContent already provides side padding; double
   * padding wastes 48px. Tighten to vertical-only. */
  #mainContent .cff-wrap,
  #mainContent .lc-wrap,
  #mainContent .rb-wrap,
  #mainContent .ue-wrap {
    padding: 12px 0 !important;
    max-width: 100% !important;
  }

  /* Finance subview tables — give them a min-width so any horizontal-scroll
   * wrapper actually scrolls instead of crushing column widths. Common
   * wrapper class names: .cff-table-wrap, .lc-table-wrap, .rb-table-wrap
   * .ue-table-wrap. */
  #mainContent .cff-table-wrap,
  #mainContent .lc-table-wrap,
  #mainContent .rb-table-wrap,
  #mainContent .ue-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .cff-table-wrap > table,
  #mainContent .lc-table-wrap > table,
  #mainContent .rb-table-wrap > table,
  #mainContent .ue-table-wrap > table {
    min-width: 640px !important;
  }

  /* Recurring-bills modal already uses `width:min(560px,92vw)` which is
   * fine — but tighten internal padding so the form doesn't waste real
   * estate at narrow widths. */
  #mainContent .rb-modal {
    padding: 16px !important;
  }

  /* ─── 6. Nexus — meta-bar tighter, table min-width ────────────────────── */
  #mainContent .nx-meta-bar {
    gap: 6px 12px !important;
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }
  #mainContent .nx-table-wrap > table.nx-table {
    min-width: 720px !important;
  }
  /* Callout headline shouldn't be tiny on mobile. */
  #mainContent .nx-callout {
    padding: 10px 12px !important;
    line-height: 1.45 !important;
  }

  /* ─── 7. Jarvis Marketing recommendation cards — equal heights ────────── */
  /* The `.jm-rec-card` is a flex row with icon + body. On mobile the body
   * text can wrap to 4-5 lines; the icon's flex-start alignment leaves a
   * tall icon-less gutter. Tighten card padding and let icons stay top-aligned
   * with explicit gap. */
  #mainContent .jm-rec-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  #mainContent .jm-rec-card .jm-rec-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
  #mainContent .jm-rec-card .jm-rec-metrics {
    overflow-wrap: anywhere !important;
  }

  /* Jarvis ad-intel section header buttons (Summarize / Approve / Reject)
   * are sized 11px × 4px padding inline. Bump to a real touch target. */
  #mainContent .jarvis-ad-intel-section button[style*="font-size:11px"] {
    min-height: 32px !important;
    padding: 4px 12px !important;
  }

  /* ─── 8. ROAS gauge bars (break-even widget) — keep proportional ─────── */
  /* The roas-gauge-bar pair sits in a fixed-height container; on mobile
   * they were getting clipped. Make sure the wrapper allows full width. */
  #mainContent .roas-breakeven-actual-value {
    font-size: 22px !important;
  }

  /* ─── 9. Currency / monetary cells — tabular-nums and prevent overflow ─ */
  /* Long currency formatting like $1,234,567.89 was overflowing tight cells
   * on the data-table mobile-card transformations. Force tabular-nums and
   * allow wrap as a last resort. */
  #mainContent .data-table .mono,
  #mainContent .view-table .mono {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* ─── 10. Finance/Marketing/Analytics sub-tab pick-tab strips ─────────── */
  /* Wrappers (.finance-reports-subtabs, .finance-spend-subtabs,
   * .finance-forecast-subtabs, .analytics-hub-subtabs, .finance-reports-subtabs)

   * all use `pick-tab-group`. The pass-1 orphan-card guard catches odd-count
   * last-child but with 4-5 sibling tabs the row reads jagged. Force grid
   * layout for these specific groups so every tab gets equal width. */
  #mainContent .finance-reports-subtabs,
  #mainContent .finance-spend-subtabs,
  #mainContent .finance-forecast-subtabs
  #mainContent .finance-costs-subtabs,
  #mainContent .analytics-hub-subtabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  /* 5-tab subtab groups — last cell spans full width (orphan guard already
   * handles odd-count via flex; for grid, restate explicitly). */
  #mainContent .finance-reports-subtabs > .pick-tab:nth-child(odd):last-child,
  #mainContent .finance-spend-subtabs > .pick-tab:nth-child(odd):last-child,
  #mainContent .finance-forecast-subtabs > .pick-tab:nth-child(odd):last-child,
  #mainContent .finance-costs-subtabs > .pick-tab:nth-child(odd):last-child,
  #mainContent .analytics-hub-subtabs > .pick-tab:nth-child(odd):last-child {
    grid-column: 1 / -1 !important;
  }
  /* Tab pills stay at 40px (matches pass-1) but center text and strip
   * vertical padding so multi-word labels don't wrap awkwardly. */
  #mainContent .finance-reports-subtabs > .pick-tab,
  #mainContent .finance-spend-subtabs > .pick-tab,
  #mainContent .finance-forecast-subtabs > .pick-tab,
  #mainContent .finance-costs-subtabs > .pick-tab,
  #mainContent .analytics-hub-subtabs > .pick-tab {
    text-align: center;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ─── 11. Generic horizontal-scroll table-container — min-width guard ── */
  /* For finance + marketing tables wrapped in `.table-container` with
   * `overflow-x:auto`, ensure the inner data-table has a sensible min-width
   * so columns don't crush. Table-specific min-widths (cost-chain, ps-body,
   * nx-table) override this. */
  #mainContent .table-container > table.data-table {
    min-width: 640px;
  }

  /* ─── 12. Pricing-suggestions verdict badges — wrap-friendly ──────────── */
  /* Inline `padding:2px 8px` badges look right; just ensure cell-level wrap. */
  #mainContent #ps-body td {
    overflow-wrap: anywhere;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — System+Global (Agent 6, 2026-05-06)
 *
 * Scope: Brief + Reviews + Jarvis/AI Ops + Strategy Command + Alerts +
 * Worker Heatmap + System (Users) + cross-cutting global concerns
 * (header chrome, jarvis full-height shell vs bottom-nav, modal stacks,
 * chat input row, tab-bar overflow scroll, rm-stat-card row, alerts
 * push-status badge, multi-checkbox cells in user table).
 *
 * Companion to passes 1 & 2 — does not duplicate their rules. Every
 * selector is scoped (.jv-, .rm-, .sc-, .alerts-, .wh-, .um-, .mb-, .brief-)
 * so cross-view bleed is impossible.
 *
 * Cole's complaint this addresses: "many spots aren't even, symmetrical,
 * or really difficult to view if you scroll all over the page" —
 * specifically: jarvis input hidden behind bottom-nav, jarvis-hub 5-tab
 * row crammed, reviews stat-cards uneven at 375px, modal Approve/Reject
 * touch targets short, brief Top-3 header overflow, alerts push toggle
 * pushed off-row, users table cramming.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Jarvis / AI Ops — full-height shell must respect bottom nav ═══
   * .jv-wrap uses calc(100vh - 56px) which is the desktop header height.
   * Subtract the mobile header (52px) + safe-area inset. The old extra 72px
   * reserved the bottom nav, which no longer renders. */
  #mainContent .jv-wrap {
    height: calc(100dvh - 52px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 52px - env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Tighter padding on chat panes — desktop 24px → 14px */
  #mainContent .jv-messages,
  #mainContent .jv-sessions-wrap {
    padding: 14px !important;
    gap: 12px !important;
  }
  #mainContent .jv-input-area {
    padding: 12px 14px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .jv-input-row {
    gap: 8px !important;
  }
  /* Send button MUST stay at 44x44 — finger target */
  #mainContent .jv-send-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  #mainContent .jv-input {
    min-height: 44px !important;
    font-size: 16px !important; /* prevent iOS zoom-on-focus */
    padding: 10px 12px !important;
  }
  /* Header chrome inside jarvis — 16px font, smaller icon */
  #mainContent .jv-header {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  #mainContent .jv-header-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  #mainContent .jv-header-title {
    font-size: 14px !important;
  }
  #mainContent .jv-header-status {
    font-size: 11px !important;
  }
  /* Tabs row inside jarvis — let it scroll horizontally instead of cramming */
  #mainContent .jv-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #mainContent .jv-tabs::-webkit-scrollbar { display: none; }
  #mainContent .jv-tab {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
  }
  /* Message bubble width — let assistant fill 90% on phone for readability */
  #mainContent .jv-msg {
    max-width: 92% !important;
  }
  #mainContent .jv-msg-bubble {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  /* Toggle pill row above input — wrap if needed */
  #mainContent .jv-toggle-wrap {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* AI-Ops summary panels — 1-column at narrow */
  #mainContent .jv-aiops-summary-grid,
  #mainContent .jv-aiops-panels {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .jv-aiops-shell {
    padding: 0 !important;
    gap: 14px !important;
  }
  #mainContent .jv-aiops-panel {
    padding: 14px !important;
  }
  #mainContent .jv-aiops-item-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Jarvis-hub subtabs (5 tabs) — equal-height row, allow 2-row wrap */
  #mainContent .pick-tab-group.jarvis-hub-subtabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .pick-tab-group.jarvis-hub-subtabs .pick-tab {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  /* Sessions list — full-width cards */
  #mainContent .jv-ses-card {
    padding: 12px !important;
  }
  /* Briefs queue cards inside AI Ops — title can wrap, action row wraps */
  #mainContent .jv-briefs-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .jv-brief-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .jv-brief-actions > button {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
  /* Freshness/paused banner — softer padding */
  #mainContent .jv-freshness-bar,
  #mainContent .jv-paused-banner {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
  }

  /* ═══ 2. Brief — Critical-Items header symmetry + supplements rhythm ═══ */
  #mainContent .mb-top3-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  #mainContent .mb-top3-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .mb-top3-actions {
    margin-left: auto !important;
    gap: 6px !important;
  }
  #mainContent .mb-top3-timestamp {
    font-size: 11px !important;
  }
  #mainContent .mb-top3-refresh-btn {
    min-height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Top-3 item row — keep rank+icon+content tight at 375px */
  #mainContent .mb-top3-item-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #mainContent .mb-top3-item-detail {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  #mainContent .mb-top3-rank {
    flex-shrink: 0 !important;
  }
  #mainContent .mb-top3-icon {
    flex-shrink: 0 !important;
  }
  /* Supplements (stockouts etc.) — 1-column on phone */
  #mainContent .mb-top3-supplements {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Brief-header actions — Summarize + Refresh — equal heights */
  #mainContent .brief-header-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .brief-header-actions > button {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }
  /* Yesterday-row — wrap label + value + delta cleanly */
  #mainContent .mb-yesterday-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  /* ═══ 3. Reviews Moderation — symmetry + touch targets ═══ */
  /* Stat cards row — keep them in 2-col not 4-col, equal height */
  #mainContent #reviewsModeration .rm-stat-card,
  #mainContent .rm-stat-card {
    min-height: 76px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .rm-stat-value {
    font-size: 20px !important;
  }
  #mainContent .rm-stat-label {
    font-size: 10.5px !important;
  }
  /* Filter row — single column, full-width controls */
  #mainContent .rm-filters {
    gap: 8px !important;
  }
  #mainContent .rm-filters select,
  #mainContent .rm-filters input {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  /* Modal — fit viewport with breathing room */
  #mainContent + #rmModal,
  #rmModal {
    padding: 12px !important;
  }
  #rmModal .rm-modal-card {
    padding: 16px !important;
    max-height: 92vh !important;
    border-radius: 12px !important;
  }
  #rmModal .rm-modal-photos img {
    width: 88px !important;
    height: 88px !important;
  }
  /* Approve / Reject / Spam buttons — 44px touch targets, equal width row */
  #rmModal .rm-actions {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  #rmModal .rm-actions button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  /* Bulk-eligibility buttons — wrap to 2 per row, 40px high */
  #mainContent .rm-bulk-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
  }
  /* Sub-tab bar — already wraps; tighten so 6 tabs in 3×2 stay even */
  #mainContent .rm-tab-bar .rm-tab {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  /* Suppressions delete button — touch target */
  #mainContent .rm-sup-delete-btn {
    min-height: 36px !important;
    min-width: 36px !important;
  }

  /* ═══ 4. Alerts — push-status badge layout + row symmetry ═══ */
  /* Push-status banner: dot + 2-line text + button — row at >480, stack
   * cleanly below 420. The button was getting kicked off the right edge
   * with margin-left:auto when the text wrapped to 3 lines. */
  #mainContent .alerts-push-status {
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
  }
  #mainContent .alerts-push-btn {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 40px !important;
    text-align: center !important;
  }
  #mainContent .alerts-shell {
    gap: 16px !important;
  }
  #mainContent .alerts-domain-head {
    padding: 12px 14px !important;
  }
  /* Alert row: 1fr auto holds at 375px; soften padding + text wrap */
  #mainContent .alerts-row {
    padding: 12px 14px !important;
    gap: 12px !important;
    align-items: center !important;
  }
  #mainContent .alerts-row-label {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .alerts-row-desc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
  #mainContent .alerts-toggle {
    flex-shrink: 0 !important;
  }
  /* ═══ 5. Strategy Command — extra compaction beyond own breakpoint ═══
   * .sc-tabs already has min-height:44 at <=768 in its own scoped CSS.
   * Add: tab bar horizontal-scroll fallback (3 tabs may still cram with
   * a 12-char label), card-grid card padding, filter row symmetry. */
  #mainContent .sc-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  #mainContent .sc-tabs::-webkit-scrollbar { display: none; }
  #mainContent .sc-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  #mainContent .sc-filters {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sc-filters select,
  #mainContent .sc-filters input {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }
  #mainContent .sc-card {
    padding: 14px !important;
  }
  #mainContent .sc-card-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .sc-card-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .sc-action-btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  /* ═══ 6. Worker Heatmap — toolbar symmetry + horizontal-scroll cue ═══
   * The grid (7 rows × 24 hour cells) MUST scroll horizontally — already
   * does via .wh-grid-wrap{overflow-x:auto}. Add visible scroll affordance
   * + symmetric toolbar where day-pill row + refresh sit on consistent
   * heights. The pick-tab-group.worker-activity-subtabs already inherits
   * the pass-1 40px rules. */
  #mainContent .wh-shell {
    gap: 16px !important;
  }
  #mainContent .wh-toolbar {
    gap: 8px !important;
  }
  #mainContent .wh-day-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  #mainContent .wh-refresh-btn {
    min-height: 36px !important;
  }
  #mainContent .wh-user-card {
    padding: 12px !important;
  }
  #mainContent .wh-user-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  #mainContent .wh-user-total {
    margin-left: 0 !important; /* don't push off-row when name wraps */
    width: 100% !important;
    font-size: 11.5px !important;
  }
  /* Soft horizontal-scroll affordance — fades right edge on overflow */
  #mainContent .wh-grid-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* Inner-tabs (AI ops sub-row) — wrap, consistent 40px */
  #mainContent .ai-inner-tabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ai-inner-tabs > * {
    min-height: 40px !important;
  }
  #mainContent .ai-row {
    padding: 10px 12px !important;
  }
  #mainContent .ai-row-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #mainContent .ai-row-desc {
    font-size: 11.5px !important;
  }

  /* ═══ 7. System / Users — table-card transformation tightening ═══
   * The Users table has 7 columns (Name/Role/PIN/Status/Channels/Created/
   * Actions). On mobile the .table-scroll/.table-container already gives
   * horizontal scroll, but the embedded action row (Edit / Reset PIN /
   * Disable) and the channel-checkbox cell were not wrapping. */
  #mainContent .um-actions {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .um-action-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  #mainContent .um-channels-cell {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-width: 220px !important;
  }
  #mainContent .um-channel-cb {
    flex: 0 0 auto !important;
    font-size: 11px !important;
  }
  /* Create-user form row — stack inputs */
  #mainContent .um-input-pin,
  #mainContent #newUserName,
  #mainContent #newUserRole,
  #mainContent #newUserPin {
    min-height: 40px !important;
    font-size: 16px !important; /* prevent iOS zoom on focus */
    box-sizing: border-box !important;
  }
  #mainContent .um-create-btn {
    min-height: 44px !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  /* PIN reveal cell — keep dots + button on one line */
  #mainContent .um-pin-cell {
    white-space: nowrap !important;
  }
  /* Sys-stats row — tighten to 2-col equal-height tiles */
  #mainContent .sys-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .sys-stat-card {
    padding: 10px 12px !important;
    min-height: 76px !important;
  }
  #mainContent .sys-stat-value {
    font-size: 20px !important;
  }
  #mainContent .sys-stat-label {
    font-size: 10.5px !important;
  }
  /* User-role-badge — uniform height */
  #mainContent .user-role-badge {
    display: inline-block !important;
    line-height: 1.4 !important;
  }

  /* ═══ 8. Cross-cutting global — header chrome at 375px, modal stack ═══
   * Header at 375px: logo + status group + action group + account group.
   * The existing rules force header-right to 100% wrap; tighten the chip
   * heights so the sub-strip is a clean band, not a 2-row mess. */
  .header {
    padding: 6px 8px !important;
    min-height: 52px !important;
  }
  /* Theme + lang toggle pills + notification bell — uniform 36px square so
   * the right-side cluster is symmetrical. Some are .theme-toggle, some
   * .lang-toggle, some .notification-bell-btn — match all. */
  .header .theme-toggle,
  .header .lang-toggle,
  .header .notification-bell-btn,
  .header .header-icon-btn,
  /* Notification panel slide-in — guarantee close button is reachable */
  .notification-panel {
    max-height: calc(100dvh - 52px) !important;
  }
  /* Sidebar overlay — backdrop should always sit below sidebar but above
   * content so the dismiss-by-tap region is reliable. */
  /* Generic toast container — bottom offset comes from the shared toast rule
     above (16px + safe-area); the old 72px bottom-nav reserve is gone. */
  #toast-container {
    left: 12px !important;
    right: 12px !important;
    z-index: 1100 !important;
  }
  #toast-container .toast,
  .toast {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Generic backdrop modal — make sure they sit above the bottom nav.
   * Pages like rmModal use position:fixed inset:0 which already covers
   * the nav, but z-index needs to beat .mobile-bottom-nav (z-dropdown). */
  #rmModal,
  .modal-overlay,
  /* ═══ 9. Page-level rhythm — uniform 12px section gaps for these views ═══
   * The pass-1 rule covers most surfaces but doesn't reach the per-view
   * scoped wrappers below. Bringing them in line ends the 14/16/24 staircase. */
  #mainContent .alerts-shell,
  #mainContent .wh-shell,
  #mainContent .ai-shell,
  #mainContent .jv-aiops-shell {
    margin-top: 0 !important;
  }
  #mainContent .sc-stats,
  #mainContent .alerts-shell,
  #mainContent .wh-shell {
    margin-bottom: 12px !important;
  }
}

/* Mobile UX pass 3 — narrow-viewport (<=420px) refinements (sibling block,
 * not nested, for old Safari compat). */
@media (max-width: 420px) {
  #mainContent .alerts-header h2 {
    font-size: 18px !important;
  }
  #mainContent .pick-tab-group.jarvis-hub-subtabs .pick-tab {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 11.5px !important;
  }
  #mainContent .rm-tab-bar .rm-tab {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 11.5px !important;
  }
}



/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Orders (Agent 1, 2026-05-07)
 * Cole's note after pass 3: "do another broad pass" — go after the
 * second-order issues pass-3 didn't reach.
 *
 * Scope: Orders nav only (fulfillment, mto/logistics, order-exceptions,
 * labels-hub: label-generator + label-anomalies + shipping-claims,
 * purchase-orders-hub: bulk-orders + smart-reorder).
 *
 * Issues addressed (second-order — pass 1-3 hit the obvious ones):
 *   1. labels-hub 3-tab subtab strip — third tab orphaned in 2-col grid.
 *   2. Inline skeleton blocks with hardcoded width:160-220px overflow on
 *      375px and create asymmetric loading states.
 *   3. Modal max-width minus 24px = 351px on iPhone 13 mini — bump to
 *      calc(100vw - 16px) for tighter fit + reduce body padding.
 *   4. Modals sized 540-580px wide use 18-20px body padding — too generous
 *      on phones, eats real estate. Drop to 14-16px.
 *   5. Label review-row expand panel: nested grids `2fr 1fr 1fr` (city/
 *      state/zip) and `1fr 1fr` (phone/email, dimensions) cram 3 inputs
 *      into 320px = 105px each, sub-tap-target.
 *   6. shipping-claims modal dropdown `sc-order-results` max-height 260px
 *      pushes the form below off-screen on iPhone SE-class.
 *   7. order-exceptions modal type-button row uses flex with 2 boxes —
 *      14px padding + 22px icon = 90px tall, fine, but type-btn-sub copy
 *      ("Can't find box • Wrong box shipped") at 11px wraps awkwardly in
 *      cramped widths. Tighten icon, allow sub copy to flow on 2 lines.
 *   8. order-exceptions modal-result-row: SKU/order rows have a "Select"
 *      button at the right end. On 327px-wide modal body, image (36px) +
 *      title flex-1 + button (60px) + gaps consume 200px+, title gets
 *      ~120px and ellipses. Stack vertically on phones.
 *   9. order-exceptions modal-search 9px padding + 14px font = 35px row,
 *      below 40px tap target.
 *   10. PO hub container pills (bulk-orders): 6px/14px padding chips
 *       wrap fine but no min-height; need 36px to match other tap zones.
 *   11. Smart Reorder jarvis-stat-chip row uses flex with gap:12px so
 *       chips stack vertically when squeezed — looks sparse with 2
 *       narrow chips. Force 3-col grid.
 *   12. Smart Reorder header action cluster (Summarize/Refresh/Export
 *       CSV) — pass 3 covered it for `gap:8px;align-items:center` but
 *       buttons have inline `padding:5px 12px` keeping height ~24px,
 *       sub-tap. Bump to 40px min-height.
 *   13. Logistics MTO/PO loading skeleton uses `repeat(4,1fr)` inline
 *       grid — pass 3 caught one case but the smart-reorder skeleton
 *       still has hardcoded `width:280px;height:28px` for header.
 *   14. order-exceptions cards (oex-card) have padding:11px 12px and
 *       resolve-btn aligned right; on 1-col mobile the resolve-btn ends
 *       up jammed against the time. Force min-height + tap-target.
 *   15. Container in-transit chips in smart-reorder use inline padding
 *       and wrap with flex-wrap; `font-size:12px` is fine but the chip
 *       clusters can feel dense — drop to a 2-col grid on phones.
 *   16. Smart Reorder seasonal-alerts-card header copy sometimes wraps
 *       under icon — give it grid layout for clean alignment.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. labels-hub 3-tab subtab strip — odd-last-child orphan rule.
   *    Pass 1 only handles `.pl-wh-subtabs`; this is the labels-hub case. */
  #mainContent .pick-tab-group.labels-hub-subtabs .pick-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* 2. Skeleton-block fixed pixel widths — let them fill the row so the
   *    loading state isn't lopsided / overflowing on 375px. The .u-filters
   *    parent flex-wraps; force 100% width on inner skeletons there.
   *    Inline-style skeleton-block grid items get the same treatment. */
  #mainContent .u-filters .skeleton-block,
  #mainContent .u-filters > .skeleton-block[style*="width:160px"],
  #mainContent .u-filters > .skeleton-block[style*="width:170px"] {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Standalone skeleton headers (`width:220px;height:28px` etc.) — let
   *  them stretch so the loader matches the page width below it. */
  #mainContent .u-panel > .skeleton-block[style*="width:220px"],
  #mainContent .u-panel > .skeleton-block[style*="width:240px"],
  #mainContent .u-panel > .skeleton-block[style*="width:280px"],
  #mainContent .u-panel > .skeleton-block[style*="width:180px"] {
    width: 60% !important;
    max-width: 220px !important;
  }
  /* The 4-col loading grid in MTO/PO views — collapse to 2-col so
   *  skeleton cards stay legible on phone. */
  #mainContent div[style*="grid-template-columns:repeat(4,1fr)"][style*="gap:12px"],
  #mainContent div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3. Modal width — let the modal use almost the full screen on
   *    phones. Pass 3 covered the inline `1fr 1fr` collapse; this
   *    handles the outer width. */
  #mainContent ~ .modal-overlay .modal-box[style*="width:min(580px"],
  body > .modal-overlay .modal-box[style*="width:min(580px"] {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
  /* 4. Modal body padding tightening — every Orders modal uses 18-20px
   *    inner padding. 14px on phones reclaims ~12px of horizontal space. */
  body > .modal-overlay .modal-box > div[style*="padding:20px"],
  body > .modal-overlay .modal-box > div[style*="padding: 20px"] {
    padding: 14px !important;
  }
  body > .oex-modal-overlay .oex-modal-body {
    padding: 14px 14px !important;
  }
  body > .oex-modal-overlay .oex-modal-header {
    padding: 14px 14px 12px !important;
  }
  body > .oex-modal-overlay .oex-modal-footer {
    padding: 12px 14px !important;
  }
  /* 4b. Outer modal width clamp for oex-modal (already capped at
   *     calc(100vw - 32px) — drop to 12px so we keep parity with
   *     shipping-claims and journey-modal). */
  body > .oex-modal-overlay .oex-modal {
    max-width: calc(100vw - 12px) !important;
    width: calc(100vw - 12px) !important;
  }
  /* journey-modal width parity (Fulfillment, Logistics, MTO drafts). */
  body > .journey-overlay > .journey-modal {
    max-width: calc(100vw - 12px) !important;
    width: calc(100vw - 12px) !important;
  }
  body > .journey-overlay > .journey-modal > div[style*="padding: 20px"],
  body > .journey-overlay > .journey-modal > div[style*="padding:20px"] {
    padding: 14px !important;
  }

  /* 5. Label review-row expand panel — collapse the city/state/zip 3-col
   *    grid into stacked rows so each input is a real tap target.
   *    Pass 3 only collapsed the OUTER `1fr 1fr` of the expand container. */
  #mainContent .lbl-review-expand td > div > div[style*="grid-template-columns:2fr 1fr 1fr"],
  #mainContent .lbl-review-expand td div[style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  /* The City field gets the full row; State + ZIP share row 2. */
  #mainContent .lbl-review-expand td div[style*="grid-template-columns:2fr 1fr 1fr"] > .lbl-form-group:first-child {
    grid-column: 1 / -1;
  }
  /* 5b. Nested 1fr 1fr grids inside the expand panel (phone/email,
   *     dimensions weight/L/W/H) keep 2-col but tighten gap. */
  #mainContent .lbl-review-expand td div[style*="grid-template-columns:1fr 1fr"] {
    gap: 6px !important;
  }
  /* 5c. Expand-row save/cancel button band — equal-width tap targets. */
  #mainContent .lbl-review-expand td > div[style*="display:flex;gap:8px;margin-top:10px"] {
    gap: 8px !important;
  }
  #mainContent .lbl-review-expand td > div[style*="display:flex;gap:8px;margin-top:10px"] > button {
    flex: 1 1 50% !important;
    min-height: 40px !important;
  }

  /* 6. shipping-claims order-search dropdown — clamp height so the
   *    Claim Type / Carrier rows below stay reachable on small screens. */
  #mainContent #sc-order-results,
  body > .modal-overlay #sc-order-results {
    max-height: 200px !important;
  }

  /* 7. order-exceptions modal type-button row — vertical stack on phones
   *    so each card has full width + readable sub copy. */
  #mainContent .oex-type-btns,
  body > .oex-modal-overlay .oex-type-btns {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body > .oex-modal-overlay .oex-type-btn {
    padding: 12px !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0 12px !important;
    align-items: center !important;
  }
  body > .oex-modal-overlay .oex-type-btn .oex-tb-icon {
    grid-row: 1 / 3;
    margin: 0 !important;
    font-size: 22px !important;
  }
  body > .oex-modal-overlay .oex-type-btn .oex-tb-label {
    text-align: left !important;
  }
  body > .oex-modal-overlay .oex-type-btn .oex-tb-sub {
    text-align: left !important;
    margin-top: 0 !important;
  }

  /* 8. order-exceptions modal-result-row — stack image/title block over
   *    the Select button so titles don't get clipped on narrow widths. */
  body > .oex-modal-overlay .oex-modal-result-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body > .oex-modal-overlay .oex-modal-result-row .oex-mr-sel {
    margin-left: auto !important;
    min-height: 36px !important;
    padding: 6px 16px !important;
  }
  /* The middle column (oex-mr-num + oex-mr-cust block) needs to allow
   *  ellipses without spilling. */
  body > .oex-modal-overlay .oex-modal-result-row > div {
    min-width: 0 !important;
  }
  body > .oex-modal-overlay .oex-modal-result-row .oex-mr-cust,
  body > .oex-modal-overlay .oex-modal-result-row .oex-mr-num {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 9. order-exceptions modal-search input — 40px tap target. */
  body > .oex-modal-overlay .oex-modal-search,
  body > .oex-modal-overlay .oex-form-select,
  body > .oex-modal-overlay .oex-form-textarea {
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
    box-sizing: border-box !important;
  }
  body > .oex-modal-overlay .oex-form-textarea {
    min-height: 80px !important;
  }
  body > .oex-modal-overlay .oex-modal-back,
  body > .oex-modal-overlay .oex-modal-submit {
    min-height: 40px !important;
    padding: 0 16px !important;
    flex: 1 1 50% !important;
  }
  /* 9b. order-exceptions search-tab pills — 40px so they're tappable. */
  body > .oex-modal-overlay .oex-search-tabs {
    gap: 4px !important;
  }
  body > .oex-modal-overlay .oex-search-tab {
    min-height: 36px !important;
    padding: 8px 10px !important;
  }

  /* 10. PO hub container pills (bulk-orders) — proper tap height. */
  #mainContent span[data-action="co-filter"] {
    min-height: 36px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 11. Smart Reorder jarvis-stat-chip row — equal 3-col grid. */
  #mainContent .jarvis-reorder-panel > div[style*="display:flex"][style*="flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #mainContent .jarvis-stat-chip {
    width: 100% !important;
    min-height: 56px !important;
    justify-content: center !important;
  }

  /* 12. Smart Reorder header action cluster — pass-3 forced wrap; bump
   *     buttons to a 40px tap height since the inline padding is 5px 12px. */
  #mainContent .page-header > div[style*="display:flex"][style*="gap:8px"] > button[data-action^="sr-"] {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  /* The Summarize button has inline `padding:5px 12px;font-size:12px` and
   *  no class — match it via data-action. */
  #mainContent button[data-action="sr-summarize"] {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  /* 13. Smart Reorder summary card values — pass 3 caught the 28px font;
   *     also tighten card padding so 4 cards fit in 2x2 cleanly. */
  #mainContent .card[style*="padding:16px"][style*="border-left:3px solid"] {
    padding: 12px !important;
  }

  /* 14. order-exceptions cards — give the footer a real tap zone for
   *     resolve-btn so it doesn't overlap the time text. */
  #mainContent .oex-card-footer {
    gap: 8px !important;
    align-items: center !important;
  }
  #mainContent .oex-card-footer .oex-resolve-btn {
    min-height: 32px !important;
    padding: 6px 14px !important;
  }
  /* Tighten oex-card density on mobile — 11px padding + 8px margin
   *  leaves cards looking floaty. */
  #mainContent .oex-card {
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
  }

  /* 15. Container in-transit chip cluster — keep flex-wrap but cap
   *     chip min-width so we don't get one chip per row. */
  #mainContent .card div[style*="display:flex;flex-wrap:wrap;gap:8px"] > div[style*="background:var(--surface-2)"] {
    flex: 1 1 calc(50% - 4px) !important;
    box-sizing: border-box !important;
  }

  /* 16. Smart Reorder seasonal-alerts-header — clean alignment. */
  #mainContent .seasonal-alerts-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 17. order-exceptions modal-footer (back/submit) — already 2 buttons
   *     justify-end; on phones make them 50/50 and full-width-ish. */
  body > .oex-modal-overlay .oex-modal-footer {
    justify-content: stretch !important;
  }

  /* 18. order-exceptions filter row was forced to flex-direction:column
   *     by inline media at line 269. The sev/type selects fill width
   *     fine but the trailing count + add button stack awkwardly.
   *     Force the +Add button to its own row so it doesn't sit beside
   *     the count text. */
  #mainContent .oex-filters {
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .oex-filters select {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }
  #mainContent .oex-filters > span {
    text-align: center !important;
  }
  #mainContent .oex-filters .oex-add-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }

  /* 19. PO container/supplier filter pill row in smart-reorder needs
   *     scroll containment when very many containers exist. */
  #mainContent #jarvis-po-panel,
  #mainContent #seasonal-alerts-panel,
  #mainContent #jarvis-reorder-panel {
    margin-bottom: 16px !important;
  }

  /* 20. Long monetary values + tracking numbers in tables — stop them
   *     blowing the cell width with a sensible word-break. Tables already
   *     have horizontal scroll wrappers from pass 3, but mono spans
   *     occasionally bust the wrapper. */
  #mainContent .oex-table .mono,
  #mainContent .la-table .mono,
  #mainContent .po-table .mono {
    word-break: break-all;
    white-space: normal !important;
  }

  /* 21. Sticky modal header at top:0 — account for safe-area on iPhone X+. */
  body > .modal-overlay .modal-box .modal-header[style*="position:sticky"] {
    padding: 12px 14px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Customers (Agent 2, 2026-05-07)
 *
 * Scope: 5 views in the Customers nav section:
 *   • support-inbox (AI Responder — split-pane sidebar/main)
 *   • messages (internal team chat — channel bar + thread detail)
 *   • support-analytics-hub (forecast charts + SLA grids)
 *   • returns (Customer RMA — multi-step modal + photo handling)
 *   • customers (Customer Intelligence — drill-down profile + timeline)
 *
 * Companion to passes 1/2/3 — does not duplicate their rules.
 *
 * Second-order issues addressed (caught after pass-3 ship):
 *   1. Inbox split-pane: when a ticket is selected at 375px, both panes
 *      stack giving the user a long sidebar above the thread. Use
 *      :has(.responder-ticket-header) to fully collapse the sidebar
 *      when a case is loaded; back-button via existing case rows is
 *      preserved through deselect taps.
 *   2. Inline draft slots (#irisDraftSlot, #jarvisDraftSuggestion) had
 *      max-height:160px with overflow-y but no padding compaction; long
 *      drafts on phones overflowed the visible band.
 *   3. Customer Intelligence drill-down: ci-profile-metrics flex-wrap
 *      gap:24px stranded each metric on its own line at 375px;
 *      ci-event-card padding/text sizing not phone-tuned;
 *      ci-event-json overflowed beyond card width.
 *   4. Customer Story panel (.customer-story-panel): close button can
 *      sit off-screen when the title wraps; segments grid stays multi-col.
 *   5. Returns RMA modal: photo-grid items + step indicator centered;
 *      hub-ret-step-lbl + hub-ret-actions touch targets equalized.
 *   6. Messages thread: channel-bar 6+ tabs cram; reply textarea sits
 *      under the iOS keyboard without safe-area; back-button row drift.
 *   7. Support analytics: support-forecast-cat-bar wrap-row breaks at
 *      375px; sla-vol-bar-col chart bars get crushed; aging-bar-track
 *      width too wide for the row text.
 *   8. Long subjects/customer names — case rows + thread cards get
 *      hard ellipsis instead of vertical clipping.
 *   9. Notification dot positioning on msg-channel-tab.
 *  10. Empty states padded asymmetrically inside the responder pane.
 *  11. Customer-context panel (cust-ctx-panel) order rows + issue rows
 *      cramming on phone.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Support Inbox — split-pane behavior + draft slot tuning ═══ */
  /* When a ticket is loaded, responder-main contains .responder-ticket-header.
   * Collapse the sidebar so the thread takes the full viewport. Without this
   * the user has to scroll past the entire case list to reach the conversation
   * on every selection. To go back to the list, pressing the channel filter
   * (clearing selectedCaseId) re-renders main as the empty-state, restoring
   * the sidebar. Modern browsers (Safari 15.4+, Chrome 105+) support :has(). */
  #mainContent .responder-layout:has(.responder-main .responder-ticket-header) > .responder-sidebar {
    display: none !important;
  }
  #mainContent .responder-layout:has(.responder-main .responder-ticket-header) > .responder-main {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Inline draft slot panels — bound the inner scroll so draft text doesn't
   * push send/refine controls off-screen. */
  #mainContent #irisDraftSlot {
    margin-bottom: 12px !important;
  }
  #mainContent #jarvisDraftSuggestion {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  #mainContent #jarvisDraftSuggestion > div[style*="white-space:pre-wrap"] {
    max-height: 200px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* Refine textbox + Use Draft button — wrap to 2 rows so the input is full
   * width and the buttons sit on a clean second row, equal heights. */
  #mainContent #jarvisDraftSuggestion > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent #jarvisDraftSuggestion #jarvisRefineFeedback {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }
  #mainContent #jarvisDraftSuggestion button {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  /* Case row — long subject or customer name overflows. Add hard truncation
   * on the per-row title/subject lines so each row stays at predictable
   * height. */
  #mainContent .responder-case-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13.5px !important;
  }
  #mainContent .responder-case-subject {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }
  #mainContent .responder-case-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  /* Channel filter pills row — equalize 4 chip heights, allow wrap to 2 rows */
  #mainContent .responder-channel-filter {
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  #mainContent .responder-channel-filter > button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
  }
  /* Ticket header action row — Flag + Close buttons full-width 2-up */
  #mainContent .responder-ticket-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  #mainContent .responder-ticket-actions > button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    justify-content: center !important;
  }
  /* Subject in ticket header can run long — let it wrap to 2 lines */
  #mainContent .responder-ticket-subject {
    font-size: 15px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  #mainContent .responder-ticket-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11.5px !important;
  }
  /* Conversation thread message bubbles — readable max width */
  #mainContent .responder-message {
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }
  #mainContent .responder-message-top {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 11.5px !important;
  }
  #mainContent .responder-message-body {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  /* Latest customer message + Support context — stack as 1-col */
  #mainContent .responder-context-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .responder-context-row .responder-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
    padding: 10px 12px !important;
  }
  /* Generate Draft button row — full width on phone */
  #mainContent .responder-actions-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .responder-actions-row > button {
    width: 100% !important;
    min-height: 44px !important;
  }
  #mainContent .responder-actions-row .responder-hint {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }
  /* Draft textarea — prevent iOS zoom on focus */
  #mainContent .responder-draft-textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  /* Send + Send-and-Close buttons row */
  #mainContent .btn-send-reply,
  #mainContent .btn-send-and-close {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  /* Customer Context panel — collapsed body order/issue rows */
  #mainContent .cust-ctx-panel {
    margin-bottom: 12px !important;
  }
  #mainContent .cust-ctx-toggle {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  #mainContent .cust-ctx-stats {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    padding: 10px 12px !important;
  }
  #mainContent .cust-ctx-stat {
    flex: 1 1 calc(50% - 7px) !important;
    min-width: 0 !important;
  }
  #mainContent .cust-ctx-stat-val {
    font-size: 16px !important;
  }
  #mainContent .cust-ctx-stat-label {
    font-size: 10.5px !important;
  }
  #mainContent .cust-ctx-order-row,
  #mainContent .cust-ctx-issue-row {
    padding: 8px 10px !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  #mainContent .cust-ctx-section-label {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  /* ═══ 2. Customer Intelligence — drill-down + timeline tuning ═══ */
  /* Profile metrics grid — gap:24px stranded one per line at 375px.
   * Force 2-col grid for clean parity. */
  #mainContent .ci-profile-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #mainContent .ci-metric-value {
    font-size: 18px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ci-metric-label {
    font-size: 10px !important;
    letter-spacing: 0.4px !important;
  }
  /* Profile card header — avatar + name/email + since stack neatly */
  #mainContent .ci-profile-card {
    padding: 14px !important;
    margin-bottom: 14px !important;
  }
  #mainContent .ci-profile-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #mainContent .ci-profile-avatar {
    flex-shrink: 0 !important;
  }
  #mainContent .ci-profile-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #mainContent .ci-profile-name {
    font-size: 16px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  #mainContent .ci-profile-email {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ci-profile-since {
    font-size: 11px !important;
  }
  /* Customer row in sidebar — name+email truncate, stats pills wrap */
  #mainContent .ci-customer-row {
    padding: 10px 12px !important;
  }
  #mainContent .ci-customer-name {
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .ci-customer-email {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .ci-customer-stats {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin-top: 4px !important;
  }
  /* Search input — prevent iOS zoom + breathing room */
  #mainContent .ci-search-input {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
  /* Filters — horizontal-scroll clean strip on narrow screens */
  #mainContent .ci-filters {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  #mainContent .ci-filters::-webkit-scrollbar { display: none; }
  #mainContent .ci-filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
  }
  /* Timeline event card — ensure JSON details + summary stay inside box */
  #mainContent .ci-event-card {
    padding: 10px 12px !important;
  }
  #mainContent .ci-event-summary {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ci-event-time,
  #mainContent .ci-event-source {
    font-size: 11px !important;
  }
  #mainContent .ci-event-header {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  #mainContent .ci-event-line {
    overflow-wrap: anywhere !important;
    font-size: 11.5px !important;
  }
  /* Inner JSON detail block when an event is expanded — keep scrollable
   * inside its card, never push out the right edge. */
  #mainContent .ci-event-json,
  #mainContent .ci-event-details pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 11px !important;
    white-space: pre !important;
  }
  /* Empty timeline state — vertical breathing room not too tall on phone */
  #mainContent .ci-empty-timeline {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
    font-size: 12.5px !important;
  }
  #mainContent .ci-empty,
  #mainContent .ci-loading {
    padding: 28px 16px !important;
    font-size: 12.5px !important;
  }

  /* ═══ 3. Customer Story panel (drawer overlay) ═══ */
  /* The story panel is a fixed-position drawer launched from the customer
   * row. Close button can sit off-screen when the title wraps. Force a
   * sticky header so close stays reachable; allow body to scroll. */
  .customer-story-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .customer-story-panel .cs-panel-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: var(--surface, #181818) !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .customer-story-panel .cs-panel-close {
    flex-shrink: 0 !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin-left: auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .customer-story-panel .cs-panel-body {
    padding: 14px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .customer-story-panel .cs-stat-row,
  .customer-story-panel .cs-seg-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .customer-story-panel .cs-stat-card,
  .customer-story-panel .cs-metric-card,
  .customer-story-panel .cs-seg-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
  }
  .customer-story-panel .cs-stat-value,
  .customer-story-panel .cs-metric-value {
    font-size: 18px !important;
  }
  .customer-story-panel .cs-stat-label,
  .customer-story-panel .cs-metric-label {
    font-size: 10.5px !important;
  }
  .customer-story-panel .cs-section-title {
    font-size: 13px !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
  }
  .customer-story-panel .cs-narrative {
    font-size: 13px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }
  .customer-story-panel .cs-rec-item {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  .customer-story-panel .cs-aff-list {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .customer-story-panel .cs-aff-pill {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .customer-story-panel .cs-table-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .customer-story-panel .cs-table {
    min-width: 480px !important;
  }

  /* ═══ 4. Customer (Hub) search/link forms — equal heights ═══ */
  #mainContent .ct-search-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ct-search-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .ct-search-btn {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  #mainContent .ct-link-form,
  #mainContent .ct-email-form {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ct-link-email-input,
  #mainContent .ct-link-note-input,
  #mainContent .ct-email-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .ct-link-btn,
  #mainContent .ct-email-save-btn {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
  #mainContent .ct-card-top {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
  }
  #mainContent .ct-card-name {
    font-size: 14px !important;
    word-break: break-word !important;
  }
  #mainContent .ct-card-email,
  #mainContent .ct-card-phone {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ct-card-meta {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 11.5px !important;
  }
  #mainContent .ct-orders-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .ct-linked-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 8px 10px !important;
  }
  #mainContent .ct-linked-email {
    overflow-wrap: anywhere !important;
    font-size: 12.5px !important;
  }

  /* ═══ 5. Returns / RMA modal — multi-step polish ═══ */
  /* Modal content area should fill viewport on phone, scrollable body. */
  #hub-return-modal .hub-return-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #hub-return-modal .hub-return-modal-hdr {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    background: var(--surface, #181818) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #hub-return-modal #hub-return-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .hub-return-step,
  #hub-return-modal .hub-return-step {
    gap: 12px !important;
  }
  #mainContent .hub-return-step-lbl,
  #hub-return-modal .hub-return-step-lbl {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  #mainContent .hub-ret-form,
  #hub-return-modal .hub-ret-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .hub-ret-field,
  #hub-return-modal .hub-ret-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  #mainContent .hub-ret-field > label,
  #hub-return-modal .hub-ret-field > label {
    font-size: 12px !important;
    color: var(--text-muted) !important;
  }
  #mainContent .hub-ret-select,
  #hub-return-modal .hub-ret-select {
    min-height: 40px !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
    padding: 0 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  #mainContent .hub-ret-input,
  #hub-return-modal .hub-ret-input {
    font-size: 16px !important;
  }
  #mainContent .hub-ret-checkbox-row,
  #hub-return-modal .hub-ret-checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
  /* Step actions row — Back + Continue/Create equal-width 2-up, sticky */
  #mainContent .hub-ret-actions,
  #hub-return-modal .hub-ret-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #181818) !important;
    padding: 10px 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    gap: 8px !important;
  }
  #mainContent .hub-ret-actions > button,
  #hub-return-modal .hub-ret-actions > button {
    flex: 1 1 50% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }
  /* Item row in step 2 — image+title+qty+select stack neatly */
  #mainContent .hub-ret-item-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .hub-ret-item-row img,
  #hub-return-modal .hub-ret-item-row img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  /* Done step — links stack as 1-col on phone */
  #mainContent .hub-ret-done-links,
  #hub-return-modal .hub-ret-done-links {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .hub-ret-done-links > * {
    width: 100% !important;
    min-height: 44px !important;
    text-align: center !important;
  }
  #mainContent .hub-ret-done-title,
  #hub-return-modal .hub-ret-done-title {
    font-size: 16px !important;
  }
  #mainContent .hub-ret-tracking,
  #hub-return-modal .hub-ret-tracking {
    font-size: 12.5px !important;
    overflow-wrap: anywhere !important;
  }

  /* TODO(device) 2026-09-01 mobile-audit: LANDSCAPE HOLE — this stylesheet is
     loaded with media="(max-width: 768px)" (width only), so a phone rotated to
     landscape (e.g. 812x375) escapes EVERY rule in this block while the JS
     overlay gate (_msgUseMobileOverlay → !_msgIsWide()) can still engage the
     mobile overlay flow: overlay markup with desktop CSS. Audit's proposed fix:
     widen the media attr (and _msgIsWide) to also match
     (max-height: 480px) and (pointer: coarse) landscape phones. Needs a real
     device pass before changing — do not fix from a desktop emulation alone. */
  /* ═══ 6. Messages — phone layout (rewritten 2026-06-29) ════════════════════
   * The Messages view is a desktop 2/3-column grid (rail | list | detail). On a
   * phone we collapse to ONE column: the thread list fills the width, the team
   * rail becomes a left slide-in drawer (the ONLY channel switcher on mobile —
   * the desktop rail column is display:none here), and a tapped thread opens
   * full-screen (the view's existing narrow flow). Rules target the CURRENT
   * class names (.msg-shell / .msg-rail / .msg-filter-strip / .msg-thread-row),
   * not the long-dead .msg-channel-bar / .msg-filter-bar markup. */

  /* ── Page header: drop the desktop-only Split View + Chat Dock buttons ───── */
  #mainContent .msg-page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }
  #mainContent .msg-header-actions {
    width: 100% !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  /* Higher specificity than the .refresh-btn base rule these buttons also carry.
     It was NOT: both toggles ALSO carry .refresh-btn, so this rule (1,2,0) tied
     with `#mainContent .msg-header-actions .refresh-btn { display: inline-flex
     !important }` twelve lines below and lost on source order. The hide has
     been dead since it was written — verified in the browser at 375px, where
     Split View and Chat Dock still rendered and wrapped the toolbar onto a
     second 42px row, costing ~50px of every phone screen. Naming .refresh-btn
     in the selector makes it (1,3,0) and settles it for good. */
  #mainContent .msg-header-actions .refresh-btn.msg-split-toggle,
  #mainContent .msg-header-actions .refresh-btn.msg-dock-toggle { display: none !important; }
  #mainContent .msg-header-actions .btn-primary {
    flex: 1 1 auto !important;
    min-height: 42px !important;
  }
  #mainContent .msg-header-actions .refresh-btn {
    min-height: 42px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── Shell → single column, viewport-fit height, internal scroll kept ────── */
  #mainContent .msg-shell,
  #mainContent .msg-shell.msg-has-detail,
  #mainContent .msg-shell--no-rail,
  #mainContent .msg-shell--no-rail.msg-has-detail,
  #mainContent .msg-shell.msg-rail-collapsed,
  #mainContent .msg-shell.msg-rail-collapsed.msg-has-detail {
    grid-template-columns: 1fr !important;
    height: calc(100dvh - 168px) !important;
    min-height: 360px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  /* Desktop detail column never grids-in on mobile (thread opens full-screen). */
  #mainContent .msg-detail-col,
  #mainContent .msg-shell.msg-has-detail .msg-detail-col { display: none !important; }
  /* Desktop rail collapse/expand affordances are meaningless on mobile. */
  #mainContent .msg-rail-handle,
  #mainContent .msg-rail-collapse-btn { display: none !important; }

  /* ── Team rail → left slide-in drawer ───────────────────────────────────── */
  #mainContent .msg-shell .msg-rail,
  #mainContent .msg-shell.msg-rail-collapsed .msg-rail {
    display: flex !important;
    position: absolute !important;
    top: 0; left: 0; bottom: 0;
    /* Only as wide as its content (longest team name) — not a fixed slab. */
    width: max-content !important;
    min-width: 180px !important;
    max-width: 80% !important;
    z-index: 40 !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease !important;
    box-shadow: 2px 0 22px rgba(0, 0, 0, 0.22) !important;
    border-right: 1px solid var(--border) !important;
    padding-top: 14px !important;
  }
  #mainContent .msg-shell.msg-rail-drawer-open .msg-rail { transform: translateX(0); }
  #mainContent .msg-rail-backdrop {
    display: none;
    position: absolute !important;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 35 !important;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  #mainContent .msg-shell.msg-rail-drawer-open .msg-rail-backdrop { display: block; }
  /* Roomier drawer rows. */
  #mainContent .msg-rail .msg-channel-item { padding: 13px 16px !important; }
  #mainContent .msg-rail .msg-channel-name { font-size: 15px !important; }

  /* ── Mobile channel switcher button (in the channel header) ──────────────── */
  #mainContent .msg-rail-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
  }
  #mainContent .msg-rail-mobile-toggle .msg-rail-mobile-toggle-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
  #mainContent .msg-rail-mobile-toggle svg:last-child { flex-shrink: 0; opacity: 0.55; }

  /* ── Channel header: switcher on top, channel actions wrap below ─────────── */
  #mainContent .msg-channel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }
  /* The channel name lives in the switcher button now; hide the desktop meta
     block — except on the rail-less Warehouse mount, which has no switcher. */
  #mainContent .msg-shell:not(.msg-shell--no-rail) .msg-channel-header-meta { display: none !important; }
  #mainContent .msg-channel-header-actions {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .msg-channel-header-actions .btn { min-height: 44px !important; } /* 2026-09-02 audit: 38px was under the touch floor (same strip as the toggle below) */

  /* ── Filter strip → wraps; status toggle full row; search full width ─────── */
  #mainContent .msg-filter-strip {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 16px !important;
  }
  #mainContent .msg-status-toggle {
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
  }
  #mainContent .msg-status-toggle .toggle-btn {
    flex: 1 1 33% !important;
    min-height: 44px !important; /* 2026-09-01 mobile-audit: 38px was under the touch floor */
    font-size: 13px !important;
  }
  #mainContent .msg-filter-spacer { display: none !important; }
  #mainContent .msg-filter-assignee-wrap { flex: 1 1 auto !important; display: flex !important; }
  #mainContent .msg-filter-tagged-select,
  #mainContent .msg-filter-assignee-select {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: 100% !important;
    min-height: 44px !important; /* 2026-09-01 mobile-audit: 42px was under the touch floor */
    font-size: 16px !important;
  }
  #mainContent .msg-filter-search-wrap { flex: 1 1 100% !important; }
  #mainContent .msg-filter-search-input {
    width: 100% !important;
    min-height: 44px !important; /* 2026-09-01 mobile-audit: 42px was under the touch floor */
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  /* Compose-new-thread box. */
  #mainContent .msg-compose-box { padding: 12px !important; }

  /* ═══ WhatsApp-style merged list (main Messages mount only) ═══════════════════
   * On a phone the main Messages view drops the desktop chrome entirely — page
   * header (title + New/Refresh/Split/Dock), the "Channels ▾" switcher + channel
   * header, and the Open/Closed/All + people + search filter strip — and replaces
   * them with ONE compact Chats/Tasks toggle bar above a single merged list of
   * every team's conversations. The Warehouse mount (`.msg-shell--no-rail`) is a
   * single channel with no teams to merge, so it KEEPS its filter strip; every
   * rule here is gated to `.msg-shell:not(.msg-shell--no-rail)`. `:has()` gates
   * the page header (a preceding sibling of the shell) the same way — already
   * relied on elsewhere in this file. */

  /* Drop the whole page header (title + action buttons) on the main mount. */
  #mainContent:has(.msg-shell:not(.msg-shell--no-rail)) .msg-page-header { display: none !important; }

  /* Drop the channel header (Channels ▾ switcher + per-channel actions), the
     filter strip, and the off-canvas team rail + its backdrop — team switching
     is replaced by the merged list. */
  #mainContent .msg-shell:not(.msg-shell--no-rail) .msg-channel-header,
  #mainContent .msg-shell:not(.msg-shell--no-rail) .msg-filter-strip,
  #mainContent .msg-shell:not(.msg-shell--no-rail) .msg-rail,
  #mainContent .msg-shell:not(.msg-shell--no-rail) .msg-rail-backdrop {
    display: none !important;
  }
  /* Reclaim the page-header's vertical space so the list sits near the top.
     TODO(device) 2026-09-01 mobile-audit: 96px is a hardcoded chrome guess; a
     var-driven `calc(100dvh - var(--header-h) - var(--sa-b))` needs someone to
     actually publish --header-h (nothing sets it today — only inbox-v2.css
     consumes it with its own fallback). Verify real header height on-device
     before switching. */
  #mainContent:has(.msg-shell:not(.msg-shell--no-rail)) .msg-shell {
    height: calc(100dvh - 96px) !important;
  }

  /* The Chats/Tasks toggle bar. */
  #mainContent .msg-shell:not(.msg-shell--no-rail) .msg-mobile-bar.is-active {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  #mainContent .msg-mobile-new {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
  }
  /* Search and compose stay primary; filter/sort open only when requested. */
  #mainContent .msg-mobile-tools-row {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  #mainContent .msg-mobile-search-wrap {
    flex: none;
    min-width: 0;
  }
  #mainContent .msg-mobile-filters > summary {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
  }
  #mainContent .msg-mobile-filters > summary span { display: inline; }
  /* 2026-09-01 mobile-audit: right:-44px looks deliberate — the tools-row grid
     ends in a 44px new-button column, so -44px aligns the popover with the
     screen-side edge of that button. TODO(device): confirm the popover's right
     edge lands on-screen on a real notch phone before "correcting" this. */
  #mainContent .msg-mobile-filter-row {
    display: flex;
    right: -44px;
    width: min(270px, calc(100vw - 16px));
  }
  #mainContent .msg-mobile-search-input {
    min-height: 44px;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #mainContent .msg-mobile-search-input.has-clear { padding-right: 44px; }
  #mainContent .msg-mobile-search-wrap .msg-search-clear-btn {
    right: 0;
    width: 44px;
    height: 44px;
  }
  /* 2026-09-01 mobile-audit: font-size < 16px on a select triggers iOS
     focus-zoom (documented contract at the top of this file); 36px was under
     the 44px touch floor. Padding drops to keep the control visually compact. */
  #mainContent .msg-mobile-type-select,
  #mainContent .msg-mobile-sort-select {
    min-height: 44px;
    font-size: 16px;
    padding: 3px 8px;
  }

  /* Conversation overview: readable names/previews and comfortable row targets. */
  #mainContent .msg-thread-list { padding: 0 0 10px !important; }
  #mainContent .msg-chat-row {
    box-sizing: border-box !important;
    gap: 11px !important;
    padding: 10px 12px !important;
    min-height: 64px !important;
  }
  #mainContent .msg-chat-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
  #mainContent .msg-chat-row-name { font-size: 15.5px !important; line-height: 1.25 !important; }
  #mainContent .msg-chat-row-title { gap: 5px !important; }
  #mainContent .msg-chat-row-kind { padding: 0 5px !important; font-size: 8.5px !important; }
  #mainContent .msg-chat-row-time { font-size: 11px !important; }
  #mainContent .msg-chat-row-preview {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-top: 1px !important;
  }
  #mainContent .msg-chat-row-unread {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    line-height: 18px !important;
  }
  #mainContent .msg-thread-row {
    box-sizing: border-box !important;
    padding: 7px 10px !important;
    gap: 7px !important;
    min-height: 48px !important;
  }
  #mainContent .msg-thread-row-title,
  #mainContent .msg-thread-row:hover .msg-thread-row-title {
    -webkit-line-clamp: 1 !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
  #mainContent .msg-thread-row-people,
  #mainContent .msg-thread-row:hover .msg-thread-row-people { display: none !important; }
  #mainContent .msg-thread-row-body { gap: 2px !important; }
  #mainContent .msg-thread-row-meta { font-size: 10.5px !important; gap: 5px !important; }
  #mainContent .msg-thread-row-preview { font-size: 11.5px !important; line-height: 1.2 !important; }
  #mainContent .msg-thread-row-time { font-size: 10px !important; margin-top: 1px !important; }
  #mainContent .msg-thread-readtoggle { padding: 4px !important; }
  #mainContent .msg-thread-row-taskpills { gap: 3px !important; margin: 2px 0 0 !important; }
  #mainContent .msg-tpill { font-size: 9px !important; padding: 1px 6px !important; }

  /* ── Open thread (full-screen detail) ───────────────────────────────────── */
  body:has(#msgMobileDetail) { overflow: hidden !important; }
  /* An open conversation is pinned to the VISUAL viewport, not laid out in the
     page flow (2026-07-30). As a flow child its height was derived from its own
     rect, so anything scrolling behind it resized it and the composer drifted
     upward — Cole: "its so easy to scroll up and have the typing bar go way up.
     it should always stick as low as possible, with the convo right over it."
     Fixed + JS-synced top/height means the box always covers exactly the
     unobscured area, so the composer (its last child) is always at the bottom
     of what you can see, keyboard up or down. */
  #mainContent .msg-mobile-detail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--msg-mobile-detail-top, 0px) !important;
    height: var(--msg-mobile-detail-height, 100dvh) !important;
    min-height: 0 !important;
    /* Above the app header (z 30); below the nav drawer (z 100) so the sidebar
       can still open over a conversation. */
    z-index: 60 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    /* 2026-09-01 mobile-audit: notch/landscape safe areas — additive, 0 on
       flat-edged screens. */
    padding-left: max(0px, var(--sa-l, 0px)) !important;
    padding-right: max(0px, var(--sa-r, 0px)) !important;
    /* The global page-transition (`.main > *` → `viewFadeIn`) animates a
       translateY, and a transform on a viewport-pinned box offsets the whole
       conversation AND makes it a containing block for fixed descendants —
       measured 5px of the composer hanging below the fold. The overlay does its
       own opacity fade (css/messages.css), so it opts out of the page one. */
    animation: none !important;
  }
  /* Nothing behind the overlay may scroll — a stray page scroll is what used to
     move the composer, and it also leaks rubber-band under the keyboard. */
  body:has(#msgMobileDetail) #mainContent,
  body:has(#msgMobileDetail) .main {
    overflow: hidden !important;
    touch-action: none !important;
  }
  #mainContent .msg-detail-shell {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 8px !important;
  }
  #mainContent .msg-detail-topbar {
    min-height: 52px !important;
    padding: 4px 14px !important; /* 2026-09-01 mobile-audit: unified 14px phone gutter */
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  #mainContent .msg-detail-topbar > div { gap: 2px !important; flex: 0 0 auto !important; }
  /* The title is the ONE topbar child that may shrink. With nowrap above and
     flex:0 0 auto on every div, a long name + presence line pushed the copy,
     auto-translate, search and details buttons clean off the right edge on
     every phone size (2026-09-07 WebKit audit: title right edge at x=494 on a
     390px screen; buttons at 502-554). The inner spans already ellipsize; they
     just never got a width to ellipsize into. */
  #mainContent .msg-detail-topbar > .msg-chat-detail-title { flex: 1 1 0 !important; min-width: 0 !important; }
  /* The four-avatar participant stack is flex:none; in the ~80px the phone
     leaves the title it took the width and the name painted underneath it.
     Members are one tap away on the details button — the name is the header. */
  #mainContent .msg-detail-topbar .msg-chat-participants-slot { display: none !important; }
  /* Five 44px controls + "Chats" leave the title 81px on a 390px phone — the
     name ellipsized to "Coolb…". The /ctx copy button pastes a session ref
     into Claude; nobody does that from a phone. Off here, and the gap tightens. */
  #mainContent .msg-detail-topbar .msg-ctx-copy-btn { display: none !important; }
  #mainContent .msg-detail-topbar { gap: 6px !important; }
  #mainContent .msg-detail-back {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 12px !important;
    padding: 7px 8px !important;
    margin-left: -4px !important;
  }
  #mainContent .msg-detail-topbar > div { gap: 3px !important; }
  #mainContent .msg-detail-back { min-height: 44px !important; min-width: 44px !important; font-size: 12px !important; padding: 7px 9px !important; }
  #mainContent .msg-detail-topbar [data-action="msg-open-info"],
  #mainContent .msg-detail-topbar [data-action="msg-mark-unread"],
  #mainContent .msg-detail-topbar [data-action="msg-toggle-status"],
  #mainContent .msg-detail-topbar [data-action="msg-set-task-status"] {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    font-size: 0 !important;
    border-radius: 10px !important;
  }
  #mainContent .msg-detail-title-edit-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .msg-chat-detail-title { gap: 6px !important; font-size: 13px !important; }
  #mainContent .msg-chat-detail-copy small { font-size: 9px !important; }
  #mainContent .msg-chat-detail-title .msg-chat-avatar,
  #mainContent .msg-chat-detail-title .msg-reply-avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }
  #mainContent .msg-detail-header { padding: 10px 14px 9px !important; } /* 2026-09-01 mobile-audit: unified 14px phone gutter */
  #mainContent .msg-detail-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  #mainContent .msg-detail-meta { font-size: 11.5px !important; gap: 6px !important; }
  #mainContent .msg-task-details { margin-top: 8px !important; border-radius: 11px !important; }
  #mainContent .msg-task-details-summary {
    min-height: 64px !important;
    padding: 8px 10px !important;
    gap: 7px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
  }
  #mainContent .msg-task-details-heading {
    grid-column: 1 / 3 !important;
    font-size: 12px !important;
  }
  #mainContent .msg-task-summary-pills {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    gap: 4px !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  #mainContent .msg-task-details-chevron {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  #mainContent .msg-task-summary-pills .msg-tpill { font-size: 9.5px !important; padding: 2px 7px !important; }
  #mainContent .msg-task-summary-owner,
  #mainContent .msg-task-summary-due { font-size: 10.5px !important; }
  #mainContent .msg-detail-task {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  #mainContent .msg-task-details:not([open]) > .msg-detail-task { display: none !important; }
  #mainContent .msg-detail-task-field { font-size: 11px !important; gap: 4px !important; }
  #mainContent .msg-detail-task-field:last-child { grid-column: 1 / -1 !important; }
  #mainContent .msg-task-select {
    min-height: 44px !important;
    font-size: 16px !important; /* 2026-09-01 mobile-audit: <16px selects trigger iOS focus-zoom */
    padding: 6px 28px 6px 9px !important;
    border-radius: 9px !important;
  }
  #mainContent .msg-task-context { gap: 4px !important; padding-top: 7px !important; }
  #mainContent .msg-task-supporting { display: block !important; }
  #mainContent .msg-task-context-chip { min-height: 27px !important; padding: 3px 7px !important; }
  #mainContent .msg-customer-link-btn { min-height: 44px !important; }
  #mainContent .msg-customer-card { padding: 8px 9px !important; }
  /* Neutralize the legacy catch-all `[class*="-card"]` mobile padding on the
     card's internal elements; without this, head/person/icon each receive
     another 10px and a compact customer reference becomes a giant panel. */
  #mainContent .msg-customer-card-head,
  #mainContent .msg-customer-card-person,
  #mainContent .msg-customer-card-icon { padding: 0 !important; }
  #mainContent .msg-customer-inbox-open {
    min-height: 44px !important;
    padding: 7px 5px !important;
  }
  /* WhatsApp-style bubbles on phones — mirror the desktop bubble redesign
     (css/messages.css), overriding the older full-width padding here since
     these rules carry !important. Alignment + own-message tint come from the
     2-class .msg-replies-container rules in messages.css. */
  #mainContent .msg-replies-container {
    gap: 2px !important;
    padding: 7px 8px 10px !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-padding-bottom: 12px !important;
    background: var(--msg-paper) !important;
  }
  /* The weave moved off the scroller onto `.msg-detail-convo` (see the note in
     css/messages.css) so it rasterises once instead of on every scroll tick.
     This block has flattened it on phones since it was written, and that intent
     has to follow it to its new home — otherwise the scroller goes transparent
     here and the texture shows through from the parent, silently undoing the
     flattening. */
  #mainContent .msg-detail-convo {
    background: var(--msg-paper) !important;
  }
  /* 2026-09-01 mobile-audit: max-width moved to the density block at the end
     of this file (the later block already overrode it; one owner now). */
  #mainContent .msg-reply {
    padding: 6px 9px 5px !important;
    width: fit-content !important;
  }
  /* …except while it is being EDITED. `width: fit-content` + a `width: 100%`
     textarea is a circular percentage, so the box falls back to the textarea's
     ~20-column intrinsic default: measured at 375px, a 269-character message
     was editing inside a 216px-wide box and still clipping at the height cap.
     The desktop sheet fixes this with `.msg-reply.is-editing { width: 100% }`;
     that rule loses to the `!important` above, so the phone needs its own. */
  #mainContent .msg-reply.is-editing {
    width: 100% !important;
    max-width: 96% !important;
  }
  /* PR A: the per-message header row is gone from the markup. What's left is the
     sender name (incoming, first-of-run) and the time/checkmark stamp. */
  #mainContent .msg-reply-author { font-size: 12px !important; margin-bottom: 2px !important; }
  #mainContent .msg-reply-content {
    font-size: 14px !important;
    line-height: 1.45 !important; /* 2026-09-01 mega-audit polish: one bubble line-height */
    overflow-wrap: anywhere !important;
    padding-left: 0 !important;
  }
  #mainContent .msg-reply-avatar { width: 18px !important; height: 18px !important; font-size: 8.5px !important; }
  /* Per-message initials disc (2026-07-30). A phone can't spare the desktop
     gutter, so the disc shrinks and tucks in tight — but it stays on EVERY
     message, which is the point of it. The container's own padding is what
     reserves the space; the disc hangs into it.
     2026-09-01 mobile-audit: the gutter/offset/max-width geometry is owned by
     the density block at the end of this file (it re-declared all of it with
     equal specificity later in source order, so the copies here were dead).
     Only the disc's size stays here. */
  #mainContent .msg-replies-container .msg-reply > .msg-reply-avatar {
    width: 22px !important; height: 22px !important; font-size: 9px !important;
  }
  /* ── The timestamp row, tightened and pushed flush right (Cole 2026-08-27) ──
     "the time and check marks should have less space above them to make each
     line more compact ... And like no space below them in the bubble. And they
     should go to the far right of the message."

     Measured on a 375px viewport before this: 5px of dead space BELOW the
     stamp, and the stamp sitting 29px in from the bubble's right edge.

     The 29px is the interesting one. `.msg-reply { padding-right: 30px }` below
     reserves the corner for the ⋯ glyph — and the note there says it is "only
     ever paid by messages whose first line is actually wide enough to reach
     it". That is not how padding works: it insets the WHOLE box, so the meta
     row on the LAST line pays it too, and the timestamp stops short of an edge
     with nothing to avoid. The meta escapes the reservation with a negative
     right margin (-20px against the 30px reserve = the bubble's normal 10px
     inset) rather than the reservation being removed, because the ⋯ genuinely
     does need the corner on the first line.

     -6px bottom cancels the bubble's 6px padding-bottom exactly: "no space
     below them in the bubble". */
  #mainContent .msg-reply-meta {
    gap: 3px !important;
    margin-top: -3px !important;
    margin-right: -20px !important;
    margin-bottom: -6px !important;
  }
  /* …but NOT when the thing above it is a photo. Cole 2026-09-02: "the time is
     overlapping with the image for the message that we received above."
     Measured at 375px: the timestamp's top sat 3px INSIDE the image's bottom
     edge — exactly the negative margin above.

     That -3px is right for TEXT, which carries line-height slack the stamp can
     sit in without touching a glyph. A replaced element has no slack: every
     pixel of its box is picture, so the same margin is a collision. The
     attachments block is the last thing in the bubble whenever a message is a
     photo with no caption, which is the case in the screenshot. */
  #mainContent .msg-reply-attachments + .msg-reply-meta {
    margin-top: 3px !important;
  }
  #mainContent .msg-reply-time { font-size: 10.5px !important; }
  /* Cole 2026-09-07: "too much space taken up for messages I send, below the
     message to the time it was sent and below that. Make it all super tight."
     Measured: the meta row was 44px because the read-receipt tick carries
     role=button and the generic 44px thumb rule above sized it as a control;
     the time text itself is 12px. The receipt keeps its tap area through a
     pseudo halo instead of layout height. */
  #mainContent .msg-reply-meta,
  #mainContent .msg-reply-status,
  #mainContent .msg-reply-status .msg-receipt {
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
  }
  #mainContent .msg-reply-status .msg-receipt { position: relative !important; }
  #mainContent .msg-reply-status .msg-receipt::before {
    /* Upward and sideways only: a halo below the tick hung 10px past the
       bubble and caught taps meant for the next row. */
    content: ''; position: absolute; top: -12px; bottom: -1px; left: -10px; right: -6px;
  }
  /* The ⋯ moved to the bubble's TOP-RIGHT CORNER (2026-08-27). Cole: "the three
     dots below stuff take up so much space, especially if we do a thumbs-up
     below a message ... The three dots shouldn't be below a message. It should
     be next to a message. Maybe it should go into the top-right corner of every
     message."

     It sat on the meta row from 2026-08-06 to here, and that placement was a
     real fix, not an accident: the previous top-right version used an
     absolutely-positioned 44px thumb target CENTRED on a control 2px from the
     bubble's top edge, so ~7px of it reached up into the message above and you
     opened the wrong bubble's menu. The corner is fine; a target that overflows
     its own bubble is not. So this version overflows nothing — the target is
     44x30 anchored to `top:0; right:0`, growing DOWN and LEFT inside the bubble
     it belongs to. Bubbles tile vertically and never horizontally, so the
     leftward growth is always safe and the vertical growth is bounded by the
     bubble's own height.

     Out of flow, the glyph costs zero height on every message. On the meta row
     it was charged 22px to every bubble on the phone. */
  #mainContent .msg-replies-container .msg-reply-actions {
    position: absolute !important;
    float: none !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    /* 2026-09-01 mobile-audit: folded in from the (deleted) duplicate in the
       density block — the global 44px button floor must not size the wrapper. */
    min-width: 0 !important;
    min-height: 0 !important;
    z-index: 2 !important;
  }
  /* Reserve the corner so a long first line does not run under the glyph. This
     is the one cost of the move: ~26px of horizontal on every bubble, bought
     with ~22px of vertical on every bubble. Vertical is the scarce axis on a
     phone, and unlike the height this is only ever paid by messages whose first
     line is actually wide enough to reach it. */
  #mainContent .msg-replies-container .msg-reply {
    min-height: 44px !important;
    padding-right: 30px !important;
  }
  #mainContent .msg-activity-line {
    align-items: flex-start !important;
    gap: 7px !important;
    margin: 6px 8px !important;
    padding: 8px 10px !important;
    border-left: 0 !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--text-dim) 7%, transparent) !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  #mainContent .msg-activity-line > svg { margin-top: 2px !important; }
  #mainContent .msg-activity-line-time { font-size: 10.5px !important; }
  /* Project/task updates are timeline metadata, not chat bubbles. The global
     phone `button { min-height:44px }` made task rows twice as tall as the
     identical project <a> row and visually promoted them to message weight.
     Give both element types one explicit compact mobile contract. */
  /* Cole 2026-09-07: "too much space between activity feed lines" — these are
     <button>s, so the generic 44px thumb rule (and this block's own 32px)
     made every one-line feed entry a 34-46px row. Super tight: the row is its
     one line of text plus 2px. */
  #mainContent .msg-task-activity-line {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    line-height: 1.3 !important;
  }
  /* Cole 2026-09-07: "make activity feed updates go all the way across the
     text page so that we can see more content". The scroller keeps a 26px
     avatar gutter each side for bubbles; a feed line has no avatar, so it
     reclaims the gutters (4px breathing room stays). */
  #mainContent .msg-replies-container .msg-task-activity-line--stream {
    width: calc(100% + 44px) !important;
    margin-left: -22px !important;
    margin-right: -22px !important;
    max-width: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 2px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-dim) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  /* A line that can be replied to sits in a `.msg-activity-row` (mig 1302).
     The full-bleed geometry above belongs to the ROW then — left on the line,
     a `calc(100% + 44px)` child inside a row pushes the reply button off the
     right edge of the phone. */
  #mainContent .msg-replies-container .msg-activity-row--stream {
    width: calc(100% + 44px) !important;
    margin-left: -22px !important;
    margin-right: -22px !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  #mainContent .msg-replies-container .msg-activity-row--stream > .msg-task-activity-line--stream {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 auto !important;
  }
  #mainContent .msg-replies-container .msg-task-activity-line--stream .msg-task-activity-line-text strong {
    color: var(--text-muted) !important;
  }
  /* The stream already gives temporal order. A full "Aug 13, 6:23 PM" stamp
     consumed a quarter of a phone row and reduced the named work item to two
     letters; keep timestamps in the expanded Updates rail, not inline chat. */
  #mainContent .msg-replies-container .msg-task-activity-line--stream .msg-task-activity-line-time {
    display: none !important;
  }
  #mainContent .msg-replies-container .msg-task-activity-line--stream:not(.msg-task-activity-line--static) .msg-task-activity-line-text em {
    color: var(--accent-strong, var(--accent)) !important;
  }
  /* Day separator + unread rule — same shapes, phone-sized. */
  /* 2026-09-01 mobile-audit: shared rhythm for both rules; the span's old
     2px/10px padding dated from the pill era — the pill is gone (messages.css
     sets background transparent, padding 0 4px). */
  #mainContent .msg-day-sep { margin: 8px 0 6px !important; }
  #mainContent .msg-day-sep span { font-size: 10.5px !important; padding: 0 6px !important; }
  #mainContent .msg-unread-rule { font-size: 10.5px !important; margin: 8px 0 6px !important; gap: 8px !important; }
  /* Quoted message inside a bubble + the "replying to" strip above the composer
     (mig 836). Swipe-to-reply is the primary way in on touch — the hover tools
     don't exist here. */
  #mainContent .msg-quote { font-size: 11.5px !important; padding: 3px 7px !important; margin-bottom: 3px !important; }
  #mainContent .msg-replying-to { font-size: 11.5px !important; padding: 5px 7px 5px 8px !important; }
  #mainContent .msg-reply-target-bar { padding-bottom: 4px !important; }
  /* Long-press menu — bigger rows on a phone, and it lives on document.body so
     it is NOT under #mainContent (hence the unprefixed selector). */
  .msg-bubble-menu { min-width: 200px !important; }
  .msg-bubble-menu-item { padding: 11px 12px !important; font-size: 14.5px !important; }
  /* 2026-09-01 mobile-audit: the right/bottom overrides here pinned the disc
     to a hardcoded 74px — off the composer whenever the reply-target bar /
     attach staging grew it. The desktop rule (css/messages.css) already
     anchors to the JS-published --msg-composer-h and max(16px, --sa-r); let it
     apply on phones too. Only the 44px touch size stays. */
  #mainContent .msg-jump-latest {
    min-height: 0 !important;   /* the generic 44px thumb floor; a 145px-wide pill needs no height for it */
    height: 36px !important;
    padding: 0 14px 0 12px !important;
    font-size: 13px !important;
  }
  #mainContent .msg-reply-footer { gap: 5px !important; margin-top: 3px !important; }
  #mainContent .msg-reactions { gap: 3px !important; margin-top: 2px !important; }
  #mainContent .msg-reaction-chip { font-size: 10px !important; padding: 1px 5px !important; }
  /* Phone bubbles show only reactions that actually exist. Translate and the
     add-reaction affordance live in the standard long-press message menu, so
     an unused action row no longer makes every short message twice as tall. */
  #mainContent .msg-translate-one,
  #mainContent .msg-reaction-add,
  #mainContent .msg-reply-footer:not(:has(.msg-reaction-chip)) {
    display: none !important;
  }
  #mainContent .msg-translated-badge { font-size: 9.5px !important; padding: 1px 6px !important; margin-top: 3px !important; }
  #mainContent .msg-typing-indicator { padding: 4px 10px 0 !important; font-size: 10.5px !important; }

  /* Reply composer: sticky bottom, iOS-safe, 16px input (no zoom), compact send. */
  #mainContent .msg-reply-composer {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    background: var(--surface) !important;
    /* Curved-display gutter. Modern phone screens are rounded rectangles with a
       ~55px corner radius, and the composer is the one row that lives in that
       arc. Cole, 2026-08-27: "because the edges of my iPhone screen are curved,
       it's cutting off the corners of the message and the send button."
       Geometry, not taste: a control sitting h px above the bottom edge is
       clipped unless it is inset R - sqrt(R^2 - (R-h)^2) horizontally. At the
       old h=9px that is ~25px of inset; lifting to h=18px drops the required
       inset to ~14px, which is far cheaper in screen than 25px of side margin.
       So the composer buys 9px of bottom clearance and 15px of side gutter and
       clears the arc on both axes with room to spare.
       The keyboard-up (--compact) rule below deliberately drops both back to
       near-zero: when the keyboard is raised it covers the corners entirely,
       so there is no arc left to clear. */
    /* 2026-09-01 mobile-audit: side safe-areas (landscape notch) can exceed
       the 15px arc gutter; take whichever is larger. 0px vars on flat screens
       leave this exactly 15px. */
    --msg-corner-gutter: max(15px, var(--sa-l, 0px), var(--sa-r, 0px));
    padding: 4px var(--msg-corner-gutter) !important;
    /* The fixed conversation already follows visualViewport. Cap the home-area
       allowance instead of adding the full iPhone inset a second time. */
    padding-bottom: calc(15px + min(6px, var(--msg-mobile-safe-bottom, env(safe-area-inset-bottom, 0px)))) !important;
    border-top: 0 !important;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.06) !important;
    z-index: 3 !important;
  }
  /* Multiple staged files scroll sideways in one compact tray instead of
     wrapping upward and consuming the conversation. */
  /* The tray's shape (flex row, gap, overflow-x) now comes from css/messages.css
     for every width — this block only carries what is genuinely touch-specific:
     scroll snapping, momentum scrolling, and a larger visible remove disc. */
  #mainContent #msgAttachStaging {
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #mainContent #msgAttachStaging[style*="display:none"],
  #mainContent #msgAttachStaging[style*="display: none"] { display: none !important; }
  #mainContent #msgAttachStaging .msg-attach-chip { scroll-snap-align: start; }
  /* The global `button { min-width/height: 44px }` touch floor turned this into
     a 44px disc that covered the very attachment it belongs to — Cole
     2026-07-30: "it was also weird attaching a pic and other stuff." The VISIBLE
     disc stays small; the TOUCH TARGET is 44px via the transparent
     pseudo-element below. Both requirements met, neither traded away.
     `top`/`right` are deliberately NOT overridden here: the shared rule keeps
     the control inside the chip's corner, and pulling it back outside is what
     let the tray's own horizontal scroll clip it. */
  #mainContent #msgAttachStaging .msg-attach-remove {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    line-height: 20px !important;
    font-size: 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent #msgAttachStaging .msg-attach-remove::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 44px !important;
    height: 44px !important;
    transform: translate(-50%, -50%) !important;
  }
  #mainContent .msg-reply-retry {
    min-height: 44px !important;
    padding: 9px 12px !important;
  }
  /* ONE-ROW editor (Cole 2026-08-12, phone screenshot: "The messages box
     typing could be a lot smaller when we haven't exceeded more than one row.
     The send button should be on the same line as the messages box"). The
     input and the tool icons share a single row — WhatsApp geometry — instead
     of stacking a 42px input over a 44px tool row. Icons are 36px VISIBLE
     with a 44px transparent hit area (same pattern as .msg-attach-remove);
     while typing, the secondary icons collapse (`.msg-composer--typing`,
     toggled by _msgSyncReplySendState) so the text keeps the width. The
     textarea still auto-grows to multi-line; icons stay bottom-anchored. */
  #mainContent .msg-reply-composer-inner {
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 0 !important;
    padding: 3px 4px !important;
    border-radius: 20px !important;
  }
  #mainContent .msg-reply-composer-inner > textarea { order: 1; flex: 1 1 auto; min-width: 0; }
  #mainContent .msg-composer-actions {
    order: 2;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    gap: 0 !important;
  }
  #mainContent .msg-reply-composer .msg-format-bar {
    flex: 0 0 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
  }
  #mainContent .msg-fmt-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 12px !important;
    border: none !important;
    border-radius: 10px !important;
  }
  /* While the message has text: keep the attach clip, fold the rest. */
  #mainContent .msg-composer--typing .msg-format-bar,
  #mainContent .msg-composer--typing .msg-camera-btn,
  #mainContent .msg-composer--typing .msg-emoji-btn,
  #mainContent .msg-composer--typing .msg-voice-btn {
    display: none !important;
  }
  #mainContent .msg-fmt-toggle { position: relative; }
  #mainContent .msg-format-bar:not(.is-open) .msg-fmt-toggle::after {
    content: "";
    position: absolute;
    inset: -10px -8px;
  }
  #mainContent .msg-format-bar .msg-fmt-btn { display: none !important; }
  #mainContent .msg-reply-composer .msg-format-bar.is-open {
    position: absolute !important;
    left: 6px !important;
    right: 6px !important;
    bottom: calc(100% + 6px) !important;
    z-index: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 5px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
  }
  #mainContent .msg-format-bar.is-open .msg-fmt-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 5px 7px !important;
  }
  #mainContent .msg-composer-media-actions { flex: 0 0 auto !important; gap: 0 !important; }
  /* 36px visible discs, 44px touch targets via the transparent pseudo-element
     (same trade as .msg-attach-remove: the touch floor without icon sprawl). */
  #mainContent .msg-attach-btn {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
  }
  #mainContent .msg-attach-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  #mainContent #msgReplyInput {
    font-size: 16px !important;
    min-height: 36px !important;
    max-height: 120px !important;
    padding: 7px 6px 6px !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }
  #mainContent #msgReplySendBtn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    font-size: 12px !important;
    border-radius: 50% !important;
  }
  #mainContent #msgReplySendBtn:disabled {
    opacity: 0.36 !important;
  }
  .msg-camera-close {
    width: 44px !important;
    height: 44px !important;
    top: -20px !important;
    right: -10px !important;
  }
  /* Keyboard focus mode. A phone keyboard can cut the usable viewport roughly
     in half; keeping the full task card above the conversation then leaves no
     messages visible. While Reply is focused, retain a one-line title but
     temporarily fold metadata/task/customer context and secondary top actions.
     Blur restores the complete header without changing any saved/open state. */
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-topbar {
    min-height: 44px !important;
    padding-block: 0 !important;
  }
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-topbar [data-action="msg-open-info"],
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-topbar [data-action="msg-mark-unread"],
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-topbar [data-action="msg-toggle-status"],
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-topbar [data-action="msg-set-task-status"] {
    display: none !important;
  }
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-header {
    padding: 6px 12px !important;
  }
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-title-row {
    margin-bottom: 0 !important;
  }
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-title-edit-btn,
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-detail-meta,
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-task-details,
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-task-context,
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-customer-link,
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-day-sep,
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-jump-latest {
    display: none !important;
  }
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) .msg-reply-composer-inner {
    padding-block: 3px !important;
  }
  #mainContent .msg-detail-shell:has(#msgReplyInput:focus) #msgReplyInput {
    min-height: 36px !important;
    padding-block: 6px 3px !important;
  }
  /* Keyboard up: the software keyboard covers the home-indicator area, so the
     safe-area inset below the composer is a dead ~34px band between the send
     row and the keyboard (the empty strip Cole circled, 2026-08-12; reported
     again 2026-08-13, still too much: "compact this a lot ... I can even see
     behind that messages page a bit"). Drop every axis of slack while
     compact, not just the safe-area padding — the top padding and the row
     gap were still full-size, so the composer stayed nearly as tall as at
     rest even with the keyboard covering most of the screen. Comes back the
     moment the keyboard closes.*/
  #mainContent .msg-mobile-detail--compact .msg-reply-composer {
    /* Keyboard up: the keyboard itself covers the curved corners, so the
       corner gutter and the bottom lift both go away. */
    padding: 2px 6px !important;
  }
  #mainContent .msg-mobile-detail--compact .msg-reply-composer-inner {
    padding: 2px 4px !important;
  }
  #mainContent .msg-mobile-detail--compact #msgReplyInput {
    min-height: 30px !important;
    padding: 5px 6px 4px !important;
  }
  /* Jarvis and the page-level tab-info control are fixed to the visual viewport.
     iOS moves them above its keyboard, which used to obscure Reply. Messages
     already has its own thread-info control, so neither global floater belongs
     over an open conversation on a phone. */
  body:has(#mainContent .msg-detail-shell) .jarvis-assistant-btn,
  body:has(#mainContent .msg-detail-shell) .jarvis-assistant-panel,
  body:has(#mainContent .msg-detail-shell) #tabInfoBtn,
  body:has(#mainContent .msg-detail-shell) #tabInfoPop {
    display: none !important;
  }
  /* Mention dropdown — keep within viewport */
  #mainContent .msg-mention-dropdown {
    max-height: 220px !important;
    max-width: calc(100vw - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Final conversation finish pass: retain the compact mobile information
     architecture while giving cards, bubbles, and composer a calmer premium
     surface treatment. */
  #mainContent .msg-detail-topbar {
    background: color-mix(in srgb, var(--surface) 92%, var(--bg)) !important;
    box-shadow: 0 1px 0 var(--border) !important;
  }
  #mainContent .msg-detail-topbar .btn {
    background: var(--surface) !important;
    box-shadow: 0 1px 3px rgba(22, 19, 15, 0.045) !important;
  }
  #mainContent .msg-detail-topbar .msg-thread-status-btn--close {
    background: color-mix(in srgb, var(--green-dim) 74%, var(--surface)) !important;
  }
  #mainContent .msg-detail-topbar .msg-thread-status-btn--reopen {
    background: color-mix(in srgb, var(--blue-dim) 74%, var(--surface)) !important;
  }
  /* ── The header slides away on a long read (Cole 2026-08-27) ─────────────
     "when we do a long scroll on the screen top to bottom on a convo, it pushes
     the convo bar away like other apps to on a long swipe up."

     TRANSFORM, not height/display. Animating the height would reflow the
     conversation under the reader's thumb — which is the jumpiness this pass is
     removing, not adding to. A transform is composited: the stream never
     relayouts, so nothing under the finger moves.

     The header keeps its space in the flow while translated (it is only moved,
     not removed) so the message list does not lurch upward to fill the gap and
     then lurch back. The gain is the ~60px of GLASS it stops covering.

     `will-change` is deliberately absent: this element is promoted only while
     the class is on, and a permanent layer on a phone costs memory for a
     transform that runs a few times a session. */
  #mainContent .msg-detail-header {
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  #mainContent .msg-detail--head-away .msg-detail-header {
    transform: translateY(-100%) !important;
    pointer-events: none !important;
  }
  /* The stream reclaims the vacated strip, in the same motion and duration, so
     the two read as one gesture rather than as a header leaving and a list
     jumping. */
  #mainContent .msg-detail--head-away .msg-replies-container {
    transform: translateY(calc(-1 * var(--msg-head-away-shift, 56px))) !important;
    /* 2026-09-01 mobile-audit: a bare translate moves the scroller's PAINTED
       box up but not its layout box, so its bottom edge rises with it and the
       newest messages disappear behind the composer while the header is away.
       The negative margin grows the layout box by the same amount the
       transform removes — one reflow at toggle time, not per frame. */
    margin-bottom: calc(-1 * var(--msg-head-away-shift, 56px)) !important;
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    #mainContent .msg-detail-header,
    #mainContent .msg-detail--head-away .msg-replies-container,
    #mainContent .msg-rail {   /* the rail drawer slid regardless (2026-09-02) */
      transition: none !important;
    }
  }
  #mainContent .msg-detail-header {
    background:
      linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 84%, var(--bg))) !important;
  }
  /* 2026-09-01 mobile-audit: the 32px width/height here always lost to the
     min-width/min-height 44px declared earlier in this media block — the
     control rendered 44px. State the truth instead of a dead override. */
  #mainContent .msg-detail-title-edit-btn {
    flex-basis: 44px !important;
  }
  #mainContent .msg-task-details {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
    box-shadow: 0 2px 8px rgba(22, 19, 15, 0.035) !important;
  }
  /* Treat the open task editor as a focused phone state. The secondary
     order/customer context returns unchanged as soon as it collapses. */
  #mainContent .msg-detail-header:has(.msg-task-details[open]) .msg-task-supporting {
    display: none !important;
  }
  #mainContent .msg-detail-shell:has(.msg-task-details[open]) .msg-day-sep {
    display: none !important;
  }
  #mainContent .msg-task-context-card {
    height: auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #mainContent .msg-task-context-title { display: none !important; }
  #mainContent .msg-task-context {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    padding-top: 7px !important;
  }
  #mainContent .msg-task-context::-webkit-scrollbar { display: none !important; }
  #mainContent .msg-task-context:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: 9px !important;
  }
  #mainContent .msg-task-context-chip {
    flex: 0 0 auto !important;
    max-width: 210px !important;
    min-height: 29px !important;
    padding: 3px 7px !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--surface) 88%, var(--bg)) !important;
  }
  #mainContent .msg-customer-card {
    height: auto !important;
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border)) !important;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent)), var(--bg)) !important;
    box-shadow: 0 2px 8px rgba(22, 19, 15, 0.035) !important;
  }
  #mainContent .msg-replies-container {
    padding: 8px 30px 11px !important;   /* 30px sides = gutter for the initials disc */
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
  }
  #mainContent .msg-replies-container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  #mainContent .msg-reply {
    padding: 7px 10px 6px !important;
    max-width: 88% !important;
    border-color: color-mix(in srgb, var(--border) 64%, transparent) !important;
    border-radius: 3px 13px 13px 13px !important;
    box-shadow: 0 1px 2px rgba(22, 19, 15, 0.07), 0 4px 12px rgba(22, 19, 15, 0.025) !important;
  }
  #mainContent .msg-reply-own {
    border-radius: 13px 3px 13px 13px !important;
    /* A solid paint layer stays crisp while WebKit momentum-scrolls the fixed
       conversation. The former gradient was re-rasterized independently in
       the right tail and showed up as a pale green drag at the viewport edge. */
    background: var(--msg-bub-out) !important;
    box-shadow: 0 1px 2px rgba(22, 19, 15, 0.07) !important;
  }
  #mainContent .msg-reply-own.msg-reply-pinned {
    /* Matches the opaque desktop value (css/messages.css). The old
       `--accent-dim` here was a 10%-alpha wash: the paper texture read through
       a pinned message, and the 3px where the tail overlaps the bubble was
       painted twice, showing as a darker sliver down the right edge. */
    background: color-mix(in srgb, var(--accent) 13%, var(--msg-bub-out)) !important;
  }
  #mainContent .msg-reply.msg-reply--cont { border-radius: 13px !important; }
  #mainContent .msg-activity-line {
    width: auto !important;
    max-width: none !important;
    margin: 6px 7px !important;
    background: color-mix(in srgb, var(--surface) 52%, transparent) !important;
  }
  #mainContent .msg-reply-composer {
    background: color-mix(in srgb, var(--surface) 94%, var(--bg)) !important;
    box-shadow: 0 -8px 22px rgba(22, 19, 15, 0.035) !important;
  }
  #mainContent .msg-reply-composer-inner {
    box-shadow: 0 1px 2px rgba(22, 19, 15, 0.05), 0 5px 16px rgba(22, 19, 15, 0.035) !important;
  }
  #mainContent #msgReplySendBtn:disabled {
    opacity: 1 !important;
    color: var(--text-muted) !important;
    background: var(--surface-3) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
  }
  .msg-bubble-menu {
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(22, 19, 15, 0.2), 0 2px 8px rgba(22, 19, 15, 0.08) !important;
  }
  .msg-bubble-menu-item { min-height: 44px !important; border-radius: 11px !important; }

  /* ═══ 7. Support Analytics Hub — charts, SLA grids, forecasts ═══ */
  /* Forecast hero numeric block — keep big-num readable, stack hero+volume */
  #mainContent .support-forecast-hero {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  #mainContent .support-forecast-volume {
    flex: 1 1 100% !important;
    text-align: center !important;
  }
  #mainContent .support-forecast-big-num {
    font-size: 36px !important;
    line-height: 1 !important;
  }
  #mainContent .support-forecast-big-label {
    font-size: 11px !important;
  }
  #mainContent .support-forecast-meta {
    font-size: 11.5px !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }
  /* Per-category bar rows — label + bar + count on phone-friendly rhythm */
  #mainContent .support-forecast-cats {
    gap: 8px !important;
  }
  #mainContent .support-forecast-cat-row {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    padding: 8px 0 !important;
  }
  #mainContent .support-forecast-cat-label {
    flex: 1 1 60% !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .support-forecast-cat-stats {
    flex: 0 0 auto !important;
    font-size: 11.5px !important;
  }
  #mainContent .support-forecast-cat-bar-wrap {
    flex: 1 1 100% !important;
    height: 8px !important;
  }
  #mainContent .support-forecast-cat-bar {
    height: 100% !important;
  }
  /* SLA volume chart — bar columns get crushed at 375px. Min-width on the
   * chart wrapper so it scrolls horizontally if 7+ days don't fit. */
  #mainContent .sla-volume-chart {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
  }
  #mainContent .sla-vol-bar-col {
    flex: 0 0 auto !important;
    min-width: 32px !important;
  }
  #mainContent .sla-vol-bar {
    min-width: 18px !important;
  }
  #mainContent .sla-vol-period {
    font-size: 10.5px !important;
  }
  #mainContent .sla-vol-compare {
    font-size: 10.5px !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  /* SLA performance grid + tag rows */
  #mainContent .sla-perf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .sla-perf-item {
    padding: 8px 10px !important;
    min-height: 64px !important;
  }
  #mainContent .sla-perf-label {
    font-size: 10.5px !important;
  }
  #mainContent .sla-tag-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 6px 0 !important;
  }
  #mainContent .sla-tag-name {
    flex: 1 1 60% !important;
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sla-tag-track {
    flex: 1 1 100% !important;
    height: 6px !important;
  }
  #mainContent .sla-compliance-row,
  #mainContent .sla-compliance-item {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
  }
  #mainContent .sla-aging-footer {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    font-size: 11.5px !important;
  }
  #mainContent .sla-progress-track {
    height: 6px !important;
  }
  #mainContent .sla-sentiment-bar {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }
  #mainContent .sla-sentiment-legend,
  #mainContent .sla-legend-right,
  #mainContent .sla-date-legend {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    font-size: 11px !important;
  }
  /* Aging row bars (used in support insights) — keep label + bar + count
   * on tight rhythm. */
  #mainContent .aging-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  #mainContent .aging-label {
    font-size: 12px !important;
    flex: 1 1 50% !important;
  }
  #mainContent .aging-bar-track {
    flex: 1 1 100% !important;
    height: 6px !important;
  }
  /* VIP outreach panel — name+email+meta wrap */
  #mainContent .vip-outreach-panel {
    padding: 12px !important;
  }
  #mainContent .vip-outreach-row {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 10px 0 !important;
  }
  #mainContent .vip-outreach-identity {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .vip-outreach-name {
    font-size: 13px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .vip-outreach-email {
    font-size: 11.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .vip-outreach-flags {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .vip-outreach-meta {
    font-size: 11px !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  /* ═══ 8. Empty / loading states inside Customers section ═══ */
  /* Tighten huge centered empty states so they don't push useful content
   * way below the fold. */
  #mainContent .responder-thread-empty {
    padding: 24px 16px !important;
    font-size: 13px !important;
  }
  #mainContent .responder-main > .empty-state {
    margin-top: 32px !important;
    padding: 16px !important;
  }
  #mainContent .ct-empty,
  #mainContent .ct-linked-empty,
  #mainContent .cust-ctx-empty {
    padding: 24px 16px !important;
    font-size: 12.5px !important;
  }
}

/* Extra-small phones: long real-world task/customer data must not crowd the
   conversation out of view. Everything remains reachable; references swipe
   horizontally and the full title/summary remain available in the DOM. */
@media (max-width: 360px) {
  #mainContent .msg-day-sep { display: none !important; }
  #mainContent .msg-detail-title {
    display: -webkit-box !important;
    max-height: 42px !important;
    overflow: hidden !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  #mainContent .msg-customer-inbox-when { display: none !important; }
  #mainContent .msg-customer-inbox-summary {
    display: none !important;
  }
  #mainContent .msg-detail-header:has(.msg-task-details[open]) {
    padding-top: 7px !important;
  }
  #mainContent .msg-detail-header:has(.msg-task-details[open]) .msg-detail-title-row,
  #mainContent .msg-detail-header:has(.msg-task-details[open]) .msg-detail-meta {
    display: none !important;
  }
  #mainContent .msg-detail-header:has(.msg-task-details[open]) .msg-task-details {
    margin-top: 0 !important;
  }
}

/* Pass-4 narrow-viewport refinements (≤420px) — sibling block, not nested. */
@media (max-width: 420px) {
  /* Story panel segments — flatten to single column */
  .customer-story-panel .cs-stat-row,
  .customer-story-panel .cs-seg-grid {
    grid-template-columns: 1fr !important;
  }
  /* CI profile metrics — 2-col still survives but values can collide;
   * compact further. */
  #mainContent .ci-profile-metrics .ci-metric-value {
    font-size: 16px !important;
  }
  /* Channel filter pills — single column 3+ filters */
  #mainContent .responder-channel-filter > button {
    flex: 1 1 100% !important;
  }
  /* Forecast big-num shrink so 4-digit numbers don't overflow */
  #mainContent .support-forecast-big-num {
    font-size: 30px !important;
  }
  /* Ticket-action row stack to 1-col on the smallest screens */
  #mainContent .responder-ticket-actions > button {
    flex: 1 1 100% !important;
  }
}




/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Products (Agent 3, 2026-05-07)
 *
 * Scope: Products nav section ONLY — Catalog Hub, Product Intelligence,
 * Storefront Hub (Config + Health), Sentinel (Storefront Anomalies + SKU
 * Duplicates), Listing Development (product-onboarding), Suppliers.
 * Builds on passes 1-3. All selectors are scoped (.pd-, .pi-, .onb-, .sup-,
 * .sa-, .sd-, .sh-, .sfc-, .catalog-hub-subtabs, .sentinel-subtabs,
 * .storefront-hub-subtabs).
 *
 * Second-order issues fixed:
 *  1. Three new Products-section subtab strips (catalog-hub, sentinel,
 *     storefront-hub) — orphan-card guard from pass-1 covers .pick-tab-group
 *     generically, but these 2-tab strips need explicit equal-width grid +
 *     touch height (40px wraps mid-word with default flex).
 *  2. Product detail panel (pd-*): pd-header-row title row crams when SKU
 *     + title + back-link race for 375px; pd-grid-2 already collapses to
 *     1-col but pd-card-mb20 spacing is desktop-tuned; pd-boxes-table
 *     (composite per-box detail) overflows without horizontal scroll;
 *     composite-sibling rows wrap awkwardly.
 *  3. Product Intelligence: stats-row has 5 stat-cards — at 375px even the
 *     pass-1 2-col grid leaves 5th card orphaned; filter-bar .filter-input
 *     + 2 .filter-select don't equalize so search field gets crushed.
 *  4. Listing Development: onb-form-overlay modal-body max-height was
 *     calc(100vh - 220px) — adds bottom-nav 72px + safe-area collision;
 *     onb-image-grid 130px minmax + 28px del-btn fails 44px touch target;
 *     onb-tab-bar with 5 tabs crams below 420px; onb-modal-footer button
 *     row needs wrap; review-banner + notice rows already flex-column at
 *     860px but action buttons in those rows still side-by-side narrow.
 *  5. Suppliers: 4-col sup-kpi-card row has no mobile rule (only inline
 *     auto-fit minmax on grid); sup-card padding 18 + sup-drawer-content
 *     420px-max-90vw fine but drawer-header padding 20 wastes space; the
 *     add-form sup-input is padding:5px 8px — below touch target.
 *  6. Sentinel — Storefront Anomalies: sa-panel-actions buttons have
 *     min-width:140 inline which forces button overflow at 320px; sa-table
 *     title-snippet/anomaly-type cells use inline 240px maxWidth that
 *     conflicts with mobile cards; sa-kpi-grid 2-col @<=768 already in
 *     scoped CSS but cards too tall.
 *  7. Sentinel — SKU Duplicates: sd-cards 4-col stat row crams; sd-table
 *     scrolls horizontally fine via own scoped @768 but sd-cell-actions
 *     buttons stack ugly; sd-conf-badge needs better legibility.
 *  8. Storefront Config (sfc-* in system.js): sfc-tabs has horizontal
 *     padding:0 24px + 6+ tabs, no horizontal scroll on mobile —
 *     last tabs hidden off-edge; sfc-arch-grid 340px minmax stacks fine
 *     but sfc-arch-card padding waste.
 *  9. Storefront Health: sh-cwv-card padding-tuning + score 56px font
 *     too tall in narrow viewport; sh-issues-toolbar gets stretched but
 *     button row doesn't wrap clean; sh-ps-run-btn / sh-schema-run-btn
 *     touch targets short.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* === 1. Products-section hub subtab strips — equal-width + touch === */
  #mainContent .pick-tab-group.catalog-hub-subtabs,
  #mainContent .pick-tab-group.sentinel-subtabs,
  #mainContent .pick-tab-group.storefront-hub-subtabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .pick-tab-group.catalog-hub-subtabs .pick-tab,
  #mainContent .pick-tab-group.sentinel-subtabs .pick-tab,
  #mainContent .pick-tab-group.storefront-hub-subtabs .pick-tab {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* === 2. Product Detail panel — pd-* card rhythm + composite tightening === */
  #mainContent .pd-header-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  #mainContent .pd-back-link {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  #mainContent .pd-meta-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 11.5px !important;
  }
  #mainContent .pd-meta-label {
    font-size: 10.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .pd-type-badge {
    font-size: 10.5px !important;
  }
  #mainContent .pd-card,
  #mainContent .pd-card-mb,
  #mainContent .pd-card-mb20 {
    padding: 14px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .pd-card-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .pd-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .composite-sibling {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  #mainContent .composite-sibling .sib-sku,
  #mainContent .composite-sibling .sib-status,
  #mainContent .composite-sibling .pd-sibling-shelf {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .pd-comp-group-label {
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .pd-boxes-detail {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .pd-boxes-detail-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent table.pd-boxes-table {
    min-width: 640px !important;
    font-size: 12px !important;
  }
  #mainContent .pd-price-val-green,
  #mainContent .pd-days-val {
    font-variant-numeric: tabular-nums !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .pd-card .action-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* === 3. Product Intelligence — stats-row + filter-bar + table === */
  #mainContent #productIntelligence .stats-row,
  #mainContent .stats-row:not(.stats-row-inv-tight):has(> .stat-card:nth-child(5)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent #productIntelligence .stats-row > .stat-card:nth-child(5) {
    grid-column: 1 / -1 !important;
  }
  #mainContent .filter-bar > .filter-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  #mainContent .filter-bar > .filter-select {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
  }
  #mainContent .pagination,
  #mainContent .pagination-btns {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  #mainContent .pagination-btns > button,
  #mainContent .pagination > button {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  #mainContent .sku-link {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  /* === 4. Listing Development (product-onboarding) — modal + image grid === */
  #mainContent .onb-form-overlay {
    padding: 12px 8px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .onb-form-overlay > div {
    max-height: calc(100dvh - 48px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px !important;
  }
  #mainContent .onb-modal-header,
  #mainContent .onb-modal-footer {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .onb-modal-footer {
    justify-content: stretch !important;
  }
  #mainContent .onb-modal-footer > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  #mainContent .onb-modal-title {
    font-size: 15px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .onb-modal-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
  }
  #mainContent .onb-modal-body {
    padding: 14px !important;
    max-height: calc(100dvh - 48px - 120px - env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .onb-form-input,
  #mainContent .onb-form-static,
  #mainContent .onb-form-textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
  #mainContent .onb-form-textarea {
    min-height: 96px !important;
  }
  #mainContent .onb-image-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  #mainContent .onb-img-del-btn {
    width: 36px !important;
    height: 36px !important;
    top: 6px !important;
    right: 6px !important;
    font-size: 16px !important;
  }
  #mainContent .onb-img-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .onb-img-actions > button {
    width: 100% !important;
    min-height: 44px !important;
  }
  #mainContent .onb-tab-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }
  #mainContent .onb-tab-bar::-webkit-scrollbar { display: none; }
  #mainContent .onb-tab {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }
  #mainContent .onb-review-banner,
  #mainContent .onb-notice,
  #mainContent .onb-imp-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  #mainContent .onb-notice-btn,
  #mainContent .onb-review-banner button,
  #mainContent .onb-imp-banner button {
    width: 100% !important;
    min-height: 44px !important;
  }
  #mainContent .onb-bulk-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .onb-bulk-bar > * {
    flex: 1 1 auto !important;
  }
  #mainContent .onb-bulk-assignee {
    min-height: 40px !important;
    flex: 1 1 100% !important;
  }
  #mainContent .onb-phase-guide-card {
    padding: 14px !important;
  }
  #mainContent .onb-stat-number {
    font-size: 20px !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .onb-stat-label {
    font-size: 10.5px !important;
  }
  #mainContent .onb-search-input {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  #mainContent .onb-actions-wrap {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .onb-actions-wrap > button,
  #mainContent .onb-action-btn,
  #mainContent .onb-action-primary,
  #mainContent .onb-action-publish {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  #mainContent .onb-thread-compose {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .onb-thread-compose-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .onb-thread-textarea {
    min-height: 80px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  #mainContent .onb-thread-kind-select {
    min-height: 40px !important;
    flex: 1 1 auto !important;
  }

  /* === 5. Suppliers — KPI grid + cards + drawer + add-form === */
  #mainContent .sup-kpi-card {
    padding: 12px !important;
    min-height: 78px !important;
    box-sizing: border-box !important;
  }
  #mainContent .sup-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .sup-kpi-value {
    font-size: 18px !important;
    font-variant-numeric: tabular-nums !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sup-kpi-sub {
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sup-card {
    padding: 14px !important;
  }
  #mainContent .sup-input {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }
  #mainContent textarea.sup-input {
    min-height: 72px !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
  }
  #mainContent .sup-field-label {
    font-size: 10.5px !important;
  }
  #mainContent .sup-drawer-content {
    width: 100% !important;
    max-width: 100vw !important;
  }
  #mainContent .sup-drawer-header {
    padding: 14px 14px 12px !important;
  }
  #mainContent .sup-drawer-body {
    padding: 12px 14px !important;
  }
  #mainContent .sup-drawer-section {
    padding: 12px 0 !important;
  }
  #mainContent .sup-drawer-section-title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  #mainContent .sup-drawer-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .sup-drawer-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .sup-d-stat-row {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
  }
  #mainContent .sup-copy-btn {
    min-height: 36px !important;
    min-width: 36px !important;
  }
  #mainContent .sup-add-btn {
    min-height: 40px !important;
  }

  /* === 6. Sentinel — Storefront Anomalies === */
  #mainContent .sa-panel,
  body > .sa-panel {
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .sa-panel-close,
  body > .sa-panel .sa-panel-close {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .sa-panel-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .sa-panel-actions button,
  body > .sa-panel .sa-panel-actions button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  #mainContent .sa-panel-json {
    font-size: 10.5px !important;
    max-height: 180px !important;
  }
  #mainContent .sa-kpi-grid {
    gap: 8px !important;
  }
  #mainContent .sa-kpi-grid .stat-card,
  #mainContent .sa-kpi-grid > div {
    padding: 12px !important;
    min-height: 78px !important;
  }
  #mainContent .sa-kpi-value {
    font-size: 22px !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .sa-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .sa-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent table.sa-table {
    min-width: 720px !important;
  }
  #mainContent table.sa-table td[style*="max-width:240px"],
  #mainContent table.sa-table td[style*="max-width: 240px"] {
    max-width: 200px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sa-filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .sa-filter-bar select,
  #mainContent .sa-filter-bar input {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
    box-sizing: border-box !important;
  }
  #mainContent .sa-action-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }
  #mainContent .sa-pagination {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  /* === 7. Sentinel — SKU Duplicates === */
  #mainContent .sd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    display: grid !important;
  }
  #mainContent .sd-card {
    padding: 12px !important;
    min-height: 76px !important;
  }
  #mainContent .sd-card-value {
    font-size: 20px !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .sd-card-label {
    font-size: 10.5px !important;
  }
  #mainContent .sd-card-sub {
    font-size: 10.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sd-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .sd-header-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #mainContent .sd-header-actions > button {
    flex: 1 1 auto !important;
    min-height: 36px !important;
  }
  #mainContent .sd-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .sd-filters select,
  #mainContent .sd-filters input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
    box-sizing: border-box !important;
  }
  #mainContent .sd-filter-label {
    font-size: 10.5px !important;
  }
  #mainContent table.sd-table {
    min-width: 720px !important;
    font-size: 12px !important;
  }
  #mainContent .sd-cell-actions {
    white-space: normal !important;
  }
  #mainContent .sd-btn-flag,
  #mainContent .sd-btn-dismiss {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }
  #mainContent .sd-conf-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
  }
  #mainContent .sd-price {
    overflow-wrap: anywhere !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .sd-sku {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  /* === 8. Storefront Config (sfc-* in system.js) === */
  #mainContent .sfc-tabs {
    padding: 0 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }
  #mainContent .sfc-tabs::-webkit-scrollbar { display: none; }
  #mainContent .sfc-tab {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  #mainContent .sfc-info-box {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
  #mainContent .sfc-info-box code {
    word-break: break-all !important;
  }
  #mainContent .sfc-arch-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .sfc-arch-card {
    padding: 12px !important;
  }
  #mainContent .sfc-arch-num {
    flex-shrink: 0 !important;
  }
  #mainContent .sfc-section-title {
    font-size: 12px !important;
  }
  #mainContent .sfc-arch-detail {
    overflow-wrap: anywhere !important;
    line-height: 1.5 !important;
    font-size: 11.5px !important;
  }
  #mainContent .sfc-arch-label {
    font-size: 10.5px !important;
  }
  #mainContent .sfc-code {
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  /* === 9. Storefront Health — score row + CWV cards + run buttons === */
  #mainContent .sh-score-row > div:first-child > div:first-child {
    font-size: 44px !important;
  }
  #mainContent .sh-cwv-card {
    padding: 14px !important;
  }
  #mainContent .sh-issues-toolbar {
    gap: 8px !important;
  }
  #mainContent .sh-issues-toolbar select,
  #mainContent .sh-issues-toolbar input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .sh-issues-toolbar h3 {
    font-size: 14px !important;
  }
  #mainContent #sh-ps-run-btn,
  #mainContent #sh-schema-run-btn {
    min-height: 40px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  #mainContent #sh-ps-status,
  #mainContent #sh-schema-status {
    overflow-wrap: anywhere !important;
    font-size: 11.5px !important;
  }
  #mainContent #sh-issues-table {
    -webkit-overflow-scrolling: touch !important;
    max-height: 480px !important;
  }
  #mainContent #sh-issues-table table {
    min-width: 600px !important;
    font-size: 12px !important;
  }
  #mainContent #sh-sf-all,
  #mainContent #sh-sf-incomplete {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
}

/* Pass 4 — narrow-viewport (<=420px) refinements */
@media (max-width: 420px) {
  #mainContent .sd-cards {
    grid-template-columns: 1fr !important;
  }
  #mainContent #productIntelligence .stats-row,
  #mainContent .stats-row:not(.stats-row-inv-tight):has(> .stat-card:nth-child(5)) {
    grid-template-columns: 1fr !important;
  }
  #mainContent #productIntelligence .stats-row > .stat-card:nth-child(5) {
    grid-column: auto !important;
  }
  #mainContent .sup-kpi-card {
    min-height: 70px !important;
  }
  #mainContent .onb-actions-wrap > button,
  #mainContent .onb-action-btn,
  #mainContent .onb-action-primary,
  #mainContent .onb-action-publish {
    flex: 1 1 100% !important;
  }
  #mainContent .sa-panel-actions button {
    font-size: 12.5px !important;
  }
  #mainContent .sfc-tab {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  #mainContent .sh-issues-toolbar h3 {
    font-size: 13px !important;
  }
  #mainContent .pick-tab-group.catalog-hub-subtabs .pick-tab,
  #mainContent .pick-tab-group.sentinel-subtabs .pick-tab,
  #mainContent .pick-tab-group.storefront-hub-subtabs .pick-tab {
    font-size: 11.5px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Warehouse (Agent 4, 2026-05-07)
 *
 * Scope: SECOND-ORDER warehouse-only mobile polish across the 10 nav views
 * (Overview, Inventory Matrix, Pick Lists, Shelf Hub, Containers, Receiving,
 * Activity & History, Returns Stock, Restock Tasks, Open Box Ops).
 *
 * Companion to passes 1/2/3 — does not duplicate their rules. All selectors
 * are scoped to the warehouse views via per-view class prefixes (cpl-, pck-,
 * npl-, plh-, rs-, ret-, wh-, obx-, cc-, ct-, con-, rr-, jarvis-container-,
 * matrix-, inv-) so cross-view bleed is impossible.
 *
 * Cole's complaint this pass addresses: warehouse staff use this section
 * heaviest on iPad/phone — earlier passes covered the global chrome and
 * desktop-shaped tables. This pass goes after the click-INTO surfaces:
 * scan inputs that lose visibility behind keyboard, modals that overflow at
 * 375px, photo upload buttons that wrap awkwardly, qty pills that don't
 * right-align in cards, container manifest tables that crush, and
 * action-button rows that stack badly under a thumb.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Pick Lists — scan input must stay visible above the keyboard ═══
   * pickConfirmScan and the order-row scan field are the most-tapped inputs
   * in the warehouse. iOS auto-zooms to <16px inputs (forces page resize)
   * AND the soft keyboard pushes the input out of view if not sticky-pinned
   * inside the modal. Force 16px font and let the modal's body scroll
   * independently while the footer (with the input) hugs the bottom. */
  #mainContent .pck-confirm-modal,
  .journey-modal.pck-confirm-modal,
  .journey-modal.pck-done-modal {
    width: min(440px, 94vw) !important;
    max-width: 94vw !important;
    max-height: 90dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .journey-modal.pck-confirm-modal .pck-confirm-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #fff) !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    margin: 0 -14px -14px !important;
    z-index: 2 !important;
  }
  #pickConfirmScan,
  input[id^="pickConfirmScan"] {
    min-height: 48px !important;
    font-size: 16px !important; /* prevent iOS auto-zoom */
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }
  .journey-modal.pck-confirm-modal .pck-confirm-btn,
  .journey-modal.pck-done-modal .pck-done-close-btn {
    min-height: 48px !important;
    width: 100% !important;
    font-size: 15px !important;
  }
  .journey-modal.pck-confirm-modal .pck-qty-badge,
  .journey-modal.pck-confirm-modal .pck-item-meta {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Pick-list header / search row — name input + search input were sharing
   * a flex row that wrapped untidily at 375px. Stack them with consistent
   * 16px font (no iOS zoom) and 44px touch targets. */
  #mainContent .cpl-name-input,
  #mainContent .cpl-search,
  #mainContent .plh-date-input {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .cpl-filter-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .cpl-filter-row > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Pick-list table — keep the 2-box-pair child-row indent intact but force
   * the whole table into horizontal scroll so the action col stays reachable.
   * `cpl-action-stack` (Confirm / Skip / Short) was wrapping under the row;
   * the column needs a min-width to keep its buttons tappable. */
  #mainContent .cpl-table {
    min-width: 720px !important;
  }
  #mainContent .cpl-action-stack {
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 96px !important;
  }
  #mainContent .cpl-action-stack > button,
  #mainContent .cpl-confirm-btn,
  #mainContent .cpl-add-item-btn,
  #mainContent .cpl-merge-btn,
  #mainContent .cpl-remove-item-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  /* Right-align numeric qty cells in the picklist table for tabular-nums. */
  #mainContent .cpl-qty-td,
  #mainContent .cpl-loc-pill,
  #mainContent .cpl-tpb-badge {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* ═══ 2. New Pick List modal — search results, address form, custom item ═══
   * The "New Pick List" flow opens a tall modal with multiple .npl-section
   * blocks. At 375px the search-result rows (npl-search-row inside
   * npl-search-results) have a left "title" column + right "add" button that
   * collide. Stack at narrow widths. */
  #mainContent .npl-search-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  #mainContent .npl-search-item-title {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .npl-add-btn,
  #mainContent .npl-add-all-btn,
  #mainContent .npl-2box-btn,
  #mainContent .npl-remove-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  /* Manual-entry / custom-item / address sections — give every input the
   * 16px floor so the keyboard doesn't fight zoom. */
  #mainContent .npl-custom-form input,
  #mainContent .npl-custom-form select,
  #mainContent .npl-addr-form input,
  #mainContent .npl-addr-form select,
  #mainContent .npl-addr-form textarea,
  #mainContent #nplSearchInput,
  #mainContent #nplInvSku,
  #mainContent #nplInvQty,
  #mainContent #nplInvOrder,
  #mainContent #nplInvCustomer,
  #mainContent #nplInvNote,
  #mainContent #nplCustomName,
  #mainContent #nplCustomQty,
  #mainContent #nplCustomNote,
  #mainContent #nplAddrName,
  #mainContent #nplAddrLine1,
  #mainContent #nplAddrLine2,
  #mainContent #nplAddrCity,
  #mainContent #nplAddrState,
  #mainContent #nplAddrZip,
  #mainContent #nplAddrCountry,
  #mainContent #nplAddrNote {
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  /* L/W/H/Weight quad — 2-col grid is more thumb-friendly than 4 squashed */
  #mainContent .npl-custom-form .field.npl-sm {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  /* Address city/state/zip row — same 2-col stack at narrow widths. */
  #mainContent .npl-addr-form .field.npl-xs,
  #mainContent .npl-addr-form .field.npl-grow {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  #mainContent .npl-section {
    padding: 12px !important;
  }
  /* Modal scroll surface — give npl modals max-height so worker can always
   * reach the action footer without scrolling outside the modal. */
  #mainContent .npl-modal-scroll {
    max-height: calc(90dvh - 120px) !important;
  }

  /* ═══ 3. Shelf-Hub subtabs — already inherit pass-1 .pick-tab-group rules
   * but the wrapper has 3 tabs (Shelf Management / Cycle Count / Stock Damage). Make them
   * equal-width and 40px high so warehouse-staff thumbs hit consistently. */
  #mainContent .pick-tab-group.shelf-hub-subtabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .pick-tab-group.shelf-hub-subtabs .pick-tab {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-height: 40px !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }

  /* ═══ 4. Inventory Matrix — click-into per-SKU row + sticky qty cells ═══
   * The matrix-table has many warehouse columns (Lightning + S18+S19+...)
   * that scroll horizontally. The total/grand-total cells already use
   * font-variant-numeric. Two SECOND-ORDER issues to fix:
   *  (a) shelf chips inside `.inv-shelves-cell` were stacking vertically,
   *      producing very tall rows on phone. Compact horizontally with
   *      max-height + scroll.
   *  (b) `.inv-totals-row-top/-bottom` had label cells that wrapped to 3
   *      lines on phone. Force ellipsis. */
  #mainContent .matrix-table {
    min-width: 900px !important; /* scroll the parent, don't crush cols */
  }
  #mainContent .inv-shelves-cell {
    max-height: 64px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: wrap !important;
    display: flex !important;
    gap: 4px !important;
  }
  #mainContent .inv-totals-label,
  #mainContent .inv-totals-label-sm {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
  }
  #mainContent .matrix-qty {
    font-variant-numeric: tabular-nums;
    text-align: right !important;
  }
  /* In-stock toggle pill — touch target */
  #mainContent .inv-instock-toggle {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }

  /* ═══ 5. Containers (logistics) — manifest tables + click-into card ═══
   * Container detail row classes: con-row / con-code-link / container-status.
   * Inside the click-in: ct-table is the manifest, jarvis-container-intel-*
   * holds the cascade banner. The manifest at 375px crushed the SKU/Qty cols.
   * Force horizontal scroll + min-width, and make the container-status pill
   * never wrap. */
  #mainContent .ct-table {
    min-width: 720px !important;
  }
  #mainContent .ct-fullwidth {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .container-status,
  #mainContent .con-code-link {
    white-space: nowrap !important;
  }
  /* Container intel header — title + stats wrap, urgency bar full-width */
  #mainContent .jarvis-container-intel-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  #mainContent .jarvis-container-intel-stats {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }
  #mainContent .jarvis-container-intel-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .jarvis-container-intel-urgency-bar {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .jarvis-container-intel-cascade-banner {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
  }
  #mainContent .jarvis-container-intel-badge {
    white-space: nowrap !important;
  }
  /* Reorder-recommendations table — wide, stat tiles must not wrap awkwardly */
  #mainContent .rr-stat-total,
  #mainContent .rr-stat-critical,
  #mainContent .rr-stat-high,
  #mainContent .rr-stat-needs {
    padding: 10px 12px !important;
    min-height: 64px !important;
  }
  #mainContent .rr-export-group {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .rr-pagination-btns {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  /* ═══ 6. Receiving Gateway — 2 big intake cards + photo upload ═══
   * The gateway uses .wh-scanner-* classes (toolbar/video/reticle/status) and
   * the receive-confirmation modal uses .wh-reason-select. SECOND-ORDER:
   * scanner reticle was clipping at 375px and the reason-select was 14px
   * font (iOS zoom). */
  #mainContent .wh-scanner-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .wh-scanner-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
  #mainContent .wh-scanner-status {
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
  }
  #mainContent .wh-reason-select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .wh-grid-search {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* ═══ 7. Returns Stock — Confirm/Move/Trash modals (inline-styled) ═══
   * All three returns modals (rs-confirm-receipt-modal, rs-move-modal,
   * rs-trash-modal) are built with inline styles. Pass 3 already addressed
   * the desktop-thinned rows. The MODAL bodies still have desktop-padding
   * + select fonts that trigger iOS zoom. Override at the modal-level.
   *
   * The modals attach directly to <body>, not #mainContent, so selectors are
   * unprefixed but ID-scoped. */
  #rs-confirm-receipt-modal > div,
  #rs-move-modal > div,
  #rs-trash-modal > div {
    padding: 16px !important;
    border-radius: 12px !important;
    max-height: 90dvh !important;
  }
  #rs-confirm-cond,
  #rs-confirm-shelf,
  #rs-confirm-note,
  #rs-move-wh,
  #rs-move-shelf,
  #rs-move-reason,
  #rs-trash-reason,
  #rs-trash-note {
    font-size: 16px !important;
  }
  /* Photo upload row inside Confirm Receipt — button + status text wrapped
   * awkwardly. Make it stack: button full-width, status below. Thumbs
   * container scrolls horizontally to keep modal short. */
  #rs-confirm-photos-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
  #rs-confirm-photos-status {
    display: block !important;
    margin-top: 6px !important;
    font-size: 11px !important;
  }
  #rs-confirm-photos-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  #rs-confirm-photos-thumbs > * {
    flex: 0 0 auto !important;
  }
  /* Action button row (Cancel + Confirm/Move/Trash) — wrap + equal share
   * + 48px touch target. Inline-style had justify-content:flex-end which
   * pinned both to right; on phone we want full-width primary, secondary
   * below or beside. */
  #rs-confirm-receipt-modal > div > div:last-child,
  #rs-move-modal > div > div:last-child,
  #rs-trash-modal > div > div:last-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }
  #rs-confirm-cancel,
  #rs-move-cancel,
  #rs-trash-cancel {
    flex: 1 1 calc(40% - 4px) !important;
    min-height: 48px !important;
    order: 2 !important; /* push secondary below primary */
  }
  #rs-confirm-submit,
  #rs-move-submit,
  #rs-trash-submit {
    flex: 1 1 100% !important;
    min-height: 48px !important;
    order: 1 !important;
    font-size: 15px !important;
  }
  /* Returns stock list — sku-block & summary chevron tap target */
  #mainContent .rs-sku-block {
    padding: 10px 12px !important;
  }
  #mainContent .rs-sku-summary {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  #mainContent .rs-sku-chevron {
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .rs-search-bar input,
  #mainContent .rs-search-bar select {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  #mainContent .ret-filter-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  /* Hide the kbd-hint on phones — n·r·s·d·p·u·⏎ is desktop muscle memory */
  #mainContent .rs-kbd-hint,
  #rs-confirm-receipt-modal .rs-kbd-hint {
    display: none !important;
  }

  /* ═══ 8. Restock Tasks — task cards with shelf scan + action row ═══
   * View renders into .data-table inside #mainContent. The page-1 generic
   * .data-table mobile-card transformation kicks in. SECOND-ORDER: the
   * action button cluster (Mark Restocked / Cancel) wraps under task title,
   * which is correct, but they were min-height:0 inline. Force 40px+ and
   * full-width primary. */
  #mainContent .restock-tasks-view .action-btn
  #mainContent .data-table .action-btn[data-action="complete"],
  #mainContent .data-table .action-btn[data-action="cancel"] {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  #mainContent .data-table .action-btn[data-action="complete"] {
    width: 100% !important;
  }

  /* ═══ 9. Open Box Ops — queue cards + KPI grid + alerts grid ═══
   * obx-* classes own the entire OB Ops view. Pass 1/2/3 didn't reach them.
   * Six SECOND-ORDER issues:
   *  (a) obx-kpi-grid was 4-col forced; on phone needs 2-col.
   *  (b) obx-alerts-grid was 2-col; needs 1-col so SKU/title isn't crushed.
   *  (c) obx-aging-grid was 3-col; needs 1-col.
   *  (d) obx-head was a flex row with title + meta + refresh — wrap + stack.
   *  (e) obx-panel-head action buttons (refresh/filter) need 36px floor.
   *  (f) obx-table needs min-width to scroll horizontally instead of crush. */
  #mainContent .obx-root {
    padding: 0 !important;
    gap: 14px !important;
  }
  #mainContent .obx-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  #mainContent .obx-head-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    flex: 1 1 100% !important;
  }
  #mainContent .obx-head-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11.5px !important;
  }
  #mainContent .obx-head-badge {
    white-space: nowrap !important;
  }
  #mainContent .obx-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .obx-kpi {
    padding: 10px 12px !important;
    min-height: 76px !important;
  }
  #mainContent .obx-kpi-value {
    font-size: 20px !important;
  }
  #mainContent .obx-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .obx-kpi-sub {
    font-size: 10.5px !important;
  }
  #mainContent .obx-kpi-sparkline {
    max-height: 24px !important;
  }
  #mainContent .obx-alerts-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .obx-alert-card {
    padding: 12px !important;
  }
  #mainContent .obx-alert-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .obx-alert-sku {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .obx-alert-time {
    font-size: 10.5px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  #mainContent .obx-alert-body {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  #mainContent .obx-aging-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .obx-aging-card {
    padding: 12px !important;
  }
  #mainContent .obx-aging-card-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .obx-aging-sku {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .obx-aging-days {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .obx-age,
  #mainContent .obx-age-bar {
    height: 6px !important;
  }
  #mainContent .obx-panel {
    padding: 12px !important;
  }
  #mainContent .obx-panel-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .obx-panel-title {
    font-size: 13px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .obx-panel-meta {
    font-size: 11px !important;
    flex-wrap: wrap !important;
  }
  #mainContent .obx-refresh-btn,
  #mainContent .obx-drift-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  #mainContent .obx-table {
    min-width: 720px !important;
  }
  #mainContent .obx-panel-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .obx-wh-card {
    padding: 10px 12px !important;
    min-height: 64px !important;
  }
  #mainContent .obx-webhook-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .obx-drift {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .obx-drift-left,
  #mainContent .obx-drift-right {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .obx-pill {
    white-space: nowrap !important;
  }

  /* ═══ 10. Cycle Count — counting form + variance review ═══
   * cc-* classes — workers count units shelf-by-shelf. SECOND-ORDER: the
   * count-input row had the SKU label + expected qty + count input on one
   * row that crushed at 375px. Stack vertically. The session start-card
   * + closed-card need consistent padding rhythm. */
  #mainContent .cc-container {
    padding: 0 !important;
    gap: 12px !important;
  }
  #mainContent .cc-start-card,
  #mainContent .cc-closed-card,
  #mainContent .cc-counting-header,
  #mainContent .cc-summary,
  #mainContent .cc-review-header {
    padding: 12px !important;
  }
  #mainContent .cc-field-group {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .cc-field-group > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .cc-input,
  #mainContent .cc-select {
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  #mainContent .cc-count-input {
    min-height: 40px !important;
    font-size: 16px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .cc-step-pill {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  #mainContent .cc-progress {
    gap: 4px !important;
  }
  #mainContent .cc-progress-track {
    height: 8px !important;
  }
  #mainContent .cc-progress-label {
    font-size: 11px !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .cc-variance-badge {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .cc-review-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .cc-review-actions > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  #mainContent .cc-sku-cell {
    overflow-wrap: anywhere !important;
  }
  #mainContent .cc-expected {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* ═══ 11. Inventory Activity & History — sub-tab + timeline ═══
   * inv-log-subtabs (Activity / History) inherits pass-1 pick-tab-group.
   * Two SECOND-ORDER issues: (a) the wrapper has only 2 tabs so they can
   * be wider, (b) the timeline rows in inventory-history have wide tab-btn
   * pills. */
  #mainContent .pick-tab-group.inv-log-subtabs .pick-tab {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 40px !important;
  }
  #mainContent .tab-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  #mainContent .u-table {
    min-width: 560px !important;
  }

  /* ═══ 12. Warehouse Overview — twocol layout + refresh pill ═══
   * wh-overview-twocol is grid-2 desktop. Force single column on phone,
   * make the refresh pill a full touch target. */
  #mainContent .wh-overview-twocol {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .wh-refresh-pill {
    min-height: 36px !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #mainContent .wh-refresh-icon {
    width: 14px !important;
    height: 14px !important;
  }

  /* ═══ 13. Generic warehouse — qty pill alignment + numeric badges ═══
   * Right-align numeric "qty" / "count" badges across the warehouse views
   * so list scanning is fast. Apply tabular-nums everywhere a count shows. */
  #mainContent .pck-qty-badge,
  #mainContent .obx-kpi-value,
  #mainContent .obx-aging-days,
  #mainContent .matrix-qty,
  #mainContent .matrix-total,
  #mainContent .cc-expected,
  #mainContent .cc-count-input,
  #mainContent .cc-variance-badge,
  #mainContent .rr-po-val,
  #mainContent .rr-td-r,
  #mainContent .rr-td-r-bold,
  #mainContent .rr-td-r-muted {
    font-variant-numeric: tabular-nums;
  }
  /* Long shelf codes (e.g. LIGHTNING-A4-S22) — let them ellipsis instead
   * of overflowing the row. Affects shelf chips inside picklists, returns,
   * cycle-count, OB ops. */
  #mainContent .cpl-shelf-td,
  #mainContent .cpl-loc-pill,
  #mainContent .obx-wh-card,
  #mainContent .cc-sku-cell {
    overflow-wrap: anywhere !important;
  }

  /* ═══ 14. Warehouse-role view differences ═══
   * When role=warehouse the data-role="warehouse" attribute is on body. UI
   * already hides admin-only controls server-side, but a few mobile-only
   * tweaks help warehouse staff: bigger primary action, no tiny secondaries. */
  body[data-role="warehouse"] #mainContent .action-btn,
  body[data-role="warehouse"] #mainContent .btn-secondary,
  body[data-role="warehouse"] #mainContent .filter-btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }
  body[data-role="warehouse"] #mainContent .cpl-action-stack > button {
    min-height: 40px !important; /* tighter than admin's 36px */
  }
}

/* Pass 4 — narrow-viewport (<=420px) refinements (sibling block, not nested,
 * for old Safari compat). Pure phone widths where the per-view collapse
 * needs to be more aggressive than the 768px tier. */
@media (max-width: 420px) {
  /* Pick-list table — let it scroll instead of compressing further */
  #mainContent .cpl-table {
    min-width: 640px !important;
  }
  /* OB KPI grid — drop to 1-col so the value is readable instead of clipped */
  #mainContent .obx-kpi-grid {
    grid-template-columns: 1fr !important;
  }
  /* Container intel stats — single column for clarity */
  #mainContent .jarvis-container-intel-stats {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* Reorder-recs stat tiles — 1-col stack at narrow widths */
  #mainContent .rr-stat-total,
  #mainContent .rr-stat-critical,
  #mainContent .rr-stat-high,
  #mainContent .rr-stat-needs {
    flex: 1 1 100% !important;
  }
  /* Shelf-hub subtabs to 2-col so labels don't truncate */
  #mainContent .pick-tab-group.shelf-hub-subtabs .pick-tab {
    flex: 1 1 calc(50% - 6px) !important;
  }
}



/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Marketing+Finance (Agent 5, 2026-05-07)
 *
 * Scope: Marketing (overview, paid-channels, organic-attribution, mkt-seo,
 * mkt-initiatives) + Finance (reports/forecasting/spend/costs, pricing-
 * suggestions, nexus) + Analytics-hub. Second-order issues that survived
 * passes 1–3, mostly inline-style escapes:
 *
 *   1. Income Statement & Monthly-P&L tables: `position:sticky;left:0`
 *      on first <th>/<td> needs the parent to be a hard horizontal
 *      scroller — without it the sticky wires onto the page and the
 *      header row jitters under the app-header on scroll.
 *   2. Pure-CSS bar charts (cf-bar-chart, mo-sparkline, cashflow viewer
 *      cumulative bars) — bars compress to <1px when the chart container
 *      goes below 320px. Force a minimum bar width and let the chart
 *      scroll horizontally if needed.
 *   3. Inline-style grid blocks: monthly-pl `pl-row-2`, mi-edit-modal
 *      `1fr 1fr`, accounting-overview `wh-overview-twocol`, expense
 *      detail `ii-detail-grid` — collapse to single-column.
 *   4. `table-scroll` with inline max-height creates nested scroll
 *      containers (vertical inside horizontal). On mobile this fights
 *      the page scroll; release the cap on small viewports.
 *   5. SEO `seo-gsc-grid` 2-col; `seo-ai-card` flex header where the
 *      right-side meta wraps awkwardly — stack on phone.
 *   6. Currency formatting: long values like $1,234,567.89 in narrow
 *      mono columns. Already partially handled (pass-3 §9) — extend to
 *      the table cells the prior pass missed (.is-table, .view-table).
 *   7. Revenue-forecast `rf-horizon-tabs` (3-button strip) was untouched
 *      by previous passes; it shares the row with a refresh icon and
 *      needs equal-width pills.
 *   8. Initiatives form (`mi-add-grid`) was a multi-col grid using its
 *      own scoped CSS; on mobile it cramps. Force one-column.
 *   9. `pricing-suggestions` verdict badge cell + the `Apply` button
 *      had different heights from the verdict select — touch-target
 *      parity.
 *  10. The `mi-edit-modal` inline-style modal (built dynamically with
 *      style.cssText) needs viewport-fit padding + body-level button
 *      stack.
 *  11. Drill-down drawer (`is-drawer`) is `width:min(640px,95vw)` which
 *      is fine, but the head/body padding eats useful pixels at 375px.
 *  12. Chart label clip prevention — SVG `<text>` near the right edge
 *      of monthly-pl sparkline; restrict viewBox via padding.
 *
 * Companion to passes 1–3 — every selector is scoped to the views
 * above and never touches the desktop CSS. No prior-pass selector is
 * duplicated here; only NEW surfaces.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ═══ 1. Income Statement — the wide P&L scrolls in its OWN wrapper.
   * 2026-09-03 UX audit round 4: the view already ships the scroller the
   * sticky Account column needs — `.is-table-wrap { overflow:auto }`
   * (js/views/income-statement.js:73), carrying data-mobile-table-skip so
   * the cardify hydrator leaves the matrix alone. Do NOT force
   * display:block on the table: that split thead/tbody/tfoot into three
   * independent table-layout:fixed tables, so month headers stopped
   * sitting over their own figures (tbody carries a colspan spacer row,
   * income-statement.js:662, which resolves its columns equal-width while
   * thead keeps a wide Account column) — and it nested a second sideways
   * scroller inside the wrapper. Size the wrap; keep ONE table. */
  #mainContent .is-table-wrap {
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    border-radius: 8px !important;
  }
  #mainContent .is-table {
    min-width: 880px !important;
  }
  /* Tighten cell padding so 13 columns survive at min-width:880 */
  #mainContent .is-table thead th,
  #mainContent .is-table tbody td {
    padding: 6px 6px !important;
    font-size: 11.5px !important;
  }
  /* First-column sticky still desired — re-anchor against the new
   * scroll context (the table itself). Background must be opaque. */
  #mainContent .is-table thead th:first-child,
  #mainContent .is-table tbody td:first-child {
    min-width: 140px !important;
    max-width: 160px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Year picker row — wrap, equal heights */
  #mainContent .is-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .is-year-picker select {
    min-height: 40px !important;
    font-size: 16px !important; /* iOS no-zoom (2026-09-03 UX audit round 4) */
    padding: 0 12px !important;
  }
  /* Drill-down drawer — tighten internal padding so message body breathes */
  #mainContent + .is-drawer-backdrop ~ .is-drawer,
  .is-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .is-drawer-head {
    padding: 12px 14px !important;
  }
  .is-drawer-body {
    padding: 12px 14px !important;
  }
  .is-drawer-close {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ═══ 2. Monthly P&L — inline pl-row-2 1fr/1fr collapse + KPI cards ═══
   * The view defines its own 768 break (kpi-grid-4 → 2-col, pl-kpi-5 →
   * 2-col), but the inline-style `pl-row-2` (used for chart-card pairs)
   * was ONLY collapsed inside its own <style> block — those selectors
   * win at desktop but compete with the inline `style="grid-template…"`
   * at mobile because of specificity. Force-collapse here. */
  #mainContent .pl-row-2,
  #mainContent div[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:24px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Sparkline SVG margins — labels at the right edge of last data point
   * were clipping. Add right-padding to the wrapping <div> via the
   * common card class. */
  #mainContent .pl-row-2 svg,
  #mainContent .acc-grid-2 svg {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Daily-data list inside cards — limit growth so multiple cards
   * stay manageable on phone. */
  #mainContent .pl-row-2 div[style*="max-height:180px"] {
    max-height: 140px !important;
  }

  /* ═══ 3. Cashflow + Cashflow-Forecast — bar chart min-width ═══
   * .cf-bar-chart is a flex row of pure-CSS bars. On a 375px viewport
   * with 30-day data, each bar collapses to ~12px which makes the chart
   * unreadable. Let the chart wrapper scroll horizontally and force a
   * sensible minimum width on the inner grid. */
  #mainContent .cf-bar-chart,
  #mainContent .cf-bar-chart-lg {
    min-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  /* Long forecasts (60d/90d) need horizontal scroll */
  #mainContent .cf-bar-chart-lg > * {
    flex-shrink: 0 !important;
  }
  /* Cashflow indicator grid — view's own breakpoint goes 4→2; force 2 here
   * for safety against inline grid-template overrides. */
  #mainContent .cf-indicator-grid,
  #mainContent div.cf-indicator-grid[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #mainContent .cf-chart-section {
    margin: 12px 0 !important;
  }
  #mainContent .cf-chart-label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  /* ═══ 4. Accounting Overview — nested table-scroll + 2-col layout ═══
   * Several sections wrap their inner data-table in
   * `<div class="table-scroll" style="max-height:340px;overflow-y:auto">`.
   * On a phone where the page already scrolls, a nested vertical scroller
   * inside a horizontal scroller fights touch — relax the cap so the
   * page itself scrolls. (Nested-scroll = 2 scroll surfaces stacked,
   * users get stuck.) */
  #mainContent .table-scroll[style*="max-height:340px"],
  #mainContent .table-scroll[style*="max-height: 340px"],
  #mainContent .table-scroll[style*="max-height:400px"],
  #mainContent .table-scroll[style*="max-height: 400px"],
  #mainContent .table-scroll[style*="max-height:360px"],
  #mainContent .table-scroll[style*="max-height: 360px"],
  #mainContent .table-scroll[style*="max-height:280px"],
  #mainContent .table-scroll[style*="max-height: 280px"],
  #mainContent .table-scroll[style*="max-height:200px"],
  #mainContent .table-scroll[style*="max-height: 200px"] {
    max-height: none !important;
    overflow-y: visible !important;
  }
  /* Warehouse two-column inline grid — collapse */
  #mainContent .wh-overview-twocol,
  #mainContent div[class="wh-overview-twocol"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 8px 0 !important;
  }

  /* ═══ 5. SEO view — gsc grid + ai-card row ═══ */
  /* GSC top-queries + top-pages 2-col grid → 1-col on phone */
  #mainContent .seo-gsc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* AI search visibility cards — left/right flex header stacks at narrow */
  #mainContent .seo-ai-card {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .seo-ai-card-left,
  #mainContent .seo-ai-card-right {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .seo-ai-card-right {
    justify-content: flex-start !important;
  }
  /* Ellipsis cells should not crush below ~120px */
  #mainContent .seo-text-ellipsis,
  #mainContent .seo-text-ellipsis-wide {
    max-width: 220px !important;
  }
  /* Section headers — tighter on mobile so 2-line headers stay 1-line */
  #mainContent .seo-section-header,
  #mainContent .seo-section-header-flex {
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }
  #mainContent .seo-section-header-flex {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .seo-toolbar-note {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }
  /* Inner table-scroll already handled by §4 max-height release */

  /* ═══ 6. Marketing Initiatives — add grid + edit modal + status cell ═══ */
  /* The inline `mi-add-grid` was a multi-col CSS-grid in its own block.
   * Force single-column at <=768. */
  #mainContent .mi-add-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .mi-add-input,
  #mainContent .mi-status-select {
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* iOS no-zoom */
  }
  #mainContent .mi-add-btn-row {
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  #mainContent .mi-add-submit,
  #mainContent .mi-add-cancel {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  /* Edit modal — built with inline styles via JS; target by id */
  #mi-edit-modal {
    padding: 12px !important;
  }
  #mi-edit-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 12px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  /* Inner 1fr/1fr form grid in modal */
  #mi-edit-modal > div > div[style*="grid-template-columns:1fr 1fr"],
  #mi-edit-modal > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Footer button row */
  #mi-edit-modal > div > div[style*="justify-content:flex-end"],
  #mi-edit-modal > div > div[style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mi-edit-modal > div > div[style*="justify-content:flex-end"] > button,
  #mi-edit-modal > div > div[style*="justify-content: flex-end"] > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  /* Initiatives table cells — ellipsis name + small notes */
  #mainContent .mi-name-cell {
    max-width: 200px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .mi-row-notes {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
  }
  #mainContent .mi-status-select {
    margin-top: 4px !important;
  }
  #mainContent .mi-edit-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  #mainContent .mi-channel-pill {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
  }

  /* ═══ 7. Revenue Forecast — horizon-tabs equal pills ═══
   * The view's own <style> covers `.kpi-grid-4` and `.rf-cards-row` at
   * 768 but never sized .rf-horizon-tabs row. The 3 buttons wrap onto
   * two lines under a 32px refresh icon making the header asymmetric. */
  #mainContent .rf-horizon-tabs {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  #mainContent .rf-horizon-btn {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  /* Card-row pair — view collapses with `.rf-cards-row { 1fr }` already.
   * Tighten card padding so triple-stack on phone isn't a tower. */
  #mainContent .rf-card {
    padding: 14px !important;
  }
  #mainContent .rf-card-base {
    font-size: 22px !important;
  }
  #mainContent .rf-range-bar {
    margin-top: 8px !important;
  }
  #mainContent .rf-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .rf-title {
    font-size: 18px !important;
  }
  #mainContent .rf-subtitle {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ═══ 8. Pricing Suggestions — verdict select + apply equal heights ═══
   * Pass-3 already set `#ps-filters > #ps-verdict, > #ps-sku` to 100%
   * width / 40px. The inline native `<select>` height varies per-OS
   * (iOS ~32, Android ~40); pin a hard min-height. Apply button was
   * 36px from `btn-secondary`; bump to match the row. */
  #mainContent #ps-verdict,
  #mainContent #ps-sku {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--surface) !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(-45deg, transparent 50%, var(--text-muted) 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px !important;
  }
  #mainContent #ps-sku {
    background: var(--surface) !important;
    padding-right: 12px !important;
  }
  /* Status-pill row — pass-3 set them 50% each. Tabs of 5 (pending/
   * approved/rejected/ignored/applied) wrap to 3 rows with that rule;
   * shift to 33% so it's 2 rows of 3+2. Override #ps-tabs > button. */
  #mainContent #ps-tabs > button {
    flex: 1 1 calc(33.333% - 6px) !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  /* Pricing table — verdict badge + currency cells */
  #mainContent #ps-body td .mono,
  #mainContent #ps-body td[style*="text-align:right"] {
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }
  /* Drill-link icon button if any (Apply / Reject in cells) — make
   * touchable. */
  #mainContent #ps-body button {
    min-height: 32px !important;
  }

  /* ═══ 9. Organic & Attribution — ROAS-trend mount + 6-col table ═══
   * The mount div has fixed inline `padding:12px` which is fine; the
   * issue is the inner roas-trend module (rendered by roas-trend.js)
   * uses inline-styled SVG charts with a fixed left axis. Shrink mount
   * padding so the chart gets more pixels. */
  #mainContent #roasTrendMount {
    padding: 8px !important;
  }
  /* Tfoot total row — keep tabular-nums alignment */
  #mainContent .table-container tfoot td.mono {
    font-variant-numeric: tabular-nums !important;
  }

  /* ═══ 10. Marketing Overview — channel-grid stat-cards ═══
   * The 2nd stats-row (margin-top:8px) renders one stat-card per ad
   * platform (Meta/Google/Pinterest/Awin). On a 375px viewport pass-1's
   * 2-col grid puts platform names + stat-detail (a 2-line block) at
   * borderline-readable. Tighten internal text. */
  #mainContent .stats-row[style*="margin-top:8px"] .stat-card,
  #mainContent .stats-row[style*="margin-top: 8px"] .stat-card {
    padding: 10px 12px !important;
    min-height: 88px !important;
  }
  #mainContent .stats-row[style*="margin-top:8px"] .stat-detail,
  #mainContent .stats-row[style*="margin-top: 8px"] .stat-detail {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  /* Marketing freshness/CAPI strip — equal chip heights */
  #mainContent .mo-freshness-strip {
    gap: 6px !important;
  }
  #mainContent .mo-freshness-chip {
    font-size: 10.5px !important;
    padding: 3px 9px !important;
  }
  #mainContent .mo-capi-health {
    gap: 8px 12px !important;
    font-size: 10.5px !important;
    padding: 8px 10px !important;
  }
  #mainContent .mo-divergence-banner {
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 8px 0 !important;
  }
  /* mo-status-grid — channel reconnect tiles */
  #mainContent .mo-status-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .mo-reconnect-steps {
    gap: 6px !important;
  }
  #mainContent .mo-reconnect-step {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  /* Sparkline within hero stat-card — keep height bounded */
  #mainContent .mo-sparkline {
    margin-top: 6px !important;
    overflow: hidden !important;
  }

  /* ═══ 11. Refunds + Invoice Inbox detail rows + tab strip ═══ */
  #mainContent .refund-row {
    padding: 12px !important;
  }
  #mainContent .refund-detail-row {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  /* Invoice inbox tabs */
  #mainContent .ii-tab-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ii-tab {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  #mainContent .ii-tab-count {
    font-size: 10.5px !important;
    opacity: 0.75 !important;
  }
  /* Detail panel grid — 2-col field grid stacks on phone */
  #mainContent .ii-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .ii-detail {
    padding: 12px !important;
  }
  #mainContent .ii-detail-field {
    font-size: 12.5px !important;
  }
  #mainContent .ii-detail-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ii-detail-actions > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
  }
  #mainContent .ii-pdf-btn {
    min-height: 40px !important;
  }
  /* Filter row */
  #mainContent .ii-filter-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Upload zone — keep generous tap target */
  #mainContent .ii-upload-zone {
    padding: 18px 14px !important;
    font-size: 13px !important;
    text-align: center !important;
  }
  /* Selected row highlight */
  #mainContent .ii-row {
    padding: 10px 12px !important;
  }

  /* ═══ 12. Currency / mono cell wrapping — extend pass-3 §9 to .is/.kpi
   * surfaces that pass-3 didn't reach. Keep tabular-nums but allow
   * breaking on overflow as a last resort. */
  #mainContent .is-table .mono,
  #mainContent .is-cell-btn,
  #mainContent .kpi-card .kpi-value,
  #mainContent .nx-kpi-value,
  #mainContent .rf-card-base,
  #mainContent .rf-range-fill {
    font-variant-numeric: tabular-nums;
  }

  /* ═══ 13. KPI grids inside finance/forecast/nexus/analytics-dash ═══
   * Some inner views use `.kpi-grid-4` with their own 768 collapse to
   * 2-col. Reinforce here for consistent gap + pad and ensure no inline
   * variant slips past. */
  #mainContent .kpi-grid-4,
  #mainContent .kpi-grid-3 {
    gap: 8px !important;
  }
  #mainContent .kpi-card {
    padding: 12px !important;
    min-height: 76px !important;
  }
  #mainContent .kpi-card .kpi-label,
  #mainContent .nx-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .kpi-card .kpi-value {
    font-size: 20px !important;
  }

  /* ═══ 14. View-table generic — sticky thead + fluid columns ═══
   * monthly-pl + cashflow set `.view-table thead { position:sticky; top:0 }`
   * which conflicts with the app-header. Disable sticky on phones so
   * the page-header doesn't double-bump under a sticky thead under the
   * app-header. */
  #mainContent .view-table thead {
    position: static !important;
  }
  #mainContent .view-table {
    font-size: 12px !important;
  }
  #mainContent .view-table th,
  #mainContent .view-table td {
    padding: 6px 8px !important;
  }

  /* ═══ 15. Empty-state copy + skeleton padding inside scoped views ═══ */
  #mainContent .u-empty-state,
  #mainContent .empty-state {
    padding: 28px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  #mainContent .skeleton-block.u-input-lg,
  #mainContent .skeleton-block.u-input-sm {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile UX pass 4 — narrow refinement (<=420px) */
@media (max-width: 420px) {
  /* Income statement — collapse first-col further */
  #mainContent .is-table thead th:first-child,
  #mainContent .is-table tbody td:first-child {
    min-width: 110px !important;
    max-width: 130px !important;
    font-size: 11px !important;
  }
  /* Pricing-suggestions tab strip — 2 rows of 2-3 */
  #mainContent #ps-tabs > button {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 11.5px !important;
  }
  /* Initiatives stats-row chip text — tighter at very narrow */
  #mainContent .mi-channel-pill {
    font-size: 10px !important;
  }
  /* Invoice tabs — 2-up at 420 */
  #mainContent .ii-tab {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 11.5px !important;
  }
  /* Revenue forecast horizon — keep 3-up but smaller */
  #mainContent .rf-horizon-btn {
    font-size: 11.5px !important;
    padding: 6px 4px !important;
  }
  /* Marketing overview platform stat-cards — 1-col at very narrow so the
   * 2-line stat-detail stops overflowing. */
  #mainContent .stats-row[style*="margin-top:8px"],
  #mainContent .stats-row[style*="margin-top: 8px"] {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — System+Brief+Reviews+AI Ops + Global (Agent 6,
 * 2026-05-07)
 *
 * Scope: SECOND-ORDER mobile issues that pass 1/2/3 didn't reach. Each
 * fix targets a specific bleed at 375–420px that survived pass 3 because
 * pass 3 focused on container/toolbar/tab-row symmetry; pass 4 reaches
 * into the per-row data layouts and modal/overlay edge cases.
 *
 * Identified by walking brief.js / strategy-command.js / worker-heatmap.js
 * (AI Ops view) / reviews-moderation.js / system.js (Users + Edit modal +
 * Access Matrix) and grepping for class-list patterns that pass-3 missed:
 *   • .mb-ad-perf-grid / .mb-pl-grid / .mb-channel-breakdown — 3-col
 *     metric rows that crammed at 375px
 *   • .mb-focus-item — long task title pushed delete-X off-row
 *   • .mb-hr-emp-list — chip wrap was inheriting flex: nowrap
 *   • .ai-cmd / .ai-cron / .ai-summary — monospace command strings had
 *     white-space:nowrap and broke horizontal scroll
 *   • .sc-stats at <=480px — pass3-component CSS forced 1-col tall stack;
 *     restore 2-col + compress value font for phone
 *   • .sc-evidence pre — long evidence text pushed wide
 *   • .um-modal-actions / .um-modal-field — Edit User modal save/cancel
 *     row did not stack
 *   • .um-portal-url — long URL string overflowed copy button
 *   • .am-cell — ensure cells stay tight inside the access-matrix scroll
 *     so admins can still tap them without zoom
 *   • notification-panel left:right contradiction at 360px max-width
 *   • sidebar drawer width on a 375px viewport
 *
 * Companion to passes 1 / 2 / 3 — does NOT modify their blocks. Selectors
 * are scoped (#mainContent.specific or named classes); no global tag rules.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Brief — exec-summary metric tile rhythm ═══════════════════════
   * brief.js sets min-height:86px on .exec-summary-metric-card. With 4
   * tiles in a 2x2 grid that's 172px of stat strip plus header/narrative;
   * compress to 72px and let value font drop a hair so the strip is one
   * comfortable scroll-stop, not a screen-eater. */
  #mainContent .exec-summary-metric-card {
    min-height: 72px !important;
    padding: 9px 10px !important;
  }
  #mainContent .exec-summary-metric-value {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  #mainContent .exec-summary-metric-sub {
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }
  /* Exec-summary action items — wrap long bullets neatly */
  #mainContent .exec-summary-action-item {
    align-items: flex-start !important;
    gap: 8px !important;
  }
  #mainContent .exec-summary-action-text {
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  /* ═══ 2. Brief — Ad Performance + P&L grids: 3-col → 1-col ═══════════
   * .mb-ad-perf-grid + .mb-pl-grid render label/value pairs in a 3-col
   * grid template inherited from desktop. At 375px the right-side numbers
   * ($1,234 + 2.4x ROAS + $456) crash into each other. Stack to 1-col
   * with label-on-left/value-on-right rows. */
  #mainContent .mb-ad-perf-grid,
  #mainContent .mb-pl-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 6px !important;
  }
  #mainContent .mb-ad-perf-item,
  #mainContent .mb-pl-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    border-bottom: 1px dotted var(--border, #e3e1db) !important;
  }
  #mainContent .mb-ad-perf-item:last-child,
  #mainContent .mb-pl-item:last-child {
    border-bottom: none !important;
  }
  #mainContent .mb-ad-perf-label,
  #mainContent .mb-pl-label {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .mb-ad-perf-val,
  #mainContent .mb-pl-val {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ═══ 3. Brief — Channel breakdown rows: name/spend/roas ═══════════════
   * .mb-ch-row is name + spend + roas. Channel name "Google Shopping" can
   * wrap; the ROAS chip on the right needs to stay at the row tail. */
  #mainContent .mb-channel-breakdown {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }
  #mainContent .mb-ch-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    align-items: baseline !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
  }
  #mainContent .mb-ch-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #mainContent .mb-ch-spend,
  #mainContent .mb-ch-roas {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ═══ 4. Brief — Today's Focus row layout ═════════════════════════════
   * .mb-focus-item has check + title + source pill + delete-X on one row.
   * Long task title shoves the delete-X off the right edge. Use grid so
   * the X is anchored at column 4. */
  #mainContent .mb-focus-item {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--border, #e3e1db) !important;
  }
  #mainContent .mb-focus-item:last-child {
    border-bottom: none !important;
  }
  #mainContent .mb-focus-check {
    grid-column: 1 !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .mb-focus-title {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    font-size: 13px !important;
  }
  #mainContent .mb-focus-source {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 10.5px !important;
    color: var(--text-dim) !important;
    margin-top: 2px !important;
  }
  #mainContent .mb-focus-delete {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .mb-focus-add {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  #mainContent .mb-focus-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  #mainContent .mb-focus-add-btn {
    flex: 1 1 100% !important;
    min-height: 40px !important;
  }

  /* ═══ 5. Brief — Recommended actions + owner action rows + AI chips ══
   * Each line should wrap clean and have a 40px-tall tap target. */
  #mainContent .mb-rec-item {
    padding: 10px 12px !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .mb-owner-action-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }
  #mainContent .mb-ai-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  #mainContent .mb-ai-chip {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  /* ═══ 6. Brief — HR salary reminder employee chip list ════════════════ */
  #mainContent .mb-hr-emp-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  #mainContent .mb-hr-emp-chip {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
  }
  #mainContent .mb-hr-body {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #mainContent .mb-hr-stat {
    font-size: 13px !important;
  }

  /* ═══ 7. Brief — stockout row layout (sku 1fr + numbers nowrap) ══════ */
  #mainContent .mb-stockout-row {
    flex-wrap: nowrap !important;
    align-items: baseline !important;
  }
  #mainContent .mb-stockout-sku {
    max-width: none !important;
  }

  /* ═══ 8. AI Ops (Worker Activity AI tab) — command/cron strings wrap ══
   * .ai-cmd + .ai-cron use white-space:nowrap on the desktop. At 375px a
   * 90-char `python3 agents/foo.py --bar` overflows the card and forces a
   * horizontal page scroll. Force wrap; the text is monospace either way
   * so wrap-anywhere is fine. .ai-summary > div nowrap also needs to
   * relax so the summary chips stack instead of pushing one row off
   * screen. */
  #mainContent .ai-row-body .ai-cmd,
  #mainContent .ai-row-body .ai-cron,
  #mainContent .ai-cmd,
  #mainContent .ai-cron {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  #mainContent .ai-summary > div {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
  #mainContent .ai-bucket-header {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
  #mainContent .ai-row-body {
    min-width: 0 !important;
  }
  #mainContent .ai-row-body > div {
    overflow-wrap: anywhere !important;
  }
  /* Model pill stays compact — pass3 didn't size it */
  #mainContent .ai-model-pill {
    flex-shrink: 0 !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
  }

  /* ═══ 9. Strategy Command — sc-stats keep 2-col on phone ════════════
   * The view's own <=480px rule forces .sc-stats to 1fr (single tall
   * column) — 4 tall cards = ~340px of stat block before the user sees
   * a recommendation card. Override to keep 2x2 on phone with a smaller
   * value font. The .sc-stat-value 28px also has to drop. */
  #mainContent .sc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  #mainContent .sc-stat {
    padding: 10px 12px !important;
    min-height: 0 !important;
    border-radius: 8px !important;
  }
  #mainContent .sc-stat-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  #mainContent .sc-stat-label {
    font-size: 10.5px !important;
    letter-spacing: 0.3px !important;
    margin-top: 2px !important;
  }
  /* Long evidence dumps overflow horizontally — wrap + scroll vertically */
  #mainContent .sc-evidence {
    padding: 10px 12px !important;
    overflow-x: auto !important;
  }
  #mainContent .sc-evidence pre {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    font-size: 11px !important;
  }
  #mainContent .sc-toggle {
    min-height: 36px !important;
    padding: 6px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ═══ 10. Reviews — modal field rhythm + status badge legibility ═════ */
  #rmModal .rm-modal-card .rm-stars {
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }
  #mainContent .rm-status-badge {
    display: inline-block !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }
  /* Reviews row body — the rm preview cell uses nowrap+ellipsis. Allow
   * the title row above it to wrap so the card doesn't look truncated. */
  #mainContent .rm-preview {
    max-height: 60px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  /* Eligibility checkbox row — bigger tap target */
  #mainContent .rm-elig-toggle,
  #mainContent .rm-elig-select {
    width: 18px !important;
    height: 18px !important;
  }

  /* ═══ 11. System — Edit-User modal field rhythm + action stack ═══════
   * .um-modal-actions sits at the bottom of the modal with Cancel + Save
   * side-by-side. On 375px Save's "Save Changes" + Cancel's "Cancel" =
   * tight, but the bigger fix is .um-modal-field (label + input pair)
   * needs full-width inputs with iOS-zoom-safe 16px font. */
  .journey-overlay .um-modal-field,
  #mainContent .um-modal-field {
    margin-bottom: 12px !important;
  }
  .journey-overlay .um-modal-field input,
  .journey-overlay .um-modal-field select,
  #mainContent .um-modal-field input,
  #mainContent .um-modal-field select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .journey-overlay .um-modal-actions,
  #mainContent .um-modal-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }
  .journey-overlay .um-modal-cancel,
  .journey-overlay .um-modal-save,
  #mainContent .um-modal-cancel,
  #mainContent .um-modal-save {
    flex: 1 1 100% !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
  /* Save button on top, cancel below — common iOS confirmation pattern */
  .journey-overlay .um-modal-save,
  #mainContent .um-modal-save {
    order: 1 !important;
  }
  .journey-overlay .um-modal-cancel,
  #mainContent .um-modal-cancel {
    order: 2 !important;
  }

  /* ═══ 12. System — Portal URL row: long URL + copy button stack ══════ */
  #mainContent .um-portal-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  #mainContent .um-portal-label {
    flex: 1 1 100% !important;
    font-size: 12px !important;
  }
  #mainContent .um-portal-url {
    flex: 1 1 100% !important;
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    padding: 6px 8px !important;
    background: var(--surface-2) !important;
    border-radius: 4px !important;
  }
  #mainContent .um-portal-copy-btn {
    flex: 1 1 100% !important;
    min-height: 40px !important;
  }

  /* ═══ 13. System — Access Matrix cells inside table-scroll ═══════════
   * .am-cell stays 32x28 on desktop. The matrix has 6 cols (admin /
   * internal / warehouse / supply-chain / accounting / external) × N
   * rows; on a 375px screen the header cell + 6 toggles must scroll
   * horizontally. Keep cell width compact + ensure the cell tap target
   * is at least 32px and the surrounding TD has no extra padding that
   * fights the scroll. */
  #mainContent .am-cell {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  #mainContent .am-cell:hover {
    transform: none !important; /* avoid layout jump in tight grids */
  }

  /* ═══ 14. System — Create New User form — pin reveal + msg row ══════ */
  #mainContent .um-form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .um-form-group {
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .um-msg {
    font-size: 12px !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
  }

  /* ═══ 15. Worker Heatmap — sticky day-label column on horizontal scroll
   * .wh-grid is `display:grid` with `width:max-content` inside an
   * .wh-grid-wrap that scrolls horizontally. The first column shows day
   * labels (Mon/Tue/Wed); when the user scrolls right to see hour-23
   * cells, the day labels disappear off-left. Pin the day-label cell
   * sticky so it's always visible. */
  #mainContent .wh-grid {
    position: relative !important;
  }
  #mainContent .wh-day-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: var(--surface, #fff) !important;
    padding-right: 6px !important;
    box-shadow: 2px 0 6px -3px rgba(0, 0, 0, 0.15) !important;
  }
  /* Hour labels row needs same sticky treatment to align */
  #mainContent .wh-hour-labels {
    font-size: 10px !important;
    overflow: visible !important;
  }
  #mainContent .wh-legend {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
  #mainContent .wh-legend-cell {
    width: 16px !important;
    height: 16px !important;
  }

  /* ═══ 16. Alerts — pending-counter chip + body wrap ══════════════════
   * pass-3 sized .alerts-row but not the .alerts-row-pending counter
   * chip that floats at row-end. Force a min-width so single-digit "3"
   * still reads as a chip, and let it shrink-wrap to row-tail. */
  #mainContent .alerts-row-pending {
    flex-shrink: 0 !important;
    min-width: 32px !important;
    text-align: center !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
  #mainContent .alerts-row-body {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .alerts-domain-count {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
  }
  #mainContent .alerts-domain-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #mainContent .alerts-push-dot {
    flex-shrink: 0 !important;
    width: 10px !important;
    height: 10px !important;
  }

  /* ═══ 17. Global — Sidebar drawer at 375px ═══════════════════════════
   * Existing .sidebar mobile rule lives at line 1016 of pass-1. At 375px
   * a 100vw sidebar feels heavy and the user can't peek the page behind.
   * Cap at 88vw / 320px so a tappable backdrop strip remains. */
  .sidebar.open,
  .sidebar.mobile-open,
  .sidebar[aria-expanded="true"] {
    width: min(88vw, 320px) !important;
    max-width: 320px !important;
  }
  /* Sidebar internal scroll — when nav has many items it must scroll
   * inside without dragging the page behind */
  .sidebar nav,
  .sidebar .sidebar-content
  .sidebar > ul {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  /* Active sidebar item — clearer highlight on dark mode */
  .sidebar a.active,
  .sidebar .nav-item.active,
  .sidebar [aria-current="page"] {
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    border-left: 3px solid var(--accent) !important;
  }

  /* ═══ 18. Global — Notification panel + bell badge positioning ══════
   * pass-3 set max-height; pass-1 set width:calc(100vw-24px) max-width
   * 360px with both left:12 + right:12 — that combo over-constrains.
   * Keep the right-anchored placement and let max-width win. */
  .notification-panel {
    left: auto !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 360px !important;
    border-radius: 10px !important;
  }
  .notification-bell-btn {
    position: relative !important;
  }
  .notification-bell-btn .badge,
  .notification-bell-btn .notification-count {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    border-radius: 8px !important;
  }

  /* ═══ 19. Global — Modal overlay safe-area + scroll-lock ═════════════ */
  .journey-overlay,
  .modal-overlay {
    padding: 12px !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .journey-overlay .journey-modal,
  .journey-overlay .modal-380,
  .journey-overlay .modal-420 {
    width: 100% !important;
    max-width: 480px !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ═══ 20. Global — Toast safe-area + readability ═════════════════════ */
  #toast-container .toast,
  .toast {
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
  }

  /* ═══ 21. Page transitions — kill jank on view swap ══════════════════
   * Some views animate a fade-in via .view-fade-enter; on slow phones

   * the keyframe can cause a paint stutter. Cap the duration. */
  #mainContent .view-fade-enter
  #mainContent .view-fade-enter-active,
  #mainContent [data-view-transition] {
    animation-duration: 180ms !important;
  }
}

/* Pass 4 — narrow-viewport (<=420px) refinements (sibling block) */
@media (max-width: 420px) {
  /* Brief — exec metric tiles drop to compact */
  #mainContent .exec-summary-metric-card {
    min-height: 64px !important;
    padding: 8px !important;
  }
  #mainContent .exec-summary-metric-value {
    font-size: 17px !important;
  }
  /* Strategy stats tighter */
  #mainContent .sc-stat-value {
    font-size: 18px !important;
  }
  #mainContent .sc-stat {
    padding: 8px 10px !important;
  }
  /* AI summary chips smaller */
  #mainContent .ai-summary {
    font-size: 11px !important;
  }
  #mainContent .ai-summary strong {
    font-size: 12px !important;
  }
  /* Brief P&L / Ad-perf rows even tighter */
  #mainContent .mb-ad-perf-item,
  #mainContent .mb-pl-item {
    padding: 3px 0 !important;
  }
  /* Sidebar slightly narrower */
  .sidebar.open,
  .sidebar.mobile-open,
  .sidebar[aria-expanded="true"] {
    width: 86vw !important;
  }
}

/* Pass 4 — Dark-mode refinements at 375px ─────────────────────────────
 * Some surfaces above use var(--surface, #fff) as a sticky-bg fallback.
 * In dark mode the fallback should be the dark surface, not white. This
 * targets only the new pass-4 sticky/elevated surfaces. */
@media (max-width: 768px) {
  [data-theme="dark"] #mainContent .wh-day-label,
  .dark #mainContent .wh-day-label {
    background: var(--surface, #0d1117) !important;
    box-shadow: 2px 0 6px -3px rgba(0, 0, 0, 0.5) !important;
  }
  [data-theme="dark"] #mainContent .um-portal-url,
  .dark #mainContent .um-portal-url {
    background: var(--surface-2, #161b22) !important;
  }
  [data-theme="dark"] #mainContent .mb-hr-emp-chip,
  .dark #mainContent .mb-hr-emp-chip {
    background: var(--surface-2, #161b22) !important;
    border-color: var(--border, #30363d) !important;
  }
  [data-theme="dark"] #mainContent .mb-ad-perf-item,
  [data-theme="dark"] #mainContent .mb-pl-item,
  .dark #mainContent .mb-ad-perf-item,
  .dark #mainContent .mb-pl-item {
    border-bottom-color: var(--border, #30363d) !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   2026-06 mobile shell polish — fluid swipe + refined header/hamburger
   - overscroll-behavior-x stops the viewport from panning sideways
     during a swipe ("goes all the way over"); overflow-x:hidden alone
     does not stop iOS rubber-band overscroll.
   - header gets a hairline + soft depth shadow so it reads as a pinned
     app bar rather than a flat strip.
   - the hamburger becomes a proper rounded, tactile control.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html,
  body {
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }
  .app,
  .main {
    overscroll-behavior-x: contain;
  }

  /* Pinned app bar: refined surface, hairline, and a soft shadow that
     lifts it above the scrolling content. */
  .header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 20px -16px rgba(0, 0, 0, 0.45) !important;
    z-index: 30 !important;
  }
  .header-left .logo,
  .logo {
    letter-spacing: 0.16em !important;
    font-weight: 700 !important;
  }

  /* Tactile, rounded hamburger control. */
  .header .mobile-menu-btn.icon-btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    color: var(--text) !important;
    transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .header .mobile-menu-btn.icon-btn:hover {
    border-color: var(--border-hover, var(--border)) !important;
  }
  .header .mobile-menu-btn.icon-btn:active {
    transform: scale(0.92) !important;
    background: var(--surface-3, var(--surface-2)) !important;
  }
  .header .mobile-menu-btn.icon-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Match the search/theme icon buttons to the same tactile treatment so the
     header action cluster reads as one cohesive set. */
  .header .shell-search-btn.icon-btn,
  .header .theme-toggle-btn.icon-btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .header .shell-search-btn.icon-btn:active,
  .header .theme-toggle-btn.icon-btn:active {
    transform: scale(0.92) !important;
    background: var(--surface-3, var(--surface-2)) !important;
  }

  /* The drawer rail itself: slightly rounder leading edge + deeper, softer
     shadow so it floats over the dimmed backdrop. */
  .sidebar {
    box-shadow: 6px 0 32px -6px rgba(0, 0, 0, 0.34) !important;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   2026-06 mobile Tier-0 polish — iOS zoom-on-focus guard
   Any text field smaller than 16px makes Safari zoom the whole viewport on
   focus, then the user has to pinch back out — the most jarring "this is a
   web page" moment on a phone. This is a STRUCTURAL catch-all so individual
   views (which carry inline font-sizes) can't opt out and reintroduce it.
   Checkboxes/radios/ranges/colors are excluded (they don't zoom and 16px
   would resize them).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #mainContent input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  #mainContent select,
  #mainContent textarea,
  .search-input,
  .form-input {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE DENSITY LAYER — 2026-07-16 mega-audit (Cole: "big tags/cards →
   simple columns; see a lot of information at once, on every tab").
   Deliberately LAST in the file: these rules are the dashboard-wide density
   contract and must win the cascade over the per-view fixes that accreted
   above. Four systems live here:
     1. Compact KPI/stat tiles     — 3-per-row, 54px, 19px values
     2. Scroll-strip chips/tabs    — every pill/tab group = one scrollable row
     3. Compact filter bars        — selects/dates pair up 2-per-row
     4. im-dense two-line rows     — reusable dense-table pattern (from MTO)
   Per-view work opts tables in via class hooks; unlisted views inherit 1-3
   automatically wherever they use the shared class vocabulary.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Compact KPI / stat tiles ─────────────────────────────────────────
     One treatment for every stat band. 3-per-row; exactly-4-tile bands go
     2×2 (reads better than 3+1). Values nowrap so digits never stack. */
  #mainContent#mainContent .stats-row,
  #mainContent#mainContent .stat-grid,
  #mainContent#mainContent .stat-cards,
  #mainContent#mainContent .sup-stats-row,
  #mainContent#mainContent .sys-stats-row,
  #mainContent#mainContent .kpi-grid,
  #mainContent#mainContent .kpi-grid-3,
  #mainContent#mainContent .kpi-grid-4,
  #mainContent#mainContent .kpi-grid-5,
  #mainContent#mainContent [class*="stats-row"],
  #mainContent#mainContent [class*="stat-grid"],
  #mainContent#mainContent .freight-grid,
  #mainContent#mainContent .fc-kpi-row,
  #mainContent#mainContent .sc-kpi-grid,
  #mainContent#mainContent .dnd-stats,
  #mainContent#mainContent .dnd-skeleton-stats,
  #mainContent#mainContent .dsg-stats,
  #mainContent#mainContent .ra-cards,
  #mainContent#mainContent .sd-cards,
  #mainContent#mainContent .pt-stats,
  #mainContent#mainContent .dc-kpi-grid,
  #mainContent#mainContent .po-stat-grid,
  #mainContent#mainContent .po-kpi-grid,
  #mainContent#mainContent .sr-kpi-grid,
  #mainContent#mainContent .sr-stat-mosaic,
  #mainContent#mainContent .log-kpi-row,
  #mainContent#mainContent .wh-kpi-row,
  #mainContent#mainContent .la-kpi-grid,
  #mainContent#mainContent .oex-stat-cards,
  #mainContent#mainContent .sa-kpi-grid,
  #mainContent#mainContent .onb-stats-row,
  #mainContent#mainContent .c360-seg-cards,
  #mainContent#mainContent .si-cards,
  #mainContent#mainContent .sup-kpi-band,
  #mainContent#mainContent [class*="-kpi-row"],
  #mainContent#mainContent [class*="-kpi-grid"],
  #mainContent#mainContent .jv-aiops-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    align-items: stretch !important;
  }
  /* Exactly 4 tiles → 2×2. */
  #mainContent#mainContent .stats-row:has(> :nth-child(4):last-child),
  #mainContent#mainContent .stat-grid:has(> :nth-child(4):last-child),
  #mainContent#mainContent .stat-cards:has(> :nth-child(4):last-child),
  #mainContent#mainContent .kpi-grid:has(> :nth-child(4):last-child),
  #mainContent#mainContent .kpi-grid-4:has(> :nth-child(4):last-child),
  #mainContent#mainContent [class*="stats-row"]:has(> :nth-child(4):last-child),
  #mainContent#mainContent [class*="stat-grid"]:has(> :nth-child(4):last-child),
  #mainContent#mainContent .fc-kpi-row:has(> :nth-child(4):last-child),
  #mainContent#mainContent .wh-kpi-row:has(> :nth-child(4):last-child),
  #mainContent#mainContent .log-kpi-row:has(> :nth-child(4):last-child),
  #mainContent#mainContent [class*="-kpi-row"]:has(> :nth-child(4):last-child),
  #mainContent#mainContent [class*="-kpi-grid"]:has(> :nth-child(4):last-child),
  #mainContent#mainContent .po-stat-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Tiny count strips (4 short numbers, e.g. chargebacks) stay 4-across. */
  #mainContent#mainContent .cb-stat-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* Tile chrome: compact. */
  #mainContent#mainContent .stat-card,
  #mainContent#mainContent .sup-stat-card,
  #mainContent#mainContent .sys-stat-card,
  #mainContent#mainContent .kpi-card,
  #mainContent#mainContent [class*="-stat-card"],
  #mainContent#mainContent [class*="-kpi-card"],
  #mainContent#mainContent .si-card,
  #mainContent#mainContent .rm-stat-card,
  #mainContent#mainContent .dnd-stat,
  #mainContent#mainContent .dsg-stat,
  #mainContent#mainContent .ra-card,
  #mainContent#mainContent .sd-card,
  #mainContent#mainContent .cb-stat-card {
    min-height: 52px !important;
    height: auto !important;
    padding: 7px 9px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    min-width: 0 !important;
    width: auto !important;
    flex: none !important;
  }
  #mainContent#mainContent .stat-label,
  #mainContent#mainContent .sup-stat-label,
  #mainContent#mainContent .sys-stat-label,
  #mainContent#mainContent .kpi-label,
  #mainContent#mainContent [class*="-stat-label"],
  #mainContent#mainContent [class*="-card-label"],
  #mainContent#mainContent [class*="-kpi-label"] {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  #mainContent#mainContent .stat-value,
  #mainContent#mainContent .sup-stat-value,
  #mainContent#mainContent .sys-stat-value,
  #mainContent#mainContent .kpi-value,
  #mainContent#mainContent [class*="-stat-value"],
  #mainContent#mainContent [class*="-stat-num"],
  #mainContent#mainContent [class*="-card-value"],
  #mainContent#mainContent [class*="-card-num"],
  #mainContent#mainContent [class*="-kpi-value"] {
    font-size: 19px !important;
    line-height: 1.05 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
  }
  /* Sub/delta lines inside tiles: one 9px line, never a paragraph. */
  #mainContent#mainContent .stat-card [class*="-sub"],
  #mainContent#mainContent .stat-card small,
  #mainContent#mainContent .stat-card .stat-detail,
  #mainContent#mainContent .kpi-card [class*="-sub"],
  #mainContent#mainContent .kpi-card small,
  #mainContent#mainContent [class*="-stat-card"] [class*="-sub"],
  #mainContent#mainContent [class*="-stat-card"] .stat-detail,
  #mainContent#mainContent [class*="-kpi-card"] [class*="-sub"] {
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Orphan-guard neutralization: the pass-1 rules above stretch the last
     odd tile full-width — wrong for the 3-col grids this layer creates,
     and a density anti-pattern besides. A half-empty final row beats a
     billboard tile. (Selectors mirror every guard defined earlier.) */
  #mainContent#mainContent .stat-cards > *:nth-child(odd):last-child,
  #mainContent#mainContent .stat-grid > *:nth-child(odd):last-child,
  #mainContent#mainContent .stats-row > *:nth-child(odd):last-child,
  #mainContent#mainContent .kpi-grid > *:nth-child(odd):last-child,
  #mainContent#mainContent .kpi-grid-3 > *:nth-child(odd):last-child,
  #mainContent#mainContent .kpi-grid-4 > *:nth-child(odd):last-child,
  #mainContent#mainContent .kpi-grid-5 > *:nth-child(odd):last-child,
  #mainContent#mainContent .sup-stats-row > *:nth-child(odd):last-child,
  #mainContent#mainContent .sys-stats-row > *:nth-child(odd):last-child,
  #mainContent#mainContent [class*="stats-row"] > *:nth-child(odd):last-child,
  #mainContent#mainContent [class*="stat-grid"] > *:nth-child(odd):last-child,
  #mainContent#mainContent .log-kpi-row > *:nth-child(odd):last-child,
  #mainContent#mainContent .la-kpi-grid > *:nth-child(odd):last-child,
  #mainContent#mainContent .oex-stat-cards > *:nth-child(odd):last-child,
  #mainContent#mainContent .po-stat-grid > *:nth-child(odd):last-child,
  #mainContent#mainContent .po-kpi-grid > *:nth-child(odd):last-child,
  #mainContent#mainContent .c360-seg-cards > *:nth-child(odd):last-child,
  #mainContent#mainContent .sa-kpi-grid > *:nth-child(odd):last-child,
  #mainContent#mainContent .sd-cards > *:nth-child(odd):last-child,
  #mainContent#mainContent .onb-stats-row > *:nth-child(odd):last-child,
  #mainContent#mainContent .sup-stats-row > .sup-stat-card:nth-child(odd):last-child,
  #mainContent#mainContent .si-cards > .si-card:nth-child(odd):last-child {
    grid-column: auto !important;
    border-width: 1px !important;
  }
  /* The Customer 360 failure panel is not a KPI tile. As the only child it was
     caught by the orphan neutralizer above and squeezed into one of the three
     density tracks, wrapping a two-sentence recovery state one word per line. */
  #mainContent#mainContent .kpi-grid > .c360-empty:only-child {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  /* ── 2. Scroll-strip chips / tabs ────────────────────────────────────────
     Every pill filter group, sub-tab bar, and hub subtab strip becomes ONE
     horizontally scrollable row (momentum scroll, hidden scrollbar) instead
     of wrapping into 2-4 rows of giant chips. Tap height stays >=36px. */
  #mainContent#mainContent .pick-tab-group.hub-subtabs,
  #mainContent#mainContent .sub-tab-bar,
  #mainContent#mainContent .oex-tabs,
  #mainContent#mainContent .po-pills,
  #mainContent#mainContent .rm-tab-bar,
  #mainContent#mainContent .si-tabs,
  #mainContent#mainContent .c360-seg-filters,
  #mainContent#mainContent .pi-margin-tabs,
  #mainContent#mainContent .lf-filter-group,
  #mainContent#mainContent .date-range-bar,
  #mainContent#mainContent .mc-cat-bar,
  #mainContent#mainContent .toolbar:has(> .ret-filter-btn),
  #mainContent#mainContent .pick-tab-group[class*="hub-subtabs"],
  #mainContent#mainContent .jv-tabs,
  #mainContent#mainContent .pr-tabs,
  #mainContent#mainContent .ms-tabs,
  #mainContent#mainContent .mkt-btn-row,
  #mainContent#mainContent .omap-toolbar,
  #mainContent#mainContent #ps-tabs,
  #mainContent#mainContent .tpx .tx-cc-nav,
  #mainContent#mainContent .tpx .tx-filters,
  #mainContent#mainContent .tpx .tx-toolbar,
  #mainContent#mainContent .mto-stage-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    max-width: 100% !important;
  }
  #mainContent#mainContent .pick-tab-group.hub-subtabs::-webkit-scrollbar,
  #mainContent#mainContent .sub-tab-bar::-webkit-scrollbar,
  #mainContent#mainContent .oex-tabs::-webkit-scrollbar,
  #mainContent#mainContent .po-pills::-webkit-scrollbar,
  #mainContent#mainContent .rm-tab-bar::-webkit-scrollbar,
  #mainContent#mainContent .si-tabs::-webkit-scrollbar,
  #mainContent#mainContent .c360-seg-filters::-webkit-scrollbar,
  #mainContent#mainContent .pi-margin-tabs::-webkit-scrollbar,
  #mainContent#mainContent .lf-filter-group::-webkit-scrollbar,
  #mainContent#mainContent .date-range-bar::-webkit-scrollbar,
  #mainContent#mainContent .mc-cat-bar::-webkit-scrollbar,
  #mainContent#mainContent .mto-stage-filter::-webkit-scrollbar { display: none; }

  #mainContent#mainContent .pick-tab-group.hub-subtabs > *,
  #mainContent#mainContent .sub-tab-bar > *,
  #mainContent#mainContent .oex-tabs > *,
  #mainContent#mainContent .po-pills > *,
  #mainContent#mainContent .rm-tab-bar > *,
  #mainContent#mainContent .si-tabs > *,
  #mainContent#mainContent .c360-seg-filters > *,
  #mainContent#mainContent .pi-margin-tabs > *,
  #mainContent#mainContent .date-range-bar > *,
  #mainContent#mainContent .mc-cat-bar > *,
  #mainContent#mainContent .lf-filter-group > .ret-filter-btn,
  #mainContent#mainContent .toolbar > .ret-filter-btn,
  #mainContent#mainContent .pick-tab-group[class*="hub-subtabs"] > *,
  #mainContent#mainContent .jv-tabs > *,
  #mainContent#mainContent .pr-tabs > *,
  #mainContent#mainContent .ms-tabs > *,
  #mainContent#mainContent .mkt-btn-row > *,
  #mainContent#mainContent .omap-toolbar > *,
  #mainContent#mainContent #ps-tabs > *,
  #mainContent#mainContent .tpx .tx-cc-nav > *,
  #mainContent#mainContent .tpx .tx-filters > *,
  #mainContent#mainContent .tpx .tx-toolbar > *,
  #mainContent#mainContent .mto-stage-filter > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    border-radius: 16px !important;
    line-height: 1.2 !important;
  }
  /* Neutralize pass-1 odd:last-child full-width stretchers for these. */
  #mainContent#mainContent .pick-tab-group > .pick-tab:nth-child(odd):last-child,
  #mainContent#mainContent .oex-tabs > .oex-tab:nth-child(odd):last-child,
  #mainContent#mainContent .lf-filter-group > .ret-filter-btn:nth-child(odd):last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    grid-column: auto !important;
  }

  /* ── 3. Compact filter bars ──────────────────────────────────────────────
     Full-width one-per-row selects/dates are a screen tax: pair them.
     Search inputs keep the full row. */
  #mainContent#mainContent .la-filter-bar,
  #mainContent#mainContent .dnd-toolbar,
  #mainContent#mainContent .dsg-toolbar,
  #mainContent#mainContent .dc-filter-bar,
  #mainContent#mainContent .rm-filters,
  #mainContent#mainContent .sa-filter-bar,
  #mainContent#mainContent .mc-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
  }
  #mainContent#mainContent .la-filter-bar > input[type="search"],
  #mainContent#mainContent .la-filter-bar > input[type="text"],
  #mainContent#mainContent .dnd-toolbar > input[type="search"],
  #mainContent#mainContent .dnd-toolbar > input[type="text"],
  #mainContent#mainContent .dsg-toolbar > input[type="search"],
  #mainContent#mainContent .dsg-toolbar > input[type="text"],
  #mainContent#mainContent .dc-filter-bar > input[type="search"],
  #mainContent#mainContent .dc-filter-bar > input[type="text"],
  #mainContent#mainContent .rm-filters > input[type="search"],
  #mainContent#mainContent .rm-filters > input[type="text"],
  #mainContent#mainContent .mc-filter-bar > input[type="search"],
  #mainContent#mainContent .mc-filter-bar > input[type="text"] {
    grid-column: 1 / -1 !important;
  }
  #mainContent#mainContent .la-filter-bar select,
  #mainContent#mainContent .dnd-toolbar select,
  #mainContent#mainContent .dsg-toolbar select,
  #mainContent#mainContent .dc-filter-bar select,
  #mainContent#mainContent .rm-filters select,
  #mainContent#mainContent .mc-filter-bar select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* ── 4. im-dense: reusable two-line dense rows ───────────────────────────
     The proven MTO mobile pattern, generalized. A view opts a table in with
     class="im-dense" + data-mobile-table-skip="true" on the table (skips
     hydrateMobileTables), then tags cells:
       td[data-dr="cb"]      checkbox, spans both lines, left
       td[data-dr="primary"] line 1 lead (order #/SKU/name) — bold, nowrap
       td[data-dr="pill"]    status pill, spans both lines, right
       td[data-dr="l2a"]     line 2 left   (mono id / secondary key)
       td[data-dr="l2b"]     line 2 middle (name — truncates)
       td[data-dr="l2c"]     line 2 right  (age/qty/amount)
     ANY OTHER td IS HIDDEN — detail lives in the row-tap expansion. New
     columns degrade safely (the MTO lesson: unplaced cells mangle the grid).
     Result: ~64px/row vs ~350-600px cardified. */
  /* min-width:0 is the load-bearing override: a base rule gives dashboard
     tables min-width:480px (so wide tables scroll on mobile), which pinned the
     im-dense table to 480px and pushed the grid's right columns off a 375px
     screen. im-dense is explicitly a fits-the-viewport layout, so it opts out. */
  #mainContent#mainContent table.im-dense {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent#mainContent table.im-dense tbody tr { min-width: 0 !important; }
  /* Kill the horizontal-scroll wrappers around an im-dense table (same fix MTO
     uses at .table-container:has(.mto-row)). Without this the .table-scroll
     container lets the grid grow to its content width (~414px), pushing the
     status pill + chevron off the right edge of a 375px screen. Forcing the
     wrappers to overflow:visible constrains the table to the viewport, so the
     grid's fr columns shrink and the customer name ellipsises — pill fits. */
  #mainContent#mainContent .table-container:has(table.im-dense),
  #mainContent#mainContent .table-scroll:has(> table.im-dense) {
    overflow: visible !important;
    max-height: none !important;
    max-width: 100% !important;
  }
  #mainContent#mainContent table.im-dense thead { display: none !important; }
  #mainContent#mainContent table.im-dense tbody { display: block !important; width: 100% !important; }
  #mainContent#mainContent table.im-dense tbody tr {
    display: grid !important;
    /* Cap the right-hand columns (age + status pill) with minmax so a greedy
       max-content pill can't push itself off a 375px screen; the two fr
       columns (id/sku + customer) absorb all remaining shrink and ellipsise.
       The whole grid is then guaranteed to fit the viewport width. */
    grid-template-columns: 20px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 34px) minmax(0, 82px);
    grid-auto-rows: auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--surface-1, var(--surface)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    margin: 0 0 5px !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }
  #mainContent#mainContent table.im-dense tbody tr > td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
  }
  #mainContent#mainContent table.im-dense tbody tr > td::before { display: none !important; }
  #mainContent#mainContent table.im-dense tbody tr > td:not([data-dr]) { display: none !important; }
  /* Shared empty-state row: tableEmptyRow() emits a single full-width <td>
     with no data-dr — keep it visible and spanning the whole card so an
     empty im-dense table shows its "nothing here" message instead of a blank. */
  #mainContent#mainContent table.im-dense tbody tr.table-empty-row,
  #mainContent#mainContent table.im-dense tbody tr:has(> td[colspan]) {
    display: block !important;
    padding: 12px 10px !important;
    text-align: center;
  }
  #mainContent#mainContent table.im-dense tbody tr.table-empty-row > td,
  #mainContent#mainContent table.im-dense tbody tr > td[colspan] {
    display: block !important;
    grid-column: 1 / -1 !important;
    text-align: center;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="cb"] {
    grid-row: 1 / 3; grid-column: 1;
    display: flex !important; align-items: center;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="cb"] input { width: 18px; height: 18px; }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] {
    grid-row: 1; grid-column: 2 / 4;
    display: flex !important; align-items: center; gap: 4px;
    font-weight: 600; color: var(--text) !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] > * { flex: 0 0 auto; min-width: 0; }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="pill"] {
    grid-row: 1 / 3; grid-column: 5;
    justify-self: end; align-self: center;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="pill"] .pill,
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="pill"] [class*="badge"],
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="pill"] [class*="status"] {
    font-size: 10px !important; padding: 3px 8px !important; font-weight: 700;
    border-radius: 11px; white-space: nowrap; display: inline-flex; align-items: center;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="l2a"] {
    grid-row: 2; grid-column: 2;
    font-size: 11px !important; color: var(--text-dim);
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="l2b"] {
    grid-row: 2; grid-column: 3;
    font-size: 11px !important; color: var(--text-muted);
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="l2c"] {
    grid-row: 2; grid-column: 4;
    justify-self: end;
    font-size: 11px !important; color: var(--text-dim);
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
  }
  /* Optional third line for views that genuinely need one more field row. */
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="l3"] {
    grid-row: 3; grid-column: 2 / 6;
    font-size: 10.5px !important; color: var(--text-dim);
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }

  /* ── im-dense polish 2026-07-17 (Cole: "copy the MTO row format") ─────────
     Match the clean MTO card: one thin two-line row, primary line shows the
     id + a single inline link icon (not a stack of action glyphs), a chevron
     signals the whole row is tap-to-expand. */
  /* Checkbox stays a small 18px control, not a tall touch box that balloons
     the row height. */
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="cb"] input {
    width: 18px !important; height: 18px !important;
    min-width: 18px !important; min-height: 18px !important;
    margin: 0 !important;
  }
  /* Primary line: the id link + ONE inline external-link icon. Secondary
     action glyphs (shipping-timeline, copy-status-url — the <span> icons)
     were stacking onto a second line and making the row tall + messy; hide
     them on mobile (both remain reachable from the row-tap detail). The
     kept Shopify link is an <a>, so hiding <span>.order-link-icon leaves it. */
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] {
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] span.order-link-icon {
    display: none !important;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] a.order-link-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    color: var(--accent);
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] .mto-order-num-link,
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] .sku-link {
    font-size: 13px !important; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 !important;
  }
  /* Links inside a dense row must NOT keep their 44px touch-target min-height —
     that made the order-# link a 44px-tall block, so its text sat at the top
     and the inline ↗ (vertically centered) read as a second line, ballooning
     the row to ~77px. The whole row is the tap target (it carries data-action),
     so the inner links can be their natural text height. */
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr] .mto-order-num-link,
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr] .sku-link,
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr] a,
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr] .order-link-icon {
    display: inline-flex !important;
    align-items: center;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
  }
  /* These three controls perform actions distinct from the row's expansion,
     so they need their own non-overlapping hit boxes. 32px fits inside the
     existing two-line card without restoring the old 44px row bloat. */
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] .mto-order-num-link,
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="l2a"] .ful-product-link {
    min-height: 32px !important;
    padding-block: 6px !important;
  }
  #mainContent#mainContent table.im-dense tbody tr > td[data-dr="primary"] svg {
    width: 12px !important; height: 12px !important; flex: 0 0 auto;
  }
  /* Chevron affordance on tap-to-expand rows (those carry a data-action),
     mirroring the MTO card's › marker. Non-interactive im-dense rows skip it. */
  #mainContent#mainContent table.im-dense tbody tr[data-action] {
    position: relative;
    padding-right: 22px !important;
    cursor: pointer;
  }
  #mainContent#mainContent table.im-dense tbody tr[data-action]::after {
    content: '\203A';
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 18px; line-height: 1; color: var(--text-dim);
    pointer-events: none;
  }

  /* ── 5. Compact fallback for opted-out (non-im-dense) tables ─────────────
     A view that sets data-mobile-table-skip="true" on a wide table keeps a
     real table (usually inside an overflow-x:auto wrapper that scrolls
     sideways) instead of exploding into tall cards. Give those a dense
     resting style by default — small padding + font — so they read compact
     without every view hand-writing it. im-dense tables carry their own
     higher-specificity rules and are excluded. Views can still override. */
  #mainContent table[data-mobile-table-skip="true"]:not(.im-dense) th,
  #mainContent table[data-mobile-table-skip="true"]:not(.im-dense) td {
    padding: 5px 8px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
  }
  #mainContent [data-mobile-table-skip="true"]:not(table) table:not(.im-dense) th,
  #mainContent [data-mobile-table-skip="true"]:not(table) table:not(.im-dense) td {
    padding: 5px 8px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEGMENTED FILTER BOXES — 2026-07-17 (Cole)
   "Instead of one big pill per filter that you scroll far across, put all the
   filters together in the same box, closer, with a line between each." The
   status/stage filter rows on All Orders, the MTO Pipeline, and the Returns
   Pipeline become ONE bordered box: segments butted together with hairline
   dividers, the whole box scrolls horizontally if it overflows. Placed last so
   it overrides the individual-pill scroll-strip treatment above.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #mainContent#mainContent .lf-filter-group,
  #mainContent#mainContent .toggle-group[data-action-group="mto-stage-filter"],
  #mainContent#mainContent .prod-filter-pills,
  #mainContent#mainContent .toolbar:has(> .ret-filter-btn) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    background: var(--surface-2, rgba(0,0,0,0.04)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #mainContent#mainContent .lf-filter-group::-webkit-scrollbar,
  #mainContent#mainContent .toggle-group[data-action-group="mto-stage-filter"]::-webkit-scrollbar,
  #mainContent#mainContent .prod-filter-pills::-webkit-scrollbar,
  #mainContent#mainContent .toolbar:has(> .ret-filter-btn)::-webkit-scrollbar { display: none; }

  #mainContent#mainContent .lf-filter-group > .ret-filter-btn,
  #mainContent#mainContent .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn,
  #mainContent#mainContent .prod-filter-pills > .filter-pill,
  #mainContent#mainContent .toolbar:has(> .ret-filter-btn) > .ret-filter-btn {
    flex: 0 0 auto !important;
    border: none !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 7px 12px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    color: var(--text-muted) !important;
  }
  /* Fulfillment's 12px segmented controls measured 4.13:1 in the live light
     phone render. They are interactive even while counts are unavailable, so
     use the body-safe label color instead of styling them like disabled text. */
  #mainContent#mainContent .lf-filter-group > .ret-filter-btn {
    color: var(--text) !important;
  }
  /* Last segment carries no trailing divider. */
  #mainContent#mainContent .lf-filter-group > .ret-filter-btn:last-child,
  #mainContent#mainContent .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn:last-child,
  #mainContent#mainContent .prod-filter-pills > .filter-pill:last-child,
  #mainContent#mainContent .toolbar:has(> .ret-filter-btn) > .ret-filter-btn:last-child {
    border-right: none !important;
  }
  /* Active segment reads as selected: filled surface + stronger text. */
  #mainContent#mainContent .lf-filter-group > .ret-filter-btn.active,
  #mainContent#mainContent .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn.active,
  #mainContent#mainContent .prod-filter-pills > .filter-pill.active,
  #mainContent#mainContent .toolbar:has(> .ret-filter-btn) > .ret-filter-btn.active {
    background: var(--surface) !important;
    color: var(--text) !important;
    font-weight: 650 !important;
  }
  /* ── Support inbox: pair the two filter dropdowns on one row (Cole
     2026-07-17: side-by-side instead of two stacked full-width selects). ── */
  #mainContent#mainContent .iv2-app .iv2-chip-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #mainContent#mainContent .iv2-app .iv2-chip-row .iv2-chip-select {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Count chips inside segments: tighter, inherit the segment's text color. */
  #mainContent#mainContent .lf-filter-group > .ret-filter-btn .fb-count,
  #mainContent#mainContent .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn .mto-cnt {
    margin-left: 4px !important;
    font-size: 10px !important;
    opacity: 0.8;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE GLOBAL HEADER CONTROLS — Messages / Jarvis / Refresh
   Permanent shell controls that never float over database content. This block
   stays last so older mobile audit rules cannot re-show Search/Theme or restyle
   the compact action rail.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header .shell-search-btn.icon-btn,
  .header .theme-toggle-btn.icon-btn {
    display: none !important;
  }

  .header .mobile-messages-btn.icon-btn,
  .header .mobile-jarvis-btn.icon-btn,
  .header .mobile-refresh-btn.icon-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .header .mobile-jarvis-btn.icon-btn {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
    background: color-mix(in srgb, var(--accent) 16%, var(--surface)) !important;
    color: var(--accent-strong, var(--accent)) !important;
    font: 750 18px/1 var(--font-body, sans-serif);
  }

  .header .mobile-messages-btn.icon-btn:active,
  .header .mobile-jarvis-btn.icon-btn:active,
  .header .mobile-refresh-btn.icon-btn:active {
    transform: scale(0.92);
  }

  .mobile-jarvis-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red, #ef4444);
    color: #fff;
    box-shadow: 0 0 0 2px var(--surface);
    font-size: 10px;
    font-weight: 750;
    line-height: 18px;
  }

  #dashboardUpdateBar,
  .dashboard-update-bar {
    display: none !important;
  }
  #appShell.dashboard-update-bar-visible {
    padding-top: 0 !important;
  }
}

/* ─── Messages density pass (Cole, 2026-08-03) ──────────────────────────────
   "look at how much space these messages are taking… Each person's message
   should be able to go all the way across the page… the respond button should
   go next to the text… This could be way more compact." Measured on his
   screenshot: the two 44px in-bubble buttons ate 88px of a ~280px bubble — a
   four-word password wrapped to three lines with the screen 40% empty. */
@media (max-width: 768px) {
  /* Bubbles own the width. The initials gutter narrows and the bubble cap
     rises; a message can now actually reach across the phone. */
  #mainContent .msg-replies-container { padding-left: 26px !important; padding-right: 26px !important; }
  #mainContent .msg-reply { max-width: 96% !important; }
  #mainContent .msg-reply-own {
    /* The tail consumes the six pixels deliberately left at the right edge.
       Text keeps its normal inner padding, while the initials disc remains in
       the reserved gutter instead of colliding with the scroll indicator. */
    margin-right: 6px !important;
  }
  #mainContent .msg-replies-container .msg-reply > .msg-reply-avatar {
    left: -24px !important;
  }
  #mainContent .msg-replies-container .msg-reply-own > .msg-reply-avatar {
    left: auto !important; right: -24px !important;
  }

  /* One compact ⋯ on the bubble's bottom row — not a 2×44px block carved out of
     the bubble. The quick-reply arrow goes: long-press (already wired) and the ⋯
     menu both reach Reply, so the affordance is duplicated, and on a phone the
     duplicate costs a third of the bubble. Translate and add-reaction stay in
     that menu too (hidden above), so the phone row is exactly one control. The
     VISIBLE disc shrinks; the TOUCH TARGET stays 44px via the pseudo-element. */
  /* `button` in the older 44px rule out-specifies a bare class, so the hide
     has to carry the element too. */
  #mainContent .msg-replies-container button.msg-reply-action-quick { display: none !important; }
  /* 2026-09-01 mobile-audit: the duplicate .msg-reply-actions block that lived
     here (its narrative described a meta-row placement the code no longer
     used) is gone; the corner-placement block earlier in this file is the
     single owner and carries the min-width/min-height resets. */
  /* 22px, not the 26px it was while absolutely positioned. Out of the flow its
     height was free; on the meta row the glyph's height IS the row's height and
     therefore the bubble's, so every extra pixel is charged to every message on
     the phone. Measured at 375px: 26px cost +13.4px per bubble over the old
     top-right placement, 22px costs +9.4px. The tap target is unaffected — it
     is the 44px pseudo-element below. */
  #mainContent .msg-replies-container .msg-reply-actions button.msg-reply-more {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 3px !important;
  }
  /* A full 44px square anchored to the control's own top-right. Centring the
     halo was the old overlap bug: it reached upward into the message above.
     Growing down-and-left from the bubble's top corner keeps the complete target
     inside its owning bubble while meeting the platform touch minimum. */
  #mainContent .msg-replies-container .msg-reply-actions button.msg-reply-more::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
  }

  /* The bottom bar: pill + detached send, tight. The tool row keeps its 44px
     TARGETS but stops reserving a 44px-tall band — the icons centre in 36px
     and the pill hugs the text. */
  #mainContent .msg-composer-row { gap: 6px !important; align-items: flex-end !important; }
  #mainContent .msg-send-detached {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0 !important;
  }
  #mainContent .msg-composer-actions { min-height: 36px !important; }
  #mainContent .msg-composer-actions .msg-attach-btn,
  #mainContent .msg-composer-actions .msg-emoji-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 8px !important;
    position: relative !important;
  }
  #mainContent .msg-composer-actions .msg-attach-btn::after,
  #mainContent .msg-composer-actions .msg-emoji-btn::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 44px !important;
    height: 44px !important;
    transform: translate(-50%, -50%) !important;
  }
  #mainContent .msg-reply-composer .msg-format-bar,
  #mainContent .msg-fmt-toggle {
    flex-basis: 36px !important;
    min-width: 36px !important;
    width: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
  }
}

/* Messages composer tools — one explicit + owns every secondary action on a
   phone. This final override intentionally follows the legacy Aa popover rules
   above so a stale `.is-open` class can never resurrect the two overlapping
   rows shown over the iOS keyboard. */
@media (max-width: 768px) {
  #mainContent .msg-composer-actions {
    display: flex !important;
    position: static !important;
    min-height: 36px !important;
  }
  #mainContent .msg-composer-tools {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
  }
  #mainContent .msg-composer-more-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 25px !important;
  }
  #mainContent .msg-composer-tools-popover[hidden] { display: none !important; }
  #mainContent .msg-composer-tools-popover {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: var(--msg-tools-visible-bottom, 64px) !important;
    z-index: 10002 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    padding: 5px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
  }
  #mainContent .msg-composer-tools-popover .msg-format-bar {
    position: static !important;
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #mainContent .msg-composer-tools-popover .msg-format-bar .msg-fmt-btn {
    display: inline-flex !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 5px 7px !important;
    position: relative;
  }
  /* 2026-09-02 audit: painted 38, tapped 44 — the same halo the attach/emoji
     buttons carry; the format buttons were the one cluster skipped. */
  #mainContent .msg-format-bar .msg-fmt-btn { position: relative; }
  #mainContent .msg-format-bar .msg-fmt-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  #mainContent .msg-composer-tools-popover .msg-composer-media-actions {
    display: flex !important;
    flex: 1 1 100% !important;
    justify-content: flex-end !important;
    min-height: 38px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding: 3px 0 0 !important;
  }
  #mainContent .msg-composer--typing .msg-composer-tools { display: block !important; }
}

/* ── IM wordmark on the phone (Cole 2026-09-02: "make the IM logo bigger on
   the mobile app"). Earlier blocks stepped it down to 13px/12px with tight
   max-widths; the header has the room — the account/status groups wrap to
   their own band at 375px. Appended last on purpose so it wins the cascade. */
@media (max-width: 768px) {
  .header-left .logo,
  .logo {
    font-size: 17px !important;
    letter-spacing: 0.14em !important;
    max-width: 240px !important;
    line-height: 1.1 !important;
  }
}
/* 375px is the tightest modern phone: the header holds the menu button (44),
   the wordmark, and a 144px action cluster, which leaves ~153px for the text.
   "Interior Moderna" at 14px with 0.08em tracking measures ~157px, so the
   tracking is what gives the size back — the 13px/0.12em rule above was
   spending 23px of that room on letter-spacing. Measured 2026-09-02. */
@media (max-width: 420px) {
  .header-left .logo,
  .logo {
    font-size: 14px !important;
    letter-spacing: 0.07em !important;
    max-width: 220px !important;
  }
  .header-left { gap: 6px !important; }
}

/* 2026-09-03 UX audit round 3 — iOS zooms the page on focus for any control
   under 16px. These are the warehouse-floor and PO-receiving fields that were
   set inline at 12-15px (container-receive scan bar, returns condition /
   shelf / reason selects, receiving new-shelf fields, PO scanner-device and
   exception-disposition selects). This file only loads on phones, so desktop
   keeps its density. !important because the sizes are inline styles. */
.cr-scan-input-bar input,
#rs-confirm-cond, #rs-confirm-shelf, #rs-trash-reason, #rs-move-wh, #rs-move-shelf, #rs-move-shelf-zone,
#rcv-new-shelf-code, #rcv-new-shelf-zone,
#rpoScannerDevice, .rpo-exc-dispo-select {
  font-size: 16px !important;
}

/* Keep the explicitly opened options usable even with a text draft. */
@media (max-width: 768px) {
  #mainContent .msg-composer--typing .msg-composer-tools-popover .msg-camera-btn,
  #mainContent .msg-composer--typing .msg-composer-tools-popover .msg-emoji-btn,
  #mainContent .msg-composer--typing .msg-composer-tools-popover .msg-voice-btn { display: inline-flex !important; }
  #mainContent .msg-quick-capture button { width: 44px; height: 44px; }
}

@media (max-width: 768px) {
  #mainContent .msg-composer-row .msg-composer-actions { order: -1; }
  #mainContent .msg-composer-row { gap: 4px; }
}