/* ==========================================================================
   Walmart operations console
   --------------------------------------------------------------------------
   A thin layer over the business platform's own stylesheet, which is loaded
   first and does all the heavy lifting: the sidebar, the command bar, the
   tables, the forms, the status badges and the summary strip are all its.

   What is here is only what THIS application adds. Keeping it to one file that
   fits on a screen is the point: the moment this grows into a second design
   system the two consoles start looking like two products, and the reason they
   share a stylesheet in the first place is that they are one company's tools.
   ========================================================================== */

/* Walmart blue, in place of the ERP's teal. The only brand change. */
.wm{--accent:#0071CE}

/* -------------------------------------------------------------- sign-in
   A single centred panel rather than the ERP's two-panel split: there is no
   photograph to put beside it and an empty half is worse than no half. */
.wm-auth{min-height:100vh;display:grid;place-items:center;background:var(--n-50);
  padding:var(--s-6) var(--s-4);margin:0}
.wm-auth__panel{width:100%;max-width:380px;background:var(--n-0);
  border:1px solid var(--n-200);border-radius:var(--radius-lg);padding:var(--s-6)}
.wm-auth__brand{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-6)}
.wm-auth__brand strong{display:block;font-size:14px;color:var(--n-900)}
.wm-auth__brand small{display:block;font-size:11px;color:var(--n-500)}
.wm-auth__title{font-size:17px;margin-bottom:var(--s-3)}
.wm-auth__foot{margin:var(--s-6) 0 0;font-size:11px;line-height:1.5}

/* ------------------------------------------------------- the cost column
   Typed in the row, so it has to read as an input without becoming one of
   the 38px boxes the rest of the application uses. `.cell-in` opts out of
   the base input rule, which the ERP's sheet already excludes by name. */
.wm-cost{width:100%;min-width:70px;height:26px;padding:0 6px;text-align:right;
  font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px;
  border:1px solid var(--n-200);border-radius:3px;background:var(--n-0);color:var(--n-900)}
.wm-cost:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent)}
.wm-cost.is-dirty{border-color:var(--warn);background:#FFFCF4}

/* An order with no cost price reports its entire cost as profit. The row says
   so quietly rather than with a badge in a column nobody is reading. */
tr.wm-nocost td{background:#FFFCF4}
tr.wm-nocost:hover td{background:#FFF8E8}

/* The board's own cell controls, and the product thumbnail beside them. */
.wm .cell-in{width:100%;height:26px;padding:0 6px;font-size:12px;
  border:1px solid var(--n-200);border-radius:3px;background:var(--n-0);color:var(--n-900)}
.wm .cell-in:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent)}
.wm-thumb{display:block;margin-top:4px;width:38px;height:38px;object-fit:contain;
  border:1px solid var(--n-150);border-radius:3px;background:var(--n-0)}

/* ------------------------------------------------------ the ability grid */
.wm-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wm-grid__module{margin:0}
.wm-grid__module legend{color:var(--n-700)}
.wm-abilities{display:grid;gap:var(--s-2)}
.wm-abilities__group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wm-abilities__module{font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n-500);min-width:150px}

