/* Surge Delivery Tracking V2 — design system
   Sections: tokens · base · layout · surfaces · buttons · forms · tables · status ·
   feedback · overlays · data display · utilities · responsive · compatibility */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* ---- tokens ---------------------------------------------------------------
   The only place a colour appears. Everything below reaches colour through a
   token, so a theme can reach all of it. The dark block redefines the same ten
   neutrals inverted, which is why no rule below this point needs a dark twin. */

:root {
  /* neutral ramp, ten steps, light to dark */
  --n-0:   #ffffff;
  --n-50:  #fafafa;
  --n-100: #f4f4f4;
  --n-200: #e6e6e6;
  --n-300: #cfcfcf;
  --n-400: #8d8d8d;
  --n-500: #6d6d6d;
  --n-700: #4c4c4c;
  --n-900: #282828;
  --n-950: #121212;

  /* what the ramp is for */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-hover: var(--n-100);

  --ink: var(--n-900);
  --ink-strong: var(--n-950);
  --ink-muted: var(--n-500);
  --ink-faint: var(--n-400);
  --ink-inverse: var(--n-0);

  --line: var(--n-200);
  --line-strong: var(--n-400);
  --line-heavy: var(--n-500);

  --fill: var(--n-950);
  --fill-ink: var(--n-0);
  --focus: var(--n-950);

  /* two elevations, and nothing decorative */
  --e-1: 0 2px 6px rgba(16, 16, 20, 0.10), 0 0 0 1px rgba(16, 16, 20, 0.05);
  --e-2: 0 8px 28px rgba(16, 16, 20, 0.18), 0 0 0 1px rgba(16, 16, 20, 0.07);
  --scrim: rgba(16, 16, 20, 0.42);

  /* Type scale, six steps, line heights on the 4px grid.
     The workhorse is --t-3: it is what a table cell, a button and a nav item use,
     and it was 13px while --t-4 was called "body" and used ten times. The scale
     shifted up a notch so the size most of the application is actually read at is
     14px, and nothing sits at 11px any more — an uppercase label with letter
     spacing is the hardest text on the page and was the smallest.
     A row is unchanged at 36px: --lh-3 was already 20px. */
  --t-1: 12px; --lh-1: 16px;
  --t-2: 13px; --lh-2: 16px;
  --t-3: 14px; --lh-3: 20px;
  --t-4: 15px; --lh-4: 24px;
  --t-5: 18px; --lh-5: 24px;
  --t-6: 24px; --lh-6: 32px;

  /* A field is 16px because iOS Safari zooms the whole page when a focused input
     is smaller, and the person signing for a delivery is on a phone. It is the one
     size that is not on the scale, and it is not a design choice. */
  --t-field: 16px;

  /* spacing, 4px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* two radii, both under the 8px ceiling */
  --r-1: 3px;
  --r-2: 6px;

  --control: 36px;
  --control-compact: 28px;
  --control-touch: 44px;
  --rail: 232px;
  --measure: 72ch;
  --quick: 120ms;

  color-scheme: light;
}

/* The attribute is written on <html> by the script in base.html. It is matched here
   unanchored as well so a fragment of the page can be shown in the other theme —
   which is the only way docs/components.html can put the two side by side.
   Every alias is restated, not only the ramp: a custom property that resolves a
   var() is computed where it is declared, so an alias declared on :root keeps the
   light value even inside a subtree that redefines the ramp under it. On <html>
   the difference does not show, which is exactly why it would be found late. */
:root[data-theme="dark"], [data-theme="dark"] {
  --n-0:   #0d0d0d;
  --n-50:  #141414;
  --n-100: #1f1f1f;
  --n-200: #2e2e2e;
  --n-300: #3f3f3f;
  --n-400: #696969;
  --n-500: #9c9c9c;
  --n-700: #c4c4c4;
  --n-900: #ebebeb;
  --n-950: #fbfbfb;

  --bg: var(--n-0);
  --surface: var(--n-50);
  --surface-sunken: var(--n-100);
  --surface-hover: var(--n-100);

  --ink: var(--n-900);
  --ink-strong: var(--n-950);
  --ink-muted: var(--n-500);
  --ink-faint: var(--n-400);
  --ink-inverse: var(--n-0);

  --line: var(--n-200);
  --line-strong: var(--n-400);
  --line-heavy: var(--n-500);

  --fill: var(--n-950);
  --fill-ink: var(--n-0);
  --focus: var(--n-950);

  --e-1: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --e-2: 0 8px 28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --scrim: rgba(0, 0, 0, 0.62);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}


/* ---- base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: var(--t-4);
  line-height: var(--lh-4);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* one stroke weight for every inline icon in the application; CSS wins over the
   stroke-width presentation attribute, so no template has to be edited for it */
svg { stroke-width: 1.75; }
svg[fill="currentColor"] { stroke-width: 0; }

h1, h2, h3, h4 { margin: 0; color: var(--ink-strong); font-weight: 600; }
h1 { font-size: var(--t-6); line-height: var(--lh-6); letter-spacing: -0.02em; }
h2 { font-size: var(--t-5); line-height: var(--lh-5); letter-spacing: -0.01em; }
h3 { font-size: var(--t-4); line-height: var(--lh-4); }
h4 { font-size: var(--t-3); line-height: var(--lh-3); }

