/* ============================================================================================================
   HQ's one stylesheet: the kit (release D2-KIT, 2026-09-30). ONE layer: every selector is defined once, in the
   section that owns it. Owner: "same icon size, one sheet-like grid, one font system, Google-style guidelines in
   one place"; the Orders page is the approved reference; one bright white theme for everyone (no dark mode).
   skill hq-ui "The kit" lists every component with its class names (the /guide/kit page is retired).
   A template carries no <style> block and no inline style except a computed width.

   Sections: 1 fonts · 2 tokens · 3 base type · 4 the shell (top bar, rail, tab strip, banners, alerts) ·
   5 the kit (empty, how, tiles, grid, product cell, chips, buttons, forms, filters, bar, panels, cards) ·
   6 shared widgets (receiving, packing, timeline, costs grid, lookup, desks, feedback) ·
   7 phones · 8 print · 9 ALIASES (old names kept so wave 2 converts folder by folder; delete as they go).
   ============================================================================================================ */

/* 1. fonts, served from here: no page waits on another company's server. Schibsted Grotesk is a VARIABLE font
   (fvar + gvar tables): one file carries every weight from 400 to 800, so bold is real, not synthesized. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/SchibstedGrotesk-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. tokens */
:root{
  color-scheme:light;  /* one bright theme for everyone (owner, 2026-09-20): never follows the computer's dark mode */
  --ground:#F4F6F8; --paper:#FFFFFF; --field:#F7F9FB; --ink:#141E28; --ink-2:#4B5A6B; --ink-3:#7E8B99;
  --line:#E2E7ED; --line-2:#CBD3DC; --grid:#B9C3CE; --grid-head:#6F7D8C;  /* --grid: every table's cell lines (the owner, 2026-10-04: "the lines are not seen, too light") */
  --accent:#0F6E6B; --accent-ink:#0B5654; --accent-soft:#E1F1F0; --practice:#7C3AED; --practice-soft:#F1EBFE;
  --ok:#2E7D4F; --ok-soft:#E1F3E7; --ok-ink:#1F5E3A; --warn:#B7791F; --warn-soft:#FBF0DA; --warn-ink:#7A4E0E;
  --bad:#B4402F; --bad-soft:#FAE5E1; --bad-ink:#8C2F22;
  --send:#1D5FA8; --send-soft:#E3EDF9; --send-ink:#17497E; /* the verdict band's own blue: Send is never the same colour as Buy (green) */
  --box:#C23B8E; --box-soft:#FBE7F2; --box-ink:#8F2A69; /* the Keepa-style Buy Box line (Lookup's chart): pink, drawn only where the Buy Box was not suppressed */
  /* the Profit tiles' header bands (Sellerboard's Tiles, the owner 2026-10-08): blue to teal to green, left to right */
  --tile-1:#4A7FE0; --tile-2:#6B9FD4; --tile-3:#4FA39B; --tile-4:#4FA58A; --tile-5:#48A86F;
  /* the history chart's lines (hq.core.history_chart), the Keepa extension's own colours, softened for the white page */
  --k-amazon:#E07B00; --k-new:#3C5BD8; --k-fba:#D9822B; --k-fbm:#2A9DA8; --k-list:#9AA4AE; --k-rank:#3E9A4A;
  --k-offers:#6B4FBB; --k-reviews:#5B6B7C; --k-rating:#C9A100; --k-walmart:#0071CE;
  /* the charts' channels (.hc-ch-<channel>, the owner's Home), one hue a channel in the bar's order, checked
     for colour-blind separation and 3:1 contrast on the white page: Amazon FBA, Walmart WFS, Walmart FBM, eBay */
  --ch-fba:#C96A00; --ch-wfs:#0071CE; --ch-fbm:#0E9F8E; --ch-ebay:#7A4FD0;
  --ch-gg:#8A4B00; --ch-katy:#5B6B7A; --ch-home:#6B8E23; /* our brand inside FBA; the Katy shelf (the owner's Home, 2026-10-24) */
  /* the restock cadence's four tones (the owner, 2026-11-06, drawing 3): weekly green, every 2 weeks blue, monthly
     amber, as needed grey; a strong value for heads and the ring, a soft one for the column and the chip */
  --cad-wk:#1A7F37; --cad-wk-soft:#E4F3E8; --cad-bw:#1D4ED8; --cad-bw-soft:#E8EFFF;
  --cad-mo:#B45309; --cad-mo-soft:#FFF3E0; --cad-an:#6B7280; --cad-an-soft:#EEF0F3;
  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Schibsted Grotesk","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* THE TYPE SCALE: five sizes, nothing else. title = h1 and a tile's number; section = h2 and a record's name;
     body = paragraphs, fields, buttons in a bar; small = the grid's cells, buttons, secondary lines; micro = column
     headers, chips, labels, stamps. */
  --fs-title:26px; --fs-section:18px; --fs-body:14px; --fs-small:13px; --fs-micro:11px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-1:6px; --r-2:8px; --r-3:12px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(20,30,40,.05), 0 2px 8px rgba(20,30,40,.04);
  --shadow-2:0 1px 2px rgba(20,30,40,.06), 0 8px 24px rgba(20,30,40,.08);
  --ring:0 0 0 3px rgba(15,110,107,.22);
  --pic:64px;       /* the one picture size in a list */
  --pic-big:120px;  /* a record's own header */
  --top-h:56px;     /* the top bar: a plain table's header sticks under it */
}

/* 3. base type */
*{box-sizing:border-box}
html,body{-webkit-text-size-adjust:100%;margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--fs-body);line-height:1.5;letter-spacing:-.005em}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent)}
h1{font-family:var(--display);font-weight:800;font-size:var(--fs-title);letter-spacing:-.025em;line-height:1.15;margin:0 0 var(--s2)}
h2{font-family:var(--display);font-weight:700;font-size:var(--fs-section);letter-spacing:-.015em;margin:var(--s6) 0 var(--s3)}
h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:var(--fs-body)}
h1 .age,h2 .age{font-weight:400;letter-spacing:0;font-size:var(--fs-small);color:var(--ink-3);font-family:var(--body)}
.lede{font-size:var(--fs-body);color:var(--ink-2);max-width:68ch;margin:0 0 20px}
code,.mono{font-family:var(--mono);font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.num,.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.age{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);font-variant-numeric:tabular-nums}  /* a freshness stamp */
.hint,.stat .s,.ftile .fmeta,.cases .next{font-size:var(--fs-small);color:var(--ink-2)}
.muted{color:var(--ink-3)}
.pre{display:block;white-space:pre-wrap}
.nw,.nowrap{white-space:nowrap}  /* a word or short phrase that must not wrap (wave 2: replaces style="white-space:nowrap") */
.spacer{flex:1}  /* an empty flex child that pushes the rest of a .bar to one side */
.neg{color:var(--bad-ink)}  /* a losing number from the `usd` filter */
.err{color:var(--bad);font-size:var(--fs-small);margin-top:8px}
.at{color:var(--accent);font-weight:600}  /* an @tag in a message */
pre.log{font-family:var(--mono);font-size:var(--fs-micro);background:var(--ground);border:1px solid var(--line);padding:8px;max-height:140px;overflow:auto;margin:0;white-space:pre-wrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-1)}

/* the page: a head row (the h1 and the page's own buttons), then blocks */
.head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3)}
.head h2{margin:0;flex:0 1 auto}
.head h1{margin:0;flex:1 1 auto}
.head .bar{margin:0}  /* a bar nested inside a head row carries no bottom margin of its own (wave 2) */
.head>.sub{flex:1 0 100%;margin:0;font-size:var(--fs-small)}  /* the page's subtitle: its own line under the h1 */
.head>.age{flex:1 0 100%;margin:0}  /* the freshness stamp ("dealt Oct 10, 19:11 PT"): one small muted line under the h1, never inside it (UI audit 2026-10-11) */
.block{margin:0 0 var(--s5)}
.block>h2:first-child{margin-top:0}
.block h2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.block h2 a.more{font-size:var(--fs-small);font-weight:600;margin-left:auto}
.block h2 .chip{font-weight:500}  /* a chip beside a bold h2 keeps its own weight (wave 2) */
.block>.scroll+h2:not(:first-child),.block>.tbl+h2:not(:first-child),.block>.note+h2:not(:first-child){margin-top:var(--s5)}  /* a second heading inside a block clears the table above it */
.note{font-size:var(--fs-small);color:var(--ink-3);margin:4px 0 0}

/* 4. the shell */
.top{display:flex;align-items:center;gap:var(--s5);padding:0 var(--s5);height:var(--top-h);background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(20,30,40,.02);position:sticky;top:0;z-index:5}
.mark{font-family:var(--display);font-weight:800;font-size:var(--fs-section);letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:var(--s2)}
.mark-sub{font-family:var(--mono);font-weight:400;font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.modules{display:flex;gap:2px;flex:1;overflow-x:auto}
.modules a,.toplinks a{font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:var(--r-2);white-space:nowrap;transition:background .12s,color .12s}
.modules a:hover,.toplinks a:hover{background:var(--ground);color:var(--ink)}
.modules a.on,.toplinks a.on{background:var(--accent-soft);color:var(--accent-ink)}
.who{display:flex;align-items:center;gap:12px;flex:0 0 auto}  /* never squeezed: the search box gives way first */
.toplinks{display:flex;gap:2px}  /* Tools and Guide beside the search box (the owner, 2026-10-11): the tabs' own link look */
.pill{font-family:var(--mono);font-size:var(--fs-micro);background:var(--ground);border:1px solid var(--line);padding:3px 11px;border-radius:var(--r-pill);white-space:nowrap}  /* the bell and the account name only */
.bell{background:var(--warn-soft);border-color:transparent;color:var(--warn-ink);text-decoration:none;font-weight:600}
.find{flex:0 1 260px;min-width:130px;margin-left:auto}  /* "Find anything" at 260 px on a laptop (the UI audit, 2026-10-11) and the one thing that gives way when the bar is tight: the tabs and the name keep their width, the box shrinks to 130 px with its placeholder whole (the owner's "52 to look at" bell ran the bar 16 px past 1440, the ship gate of 2026-10-12); under 1400 px it is 180 px, under 1200 px an icon */
.find input{width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--field);font:inherit;font-size:var(--fs-small)}
.find input:hover{border-color:var(--line-2)}
.find input:focus{background:var(--paper);border-color:var(--accent);border-radius:var(--r-pill);box-shadow:var(--ring);outline:none}
.acct{position:relative}
.acct summary{list-style:none;cursor:pointer}
.acct summary::-webkit-details-marker{display:none}
.acct summary.on{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.acct-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:168px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-2);padding:6px;display:flex;flex-direction:column;gap:1px;z-index:20}
.acct-menu a{display:block;padding:7px 10px;border-radius:var(--r-1);color:var(--ink-2);text-decoration:none;font-size:var(--fs-body);font-weight:500;white-space:nowrap}
.acct-menu a:hover{background:var(--ground);color:var(--ink)}
.acct-menu a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.acct-menu a:last-child{margin-top:4px;padding-top:8px;border-top:1px solid var(--line);color:var(--ink-3)}
/* banners above the bar: the staging copy and the health state */
.banner{background:var(--warn);color:#fff;font-weight:700;padding:6px 12px;font-size:var(--fs-small);letter-spacing:.04em}
.banner.red{background:var(--bad)}
.banner a{color:#fff;text-decoration:underline}
.shell{display:grid;grid-template-columns:184px 1fr}  /* the rail: the left list of a tab's pages, ONE rail style; under 800 px one column, the rail a strip above the page (section 7; soak 2026-09-30) */
.shell .page{min-width:0}
.rail{background:transparent;border-right:1px solid var(--line);padding:var(--s4) var(--s3)}
.rail a{display:block;padding:8px 12px;border-radius:var(--r-2);color:var(--ink-2);text-decoration:none;font-weight:500;transition:background .12s,color .12s}
.rail a:hover{background:var(--paper);color:var(--ink)}
.rail a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.railhead{margin:12px 0 2px;padding:0 10px;font:600 var(--fs-micro) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.strip{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.strip a{display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-2);padding:3px 10px;text-decoration:none}
.strip a:hover{color:var(--ink)}
/* the tab strip: the tabs inside a rail entry (SUBNAV). ONE tab strip */
.subnav{display:flex;gap:var(--s1);flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 var(--s5)}
.subnav a{padding:9px 12px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:var(--fs-body);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-2) var(--r-2) 0 0}
.subnav a:hover{background:var(--paper);color:var(--ink)}
.subnav a.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.page{padding:var(--s6) max(var(--s5),env(safe-area-inset-right)) 64px max(var(--s5),env(safe-area-inset-left))}  /* every page runs the window's width, one side gutter, nothing centred (the owner, 2026-10-25: "why aren't you using the left and right side of the screen?"); prose keeps its measure (.lede, .empty), a table its content's width */
.foot{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);padding:var(--s4)}
/* notifications: in your face until acknowledged */
.alerts{margin:16px 0 0;padding:0 max(var(--s5),env(safe-area-inset-right)) 0 max(var(--s5),env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}  /* the implicit column needs minmax(0,..) or a long alert title/SKU blows the grid past the phone's edge (found on /desk/dock, owner, 2026-10-01: 10px of sideways scroll) */
.alert{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:10px 14px}
.alert.info{border-left-color:var(--accent)}
.alert.urgent{border-left-color:var(--bad)}
.alert-t span{color:var(--ink-2);margin-left:8px}
.alert-a{display:flex;gap:8px;align-items:center}
.flash{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:var(--r-2);padding:10px 14px;margin:0 0 14px}
.flash.scan-expected{border-left-color:var(--ok);background:var(--ok-soft)}
.flash.scan-unexpected{border-left-color:var(--warn);background:var(--warn-soft)}

/* 5. THE KIT */

/* the empty state */
.empty{border:1px dashed var(--line-2);border-radius:var(--r-3);background:var(--paper);padding:var(--s5);max-width:62ch;color:var(--ink-2)}
.block>.empty{padding:var(--s3) var(--s4)}  /* an empty section is one quiet line, not a tall box */
.empty b{display:block;font-family:var(--display);font-size:var(--fs-body);color:var(--ink);margin-bottom:4px}

/* "How this works": a closed panel with the steps */
details.how{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:var(--s3) var(--s4);margin:0 0 var(--s3)}
details.how>summary{cursor:pointer;font-weight:700}
details.how ol,details.how ul{margin:6px 0 0 18px;padding:0}
details.how p{margin:6px 0 0}
/* any collapsible panel: the summary is always a hand cursor, wherever it sits; bold only when it is a
   direct .panel summary that is not already a .btn (a .btn is bold on its own) */
summary{cursor:pointer}
details.panel>summary:not(.btn){font-weight:600}
details.panel>summary.lg{font-weight:700;font-size:var(--fs-section)}  /* a bigger disclosure title (Receiving's "Add stock without a PO") */
details.panel>summary.lg .age{font-weight:400}
label:has(input[type=checkbox]),label:has(input[type=radio]){cursor:pointer}  /* a label wrapping a checkbox/radio is always clickable */

/* the stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3);margin:0 0 16px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:var(--s3) var(--s4);transition:box-shadow .15s,border-color .15s}
.stat .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--display);font-weight:700;font-size:var(--fs-title);letter-spacing:-.02em;line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .v .u{font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--ink-2)}  /* the unit after a number: "12 orders" */
.stat .v.bad{color:var(--bad-ink)}.stat .v.warn{color:var(--warn-ink)}.stat .v.ok{color:var(--ok-ink)}
.stats a.stat{text-decoration:none;color:inherit;display:block}
.stats a.stat:hover{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.stats .stat.on{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent),var(--shadow-1)}
/* balanced tile rows: auto-fit leaves one tile alone on a second row (7 tiles = 6 + 1); a count that would orphan
   picks a column count that fills its rows (the UI pass, 2026-10-01) */
@media (min-width:1100px){
  .stats:has(>:nth-child(7):last-child){grid-template-columns:repeat(7,minmax(0,1fr))}
  .stats:has(>:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats:has(>:nth-child(9):last-child),.stats:has(>:nth-child(10):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
  .stats:has(>:nth-child(11):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .stats:has(>:nth-child(13):last-child){grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media (max-width:700px){.stats>.stat:last-child:nth-child(odd){grid-column:span 2}}  /* two to a row on a phone: the odd last tile takes the row */

/* THE PROFIT TILES (.sbtiles > .sbtile; the owner, 2026-10-08: "make the UI very similar to Sellerboard, the wrap and
   everything"; board A, 2026-10-17): five across in Sellerboard's order, each a header band in its period's colour
   (Sellerboard's: Today and Yesterday blue, Month to date teal, the forecast and Last month green; --tile-1..5; the
   period over its days) and a rule of the same colour at the foot, over a white body in Sellerboard's shape: a grid
   of two, each figure its small label over its value (.sbk over .sbv): Sales wide with its change, Orders / Units
   beside Refunds, a ruled row (.sbx) of Adv. cost and Est. payout, a ruled row of Net profit wide with its change,
   More at the foot. A change is green up and amber down (.sbchg); .on outlines the page's own period in its colour. A
   click anywhere on a tile sets the page's period to the tile's (a.hd stretched over the card; the owner, 2026-10-10). */
.sbtiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s3);align-items:start}
.sbtile{position:relative;background:var(--paper);border:1px solid var(--line);border-bottom:3px solid var(--tc);border-radius:var(--r-2);box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column;min-width:0;--tc:var(--accent)}
.sbtile:hover{box-shadow:var(--shadow-2)}
.sbtile.on{border-color:var(--tc);box-shadow:0 0 0 2px var(--tc),var(--shadow-1)}  /* the page's period, outlined in its own colour */
.sbtile .hd{display:block;color:#fff;background:var(--tc);padding:9px 12px;line-height:1.3;text-decoration:none}
.sbtile a.hd::after{content:"";position:absolute;inset:0}  /* the whole card is the header's link to its period (the owner, 2026-10-10) */
.sbtile .bd :is(a,button,summary){position:relative;z-index:1}  /* More, the X, the Refunds link and the list's groups stay their own */
.sbtile .hd b{display:block;font-size:var(--fs-small)}
.sbtile .hd .d{display:block;font-family:var(--mono);font-size:var(--fs-micro);opacity:.92}
.sbtile.t1{--tc:var(--tile-1)}.sbtile.t2{--tc:var(--tile-2)}.sbtile.t3{--tc:var(--tile-3)}.sbtile.t4{--tc:var(--tile-4)}.sbtile.t5{--tc:var(--tile-5)}
.sbtile .bd{padding:8px 12px 2px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:6px 10px;align-content:start;flex:1;min-width:0}  /* Orders / Units takes the wider half: a month's "6,496/7,845" whole */
.sbtile .bd>.wide,.sbtile .bd .sbx>.wide,.sbtile .bd>.sbmore{grid-column:1/-1}
.sbtile .bd:not(.open)>.sbx{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;grid-column:1/-1;border-top:1px solid var(--line);padding:6px 0 0}
.sbtile .bd>div,.sbtile .bd .sbx>div{min-width:0}
.sbk{display:block;font-size:var(--fs-micro);color:var(--ink-3)}
.sbv{display:block;font-family:var(--mono);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbv.big{font-size:17px}
.sbv .sl{margin:0 2px;color:var(--ink-3);font-weight:400}  /* the slash between orders and units */
.sbv .muted{font-family:var(--sans);font-size:var(--fs-micro);font-weight:400;white-space:normal}  /* "not collected": small, never cut short */
a.sbv{color:var(--accent-ink);text-decoration:none}
a.sbv:hover{text-decoration:underline}
.sbchg{font-size:var(--fs-micro);font-weight:600;margin-left:6px;font-variant-numeric:tabular-nums}
.sbchg.up{color:var(--ok)}.sbchg.down{color:var(--warn)}
.sbmore{font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--send);background:none;border:0;padding:4px 0 6px;cursor:pointer;text-align:center;width:100%;margin-top:auto}
.sbmore:hover{text-decoration:underline}
/* the product table (board A, 2026-10-17): every column as wide as its content (the kit's .tbl, table-layout auto; a
   number nowrap at 1%), the arrow the row's first cell (td.opener, the Orders row's opener, as on Cases; the owner,
   2026-10-18; the Orders ladder's rules below show the ladder row). The owner's slim canvas (2026-10-24): a 52 px
   picture with the kit's 8 px radius, the name alone on two lines at most, then one small column each for the
   channel chip, the marketplace's id and the MSKU (mono, the kit's micro size) and the repricer's job on a chip;
   one line of numbers a row (the small words in the cells' hovers, rows/_product_money.html `inline`); fourteen
   columns that fit 1400 wide with no sideways scroll, the product column taking what the rest leave. The column
   groups tinted as Sellerboard tints them, by the column's key on each head and cell (data-k: units, sales, fees,
   cogs, net, margin, roi), every second product row a shade darker (the ladder rows between them are hidden, so the
   product rows are every other child), Net profit bold, ROI grey, Last sale small and mono. */
.sbtbl{--pic:52px}.sbtbl .pc-body{display:flex;flex-direction:column;min-width:0;justify-content:center;min-height:var(--pic)}
.sbtbl .pc{align-items:center;gap:var(--s2)}.sbtbl .pc-img{border-radius:var(--r-2)}
.sbtbl .tbl{width:auto;max-width:100%}  /* as wide as its content, never wider than the page (the owner, 2026-10-25: only use the space as needed) */  /* the product column takes what the thirteen content-wide columns leave: no sideways scroll at 1400 */
.sbtbl .tbl td.product{width:auto;max-width:380px;min-width:180px;white-space:normal}  /* the name wraps to two lines at most (the kit's .pc-n clamp) */
.sbtbl .tbl td .pc-t{font-size:var(--fs-small)}
.sbtbl .tbl td .pc-sub{white-space:nowrap;margin-top:1px;min-width:0;overflow:hidden;text-overflow:ellipsis}  /* the Unassigned row's one small line stays in its cell at any width */
.sbtbl .tbl td:is([data-k=channel],[data-k=pricer]){white-space:nowrap;width:1%}.sbtbl .tbl td.mono{white-space:nowrap;width:1%;font-size:var(--fs-micro)}
.sbtbl .tbl td[data-k=msku] a{color:inherit}  /* the MSKU quiet; the marketplace id keeps the link look (the owner, 2026-10-25) */
.sbtbl .tbl td[data-k=msku]{max-width:18ch;overflow:hidden;text-overflow:ellipsis}  /* a long MSKU cut short, the whole in its title */
.sbtbl .tbl td.num{width:1%}
.sbtbl td[data-k=net] .dchip{display:block;width:fit-content;margin:1px 0 0 auto;font-weight:600}  /* the change under the figure */
.sbtbl .tbl td.num .estflag{display:inline-block;text-transform:none;font-weight:400}  /* board A: a small lower-case est. */
.sbtbl .tbl thead th{white-space:normal;vertical-align:bottom;font-size:var(--fs-micro);letter-spacing:.04em;line-height:1.25}  /* a two-word head takes two lines, never the page's width */
.sbtbl .tbl :is(thead th,tbody td){padding:5px;vertical-align:middle}
.sbtbl .tbl td.when{min-width:0;width:1%;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3)}
.sbtbl .tbl th.when{text-align:left}
.sbtbl th[data-k=units]{background:#E8EDF5}.sbtbl th[data-k=sales]{background:#DBE8F7;color:#1D4E89}.sbtbl th[data-k=fees]{background:#FBE6D6;color:#8A4B12}
.sbtbl th[data-k=cogs]{background:#ECE4F6;color:#5A3D8A}.sbtbl th[data-k=net]{background:#D6EFE2;color:#145A3C}.sbtbl th:is([data-k=margin],[data-k=roi]){background:#DFF0EE;color:#145A5A}
.sbtbl td[data-k=sales]{background:#F3F8FD}.sbtbl td[data-k=fees]{background:#FFF6EE}.sbtbl td[data-k=cogs]{background:#F7F3FB}.sbtbl td[data-k=net]{background:#EAF7EF;font-weight:700;font-size:var(--fs-body)}.sbtbl td:is([data-k=margin],[data-k=roi]){background:#F0F8F7}
.sbtbl .tbl tbody tr:has(td.opener):nth-child(4n+3) td{filter:brightness(.985)}
.sbtbl .tbl tbody tr:has(td.opener):hover td{filter:brightness(.97)}
.sbtbl td[data-k=roi]{color:var(--ink-3)}
.sbtbl td .sub.neg a{color:inherit}  /* the refunds under Sold: red, a link to the product's orders */
.sbtbl th a{color:inherit;text-decoration:none}
/* More in place (the owner, 2026-10-09): the tile's body becomes Sellerboard's expandable list (.sblist); a group is a
   plain <details> with its chevron, its "of which" lines indented; the ratio rows at the foot sit on grey, the sums
   bold, as Sellerboard draws them. The X (.sbclose) closes it. The same list opens in a product row's fold. */
.sbtile .bd.open{display:flex;flex-direction:column;gap:4px;padding:6px 10px 10px}
.sbx{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 0 4px;min-width:0}
.sbclose{font:inherit;font-size:var(--fs-body);line-height:1;color:var(--ink-3);background:none;border:0;padding:4px 6px;cursor:pointer;border-radius:var(--r-1);flex:none}
.sbclose:hover{color:var(--ink);background:var(--ground)}
.sblist{font-size:var(--fs-small);font-variant-numeric:tabular-nums;min-width:0}
.sblist .sbg{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:5px 0;border-top:1px solid var(--line);min-width:0}
.sblist details.sbg{display:block;padding:0}
.sblist details.sbg>summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:5px 0 5px 16px;position:relative;list-style:none}
.sblist details.sbg>summary::-webkit-details-marker{display:none}
.sblist details.sbg>summary::before{content:"";position:absolute;left:2px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-70%) rotate(-45deg)}
.sblist details.sbg[open]>summary::before{transform:translateY(-70%) rotate(45deg)}
.sblist .sbg.sub{border-top:0;padding:3px 0 3px var(--s5);color:var(--ink-2)}
.sblist .sbg.sum,.sblist .sbg:first-child,.sblist details.sbg:first-child>summary{font-weight:700}
.sblist .sbg.ratio{background:var(--ground);padding-left:6px;padding-right:6px;font-weight:600}
.sblist .sbn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sblist .sba,.sbby .sba{flex:none;white-space:nowrap;margin-left:auto}
/* The All chip's More (the owner, 2026-10-09: "all three channels together"): under the summed list, one short block per
   channel (.sbby > .sbch), two channels a row: Sales, Orders, Refunds, Net, in full words at the list's size; a value
   that does not fit beside its word goes under it, never cut or over the next block. */
.sbby{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s3);margin-top:var(--s2);padding-top:6px;border-top:1px solid var(--line);font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.sbby .sbch{min-width:0}
.sbby .sbch b{display:block;margin-bottom:2px}
.sbby .sbg{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:var(--s1);padding:1px 0;min-width:0}
.sbby .sbn{color:var(--ink-3);white-space:nowrap}
@media (max-width:1100px){.sbtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.sbtiles{grid-template-columns:1fr}}
/* Profit's filter card (the owner, 2026-10-11, "Option C"): a 232 px card beside the find row and the tiles; the view
   switch as radio rows (the chosen one on the soft accent), the channel checklist with a mono count pill, All channels
   and Apply; one column on a phone */
.pfgrid{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--s4);align-items:start;margin:0 0 var(--s3)}
.pfcard{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.pfcard fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.pfcard legend{padding:0;margin:0 0 6px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pfcard hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:100%}
.pfopt{display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-2);color:var(--ink-2);font-weight:600;font-size:var(--fs-small);min-width:0}
.pfopt input{margin:0;width:16px;height:16px;accent-color:var(--accent);flex:none}
.pfopt:hover{background:var(--ground)}
.pfopt:has(input:checked){color:var(--ink)}
.pfview .pfopt:has(input:checked){background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.pfopt b{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);color:var(--ink-3);background:var(--ground);padding:0 6px;border-radius:var(--r-pill)}
.pfrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:6px}
.pfside{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.pfside .sbtiles,.pfside .ln{margin:0}
.pffind{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0}
.pffind .q{position:relative;flex:1 1 300px;min-width:220px;display:block}
.pffind .q svg{position:absolute;left:10px;top:50%;margin-top:-7px;color:var(--ink-3);pointer-events:none}
.pffind .q input{width:100%;padding-left:30px;min-height:40px}
.pffind .btn{min-height:40px;display:inline-flex;align-items:center}
.pffind .filter{margin-left:auto}
.pffind select{font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);width:auto;min-height:40px;padding:4px 28px 4px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper)}  /* Sort: the table's order (board A) */
.pffind .panel{flex:1 0 100%}  /* the pick list takes its own line under the row */
@media (max-width:700px){.pfgrid{grid-template-columns:1fr}.pffind .filter{margin-left:0}}

/* THE TILES (.tiles, the layout pass 2026-10-03; the owner: "put multiple tables next to each other ... arrange it so
   people don't have to scroll so much"): a page's summaries sit side by side, each tile as wide as its own table (never
   stretched: its heading's link sits at its table's edge); a tile too wide to share a row takes the row; one across on a phone. A heading, a note, a
   list or an empty box never sets a tile's width (contain: they wrap to the table's width instead). .wide takes a row. */
.tiles{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s4) var(--s5);margin:0 0 var(--s5)}
.tiles>*{flex:0 1 auto;min-width:min(100%,360px);max-width:100%;margin:0}
.tiles>.wide{flex-basis:100%}
.tiles>*>:is(h2,p,ul,ol,.note,.empty,.flash,.bar,form),.tiles>*>details>summary{contain:inline-size}
.tiles>*>h2{margin-top:0}
.tiles>*>h3{contain:inline-size}
/* a job tile (Repricer > Blocks, the redesign canvas 2026-10-18): three tinted tiles side by side, the reasons two
   small boxes across; the tone names the job (ok Earn, warn Clear, bad Exit, info Hold) */
.tiles>.block:is(.ok,.warn,.info){flex:1 1 0;padding:var(--s3) var(--s4);border:2px solid;border-radius:var(--r-2)}
.tiles>.block.ok{background:var(--ok-soft);border-color:var(--ok)}
.tiles>.block.warn{background:var(--warn-soft);border-color:var(--warn)}
.tiles>.block.info{background:var(--field);border-color:var(--ink-2)}
.tiles>.block:is(.ok,.warn,.info) .boxes{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s2)}
.tiles .cards{display:flex;flex-wrap:wrap}  /* a group of cards in a tile (Inventory's bins): a bin of two cards is a small
   tile beside the next bin, a full bin takes the row and wraps its cards */
.tiles .cards>.card{flex:1 1 260px;max-width:420px;min-width:0}
.card .chip,.tbl td .pc-ids .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}  /* a long chip ("3-pack on Amazon: 0 full packs") never runs out of its card */
/* SMALL BOXES (.boxes > .box1): many small records of one kind (the owner's repricer questions) as small boxes three or four
   across instead of one tall list; one across on a phone. A .box1's first line is a .ln, .push sends a stamp right. */
.boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--s2)}
.box1{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s2) var(--s3);min-width:0;font-size:var(--fs-small)}
.box1 .ln{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.box1 .push{margin-left:auto}
.box1 .bar{margin:6px 0 0;flex-wrap:wrap}
.box1 .bar input[name=note]{flex:1 1 120px;width:auto;min-width:0}
/* THE CHANGE CHIP (_num.html chg): a value's change on the value's own line, small and coloured; its baseline ("vs
   28.4, the 7 days before") in the tooltip. .sub1 is the one small grey line under a number that never wraps. */
.dchip{display:inline-block;margin-left:6px;padding:0 5px;border-radius:var(--r-1);font:600 var(--fs-micro)/1.6 var(--mono);white-space:nowrap;vertical-align:1px;font-variant-numeric:tabular-nums;background:var(--field);color:var(--ink-3)}
.dchip.up{background:var(--ok-soft);color:var(--ok-ink)}
.dchip[title]{cursor:help}
.sub1{display:block;color:var(--ink-3);font-size:var(--fs-micro);white-space:nowrap}
.sub1[title]{cursor:help}

/* THE GRID (.tbl): the Orders page's sheet, owner-approved. 1 px lines on every cell, a grey header row, the small
   size in cells, numbers right-aligned in tabular figures, zebra and hover rows. Wrap it in .scroll (sideways on a
   phone) or .scroll.wide (the sheet: it scrolls inside the page both ways and its header sticks to its top). Under
   700 px a grid whose cells carry data-l="Label" becomes cards, a label above each value; `td.full` spans the
   card. */
.tbl{width:auto;max-width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border:1px solid var(--grid);font-size:var(--fs-small);table-layout:auto}
.tbl td{padding:6px 8px;border:0;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);vertical-align:top;text-align:left}
.tbl :where(td){background:var(--paper)}  /* opaque, so a frozen column never shows the cells sliding under it; zebra and hover below win */
.tbl th:last-child,.tbl td:last-child{border-right:0}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th{padding:6px 8px;border:0;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);text-align:left;font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:#E3E9EF;vertical-align:middle;position:sticky;top:var(--top-h);z-index:2}
.tbl thead th{border-bottom:2px solid var(--grid-head);font-size:calc(var(--fs-micro) + 1px)}  /* the owner, 2026-10-01: a heading reads as a heading at a glance: bold, a darker band, a firm rule under it */
.tbl td.num .sub{white-space:nowrap}  /* a number's small second line stays one line ("judged on $24.73", never
   one word a line when the grid is squeezed); a sentence under a number is .sub.para and wraps at a readable width */
.tbl td.num .sub.para{white-space:normal;max-width:32ch;margin-left:auto}
.tbl td .clip{max-width:22ch;overflow:hidden;text-overflow:ellipsis;margin-left:auto}  /* _num.html clip */
.tbl.full{width:100%}  /* the owner, 2026-10-02: a table is as wide as its content, never stretched across the screen
   with the space wasted in the middle; only a genuinely wide data grid (.full: Costs) or a fixed-layout table keeps
   the page's width, and there a number column takes only what its numbers need */
.tbl.full td.num,.tbl.full th.num{width:1%}
/* a page's main grid, the one with the product column, takes the page's width on a laptop (the owner, 2026-10-25: Orders
   stopped at 1,375 px of 2,000): its number columns take only what their numbers need, the product and the words cells
   take the room; a fold's table (inside a cell) and a tile's stay as wide as their content; a phone keeps its cards */
/* ONE RULE for a page's main table (the one with the product column; the owner, 2026-10-25 22:35: "all these tables are
   stretched"): as wide as its content, never wider than the page, centred under the page's head; the product column
   keeps the kit's cap; a fold's or a tile's table stays as it is */
