/* ============================================================
   DOFT 2026 — PR-3: loads/trucks MOBILE CARD VIEW (v3 — quality pass)
   Page-scoped: loaded AFTER pages/loads.css (and shipper/trucks css).
   Gated at the JSP <link> by isDebug || EnableRefreshDesign (the driver grids
   also fire on EnableMobileLoadCards, which is on in prod). Kill switch = the
   Const, or remove the link.

   SAFETY: EVERY rule is inside @media (max-width: 991px). Desktop (>=992px)
   is PHYSICALLY UNTOUCHED. (2026-06-09: raised 767->991 — the dense desktop
   table is cramped/clipped across the whole tablet-portrait band 768-991px,
   incl. iPad portrait at exactly 768px, in BOTH dev and prod; the table is
   only comfortable >=992px. So switch to the mobile cards for the entire
   range narrower than the table allows, per operator request.)
   Selectors use :is(.b-load,.b-truck) so the same
   rules style both loads rows (getLoadHtml / my-loads-page.js: cb-time/cb-addr/
   cb-size/cb-disteq/cb-price/cb-permile/cb-company/...) and truck rows
   (trucks.js: cb-ref/cb-eq-rate/cb-weight-length/cb-dot-mc/cb-contact).
   body-prefix + !important beat loads.css's 12 small-screen breakpoints.

   v3 fixes (reported): origin/dest were on different baselines; the two price
   reveal links rendered as two clunky boxes; cells were scattered with loose
   vertical space; the expanded detail panel's border floated detached. v3:
   tight 3-row card, baseline-aligned route, de-boxed compact price, and the
   expanded panel is visually joined to its card.
   ============================================================ */