p { margin: 0 0 var(--s-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: currentColor; }

b, strong { font-weight: 600; color: var(--ink-strong); }
small { font-size: var(--t-2); line-height: var(--lh-2); }

code {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

hr, .rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }

/* one focus ring, on everything that takes focus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--fill);
  color: var(--fill-ink);
  border-radius: var(--r-1);
  font-size: var(--t-3);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { top: var(--s-4); }

.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }
.right { text-align: right; }
.push-right { margin-left: auto; }
/* an identifier, a date or a status never wraps; the description column takes the
   slack, which is the opposite of what a browser does when nothing says otherwise */
.nowrap, td.nowrap, th.nowrap { white-space: nowrap; }
.nowrap small { white-space: nowrap; }
.col-progress { min-width: 170px; }
/* the description is the column that earns elastic width; nothing else does, and
   without a budget the browser gives it to whatever holds the longest identifier */
.col-material { width: 30%; }


/* ---- layout: shell, rail, page --------------------------------------------- */

.shell { display: flex; align-items: flex-start; min-height: 100vh; width: 100%; }

.sidebar {
  flex: 0 0 var(--rail);
  width: var(--rail);
  align-self: stretch;
  position: sticky;
  top: 0;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--s-5) var(--s-3) var(--s-4);
  z-index: 25;
}

.sidebar > summary { display: none; }

.sidebar::details-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-4);
  font-weight: 600;
  color: var(--ink-strong);
  white-space: nowrap;
  text-decoration: none;
}

.brand-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  flex: none;
  border-radius: var(--r-1);
  background: var(--fill);
  color: var(--fill-ink);
}

.brand-badge {
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  padding: 0 var(--s-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--ink-muted);
}

.sidebar .brand,
.sidebar .rail-brand {
  padding: 0 var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.nav-links { display: flex; flex-direction: column; gap: 2px; }

.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--control);
  padding: 0 var(--s-3);
  border-radius: var(--r-1);
  color: var(--ink-muted);
  font-size: var(--t-3);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--quick), color var(--quick);
}

.nav-links a svg { width: 16px; height: 16px; flex: none; }
.nav-links a:hover { background: var(--surface-hover); color: var(--ink); }

.nav-links a[aria-current="page"], .nav-links a.active {
  background: var(--surface-sunken);
  color: var(--ink-strong);
  font-weight: 600;
}

.nav-links a[aria-current="page"]::before, .nav-links a.active::before {
  content: "";
  position: absolute;
  left: calc(var(--s-3) * -1);
  top: var(--s-2); bottom: var(--s-2);
  width: 2px;
  background: var(--ink-strong);
}

.nav-group {
  margin: var(--s-5) 0 var(--s-1);
  padding: 0 var(--s-3);
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sidebar-foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.user-profile-card {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  min-width: 0;
}

.user-avatar {
  width: 28px; height: 28px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--ink-strong);
  font-size: var(--t-2);
  font-weight: 600;
}

.who { display: flex; flex-direction: column; min-width: 0; }
.who span { font-size: var(--t-3); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { color: var(--ink-muted); }

.foot-actions { display: flex; align-items: center; gap: var(--s-2); }
.foot-actions form { margin: 0; flex: 1 1 auto; }

.page {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: var(--s-6) var(--s-8) var(--s-16);
}

.page-wide { max-width: none; }
.page-medium { max-width: 1200px; }
.page-narrow { max-width: 720px; }

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

.page-heading .muted { margin: var(--s-1) 0 0; font-size: var(--t-3); }
.heading-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.title-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--t-3);
  color: var(--ink-muted);
}
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb span[aria-current], .crumb > span:last-child { color: var(--ink); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-6);
  align-items: start;
}
.split > .split-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.split > .split-aside { display: flex; flex-direction: column; gap: var(--s-5); position: sticky; top: var(--s-6); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }


/* ---- surfaces: panel, section header, card, toolbar ------------------------ */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  margin: 0;
  overflow: hidden;
}

.panel + .panel { margin-top: var(--s-5); }

.panel > h2, .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--control);
  padding: var(--s-3) var(--s-4);
  margin: 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-4);
  line-height: var(--lh-4);
  font-weight: 600;
  color: var(--ink-strong);
}

.panel > h2 > span, .panel-head .count {
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.panel-body { padding: var(--s-4); }
.panel-note { margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--t-2); color: var(--ink-muted); border-top: 1px solid var(--line); }

/* the panel that is waiting on the reader — a heavier edge, no colour */
.panel.highlight { border-color: var(--line-heavy); }
.panel.highlight > h2, .panel.highlight > .panel-head { border-bottom-color: var(--line-strong); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.section-head .head-info { display: flex; align-items: baseline; gap: var(--s-2); }

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}


/* ---- buttons --------------------------------------------------------------- */

.button, button, .primary, .secondary, .ghost, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--control);
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--quick), border-color var(--quick), color var(--quick);
}

.button svg, button svg { width: 14px; height: 14px; flex: none; }

/* secondary is the resting weight and needs no class of its own */
.secondary:hover, button:hover, .button:hover {
  background: var(--surface-hover);
  border-color: var(--line-heavy);
  color: var(--ink-strong);
}

/* one filled button per screen */
.primary, button.primary, a.primary {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--fill-ink);
  font-weight: 600;
}
.primary:hover, button.primary:hover, a.primary:hover {
  background: var(--n-900);
  border-color: var(--n-900);
  color: var(--fill-ink);
}

