/* Desk pages of step 4: To order, Review and Units (js/desk/order.js, review.js, units.js). Step 6 gives them the
   reference's look (css/look.css holds the shared pieces): the page header (a 30px title with the grey count, a summary
   line, a 2px ink rule, the green main action at the top right), underline tabs, group headings on white over the
   column headings' ink rule, Units as the fleet table (js/fleet-ui.js) and the unit editor as a panel that slides in
   from the right. Ours stays: location chips and row edges in the kind colour, status tags with words. */

/* ---------------------------------------------------------------- the frame of a page */
.dpage { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; }
.dp-head { flex: none; padding: 24px 28px 0; background: var(--paper); }
.dp-head .utabs { margin-top: 6px; }
.utabs .cnt:empty { display: none; }
.dp-back { align-self: flex-start; min-height: 36px; margin: -6px 0 0 -8px; padding: 0 8px; gap: 2px; font-size: 15px; }
.dp-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 28px 48px; }

/* section headings on grey bands, notes, empty states, the small boxes that open under a heading or a row */
.dp-group { margin-top: 28px; }
/* a group's heading (a supplier, an import step): white, 18px, the column headings' ink rule under it */
.dp-grp { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; min-height: 56px; padding: 6px 0; background: var(--paper); }
.dp-grp h2 { font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.dp-meta { font-size: 14px; color: var(--ink-2); }
.dp-grp:not(:has(+ table)) { border-bottom: 1px solid var(--line2); }
.dp-meta .stag { vertical-align: middle; }
.dp-grp .tbtn { font-size: 14.5px; }
.dp-grp .dbtn { min-height: 44px; }
.dp-hint { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--soft); max-width: 980px; }
.dp-empty { display: flex; align-items: center; gap: 14px; padding: 34px 6px; font-size: 16px; line-height: 1.45; color: var(--soft); }
.dp-empty svg { flex: none; }
.dp-empty .tbtn { min-height: 0; padding: 0; font-size: 16px; vertical-align: baseline; }
.dp-box { background: var(--wash); padding: 14px 16px 16px; margin: 8px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.dp-box > p { font-size: 15px; line-height: 1.4; color: var(--soft); }
.dp-box > p b { color: var(--ink); }
.dp-box .perr, .dp-box .dprow { margin: 0; }
.dp-box.ok { flex-direction: row; align-items: center; gap: 10px; background: var(--good-bg); margin-top: 22px; }
.dp-box.ok .tbtn { min-height: 0; padding: 0 0 0 8px; }
.dp-boxrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dp-lab { display: flex; flex-direction: column; gap: 5px; width: 280px; }
.dp-lab.sm { width: 110px; }
.dp-tool { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 14px 0 12px; font-size: 15px; color: var(--soft); }
.dp-tool > p { line-height: 1.4; max-width: 860px; }
.dp-more { margin-top: 18px; }
.dp-more > summary { min-height: 46px; padding: 0 10px; background: var(--surface-2); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14.5px; font-weight: 700; list-style: none; }
.dp-more > summary::-webkit-details-marker { display: none; }
.dp-more > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); margin: 0 3px 0 1px; transition: transform 0.12s; }
.dp-more[open] > summary::before { transform: rotate(45deg); }
.dp-more > summary:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the tables (on top of .dtable in desk.css) */
.dp-table { margin-top: 0; }
.dp-table th { position: static; height: 38px; }
/* the heading of the group being scrolled stays at the top (supplier, fleet group…) */
.dp-group > .dp-grp { position: sticky; top: 0; z-index: 2; }
.dp-table td { padding: 6px 10px; }
.dp-table .dr { width: 62px; padding: 4px 6px 4px 4px; }
.dp-table .ck + .dr { padding-left: 2px; }
.dp-table .pt a { font-size: 15.5px; }
.dp-table .pt .mono { white-space: nowrap; }
.nb { white-space: nowrap; }
/* the part's name and number are one link: the name is underlined on hover */
.dp-table .pt a.dp-pl { display: flex; flex-direction: column; justify-content: center; text-decoration: none; }
.dp-table .pt a.dp-pl .pn { display: block; }
.dp-table .pt a.dp-pl:hover .pn { text-decoration: underline; }
.dp-table .pt a.dp-pl .mono { font-weight: 600; }
.dp-ck { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dp-table td.lc { white-space: nowrap; }
.dp-table td.oh { white-space: nowrap; }
.dp-table td.oh b { font-size: 16px; }
.dp-table .stags { margin-left: 8px; }
.dp-table td.acts { white-space: nowrap; }
.dp-table td.acts .dbtn + .tbtn, .dp-table td.acts .dbtn + .dbtn { margin-left: 4px; }
.dp-table td.tm { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--soft); }
.dp-table td.tg { white-space: nowrap; }
.dp-table td.tg .stag + .stag { margin-left: 4px; }
.dp-table .tbtn.quiet { color: var(--g1); font-weight: 600; font-size: 14px; }
.dp-table tr.grp th { position: static; }
.rv-sub { display: block; font-size: 13px; color: var(--g1); line-height: 1.3; margin-top: 2px; font-weight: 400; }
.rv-sub.mono { font-family: var(--mono); font-weight: 600; }
.rv-who { display: block; font-weight: 700; }
.rv-who + .muted { display: block; font-size: 13px; }
.rv-unit { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.rv-unit b { font-size: 17px; font-weight: 800; }
.rv-unit:hover b { text-decoration: underline; }
.rv-q { font-size: 20px; }
.rv-cost { font-size: 17px; }
/* undone and rejected pulls: struck through, and they don't count */
.dp-table tr.gone td { color: var(--g1); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dp-table tr.gone td a, .dp-table tr.gone td b, .dp-table tr.gone .mono { color: var(--g1); }
.dp-table tr.gone td img { opacity: 0.45; }
.dp-table tr.gone .rv-unit b, .dp-table tr.gone td.q b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dp-table tr.gone td.tg { text-decoration: none; }
.rv-actrow td { padding: 0 0 10px; border-bottom: 1px solid var(--line2); }
.rv-actrow:hover td { background: none !important; }
.rv-filters .dp-lab { width: 150px; }
.rv-filters .dp-lab:nth-child(3), .rv-filters .dp-lab:nth-child(4) { width: 170px; }
.rv-filters .tbtn { align-self: flex-end; }
.rv-tot { align-self: flex-end; font-size: 15px; color: var(--soft); padding-bottom: 12px; }
.rv-tot b { color: var(--ink); font-weight: 800; }
.ck-line { font-size: 15.5px; line-height: 1.35; }
.ck-line a { color: var(--ink); text-decoration: none; }
.ck-line a:hover { text-decoration: underline; }
.ck-not { color: var(--st-low); font-weight: 700; white-space: nowrap; }
.ck-not svg { vertical-align: -2px; margin-right: 4px; }
.ck-table td.ck-what { min-width: 280px; }
.pl-table .c-tm { width: 80px; }
.dp-table tr.ret td:nth-child(4) b { color: var(--green-d); }

/* ---------------------------------------------------------------- TO ORDER */
.ord-table .c-loc, .oo-table .c-loc { width: 112px; }
.ord-table .c-oh, .oo-table .c-oh { width: 210px; }
.ord-table .c-sq { width: 176px; }
.ord-table .c-pr { width: 100px; }
.ord-table .c-lt { width: 112px; }
.oo-table .c-ref { width: 220px; }
.oo-table .c-act { width: 100px; }
.ord-table td.lt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-table td.pr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-table td.qo { white-space: nowrap; }
.ord-table tr.off td:not(.ck) { opacity: 0.42; }
.ord-table tr.off td.lt { text-decoration: line-through; }
.dp-step { display: inline-flex; align-items: stretch; border: 1px solid var(--line); background: var(--paper); height: 44px; vertical-align: middle; }
.dp-step button { width: 42px; border: 0; background: none; font-size: 20px; font-weight: 700; line-height: 1; padding: 0; color: var(--ink); }
.dp-step button:hover { background: var(--wash); }
.dp-step input { width: 58px; border: 0; border-left: 1px solid var(--line2); border-right: 1px solid var(--line2); text-align: center; font-size: 17px; font-weight: 800; color: var(--ink); background: var(--paper); padding: 0; border-radius: 0; }
.dp-step input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); }
.dp-step.chg input { background: var(--chg-bg); box-shadow: inset 3px 0 0 var(--chg-mark); }
.dp-step.chg input:focus { box-shadow: inset 3px 0 0 var(--chg-mark), inset 0 0 0 2px var(--ink); }
.dp-step.bad { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.dp-sug { display: block; font-size: 13px; color: var(--st-low); margin-top: 3px; font-weight: 700; }
.dp-copybox { width: 560px; top: 18%; }
.dp-copybox textarea { font-family: var(--mono); font-size: 13px; margin-bottom: 14px; }

/* the order list, printed (a letter page in the print view, then window.print()) */
.osheet { width: 8.5in; min-height: 11in; padding: 0.6in; background: var(--paper); border: 1px solid var(--sheet-line); color: var(--ink); flex-shrink: 0; }
.os-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.3in; border-bottom: 2px solid var(--ink); padding-bottom: 0.12in; margin-bottom: 0.16in; }
.os-k { display: block; font-size: 10pt; color: var(--soft); }
.os-h h1 { font-size: 20pt; font-weight: 800; margin: 2px 0 0; line-height: 1.1; }
.os-h dl { display: grid; grid-template-columns: auto 1.6in; gap: 4px 10px; margin: 0; font-size: 10pt; }
.os-h dt { color: var(--soft); }
.os-h dd { margin: 0; font-weight: 700; border-bottom: 1px solid var(--ink); min-height: 14pt; }
.os-t { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.os-t th { text-align: left; font-size: 9pt; color: var(--soft); border-bottom: 1.5px solid var(--ink); padding: 4px 6px; }
.os-t td { border-bottom: 1px solid var(--line); padding: 6px; vertical-align: top; }
.os-t .num { text-align: right; white-space: nowrap; }
.os-t .mono { font-family: var(--mono); font-weight: 600; }
.os-t tfoot td { border-bottom: 0; border-top: 1.5px solid var(--ink); font-size: 10pt; color: var(--soft); }
.os-t tfoot b { color: var(--ink); font-size: 11pt; }
@page orderlist { size: letter; margin: 0.5in; }
@media print {
  body.printing .osheet { width: auto; min-height: 0; border: 0; padding: 0; page: orderlist; }
  .os-t tr { break-inside: avoid; }
  /* the total prints once, after the last line (a repeating tfoot made an empty second page with the named page) */
  .os-t tfoot { display: table-row-group; }
  /* the preview is a layer at the end of <body> (ui.openPrintPreview): the empty #overlay before it would sit alone on a
     first page, since the named page starts a new one */
  body.printing > #overlay:empty { display: none; }
}


/* ---------------------------------------------------------------- UNITS: the import */
.imp-table .c-un { width: 96px; }
.dp-table td.un { font-size: 20px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.uni-src { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-top: 14px; }
.uni-drop { position: relative; min-height: 164px; border: 2px dashed var(--g2); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; cursor: pointer; padding: 16px; }
.uni-drop b { font-size: 18px; font-weight: 800; }
.uni-drop span { font-size: 15px; color: var(--soft); }
.uni-drop u { text-decoration-color: var(--hover); text-underline-offset: 3px; font-weight: 700; color: var(--ink); }
.uni-drop:hover, .uni-drop:focus-within { border-color: var(--ink); }
.uni-drop.over { border-color: var(--green); background: #E3F3EC; }
.uni-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.uni-paste { display: flex; flex-direction: column; gap: 6px; }
.uni-paste textarea { flex: 1; min-height: 132px; font-family: var(--mono); font-size: 13px; white-space: pre; }
.ucols { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; margin-top: 12px; }
.ucol { border: 1px solid var(--line); padding: 10px 10px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; background: var(--paper); }
.ucol .pin { height: 40px; font-size: 14.5px; margin-top: 4px; }
.uch { font-size: 13px; font-weight: 700; color: var(--soft); overflow-wrap: anywhere; }
.ucs { font-size: 13px; overflow-wrap: anywhere; min-height: 17px; }
.ucol.skip { background: var(--wash); }
.ucol.off { background: var(--wash); border-style: dashed; }
.ucol.off .uch { text-decoration: line-through; }
.ucol.off .ucs { white-space: normal; color: var(--g1); font-weight: 700; line-height: 1.3; }
.imp-table .c-dt { width: 290px; }
.imp-table .c-st { width: 150px; }
.imp-table td.vin { font-size: 13px; white-space: nowrap; }
.imp-table tr.st-unchanged td { color: var(--soft); }
.uni-rule { margin-top: 20px; }
.uni-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.uni-rules .ur { width: 160px; padding: 10px; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soft); }
.uni-rules .ur b { font-size: 15px; color: var(--ink); }
.uni-rules .ur-pic { height: 44px; display: flex; align-items: flex-end; }
.uni-rules .ur-pic svg { width: auto; max-width: 100%; height: 40px; }
.uni-impfoot { position: sticky; bottom: -48px; margin: 24px -28px -48px; padding: 12px 28px 14px; background: var(--paper); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; z-index: 2; }
.uni-impfoot .muted { font-size: 14px; }
/* after the import: what changed, and the way back (the preview is gone) */
.dp-box.ok.uni-done { align-items: flex-start; gap: 14px; padding: 20px 22px 22px; max-width: 760px; }
.uni-done svg { flex: none; margin-top: 2px; }
.uni-done .ud-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uni-done h2 { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0; }
.uni-done p { font-size: 15px; line-height: 1.45; color: var(--soft); margin: 0; }
.uni-done .dprow { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 6px; }
.dp-box.ok.uni-done .tbtn { padding: 0; }

.uni-find { margin-top: 10px; }
.uni-find .dfield { background: var(--paper); }
.uf-list { display: flex; flex-direction: column; }
.uf-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line2); }
.uf-list li:last-child { border-bottom: 0; }
.uf-t { display: flex; flex-direction: column; min-width: 0; }
.uf-t b { font-size: 15px; }
.uf-t .mono { font-size: 13px; color: var(--soft); }
.uf-done { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--green-d); min-width: 150px; justify-content: flex-end; }
.uf-list .dbtn { min-width: 150px; }
.uni-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 8px; }
.uni-tile { border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface-2); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.uni-tile b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.upl-table .c-day { width: 112px; }
.upl-table .c-q { width: 56px; }
.upl-table .c-co { width: 96px; }
.upl-table .c-tg { width: 120px; }
.upl-table td.pt .rv-sub { margin-top: 3px; }
.uni-form { display: flex; flex-direction: column; gap: 14px; }
.uni-form .dp-hint { margin: 0; }
.uni-form textarea.pin { min-height: 80px; }