@media (max-width: 991px) {

  /* hide the desktop column header; flow as blocks */
  body #dTable .t-head { display: none !important; }
  body #dTable, body #dTable .t-body { display: block !important; width: auto !important; }

  /* ---- ROW -> CARD ---- */
  body #dTable .t-body :is(.b-load,.b-truck) {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: baseline !important;               /* text rows align on one baseline */
    column-gap: 7px !important; row-gap: 5px !important;
    width: auto !important; height: auto !important; min-height: 0 !important;
    padding: 14px 16px !important; margin: 0 0 10px 0 !important;
    border: 1px solid var(--line, #e6e9ed) !important;
    border-radius: 16px !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px -4px rgba(16,24,40,.10) !important;
    transition: box-shadow .2s var(--ease, cubic-bezier(.2,.7,.2,1)), transform .2s var(--ease, cubic-bezier(.2,.7,.2,1)), border-color .2s var(--ease, cubic-bezier(.2,.7,.2,1)) !important;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body #dTable .t-body :is(.b-load,.b-truck).gold { border-color: var(--amber-500, #ff9320) !important; }
  body #dTable .t-body :is(.b-load,.b-truck).viewed { background: var(--surface-alt, #fcfcfd) !important; }

  /* reset every column-block + cell (kills fixed widths + the <=540 column flip) */
  body #dTable .t-body :is(.b-load,.b-truck) .cb {
    display: inline-flex !important; flex-direction: row !important; align-items: baseline !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    flex: 0 0 auto !important; padding: 0 !important; border: 0 !important; margin: 0 !important;
  }
  body #dTable .t-body :is(.b-load,.b-truck) .c {
    display: inline-flex !important; align-items: baseline !important; flex-direction: row !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    white-space: nowrap !important; padding: 0 !important; border: 0 !important; background: none !important;
  }

  /* ===== ROW 1: age + date (left)  ........  price (right) ===== */
  body #dTable .t-body :is(.b-load,.b-truck) .cb-refnum { order: 1 !important; align-self: center !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-refnum .c-refnum { color: var(--text-muted,#828a94); font-size: var(--fs-2xs,.75rem); font-weight: var(--fw-semibold,600); }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-time { order: 2 !important; align-self: center !important; gap: 7px !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-time .c-pu { color: var(--text-muted,#828a94); font-size: var(--fs-xs,.8125rem); }

  /* price: de-boxed, compact, top-right. price (total) bold; $/mi muted+smaller right after */
  body #dTable .t-body :is(.b-load,.b-truck) .cb-price { order: 3 !important; align-self: center !important; margin-left: auto !important; }
  /* bug16/25 — show ONE price on the collapsed card; per-mile + market rate stay in the expanded
     detail. DRIVER getPriceField (isOpenTag) nests c-permile INSIDE the cb-price div -> hide
     `.cb-price .c-permile`. SHIPPER getPriceField builds a SEPARATE sibling cb-permile (the
     Trusted-Drivers-network price) -> hide `.cb-permile`. Both selectors needed; never swaps forecast/show. */
  body #dTable .t-body :is(.b-load,.b-truck) .cb-price .c-permile,
  body #dTable .t-body :is(.b-load,.b-truck) .cb-permile { display: none !important; }
  body #dTable .t-body :is(.b-load,.b-truck) :is(.c-price,.c-permile) span { font-family: var(--font-display); font-weight: var(--fw-bold,700); color: var(--text,#16181c); }
  /* make the price BIG + prominent (the card's hero number) */
  body #dTable .t-body :is(.b-load,.b-truck) .c-price span { font-size: 1.5rem !important; line-height: 1.05 !important; letter-spacing: -.02em !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .c-permile span { font-weight: var(--fw-semibold,600); color: var(--text-muted,#828a94); font-size: var(--fs-xs,.8125rem); }
  /* the "show"/"forecast" reveal links: plain text, NO box (loads.css gives them a 1px border) */
  body #dTable .t-body :is(.b-load,.b-truck) :is(.c-price,.c-permile) a {
    border: 0 !important; padding: 0 !important; background: none !important;
    color: var(--red-600,#f12908) !important; text-decoration: underline !important; font-size: var(--fs-md,1rem) !important; font-weight: var(--fw-semibold,600) !important;
  }
  body #dTable .t-body :is(.b-load,.b-truck) .c-permile a { color: var(--text-muted,#828a94) !important; font-size: var(--fs-xs,.8125rem) !important; }

  /* ===== ROW 2: route — origin -> destination on ONE baseline, full width ===== */
  body #dTable .t-body :is(.b-load,.b-truck) .cb-addr { order: 5 !important; flex: 1 1 100% !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 0 5px !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-addr .c-orig, body #dTable .t-body :is(.b-load,.b-truck) .cb-addr .c-dest { display: inline-flex !important; align-items: baseline !important; gap: 4px !important; flex: 0 1 auto !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-addr .c-addr { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; font-weight: var(--fw-bold,700) !important; color: var(--text,#16181c) !important; font-size: var(--fs-md,1rem) !important; line-height: 1.25 !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-addr .c-state { font-weight: var(--fw-semibold,600) !important; color: var(--text-muted,#828a94) !important; font-size: var(--fs-xs,.8125rem) !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-addr .c-dest::before { content: "\2192"; margin: 0 5px !important; color: var(--red-600,#f12908) !important; font-weight: 700 !important; align-self: baseline !important; }

  /* ===== ROW 3: meta + company (left, compact, dot-separated)  ....  actions (right) ===== */
  body #dTable .t-body :is(.b-load,.b-truck) :is(.cb-disteq,.cb-size,.cb-pudh,.cb-company,.cb-eq-rate,.cb-weight-length,.cb-dot-mc,.cb-contact) {
    order: 6 !important; align-self: center !important; gap: 5px !important; color: var(--text-muted,#828a94) !important; font-size: var(--fs-xs,.8125rem) !important;
  }
  /* separators between the meta groups (skip the first one).
     ⚠ 2026-08-18: the "\00B7" glyph is GONE — the separator is now the gap alone.
     Two reasons, and the second is the load-bearing one:
       1. the dots were reported as visual noise on the phone ("54 mi · 43K · V · Landstar Ranger");
       2. the "skip the first one" selector below can only skip the DOM-first block, and the meta
          line WRAPS on a narrow card — so whichever block starts the second visual line opened it
          with a dot separating nothing (screenshot IMG_1400, company line "· Rockbeatspaper Inc").
          No selector can see a line break, so the orphan was unfixable while the glyph existed.
     The pseudo-element stays (empty) because every exception below turns the separator off with
     `content: none`, which removes the box AND its margin in one declaration. Keep it that way. */
  body #dTable .t-body :is(.b-load,.b-truck) :is(.cb-size,.cb-pudh,.cb-company,.cb-weight-length,.cb-dot-mc,.cb-contact)::before {
    content: ""; margin-right: 9px !important;
  }
  /* ...and the rule above cannot actually "skip the first one". It excludes .cb-disteq and .cb-eq-rate, and
     DOM order never puts either of them first. .cb-addr takes a whole flex line (flex:1 1 100%, above), so the
     order:6 group always begins a NEW line — and WHICH block lands first varies: .cb-pudh with an origin-DH
     filter (emitted only `if(hasOriginDH)`), .cb-size on a search row, .cb-company on the My Loads tabs. So
     every load card opened its meta line with a separator separating nothing.
     Suppress the dot on whichever meta block has no meta block before it. All eight share order:6 on the
     load and search-trucks grids, so DOM order is visual order THERE and the general sibling combinator is
     exact — no class list to keep in sync with the builders, and it stays correct for a variant nobody has
     written yet. ⚠ Not a file-wide invariant: the .drivers-bookmarks-page block further down re-orders these
     same classes (cb-contact to order:1), so DOM order is NOT visual order there. That page is unaffected
     only because the .b-truck rule below already drops every dot on it. Note this rule also outranks that
     truck rule for the first block ((1,4,2) vs (1,3,2)); harmless while both declare `none`. */
  body #dTable .t-body :is(.b-load,.b-truck)
    :is(.cb-size,.cb-pudh,.cb-company,.cb-weight-length,.cb-dot-mc,.cb-contact):not(
      :is(.cb-disteq,.cb-size,.cb-pudh,.cb-company,.cb-eq-rate,.cb-weight-length,.cb-dot-mc,.cb-contact) ~ *
    )::before { content: none !important; }
  /* ...and an EMPTY deadhead cell is still a flex item. The builders emit .cb-pudh whenever the origin-DH
     FILTER is set, not whenever the value exists — GetLoadsAjax guards `puDeadhead != null`, so it really is
     nullable — and a blank one renders at zero width, absorbs the rule above, and hands the leading dot to
     .cb-size. Treat a .cb-pudh whose cell is empty as not being there. */
  body #dTable .t-body :is(.b-load,.b-truck) .cb-pudh:has(> .c:empty) ~ .cb-size::before {
    content: none !important;
  }
  body #dTable .t-body :is(.b-load,.b-truck) :is(.cb-company,.cb-contact) .c-company { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 46vw !important; color: var(--text-body,#414851) !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-eq-rate .c-rate { font-weight: var(--fw-bold,700) !important; color: var(--text,#16181c) !important; }

  /* actions: gavel / clipboard / bookmark / status, phone pushed to the right edge */
  body #dTable .t-body :is(.b-load,.b-truck) :is(.cb-status,.cb-bid,.cb-book,.cb-bookmark) { order: 7 !important; align-self: center !important; }
  body #dTable .t-body :is(.b-load,.b-truck) .cb-contactlinks { order: 8 !important; align-self: center !important; margin-left: auto !important; }
  body #dTable .t-body :is(.b-load,.b-truck) :is(.cb-bid,.cb-book,.cb-bookmark,.cb-contactlinks) i,
  body #dTable .t-body :is(.b-load,.b-truck) .cb-contactlinks .phone-link { font-size: 17px !important; padding: 4px 6px !important; }

  /* ===== EXPANDED: join the detail panel to its card (was a detached floating box) ===== */
  body #dTable .t-body :is(.b-load,.b-truck).expanded {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
    box-shadow: var(--shadow-md, 0 2px 4px rgba(16,24,40,.06), 0 18px 36px -14px rgba(16,24,40,.20)) !important;
  }
  body #dTable .t-body :is(.b-load,.b-truck).expanded + * {
    margin-top: 0 !important; margin-bottom: 8px !important;
    border: 1px solid var(--line,#e6e9ed) !important; border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    background: var(--surface,#fff) !important;
    box-shadow: var(--shadow-md, 0 2px 4px rgba(16,24,40,.06), 0 18px 36px -14px rgba(16,24,40,.20)) !important;
  }

  /* ===== PR-3.4 batch-3: shadows, expanded join, shipper/truck card cleanup ===== */

  /* bug14 + "make it beautiful": on tap/hover the card lifts and a richer shadow APPEARS (modern feel).
     Excludes .expanded so an opened card stays flush with its detail panel. */
  body #dTable .t-body :is(.b-load,.b-truck):not(.expanded):active,
  body #dTable .t-body :is(.b-load,.b-truck):not(.expanded):hover {
    transform: translateY(-2px) !important;
    border-color: var(--line-strong, #d3d8de) !important;
    box-shadow: 0 2px 6px rgba(16,24,40,.08), 0 16px 32px -8px rgba(16,24,40,.18) !important;
  }

  /* bug15/20 — expanded panel: kill the legacy inner .wrp frame + leftover card borders so the card + detail panel read as ONE rounded container (no double straight-vs-rounded bottom border). Covers driver (.iload .wrp) and truck (.itruck .wrp). */
  body #dTable .t-body :is(.b-load,.b-truck).expanded + * .wrp { border: 0 !important; margin: 0 !important; box-shadow: none !important; }
  body #dTable .t-body :is(.b-load,.b-truck).expanded { border-top-color: var(--line,#e6e9ed) !important; border-left-color: var(--line,#e6e9ed) !important; border-right-color: var(--line,#e6e9ed) !important; margin-top: 0 !important; }

  /* bug18/21/24/25 — hide empty placeholder cells (the "—" dash-soup). Trucks already tag empties .any-val; shipper shipment empties are now tagged .any-val in the builder (prod-inert: no .any-val CSS is loaded on the shipments page). */
  body #dTable .t-body :is(.b-load,.b-truck) .any-val { display: none !important; }
  /* ...except on a .b-truck card, where refresh-hotfix-20260728-darkmode-round5.css:286-294 repaints
     `html[data-refresh] body #dTable .t-body .b-truck :is(.c-company,.c-contact)` to display:block
     !important. That selector carries an ID, so it is (1,4,2) and outranks the (1,3,1) hide above —
     the empty-value placeholder came back, and the D.5 rules below then style it as the card's HERO,
     so a truck with no company name showed a bold 17px em-dash where the carrier should be. Same
     shape, one class deeper: (1,5,2). */
  html[data-refresh] body #dTable .t-body .b-truck :is(.c-company, .c-contact).any-val { display: none !important; }

  /* bug24 — SHIPPER My Shipments builder uses bare <div class="cb"> wrappers (no cb-refnum/cb-time/cb-price class). Map them by content so refnum/age land left and the single price floats hard-right. (:has — modern mobile browsers; degrades to the current inline flow otherwise, no regression.) */
  body #dTable .t-body .b-load .cb:has(> .c-refnum) { order: 1 !important; align-self: center !important; }
  /* ...and by .c-pu as well, because the age cell is only emitted on tabIndex 0 and 3
     (shipper/loads-page.js:324). On My Shipments' other two tabs that same wrapper holds only the
     pickup date, matched no rule, kept the flex default order:0 and therefore sorted BEFORE the
     order:1 ref number - so exactly the tabs a shipper lives in showed the date first. Both
     selectors name the same wrapper, so a tab that has an age cell is unaffected. */
  body #dTable .t-body .b-load .cb:has(> .c-age),
  body #dTable .t-body .b-load .cb:has(> .c-pu) { order: 2 !important; align-self: center !important; gap: 7px !important; }
  body #dTable .t-body .b-load .cb:has(> .cb-price) { order: 3 !important; margin-left: auto !important; align-self: center !important; }
  body #dTable .t-body .b-load :is(.cb-distweight,.cb-eq) { order: 6 !important; align-self: center !important; gap: 5px !important; color: var(--text-muted,#828a94) !important; font-size: var(--fs-xs,.8125rem) !important; }

  /* bug21 — SHIPPER Search Trucks card: drop the dot-separators (rely on the row gap) so hidden empty cells leave no lone dots; tidy company + contact (ellipsis + a single separator, only when contact is present) */
  body #dTable .t-body .b-truck :is(.cb-weight-length,.cb-dot-mc,.cb-contact)::before { content: none !important; }
  body #dTable .t-body .b-truck :is(.c-company,.c-contact) { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 40vw !important; }
  body #dTable .t-body .b-truck .cb-contact .c-contact:not(.any-val)::before { content: "\00B7" !important; margin: 0 6px !important; color: var(--line-strong,#d3d8de) !important; }
  /* ...but no leading dot when there is no company before the contact (company cell empty/hidden) */
  body #dTable .t-body .b-truck .cb-contact .c-company.any-val + .c-contact::before { content: none !important; }

  /* TZ 07-25 #7 — My Loads AI Calls card: the remove-x sat inline next to the
     status badge mid-card. Pin it to the card's TOP-RIGHT corner (where the
     forecast link was) and drop the price/forecast chip a step DOWN so they
     don't collide. Scoped to cards that HAVE the x (.cb-aicall-del — only the
     AI Calls tab emits it), so every other card keeps the stock layout. */
  body #dTable .t-body .b-load:has(.cb-aicall-del) { position: relative !important; }
  body #dTable .t-body .b-load .cb-aicall-del {
    position: absolute !important; top: 10px !important; right: 12px !important;
    margin: 0 !important; align-self: auto !important;
  }
  body #dTable .t-body .b-load .cb-aicall-del i { color: var(--text-muted,#828a94) !important; }
  body #dTable .t-body .b-load .cb-aicall-del i:hover { color: var(--red-600,#f12908) !important; }
  body #dTable .t-body .b-load:has(.cb-aicall-del) .cb-price {
    align-self: flex-start !important; margin-top: 26px !important; margin-right: 2px !important;
  }
}