.ghost, button.ghost, a.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
}
.ghost:hover, button.ghost:hover, a.ghost:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--ink);
}

/* danger carries its weight at rest, not on hover: a touch screen has no hover,
   and a destructive control that only declares itself under a pointer does not */
.danger-button, button.danger-button, a.danger-button {
  background: var(--surface);
  border: 2px solid var(--line-heavy);
  color: var(--ink-strong);
  font-weight: 600;
  padding: 0 calc(var(--s-3) - 1px);
}
.danger-button::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.danger-button:hover, button.danger-button:hover, a.danger-button:hover {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--fill-ink);
}
.danger-button.solid {
  background: var(--surface);
  border: 2px solid var(--ink-strong);
  color: var(--ink-strong);
}
.danger-button.solid:hover { background: var(--fill); color: var(--fill-ink); }

.icon-button, .button.icon-button, button.icon-button {
  width: var(--control);
  padding: 0;
  flex: none;
}

.compact { height: var(--control-compact); padding: 0 var(--s-2); font-size: var(--t-2); }
.compact.icon-button { width: var(--control-compact); }
.full-width-btn { width: 100%; }

button:disabled, .button[aria-disabled="true"], button[aria-disabled="true"] {
  color: var(--ink-faint);
  border-color: var(--line);
  background: var(--surface);
  cursor: not-allowed;
}
button:disabled:hover { background: var(--surface); border-color: var(--line); color: var(--ink-faint); }

button[aria-busy="true"] { color: var(--ink-faint); }

.link-button {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: var(--t-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-button:hover { background: none; border: 0; color: var(--ink-strong); }

.actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.actions.ruled { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-4); }
.actions.actions-centred { justify-content: center; }
/* A picker renders every line that is free — 245 of them here, 19,000px of page —
   and the submit sat under all of it. The bar follows the reader down instead. */
.actions.sticky-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface);
}
.sidebar-foot form { margin: 0; }
.row-actions { display: inline-flex; align-items: center; gap: var(--s-1); }
.row-actions form { margin: 0; }

.theme-toggle { width: var(--control-compact); height: var(--control-compact); padding: 0; flex: none; }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon, [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun, [data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }

.sign-out-btn { height: var(--control-compact); font-size: var(--t-2); width: 100%; }
.sign-out-btn svg { width: 13px; height: 13px; }


/* ---- forms ----------------------------------------------------------------- */

label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-3); font-weight: 500; color: var(--ink); margin: 0; }
label > small, .field-hint { font-weight: 400; color: var(--ink-muted); }

.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field-label { font-size: var(--t-3); font-weight: 500; color: var(--ink); }
.field-required::after { content: " *"; color: var(--ink-muted); }

input:where(:not([type="checkbox"]):not([type="radio"])), select, textarea {
  width: 100%;
  height: var(--control);
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-field);
  transition: border-color var(--quick);
}

textarea { height: auto; min-height: 72px; padding: var(--s-2) var(--s-3); line-height: var(--lh-3); resize: vertical; }

select {
  width: 100%;
  cursor: pointer;
  appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}

input:where(:not([type="checkbox"]):not([type="radio"])):hover, select:hover, textarea:hover { border-color: var(--line-heavy); }
input:where(:not([type="checkbox"]):not([type="radio"])):focus, select:focus, textarea:focus { border-color: var(--ink-strong); outline: none; box-shadow: inset 0 0 0 1px var(--ink-strong); }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-sunken); color: var(--ink-faint); cursor: not-allowed; }

/* a field the server refused says so beside itself, not only at the top */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  font-size: var(--t-2);
  line-height: var(--lh-2);
  font-weight: 500;
  color: var(--ink-strong);
}
.field-error::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 5px;
  flex: none;
  background: var(--ink-strong);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--ink-strong);
  padding-left: calc(var(--s-3) - 1px);
}

input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  margin: 0;
  flex: none;
  appearance: none;
  border: 1px solid var(--line-heavy);
  background: var(--surface);
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 2px; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--fill); border-color: var(--fill); }
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
:root[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--surface); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--line-strong); background: var(--surface-sunken); cursor: not-allowed; }

.choice { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s-2); font-weight: 400; }
.choice input { margin-top: 2px; }
.choice > span, .choice > label { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-3); font-weight: 500; color: var(--ink); cursor: pointer; }
.choice small { font-weight: 400; color: var(--ink-muted); }

.check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface-sunken);
  cursor: pointer;
}
.check input[type="checkbox"] { margin-top: 2px; }
.check label, .check > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-3); font-weight: 500; color: var(--ink-strong); cursor: pointer; }
.check small { font-weight: 400; color: var(--ink-muted); }

