/*
  Central Warehouse staff screens. One file for every page, served by Ui\Assets under the CSP (default-src 'self', so font-src 'self'):
  no imports, no external URLs, no data: URIs. The two fonts are self-hosted woff2 files in fonts/ (SIL Open Font Licence, the
  licence texts sit beside them). Icons are CSS shapes (.ico): no images and no svg on a page. Interactions are CSS first: <details>
  (help, folds, confirmations), :target (the phone menu) and :has(); app.js only adds conveniences.

  The look is design v4 (owner, 8 Oct 2026): v3's seven-item sidebar, tabs inside each section, segmented filters and buying flow, in
  the fonts, colours and alignment of the open-source Vibe design system (MIT licence): Figtree 14/20 for text, Poppins 500 for titles,
  the exact status fills with white semi-bold text (a word AND a small shape), board tables with the name column left-aligned and
  sticky and every other column centred, full-cell status colours, 40 px view tabs with a 2 px blue underline. Every colour, size and
  font is a token on :root (section 1): the base palette first, then the names the page bodies use, defined from it.

  Layout: a sidebar on a laptop (960 px and up); a top bar, a slide-in menu and a bottom tab bar on a phone or small tablet. The
  workspace is one white panel: the page bar (section name, one line, the tabs), then the page. Tables become cards when the page
  column is 640 px or narrower; inputs at 16 px; tap targets 44 px on a phone or tablet.

  Sections: 0 fonts, 1 tokens, 2 base, 3 strips, 4 shell (app bar, sidebar, workspace, phone menu, bottom bar), 5 page frame (page bar,
  flow, tabs, segments, toolbar), 6 cards and widgets, 7 status labels, 8 info boxes, 9 buttons, 10 forms, 11 tables (boards), 12 folds
  and help, 13 progress, 14 home and task cards, 15 decision pages, 16 lists, 17 the screens' own parts, 18 print, 19 the set-it-yourself
  pack, 20 stock.
*/

/* ---------- 0. Fonts: Figtree (text) and Poppins (titles), latin subset (@fontsource 5.3.0 = Google Fonts) ---------- */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); }

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;

  /* 1a. Base palette (Vibe values; the design notes list each one with its source) */
  --page: #eceff8;            /* the frame: top bar and sidebar */
  --surface: #ffffff;         /* the work panel */
  --card: #ffffff;
  --sunk: #f6f7fb;            /* table heads, toolbars, inner panels */
  --hover: rgba(103, 104, 121, 0.1);
  --line: #d0d4e4;            /* dividers and cell lines */
  --field: #c3c6d4;           /* the edges of fields and outline buttons */
  --ui-bg: #e7e9ef;           /* counters, empty bars */
  --ink: #323338;
  --ink-2: #676879;
  --icon: #676879;
  --placeholder: #676879;
  --primary: #0073ea;
  --primary-hover: #0060b9;
  --primary-sel: #cce5ff;     /* the open sidebar item, a chosen segment */
  --primary-sel-hover: #aed4fc;
  --on-primary: #ffffff;
  --link: #1f76c2;
  --positive: #00854d;
  --negative: #d83a52;
  --negative-hover: #b63546;
  --positive-sel: #bbdbc9;
  --negative-sel: #f4c3cb;
  --warning-sel: #fceba1;
  --purple-sel: #d0aeed;
  --backdrop: rgba(41, 47, 76, 0.7);
  --shadow-xs: 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0px 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0px 6px 20px rgba(0, 0, 0, 0.2);
  /* The status fills (white semi-bold text on each, as the boards do; the word and a shape carry the meaning) */
  --done: #00c875;
  --working: #fdab3d;
  --stuck: #df2f4a;
  --waiting: #c4c4c4;
  --info: #579bfc;
  --review: #9d50dd;
  --stopped: #333333;
  --grey-group: #757575;
  --panel-edge: transparent;  /* the work panel needs an edge only in dark mode, where it is the frame's colour */
  --font: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
  --title-font: Poppins, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --focus-ring: 0 0 0 3px hsla(209, 100%, 50%, .5), inset 0 0 0 1px var(--primary-hover);
  --r-sm: 4px; --r-md: 8px;
  --side-w: 256px; --appbar-h: 48px; --tabbar-h: 64px; --gutter: 16px; --row-h: 36px; --strip: 6px;

  /* 1b. The names the page bodies use, from the base palette */
  --accent: var(--primary);
  --accent-strong: var(--primary-hover);
  --accent-soft: var(--primary-sel);
  --on-accent: var(--on-primary);
  --focus: var(--primary);
  --danger: var(--negative);
  /* Status tones: ink (text on the tint), bg (the tint of an info box), line (an edge), icon (the shape's disc; a strip) */
  --needs-ink: var(--ink); --needs-bg: var(--warning-sel); --needs-line: var(--working); --needs-icon: var(--working);
  --done-ink: var(--positive); --done-bg: var(--positive-sel); --done-line: var(--done); --done-icon: var(--done);
  --wait-ink: var(--ink-2); --wait-bg: var(--sunk); --wait-line: var(--field); --wait-icon: var(--grey-group);
  --block-ink: var(--negative); --block-bg: var(--negative-sel); --block-line: var(--stuck); --block-icon: var(--stuck);
  --info-ink: var(--ink); --info-bg: var(--primary-sel); --info-line: var(--info); --info-icon: var(--info);
  --on-icon: #ffffff;
  /* Differences between two products */
  --diff-bg: var(--warning-sel); --diff-bar: var(--working);
  /* The test-system strip */
  --test-bg: #2B1C00; --test-ink: #FFE7A3; --test-stripe: #4A3200;
  --shadow: var(--shadow-xs);
  --shadow-pop: var(--shadow-md);
  --shadow-up: 0 -4px 8px rgba(0, 0, 0, 0.08);
  --scrim: var(--backdrop);
  --radius: var(--r-md);
  --radius-lg: var(--r-md);
  --radius-sm: var(--r-sm);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #181b34; --surface: #181b34; --card: #30324e; --sunk: #30324e; --hover: rgba(103, 104, 121, 0.3);
    --line: #4b4e69; --field: #797e93; --ui-bg: #434660; --ink: #d5d8df; --ink-2: #9699a6; --icon: #c3c6d4; --placeholder: #c3c6d4;
    --primary: #0073ea; --primary-hover: #0060b9; --primary-sel: #133774; --primary-sel-hover: #0d2e65; --on-primary: #ffffff; --link: #69a7ef;
    --positive: #00854d; --negative: #d83a52; --negative-hover: #b63546;
    --positive-sel: #025231; --negative-sel: #642830; --warning-sel: #503e02; --purple-sel: #5f3e8b; --backdrop: rgba(41, 47, 76, 0.7);
    --shadow-xs: 0px 4px 6px -4px rgba(9, 11, 25, 0.5); --shadow-sm: 0px 4px 8px rgba(9, 11, 25, 0.5); --shadow-md: 0px 6px 20px rgba(9, 11, 25, 0.5);
    --stopped: #7a7a7a; --panel-edge: var(--line);
    --done-ink: #4ed39a; --block-ink: #ff8a99;
    --test-bg: #FFD666; --test-ink: #2B1C00; --test-stripe: #F2C140;
    --shadow-up: 0 -4px 8px rgba(9, 11, 25, 0.5);
  }
}
/* The same dark values when a later theme switch sets data-theme="dark" */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #181b34; --surface: #181b34; --card: #30324e; --sunk: #30324e; --hover: rgba(103, 104, 121, 0.3);
  --line: #4b4e69; --field: #797e93; --ui-bg: #434660; --ink: #d5d8df; --ink-2: #9699a6; --icon: #c3c6d4; --placeholder: #c3c6d4;
  --primary: #0073ea; --primary-hover: #0060b9; --primary-sel: #133774; --primary-sel-hover: #0d2e65; --on-primary: #ffffff; --link: #69a7ef;
  --positive: #00854d; --negative: #d83a52; --negative-hover: #b63546;
  --positive-sel: #025231; --negative-sel: #642830; --warning-sel: #503e02; --purple-sel: #5f3e8b; --backdrop: rgba(41, 47, 76, 0.7);
  --shadow-xs: 0px 4px 6px -4px rgba(9, 11, 25, 0.5); --shadow-sm: 0px 4px 8px rgba(9, 11, 25, 0.5); --shadow-md: 0px 6px 20px rgba(9, 11, 25, 0.5);
  --stopped: #7a7a7a; --panel-edge: var(--line);
  --done-ink: #4ed39a; --block-ink: #ff8a99;
  --test-bg: #FFD666; --test-ink: #2B1C00; --test-stripe: #F2C140;
  --shadow-up: 0 -4px 8px rgba(9, 11, 25, 0.5);
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- 2. Base: Figtree 400 14px/20px, the boards' base size ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: 96px; }
body {
  margin: 0; background: var(--page); color: var(--ink); font: 400 14px/20px var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word;
}
h1, h2, h3, h4 { color: var(--ink); }
h1 { font: 500 24px/30px var(--title-font); letter-spacing: -.1px; margin: 0 0 8px; }
h2 { font: 500 18px/24px var(--title-font); letter-spacing: -.1px; margin: 24px 0 8px; }
h3 { font: 500 16px/24px var(--font); margin: 16px 0 8px; }
h4 { font: 500 14px/20px var(--font); margin: 12px 0 4px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 20px; }
li + li { margin-top: 4px; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link); text-decoration-thickness: 2px; }
strong, b { font-weight: 600; }
small, .small { font-size: 13px; }
code, .code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
:focus { outline: none; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-2); }
.hint { color: var(--ink-2); font-size: 14px; font-weight: 400; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.pre, span.pre, td.pre { white-space: pre-line; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.skip {
  position: absolute; left: 12px; top: -200px; z-index: 100;
  background: var(--card); color: var(--link); padding: 12px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Strips: the test system (every page) ---------- */
.strip.test-system {
  margin: 0; padding: 4px var(--gutter); text-align: center; font: 600 13px/20px var(--font); letter-spacing: .02em;
  color: var(--test-ink); background: repeating-linear-gradient(135deg, var(--test-bg) 0 14px, var(--test-stripe) 14px 28px);
}

/* ---------- 4. Shell: the frame (app bar + sidebar) in the page colour, the work panel in white ---------- */
.appbar { display: flex; align-items: center; gap: 8px; min-height: var(--appbar-h); padding: 0 12px 0 8px; background: var(--page); }
.brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px;
  color: var(--ink); text-decoration: none; font: 500 18px/24px var(--title-font); white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); flex: none;
  background: var(--primary); color: var(--on-primary); font: 600 12px/1 var(--font); letter-spacing: .02em;
}
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-sm); flex: none;
  color: var(--icon); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.menu-btn, .find-link { display: none; }