.page .tbl:has(>tbody>tr>td.product):not(td .tbl,.tiles .tbl){width:auto;max-width:100%}
.tbl.fixed td.num,.tbl.fixed th.num{width:auto}  /* a fixed-layout table shares its width evenly (Lookup, the owner 2026-10-02) */
.tbl td.mono,.tbl td.age{font-size:var(--fs-micro)}
.tbl :where(tbody tr:nth-child(even) td){background:#F7F9FB}
.tbl :where(tbody tr:hover td){background:#EEF6F5}
/* an empty value is a quiet dash in the middle of its cell: an empty cell, or the formatters' muted "-" alone in it */
.tbl tbody td:empty::after{content:"-";display:block;text-align:center;color:var(--ink-3)}
.tbl td>.dash:only-child{display:block;text-align:center}
.tbl tr.bad td{background:var(--bad-soft)}
.tbl tr.warn td{background:var(--warn-soft)}
.tbl tr.done td,tr.done td{opacity:.55}
.tbl tr[onclick]{cursor:pointer}  /* a whole row that opens something (the row's own onclick, e.g. purchasing/suppliers.html) */
.tbl tr.group td{background:var(--ground)}  /* a group header row spanning the grid (FBM's order header row) */
.qty-big{font-size:var(--fs-section)}  /* one number that matters more than its row (FBM's ordered qty) */
.tbl tr.sum td{font-weight:700;border-top:2px solid var(--grid-head)}  /* a totals row at the foot of a grid (wave 2) */
/* the amber cell a person types (td.type), over a head line's ground too */
.tbl :is(tr,tr.group) td.type{background:var(--warn-soft);box-shadow:inset 0 0 0 1px var(--warn);cursor:text;text-align:center;vertical-align:middle}
.tbl td.type b{display:block;color:var(--warn-ink);font-size:var(--fs-small)}
.tbl a{text-decoration:none}
.tbl a:hover{text-decoration:underline}
/* the pieces of a cell: .sub a small second line; .stack lines split by a dashed rule; .ln a line of chips and
   words; .chips a wrapping row of chips; .ago the bold "3 hours ago" over its date */
.sub{display:block;color:var(--ink-3);font-size:var(--fs-micro);white-space:normal}  /* a small second line under a value */
.sub.m-loss{font-weight:600}
.btns{display:flex;gap:6px;justify-content:flex-end;align-items:center;white-space:nowrap}  /* the buttons of one row */
.btnrow{display:flex;gap:6px;flex-wrap:wrap}  /* a row of buttons that wraps, left-aligned (Find's scan result) */
.btns.stack{flex-direction:column;align-items:stretch;justify-content:flex-start}  /* a narrow cell's buttons, one above the next (wave 2) */
.tbl td .stack>*+*{margin-top:3px;padding-top:3px;border-top:1px dashed var(--line)}
.tbl td .stack>*{white-space:nowrap}
.tbl td .ln{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 3px}
.tbl td .ln:last-child{margin-bottom:0}
.tbl td .ln .age{color:var(--ink-2)}
.chips,.pc-ids{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tbl td.when{min-width:96px;white-space:nowrap}
.tbl td.when .ago{font-weight:600;display:block}
.tbl td.when .sub{margin-bottom:3px}
.tbl td.product{min-width:250px;max-width:440px}  /* the product cell keeps room for its name on two lines and its id chips on one, in a table as wide as its content (2026-10-03) */
.tbl td.wrap{max-width:320px;overflow-wrap:anywhere}  /* a long free-text value in a cell (History's Was/Became) */
.tbl td.words{min-width:24ch;max-width:40ch}  /* a sentence in a cell: wide enough that it never wraps a word to a line */
.tbl td:is([data-l="Date"],[data-l="Paid on"],[data-l="Since"],[data-l="Due"]){white-space:nowrap}  /* a date in a grid is one line ("2026-07-17", never "2026-" over "07-17") */
.tbl td .clamp1{display:block;max-width:72ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* a long secondary line cut to one line, the whole of it in the title (Jobs' descriptions) */
.tbl td .pc-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.tbl td .pc-t:has(>.pc-n){display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;overflow:visible}  /* the product cell's line: the name clamps alone, its chips keep their place beside or under it, never clipped (2026-10-23) */
.tbl td .pc-t:has(>.pc-n)>:not(.pc-n){flex:none}
.tbl td .pc-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-width:0}
.scroll{overflow:visible}  /* a plain grid: its header sticks under the top bar as the page scrolls */
.scroll.wide{overflow:auto;max-height:calc(100vh - 120px);border-radius:var(--r-2);contain:layout}  /* the sheet; contain:layout stops a wide table's intrinsic width from leaking past the scroll clip into the page itself on a phone, found live in the wave-2 overflow check */
.scroll.wide.short{max-height:320px}  /* a short grid inside a side column (the supplier's Documents) */
.scroll.wide .tbl th{top:0}
/* a wide grid scrolls sideways inside its box with its first column frozen, so the headers stay over their values
   and nothing is cut off */
.scroll.wide .tbl :is(thead th,tbody td):first-child{position:sticky;left:0;z-index:1}  /* its own cell line moves with it (border-collapse:separate): no shadow on top, or the line doubles */
.scroll.wide .tbl thead th:first-child{z-index:3}
.scroll.wide .tbl tbody td[colspan]:first-child{position:static;box-shadow:none}  /* a group row spanning the grid stays where it is */
.scroll.irr,.scroll.sess-lines{overflow-x:auto}  /* a wide worksheet keeps its own sideways scroll */
.scroll.irr th,.scroll.sess-lines th{position:static}
.tbl.fixed{width:100%;table-layout:fixed}  /* fixed column widths, for a table that truncates its text (wave 2) */
.ellip,.sbx .age{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* one line of text, cut short with an ellipsis (wave 2) */

/* THE PRODUCT CELL: hq/web/templates/_product.html `cell` / `product` is the only way a product is drawn. 64 px
   picture in every list, 120 px (`big`) as a record's own header; the name links to the product page; every id a
   chip that opens what it names. */
.pc{display:grid;grid-template-columns:var(--pic) minmax(0,1fr);gap:var(--s2);align-items:start;min-width:0;margin:0}
.pc.big{grid-template-columns:var(--pic-big) minmax(0,1fr);gap:var(--s4)}
.pc-img{width:var(--pic);height:var(--pic);flex:none;border-radius:var(--r-1);border:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;overflow:hidden;text-decoration:none}
.pc.big .pc-img{width:var(--pic-big);height:var(--pic-big);border-radius:var(--r-2)}
.pc-img img{width:100%;height:100%;object-fit:contain;display:block}
.pc-img.none{background:var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8C2CC' stroke-width='1.5' stroke-linejoin='round'><path d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z'/><path d='M4 7.5l8 4.5 8-4.5M12 12v9'/></svg>") center/22px no-repeat}
.pc.big .pc-img.none{background-size:48px}
.pc-body{min-width:0}
.pc:not(:has(>.pc-img)){grid-template-columns:minmax(0,1fr)}  /* pic=false: the name takes the cell, never the picture's 40 px track (Restock's sheet, 2026-11-07) */
.pc-t{font-weight:600;font-size:var(--fs-body);line-height:1.3;overflow-wrap:anywhere}
.pc-t a{color:var(--ink);text-decoration:none}
.pc-t a:hover,.sbtbl th a:hover,.sbtbl th.on a{color:var(--accent-ink);text-decoration:underline}
.pc.big .pc-t{font-size:var(--fs-section);font-weight:700}
.pc-sub{font-size:var(--fs-micro);color:var(--ink-2);margin-top:3px}
.pc-sub.mono,.pc-sub.mono a{color:var(--ink-3)}
.side-row .pc{margin:2px 0}

/* THE CHIPS: one family. Tones ok / warn / bad / info / muted (plain is muted); .id an identifier (mono, a link);
   .money an amount; .tag a name to tap. */
.chip{display:inline-block;vertical-align:middle;font-family:var(--mono);font-size:var(--fs-micro);line-height:1.5;padding:2px 8px;border-radius:var(--r-1);border:1px solid transparent;background:color-mix(in srgb,var(--line) 60%,var(--paper));color:var(--ink-2);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok-ink)}
.chip.warn{background:var(--warn-soft);color:var(--warn-ink)}
.chip.bad,.dchip.down{background:var(--bad-soft);color:var(--bad-ink)}
.chip.info{background:var(--accent-soft);color:var(--accent-ink)}
.chip.box{background:var(--box-soft);color:var(--box-ink)}  /* Lookup's chart legend: the Buy Box line */
label.chip{cursor:pointer}  /* a chip that wraps a checkbox/radio (wave 2) */
.chip.muted{background:var(--ground);color:var(--ink-3)}
.chip.id{background:var(--paper);border-color:var(--line);color:var(--ink);padding:1px 7px;letter-spacing:.01em}
.chip.id a{color:var(--accent-ink);text-decoration:none}
.chip.id a:hover{text-decoration:underline}
.chip.id .k{color:var(--ink-3);margin-right:4px;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase}
.chip.money{background:var(--paper);border-color:var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
button.chip{cursor:pointer}  /* a chip that is a button (the @mention names under a conversation, _talk.html) */
button.chip:hover{color:var(--accent-ink)}
a.chip{text-decoration:none;color:var(--ink)}
a.chip:hover{border-color:var(--line-2)}
.btnrow>label.chip{flex:1;text-align:center}  /* radios in a run share the row (a lot's "prep for", its labels) */
.mini>label.chip{display:block;margin:0 0 4px}  /* a radio chip per line (a lot's Resolution) */
.estflag{font-size:var(--fs-micro);text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-left:3px;cursor:help}  /* an estimated number; the reason in its title */
/* a margin number's own colour: loss / thin / good, the same tokens as the chips */
.m-loss{color:var(--bad-ink);font-weight:700}
.m-good{color:var(--ok-ink);font-weight:600}
.flagline{color:var(--bad);font-weight:600}
.flagline.sm{font-size:var(--fs-small);font-weight:500;margin-top:2px}
.flagline.ok{color:var(--ok);font-size:var(--fs-small);font-weight:400}  /* the check that passed, the same line */

/* THE BUTTONS: primary (filled), plain (.btn, bordered), danger, small (.sm); ghost is a plain button without its
   border (a quiet "Clear" beside a search). */
.btn{text-decoration:none;display:inline-block;font-family:var(--body);font-size:var(--fs-small);font-weight:600;line-height:1.35;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);padding:7px 14px;border-radius:var(--r-2);cursor:pointer;box-shadow:0 1px 1px rgba(20,30,40,.04);transition:background .12s,border-color .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{border-color:var(--ink-3);background:#FBFCFD}
.btn:active{box-shadow:none;transform:translateY(.5px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.danger{background:var(--paper);border-color:var(--bad);color:var(--bad-ink)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--accent-ink)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.said{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}  /* a copy button, after it has been pressed (wave 2) */
.btn.sm{padding:5px 10px}
.btn.wrap{white-space:normal;text-align:left}  /* a button whose label is a full sentence (Prep's "Packing: ..." links): never forces the page wider on a phone */
.btn[disabled],.btn:disabled,.btn.off{opacity:.5;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary:focus-visible{box-shadow:0 0 0 3px rgba(15,110,107,.35)}
form.inline{display:inline}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.acts details{position:relative}
.acts summary{list-style:none;display:inline-block}
.acts summary::-webkit-details-marker{display:none}
.mini{position:absolute;z-index:4;top:36px;left:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-2);padding:var(--s3) var(--s4);min-width:240px}
.mini label{margin:6px 0 2px}
.mini button{margin-top:8px}
.mini.right{right:0;left:auto;min-width:300px}  /* a popup near the end of a .bar opens toward the left */

/* THE FORMS: a field reads like text on a soft ground; hover shows its edge; focus lifts it with a ring */
label{display:block;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);margin:12px 0 4px}
input:not([type]),input[type=text],input[type=email],input[type=password],select{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--field);border:1px solid transparent;border-bottom-color:var(--line-2);border-radius:var(--r-2) var(--r-2) 2px 2px;padding:8px 10px;box-sizing:border-box;transition:background .12s,border-color .12s,box-shadow .12s;width:100%}
input[type=search],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=file],textarea{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--field);border:1px solid transparent;border-bottom-color:var(--line-2);border-radius:var(--r-2) var(--r-2) 2px 2px;padding:8px 10px;box-sizing:border-box;transition:background .12s,border-color .12s,box-shadow .12s}
input:not([type]):hover,input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,input[type=search]:hover,input[type=number]:hover,input[type=date]:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{background:var(--paper);border-color:var(--accent);border-radius:var(--r-2);box-shadow:var(--ring);outline:none}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
td input:not([type]){padding:5px 8px;font-size:var(--fs-small);width:auto}
td input[type=number],td input[type=date],td select{padding:5px 8px;font-size:var(--fs-small)}
.bar input:not([type]){width:auto;min-height:40px;box-sizing:border-box}
.inline input:not([type]){width:auto}
.check{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:var(--fs-small);font-weight:500;color:var(--ink-2)}  /* a checkbox and its words */
.custom-dims{gap:4px;display:none}
.custom-dims.show{display:inline-flex}
.fld{margin:10px 0}
.fld label{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:3px}
.numfield{width:110px;min-height:40px}  /* a real number field in a grid row (a physical count), touch-sized, not the autosave input.cell */
/* the autosave cell: a number or a word typed straight into the grid; text until touched, saved on change
   (tr.hl the row a link pointed at) */
input.cell{font:inherit;font-family:var(--mono);font-size:var(--fs-small);padding:3px 6px;border:1px solid var(--grid);border-radius:var(--r-1);background:var(--field);color:var(--ink);min-height:0;width:112px;box-sizing:border-box}  /* a cell a person types is boxed, never mistaken for a shown number */
input.cell.n{width:78px;text-align:right}
input.cell.w{width:160px}
input.cell:hover{border-color:var(--grid-head);background:var(--paper)}
input.cell:focus{border-color:var(--accent);background:var(--paper);outline:none;box-shadow:0 0 0 2px var(--accent-soft)}
tr.hl td{background:var(--accent-soft)!important;box-shadow:inset 3px 0 0 var(--accent)}

/* the filter pills (Orders' "Today / Last 7 days / Last 30 days"): a row of choices, one on */
.filter{display:inline-flex;flex-wrap:wrap;gap:6px}
.filter :is(a,button){font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2);text-decoration:none;font-size:var(--fs-small);font-weight:600}
.filter :is(a,button):hover{border-color:var(--accent)}
.filter :is(a,button).on{background:var(--accent);border-color:var(--accent);color:#fff}
.filter :is(a,button) b{font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);color:var(--ink-3);background:var(--ground);padding:0 6px;border-radius:var(--r-pill)}
.filter :is(a,button).on b{background:rgba(255,255,255,.22);color:#fff}
.filter a.bad.on{background:var(--bad);border-color:var(--bad)}  /* an urgent filter, active wave 2 */
.filter .sep{width:1px;height:22px;background:var(--line);margin:0 4px}  /* a divider between two groups of pills, wave 2 */
.filter form{display:contents}  /* a filtering select on the row sits among the pills */
.filter select{font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);width:auto;padding:4px 28px 4px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper)}
/* the bar: a search box, filters and buttons on one line above a list */
.bar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:0 0 var(--s3)}
.bar.end{justify-content:flex-end;align-items:flex-end}  /* a bar of labelled fields, aligned to the fields' own bottom edge (wave 2) */
.bar select{width:auto;padding:7px 28px 7px 10px;min-height:40px;box-sizing:border-box}
.bar input[name=q]{flex:1 1 260px;min-width:200px}
.bar input[type=text]{min-height:40px;box-sizing:border-box}
.bar .btn{min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 14px;font-size:var(--fs-small)}
.bar .btn.sm{min-height:0;padding:5px 10px}
.bar .hint{color:var(--ink-3)}
.bar.sp{justify-content:space-between}  /* a bar whose ends spread apart (wave 2) */
.grow{flex:1 1 220px}  /* a field that takes the rest of its row, never under 220px (wave 2) */
.scroll+.bar{margin:var(--s3) 0 0}  /* the pager under a grid */
.tbl td .bar{margin:0}  /* a form inside a row */
.fresh{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 var(--s3);font-size:var(--fs-small);color:var(--ink-2)}  /* "as of" stamps */
.fresh .stale,.m-thin{color:var(--warn-ink);font-weight:600}
.active-filters{background:var(--accent-soft);padding:6px 10px;border-radius:4px}

/* panels, two columns, key-value lists, groups */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:var(--s4) var(--s5)}
.panel.row{margin:0 0 var(--s3)}  /* a panel used as one row in a stacked list, like the day's per-person report (wave 2) */
.list{margin:0;padding-left:18px}  /* a plain bulleted list inside a panel or cell (wave 2) */
.list li{margin:3px 0}
.quote{white-space:pre-wrap;border-left:3px solid var(--line);padding-left:10px;margin-top:var(--s2)}  /* a free-text note quoted back, like a clock-out line (wave 2) */
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s5)}
.two>:only-child{grid-column:1/-1}  /* a side column with nothing in it never leaves its 40% empty (Restock with no supplier card; the owner, 2026-10-25) */
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:var(--fs-small);align-content:start}
.kv div:nth-child(odd){color:var(--ink-3);font-family:var(--mono);font-size:var(--fs-micro);padding-top:2px}
.grp{margin:0 0 var(--s5)}
.grp h3{font-size:var(--fs-body);margin:0 0 var(--s2);color:var(--ink-2);display:flex;justify-content:space-between;align-items:baseline}
.grp h3 span{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);font-weight:400}
/* cards: a product or a record as a tile (picture + words) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s3)}
.cards.wide{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
/* a chain: the order a rule checks things, boxes with arrows that wrap on a phone (Listings > How it prices) */
.card{max-width:420px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:var(--s3);display:grid;grid-template-columns:var(--pic) 1fr;gap:var(--s3);color:var(--ink);text-decoration:none;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.card.plain{grid-template-columns:1fr;cursor:default}  /* a card with no picture (Supplies) */
.card.k-out{border-left:4px solid var(--bad)}
.card.k-low{border-left:4px solid var(--warn)}
.card.k-ordered{border-left:4px solid var(--accent)}
.card.k-ok{border-left:4px solid var(--ok)}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.card .t{font-weight:600;font-size:var(--fs-body);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .t a{color:var(--ink);text-decoration:none}
.card .t a:hover{text-decoration:underline}
.card .m{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-2);margin-top:3px;display:flex;gap:var(--s1) var(--s2);flex-wrap:wrap;align-items:center}
.card .m b{color:var(--ink)}
/* a picture box outside the product cell (a lot's photos) */
.img{width:var(--pic);height:var(--pic);background:var(--field);border:1px solid var(--line);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);text-align:center;overflow:hidden}
.img img{width:100%;height:100%;object-fit:contain}
.img.dashed{border-style:dashed}
.imgs{display:grid;grid-template-columns:var(--pic) var(--pic) 1fr;gap:12px;align-items:start}
.imgs .age{text-align:center;margin-top:3px}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:var(--pic);height:var(--pic);object-fit:cover;border:1px solid var(--line);border-radius:var(--r-1)}

/* Files (files/*.html, _file.html): HQ's own Drive. Folder tiles, the picture grid (a file is never a product, so it is
   drawn by _file.html, not the product cell), the viewer, the drop zone, and the shared sign-in's "who is working" row */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center;margin:var(--s2) 0;font-size:var(--fs-body)}
.crumbs span{color:var(--ink-3)}
.folder{display:flex;flex-direction:column;gap:2px;padding:var(--s3);background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-2);color:var(--ink);text-decoration:none}
.folder:hover{border-color:var(--accent)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3);margin-top:var(--s2)}
.ftile{display:flex;flex-direction:column;gap:2px;min-width:0}
.ftile.trashed{opacity:.7}
.ftile .fname{font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ftile .src{align-self:flex-start}
.fpic{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;width:100%;background:var(--field);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;text-decoration:none;color:var(--ink-3);font:600 var(--fs-small) var(--mono)}
.fpic img{width:100%;height:100%;object-fit:cover}
.fpics{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s1)}
.fpics .fpic{width:var(--pic);height:var(--pic)}
.fview{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:var(--s4);align-items:start}
.fbig{display:block;text-align:center;background:var(--field);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s2)}
.fbig img{max-width:100%;max-height:75vh;object-fit:contain}
.fbig.doc{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s5)}
.fbig.doc .fpic{width:120px}
.fpdf{display:block;width:100%;height:78vh;border:1px solid var(--line);border-radius:var(--r-2);background:var(--field)}
.flinks{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;min-width:0}
.flink{display:inline-flex;align-items:center;gap:2px;min-width:0;max-width:100%}
.flink .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flink .chip .k{font-weight:600;margin-right:4px;color:var(--ink-3)}
.flink .fon{text-decoration:none;color:var(--ink-3);padding:0 4px}
.flinks .pc{flex:1 1 100%}
.fhome{font-size:var(--fs-small)}
.fpic.more{font-size:var(--fs-body)}
.fnav{justify-content:space-between;align-items:center;margin-top:var(--s2)}
.fdrop{border-style:dashed}
.fdrop.over{border-color:var(--accent);background:var(--field)}
.fpick label.btn{cursor:pointer}
.who-working{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:var(--s2) 16px;background:var(--field);border-bottom:1px solid var(--line)}
.who-working span{font-weight:600}
.alback{display:block;padding:18px 16px;background:var(--accent);color:#fff;font-size:var(--fs-title);font-weight:700;text-align:center;text-decoration:none}
.who-names .btn{font-size:var(--fs-section);padding:var(--s3) var(--s4)}
@media (max-width:700px){.fview{grid-template-columns:1fr}.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chartbox{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:var(--s4) var(--s5)}
.chartbox:hover{border-color:var(--accent)}
.chartbox h3{font-size:var(--fs-body);margin:0 0 var(--s2);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:10px;margin-top:14px}  /* chart cards side by side (Money > Cash, the pallet sheet); Home's own grid is .charts.home */
.charts>.chartbox.week,.charts>#stock-week{grid-column:1/-1}
.chart{width:100%;height:auto;max-height:190px;display:block}
.chart .cv{font:600 var(--fs-micro) var(--mono);fill:var(--ink-2)}

.po-email{width:100%;max-width:72ch;font-family:var(--mono);font-size:var(--fs-small);margin:6px 0}
.chip.shadow{background:transparent;border:1px dashed var(--ink-3);color:var(--ink-3)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;font-size:var(--fs-body);max-width:92vw;z-index:50;display:none}
.keys{color:var(--ink-3);font-size:var(--fs-micro)}
/* 6. shared widgets */

/* sortable headers (static/hq.js th.sortable) and the typed cell's refusal (static/cells.js); the editable grid's own
   rules (.eg) went with the COGS ledger on 2026-10-24: the COGS tabs are the kit's .tbl inside .scroll.wide.lrow */
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th .arrow{font-size:var(--fs-micro);margin-left:3px}
.tbl th a:has(.arrows){color:inherit;text-decoration:none}  /* THE sortable head (_sort.html head): one link, the address the state */
.tbl th a:has(.arrows):hover{color:var(--accent-ink)}
.tbl th .arrows{display:inline-flex;flex-direction:column;justify-content:center;margin-left:4px;vertical-align:middle;line-height:.8;letter-spacing:0;color:var(--ink-3)}  /* not in force: a muted up over a down */
.tbl th .arrows .arrow{margin:0;font-size:.7em}
.tbl th.on .arrows{color:var(--ink)}.tbl th.on .arrows .arrow{font-size:1.1em}  /* in force: its one arrow, ink */
.tbl th a:hover .arrows{color:var(--ink)}
input.cell.invalid{border-color:var(--bad);background:var(--bad-soft)}  /* a typed cell the server refused (static/cells.js) */

/* THE one margin scale (the UI survey 2026-10-13, U20), on the token steps: .m0, .m2, .mt0-.mt5, .mb2-.mb3 (the
   old -xs/-sm/-md/-6 names and the bare .mt/.mb were folded onto it, K2). It sits after the components so a margin
   asked for on a .bar, .head or .block wins; never a one-off inline margin (skill hq-ui "The kit"). */
.m0{margin:0}.m2{margin:var(--s2) 0}
.mt0{margin-top:0}.mt1{margin-top:var(--s1)}.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}
.mb2,.mmsg{margin-bottom:var(--s2)}.mb3{margin-bottom:var(--s3)}
/* small helpers a converted page reaches for instead of an inline style (kit wave 2): named for what each does */
.panel.tight{padding:8px 12px}
.fs-body{font-size:var(--fs-body)}
.stats.acct{margin:6px 0 12px}  /* the account-health tile row: tighter than the kit's default .stats gap */
.stats.tight{margin:0 0 12px}
.wrap,.wbtns{flex-wrap:wrap}  /* a .bar or other flex row that needs to wrap on a narrow screen */
.ink-2{color:var(--ink-2)}
.lbl-sm{font-size:12px;color:var(--ink-3)}  /* an inline label beside a rule's own number input */
.rule-num{width:90px;font:inherit;padding:4px 6px;border:1px solid var(--line);border-radius:4px}
.flex1{flex:1}
.bar.in-cell{margin:0;flex-wrap:nowrap}  /* a .bar inside a table cell: no outer margin, never wraps the row */
[data-band] .bar.in-cell{flex-wrap:wrap;row-gap:4px}  /* the band cell (rows/_band_cell.html): the hand band chip, saved and Save anyway wrap under the two boxes, never over the next column */
.ml-xs{margin-left:6px}
.h3-panel{margin:14px 0 6px;font-size:var(--fs-body)}  /* a second heading inside a .panel, below its .kv */
/* the record page's "act" blocks (repricer/_walmart.html and alike): a divider above each action, the first one plain */
.act{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.act.first{border-top:0;margin-top:0;padding-top:0}
.act h3{margin:0 0 6px;font-size:var(--fs-body)}
.act input[type=text],.act input[type=number]{border:1px solid var(--line);border-radius:4px;background:var(--ground);padding:6px 8px;min-height:34px;width:auto}
.ev{font-size:var(--fs-small)}
.ev .w{color:var(--ink-3);font-family:var(--mono);font-size:var(--fs-micro)}
.tbl.mid td{vertical-align:middle}
.sku{font-family:var(--mono);font-weight:700;font-size:var(--fs-small)}  /* a SKU shown as a link: the same small mono look everywhere */
.why{max-width:44ch;color:var(--ink-2)}
.float-r{float:right}
/* the stacked meter bar (the pallet bars on Packing): a budget line, its segments by state */
.budget{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 4px}
.meter{flex:1;min-width:220px;height:14px;border:1px solid var(--line);border-radius:7px;background:var(--ground);overflow:hidden;display:flex}
.meter i{display:block;height:100%}
.meter.sm{flex:none;display:inline-flex;vertical-align:middle;min-width:0;width:40px;height:6px;border:0;border-radius:3px;background:var(--line)}  /* a share in a line of words: the Buy Box held (Inventory's Selling lines) */
.meter.sm i{background:currentColor;border-radius:3px}
.m-sell{background:var(--ok)}
.m-fix{background:var(--warn)}
.m-del{background:var(--bad)}
.stat .v.v-sm{font-size:1rem}  /* a stat tile showing a word, not a number (the repricer listing's Job/Action tiles) */
.kv.wide{grid-template-columns:150px 1fr}

/* forms laid out in a grid (edit forms, delivery forms, the people form) */
.editbox[open]{width:100%;order:9}
.editbox summary{list-style:none;display:inline-block}
.editbox summary::-webkit-details-marker{display:none}
.editform{background:var(--paper);border:1px solid var(--accent);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:14px;margin-top:8px}
.egrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px}
.egrid label{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.egrid label input,.egrid label select,.egrid label textarea{display:block;width:100%;margin-top:3px;font-weight:400}
.egrid-wide{grid-column:1/-1}
.egrid .hint.mono{overflow-wrap:anywhere}  /* a long setting key breaks inside its column, never past the page (Rules, UI audit 2026-10-11) */
.egrid .lbl{font-size:var(--fs-small);font-weight:600;display:block;margin-bottom:4px}
.egrid label.inl{display:inline-block;font-weight:400;margin-right:12px}
.egrid label.inl input{display:inline;width:auto;margin:0 4px 0 0}
label.inl{display:inline-block;font-weight:400;margin-right:10px}  /* a checkbox and its word, one of a run (Inventory's "May sell on") */
.po-actions{justify-content:flex-end;margin-top:-8px}  /* the PO page's own Cancel/Delete row, pulled up under the h1 */
.padd{display:grid;grid-template-columns:minmax(160px,1fr) minmax(220px,1.4fr) 170px auto;gap:10px;align-items:end;margin:0 0 6px}
.padd label{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.padd label input,.padd label select{display:block;width:100%;margin-top:3px;font-weight:400;min-height:40px}
.padd .btn{min-height:40px}  /* a submit button lined up with the row's fields (wave 2) */
.people td{vertical-align:middle}
.people .pwho span{display:block;font-family:var(--mono);font-size:var(--fs-small);color:var(--ink-2)}
.people select{width:150px;min-height:36px}
.people .nw,.people th{white-space:nowrap}

/* conversations */
.msg{border-left:3px solid var(--accent);padding:6px 10px;margin:8px 0;background:var(--ground)}
.msg.done{border-left-color:var(--line);opacity:.75}
.msg .w,.tmsg .w{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-2)}
.msg .b{margin-top:2px;white-space:pre-wrap}
.talk .thread{border:1px solid var(--line);border-radius:var(--r-3);padding:4px 10px 10px;margin:0 0 12px;background:var(--paper)}
.talk .thread.done{opacity:.7}
.talk .thread .msg{margin:6px 0}
.talk .msg.reply{margin-left:14px;border-left-color:var(--line)}
.talk .msg:target{outline:2px solid var(--accent);outline-offset:2px}
.compose{display:flex;gap:8px;margin-top:10px;align-items:flex-end;flex-wrap:wrap}
.compose input,.replybox{flex:1;min-width:0}
.compose textarea{flex:1;min-width:0;width:100%;resize:vertical;min-height:36px;line-height:1.4}
.compose.new{display:block}
.compose.new .row{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:6px;flex-wrap:wrap}
.tagrow{display:flex;gap:4px;flex-wrap:wrap}
.acts-row{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.replybox>summary{display:inline-block;list-style:none;cursor:pointer}
.replybox>summary::-webkit-details-marker{display:none}
.replybox[open]>summary{display:none}
/* mail thread messages (mail/thread.html): one panel per message, ours told apart by its rule */
.mmsg.ours{border-left:4px solid var(--accent);padding-left:10px}
.mmsg-body{white-space:pre-wrap;font-size:var(--fs-body)}

/* the guide's flow and steps list */
.steps{list-style:none;padding:0;margin:0}
.steps li{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.steps .tick{font-family:var(--display);font-weight:800;color:var(--ink-3);text-align:center}
.steps li.done .tick{color:var(--ok)}
.steps li.done b{text-decoration:line-through;color:var(--ink-3)}
.steps li span.hint{display:block}
.trail{margin:0 0 14px}
.trail summary a{color:var(--accent)}

/* the claims explainer, moved out of its own <style> block, wave 2 */
.how ol.steps{list-style:none;margin:0;padding:0;counter-reset:st;max-width:78ch}
.how ol.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line);counter-increment:st}
.how ol.steps li:first-child{border-top:0}
.how ol.steps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-small)}
.how ol.steps b,.people .pwho b{display:block;font-size:var(--fs-body)}
.how ol.steps p{margin:4px 0 0;color:var(--ink-2);font-size:var(--fs-small);line-height:1.5}
.how kbd{font:600 var(--fs-small) var(--body);padding:1px 7px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--paper)}
.how .when{max-width:78ch}
.how .when h2{font-size:var(--fs-body);margin:var(--s4) 0 var(--s2)}
.how .when p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.5;margin:0 0 6px}

