/* ============================================================================
AFTERSHOCK PC · INVENTORY & PRODUCTION — design system, fifth pass (2026-07-24)
Reference point: the polished inventory SaaS (Unleashed / inFlow / Cin7 Core).
White cards float on a soft cool-grey canvas; a white sidebar + topbar frame
it; ONE brand accent (Aftershock red) carries links, focus, primary acts and
the "you are here" state. Rounded, softly elevated, icon-led — friendly and
legible, not the old hairline-dense bench.
Type Geist (all UI; hierarchy = weight 800/700/600/500) with a modern
system fallback (Segoe UI Variable), never Trebuchet, never Inter.
Geist Mono is reserved for HASHES and payloads only — SKUs, serials
and money wear the sans with tabular figures, because every coding
mono slashes its zero and that reads as a defect on a picking sheet.
Base 14.5px: the 13.5px ramp was unreadable at 100% zoom.
Color two themes over one token set (:root = light, [data-theme=dark]).
Calm neutrals so the red reads premium, not alarming; soft-tinted
status pills (moss/ochre/rust/slate) for state.
Shape 9px controls / 14px cards, soft diffuse shadows, rounded pills.
Rules one accent · tabular numerals for data · comfortable density.
Contrast: text pairs checked ≥ 4.5:1 on both grounds.
========================================================================== */
:root {
/* Canvas & surfaces — soft cool neutrals; white cards float on a tinted room */
--bg: #f4f6fa; /* the room — soft cool grey */
--panel: #ffffff; /* cards, sidebar, topbar */
--panel2: #eef1f6; /* wells, hovers */
--panel3: #f7f9fc; /* table-head tint, subtle wells */
--border: #e6e9f0; /* soft hairline */
--border-strong: #d3d8e2; /* control edges */
--text: #171a23; /* rich ink, faint cool cast */
--muted: #69707f; /* cool grey */
--faint: #99a1b1; /* placeholders, resting icons */
--accent: #d51f27; /* Aftershock red — links, focus, the ONE accent */
--accent-hover: #b81820; /* darker for text-on-wash + button hover */
--accent-deep: #b3141c; /* primary button fill */
--accent-ink: #ffffff; /* text on red fills */
--accent-wash: #fdeceD; /* soft red tint — active nav, module icons */
--accent-wash-bd: #f6d3d5;
--ink-btn: #171a23; /* inverted slips (toast) */
--ink-btn-ink: #f4f6fa;
--ok: #1c7d43; --ok-bg: #e6f6ec; --ok-bd: #b7e2c5; /* moss */
--warn: #8a6100; --warn-bg: #fbf0d5; --warn-bd: #eed699; /* ochre */
--bad: #c62828; --bad-bg: #fdeaea; --bad-bd: #f3c8c8; /* rust */
--bad-solid: #d32f2f;
--info: #1f5fbf; --info-bg: #e8f0fd; --info-bd: #c1d6f4; /* slate */
--chip: #eef1f6;
--shadow: rgba(23, 27, 42, 0.10);
--shadow-sm: 0 1px 2px rgba(23,27,42,0.06), 0 1px 1px rgba(23,27,42,0.04);
--shadow-md: 0 6px 20px rgba(23,27,42,0.09), 0 2px 6px rgba(23,27,42,0.05);
--shadow-lg: 0 20px 46px rgba(23,27,42,0.20);
--ring: 0 0 0 3px rgba(213,31,39,0.16);
--overlay: rgba(18, 20, 30, 0.44);
--selection: #fbd7d9;
--accent-wash-solid: #fdeced;
/* Geist (Vercel, 2023) — drawn for interfaces and dense data rather than for
marketing pages, with numerals that line up. Chosen over the usual default
because its zero is a plain oval: the previous mono slashed its zero, which
is a coding convention and reads as a defect on a picking sheet.
Geist Mono is kept for hashes only, where character-cell alignment is the
whole point; SKUs and serials now wear the sans with tabular figures. */
/* Geist first, then the CJK faces (2026-09-21). Geist has no Chinese glyphs,
so without these Windows substitutes something at random and the Chinese
comes out in a different face on every machine. Latin still renders in
Geist — a browser falls through this list PER GLYPH, not per string. */
--cjk: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC";
--sans: "Geist", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", var(--cjk), Arial, sans-serif;
--mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, var(--cjk), monospace;
--r-sm: 6px;
--r: 9px;
--r-lg: 14px;
--r-pill: 999px;
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #0e1015; /* soft near-black, faint blue cast */
--panel: #171a21; /* cards, sidebar, topbar */
--panel2: #1f232d;
--panel3: #13161c;
--border: #262b36;
--border-strong: #363c49;
--text: #e7e9ee; /* cool light ink */
--muted: #99a1b1;
--faint: #666e7e;
--accent: #ff5158; /* signal red, brightened for dark ground */
--accent-hover: #ff6f75;
--accent-deep: #d81f2a;
--accent-ink: #ffffff;
--accent-wash: #2a1517; /* deep red tint */
--accent-wash-bd: #4a2024;
--ink-btn: #e7e9ee; /* inverted slips flip to paper */
--ink-btn-ink: #14161c;
--ok: #6ed49a; --ok-bg: #12251a; --ok-bd: #274632;
--warn: #e6bd63; --warn-bg: #2a2210; --warn-bd: #4f3f1c;
--bad: #ff8a8a; --bad-bg: #2c1416; --bad-bd: #562227;
--bad-solid: #c0392f;
--info: #7fb0f2; --info-bg: #121d2e; --info-bd: #2a3f5f;
--chip: #1f232d;
--shadow: rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 6px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
--shadow-lg: 0 20px 46px rgba(0,0,0,0.6);
--ring: 0 0 0 3px rgba(255,81,88,0.24);
--overlay: rgba(0, 0, 0, 0.6);
--selection: #4a2024;
color-scheme: dark;
}
* { box-sizing: border-box; }
/* `hidden` MUST WIN. Any component rule that sets `display` on an element the JS
later hides (`.pick-search { display: flex }`, `.pick-chosen { display: flex }`)
silently defeats the attribute — which is how the product picker ended up
showing an empty search box under every line it had already filled. One rule
here instead of remembering it at every call site. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
/* UI SCALE. One number, and the hook for a density preference if that ever
becomes a setting. It was 0.9 — one Chrome notch shrunk into the stylesheet —
and that was a mistake twice over: everything read small, and because `zoom`
multiplies the CSS pixel, every px cap in this file (page width, breakpoints)
silently bound ~11% earlier than its number said. Browser zoom is the user's
control, not ours; we ship at 1 and let them turn the dial. */
body { zoom: 1; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 14.5px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-optical-sizing: auto;
}
::selection { background: var(--selection); }
/* Codes (SKU, serial, id) wear the SANS with tabular figures and a little extra
tracking — they read as codes and their digits still line up, without the
slashed zero every coding mono ships. True hashes keep a real monospace,
where per-character alignment is the entire point. */
.num { font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; letter-spacing: 0.01em; font-weight: 500; }
/* A SKU IS SELECTED BY ITSELF (Aaron B, 2026-09-22: "double-clicking a SKU also
highlights the surrounding product/category text"). A code sits inside a cell
that also carries a name and a category, and a double-click takes a word — so
grabbing a SKU to paste into a supplier's site took a careful drag every
time, fifty times a day. `user-select: all` means one click takes the WHOLE
code and nothing either side of it. Codes only: a payload dump is text to
read, not an identifier to lift, so it keeps ordinary word selection. */
td .mono, th .mono, .kicker + .mono, .pd-title .mono { user-select: all; -webkit-user-select: all; }
.ledger-raw, .ledger-raw .mono { user-select: text; -webkit-user-select: text; }
.hash, code, pre { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* ---- Headings inside content ----
Seventy `
`s in this app ran on the browser default, `1.17em`, which at
14.5px body is 16.965px and inside a report head 21.75px. Those are type
sizes nobody chose, and they were showing up in the audit as fractional
leaf sizes. Declared here, near the top, ON PURPOSE: every namespaced rule
later in the file (`.danger-zone h3` red, `.ins-chart-head h3` 13px) has the
same specificity and therefore still wins on source order. */
.card h3, .card-head h3 { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.004em; margin: 0 0 8px; }
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
/* ---- Sidebar: brand, then the module tree — icon-led, always all six ---- */
.sidebar {
width: 238px; flex-shrink: 0;
background: var(--panel); border-right: 1px solid var(--border);
display: flex; flex-direction: column;
padding: 14px 14px 16px; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
/* The rail owns one viewport and scrolls INSIDE it (align-self kills the
flex stretch that would otherwise defeat sticky). Without this the aside
grows to the height of the page, and "bottom left" means the bottom of a
3000px document — the theme flip and the user chip were only reachable by
scrolling the whole app to its end. */
align-self: flex-start; position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.sidebar::-webkit-scrollbar { width: 10px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid var(--panel); }
.sidebar::-webkit-scrollbar-track { background: transparent; }
/* The QUAKE mark (owner, 2026-09-24), then a hairline separating brand from the
tree. The mark is stacked — the ring over the word — so it is sized by its
height; the ring and letters take the theme ink, the arrow and dot stay red. */
.brand { display: block; padding: 6px 8px 14px; margin-bottom: 9px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.brand .quake-mark { height: 60px; width: auto; display: block; }
#nav { display: flex; flex-direction: column; flex: 1; gap: 2px; }
/* Every nav row: icon slot + label, comfortable target, rounded */
#nav a {
display: flex; align-items: center; gap: 11px;
padding: 8px 11px; border-radius: var(--r);
color: var(--muted); text-decoration: none;
font-size: 14.5px; font-weight: 500; line-height: 1.25;
transition: background 0.12s ease, color 0.12s ease;
}
#nav a:hover { color: var(--text); background: var(--panel2); }
#nav .nav-ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--faint); transition: color 0.12s ease; }
#nav .nav-ic svg { width: 20px; height: 20px; }
#nav a:hover .nav-ic { color: var(--muted); }
#nav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Home — the top entry */
#nav a.nav-home { color: var(--text); font-weight: 600; margin-bottom: 2px; }
#nav a.nav-home.active { color: var(--accent); background: var(--accent-wash); }
#nav a.nav-home.active .nav-ic { color: var(--accent); }
/* Module rows: icon + name + disclosure chevron; open module goes ink + red icon.
Clicking a module navigates to its entry page — the router re-renders the
tree with that module expanded, so there's no accordion state to manage. */
#nav a.nav-mod { margin-top: 7px; color: var(--muted); font-weight: 600; }
#nav a.nav-mod .nav-label { font-size: 14.5px; font-weight: 700; letter-spacing: -0.006em; }
#nav a.nav-mod .chev { flex: none; width: 15px; height: 15px; color: var(--faint); transition: transform 0.16s ease, color 0.12s ease; }
#nav a.nav-mod .chev svg { width: 15px; height: 15px; }
#nav a.nav-mod.open { color: var(--text); }
#nav a.nav-mod.open .nav-ic { color: var(--accent); }
#nav a.nav-mod.open .chev { transform: rotate(90deg); color: var(--muted); }
/* Sub-pages: indented under the open module, no icon, accent pill when active */
#nav a.nav-sub { padding: 6px 11px 6px 43px; font-size: 14px; font-weight: 500; color: var(--muted); }
#nav a.nav-sub:hover { color: var(--text); background: var(--panel2); }
#nav a.nav-sub.active { color: var(--accent); background: var(--accent-wash); font-weight: 600; }
/* A live count on a nav row — earned by pages where the number is the reason to
click. Red because every one of them is a decision nobody has made yet. */
#nav a.nav-sub .nav-count {
margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
background: var(--bad-bg); border: 1px solid var(--bad-bd); color: var(--bad);
border-radius: var(--r-pill); padding: 0 7px; line-height: 17px;
}
#nav a.nav-sub .nav-count[hidden] { display: none; }
#nav a.disabled { color: var(--faint); cursor: default; pointer-events: none; }
#nav a.disabled:hover { background: none; }
.soon { margin-left: auto; font-size: 10px; font-weight: 600; background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 8px; color: var(--muted); }
/* ---- Top bar ---- */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 58px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--panel); gap: 20px; }
.integrity { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-search { position: relative; flex: 1; max-width: 520px; }
.topbar-search input { width: 100%; background: var(--panel2); border: 1px solid transparent; border-radius: var(--r-pill); padding: 9px 16px; color: var(--text); font: inherit; font-size: 14px; transition: background .12s, border-color .12s, box-shadow .12s; }
.topbar-search input::placeholder { color: var(--faint); }
.topbar-search input:focus { outline: none; background: var(--panel); border-color: var(--accent); box-shadow: var(--ring); }
.search-results { position: absolute; top: 48px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-height: 62vh; overflow-y: auto; display: none; z-index: 40; padding: 6px; }
.search-results.show { display: block; }
/* WHAT KIND OF THING each block of results is (owner, 2026-09-27: "Systems",
"Pick list" were hard to see). Full text colour, heavier, with a rule above
every block after the first, so the eye finds the group before the rows. */
.sr-group { font-size: 11.5px; font-weight: 800; color: var(--text); padding: 11px 10px 5px; text-transform: uppercase; letter-spacing: .06em; }
.sr-item + .sr-group { border-top: 1px solid var(--border); margin-top: 6px; }
.sr-group .muted { font-weight: 600; letter-spacing: 0; }
.sr-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 11px; border-radius: var(--r); color: var(--text); text-decoration: none; font-size: 14px; }
/* The keyboard cursor is a CLASS, not :hover. With both, wherever the mouse
happens to be resting fights the arrow keys and two rows light up at once. */
.sr-item:hover, .sr-item.on { background: var(--panel2); }
.sr-item .sr-text { min-width: 0; flex: 1; }
.sr-item .sr-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item .sr-sub { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item .sr-type { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Never truncate in silence: this row says how much was left out and where. */
.sr-more { display: block; padding: 9px 11px; margin-top: 4px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; text-decoration: none; }
.sr-more:hover, .sr-more.on { background: var(--panel2); color: var(--text); }
.sr-empty { padding: 14px; color: var(--muted); font-size: 14px; }
/* The full results page */
/* R-UI-1: the results were nine page-wide boxes stacked down the screen, one
of them around a single row. Groups flow instead — a grid, so a two-hit
group is a two-hit-sized box and reading order stays the server's relevance
order (row-major), which CSS `columns` would have scrambled. */
/* min() inside the minmax, because a bare 430px track does not shrink: on a
375px phone the grid kept its 430 and pushed the page 69px sideways. */
.sr-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr)); gap: 0 14px; align-items: start; }
.sr-basis { max-width: 74ch; margin: 4px 0 0; }
.sr-hit-foot { padding: 9px 2px 2px; color: var(--muted); font-size: 12.5px; }
/* WAS `.sp-row`, which specs.js also owns — and the specs form's two-column
grid is 2,400 lines further down the file, so it won the tie and had been
laying out every global-search result. `sr-` is the search surfaces' own
prefix; the dropdown already uses it. */
.sr-hit { display: flex; align-items: baseline; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.sr-hit:first-of-type { border-top: 0; }
.sr-hit:hover { background: var(--panel2); }
/* On the page the sub is a second LINE, not a tail on the first: a SKU run on
after the product name reads as part of the name. */
.sr-hit .sr-text { min-width: 0; flex: 1; }
.sr-hit .sr-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.sr-count { margin: 4px 0 0; }
.search { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 8px 12px; color: var(--text); font: inherit; min-width: 240px; margin-bottom: 12px; }
.search::placeholder { color: var(--faint); }
.search:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* NO PAGE-WIDTH CAP. This was 1340px, then 1880px, and both were the same bet:
guess the widest useful page and letterbox every monitor bigger than the
guess. On a 2560 screen the 1880 cap parked ~600px of dead grey to the right
of every screen in the app. A wide monitor is bought to be used. Width is now
governed where it belongs — per component, in ch/minmax — so tables and
boards run edge to edge while prose and lone inputs stay a readable measure. */
.view { padding: 26px 32px 90px; width: 100%; max-width: none; }
/* ---- Page head: kicker + heavy title, hairline under ---- */
/* THE RED KICKER IS MASTHEAD-ONLY. The one accent was doing decoration on 24
in-card tiles, and a small-caps eyebrow repeated on every box is the AI-look
tell itself. A hue that means "you are here / this is the act" cannot also
mean "this box has a label". Accent and the wide 0.11em tracking now belong
to the page masthead; anywhere else a kicker reads as the quiet label it
actually is. A masthead this rule misses goes muted — quiet, never wrong. */
.kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.page-head .kicker, .cat-detail-head .kicker { letter-spacing: 0.11em; color: var(--accent); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.page-head h1 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 3px 0 0; }
.page-head .muted { font-size: 14px; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---- Stat tiles: the first one dominates (hierarchy = an opinion) ---- */
.stats, .stats4, .tr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
/* R-UI-1: a single tile is the width of a tile. `auto-fit` stretches one child
across the whole page, which is a statistic pretending to be a banner. */
.stats4.one { grid-template-columns: minmax(190px, 300px); }
/* A form or a list that is three fields wide should be three fields wide. */
.card.narrow, .modal.narrow { max-width: 620px; }
.stats > .stat-card:first-child { grid-column: span 2; }
.stats > .stat-card:first-child .stat-num { font-size: 37px; }
/* …but a strip of five is not a strip of four. The double-width first tile is
hierarchy while there is room for it; at five tiles it is six cells in a
five-column grid, and the last tile drops onto a row by itself, which reads
as a mistake rather than as an opinion. The kit view of a product record is
where this showed up. Four tiles remains the number to aim for. */
.stats:has(> .stat-card:nth-child(5)) > .stat-card:first-child { grid-column: auto; }
.stats:has(> .stat-card:nth-child(5)) > .stat-card:first-child .stat-num { font-size: 28px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 17px 14px; box-shadow: var(--shadow-sm); }
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat-num { font-family: var(--sans); font-size: 28px; font-weight: 700; letter-spacing: -0.022em; margin-top: 3px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
/* ---- Home: the module switchboard ---- */
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 1100px) { .mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mod-grid { grid-template-columns: 1fr; } }
.mod-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 17px 18px 15px; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: border-color 0.13s, box-shadow 0.13s, transform 0.13s; }
.mod-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mod-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-wash); color: var(--accent); display: grid; place-items: center; margin-bottom: 12px; }
.mod-ic svg { width: 21px; height: 21px; }
.mod-name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); text-decoration: none; }
.mod-card:hover .mod-name { color: var(--accent); }
.mod-job { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.mod-stat { font-size: 13px; color: var(--muted); margin-top: 9px; }
.mod-stat:empty { display: none; }
.mod-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 13.5px; }
.mod-links a { text-decoration: none; font-weight: 500; }
.mod-links a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ---- Home dashboard: sales KPI row + stock-on-hand bars ----
Stat tiles, not charts: three headline numbers whose job is magnitude, so
they get figures, not marks. The bars below use ONE hue (the brand accent)
because the reader is comparing sizes across warehouses, not telling
identities apart — a colour each would imply a meaning that isn't there. */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 6px; }
@media (max-width: 900px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 18px 14px; box-shadow: var(--shadow-sm); }
/* The twin of `.stat-label`: one tile-label style across both facts strips. */
.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
/* Proportional figures: at display size tabular-nums makes a number look loose. */
.kpi-value { font-family: var(--sans); font-size: 32px; font-weight: 800; letter-spacing: -0.028em; line-height: 1.12; margin-top: 5px; font-variant-numeric: normal; }
.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 13px; }
.kpi-basis { font-size: 12.5px; margin: 0 2px 22px; }
.delta { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); font-weight: 500; }
/* The margin strip (0077) — sell, cost, margin, margin % for one order line.
Hairline grid rather than four cards: these four numbers are ONE sentence
and spacing them apart invites reading them as unrelated stats. `.at-risk`
is the ochre a swap leaves behind until sales answers it; `.unknown` is the
deliberately quieter type an "at least / at most" figure gets, because a
bound is not a measurement and must not be dressed as one. */
.mgn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.mgn-cell { background: var(--panel); padding: 11px 14px 10px; min-width: 0; }
.mgn-cell.hero { background: var(--panel2, var(--panel)); }
.mgn-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.mgn-num { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 3px; line-height: 1.15; }
.mgn-num.unknown { color: var(--muted); font-weight: 600; font-size: 18px; }
.mgn-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.mgn.at-risk { border-color: var(--warn-bd); }
.mgn.at-risk .mgn-cell.hero { background: var(--warn-bg); }
@media (max-width: 760px) { .mgn { grid-template-columns: 1fr 1fr; } }
/* The order's margin, as one line under its total. Cost, margin and percentage
are a footnote to the total — the same size as it, on the same row — not a
panel competing with the lines above them. */
.tot-margin { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 6px 20px;
padding: 0 14px 13px; font-variant-numeric: tabular-nums; }
.tot-part { display: inline-flex; align-items: baseline; gap: 7px; }
/* Sentence case, like every other tile label (P0-1): uppercase is for `thead th`
and the masthead kicker only. */
.tot-k { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
.tot-v { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.tot-note { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--muted); }
.tot-margin.at-risk .tot-v { color: var(--warn); }
/* Review-and-price: the three answers to a swap, as pickable rows. */
.opt { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; width: 100%;
border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px;
cursor: pointer; background: var(--panel); text-align: left; font: inherit; color: inherit; }
.opt:hover { border-color: var(--border-strong); }
.opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt-title { font-weight: 600; font-size: 14px; }
.opt-desc { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.opt-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; white-space: nowrap; }
.opt-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); margin-top: 3px; }
.opt.sel .opt-radio { border-color: var(--accent); border-width: 5px; }
.wh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wh-head h2 { margin: 0; }
.sub { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; margin-top: 3px; }
.kpi-total { font-family: var(--sans); font-size: 26px; font-weight: 800; letter-spacing: -0.025em; margin: 12px 0 16px; }
.kpi-total .muted { font-size: 13.5px; font-weight: 500; letter-spacing: 0; }
.wh-pick { position: relative; }
.wh-pick > summary { list-style: none; cursor: pointer; }
.wh-pick > summary::-webkit-details-marker { display: none; }
.wh-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 264px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-md); padding: 6px; }
.wh-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; }
.wh-opt:hover { background: var(--panel2); }
.wh-opt input { margin: 0; flex: none; }
.wh-menu-foot { display: flex; gap: 6px; padding: 7px 6px 3px; margin-top: 4px; border-top: 1px solid var(--border); }
.wh-bars { display: flex; flex-direction: column; gap: 2px; }
.wh-row { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 14px; padding: 7px 8px; border-radius: var(--r-sm); }
.wh-row:hover, .wh-row:focus-visible { background: var(--panel2); outline: none; }
.wh-name { font-size: 14px; min-width: 0; }
.wh-name .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Thin mark, square at the baseline, 4px rounded at the data end. */
.wh-track { height: 10px; background: var(--panel2); border-radius: 0 5px 5px 0; }
.wh-fill { height: 100%; background: var(--accent-deep); border-radius: 0 4px 4px 0; min-width: 2px; transition: width 0.18s ease; }
.wh-val { text-align: right; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wh-val .sub { font-weight: 500; }
/* Stock between two of our own branches. Not an alarm — it is normal and it is
ours — so it reads as a quiet annotation, never in the destructive red. */
.wh-transit { margin: -2px 0 10px; line-height: 1.45; max-width: 74ch; }
.wh-transit b { color: var(--text); font-variant-numeric: tabular-nums; }
.wh-coming { white-space: nowrap; }
@media (max-width: 720px) { .wh-row { grid-template-columns: 110px 1fr; } .wh-row .wh-val { grid-column: 2; text-align: left; } }
/* ---- The shared filter bar (util.js filterBar/wireFilters) ----
Every filter on screen with its own label, on one wrapping row, with the
active ones repeated as removable chips underneath. The chips are not
decoration: the standing complaint is not being able to see what a list is
hiding, and a chip both says it and lifts it in one click. */
.fb { padding: 11px 13px; }
.fb-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.fb-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.fb-f > span { color: var(--muted); font-weight: 600; letter-spacing: 0.01em; }
.fb-f select, .fb-f input { width: auto; min-width: 130px; max-width: 220px; }
.fb-search { position: relative; flex: 1 1 260px; min-width: 220px; display: flex; align-items: center; }
.fb-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.fb-search input { width: 100%; padding-left: 32px; }
.fb-reset.on { border-color: var(--accent-deep); color: var(--accent-deep); }
.fb-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.fb-chips:empty { display: none; }
/* Compact mode reuses the ERP controls; results alone reload beneath this stable header. */
html:has(.prt) { scrollbar-gutter: stable; }
.fb.fb-compact { padding:0; min-width:0; max-width:100%; }
.fb-compact .fb-list-card > .card-head { padding:12px 16px !important; min-width:0; gap:12px; }
.fb-compact .fb-search-tools { display:flex; align-items:center; gap:10px; flex:1 1 180px; min-width:0; max-width:670px; margin-inline:auto; }
.fb-compact .fb-search { flex:1 1 120px; min-width:0; }
.fb-compact [data-fb-toggle] { flex:none; white-space:nowrap; }
.fb-compact .fb-search input { min-width:0; }
.fb-compact [data-list-actions] { align-items:center; min-width:0; }
.fb-compact .fb-advanced { padding:16px; margin-bottom:12px; }
.fb-compact .fb-advanced .prt-transfer-tools { margin:0 0 0 auto; flex-wrap:nowrap; }
.fb-list-card:has(.prt-list-content > .prt-note:last-child) { padding-bottom:0; }
.fb-compact .fb-advanced[hidden] { display:none; }
.fb-compact .fb-chips:not(:empty) { padding:0 16px 12px; margin:0; }
.fb-compact [data-list-results] { min-width:0; overflow-x:auto; }
.fb-compact .prt-list-content { margin:0; }
.fb-compact .fb-f { min-width:0; max-width:100%; }
.fb-compact .fb-f select, .fb-compact .fb-f input { min-width:0; max-width:100%; }
@media(max-width:720px){
.fb-compact .fb-search-tools { max-width:none; }
.fb-compact [data-list-actions] { margin-left:0; }
.fb-compact .fb-advanced .fb-f { flex:1 1 180px; }
}
.fb-count { margin-right: 2px; }
.fb-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 13px; flex-wrap: wrap; }
.fb-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.fb-f select, .fb-f input { max-width: none; width: 100%; }
.fb-f { flex: 1 1 45%; }
}
/* ---- choiceDialog: more than two ways out ----
Stacked full-width buttons, not a row: these are genuinely different
decisions with different consequences, and a row of three equal buttons
reads as "pick any". The hint under each says what it will do. */
/* A titled-option list. Not scoped to .modal-choice any more: a FORM field can
be a choice of three things with a sentence each, and it wants the same
stack. (Clearance's "why is it going to clearance", 2026-09-16.) */
.choice-list { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 2px; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--panel);
color: var(--text); font: inherit; cursor: pointer; }
.choice:hover { background: var(--panel2); }
.choice.on { border-color: var(--accent-deep); background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent-deep); }
.choice-label { font-weight: 650; font-size: 14px; }
.choice-hint { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.choice.danger .choice-label { color: var(--bad); }
/* ---- Products & stock: filter bar, expandable warehouse split ---- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 11px 13px; }
.filter-bar .search { flex: 1; min-width: 210px; }
.filter-bar select { width: auto; min-width: 120px; max-width: 210px; }
/* ---- The products browser's toolbar ----
Every filter is on screen — hiding them behind a button meant you couldn't
see what was narrowing the list without opening a drawer. What made the old
bar a wall wasn't the number of controls, it was that nine bare dropdowns
ran together with nothing naming them. So: one even grid, each control under
its own label, on a tinted ground that separates the filters from the search
above them. Category contributes one select per level and the row reflows.
Sort left the bar entirely — it lives on the column headers, where the thing
being sorted already has a name. */
.browse { padding: 0; overflow: visible; }
.browse-top { display: flex; align-items: center; gap: 9px; padding: 12px 14px; }
.browse-search { position: relative; flex: 1; min-width: 200px; display: flex; align-items: center; }
.browse-search svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--faint); pointer-events: none; }
.browse-search input { padding: 10px 12px 10px 37px; background: var(--panel3); border-color: var(--border); font-size: 14.5px; }
.browse-search input:focus { background: var(--panel); border-color: var(--accent); }
.browse-search input::-webkit-search-cancel-button { cursor: pointer; }
/* One even grid: every filter visible, each under its own label. The tint is
what separates "narrowing the list" from the search box above it. */
.browse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 13px 14px; padding: 14px; border-top: 1px solid var(--border); background: var(--panel3); }
/* The category levels are children of #pf-cats but must lay out as members of
the grid itself, so the row stays even as levels appear and disappear. */
#pf-cats { display: contents; }
.pf-cat-level { display: contents; }
/* A filter you can type at. It has to READ as the select beside it — same
height, same box, same label — or the row stops looking like one control
strip. The hit list floats, so opening it never shoves the table down. */
.combo { position: relative; }
.combo-in { width: 100%; min-width: 0; padding: 8px 11px; font-size: 14px; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
min-width: 232px; max-height: 340px; overflow: auto; background: var(--panel);
border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-md);
padding-bottom: 4px; }
.combo-list .pick-label { font-size: 13.5px; }
.combo-list .pick-desc { font-size: 12px; }
.browse-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; }
/* Was 11.5px/700 UPPERCASE with 0.04em tracking — ten small-caps labels in a
row, the third place in the app wearing a convention that is meant to live
in `thead th` and the masthead kicker only. These are the same 12px/600
sentence-case labels the shared `.fb-f` bar uses on every other list. */
.browse-f > span { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-f select { width: 100%; min-width: 0; padding: 8px 11px; font-size: 14px; }
/* Category is the axis the catalogue is navigated by — its label carries the
accent so the cascade reads as one control, not three loose dropdowns. */
/* Always present and always clickable — a greyed-out Reset reads as broken.
It goes accent while anything is narrowing the list, which is also how the
toolbar says "you are not looking at everything". */
.browse-reset { padding: 9px 14px; color: var(--muted); white-space: nowrap; }
.browse-reset:hover { color: var(--text); }
.browse-reset.on { color: var(--accent); border-color: var(--accent-wash-bd); background: var(--accent-wash); }
.browse-reset.on:hover { border-color: var(--accent); }
@media (max-width: 720px) {
.browse-top { flex-wrap: wrap; }
.browse-search { flex-basis: 100%; }
}
/* ---- Sorting lives on the header it applies to ---- */
th.sortable { cursor: pointer; user-select: none; }
th.sortable > span { border-bottom: 1px dotted transparent; }
th.sortable:hover { color: var(--text); }
th.sortable:hover > span { border-bottom-color: var(--border-strong); }
th.sortable.on { color: var(--accent); }
.sort-ar { font-style: normal; display: inline-block; width: 10px; margin-left: 3px; font-size: 11px; }
/* ---- A row's category, shown as the whole shelf rather than its last word ---- */
.crumb { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 1px; font-size: 13px; }
.crumb-b { font: inherit; background: none; border: none; padding: 0; cursor: pointer; color: var(--muted); text-align: left; border-radius: 2px; }
/* A button is shrink-to-fit, which means it sizes to its text on ONE line and
then spills out of the column — "Panel Prints — Front" hung 55px into the
next cell. Capped to the cell, the words wrap inside it like text should. */
.crumb-b { max-width: 100%; }
.crumb-b.leaf { color: var(--text); font-weight: 600; }
.crumb-b:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* The name and its state marks sit on one line; the brand falls beneath. */
.item-id { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* A rule where the table changes subject: what it IS · how many · what it cost.
Quieter than a full border — it groups without drawing a second table. */
th.bk, td.bk { border-left: 1px solid var(--border); }
thead th.bk { border-left-color: var(--border-strong); }
/* ---- The products table earns a tighter density than the rest of the app ----
Fourteen columns in Advanced is the widest thing here, and the app-wide
13/16px cell padding alone spent ~450px of it on whitespace. Tightened only
for this table, so nothing else in the app changes weight. */
#pf-results th, #pf-results td { padding: 9px 10px; }
#pf-results thead th { padding: 8px 10px; }
#pf-results td:first-child, #pf-results th:first-child { padding-left: 12px; }
/* Actions only appear on hover, so the column should claim the room they need
and not a pixel more. */
#pf-results .row-acts { padding-left: 4px; padding-right: 12px; }
#pf-results .row-acts .btn { padding: 3px 8px; }
/* Money and quantities are short and read better without a wide gutter. */
#pf-results td.num, #pf-results th.r { padding-left: 8px; }
/* The note says what the numbers below MEAN, so it needs to read as a caption
with room around it — not as a paragraph wedged against the header row.
Three separate statements were run together on one line; the scope is the
sentence you read, the basis is the footnote under it. */
.table-note { padding: 13px 16px; font-size: 13.5px; line-height: 1.5; color: var(--text); border-bottom: 1px solid var(--border); }
/* Two hundred and ten words of glossary printed above the table EVERY time it
renders, which is a wall a daily user reads once and scrolls past forever
after. Folded: what is on the screen unprompted is the one sentence that
changes with the filter — which branch these figures cover. The definitions
are one click away and, unlike the `title=` on each column header, they are
reachable on a tablet. Capped at 92ch: a definition read across 1,120px
loses its place between one line and the next. */
.table-note .basis { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 92ch; }
.table-note .basis > summary { cursor: pointer; color: var(--muted); width: fit-content; font-weight: 600; }
.table-note .basis > summary:hover { color: var(--text); }
.table-note .basis[open] > summary { margin-bottom: 4px; }
.table-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
#pf-results { transition: opacity 0.12s; }
/* Fixed layout: the widths in the colgroup pages.js emits are the whole truth,
so nothing is re-solved from content when a column appears. A header label
wraps rather than being cut; a cell that outgrows its column ends in an
ellipsis rather than climbing over its neighbour (the full value is in the
row you open, and in the title on the money cells). */
#pf-results table { table-layout: fixed; }
#pf-results thead th { white-space: normal; }
#pf-results td { overflow: hidden; text-overflow: ellipsis; }
#pf-results .split-cell { overflow: visible; }
.expand-cell { width: 26px; padding-right: 0 !important; }
/* Drag a document's line, or a build's part, by its handle (Q4, 2026-09-25). */
.drag-h { cursor: grab; color: var(--muted); padding-right: 6px; user-select: none; font-size: 13px; }
.drag-h:active { cursor: grabbing; }
tr.dragging { opacity: .45; }
tr.drop-before > td { box-shadow: inset 0 2px 0 var(--accent); }
tr.drop-after > td { box-shadow: inset 0 -2px 0 var(--accent); }
.row-x { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 2px; border-radius: var(--r-sm); }
.row-x:hover { color: var(--accent); background: var(--accent-wash); }
tr.prow { cursor: pointer; }
.row-acts { white-space: nowrap; text-align: right; }
/* ROW ACTIONS ARE VISIBLE. The fade-in belongs to the PRODUCTS BROWSER alone —
hundreds of rows, where a button on every one is noise — so it is opted into
with `.prow`, never inherited.
It used to be the other way round: `.row-acts .btn { opacity: 0 }` was the
default and only `tr.prow:hover` turned it back on. Any other table that
reused the class got controls that were laid out, hit-testable, and
completely transparent — invisible even on hover, because the one selector
that could reveal them required a class those rows never had. The Kinds tab
and the branches list both shipped that way. It cost the owner six rounds of
"I can't edit a kind" on 2026-08-27 against a screen whose buttons were
always in the DOM, which is why every check I ran said they were fine.
A control that exists but cannot be seen is worse than one that is missing. */
tr.prow .row-acts .btn { opacity: 0; transition: opacity 0.1s; }
tr.prow:hover .row-acts .btn, tr.prow:focus-within .row-acts .btn { opacity: 1; }
@media (hover: none) { tr.prow .row-acts .btn { opacity: 1; } }
/* An available qty at or under its reorder point — the number itself carries it. */
.warn-t { color: var(--warn); font-weight: 700; }
.split-row > .split-cell { background: var(--panel3); padding: 10px 14px 12px 40px !important; }
.split-table { margin: 0; width: auto; min-width: 460px; }
.split-table th { font-size: 11.5px; padding: 2px 12px 4px 0; }
.split-table td { padding: 4px 12px 4px 0; border: none; font-size: 13.5px; }
/* ---- The open build on a sales order / quote ----------------------------
The parts of one machine, edited in place. It was a card inside a table cell
inside a card, with a second bordered search box parked under it — three
frames to say one thing (owner, 2026-09-14: "that table is gross ... just
make that search box look like a line item again"). It is the same nested
table a kit split uses now, and the search is the last ROW of it. */
.bp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.bp-table tfoot td { padding-top: 7px; border-top: 1px solid var(--border); font-size: 12px; }
.bp-table tbody tr:hover > td { background: var(--panel2); }
.bp-table .expand-cell { width: 26px; }
/* The document table lets SKU and Name wrap, because those columns carry
70-character product names and it would rather grow tall than scroll. Inside
a build the list is already indented and only ever a dozen rows — wrapping
there makes eight parts read like sixteen. Named rather than `.split-table`
so it outweighs `.card.np td:nth-child(n)`, which is what was wrapping it. */
.card.np table.bp-table th, .card.np table.bp-table td { white-space: nowrap; }
.card.np table.bp-table td:nth-child(3) { white-space: normal; min-width: 18ch; }
/* The add line. A dashed frame says "this row is not a part yet" without
putting a second box on the screen; focus makes it solid, like any field. */
.bp-addbox { display: flex; flex-direction: column; min-width: 340px; }
.bp-addline {
display: flex; align-items: center; gap: 8px; padding: 1px 9px; background: var(--panel);
border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
}
.bp-addline:focus-within { border-style: solid; border-color: var(--accent); box-shadow: var(--ring); }
.bp-plus { flex: none; color: var(--faint); font-weight: 700; font-size: 15px; line-height: 1; }
.bp-addbox input.bp-add {
flex: 1 1 auto; min-width: 0; border: none; background: none; border-radius: 0;
padding: 6px 0; font-size: 13.5px;
}
.bp-addbox input.bp-add:focus { box-shadow: none; }
.bp-addbox .pick-cat { border: none; border-left: 1px solid var(--border); background: none; max-width: 150px; height: 26px; }
/* In flow, not floating: `.card.np` scrolls sideways, which makes it a clipping
box — an absolutely-placed dropdown inside one loses its bottom half. */
.bp-results {
margin-top: 5px; background: var(--panel);
border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
/* ---- Category manager: tree on the left, one category's detail on the right ---- */
.cat-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .cat-layout { grid-template-columns: 1fr; } }
.cat-tree-card { padding: 0; position: sticky; top: 14px; }
.cat-search { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.cat-search .search { width: 100%; }
.cat-tree { max-height: 68vh; overflow-y: auto; padding: 6px; }
.cat-node { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.cat-node:hover { background: var(--panel2); }
.cat-node:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-node.on { background: var(--accent-wash); }
.cat-node.on .cat-name { color: var(--accent); font-weight: 700; }
/* Indent comes from the row's own depth (inline), not from a per-level class. */
.cat-node.sub { font-size: 13.5px; }
.cat-node.sub .cat-name { color: var(--muted); }
.cat-node.sub.on .cat-name { color: var(--accent); }
.cat-tw { width: 16px; flex: none; background: none; border: none; color: var(--faint); font-size: 11px; cursor: pointer; padding: 0; line-height: 1; }
.cat-tw.leaf { cursor: default; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cat-count { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--chip); border-radius: var(--r-pill); padding: 1px 8px; }
/* Adding a sub-category is a per-row action, not something buried in a form. */
.cat-add { flex: none; width: 21px; height: 21px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--panel); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; }
.cat-node:hover .cat-add, .cat-node:focus-within .cat-add, .cat-node.on .cat-add { opacity: 1; }
.cat-add:hover { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .cat-add { opacity: 1; } }
.sub-list { display: flex; flex-wrap: wrap; gap: 7px; }
.sub-pill { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 6px 5px 13px; color: var(--text); }
.sub-pill:hover { border-color: var(--accent); color: var(--accent); }
.sub-n { background: var(--panel); border-radius: var(--r-pill); padding: 1px 9px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-detail { min-height: 320px; }
.cat-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cat-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 4px; }
.cat-empty { padding: 40px 12px; }
.cat-sec { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.cat-sec h3 { font-size: 14px; font-weight: 800; margin: 0 0 3px; }
.cat-sec .sub { margin-bottom: 10px; }
.danger-sec { border-top-color: var(--bad-bd); }
/* The live duplicate verdict — the whole point of the page, so it gets colour. */
.cat-check { font-size: 13px; margin-top: 5px; min-height: 16px; color: var(--muted); }
.cat-check.ok { color: var(--ok); }
.cat-check.warn { color: var(--warn); }
.cat-check.bad { color: var(--bad); font-weight: 600; }
.tidy-card { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--text); margin-bottom: 14px; }
.tidy-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tidy-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
/* ---- Transfer orders: a document, laid out like a purchase order ---- */
.tr-route { display: grid; grid-template-columns: 1fr auto 1fr 1.3fr 190px; gap: 18px; align-items: end; }
@media (max-width: 1100px) { .tr-route { grid-template-columns: 1fr 1fr; } .tr-route .tr-arrow { display: none; } }
@media (max-width: 620px) { .tr-route { grid-template-columns: 1fr; } }
.tr-leg label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 6px; }
.tr-leg .sub { margin-top: 5px; }
.tr-arrow { font-size: 21px; color: var(--faint); padding-bottom: 9px; }
.tr-lines { margin-top: 4px; }
.tr-steps { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 16px; }
.tr-step { font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--faint); }
.tr-step.done { color: var(--ok); border-color: var(--ok-bd); background: var(--ok-bg); }
.tr-step.on { color: var(--accent-ink); background: var(--accent-deep); border-color: var(--accent-deep); }
.tr-step.bad { color: var(--bad); border-color: var(--bad-bd); background: var(--bad-bg); }
/* P0-3: the grid now comes from `.stats` above — this is the third facts strip
folded into the two the app is allowed to have. Only the bits that are about
ITS content stay here. */
.tr-summary { align-items: stretch; }
@media (max-width: 900px) { .tr-summary { grid-template-columns: 1fr; } }
.tr-summary .card { margin-bottom: 0; }
.tr-summary .kpi-total { margin: 6px 0 4px; font-size: 25px; }
.tr-route-card { display: flex; align-items: center; gap: 20px; }
.tr-route-card .tr-leg b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; display: block; margin-top: 3px; }
.banner.warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--text); border-radius: var(--r); padding: 11px 13px; margin-bottom: 14px; }
/* ---- Goods receipt: the warehouse bench, not the purchasing desk ----
Bigger hit targets than the rest of the app on purpose — this screen gets
used standing up, one-handed, sometimes wearing gloves, on a tablet. */
.sec-head { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 22px 0 10px; }
.rcv-head { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .rcv-head { grid-template-columns: 1fr; } }
.rcv-head .field { margin-bottom: 0; }
.rcv-table td { padding-top: 9px; padding-bottom: 9px; }
/* The counted box is the one thing on this page that matters. Make it look
like it: empty by default, big enough to hit, and loud when it's over. */
.rcv-qty { width: 96px; text-align: right; font-size: 16px; font-weight: 700; padding: 9px 10px; font-variant-numeric: tabular-nums; }
.rcv-qty:placeholder-shown { font-weight: 400; }
.rcv-qty.over { border-color: var(--bad-bd); background: var(--bad-bg); color: var(--bad); }
.rcv-table .rcv-lot, .rcv-table .rcv-note { width: 130px; }
/* A scan landed on this row — a half-second pulse so the receiver can keep
their eyes on the box, not the screen. */
@keyframes rcv-flash { from { background: var(--accent-wash); } to { background: transparent; } }
tr.flash > td { animation: rcv-flash 0.6s ease-out; }
.rcv-ex { display: grid; grid-template-columns: 1.3fr 1.3fr 90px 2fr auto; gap: 12px; align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--border); }
@media (max-width: 1000px) { .rcv-ex { grid-template-columns: 1fr 1fr; } .rcv-ex .span-2 { grid-column: 1 / -1; } }
.rcv-ex .field { margin-bottom: 0; }
.rcv-ex .ex-del { align-self: end; margin-bottom: 1px; }
/* ---- SERIALS AT GOODS-IN (Ch 22 §0.2, 0295) ----
A serial-tracked line carries its serial list on a row of its own directly
under it (R-UI-2). Count first and the list draws that many empty boxes; leave
the count blank and the serials are the count. */
.rcv-head.rs-scanning { border-color: var(--accent); box-shadow: var(--ring); }
.rcv-qty.derived { color: var(--ok); border-style: dashed; }
.rs-from { display: block; font-size: 11px; font-weight: 600; color: var(--ok); margin-top: 2px; white-space: nowrap; }
.rs-tag { display: inline-flex; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
background: var(--accent-wash); border: 1px solid var(--accent-wash-bd); color: var(--accent-hover); }
tr.rcv-tracked > td { border-bottom: 0; }
tr.rcv-tracked.rs-on > td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
tr.rs-row > td { padding: 0 12px 14px; }
.rs { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel3); padding: 11px 13px; }
.rs.on { border-color: var(--accent); background: var(--panel); box-shadow: var(--ring); }
.rs-head, .rs-idle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-idle { font-size: 13px; }
.rs-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rs-live { font-size: 12px; font-weight: 700; color: var(--accent-hover); white-space: nowrap; }
.rs-pill { display: inline-flex; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid; white-space: nowrap; }
.rs-pill.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.rs-pill.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.rs-pill.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.rs-pill.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.rs-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 10px; }
.rs-chip { display: flex; align-items: center; gap: 7px; min-width: 0; border: 1px solid var(--ok-bd); background: var(--ok-bg);
border-radius: var(--r); padding: 4px 6px 4px 8px; }
.rs-chip .n { font-size: 11px; font-weight: 800; color: var(--ok); min-width: 16px; font-variant-numeric: tabular-nums; }
.rs-chip .b { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rs-chip .s { font-family: var(--mono); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-chip .t { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.rs-chip .x { border: 0; background: none; color: var(--faint); cursor: pointer; font: inherit; font-size: 15px; line-height: 1; padding: 0 2px; }
.rs-chip .x:hover { color: var(--bad); }
.rs-chip.list { border-style: dashed; border-color: var(--info-bd); background: var(--panel); }
.rs-chip.list .n, .rs-chip.list .t { color: var(--info); }
.rs-chip.list .s { color: var(--muted); }
.rs-chip.ticked .t { color: var(--ok); }
.rs-chip.offlist { border-color: var(--warn-bd); background: var(--warn-bg); }
.rs-chip.offlist .n, .rs-chip.offlist .t { color: var(--warn); }
.rs-chip.fresh { animation: rs-in .6s ease-out; }
@keyframes rs-in { from { box-shadow: 0 0 0 4px var(--ok-bd); } to { box-shadow: none; } }
.rs-chip.slot { border: 1px dashed var(--border-strong); background: transparent; }
.rs-chip.slot .n, .rs-chip.slot .s { color: var(--faint); font-weight: 500; }
.rs-chip.slot.next { border: 2px solid var(--accent); background: var(--panel); }
.rs-chip.slot.next .n, .rs-chip.slot.next .s { color: var(--accent); font-weight: 700; }
.rs-msg { margin-top: 9px; border-radius: var(--r); padding: 7px 11px; font-size: 13px; font-weight: 600; border: 1px solid;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-msg .btn { margin-left: auto; }
.rs-msg.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.rs-msg.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.rs-msg.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.rs-msg.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
#rcv-scan-msg .rs-msg { margin-top: 8px; }
.rs-list { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-strong); max-width: 640px; }
.rs-list textarea { width: 100%; font-family: var(--mono); font-size: 13px; }
/* The goods receipt on the order: the serials a line brought in. */
.po-drop .rs-open { margin-left: 4px; }
.rs-unit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.rs-unit-list a { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
/* One delivery, one card. Stacked, newest first. */
.grn-ex > td { background: var(--warn-bg); }
/* A fully un-booked delivery line: still on the record, plainly no longer counted. */
.grn-card .card-head .btn.sm { margin-left: 8px; }
/* THE LINE IS THE DOCUMENT (2026-08-19). A purchase order's deliveries used to be
a second stack of cards repeating the same products; they are footnotes on the
line now, and the arrived COUNT is the control that changes them. */
/* When each stack of a rolling line lands (0139) — a footnote on the line,
the same weight as the deliveries that have already happened below it. */
.po-drops { margin-top: 4px; }
.po-drop { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.po-drop.gone { opacity: 0.6; }
.po-drop s { opacity: 0.7; }
/* A number you can click. Reads as data until you go near it, because it IS the
data — dressing it as a button would hide the figure behind a verb. */
.btn-num {
background: none;
border: 1px solid transparent;
border-radius: 4px;
padding: 1px 5px;
margin: -1px -5px;
color: inherit;
font: inherit;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.btn-num:hover { border-color: var(--border-strong); background: var(--panel2); }
.btn-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ---- Branch closure: consequences stated before the buttons ---- */
/* Category and Sub-category are two columns, because a shelf and a sub-shelf are
things you scan and sort on separately. A third tier stacks UNDER its sub:
it qualifies that sub rather than standing beside it, and stacking keeps the
column narrow instead of letting "DDR4 8GB › Corsair" set the table's width. */
/* `.card.np td` is two classes and an element, so a bare `.cat-cell` lost to it
and the Sub-category column stayed `nowrap` — which is exactly how "Panel
Prints — Front" came to hang out of its column. Named at the same weight. */
.card.np td.cat-cell, .cat-cell { white-space: normal; min-width: 9ch; max-width: 22ch; }
.cat-cell .sub-sub { margin-top: 2px; padding-left: 9px; position: relative; }
.cat-cell .sub-sub::before {
content: "";
position: absolute; left: 1px; top: 0.15em; bottom: 0.55em;
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
width: 5px;
}
.cat-cell .sub-sub .crumb-b { font-size: 11.5px; color: var(--muted); }
.danger-zone { border-color: var(--bad-bd); }
.danger-zone h3 { font-size: 14px; font-weight: 800; margin: 0 0 4px; color: var(--bad); }
.wh-blockers { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; }
.wh-blockers li { margin-bottom: 3px; }
/* ---- Kit editor: the chosen kit item reads as a decision, not a text field ---- */
.kit-chosen { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 4px 0 6px; }
.kit-chosen b { font-weight: 800; letter-spacing: 0.01em; }
/* ---- Cards: a boundary only where grouping needs one ---- */
.cols { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.cols > .card { flex: 1; min-width: 260px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 19px 21px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
/* ---- One table system, so no page has to invent its own ----
A table may be WIDER than its card; it may never be NARROWER than it can be
read. Three rules hold that line, and they are why adding or removing columns
(Advanced mode, a permission-gated action column) no longer wrecks a page:
1. Nothing breaks mid-word — see the `th, td` rule below the tables heading.
2. Every text column carries a floor in `ch`. When the floors stop fitting,
the card scrolls sideways instead of crushing all columns at once.
3. The scrollbar is visible, because a table that scrolls has to LOOK like
one — a clipped right edge with no affordance is what reads as broken. */
.card.np { padding: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.card.np::-webkit-scrollbar { height: 10px; }
.card.np::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid var(--panel); }
.card.np::-webkit-scrollbar-track { background: transparent; }
.card.np table { min-width: 100%; }
.card.np th, .card.np td { white-space: nowrap; }
.card.np td:nth-child(2), .card.np td:nth-child(3) { white-space: normal; min-width: 11ch; }
/* A SKU is one token, so it is not broken while it fits — and almost all of them
fit, which keeps the column scannable. But "there is room on the page" stopped
being true: 213 active SKUs are really product names, one of them 70
characters, and `nowrap` let a single row demand ~500px and crush Name into a
one-word-per-line ribbon. Past the cap it wraps instead of bulldozing the
table — worst visible when sorting by value, because the dearest parts
(servers, GPU nodes) are exactly the ones with quote references for SKUs. */
.card.np td.sku-cell {
white-space: normal;
min-width: 11ch;
max-width: 28ch;
}
.card.np td:nth-child(4) { white-space: normal; min-width: 9ch; }
/* ---- Named beats counted ----
The three rules above pick a column's behaviour by POSITION, which is a guess
that is right most of the time and wrong the rest. A cell that says what it is
overrides the guess — but only if it is written at the SAME weight, because
`.card.np td` is two classes and an element and a bare `.payload` is not. That
ordering trap is what left the ledger's JSON on `nowrap`, 599px of it hanging
across the hash column. Any page can now say `wrap` or `nowrap` on a cell and
be obeyed. */
.card.np td.wrap { white-space: normal; }
.card.np td.nowrap { white-space: nowrap; }
/* JSON and hashes have no words, so this is the one place a mid-token break is
the RIGHT answer — with a floor, so the column cannot be crushed to a thread. */
.card.np td.payload { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 26ch; }
/* Build grid (Build-a-PC, models): QUAKE "SKUs" run to sentence length, so
the part gets ONE wide flexible column that wraps — it never dictates the
table, and the slot search inside it always has room. Numeric columns hold
steady on the right. 880px is the floor at which all six columns still read;
it clears a 1280px laptop (sidebar + page + card padding) with no inner
scrollbar — the host form has to be a .with-parts card, not the 560px one. */
.card.np.bg-table table { table-layout: fixed; min-width: 880px; }
.card.np.bg-table th:nth-child(2) { width: 150px; }
.card.np.bg-table th:nth-child(3) { width: 100px; }
.card.np.bg-table th:nth-child(4) { width: 120px; }
.card.np.bg-table th:nth-child(5) { width: 90px; }
.card.np.bg-table th:nth-child(6) { width: 46px; }
.card.np.bg-table td:nth-child(1), .card.np.bg-table td:nth-child(2) { white-space: normal; }
.bg-table .bg-slot-search { width: 100%; max-width: 420px; }
.card.np table { margin: 0; }
/* A CARD TITLE IS A TITLE. This one base rule was putting a muted uppercase
eyebrow on 61+ cards — the single biggest generated-looking thing in the
app, because a screen of identical small-caps labels has no hierarchy in it
at all. The small-caps convention survives in exactly two places now:
`thead th` and the masthead `.kicker`. */
.card h2 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 10px; letter-spacing: -0.005em; text-transform: none; }
/* `gap` was missing, and it showed the moment a card head grew a caption beside
its title: "ASSEMBLYnot on the floor". `space-between` puts no space between
ADJACENT items, only around the free space. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px 0; }
.card-head h2, .card-head h3 { margin: 0; }
/* The same row for a card that already carries its own padding. `.card-head`
brings 14/16 of its own, which is right above a `.card.np` wrapping a
table edge-to-edge and wrong inside an ordinary `.card` — the heading ends up
indented past the body underneath it. `.pad` is a no-op class, so
`.card.pad` is just `.card` and gets this one. R-UI-2: the button that acts
on a card lives in that card's head, so every padded card needs a head it can
sit in. */
.pad-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pad-head h2, .pad-head h3 { margin: 0; }
/* ---- Tables: dense, hairline rows, actions surface on hover ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* No cell anywhere in the app breaks a word mid-letter. `overflow-wrap: anywhere`
was the whole bug: it tells the browser a column's MINIMUM width is one
character, so instead of overflowing (and scrolling) the browser cheerfully
crushes the column into a vertical ribbon of letters and squeezes every other
column with it. `break-word` breaks only a token that could never fit on its
own line, and it does not lower the column's minimum. */
th, td { overflow-wrap: break-word; word-break: normal; hyphens: none; }
thead th { color: var(--muted); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; background: var(--panel3); border-bottom: 1px solid var(--border); padding: 10px 14px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.click, tbody tr.rowlink { cursor: pointer; }
tbody tr:hover { background: var(--panel2); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { visibility: hidden; }
tr:hover .row-actions { visibility: visible; }
/* A bench tablet has no hover, so a hidden row action is simply gone. */
@media (pointer: coarse) { .row-actions { visibility: visible; } }
.muted { color: var(--muted); }
/* ---- The three utilities that retire inline type and rhythm ----
1,249 inline `style=` attributes were mostly `font-size:12.5px` and
`margin-top:12px` typed out by hand, which is how the app ended up with
12.6px and 10.8px in it. After these, an inline `style` may carry a COMPUTED
value (`width:${w}px`, `--pct:${p}%`) and nothing else. */
.small { font-size: 13px; }
.tiny { font-size: 12px; color: var(--muted); }
.stack > * + * { margin-top: 12px; }
.neg { color: var(--bad); }
.hash { color: var(--accent); font-family: var(--mono); }
.payload { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-width: 300px; }
.total { text-align: right; font-family: var(--sans); font-size: 17px; font-weight: 700; padding: 12px 14px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.empty { color: var(--muted); padding: 26px; text-align: center; }
.loading { color: var(--muted); padding: 44px; text-align: center; }
.card.err { border-color: var(--bad); color: var(--bad); }
/* ---- Chips & badges: soft pills, quiet, state only ---- */
.chip { display: inline-block; background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 9px; font-size: 12px; font-weight: 500; color: var(--muted); }
a.chip { text-decoration: none; }
a.chip:hover { color: var(--text); border-color: var(--border-strong); }
.badge { display: inline-flex; align-items: center; border-radius: var(--r-pill); padding: 2px 10px; font-size: 12px; font-weight: 600; border: 1px solid; letter-spacing: .01em; }
.badge.g { background: var(--chip); border-color: var(--border); color: var(--muted); }
.badge.b { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.badge.y { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.badge.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.badge.r { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
/* ---- Buttons: signal red for the main act, soft & rounded otherwise ---- */
.btn { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); padding: 9px 17px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, filter 0.12s, transform 0.06s; }
.btn:hover { border-color: var(--border-strong); background: var(--panel2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(179,20,28,0.35), 0 3px 10px rgba(179,20,28,0.20); }
.btn.primary:hover { filter: brightness(1.09); }
.btn.danger { color: var(--bad); border-color: var(--bad-bd); background: var(--panel); }
.btn.danger:hover { border-color: var(--bad); background: var(--bad-bg); }
.btn.sm { padding: 4px 11px; font-size: 13px; }
/* Used in the category tree and the embellishment record before it existed as
a rule, so eleven buttons meant to be tiny rendered full size. Defined once
rather than deleted: a reorder arrow inside a table row genuinely is smaller
than a row action. */
.btn.xs { padding: 2px 8px; font-size: 12px; font-weight: 600; border-radius: var(--r-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
a { color: var(--accent); }
/* ---- A menu hung off a button (the ⋯ overflow) ----
Same machinery as .wh-pick, generic: records that earn a place on the page
but not a card's worth of it. A tick marks the ones currently shown. */
.pop-pick { position: relative; }
.pop-pick > summary { list-style: none; cursor: pointer; }
.pop-pick > summary::-webkit-details-marker { display: none; }
.btn.icon { padding: 9px 12px; font-size: 15px; line-height: 1; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 244px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-md); padding: 6px; }
.pop-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 5px 8px 6px; }
.pop-item { display: flex; align-items: baseline; gap: 9px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.pop-item:hover { background: var(--panel2); }
.pop-item:focus-visible { outline: none; box-shadow: var(--ring); }
.pop-item .tick { flex: none; width: 11px; font-size: 11px; color: var(--accent-deep); }
.pop-item .sub { margin-top: 2px; }
a.pop-item { text-decoration: none; }
.pop-item.danger { color: var(--bad); }
.pc-rec[hidden] { display: none; }
/* ---- The pick desk: ONE screen, six sections ----
The strip used to be pills (.pf-views) that were really links to three
different pages. It is .tabs now — the control this app already uses for
"sections of one page" (P0-4) — because that is what they became.
The tabs are still so a section can be linked to and shared; the
desk cancels the navigation and swaps the body. */
.tabs a.tab { text-decoration: none; }
/* A tab the current search finds nothing on stays readable and stays clickable:
greying it out IS the answer to "is it over there?", so it has to be legible,
not hidden. */
.pick-tabs .tab.nil { opacity: 0.5; }
.pick-search { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.pick-search input { flex: 1; max-width: 460px; }
/* A hidden section keeps its DOM, and everything it had open in it. */
.pd-body[hidden] { display: none; }
/* WHERE IT IS — one card, above every tab, naming every place the search
turns up. It exists because a digit on a tab you have to click is not an
answer to "where is this build" (owner, 2026-09-22). */
.pd-where { margin-bottom: 14px; }
.pd-where ul { list-style: none; margin: 0; padding: 0; }
.pd-where li { display: flex; align-items: baseline; gap: 10px; padding: 8px 19px;
border-top: 1px solid var(--border); font-size: 14px; cursor: pointer; }
.pd-where li:hover { background: var(--panel2); }
.pd-where li.here { cursor: default; }
.pd-where li.here:hover { background: transparent; }
.pd-where li .badge { flex: 0 0 76px; text-align: center; }
.pd-where li .what { flex: 1; min-width: 0; }
.pd-where li .where { font-size: 12.5px; white-space: nowrap; }
/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
/* Even tracks. A ceiling in the track (minmax(210px, 380px)) looks right until
the row can't fit a whole number of them — grid fills greedily, so the LAST
column comes out short and the row reads misaligned. The ceiling lives on the
containers instead; here the tracks just share what they're given. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; }
/* A FIELD HAS A MEASURE. Once the page stopped being capped, a lone input in a
wide card — notes, an address line — grew to a 1900px slot nobody can aim at.
In a grid the track already bounds it, so the cap is lifted back off there. */
.field > input, .field > select, .field > textarea { max-width: 774px; }
.form-grid .field > input, .form-grid .field > select, .form-grid .field > textarea { max-width: none; }
label { font-size: 13px; color: var(--muted); font-weight: 600; }
/* Bill-to / deliver-to, side by side — on an order form and in its dialog.
They stack below 720px because a postcode field 90px wide is unusable. */
/* auto-fit, not a fixed 1fr 1fr: the sales-order form puts THREE panels in this
row (details · bill to · deliver to) and the edit dialog puts two. Both want
as many columns as the surface can hold at a usable width, and one column
under ~330px, which the old hard-coded 720px query got wrong for the 3-up. */
.so-addr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.so-addr-box { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px 2px; background: transparent; }
.so-addr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 28px; }
.so-addr-head h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
/* HOW IT LEAVES (0159) — delivery or collection, ticked where the delivery
address is already being answered. It sits hard right beside Same as
billing rather than being spread by the head's space-between, because the
two controls are one decision: where does this go, and who takes it. */
.so-freight { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 9px 4px 7px;
border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 12.5px; cursor: pointer;
white-space: nowrap; user-select: none; }
.so-freight input { width: auto; padding: 0; margin: 0; }
.so-freight.on { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); font-weight: 600; }
.so-freight:has(input:disabled) { opacity: .55; cursor: default; }
/* Suburb / state / postcode read as one line the way an address is written —
auto-fit would stack them in a 310px column. */
.so-addr-loc { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 10px; }
input, select, textarea { font: inherit; font-size: 14px; background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 10px 12px; width: 100%; transition: border-color .12s, box-shadow .12s; }
/* THE TWO LEDGERS SIT SIDE BY SIDE in half a page each, so their action cells
have about 140px before the table starts scrolling sideways. The invoice side
carries one button more than the received side (Pay, as well as Match and the
void/remove ✕), so its buttons are allowed to wrap onto a second line rather
than push the invoice number down to one word per row. */
.po-page .card.np.po-ledger td:last-child { white-space: normal; }
.po-ledger td:last-child .btn { margin-bottom: 2px; }
/* A delivery's own lines, expanded inside the received ledger (0140).
A GRID, not a nested
: a table inside a
gets its header row
duplicated into the body by the HTML parser, and the fix is to stop nesting
tables rather than to fight it. Inset and quieter than its parent so it reads
as detail OF the row above, not a second list competing with it. */
.po-ledger .grn-items > td { padding: 0 10px 10px; }
.grn-lines { background: var(--panel2); border-radius: var(--r); padding: 2px 0; }
.grn-line { display: grid; grid-template-columns: 1fr 90px 110px; gap: 10px; padding: 6px 10px; align-items: baseline; font-size: 12.5px; }
.grn-line + .grn-line { border-top: 1px solid var(--border); }
.grn-line.head { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.grn-line em { display: block; font-style: normal; font-size: 11.5px; }
/* The rolling-arrival repeater (0139) reads as a sentence rather than a row of
labelled boxes, so the fields sit inline with the words that give them their
meaning and wrap as a paragraph would. */
.rp-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; font-size: 13.5px; color: var(--muted); }
.rp-sentence input, .rp-sentence select { width: auto; padding: 6px 8px; font-size: 13.5px; }
.rp-sentence input[type="date"] { width: auto; }
.rp-sentence button { margin-left: auto; }
/* A TICK IS NOT A TEXT BOX. The rule above is written for text inputs and it
also lands on checkboxes and radios, which then render as full-width bordered
boxes with 10px of padding — shoving whatever sits beside them off the edge of
its container. Every checkbox in the app used to patch `width: auto` locally
(.sp-chk input, and so on); the ones that forgot were silently broken. Reset
it once, here, where the damage is done. */
input[type="checkbox"], input[type="radio"] {
width: auto; padding: 0; border: none; border-radius: 0; background: none;
flex: none; transition: none;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* ---- Bars (home value-by-warehouse) ---- */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.bar-label { width: 46px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.bar { flex: 1; height: 6px; background: var(--panel2); border-radius: var(--r); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent-deep); }
.bar-val { width: 96px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
/* ---- Banners ---- */
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--border); margin-bottom: 14px; font-weight: 500; background: var(--panel); font-size: 14px; box-shadow: var(--shadow-sm); }
.banner.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.banner.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
/* Information, not a warning: "the carrier API is not connected", "3 metrics
are not measured". Slate, so it cannot be mistaken for something to act on. */
.banner.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--text); }
/* Batch instructions: a work document, not a card */
.instructions { border-left: 2px solid var(--border-strong); padding: 6px 14px; margin: 0 0 14px; font-size: 14.5px; }
.instructions .kicker { display: block; margin-bottom: 1px; }
/* Cycle stats strip (work order detail) */
.cycle-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cycle-cell { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.cycle-stage { font-weight: 600; font-size: 13px; }
/* App-wide integrity banner (hidden unless the ledger fails to verify). */
/* The boot gate. Lives outside .app so it can be shown while the app itself is
still hidden — an app drawn without permissions is a screen with every button
missing, which reads as a broken feature rather than a missing answer. */
#boot-block { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.boot-block-box { max-width: 52ch; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.boot-block-box h1 { font-size: 19px; margin: 0 0 10px; }
.boot-block-box p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.boot-block-box .btn { margin-top: 4px; }
/* R-UI-1: the sign-in card is two short fields wide, not an essay wide. */
.boot-block-box.login { max-width: 32ch; }
.boot-block-box.login p.muted { margin-bottom: 18px; }
.boot-block-box.login .field { margin-bottom: 12px; }
.boot-block-box.login .btn { width: 100%; justify-content: center; margin-top: 6px; }
.boot-block-box.login .field-error:empty { display: none; }
.integrity-banner { display: none; }
.integrity-banner.show { display: block; background: var(--bad-bg); border-bottom: 2px solid var(--bad); color: var(--bad); padding: 10px 28px; font-size: 14px; }
.integrity-banner.show a { color: var(--bad); font-weight: 700; text-decoration: underline; margin-left: 6px; }
/* Out-of-date is not a fault — it is ochre, and it carries the fix as a button
rather than asking the reader to know about Ctrl+Shift+R. */
.integrity-banner.show.stale { background: var(--warn-bg); border-bottom-color: var(--warn); color: var(--warn); display: flex; align-items: center; gap: 10px; }
.integrity-banner.show.stale .btn { margin-left: auto; color: var(--warn); border-color: var(--warn-bd); background: var(--panel); }
.grow { flex: 1; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--bad); }
/* ---- Toast: inverted slip ---- */
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--ink-btn); border: 1px solid var(--ink-btn); color: var(--ink-btn-ink); padding: 11px 16px; border-radius: var(--r); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(6px); transition: 0.18s; max-width: 380px; pointer-events: none; z-index: 120; }
.toast.show { opacity: 1; transform: none; }
.toast.err { background: var(--bad-solid); border-color: var(--bad-solid); color: #fff7f2; }
/* An error stays up to be read; a click puts it away (util.js `toast`). */
.toast.show.err { pointer-events: auto; cursor: pointer; }
/* ---- Login gate ---- */
.login-sub { color: var(--muted); font-size: 14px; margin: 6px 0 20px; }
.login-error { color: var(--bad); font-size: 14px; min-height: 18px; margin: 2px 0 8px; }
/* ---- Top bar: theme flip, current user + logout ---- */
/* The right cluster may shrink — pinned at flex-shrink:0 it pushed the whole
app wider than the window and the BODY scrolled sideways. Identity is the
first thing to go: the avatar still says who you are. */
/* Standing top-bar links. Same active wash as the sidebar (#nav a.nav-sub.active)
so "where am I" reads identically in both places.
They used to be bare text pills, which read as prose sitting next to the
search box rather than as the four standing DOORS they are. Now each one is
a bordered control with a glyph, in the house micro-label case (11.5px/700
uppercase, same as a thead th or a .kicker) — a set of tools, not a
sentence. */
.topbar-jump { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-jump a {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--muted); text-decoration: none; white-space: nowrap;
padding: 6px 12px; border-radius: var(--r-pill);
border: 1px solid var(--border); background: var(--panel);
transition: color .12s, background .12s, border-color .12s;
}
.topbar-jump a svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.topbar-jump a:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel2); }
.topbar-jump a:hover svg { opacity: 1; }
.topbar-jump a.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.topbar-jump a.active svg { opacity: 1; }
.topbar-jump a:focus-visible { outline: none; box-shadow: var(--ring); }
/* Narrow screens keep the floor itself and drop the extras before the search.
Below 900 the labels go and the glyphs stay: four icons still fit where four
words do not, and every one of them carries a `title`. */
@media (max-width: 1180px) { .topbar-jump a[data-jump="floor-app"] { display: none; } }
@media (max-width: 1000px) { .topbar-jump a[data-jump="floor-plan"] { display: none; } }
@media (max-width: 900px) {
.topbar-jump a { padding: 6px 9px; }
.topbar-jump a span { display: none; }
}
/* Under 900px the bar carries one door, and it is the floor app (owner,
2026-09-27): big, red, labelled. Systems gives up its seat — the drawer
and the search both still reach the register. */
.topbar-jump a.topbar-floorgo { display: none; }
@media (max-width: 900px) {
.topbar-jump a[data-jump="systems"] { display: none; }
.topbar-jump a.topbar-floorgo {
display: inline-flex; gap: 8px; min-height: 42px; padding: 8px 17px 8px 13px;
font-size: 13.5px; letter-spacing: 0.04em;
color: var(--accent-ink); background: var(--accent-deep); border-color: var(--accent-deep);
box-shadow: 0 1px 2px rgba(179,20,28,0.35), 0 3px 10px rgba(179,20,28,0.20);
}
.topbar-jump a.topbar-floorgo span { display: inline; }
.topbar-jump a.topbar-floorgo svg { width: 19px; height: 19px; opacity: 1; }
.topbar-jump a.topbar-floorgo:hover { color: var(--accent-ink); background: var(--accent-deep); border-color: var(--accent-deep); filter: brightness(1.09); }
}
@media (max-width: 820px) { .integrity { display: none; } }
/* ---- Sidebar foot: who you are, and how the app looks ----
Both moved out of the top bar 2026-08-18 (owner). They are settings about the
READER, not about the page, so they sit under the module tree — which #nav's
flex:1 pins to the bottom of the rail — behind a hairline that reads as the
mirror of the one under the wordmark. */
.sidebar-foot { flex: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.sidebar-foot .user-box:empty { display: none; }
.theme-flip { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--panel2); border: 1px solid transparent; border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer; white-space: nowrap; text-align: left; transition: color .12s, background .12s; }
.theme-flip:hover { color: var(--text); background: var(--border); }
/* ---- THE LANGUAGE FLIP (bottom left, 2026-09-21) --------------------------
Same pill as the theme flip directly above it, because it is the same KIND
of thing: a setting about you, not about the page. It names the language you
would switch TO, so the button is the answer rather than the question, and
it always says that name IN that language — "中文" is legible to somebody who
cannot read the word "Chinese", which is the entire point of the button. */
.lang-flip { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--panel2);
border: 1px solid transparent; border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer;
white-space: nowrap; text-align: left; display: flex; align-items: center; gap: 7px;
transition: color .12s, background .12s; }
.lang-flip:hover { color: var(--text); background: var(--border); }
.lang-flip svg { flex: none; width: 14px; height: 14px; opacity: .8; }
/* On the sign-in card, where it matters most: the person who needs it has
not got through the door yet. */
.boot-lang { position: fixed; left: 18px; bottom: 18px; z-index: 2; }
.boot-lang .lang-flip { background: var(--panel); border-color: var(--border); box-shadow: var(--sh-1, none); }
/* Chinese sets tighter than Latin and carries no ascender rhythm, so the two
places this design system leans on negative tracking — big numbers and page
titles — need it taken back off, or the characters touch. */
[data-lang="zh-Hans"] h1, [data-lang="zh-Hans"] h2, [data-lang="zh-Hans"] h3,
[data-lang="zh-Hans"] .kpi-value, [data-lang="zh-Hans"] .stat-num, [data-lang="zh-Hans"] .kpi-total {
letter-spacing: 0;
}
/* The masthead kicker is letter-spaced small caps in English; on Chinese that
reads as broken text rather than as a label. */
[data-lang="zh-Hans"] .kicker { letter-spacing: .04em; text-transform: none; }
.user-box { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-box .btn { margin-left: auto; }
.user-chip { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-deep); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm); }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.user-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { font-size: 11px; color: var(--muted); }
/* ---- The Escape palette ----
Escape steps the whole app back: the page behind blurs and dims, one lit box
comes forward. The blur is what makes it read as a layer rather than a card
that happened to appear — and it is why the box needs no heavy chrome to be
obviously in front.
It sits ABOVE the modal layer (z 100) because Escape can be pressed anywhere,
and a palette peeking out from under something is worse than not opening.
In practice they never coexist: Escape stands down while a modal is open. */
.palette { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; padding: 22px;
/* NOT dead centre. The box grows DOWNWARDS as results arrive, and a centred
box grows both ways — the line you are reading slides up the screen while
you read it. Anchored high, the input never moves and the results fill the
room below it, which is also where the eye already is after a keystroke. */
align-items: flex-start; padding-top: 15vh;
background: var(--overlay); -webkit-backdrop-filter: blur(7px) saturate(0.86); backdrop-filter: blur(7px) saturate(0.86);
/* The entrance is an ANIMATION with NO fill-mode, not a transition out of an
opacity:0 base. A transition needs the browser to paint the start state on
one frame and the end state on the next, which is why the first cut needed
a requestAnimationFrame and a second class — two more things to get out of
step. Here the RESTING style is the visible one and the keyframe only plays
the arrival, so toggling `hidden` is the entire trigger. */
animation: palette-in .13s ease; }
.palette[hidden] { display: none; }
.palette-box { width: 100%; max-width: 620px; background: var(--panel); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
animation: palette-box-in .16s cubic-bezier(.2,.8,.3,1); }
@keyframes palette-in { from { opacity: 0; } }
@keyframes palette-box-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
/* The field is the whole head of the box — no border, no well. The box IS the
input; a bordered input inside a bordered panel is two frames for one thing. */
.palette-field { display: flex; align-items: center; gap: 12px; padding: 4px 16px 4px 18px; }
.palette-ic { width: 18px; height: 18px; flex: none; color: var(--faint); }
.palette-field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text);
font: inherit; font-size: 17px; letter-spacing: -0.01em; padding: 17px 0; }
.palette-field input::placeholder { color: var(--faint); }
.palette-esc { flex: none; }
/* The dropdown styles are shared with the top bar (.sr-*) — only the framing
changes: in here it is a panel section, not a floating menu. */
.palette .search-results { position: static; max-height: min(52vh, 460px); border: 0; border-top: 1px solid var(--border);
border-radius: 0; box-shadow: none; padding: 6px; }
.palette-foot { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--border);
background: var(--panel2); font-size: 11.5px; color: var(--muted); }
.palette-foot-end { margin-left: auto; color: var(--faint); }
.palette kbd { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--muted);
background: var(--panel); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
padding: 2px 5px; margin-right: 3px; line-height: 1.4; }
/* Small screens: the footer hints are for a keyboard, and the tail is chatter. */
@media (max-width: 640px) { .palette { padding-top: 9vh; } .palette-foot-end { display: none; } }
@media (max-width: 460px) { .palette-foot { display: none; } }
/* A blurred backdrop that animates is the one thing motion sickness actually
punishes. Keep the layer, drop the travel. */
@media (prefers-reduced-motion: reduce) { .palette, .palette-box { animation: none; } }
/* ---- API key reveal ---- */
.key-reveal { background: var(--ok-bg); border: 1px solid var(--ok-bd); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; }
.key-reveal .key-value { font-family: var(--mono); font-size: 14px; color: var(--ok); word-break: break-all; background: var(--panel); border: 1px solid var(--ok-bd); border-radius: var(--r); padding: 8px 10px; margin: 8px 0; }
.key-reveal .warn { color: var(--warn); font-size: 13px; }
/* ---- Modal dialogs (dialog.js + shop-floor prompts) ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--overlay); }
.modal { width: 100%; max-width: 470px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-lg); animation: modal-in 0.12s ease-out; }
@keyframes modal-in { from { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } .toast { transition: opacity 0.18s; transform: none; } }
.modal-title { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.modal.danger { border-color: var(--bad); }
.modal.danger .modal-title { color: var(--bad); }
.modal-body { font-size: 14px; color: var(--muted); line-height: 1.55; }
.modal-body b, .modal-body .mono { color: var(--text); }
.modal-reason { margin-top: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 18px; }
/* An escape hatch is not a peer of the way out: it goes to the far left, in the
muted ink of a back link, so the right-hand end of the bar keeps meaning
"finish with this window". */
.modal-actions.spread { justify-content: space-between; align-items: center; }
/* A PICKER IN A WINDOW IS A LIST, and the window has to be sized by the list --
not by the paragraph above it. Fixed at 580x600 it showed six of thirty-three
models through a letterbox while 300px of screen sat empty underneath. Title,
blurb and buttons are pinned; the rows are the only thing that scrolls; the
height is whatever the screen can spare. */
.modal.modal-pick { max-width: 720px; max-height: min(88vh, 820px); display: flex; flex-direction: column; }
.modal.modal-pick .picker { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 12px 0 0; }
.modal.modal-pick .pick-list { flex: 1 1 auto; min-height: 140px; max-height: none; }
.modal.modal-pick .modal-actions { flex: none; margin-top: 14px; }
/* Ten rows deep with a number column at the far edge, the eye loses the line
between "Riot" and its price across 350px of nothing. The dropdown pickers
are five rows and need no rule; this one does. */
.modal-pick .pick-item { border-bottom: 1px solid var(--border); }
.modal-pick .pick-item:last-child { border-bottom: none; }
/* A FORM IN A WINDOW is the other half of the same lesson. `.form-sec` sets a
248px label gutter beside its fields because it was drawn for a 1400px page,
and it only gives that gutter up at `@media (max-width: 1000px)` -- a
VIEWPORT query, which never fires for a 680px dialog sitting on a 1440px
screen. So the New customer window was 248px of label beside 289px of
fields, and the fields split that two-up: an email address in 135px, a
suburb in 135px, and half the window a column with nothing in it.
The window is sized for the form it holds now, the gutter is 200, and the
title and the buttons are pinned while only the fields scroll -- so the
button bar is a footer instead of a bar floating over whatever field you
happened to scroll past. */
.modal.modal-form { max-width: 880px; max-height: min(88vh, 860px); display: flex; flex-direction: column; padding-bottom: 0; }
.modal.modal-form > .modal-scroll {
flex: 1 1 auto; min-height: 0; overflow: auto; margin: 14px -24px 0;
border-top: 1px solid var(--border);
scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.modal.modal-form > .modal-scroll::-webkit-scrollbar { width: 10px; }
.modal.modal-form > .modal-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid var(--panel); }
.modal.modal-form > .modal-scroll::-webkit-scrollbar-track { background: transparent; }
.modal.modal-form > .form-error { margin: 12px 0 0; }
.modal-form .form-sec { grid-template-columns: 200px 1fr; padding: 20px 24px; }
.modal.modal-form > .form-actions { flex: none; margin: 0 -24px; padding: 14px 24px; }
/* The page collapses the gutter at 1000px; a rule that beats the page rule has
to collapse with it, or a phone gets 200px of label beside 100px of field. */
@media (max-width: 1000px) {
.modal.modal-form { max-width: none; }
.modal-form .form-sec { grid-template-columns: 1fr; gap: 12px; padding: 16px 20px; }
}
.btn.danger-solid { background: var(--bad-solid); border-color: var(--bad-solid); color: #fff7f2; font-weight: 600; }
.btn.danger-solid:hover { filter: brightness(1.1); }
.summary-table { width: auto; margin: 6px 0 2px; }
.summary-table td { padding: 3px 8px; border: none; font-size: 14px; vertical-align: top; }
.summary-table td:first-child { color: var(--muted); padding-left: 0; white-space: nowrap; }
/* ---- Form framework (forms.js) ---- */
.field-error { color: var(--bad); font-size: 13px; min-height: 15px; margin-top: 2px; }
.field .req { color: var(--bad); }
.field .hint { color: var(--muted); font-size: 13px; margin-top: 2px; font-weight: 400; }
input.invalid, select.invalid, textarea.invalid { border-color: var(--bad); }
input.invalid:focus, select.invalid:focus, textarea.invalid:focus { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
label.check { flex-direction: row; display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; font-weight: 400; }
label.check input { width: auto; }
/* Several answers to one question — which locations a warehouse holds, and
anything else that is a set rather than a yes/no. A grid, not a list, so a
long set wraps into columns instead of running off the bottom of a dialog. */
.check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 16px; margin-top: 4px; }
.form-error { background: var(--bad-bg); border: 1px solid var(--bad-bd); color: var(--bad); border-radius: var(--r); padding: 9px 11px; font-size: 14px; margin-bottom: 12px; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; width: 13px; height: 13px; top: 50%; left: 50%; margin: -6.5px 0 0 -6.5px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--accent-ink); animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A short single-column form is a reading column, not a billboard — but 560px
was tight enough that even two fields had to stack. 760px holds two tracks. */
.form-card { max-width: 760px; }
/* A form that carries the build grid can't live in the reading column — the
parts table alone is 880px. Let the card run, and keep the plain fields at a
sane measure so the text inputs don't stretch across the whole bench. */
.form-card.with-parts { max-width: none; }
.form-card.with-parts > .field, .form-card.with-parts > .form-grid { max-width: 774px; }
.form-sub { margin: -4px 0 14px; }
.line-total { text-align: right; font-weight: 700; font-size: 15px; padding: 10px 4px 0; font-variant-numeric: tabular-nums; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
/* ---- Sectioned forms: a long form reads as a few labelled areas, laid out
across the page, instead of one endless single-file column. Hierarchy comes
from three distinct text levels (section title / label / hint) plus the rule
and the section's tinted heading column — not from size alone. ---- */
/* Uncapped. 1180px parked half a wide monitor in grey; the section grid below
is what keeps this readable now — it answers extra width with more field
columns, and each one stops at a measure you can still scan. */
.form-card.form-wide { max-width: none; padding: 0; overflow: visible; }
.form-wide .form-sub, .form-wide > .form-error { margin: 16px 20px; }
.form-sec { container-type: inline-size; container-name: formsec; display: grid; grid-template-columns: 248px 1fr; gap: 30px; padding: 24px; border-bottom: 1px solid var(--border); }
.form-sec:last-of-type { border-bottom: 0; }
.form-sec-head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.015em; margin: 0; color: var(--text); }
.form-sec-head .hint { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.45; }
/* Was a hard 3 columns, which meant the fields squeezed to ~290px inside the old
1180px cap and would balloon to ~640px now that the cap is gone. The count is
a ladder rather than auto-fit so every column is the SAME width at every step
— auto-fit with a track ceiling leaves a short last column. `.span-2` still
spans two of whatever the step is; at one column it is capped back to one. */
/* Was a hard 3 columns, which meant the fields squeezed to ~290px inside the old
1180px cap and would balloon to ~640px now that the cap is gone. The count is
a LADDER, not auto-fit: every column is the same width at every step, where
auto-fit with a track ceiling leaves a short, misaligned last column.
The steps are @container, not @media, because what decides how many fields
fit is the width of the SECTION — and a section loses 248px to its heading
column, sits inside a card, and may share the page with a rail. The viewport
only knows about the window. `.span-2` keeps spanning two of whatever the
current step is, and is dropped once there is only one column left. */
.form-sec-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; align-content: start; }
/* The numbers are the section's CONTENT box, so they already exclude its 24px
padding; the fields get another 278px less again for the heading column and
the gap. Each step is the width at which the next column still leaves a field
~300px or wider — below that a step is a downgrade, not an upgrade. */
@container formsec (min-width: 1100px) { .form-sec-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container formsec (min-width: 1480px) { .form-sec-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container formsec (min-width: 1880px) { .form-sec-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container formsec (max-width: 540px) { .form-sec-fields { grid-template-columns: minmax(0, 1fr); } .form-sec-fields .span-2 { grid-column: auto; } }
.form-sec-fields .field { margin-bottom: 0; min-width: 0; }
.form-sec-fields .span-2 { grid-column: span 2; }
.form-sec-fields .span-full { grid-column: 1 / -1; }
/* The label is the quiet one; the value the reader scans is the loud one. */
.form-wide .field > label { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.form-wide .field input, .form-wide .field select, .form-wide .field textarea { font-size: 14.5px; }
.form-wide .field-error { min-height: 0; }
.form-wide .field-error:not(:empty) { margin-top: 4px; }
/* A field that can never be edited should not look like one that can. */
.field-locked input { background: var(--panel2); color: var(--muted); letter-spacing: 0.01em; font-weight: 500; cursor: not-allowed; }
/* Switches read as rows with room for their explanation, not as bare ticks. */
.switch-field .check { align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel3); }
.switch-field .check:hover { border-color: var(--border-strong); }
.switch-field .check input { margin-top: 1px; }
.switch-label { display: block; font-weight: 600; font-size: 14px; color: var(--text); }
.switch-field .check .hint { display: block; margin-top: 2px; }
/* A switch that reaches outside this page wears its guard, so the confirm
dialog is expected rather than a surprise. */
.switch-guarded .check { border-left: 1px solid var(--warn-bd); background: var(--panel2); }
.guard-tag { display: inline-block; vertical-align: 1px; margin-left: 6px; background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn); border-radius: var(--r-pill); padding: 0 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.seg.sm .seg-btn { padding: 4px 11px; font-size: 13.5px; }
/* Units live on the control — "$" and "g" are not part of the field's name. */
.affix { position: relative; display: block; }
.affix-t { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13.5px; pointer-events: none; }
.affix-pre .affix-t { left: 11px; }
.affix-pre input { padding-left: 24px; }
.affix-post .affix-t { right: 11px; }
.affix-post input { padding-right: 42px; }
.form-actions.sticky { position: sticky; bottom: 0; margin: 0; padding: 13px 20px; background: var(--panel); border-top: 1px solid var(--border); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 -6px 18px -12px var(--shadow); z-index: 5; }
/* Below 1000px the heading stops being a column and becomes a caption above the
fields. The COUNT is not set here — @container formsec above owns that, and
this rule widens the section, so overriding it from the viewport would undo
the extra column the stack just paid for. */
@media (max-width: 1000px) { .form-sec { grid-template-columns: 1fr; gap: 12px; } }
/* ---- Tabbed detail pages (supplier / customer) ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tab { font: inherit; font-size: 14px; cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 9px 13px; margin-bottom: -1px; border-radius: var(--r) var(--r) 0 0; transition: color .12s, background .12s; }
.tab:hover { color: var(--text); background: var(--panel2); }
.tab.active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.tab .count { display: inline-block; background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0 6px; font-size: 12px; margin-left: 5px; color: var(--muted); font-family: var(--sans); font-weight: 600; }
/* A tab that lists a DIFFERENT KIND OF THING from the ones before it (RMA:
eight tabs of parts, then one of shipments). A rule rather than a gap,
because a gap in a wrapping strip disappears the moment the strip wraps. */
.tab.rw-tabsep { margin-left: 10px; padding-left: 17px; border-left: 1px solid var(--border); }
.tab-panel[hidden] { display: none; }
/* ---- A tab's own toolbar: what it says on the left, what it does on the right.
Used by the pages that are TABS of a shell (#/sales-settings, the adjustments
screen) rather than pages in their own right: the shell drew the h1 and the
rule under it, so a second .page-head here would draw a second rule and a
second title. `.end` is the same row with nothing to say — controls only. */
.tab-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: -4px 0 14px; }
.tab-bar.end { justify-content: flex-end; }
.tab-bar > .muted { font-size: 12.5px; max-width: 92ch; flex: 1 1 380px; min-width: 0; }
.tab-bar > .row-gap { flex: 0 0 auto; }
.tab-panel .form-card { max-width: 620px; }
/* ---- Compatibility editor (compat.js) ---- */
.attr-row { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; background: var(--panel); }
.attr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.attr-label { font-weight: 600; font-size: 14px; }
.attr-row .hint, .rule-row .hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.rule-row { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; background: var(--panel); }
.rule-sentence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-attr { font-weight: 600; font-size: 14px; }
.rule-sentence select.rule-op { width: auto; min-width: 105px; }
.rule-value { flex: 1; min-width: 180px; }
.rule-preview { margin-top: 7px; font-size: 13.5px; color: var(--text); background: var(--chip); border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 6px 9px; }
.pv-tag { font-size: 11px; font-weight: 700; color: var(--muted); margin-right: 6px; }
/* chips multi-select (enum values) */
.chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.chip-sel { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 2px 5px 2px 9px; font-size: 13.5px; }
.chip-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; }
.chip-x:hover { color: var(--bad); }
.chips select.chip-add { width: auto; min-width: 140px; }
/* yes/no segmented toggle (boolean values) */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; }
.seg-btn { font: inherit; background: var(--panel); color: var(--muted); border: none; padding: 5px 14px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border-strong); }
.seg-btn.on { background: var(--ink-btn); color: var(--ink-btn-ink); font-weight: 600; }
/* A .field is a flex column, so an inline-flex child still gets stretched to
the full track — a two-button toggle came out as a card-wide bar. A segmented
control is sized by its options, always. */
.field > .seg { align-self: flex-start; }
.num-wrap { display: inline-flex; align-items: center; gap: 7px; }
.num-wrap input { width: 130px; }
.num-wrap .unit { color: var(--muted); font-size: 13.5px; }
/* attribute picker (search + grouped list) */
.picker { border: 1px solid var(--border-strong); border-radius: var(--r); margin: 4px 0 12px; background: var(--panel); overflow: hidden; }
.picker .pick-search { width: 100%; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 9px 11px; }
.picker .pick-search:focus { box-shadow: none; }
.pick-list { max-height: 300px; overflow: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.pick-list::-webkit-scrollbar { width: 10px; }
.pick-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid var(--panel); }
.pick-list::-webkit-scrollbar-track { background: transparent; }
.pick-group { font-size: 11px; font-weight: 700; color: var(--muted); padding: 9px 11px 3px; letter-spacing: 0.04em; text-transform: uppercase; }
/* The heading stays put while its own rows scroll under it. A list long enough
to scroll is a list where "am I still in the custom ranges?" is a live
question, and the answer was the first thing to leave the screen. */
.pick-list > .pick-group { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.pick-item { display: block; width: 100%; text-align: left; font: inherit; background: none; border: none; cursor: pointer; padding: 6px 11px; color: var(--text); }
.pick-item:hover { background: var(--panel2); }
/* THE ROW THAT STAYS CHOSEN. Everywhere else a pick closes its list, so there
was never a selected state to draw; the batch parts door keeps the list on
screen and asks what to do to the part, so the part has to stay visible. */
.pick-item.on { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.pick-label { display: block; font-size: 14px; font-weight: 600; }
.pick-desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-empty { color: var(--muted); padding: 14px; text-align: center; font-size: 14px; }
/* A DROPDOWN YOU CAN TYPE INTO (2026-09-17). A native select only searches by
first letter, which in a four-hundred-row category tree is not searching. The
select is still there, still the value — this is the box in front of it. It
wears the same border and focus ring as every other control because it IS the
control now; only the popup is ours. */
.combo { position: relative; }
.combo-list {
position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 3px);
max-height: 280px; overflow: auto; overscroll-behavior: contain;
background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r);
box-shadow: 0 10px 26px -14px var(--shadow); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.combo-list::-webkit-scrollbar { width: 10px; }
.combo-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid var(--panel); }
.combo-list::-webkit-scrollbar-track { background: transparent; }
.combo-opt { padding: 7px 11px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt:hover, .combo-opt.active { background: var(--panel2); }
/* What is CHOSEN and what the arrow keys are ON are two different facts, and on
a filtered list they are usually different rows. */
.combo-opt.on { box-shadow: inset 2px 0 0 var(--accent); font-weight: 600; }
.combo-empty { color: var(--muted); padding: 12px; text-align: center; font-size: 13.5px; }
/* One fact on the grey line is not grey: a recipe with nothing in it is the one
thing on that row you would want to know before you picked it. */
.pick-desc .flag-warn { color: var(--warn); font-weight: 600; }
/* A TICKABLE row (0140) — matching a bill to a delivery, or a delivery to
bills. Same list furniture as .pick-item, but it is a checkbox: the point is
that several can be true at once. */
.pick-row { display: flex; gap: 9px; align-items: flex-start; padding: 7px 11px; cursor: pointer; border-bottom: 1px solid var(--border); }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--panel2); }
.pick-row input { margin-top: 3px; }
.pick-row span { min-width: 0; }
.pick-item.on { background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent); }
/* The second list (0076). The strip is deliberately quiet — it is an offer, not
a result — and it sits under everything so it never competes with a real hit.
A row in the unlisted list carries its own call to action, because picking it
does something extra: it brings the product back. */
.pick-more {
display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px;
background: none; border: none; border-top: 1px solid var(--border); cursor: pointer;
padding: 8px 11px; color: var(--muted);
}
.pick-more:hover { background: var(--panel2); color: var(--text); }
/* THE TWO FACTS A PICKER EXISTS TO DELIVER (owner, 2026-09-14: "the 9-available
... is really hard to see"). Stock and cost used to be the fourth and fifth
clause of a grey `·` sentence, in the same 12.5px muted grey as the product's
name. They are a right-hand column now: number over caption, stock coloured
by what it means — green when there is some, amber when there is none, red
when it is already oversold — and cost deliberately NOT coloured, because a
number that is neither good nor bad earns its contrast from weight. */
.pick-item.has-meta { display: flex; align-items: center; gap: 12px; }
.pick-main { flex: 1 1 auto; min-width: 0; }
.pick-meta { flex: none; display: flex; align-items: stretch; gap: 6px; }
/* 66px of box with 8px of padding each side left 50px for a number that is
routinely 70px wide ($1,414.46), so every pill in the app was being pushed
past its own minimum with its digits against the wall. Sized for the number
it actually holds, and 5px of vertical padding so the caption underneath is
not touching it. */
.pick-stock, .pick-cost {
display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
gap: 2px; min-width: 74px; padding: 5px 9px; border-radius: var(--r-sm);
border: 1px solid transparent;
}
.pick-stock b, .pick-cost b { font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1.1; }
.pick-stock small, .pick-cost small {
font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
}
.pick-stock.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.pick-stock.none { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.pick-stock.over { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.pick-cost { background: var(--panel2); border-color: var(--border); color: var(--text); }
.pick-cost small { color: var(--muted); }
.pick-cost.none b { color: var(--faint); }
.pick-item:hover .pick-cost { border-color: var(--border-strong); }
.pick-item[data-relist] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick-item[data-relist] .pick-main { flex: 1 1 auto; min-width: 0; }
.pick-item[disabled] { cursor: default; opacity: 0.55; }
.pick-cta { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--accent); }
.pick-cta.muted { color: var(--muted); font-weight: 600; }
/* Search box + category narrowing, one bar. The category is a second way IN,
not a filter applied afterwards — you go to Graphics Cards because you don't
know the SKU — so it sits beside the box, not above the results. */
.pick-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.pick-head .pick-search { flex: 1; min-width: 0; border-bottom: none; }
.pick-head .pick-cat-host { flex: none; display: flex; }
.pick-cat {
border: none; border-left: 1px solid var(--border); border-radius: 0;
background: var(--panel2); color: var(--muted); font-size: 12.5px;
max-width: 220px; padding: 0 9px;
}
/* THE CLOSED CONTROL IS NARROW; THE OPEN LIST MUST NOT BE (Vignesh, 2026-09-22).
Chrome sizes a select's option popup to the select itself, so a 220px control
served three hundred category names chopped mid-word — which is what his
screenshot shows. `text-overflow` keeps the CLOSED state tidy at its own
width, and the grouped labels (see mountCategoryFilter) are short enough to
read inside it now that a row says its own name instead of its whole path. */
.pick-cat { text-overflow: ellipsis; }
.pick-cat optgroup { font-style: normal; font-weight: 600; color: var(--text); }
.pick-cat option { font-weight: 400; color: var(--text); }
.pick-cat:focus { box-shadow: none; color: var(--text); }
/* A timeline read as sentences rather than a table — one entry per rule change,
each with its timestamp above it. */
.plain-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.plain-list li { padding: 7px 0; border-top: 1px solid var(--border); line-height: 1.45; }
.plain-list li:first-child { border-top: none; padding-top: 0; }
/* What a mounted picker settled on, with the way back out. */
.pick-chosen { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 7px 0 0; flex-wrap: wrap; }
/* The code reads as a code and the name reads as a name, with a rule between
them (Neel, 2026-09-22). The name takes the slack so the Change button stays
on the right-hand end of the row wherever the picker is embedded. */
.pick-chosen-sku { color: var(--text); }
.pick-chosen-name { flex: 1 1 auto; min-width: 0; color: var(--muted);
border-left: 1px solid var(--border); padding-left: 8px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Combobox: a select you can type at. The input IS the box, so the control
reads as one field rather than a border inside a border, and the hit list
floats over the page — opening it must not shove the recipe below down. */
.mp { position: relative; overflow: visible; }
.mp:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.mp .mp-in { border: none; border-radius: var(--r); }
.mp .mp-in:focus { box-shadow: none; }
.mp .mp-list { position: absolute; z-index: 30; left: -1px; right: -1px; top: calc(100% + 5px);
max-height: 380px; background: var(--panel); border: 1px solid var(--border-strong);
border-radius: var(--r); box-shadow: var(--shadow-md); padding-bottom: 4px; }
/* ---- Compatibility violations panel (models / builds / swaps) ---- */
.compat-ok { color: var(--ok); font-size: 14px; padding: 2px 0; font-weight: 500; }
.compat-violations { display: flex; flex-direction: column; gap: 5px; }
.cv { display: flex; gap: 8px; font-size: 13.5px; border-radius: var(--r); padding: 6px 9px; border: 1px solid var(--border); }
.cv-error { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.cv-warning { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.cv-info { background: var(--chip); color: var(--muted); }
.cv-ic { flex: none; font-weight: 700; }
/* QC checklist rows inside the stage prompt */
.qc-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.qc-label { flex: 1; font-size: 14px; }
/* ---- Help & guides (System module) ---- */
.help-wrap { display: flex; gap: 22px; align-items: flex-start; }
.help-nav { flex: none; width: 240px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 1px; }
.help-nav a { display: block; padding: 6px 10px; border-radius: var(--r); color: var(--muted); text-decoration: none; font-size: 14px; }
.help-nav a:hover { background: var(--panel2); color: var(--text); }
.help-nav a.active { background: var(--panel2); color: var(--text); font-weight: 600; }
.help-body { flex: 1; min-width: 0; max-width: 720px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 26px 26px; }
.help-body h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 22px 0 6px; }
.help-body h3 { font-size: 16px; font-weight: 600; margin: 20px 0 4px; }
.help-body h4 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 16px 0 2px; }
.help-body p { font-size: 14.5px; line-height: 1.62; margin: 8px 0; color: var(--text); }
.help-body ul, .help-body ol { font-size: 14.5px; line-height: 1.6; padding-left: 22px; margin: 8px 0; }
.help-body li { margin: 3px 0; }
.help-body code { font-family: var(--mono); font-size: 13px; background: var(--chip); border: 1px solid var(--border); border-radius: var(--r); padding: 0 4px; }
.help-body strong { font-weight: 600; }
.help-body a { color: var(--accent); }
.help-table { margin: 12px 0; font-size: 14px; border: 1px solid var(--border); }
.help-table th { background: var(--panel2); text-align: left; }
@media (max-width: 820px) { .help-wrap { flex-direction: column; } .help-nav { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; } }
/* ---- Build stage stepper (mfg.js) ---- */
.stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.step.past { color: var(--text); }
.step.now { color: var(--text); font-weight: 700; }
/* PC registry detail: the machine's life — main column of episodes + a rail. */
.pc-life { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 1060px) { .pc-life { grid-template-columns: 1fr; } }
/* ==========================================================================
THE SYSTEM CARD, REDESIGNED (owner directive, 2026-09-01)
Proposal it was drawn against: docs/mockups/system-card.html
--------------------------------------------------------------------------
The page had become a stack of white boxes of equal visual weight, each one a
table, none of them saying which mattered. Four moves, each with a reason:
1. THE SERIAL IS THE NAME OF THE THING. It was 25px, the same size as every
other page title in the app, sitting above six cards of the same colour.
It is the only object on this page.
2. A FACT STRIP instead of two rail cards. Model, customer, order, branch,
promise and warranty are what you check first, and they were in two
stacked boxes off to the right of everything.
3. A NOTE IS PROSE, so it gets the width. It was in a four-column grid
where a sentence competed with three short cells.
4. TESTING INFORMATION IS ATTRIBUTES, not rows to compare — a definition
grid reads them; a three-column table spends half its width on gutters.
Everything below is prefixed `sc-` and used nowhere else, so none of it can
reach another screen.
========================================================================== */
/* ---- 1. the head ---- */
.sc-serial {
font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
margin: 4px 0 0; font-variant-numeric: tabular-nums;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 620px) { .sc-serial { font-size: 27px; } }
.badge.big { font-size: 13px; padding: 4px 13px; }
/* The serial is a copy button wearing the heading's clothes: same size, same
weight, no chrome, and a glyph that turns up when you reach for it. It is the
string most often retyped off this page by eye. */
.sc-serial-copy {
font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
text-align: left; max-width: 100%; overflow-wrap: anywhere;
}
.sc-serial-copy .ic {
font-size: 15px; font-weight: 500; color: var(--faint);
opacity: 0; transition: opacity 0.12s;
}
.sc-serial-copy:hover { color: var(--accent); }
.sc-serial-copy:hover .ic, .sc-serial-copy:focus-visible .ic { opacity: 1; }
@media (hover: none) { .sc-serial-copy .ic { opacity: 1; } }
/* ---- 1b. the identity row: SKU and name, under the serial ---- */
/* Three strings get taken off this page all day — the serial, the SKU and the
name — so they read as one row of labelled values rather than a heading, a
sentence and a sub-line in a fact cell. The SKU keeps a separate button to
the catalogue: the value copies, the button leaves.
The gap BETWEEN values is far wider than the gap inside one, or the SKU's
button reads as though it belongs to the label after it. */
.sc-ident { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 30px; margin-top: 7px; }
.sc-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.sc-id-k {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--faint); flex: none;
}
/* OPEN THE PRODUCT — a real button, not a character in a sentence. The owner
asked on 2026-09-16 for it to be about twice the size and to wear a better
mark than an arrow. So: roughly twice the table arrow's target, the panel
fill and border that say "press me", and an icon sized to the row's value
rather than to the 12px sub-line the SKU used to live in. */
.sc-open {
flex: none; display: inline-grid; place-items: center;
width: 32px; height: 32px; border-radius: var(--r-sm);
border: 1px solid var(--border); background: var(--panel2);
color: var(--muted); text-decoration: none;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.sc-open svg { width: 19px; height: 19px; }
.sc-open:hover, .sc-open:focus-visible {
color: var(--accent); border-color: var(--border-strong); background: var(--panel3);
}
/* ---- 2. the fact strip ---- */
.sc-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
margin: 4px 0 14px; overflow: hidden;
}
.sc-fact { padding: 12px 16px; border-right: 1px solid var(--border); min-width: 0; }
.sc-fact:last-child { border-right: none; }
.sc-k {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--faint);
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.sc-fact-v { font-size: 14.5px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.sc-fact-v .sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 1px; }
@media (max-width: 900px) { .sc-fact { border-right: none; border-bottom: 1px solid var(--border); } }
/* ---- 3. the notes timeline ---- */
/* DENSE (owner, 2026-09-01: "the notes are WAY WAY WAY too big").
The first cut gave a note 15px prose, 1.5 line-height, 13px of padding and a
96px chip gutter — which is right for one note and absurd for eight, because
six of them are one line long and the slice ate the screen before the machine
itself got a look in. Same shape, a third of the height: the chip shrinks to
what the word needs, the meta goes on the SAME line as the text where it
fits, and the row breathes 7px instead of 13.
What did NOT shrink is the pinned treatment. That one is a person saying
"read this before you touch it", and he asked for it by name. */
/* IN THE RAIL NOW, so no chip gutter and no grid: the source is a tiny inline
word ahead of the text, and 320px of column is plenty for a sentence. */
.sc-note { padding: 6px 14px; border-bottom: 1px solid var(--border); }
.sc-note:last-of-type { border-bottom: none; }
.sc-note:hover { background: var(--panel3); }
/* A pinned note is the one row allowed to shout. `inset` rather than a
border-left: a border would shift the chip gutter and break the column
alignment down the list. */
.sc-note.pinned, .sc-note.pinned:hover { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); }
.sc-src {
display: inline; margin-right: 6px;
font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
border-radius: 3px; padding: 1px 5px;
background: var(--chip); border: 1px solid var(--border); color: var(--muted);
white-space: nowrap;
}
/* The source is a WORD, not a link (owner asked for exactly that): you are
reading what happened to a machine, not navigating to a task. Colour tells
the four kinds apart without spending a column on it. */
.sc-src.build { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.sc-src.test { background: var(--accent-wash); border-color: var(--accent-wash-bd); color: var(--accent); }
.sc-src.pick { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.sc-src.record { background: var(--chip); border-color: var(--border-strong); color: var(--muted); }
/* No `.sc-note-step`: the step a note was written at is detail for the task
screen, not for a 320px rail. */
.sc-note-body { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
/* The byline reads UNDER the note here rather than floating beside it: at this
width a floated byline steals half the first line and the prose wraps against
it after four words. */
.sc-note-meta { font-size: 11px; color: var(--faint); margin-top: 1px; }
.sc-note-meta b { color: var(--muted); font-weight: 600; }
.sc-note-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--panel3); }
.sc-note-add input[type="text"] { flex: 1 1 140px; min-width: 0; padding: 4px 9px; font-size: 13px; }
.sc-note-add .check { font-size: 12px; color: var(--muted); }
.sc-note-empty { padding: 10px 14px; font-size: 12.5px; }
/* The rail is a narrow column of small cards; a scrollbar on each one is noise.
A long note wraps, it does not scroll sideways. */
.card.np.sc-notes { overflow-x: visible; }
/* Two stamps, day over clock — see stampCell. */
.sc-stamp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-stamp .muted { font-size: 12px; }
/* Shipping, when there is nothing to consign. */
.sc-ship-word { font-size: 14px; font-weight: 600; padding: 2px 0 6px; }
/* ---- 4. the assembly track ---- */
/* It was seven words in a row with dots, which at a glance is seven words. A
filled track reads as progress before you read anything. */
.sc-track { display: flex; gap: 3px; padding: 14px 16px 0; }
.sc-seg { flex: 1; min-width: 0; }
.sc-seg-bar { height: 5px; border-radius: var(--r-pill); background: var(--panel2); }
.sc-seg.past .sc-seg-bar { background: var(--ok); }
.sc-seg.now .sc-seg-bar { background: var(--accent-deep); }
.sc-seg-k {
display: block; margin-top: 6px; font-size: 11px; font-weight: 600;
letter-spacing: 0.03em; color: var(--faint);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-seg.past .sc-seg-k { color: var(--muted); }
.sc-seg.now .sc-seg-k { color: var(--text); font-weight: 800; }
.sc-track-note { padding: 10px 16px 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
/* ---- 5. the assembly table ---- */
/* ---- the assembly table, one line per row ----
Every cell was two lines: name over badge, day over clock, number over bar.
Five columns of that is a table twice the height it needs, on a card you read
to see where a machine is up to. */
/* SPECIFICITY, DELIBERATELY. `.card.np td:nth-child(2|3|4)` above sets
`white-space: normal` for the wide-table pages, and a bare `.sc-asm td` loses
to it — which put the clock on a second line in Started and Completed and made
the row 56px again after all this. Qualified with `.card.np table` so it wins
on element count. */
.card.np table.sc-asm th, .card.np table.sc-asm td { padding: 6px 16px; white-space: nowrap; }
.card.np table.sc-asm td { font-size: 13.5px; }
.sc-task-n { font-weight: 700; }
/* A column where every cell is a link should not be a column of red. */
.sc-task-n a { color: inherit; }
.sc-task-n a:hover { color: var(--accent); }
/* The normal case is small grey words, not a pill. A pill that means "nothing is
wrong" trains you to stop reading pills. */
.sc-task-state { font-size: 12px; color: var(--muted); }
.sc-run { font-size: 12px; font-weight: 600; color: var(--info); }
.card.np tr.sc-pending td { color: var(--faint); }
.card.np tr.sc-pending .sc-task-n { font-weight: 600; color: var(--muted); }
/* No `.sc-reentry` rule: the Assembly table is one row per task, full stop. A
task worked twice sums its time into that one row — it does not grow a second
one. (The FINISHED-build record, buildEpisodeHtml, does show a row per visit,
and always has: that card is the device history, where each visit is the
point.) */
/* No `.sc-who` / `.sc-pip`: the avatar circle beside every operator name set the
row height on its own and held the two letters the name already starts with. */
/* The time column is the one number anybody compares down the page, so it keeps
its bar — but as a 2px rule UNDER the number, inside the same line, rather
than a block that adds a second one. Width is set inline: it is data. */
.sc-dur { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; position: relative; }
.sc-durbar {
position: absolute; right: 16px; bottom: 3px; height: 2px;
border-radius: var(--r-pill); background: var(--border-strong);
}
/* ---- 5b. copy a value out of the identity row ---- */
/* A SKU is meant to be TAKEN: it gets pasted into Shopify, a supplier email and
a spreadsheet all day, and so is the name beside it. So each is a button that
looks like the value, with the copy glyph appearing on hover — visible enough
to invite the click, quiet enough not to read as a control in a row of plain
facts. It reads at full value weight because it sits under the title now, not
as a sub-line in a fact cell (2026-09-16). */
.sc-copy {
font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
color: var(--text); background: none; border: 0; padding: 0; margin: 0;
cursor: pointer; display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
text-align: left; overflow-wrap: anywhere;
}
.sc-copy .ic { color: var(--faint); font-size: 11px; opacity: 0; transition: opacity 0.12s; }
.sc-copy:hover { color: var(--accent); }
.sc-copy:hover .ic, .sc-copy:focus-visible .ic { opacity: 1; }
@media (hover: none) { .sc-copy .ic { opacity: 1; } }
/* No `.sc-cs-warn`: the yellow panel that used to head the calls slice said, in
a sentence, what the badge on the row under it says in a word. Removed
2026-09-01. */
/* ---- 6. records: four lines, no chrome ---- */
.sc-rec { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.sc-rec + .sc-rec { border-top: 1px solid var(--border); }
/* A button that reads as a link, because opening a document is navigation. */
.sc-rec-open {
font: inherit; font-size: 13px; font-weight: 600; padding: 0; border: 0; background: none;
color: var(--accent); cursor: pointer; text-align: left;
}
.sc-rec-open:hover { text-decoration: underline; }
.sc-rec-v { flex: 0 0 auto; text-align: right; }
/* ---- 7. testing information ---- */
/* A TABLE. The definition grid that was here carried a `.sc-def-n` explanation
under every value — help text, who typed it, when — which is four extra lines
of grey on a card you open to read four values. The help belongs where the
value is ENTERED, not where it is read. */
.sc-answer { font-weight: 600; }
.sc-answer .muted { font-weight: 500; }
.sc-answer .sc-file { margin-right: 4px; }
.sc-file {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
font-size: 13px; font-weight: 600; text-decoration: none; color: var(--accent);
background: var(--panel3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 9px;
}
.sc-file:hover { border-color: var(--border-strong); }
.sc-file .sz { color: var(--faint); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Dashed, because it is a value that is being WITHHELD rather than displayed. */
.sc-secret {
font-family: var(--mono); letter-spacing: 0.14em; font-size: 15px;
background: var(--panel2); border: 1px dashed var(--border-strong);
border-radius: var(--r-sm); padding: 3px 10px;
}
/* ---------------------------------------------------------------- service
The ticket is a process, so the page reads top-to-bottom as one: a stage
strip, then a card per phase. Deliberately NOT a three-column workspace —
every other page here is table-first, and a 650px work area between two
permanent rails would be the odd one out. */
.svc-stagebar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.svc-stagebtn {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel);
color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.svc-stagebtn:hover { border-color: var(--border-strong); color: var(--text); }
.svc-stagebtn.active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.svc-count { font-variant-numeric: tabular-nums; opacity: .8; }
tr.svc-late td:first-child { box-shadow: inset 2px 0 0 var(--bad); }
.svc-flags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
/* The stage strip: where the machine is, and where it can go next. */
.svc-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; }
.svc-step {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px;
border: 1px solid var(--border); border-radius: var(--r); background: var(--panel);
color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.svc-step i {
display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 auto;
border-radius: 50%; border: 1px solid var(--border-strong);
font-size: 10.5px; font-style: normal; font-variant-numeric: tabular-nums;
}
.svc-step:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.svc-step.done { color: var(--ok); }
.svc-step.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.svc-step.now { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.svc-step.now i { background: var(--accent); border-color: var(--accent); color: #fff; }
.svc-step:disabled { cursor: default; opacity: .75; }
/* Card internals. */
.svc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.svc-head h2 { margin: 0 0 2px; }
.svc-sub { margin: 0 0 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.svc-empty { margin-top: 10px; padding: 13px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r); color: var(--muted); font-size: 13px; }
/* A movement that was taken back (0137). It stays on the table — the reason
anybody reads this page later is to find the wrong part somebody fitted —
but it must not read as work, so it recedes rather than shouting. Only the
SKU is struck through: the columns beside it carry WHY it was taken back,
and a line through the explanation helps nobody. */
.svc-struck > td { opacity: .6; }
.svc-struck > td:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--muted); }
.svc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin-top: 12px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.svc-facts > div { background: var(--panel3); padding: 10px 12px; }
.svc-facts span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.svc-facts strong { font-size: 13px; font-weight: 600; line-height: 1.4; }
.svc-kv, .svc-perm { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.svc-kv > span, .svc-perm > span:first-child { color: var(--muted); }
.svc-kv > strong { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.svc-perms { margin-bottom: 4px; }
.svc-note { margin-top: 12px; padding: 11px 13px; background: var(--panel3); border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.svc-quote { margin-top: 14px; padding: 12px 14px; background: var(--panel2); border-radius: var(--r); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.svc-history { margin-top: 12px; font-size: 13px; }
.svc-history summary { cursor: pointer; color: var(--muted); }
.svc-mini { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.svc-mini th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 8px; background: var(--panel3); }
.svc-mini td { padding: 6px 8px; border-top: 1px solid var(--border); }
/* The release gate. */
/* One line of a parts basket. Boxed so four of them read as four decisions
rather than one very long form. */
.op-line { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 13px; margin-bottom: 10px; background: var(--panel3); }
.op-line-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.op-lines .op-line:only-child .op-drop { display: none; }
/* Has the customer paid? One row, stated once, beside the release button that
depends on it — never a banner repeating a fact the row already carries. */
.svc-pay { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-top: 12px; padding: 11px 13px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel3); font-size: 13px; }
.svc-pay.ok { background: var(--ok-bg); border-color: var(--ok-bd); }
.svc-pay.bad { background: var(--bad-bg); border-color: var(--bad-bd); }
.svc-qc { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.svc-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--border); cursor: pointer; }
.svc-check:last-child { border-bottom: 0; }
.svc-check:hover { background: var(--panel3); }
.svc-check.on { background: var(--ok-bg); }
.svc-check input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--ok); }
.svc-check span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-check b { font-size: 13px; font-weight: 600; }
.svc-check small { font-size: 11.5px; color: var(--muted); }
.svc-evi { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* Evidence. */
.svc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 13px; }
.svc-evi-item { margin: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.svc-evi-item.missing { border-style: dashed; opacity: .7; }
.svc-thumb { display: grid; place-items: center; height: 96px; background: var(--panel2); overflow: hidden; }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.svc-kindmark, .svc-missing { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.svc-missing { color: var(--bad); }
.svc-evi-item figcaption { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; font-size: 11.5px; }
.svc-evi-item figcaption b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-drop { margin-top: 13px; padding: 15px; border: 1px dashed var(--border-strong); border-radius: var(--r); text-align: center; color: var(--muted); font-size: 12.5px; }
.svc-drop.over { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
/* Activity, straight off the ledger. */
.svc-timeline { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--border); }
.svc-timeline li { position: relative; padding: 5px 0 5px 12px; font-size: 13px; }
.svc-timeline li::before { content: ""; position: absolute; left: -19px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px var(--panel); }
.svc-timeline li.ok::before { background: var(--ok); }
.svc-timeline li.bad::before { background: var(--bad); }
.svc-when { display: inline-block; min-width: 140px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.svc-who { float: right; font-size: 11.5px; }
/* A text button that lives inside a table cell or a checklist row. */
.btn-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--bad); }
@media (max-width: 760px) {
.svc-when { display: block; min-width: 0; }
.svc-who { float: none; display: block; }
}
/* ==========================================================================
PRODUCTION FLOOR (migration 0051) — the plan of the room, the task boards,
the working screen for one task, and the numbers.
The floor plan is the only place in the app that draws absolute positions:
stations carry x/y/w/h in the database because a manager arranges them to
match the real room. Everything else here is ordinary card/table furniture
in the house style — the floor should not look like a different product.
========================================================================== */
.pf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill);
font-size: 11.5px; font-weight: 700; background: var(--chip); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.pf-pill.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.pf-pill.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.pf-pill.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.pf-pill.ghost { background: transparent; }
/* ============================================================== THE QUEUE
Five tabs, one row per machine, grouped by promise date (owner, 2026-09-01).
Everything here is the house kit — .card, .pf-filters, .pf-views, .btn — plus
four things the kit did not have: a date-group band, an editable promise
date, and the full-width parts row under a machine with its yes/no grid. */
.q-head { display: flex; align-items: center; gap: 14px; padding: 11px 16px;
font-size: 12.5px; border-bottom: 1px solid var(--border); }
.q-stats { margin-left: auto; display: flex; gap: 16px; color: var(--muted); }
.q-stats b { color: var(--text); }
.pf-view .q-late { width: 6px; height: 6px; border-radius: 50%; background: var(--bad);
display: inline-block; margin-left: 6px; vertical-align: 1px; }
table.q-list { table-layout: fixed; width: 100%; border-collapse: collapse; }
table.q-list th { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--muted); text-align: left; padding: 8px 14px; background: var(--panel3);
border-bottom: 1px solid var(--border); }
table.q-list td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.q-list td .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* THE DATE BAND. A group heading is not a row of data, so it does not read like
one: no hover, no cursor, and the overdue band carries the only red on the
page that is not a word. */
tr.q-grp td { background: var(--panel3); padding: 5px 14px; font-size: 11.5px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
tr.q-grp.late td { background: var(--bad-bg); color: var(--bad); }
tr.q-mrow > td { border-bottom: 0; }
.q-when { font-weight: 700; }
.q-serial { font-weight: 700; }
.q-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.q-dot.ok { background: var(--ok); } .q-dot.warn { background: var(--warn); }
.q-dot.bad { background: var(--bad); } .q-dot.grey { background: var(--faint); }
/* The promise date, edited in place. The pencil rests invisible-ish and comes
up on the row, so a column of them does not read as a column of buttons. */
.q-pen { font: inherit; font-size: 12px; line-height: 1; background: none; border: 0;
padding: 1px 4px; margin-left: 2px; color: var(--faint); cursor: pointer; border-radius: var(--r-sm); }
tr:hover .q-pen { color: var(--accent); background: var(--accent-wash); }
/* Outside a table there is no row to hover, so the one on the floor task's
detail card stays legible on its own — it is a single control beside a single
date, not a column of them. */
.pf-kv .q-pen { color: var(--muted); }
.pf-kv .q-pen:hover { color: var(--accent); background: var(--accent-wash); }
.q-pen:focus-visible { outline: none; box-shadow: var(--ring); }
/* THE PARTS, as a full-width row under the machine they belong to. */
tr.q-parts > td { background: var(--panel3); padding: 0 14px 12px; }
.q-expand { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); background: none;
border: 0; padding: 8px 2px; cursor: pointer; display: flex; align-items: center; gap: 7px; text-align: left; }
.q-expand .caret { font-size: 10px; transition: transform .12s; }
.q-expand.on .caret { transform: rotate(90deg); }
.q-expand .which { font-weight: 500; color: var(--muted); }
.q-grid { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
background: var(--panel); margin-bottom: 4px; }
.q-grid table { width: 100%; border-collapse: collapse; }
.q-grid th { background: var(--panel); font-size: 10.5px; padding: 6px 12px; }
.q-grid td { padding: 6px 12px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.q-grid tbody tr:last-child td { border-bottom: 0; }
.q-sku { font-weight: 700; }
/* An allocated part is the quiet case: the eye should land on the No. */
.q-no { color: var(--bad); font-weight: 700; }
.bad-text { color: var(--bad); }
.warn-text { color: var(--warn); }
.pf-who { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; background: var(--panel2);
border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 5px 3px 12px; }
.pf-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; padding: 6px 0; cursor: pointer; }
.pf-check input { width: auto; margin-top: 2px; }
.pf-radios, .pf-checks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 13.5px; }
.pf-radios label, .pf-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pf-radios input, .pf-checks input { width: auto; }
.banner.tight { padding: 8px 11px; font-size: 13px; margin-bottom: 8px; display: block; }
.banner.tight .sub { font-size: 12px; font-weight: 500; opacity: .85; margin-top: 2px; }
/* ---- the short-pick line on a system record ----
Deliberately NOT a banner. That a machine is short is already said by the chip
beside its serial and by its own Pick task row; a third red bar listing the
same SKUs is noise. This is the detail behind them — one muted line, opened
only by somebody who wants the numbers. (owner, 2026-08-26) */
.pick-short { margin: 8px 14px 12px; font-size: 12.5px; }
.pick-short > summary { cursor: pointer; color: var(--muted); width: fit-content; }
.pick-short > summary:hover { color: var(--text); }
.pick-short-body { margin: 6px 0 0 15px; display: grid; gap: 3px; color: var(--muted); line-height: 1.5; }
.pick-short-body b { color: var(--text); font-weight: 600; }
/* ---- label / value row for prose (mfg.js kvl) ----
`minmax(0,1fr)` lets the value column shrink; `overflow-wrap:anywhere` is what
makes an email address or a Shopify order number WRAP inside it instead of
running out through the side of a 300px card. */
.kvl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 3px 0; font-size: 13px; }
.kvl > span:first-child { padding-top: 1px; white-space: nowrap; }
.kvl > span:last-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.kvl .mono { overflow-wrap: anywhere; }
.pf-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* ---- the search that answers "where the hell is it" ---- */
.pf-find { padding: 14px 16px; margin-bottom: 14px; }
.pf-find-l { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 5px; }
.pf-find input { font-size: 15px; }
.pf-find .sub { margin-top: 5px; }
.pf-hit { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr); gap: 10px; align-items: baseline;
padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r); margin-top: 8px; background: var(--panel3); cursor: pointer; }
.pf-hit:hover { border-color: var(--accent); background: var(--accent-wash); }
.pf-hit .a { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.pf-hit .c { font-size: 12.5px; color: var(--muted); display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pf-hit.none { display: block; cursor: default; color: var(--muted); }
.pf-hit.none:hover { border-color: var(--border); background: var(--panel3); }
/* ---- one hall at a time (0142) ---- */
/* The building has more than one room and the plan draws one of them. The tabs
sit above the finder because the finder answers for the WHOLE building —
putting them under it would read as though it searched the hall on screen. */
.pf-halls { margin-bottom: 14px; }
.pf-kpis { margin-bottom: 4px; }
.pf-slotline { margin: 0 2px 14px; }
/* ---- the plan itself ---- */
.pf-canvas-wrap { overflow: auto; padding: 0; }
.pf-canvas { position: relative; background: var(--panel3); }
.pf-canvas.edit { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 20px 20px; background-position: -1px -1px; background-color: var(--panel); }
.pf-st { position: absolute; display: flex; flex-direction: column; overflow: hidden;
background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-sm); }
.pf-st .pf-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 8px;
background: var(--panel2); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pf-st .pf-head .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.pf-st .pf-body { flex: 1; padding: 6px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.pf-st.busy { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash), var(--shadow-sm); }
.pf-st.wait { border-color: var(--warn-bd); }
.pf-st.bad { border-color: var(--bad-solid); box-shadow: 0 0 0 2px var(--bad-bg), var(--shadow-sm); }
.pf-st.off { opacity: .45; }
/* The head's colour is the KIND's, picked from a closed set on its row (0156).
These used to be keyed off the kind itself (.rack, .shelf, .air, .qc), which
meant a kind the owner invented drew in no colour at all. */
.pf-st.t-ok .pf-head { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.pf-st.t-info .pf-head { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.pf-st.t-warn .pf-head { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.pf-st.t-bad .pf-head { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-bd); }
.pf-st.t-accent .pf-head { background: var(--accent-wash); color: var(--accent-hover); border-color: var(--accent-wash-bd); }
/* A MARKER is a name drawn on the plan, not a place: no fill, no shadow, a
dashed outline. Was `.label` until the kind became a flag. */
.pf-st.marker { background: transparent; border-style: dashed; box-shadow: none; }
.pf-st.marker .pf-body { align-items: center; justify-content: center; color: var(--faint); font-weight: 700;
text-transform: uppercase; letter-spacing: .09em; font-size: 11px; }
.pf-free { color: var(--faint); font-size: 11.5px; font-style: italic; }
.pf-occ { border-radius: 6px; padding: 4px 7px; background: var(--accent-wash); border: 1px solid var(--accent-wash-bd);
line-height: 1.32; cursor: pointer; }
.pf-occ:hover { border-color: var(--accent); }
.pf-occ.bad { background: var(--bad-bg); border-color: var(--bad-bd); }
.pf-occ b { display: block; font-size: 11.5px; font-family: var(--mono); }
.pf-occ span { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-occ .st { text-transform: uppercase; letter-spacing: .03em; font-weight: 700; font-size: 9.5px; }
.pf-slots { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 3px; }
.pf-slot { border: 1px solid var(--border); border-radius: 5px; background: var(--panel3); padding: 2px 4px;
min-height: 28px; font-size: 9.5px; line-height: 1.25; color: var(--faint); }
.pf-slot .n { display: block; font-variant-numeric: tabular-nums; }
.pf-slot b { font-family: var(--mono); font-size: 10px; color: var(--text); }
.pf-slot.busy { background: var(--accent-wash); border-color: var(--accent); cursor: pointer; }
.pf-slot.wait { background: var(--info-bg); border-color: var(--info-bd); cursor: pointer; }
.pf-slot.bad { background: var(--bad-bg); border-color: var(--bad-bd); cursor: pointer; }
.pf-rsz { display: none; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px;
background: var(--accent); border-radius: 3px 0 9px 0; cursor: nwse-resize; }
.pf-canvas.edit .pf-st { cursor: move; }
.pf-canvas.edit .pf-st .pf-rsz { display: block; }
.pf-canvas.edit .pf-st.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.pf-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; }
.pf-toolbar select { width: auto; min-width: 150px; }
.pf-toolbar .spacer { flex: 1; }
/* The room's measurements. Full-width so the toolbar wraps it onto its own
line — the floor is one edit, the benches on it are another. */
.pf-room { flex-basis: 100%; display: flex; align-items: center; gap: 7px; font-size: 12.5px;
padding-top: 9px; margin-top: 3px; border-top: 1px dashed var(--border); }
.pf-room label { margin: 0; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.pf-room input { width: 84px; }
.pf-room .x { color: var(--faint); }
/* The far corner of the floor itself. Sits outside the last station so it can
never be mistaken for one, and only exists while the layout is unlocked. */
.pf-room-grip { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; cursor: nwse-resize;
background: linear-gradient(135deg, transparent 45%, var(--accent) 45%); border-bottom-right-radius: 3px;
box-shadow: -1px -1px 0 0 var(--accent) inset; touch-action: none; z-index: 3; }
.pf-room-grip:hover { filter: brightness(1.25); }
.pf-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; align-items: center; }
.pf-legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--border-strong); }
.pf-legend .sw.free { background: var(--panel2); }
.pf-legend .sw.busy { background: var(--accent-wash); border-color: var(--accent); }
.pf-legend .sw.wait { background: var(--info-bg); border-color: var(--info-bd); }
.pf-legend .sw.bad { background: var(--bad-bg); border-color: var(--bad-solid); }
/* ---- boards and lists ---- */
.pf-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pf-filters input[type=search] { max-width: 280px; }
.pf-filters select { width: auto; min-width: 150px; }
.pf-filters .spacer { flex: 1; }
.pf-lanes { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.pf-lane { flex: 0 0 250px; background: var(--panel3); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pf-lane.trouble { background: var(--bad-bg); border-color: var(--bad-bd); }
.pf-lane-h { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.pf-lane-h b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pf-lane-h .n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--chip);
border-radius: var(--r-pill); padding: 0 7px; }
.pf-lane-body { padding: 9px; display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.pf-lane-empty { color: var(--faint); font-size: 12px; padding: 2px; }
/* A BOARD CARD IS TEXT, NOT A LINK (owner, 2026-09-01: "red, red, red, red, red").
CS builds its cards as (production and embellish use