.appbar-end { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
/* The find box (catalogue.view): in the app bar on a laptop; on a phone a "find" button opens the search page */
form.find { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; width: min(28rem, 44vw); }
form.find .ico-search { position: absolute; left: 8px; top: 50%; margin-top: -11px; color: var(--icon); pointer-events: none; }
form.find input[type="search"] { min-height: 32px; height: 32px; padding: 4px 8px 4px 36px; font: 400 14px/22px var(--font); background: var(--card); }
form.find button { min-height: 32px; padding: 4px 12px; font: 400 14px/22px var(--font); }

/* The sidebar: seven items (icon, name, a count where something waits), the person at the bottom. Items are Vibe list items:
   8px 16px, a 4px radius, the grey hover; the open page has the light-blue selected fill. The same markup is the phone's slide-in
   menu ("Menu" in the app bar, "More" in the bottom bar). The tests read nav[aria-label=Main] > ul.nav > li > a.nav-item. */
.side { background: var(--page); display: flex; flex-direction: column; }
.side-head { display: none; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav li { margin: 0; }
.nav-item {
  display: flex; align-items: center; gap: 8px; min-height: var(--row-h); padding: 8px 16px;
  border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font: 400 14px/20px var(--font);
}
.nav-item:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav-item .ico { color: var(--icon); }
.nav-item[aria-current="page"] { background: var(--primary-sel); }
.nav-item[aria-current="page"]:hover { background: var(--primary-sel-hover); }
.nav-label { flex: 1 1 auto; min-width: 0; }
/* Counts (Vibe Counter, xs) on the sidebar, the tabs and the segments. Grey = something waits here; blue = waiting for YOU. */
.nav-item > .count, .tab > .count, .seg-item > .count {
  flex: none; display: inline-block; min-width: 18px; padding: 0 8px; border-radius: 30px;
  background: var(--ui-bg); color: var(--ink); font: 400 12px/18px var(--font); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav-item > .count.hot { background: var(--primary); color: var(--on-primary); }
.side-user {
  margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center;
}
.side-user .avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--primary); color: var(--on-primary); font: 500 13px/1 var(--font);
}
.side-user .who { margin: 0; min-width: 0; }
.side-user .who strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.side-user .who-jobs { display: block; color: var(--ink-2); font: 400 12px/16px var(--font); }
.side-user .role { color: var(--ink-2); font-weight: 400; }
.side-user form.signout { grid-column: 1 / -1; margin: 0; }
.side-link {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: var(--row-h);
  padding: 8px; margin: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink);
  font: 400 14px/20px var(--font); text-decoration: none; text-align: left; cursor: pointer;
}
.side-link:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side-link .ico { color: var(--icon); }
.side-link[aria-current="page"] { background: var(--primary-sel); }

/* The work panel */
.work { display: block; min-width: 0; background: var(--surface); }
.work:focus { outline: none; }
.scrim { display: none; }
.tabbar { display: none; }

@media (min-width: 960px) {
  .appbar { position: sticky; top: 0; z-index: 40; }
  .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: start; }
  .side {
    position: sticky; top: var(--appbar-h); height: calc(100vh - var(--appbar-h));
    overflow-y: auto; padding: 4px 8px 12px; scrollbar-width: thin;
  }
  .work {
    --gutter: 32px; margin: 0 8px 8px 0; min-height: calc(100vh - var(--appbar-h) - 8px);
    border: 1px solid var(--panel-edge); border-radius: var(--r-md); box-shadow: var(--shadow-xs);
  }
}

