/* ==========================================================================
   Parts Tracker: shop-floor "traveler" styling
   ========================================================================== */

:root {
  --paper: #efece3;
  --paper-deep: #e3ded0;
  --card: #fbfaf6;
  --card-2: #f4f1e8;
  --ink: #17191c;
  --ink-2: #43484e;
  --ink-3: #5c6167;   /* clears 4.5:1 on every surface it lands on, darkest being --paper-deep */
  --rule: #d6d0c1;
  --rule-2: #bfb8a5;
  --grid: rgba(23, 25, 28, 0.045);

  --graphite: #1b1f23;
  --graphite-2: #252a30;
  --graphite-3: #343a41;
  --on-dark: #ece8de;
  --on-dark-2: #a4a7a5;

  --accent: #ff5a1f;
  --accent-deep: #b03408;   /* was #d8410a: failed as text on paper AND under white */
  --accent-soft: #ffe2d4;

  --ok: #1f8a3b;   --ok-soft: #dcefdf;   --ok-ink: #135a27;
  --warn: #e3a300; --warn-soft: #fff0c2; --warn-ink: #6e4c00;
  --bad: #d2372b;  --bad-soft: #f9dad6;  --bad-ink: #8a1d14;
  --over: #2463b5; --over-soft: #dce6f6; --over-ink: #173f75;
  --muted: #8b8f94; --muted-soft: #e5e3dc; --muted-ink: #4f5358;

  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 3px;
  --shadow: 0 1px 0 rgba(23, 25, 28, 0.05), 0 10px 28px -16px rgba(23, 25, 28, 0.35);
  --page-pad: clamp(16px, 3vw, 32px);
}

/* Tone tokens: every coloured element reads --tone / --tone-soft / --tone-ink. */
.tone-ok    { --tone: var(--ok);    --tone-soft: var(--ok-soft);    --tone-ink: var(--ok-ink); }
.tone-warn  { --tone: var(--warn);  --tone-soft: var(--warn-soft);  --tone-ink: var(--warn-ink); }
.tone-bad   { --tone: var(--bad);   --tone-soft: var(--bad-soft);   --tone-ink: var(--bad-ink); }
.tone-over  { --tone: var(--over);  --tone-soft: var(--over-soft);  --tone-ink: var(--over-ink); }
.tone-muted { --tone: var(--muted); --tone-soft: var(--muted-soft); --tone-ink: var(--muted-ink); }
/* Staff-set job statuses */
.tone-info  { --tone: #2463b5; --tone-soft: #dce6f6; --tone-ink: #173f75; }  /* waiting on 3D supplied parts */
.tone-attn  { --tone: #7b3fc4; --tone-soft: #ebe0f8; --tone-ink: #4b2382; }  /* waiting on info from customer */
.tone-teal  { --tone: #0d7f89; --tone-soft: #d6eff1; --tone-ink: #07515a; }  /* waiting on shipping info */
.tone-done  { --tone: #17191c; --tone-soft: #e2e0d9; --tone-ink: #17191c; }  /* completed and shipped */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}
h1 { font-size: clamp(30px, 4.2vw, 46px); }
h2 { font-size: 26px; }
h3 { font-size: 20px; }

p { margin: 0 0 12px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-family: var(--font-mono); font-size: 14px; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--graphite);
  color: var(--on-dark);
  border-bottom: 4px solid var(--accent);
}
.topbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 62px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--on-dark);
  flex-shrink: 0;
}
.brand:hover { color: #fff; }
.brand__mark { color: var(--accent); display: grid; }
.brand__name {
  font: 700 21px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 20px 12px 18px;
  color: var(--on-dark-2);
  text-decoration: none;
  font: 600 15px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover { color: #fff; }
.nav a.is-active { color: #fff; }
.nav a.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -4px;
  height: 4px;
  background: #fff;
}
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--graphite);
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0;
}

.usermenu { position: relative; flex-shrink: 0; }
.usermenu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 4px;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu__avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--graphite-3);
  border: 1.5px solid var(--on-dark-2);
  font: 700 14px/1 var(--font-display);
  letter-spacing: 0.06em;
}
.usermenu__who { display: flex; flex-direction: column; line-height: 1.15; }
.usermenu__name { font-weight: 600; font-size: 14px; }
.usermenu__role { font: 500 11px/1.2 var(--font-mono); color: var(--on-dark-2); text-transform: uppercase; letter-spacing: 0.08em; }
.usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 230px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
}
.usermenu__meta { padding: 10px 10px 12px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.usermenu__meta strong { color: var(--ink); }
.usermenu__panel a,
.usermenu__panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  font: 500 15px/1.2 var(--font-body);
  color: var(--ink);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.usermenu__panel a:hover,
.usermenu__panel button:hover { background: var(--paper); color: var(--ink); }
.usermenu__panel form { margin: 0; }

/* --------------------------------------------------------------- page frame */

.page {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px var(--page-pad) 64px;
  flex: 1;
}

.foot {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 18px var(--page-pad) 28px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-3);
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid var(--rule);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-head__title { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--accent); }
.lede { color: var(--ink-2); max-width: 64ch; margin: 0; }

.crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font: 500 13px/1 var(--font-mono);
  color: var(--ink-3);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--accent-deep); }
.crumbs span[aria-hidden] { color: var(--muted); }

/* ------------------------------------------------------------------ flashes */

.flash {
  position: relative;
  margin-bottom: 18px;
  padding: 13px 16px 13px 20px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-left-width: 8px;
  font-weight: 500;
  box-shadow: var(--shadow);
  animation: drop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.flash--ok { border-left-color: var(--ok); }
.flash--error { border-left-color: var(--bad); background: var(--bad-soft); }
.flash--info { border-left-color: var(--over); }

/* ------------------------------------------------------------------ notices */

.notice {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-left-width: 8px;
  font-weight: 500;
}
.notice--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.notice--ok { border-left-color: var(--ok); }
.notice--bad { border-left-color: var(--bad); background: var(--bad-soft); }

.confirm-current { margin: -6px 0 22px; }

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  min-width: 0;
}
.card + .card, .section + .section { margin-top: 26px; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--ink);
  background: var(--card-2);
}
.card__head h2, .card__head h3 { font-size: 21px; display: flex; align-items: center; gap: 10px; }
.card__body { padding: 18px; }
.card__body > :last-child { margin-bottom: 0; }
.card__foot { padding: 14px 18px; border-top: 1px solid var(--rule); background: var(--card-2); }
.count {
  font: 600 12px/1 var(--font-mono);
  padding: 4px 7px;
  background: var(--ink);
  color: var(--card);
  border-radius: 2px;
  letter-spacing: 0;
}

.section { margin-top: 30px; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-head h2 { display: flex; align-items: center; gap: 10px; }

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

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 9px;
  font: 600 15px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--ink); color: var(--card); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: #1d0b02; --btn-bd: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn--primary:hover { background: var(--accent-deep); color: #fff; box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--card); }
.btn--dark:hover { background: var(--graphite-3); }
.btn--danger { --btn-fg: var(--bad); --btn-bd: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }
.btn--ghost { --btn-bd: transparent; }
.btn--ghost:hover { background: var(--paper-deep); color: var(--ink); }
.btn--sm { padding: 7px 10px 6px; font-size: 13px; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row--end { justify-content: flex-end; }
.inline-form { display: inline; margin: 0; }

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--accent-deep); text-decoration-color: var(--accent); }
.linkbtn--danger:hover { color: var(--bad); text-decoration-color: var(--bad); }

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

.form-grid { display: grid; gap: 18px 20px; grid-template-columns: repeat(12, 1fr); }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-5 { grid-column: span 5; }
.span-2 { grid-column: span 2; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label,
.field > .label {
  font: 600 13px/1.1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field .req { color: var(--accent-deep); }
.hint { font-size: 13px; color: var(--ink-3); }
.err { font-size: 13px; font-weight: 600; color: var(--bad); }

input[type='text'], input[type='password'], input[type='email'], input[type='number'],
input[type='date'], input[type='search'], input[type='tel'], select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: 400 16px/1.3 var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--rule-2);
  border-radius: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317191c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4.5px var(--accent);
}
.has-error input, .has-error select, .has-error textarea, input.is-invalid { border-color: var(--bad); background: #fff8f7; }
input.mono, .input-mono { font-family: var(--font-mono); font-size: 15px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-deep); flex-shrink: 0; }

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1.5px dashed var(--rule-2);
}

.errors-box {
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--bad-soft);
  border: 1.5px solid var(--bad);
  border-left-width: 8px;
}
.errors-box ul { margin: 6px 0 0; padding-left: 18px; }

