/* The one stylesheet: the header, the stock grids with Luis's traffic-light colours, the pipeline
   board, lists, forms, the money chart and the truck cards. Colours are the custom properties below.
   2026-10 restyle (v2): dark ground, Bricolage Grotesque headings, Instrument Sans text, JetBrains Mono for codes and
   typed numbers. Shape motif: panels and cells are rounder on top than at the bottom. The fonts are vendored in
   vendor/fonts (latin and latin-ext; SIL Open Font License, see vendor/fonts/LICENSE): the office PCs reach no CDN. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("vendor/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("vendor/fonts/bricolage-grotesque-latin.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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("vendor/fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("vendor/fonts/instrument-sans-latin.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: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("vendor/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("vendor/fonts/jetbrains-mono-latin.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; }
:root {
  color-scheme: dark;
  --bg: oklch(26.5% 0.018 265); --bg-2: oklch(24% 0.018 265); --bg-top: oklch(30% 0.022 268);
  --panel: oklch(31% 0.02 265); --panel-2: oklch(34.5% 0.022 265); --panel-3: oklch(39% 0.024 265);
  --line: oklch(100% 0 0 / 0.075); --line-2: oklch(100% 0 0 / 0.14);
  --ink: oklch(96% 0.006 265); --ink-2: oklch(83% 0.012 265); --muted: oklch(68% 0.018 265); --dim: oklch(48% 0.016 265);
  --accent: oklch(76% 0.12 240); --accent-2: oklch(68% 0.14 255); --accent-ink: oklch(17% 0.03 255); --accent-bg: oklch(38% 0.06 250);
  --help: oklch(68% 0.17 310);
  /* Reserved pairs. Red = somewhere you type or choose, and the label that names it (edges and labels only, never a fill,
     so it stays apart from the Short cells). Indigo = an action that saves or sends. */
  --in-bg: oklch(97% 0.006 85); --in-bg-hover: #fff; --in-line: oklch(64% 0.2 10); --in-ink: oklch(22% 0.02 265);
  --in-lab: oklch(80% 0.12 10); --in-lab-bg: oklch(38% 0.05 10); --in-cell: oklch(36% 0.03 10);
  /* Teal = a value the app suggested that nobody has typed over or accepted yet (86bcvuqpq; Blase, 2026-10-30: "Can suggested
     dates/values generally be in a different color like teal?"). Two shades, as the app has two grounds: --suggested for text on
     the dark panels, --suggested-in (+ its edge and tint) inside the light input fields. Saved values are never teal. */
  --suggested: oklch(82% 0.11 190); --suggested-in: oklch(48% 0.1 195); --suggested-line: oklch(62% 0.11 192); --suggested-bg: oklch(95% 0.03 190);
  /* Secondary menu (nav.subnav): pollen yellow labels on a lighter slate. */
  --pollen: oklch(90% 0.14 96); --pollen-line: oklch(80% 0.13 94 / 0.6); --sec-bg: oklch(45% 0.022 265); --sec-bg-hover: oklch(50% 0.026 265);
  --act-1: oklch(66% 0.2 280); --act-2: oklch(54% 0.22 285); --act-ink: #fff; --act-glow: oklch(60% 0.22 282 / 0.35);
  /* Alert levels and stock status: one colour per meaning. */
  --ok: oklch(87% 0.15 155); --ok-bg: oklch(39% 0.085 158); --ok-line: oklch(55% 0.11 158);
  --low: oklch(90% 0.14 90); --low-bg: oklch(41.5% 0.08 82); --low-line: oklch(62% 0.11 82);
  --short: oklch(86% 0.11 22); --short-bg: oklch(39.5% 0.12 22); --short-line: oklch(58% 0.15 22);
  --none-bg: oklch(40% 0.02 265);
  /* Table tiles: medium, so tables read clearly over the dark ground. */
  --tile: oklch(41% 0.022 265); --tile-2: oklch(46% 0.025 265); --tile-0: oklch(37% 0.018 265);
  --tan: oklch(34% 0.01 265); --tan-ink: oklch(97% 0.004 265);  /* the count sheet's heading and size-label colour (was SHEET_TAN #C4BD97; 2026-10-28 restyle) */
  --r-top: 16px; --r-bot: 6px; --shape: var(--r-top) var(--r-top) var(--r-bot) var(--r-bot);
  --cell: 8px 8px 3px 3px;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --glass: oklch(25% 0.018 265);
  --i-stock: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3.5'%20y%3D'3.5'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'3.5'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'3.5'%20y%3D'13.5'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'13.5'%20width%3D'7'%20height%3D'7'%20rx%3D'1.5'%2F%3E%3C%2Fsvg%3E");
  --i-containers: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2.5'%20y%3D'6'%20width%3D'19'%20height%3D'12'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M7.5%209v6M12%209v6M16.5%209v6'%2F%3E%3C%2Fsvg%3E");
  --i-trucks: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.5%206.5h11v9h-11z'%2F%3E%3Cpath%20d%3D'M13.5%209.5h4l3%203v3h-7'%2F%3E%3Ccircle%20cx%3D'6.5'%20cy%3D'17.5'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'17.5'%20r%3D'1.8'%2F%3E%3C%2Fsvg%3E");
  --i-counts: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'4.5'%20width%3D'14'%20height%3D'16'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M9%204.5V3h6v1.5'%2F%3E%3Cpath%20d%3D'M9%2012.5l2%202%204-4'%2F%3E%3C%2Fsvg%3E");
  --i-money: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2.5'%20y%3D'6'%20width%3D'19'%20height%3D'12'%20rx%3D'2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'2.8'%2F%3E%3Cpath%20d%3D'M6%209.5v5M18%209.5v5'%2F%3E%3C%2Fsvg%3E");
  --i-alerts: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%2016.5V11a6%206%200%200%201%2012%200v5.5l1.5%201.5h-15z'%2F%3E%3Cpath%20d%3D'M10%2021h4'%2F%3E%3C%2Fsvg%3E");
  --i-settings: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%207h9M17%207h3M4%2017h3M11%2017h9'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'7'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'17'%20r%3D'2'%2F%3E%3C%2Fsvg%3E");
  --i-signout: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%204H6.5A2.5%202.5%200%200%200%204%206.5v11A2.5%202.5%200%200%200%206.5%2020H10'%2F%3E%3Cpath%20d%3D'M15%208l4%204-4%204M19%2012H9.5'%2F%3E%3C%2Fsvg%3E");
  --i-refresh: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19.5%2012a7.5%207.5%200%201%201-2.2-5.3'%2F%3E%3Cpath%20d%3D'M19.5%204.5v4.5H15'%2F%3E%3C%2Fsvg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'8.5'%20r%3D'3.8'%2F%3E%3Cpath%20d%3D'M4.5%2020.5a7.5%207.5%200%200%201%2015%200'%2F%3E%3C%2Fsvg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6.5%206.5l11%2011M17.5%206.5l-11%2011'%2F%3E%3C%2Fsvg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2010l5%205%205-5'%2F%3E%3C%2Fsvg%3E");
  --i-summary: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'%2F%3E%3C%2Fsvg%3E");
  --i-checks: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%206.5l2%202%203.5-3.5M4%2015.5l2%202%203.5-3.5M13%207h7M13%2016h7'%2F%3E%3C%2Fsvg%3E");
  --i-fresh: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'13'%20r%3D'7.5'%2F%3E%3Cpath%20d%3D'M12%209v4l2.5%202M9.5%203h5'%2F%3E%3C%2Fsvg%3E");
  --i-diffs: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%204v16M3%208l4-4%204%204M17%2020V4M13%2016l4%204%204-4'%2F%3E%3C%2Fsvg%3E");
  --i-coming: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2012h13M11%206l6%206-6%206M20%205v14'%2F%3E%3C%2Fsvg%3E");
  --i-receive: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2013v5.5A1.5%201.5%200%200%200%205.5%2020h13a1.5%201.5%200%200%200%201.5-1.5V13'%2F%3E%3Cpath%20d%3D'M12%203v11M7.5%209.5L12%2014l4.5-4.5'%2F%3E%3C%2Fsvg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%2011v5.5M12%207.8v.2'%2F%3E%3C%2Fsvg%3E");
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; min-height: 100%; background-color: var(--bg-2);
  --glow-help: radial-gradient(ellipse 190px 52vh at 100% 50%, oklch(68% 0.17 310 / 0.34), oklch(68% 0.17 310 / 0.08) 55%, transparent 72%);
  --glow-bottom: radial-gradient(ellipse 140% 48vh at 50% 100%, oklch(74% 0.11 240 / 0.11), transparent 78%);
  --base: linear-gradient(180deg, var(--bg-top, oklch(19.5% 0.024 268)) 0%, var(--bg) 45%, var(--bg-2) 100%);
  --tex: url("img/texture.png");  /* Design's fractal-noise line texture (an SVG filter), drawn once to a PNG at 2x: the live filter stalled headless Chrome, and old PCs */ --tex-size: 900px 450px;
  background-image: var(--glow-help), var(--glow-bottom), var(--tex), var(--base);
  background-size: auto, auto, var(--tex-size), auto; background-attachment: fixed; }
body { margin: 0; font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-color: oklch(76% 0.12 240 / 0.4); }
a:hover { color: var(--ink); text-decoration-color: currentColor; }
.muted { color: var(--muted); }
b, strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
::selection { background: oklch(76% 0.12 240 / 0.35); }

/* ---------- Controls ---------- */
button { font: 600 13.5px/1.2 var(--sans); color: var(--ink); background: var(--panel-3); border: 1px solid var(--line-2); border-radius: 10px;
  min-height: 36px; padding: 0 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  transition: background .12s, border-color .12s, box-shadow .12s; }
button:hover { background: oklch(43% 0.026 265); border-color: oklch(100% 0 0 / 0.22); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: default; }
/* Actions (save, submit, create, add): the reserved indigo, used for nothing else. */
button[type=submit], .signin button, .po-add, td.acts button, .setform button, .truck button:not(.po-remove) {
  background: linear-gradient(180deg, var(--act-1), var(--act-2)); color: var(--act-ink); border: 1px solid oklch(78% 0.14 280 / 0.5);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.28), 0 6px 20px var(--act-glow); }
button[type=submit], .signin button { padding: 0 22px; min-height: 40px; }
button[type=submit]:hover:not(:disabled), .signin button:hover, .po-add:hover, td.acts button:hover, .setform button:hover, .truck button:not(.po-remove):hover {
  background: linear-gradient(180deg, oklch(72% 0.18 280), var(--act-1)); border-color: oklch(85% 0.1 280 / 0.6); color: var(--act-ink); }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  font: 500 14px/1.3 var(--sans); color: var(--in-ink); background-color: var(--in-bg); border: 1px solid var(--in-line); border-radius: 8px; color-scheme: light;
  padding: 6px 10px; min-height: 36px; max-width: 100%; }