@media (max-width: 1360px) {
  .ord-table .c-oh, .oo-table .c-oh { width: 184px; }
  .imp-table .c-dt { width: 270px; }
}

/* a narrow desk (1024 to 1200px): the import preview leaves out the VIN and the location (they are in the columns
   above) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .imp-table td.vin, .imp-table .c-vin, .imp-table td.lo, .imp-table .c-lo { display: none; }
  /* the other tables: the buttons of a row one above the other, tags may wrap, the last pull column goes */
  .dp-table td.acts .dbtn, .dp-table td.acts .tbtn { display: flex; width: 100%; }
  .dp-table td.acts .dbtn + .tbtn, .dp-table td.acts .dbtn + .dbtn { margin: 4px 0 0; }
  .dp-table td.tg { white-space: normal; }
  .ck-table td.ck-what { min-width: 0; }
  /* tighter cells, and the stock tags under the counts, so To order and the pulls fit without a sideways scroll */
  .dp-table th, .dp-table td { padding-left: 7px; padding-right: 7px; }
  .ord-table .c-oh, .oo-table .c-oh { width: 104px; }
  .dp-table td.oh .stags { display: block; margin: 4px 0 0; white-space: normal; }
  .ord-table .c-loc, .oo-table .c-loc { width: 80px; }
  .ord-table .c-sq { width: 128px; }
  .ord-table .c-pr { width: 76px; }
  .ord-table .c-lt { width: 84px; }
  .ord-table .dp-step button { width: 38px; }
  .ord-table .dp-step input { width: 50px; }
  .ord-table td.pt, .oo-table td.pt { min-width: 150px; }
  /* the upper-case headings (look.css) may take two lines here: "ON HAND / MIN / MAX" over a narrow column */
  .dp-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; padding-bottom: 6px; }
  .dp-table .pt .mono { white-space: normal; }
  .pl-table td.te { white-space: nowrap; }
}