/* the detectors table (cases/detectors.html), moved out of its own <style> block, wave 2 */
.det td.state form{display:inline-block;margin:4px 4px 0 0}
.det td.state .btn.sm{padding:3px 8px;font-size:var(--fs-micro)}
.det td.who b{display:block}
@media (max-width:800px){.det .tbl{min-width:1100px}}
.cases .what{max-width:34ch;color:var(--ink-2)}
@media (max-width:640px){.cases .what{max-width:none}}
.cases .pc{min-width:240px}
.cases .recovery{margin:0 0 var(--s4)}
.cases .recovery h2{font-size:var(--fs-body);margin:0 0 var(--s2)}
.cases .recovery .stats{margin:0}
@media (max-width:800px){.closed .tbl{min-width:720px}}  /* the month-by-month table, wave 2 */
@media (max-width:800px){.fees .tbl{min-width:980px}}  /* cases/_fee_audit.html's audit table, wave 2 */

/* the case page (cases/case.html), moved out of its own <style> block, wave 2 */
.case .two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:start}
@media (max-width:900px){.case .two{grid-template-columns:minmax(0,1fr)}}
.case .facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:var(--fs-small);color:var(--ink-2)}
.case .facts b{color:var(--ink)}
.case .kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:var(--fs-body)}
.case .kv .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.case h3{margin:0 0 var(--s2);font-size:var(--fs-body)}
.case .panel h3 + .hint{margin:-4px 0 8px}
.case .where{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 var(--s3)}
.case .where .path{font-size:var(--fs-small);color:var(--ink-2)}
.case ol.fileit{list-style:none;margin:0;padding:0;counter-reset:st}
.case .fs{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.case .fs:first-child{border-top:0}
.case .fs .tick{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-2);background:var(--paper);counter-increment:st}
.case .fs .tick::before{content:counter(st)}
.case .fs.done .tick::before{content:"✓"}
.case .fs.done .fs-text{color:var(--ink-3)}
.case .fs-text{font-size:var(--fs-body);line-height:1.45}
.case .fs-paste{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}
.case .fs-paste .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.case .fs-paste code.val{font-family:var(--mono);font-size:var(--fs-small);background:var(--field);border:1px solid var(--line);border-radius:var(--r-1);padding:3px 8px;max-width:100%;overflow-wrap:anywhere}
.case textarea.draft{width:100%;font:inherit;font-size:var(--fs-small);line-height:1.45;padding:10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--field);color:var(--ink);resize:vertical;min-height:110px;margin-top:6px}
.case .btn[data-copy]{min-width:78px}
.case .fields{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);align-items:center}
.case .fields .chip{white-space:normal;overflow-wrap:anywhere}
.case .fields .lbl{font-size:var(--fs-small);color:var(--ink-2);margin-right:4px}
.case .act{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.case .act input[type=text]{width:auto;min-width:200px}
.case .act select{width:auto;min-width:0}
.case pre.note{white-space:pre-wrap;font:inherit;font-size:var(--fs-small);margin:0;color:var(--ink-2)}
.case .nofile{background:var(--warn-soft);border-left:4px solid var(--warn);padding:10px 14px;border-radius:var(--r-2)}
.case .also{font-size:var(--fs-small);color:var(--ink-2);margin-top:var(--s3)}
.case .ladder{display:flex;flex-wrap:wrap;gap:4px 2px;align-items:center;margin:0 0 var(--s3)}
.case .ladder .stage{font-size:var(--fs-small);padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-3);background:var(--paper)}
.case .ladder .stage.past{color:var(--ink-2);background:var(--ground)}
.case .ladder .ar{color:var(--ink-3);font-size:var(--fs-small)}
.case .rec-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 var(--s2)}
.case .msg{border-top:1px solid var(--line);padding:8px 0}
.case .msg pre{white-space:pre-wrap;font:inherit;font-size:var(--fs-small);margin:4px 0 0;max-height:280px;overflow:auto;color:var(--ink-2)}
.case .tbl tr.this td{font-weight:700}
@media (max-width:640px){.case .kv{grid-template-columns:1fr}.case .kv .k{padding-top:6px}.case .act input[type=text]{width:100%;min-width:0}}

/* the Money pages (money/*.html), moved out of their own <style> blocks, wave 2: each page's block is one line here,
   with a comment naming the page; rules the kit already covers (the .tbl defaults, .neg) are dropped rather than
   carried over */
.as .rowform input[name=note]{width:26ch;font-size:var(--fs-small)}  /* money/assets.html */
.as .rowform select{font-size:var(--fs-small)}
.ye .ok{color:var(--ok-ink);font-weight:700}  /* money/yearend.html */
.ye .todo{color:var(--warn-ink);font-weight:700}
.ye .note{color:var(--ink-2)}
.srt .rowform select,.srt .rowform input{font-size:var(--fs-small)}  /* money/sort.html */
.srt .rowform input[name=note]{width:22ch}
.srt .desc{max-width:44ch}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s4)}  /* a responsive 2-up layout, used by money/books.html and money/cards.html, wave 2 */
.auto-grid>*{min-width:0}  /* a grid item's default min-width:auto otherwise keeps the track as wide as a bare table inside it, found live in the wave-2 overflow check */
.bk .note{color:var(--ink-2)}
.bk .q{border-left:3px solid var(--warn-ink);padding:6px 10px;margin:6px 0;background:var(--panel)}
.bk textarea{width:100%;max-width:700px;min-height:60px}
.cardbook .cardpanel h3{margin:0 0 2px}  /* money/cards.html */
.cardbook .row2{display:flex;gap:28px;margin:6px 0 10px;flex-wrap:wrap}
.cardbook .big{font-size:22px;font-weight:700;line-height:1.2}
.full-line{flex-basis:100%}  /* a .bar child that takes the rest of the line to itself (wave 2) */
.tbl tr.partial td{color:var(--ink-2)}  /* a row for a month or a charge that is not finished yet, told apart by its colour (wave 2) */
.cash .grp td:first-child a{color:inherit}  /* money/cash.html */
.cash .rowform select{width:230px;max-width:230px}
.cash .rowform input.m{width:44px}
.cash .rowform input.n{width:140px}
.cash .desc{max-width:44ch}
.mn .hint{max-width:90ch}  /* money/index.html's basis paragraphs, moved onto the kit's own .hint (the page wrapper is
   .mn, not .money: that name collides with the kit's own .money amount class, found live during the wave-2 overflow
   check — .money{white-space:nowrap} was inherited by the whole page and forced its long hint paragraphs onto one
   line, a pre-existing bug the class rename fixes) */
.mn .score{font-weight:700;font-size:16px}  /* money/index.html, the scores */
.pre-line{white-space:pre-line}  /* an address or block of text whose newlines matter, but that still wraps (wave 2) */
.per .task h3{margin:0 0 4px}  /* personal/tasks.html */
.per .task .meta{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:6px}
.per .thread{border-left:3px solid var(--line);padding-left:10px;margin:8px 0}
.per .thread .n{font-size:var(--fs-small);margin:4px 0}
.per .thread .n .who{color:var(--ink-2);font-size:var(--fs-micro)}
.per form.inline{display:inline-flex;gap:6px;align-items:center;margin:4px 8px 4px 0;flex-wrap:wrap}
.per textarea{width:100%;max-width:700px;min-height:56px}
.per .pie-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:8px 0 6px}  /* personal/taxes.html's passive-loss pool */
.per .pie{width:170px;height:170px;border-radius:50%;position:relative;flex:none}  /* the background (a conic-gradient computed from the pool's own slices) is the one inline style this chart needs */
.per .pie-hole{position:absolute;inset:34px;border-radius:50%;background:var(--panel, #fff);display:flex;flex-direction:column;align-items:center;justify-content:center}
.per .pie-hole b{font-size:var(--fs-section)}
.per .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}  /* the swatch's own background is the pool slice's colour, the one inline style it needs */
.tax .note{color:var(--ink-2);max-width:100ch}  /* money/taxes.html */
.tax .lede{max-width:110ch}
.tax .open .tbl{max-width:1200px}
.tax .open th:nth-child(1),.tax .open td:nth-child(1){width:24ch}
.tax .open th:nth-child(2),.tax .open td:nth-child(2){width:14ch;white-space:normal}
.tax .open th:nth-child(3),.tax .open td:nth-child(3){width:30%}

/* the IRR worksheet and the receiving lines */
.irr .prod{min-width:200px;max-width:320px}
.irr input.n{width:56px;text-align:right;padding:4px 6px}
.irr .split{white-space:nowrap}
.irr input.d{width:130px;padding:4px 6px}
.irr select.s{width:auto;padding:4px 6px}
.irr input.c{width:100%;margin-top:4px;padding:4px 6px}
.irr td.thread{min-width:260px;max-width:340px}
.irr tr.st-short td{background:color-mix(in srgb,var(--bad-soft) 45%,var(--paper))}
.irr tr.st-complete td:first-child{box-shadow:inset 3px 0 var(--ok)}
.irr tr.st-pending td:first-child{box-shadow:inset 3px 0 var(--line)}
.grp:not(:has(input.more-cols:checked)) .irr .mc{display:none}  /* the PO grid's "More columns" (warehouse/po_view.MORE), folded until ticked */
.more-cols-toggle{margin:0 0 var(--s2)}
.addline-find{min-width:280px}.addline-name{min-width:200px}.addline-id{width:110px}.addline-n{width:80px}  /* the PO page's Add line row */
@media (max-width:700px){.addline-find,.addline-name{min-width:0;width:100%}}
.tmsg{font-size:var(--fs-small);line-height:1.35;margin-bottom:3px;white-space:pre-wrap}
.tmsg.done{opacity:.6}
.addline td{background:var(--ground)}
.lines td{vertical-align:top}
.lines select{width:auto;display:block;margin-top:3px}
.came{display:flex;gap:3px;margin-top:4px}
.came input.n{width:58px}
.pick{position:relative}
.hits{position:absolute;z-index:6;top:36px;left:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-2);min-width:360px;max-height:280px;overflow:auto}
.hits:empty{display:none}
.hitlist{list-style:none;margin:0;padding:4px}
.hitlist a{display:grid;grid-template-columns:var(--pic) 1fr auto;gap:8px;align-items:center;padding:6px 8px;color:var(--ink);text-decoration:none;border-radius:var(--r-2)}
.hitlist a:hover{background:var(--accent-soft)}
.hits .hint{display:block;padding:6px 10px}
.newpo{position:relative}
.newpo summary{list-style:none}
.newpo summary::-webkit-details-marker{display:none}
.scanbar{display:flex;gap:8px;align-items:center;background:var(--paper);border:2px solid var(--accent);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:10px 12px;margin:0 0 16px}
.scanbar input.scan{flex:1;font-size:var(--fs-section);font-family:var(--mono);padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2)}
.scanbar input.n{width:64px;text-align:right}
.sess-lines tr.unexpected td{background:color-mix(in srgb,var(--warn-soft) 50%,var(--paper))}
.sess-lines td.prod{min-width:260px}
.sess-lines td.prod .pc-body{min-width:180px}
.sess-lines td.prod .pc-t{white-space:normal;overflow-wrap:normal;word-break:normal;display:block}
.sess-lines td.prod .pc-n{display:inline}
.sess .btn{white-space:nowrap}
.sess{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.closebox{margin-top:12px;border-color:var(--accent)}
.dgrp{display:flex;gap:4px;align-items:center;margin-top:3px}
.dgrp input{width:58px;text-align:right;padding:4px 6px}
.dgrp select{width:auto;max-width:120px;padding:4px 6px;margin:0;display:inline-block}
.lines .dgrp select{display:inline-block;margin-top:0}
details.dmore summary{font-size:var(--fs-micro);color:var(--ink-3);cursor:pointer;margin-top:3px;list-style:none}
details.dmore summary::-webkit-details-marker{display:none}
td.disc .age{display:block;margin-top:3px}
.aside-form{margin-top:6px;gap:4px}  /* the receipt's / staging's "Set aside for supplier" form inside its cell */
.found-form{margin-top:6px;display:flex;gap:4px;justify-content:flex-end;align-items:center}  /* Staging's "found" qty box */
.found-form input{width:64px;padding:4px 6px}
.inl{display:inline-block}
details.inline{display:inline-block;vertical-align:middle}  /* a details toggle sitting beside other buttons on one line */
details.prints{position:relative;vertical-align:middle}details.prints>summary{list-style:none}details.prints>summary::-webkit-details-marker{display:none}  /* a Print labels button and its popup (warehouse/_labels.html) */
.notop{padding-top:0;border-top:0}  /* a table row that continues the one above it (Staging's action row) */
.bar.m0{margin:0}
.notes-list{margin:6px 0 0;padding-left:18px}  /* a plain bulleted list inside a panel ("How to read it") */
.doc-thumb{width:36px;height:36px;object-fit:cover;vertical-align:middle;border:1px solid var(--line);border-radius:4px}  /* a document's own small preview, outside the product cell */
.docview{width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--paper)}  /* a PO document read by eye beside the three-way match (a picture or a scanned PDF) */
.credit-row{padding:8px 12px}  /* one credit/refund's own disclosure row (Supplier page) */
.inbound-two{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px}  /* minmax(0,..): the irr worksheet's own width never stretches the grid, it scrolls inside .scroll instead */
.side{position:sticky;top:60px;align-self:start;max-height:80vh;overflow:auto}
.side-row{display:block;padding:8px 10px;border-radius:var(--r-2);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.side-row:hover{background:var(--accent-soft)}
.side-row .age{display:block}
.stage-two{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}

/* packing: a packed box is one line until somebody opens it; the product a scan found, big enough to compare */
.boxrow{border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-1);margin:0 0 6px;padding:0 10px;background:var(--paper)}
.boxrow>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;cursor:pointer;list-style:none}
.boxrow>summary::-webkit-details-marker{display:none}
.boxrow>summary::before{content:"▸";color:var(--ink-3);margin-right:6px}
.boxrow[open]>summary::before{content:"▾"}
.boxrow>summary>span:first-child{flex:1}
.boxrow[open]{padding-bottom:10px;border-color:var(--accent)}
.scancard{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:var(--r-3);box-shadow:var(--shadow-1);padding:12px 14px;margin:0 0 12px}
.scancard.flagged{border-left-color:var(--bad)}
.scancard .t{font-weight:700;font-size:var(--fs-section);line-height:1.3}
.scancard .q{color:var(--ink-2);font-size:var(--fs-small);margin:2px 0 8px}
.scancard dl{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 8px}
.scancard dt{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.scancard dd{margin:0;font-size:var(--fs-body)}
/* the dock's pallet page (shipments/pack_session.html, 2026-09-30): a phone in one hand, a scanner in the other */
.packfloor .btn,.packfloor .btn.sm,.packfloor .bar .btn,.packfloor .bar .btn.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.packfloor .bar select,.packfloor .bar input{min-height:44px;font-size:var(--fs-body)}
.packfloor input.cell.n{min-height:44px;font-size:var(--fs-body);width:76px;border-color:var(--line)}
.stageline{display:flex;gap:4px;margin:0 0 10px}
.stg{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--paper);font-size:var(--fs-small)}
.stg b{display:block}
.stg.done{background:var(--ok-soft);border-color:var(--ok)}
.stg.now{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}