input:hover, select:hover { border-color: var(--in-lab); background-color: var(--in-bg-hover); }
input:not([type=checkbox]):not([type=radio])[value=""], input.qty:not([value]) { background-color: oklch(90% 0.008 85); border-color: oklch(64% 0.2 10 / 0.55); }
input:focus, select:focus { border-color: var(--in-line); background-color: #fff; outline: none; box-shadow: 0 0 0 3px oklch(72% 0.17 10 / 0.35); }
input::placeholder { color: oklch(58% 0.015 265); }
/* .suggested: one class, any element. In an input it tints the field teal until the person types in it or accepts it (main.js
   drops the class on input; New PO's tick drops it too); on text it colours the value teal. */
input.suggested:not([type=checkbox]):not([type=radio]), select.suggested { color: var(--suggested-in); border-color: var(--suggested-line); background-color: var(--suggested-bg); font-style: italic; }
input.suggested:focus { box-shadow: 0 0 0 3px oklch(72% 0.1 190 / 0.35); }
.suggested:not(input):not(select) { color: var(--suggested); }
.sugg-accept { min-height: 0; padding: 2px 8px; margin-left: 6px; font-size: 13px; line-height: 1.4; color: var(--suggested-in); background: var(--suggested-bg); border: 1px solid var(--suggested-line); border-radius: 6px; cursor: pointer; }
.sugg-note { font-size: 12px; line-height: 1.3; }
input[type=date] { font-family: var(--mono); font-size: 13px; }
select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%234a5368'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2010l5%205%205-5'%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
input.qty { width: 68px; text-align: right; font-family: var(--mono); font-weight: 500; padding: 4px 8px; }
form label { margin-right: 16px; }

/* ---------- The pinned box: the header, Preview as and the screen tabs stay put while the page scrolls (86bcxv73n; Blase, 2026-11-04:
   "so the sub-buttons stay locked to the top hearer, rather than scrolling away"). main.js sets --top-h to its height, so the sticky
   table headings, the Buy plan side panel, Report a bug and Ayuda sit under the tabs, not behind them. Its background is the page's
   own, fixed the same way, so nothing changes until rows pass under it; the 8px under the tabs covers them as they go, and the
   negative margin gives that 8px back to the page. ---------- */
.pin { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; padding-bottom: 8px; margin-bottom: -8px;
  background-color: var(--bg-2); background-image: var(--glow-help), var(--glow-bottom), var(--tex), var(--base);
  background-size: auto, auto, var(--tex-size), auto; background-attachment: fixed; }

/* ---------- Header: one compact row of controls over the nav; one row in all from 1680px (below that the seven to nine tabs and the tools did not fit: the menu stopped at "Alert…" at 1400px) ---------- */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: ". tools" "nav nav"; align-items: center; gap: 0 16px; padding: 8px 20px 0;
  /* A light bar over the dark page: the header re-points the colour tokens for everything inside it. */
  color-scheme: dark; --ink: oklch(96% 0.006 265); --ink-2: oklch(84% 0.012 265); --muted: oklch(74% 0.018 265); --line: oklch(100% 0 0 / 0.1); --line-2: oklch(100% 0 0 / 0.18); --accent: oklch(78% 0.12 240);  
  color: var(--ink); background: linear-gradient(90deg, oklch(32% 0.095 277) 0%, oklch(32% 0.095 277) 46%, oklch(55% 0.11 255) 76%, oklch(86% 0.07 232) 100%);
  border-bottom: 1px solid oklch(100% 0 0 / 0.08); box-shadow: 0 1px 0 oklch(0% 0 0 / 0.35), 0 10px 30px oklch(0% 0 0 / 0.3); position: relative; z-index: 3; }  /* stays put inside .pin */
