/* Steelo ERP components. Built only from tokens.css. Every screen is assembled from these; a page
   that hand-rolls its own table, pill or heading is a defect, not a variation. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* An iPhone or iPad web app from the Home Screen is drawn edge to edge (viewport-fit=cover) and iOS lays its status bar,
   notch and home indicator over the page. The bar and the menu's top cell start below the status bar, the bottom bars
   clear the home indicator, and a phone held sideways keeps clear of the notch. Every other screen reads these as 0.
   One property each, so a check can stand an iPhone's inset in (e2e/safe-area.spec.ts). */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
[hidden] { display: none !important; }   /* a component's own display must never un-hide it */
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 var(--fs-14)/1.45 var(--face-ui);
  font-feature-settings: "tnum" 0;
}
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---- shell — Krishi's sketches, 2026-10-08. One band across the top: the module switcher in the
   sidebar's cell, then "Module — Sub-module › Screen", then settings and profile. Down the side, the
   module's sub-modules, each with its screens beneath it. The sidebar collapses to a strip. ---------- */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; z-index: 30; display: flex; flex-direction: column;
  background: var(--rail-bg); color: var(--rail-ink); border-right: 1px solid var(--rail-line);
}
/* the SCL emblem from design/brand: rounded orange square, drawn by the image itself */
.brand-mark { width: 30px; height: 30px; display: block; flex: none; }

.switcher-wrap { position: relative; flex: none; height: calc(var(--bar-h) + var(--safe-top)); display: flex; align-items: center;
  padding: var(--safe-top) var(--s-12) 0; border-bottom: 1px solid var(--rail-line);
  background: linear-gradient(var(--surface) var(--safe-top), transparent var(--safe-top)); }   /* under the status bar, the bar's colour, so its clock reads */
.switcher { width: 100%; display: flex; align-items: center; gap: var(--s-8); padding: 5px var(--s-8);
  border: 1px solid var(--rail-line); border-radius: var(--radius-panel); background: var(--rail-hover);
  color: var(--rail-ink); cursor: pointer; text-align: left; font: inherit; }
.switcher:hover, .switcher[aria-expanded="true"] { background: var(--rail-active); border-color: var(--rail-label); }
.switcher-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.switcher-label { font: 600 10px/1 var(--face-ui); text-transform: uppercase; letter-spacing: 0.1em; color: var(--rail-label); }
.switcher-name { font: 600 var(--fs-16)/1.15 var(--face-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher > svg { width: 16px; height: 16px; color: var(--rail-label); flex: none; transition: transform .15s; }
.switcher[aria-expanded="true"] > svg { transform: rotate(180deg); }
.module-menu { position: absolute; left: var(--s-12); top: calc(100% - 6px); width: calc(var(--rail-w) - 2 * var(--s-12)); z-index: 40;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-overlay); padding: var(--s-8); display: grid; gap: 2px; }
.module-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); width: 100%;
  min-height: 34px; padding: 0 var(--s-8); border: 0; border-radius: var(--radius-control); background: transparent;
  color: var(--ink-2); font: 500 var(--fs-14)/1 var(--face-ui); text-align: left; cursor: pointer; }
.module-menu button:hover, .module-menu button:focus-visible { background: var(--surface-2); color: var(--ink); }
.module-menu button[aria-current="true"] { color: var(--red); font-weight: 600; }
.module-menu .soon { font-size: var(--fs-12); color: var(--ink-3); font-weight: 400; }
.module-menu .mod-name { flex: 1; }

/* the tree: a sub-module heading folds its screens; a sub-module that is one screen is a plain link */
.subnav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-12); display: grid; align-content: start; gap: 2px; }
.nav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); width: 100%; min-height: 34px;
  margin-top: var(--s-4); padding: 0 var(--s-12); border: 0; border-radius: var(--radius-control); background: transparent;
  color: var(--rail-ink); font: 600 var(--fs-14)/1 var(--face-ui); text-align: left; cursor: pointer; }
.nav-head:hover { background: var(--rail-hover); }
.nav-head svg { width: 14px; height: 14px; color: var(--rail-label); transition: transform .15s; }
.nav-head[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-children { display: grid; gap: 2px; margin: 2px 0 var(--s-4) var(--s-16); padding-left: var(--s-8); border-left: 1px solid var(--rail-line); }
.rail a { position: relative; display: flex; align-items: center; min-height: 32px; padding: 0 var(--s-12);
  border-radius: var(--radius-control); color: var(--rail-ink-2); text-decoration: none; font-weight: 500; }
.subnav > a { color: var(--rail-ink); font-weight: 600; min-height: 34px; }
.rail a:hover { background: var(--rail-hover); color: var(--rail-ink); }
.rail a[aria-current="true"] { background: var(--rail-active); color: var(--rail-ink); font-weight: 600; }
.subnav > a[aria-current="true"]::before, .nav-children a[aria-current="true"]::before { content: ""; position: absolute; top: 7px; bottom: 7px;
  width: 3px; border-radius: 3px; background: var(--red); }
.subnav > a[aria-current="true"]::before { left: -12px; border-radius: 0 3px 3px 0; }
.nav-children a[aria-current="true"]::before { left: calc(-1 * var(--s-8) - 2px); }
.rail a:focus-visible, .switcher:focus-visible, .nav-head:focus-visible { box-shadow: 0 0 0 2px var(--rail-ink); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-8);
  height: calc(var(--bar-h) + var(--safe-top)); padding: var(--safe-top) var(--s-24) 0 var(--s-12); background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-name { margin: 0; min-width: 0; flex: 1; display: flex; align-items: baseline; gap: var(--s-8);
  font: 600 var(--fs-20)/1.2 var(--face-display); white-space: nowrap; overflow: hidden; }
.topbar-name .mod, .topbar-name .sub, .topbar-name .sep { color: var(--ink-3); font-weight: 500; flex: none; }
.topbar-name .sep { color: var(--line-strong); }
.topbar-name .leaf { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { position: relative; display: flex; align-items: center; gap: var(--s-4); flex: none; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.avatar { background: var(--ink); color: var(--surface); }
.icon-btn.avatar:hover { background: var(--ink-2); color: var(--surface); }
.menu-btn { border-radius: var(--radius-control); }
.menu-btn .ico-burger { display: none; }
.popover { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); padding: var(--s-8); display: grid; gap: 2px; }
.popover .who { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.popover .who > div { display: grid; min-width: 0; }
.popover .who b { display: block; }
.popover .who div > span { font-size: var(--fs-12); color: var(--ink-3); }
.popover .pick { display: grid; gap: 6px; padding: var(--s-8); }
.popover .pick .seg { display: flex; justify-self: stretch; }
.popover .pick .seg button { flex: 1; }
.popover > button { all: unset; display: block; padding: var(--s-8); border-radius: var(--radius-control); color: var(--ink-2); cursor: pointer; }
.popover > button:hover, .popover > button:focus-visible { background: var(--surface-2); color: var(--ink); }
.popover > button.pop-frame { color: var(--ink); font-weight: 600; }   /* an owner's sales view, in and out (7 Nov) */

.page { min-width: 0; padding-block: var(--s-24) var(--s-48); padding-inline: var(--s-32); max-width: 1440px; }

/* collapsed (tablet and up): a strip holding only the switcher's mark, which still opens the module list */
@media (min-width: 768px) {
  .shell.collapsed { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
  .shell.collapsed .switcher-wrap { justify-content: center; padding: var(--safe-top) 0 0; }
  .shell.collapsed .switcher { width: auto; padding: 6px; border-color: transparent; background: transparent; }
  .shell.collapsed .brand-mark { width: 40px; height: 40px; }   /* the strip shows the logo and nothing else, so it can be read */
  .shell.collapsed .switcher-text, .shell.collapsed .switcher > svg, .shell.collapsed .subnav { display: none; }
  .shell.collapsed .module-menu { left: var(--s-8); }
}

/* phone: the sidebar is a drawer behind the menu button, switcher inside it */
.drawer-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(6, 12, 22, 0.5); }
@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto;
    padding-left: var(--safe-left); transform: translateX(-100%); transition: transform .2s ease; }
  .rail.open { transform: none; }
  .module-menu { width: auto; right: var(--s-12); }
  .topbar { padding: var(--safe-top) max(var(--s-12), var(--safe-right)) 0 max(var(--s-8), var(--safe-left)); }
  .topbar-name { font-size: var(--fs-16); }
  .topbar-name .mod, .topbar-name .sep-mod, .topbar-name .sub, .topbar-name .sub + .sep { display: none; }   /* the screen name, whole */
  .menu-btn .ico-panel { display: none; }
  .menu-btn .ico-burger { display: block; }
  .page { padding-inline: max(var(--s-16), var(--safe-left)) max(var(--s-16), var(--safe-right)); padding-block: var(--s-16) var(--s-48); }
}
@media (prefers-reduced-motion: reduce) { .rail, .switcher > svg, .nav-head svg { transition: none; } }

/* ---- page head ---------------------------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-16); padding-bottom: var(--s-24); border-bottom: 1px solid var(--line); margin-bottom: var(--s-32); }
.page-head > div { min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-8); font-size: var(--fs-13); color: var(--ink-3); margin-bottom: var(--s-8); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line-strong); }
.page-title { margin: 0; font: 600 var(--fs-28)/1.15 var(--face-display); letter-spacing: -0.005em; text-wrap: balance; }
.lede { margin: var(--s-8) 0 0; color: var(--ink-2); max-width: 68ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }

.section { margin-bottom: var(--s-48); scroll-margin-top: 72px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-16); }
.section-title { margin: 0; font: 600 var(--fs-20)/1.25 var(--face-ui); }
.section-note { margin: var(--s-4) 0 0; color: var(--ink-2); max-width: 72ch; }
.sub-title { margin: 0 0 var(--s-8); font: 600 var(--fs-14)/1.3 var(--face-ui); }
.label { font: 600 var(--fs-12)/1.2 var(--face-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--s-16); min-width: 0; }
.grid { display: grid; gap: var(--s-16); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* ---- figures and codes -------------------------------------------------------------------- */
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.code { font-family: var(--face-code); font-size: 0.92em; letter-spacing: 0; }
/* a document's number that opens it: ink like the text around it, never the browser's blue */
a.code { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a.code:hover { text-decoration-color: currentColor; }
/* a second, quieter line inside a table cell */
.cell-sub { display: block; font-size: var(--fs-12); color: var(--ink-3); }
.muted { color: var(--ink-3); }
.blank { color: var(--ink-3); }

/* ---- buttons ------------------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  min-height: 34px; padding: 0 var(--s-16); border-radius: var(--radius-control);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 500 var(--fs-14)/1 var(--face-ui); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
a.btn { text-decoration: none; }   /* a link drawn as a button reads as a button */
/* by meaning: green moves the work forward, red removes, rejects or reverses (and asks first).
   Draft keeps the work without committing it: a grey outline with a darker edge (decision 028).
   Plain .btn is everything else. */
.btn-positive { background: var(--positive); border-color: var(--positive); color: var(--on-positive); }
.btn-positive:hover { background: var(--positive-hover); border-color: var(--positive-hover); }
.btn-draft { background: var(--draft); border-color: var(--draft-edge); color: var(--on-draft); font-weight: 600; }
.btn-draft:hover { background: var(--draft-hover); }
.btn-negative { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn-negative:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { min-height: 28px; padding: 0 var(--s-12); font-size: var(--fs-13); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.kbd { font: 500 var(--fs-12)/1 var(--face-code); padding: 2px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-2); background: var(--surface); }

/* ---- status pills — shape and words, never colour alone ------------------------------------ */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font: 600 var(--fs-12)/1 var(--face-ui); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-idle   { color: var(--idle-ink); background: var(--idle-wash); }
.pill-info   { color: var(--info-ink); background: var(--info-wash); }
.pill-good   { color: var(--good-ink); background: var(--good-wash); }
.pill-warn   { color: var(--warn-ink); background: var(--warn-wash); }
.pill-crit   { color: var(--red-ink);  background: var(--red-wash); }
.pill-crit::before { border-radius: 1px; transform: rotate(45deg); }

/* ---- forms -------------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-16); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; align-content: start; }
.field label, .field .field-label { font: 500 var(--fs-13)/1.2 var(--face-ui); color: var(--ink-2); }
.field label .req, .field .field-label .req { color: var(--red-ink); margin-left: 2px; }
.input, .select { width: 100%; min-height: 36px; padding: 0 var(--s-12); border-radius: var(--radius-control);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 400 var(--fs-14)/1.2 var(--face-ui); }
.input, .select { min-width: 0; }   /* a field's column may narrow to the screen; nothing in it widens it */
/* iOS draws a date box as its own control: it keeps its own width over the page's, so on an iPhone it ran past the
   edge of its field (Krishi, iPhone, 14 Oct), and it centres the date. Drawn as a plain box there, it fills the field
   like every other and the date sits at the left. Only iOS: elsewhere the browser's own date box already fits. */
@supports (-webkit-touch-callout: none) {
  input.input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { -webkit-appearance: none; appearance: none; }
  input.input::-webkit-date-and-time-value { text-align: left; margin: 0; }
}
.input::placeholder { color: var(--ink-3); }
.input:focus-visible, .select:focus-visible { border-color: var(--red); }
/* A file box: the browser's own button drawn as ours. It was a light-grey system button in a text box, in neither theme's
   colours or face (Krishi, 29 Oct, on the schedule upload); the BOM and shipment-paper boxes had the same. */
input.input[type="file"] { padding: var(--s-4); line-height: 26px; cursor: pointer; }
input.input[type="file"]::file-selector-button { height: 28px; margin: 0 var(--s-12) 0 0; padding: 0 var(--s-12); border-radius: var(--radius-control);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: 500 var(--fs-13)/1 var(--face-ui); cursor: pointer; }
input.input[type="file"]:hover::file-selector-button { border-color: var(--ink-3); }
input.input[type="file"]:disabled { cursor: default; }
.input.code { font-family: var(--face-code); text-transform: uppercase; }
.input[readonly] { background: var(--surface-2); color: var(--ink-2); cursor: default; }   /* shown, not typed: says where it comes from in its hint */
.field .hint { font-size: var(--fs-12); color: var(--ink-3); }
.field .error { font-size: var(--fs-13); color: var(--red-ink); display: flex; gap: 6px; }
.field[data-invalid="true"] .input { border-color: var(--red-ink); background: var(--red-wash); }
.switch { display: inline-flex; align-items: center; gap: var(--s-8); cursor: pointer; font-weight: 500; }
.switch input { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); position: relative; margin: 0; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.switch input:checked { background: var(--red); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:disabled, .switch:has(input:disabled) { cursor: default; }
.switch input:disabled { opacity: .55; }   /* on or off, a switch that cannot be changed says so */
.savebar { position: sticky; bottom: 0; z-index: 7; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-8);
  margin: var(--s-16) calc(-1 * var(--s-16)) calc(-1 * var(--s-16)); padding: var(--s-12) var(--s-16) calc(var(--s-12) + var(--safe-bottom));
  background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.savebar .savebar-note { margin-right: auto; color: var(--ink-3); font-size: var(--fs-13); }
/* A page with a save bar fills the screen and ends AT the bar, so the bar always sits on the bottom
   edge and nothing above it can move it. It used to end below it: leaving a field showed its
   message, the bar slid 25px down between a tap landing and the click, and Save did nothing. */
.page:has(> form > .savebar) { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 0; }
.page > form:has(> .savebar) { flex: 1 0 auto; display: flex; flex-direction: column;
  border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.page > form > .savebar { margin-top: auto; border-radius: 0; }

/* ---- search ------------------------------------------------------------------------------- */
.search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); margin-bottom: var(--s-12); }
.search-box { position: relative; flex: 1 1 280px; max-width: 520px; }
.search-box svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.search-box .input { padding-left: 34px; padding-right: 34px; }
.search-clear { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-3); border-radius: 4px; cursor: pointer; font-size: 18px; line-height: 1; }
.search-clear:hover { background: var(--surface-2); color: var(--ink); }
.search-meta { font-size: var(--fs-13); color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 500 var(--fs-13)/1 var(--face-ui); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }

/* ---- tables ------------------------------------------------------------------------------- */
.table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
table.data th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left;
  font: 600 var(--fs-12)/1.2 var(--face-ui); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3);
  height: var(--row-h); padding: 0 var(--s-12); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.data th.num { text-align: right; white-space: normal; line-height: 1.25; }   /* a long heading over short figures breaks rather than widening the table past its frame (29 Oct) */
table.data th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
table.data th button:focus-visible { box-shadow: var(--focus-ring); border-radius: 3px; }
table.data th[aria-sort="ascending"] button::after { content: "▲"; font-size: 9px; color: var(--ink); }
table.data th[aria-sort="descending"] button::after { content: "▼"; font-size: 9px; color: var(--ink); }
table.data td { height: var(--row-h); padding: 0 var(--s-12); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data td.wrap { white-space: normal; min-width: 180px; }
table.data td.dsp-items { white-space: normal; min-width: 80px; }   /* Status: lines, then cartons beneath (097) */
table.data tfoot td { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 600; }
.table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8); padding: var(--s-8) var(--s-4) 0; font-size: var(--fs-13); color: var(--ink-2); }