/* Phone and tablet: the sidebar slides in from the left; a tab bar sits at the bottom */
@media (max-width: 959.98px) {
  html { scroll-padding-bottom: calc(var(--tabbar-h) + 32px); }
  .menu-btn, .find-link { display: inline-grid; width: 44px; height: 44px; }
  .find-link { margin-left: auto; }
  form.find { display: none; }
  .side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(88vw, 320px);
    overflow-y: auto; background: var(--card); box-shadow: var(--shadow-md);
    padding: 0 8px calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-102%); visibility: hidden;
    transition: transform .25s cubic-bezier(0, 0, .35, 1), visibility 0s linear .25s;
  }
  /* No script: #menu is the :target ("Menu" and "More" link to it; "Close the menu" and the scrim link to #main). */
  .side:target { transform: none; visibility: visible; transition: transform .25s cubic-bezier(0, 0, .35, 1); }
  .side:target + .scrim { display: block; position: fixed; inset: 0; z-index: 65; background: var(--backdrop); }
  .side-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 1; min-height: 60px; margin: 0 -8px 8px; padding: 8px 12px 8px 16px;
    background: var(--card); border-bottom: 1px solid var(--line);
  }
  .side-title { font: 500 18px/24px var(--title-font); }
  .nav-item { min-height: 48px; font-size: 16px; line-height: 22px; }
  .side-link { min-height: 48px; font-size: 16px; }
  .side-user { margin-top: 24px; }

  /* Flex, not 5 equal columns: each tab gets its word's width and an equal share of the rest, so "Purchasing" fits at 320 px */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow-sm);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    flex: 1 0 auto; min-width: 0; min-height: var(--tabbar-h); padding: 6px 4px; color: var(--ink-2); text-decoration: none;
    font: 400 12px/16px var(--font); text-align: center;
  }
  .tabbar a > span:not(.tb-badge):not(.ico):not(.visually-hidden) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a:hover { color: var(--ink); }
  .tabbar a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 2px; background: var(--primary); }
  .tb-badge {
    position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; padding: 0 6px; border-radius: 30px;
    background: var(--primary); color: var(--on-primary); font: 400 12px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--card);
  }
  body:has(.tabbar) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  /* Decision pages: an answer bar takes the bottom of the screen instead of the tab bar */
  body:has(.decide-bar) .tabbar { display: none; }
  body:has(.decide-bar) { padding-bottom: 0; }
}
/* A phone: the menu button, the name and two icons fit 375 px with tighter gaps */
@media (max-width: 419.98px) {
  .appbar { gap: 4px; padding-right: 8px; }
  .appbar-end { gap: 0; }
}
@media (max-width: 359.98px) {
  .brand-name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Icons: CSS shapes in the current colour (no images, no svg: a page with hostile text must stay inert). Always next to a word. */
.ico { position: relative; display: inline-block; width: 22px; height: 22px; flex: none; color: inherit; }
.ico::before, .ico::after { content: ""; position: absolute; box-sizing: border-box; }
.ico-menu::before { left: 3px; right: 3px; top: 5px; height: 12px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 100% 2px no-repeat; }
.ico-more::before { left: 2px; right: 2px; top: 9px; height: 4px; background: radial-gradient(circle, currentColor 1.8px, transparent 2.2px) 0 0 / 6px 4px repeat-x; }
.ico-dashboard::before { inset: 3px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 7px 7px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 7px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 7px 7px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 7px 7px no-repeat; }
.ico-products::before { left: 3px; right: 3px; top: 6px; bottom: 3px; border: 2px solid currentColor; border-radius: 2px; }
.ico-products::after { left: 2px; right: 2px; top: 3px; height: 5px; border: 2px solid currentColor; border-radius: 2px; }
.ico-stock::before { left: 3px; right: 3px; top: 3px; height: 8px; border: 2px solid currentColor; border-radius: 3px; }
.ico-stock::after { left: 3px; right: 3px; bottom: 3px; height: 8px; border: 2px solid currentColor; border-radius: 3px; }
.ico-purchasing::before { left: 2px; top: 4px; width: 18px; height: 11px; border: 2px solid currentColor; border-radius: 0 0 4px 4px; }
.ico-purchasing::after { left: 5px; top: 17px; width: 12px; height: 4px; background: radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 0 / 6px 4px repeat-x; }
.ico-reports::before { left: 3px; right: 3px; bottom: 3px; height: 16px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 4px 7px no-repeat, linear-gradient(currentColor, currentColor) 50% 100% / 4px 16px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 4px 11px no-repeat; }
.ico-approvals::before { inset: 2px; border: 2px solid currentColor; border-radius: 50%; }
.ico-approvals::after { left: 8px; top: 5px; width: 6px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ico-settings::before { left: 2px; right: 2px; top: 5px; height: 12px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 100% 2px no-repeat; }
.ico-settings::after { left: 4px; top: 3px; width: 14px; height: 16px;
  background: radial-gradient(circle, currentColor 2.6px, transparent 3px) 0 0 / 6px 6px no-repeat, radial-gradient(circle, currentColor 2.6px, transparent 3px) 8px 5px / 6px 6px no-repeat,
    radial-gradient(circle, currentColor 2.6px, transparent 3px) 3px 10px / 6px 6px no-repeat; }
.ico-search::before { left: 3px; top: 3px; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; }
.ico-search::after { left: 14px; top: 15px; width: 7px; height: 2px; background: currentColor; transform: rotate(45deg); transform-origin: 0 50%; }
.ico-key::before { left: 2px; top: 6px; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.ico-key::after { left: 11px; top: 10px; width: 9px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.ico-signout::before { left: 3px; top: 3px; width: 11px; height: 16px; border: 2px solid currentColor; border-right: 0; border-radius: 2px 0 0 2px; }
.ico-signout::after { left: 9px; top: 10px; width: 11px; height: 2px; background: currentColor; }
.ico-plus::before { left: 10px; top: 4px; width: 2px; height: 14px; background: currentColor; }
.ico-help::before { inset: 2px; border: 2px solid currentColor; border-radius: 50%; }
.ico-help::after { content: "?"; content: "?" / ""; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--font); color: currentColor; }
.ico-filter::before { left: 3px; right: 3px; top: 5px; height: 12px; border-top: 2px solid currentColor; clip-path: polygon(0 0, 100% 0, 60% 55%, 60% 100%, 40% 100%, 40% 55%); background: currentColor; }
.ico-filter::after { left: 5px; right: 5px; top: 7px; height: 4px; background: transparent; }
.ico-sort::before { left: 4px; top: 4px; width: 6px; height: 14px; border-left: 2px solid currentColor; }
.ico-sort::after { right: 4px; top: 4px; width: 6px; height: 14px; border-right: 2px solid currentColor; }
.ico-export::before { left: 10px; top: 2px; width: 2px; height: 12px; background: currentColor; }
.ico-export::after { left: 3px; right: 3px; bottom: 3px; height: 6px; border: 2px solid currentColor; border-top: 0; }
.ico-plus::after { left: 4px; top: 10px; width: 14px; height: 2px; background: currentColor; }

/* ---------- 5. Page frame: the page bar (section name, one line, the buying flow, the view tabs), segments, the toolbar ---------- */
.pagebar { padding: 16px var(--gutter) 0; }
.pagebar-title { min-width: 0; }
.pagebar-name { margin: 0; font: 500 24px/30px var(--title-font); letter-spacing: -.1px; color: var(--ink); }
.page-desc { margin: 4px 0 0; color: var(--ink-2); font: 400 14px/20px var(--font); max-width: 80ch; }
@media (min-width: 960px) { .pagebar { padding-top: 24px; } }

/* View tabs (Vibe Tab + TabList): a 40 px row, 16 px text, 4px 16px, a 2 px grey line under all and a 2 px blue line under the open
   one, the grey hover. The first tab's text lines up with the title. Scrolls inside itself, never the page. A tab not built yet is a
   disabled span with a "Soon" chip. */
.tabs {
  position: relative; display: flex; margin: 12px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 0 calc(var(--gutter) - 16px);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; box-shadow: inset 0 -2px 0 var(--ui-bg);
}
.tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 4px 16px;
  color: var(--ink); font: 400 16px/22px var(--font); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
a.tab:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.tab[aria-current] { border-bottom-color: var(--primary); }
.tab[aria-current] > .count:not(.soon), .seg-item[aria-current] > .count { background: var(--primary); color: var(--on-primary); }
.tab.soon { color: var(--ink-2); cursor: default; }
.tab > .count.soon { background: transparent; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink-2); }

/* The segmented filter inside a tab (Vibe ButtonGroup, small): 32 px, a 1 px frame, the chosen one light blue with a blue edge */
.seg { position: relative; display: inline-flex; max-width: 100%; margin: 0 0 16px; padding: 1px; overflow-x: auto; scrollbar-width: thin; }
.seg-item {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 32px; padding: 4px 12px;
  margin-left: -1px; border: 1px solid var(--field); background: var(--surface);
  color: var(--ink); font: 400 14px/20px var(--font); text-decoration: none; white-space: nowrap;
}
.seg-item:first-child { margin-left: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.seg-item:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.seg-item:hover { color: var(--ink); background: linear-gradient(var(--hover), var(--hover)), var(--surface); text-decoration: none; }
.seg-item[aria-current] { z-index: 1; background: var(--primary-sel); border-color: var(--primary); }

/* The buying flow on Purchasing (Vibe StepIndicator, compact): a blue number, the open step ringed; each step opens its tab */
.flow { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 32px; }
.flow li { position: relative; margin: 0; min-width: 0; }
/* The arrow between two steps: a 2 px line and its head */
.flow li + li::before { content: ""; position: absolute; top: 50%; left: -25px; width: 16px; height: 2px; margin-top: -1px; background: var(--icon); }
.flow li + li::after {
  content: ""; position: absolute; top: 50%; left: -17px; width: 8px; height: 8px; margin-top: -5px;
  border-top: 2px solid var(--icon); border-right: 2px solid var(--icon); transform: rotate(45deg);
}
.flow a, .flow .flow-off {
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 56px; padding: 8px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none;
}
.flow a:hover { color: var(--ink); background: linear-gradient(var(--hover), var(--hover)), var(--card); text-decoration: none; }
.flow a[aria-current] { border-color: var(--primary); }
.flow .flow-off { background: var(--sunk); color: var(--ink-2); }
.flow-n {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--primary); color: var(--on-primary); font: 400 14px/20px var(--font);
}
.flow a[aria-current] .flow-n { box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--primary); }
.flow-off .flow-n { background: var(--grey-group); }
.flow-txt { min-width: 0; }
.flow-t { display: block; font: 600 14px/20px var(--font); }
.flow-c { display: block; color: var(--ink-2); font: 400 12px/16px var(--font); }
@media (max-width: 639.98px) {
  /* 2 x 2: the numbers keep the order, so the arrows go */
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .flow li + li::before, .flow li + li::after { display: none; }
  .flow a, .flow .flow-off { padding: 8px 10px; gap: 8px; }
}

/* The page under the bar */
/* Under a page bar the section's name is the big title; the page's own heading (its h1: the page's name for a screen reader) is the
   board title's size */
.pagebar + .content h1 { font: 500 18px/24px var(--title-font); letter-spacing: -.1px; margin-bottom: 4px; }
.content { padding: 16px var(--gutter) 40px; }
@media (min-width: 960px) { .content { padding: 20px var(--gutter) 56px; } }
.main { display: block; min-width: 0; padding: 20px var(--gutter) 40px; }
.main:focus { outline: none; }
@media (min-width: 960px) { .main { --gutter: 40px; padding: 32px var(--gutter) 56px; } }
.page { max-width: 1240px; position: relative; container-type: inline-size; }
.main.bare .page { max-width: 480px; margin: 0 auto; }
/* The toolbar row under the tabs (design v4): a blue split "New ..." button (the page's own create action, a menu of the section's
   others), then Search, Filter and Sort as icon-and-text tertiary buttons, Export at the far end. Filter and Sort are <details>
   pop-overs, so they work without app.js. A page without a toolbar of its own gets the split button alone (.page-actions). */
.toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.toolbar .btn .ico, .tb-pop > summary .ico { width: 20px; height: 20px; }
.toolbar .btn .ico-plus::before { left: 9px; top: 3px; }
.toolbar .btn .ico-plus::after { left: 3px; top: 9px; }
.split { position: relative; display: inline-flex; }
.split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-more { position: relative; margin: 0; padding: 0; border: 0; background: none; }
.split-more > summary {
  list-style: none; height: 100%; min-width: 32px; padding: 4px 8px; margin: 0; border-left: 1px solid var(--primary-hover);
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.split-more > summary::-webkit-details-marker, .tb-pop > summary::-webkit-details-marker { display: none; }
.split-more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.split-more[open] > summary { background: var(--primary-hover); margin-bottom: 0; }
.tb-search { position: relative; display: inline-flex; align-items: center; }
.tb-search .ico { position: absolute; left: 8px; top: 50%; margin-top: -11px; color: var(--icon); pointer-events: none; }
.tb-search input[type="search"] {
  width: 104px; min-height: 32px; height: 32px; padding: 4px 8px 4px 36px;
  background: transparent; border-color: transparent; font: 400 14px/22px var(--font); transition: width .15s, border-color .1s;
}
.tb-search input::placeholder { color: var(--ink); }
.tb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tb-search input:hover { background: var(--hover); border-color: transparent; }
.tb-search input:focus-visible, .tb-search input:not(:placeholder-shown) { width: 240px; background: var(--card); border-color: var(--primary); }
.tb-search input:focus-visible::placeholder { color: var(--placeholder); }
.tb-pop { position: relative; margin: 0; padding: 0; border: 0; background: none; }
.tb-pop > summary { list-style: none; margin: 0; }
.tb-pop[open] > summary { background: var(--primary-sel); margin-bottom: 0; }
.tb-pop > summary .count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 30px; background: var(--primary); color: var(--on-primary);
  font: 400 12px/18px var(--font); text-align: center; }
.tb-end { margin-left: auto; display: inline-flex; gap: 8px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.ghost .ico { color: var(--icon); }
.pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: max-content; min-width: 200px;
  max-width: min(400px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none;
  background: var(--card); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.split .pop { left: auto; right: 0; }
.pop li { margin: 0; }
.pop-form { display: grid; gap: 12px; padding: 16px; min-width: 300px; }
.pop-form label:not(.choice) { color: var(--ink-2); }
.pop-actions { display: flex; justify-content: flex-end; gap: 8px; }
.menu-item {
  display: flex; align-items: center; gap: 8px; min-height: var(--row-h); padding: 8px 16px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font: 400 14px/20px var(--font); white-space: nowrap;
}
.menu-item:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
@media (max-width: 959.98px) {
  .split-more > summary { min-width: 44px; }
  .menu-item { min-height: 44px; }
  .tb-search input[type="search"] { height: 44px; min-height: 44px; font-size: 16px; }
}
@media (max-width: 639.98px) {
  /* Search takes the free width; a pop-over opens under the whole toolbar, full width */
  .split, .tb-pop { position: static; }
  .tb-search { flex: 1 1 8rem; }
  .tb-search input[type="search"], .tb-search input:focus-visible, .tb-search input:not(:placeholder-shown) { width: 100%; }
  .pop, .split .pop { left: 0; right: 0; width: auto; max-width: none; min-width: 0; }
  .pop-form { min-width: 0; }
  .tb-end { margin-left: 0; }
}

/* Boards (design v4): a board title, then one block per group: its title in the group's colour with a fold chevron and a count, then
   its table with a strip of the group's colour down the left, a "+ New ..." row and a total row. */
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 24px 0 8px; }
.board-head:first-child { margin-top: 0; }
.board-head > h2, .board-head > h3, .board-title, .board-sub { margin: 0; font: 500 18px/24px var(--title-font); letter-spacing: -.1px; }
.board-note { margin: 0; color: var(--ink-2); font: 400 14px/20px var(--font); }
.grp-block { margin: 0 0 24px; }
.t-primary { --t-fill: var(--primary); --t-icon: var(--primary); }
.grp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 16px 0 8px; font: 400 14px/20px var(--font); color: var(--ink); }
.grp-toggle {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0 0 0 -4px; padding: 4px 8px 4px 4px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--t-fill, var(--grey-group));
  font: 500 18px/24px var(--title-font); letter-spacing: -.1px; cursor: pointer;
}
.grp-title.waiting .grp-toggle { color: var(--grey-group); }
.grp-toggle:hover { background: var(--hover); color: var(--t-fill, var(--grey-group)); }
.grp-toggle::before { content: ""; width: 8px; height: 8px; margin: -4px 6px 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .1s; }
.grp-toggle[aria-expanded="false"]::before { transform: rotate(-45deg); margin-top: 0; }
html:not(.js) .grp-toggle { cursor: default; }
html:not(.js) .grp-toggle::before { display: none; }
.grp-count { color: var(--ink-2); font: 400 14px/20px var(--font); }
table.board { --line-strip: var(--t-fill, var(--line)); }
table.board.waiting { --line-strip: var(--grey-group); }
table.board tbody tr > :first-child, table.board thead tr > :first-child { border-left-color: var(--line-strip); }
/* A board of one group whose rows carry their own status (All Products, the stock, the users): each row's strip is its status */
table.board.row-strips tbody tr > :first-child, table.board tbody.grp > tr > :first-child { border-left-color: var(--t-fill, var(--line-strip)); }
table.board tbody.grp.waiting > tr > :first-child { border-left-color: var(--grey-group); }
table.board tbody tr.urgent > :first-child { border-left-color: var(--stuck); }
/* Groups inside one table (a title row per tbody, design v4's grouped board) */
table.board tbody.grp > tr.grp-head > th {
  height: auto; padding: 24px 0 8px; border: 0; background: var(--surface); text-align: left; position: static; font-weight: 400;
}
table.board tbody.grp:first-of-type > tr.grp-head > th { padding-top: 8px; }
table.board tbody.grp > tr.grp-head:hover > * { background: var(--surface); }
table.board tbody.grp > tr.grp-head .grp-title { margin: 0; }
tbody.grp.is-collapsed > tr:not(.grp-head) { display: none; }
@container (max-width: 640px) {
  table.stack.board tbody.grp > tr.grp-head { display: block; padding: 0; border: 0; background: none; box-shadow: none; margin-top: 8px; }
  table.stack.board tbody.grp > tr.grp-head > th { padding: 0; }
}
table.board .grp-add > td { color: var(--ink-2); text-align: left; }
.add-item { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-2); text-decoration: none; font: 400 14px/20px var(--font); }
.add-item:hover { color: var(--ink); text-decoration: none; }
table.board .grp-foot > * { font-weight: 600; }
table.board tbody tr.grp-foot:hover > *, table.board tbody tr.grp-add:hover > * { background: var(--surface); }
table.board th.c-item { min-width: 14rem; }
table.board .o-sub { display: block; color: var(--ink-2); font: 400 12px/16px var(--font); }
table.tasks th.c-item { width: 40%; }
table.tasks h3 { margin: 0; font: 400 14px/20px var(--font); color: var(--ink); }
table.tasks .task-step { margin: 0 0 2px; color: var(--ink-2); font: 400 12px/16px var(--font); }
table.tasks .start-tag { margin-left: 4px; padding: 0 6px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary); font: 400 12px/16px var(--font); }
table.tasks .text, table.tasks .task-what, table.tasks .task-lines { margin: 2px 0 0; color: var(--ink-2); font: 400 12px/16px var(--font); max-width: 60ch; }
table.tasks .task-what strong { color: var(--ink); font-weight: 600; }
table.tasks td.where { color: var(--ink-2); font: 400 12px/16px var(--font); }
table.tasks p.count { margin: 0; font: 400 14px/20px var(--font); }
table.tasks p.count small { font-size: 14px; color: var(--ink); }
table.tasks .prog { justify-content: center; }
@container (max-width: 640px) {
  table.stack.board tr.grp-foot { background: var(--sunk); }
  table.stack.board tr.grp-foot > * { background: none; }
  table.stack.board tr.grp-add { display: block; padding: 0; border-style: dashed; border-left-width: 1px; background: none; }
  table.stack.board tr.grp-add .add-item { display: flex; width: 100%; min-height: 44px; padding: 0 12px; }
  table.stack tr.task > .c-head { grid-column: 1 / -1; }
  table.tasks th.c-item { width: auto; }
  table.stack.board th.c-item { min-width: 0; } /* a card's name shares its first line with the status chip */
}

/* Widget tiles (Vibe widgets): a title top left, a big number, one line under it, a link */
.kpis-wrap { container-type: inline-size; margin: 0 0 24px; }
.kpis { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@container (min-width: 560px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 760px) { .kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chg { font-weight: 600; }
.chg.up { color: var(--positive); }
.chg.down { color: var(--negative); }
.sub-h { display: block; font-size: 12px; line-height: 16px; }
.kpi {
  display: flex; flex-direction: column; margin: 0; padding: 16px; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-xs);
}
.kpi-label { margin: 0 0 8px; color: var(--ink); font: 500 16px/24px var(--font); }
.kpi-value { margin: 0; font: 500 32px/40px var(--title-font); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kpi-sub { margin: 4px 0 0; color: var(--ink-2); font: 400 14px/20px var(--font); }
.kpi-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: auto; padding-top: 8px; font: 400 14px/20px var(--font); align-self: flex-start; }
@container (max-width: 559.98px) { .kpi { padding: 12px; } .kpi-value { font-size: 24px; line-height: 30px; letter-spacing: -.1px; } .kpi-label { font-size: 14px; line-height: 20px; } }

.lede { max-width: 80ch; color: var(--ink-2); margin: 0 0 16px; font: 400 14px/20px var(--font); }
.lede strong { color: var(--ink); }
.prose, :where(.page > p, .card > p, section > p) { max-width: 80ch; }

/* Breadcrumbs (a detail page's way back to its list), and the row of filters + actions above a list (both wrap on a phone) */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0 0 4px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
p.crumbs > a:first-child::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; }
.crumbs .actions, .crumbs form { margin: 0; }
.see-also { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 12px; }
.see-also a { display: inline-flex; align-items: center; min-height: 32px; }
.later { margin-top: 32px; }
section.box, section { margin: 0 0 24px; }
.section-title { font: 500 18px/24px var(--title-font); margin: 0 0 12px; }

