/* dv2-mobile v2 (10/10/2026; v1 10/8/2026 plus the phone edit/rule form block at the end). Phone layout for the dv2 hero product window (home, /coverage/mexico, /coverage/canada,
   /get-started, /shippers, /brokers/get-a-demo and their locale mirrors).
   When the window's frame (.pw-pan) is under 500px wide, the 1500px desktop app is no longer scaled down to 0.55 and panned.
   It is laid out at 1:1 the way the Cargado web app lays out on a phone (salsa, under 640px):
   - bottom tab bar in brand-900 (#1e3a85) with Home, Freight and Rates (the desktop rail, restyled);
   - Home shows the azul section sidebar full width (Posted, Review to Post, Pending Bids, Matched, Rules, All freight);
   - freight list rows become stacked cards; the load drawer becomes a full-screen page with a back chevron
     and the Details / Posting / Coverage tabs; Coverage lists carriers first and opens the chat on tap;
   - Rates stacks the lane form and shows the rate range and 12-week history in the cg-mra card style.
   Same engine, same data, same strings: only CSS here, plus dv2-mobile-v1.js for the Home tab and back states.
   The height is fixed in CSS (the window's static markup carries .pw-pan), so it holds before the engine or the script runs.
   Tablet and desktop are untouched: every rule sits inside the container query below.
   Selectors carry .pw-pan so they beat the dv2 stylesheet, which loads later in the body. The engine writes inline
   transform/width/height on .pw and .pw-scale and inline flex on the rate inputs, hence the !important on those. */