.top input:focus, .top select:focus { box-shadow: 0 0 0 3px oklch(72% 0.17 10 / 0.35); }
.top nav { grid-area: nav; display: flex; gap: 2px; margin: 4px -10px 0; overflow-x: auto; scrollbar-width: none; }
.top nav a { display: flex; align-items: center; gap: 8px; padding: 7px 12px 9px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  white-space: nowrap; border-bottom: 2px solid transparent; transition: color .12s; }
.top nav a::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; opacity: 0.9; }
.top nav a[href^="#stock"] { --i: var(--i-stock); } .top nav a[href^="#pipeline"] { --i: var(--i-containers); } .top nav a[href^="#transfers"] { --i: var(--i-trucks); }
.top nav a[href^="#count"] { --i: var(--i-counts); } .top nav a[href^="#owed"] { --i: var(--i-money); } .top nav a[href^="#alerts"] { --i: var(--i-alerts); }
.top nav a[href^="#settings"] { --i: var(--i-settings); } .top nav a[href^="#execsummary"] { --i: var(--i-summary); } .top nav a[href^="#checks"] { --i: var(--i-checks); }
.top nav a[href^="#freshness"] { --i: var(--i-fresh); } .top nav a[href^="#countdiffs"] { --i: var(--i-diffs); } .top nav a[href^="#coming"] { --i: var(--i-coming); } .top nav a[href^="#receive"] { --i: var(--i-receive); }
.top nav a:hover { color: var(--ink); }
.top nav a.on { color: var(--ink); border-bottom-color: var(--accent); border-bottom-width: 3px; padding-bottom: 8px; }
.top nav a.on::before { background: var(--accent); opacity: 1; }
.tools { grid-area: tools; justify-self: end; min-width: 0; max-width: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
/* Before sign-in the tools stay hidden (main.js shows them), all but the EN / ES switch, which works on the sign-in prompt too. */
.tools[hidden] { display: flex; }
.tools[hidden] > :not(#lang) { display: none; }
/* The right end of the header is light blue, so its controls switch to dark ink on a frosted tray. */
@media (min-width: 761px) {
  .tools { --ink: oklch(22% 0.03 270); --ink-2: oklch(30% 0.03 270); --muted: oklch(34% 0.03 265); --dim: oklch(50% 0.03 265); --line-2: oklch(25% 0.05 270 / 0.2);
    color: var(--ink); padding: 4px 4px 4px 12px; border-radius: 14px 14px 6px 6px; background: oklch(100% 0 0 / 0.42); border: 1px solid oklch(100% 0 0 / 0.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 10px oklch(25% 0.08 270 / 0.18); }
  .tools button { background: oklch(100% 0 0 / 0.6); }
  .tools button:hover { background: #fff; border-color: oklch(25% 0.05 270 / 0.35); }
  .tools .who { background: oklch(100% 0 0 / 0.6); }
  .tools .who::before { background: oklch(32% 0.095 277); }
  .tools #signout { background: oklch(100% 0 0 / 0.6); }
  .top nav { align-self: center; }
}
@media (min-width: 761px) and (max-width: 1679px) {
  /* Nav on its own row: a solid indigo strip so its light labels stay readable all the way across. */
  .top nav { margin: 8px -20px 0; padding: 0 10px; background: linear-gradient(180deg, oklch(29% 0.09 278), oklch(27% 0.085 278)); border-top: 1px solid oklch(0% 0 0 / 0.15); }
  .top { padding-top: 8px; }
}
.tools label { font-family: var(--sans); margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; min-width: 0; flex: 0 1 auto; }
.tools > * { flex-shrink: 0; }
.tools select { min-height: 32px; font-size: 13px; flex: none; color: var(--ink); background-color: var(--in-bg); color: var(--in-ink); border-color: transparent; }
.tools button { min-height: 32px; padding: 0 11px; font-size: 13px; color: var(--ink); background: oklch(100% 0 0 / 0.08); border-color: var(--line-2); box-shadow: none; flex: none; }
.tools button:hover { background: oklch(100% 0 0 / 0.15); border-color: oklch(100% 0 0 / 0.3); }
#refresh::before, #signout::before, .who::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
#refresh::before { --i: var(--i-refresh); }
.tools #refresh { width: 32px; padding: 0; font-size: 0; gap: 0; }
#refreshed { font-size: 11.5px; color: var(--muted); flex: none; }
.top select option, .top select optgroup { color: #111; background: #fff; }
/* Signed in: who you are and the sign-out icon read as one chip. */
.who { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 5px; border-radius: 999px 0 0 999px; background: oklch(100% 0 0 / 0.08);
  border: 1px solid var(--line-2); border-right: 0; color: var(--ink); font-weight: 600; font-size: 13px; }
.who::before { --i: var(--i-user); width: 22px; height: 22px; border-radius: 50%; background: var(--accent); -webkit-mask-size: 15px; mask-size: 15px; }
.tools #signout { --i: var(--i-signout); margin-left: -6px; width: 36px; padding: 0; font-size: 0; gap: 0; border-radius: 0 999px 999px 0; background: oklch(100% 0 0 / 0.08); }
.tools #signout:hover { background: var(--short-bg); color: var(--short); border-color: var(--short-line); }
.tools #signout::before { width: 16px; height: 16px; }

/* Preview as sits in the middle of the header in a yellow box, so nobody takes it for part of the app
   (Blase, 2026-10-28: "center the 'preview as' component … put it in a yellow box, so people understand its
   not part of the final build"). Centred once the header is wide enough to centre it. */
/* Below the header on the right, level with the screen tabs, and pinned with them (.pin). (.pin is a flex column: the box sits at its
   right end and gives its height back, so the tabs share its row; the tabs stop short of it.) */
#preview-wrap { font-family: var(--sans); align-self: flex-end; position: relative; z-index: 1; height: 40px; margin: 19px 24px -59px 16px; padding: 4px 5px 4px 12px; white-space: nowrap;
  background: #ffe27a; color: #3d2c00; border: 2px solid #f0b400; border-radius: 12px 12px 5px 5px; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 22px oklch(0% 0 0 / 0.3); }
@media (min-width: 1400px) { body:has(#preview-wrap:not([hidden])) nav.subnav { max-width: calc(100% - 48px - 390px); margin-top: 16px; } }
/* Narrower: Preview as takes its own row on the right, and the screen tabs get the full width under it. */
@media (min-width: 761px) and (max-width: 1399px) { #preview-wrap { margin-bottom: 0; } }
#preview-wrap select { flex: 0 1 auto; font-size: 13px; min-height: 26px; min-width: 0; padding: 2px 28px 2px 8px; background-color: #fff6cf; color: #2b1f00; border-color: #e0a800; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235a4300'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2010l5%205%205-5'%2F%3E%3C%2Fsvg%3E"); max-width: 240px; }
#preview-wrap[hidden] { display: none; }
#preview-wrap select { max-width: 240px; }
#preview-wrap select { min-width: 160px; }
@media (min-width: 761px) and (max-width: 1299px) { .tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } .top { row-gap: 6px; } }

@media (min-width: 1680px) {
  .top { grid-template-areas: "nav tools"; padding-top: 0; }
  .top nav { margin: 0 0 0 -10px; align-self: stretch; }
  .top nav a { padding: 15px 12px 13px; }
  .top nav a.on { padding-bottom: 12px; }
}

/* The open group's screens (Logistics), a second row under the header, pinned with it (.pin). */
nav.subnav { display: flex; flex-wrap: nowrap; gap: 4px; margin: 16px 24px 0; padding: 4px; width: fit-content; max-width: calc(100% - 48px); overflow-x: auto; scrollbar-width: none;
  background: oklch(19% 0.02 265); border: 1px solid oklch(100% 0 0 / 0.08); border-radius: 14px 14px 6px 6px; box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.35); }
nav.subnav a { padding: 7px 14px; border: 1px solid transparent; border-radius: 10px 10px 4px 4px; color: oklch(86% 0.17 94); font-weight: 700; font-size: 13.5px; white-space: nowrap; text-decoration: none; background: none; }
nav.subnav a:hover { color: oklch(91% 0.18 96); background: oklch(25% 0.025 265); }
nav.subnav a.on { color: oklch(20% 0.03 90); background: oklch(86% 0.17 94); border-color: oklch(92% 0.15 98); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.4), 0 2px 12px oklch(86% 0.17 94 / 0.3); }

/* ---------- Banners and page text ---------- */
.banner { margin: 14px 24px 0; padding: 11px 16px; border-radius: var(--shape); background: var(--low-bg); color: var(--low); border: 1px solid var(--low-line); font-weight: 500; }
body.testbase .banner { background: var(--short-bg); color: var(--short); border-color: var(--short-line); font-weight: 600; }
body.testbase .top { box-shadow: inset 0 -3px 0 var(--short); }
body .banner.preview { background: #ffe27a; color: #3d2c00; border: 2px solid #f0b400; font-weight: 700; }
body .banner.preview button { margin-left: 8px; min-height: 30px; }
main { padding: 26px 24px 56px; width: 100%; max-width: 1680px; }
h1 { font: 700 34px/1.1 var(--display); letter-spacing: -0.025em; margin: 0 0 10px; color: var(--ink); text-wrap: balance; }
h2 { font: 650 21px/1.25 var(--display); letter-spacing: -0.015em; margin: 36px 0 14px; color: var(--ink); }
h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; vertical-align: 2px; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--accent), var(--help)); box-shadow: 0 0 12px oklch(76% 0.12 240 / 0.5); }
h2 .muted { font: 500 14px var(--sans); letter-spacing: 0; margin-left: 6px; }
h3 { font: 650 15.5px/1.3 var(--display); margin: 18px 0 10px; }
h3.line { font: 700 11.5px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 20px 0 10px; display: flex; align-items: center; gap: 12px; }
h3.line::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.lead { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; max-width: 80ch; text-wrap: pretty; }
.lead b { color: var(--ink); }
.note { display: block; position: relative; padding: 12px 16px 12px 42px; background: oklch(100% 0 0 / 0.03); border: 1px solid var(--line); border-radius: var(--shape); color: var(--ink-2); font-size: 13.5px; margin: 12px 0 20px; max-width: 115ch; text-wrap: pretty; }
.note::before { content: ""; position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; background: var(--muted); -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
.error { color: var(--short); white-space: pre-wrap; }
.lowtext { color: var(--low); }
.neg { color: var(--short); font-weight: 600; }
.msg { font-size: 12px; }

/* ---------- Stock grids: tiles, rounder on top ---------- */
table.grid { border-collapse: separate; border-spacing: 3px; width: calc(100% + 6px); margin: 0 -3px; background: none; }
.grid th, .grid td { padding: 8px 10px; text-align: center; vertical-align: middle; border: 0; }
.grid th { font: 600 13.5px/1.2 var(--sans); color: var(--ink-2); padding: 10px 10px 8px;
  position: sticky; top: var(--top-h, 52px); z-index: 1; background: oklch(25% 0.018 265 / 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }  /* --top-h: the header's height, set by main.js */
.grid td { background: var(--tile); border-radius: var(--cell); font-weight: 500; white-space: nowrap; }
.grid td.name, .grid th.name { text-align: left; white-space: nowrap; }
.grid td.name, .grid tbody th.name { background: var(--tile-2); font-weight: 600; color: var(--ink); border-radius: 10px 10px 3px 3px; padding-left: 12px; position: relative; top: auto; font-size: 14px; }  /* top: auto, or .grid th's sticky top pushes a relative cell down */
.grid td.ok { background: var(--ok-bg); color: var(--ok); font-weight: 650; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08); }
.grid td.low { background: var(--low-bg); color: var(--low); font-weight: 650; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08); }
.grid td.short { background: var(--short-bg); color: var(--short); font-weight: 650; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08); }
.grid td.zero { color: oklch(62% 0.016 265); background: var(--tile-0); }
/* Every value tile gets a soft rounded light along its bottom edge. */
.grid td:not(.name), .sizes.ro .size { --top-sheen: linear-gradient(180deg, oklch(100% 0 0 / 0.1), oklch(100% 0 0 / 0.03) 34%, transparent 55%);
  background-image: var(--top-sheen), radial-gradient(ellipse 72% 46% at 50% 100%, oklch(100% 0 0 / 0.13), oklch(100% 0 0 / 0.04) 55%, transparent 100%);
  /* a small sharp notch cut from the bottom-right corner */
  -webkit-mask: linear-gradient(315deg, transparent 0 12px, #000 12.6px); mask: linear-gradient(315deg, transparent 0 12px, #000 12.6px); }
/* Status-coloured tiles sink instead: a dark rounded shade along the bottom. */
.grid td.ok, .grid td.low, .grid td.short, .grid td.neg { background-image: var(--top-sheen), radial-gradient(ellipse 78% 52% at 50% 100%, oklch(0% 0 0 / 0.34), oklch(0% 0 0 / 0.1) 55%, transparent 100%); }
.grid td:has(> input, > select) { background-image: var(--top-sheen); -webkit-mask: none; mask: none; }
/* Muted notes inside table tiles: a step brighter so they hold up on the medium slate. */
.grid td .muted, .list td .muted, .list td.muted, .facts td .muted { color: oklch(80% 0.015 265); }
.grid td.neg { background: var(--short-bg); }
.grid .wk { display: block; font-size: 11px; font-weight: 500; opacity: 0.78; margin-top: 1px; }
.grid td.nosales { color: var(--low); font-style: italic; }
.grid tr.group th { text-align: left; background: var(--none-bg); }
/* Buy plan arrival table: the two halves' headings colour-coded (D99) */
.grid thead th.arr { background: oklch(40% 0.07 245); color: oklch(92% 0.05 240); border-radius: var(--cell); }
.grid thead th.gap { background: oklch(40% 0.08 315); color: oklch(92% 0.05 315); border-radius: var(--cell); }
.grid thead tr:first-child th.arr, .grid thead tr:first-child th.gap { font-size: 14.5px; font-weight: 700; }
.grid.gap-cover tfoot tr.total td:empty { background: none; box-shadow: none; }
.grid.gap-cover tfoot tr.total td, .grid.gap-cover tfoot tr.total th { border-top: 1px solid var(--line-2); }
.grid tbody tr:hover td { filter: brightness(1.12); }
.grid td.name a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.grid td.name a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.legend { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px 10px 4px 4px; font-size: 13px; font-weight: 600; border: 1px solid; }
.legend > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.legend .ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.legend .low { background: var(--low-bg); color: var(--low); border-color: var(--low-line); }
.legend .short { background: var(--short-bg); color: var(--short); border-color: var(--short-line); }

/* ---------- Pipeline board: one lane per stage, a coloured stage bar on top, cards in a fixed order ---------- */
.board { display: grid; grid-template-columns: repeat(6, minmax(236px, 1fr)); gap: 12px; align-items: stretch; overflow-x: auto; padding-bottom: 6px; }
.col { --stage: var(--muted); display: flex; flex-direction: column; gap: 8px; min-height: 240px; padding: 0 8px 8px; background: oklch(100% 0 0 / 0.028); border: 1px solid var(--line); border-radius: var(--shape); }
.col:nth-child(1) { --stage: oklch(72% 0.02 265); } .col:nth-child(2) { --stage: oklch(72% 0.13 240); } .col:nth-child(3) { --stage: oklch(78% 0.12 195); }
.col:nth-child(4) { --stage: oklch(72% 0.14 300); } .col:nth-child(5) { --stage: oklch(80% 0.14 155); } .col:nth-child(6) { --stage: oklch(85% 0.13 95); }
.col h3 { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -8px 2px; padding: 15px 14px 11px; min-height: 52px;
  font: 650 15px/1.2 var(--display); border-bottom: 1px solid var(--line); }
.col h3 > span:first-child { white-space: nowrap; }
.col h3::before { content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 3px; border-radius: 0 0 3px 3px; background: var(--stage); box-shadow: 0 0 14px var(--stage); }
.col h3 > span:first-child { display: flex; align-items: center; gap: 8px; }
.col h3 > span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stage); }
.col h3 .count { font: 600 11.5px/1 var(--mono); color: var(--ink-2); padding: 5px 8px; border-radius: 7px 7px 3px 3px; background: var(--tile); white-space: nowrap; }
.col:not(:has(.card))::after { content: ""; flex: 1; min-height: 120px; border: 1.5px dashed var(--line-2); border-radius: 12px 12px 4px 4px; }
.card { display: flex; flex-direction: column; margin: 0; padding: 0; background: var(--tile); border: 1px solid var(--line); border-radius: 12px 12px 4px 4px; overflow: hidden;
  background-image: radial-gradient(ellipse 72% 30px at 50% 100%, oklch(100% 0 0 / 0.08), transparent); transition: border-color .12s, transform .12s; }
.card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 4px; }
.card .id { font: 600 13.5px var(--mono); letter-spacing: -0.01em; }
.card .id a { color: var(--ink); text-decoration: none; }
.card .id a:hover { color: var(--accent); }
.card .status { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 7px 7px 3px 3px; color: var(--stage); background: oklch(100% 0 0 / 0.06); border: 1px solid var(--line-2); }
.card .prod { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px 10px; font-weight: 600; font-size: 14px; }
.card .prod > .picon { margin: -4px 0; }
.card .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 0 12px; color: var(--muted); font-size: 12.5px; }
.card .row > span { white-space: nowrap; }
.card .r-qty { padding: 8px 12px; background: oklch(0% 0 0 / 0.14); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card .r-qty > span:first-child { color: var(--ink); font-weight: 600; font-size: 13px; }
.card .r-qty > span:last-child, .card .r-meta > span:last-child { font: 500 11px var(--mono); color: var(--dim); }
.card .r-meta { padding: 8px 12px 10px; }
.card .r-meta > span:first-child { color: var(--ink-2); font-weight: 500; }
.card .badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 10px; margin-top: auto; }
.card .badges .badge { margin: 0; }
.card .id a, .list td b a { color: inherit; }

/* ---------- Status chips ---------- */
.badge, .pill { white-space: nowrap; display: inline-block; font-size: 12px; font-weight: 650; line-height: 1.3; padding: 2px 8px; border-radius: 7px 7px 3px 3px; border: 1px solid var(--line-2); vertical-align: 1px; }
.badge { margin: 6px 4px 0 0; background: var(--none-bg); color: var(--ink-2); }
.badge.warn, .pill.low { background: var(--low-bg); color: var(--low); border-color: var(--low-line); }
.badge.bad, .pill.short { background: var(--short-bg); color: var(--short); border-color: var(--short-line); }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }

/* ---------- Lists: each row its own bar ---------- */
table.list { border-collapse: separate; border-spacing: 0 5px; width: 100%; margin-top: -5px; background: none; }
.list th, .list td { padding: 12px 14px; text-align: left; vertical-align: middle; border: 0; }
.list th { font: 600 13.5px/1.2 var(--sans); color: var(--ink-2); padding: 10px 14px 6px; background: none; }
/* Container bookings (86bcuz5rj): an order code's line above its submissions; a submission from the last 24 hours. */
.list tr.group td { background: var(--none-bg); padding-top: 8px; padding-bottom: 8px; }
.list tr.recent td { background: var(--low-bg); }
/* Run rates' blocks (86bcxwhwz): the heading row's button folds its rows away. */
.rr tbody.closed tr:not(.rr-head) { display: none; }
.rr .rr-fold { border: 0; background: none; padding: 0 4px; cursor: pointer; font: inherit; color: var(--ink-2); transition: transform .15s; }
.rr tbody.closed .rr-fold { transform: rotate(-90deg); }
.bk-fix { display: inline-flex; gap: 6px; margin: 0 6px 6px 0; }
.list td { background: var(--tile); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.list td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 4px; white-space: nowrap; }
.list td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 4px 0; }
.list tbody tr:hover td { background: var(--tile-2); }
.list td.num, .list th.num { text-align: right; }
/* A PO's sends, one version a line, never wrapped (Blase, 2026-10-29: "increase the margin on \"sent\" so that it doesn't wrap to 3 lines"). */
.list td.sent { white-space: nowrap; }
.list td b { font-weight: 650; }
.list tr.sum td { background: var(--tile-2); font-weight: 650; }
.list tr.on td { background: var(--accent-bg); }
.signin { max-width: 420px; margin: 80px auto; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 36px; }