/* ---------- 6. Cards and widgets (Vibe: a white card, a 1 px line, an 8 px radius, the xs shadow) ---------- */
.card, section.box, dl.wide {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-xs); padding: 16px;
}
@media (min-width: 960px) { .card { padding: 20px; } }
.card > :last-child { margin-bottom: 0; }
.card > h2:first-child, .card > h3:first-child, section.box > h2:first-child { margin-top: 0; }
.card .title { font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
.eyebrow { margin: 0 0 8px; font: 400 14px/20px var(--font); color: var(--ink-2); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@container (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.cols > .card, .cols > section { margin: 0; }
section.box.waiting, .card.waiting:not(.task), .company-status.waiting, .elsewhere { border: 1px solid var(--working); box-shadow: inset 4px 0 0 var(--working), var(--shadow-xs); }

/* ---------- 7. Status labels: the status colour, WHITE semi-bold text, a small shape AND the word ---------- */
/* Tone classes. --t-fill = the status colour (labels, strips, the shape of an info box); --t-soft = the tint of an info box. */
.needs   { --t-fill: var(--working); --t-soft: var(--warning-sel);  --t-ink: var(--needs-ink); --t-bg: var(--needs-bg); --t-line: var(--needs-line); --t-icon: var(--needs-icon); }
.done    { --t-fill: var(--done);    --t-soft: var(--positive-sel); --t-ink: var(--done-ink);  --t-bg: var(--done-bg);  --t-line: var(--done-line);  --t-icon: var(--done-icon); }
.waiting { --t-fill: var(--waiting); --t-soft: var(--sunk);         --t-ink: var(--wait-ink);  --t-bg: var(--wait-bg);  --t-line: var(--wait-line);  --t-icon: var(--wait-icon); }
.blocked { --t-fill: var(--stuck);   --t-soft: var(--negative-sel); --t-ink: var(--block-ink); --t-bg: var(--block-bg); --t-line: var(--block-line); --t-icon: var(--block-icon); }
.info    { --t-fill: var(--info);    --t-soft: var(--primary-sel);  --t-ink: var(--info-ink);  --t-bg: var(--info-bg);  --t-line: var(--info-line);  --t-icon: var(--info-icon); }
.off     { --t-fill: var(--stopped); --t-soft: var(--sunk);         --t-ink: var(--wait-ink);  --t-bg: var(--surface);  --t-line: var(--wait-line);  --t-icon: var(--wait-icon); }
.review  { --t-fill: var(--review);  --t-soft: var(--purple-sel);   --t-ink: var(--ink);       --t-bg: var(--purple-sel); --t-line: var(--review);   --t-icon: var(--review); }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; vertical-align: middle;
  min-height: 24px; padding: 2px 8px; border-radius: var(--r-sm); white-space: nowrap; border: 0;
  background: var(--t-fill, var(--waiting)); color: var(--on-primary); font: 600 14px/20px var(--font); text-align: center;
}
.chip.lg { min-height: 32px; padding: 4px 12px; }

/* The shapes (decorative: the word carries the meaning), shared by labels, info boxes and result marks:
   Needs you = a disc with "!"   Done = a disc with a tick   Info = a disc with "i"   Waiting = an open ring (three quarters)
   Blocked = a disc with a bar (no entry)   Off = an empty ring. On a label the disc is white and the mark is the label's colour. */
:is(.chip, .alert, .mark)::before {
  content: ""; flex: none; display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--t-icon, var(--info-icon)); color: var(--on-icon); font: 700 11px/1 var(--font);
}
:is(.chip, .alert, .mark).needs::before { content: "!"; content: "!" / ""; }
:is(.chip, .alert, .mark).done::before  { content: "\2713"; content: "\2713" / ""; }
:is(.chip, .alert, .mark).info::before  { content: "i"; content: "i" / ""; font-family: Georgia, "Times New Roman", serif; }
:is(.chip, .alert, .mark).waiting::before { background: transparent; border: 3px solid var(--t-icon); border-right-color: transparent; transform: rotate(45deg); }
:is(.chip, .alert, .mark).blocked::before { background: linear-gradient(var(--on-icon), var(--on-icon)) center / 8px 2px no-repeat, var(--t-icon); }
:is(.chip, .alert, .mark).off::before { background: transparent; border: 2px solid var(--t-icon); }
:is(.chip, .alert, .mark).review::before { background: radial-gradient(circle, var(--t-icon) 0 3px, transparent 3.5px); border: 2px solid var(--t-icon); }
.chip::before { width: 12px; height: 12px; font-size: 9px; background: var(--on-primary); color: var(--t-fill, var(--waiting)); }
.chip.waiting::before { background: transparent; border: 2px solid var(--on-primary); border-right-color: transparent; }
.chip.blocked::before { background: linear-gradient(var(--t-fill), var(--t-fill)) center / 6px 2px no-repeat, var(--on-primary); }
.chip.off::before { background: transparent; border: 2px solid var(--on-primary); }
.chip.review::before { background: radial-gradient(circle, var(--on-primary) 0 2px, transparent 2.5px); border: 2px solid var(--on-primary); }
.mark { display: inline-flex; align-items: center; gap: 6px; color: var(--t-ink); font-weight: 600; white-space: nowrap; }

/* The screens' older status words: the same labels (tone by the class the template already sets) */
.status, .tag {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 0 8px; border-radius: var(--r-sm); margin: 0 4px 2px 0;
  color: var(--ink); background: var(--ui-bg); border: 0; font: 400 14px/24px var(--font); white-space: normal;
}
.tag .muted { color: inherit; opacity: .8; }
.status-mapped, .status-active, .tag.ok { color: var(--on-primary); background: var(--done); font-weight: 600; }
.status-suggested, .status-unmapped, .status-pending_approval, .status-draft, .tag.warn { color: var(--on-primary); background: var(--working); font-weight: 600; }
.status-quarantined, .status-inactive, .tag.bad { color: var(--on-primary); background: var(--stuck); font-weight: 600; }
.status-mapped::before, .status-active::before, .tag.ok::before { content: "\2713"; content: "\2713" / ""; font-weight: 700; }
.status-quarantined::before, .status-inactive::before, .tag.bad::before { content: "!"; content: "!" / ""; font-weight: 700; }

/* ---------- 8. Info boxes (Vibe AttentionBox): Info / Needs you / Problem / Done. The older .notice / .note / .error look the same. ---------- */
.alert, .notice, .note, .error {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 12px 16px; margin: 0 0 16px; border-radius: var(--r-md); border: 0;
  background: var(--t-soft, var(--t-bg)); color: var(--ink); max-width: none;
}
.notice { --t-soft: var(--positive-sel); --t-icon: var(--done); --t-ink: var(--ink); }
.note   { --t-soft: var(--warning-sel); --t-icon: var(--working); --t-ink: var(--ink); }
.error  { --t-soft: var(--negative-sel); --t-icon: var(--stuck); --t-ink: var(--ink); }
.alert::before, .notice::before, .note::before, .error::before {
  content: ""; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  margin-top: 0; grid-row: 1 / span 6; background: var(--t-icon); color: var(--on-icon); font: 700 12px/1 var(--font);
}
.notice::before { content: "\2713"; content: "\2713" / ""; }
.note::before, .error::before { content: "!"; content: "!" / ""; }
.alert.waiting::before, .alert.off::before { width: 20px; height: 20px; }
.alert > *, .notice > *, .note > *, .error > * { grid-column: 2; margin: 0; }
.alert > * + * { margin-top: 6px; }
.alert-title { font-weight: 600; color: var(--ink); }
.alert ul { padding-left: 18px; }
.alert .btn { justify-self: start; margin-top: 8px; }
/* Links on a tinted box are text-coloured and underlined (the blue on the tints is too faint) */
.notice a, .note a, .error a, .alert a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.field-error { margin: 0 0 4px; color: var(--block-ink); font: 600 14px/20px var(--font); }
.field-error::before { content: "! "; content: "! " / ""; font-weight: 700; }
/* A field someone else changed while this form was open (the supplier form after a stale save). */
.field-theirs { margin: 0 0 4px; padding: 2px 8px; border-left: 4px solid var(--working); background: var(--warning-sel); color: var(--ink);
  font: 600 14px/20px var(--font); overflow-wrap: anywhere; }
.alert.admin-off { margin-bottom: 16px; }

/* ---------- 9. Buttons (Vibe Button): 40 px on a laptop, 44 px on a phone; the label says what happens ---------- */
.btn, button, .button, a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--field); background: transparent; color: var(--ink);
  font: 400 16px/22px var(--font); text-align: center; text-decoration: none; cursor: pointer; vertical-align: middle;
  -webkit-appearance: none; appearance: none;
}
.btn:hover, button:hover, .button:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.btn.primary, button.primary, a.button.primary-link { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn.primary:hover, button.primary:hover, a.button.primary-link:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--field); }
.btn.danger, button.danger { background: var(--negative); color: var(--on-primary); border-color: var(--negative); }
.btn.danger:hover, button.danger:hover { background: var(--negative-hover); border-color: var(--negative-hover); color: var(--on-primary); }
/* "quiet" = Vibe tertiary: no border, no fill */
.btn.quiet, button.link { background: transparent; color: var(--ink); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn.quiet:hover, button.link:hover { background: var(--hover); }
button.link { color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
.btn.sm { min-height: 32px; padding: 4px 8px; font: 400 14px/22px var(--font); }
.btn.full { width: 100%; }
button[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: progress; }
.btn.big { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 8px 16px; text-align: left; width: 100%; }
.btn .btn-title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.btn .sub { font-size: 13px; line-height: 18px; font-weight: 400; }
.btn.secondary .sub, .btn:not(.primary) .sub { color: var(--ink-2); }
.btn-row, .actions, td.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
p.actions, div.actions { margin: 12px 0; }
.actions > a:not(.button):not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
.reveal { min-height: 32px; padding: 4px 12px; font-size: 14px; margin-top: -4px; justify-self: start; }
@media (max-width: 959.98px) {
  .btn, button, .button, a.button, .btn.sm { min-height: 44px; }
  .btn.sm { padding: 8px 12px; }
  .reveal { min-height: 44px; }
}

/* ---------- 10. Forms (Vibe BaseInput): 16 px text (no iPhone zoom), a 1 px edge that darkens on hover, the blue focus ---------- */
label { display: grid; gap: 4px; color: var(--ink); font: 400 14px/20px var(--font); }
label .hint, label .muted { font-weight: 400; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; }
input, select, textarea, button { font-family: inherit; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"],
input[type="date"], input[type="file"], select, textarea {
  width: 100%; min-width: 0; min-height: 40px; padding: 8px 4px 8px 12px;
  font: 400 16px/22px var(--font); color: var(--ink);
  background: var(--card); border: 1px solid var(--field); border-radius: var(--r-sm); transition: border-color .1s ease-in;
}
textarea { min-height: 96px; padding-right: 12px; }
input[type="file"] { padding: 6px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--icon) 50%), linear-gradient(135deg, var(--icon) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--primary); box-shadow: none; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); }
input.short, input.units { width: 7.5rem; }
[aria-invalid="true"] { border-color: var(--negative) !important; box-shadow: 0 0 0 1px var(--negative); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 12px; background: var(--card); min-width: 0; }
legend { font-weight: 600; padding: 0 4px; color: var(--ink); }
@media (max-width: 959.98px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"],
  input[type="date"], select { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}

/* A whole-row choice: the row is the tap target */
label.choice, .check {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  color: var(--ink); font: 400 14px/20px var(--font); cursor: pointer;
}
label.choice:hover, .check:hover { background: linear-gradient(var(--hover), var(--hover)), var(--card); }
label.choice:has(input:checked), .check:has(input:checked) { border-color: var(--primary); background: var(--primary-sel); }
.check { border-color: var(--field); font-weight: 600; }
.check small { display: block; font-weight: 400; color: var(--ink-2); font-size: 13px; }
@media (max-width: 959.98px) { label.choice, .check { min-height: 44px; } }

/* Search and filters above a list: one compact row (the toolbar's look: 32 px fields and buttons, the labels above) */
.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0 0 16px; }
.filters label { flex: 0 1 12rem; min-width: 0; color: var(--ink-2); }
.filters label:has(input[type="search"]), .filters label:has(input[name="q"]) { flex: 1 1 16rem; }
.filters label.choice { flex: 0 1 auto; color: var(--ink); }
.filters input[type="text"], .filters input[type="search"], .filters input[type="number"], .filters input[type="date"], .filters select {
  min-height: 32px; height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; line-height: 22px; }