/* below tablet, rows become cards — same data, same order, nothing hidden */
.cards { display: none; gap: var(--s-8); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--s-12); display: grid; gap: 6px; }
.card-top { display: flex; justify-content: space-between; gap: var(--s-8); align-items: center; }
.card-row { display: flex; justify-content: space-between; gap: var(--s-8); font-size: var(--fs-13); color: var(--ink-2); }
@media screen and (max-width: 767px) {   /* screen only: printed, a list is always its table */
  .table-wrap.responsive, .so-table-frame.responsive { display: none; }
  .cards.responsive { display: grid; }
}
.row-card-fig { display: grid; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; text-align: right; }
.row-card-k, .row-card-dl dt { font-size: var(--fs-12); color: var(--ink-3); }
.row-card-dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-12); font-size: var(--fs-13); }
.row-card-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .panel > .row-card-dl { max-width: 560px; } }   /* a panel's facts read label to value, not across the screen */
.card-total { border-color: var(--line-strong); background: var(--surface-2); }

/* ---- states: empty, loading, failed, filtered -------------------------------------------- */
.state { display: grid; justify-items: start; gap: var(--s-8); padding: var(--s-24); min-height: 160px; align-content: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-panel); background: var(--surface); }
.state h4 { margin: 0; font: 600 var(--fs-14)/1.3 var(--face-ui); }
.state p { margin: 0; color: var(--ink-2); max-width: 46ch; font-size: var(--fs-13); }
.state.failed { border-style: solid; border-color: var(--red-ink); background: var(--red-wash); }
.state.failed h4 { color: var(--red-ink); }
.skeleton { height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- figures that are the point (Home only) ----------------------------------------------- */
.kpi { display: grid; gap: var(--s-4); }
.kpi-label { font-size: var(--fs-13); color: var(--ink-2); }
.kpi-value { font: 600 var(--fs-28)/1.1 var(--face-display); font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: var(--fs-13); }
.kpi-delta.up { color: var(--good-ink); }
.kpi-delta.down { color: var(--red-ink); }

/* ---- charts ------------------------------------------------------------------------------- */
.chart { position: relative; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--ink-3); font: 400 11px var(--face-ui); font-variant-numeric: tabular-nums; }
.chart .grid line { stroke: var(--chart-grid); }
.chart .axis line { stroke: var(--chart-axis); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); margin: 0 0 var(--s-12); padding: 0; list-style: none; font-size: var(--fs-13); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; }
.tooltip { position: absolute; pointer-events: none; z-index: 5; min-width: 180px; padding: var(--s-8) var(--s-12);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); font-size: var(--fs-13); }
.tooltip .t-head { font-weight: 600; margin-bottom: 4px; }
.tooltip .t-row { display: flex; justify-content: space-between; gap: var(--s-12); }
.tooltip .t-row span:first-child { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.tooltip i { width: 8px; height: 8px; border-radius: 2px; }
.seg { display: inline-flex; flex: none; max-width: 100%; justify-self: start; border: 1px solid var(--line-strong); border-radius: var(--radius-control); overflow: hidden; }
.seg button { border: 0; background: var(--surface); color: var(--ink-2); padding: 0 var(--s-12); min-height: 28px; font: 500 var(--fs-13)/1 var(--face-ui); white-space: nowrap; cursor: pointer; }
/* A phone: choices that do not fit side by side wrap as separate chips, never squeezed to a word a line or cut (19 Oct). */
@media (max-width: 767px) {
  .seg:not(.full):not(.ci-tabs) { flex-wrap: wrap; gap: var(--s-4); border: 0; border-radius: 0; overflow: visible; }
  .seg:not(.full):not(.ci-tabs) button, .seg:not(.full):not(.ci-tabs) button + button { border: 1px solid var(--line-strong); border-radius: var(--radius-control); min-height: 36px; }
}
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* ---- feedback ----------------------------------------------------------------------------- */
.banner { display: flex; gap: var(--s-12); align-items: flex-start; padding: var(--s-12) var(--s-16); border-radius: var(--radius-panel); border: 1px solid; font-size: var(--fs-14); }
.banner strong { display: block; }
.banner-info { color: var(--info-ink); background: var(--info-wash); border-color: color-mix(in srgb, var(--info-ink) 30%, transparent); }
.banner-warn { color: var(--warn-ink); background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn-ink) 30%, transparent); }
.banner-crit { color: var(--red-ink);  background: var(--red-wash);  border-color: color-mix(in srgb, var(--red-ink) 30%, transparent); }
.banner p { margin: 2px 0 0; color: var(--ink-2); }
.banner.test-period { margin-bottom: var(--s-16); }
.toasts { position: fixed; z-index: 50; right: var(--s-16); bottom: calc(var(--s-16) + var(--safe-bottom)); display: grid; gap: var(--s-8); }
.toast { min-width: 240px; max-width: 360px; padding: var(--s-12) var(--s-16); border-radius: var(--radius-panel); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-overlay); font-size: var(--fs-14); }
/* A box taller than the screen (a phone, a long form) scrolls with its backdrop: centred while it fits, from
   the top once it does not. place-items: center alone pushed the top and the buttons off a phone, unreachable. */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(10, 11, 12, 0.45); display: grid; place-items: start center; overflow-y: auto;
  padding: calc(var(--s-16) + var(--safe-top)) var(--s-16) calc(var(--s-16) + var(--safe-bottom)); overscroll-behavior: contain; }
.dialog { margin-block: auto; width: min(440px, 100%); background: var(--surface); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); padding: var(--s-24); display: grid; gap: var(--s-16); }
.dialog h3 { margin: 0; font: 600 var(--fs-20)/1.25 var(--face-ui); }
.dialog p { margin: 0; color: var(--ink-2); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-8); }
.dialog-wide { width: min(640px, 100%); }
/* What waits for a department's owner, in the pop-up on that module's dashboard (Krishi, 31 Oct): a group a kind, a row a decision */
.bw-group h4 { margin: 0 0 var(--s-8); font: 600 var(--fs-12)/1.3 var(--face-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.bw-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.bw-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); padding: var(--s-12); border: 1px solid var(--line); border-radius: var(--radius-control); flex-wrap: wrap; }
.bw-what { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.bw-what .pill { justify-self: start; margin-bottom: 2px; }
.bw-detail { font-size: var(--fs-13); }
.bw-acts { display: flex; gap: var(--s-8); flex-wrap: wrap; align-items: center; }
.bw-why { display: flex; gap: var(--s-8); flex: 1 1 100%; flex-wrap: wrap; }
.bw-why .input { flex: 1 1 220px; }
.bw-chip .pill { margin-right: var(--s-4); }

/* a jump to a section lands below the sticky top bar, not under it */
.page [id] { scroll-margin-top: calc(60px + var(--s-16)); }

/* search: "Did you mean …" — offered when a search finds nothing and a close spelling would */
.did-you-mean { font-size: var(--fs-14); color: var(--ink-2); }
.did-you-mean button { all: unset; cursor: pointer; color: var(--info-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.did-you-mean button:focus-visible { box-shadow: var(--focus-ring); border-radius: 2px; }

/* ---- sign-in: one card on the ground, the brand above it. Every gate screen is drawn with it. ---- */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s-24) var(--s-16); background: var(--canvas); }
.gate-loading { color: var(--ink-3); }
.gate-card { width: min(420px, 100%); display: grid; gap: var(--s-16); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: var(--s-24); }
.gate-brand { display: flex; justify-content: center; }
.gate-logo { height: 48px; width: auto; display: block; }
.gate-card h1 { margin: 0; font: 600 var(--fs-28)/1.15 var(--face-display); text-wrap: balance; text-align: center; }
.gate-card p { margin: 0; color: var(--ink-2); }
.gate-card form { display: grid; gap: var(--s-12); }
.gate-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; color: var(--ink-2); font-size: var(--fs-14); }
.gate-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); flex-wrap: wrap; font-size: var(--fs-13); color: var(--ink-3); }
.qr { justify-self: center; width: 208px; height: 208px; padding: 8px; background: var(--qr-ground); border: 1px solid var(--line); border-radius: var(--radius-control); }
.qr img { width: 100%; height: 100%; display: block; }
.secret { font: 500 var(--fs-16)/1.5 var(--face-code); letter-spacing: 0.04em; word-break: break-all; padding: var(--s-8) var(--s-12);
  background: var(--surface-2); border-radius: var(--radius-control); user-select: all; }
.code-input { font: 600 var(--fs-28)/1 var(--face-code); letter-spacing: 0.3em; text-align: center; min-height: 52px; }
.link-btn { all: unset; cursor: pointer; color: var(--info-ink); text-decoration: underline; text-underline-offset: 2px; }
.link-btn:focus-visible { box-shadow: var(--focus-ring); border-radius: 2px; }
.textarea { width: 100%; min-height: 72px; padding: var(--s-8) var(--s-12); border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.textarea:focus-visible { outline: none; border-color: var(--red); box-shadow: var(--focus-ring); }
.temp-password { font: 600 var(--fs-28)/1.2 var(--face-code); letter-spacing: 0.04em; text-align: center; padding: var(--s-12);
  background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-control); user-select: all; }
.checks { display: grid; gap: 6px; }
.checks label { display: flex; gap: var(--s-8); align-items: center; font-size: var(--fs-14); color: var(--ink); }


/* a long form in one panel: sections divided by hairlines, the save bar stuck to the bottom */
.form-section { display: grid; gap: var(--s-12); padding-block: var(--s-16); border-top: 1px solid var(--line); }
.form-section:first-of-type { border-top: 0; padding-top: 0; }
.company-form > .banner { margin-bottom: var(--s-16); }
.form-section-head { display: grid; gap: 2px; }
.form-section-head .sub-title { margin: 0; }
.form-section-head .muted { margin: 0; font-size: var(--fs-13); }
.derived { min-height: 36px; display: flex; align-items: center; color: var(--ink-2); }

/* ---- settings: one row per setting, words left, its control right (stage 3b) ------------- */
.settings { display: grid; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8) var(--s-24); align-items: center;
  padding-block: var(--s-16); border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; padding-top: 0; }
.setting:last-child { padding-bottom: 0; }
.setting-text { display: grid; gap: 4px; min-width: 0; }
.setting-text .sub-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); margin: 0; }
.setting-text p { margin: 0; color: var(--ink-2); max-width: 68ch; }
.setting-text .when { font-size: var(--fs-12); color: var(--ink-3); }
.setting-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.setting-control .select { width: auto; min-width: 9rem; }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.log-list li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-12); font-size: var(--fs-13); }
.log-list time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- a person: their photo or initials (decorative; the name is always beside it) -------- */
.avatar-face { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%;
  background: var(--ink); color: var(--surface); font: 600 var(--fs-13)/1 var(--face-ui); letter-spacing: 0.02em; user-select: none; }
.avatar-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 88px; height: 88px; font-size: var(--fs-28); }
.icon-btn.avatar { padding: 0; overflow: hidden; }
.icon-btn.avatar .avatar-face { width: 100%; height: 100%; }

/* ---- My profile: who you are on top, then sections of rows (settings) --------------------- */
.profile { display: grid; gap: var(--s-24); max-width: 880px; }
.profile-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16) var(--s-24); }
.profile-id { display: grid; gap: var(--s-4); min-width: 0; flex: 1 1 16rem; }
.profile-name { margin: 0; font: 600 var(--fs-20)/1.25 var(--face-display); }
.profile-designation { margin: 0; color: var(--ink-2); }
.profile-id .hint { font-size: var(--fs-12); color: var(--ink-3); }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-8); }
.profile-section > .sub-title { margin-bottom: var(--s-8); }
.setting-wide { grid-column: 1 / -1; display: grid; gap: var(--s-8); max-width: 480px; }
.setting-wide > .btn-ghost { justify-self: start; }
.phone-form { align-items: flex-start; }

/* ---- Locations (stage 3c): the ordered list, ↑ ↓ beside each place ------------------------- */
ul.settings, ol.settings { list-style: none; margin: 0; }
.loc-page { display: grid; gap: var(--s-24); max-width: 1040px; }
.loc-area { display: grid; gap: var(--s-8); }
.loc-area-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8) var(--s-24); align-items: center;
  padding-bottom: var(--s-12); border-bottom: 1px solid var(--line-strong); }
.loc-area-head .sub-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); margin: 0; font-size: var(--fs-16); }
.loc-area-head p { margin: 0; color: var(--ink-2); }
.loc-area .loc-list { padding: 0; }
.loc-area .loc-list > .setting:first-child { padding-top: var(--s-8); border-top: 0; }
.loc-retired .sub-title, .loc-retired p { color: var(--ink-3); }
.loc-empty { margin: 0; padding-top: var(--s-8); }
.loc-move { display: inline-flex; gap: var(--s-4); }
.loc-move .btn { min-width: 32px; padding: 0; justify-content: center; }
/* ---- Tax (stage 3e): HSN codes, each with its rates newest first --------------------------- */
.tax-page { display: grid; gap: var(--s-24); max-width: 1040px; }
.tax-page .sub-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.tax-retired .sub-title, .tax-retired p { color: var(--ink-3); }
.tax-history { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-8); }
.tax-history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.tax-history .tax-withdrawn { color: var(--ink-3); text-decoration: line-through; }
.phone-form .field { width: 15rem; max-width: 100%; }
.phone-form > .banner { flex-basis: 100%; }
.phone-input { display: flex; }
.phone-cc { display: inline-flex; align-items: center; padding: 0 var(--s-12); border: 1px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius-control) 0 0 var(--radius-control); background: var(--surface-2); color: var(--ink-2);
  font: 500 var(--fs-14)/1 var(--face-ui); font-variant-numeric: tabular-nums; }
.phone-input .input { border-radius: 0 var(--radius-control) var(--radius-control) 0; font-variant-numeric: tabular-nums; }

