/* OCH Stock: the desktop's one stylesheet.
   Ported from the approved mock-ups (docs/mockups/signin.html, dashboard.html,
   7 Oct 2026): the tokens, the type, the shell and every dashboard component,
   verbatim where the two pages agreed. What changed and why:
     - the CSP (R96) allows no inline style, so the mock-ups' <col style="width">
       are classes here (.c-*), and a gauge's segments get their left and width
       from the page through CSSOM (pages/dashboard.js);
     - the sign-in mark's "Stock" half is navy on white paper and white on the
       navy bar, so each page's .mark-stock is scoped to where it sits;
     - the fonts are self-hosted (public/fonts/, the @fontsource latin files);
     - a few states the mock-ups did not draw: an empty or notice block, an
       empty rail panel, a failed undo bar, a room still on KeepStock, a page
       error and the placeholder for a page built in a later task. */

/* ---------------------------------------------------------------- fonts --
   Latin subsets, the same unicode-range Google Fonts serves, so a character
   outside it (the → on the status strip) falls back exactly as the mock-ups did. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   OCH Stock design tokens (the mock-ups', verbatim).
   Navy is the institution and the frame. Teal is reserved for what the
   system proposes (a refill, a selection, the next step). Everything
   else is ink on cool paper, plus three status colours.
   ===================================================================== */
:root {
  /* brand */
  --navy:          #0E355C;
  --navy-deep:     #0A2846;   /* header shadow line, pressed states */
  --navy-hover:    #174673;
  --navy-wash:     #E6EDF4;   /* identity tags: room, PO */
  --teal:          #1FC3AE;   /* fills only: never text on white (2.1:1) */
  --teal-deep:     #0A7769;   /* teal as text and focus: 5.2:1 on white */
  --teal-wash:     #DDF5F1;

  /* surfaces */
  --paper:         #EDF1F4;   /* page: cool, shelving-steel grey, not cream */
  --surface:       #FFFFFF;
  --sunk:          #F5F7F9;
  --rule:          #D3DCE4;
  --rule-soft:     #E6EBF0;

  /* ink */
  --ink:           #10243A;
  --ink-2:         #33475B;
  --muted:         #5C6D7E;
  --faint:         #8797A7;
  --on-navy:       #FFFFFF;
  --on-navy-2:     #AFC2D6;
  --on-navy-3:     #7F98B2;

  /* status */
  --short:         #B3412A;   /* below minimum, late */
  --short-wash:    #FBEAE5;
  --onorder:       #2D6497;   /* on order: sent, not received */
  --onorder-wash:  #E4EDF7;
  --attention:     #8A5A00;   /* needs attention: cannot be actioned as it stands */
  --attention-edge:#E2A01B;
  --attention-wash:#FFF3D9;
  --ok:            #2C735B;
  --ok-wash:       #E2F1EA;

  --focus:         #0A7769;

  /* type */
  --font-display: "Barlow Condensed", "Bahnschrift SemiCondensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --font-body:    "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono:    "Atkinson Hyperlegible Mono", "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;

  --r: 4px;
  --bar-h: 50px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 13.5px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-deep); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.mono { font-family: var(--font-mono); }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font: 600 11.5px/1 var(--font-display); text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}

/* The mark: two label segments, the way a bin label reads. */
.mark {
  display: inline-flex; align-items: stretch; flex: none;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; line-height: 1; text-decoration: none;
  border-radius: 3px; overflow: hidden;
}
.mark-och   { background: var(--teal); color: var(--navy); padding: .34em .4em .28em .48em; }
.mark-stock { background: var(--surface); color: var(--navy); padding: .34em .48em .28em .4em; }

/* =====================================================================
   SIGN-IN (docs/mockups/signin.html)
   ===================================================================== */
.signin {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-size: 14px;
}
.signin .mark-och   { padding: .32em .42em .28em .5em; }
.signin .mark-stock { background: var(--navy); color: var(--on-navy); padding: .32em .5em .28em .42em; }
.signin-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1.35fr);
  align-items: center;
  padding: 48px 24px;
}
.signin-block { grid-column: 2; }
.signin-block .mark { font-size: 30px; }
.signin-lede {
  margin: 18px 0 30px;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 34ch;
}

.form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--navy);
  border-radius: var(--r);
  padding: 26px 28px 24px;
}
.form h1 {
  margin: 0 0 18px;
  font: 600 26px/1 var(--font-display);
  letter-spacing: .01em;
}
.form .field { display: block; margin-bottom: 16px; }
.field-label {
  display: block; margin-bottom: 6px;
  font: 600 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2);
}
.form .field input {
  width: 100%; height: 42px; padding: 0 12px;
  font: 500 16px var(--font-body); color: var(--ink);
  background: var(--surface);
  border: 1px solid #B9C6D2; border-radius: 3px;
}
.form .field input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.form .field input[type=password] { font-family: var(--font-mono); letter-spacing: .12em; }
/* "Shared computer" (R98): the box, its name, and what it does under the name. */
.check.signin-shared { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 18px; }
.signin-shared input { margin-top: 2px; }
.signin-shared-label { display: block; font-weight: 600; color: var(--ink); }
.signin-shared-hint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.btn-primary {
  display: block; width: 100%; height: 44px; margin-top: 6px;
  font: 600 16px var(--font-body); color: var(--on-navy);
  background: var(--navy); border: 0; border-radius: 3px; cursor: pointer;
}
.btn-primary:hover { background: var(--navy-hover); }
.btn-primary:disabled { background: #9AABBB; cursor: default; }
.form-note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--muted);
}
.form-error {
  margin: 0 0 14px; padding: 9px 11px;
  font-size: 13.5px; color: var(--short); background: var(--short-wash);
  border-left: 3px solid var(--short); border-radius: 2px;
}
.workers-note { margin: 16px 2px 0; font-size: 13px; color: var(--muted); }

/* The shelf edge: the eight rooms, as the label strip on the front of a shelf. */
.shelf {
  background: var(--navy);
  border-top: 3px solid var(--navy-deep);
  padding: 16px 24px 18px;
}
.shelf-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.shelf-title {
  font: 600 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  color: var(--on-navy-3);
}
.shelf ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.shelf li {
  display: inline-flex; align-items: stretch;
  border: 1px solid #2E5781; border-radius: 3px; overflow: hidden;
  font-size: 13px; color: var(--on-navy-2);
}
.shelf li b, .shelf li span { display: flex; align-items: center; height: 28px; }
.shelf li b {
  font: 600 12px/1 var(--font-mono); letter-spacing: .04em;
  background: #EAF0F5; color: var(--navy);
  padding: 0 7px;
}
.shelf li span { padding: 0 9px 0 8px; line-height: 1; }

@media (max-width: 900px) {
  .signin-main { grid-template-columns: 1fr; padding: 32px 16px; }
  .signin-block { grid-column: 1; max-width: 420px; width: 100%; margin: 0 auto; }
}

/* =====================================================================
   SHELL (every desktop page)
   One navy bar: the mark, the pages grouped by how often they are used,
   "where is it" (lookup is global on purpose), and who is signed in with
   the scope their lists answer for.
   ===================================================================== */
.bar {
  position: sticky; top: 0; z-index: 20;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 22px;
  padding: 0 var(--gutter);
  background: var(--navy);
  border-bottom: 1px solid var(--navy-deep);
  color: var(--on-navy);
}
.bar .mark { font-size: 17px; }