/* switch — a checkbox that reads as a setting rather than a choice in a list */
.switch { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.switch input {
  appearance: none;
  width: 32px; height: 18px;
  flex: none;
  border-radius: var(--r-2);
  border: 1px solid var(--line-heavy);
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background var(--quick), border-color var(--quick);
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink-muted);
  transition: transform var(--quick), background var(--quick);
}
.switch input:checked { background: var(--fill); border-color: var(--fill); }
.switch input:checked::after { transform: translateX(14px); background: var(--fill-ink); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .span-2, .form-grid .span-all { grid-column: 1 / -1; }

/* The request form is the one form wide enough for a third column: ten of its
   fields hold a word or a number, and at 1920 two columns left a third of the
   screen empty beside them. The step is on the viewport rather than on the panel
   because nothing else in this stylesheet measures a container, and 1500px is
   where the content beside the 232px rail passes 1200px and a third column stops
   being cramped. Only this form takes it - the other four .form-grid users sit on
   narrower pages and are left where they are. */
@media (min-width: 1500px) {
  .form-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A single-line field spanning the whole grid would be a metre of box for a
   forty-character answer, and the eye has to cross all of it to find the caret.
   The cap is a reading measure, and it is wider than one column so a spanning
   field still reads as the wider one. A textarea is not capped: it is the one
   control whose content really is that long. */
.form-grid-wide input,
.form-grid-wide select,
.form-grid-wide .date-wrap { max-width: 40rem; }
.field-block { display: flex; flex-direction: column; gap: var(--s-1); }

/* a date is typed, and the glyph beside it opens a calendar rather than sitting
   there looking like it might */
.date-wrap { position: relative; display: flex; align-items: center; }
.date-wrap input { padding-right: var(--s-10); }
.date-open {
  position: absolute;
  right: var(--s-1);
  width: var(--control-compact);
  height: var(--control-compact);
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--ink-muted);
}
.date-open:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--line-strong); }
.date-open svg { width: 14px; height: 14px; }

.datepicker {
  position: absolute;
  z-index: 40;
  width: 280px;
  padding: var(--s-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: var(--e-1);
}
.datepicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--ink-strong);
}
.datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepicker-day {
  display: grid;
  place-items: center;
  height: var(--control-compact);
  font-size: var(--t-1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.datepicker-grid button {
  height: var(--control-compact);
  min-width: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.datepicker-grid button:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.datepicker-grid button[aria-current="date"] { border-color: var(--line-strong); font-weight: 600; }
.datepicker-grid button[aria-pressed="true"] {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--fill-ink);
  font-weight: 600;
}

.search-field { position: relative; display: block; flex: 1 1 280px; min-width: 220px; max-width: 480px; }
.search-field input {
  padding-left: var(--s-8);
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236d6d6d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--s-3) center;
}
:root[data-theme="dark"] .search-field input,
[data-theme="dark"] .search-field input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c9c9c' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
.slash-hint {
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--t-1);
  font-weight: 600;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 var(--s-1);
}

.filters { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 0; flex: 1 1 auto; }
/* a filter is a short list of choices, not a field that takes a row of its own */
.filters select { max-width: 280px; }

/* quantity stepper — the control a contractor signs with, so its targets are
   comfortable on a phone and grow to the touch minimum on a small screen */
.stepper-input {
  display: inline-flex;
  align-items: stretch;
  height: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--surface);
}
.stepper-btn {
  width: var(--control);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: var(--t-4);
  font-weight: 600;
}
.stepper-btn:hover { background: var(--surface-hover); border: 0; color: var(--ink-strong); }
.stepper-input input {
  width: 84px;
  height: auto;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: right;
  padding: 0 var(--s-2);
  font-size: var(--t-field);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.stepper-input input:focus { box-shadow: none; border-color: var(--line); }
.stepper-unit { align-self: center; margin-left: var(--s-2); font-size: var(--t-3); color: var(--ink-muted); }
.qty-entry { display: flex; align-items: center; }

/* file drop zone — the input covers the zone at zero opacity so it can be
   focused and the browser can explain a refusal */
.drop {
  position: relative;
  display: block;
  border: 1px dashed var(--line-heavy);
  border-radius: var(--r-1);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--t-3);
  cursor: pointer;
  transition: border-color var(--quick), background var(--quick);
}
.drop:hover, .drop:focus-within { border-color: var(--ink-strong); background: var(--surface); }
.drop svg { width: 20px; height: 20px; display: block; margin: 0 auto var(--s-2); color: var(--ink-muted); }
.drop strong { display: block; font-size: var(--t-3); color: var(--ink); margin-bottom: var(--s-1); }
.drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-limits { display: block; font-size: var(--t-2); color: var(--ink-muted); }
.drop-chosen { display: block; margin-top: var(--s-2); font-size: var(--t-2); font-weight: 600; color: var(--ink-strong); }


/* ---- tables ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; overflow-y: visible; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* a column header may gloss itself — what a dash in the column means, say — and the
   gloss is a sentence rather than a second heading, so it drops the header's caps */
th small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  text-align: left;
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
}

th.right, td.right { text-align: right; }
th.right .arrows { order: -1; }

td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: var(--t-3);
  line-height: var(--lh-3);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-hover); }
td small { display: block; color: var(--ink-muted); font-size: var(--t-2); line-height: var(--lh-2); }
td .tnum, td.tnum, .num { font-variant-numeric: tabular-nums; }