/* ---------------------------------------------------------------- counts in the side menu (shell.js) */
.navi .nbadge { margin-left: auto; min-width: 28px; height: 22px; padding: 1px 7px 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.navi .nbadge, .navi[aria-current="page"] .nbadge { background: #FFFFFF; color: var(--ink); }
.dp-sep { margin: 0 3px; color: var(--g1); }   /* 4.5:1 or more, like the text around it */
.uni-how { list-style: disc; padding-left: 20px; margin: 16px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--soft); display: flex; flex-direction: column; gap: 4px; max-width: 980px; }

/* ================================================================ compact: phone layout (below 1024px, like desk.css)
   The shell's top bar has the title (and the back arrow on a unit or the import) and the bottom nav sits under the
   page, so the band keeps only the summary, the find box and the tabs (a full-width segmented control). The page
   scrolls as the document. Rows become cards: each table places its cells on a small grid, or on a wrapping line with
   the picture at the left. Forms and confirmations open as full-screen sheets (.msheet, js/ui.js openSheet). 16px or
   more in every field, 48px or more for every target. */
.ord-table .ea, .dp-table .oh-loc { display: none; }
.dp-gacts { display: inline-flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; }
@media (max-width: 1023.98px) {
  .dpage, .dunit { display: block; height: auto; min-height: 0; }
  /* the top bar has the page's title (and the back arrow): the head keeps the summary and the tabs */
  /* the page header (look.css sizes it for phones) starts the page: the top bar then shows only the brand and its
     buttons. A page with a back arrow (the import) keeps its title in the top bar. */
  .dp-head { padding: 0 16px; }
  .dp-head .dp-back, .dp-head .pgact, .dunits.importing .dp-head .dtitle { display: none; }
  /* the tabs: across the screen, each the same width */
  .dp-head .utabs { margin: 0 -16px; padding: 0 8px; gap: 0; }
  .dp-head .utabs > button { flex: 1 1 0; min-width: 0; min-height: 52px; margin: 0; padding: 8px 4px; justify-content: center; font-size: 16px; gap: 6px; }
  .dp-scroll { overflow: visible; padding: 0 16px 24px; }
  .dp-group { margin-top: 18px; }
  .dp-group > .dp-grp { position: static; }
  .dp-grp { padding: 8px 0; gap: 4px 12px; }
  .dp-grp h2 { font-size: 18px; }
  .dp-grp .dfill { display: none; }
  .dp-grp .dbtn, .dp-grp .tbtn { min-height: 48px; }
  .dp-meta { font-size: 15px; }
  .dp-hint, .dp-tool, .dp-tool > p, .dp-box > p { font-size: 15px; }
  .dp-hint.first { margin-top: 0; }
  .dp-tool > .dfill { display: none; }
  .dp-lab, .dp-lab.sm { width: 100%; }
  .dp-boxrow > .dbtn { flex: 1; }
  .dp-empty { padding: 24px 0; align-items: flex-start; font-size: 16px; }
  .dp-empty .tbtn { min-height: 48px; }
  .dp-copybox { width: auto; top: auto; }
  /* the supplier's (and a group's) buttons: two-up under the name, the main one across */
  .dp-gacts { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .dp-gacts > .tbtn, .dp-gacts > .dbtn { min-height: 48px; width: 100%; }
  .dp-gacts > .tbtn { border: 1px solid var(--line); background: var(--paper); text-decoration: none; }
  .dp-gacts > .dbtn.ink { grid-column: 1 / -1; }
  /* a bar fixed on the bottom nav (APPROVE ALL, IMPORT N UNITS): always in the same place, however short the page;
     the page keeps room for it at the end, and a message (#toast) sits above it */
  .dp-actbar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 19; margin: 0; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--paper); border-top: 2px solid var(--ink); display: flex; align-items: center; gap: 12px; }
  html body:has(.dp-actbar) #view { padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--toast-h, 0px) + 74px + 24px); }
  html body:has(.uni-impfoot) #view { padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--toast-h, 0px) + 74px + 24px); }
  .dp-actbar > span { font-size: 15px; color: var(--soft); flex: 0 1 auto; }
  .dp-actbar > .dgo { flex: 1; height: 52px; }

  /* ---- rows as cards */
  .dp-table, .dp-table tbody { display: block; width: auto; }
  .dp-table thead { display: none; }
  .dp-table tr { display: grid; column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px 0 14px 14px; border-bottom: 1px solid var(--line2); }
  .dp-table td, .dtable.dp-table td { display: block; padding: 0; border: 0; min-width: 0; width: auto; text-align: left; }
  .dtable.dp-table tr[data-uc] td:first-child { box-shadow: none; }
  .dp-table tr[data-uc] { box-shadow: inset 6px 0 0 var(--uc); }
  .dp-table td.dr img { width: 48px; height: 48px; }
  .dp-table td.num.co, .dp-table td.lt, .dp-table td.pr { text-align: right; justify-self: end; }
  .dp-table td.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
  .dp-table td.acts > * { flex: 1 1 auto; min-height: 48px; }
  .dp-table td.acts .tbtn { border: 1px solid var(--line); text-decoration: none; }
  .dp-table td.acts .dbtn + .tbtn, .dp-table td.acts .dbtn + .dbtn { margin-left: 0; }
  .dp-table .stags { margin-left: 6px; }
  .dp-table .pt a.dp-pl { min-height: 48px; }
  .dp-table .pt a.dp-pl .pn { font-size: 16px; }
  .dp-table .pt .mono { white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
  a.rv-unit { min-height: 48px; }
  .dp-table tr.grp, .dp-table tr.rv-actrow { display: block; padding: 0; margin: 0; border-bottom: 0; }
  .dp-table tr.grp th { display: block; padding: 10px 12px; font-size: 16px; }
  .dp-table tr.grp .gwhy { display: block; margin: 2px 0 0; font-size: 14px; }
  .dp-table tr.rv-actrow { border-bottom: 0; }
  .dp-table tr.rv-actrow td { padding-bottom: 12px; }
  .rv-sub { font-size: 14px; }
  /* a wrapping line with the picture at the left, for the rows with many small cells; ::before ends the first line */
  .pl-table tr, .upl-table tr, .imp-table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; position: relative; }
  .pl-table tr::before, .upl-table tr::before, .imp-table tr::before { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .pl-table tr.grp::before { display: none; }

  /* To order: a row of about 120px. Tick, picture and part, with the line total (and the price each) at the right;
     under them the bin, on hand / min / max and the tag on one line, with the stepper at the right (it sits over the
     end of that line, which keeps room for it, so the part's name gets the whole width above) */
  .ord-table tr { position: relative; grid-template-columns: 28px 44px minmax(0, 1fr) auto; grid-template-areas: "ck dr pt lt" "ck dr pt pr" "oh oh oh oh"; column-gap: 8px; row-gap: 2px; padding: 8px 0 8px 12px; }
  .ord-table td.ck { grid-area: ck; align-self: center; } .ord-table td.dr { grid-area: dr; align-self: center; } .ord-table td.pt { grid-area: pt; align-self: center; }
  .ord-table td.dr img { width: 44px; height: 44px; }
  .ord-table .pt a.dp-pl .pn { font-size: 15.5px; line-height: 1.25; }
  .ord-table td.lc, .oo-table td.lc { display: none; }
  .ord-table td.oh, .oo-table td.oh { grid-area: oh; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; text-align: left; }
  .dp-table td.oh .oh-loc { display: inline-flex; }
  .ord-table td.oh .stags, .oo-table td.oh .stags { margin-left: 0; }
  .ord-table td.oh { min-height: 50px; margin-top: 6px; padding-right: 148px; column-gap: 8px; }
  .ord-table td.qo { position: absolute; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .ord-table tr:has(.dp-sug) td.oh { min-height: 70px; align-items: flex-start; padding-top: 12px; }
  .ord-table td.lt { grid-area: lt; font-size: 18px; align-self: end; }
  .ord-table td.pr { grid-area: pr; font-size: 14px; align-self: start; color: var(--g1); }
  .ord-table .ea { display: inline; }
  .dp-ck { width: 48px; height: 48px; margin: -12px; }
  .dp-table td.ck input { width: 24px; height: 24px; }
  .dp-step { height: 50px; }   /* 48px buttons inside the 1px border */
  .dp-step button { width: 48px; font-size: 24px; }
  .dp-step input { width: 44px; font-size: 18px; }
  .dp-sug { font-size: 14px; margin: 0; }
  /* the supplier's band, with its buttons in one row, stays under the top bar while its parts scroll by */
  .dorder .dp-group > .dp-grp { position: sticky; top: var(--dp-top, 56px); z-index: 6; margin: 0 -16px; padding: 8px 16px 10px; box-shadow: 0 1px 0 var(--line); }
  .dorder .dp-grp h2 { font-size: 18px; }
  .dorder .dp-grp .dp-meta { font-size: 14px; }
  .dorder .dp-gacts { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.5fr); margin-top: 2px; }
  .dorder .dp-gacts > .dbtn.ink { grid-column: auto; }
  .dorder .dp-gacts > .tbtn, .dorder .dp-gacts > .dbtn { padding: 0 6px; font-size: 15px; }
  .dorder .dp-group { margin-top: 16px; }
  .oo-table tr { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "dr pt act" "dr oh act" "ref ref ref"; padding: 10px 0 10px 12px; }
  .oo-table td.ck { display: none; } .oo-table td.dr { grid-area: dr; align-self: start; } .oo-table td.pt { grid-area: pt; }
  .oo-table td.ref { grid-area: ref; } .oo-table td.act { grid-area: act; align-self: center; }
  .oo-table td.ref::before { content: 'Reference: '; color: var(--g1); }
  .oo-table td.act .tbtn { min-height: 48px; min-width: 96px; border: 1px solid var(--line); text-decoration: none; }

  /* Review: waiting for OK, and check units */
  .pd-table tr { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "dr pt co" "dr q q" "dr fo fo" "dr wh wh" "acts acts acts"; }
  .pd-table td.dr { grid-area: dr; align-self: start; } .pd-table td.pt { grid-area: pt; } .pd-table td.co { grid-area: co; align-self: start; }
  .pd-table td.q { grid-area: q; } .pd-table td.fo { grid-area: fo; } .pd-table td.wh { grid-area: wh; } .pd-table td.acts { grid-area: acts; margin-top: 8px; }
  .pd-table td.q::before, .pl-table td.q::before, .upl-table td.q::before { content: 'Qty '; font-size: 14px; color: var(--g1); font-weight: 600; }
  .pd-table td.q .rv-sub, .pd-table td.fo .rv-sub { display: inline; margin-left: 10px; }
  .rv-who, .rv-who + .muted { display: inline; }
  .rv-who + .muted { margin-left: 8px; font-size: 14px; }
  .pd-table td.wh .stag { margin-left: 8px; }
  .pd-table td.acts .dbtn { flex: 2 1 auto; }
  .ck-table tr { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "dr what" "dr fo" "dr wh" "acts acts"; }
  .ck-table td.dr { grid-area: dr; align-self: start; } .ck-table td.ck-what { grid-area: what; min-width: 0; } .ck-table td.fo { grid-area: fo; }
  .ck-table td.wh { grid-area: wh; } .ck-table td.acts { grid-area: acts; margin-top: 8px; flex-direction: column; }
  .ck-table td.fo .rv-sub { display: block; margin: 2px 0 0; }
  .ck-line { font-size: 16px; }
  .ck-not { white-space: normal; }
  /* Pulls: the totals and a Filter button on top; the filters are in a sheet */
  .rv-ptop { padding: 14px 0 8px; display: flex; flex-direction: column; gap: 8px; }
  .rv-ptop .rv-tot { font-size: 16px; padding: 0; align-self: flex-start; }
  .rv-fbar { display: flex; align-items: center; gap: 12px; }
  .rv-fwords { flex: 1; min-width: 0; font-size: 15px; color: var(--soft); }
  .rv-fbar .dbtn { min-width: 112px; }
  .rv-fsheet { display: flex; flex-direction: column; gap: 14px; }
  .pl-table tr { padding-left: 76px; min-height: 76px; }
  .pl-table td.dr { position: absolute; left: 14px; top: 14px; }
  .pl-table td.pt, .upl-table td.pt { order: 1; flex: 1 1 0; }
  .pl-table td.co, .upl-table td.co { order: 2; font-weight: 700; }
  .pl-table td.tm, .upl-table td.tm { order: 4; color: var(--soft); }
  .pl-table td.q, .upl-table td.q { order: 5; }
  .pl-table td.te { order: 6; }
  .upl-table tr { padding-left: 0; }
  .pl-table tr::after { content: ''; order: 7; flex-basis: 100%; height: 0; }
  .pl-table tr.grp::after { display: none; }
  .pl-table td.fo { order: 8; }
  .pl-table td.wo { order: 9; }
  .pl-table td.wo:not(:empty)::before { content: 'WO '; }
  .upl-table td.tm .rv-sub { display: inline; margin-left: 6px; }
  .pl-table td.tg, .upl-table td.tg { order: 10; flex-basis: 100%; }
  .pl-table td.tg { flex-basis: auto; margin-left: auto; align-self: center; }
  .pl-table td.tg:not(:has(.stag)), .upl-table td.tg:not(:has(.stag)) { display: none; }

  .uni-tiles { gap: 6px; }
  .uni-tile { padding: 8px 10px; }
  .uni-tile b { font-size: 20px; }
  .uni-tile .flbl { font-size: 13px; }
  .uni-find .dfield, .uf-sfield { height: 50px; }
  .uni-find .dfield input, .uf-sfield input { height: 48px; font-size: 16px; }
  .uf-sfield { margin-bottom: 8px; }
  .uf-list li { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "img t t" "img chip btn"; row-gap: 6px; padding: 10px 0; }
  .uf-list li > img { grid-area: img; width: 48px; height: 48px; } .uf-list li > .uf-t { grid-area: t; } .uf-list li > :nth-child(3) { grid-area: chip; justify-self: start; }
  .uf-list li > :nth-child(4) { grid-area: btn; }
  .uf-list .dbtn, .uf-done { min-width: 0; min-height: 48px; }
  .uf-t b { font-size: 16px; }
  .uf-t .mono { font-size: 14px; }
  /* the import: the source (choose a file or paste), the columns as a list, the rows as cards, IMPORT at the bottom */
  .uni-src { grid-template-columns: minmax(0, 1fr); }
  .uni-drop { min-height: 112px; }
  .uni-drop b { font-size: 17px; }
  .uni-paste textarea { font-size: 16px; min-height: 120px; }
  .ucols { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line2); }
  .ucol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "h sel" "s sel"; column-gap: 12px; row-gap: 2px; align-items: center; border: 0; border-bottom: 1px solid var(--line2); padding: 10px 0; background: none; }
  .ucol .uch { grid-area: h; font-size: 15px; color: var(--ink); }
  .ucol .ucs { grid-area: s; font-size: 14px; color: var(--soft); }
  .ucol .pin { grid-area: sel; margin: 0; height: 48px; font-size: 16px; }
  .ucol.off { grid-template-areas: "h h" "s s"; background: none; border-style: solid; }
  .ucol.skip, .ucol.off { background: none; }
  .imp-table td.un { order: 1; } .imp-table td.gr { order: 2; flex: 1 1 0; } .imp-table td.sc { order: 2; text-align: right; }
  .imp-table td.mo { order: 4; flex-basis: 100%; } .imp-table td.dt { order: 5; flex-basis: 100%; margin-top: 4px; }
  .imp-table td.vin, .imp-table td.lo { display: none; }
  .imp-table .tpickbtn { width: 100%; }
  .uni-rules .ur { width: calc(50% - 4px); }
  .dp-more > summary { min-height: 48px; }
  .uni-impfoot { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 19; margin: 0; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); flex-wrap: nowrap; }
  .uni-impfoot .muted { display: none; } /* the counts are on the preview's heading, the skipped names on the columns */
  .uni-impfoot .dfill { display: none; }
  .uni-impfoot .tbtn { min-height: 52px; }
  .uni-impfoot .dgo { flex: 1; height: 52px; }
  .dp-box.ok { flex-wrap: wrap; }
  .dp-box.ok.uni-done { flex-wrap: nowrap; padding: 16px; gap: 10px; }
  .uni-done h2 { font-size: 20px; }
  .uni-done .dprow .dbtn { min-height: 48px; }
  .dp-box.ok .tbtn { min-height: 48px; padding: 0; }
  /* a message (#toast) sits above APPROVE ALL and IMPORT, not over them (desk.css lifts it over a sheet's foot) */
  html:not(.layer-open) body:has(.dp-actbar) #toast { bottom: calc(var(--nav-h) + var(--safe-b) + 82px); }
  html:not(.layer-open) body:has(.uni-impfoot) #toast { bottom: calc(var(--nav-h) + var(--safe-b) + 82px); }
}
@media (min-width: 1024px) {
  html:not(.layer-open) body.desk:has(.uni-impfoot) #toast { bottom: 88px; }
}