.filters button, .filters .btn { flex: none; min-height: 32px; padding: 4px 12px; font-size: 14px; }
@media (max-width: 959.98px) {
  .filters label { flex: 1 1 10rem; }
  .filters input[type="text"], .filters input[type="search"], .filters input[type="number"], .filters input[type="date"], .filters select,
  .filters button, .filters .btn { height: 44px; min-height: 44px; font-size: 16px; }
}
form.inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; max-width: 100%; }
form.inline label { display: inline-flex; align-items: center; gap: 8px; }
form.inline input[type="text"], form.inline input[type="number"], form.inline select { width: auto; min-width: 6rem; flex: 1 1 8rem; }
form.record, form.decide { display: grid; gap: 12px; max-width: 760px; }
form.record fieldset, form.decide fieldset { display: grid; gap: 8px; }
form.decide { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; box-shadow: var(--shadow-xs); }
form.upload { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.narrow { max-width: 440px; margin: 32px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs); padding: 24px; }
.narrow form { display: grid; gap: 12px; margin-bottom: 16px; }
.narrow button[type="submit"] { width: 100%; }
.login h1 { margin-bottom: 4px; }
.error-page .rid { font-size: 14px; }
@media (max-width: 520px) { .narrow { margin: 0 auto; padding: 20px 16px; } }

/* ---------- 11. Tables (boards): 36 px rows, 1 px cell lines, the name column left and sticky, every other column centred ---------- */
table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 24px;
  background: var(--surface); font: 400 14px/20px var(--font); font-variant-numeric: tabular-nums;
}
caption { text-align: left; padding: 0 0 8px; font: 500 16px/24px var(--font); color: var(--ink); }
th, td {
  height: var(--row-h); padding: 6px 8px; text-align: center; vertical-align: middle; color: var(--ink);
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
tr > :last-child { border-right: 0; }
/* The first (name) column: left-aligned, sticky when the table scrolls sideways, with a strip down its left */
tr > :first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--surface); border-left: var(--strip) solid var(--line-strip, var(--line)); }
thead th, thead td { color: var(--ink-2); font-weight: 400; line-height: 18px; vertical-align: middle; border-top: 1px solid var(--line); background: var(--surface); }
thead tr:first-child > :first-child { border-top-left-radius: var(--r-sm); z-index: 2; }
tbody > tr:last-child > :first-child { border-bottom-left-radius: var(--r-sm); }
tbody th { font-weight: 400; }
tbody th.c-head, tbody th[scope="row"] { font-weight: 600; }
tbody tr:hover > * { background: linear-gradient(var(--hover), var(--hover)), var(--surface); }
th.num, td.num { text-align: center; }
tr.sub > * { background: var(--sunk); color: var(--ink-2); }
tr.inactive > *, tr.revoked > *, tr.excluded > * { color: var(--ink-2); }
td.meter { width: 96px; }
.row-link { font-weight: 600; display: inline-block; padding: 8px 0; margin: -8px 0; }
/* A row's name is the board's item: text-coloured, underlined on hover (Vibe boards) */
tbody th a, tbody td.c-head a, .o-name, .row-link { color: var(--ink); text-decoration: none; }
tbody th a:hover, tbody td.c-head a:hover, .o-name:hover, .row-link:hover { color: var(--link); text-decoration: underline; }

/* The status column: the label fills the whole cell, as on a board */
td.c-status:has(> .chip:only-child) { padding: 0; height: 1px; min-width: 140px; }
td.c-status > .chip:only-child { display: flex; width: 100%; height: 100%; min-height: calc(var(--row-h) - 1px); border-radius: 0; white-space: normal; padding: 4px 8px; }

/* Rows that differ: tint + a strip on the left + the word in the last cell */
tr.differs > * { background: var(--diff-bg); }
tr.differs > :first-child { border-left-color: var(--diff-bar); }
tr.differs .state { font-weight: 600; color: var(--ink); }
tbody tr.differs:hover > * { background: var(--diff-bg); }
td.state { width: 7rem; color: var(--ink-2); }
tr.picked > * { background: var(--primary-sel); }
table:not(.board) tr.blocked > * { background: var(--negative-sel); }
tr.urgent > :first-child { border-left-color: var(--stuck); }

/* A table that must keep its columns scrolls inside its own box, never the page */
.scroll { overflow-x: auto; max-width: 100%; margin: 0 0 24px; scrollbar-width: thin; }
.scroll > table { margin: 0; }
/* Every list table (table.stack) sits in a .table-wrap: on a tablet or laptop a list wider than the page column scrolls inside
   it instead of pushing the page sideways; as cards (640 px of page or less) it never overflows, so nothing is clipped there. */
.table-wrap { max-width: 100%; margin: 0 0 24px; }
.table-wrap > table { margin: 0; }
@container (min-width: 641px) { .table-wrap { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } }

/* The list pattern: <table class="stack"> (or "rtable") with data-label on each cell. One card per row on a phone. */
@container (max-width: 640px) {
  table.stack, table.rtable { border: 0; background: none; box-shadow: none; }
  table.stack thead, table.rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack tbody, table.rtable tbody { display: grid; gap: 8px; }
  table.stack tr, table.rtable tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    border-left: var(--strip) solid var(--t-icon, var(--line));
    padding: 12px 12px 12px 14px;
  }
  table.stack th, table.stack td, table.rtable th, table.rtable td {
    display: block; padding: 4px 0; border: 0; grid-column: 1 / -1; text-align: left; height: auto; position: static; background: none; }
  table.stack tbody tr:hover > *, table.rtable tbody tr:hover > * { background: none; }
  table.stack td[data-label], table.rtable td[data-label] { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 12px; }
  table.stack td[data-label]::before, table.rtable td[data-label]::before { content: attr(data-label); color: var(--ink-2); font: 400 13px/20px var(--font); }
  table.stack td[data-label=""]::before, table.rtable td[data-label=""]::before { content: none; }
  table.stack td[data-label] > *, table.rtable td[data-label] > * { grid-column: 2; } /* a second line of a cell stays under its value */
  table.stack td[data-label=""] > *, table.rtable td[data-label=""] > * { grid-column: 1 / -1; }
  table.stack td[data-label]:empty, table.rtable td[data-label]:empty { display: none; } /* no bare "Watch out:" on a card */
  table.stack .c-head, table.rtable .c-head { grid-column: 1; padding: 0 0 6px; font-size: 16px; line-height: 22px; }
  table.stack .c-status, table.rtable .c-status { grid-column: 2; grid-row: 1; padding: 0 0 6px; justify-self: end; height: auto; min-width: 0; }
  table.stack td.c-status > .chip:only-child { display: inline-flex; width: auto; height: auto; min-height: 24px; border-radius: var(--r-sm); white-space: nowrap; }
  table.stack .c-wide, table.rtable .c-wide { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
  table.stack .c-next, table.rtable .c-next { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
  table.stack .c-next .btn, table.stack .c-next button { width: 100%; }
  table.stack tr.differs, table.rtable tr.differs { background: var(--diff-bg); border-left-color: var(--diff-bar); }
  table.stack tr.differs > *, table.rtable tr.differs > * { background: none; box-shadow: none; }
  table.stack td.actions, table.rtable td.actions { display: flex; }

  /* Any other table keeps its columns and scrolls sideways inside itself */
  table:not(.stack):not(.rtable) { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .scroll > table:not(.stack):not(.rtable) { display: table; overflow: visible; }
}

dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 8px 0 0; }
dt { color: var(--ink-2); font-weight: 400; }
dd { margin: 0; overflow-wrap: anywhere; }
dl.wide { margin-bottom: 24px; }
@container (max-width: 560px) {
  dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  dl dt:not(:first-child) { margin-top: 8px; }
}

/* ---------- 12. Folds and the "?" help ---------- */
details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; margin: 0 0 12px; background: var(--surface); }
details > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: 8px; }
details > :last-child:not(summary) { margin-bottom: 12px; }
.fold > summary { list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: ""; width: 9px; height: 9px; flex: none; margin: 0 4px;
  border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: rotate(-45deg);
}
.fold[open] > summary::before { transform: rotate(45deg); }
.tech { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }

/* The account and the help are details too, but look like buttons */
details.help { border: 0; padding: 0; margin: 0; background: none; }
details.help[open] > summary { margin-bottom: 0; }
details.help > :last-child:not(summary) { margin-bottom: 0; }

.help { display: inline-block; vertical-align: middle; }
.help > summary {
  display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; margin: -10px -6px;
  list-style: none; cursor: pointer; font-weight: 700;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary::before {
  content: "?"; content: "?" / "";
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent); background: var(--surface); font-size: 14px; line-height: 1;
}
.help[open] > summary::before { background: var(--accent); color: var(--on-accent); }
.help-body {
  position: absolute; left: 0; right: 0; z-index: 40; max-width: 42rem; margin-top: 10px;
  padding: 14px 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--info-line); border-left: 5px solid var(--info-icon); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
}
.help-body p { margin: 0; max-width: none; }
.alert .help { justify-self: start; margin-top: 2px; }

/* ---------- 13. Progress, confidence and the 20-block strip ---------- */
progress, meter {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 12px;
  border: 0; border-radius: 999px; background: var(--wait-bg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--field); color: var(--accent);
}
progress::-webkit-progress-bar { background: var(--wait-bg); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--field); }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
meter::-webkit-meter-bar { background: var(--wait-bg); border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--field); height: 12px; }
meter::-webkit-meter-optimum-value { background: var(--done-icon); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--done-icon); border-radius: 999px; }
td.meter meter { width: 80px; }
.progress-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }

/* The spot check's 20 blocks: Yes = solid green, wrong = red with a white bar (the "blocked" shape), skipped = striped, this one =
   tall blue, to do = empty. Never colour alone: the shapes differ, and the legend and each block's title say it in words. */
.segments {
  list-style: none; margin: 8px 0; padding: 0;
  display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; align-items: center;
}
.segments li { height: 12px; margin: 0; border-radius: 3px; background: var(--wait-bg); border: 1px solid var(--field); }
.segments li.yes { background: var(--done-icon); border-color: var(--done-icon); }
.segments li.skip { border-color: var(--needs-icon);
  background: repeating-linear-gradient(135deg, var(--needs-icon) 0 3px, var(--needs-bg) 3px 6px); }