/* a sortable header states its direction; the mark is drawn, not implied */
th.sortable a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: inherit;
  text-decoration: none;
}
th.sortable a:hover { color: var(--ink-strong); }
.arrows { display: inline-flex; flex-direction: column; gap: 1px; flex: none; }
.arrows i {
  display: block;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.arrows .up { border-bottom: 4px solid var(--ink-faint); }
.arrows .down { border-top: 4px solid var(--ink-faint); }
th[aria-sort="ascending"] { color: var(--ink-strong); }
th[aria-sort="descending"] { color: var(--ink-strong); }
th[aria-sort="ascending"] .up { border-bottom-color: var(--ink-strong); }
th[aria-sort="ascending"] .down { border-top-color: transparent; }
th[aria-sort="descending"] .down { border-top-color: var(--ink-strong); }
th[aria-sort="descending"] .up { border-bottom-color: transparent; }

tbody .row-actions { opacity: 0; transition: opacity var(--quick); }
tbody tr:hover .row-actions,
tbody tr:focus-within .row-actions,
table.show-actions tbody .row-actions { opacity: 1; }

tr.being-edited { background: var(--surface-sunken); }
tr.being-edited td:first-child { box-shadow: inset 2px 0 0 var(--ink-strong); }

/* selection table — the picker shape: a checkbox column, a quantity column */
.selection-table td { vertical-align: middle; }
.selection-table .pick { width: 36px; text-align: center; }
.selection-table .qty-cell { width: 200px; text-align: right; }
/* wider than the delivery picker's 200px, and only here: that cell holds a
   quantity, this one holds a supplier, a quantity and a way to drop the row */
.selection-table .qty-cell[data-alloc-cell] { width: 420px; text-align: left; }
.selection-table tr:has(input[type="checkbox"]:checked),
.selection-table tr.is-picked { background: var(--surface-sunken); }
.selection-table tr:has(input[type="checkbox"]:checked) td:first-child,
.selection-table tr.is-picked td:first-child { box-shadow: inset 2px 0 0 var(--ink-strong); }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}
.pager small { font-size: var(--t-2); color: var(--ink-muted); }
.pager small b { color: var(--ink); }
.pager-links { display: flex; align-items: center; gap: var(--s-2); }
.pager-links .button, .pager-links a, .pager-links button { min-width: 76px; }
.pager-links .is-spent { color: var(--ink-faint); border-color: var(--line); cursor: default; }

/* How many rows a page holds. It sits inside .pager-links and beside Previous and
   Next, so it opts out of the 76px minimum those carry: a three-character number in
   a 76px box reads as a button somebody forgot to label. */
.pager-sizes { display: flex; align-items: center; gap: var(--s-1); margin-right: var(--s-2); }
.pager-sizes small { margin-right: var(--s-1); }
.pager-links .pager-sizes .button { min-width: 0; padding: 0 var(--s-2); }
.pager-links .pager-sizes .button[aria-current="true"] {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--fill-ink);
}


/* ---- status: one treatment, without hue ------------------------------------ */
/* .status is every status in the application and there is no second one. Item 40
   removed the four weights from status because a column carrying four treatments
   was read as a second meaning stacked on the word, and an operator had to decode
   it. Only the word varies now. Nothing here is a hue, so a greyscale screenshot
   reads exactly as the screen does.

   The account states, the supplier and contractor states and the audit log's own
   action all wear it too. .badge and its four weights are gone: after the audit
   log an operator was reading a heavy outlined ring beside "Sign-in refused" and
   plain text beside "Signed in", which is the same second meaning in a different
   column.                                                                       */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 24px;
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--t-2);
  line-height: var(--lh-2);
  font-weight: 500;
  white-space: nowrap;
}

/* a status names the document it belongs to without becoming a second treatment */
.status .kind {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* a qualifier beside a status, or an ordinary row in a list of exceptions */
.state-note, .qualifier {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-2);
  line-height: var(--lh-2);
  font-weight: 400;
  color: var(--ink-muted);
}
.qualifier { display: block; font-style: normal; }

/* the same document label, on the qualifier beside a status */
.state-note .kind {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}


.chipbar {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control-compact);
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { background: var(--surface-hover); color: var(--ink); border-color: transparent; }
.chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.chip[aria-current="true"] {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--ink-strong);
  font-weight: 600;
}
.chip[aria-current="true"] b { color: var(--ink-strong); }
.chip.ghost { margin-left: auto; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--s-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ---- feedback: alert, toast, empty, error, progress, skeleton --------------- */
/* Four severities, told apart by border weight and by a mark that reads in
   greyscale, and each carries its own word so nothing depends on the shape. */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-3);
  line-height: var(--lh-3);
}
.alert > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.alert p { max-width: var(--measure); }
.alert-label {
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 2px;
}

.alert::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  margin-top: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink-muted);
}

.alert.info::before { border-color: var(--ink-muted); }
.alert.success::before { background: var(--ink-muted); border-color: var(--ink-muted); }
.alert.warn { border-left: 3px solid var(--ink-strong); padding-left: calc(var(--s-3) - 2px); }
.alert.warn::before { border: 2px solid var(--ink-strong); }
.alert.warn .alert-label { color: var(--ink-strong); }

.alert.danger {
  border: 2px solid var(--ink-strong);
  padding: calc(var(--s-3) - 1px);
  color: var(--ink-strong);
  font-weight: 500;
}
.alert.danger::before {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  border-radius: 0;
}
.alert.danger .alert-label { color: var(--ink-strong); }

.standing {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-heavy);
  border-radius: var(--r-1);
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: var(--t-3);
}

.toast {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(420px, calc(100vw - var(--s-10)));
  padding: var(--s-3);
  border-radius: var(--r-1);
  background: var(--fill);
  color: var(--fill-ink);
  box-shadow: var(--e-2);
  font-size: var(--t-3);
  line-height: var(--lh-3);
}
.toast svg { width: 14px; height: 14px; flex: none; }
.toast-close { height: auto; padding: 0 var(--s-1); border: 0; background: none; color: inherit; font-size: var(--t-5); line-height: 1; }
.toast-close:hover { background: none; border: 0; color: inherit; }