.pickers { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
table.facts { border-collapse: separate; border-spacing: 0 4px; margin: 0 0 20px; background: none; }
.facts th, .facts td { padding: 10px 14px; text-align: left; vertical-align: middle; background: var(--tile); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts th { width: 190px; color: var(--muted); font-weight: 600; font-size: 13.5px; border-left: 1px solid var(--line); border-radius: 12px 0 0 4px; background: var(--tile-2); }
.facts td { border-right: 1px solid var(--line); border-radius: 0 12px 4px 0; }
.scroll { overflow-x: auto; }
/* A grid inside a scroll box: fit the box (the grid's own -3px margins made it 3px wider, so a scrollbar showed
   for nothing), and no sticky headings there (a scroll box is their scroll parent, so --top-h pushed them down
   into the rows) (Blase, 2026-11-04: "a weird unnecessary scroll thing happening in sizes"). */
.scroll > table.grid { width: 100%; margin: 0; }
.scroll > table.grid th { position: static; }
.grid.proj td.empty { font-weight: 650; }
.grid.proj tr.total td { font-weight: 650; background: var(--tile-2); }
.grid.proj tr.arr td { background: var(--accent-bg); }
/* Inside a sideways-scrolling box a sticky header would sit over the first row. */
.grid.proj th { position: static; background: none; }
.port { margin: 26px 0 10px; font-size: 16px; }

/* ---------- Money chart ---------- */
.bars { display: grid; grid-template-columns: repeat(13, minmax(38px, 1fr)); gap: 6px; align-items: end; height: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 14px 14px 0; overflow-x: auto; }
.bcol { display: flex; flex-direction: column; height: 100%; }
.bstack { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; border-bottom: 1px solid var(--line-2); }
.bstack .seg:last-child { border-radius: 4px 4px 0 0; }
.bval { font-size: 11px; color: var(--muted); text-align: center; min-height: 16px; }
.blab { font-size: 11px; color: var(--muted); text-align: center; padding: 6px 0 10px; white-space: nowrap; }
.bcol.over .blab { color: var(--short); font-weight: 650; }
.blegend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 18px; font-size: 12.5px; color: var(--ink-2); }
.blegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px 3px 1px 1px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Filter tabs (Alerts, Money) ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px 10px 4px 4px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 600; }
.tabs a .muted { font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: oklch(100% 0 0 / 0.06); color: var(--muted); }
.tabs a:hover { border-color: var(--line-2); color: var(--ink); }
.tabs a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* A card's tabs sit on one shared line (Blase, 2026-11-04: "some sort of shared underline for the tabs"), with room
   under the product name; the open tab joins the line. */
.card-tabs { margin: 16px 0 14px; gap: 4px; flex-wrap: nowrap; border-bottom: 2px solid var(--ink); padding: 0 2px; }
/* A card's tabs look like the app's other tabs (.tabs a), not like its action buttons (.truck button). */
.truck .card-tabs button, .truck .card-tabs button:hover:not(:disabled) { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 7px 14px; border-radius: 10px 10px 0 0; background: var(--panel); background-image: none; border: 1px solid var(--line); border-bottom: 0; box-shadow: none; color: var(--ink-2); font: 600 13px var(--sans); cursor: pointer; }
.truck .card-tabs button:hover:not(:disabled) { border-color: var(--line-2); color: var(--ink); }
.truck .card-tabs button.on, .truck .card-tabs button.on:hover:not(:disabled) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs a.on .muted { background: oklch(0% 0 0 / 0.1); color: oklch(35% 0.02 265); }