.segments li.no { background: linear-gradient(var(--on-icon), var(--on-icon)) center / 60% 3px no-repeat, var(--block-icon); border-color: var(--block-icon); }
.segments li.now { height: 20px; background: var(--accent); border-color: var(--accent); }
.segments-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.segments-legend li { margin: 0; }
.key { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border-radius: 2px; border: 1px solid var(--field); background: var(--wait-bg); }
.key.yes { background: var(--done-icon); border-color: var(--done-icon); }
.key.skip { border-color: var(--needs-icon); background: repeating-linear-gradient(135deg, var(--needs-icon) 0 3px, var(--needs-bg) 3px 6px); }
.key.no { background: linear-gradient(var(--on-icon), var(--on-icon)) center / 60% 2px no-repeat, var(--block-icon); border-color: var(--block-icon); }
.key.now { background: var(--accent); border-color: var(--accent); }

/* ---------- 14. The Dashboard: the task board (section 5) keeps B's job number, "Start here" and "What happens:" line ---------- */
.task-lines { padding-left: 16px; }
.task-lines li { margin: 2px 0; overflow-wrap: anywhere; }
.setup-code code { letter-spacing: .08em; }
table.tasks tr.quiet > * { background: var(--sunk); }
table.tasks .c-next .btn { white-space: nowrap; }

/* Home's other sections: "What is this system?", Matching progress, What you can use */
details.about { padding: 0 20px; margin: 0 0 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); }
details.about > summary { min-height: 52px; font-size: 16px; }
.about-body p { max-width: 68ch; }
.head-help { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 1.25rem 0 .5rem; }
.head-help > h3 { margin: 0; }
table.bands th .hint, table.coverage th .hint { display: block; margin-top: 2px; max-width: 46ch; font-weight: 400; }
.share-val { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.share-val meter { width: 80px; }
ul.uses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 24px; margin: 0 0 1.5rem; padding: 0; list-style: none; }
ul.uses li { margin: 0; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
ul.uses a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
ul.uses .hint { display: block; }

.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); margin: 0 0 1.5rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-xs); padding: 16px; margin: 0; display: block; }
.stat dt { color: var(--ink); font: 500 14px/20px var(--font); }
.stat dd { margin: 2px 0 0; font: 500 24px/30px var(--title-font); font-variant-numeric: tabular-nums; }
.stat dd small { display: block; font-size: 14px; font-weight: 450; color: var(--ink-2); margin-top: 2px; }

/* ---------- 15. Decision pages: the answers say what they do; the safe one is marked ---------- */
.decide-bar {
  position: sticky; bottom: 0; z-index: 20;
  margin: 24px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-up);
}
.decide-buttons { display: grid; gap: 10px; }
@container (min-width: 640px) { .decide-buttons.three { grid-template-columns: 2fr 1fr 1fr; } .decide-buttons.two { grid-template-columns: 1fr 1fr; } }
.answers { display: grid; gap: 12px; margin: 0 0 1.5rem; }
.answer-list { display: grid; gap: 10px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.answer { display: grid; gap: 6px; align-content: start; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--t-line, var(--line)); border-top: 6px solid var(--t-icon, var(--field)); border-radius: var(--radius-sm); }
.answer dt { font-weight: 600; color: var(--t-ink, var(--ink)); }
.answer dd { margin: 0; }
.answer.safe { border-color: var(--accent); }
.safe-tag {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 6px; vertical-align: 1px;
  background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700;
}
.confirm-step { border: 2px solid var(--block-line); border-left: 6px solid var(--block-icon); }

/* ---------- 16. Lists: status pills, filters, empty states, the clearer list cards ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.pills a, .pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px;
  border-radius: 30px; border: 1px solid var(--field); background: var(--surface);
  color: var(--ink); text-decoration: none; font: 400 14px/20px var(--font); white-space: nowrap;
}
@media (max-width: 959.98px) { .pills a, .pill { min-height: 44px; } }
.pills a:hover, .pill:hover { background: var(--sunk); color: var(--ink); }
.pills a[aria-current="page"], .pill[aria-current="true"] { background: var(--primary-sel); border-color: var(--primary); color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 1rem 0; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--field); border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600; background: var(--surface); }
p.pager a { margin-right: 0; }
.empty { border: 0; background: var(--sunk); border-radius: var(--r-md); padding: 20px; margin: 0 0 24px; }
.empty-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.empty p { color: var(--ink-2); max-width: 60ch; }
.empty p:last-child { margin-bottom: 0; }

/* B's list cards: a tone bar on the left of each row, the name first, one full-width action on a phone */
table.list tbody tr > :first-child { border-left-color: var(--t-icon, var(--line)); }
.o-name { display: block; font-weight: 600; font-size: 16px; padding: 10px 0; margin: -10px 0; }
.o-no, .o-sub { display: block; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.o-line { display: block; margin-top: 6px; font-size: 14px; max-width: 34ch; }
@container (max-width: 640px) {
  table.list tbody tr > :first-child { box-shadow: none; padding-left: 0; }
  table.list .c-order, table.list .c-total, table.list .c-next { grid-column: 1 / -1; }
  .o-line { max-width: none; }
}

/* ---------- 17. The screens' own parts (restyled in place: their markup and the tests that pin it are unchanged) ---------- */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li + li { margin-top: .25rem; }
.minicard .sep { color: var(--ink-2); }
form.quick { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 1rem 0; }
table.candidates th[scope="row"] { width: 3.5rem; }
.compare th[scope="row"] { width: 11rem; }
@container (max-width: 640px) { .compare th[scope="row"] { width: auto; } }

/* People and roles */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-bottom: 12px; }
fieldset.role-group { margin: 0; }
label.role-choice { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; min-height: 44px; padding: 6px 0; font-weight: 400; }
label.role-choice input { margin-top: 2px; }
label.role-choice .role-name { font-weight: 600; }
label.role-choice .role-desc { grid-column: 2; color: var(--ink-2); font-size: 14px; }
label.role-choice .role-code { color: var(--ink-2); font-weight: 400; font-size: 12px; font-family: var(--mono); }
.alert.person-clash { margin-bottom: 16px; }

/* Settings and lists, records, To check */
ul.rules-list { margin: 0 0 1.5rem; }
ul.rules-list li { padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); max-width: 75ch; }
ul.rules-list li + li { margin-top: 8px; }
ol.checks-history > li p { margin: .15rem 0; }
.decide-box .answers { margin-bottom: 12px; }
.decide-box form.inline { margin: 6px 12px 6px 0; }
@container (max-width: 640px) {
  .decide-box form.inline, .decide-box form.inline label { display: flex; flex-wrap: wrap; width: 100%; }
  .decide-box form.inline button { width: 100%; }
}
form.roles { max-width: 1000px; }

/* Purchasing: the activation box, the settings list, the PO editor */
table.settings th[scope="row"] small { display: block; font-weight: 400; overflow-wrap: anywhere; }
/* Pack C follow-up (PC19): a setting not used while the switch it depends on is off */
table.settings tr.unused > th, table.settings tr.unused > td { color: var(--ink-2); }
table.settings tr.unused .unused-note { display: block; font-weight: 600; }
form.po-editor { display: grid; gap: 14px; }
form.po-editor fieldset { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
form.po-editor fieldset label { flex: 1 1 14rem; }
form.po-editor fieldset.scan input[type="search"] { min-width: min(22rem, 100%); }
form.po-editor fieldset.po-header textarea { min-width: min(20rem, 100%); }
table.po-lines input, table.po-lines select { min-height: 44px; padding: 6px 8px; }
table.po-lines select { width: 8rem; } /* "S – Standard rate 20%": the open list shows it whole; the table stays narrow */
table.po-lines th, table.po-lines td { padding: 10px 8px; }
table input.short, table input.units { width: 6rem; }
table.po-lines label.choice { display: flex; min-height: 0; padding: 4px 0; border: 0; font-size: 14px; }
section.choices { border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--surface); }
section.choices li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
ul.warnings { list-style: none; padding: 12px 16px; margin: 12px 0; background: var(--needs-bg); color: var(--needs-ink);
  border: 1px solid var(--needs-line); border-left: 5px solid var(--needs-icon); border-radius: var(--radius-sm); }
span.warnings { color: var(--needs-ink); font-weight: 600; }
section.totals dl { max-width: 26rem; }

/* What to buy and the sales data */
table.reorder input.packs { width: 6rem; }
table.reorder tr.urgent > th:first-of-type, table.reorder tr.urgent > td:first-child { border-left-color: var(--block-icon); }
details.why { border: 0; padding: 0; margin: 4px 0 0; background: none; font-weight: 400; }
details.why > summary { min-height: 44px; font-weight: 600; }
details.why p { margin: 6px 0 0; max-width: 60rem; font-size: 14px; color: var(--ink); }
table.days, table.months { width: auto; }
table.months th, table.months td { padding: 6px 8px; }

/* Buying in plain words (plan §6.19-6.30): "What you can do" with one small form per action, the how-to fold, cards on a phone */
.order-actions { display: grid; gap: 12px; }
.order-actions > h2 { margin: 0; }
.order-actions form.quick { margin: 0; }
details.action { margin: 0; }
details.action > summary { font-weight: 600; }
details.action[open] { padding-bottom: 12px; }
details.action form.record { max-width: 640px; }
ul.rules-short { margin: 4px 0 0; padding-left: 1.1rem; }
details.how { margin: 0 0 1rem; }
details.how ol { margin: 0 0 .5rem; }
section.new-order form.inline { margin-top: 4px; }
section.sales-data .see-also { margin: 8px 0 0; }
section.totals .actions { margin: 12px 0 4px; }
section.totals .actions .btn.big { width: auto; flex: 1 1 16rem; }
details.why.maths { margin-top: 6px; }
table.stack tr.urgent { --t-icon: var(--block-icon); }
table.list.reorder .o-line { max-width: none; }
table.list.reorder .chip { margin: 4px 4px 0 0; }
@container (max-width: 640px) {
  table.po-lines input.short, table.po-lines input[type="text"], table.po-lines select { width: 100%; }
  section.totals .actions .btn.big, .order-actions .btn.big { width: 100%; }
  form.po-editor fieldset label { flex-basis: 100%; }
}

/* The spot check */
.progress { font-size: 16px; margin: .25rem 0 .5rem; }
.state-confirmed { color: var(--done-ink); font-weight: 600; }
.state-open { color: var(--ink-2); }

/* Company details */
.company-status form.confirm { display: grid; gap: 10px; margin: 12px 0; }
.company-status form.confirm p { margin: 0; }
form.record.company input, form.record.company textarea { width: 100%; }
dl.company dd.pre { white-space: pre-line; }
ol.versions { margin: 0; padding-left: 1.5rem; }
ol.versions > li { margin: 0 0 1rem; overflow-wrap: anywhere; }
ol.versions > li p { margin: .15rem 0; }
ul.changes li { margin: .3rem 0 .5rem; }
ul.changes .field { display: block; font-weight: 600; }
ul.changes .was, ul.changes .now { display: block; padding-left: .8rem; }
ul.changes .was { color: var(--ink-2); }
.rejected-orders ul { margin: .3rem 0 0; }
article.review { margin: 12px 0; }
article.review form.inline { margin: 6px 12px 6px 0; }
@container (max-width: 640px) {
  article.review form.inline { display: flex; }
}

