/* ============================================================
FastPrep OS — Design System v1
Graphite + Amber. Surface minimalism, engine underneath.
============================================================ */
:root {
--code-bg: #ffffff; /* FETCH-V284: a code shown on screen for the handheld stays black on white in both themes */
--code-ink: #000000;
/* palette */
--bg: #0b0d11;
--pk-top: 1rem; /* BENCH-WIDE-V365: where the bench's right panel sticks — the page sets its own */
--bg-soft: #0f1218;
--surface: #12151c;
--surface-2: #181c25;
--surface-3: #1f2430;
--border: #232937;
--border-strong: #2e3648;
--text: #e9e7e2;
--text-strong: #f7f5f1;
--muted: #8f96a3;
--faint: #868d9b; /* DS2-V260: ≥4.6:1 on every dark surface (was 4.07 on surface-3) */
--accent: #d4a574;
--accent-strong: #e8b989;
--accent-ink: #1a130a;
/* brand buttons stay vivid in BOTH themes; text accents adapt per theme */
--accent-btn1: #d4a574;
--accent-btn2: #e8b989;
--ok: #4ade80;
--ok-bg: rgba(74, 222, 128, .12);
--warn: #fbbf24;
--warn-bg: rgba(251, 191, 36, .12);
--err: #f87171;
--err-bg: rgba(248, 113, 113, .12);
--info: #60a5fa;
--info-bg: rgba(96, 165, 250, .12);
/* two worlds, one house: FBA keeps the amber brand accent, FBM is teal — the same idea in the menu, the header and the station tiles */
--fbm: #2dd4bf;
--fbm-strong: #5eead4;
--fbm-bg: rgba(45, 212, 191, .12);
--logo-plate: #f3f1ec; /* PT-135 (V332) — A7 not decided: the dark theme sets the unchanged logo on this neutral light plate (the light theme's surface-2) so the dark runner that forms the F stays visible */
/* DS2-V260 (auditor's item 5): semantic tokens — every tint, line and "ink" (text on a tint) comes from here, per
theme, so no component carries a literal colour that only works in one theme. Ink = the colour of text sitting
on the matching -bg tint (≥4.5:1 measured in both themes). */
--accent-text: var(--accent);
--accent-bg: rgba(212, 165, 116, .12);
--accent-bg-strong: rgba(212, 165, 116, .18);
--accent-hover: rgba(212, 165, 116, .06);
--accent-line: rgba(212, 165, 116, .32);
--accent-glow: rgba(212, 165, 116, .25);
--accent-ring: rgba(212, 165, 116, .18);
--ok-ink: var(--ok); --ok-line: rgba(74, 222, 128, .28);
--warn-ink: var(--warn); --warn-line: rgba(251, 191, 36, .3);
--err-ink: var(--err); --err-line: rgba(248, 113, 113, .3);
--info-ink: var(--info); --info-line: rgba(96, 165, 250, .28);
--fbm-line: rgba(45, 212, 191, .35);
--mut-bg: var(--surface-3);
/* conversation bubbles (messages, tickets) */
--bubble-them: var(--surface-2);
--bubble-me: rgba(212, 165, 116, .14);
--bubble-note: rgba(234, 179, 8, .14);
/* type scale — five sizes instead of thirteen */
--fs-cap: .72rem; /* uppercase captions, table heads, field labels */
--fs-xs: .78rem; /* meta, footnotes, badges */
--fs-sm: .85rem; /* secondary lines, dense tables */
--fs-md: .92rem; /* table body, compact text */
--fs-lg: 1.05rem;
/* density — the portal breathes, the office is compact, the station is touch (set by the layout's body class) */
--pad-card: 1.4rem;
--cell-y: .68rem;
--cell-x: .9rem;
--fs-table: var(--fs-md);
/* geometry */
--r-lg: 16px;
--r-md: 12px;
--r-sm: 8px;
/* WIDTHS-V332 — audit PT-138: the two widths a portal card takes — the main column (.w-full) or the reading measure (.w-read) */
--w-full: none;
--w-read: 800px;
--shadow-1: 0 1px 2px rgba(0,0,0,.4);
--shadow-2: 0 8px 30px rgba(0,0,0,.45);
--shadow-pop: 0 12px 40px rgba(0,0,0,.55);
/* motion */
--t-fast: 140ms cubic-bezier(.4,0,.2,1);
--t-med: 220ms cubic-bezier(.4,0,.2,1);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
h1,h2,h3,h4 { color: var(--text-strong); letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
::selection { background: rgba(212,165,116,.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* ---------- top loading bar (nothing ever looks frozen) ---------- */
#loadbar {
position: fixed; top: 0; left: 0; height: 3px; width: 0%;
background: linear-gradient(90deg, var(--accent), var(--accent-strong));
box-shadow: 0 0 12px var(--accent-glow);
z-index: 9999; opacity: 0; transition: width var(--t-med), opacity var(--t-med);
}
#loadbar.on { opacity: 1; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font: inherit; font-weight: 600; cursor: pointer; user-select: none;
border: 1px solid transparent; border-radius: var(--r-md);
padding: .62rem 1.15rem; min-height: 42px;
background: var(--surface-3); color: var(--text-strong);
transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
position: relative;
}
.btn:hover { background: var(--border); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
background: linear-gradient(135deg, var(--accent-btn1) 0%, var(--accent-btn2) 100%);
color: var(--accent-ink); box-shadow: 0 2px 14px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 4px 22px var(--accent-line); filter: brightness(1.04); background: linear-gradient(135deg, var(--accent-btn1) 0%, var(--accent-btn2) 100%); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-hover); }
.btn-danger { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); }
.btn-lg { min-height: 56px; font-size: 1.05rem; padding: .8rem 1.6rem; border-radius: var(--r-lg); }
.btn-sm { min-height: 32px; padding: .3rem .7rem; font-size: .85rem; border-radius: var(--r-sm); }
.btn[disabled], .btn.loading { opacity: .6; pointer-events: none; }
.btn.loading .btn-label { visibility: hidden; }
.btn.loading::after {
content: ""; position: absolute; width: 18px; height: 18px;
border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- cards & panels ---------- */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: var(--pad-card); box-shadow: var(--shadow-1);
}
.card + .card { margin-top: 1rem; }
.row > .card + .card { margin-top: 0; } /* stat strips: siblings side by side must share the same top */
.grid > .card + .card { margin-top: 0; } /* SETTINGS-V332 (PT-133): a grid's gap spaces its cards — a second card's own margin set it lower than its neighbour */
.card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-title h2, .card-title h3 { margin: 0; }
/* ---------- fields ---------- */
.field { margin-bottom: 1.05rem; }
.lbl, .field label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .04em; }
.input, select.input, textarea.input {
width: 100%; font: inherit; color: var(--text-strong);
background: var(--bg-soft); border: 1px solid var(--border-strong);
border-radius: var(--r-md); padding: .65rem .9rem; min-height: 44px;
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); }
.input::placeholder { color: var(--faint); }
.input.err { border-color: var(--err); animation: shake .35s; }
.error { color: var(--err); font-size: .82rem; margin-top: .3rem; } /* V228: inline validation text outside .field */
.field .hint { font-size: .8rem; color: var(--faint); margin-top: .3rem; }
.field .error { font-size: .82rem; color: var(--err); margin-top: .3rem; }
@keyframes shake { 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
/* ---------- badges & status ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; font-size: .78rem; font-weight: 600; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.badge-err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.badge-over { background: var(--warn-bg); color: var(--warn-ink); border: 1px dashed var(--warn-line); font-weight: 700; } /* FIT-FIRST-V325 (WT-024): more than the recorded size — expected on low-recorded levels (Adrian 29.09), so amber, never an alarm */
.badge-info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.badge-mut { background: var(--mut-bg); color: var(--muted); border-color: var(--border); }
.badge-accent { background: var(--accent-bg); color: var(--accent-strong); border-color: var(--accent-line); }
/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
table.tbl, table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.tbl th, table.table th { text-align: left; font-size: var(--fs-cap); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: calc(var(--cell-y) + .02rem) var(--cell-x); background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.tbl td, table.table td { padding: var(--cell-y) var(--cell-x); border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr, table.table tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover, table.table tbody tr:hover { background: var(--accent-hover); }
.tbl tbody tr:last-child td, table.table tbody tr:last-child td { border-bottom: none; }
/* ---------- app frame (portal/admin) ---------- */
.frame { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar {
background: var(--bg-soft); border-right: 1px solid var(--border);
padding: 1.2rem .9rem; display: flex; flex-direction: column; gap: .2rem;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.wordmark { font-weight: 800; font-size: 1.15rem; color: var(--text-strong); letter-spacing: -.02em; padding: .3rem .6rem 1.1rem; }
.wordmark span { color: var(--accent); }
.navlink {
display: flex; align-items: center; gap: .65rem; padding: .58rem .7rem;
border-radius: var(--r-md); color: var(--muted); font-weight: 500; font-size: .93rem;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.navlink:hover { background: var(--surface-2); color: var(--text-strong); }
.navlink.active { background: var(--accent-bg); color: var(--accent-strong); font-weight: 600; }
.navlink .ic { width: 20px; text-align: center; }
.navsec { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); padding: 1rem .7rem .3rem; }
.main { padding: 1.6rem 2rem 3rem; max-width: 1200px; width: 100%; min-width: 0; overflow-x: clip; } /* NO-SIDEWAYS-V223: also on tablets/laptops — a wide office table scrolls inside its wrap, never the page */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; gap: 1rem; }
.topbar .who { font-size: .85rem; color: var(--muted); }
.close-side { display: none; position: absolute; top: .7rem; right: .7rem; }
#menu-btn { display: none; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 55; }
@media (max-width: 900px) {
.frame { grid-template-columns: 1fr; }
#menu-btn { display: inline-flex; }
.sidebar.open ~ .sidebar-backdrop { display: block; }
body.drawer-open { overflow: hidden; }
.topbar { position: sticky; top: 0; z-index: 30; background: var(--bg); padding: .4rem 0; margin-bottom: 1rem; }
.topbar .who { display: none; } /* the name is in the drawer; the title needs the room */
.main { min-width: 0; overflow-x: clip; } /* NO-SIDEWAYS-V219: a grid item's min-width:auto let wide tables push the page sideways on phones */
.sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform var(--t-med); width: 260px; }
.sidebar.open { transform: none; box-shadow: var(--shadow-pop); }
.sidebar.open .close-side { display: inline-flex; }
.main { padding: 1rem; }
}
/* ---------- station (warehouse) ---------- */
.station { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.station-head {
display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem;
background: var(--bg-soft); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40;
}
.station-head h1 { font-size: 1.1rem; margin: 0; flex: 1; }
.station-body { flex: 1; padding: 1.1rem; max-width: 760px; width: 100%; margin: 0 auto; }
/* DESIGN-V289: the computers at the tables have wide screens — the station uses them (the handheld stays as it is) */
@media (min-width: 1200px) { html:not(.in-app) .station-body { max-width: 980px; } html:not(.in-app) .station-body .tile-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
/* BENCH-WIDE-V365 — Adrian 07.10: the packing bench uses the whole 1920 × 1080 monitor — the order's lines on the left, its boxes on the
right in their own scrolling panel; after All packed the Amazon plan on the left, the pallets and the booking on the right */
@media (min-width: 1280px) {
html:not(.in-app) .station-body.st-wide { max-width: 1880px; }
html:not(.in-app) .st-wide .pk-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
html:not(.in-app) .st-wide .pk-split > .pk-main { grid-column: 1; grid-row: 1; min-width: 0; }
html:not(.in-app) .st-wide .pk-split > .pk-side { grid-column: 2; grid-row: 1; min-width: 0; position: sticky; top: var(--pk-top); max-height: calc(100vh - var(--pk-top) - 1rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
}
.pk-lines { display: flex; flex-direction: column; }
.pk-alike { border-left: 3px solid var(--accent); }
.pk-alike-head { font-size: .8rem; color: var(--muted); margin: .3rem 0 .25rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.pk-boxchip { font-size: .72rem; padding: .1rem .4rem; cursor: pointer; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.tile {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 1.3rem 1.1rem; text-align: center; cursor: pointer; color: var(--text-strong);
transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 24px var(--accent-ring); }
.tile-active { border-color: var(--accent-strong); background: var(--accent-bg); box-shadow: 0 0 0 2px var(--accent-line); }
.tile .ic { font-size: 2rem; }
.tile > svg.ic { width: 2.1rem; height: 2.1rem; stroke-width: 1.6; color: var(--accent-strong); } /* ICONS-V235: the home tiles */
.tile .cnt { font-size: .8rem; color: var(--muted); }
.tile .cnt b { color: var(--accent-strong); }
/* scan input — the heart of the station */
.scan-zone { margin: 1rem 0; }
.scan-input {
width: 100%; font-size: 1.35rem; font-family: var(--mono); text-align: center;
padding: 1.05rem 1rem; min-height: 64px; color: var(--text-strong);
background: var(--bg-soft); border: 2px dashed var(--border-strong); border-radius: var(--r-lg);
transition: border-color var(--t-fast), box-shadow var(--t-med), background var(--t-fast);
}
.scan-input:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-ring), 0 0 30px var(--accent-hover); animation: scanpulse 2.2s ease-in-out infinite; }
@keyframes scanpulse { 50% { box-shadow: 0 0 0 4px var(--accent-line), 0 0 36px var(--accent-ring); } }
.scan-label { text-align: center; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .06em; }
/* big option buttons (client select, presets) */
.opt-list { display: flex; flex-direction: column; gap: .55rem; }
.opt {
display: flex; align-items: center; justify-content: space-between; gap: .8rem;
padding: .9rem 1.05rem; min-height: 58px; border-radius: var(--r-md);
background: var(--surface); border: 1px solid var(--border); cursor: pointer;
color: var(--text-strong); font-weight: 600; font-size: 1rem; width: 100%; text-align: left;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.opt:hover, .opt:focus-visible { border-color: var(--accent); background: var(--accent-hover); }
.opt:active { transform: scale(.995); }
.opt .sub { display: block; font-size: .8rem; color: var(--muted); font-weight: 500; }
.opt.selected { border-color: var(--accent); background: var(--accent-bg); }
/* X-CLOAK-V214: Alpine loads deferred — anything marked x-cloak stays hidden until it boots (no flash of 'saving…' spans) */
[x-cloak] { display: none !important; }
/* HELP-GAP-V219: the small ? marker breathes after a heading or label */
h2 > [data-help], h3 > [data-help], label > [data-help] { margin-left: .35em; }
/* SELECTED-V215: a ticked radio/checkbox option shows it like the tap-selected chips do */
.opt:has(input[type=radio]:checked), .opt:has(input[type=checkbox]:checked) { border-color: var(--accent); background: var(--accent-bg); }
/* SCAN-BUSY-V218: the scan box shows it is working (identifying / placing) */
.scan-zone.loading .scan-input { opacity: .6; border-style: solid; }
.scan-input.err { border-color: var(--err); }
/* OPT-CHIP-V214: an .opt used as a small toggle inside a form row (wrapped / client's / reused) — no full width */
.opt.opt-chip { width: auto; min-height: 0; padding: .35rem .7rem; font-size: .85rem; flex: 0 0 auto; }
/* result banner (match found etc.) */
.result { border-radius: var(--r-lg); padding: 1rem 1.15rem; margin: .8rem 0; border: 1px solid; animation: fadeUp var(--t-med) both; }
.result-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.result-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.result-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.result-err { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); } /* V228: used by the portal's decision banners, was never defined */
.result b { color: inherit; }
.result .detail { color: var(--text); font-size: .9rem; margin-top: .25rem; }
/* stepper */
.steps { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.step { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-3); transition: background var(--t-med); }
.step.done { background: var(--accent); }
.step.now { background: var(--accent-strong); animation: scanpulse 2s infinite; }
/* ---------- stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.grid { display: grid; } /* GRID-V219: the utility the Profit tiles were written for (they stacked one per row without it) */
.stat-group { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.05rem 1.2rem; animation: fadeUp var(--t-med) both; }
.stat .v { font-size: 1.7rem; font-weight: 700; color: var(--text-strong); letter-spacing: -.02em; }
.stat .l { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; } /* WT-154 (V332): a chip built from spans (425units) reads on two lines, never «425units» */
.stat .d { font-size: .78rem; margin-top: .3rem; }
/* ---------- skeleton loading ---------- */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); min-height: 1em; }
.skel::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }
/* ---------- toasts ---------- */
/* MOVE-CODE-V294: the big "what just happened" after a box or pallet is registered — readable from the pallet */
.move-done { position: fixed; left: 0; right: 0; top: 4.2rem; z-index: 9990; display: flex; justify-content: center; padding: 0 .75rem; pointer-events: auto; }
.move-done-card { display: flex; gap: .8rem; align-items: flex-start; width: 100%; max-width: 560px; padding: 1rem 1.1rem; border-radius: var(--r-lg); border: 2px solid;
background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); cursor: pointer; }
.move-done-card.is-ok { border-color: var(--ok); background: linear-gradient(var(--ok-bg), var(--ok-bg)), var(--surface); }
.move-done-card.is-warn { border-color: var(--warn); background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--surface); }
.move-done-card.is-err { border-color: var(--err); background: linear-gradient(var(--err-bg), var(--err-bg)), var(--surface); }
.move-done-card.is-err .move-done-ic { color: var(--err-ink); }
.move-done-ic > svg.ic { width: 2.4rem; height: 2.4rem; }
.move-done-card.is-ok .move-done-ic { color: var(--ok-ink); }
.move-done-card.is-warn .move-done-ic { color: var(--warn-ink); }
.move-done-title { font-size: 1.55rem; font-weight: 800; line-height: 1.15; color: var(--text-strong); }
/* MOVE-BATCH-V297: "2 · Put them on a shelf" — its own block, so the shelf never lands in the box field */
.move-shelf { border: 1px solid var(--accent); background: var(--accent-bg); border-radius: var(--r-lg); padding: .8rem .9rem; }
/* SHELF-GO-V325 — audit WT-126: the shelf the worker walks to, in ONE size on every screen (picking, putaway, receive, move,
find, verify, returns) — large, monospaced, never a small badge */
.shelf-go { display: block; font-family: var(--mono); font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: .02em; overflow-wrap: anywhere; }
.move-done-sub { font-size: .92rem; color: var(--text); margin-top: .25rem; overflow-wrap: anywhere; }
#toasts { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 9998; display: flex; flex-direction: column; gap: .6rem; max-width: 360px; }
.toast {
background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
border-radius: var(--r-md); padding: .8rem 1rem; box-shadow: var(--shadow-2);
font-size: .92rem; color: var(--text-strong); animation: slideIn var(--t-med) both;
}
.toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--err); } .toast.warn { border-left-color: var(--warn); }
.toast.out { animation: slideOut var(--t-med) both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px);} }
@keyframes slideOut { to { opacity: 0; transform: translateX(24px);} }
/* ---------- two-level tooltips ---------- */
.help { cursor: help; border-bottom: 1px dotted var(--faint); position: relative; }
.help-pop {
position: absolute; z-index: 9000; max-width: min(300px, calc(100vw - 24px)); /* PHONE-HELP-V331 (PT-117): never wider than a small screen */
background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong);
border-radius: var(--r-md); padding: .7rem .9rem; font-size: .85rem; line-height: 1.5;
box-shadow: var(--shadow-pop); animation: fadeUp var(--t-fast) both;
}
.help-pop b { color: var(--accent-strong); display: block; margin-bottom: .2rem; }
/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(5,7,10,.7); backdrop-filter: blur(3px); z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn var(--t-fast) both; }
.modal { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.5rem; animation: fadeUp var(--t-med) both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} }
/* ---------- misc ---------- */
.row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.mono { font-family: var(--mono); }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; }
.center { text-align: center; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); animation: fadeUp var(--t-med) both; }
.empty > .ic { font-size: 2.6rem; margin-bottom: .6rem; color: var(--muted); } /* EMPTY-ICON-V332 (PT-138): the empty state's own icon — the icon of a button inside it keeps its size */
.divider { height: 1px; background: var(--border); margin: 1.2rem 0; border: none; }
.kbd { font-family: var(--mono); font-size: .78rem; background: var(--surface-3); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: .1rem .45rem; color: var(--muted); }
/* auth screen */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: radial-gradient(1200px 700px at 70% -10%, rgba(212,165,116,.08), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 400px; animation: fadeUp .4s cubic-bezier(.2,.8,.2,1) both; }
.auth-logo { text-align: center; margin-bottom: 1.6rem; }
.auth-logo .wm { font-size: 1.9rem; font-weight: 800; color: var(--text-strong); letter-spacing: -.03em; }
.auth-logo .wm span { color: var(--accent); }
.auth-logo .sub { color: var(--muted); font-size: .9rem; margin-top: .2rem; }
/* ---- DOSSIER-V248: the journey of a request (stepper) ---- */
.dossier-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.dossier-steps .ds { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .6rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.dossier-steps .ds-mark { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; background: var(--surface-3); color: var(--muted); }
.dossier-steps .ds-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; font-size: .8rem; }
.dossier-steps .ds-title { font-size: .86rem; color: var(--text-strong); }
.dossier-steps .ds-at, .dossier-steps .ds-detail { color: var(--muted); }
.dossier-steps .ds-qty { color: var(--text); font-weight: 600; }
.dossier-steps .ds-block { color: var(--warn-ink); font-weight: 600; }
.dossier-steps .ds-proof a { color: var(--accent); font-size: .76rem; }
.dossier-steps .ds-done { border-color: var(--ok-line); }
.dossier-steps .ds-done .ds-mark { background: var(--ok-bg); color: var(--ok-ink); }
.dossier-steps .ds-current { border-color: var(--accent); box-shadow: var(--shadow-1); }
.dossier-steps .ds-current .ds-mark { background: var(--accent-btn1); color: var(--accent-ink); } /* the vivid brand amber in both themes: 8.7:1 under the dark digit */
.dossier-steps .ds-blocked { border-color: var(--warn); }
.dossier-steps .ds-blocked .ds-mark { background: var(--warn-bg); color: var(--warn-ink); }
.dossier-steps .ds-skipped, .dossier-steps .ds-pending { background: transparent; border-style: dashed; } /* DS2-V260: quieter by shape, never see-through */
.dossier-steps .ds-skipped .ds-mark, .dossier-steps .ds-pending .ds-mark { background: transparent; border: 1px dashed var(--border-strong); }
.dossier-steps .ds-external .ds-mark { background: var(--info-bg); color: var(--info-ink); }
@media (max-width: 640px) { .dossier-steps { grid-template-columns: 1fr; } }
/* FIRST-STEPS-V327 (PT-056/062): the new seller's welcome checklist — the dossier stepper, roomier: each step says what it does
and the current one carries its button */
.dossier-steps.first-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: .9rem; }
.first-steps .ds { padding: .75rem .85rem; }
.first-steps .ds-body { font-size: var(--fs-sm); gap: .25rem; }
.first-steps .ds-title { font-size: var(--fs-md); }
.first-steps .ds-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin-top: .35rem; }
/* SHIPTO-V327 (PT-055): the ship-to block reads like the label on a parcel — one line per label line, never italic */
.ship-to-addr { font-style: normal; color: var(--text-strong); font-size: var(--fs-md); line-height: 1.5; margin: .35rem 0 0; }
/* ============================================================
LIGHT THEME — its own palette, contrast-checked (not inverted)
============================================================ */
[data-theme="light"] {
--bg: #f4f2ee;
--bg-soft: #faf9f6;
--surface: #ffffff;
--surface-2: #f3f1ec;
--surface-3: #e9e6df;
--border: #e4e0d8;
--border-strong: #cfc9bd;
--text: #2a2d34;
--text-strong: #14161b;
--muted: #5b616d; /* DS2-V260: ≥4.99:1 on every light surface, incl. the grey badge (was 4.50) */
--faint: #646a77; /* DS2-V260: 4.85:1 on the cream page (was 4.32) */
--accent: #8f5c22; /* DS2-V260: deeper copper — 5.05:1 on the cream page, 5.6:1 on white (was 4.40 on cream) */
--accent-strong: #74491a;
--accent-ink: #1a130a;
--ok: #15803d; --ok-bg: rgba(21,128,61,.10);
/* WAIT-YELLOW-V332 (audit PT-128 / WT-151): waiting on you or on someone is a clear yellow tint with a gold edge; being worked on keeps
the copper accent. They read as one brown pill before (the tints 3.4 apart in CIELAB, now 16.6; the edges now 31 apart). The ink stays,
at 5.4:1 or more on the tint over every light ground; the plain warn colour (borders, bars, dots) is unchanged. */
--warn: #a16207; --warn-bg: rgba(234, 179, 8, .22);
--err: #b91c1c; --err-bg: rgba(185,28,28,.10);
--info: #1d4ed8; --info-bg: rgba(29,78,216,.09);
--fbm: #0f766e; --fbm-strong: #115e59; --fbm-bg: rgba(15,118,110,.10); /* AUDIT-A-V244: teal readable on white (5.9:1) */
/* DS2-V260: the light theme's own tints and inks (the dark values would read at 3.8–4.4:1 on these grounds) */
--accent-text: var(--accent);
--accent-bg: rgba(143, 92, 34, .09);
--accent-bg-strong: rgba(143, 92, 34, .14);
--accent-hover: rgba(143, 92, 34, .05);
--accent-line: rgba(143, 92, 34, .3);
--accent-glow: rgba(143, 92, 34, .18);
--accent-ring: rgba(143, 92, 34, .16);
--ok-ink: #166534; --ok-line: rgba(21, 128, 61, .28);
--warn-ink: #854d0e; --warn-line: rgba(202, 138, 4, .55);
--err-ink: #991b1b; --err-line: rgba(185, 28, 28, .28);
--info-ink: #1e40af; --info-line: rgba(29, 78, 216, .26);
--fbm-line: rgba(15, 118, 110, .3);
--logo-plate: transparent; /* PT-135 (V332): the light theme needs no plate */
--mut-bg: var(--surface-2);
--bubble-them: var(--surface-2);
--bubble-me: rgba(143, 92, 34, .08);
--bubble-note: rgba(234, 179, 8, .14); /* WAIT-YELLOW-V332: the office's note bubble in the same yellow as in the dark theme */
--shadow-1: 0 1px 2px rgba(40,35,25,.08);
--shadow-2: 0 8px 30px rgba(40,35,25,.12);
--shadow-pop: 0 12px 40px rgba(40,35,25,.18);
}
[data-theme="light"] ::selection { background: rgba(212,165,116,.45); }
[data-theme="light"] .skel::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent); }
[data-theme="light"] .auth-wrap { background: radial-gradient(1200px 700px at 70% -10%, rgba(212,165,116,.18), transparent 60%), var(--bg); }
[data-theme="light"] .modal-bg { background: rgba(60,55,45,.4); }
/* NATIVE-V332 — audit PT-134 / WT-150: the browser is told which theme the page is in, so its own controls follow it — an unticked box
or radio, the date and time pickers with their calendar icon, select lists, scrollbars; every tick and dot takes the theme's accent (it
was the system blue outside .opt: the Users rights, the API scopes, Turbo at the bench, Keep me signed in). The file button is styled
with the file picker below (MSG-TICKETS-V328). The paper pages carry their own light scheme; the label sheets set no theme. */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
/* a field the browser filled in (sign-in, an address) keeps the house field — the browser's own pale blue box sat on graphite */
.input:-webkit-autofill, .input:-webkit-autofill:hover { -webkit-text-fill-color: var(--text-strong); caret-color: var(--text-strong); border-color: var(--accent-line); box-shadow: 0 0 0 1000px var(--bg-soft) inset; }
.input:-webkit-autofill:focus { border-color: var(--accent); box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 3px var(--accent-ring); }
.input.err:-webkit-autofill, .input.err:-webkit-autofill:hover, .input.err:-webkit-autofill:focus { border-color: var(--err); } /* REVIEW-V332: a field in error keeps its red edge when the browser refills it */
/* theme toggle button */
.theme-toggle { font-size: 1.05rem; line-height: 1; }
/* ---------- print: location labels 4×6" (100×150mm) ---------- */
@media print {
body { background: #fff !important; }
.no-print { display: none !important; }
}
.label-sheet { background: #fff; color: #000; }
.label {
width: 100mm; height: 150mm; padding: 8mm 7mm; box-sizing: border-box;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
page-break-after: always; background: #fff; color: #000; border: 1px dashed #bbb;
}
@media print { .label { border: none; } @page { size: 100mm 150mm; margin: 0; } }
.label .zone { font: 700 14pt/1.2 var(--font); color: #333; text-transform: uppercase; letter-spacing: .06em; }
.label .code { font: 800 36pt/1 var(--mono); letter-spacing: 0; text-align: center; overflow-wrap: anywhere; } /* RACKS-V277: A.03.b.02 on one line */
.label .bars svg { width: 84mm; height: 28mm; }
.label .foot { font: 600 9pt/1 var(--font); color: #777; }
.label .explain { font: 600 11pt/1.3 var(--font); color: #222; text-align: center; } /* RACKS-V277: the code in words */
/* brand logo (FAST) — theme-aware variants */
.wordmark { display: flex; align-items: center; gap: .45rem; }
.wordmark img { height: 26px; width: auto; }
.logo-os { font-weight: 800; letter-spacing: .12em; color: var(--accent-strong); font-size: .8rem; }
[data-theme="light"] .logo-ondark { display: none; }
[data-theme="dark"] .logo-onlight { display: none; }
/* PT-135 (V332) — A7 is Adrian's: the logo file is never redrawn or filtered here. Until an on-dark version of the mark exists, the image
the dark theme shows (.logo-ondark) sits on a small neutral plate (--logo-plate); in the light theme the token is transparent. One rule
for every place the wordmark appears: the portal and office sidebars, the sign-in / register / forgot / reset / code pages, the error pages. */
.wordmark img.logo-ondark { box-sizing: content-box; padding: 2px 6px; border-radius: var(--r-sm); background: var(--logo-plate); }
/* ---- camera barcode scanning (phones) ---- */
.scan-zone { position: relative; }
.camscan-btn { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; padding: .25rem .55rem; z-index: 2; }
.camscan-field { display: flex; gap: .35rem; align-items: center; }
.camscan-field > input { flex: 1; min-width: 0; }
.camscan-btn.camscan-inline { position: static; transform: none; font-size: 1.05rem; flex-shrink: 0; }
.scan-input { padding-right: 3.6rem; }
.camscan { position: fixed; inset: 0; z-index: 9000; background: #000; color: #fff; display: flex; flex-direction: column; }
.camscan[hidden] { display: none; }
.camscan-top { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: rgba(0,0,0,.75); }
.camscan-title { flex: 1; font-weight: 600; }
.camscan-cont { display: flex; align-items: center; gap: .3rem; font-size: .85rem; }
.camscan-view { position: relative; flex: 1; overflow: hidden; }
.camscan-view video { width: 100%; height: 100%; object-fit: cover; }
.camscan-frame { position: absolute; left: 8%; right: 8%; top: 30%; height: 30%; border: 3px solid rgba(212,165,116,.9); border-radius: 10px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.35); pointer-events: none; }
.camscan-cands { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem .8rem; background: rgba(0,0,0,.75); }
.camscan-cands:empty { display: none; }
.camscan-hint { padding: .5rem .8rem .9rem; font-size: .82rem; color: #ddd; background: rgba(0,0,0,.75); }
.photo-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.photo-strip .ph { position: relative; width: 64px; height: 64px; }
.photo-strip .ph img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.photo-strip .ph .del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: #b3261e; color: #fff; font-size: 12px; line-height: 22px; text-align: center; cursor: pointer; padding: 0; }
.photo-strip .ph .tag { position: absolute; left: 2px; bottom: 2px; font-size: 9px; background: rgba(0,0,0,.6); color: #fff; padding: 0 4px; border-radius: 4px; }
/* ---- product photo gallery ---- */
#fp-gallery { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.9); color: #fff; display: flex; flex-direction: column; }
#fp-gallery[hidden] { display: none; }
#fp-gallery .g-top { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; }
#fp-gallery .g-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 0 .6rem; min-height: 0; }
#fp-gallery .g-stage img { max-width: 92vw; max-height: 74vh; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; }
#fp-gallery .g-prev, #fp-gallery .g-next { background: rgba(255,255,255,.12); color: #fff; border: none; font-size: 2.2rem; width: 48px; height: 72px; border-radius: 10px; cursor: pointer; flex-shrink: 0; }
#fp-gallery .g-thumbs { display: flex; gap: .4rem; padding: .6rem .9rem 1rem; overflow-x: auto; justify-content: center; }
[data-gallery] { cursor: zoom-in; }
/* boxlist — per-box tracking that survives 100 boxes (summary always, rows fold) */
.boxlist { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.boxlist > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .8rem; }
.boxlist > summary::-webkit-details-marker { display: none; }
.boxlist > summary:hover { background: var(--surface-2); border-radius: var(--r-lg); }
.boxlist-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.boxlist-toggle { font-size: .78rem; white-space: nowrap; }
.boxlist[open] > .boxlist-body { border-top: 1px solid var(--border); padding: .6rem .8rem .8rem; }
.boxlist-scroll { overflow: auto; }
@media (max-width: 640px) { body.mode-portal .boxlist-scroll { max-height: none !important; } } /* PT-045 (D3-9): on a phone the page scrolls, not a box inside it — the list already folds past 8 boxes */
.boxlist-scroll .tbl thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.boxlist-scroll .tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.boxlist-scroll .tbl td, .boxlist-scroll .tbl th { padding: .45rem .65rem; vertical-align: middle; }
.boxlist-scroll .tbl { width: 100%; }
.input:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-3); }
/* station header on phones — the title used to wrap into 6 lines and eat the screen */
.station-head h1 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-head form { display: inline; }
@media (max-width: 640px) {
/* CARDS-V228: a list becomes a stack of cards — each cell says what it is (data-l), the row's identity comes first */
.tbl-cards thead { display: none; }
.tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
.tbl-cards tr { border-bottom: 1px solid var(--border); padding: .55rem .9rem; }
.tbl-cards tr:last-child { border-bottom: none; }
/* CARDS-V232: cells are blocks (a cell may hold several lines — title, SKU, LPN, photos); the label sits in a fixed left column */
.tbl-cards td { border: none; padding: .12rem 0; display: block; min-width: 0; overflow-wrap: anywhere; }
.tbl-cards td[data-l] { position: relative; padding-left: 36%; min-height: 1.3rem; }
.tbl-cards td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: .12rem; width: 33%; font-size: .72rem; line-height: 1.3rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line, never over the next row */
.tbl-cards td.lead { font-size: 1rem; padding-bottom: .2rem; padding-left: 0; }
.tbl-cards td.lead::before { display: none; }
.tbl-cards td.stack { padding-left: 0; text-align: left !important; }
.tbl-cards td.stack::before { position: static; display: block; width: auto; margin-bottom: .2rem; }
.tbl-cards td:empty { display: none; }
.tbl-cards .decide { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; justify-content: stretch; }
.tbl-cards .decide .btn { width: 100%; justify-content: center; min-height: 40px; }
.row > .field { flex: 1 1 100%; min-width: 0; } /* one field per line — three inputs across 375px were unusable */
.line-row > .grow { flex: 1 1 100%; } /* order line: the product search takes the whole line, qty + price sit under it */
.btn-full-sm { width: 100%; }
.cond-row .opt { flex: 1 1 100%; }
/* PHONE-V234: the page title may wrap, the theme/bell cluster never stacks under it */
.topbar { align-items: flex-start; gap: .6rem; }
.topbar h1 { font-size: 1.2rem; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.topbar > .row { flex: 0 0 auto; flex-wrap: nowrap; }
.topbar .who { display: none; }
/* a label with a hint after it flows as text instead of splitting into two columns */
.lbl, .field label { flex-wrap: wrap; row-gap: .1rem; }
/* a checkbox row keeps the box and its words side by side */
.row:has(> input[type=checkbox]), .row:has(> input[type=radio]) { flex-wrap: nowrap; }
.row:has(> input[type=checkbox]) > span, .row:has(> input[type=radio]) > span { flex: 1 1 0; min-width: 0; }
.btn-sm { min-height: 40px; } /* tap targets */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.card, .stat { min-width: 0; }
.topbar h1 { font-size: 1.25rem; }
.station-head { gap: .5rem; padding: .55rem .7rem; }
.station-head h1 { font-size: .98rem; }
.station-head .who { display: none; }
.station-body { padding: .8rem; }
}
/* receive: the four progress bars get their names */
.steps .step { position: relative; height: 5px; }
.steps .step::after { content: attr(data-label); position: absolute; top: 8px; left: 0; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.steps .step.now::after, .steps .step.done::after { color: var(--accent-strong); }
.steps { margin-bottom: 1.6rem; }
/* ===== workspaces (FBA prep vs FBM fulfilment) ===== */
.ws-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: .2rem .6rem .6rem; padding: 2px; border-radius: 10px; background: var(--surface-2); }
.ws-switch button { border: none; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: .38rem .4rem; border-radius: 8px; cursor: pointer; }
.ws-switch button.on-fba { background: var(--accent-bg-strong); color: var(--accent-strong); }
.ws-switch button.on-fbm { background: var(--fbm-bg); color: var(--fbm-strong); }
.ws-group.ws-hide { display: none; }
.navsec.ws-fba { color: var(--accent); }
.navsec.ws-fbm { color: var(--fbm); }
.ws-group[data-ws="fbm"] .navlink.active { background: var(--fbm-bg); color: var(--fbm-strong); }
.module-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; border: 1px solid transparent; }
.module-badge.fba { color: var(--accent-strong); background: var(--accent-bg); border-color: var(--accent-line); }
.module-badge.fbm { color: var(--fbm-strong); background: var(--fbm-bg); border-color: var(--fbm-line); }
.module-stripe { height: 3px; width: 100%; }
.module-stripe.fba { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.module-stripe.fbm { background: linear-gradient(90deg, var(--fbm), var(--fbm-strong)); }
.tile-zone { margin: 0 0 1.2rem; }
/* DESK-V286: the computers' station — the world switch and ONE small station choice on a line; the station's own tools marked */
.desk-top { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 1.1rem; }
.desk-top .hh-switch { flex: 1 1 320px; max-width: 460px; margin: 0; }
.desk-switch button { min-height: 46px; }
.desk-station { display: flex; align-items: center; gap: .5rem; }
.desk-station label { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.desk-station select { width: auto; min-width: 11rem; padding: .45rem .6rem; }
.tile-mine { border-color: var(--accent-line); }
.tile-zone.fbm .tile-mine { border-color: var(--fbm-line); }
.tile-zone h2 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .6rem; padding-left: .6rem; border-left: 3px solid var(--border); color: var(--muted); }
.tile-zone.fba h2 { border-color: var(--accent); color: var(--accent-strong); }
.tile-zone.fbm h2 { border-color: var(--fbm); color: var(--fbm-strong); }
.tile-zone.fbm .tile:hover { border-color: var(--fbm); }
.tile-zone.fbm .tile > svg.ic, .tile-zone.fbm .tile .cnt b { color: var(--fbm-strong); } /* DESK-V286: the FBM world in its own colour, as on the handheld */
/* TRANSITION-TEMP: the warehouse move — striped so nobody mistakes it for a permanent tool */
.tile-zone.move-temp { padding: .7rem .8rem .8rem; border: 1px dashed var(--warn-line); border-radius: var(--r-lg);
background: repeating-linear-gradient(135deg, var(--warn-bg) 0 14px, transparent 14px 28px); }
.tile-zone.move-temp h2 { border-color: var(--warn); color: var(--warn-ink); }
.move-banner { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .8rem; margin: 0 0 1rem; border: 1px dashed var(--warn-line);
border-radius: 10px; color: var(--warn-ink); background: repeating-linear-gradient(135deg, var(--warn-bg) 0 14px, transparent 14px 28px); font-size: .86rem; }
.move-banner b { letter-spacing: .04em; }
/* OPT-V229: the tick sits next to the words, not at the far edge of a wide row */
.opt:has(> input[type=checkbox]), .opt:has(> input[type=radio]) { justify-content: flex-start; }
.opt:has(> input[type=checkbox]) > input[type=checkbox], .opt:has(> input[type=radio]) > input[type=radio] { order: -1; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.opt:has(> input[type=checkbox]) > span:first-of-type, .opt:has(> input[type=radio]) > span:first-of-type { flex: 1; } /* the words stretch, a rate column after them does not */
/* HINT-V229: the small helper line under a field (was used, never defined) */
.hint { font-size: .8rem; color: var(--muted); margin: .3rem 0; }
/* REQ-V229: required markers on forms + their legend */
.field label .req, .lbl .req { color: var(--err); margin-left: .15em; font-weight: 700; }
.req-legend { font-size: .78rem; color: var(--muted); margin: -.2rem 0 .6rem; }
.req-legend .req { color: var(--err); font-weight: 700; }
/* LEGEND-V229 */
.legend summary { list-style: none; } .legend summary::-webkit-details-marker { display: none; }
.legend summary::before { content: '◐ '; opacity: .7; }
/* MOTION-V234: people who asked their device for less motion get none of the decorative movement — feedback (toasts, loading bar) stays, instantly */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ICONS-V235: Lucide sprite icons — sized by the surrounding text, coloured by it */
svg.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.22em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.ic-lg { width: 1.5em; height: 1.5em; }
svg.ic.ic-xl { width: 2.2em; height: 2.2em; stroke-width: 1.6; }
.navlink svg.ic { width: 18px; height: 18px; }
.card-title h3 svg.ic, h1 svg.ic, h2 svg.ic { vertical-align: -.18em; margin-right: .15rem; color: var(--accent-strong); }
/* ===== REGISTER-V242: the 3-route / 3-step registration helper (the website form, in the portal) ===== */
.reg-card { max-width: 780px; }
.route-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.route-card { text-align: left; padding: 1.1rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); font: inherit; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.route-card:hover, .route-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 24px var(--accent-ring); outline: none; }
.route-card.selected { border-color: var(--accent-strong); background: var(--accent-bg); box-shadow: 0 0 0 2px var(--accent-line); }
.route-card > svg.ic { width: 1.9rem; height: 1.9rem; color: var(--accent-strong); stroke-width: 1.6; margin-bottom: .5rem; display: block; }
.route-card h3 { margin: 0 0 .15rem; font-size: 1.02rem; color: var(--text-strong); }
.route-card .sub { display: block; font-weight: 600; font-size: .84rem; color: var(--accent-strong); margin-bottom: .4rem; }
.route-card p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.reg-progress { margin-bottom: 1.2rem; }
.reg-progress .bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.reg-progress .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.reg-progress .info { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-top: .4rem; letter-spacing: .04em; text-transform: uppercase; }
.reg-step { animation: fadeUp var(--t-med) both; }
.reg-step h2 { margin: 0 0 .3rem; font-size: 1.3rem; letter-spacing: -.01em; }
.reg-step .lead { color: var(--muted); margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.5; }
.reg-msg { border-radius: var(--r-md); padding: .9rem 1rem; margin: .8rem 0 0; background: var(--accent-bg); border: 1px solid var(--accent-line); font-size: .92rem; line-height: 1.5; animation: fadeUp var(--t-med) both; }
.reg-msg.redirect { background: var(--warn-bg); border-color: var(--warn-line); }
.reg-msg b { display: block; margin-bottom: .15rem; color: var(--text-strong); }
.reg-personal { border-left: 3px solid var(--accent); padding: .55rem .8rem; margin: 0 0 1rem; color: var(--text); background: var(--accent-hover); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: .92rem; animation: fadeUp var(--t-med) both; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.opt-col { display: flex; flex-direction: column; gap: .5rem; }
.opt-grid .opt, .opt-col .opt { min-height: 46px; padding: .6rem .8rem; font-size: .92rem; }
.reg-teaser { text-align: center; padding: 1.3rem 1.1rem; border-radius: var(--r-lg); border: 1px dashed var(--accent-line); background: var(--accent-hover); margin: 1.2rem 0; }
.reg-teaser > svg.ic { color: var(--accent-strong); }
.reg-teaser h3 { margin: .4rem 0 .3rem; font-size: 1.05rem; color: var(--text-strong); }
.reg-teaser p { margin: 0 auto .8rem; max-width: 48ch; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.reg-profile { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.1rem .2rem; margin: 1.2rem 0; animation: fadeUp var(--t-med) both; }
.reg-profile .head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.reg-profile .head h3 { margin: 0; font-size: 1rem; }
.reg-nav { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.reg-nav .btn { min-width: 150px; }
.reg-save { position: fixed; right: 1rem; bottom: 1rem; font-size: .78rem; padding: .35rem .7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); opacity: 0; transition: opacity var(--t-fast); pointer-events: none; z-index: 5; }
.reg-save.on { opacity: 1; }
.reg-save.err { color: var(--err-ink); border-color: var(--err-line); }
.reg-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin-top: 1rem; }
.reg-links a { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; font-size: .86rem; font-weight: 600; transition: border-color var(--t-fast), color var(--t-fast); }
.reg-links a:hover { border-color: var(--accent); color: var(--accent-strong); }
.reg-thanks { text-align: center; }
.reg-thanks .big { color: var(--accent-strong); margin-bottom: .4rem; }
.reg-thanks .sec { text-align: left; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); padding: .8rem 1rem; margin: .6rem 0; }
.reg-thanks .sec b { display: block; margin-bottom: .2rem; }
.reg-thanks ul { margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; }
.reg-thanks li { margin: .15rem 0; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: 0 0 .9rem; font-size: .9rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
@media (max-width: 640px) {
.reg-nav { flex-direction: column-reverse; } .reg-nav .btn { width: 100%; }
.route-cards { grid-template-columns: 1fr; }
dl.kv { grid-template-columns: 1fr; gap: 0; } dl.kv dt { margin-top: .4rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
}
/* REGISTER-V242b: an .opt used inside a .field is a choice, not a field caption — no uppercase, no caption size */
.field label.opt { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 600; color: var(--text-strong); margin-bottom: 0; display: flex; }
.field label.opt .sub { text-transform: none; letter-spacing: 0; }
dl.kv.stack { grid-template-columns: 1fr; gap: 0; } dl.kv.stack dt { margin-top: .45rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } dl.kv.stack dd { line-height: 1.35; }
/* ONBOARD-CHECK-V243: the office checklist on a new client's file */
ul.checklist, ol.checklist { margin: 0; padding: 0; list-style: none; font-size: .88rem; }
ol.checklist.plain { list-style: decimal; padding-left: 1.2rem; }
ul.checklist.plain { list-style: disc; padding-left: 1.2rem; }
.checklist li { padding: .3rem 0; border-bottom: 1px dashed var(--border); line-height: 1.4; }
.checklist li:last-child { border-bottom: none; }
.checklist li .mark { display: inline-block; width: 1.3em; font-weight: 700; }
.checklist li.ok .mark { color: var(--ok); }
.checklist li.todo { color: var(--text-strong); }
.checklist li.todo .mark { color: var(--warn-ink); }
.checklist li .hint { margin: .1rem 0 0 1.3em; font-size: .78rem; }
/* STATION-PROFILES-V257 (auditor's item 7): the station top (header + work context) stays on screen; the buttons an
operator presses all day get a real target (height from Settings); status lights for network / saving / printer */
.station-top { position: sticky; top: 0; z-index: 40; }
.station-top .station-head { position: static; }
.st-context { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .45rem 1.1rem; background: var(--surface);
border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--text); }
.st-context .ctx-k { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .25rem; }
.st-context .ctx-v { font-weight: 700; color: var(--text-strong); }
.btn.btn-work { min-height: var(--work-btn, 52px); padding-left: 1.25rem; padding-right: 1.25rem; font-size: 1.02rem; display: inline-flex; align-items: center; justify-content: center; }
.st-lights { display: flex; gap: .25rem; align-items: center; }
.st-light { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; padding: .12rem .45rem; border-radius: 999px;
border: 1px solid var(--border); color: var(--muted); text-decoration: none; white-space: nowrap; }
.st-light svg { width: .95rem; height: .95rem; }
.st-light.st-ok { color: var(--ok-ink); }
.st-light.st-warn { color: var(--warn-ink); border-color: var(--warn); }
.st-light.st-err { color: var(--err-ink); border-color: var(--err); background: var(--err-bg); }
.st-light.st-none { border-style: dashed; color: var(--muted); }
/* on a narrow screen the title keeps its room: the name and the calm light texts go (an alarm keeps its words) —
the context bar under the header already says client and order */
@media (max-width: 1000px) { .station-head .who { display: none; } .st-light:not(.st-err) .st-light-text { display: none; } }
@media (max-width: 640px) { .st-light .st-light-text { display: none; } .st-context { padding: .4rem .7rem; font-size: .84rem; } }
/* OBLIGATIONS-V258: the client's "What needs you" — one shape for every item (what happened / affects / to do / then) */
.ob-item { padding: .7rem .8rem; border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.ob-item:first-of-type { border-top: none; }
.ob-item.ob-err { border-left-color: var(--err); } .ob-item.ob-warn { border-left-color: var(--warn); } .ob-item.ob-mut { border-left-color: var(--border-strong); }
.ob-dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .7rem; margin: .35rem 0 0; font-size: .88rem; }
.ob-dl dt { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .12rem; }
.ob-dl dd { margin: 0; }
/* ============================================================
DS2-V260 — Design System v2 (auditor's item 5): one visual system, three densities.
The client portal breathes and explains, the office is compact, the station is touch-first.
============================================================ */
/* density: the layout stamps the body */
body.mode-portal { --pad-card: 1.5rem; --cell-y: .78rem; --cell-x: 1rem; --fs-table: var(--fs-md); }
body.mode-admin { --pad-card: 1.15rem; --cell-y: .52rem; --cell-x: .75rem; --fs-table: var(--fs-sm); }
body.mode-station { --pad-card: 1.2rem; --cell-y: .7rem; --cell-x: .85rem; --fs-table: var(--fs-md); }
body.mode-admin .main { max-width: 1320px; }
/* type scale utilities — the five sizes, instead of a dozen inline font-sizes */
.t-cap { font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.strong { color: var(--text-strong); font-weight: 600; }
/* page header: title (in the top bar) → one line on what this page is for → the page's actions */
.page-head { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, max-content); align-items: start; gap: .8rem 1.4rem; margin: -.4rem 0 1.3rem; }
.page-lead { margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.55; max-width: 72ch; padding-top: .3rem; }
.page-lead a { font-weight: 600; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; grid-column: 2; }
.page-head > .page-actions:only-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .page-head { grid-template-columns: 1fr; } .page-actions { grid-column: 1; justify-content: flex-start; } }
.topbar h1 { flex: 1 1 auto; min-width: 0; }
body.mode-admin .page-head { margin-bottom: 1rem; }
/* WT-153 (V332): in an office list that scrolls sideways (.table-wrap), a code never breaks over lines — FO-2026-0034, SU-00000018,
a tracking number, a shelf or an SKU stay whole, and a wide list scrolls inside its card instead of cutting its last columns.
Card-style lists (.tbl-cards — the move screens among them) keep their own wrapping; a cell that lists several codes says
white-space:normal itself. Layout only: the same in both themes. */
body.mode-admin .table-wrap :is(table.tbl, table.table):not(.tbl-cards) :is(td.mono, a.mono, b.mono, td > span.mono:only-child, .mono > a, .mono > b) { white-space: nowrap; }
/* "set aside" rows and cards (archived, revoked, expired, done, idle): quieter, never below 4.5:1 —
the text takes the muted colour, images and badges lose their colour, nothing turns see-through */
.is-dim, .is-dim td, .is-dim b, .is-dim strong, .is-dim .mono, .is-dim a:not(.btn) { color: var(--muted); }
.is-dim img { opacity: .6; filter: grayscale(.7); }
.is-dim .badge { filter: grayscale(1); }
.card.is-dim, .opt.is-dim { border-style: dashed; box-shadow: none; }
.btn.is-disabled { color: var(--muted); border-style: dashed; pointer-events: none; }
/* empty states: an icon, one sentence, the next step */
.empty > p, .empty > .lead { margin: .2rem auto .9rem; max-width: 52ch; color: var(--muted); }
.empty > .btn, .empty > a.btn { margin-top: .4rem; }
.empty > svg.ic, .empty > .ic svg.ic { width: 2.2rem; height: 2.2rem; stroke-width: 1.6; margin-bottom: .6rem; } /* EMPTY-ICON-V332 (PT-138): only the state's own icon is drawn large (a button's truck was 35 px) */
/* conversations (messages, tickets): the same bubbles everywhere, in both themes */
.bubble { border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem .9rem; background: var(--bubble-them); max-width: 760px; }
.bubble.me { background: var(--bubble-me); border-color: var(--accent-line); margin-left: auto; }
.bubble.note { background: var(--bubble-note); border-color: var(--warn-line); }
.bubble .meta { font-size: var(--fs-xs); color: var(--muted); margin-bottom: .25rem; }
/* keyboard: a way past the menu, and a ring on everything that can take focus */
.skip-link { position: absolute; left: .8rem; top: -3rem; z-index: 10000; background: var(--surface); color: var(--text-strong); border: 2px solid var(--accent); border-radius: var(--r-md); padding: .5rem .9rem; font-weight: 600; }
.skip-link:focus { top: .8rem; }
.navlink:focus-visible, .tile:focus-visible, .opt:focus-visible, .route-card:focus-visible, .btn:focus-visible, summary:focus-visible, [data-help]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.input:focus-visible { outline: none; }
main:focus { outline: none; }
/* dialogs: confirm / prompt in the house style (replaces the browser's grey boxes) */
.fp-dialog .modal { max-width: 460px; padding: 1.4rem 1.4rem 1.2rem; }
.fp-dialog .dlg-title { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 700; color: var(--text-strong); margin: 0 0 .5rem; }
.fp-dialog .dlg-title svg.ic { color: var(--accent-strong); }
.fp-dialog.danger .dlg-title svg.ic { color: var(--err); }
.fp-dialog .dlg-body { color: var(--text); font-size: var(--fs-md); line-height: 1.55; white-space: pre-line; margin: 0 0 1rem; }
.fp-dialog .dlg-input { margin: -.3rem 0 1rem; }
.fp-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.fp-dialog.danger .dlg-ok { background: var(--err); color: #fff; border-color: var(--err); box-shadow: none; }
[data-theme="light"] .fp-dialog.danger .dlg-ok { background: #b91c1c; }
@media (max-width: 640px) { .fp-dialog { align-items: flex-end; padding: 0; } .fp-dialog .modal { border-radius: var(--r-lg) var(--r-lg) 0 0; max-width: none; }
.fp-dialog .dlg-actions { flex-direction: column-reverse; } .fp-dialog .dlg-actions .btn { width: 100%; min-height: 48px; } }
/* the photo gallery reachable from the keyboard */
#fp-gallery .g-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
#fp-gallery .g-thumbs button.on { border-color: var(--accent); }
#fp-gallery .g-thumbs button img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; display: block; }
#fp-gallery .g-thumbs button:not(.on) img { opacity: .6; }
#fp-gallery button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-gallery]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* segmented filter (tabs over a list): a filter is not an action — the page's one amber button stays its only amber button */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); max-width: 100%; }
.seg > a, .seg > button { display: inline-flex; align-items: center; gap: .4rem; padding: .36rem .85rem; min-height: 34px; border-radius: 9px; border: none; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.seg > a:hover, .seg > button:hover { color: var(--text-strong); }
.seg > .on { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-1); }
.seg > .on.warn, .seg > .warn { color: var(--warn-ink); }
.seg .seg-n { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 0 .45rem; min-width: 1.4rem; text-align: center; }
.seg > .on .seg-n { background: var(--accent-bg); color: var(--accent-strong); }
[data-theme="dark"] .seg > .on { background: var(--surface-3); }
[data-theme="dark"] body:not(:has(.move-banner)) .seg > .on { box-shadow: inset 0 0 0 1px var(--accent-line), var(--shadow-1); } /* DARK-TAB-V332 (audit PT-139): the chosen tab has an edge — grey on grey read as nothing chosen; the frozen warehouse-move screens (.move-banner) keep theirs */
@media (max-width: 640px) { .seg > a, .seg > button { min-height: 40px; } }
/* a link inside a coloured banner takes the banner's ink (the amber link read at 4.3:1 on the red/amber tints) */
.result a:not(.btn), .result-ok a:not(.btn), .result-warn a:not(.btn), .result-err a:not(.btn), .result-info a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.t-2xs { font-size: var(--fs-cap); }
.ta-r { text-align: right; }
.tbl th.ta-r { text-align: right; } /* TIERS-V302: a right-aligned column's head sits over its figures (.tbl th set it left) */
/* filter tabs in the office and the station (the portal uses .seg): a filter never looks like the page's action */
.btn.btn-tab { background: transparent; border-color: var(--border); color: var(--muted); box-shadow: none; }
.btn.btn-tab:hover { color: var(--text-strong); border-color: var(--border-strong); background: var(--surface-2); }
.btn.btn-tab.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-strong); }
.btn.btn-tab.on .badge { background: var(--surface); }
/* AMAZON-OPS-V262: the connection's health per function */
.amz-health > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.amz-health > summary::-webkit-details-marker { display: none; }
.health-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.health-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); }
.health-list .hl-dot { flex: 0 0 .6rem; height: .6rem; border-radius: 50%; margin-top: .38rem; background: var(--ok); }
.health-list li.hl-problem .hl-dot { background: var(--warn); }
.health-list .hl-body { display: flex; flex-wrap: wrap; gap: .1rem .45rem; align-items: baseline; min-width: 0; }
.health-list .hl-why { flex-basis: 100%; color: var(--warn-ink); }
.health-list .hl-raw { flex-basis: 100%; color: var(--muted); overflow-wrap: anywhere; }
/* COSTS-V265 (audit 10): the request's estimate — one row per category, its parts under it at full width (phones too) */
.cost-est .ce-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.cost-est .ce-total { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.cost-est .ce-open { text-align: right; }
.cost-est .ce-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.cost-est .ce-row { padding: .55rem 0; border-top: 1px solid var(--border); }
.cost-est .ce-line { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin-bottom: .15rem; }
.cost-est .ce-amt { margin-left: auto; font-weight: 600; }
.est-updating { display: flex; justify-content: flex-end; }
/* SEARCH-V267 (review point 31): the one product search — combobox + listbox, keyboard-first */
.fp-search { position: relative; }
.fp-search-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); max-height: 320px; overflow: auto; }
.fp-search-opt { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .8rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.fp-search-opt:last-of-type { border-bottom: 0; }
.fp-search-opt.is-active { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.fp-search-opt .grow { flex: 1; min-width: 0; }
.fp-search-status { padding: .5rem .8rem; font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fp-search-hint { padding: .3rem .8rem; font-size: var(--fs-cap); color: var(--faint); border-top: 1px solid var(--border); text-transform: uppercase; letter-spacing: .04em; }
/* a phone: the search takes the whole row (the list was as narrow as the squeezed input) and each result stacks title over badges */
@media (max-width: 640px) {
.row > .grow:has(> .fp-search) { flex-basis: 100%; }
.fp-search-opt { flex-direction: column; align-items: flex-start; gap: .25rem; }
.fp-search-opt .grow { width: 100%; }
.fp-search-hint { display: none; }
}
/* RACKS-V276 — racks drawn as they stand: the hall plan shows every bay, each rack's front is to scale
(millimetres in the SVG: uprights, the bars at their measured heights, every place on every bar) */
.rack-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.rack-elev { display: block; max-width: none; height: auto; }
.rk-floor { stroke: var(--border-strong); stroke-width: 36; stroke-linecap: round; }
.rk-upright { fill: var(--info); opacity: .5; }
.rk-beam { fill: var(--accent); }
.rk-bayno { fill: var(--muted); font: 600 260px ui-monospace, SFMono-Regular, Menlo, monospace; text-anchor: middle; }
.rk-cell { cursor: pointer; }
.rk-cell rect { fill: var(--mut-bg); stroke: var(--border-strong); stroke-width: 14; transition: stroke .12s, opacity .12s; }
.rk-cell text { fill: var(--text); font: 500 235px ui-monospace, SFMono-Regular, Menlo, monospace; text-anchor: middle; pointer-events: none; }
.rk-cell .rk-pct { fill: var(--muted); font-size: 175px; }
.rk-cell.rk-ok rect { fill: var(--ok-bg); stroke: var(--ok-line); }
.rk-cell.rk-warn rect { fill: var(--warn-bg); stroke: var(--warn-line); }
.rk-cell.rk-err rect { fill: var(--err-bg); stroke: var(--err-line); }
.rk-cell.rk-over rect { fill: var(--warn-bg); stroke: var(--warn-line); stroke-width: 40; stroke-dasharray: 120 60; } /* FIT-FIRST-V325 (WT-024): amber, dashed — Adrian 29.09 */
.rk-cell.rk-busy rect { fill: var(--info-bg); stroke: var(--info-line); }
.rk-cell.rk-nosize rect { stroke-dasharray: 60 40; }
.rk-cell:hover rect, .rk-cell:focus rect { stroke: var(--accent); }
.rk-cell.rk-sel rect, .rk-cell.rk-hi rect { stroke: var(--accent); stroke-width: 44; }
.rk-cell.rk-off { opacity: .35; }
.rk-cell.rk-dim { opacity: .14; }
.hp-bay { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: .025; cursor: pointer; }
.hp-bay.rk-ok { fill: var(--ok-bg); stroke: var(--ok-line); }
.hp-bay.rk-warn { fill: var(--warn-bg); stroke: var(--warn-line); }
.hp-bay.rk-err { fill: var(--err-bg); stroke: var(--err-line); }
.hp-bay.rk-over { fill: var(--warn-bg); stroke: var(--warn-line); stroke-width: .07; stroke-dasharray: .18 .1; }
.hp-bay:hover { stroke: var(--accent); stroke-width: .06; }
.hp-bay-no { fill: var(--text-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; text-anchor: middle; pointer-events: none; }
.hp-door { fill: var(--ok-bg); stroke: var(--ok); stroke-width: .05; }
.hp-door-label { fill: var(--ok-ink); font-family: system-ui, sans-serif; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rk-cell rect { transition: none; } }
/* RACKS-V277 — spaces that are not for goods: a door, a machine, the forklift gate */
.rk-block-bg { fill: var(--bg-soft); stroke: var(--border-strong); stroke-width: 14; stroke-dasharray: 90 60; }
.rk-block-door .rk-block-bg { fill: var(--accent-bg); stroke: var(--accent-line); stroke-dasharray: none; }
.rk-block-machine .rk-block-bg { fill: var(--info-bg); stroke: var(--info-line); stroke-dasharray: none; }
.rk-block-passage .rk-block-bg { fill: var(--ok-bg); stroke: var(--ok-line); }
.rk-door { fill: var(--surface-3); stroke: var(--accent); stroke-width: 30; }
.rk-door-knob { fill: var(--accent); }
.rk-block-ic { fill: none; stroke: var(--text-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rk-block-label { fill: var(--text-strong); font: 600 215px system-ui, -apple-system, "Segoe UI", sans-serif; text-anchor: middle; }
.hp-bay-ic { fill: none; stroke: var(--text-strong); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hp-bay.hp-bay-door { fill: var(--accent-bg); }
.hp-bay.hp-bay-machine { fill: var(--info-bg); }
.hp-bay.hp-bay-passage { fill: var(--ok-bg); }
/* WAREHOUSE-3D-V278 — the warehouse in 3D (public/js/rack3d.js) */
.w3d { position: relative; height: min(72vh, 760px); min-height: 360px; background: var(--bg-soft); }
.w3d canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.w3d canvas:active { cursor: grabbing; }
.w3d-bar, .w3d-foot { gap: .5rem; flex-wrap: wrap; align-items: center; padding: .6rem .8rem; }
.w3d-bar { border-bottom: 1px solid var(--border); }
.w3d-foot { border-top: 1px solid var(--border); justify-content: space-between; }
.w3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w3d-label { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 .78rem/1.2 var(--font); color: var(--text-strong);
background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: .15rem .45rem; will-change: transform; }
.w3d-label small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); }
.w3d-label.w3d-row { border-color: var(--accent-line); font-family: var(--mono); font-size: .85rem; }
.w3d-label.w3d-area { background: transparent; border: none; color: var(--muted); font-weight: 500; font-size: .7rem; }
.w3d-label.w3d-door { border-color: var(--ok-line); color: var(--ok-ink); }
.w3d-tip { position: absolute; left: 0; top: 0; pointer-events: none; max-width: 22rem; font: 500 .8rem/1.3 var(--font); color: var(--text);
background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: .3rem .55rem; box-shadow: var(--shadow-1); }
.w3d-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: var(--muted); }
.w3d-nogl-msg { display: none; position: absolute; inset: 0; place-items: center; text-align: center; padding: 2rem; color: var(--muted); }
.w3d.w3d-nogl .w3d-nogl-msg { display: grid; }
.w3d.w3d-nogl canvas { display: none; }
/* SHELF-LABEL-V279 — the rack label: a 4×6″ label lying along the bar (150×100): picture of the bay, big arrow, code, barcode, words */
.label-toolbar { padding: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; color: #333; font: 14px/1.4 var(--font); }
.label-toolbar a { color: #555; margin-right: .6rem; text-decoration: none; border-bottom: 2px solid transparent; }
.label-toolbar a.on { color: #000; font-weight: 700; border-bottom-color: #d4a574; }
.label-toolbar button { padding: .5rem 1.4rem; border-radius: 10px; border: none; background: #d4a574; font-weight: 700; cursor: pointer; }
.label-toolbar .hint { color: #888; font-size: .85rem; }
.bl-page { display: inline-block; margin: 4mm; vertical-align: top; }
.bl { position: relative; width: 150mm; height: 100mm; box-sizing: border-box; padding: 4mm; background: #fff; color: #000;
display: grid; grid-template-columns: 42mm 1fr; grid-template-rows: 1fr; gap: 0 4mm; align-items: center; border: .3mm dashed #bbb; overflow: hidden; }
.bl-pic { width: 100%; height: 92mm; min-height: 0; }
.bl-main { display: flex; flex-direction: column; gap: 2.6mm; min-width: 0; }
.bl-say { display: flex; align-items: center; gap: 2.5mm; padding: 1.8mm 2.5mm; border: .9mm solid #000; border-radius: 2mm; }
.bl-say svg { width: 15mm; height: 15mm; flex: none; color: #000; }
.bl-say b { display: block; font: 900 19pt/1.05 var(--font); letter-spacing: .01em; }
.bl-say small { display: block; font: 700 10pt/1.2 var(--font); margin-top: .6mm; }
.bl-down .bl-say { background: #000; color: #fff; }
.bl-down .bl-say svg { color: #fff; }
.bl-here .bl-say { border-width: 1.8mm; border-style: double; }
.bl-code { display: block; width: 100%; height: auto; fill: #000; }
.bl-bars { padding: 0 3mm; }
.bl-bars svg { display: block; width: 100%; height: 22mm; }
.bl-words { font: 600 10pt/1.3 var(--font); }
@media print {
.bl { border: none; }
.bl-page { display: block; margin: 0; page-break-after: always; break-after: page; position: relative; overflow: hidden; }
.label-beam .bl-page { width: 100mm; height: 150mm; }
.label-beam .bl { position: absolute; top: 0; left: 0; transform-origin: top left; transform: translateX(100mm) rotate(90deg); }
}
/* FASTPREP-APP-V281 — small screens (the Zebra TC52 is 360 px wide): two tiles a row, a header that fits */
@media (max-width: 440px) {
.tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.tile { padding: .85rem .5rem; gap: .3rem; font-size: .95rem; }
.tile > svg.ic { width: 1.7rem; height: 1.7rem; }
.station-body { padding: .75rem; }
.station-head { gap: .35rem; padding: .5rem .6rem; }
.station-head h1 { font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station-head .btn-sm { min-height: 38px; padding: .25rem .5rem; }
.station-head .who, .station-head .theme-toggle, .station-head a[aria-label="My security"] { display: none; }
.st-lights .st-light span:not(:empty) { display: none; }
/* the page's name needs the room: the module shows in the coloured stripe, sounds stay on, "saved" shows only when a save failed */
.station-head .module-badge, .station-head [data-sound-toggle] { display: none; }
.st-lights > .st-light:nth-child(2):not(.st-err) { display: none; }
/* scan fields: the camera / text button sits inside on the right — the text never runs under it */
.scan-input { font-size: 1.12rem; padding-left: .8rem; padding-right: 3.6rem; }
.scan-input::placeholder { font-size: .88rem; letter-spacing: -.01em; }
/* DESIGN-V289: the receiving steps' names wrap under their bar instead of running into each other */
.steps { margin-bottom: 2.3rem; }
.steps .step::after { white-space: normal; right: 0; line-height: 1.15; }
/* a heading "Name — detail" keeps the name on a handheld; the detail is on the page */
.station-head h1 .h-tail { display: none; }
select.fbm-client-select { width: 100%; max-width: none; }
}
.in-app .skip-link { display: none; }
/* the text read by the camera: tap the right line */
.fp-ocr { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .55); display: grid; place-items: end center; }
.fp-ocr-card { width: 100%; max-width: 560px; max-height: 80vh; overflow: auto; background: var(--surface); border-top: 1px solid var(--border-strong);
border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.fp-ocr-head { display: flex; justify-content: space-between; align-items: center; }
.fp-ocr-list { display: flex; flex-direction: column; gap: .4rem; }
.fp-ocr-line { text-align: left; font-size: 1.1rem; padding: .8rem .9rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--text-strong); }
.fp-ocr-line:active { border-color: var(--accent); background: var(--accent-bg); }
.fp-ocr-line.on { border-color: var(--accent); background: var(--accent-bg); } /* FLUID-V287: a line chosen for a name */
.fp-ocr-pick { display: flex; gap: .6rem; align-items: center; padding: .6rem .7rem; border-radius: var(--r-md); background: var(--surface-2); }
.fp-ocr-pick span { flex: 1; min-width: 0; font-weight: 600; color: var(--text-strong); }
/* FETCH-V284: the order's code on the computer screen, and the handheld's round */
.fetch-qr { display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; }
.fetch-qr-code { flex: 0 0 auto; width: 184px; height: 184px; background: var(--code-bg); color: var(--code-ink); padding: 4px; border-radius: var(--r-md); }
.fetch-qr-code svg { display: block; width: 100%; height: 100%; }
.in-app .fetch-qr { display: none; }
.fetch-step { font-size: 1.15rem; line-height: 1.4; }
.fetch-shelf { font-size: 1.35rem; font-weight: 800; }
.fetch-group.on { border-color: var(--accent); background: var(--accent-bg); }
/* HANDHELD-V285: the Zebra's own home — the handheld's work as big rows for a thumb (gloves), what waits there on the
right; one hint strip on top (any label can be scanned from here); the desk tools folded under Advanced */
.hh-scan { display: flex; gap: .8rem; align-items: center; padding: .8rem .95rem; margin: 0 0 1.1rem;
border: 1px dashed var(--accent-line); border-radius: var(--r-lg); background: var(--accent-bg); }
.hh-scan > svg.ic { width: 2rem; height: 2rem; flex: 0 0 auto; color: var(--accent-strong); }
.hh-scan b { display: block; color: var(--text-strong); font-size: 1.02rem; }
.hh-scan span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.hh-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 .8rem; border-radius: var(--r-lg); background: var(--surface-2); }
.hh-switch button { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; border: 0; border-radius: var(--r-md);
background: transparent; color: var(--muted); font: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.hh-switch button.on-fba { background: var(--accent-bg-strong); color: var(--accent-strong); }
.hh-switch button.on-fbm { background: var(--fbm-bg); color: var(--fbm-strong); }
.hh-sw-n { min-width: 1.5rem; padding: .05rem .4rem; border-radius: 999px; font-family: var(--mono); font-size: .8rem; background: var(--surface); color: var(--text-strong); }
.hh-both { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .2rem 0 0; }
.hh-both > .hh-mini:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd one out takes the whole row, never half of it */
.hh-mini { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 50px; padding: .4rem .6rem; border: 1px solid var(--border);
border-radius: var(--r-lg); color: var(--text); font-weight: 600; text-decoration: none; }
.hh-mini > svg.ic { width: 1.25rem; height: 1.25rem; color: var(--muted); }
.hh-mini:active { border-color: var(--accent); background: var(--accent-hover); }
.hh-group { margin: 0 0 1.05rem; }
.hh-group h2 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .5rem; padding-left: .55rem; border-left: 3px solid var(--border); color: var(--muted); }
.hh-group.fba h2 { border-color: var(--accent); color: var(--accent-strong); }
.hh-group.fbm h2 { border-color: var(--fbm); color: var(--fbm-strong); }
.hh-group.fbm .hh-row > svg.ic, .hh-group.fbm .hh-n { color: var(--fbm-strong); }
.hh-group.fbm .hh-row:hover, .hh-group.fbm .hh-row:focus-visible, .hh-group.fbm .hh-row:active { border-color: var(--fbm); }
.hh-group.fbm .hh-row:active { background: var(--fbm-bg); }
.hh-group.move-temp h2 { border-color: var(--warn); color: var(--warn-ink); } /* TRANSITION-TEMP */
.hh-list { display: flex; flex-direction: column; gap: .5rem; }
.hh-row { display: flex; align-items: center; gap: .85rem; min-height: 66px; padding: .6rem .95rem; border: 1px solid var(--border);
border-radius: var(--r-lg); background: var(--surface); color: var(--text-strong); text-decoration: none;
transition: transform .15s ease, border-color .15s ease, background-color .15s ease; }
.hh-row:hover, .hh-row:focus-visible { border-color: var(--accent); }
.hh-row:active { transform: scale(.985); border-color: var(--accent); background: var(--accent-hover); }
.hh-row > svg.ic { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; color: var(--accent-strong); stroke-width: 1.7; }
.hh-t { flex: 1; min-width: 0; }
.hh-t b { display: block; font-size: 1.08rem; line-height: 1.25; }
.hh-t span { display: block; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-n { flex: 0 0 auto; min-width: 2.4rem; text-align: right; font-family: var(--mono); font-size: 1.3rem; font-weight: 800; color: var(--accent-strong); }
.hh-mine { border-color: var(--accent-line); background: var(--accent-bg); }
.hh-warn { border-color: var(--warn-line); } .hh-warn > svg.ic { color: var(--warn-ink); }
.hh-err { border-color: var(--err-line); } .hh-err > svg.ic { color: var(--err-ink); }
.hh-advanced { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.hh-advanced > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .85rem; min-height: 58px; padding: .5rem .95rem;
border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text); font-weight: 700; }
.hh-advanced > summary::-webkit-details-marker { display: none; }
.hh-advanced > summary > svg.ic { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; color: var(--muted); }
.hh-t b.hh-wrap { font-size: 1rem; font-weight: 600; }
.hh-cta { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--accent-strong); }
.hh-advanced[open] > summary { border-color: var(--accent-line); }
.hh-advanced > summary .hh-t span { font-weight: 400; }
.hh-advanced > div > .tile-zone:first-child { margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .hh-row { transition: none; } }
.fbm-client-select { max-width: 320px; } /* DESIGN-V289: the returns desk's client choice — full width on a handheld */
.fp-text-how { font-size: 1.1rem; line-height: 1.45; margin: .9rem 0 1rem; color: var(--text-strong); } /* ZEBRA-V283: "Aa" waits for the trigger */
.camscan-ocr { font-weight: 800; letter-spacing: -.02em; }
.camscan-btn > svg.ic { width: 1.35rem; height: 1.35rem; } /* DESIGN-V289: the camera icon, not an emoji */
/* COUNT-CODES-V281 — the counted barcodes: long codes wrap, the badge never pushes out of the screen */
.cc-list { display: flex; flex-direction: column; gap: .45rem; }
.cc-row { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.cc-row.cc-new { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.cc-main { flex: 1; min-width: 0; }
.cc-code { word-break: break-all; font-size: 1rem; color: var(--text-strong); }
.cc-badge { flex-shrink: 0; max-width: 42%; white-space: normal; text-align: right; }
/* COUNT-CODES-V325 (WT-123): a row opens Find; a box booked on another shelf is amber */
a.cc-row { color: inherit; text-decoration: none; }
a.cc-row:hover, a.cc-row:focus-visible { border-color: var(--accent); }
.cc-row.cc-elsewhere { border-color: var(--warn-line); background: var(--warn-bg); }
/* WHO-IS-WORKING-V282 — "Who is working?" on a registered handheld: big names, then the 6 digits */
.who-wrap { min-height: 100vh; background: var(--bg); padding: 1.2rem 1rem 2rem; max-width: 560px; margin: 0 auto; }
.who-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-bottom: 1.2rem; }
.who-head h1 { margin: .4rem 0 0; font-size: 1.5rem; }
.who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.who-person { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--r-lg);
background: var(--surface); color: var(--text-strong); text-decoration: none; text-align: center; }
.who-person:active { border-color: var(--accent); background: var(--accent-bg); }
.who-initials { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent-line); }
.who-name { font-weight: 600; line-height: 1.25; }
.who-name small { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); }
.who-code-form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.who-code { font: 700 2.2rem/1 var(--mono); text-align: center; letter-spacing: .25em; padding: 1rem; }
/* TIERS-V302 — the month's volume ladder: where the month stands on the tiers, the next threshold, what it saves.
Equal steps (the bands are not to scale — 2,001+ has no end); the current step fills with the month's progress. */
.tier { display: flex; flex-direction: column; gap: .15rem; --n: 5; --fill: 0%; } /* the page sets both per ladder */
.tier-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .8rem; flex-wrap: wrap; }
.tier-cap { font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tier-vol { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tier-vol small { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.tier-ladder, .tier-ruler { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
.tier-ladder { margin-top: .8rem; }
.tier-step { position: relative; height: 10px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.tier-step.is-done { background: var(--accent-line); }
.tier-step.is-now { box-shadow: inset 0 0 0 1px var(--accent-line); }
.tier-step.is-now > i { position: absolute; inset: 0 auto 0 0; width: var(--fill); min-width: 4px; border-radius: 4px; background: var(--accent); animation: tierFill .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tierFill { from { width: 0; } }
.tier-ruler { margin-top: .35rem; }
.tier-ruler span { font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-ruler span.is-now { color: var(--accent-text); font-weight: 700; }
.tier-ruler span.is-target { color: var(--text-strong); font-weight: 700; } /* where the month has to get to */
.tier-next { display: flex; gap: .75rem; align-items: flex-start; margin-top: .95rem; padding: .8rem .95rem; border-radius: var(--r-md);
background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--text); }
.tier-next > .ic { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--accent-text); }
.tier-next b { color: var(--text-strong); }
.tier-save { color: var(--ok-ink); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-next .t-sm { color: var(--muted); margin-top: .2rem; }
.tier-best { display: flex; gap: .6rem; align-items: center; margin-top: .9rem; font-size: var(--fs-sm); color: var(--ok-ink); }
.tier-best > .ic { flex-shrink: 0; }
.tier-rate { margin-top: .75rem; color: var(--text); } /* PT-011 (V324): the rate the month is priced at, the top tier included */
.tier-rate b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cost-est .tier-next { margin-top: .7rem; padding: .6rem .75rem; font-size: var(--fs-sm); } /* PT-010 (V324): what this request does to the month's tier */
.tier-compact .tier-vol { font-size: 1.25rem; }
.tier-compact .tier-ladder { margin-top: .55rem; }
.tier-compact .tier-step { height: 7px; }
.tier-compact .tier-next { margin-top: .7rem; padding: .6rem .75rem; }
.tier-chip { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: var(--fs-cap); font-weight: 600; white-space: nowrap;
background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent-line); font-variant-numeric: tabular-nums; }
.tier-chip.is-fixed { background: var(--mut-bg); color: var(--muted); border-color: var(--border); }
/* the rate grid marks the column the month is priced at */
.tbl th.tier-col-now, .tbl td.tier-col-now { background: var(--accent-bg); }
.tbl th.tier-col-now { color: var(--accent-text); }
.tbl td.tier-col-now { color: var(--text-strong); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tier-step.is-now > i { animation: none; } }
@media (max-width: 520px) { .tier-vol { font-size: 1.4rem; } .tier-ladder, .tier-ruler { gap: 3px; } }
/* PER-ASIN-V304 — cost per product: one block per ASIN (units, total, per unit), its services underneath, the shipment apart */
.pb .pb-item { padding: .85rem 0; border-top: 1px solid var(--border); }
.pb .card-title + .pb-item { border-top: none; padding-top: .2rem; }
.pb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.pb-title { min-width: 0; }
.pb-title b { color: var(--text-strong); overflow-wrap: anywhere; }
.pb-sum { text-align: right; flex-shrink: 0; }
.pb-sum b { font-size: var(--fs-lg); color: var(--text-strong); }
.pb-rows { margin-top: .45rem; display: flex; flex-direction: column; gap: .15rem; }
.pb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 7.8rem 6rem; gap: .3rem .8rem; align-items: baseline; font-size: var(--fs-sm); padding: .25rem 0 .25rem .75rem;
border-left: 2px solid var(--border); }
.pb-calc { text-align: right; }
.pb-tier { text-align: left; }
.pb-amt { text-align: right; color: var(--text-strong); }
.pb-shared .pb-row { border-left-color: var(--border-strong); }
.pb-total { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding-top: .8rem; border-top: 2px solid var(--border-strong); }
.pb-total b { font-size: 1.2rem; color: var(--text-strong); }
@media (max-width: 560px) {
.pb-head { flex-direction: column; gap: .25rem; }
.pb-sum { text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.pb-row { grid-template-columns: minmax(0, 1fr) auto; }
.pb-row .pb-calc { grid-column: 1; grid-row: 2; text-align: left; }
.pb-row .pb-tier { grid-column: 2; grid-row: 2; text-align: right; }
.pb-row .pb-amt { grid-column: 2; grid-row: 1; }
}
/* WAREHOUSE-OFFICE-V308: a control that is read by screen readers and clicked through its label, never seen */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 520px) { .station-head .mode-link-t { display: none; } } /* WAREHOUSE-OFFICE-V308: the icon alone on a narrow screen */
/* MONEY-TEAM-V310 — a client's overdue invoices, one block each */
.od-inv { padding: .75rem 0; border-top: 1px solid var(--border); }
.card-title + .od-inv { border-top: none; padding-top: .1rem; }
.od-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
/* MONEY-TEAM-V310 — an order's custom charges */
.cchg { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--border-strong); display: flex; flex-direction: column; gap: .35rem; }
.cchg-title { font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cchg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem auto; gap: .7rem; align-items: center; font-size: var(--fs-sm); }
.cchg-what { overflow-wrap: anywhere; }
.cchg-form { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .3rem; }
.cchg-form > input:first-child, .cchg-form > .btn { grid-column: 1 / -1; } /* what on its own line, then how many and the price, then the button */
/* TICKETS-FOR-V311 — who a ticket is for: two big choices with what each covers */
.aud-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.aud-opt { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.aud-opt b { color: var(--text-strong); }
.aud-opt .sub { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: .15rem; }
.aud-opt.on { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 2px var(--accent-ring); }
.aud-opt:focus-within { box-shadow: 0 0 0 2px var(--accent-ring); }
.aud-ic { flex-shrink: 0; color: var(--accent-text); margin-top: .1rem; }
/* MSG-TICKETS-V328 — audit PT-114 / PT-115: a message keeps its line breaks; ONE file picker (messages and tickets, portal and office) —
a drop zone over the real input, the chosen files listed with a thumbnail, a name, a size and a remove button — and the files of a
conversation as thumbnails (the gallery) or named chips */
.msg-body { white-space: pre-line; overflow-wrap: anywhere; }
.file-drop { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.file-drop-zone { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .75rem .95rem; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-soft); color: var(--text); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.file-drop-zone:hover, .file-drop-zone.is-over { border-color: var(--accent); background: var(--accent-bg); }
.file-drop-zone:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.file-drop-zone b { color: var(--text-strong); }
.file-drop-zone .sub { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: .1rem; }
.file-drop-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--mut-bg); color: var(--accent-text); }
.file-drop.is-compact .file-drop-zone { padding: .45rem .7rem; min-height: 44px; }
.file-drop.is-compact .file-drop-zone .sub { font-size: var(--fs-xs); }
.file-drop.is-compact .file-drop-ic { width: 1.7rem; height: 1.7rem; }
.file-drop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.file-drop-list li { display: flex; align-items: center; gap: .6rem; padding: .3rem .35rem .3rem .4rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-sm); }
.file-drop-list .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.file-drop-list .btn { min-height: 32px; padding: .25rem .5rem; }
.file-thumb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--mut-bg); color: var(--muted); cursor: zoom-in; }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-thumb.is-doc { cursor: default; }
.msg-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.msg-files .file-thumb { width: 72px; height: 72px; }
.file-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .25rem .65rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-strong); font-size: var(--fs-sm); text-decoration: none; }
.file-chip:hover { border-color: var(--accent); }
.file-chip > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the browser's own picker, wherever a page still uses it (orders, products, the office): a house button in both themes */
input[type="file"]::file-selector-button { margin-right: .7rem; padding: .35rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-strong); font: inherit; font-weight: 600; cursor: pointer; transition: border-color var(--t-fast); }
input[type="file"]::file-selector-button:hover { border-color: var(--accent); }
input[type="file"].input { padding: .45rem .55rem; color: var(--muted); }
/* READONLY-CLIENT-V314: a form section that is read-only for the Warehouse — no border, controls greyed by the browser */
.bare-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bare-fieldset:disabled .input, .bare-fieldset:disabled select, .bare-fieldset:disabled textarea { opacity: 1; color: var(--text); background: var(--surface-2); cursor: default; }
/* STAFF-ENROL-V314: a QR is read against white, in both themes */
.totp-qr { width: 200px; height: 200px; margin: .2rem auto .6rem; padding: 8px; background: #fff; border-radius: 10px; box-sizing: border-box; }
.totp-qr svg { display: block; width: 184px; height: 184px; }
.totp-qr.is-empty { width: auto; height: auto; background: none; padding: 0; font-size: .85rem; color: var(--muted); }
/* WHO-ON-ZEBRA-V314 (audit WT-094): the signed-in person's initials, shown where the name has no room */
.station-head .who-ini { display: none; flex-shrink: 0; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .35rem;
border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: .78rem; font-weight: 800; letter-spacing: .03em; }
@media (max-width: 1000px) { .station-head .who-ini { display: inline-flex; } }
/* WHO-ON-ZEBRA-V314 (audit WT-094, tomasz-F10): where the light's words have no room, an alarm still says one word */
.st-light .st-light-short { display: none; font-size: .72rem; }
@media (max-width: 640px) { .st-light.st-err .st-light-short { display: inline; } }
/* PT-052: announce trackings — the number gets the width, the courier sits under it on phones */
.ann-track .ann-courier { max-width: 160px; }
@media (max-width: 640px) { .ann-track { flex-wrap: wrap; } .ann-track .input.grow { flex: 1 1 100%; min-width: 0; } .ann-track .ann-courier { max-width: none; flex: 1 1 auto; } }
/* PT-132: a tile that cannot be chosen looks it — no lift, no accent, a reason under the count */
.tile:disabled { opacity: .5; cursor: not-allowed; }
.tile:disabled:hover { transform: none; border-color: var(--border); box-shadow: none; }
/* PT-067: a small inline "working on it" spinner */
.fp-spin { display: inline-block; width: .85em; height: .85em; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .fp-spin { animation: none; border-right-color: currentColor; opacity: .5; } }
/* ===== SCAN-ROUTE-V325 — audit WT-054 / WT-115: where a scan's answer shows ===== */
/* the answer to the last scan, under its field, kept until the next one — an error is red, bigger, and shakes once */
.scan-strip { display: flex; gap: .55rem; align-items: flex-start; margin: .35rem 0 .6rem; padding: .6rem .8rem; border-radius: var(--r-md); border: 1px solid; font-size: .95rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.scan-strip > svg.ic { width: 1.3rem; height: 1.3rem; margin-top: .05rem; }
.scan-strip.is-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.scan-strip.is-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.scan-strip.is-err { background: var(--err-bg); border: 2px solid var(--err); color: var(--err-ink); font-size: 1.05rem; animation: shake .35s; }
.scan-strip.is-dim { background: var(--surface-2); border-color: var(--border); color: var(--muted); animation: none; }
/* a scan read while a question is on screen: said inside the question — never typed into it, never its answer */
.fp-dialog .dlg-scan { margin: -.4rem 0 .9rem; padding: .5rem .7rem; border-radius: var(--r-md); border: 1px solid var(--err); background: var(--err-bg); color: var(--err-ink); font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
/* at the warehouse the messages drop from the top, across the screen — never a small card in a corner over the list; an error is red, a warning amber */
body.mode-station #toasts { top: .6rem; bottom: auto; left: .75rem; right: .75rem; max-width: none; align-items: center; pointer-events: none; } /* the band never swallows a click on the header (V325 review) */
body.mode-station .toast { width: 100%; max-width: 640px; animation-name: toastDrop; cursor: pointer; pointer-events: auto; }
body.mode-station .toast.out { animation-name: toastLift; }
body.mode-station .toast.err { background: linear-gradient(var(--err-bg), var(--err-bg)), var(--surface-2); border-color: var(--err); border-left-width: 6px; font-weight: 600; }
body.mode-station .toast.warn { background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--surface-2); border-left-width: 6px; }
@keyframes toastDrop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes toastLift { to { opacity: 0; transform: translateY(-16px); } }
/* ============================================================
RECEIVE-DOOR-V325 — pre-launch audit W3 (receiving at the door)
============================================================ */
/* WT-116: the Size step fits one Zebra screen — L × W × H and kg on ONE row (never the phone rule "one field per line"),
two-column one-tap choices, and Confirm pinned to the bottom of the screen */
.dims-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; align-items: end; margin: 0 0 .7rem; }
.dims-row > .field { margin-bottom: 0; min-width: 0; }
.dims-row .field label { font-size: .72rem; margin-bottom: .2rem; }
.dims-row .input { padding-left: .4rem; padding-right: .4rem; text-align: center; font-size: 1.05rem; min-width: 0; }
.opt-grid.opt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sticky-foot { position: sticky; bottom: 0; z-index: 6; background: var(--bg); padding: .55rem 0 .4rem; margin-top: .6rem; border-top: 1px solid var(--border); }
/* WT-117: recent clients are rows a gloved thumb hits (52 px), two to a line; small chips grow on the handheld */
.opt-grid .opt.opt-52 { min-height: 52px; padding: .5rem .75rem; justify-content: flex-start; line-height: 1.25; overflow-wrap: anywhere; }
.in-app .opt.opt-chip { min-height: 48px; padding-left: .85rem; padding-right: .85rem; }
/* WT-127: ONE camera control — a big button that opens the camera, the shots as thumbnails, ✕ takes one back */
.photo-take { display: flex; flex-direction: column; gap: .45rem; }
.photo-take-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.photo-take-row.with-beside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-take-row > .opt { min-height: 52px; padding: .5rem .75rem; }
.btn.photo-take-btn, .field label.photo-take-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 52px; margin: 0; cursor: pointer;
text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; color: var(--text-strong); }
.photo-take .photo-strip { margin-top: 0; }
/* WHERE-PRINTS-V326 · REPRINT-DIRECT-V326 · PICKER-V326 — audit WT-108, WT-102, WT-110: a direct print (⚡) names the printer it
goes to; a link that only opens a label page (↗) is never offered inside the handheld app — its Print does nothing there and
it replaced the work screen; the code to write by hand shows big in the dialog */
.print-to { display: inline-block; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-size: .8em; font-weight: 500; }
html.in-app .opens-page { display: none; }
.fp-dialog .dlg-big { text-align: center; margin: 0 0 .8rem; }
.picker-all { margin: 0 0 .8rem; }
/* ===== S9 · V327 — the first minutes: the sign-up, the password rule, the sign-in code ===== */
/* SIGNUP-PREMIUM-V327 — audit PT-068: the promise is a real headline, the route cards line up at the top, a phone gets one calm column */
.reg-wrap { align-items: flex-start; padding-top: 2.2rem; }
.reg-h1 { margin: 1rem auto 0; max-width: 22ch; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); }
.reg-intro { margin: .55rem auto 0; max-width: 52ch; font-size: var(--fs-md); line-height: 1.5; color: var(--muted); }
.reg-free { display: inline-flex; align-items: center; gap: .35rem; margin: .6rem 0 0; font-size: var(--fs-xs); color: var(--faint); }
.reg-free svg.ic { color: var(--ok-ink); }
.route-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.reg-msg b svg.ic { color: var(--accent-strong); margin-right: .15rem; }
.reg-msg.redirect b svg.ic { color: var(--warn-ink); }
.reg-next { display: grid; gap: .45rem; margin: 1.1rem 0 0; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text); }
.reg-next-cap { font-size: var(--fs-cap); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.reg-next-li { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.45; }
.reg-next-li svg.ic { color: var(--accent-strong); margin-top: .15rem; }
@media (max-width: 640px) {
.reg-wrap { padding: 1.1rem .75rem 2.5rem; }
.reg-card .auth-logo { margin-bottom: 1.1rem; }
.reg-card > .card { padding: 1.15rem 1rem; }
.reg-step h2 { font-size: 1.15rem; }
.reg-step .lead { font-size: var(--fs-md); margin-bottom: 1rem; }
.route-card { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); column-gap: .75rem; padding: .9rem 1rem; }
.route-card > svg.ic { grid-row: 1 / span 3; width: 1.6rem; height: 1.6rem; margin: .1rem 0 0; }
.route-card > :not(svg) { grid-column: 2; }
.route-card:hover { transform: none; }
}
/* PW-RULES-V327 — audit PT-064: the whole password rule under the field, each line ticked as it is met; the eye shows what was typed */
.pw-field { position: relative; }
.pw-field > .input { padding-right: 2.9rem; }
.pw-eye { position: absolute; top: 50%; right: .3rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--text-strong); background: var(--accent-hover); outline: none; }
.pw-eye svg.ic { width: 1.15rem; height: 1.15rem; }
.pw-eye .ic-shown, .pw-eye.is-shown .ic-hidden { display: none; }
.pw-eye.is-shown .ic-shown { display: inline; }
.pw-rules { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .25rem 1rem; font-size: var(--fs-xs); color: var(--muted); }
.pw-rules li { display: flex; align-items: center; gap: .4rem; transition: color var(--t-fast); }
.pw-rules li svg.ic { width: 1rem; height: 1rem; }
.pw-rules .pw-ok, .pw-rules li.is-ok .pw-todo { display: none; }
.pw-rules li.is-ok .pw-ok { display: inline; }
.pw-rules li.is-ok { color: var(--ok-ink); }
.pw-rules.is-typing li:not(.is-ok) { color: var(--text); }
.pw-rules .pw-hit { font-weight: 700; color: var(--warn-ink); }
/* FIRST-SCREEN-V327 — audit PT-057: the sign-in code set-up — numbered moves, the QR first, the key in fours with Copy;
"open the app" only on a touch device (a computer cannot open the phone's app) */
@media (hover: hover) and (pointer: fine) { .only-touch { display: none !important; } }
.onboard-title { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--text-strong); }
.enrol-steps { margin: .2rem 0 1rem; padding-left: 1.3rem; font-size: var(--fs-md); line-height: 1.5; }
.enrol-steps li { margin: .2rem 0; }
.btn.enrol-open { display: flex; width: 100%; margin: 0 0 .9rem; }
.totp-key { text-align: center; margin: 0 0 1rem; }
.totp-key-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: .35rem; }
.totp-key-row code { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; word-spacing: .2em; color: var(--text-strong); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .35rem .65rem; overflow-wrap: anywhere; }
.enrol-confirm { border-top: 1px solid var(--border); padding-top: .9rem; }
.enrol-confirm label { display: block; margin-bottom: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
/* CONTRACT-V327 — audit PT-061: the service contract reads like a document — full height, normal ink, a reading measure (no inner scroll box) */
.contract-doc { max-width: 760px; }
.card.contract-doc { font-size: var(--fs-md); line-height: 1.65; color: var(--text); }
.card.contract-doc > p { margin: 0 0 .85rem; }
.card.contract-doc > .result { margin: -.2rem 0 1.1rem; }
/* LOST-PHONE-V327 (PT-058): the quiet way back on the code screen */
.lost-phone > summary { cursor: pointer; text-align: center; font-size: .88rem; color: var(--accent-text); }
.lost-phone[open] > summary { margin-bottom: .2rem; }
/* ROLE-DOORS-V329 — audit PT-103: the quiet line in place of a control the role cannot use */
.role-line { display: flex; gap: .4rem; align-items: baseline; margin: .35rem 0 0; }
span.role-line { display: inline-flex; margin: 0; }
.role-line svg.ic { color: var(--faint); flex: 0 0 auto; }
/* NAV-FIT-V329 — audit PT-105: the portal menu fits a laptop — tighter rows, the account pages in the menu under the name (top right),
a fade at the foot while more of the menu is below; the phone drawer keeps every link and its tap size */
.side-account { display: flex; flex-direction: column; gap: .2rem; }
.sidebar.has-more { -webkit-mask-image: linear-gradient(to bottom, var(--text) calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, var(--text) calc(100% - 3rem), transparent); }
@media (min-width: 901px) {
.mode-portal .sidebar .navlink { padding: .44rem .7rem; font-size: .9rem; }
.mode-portal .sidebar .navsec { padding: .75rem .7rem .2rem; }
.mode-portal .sidebar .wordmark { padding-bottom: .8rem; }
.mode-portal .side-account { display: none; }
}
.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .6rem; border-radius: var(--r-md); transition: background var(--t-fast), color var(--t-fast); }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary::after { content: ''; width: .38rem; height: .38rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.12rem) rotate(45deg); }
.acct > summary:hover, .acct[open] > summary { background: var(--surface-2); color: var(--text-strong); }
.acct-menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 70; min-width: 15rem; padding: .35rem; display: flex; flex-direction: column; gap: .1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.acct-head { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .65rem .6rem; margin-bottom: .2rem; border-bottom: 1px solid var(--border); color: var(--text-strong); }
.acct-menu a, .acct-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover, .acct-menu a:focus-visible, .acct-menu button:focus-visible { background: var(--surface-2); color: var(--text-strong); }
.acct-menu a.active { background: var(--accent-bg); color: var(--accent-strong); font-weight: 600; }
.acct-menu form { margin: .2rem 0 0; padding-top: .2rem; border-top: 1px solid var(--border); }
.acct-menu svg.ic { width: 17px; height: 17px; }
/* SUPPORT-V329 — audit PT-116: the reply window under every reply box */
.reply-time { display: flex; gap: .4rem; align-items: baseline; margin: .6rem 0 0; }
/* ===== S13 · V331 · MONEY PAGES — the portal's money pages on a phone: the cost block (PN-04), Decisions and the dashboard's obligations (PT-121),
My rates (PT-122). The shipment dossier (PT-119) is paper and carries its own styles. Everything that moves sits in the
max-width: 640px block; outside it only the classes that replace inline styles, with the same values (a computer sees no change). ===== */
/* PT-121: a decision's options — on a computer the row they always were (the gap and the note's width the inline styles gave); what
a choice does stays the tooltip there and becomes words on a phone, where a tooltip needs a long-press */
.dec-opts { gap: .4rem; }
.dec-note { max-width: 220px; }
.dec-opt-cost { font-weight: 400; }
.dec-opt-effect { display: none; }
/* PT-122: "this month" inside the price on a phone card; a custom list's price never breaks; its source under the service on a phone */
.tier-now-badge, .rc-src-sm { display: none; }
@media (max-width: 640px) {
.rates-custom .rc-rate { white-space: nowrap; }
/* PN-04 / PT-122: on a portal card a figure sits next to its label and both read from the left, never against the far edge
(station cards and the frozen move screen keep theirs; the cost block's Amazon table is a card in the office too) */
body.mode-portal .tbl-cards td.num, body.mode-portal .tbl-cards td.ta-r { text-align: left; }
/* PN-04: a card title with a side note puts the note under the title instead of squeezing the title to three lines */
body.mode-portal .card-title:has(> span.t-xs:not([data-help])) { flex-wrap: wrap; row-gap: .2rem; }
body.mode-portal .cost-compare .tbl-cards .badge { white-space: normal; }
body.mode-portal .cost-compare .cost-amz.tbl-cards tr { padding-left: 0; padding-right: 0; }
body.mode-portal .cost-compare .cost-amz td.lead { font-size: var(--fs-sm); font-weight: 600; }
/* PT-121: one choice per full-width line — the note first (it is sent with the choice tapped), each choice with its cost and effect */
.dec-opts { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.dec-opts > .dec-note { max-width: none; }
.dec-opts > .btn, .dec-opts > .badge { width: 100%; }
.dec-opt.btn { flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: .1rem .4rem; text-align: left; min-height: 48px; padding: .55rem .85rem; }
.dec-opt .dec-opt-cost { flex-basis: 100%; }
.dec-opt-effect { display: block; flex-basis: 100%; font-size: var(--fs-xs); font-weight: 400; line-height: 1.35; color: var(--muted); }
.dec-opt.btn-primary .dec-opt-effect, .dec-opt.btn-danger .dec-opt-effect { color: inherit; }
.dec-opts > .badge.dec-opt { flex-wrap: wrap; justify-content: flex-start; white-space: normal; border-radius: var(--r-md); padding: .45rem .7rem; line-height: 1.35; }
/* PT-122 */
.tbl-cards .tier-now-badge { display: inline-flex; margin-left: .35rem; padding: 0 .45rem; font-size: var(--fs-cap); vertical-align: .05em; }
.rates-custom .rc-src { display: none; }
.rates-custom .rc-src-sm { display: block; margin-top: .25rem; }
}
/* ===== S13 · V331 · FLOWS — the portal on a phone (audit PT-120 · PT-124 · PT-126). Every rule that moves or shows something sits in a
≤640px block; outside them only what was an inline style before, or a phone-only part kept hidden (PhoneFlowsV331Test reads this). ===== */
/* PHONE-LISTS-V331 — audit PT-124: on a phone a list row is ONE tap target — its number link (a.row-open) stretches over the whole card
(tr.row-link); a link, a button, a box to tick, a form control or a "?" inside keeps its own tap above it. A status badge does not:
tapping it opens the item like the rest of the card (its explanation is on the item page and on a computer's hover). */
@media (max-width: 640px) {
/* REVIEW-V331: a compact card's side cell stays right, against the general left-align of figures on a phone card */
body.mode-portal .tbl-cards[data-cards="compact"] td.cell-aside, body.mode-portal .tbl-cards[data-cards="compact"] td.cell-end { text-align: right; }
.tbl-cards tr.row-link { position: relative; cursor: pointer; }
.tbl-cards tr.row-link > td.lead { position: static; }
.tbl-cards tr.row-link a.row-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tbl-cards tr.row-link a:not(.row-open), .tbl-cards tr.row-link button, .tbl-cards tr.row-link input, .tbl-cards tr.row-link select,
.tbl-cards tr.row-link textarea, .tbl-cards tr.row-link label, .tbl-cards tr.row-link [data-help]:not(.badge) { position: relative; z-index: 2; }
.tbl-cards tr.row-link:active { background: var(--accent-hover); }
.tbl-cards tr.row-link:has(a.row-open:focus-visible) { box-shadow: inset 3px 0 0 var(--accent); }
}
/* PHONE-LISTS-V331 — a compact card (table[data-cards="compact"]): the number and its top fact on line 1, who / what and a small figure
on line 2, where it stands under them — the labels that only said the obvious go; a cell without a role keeps its label on a line of
its own. Roles: td.lead · td.cell-end (top right) · td.cell-main + td.cell-aside (line 2) · td.cell-state (under) · td.cell-pick
(a box to tick, first). Two zero-height breakers (tr::before / ::after) end lines 1 and 2. */
.cell-unit { display: none; }
@media (max-width: 640px) {
.tbl-cards[data-cards="compact"] tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: 0; padding: .6rem .9rem; }
.tbl-cards[data-cards="compact"] tr::before, .tbl-cards[data-cards="compact"] tr::after { content: ""; flex: 0 0 100%; height: 0; }
.tbl-cards[data-cards="compact"] tr::before { order: 1; }
.tbl-cards[data-cards="compact"] tr::after { order: 3; }
.tbl-cards[data-cards="compact"] td { width: auto; flex: 1 1 100%; order: 4; }
.tbl-cards[data-cards="compact"] td.lead { order: 0; flex: 1 1 auto; min-width: 0; padding-bottom: .1rem; }
.tbl-cards[data-cards="compact"] td.cell-pick { order: 0; flex: 0 0 auto; align-self: center; }
.tbl-cards[data-cards="compact"] td.cell-end { order: 0; flex: 0 1 auto; max-width: 62%; margin-left: auto; text-align: right; font-size: var(--fs-sm); }
.tbl-cards[data-cards="compact"] td.cell-main { order: 2; flex: 1 1 0; min-width: 0; }
.tbl-cards[data-cards="compact"] td.cell-aside { order: 2; flex: 0 0 auto; text-align: right; font-size: var(--fs-sm); color: var(--muted); }
.tbl-cards[data-cards="compact"] td.cell-state { padding-top: .3rem; }
.tbl-cards[data-cards="compact"] td.cell-pick, .tbl-cards[data-cards="compact"] td.cell-end, .tbl-cards[data-cards="compact"] td.cell-main,
.tbl-cards[data-cards="compact"] td.cell-aside, .tbl-cards[data-cards="compact"] td.cell-state { padding-left: 0; min-height: 0; }
.tbl-cards[data-cards="compact"] td.cell-pick::before, .tbl-cards[data-cards="compact"] td.cell-end::before, .tbl-cards[data-cards="compact"] td.cell-main::before,
.tbl-cards[data-cards="compact"] td.cell-aside::before, .tbl-cards[data-cards="compact"] td.cell-state::before { content: none; }
.tbl-cards[data-cards="compact"] .cell-unit { display: inline; }
.cell-pick-hit { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
.cell-pick-hit > input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
}
/* PHONE-SEND-V331 — audit PT-120: a product line on Send goods — on a computer one row as before (the widths that were inline styles live
here now); on a phone a small grid: the product across, «Quantity» and «Units per case» named over their boxes side by side (two bare
numbers were easy to swap), the prep choice across, then «no FNSKU» and remove. The names are read out on every screen, as on Edit. */
.pl-row { gap: .5rem; }
.pl-search { min-width: 220px; }
.pl-qty { max-width: 6.5rem; }
.pl-case { max-width: 7rem; }
.pl-prep { max-width: 13rem; }
.pl-lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
.pl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "search search" "qtyl casel" "qty case" "warn warn" "prep prep" "fnsku del"; gap: .3rem .6rem; align-items: center; }
.pl-row > .pl-search { grid-area: search; min-width: 0; margin-bottom: .35rem; }
.pl-row > .pl-lbl { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; align-self: end; line-height: 1.25;
font-size: var(--fs-cap); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pl-row > .pl-qty-l { grid-area: qtyl; }
.pl-row > .pl-case-l { grid-area: casel; }
.pl-row > .pl-qty { grid-area: qty; max-width: none; }
.pl-row > .pl-case { grid-area: case; max-width: none; }
.pl-row > .pl-warn { grid-area: warn; justify-self: start; white-space: normal; }
.pl-row > .pl-prep { grid-area: prep; max-width: none; margin-top: .35rem; }
.pl-row > .pl-fnsku { grid-area: fnsku; justify-self: start; }
.pl-row > .pl-del { grid-area: del; justify-self: end; }
}
/* PHONE-SEND-V331 — «More options» on Send goods (every screen): the four rare cases folded; the closed summary says what is set now */
.more-opts { margin: 0 0 1.05rem; border: 1px solid var(--border); border-radius: var(--r-md); }
.more-opts > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: var(--r-md); transition: background var(--t-fast); }
.more-opts > summary::-webkit-details-marker { display: none; }
.more-opts > summary:hover { background: var(--accent-hover); }
.more-opts > summary::after { content: ""; flex: 0 0 auto; width: .45rem; height: .45rem; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-.15rem) rotate(45deg); transition: transform var(--t-fast); }
.more-opts[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; }
.more-opts[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.more-opts-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.more-opts-t > b { color: var(--text-strong); }
.more-opts-body { padding: .9rem .9rem .05rem; }
.opt.opt-top { align-items: flex-start; }
.opt.opt-top:has(> input[type=checkbox]) > input[type=checkbox] { margin-top: .2rem; }
/* PHONE-SEND-V331 — the phone's bar on Send goods: what the request holds and its estimate stay on screen; its button brings the review
into view (Confirm sits under the review and is never sent from the bar); it steps aside while a field is typed in or Confirm shows */
.send-bar { display: none; }
@media (max-width: 640px) {
.send-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; position: sticky; bottom: 0; z-index: 20; margin: .9rem -1rem 0;
padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: var(--shadow-2); }
.send-bar-sum { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.send-bar-sum > b { color: var(--text-strong); font-size: var(--fs-md); }
.send-bar > .btn { flex: 0 0 auto; }
.send-review { scroll-margin-top: 4.5rem; }
}
/* PHONE-DASH-V331 — audit PT-126: the dashboard on a phone — the header keeps its first door and folds the others behind «More» (five
doors filled four rows); on a computer the fold is display:contents, every door in the row in its order. An obligation's date and its
button sit together on the left under the item (each was right-aligned on its own line, the one offset from the other). */
.acts-more, .acts-more-list { display: contents; }
.acts-more-btn { display: none; }
.acts-more-btn::after { content: ""; width: .38rem; height: .38rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.12rem) rotate(45deg); transition: transform var(--t-fast); }
.acts-more.is-open .acts-more-btn::after { transform: translateY(.1rem) rotate(-135deg); }
.ob-main { flex: 1; min-width: 16rem; }
.ob-act { text-align: right; }
.ob-act > .badge { margin-bottom: .4rem; }
@media (max-width: 640px) {
.acts-more-btn { display: inline-flex; }
.acts-more:not(.is-open) > .acts-more-list { display: none; }
.acts-more.is-open > .acts-more-list { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 100%; }
.ob-main { flex-basis: 100%; min-width: 0; }
.ob-act { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; width: 100%; text-align: left; }
.ob-act > .badge { margin-bottom: 0; }
}
/* PRODUCTS-V330 — audit PT-087: the product list fits a laptop — photo + title + SKU, the codes stacked in small mono, price → fees →
net right-aligned, status, a fixed cell for the doors (never a flex td: it clipped and stacked them). On a phone the row is a card
that leads with the photo and title, reads the codes as one line, labels its buttons and never prints an empty dash */
.prod-cell { display: flex; gap: .75rem; align-items: flex-start; min-width: 15rem; }
.prod-thumb { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; border-radius: var(--r-sm); background: var(--code-bg); }
.prod-thumb-none { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--faint); }
.prod-main { flex: 1 1 auto; min-width: 0; }
.prod-title { display: block; line-height: 1.35; }
.prod-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; margin-top: .2rem; font-size: var(--fs-xs); color: var(--muted); }
.prod-more > summary::-webkit-details-marker { display: none; }
.prod-more > summary::after { content: ''; flex: 0 0 auto; width: .32rem; height: .32rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.1rem) rotate(45deg); transition: transform var(--t-fast); }
.prod-more[open] > summary::after { transform: translateY(.08rem) rotate(-135deg); }
.prod-more > summary:hover { color: var(--text-strong); }
.prod-more > summary .mono { overflow-wrap: anywhere; }
.prod-more .ob-dl { margin-top: .45rem; padding: .55rem .7rem; font-size: var(--fs-xs); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.prod-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
td > .prod-badges:first-child { margin-top: 0; }
.prod-ids { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; white-space: nowrap; }
.prod-ids > span { display: block; }
.prod-id-k { margin-right: .4rem; font-family: var(--font); font-size: var(--fs-cap); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.prod-price > b, .prod-price > span { display: block; }
.prod-fee { font-size: var(--fs-xs); color: var(--muted); }
.prod-net { font-size: var(--fs-xs); font-weight: 700; }
.prod-net.is-pos { color: var(--ok-ink); }
.prod-net.is-neg { color: var(--err-ink); }
.is-dim .prod-net { color: var(--muted); }
.prod-tbl td.prod-act-cell { width: 1%; white-space: nowrap; text-align: right; }
.prod-acts { display: inline-flex; gap: .35rem; align-items: center; }
.prod-acts form { margin: 0; }
.prod-act-t { display: none; }
@media (max-width: 640px) {
.prod-tbl .prod-cell { min-width: 0; }
.prod-tbl .prod-ids, .prod-tbl td.prod-price { white-space: normal; }
.prod-tbl .prod-ids > span { display: inline; }
.prod-tbl .prod-ids > span + span::before { content: '·'; margin: 0 .4rem; color: var(--faint); }
.prod-tbl td.num { text-align: left; }
.prod-tbl .prod-price > b, .prod-tbl .prod-price > span { display: inline; margin-right: .35rem; }
.prod-tbl td.prod-act-cell { width: 100%; white-space: normal; text-align: left; padding-top: .5rem; }
.prod-tbl .prod-act-t { display: inline; }
}
/* RESTOCK-V330 — audit PT-084: the restock rules fold into one line under the verdict — what is in force, in words; opened to change them */
.rules-fold { padding-top: .85rem; padding-bottom: .85rem; }
.rules-fold[open] { padding-bottom: var(--pad-card); }
.rules-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; }
.rules-fold > summary::-webkit-details-marker { display: none; }
.rules-fold > summary::after { content: ''; width: .4rem; height: .4rem; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-.12rem) rotate(45deg); transition: transform var(--t-fast); }
.rules-fold[open] > summary { margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.rules-fold[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.rules-fold .rules-act { margin-left: auto; font-weight: 600; color: var(--muted); }
.rules-fold > summary:hover .rules-act { color: var(--text-strong); }
/* ===== S13 · V331 · SHARED PHONE LAYER — the client portal on a phone (audit PT-117, PT-125, PT-127). Every rule in the phone block below starts with
body.mode-portal — the office, the station and the frozen warehouse-move screens keep what they have. The wide-screen rules restate
what an inline style said before (the order filters, a box's story) or hide what exists only for a phone. ===== */
/* PHONE-HELP-V331 — audit PT-117: a lone "?" (app.js marks it .help-q) is a real target — 24 px around it on a computer */
body.mode-portal .help-q { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
body.mode-portal .help-q::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; }
.cell-l, .prod-price > .cell-l { display: none; } /* a phone card's label with its column's "?" (app.js fp.cardHelp) — a wide screen has the column head */
.phone-only { display: none; } /* shown on a phone only — a ticket's subject, which leaves the title bar there */
/* PHONE-TILES-V331 — audit PT-127 (P6-N2): a badge inside a stat tile wraps instead of running past the tile's edge */
/* PHONE-FILTERS-V331 — audit PT-127: the fulfilment orders' filters — on a wide screen the fold is invisible (display: contents) and
the row is the one line it was (the widths were inline styles) */
.filter-q { max-width: 300px; }
.filter-narrow { max-width: 150px; }
.filter-bar > .filter-toggle { display: none; }
.filter-bar > .filter-more { display: contents; }
/* PHONE-STORY-V331 — audit PT-117 (P5-M2): the time column of a box's story on a wide screen (was an inline style) */
.tl-at { min-width: 130px; }
@media (max-width: 640px) {
/* PHONE-TILES-V331 (PT-127 · P6-N2): a badge inside a stat tile wraps on a phone instead of running past the tile's edge */
body.mode-portal .stat .badge { white-space: normal; max-width: 100%; }
/* PHONE-HELP-V331 (PT-117): on a phone the "?" is a small ring a thumb finds, with 32 px around it */
body.mode-portal .help-q { min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--muted); vertical-align: .08em; }
body.mode-portal .help-q::after { width: 32px; height: 32px; }
/* PHONE-LABELS-V331 (PT-117): a card label wraps at word boundaries — it was one line cut mid-word («AMAZON SHIPME…»). It floats in
the cell's 36% left padding, 33% of the card row wide (the percentages are of the cell's text box, which is 64% of the row), so the
cell grows with a two-line label and nothing runs over the next line. Change the 36% padding of .tbl-cards td[data-l] and these follow it. */
body.mode-portal .tbl-cards td[data-l] { display: flow-root; }
body.mode-portal .tbl-cards td[data-l]:empty { display: none; }
body.mode-portal .tbl-cards td[data-l]::before, body.mode-portal .tbl-cards td[data-l] > .cell-l { position: static; float: left; width: calc(33% / .64); margin-left: calc(-36% / .64); font-family: var(--font); text-align: left; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
body.mode-portal .tbl-cards td.stack[data-l]::before, body.mode-portal .tbl-cards td.stack[data-l] > .cell-l { float: none; width: auto; margin: 0 0 .2rem; }
body.mode-portal .tbl-cards td[data-l] > .cell-l { display: block; font-size: .72rem; line-height: 1.3rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
body.mode-portal .tbl-cards td.has-cl::before { display: none; }
body.mode-portal .tbl-cards .cell-l::before { content: attr(data-l); }
body.mode-portal .tbl-cards .cell-l > .help-q { margin-left: .3em; }
/* PHONE-KV-V331 (PT-117 · P5-M2): a two-column fact table without column heads (the box page) reads label over value */
body.mode-portal table.tbl-kv, body.mode-portal table.tbl-kv > tbody, body.mode-portal table.tbl-kv tr, body.mode-portal table.tbl-kv td { display: block; width: 100%; }
body.mode-portal table.tbl-kv tr { padding: .5rem 0; border-bottom: 1px solid var(--border); }
body.mode-portal table.tbl-kv tr:last-child { border-bottom: none; }
body.mode-portal table.tbl-kv td { padding: 0; border: none; }
body.mode-portal table.tbl-kv td:first-child { font-size: var(--fs-cap); line-height: 1.3rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* PHONE-STORY-V331 (PT-117 · P5-M2): a line of a box's story — its time above its words, every line the same shape */
body.mode-portal .tl-row { row-gap: .1rem; }
body.mode-portal .tl-row > .tl-at { flex: 1 1 100%; min-width: 0; }
/* PHONE-SEG-V331 (PT-117 · P4-N7): a row of filter tabs stays one line and scrolls sideways; app.js opens it on the tab you are on */
body.mode-portal .seg { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body.mode-portal .seg::-webkit-scrollbar { display: none; }
body.mode-portal .seg > a, body.mode-portal .seg > button { flex: 0 0 auto; white-space: nowrap; }
body.mode-portal .seg[role="tablist"] { flex-wrap: wrap; overflow-x: visible; } /* REVIEW-V331: a choice in a form (send-back) wraps as before — only filter tabs scroll */
body.mode-portal .seg[role="tablist"] > button { flex: 0 1 auto; white-space: normal; }
/* PHONE-FIELDS-V331 (PT-125): two captioned fields side by side in a .row stack — one field per line, as .field already does */
body.mode-portal .row > .grow:has(> .lbl) { flex: 1 1 100%; min-width: 0; }
/* PHONE-TITLE-V331 (PT-127): the sticky title bar never grows past two lines (a heading that carries a status badge keeps it);
a heading's tail (a ticket's subject) leaves the bar — the page shows it in full (.phone-only) */
body.mode-portal .topbar h1:not(:has(.badge)) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
body.mode-portal .topbar h1 .h-tail { display: none; }
body.mode-portal .phone-only { display: block; }
/* PHONE-TILES-V331 (PT-127): stat tiles two to a row at most (one on a very narrow screen); a last odd tile takes the whole row */
body.mode-portal .stat-grid { grid-template-columns: repeat(auto-fit, minmax(max(140px, calc(50% - .3rem - 1px)), 1fr)); }
body.mode-portal .stat-grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* PHONE-FILTERS-V331 (PT-127): the search shares its row with «Filters»; the dates and the order fold under it, each date with its words */
body.mode-portal .filter-bar > .filter-q { flex: 1 1 11rem; min-width: 0; max-width: none; } /* the search keeps a usable width; Search / Export wrap below it */
body.mode-portal .filter-bar > .filter-toggle { display: inline-flex; flex: 0 0 auto; }
body.mode-portal .filter-bar > .filter-more { display: none; }
body.mode-portal .filter-bar > .filter-more.is-open { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; flex: 1 1 100%; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
body.mode-portal .filter-more > label.row { flex-wrap: nowrap; }
body.mode-portal .filter-more > label.row > span { flex: 0 0 6.4rem; }
body.mode-portal .filter-more .filter-narrow { flex: 1 1 auto; min-width: 0; max-width: none; }
}
/* ===== end S13 · V331 · SHARED PHONE LAYER ===== */
/* TEAM-V331 — audit PT-123 (S13 · Phone): the Team page. A colleague's role is a select that asks first (app.js ASK-CHANGE-V331) with
its words one '?' away; the one-time password box has a copy button. On a phone every person is a card — the name leads, the e-mail
sits under it, Role / Status / Joined are labelled, the owner's buttons run across the foot — and the forms' two-field rows stack.
Desktop: the table and its one-line buttons stay as they were (the select's former inline size now lives here). */
.team-role { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; }
.team-role select.input { width: auto; max-width: 100%; padding: .25rem .4rem; font-size: .85rem; }
select[data-ask][aria-busy="true"] { pointer-events: none; cursor: progress; }
.team-acts { white-space: nowrap; }
.team-pw-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .5rem; }
@media (max-width: 640px) {
.team-list td.team-mail { padding-top: 0; }
.team-role { display: flex; }
.team-role select.input { flex: 1 1 auto; min-width: 0; font-size: 1rem; } /* 16 px: iOS does not zoom the page on tap */
.team-list td.team-acts { display: flex; flex-wrap: wrap; gap: .4rem; white-space: normal; padding-top: .55rem; }
.team-list td.team-acts:not(:has(*)) { display: none; }
.team-form .row > .grow { flex: 1 1 100%; min-width: 0; }
}
/* ===== S14 · V332 · THEMES — audit PT-128 · WT-151 · PT-134 · WT-150 · PT-139 · WT-157: one meaning per colour, dark as good as light.
The light theme's yellow "waiting" tints and the native controls (color-scheme, accent-color, autofill) sit with the light palette above;
the dark active tab with the .seg rules. Colour and edges only — nothing here re-flows a page. ===== */
/* DISABLED-PRIMARY-V332 — audit PT-139: an amber button that cannot be pressed yet is plainly off, in both themes — the grey of a plain
button, no glow, words at 4.5:1 or more, never see-through (it was the gradient at 60 %: a muddy brown that still glowed on graphite).
A button that is sending (.loading) keeps its amber and its spinner. */
body.mode-portal .btn-primary:disabled:not(.loading):not([aria-busy="true"]) { background: var(--surface-3); color: var(--muted); border-color: var(--border-strong); box-shadow: none; filter: none; opacity: 1; }
/* BELL-V332 — audit PT-139 / WT-157 (WD5-7): the bell's count is a solid pill with a ring of the page colour — the bell no longer shows
through the number (it was the 12 % accent tint). The brand amber in both themes, dark digits at 8.3:1. */
.bell-n { position: absolute; top: -7px; right: -9px; display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem;
padding: 0 .32rem; border-radius: 999px; background: var(--accent-btn1); color: var(--accent-ink); font-size: .68rem; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); }
/* SWITCH-EDGE-V332 — audit WT-157 (WD5-4): the two-world switch (the office menu, the station home) keeps an edge, and in the light theme
a track — its surface was the page's own colour there (1.01:1), so «Fulfilment» floated as loose grey words */
.ws-switch, .hh-switch { border: 1px solid var(--border); }
[data-theme="light"] .ws-switch, [data-theme="light"] .hh-switch { background: var(--surface-3); }
/* ===== S14 · V332 · DESIGN SYSTEM — the client portal as one system (audit PT-129 · PT-130 · PT-131 · PT-133 · PT-138): one amber action a
page, one help marker beside the words it explains, one label style with the inputs in line, one column width. Every rule is the
portal's (body.mode-portal) or a class only portal pages carry — the office, the station and the frozen warehouse-move screens keep
theirs. Colours come only from the tokens, so the light and the dark theme both follow. ===== */
/* WIDTHS-V332 — audit PT-138: a page is one column — its cards take the main column, or every card of the page the reading measure
(--w-full / --w-read in :root); a card never carries a max-width of its own again (DesignSystemV332Test) */
.w-read { max-width: var(--w-read); }
.w-full { max-width: var(--w-full); }
/* HELP-V332 — audit PT-130: the "?" is ONE marker on every screen — a small ring, so it never reads as a sentence's question mark and
shows that it opens (app.js marks a lone "?" .help-q; the x-help component writes it so). On a phone S13's 20 px ring stays. */
@media (min-width: 641px) {
body.mode-portal .help-q { min-width: 1rem; height: 1rem; padding: 0 .2rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .66rem; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--muted); vertical-align: .08em; }
}
body.mode-portal .help-q { transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
body.mode-portal .help-q:hover, body.mode-portal .help-q:focus-visible { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-hover); }
/* it stays on the line of the word before it — app.js HELP-GLUE-V332 puts the two in this span («PROMISED / ?» wrapped) */
body.mode-portal .help-glue { white-space: nowrap; }
/* in a card title it sits by the title, never at the card's far edge where the card's actions are */
body.mode-portal .card-title > h2 + .help-q, body.mode-portal .card-title > h3 + .help-q { margin-left: .45rem; margin-right: auto; }
/* LABELS-V332 — audit PT-131: a field's label is a short caption in sentence case that flows as text. It was a flex row in spaced capitals:
a hint inside it became a second column and pushed its input down. A hint left inside stays quieter; the longer words go to a .hint
line under the input or behind the "?". */
body.mode-portal .lbl, body.mode-portal .field label:not([class]) { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text); }
body.mode-portal .lbl :is(.muted, .faint), body.mode-portal .field label:not([class]) :is(.muted, .faint) { font-weight: 400; }
/* fields side by side start level, so their inputs line up (a row centred them: a two-line label put its input 10 px lower) */
body.mode-portal .row:has(> .field):not(:has(> .btn, > button)), body.mode-portal .row:has(> .grow > .lbl):not(:has(> .btn, > button)) { align-items: flex-start; }
/* a box to tick keeps its words beside it on a computer too (the rule of the 640 px block: the box stood alone above its title) */
body.mode-portal .row:has(> input[type=checkbox]), body.mode-portal .row:has(> input[type=radio]) { flex-wrap: nowrap; }
body.mode-portal .row:has(> input[type=checkbox]) > span, body.mode-portal .row:has(> input[type=radio]) > span { flex: 1 1 0; min-width: 0; }
/* SETTINGS-V332 — audit PT-133: a read-only list of facts — the fact on the left (it may wrap), its value on the right, a note under a fact
across the card; never the browser's indent */
dl.kv.kv-end { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; }
dl.kv.kv-end dt { margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; }
dl.kv.kv-end dd { text-align: right; }
dl.kv.kv-end > .kv-wide { grid-column: 1 / -1; margin-top: -.25rem; text-align: left; }
/* HEAD-CAP-V332 — audit PT-129: on a computer a page header shows the page's amber door and «More»; the other doors open from «More» as a
small menu (a both-services dashboard had five buttons there). The phone keeps S13's fold. */
@media (min-width: 641px) {
body.mode-portal .acts-more { display: inline-flex; position: relative; }
body.mode-portal .acts-more-btn { display: inline-flex; }
body.mode-portal .acts-more:not(.is-open) > .acts-more-list { display: none; }
body.mode-portal .acts-more.is-open > .acts-more-list { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 70; display: flex; flex-direction: column; gap: .1rem; min-width: 15rem; padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
body.mode-portal .acts-more-list > .btn { justify-content: flex-start; width: 100%; min-height: 38px; border-color: transparent; background: none; box-shadow: none; color: var(--text); font-weight: 500; }
body.mode-portal .acts-more-list > .btn:hover, body.mode-portal .acts-more-list > .btn:focus-visible { background: var(--surface-2); border-color: transparent; color: var(--text-strong); }
}
/* ===== end S14 · V332 · DESIGN SYSTEM ===== */
/* ===== S14 · V332 · ORDER FORM — audit PT-079 (the fulfilment order form, /app/fbm/create and /edit) ===== */
/* PT-079 (V332): every box of an order line is named — Product · Qty · Price each — on every screen (filled lines read «12» and «8.99»
with no names); the names sit over the boxes and the line aligns on the boxes. */
.ln-f { display: flex; flex-direction: column; gap: .2rem; margin: 0; min-width: 0; }
.ln-l { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text); }
.ln-qty { width: 5.5rem; }
.ln-price { width: 7.5rem; }
/* PT-079 (V332): the order is sent from a footer under EVERY step, across the whole form — the buttons in one row on a computer */
.form-foot { display: flex; flex-direction: column; gap: .5rem; }
.form-foot-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
@media (max-width: 640px) {
.form-foot-acts > .btn { flex: 1 1 100%; }
.line-row > .ln-qty, .line-row > .ln-price { flex: 1 1 0; width: auto; }
}
/* ===== end S14 · V332 · ORDER FORM ===== */
/* ===== SMALL-BUGS · V335 · PORTAL (group PA) — the pre-launch audit's small portal bugs, re-checked against v3.34 ===== */
/* D4-N8: an icon stays with its value (a buyer's phone and e-mail on a fulfilment order) */
.nowrap { white-space: nowrap; }
/* D1-N9: a SKU / EAN / ASIN never breaks at its hyphen in a table on a computer — a phone card keeps wrapping it, so a long SKU
never runs past the card */
@media (min-width: 641px) {
body.mode-portal .tbl .sku-cell { white-space: nowrap; }
}
/* D2-N14: the portal's Fulfilment links light in the fulfilment teal under their teal heading, as the office's Fulfilment world does
(.ws-group[data-ws="fbm"] exists only in the office menu) */
body.mode-portal .navlink.ws-fbm.active { background: var(--fbm-bg); color: var(--fbm-strong); }
/* D5-N3: the theme button shows the theme it switches to — a moon on light, a sun on dark (app.js sets aria-pressed) */
.theme-toggle .ic-to-light { display: none; }
[data-theme="dark"] .theme-toggle .ic-to-dark { display: none; }
[data-theme="dark"] .theme-toggle .ic-to-light { display: inline; }
/* ===== end SMALL-BUGS · V335 · PORTAL (group PA) ===== */
/* SMALLBUGS-V335 — audit WD2-N4: at a desk computer a long page name takes a second line instead of «IN-2026-0002 — SIMF Fulfilment O…»;
the handheld keeps one line and drops the name's tail, as before */
@media (min-width: 1001px) { .station-head h1 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; line-height: 1.25; } }
/* SMALLBUGS-V335 — audit WD5-N3: a mode switch (Batch on Receive boxes and on Move a box) is a button: ghost while off, the accent while
pressed — next to Flash unload the filter-tab look read as switched off; .btn-tab stays for list filters */
.btn.btn-ghost.btn-mode[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-strong); }
/* SMALLBUGS-V335 — audit WD4-N8: the bar's buttons (Simple mode, theme, bell, name) never stack under each other on a computer either —
a long heading, such as a ticket's subject, wraps instead */
.topbar > .row { flex: 0 0 auto; flex-wrap: nowrap; }
/* SMALLBUGS-V335 — audit WD5-N4: in the office too, an amber button that cannot be pressed yet is plainly off (DISABLED-PRIMARY-V332 did
the portal) — «Create the order ✓» before a client is chosen read as a brown live button on graphite; a sending button keeps its amber */
body.mode-admin .btn-primary:disabled:not(.loading):not([aria-busy="true"]) { background: var(--surface-3); color: var(--muted); border-color: var(--border-strong); box-shadow: none; filter: none; opacity: 1; }
/* ===== ZT-T8 (V335) — the Zebra tour's shared scan rules (group T8) ===== */
/* E-48: on the 360 px Zebra the screen's one name is read in full — two lines rather than «Fetch an order's b…» (the detail stays hidden) */
@media (max-width: 440px) { .station-head h1 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; font-size: .92rem; line-height: 1.15; } }
/* E-47: inside the FastPrep app every screen drops its messages from the top — 'Who is working?' too, never over the last name card */
html.in-app #toasts { top: .6rem; bottom: auto; left: .75rem; right: .75rem; max-width: none; align-items: center; pointer-events: none; }
html.in-app .toast { width: 100%; max-width: 640px; animation-name: toastDrop; cursor: pointer; pointer-events: auto; }
html.in-app .toast.out { animation-name: toastLift; }
/* E-13/E-14: a scan refused inside a question the page draws itself (Find's Delete for good, the text picker) — said in its card */
[data-scan-question] .dlg-scan { margin: .6rem 0 0; padding: .5rem .7rem; border-radius: var(--r-md); border: 1px solid var(--err); background: var(--err-bg); color: var(--err-ink); font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
/* ===== end ZT-T8 (V335) ===== */
/* ===== BENCH-UX-V371 — the Zebra boxing screen in fixed zones (UX review 07.10: "vizibil si predictibil") ===== */
.zp-note { display: flex; gap: .45rem; align-items: flex-start; width: 100%; margin: 0 0 .45rem; padding: .45rem .65rem; text-align: left; border-radius: var(--r-md);
border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.zp-note > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-note.open > span { white-space: pre-line; }
.zp-step { display: flex; gap: .6rem; align-items: center; margin-bottom: .45rem; padding: .45rem .7rem; min-height: 3.6rem; border-radius: var(--r-md);
border: 1px solid var(--border); background: var(--surface-2); }
.zp-step.is-hand { border-color: var(--warn-line); background: var(--warn-bg); }
.zp-step-t { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.zp-step-t > b, .zp-step-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-step-t > b { font-size: 1.05rem; }
.zp-step-t > span { font-size: .8rem; color: var(--muted); }
.zp-count { display: grid; justify-items: center; min-width: 3.6rem; line-height: 1; }
.zp-count > b { font-size: 2.3rem; font-variant-numeric: tabular-nums; }
.zp-count > span { font-size: .68rem; color: var(--muted); letter-spacing: .03em; }
.zp-count.pulse > b { animation: zpPulse .45s ease-out; }
@keyframes zpPulse { 40% { transform: scale(1.25); color: var(--ok-ink); } }
.zp-hand, .zp-box { padding: .5rem .7rem; margin-bottom: .55rem; }
.zp-hand-list { max-height: 10.5rem; overflow-y: auto; }
.zp-hand-row { gap: .5rem; align-items: center; padding: .3rem 0; border-top: 1px solid var(--border); }
.zp-warn { margin-top: .35rem; padding: .35rem .5rem; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-ink); font-size: .82rem; font-weight: 600; }
.zp-item { gap: .45rem; align-items: center; padding: .35rem 0; font-size: .88rem; flex-wrap: wrap; border-top: 1px solid var(--border); }
.zp-item .btn { min-height: 2.6rem; min-width: 3rem; }
.zp-undo { gap: .5rem; align-items: center; margin-top: .4rem; padding: .35rem .5rem; border-radius: var(--r-md); background: var(--surface-2); }
.zp-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); gap: .4rem; }
.zp-presets .btn { min-height: 2.9rem; white-space: normal; line-height: 1.15; }
.zp-boxes { display: grid; gap: .35rem; margin-bottom: .6rem; }
.zp-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .35rem; align-items: center; margin-top: .4rem; padding: .4rem 0 .5rem;
border-top: 1px solid var(--border); background: var(--bg); }
.zp-bar .btn { white-space: nowrap; padding: .35rem .55rem; font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .zp-count.pulse > b { animation: none; } }
/* the bench (PC): captions over the fields, Turbo tints the scan field, the box panel as one switchable set */
.pk-field { display: grid; gap: .12rem; }
.pk-field > span { font-size: .68rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.scan-zone.pk-turbo .scan-input { border-color: var(--accent); background: var(--accent-bg); }
.pk-held .btn:not(.pk-keep), .pk-held .opt, .pk-held input { opacity: .6; pointer-events: none; } /* the Zebra holds the order: as .btn[disabled] (the functions refuse too — zebraStop) */
/* ===== end BENCH-UX-V371 ===== */
/* ===== SEND-GOODS-V372 — every product answers Polybag / Bubble wrap / Bundle (yes · no · not sure), always in the same place ===== */
.pa { margin-top: .55rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.pa.pa-missing { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn-line); }
.pa-all { margin: 0 0 .7rem; }
.pa-row { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; align-items: center; }
.pa-q { display: flex; gap: .4rem; align-items: center; }
.pa-l { font-size: .82rem; font-weight: 600; min-width: 5.6rem; }
.pa-help { margin-left: auto; }
.pa-need { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; min-height: 1.9rem; margin-top: .35rem; font-size: .84rem; }
@media (max-width: 640px) { .pa-q { width: 100%; justify-content: space-between; } .pa-l { min-width: 0; } }
/* ===== end SEND-GOODS-V372 ===== */