.empty { padding: var(--s-10) var(--s-4); text-align: center; color: var(--ink-muted); }
.empty svg { width: 24px; height: 24px; color: var(--ink-faint); margin-bottom: var(--s-2); }
.empty b { display: block; font-size: var(--t-4); font-weight: 600; color: var(--ink-strong); margin-bottom: var(--s-1); }
.empty p { max-width: 52ch; margin: 0 auto var(--s-4); font-size: var(--t-3); }

.error-state { padding: var(--s-10) 0; max-width: var(--measure); }
.error-state .error-code {
  display: block;
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.error-state h1 { margin-bottom: var(--s-2); }
.error-state p { color: var(--ink-muted); margin-bottom: var(--s-5); }

.meter {
  height: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--ink-strong);
  transition: width var(--quick) linear;
}

.qty-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  margin-bottom: var(--s-1);
}

.skeleton {
  display: block;
  border-radius: var(--r-1);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  min-height: var(--lh-4);
}


/* ---- overlays: dialog, drawer, menu, tooltip ------------------------------- */

.editor-dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-5);
  width: min(560px, calc(100vw - var(--s-8)));
  max-height: calc(100vh - var(--s-16));
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e-2);
}

/* the scrim dims and does not blur: the reader is being asked about the record
   behind it and has to be able to read it */
.editor-dialog::backdrop { background: var(--scrim); }

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.dialog-head h2 { font-size: var(--t-5); }
.dialog-close {
  display: grid;
  place-items: center;
  width: var(--control-compact); height: var(--control-compact);
  flex: none;
  border-radius: var(--r-1);
  color: var(--ink-muted);
  font-size: var(--t-5);
  line-height: 1;
  text-decoration: none;
}
.dialog-close:hover { background: var(--surface-hover); color: var(--ink-strong); }

.editor-dialog .actions {
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
}

.confirm-dialog { width: min(440px, calc(100vw - var(--s-8))); }
.confirm-top { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-4); }
.confirm-top h2 { margin-bottom: var(--s-1); }
.confirm-top p { font-size: var(--t-3); color: var(--ink); }
.confirm-mark {
  width: var(--control); height: var(--control);
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  border: 1px solid var(--line-strong);
  background: var(--surface-sunken);
  color: var(--ink-strong);
}
.confirm-mark svg { width: 16px; height: 16px; }
.confirm-mark.danger-mark { border: 2px solid var(--ink-strong); background: var(--surface); }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 55;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  box-shadow: var(--e-2);
  overflow-y: auto;
}

.menu-wrap { position: relative; }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-1));
  z-index: 40;
  min-width: 200px;
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  box-shadow: var(--e-1);
}
.menu button, .menu a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  height: var(--control-compact);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-size: var(--t-3);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.menu button:hover, .menu a:hover { background: var(--surface-hover); border: 0; color: var(--ink-strong); }
.menu svg { width: 14px; height: 14px; flex: none; }
.menu hr { margin: var(--s-1) 0; }
.menu .danger-item { font-weight: 600; color: var(--ink-strong); }
.menu .danger-item::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.tooltip { position: relative; display: inline-flex; }
.tooltip > .tooltip-body {
  position: absolute;
  bottom: calc(100% + var(--s-1));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: var(--s-1) var(--s-2);
  border-radius: 2px;
  background: var(--fill);
  color: var(--fill-ink);
  font-size: var(--t-2);
  line-height: var(--lh-2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--quick);
}
.tooltip:hover > .tooltip-body, .tooltip:focus-within > .tooltip-body { opacity: 1; }


/* ---- data display ---------------------------------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.stat-label {
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stat-value { font-size: var(--t-6); line-height: var(--lh-6); font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.stat-desc { font-size: var(--t-2); color: var(--ink-muted); }
a.stat:hover { border-color: var(--line-heavy); }
a.stat[aria-current="true"] { border-color: var(--ink-strong); }

/* key and value, the shape a record's own facts take */
.facts { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-4); }
.facts dt { font-size: var(--t-2); color: var(--ink-muted); margin: 0; }
.facts dd { margin: 0; font-size: var(--t-3); color: var(--ink); }
.facts dd b { font-weight: 600; }
.facts dd small { display: block; color: var(--ink-muted); }