/* ---- the keyboard (decision 008): keycaps, the shortcut list, the menu letters, the skip link -- */
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink-2); font: 500 var(--fs-12)/1 var(--face-code); }
.chord { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.kbd-hint { display: inline-flex; gap: 6px; align-items: center; margin-left: var(--s-8); color: var(--ink-3); }
.kbd-tip { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px;
  background: var(--ink); color: var(--surface); font: 600 var(--fs-12)/1 var(--face-code); text-transform: uppercase; }
.subnav .kbd-tip { background: var(--rail-ink); color: var(--rail-bg); margin-right: var(--s-8); }
.shortcuts { display: grid; gap: var(--s-8); }
.shortcuts + .shortcuts { margin-top: var(--s-16); }
.shortcuts h4 { margin: 0; }
.shortcuts dl { margin: 0; display: grid; gap: var(--s-8); }
.shortcuts dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-12); align-items: baseline; }
.shortcuts dt { white-space: nowrap; }
.shortcuts dd { margin: 0; color: var(--ink-2); font-size: var(--fs-14); }
.shortcuts .or { color: var(--ink-3); font-size: var(--fs-12); }
.skip-link { position: absolute; left: var(--s-8); top: var(--s-8); z-index: 60; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.page:focus, .page:focus-visible { outline: none; box-shadow: none; border-radius: 0; }   /* a landing point for Tab, not a control */

/* ---- phones: a phone zooms the whole page into any input set below 16px and leaves it zoomed.
   Last in the file so it outranks every control's own font rule above. */
@media (max-width: 767px) {
  .input:not(.code-input), .select, .textarea { font-size: 16px; }
  .kbd-hint { display: none; }
  .setting { grid-template-columns: minmax(0, 1fr); }
  .loc-area-head { grid-template-columns: minmax(0, 1fr); }
  .log-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .shortcuts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .savebar .savebar-note { flex-basis: 100%; }
  .savebar .btn { flex: 1 1 0; }
  .phone-form, .phone-form .field { width: 100%; }
  .phone-form .phone-input { flex: 1; }
  .phone-form > .btn { flex: 1 1 100%; }
  .profile-card { justify-content: center; text-align: center; }
  .profile-photo-actions { justify-content: center; }
  .setting-control > span { overflow-wrap: anywhere; }
}

/* A problem reported from inside the app (decision 022): the screenshot's drop zone, the picture once
   attached, and what is sent with a report, shown before it is sent. */
.shot-zone { display: grid; gap: var(--s-8); justify-items: start; padding: var(--s-16); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-panel); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-13); }
.shot-zone[data-invalid="true"] { border-color: var(--red-ink); }
.shot-img { display: block; max-width: 100%; max-height: 320px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.sent-with { font-size: var(--fs-13); color: var(--ink-2); }
.sent-with summary { cursor: pointer; }
.sent-with dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-4) var(--s-12); margin: var(--s-8) 0 0; }
.sent-with dt { color: var(--ink-3); }
.sent-with dd { margin: 0; overflow-wrap: anywhere; font-family: var(--face-code); }

/* ---- the sales order (stage 5, decisions 027 and 029): one scrolling form, its total and buttons on the bar ---- */
.so-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-16); }
.pick { display: flex; align-items: center; gap: var(--s-8); width: 100%; min-height: 48px; padding: var(--s-8) var(--s-12); text-align: left;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--ink); font: inherit; cursor: pointer; }
@media (min-width: 768px) { .pick { min-height: 36px; padding-block: var(--s-4); } }   /* level with the boxes beside it; it grows for a second line */
.pick:hover:not(:disabled) { background: var(--surface-2); }
.pick:disabled { background: var(--surface-2); cursor: default; }
.pick svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.pick-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pick-main strong { font-weight: 600; }
.pick-sub { font-size: var(--fs-12); color: var(--ink-3); }
.seg.full { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-self: stretch; }
.seg.full button { min-height: 40px; }
.so-lines { display: grid; gap: var(--s-12); }
.so-line { display: grid; gap: var(--s-8); padding: var(--s-12); border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.so-line-head { display: flex; align-items: flex-start; gap: var(--s-8); }
.so-line-no { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--idle-wash);
  font-size: var(--fs-12); font-weight: 600; }
.so-line-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.so-line-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
/* the count gets the room: a five-figure count shows whole while it is typed, on the narrowest phone (Krishi, 15 Oct) */
.so-line-pair.so-line-count { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.so-line-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8); padding-top: var(--s-8);
  border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.so-line-foot .note { font-size: var(--fs-12); color: var(--ink-3); }
.so-line-foot .note.changed { color: var(--warn-ink); }
.stepper { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-control); overflow: hidden; background: var(--surface); }
.stepper button { flex: none; width: 44px; min-height: 40px; border: 0; background: var(--surface-2); color: var(--ink); font-size: var(--fs-16); cursor: pointer; }
.stepper button:disabled { cursor: default; color: var(--ink-3); }
.stepper .input { border: 0; border-radius: 0; text-align: center; min-width: 0; padding-inline: 4px; font-variant-numeric: tabular-nums; }
.computed { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--s-12); background: var(--surface-2);
  border-radius: var(--radius-control); font-weight: 600; font-variant-numeric: tabular-nums; }
.field.changed .input { border-color: var(--warn-ink); background: var(--warn-wash); }
.add-line { min-height: 48px; border: 1px dashed var(--line-strong); background: transparent; border-radius: var(--radius-panel); color: var(--ink-2);
  font: 600 var(--fs-14)/1 var(--face-ui); cursor: pointer; }
.add-line:hover { background: var(--surface-2); color: var(--ink); }
.totals { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; column-gap: var(--s-12); font-variant-numeric: tabular-nums; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; text-align: right; }
.totals .sum { font-weight: 600; color: var(--ink); padding-top: 6px; border-top: 1px solid var(--line); }
.totals .grand { font-size: var(--fs-20); font-weight: 600; color: var(--ink); padding-top: var(--s-8); border-top: 1px solid var(--line-strong); }
.savebar .savebar-total { margin-right: auto; display: grid; gap: 2px; }
.savebar .savebar-total b { font-size: var(--fs-20); font-variant-numeric: tabular-nums; }
.savebar .savebar-total span { font-size: var(--fs-13); color: var(--ink-3); }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: min(55vh, 460px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); }
.pick-list li + li { border-top: 1px solid var(--line); }
.pick-list button { all: unset; box-sizing: border-box; display: flex; gap: var(--s-12); align-items: center; width: 100%; min-height: 56px;
  padding: var(--s-8) var(--s-12); cursor: pointer; }
.pick-list button:hover, .pick-list button:focus-visible { background: var(--surface-2); }
table.data > tbody > tr:focus-within { background: var(--surface-2); }   /* the row the arrows are on (keyboard.tsx) */
.pick-list .price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A laptop lays each line out in two rows: the item and its pack; then how many, the sets, the rate, the discount and its
   value, each wide enough for what it holds. (One row of five squeezed the packs box to nothing between its buttons.) */
/* Only an order's own lines: the receipt, bill, note, payment and return cards (.rc-line) borrow the card's look, not
   this grid, which put each of their parts in a column of its own (29 Oct: "UI IS A MESS", the over-delivery card). */
@media (min-width: 1100px) {
  .so-line:not(.rc-line) { grid-template-columns: minmax(160px, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(150px, 1.1fr); align-items: end; column-gap: var(--s-12); }
  .so-line:not(.rc-line) > .so-line-head { grid-column: 1 / span 2; align-self: center; }
  .so-line:not(.rc-line) > .seg { grid-column: 3 / span 3; align-self: center; }
  .so-line:not(.rc-line) > .so-line-pair { display: contents; }
  .so-line:not(.rc-line) > .so-line-foot { border-top: 0; padding-top: 0; flex-direction: column; align-items: flex-end; gap: 2px; align-self: center; }
  .so-line:not(.rc-line) .input { min-height: 40px; }   /* as tall as the stepper beside it, so the labels line up */
  .so-line:not(.rc-line) > .so-line-remark { grid-column: 1 / -1; order: 1; }   /* a line's remark: its own row under the line, after the value (Vinit, 6 Nov) */
}
/* the discounts, and beside them the totals in a box of their own; terms beside the customer's PO */
@media (min-width: 900px) {
  .so-sum { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); column-gap: var(--s-32); align-items: start; }
  .so-sum > .form-section-head { grid-column: 1 / -1; }
  .so-sum > .totals { padding: var(--s-16); background: var(--surface-2); border-radius: var(--radius-panel); }
  .so-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-32); border-top: 1px solid var(--line); }
  .so-two > .form-section { border-top: 0; padding-top: var(--s-16); align-content: start; }
  .so-two > .form-section > .form-section-head { min-height: 36px; align-content: center; }   /* both headings on one line, button or none */
}
@media (max-width: 899px) {
  .so-sum > .totals { margin-top: var(--s-4); }
  .so-two > .form-section:first-child { border-top: 1px solid var(--line); padding-top: var(--s-16); }
}
@media (max-width: 767px) {
  .savebar .savebar-total { flex-basis: 100%; grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
}

/* New sales order: Domestic or Export (032). Two large choices, one under the other on a phone, side by side on a laptop. */
.choose { display: grid; gap: var(--s-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); max-width: 760px; }
.choose-card { display: flex; gap: var(--s-12); padding: var(--s-16); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel); color: inherit; text-decoration: none; min-height: 44px; }
.choose-card:hover { border-color: var(--red); }
.choose-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.choose-mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-panel);
  background: var(--good-wash); color: var(--good-ink); font-weight: 600; font-size: var(--fs-20); }
.choose-mark.export { background: var(--info-wash); color: var(--info-ink); }
.choose-text { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.choose-text strong { font-size: var(--fs-16); }
/* An order's terms, numbered as they print. */
ol.terms { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s-8); max-width: 70ch; }
/* Setup › Order terms: each term editable where it stands, with its tools beside it. */
ol.term-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-8); max-width: 820px; }
.term-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-8); align-items: start; }
.term-no { padding-top: 10px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.term-tools { display: flex; gap: var(--s-4); }
@media (max-width: 599px) { .term-row { grid-template-columns: 22px minmax(0, 1fr); } .term-tools { grid-column: 2; justify-content: flex-end; } }
.choose-mark.upload { background: var(--surface-2); color: var(--ink-2); }
.choose-card.upload { border-style: dashed; }
/* Sales › New sales order › Upload a schedule (033) */
.sched-summary { margin: var(--s-16) 0 var(--s-8); font-weight: 600; font-variant-numeric: tabular-nums; }
.sched-block { margin-top: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); }
.sched-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-12); align-items: center;
  padding-top: var(--s-12); border-top: 1px solid var(--line); }
.sched-row-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sched-block > .sub-title, .sched-block > p { margin: 0; }
.sched-row-pick { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.sched-row-pick > .input, .sched-row-pick > .select { flex: 1 1 180px; min-width: 0; }
.sched-row-pick > .btn { flex: 0 0 auto; }
.sched-orders { margin-top: var(--s-16); display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sched-order { display: flex; flex-direction: column; gap: var(--s-4); }
.sched-changes, .sched-problems { margin: var(--s-4) 0 0; padding-left: 1.2em; font-size: var(--fs-13); }
/* Database › Made of (4f): what bringing in the workbook will do, the rows it leaves, a product's bills before */
.bom-block { margin-top: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); }
.bom-block > .sub-title, .bom-block > p { margin: 0; }
.bom-list { margin: 0; padding-left: 1.2em; }
@media (max-width: 699px) { .sched-row { grid-template-columns: minmax(0, 1fr); } .sched-row-pick > .btn { flex: 1 1 100%; } }

/* Dispatch (stage 7, 035). Where it goes as label and value; the three stages it passes, in order, the reached ones
   filled; a plan's lines as an order's, two to a row on a laptop; an order's dispatches above its page. */
.dsp-goes { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s-16); }
@media (min-width: 768px) {   /* one strip: bill to, ship to and address side by side, each label over its value */
  .dsp-goes { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px var(--s-24); }
}
.dsp-goes dt { color: var(--ink-3); font-size: var(--fs-13); }
.dsp-goes dd { margin: 0; display: grid; gap: 2px; min-width: 0; }
.dsp-order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-8); }
.dsp-stages { list-style: none; margin: 0 0 var(--s-16); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-8); }
.dsp-stages li { display: flex; gap: var(--s-8); align-items: flex-start; padding-top: 2px; }
.dsp-stages li > span:last-child { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-13); }
.dsp-stages li > span:last-child .muted { font-size: var(--fs-12); }
.dsp-stage-mark { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--surface); }
.dsp-stages li.reached .dsp-stage-mark { border-color: var(--good-ink); background: var(--good-ink); }
/* four stages since 29 Oct (Invoice ready): two by two on a phone, so no stage's name is squeezed a word a line */
@media (max-width: 767px) { .dsp-stages { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-12); } }
.dsp-order { margin-bottom: var(--s-16); display: grid; gap: var(--s-12); }
.dsp-order-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-8); }
.dsp-order-top .sub-title { margin: 0; }
.dsp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); }

/* Planning by item (036), as the current ERP plans: the loads waiting for their vehicle; one row per item, ticked ready or
   counted; a scan box when scanning is on. A full row is washed green; a row just scanned flashes once. */
.dsp-waiting { margin-bottom: var(--s-16); display: grid; gap: var(--s-8); }
.dsp-waiting .sub-title { margin: 0; }
.dsp-waiting-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dsp-waiting-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8) var(--s-16);
  padding: var(--s-8) 0; border-top: 1px solid var(--line); }
.dsp-waiting-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-12); min-width: 0; }
.dsp-waiting-do { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.dsp-waiting-how { margin: 0; font-size: var(--fs-13); }
.dsp-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dsp-scan { margin-bottom: var(--s-16); display: grid; gap: var(--s-8); }
.dsp-scan-input { font-family: var(--face-code); font-size: var(--fs-20); min-height: 48px; }
.dsp-said { margin: 0; font-weight: 600; }
.dsp-said.ok { color: var(--good-ink); }
.dsp-said.bad { color: var(--red-ink); }
.dsp-pool { display: grid; gap: var(--s-8); }
.dsp-pool-head { display: none; }
.dsp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "item item" "pending ready" "count count";
  gap: var(--s-8) var(--s-12); align-items: center; padding: var(--s-12); border: 1px solid var(--line); border-radius: var(--radius-panel);
  background: var(--surface); }