/* Matching pages: the lists, one website product, the second OK, the spot check (plan §6.14-6.18) */
.tab-count { font-weight: 500; font-variant-numeric: tabular-nums; }
.next-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.subtitle { font-size: 16px; margin: -.25rem 0 .25rem; }
p.eyebrow .chip { margin-left: 2px; }
.spot-box { margin: 0 0 16px; }
.spot-box .segments { margin: 8px 0 6px; }
.spot-box .spot-check { margin-top: 10px; }
.held-back { margin-bottom: 16px; }
.why-lines ul.watch li { margin: 0 0 4px; }
.why-lines .help { margin-left: 2px; }
.decide-box { margin: 0 0 1.5rem; }
.decide-box > h2 { margin-top: 0; }
.decide-box form.quick { margin: 0 0 12px; }
fieldset.invalid { border: 2px solid var(--block-icon); }
.field { display: grid; gap: 6px; }
.field .head-help { margin: 0; }
.field .hint { margin: 0; }
details.new-product, details.pick { margin: 4px 0 0; }
details.pick form.filters { margin-top: 4px; }
ol.history > li { padding: 6px 0; border-bottom: 1px solid var(--line); margin: 0; }
.pending-actions { display: grid; gap: 8px; }
.pending-actions p { margin: 0; }
details.tech-details { margin: 0 0 1.5rem; }
/* The spot check's answers: Yes, "Not a match" (a second step before anything is saved, compare.md §2.1), Not sure */
.decide-buttons.spot-answers { grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 640px) { .decide-buttons.spot-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.decide-buttons.spot-answers form.quick { margin: 0; display: block; }
.decide-buttons.spot-answers form.quick button { width: 100%; height: 100%; }
details.confirm-step { padding: 0; border: 0; background: none; margin: 0; }
details.confirm-step > summary { list-style: none; width: 100%; margin: 0; }
details.confirm-step > summary::-webkit-details-marker { display: none; }
details.confirm-step[open] { grid-column: 1 / -1; padding: 12px; border: 2px solid var(--block-line); border-left: 6px solid var(--block-icon);
  border-radius: var(--radius-sm); background: var(--surface); }
details.confirm-step[open] > summary { margin-bottom: 12px; }
details.confirm-step form.decide { box-shadow: none; border: 0; padding: 0; }
.btn.big .btn-title { font-weight: 700; }

/* Duplicates: the pages of a group side by side, the comparison, the decision */
.dup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 8px 0 16px; }
.dup-card { margin: 0; }
.dup-card h2 { font-size: 16px; margin: 4px 0; overflow-wrap: anywhere; }
.dup-card.keeper { border: 2px solid var(--accent); }
.dup-state { margin: 0 0 6px; }
table.dup-compare th[scope="row"] { width: 11rem; }
table.dup-compare td { min-width: 7rem; overflow-wrap: anywhere; }
table.dup-compare thead th .muted { display: block; font-weight: 400; font-size: 13px; overflow-wrap: anywhere; }
tr.partial > th[scope="row"] .state { font-weight: 400; }
.word.odd, mark.odd { background: var(--diff-bg); color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .18em; padding: 0 2px; border-radius: 3px; }
form.dup-decide { max-width: 760px; }
fieldset.dup-choice { display: flex; flex-wrap: wrap; gap: 8px 12px; }
fieldset.dup-choice legend { overflow-wrap: anywhere; }
form.dup-undo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
section.dup-rules { padding: 14px 16px; border-radius: var(--radius-sm); margin: 12px 0 16px; border: 1px solid var(--line); background: var(--surface); }
section.dup-rules.doubt { background: var(--block-bg); color: var(--ink); border-color: var(--block-line); border-left: 5px solid var(--block-icon); }
section.dup-rules h2 { margin: 0 0 6px; font-size: 16px; }
section.dup-rules.doubt h2 { color: var(--block-ink); }
ul.dup-reasons ul { margin: .2rem 0 .4rem 1.2rem; padding: 0; }
ul.dup-reasons li.strong { font-weight: 600; }
ul.dup-reasons .detail { overflow-wrap: anywhere; }
label.dup-confirm { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 10px 14px; min-height: 48px;
  background: var(--needs-bg); color: var(--ink); border: 1px solid var(--needs-line); border-radius: var(--radius-sm); font-weight: 600; }
details.dup-attrs { margin: 6px 0; }
form.dup-decide .actions button { flex: 1 1 16rem; }
@container (max-width: 640px) { form.dup-decide .actions button { width: 100%; } }

/* The product card and barcodes (IM3): a blocked card in red, a warned one in amber */
section.item-card { margin: 12px 0 16px; }
section.item-card.blocked { border: 2px solid var(--block-icon); }
section.item-card.warned { border: 2px solid var(--needs-icon); }
.card-state { margin: 4px 0 10px; }
.rules { padding: 10px 14px; border-radius: var(--radius-sm); margin: 6px 0 10px; border-left: 5px solid transparent; }
.rules p { margin: 0 0 4px; }
.rules.block { background: var(--block-bg); color: var(--ink); border-color: var(--block-icon); }
.rules.warn { background: var(--needs-bg); color: var(--ink); border-color: var(--needs-icon); }
dl.item-card-fields { grid-template-columns: max-content minmax(0, 1fr); }
form.confirm-card { display: grid; gap: 10px; margin: 12px 0; max-width: 640px; }
table.proposals td ul.plain li { margin: 0 0 .15rem; overflow-wrap: anywhere; }
details.card-history { margin-top: 12px; }
form.add-barcode { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 12px 0 0; }
form.add-barcode p { flex-basis: 100%; margin: 0; }
form.add-barcode input[type="text"] { flex: 1 1 12rem; width: auto; }
ul.summary-line { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 12px; padding: 0; list-style: none; }
article.barcode-review { margin: 12px 0; }
article.barcode-review h2 { margin-top: 0; overflow-wrap: anywhere; }
form.barcode-decide { max-width: 640px; margin-top: 10px; }
form.item-card-form input[type="text"], form.item-card-form select { max-width: 32rem; }
ul.import-errors li { margin: .15rem 0; overflow-wrap: anywhere; }
details.remove-barcode form { display: grid; gap: 8px; margin-top: 8px; max-width: 22rem; }
details.remove-barcode p { margin: 0; }
@container (max-width: 640px) {
  dl.item-card-fields { grid-template-columns: minmax(0, 1fr); }
  form.add-barcode button, form.confirm-card button, form.barcode-decide button { width: 100%; }
  details.remove-barcode button { width: 100%; }
  table.barcodes form.inline { flex-wrap: wrap; }
}

/* ---------- 18. Print ---------- */
@media print {
  .side, .tabbar, .skip, .strip.test-system, .decide-bar, .appbar, .tabs, .seg, .page-actions, .flow { display: none !important; }
  .shell { display: block; }
  .work { border: 0; box-shadow: none; margin: 0; }
  body { background: #fff; color: #000; }
  .card, table { box-shadow: none; }
}

/* Deliveries (IM6, docs/decisions.md I141) in plain words and design A (U85-U90). The deliveries list and the bench list are B's list
   cards; a delivery's page has its facts, the reviewer's box, "where the items went" as stat tiles, and its lines as cards on a phone
   (the order editor's pattern); the incident register is one card per incident. The goods-in bench is TABLET FIRST (a tablet in the
   hand at the bench): one card per line, the number fields two or three across on a tablet and one under the other on a phone, every
   field, tick and button 48-52 px tall, the save bar kept in reach above the tab bar. Design A's tokens only. */
form.receive-new { max-width: 760px; }
section.new-delivery .hint a, .see-also a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
ul.problems { margin: .4rem 0; padding-left: 1.2rem; }
ul.error.problems { padding: 12px 16px 12px 36px; }
section.checklist dl { max-width: 40rem; }
section.checklist .notice { margin-top: 0; }
section.checklist .head-help > h3 { margin: 0; font-size: 16px; }
section.checklist form.quick .btn.big { width: auto; flex: 1 1 18rem; }
section.where-units .stats { margin-bottom: 0; }
section.about-receipt dl { max-width: 52rem; }
table.grn-lines td { vertical-align: top; }
table.grn-lines select { max-width: 16rem; }
table.grn-lines .field-error { display: block; margin-top: .2rem; }
table.grn-lines .o-sub .chip, table.grn-lines td .chip { margin: 0 4px 4px 0; }
details.skipped { margin: .6rem 0; }
ul.files li, ul.incident-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0; padding: 4px 0; overflow-wrap: anywhere; }
ul.files li a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
ul.files .o-sub, ul.incident-list .o-sub { flex-basis: 100%; }
ol.incident-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 16px; }
ol.incident-list > li { margin: 0; }
article.incident { margin: 0; display: grid; gap: 8px; border-left: 6px solid var(--t-icon, var(--line)); }
article.incident > * { margin: 0; }
article.incident h2 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
article.incident a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
form.close-incident fieldset { margin: 4px 0 0; }
.note.duty-rule > .help { justify-self: start; }

/* The goods-in bench */
form.bench { display: grid; gap: 16px; }
form.bench fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px 16px; align-items: end; margin: 0; }
form.bench fieldset > legend { font-size: 16px; }
form.bench fieldset > .help, form.bench .wide, form.bench fieldset .actions, form.bench fieldset > .hint, form.bench fieldset > label.choice,
form.bench fieldset.bench-header > label { grid-column: 1 / -1; }
form.bench input[type="number"] { font-size: 18px; font-variant-numeric: tabular-nums; min-height: 52px; }
form.bench select, form.bench input[type="text"], form.bench input[type="search"] { min-height: 52px; }
form.bench label .hint { display: block; }
form.bench .actions { margin: 0; }
form.bench .actions button { min-height: 52px; }
form.bench div.unstamped-only { display: contents; }
form.bench div.unstamped-only[hidden] { display: none; }
article.bench-line { display: grid; gap: 12px; border-left: 6px solid var(--done-icon); }
article.bench-line.unchecked { border-left-color: var(--needs-icon); }
article.bench-line > * { margin: 0; }
article.bench-line.found { outline: 3px solid var(--accent); outline-offset: 2px; }
.bench-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 12px; }
.bench-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.bench-head h2 .o-sub { display: inline; margin-left: 4px; }
.bench-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
article.bench-line p.expect { font-size: 16px; overflow-wrap: anywhere; }
article.bench-line p.expect strong { font-size: 18px; }
article.bench-line label.counted { min-height: 52px; font-size: 16px; font-weight: 600; }
article.bench-line label.counted input { width: 28px; height: 28px; }

/* The save bar (the editor, the bench) stays in reach on a long page, above the phone's tab bar. */
.actions.sticky { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-up); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
@media (max-width: 959.98px) { body:has(.tabbar) .actions.sticky { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; } }
/* A field that gets focus (Tab, or the scanner's Enter on the bench) is never left under the save bar (WCAG 2.2 2.4.11): the scroll
   padding covers the bar, below 960 px the tab bar under it too, and at 672 px and narrower (a page of 640 px) its stacked buttons. */
html:has(.actions.sticky) { scroll-padding-bottom: 112px; }
@media (max-width: 959.98px) { html:has(.actions.sticky) { scroll-padding-bottom: calc(var(--tabbar-h) + 112px); } }
@media (max-width: 672px) { html:has(.actions.sticky) { scroll-padding-bottom: calc(var(--tabbar-h) + 200px); } }

/* The selling mode on the websites (a product page, IM10) */
table.selling-sites .o-sub { margin-top: 2px; }
form.selling-mode-form { margin-top: 12px; }
form.selling-mode-form .btn.big { width: auto; }

@container (max-width: 640px) {
  .actions.sticky button, form.receive-new button, form.close-incident button, form.selling-mode-form .btn.big, section.checklist form.quick .btn.big { width: 100%; }
  table.grn-lines select, table.grn-lines input.short, table.grn-lines input[type="text"] { width: 100%; max-width: none; }
  form.grn-editor fieldset.scan input[type="search"] { min-width: 0; width: 100%; }
}