.facts.stacked { display: flex; flex-direction: column; gap: var(--s-3); }
.facts.stacked > div { display: flex; flex-direction: column; gap: 2px; }
.facts.stacked dt {
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.facts.stacked dd { font-size: var(--t-3); font-weight: 500; color: var(--ink-strong); }

.kv { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: 0; }
.kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.kv dt {
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.kv dd { margin: 0; font-size: var(--t-4); font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.kv dd .muted { font-weight: 400; }

.timeline { display: flex; flex-direction: column; }
.timeline-entry {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.timeline-entry:last-child { border-bottom: 0; }
.timeline-mark { position: relative; }
.timeline-mark::before {
  content: "";
  position: absolute;
  top: 6px; left: 3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink-muted);
}
.timeline-entry.is-exception .timeline-mark::before { background: var(--ink-strong); border-color: var(--ink-strong); }
.timeline-time { font-size: var(--t-2); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.tabs { display: flex; align-items: stretch; gap: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.tab {
  display: inline-flex;
  align-items: center;
  height: var(--control);
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-muted);
  font-size: var(--t-3);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
}
.tab:hover { background: none; border-bottom-color: var(--line-strong); color: var(--ink); }
.tab[aria-current="page"], .tab[aria-selected="true"] { color: var(--ink-strong); border-bottom-color: var(--ink-strong); font-weight: 600; }

.file-list { display: flex; flex-direction: column; }
.file-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.file-row:last-child { border-bottom: 0; }
.file-row:hover { background: var(--surface-hover); }
.file-row svg { width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
.file-row b { display: block; font-size: var(--t-3); }
.file-row small { display: block; color: var(--ink-muted); }
.file-upload { padding: var(--s-4); border-top: 1px solid var(--line); background: var(--surface-sunken); }
.file-none { padding: var(--s-4); color: var(--ink-muted); }

.mat-list { display: flex; flex-direction: column; }
.mat { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.mat:last-child { border-bottom: 0; }
.mat:hover { background: var(--surface-hover); }
.mat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.mat-top b { font-size: var(--t-4); }
.mat-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-top: 2px; font-size: var(--t-2); color: var(--ink-muted); }
.mat-where .ref-num { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mat-desc { font-size: var(--t-3); font-weight: 600; color: var(--ink-strong); }
.mat-code, code.mat-code {
  display: inline-block;
  padding: 0 var(--s-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-sunken);
  font-size: var(--t-1);
  line-height: var(--lh-1);
  color: var(--ink-muted);
}
dl.qty-row { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: var(--s-2) 0 0; }
dl.qty-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
dl.qty-row dt {
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
dl.qty-row dd { margin: 0; font-size: var(--t-4); font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
dl.qty-row dd .muted { font-weight: 400; }

.legend { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); margin-bottom: var(--s-4); overflow: hidden; }
.legend > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-3);
  font-weight: 500;
  color: var(--ink-muted);
}
.legend > summary::-webkit-details-marker { display: none; }
.legend > summary:hover { color: var(--ink-strong); background: var(--surface-hover); }
.legend[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink-strong); }
.legend h3 {
  margin: var(--s-3) var(--s-4) var(--s-1);
  font-size: var(--t-1);
  line-height: var(--lh-1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.legend dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-3) var(--s-4); align-items: center; }
.legend dt { margin: 0; }
.legend dd { margin: 0; font-size: var(--t-3); color: var(--ink-muted); max-width: var(--measure); }

.spec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.spec-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-3); }
.spec-list li:last-child { border-bottom: 0; }
.spec-list li span { font-size: var(--t-2); color: var(--ink-muted); }

.audit-detail { display: block; font-size: var(--t-2); line-height: var(--lh-2); }
.audit-detail b { font-weight: 500; color: var(--ink-muted); margin-right: var(--s-1); }


/* ---- auth pages ------------------------------------------------------------ */

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--s-8) var(--s-4); position: relative; }
.auth-theme-corner { position: absolute; top: var(--s-4); right: var(--s-4); }
.auth-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-8);
}
.auth-card .brand { margin-bottom: var(--s-6); }
.auth-card h1 { font-size: var(--t-5); line-height: var(--lh-5); margin-bottom: var(--s-1); }
.auth-card > p.muted { font-size: var(--t-3); margin-bottom: var(--s-5); }
.auth-card form { gap: var(--s-4); }
.auth-card .primary { width: 100%; margin-top: var(--s-2); }
.auth-corp-footer { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-2); color: var(--ink-muted); }


/* ---- responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar {
    width: auto;
    flex: none;
    min-height: 0;
    max-height: none;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .sidebar > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--control-touch);
    padding: 0 var(--s-4);
    cursor: pointer;
    list-style: none;
  }
  .sidebar > summary::-webkit-details-marker { display: none; }
  .sidebar > .rail-brand { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; width: var(--control); height: var(--control); color: var(--ink); }
  .sidebar nav { padding: 0 var(--s-3) var(--s-3); }
  .sidebar .brand { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .sidebar-foot { padding: var(--s-3) var(--s-4); }
  .page { padding: var(--s-4) var(--s-4) var(--s-12); }
}

@media (max-width: 1040px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .split-aside { position: static; }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .page-heading { flex-direction: column; align-items: stretch; }
  .heading-actions > .button, .heading-actions > button { flex: 1 1 auto; }
  .search-field { max-width: none; }

  /* Every control a thumb has to hit is 44px here, not the 36px a mouse is
     content with. The stepper was already the exception; the screen it lives on
     also carries a submit, a file zone and a date field, and those were 36. */
  button:where(:not(.stepper-btn):not(.icon-button):not(.date-open)),
  .button, input:where(:not([type="checkbox"]):not([type="radio"])), select, textarea {
    min-height: var(--control-touch);
  }
  .icon-button, .theme-toggle, .date-open { width: var(--control-touch); height: var(--control-touch); }
  .stepper-input { height: var(--control-touch); }
  .stepper-btn { width: var(--control-touch); }
}

/* A table becomes a list of records well before a phone. Between 721px and about
   1500px it used to overflow .table-wrap instead, and the columns that went off
   the edge were the rightmost ones — the status and the row's own actions. */