/* ---- a narrow phone (360): the three Review tabs keep each label on one line */
@media (max-width: 379.98px) {
  .dp-head .utabs > button { font-size: 15px; gap: 4px; padding: 8px 2px; }
  /* To order: bin, on hand / min / max and the tag still on one line beside the stepper */
  .ord-table td.oh { column-gap: 6px; padding-right: 144px; }
  .ord-table .dp-step input { width: 40px; }
  .ord-table td.oh .stag { padding: 0 6px 0 5px; gap: 4px; }
  .ord-table td.oh .oh-n { font-size: 14.5px; }
  .ord-table td.oh .oh-n b { font-size: 15px; }
}

/* ---- compact on a tablet (600px to 1024px): the cards two across, the unit's title block side by side */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .ord-table tbody, .oo-table tbody, .pd-table tbody, .ck-table tbody, .imp-table tbody, .pl-table tbody, .upl-table tbody {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  .dp-table tr.grp, .dp-table tr.rv-actrow { grid-column: 1 / -1; }
  .dp-gacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-gacts > .dbtn.ink { grid-column: auto; }
  .ucols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}

/* ---- the sheets (phone): Mark ordered, Reject, the pull filters, Add to fleet, a unit's details, Add a part */
.ms-h { font-size: 16px; font-weight: 800; margin: 20px 0 0; }
.ms-list { margin: 8px 0 16px; border-top: 1px solid var(--line2); }
.ms-list li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.ms-q { min-width: 34px; text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; }
.ms-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 16px; }
.ms-t .mono { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.ms-t > span:not(.mono) { font-size: 15px; color: var(--soft); }
.ms-card { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0 14px; border-bottom: 1px solid var(--line2); margin-bottom: 14px; }
.ms-link { margin-top: 14px; padding-left: 0; min-height: 48px; }
.msheet .dp-lab { width: 100%; margin-top: 4px; }
.msheet .pin { height: 48px; font-size: 16px; }
.msheet textarea.pin { height: auto; }
.msheet .uni-form { gap: 16px; }
.msheet .pchk { min-height: 48px; font-size: 16px; }
.msheet .perr { font-size: 15px; }
.dp-copyta { font-family: var(--mono); font-size: 16px; height: auto; min-height: 280px; white-space: pre-wrap; }

/* ================================================================ step 5: units for everyone (js/views/units.js)
   #/units and #/units/<number> on the phone frame, every role (a tech at a desk-sized screen too: the phone column).
   The cards look like the desk Units page's phone cards: the drawing at the left, the number big, the model, the
   location and one line of counts; the whole card is the link. The tech's bottom nav has three items. */
.nav.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Find: "Browse by unit", a slim row under the find box */
.browseu { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 10px; padding: 0 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 800; }
.browseu .t { flex: 1; min-width: 0; }
.browseu:active { background: var(--g4); }
.browseu .bu-ico { flex: none; }
/* the list (the rows and group rows are the fleet table's, below); the find box's field itself 48px tall */
.ub-find .field.big { height: 52px; }
.ub-find .field.big input { height: 48px; }
.ub-sum { margin: 10px 16px 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.ub-sum:empty { display: none; }
@media (min-width: 1024px) { .ubrowse > .pghead { margin: 24px 16px 0; } }      /* a tech on a computer: the desk frame's column */
.ubrowse .fgroup { margin: 14px 16px 0; }
.ubrowse .fgroup:first-child { margin-top: 18px; }
.ub-note { margin: 8px 0 2px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
/* a unit's parts: the header card and the folded groups (js/unit-parts.js), in the phone's margins */
.ubunit { margin: 6px 16px 0; }

/* ================================================================ step 6: Units as the fleet table, the unit panel,
   Add unit and the truck picker (js/desk/units.js, js/fleet-ui.js; the drawings are js/trucks.js, their CSS in app.css)
   The rows are two lines by default (phones, and Units for everyone in the phone column); the desk Units page lays
   them out in columns. */
.u-tools { display: flex; align-items: center; gap: 12px; padding: 18px 0 14px; }
.uni-q { width: 420px; max-width: 100%; flex: none; }
.u-addrow { display: none; }
.dunits .dp-scroll { padding-top: 0; }

/* ---- a group's row (look.css .ghead) and the rows */
.ugh { margin: 0; font: inherit; }
.ghead { min-height: 64px; cursor: pointer; }
.ghead .gtt { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ghead .gico { display: flex; align-items: center; justify-content: center; }
.ghead .gico svg.truck { width: 64px; height: auto; }
.ghead:hover .gt { text-decoration: underline; text-underline-offset: 3px; }
.colhead + .fgroup .ghead { border-top: 0; }
.fgroup.folded .ghead { border-bottom-color: var(--line2); }
.urows { list-style: none; margin: 0; padding: 0; }
.urows > li { border-bottom: 1px solid var(--line2); }
.urow { display: grid; grid-template-columns: 64px auto minmax(0, 1fr) auto; grid-template-areas: "v n mm p" "v l2 l2 c"; column-gap: 10px; row-gap: 2px; align-items: baseline; min-height: 68px; padding: 10px 2px 10px 0; color: var(--ink); text-decoration: none; }
.urow:active { background: var(--surface-2); }
@media (hover: hover) { .urow:hover { background: var(--surface-2); } .urow:hover .ur-n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } }
.ur-v { grid-area: v; align-self: center; display: flex; align-items: center; justify-content: center; }
.ur-v svg.truck { width: 64px; height: auto; max-height: 30px; }
.ur-v .truck-none { min-width: 0; width: 64px; height: auto; min-height: 30px; padding: 2px; font-size: 12.5px; line-height: 1.1; white-space: normal; text-align: center; }
.ur-n { grid-area: n; font-size: 18px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ur-m { display: contents; }
.ur-mm { grid-area: mm; font-size: 16px; font-weight: 700; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.ur-s, .ur-lo, .ur-pl { display: none; }
.ur-l2 { grid-area: l2; font-size: 15px; line-height: 1.35; color: var(--ink-2); min-width: 0; }
.ur-p { grid-area: p; justify-self: end; text-align: right; white-space: nowrap; font-size: 15px; }
.ur-p b { font-size: 16px; }
.ur-p .ur-w, .ur-pl .ur-w { color: var(--ink-2); }
.ur-c { grid-area: c; justify-self: end; white-space: nowrap; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ur-c .muted { display: none; }
.urow .pill.warn { height: 24px; font-size: 13px; }
.urow.uk { grid-template-areas: "v n mm p" "v l2 l2 c"; }
.urow.uk .ur-s { display: block; grid-area: l2; font-size: 15px; color: var(--ink-2); }
.ukrow { display: flex; align-items: center; gap: 10px; }
.ukrow > .urow { flex: 1; min-width: 0; }
.ukrow > .dbtn { flex: none; min-height: 48px; }
.uni-unknown .dp-hint { margin: 10px 0 6px; }
.ghead .gico svg:not(.truck) { width: 22px; height: 22px; }

/* ---- the desk Units page: the rows in columns under the column headings */
@media (min-width: 1024px) {
  .dunits .colhead.urow-h { position: sticky; top: 0; z-index: 3; background: var(--paper); display: grid; grid-template-columns: 84px 72px minmax(0, 1.7fr) minmax(0, 1fr) 92px 96px 112px; column-gap: 14px; align-items: end; height: 40px; padding: 0 12px 8px 4px; border-bottom: 2px solid var(--ink); }
  .dunits .colhead .num { text-align: right; }
  .dunits .colhead > span { white-space: nowrap; }
  .dunits .colhead.urow-h { height: 58px; }
  .dunits .colhead .c90 { grid-column: 6 / 8; display: grid; grid-template-columns: 96px 112px; column-gap: 14px; row-gap: 4px; }
  .dunits .colhead .c90t { grid-column: 1 / -1; text-align: center; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
  .dunits .urow { grid-template-columns: 84px 72px minmax(0, 1.7fr) minmax(0, 1fr) 92px 96px 112px; grid-template-areas: none; column-gap: 14px; align-items: center; min-height: 64px; padding: 6px 12px 6px 4px; }
  .dunits .urow > * { grid-area: auto; }
  .dunits .ur-v svg.truck { width: 76px; max-height: 34px; }
  .dunits .ur-v .truck-none { width: 76px; }
  .dunits .ur-m { display: flex; flex-direction: column; min-width: 0; }
  .dunits .ur-mm { font-size: 16px; }
  .dunits .ur-s { display: block; font-size: 14px; color: var(--ink-2); }
  .dunits .ur-lo { display: block; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
  .dunits .ur-l2 { display: none; }
  .dunits .ur-p, .dunits .ur-pl, .dunits .ur-c { display: block; justify-self: end; text-align: right; font-size: 15px; color: var(--ink); }
  .dunits .ur-c .muted { display: inline; }
  .dunits .ur-cp { display: none; }      /* the pulls have their own column here */
  .dunits .ur-p .ur-w, .dunits .ur-pl .ur-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dunits .urow.uk { grid-template-areas: none; }
  .dunits .urow.uk .ur-s { font-size: 14px; }
  .dunits .ukrow { gap: 14px; padding-right: 12px; }
  .dunits .ukrow > .urow { padding-right: 0; }
  .dunits .ghead { padding: 12px 12px 12px 4px; }
  .dunits .ghead .gico { width: 84px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .dunits .colhead.urow-h, .dunits .urow { grid-template-columns: 76px 64px minmax(0, 1.6fr) minmax(0, 1fr) 70px 84px 96px; column-gap: 10px; }
  .dunits .colhead .c90 { grid-template-columns: 84px 96px; column-gap: 10px; }
  .dunits .ur-v svg.truck, .dunits .ur-v .truck-none { width: 68px; }
  .uni-q { width: 340px; }
}

/* ---- the unit panel: slides in from the right over the dimmed list */
.dunits-main { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.upanel-wrap { position: fixed; inset: 0; z-index: 25; }
.upanel-bg { position: absolute; inset: 0; background: rgba(21, 24, 27, 0.42); }
.upanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(680px, calc(100vw - 300px)); background: var(--paper); box-shadow: -10px 0 30px rgba(21, 24, 27, 0.2); display: flex; flex-direction: column; outline: 0; }
.upanel-wrap.anim .upanel { animation: up-in 0.22s ease-out; }
.upanel-wrap.anim .upanel-bg { animation: up-fade 0.22s ease-out; }
@keyframes up-in { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes up-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .upanel-wrap.anim .upanel, .upanel-wrap.anim .upanel-bg { animation: none; } }
.up-bar { flex: none; display: flex; align-items: center; gap: 2px; min-height: 64px; padding: 0 10px 0 24px; border-bottom: 1px solid var(--line2); }
.up-title { margin: 0; font-size: 18px; font-weight: 800; white-space: nowrap; }
.up-k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.up-nav, .up-x { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink); border-radius: var(--rc); padding: 0; }
.up-nav:hover:not(:disabled), .up-x:hover { background: var(--surface-2); }
.up-nav:disabled { color: var(--line); cursor: default; }
.up-x { margin-left: 8px; }
.up-pos { min-width: 70px; text-align: center; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.up-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; padding: 4px 24px 32px; }
.up-foot { flex: none; display: flex; align-items: center; gap: 8px; min-height: 72px; padding: 10px 16px 10px 24px; border-top: 1px solid var(--line); background: var(--paper); }
.up-foot:empty { display: none; }
.up-fnote { font-size: 14px; color: var(--ink-2); }
.up-foot .dgo { height: 48px; }
.up-foot .dgo:disabled { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }

/* ---- a unit: the head (the big truck in colour, the number, the model), then sections under small headings */
.uni-title { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 0 20px; border-bottom: 1px solid var(--line2); }
.uni-pic { display: flex; align-items: center; justify-content: center; min-width: 0; }
.uni-pic svg.truck { width: 100%; height: auto; max-height: 120px; }
.uni-pic .truck-none.big { height: 96px; font-size: 14px; white-space: normal; text-align: center; }
.uni-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ub-n { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ub-model { font-size: 17px; font-weight: 700; line-height: 1.3; margin-top: 6px; }
.ub-sub { font-size: 15px; color: var(--ink-2); line-height: 1.35; }
.ub-k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ub-tags { margin-top: 6px; }
.up-sec { padding-top: 20px; }
.up-addform { padding-top: 18px; }
/* Review's pulls: the first day's heading sits right under the column headings' rule */
.dp-table tbody tr.grp:first-child th { border-top: 0; }
.up-hrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 44px; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--line2); }
.up-h { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.up-hn { font-size: 14px; color: var(--ink-2); }
.up-hrow .dbtn { margin-left: auto; }
.up-sec .dp-hint { margin-top: 0; }
.up-sec .upl-table { margin-top: 4px; }
.ub-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; }
.ub-rows dt, .ub-rows dd { padding: 8px 0; border-bottom: 1px solid var(--line2); display: flex; align-items: center; min-height: 44px; }
.ub-rows dt { font-size: 15px; color: var(--ink-2); padding-right: 12px; }
.ub-rows dd { margin: 0; justify-content: flex-end; text-align: right; font-weight: 700; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.ub-rows dd.mono { font-size: 15px; }
.ub-rows dd.ub-notes { font-weight: 400; text-align: left; justify-content: flex-start; }
.ub-acts { display: flex; padding-top: 12px; }
.ub-acts > * { flex: 1; min-height: 52px; }

/* ---- the drawing field (Drawing, Add unit) and the picker's tiles */
.tfield { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 8px 14px 8px 10px; border: 1px solid var(--field); border-radius: var(--rc); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.tfield:hover { border-color: var(--ink); }
.tfield.unset { border-style: dashed; }
.pf.chg .tfield { background: var(--chg-bg); border-left: 3px solid var(--chg-mark); }
.tf-pic { width: 100px; flex: none; display: flex; align-items: center; justify-content: center; }
.tf-pic svg.truck { width: 96px; height: auto; max-height: 48px; }
.tf-pic .truck-none { min-width: 0; width: 96px; }
.tf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tf-t b { font-size: 16px; }
.tf-s { font-size: 14px; color: var(--ink-2); }
.tf-ch { flex: none; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 4px; }
.tfield:hover .tf-ch { text-decoration-color: var(--ink); }
.au-sug { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.au-open { align-self: flex-start; padding-left: 0; min-height: 40px; }
.pf .pin.big { font-family: var(--mono); text-transform: none; }
.pf .pin[readonly] { background: var(--surface-2); }
.tpickbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 4px 10px 4px 6px; border: 1px solid var(--line); border-radius: var(--rc); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.tpickbtn:hover { border-color: var(--ink); }
.tpb-pic { width: 66px; flex: none; display: flex; justify-content: center; }
.tpb-pic svg.truck { width: 64px; height: auto; max-height: 30px; }
.tpb-pic .truck-none { min-width: 0; width: 64px; height: 26px; }
.tpb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tpb-t b { font-size: 15px; white-space: nowrap; }
.tpickbtn .tf-ch { font-size: 14px; }
.tpick-layer .dmodal.tpick-modal { top: 4vh; width: min(900px, calc(100vw - 48px)); max-height: 92vh; display: flex; flex-direction: column; padding: 0; }
.tpm-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 10px 0 24px; border-bottom: 1px solid var(--line2); }
.tpm-bar h2 { flex: 1; margin: 0; font-size: 20px; }
.tpm-body { flex: 1; min-height: 0; overflow: auto; position: relative; padding: 4px 24px 24px; }
.tp-g { margin-top: 16px; }
.tp-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tp-o { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 112px; padding: 10px 10px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.tp-o:hover { border-color: var(--ink); }
.tp-o.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
.tp-o.on::after { content: ''; position: absolute; top: 9px; right: 13px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tp-pic { flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 64px; padding-top: 14px; }
.tp-pic svg.truck { width: auto; max-width: 100%; height: auto; max-height: 64px; }
.tp-pic .truck-none { min-width: 0; width: 100px; height: 40px; }
.tp-l { font-size: 15px; font-weight: 700; line-height: 1.25; }
.tp-s { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: var(--rc); background: var(--good-bg); color: var(--good); font-size: 13px; font-weight: 700; }

/* ---- a phone: the head stacked, the buttons under the search, the panel's parts as the page */
@media (max-width: 1023.98px) {
  .dunits-main { display: block; height: auto; }
  .u-tools { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0 12px; }
  .uni-q { width: 100%; height: 52px; }
  .uni-q input { height: 48px; }
  .u-addrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .u-addrow > * { min-height: 48px; height: 48px; padding: 0 10px; }
  .dunits .colhead { display: none; }
  .ghead { flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; }
  .ghead .gico { width: 56px; }
  .ghead .gico svg.truck { width: 56px; }
  .ghead .gtt { flex: 1; }
  .ghead .gs { order: 3; flex-basis: 100%; justify-content: flex-start; margin-left: 68px; gap: 4px 14px; font-size: 14px; }
  .dunit .dp-scroll { padding: 0 16px 24px; }
  .uni-title { grid-template-columns: 136px minmax(0, 1fr); gap: 14px; padding: 14px 0 16px; }
  .uni-pic svg.truck { max-height: 80px; }
  .uni-pic .truck-none.big { height: 64px; font-size: 13px; }
  .ub-n { font-size: 34px; }
  .ub-model { font-size: 16px; margin-top: 2px; }
  .ub-sub { font-size: 15px; }
  .up-hrow .dbtn { min-height: 48px; }
  .uni-tiles { gap: 6px; }
  .uni-tile { padding: 8px 10px; }
  .uni-tile b { font-size: 20px; }
  .uni-tile .flbl { font-size: 13px; }
  .upl-table td.q::before { content: 'Qty '; font-size: 14px; color: var(--ink-2); font-weight: 600; }
  .upl-table td.tg { order: 6; margin-left: auto; }
  .upl-table td.tg:not(:has(.stag)) { display: none; }
  .ukrow > .dbtn { padding: 0 10px; }
  .tfield { min-height: 72px; }
  .tf-pic { width: 84px; }
  .tf-pic svg.truck, .tf-pic .truck-none { width: 84px; }
  .tpickbtn { min-height: 56px; }
  .au-open { min-height: 48px; }
  .msheet-types .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msheet-types .tp-g:first-child { margin-top: 4px; }
  .msheet-addunit .pgrid.g2 { grid-template-columns: minmax(0, 1fr); }
  .msheet-addunit .pf.s2 { grid-column: auto; }
  .msheet .pin.big { height: 52px; font-size: 20px; }
  .msheet .uni-form .pgrid.g2 { grid-template-columns: minmax(0, 1fr); }
  .msheet .uni-form .pf.s2 { grid-column: auto; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .u-tools { flex-direction: row; align-items: center; }
  .uni-q { flex: 1 1 auto; width: auto; }
  .u-addrow { flex: none; grid-template-columns: auto auto; }
  .u-addrow > * { padding: 0 18px; }
  .uni-title { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px; }
  .msheet-types .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .msheet-addunit .pgrid.g2, .msheet .uni-form .pgrid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msheet-addunit .pf.s2, .msheet .uni-form .pf.s2 { grid-column: span 2; }
}
@media (max-width: 379.98px) {
  .urow { grid-template-columns: 56px auto minmax(0, 1fr) auto; column-gap: 8px; }
  .ur-v svg.truck, .ur-v .truck-none { width: 56px; }
  .ghead .gs { margin-left: 0; }
  .u-addrow > * { font-size: 14px; padding: 0 6px; }
}
/* ---- end step 6 */