/* the pallet map (an admin's Pallet Placement Mapper, shipments/_pallet_map.html, 2026-09-30): the 48 x 40 pallet with
   grid lines, BACK above and FRONT below, a level's boxes dragged and resized by a corner handle (static/pallet_map.js
   posts one row per drop); a box's left/top/width/height are the one computed inline style the kit allows */
.pmap{margin:0 0 12px}
.pmap .filter{margin:0 0 10px}
.pmap-two,.create3{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s4);align-items:start}
.pmap-wrap{max-width:560px;width:100%}
.pmap-edge{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:4px 0}
.pmap-pallet{position:relative;width:100%;aspect-ratio:48/40;border:2px solid var(--ink-2);border-radius:var(--r-1);background-color:var(--field);
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:12.5% 12.5%;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.pmap-pallet.ro{touch-action:auto}
.pmap-box{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;border:2px solid var(--accent);border-radius:var(--r-1);background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:var(--fs-small);line-height:1.15;text-align:center;overflow:hidden;cursor:grab;box-shadow:var(--shadow-1)}
.pmap-box .sub{font-weight:500;font-size:var(--fs-micro);color:var(--ink-2)}
.pmap-box.on{border-color:var(--accent-ink);box-shadow:var(--ring);z-index:2}
.pmap-box.saving{opacity:.6}
.pmap-box:active{cursor:grabbing}
.pmap-pallet.ro .pmap-box{cursor:default}
.pmap-handle{position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);border-radius:var(--r-1) 0 0 0;background:var(--paper);cursor:nwse-resize;touch-action:none}
.pmap-pallet.ro .pmap-handle{display:none}
.pmap-list .btn{min-height:44px}
.pmap-status{font-size:var(--fs-body);margin:0 0 10px}
.pmap-status b{font-size:var(--fs-section);letter-spacing:.02em}
.pmap-count{font-weight:700;margin:2px 0}
@media (max-width:900px){.pmap-two{grid-template-columns:minmax(0,1fr)}.pmap-wrap{max-width:none}}

/* the pallet sheet's own flag (CLEAR / STOP on hold / CHECK THE LISTING): a bordered strip, printed too */
.ship-flag{border:2px solid var(--line);border-radius:var(--r-2);padding:8px 12px;margin:0 0 10px}
.ship-flag b{font-weight:800}
.ship-flag ul{margin:4px 0 0}
.ship-flag.ok{border-color:var(--ok)}.ship-flag.ok b{color:var(--ok)}
.ship-flag.bad{border-color:var(--bad)}.ship-flag.bad b{color:var(--bad)}
.ship-flag.warn{border-color:var(--warn)}.ship-flag.warn b{color:var(--warn)}

/* where every unit is, and the timeline */
.stats.where{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stats.where details.stat{padding:0;border-radius:var(--r-3);overflow:hidden}
.stats.where summary{list-style:none;cursor:pointer;padding:10px 12px}
.stats.where summary::-webkit-details-marker{display:none}
.stats.where .stat.zero .v{color:var(--ink-3)}
.stats.where .rows{border-top:1px solid var(--line);padding:6px 12px 10px;font-size:var(--fs-small);display:flex;flex-direction:column;gap:4px}
.stats.where .rows a,.tl-what a{color:inherit;text-decoration:none}
.stats.where .rows a:hover{text-decoration:underline}
.stat.st-staging{border-top-color:var(--warn)}
.stat.st-shelf{border-top-color:var(--ok)}
.stat.st-aside,.stat.st-quarantine,.stat.st-unplaced{border-top-color:var(--bad)}
.stat.st-prep,.stat.st-box{border-top-color:var(--accent)}
.where-staging{color:var(--warn)}.where-shelf{color:var(--ok)}.where-aside,.where-quarantine{color:var(--bad)}
.lot-status{font-size:16px}  /* a lot page's own "where" word, bigger than the lede around it */
.tl{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper)}
.tl-row{display:grid;grid-template-columns:150px 120px 1fr;gap:10px;padding:6px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-small);align-items:baseline}
.tl-row:last-child{border-bottom:0}
.tl-at{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);white-space:nowrap}
.tl-who{font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-what a:hover{text-decoration:underline}
.tl-note .tl-what{font-style:italic}
.tl-shipped .tl-what{color:var(--accent)}
.tl-decision .tl-what,.tl-resolution .tl-what{color:var(--bad)}

/* Payments to match (purchasing/payments.html) */
.pay-option{display:block;margin:2px 0}

/* Rules > COGS's rate card (rules/cogs.html): the "Change a rate" fold */
.chk-rate-more{margin-top:10px}
.chk-rate-more summary{display:inline-block}


/* Holds: a held product's own card (warehouse/holds.html) */
.holdcard{margin-top:var(--s4);border-left:4px solid var(--bad)}
.edge-ok{border-left:4px solid var(--ok)}
.edge-bad{border-left:4px solid var(--bad)}
.holdcard .tbl{margin-top:var(--s3)}
.holdrow{margin-top:6px}


/* Lookup: the find box and the product head */
.tl-box{display:flex;gap:8px;margin:0 0 12px}
.tl-box input{flex:1;font:inherit}
.tl-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.tl-head .ln{margin:0}

/* the desks (release E10): the team desk, the dock's Today, the owner's five-minute Home. Only layout
   here: every list is the kit's grid, every product the product cell. */
.desk .block h2{margin:0 0 var(--s2)}
.desk .two{align-items:start}
.desk .empty{padding:14px 16px;max-width:none}
.desk .needs{display:flex;flex-wrap:wrap;gap:4px}
.desk.owner .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.desk.owner .lines td.title{font-weight:700;white-space:nowrap}
.desk.owner .p0pin{border-left:4px solid var(--bad);background:var(--bad-soft);padding:var(--s3) var(--s4);border-radius:6px}  /* the owner's pinned P0 to-do (2026-10-01) */
.desk.owner .p0pin p{margin:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}


/* Find (/find, scan mode): one big field for a phone or a scanner at the shelf, a row per bin/lot hit */
.scanfield{width:100%;box-sizing:border-box;min-height:60px;font-size:20px;padding:0 16px;border:2px solid var(--accent);border-radius:8px;background:var(--paper);color:var(--ink)}
.findqty{font-size:24px;width:70px;text-align:center}
.find-bin-row{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);margin-top:8px;min-height:64px}
.find-lot-row{display:flex;gap:14px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* the history chart (hq.core.history_chart, _history.html): one component on Lookup and the listing
   pages. A line's checkbox comes before the SVG; unchecked, its group is hidden. Solid = HQ, dashed = Keepa. */
.hc{margin:8px 0}
.hc-t,.alm-box input{position:absolute;opacity:0;pointer-events:none}
.hc-legend{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.hc-legend .chip{user-select:none;margin:0}  /* a label's own 12 px margins off: one tight row a line */
.hc-legend .chip i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle;background:var(--hc,var(--ink-2))}
.hc-plot{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:0 6px}  /* the axis words beside and under the SVG, never scaled */
.hc-svg{width:100%;height:350px;display:block}
.hc-plot>div{position:relative;font:var(--fs-micro) var(--body);color:var(--ink-3);white-space:nowrap}
.hc-plot>div span{position:absolute}
.hc-plot>div span[data-lo]{transform:translateY(-100%)}  /* a panel's bottom word sits above its line, the top word under it */
.hc-plot>div:first-child span{right:0}
.hc-plot>div:last-child{grid-column:2;height:14px}
.hc-plot>div:last-child span{top:0;transform:translateX(-50%)}
.hc-band{fill:var(--field);stroke:var(--line)}
.chart .cl{font:var(--fs-micro) var(--body);fill:var(--ink-3)}
.hc-g polyline{fill:none;stroke:var(--hc,var(--ink-2));stroke-width:1.6;vector-effect:non-scaling-stroke}
.hc-g polyline.hc-k{stroke-dasharray:4 3;stroke-width:1.2;opacity:.85}
.hc-bar{fill:var(--hc,var(--accent));opacity:.55}
.hc-shade{fill:var(--warn-soft);opacity:.7}
.hc-shade-suppressed{fill:var(--box-soft)}
.hc-mark{stroke:var(--ink-3);stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.hc-mark-po{stroke:var(--send)}
.hc-col{fill:transparent}
.hc-col:hover{fill:var(--ink);fill-opacity:.06}
.hc-k-amazon{--hc:var(--k-amazon)} .hc-k-new{--hc:var(--k-new)} .hc-k-fba{--hc:var(--k-fba)} .hc-k-fbm{--hc:var(--k-fbm)}
.hc-k-list{--hc:var(--k-list)} .hc-k-rank{--hc:var(--k-rank)} .hc-k-offers{--hc:var(--k-offers)}
.hc-k-reviews{--hc:var(--k-reviews)} .hc-k-rating{--hc:var(--k-rating)} .hc-box{--hc:var(--box)} .hc-ink{--hc:var(--ink)}
.hc-k-walmart{--hc:var(--k-walmart)}
.hc-accent{--hc:var(--accent)}
.hc-t[data-k="amazon"]:not(:checked)~.hc-plot .hc-amazon,.hc-t[data-k="new_lowest"]:not(:checked)~.hc-plot .hc-new_lowest,
.hc-t[data-k="new_fba"]:not(:checked)~.hc-plot .hc-new_fba,.hc-t[data-k="new_fbm"]:not(:checked)~.hc-plot .hc-new_fbm,
.hc-t[data-k="buy_box"]:not(:checked)~.hc-plot .hc-buy_box,.hc-t[data-k="walmart_box"]:not(:checked)~.hc-plot .hc-walmart_box,.hc-t[data-k="list_price"]:not(:checked)~.hc-plot .hc-list_price,
.hc-t[data-k="ours"]:not(:checked)~.hc-plot .hc-ours,.hc-t[data-k="sales_rank"]:not(:checked)~.hc-plot .hc-sales_rank,
.hc-t[data-k="offers_new"]:not(:checked)~.hc-plot .hc-offers_new,.hc-t[data-k="offers_fba"]:not(:checked)~.hc-plot .hc-offers_fba,
.hc-t[data-k="offers_fbm"]:not(:checked)~.hc-plot .hc-offers_fbm,.hc-t[data-k="reviews"]:not(:checked)~.hc-plot .hc-reviews,
.hc-t[data-k="rating"]:not(:checked)~.hc-plot .hc-rating,.hc-t[data-k="units"]:not(:checked)~.hc-plot .hc-units{display:none}
.hc-t[data-k="amazon"]:not(:checked)~.hc-legend [for$="-amazon"],.hc-t[data-k="new_lowest"]:not(:checked)~.hc-legend [for$="-new_lowest"],
.hc-t[data-k="new_fba"]:not(:checked)~.hc-legend [for$="-new_fba"],.hc-t[data-k="new_fbm"]:not(:checked)~.hc-legend [for$="-new_fbm"],
.hc-t[data-k="buy_box"]:not(:checked)~.hc-legend [for$="-buy_box"],.hc-t[data-k="walmart_box"]:not(:checked)~.hc-legend [for$="-walmart_box"],.hc-t[data-k="list_price"]:not(:checked)~.hc-legend [for$="-list_price"],
.hc-t[data-k="ours"]:not(:checked)~.hc-legend [for$="-ours"],.hc-t[data-k="sales_rank"]:not(:checked)~.hc-legend [for$="-sales_rank"],
.hc-t[data-k="offers_new"]:not(:checked)~.hc-legend [for$="-offers_new"],.hc-t[data-k="offers_fba"]:not(:checked)~.hc-legend [for$="-offers_fba"],
.hc-t[data-k="offers_fbm"]:not(:checked)~.hc-legend [for$="-offers_fbm"],.hc-t[data-k="reviews"]:not(:checked)~.hc-legend [for$="-reviews"],
.hc-t[data-k="rating"]:not(:checked)~.hc-legend [for$="-rating"],.hc-t[data-k="units"]:not(:checked)~.hc-legend [for$="-units"]{opacity:.4;text-decoration:line-through;border-style:dashed}
@media (max-width:700px){.hc-svg{height:280px}}
/* the Keepa card's short chart (tools/_keepa_chart.html, the owner's canvas 2026-11-09 12:55): the toggles and the
   range pills one row over a 170 px chart; the axis words scaled back to their shape (the SVG stretches to fit) */
[data-hc-short] .hc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--s2);margin:0}
[data-hc-short] .hc>*{grid-column:1/-1}
[data-hc-short] .hc>.hc-legend{grid-column:1;grid-row:1;margin:0}
[data-hc-short] .hc>.bar{grid-column:2;grid-row:1}
[data-hc-short] .bar .age{display:none}
[data-hc-short] .hc-legend .chip{padding:0 6px;line-height:16px}
[data-hc-short] .filter a{padding:1px 9px;font-size:var(--fs-micro)}
[data-hc-short] .hc-svg{height:209px}  /* 348 units at 0.6 px: the price panel 120 px, the offers and rating strips 36 */

/* a channel's colour on a chart line, a dot or a ring (.hc-ch-<channel>: the owner's Home) */
.hc-ch-fba{--hc:var(--ch-fba)} .hc-ch-wfs{--hc:var(--ch-wfs)} .hc-ch-fbm{--hc:var(--ch-fbm)} .hc-ch-ebay{--hc:var(--ch-ebay)}