/* Role picker (admin user form) */
.role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.role-card { position: relative; display: block; cursor: pointer; }
.role-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--rule-2);
  border-radius: 2px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.role-card__title { font: 700 19px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; display: flex; justify-content: space-between; }
.role-card__title::after {
  content: '';
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
}
.role-card__text { font-size: 14px; color: var(--ink-2); }
.role-card:hover .role-card__body { border-color: var(--ink-3); }
.role-card input:checked + .role-card__body { border-color: var(--ink); background: var(--accent-soft); box-shadow: 3px 3px 0 var(--ink); }
.role-card input:checked + .role-card__body .role-card__title::after { background: var(--accent); border: 4px solid var(--ink); }
.role-card input:focus-visible + .role-card__body { outline: 3px solid var(--accent); outline-offset: 2px; }

.pw-row { display: flex; gap: 8px; }
.pw-row input { flex: 1; }

/* -------------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 4px 8px;
  font: 600 13px/1 var(--font-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tone-ink);
  background: var(--tone-soft);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  border-radius: 2px;
}
.chip::before { content: ''; width: 8px; height: 8px; background: var(--tone); flex-shrink: 0; }
.chip--solid { background: var(--tone); color: #fff; border-color: var(--tone); }
.chip--solid::before { background: #fff; }
.tone-warn.chip--solid { color: var(--ink); }
.tone-warn.chip--solid::before { background: var(--ink); }

.tag {
  display: inline-block;
  padding: 3px 6px 2px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.tag--staff { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent); }
.tag--late { color: #fff; background: var(--bad); border-color: var(--bad); }
.tag--soon { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn); }
.tag--closed { color: var(--card); background: var(--ink-2); border-color: var(--ink-2); }

/* ------------------------------------------------------------------- meters */

.meter {
  position: relative;
  height: 10px;
  background: var(--paper-deep);
  border: 1px solid var(--rule-2);
  overflow: hidden;
  min-width: 90px;
}
.meter > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--tone, var(--ink));
  transform-origin: left;
  animation: fill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Tick marks every 10% make the bar read like a gauge. */
.meter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(23, 25, 28, 0.22) calc(10% - 1px) 10%);
  pointer-events: none;
}
.meter--lg { height: 18px; border: 1.5px solid var(--ink); }

.progress-cell { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.progress-cell__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.progress-cell__pct { font: 600 14px/1 var(--font-mono); color: var(--tone-ink); }

/* --------------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 18px;
  overflow-x: auto;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 10px;
  margin-bottom: -1.5px;
  font: 600 16px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-3);
  border: 1.5px solid transparent;
  border-bottom: 0;
  white-space: nowrap;
  background: none;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); background: var(--card); border-color: var(--ink); border-top: 4px solid var(--accent); padding-top: 8px; }
.tab .count { background: var(--rule-2); color: var(--ink); }
.tab.is-active .count { background: var(--ink); color: var(--card); }

.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; }
.seg button, .seg a {
  padding: 7px 12px 6px;
  font: 600 13px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--card);
  color: var(--ink-2);
  border: 0;
  border-right: 1.5px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.seg > :last-child { border-right: 0; }
.seg .is-active { background: var(--ink); color: var(--card); }

/* -------------------------------------------------------------------- tiles */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 14px 20px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--tone); }
.tile:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.tile.is-active { background: var(--tone-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.tile__n { font: 700 40px/0.9 var(--font-display); }
.tile__label { font: 600 14px/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* ------------------------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px;
  margin-bottom: 18px;
  background: var(--card-2);
  border: 1.5px solid var(--rule-2);
}
.filters .field { flex: 1 1 180px; }
.filters .field--grow { flex: 3 1 260px; }
.filters .btn-row { flex: 0 0 auto; }

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

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  padding: 11px 12px 9px;
  text-align: left;
  font: 600 13px/1.1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--card-2);
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}
.table th.num { text-align: right; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.12s; }
.table .col-stripe { width: 8px; padding: 0; }