/* ============================================================
   DOFT 2026 — D.5 TRUSTED DRIVERS mobile card (/shipper/trusted-drivers).
   The page inherits the generic .b-truck card above, which is tuned for the
   Search-Trucks row (ref, equipment, weight, DOT/MC, contact) and leaves this
   page's rows as one flat run of dot-separated values: the carrier NAME — the
   only thing a shipper scans for here — renders as muted 13px meta, while the
   On/Off Duty badge is buried mid-card.

   Its rows (shipper/drivers-bookmarks.js:219-330) carry a column the Search
   Trucks grid does not — .cb-ref-status (ref + duty badge) — and no address,
   price or age at all, so the generic order map has nothing to hang a hierarchy
   on. This re-maps the same cells, no builder change:

       COMPANY                                   [On Duty]
       contact name
       REF 44120 · DOT 1234567 · MC 987654
       Van · $2.10/mi · 44k · 53 ft
                                        [message] [bookmark]

   Scoped to .drivers-bookmarks-page (added to the page JSP) because
   .trucks-page is shared with shipper/trucks/TrucksPage.jsp.
   Mobile band only — the desktop grid keeps its columns.
   ============================================================ */
@media (max-width: 991px) {
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck {
    position: relative;
    align-items: center !important;
    padding-right: 90px !important;      /* room for the pinned duty badge */
    row-gap: 4px !important;
  }

  /* ---- carrier identity: the card's hero ---- */
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .cb-contact {
    order: 1 !important; flex: 1 1 100% !important;
    flex-direction: column !important; align-items: flex-start !important; gap: 1px !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-company {
    font-family: var(--font-display); font-weight: var(--fw-bold, 700) !important;
    font-size: 1.0625rem !important; line-height: 1.25 !important;
    color: var(--text, #16181c) !important; max-width: 100% !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-contact {
    font-size: var(--fs-sm, .875rem) !important; color: var(--text-muted, #828a94) !important; max-width: 100% !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-contact::before { content: none !important; }

  /* ---- duty badge: pinned top-right, out of the meta flow ---- */
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .cb-ref-status { order: 2 !important; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-status {
    position: absolute !important; top: 12px !important; right: 14px !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-status .badge {
    border-radius: var(--radius-pill, 999px) !important; padding: 3px 10px !important; font-size: var(--fs-2xs, .75rem) !important;
  }

  /* ---- identifiers + specs: labelled chips, so a bare number still reads
       without the column header. Empty cells are already .any-val -> hidden by
       the generic card layer, and a hidden cell renders no label either. ---- */
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck :is(.cb-ref-status,.cb-dot-mc) { order: 3 !important; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck :is(.cb-eq-rate,.cb-weight-length) { order: 4 !important; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck :is(.c-ref,.c-dot,.c-mc,.c-eq,.c-rate,.c-weight,.c-length) {
    gap: 4px !important; color: var(--text-body, #414851) !important; font-size: var(--fs-xs, .8125rem) !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck :is(.c-ref,.c-dot,.c-mc,.c-rate,.c-weight,.c-length)::before {
    color: var(--text-muted, #828a94); font-size: var(--fs-2xs, .75rem); font-weight: var(--fw-semibold, 600);
    letter-spacing: .04em; margin-right: 4px;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-ref::before    { content: "REF"; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-dot::before    { content: "DOT"; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-mc::before     { content: "MC"; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-rate::before   { content: "RATE"; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-weight::before { content: "WT"; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-length::before { content: "LEN"; }
  /* ...except WEIGHT, which is the one cell the builder does NOT tag .any-val
     when it is empty: drivers-bookmarks.js:265-268 keeps `<div class="c c-weight">`
     and puts the dash in an INNER `.any-val` div, so the generic hide rule above
     takes the dash and leaves the cell — printing a bare "WT" with nothing after
     it. Drop the label when the value is missing, and drop the cell too unless
     the full/partial size square is there to carry it. */
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-weight:has(> .any-val)::before { content: none !important; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-weight:has(> .any-val):not(:has(.c-sz)) { display: none !important; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck :is(.c-dot,.c-mc) { font-family: var(--font-mono, ui-monospace, monospace) !important; }
  /* groups separate by space, not dots (the generic .b-truck layer already
     dropped this page's ::before dots): tight inside a group, wider between */
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck :is(.cb-ref-status,.cb-dot-mc,.cb-eq-rate,.cb-weight-length) {
    column-gap: 6px !important; margin-right: 8px !important;
  }

  /* ---- actions: 44px targets, on a line of their own, hard right ----
     the zero-height ::after is a flex line break ordered between the meta and
     the actions, so message + bookmark always land together on the last line
     instead of wrapping apart when the meta happens to fill the row. */
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck::after {
    content: ""; flex: 0 0 100%; order: 5; height: 0;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .cb-contactlinks { order: 6 !important; margin-left: auto !important; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .cb-bookmark { order: 7 !important; margin-left: 0 !important; }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck :is(.c-contactlinks a, .c-bookmark i) {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 !important; font-size: 17px !important;
  }
  html[data-refresh] .drivers-bookmarks-page #dTable .t-body .b-truck .c-bookmark i { color: var(--red-600, #f12908) !important; }
}