/* ------------------------------------------- credentials, shown once only */
.wm-creds{border-color:#E7C98F;background:#FFFCF4;margin:0 0 var(--s-3)}
.wm-creds .card__head{border-bottom-color:#F0DFB4}
.wm-creds__kv dd{display:flex;align-items:center;gap:var(--s-2)}
.wm-creds__pw{font-family:var(--mono);font-size:14px;letter-spacing:.04em;
  background:var(--n-0);border:1px solid var(--n-200);border-radius:3px;padding:3px 8px}

/* ---------------------------------------------------------- two-factor */
.wm-qr{display:grid;place-items:center;padding:var(--s-3);background:var(--n-0);
  border:1px solid var(--n-150);border-radius:var(--radius)}
.wm-qr svg{display:block;max-width:100%;height:auto}
.wm-secret{font-size:14px;letter-spacing:.12em;background:var(--n-50);
  border:1px solid var(--n-150);border-radius:var(--radius);padding:8px 10px;margin:var(--s-2) 0 0}
.wm-codes{list-style:none;margin:var(--s-2) 0 var(--s-3);padding:0;display:grid;gap:4px;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.wm-codes li{background:var(--n-50);border:1px solid var(--n-150);border-radius:3px;
  padding:5px 8px;font-size:12.5px;letter-spacing:.06em;text-align:center}

/* ------------------------------------------------------- the fee schedule
   The row whose rates are in force today. Marked with a left edge rather than
   a fill, because the schedule is read as a list of dates and a filled row in
   the middle of one reads as "selected" rather than as "this is the one". */
.data tr.is-current td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.data tr.is-current td{background:var(--ok-soft,var(--n-50))}

/* ------------------------------------------------------ who is signed in
   A name and a sign out link, on one line, no box and no menu. */
.wm-me{display:flex;align-items:center;gap:var(--s-3)}
.wm-me form{margin:0}
.wm-me__name{font-weight:600;color:var(--n-800);text-decoration:none;white-space:nowrap}
.wm-me__name:hover{color:var(--accent)}
.wm-me__out{background:none;border:0;padding:0;font:inherit;color:var(--n-500);
  cursor:pointer;white-space:nowrap}
.wm-me__out:hover{color:var(--danger)}

/* ------------------------------------------------- the editable register
   Fee, tax, label and prep are calculated. The box is EMPTY until somebody
   types over it and shows the calculated figure as a placeholder, so a filled
   box is visibly a hand-typed override and emptying it means "go back to the
   schedule". Without that distinction an empty box and a zero would be the
   same input, and a zero fee is a real thing somebody has to be able to say. */
/* A minimum, not just a width. The table lays out automatically, so a width on
   the header is a suggestion the browser overrules when the columns compete:
   the fee boxes came out 30px wide and clipped "4.53" to "4.5". A min-width on
   the control itself is what the column has to make room for. */
.wm-ovr{width:100%;min-width:58px;text-align:right}
.wm-ovr::placeholder{color:var(--n-400);opacity:1}
/* A typed figure is NOT dressed differently from a calculated one.
   Overrides used to carry an amber fill, an amber border and bold text, which
   made two ordinary numbers in a money row shout at the reader for no reason
   they could act on. Which figures were typed is still on the row, in the
   box's own tooltip, and it says what the schedule would have made it. */

/* The status column holds a badge normally and a select in edit mode. Sized
   for the select, or it collapses to one letter. */
table.data td.col-status select.cell-in,
table.data th.col-status{min-width:104px}

/* A cell on a manually entered order used to carry a dashed border to mark it
   out. Removed: on a register where most boxes are editable anyway, it read as
   a fault in the row rather than as a permission. */
.btn.is-on{background:var(--n-900);color:var(--n-0);border-color:var(--n-900)}

/* The section shows it is being replaced rather than sitting there looking
   stale. */
#registerSection{transition:opacity .12s ease}

/* Rows per page. NOT .cell-in, which is width:100% for a table cell and made
   this select fill the toolbar and push the buttons onto a second line. */
.wm-rows{flex:0 0 92px;width:92px;height:26px;padding:0 6px;font-size:12px;
  border:1px solid var(--n-200);border-radius:3px;background:var(--n-0);color:var(--n-900)}

/* .col-check already exists in the shared sheet. Only the picked row is new. */
table.data tr.is-picked td{background:var(--accent-soft)}

.toolbar__inline{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--n-500);margin-right:-4px}

.wm-clear{display:block;margin-top:4px;font-size:11.5px;color:var(--n-500)}
.wm-clear input{margin-right:4px;vertical-align:middle}

/* ------------------------------------------------- two actions in a cell
   The shared .col-act is 56px, sized for one row menu. A cell holding Edit and
   Remove wrapped them onto two lines and made every row in the register taller
   than its neighbours, which is the same fault the standards note for
   .rec-actions--compact. Wide enough for two words, and never wrapping. */
table.data th.col-act,table.data td.col-act{width:auto;white-space:nowrap}
table.data td.col-act > *{display:inline-block;vertical-align:middle;margin-left:var(--s-2)}
table.data td.col-act > *:first-child{margin-left:0}

/* ----------------------------------------------------------- responsive */
@media (max-width:768px){
  .wm-grid{grid-template-columns:1fr}
  .wm-abilities__module{min-width:0}
}

/* ------------------------------------------------- show and hide a password
   The button sits inside the input's box rather than beside it, so the field
   keeps the same width as every other field on the form. Padding on the input
   reserves the space, so a long password scrolls under the label rather than
   behind the icon. */
.pw{position:relative;display:block}
.pw__in{width:100%;padding-right:38px!important}
.pw__eye{position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer;
  color:var(--n-500,#6B7280);line-height:0}
.pw__eye:hover{color:var(--n-800,#1F2937);background:var(--n-100,#F3F4F6)}
.pw__eye:focus-visible{outline:2px solid var(--accent,#0071CE);outline-offset:1px;
  color:var(--n-800,#1F2937)}
.pw__eye .pw__shut{opacity:1}
.pw__eye.is-on .pw__shut{opacity:0}
.pw__eye[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .pw__eye .pw__shut{transition:opacity .12s ease}
}

/* ------------------------------------------------ access checkboxes ------ */
.acc__follow{padding:10px 12px;border:1px solid var(--n-200,#E5E7EB);border-radius:8px;
  background:var(--n-50,#F9FAFB);margin-bottom:var(--s-3,14px);align-items:flex-start}
.acc__follow small{display:block;color:var(--n-500,#6B7280);font-size:11.5px;margin-top:2px;
  line-height:1.45;font-weight:400}
.acc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s-3,14px)}
.acc__grid.is-locked{opacity:.55}
.acc__sec{border:1px solid var(--n-200,#E5E7EB);border-radius:8px;padding:10px 12px;min-width:0}
.acc__sechead{display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--n-500,#6B7280);padding-bottom:6px;margin-bottom:6px;
  border-bottom:1px solid var(--n-100,#F3F4F6)}
.acc__all{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:none}
.acc__grid.is-locked .acc__all{visibility:hidden}
.acc__item + .acc__item{margin-top:7px}
.acc__sub{margin:3px 0 0 24px;padding-left:9px;border-left:2px solid var(--n-100,#F3F4F6)}
.checkline--sm{font-size:12px;color:var(--n-600,#4B5563)}
.checkline--sm + .checkline--sm{margin-top:1px}
.acc__note{margin-top:var(--s-3,14px)}
@media (max-width:640px){ .acc__grid{grid-template-columns:1fr} }

/* ===================================================== the order register ==
   Declared column widths and a fixed layout. Automatic layout let the browser
   overrule the .w-* classes, so the columns moved whenever a cell's content
   changed, and pressing Edit fields introduced a status select that widened
   the whole table past the page. With this, the widths hold and the wrapper
   scrolls instead. */
/* WHY THESE NUMBERS

   Measured on the live register, 17 Sep 2026. The old widths added up to a
   1284px table inside a wrapper that is 1154px at a 1440 screen, so the
   register scrolled sideways on the commonest laptop there is: the columns a
   person types in sat off the right of the page while the totals band above
   still spanned the full width, which is what "not aligned within the screen"
   looks like. At 1920 the opposite happened and Customer, the one flexible
   column, took 366px to show a name that needs 120.

   So: Customer is fixed and narrow, PRODUCT is the flexible column, and every
   money column is cut to what its own figure actually measures at 12px in the
   mono face. The seventeen fixed widths add up to 1094, and the min-width of
   1178 leaves Product an 84px floor below which the wrapper scrolls rather
   than the name being clipped to nothing. 1178 is exactly the wrapper at a
   1440 screen once this page has given back its side padding; every pixel
   above that goes to the product name, the column that can use it. */
.wm-reg{table-layout:fixed;width:100%;min-width:1150px}
.wm-reg-wrap{max-width:100%;overflow-x:auto}

/* The register screen gives its side padding back to the table. 12px a side
   instead of 24 is 24px of page, and it is applied to `main` rather than to
   the table, so the totals band and the filter bar above move with it and the
   three still line up down the left edge. */
.wm.wm-wide .main{padding-left:var(--s-3);padding-right:var(--s-3)}

.wm-reg col.c-date{width:58px}
.wm-reg col.c-ref{width:128px}
.wm-reg col.c-prod{width:auto}          /* the only flexible column */
.wm-reg col.c-cust{width:84px}
.wm-reg col.c-qty{width:34px}
.wm-reg col.c-sell{width:60px}
.wm-reg col.c-cost{width:62px}
.wm-reg col.c-ovr{width:58px}
.wm-reg col.c-tot{width:62px}
.wm-reg col.c-net{width:62px}
.wm-reg col.c-pct{width:58px}
.wm-reg col.c-status{width:84px}

/* Tighter gutters than the shared table, because eighteen columns at 10px a
   side spend 360px on whitespace. */
/* WRITTEN AS `table.data.wm-reg`, ON PURPOSE.

   The shared sheet sets the gutters with `table.data td{padding:...}`, which
   is one element more specific than `.wm-reg td`. The tighter register
   padding has been written here since the register was built and has never
   once applied: every cell was still carrying the shared 10px a side, which
   is 360px of an eighteen column table spent on whitespace and the reason the
   figures were being clipped by their own columns. Matched on the table's two
   classes, it wins, and each cell gets 10px of its width back. */
table.data.wm-reg{--cell-x:5px}
table.data.wm-reg th,table.data.wm-reg td{padding-left:5px;padding-right:5px}
table.data.wm-reg th{font-size:9px;letter-spacing:.04em}

/* MEASURED, NOT CHOSEN.

   Every figure in this table is mono, so its width is the character count
   times the face's fixed advance. At 12px that advance is about 7.2px, which
   makes a 15 digit order number 108px and a 566.67% ROI 50px: both wider than
   the column they sit in, and with the clipping above they came out as
   "6000001167…" and "566…". At 11px the advance is 6.0px, an order number is
   90 and an ROI 42, and both fit inside their own column with room left. The
   register is a dense money table read at arm's length, not prose; 11px mono
   is the size the rest of the console uses for a figure in a compact row. */
table.data.wm-reg td.num,table.data.wm-reg th.num{font-size:11px}
table.data.wm-reg td.col-ref,table.data.wm-reg td.col-ref a{font-size:11px;font-family:var(--mono)}
table.data.wm-reg td.col-date{font-size:11px;white-space:nowrap;letter-spacing:-.01em}
table.data.wm-reg .cell-in,table.data.wm-reg .wm-cost,table.data.wm-reg .wm-ovr{font-size:11px}

/* NOTHING IN THIS TABLE MAY BLEED INTO THE COLUMN BESIDE IT.

   Fixed layout does not clip on its own: a cell wider than its column simply
   paints over its neighbour. The order number ran through the product name,
   "COST PRICE" ran into "FEE", and a 566.67% ROI sat on top of the status
   badge — all of it silent, because nothing overflows the PAGE. Clipped here
   once for every cell, so the only way a figure can be cut is by its own
   column being too narrow, which is visible and fixable. */
table.data.wm-reg th,table.data.wm-reg td{overflow:hidden;text-overflow:ellipsis}
.wm-reg td.col-prod,.wm-reg td.col-cust{white-space:nowrap}
.wm-reg td.col-ref{white-space:nowrap;font-size:12px}
.wm-reg .cell-in,.wm-reg .wm-cost,.wm-reg .wm-ovr{min-width:0;width:100%}
table.data.wm-reg .wm-cost,table.data.wm-reg .wm-ovr{padding:0 4px}
table.data.wm-reg td.col-status select.cell-in{min-width:0;width:100%}
.wm-reg td.col-status .badge,.wm-reg td.col-status .status{max-width:100%}

/* The product name. A link, because the order behind it is one press away and
   a name that is not a link is a name somebody copies and pastes into search. */
.wm-prod{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--n-800,#1d2939);text-decoration:none;font-size:12.5px;line-height:1.3}
.wm-prod:hover{color:var(--accent);text-decoration:underline}
.wm-prod__more{display:inline-block;margin-top:1px;padding:0 4px;border-radius:3px;
  background:var(--n-100,#eef1f5);color:var(--n-600,#5b6472);
  font-size:9.5px;font-weight:800;line-height:14px}

/* Customer, stacked. Side by side in 86px the province was the half that got
   clipped, and the province is the half somebody scanning is reading. */
.wm-cust{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;line-height:1.25}
.wm-cust__p{display:block;font-size:9.5px;line-height:1.2;color:var(--n-500,#667085);
  letter-spacing:.04em;text-transform:uppercase}

/* A live figure that has moved since the page was drawn. Not an error, so it
   is weight and colour rather than a border, which would make the column jump. */
.wm-reg td[data-out].is-live{color:var(--accent);font-weight:700}
.wm-reg td[data-out].is-live.is-danger{color:var(--danger)}

/* The marker on an order that has a return against it. */
.wm-retmark{display:inline-block;margin-left:5px;padding:0 4px;border-radius:3px;
  background:var(--danger-soft,#FEECEC);color:var(--danger,#B42318);
  font-size:9.5px;font-weight:800;line-height:15px;text-decoration:none;vertical-align:middle}
.wm-retmark:hover{background:var(--danger,#B42318);color:#fff}

/* ==================================================== the shipping board ==
   Fourteen columns, and the same treatment the register got, for the same
   reason: left to lay itself out the browser gave a customer name as much
   width as it asked for, wrapped it onto two lines, and every row came out a
   different height. That is what the board coming apart looks like.

   Declared widths add up to 1088, measured against what each column actually
   holds: a twelve digit waybill plus its track button, a courier name under
   the short names the couriers are really called, a DELIVERED badge. With the
   90px floor on Product the table is 1178, which is exactly the wrapper at a
   1440 screen once this page has given back its side padding. Above that,
   Product takes the slack. */
.wm-board{table-layout:fixed;min-width:1178px}
.wm-board-wrap{max-width:100%;overflow-x:auto}

.wm-board col.b-batch{width:104px}
.wm-board col.b-ref{width:110px}
.wm-board col.b-prod{width:auto}        /* the only flexible column */
.wm-board col.b-stock{width:80px}
.wm-board col.b-qty{width:34px}
.wm-board col.b-ship{width:84px}
.wm-board col.b-ff{width:86px}
.wm-board col.b-track{width:104px}
.wm-board col.b-carrier{width:110px}
.wm-board col.b-to{width:84px}
.wm-board col.b-post{width:62px}
.wm-board col.b-date{width:66px}
.wm-board col.b-status{width:96px}
.wm-board col.b-img{width:68px}

/* Written as `table.data.wm-board` so it outranks the shared `table.data td`
   gutters. The same trap the register's padding sat in unnoticed for weeks. */
table.data.wm-board{--cell-x:5px}
table.data.wm-board th,table.data.wm-board td{padding-left:5px;padding-right:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.data.wm-board th{font-size:9px;letter-spacing:.04em}
table.data.wm-board td{font-size:12px}
table.data.wm-board td.col-ref,table.data.wm-board td.col-ref a{font-size:11px;font-family:var(--mono)}
table.data.wm-board .cell-in{min-width:0;width:100%;font-size:11px;padding:0 4px}
table.data.wm-board td.col-date{font-size:11px}

/* Rows stay the same height whatever is in them. A board is scanned down a
   column, and a column whose rows are 46px, 62px and 46px cannot be. */
table.data.wm-board tbody tr{height:44px}
table.data.wm-board .wm-thumb{width:28px;height:28px;margin-top:2px}

/* A cell that holds a box AND something beside it. One line, always: a row
   with a tracking link or a thumbnail used to be six pixels taller than one
   without, and the board is read by running an eye down a column. */
.bcell{display:flex;align-items:center;gap:3px;min-width:0}
.bcell > .cell-in,.bcell > .wm-prod{flex:1 1 auto;min-width:0}
.bcell > .wm-prod__more{flex:0 0 auto;margin-top:0}
.bcell__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.bcell__go{flex:0 0 auto;width:15px;height:20px;line-height:20px;text-align:center;
  border-radius:3px;background:var(--n-100,#eef1f5);color:var(--n-600,#5b6472);
  font-size:11px;text-decoration:none}
.bcell__go:hover{background:var(--accent);color:#fff}
.wm-board .wm-thumb{flex:0 0 auto;margin-top:0;width:26px;height:26px}

/* The page must not be widened by the table. A grid or flex child defaults to
   min-width:auto, which is its content, so the wrapper's overflow-x never got
   the chance to scroll and the whole layout grew instead. */
.wm .main,.wm .main > *{min-width:0}

@media (max-width:1100px){
  .wm-reg th{font-size:8.5px}
}

/* The rows-per-page control was flex:0 0 92px, which forbids it to shrink, so
   at 1024 its label sat 4px past the toolbar. Allowed to shrink, with a floor
   that still fits "1000". */
.wm-rows{flex:0 1 92px;min-width:62px}
.toolbar__inline{flex:0 0 auto;min-width:0;white-space:nowrap}

/* The register toolbar's helper sentence is 571px wide, which is most of the
   row at 1024 and pushes the Rows control 4px past the edge. It is guidance,
   not data, so it gives way first: it shrinks, and below 1100 it steps aside
   entirely rather than pushing a control off the screen. */
.wm .toolbar > .muted{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
@media (max-width:1100px){
  .wm .toolbar > .muted{display:none}
}

/* ==========================================================================
   19  THE DASHBOARD CHARTS
   --------------------------------------------------------------------------
   Three sections: product performance, sales against returns and cancelled,
   and shipped against unshipped. Drawn by walmart-charts.js, which is loaded
   on the dashboard alone.

   The series colours are a VALIDATED set, not a picked one. Sales, returns and
   cancelled clear every all-pairs colour-blindness gate on this white surface
   (worst deutan separation 13.0, worst normal-vision 16.3); the four fulfilment
   states clear the adjacent gates a stacked bar is read by (worst protan 9.1).
   Changing one of these hexes without re-running that check is how a chart
   stops being readable for the one person in twelve who needs it to be.
   ========================================================================== */
/* Declared on :root, not on .wm.
   The charts read these with getComputedStyle(document.documentElement), which
   is where a custom property has to be declared to be found. Scoped to .wm they
   resolved to an empty string, every mark was drawn with no fill, and the whole
   chart came out grey. This stylesheet is linked by the Walmart layout alone,
   so :root here reaches nothing else. */
:root{
  --s-sales:#2a78d6; --s-returns:#eb6834; --s-cancel:#4a3aa7;
  --f-delivered:#2a78d6; --f-shipped:#1baf7a; --f-awaiting:#eda100; --f-cancelled:#e34948;
  --grid:#E3E9EF;
}

.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;height:auto;overflow:visible}

.legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 10px}
.legend button{display:inline-flex;align-items:center;gap:6px;appearance:none;border:0;
  background:transparent;padding:2px 0;font:inherit;font-size:11.5px;color:var(--n-600);cursor:pointer}
.legend button[aria-pressed="false"]{opacity:.42}
.legend button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.legend i{width:13px;height:3px;border-radius:2px;background:currentColor;flex:0 0 13px}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.legend b{font-family:var(--mono);font-weight:600;color:var(--n-900);font-variant-numeric:tabular-nums}

/* The tooltip is absolutely placed against .chart, so it can never push the
   page sideways however far right the pointer goes. */
.tip{position:absolute;pointer-events:none;z-index:5;min-width:158px;
  background:var(--n-900);color:var(--n-0);border-radius:var(--radius);padding:7px 9px;
  font-size:11.5px;line-height:1.45;box-shadow:0 6px 20px rgba(21,32,43,.28);opacity:0;
  transition:opacity .09s ease;transform:translate(-50%,-100%)}
.tip[data-on]{opacity:1}
.tip__d{font-weight:700;margin-bottom:4px}
.tip__r{display:flex;align-items:center;gap:7px;justify-content:space-between;white-space:nowrap}
.tip__r i{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.tip__r span{display:flex;align-items:center;gap:6px;opacity:.85}
.tip__r b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.tip__f{margin-top:5px;padding-top:4px;border-top:1px solid rgba(255,255,255,.18);opacity:.7;font-size:11px}

/* --- segmented control --------------------------------------------------- */
.seg{display:inline-flex;background:var(--n-100);border:1px solid var(--n-200);
  border-radius:var(--radius);padding:2px;gap:2px}
.seg button{appearance:none;border:0;background:transparent;color:var(--n-600);font:inherit;
  font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--n-900)}
.seg button[aria-pressed="true"]{background:var(--n-0);color:var(--n-900);box-shadow:0 1px 2px rgba(21,32,43,.10)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* --- the KPI strip above the sales chart --------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  border:1px solid var(--n-150);border-radius:var(--radius);overflow:hidden;
  background:var(--n-150);margin-bottom:14px}
.kpi{background:var(--n-0);padding:8px 11px;min-width:0}
.kpi__k{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n-500)}
.kpi__v{display:block;margin-top:2px;font:600 17px/1.25 var(--mono);color:var(--n-900);font-variant-numeric:tabular-nums}
.kpi__v small{font:600 10px/1 var(--font);color:var(--n-400);margin-left:3px}
.kpi__s{display:block;font-size:11px;color:var(--n-500)}

/* --- product performance -----------------------------------------------
   Two views over the same products. The quadrant puts every one of them on
   screen at once as a dot, whatever the catalogue size, and spends its labels
   on the ones worth acting on. The brand list turns an unreadable catalogue
   into a handful of named bars. Neither grows a scrollbar as products are
   added, which a ranked list and a treemap both do, one by getting longer and
   one by getting illegible. */
/* The product panel had a grid of its own when it shared a row with the sales
   chart. It has a screen to itself now, so the only thing it needs is room. */
.tm{padding:2px 14px 8px;min-height:300px}
#wmProducts .toolbar{flex-wrap:wrap;gap:8px}

.tm svg{display:block;width:100%;height:auto;overflow:visible}

/* the quadrant */
.qd__d{cursor:pointer}
.qd__d circle{transition:r .08s ease}
.qd__d:hover circle{stroke:var(--n-900);stroke-width:2}
.qd__d:focus-visible circle{stroke:var(--n-900);stroke-width:2.5}
.qd__d.is-on circle{stroke:var(--n-900)}

/* the concentration strip: one sentence and one bar, above every view */
.abcbar{padding:9px 14px 10px;border-bottom:1px solid var(--n-100)}
.abcbar:empty{display:none}
.abcbar__h{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.abcbar__say{margin:0;flex:1;min-width:140px;font-size:11.5px;color:var(--n-500)}
.seg--sm button{font-size:10.5px;padding:2px 7px}
.abcbar__say b{color:var(--n-900);font-weight:700}
.abcbar__b{display:flex;gap:2px;height:22px;border-radius:var(--radius);overflow:hidden}
.abcbar__b button{appearance:none;border:0;font:inherit;font-size:10.5px;cursor:pointer;
  min-width:0;white-space:nowrap;overflow:hidden;padding:0 7px;text-align:left;
  display:flex;align-items:center;gap:4px}
.abcbar__b button b{font-weight:800}
.abcbar__b button:hover{filter:brightness(.93)}
.abcbar__b button.is-on{box-shadow:inset 0 0 0 2px var(--n-900)}
.abcbar__b button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* the ten biggest sellers, ranked */
.rank{display:flex;flex-direction:column;padding:8px 0 2px}
/* THE BAR takes the slack, not the name.
   With the name on 1fr and the bar capped at 84px, a wide screen gave the
   title a foot of empty space and squeezed every bar into a strip at the far
   edge, so the one thing the view exists to compare was the smallest thing
   on it. The name is capped; the bar grows. */
.rank__r{display:grid;
  grid-template-columns:20px minmax(140px,30%) minmax(0,1fr) 84px 46px;
  align-items:center;gap:10px;width:100%;appearance:none;border:0;background:transparent;font:inherit;
  color:inherit;padding:5px 12px;cursor:pointer;text-align:left;border-radius:4px}
.rank__r:hover{background:var(--n-50)}
.rank__r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rank__i{font:700 10px/1 var(--mono);color:var(--n-400);text-align:right}
.rank__n{font-size:11.5px;color:var(--n-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank__t{height:13px;background:var(--n-100);border-radius:3px;overflow:hidden}
.rank__f{display:block;height:100%;border-radius:3px;min-width:3px}
.rank__v,.rank__m{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;
  text-align:right;white-space:nowrap}
.rank__v{font-weight:600;color:var(--n-900)}
.rank__m{color:var(--n-500)}

/* the table: a chart in the sales column, and it pages rather than scrolling */
.ptw{overflow-x:auto;margin:0 -14px}
table.pt{width:100%;border-collapse:collapse;font-size:11.5px}
table.pt th{padding:0;border-bottom:1px solid var(--n-200);background:var(--n-25)}
table.pt th.pt__sp{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--n-500);padding:7px 2px 7px 6px}
table.pt th button{appearance:none;border:0;background:transparent;font:inherit;font-size:9.5px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--n-500);
  padding:7px 6px;cursor:pointer;width:100%;text-align:inherit;white-space:nowrap}
table.pt th.num{text-align:right}
table.pt th.num button{text-align:right}
table.pt th.is-sorted button{color:var(--n-900)}
table.pt th button i{font-style:normal;margin-left:3px}
table.pt th button:hover{color:var(--n-900)}
table.pt th button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Fixed, with the colgroup the renderer emits deciding the proportions.
   Auto layout gave the product name every spare pixel on a wide screen and
   stranded the figures at the far edge. */
table.pt{table-layout:fixed;width:100%}
.pt col.c-name{width:38%}
.pt col.c-sales{width:17%}
.pt col.c-profit{width:12%}
.pt col.c-margin{width:11%}
.pt col.c-units{width:14%}
.pt col.c-trend{width:8%}
@media (max-width:900px){
  .pt col.c-name{width:32%} .pt col.c-sales{width:19%}
}
table.pt td{padding:5px 6px;border-bottom:1px solid var(--n-100);vertical-align:middle;
  font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.pt tbody tr{cursor:pointer}
table.pt tbody tr:hover td{background:var(--n-25)}
table.pt tbody tr.is-on td{background:var(--accent-soft,#E6F7F5)}
table.pt tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
table.pt td.num{text-align:right}
.pt__n{font-family:var(--font)!important;white-space:normal!important}
.pt__u em{font-style:normal;color:var(--n-400)}
.pt__n span{display:block;font-weight:600;color:var(--n-900);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pt__n em{display:block;font-style:normal;font-size:10px;color:var(--n-500);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pt__b{min-width:0}
.pt__bar{display:block;height:6px;width:100%;background:var(--n-100);border-radius:3px;
  overflow:hidden;margin:0 0 3px}
.pt__bar span{display:block;height:100%;border-radius:3px;min-width:2px}
.pt__b b{font-weight:600;color:var(--n-900)}
table.pt .chip{display:inline-block;font-size:10px;font-weight:700;border-radius:3px;padding:1px 5px}
.pt__sp{text-align:right;padding-right:6px!important}
.pt__sp svg{display:inline-block;vertical-align:middle}
.ptp{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0 2px;
  font-size:11px;color:var(--n-500)}
.ptp button{appearance:none;border:1px solid var(--n-200);background:var(--n-0);color:var(--n-700);
  font:inherit;font-size:11px;padding:3px 10px;border-radius:var(--radius);cursor:pointer}
.ptp button:hover:not([disabled]){border-color:var(--n-400);color:var(--n-900)}
.ptp button[disabled]{opacity:.42;cursor:default}
.ptp button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* the brand list */
.bl{display:flex;flex-direction:column;padding:2px 4px 6px}
.bl__r{display:grid;
  grid-template-columns:minmax(90px,16%) 80px minmax(0,1fr) 96px 92px 52px;
  align-items:center;gap:10px;width:100%;appearance:none;border:0;background:transparent;
  font:inherit;color:inherit;padding:6px 12px;cursor:pointer;text-align:left;border-radius:4px}
.bl__r:hover{background:var(--n-50)}
.bl__r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bl__n{font-size:12.5px;font-weight:700;color:var(--n-900);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bl__c{font-size:10.5px;color:var(--n-500);white-space:nowrap}
.bl__t{height:15px;background:var(--n-100);border-radius:3px;overflow:hidden;min-width:40px}
.bl__f{display:block;height:100%;border-radius:3px;min-width:3px}
.bl__v,.bl__p,.bl__m{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;
  text-align:right;white-space:nowrap}
.bl__v{font-weight:600;color:var(--n-900)}
.bl__m{color:var(--n-500)}

.tmkey{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 14px 10px;
  font-size:10.5px;color:var(--n-500);border-bottom:1px solid var(--n-100)}
.tm__k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--n-500)}
.tm__s{display:inline-flex;align-items:center;gap:4px}
.tm__s i{width:11px;height:11px;border-radius:2px;display:inline-block}
.tm__bad{margin-left:10px;color:var(--danger);font-weight:700}
.tm__ok{margin-left:10px;color:var(--ok);font-weight:600}

.pcrumb{display:flex;align-items:center;gap:7px;padding:0 14px}
.pcrumb:empty{display:none}
.crumb{appearance:none;border:0;background:var(--n-100);color:var(--n-600);font:inherit;
  font-size:11px;padding:2px 8px;border-radius:99px;cursor:pointer}
.crumb:hover{background:var(--n-150);color:var(--n-900)}
.crumb__at{font-size:11.5px;font-weight:700;color:var(--n-900)}

/* the detail panel: one product, never a list */
.pd{padding:11px 14px 13px;border-top:1px solid var(--n-150);background:var(--n-25)}
.pd__h{display:flex;align-items:baseline;gap:7px;margin-bottom:9px;min-width:0;flex-wrap:wrap}
.pd__h strong{font-size:12.5px;color:var(--n-900);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pd__h .sku{font-family:var(--mono);font-size:10px;background:var(--n-100);color:var(--n-600);
  border-radius:3px;padding:0 4px;flex:0 0 auto}
.pd__b{appearance:none;border:0;background:var(--accent-soft,#E6F7F5);color:var(--n-700);
  font:inherit;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;cursor:pointer;flex:0 0 auto}
.pd__b:hover{background:var(--n-150);color:var(--n-900)}
.pd__s{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:7px 10px;margin:0 0 10px}
.pd__s dt{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--n-500)}
.pd__s dd{margin:1px 0 0;font:600 13px/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--n-900)}
.pd__m{display:block;height:64px;width:auto;max-width:100%}

/* --- shipped against unshipped ------------------------------------------- */
.split{display:flex;height:26px;border-radius:var(--radius);overflow:hidden;gap:2px;margin-bottom:12px}
.split div{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:#fff;min-width:0;white-space:nowrap;overflow:hidden}

/* --- the day heatmap ------------------------------------------------------ */
.hm{display:flex;gap:8px;align-items:flex-start;overflow-x:auto;padding-bottom:2px}
.hm__grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,15px);
  grid-auto-columns:15px;gap:3px}
.hm__d{width:15px;height:15px;border-radius:2px;background:var(--n-100)}
.hm__dow{display:grid;grid-template-rows:repeat(7,15px);gap:3px;font-size:9.5px;color:var(--n-500);
  align-items:center;text-align:right;flex:0 0 auto}
.hm__key{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--n-500);margin-top:9px}
.hm__key i{width:13px;height:13px;border-radius:2px;display:inline-block}

.chart-note{margin:11px 0 0;font-size:11.5px;color:var(--n-500);line-height:1.55;max-width:92ch}
.chart-note b{color:var(--n-700)}

/* ==========================================================================
   20  THE SECTION GRID
   --------------------------------------------------------------------------
   A section is not a row.

   Every screen in this console stacked its sections one under another at the
   full width of the page, so a queue of five lines and a table of four columns
   each took a band the whole way across and left two thirds of it empty. On a
   1600px screen that is most of the page spent on nothing, and it pushes the
   thing somebody came to read below the fold.

   These put two sections side by side and collapse to one column when there is
   no longer room for two. `--split` gives the first column the larger share,
   for a chart beside a list; `--even` splits them equally, for two tables.
   ========================================================================== */
.rowset{display:grid;gap:var(--gap-grid,14px);align-items:start;margin:0 0 var(--s-4)}
.rowset > *{min-width:0;margin-bottom:0}
.rowset--split{grid-template-columns:minmax(0,1fr) minmax(0,1.75fr)}
.rowset--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.rowset--wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:1180px){
  .rowset--split,.rowset--even,.rowset--wide{grid-template-columns:minmax(0,1fr)}
}

/* A section inside a row set carries its own bottom margin from the grid gap,
   so the stacked-section margin would double it. */
.rowset .section{margin-bottom:0}

/* A column of the row set that stacks two sections. The queue is five lines
   and the chart beside it is six hundred pixels tall, so the left-hand column
   ended a third of the way down and the rest of it was white. */
.stackcol{display:flex;flex-direction:column;gap:var(--gap-grid,14px);min-width:0}
.stackcol > *{margin-bottom:0}


/* ==========================================================================
   20  THE REGISTER FITS THE SCREEN IT IS ON (30 Sep 2026)
   --------------------------------------------------------------------------
   The register had one layout: seventeen fixed columns with a 1178px floor.
   Anything narrower than a 1440 screen with the sidebar open scrolled
   sideways, so at 1366 and 1280 the Status column sat past the right edge,
   and a new order's Add and Cancel lived in a 28px column that clipped them
   out of sight at every width.

   It now has three layouts, chosen by the width the REGISTER actually has,
   not the width of the window. A container query rather than a media query,
   because the same window gives the table 1180px with the sidebar open and
   1356px with it collapsed, and the phone drawer takes nothing at all.

     1150px and up   the full register, the widths declared in section 18,
                   which leave Product about 140px at a 1440 screen
     1010 to 1149    the compact register: 3px gutters, figures cut to what
                     they measure at 10.5px, so 1366 and 1280 screens fit
                     every column with no sideways scroll
     under 1010      one card per order, each figure under its own label,
                     so a tablet or a phone reads the whole order without
                     scrolling sideways and every box can still be typed in
   ========================================================================== */
#registerSection{container-type:inline-size;container-name:wmreg}

/* The new order entry. Its own panel above the table, never a table row. */
.wm-add{margin:0 0 var(--s-2);padding:10px 12px;border:1px solid var(--accent);
  border-radius:var(--radius);background:var(--accent-soft,#E8F2FB)}
.wm-add[hidden]{display:none}
.wm-add__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 8px;
  font-size:12.5px;color:var(--n-900)}
.wm-add__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
  gap:8px 10px;align-items:end}
.wm-add__f{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n-500)}
.wm-add__f > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm .wm-add__f .cell-in{height:30px;min-width:0;width:100%;font-size:12.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--n-900);background:var(--n-0)}
.wm-add__f--wide{grid-column:span 2}
.wm-add__act{display:flex;align-items:flex-end;gap:6px;min-width:0}
.wm-add__act .btn{height:30px}
@container wmreg (max-width:280px){ .wm-add__f--wide{grid-column:auto} }

/* A quantity box on a manually entered order is 24px of content. The
   browser's spin arrows took all of it and hid the figure behind them. */
.wm-reg input[type=number]{-moz-appearance:textfield;appearance:textfield}
.wm-reg input[type=number]::-webkit-inner-spin-button,
.wm-reg input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* A manually entered order carries a date box in the Date column, and 58px
   showed "202". The calendar button is hidden inside the register and the
   picker opens on a click instead (walmart.js), so the box only needs the
   date itself, and the column widens only on a page that holds such a row. */
.wm-reg td.col-date input[type=date]{padding:0 3px}
.wm-reg td.col-date input[type=date]::-webkit-calendar-picker-indicator{display:none}
.wm-reg:has(td.col-date input) col.c-date{width:88px}

/* Every heading the same size. The figure rule in section 18 also caught
   th.num, so COST, FEE and TAX were printed at 11px beside DATE and ORDER at
   9px and the heading row looked like two rows out of step. */
table.data.wm-reg th.num{font-size:9px}

/* The return marker sits in the corner of the order cell instead of beside
   the number. Inline it pushed a 15 digit order number into an ellipsis. */
@container wmreg (min-width:1010px){
  table.data.wm-reg td.col-ref{position:relative}
  .wm-reg td.col-ref .wm-retmark{position:absolute;top:3px;right:2px;margin:0;padding:0 3px;
    font-size:8.5px;line-height:12px}
}

/* ------------------------------------------------------ compact register
   Budgeted for a 1280 screen with the sidebar open, where the register has
   1018px. Sixteen fixed columns take 920 of it and Product keeps about 96,
   enough for the first two words of a name, with the whole basket in the
   link's title. Figures are sized against Consolas at 10.5px, the face
   Windows resolves the mono stack to. */
@container wmreg (min-width:1010px) and (max-width:1149px){
  table.data.wm-reg{min-width:1000px}
  table.data.wm-reg th,table.data.wm-reg td{padding-left:3px;padding-right:3px}
  table.data.wm-reg th{font-size:8.5px;letter-spacing:.02em}
  table.data.wm-reg td.num,
  table.data.wm-reg .cell-in,table.data.wm-reg .wm-cost,table.data.wm-reg .wm-ovr{font-size:10.5px}
  table.data.wm-reg th,table.data.wm-reg th.num{font-size:8.5px}
  table.data.wm-reg .cell-in{padding:0 4px}
  table.data.wm-reg td.col-ref,table.data.wm-reg td.col-ref a,table.data.wm-reg td.col-date{font-size:10.5px}
  .wm-reg .wm-prod{font-size:12px}
  .wm-reg .wm-cust{font-size:11.5px}
  .wm-reg .wm-retmark{margin-left:3px;padding:0 3px}
  .wm-reg col.c-date{width:56px}
  .wm-reg col.c-ref{width:116px}
  .wm-reg col.c-cust{width:68px}
  .wm-reg col.c-qty{width:26px}
  .wm-reg col.c-sell{width:54px}
  .wm-reg col.c-cost{width:56px}
  .wm-reg col.c-ovr{width:50px}
  .wm-reg col.c-tot{width:56px}
  .wm-reg col.c-net{width:56px}
  .wm-reg col.c-pct{width:52px}
  .wm-reg col.c-status{width:76px}
  .wm-reg:has(td.col-date input) col.c-date{width:84px}
}

/* ------------------------------------------------------ one card per order */
@container wmreg (max-width:1009px){
  .wm-reg-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  table.data.wm-reg{display:block;width:100%;min-width:0}
  .wm-reg colgroup{display:none}
  /* The header row is replaced by the label printed over each figure, which
     is generated content and is read out with the figure. */
  .wm-reg thead{display:none}
  .wm-reg tbody{display:grid;gap:8px}
  table.data.wm-reg tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
    height:auto;gap:8px 12px;padding:10px 12px;border:1px solid var(--n-200);border-radius:var(--radius);
    background:var(--n-0)}
  table.data.wm-reg tbody tr.wm-nocost{background:#FFFCF4;border-color:#EBDDB8}
  table.data.wm-reg tr.wm-nocost td,table.data.wm-reg tr:hover td{background:transparent}
  table.data.wm-reg td{
    display:flex;flex-direction:column;justify-content:flex-start;gap:3px;min-width:0;
    width:auto;max-width:none;padding:0;border:0;background:transparent;overflow:visible;text-align:left;white-space:normal}
  table.data.wm-reg td[data-label]::before{content:attr(data-label);font-family:inherit;
    font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--n-500);line-height:1.2}
  table.data.wm-reg td.col-prod{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:3px 6px}
  table.data.wm-reg td.col-prod::before{flex:0 0 100%}
  .wm-reg .wm-prod{white-space:normal;font-size:13px;font-weight:600}
  table.data.wm-reg td.col-ref,table.data.wm-reg td.col-cust{grid-column:span 2}
  table.data.wm-reg td.col-ref{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px 4px}
  table.data.wm-reg td.col-ref::before{flex:0 0 100%}
  table.data.wm-reg td.num,table.data.wm-reg td.col-ref,table.data.wm-reg td.col-ref a{font-size:12px}
  table.data.wm-reg .cell-in,table.data.wm-reg .wm-cost,table.data.wm-reg .wm-ovr{height:30px;font-size:12.5px}
  .wm-reg td.col-status .st{align-self:flex-start}
  /* Nothing to label on the one row that says no orders match. */
  table.data.wm-reg tr.wm-reg__empty{display:block}
  table.data.wm-reg tr.wm-reg__empty td{display:block;text-align:center;padding:var(--s-4)}
}
@container wmreg (max-width:420px){
  table.data.wm-reg tbody tr{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px}
  table.data.wm-reg td.col-ref,table.data.wm-reg td.col-cust{grid-column:1 / -1}
}

/* ==========================================================================
   21  SHIPMENTS, CUSTOMERS AND REFERRAL FEES (1 Oct 2026)
   --------------------------------------------------------------------------
   Three screens that share one table treatment: a two line cell (the fact,
   then a small grey line under it) so a row carries ten facts in nine
   columns without any of them sitting under the wrong heading. Each table
   is a container like the register: a table when there is room, one card
   per row when there is not.
   ========================================================================== */
.wm-sub{display:block;font-size:10.5px;line-height:1.3;color:var(--n-500,#667085);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-clip{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wm-sub.is-danger,.is-danger.wm-sub{color:var(--danger)}
.wm-pad{padding:var(--s-2) var(--s-3);margin:0}
.wm-list{margin:var(--s-1) 0 0;padding-left:20px;display:grid;gap:6px;font-size:13px;line-height:1.5}
.wm-nolink{text-decoration:none}

.wm-ship-wrap,.wm-cust-wrap{container-type:inline-size;container-name:wmlist}
.wm-ship{table-layout:fixed;width:100%}
.wm-ship col.s-check{width:34px}
.wm-ship col.s-date{width:76px}
.wm-ship col.s-ref{width:140px}
.wm-ship col.s-cust{width:auto}
.wm-ship col.s-item{width:auto}
.wm-ship col.s-track{width:150px}
.wm-ship col.s-label{width:82px}
.wm-ship col.s-moved{width:118px}
.wm-ship col.s-stage{width:128px}
table.data.wm-ship th,table.data.wm-ship td{padding-left:6px;padding-right:6px;overflow:hidden;text-overflow:ellipsis}
table.data.wm-ship th{font-size:9.5px;letter-spacing:.04em}
table.data.wm-ship td{font-size:12.5px;vertical-align:middle}
table.data.wm-ship tbody tr{height:48px}
table.data.wm-ship tr.is-late td{background:#FFF8F6}
.wm-ship .mono{font-size:11.5px}

.wm-custs,.wm-custorders,.wm-refs{width:100%}
table.data.wm-custs td,table.data.wm-custorders td,table.data.wm-refs td{vertical-align:middle}
table.data.wm-custorders td:has(> .wm-clip),table.data.wm-refs td:has(> .wm-clip){max-width:0;overflow:hidden}
.wm-custorders .mono,.wm-refs .mono{white-space:nowrap}
table.data.wm-custorders td.num,table.data.wm-refs td.num{white-space:nowrap}
.wm-shipgrid table.data{width:100%}
.wm-catsel{width:100%;min-width:0;max-width:300px;height:28px;font-size:12px}

/* One card per row when the list has under 860px. The order list on a
   customer page sits beside the details column, so it turns at 640. */
@container wmlist (max-width:860px){
  table.data.wm-ship,table.data.wm-custs,table.data.wm-refs{display:block;table-layout:auto;min-width:0}
  .wm-ship colgroup,.wm-ship thead,.wm-custs thead,.wm-refs thead{display:none}
  .wm-ship tbody,.wm-custs tbody,.wm-refs tbody{display:grid;gap:8px;padding:8px}
  table.data.wm-ship tbody tr,table.data.wm-custs tbody tr,table.data.wm-refs tbody tr{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 12px;height:auto;
    padding:10px 12px;border:1px solid var(--n-200);border-radius:var(--radius);background:var(--n-0)}
  table.data.wm-ship tbody td,table.data.wm-custs tbody td,table.data.wm-refs tbody td{
    display:block;padding:0;border:0;max-width:none;min-width:0;text-align:left;white-space:normal;background:transparent}
  table.data.wm-ship td[data-label]::before,table.data.wm-custs td[data-label]::before,
  table.data.wm-refs td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:2px;font-size:9.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--n-500)}
  table.data.wm-ship tr.wm-ship__empty,table.data.wm-custs tr.wm-ship__empty{display:block}
  table.data.wm-ship tr.wm-ship__empty td,table.data.wm-custs tr.wm-ship__empty td{display:block;text-align:center}
  table.data.wm-ship td.s-check{grid-column:1 / -1}
}

@container wmlist (max-width:640px){
  table.data.wm-custorders{display:block;table-layout:auto;min-width:0}
  .wm-custorders thead{display:none}
  .wm-custorders tbody{display:grid;gap:8px;padding:8px}
  table.data.wm-custorders tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 12px;height:auto;
    padding:10px 12px;border:1px solid var(--n-200);border-radius:var(--radius);background:var(--n-0)}
  table.data.wm-custorders tbody td{display:block;padding:0;border:0;max-width:none;min-width:0;text-align:left;white-space:normal;background:transparent}
  table.data.wm-custorders td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:9.5px;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n-500)}
}

/* The Seller Center layout: the order on the left, its details on the right. */
.wm-shipgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--gap-grid,14px);align-items:start}
.wm-shipgrid__main,.wm-shipgrid__side{display:flex;flex-direction:column;gap:var(--gap-grid,14px);min-width:0}
.wm-shipgrid__main > *,.wm-shipgrid__side > *{margin-bottom:0}
@media (max-width:1100px){ .wm-shipgrid{grid-template-columns:minmax(0,1fr)} }

.wm-shipform__h{margin:var(--s-3) 0 var(--s-2);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--n-500)}
.wm-shipform__h:first-of-type{margin-top:0}
.wm-shipform .form-grid{margin-bottom:var(--s-2)}
.wm-shipform textarea{width:100%}
.wm-shipform__check{display:flex;flex-direction:column;justify-content:flex-end;min-height:58px}
.wm-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--n-800);cursor:pointer}
.wm-check input{width:16px;height:16px;margin:0}
.wm-shipform__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:var(--s-2)}
@media (max-width:900px){ .wm-shipform .form-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .wm-shipform .form-grid--3{grid-template-columns:minmax(0,1fr)} }

.kv--split{grid-template-columns:auto 1fr}
.kv--split dd{text-align:right}
.wm-addr{margin:0;font-size:13.5px;line-height:1.6}

.wm-feed{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:4px 12px;padding:6px 0;
  border-top:1px solid var(--n-100);font-size:12.5px}
.wm-feed:first-child{border-top:0}
.wm-feed__when{color:var(--n-500);font-size:11px;white-space:nowrap}
@media (max-width:560px){ .wm-feed{grid-template-columns:minmax(0,1fr)} }

.wm-feegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px;padding:0 var(--s-3) var(--s-3)}
.wm-feegrid__row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--n-100);font-size:12.5px}
.wm-refs td:first-child,.wm-refs th:first-child{width:32%}