/* Coloured status stripe down the left edge of a row. */
.row-tone > td:first-child { box-shadow: inset 6px 0 0 var(--tone); padding-left: 18px; }
.row-tone.tone-bad > td:first-child {
  box-shadow: none;
  background-image: repeating-linear-gradient(-45deg, var(--bad) 0 5px, #3a1411 5px 10px);
  background-size: 6px 100%;
  background-repeat: no-repeat;
}
/* The profit and loss carries the worksheet's colour key: the whole row takes the colour, not
   just the stripe, and the greens deepen with the margin the way the spreadsheet's did. Every
   shade below was checked against the three inks that land on these rows (--ink, --ink-2 and the
   muted --ink-3 under each job number); the darkest green clears 4.6:1, so a stronger scale is
   not available without the small print going under the readable bar. */
.table--banded .pl-band > td { background: var(--band, transparent); }
.table--banded .pl-band:hover > td { background: var(--band, transparent); filter: brightness(0.97); }
.pl-no-sale   { --band: #fcebb0; }
.pl-loss      { --band: #f9dbd7; }
.pl-bad-loss  { --band: #f8d7d2; }
.pl-profit    { --band: #f0f7f1; }
.pl-profit-10 { --band: #eaf4ec; }
.pl-profit-20 { --band: #ddeee1; }
.pl-profit-30 { --band: #d0e8d6; }
.pl-profit-50 { --band: #c9e5d0; }
/* Sold for almost nothing: the margin runs to thousands of percent and means nothing, but the
   loss underneath it is real, so these are tinted rather than left looking like an ordinary row. */
.pl-small { --band: #e0ded6; }
/* A job nobody has costed is left plain: that is an absence of an answer, not a verdict. */
.pl-unknown { --band: transparent; }

@media print {
  /* Browsers drop backgrounds when printing unless told otherwise, and the colour is the point. */
  .table--banded .pl-band > td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: color-mix(in srgb, var(--tone, var(--accent)) 9%, transparent); }

.jobnum {
  display: inline-block;
  font: 600 15px/1 var(--font-mono);
  padding: 5px 7px 4px;
  border: 1.5px solid var(--ink);
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
a.jobnum:hover { background: var(--ink); color: var(--card); }
.job-title { font-weight: 600; font-size: 16px; line-height: 1.25; }
.job-sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.part { font: 500 14.5px/1.2 var(--font-mono); white-space: nowrap; }

.qty-owed { font-weight: 700; color: var(--tone-ink); }
.qty-zero { color: var(--ink-3); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--ink-2); margin-top: 16px; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; }
.legend__swatch { width: 14px; height: 14px; background: var(--tone); border: 1px solid rgba(0, 0, 0, 0.2); }
.legend__swatch.tone-bad { background: repeating-linear-gradient(-45deg, var(--bad) 0 3px, #3a1411 3px 6px); }

.empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-2);
  border: 1.5px dashed var(--rule-2);
  background: var(--card);
}
.empty h3 { margin-bottom: 8px; }
.empty p { margin: 0 auto 16px; max-width: 48ch; }

/* ---------------------------------------------------------- job "traveler" */

.traveler { overflow: hidden; }
.traveler__band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 22px;
  background: var(--graphite);
  color: var(--on-dark);
  border-bottom: 4px solid var(--tone, var(--accent));
}
.traveler__band::after {
  /* punched hole, like a paper work-order tag */
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55);
}
.traveler__label { font: 500 12px/1 var(--font-mono); letter-spacing: 0.2em; color: var(--on-dark-2); text-transform: uppercase; }
.traveler__num { font: 600 clamp(26px, 3.4vw, 36px)/1 var(--font-mono); letter-spacing: 0.01em; color: #fff; }
.traveler__band .chip { margin-right: 48px; }
.traveler__band-spacer { flex: 1; }
.traveler__main { padding: 22px 22px 8px; }
.traveler__main h1 { margin-bottom: 18px; }
.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 -22px;
  border-top: 1.5px solid var(--ink);
}
.meta > div { padding: 14px 22px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.meta > div:last-child { border-right: 0; }
.meta dt { font: 600 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.meta dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.meta dd.mono { font-size: 17px; font-weight: 500; }
.meta .tag { margin-top: 6px; }
.traveler__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-top: 1.5px solid var(--ink);
  background: var(--card-2);
}
.traveler__actions .spacer { flex: 1; }

.closed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin-bottom: 18px;
  background: repeating-linear-gradient(-45deg, var(--card-2) 0 12px, var(--paper-deep) 12px 24px);
  border: 1.5px solid var(--ink);
  font-weight: 600;
}

.job-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; margin-top: 22px; }

.gauge { padding: 20px 22px; }
.gauge__top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.gauge__pct { font: 700 76px/0.8 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.gauge__pct small { font-size: 36px; }
.gauge__label { font: 600 16px/1.15 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.gauge__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; border: 1px solid var(--rule); }
.gauge__stat { padding: 10px 12px; border-right: 1px solid var(--rule); background: var(--tone-soft); }
.gauge__stat:last-child { border-right: 0; }
.gauge__stat b { display: block; font: 700 28px/1 var(--font-display); color: var(--tone-ink); }
.gauge__stat span { font: 600 12px/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone-ink); }
.gauge__owed {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px dashed var(--rule-2);
}
.gauge__owed b { font: 700 30px/1 var(--font-display); }

.notes-block { padding: 18px 22px; }
.notes-block + .notes-block { border-top: 1.5px dashed var(--rule-2); }
.notes-block h3 { font-size: 16px; letter-spacing: 0.1em; color: var(--ink-2); display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.prose--empty { color: var(--ink-3); font-style: italic; }

/* ---------------------------------------------------------------- shipments */

.shipment { border-bottom: 1px solid var(--rule); }
.shipment:last-child { border-bottom: 0; }
.shipment > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 26px 150px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
}
.shipment > summary::-webkit-details-marker { display: none; }
.shipment > summary:hover { background: var(--card-2); }
.shipment__toggle {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink);
  font: 700 15px/1 var(--font-mono);
  transition: transform 0.2s;
}
.shipment[open] .shipment__toggle { transform: rotate(45deg); background: var(--ink); color: var(--card); }
.shipment__date { font: 700 19px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
.shipment__refs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.shipment__refs b { font: 600 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 5px; }
.shipment__refs .mono { font-size: 13.5px; }
.shipment__qty { text-align: right; font: 600 14px/1.2 var(--font-mono); white-space: nowrap; }
.shipment__body { padding: 4px 18px 18px 58px; }
.shipment__body .table { border: 1px solid var(--rule); }
.shipment__notes { margin: 12px 0 0; padding: 10px 12px; background: var(--card-2); border-left: 4px solid var(--rule-2); font-size: 14px; }
.shipment__foot { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- questions */

.thread { border-bottom: 1px solid var(--rule); }
.thread:last-child { border-bottom: 0; }
.thread > summary {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
}
.thread > summary::-webkit-details-marker { display: none; }
.thread > summary:hover { background: var(--card-2); }
.thread__subject { font-weight: 700; font-size: 16px; }
.thread__meta { font-size: 13px; color: var(--ink-3); }
.thread__body { padding: 0 18px 18px; }
.msg {
  position: relative;
  max-width: 760px;
  margin: 12px 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--ink-3);
}
.msg--staff { margin-left: auto; border-left-color: var(--accent); background: #fffaf6; }
.msg__who { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.msg__who strong { color: var(--ink); font-size: 14px; }
.reply-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--rule-2); }
.reply-form textarea { min-height: 80px; }

.inbox-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.inbox-row:last-child { border-bottom: 0; }
.inbox-row:hover { background: var(--card-2); color: var(--ink); }
.inbox-row__snippet { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------- BOM editor */

.bom-editor td { padding: 6px 8px; vertical-align: top; }
.bom-editor th { padding-left: 8px; padding-right: 8px; }
.bom-editor input[type='text'] { padding: 8px 10px; font-size: 15px; }
.bom-editor .col-idx { width: 44px; text-align: right; color: var(--ink-3); font: 500 13px/38px var(--font-mono); }
.bom-editor .col-part { width: 22%; min-width: 170px; }
.bom-editor .col-qty { width: 120px; }
.bom-editor .col-type { width: 170px; }
.bom-editor .col-type select { width: 100%; }
.bom-editor .col-total { width: 130px; text-align: right; font: 600 15px/38px var(--font-mono); }
.bom-editor .col-recv { width: 110px; text-align: right; font: 500 13px/38px var(--font-mono); color: var(--ink-3); }
.bom-editor .col-del { width: 72px; text-align: center; }
.bom-editor .qty-input { text-align: right; font-family: var(--font-mono); }
.bom-editor tr.is-deleted td { opacity: 0.45; }
.bom-editor tr.is-deleted input[type='text'] { text-decoration: line-through; }
.bom-editor tr.is-new td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.bom-editor .err { display: block; margin-top: 4px; }
.del-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font: 600 10px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; padding-top: 6px; }
.del-toggle input { width: 18px; height: 18px; accent-color: var(--bad); }
.lock { display: inline-block; padding-top: 10px; color: var(--ink-3); font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }

.sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--graphite);
  color: var(--on-dark);
  border-top: 4px solid var(--accent);
}
.sticky-bar .btn:not(.btn--primary) { --btn-fg: var(--on-dark); --btn-bd: var(--on-dark-2); }
.sticky-bar .btn:not(.btn--primary):hover { background: var(--on-dark); color: var(--graphite); }
.sticky-bar__stat { font: 500 13px/1.3 var(--font-mono); color: var(--on-dark-2); }
.sticky-bar__stat b { color: #fff; font-size: 15px; }

.two-col { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 22px; align-items: start; }

.paste-help { font-size: 14px; color: var(--ink-2); }
.paste-help code, code {
  font: 500 13px/1.4 var(--font-mono);
  background: var(--paper-deep);
  padding: 1px 5px;
  border-radius: 2px;
}
.paste-sample {
  font: 500 13px/1.6 var(--font-mono);
  background: var(--graphite);
  color: var(--on-dark);
  padding: 10px 12px;
  margin: 10px 0 14px;
  overflow-x: auto;
  white-space: pre;
}
.paste-area { font-family: var(--font-mono); font-size: 13px; min-height: 180px; white-space: pre; }

/* ------------------------------------------------------------ receive form */

.receive td { padding-top: 8px; padding-bottom: 8px; }
.receive .qty-in { width: 118px; text-align: right; font-family: var(--font-mono); padding: 8px 10px; }
.receive tr.has-qty { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.receive tr.is-over .qty-in { border-color: var(--over); background: var(--over-soft); }
.receive .over-note { display: none; font-size: 12px; font-weight: 600; color: var(--over-ink); margin-top: 3px; text-align: right; }
.receive tr.is-over .over-note { display: block; }
.receive .fill-btn { font-size: 12px; }
.receive-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.receive-tools input[type='search'] { max-width: 320px; }

/* ---------------------------------------------------------------- owed page */

.owed-job + .owed-job { margin-top: 22px; }
.owed-job .card__head { gap: 8px 16px; }
.owed-job__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.owed-job__title h3 { font-size: 21px; }
.owed-totals { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.owed-totals .tile { flex: 1 1 180px; }

/* ------------------------------------------------------------------- admin */

.userrow__name { font-weight: 600; }
.userrow__user { font: 500 13px/1.3 var(--font-mono); color: var(--ink-3); }
.role-admin { --tone: var(--graphite); --tone-soft: var(--graphite); --tone-ink: #fff; }
.role-employee { --tone: var(--accent); --tone-soft: var(--accent-soft); --tone-ink: var(--accent-deep); }
.role-customer { --tone: var(--over); --tone-soft: var(--over-soft); --tone-ink: var(--over-ink); }
.role-admin.chip::before { background: var(--accent); }
/* A superuser reads as an administrator with the accent carried through, because that is what
   it is: the same access with one more key on the ring. */
.role-superuser { --tone: var(--ink); --tone-soft: var(--ink); --tone-ink: #fff; }
.role-superuser.chip::before { background: var(--accent); }
.is-inactive td { opacity: 0.55; }

.danger-zone { margin-top: 28px; padding: 16px 18px; border: 1.5px dashed var(--bad); background: #fff7f6; display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.danger-zone p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------------ auth screens */

.auth-body { background: var(--graphite); }
.auth {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  min-height: 100vh;
}
.auth__art {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 64px);
  color: var(--on-dark);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--graphite);
}
.auth__art::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--graphite) 14px 28px);
}
.auth__brand { display: flex; align-items: center; gap: 12px; color: var(--on-dark); }
.auth__brand .brand__mark { color: var(--accent); }
.auth__kicker {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 40px 0 14px;
}
.auth__features {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 52ch;
}
.auth__features li {
  display: grid;
  gap: 2px;
  padding-left: 20px;
  position: relative;
  color: var(--on-dark-2);
  font-size: 15px;
  animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.09s);
}
.auth__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--accent);
}
.auth__features b {
  font: 700 17px/1.2 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.auth__headline {
  font: 700 clamp(40px, 6vw, 88px)/0.88 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 40px 0 26px;
}
.auth__headline { margin-top: 0; }
.auth__headline span { display: block; }
.auth__headline .hl { color: var(--accent); }
.auth__copy { max-width: 46ch; color: var(--on-dark-2); font-size: 17px; }
.auth__legend { display: grid; gap: 10px; max-width: 440px; margin: 30px 0 36px; }
.auth__legend-row.tone-done .meter > span { background: var(--on-dark); }
.auth__legend-row {
  display: grid;
  grid-template-columns: 11.5em 1fr;
  align-items: center;
  gap: 14px;
  font: 600 14px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.12s);
}
.auth__legend-row .meter { background: var(--graphite-3); border-color: #4a5058; height: 12px; }
.auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.auth__card { width: 100%; max-width: 400px; animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.auth__card h1 { font-size: 40px; margin: 12px 0 8px; }
.auth__card .lede { margin-bottom: 24px; }
.auth__card form { display: flex; flex-direction: column; gap: 16px; }
.auth__card .card__body { padding: 26px; }
.auth__foot { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

.narrow { max-width: 560px; }
.medium { max-width: 920px; }

/* --------------------------------------------------------------- error page */

.error-page { max-width: 620px; margin: 8vh auto 0; text-align: left; }
.error-page__code { font: 700 120px/0.8 var(--font-display); color: var(--accent); }

/* --------------------------------------------------------------- animation */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reveal { animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }

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

/* Someone who has asked their machine for more contrast gets the traveler drawn harder:
   the rules that separate things, the secondary ink, and the tints behind status. The
   design is already high-contrast by nature, so this sharpens it rather than reworking it. */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #2b2f34;
    --ink-3: #43474d;
    --rule: #a9a292;
    --rule-2: #8d8674;
    --muted: #64686d;
  }
  .card, .section > .card, .table th, .table td { border-color: var(--rule-2); }
  .tag, .chip { border-width: 2px; }
  .hint, .small.muted, .muted { color: var(--ink-2); }
  :focus-visible { outline-width: 4px; }
}

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

@media (max-width: 1080px) {
  .job-grid, .two-col { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .topbar__inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
  .brand { flex: 1; }
  .nav { order: 3; flex-basis: 100%; margin: 0 -8px; }
  .nav a { padding: 14px 10px 12px; }
  .usermenu__who { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth__art { min-height: auto; padding-bottom: 44px; }
  .auth__headline { margin: 28px 0 16px; }
  .auth__legend { margin: 22px 0 8px; }
  .span-8, .span-6, .span-5, .span-4, .span-3, .span-2 { grid-column: span 12; }
  .role-picker { grid-template-columns: 1fr; }
  .shipment > summary { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .shipment__refs { grid-column: 2 / -1; grid-row: 2; }
  .shipment__body { padding-left: 18px; }
  .gauge__pct { font-size: 60px; }

  /* Job list collapses into stacked cards. */
  .jobs-table thead { display: none; }
  .jobs-table, .jobs-table tbody, .jobs-table tr, .jobs-table td { display: block; width: 100%; }
  .jobs-table tr {
    position: relative;
    padding: 14px 14px 14px 22px;
    border-bottom: 1.5px solid var(--ink);
    box-shadow: inset 7px 0 0 var(--tone);
  }
  .jobs-table tr.tone-bad { box-shadow: none; background-image: repeating-linear-gradient(-45deg, var(--bad) 0 5px, #3a1411 5px 10px); background-size: 7px 100%; background-repeat: no-repeat; }
  .jobs-table td { padding: 3px 0; border: 0; }
  .jobs-table td:first-child { box-shadow: none !important; background: none !important; padding-left: 0; }
  .jobs-table td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 118px;
    font: 600 12px/1 var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .jobs-table td.num { text-align: left; }
  .jobs-table .progress-cell { margin-top: 6px; }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile__n { font-size: 32px; }
  .gauge__stats { grid-template-columns: 1fr; }
  .gauge__stat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .traveler__band::after { display: none; }
  .traveler__band .chip { margin-right: 0; }
  .foot { flex-direction: column; }
  .page-head__actions .btn { flex: 1; }
}

/* -------------------------------------------------------------------- print */

@media print {
  body { background: #fff; }
  .topbar, .foot, .traveler__actions, .no-print, .reply-form, .flash, .tabs, .filters, .seg { display: none !important; }
  /* Only the photos ticked for the info sheet print, two to a row. */
  .photo:not(.is-on-sheet) { display: none !important; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .photo__thumb { aspect-ratio: 4 / 3; }
  .page { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
  .shipment:not([open]) .shipment__body { display: block; }
  .meter > span { animation: none; }
  a { text-decoration: none; }
}

/* ---------------------------------------------------------------- receiving */

.job-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; overflow: hidden; }
.job-pick__label {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: var(--graphite);
  color: var(--on-dark);
  font: 600 14px/1.1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-right: 4px solid var(--accent);
}
.job-pick__body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 18px; }
.job-pick__form { flex: 1 1 380px; max-width: 620px; }
.job-pick__form select { font-weight: 600; }
.job-pick__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.job-pick__meta b { font: 600 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }

.picker-group + .picker-group { margin-top: 18px; }
.picker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 8px 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  box-shadow: inset 6px 0 0 var(--tone);
  transition: background 0.12s;
}
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: color-mix(in srgb, var(--tone) 9%, var(--card)); color: var(--ink); }
.picker-row__main { display: flex; flex-direction: column; min-width: 0; }
.picker-row__status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.picker-row__go { font: 700 20px/1 var(--font-mono); color: var(--ink-3); transition: transform 0.15s, color 0.15s; }
.picker-row:hover .picker-row__go { transform: translateX(4px); color: var(--accent-deep); }

@media (max-width: 860px) {
  .job-pick { grid-template-columns: 1fr; }
  .job-pick__label { border-right: 0; border-bottom: 4px solid var(--accent); padding: 10px 18px; }
  .picker-row { grid-template-columns: auto minmax(0, 1fr); }
  .picker-row__status { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; }
  .picker-row__go { display: none; }
}

/* ---------------------------------------------------------------- invites */

.invite-link { border-color: var(--ink); box-shadow: 5px 5px 0 var(--accent); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; font-size: 14px; background: var(--card-2); }
@media (max-width: 560px) { .copy-row { flex-direction: column; } }

/* ------------------------------------------------------------ admin preview */

.preview-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  background: repeating-linear-gradient(-45deg, #ffd23f 0 16px, #ffc61a 16px 32px);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.preview-bar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px var(--page-pad);
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.preview-bar__label {
  font: 700 13px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ink);
  color: #ffd23f;
  padding: 6px 8px;
}
.preview-bar__text { font-weight: 500; flex: 1 1 260px; }
.preview-bar__switch { margin: 0; }
.preview-bar__switch select { padding: 6px 34px 6px 10px; font-size: 14px; border-color: var(--ink); min-width: 220px; }
.preview-bar .btn { --btn-bg: var(--ink); --btn-fg: #ffd23f; }
.preview-bar ~ .topbar { position: relative; }

.preview-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.preview-option:last-child { border-bottom: 0; }
.preview-option > span { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.preview-option__text { font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------------- job statuses */

.tiles--status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--status .tile { padding: 11px 14px 11px 18px; gap: 6px; }
.tiles--status .tile__n { font-size: 32px; }
.tiles--status .tile__label { font-size: 13px; }
.tile.is-zero:not(.is-active) { opacity: 0.55; }
.tile.is-zero:not(.is-active):hover { opacity: 1; }

.status-callout {
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--tone-soft);
  color: var(--tone-ink);
  border: 1.5px solid var(--tone);
  border-left-width: 8px;
  font-weight: 500;
}
.status-callout strong { font: 700 16px/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }

.status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  padding: 12px 22px;
  border-top: 1.5px solid var(--ink);
  background: color-mix(in srgb, var(--tone, var(--accent)) 7%, var(--card));
}
.status-bar label { font: 600 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.status-bar select { width: auto; min-width: 280px; padding: 7px 34px 7px 10px; font-size: 14px; font-weight: 600; }
.status-bar__note { font-size: 13px; color: var(--ink-3); }

.tag--done { color: #fff; background: var(--ok); border-color: var(--ok); }

.shipped-cell span { display: block; }
.shipped-cell__left { font-size: 12px; color: var(--warn-ink); }
.shipped-cell__left.is-done { color: var(--ok-ink); font-weight: 600; }

.ship-summary { font-size: 14px; color: var(--ink-2); }
.tracking a, .tracking span { display: block; font-size: 13.5px; white-space: nowrap; }

.ship-counts { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; border: 1.5px solid var(--ink); background: var(--card); }
.ship-counts > div { padding: 12px 16px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.ship-counts > div:last-child { border-right: 0; }
.ship-counts span { font: 600 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ship-counts b { font-size: 24px; font-weight: 600; }
.ship-counts .is-left { background: var(--warn-soft); }
.ship-counts .is-done { background: var(--ok-soft); }

.check--strong { padding: 12px 14px; background: var(--card-2); border: 1.5px solid var(--rule-2); }
.check--remember { margin: 16px 0 4px; font-weight: 600; }
/* BOM editor: vendor ordering columns (3D supplied parts only) */
.bom-editor .col-vendor { width: 140px; }
.bom-editor .col-ord { width: 108px; }
.bom-editor .col-date { width: 148px; }
.bom-editor .col-date input { width: 100%; }
.ord-toggle { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.ord-toggle input { width: 16px; height: 16px; accent-color: var(--ok); }
.bom-stack > * + * { margin-top: 22px; }
.bom-side > * + * { margin-top: 22px; }
.label-like { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.field .check + .check, .field .label-like + .check { margin-top: 8px; }
.check--remember + .hint { display: block; margin: 0 0 16px 28px; }

@media (max-width: 860px) {
  .tiles--status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-bar select { min-width: 0; flex: 1 1 100%; }
  .ship-counts { grid-template-columns: 1fr; }
  .ship-counts > div { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ------------------------------------------------ customer vs vendor receipts */

.source-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.source-picker input:disabled + .role-card__body { opacity: 0.5; cursor: not-allowed; }
.receive-section__head {
  padding: 10px 18px;
  font: 600 14px/1.2 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--card-2);
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 10px;
  align-items: center;
}
.tag--vendor { color: var(--over-ink); background: var(--over-soft); border-color: var(--over); }
.tag--ok { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok); }
.tag--warn { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn); }
.own-parts { border-color: var(--over); }
.own-parts .card__head { background: var(--over-soft); }
@media (max-width: 860px) { .source-picker { grid-template-columns: 1fr; } }

.own-gauge { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--rule-2); display: flex; flex-direction: column; gap: 8px; }
.own-gauge__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 14px/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.own-gauge__top b { font-size: 16px; color: var(--over-ink); }
.own-mini { margin-top: 6px; font: 500 12px/1.2 var(--font-mono); color: var(--over-ink); }
.own-mini.is-done { color: var(--ok-ink); }
.shipped-on { color: var(--ok-ink); font-weight: 600; }
.names-input { min-height: 84px; font-weight: 500; line-height: 1.5; }
/* Checkbox labels inside form fields read as sentences, not field captions. */
.field > label.check { font: 400 15px/1.45 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* New job: one row per job (name + build qty) */
.job-rows-wrap { border: 1.5px solid var(--rule-2); background: #fff; }
.job-rows th, .job-rows td { padding: 6px 8px; }
.job-rows .col-idx { width: 40px; text-align: right; color: var(--ink-3); font: 500 13px/38px var(--font-mono); }
.job-rows .col-qty { width: 170px; }
.job-rows .col-del { width: 44px; text-align: center; }
.job-rows td.num input { text-align: right; }
.job-rows .err { display: block; margin-top: 4px; text-align: left; }
.job-rows .linkbtn { font-size: 16px; text-decoration: none; padding: 8px; }
@media (max-width: 560px) {
  .job-rows .col-qty { width: 92px; }
  .job-rows .col-idx { width: 26px; }
  .job-rows .col-del { width: 34px; }
}

.job-rows .col-nobom { width: 150px; text-align: center; }
.job-rows td.col-nobom input { width: 20px; height: 20px; accent-color: var(--accent-deep); vertical-align: middle; }
.nobom-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.nobom-all input { width: 16px; height: 16px; accent-color: var(--accent-deep); }
@media (max-width: 560px) {
  .job-rows .col-nobom { width: 70px; }
  .nobom-all { white-space: normal; font-size: 11px; line-height: 1.1; }
}

/* Per-job parts source and notes */
.job-rows .col-copy { width: 240px; }
.job-rows .col-copy select { width: 100%; }
.job-rows .col-rownotes { width: 92px; text-align: center; }
.job-rows .col-rownotes .linkbtn { font-size: 13px; white-space: nowrap; }
.job-notes-row > td { background: var(--card-2); border-top: 0; }
.job-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 4px 0 10px; }
.job-notes textarea { min-height: 62px; }
@media (max-width: 860px) {
  .job-notes { grid-template-columns: 1fr; }
  .job-rows .col-copy { width: 170px; }
}

/* Click-to-change expected ship date (staff) */
.ship-date { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.date-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1.5px dashed var(--rule-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.3s;
}
.date-edit svg { width: 13px; height: 13px; color: var(--ink-3); opacity: 0.6; transition: opacity 0.15s; }
.date-edit:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.date-edit:hover svg { opacity: 1; color: var(--accent-deep); }
.date-edit.is-saved { background: var(--ok-soft); border-bottom-color: var(--ok); }
.date-edit__input { width: auto; min-width: 150px; padding: 5px 8px; font-size: 15px; }
.meta dd .date-edit { font-size: 18px; font-weight: 600; }
.due-slot:empty { display: none; }

/* Sortable jobs list headers */
.sort-row th { white-space: nowrap; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border-bottom: 1.5px solid transparent; }
.sort-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.sort-link.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.sort-arrow { font-size: 10px; color: var(--accent-deep); min-width: 8px; }
.sort-sep { margin: 0 6px; color: var(--muted); }
.table th.num .sort-link { flex-direction: row-reverse; }
/* The phone "Sort by" menu; on wider screens the column headers do the sorting. */
.filters .sort-field { display: none; }
@media (max-width: 860px) { .filters .sort-field { display: flex; } }

/* ------------------------------------------------------------------ job files */

.files-card { overflow: hidden; }
.file-list { list-style: none; margin: 0; padding: 0; }
.file {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.file--pending { box-shadow: inset 5px 0 0 var(--warn); background: color-mix(in srgb, var(--warn-soft) 45%, transparent); }
.file--approved { box-shadow: inset 5px 0 0 var(--ok); }
.file--changes_requested { box-shadow: inset 5px 0 0 var(--bad); }
.file__badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 60px;
  border: 1.5px solid var(--ink);
  border-radius: 2px 12px 2px 2px;
  background: #fff;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.file__badge:hover { background: var(--ink); color: var(--card); }
.file__main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.file__name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; text-decoration: none; }
.file__name:hover { text-decoration: underline; }
.file__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-3); align-items: center; }
.file__desc { font-size: 14px; color: var(--ink-2); }
.file__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.approval { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.approval__who { font-size: 14px; color: var(--ink-2); }
.approval__note { flex-basis: 100%; padding: 8px 12px; background: var(--bad-soft); border-left: 4px solid var(--bad); font-size: 14px; }
.approval__actions { flex-basis: 100%; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.approval__changes > summary { list-style: none; cursor: pointer; }
.approval__changes > summary::-webkit-details-marker { display: none; }
.approval__changes[open] > summary { background: var(--ink); color: var(--card); }
.approval__changes form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: min(420px, 80vw); }
.approval__changes textarea { min-height: 80px; }
.approval__record { flex-basis: 100%; font-size: 13px; }
.approval__record summary { cursor: pointer; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); }
.approval__record dl { margin: 8px 0 0; display: grid; gap: 4px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--rule); }
.approval__record dl div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; }
.approval__record dt { color: var(--ink-3); font-weight: 600; }
.approval__record dd { margin: 0; overflow-wrap: anywhere; }
.file__edit summary { cursor: pointer; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); width: fit-content; }
.file__edit-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 520px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--rule); }
.file__edit-form .check, .upload .check { font-size: 14px; }

.upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; padding: 18px; border-top: 1.5px solid var(--ink); background: var(--card-2); }
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 16px;
  text-align: center;
  border: 2px dashed var(--rule-2);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input[type='file'] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__title { font: 700 17px/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.dropzone__hint { font-size: 13px; color: var(--ink-3); }
.dropzone__picked { font: 500 13px/1.4 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.upload__options { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.upload__options input[type='text'] { width: 100%; }
.approval-callout { text-decoration: none; }
.approval-callout:hover { color: var(--tone-ink); filter: brightness(0.98); }

@media (max-width: 860px) {
  .file { grid-template-columns: 44px minmax(0, 1fr); }
  .file__badge { width: 44px; height: 52px; font-size: 11px; }
  .file__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .upload { grid-template-columns: 1fr; }
  .approval__record dl div { grid-template-columns: 1fr; }
}

/* Artwork needed */
.tag--artwork { color: #fff; background: #7b3fc4; border-color: #7b3fc4; }
.status-bar--artwork { border-top: 1px dashed var(--rule-2); background: var(--card); }
.status-bar__label { font: 600 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); min-width: 82px; }
.artwork-owed { border-color: #7b3fc4; }
.artwork-owed .card__head { background: #ebe0f8; }
.artwork-list { list-style: none; margin: 0; padding: 0; }
.artwork-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.artwork-list li:last-child { border-bottom: 0; }
.artwork-list .btn { margin-left: auto; }

/* Per-file sharing settings in the upload form (staff) */
.upload--staff { grid-template-columns: 1fr; }
.upload--staff .dropzone { min-height: 96px; }
.upload-list { border: 1.5px solid var(--rule-2); background: #fff; }
.upload-table th, .upload-table td { padding: 8px 10px; vertical-align: middle; }
.upload-table .c { text-align: center; width: 150px; }
.upload-table td.c input { width: 20px; height: 20px; accent-color: var(--accent-deep); }
.upload-table__name { font-weight: 600; overflow-wrap: anywhere; }
.upload-table input[type='text'] { padding: 7px 10px; font-size: 14px; }
.upload--staff .upload__options { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.upload--staff .upload__shared { display: flex; flex-direction: column; gap: 10px; width: 100%; }
@media (max-width: 860px) { .upload-table .c { width: 84px; } }

.upload-table th:first-child { min-width: 200px; }
.upload-table__check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.upload-table__label { display: none; font-size: 14px; }
@media (max-width: 700px) {
  .upload-table thead { display: none; }
  .upload-table, .upload-table tbody, .upload-table tr, .upload-table td { display: block; width: 100%; }
  .upload-table tr { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .upload-table td { padding: 4px 0; border: 0; text-align: left; }
  .upload-table td.c { display: inline-block; width: auto; margin-right: 20px; }
  .upload-table__label { display: inline; }
}

.shipped-cell__pct { font-weight: 700; color: var(--warn-ink); }
.shipped-cell__pct.is-done { color: var(--ok-ink); }

/* ------------------------------------------------------- two-step verification */

.code-input { font-size: 28px; letter-spacing: 0.35em; text-align: center; padding: 12px; }
.totp-setup { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.totp-qr { width: 220px; padding: 12px; background: #fff; border: 1.5px solid var(--ink); }
.totp-qr svg { width: 100%; height: auto; display: block; }
.totp-secret { font-size: 18px; letter-spacing: 0.08em; padding: 10px 12px; background: var(--card-2); border: 1px dashed var(--rule-2); overflow-wrap: anywhere; }
.recovery-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recovery-list li { padding: 10px 12px; background: var(--card-2); border: 1px solid var(--rule); font-size: 17px; letter-spacing: 0.06em; text-align: center; }
@media (max-width: 700px) {
  .totp-setup { grid-template-columns: 1fr; justify-items: center; }
  .totp-manual { justify-self: stretch; }
  .recovery-list { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- job photos */

.photo-group { padding: 4px 18px 18px; }
.photo-group + .photo-group { border-top: 1px solid var(--rule); padding-top: 16px; }
.photo__sheet { margin-right: 8px; }
.photo__sheet .check { font-size: 12px; }
.photo__sheet .check input { width: 15px; height: 15px; margin-top: 1px; }
.photo.is-on-sheet .photo__thumb { outline: 2px solid var(--ok); outline-offset: 2px; }
.photo-group__title { font-size: 17px; letter-spacing: 0.1em; color: var(--ink-2); margin: 14px 0 12px; display: flex; gap: 10px; align-items: center; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.photo { display: flex; flex-direction: column; gap: 6px; }
.photo__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--card-2);
  border: 1.5px solid var(--ink);
  overflow: hidden;
  position: relative;
}
.photo__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s; }
.photo__thumb:hover img { transform: scale(1.04); }
.photo__noimage { display: grid; place-items: center; height: 100%; font: 700 15px/1 var(--font-mono); color: var(--ink-3); }
.photo__meta { display: flex; flex-direction: column; gap: 3px; }
.photo__caption { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.photo__tags { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.upload--photos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1.5px solid var(--ink); }
.seg__radio { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 6px; font: 600 13px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; background: var(--card); border-right: 1.5px solid var(--ink); cursor: pointer; }
.seg__radio:last-child { border-right: 0; }
.seg__radio:has(input:checked) { background: var(--ink); color: var(--card); }
.seg__radio input { accent-color: var(--accent); }
@media (max-width: 700px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .upload--photos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- ship-to / company */

.ship-to {
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--card-2);
  border: 1.5px solid var(--rule-2);
  border-left: 8px solid var(--over);
}
.ship-to__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ship-to__head h2 { margin: 0; font-size: 1.05rem; }
.ship-to__address { display: flex; flex-direction: column; margin: 8px 0 6px; font-style: normal; font-weight: 600; }
.ship-to__notes { border-top: 1px dashed var(--rule-2); padding-top: 8px; margin-top: 8px; }
.upload__options.form-grid { display: grid; gap: 14px 18px; }

/* --------------------------------------------------------- 4" x 3" label */

.label43 {
  box-sizing: border-box;
  width: 4in;
  height: 3in;
  padding: 0.12in 0.14in;
  background: #fff;
  color: #000;
  font-family: 'Barlow', Calibri, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.label43__top { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 8px; }
.label43__qty { font-size: 15px; font-weight: 700; white-space: nowrap; }
.label43__date { font-size: 20px; }
.label43__code { font-size: 17px; font-weight: 600; white-space: nowrap; min-width: 34px; text-align: right; }
.label43__name { margin-top: 2px; font-size: 30px; font-weight: 600; line-height: 1.05; word-break: break-word; }
.label43__name.is-long { font-size: 24px; }
.label43__name.is-longer { font-size: 19px; }
.label43__rev { font-size: 19px; font-weight: 600; line-height: 1.1; }
.label43__dims { font-size: 14px; line-height: 1.2; }
/* The barcode block runs the full width of the label, with a heavy rule above and below it. */
.label43__bars {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: stretch;      /* the bars run right up to the rules, top and bottom */
  justify-content: center;
  width: calc(100% + 0.28in);
  margin: 5px -0.14in 3px;
  padding: 0 0.1in;          /* sides only: a quiet zone for the scanner */
  min-height: 0;
  border-top: 3.5px solid #000;
  border-bottom: 3.5px solid #000;
}
.label43__bars svg { display: block; width: 100%; height: 100%; }
.label43__nobar { font-size: 12px; color: #666; }
.label43__digits { font-size: 24px; letter-spacing: 0.06em; line-height: 1; }

/* On the job page the label sits in a frame, actual size. */
.label-frame { display: inline-block; border: 1.5px solid var(--rule-2); box-shadow: var(--shadow); background: #fff; }
.label-preview { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.label-preview__side { flex: 1 1 260px; min-width: 240px; }
/* 4in is wider than a phone, so the preview scrolls sideways rather than squashing. */
.label-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }

@media print {
  @page { size: 4in 3in; margin: 0; }
  body.label-page { background: #fff; }
  body.label-page .topbar, body.label-page .foot, body.label-page .crumbs, body.label-page .preview-bar { display: none !important; }
  body.label-page .medium { margin: 0; padding: 0; max-width: none; }
  body.label-page .label-scroll, body.label-page .label-frame { overflow: visible; border: 0; box-shadow: none; margin: 0; }
  body.label-page .label43 { border: 0; page-break-after: always; }
  body.label-page .label43, body.label-page .label43__bars { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.label43__bars.is-stale { opacity: 0.35; }
.label43__bars.is-stale::after { content: 'save to redraw'; position: absolute; font-size: 11px; color: var(--bad); }
.label43__bars { position: relative; }

/* ------------------------------------------------------------ info sheet */

.sheet {
  box-sizing: border-box;
  max-width: 8.5in;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: #000;
  border: 1.5px solid var(--rule-2);
  font-family: 'Barlow', Calibri, Arial, sans-serif;
}
.sheet__head {
  position: relative;
  padding: 8px 118px;
  background: #8e8b55;
  color: #000;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
}
.sheet__head-qty {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sheet__head-qty b { font-size: 21px; }
.sheet__rule { height: 10px; background: #000; }
.sheet__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px; padding: 10px; align-items: start; }
.sheet__box { border: 3px solid #000; }
.sheet__box--wide { margin: 0 10px 10px; }
.sheet__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sheet__table th, .sheet__table td { border: 1px solid #000; padding: 3px 6px; text-align: left; vertical-align: top; }
.sheet__table th { background: #fff; font-weight: 700; text-align: center; }
.sheet__table th.sheet__qty, .sheet__table td.sheet__qty { width: 52px; text-align: center; }
.sheet__sub { display: block; font-weight: 400; font-size: 10px; text-transform: lowercase; letter-spacing: 0; }
.sheet__owed { font-weight: 700; }
.sheet__item { width: 20%; }
.sheet__vendor { width: 14%; }
.sheet__product { width: 14%; }
.sheet__desc { color: #444; }
.sheet__empty { text-align: center; color: #666; font-style: italic; }
.sheet__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet__photo { margin: 0; }
.sheet__photo img { display: block; width: 100%; height: 2.6in; object-fit: cover; border: 1px solid #000; }
.sheet__photo figcaption { font-size: 11px; padding-top: 2px; }
.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 6px 12px 10px;
  font-size: 12px;
  border-top: 1px solid var(--rule-2);
}
.sheet__printed { margin-left: auto; color: #555; }

@media screen and (max-width: 760px) {
  .sheet__top { grid-template-columns: minmax(0, 1fr); }
  .sheet__photo img { height: 2in; }
}

@media print {
  @page { size: letter portrait; margin: 0.35in; }
  body.sheet-page { background: #fff; }
  body.sheet-page .topbar, body.sheet-page .foot, body.sheet-page .crumbs, body.sheet-page .preview-bar { display: none !important; }
  body.sheet-page .page { padding: 0; max-width: none; }
  /* The paper should match the screen: same sizes, same colours (printers drop backgrounds unless told). */
  .sheet { max-width: none; width: 100%; }
  .sheet, .sheet__head, .sheet__rule, .sheet__box, .sheet__table, .sheet__table th, .sheet__photo img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Long BOMs run onto another page: keep rows and photos whole, and repeat the headings. */
  .sheet__table tr, .sheet__photo { break-inside: avoid; }
  .sheet__table thead { display: table-header-group; }
  .sheet__head, .sheet__rule { break-after: avoid; }
}
.photo-grid--receipt { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); padding: 12px 16px 0; }
.photo-grid--receipt .photo__thumb { height: 110px; }
.dropzone--slim { min-height: 92px; }

/* Foldable job sections: the button sits top right of the heading, whatever else is in there. */
section[data-collapsible] > .section-head { position: relative; padding-right: 40px; }
.section-fold {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--rule-2);
  background: var(--card);
  cursor: pointer;
}
.section-fold::before,
.section-fold::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}
.section-fold::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.section-fold:hover { border-color: var(--accent); }
.is-folded .section-fold::after { opacity: 1; }
.is-folded .section-head { margin-bottom: 0; }
@media print {
  /* Folding is a screen convenience: everything still prints. */
  .section-fold { display: none !important; }
  .is-folded .section-body[hidden] { display: block !important; }
}
.alerts { margin-bottom: 18px; }
.alerts__body { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.dropzone--slim { border-style: dashed; background: var(--card-2); }
.dropzone__opt { font: 400 12px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* Direct messages */
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.people-list a { display: block; padding: 8px 10px; border: 1.5px solid var(--rule-2); background: var(--card); text-decoration: none; }
.people-list a:hover { border-color: var(--accent); }
.dm { display: grid; gap: 14px; max-height: 60vh; overflow-y: auto; }
.dm__msg { max-width: 80%; padding: 10px 14px; border: 1.5px solid var(--rule-2); background: var(--card); }
.dm__msg--mine { margin-left: auto; background: var(--card-2); border-color: var(--ink-3); }
.dm__who { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.dm__read { color: var(--ok); font-weight: 600; }
.alert-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
}
.alert-bar span { flex: 1 1 260px; }
.order-table .col-ord { width: 104px; }
.order-table .col-qty { width: 108px; }
.order-table .col-date { width: 150px; }
.order-table .col-date input, .order-table .col-qty input { width: 100%; }
.order-table .hint { display: block; margin-top: 2px; }
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: var(--accent-deep); }
.th-sort.is-sorted::after { content: ' ▲'; font-size: 10px; }
.th-sort.is-sorted[data-dir='desc']::after { content: ' ▼'; }

/* Job money (admins only) */
.money-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.money-sum { margin: 0; font-size: 14px; line-height: 1.5; }

/* Label printer card */
.zebra { margin-bottom: 18px; }
.zebra__row { display: flex; gap: 18px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.zebra__setup { margin-top: 12px; border-top: 1px dashed var(--rule-2); padding-top: 10px; }
.zebra__setup summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }

/* --------------------------------------------------------------- freight */

.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.skid-add { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 12px; align-items: end; }
.skid-add .field--qty { min-width: 90px; }
.pick-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pick-row select { flex: 1 1 220px; }
.party { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px 4px; }
.party legend { padding: 0 6px; font: 600 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.zebra__copies { display: flex; gap: 10px; align-items: end; }
.label-run { margin: 26px 0; }
.label-run__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.label-run__head h2 { margin: 0; font-size: 16px; }

@media (max-width: 700px) {
  .skid-add { grid-template-columns: minmax(0, 1fr); }
}

/* Bill of lading and packing slip: the same paper look as the info sheet. */
.bol { padding: 14px 16px 18px; font-size: 11.5px; }
.bol__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; border-bottom: 2px solid #000; padding-bottom: 8px; }
.bol__title { margin: 0; font-size: 22px; letter-spacing: 0.02em; }
.bol__sub { font-size: 10px; color: #444; margin-top: 2px; }
.bol__refs { border-collapse: collapse; font-size: 11px; }
.bol__refs th { text-align: left; padding: 1px 10px 1px 0; color: #444; font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; }
.bol__refs td { padding: 1px 0; font-weight: 600; }
.bol__parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 10px 0; border-bottom: 1px solid #000; }
.bol__parties--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bol__party h3 { margin: 0 0 4px; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #444; }
.bol__party div { line-height: 1.35; }
.bol__small { font-size: 10px; color: #444; margin-top: 3px; }
.bol__missing { color: #a00; font-style: italic; }
.bol__strip { padding: 6px 0; border-bottom: 1px solid #000; font-size: 11px; }
.bol__strip-sep { margin: 0 8px; color: #888; }
.bol__table { margin-top: 10px; }
.bol__table th { font-size: 10px; }
.bol__totals td { font-weight: 700; background: #f2f2f2; }
.bol__skid-table { margin-top: 12px; }
.bol__skid-head { background: #000; color: #fff; text-align: left; font-size: 11px; letter-spacing: 0.04em; }
.bol__box { margin-top: 10px; border: 1px solid #000; padding: 6px 8px; }
.bol__box h3 { margin: 0 0 3px; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #444; }
.bol__box p { margin: 0; }
.bol__terms p { font-size: 9px; color: #333; line-height: 1.35; }
.bol__signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.bol__sign span { display: block; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #444; }
.bol__rule { height: 1px; background: #000; margin: 20px 0 3px; }

/* The skid label, at print size. Matches freightLabelZpl(). */
.flabel {
  box-sizing: border-box;
  width: 4in; height: 3in;
  padding: 0.14in;
  background: #fff; color: #000;
  border: 1px solid var(--rule-2);
  font-family: 'Barlow', Calibri, Arial, sans-serif;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.flabel__top { display: flex; justify-content: space-between; align-items: baseline; }
.flabel__tag { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; }
.flabel__skid { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.flabel__from { font-size: 10px; line-height: 1.25; margin-top: 2px; }
.flabel__rule { height: 2px; background: #000; margin: 5px 0; }
.flabel__to { font-weight: 700; line-height: 1.2; margin-top: 2px; }
.flabel__to--lg { font-size: 18px; }
.flabel__to--md { font-size: 16px; }
.flabel__to--sm { font-size: 13px; }
.flabel__ref { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.flabel__bars { flex: 1; min-height: 0.5in; margin-top: 3px; }
.flabel__bars svg { width: 100%; height: 100%; display: block; }
.flabel__pro { text-align: center; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.flabel__nopro { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }

@media print {
  body.label-page .label-run { page-break-inside: avoid; }
  body.label-page .flabel { border: 0; page-break-after: always; }
}
.bol__copy { float: right; margin: -4px 0 0 10px; font: 600 9px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #666; }
@media print {
  /* Each sheet in the print set starts its own page; the last one must not add a blank one. */
  body.sheet-page .sheet { page-break-after: always; }
  body.sheet-page .sheet:last-of-type { page-break-after: auto; }
}

/* The bill of lading is a form, so it fills the sheet: the commodity grid stretches to the
   foot of the page and the signatures sit on the bottom edge, the way a printed BOL does. */
.bol { display: flex; flex-direction: column; box-sizing: border-box; min-height: 10.4in; }
.bol__grid { flex: 1 1 auto; display: flex; min-height: 3in; }
.bol__grid > .bol__table { width: 100%; height: 100%; }
.bol__table tr { height: 1px; }            /* content rows stay their own height... */
.bol__table tr.bol__fill { height: auto; } /* ...so the blank one absorbs what is left */
.bol__fill td { border-top: 1px solid #000; }
.bol__foot { flex: 0 0 auto; }
.bol__signs { margin-top: 14px; }

/* A nav item that opens a short list: the admin pages live behind one "Settings" entry. */
/* A flex row of its own, so the summary stretches to the same height as the plain nav links
   beside it instead of sitting at its natural height near the top. */
.navmenu { position: relative; display: flex; }
.navmenu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 20px 12px 18px;
  color: var(--on-dark-2);
  font: 600 15px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.navmenu > summary:hover, .navmenu[open] > summary { color: #fff; }
.navmenu.is-active > summary { color: #fff; }
.navmenu.is-active > summary::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -4px;
  height: 4px;
  background: #fff;
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.12s ease;
}
.navmenu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.navmenu__panel {
  /* Fixed, and placed as it opens: the nav bar scrolls sideways, and anything positioned
     against it would be clipped away by that overflow instead of dropping down. */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  background: var(--card);
  border: 1.5px solid var(--rule-2);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.navmenu__panel a {
  display: block;
  padding: 9px 10px;
  font: 500 15px/1.2 var(--font-body);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.navmenu__panel a:hover { background: var(--paper); }
.navmenu__panel a.is-current { font-weight: 700; }

/* The saved delivery address, shown under the picker that chose it. */
.address-card {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.4;
}

/* Room to breathe between the sections of a bill of lading: the load, the details, the filing.
   Not keyed on adjacency — a hidden form between two sections would quietly cancel it. */
.stack { margin-top: 42px; }
.stack .section-head { margin-bottom: 14px; }

/* Asking PITT OHIO for a truck: day, times and instructions on one line. */
.pickup-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-top: 10px; }
.pickup-form__wide { grid-column: 1 / -1; }
@media (max-width: 800px) { .pickup-form { grid-template-columns: minmax(0, 1fr); } }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 18px 0 14px; }

/* A nav menu whose label is itself a link (Jobs): the text navigates, the caret expands.
   The padding has to be taken back off — .nav a would otherwise apply it a second time inside
   a summary that already has it, making this one menu taller than everything beside it. */
.navmenu > summary > a {
  display: inline;
  padding: 0;
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
}
.navmenu > summary > a:hover { color: #fff; }
.navmenu__panel .badge { margin-left: 6px; }

/* ------------------------------------------------ job section bar */
/* A job page is a long scroll; this puts every section one click away and sticks under the
   top bar as you go. It scrolls sideways on a phone rather than wrapping into a block. */
.jobnav {
  position: sticky;
  /* Directly under the site bar. Its height is measured at runtime into --topbar-h, because
     it changes with the window: a guessed number leaves this bar hidden behind it. */
  top: var(--topbar-h, 62px);
  z-index: 15;
  display: flex;
  gap: 2px;
  margin: 0 0 22px;
  /* Full-bleed within the page gutter, so the bar reads as a bar and not a boxed row. */
  padding: 6px var(--page-pad);
  margin-inline: calc(var(--page-pad) * -1);
  background: var(--paper);
  border-bottom: 1.5px solid var(--rule-2);
  box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.5);
  overflow-x: auto;
  scrollbar-width: none;
}
.jobnav::-webkit-scrollbar { display: none; }
.jobnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
  font: 600 13px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.jobnav a:hover { color: var(--ink); background: var(--card); }
.jobnav a.is-current { color: var(--ink); border-bottom-color: var(--accent); }
.jobnav .count { font-size: 11px; }
/* Jumping to a section must not tuck its heading under the two sticky bars. */
.section[id], .job-grid[id] { scroll-margin-top: calc(var(--topbar-h, 62px) + 62px); }

/* Landing on a section from a redirect must clear the sticky bar above it. */
.stack[id] { scroll-margin-top: calc(var(--topbar-h, 62px) + 16px); }

/* PITT OHIO's own account of where a load has got to. */
.trace__history { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.trace__history li { margin: 2px 0; }
.trace__when { color: var(--muted); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.pro-form { display: grid; grid-template-columns: minmax(0, 220px) auto; gap: 12px; align-items: end; }
.pro-form__note { grid-column: 1 / -1; margin: 0; }

/* The 4" x 4" inventory barcode, at print size. Matches inventoryLabelZpl(). */
.ilabel {
  box-sizing: border-box;
  width: 4in; height: 4in;
  display: grid;
  grid-template-columns: 2.62in 1.38in;
  grid-template-rows: 0.97in 0.93in 0.93in 1.17in;
  background: #fff; color: #000;
  border: 1px solid var(--rule-2);
  font-family: 'Barlow', Calibri, Arial, sans-serif;
  overflow: hidden;
}
.ilabel__cell {
  box-sizing: border-box;
  border: 1.5px solid #000;
  margin: -0.75px;                 /* rules meet rather than doubling up */
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.ilabel__qty, .ilabel__from { grid-column: 1; }
.ilabel__po, .ilabel__lot { grid-column: 2; }
/* Rows 2 and 3 split further left than rows 1 and 4, the way the sample does. */
.ilabel__qty, .ilabel__from { margin-right: calc(-0.75px + 0.47in); }
.ilabel__po, .ilabel__lot { margin-left: calc(-0.75px - 0.47in); }
.ilabel__head { text-align: center; font-size: 13px; font-weight: 600; line-height: 1.1; }
.ilabel__name { text-align: center; font-size: 15px; font-weight: 600; line-height: 1.1; }
.ilabel__value { text-align: center; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.ilabel__bars { flex: 1; min-height: 0.34in; margin: 3px 0; }
.ilabel__bars svg { width: 100%; height: 100%; display: block; }
.ilabel__from, .ilabel__to { justify-content: center; font-size: 12px; line-height: 1.3; }
.ilabel__to { font-size: 11px; text-align: center; }

@media print {
  body.label-page .ilabel { border: 0; page-break-after: always; }
}
.ilabel__nobar { text-align: center; font-size: 9px; color: #a00; font-style: italic; }

/* The pickup form, pointed at once the paperwork and labels have gone out. */
.pickup-form.is-next {
  outline: 3px solid var(--accent);
  outline-offset: 10px;
  border-radius: 3px;
  animation: pickup-next 2.4s ease-out;
}
@keyframes pickup-next {
  0%, 60% { outline-color: var(--accent); }
  100% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pickup-form.is-next { animation: none; }
}

/* Printing the whole shipment: the last thing you do on the page. */
.printing { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.printing__note { flex-basis: 100%; margin: 0; }
.btn--lg { padding: 14px 24px 13px; font-size: 16px; }

/* What the shipping notification will say, and to whom. */
.notice-box {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
.notice-box p { margin: 0; }
.notice-box.is-ready { border-left-color: var(--ok); }
.po-note { display: block; width: 100%; }
.po-note input { width: 100%; }

/* Ship a job: the two ways out of the building, side by side. */
.ship-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
/* Side by side, so the general "a card after a card is stacked below it" rule does not
   push the second one down by 26px and leave the pair looking misaligned. */
.ship-ways .card + .card { margin-top: 0; }
.ship-way { display: flex; flex-direction: column; }
.ship-way .card__body { flex: 1; }
@media (max-width: 820px) { .ship-ways { grid-template-columns: 1fr; } }

/* The acknowledgement after paperwork prints. It has to be dismissed on purpose, because it
   is the one moment that says whether the customer was told. */
.ack {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--card);
  color: var(--ink);
  padding: 22px 24px;
  max-width: 520px;
  width: calc(100vw - 32px);
}
.ack::backdrop { background: rgba(0, 0, 0, 0.45); }
.ack h2 { margin: 0 0 12px; font-size: 20px; }
.ack__line, .ack__mail { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.ack__mail { font-weight: 600; }
.ack__row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* A field that the current choice has made irrelevant: still readable, clearly not in play. */
.field.is-muted { opacity: 0.45; }
.field.is-muted input { pointer-events: none; }