.dsp-row.full { background: var(--good-wash); border-color: transparent; }
.dsp-row.hit { animation: dsp-hit 0.9s ease-out; }
@keyframes dsp-hit { from { box-shadow: 0 0 0 3px var(--good-ink); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .dsp-row.hit { animation: none; box-shadow: 0 0 0 2px var(--good-ink); } }
.dsp-row-item { grid-area: item; display: grid; gap: 2px; min-width: 0; }
.dsp-row-item .muted { font-size: var(--fs-12); }
.dsp-row-pending { grid-area: pending; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.dsp-row-pending .muted { font-size: var(--fs-12); }
.dsp-row-ready { grid-area: ready; display: inline-flex; align-items: center; gap: var(--s-8); min-height: 40px; font-weight: 600; cursor: pointer; }
.dsp-row-ready input { width: 20px; height: 20px; accent-color: var(--good-ink); }
.dsp-row-count { grid-area: count; margin: 0; }
.dsp-row-count .stepper .input { min-height: 40px; }
@media (min-width: 900px) {
  .dsp-pool-head, .dsp-row { grid-template-columns: minmax(0, 2.4fr) minmax(150px, 1fr) 96px minmax(150px, 1fr);
    grid-template-areas: "item pending ready count"; }   /* no sets beside a row (decision 097) */
  .dsp-pool-head { display: grid; gap: var(--s-12); padding: 0 var(--s-12); font-size: var(--fs-12); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--ink-3); }
  .dsp-row-pending .muted { display: none; }
}

/* ---- a sales order, as the current ERP shows it (19 Oct: "like the old UI"): its .so-detail-page and preview, ported card
   for card from renderSODetailPage and renderSOPreviewPage, on this design's colours and type. Printing is the PDF. */
.so-head-title { margin: 0 0 var(--s-4); font: 600 var(--fs-16)/1.3 var(--face-ui); color: var(--ink); }
.so-detail-page { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; max-width: 1100px; }
.so-print-header { display: flex; align-items: flex-start; gap: 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.so-print-header .ph-logo { flex-shrink: 0; width: 96px; height: auto; display: block; }
.so-print-header .ph-info { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.so-print-header .co-name { font: 500 18px/1.3 var(--face-ui); color: var(--ink); margin-bottom: 3px; letter-spacing: -0.2px; }
.so-print-header .co-addr { margin-bottom: 4px; }
.so-print-header .co-meta { color: var(--ink-3); font-size: 11.5px; }
.so-print-header .co-meta strong, .so-order-head .co-meta strong { color: var(--ink-2); font-weight: 600; }
.so-print-header .sep, .so-order-head .sep { margin: 0 8px; color: var(--ink-3); }
.pt-doc-title { text-align: center; font: 700 17px/1.3 var(--face-display); letter-spacing: 0.03em; margin: 12px 0 2px; text-transform: uppercase; white-space: pre-wrap; }
.so-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.so-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.so-detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.so-detail-card h4 { font: 500 15px/1.3 var(--face-ui); letter-spacing: -0.2px; margin: 0 0 10px; color: var(--ink); }
.so-meta-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; font-size: 13px; line-height: 1.5; }
.so-meta-grid .k { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; align-self: center; }
.so-meta-grid .v { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.so-meta-grid .v.mono, .so-foot-grid .v.mono { font-family: var(--face-code); font-variant-numeric: tabular-nums; }
.so-meta-grid .v.plain { font-weight: 400; color: var(--ink-2); }
.so-buyer-name { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.so-ship-to { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.so-ship-k { font: 600 11px/1.3 var(--face-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 4px; }
.so-ship-note { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.so-table-frame { overflow-x: auto; }
.so-lines-table, .so-print-table, .so-hsn-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.so-lines-table th, .so-print-table th { text-align: left; padding: 9px 10px; background: var(--surface-2); font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); }
.so-lines-table th:first-child, .so-lines-table td:first-child, .so-print-table th:first-child, .so-print-table td:first-child { padding-left: 14px; }
.so-lines-table th:last-child, .so-lines-table td:last-child, .so-print-table th:last-child, .so-print-table td:last-child { padding-right: 14px; }
.so-lines-table td, .so-print-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.so-print-table tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; }
.so-lines-table .num, .so-print-table .num, .so-hsn-table .num { text-align: right; font-family: var(--face-code); font-variant-numeric: tabular-nums; }
.so-lines-table th.num, .so-print-table th.num, .so-hsn-table th.num { font-family: var(--face-ui); }
.so-lines-table td.mono { font-family: var(--face-code); font-size: 12px; color: var(--ink-2); }
.so-line-name { font-weight: 500; }
.pt-sku-line { font-family: var(--face-code); font-size: 12px; color: var(--ink-2); }
.so-narr, .so-preview-narr { color: var(--ink-3); }
.so-preview-sub { font-family: var(--face-code); font-size: 11px; color: var(--ink-3); }
.so-preview-narr { font-size: 11px; font-style: italic; }
.so-totals-grid { display: grid; grid-template-columns: 1fr max-content; gap: 5px 18px; font-size: 13.5px; margin-top: 6px; }
.so-totals-grid .k { color: var(--ink-2); }
.so-totals-grid .v { font-family: var(--face-code); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; font-weight: 500; }
.so-totals-grid .row-grand { padding-top: 8px; border-top: 1.5px solid var(--ink); margin-top: 4px; font-weight: 700; font-size: 15px; color: var(--ink); }
.so-words { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); font-style: italic; }
.so-hsn-table { font-size: 12.5px; }
.so-hsn-table th { text-align: left; padding: 7px 9px; background: var(--surface-2); font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); }
.so-hsn-table td { padding: 7px 9px; border-bottom: 1px solid var(--surface-2); }
.so-hsn-table td.mono { font-family: var(--face-code); font-size: 11.5px; }
.so-hsn-table tr.total td { font-weight: 600; border-top: 1px solid var(--ink); background: var(--surface-2); }
.so-chargeable { margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.so-chargeable-k { color: var(--ink-3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.so-chargeable strong { font-weight: 600; color: var(--ink); margin-left: 6px; }
.so-foot-grid { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 14px; }
.so-foot-grid.two-col { grid-template-columns: 1.6fr 1fr; }
.so-foot-grid .foot-block { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 13px 16px; font-size: 13px; line-height: 1.5; min-width: 0; }
.so-foot-grid .foot-block h5 { font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px; }
.so-foot-grid .foot-k { color: var(--ink-3); font-size: 11.5px; }
.so-foot-grid .v { color: var(--ink); font-weight: 500; }
.so-foot-grid .foot-block.sig { display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; }
.so-foot-grid .for-co { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.so-foot-grid .for-co strong { color: var(--ink); }
.so-foot-grid .sig-line { border-top: 1px solid var(--ink-3); padding-top: 5px; margin-top: auto; font-size: 11.5px; color: var(--ink-2); text-align: center; }
.pt-terms-text { white-space: pre-wrap; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.pt-terms-h { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; color: var(--ink-3); margin-bottom: 3px; }
.so-cg-note { text-align: center; font-size: 11px; color: var(--ink-3); font-style: italic; margin-top: 6px; padding: 8px 0; }
/* the preview before Submit: buyer and order strip, the lines, the totals box */
.so-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; }
.so-order-head .so-buyer { flex: 1; min-width: 240px; }
.so-order-head .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 3px; }
.so-order-head .so-buyer .co-name { font: 600 16px/1.3 var(--face-ui); color: var(--ink); margin-bottom: 2px; }
.so-order-head .so-buyer .co-addr { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 3px; }
.so-order-head .so-buyer .co-meta { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.so-order-meta { display: grid; grid-template-columns: max-content max-content; gap: 9px 22px; align-content: start; }
.so-order-meta > div { display: flex; flex-direction: column; gap: 1px; }
.so-order-meta > .wide { grid-column: 1 / -1; }
.so-order-meta .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.so-order-meta .v { font-size: 13px; color: var(--ink); font-weight: 500; }
.so-lines-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; }
.so-totals-wrap { max-width: 360px; width: 100%; margin-left: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; }
.so-preview-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-8);
  padding: var(--s-12) var(--s-16) calc(var(--s-12) + var(--safe-bottom)); background: var(--surface); border-top: 1px solid var(--line-strong); margin: 0 calc(-1 * var(--s-16)); }
.so-preview-bar .meta { color: var(--ink-2); font-size: var(--fs-13); }
.so-preview-bar .actions { display: flex; gap: var(--s-8); flex-wrap: wrap; }
@media (max-width: 880px) {
  .so-detail-grid, .so-foot-grid, .so-foot-grid.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .so-print-header { flex-direction: column; gap: 10px; }
  .so-detail-card .cards.responsive { margin-top: 4px; }
  .so-order-head .so-buyer { min-width: 0; }
  .so-order-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .so-lines-wrap { border: 0; background: none; padding: 0; }
  .so-totals-wrap { max-width: none; }
}
/* a change waiting for an owner, said line by line above the document */
.change-wait { display: grid; gap: var(--s-8); border-color: var(--warn-ink); background: var(--warn-wash); margin-bottom: var(--s-16); max-width: 960px; }
.change-wait .sub-title { margin: 0; }
.change-wait p { margin: 0; }
.change-list { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.change-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.change-back { margin: 0 0 var(--s-16); }
/* ---- receivables (decision 039): the ageing bar, and the statement alone on paper */
.rec-age { margin-bottom: var(--s-16); }
.rec-bar { display: flex; gap: 2px; height: 14px; margin: var(--s-8) 0 var(--s-12); }
.rec-bar i { display: block; height: 100%; min-width: 0; }
.rec-bar i:first-child { border-radius: 4px 0 0 4px; } .rec-bar i:last-child { border-radius: 0 4px 4px 0; }
.rec-bar .a1, .legend .a1 { background: var(--age-1); } .rec-bar .a2, .legend .a2 { background: var(--age-2); } .rec-bar .a3, .legend .a3 { background: var(--age-3); }
.rec-print { margin-bottom: var(--s-16); }
.rec-print-only { display: none; }
.rec-pay .ci-row-end { flex-wrap: wrap; justify-content: flex-end; }
@media print {
  .rec-print, .rec-print * { visibility: visible; }
  .rec-print { position: absolute; left: 0; top: 0; width: 100%; }
  .rec-print-only { display: block; }
  .rec-print tr { break-inside: avoid; }
}

/* ---- invoices (decision 038) */
.inv-pick { border: 0; padding: 0; margin: var(--s-12) 0 0; display: grid; gap: var(--s-8); }
.inv-pick .switch { align-items: center; gap: var(--s-8); }
.inv-totals { max-width: 420px; margin-left: auto; margin-top: var(--s-16); }
.inv-differs { color: var(--warn-ink); font-weight: 600; }

/* ---- the map behind check-ins (design 002): Setup › Maps draws the factory to prove the key */
.map-check { height: 260px; max-width: 640px; margin-top: var(--s-12); border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface-2); }

/* ---- Check-ins (design 002, decision 041): phone first; the rep's week, the shop list, the three photos */
.ci-tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s-4); }
.ci-tabs button { flex: none; white-space: nowrap; min-height: 32px; }
.ci-stack { display: grid; gap: var(--s-12); align-content: start; min-width: 0; }
.ci-stack > .page-head { margin-bottom: 0; }
.ci-wide { width: 100%; min-height: 44px; justify-content: center; }
.ci-week { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ci-day { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); padding: 6px 2px; text-align: center;
  display: grid; gap: 2px; font: inherit; }
button.ci-day { cursor: pointer; }
button.ci-day:disabled { cursor: default; opacity: 0.55; }
.ci-day b { font: 600 var(--fs-12)/1.2 var(--face-ui); }
.ci-day span { font-size: var(--fs-12); line-height: 1.2; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ci-day.done { border-color: var(--good); }
.ci-day.missed { border-color: var(--red-ink); background: var(--red-wash); }
.ci-day.missed span { color: var(--red-ink); }
.ci-day.today { border: 2px solid var(--ink); }
.ci-outbox { align-items: center; }
.ci-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-8); margin-top: var(--s-8); }
.ci-list-head .sub-title { margin: 0; }
.ci-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.ci-rows li + li { border-top: 1px solid var(--line); }
.ci-rows a, .ci-row { display: flex; gap: var(--s-12); align-items: center; min-height: 56px; padding: var(--s-8) var(--s-12); color: inherit; text-decoration: none; }
.ci-rows a:hover { background: var(--surface-2); }
.ci-row-end { display: grid; justify-items: end; gap: 2px; text-align: right; flex: none; }
.ci-form { display: grid; gap: var(--s-16); max-width: 720px; }
.ci-ctx { padding: var(--s-12); }
.ci-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-8) var(--s-16); font-size: var(--fs-13); }
.ci-dl dt { color: var(--ink-3); }
.ci-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; justify-items: start; }
.ci-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.ci-photo { position: relative; aspect-ratio: 3 / 4; margin: 0; border-radius: var(--radius-control); border: 1px dashed var(--line-strong); background: var(--surface);
  display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; font: 500 var(--fs-12)/1.3 var(--face-ui); color: var(--ink-2);
  overflow: hidden; cursor: pointer; }
.ci-photo:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.ci-photo.taken { border-style: solid; }
.ci-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ci-photos-lg { gap: var(--s-12); max-width: 960px; }
figure.ci-photo { cursor: default; }
.ci-cam { font-size: 20px; color: var(--ink); }
.ci-stamp { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; background: var(--ink); color: var(--surface); font: 500 var(--fs-12)/1.2 var(--face-ui); opacity: 0.86; }
.ci-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.ci-oline { display: grid; gap: var(--s-8); padding: var(--s-12); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.ci-q3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.ci-q3 label { display: grid; gap: 4px; font: 500 var(--fs-12)/1.2 var(--face-ui); color: var(--ink-3); }
.ci-q3 .input { text-align: right; font-variant-numeric: tabular-nums; }
.ci-sum { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-16); font-variant-numeric: tabular-nums; }
.ci-sum dt { color: var(--ink-3); }
.ci-sum dd { margin: 0; text-align: right; font-weight: 600; }
.ci-msg { display: grid; gap: var(--s-12); }
/* the numbered steps a person follows somewhere else, e.g. Google Cloud (decision 043) */
.steps-list { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; color: var(--ink-2); max-width: 72ch; }
.steps-list b { color: var(--ink); }
/* Start my day and End my day (decision 043) */
.ci-daymark { display: grid; gap: var(--s-8); }
.ci-daymark p { margin: 0; }
.ci-daymark-done { margin: 0; }
.ci-wa { margin: 0; padding: var(--s-12); white-space: pre-wrap; font: var(--fs-13)/1.5 var(--face-ui); color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius-control); }
.ci-weeknav { display: flex; align-items: center; gap: var(--s-8); }
.ci-kpis { margin-bottom: var(--s-12); }
.ci-kpis .panel { padding: var(--s-12); }
.ci-day-list td { background: var(--surface-2); }
.ci-day-list .ci-rows { margin: 4px 0; }
.ci-bars { display: grid; gap: var(--s-12); align-content: start; }
.ci-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-8); font-size: var(--fs-13); }
.ci-bars meter { grid-column: 1 / -1; width: 100%; height: 8px; }
/* the owner's week and a rep's day, simpler (decision 089): a box per rep per day, then a day's visits in order */
.ci-crit { color: var(--red-ink); }
.ci-grid-wrap { max-height: none; margin-bottom: var(--s-24); }
.ci-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.ci-grid th { font: 600 var(--fs-12)/1.2 var(--face-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: center; padding: var(--s-8) 4px; }
.ci-grid thead th:first-child, .ci-grid tbody th { text-align: left; padding-left: var(--s-16); }
.ci-grid tbody th { font: 600 var(--fs-14)/1.3 var(--face-ui); text-transform: none; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.ci-grid th.today { color: var(--ink); }
.ci-grid td { padding: 6px 4px; border-top: 1px solid var(--line); text-align: center; }
.ci-grid tbody th { border-top: 1px solid var(--line); }
.ci-grid .num { text-align: right; padding-right: var(--s-16); font-weight: 600; }
.ci-box { display: grid; place-items: center; min-width: 44px; height: 40px; border-radius: var(--radius-control); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: 600 var(--fs-16)/1 var(--face-ui); font-variant-numeric: tabular-nums; text-decoration: none; }
a.ci-box:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.ci-box.ok { border-color: var(--good); background: var(--good-wash); color: var(--good-ink); }
.ci-box.look { border-color: var(--warn-ink); background: var(--warn-wash); color: var(--warn-ink); }
.ci-box.none { border-color: var(--red-ink); background: var(--red-wash); color: var(--red-ink); }
.ci-box.off, .ci-box.ahead { border-style: dashed; background: transparent; color: var(--ink-3); font-weight: 500; }
.ci-key { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); align-items: center; padding: var(--s-12) var(--s-16); border-top: 1px solid var(--line); font-size: var(--fs-13); color: var(--ink-2); }
.ci-key span { display: inline-flex; align-items: center; gap: 6px; }
.ci-key i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.ci-key i.ok { border-color: var(--good); background: var(--good-wash); }
.ci-key i.look { border-color: var(--warn-ink); background: var(--warn-wash); }
.ci-key i.none { border-color: var(--red-ink); background: var(--red-wash); }
.ci-key i.off { border-style: dashed; border-color: var(--line-strong); }
.ci-repcard { gap: var(--s-8); }
.ci-repdays { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 4px; }
.ci-repdays > div { display: grid; gap: 2px; justify-items: stretch; text-align: center; font-size: var(--fs-12); color: var(--ink-3); min-width: 0; }
.ci-repdays .ci-box { min-width: 0; height: 40px; font-size: var(--fs-14); }
.ci-looks-head { margin-top: var(--s-8); }
.ci-looks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.ci-looks li { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-12); align-items: center; justify-content: space-between; padding: var(--s-12) var(--s-16); }
.ci-looks li + li { border-top: 1px solid var(--line); }
.ci-look-who { display: grid; gap: 2px; min-width: 0; }
.ci-look-who span { color: var(--ink-2); }
.ci-look-end { display: flex; gap: var(--s-8); align-items: center; }
.ci-daysum { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); padding: var(--s-12) var(--s-16); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); margin-bottom: var(--s-16); }
.ci-daysum > div { display: grid; gap: 2px; }
.ci-daysum b { font: 600 var(--fs-20)/1.1 var(--face-ui); font-variant-numeric: tabular-nums; }
.ci-daysum span { font-size: var(--fs-13); color: var(--ink-2); }
.ci-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.ci-tl-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-12); align-items: start; }
.ci-tl-time { font: 600 var(--fs-14)/1.2 var(--face-code); color: var(--ink-2); padding-top: var(--s-12); text-align: right; }
.ci-tl-mark { padding: var(--s-8) var(--s-12); color: var(--ink-3); font-size: var(--fs-13); border-left: 2px solid var(--line-strong); }
.ci-visit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--s-12) var(--s-16); display: grid; gap: var(--s-8); min-width: 0; }
.ci-visit.look { border-left: 3px solid var(--warn-ink); }
.ci-visit.missed { border-style: dashed; background: transparent; }
.ci-visit-top { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; justify-content: space-between; }
.ci-visit-shop { display: grid; gap: 2px; min-width: 0; }
.ci-visit-shop a { font: 600 var(--fs-16)/1.3 var(--face-ui); color: var(--ink); }
.ci-visit-shop span { color: var(--ink-2); font-size: var(--fs-13); }
.ci-visit-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-thumb { position: relative; width: 84px; height: 63px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; cursor: zoom-in;
  display: grid; place-items: center; font-size: var(--fs-12); color: var(--ink-3); }