.tabs { display: flex; align-items: stretch; height: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tab-group { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0 6px; }
.tab-group + .tab-group { border-left: 1px solid rgba(255,255,255,.14); }
.tab-group:first-child { padding-left: 0; }
.tab-group a {
  display: flex; align-items: center; height: 100%;
  padding: 0 11px;
  font: 600 15px/1 var(--font-display); letter-spacing: .03em;
  color: var(--on-navy-2); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.tab-group a:hover { color: var(--on-navy); }
.tab-group a[aria-current="page"] { color: var(--on-navy); border-bottom-color: var(--teal); }

.find { position: relative; margin-left: auto; flex: 0 1 230px; min-width: 160px; }
.find input {
  width: 100%; height: 32px; padding: 0 34px 0 32px;
  font: 400 13.5px var(--font-body); color: var(--on-navy);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
}
.find input::placeholder { color: var(--on-navy-3); }
.find input:focus { outline: 2px solid var(--teal); outline-offset: 0; background: rgba(255,255,255,.12); }
.find svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; stroke: var(--on-navy-3); fill: none; stroke-width: 2; }
.find kbd {
  position: absolute; right: 8px; top: 7px;
  font: 500 11px/16px var(--font-mono); color: var(--on-navy-3);
  border: 1px solid rgba(255,255,255,.22); border-radius: 3px; padding: 0 5px;
}

.who { display: flex; align-items: center; gap: 14px; flex: none; }
.who-id { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.who-name { font-weight: 600; font-size: 13.5px; }
.who-scope { font-size: 12px; color: var(--on-navy-2); }
.who-out { font-size: 12.5px; color: var(--on-navy-2); text-decoration: none; padding: 4px 0; }
.who-out:hover { color: var(--on-navy); text-decoration: underline; }

.page { padding: 22px var(--gutter) 28px; max-width: 1680px; margin: 0 auto; }
.page:focus { outline: none; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.page-head h1 { margin: 0; font: 600 34px/1 var(--font-display); letter-spacing: .005em; }
.page-meta { margin: 7px 0 0; color: var(--muted); font-size: 13.5px; }
.page-actions { display: flex; gap: 8px; flex: none; }

/* A page that is not built yet, and a page that could not load. */
.page-later { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.page-error {
  margin: 0 0 14px; padding: 9px 11px; max-width: 92ch;
  font-size: 13.5px; color: var(--short); background: var(--short-wash);
  border-left: 3px solid var(--short); border-radius: 2px;
}

/* Buttons: one primary per decision, the rest quiet. */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  font: 600 13px/1 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid #BFCBD6; border-radius: 3px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-2); }
.btn:disabled { color: var(--faint); cursor: default; border-color: var(--rule); }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-go { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.btn-go:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.btn-go:disabled { background: #9AABBB; border-color: #9AABBB; color: var(--on-navy); cursor: default; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.link { color: var(--teal-deep); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* The bin label: room · zone · bin, segmented the way the printed label reads.
   Used for every location on every page. */
.bin {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  font: 500 12px/1 var(--font-mono); white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
  background: var(--surface); text-decoration: none; color: var(--ink);
}
.bin b { background: var(--navy); color: var(--on-navy); font-weight: 600; letter-spacing: .03em; padding: 4px 5px 3px; }
.bin i { font-style: normal; color: var(--faint); padding: 4px 5px 3px; border-right: 1px solid var(--rule-soft); }
.bin span { font-weight: 600; padding: 4px 6px 3px 5px; }
a.bin:hover { border-color: var(--ink-2); }

/* ---------- undo bar: routine actions commit, then offer undo --------- */
.undo-dock { position: sticky; bottom: 22px; z-index: 30; display: flex; justify-content: center; margin-top: 28px; pointer-events: none; }
.undo {
  pointer-events: auto;
  display: flex; align-items: center; gap: 16px;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px;
  background: var(--ink); color: var(--on-navy);
  border-radius: var(--r); box-shadow: 0 10px 30px rgba(10,30,50,.28);
  font-size: 13.5px;
}
.undo b { font-family: var(--font-mono); font-weight: 600; }
.undo .ok { width: 18px; height: 18px; flex: none; stroke: var(--teal); fill: none; stroke-width: 2.6; }
.undo .bad { width: 18px; height: 18px; flex: none; stroke: #F2A48F; fill: none; stroke-width: 2.6; }
.undo button { height: 30px; padding: 0 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--on-navy); font-weight: 600; cursor: pointer; }
.undo button.undo-go { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.undo .undo-open { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.3); color: var(--on-navy); font-weight: 600; text-decoration: none; }
.undo .x { border: 0; color: var(--on-navy-3); padding: 0 6px; font-size: 18px; line-height: 1; }
/* A message the person has to read: something that did not work. */
.undo.failed { background: #5A1F12; }

/* =====================================================================
   REPLENISH (docs/mockups/dashboard.html)
   ===================================================================== */

/* ---------- room filter ------------------------------------------------ */
.rooms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rooms button {
  display: inline-flex; align-items: baseline; gap: 7px;
  height: 30px; padding: 6px 11px 0;
  font: 600 13px/1 var(--font-body); color: var(--ink-2);
  background: transparent; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer;
}
.rooms button:hover { border-color: var(--ink-2); background: var(--surface); }
.rooms button .n { font: 500 12px/1 var(--font-mono); color: var(--muted); }
/* A room still on KeepStock (R68): no count until it is chosen and read. */
.rooms button .n.ks { font: italic 500 12px/1 var(--font-body); color: var(--attention); }
.rooms button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.rooms button[aria-pressed="true"] .n { color: var(--on-navy-2); }
.rooms .rooms-all { margin-right: 6px; }

/* ---------- status strip: four counts, each a door to its own page ---- */
/* Before the first read there is nothing to count: no empty frame. */
.strip:empty, .rooms:empty { display: none; }
.strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 18px;
}
.cell {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
  padding: 13px 18px 13px 20px; text-decoration: none; color: var(--ink);
}
.cell + .cell { border-left: 1px solid var(--rule-soft); }
.cell::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--rule); }
.cell-short::before    { background: var(--short); }
.cell-approve::before  { background: var(--navy); }
.cell-receive::before  { background: var(--onorder); }
.cell-count::before    { background: var(--teal); }
.cell .big { grid-row: span 2; font: 600 40px/0.9 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cell .lbl { font-weight: 600; font-size: 14px; }
.cell .sub { font-size: 12.5px; color: var(--muted); }
.cell .sub.late { color: var(--short); font-weight: 600; }
.cell .go { position: absolute; right: 14px; top: 14px; color: var(--faint); font-size: 14px; }
.cell:hover { background: var(--sunk); }
.cell:hover .lbl { text-decoration: underline; text-underline-offset: 3px; }
.cell:hover .go { color: var(--ink); }

/* ---------- the work area: proposals + rail --------------------------- */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; }

.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.filter { position: relative; flex: 0 1 340px; }
.filter input {
  width: 100%; height: 32px; padding: 0 10px 0 30px;
  font: 400 13.5px var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid #BFCBD6; border-radius: 3px;
}
.filter svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; stroke: var(--faint); fill: none; stroke-width: 2; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.check input, td.sel input, th.sel input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal-deep); }
.toolbar .spacer { flex: 1; }
.textbtn { background: none; border: 0; padding: 4px 2px; font-size: 13px; font-weight: 600; color: var(--teal-deep); cursor: pointer; }
.textbtn:hover { text-decoration: underline; }

/* A block of proposals: the transfers, one supplier, or what needs attention. */
.block { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 14px; overflow: hidden; }
.block-head { display: flex; align-items: center; gap: 14px; padding: 13px 16px 12px; }
.block-title { margin: 0; font: 600 23px/1 var(--font-display); letter-spacing: .005em; }
.block-meta { color: var(--muted); font-size: 13px; }
.block-head .spacer { flex: 1; }
.kind {
  font: 600 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 6px 3px; border-radius: 2px;
}
.kind-transfer  { background: var(--teal-wash); color: var(--teal-deep); }
.kind-order     { background: var(--navy-wash); color: var(--navy); }
.kind-attention { background: var(--attention-wash); color: var(--attention); }

/* A notice in place of proposals: nothing short, no room live, a room on KeepStock. */
.notice { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--navy); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; }
.notice h2 { margin: 0 0 6px; font: 600 20px/1.1 var(--font-display); letter-spacing: .005em; }
.notice p { margin: 0; color: var(--ink-2); max-width: 92ch; }
.notice-ks { border-left-color: var(--attention-edge); }

/* One blanket PO inside a supplier: the shape the order will take. */
.po { border-top: 1px solid var(--rule); }
.po-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
  padding: 9px 16px 9px 10px;
}
.po.open .po-head { background: var(--sunk); border-bottom: 1px solid var(--rule-soft); }
.toggle {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: none; border: 0; padding: 4px 4px; text-align: left; cursor: pointer;
}
.toggle .chev { flex: none; width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2.2; transition: transform .12s; }
.open > .po-head .toggle .chev,
.open > .block-head .toggle .chev { transform: rotate(90deg); }
.po-num { font: 600 14px/1 var(--font-mono); letter-spacing: .02em; color: var(--navy); white-space: nowrap; }
.po-line { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fund { font: 600 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--rule); border-radius: 2px; padding: 3px 5px 2px; }
.po-valid { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.po-stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.po-stats b { font: 600 13px var(--font-mono); color: var(--ink); }
.po-stats .unpriced { color: var(--attention); }
.po-stats .ondraft a { font-weight: 600; }

/* ---------- proposal tables -------------------------------------------- */
table.lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lines th {
  font: 600 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  text-align: left; padding: 9px 8px 7px; border-bottom: 1px solid var(--rule-soft); background: var(--surface);
}
.lines td { padding: 8px 8px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.lines tr:last-child td { border-bottom: 0; }
.lines tbody tr:hover td { background: #F8FAFB; }
.lines .r { text-align: right; }
.lines th.sel, .lines td.sel { width: 38px; padding-left: 16px; padding-right: 0; }
.lines td.sel { padding-top: 10px; }
.lines td .bin { margin-top: 1px; }
/* Column widths (the mock-ups' <col style="width">, which the CSP forbids). */
col.c-sel   { width: 38px; }
col.c-bin   { width: 172px; }
col.c-level { width: 192px; }
col.c-from  { width: 238px; }
col.c-move  { width: 96px; }
col.c-order { width: 86px; }
col.c-price { width: 92px; }
col.c-value { width: 96px; }
col.c-draft { width: 84px; }
col.c-why   { width: 286px; }
.desc { display: block; font-size: 13px; line-height: 1.3; }
.code { display: block; margin-top: 3px; font: 400 11.5px/1 var(--font-mono); color: var(--muted); letter-spacing: .01em; }
.qty { font: 600 13.5px/1.3 var(--font-mono); }
.qty small { font: 400 11.5px var(--font-mono); color: var(--muted); }
/* Bought in packs: the packs under the units (2 × 25), and "per pack" under the
   price, so the value (packs × price) reads right. */
.packs { display: block; margin-top: 3px; font: 400 11.5px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.price { font: 400 13px/1.3 var(--font-mono); }
.price.none { font: italic 400 12.5px/1.3 var(--font-body); color: var(--attention); }
.value { font: 600 13px/1.3 var(--font-mono); }
.surplus { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
tr.held td { color: var(--muted); }
tr.held td .desc { color: var(--ink-2); }
.draftchip {
  display: inline-block; font: 600 11.5px/1 var(--font-mono); text-decoration: none;
  color: var(--navy); background: var(--navy-wash); border-radius: 2px; padding: 4px 6px 3px;
}
.draftchip:hover { text-decoration: underline; }
.lines-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 16px 10px; border-top: 1px solid var(--rule-soft); background: var(--sunk);
  font-size: 12.5px; color: var(--muted);
}

/* The level gauge: on hand (navy), on order (hatched), the proposal (teal), against
   the minimum (rust tick) and the maximum (ink tick). A proposal always refills to
   the maximum, so the teal ends on the maximum tick unless whole packs overshoot it.
   Each segment's left and width come from the page through CSSOM. */
.lvl { padding-top: 4px; }
.gauge { position: relative; height: 6px; width: 100%; max-width: 172px; background: var(--rule-soft); border-radius: 1px; }
.gauge span { position: absolute; top: 0; bottom: 0; }
.g-oh { background: var(--navy); }
.g-oo { background: repeating-linear-gradient(135deg, var(--onorder) 0 2px, #CFDDEB 2px 4px); }
.g-q  { background: var(--teal); }
.gauge i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; }
.g-min { background: var(--short); }
.g-max { background: var(--ink-2); width: 1px !important; }
.lvl-nums { margin-top: 7px; font: 400 12px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.lvl-nums a { color: var(--ink); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 2px; }
.lvl-nums a:hover { color: var(--teal-deep); }

/* ---------- needs attention ------------------------------------------- */
.block-attention { border-left: 4px solid var(--attention-edge); }
.causes { width: 100%; border-collapse: collapse; border-top: 1px solid var(--rule); }
.causes td { padding: 10px 16px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.causes td:first-child { width: 190px; font-weight: 600; }
.causes .count { width: 90px; font: 600 13.5px var(--font-mono); text-align: right; }
.causes .what { color: var(--ink-2); }
.causes .fix { width: 290px; text-align: right; white-space: nowrap; }
.causes .fix a + a { margin-left: 16px; }
.causes tr.zero td { color: var(--faint); }
.causes tr.zero td:first-child { font-weight: 500; }
.cause-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--attention); }

.how { margin: 4px 2px 0; font-size: 12.5px; color: var(--muted); max-width: 92ch; }
.how b { color: var(--ink-2); font-weight: 600; }

/* ---------- rail -------------------------------------------------------- */
.rail { position: sticky; top: calc(var(--bar-h) + 16px); display: grid; gap: 14px; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid var(--rule-soft); }
.panel-head h2 { margin: 0; font: 600 18px/1 var(--font-display); letter-spacing: .01em; }
.panel-head .n { font: 600 13px var(--font-mono); color: var(--muted); }
.panel-empty { margin: 0; padding: 12px 14px; font-size: 12.5px; color: var(--muted); }
.order { display: block; padding: 11px 14px 12px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--ink); }
.order:last-child { border-bottom: 0; }
.order:hover { background: var(--sunk); }
.order-top { display: flex; align-items: baseline; gap: 8px; }
.order-id { font: 600 13.5px var(--font-mono); color: var(--navy); }
.order-sup { font-weight: 600; }
.order-when { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.order-po { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.order-po .mono { font-size: 12px; }
.order-sum { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.order-sum b { font: 600 12.5px var(--font-mono); color: var(--ink); }
.state {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 12.5px; font-weight: 600;
}
.state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state-price    { color: var(--attention); }
.state-ready    { color: var(--ok); }
.state-over     { color: var(--ink-2); }
.state-onorder  { color: var(--onorder); }
.state-late     { color: var(--short); }
.order.new { box-shadow: inset 3px 0 0 var(--teal); }
.order .new-tag { font: 600 10.5px/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--teal-deep); background: var(--teal-wash); padding: 3px 5px 2px; border-radius: 2px; }
.panel-foot { padding: 9px 14px 10px; border-top: 1px solid var(--rule-soft); font-size: 12.5px; }

/* ---------- narrower screens ------------------------------------------ */
@media (max-width: 1180px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .po-head { grid-template-columns: minmax(0, 1fr) auto; }
  .po-stats { grid-column: 1 / -1; padding-left: 36px; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  :root { --gutter: 16px; }
  .find, .who-id { display: none; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:nth-child(3) { border-left: 0; }
  .cell:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
  .page-head { flex-direction: column; align-items: flex-start; }
  .block, .lines-wrap { overflow-x: auto; }
  table.lines { min-width: 760px; }
  .causes .fix { white-space: normal; }
}

/* =====================================================================
   ROUND 2 shared components (docs/mockups/items.html and every page after
   the dashboard, verbatim), for Items and Rooms (Task 18) and the pages
   after them. Changed: the select's chevron is a file (the CSP's img-src
   allows data:, but every url() here is a file in public/), and the
   mock-ups' style attributes are classes at the end of this block.
   ===================================================================== */

/* Segmented view switch: same look as the dashboard's room filter. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .seg a {
  display: inline-flex; align-items: baseline; gap: 7px;
  height: 30px; padding: 6px 11px 0;
  font: 600 13px/1 var(--font-body); color: var(--ink-2); text-decoration: none;
  background: transparent; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.seg button:hover, .seg a:hover { border-color: var(--ink-2); background: var(--surface); }
.seg .n { font: 500 12px/1 var(--font-mono); color: var(--muted); }
.seg [aria-pressed="true"], .seg [aria-current="true"],
.seg button[aria-pressed="true"]:hover, .seg a[aria-current="true"]:hover { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.seg [aria-pressed="true"] .n, .seg [aria-current="true"] .n { color: var(--on-navy-2); }
.seg .n.warn { color: var(--attention); }
.seg [aria-pressed="true"] .n.warn { color: #FFD789; }

/* Filters: search, selects, toggles; every list has one. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.filters .spacer { flex: 1; }
.filters .filter { flex: 1 1 220px; }
.input, .select {
  height: 32px; padding: 0 10px;
  font: 400 13.5px var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid #BFCBD6; border-radius: 3px;
}
.select {
  appearance: none; padding-right: 28px; font-weight: 500; cursor: pointer;
  background-image: url("/select-chevron.svg");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px;
}
.input:focus, .select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input:disabled, .select:disabled { background-color: var(--sunk); color: var(--ink-2); cursor: default; }
.input.mono { font-family: var(--font-mono); font-size: 13px; }
.input.qtyin { width: 64px; text-align: right; font-family: var(--font-mono); font-size: 13px; }
.lab { display: block; margin-bottom: 6px; font: 600 11.5px/1 var(--font-display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.field { display: block; }
.field .input, .field .select { width: 100%; }
.hint { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.formgrid .wide { grid-column: 1 / -1; }
.formrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }

/* A detail panel: one record, in sections. */
.detail { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.detail-head { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px 14px; border-bottom: 1px solid var(--rule); }
.detail-head h2 { margin: 0; font: 600 25px/1.08 var(--font-display); letter-spacing: .005em; }
.detail-head .sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.detail-head .acts { margin-left: auto; display: flex; gap: 8px; flex: none; }
.detail-empty { padding: 28px 18px; color: var(--muted); font-size: 13.5px; }
.section { padding: 14px 18px 16px; border-bottom: 1px solid var(--rule-soft); }
.section:last-child { border-bottom: 0; }
.section > h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font: 600 17px/1.1 var(--font-display); letter-spacing: .01em; }
.section > h3 .count { font: 500 12.5px var(--font-mono); color: var(--muted); }
.section > h3 .aside { margin-left: auto; font: 600 13px var(--font-body); letter-spacing: 0; }
.section > h3 .aside.muted { font-weight: 400; }
.section > p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.section-flush { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.section-flush > h3 { padding: 0 18px; }

/* Compact table inside a detail panel. */
table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini th { padding: 6px 10px 6px 0; text-align: left; font: 600 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); border-bottom: 1px solid var(--rule-soft); }
.mini td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.mini tr:last-child td { border-bottom: 0; }
.mini .r { text-align: right; }
.mini th:last-child, .mini td:last-child { padding-right: 0; }
.mini tr.dim td { color: var(--faint); }

/* Rows in a list that open a record. */
.lines tbody tr.pick { cursor: pointer; }
.lines tbody tr.on td { background: #EAF6F3; }
.lines tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--teal); }

/* Callouts: a plain note, something to fix, a refusal, a success. */
.note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--rule); border-radius: 2px; background: var(--sunk); font-size: 13px; color: var(--ink-2); }
.note-attention { background: var(--attention-wash); border-left-color: var(--attention-edge); color: #563A00; }
.note-refuse { background: var(--short-wash); border-left-color: var(--short); color: #6A2313; }
.note-ok { background: var(--ok-wash); border-left-color: var(--ok); color: #1C4A3A; }
.note b, .note strong { color: inherit; }

/* On/off switch (active, live). */
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.switch input { appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 10px; background: #B5C2CE; cursor: pointer; transition: background .12s; }
.switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .12s; }
.switch input:checked { background: var(--teal-deep); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:disabled { cursor: default; opacity: .6; }
.switch small { font-weight: 400; color: var(--muted); }

/* Numbered steps: only where order matters (a remedy). */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { position: relative; padding: 0 0 14px 36px; counter-increment: step; font-size: 13px; }
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  font: 600 12px/1 var(--font-mono); background: var(--navy-wash); color: var(--navy);
}
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 3px; width: 1px; background: var(--rule); }
.steps > li b.t { display: block; font-size: 13.5px; margin-bottom: 2px; }
.steps > li.done::before { background: var(--ok); color: #fff; content: "✓"; }
.steps .btn { margin-left: 6px; }

/* Big figures inside a panel (room totals). */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 3px; overflow: hidden; }
.fig { background: var(--surface); padding: 10px 12px 11px; }
.fig .v { display: block; font: 600 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fig .k { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.fig .k b { color: var(--ink-2); font-weight: 600; }
.fig.warn .v { color: var(--attention); }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.stack { display: grid; gap: 14px; }

/* =====================================================================
   ITEMS (docs/mockups/items.html)
   ===================================================================== */
.items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.review-note { margin: 0; border-radius: 0; border-left-width: 0; border-bottom: 1px solid var(--rule-soft); padding: 11px 16px; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--sunk); font-size: 13px; }
.bulk b { font-family: var(--font-mono); }
.pl-select { height: 28px; font-size: 12.5px; max-width: 100%; }
.pl-select.general { border-color: var(--attention-edge); background-color: var(--attention-wash); color: var(--attention); }
.formgrid .pl-select { height: 32px; }
.pl-chip { display: inline-block; padding: 4px 7px 3px; border-radius: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--sunk); }
.pl-chip.general { color: var(--attention); background: var(--attention-wash); }
.dupe { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--onorder); }
.lines td.pad-l, .lines th.pad-l { padding-left: 16px; }
.lines td.pad-r, .lines th.pad-r { padding-right: 16px; }
.lines td.pad-l18, .lines th.pad-l18 { padding-left: 18px; }
.lines td.pad-r18, .lines th.pad-r18 { padding-right: 18px; }
col.c-cat   { width: 200px; }
col.c-line  { width: 190px; }
col.c-plsel { width: 190px; }
col.c-when  { width: 120px; }
.rooms-n { font: 500 12.5px var(--font-mono); }
col.c-rooms { width: 80px; }
col.c-oh    { width: 90px; }
col.c-ipol  { width: 140px; }
col.c-ibin  { width: 188px; }
col.c-ilvl  { width: 210px; }
col.c-iroom { width: 120px; }
col.c-rlevel { width: 150px; }
col.c-rnum  { width: 56px; }
col.c-ruse  { width: 170px; }
.formgrid.pl-grid { grid-template-columns: 1fr 1fr 110px; }
.rule-level { font-weight: 600; }
.rule-level small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.mini tr.in-force td { background: var(--teal-wash); }
span.eff { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--teal-deep); }
span.eff::before { content: "✓"; }
.ruleform { margin-top: 12px; padding: 12px; background: var(--sunk); border: 1px solid var(--rule-soft); border-radius: 3px; }
.ruleform .input.qtyin { height: 32px; }
.addcode { margin-top: 10px; }
.addcode .input.mono { width: 150px; }
.addcode .note { flex: 1 1 100%; }
.live-dot { font-size: 11.5px; color: var(--ok); font-weight: 600; }
.ks { font-size: 11.5px; color: var(--faint); }
.dormant-tag { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
/* Suggested from usage (Task 23, R115): the Items page's stock rows and the Rooms bin panel. */
.suggest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 5px; font-size: 12px; color: var(--ink-2); }
.suggest-text { font-weight: 600; color: var(--teal-deep); }
.suggest-where, .suggest-same { color: var(--faint); }
.tag-estimate { padding: 1px 6px; border: 1px solid var(--rule-soft); border-radius: 9px; background: var(--sunk); font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.suggest-list { margin: 8px 0 4px; padding: 8px 10px; background: var(--teal-wash); border-radius: 3px; }
.suggest-list .suggest { margin-top: 2px; }
.suggest-item { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.suggest-item:first-child { margin-top: 0; }
.retire-row { align-items: center; }
.retire-row .muted { flex: 1 1 300px; }
.empty-block { padding: 40px 24px; text-align: center; }
.empty-block h2 { margin: 0 0 8px; font: 600 22px/1.1 var(--font-display); }
.empty-block p { margin: 0 auto; max-width: 56ch; font-size: 13.5px; color: var(--ink-2); }

.dgroup { padding: 11px 16px 12px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; }
.dgroup:hover { background: var(--sunk); }
.dgroup.on { background: #EAF6F3; box-shadow: inset 3px 0 0 var(--teal); }
.dgroup .dname { font-weight: 600; font-size: 13.5px; }
.dgroup .dcodes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.dgroup .dcodes .mono { font-size: 12px; color: var(--ink); }
.dgroup .dnote { margin-top: 5px; font-size: 12px; color: var(--muted); }
.cmp th, .cmp td { vertical-align: top; }
.cmp td:first-child { color: var(--muted); width: 150px; }
.cmp .keep { color: var(--teal-deep); font-weight: 600; font-size: 12px; }

/* =====================================================================
   ROOMS (docs/mockups/rooms.html)
   ===================================================================== */
.rooms-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.roomlist a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 11px 14px 12px; border-bottom: 1px solid var(--rule-soft); color: var(--ink); text-decoration: none; }
.roomlist a:last-of-type { border-bottom: 0; }
.roomlist a:hover { background: var(--sunk); }
.roomlist a.on { background: #EAF6F3; box-shadow: inset 3px 0 0 var(--teal); }
.roomlist .rcode { grid-row: span 2; margin: 0; font: 600 12px/1 var(--font-mono); color: var(--on-navy); background: var(--navy); padding: 5px 0 4px; text-align: center; border-radius: 2px; align-self: start; letter-spacing: .03em; }
.roomlist .nm { font-weight: 600; font-size: 14px; }
.roomlist .st { font-size: 12px; text-align: right; }
.roomlist .meta { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
.roomlist .meta b { font: 500 12px var(--font-mono); color: var(--ink-2); }
.roomlist .live { color: var(--ok); font-weight: 600; }
.roomlist .ks { color: var(--faint); font-size: 12px; }
.roomlist .tot { padding: 10px 14px; background: var(--sunk); font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule-soft); }
.vans .empty { margin: 0; padding: 14px; font-size: 13px; color: var(--ink-2); }
.vans .van { padding: 9px 14px; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
.vans .van:last-child { border-bottom: 0; }
.r-code { font-size: 16px; color: var(--muted); }

.liveband { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 18px; background: var(--ok-wash); border-bottom: 1px solid #CBE5D9; font-size: 13px; color: #1C4A3A; }
.liveband .switch { color: #1C4A3A; }
.liveband.ks { background: var(--sunk); border-bottom-color: var(--rule-soft); color: var(--ink-2); }
.liveband.ks .switch { color: var(--ink); }
.roomform { padding: 12px 18px 14px; background: var(--sunk); border-bottom: 1px solid var(--rule-soft); }
.roomform .field { flex: 1 1 200px; }

.treebox { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; }
.tree { border-right: 1px solid var(--rule-soft); }
.tree-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--rule-soft); }
.tree-tools .filter { flex: 0 1 260px; }
.tree-tools .filter input { height: 28px; font-size: 12.5px; }
.zone-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--sunk); border-bottom: 1px solid var(--rule-soft); }
.zone-row .zname { font-weight: 600; font-size: 14px; }
.zone-row .zmeta { font-size: 12.5px; color: var(--muted); }
.zone-row .spacer { flex: 1; }
.zone-row .bin i:last-child { border-right: 0; }
.binform { padding: 10px 18px 12px 26px; border-bottom: 1px solid var(--rule-soft); background: var(--surface); }
.binform .input { height: 28px; font-size: 12.5px; }
.binform .input.short { width: 70px; }
.aisle { border-bottom: 1px solid var(--rule-soft); }
.aisle-head { display: grid; grid-template-columns: 26px 70px minmax(0, 1fr) 90px 90px; align-items: center; gap: 8px; width: 100%; padding: 8px 18px 8px 26px; background: none; border: 0; text-align: left; cursor: pointer; font-size: 13px; }
.aisle-head:hover { background: #F8FAFB; }
.aisle-head .chev { width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 2.2; transition: transform .12s; }
.aisle.open > .aisle-head .chev { transform: rotate(90deg); }
.aisle-head .an { font: 600 13px var(--font-mono); }
.aisle-head .am { color: var(--muted); }
.aisle-head .num { font: 500 12.5px var(--font-mono); text-align: right; }
.aisle.open > .aisle-head { background: #F3F7F9; }
.aisle .lines td { padding-top: 7px; padding-bottom: 7px; }
.aisle .lines td.pad-a, .aisle .lines th.pad-a { padding-left: 26px; }
.aisle .lines td.pad-r14, .aisle .lines th.pad-r14 { padding-right: 14px; }
.aisle .lines tr.dormant td { color: var(--faint); }
.aisle .lines-foot { padding-left: 26px; }
col.c-rbin  { width: 180px; }
col.c-rlvl  { width: 152px; }
col.c-every { width: 66px; }
col.c-last  { width: 96px; }
.due { color: var(--attention); font-weight: 600; }
.more-aisles { padding: 9px 18px 10px 60px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--rule-soft); }
.tree-empty { margin: 0; padding: 16px 18px; font-size: 13px; color: var(--muted); }

.editbin { padding: 14px 16px 16px; background: var(--surface); }
.editbin h3 { margin: 0 0 4px; font: 600 18px/1.1 var(--font-display); }
.editbin .sub { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.editbin .formgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.editbin .formgrid .wide { grid-column: 1 / -1; }
.editbin .formgrid .half { grid-column: span 2; }
.editbin .every { display: flex; align-items: center; gap: 8px; }
.editbin .every .input { width: 70px; }
.editbin .act-cell { align-self: end; padding-bottom: 6px; }
.readonly { display: block; height: 32px; padding: 7px 10px 0; font: 500 13px var(--font-mono); background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .items, .rooms-page { grid-template-columns: minmax(0, 1fr); }
  .treebox { grid-template-columns: minmax(0, 1fr); }
  .tree { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
}
@media (max-width: 860px) {
  .formgrid, .formgrid.pl-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-head { flex-wrap: wrap; }
  .detail-head .acts { margin-left: 0; }
  table.mini { display: block; overflow-x: auto; }
}

/* =====================================================================
   SUPPLIERS, ORDERS AND RECEIVE (Task 19)
   ===================================================================== */
/* State chips: an order's state, a delivery's due day. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 7px; border-radius: 2px; font: 600 12px/1 var(--font-body); white-space: nowrap; }
.chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-draft     { color: var(--ink-2); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.chip-awaiting  { color: var(--navy); background: var(--navy-wash); }
.chip-approved  { color: var(--on-navy); background: var(--navy); }
.chip-sent      { color: var(--onorder); background: var(--onorder-wash); }
.chip-partly    { color: var(--attention); background: var(--attention-wash); }
.chip-received  { color: var(--ok); background: var(--ok-wash); }
.chip-cancelled { color: var(--faint); box-shadow: inset 0 0 0 1px var(--rule); }
.chip-late      { color: var(--short); background: var(--short-wash); }
.chip-plain::before { display: none; }
.input.money { width: 92px; text-align: right; font-family: var(--font-mono); font-size: 13px; }
.input.need { border-color: var(--attention-edge); background: var(--attention-wash); }
.input.need::placeholder { color: var(--attention); font-family: var(--font-body); font-style: italic; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.kv-2 { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
.why { font-size: 12.5px; color: var(--attention); font-weight: 600; }
.acts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- suppliers (docs/mockups/suppliers.html) ---------- */
.sup-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.sup-page .suplist a { display: block; padding: 12px 14px 13px; border-bottom: 1px solid var(--rule-soft); color: var(--ink); text-decoration: none; }
.sup-page .suplist a:hover { background: var(--sunk); }
.sup-page .suplist a.on { background: #EAF6F3; box-shadow: inset 3px 0 0 var(--teal); }
.sup-page .suplist .nm { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14.5px; }
.sup-page .suplist .nm small { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--ok); }
.sup-page .suplist .nm small.off { color: var(--faint); }
.sup-page .suplist .meta { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.sup-page .suplist .meta b { font: 500 12px var(--font-mono); color: var(--ink-2); }
.sup-page .suplist .foot { padding: 12px 14px; border-top: 1px solid var(--rule-soft); }
.sup-page .suplist .foot .btn { width: 100%; justify-content: center; }
.sup-page .suplist .foot form { display: grid; gap: 8px; }
.sup-page .sup-form { grid-template-columns: 150px minmax(0, 1.6fr) minmax(0, 1fr) 110px 120px; }
.sup-page .lead { display: flex; align-items: center; gap: 7px; }
.sup-page .lead .input { width: 56px; }
.sup-page .active-cell { align-self: end; padding-bottom: 6px; }
.sup-page .price-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sup-page .price-grid .note { margin-bottom: 12px; }
.sup-page .drop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed #AEBFCE; border-radius: var(--r); background: var(--sunk); }
.sup-page .drop svg { flex: none; width: 26px; height: 26px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.sup-page .drop b { display: block; font-size: 14px; }
.sup-page .drop span { font-size: 12.5px; color: var(--muted); }
.sup-page .drop .btn { margin-left: auto; }
.sup-page .drop input { display: none; }
.sup-page .csv { margin: 8px 0 0; padding: 9px 11px; font: 400 12px/1.55 var(--font-mono); background: var(--sunk); border: 1px solid var(--rule-soft); border-radius: 3px; color: var(--ink-2); white-space: pre; }
.sup-page .pl-report { margin-top: 12px; }
.sup-page .pl-report ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.sup-page .pl-report .acts-row { margin-top: 10px; }
.sup-page .inforce { color: var(--ok); font-weight: 600; font-size: 12.5px; }
.sup-page .ended { color: var(--faint); font-size: 12.5px; }
.sup-page .addrow td { background: var(--sunk); }
.sup-page .addrow .input, .sup-page .addrow .select { height: 28px; font-size: 12.5px; width: 100%; }
.sup-page .po-notes { border-top: 1px solid var(--rule-soft); display: grid; gap: 8px; }
.sup-page .sup-filters { padding: 0 18px; }
col.c-po    { width: 124px; }
col.c-fund  { width: 116px; }
col.c-day   { width: 124px; }
col.c-now   { width: 84px; }
col.c-on    { width: 72px; }
col.c-sku   { width: 160px; }
col.c-pack  { width: 72px; }
col.c-last  { width: 104px; }
col.c-lands { width: 150px; }

/* ---------- orders (docs/mockups/orders.html) ---------- */
.orders-page { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 20px; align-items: start; }
.orders-page .olist .lines td { padding-top: 9px; padding-bottom: 9px; }
.orders-page .oid { font: 600 13.5px/1.2 var(--font-mono); color: var(--navy); }
.orders-page .osub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.orders-page .osum { font: 600 13px/1.2 var(--font-mono); }
.orders-page .osum small { display: block; margin-top: 3px; font: 400 12px var(--font-body); color: var(--muted); }
.orders-page .osum small.warn { color: var(--attention); }
.orders-page .osum small.late { color: var(--short); font-weight: 600; }
.orders-page .ostate .chip { margin-bottom: 4px; }
.orders-page .ostate small { display: block; font-size: 12px; color: var(--muted); }
.orders-page .track { display: flex; list-style: none; margin: 0; padding: 0; }
.orders-page .track li { position: relative; flex: 1; padding-top: 16px; font-size: 12px; color: var(--faint); }
.orders-page .track li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--rule); }
.orders-page .track li::after { content: ""; position: absolute; top: 1px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--rule); }
.orders-page .track li.done { color: var(--ink-2); }
.orders-page .track li.done::before { background: var(--navy); }
.orders-page .track li.done::after { background: var(--navy); box-shadow: none; }
.orders-page .track li.now { color: var(--ink); font-weight: 600; }
.orders-page .track li.now::after { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.orders-page .track li:last-child::before { right: auto; width: 10px; }
.orders-page .ladder { position: relative; margin: 8px 0 4px; padding: 30px 0 54px; }
.orders-page .ladder-track { position: relative; height: 8px; border-radius: 1px; background: #E2E8EE; }
.orders-page .ladder-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--teal-wash); }
.orders-page .rung { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink-2); }
.orders-page .rung span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--ink-2); text-align: center; line-height: 1.25; }
.orders-page .rung.last span { transform: translateX(-92%); }
.orders-page .rung span b { display: block; font: 600 12.5px var(--font-mono); color: var(--ink); }
.orders-page .rung.you { background: var(--teal-deep); }
.orders-page .rung.you span b { color: var(--teal-deep); }
.orders-page .value-pin { position: absolute; top: -30px; transform: translateX(-50%); white-space: nowrap; font: 600 12.5px var(--font-mono); color: var(--navy); }
.orders-page .value-pin::after { content: ""; position: absolute; left: 50%; top: 18px; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--navy); }
.orders-page .value-pin.start { transform: translateX(-5px); }
.orders-page .value-pin.start::after { left: 5px; margin-left: 0; }
.orders-page .value-pin.end { transform: translateX(-100%); }
.orders-page .value-pin.end::after { left: auto; right: 0; margin-left: 0; }
.orders-page .olines td { vertical-align: middle; }
.orders-page .olines .desc { font-size: 12.5px; }
.orders-page .total-row td { background: var(--sunk); font-weight: 600; }
.orders-page .later { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.orders-page .later li { display: flex; gap: 10px; align-items: baseline; }
.orders-page .later li b { min-width: 168px; color: var(--ink-2); font-weight: 600; }
.orders-page .trail { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.orders-page .trail li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
.orders-page .trail li:last-child { border-bottom: 0; }
.orders-page .trail time { font: 400 12.5px var(--font-mono); color: var(--muted); }
.orders-page .trail li.pending { color: var(--faint); }
.orders-page .cancel-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.orders-page .cancel-form .input { flex: 1 1 240px; }
.orders-page .mail-result { margin-top: 10px; }
col.c-oid    { width: 182px; }
col.c-ostate { width: 150px; }
col.c-obin   { width: 176px; }
col.c-oqty   { width: 76px; }
col.c-opack  { width: 58px; }
col.c-oprice { width: 104px; }
col.c-oval   { width: 88px; }

/* ---------- receive (docs/mockups/receive.html) ---------- */
.recv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.recv .deliv a { display: block; padding: 11px 14px 12px; border-bottom: 1px solid var(--rule-soft); color: var(--ink); text-decoration: none; }
.recv .deliv a:last-child { border-bottom: 0; }
.recv .deliv a:hover { background: var(--sunk); }
.recv .deliv a.on { background: #EAF6F3; box-shadow: inset 3px 0 0 var(--teal); }
.recv .deliv .top { display: flex; align-items: baseline; gap: 8px; }
.recv .deliv .id { font: 600 13.5px var(--font-mono); color: var(--navy); }
.recv .deliv .when { margin-left: auto; font-size: 12px; color: var(--muted); }
.recv .deliv .po { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.recv .deliv .chip { margin-top: 8px; }
.recv .find-order { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
.recv .find-order .input { width: 100%; }
.recv .receipt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.recv .receipt .lab { margin: 0; }
.recv .receipt .rid { font: 600 15px var(--font-mono); color: var(--navy); background: var(--navy-wash); padding: 5px 8px 4px; border-radius: 2px; letter-spacing: .03em; }
.recv .res { font-size: 12.5px; font-weight: 600; }
.recv .res.ok { color: var(--ok); }
.recv .res.short { color: var(--attention); }
.recv .res.over { color: var(--onorder); }
.recv .res.done { color: var(--muted); font-weight: 400; }
.recv .check-sum { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 18px; background: var(--sunk); border-top: 1px solid var(--rule-soft); font-size: 13px; }
.recv .check-sum b { font-family: var(--font-mono); }
.recv .binpick { height: 28px; font-size: 12.5px; width: 100%; }
.recv .walk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.recv .stop { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 13px 13px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.recv .stop .seq { position: absolute; top: 10px; right: 12px; font: 500 11.5px var(--font-mono); color: var(--faint); }
.recv .stop .put { font: 600 21px/1.05 var(--font-display); letter-spacing: .005em; padding-right: 34px; }
.recv .stop .put .bin { font-size: 13px; vertical-align: 2px; margin-left: 2px; }
.recv .stop .what { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.recv .stop .nums { font: 400 12px/1.4 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.recv .stop .nums b { color: var(--ink); font-weight: 600; }
.recv .stop .cost { padding-top: 7px; border-top: 1px solid var(--rule-soft); font-size: 12px; color: var(--muted); }
.recv .stop .cost b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
.recv .stop .go { margin-top: auto; }
.recv .stop.done { background: var(--sunk); }
.recv .stop.done .put { color: var(--muted); }
.recv .stop.done .go { font-size: 12.5px; font-weight: 600; color: var(--ok); display: flex; align-items: center; gap: 6px; }
.recv .stop.now { border-color: var(--teal-deep); box-shadow: 0 0 0 2px var(--teal-wash), inset 0 3px 0 var(--teal); }
.recv .stop .put small { display: block; margin-top: 4px; font: 600 12px var(--font-body); color: var(--attention); letter-spacing: 0; }
.recv .stop .err { font-size: 12px; color: var(--short); font-weight: 600; }
col.c-rbin  { width: 190px; }
col.c-rord  { width: 84px; }
col.c-rbef  { width: 88px; }
col.c-rthis { width: 110px; }
col.c-rres  { width: 150px; }

@media (max-width: 1180px) {
  .sup-page, .orders-page, .recv { grid-template-columns: minmax(0, 1fr); }
  .recv .walk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sup-page .sup-form, .sup-page .price-grid, .kv-2 { grid-template-columns: minmax(0, 1fr); }
  .recv .walk { grid-template-columns: minmax(0, 1fr); }
}
/* Print the walk: the put-away cards and nothing else (the body carries
   .recv-printing while the print dialog is open). */
@media print {
  .recv-printing .bar, .recv-printing .page-head, .recv-printing .deliv, .recv-printing .recv-check,
  .recv-printing .undo-dock, .recv-printing .stop .go, .recv-printing .walk-acts { display: none !important; }
  .recv-printing .recv { display: block; }
  .recv-printing .recv .walk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sup-page .slot > .section:last-child { border-bottom: 1px solid var(--rule-soft); }
.sup-page .slot:last-child > .section:last-child { border-bottom: 0; }

/* =====================================================================
   COUNTS, WHERE IS IT? AND LABELS (Task 20: docs/mockups/counts.html,
   lookup.html, the label on rooms.html). Page rules are scoped to the
   page's own wrapper; the mock-ups' style attributes are classes (R96).
   ===================================================================== */
.chip-live      { color: var(--ok); background: var(--ok-wash); }
.chip-keepstock { color: var(--muted); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.attention-text { color: var(--attention); font-weight: 600; }

/* ---------- counts ---------- */
.counts-page .counts-top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-bottom: 18px; }
.counts-page .sheets td { vertical-align: middle; }
.counts-page .sheet-name { font-weight: 600; }
.counts-page .sheet-name small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.counts-page .progress { white-space: nowrap; display: flex; align-items: center; gap: 8px; font: 500 12.5px var(--font-mono); color: var(--ink-2); }
.counts-page .progress i { display: block; width: 64px; height: 5px; border-radius: 1px; background: var(--rule-soft); position: relative; overflow: hidden; }
.counts-page .progress i b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--teal-deep); }
.counts-page .due-row td { background: #F2FAF8; }
.counts-page .builder .section { padding-top: 12px; padding-bottom: 14px; }
.counts-page .builder .h-small { font-size: 21px; }
.counts-page .radio { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: 13.5px; cursor: pointer; }
.counts-page .radio input[type="radio"] { margin: 3px 0 0; accent-color: var(--teal-deep); }
.counts-page .radio small { display: block; color: var(--muted); font-size: 12px; }
.counts-page .radio .n-in { width: 64px; height: 28px; margin-left: 6px; }
.counts-page .wide-select { width: 100%; }
.counts-page .btn.full { width: 100%; justify-content: center; }
.counts-page .grid-head { flex-wrap: wrap; align-items: center; gap: 18px; }
.counts-page .inline-field { display: flex; align-items: center; gap: 8px; }
.counts-page .inline-field .lab { margin: 0; }
.counts-page .at-in { width: 220px; }
.counts-page .th-sub { font-weight: 500; letter-spacing: .04em; }
.counts-page .entry td { vertical-align: middle; }
.counts-page .entry .num { font: 500 13px var(--font-mono); text-align: right; }
.counts-page .diff { font: 600 13.5px var(--font-mono); text-align: right; }
.counts-page .diff.zero { color: var(--faint); font-weight: 400; }
.counts-page .diff.neg, .counts-page .qty.neg { color: var(--short); }
.counts-page .diff.pos, .counts-page .qty.pos { color: var(--ok); }
.counts-page .entry tr.sup td { background: #FBFAF4; }
.counts-page .entry tr.sup .desc { color: var(--muted); }
.counts-page .sup-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--attention); }
.counts-page .entry tr.todo td { background: #FBFCFD; }
.counts-page .post-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 18px; background: var(--sunk); border-top: 1px solid var(--rule); font-size: 13px; }
.counts-page .post-bar .spacer { flex: 1; }
.counts-page .post-when, .counts-page .post-confirm { flex-basis: 100%; font-size: 12.5px; color: var(--ink-2); }
.counts-page .post-confirm .btn { margin-left: 8px; }
.counts-page .variance { margin-top: 26px; }
.counts-page .var-head { margin: 0 0 12px; }
.counts-page .h-var { margin: 0; font: 600 26px/1 var(--font-display); }
.counts-page .var-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.counts-page .vcode { text-align: right; }
.counts-page .note.flat { margin: 10px 0 0; border-radius: 0; }
.counts-page .bin i.last { border-right: 0; }
col.c-kind    { width: 96px; }
col.c-counted { width: 158px; }
col.c-cstate  { width: 140px; }
col.c-made    { width: 128px; }
col.c-cbin    { width: 190px; }
col.c-cexp    { width: 104px; }
col.c-cledger { width: 112px; }
col.c-ccount  { width: 84px; }
col.c-cposts  { width: 104px; }
col.c-cnote   { width: 220px; }
col.c-vn      { width: 62px; }
col.c-vd      { width: 80px; }
col.c-vu      { width: 92px; }
col.c-vc      { width: 132px; }
col.c-vwhen   { width: 94px; }
col.c-vbin    { width: 176px; }
col.c-vq      { width: 60px; }
col.c-vapp    { width: 80px; }
/* Print the sheet: the entry grid and nothing else (the body carries .counts-printing). */
@media print {
  .counts-printing .bar, .counts-printing .page-head, .counts-printing .counts-top, .counts-printing .variance,
  .counts-printing .undo-dock, .counts-printing .grid-head, .counts-printing .post-bar .btn { display: none !important; }
}

/* ---------- where is it? ---------- */
.lookup-head { margin-bottom: 12px; }
.lookup-page .lookup-bar { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; align-items: end; margin-bottom: 8px; }
.lookup-page .bigfind { position: relative; display: block; }
.lookup-page .bigfind svg { position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 2.2; }
.lookup-page .bigfind input {
  width: 100%; height: 56px; padding: 0 140px 0 50px;
  font: 600 22px var(--font-mono); letter-spacing: .03em; color: var(--ink);
  background: var(--surface); border: 2px solid var(--teal-deep); border-radius: 4px;
  box-shadow: 0 0 0 4px var(--teal-wash);
}
.lookup-page .bigfind input:focus { outline: none; }
.lookup-page .bigfind .scan { position: absolute; right: 14px; top: 18px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--teal-deep); }
.lookup-page .bigfind .scan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.lookup-page .select.near { height: 56px; font-size: 15px; width: 100%; }
.lookup-page .lookup-hint { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.lookup-page .found { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.lookup-page .block.flush { margin: 0; }
.lookup-page .hit-head { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px 14px; border-bottom: 1px solid var(--rule); }
.lookup-page .hit-head h2 { margin: 0; font: 600 25px/1.1 var(--font-display); }
.lookup-page .hit-head h2 .bin { font-size: 16px; vertical-align: 3px; margin-right: 6px; }
.lookup-page .hit-head .sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.lookup-page .hit-head .sub mark { background: var(--teal-wash); color: var(--teal-deep); font-weight: 600; padding: 1px 4px; border-radius: 2px; }
.lookup-page .hit-head .tot { margin-left: auto; text-align: right; flex: none; }
.lookup-page .hit-head .tot b { display: block; font: 600 34px/1 var(--font-display); }
.lookup-page .hit-head .tot span { font-size: 12.5px; color: var(--muted); }
.lookup-page .dist { font: 500 12.5px var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.lookup-page .here { font-size: 12px; font-weight: 600; color: var(--teal-deep); }
.lookup-page .roomname { font-weight: 600; }
.lookup-page .roomname small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.lookup-page .lines tr.first td { background: #F2FAF8; }
.lookup-page .surplus-tag { display: block; margin-top: 3px; font-size: 12px; color: var(--onorder); font-weight: 600; }
.lookup-page .mv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lookup-page .mv td { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.lookup-page .mv tr:last-child td { border-bottom: 0; }
.lookup-page .mv .q { font: 600 13px var(--font-mono); text-align: right; white-space: nowrap; }
.lookup-page .mv .q.neg { color: var(--short); }
.lookup-page .mv .q.pos { color: var(--ok); }
.lookup-page .mv .bal { font: 400 12.5px var(--font-mono); color: var(--muted); text-align: right; width: 44px; }
.lookup-page .mv time { font: 400 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.lookup-page .mv-note { margin: 6px 0 0; }
.lookup-page .count-note { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.lookup-page .panel-body { padding: 6px 14px 10px; }
.lookup-page .panel-text { margin: 0; padding: 12px 14px; font-size: 13px; color: var(--ink-2); }
.lookup-page .dupe-tag { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--onorder); }
.lookup-page .rooms-n { font: 500 12.5px var(--font-mono); }
.lookup-page .matches { max-width: 1100px; }
.lookup-page .matches .block-title { font-size: 20px; }
col.c-lroom  { width: 168px; }
col.c-ldist  { width: 84px; }
col.c-lbin   { width: 186px; }
col.c-lis    { width: 128px; }
col.c-mrooms { width: 80px; }
col.c-mhand  { width: 90px; }
col.c-mhere  { width: 250px; }
col.c-blvl   { width: 200px; }
col.c-border { width: 100px; }
col.c-belse  { width: 150px; }

/* ---------- bin labels: 2 x 1 in, one a bin (routes/labels.js) ---------- */
.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, 2in); gap: 10px; }
/* R103: the barcode has a row of its own, full width, at its printed size (the SVG's width
   and height in mm: 2 printer dots a module at 203 dpi, never stretched); the QR too. */
.label {
  box-sizing: border-box; width: 2in; height: 1in; display: flex; flex-direction: column; padding: .04in .08in;
  overflow: hidden; color: #000; background: #fff; border: 1px dashed var(--rule); border-radius: 2px;
}
.label .ltop { display: flex; gap: .06in; height: .55in; min-height: 0; }
.label .lqr { flex: none; display: flex; align-items: center; }
.label .lqr svg, .label .lbars svg { display: block; }
.label .ltext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.label .lroom { font: 600 7pt/1.1 var(--font-mono); letter-spacing: .03em; }
.label .lbin { font: 700 16pt/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label .litem { margin-top: 1px; font: 400 6pt/1.15 var(--font-body); max-height: 2.3em; overflow: hidden; }
.label .lmore { font-weight: 600; }
.label .lnone { color: #555; font-style: italic; }
.label .lbars { display: flex; justify-content: center; margin-top: auto; }
.label .lcode { font: 500 6.5pt/1.1 var(--font-mono); text-align: center; }
.label .lcode-only { margin-top: auto; padding-bottom: .04in; font-size: 10pt; font-weight: 600; letter-spacing: .04em; }
.label-preview .label-sheet { display: block; }
.label-preview .label { border-style: solid; box-shadow: 0 1px 3px rgba(10, 30, 50, .12); }
.editbin .print { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.editbin .print .select { flex: 1 1 200px; }
/* The print view over the page (rooms.js), and the sheet opened on its own. */
.print-host { position: fixed; inset: 0; z-index: 60; overflow: auto; padding: 0 24px 24px; background: var(--paper); }
.print-host .print-tools { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 -24px 16px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--rule); font-size: 13px; }
.print-host .print-tools .spacer { flex: 1; }
.labels-doc { margin: 0; padding: 18px; background: var(--paper); }
@page label { size: 2in 1in; margin: 0; }
@media print {
  body.labels-printing > :not(.print-host) { display: none !important; }
  body.labels-printing .print-host { position: static; padding: 0; overflow: visible; background: #fff; }
  body.labels-printing .print-tools { display: none; }
  body.labels-printing .label-sheet, .labels-doc .label-sheet { display: block; }
  body.labels-printing .label, .labels-doc .label { page: label; break-after: page; border: 0; border-radius: 0; }
  .labels-doc { padding: 0; background: #fff; }
}

@media (max-width: 1180px) {
  .counts-page .counts-top, .counts-page .var-grid, .lookup-page .found { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .lookup-page .lookup-bar { grid-template-columns: minmax(0, 1fr); }
  .counts-page .block, .counts-page #sheet, .lookup-page .block { overflow-x: auto; }
  .counts-page table.lines, .lookup-page table.lines { min-width: 680px; }
}

/* =====================================================================
   PEOPLE (Task 21; docs/mockups/admin.html). Scoped to the page.
   ===================================================================== */
.people-page .people { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 20px; align-items: start; }
.people-page .h-add { font-size: 21px; }
.people-page .h-ladder { font-size: 20px; }
.people-page .add-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.people-page .pin-in { max-width: 140px; }
.people-page .place-select { flex: 1 1 160px; }
.people-page .scope-seg { margin-bottom: 8px; }
.people-page .field > .place-select { width: 100%; }
.people-page .block-flush { margin: 0; }
.people-page .lines td.pad-l16, .people-page .lines th.pad-l16 { padding-left: 16px; }
.people-page .lines td.pad-r16, .people-page .lines th.pad-r16 { padding-right: 16px; }
.people-page col.c-person { width: 180px; }
.people-page col.c-approves { width: 100px; }
.people-page col.c-signs { width: 150px; }
.people-page col.c-limit { width: 240px; }
.people-page .pname { font-weight: 600; font-size: 14px; }
.people-page .pname small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--muted); }
.people-page .role { display: inline-flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; font-size: 12px; white-space: nowrap; margin: 1px 4px 1px 0; }
.people-page .role b { padding: 3px 7px 2px; background: var(--navy-wash); color: var(--navy); font-weight: 600; }
.people-page .role span { padding: 3px 7px 2px; color: var(--ink-2); }
.people-page .role.ro b { background: var(--sunk); color: var(--ink-2); }
.people-page tr.off td { color: var(--faint); }
.people-page tr.off .role b { background: var(--sunk); color: var(--faint); }
.people-page .you { font-size: 11px; font-weight: 600; color: var(--teal-deep); margin-left: 6px; }
.people-page .btn-xs { height: 24px; margin-left: 6px; padding: 0 8px; }
.people-page .ladder-t td { vertical-align: middle; }
.people-page .ladder-t .input.money { height: 28px; width: 128px; }
.people-page .mini th { white-space: nowrap; }
.people-page .ro-note { font-family: var(--font-body); color: var(--muted); font-weight: 400; }
.people-page .grow { flex: 1 1 200px; }
.people-page .center-row { align-items: center; }
.people-page .why-not { color: var(--short); font-weight: 600; }
.people-page .revoke-ask { margin-top: 12px; }
.people-page .danger { color: var(--short); border-color: #E3B8AE; }
.people-page .danger:hover { border-color: var(--short); }
.people-page .danger:disabled { color: var(--faint); border-color: var(--rule); cursor: default; }

/* =====================================================================
   IMPORT (Task 21; docs/mockups/import.html). Scoped to the page.
   ===================================================================== */
.chip-refused { color: var(--short); background: var(--short-wash); }
.imp-page .imp { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.imp-page .detail-head h2 { font-size: 21px; }
.imp-page .src { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.imp-page .src label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); cursor: pointer; font-size: 13px; }
.imp-page .src label.on { border-color: var(--teal-deep); box-shadow: 0 0 0 2px var(--teal-wash); }
.imp-page .src input[type=radio] { margin-top: 2px; accent-color: var(--teal-deep); }
.imp-page .src label.off { cursor: not-allowed; color: var(--faint); background: var(--sunk); }
.imp-page .src label.off b { color: var(--muted); }
.imp-page .src .grow { flex: 1; }
.imp-page .src b { display: block; font-size: 14px; margin-bottom: 2px; }
.imp-page .src .mono { font-size: 12.5px; }
.imp-page .filepick { display: block; margin: 6px 0; font: 400 12.5px var(--font-body); color: var(--ink-2); }
.imp-page .picked { display: block; font-size: 12.5px; color: var(--ink-2); }
.imp-page .rules-note { margin-top: 12px; }
.imp-page .verdict { display: flex; align-items: flex-start; gap: 12px; }
.imp-page .verdict .chip { flex: none; margin-top: 1px; }
.imp-page .verdict .note { flex: 1; }
.imp-page .verdict div.note p { margin: 0; }
.imp-page .verdict div.note p + p { margin-top: 8px; }
.imp-page .fig.warn .v { color: var(--attention); }
.imp-page .fig.bad .v { color: var(--short); }
.imp-page .tbl-report td { font-size: 13px; }
.imp-page .tbl-report .n0 { color: var(--faint); }
.imp-page .tbl-report .inuse { color: var(--short); font-weight: 600; }
.imp-page .lines td.pad-l18, .imp-page .lines th.pad-l18 { padding-left: 18px; }
.imp-page .lines td.pad-r18, .imp-page .lines th.pad-r18 { padding-right: 18px; }
.imp-page col.c-n { width: 110px; }
.imp-page col.c-there { width: 130px; }
.imp-page .warnings { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.imp-page .apply-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px 18px; align-items: start; }
.imp-page .apply-grid .stack { gap: 12px; }
.imp-page .flag { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.imp-page .flag input { margin-top: 3px; accent-color: var(--short); }
.imp-page .flag small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.imp-page .flag.dim { color: var(--faint); cursor: default; }
.imp-page .why-not { color: var(--short); font-weight: 600; }
.imp-page .center-row { align-items: center; }
.imp-page .last-kv { margin-bottom: 12px; }
.imp-page .last-kv .mono { font-size: 12.5px; }
.imp-page .last-body { padding: 12px 14px 14px; }
.imp-page .last-foot { margin: 10px 0 0; }
.imp-page .hist { margin: 0; padding: 0; }
.imp-page .hist li { list-style: none; padding: 11px 14px 12px; border-bottom: 1px solid var(--rule-soft); font-size: 12.5px; }
.imp-page .hist li:last-child { border-bottom: 0; }
.imp-page .hist .top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.imp-page .hist time { font: 400 12px var(--font-mono); color: var(--muted); margin-left: auto; }
.imp-page .hist .file { font: 500 12.5px var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.imp-page .hist p { margin: 4px 0 0; color: var(--ink-2); }

@media (max-width: 1180px) {
  .people-page .people, .imp-page .imp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .people-page .add-grid, .imp-page .src, .imp-page .apply-grid { grid-template-columns: minmax(0, 1fr); }
  .people-page .block, .imp-page .tbl-wrap { overflow-x: auto; }
  .people-page table.lines, .imp-page table.lines { min-width: 640px; }
}

/* ---------- Task 32: Phones (docs/mockups/desktop-phase2/phones.html) and Phone records to
   resolve (held.html). R266: the find box above narrowed from 300 to 230 px so the tabs fit. ---------- */
.subtabs { display: flex; gap: 6px; margin: -4px 0 16px; }
.pill-off { display: inline-block; font: 600 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--short); background: var(--short-wash); border-radius: 2px; padding: 3px 5px 2px; margin-left: 6px; vertical-align: 1px; }
.age { font-size: 12px; color: var(--muted); white-space: nowrap; }
.age.old { color: var(--attention); font-weight: 600; }
.phones-page .phones, .held-page .held { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.phones-page .filters .filter { flex: 1 1 220px; }
.phones-page .block, .held-page .block { margin: 0; }
.phones-page .lines th.first, .phones-page .lines td.first, .held-page .lines th.first, .held-page .lines td.first { padding-left: 16px; }
.phones-page .lines th.last, .phones-page .lines td.last, .held-page .lines th.last, .held-page .lines td.last { padding-right: 16px; }
.phones-list col.c-phone { width: 190px; }
.phones-list col.c-app { width: 78px; }
.phones-list col.c-reach { width: 150px; }
.phones-list col.c-wait { width: 96px; }
.phone-name { font-weight: 600; font-size: 14px; }
.phone-name small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--muted); }
.ppl { font-size: 13px; line-height: 1.35; }
.wait { font: 600 14px var(--font-mono); }
.wait small { display: block; font: 400 11.5px var(--font-body); color: var(--muted); }
.wait.warn { color: var(--attention); }
.phones-page .left { color: var(--attention); }
.chip-old { padding: 2px 5px; }
tr.signed-out td, tr.signed-out .phone-name { color: var(--faint); }
.enrol h2 { font-size: 21px; }
.enrol-field { max-width: 420px; }
.enrol-note { max-width: 560px; }
.code-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.big-code { font: 600 44px/1 var(--font-mono); letter-spacing: .16em; color: var(--navy-deep); }
.qrbox { padding: 8px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }
.qrbox svg { display: block; width: 196px; height: 196px; }
.undo .note2 { color: var(--on-navy-2); font-size: 12.5px; }
.held-list col.c-arrived { width: 104px; }
.held-list col.c-why { width: 178px; }
.held-list col.c-person { width: 130px; }
.held-how { margin-top: 12px; }
.held-more { padding: 10px 16px; border-top: 1px solid var(--rule-soft); }
.sumline { font-size: 13.5px; line-height: 1.4; }
.why2 { display: inline-flex; flex-direction: column; gap: 3px; }
.why2 small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.choice { display: grid; gap: 10px; }
.opt2 { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); cursor: pointer; }
.opt2 input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--teal-deep); }
.opt2 b { display: block; font-size: 14px; }
.opt2 span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.opt2.on { border-color: var(--teal-deep); box-shadow: inset 3px 0 0 var(--teal); background: #F6FCFB; }
.opt2 .select { width: 100%; }
.disp { margin: 8px 0 0 18px; padding: 0; font-size: 13px; }
.held-reads { margin-top: 8px; }
.fix .mini td { vertical-align: top; }
.fix .mini .input, .fix .mini .select { width: 100%; min-width: 0; }
.fix .mini [data-fix="item-q"] { margin-bottom: 4px; }
.fix .codein { max-width: 180px; }
.fix .err { display: block; margin-top: 3px; color: var(--short); font-weight: 600; }
@media (max-width: 1180px) {
  .phones-page .phones, .held-page .held { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .code-panel { grid-template-columns: minmax(0, 1fr); }
  .phones-page .block, .held-page .block { overflow-x: auto; }
  .phones-page table.lines, .held-page table.lines { min-width: 640px; }
}
.held-day { display: block; }
/* R266/R328: at desktop width the tabs keep their natural width (the find box gives way), so a tab
   can never scroll out of sight; narrower, the tab row scrolls as before. */
@media (min-width: 1440px) { .tabs { flex: none; } }
.ppl .runout, .people-on .attention { color: var(--attention); font-weight: 600; }
.qr-none { max-width: 260px; }

/* ---------- Task 33: Custom orders (docs/mockups/desktop-phase2/custom-orders.html), Vans
   (vans.html) and Van standards (van-standards.html). ---------- */
.co-page .co, .vans-page .vs, .vstd-page .vs { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.co-page .block, .vans-page .block, .vstd-page .block { margin: 0; }
.co-page .filters .seg { flex-wrap: wrap; }
.vans-page .lines th.first, .vans-page .lines td.first, .vstd-page .lines th.first, .vstd-page .lines td.first { padding-left: 16px; }
.co-page .lines th.last, .co-page .lines td.last, .vans-page .lines th.last, .vans-page .lines td.last, .vstd-page .lines th.last, .vstd-page .lines td.last { padding-right: 16px; }
.co-list col.c-sel { width: 38px; }
.co-list col.c-num { width: 62px; }
.co-list col.c-qty { width: 48px; }
.co-list col.c-for { width: 70px; }
.co-list col.c-by { width: 120px; }
.co-list col.c-est { width: 88px; }
.co-list col.c-state { width: 110px; }
.cw { font-weight: 600; font-size: 13.5px; }
.cw small { display: block; margin-top: 2px; font: 400 11.5px var(--font-mono); color: var(--muted); }
.cw .free, .co-lines .free { font: italic 400 12px var(--font-body); color: var(--attention); }
.trk { list-style: none; margin: 0; padding: 0; }
.trk li { position: relative; padding: 0 0 12px 22px; font-size: 13px; color: var(--faint); }
.trk li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--rule); background: var(--surface); }
.trk li::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 2px; background: var(--rule); }
.trk li:last-child::after { display: none; }
.trk li.done { color: var(--ink-2); }
.trk li.done::before { background: var(--navy); box-shadow: none; }
.trk li.done::after { background: var(--navy); }
.trk li.now { color: var(--ink); font-weight: 600; }
.trk li.now::before { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.trk li small { display: block; font-weight: 400; color: var(--muted); }
.co-page textarea.input { height: 64px; padding: 8px 10px; resize: vertical; width: 100%; font: 400 13.5px/1.4 var(--font-body); }
.co-found { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; }
.co-olines td { vertical-align: top; }
.co-olines .input:not(.qtyin) { width: 100%; min-width: 0; }
.co-newsku { margin-top: 4px; }
.co-newsku .input.mono { flex: 1 1 120px; }
.co-ret { flex: 1 1 200px; }
.co-ret-code { flex: 0 1 150px; }
.co-ask h2, .co-order h2 { font-size: 21px; }
.attention { color: var(--attention); }
.filters .filter.vn-filter, .filters .filter.vg-filter { flex: 0 1 280px; }
.vans-list col.c-van { width: 120px; }
.vans-list col.c-hub { width: 76px; }
.vans-list col.c-since { width: 110px; }
.vans-list col.c-counted { width: 110px; }
.vans-list col.c-low { width: 66px; }
.vname { font-weight: 600; font-size: 14px; }
.low { font: 600 13px var(--font-mono); }
.low.warn { color: var(--attention); }
.vn-who { font-size: 14px; margin: 0 0 10px; }
/* Task 33b (R334): cover vans, vans.html lend / lent / lendto */
.vans-list .cov { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.vans-list .cov b { color: var(--ink-2); font-weight: 600; }
.vn-using, .vn-lent { font-size: 14px; margin: 0 0 10px; }
.vn-cover { margin: 0 0 8px; }
.vstd-list col.c-unit { width: 84px; }
.vstd-list col.c-std { width: 90px; }
.vstd-list col.c-items { width: 76px; }
.vstd-list col.c-raised { width: 100px; }
.gname { font-weight: 600; font-size: 13.5px; }
.gname small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.catrow td { background: var(--sunk); font: 600 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); padding: 8px 8px 7px 16px; }
.lines tr.catrow:hover td { background: var(--sunk); }
.eff { font: 600 13px var(--font-mono); }
tr.ro td { color: var(--faint); }
.emptyg { color: var(--attention); font-weight: 600; font-size: 12.5px; }
.vg-org { align-items: center; }
.vg-org .lab { margin: 0; }
.vg-orgqty { font-size: 15px; font-weight: 600; }
.vg-find { display: block; }
.vg-find input { width: 100%; }
@media (max-width: 1180px) {
  .co-page .co, .vans-page .vs, .vstd-page .vs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .co-page .block, .vans-page .block, .vstd-page .block { overflow-x: auto; }
  .co-page table.lines, .vans-page table.lines, .vstd-page table.lines { min-width: 640px; }
}
.vg-conflicts col.c-in, .vg-conflicts col.c-also { width: 160px; }
.vg-conflicts col.c-line { width: 64px; }
.co-problem:empty { display: none; }