@media (max-width: 1024px) {
  .table-wrap table, .table-wrap thead, .table-wrap tbody,
  .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .table-wrap tbody tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .table-wrap tbody tr:last-child { border-bottom: 0; }
  .table-wrap td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-1) 0;
    border: 0;
    text-align: left;
  }
  .table-wrap td.right { justify-content: space-between; }
  .table-wrap td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--t-1);
    line-height: var(--lh-3);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .table-wrap td:empty { display: none; }
  .table-wrap td small { display: inline; }
  /* the column that had to hold one line on a wide table has room here */
  .table-wrap td.nowrap, .table-wrap td.nowrap small { white-space: normal; }
  /* A measurement is not a value sitting beside its label; it takes the row. The
     bar is kept off the card's own edges, because a full-bleed 4px rule reads as
     a divider and cuts the card in two, and the sentence under it is pulled up
     against the number it explains rather than left floating under the rule. */
  /* The allocation cell is 380px on a wide table and cannot be on a 390px screen:
     here the record's own row is the width, and the supplier drops above the
     quantity rather than pushing the table sideways. */
  .selection-table .qty-cell[data-alloc-cell] { width: auto; display: block; }
  .alloc-row { grid-template-columns: minmax(0, 1fr) 2.5rem var(--control-compact); }
  .alloc-row select { grid-column: 1 / -1; }
  /* the stepper keeps its own width here rather than stretching down the 1fr track
     and leaving a bar of empty box after the + */
  .alloc-row .stepper-input { justify-self: start; }
  .table-wrap td.progress-cell { flex-wrap: wrap; }
  .table-wrap td.progress-cell .meter { flex: 0 0 60%; margin: var(--s-1) 0 0; }
  .table-wrap td.progress-cell small { flex: 1 0 100%; margin-top: 2px; text-align: right; }
  .pager { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .pager-links { display: flex; }
  .pager-links .button, .pager-links a { flex: 1 1 auto; }
}


/* ---- what the archive, the two detail pages and the pickers still need ------
   These were the compatibility layer during the rollout. What no template calls
   any more has gone; what is left is part of the system and stays. */

/* Class names the templates still emit, mapped onto the system above. Each page
   converted in the rollout deletes its entries here; when the last one goes,
   this section goes with it. Nothing new may be added below this line. */

/* One material line, one row per supplier it is split between. The rows stack so
   the quantities stay in a column - a picker is a selection table and the numbers
   have to line up - and the supplier is a plain select rather than a .menu,
   because .table-wrap computes overflow-y to auto and clips a menu opened from
   the last row. */
.alloc-rows { display: flex; flex-direction: column; gap: var(--s-2); }
/* A grid, not a flex row, and the same four tracks on every line: the unit is the
   one thing that has to read down the column, and m beside pcs beside roll goes
   ragged the moment its column is sized by its own content. The select gives up
   the width, never the stepper - a 10px step button is not a button. */
.alloc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2.5rem var(--control-compact);
  align-items: center;
  gap: var(--s-2);
}
.alloc-row select { min-width: 0; }
.alloc-row .stepper-unit { margin-left: 0; }
.alloc-drop { width: var(--control-compact); padding: 0; }
.alloc-idle { display: inline-block; }
.alloc-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-1); }
.alloc-total { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* over the free quantity: weight, never a hue, and the server refuses it anyway */
.alloc-total.is-over { font-weight: 600; color: var(--ink-strong); text-decoration: underline; }

/* the fulfillment cell, until the two list pages share one progress column */
.progress-cell { min-width: 160px; }

.fulfillment-nums { font-size: var(--t-3); font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }

.fulfillment-nums .muted { font-weight: 400; }

/* the stepper timeline on the two detail pages */
.stepper-panel { padding: var(--s-4); }

.timeline-stepper { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto; }

.step { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }

.step-icon {
  width: var(--control-compact); height: var(--control-compact);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--t-2); font-weight: 600;
}

.step-text { font-size: var(--t-2); color: var(--ink-muted); text-align: center; }

.step-line { flex: 1 1 auto; height: 1px; background: var(--line-strong); margin: 0 var(--s-2) var(--s-5); }

.step-line.active { background: var(--ink-strong); }

.step.done .step-icon { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }

.step.done .step-text { color: var(--ink); }

.step.now .step-icon { border: 2px solid var(--ink-strong); color: var(--ink-strong); }

.step.now .step-text { color: var(--ink-strong); font-weight: 600; }

.stepper-note { margin: var(--s-3) 0 0; font-size: var(--t-3); color: var(--ink-muted); text-align: center; }

.material-lines-textarea { min-height: 200px; line-height: var(--lh-3); white-space: pre; tab-size: 4; }

.picker-note { font-size: var(--t-3); color: var(--ink-muted); }

.decision-actions { display: flex; flex-direction: column; gap: var(--s-2); }

.entity-link { color: var(--ink); text-decoration: none; }

.entity-link:hover { text-decoration: underline; }

.error-actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }

.dialog-facts { margin-bottom: var(--s-4); }

.info-mark { border: 1px solid var(--line-strong); background: var(--surface-sunken); }

.field-block.wide, .wide { max-width: none; }

.stepper-btn.plus, .stepper-btn.minus { font-variant-numeric: normal; }

input.qty { text-align: right; }

a.id {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--ink-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}

a.id:hover { text-decoration-color: currentColor; }

/* the issued letter, reached from the row that names it rather than from a
   column at the far edge of a table that scrolls inside itself */
.letter-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  text-decoration: none;
}
.letter-link svg { width: 12px; height: 12px; }
.letter-link:hover { color: var(--ink-strong); text-decoration: underline; }