.ci-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ci-thumb span { position: absolute; left: 0; right: 0; bottom: 0; font: 600 10px/1 var(--face-ui); color: var(--on-red); background: rgba(0, 0, 0, .5); padding: 3px 4px; text-align: left; }
.ci-thumb.none { cursor: default; border-style: dashed; background: transparent; text-align: center; padding: 4px; }
.ci-visit-order { display: grid; gap: 4px; font-size: var(--fs-13); color: var(--ink-2); }
.ci-visit-order b { color: var(--ink); }
.ci-visit-order ul { margin: 0; padding-left: 1.1em; }
.ci-visit-order .btn { justify-self: start; }
.ci-visit-note { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.ci-visit-map { justify-self: start; font-size: var(--fs-13); color: var(--ink-2); }
.ci-photo-big { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-control); background: var(--surface-2); }
.ci-cov { margin-bottom: var(--s-16); }
/* the rep's side, simpler (decision 090): Today's boxes and shops, one check-in screen, a plan that saves as you tap */
.ci-today-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-8); font-size: var(--fs-16); }
.ci-box.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.ci-go { min-height: 40px; flex: none; font-weight: 600; }
.ci-rows a.ci-go { color: var(--on-positive); min-height: 40px; padding: 0 var(--s-16); justify-content: center; }
.ci-rows a.ci-go:hover { background: var(--positive-hover); }
.ci-rows .ci-row .pick-main, .ci-rows a.ci-done .pick-main { flex: 1; min-width: 0; }
a.ci-done { background: var(--surface-2); }
.ci-loc { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; padding: var(--s-8) var(--s-12); border-radius: var(--radius-control);
  font-size: var(--fs-13); background: var(--surface-2); color: var(--ink-2); }
.ci-loc.good { background: var(--good-wash); color: var(--good-ink); }
.ci-loc.warn { background: var(--warn-wash); color: var(--warn-ink); }
.ci-step { display: flex; align-items: center; gap: var(--s-8); }
.ci-step i { font-style: normal; width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface);
  font: 600 var(--fs-12)/1 var(--face-ui); }
.ci-step i.done { background: var(--positive); color: var(--on-positive); }
.ci-outcome button { min-height: 48px; font-weight: 600; }
.ci-last { display: grid; gap: 6px; }
.ci-qty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); }
.ci-stepper { display: inline-grid; grid-template-columns: 44px 64px 44px; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-control); overflow: hidden; }
.ci-stepper button { border: 0; background: var(--surface-2); color: var(--ink); font: 600 20px/1 var(--face-ui); min-height: 44px; cursor: pointer; }
.ci-stepper .input { border: 0; border-radius: 0; text-align: center; font: 600 var(--fs-16)/1 var(--face-ui); font-variant-numeric: tabular-nums; min-height: 44px; }
.ci-q2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ci-addnote { justify-self: start; }
.ci-plan-status { margin: 0; min-height: 1.3em; font-size: var(--fs-13); color: var(--good-ink); }
.ci-plan-row { all: unset; box-sizing: border-box; display: flex; gap: var(--s-12); align-items: center; width: 100%; min-height: 56px; padding: var(--s-8) var(--s-12); cursor: pointer; }
.ci-plan-row:focus-visible { box-shadow: var(--focus-ring); }
.ci-plan-row[disabled] { opacity: .5; cursor: not-allowed; }
.ci-plan-row .pick-main { flex: 1; min-width: 0; }
.ci-tick { width: 28px; height: 28px; flex: none; border-radius: 8px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-weight: 700; color: var(--on-positive); }
.ci-tick.on { background: var(--positive); border-color: var(--positive); }
.ci-tabs + .page-head { margin-top: var(--s-12); }
@media (max-width: 760px) {
  .ci-week-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
  .ci-week-tiles .kpi-value { font-size: var(--fs-20); }
  .ci-week-tiles .kpi-delta { display: none; }
  .ci-tl-item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-8); }
  .ci-tl-time { font-size: var(--fs-12); }
  .ci-thumb { width: 72px; height: 54px; }
}
.ci-plain { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--fs-13); color: var(--ink-2); }
.ci-mapnote { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: baseline; padding: var(--s-12) var(--s-16); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-panel); color: var(--ink-2); font-size: var(--fs-13); margin-block: var(--s-12); }
.ci-map-panel { display: grid; gap: var(--s-8); margin-block: var(--s-12); }
.ci-map { width: 100%; height: min(60vh, 460px); border-radius: var(--radius-control); background: var(--surface-2); }
@media (max-width: 599px) { .ci-dl { grid-template-columns: minmax(0, 1fr); } .ci-dl dt { margin-top: var(--s-4); } .ci-weeknav strong { font-size: var(--fs-13); } }
.so-take-in { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--s-12); background: var(--surface); }
.so-take-in-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-12); margin-top: var(--s-8); }

/* ---- Dispatch calendar (7b): a month Monday to Sunday on a laptop or an iPad, a week of rows on a phone. Sunday shaded,
   today outlined in ink, the day pressed in red; a day's tags wrap inside it rather than spill out of a narrow column */
.dcal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8) var(--s-16); margin-bottom: var(--s-12); }
.dcal-bar .select { width: auto; }
.dcal-nav { display: flex; align-items: center; gap: var(--s-8); }
.dcal-nav .sub-title { margin: 0; min-width: 10em; text-align: center; font-size: var(--fs-16); }
.dcal-head, .dcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dcal-head { margin-bottom: 4px; }
.dcal-head abbr { padding: 0 6px; font: 600 var(--fs-12)/1.2 var(--face-ui); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); text-decoration: none; }
.dcal-grid, .dcal-week { list-style: none; margin: 0 0 var(--s-16); padding: 0; }
.dcal-grid { grid-auto-rows: minmax(96px, auto); }
.dcal-grid > li { display: grid; min-width: 0; }
.dcal-day { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 6px; border: 1px solid var(--line);
  border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dcal-day:hover { border-color: var(--line-strong); }
.dcal-day.sun { background: var(--surface-2); }
.dcal-day.today { border: 2px solid var(--ink); padding: 5px; }
.dcal-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--red); }   /* inside the outline, so today pressed shows both */
.dcal-date { font: 600 var(--fs-13)/1.2 var(--face-ui); font-variant-numeric: tabular-nums; }
.dcal-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.dcal-tags .pill { height: auto; min-height: 20px; max-width: 100%; padding: 2px 8px; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.dcal-value { color: var(--good-ink); font: 600 var(--fs-12)/1.2 var(--face-ui); font-variant-numeric: tabular-nums; }   /* breaks only at its commas */
.dcal-value.to-come { color: var(--info-ink); }   /* the receipt calendar: still to come that day (070) */
.dcal-filters { display: flex; flex-wrap: wrap; gap: var(--s-8); }
@media (min-width: 768px) and (max-width: 1099px) {   /* an iPad with the menu open: about 70 px a day */
  .dcal-day { padding: 4px; }
  .dcal-day.today { padding: 3px; }
  .dcal-tags .pill { padding: 2px 5px; }
  .dcal-tags .pill::before { display: none; }
}
.dcal-nav-week, .dcal-week { display: none; }
.dcal-list { display: grid; gap: var(--s-12); }
.dcal-list .sub-title { margin: 0; }
@media (max-width: 767px) {
  .dcal-nav-month, .dcal-month { display: none; }
  .dcal-nav-week { display: flex; }
  .dcal-week { display: grid; gap: 6px; }
  .dcal-week .dcal-day { width: 100%; min-height: 52px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--s-8) var(--s-12); }
  .dcal-week .dcal-day.today { padding: 7px 11px; }
  .dcal-week .dcal-tags { justify-content: flex-end; }
  .dcal-bar .select { width: 100%; }
  .dcal-filters { width: 100%; }
  .dcal-filters .select { flex: 1 1 140px; }
}

/* ---- credit (decision 044): the warning under the bill-to, before Submit */
.so-credit { margin-top: var(--s-8); }

/* ---- Sales › Dashboard and Reports (layouts agreed 17 Oct) */
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--line-strong); }
.dash-target { display: grid; gap: 4px; margin-top: var(--s-4); font-size: var(--fs-12); color: var(--ink-2); }
.dash-target b { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.dash-target b i { display: block; height: 100%; background: var(--cat-market); }
.dash-row { display: grid; gap: var(--s-16); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin-bottom: var(--s-16); }
.dash-row > .panel { margin: 0; }
@media (max-width: 900px) { .dash-row { grid-template-columns: minmax(0, 1fr); } }
.dash-cats { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; gap: var(--s-8); }
.dash-cats li { display: grid; grid-template-columns: minmax(96px, 1.2fr) minmax(0, 2fr) auto 3.5em; gap: var(--s-8); align-items: center; font-size: var(--fs-13); }
.dash-cat-name { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.dash-cat-name i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.dash-cat-bar { height: 10px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.dash-cat-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dash-pipe { display: grid; gap: var(--s-8); grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 768px) { .dash-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-stage { display: grid; gap: 2px; padding: var(--s-12); border: 1px solid var(--line); border-radius: var(--radius-control); color: inherit; text-decoration: none; }
.dash-stage strong { font-size: var(--fs-20); }
.dash-stage:hover { border-color: var(--line-strong); }
@media (max-width: 900px) { .dash-row > .first-ph { order: -1; } }   /* on a phone, To look at comes first (decision 048) */
@media (max-width: 600px) { .dash-kpis.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-kpis.two-up .kpi-value { font-size: var(--fs-20); } }   /* figures two by two */
.dash-look { list-style: none; margin: 0; padding: 0; }
.dash-look li + li { border-top: 1px solid var(--line); }
.dash-look a { display: flex; justify-content: space-between; gap: var(--s-12); padding: var(--s-8) 0; color: inherit; text-decoration: none; font-size: var(--fs-14); }
.dash-look-n { display: inline-flex; gap: var(--s-8); align-items: center; flex: none; }
.dash-table summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-13); margin-top: var(--s-8); }
.dash-split .dash-split-head td { font-weight: 600; }
.dash-split .dash-split-sub td { color: var(--ink-2); }
.dash-split .dash-split-sub td:first-child { padding-left: var(--s-24); }
.chart > .seg { margin-bottom: var(--s-8); }
.chart text.end { fill: var(--ink); font-weight: 600; }
.rep-picks { display: grid; gap: var(--s-8); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--s-16); }
@media (max-width: 768px) { .rep-picks { grid-template-columns: minmax(0, 1fr); } }
.rep-pick { display: grid; gap: 2px; text-align: left; padding: var(--s-12); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control);
  color: var(--ink); font: inherit; cursor: pointer; }
.rep-pick span { font-size: var(--fs-13); color: var(--ink-2); }
.rep-pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rep-print { margin-top: var(--s-16); }
.rep-print tfoot td { border-top: 2px solid var(--line-strong); }
@media print {
  .rep-print, .rep-print * { visibility: visible; }
  .rep-print { position: absolute; left: 0; top: 0; width: 100%; }
  .rep-print .table-wrap { overflow: visible; }
  .rep-print tr { break-inside: avoid; }
}

/* ---- notifications (decision 049): the bell, its list, the page, and the owner's who-gets-what */
.bell-wrap { position: relative; }
.icon-btn.bell { position: relative; }
.bell-n { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: var(--on-red);
  font: 600 11px/18px var(--face-ui); text-align: center; font-variant-numeric: tabular-nums; }
.notice-pop { width: min(420px, calc(100vw - 32px)); padding: 0; gap: 0; }
.notice-pop-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--line); }
.notice-pop .notice-list { max-height: 420px; overflow-y: auto; }
.notice-pop .notice-all { margin: var(--s-8) var(--s-16) var(--s-12); justify-self: start; }
.notice-empty { margin: 0; padding: var(--s-16); }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li + li { border-top: 1px solid var(--line); }
.notice-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--s-12); align-items: start; padding: var(--s-12) var(--s-16);
  color: inherit; text-decoration: none; font-size: var(--fs-13); }