/* ---------- 19. The set-it-yourself pack: rules, warehouses, websites, checks, the audit log, who can do what, the sign-up QR code ---------- */
article.card.rule, article.card.site, article.card.request { margin: 0 0 16px; }
article.card.rule h3, article.card.site h2, article.card.request h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 0; }
article.card.rule > p { max-width: 75ch; }
article.card.rule details.fold, article.card.site details.fold { margin-top: 12px; }
section.rules { margin-bottom: 2rem; }
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 16px; margin: 0 0 1.5rem; }
.jobs > section.card { margin: 0; }
.jobs > section.card.mine { border: 2px solid var(--accent); }
.jobs h3 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-top: 0; }
pre.json { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 13px; margin: 0; max-width: 60ch; }
ul.commands li { margin-bottom: 10px; }
ul.commands code { display: inline-block; padding: 4px 6px; background: var(--sunk); border-radius: 4px; }
ul.problems { padding-left: 1.1rem; }
ul.problems code { font-size: 13px; }
.setup-key code { font-size: 18px; letter-spacing: .06em; }
ol.steps li { margin-bottom: 6px; }
/* The QR code: one element per module, black on white in every theme (a code app reads dark on light), with its quiet zone. */
.qr { display: inline-flex; flex-direction: column; background: #fff; padding: 0; margin: 8px 0 12px; line-height: 0;
  border: 1px solid var(--line); forced-color-adjust: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.qr-row { display: flex; }
.qr-row i { display: block; width: 5px; height: 5px; background: #fff; }
.qr-row i.d { background: #000; }
@media (min-width: 420px) { .qr-row i { width: 6px; height: 6px; } }
.enrol h1 { margin-bottom: .25rem; }

/* ---------- 20. Stock: the warehouse totals and the lines (first version) ---------- */
table.stock-totals tr.picked > * { background: var(--primary-tint); }
table.stock-lines .o-name { font-size: 1rem; }

/* The strength bar of the matching lists (design v4's "battery") and its legend: each part's width is a class, w-1 … w-100 (no style="") */
section.card.strength { margin: 0 0 16px; }
section.card.strength > .hint { margin: 0 0 8px; }
.battery { display: flex; height: 16px; border-radius: var(--r-sm); overflow: hidden; background: var(--ui-bg); }
.battery > span { flex: 0 0 auto; height: 100%; background: var(--t-fill); box-shadow: inset -2px 0 0 var(--card); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; }
.legend a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink); text-decoration: none; }
.legend a:hover { text-decoration: underline; color: var(--ink); }
.legend a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--t-fill); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.legend .key { width: 12px; height: 12px; border-radius: 2px; background: var(--t-fill); flex: none; }
.legend .tab-count { font-weight: 600; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* The approval rules (Settings): each section is a group, each rule a row of the board with its group's strip */
.grp-name { font: 500 18px/24px var(--title-font); letter-spacing: -.1px; color: var(--t-fill, var(--grey-group)); }
section.rules article.card.rule { border-radius: 0; margin: 0; border-left: var(--strip) solid var(--t-fill, var(--line)); box-shadow: none; }
section.rules article.card.rule + article.card.rule { border-top: 0; }
section.rules article.card.rule:first-of-type { border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); }
section.rules article.card.rule:last-of-type { border-bottom-left-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); margin-bottom: 16px; }
section.rules article.card.rule h3 { font: 400 16px/24px var(--font); }

/* ---------- 21. Store-wise review and bulk action on the matching screens (docs/decisions.md U106-U112) ---------- */
/* The store selector: the segmented control, under the Mapping segments */
.store-seg .seg-item > .count { min-width: 20px; }
/* The tick column: 44 px, the box in the middle; the name column stays sticky right after it */
table.picks th.c-pick, table.picks td.c-pick { width: 44px; min-width: 44px; padding: 0; text-align: center; }
/* (:where keeps it below the hover and ticked-row tints, which colour every cell of a row) */
:where(table.picks) tr > :where(.c-pick) + * { position: sticky; left: 44px; z-index: 1; text-align: left; background: var(--surface); }
label.pick { display: inline-grid; place-items: center; width: 44px; min-height: var(--row-h); margin: 0; cursor: pointer; }
label.pick input[type="checkbox"] { margin: 0; }
.pick-all { font: 400 14px/20px var(--font); }
tbody tr.picked > * { background: var(--primary-sel); }
tbody tr.picked:hover > * { background: linear-gradient(var(--hover), var(--hover)), var(--primary-sel); }
@container (max-width: 640px) {
  table.stack.picks td.c-pick { display: block; grid-column: 2; grid-row: 1; justify-self: end; width: auto; min-width: 0; padding: 0; }
  /* A card that also has a status label: the box gets a third column after it */
  table.stack.picks tr:has(> .c-status) { grid-template-columns: minmax(0, 1fr) auto auto; }
  table.stack.picks tr:has(> .c-status) > td.c-pick { grid-column: 3; }
  table.stack.picks tr.picked { background: var(--primary-sel); border-color: var(--primary); }
  :where(table.picks) tr > :where(.c-pick) + * { position: static; }
}
/* The action bar (monday.com's batch-action bar): the count in a blue block, the actions, x. Without app.js a plain row under the list;
   with it, shown only while rows are ticked and kept at the bottom of the screen (above the phone's tab bar). */
.bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 24px; padding: 8px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
}
.bulkbar[hidden] { display: none; }
.bulkbar.floating {
  position: sticky; bottom: 16px; z-index: 25; width: fit-content; max-width: 100%; margin: 16px auto 24px; padding: 0 8px 0 0;
  border-color: transparent; box-shadow: var(--shadow-md); overflow: hidden;
}
.bulkbar-count { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 16px/22px var(--font); color: var(--ink); }
.bulkbar:not(.floating) .bulkbar-count { color: var(--ink-2); font-size: 14px; }
.bulkbar-n {
  display: inline-grid; place-items: center; min-width: 56px; min-height: 56px; padding: 0 12px;
  background: var(--primary); color: var(--on-primary); font: 500 24px/1 var(--title-font); font-variant-numeric: tabular-nums;
}
.bulkbar-n:empty { display: none; }
.bulkbar.over .bulkbar-count { color: var(--negative); font-weight: 600; }
.bulkbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bulkbar-close {
  display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; background: none; color: var(--icon); font: 400 24px/1 var(--font);
}
.bulkbar-close[hidden] { display: none; }
.bulkbar-close:hover { color: var(--ink); background: var(--hover); }
@media (max-width: 959.98px) {
  .bulkbar.floating { bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)); }
  .bulkbar-close { min-width: 44px; min-height: 44px; }
}
@media (max-width: 639.98px) {
  /* The count and x on one line, the actions under them, full width */
  .bulkbar.floating { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 0; width: 100%; padding: 0; }
  .bulkbar.floating .bulkbar-count { grid-column: 1; grid-row: 1; }
  .bulkbar.floating .bulkbar-close { grid-column: 2; grid-row: 1; border-left: 0; }
  .bulkbar.floating .bulkbar-actions { grid-column: 1 / -1; grid-row: 2; padding: 0 8px 8px; }
  .bulkbar-n { min-height: 48px; min-width: 48px; font-size: 20px; }
  .bulkbar-actions .btn { flex: 1 1 auto; }
}
/* Store Products: the state filter's dots and a match strength as a small label */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--t-fill, var(--grey-group)); }
.state-pills a { gap: 6px; }
.tag.band { background: var(--t-fill); color: var(--on-primary); font-weight: 600; }
/* The "By store" overview: the strength's help under its name; the share columns centred with their meter */
table.by-store-table th .hint { display: block; margin-top: 2px; max-width: 46ch; font-weight: 400; }
table.by-store-table td.share { white-space: nowrap; }
table.by-store-table td.share .muted.small { display: block; }
.grp-block.by-store .grp-count a { font-weight: 400; }
/* The bulk result and its second step */
.bulk-confirm { max-width: 760px; }
/* A row no bulk action takes (held back, or a match of a spot check; docs/decisions.md U139-U141): the line under its name says so
   and what to do, and its tick cell is empty. On the match-strength lists: what the list shows ("Show"), and the notice above a page
   that holds such rows. */
.o-sub.no-bulk, table.board .o-sub.no-bulk { margin-top: 4px; max-width: 52ch; color: var(--ink); font: 400 12px/16px var(--font); white-space: normal; }
.o-sub.no-bulk::before { content: "!"; content: "!" / ""; display: inline-block; margin-right: 4px; color: var(--working); font-weight: 700; }
.o-sub.no-bulk a { font-weight: 600; text-decoration: underline; }
.show-pills { align-items: center; }
.pills-label { color: var(--ink-2); font: 400 14px/20px var(--font); }
.alert.no-box { margin-bottom: 16px; }

/* ---------- 22. By Item: one column per store, and its picker (docs/decisions.md U113-U122) ---------- */
/* A store's cell: the state label, then the website product and its lines, left-aligned from the top (a board centres its cells) */
table.by-product th.c-store { min-width: 12rem; }
table.by-product td.c-store { text-align: left; vertical-align: top; min-width: 12rem; max-width: 22rem; padding: 8px; }
table.by-product td.c-store .o-line { max-width: none; overflow-wrap: anywhere; }
table.by-product td.c-store .o-sub { margin-top: 2px; }
table.by-product .cell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
table.by-product .here-note { color: var(--ink); }
/* The row a person came back to after a decision keeps its tint while they read it (the list scrolls to it: #p-<number>) */
table.by-product tr[id] { scroll-margin-top: 96px; }
@container (max-width: 640px) {
  /* As a card: the store's name on the left, what it has on the right; the label keeps its own width */
  table.stack.by-product td.c-store { max-width: none; padding: 4px 0; row-gap: 2px; }
  table.stack.by-product td.c-store > .chip { justify-self: start; }
  table.stack.by-product tr.picked, table.stack.by-product tr.here { background: var(--primary-sel); border-color: var(--primary); }
}
/* By Item's rows, ticks and bulk action (docs/decisions.md U123-U130) */
/* The row a person came back to after a decision keeps its tint (`here`); `picked` is a ticked row, as on the lists (section 21) */
table.by-product tbody tr.here > * { background: var(--primary-sel); }
/* How many items a page shows: "Rows 50 100 200" at the end of the board's head */
.rows-choice { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ink-2); font: 400 14px/20px var(--font); }
.rows-choice a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--field); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none;
}
.rows-choice a:hover { background: var(--sunk); }
.rows-choice a[aria-current="true"] { background: var(--primary-sel); border-color: var(--primary); font-weight: 600; }
@media (max-width: 959.98px) { .rows-choice a { min-width: 44px; min-height: 44px; } }
/* The tick of a tall row sits at its top, beside the item's name */
table.by-product td.c-pick { vertical-align: top; }
/* The store the bar's actions are for, before its buttons; the line under the bar that says what they do */
.bulkbar-choice { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 400 14px/20px var(--font); color: var(--ink); }
.bulkbar-choice select { width: auto; max-width: 16rem; min-height: 32px; }
.bulk-note { max-width: 100ch; }
/* The preview: one line per variant, what will happen (and why) in its last cell; the one button stays in sight (.actions.sticky) */
table.by-item-preview td.c-wide { text-align: left; }
table.by-item-preview td.c-wide .why { display: block; margin-top: 4px; color: var(--ink-2); }
form.by-item-apply .preview-facts { margin: 0 0 16px; }
@media (max-width: 959.98px) { .bulkbar-choice select { min-height: 44px; } }


/* Stock > Counts (pack A2a): the sheet's scanned line, a quantity typed and not saved yet, the "open a sheet" box, the line filters. */
table.count-sheet tr.marked > *, table.count-before tr.needs > * { background: var(--needs-bg, #fff7e6); }
table.count-sheet input[type="text"] { width: 7rem; max-width: 100%; text-align: right; }
table.count-sheet input.unsaved { border: 2px solid var(--block-icon); }
.save-state.unsaved { color: var(--block-icon); font-weight: 600; }
fieldset.count-open-how { margin-top: 12px; }
fieldset.count-open-how .inline-field { display: inline-flex; align-items: center; gap: 6px; }
fieldset.count-open-how .inline-field input { width: 5rem; }
p.seg-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
p.seg-links a, p.seg-links strong { display: inline-flex; align-items: center; min-height: 44px; }
form.count-answer { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }

/* Pack PO (docs/decisions.md PO2-PO4): select or add new on the order screens. */
input.select-filter { display: block; max-width: 24rem; margin: 0 0 6px; }
.supplier-needs ol { margin: 4px 0 8px 1.4em; padding: 0; }
.po-editor .add-new { margin-top: 8px; }