.setform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .setform button { min-height: 32px; padding: 0 12px; }
.truck { background: linear-gradient(180deg, oklch(100% 0 0 / 0.03), transparent 120px), var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 16px 18px; margin: 0 0 16px; }
.truck h3 { margin: 0 0 8px; font-size: 18px; }
.truck h3.line { font: 700 11.5px/1 var(--sans); margin: 18px 0 8px; }
.truck.cancelled { opacity: 0.6; }
details.cancelled-trucks > summary { cursor: pointer; margin: 8px 0 12px; color: var(--muted); }
nav.subnav:not(:has(a)) { display: none; }
.truck h3 .muted { font: 500 13.5px var(--sans); margin-left: 6px; }
.truck p { margin: 8px 0; }
/* The Buy plan by ManFamily (86bcy28eq): a family's header over its members' cards, set apart by a band on the left. */
.fam-block { border-left: 3px solid var(--line-2); padding: 2px 0 2px 16px; margin: 0 0 28px; }
.fam-block > h2 { margin: 6px 0 10px; font-size: 21px; }
.fam-block > h2 .muted { font: 500 13.5px var(--sans); margin-left: 6px; }
.fam-block > h2 .fam-key { font: 500 12px var(--mono); }
.fam-block .fam-members, .fam-block .fam-shared { margin: 6px 0 10px; }
.fam-co-first { border: 1px solid oklch(72% 0.13 165 / 0.6); background: oklch(72% 0.13 165 / 0.08); border-radius: var(--shape); padding: 8px 14px; margin: 0 0 12px; }
.fam-co-first .lead-line span + span, .fam-co-first .lead-line span + a { margin-left: 8px; }
.fam-start { margin: 6px 0 16px; }
.fam-start button + button { margin-left: 8px; }
form.cform select, form.cform input[type=date] { padding: 4px 30px 4px 8px; }
/* A4 Arrivals vs projection: the chart's chrome (marks are coloured in screens/arrivalsvs.js). */
.av-wrap { position: relative; background: oklch(97% 0.005 265); color: #1d2430; border: 1px solid var(--line); border-radius: var(--shape); padding: 10px; max-width: 900px; }
svg.av { display: block; width: 100%; height: auto; font-family: inherit; }
.av-tip { position: absolute; top: calc(100% + 6px); z-index: 1; min-width: 180px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px 10px 4px 4px; padding: 8px 12px; box-shadow: 0 10px 30px oklch(0% 0 0 / 0.4); font-size: 12.5px; pointer-events: none; }
.av-legend { display: flex; gap: 16px; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.av-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.av-legend .k-line { width: 16px; height: 2px; background: #2a78d6; }
.av-legend .k-col { width: 10px; height: 10px; border-radius: 2px 2px 0 0; background: #eb6834; }
.av-legend .k-safe { width: 16px; height: 1px; background: var(--ink-2); }
/* Size buttons inside the chart's frame (86bcxwhx0): hover shows a size, a click holds it; red = goes below safety. */
.av-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.av-chip { font: 600 12.5px var(--sans); padding: 3px 10px; border-radius: 8px; border: 1px solid #c3c2b7; background: #ffffff; color: #1d2430; cursor: pointer; }
.av-chip.av-red { border-color: #c0392b; color: #c0392b; }
.av-chip.on { background: #1d2430; border-color: #1d2430; color: #ffffff; }
.av-chip.av-red.on { background: #c0392b; border-color: #c0392b; }
.av-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px #2a78d6; }
.av-showing { margin: 0 0 6px; font-size: 13px; }
.av-low { color: #c0392b; }
/* F1 Exec summary: the big-number tiles. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); color: inherit; text-decoration: none; }
.tile .tval { font: 700 28px/1.1 var(--display); letter-spacing: -0.02em; }
.tile .tlab { color: var(--ink); }
.tile .tsub { color: var(--muted); font-size: 12.5px; }

/* Freight bills (86bcrnh4e): the bill a truck or container linked to; the row's buttons. */
tr.hl td { background: var(--low-bg); }
td.acts button { margin: 0 4px 2px 0; min-height: 30px; padding: 0 10px; }
.bfilter label { margin-right: 10px; white-space: nowrap; }
/* The freight button's wait (86bctjcm3): the label and the ticking figure beside it. */
.freight-wait { display: inline-flex; align-items: center; gap: 0.4em; text-align: left; }
.freight-wait .countdown { font-variant-numeric: tabular-nums; font-weight: bold; }

/* ---------- Product icons: a glove filled in the product's colour, or a pack of wipes ----------
   The real app can set --glove from the product's colour (rules/countsheet.js SHEET_COLOURS) instead of the c-* classes. */
.src-mark { white-space: nowrap; display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.3; padding: 0 6px; margin-left: 6px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); vertical-align: 2px; }
.picon { position: relative; display: inline-block; flex: none; width: 32px; height: 32px; vertical-align: middle; margin: -8px 0 -6px 10px; }
/* In a table cell the icon sits at the cell's right edge, so a column of names keeps its icons in line. */
/* In a table cell the icon is pinned to the cell's right edge, so names wrap beside it and a column of icons lines up. */
td:has(.picon), th:has(.picon) { position: relative; padding-right: 50px !important; }
td .picon, th .picon { position: absolute; right: 10px; top: 50%; margin: -16px 0 0; }
.picon::before, .picon::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.picon::before { --m: var(--m-line); background: var(--glove-line); }
.picon::after { --m: var(--m-fill); }
.picon.glove { --m-fill: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cg%20fill%3D'black'%3E%3Crect%20x%3D'9.5'%20y%3D'4'%20width%3D'4.2'%20height%3D'13'%20rx%3D'2.1'%2F%3E%3Crect%20x%3D'14.1'%20y%3D'2.2'%20width%3D'4.2'%20height%3D'14'%20rx%3D'2.1'%2F%3E%3Crect%20x%3D'18.7'%20y%3D'3.4'%20width%3D'4.2'%20height%3D'13'%20rx%3D'2.1'%2F%3E%3Crect%20x%3D'23.2'%20y%3D'6.6'%20width%3D'3.8'%20height%3D'10'%20rx%3D'1.9'%2F%3E%3Crect%20x%3D'9.5'%20y%3D'12'%20width%3D'17.5'%20height%3D'12.5'%20rx%3D'4'%2F%3E%3Crect%20x%3D'4.4'%20y%3D'12.6'%20width%3D'4.4'%20height%3D'11'%20rx%3D'2.2'%20transform%3D'rotate(-32%208.6%2023)'%2F%3E%3Crect%20x%3D'10.2'%20y%3D'23.5'%20width%3D'16'%20height%3D'6.5'%20rx%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --m-line: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cg%20fill%3D'black'%20stroke%3D'black'%20stroke-width%3D'2.6'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'9.5'%20y%3D'4'%20width%3D'4.2'%20height%3D'13'%20rx%3D'2.1'%2F%3E%3Crect%20x%3D'14.1'%20y%3D'2.2'%20width%3D'4.2'%20height%3D'14'%20rx%3D'2.1'%2F%3E%3Crect%20x%3D'18.7'%20y%3D'3.4'%20width%3D'4.2'%20height%3D'13'%20rx%3D'2.1'%2F%3E%3Crect%20x%3D'23.2'%20y%3D'6.6'%20width%3D'3.8'%20height%3D'10'%20rx%3D'1.9'%2F%3E%3Crect%20x%3D'9.5'%20y%3D'12'%20width%3D'17.5'%20height%3D'12.5'%20rx%3D'4'%2F%3E%3Crect%20x%3D'4.4'%20y%3D'12.6'%20width%3D'4.4'%20height%3D'11'%20rx%3D'2.2'%20transform%3D'rotate(-32%208.6%2023)'%2F%3E%3Crect%20x%3D'10.2'%20y%3D'23.5'%20width%3D'16'%20height%3D'6.5'%20rx%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --glove: oklch(70% 0.02 265); --glove-line: oklch(100% 0 0 / 0.5); --cuff: color-mix(in oklch, var(--glove), black 22%); }
.picon.glove::after { background: linear-gradient(180deg, var(--glove) 0 75%, var(--cuff) 75%); }
.picon.c-white { --glove: oklch(97% 0.008 90); --glove-line: oklch(58% 0.012 265); --cuff: oklch(86% 0.012 90); }
.picon.c-black { --glove: oklch(20% 0.01 265); --glove-line: oklch(78% 0.01 265); --cuff: oklch(12% 0.01 265); }
.picon.c-blue { --glove: oklch(58% 0.19 260); --glove-line: oklch(88% 0.06 255); }
.picon.c-vblue { --glove: oklch(76% 0.11 225); --glove-line: oklch(93% 0.04 225); }
.picon.c-clear { --glove: oklch(94% 0.03 210 / 0.28); --glove-line: oklch(93% 0.04 210 / 0.95); --cuff: oklch(94% 0.03 210 / 0.45); }
/* The base's other glove colours (Products: Colour), drawn the same way (screens/util.js iconClass). */
.picon.c-ivory { --glove: oklch(93% 0.035 92); --glove-line: oklch(58% 0.02 80); --cuff: oklch(84% 0.035 88); }
.picon.c-pink { --glove: oklch(74% 0.17 345); --glove-line: oklch(92% 0.06 345); }
.picon.c-purple { --glove: oklch(72% 0.08 300); --glove-line: oklch(92% 0.04 300); }
.picon.c-green { --glove: oklch(64% 0.17 150); --glove-line: oklch(90% 0.07 150); }
.picon.c-orange { --glove: oklch(73% 0.16 55); --glove-line: oklch(92% 0.06 60); }
.picon.c-skyblue { --glove: oklch(86% 0.045 245); --glove-line: oklch(60% 0.05 250); --cuff: oklch(78% 0.05 245); }
.picon.c-cobalt { --glove: oklch(50% 0.17 262); --glove-line: oklch(84% 0.07 258); }
.picon.c-none { --glove: transparent; --cuff: transparent; --glove-line: oklch(100% 0 0 / 0.3); }
.picon.wipes { --m-fill: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cg%20fill%3D'black'%3E%3Crect%20x%3D'3'%20y%3D'11'%20width%3D'26'%20height%3D'16'%20rx%3D'5'%2F%3E%3Crect%20x%3D'11'%20y%3D'4.5'%20width%3D'10'%20height%3D'10'%20rx%3D'2.5'%20transform%3D'rotate(-7%2016%2010)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --m-line: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cg%20fill%3D'black'%20stroke%3D'black'%20stroke-width%3D'2.6'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'11'%20width%3D'26'%20height%3D'16'%20rx%3D'5'%2F%3E%3Crect%20x%3D'11'%20y%3D'4.5'%20width%3D'10'%20height%3D'10'%20rx%3D'2.5'%20transform%3D'rotate(-7%2016%2010)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --glove-line: oklch(100% 0 0 / 0.55); --open: color-mix(in oklch, var(--pack), black 48%); }
.picon.wipes::after { background: radial-gradient(ellipse 19% 7% at 50% 49%, var(--open) 0 94%, transparent 100%), linear-gradient(180deg, #fff 0 34%, transparent 34%), var(--pack); }
.picon.wipes { --pack: oklch(80% 0.06 230); } /* wipes neither hand nor surface (e.g. alcohol wipes) */
.picon.c-hand { --pack: oklch(78% 0.11 170); }
.picon.c-surface { --pack: oklch(84% 0.12 95); }
.muted > .picon, a > .picon { width: 26px; height: 26px; margin: -5px 0 -4px 8px; }
td .muted > .picon, td a > .picon { margin: -13px 0 0; }
h3 > .picon, .sheetname > .picon { width: 40px; height: 40px; margin: -10px 0 -8px 10px; }
.sheetline .sheetname b { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; column-gap: 10px; }
.sheetline .sheetname b > .picon { width: 40px; height: 40px; margin: 0; }
.po-line .f-product { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.po-line .f-product .flab { grid-column: 1 / -1; }
.po-line .f-product > .picon { width: 40px; height: 40px; margin: 0; }

/* ---------- Language switch (86bcu611u): EN / ES, just left of the signed-in chip; Español by default ---------- */
.lang { position: relative; flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 4px; margin: 0 4px 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px; }
.lang::before { content: ""; position: absolute; left: -11px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.lang button { position: relative; min-height: 0; height: 26px; padding: 0 8px; font: 700 12px/1 var(--sans); letter-spacing: 0.06em; color: var(--muted);
  background: none; border: 0; border-radius: 6px; box-shadow: none; }
.tools .lang button { min-height: 0; padding: 0 8px; font-size: 12px; background: none; border: 0; }
.lang button + button { margin-left: 10px; }
.lang button + button::before { content: "/"; position: absolute; left: -9px; color: var(--dim); font-weight: 500; pointer-events: none; }
.lang button:hover, .tools .lang button:hover { color: var(--ink); background: none; }
.lang button[aria-pressed="true"] { color: var(--ink); }
.lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--in-line); }
.tools .who { margin-left: 6px; }

/* ---------- Inline form rows (filters, bills, change orders): one wrapping row of labelled controls ---------- */
form p:has(> label, > select, > input:not([type=hidden]), > textarea) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; }
form p > label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--in-lab); font-weight: 600; font-size: 13.5px; }
form p > label > input, form p > label > select { color: var(--in-ink); font-weight: 500; }
form p > textarea { flex: 1 1 320px; }
form p > a { font-weight: 600; }
.bfilter, .bform, .cform, .coform { background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 16px 18px 4px; margin: 0 0 20px; }
.coform { padding-top: 12px; }
.coform .grid th.name[rowspan] { vertical-align: middle; }
/* The change order grid: compact rows, so a PO's codes stay readable as one block. */
.coform .grid th, .coform .grid td { padding: 5px 6px; }
.coform .grid td.name, .coform .grid tbody th.name { padding: 7px 12px; }
.coform .grid input.qty { min-height: 32px; font-size: 14px; }
.coform .grid td.name input, .coform .grid td.name select, .coform .grid th.name input, .coform .grid th.name select { min-height: 30px; font-size: 13px; padding-top: 3px; padding-bottom: 3px; }
.coform .grid td.name:has(input, select), .coform .grid th.name:has(input, select) { white-space: normal; min-width: 300px; line-height: 2.3; }
/* "No window open": the products as a row of chips instead of one run of text. */
.nowin { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.nowin > p { margin: 0 0 10px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; background: var(--tile); border: 1px solid var(--line); border-radius: 10px 10px 4px 4px; font-weight: 600; }
.chips li > .picon { width: 28px; height: 28px; margin: -4px 0 -4px -2px; }

/* ---------- Disclosure panels, change orders, the container page ---------- */
details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 0 16px; margin: 0 0 16px; }
details[open] { padding-bottom: 14px; }
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 650; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; transform: rotate(-90deg); transition: transform .12s;
  -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; }
details[open] > summary::before { transform: none; }
details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
details.critical { border-color: var(--short-line); background: linear-gradient(180deg, oklch(39.5% 0.12 22 / 0.35), transparent 90px), var(--panel); }
details.critical > summary { color: var(--short); }
details.nextwin, section.nextwin { background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 14px 18px; margin: 0 0 20px; }
section.nextwin h2 { margin-top: 0; }
details.nextwin > summary { padding: 0; }
details.nextwin > summary h2 { margin: 0; }
details.nextwin[open] > summary { padding-bottom: 10px; }
details.bv-family > summary { padding: 8px 0; }
details.bv-family > summary h3 { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
details.bv-family > summary h3 .bv-k { font-size: 13px; font-weight: 500; }
/* The change-order balance view (86bcvfnwf, D90): one box per opportunity, one block per family. */
.opportunity .bv-family { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.opportunity .bv-family h3 { margin: 0; }
.bv-mode { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.bv-mode label { display: inline-flex; gap: 6px; align-items: center; }
.bv-plus { margin: 6px 0; }
.bv-graphs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; }
.bv-graph { flex: 1 1 420px; max-width: 560px; min-width: 0; }
.bv-pair { flex-wrap: nowrap; }
.bv-pair .bv-graph { flex: 1 1 0; max-width: none; }
.bv-alone { height: 100%; min-height: 160px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 16px; border: 1px dashed var(--line); border-radius: 8px; }
.bv-alone p { margin: 4px 0; }
@media (max-width: 760px) { .bv-pair { flex-wrap: wrap; } .bv-pair .bv-graph { flex-basis: 100%; } }
.bv-product { margin: 14px 0 6px; }
.bv-product h4 { margin: 0 0 4px; font-size: 14px; }
.bv-table { table-layout: fixed; }
.bv-table tfoot th, .bv-table tfoot td { font-weight: 600; }
.bv-title { position: absolute; top: 6px; left: 12px; font-size: 12.5px; font-weight: 600; color: #1d2430; pointer-events: none; }
.bv-title .muted { font-weight: 400; color: #52514e; }
.bv-title .picon { width: 22px; height: 22px; margin: -6px 0 -6px 6px; }
.bv-table input.bv-req { width: 7em; text-align: right; }
.bv-table input.bv-req.bad { outline: 2px solid var(--short-line); }
.bv-table th button.link { font-weight: 500; padding: 0 0 0 4px; }
.bv-bal { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; border: 1px solid; }
.bv-bal.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.bv-bal.bad { background: var(--short-bg); color: var(--short); border-color: var(--short-line); }
.bv-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; }
.bv-side { position: sticky; top: calc(var(--top-h, 52px) + 12px); display: flex; flex-direction: column; gap: 14px; }
.bv-side section, .bv-handbox { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.bv-side h4, .bv-handbox h3 { margin: 0 0 6px; font-size: 13px; }
.bv-handbox { margin-top: 16px; }
.bv-handbox h3 { font-size: 15px; }
ul.bv-codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.bv-handbox ul.bv-codes { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
.bv-apply-bar p { margin: 6px 0; }
.bv-apply-bar .bv-apply { width: 100%; min-height: 36px; }
button.bv-fillall { background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-weight: 400; font-style: italic; text-decoration: underline; color: inherit; cursor: pointer; box-shadow: none; }
button.bv-fillall:hover { background: none; color: var(--accent); }
@media (max-width: 1100px) { .bv-body { grid-template-columns: minmax(0, 1fr); } .bv-side { position: static; } }
dialog.bv-dialog { max-width: min(1240px, calc(100vw - 32px)); width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--shape); padding: 18px 22px; }
dialog.bv-dialog::backdrop { background: oklch(0% 0 0 / 0.55); }
dialog.bv-dialog h2 { margin-top: 0; }
.bv-doc { border: 1px dashed var(--line-2); border-radius: 8px; padding: 10px 14px; margin: 14px 0; }
.bv-doc p { margin: 2px 0; }
.bv-dialog-acts { display: flex; gap: 10px; justify-content: flex-end; }
.bv-graph h4 { margin: 4px 0 2px; font-size: 13px; }
.bv-wh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.bv-wh-step { padding: 2px 8px; }
.bv-route { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bv-stop { border: 1px solid var(--line, #ccc); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.bv-leg { color: var(--muted, #666); font-size: 0.9em; white-space: nowrap; }
.bv-wrap { position: relative; }
.bv-key { position: absolute; top: 10px; right: 14px; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 11.5px;
  color: #1d2430; background: rgba(255, 255, 255, 0.9); border: 1px solid #e1e0d9; border-radius: 4px; pointer-events: none; }
.bv-key i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.bv-key .k-solid { width: 16px; height: 2px; background: #1d2430; }
.bv-key .k-dash { width: 16px; height: 0; border-top: 2px dashed #1d2430; opacity: 0.6; }
i.k-prod { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.av-legend .k-solid { width: 16px; height: 2px; background: var(--ink-2); }
.av-legend .k-dash { width: 16px; height: 0; border-top: 2px dashed var(--ink-2); opacity: 0.6; }
section.po { margin-top: 30px; }
.grid td.rowtotal { font-weight: 700; background-color: var(--tile-2); }
.co-check { margin: 10px 0; }
.co-check .error { display: inline-flex; padding: 8px 12px; border-radius: 10px 10px 4px 4px; background: var(--short-bg); border: 1px solid var(--short-line); color: var(--short); font-weight: 600; }
textarea { min-height: 40px; width: 100%; resize: vertical; }
a.back { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 10px 10px 4px 4px; background: oklch(100% 0 0 / 0.04);
  color: var(--ink-2); font-weight: 600; text-decoration: none; }
a.back:hover { color: var(--ink); background: oklch(100% 0 0 / 0.08); }
.list td > button, .list td > select { margin: 2px 6px 2px 0; min-height: 32px; font-size: 13px; }
.list td > button { padding: 0 12px; }
.list td.name:has(> button, > select) { white-space: normal; }
.po-send, .sc-send { background: linear-gradient(180deg, var(--act-1), var(--act-2)); color: var(--act-ink); border: 1px solid oklch(78% 0.14 280 / 0.5);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.28), 0 6px 20px var(--act-glow); }
.po-send:hover, .sc-send:hover { background: linear-gradient(180deg, oklch(72% 0.18 280), var(--act-1)); border-color: oklch(85% 0.1 280 / 0.6); }
.msg:empty, .sc-last:empty, .sc-warn:empty { display: none; }
.sc-warn { color: var(--low); font-size: 12.5px; margin-top: 4px; }


/* ---------- Footer: the app's name and build ---------- */
.foot { display: flex; justify-content: center; padding: 28px 24px 34px; margin-top: auto; }
.foot .brand { display: flex; align-items: center; gap: 10px; font: 650 14px var(--display); color: var(--ink-2); letter-spacing: -0.01em; }
.foot #build { font: 500 11.5px var(--mono); color: var(--muted); padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px 7px 3px 3px; background: oklch(100% 0 0 / 0.04); }

/* ---------- Shared form layout (New PO, Floor counts, Transfer planner) ---------- */
.fields { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: end; margin: 0 0 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
form .field { margin-right: 0; }
.flab { font-size: 12.5px; font-weight: 650; color: var(--in-lab); line-height: 1.2; }
.field select, .field input { width: 100%; min-height: 40px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 16px 18px; }
.savebar { display: flex; flex-direction: row-reverse; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 22px 0 6px;
  padding: 14px 14px 14px 20px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--shape); }
.savebar > .muted { font-size: 13px; }
.savebar > .save-why { flex-basis: 100%; margin: 0; font-size: 13px; }
.po-when .field > .muted { font-size: 12px; line-height: 1.3; }
.po-when .hold-box { display: flex; align-items: center; min-height: 38px; }
.po-when .hold-box input { width: 18px; height: 18px; margin: 0; }
.po-when input[name=etd]:disabled { opacity: 0.55; }
.callout { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 14px; border-radius: 10px 10px 4px 4px; font-size: 13.5px; font-weight: 600; }
.callout.lowtext { background: var(--low-bg); border: 1px solid var(--low-line); color: var(--low); }
.callout::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }

/* ---------- Buy plan: when an order lands, lead time per product and port (86bcvuqpq) ---------- */
.lead-line { margin: 10px 0 6px; font-size: 13.5px; }
details.lead-inspect { margin: 10px 0 12px; }
details.lead-inspect .grid { margin: 0 0 12px; }
details.lead-inspect summary .pill { font-size: 11.5px; }
.exit-note:empty { display: none; }

/* ---------- New PO (pobuild) ---------- */
.poform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.po-build, .po-preview { min-width: 0; }
.po-lines { display: flex; flex-direction: column; gap: 12px; }
.po-line { background: linear-gradient(180deg, oklch(100% 0 0 / 0.035), transparent 90px), var(--panel); border: 1px solid var(--line); border-radius: var(--shape);
  padding: 14px 16px 16px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; }
.po-line .f-product { grid-column: 1; }
.po-line .f-product select { font-weight: 650; font-size: 15px; }
.po-line .po-remove { grid-column: 2; align-self: end; width: 40px; height: 40px; padding: 0; font-size: 0; color: var(--muted); background: transparent; }
.po-line .po-remove::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-x) center / contain no-repeat; mask: var(--i-x) center / contain no-repeat; }
.po-line .po-remove:hover { color: var(--short); border-color: var(--short-line); background: var(--short-bg); }
.po-when { grid-column: 1 / -1; display: grid; grid-template-columns: 0.8fr 1.3fr auto 1.3fr 0.6fr; gap: 10px; align-items: start; }
.po-when select[name=letter] { text-align: center; font-family: var(--mono); }
.po-line .f-product .po-frag { font-family: var(--mono); font-size: 13px; color: var(--muted); }
/* 86bcudq4m decision 2: how far a size is from whole pallets; red until it reads 0. */
.size .pal-off { min-height: 16px; font-size: 12px; text-align: center; color: var(--muted); font-family: var(--mono); }
.size .pal-off.off { color: var(--short); font-weight: 650; }
/* 86bcudq4m decision 1: the order code's part Luis writes in bold, what we add around it lighter. */
.code-side { font-style: italic; font-weight: 400; color: var(--muted); }
.sizes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.size { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.size > span:first-child { font-size: 12px; font-weight: 700; color: var(--in-lab); text-align: center; letter-spacing: 0.04em; }
.sizes.ro .size > span:first-child { color: var(--muted); }
.size input.qty { width: 100%; text-align: center; font-size: 15px; min-height: 40px; padding: 4px 2px; border-radius: 8px 8px 3px 3px; }
.po-add-row { margin: 12px 0 0; }
.po-add { width: 100%; min-height: 46px; border-radius: var(--shape); }
.po-add::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }

.po-preview > h2 { margin: 30px 0 14px; font-family: var(--mono); font-size: 19px; letter-spacing: -0.01em; }
.po-ships { display: flex; flex-direction: column; gap: 12px; }
.po-ship { background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); overflow: hidden; }
.po-ship-head { padding: 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, oklch(76% 0.12 240 / 0.1), transparent 70%); }
.po-ship-head .kv { padding: 0; grid-template-columns: minmax(0, 1fr); }
.po-ship-head .name { display: flex; flex-direction: column; gap: 2px; }
.po-ship-head b { font-family: var(--mono); font-size: 14px; word-break: break-word; color: var(--ink); }
.po-ship-head .muted { font-size: 13px; }
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 12px 16px; }
.kv > div { min-width: 0; }
.kv dt { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.kv dd { margin: 4px 0 0; font-weight: 600; }
.kv dd:empty::after { content: "–"; color: var(--dim); font-weight: 400; }
.kv dd.muted { font-weight: 500; }
.kv.totals { border-top: 1px solid var(--line); }
.kv.totals dd b { font: 700 19px var(--display); }
.po-containers { padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.po-containers .flab { font-size: 12px; font-weight: 600; color: var(--muted); }
.po-containers ol { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.po-containers p { margin: 6px 0 0; font-size: 12px; }
.sizes.ro { padding: 0 16px 14px; }
.sizes.ro .size { background: var(--tile); border-radius: var(--cell); padding: 7px 2px; text-align: center; gap: 2px; }
.sizes.ro .size b { font-size: 15px; }
.sizes.ro .size .muted { font-size: 11px; }
.sizes.ro .size.zero { background: var(--tile-0); }
.sizes.ro .size.zero b { color: var(--dim); font-weight: 500; }
ul.problems { list-style: none; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; background: oklch(34% 0.065 80 / 0.25); }
ul.problems li { position: relative; padding-left: 16px; }
ul.problems li::before { content: ""; position: absolute; left: 1px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--low); box-shadow: 0 0 8px var(--low); }
ul.problems li.muted { color: var(--ink-2); }
.po-notes { margin-top: 14px; font-size: 13px; }
.po-notes p { margin: 0 0 6px; }
/* New PO's Notes box, and the note under a PO made here (86bcxqrbx). */
.po-build .f-notes { flex: 1 1 320px; }
.po-note { font-size: 12.5px; margin-top: 2px; white-space: normal; }
/* The factory's answer under a request's row (86bcxqrbx): its own table of lines, then Save / Accept. */
.answer-row > td { padding-top: 0; }
.answer summary { cursor: pointer; margin: 4px 0 6px; }
.answer table.list { margin: 6px 0 8px; }
.answer input[type=date], .answer input.ans-price { max-width: 150px; }
.po-msg:empty { display: none; }
@media (min-width: 1240px) {
  .poform { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .po-preview > h2 { margin-top: 0; }
  .poform > .savebar, .poform > .po-msg { grid-column: 1 / -1; }
}

/* ---------- Floor counts (C5): laid out like the count sheet, one card per line, sizes down the card ---------- */
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 10px; margin-bottom: 8px; }
.sheetline { background: var(--panel); border: 1px solid var(--line); border-radius: var(--shape); padding: 0 0 10px; min-width: 0; overflow: hidden; }
.sheetline.bundle { border-style: dashed; border-color: var(--line-2); border-width: 2px; }
/* Colours from the warehouses' sheet (rules/countsheet.js SHEET_COLOURS, SHEET_TAN): the name cell in the
   glove's colour, group headings and size labels in the sheet's tan. */
.sheetline .sheetname { margin: 0 0 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); line-height: 1.25; min-height: 40px; }
.sheetline .sheetname b { font: 650 14.5px var(--display); }
.sheetline .ledgername { color: var(--muted); font-size: 0.85em; margin: -2px 12px 8px; }
.sheetline table { border-collapse: separate; border-spacing: 0 5px; width: 100%; padding: 0 10px; }
.sheetline th { text-align: center; width: 48px; padding: 0 4px; font-weight: 700; font-size: 12px; background: var(--tan); color: var(--tan-ink); border-radius: 8px 0 0 3px; }
.sheetline td { padding: 0; }
.sheetline input.qty { width: 100%; min-height: 40px; font-size: 16px; text-align: right; padding: 4px 10px; border-radius: 0 8px 3px 0; border-left: 0; }
.sheetline th { letter-spacing: 0.04em; } /* Design v1b had color: var(--in-lab); Blase: white text on the #35383D grey, so --tan-ink stays */
.sheetline { background: var(--tile); border-color: oklch(100% 0 0 / 0.1); }
.sheetline .sheetname { background: oklch(34% 0.01 265); color: #fff; border-bottom-color: oklch(100% 0 0 / 0.08); }
h2.sheetgroup { background: var(--tan); color: var(--tan-ink); border: 1px solid oklch(100% 0 0 / 0.08); padding: 8px 14px; font: 700 14px var(--sans); border-radius: 12px 12px 4px 4px; margin: 28px 0 12px; }
h2.sheetgroup::before { display: none; }
/* Count by pallet (86bcy0t25): Pallets × the figure + Loose cases per size, the total under them; the bar
   with the lines counted and the product search stays under the header while the sheet scrolls. */
#cf-all { border: 0; padding: 0; margin: 0; min-width: 0; }
.sheetsec[hidden], .sheetline[hidden] { display: none; }
.countbar { position: sticky; top: var(--top-h, 52px); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--shape); background: oklch(25% 0.018 265 / 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#cf-progress { font-weight: 650; }
.countbar input[type=search] { flex: 1 1 200px; max-width: 320px; min-height: 40px; font-size: 16px; }
.sheetline.haspallets { grid-column: span 2; }
.sheetline .perpallet { color: var(--muted); font-size: 12.5px; margin: -2px 12px 6px; }
.sheetline tr.phead th { background: none; }
.sheetline tr.phead .pallets { font-size: 12px; color: var(--muted); text-align: center; }
.sheetline .pallets { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; }
.sheetline .pallets input.qty.plt { border-radius: 0 3px 3px 0; border-left: 0; }
.sheetline .pallets input.qty:not(.plt) { border-left: 1px solid var(--line); border-radius: 3px 8px 3px 3px; }
.sheetline .times { text-align: center; color: var(--muted); font-size: 13px; white-space: nowrap; }
.sheetline .ptotal { display: block; text-align: right; font-size: 13px; font-weight: 650; padding: 2px 4px 0; min-height: 0; }
.sheetline .ptotal:empty { display: none; }
.countbar .cb-group { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.countbar .cb-group select { min-height: 40px; }
.rearrange { margin: 12px 0; padding: 14px; }
.rearrange h3 { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 14px; }
.rearrange h3 .mv { margin-left: auto; }
.rearrange h3 .mv + .mv { margin-left: 0; }
.rearrange ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rearrange li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--tile); }
.rearrange li.dragging { outline: 2px solid var(--tan); opacity: 0.85; }
.rearrange .grip { cursor: grab; touch-action: none; user-select: none; font-size: 20px; padding: 6px 10px; color: var(--muted); }
.rearrange .rname { flex: 1; font-weight: 600; min-width: 0; }
.rearrange .mv { min-width: 40px; min-height: 40px; padding: 0; }
.rearrange .rbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.rearrange .rbar .link { background: none; border: 0; text-decoration: underline; color: inherit; cursor: pointer; margin-left: auto; }
#cf-draft button.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }

/* ---------- Transfer planner ---------- */
.trucks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 720px), 1fr)); gap: 16px; align-items: start; }
.trucks .truck { margin: 0; padding: 0; overflow: hidden; }
.truck-head { padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, oklch(76% 0.12 240 / 0.1), transparent 70%); }
.truck-head h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.truck-head h3 .muted { display: block; margin: 4px 0 0; font-size: 13.5px; }
.trucks form.pf { padding: 4px 18px 0; }
.trucks .grid td.name { white-space: normal; min-width: 200px; }
.trucks .grid td.name .muted { display: block; font-size: 12px; font-weight: 500; margin-top: 1px; }
.trucks .grid td { padding: 5px 4px; background: var(--tile-0); }
.grid td:has(> input, > select) { background-color: var(--in-cell); box-shadow: inset 0 0 0 1px oklch(64% 0.2 10 / 0.3); }
.grid thead th.in { color: var(--in-lab); }
.grid thead th.in::after { content: ""; display: block; height: 2px; margin: 6px 22% 0; border-radius: 2px; background: var(--in-line); opacity: 0.7; }
.trucks .grid td.name { padding: 8px 12px; background: var(--tile-2); }
.trucks .grid td:last-child { font: 700 15px var(--display); background: var(--tile-2); padding-right: 12px; text-align: right; }
.trucks .grid th { position: static; background: none; }
.trucks .grid th:last-child { text-align: right; }
.trucks .grid input.qty { width: 100%; min-width: 50px; max-width: 78px; text-align: center; padding: 4px 2px; border-radius: 7px 7px 3px 3px; }
.trucks .grid input.qty[value=""] { background-color: oklch(88% 0.008 85); }
.truck-fields { margin: 16px 0 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.truck-fields .callout { grid-column: 1 / -1; }
.trucks .savebar { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 14px -18px 0; padding: 14px 18px; background: oklch(100% 0 0 / 0.02); }
.pf-msg:empty { display: none; }

/* ---------- The Help / Ayuda sidebar (86bctrp2t, js/help.js) ---------- */
/* Open, the page narrows so the screen stays beside it. */
body.help-open { padding-right: min(420px, 100vw); }
/* Its opener is a thin strip on the page's right edge, not a header button (Blase, 2026-10-28: "Just a thin
   column that clicks to pop out"). Open, the strip sits on the panel's left edge and its arrows point back.
   The soft violet glow on the page's right edge (html background) comes from it. */
.help-tab { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 4; width: 28px; padding: 14px 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px; font: 700 12.5px var(--sans); cursor: pointer;
  background: linear-gradient(180deg, oklch(74% 0.16 310), oklch(58% 0.18 305)); color: #fff; border: 0; border-radius: 14px 0 0 6px;
  box-shadow: 0 0 28px oklch(68% 0.17 310 / 0.6), inset 1px 1px 0 oklch(100% 0 0 / 0.3); transition: width .15s ease; }
a.help-tab, a.help-tab:hover { color: #fff; text-decoration: none; }
.help-tab:hover { width: 32px; background: linear-gradient(180deg, oklch(78% 0.15 310), oklch(62% 0.18 305)); border: 0; }
.help-tab[hidden] { display: none; }
.help-tab .label { writing-mode: vertical-rl; letter-spacing: 0.1em; }
.help-tab .q { font-weight: 800; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: oklch(50% 0.18 305); display: grid; place-items: center; font-size: 12px; line-height: 1; }
.help-tab .arrow { font-size: 13px; line-height: 1; opacity: 0.85; }
.help-tab .arrow::before { content: "«"; }
body:has(.help-tab:not([hidden])) { padding-right: 28px; }
body.help-open .help-tab { right: min(420px, 100vw); }
body.help-open .help-tab .arrow::before { content: "»"; }
body.help-open:has(.help-tab:not([hidden])) { padding-right: calc(min(420px, 100vw) + 28px); }

/* Below a wide laptop, wide tables scroll sideways inside themselves; the product name stays pinned on the left. */
@media (max-width: 1279px) {
  table.grid, table.list, table.facts { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grid th { position: static; background: none; }
  .grid td.name, .grid th.name, .grid tbody th.name { position: sticky; left: 0; z-index: 1; box-shadow: 8px 0 12px -6px oklch(0% 0 0 / 0.6); }
  .grid th.name { background: var(--tile-0); border-radius: 10px 10px 3px 3px; top: auto; }
}

/* ---------- Phones (the warehouses) ---------- */
@media (max-width: 760px) {
  /* A filter row's long select or wide search box wraps under its label instead of running off a phone (Freight's "Sort by"). */
  form p > label { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  form p > label > select, form p > label > input { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  /* The open Ayuda panel covers a phone's whole width (help.js): no room to make beside it, and its own ✕ closes it, so the tab steps aside
     (pushed 28px past the edge it widened the page). */
  body.help-open, body.help-open:has(.help-tab:not([hidden])) { padding-right: 0; }
  body.help-open .help-tab { visibility: hidden; }
  .top { background: linear-gradient(180deg, oklch(34% 0.1 276), oklch(29% 0.09 278)); }
  .top { position: static; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tools" "nav"; padding: 10px 14px 0; gap: 10px; }
  /* A phone's header is too tall to keep (more than a quarter of the screen): it scrolls away as before, and the pinned box stops with
     only Preview as and the screen tabs showing (--hdr-h, set by main.js, is the header's height). */
  .pin { top: calc(-1 * var(--hdr-h, 0px)); }
  .tools { justify-self: stretch; flex-wrap: wrap; white-space: normal; }
  .tools label { flex: 1 1 100%; min-width: 0; }
  .tools #wh-filter { flex: 1 1 0; width: 100%; min-width: 0; }
  .tools #refreshed { flex: 1 0 140px; }
  .tools .who { flex: 1 1 auto; }
  .lang { height: 38px; margin: 0 0 0 auto; }
  .lang::before { display: none; }
  .tools .lang button { height: 32px; }
  .tools .who { margin-left: 0; }
  #preview-wrap { align-self: stretch; height: auto; margin: 12px 14px 0; box-shadow: none; min-width: 0; white-space: normal; flex-wrap: wrap; }
  #preview-wrap select { flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; }
  .top nav { margin: 0 -14px; padding: 0 6px; }
  nav.subnav { margin: 12px 14px 0; max-width: calc(100% - 28px); }
  .banner { margin: 12px 14px 0; }
  main { padding: 20px 14px 40px; }
  h1 { font-size: 28px; }
  h2 { font-size: 19px; margin-top: 30px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select { min-height: 44px; font-size: 16px; }
  .tools select, #preview-wrap select { min-height: 38px; font-size: 15px; }
  button { min-height: 44px; }
  .tools button { min-height: 38px; }
  .who { height: 38px; }
  .grid th { white-space: nowrap; }
  .grid td.name, .grid th.name, .grid tbody th.name { white-space: normal; min-width: 124px; }
  .facts th { width: auto; }
  .fields { display: grid; grid-template-columns: minmax(0, 1fr); }
  .savebar { flex-direction: column; align-items: stretch; padding: 14px; }
  .savebar button[type=submit] { width: 100%; min-height: 48px; }
  .po-line { padding: 14px; }
  .po-when { grid-template-columns: 1fr 1fr; }
  .sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .size input.qty { min-height: 46px; }
  .kv { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
  .sizes.ro { padding: 0 14px 14px; }
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 8px; }  /* one card per line, full width, on a phone (86bcy0t25) */
  .sheetline.haspallets { grid-column: auto; }
  /* On a phone the header above is tall, so the bar sits at the foot of the screen, in thumb reach. */
  .countbar { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 8px 12px; box-shadow: 0 6px 24px oklch(0% 0 0 / 0.5); }
  .countbar { gap: 6px 8px; }
  .countbar #cf-progress { order: 1; flex: 1 1 auto; }
  .countbar #cf-rearrange { order: 2; min-height: 36px; padding: 4px 12px; }
  .countbar input[type=search] { order: 3; flex: 1 1 140px; min-width: 0; max-width: none; min-height: 40px; }
  .countbar .cb-group { order: 4; flex: 0 1 auto; }
  .countbar .cb-group span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* the select keeps its label for screen readers */
  .countbar .cb-group select { min-height: 40px; max-width: 128px; }
  #cf { padding-bottom: 130px; }
  .sheetline input.qty { min-height: 46px; font-size: 18px; }
  .truck-fields { grid-template-columns: minmax(0, 1fr); }
  .trucks form.pf { padding: 4px 14px 0; }
  .truck-head { padding: 14px; }
  .trucks .savebar { margin: 14px -14px 0; padding: 14px; }
  .trucks .grid td.name { min-width: 132px; }
  .help-tab { width: 24px; padding: 12px 0; }
  body:has(.help-tab:not([hidden])) { padding-right: 24px; }
  html { --glow-help: radial-gradient(ellipse 110px 40vh at 100% 50%, oklch(68% 0.17 310 / 0.34), oklch(68% 0.17 310 / 0.08) 55%, transparent 72%);
    --glow-bottom: radial-gradient(ellipse 160% 36vh at 50% 100%, oklch(74% 0.11 240 / 0.11), transparent 78%); }
}

/* ---------- The number trace (86bcuepxt): a figure is a link to what it's made of; the panel slides in on the right, and fills the screen on a phone ---------- */
/* A light, dotted version of the red of things you act on (--in-line) marks a figure that opens its trace (Blase, 2026-10-29:
   "How about red?", then "lets go lighter, and dotted, rather than a solid line"). Solid on hover. */
:root { --trace-mark: oklch(76% 0.11 12 / 0.8); }
a.trace, #trace-panel a[data-trace] { color: inherit; text-decoration: underline dotted var(--trace-mark); text-underline-offset: 4px; text-decoration-thickness: 2px; cursor: pointer; }
a.trace:hover, a.trace:focus-visible, #trace-panel a[data-trace]:hover { text-decoration-style: solid; }
#trace-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(560px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px 28px; background: var(--panel); color: var(--ink); border-left: 1px solid var(--line-2); box-shadow: -18px 0 48px oklch(0% 0 0 / 0.45); }
#trace-panel[hidden] { display: none; }
.trace-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -20px 6px; padding: 12px 20px;
  background: var(--panel-2); border-bottom: 1px solid var(--line); }
.trace-bar .trace-tab { font-size: 13px; }
.trace-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 4px; }
.trace-what { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 650; }
.trace-at { margin: 2px 0 0; color: var(--ink-2); }
.trace-fig { margin: 6px 0 14px; font-family: var(--mono); font-size: 28px; font-weight: 600; }
.trace-eq { font-family: var(--mono); color: var(--ink-2); }
.trace-rows { width: 100%; }
.trace-rows td { vertical-align: top; }
.trace-ok { color: var(--ok); font-weight: 600; }
.trace-bad { color: var(--low); background: var(--low-bg); border: 1px solid var(--low-line); border-radius: 8px; padding: 8px 12px; }
.trace-formula th { white-space: nowrap; }
@media (max-width: 760px) {
  #trace-panel { width: 100vw; border-left: 0; padding: 0 16px 24px; }
  .trace-bar { margin: 0 -16px 6px; padding: 10px 16px; }
  .trace-bar .trace-close { font-size: 17px; padding: 10px 18px; min-height: 44px; }
  body.trace-open { overflow: hidden; }
  .trace-rows { display: block; overflow-x: auto; }
}
td[data-trace] { cursor: pointer; text-decoration: underline dotted var(--trace-mark); text-underline-offset: 4px; text-decoration-thickness: 2px; }
td[data-trace]:hover { outline: 1px dotted var(--trace-mark); outline-offset: -3px; }
td[data-trace]:focus-visible { outline: 2px solid var(--trace-mark); outline-offset: -3px; }
/* 86bcvfnwf: a Draft waiting in its family's block, and the folded list of recorded change orders. */
.bv-drafts { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--low-line); border-radius: 8px; background: oklch(41.5% 0.08 82 / 0.18); }
.bv-drafts p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0; }
.bv-drafts .badge { margin: 0; }
.bv-drafts .bv-co.dismissed { opacity: 0.6; }
dialog.bv-dialog form.coform { margin-top: 8px; overflow-x: auto; }
dialog.bv-dialog > table.bv-table { max-width: 760px; }
details.recorded section.po h3 { margin: 14px 0 4px; }

/* Report a bug / Request a feature (86bcvypex): the header's button and its panel, a side sheet like the trace's. */
.tools #report-open { white-space: nowrap; }
.fb-panel { position: fixed; top: var(--top-h, 52px); right: 0; bottom: 0; z-index: 21; width: min(480px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px 28px; background: var(--panel); border-left: 1px solid var(--line-2); box-shadow: -24px 0 60px oklch(0% 0 0 / 0.35); border-radius: 16px 0 0 6px; }
.fb-panel[hidden] { display: none; }
.fb-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0 -20px 4px; padding: 14px 20px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.fb-head h2 { flex: 1; margin: 0; font: 650 19px/1.25 var(--display); }
.fb-head h2::before { display: none; }
.fb-head .fb-x { width: 34px; min-height: 34px; padding: 0; }
.fb-tabs { margin: 8px 0 12px; }
.fb-form { display: grid; gap: 12px; }
.fb-kind { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--shape); }
.fb-kind legend { padding: 0 4px; color: var(--muted); font-size: 13px; }
.fb-kind label { display: flex; align-items: center; gap: 8px; margin: 0; }
.fb-text { display: grid; gap: 6px; margin: 0; }
.fb-text textarea { width: 100%; resize: vertical; }
.fb-hint { margin: -4px 0 0; font-size: 13px; }
.fb-captured { padding: 10px 12px; background: var(--tile-0); border: 1px solid var(--line); border-radius: var(--shape); }
.fb-captured h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fb-captured dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 13.5px; }
.fb-captured dt { color: var(--muted); }
.fb-captured dd { margin: 0; overflow-wrap: anywhere; }
.fb-actions { display: flex; gap: 8px; margin: 0; }
.fb-mine { width: 100%; font-size: 13.5px; }
.fb-mine td { vertical-align: top; }
.fb-panel p.ok { color: var(--ok); font-weight: 650; }

/* Resumen (86bcxr1nd): three windows, six headings each; a note's pieces on one line with a dot between. */
.resumen { margin: 0 0 28px; }
.resumen h2 { margin-bottom: 2px; }
.resumen .range { margin: 0 0 10px; }
.resumen h3 { margin: 14px 0 6px; font-size: 15px; }
.resumen .np { display: inline; }
.resumen .np + .np::before { content: " · "; color: var(--muted); }

/* What's new / Novedades (86bcxuy5u, D102): the header button's dot, and the panel (it reuses .fb-panel's frame). */
.whatsnew-open { position: relative; }
.whatsnew-open[hidden] { display: none; }
.whatsnew-open .wn-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--help); box-shadow: 0 0 0 2px var(--panel), 0 0 8px oklch(68% 0.17 310 / 0.7); }
.whatsnew-open .wn-dot[hidden] { display: none; }
.wn-rel { margin: 14px 0; padding: 10px 12px 4px; border: 1px solid var(--line); border-radius: var(--shape); background: var(--tile-0); }
.wn-rel.wn-new { border-color: oklch(68% 0.17 310 / 0.55); }
.wn-rel-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.wn-rel-head::before { display: none; }
.wn-badge { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--help); }
.wn-items { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.wn-others, .wn-older { margin: 4px 0 8px; }
.wn-others summary, .wn-older summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.wn-older > .wn-rel { margin-left: 0; }

/* 86bcvfnwf: a size above the family level, and the family's first run-out line. */
.bv-above { font-size: 11.5px; font-weight: 400; }

/* 86bcyfgyj: Balance, the stock statement that prints like a finance ledger. Each line's label opens its rows. */
.bl-period { color: var(--ink-2); margin: 0 0 14px; }
.bl-wh { margin-top: 28px; }
.bl-block { margin: 18px 0 26px; }
.bl-block h3 .bl-when { font-weight: 500; font-size: 13.5px; margin-left: 6px; }
.grid.bl th.name { min-width: 15em; }
.grid.bl .bl-note-in { display: block; font-size: 11.5px; font-weight: 400; }
.bl-toggle { all: unset; cursor: pointer; font-weight: 600; }
.bl-toggle::before { content: "▸ "; color: var(--muted); }
.bl-toggle[aria-expanded="true"]::before { content: "▾ "; }
.bl-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grid.bl tr.bl-exp td, .grid.bl tr.bl-exp th { border-top: 2px solid var(--line-2); font-weight: 700; }
.grid.bl tr.bl-rows > td { background: var(--bg-2); text-align: left; padding: 6px 4px 10px; }
.grid.bl tr.bl-note > td { background: none; text-align: left; white-space: normal; font-weight: 400; }
.grid.bl-rows-table td { font-size: 12.5px; padding: 5px 8px; }
.grid.bl tr.bl-group > th { background: none; text-align: left; padding: 12px 4px 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 0; }
.grid.bl tr.bl-actual td, .grid.bl tr.bl-actual th { font-weight: 700; }
.grid.bl-about { width: auto; margin: 2px 0 6px; }
.grid.bl-about th, .grid.bl-about td { text-align: left; white-space: normal; font-size: 12.5px; padding: 4px 10px; max-width: 70ch; }
.print-only { display: none; }

/* Print: the statement alone, dark ink on white, one warehouse a page, with its period and "as of" time; the lines
   opened on screen print opened. Only the Balance screen prints like this (the class is set on its own sections). */
@media print {
  body:has(.bl-wh) { background: #fff; color: #000; }
  body:has(.bl-wh) #pin, body:has(.bl-wh) .foot, body:has(.bl-wh) .help-tab, body:has(.bl-wh) .bl-pickers,
    body:has(.bl-wh) #banner, body:has(.bl-wh) #screen > .lead, body:has(.bl-wh) #screen > .bl-period { display: none !important; }
  body:has(.bl-wh) .print-only { display: block; color: #000; }
  .bl-wh { break-before: page; margin-top: 0; }
  .bl-wh:first-of-type { break-before: auto; }
  .bl-block { break-inside: avoid; }
  .bl-wh h2, .bl-wh h3, .bl-wh .muted, .bl-wh tr.bl-group > th, .bl-wh .note, body:has(.bl-wh) #screen h1, body:has(.bl-wh) #screen > .note { color: #000 !important; }
  .bl-wh .grid td, .bl-wh .grid th, .bl-wh .grid td.short, .bl-wh .grid td.neg, .bl-wh .grid td.zero, .bl-wh .grid td.name,
    .bl-wh .grid tr.bl-rows > td { background: #fff !important; background-image: none !important; color: #000 !important; box-shadow: none !important;
    border: 1px solid #999 !important; border-radius: 0 !important; }
  .bl-wh .grid td.short, .bl-wh .grid td.neg { font-weight: 800; text-decoration: underline; }
  .bl-wh .scroll { overflow: visible !important; }
  .bl-toggle::before { content: ""; }
  .bl-wh a { color: #000; text-decoration: none; }
}

/* The My tasks popout (86bcynh3v): the header button's count, and the panel (What's new's .fb-panel frame). */
.taskpop-open { position: relative; white-space: nowrap; }
.taskpop-open[hidden] { display: none; }
.taskpop-open .tp-count { margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 18px; color: #fff; background: var(--help); }
.taskpop-open .tp-count[hidden] { display: none; }
.tp-go { display: inline-grid; place-items: center; width: 34px; min-height: 34px; border: 1px solid var(--line-2); border-radius: var(--shape); text-decoration: none; font-size: 17px; }
.tp-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.tp-task { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--shape); background: var(--tile-0); display: grid; gap: 4px; font-size: 14px; }
.tp-head { line-height: 1.35; }
.tp-age { display: inline-block; min-width: 34px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tp-where { font-size: 12.5px; }