.notice-item:hover, .notice-item:focus-visible { background: var(--surface-2); }
.notice-item > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.notice-item.unread > i { background: var(--red); }
.notice-item b { display: block; font-weight: 500; color: var(--ink); }
.notice-item.unread b { font-weight: 600; }
.notice-item > span > span { color: var(--ink-2); overflow-wrap: anywhere; }
.notice-item time { color: var(--ink-3); font-size: var(--fs-12); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice-day { display: grid; gap: var(--s-8); margin-bottom: var(--s-16); }
.notice-day .panel { padding: 0; overflow: hidden; }
.notice-seg { margin-bottom: var(--s-16); }
.notice-foot { font-size: var(--fs-13); margin: var(--s-8) 0 0; }
.notice-modes { flex-wrap: wrap; }
.notice-who td { text-align: center; }
.notice-who td:first-child, .notice-who th:first-child { text-align: left; }
.notice-who input { width: 18px; height: 18px; accent-color: var(--positive); }
.chips-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 500 var(--fs-13)/1 var(--face-ui); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.notice-health { margin-top: var(--s-16); max-width: 520px; }
@media (max-width: 767px) {
  .notice-modes { display: flex; width: 100%; }
  .notice-modes button { flex: 1 1 auto; min-height: 36px; }
}

/* ---- the purchase order (stage 9a, decision 052): the sales order's form, one supplier and a line per material ---- */
.po-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.po-cheaper { display: block; }
.po-cheaper.changed { color: var(--info-ink); font-weight: 600; }
.po-terms > summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-13); min-height: 32px; display: list-item; }
.po-terms > ol.terms { margin-top: var(--s-8); }
/* a placed order's delivery date (070): the supplier's confirmed date or 10 days assumed, moved with the reason */
.po-delivery { display: grid; gap: var(--s-12); }
.po-delivery h4, .po-delivery p { margin: 0; }
.po-due-form { display: grid; gap: var(--s-12); }
.po-due-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-12); align-items: start; }
.po-due-log { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--fs-13); }
@media (min-width: 900px) { .po-sum > .totals { grid-column: 2; } }
@media (min-width: 1100px) {
  .so-line.po-line { grid-template-columns: minmax(200px, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(180px, 1.3fr); }
  .so-line.po-line > .so-line-head { grid-column: 1; }
  .so-line.po-line > .so-line-foot { align-items: flex-end; text-align: right; }
}
@media (max-width: 767px) { .po-head { grid-template-columns: minmax(0, 1fr); } }

/* ---- material receipt (stage 9b, decision 053): phone first at the gate ---- */
.rc-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.rc-po { flex: none; font-size: var(--fs-12); white-space: nowrap; }
.rc-figs { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.rc-figs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-figs dt { font-size: var(--fs-12); color: var(--ink-3); }
.rc-figs dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* "500 pcs", never "500" over "pcs" */
.rc-said { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.rc-said.warn { color: var(--warn-ink); }
.rc-said.crit { color: var(--red-ink); }
.rc-facts, .rc-after { margin-top: var(--s-16); }
@media (min-width: 900px) { .rc-line > .so-line-pair { max-width: 520px; } }   /* a quantity and a rate, not half the screen each */
.rc-tol { display: flex; align-items: center; gap: var(--s-8); }
/* ---- PO pendency (decision 054): the bands reuse the ageing bar; the follow-up form and its log */
.pd-cell { min-width: 140px; }
.pd-cell .pd-bar { margin: 0 0 var(--s-4); height: 8px; }
.pd-form { margin-top: var(--s-16); display: grid; gap: var(--s-12); }
.pd-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: var(--s-16); }
.pd-actions { display: flex; justify-content: flex-end; }
.pd-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.pd-log li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--s-12); display: grid; gap: var(--s-4); }
.pd-log p { margin: 0; }
.pd-log-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4) var(--s-12); }
@media (max-width: 767px) { .pd-dates { grid-template-columns: minmax(0, 1fr); } .pd-actions .btn { width: 100%; } }
.rc-full > summary { cursor: pointer; padding: var(--s-8) 0; font-size: var(--fs-13); color: var(--ink-2); }
.rc-full[open] > summary { margin-bottom: var(--s-8); }
.rc-tol .input { width: 80px; }
@media (max-width: 767px) {
  .rc-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-head > :first-child { grid-column: 1 / -1; }
  .rc-figs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Over/under receipt (decision 056): a delivery on a line from nothing past its order; what came before, what came now,
   the order and the allowance marked on one scale */
.ou-ruler { position: relative; height: 12px; margin: var(--s-16) 0 var(--s-8); background: var(--surface-2); border-radius: 6px; }
.ou-ruler i { position: absolute; top: 0; bottom: 0; display: block; }
.ou-ruler .ou-before { left: 0; background: var(--age-1); border-radius: 6px 0 0 6px; }
.ou-ruler .ou-now { background: var(--age-2); }
.ou-ruler b { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.ou-ruler b.ou-allow { background: var(--warn-ink); }
.ou-ruler b span { position: absolute; bottom: 100%; transform: translateX(-50%); font: 500 var(--fs-12)/1.2 var(--face-ui); color: var(--ink-3); white-space: nowrap; }
.ou-ruler b.ou-allow span { top: 100%; bottom: auto; color: var(--warn-ink); }
.ou-line .rc-figs { margin-top: var(--s-12); }
.ou-main { display: grid; gap: var(--s-8); min-width: 0; }
/* the three ways to settle, each the same: its button, and under it what it keeps and sends back */
.ou-acts { display: grid; gap: var(--s-12); align-content: start; }
.ou-choice { display: grid; gap: 2px; font-size: var(--fs-13); }
.ou-choice .btn { width: 100%; justify-content: center; }
@media (min-width: 900px) {
  .so-line.ou-line:has(> .ou-acts) { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); column-gap: var(--s-32); align-items: start; }
  .ou-line > .ou-acts { padding-left: var(--s-24); border-left: 1px solid var(--line); }
}
.ou-tabs { margin-bottom: var(--s-12); }

/* ---- Supplier bills (decision 058): a line three ways, what it comes to and what is held, before it is recorded */
.bl-add { margin-top: var(--s-16); max-width: 520px; }
.bl-check { margin-top: var(--s-16); display: grid; gap: var(--s-8); }
.bl-holds { margin-top: var(--s-24); display: grid; gap: var(--s-8); }
.pills { display: inline-flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---- import and export papers (decision 061): each paper a row, in or awaited; the side panels stacked */
.sh-papers { list-style: none; margin: 0; padding: 0; }
.sh-papers li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto; gap: var(--s-8); align-items: center; padding: var(--s-8) 0; }
.sh-papers li + li { border-top: 1px solid var(--line); }
.sh-papers li:not(:has(.sh-mark)) { grid-template-columns: minmax(0, 1fr) auto; }
.sh-mark { font-size: var(--fs-16); color: var(--ink-3); text-align: center; }
.sh-papers li.in .sh-mark { color: var(--good-ink); }
.sh-name { min-width: 0; overflow-wrap: anywhere; }
.sh-act { display: inline-flex; gap: var(--s-8); flex-wrap: wrap; justify-content: flex-end; }
.sh-side { display: grid; gap: var(--s-16); align-content: start; }
.sh-side > .panel { margin: 0; }
.sh-side .row-card-dl { margin-bottom: var(--s-12); }
.sh-gone { margin: var(--s-8) 0 0; padding-left: var(--s-16); font-size: var(--fs-13); color: var(--ink-2); }

/* ---- the Ledger (decision 063): the parties beside the open account; on a phone, the list then the account */
.lg-filters { margin-bottom: var(--s-12); }
.lg-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.lg-date { display: inline-flex; align-items: center; gap: var(--s-4); font-size: var(--fs-13); color: var(--ink-2); }
.lg-two { display: grid; gap: var(--s-16); grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.lg-two > .panel { margin: 0; }
.lg-list .search { margin: var(--s-8) 0; }
.lg-parties { list-style: none; margin: var(--s-8) 0 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.lg-parties li + li { border-top: 1px solid var(--line); }
.lg-parties a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: baseline; padding: var(--s-8) var(--s-4); color: inherit; text-decoration: none; }
.lg-parties a:hover { background: var(--surface-2); }
.lg-parties a[aria-current="page"] { font-weight: 600; background: var(--surface-2); }
.lg-name { min-width: 0; overflow-wrap: anywhere; }
.lg-table tr.lg-edge td { font-style: italic; }
.lg-table tfoot td { border-top: 2px solid var(--line-strong); }
.lg-sum { margin: var(--s-8) 0 0; font-size: var(--fs-13); }
/* side by side only where the account's five columns fit beside the list; narrower, two pages as on a phone */
@media (max-width: 1279px) {
  .lg-two { grid-template-columns: minmax(0, 1fr); }
  .lg-two.lg-open .lg-list, .lg-two:not(.lg-open) .lg-account { display: none; }
}

/* ---- write-offs (decision 064): what the party owes or holds, then the form; a cancelled one stays listed, quieter */
.wo-head { margin-bottom: var(--s-12); }
.wo-form { display: grid; gap: var(--s-12); }
.wo-room { margin: 0; }
.wo-does { margin: 0; font-size: var(--fs-13); }
tr.is-cancelled td { color: var(--ink-3); }
/* ---- TDS and TCS (stage 9m, decision 065) */
.tx-head { margin-bottom: var(--s-12); }
.tx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); margin-bottom: var(--s-12); }
.tx-note { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.tx-form { display: grid; gap: var(--s-12); }
.tx-fix { display: grid; gap: var(--s-8); }
.tx-fix .sub-title { margin: 0; }
.tx-list { margin: 0; padding-left: var(--s-16); display: grid; gap: var(--s-4); overflow-wrap: anywhere; }

/* Record a payment (29 Oct): the bills, with a radio or a tick in front when the payment names them */
.pay-how { margin: var(--s-8) 0 var(--s-12); }
.pay-bills .pay-pick { width: 44px; text-align: center; }
.pay-bills .pay-pick input { width: 18px; height: 18px; }
.pay-bills td .input.num { max-width: 9rem; margin-left: auto; }
.dsp-to-confirm { margin: 0 0 var(--s-16); }

/* ---- Production (decision 071): the report's daily entry. One row a machine that a laptop sees whole: what is typed every
   shift, then Kg, rejection and efficiency, worked out; everything else under the row's details. Machines are grouped by a
   stronger rule; the operation is coloured so a stop or a mould change reads at a glance. */
.pe-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-8) var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-12); }
.pe-when { display: flex; align-items: center; gap: var(--s-8) var(--s-12); flex-wrap: wrap; }
.pe-day { display: inline-flex; align-items: center; gap: var(--s-4); }
.pe-day .input { width: 150px; }
.pe-step { min-width: 32px; padding: 0; justify-content: center; }
.pe-when .seg button { min-height: 32px; }
.pe-meta { font-size: var(--fs-13); color: var(--ink-3); }
.pe-small { font-size: var(--fs-12); }
.pe-inline { display: flex; gap: var(--s-8) var(--s-12); align-items: end; flex-wrap: wrap; }
.pe-inline .seg button { min-height: 36px; }
.pe-closed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); margin-bottom: var(--s-12); padding: var(--s-8) var(--s-12);
  border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); font-size: var(--fs-13); }
.pe-closed .field { flex: 1 1 280px; }
.pe-noitems { margin-bottom: var(--s-12); }
.pe-addmc { width: min(420px, 100%); margin-top: var(--s-8); }
.pe-addmc-row { display: flex; gap: var(--s-8); }
.pe-addmc-row .input { flex: 1 1 auto; }
.pe-addmore { margin: var(--s-12) 0; }
.pe-addmore-btn { margin: var(--s-8) 0; }

/* the sheet (layout G, 31 Oct; a spreadsheet, decision 091): Excel's look -- column letters, row numbers, bands over the
   column groups, Machine, Operation and Item frozen at the left, the formula bar above, a totals row below, amber past a
   limit. Flat cells across the whole page, the grid their only edge; the cell being typed in boxed in green, its column
   letter and row number lit, as Excel does */
.pe-sheetwrap { border: 1px solid var(--line-strong); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface); margin-bottom: var(--s-12); }
.pe-fx { display: flex; align-items: center; gap: var(--s-8); padding: 6px var(--s-8); border-bottom: 1px solid var(--line-strong); font-size: var(--fs-13); flex-wrap: wrap; min-height: 34px; }
.pe-fx-name { min-width: 44px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 4px; font: 500 var(--fs-12)/1.4 var(--face-code); text-align: center; }
.pe-fx-i { font: italic 600 var(--fs-13)/1 var(--face-display); color: var(--ink-3); }
.pe-fx-text { flex: 1 1 260px; min-width: 0; }
.pe-sheetscroll { overflow-x: auto; }
table.pe-sheet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
table.pe-sheet th, table.pe-sheet td { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 3px 6px; white-space: nowrap; background: var(--surface); }
table.pe-sheet td { height: 34px; vertical-align: middle; padding: 0; }
table.pe-sheet td.pe-w, table.pe-sheet td.pe-rn, table.pe-sheet td.pe-mc, table.pe-sheet tr.pe-total td { padding: 0 6px; }
table.pe-sheet td.pe-w { min-width: 56px; }
table.pe-sheet thead th { background: var(--surface-2); font-weight: 600; text-align: left; vertical-align: bottom; color: var(--ink); }
table.pe-sheet thead th.num { text-align: right; }
table.pe-sheet .pe-letters th { height: 22px; padding: 4px 6px; font: 500 11px/1 var(--face-ui); color: var(--ink-3); text-align: center; vertical-align: middle; }
table.pe-sheet .pe-letters th.is-lit, table.pe-sheet td.pe-rn.is-lit { background: var(--good-wash); color: var(--good-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--positive); }
table.pe-sheet td.pe-rn.is-lit { box-shadow: inset -2px 0 0 var(--positive); }
table.pe-sheet .pe-band th { height: 24px; font-size: var(--fs-12); }
table.pe-sheet th.pe-band-typed { background: var(--info-wash); color: var(--info-ink); }
table.pe-sheet th.pe-band-work, table.pe-sheet th.pe-band-more { background: var(--idle-wash); color: var(--idle-ink); }
table.pe-sheet th.pe-hw { font-style: italic; font-weight: 500; color: var(--ink-2); }
.pe-rn { width: 30px; min-width: 30px; text-align: center; font-size: 11px; color: var(--ink-3); }
table.pe-sheet td.pe-rn, table.pe-sheet th.pe-rn { background: var(--surface-2); }
.pe-fz { position: sticky; z-index: 2; }
table.pe-sheet th.pe-fz { z-index: 3; }
.pe-rn.pe-fz { left: 0; }
.pe-f0 { left: 30px; width: 44px; min-width: 44px; text-align: center; }
.pe-f1 { left: 74px; width: 112px; min-width: 112px; }
.pe-f2 { left: 186px; min-width: 200px; box-shadow: 2px 0 0 var(--line-strong); }
table.pe-sheet th.pe-f2, table.pe-sheet td.pe-f2 { width: 30%; }
table.pe-sheet td.pe-fz:focus-within { z-index: 6; }   /* the list a cell opens paints over the frozen cells under it */
.pe-mc { font: 600 var(--fs-14)/1 var(--face-ui); font-variant-numeric: tabular-nums; }
table.pe-sheet tr.pe-first td { border-top: 1px solid var(--line-strong); }
table.pe-sheet tbody tr:first-child td { border-top: 0; }
table.pe-sheet .input, table.pe-sheet .select { min-height: 30px; padding: 0 6px; font-size: var(--fs-13); }
table.pe-sheet td > .input, table.pe-sheet td > .select { display: block; width: 100%; height: 33px; min-height: 0; padding: 0 6px; border: 0; border-radius: 0;
  background-color: transparent; box-shadow: none; }
table.pe-sheet td > .select { padding-right: 2px; }   /* the browser draws its own arrow, in room of its own */
table.pe-sheet td > .input:focus, table.pe-sheet td > .select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--positive); background-color: var(--surface); }
table.pe-sheet td > .input:disabled, table.pe-sheet td > .select:disabled { color: var(--ink); opacity: 1; background-color: transparent; }
table.pe-sheet td > .input::placeholder { color: var(--ink-3); }
.pe-mcin { text-align: center; font-weight: 600; }
table.pe-sheet tr.pe-spare td.pe-mc { padding: 0; }
table.pe-sheet td.pe-w { background: var(--surface-2); color: var(--ink-2); }
table.pe-sheet td.pe-amber, table.pe-sheet td.pe-w.pe-amber { background: var(--warn-wash); color: var(--warn-ink); font-weight: 600; }
table.pe-sheet td.pe-blank { background: var(--surface); }
table.pe-sheet tr.op-machine_stop td:not(.pe-rn) { background: var(--red-wash); }
table.pe-sheet tr.op-mould_change td.pe-fz:not(.pe-rn) { background: var(--info-wash); }
table.pe-sheet tr.op-trial td.pe-fz:not(.pe-rn) { background: var(--idle-wash); }
.pe-morecell { min-width: 72px; max-width: 120px; }
table.pe-sheet td.pe-morecell { white-space: normal; padding: 0 6px; }
.pe-moretext { display: block; margin-top: 2px; font-size: var(--fs-12); line-height: 1.25; color: var(--info-ink); }
/* a cell typed into from a list (ui/pick.tsx; decision 091): the chosen name shows whole, wrapping; the box over it is
   typed into once the cell has the cursor, and the list narrows under it */
.cp { position: relative; display: block; min-width: 0; }
.cp-text { display: block; padding: 8px 6px; min-height: 33px; font-weight: 600; line-height: 1.3; white-space: normal; color: var(--ink); }
.cp-text.is-empty { font-weight: 400; color: var(--ink-3); }
.cp-in { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0 6px; border: 0; border-radius: 0; background: transparent;
  color: var(--ink); font: 600 var(--fs-13)/1.3 var(--face-ui); opacity: 0; cursor: text; }