/* 7. wide screens down to phones */
@media (min-width:641px){
  .top .modules{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .top .modules::-webkit-scrollbar{display:none}
}
@media (max-width:1600px){.mark-sub{display:none}}
/* the bar never hides a tab on a laptop (the views audit, 2026-10-04: "Files" was cut at 1440): the tabs keep their
   width and the search box shrinks first; 1401 to 1600 px takes the smaller gaps 1400 px already had (to 1500 with
   eleven tabs; twelve since Restricted became its own tab, 2026-10-24: the team desk ran 20 px past 1600) */
@media (min-width:1201px){.top .modules{flex:1 0 auto}}
@media (min-width:1401px) and (max-width:1600px){  /* the 260 px search box fits beside twelve whole tabs: tighter gaps */
  .top{gap:10px;padding:0 12px}
  .who{gap:6px}
  .modules{gap:1px}
  .modules a,.toplinks a{padding:7px 7px}
}
@media (max-width:1400px){
  .top{gap:14px;padding:0 16px}
  .who{gap:8px}
  .modules a,.toplinks a{padding:7px 10px;font-size:var(--fs-small)}
  .pill{padding:2px 8px}
  .find{flex:0 1 180px;min-width:0}
  .find:focus-within{flex:0 1 260px}
  .find input{transition:flex-basis .15s,padding .15s}
  .bell.has-alerts{max-width:34px;overflow:hidden;white-space:nowrap;text-overflow:clip}
}
@media (max-width:1200px){
  .find{flex:0 0 34px;min-width:34px;overflow:hidden;transition:flex-basis .15s}
  .find input{background:var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E8B99' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") 8px center/16px no-repeat;padding-left:30px;color:transparent}
  .find input::placeholder{color:transparent}
  .find:focus-within{flex:0 0 220px}
  .find:focus-within input{color:var(--ink)}
  .find:focus-within input::placeholder{color:var(--ink-3)}
}
@media (max-width:1100px){
  .stage-two{grid-template-columns:1fr}
}
@media (max-width:1000px){.inbound-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:800px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;align-items:center;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail a,.subnav a{flex:0 0 auto;white-space:nowrap}
  .rail .strip,.railhead{display:none}
  .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  .top{overflow-x:auto;scrollbar-width:none}
  .top::-webkit-scrollbar{display:none}
  .modules{flex:0 0 auto}
  .who{flex:0 0 auto}
  .page{overflow-wrap:anywhere}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .charts{grid-template-columns:minmax(0,1fr)}
  .btn{min-height:40px;padding:8px 12px}
  .btn.sm{min-height:36px}
  input,select{font-size:16px}  /* a phone zooms the page when a field under 16 px is tapped: a browser rule, not a type size */
  .padd{grid-template-columns:1fr}
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chip{white-space:normal;max-width:100%;overflow-wrap:anywhere}  /* a long chip (a supplier's band, a guard's words) wraps inside the phone instead of pushing the page sideways */
  .tbl th,.scroll.wide .tbl th,.scroll.wide .tbl td{position:static}
}
@media (max-width:800px) and (min-width:641px){.page{padding:var(--s5) var(--s4) 64px}}
/* the grid as cards: a table whose cells carry data-l labels, under 700 px */
@media (max-width:700px){
  .scroll.wide{max-height:none;overflow:visible}
  .tbl:has(td[data-l]),.tbl:has(td[data-l]) tbody{display:block;width:100%;min-width:0!important;border:0;box-shadow:none;background:none}
  .tbl:has(td[data-l]) thead{display:none}
  .tbl:has(td[data-l]) tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);padding:10px 12px;margin:0 0 8px;box-shadow:var(--shadow-1)}
  .tbl:has(td[data-l]) tr.bad{border-color:var(--bad)}
  .tbl:has(td[data-l]) td{display:block;border:0;padding:0;background:none!important;min-width:0;max-width:none;width:auto;white-space:normal;text-align:left}  /* the card layout drops td.num's width:1%/nowrap (2026-10-01): a narrow card scrolled sideways under its own number cells */
  .tbl.full:has(td[data-l]) td.num{width:auto}  /* and a full table's too: .tbl.full td.num's 1% outranked the line above, a card's numbers 2 px wide (/profit at 390, 2026-10-14) */
  .tbl:has(td[data-l]) td.full,.tbl:has(td[data-l]) td.product{grid-column:1/-1}
  .tbl td[data-l]::before{content:attr(data-l);display:block;font:500 var(--fs-micro) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
  .tbl td[data-l=""]::before{display:none}
  .tbl td .pc-t,.tbl td .pc-n{-webkit-line-clamp:3}
}
@media (max-width:640px){
  :root{--fs-title:22px}
  .top{flex-wrap:wrap;height:auto;padding:6px var(--s4);gap:6px var(--s3)}
  .top .modules{order:3;width:100%;overflow-x:auto;white-space:nowrap;display:flex;gap:2px;padding-bottom:2px;padding-right:36px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}  /* the strip fades out at the right edge, so a tab is never cut mid-word (the UI audit, 2026-10-11) */
  .top .modules a,.toplinks a{padding:6px 8px;font-size:var(--fs-small)}
  .find{order:2;max-width:none;flex:1;margin:0}
  .find input::placeholder{color:var(--ink-3)}  /* the phone's box is full width: its placeholder shows (the icon rule above hides it on a narrow laptop) */
  .find input{color:var(--ink)}
  .page{padding:var(--s4) var(--s4) 80px}
  .lede{display:none}
  .alerts{padding:0 var(--s4)}
  .rail{padding:var(--s2) var(--s4)}
  .scanbar{position:sticky;top:0;z-index:6;flex-wrap:wrap;margin:0 calc(-1 * var(--s4)) var(--s3);padding:10px 12px;border-left:0;border-right:0;border-radius:0}
  .scanbar input.scan{font-size:var(--fs-section);padding:12px;min-width:0;width:100%;flex:1 1 100%}
  .scanbar input.n{width:76px;font-size:var(--fs-section);padding:10px}
  .scanbar .btn{flex:1;min-height:48px;font-size:var(--fs-body)}
  .btn{min-height:44px;padding:9px 14px}
  /* every tappable button reaches the 44px phone target (the phone kit pass, 2026-09-30): .bar .btn and
     .padd .btn (a dense desktop toolbar / form row, 40px) and the narrower .btn.sm and its more specific
     nested overrides (.bar .btn.sm, .det td.state .btn.sm) all set a shorter height that is fine at 1280
     but must not survive down to 390. */
  .bar .btn,.padd .btn,.btn.sm,.bar .btn.sm,.det td.state .btn.sm{min-height:44px}
  button.chip{min-height:44px}  /* the @mention chip is a real <button> (_talk.html); 32px at phone width
     missed the 44px tap target (the phone kit pass, 2026-09-30) */
  .scancard{flex-direction:column;gap:8px}
  .two,.stage-two{grid-template-columns:1fr}
  .auto-grid,.charts{grid-template-columns:1fr}  /* the 340/420px minimums overflow a phone otherwise (wave 2, found live) */
  .stats{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .cards{grid-template-columns:1fr}
  .boxrow summary{padding:12px 10px;font-size:var(--fs-body)}
  .panel{padding:var(--s3) var(--s4)}
  .pc.big{grid-template-columns:84px minmax(0,1fr)}
  .pc.big .pc-img{width:84px;height:84px}
  .imgs{grid-template-columns:96px 96px}
  .stageline{flex-wrap:wrap}
  .stg{flex:1 1 30%}
  .tl-row{grid-template-columns:1fr;gap:2px}
  input.cell{border-color:var(--line);background:var(--paper);width:100%;font-size:16px;min-height:44px}
}

/* 7b. ALMACÉN > PEDIDOS: the warehouse's simple site's FBM orders screen (2026-10-01).
   Its own look on the iPad: big type, big photos, big round buttons, warm ground; the kit's pieces scaled up inside .alm */
.alm{--pic-big:168px;--alm-ground:#FBF6EE;--alm-card:#FFFFFF;--alm-due:#B4402F;background:var(--alm-ground);font-size:20px}
.alm h1{font-size:34px;margin:0}
.alm h2{font-size:28px;margin:18px 0 8px}
.alm-head{display:flex;align-items:center;gap:var(--s3)}
.alm-lede{font-size:20px;color:var(--ink-2);margin:6px 0 14px}
.alm-say{border:0;background:var(--accent-soft);color:var(--accent-ink);border-radius:50%;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.alm-flash{font-size:24px;font-weight:700;padding:18px 20px;margin:12px 16px;border-radius:var(--r-3);text-align:center}
.alm-flash.ok{background:var(--ok-soft);color:var(--ok-ink);border:3px solid var(--ok)}
.alm-flash.bad{background:var(--bad-soft);color:var(--bad-ink);border:3px solid var(--bad)}
.alm-empty{font-size:26px;text-align:center;padding:60px 20px;color:var(--ok-ink)}
.alm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.alm-card,.alm-order{display:flex;flex-direction:column;gap:8px;background:var(--alm-card);border:3px solid var(--line);border-radius:18px;padding:16px;color:var(--ink);text-decoration:none;box-shadow:0 2px 6px rgba(20,30,40,.06)}
.alm-card.due,.alm-order.due{border-color:var(--alm-due)}
.alm-card.done,.alm-order.done,.alm-chip.ok{border-color:var(--ok);background:var(--ok-soft)}
.alm-card.batch{border-color:var(--accent);border-style:dashed}
.alm .pc-t{font-size:20px}
.alm-x{font-size:56px;font-weight:800;line-height:1;color:var(--ink)}
.alm-prod{display:flex;flex-direction:column;gap:8px;min-width:0}  /* the order card's product: picture, then the name, then x1 under it (2026-10-02: the 96px thumb box let the picture spill and x1 sat on the name) */
.alm-prod .al-thumb{width:100%;height:auto;max-height:var(--pic-big);display:flex;justify-content:center;overflow:hidden}
.alm-prod .al-thumb img{max-width:100%;max-height:var(--pic-big);width:auto;height:auto;object-fit:contain}
.alm-prod b{font-size:20px;line-height:1.25;overflow-wrap:anywhere}
.alm-line,.alm-bin-exp{font-size:20px;color:var(--ink-2)}
.alm-when{font-size:20px}
.alm-card.due .alm-when,.alm-order.due .alm-when{color:var(--alm-due);font-weight:700}
.alm-when.ok{color:var(--ok-ink);font-size:28px;font-weight:800}
.alm-step{font-size:18px;font-weight:700;color:var(--accent-ink)}
.alm-back{font-size:20px;margin-bottom:12px}
.alm-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0}
.alm-steps li{padding:8px 14px;border-radius:var(--r-pill);background:var(--paper);border:2px solid var(--line);font-size:18px;color:var(--ink-3)}
.alm-steps li.past{color:var(--ok-ink);border-color:var(--ok)}
.alm-steps li.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.alm-shelf{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 16px}
.alm-bin{background:var(--paper);border:3px solid var(--line);border-radius:18px;padding:14px;min-width:220px;display:flex;flex-direction:column;gap:6px}
.alm-bin .fpic{width:200px;height:150px}
.alm-bin-take{font-size:26px}
.alm-bin-take b{font-size:40px}
.alm-scan,.alm-track{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--paper);border-radius:18px;padding:16px;border:3px solid var(--accent)}
.alm-scan label,.alm-track label{font-size:22px;font-weight:700}
.alm input[name=code],.alm input[name=tracking]{font-size:28px;padding:14px;min-width:280px;flex:1;font-family:var(--mono)}
.alm-go{font-size:24px;padding:16px 28px;border-radius:var(--r-pill);min-height:64px;display:inline-flex;align-items:center;justify-content:center;margin-top:8px}
.alm-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.alm-box{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--paper);border:3px solid var(--line);border-radius:18px;padding:12px;cursor:pointer;font-size:18px;text-align:center}
.alm-box:has(input:checked),.alm-carrier:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.alm-box svg .f{fill:#C99A5B;stroke:#7A5426;stroke-width:1.5}
.alm-box svg .t{fill:#E2BC86;stroke:#7A5426;stroke-width:1.5}
.alm-box svg .s{fill:#B0814A;stroke:#7A5426;stroke-width:1.5}
.alm-box-name{font-weight:700}
.alm-weight{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:18px 0 8px;font-size:22px}
.alm-wlabel{font-weight:700}
.alm-num{font-size:44px;width:150px;text-align:center;padding:8px;font-weight:800}
.alm-num.on{border:3px solid var(--accent)}
.alm-keypad{display:grid;grid-template-columns:repeat(3,96px);gap:10px;margin:8px 0}
.alm-keypad button{font-size:36px;font-weight:700;height:80px;border-radius:18px;border:2px solid var(--line-2);background:var(--paper);cursor:pointer}
.alm-keypad button[data-key=clear]{font-size:20px;grid-column:span 2}
.alm-rates{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.alm-rate{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:3px solid var(--line);border-radius:18px;padding:18px}
.alm-rate.rec{border-color:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.alm-rate-k{font-size:20px;font-weight:700;display:flex;gap:6px;flex-wrap:wrap}
.alm-rate .chip{font-size:18px;padding:4px 10px}
.alm-money{font-size:44px;font-weight:800}
.alm-wait{font-size:26px;padding:30px;text-align:center;color:var(--ink-2)}
.alm-carriers{display:flex;gap:10px;flex-wrap:wrap;width:100%}
.alm-carrier{font-size:22px;padding:12px 18px;border:2px solid var(--line-2);border-radius:var(--r-pill);background:var(--paper)}
.alm-sent{font-size:56px;font-weight:800;color:var(--ok-ink);background:var(--ok-soft);border:4px solid var(--ok);border-radius:24px;text-align:center;padding:40px 20px;margin:16px 0}
.alm-mini{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.alm-chip{font-size:18px;padding:8px 14px;border-radius:var(--r-pill);background:var(--paper);border:2px solid var(--line);color:var(--ink);text-decoration:none}
.alm-chip.due{border-color:var(--alm-due)}
.alm-typed{margin:12px 0}
@media (max-width:700px){.alm{--pic-big:120px}.alm-x{font-size:44px}.alm-keypad{grid-template-columns:repeat(3,1fr)}}

/* 7c. HOJA DE TARIMA: the printed pallet plan (shipments/pallet_plan_print.html, the pallet plan B5). One letter page per
   pallet, black and white: the three numbers, the levels three across from the floor up, the side view, the four
   last steps. Box numbers scale with the box (container units). */
.hoja-print{max-width:8.5in;color:#000}
.hoja-page{display:block;padding:0 0 6mm;border-bottom:1px dashed var(--line);margin-bottom:6mm}
.hoja-page small,.hoja-print small{font-size:10px;font-weight:400;color:#333}
.hoja-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:3px solid #000;padding-bottom:4px}
.hoja-head h1{font-size:44px;line-height:1;margin:0;font-weight:800;letter-spacing:-.5px}
.hoja-dest{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0}
.hoja-dest b{font-size:18px}
.hoja-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.hoja-nums>div{border:2px solid #000;padding:4px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.hoja-nums b{font-size:26px;line-height:1.1}
.hoja-nums span{font-size:12px}
.hoja-meter{display:block;height:8px;border:1px solid #000;margin-top:2px}
.hoja-meter i{display:block;height:100%;background:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hoja-warn{border:3px solid #000;padding:4px 8px;margin:6px 0;font-size:16px;font-weight:700}
.hoja-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hoja-panel{border:1.5px solid #000;padding:4px 6px;display:flex;flex-direction:column;gap:2px;min-width:0;break-inside:avoid}
.hoja-ptitle{display:flex;justify-content:space-between;align-items:baseline;gap:4px;flex-wrap:wrap}
.hoja-ptitle b{font-size:15px}
.hoja-ptitle span{font-size:10px}
.hoja-edge{font-size:9px;text-align:center;letter-spacing:.5px}
.hoja-pallet{position:relative;width:calc(100% - 4px);margin:0 2px;aspect-ratio:48/40;border:2px solid #000;box-sizing:border-box}
.hoja-under{position:absolute;border:1px dashed #999;background:#f2f2f2;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hoja-box{position:absolute;border:2.5px solid #000;background:#fff;box-sizing:border-box;container-type:size;display:flex;align-items:center;justify-content:center}
.hoja-box b{font-size:clamp(8px,min(55cqh,38cqw),30px);font-weight:800;line-height:1}
.hoja-box.lift{background:#d9d9d9;border:4px double #000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hoja-list{font-size:10px}
.hoja-side{position:relative;width:calc(100% - 4px);margin:0 2px;aspect-ratio:48/56}
.hoja-sbox{position:absolute;border:1px solid #000;background:#fff;box-sizing:border-box}
.hoja-wood{position:absolute;left:0;right:0;bottom:0;background:#777;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hoja-limit{position:absolute;left:0;right:0;border-top:2px dashed #000}
.hoja-limit span{position:absolute;right:0;top:-14px;font-size:10px;font-weight:700;font-style:normal}
.hoja-steps{list-style:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1.3fr);gap:8px;margin:8px 0 0;padding:6px 0 0;border-top:3px solid #000}
.hoja-steps li{display:flex;gap:6px;align-items:flex-start;font-size:12px;font-weight:700;min-width:0}
.hoja-steps li>b{flex:none;width:22px;height:22px;border:2px solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hoja-blank{display:inline-block;width:44px;border-bottom:1.5px solid #000}

/* the PO for the supplier (purchasing/po_print.html): a letter page, our name and the PO number on top, the two addresses
   side by side, the lines, the total */
.po-print{max-width:8.5in}
.po-print .po-parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3) var(--s5);margin:var(--s3) 0}
.po-print .po-parties p{margin:0;line-height:1.45}
.po-print td.total{font-weight:700}

/* 8. print */
@media print{
  .top,.rail,.noprint,.foot,.alerts,.subnav,.banner{display:none!important}
  .shell{display:block}
  .page{padding:0}
  body{background:#fff}
  .tbl th{position:static}
  .sheet-print .tbl{font-size:11px}
  .sheet-print h2{break-after:avoid}
  /* the pallet map's pages: one landscape page per level, its map and the level's boxes (an admin's mapper, 2026-09-30) */
  @page pmap{size:letter landscape;margin:12mm}
  .pmap-page{display:block;page:pmap;break-before:page}
  .pmap-page .pmap-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12mm}
  .pmap-page .pmap-wrap{max-width:none}
  .pmap-page .pmap-pallet{background-color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pmap-page .pmap-box{background:#eef5f4;-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none}
  .pmap-page .pmap-handle{display:none}
  .pmap-print .pmap-page:first-of-type{break-before:auto}
  /* the Hoja de tarima: one letter page per pallet, portrait, no margin lost to the shell */
  @page hoja{size:letter portrait;margin:8mm}
  .hoja-page{page:hoja;break-before:page;border-bottom:0;margin:0;padding:0}
  .hoja-print .hoja-page:first-of-type{break-before:auto}
  .hoja-print{max-width:none}
  .po-print{max-width:none;font-size:12px}
  .po-print .tbl{font-size:11px}
}

/* a row in the ok tone: green, the good state (one colour per meaning: warn amber, bad red, info blue) */
.tbl tr.ok td{background:var(--ok-soft)}

/* the ring figures (_rings.html, money/_fees_unit.html): four in a row, 2x2 on a phone */
.donuts{display:grid;grid-template-columns:repeat(4,minmax(150px,280px));gap:var(--s4)}
.donut{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.donut svg{width:100%;max-width:150px;transform:none}
.donut .dn-v{font-family:var(--display);font-weight:700;font-size:7px;fill:var(--ink)}
.donut .dn-v.money{font-size:4.6px}  /* a dollar figure in the centre ("$190,259") stays inside the ring */
.donut .dn-k{font-family:var(--mono);font-size:3px;fill:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.donut figcaption{width:100%;font-size:var(--fs-small)}
.donut ul{list-style:none;margin:var(--s1) 0 0;padding:0}
.donut li{display:flex;gap:var(--s2);align-items:baseline}
.rings .donut .num{white-space:normal;display:flex;flex-wrap:wrap;gap:0 var(--s1);min-width:0}  /* the 7 days' shares wrap under their ring instead of running into the next (Home, 2026-11-06) */
.donut li a,.donut li .lab{flex:1;color:var(--ink-2)}
.donut li i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
/* the owner's six rings (_rings.html: Home's Selling and the team desk): orders, refunds and HQ margin per channel and eBay
   route, the Profit page's figures; six across on a laptop, as many as fit, two across on a phone */
.donuts.rings{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 var(--s4)}
.donuts.rings svg{max-width:120px}
/* Money's "Where a unit's dollar goes" (money/_fees_unit.html, owner-only): one ring per channel; a segment's colour is
   its kind's, set once here (--seg) and read by the arc and the legend swatch, so the same fee wears the same colour on
   every ring */
.donuts.fu{grid-template-columns:repeat(3,minmax(200px,360px))}
.donut.fu .dn-v{font-size:5.5px}
.donut circle.seg{stroke:var(--seg)}
.donut i.seg{background:var(--seg)}
.fu-fee_referral{--seg:var(--k-amazon)}.fu-fee_fulfilment{--seg:var(--box)}.fu-fee_storage{--seg:var(--k-rating)}.fu-fee_storage_aged{--seg:var(--k-fbm)}
.fu-fee_removal{--seg:var(--k-reviews)}.fu-fee_disposal{--seg:var(--accent)}.fu-fee_inbound_placement{--seg:var(--k-offers)}.fu-fee_other{--seg:var(--grid)}
.fu-refund_commission{--seg:var(--practice)}.fu-refunds{--seg:var(--bad)}.fu-promo{--seg:var(--k-new)}.fu-cost{--seg:var(--send)}.fu-net{--seg:var(--ok)}
@media (max-width:700px){.donuts.fu{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.donuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}.donut li .age{display:none}.donut li a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* Width scale (audit 7: a page never types a pixel width; !important because it replaces what an inline style said).
   A min-width is the next step up from the old literal (a table never compresses below its content), a max-width the
   nearest. A width computed from data stays style="width:{{ pct }}%" and is the only inline style a page may carry. */
.w-60{width:60px!important}.w-80{width:80px!important}.w-120{width:120px!important}.w-180{width:180px!important}.w-320{width:320px!important}
.w-22ch{width:22ch!important}.w-34ch{width:34ch!important}.w-pct-12{width:12%!important}.w-pct-24{width:24%!important}.w-full{width:100%!important}
.minw-160{min-width:160px!important}.minw-200{min-width:200px!important}.minw-240{min-width:240px!important}.minw-280{min-width:280px!important}.minw-320{min-width:320px!important}.minw-360{min-width:360px!important}.minw-500{min-width:500px!important}.minw-600{min-width:600px!important}.minw-700{min-width:700px!important}.minw-800{min-width:800px!important}.minw-900{min-width:900px!important}.minw-1000{min-width:1000px!important}.minw-1100{min-width:1100px!important}.minw-1700{min-width:1700px!important}
.maxw-320{max-width:320px!important}.maxw-500{max-width:500px!important}.maxw-700{max-width:700px!important}.maxw-800{max-width:800px!important}.maxw-900{max-width:900px!important}.maxw-1000{max-width:1000px!important}.maxw-1100{max-width:1100px!important}.maxw-1300{max-width:1300px!important}.maxw-48ch{max-width:48ch!important}

/* Shipments tiles (the Shipments tab, the owner 2026-10-08: "what does it cost me to put a unit on the shelf, and is
   that getting cheaper or dearer?"). The hero strip: one bright card a channel with this
   month's cost a unit, its change against last month and a sparkline by month; the lane of open shipments; a row's
   cost a unit as a bar against the period's average (ok under, warn over); pallet and box chips. Every colour is a
   kit token: FBA wears the send blue, WFS the ok green, the owner's spent card the accent. */
.tbl td.ship-id{min-width:300px;max-width:400px}  /* the shipment cell: id and chips, destination and carrier, the small line */
.chip.ship-pallet{background:var(--send-soft);color:var(--send-ink)}
.chip.ship-box{background:var(--field);color:var(--ink-2);border-color:var(--line)}
.ship-bar{display:block;position:relative;height:6px;width:96px;margin:4px 0 0 auto;border-radius:3px;background:var(--field);border:1px solid var(--line);overflow:hidden}
.ship-bar i{display:block;height:100%;background:var(--ink-3);border-radius:3px}
.ship-bar.under i{background:var(--ok)}
.ship-bar.over i{background:var(--warn)}
.ship-bar::after{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:2px;background:var(--ink);opacity:.6}  /* the tick: the period's average */
@media (max-width:700px){.ship-bar{margin-left:0}}
/* Files > eBay: a SKU's folder previews the listing (the main picture beside the title, price and first lines) */
.ebay-preview{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--s4);align-items:start}
.ebay-preview-pic .pc-img{width:100%;height:320px;border-radius:var(--r-2)}
.ebay-preview-desc{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--s3)}
.ebay-preview-price{font-size:1.25rem;font-weight:700}
.ebay-text{white-space:pre-wrap}
/* the eBay drafts page (Create listings; the owner's design of 2026-10-11, Combined.dc): the page capped at 1440 px;
   five bordered stop cards in a row (Ready green, Brand and Type amber), the big number beside its label, one sentence,
   one full-width press, a small grey line; the worth-a-look strip; the bar for the checked drafts (shown once a box is
   checked); the list with fixed columns, ready rows green, refused red; three squares for a draft's pictures */
.btn.go,.case .fs.done .tick{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.go:hover{background:var(--ok-ink);border-color:var(--ok-ink)}
.btn.line{background:var(--paper);border-color:var(--send);color:var(--send)}
.btn.line:hover{background:var(--send-soft);border-color:var(--send-ink);color:var(--send-ink)}
.btn.line.bad{border-color:var(--bad);color:var(--bad-ink)}
.btn.line.bad:hover{background:var(--bad-soft)}
.chip.fill.ok{background:var(--ok);color:#fff;font-weight:700}
.chip.fill.bad{background:var(--bad);color:#fff;font-weight:700}
@media (max-width:700px){.ebay-preview{grid-template-columns:minmax(0,1fr)}}
/* Orders: the row and the ladder under it (the owner's design of 2026-10-11 14:00, Final.dc.html): a table with fixed
   columns across the window (the owner, 2026-10-25: no empty right third); the product column and Why this price take
   the room a wide monitor gives, a narrow one scrolls inside .scroll.wide */
.orow{--pic:56px}
.orow .tbl{width:auto;max-width:100%;table-layout:auto}.orow .tbl.full{width:100%;max-width:none;min-width:1560px}  /* fifteen columns across the page (the owner's canvas, 2026-11-02): When, Channel and ASIN / item their words' width, Margin and % 84 px each, Why this price 34ch (a third of its old width), the product the rest; a narrower screen scrolls the sheet */
.orow col.c-open{width:32px}.orow col.c-sold{width:92px}.orow col.c-eta{width:88px}
.orow col.c-margin{width:84px}.orow col.c-age{width:112px}.orow col.c-expiry{width:118px}
.orow col.c-pricer{width:90px}.orow td.pricer .chip{white-space:normal;line-height:1.35}  /* the Repricer column (2026-10-18, page section 27): the desk and job chip (it wraps), who set it */
.orow tr.added td{animation:fresh 10s ease-out}  /* a line the open page added (static/orders_live.js), 2026-11-06; never .fresh, the "as of" stamp class above makes a row a flex box (the owner saw stacked cells, 2026-11-07) */
@keyframes fresh{from{background:var(--ok-soft)}to{background:transparent}}
.orders [hidden]{display:none}  /* the live chips and the paused hint until the poll shows them */
.orow td.opener,.lrow td.opener,.sbtbl td.opener{padding:8px 0 0;text-align:center}
.orow td.opener details,.lrow td.opener details,.sbtbl td.opener details{display:inline-block}
details.opener>summary{list-style:none;cursor:pointer;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--paper);color:var(--ink-2);font-size:var(--fs-micro)}
details.opener>summary::-webkit-details-marker{display:none}
details.opener>summary::before{content:"\25B8"}
details.opener[open]>summary::before{content:"\25BE"}
.orow td.product .pc-t{font-size:var(--fs-small)}
.orow .tbl.full td.product{min-width:300px}.orow td.when .sub,.orow td.nowrap .sub{white-space:nowrap}.orow td.product [data-sku]{overflow-wrap:anywhere}  /* the product keeps a reading width beside fourteen columns; a long SKU breaks inside its cell */
.orow .oline{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;margin-top:2px}
.orow .oline .dot{color:var(--ink-3)}
.orow .oline .ago{font-weight:600;color:var(--ink-2)}
.orow .oline a.mono{color:var(--accent-ink)}
.orow td.num{font-size:15px}
.orow td.num .chip,.lrow td.num .chip{white-space:normal;line-height:1.35}  /* "no cost on file" wraps inside its 90 px column, never clips */
:is(.orow,.ledger) .life{font-size:var(--fs-micro);font-family:var(--mono)}:is(.orow,.ledger) .life.ok{color:var(--ok-ink)}:is(.orow,.ledger) .life.warn{color:var(--warn-ink)}:is(.orow,.ledger) .life.bad{color:var(--bad-ink)}.ledger .life.info{color:var(--accent-ink)}
.orow td.num .sub,.orow td.stock .sub,.orow td.agecell .sub,.lrow td.num .sub{font-size:var(--fs-micro);color:var(--ink-2);white-space:normal}
.orow td.num .sub.m-loss,.orow td.num .sub.m-thin,.orow td.num .sub.m-good{font-size:var(--fs-micro)}
.orow .big{font-size:20px;font-weight:700;line-height:1.2}
.orow td.band{min-width:200px}.orow td.band .edges{display:grid;grid-template-columns:auto auto auto;gap:2px 8px;align-items:baseline;font-size:var(--fs-small);white-space:nowrap}.orow td.band .edges .lab{font-size:var(--fs-micro);color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}.orow td.band .bar{margin-top:6px}  /* the Band column (the owner's canvas, 2026-11-06): min and max, the margin a unit at each; his boxes under it */
.orow td.verdict{max-width:34ch;white-space:normal;font-size:var(--fs-small)}
.orow td.verdict .chip{white-space:normal}  /* the layer chip wraps inside its column (the owner 11/09) */  /* ONE line, the rule first then the hand (the canvas of 2026-11-02); it wraps, never clips */
.orow tr[data-refund] td{color:var(--bad-ink)}.orow tr[data-refund] td.product .pc-t a{color:var(--ink)}.orow tr[data-refund] td.num .sub{color:var(--bad-ink)}  /* a refund: the red line under its order */
#orders-totals{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 var(--s3)}#orders-totals b{font-family:var(--mono);font-weight:500;color:var(--ink)}#orders-totals b.bad{color:var(--bad-ink)}#orders-totals b .neg{color:inherit}  /* the one totals line: orders, units, sales, fees, landed cost, net profit, refunds */
.lbox .scroll{margin:0 0 8px}.lbox .tbl{width:100%}.lbox .tbl td,.lbox .tbl th{padding:4px 6px;font-size:var(--fs-micro)}.lbox .tbl tr[data-tries=untried] td{color:var(--ink-2)}  /* the price box's table of every price tried */
.lbox .kv{grid-template-columns:120px 1fr;margin:0 0 8px}.lbox .ln.btns{justify-content:flex-start;align-items:center;gap:8px}.lbox details.band{margin:0;padding:4px 10px;box-shadow:none}.lbox details.band>summary{font-weight:600;font-size:var(--fs-small)}
.orow td.stock,.orow td.agecell{font-size:var(--fs-small)}
.est{font-size:var(--fs-micro);color:var(--ink-3);cursor:help}  /* an estimated number, the design's lower-case mark; the reason in its title */
.orow .tbl tr.ladder,.lrow .tbl tr.ladder,.sbtbl .tbl tr.ladder,.ledger .tbl tr.ladder{display:none}
.orow .tbl[data-money=product]{width:auto;min-width:360px;max-width:520px;table-layout:auto}  /* an order's money from the ledger (orders/_order_money.html) under the row's ladder: its own width, never the row's fixed sheet */
.orow .tbl tr:has(details.opener[open])+tr.ladder,.lrow .tbl tr:has(details.opener[open])+tr.ladder,.sbtbl .tbl tr:has(details.opener[open])+tr.ladder,.ledger .tbl tr:has(details.opener[open])+tr.ladder{display:table-row}
.orow .tbl tr.ladder>td,.lrow .tbl tr.ladder>td,.sbtbl .tbl tr.ladder>td,.ledger .tbl tr.ladder>td,.wsheet .tbl tr.wopen>td{background:var(--field);padding:var(--s3) var(--s4);position:static;white-space:normal}
.agecell.t-ok{background:var(--ok-soft)}.agecell.t-ok b,.agecell.t-ok .sub{color:var(--ok-ink)}
.agecell.t-info{background:var(--accent-soft)}.agecell.t-info b,.agecell.t-info .sub{color:var(--accent-ink)}
.agecell.t-warn{background:var(--warn-soft)}.agecell.t-warn b,.agecell.t-warn .sub{color:var(--warn-ink)}
.agecell.t-bad{background:var(--bad-soft)}.agecell.t-bad b,.agecell.t-bad .sub{color:var(--bad-ink)}
/* the ladder: two boxes side by side, the charges a unit and the price's every try */
.ladderbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.lbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);padding:10px 12px;font-size:var(--fs-small);min-width:0}
.lbox .lhead{font:700 var(--fs-micro) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.lbox .lhead .chip{text-transform:none;letter-spacing:0;font-weight:400}
.charges{display:grid;grid-template-columns:minmax(0,1fr) 84px;row-gap:3px;font-variant-numeric:tabular-nums}
.charges .amt{text-align:right;white-space:nowrap}
.charges .sold,.charges .sold+.amt{font-weight:600}
.charges .total,.charges .total+.amt{color:var(--ink-2);font-style:italic}
.charges .margin,.charges .margin+.amt{border-top:1px solid var(--line-2);padding-top:4px;font-weight:700}
.charges .be{grid-column:1/-1;color:var(--ink-2)}
.tries{display:flex;flex-direction:column;gap:3px;margin:0 0 6px}
.tries .tday{display:inline-block;width:52px;color:var(--ink-3)}
.tries .sold .tday{color:var(--bad-ink);font-weight:600}
.foldgrid>[data-k=moves]{grid-column:span 2}
[data-k=moves] .tries .tday{width:auto;min-width:112px;white-space:nowrap;font:var(--fs-micro) var(--mono)}  /* Last moves: the time on one line */
.lbox .why{color:var(--ink-2);margin-top:2px}
.band{border:1px solid var(--line-2);border-radius:var(--r-2);padding:8px 10px;background:var(--paper);margin:8px 0;font-size:var(--fs-small)}
.band .kv{grid-template-columns:84px 1fr;margin:0 0 6px}
.band details.how{box-shadow:none;padding:6px 10px;margin:0}
/* COGS > FBA and WFS, the ledger row (the owner's pick 2026-10-12, FBA2.dc.html): one line a received layer, the
   ladder's three boxes under the arrow (a unit charged, the typed fields, the layer); a red cell holds its own field */
.ladderbox.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ladderbox.four{grid-template-columns:1.3fr 1fr 1fr 1fr}  /* the Repricer ledger's fold: the band and the story, the market, a unit's money, the stock */
.lrow td.product{min-width:220px}
.lrow .tbl thead th{white-space:normal;vertical-align:bottom;letter-spacing:0}  /* 17 columns: a long header takes two lines, never the page's width */
.lrow .tbl :is(thead th,tbody td){padding-left:6px;padding-right:6px}
.lrow .tbl td.num .sub{max-width:84px}
.lrow .tbl td.num .sub.nw{max-width:none;white-space:nowrap}  /* an age band ("0 to 180 d") reads on one line */
/* Restock's wide ledger (restock/walmart.html, the owner's canvas A of 11/04): the opener beside the SKU in the
   pinned first cell, the title cut to one line (the whole in its title), the group row scrolls away under the sticky
   column row */
.lrow .tbl td.sku{white-space:nowrap}.lrow .tbl td.sku details.opener{display:inline-block;vertical-align:middle;margin-right:6px}
.lrow .tbl td .clamp1.short{max-width:28ch}
/* Restock's picture first (the owner, 11/04 11:40): a 40 px thumbnail, the SKU pinned beside it at the picture
   cell's width (the picture + 16 px padding + its 1 px line); a phone pins nothing (the 800 px rule) */
.lrow.pics{--pic:40px}
@media (min-width:801px){.lrow.pics .tbl :is(thead th,tbody td).sku{position:sticky;left:calc(var(--pic) + 17px);z-index:1}.lrow.pics .tbl thead th.sku{z-index:3}}
.lrow .tbl thead tr:has(th[colspan]) th,.lrow .tbl thead tr:has(th[colspan]) th:first-child{position:static}
.lrow .ladderbox{max-width:1180px;position:sticky;left:var(--s4)}  /* the boxes stay in view while the sheet scrolls sideways */
.lrow .oline{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;margin-top:2px;font-size:var(--fs-small)}
.lbox .layer{display:flex;flex-direction:column;gap:4px}
@media (max-width:700px){.orow .tbl tr:has(details.opener[open])+tr.ladder,.lrow .tbl tr:has(details.opener[open])+tr.ladder,.sbtbl .tbl tr:has(details.opener[open])+tr.ladder,.ledger .tbl tr:has(details.opener[open])+tr.ladder{display:block}.ladderbox,.ladderbox.three,.ladderbox.four{grid-template-columns:minmax(0,1fr)}}
/* COGS by product (eBay first, the owner 2026-10-12, design D): a block per product, its head once, a line per listing */
.cb{border:1px solid var(--line);border-radius:var(--r-1);margin:0 0 var(--s4);background:var(--paper)}
.cb>.scroll{margin:0;border:0}
/* ---- the opened product on Warehouse > Inventory (whopen, W2-Product 2026-10-12, back 2026-10-14): the presses, the
   listings and lots on the left, the product chat on the right (warehouse/_open.html, _chat.html); the hub's presses
   share the press styles ---------------------------------------------------------------------- */
.wopen{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-start;padding:var(--s4);background:var(--field);border-top:1px solid var(--line)}
.wopen-main{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.wopen-main>.block,.wopen-main>.tiles{margin:0}
.presses{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
details.press>summary{list-style:none}
details.press>summary::-webkit-details-marker{display:none}
details.press[open]{flex-basis:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s3)}
details.press .bar{margin:6px 0 0}
.pchat{flex:1 1 340px;max-width:440px;min-width:0;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-3);display:flex;flex-direction:column}
.pchat-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.pchat-head h2{margin:0}
.pchat-list{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s4);max-height:560px;overflow:auto}
.pmsg{display:flex;gap:10px}
.pmsg.reply{margin-left:22px}
.pmsg.new .pmsg-b{border-left:3px solid var(--accent);padding-left:8px}
.pmsg-i{flex:none;width:30px;height:30px;border-radius:var(--r-pill);background:var(--accent-ink);color:var(--paper);display:grid;place-items:center;font-weight:700}
.pmsg-b{min-width:0}
.pmsg-b .b{margin-top:2px;white-space:pre-wrap;line-height:1.45}
.ptask{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.pchat>.compose{border-top:1px solid var(--line);padding:var(--s3) var(--s4);margin:0}
.pchat>.alert{margin:var(--s3) var(--s4) 0}
.pchat-mine{margin:var(--s2) var(--s4) 0}
/* ---- Warehouse > Inventory, the sheet (the owner's W1 design, 2026-10-12; warehouse/sheet.html) ---- */
.wtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));align-items:start}
.wtiles>.block{min-width:0}
.wdonut .dn-wrap{position:relative;width:150px;height:150px;margin:0 auto var(--s3)}
.wdonut svg{width:150px;height:150px;transform:rotate(0deg)}
.wdonut svg circle{fill:none;stroke-width:6}
.wdonut svg .dn-track{stroke:var(--line-2)}
.wdonut svg .t-bad{stroke:var(--bad)}.wdonut svg .t-warn{stroke:var(--warn)}.wdonut svg .t-fair{stroke:#8DBF9E}.wdonut svg .t-ok{stroke:var(--ok)}.wdonut svg .t-muted{stroke:var(--ink-3)}
.dn-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dn-mid b{font-size:20px;font-weight:700}.dn-mid span{font-size:var(--fs-micro);color:var(--ink-3)}
.dn-legend{display:grid;gap:3px}
.dn-legend a{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:var(--fs-small);color:var(--ink);text-decoration:none;padding:2px 4px;border-radius:var(--r-1)}
.dn-legend a:hover,.dn-legend a.on{background:var(--accent-soft)}
.dn-legend b{font-family:var(--mono);font-weight:500;text-align:right}.dn-legend em{font-style:normal;color:var(--ink-3);font-size:var(--fs-micro)}
.sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.sw.t-bad{background:var(--bad)}.sw.t-warn{background:var(--warn)}.sw.t-fair{background:#8DBF9E}.sw.t-ok{background:var(--ok)}.sw.t-muted{background:var(--ink-3)}
.wbars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:4px}
.wbars.short{height:120px}
.wbar{flex:1 1 0;min-width:30px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;text-decoration:none;color:var(--ink);position:relative}
.wbar .v{font:500 var(--fs-micro) var(--mono);text-align:center;white-space:nowrap;color:var(--ink-2)}
.wbar .b{display:block;min-height:2px;border-radius:3px 3px 0 0;background:var(--accent)}
.wbar .d{display:block;min-height:0;background:var(--bad);max-height:30%}
.wbar .l{font-size:var(--fs-micro);text-align:center;color:var(--ink-3);border-top:1px solid var(--line);padding-top:2px}
.wbar.t-bad .b{background:var(--bad)}.wbar.t-warn .b{background:var(--warn)}.wbar.t-fair .b{background:#8DBF9E}
.wbar.on .l,.wbar.now .l{color:var(--ink);font-weight:700}
.wbar.now .b{background:var(--ink-2)}
@media (max-width:700px){.wbtns{justify-content:flex-start}}
.wfind{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.wfind form.bar{margin:0;flex-wrap:nowrap}
.wfind input[type=search]{width:min(100%,300px)}
.wsheet{--pic:56px}
.wsheet .tbl{width:auto}
.wsheet td.product{min-width:260px;max-width:360px}
.wsheet td.opener{padding:8px 0 0;text-align:center;white-space:nowrap}
.wsheet td.opener details{display:inline-block}
.wsheet td.product .pc-t{font-size:var(--fs-small)}
.wsheet td .sub{font-size:var(--fs-micro);color:var(--ink-2);white-space:nowrap}
.wsheet td.when.t-bad{background:var(--bad-soft)}.wsheet td.when.t-bad b,.wsheet td.when.t-bad .sub{color:var(--bad-ink)}
.wsheet td.when.t-warn{background:var(--warn-soft)}.wsheet td.when.t-warn b,.wsheet td.when.t-warn .sub{color:var(--warn-ink)}
.wsheet .tbl tr.wopen{display:none}
.wsheet .tbl tr:has(details.opener[open])+tr.wopen{display:table-row}
.unread{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:2px;vertical-align:top}
.lg{position:relative;width:26px;height:26px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--paper) center/18px 18px no-repeat}
.lg.off{filter:grayscale(1);opacity:.35}
.lg-amazon{background-image:url(/static/logo-amazon.svg)}.lg-walmart{background-image:url(/static/logo-walmart.svg)}.lg-ebay{background-image:url(/static/logo-ebay.svg);background-size:22px auto}
.lg b{position:absolute;top:-7px;right:-7px;min-width:15px;height:15px;padding:0 3px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font:600 10px/15px var(--mono);text-align:center}
.wsheet td[data-l="Selling"]{min-width:340px;max-width:560px;font-size:var(--fs-small)}.wsheet td[data-l="Selling"] .ln{flex-wrap:nowrap;align-items:flex-start}.wsheet td[data-l="Selling"] .ln>span:last-child{padding-top:3px}.wsheet td[data-l="Selling"]>div:last-child{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-2);font-weight:400}  /* Inventory's Selling column: a line per marketplace, then the one sentence (the owner's pick, 2026-11-01) */
details.wact{position:relative;display:inline-block}
details.wact>summary{list-style:none}details.wact>summary::-webkit-details-marker{display:none}
details.wact>summary::after{content:" \25BE"}
.wmenu{position:absolute;right:0;z-index:20;min-width:240px;margin-top:4px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-2);display:grid;gap:2px}
.wmenu>a,.wmenu>form>button{display:block;width:100%;text-align:left;font:inherit;font-size:var(--fs-small);padding:5px 8px;border:0;border-radius:var(--r-1);background:none;color:var(--ink);cursor:pointer;text-decoration:none}
.wmenu>a:hover,.wmenu>form>button:hover{background:var(--accent-soft)}
.wmenu form{margin:0}
.wexit{display:grid;gap:4px;padding:4px 0;border-top:1px solid var(--line-2)}
.wexit label{font-size:var(--fs-micro);color:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:6px}
.wexit input{width:120px;font-size:var(--fs-micro)}
@media (max-width:700px){.wsheet .tbl tr:has(details.opener[open])+tr.wopen{display:block}.wmenu{position:static}}
/* PO workflow > POs (the owner's canvas, 2026-10-24): six stage tiles that filter one table (the Orders sheet: .orow,
   the arrow, tr.ladder), the fold two boxes (the lines, the PO); a Draft PO's lines under its own row */
.potiles{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:900px){.potiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pobar>form{flex:1 1 360px}
.polist col.c-open{width:32px}.polist col.c-name{width:170px}.polist col.c-supplier{width:120px}.polist col.c-stage{width:120px}
.polist col.c-lines{width:50px}.polist col.c-units{width:60px}.polist col.c-ordered,.polist col.c-invoiced{width:80px}
.polist col.c-paidamt{width:70px}.polist col.c-terms{width:120px}.polist col.c-eta{width:90px}.polist col.c-next{width:100px}
.polist .pofold .tbl{table-layout:auto;width:100%}
.polist td .sub{font-size:var(--fs-small);color:var(--ink-2)}
.polist td .btn{white-space:nowrap}
.pofold{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.pofold .kv>span:nth-child(odd){color:var(--ink-3)}
.pofold input.cell{width:72px}
@media (max-width:900px){.pofold{grid-template-columns:minmax(0,1fr)}}

/* Cases, board A (the owner's pick, 2026-10-13): the two tabs' grid is the COGS ledger row (.lrow) with the lister's typed
   cells; the create flow's three columns and its step line */
.lrow td[data-cell],.case [data-cell]{cursor:text}
.lrow td[data-cell]:hover .tcell,.case [data-cell]:hover .tcell{border-color:var(--grid-head);background:var(--field)}
.case .ladder .stage.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.tcell{display:inline-block;min-width:96px;max-width:100%;font-family:var(--mono);font-size:var(--fs-small);padding:3px 6px;border:1px solid var(--grid);border-radius:var(--r-1);background:var(--paper);white-space:normal}
.tcell.empty{border-style:dashed;color:var(--ink-3)}
.lrow tr.bad>td{background:var(--bad-soft)}
.wiz{display:flex;gap:6px;margin:0 0 10px;font-size:var(--fs-small)}
.wiz span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-3)}
.wiz i{font-style:normal;font-weight:700}
.wiz .on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.wiz .done{color:var(--ok-ink);background:var(--ok-soft);border-color:var(--ok)}
@media (max-width:700px){.create3{grid-template-columns:minmax(0,1fr)}}


.bar input[name=q].w-320{flex:0 0 auto}

/* the owner's Home (the slim Home, 2026-10-24: five tiles and five charts, hq/web/home_figures.py, home_owner.html): the
   title line's chip and day switch, the toggle switch (a checkbox styled as the knob, .autosubmit reloads the page),
   a chart card's right side, a donut beside its table, the small charts' lines and bars, the seven-day cards */
.head>.chip{margin-left:var(--s2)}
.head>.switch{margin-left:auto}
.switch{display:inline-flex;margin:0;position:relative}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch span{display:inline-flex;align-items:center;height:24px;padding:0 10px 0 28px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font:600 var(--fs-micro) var(--mono);letter-spacing:.06em;text-transform:uppercase;position:relative;cursor:pointer;white-space:nowrap}
.switch span::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked+span{background:var(--accent);padding:0 28px 0 10px}
.switch input:checked+span::before{left:auto;right:3px}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.chartbox h3 .push{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.chartbox h3 .push a.more{font-size:var(--fs-small);font-weight:600}
.chartbox h3>a.more{margin-left:auto;font-size:var(--fs-small);font-weight:600}
.charts>.wide{grid-column:1/-1}
.chartbox .empty{margin:0}
.stat .s.bad{color:var(--bad-ink)}.stat .s.ok{color:var(--ok-ink)}
.donut.beside{flex-direction:row;align-items:center;gap:var(--s4);flex-wrap:wrap}
.donut.beside svg{flex:0 0 140px;max-width:140px}
.donut.beside figcaption{flex:1 1 240px;min-width:0}
.donut.beside .tbl{width:100%}
.donut .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--hc,var(--ink-3))}
.hc-ch-gg{--hc:var(--ch-gg)} .hc-ch-katy{--hc:var(--ch-katy)} .hc-ch-home{--hc:var(--ch-home)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.chart .ln.dash{stroke:var(--ink-3);stroke-dasharray:4 3;stroke-width:1.5}
.chart .now{stroke:var(--ink-3);stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.chart .cv.neg{fill:var(--bad-ink)}
.chartbox .cards.wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}  /* the seven-day cards, one a place; one across on a phone */
.chartbox .cards.wide h4{font-size:var(--fs-body);margin:0 0 var(--s2);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.chartbox .cards.wide h4 b{font-family:var(--mono);font-size:var(--fs-small)}
.chartbox .cards.wide .bar{fill:var(--hc,var(--accent));opacity:.45}
.chartbox .cards.wide .bar.latest{opacity:1}
/* Home's grid (the owner, 2026-10-26: "the homepage is still a mess"): three equal columns from 1500 px (row one the
   orders, the revenue by hour, the profit; row two the stock ring and the week, which spans two), two under 1500 (the
   week takes the row), one under 900. The cards of a row share its height; a chart fills its card's width and the
   height left (home_figures draws about 600 by 260); a donut card centres its ring and table, every cell on one line */
.charts.home{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.charts.home>.chartbox{display:flex;flex-direction:column;min-width:0}
.charts.home>.chartbox>.chart,.charts.home .cards.wide .chart{flex:1 1 auto;min-height:0;max-height:none}
.charts.home>#stock-week{grid-column:1/-1}
.charts.home .cards.wide{flex:1 1 auto;grid-template-columns:repeat(3,minmax(0,1fr))}
.charts.home .cards.wide.four{grid-template-columns:repeat(4,minmax(0,1fr))}  /* the home shelf's card beside the three */
.charts.home .cards.wide>div{display:flex;flex-direction:column;min-width:0}
.charts.home .donut.beside{flex:1 1 auto;justify-content:center}
.charts.home .donut.beside figcaption{flex:1 1 auto}  /* as wide as its table: it wraps under the ring when the card cannot hold both */
.charts.home .donut.beside .tbl th,.charts.home .donut.beside .tbl td{padding:4px 6px;white-space:nowrap}
@media (min-width:1500px){.charts.home{grid-template-columns:repeat(3,minmax(0,1fr))}.charts.home>#stock-week{grid-column:span 2}}
@media (max-width:900px){.charts.home,.charts.home .cards.wide,.charts.home .cards.wide.four{grid-template-columns:minmax(0,1fr)}.charts.home .donut.beside{flex-direction:column}}
/* Repricer > Prices, the board (the owner's canvas, approved 2026-10-25, prices-canvas/Main.dc.html): the title, the
   channel pills and Find on one line; the saved views six a row; the state and sort pills; one flat table the window's
   width that scrolls sideways inside its own box when narrow; the fold's four columns. */
.head:has(~.views) h1{flex:0 1 auto}
.head:has(~.views)>form{margin-left:auto}
.views{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 var(--s3)}
.view{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--accent);border-radius:var(--r-2);background:var(--paper);color:var(--accent-ink);text-decoration:none;font-size:var(--fs-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view b{font-weight:400;font-size:var(--fs-micro);color:var(--ink-3)}
.view.on{background:var(--accent);color:#fff}.view.on b{color:rgba(255,255,255,.8)}
.views+.bar{gap:8px}.views+.bar>.filter:first-of-type{margin-right:auto}
.scroll.board{overflow-x:auto}
.board .tbl td{vertical-align:top}
.board .tbl th{position:static;letter-spacing:.03em;white-space:normal}
.board .tbl :is(th,td){padding:6px}
.board td.band input.cell{width:64px}
.board td.product{width:22%;min-width:220px;white-space:normal}
.board .pc{--pic:40px}
.board .pc-t a{color:var(--ink);text-decoration:none}
.board .mono{font-size:12px}
.board .tbl tr:has(details.opener[open])>td{background:var(--accent-soft)}
.board td.band .bar.in-cell{display:grid;grid-template-columns:1fr 1fr;gap:6px}
[data-band][data-hand] input.cell{border-color:var(--accent);background:var(--accent-soft)}
.board.money .tbl{min-width:1180px}  /* the money row: eleven cells, no sideways scroll at 1,280 */
.board.money .tbl td.product{width:auto;min-width:260px}
.board.money .tbl td :is(.sub,.chip){white-space:normal}
.board.money td.band input.cell{width:56px}
.board .tbl td.why{min-width:120px;max-width:200px;white-space:normal}
.board .tbl td.why .clip{margin-left:0;min-width:0;max-width:100%}  /* the guard's words, a hand band's date, Under breakeven: one line each, whole on hover */
.agelist{display:inline-block;list-style:none;margin:4px 0 0;padding:0;width:118px;font-size:var(--fs-micro);line-height:1.35;text-align:left}  /* the five-line age list (pricesrow1, canvas A 11/06) */
.agelist li{display:flex;justify-content:space-between;gap:var(--s2)}
.agelist li.agezero{color:var(--ink-3)}
.foldgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;font-size:var(--fs-small)}
.foldgrid h3{margin:0 0 6px;font:700 var(--fs-micro) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.foldgrid p{margin:0 0 4px}
@media (max-width:700px){.views{grid-template-columns:repeat(2,minmax(0,1fr))}.foldgrid{grid-template-columns:minmax(0,1fr)}}

/* The restock cadence (the owner, 2026-11-06): a .cad-<cadence> class sets --cad and --cad-soft; the chip reads them,
   so the cadence is one colour wherever it shows (the Order Book's rail and strip). */
.cad-weekly{--cad:var(--cad-wk);--cad-soft:var(--cad-wk-soft)}
.cad-biweekly{--cad:var(--cad-bw);--cad-soft:var(--cad-bw-soft)}
.cad-monthly{--cad:var(--cad-mo);--cad-soft:var(--cad-mo-soft)}
.cad-as_needed{--cad:var(--cad-an);--cad-soft:var(--cad-an-soft)}
.chip.cad{background:var(--cad-soft);color:var(--cad);font-weight:600;border-radius:var(--r-pill)}
/* Restock, the Order Book (the owner, 2026-11-06, drawing A with D's yellow cells; restock/book.html): the rail of
   suppliers (nav; a select on a phone), the strip of settings (header), the sheet and its foot (footer). .typed is a cell a person types:
   yellow in the warn-soft tone, opened by cells.js; a covered or screened row is .muted. */
.typed{display:inline-block;min-width:54px;padding:2px 6px;border:1px solid var(--warn);border-radius:var(--r-1);background:var(--warn-soft);color:var(--ink);font-family:var(--mono);font-size:var(--fs-small);font-weight:600;text-align:right;cursor:text;font-variant-numeric:tabular-nums}
.typed:focus{outline:none;box-shadow:0 0 0 2px var(--warn)}
.typed:empty::before{content:"\200b"}  /* the empty state: a blank yellow cell, "none typed" on hover */
.typed input.cell{width:78px}
.book{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s3);align-items:start}
.book>form{display:none;gap:var(--s2)}
.book>nav{border:1px solid var(--line);border-radius:var(--r-2);background:var(--paper);overflow:hidden}
.book>nav h3{margin:0;background:var(--ground);font:600 var(--fs-micro) var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding:5px 10px}
.book>nav div{display:grid;gap:3px;padding:7px 10px;border-top:1px solid var(--line);font-size:var(--fs-small)}  /* the name, then its due chip and count on the line under it (the owner, 2026-11-07: "5 to or" was cut in 230 px) */
.book>nav div.on{background:var(--accent-soft)}
.book>nav div a{display:flex;flex-wrap:wrap;align-items:center;gap:4px;text-decoration:none;white-space:nowrap}
.book>nav .chips{margin:0;gap:10px;align-items:center}  /* the rail chip: the side logos (their badges overhang), then the dollars (11/09 18:45) */
.book>div{display:grid;gap:var(--s2);min-width:0}
.book header,.book footer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--paper);padding:var(--s2) var(--s3);font-size:var(--fs-small)}
.book>div>footer{justify-content:space-between}
.book header h2{margin:0;font-size:var(--fs-section)}
.book header i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-1);background:var(--accent-soft);color:var(--accent);font-style:normal;font-weight:700}
.book header .k{color:var(--ink-3)}
.book header form{display:inline}
.book header button.chip{border:0;cursor:pointer;font:inherit}
.book tbody.muted>tr:first-child>td{color:var(--ink-3)}
.book td form{display:flex;gap:4px;margin-top:3px}
.book td form button{border:0;background:none;padding:0;font:inherit;font-family:var(--mono);font-size:var(--fs-micro);color:var(--accent);cursor:pointer;white-space:nowrap}
.book td[data-l="Glass?"] form{margin-top:0;gap:0}.book td form button.chip{padding:3px 6px;border:1px solid var(--line);border-radius:var(--r-1) 0 0 var(--r-1)}.book td form button.chip+button.chip{margin-left:-1px;border-radius:0 var(--r-1) var(--r-1) 0}.book td form button.chip.muted:hover{border-color:var(--ink-3);color:var(--ink)}.book td form button.chip.bad,.book td form button.chip.ok{position:relative;font-weight:700;border-color:currentColor}  /* Glass? yes / no: one joined pair of real buttons, the answer on file lit; compact, the whole sheet stays inside his 1,900 px window */
.book footer .budget{margin:0;flex:1}
.book footer .meter{min-width:120px;max-width:220px}
/* The Amazon row's two strips under the product (the owner, 2026-11-09; rows/_restock_line.html `strips`): Keepa's box
   90 days, drops, sellers, rival days and the box's sparkline; our units by month, this year dark beside last year. */
.book [data-ks]{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:3px;font-size:var(--fs-micro);color:var(--ink-3)}
.book [data-ks] .chart{width:90px;height:20px;max-height:20px}
.book [data-ks] rect{fill:var(--line)}
.book [data-ks] rect[data-yr]{fill:var(--accent)}
/* The sheet's widths (the owner, 2026-11-07 04:40: "I can't read the product line. Fix it."): the product the widest
   column, its name on two lines at most and its SKU chip whole on its own line; every number column a set width, so
   its words wrap or stay on one line inside it and never take the product's room; the Why chip wraps in its column.
   Under about 1,400 px the sheet scrolls sideways inside .scroll.wide with the caret, the picture and the product
   frozen on the left; the page never scrolls sideways. */
.book .tbl td.product{min-width:320px;max-width:none}
.book .tbl td.product .pc-ids .chip{white-space:nowrap}
.book .tbl td.num .sub{max-width:none}
.book .tbl td[data-l=Side]{width:76px;min-width:76px}
.book .tbl td[data-l="Glass?"]{width:72px;min-width:72px}
.book .tbl td[data-l="Sold 30 · 90"]{width:64px;min-width:64px}
.book .tbl td:is([data-l="On hand"],[data-l=Cover]){width:52px;min-width:52px}
.book .tbl td:is([data-l=Case],[data-l="Margin now"]){width:68px;min-width:68px}
.book .tbl td:is([data-l=Price],[data-l=Line]){width:76px;min-width:76px}
.book .tbl td[data-l=Cost]{width:92px;min-width:92px}
.book .tbl td[data-l=Cost] .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.book .tbl td[data-l=Order]{width:124px;min-width:124px}
.book .tbl td[data-l=Order] .sub{white-space:normal;line-height:1.35}  /* a Keepa wait's "would be 30 · go at 15% margin at the box" wraps in its 124 px: the sheet never leaves his 1,900 px window (11/10) */
.book .tbl td[data-l=Order] form{flex-wrap:wrap;column-gap:6px}
.book .tbl td[data-l=Why]{width:116px;min-width:116px}
.book .tbl td[data-l=Why] .chip{white-space:normal;line-height:1.35}
.book .tbl .rfold-car{width:30px;min-width:30px;max-width:30px}
.book .tbl .rfold-pic{width:52px;min-width:52px;max-width:52px}
@media (min-width:701px){
  .book .scroll.wide .tbl :is(.rfold-car,.rfold-pic,.product){position:sticky;z-index:1}
  .book .scroll.wide .tbl thead :is(.rfold-car,.rfold-pic,.product){z-index:3}
  .book .scroll.wide .tbl .rfold-car{left:0}
  .book .scroll.wide .tbl .rfold-pic{left:30px}
  .book .scroll.wide .tbl .product{left:82px;box-shadow:inset -1px 0 0 var(--grid-head)}
}
@media (max-width:700px){.book{grid-template-columns:minmax(0,1fr)}.book>nav{display:none}.book>form{display:flex}}
/* Sourcing's fold (the owner's canvas 2026-11-09 12:55, "compressed"; rows/_restock_line.html): the caret and the 40 px
   picture cells, then four panels on the ladder box (data-fold: Demand, Money, Order, Stock), each label and value
   pairs (dl); the Demand panel's 12 weeks as bars (data-wk), a div a week, its height the week's share of the
   busiest (data-h, computed). The foot's folded line of the lines not in the restock is details[data-off]. */
.rfold-car{width:26px;padding-right:0!important}
.rfold-pic{width:48px;--pic:40px}
.ladderbox[data-fold],.lrow .ladderbox[data-fold]{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);max-width:none}
/* an Amazon row's fold head (restock/_fold_keepa.html): the word over its line, the twelve checks in four columns
   (data-m the state), the short chart and the Keepa link under it; the Buy Box table and the notes stay on Lookup */
.ladderbox[data-fold]>[data-fk]{grid-column:1/-1;display:grid;grid-template-columns:180px minmax(0,1fr);gap:6px var(--s4)}
[data-fk]>:not([data-verdict],[data-checks]){grid-column:1/-1}
[data-verdict] b{display:block;font-size:24px;line-height:1}
[data-verdict] span{display:block;margin-top:4px;font:var(--fs-micro) var(--body);color:var(--ink-3)}
[data-verdict] b+span{margin-top:8px}
[data-verdict] .ok,[data-m=ok] b{color:var(--ok)}
[data-verdict] .warn,[data-m=warn] b{color:var(--warn)}
[data-verdict] .bad,[data-m=bad] b{color:var(--bad)}
[data-verdict] .muted{color:var(--ink-3)}
[data-checks]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--s4);margin:0;padding:0;list-style:none;font:var(--fs-micro)/1.5 var(--mono)}
[data-checks] li{min-width:0;display:grid;grid-template-columns:14px 82px minmax(0,1fr);align-items:start}  /* a long value wraps under itself, never an ellipsis */
[data-checks] b{color:var(--ink-3)}
[data-checks] span{color:var(--ink-3)}
[data-fk] .hc>:is(h3,.scroll),[data-fk] .hc>p.hint~p.hint{display:none}
[data-hc-short] .hc>.hint{margin:0;font-size:var(--fs-micro)}
.ladderbox[data-fold] .sub{margin:4px 0 0}
@media (max-width:900px){.lrow .ladderbox[data-fold],[data-checks]{grid-template-columns:repeat(2,minmax(0,1fr))}.ladderbox[data-fold]>[data-fk]{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.lrow .ladderbox[data-fold],[data-checks]{grid-template-columns:minmax(0,1fr)}[data-hc-short] .hc{display:block}}
.ladderbox[data-fold]>section{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);padding:6px var(--s3);min-width:0}
.ladderbox[data-fold] h4{margin:0 0 4px;font:600 var(--fs-micro) var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ladderbox[data-fold] dl{display:grid;grid-template-columns:auto 1fr;gap:0 10px;margin:0;font-size:var(--fs-small);line-height:1.3}
.ladderbox[data-fold] dt{color:var(--ink-3)}
.ladderbox[data-fold] dd{margin:0;font-variant-numeric:tabular-nums}
.ladderbox[data-fold] .tbl td{padding:2px 6px 2px 0;border:0;background:none}
/* Listings > eBay's row and fold (the owner's canvas A, 2026-11-07: "not this huge, no space between rows"; "table-wise
   like the Orders fold"): tight cells, the 40 px picture, four groups across */
#ebay-rows>tbody>tr>td{padding-block:4px;line-height:1.3}
#ebay-rows .pc-ids{margin-top:1px}
.ladderbox[data-fold=ebay]{grid-template-columns:repeat(4,minmax(0,1fr))}
.ladderbox[data-fold=ebay] .btns{margin-top:6px}
@media (max-width:900px){.ladderbox[data-fold=ebay]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ladderbox[data-fold=ebay]{grid-template-columns:minmax(0,1fr)}}
[data-wk]{display:flex;align-items:flex-end;gap:3px;height:24px;margin-top:4px}
[data-wk] div{flex:1;max-width:12px;min-height:2px;background:var(--accent);border-radius:2px 2px 0 0}
[data-wk] div[data-h="0"]{opacity:.3}
.book footer details[data-off]{flex-basis:100%;color:var(--ink-3);font-size:var(--fs-small)}
.book footer details[data-off]>summary{cursor:pointer}
/* Restock > Criteria (the owner, 2026-11-06 20:05: "I love this exact table the way it is"; restock/criteria.html): the
   ladder of doors, a green number on a grey spine, the question card left, the red out card right (the bar's yellow
   Paused card), the green "On the sheet", the quantity's facts (2026-11-09: live values, Keepa's signals a table).
   The page's parts are data-c inside [data-criteria]: one shape one page draws, no class of its own. */
[data-criteria]{max-width:980px;font-size:16px;line-height:1.45}
[data-criteria] h2{font-size:20px;margin:40px 0 14px;padding-top:16px;border-top:2px solid var(--line)}
[data-c=start]{display:flex;align-items:center;gap:14px;background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:17px}
[data-c=start] b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
[data-c=door]{display:grid;grid-template-columns:52px 1fr 1fr;gap:0 18px;align-items:stretch}
[data-c=n]{display:flex;flex-direction:column;align-items:center}
[data-c=n] span{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
[data-c=n] i{flex:1;width:2px;background:var(--line);min-height:28px}
[data-c=q]{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--paper)}
[data-c=q] b{display:block;font-size:18px;margin-bottom:4px}
[data-c=q] small,[data-c=fact] small{display:block;color:var(--ink-3);font-size:14px}
[data-c=out]{border-radius:12px;padding:14px 18px;background:var(--bad-soft);color:var(--bad);display:flex;flex-direction:column;justify-content:center}
[data-c=out] b,[data-c=hold] b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
[data-c=out] span,[data-c=hold] span{font-size:17px;font-weight:600}
[data-c=hold]{border-radius:12px;padding:14px 18px;background:var(--warn-soft);color:var(--warn);display:flex;flex-direction:column;justify-content:center}
[data-c=pass]{display:flex;align-items:center;gap:10px;margin:6px 0 6px 70px;color:var(--ok);font-weight:600}
[data-c=pass]::before{content:"";width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--ok)}
[data-c=go]{border-radius:12px;padding:16px 20px;background:var(--ok-soft);color:var(--ok);font-size:18px;font-weight:700;margin-left:70px}
[data-c=fact]{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0 0 70px;background:var(--paper)}
[data-c=fact] b{display:block;font-size:17px;margin-bottom:4px}
@media (max-width:720px){[data-c=door]{grid-template-columns:40px 1fr}[data-c=out],[data-c=hold]{grid-column:2}[data-c=pass],[data-c=go],[data-c=fact]{margin-left:0}[data-c=n] span{width:30px;height:30px}}