.dv2 .pw-pan{container:dv2pan/inline-size}
/* the hero float cards sit outside the frame, so the container query cannot reach them: hide them by viewport before mount, and by the phone class after */
/* /shippers: the "Look up a lane / Price a bid file" toggle sits above the frame too; the Excel view has no phone version (the add-in is desktop-only) */
/* the phone back chevron lives in the window from the first frame; it shows only in a phone rule detail */
.dv2 [data-pw] .dv2m-back{display:none}
@media (max-width:539.98px){.dv2 [data-pw] .pw-pan{border-radius:30px}.dv2 [data-pw] .float{display:none!important}.dv2 .pwv{display:none!important}.dv2 [data-pw] .rtop .xl{display:none!important}}
.dv2 .pw-wrap:has(.pw.dv2m) .float{display:none!important}
@container dv2pan (max-width:499.98px){
  /* frame: a phone screen at 1:1, fixed height = the hold */
  .dv2 [data-pw] .pw-pan .pw-scale{width:100%!important;height:640px!important;border:6px solid #0b1020;border-radius:30px;background:#fafafa;overflow:hidden}
  .dv2 [data-pw] .pw-pan .pw{position:relative!important;inset:auto;width:100%!important;height:100%!important;transform:none!important;border:0;border-radius:24px;
    font-size:14px;line-height:1.4;background:#fafafa;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .dv2 [data-pw] .pw-pan .xlw{display:none!important}
  .dv2 [data-pw] .pw-pan .pw button{touch-action:manipulation}
  .dv2 [data-pw] .pw-pan .pw :focus-visible{outline:2px solid #345ed1;outline-offset:-2px}

  /* status bar (the desktop browser strip, emptied) */
  .dv2 [data-pw] .pw-pan .pw .tb{height:34px;padding:0 18px 0 22px;background:#fff;color:#18181b;justify-content:space-between;border-bottom:1px solid #f4f4f5}
  .dv2 [data-pw] .pw-pan .pw .tb>*{display:none!important}
  .dv2 [data-pw] .pw-pan .pw .tb::before{content:"9:41";font:600 14px/1 Inter,system-ui,sans-serif;letter-spacing:-.01em}
  .dv2 [data-pw] .pw-pan .pw .tb::after{content:"";width:54px;height:12px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M28 11.6l2.1-2.4a3 3 0 0 0-4.2 0zM24.4 7.6l1 1.1a4.4 4.4 0 0 1 5.2 0l1-1.1a6 6 0 0 0-7.2 0zM22.6 5.6l1 1.1a7 7 0 0 1 8.8 0l1-1.1a8.6 8.6 0 0 0-10.8 0z'/%3E%3Crect x='37.5' y='1.5' width='14' height='9' rx='2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3Crect x='39.2' y='3.2' width='10.6' height='5.6' rx='1.3'/%3E%3Crect x='52.4' y='4.2' width='1.4' height='3.6' rx='.7'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M28 11.6l2.1-2.4a3 3 0 0 0-4.2 0zM24.4 7.6l1 1.1a4.4 4.4 0 0 1 5.2 0l1-1.1a6 6 0 0 0-7.2 0zM22.6 5.6l1 1.1a7 7 0 0 1 8.8 0l1-1.1a8.6 8.6 0 0 0-10.8 0z'/%3E%3Crect x='37.5' y='1.5' width='14' height='9' rx='2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3Crect x='39.2' y='3.2' width='10.6' height='5.6' rx='1.3'/%3E%3Crect x='52.4' y='4.2' width='1.4' height='3.6' rx='.7'/%3E%3C/svg%3E") center/contain no-repeat}
  .dv2 [data-pw] .pw-pan .pw.dv2m-sb .tb{background:#2f56ce;color:#fff;border-color:#2f56ce}

  /* body: content on top, tab bar at the bottom (salsa TabNavbarContainer: flex-col-reverse below md) */
  .dv2 [data-pw] .pw-pan .pw .bd{flex-direction:column;position:relative}
  .dv2 [data-pw] .pw-pan .pw .mn{order:1;flex:1;min-height:0}
  .dv2 [data-pw] .pw-pan .pw .rail{order:2;width:auto;height:60px;flex:none;flex-direction:row;justify-content:center;padding:0 6px;z-index:6}
  .dv2 [data-pw] .pw-pan .pw .rail .mb,.dv2 [data-pw] .pw-pan .pw .rail .bt{display:none}
  .dv2 [data-pw] .pw-pan .pw .rail .top{flex:1;flex-direction:row;justify-content:space-around;align-items:stretch;gap:0;height:100%}
  .dv2 [data-pw] .pw-pan .pw .rail .ni{flex:1 1 0;min-width:44px;height:100%;justify-content:center;gap:2px;font-size:12px;line-height:1.2;opacity:1;color:#bccaf0;-webkit-user-select:none;user-select:none}
  .dv2 [data-pw] .pw-pan .pw .rail .ni>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dv2 [data-pw] .pw-pan .pw .rail .if{width:48px;height:30px;border-radius:8px}
  .dv2 [data-pw] .pw-pan .pw .rail .if img{width:20px;height:20px}
  .dv2 [data-pw] .pw-pan .pw .rail .ni.on{color:#fff;font-weight:600}
  .dv2 [data-pw] .pw-pan .pw .rail .ni.on .if{background:#345ed1}
  .dv2 [data-pw] .pw-pan .pw.dv2m-sb .rail .ni.on{color:#bccaf0;font-weight:400}
  .dv2 [data-pw] .pw-pan .pw.dv2m-sb .rail .ni.on .if{background:none}
  .dv2 [data-pw] .pw-pan .pw.dv2m-sb .rail .ni.dv2m-home{color:#fff;font-weight:600}
  .dv2 [data-pw] .pw-pan .pw.dv2m-sb .rail .ni.dv2m-home .if{background:#345ed1}
  .dv2 [data-pw] .pw-pan .pw .rail .ni.dv2m-home{cursor:pointer}

  /* Home: the azul section sidebar, full width (salsa SidebarLayout below 640px) */
  .dv2 [data-pw] .pw-pan .pw .sb{display:none}
  .dv2 [data-pw] .pw-pan .pw.dv2m-sb .sb,.dv2 [data-pw] .pw-pan .pw.dv2m-sb .sb.hide{display:flex;position:absolute;left:0;right:0;top:0;bottom:60px;width:auto;z-index:5;padding:12px 12px;overflow:auto;overscroll-behavior:contain}
  .dv2 [data-pw] .pw-pan .pw .ws{margin:0 0 14px 2px;gap:8px;min-height:44px}
  .dv2 [data-pw] .pw-pan .pw .ws b{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .dv2 [data-pw] .pw-pan .pw .new{height:32px;font-size:14px;padding:0 12px;flex:none}
  .dv2 [data-pw] .pw-pan .pw .nv{min-height:44px;font-size:14px;padding:10px 12px;gap:12px}
  .dv2 [data-pw] .pw-pan .pw .nv svg{width:20px;height:20px}
  .dv2 [data-pw] .pw-pan .pw .nv .ct{font-size:12px}

  /* freight list: header + stacked cards (salsa FreightOwnerTableRow, every cell col-span-32) */
  .dv2 [data-pw] .pw-pan .pw .fb{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
  .dv2 [data-pw] .pw-pan .pw .fb .sel{display:none}
  .dv2 [data-pw] .pw-pan .pw .tog button{width:44px;height:44px}
  .dv2 [data-pw] .pw-pan .pw .tog{padding:0;gap:0}
  .dv2 [data-pw] .pw-pan .pw .srch{flex:1 1 0;min-width:0;height:44px;font-size:14px;padding:0 12px}
  .dv2 [data-pw] .pw-pan .pw .list{overscroll-behavior:contain}
  .dv2 [data-pw] .pw-pan .pw .row{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:14px 16px;font-size:14px;min-height:44px}
  .dv2 [data-pw] .pw-pan .pw .row>*{min-width:0}
  .dv2 [data-pw] .pw-pan .pw .row>.rt,.dv2 [data-pw] .pw-pan .pw .row>.dt,.dv2 [data-pw] .pw-pan .pw .row>.eq,.dv2 [data-pw] .pw-pan .pw .row>.bd2{grid-column:1/-1}
  .dv2 [data-pw] .pw-pan .pw .row .ld{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .row .id{font-size:14px;margin-top:2px}
  .dv2 [data-pw] .pw-pan .pw .row .it,.dv2 [data-pw] .pw-pan .pw .row .it.s{font-size:12px;margin-top:2px}
  .dv2 [data-pw] .pw-pan .pw .stc{align-items:flex-end;font-size:12px;gap:6px;text-align:right}
  .dv2 [data-pw] .pw-pan .pw .dot,.dv2 [data-pw] .pw-pan .pw .tms{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .pl{font-size:12px;padding:2px 7px;border-radius:999px;white-space:nowrap}
  .dv2 [data-pw] .pw-pan .pw .stc .dot{white-space:nowrap}
  .dv2 [data-pw] .pw-pan .pw .pl.ap,.dv2 [data-pw] .pw-pan .pw .pl.ar,.dv2 [data-pw] .pw-pan .pw .pl.m,.dv2 [data-pw] .pw-pan .pw .pl.r,.dv2 [data-pw] .pw-pan .pw .pl.k{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .bdg,.dv2 [data-pw] .pw-pan .pw .rp .bdg{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .ev .tg{min-height:44px;margin-top:0}
  .dv2 [data-pw] .pw-pan .pw .rt b{font-size:14px;line-height:1.35}
  .dv2 [data-pw] .pw-pan .pw .rt p,.dv2 [data-pw] .pw-pan .pw .dt p,.dv2 [data-pw] .pw-pan .pw .eq p{font-size:13px;margin-top:2px}
  .dv2 [data-pw] .pw-pan .pw .dt b,.dv2 [data-pw] .pw-pan .pw .eq b{font-size:13px}
  .dv2 [data-pw] .pw-pan .pw .eq p{white-space:normal}
  .dv2 [data-pw] .pw-pan .pw .bd2{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .dv2 [data-pw] .pw-pan .pw .bd2 b{font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .bd2 p{margin-top:0;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .bd2 .n{font-size:12px}

  /* load drawer: full-screen page over the list, tab bar stays (salsa FreightDetailsLayout) */
  .dv2 [data-pw] .pw-pan .pw .scrim{display:none}
  .dv2 [data-pw] .pw-pan .pw .dr{left:0!important;right:0;width:auto!important;box-shadow:none;animation:dv2mIn .22s cubic-bezier(.2,.8,.2,1)}
  .dv2 [data-pw] .pw-pan .pw .dh{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:4px;padding:6px 12px 0 6px;border-bottom:1px solid #e4e4e7}
  .dv2 [data-pw] .pw-pan .pw .dh .x{grid-row:1;grid-column:1;width:44px;height:44px;margin:0;align-self:start}
  .dv2 [data-pw] .pw-pan .pw .dh .x svg{display:none}
  .dv2 [data-pw] .pw-pan .pw .dh .x::before{content:"";width:24px;height:24px;background:#18181b;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
  .dv2 [data-pw] .pw-pan .pw .dh .top{grid-row:1;grid-column:2;margin-top:10px;display:block}
  .dv2 [data-pw] .pw-pan .pw .dh h3{font-size:14px;line-height:1.35}
  .dv2 [data-pw] .pw-pan .pw .dh .xs{font-size:13px;margin-top:2px}
  .dv2 [data-pw] .pw-pan .pw .dh .hb{display:none}
  .dv2 [data-pw] .pw-pan .pw .meta{margin-top:4px;font-size:12px;gap:8px}
  .dv2 [data-pw] .pw-pan .pw .meta>span:not(:nth-child(2)){display:none}
  .dv2 [data-pw] .pw-pan .pw .dh .tabs{grid-column:1/-1;gap:16px;margin:8px 0 0 6px;border-bottom:0;overflow-x:auto;scrollbar-width:none}
  .dv2 [data-pw] .pw-pan .pw .dh .tabs::-webkit-scrollbar{display:none}
  .dv2 [data-pw] .pw-pan .pw .tabs button{min-height:44px;min-width:44px;justify-content:center;padding:0 2px;font-size:14px;white-space:nowrap;flex:none;border-bottom-width:3px}
  /* the tab pills (Respond, Matched) become a dot so the three tabs fit in every locale; the real app shows a pill only where it fits */
  .dv2 [data-pw] .pw-pan .pw .tabs .pl{font-size:0;width:8px;height:8px;padding:0;border-radius:50%;background:#dc2626;flex:none}
  .dv2 [data-pw] .pw-pan .pw .tabs .pl.m{background:#16a34a}
  .dv2 [data-pw] .pw-pan .pw .tabs .dot{font-size:0;gap:0}
  .dv2 [data-pw] .pw-pan .pw .db{overflow:auto!important;overscroll-behavior:contain}

  /* details and posting tabs: single column */
  .dv2 [data-pw] .pw-pan .pw .det,.dv2 [data-pw] .pw-pan .pw .pst{padding:14px 14px 20px!important;max-width:none!important;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .det *,.dv2 [data-pw] .pw-pan .pw .pst *{max-width:100%}
  .dv2 [data-pw] .pw-pan .pw .dctl{flex-wrap:wrap;gap:8px}
  .dv2 [data-pw] .pw-pan .pw .dctl>*{min-height:44px}
  .dv2 [data-pw] .pw-pan .pw .pst{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:12px}
  .dv2 [data-pw] .pw-pan .pw .pc{padding:14px!important}
  .dv2 [data-pw] .pw-pan .pw .pc h4{font-size:16px}
  .dv2 [data-pw] .pw-pan .pw .det h2{font-size:18px;margin:20px 0 10px}
  .dv2 [data-pw] .pw-pan .pw .tln .st small,.dv2 [data-pw] .pw-pan .pw .tr small,.dv2 [data-pw] .pw-pan .pw .bx small,.dv2 [data-pw] .pw-pan .pw .bo small{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .tln .st b,.dv2 [data-pw] .pw-pan .pw .tln .st p,.dv2 [data-pw] .pw-pan .pw .tr{font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .chip{height:auto;min-height:36px;flex-wrap:wrap;font-size:13px;padding:6px 14px;border-radius:18px}
  .dv2 [data-pw] .pw-pan .pw .blk{min-height:44px;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .ob,.dv2 [data-pw] .pw-pan .pw .rb{min-height:44px;font-size:13px;padding:0 12px}
  .dv2 [data-pw] .pw-pan .pw .kv{grid-template-columns:minmax(0,1fr) auto!important;font-size:13px;gap:4px 10px}
  .dv2 [data-pw] .pw-pan .pw .kv>*:first-child{grid-column:1/-1}
  .dv2 [data-pw] .pw-pan .pw .ob{flex-wrap:wrap}

  /* coverage: carriers first, the chat opens on tap (salsa CoverageLayoutInner + CoverageDrawer) */
  .dv2 [data-pw] .pw-pan .pw .cov{display:block!important;height:100%;position:relative}
  .dv2 [data-pw] .pw-pan .pw .cov .cl{width:100%!important;max-width:none;height:100%;overflow:auto;border-right:0}
  .dv2 [data-pw] .pw-pan .pw.dv2m .cov .th{display:none!important}
  .dv2 [data-pw] .pw-pan .pw.dv2m-chat .cov .cl{display:none}
  .dv2 [data-pw] .pw-pan .pw.dv2m-chat .cov .th{display:flex!important;position:absolute;inset:0;width:auto}
  .dv2 [data-pw] .pw-pan .pw .cl .h{min-height:44px;font-size:14px;padding:0 16px}
  .dv2 [data-pw] .pw-pan .pw .cr{min-height:56px;padding:10px 16px;gap:10px}
  .dv2 [data-pw] .pw-pan .pw .cr b{font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .cr small{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .ca{width:32px;height:32px;font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .ev .a,.dv2 [data-pw] .pw-pan .pw .ev .lb,.dv2 [data-pw] .pw-pan .pw .ev .rw small,.dv2 [data-pw] .pw-pan .pw .ev .tg{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .join{left:12px;right:12px;transform:none;white-space:normal;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;padding:10px 12px;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .join button{min-height:44px;padding:0 16px}
  .dv2 [data-pw] .pw-pan .pw .cl .ft{font-size:12px;padding:12px 16px}
  .dv2 [data-pw] .pw-pan .pw .thh{flex-wrap:wrap;gap:8px;padding:8px 12px;min-height:52px}
  .dv2 [data-pw] .pw-pan .pw .thh .cpl{min-height:44px}
  .dv2 [data-pw] .pw-pan .pw .thh .okk,.dv2 [data-pw] .pw-pan .pw .thh .ppl{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .msgs{padding:12px!important;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .msgs .ev{max-width:92%!important;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .msgs .tm,.dv2 [data-pw] .pw-pan .pw .msgs .sys{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .abar{flex-wrap:wrap;gap:8px;padding:8px 12px!important}
  .dv2 [data-pw] .pw-pan .pw .abar .l{flex:1 1 100%;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .abar .btn{flex:1 1 0;min-width:0;padding:0 6px}
  .dv2 [data-pw] .pw-pan .pw .btn{min-height:44px;height:auto;font-size:14px;padding:0 14px;justify-content:center}
  .dv2 [data-pw] .pw-pan .pw .cmp{margin:0 12px 10px!important;padding:2px 4px 2px 12px!important;display:flex;align-items:center;gap:4px}
  .dv2 [data-pw] .pw-pan .pw .cmp .rw{margin-top:0!important;flex:none;align-items:center;gap:0}
  .dv2 [data-pw] .pw-pan .pw .cmp input{font-size:16px;min-height:44px;flex:1;min-width:0}
  .dv2 [data-pw] .pw-pan .pw .cmp .snd,.dv2 [data-pw] .pw-pan .pw .cmp button{min-width:44px;min-height:44px}

  /* rules: list first, a rule opens full width with a back chevron (dv2-mobile JS adds .dv2m-rule) */
  .dv2 [data-pw] .pw-pan .pw .rl{width:100%!important;max-width:none;border-right:0}
  .dv2 [data-pw] .pw-pan .pw.dv2m .rp{display:none}
  .dv2 [data-pw] .pw-pan .pw.dv2m-rule .rl{display:none}
  .dv2 [data-pw] .pw-pan .pw.dv2m-rule .rp{display:flex;flex:1;min-width:0}
  .dv2 [data-pw] .pw-pan .pw.dv2m-rule .rp .hh{padding:4px 12px 0!important}
  .dv2 [data-pw] .pw-pan .pw .rp .hh h3{margin-left:40px;min-height:44px;align-items:center;gap:8px;font-size:17px}
  .dv2 [data-pw] .pw-pan .pw .rp .hh>p{margin-left:40px}
  .dv2 [data-pw] .pw-pan .pw .rp .hh .tabs{gap:16px;overflow-x:auto;scrollbar-width:none}
  .dv2 [data-pw] .pw-pan .pw .rp .hh .tabs::-webkit-scrollbar{display:none}
  .dv2 [data-pw] .pw-pan .pw .rl .h{min-height:52px;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .ri{min-height:56px;font-size:14px;flex-wrap:wrap;row-gap:6px}
  .dv2 [data-pw] .pw-pan .pw .ri>*{min-width:0}
  .dv2 [data-pw] .pw-pan .pw .ri small,.dv2 [data-pw] .pw-pan .pw .ri p{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .rfil{min-height:44px;font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .rp .tabs button{min-height:44px}
  .dv2 [data-pw] .pw-pan .pw.dv2m-rule:not(.dv2m-sb) .dv2m-back{display:grid;place-items:center;position:absolute;top:38px;left:4px;width:44px;height:44px;z-index:7;color:#18181b;border-radius:8px}

  /* rates: stacked lane form, then cards (salsa RatesForm below lg; card look shared with cg-mra) */
  .dv2 [data-pw] .pw-pan .pw .rv{padding:0 0 18px!important;overflow:auto;overscroll-behavior:contain;height:100%}
  .dv2 [data-pw] .pw-pan .pw .rin{display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding:12px!important;margin:0!important;background:#f4f4f5;border-bottom:1px solid #e4e4e7;border-radius:0!important;box-shadow:none!important}
  .dv2 [data-pw] .pw-pan .pw .rin>*{flex:1 1 100%!important;min-width:0!important;min-height:44px;font-size:14px!important}
  .dv2 [data-pw] .pw-pan .pw .rin>.ri2:nth-child(2),.dv2 [data-pw] .pw-pan .pw .rin>.ri2:nth-child(4){flex:1 1 0!important}
  .dv2 [data-pw] .pw-pan .pw .rin>.swp{flex:0 0 36px!important;display:grid;place-items:center;min-width:36px!important}
  .dv2 [data-pw] .pw-pan .pw .rin .ri2{background:#fff}
  .dv2 [data-pw] .pw-pan .pw .rin>.ri2:nth-child(2)>svg,.dv2 [data-pw] .pw-pan .pw .rin>.ri2:nth-child(4)>svg{display:none}
  .dv2 [data-pw] .pw-pan .pw .rin .ri2 em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .dv2 [data-pw] .pw-pan .pw .rin .btn{width:100%}
  .dv2 [data-pw] .pw-pan .pw .rh{font-size:20px!important;margin:16px 12px 0!important;line-height:1.25;text-align:center;flex-wrap:wrap;justify-content:center}
  .dv2 [data-pw] .pw-pan .pw .rh svg{width:18px;height:18px}
  .dv2 [data-pw] .pw-pan .pw .rs{font-size:13px!important;margin:4px 12px 12px!important;text-align:center;flex-direction:column;gap:0!important}
  .dv2 [data-pw] .pw-pan .pw .rs i{display:block;width:0;height:0;margin:0;background:none}
  .dv2 [data-pw] .pw-pan .pw .rcard,.dv2 [data-pw] .pw-pan .pw .rlk{margin:0 12px 10px!important;padding:10px 12px 12px!important;border-radius:12px!important;border:1px solid #e2e8f0}
  .dv2 [data-pw] .pw-pan .pw .rtop{flex-wrap:wrap;gap:4px 8px;font-size:14px;align-items:center}
  .dv2 [data-pw] .pw-pan .pw .rtop b,.dv2 [data-pw] .pw-pan .pw .rtop b.big{font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .rtop .conf{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .rtop .vmb{display:none}
  /* the Excel add-in link opens the Excel view, which is desktop-only (hidden on phones) */
  .dv2 [data-pw] .pw-pan .pw .rtop .xl{display:none}
  .dv2 [data-pw] .pw-pan .pw .rcols{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px!important;padding:0!important}
  .dv2 [data-pw] .pw-pan .pw .rcols>i{display:none}
  .dv2 [data-pw] .pw-pan .pw .rc{min-width:0;padding:0!important;text-align:center}
  .dv2 [data-pw] .pw-pan .pw .rc p{font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .rc b{font-size:17px!important;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .dv2 [data-pw] .pw-pan .pw .rc:nth-of-type(2) b{color:#2648a6}
  .dv2 [data-pw] .pw-pan .pw .rc small{display:none}
  .dv2 [data-pw] .pw-pan .pw .rcols::after{content:"";grid-column:1/-1;height:6px;margin:8px 6px 0;border-radius:99px;background:linear-gradient(90deg,#dbeafe 0 25%,#345ed1 25% 75%,#dbeafe 75%)}
  .dv2 [data-pw] .pw-pan .pw .rpost{display:flex!important;flex-direction:column;align-items:stretch!important;gap:8px;font-size:14px;text-align:center}
  .dv2 [data-pw] .pw-pan .pw .rchw{margin-top:6px}
  .dv2 [data-pw] .pw-pan .pw .rch{width:100%;height:auto;display:block}
  .dv2 [data-pw] .pw-pan .pw .rch text{display:none}
  .dv2 [data-pw] .pw-pan .pw .rch path,.dv2 [data-pw] .pw-pan .pw .rch line{vector-effect:non-scaling-stroke}
  .dv2 [data-pw] .pw-pan .pw .rch circle{display:none}
  .dv2 [data-pw] .pw-pan .pw .rtt{font-size:12px;max-width:calc(100% - 8px)}
  .dv2 [data-pw] .pw-pan .pw .lkr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;min-height:56px;padding:10px 4px!important;font-size:12px;align-items:center}
  .dv2 [data-pw] .pw-pan .pw .lkr>span{grid-column:1;color:#52525b;font-size:12px}
  .dv2 [data-pw] .pw-pan .pw .lkr>span:nth-child(1),.dv2 [data-pw] .pw-pan .pw .lkr>span:nth-child(2),.dv2 [data-pw] .pw-pan .pw .lkr>span:nth-child(4){display:none}
  .dv2 [data-pw] .pw-pan .pw .lkr>span:nth-child(3){color:#18181b;font-size:14px;font-weight:600}
  .dv2 [data-pw] .pw-pan .pw .lkr>b{grid-column:2;grid-row:1/span 2;font-size:14px}

  /* dialogs: full-width sheet inside the screen */
  .dv2 [data-pw] .pw-pan .pw .ov{align-items:end;place-items:end center}
  .dv2 [data-pw] .pw-pan .pw .md,.dv2 [data-pw] .pw-pan .pw .md.pf{width:100%!important;max-width:none;border-radius:16px 16px 0 0;padding:18px 16px 16px;max-height:92%;overflow:auto}
  .dv2 [data-pw] .pw-pan .pw .md h4{font-size:16px}
  .dv2 [data-pw] .pw-pan .pw .md p{font-size:14px}
  .dv2 [data-pw] .pw-pan .pw .md .mf{flex-wrap:wrap}
  .dv2 [data-pw] .pw-pan .pw .md .mf .btn{flex:1 1 auto}
  .dv2 [data-pw] .pw-pan .pw .md .px{width:44px;height:44px}
  .dv2 [data-pw] .pw-pan .pw .md .pg3,.dv2 [data-pw] .pw-pan .pw .md .pg2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* narrow frames (/get-started is 250 to 316px wide; coverage at 360 is 321px): tabs tighten so Spanish and French labels fit,
   search moves under the team toggle, and the lane inputs stack */
@container dv2pan (max-width:340px){
  .dv2 [data-pw] .pw-pan .pw .dh .tabs,.dv2 [data-pw] .pw-pan .pw .rp .hh .tabs{gap:10px}
  .dv2 [data-pw] .pw-pan .pw .tabs button{font-size:13px;gap:5px}
  .dv2 [data-pw] .pw-pan .pw .srch{flex:1 1 100%}
  .dv2 [data-pw] .pw-pan .pw .rc b{font-size:15px!important}
  .dv2 [data-pw] .pw-pan .pw .rin>.ri2:nth-child(2),.dv2 [data-pw] .pw-pan .pw .rin>.ri2:nth-child(4){flex:1 1 100%!important}
  .dv2 [data-pw] .pw-pan .pw .rin>.swp{display:none!important}
}
/* the narrowest frames (/get-started below 390 is 250 to 280px): the tab strips run edge to edge at the 12px label floor and wrap to a second row rather than cut a label */
@container dv2pan (max-width:285px){
  .dv2 [data-pw] .pw-pan .pw .dh .tabs,.dv2 [data-pw] .pw-pan .pw .rp .hh .tabs{gap:0 8px;margin-left:-8px;margin-right:-8px;padding:0 8px;flex-wrap:wrap;overflow:visible}
  .dv2 [data-pw] .pw-pan .pw .tabs button{font-size:12px;gap:4px}
  .dv2 [data-pw] .pw-pan .pw .tabs .bdg{padding:0 4px}
}
@keyframes dv2mIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dv2 [data-pw] .pw-pan .pw .dr{animation:none!important}}

/* ---- v2 (mobile-fix-1010, 10/10/2026). Everything above is v1 byte for byte. ----
   Matt (iPhone, 10/10): tapping a "Needs Info" lane in the Home TMS app opened the desktop edit form, clipped on the right.
   The Needs Info edit form (.ef) and the rule form (.rf) keep the desktop two-column grid (280px / 220px label column) from
   dv2-dv2-v9.css, which v1 never overrode. On a phone frame they stack: heading and help text on top, fields full width below.
   The headings drop the browser's default h5 margin (the frame has no reset), the segmented controls wrap instead of running off the screen, and the checkbox grid goes to one column.
   Same container query as v1, so tablet and desktop frames are untouched. */
@container dv2pan (max-width:499.98px){
  .dv2 [data-pw] .pw-pan .pw .ef .fs,.dv2 [data-pw] .pw-pan .pw .rf .fs{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 0}
  .dv2 [data-pw] .pw-pan .pw .ef .fs>*,.dv2 [data-pw] .pw-pan .pw .rf .fs>*{min-width:0}
  .dv2 [data-pw] .pw-pan .pw .ef h5,.dv2 [data-pw] .pw-pan .pw .rf h5{margin:0}
  .dv2 [data-pw] .pw-pan .pw .ef .sgm,.dv2 [data-pw] .pw-pan .pw .rf .sgm{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;border-radius:18px}
  .dv2 [data-pw] .pw-pan .pw .ef .sgm span,.dv2 [data-pw] .pw-pan .pw .rf .sgm span{padding:6px 12px}
  .dv2 [data-pw] .pw-pan .pw .ef .cks,.dv2 [data-pw] .pw-pan .pw .rf .cks{grid-template-columns:minmax(0,1fr)}
  .dv2 [data-pw] .pw-pan .pw .ef .fin,.dv2 [data-pw] .pw-pan .pw .rf .fin{max-width:100%;min-width:0}
  .dv2 [data-pw] .pw-pan .pw .ef .pk{padding:12px}
  .dv2 [data-pw] .pw-pan .pw .rf .lk{flex-wrap:wrap}
}