.cp-in:focus { opacity: 1; outline: none; background: var(--surface); box-shadow: inset 0 0 0 2px var(--positive); }
.cp-in:disabled { cursor: default; }
.cp:not(.is-off):hover .cp-text { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cp-sm { flex: 1 1 auto; }
.cp-sm .cp-text { padding: 2px 0; min-height: 0; font-weight: 400; font-size: var(--fs-12); color: var(--ink-2); }
.cp-sm .cp-in { padding: 0 4px; font: 400 var(--fs-12)/1.3 var(--face-ui); }
.cp-list { position: fixed; z-index: 60; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); font-size: var(--fs-13); }
.cp-opt { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-12); padding: 6px 10px; cursor: pointer; color: var(--ink); }
.cp-opt.is-active { background: var(--good-wash); }
.cp-opt.is-chosen { font-weight: 600; }
.cp-code { font: 400 11px/1.2 var(--face-code); color: var(--ink-3); white-space: nowrap; }
.cp-group { padding: 8px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cp-add { color: var(--info-ink); font-weight: 500; border-top: 1px solid var(--line); }
.cp-none { padding: 6px 10px; color: var(--ink-3); }
.pe-card .cp-text { padding-inline: 0; }
.pe-card .cp-in { border: 1px solid var(--line-strong); border-radius: var(--radius-control); }
/* a name shown whole, wrapping, its dropdown laid over it (a stop's reason) */
.pe-pick { position: relative; display: block; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; }
table.pe-sheet .pe-pick { padding: 8px 6px; border: 0; border-radius: 0; }
table.pe-sheet .pe-pick:focus-within { box-shadow: inset 0 0 0 2px var(--positive); }
.pe-pick:hover:not(.is-off) { border-color: var(--line-strong); }
.pe-pick:focus-within { border-color: var(--red); box-shadow: var(--focus-ring); }
.pe-pick-text { display: block; font-weight: 600; line-height: 1.25; white-space: normal; color: var(--ink); }
.pe-why .pe-pick-text { font-weight: 500; color: var(--red-ink); }
.pe-pick-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.pe-pick.is-off .pe-pick-sel { cursor: default; }
table.pe-sheet td.pe-f2 { white-space: normal; }
table.pe-sheet tr.pe-note td { height: auto; padding: 6px; white-space: normal; font-size: var(--fs-12); background: var(--warn-wash); }
table.pe-sheet tr.pe-note.pe-err td { background: var(--red-wash); }
table.pe-sheet tr.pe-note td.pe-rn { background: var(--surface-2); }
table.pe-sheet tr.pe-detailrow td { height: auto; padding: var(--s-12) 6px var(--s-16); background: var(--surface-2); white-space: normal; }
table.pe-sheet tr.pe-total td { height: 34px; font-weight: 600; border-top: 2px solid var(--line-strong); }
.pe-keys { display: flex; flex-wrap: wrap; gap: 4px var(--s-12); align-items: center; padding: 7px var(--s-12); border-top: 1px solid var(--line-strong); font-size: var(--fs-12); color: var(--ink-2); }
.pe-keys kbd { font: 500 11px/1 var(--face-code); padding: 2px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink); }
.pe-owed .input { border-color: var(--warn-ink); box-shadow: 0 0 0 1px var(--warn-ink); }
.pe-owed label { color: var(--warn-ink); font-weight: 600; }
.pe-dirty td.pe-rn { box-shadow: inset 3px 0 0 var(--warn-ink); }
.pe-kg { color: var(--ink); font-weight: 600; }
.pe-op { width: 108px; font-weight: 500; }
.pe-op.op-machine_stop { color: var(--red-ink); background-color: var(--red-wash); border-color: transparent; }
.pe-op.op-mould_change { color: var(--info-ink); background-color: var(--info-wash); border-color: transparent; }
.pe-op.op-trial { color: var(--idle-ink); background-color: var(--idle-wash); border-color: transparent; }
.pe-itemcell { display: grid; gap: 0; min-width: 0; }
.pe-bare { appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink);
  font: 600 var(--fs-13)/1.3 var(--face-ui); padding: 2px 6px; margin-left: -6px; width: calc(100% + 6px); cursor: pointer; text-overflow: ellipsis; }
.pe-bare:hover { border-color: var(--line-strong); }
.pe-bare:focus-visible { outline: none; border-color: var(--red); box-shadow: var(--focus-ring); }
.pe-bare:disabled { cursor: default; border-color: transparent; color: var(--ink); opacity: 1; }
.pe-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--ink-3); }
.pe-itemcell > .pe-sub { padding: 0 6px 3px; }
.pe-sub .mono { font-size: 11px; }
.pe-pf { font-weight: 400; font-size: var(--fs-12); color: var(--ink-2); width: auto; max-width: 200px; }
.pe-block { color: var(--info-ink); }
.pe-n { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.pe-n.pe-s { width: 62px; }
.pe-t { width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
table.pe-sheet td > .pe-n { min-width: 80px; }
table.pe-sheet td > .pe-n.pe-s { min-width: 68px; }
table.pe-sheet td > .pe-t { min-width: 58px; }
.pe-reason { width: 100%; max-width: 360px; }
.pe-kg { color: var(--ink); font-weight: 600; }
.pe-stopped { color: var(--red-ink); }
.pe-more-btn { position: relative; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink-2);
  font: 600 16px/1 var(--face-ui); cursor: pointer; }
.pe-more-btn:hover, .pe-more-btn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.pe-more-btn.has::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--info-ink); border: 2px solid var(--surface); }
.pe-link-btn { border: 0; background: none; padding: 4px 0; font: 500 var(--fs-13)/1 var(--face-ui); color: var(--ink-2); cursor: pointer; }
.pe-link-btn:hover { color: var(--ink); text-decoration: underline; }
.pe-link-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
/* the row's details: the boxes typed now and then, beside every figure the report works out */
.pe-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--s-16); max-width: 1020px; }
.pe-detail-foot { grid-column: 1 / -1; display: flex; gap: var(--s-12); align-items: center; flex-wrap: wrap; }
.pe-typed { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-8) var(--s-12); align-content: start; }
.pe-typed .pe-wide { grid-column: 1 / -1; }
.pe-figs-wrap { display: grid; gap: var(--s-12); align-content: start; justify-items: start; }
.pe-figs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-16); padding: var(--s-12); border: 1px solid var(--line);
  border-radius: var(--radius-panel); background: var(--surface); width: 100%; }
.pe-figs dt { font-size: var(--fs-12); color: var(--ink-3); }
.pe-figs dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }

/* a phone: a card a machine, the operation's colour down its left edge */
.pe-cards { display: grid; gap: var(--s-8); margin-bottom: var(--s-12); }
.pe-card { gap: var(--s-8); }
.pe-card.op-machine_stop { box-shadow: inset 3px 0 0 var(--red-ink); }
.pe-card.op-mould_change { box-shadow: inset 3px 0 0 var(--info-ink); }
.pe-card.op-trial { box-shadow: inset 3px 0 0 var(--idle-ink); }
.pe-card.pe-dirty { border-color: var(--warn-ink); }
.pe-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); }
.pe-card-head .pe-op { width: auto; }
.pe-card .pe-itemcell { max-width: none; min-width: 0; }
.pe-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.pe-pgrid .input { text-align: right; font-variant-numeric: tabular-nums; }
.pe-card-figs { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line);
  font-size: var(--fs-13); color: var(--ink-2); }
.pe-card-figs b { font-size: var(--fs-20); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-card-err { display: flex; gap: var(--s-8); align-items: baseline; font-size: var(--fs-13); }
.pe-card-foot { display: flex; justify-content: space-between; align-items: center; }
/* an owner's standard weight box, under a line over its weight limit (Krishi, 7 Nov) */
table.pe-sheet tr.pe-stdrow td { height: auto; padding: var(--s-8) 6px var(--s-12); white-space: normal; background: var(--surface-2); }
table.pe-sheet tr.pe-stdrow td.pe-rn { background: var(--surface-2); }
.pe-card-err .pe-link-btn { white-space: nowrap; }
.pe-std { display: grid; gap: var(--s-12); max-width: 640px; padding: var(--s-12) var(--s-16); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; }
.pe-std-head { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: baseline; font-size: var(--fs-14); }
.pe-std-head span { color: var(--ink-2); }
.pe-std-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); margin: 0; }
.pe-std-figs div { display: grid; gap: 2px; align-content: start; }
.pe-std-figs dt { font: 600 var(--fs-12)/1.2 var(--face-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.pe-std-figs dd { margin: 0; text-align: left; }
.pe-std-figs dd.num { font-size: var(--fs-16); font-weight: 600; color: var(--ink); }
.pe-std-sub { font-size: var(--fs-12); color: var(--ink-3); }
.pe-std-sub .pe-link-btn { font-size: var(--fs-12); padding: 0; }
.pe-std-do { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.pe-std-do label { font-size: var(--fs-13); font-weight: 600; }
.pe-std-in { display: inline-flex; gap: var(--s-4); align-items: center; font-size: var(--fs-13); color: var(--ink-2); }
.pe-std-in .input { width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.pe-std-err { margin: 0; font-size: var(--fs-13); }
.pe-std-note { margin: 0; font-size: var(--fs-12); color: var(--ink-3); }
.pe-std-wait { display: inline-flex; flex-wrap: wrap; gap: var(--s-8); align-items: baseline; }
.si-std-wait { grid-column: 1 / -1; margin: 0; font-size: var(--fs-13); }   /* the item page: what waits for an owner */
.std-decide { display: flex; gap: var(--s-8); flex-wrap: wrap; justify-content: flex-end; }   /* Home: approve or refuse a standard weight */
@media (max-width: 767px) { .pe-std { padding: var(--s-12); } .pe-std-figs { gap: var(--s-8); } }
.pe-card-foot .pe-has { border-color: var(--info-ink); color: var(--info-ink); }
.pe-card .pe-detail { grid-template-columns: minmax(0, 1fr); position: static; }
.pe-card .pe-typed { grid-template-columns: 1fr 1fr; }

/* the log, the item master and the settings */
.grid.pe-kpis { margin-bottom: var(--s-12); }
.pe-filter { width: auto; min-width: 140px; }
.pe-pager { display: inline-flex; gap: var(--s-8); align-items: center; }
tr.pe-link { cursor: pointer; }
.pe-in { margin-left: var(--s-8); }
.pe-remark { display: block; white-space: normal; }
.pe-sec { margin-bottom: var(--s-16); display: grid; gap: var(--s-8); }
.pe-setform { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-12); align-items: end; }
.pe-setform .field { flex: 1 1 150px; max-width: 220px; }
.pe-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-12) var(--s-16); }
.pe-push { margin-left: auto; }
.pe-sub.pe-one { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Setup › People: a person's buttons on one line at the right of their row; in a card, they wrap under it */
.pp-actions { display: flex; gap: var(--s-8); align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.pp-actions.in-card { justify-content: flex-start; flex-wrap: wrap; }
table.data th.pp-actions-h { text-align: right; }

/* ---- Manufacturing › Daily report and Plant MIS (10b) */
.pr-kpis { margin: var(--s-12) 0; }
.pr-sec { margin-top: var(--s-24); }
.pr-small { font-size: var(--fs-13); }
.pr-banners { display: grid; gap: var(--s-8); margin-bottom: var(--s-12); }
.pr-hbar { display: block; width: 96px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pr-hbar i { display: block; height: 100%; border-radius: 4px; }

/* ---- Setup › Access control (10b): one line a thing, Owners / Managers / Team */
.ac-panel { display: grid; gap: var(--s-4); margin-bottom: var(--s-16); }
.ac-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8); flex-wrap: wrap; }
.ac-list { list-style: none; margin: 0; padding: 0; }
.ac-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ac-what { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.ac-small { font-size: var(--fs-13); }
.ac-gap { margin-top: var(--s-12); }
.rp-set { border: 0; margin: 0; padding: 0; min-width: 0; flex: 1 1 260px; }
.rp-set legend { padding: 0; margin-bottom: 6px; font: 500 var(--fs-13)/1.2 var(--face-ui); color: var(--ink-2); }
.rp-add { max-width: 240px; }
.rp-checks { list-style: none; margin: var(--s-8) 0 var(--s-12); padding: 0; display: grid; gap: 6px; }
.rp-checks li { display: flex; gap: var(--s-8); align-items: baseline; font-size: var(--fs-13); }
.rp-checks .pill { flex: none; }
.rp-kept { display: flex; flex-wrap: wrap; gap: 4px var(--s-8); align-items: baseline; margin: var(--s-8) 0 0; }
.rp-picked { border-top: 1px solid var(--line); margin-top: var(--s-12); padding-top: var(--s-8); }
.pr-dl { align-items: center; }
.dx-box { min-width: 96px; max-width: 160px; }
table.data td:has(> .dx-box) { padding-block: var(--s-4); }   /* a box in a row keeps clear of the row and the frame */
.dx-remarks { max-width: 640px; margin-top: var(--s-12); }
.dx-remarks .dx-box { max-width: none; width: 100%; }
.table-wrap.pr-full { max-height: none; }   /* a report table shows every row; the page scrolls, not the frame */
.pe-shut { margin-bottom: var(--s-12); align-items: center; }
.banner.pe-shut > div { flex: 1; }
.pe-shutbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); margin-bottom: var(--s-12); padding: var(--s-8) var(--s-12);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-panel); font-size: var(--fs-13); color: var(--ink-2); }
.pe-shutbar > span:not(.pill) { flex: 1 1 280px; }

/* ---- a salesperson's phone (Krishi, 4 Nov 2026): a black bar, the page, four tabs — at the foot on a phone, under the bar wider */
.rs { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--canvas); }
.rs-bar { background: var(--rail-bg); border-bottom-color: var(--rail-line); padding-inline: max(var(--s-12), var(--safe-left)) max(var(--s-12), var(--safe-right)); }
.rs-bar .topbar-name { color: var(--rail-ink); font-size: var(--fs-16); }
.rs-bar .icon-btn { color: var(--rail-ink-2); }
.rs-bar .icon-btn:hover { background: var(--rail-hover); color: var(--rail-ink); }
.rs-bar .icon-btn.avatar { background: var(--rail-active); color: var(--rail-ink); }
.rs-bar :focus-visible { box-shadow: 0 0 0 2px var(--rail-ink); }
.rs-mark { width: 30px; height: 30px; flex: none; }
.rs-page { flex: 1; width: 100%; max-width: 760px; margin-inline: auto; }
.rs-tabs { position: sticky; z-index: 19; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); }
.rs-tabs a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 6px 0; color: var(--ink-3);
  text-decoration: none; font: 500 var(--fs-12)/1.2 var(--face-ui); }
.rs-tabs a svg { width: 22px; height: 22px; }
.rs-tabs a:hover { color: var(--ink); background: var(--surface-2); }
.rs-tabs a[aria-current="page"] { color: var(--red); font-weight: 600; }
@media (max-width: 767px) {
  .rs-tabs { order: 3; bottom: 0; border-top: 1px solid var(--line-strong); padding-bottom: var(--safe-bottom); }
  .rs-tabs a[aria-current="page"] { box-shadow: inset 0 2px 0 var(--red); }
  .rs-page { padding-inline: max(var(--s-12), var(--safe-left)) max(var(--s-12), var(--safe-right)); padding-block: var(--s-12) var(--s-24); }
}
@media (min-width: 768px) {
  .rs-tabs { top: calc(var(--bar-h) + var(--safe-top)); border-bottom: 1px solid var(--line); justify-content: center; grid-template-columns: repeat(4, 160px); }
  .rs-tabs a { display: flex; align-items: center; justify-content: center; gap: var(--s-8); font-size: var(--fs-14); min-height: 48px; }
  .rs-tabs a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }
}
.rs-stack { display: grid; gap: var(--s-12); }
.rs-month { display: grid; gap: var(--s-4); color: inherit; text-decoration: none; }
.rs-month:hover { border-color: var(--line-strong); }
.rs-do { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.rs-do .btn { display: grid; justify-items: start; justify-content: stretch; align-content: center; gap: 2px; min-height: 68px; padding: var(--s-12); white-space: normal; text-align: left; }
.rs-do .btn b { font-size: var(--fs-16); }
.rs-do .btn span { font-size: var(--fs-12); font-weight: 400; opacity: .85; }
.rs-do .btn.rs-wide { grid-column: 1 / -1; min-height: 56px; }   /* the third action takes the row: a payment collected (Krishi, 4 Nov) */
.rs-card .rs-pay { justify-self: start; margin-top: var(--s-8); min-height: 40px; }
.rs-card { display: grid; gap: var(--s-8); padding: var(--s-12); }
.rs-card .sub-title { margin: 0; }
.rs-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-8); }
.rs-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rs-rows li { display: flex; align-items: center; gap: var(--s-8); min-height: 40px; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-13); }
.rs-rows li:first-child { border-top: 0; }
.rs-rows .rs-main { flex: 1; min-width: 0; color: inherit; overflow-wrap: anywhere; }
.rs-rows a.rs-main { text-decoration: none; font-weight: 500; }
.rs-rows a.rs-main:hover { text-decoration: underline; }
.rs-rows .num, .rs-rows .muted { flex: none; text-align: right; }
.rs-seg { justify-self: stretch; display: flex; }
.rs-seg button { flex: 1; min-height: 36px; }
.rs-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.rs-orders a { display: grid; gap: 4px; padding: var(--s-12); color: inherit; text-decoration: none; }
.rs-orders a:hover { border-color: var(--line-strong); }
.rs-marks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 4px; }
.rs-marks i { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.rs-marks i.done { background: var(--good); border-color: var(--good); }
.rs-marks i.now { background: var(--cat-market); border-color: var(--cat-market); }
.rs-words { font-size: var(--fs-13); color: var(--ink-2); }
.rs-who { display: grid; gap: 2px; justify-items: start; }
.rs-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.rs-contact .btn { min-height: 40px; }
.rs-contact .btn[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.rs-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.rs-foot .btn { min-height: 44px; }

/* A packed load split for more than one Tally invoice (087): its parts listed together under one head, and the split screen */
.dsp-waiting-list li.dsp-load { display: grid; gap: 0; padding: var(--s-8) var(--s-12); background: var(--surface-2); border-radius: var(--radius-control); }
.dsp-load-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8) var(--s-16); }
.dsp-split { display: grid; gap: var(--s-12); }
.dsp-split-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); }
.dsp-split-stepper { display: inline-flex; align-items: center; gap: var(--s-8); }
.dsp-split-qty { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.dsp-split-short { color: var(--red-ink); font-weight: 600; }
.dsp-split-problems { display: grid; gap: 4px; margin: 0; color: var(--red-ink); }
/* ---- Help, bottom right (decision 085, the drawing of 31 Oct; the chat redrawn 4 Nov). A round ink button, the panel above it,
   full screen on a phone. Ink, not red: red here means a negative action. It sits above a save bar and above a salesperson's
   tabs, and messages that pop up stack above it, so it never covers Save. */
.help-fab { position: fixed; z-index: 35; right: max(var(--s-24), var(--safe-right)); bottom: calc(var(--s-24) + var(--safe-bottom));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); height: 56px; min-width: 56px; padding: 0 var(--s-16);
  border: 0; border-radius: 28px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-overlay); cursor: pointer;
  font: 600 var(--fs-14)/1 var(--face-ui); }
.help-fab svg { width: 26px; height: 26px; flex: none; }
.help-fab:hover { background: var(--ink-2); }
.help-fab-label { display: none; }
@media (hover: hover) and (min-width: 768px) { .help-fab:hover .help-fab-label, .help-fab:focus-visible .help-fab-label { display: inline; } }
.help-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--red); color: var(--on-red); font: 700 var(--fs-12)/20px var(--face-ui); text-align: center; }
:root:has(.savebar) .help-fab { bottom: calc(var(--s-24) + 64px + var(--safe-bottom)); }
@media (max-width: 767px) { .rs .help-fab { bottom: calc(var(--s-12) + 68px + var(--safe-bottom)); right: max(var(--s-12), var(--safe-right)); } }
:root:has(.help-fab) .toasts { bottom: calc(var(--s-16) + 72px + var(--safe-bottom)); }
:root:has(.savebar):has(.help-fab) .toasts { bottom: calc(var(--s-16) + 136px + var(--safe-bottom)); }

.help-panel { position: fixed; z-index: 36; right: max(var(--s-24), var(--safe-right)); bottom: calc(var(--s-24) + 68px + var(--safe-bottom));
  width: min(440px, calc(100vw - 2 * var(--s-24))); height: min(680px, calc(100dvh - 120px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-overlay); overflow: hidden;
  transform-origin: bottom right; animation: help-in .16s ease-out; }
@keyframes help-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 767px) {
  .help-panel { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); animation: none; }
}
@media (prefers-reduced-motion: reduce) { .help-panel { animation: none; } .help-dots i { animation: none !important; } }

.help-head { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-8) var(--s-12) var(--s-16); background: var(--ink); color: var(--surface); }
.help-head-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink); }
.help-head-mark svg { width: 18px; height: 18px; }
.help-head-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.help-head-text h2 { margin: 0; font: 600 var(--fs-16)/1.2 var(--face-ui); }
.help-head-text span { font-size: var(--fs-12); opacity: .75; }
.help-head .icon-btn { color: var(--surface); }
.help-head .icon-btn:hover { background: color-mix(in srgb, var(--surface) 14%, transparent); color: var(--surface); }
.help-tabs { display: flex; gap: var(--s-4); padding: 0 var(--s-12); border-bottom: 1px solid var(--line); background: var(--surface); }
.help-tab { flex: 1; border: 0; background: transparent; color: var(--ink-3); min-height: 42px; font: 600 var(--fs-13)/1 var(--face-ui); cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent; }
.help-tab:hover { color: var(--ink); }
.help-tab[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.help-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--s-16); display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: start; gap: var(--s-12); }   /* one column, never wider than the box: a long line wraps, it does not push (4 Nov) */
.help-chat { background: var(--canvas); gap: var(--s-16); }

.help-hello { display: grid; justify-items: start; gap: var(--s-8); padding: var(--s-8) 0; }
.help-hello-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); }
.help-hello-mark svg { width: 22px; height: 22px; }
.help-hello h3 { margin: var(--s-4) 0 0; font: 600 var(--fs-20)/1.25 var(--face-display); text-wrap: balance; }
.help-hello p { margin: 0; color: var(--ink-2); }
.help-suggest { display: grid; gap: var(--s-8); width: 100%; margin-top: var(--s-8); }
.help-chip { text-align: left; padding: var(--s-8) var(--s-12); border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: 500 var(--fs-13)/1.35 var(--face-ui); cursor: pointer; }
.help-chip:hover { border-color: var(--ink-3); background: var(--surface-2); }

.help-msg { display: flex; gap: var(--s-8); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.help-msg-person { justify-content: flex-end; }
.help-msg-person .help-bubble { max-width: 85%; padding: var(--s-8) var(--s-12); border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--surface); white-space: pre-wrap; }
.help-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); margin-top: 2px; }
.help-avatar svg { width: 16px; height: 16px; }
.help-msg-claude .help-bubble { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); padding: var(--s-12); border-radius: 4px 14px 14px 14px;
  background: var(--surface); border: 1px solid var(--line); }
.help-who { font: 600 var(--fs-12)/1 var(--face-ui); color: var(--ink-3); }
.help-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); line-height: 1.5; min-width: 0; }
.help-answer p, .help-answer ol, .help-answer ul { margin: 0; }
.help-answer ol, .help-answer ul { padding-left: 1.3em; display: grid; gap: 4px; }
.help-go { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.help-go:hover { text-decoration-color: currentColor; }
.help-failed { margin: 0; padding: var(--s-8) var(--s-12); border-radius: var(--radius-control); background: var(--warn-wash); color: var(--warn-ink); }
.help-sources { display: grid; gap: 6px; padding-top: var(--s-8); border-top: 1px dashed var(--line); }
.help-sources-k { font: 600 11px/1 var(--face-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.help-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.help-chip-src { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: var(--surface-2);
  color: var(--ink-2); font-size: var(--fs-12); }
.help-chip-src svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.help-chip-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.help-working .help-bubble { gap: 6px; }
.help-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.help-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: help-dot 1.2s infinite ease-in-out; }
.help-dots i:nth-child(2) { animation-delay: .15s; }
.help-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes help-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--fs-12); }
.help-steps li { display: flex; gap: 6px; color: var(--ink-3); }
.help-steps li.done::before { content: "✔"; color: var(--good-ink); }
.help-steps li.now { color: var(--ink); font-weight: 600; }
.help-steps li.now::before { content: "›"; }

.help-feedback { display: grid; gap: var(--s-8); margin-left: 36px; padding: var(--s-12); border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-13); color: var(--ink-2); }
.help-feedback.done { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.help-acts { display: flex; flex-wrap: wrap; gap: var(--s-8); }

.help-foot { display: grid; gap: 6px; padding: var(--s-12) var(--s-16); border-top: 1px solid var(--line); background: var(--surface); }
.help-composer { display: flex; align-items: flex-end; gap: var(--s-8); padding: 6px 6px 6px var(--s-12); border: 1px solid var(--line-strong); border-radius: 22px;
  background: var(--surface); }
.help-composer:focus-within { border-color: var(--ink-3); box-shadow: var(--focus-ring); }
.help-input { flex: 1; min-width: 0; min-height: 30px; max-height: 150px; padding: 5px 0; border: 0; background: transparent; color: var(--ink); resize: none;
  font: 400 var(--fs-14)/1.45 var(--face-ui); outline: none; }
.help-input::placeholder { color: var(--ink-3); }
.help-input:focus-visible { box-shadow: none; border-radius: 0; }   /* the rounded box around it carries the one focus ring */
.help-send { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--positive); color: var(--on-positive); cursor: pointer; }
.help-send svg { width: 18px; height: 18px; }
.help-send:hover { background: var(--positive-hover); }
.help-send[disabled] { background: var(--line-strong); color: var(--surface); cursor: default; }
.help-note { margin: 0; display: flex; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; font-size: var(--fs-12); color: var(--ink-3); }

.help-report { display: grid; gap: var(--s-16); }
.help-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.help-row { display: grid; gap: 4px; padding: var(--s-12); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.help-row .card-top { align-items: flex-start; }
.help-row .link-btn { text-align: left; overflow-wrap: anywhere; }
.help-reply { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.help-reply.wants { color: var(--warn-ink); }
.help-convo { display: grid; gap: var(--s-12); padding-top: var(--s-8); }

/* ---- Tally (stage 6a, decision 088): the connection at a glance, and what waits for a person ---------------------- */
.tally-status { display: grid; gap: var(--s-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tally-status .panel { display: grid; gap: 6px; align-content: start; }
.tally-status .panel > span:last-child { margin-top: 2px; }
.tally-attn { display: grid; gap: var(--s-12); }
.tally-item { display: grid; gap: var(--s-8); padding: var(--s-16); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); min-width: 0; }
.tally-item.warn { box-shadow: inset 3px 0 0 var(--warn-ink); }
.tally-item.crit { box-shadow: inset 3px 0 0 var(--red-ink); }
.tally-item p { margin: 0; color: var(--ink-2); max-width: 80ch; }
.tally-item .field { max-width: 520px; }
.tally-item-top { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; justify-content: space-between; }
.tally-acts { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.tally-banks { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.tally-banks .select { width: auto; min-width: 10rem; }

/* ---- Sales › Sell › Outstanding sales orders › By product (094, the layout agreed 5 Nov): the view switch, the bar over the
   list (PO pendency's age bands, in master cartons), one row an item that opens on its orders */
.seg-view { margin: 0 0 var(--s-16); }
.seg-view button { min-height: 34px; padding: 0 var(--s-16); font-size: var(--fs-14); font-weight: 600; }
.bp-sum { display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto; gap: var(--s-24) var(--s-32); align-items: center; margin-bottom: var(--s-16); }
.bp-fig { display: grid; gap: 2px; }
.bp-eyebrow { font: 600 var(--fs-12)/1.2 var(--face-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.bp-fig strong { font: 600 var(--fs-28)/1.15 var(--face-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-fig .muted { font-size: var(--fs-13); }
.bp-bands { min-width: 0; }
.bp-bands .rec-bar { margin: 0 0 var(--s-8); }
.bp-bands .legend { margin: 0; }
.bp-plan { margin: 0; display: grid; gap: var(--s-8); padding-left: var(--s-24); border-left: 1px solid var(--line); }
.bp-plan div { display: grid; }
.bp-plan dt { font-size: var(--fs-12); color: var(--ink-3); }
.bp-plan dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) {
  .bp-sum { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
  .bp-plan { padding-left: 0; border-left: 0; grid-auto-flow: column; justify-content: start; gap: var(--s-24); }
}
.bp-cat { width: auto; }
.bp-table td { height: auto; padding-block: var(--s-8); }
.bp-table .bp-tw { width: 36px; padding-right: 0; }
.bp-toggle { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 5px;
  background: var(--surface); color: var(--ink-2); cursor: pointer; }
.bp-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.bp-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.bp-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.bp-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bp-name { display: block; }
.bp-group td, table.data tbody tr.bp-group:hover td { background: var(--canvas); font: 600 var(--fs-12)/1.2 var(--face-ui); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); padding-block: var(--s-8); }
.bp-open td, table.data tbody tr.bp-open:hover td { background: var(--surface-2); border-bottom-color: transparent; }
.bp-nest-row > td, table.data tbody tr.bp-nest-row:hover > td { background: var(--surface-2); padding: 0 var(--s-12) var(--s-12) 0; }
.bp-nest { border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface); }
.bp-nest table.data { font-size: var(--fs-13); }
.bp-nest table.data td { height: auto; padding-block: 6px; }
.bp-nest table.data tr:last-child td { border-bottom: 0; }
.bp-since { display: inline-flex; align-items: center; gap: var(--s-8); white-space: nowrap; }
.bp-since > span:first-child { min-width: 46px; font-variant-numeric: tabular-nums; }
.bp-card .card-top strong { line-height: 1.3; }
.bp-q { white-space: nowrap; font-size: var(--fs-13); }
.bp-code { font-size: var(--fs-12); }
.bp-orders { display: grid; gap: var(--s-8); }
.bp-plan-btn { justify-self: start; }

/* ---- a dispatch's rates, values and totals (094): the totals under the items, the total heavier */
tfoot.dsp-money td { position: static; font-weight: 500; color: var(--ink-2); border-top: 0; height: 32px; }
tfoot.dsp-money tr:first-child td { border-top: 1px solid var(--line-strong); }
tfoot.dsp-money td.num:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
tfoot.dsp-money tr.dsp-money-total td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line-strong); height: 40px; }
.dsp-money-dl dd { font-variant-numeric: tabular-nums; }
.dsp-money-dl .dsp-money-total { font-weight: 700; color: var(--ink); }

/* ---- Database › Finished goods › Add several (095, the layout agreed 5 Nov): the production sheet's grid, a row a product, its
   check first; a mistake boxed red in its cell with the reason under the row, a question in amber, a row already in greyed */
.as-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); margin-bottom: var(--s-12); }
.as-count { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: var(--s-8); }
.as-grow { flex: 1; }
table.as-sheet td.as-st, table.as-sheet th.as-st { min-width: 118px; padding: 0 6px; }
table.as-sheet .as-name { min-width: 190px; }
table.as-sheet .as-colour, table.as-sheet .as-kind, table.as-sheet .as-made_by, table.as-sheet .as-hsn { min-width: 110px; }
table.as-sheet .as-packed_for_category { min-width: 170px; }
table.as-sheet .as-code { min-width: 160px; }
table.as-sheet .as-tally_name { min-width: 220px; }
table.as-sheet .as-size, table.as-sheet .as-pcs_per_set, table.as-sheet .as-has_inner, table.as-sheet .as-short { min-width: 72px; }
table.as-sheet td.as-bad { box-shadow: inset 0 0 0 2px var(--red-ink); background: var(--red-wash); }
table.as-sheet td.as-bad > .input, table.as-sheet td.as-bad > .select { color: var(--red-ink); font-weight: 600; }
table.as-sheet tr.as-same td:not(.pe-rn) > .input, table.as-sheet tr.as-same td:not(.pe-rn) > .select { color: var(--ink-3); }
table.as-sheet td.as-x { padding: 0 2px; }
table.as-sheet tr.as-why td { height: auto; padding: 2px 8px 8px; white-space: normal; font-size: var(--fs-13); border-top: 0; }
table.as-sheet tr.as-why-fix td { color: var(--red-ink); }
table.as-sheet tr.as-why-look td { color: var(--warn-ink); }
table.as-sheet tr.as-why-same td { color: var(--ink-3); }
.as-foot { margin: var(--s-8) 0 0; font-size: var(--fs-13); max-width: 100ch; }
@media (max-width: 760px) { .as-several { display: none; } }   /* laptop only: a phone keeps Add product, one at a time */

/* Setup › Connections › Excel copy (decision 095): the copy's date and state, then what it holds beside the last saves */
.xc-sum { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-16) var(--s-32); margin-bottom: var(--s-16); }
.xc-sum .bp-fig strong { white-space: normal; text-wrap: balance; }
.xc-sum .bp-fig .muted { overflow-wrap: anywhere; }
.xc-state { display: grid; gap: 6px; justify-items: end; }
.xc-state .muted { font-size: var(--fs-13); }
.xc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-32); }
.xc-two .form-section { border-top: 0; padding-top: 0; align-content: start; min-width: 0; }
.xc-log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.xc-log li { padding: var(--s-8) var(--s-12); font-size: var(--fs-13); }
.xc-log li + li { border-top: 1px solid var(--line); }
.xc-line { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-12); align-items: center; }
.xc-line .pill { margin-left: auto; }
.xc-log .cell-sub { margin: var(--s-4) 0 0; }
.xc-ro { margin-top: var(--s-12); }
@media (max-width: 900px) { .xc-two { grid-template-columns: minmax(0, 1fr); } .xc-state { justify-items: start; } }