/*
 * app.css - Sea Pro Tools application layer on top of the Industry token
 * sheet (styles.css). Every value here consumes the tokens; the only
 * addition to the mono palette is the functional brick red for
 * missing / not-pulled / destructive states (per the design handoff).
 */

:root {
  --color-brick: #a65959;
  /* Alarm red: louder than brick, for a warning that must not be missed
     (stock only in a non-nettable bin, nothing on order). */
  --color-alarm: #c0392b;
  /* Back-in-stock amber. One definition, because the Hot Board's IN
     STOCK rows and the queue's restocked cards have to be the same
     yellow - the whole point is that they read as the same state. */
  --color-amber: #fdf3c4;
  --color-amber-soft: #fffbe8;
  --color-amber-ink: #7a5c00;
}

@keyframes segpulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes vizwave { 0%, 100% { height: 12px } 45% { height: 40px } }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-neutral-200);
  display: flex;
  flex-direction: column;
}
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }

.hidden { display: none !important; }

/* ══ app chrome: header bar with brand lockup + numbered tab strip ══ */

.chrome {
  display: flex;
  align-items: stretch;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 5;
}
.chrome-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  flex: 0 0 auto;
}
.chrome-brand img { height: 19px; }
.chrome-brand .rule { width: 1px; height: 34px; background: var(--color-divider); }
.chrome-kicker {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
/* Plant picker (2026-10-16): the kicker is a button. */
.chrome-brand > div { position: relative; }
.plant-pick {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 2px 4px; margin: -2px -4px;
  border-radius: 4px; cursor: pointer;
}
.plant-pick:hover, .plant-pick[aria-expanded="true"] { background: var(--color-neutral-100); }
.plant-pick:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.plant-caret { font-size: 10px; letter-spacing: 0; }
.plant-pick.only { cursor: default; }
.plant-pick.only:hover { background: none; }
.plant-pick.only .plant-caret { display: none; }
.plant-pick:disabled { color: inherit; opacity: 1; }
.plant-menu {
  position: absolute; top: calc(100% + 6px); left: -4px; z-index: 20;
  min-width: 190px; padding: 4px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.plant-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: none; border-radius: 4px;
  font-family: var(--font-heading); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-700); cursor: pointer; text-align: left;
}
.plant-item:hover, .plant-item:focus-visible { background: var(--color-neutral-100); outline: none; }
.plant-item.on { color: var(--color-accent-700); }
.plant-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex: 0 0 auto; }
.plant-item.on .plant-dot { background: currentColor; }
.chrome-app {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tabs {
  display: flex;
  align-items: stretch;
  margin-left: 16px;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
}
.tab {
  appearance: none;
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--color-divider);
  border-bottom: 2px solid transparent;
  padding: 0 16px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  display: flex;
  align-items: center;
  gap: 9px;
}
.tab:hover { background: var(--color-neutral-100); }
.tab .num { font-size: 10px; opacity: .6; }
.tab.selected {
  background: var(--color-bg);
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-700);
}

.chrome-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  flex: 0 0 auto;
  border-left: 1px solid var(--color-divider);
  cursor: pointer;
}
.chrome-user .who { text-align: right; line-height: 1.25; white-space: nowrap; }
.chrome-user .who .name { font-size: 13px; font-weight: 500; }
.chrome-user .who .how { font-size: 11px; color: var(--color-neutral-600); }
.chrome-user .initials {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--color-divider);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--color-accent-700);
}

/* phone: brand + user on the first row, the five tabs on their own
   full-width row underneath (never squeezed out of reach) */
@media (max-width: 760px) {
  .chrome { flex-wrap: wrap; }
  .chrome-brand { flex: 1 1 auto; padding: 10px 12px; }
  .chrome-user { border-left: 0; padding: 0 12px; }
  /* keep the "Tap to sign out" hint on phones; drop just the name */
  .chrome-user .who .name { display: none; }
  .tabs {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    border-top: 1px solid var(--color-divider);
  }
  .tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 8px;
    font-size: 12px;
    letter-spacing: .06em;
  }
  .tab .num { display: none; }
}

/* ══ stage: the tab panels ══ */

.stage {
  flex: 1;
  padding: 26px 20px 60px;
}
.panel {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
@media (min-width: 1740px) {
  /* wall TV */
  .panel { max-width: 1680px; }
}
@media (max-width: 640px) {
  .stage { padding: 10px 6px 40px; }
}

.screen { padding: 22px; }
@media (max-width: 640px) { .screen { padding: 14px; } }

/* screen header row: kicker + title left, context right */
.screen-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.screen-head .kicker {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.screen-head h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.screen-head .context { text-align: right; }
.screen-head .context .clock {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.screen-head .context .source { font-size: 12px; color: var(--color-neutral-600); }

/* uppercase micro-label used all over the design */
.microlabel {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* ══ login (PIN, same accounts as the shop apps) ══ */

.login-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--color-neutral-200);
  z-index: 50;
}
.login-card {
  width: min(360px, 100%);
  background: var(--color-bg);
  padding: 27px 24px;
}
.login-card img { height: 22px; margin-bottom: 6px; }
.login-card .app-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 21px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.login-card .field { margin-bottom: 12px; }
.login-error {
  color: var(--color-brick);
  font-size: 13px;
  margin-top: 10px;
}

/* status text shown while a tab is not built yet (build phases) */
.stub {
  padding: 40px 22px;
  text-align: center;
  color: var(--color-neutral-600);
}
.stub .microlabel { display: block; margin-bottom: 8px; }

/* ══ 01 Plant Health ══ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } }

.kpi {
  padding: 16px;
  min-width: 0;
}
.kpi .row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.kpi .value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 62px;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.kpi .of {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}
.kpi .delta { margin-left: auto; font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.kpi .delta.behind { color: var(--color-brick); }
.kpi .delta.ok { color: var(--color-accent-700); }
.kpi .delta.big .num {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 44px;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.kpi .delta .money { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .bar { height: 12px; background: var(--color-neutral-300); margin-top: 12px; }
.kpi .bar > i { display: block; height: 100%; background: var(--color-accent-700); }
.kpi .foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--color-neutral-600);
}
.kpi .foot .pct { font-variant-numeric: tabular-nums; }
.kpi .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi .plan-toggle,
.bb-catchup-line .plan-toggle {
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--color-neutral-400);
  background: transparent;
  color: var(--color-neutral-600);
  cursor: pointer;
  white-space: nowrap;
}
.kpi .plan-toggle:hover,
.bb-catchup-line .plan-toggle:hover { color: inherit; border-color: currentColor; }

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 22px;
  align-items: start;
  margin-top: 22px;
}
@media (max-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.section-head h4 {
  margin: 0;
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.section-head .note { font-size: 11px; color: var(--color-neutral-600); }

.nextup-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--color-divider);
  min-width: 0;
}
.nextup-row .rank {
  flex: 0 0 34px;
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
  text-align: center;
  color: var(--color-accent-400);
}
.nextup-row .boat { flex: 0 0 168px; min-width: 0; }
.nextup-row .boat .hull {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.nextup-row .boat .who {
  font-size: 11px;
  color: var(--color-neutral-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nextup-row .where { flex: 1 1 auto; min-width: 120px; }
.nextup-row .where .at { font-size: 13px; color: var(--color-accent-700); font-weight: 500; }
.nextup-row .where .left { font-size: 11px; color: var(--color-neutral-600); }
.nextup-row .where .bar { height: 10px; background: var(--color-neutral-300); margin-top: 6px; }
.nextup-row .where .bar > i { display: block; height: 100%; background: var(--color-accent-700); }
.nextup-row .pct {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (max-width: 640px) {
  .nextup-row { flex-wrap: wrap; }
  .nextup-row .boat { flex: 1 1 auto; }
  .nextup-row .where { flex: 1 1 100%; order: 3; }
}

/* Next up by area: three columns, % = sub-stations complete */
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1100px) { .area-grid { grid-template-columns: 1fr; } }
.area-col .area-head {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-divider);
}
.area-col .empty { font-size: 12px; color: var(--color-neutral-600); padding: 8px 0; }
.area-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--color-divider);
  min-width: 0;
}
.area-row:first-of-type { border-top: 0; }
.area-row .rank {
  flex: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 16px;
  text-align: center;
  color: var(--color-accent-400);
}
.area-row .hull {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.area-row .meter { flex: 1 1 auto; min-width: 50px; }
.area-row .meter .left { font-size: 10px; color: var(--color-neutral-600); white-space: nowrap; }
.area-row .meter .bar { height: 8px; background: var(--color-neutral-300); margin-top: 3px; }
.area-row .meter .bar > i { display: block; height: 100%; background: var(--color-accent-700); }
.area-row .pct {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pace-grid {
  display: grid;
  /* Mon-Fri + last week */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.pace-cell { text-align: center; }
.pace-cell .count {
  font-family: var(--font-heading);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.pace-cell .track {
  height: 74px;
  background: var(--color-neutral-200);
  border: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 4px 0;
}
.pace-cell .track > i { display: block; background: var(--color-accent-700); }
.pace-cell .day { font-size: 12px; }
.pace-cell .goal { font-size: 11px; color: var(--color-neutral-600); }
.pace-cell.today .day { color: var(--color-accent-700); font-weight: 700; }
/* A day with no target - overtime Friday, or a shutdown that still
   produced. The boats are real, so the bar is drawn; the lighter fill
   says they weren't planned. */
.pace-cell.nogoal .track > i { background: var(--color-accent-400); }
.pace-cell.nogoal .goal { font-style: italic; }

/* awaiting shipment: the accent-900 field, type reversed to paper */
.awaiting {
  background: var(--color-accent-900);
  color: var(--color-bg);
  padding: 16px;
}
.awaiting .section-head h4 { color: var(--color-bg); }
.awaiting .sub { font-size: 11px; color: var(--color-accent-300); margin-bottom: 8px; }
.awaiting .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
  font-size: 13px;
}
.awaiting .row .hull { font-weight: 700; font-variant-numeric: tabular-nums; }
.awaiting .row .when { color: var(--color-accent-300); }
.awaiting .row.late .days { color: #e0b0b0; font-weight: 600; }
/* a special boat's yellow row on this dark field: back to dark ink, or the
   paper-coloured type disappears into the yellow */
.awaiting .row.special-boat { border-top-color: transparent; }
.awaiting .row.special-boat .hull { color: var(--color-accent-900); }
.awaiting .row.special-boat .when { color: var(--color-accent-800); }
.awaiting .row.special-boat .days { color: var(--color-accent-900); }
.awaiting .row.special-boat.late .days { color: var(--color-brick); font-weight: 700; }
.awaiting .row.special-boat + .row { border-top-color: transparent; }
.awaiting .empty { font-size: 13px; color: var(--color-accent-300); padding: 8px 0; }

.counters { padding: 16px; margin-top: 22px; }
.counters .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}
.counters .row:first-of-type { border-top: 0; }
.counters .row .n {
  font-family: var(--font-heading);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.counters .row.brick .n, .counters .row.brick .k { color: var(--color-brick); }

/* connection loss: inline note, board keeps last good data */
.offline-note {
  font-size: 12px;
  color: var(--color-brick);
  padding: 6px 0;
}

/* ══ 02 Scanner ══ */

.scan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .scan-grid { grid-template-columns: minmax(0, 1fr); } }

.scan-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  appearance: none;
  cursor: pointer;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  padding: 22px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.scan-button:hover { background: var(--color-accent-600); }
.scan-button:active { background: var(--color-accent-700); }
.scan-button svg { width: 30px; height: 30px; }
.scan-caption {
  text-align: center;
  font-size: 12px;
  color: var(--color-neutral-600);
  margin: 8px 0 0;
}

/* expanders (manual entry / log leftover part) - collapsed by default */
.expander { margin-top: 14px; border: 1px solid var(--color-divider); }
.expander > .exp-head {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text);
}
.expander > .exp-head:hover { background: var(--color-neutral-100); }
.expander > .exp-head .caret { font-size: 11px; color: var(--color-neutral-600); }
.expander > .exp-body { padding: 0 14px 14px; }
.expander .field { margin-bottom: 10px; }
.expander .button-row { display: flex; gap: 8px; margin-top: 4px; }
.expander .button-row .btn { flex: 1; }

/* manual entry status line - "where is this boat right now" */
.man-status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: -2px 0 10px;
  padding: 8px 10px;
  background: var(--color-neutral-100);
  border-left: 3px solid var(--color-neutral-400);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-neutral-700);
}
.man-status strong { color: var(--color-text); }
.man-dot {
  flex: none;
  width: 7px;
  height: 7px;
  align-self: center;
  background: var(--color-neutral-400);
}
.man-dot.in { background: var(--color-accent); }
.man-dot.done { background: var(--color-neutral-600); }
/* a typed hull nobody has heard of - the one state that stops a scan */
.man-dot.bad { background: var(--color-brick); }
.man-status.bad { border-left-color: var(--color-brick); }
.man-status.bad strong { color: var(--color-brick); }
/* the label came off the printer - the good end of the same line */
.man-status.good { border-left-color: var(--color-accent); }

/* END is the outlined brick action */
.btn-brick {
  border-color: var(--color-brick);
  color: var(--color-brick);
}
.btn-brick:hover { background: color-mix(in srgb, var(--color-brick) 10%, transparent); }
.btn-brick:active { background: color-mix(in srgb, var(--color-brick) 18%, transparent); }

/* READY is the outlined amber action (staged, not started) */
.btn-ready {
  border-color: #b45309;
  color: #b45309;
}
.btn-ready:hover { background: color-mix(in srgb, #b45309 10%, transparent); }
.btn-ready:active { background: color-mix(in srgb, #b45309 18%, transparent); }

/* result banner */
.result {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent-700);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.result.err { border-left-color: var(--color-brick); }
.result .result-icon {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1;
  color: var(--color-accent-700);
}
.result.err .result-icon { color: var(--color-brick); }
.result .result-msg { font-size: 15px; font-weight: 700; }
.result .result-notes { font-size: 12px; color: var(--color-neutral-600); margin: 2px 0 0; }

/* confirm card */
.confirm { border: 1px solid var(--color-divider); padding: 14px; margin-top: 14px; }
.confirm .confirm-big {
  font-family: var(--font-heading);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}
.confirm .confirm-sub { font-size: 13px; color: var(--color-neutral-600); margin: 2px 0 10px; }
.confirm .button-row { display: flex; gap: 8px; }
.confirm .button-row .btn { flex: 1; }
/* Gel Coat's optional "Which mold?" - big tap targets, the likely one first. */
.lam-sprays { font-size: 12px; margin-top: 2px; }
/* 17 Quality: a question's pictures, under it on the sheet and in the editor */
.qa-ipics { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; align-items: flex-end; }
.qa-ipic { padding: 0; border: 1px solid var(--color-divider); background: #fff; cursor: zoom-in; line-height: 0; }
.qa-ipic img { display: block; height: 96px; max-width: 160px; object-fit: contain; }
.qe-ipic { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.qa-lightbox .qa-sheet img[data-qa-ipic] { width: 100%; max-height: 75vh; object-fit: contain; background: #fff; }

/* 17 Quality > QA Alerts */
.qal-push { margin: 4px 0 8px; }
.qal-list { display: flex; flex-direction: column; gap: 6px; }
.qal-row { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: 1px solid var(--color-divider); padding: 10px 12px; color: inherit; font: inherit; cursor: pointer; }
.qal-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.qal-row.mine { border-left: 4px solid var(--color-brick); }
.qal-row-title { font-weight: 700; }
.qal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qa-chip.qal-open { background: var(--color-brick); color: #fff; }
.qa-chip.qal-live { background: color-mix(in srgb, var(--color-brick) 14%, transparent); color: var(--color-text); }
.qal-late { color: var(--color-brick); }
.qal-from { border-left: 4px solid var(--color-divider); padding: 4px 10px; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 2px; }
.qal-form { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.qal-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; }
.qal-form .adm-dim { font-weight: 400; }
.qal-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qal-two.hidden { display: none; }
.qal-models { border: 1px solid var(--color-divider); padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.qal-models legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.qal-form label.qal-check { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin-right: 12px; font-weight: 400; min-height: 28px; }
.qal-form label.qal-all { font-weight: 700; }
.qal-off { opacity: 0.45; }
.qal-form label.qal-pick { position: relative; display: block; width: 84px; }
.qal-pick img { width: 84px; height: 84px; object-fit: cover; display: block; border: 1px solid var(--color-divider); }
.qal-pick input { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; }
.qal-actions { display: flex; gap: 8px; }
.qal-check-box { border: 2px solid var(--color-text); padding: 8px 12px; margin-bottom: 10px; font-size: 16px; }
.qal-check-es { margin-bottom: 10px; }
.qal-good { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.qal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin-bottom: 12px; }
.qal-facts .microlabel { display: block; }
.qal-card { margin-bottom: 12px; }
.qal-text { white-space: pre-wrap; }
.qal-review { padding: 5px 0; border-bottom: 1px solid var(--color-divider); }
.qal-fail { color: var(--color-brick); font-weight: 700; }
.qal-pass { font-weight: 700; }
.qal-waiting { color: var(--color-neutral-700); }
.qa-chip.qal-link { border: 0; cursor: pointer; text-decoration: underline; }
.qa-q.qal-item { border-left: 4px solid var(--color-brick); padding-left: 8px; }
.adm-opt .qa-flag { margin-left: 5px; }
@media (max-width: 560px) {
  .qal-two { grid-template-columns: 1fr; }
}

/* The shared dialog is asked from inside photo viewers and sheets (z-index up to
   960), so it always sits on top of them. */
#dlgOverlay { z-index: 1000; }
/* SPT.dialog.form - a few labelled number boxes in the shared dialog. */
.dlg-fields { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; margin: 4px 0 14px; }
.dlg-fields label { font-family: var(--font-heading); font-size: 16px; }
.dlg-fields .input { margin: 0; }
.dlg-fields .hint { font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; }
.lam-sprays strong { font-family: var(--font-heading); font-size: 14px; }
.mold-ask { margin: 0 0 14px; border-left: 3px solid var(--color-accent-700); }
.qa-ask { margin: 0 0 14px; border-left: 3px solid var(--color-accent-700); }
.mold-ask-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mold-ask-list .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; min-height: 64px; }
.mold-ask-list .btn .mid { font-family: var(--font-heading); font-size: 20px; }
.mold-ask-list .btn small { font-size: 11px; font-weight: 400; opacity: .85; }
.mold-ask-list .btn.likely { outline: 2px solid var(--color-accent-700); outline-offset: 1px; }

/* scanned slots (station / boat) shown once something is scanned */
.slots { display: flex; gap: 10px; margin-bottom: 12px; }
.slot { flex: 1; border: 1px solid var(--color-divider); padding: 8px 10px; position: relative; }
.slot .slot-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.slot .slot-value { font-size: 14px; font-weight: 500; }
.slot .slot-value.empty { color: var(--color-neutral-500); font-weight: 400; }
.slot .slot-clear {
  position: absolute; top: 4px; right: 6px;
  appearance: none; background: none; border: 0; cursor: pointer;
  font-size: 15px; color: var(--color-neutral-600);
}
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 1px 6px;
  margin-right: 6px;
  border: 1px solid currentColor;
}
.badge-start, .badge-check { color: var(--color-accent-700); }
.badge-end { color: var(--color-brick); }
.badge-ready { color: #b45309; }
.badge-comp { color: var(--color-accent-800); background: var(--color-accent-100); border: 0; }

/* recent scans list */
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li {
  padding: 8px 0;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}
.recent-list li:first-child { border-top: 0; }
.recent-list li .hull { font-weight: 700; font-variant-numeric: tabular-nums; }
.recent-list li .when { color: var(--color-neutral-600); font-size: 11px; }

/* Parts tab: the leftover-part log */
.parts-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(240px, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 800px) { .parts-grid { grid-template-columns: 1fr; } }
.parts-result {
  padding: 12px 14px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-size: 14px;
}
.parts-result.err { background: #f6d1d1; color: #7a1c1c; }

/* Kit pull board (Warehouse tab) */
.kit-row {
  display: grid;
  /* Fixed-width action column: every row (header included) is its own
     grid, so an auto column would size differently on the button-less
     header row and shove its headings out of line with the dropdowns.
     216px is what Print + Pull + Archive need side by side - narrower
     and the busiest rows wrap to three lines. */
  grid-template-columns: 26px minmax(150px, 1.3fr) 1.1fr .8fr .8fr .7fr .7fr 216px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--color-divider);
}
.kit-row.kit-head {
  border-top: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
/* Each heading centered over its own column (Boat stays left like its
   cells; the first column is the print tick box, which has no heading) */
.kit-row.kit-head span { text-align: center; }
.kit-row.kit-head span:nth-child(2) { text-align: left; }
/* Tick a boat for the batch print. The label text only shows on narrow
   screens, where the box drops onto its own line and needs to say what
   it is. */
.kit-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.kit-pick input { width: 18px; height: 18px; }
.kit-pick span { display: none; font-size: 12px; }
/* The batch bar: only there once something is ticked. */
.kit-batch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-divider);
}
.kit-batch #kitBatchWhat { font-size: 12px; font-weight: 700; margin-right: auto; }
.kit-row .kit-boat .hull { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The job number, under the hull and above the dealer: it is what goes
   on the kit and what any Epicor transaction against it needs, so it
   gets its own line rather than the end of a dealer name that ellipses
   away. Blank until Epicor has made the job. */
.kit-row .kit-boat .job {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-neutral-700);
  font-variant-numeric: tabular-nums;
}
.kit-row .kit-boat .who {
  font-size: 11px;
  color: var(--color-neutral-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kit-row .kit-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* auto-save state, in place of the old per-row Save button */
.kit-state {
  flex-basis: 100%;
  min-height: 14px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.kit-state.saving { color: var(--color-neutral-600); }
.kit-state.saved { color: var(--color-accent-700); }
.kit-state.err { color: var(--color-brick); font-weight: 700; }
.kit-state.clickable { cursor: pointer; text-decoration: underline; }
.kit-row .kit-risk { font-size: 11px; font-weight: 700; color: var(--color-brick); margin-top: 2px; }
.kit-row .kit-risk.kit-nnwarn { font-weight: 800; color: var(--color-alarm); }
.kit-row.kit-archived { opacity: .75; }
.kit-archtoggle { font-size: 12px; padding: 6px 0; }
@media (max-width: 900px) {
  .kit-row { grid-template-columns: 1fr 1fr; }
  .kit-row.kit-head { display: none; }
  .kit-row .kit-boat, .kit-row .kit-actions, .kit-row .kit-pick { grid-column: 1 / -1; }
  .kit-pick span { display: inline; }
}

/* Motors to Pull (Warehouse sub-page) */
.motor-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
}
.motor-row:first-child { border-top: 0; }
.motor-row.all-pulled { opacity: .65; }
.motor-row .m-where { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent-700); margin-top: 2px; }
.motor-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 2px 0; }
.motor-line .m-desc { font-weight: 600; }
/* The serial is what the person walking to the racks actually reads off
   the screen, so it is the biggest thing on the line (Tyler,
   2026-09-03) - monospace, because it gets compared character by
   character against a sticker on a crate. */
.motor-line .m-serial {
  font-size: 17px; font-weight: 700; letter-spacing: .02em;
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
/* Planning's motor status, read-only here. */
.motor-line .stage-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.motor-line .m-status { font-size: 12px; font-weight: 700; color: var(--color-brick); }
.motor-line .m-status.ok { color: var(--color-accent-700); }
@media (max-width: 700px) {
  .motor-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Motor serial assigned back at Planning, before Epicor has one. */
/* Planning's assigned serial - the same job as .m-serial above and read
   the same way, so the same size. */
.motor-line .m-planned {
  font-size: 17px; font-weight: 700; letter-spacing: .02em;
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  color: var(--color-accent-700);
}
/* The motor's part number - what's on the box and the shelf label. */
.motor-line .m-part { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
/* Issue this motor to its job - the one Epicor write on this page. */
.motor-line .m-release { font-size: 12px; padding: 3px 10px; }
.motor-line .m-release[disabled] { opacity: .6; }
/* ...and where that motor is sitting, from the daily receipt check. */
.motor-line .m-here {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--color-accent-700); color: #fff;
}
.bi-planned { font-variant-numeric: tabular-nums; }

/* 06 Planning - accepted (ANC) orders and their motor serials */
.plan-row {
  display: grid;
  /* The last column holds the status box and the serial box side by
     side, so it carries two inputs' worth - a 240px column split in
     half left neither wide enough to read a motor serial in. */
  grid-template-columns: 260px 1fr 340px;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
}
.plan-row.plan-head {
  border-top: 0;
  padding-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-neutral-600);
}
.plan-row.plan-moved { opacity: .7; }
.plan-moved-note { font-size: 11px; font-weight: 700; color: var(--color-neutral-600); margin-top: 2px; }
.plan-boat .hull { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-boat .plan-week { font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 2px; }
.plan-boat .plan-week.none { color: var(--color-neutral-600); font-weight: 600; }
.plan-released { display: flex; gap: 6px; align-items: baseline; font-size: 11px;
  color: var(--color-neutral-600); margin-top: 3px; }
.plan-released .r-sn { font-family: ui-monospace, monospace; }
.plan-released .r-st { font-weight: 700; letter-spacing: 0.04em; font-size: 10px; }
.plan-released.pulled .r-st { color: var(--color-accent-700); }
.plan-mismatch { font-size: 11px; font-weight: 600; color: var(--color-brick); margin-top: 3px; }
.plan-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; vertical-align: 1px; }
.plan-tag.prod { background: var(--color-accent-700); color: #fff; }
.plan-boat .hin { font-family: ui-monospace, monospace; font-size: 12px; color: var(--color-neutral-600); letter-spacing: 0.02em; }
.plan-boat .who { font-size: 13px; }
.plan-boat .ids { font-size: 11px; color: var(--color-neutral-600); margin-top: 2px; }
.plan-motor .m-desc { font-weight: 600; }
.plan-motor .m-status { font-size: 12px; font-weight: 700; color: var(--color-brick); }
/* Special-boat controls, moved here from Admin > Boats. */
.plan-boat .note-star { font-size: 20px; vertical-align: middle; }
/* Work-order print status: one chip per department under the boat's ids */
.plan-wo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.plan-wo-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 1px 7px; border-radius: 3px;
  border: 1px solid var(--color-neutral-600); color: var(--color-neutral-600); }
.plan-wo-tag.done { border-color: #1c7a3d; color: #1c7a3d; background: #e7f5eb; }
.plan-wo-tag.todo { border-color: var(--color-brick); color: var(--color-brick); }
.plan-wo-tag.na { opacity: .6; text-transform: none; }
.plan-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.plan-marks .btn { font-size: 12px; padding: 4px 9px; }
.plan-mark-pending { font-size: 11px; color: var(--color-neutral-600); }

.plan-serials { display: flex; flex-direction: column; gap: 6px; }
/* Status box then serial box, side by side and the same size - they are
   the two halves of one answer about one motor. Everything under them
   (the Pre-Rig line, the "Here · MOTOR 4" line) spans both. */
.plan-slot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 6px;
  align-items: start;
}
.plan-slot > *:not(.plan-stage):not(.plan-serial) { grid-column: 1 / -1; }
.plan-serial { font-variant-numeric: tabular-nums; text-transform: uppercase; }
select.plan-stage { font-size: 13px; font-weight: 700; }
/* ONE COLOUR PER MOTOR STAGE, so a screenful of boats reads at a glance
   (Tyler, 2026-09-03). Reds and greens are the app's own; purple and
   orange are new here and picked to sit in the same muted register
   rather than shouting over the board.
   Defined on the bare class, not on the select, because two pages wear
   them: the Planning dropdown that SETS the stage and the read-only
   chip on Motors to Pull that reports it. A motor that is purple on one
   is purple on the other. */
.st-backordered { background: var(--color-brick); color: #fff; }
.st-allocated   { background: #cfe3f5; color: var(--color-text); }
.st-shipped     { background: var(--color-accent-800); color: #fff; }
.st-pre-rig     { background: #6b4f92; color: #fff; }
.st-here        { background: #c1762e; color: #fff; }
.st-pulled      { background: #1c7a3d; color: #fff; }
/* The open list has to stay readable - without this the options inherit
   the closed box's fill and every choice looks like the current one. */
select.plan-stage option { background: var(--color-surface); color: var(--color-text); font-weight: 400; }
/* Epicor set this one, not a person. A ring rather than a border
   colour, which a filled box would have swallowed - it is the system's
   answer that will still be there after the next check. */
select.plan-stage.auto {
  outline: 2px solid var(--color-text);
  outline-offset: -2px;
}
.plan-nomotor { font-size: 11px; font-weight: 700; color: var(--color-neutral-600); }
/* Has that motor been received, and into which bin (checked daily). */
.plan-here { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 11px; }
.plan-here .here-tag {
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 10px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--color-accent-700); color: #fff;
}
.plan-here .here-bin { font-family: ui-monospace, monospace; font-weight: 700; }
.plan-here .here-when { color: var(--color-neutral-600); }
.plan-here.other .here-tag { background: var(--color-neutral-600); }
.plan-here.none .here-tag { background: transparent; color: var(--color-brick); padding-left: 0; }
.plan-by { font-size: 11px; color: var(--color-neutral-600); }
.plan-state { font-size: 12px; min-height: 1em; }
.plan-state.saving { color: var(--color-neutral-600); }
.plan-state.saved { color: var(--color-accent-700); }
.plan-state.err { color: var(--color-brick); font-weight: 700; }
.plan-state.clickable { cursor: pointer; text-decoration: underline; }
.plan-msg { font-size: 13px; min-height: 1em; margin-bottom: 8px; }
.plan-onlyblank { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
@media (max-width: 700px) {
  .plan-row { grid-template-columns: 1fr; gap: 6px; }
  .plan-row.plan-head { display: none; }
}

/* Warehouse KPIs - the plates atop the 04 tab's main view */
.wkpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.wkpi-grid:empty { display: none; }
.wkpi-value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 44px;
  line-height: .95;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.wkpi-value.brick { color: var(--color-brick); }
.wkpi-note { font-size: 11px; color: var(--color-neutral-600); margin-top: 4px; }

/* Kit pulling - the drill-in checklist (Warehouse tab) */
.pull-meta { font-size: 13px; color: var(--color-neutral-600); margin-bottom: 12px; }
.pull-section { border: 1px solid var(--color-divider); margin-bottom: 10px; }
.pull-section.complete { border-color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent-300) 12%, transparent); }
.pull-sec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.pull-sec-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.pull-sec-prog { font-size: 13px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.pull-sec-arrow { margin-left: auto; color: var(--color-neutral-600); }
.pull-sec-claimrow { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; }
.pull-claim { font-size: 12px; font-weight: 700; color: var(--color-accent-700); }
.pull-lines { border-top: 1px solid var(--color-divider); }
.pull-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--color-divider);
}
.pull-line:first-child { border-top: 0; }
.pull-line.resolved { opacity: .72; }
.pull-bin { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.pull-part { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pull-desc { font-size: 12px; color: var(--color-neutral-600); }
.pull-req { font-size: 13px; font-weight: 600; margin-top: 2px; }
.pull-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }
.pull-badge.ok { color: var(--color-accent-700); }
.pull-badge.short { color: var(--color-brick); }
.pull-badge.skip { color: var(--color-neutral-600); }
.pull-who { display: block; font-size: 11px; color: var(--color-neutral-600); margin-top: 2px; }
.pull-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) {
  .pull-line { grid-template-columns: 64px 1fr; }
  .pull-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Kit pull status colors (dropdown paints itself to match its value) */
select.kp-printed { background: #fdf3c4; }
select.kp-started { background: #cfe3f5; }
select.kp-processing { background: #d3ecd3; }
select.kp-complete { background: #1c7a3d; color: #fff; }
select.kp-qc { background: #f6d1d1; }

/* Special boats (Admin > Boats toggle): light yellow wherever they show */
.special-boat {
  background: #fdf3c4;
  box-shadow: 0 0 0 6px #fdf3c4;
}
button.special-boat { box-shadow: none; }

/* Hulls whose sales order PDF the Epicor sync has pulled — click to view */
.hull[data-so-pdf] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.hull[data-so-pdf]:hover { color: var(--color-accent-700); }

/* The frame a sales order is printed from. It holds the REAL PDF and
   the browser prints that document, so the text stays vector - it is
   never meant to be looked at, only printed from. Off-screen rather
   than display:none or hidden: a frame with no box doesn't reliably
   get to print in every browser. */
.so-printframe {
  position: absolute;
  left: -12000px;
  top: 0;
  width: 8.5in;
  height: 11in;
  border: 0;
}

/* The planning board's pick box + batch bar - the Kit Board's pattern. */
.plan-pick { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-bottom: 4px; }
.plan-pick input { width: 17px; height: 17px; }
.plan-pick span { font-size: 11px; color: var(--color-neutral-600); }

/* Special note (Admin > Boats): red asterisk next to the hull, tap to read */
.hull-line { display: flex; align-items: center; gap: 6px; }
.note-star {
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  color: var(--color-brick);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.note-star:hover { transform: scale(1.2); }

/* Full-screen sales order PDF viewer */
.so-pdf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-neutral-200);
  flex-direction: column;
}
.so-pdf-overlay.open { display: flex; }
.so-pdf-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.so-pdf-bar .so-pdf-title { font-weight: 700; font-variant-numeric: tabular-nums; }
.so-pdf-bar .so-pdf-tab { font-size: 13px; margin-left: auto; }
.so-pdf-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.so-pdf-page { background: #fff; box-shadow: var(--shadow-md); max-width: 100%; height: auto; }
.so-pdf-loading { padding: 40px; color: var(--color-neutral-600); }
.so-pdf-frame { flex: 1; width: 100%; align-self: stretch; border: 0; background: var(--color-neutral-300); }

/* ══ 03 Production ══ */

/* dashboards row: wrapping selectable buttons with live counts */
.dash-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.dash-pick {
  flex: 1 1 190px;
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text);
}
.dash-pick:hover { background: var(--color-neutral-100); }
.dash-pick .count { font-size: 11px; letter-spacing: .04em; color: var(--color-neutral-600); text-transform: none; font-family: var(--font-body); }
.dash-pick.selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.dash-pick.selected .count { color: var(--color-accent-200); }

/* area pace: each major area against its own 4-a-day gate, week to
   date. Same plate grammar as Plant Health's KPIs (big number, "of
   goal", delta, bar) so the two screens read as one system - brick when
   the area is behind for the week. */
/* auto-fit, not a fixed column count: the paced areas come from
   stations.json, so adding one (Fabrication, Upholstery) or retiring
   one in Admin must not leave a hole in the strip. All seven fit one
   row on the 1200px panel and the 1680px wall TV. The narrower bands
   are pinned to counts that divide the strip evenly instead - left to
   auto-fit, seven areas break 6 + 1 on a tablet and orphan the last
   tile - and a phone drops to one a row so the numbers stay readable
   from across the shop. */
.apace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}
@media (max-width: 1240px) { .apace-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .apace-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apace-grid { grid-template-columns: minmax(0, 1fr); } }
.apace {
  border: 1px solid var(--color-divider);
  padding: 12px 14px;
  min-width: 0;
}
/* The name wraps rather than truncating - "Patch & Polish" has to stay
   readable in a 145px tile, and every paced area's name fits one line
   at the widths the strip is actually used at. */
.apace .head {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.apace .row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.apace .value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 34px;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.apace .of {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}
.apace .delta { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.apace.behind .delta { color: var(--color-brick); }
.apace.ok .delta { color: var(--color-accent-700); }
.apace .bar { height: 10px; background: var(--color-neutral-300); margin-top: 10px; }
.apace .bar > i { display: block; height: 100%; background: var(--color-accent-700); }
.apace.behind .bar > i { background: var(--color-brick); }
.apace .foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--color-neutral-600);
}
.apace .foot .pct { font-variant-numeric: tabular-nums; }

/* Fabrication & Upholstery: what the feeder areas made against what
   the line installed. One block per area - a head carrying the stat
   plates, then the boats named in columns. */
.feeder { border: 1px solid var(--color-divider); margin-bottom: 18px; }
.feeder-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-neutral-100);
}
.feeder-head .fname {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.feeder-head .fflow { font-size: 12px; color: var(--color-neutral-600); margin-top: 2px; }
.feeder-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.fstat { text-align: right; }
.fstat .n {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fstat .k { font-size: 11px; color: var(--color-neutral-600); }
/* Available is the number the board exists to show. */
.fstat.big .n { font-size: 42px; color: var(--color-accent-700); }
.fstat.big .k { color: var(--color-accent-700); font-weight: 600; }
.fstat.gap .n, .fstat.gap .k { color: var(--color-brick); }
.fstat.staged .n, .fstat.staged .k { color: #b45309; }

.feeder-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}
.fcol { padding: 12px 16px; border-left: 1px solid var(--color-divider); min-width: 0; }
.fcol:first-child { border-left: 0; }
.fcol-head {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-divider);
  margin-bottom: 4px;
}
.fcol-head .n { font-variant-numeric: tabular-nums; color: var(--color-text); }
.fcol .fempty { font-size: 12px; color: var(--color-neutral-600); padding: 8px 0; }
.fcol .fmore { font-size: 11px; color: var(--color-neutral-600); padding: 8px 0 2px; }
.frow { padding: 7px 0; border-top: 1px solid var(--color-divider); min-width: 0; }
.frow:first-of-type { border-top: 0; }
.frow .hull { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.frow .meta { font-size: 11px; color: var(--color-neutral-600); }
/* Standing in the consuming area with nothing made for it. */
.frow.needed .hull { color: var(--color-brick); }
.frow .meta .need { color: var(--color-brick); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Staged READY - the same amber the tick bars and part lanes use for
   it. The TAG carries the colour, not the hull: most of a feeder area's
   to-make list is usually staged, and colouring every hull would wash
   the column out and bury the one row that is NOT staged. */
.frow .meta .staged { color: #b45309; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* An inferred date, not a scan: the boat was invoiced, so the parts are
   in it whether or not the installing station was ever scanned. */
.frow .meta .assumed { font-style: italic; }
@media (max-width: 640px) {
  .feeder-stats { margin-left: 0; gap: 18px; }
  .fstat { text-align: left; }
  .fcol { border-left: 0; border-top: 1px solid var(--color-divider); }
}

/* find a boat */
.findboat { padding: 16px; margin-bottom: 18px; }
.findboat .row { display: flex; gap: 8px; }
.findboat .row .input { flex: 1; }
.findboat-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
}
@media (max-width: 900px) { .findboat-results { grid-template-columns: minmax(0, 1fr); } }
.findboat-hit { border-top: 1px solid var(--color-divider); padding: 12px 0; min-width: 0; margin-top: 12px; }
.findboat-hit .head { display: flex; align-items: center; gap: 10px; }
.findboat-hit .hull { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.findboat-hit .hours { margin-left: auto; font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; }
.findboat-hit .where { font-size: 13px; color: var(--color-accent-700); font-weight: 500; margin: 2px 0; }
.findboat-hit .where .dim { color: var(--color-neutral-600); font-weight: 400; }
.findboat-hit .where .miss { color: var(--color-brick); font-weight: 700; }
.findboat-note { font-size: 12px; color: var(--color-neutral-600); padding: 8px 0; }

/* status tags */
.tag-inplant { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-shipped { background: var(--color-accent-900); color: var(--color-bg); }

/* tick bars: unlabeled ticks + a spelled-out caption (never labels) */
.tick-row { display: flex; gap: 3px; }
.tick { flex: 1; height: 12px; background: var(--color-neutral-300); }
.tick.done { background: var(--color-accent-700); }
.tick.ready { background: #facc15; }
.tick.current { background: var(--color-accent-400); animation: segpulse 1.8s ease-in-out infinite; }
.tick-caption { font-size: 11px; color: var(--color-neutral-600); margin-top: 5px; }
.tick-caption .now { color: var(--color-accent-700); font-weight: 500; }
.tick-caption .ready-cap { color: #b45309; font-weight: 500; }
.tick-labels { display: flex; gap: 3px; margin-top: 4px; }
.tick-label {
  flex: 1;
  min-width: 0;
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--color-neutral-600);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tick-label.done { color: var(--color-accent-700); }
.tick-label.ready { color: #b45309; font-weight: 700; }
.tick-label.current { color: var(--color-accent-700); font-weight: 700; }

/* the production board: one row per boat */
.board-row {
  display: grid;
  grid-template-columns: 170px 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  border-top: 1px solid var(--color-divider);
  padding: 14px 0;
}
@media (max-width: 900px) { .board-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.board-row .hull { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.board-row .total { font-size: 11px; color: var(--color-neutral-600); }
.board-row .lane { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 2px 0; }
.board-row .lane .lane-tag {
  flex: 0 0 62px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent-700);
  color: var(--color-accent-700);
  padding: 1px 4px;
}
.board-row .lane .lane-where { color: var(--color-accent-700); font-weight: 500; }
.board-row .lane .lane-time { color: var(--color-neutral-600); font-size: 12px; }
.board-row .lane.done .lane-where { color: var(--color-neutral-600); font-weight: 400; }
.board-row .lane.missing .lane-tag { border-color: var(--color-brick); color: var(--color-brick); }
.board-row .lane.missing .lane-where { color: var(--color-brick); font-weight: 700; }
/* The next four boats in the Admin build order - the ones due to invoice next */
.board-row.next-up { border-left: 4px solid var(--color-accent-700); padding-left: 12px; }
.next-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid var(--color-accent-700);
  color: var(--color-accent-700);
  padding: 0 6px;
  margin-right: 4px;
  vertical-align: middle;
}
.parts-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--color-accent-800);
  color: var(--color-bg);
  padding: 1px 6px;
  vertical-align: middle;
}

/* Epicor boat info lines */
.boat-info { font-size: 11px; color: var(--color-neutral-600); line-height: 1.5; margin-top: 3px; }
.boat-info .bi-dealer { color: var(--color-text); font-weight: 500; }
.boat-info .bi-motor { color: var(--color-brick); font-weight: 600; }
.boat-info .bi-motor.ok { color: var(--color-accent-700); font-weight: 400; }

/* station board (per-station sub-station lanes) */
.station-card { border-top: 1px solid var(--color-divider); padding: 14px 0; }
.station-card .head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.station-card .head .hull { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.station-card .head .since { font-size: 12px; color: var(--color-neutral-600); }
.part-lane {
  display: grid;
  grid-template-columns: 62px 220px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 8px 0 0;
}
@media (max-width: 900px) { .part-lane { grid-template-columns: 62px minmax(0, 1fr); } .part-lane .lane-prog { grid-column: 1 / -1; } }
.part-lane .lane-tag {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent-700);
  color: var(--color-accent-700);
  padding: 1px 4px;
}
.part-lane.missing .lane-tag { border-color: var(--color-brick); color: var(--color-brick); }
.part-lane .lane-state { font-size: 13px; color: var(--color-accent-700); font-weight: 500; }
.part-lane .lane-state .t { color: var(--color-neutral-600); font-weight: 400; font-size: 12px; }
.part-lane .lane-state.done { color: var(--color-neutral-600); font-weight: 400; }
.part-lane.missing .lane-state { color: var(--color-brick); font-weight: 700; }
.part-lane.ready .lane-tag { border-color: #b45309; color: #b45309; }
.part-lane .lane-state.ready { color: #b45309; font-weight: 700; }

/* awaiting-shipment / shipped dashboards: one row per boat */
.ship-dash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 150px;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--color-divider);
  padding: 14px 0;
}
@media (max-width: 800px) { .ship-dash-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.ship-dash-row .hull { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ship-dash-row .mid { font-size: 13px; color: var(--color-neutral-600); }
.ship-dash-row .big { text-align: right; }
@media (max-width: 800px) { .ship-dash-row .big { text-align: left; } }
.ship-dash-row .big .n {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ship-dash-row .big .k { font-size: 11px; color: var(--color-neutral-600); margin-left: 6px; }
.ship-dash-row.late .big .n, .ship-dash-row.late .big .k { color: var(--color-brick); }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 18px; font-size: 12px; color: var(--color-neutral-600); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 22px; height: 12px; display: inline-block; }
.legend .swatch.done { background: var(--color-accent-700); }
.legend .swatch.current { background: var(--color-accent-400); animation: segpulse 1.8s ease-in-out infinite; }
.legend .swatch.todo { background: var(--color-neutral-300); }
.legend .swatch.missing { background: transparent; border: 1px solid var(--color-brick); }

/* ══ 04 Assistant ══ */

.ask-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .ask-grid { grid-template-columns: minmax(0, 1fr); } }

/* the tap-to-talk bar - a narrow full-width row above the ask grid
   (was a big square tile; flattened 2026-08-20) */
.ask-talkbar { margin-bottom: 20px; }
.talk-tile {
  width: 100%;
  appearance: none;
  cursor: pointer;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px 20px;
  box-shadow: var(--shadow-sm);
}
.talk-tile:hover { background: var(--color-accent-600); }
.talk-tile:active, .talk-tile.listening { background: var(--color-accent-700); }
.talk-label {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-bg);
}
.mic-viz { display: flex; align-items: center; gap: 8px; height: 44px; }
.mic-viz span {
  width: 8px;
  height: 12px;
  background: var(--color-bg);
  animation: vizwave 2.4s ease-in-out infinite;
}
.mic-viz span:nth-child(2) { animation-delay: .3s; }
.mic-viz span:nth-child(3) { animation-delay: .6s; }
.mic-viz span:nth-child(4) { animation-delay: .9s; }
.mic-viz span:nth-child(5) { animation-delay: 1.2s; }
.mic-viz.live span { animation: none; }
.talk-tile.listening .mic-viz span { animation-duration: 1.1s; }

.ask-row { display: flex; gap: 8px; margin-top: 14px; }
.ask-row .input { flex: 1; }

.prompt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.prompt-tags .tag { cursor: pointer; background: transparent; }
.prompt-tags .tag:hover { background: var(--color-accent-100); }

.transcript-box { margin-top: 18px; padding: 14px; }
.transcript-box p { margin: 4px 0 0; font-size: 15px; }

.ask-note { padding: 12px 0; color: var(--color-neutral-600); }
.ask-dim { font-size: 12px; color: var(--color-neutral-600); margin: 2px 0 10px; }

/* result banner (success / error) */
.ask-result {
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent-700);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
}
.ask-result.error { border-left-color: var(--color-brick); }

/* legacy Assistant card classes, restyled to the Industry system (the
   ported ask.js keeps its original class names) */
.results-area { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.match-card {
  border: 1px solid var(--color-divider);
  padding: 14px;
}
.match-card.empty { color: var(--color-neutral-600); }
.part-num {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 21px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.part-desc { margin: 2px 0 8px; font-size: 13px; color: var(--color-neutral-600); }
.bin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  font-size: 14px;
}
.bin-name { font-weight: 500; }
.bin-level { color: var(--color-neutral-600); font-weight: 400; font-size: 12px; }
.bin-qty {
  color: var(--color-accent-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.total-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--color-divider);
  font-size: 14px;
  font-weight: 700;
}
.total-qty { color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.no-stock { margin: 8px 0 0; font-size: 12px; color: var(--color-brick); }
.suggestion-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  padding: 8px 4px;
  text-align: left;
  font: inherit;
}
.suggestion-btn:hover { background: var(--color-accent-100); }
.sug-part { font-weight: 700; font-variant-numeric: tabular-nums; }
.sug-desc { font-size: 12px; color: var(--color-neutral-600); }
.boat-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.boat-check input { width: 18px; height: 18px; accent-color: var(--color-accent); }

/* transfer confirm card */
.xfer-card { padding: 16px; margin-bottom: 14px; }
.xfer-card .field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.xfer-card .field-label {
  flex: 0 0 92px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.cf-input { flex: 1; min-height: 32px; }
.missing-warning {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-brick);
}
.xfer-card .button-row { display: flex; gap: 8px; margin-top: 12px; }
.xfer-card .button-row .btn { flex: 1; }

/* recent-this-session: 3px status border per row */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 6px;
  border-left: 3px solid var(--color-accent-700);
  background: var(--color-neutral-100);
  font-size: 13px;
  cursor: pointer;
}
.history-list li.error { border-left-color: var(--color-brick); }
.history-list li span:last-child { color: var(--color-neutral-600); font-size: 11px; white-space: nowrap; }

/* ══ 05 Admin ══ */

.adm-seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-divider);
  margin-bottom: 14px;
}
.adm-opt {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text);
}
.adm-opt + .adm-opt { border-left: 1px solid var(--color-divider); }
.adm-opt:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.adm-opt.selected { background: var(--color-accent); color: var(--color-bg); }

#admMsg { min-height: 20px; margin: 0 0 10px; font-size: 13px; }
.msg-ok { color: var(--color-accent-700); }
.msg-err { color: var(--color-brick); }
.adm-dim { color: var(--color-neutral-600); font-size: 13px; }
.adm-warn { color: var(--color-brick); }

.adm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .adm-grid { grid-template-columns: minmax(0, 1fr); } }
.adm-help { padding: 14px; font-size: 13px; }
.adm-help p { margin: 0 0 8px; color: var(--color-neutral-700); }

.adm-card { padding: 14px; margin-bottom: 14px; }
.adm-user-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 10px; }
.adm-user-tools input[type="search"] { flex: 1 1 240px; max-width: 420px; }
.adm-user-tools select { flex: 0 0 auto; min-height: 36px; }
.adm-addrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.adm-addrow .input { flex: 1; min-width: 180px; }
.adm-sync-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Admin > Boats: tick boats to refresh from Epicor */
.adm-refresh-bar { justify-content: space-between; }
.adm-refresh-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.adm-refpick { display: flex; align-items: center; padding: 0 4px; cursor: pointer; }
.adm-refpick input, .adm-refresh-all input { width: 18px; height: 18px; }
.adm-refresh-out { margin-top: 12px; }
.adm-refresh-out .row-item .adm-warn { color: var(--color-brick); }
.adm-checkrow { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; margin: 10px 0; }
.adm-checkrow input { accent-color: var(--color-accent); }
.adm-form { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }

/* row lists (stations / boats / users) */
.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-divider);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.row-item.inactive { opacity: .55; }
.row-item.subrow {
  margin-left: 34px;
  border-left: 2px solid var(--color-accent-300);
  background: var(--color-neutral-100);
}
.row-item .grow { flex: 1; min-width: 0; }
.row-item .name { font-weight: 700; font-size: 15px; }
.row-item .sub { font-size: 12px; color: var(--color-neutral-600); }
.row-item .move-col { display: flex; flex-direction: column; gap: 2px; }
.row-item .action-col {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 320px;
}
.row-item .action-col .btn { font-size: 12px; padding: 4px 9px; }
.icon-btn {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-divider);
  padding: 1px 7px;
  font-size: 11px;
  color: var(--color-neutral-700);
}
.icon-btn:hover { background: var(--color-neutral-100); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* small flag chips on rows (ship trigger / assembly / check-off …) */
.flag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-left: 4px;
  border: 1px solid var(--color-accent-700);
  color: var(--color-accent-700);
  vertical-align: middle;
}
.flag.brick { border-color: var(--color-brick); color: var(--color-brick); }
.flag.solid { background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--color-bg); }

/* toggle chips (applies-to / joins) */
.chip-toggle {
  appearance: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  margin: 1px;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-neutral-600);
}
.chip-toggle.on {
  border-color: var(--color-accent-700);
  background: var(--color-accent-700);
  color: var(--color-bg);
}

/* people picker (admin.js SPTUserPick): a dropdown onto a checkbox grid */
.ump { position: relative; max-width: 100%; }
.ump-btn {
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
}
.ump.open .ump-btn, .ump-btn:hover { border-color: var(--color-accent-700); }
.ump-sum { flex: 1; min-width: 0; }
.ump-caret { color: var(--color-neutral-600); }
.ump-panel {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  padding: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-700);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ump-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ump-find { flex: 1 1 200px; min-width: 0; }
.ump-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 10px;
  max-height: 320px;
  overflow-y: auto;
}
.ump-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ump-item span { overflow: hidden; text-overflow: ellipsis; }
.ump-item:hover { background: var(--color-divider); }
.ump-item.on { font-weight: 600; color: var(--color-accent-800); }

/* ── barcode sheets (screen + print) ── */
.bc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 620px) { .bc-pair { grid-template-columns: 1fr; } }
.bc-card {
  border: 2px solid var(--color-text);
  background: #fff;
  text-align: center;
}
.bc-head {
  padding: 14px 10px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  letter-spacing: .08em;
}
.bc-head.start { background: #15803d; }
.bc-head.end { background: #b91c1c; }
.bc-head.check { background: #0e7490; }
.bc-parent { font-weight: 700; color: var(--color-neutral-600); padding-top: 10px; letter-spacing: .08em; }
.bc-station { font-size: 27px; font-weight: 800; padding: 12px 10px 0; font-family: var(--font-heading); }
.bc-qr { padding: 14px; display: flex; justify-content: center; }
.bc-qr svg, .bc-qr img { width: 240px; height: 240px; }
.bc-code { font-family: ui-monospace, monospace; color: var(--color-neutral-600); padding-bottom: 14px; font-size: 13px; }
.bc-instr { padding: 0 16px 14px; color: var(--color-neutral-600); font-size: 14px; }

.label-card { border: 2px solid var(--color-text); background: #fff; text-align: center; padding: 12px; }
.label-card .hull { font-weight: 900; font-size: 20px; margin-top: 6px; overflow-wrap: anywhere; }
.label-card svg, .label-card img { width: 170px; height: 170px; }
.label-head {
  color: #fff;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 5px 0;
  margin-bottom: 8px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.hull-page { margin-top: 20px; }
.hull-page-head { font-weight: 900; font-size: 22px; margin-bottom: 10px; border-bottom: 2px solid var(--color-divider); padding-bottom: 6px; }
.hull-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* ---- Printed work orders: upholstery and fabrication (07 Planning) ---- */

.wo-panel {
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  background: var(--color-neutral-100);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.wo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Which department the panel is currently showing - one panel serves both. */
.wo-what {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-neutral-900, #222);
  color: #fff;
}
.wo-head .microlabel { margin: 0; }
.wo-head select { width: auto; min-width: 200px; max-width: 300px; flex: 0 0 auto; }
.wo-boats { margin-top: 10px; display: grid; gap: 4px; }

/* Sheets that printed short. Loud on purpose: the stack looks complete,
   so this is the only place the gap is obvious before it reaches a bench. */
.wo-omissions {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 5px;
  border: 1px solid var(--color-brick, #b42318);
  background: color-mix(in srgb, var(--color-brick, #b42318) 8%, transparent);
}
.wo-omissions .head {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-brick, #b42318);
  margin-bottom: 5px;
}
.wo-omissions ul { margin: 0; padding-left: 18px; }
.wo-omissions li { font-size: 12px; margin: 2px 0; }
.wo-omissions .who { font-weight: 700; }
.wo-boat {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 5px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-divider);
}
.wo-boat input { width: 17px; height: 17px; }
.wo-boat .who { font-size: 12px; color: var(--color-neutral-600); }
.wo-boat .what { font-weight: 700; font-variant-numeric: tabular-nums; }
.wo-boat .day { font-size: 11px; color: var(--color-neutral-600); }
.wo-boat .warn { font-size: 11px; font-weight: 700; color: var(--color-danger, #b42318); }

/* The sheets themselves. Hidden on screen - they exist to be printed. */
.wo-print { display: none; }
.wo-page { padding: 0 0 10px; }
.wo-title { text-align: center; font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.wo-meta { display: flex; justify-content: flex-end; gap: 24px; font-size: 12px; margin-bottom: 8px; }
.wo-meta .build { margin-right: auto; font-weight: 800; }
.wo-ident {
  display: flex;
  gap: 10px;
  border: 1px solid #000;
  padding: 6px 8px;
  margin-bottom: 10px;
}
/* Flex, not a fixed grid: the Job cell is only there once Epicor has made
   the job, so the box is three cells wide some weeks and four others. The
   weights keep "Serial Number" on one line at four cells - wrapped, its
   value dropped a row and the box read crooked. */
.wo-ident > div { flex: 1; }
.wo-ident > div:nth-child(1) { flex: 1.2; }
.wo-ident > div:nth-child(2) { flex: 0.6; }
.wo-ident > div:nth-child(3) { flex: 1.1; }
.wo-ident > div:nth-child(4) { flex: 0.8; }
.wo-ident .k { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.wo-ident .v { font-size: 18px; font-weight: 800; }
.wo-lines { width: 100%; border-collapse: collapse; }
.wo-lines th, .wo-lines td {
  border: 1px solid #000;
  padding: 4px 6px;
  font-size: 12px;
  text-align: left;
}
.wo-lines th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.wo-lines td.desc { width: 60%; font-size: 13px; }
.wo-lines td.sign { height: 22px; }
.wo-note { margin-top: 8px; font-size: 11px; font-weight: 700; }

/* The QC sign-off the Excel sheet has always carried. The two typos in
   the statement are the original's - it is a form people sign, so it is
   reproduced word for word rather than quietly corrected. */
.wo-qc { margin-top: 18px; }
.wo-qc .qc-stmt { text-align: center; font-size: 11px; margin-bottom: 16px; }
.wo-qc .qc-fields { display: flex; gap: 48px; align-items: flex-end; }
.wo-qc .qc-field { flex: 1; }
.wo-qc .qc-top { font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.wo-qc .qc-line { border-bottom: 1px solid #000; height: 1px; }
.wo-qc .qc-cap { font-size: 10px; margin-top: 2px; }

/* The 11x17 week schedule: one line per boat, sized to be read at arm's
   length off the wall. Print-only like the sheets; plan.js adds the 17x11
   @page rule for this print alone. */
.wo-sched { color: #000; font-family: Arial, Helvetica, sans-serif; }
.wo-sched-head { display: flex; align-items: baseline; gap: 28px; margin-bottom: 10px; }
.wo-sched-head .t { font-size: 36px; font-weight: 900; }
.wo-sched-head .w { font-size: 32px; font-weight: 800; }
.wo-sched-head .d { margin-left: auto; font-size: 16px; }
.wo-sched table { width: 100%; border-collapse: collapse; }
.wo-sched th, .wo-sched td {
  border: 1.5px solid #000;
  padding: 7px 9px;
  text-align: left;
  vertical-align: middle;
}
.wo-sched th { font-size: 18px; font-weight: 800; background: #e6e6e6; white-space: nowrap; }
.wo-sched td { font-size: 23px; line-height: 1.2; }
.wo-sched td.num { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.wo-sched td.color { font-weight: 800; white-space: nowrap; }
.wo-sched td.pieces { width: 62%; }
.wo-sched td .note { font-size: 16px; font-weight: 800; margin-top: 3px; }
/* A new build day starts under a heavy rule, so each day reads as a block. */
.wo-sched tr.new-day td { border-top: 4px solid #000; }

/* Lamination's pull schedule (lam.js), printed through .wo-print. */
.pull-sheet { color: #000; font-family: inherit; }
.pull-title { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid #000; padding-bottom: 4px; }
.pull-title h1 { font-size: 22px; margin: 0; }
.pull-title div { font-size: 11px; }
.pull-sheet h2 { font-size: 17px; margin: 14px 0 2px; text-transform: uppercase; letter-spacing: .04em; }
.pull-sheet h2 span { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.pull-sheet h2.pull-left { margin-top: 22px; }
.pull-rule { font-size: 12px; margin: 0 0 6px; }
.pull-none { font-size: 14px; font-style: italic; margin: 6px 0; }
.pull-table { width: 100%; border-collapse: collapse; }
.pull-table th, .pull-table td { border: 1px solid #000; padding: 4px 6px; text-align: left; vertical-align: middle; }
.pull-table th { font-size: 12px; background: #e6e6e6; }
.pull-model td { background: #f2f2f2; font-size: 15px; font-weight: 900; }
.pull-model span { font-weight: 600; font-size: 12px; }
.pull-model em { font-style: normal; font-weight: 600; font-size: 12px; float: right; }
.pull-hull { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pull-start { font-size: 12px; white-space: nowrap; }
.pull-cell { font-size: 14px; white-space: nowrap; width: 17%; }
.pull-cell.empty { color: #999; text-align: center; }
.pull-box { display: inline-block; width: 13px; height: 13px; border: 2px solid #000; margin-right: 6px; vertical-align: -2px; }
.pull-due { font-size: 10px; }
.pull-note td { font-size: 11px; border-top: 0; padding-top: 0; }

@media print {
  body { background: #fff; }
  .chrome, .no-print { display: none !important; }
  /* Printing a batch of work orders: the app itself gets out of the way. */
  body.wo-printing .stage { display: none !important; }
  body.wo-printing .wo-print { display: block; }
  .wo-page { page-break-after: always; }
  .wo-page:last-child { page-break-after: auto; }
  .wo-sched thead { display: table-header-group; }
  .wo-sched tr { page-break-inside: avoid; }
  .wo-sched th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pull-table th, .pull-model td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pull-table tr { page-break-inside: avoid; }
  .pull-table thead { display: table-header-group; }
  .wo-lines { page-break-inside: auto; }
  .wo-lines tr { page-break-inside: avoid; }
  .stage { padding: 0; }
  .panel { border: 0; box-shadow: none; max-width: none; }
  .screen { padding: 0; }
  .bc-pair { display: block; margin: 0; }
  .bc-page { page-break-after: always; display: flex; align-items: center; justify-content: center; min-height: 95vh; }
  .bc-page .bc-card { width: 90%; max-width: 640px; border-color: #000; }
  .bc-page .bc-head { font-size: 48px; padding: 24px 10px; }
  .bc-page .bc-station { font-size: 48px; }
  .bc-page .bc-qr svg, .bc-page .bc-qr img { width: 440px; height: 440px; }
  .bc-page .bc-instr { font-size: 22px; padding-bottom: 24px; }
  .bc-page .bc-code { font-size: 17px; }
  .hull-page { page-break-after: always; margin: 0; }
  .hull-page-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .label-card { page-break-inside: avoid; }
}

/* fullscreen camera overlay */
.cam-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--color-neutral-900);
  display: flex; flex-direction: column;
}
#camView { position: relative; flex: 1; display: flex; flex-direction: column; }
#reader, #reader video { flex: 1; width: 100%; height: 100%; object-fit: cover; }
.cam-hint {
  position: absolute; top: 14px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  z-index: 2; padding: 0 16px;
}
.cam-frame {
  position: absolute; inset: 15% 10%;
  border: 2px solid rgba(255,255,255,.65);
  pointer-events: none; z-index: 1;
}
.cam-close {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 2; background: var(--color-bg);
}

/* ══════════════ Part requests ══════════════ */

/* Count pill on the 05 Warehouse tab (open requests, recipient only). */
.tab-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  padding: 0 4px;
  background: var(--color-brick);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Status chips - shared by the requester list and the queue. */
.pr-chip {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid var(--color-divider);
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
  white-space: nowrap;
}
.pr-chip.pr-wait { border-color: var(--color-accent-400); color: var(--color-accent-700); }
.pr-chip.pr-otw { background: var(--color-accent-100); border-color: var(--color-accent-400); color: var(--color-accent-800); }
.pr-chip.pr-done { background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--color-bg); }
.pr-chip.pr-off { opacity: .65; }
.pr-chip.pr-brick { border-color: var(--color-brick); color: var(--color-brick); }
.pr-chip.pr-exp { background: var(--color-brick); border-color: var(--color-brick); color: var(--color-bg); }
.pr-whsenote { color: var(--color-accent-800); font-style: italic; }
/* Killing somebody else's ticket: brick lettering on the ordinary
   secondary button, so it reads as the destructive one in the row
   without turning every card into a red button. */
.btn.pr-killbtn { color: var(--color-brick); border-color: var(--color-brick); }
/* And why it died, on the requester's own row. */
.pr-killed { color: var(--color-brick); }
.pr-card.pr-exp-card { border-left-color: var(--color-brick); }

/* Stock-out: the card goes RED the moment Epicor says nothing is on
   hand, and stays red until the part is back. */
.pr-chip.pr-hotc { background: var(--color-brick); border-color: var(--color-brick); color: var(--color-bg); }
.pr-card.pr-hot,
.pr-card.pr-hot.pr-picked {
  border-color: var(--color-brick);
  border-left-color: var(--color-brick);
  background: color-mix(in srgb, var(--color-brick) 8%, var(--color-neutral-100));
}
/* Back in stock, still not delivered: AMBER, the same yellow the Hot
   Board paints an in-stock row (tr.hb-instock). Red means "can't be
   picked"; yellow means "go pick it" - so the picker can tell at a
   glance which stocked-out tickets have become pickable, instead of a
   wall of red that all reads as blocked. Beats picked/expedited for
   the same reason red did. */
.pr-card.pr-restocked,
.pr-card.pr-restocked.pr-picked {
  border-color: var(--color-amber-ink);
  border-left-color: var(--color-amber-ink);
  background: var(--color-amber);
}
/* Still-out tickets for one part: one thin strip until tapped open,
   then a line per job. */
.pr-card.pr-grp { padding-top: 6px; padding-bottom: 6px; }
.pr-grp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pr-grp-part { font-weight: 600; white-space: nowrap; }
.pr-grp-desc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-neutral-600);
}
.pr-grp-meta { font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-grp-caret { font-size: 14px; color: var(--color-brick); }
.pr-grp-open .pr-grp-head { margin-bottom: 4px; }
@media (max-width: 560px) {
  .pr-grp-head { flex-wrap: wrap; row-gap: 2px; }
  .pr-grp-desc { flex-basis: 100%; order: 5; }
}
.pr-grp-row {
  border-top: 1px solid color-mix(in srgb, var(--color-brick) 30%, transparent);
  padding: 6px 0 4px;
}
.pr-grp-row.pr-exp-card { border-left: 3px solid var(--color-brick); padding-left: 6px; }
.pr-grp-row .pr-id { margin-left: 6px; }
.pr-grp-row .btn { font-size: 12px; padding: 4px 9px; }
.pr-chip.pr-restockc {
  background: var(--color-amber-ink);
  border-color: var(--color-amber-ink);
  color: var(--color-bg);
}

/* ── Hot Board (stock-out sub-page of the Warehouse tab) ── */
.hb-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hb-toolbar .pr-push { margin-bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.hb-toolbar #hotChecked { margin-left: auto; font-size: 12px; color: var(--color-neutral-600); }
.hb-scroll { overflow-x: auto; }
.hb-table { border-collapse: collapse; width: 100%; min-width: 1360px; font-size: 13px; }
.hb-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: 6px 6px;
  border-bottom: 2px solid var(--color-divider);
  white-space: nowrap;
}
/* The Hot Board's headers sort (the Quality board shares .hb-table but
   not this): each is a button that reads as header text. One more
   column than the Quality board, hence its own min-width. */
#hotBoard .hb-table { min-width: 1500px; }
/* Frozen column headers (Tyler, 2026-10-06): the board scrolls inside
   its own box, a screen tall, so the header row stays put while the rows
   go by. Its own box rather than the page because the wide table already
   scrolls sideways in .hb-scroll, and a sticky header only sticks to the
   box that scrolls it. Only the board's own header - the drill-in tables
   inside a row keep theirs in place. */
#hotBoard .hb-scroll { overflow: auto; max-height: calc(100dvh - 150px); }
#hotBoard .hb-table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg);
  box-shadow: inset 0 -2px 0 var(--color-divider);
}
/* Desktop: the Hot Board fills the screen like the Build Board - the
   panel drops its max-width while the board is showing, and the text
   grows a little with the window (13px at 1440 wide, up to 16px on a
   wall TV), so Description / Action / Notes get the room. */
@media (min-width: 761px) {
  .stage:has(#screen-ask:not(.hidden) #askHot:not(.hidden)) { padding: 12px 14px 16px; }
  .panel:has(#screen-ask:not(.hidden) #askHot:not(.hidden)) { max-width: none; }
  #hotBoard .hb-table,
  #hotBoard .hb-table .input { font-size: clamp(13px, 100vw / 128, 15px); }
  /* The three text columns take whatever width is left over: the short
     boxes are sized to what they hold (a part number, a job, a name, a
     date) instead of the browser's default 20-character input. */
  #hotBoard .hb-wrapcell { width: 26%; }
  #hotBoard .hb-wrapcell:has([data-hf="notes"]) { width: 16%; }
  #hotBoard .hb-table input.input[type="text"] { width: 6.6em; min-width: 0; padding: 4px 6px; }
  #hotBoard .hb-table input.input[data-hf="part"] { width: 7.6em; }
  #hotBoard .hb-table input.input[type="date"] { width: 8.6em; min-width: 0; padding: 4px 4px; }
  #hotBoard .hb-supplier { min-width: 100px; }
}
/* Wrapping text boxes: grow to their text, never a scrollbar. */
.hb-table textarea.hb-wrap {
  display: block;
  resize: none;
  overflow: hidden;
  field-sizing: content;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
}
#hotBoard .hb-wrap { min-width: 160px; }
.hb-sort {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hb-sort:hover, .hb-sort.on { color: var(--color-text); }
.hb-sort:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.hb-sort-arrow { font-size: 9px; min-width: 9px; }
.hb-supplier { font-size: 12px; min-width: 130px; max-width: 200px; line-height: 1.25; }
.hb-table td { padding: 5px 4px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.hb-table .input { min-height: 34px; font-size: 13px; padding: 4px 8px; width: 100%; min-width: 96px; }
.hb-table td .btn { font-size: 12px; padding: 5px 10px; }
.hb-id { font-size: 11px; color: var(--color-neutral-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Where Save used to be: the row's own save state. Reserved width so
   the table doesn't shift every time a row says SAVING. */
.hb-rowstate { width: 110px; }
.hb-empty { padding: 18px 8px; color: var(--color-neutral-600); }
/* IN STOCK highlight: the part still had stock at add time - yellow row
   + the add-time bins under the part number. Complete's green wins. */
tr.hb-instock:not(.hb-complete) td { background: var(--color-amber); }
tr.hb-instock:not(.hb-complete) .input:not(.hb-st) { background: var(--color-amber-soft); }
/* Non-nettable-only warning (kit stock check): bold red under the part,
   red bar down the row's left edge. */
.hb-nnwarn {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-alarm);
}
tr.hb-nn td:first-child { box-shadow: inset 4px 0 0 var(--color-alarm); }
.hb-bins {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-amber-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* What's on order (Next PO / PO Due) - read-only, from the hourly Time
   Phase check. Three states the warehouse reads at a glance: nothing on
   order at all (brick, the loudest - somebody has to go buy it), a PO
   whose requested delivery date has already blown (amber), or a date
   still in the future (plain). */
.hb-po { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hb-po-sub { font-size: 10px; color: var(--color-neutral-600); letter-spacing: .03em; }
.hb-po-wait { color: var(--color-neutral-600); font-style: italic; }
.hb-po-none { color: var(--color-brick); font-weight: 700; }
.hb-po-late { color: #9a5b00; font-weight: 700; }
.hb-po-late .hb-po-sub { color: #9a5b00; }
/* The PO number doubles as the drill-in trigger. */
.hb-inc {
  font: inherit;
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.hb-inc:hover { text-decoration-style: solid; }
.hb-po-none .hb-inc { color: var(--color-brick); }
/* Create PO (Purchasing) - a small button under the PO, and the PO made
   from the row once there is one (brick while its email hasn't gone). */
.hb-mkpo {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  padding: 2px 7px;
  border: 1px solid var(--color-primary, #0a4ea2);
  border-radius: 4px;
  background: #fff;
  color: var(--color-primary, #0a4ea2);
  cursor: pointer;
  white-space: nowrap;
}
.hb-mkpo:hover { background: var(--color-neutral-100); }
.hb-po-unsent .hb-mkpo, .hb-po-unsent { color: var(--color-brick); border-color: var(--color-brick); }
#hbPoOverlay { z-index: 990; }
.hb-po-card { width: min(560px, 100%); box-sizing: border-box; max-height: calc(100vh - 40px); overflow-y: auto; text-align: left; }
.hb-po-card .dlg-fields .hint { white-space: normal; }
.hb-po-card p { margin: 6px 0; }
/* Supplier contacts list (Hot Board) */
.hb-sc-card { width: min(1180px, 100%); box-sizing: border-box; max-height: calc(100vh - 40px); overflow-y: auto; text-align: left; }
.hb-sc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hb-sc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.hb-sc-tools #hbScFind { flex: 1 1 240px; min-width: 0; }
.hb-sc-tools select { width: auto; }
.hb-sc-form { border: 1px solid var(--color-divider); padding: 10px 12px; margin: 8px 0; }
.hb-sc-form textarea { resize: vertical; font: inherit; }
.hb-sc-list { overflow-x: auto; }
.hb-sc-table { min-width: 900px; }
.hb-sc-table td { word-break: break-word; }
.hb-sc-table tr[data-scid] { cursor: pointer; }
.hb-sc-table tr[data-scid]:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.hb-sc-off td { color: var(--color-neutral-600); }
.hb-sc-off td b { font-weight: 400; text-decoration: line-through; }
.hb-po-part { font-weight: 700; }
.hb-po-h { margin: 12px 0 4px; }
.hb-po-rcpts { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.hb-po-rcpt { display: flex; align-items: center; gap: 8px; font-size: 14px; word-break: break-all; }
.hb-po-add { display: flex; gap: 8px; margin-bottom: 8px; }
.hb-po-add .input { margin: 0; flex: 1; min-width: 0; }
.hb-po-err, .hb-po-msg { color: var(--color-brick); font-size: 13px; }
.hb-po-warn { color: #9a5b00; font-size: 13px; font-weight: 700; }

/* More than one job waiting on the same part: the extra jobs sit behind
   a chip under the primary Job # box, and open the jobs drill-in. */
.hb-jobs {
  margin-top: 3px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--color-accent-100);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.hb-jobs:hover { border-color: var(--color-neutral-600); }
.hb-inc-tbl tr.hb-job-done td { color: var(--color-neutral-600); text-decoration: line-through; }
/* ...except the status itself - "delivered and released" is the point of
   the row, not something struck off it. */
.hb-inc-tbl tr.hb-job-done td.hb-js { color: #1c7a3d; text-decoration: none; }
/* The jobs drill-in is editable, same as the board rows: type, Save.
   Tighter fields than the main table - it sits inside one of its cells. */
.hb-jobtbl td { padding: 4px 8px 4px 0; }
.hb-jobtbl .input { min-height: 30px; min-width: 0; width: 100%; font-size: 12px; padding: 3px 7px; }
.hb-jobtbl td:first-child { width: 120px; }
.hb-jobtbl td:nth-child(3) { width: 78px; }
.hb-jobtbl .input { text-decoration: none; }
/* Which boat the job builds, and where its two kits sit on the Kit
   Board - the part of the row that means something at the shelf. */
.hb-jobboat { width: 140px; line-height: 1.25; }
.hb-jobboat .hb-po-sub { white-space: nowrap; }
.hb-kitno { color: var(--color-neutral-600); font-weight: 700; }
/* Where the job stands, from the live part requests: nobody has asked
   yet (plain), asked and on the queue (amber), signed for (green). */
.hb-js { font-weight: 700; }
.hb-js-waiting { color: var(--color-neutral-600); font-weight: 400; }
.hb-js-requested { color: #9a5b00; }
.hb-js-delivered { color: #1c7a3d; }
.hb-js .hb-po-sub { font-weight: 400; }
.hb-jobact { display: flex; gap: 6px; white-space: nowrap; align-items: center; }
/* Save state for the drill-in's self-saving boxes - the Kit Board's
   line, sized for a table cell instead of a card. */
.hb-jsave {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.hb-jsave.saved { color: var(--color-accent-700); }
.hb-jsave.err { color: var(--color-brick); font-weight: 700; text-transform: none; }
.hb-jsave.clickable { cursor: pointer; text-decoration: underline; }
.hb-jobact .btn { font-size: 11px; padding: 4px 9px; }

/* Drill-in row: the full Time Phase picture for one part. */
tr.hb-inc-row > td { background: var(--color-neutral-100); padding: 12px 14px; }
.hb-inc-wait, .hb-inc-err, .hb-inc-none { font-size: 12px; color: var(--color-neutral-600); }
.hb-inc-err { color: var(--color-brick); }
.hb-inc-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.hb-inc-fact { font-size: 12px; color: var(--color-neutral-600); }
.hb-inc-fact b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.hb-inc-cols { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.hb-inc-cols > div { flex: 1 1 300px; min-width: 0; }
.hb-inc-cols h4 {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.hb-inc-tbl { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.hb-inc-tbl th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-divider);
  padding: 3px 8px 3px 0;
  white-space: nowrap;
}
.hb-inc-tbl td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.hb-inc-tbl tr.hb-inc-late td { color: #9a5b00; }

/* Status colors: red in, green out (same green as the kit board). */
select.hb-st { min-width: 130px; }
select.hb-st-new { background: var(--color-brick); color: #fff; }
select.hb-st-rev { background: #fdf3c4; }
select.hb-st-act { background: var(--color-accent-100); }
select.hb-st-done { background: #1c7a3d; color: #fff; }
tr.hb-complete td { background: color-mix(in srgb, #1c7a3d 10%, transparent); }

/* Adjustment modal: tappable "which bin did it come from" chips */
.adj-bins { display: flex; flex-wrap: wrap; gap: 6px; }
.adj-bin {
  font-family: inherit;
  background: var(--color-bg);
  padding: 5px 10px;
  cursor: pointer;
}
.adj-bin.adj-on {
  background: var(--color-accent-800);
  border-color: var(--color-accent-800);
  color: var(--color-bg);
}

/* Queue cards (Warehouse tab). */
/* Password requirements checklist + Plant Health account row. */
.pw-reqs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: 12px;
  color: var(--color-neutral-600);
}
.pw-reqs li { padding: 2px 0 2px 20px; position: relative; }
.pw-reqs li::before { content: "○"; position: absolute; left: 2px; }
.pw-reqs li.ok { color: var(--color-accent-700); }
.pw-reqs li.ok::before { content: "●"; }
.home-account {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  gap: 16px;
}
.home-account .button-row { margin: 0; }

/* Collapsible section buttons on the Parts tab. */
.parts-toggle {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  appearance: none;
  cursor: pointer;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  text-align: left;
}
.parts-toggle:hover { background: var(--color-accent-100); }
.parts-toggle h4 {
  margin: 0;
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.parts-toggle .note { font-size: 11px; color: var(--color-neutral-600); margin-left: auto; }
.parts-toggle .pt-ind {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1;
  color: var(--color-accent-700);
}
/* Red Tag a part: filled red so it reads as the one section that pulls a
   part OUT of use rather than asking for one. A true red, not the muted
   --color-brick, which reads brown on a full-width header. */
.parts-toggle-red { background: #b42318; border-color: #b42318; color: #fff; }
.parts-toggle-red:hover { background: #912018; border-color: #912018; }
.parts-toggle-red h4,
.parts-toggle-red .note,
.parts-toggle-red .pt-ind { color: #fff; }
.parts-collapse { padding-top: 14px; }

.pr-push { margin-bottom: 10px; }
.pr-push .note { font-size: 12px; color: var(--color-neutral-600); }
.pr-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.pr-stats strong { color: var(--color-text); }
.pr-card {
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent-500);
  background: var(--color-neutral-100);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.pr-card.pr-picked { border-left-color: var(--color-accent-800); }
.pr-card .pr-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.pr-card .pr-id {
  font-size: 12px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}
.pr-part { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-part .pr-desc { font-weight: 400; font-size: 13px; color: var(--color-neutral-700); }
.pr-sub { font-size: 12px; color: var(--color-neutral-600); margin: 2px 0 6px; }
.pr-line { font-size: 13px; margin: 3px 0; font-variant-numeric: tabular-nums; }
.pr-line strong { font-size: 11px; letter-spacing: .04em; color: var(--color-neutral-600); margin-right: 4px; }
.pr-line.pr-err { color: var(--color-brick); font-size: 12px; }

/* Kit request: the Kit Board's WHSE spot letter, sized to be read from
   arm's length - it's the one fact the picker needs off the card. A kit
   with no spot on the board reads red, because there's nowhere to go. */
.pr-line .pr-spot {
  display: inline-block;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--color-accent-800);
  color: var(--color-bg);
  font-weight: 800;
  font-size: 15px;
  text-align: center;
}
.pr-line.pr-nospot { color: var(--color-brick); }

/* Live Epicor check under the part-number field. */
.partcheck {
  font-size: 12px;
  margin: 4px 0 0;
  line-height: 1.35;
}
.partcheck.ok { color: var(--color-accent-800); }
.partcheck.bad { color: var(--color-brick); font-weight: 600; }
.partcheck.dim { color: var(--color-neutral-600); }

/* Part type-ahead (parts.js SPTPartPick): the matching parts drop down
   under the field, over whatever is below it. */
.pc-field { position: relative; }
.pc-list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 2px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.pc-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14px;
  line-height: 1.3;
}
.pc-item:last-child { border-bottom: 0; }
.pc-item:hover, .pc-item.active { background: var(--color-accent-100); }
.pc-num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-desc { color: var(--color-neutral-700); min-width: 0; }
.pc-desc em { font-style: normal; color: var(--color-neutral-500); font-size: 12px; }
.pc-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pc-status .pc-err { color: var(--color-brick); }

/* Requester's "My requests": its own block under the Parts tab's
   collapsible forms, so kit and part requests are both always in view. */
.pr-mine-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider);
  max-width: 760px;
}

/* Requester's "My requests" rows + the queue's delivered strip. */
.pr-mine-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-divider);
  margin-bottom: 6px;
  background: var(--color-neutral-100);
}
.pr-mine-row .grow { flex: 1; min-width: 0; }
.pr-mine-row .btn { font-size: 12px; padding: 4px 9px; }

/* Sign-off modal sub-line. */
.pr-sign-sub {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin: 0 0 12px;
}

/* ══ 07 Build Board ══════════════════════════════════════════════════
   The Excel schedule sheet, rebuilt. The stage colours are deliberately
   louder than the rest of the app's mono palette: this board is read
   from across the shop floor, and the floor already knows what green,
   orange and blue mean on that sheet. Every colour is defined ONCE
   here, so a cell and its legend key can never drift apart. */

:root {
  --bb-notstarted: #f2f2f3;
  --bb-notstarted-ink: #5d5d60;
  /* The three component areas, earliest to latest. Value carries the
     ordering as much as hue does - violet, then dark burnt orange, then
     the sheet's light amber - so the sequence reads from across the
     shop, not just up close. */
  --bb-lamination: #8e6bb0;
  --bb-lamination-ink: #ffffff;
  --bb-patch: #b35c25;
  --bb-patch-ink: #ffffff;
  --bb-subassembly: #e8a33d;  /* the sheet's orange */
  --bb-subassembly-ink: #3a2a10;
  --bb-capped: #a9dcf5;       /* Sub Assembly, Capping done - Assembly's blue, lighter */
  --bb-capped-ink: #10293a;
  --bb-assembly: #3aa5dd;     /* Assembly - the sheet's blue */
  --bb-assembly-ink: #10293a;
  --bb-pool: #f4edbe;         /* Pool - the sheet's cream */
  --bb-pool-ink: #3d3a1c;
  --bb-qc: #f2d541;           /* QC / final gigs - the sheet's yellow */
  --bb-qc-ink: #3a3210;
  --bb-invoiced: #1f9d55;     /* Complete */
  --bb-invoiced-ink: #ffffff;
  --bb-shipped: #14663a;      /* Complete and gone */
  --bb-shipped-ink: #ffffff;
  --bb-blocked: #c8453f;      /* Can't invoice */
  --bb-blocked-ink: #ffffff;
}

.stage-notstarted  { background: var(--bb-notstarted);  color: var(--bb-notstarted-ink); }
.stage-lamination  { background: var(--bb-lamination);  color: var(--bb-lamination-ink); }
.stage-patch       { background: var(--bb-patch);       color: var(--bb-patch-ink); }
.stage-subassembly { background: var(--bb-subassembly); color: var(--bb-subassembly-ink); }
.stage-capped     { background: var(--bb-capped);     color: var(--bb-capped-ink); }
.stage-assembly   { background: var(--bb-assembly);   color: var(--bb-assembly-ink); }
.stage-pool       { background: var(--bb-pool);       color: var(--bb-pool-ink); }
.stage-qc         { background: var(--bb-qc);         color: var(--bb-qc-ink); }
.stage-invoiced   { background: var(--bb-invoiced);   color: var(--bb-invoiced-ink); }
.stage-shipped    { background: var(--bb-shipped);    color: var(--bb-shipped-ink); }
.bb-cell.blocked, .bb-detail .chip.blocked, .bb-legend .sw.blocked {
  background: var(--bb-blocked);
  color: var(--bb-blocked-ink);
}

.bb-nav { display: flex; gap: 8px; margin-bottom: 12px; }
.bb-nav .btn { flex: 0 0 auto; }
.bb-nav .btn[disabled] { opacity: .45; pointer-events: none; }

.bb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 16px;
  align-items: start;
}
.bb-weeks { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.bb-week {
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.bb-week.current { border-color: var(--color-accent-700); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.bb-weekhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.bb-weekhead .title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: .01em;
}
.bb-weekhead .meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.bb-weekhead .tally { color: var(--color-accent-700); }

.bb-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border-top: 1px solid var(--color-divider);
}
.bb-day { background: var(--color-bg); min-width: 0; }
.bb-day.shutdown { opacity: .55; }
.bb-dayhead {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 5px 4px;
  background: var(--color-accent-700);
  color: #fff;
  font-family: var(--font-heading);
  letter-spacing: .1em;
  font-size: 12px;
}
.bb-dayhead .num { font-size: 15px; letter-spacing: 0; }
.bb-day.today .bb-dayhead { background: var(--color-accent-900); }
.bb-day.today .bb-dayhead::after { content: "· TODAY"; letter-spacing: .08em; }

.bb-cells { display: flex; flex-direction: column; gap: 1px; padding: 1px; }
.bb-cells.row { flex-direction: row; flex-wrap: wrap; }
.bb-cell {
  appearance: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  padding: 9px 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(15px, 2.1vw, 21px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  position: relative;
}
.bb-cells.row .bb-cell { width: auto; flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
.bb-cell:hover { filter: brightness(1.06); }
.bb-cell.picked { outline: 3px solid var(--color-text); outline-offset: -3px; }
/* Special boats carry the app's usual corner mark, not a colour of
   their own - the colour is already saying where the boat is. */
.bb-cell.special::after {
  content: "";
  position: absolute; top: 0; right: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent var(--color-text) transparent transparent;
}
/* A boat with a special note: the Production board's red asterisk, top
   right (the ECO tag has top left). Tapping it reads the note; padding
   gives a finger something bigger than the glyph to hit. */
.bb-note {
  position: absolute; top: 0; right: 0;
  padding: 1px 3px 6px 8px;
  color: var(--color-brick);
  font-size: 20px; font-weight: 900; line-height: 1;
  cursor: pointer;
}
.bb-note:hover { transform: scale(1.2); }
.bb-legend .key .bb-note { position: static; display: inline-block; width: 16px; margin-right: 6px; padding: 0; text-align: center; cursor: default; transform: none; }
.bb-detail .bb-so { margin: 10px 14px 12px; }
/* An engineering change due on this boat (Changes board phase 5). A small
   tag in the top-left corner so the hull number and the stage colour still
   do the reading from across the shop; solid on the FIRST boat with the
   change (the one a manager witnesses), outlined on the boats after. */
.bb-eco {
  position: absolute; top: 2px; left: 2px;
  padding: 0 4px;
  font-family: var(--font-body, inherit);
  font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 13px;
  border: 1px solid var(--color-text);
  border-radius: 2px;
  background: var(--color-bg);
  color: var(--color-text);
  pointer-events: none;
}
.bb-eco.first { background: var(--color-text); color: var(--color-bg); }
.bb-legend .key .bb-eco, .bb-change .bb-eco { position: static; display: inline-block; margin-right: 6px; }
/* Invoiced on a day the board draws no column for (a Friday) - the boat
   sits on Thursday with the day it actually went in the bottom-left corner,
   clear of the ECO tag (top-left) and the special-note star (top-right). */
.bb-offday {
  position: absolute; bottom: 2px; left: 2px;
  padding: 0 4px;
  font-family: var(--font-body, inherit);
  font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 13px;
  border-radius: 2px;
  background: var(--color-text);
  color: var(--color-bg);
  pointer-events: none;
}
/* Open Quality defects on this boat (Quality phase 7). Bottom-right, the one
   corner left: ECO top-left, the special-note star top-right, the Friday
   tag bottom-left. Brick, the app's one colour for "something's wrong". */
.bb-qa {
  position: absolute; bottom: 2px; right: 2px;
  padding: 0 4px;
  font-family: var(--font-body, inherit);
  font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 13px;
  border-radius: 2px;
  background: var(--color-brick);
  color: #fff;
  pointer-events: none;
}
.bb-legend .key .bb-qa, .bb-qa-box .bb-qa { position: static; display: inline-block; margin-right: 6px; }
.bb-qa-box { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--color-divider); border-left: 3px solid var(--color-brick); }
.bb-changes { margin-top: 10px; display: grid; gap: 8px; }
.bb-change { padding: 8px 10px; border: 1px solid var(--color-divider); border-left: 3px solid var(--color-neutral-400); }
.bb-change.first { border-left-color: var(--color-text); }
.bb-change-head { font-size: 13px; }
.bb-change-st { margin-left: 6px; font-size: 11px; color: var(--color-neutral-700); }
.bb-change-what { margin-top: 3px; font-size: 12px; color: var(--color-neutral-700); overflow-wrap: anywhere; }
.bb-change-open { margin-top: 6px; font-size: 12px; padding: 4px 10px; }

/* Planning > Calendar. Borrows the Build Board's week frame so the two
   read as the same calendar, but the cells are office-sized, not floor-
   sized: this page is read at a desk, a dozen weeks at a time. The empty
   "open" boxes are the point of the page, so they are the one loud thing. */
.pc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.pc-bar .btn { margin-left: auto; }
.pc-summary {
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pc-summary .head { font-size: 15px; }
.pc-summary .note { font-size: 12px; color: var(--color-neutral-600); margin-top: 4px; }
.pc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.pc-nav select { width: auto; min-width: 0; flex: 0 1 200px; }
.pc-nav .btn[disabled] { opacity: .45; pointer-events: none; }

.pc-monthhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--color-divider); border-bottom: 0;
  background: var(--color-surface);
}
.pc-monthhead .title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; letter-spacing: .01em;
}
.pc-monthhead .tally { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.pc-monthhead .tally.gap { color: var(--color-brick); }

/* The month: a narrow build-week column, one column per build day, then
   (Lamination only) the week's stringer box and paint box. While
   Lamination's Calendar is on screen the panel grows by exactly those
   boxes, so the day columns stay the size they are on Planning. */
:root { --pc-str-w: 150px; --pc-paint-w: 170px; }
.panel:has(#screen-lam:not(.hidden) #lamCal:not(.hidden)) { max-width: calc(1200px + var(--pc-str-w) + var(--pc-paint-w)); }
@media (min-width: 1740px) {
  .panel:has(#screen-lam:not(.hidden) #lamCal:not(.hidden)) { max-width: calc(1680px + var(--pc-str-w) + var(--pc-paint-w)); }
}
/* The Build Calendar carries the paint box but no stringers. */
.panel:has(#screen-lam:not(.hidden) #lamBuild:not(.hidden)) { max-width: calc(1200px + var(--pc-paint-w)); }
@media (min-width: 1740px) {
  .panel:has(#screen-lam:not(.hidden) #lamBuild:not(.hidden)) { max-width: calc(1680px + var(--pc-paint-w)); }
}
/* Build Calendar: the boats not dated yet, in Admin order, and the drop
   targets while a boat is being dragged. */
.pc-undated {
  border: 1px dashed var(--color-neutral-400);
  background: var(--color-bg);
  padding: 8px 10px;
  margin-bottom: 12px;
}
.pc-undated-head { font-size: 13px; font-weight: 600; }
.pc-undated-sched { margin-top: 10px; }
.pc-undated-head .hint { font-weight: 400; font-size: 12px; color: var(--color-neutral-600); margin-left: 8px; }
.pc-undated-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-height: 168px; overflow-y: auto; }
.pc-chip {
  font: inherit; font-size: 12px; cursor: grab;
  border: 1px solid var(--color-divider); border-left: 3px solid var(--color-accent-700);
  background: var(--color-surface, #fff); color: var(--color-text);
  padding: 2px 6px; border-radius: 2px;
}
.pc-chip.sched { border-left-color: var(--color-neutral-500); }
.pc-chip .n { color: var(--color-neutral-500); margin-right: 4px; font-size: 11px; }
.pc-chip:hover { filter: brightness(.96); }
.pc-boat[draggable="true"] { cursor: grab; }
.pc-setmode .pc-boat { cursor: pointer; }
.pc-dragging .pc-day:not(.outside) { outline: 1px dashed var(--color-neutral-400); outline-offset: -3px; }
.pc-day.pc-drop-over, .pc-undated.pc-drop-over { outline: 2px solid var(--color-accent-700) !important; outline-offset: -2px; background: var(--color-accent-50, rgba(0, 0, 0, .04)); }
.pc-month {
  display: grid;
  grid-template-columns: 38px repeat(var(--pc-cols), minmax(0, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.pc-month.with-str { grid-template-columns: 38px repeat(var(--pc-cols), minmax(0, 1fr)) var(--pc-str-w); }
.pc-month.with-paint { grid-template-columns: 38px repeat(var(--pc-cols), minmax(0, 1fr)) var(--pc-paint-w); }
.pc-month.with-str.with-paint { grid-template-columns: 38px repeat(var(--pc-cols), minmax(0, 1fr)) var(--pc-str-w) var(--pc-paint-w); }
.pc-colhead {
  padding: 5px 4px; text-align: center;
  background: var(--color-accent-700); color: #fff;
  font-family: var(--font-heading); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.pc-wk {
  background: var(--color-surface); color: var(--color-neutral-700);
  font-family: var(--font-heading); font-size: 15px; text-align: center; padding-top: 6px;
}
.pc-wk span { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.pc-month > .pc-wk:first-child { background: var(--color-accent-700); }
.pc-day { background: var(--color-bg); min-width: 0; min-height: 70px; }
.pc-day.outside { opacity: .38; }
.pc-day.past .pc-boat { opacity: .75; }
.pc-dayhead { display: flex; align-items: baseline; gap: 6px; padding: 3px 6px 1px; }
.pc-dayhead .num { font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
.pc-dayhead .tag {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 1px 5px; background: var(--color-accent-900); color: #fff;
}
.pc-dayhead { flex-wrap: wrap; }
/* Lamination's day labels: what today, yesterday and the day before are to
   the floor. Outlined so "Today" stays the one solid tag. */
.pc-dayhead .lam-day {
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: 0 4px; border: 1px solid var(--color-accent-700); color: var(--color-accent-700);
  line-height: 1.5;
}
.pc-day.today { box-shadow: inset 0 0 0 2px var(--color-accent-700); }
.pc-cells { display: flex; flex-direction: column; gap: 2px; padding: 2px; }
.pc-day.off .pc-dayhead { color: var(--color-neutral-500); }
/* Shutdown days are blocked off, not just dimmed: hatched, and nothing in
   them reads as a slot. */
.pc-day.shutdown {
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--color-neutral-500) 22%, var(--color-bg)) 0 6px,
    var(--color-bg) 6px 12px);
}
/* The stringer box beside each week. */
.pc-strhead { background: var(--color-neutral-700); }
.pc-str {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; margin: 0; padding: 6px 8px;
  background: var(--color-surface); color: var(--color-text);
  border: 0; border-left: 4px solid var(--color-neutral-300);
  font: inherit; font-size: 12px; text-align: left;
}
button.pc-str { cursor: pointer; appearance: none; }
button.pc-str:hover { filter: brightness(.97); }
button.pc-str:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: -2px; }
button.pc-str[disabled] { cursor: not-allowed; opacity: .6; }
.pc-str-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.pc-str-total { font-size: 22px; letter-spacing: 0; color: var(--color-text); font-weight: 600; }
.pc-str-rows { display: flex; flex-direction: column; gap: 1px; }
.pc-str-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dotted var(--color-divider); }
.pc-str-row span { font-family: var(--font-heading); font-size: 14px; }
.pc-str-row b { font-size: 14px; }
.pc-str-foot { margin-top: auto; font-size: 11px; line-height: 1.3; color: var(--color-neutral-700); }
.pc-str-empty { color: var(--color-neutral-500); font-size: 12px; }
.pc-str.open { border-left-color: var(--color-accent-700); }
.pc-str.open .pc-str-foot { color: var(--color-accent-700); font-weight: 600; }
.pc-str.open.late { border-left-color: var(--color-brick); }
.pc-str.open.late .pc-str-foot { color: var(--color-brick); }
.pc-str.ok { border-left-color: var(--bb-invoiced); background: color-mix(in srgb, var(--bb-invoiced) 10%, var(--color-bg)); }
.pc-str.ok .pc-str-foot { color: var(--bb-invoiced); font-weight: 600; }
.pc-str.short, .pc-str.gone { border-left-color: var(--color-amber-ink); background: var(--color-amber-soft); }
.pc-str.short .pc-str-foot, .pc-str.gone .pc-str-foot { color: var(--color-amber-ink); font-weight: 600; }
.pc-str.short.late { border-left-color: var(--color-brick); }
.pc-str-row.short b { color: var(--color-brick); }

/* The paint box beside the stringers: a week's gelcoat per colour. */
.pc-paint {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; padding: 6px 8px;
  background: var(--color-surface); color: var(--color-text);
  border-left: 4px solid var(--color-accent-700);
  font-size: 12px; cursor: help;
}
.pc-paint.none { border-left-color: var(--color-neutral-300); cursor: default; }
.pc-paint.short { border-left-color: var(--color-amber-ink); }
.pc-paint .pc-str-total small { font-size: 11px; font-weight: 400; color: var(--color-neutral-600); }
.pc-paint-rows { display: flex; flex-direction: column; gap: 1px; }
.pc-paint-row { display: flex; justify-content: space-between; gap: 6px; padding: 1px 0; border-bottom: 1px dotted var(--color-divider); }
.pc-paint-row span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-paint-row b { font-variant-numeric: tabular-nums; }
.pc-paint-row.zero { color: var(--color-neutral-500); }
.pc-paint-row.zero b { font-weight: 400; }
.pc-swatch { flex: none; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.pc-paint .warn { color: var(--color-amber-ink); font-weight: 600; }

.pc-shut {
  margin: 6px 4px; padding: 6px 4px; text-align: center;
  font-family: var(--font-heading); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-neutral-700); background: var(--color-bg); border: 1px solid var(--color-neutral-500);
}
.pc-boat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 4px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.25;
  border-left: 4px solid var(--color-accent-700);
  background: var(--color-surface);
  min-width: 0;
}
.pc-boat .id { font-family: var(--font-heading); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-boat .sub { grid-column: 1; color: var(--color-neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-boat .sub .job { color: var(--color-text); font-weight: 600; }
/* The card is a button: it opens the boat's sales order. */
button.pc-boat {
  appearance: none; border-top: 0; border-right: 0; border-bottom: 0;
  width: 100%; margin: 0; text-align: left; font: inherit; font-size: 12px; color: inherit; cursor: pointer;
}
button.pc-boat:hover { filter: brightness(.96); }
button.pc-boat:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: -2px; }
.pc-boat.busy { opacity: .6; cursor: progress; }
.pc-boat .st {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 5px;
  background: var(--color-accent-700); color: #fff;
}
/* Lamination's four part squares - Hull, Deck, Console, T-Top - between
   the hull and the status: yellow scanned in, green Pulled. */
.pc-boat.with-parts { grid-template-columns: minmax(0, 1fr) auto auto; }
.pc-boat.with-parts .st { grid-column: 3; }
.pc-parts { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; gap: 3px; }
.pc-part {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-style: normal;
  font-family: var(--font-heading); font-size: 10px; font-weight: 600; line-height: 1;
  color: var(--color-neutral-500); background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-neutral-300);
}
.pc-part.in { background: var(--bb-qc); color: #000; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pc-part.out { background: var(--bb-invoiced); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pc-legend .pc-part { margin-left: 10px; }
.pc-boat.sched { border-left-color: var(--color-neutral-500); }
.pc-boat.sched .st { background: transparent; color: var(--color-neutral-700); box-shadow: inset 0 0 0 1px var(--color-neutral-500); }
.pc-boat.done { border-left-color: var(--bb-invoiced); }
.pc-boat.done .st { background: transparent; color: var(--color-neutral-600); box-shadow: inset 0 0 0 1px var(--color-neutral-300); }
.pc-boat.over { outline: 2px solid var(--color-brick); outline-offset: -2px; }
/* Show Colors (Planning): the dealer and a big square per part - Hull,
   Deck, Console, T-Top - in the sales order's colour; two answers on one
   part split the square corner to corner. Bigger than Lamination's. */
.pc-colors {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0;
  margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--color-neutral-300);
}
.pc-colorset { display: flex; gap: 4px; flex: none; }
.pc-color {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-style: normal;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  cursor: help;
}
.pc-color.none {
  background: repeating-linear-gradient(135deg, var(--color-bg) 0 4px, var(--color-neutral-200, #e5e5e5) 4px 6px);
  color: var(--color-neutral-500); box-shadow: inset 0 0 0 1px var(--color-neutral-300);
}
.pc-color.unknown { outline: 2px dashed var(--color-brick); outline-offset: -2px; }
.pc-color-wait { color: var(--color-neutral-600); font-style: italic; font-size: 11px; }
.pc-dealer {
  min-width: 0; overflow: hidden; white-space: normal; font-size: 11px; font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere;
}
/* View Motor Status (Planning): each card's motor under the model line -
   Part · Serial · Status, or the part with its ATP and next PO. */
.pc-motor {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1px;
  margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--color-neutral-300);
  font-size: 11px; color: var(--color-text);
}
.pc-motor:empty { display: none; }
.pc-motor.wait { color: var(--color-neutral-600); font-style: italic; }
.pc-mline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-mline b { font-weight: 600; }
.ms-st.ok { color: var(--bb-invoiced); font-weight: 600; }
.ms-st.bad { color: var(--color-brick); font-weight: 600; }
.ms-st.warn { color: var(--color-amber-ink); }
.ms-atp.neg { color: var(--color-brick); font-weight: 600; }
.ms-po.late { color: var(--color-brick); }
/* A motor stage as a chip in the Planning box's own colours (.st-*). */
.ms-chip { display: inline-block; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 14px; }
/* Still Shipped with the boat at Patch & Polish or later - chase it. The red has a
   dark ring so it can't be mistaken for Backordered's plain brick. */
.ms-chip.ms-late { background: #c0262d; color: #fff; box-shadow: 0 0 0 1px #5c0f13; }
.pc-boat.motor-late { outline: 2px solid #c0262d; outline-offset: -2px; }
.ms-guess { margin-left: 2px; color: var(--color-amber-ink); font-weight: 600; }
/* Started / invoiced: a small square before the hull, in the Build Board's
   own QC yellow and Complete green so the two pages mean the same thing. */
.pc-sq {
  display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: 1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.pc-sq.started { background: var(--bb-qc); }
.pc-sq.invoiced { background: var(--bb-invoiced); }
.pc-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-neutral-700); }
.pc-legend .pc-sq + .pc-sq, .pc-legend .pc-sq:not(:first-child) { margin-left: 10px; }
.pc-open {
  padding: 9px 6px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-brick);
  border: 1px dashed var(--color-brick);
  background: color-mix(in srgb, var(--color-brick) 7%, transparent);
}
@media (max-width: 700px) {
  /* No room beside the week on a phone: the stringer box drops under it
     as a full-width strip. */
  .pc-month, .pc-month.with-str { grid-template-columns: 24px repeat(var(--pc-cols), minmax(0, 1fr)); }
  .pc-strhead { display: none; }
  .pc-month.with-paint, .pc-month.with-str.with-paint { grid-template-columns: 24px repeat(var(--pc-cols), minmax(0, 1fr)); }
  .pc-paint { grid-column: 1 / -1; }
  .pc-paint-rows { flex-direction: row; flex-wrap: wrap; gap: 2px 12px; }
  .pc-paint-row { gap: 4px; border: 0; }
  .pc-paint-row.zero { display: none; }
  .pc-paint .pc-str-foot br { display: none; }
  .pc-str { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .pc-str-rows { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
  .pc-str-row { gap: 4px; border: 0; }
  .pc-str-foot { margin-top: 0; margin-left: auto; }
  .pc-str-foot br { display: none; }
  .pc-wk { font-size: 11px; }
  .pc-wk span { display: none; }
  .pc-shut { margin: 4px 1px; font-size: 9px; letter-spacing: .04em; }
  .pc-boat { grid-template-columns: minmax(0, 1fr); padding: 3px 4px; }
  .pc-boat .st { grid-column: 1; grid-row: auto; justify-self: start; }
  .pc-boat.with-parts { grid-template-columns: minmax(0, 1fr); }
  .pc-motor { font-size: 10px; }
  .pc-mline { white-space: normal; overflow-wrap: anywhere; }
  .pc-boat.with-parts .st, .pc-parts { grid-column: 1; grid-row: auto; justify-self: start; }
  .pc-part { width: 14px; height: 14px; font-size: 8px; }
  .pc-boat .id { font-size: 12px; }
  .pc-open { padding: 6px 2px; letter-spacing: .04em; }
}
.bb-empty { padding: 9px 4px; text-align: center; color: var(--color-neutral-500); }

/* the sheet's right-hand column: the month, then the year */
.bb-score { padding: 14px 14px 12px; background: var(--color-bg); }
.bb-score .pct {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(46px, 7vw, 72px);
  line-height: 1;
  color: var(--color-accent-800);
  margin: 2px 0 10px;
}
.bb-score .pct span { font-size: .45em; margin-left: 2px; }
.bb-score .bar {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px;
  margin-bottom: 6px;
  color: #fff;
  background: var(--bb-invoiced);
  font-family: var(--font-heading);
}
.bb-score .bar.behind { background: var(--bb-blocked); }
.bb-score .bar .n { font-size: 26px; font-weight: 600; }
.bb-score .bar .of { font-size: 17px; opacity: .85; }
.bb-score .bar .what {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}

/* what the shortfall is worth, under each bar */
.bb-miss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: -2px 0 10px;
  padding: 0 2px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bb-blocked);
}
.bb-miss .money {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}
.bb-miss.ok { color: var(--color-neutral-600); }

/* catch-up: the admin's stretch plan (more than the usual boats a day) */
.bb-catchup-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: -4px 0 12px;
  padding: 0 2px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--color-neutral-600);
}
.bb-dayhead .bb-catchup {
  margin-left: 2px;
  padding: 0 5px;
  border: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 0;
}

.bb-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-divider);
  font-size: 11px;
}
.bb-legend .key { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bb-legend .sw {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border: 1px solid var(--color-divider);
}

/* the tapped boat */
.bb-detail { position: relative; padding: 12px 40px 12px 14px; margin-bottom: 12px; background: var(--color-bg); }
.bb-detail .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bb-detail .hull { font-family: var(--font-heading); font-size: 26px; font-weight: 600; }
.bb-detail .chip { padding: 3px 9px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bb-detail .rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px 18px; }
.bb-detail .rows .row { display: flex; gap: 8px; font-size: 13px; }
.bb-detail .rows .k { color: var(--color-neutral-700); min-width: 88px; }
.bb-detail .rows .v { font-weight: 500; }
.bb-close {
  position: absolute; top: 6px; right: 8px;
  appearance: none; border: 0; background: transparent;
  font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--color-neutral-700);
}

@media (max-width: 760px) {
  /* One column, board first: on a phone you came to find a boat, not
     to read the month's percentage. */
  .bb-grid { grid-template-columns: minmax(0, 1fr); }
  .bb-weekhead .title { font-size: 17px; }
  .bb-dayhead { font-size: 10px; letter-spacing: .06em; }
  .bb-day.today .bb-dayhead::after { content: "·"; }
  .bb-cell { padding: 8px 2px; }
  .bb-legend { grid-template-columns: 1fr 1fr; } /* wider than it is tall on a phone */
  /* A phone cell has no room for the words beside the hull number: the ECO
     tag becomes a corner mark (solid = first boat), and the card says the
     rest. The legend and the card keep the words. */
  .bb-cell .bb-eco {
    top: 0; left: 0; padding: 0;
    width: 0; height: 0; font-size: 0; line-height: 0;
    border-radius: 0; background: transparent;
    border-style: solid; border-width: 10px 10px 0 0;
    border-color: var(--color-text) transparent transparent transparent;
  }
  .bb-cell .bb-eco:not(.first) { border-width: 7px 7px 0 0; opacity: .7; }
  .bb-cell .bb-note { padding: 0 2px 6px 2px; font-size: 14px; }
  .bb-cell .bb-offday { bottom: 0; left: 0; padding: 0 2px; font-size: 8px; line-height: 11px; }
  .bb-cell .bb-qa { bottom: 0; right: 0; padding: 0 2px; font-size: 8px; line-height: 11px; }
}

/* Desktop: the board fills whatever screen it is on. The panel drops its
   max-width while the board is showing, and every size on the board is a
   multiple of --bb-s - 1px on a 1440x860 window, growing with the width
   OR the height, whichever runs out first, so a wall TV gets a bigger
   board rather than a wider one with the same small cells and the two
   weeks still fit top to bottom. Never smaller than today's sizes (a
   small laptop scrolls, as it did), never more than 3x. */
@media (min-width: 761px) {
  .stage:has(#screen-board:not(.hidden)) { padding: 12px 14px 16px; }
  .panel:has(#screen-board:not(.hidden)) { max-width: none; }
  #screen-board {
    --bb-s: clamp(1px, min(100vw / 1440, 100vh / 860), 3px);
    padding: calc(var(--bb-s) * 18);
  }
  #screen-board .screen-head { margin-bottom: calc(var(--bb-s) * 12); padding-bottom: calc(var(--bb-s) * 8); }
  #screen-board .screen-head .kicker { font-size: calc(var(--bb-s) * 11); }
  #screen-board .screen-head h2 { font-size: calc(var(--bb-s) * 28); }
  #screen-board .screen-head .context .clock { font-size: calc(var(--bb-s) * 24); }
  #screen-board .screen-head .context .source { font-size: calc(var(--bb-s) * 12); }

  #screen-board .bb-nav { margin-bottom: calc(var(--bb-s) * 10); }
  #screen-board .bb-grid { grid-template-columns: minmax(0, 1fr) calc(var(--bb-s) * 236); gap: calc(var(--bb-s) * 16); }
  #screen-board .bb-weeks { gap: calc(var(--bb-s) * 12); }
  #screen-board .bb-weekhead { padding: calc(var(--bb-s) * 6) calc(var(--bb-s) * 12); }
  #screen-board .bb-weekhead .title { font-size: calc(var(--bb-s) * 20); }
  #screen-board .bb-weekhead .meta { font-size: calc(var(--bb-s) * 11); gap: calc(var(--bb-s) * 12); }
  #screen-board .bb-dayhead { font-size: calc(var(--bb-s) * 12); padding: calc(var(--bb-s) * 5) 4px; }
  #screen-board .bb-dayhead .num { font-size: calc(var(--bb-s) * 15); }
  #screen-board .bb-cell { font-size: calc(var(--bb-s) * 21); padding: calc(var(--bb-s) * 9) 4px; }
  #screen-board .bb-empty { padding: calc(var(--bb-s) * 9) 4px; font-size: calc(var(--bb-s) * 14); }
  #screen-board .bb-cell.special::after { border-width: 0 calc(var(--bb-s) * 10) calc(var(--bb-s) * 10) 0; }
  #screen-board .bb-cell .bb-note { font-size: calc(var(--bb-s) * 20); }
  #screen-board .bb-cell .bb-eco { font-size: calc(var(--bb-s) * 9); line-height: calc(var(--bb-s) * 13); padding: 0 calc(var(--bb-s) * 4); }
  #screen-board .bb-cell .bb-offday { font-size: calc(var(--bb-s) * 9); line-height: calc(var(--bb-s) * 13); padding: 0 calc(var(--bb-s) * 4); }
  #screen-board .bb-cell .bb-qa { font-size: calc(var(--bb-s) * 9); line-height: calc(var(--bb-s) * 13); padding: 0 calc(var(--bb-s) * 4); }

  #screen-board .bb-score { padding: calc(var(--bb-s) * 14) calc(var(--bb-s) * 14) calc(var(--bb-s) * 12); }
  #screen-board .bb-score .pct { font-size: calc(var(--bb-s) * 72); }
  #screen-board .bb-score .bar { padding: calc(var(--bb-s) * 7) calc(var(--bb-s) * 10); }
  #screen-board .bb-score .bar .n { font-size: calc(var(--bb-s) * 26); }
  #screen-board .bb-score .bar .of { font-size: calc(var(--bb-s) * 17); }
  #screen-board .bb-score .bar .what { font-size: calc(var(--bb-s) * 10); }
  #screen-board .bb-miss { font-size: calc(var(--bb-s) * 11); }
  #screen-board .bb-miss .money { font-size: calc(var(--bb-s) * 17); }
  #screen-board .bb-legend { font-size: calc(var(--bb-s) * 11); gap: calc(var(--bb-s) * 4) 10px; }
  #screen-board .bb-legend .sw { width: calc(var(--bb-s) * 13); height: calc(var(--bb-s) * 13); }

  #screen-board .bb-detail .hull { font-size: calc(var(--bb-s) * 26); }
  #screen-board .bb-detail .chip { font-size: calc(var(--bb-s) * 12); }
  #screen-board .bb-detail .rows { grid-template-columns: repeat(auto-fit, minmax(calc(var(--bb-s) * 180), 1fr)); }
  #screen-board .bb-detail .rows .row { font-size: calc(var(--bb-s) * 13); }
  #screen-board .bb-detail .rows .k { min-width: calc(var(--bb-s) * 88); }
}

/* ══ 09 Engineering — Change Open Jobs ══════════════════════════════════
   Stays inside the mono + brick palette: accent means "will run", brick
   means "blocked", and a warning is brick-toned text without the fill, so
   the eye lands on the blocked rows first. Amber is deliberately not used
   here — the Build Board owns it for stages and it would read as a stage. */

.eng-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-2);
}
.eng-grid .eng-narrow { max-width: 130px; }
.eng-grid .eng-wide { grid-column: 1 / -1; }
.eng-hint {
  display: block; margin-top: 4px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.eng-actions {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); flex-wrap: wrap;
}
.eng-msg { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.eng-msg.bad { color: var(--color-brick); }

.eng-summary {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  font-size: 13px; margin: var(--space-1) 0 var(--space-2);
}
.eng-summary .ok { color: var(--color-accent-700); }
.eng-summary .bad { color: var(--color-brick); }
.eng-summary .warn { color: color-mix(in srgb, var(--color-brick) 70%, var(--color-text)); }

.eng-pickbar { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }

.eng-rows { display: flex; flex-direction: column; }
.eng-row {
  display: flex; gap: var(--space-2); padding: 10px 0;
  border-top: 1px solid var(--color-divider);
}
.eng-row:last-child { border-bottom: 1px solid var(--color-divider); }
.eng-row.blocked { opacity: 0.75; }
.eng-tickcell { width: 22px; padding-top: 2px; flex: none; }
.eng-tickcell input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.eng-x { color: var(--color-brick); font-weight: 600; }
.eng-rowbody { flex: 1; min-width: 0; }
.eng-rowhead { display: flex; gap: var(--space-2); align-items: baseline; }
.eng-rowhead .job { font-weight: 600; font-variant-numeric: tabular-nums; }
.eng-rowhead .part { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.eng-detail { font-size: 12px; margin-top: 3px; }
.eng-detail.bad { color: var(--color-brick); }
.eng-detail .dim { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
/* The parts a multi-part move is carrying, one line under the assemblies. */
.mv-parts { margin-top: 3px; }
.eng-warn {
  font-size: 12px; margin-top: 4px; padding-left: 2px;
  color: color-mix(in srgb, var(--color-brick) 75%, var(--color-text));
}

/* — run progress — */
.eng-progress {
  height: 4px; background: var(--color-neutral-300);
  margin: var(--space-1) 0 var(--space-2);
}
.eng-progress .bar { height: 100%; background: var(--color-accent); transition: width .3s; }
.eng-runhead { font-size: 13px; margin-bottom: var(--space-2); }
.eng-runhead.ok { color: var(--color-accent-700); }
.eng-runhead.bad { color: var(--color-brick); }
.eng-runrows { display: flex; flex-direction: column; gap: 4px; }
.eng-runrow {
  display: flex; gap: var(--space-2); align-items: baseline; font-size: 12px;
}
.eng-runrow .mark { width: 14px; flex: none; }
.eng-runrow .job { font-weight: 600; font-variant-numeric: tabular-nums; width: 62px; flex: none; }
.eng-runrow .detail { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.eng-runrow.ok .mark { color: var(--color-accent-700); }
.eng-runrow.bad .mark, .eng-runrow.bad .detail { color: var(--color-brick); }
.eng-runrow.warn .mark { color: color-mix(in srgb, var(--color-brick) 70%, var(--color-text)); }

/* — Move BOM Material —
   Reuses the eng- row furniture above; these are only the parts a BOM move
   needs and a job change doesn't: the editable target box on every source
   line, and the ECO group hand-off that ends the run. */

.bom-srcs { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.bom-src, .bom-skip {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: 12px; flex-wrap: wrap;
}
.bom-src .dim, .bom-skip .dim {
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.bom-skip .job { font-weight: 600; }

/* Deliberately small and quiet: it is a correction, not a primary control,
   and there is one on every row. */
.input.bom-override {
  width: 165px; padding: 3px 6px; font-size: 12px;
  font-family: ui-monospace, monospace;
}

.bom-skipbox {
  margin-top: var(--space-3); padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 6px;
}
.bom-skipbox h4 { margin: 0; font-size: 13px; }

.bom-group { font-size: 12px; margin-bottom: var(--space-2); }

/* The instruction the whole feature exists to deliver: nothing is live yet. */
.bom-next {
  margin-top: var(--space-3); padding: var(--space-2);
  border: 1px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  font-size: 13px;
}
.bom-next .microlabel { display: block; margin-bottom: 4px; }
.bom-next .pr-sign-sub { margin-bottom: 0; }

/* Part numbers here run to 93-1-320DLX-000, well past the job column. */
#bomRun .eng-runrow .job { width: 150px; }

/* — BOM Change Sheet —
   The row furniture is eng- again; new here is the sheet box and the per-kit
   line table. Lines Epicor already matches are dimmed rather than hidden:
   "already done" is the answer to "did anybody do this yet?". */
.input.bsh-text {
  font-family: ui-monospace, monospace; font-size: 12px;
  white-space: pre; overflow: auto; min-height: 150px; tab-size: 16;
}
.bsh-scroll { overflow-x: auto; margin-top: 6px; }
.bsh-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.bsh-table th {
  text-align: left; font-weight: 600; font-size: 11px; white-space: nowrap;
  padding: 2px 10px 4px 0; border-bottom: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.bsh-table td {
  padding: 4px 10px 4px 0; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 55%, transparent);
}
.bsh-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsh-table td.mono { font-family: ui-monospace, monospace; white-space: nowrap; }
.bsh-table td.desc { min-width: 180px; }
.bsh-table td.eff { min-width: 240px; }
.bsh-table tr.ok .eff b { color: var(--color-accent-700); }
.bsh-table tr.warn .eff b { color: color-mix(in srgb, var(--color-brick) 70%, var(--color-text)); }
.bsh-table tr.bad td { color: var(--color-brick); }
.bsh-table tr.done td { color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.bsh-table tr.done.warned .eng-warn { opacity: 1; }
.eng-row.nothing { opacity: 0.8; }
.bsh-done { color: color-mix(in srgb, var(--color-text) 45%, transparent); font-weight: 600; }
.bsh-details summary {
  font-size: 12px; cursor: pointer; margin-top: 6px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
#bshRun .eng-runrow .job { width: 200px; }

/* — Move Material on Open Jobs —
   Only the issued-jobs list is new furniture; the rows reuse eng- above. */
.mv-issued { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mv-chip {
  font-size: 12px; padding: 2px 7px;
  border: 1px solid var(--color-divider);
  font-variant-numeric: tabular-nums;
}
.mv-chip .dim { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
#mvRun .eng-runrow .job { width: 62px; }

/* ── Quality board (parts-on-hold sub-page of the Warehouse tab) ──
   Shares the Hot Board's table shell (.hb-table and friends) on
   purpose: same people, same working-document behaviour, so the only
   new rules here are the ones this board genuinely needs - the big
   comment box, where the part is, and whether its PO has landed. */
.qb-table { min-width: 1560px; }
/* The comment IS the board - it gets real room, and grows rather than
   scrolling a three-line box while somebody writes the story out. */
.qb-commentcell { min-width: 340px; }
.hb-table textarea.qb-comment {
  width: 100%;
  min-width: 320px;
  min-height: 62px;
  resize: vertical;
  line-height: 1.35;
  font-family: inherit;
  padding: 6px 8px;
}
.qb-addcomment { min-height: 84px; resize: vertical; font-family: inherit; line-height: 1.35; }
.qb-bin { width: 130px; }
/* The part has left the bin: flagged, never auto-archived - somebody
   moving it is not somebody resolving it, so the row stays until a
   person closes it. */
.qb-gone {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #9a5b00;
  white-space: nowrap;
}
tr.qb-out:not(.hb-complete) td { background: #fdf3c4; }
tr.qb-out:not(.hb-complete) .input:not(.hb-st) { background: #fffbe8; }
/* The receipt column, the thing the board is actually watching for.
   Waiting is amber, landed is green and wins over everything except
   Complete - a received PO is the cue to go and put the part back. */
.qb-rec-wait { color: #9a5b00; font-weight: 700; }
.qb-rec-wait .hb-po-sub { color: #9a5b00; }
.qb-rec-in { color: #1c7a3d; font-weight: 700; }
.qb-rec-in .hb-inc { color: #1c7a3d; }
.qb-rec-in .hb-po-sub { color: #1c7a3d; font-weight: 400; }
.qb-rec-err { color: var(--color-brick); font-weight: 700; }
tr.qb-received:not(.hb-complete):not(.qb-out) td {
  background: color-mix(in srgb, #1c7a3d 7%, transparent);
}
/* In the drill-in, the receipt line that is actually THIS part (a PO
   often carries several). */
.hb-inc-tbl tr.qb-rec-match td { font-weight: 700; color: #1c7a3d; }

/* ── Red Tags (Parts tab form + Warehouse sub-page) ──
   The board borrows the Hot Board's table shell the way Quality does;
   the rules here are only what a red tag adds - which kind it is, the
   reason box, the label column, and the ID people search by. */
.rt-kind { display: flex; flex-wrap: wrap; }
.rt-find { max-width: 280px; min-height: 36px; }
.rt-table { min-width: 1780px; }
.rt-table .rt-id { color: var(--color-brick); font-weight: 700; font-size: 12px; }
.rt-table .rt-id span { color: var(--color-neutral-600); font-weight: 400; font-size: 11px; }
.rt-kindchip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--color-divider);
  white-space: nowrap;
}
.rt-kind-tank { background: var(--color-brick); border-color: var(--color-brick); color: #fff; }
.rt-na { color: var(--color-neutral-600); text-align: center; }
.rt-reasoncell { min-width: 260px; }
.hb-table textarea.rt-reason {
  width: 100%;
  min-width: 240px;
  min-height: 44px;
  resize: vertical;
  line-height: 1.35;
  font-family: inherit;
  padding: 6px 8px;
}
.rt-labelcell { white-space: nowrap; }
/* No label has ever come out for this tag - the part may be carrying
   nothing that ties it to the board. */
.rt-noprint { color: var(--color-brick); font-weight: 700; }

/* ══ 10 Changes — the ECO board ═════════════════════════════════════════
   A list of records, not a spreadsheet grid: an ECO carries two long
   text blocks and a part list, so the Hot/Quality board's one-row-per-
   thing table would either truncate the record or scroll sideways
   forever. Collapsed rows read like the old sheet's index; one opens at
   a time into the whole thing.

   Palette follows Engineering next door — accent for the live states,
   brick for cancelled, and the one green the app already uses for
   "done" (the kit board's #1c7a3d). Amber stays off this page: the
   Build Board owns it for stages and it would read as one. */

.eco-toolbar {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: var(--space-2);
}
.eco-toolbar #ecoFilter { flex: 1; min-width: 220px; }
.eco-arch { margin-left: auto; font-size: 12px; }
.eco-readonly {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-msg { font-size: 12px; min-height: 16px; margin-bottom: var(--space-2); }
.eco-msg.ok { color: var(--color-accent-700); }
.eco-msg.err { color: var(--color-brick); }
.eco-new { margin-bottom: var(--space-3); }
.eco-empty {
  padding: 22px 8px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ── the collapsed row ── */

.eco-card {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.eco-card.open { background: var(--color-bg); border-color: var(--color-accent-400); }
.eco-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "id title status" "sub sub sub";
  gap: 2px var(--space-2);
  align-items: baseline;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.eco-head:hover { background: var(--color-neutral-200); }
.eco-id {
  grid-area: id;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  white-space: nowrap;
}
.eco-title { grid-area: title; font-weight: 600; font-size: 14px; }
.eco-sub {
  grid-area: sub;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

/* The status chip. Draft is quiet on purpose — most of the board sits
   there and a wall of colour says nothing. Effective is the one people
   scan for, so it gets the solid fill. */
.eco-st {
  grid-area: status;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  white-space: nowrap;
}
.eco-st-draft { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.eco-st-review { background: var(--color-amber); border-color: var(--color-amber-ink); color: var(--color-amber-ink); }
.eco-st-approved { background: var(--color-accent-100); border-color: var(--color-accent-400); color: var(--color-accent-800); }
.eco-st-progress { background: var(--color-accent-300); border-color: var(--color-accent-600); color: var(--color-accent-900); }
/* Ready: everything green, waiting on the witness - the green of
   Effective, outlined, so the two read as the same family. */
.eco-st-ready { background: color-mix(in srgb, #1c7a3d 10%, transparent); border-color: #1c7a3d; color: #1c7a3d; }
.eco-st-effective { background: #1c7a3d; border-color: #1c7a3d; color: #fff; }
.eco-st-complete { background: color-mix(in srgb, #1c7a3d 18%, transparent); border-color: #1c7a3d; color: #145c2e; }
.eco-st-cancelled { background: var(--color-brick); border-color: var(--color-brick); color: #fff; }

/* ── the open record ── */

.eco-body { padding: 0 12px 14px; border-top: 1px solid var(--color-divider); }
/* The record's sections. Each opens with a rule and a bold header in
   full text colour, with real space between one section and the next -
   the old 11px grey labels let a long record read as one wall of boxes. */
.eco-sec {
  padding: 22px 0 10px;
  border-top: 2px solid var(--color-divider);
}
/* first-of-TYPE: the floor-copy bar is a div ahead of the first section. */
.eco-sec:first-of-type { border-top: 0; padding-top: 16px; }
/* The floor copy - top of the record, because once a change is Approved
   handing that notice out is what it's waiting on. */
.eco-floorbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--color-divider); border-radius: 8px;
}
.eco-floorbar-off { display: block; }
.eco-floorbar-off .hb-po-sub { margin-left: 6px; }
.eco-floorbar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eco-floorbar-warn { color: var(--color-brick); font-size: 12px; font-weight: 600; }
.eco-floorbar-actions { display: flex; gap: var(--space-2); }
.eco-sec-h {
  margin: 0 0 var(--space-2);
  font-size: 15px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.eco-sec-sub {
  margin-left: 6px;
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
/* The header now carries the space above a section's first block. */
.eco-sec > .eco-grid:first-of-type,
.eco-sec > .eco-comments { margin-top: 0; }
.eco-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-2);
}
.eco-grid .eco-wide { grid-column: 1 / -1; }
.eco-big { resize: vertical; font-family: inherit; line-height: 1.4; padding: 6px 8px; }

/* Read-only rendering: the same shape as the input it replaces, so the
   record doesn't reflow depending on who is looking at it. */
.eco-ro {
  min-height: 34px;
  padding: 7px 0;
  font-size: 13px;
  white-space: pre-wrap;
  border-bottom: 1px solid var(--color-divider);
}
.eco-ro-big { min-height: 60px; }
.eco-ro-quiet {
  border-bottom: 0;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* ── when it starts ── */

.eco-eff {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Stamped once, when the change actually went live — the one thing on
   the record that is never re-derived. */
.eco-eff-stamp {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 600;
  color: #1c7a3d;
}

/* ── the part list ── */

.eco-parts { margin-top: var(--space-1); }
.eco-part {
  display: grid;
  grid-template-columns: 108px 1.3fr 1.3fr 70px 1.3fr 1.6fr 32px;
  gap: var(--space-1);
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--color-divider);
}
.eco-part .input { min-height: 32px; font-size: 12px; padding: 4px 6px; width: 100%; }
.eco-part-head {
  border-bottom: 2px solid var(--color-divider);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-partnum { font-variant-numeric: tabular-nums; font-size: 12px; }
.eco-part-empty {
  padding: 10px 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.eco-partdel { padding: 3px 8px; font-size: 14px; line-height: 1; color: var(--color-brick); }
.eco-partadd { margin-top: var(--space-2); font-size: 12px; }
@media (max-width: 900px) {
  /* Seven columns don't fit a phone; the list becomes stacked blocks
     rather than a table scrolled sideways with one thumb. */
  .eco-part { grid-template-columns: 1fr 1fr; }
  .eco-part-head { display: none; }
}

/* ── notes ── */

.eco-comments { margin-top: var(--space-4); }
.eco-comment { padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.eco-comment-who {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-comment-text { font-size: 13px; white-space: pre-wrap; margin-top: 2px; }
.eco-commentadd { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); }
.eco-commentadd textarea { flex: 1; }

.eco-foot {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--space-4); padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.eco-foot .hb-jsave { margin-left: auto; }

/* ── 10 Changes: the runout group ──────────────────────────────────────
   A changeover retires a SET of old parts and waits for the last one, so
   the question isn't "is it gone" but "will they go together". The table
   answers it in the plant's own unit - boats of cover - and the only two
   colours are the two actions: amber on a part that needs ordering,
   green when the shelf is finally clear. */

.eco-runout { grid-column: 1 / -1; margin-top: var(--space-2); }
.eco-runout h5 {
  margin: 0 0 var(--space-1);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-hint-inline {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.eco-rrow {
  display: grid;
  grid-template-columns: 1.6fr 90px 32px;
  gap: var(--space-1);
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--color-divider);
}
.eco-rrow .input { min-height: 32px; font-size: 12px; padding: 4px 6px; width: 100%; }
.eco-rrow-head {
  border-bottom: 2px solid var(--color-divider);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-runout-acts {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* ── the answer ── */

.eco-rr-head {
  margin: var(--space-3) 0 var(--space-1);
  padding: 8px 10px;
  border-left: 3px solid var(--color-divider);
  font-size: 13px; font-weight: 600;
}
/* The one that costs money if it's missed. */
.eco-rr-warn { border-left-color: #b45309; background: var(--color-amber); color: var(--color-amber-ink); }
.eco-rr-ok { border-left-color: var(--color-accent); background: var(--color-accent-100); }
/* The state the whole check exists to catch the arrival of. */
.eco-rr-go { border-left-color: #1c7a3d; background: color-mix(in srgb, #1c7a3d 10%, transparent); color: #145c2e; }
.eco-rr-unknownhead { border-left-color: var(--color-neutral-500); color: var(--color-neutral-700); }

.eco-rr-table { min-width: 720px; font-size: 12px; }
.eco-rr-table td { vertical-align: top; padding: 6px 4px; }
tr.eco-rr-short td { background: var(--color-amber); }
tr.eco-rr-binding td { background: var(--color-accent-100); }
/* "Couldn't look" is not "there is none left" - it reads as neither. */
tr.eco-rr-unknown td { color: var(--color-neutral-600); font-style: italic; }
.eco-assumed { font-size: 10px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.eco-rr-caveats {
  margin-top: var(--space-2);
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-rr-when {
  margin-top: 4px;
  font-size: 10px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
@media (max-width: 900px) {
  .eco-rrow { grid-template-columns: 1fr 70px 32px; }
}

/* ── 10 Changes: a part that doesn't have a number yet ─────────────────
   Engineering drafting a change usually knows what a part has to BE
   before Purchasing has created it in Epicor. Those lines wait, visibly,
   in the one colour this app uses for "somebody has to do something":
   amber, the same as a short runout part. */

.eco-part-awaiting { background: var(--color-amber); }
.eco-part-awaiting .input { background: var(--color-amber-soft); }
.eco-awaiting-tag {
  color: var(--color-amber-ink);
  font-style: normal;
  font-weight: 700;
}
.eco-awaiting-count {
  font-size: 12px; font-weight: 600;
  color: var(--color-amber-ink);
}
.eco-asked {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* The board-wide queue: how much Purchasing is holding up, and the way
   into it. Doubles as a filter, so it reads as a link, not a statistic. */
.eco-waiting {
  font-size: 12px; font-weight: 600;
  color: var(--color-amber-ink);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.eco-waiting.on { color: var(--color-accent-700); }
/* A note the record wrote about itself, not a person's comment. */
.eco-comment-system { border-left: 2px solid var(--color-accent-400); padding-left: 8px; }
.eco-comment-system .eco-comment-text {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-style: italic;
}
/* Purchasing's one box on a board they otherwise only read. */
.eco-part .input.eco-assign { min-height: 30px; font-size: 12px; padding: 3px 6px; width: 100%; }
.eco-assignbtn { font-size: 11px; padding: 3px 8px; }

/* ── 10 Changes: costing ───────────────────────────────────────
   Changes get pushed as cost savings that the part prices don't support.
   The claim and the arithmetic sit next to each other so the gap is
   visible; amber is the disagreement, and it is the only loud thing
   here. */

.eco-cost { grid-column: 1 / -1; }
.eco-cost-table { min-width: 660px; font-size: 12px; }
.eco-cost-table td { vertical-align: top; padding: 6px 4px; }
.eco-cost-table tfoot td {
  border-top: 2px solid var(--color-divider);
  font-weight: 700;
  padding-top: 8px;
}
.eco-cost-in { color: var(--color-accent-700); font-weight: 700; font-size: 11px; }
.eco-cost-out { color: var(--color-neutral-700); font-weight: 700; font-size: 11px; }
.eco-cost-na { color: var(--color-neutral-500); font-size: 11px; }
.eco-cost-none { color: var(--color-amber-ink); font-size: 11px; }
tr.eco-cost-unpriced td { background: var(--color-amber); }
/* The number the whole section exists to produce. */
.eco-cost-delta { font-size: 15px; font-variant-numeric: tabular-nums; }
.eco-cost-delta.up { color: var(--color-brick); }
.eco-cost-delta.down { color: #1c7a3d; }

.eco-quotes { margin-top: var(--space-1); }
.eco-qrow {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 2fr 32px;
  gap: var(--space-1);
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--color-divider);
}
.eco-qrow .input { min-height: 32px; font-size: 12px; padding: 4px 6px; width: 100%; }
@media (max-width: 900px) {
  .eco-qrow { grid-template-columns: 1fr 1fr; }
}
/* The supplier price list, shown beside standard cost - never the basis
   for the total (see ecoCost.js). A gap is worth a look, not a colour
   that says something is wrong. */
.eco-cost-sup { color: var(--color-neutral-700); }
.eco-cost-gap { font-size: 10px; font-weight: 700; color: var(--color-amber-ink); white-space: nowrap; }
/* A quote can be the PDF itself or a link to where it lives - the row
   shows whichever it has and offers the other. */
.eco-qrow { grid-template-columns: 1.1fr 0.9fr 0.9fr 1.6fr auto 32px; }
.eco-qfile { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; }
.eco-qfile .hb-po-sub { display: inline; }
@media (max-width: 900px) {
  .eco-qrow { grid-template-columns: 1fr 1fr; }
}
/* ── 10 Changes: standard work instructions ─────────────────────────
   A change to a part is a change to how the boat gets built. Its own
   hand-off to Continuous Improvement, and the one sign-off on the board
   that carries a document as its evidence. */

.eco-swi { grid-column: 1 / -1; }
.eco-swi-file { font-size: 12px; margin-right: auto; }
/* ── 10 Changes: applicable drawings ────────────────────────────────
   As many PDFs as Engineering has worth reading beside the change. One
   row per file: the name opens it, the note says what it shows. */
.eco-drawings { margin-top: var(--space-1); }
.eco-drawing {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr 32px;
  gap: var(--space-2);
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-divider);
}
.eco-drawing-file { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eco-drawing-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.eco-drawing-note { font-size: 12px; }
.eco-drawing .input { min-height: 32px; font-size: 12px; padding: 4px 6px; width: 100%; }
@media (max-width: 900px) {
  .eco-drawing { grid-template-columns: 1fr 32px; }
  .eco-drawing-notecell { grid-column: 1 / -1; grid-row: 2; }
}
/* An admin signing for a department they don't carry. Never quiet - see
   access.isOverride. */
.eco-override { color: var(--color-brick); }
/* ── 10 Changes: the four sign-offs ─────────────────────────────────
   One card per department. Green is a current signature; amber is one
   made before the change was edited, which no longer counts. */
.eco-sos {
  display: grid;
  /* One row of cards however many departments sign, down to ~170px each. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.eco-so {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-neutral-400);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  font-size: 12px;
  min-width: 0;
}
.eco-so-signed { border-left-color: #1c7a3d; }
.eco-so-signed .eco-so-who { color: #145c2e; }
.eco-so-stale { border-left-color: #b45309; background: var(--color-amber-soft); }
.eco-so-dept {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.eco-so-who { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.eco-so-waiting { color: color-mix(in srgb, var(--color-text) 50%, transparent); font-weight: 600; }
.eco-so-when { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.eco-so-flag { font-size: 11px; font-weight: 700; color: var(--color-amber-ink); }
.eco-so-note { font-size: 12px; font-style: italic; overflow-wrap: anywhere; }
.eco-so-acts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.eco-so-acts .input { min-height: 30px; font-size: 12px; padding: 3px 6px; width: 100%; }
.eco-so-acts .btn { font-size: 12px; padding: 5px 8px; }
.eco-cleared-tag { color: #145c2e; font-style: normal; font-weight: 700; }
.eco-step-signoff { border-left-color: var(--color-accent-700); }
.eco-step-signoff .eco-step-tag { color: var(--color-accent-800); }

/* ── 10 Changes: readiness gates ─────────────────────────────────────
   What Epicor says, per gate and per part. Colour carries the state and a
   word always goes with it; "couldn't check" is grey and italic so an
   Epicor outage never reads as a wall of red. */
.eco-gates-when { font-size: 12px; margin-right: auto; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.eco-gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.eco-gate {
  padding: 7px 9px;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-neutral-400);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  font-size: 12px;
  min-width: 0;
}
.eco-gate-label {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.eco-gate-state { font-weight: 700; font-size: 13px; }
.eco-gate-detail { font-size: 11px; overflow-wrap: anywhere; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.eco-gate-green { border-left-color: #1c7a3d; }
.eco-gate-green .eco-gate-state { color: #145c2e; }
.eco-gate-amber { border-left-color: #b45309; background: var(--color-amber-soft); }
.eco-gate-amber .eco-gate-state { color: var(--color-amber-ink); }
.eco-gate-red { border-left-color: var(--color-brick); }
.eco-gate-red .eco-gate-state { color: var(--color-brick); }
.eco-gate-unknown .eco-gate-state { color: var(--color-neutral-600); font-style: italic; }
.eco-gate-na { opacity: .7; }
.eco-gates-table { min-width: 980px; font-size: 11px; margin-top: var(--space-2); }
.eco-gates-table td { vertical-align: top; padding: 6px 4px; }
.eco-gside { white-space: nowrap; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.eco-gdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; vertical-align: 1px; background: var(--color-neutral-400);
}
.eco-gcell-green .eco-gdot { background: #1c7a3d; }
.eco-gcell-amber .eco-gdot { background: #b45309; }
.eco-gcell-red .eco-gdot { background: var(--color-brick); }
.eco-gcell-red { color: var(--color-brick); font-weight: 600; }
.eco-gcell-unknown { color: var(--color-neutral-600); font-style: italic; }
.eco-gcell-na { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.eco-gcell-none { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.eco-gjobs { margin-top: 2px; font-size: 10px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.eco-blocked-tag { color: var(--color-brick); font-style: normal; font-weight: 700; }

/* ── 10 Changes: the expected first boat, and Effective ───────────────
   The board names the boat; a manager witnesses the change on it. The
   steps read as a checklist - ticked green, open ones grey - so what is
   still in the way is the first open line. */
.eco-expected b { font-size: 15px; }
.eco-expected-why { margin-top: 3px; font-size: 12px; font-weight: 400; }
.eco-eff-steps { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.eco-eff-steps li {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px;
}
.eco-eff-mark { width: 16px; flex: none; font-weight: 800; }
.eco-eff-done .eco-eff-mark { color: #1c7a3d; }
.eco-eff-todo { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.eco-eff-todo .eco-eff-mark { color: var(--color-neutral-400); }
.eco-witness-pick { min-width: 0; max-width: 280px; }
.eco-witness-form {
  display: grid; gap: var(--space-2); margin-top: var(--space-2);
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto;
}
@media (max-width: 700px) {
  .eco-witness-form { grid-template-columns: 1fr; }
}

/* ── 10 Changes: Engineering runs posted back (phase 6) ───────────────
   What the tools actually did for this change. Green rule = everything it
   was asked to do landed; brick = something failed; grey = nothing ran. */
.eco-run {
  margin: 6px 0; padding: 7px 10px;
  border: 1px solid var(--color-divider); border-left: 3px solid var(--color-neutral-400);
  border-radius: var(--radius-md); background: var(--color-neutral-100);
  font-size: 12px;
}
.eco-run-ok { border-left-color: #1c7a3d; }
.eco-run-bad { border-left-color: var(--color-brick); }
.eco-run-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.eco-run-what { margin-top: 2px; overflow-wrap: anywhere; }
.eco-run-list { margin-top: 2px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 65%, transparent); overflow-wrap: anywhere; }
.eco-step-engineering { border-left-color: var(--color-accent-700); }
.eco-step-engineering .eco-step-tag { color: var(--color-accent-800); }

/* 09 Engineering: the change the work is for - one picker over all five
   tools, above them. */
.eng-ecobar-row { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.eng-ecobar-row .field { flex: 1 1 320px; min-width: 0; }
.eng-ecobar-row select { width: 100%; }
.eng-econotes { margin-top: 6px; font-size: 12px; }
.eng-econotes ul { margin: 4px 0 0 18px; padding: 0; }

/* Push toggles wrap - there are several now; keep each readable. */
#ecoPush { display: flex; gap: 6px; flex-wrap: wrap; }
#ecoPush .btn { font-size: 11px; padding: 4px 8px; }

/* ── 10 Changes: the timeline in Additional Notes ─────────────────
   Steps are compact lines with a coloured rule down the left - the spine
   (draft, status moves) in accent and bold, Purchasing amber, Continuous
   Improvement green. What people wrote stays a card, so a note never
   reads as something the system did. */

.eco-step {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: 5px 0 5px 10px;
  border-left: 3px solid var(--color-neutral-300);
  font-size: 12px;
}
.eco-step-when {
  font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-step-what { color: var(--color-text); }
.eco-step-who {
  font-size: 11px; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-step-tag {
  margin-right: 6px;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
}
.eco-step-created, .eco-step-status { border-left-color: var(--color-accent-500); }
.eco-step-created .eco-step-what, .eco-step-status .eco-step-what { font-weight: 700; }
.eco-step-purchasing { border-left-color: #b45309; }
.eco-step-purchasing .eco-step-tag { color: var(--color-amber-ink); }
.eco-step-ci { border-left-color: #1c7a3d; }
.eco-step-ci .eco-step-tag { color: #145c2e; }
.eco-step-quote { border-left-color: var(--color-neutral-500); }
.eco-comments .eco-comment {
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
@media (max-width: 700px) {
  .eco-step { grid-template-columns: 1fr; gap: 0; }
}
/* The note box sits ABOVE the log (Tyler, 2026-09-11): write first,
   history underneath. */
.eco-comments > .eco-commentadd:first-child { margin-top: 0; margin-bottom: var(--space-3); }

/* ── 10 Changes: DMS, a sub-section of Epicor ────────────────────────
   A dashed rule and a smaller header than the section's own, so it reads
   as part of Epicor rather than a tenth section. Each new option is a
   card; the worked-out Epicor price is the bold number. */

.eco-subsec {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-divider);
}
.eco-subsec > h5 {
  margin: 0 0 var(--space-1);
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text);
}
.eco-dmsopts { margin-top: var(--space-3); }
.eco-dmsopt {
  margin-bottom: var(--space-2);
  padding: 8px 10px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.eco-dmsopt-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
}
.eco-dmsopt-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.eco-dmsopt-grid .eco-wide { grid-column: 1 / -1; }
.eco-dms-price { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .eco-dmsopt-grid { grid-template-columns: 1fr; }
}
/* DMS "Changes": pick every kind that applies. */
.eco-dms-chips { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.eco-dmspu .eco-dmsopt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- 11 Lamination: the mold plan (lam.js) ---- */

.lam-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 6px; }
.lam-toolbar .input { flex: 1; min-width: 220px; }
.lam-warn { font-size: 13px; color: #9a5b00; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 2px; }
.plan-msg.lam-err { color: var(--color-brick); font-weight: 700; }
.plan-msg.lam-ok { color: var(--color-accent-700); }

.lam-day { margin-top: 20px; }
.lam-day-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-bottom: 2px solid var(--color-text); padding-bottom: 4px; margin-bottom: 2px;
}
.lam-day-head h4 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.lam-day-head .note { font-size: 12px; color: var(--color-neutral-600); }
.lam-day.today .lam-day-head h4, .lam-day.now .lam-day-head h4 { color: var(--color-accent-700); }
.lam-day.stuck .lam-day-head { border-color: var(--color-brick); }
.lam-day.stuck .lam-day-head h4 { color: var(--color-brick); }

.lam-row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--color-divider); align-items: start;
}
.lam-boat .hull { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lam-boat .sub { font-size: 12px; color: var(--color-neutral-600); }
.lam-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lam-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--color-divider); border-radius: 3px; padding: 1px 6px;
}
.lam-chip.unknown { border-color: var(--color-brick); color: var(--color-brick); }
.lam-when { font-size: 11px; color: var(--color-neutral-600); margin-top: 4px; }
.lam-late { font-size: 11px; font-weight: 700; color: #9a5b00; margin-top: 4px; }

.lam-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lam-part {
  border: 1px solid var(--color-divider); border-left: 5px solid var(--lam-comp);
  border-radius: 4px; padding: 5px 8px 6px; min-width: 0;
}
.lam-part .pname { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); }
.lam-part .mold { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
/* The pick: the one mold the plan says to use. */
.lam-part.pick { background: var(--color-accent-100); border-color: var(--color-accent-600); border-left-color: var(--lam-comp); }
.lam-part.pick .mold { color: var(--color-accent-800); }
.lam-part.inmold { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.lam-part.inmold.guess .mold { color: var(--color-neutral-700); font-style: italic; }
.lam-part.none .mold { color: var(--color-neutral-500); }
.lam-part.out .mold { color: var(--color-neutral-500); font-size: 15px; }
.lam-alts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.lam-alt {
  font-size: 10px; font-variant-numeric: tabular-nums; padding: 0 4px;
  border-radius: 3px; border: 1px solid var(--color-divider); color: var(--color-neutral-700);
}
.lam-alt.busy { color: var(--color-neutral-500); text-decoration: line-through; }
.lam-alt.offline { color: var(--color-brick); border-color: var(--color-brick); }
.lam-src { font-size: 10px; color: var(--color-neutral-600); }
.lam-pnote { font-size: 11px; color: #9a5b00; margin-top: 3px; line-height: 1.25; }
.lam-wait { font-size: 12px; color: #9a5b00; margin-top: 6px; }
.lam-act .btn { font-size: 12px; padding: 5px 12px; }

.lam-molds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.lam-mold {
  border: 1px solid var(--color-divider); border-top: 5px solid var(--lam-comp);
  border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.lam-mold.offline {
  border-color: var(--color-brick);
  background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--color-brick) 7%, transparent) 9px 18px);
}
.lam-mold-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lam-mold .mid { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lam-mold .models { font-size: 11px; color: var(--color-neutral-600); }
.lam-mold .line { font-size: 12px; }
.lam-mold .btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.lam-mold .btns .btn { font-size: 12px; padding: 4px 9px; }
.lam-state { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; }
.lam-state.free { background: #e7f5eb; color: #1c7a3d; }
.lam-state.in-use { background: var(--color-accent-700); color: #fff; }
.lam-state.offline { background: var(--color-brick); color: #fff; }
.lam-offnote { font-weight: 700; color: var(--color-brick); }
.lam-over { color: var(--color-brick); font-weight: 700; }

.lam-labelbar { align-items: center; gap: 14px; flex-wrap: wrap; }
.lam-labelbar label { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.lam-label-models { font-size: 12px; color: var(--color-neutral-700); }
.lam-label-code { font-family: ui-monospace, monospace; color: var(--color-neutral-600); font-size: 11px; }

@media (max-width: 820px) {
  .lam-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lam-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ 11 Org Chart ══ */

.org-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 10px;
}
.org-toolbar > div { display: flex; gap: 6px; align-items: center; }
.org-tools-print { margin-left: auto; }
.org-tools-print .input { width: auto; min-height: 38px; padding: 6px 8px; }
.org-tools-view .btn { min-width: 38px; }
.org-help { margin: 0 0 6px; }

.org-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.org-canvas {
  position: relative;
  overflow: auto;
  height: max(460px, calc(100vh - 290px));
  background:
    radial-gradient(circle, color-mix(in srgb, var(--color-text) 13%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--color-neutral-100);
  border: 1px solid var(--color-divider);
  outline: none;
}
.org-sizer { position: relative; overflow: hidden; }
.org-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.org-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.org-lines line { stroke: var(--color-neutral-600); stroke-width: 1.5; }
.org-lines line.org-temp { stroke: var(--color-brick); stroke-width: 2; stroke-dasharray: 6 4; }
.org-lines line.org-temp.ok { stroke: var(--color-accent); stroke-dasharray: none; }

.org-box {
  position: absolute;
  box-sizing: border-box;
  padding: 11px 10px 8px;
  background: #fff;
  border: 1px solid var(--color-neutral-400);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  user-select: none;
}
.org-box.editable { cursor: pointer; overflow: visible; }
.org-box.editable:hover { border-color: var(--color-accent-500); }
.org-box.open { background: var(--color-neutral-100); border-style: dashed; }
.org-box.selected { border: 2px solid var(--color-accent); padding: 10px 9px 7px; box-shadow: var(--shadow-md); }
.org-box.drop-target { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.org-box.drop-bad { outline: 2px dashed var(--color-brick); outline-offset: 2px; }
.org-box.dragging { opacity: .7; }
.org-stripe { position: absolute; left: 0; right: 0; top: 0; height: 5px; }
.org-name, .org-title, .org-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-name { font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--color-text); }
.org-placeholder { font-weight: 400; font-style: italic; color: var(--color-neutral-600); }
.org-title { font-size: 12.5px; line-height: 1.2; color: var(--color-neutral-800); }
.org-note { font-size: 11.5px; line-height: 1.2; color: var(--color-neutral-600); }

/* The "tie a line" dot on top of each box (admins). */
.org-handle {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  cursor: crosshair;
  touch-action: none;
  opacity: 0;
  transition: opacity .12s;
}
.org-handle::after { content: ""; position: absolute; inset: -9px; } /* bigger target than it looks */
.org-box.editable:hover .org-handle,
.org-box.selected .org-handle,
.org-box.dragging .org-handle { opacity: 1; }
@media (hover: none) { .org-box.editable .org-handle { opacity: 1; } }

.org-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--color-neutral-600);
  font-size: 15px;
}

.org-editor {
  width: 290px;
  box-sizing: border-box;
  padding: 12px 14px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.org-editor .field { margin-bottom: 10px; }
.org-editor .input { width: 100%; box-sizing: border-box; }
.org-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.org-x { min-width: 32px; padding: 2px 8px; font-size: 18px; line-height: 1; }
.org-editor-row { display: flex; gap: 6px; margin-top: 8px; }
.org-editor-row .btn { flex: 1; font-size: 13px; padding: 7px 8px; }
.org-check { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0 6px; }
.org-danger { color: var(--color-brick); border-color: color-mix(in srgb, var(--color-brick) 45%, transparent); }
.org-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.org-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 20%, transparent);
  cursor: pointer;
}
.org-swatch.none {
  background: linear-gradient(135deg, #fff 45%, var(--color-brick) 45%, var(--color-brick) 55%, #fff 55%);
}
.org-swatch.on { border-color: var(--color-text); }

@media (max-width: 900px) {
  .org-body { grid-template-columns: minmax(0, 1fr); }
  .org-editor { width: auto; }
  .org-canvas { height: 60vh; }
  .org-tools-print { margin-left: 0; }
}

/* ---- MDAs on 09 Changes (mda.js) ---- */
.mda-section { margin-bottom: var(--space-3); }
.mda-section-head {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-1);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
}
.mda-section-head h3 { margin: 0; font-size: inherit; }
.mda-card { border-left: 3px solid var(--color-amber-ink); }
.mda-st-usedup { background: var(--color-brick); border-color: var(--color-brick); color: #fff; }
.mda-sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mda-side-h { margin: 0 0 var(--space-1); font-size: 12px; font-weight: 600; }
.mda-part {
  display: grid; grid-template-columns: 1fr 96px 32px; gap: var(--space-1);
  align-items: center; padding: 3px 0; border-bottom: 1px solid var(--color-divider);
}
.mda-table td, .mda-table th { white-space: nowrap; }
.mda-last { margin: var(--space-2) 0; font-size: 13px; }
.mda-jobs { margin: var(--space-1) 0 0; padding-left: 18px; font-size: 12px; }
@media (max-width: 760px) {
  .mda-sides { grid-template-columns: 1fr; }
}

/* ══ 12 Upholstery / 13 Fabrication (dept.js) ══ */

.dr-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.dr-toolbar .input { flex: 1 1 240px; max-width: 420px; }
.dr-warn {
  background: var(--color-amber);
  color: var(--color-amber-ink);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.dr-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .dr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dr-tile { padding: 12px 14px; border: 1px solid var(--color-divider); min-width: 0; }
.dr-tile-v {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 34px;
  line-height: 1.05;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.dr-tile-f { font-size: 12px; color: var(--color-neutral-600); margin-top: 4px; }

.dr-sec { border: 1px solid var(--color-divider); margin-bottom: 10px; }
.dr-sec > summary {
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  list-style-position: inside;
}
.dr-sec > summary:hover { background: var(--color-neutral-100); }
.dr-sec-t {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dr-count {
  font-size: 12px;
  font-weight: 700;
  background: var(--color-neutral-300);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.dr-sec-x { font-size: 12px; font-weight: 700; color: var(--color-amber-ink); }
.dr-sec-sub { flex-basis: 100%; font-size: 12px; color: var(--color-neutral-600); padding-left: 18px; }
.dr-sec-b { padding: 0 14px 14px; }
.dr-gap { margin-top: 10px; }

.dr-scroll { overflow-x: auto; }
.dr-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.dr-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: 6px;
  border-bottom: 2px solid var(--color-divider);
  white-space: nowrap;
}
.dr-table td { padding: 6px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.dr-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-table tr.dr-first td { border-top: 2px solid var(--color-divider); }
.dr-part { min-width: 180px; max-width: 340px; }
.dr-desc { font-size: 12px; color: var(--color-neutral-600); line-height: 1.3; }
.dr-tag {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  padding: 1px 5px;
}
.dr-tag-bad { background: var(--color-brick); color: #fff; }
.dr-flag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-amber);
  color: var(--color-amber-ink);
  padding: 2px 7px;
  white-space: nowrap;
}
.dr-flag-bad { background: var(--color-brick); color: #fff; }
.dr-flag-dim { background: var(--color-neutral-200); color: var(--color-neutral-700); font-weight: 400; }

/* Build sub-tab (dept.js) */
.dr-week { flex: 0 1 320px; }
.dr-mode {
  border-left: 4px solid var(--color-accent-600);
  background: var(--color-accent-100);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  display: grid;
  gap: 6px;
}
.dr-day {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 14px 0 6px;
}
.dr-boat { border: 1px solid var(--color-divider); margin-bottom: 8px; background: var(--color-bg); }
.dr-boat.open { border-color: var(--color-accent-600); }
.dr-boat-h {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
  color: var(--color-text);
  font: inherit;
}
.dr-boat-h:hover:not([disabled]) { background: var(--color-neutral-100); }
.dr-boat-h[disabled] { cursor: default; opacity: .75; }
.dr-hull {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.dr-meta { font-size: 13px; color: var(--color-neutral-700); }
.dr-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.dr-chip {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--color-neutral-200);
  color: var(--color-neutral-800);
  white-space: nowrap;
}
.dr-chip-good { background: var(--bb-invoiced); color: var(--bb-invoiced-ink); }
.dr-chip-amber { background: var(--color-amber); color: var(--color-amber-ink); }
.dr-chip-bad { background: var(--color-brick); color: #fff; white-space: normal; }
.dr-chip-dry { background: var(--color-accent-100); color: var(--color-accent-800); border: 1px dashed var(--color-accent-500); }
.dr-chip-scan { background: var(--color-neutral-300); }
.dr-chip-dim { background: transparent; border: 1px solid var(--color-divider); color: var(--color-neutral-600); }
.dr-boat-b { padding: 0 14px; }
.dr-boat.open .dr-boat-b { padding: 0 14px 14px; }
.dr-refused { background: var(--color-brick); color: #fff; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.dr-sum { font-size: 14px; margin-bottom: 8px; }
.dr-sum .dr-desc { display: block; margin-top: 2px; }
.dr-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.dr-run { padding: 10px 12px; margin: 8px 0 12px; font-size: 13px; background: var(--color-neutral-200); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dr-run-good { background: color-mix(in srgb, var(--bb-invoiced) 18%, transparent); }
.dr-run-amber { background: var(--color-amber); color: var(--color-amber-ink); }
.dr-table tr.dr-asm td { background: var(--color-neutral-100); font-weight: 600; font-size: 12px; }
.dr-table tr.dr-dim td { color: var(--color-neutral-500); }
.dr-st-go { font-weight: 600; color: var(--color-accent-800); }
.dr-st-bad { font-weight: 600; color: var(--color-amber-ink); background: var(--color-amber); padding: 1px 6px; }
.dr-st-dim { color: var(--color-neutral-600); }
@media (max-width: 640px) {
  .dr-boat .dr-part { min-width: 130px; }
  .dr-boat .dr-part .dr-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dr-boat-b .dr-table td { padding: 5px 4px; }
}
/* per-line tick on the release preview */
.dr-table .dr-tickcell { width: 28px; text-align: center; padding-right: 0; }
.dr-tick, .dr-tickall { width: 20px; height: 20px; accent-color: var(--color-accent-700); cursor: pointer; }

/* ══ Final Inspection graph (inspection.js) - Build Board sub-tab + Plant Health panel ══
   Status colours are the Build Board's own: Complete green = at target,
   a darker QC yellow = in the yellow band, brick = below it. Always paired
   with words (tooltip, table, legend) - never colour alone. */
:root {
  --fi-good: var(--bb-invoiced);
  --fi-warn: #c99700;
  --fi-bad: var(--color-brick);
  --fi-line: var(--color-accent-700);
  --fi-raw: var(--color-accent-300);
}
.fi-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.fi-bar .adm-seg { margin-bottom: 10px; }
.fi-bar .btn { margin-left: auto; }
.fi-plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .fi-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fi-plate { padding: 12px 14px; background: var(--color-bg); }
.fi-big { font-family: var(--font-heading); font-size: 30px; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fi-sub { font-size: 12px; color: var(--color-neutral-600); }
.fi-card { padding: 14px 16px; background: var(--color-bg); margin-bottom: 10px; }
.fi-chart { position: relative; margin-top: 8px; }
.fi-chart svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.fi-grid { stroke: var(--color-neutral-200); stroke-width: 1; }
.fi-month { stroke: var(--color-neutral-300); stroke-width: 1; stroke-dasharray: 2 3; }
.fi-axis { font-size: 11px; fill: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.fi-target { fill: none; stroke: var(--fi-good); stroke-width: 2; stroke-dasharray: 6 4; }
.fi-yellow { fill: none; stroke: var(--fi-warn); stroke-width: 2; stroke-dasharray: 6 4; }
.fi-raw { fill: none; stroke: var(--fi-raw); stroke-width: 1; }
.fi-roll { fill: none; stroke: var(--fi-line); stroke-width: 2.5; stroke-linejoin: round; }
.fi-dot { stroke: var(--color-bg); stroke-width: 1.5; }
.fi-dot.good { fill: var(--fi-good); }
.fi-dot.warn { fill: var(--fi-warn); }
.fi-dot.bad { fill: var(--fi-bad); }
.fi-ref { font-size: 12px; font-weight: 600; fill: var(--color-neutral-800); }
.fi-ref.yellow { fill: var(--color-amber-ink); }
.fi-ref.roll { fill: var(--fi-line); }
.fi-cross { stroke: var(--color-neutral-700); stroke-width: 1; }
.fi-cross.hidden { display: none; }
.fi-tip {
  position: absolute; top: 4px; transform: translateX(-50%);
  background: var(--color-bg); border: 1px solid var(--color-neutral-400);
  padding: 8px 10px; font-size: 12px; min-width: 130px; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); z-index: 2;
}
.fi-tip-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.fi-tip-row.total { font-weight: 700; border-top: 1px solid var(--color-divider); margin-top: 3px; padding-top: 3px; }
.fi-tip-st { margin-top: 4px; font-weight: 600; }
.fi-tip-st.good { color: var(--fi-good); }
.fi-tip-st.warn { color: var(--color-amber-ink); }
.fi-tip-st.bad { color: var(--fi-bad); }
.fi-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--color-neutral-700); margin-top: 8px; }
.fi-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fi-key { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--fi-line); }
.fi-key.raw { border-top: 1px solid var(--fi-raw); }
.fi-key.target { border-top: 2px dashed var(--fi-good); }
.fi-key.yellow { border-top: 2px dashed var(--fi-warn); }
.fi-dotkey { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.fi-dotkey.good { background: var(--fi-good); }
.fi-dotkey.warn { background: var(--fi-warn); }
.fi-dotkey.bad { background: var(--fi-bad); }
.fi-mail { font-size: 12px; color: var(--color-neutral-600); margin-bottom: 4px; }
.fi-err { font-size: 12px; color: var(--color-brick); margin-bottom: 4px; }
.fi-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; margin-top: 14px; }
@media (max-width: 900px) { .fi-cols { grid-template-columns: minmax(0, 1fr); } }
.fi-h { display: block; margin-bottom: 6px; }
.fi-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.fi-table th { text-align: left; font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); border-bottom: 1px solid var(--color-divider); padding: 5px 6px; }
.fi-table td { padding: 5px 6px; border-bottom: 1px solid var(--color-neutral-200); vertical-align: top; }
.fi-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fi-boat { cursor: pointer; }
.fi-boat:hover, .fi-boat.open { background: var(--color-accent-100); }
.fi-def td { font-size: 12px; color: var(--color-neutral-700); background: var(--color-neutral-100); }
.fi-code { color: var(--color-neutral-500); font-size: 11px; }
.fi-src { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-neutral-500); border: 1px solid var(--color-neutral-300); padding: 0 4px; }
.fi-src.bad { color: var(--color-brick); border-color: var(--color-brick); }
.fi-st { font-weight: 700; padding: 1px 6px; }
.fi-st.good { background: var(--fi-good); color: #fff; }
.fi-st.warn { background: var(--color-amber); color: var(--color-amber-ink); }
.fi-st.bad { background: var(--fi-bad); color: #fff; }
.fi-note { font-size: 12px; color: var(--color-neutral-600); }
.fi-empty { padding: 30px 0; text-align: center; color: var(--color-neutral-600); }
.fi-home { margin-top: 16px; }
.fi-home-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fi-home-num { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.fi-home-num .fi-st { font-size: 18px; font-family: var(--font-heading); }
.fi-of { font-size: 12px; color: var(--color-neutral-600); }

/* ══ 14 Warranty (war.js) ══ */

.war-card { border: 1px solid var(--color-divider); padding: 12px 14px; margin: 0 0 12px; }
.war-card > .microlabel { display: block; margin-bottom: 8px; }
.war-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.war-f { min-width: 0; }
.war-f-long { grid-column: 1 / -1; }
.war-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.war-mgr {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-neutral-600); border: 1px solid var(--color-divider); padding: 0 4px; margin-left: 4px;
}
.war-hint { font-size: 11px; }
.war-hist { font-size: 13px; margin: 8px 0 0; }
.war-hist:empty { display: none; }
.war-hist { background: var(--color-amber); color: var(--color-amber-ink); padding: 8px 10px; }
.input.war-saving { border-color: var(--color-accent); }
.input:disabled { opacity: 0.7; }

.war-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.war-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-divider); padding: 6px 8px;
}
.war-table td { border-bottom: 1px solid var(--color-divider); padding: 7px 8px; vertical-align: top; }
.war-table tr[data-wo] { cursor: pointer; }
.war-table tr[data-wo]:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.war-id { font-weight: 700; white-space: nowrap; }
.war-hin { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.war-clip { color: var(--color-neutral-600); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-age-warn { color: var(--color-amber-ink); background: var(--color-amber); font-weight: 700; }
.war-age-bad { color: var(--color-brick); font-weight: 700; }
td.war-age-warn, td.war-age-bad { white-space: nowrap; }

.war-chip {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; white-space: nowrap;
  border: 1px solid var(--color-divider); color: var(--color-text);
}
.war-chip.st-complete { border-color: var(--color-accent-700); color: var(--color-accent-700); }
.war-chip.st-closed { background: var(--color-neutral-600); border-color: var(--color-neutral-600); color: var(--color-bg); }
.war-chip.st-waiting-on-parts, .war-chip.st-waiting-on-approval, .war-chip.st-on-hold { background: var(--color-amber); color: var(--color-amber-ink); border-color: transparent; }
.war-chip.st-in-progress, .war-chip.st-qc-lake-test { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
.war-chip.pr-high { border-color: var(--color-brick); color: var(--color-brick); }
.war-chip.pr-critical { background: var(--color-brick); border-color: var(--color-brick); color: var(--color-bg); }
.war-chip.pr-low { color: var(--color-neutral-600); }

.war-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin: 4px 0 6px; }
.war-head-id { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: 1.1; }
.war-head-sub { color: var(--color-neutral-600); font-size: 14px; margin-top: 2px; }
.war-head-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.war-actions { margin-top: 4px; }
.war-gaps { background: var(--color-amber); color: var(--color-amber-ink); padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.war-gaps ul { margin: 4px 0 0; padding-left: 18px; }
.war-gaps a { color: inherit; }
.war-sec { display: block; margin: 16px 0 6px; }
/* Warranty › Notes Log: one card per boat, its notes newest first. */
.wn-info { min-height: 1.2em; margin-top: 6px; }
.wn-count { margin: 4px 0 8px; }
.wn-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 4px; }
.wn-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wn-note { border-top: 1px solid var(--color-divider); padding: 8px 0 4px; }
.wn-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.wn-del { padding: 0 6px; min-height: 0; font-size: 11px; }
.wn-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wn-photos .war-thumb-sm { margin-top: 0; }
/* Warranty › Inventory (warInventory.js) */
.inv-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 6px 0; }
.inv-story { margin: 6px 0; }
.inv-photos { margin: 8px 0; }
.inv-sold { opacity: 0.75; }
.war-chip.inv-title-yes { border-color: var(--color-accent-700); color: var(--color-accent-700); }
.war-chip.inv-title-no { background: var(--color-amber); color: var(--color-amber-ink); border-color: transparent; }
.war-trips td { white-space: normal; }

.war-ev { border-left: 3px solid var(--color-divider); padding: 4px 0 6px 10px; margin-bottom: 6px; font-size: 13px; }
.war-ev-when { font-size: 11px; color: var(--color-neutral-600); }
.war-ev-note { border-left-color: var(--color-accent-700); }
.war-ev-closed, .war-ev-reopened { border-left-color: var(--color-text); }
.war-ev-status { border-left-color: var(--color-accent-400); }
.war-note { white-space: pre-wrap; }
.war-was { text-decoration: line-through; color: var(--color-neutral-600); }

@media (max-width: 760px) {
  .war-table thead { display: none; }
  .war-table tr[data-wo] { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
  .war-table tr[data-wo] td { border: 0; padding: 0; }
  .war-table tr[data-wo] td:nth-child(4), .war-table tr[data-wo] td:nth-child(5) { grid-column: 1 / -1; }
  .war-clip { max-width: none; white-space: normal; }
  .war-trips thead { display: table-header-group; }
  .war-trips { display: block; overflow-x: auto; }
}

/* Warranty phase 2: Home, Time, the pin */
.war-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .war-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .war-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.war-tile { appearance: none; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.war-tile:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.war-tile.warn { background: var(--color-amber); color: var(--color-amber-ink); border-color: transparent; }
.war-tile.bad .dr-tile-v { color: var(--color-brick); }
.war-home { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .war-home { grid-template-columns: 1fr; } }
.war-home .war-card { margin: 0 0 12px; }
.war-now { border-left: 4px solid var(--color-accent-700); padding: 6px 10px; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.war-now:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.war-now.none { border-left-color: var(--color-divider); cursor: default; color: var(--color-neutral-600); }
.war-now.none:hover { background: none; }
.war-now-who { font-size: 11px; color: var(--color-neutral-600); margin-bottom: 2px; }
.war-now-id { font-weight: 700; font-size: 16px; }
.war-today { margin-bottom: 10px; }
.war-today-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.war-today-boats { font-size: 12px; margin-top: 4px; }
.war-bar { height: 10px; background: var(--color-neutral-200); position: relative; overflow: hidden; }
.war-bar i { position: absolute; inset: 0 auto 0 0; background: var(--color-amber-ink); }
.war-bar.full i { background: var(--color-accent-700); }
.war-hist-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 6px; }
.war-hist-name { width: 110px; font-size: 13px; flex: none; }
.war-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; flex: 1; }
.war-day { text-align: center; font-size: 11px; }
.war-day-bar { height: 44px; background: var(--color-neutral-100); position: relative; border: 1px solid var(--color-divider); }
.war-day-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-accent-700); }
.war-day.short .war-day-bar i { background: var(--color-brick); }
.war-day.short .war-day-h { color: var(--color-brick); font-weight: 700; }
.war-day.untracked { opacity: 0.45; }
.war-day-d { color: var(--color-neutral-600); }
.war-short { color: var(--color-brick); font-weight: 700; }
.war-more { display: inline-block; margin-top: 6px; font-size: 13px; }
.dr-toolbar .input.war-date { flex: 0 0 auto; width: 160px; }
.dr-toolbar .input.war-techpick { flex: 0 0 auto; width: 200px; }
.war-grid-t td { vertical-align: middle; }
.war-hcell { display: flex; gap: 6px; align-items: center; }
.war-hcell .war-hours { width: 84px; flex: none; }
.war-hcell .war-tnote { flex: 1; min-width: 0; }
.war-addboat { max-width: 420px; }
.war-total { margin-top: 12px; }
.war-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.war-wday {
  appearance: none; font: inherit; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid var(--color-divider); padding: 6px 4px; display: grid; gap: 2px; text-align: center; font-size: 12px;
}
.war-wday.on { border-color: var(--color-accent-700); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.war-pinned { font-weight: 700; }
.war-clock { margin-top: 4px; font-weight: 700; color: var(--color-accent-700); display: flex; align-items: center; gap: 8px; }
.war-clock-on [data-clock-since] { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .war-grid-t tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--color-divider); }
  .war-grid-t td { border: 0; padding: 0; }
  .war-grid-t td.war-hcell { grid-column: 1 / -1; }
  .war-hist-name { width: 70px; }
}

/* Warranty phase 3: a warranty boat's request on the warehouse queue */
.pr-chip.pr-war { background: var(--color-amber); border-color: var(--color-amber-ink); color: var(--color-amber-ink); }
.pr-hin { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.war-chip.pt-requested, .war-chip.pt-partial, .war-chip.pt-need-to-order, .war-chip.pt-ordered { border-color: var(--color-amber-ink); color: var(--color-amber-ink); }
.war-chip.pt-backordered { border-color: var(--color-brick); color: var(--color-brick); }
.war-chip.pt-received { border-color: var(--color-accent-700); color: var(--color-accent-700); }

/* Warranty phase 4: photos */
.war-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.war-thumb {
  appearance: none; font: inherit; color: inherit; cursor: pointer; padding: 0; margin: 0;
  border: 1px solid var(--color-divider); background: var(--color-neutral-100);
  display: grid; text-align: left; overflow: hidden;
}
.war-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--color-neutral-200); }
.war-thumb span { font-size: 11px; padding: 3px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-thumb-sm { width: 96px; margin-top: 4px; }
.war-thumb-missing img { visibility: hidden; }
.war-pick { cursor: pointer; }
.war-lightbox {
  position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.war-lightbox.hidden { display: none; }
.war-lb-card { background: var(--color-bg); max-width: min(1000px, 100%); max-height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.war-lb-card img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; margin: 0 auto; }
.war-lb-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; font-size: 13px; }
.war-lb-bar .war-row { margin: 0; }

/* Warranty phase 5: Reports */
.war-rep-bar label { display: flex; gap: 6px; align-items: center; }
.war-rep-note { font-size: 13px; margin: 4px 0 8px; }
.war-rep-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.war-rep-bad .dr-tile-v { color: var(--color-brick); }
.war-rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (max-width: 900px) { .war-rep-grid { grid-template-columns: 1fr; } }
.war-rep-grid .war-card { margin: 0; }
.war-rep td.n, .war-rep th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.war-rep-zero td { color: var(--color-neutral-500); }
.war-rep-barcell { width: 30%; }
.war-rep-barcell i { display: block; height: 8px; background: var(--color-accent-700); }
@media (max-width: 760px) { .war-rep-barcell { width: 20%; } }

/* ══ Warranty Orders (warOrders.js, dash.js › Warranty Orders) ══ */
.war-orders-help { margin: 0 0 10px; font-size: 13px; }
.war-closed-toggle { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.war-chip.st-open { border-color: var(--color-divider); }
.war-chip.st-in-production { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
.war-chip.st-ready-to-ship { background: var(--color-amber); border-color: var(--color-amber-ink); color: var(--color-amber-ink); }
.war-chip.st-shipped { border-color: var(--color-accent-700); color: var(--color-accent-700); }
.war-chip.st-cancelled { background: var(--color-neutral-600); border-color: var(--color-neutral-600); color: var(--color-bg); }
.wr-card {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
  display: grid; gap: 3px; padding: 10px 12px; margin: 0 0 8px; font-size: 13px;
  border: 1px solid var(--color-divider); border-left: 4px solid var(--color-accent-700); background: transparent;
}
.wr-card:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.wr-card.late { border-left-color: var(--color-brick); }
.wr-card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wr-route { display: flex; gap: 4px; flex-wrap: wrap; }
.wr-step {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; white-space: nowrap;
  border: 1px solid var(--color-divider); color: var(--color-neutral-600); background: transparent;
}
.wr-step.done { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
.wr-step.active { background: var(--color-amber); border-color: var(--color-amber-ink); color: var(--color-amber-ink); }
.wr-route-pick { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.wr-route-opt { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.wr-route-opt.locked { color: var(--color-neutral-600); }
.wr-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr) 80px 36px; gap: 6px; margin-bottom: 6px; }
@media (max-width: 600px) { .wr-item { grid-template-columns: minmax(0, 1fr) 70px 36px; } .wr-item [data-i="part"] { grid-column: 1 / 2; grid-row: 2; } }
.input.wr-copies { width: 64px; flex: none; }
.wr-bigsteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wr-bigstep { border: 1px solid var(--color-divider); border-top: 4px solid var(--color-divider); padding: 8px 10px; font-size: 12px; }
.wr-bigstep.done { border-top-color: var(--color-accent-700); }
.wr-bigstep.active { border-top-color: var(--color-amber-ink); background: var(--color-amber); color: var(--color-amber-ink); }
.wr-bigstep-name { font-weight: 700; font-size: 14px; }

/* the Production dashboard's board */
.wr-row {
  display: grid; grid-template-columns: 150px minmax(0, 1.4fr) minmax(0, 2fr) 190px; gap: 12px; align-items: start;
  padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--color-divider); border-left: 4px solid var(--color-accent-700);
  font-size: 13px;
}
.wr-row.ready { border-left-color: var(--color-amber-ink); }
.wr-row.late { border-left-color: var(--color-brick); }
.wr-row.shipped { border-left-color: var(--color-divider); opacity: .8; }
.wr-row.late .wr-when { color: var(--color-brick); font-weight: 700; }
.wr-id strong { font-size: 16px; }
.wr-job, .wr-who { color: var(--color-neutral-600); font-size: 12px; }
.wr-nojob { color: var(--color-brick); }
.wr-pri { font-size: 10px; font-weight: 700; text-transform: uppercase; margin-left: 4px; padding: 0 5px; border: 1px solid var(--color-brick); color: var(--color-brick); }
.wr-pri.critical { background: var(--color-brick); color: var(--color-bg); }
.wr-where { font-weight: 700; }
@media (max-width: 900px) {
  .wr-row { grid-template-columns: 1fr 1fr; }
  .wr-row .wr-route { grid-column: 1 / -1; }
}

/* ── Planning › HIN Log (hinlog.js) ── */
.hl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hl-toolbar .hl-filter { flex: 1; min-width: 220px; }
.hl-toolbar .adm-seg { margin: 0; }
.hl-status { font-size: 13px; color: var(--color-neutral-700); margin-bottom: 10px; line-height: 1.5; }
.hl-warn { color: var(--color-brick); font-weight: 700; }
.hl-err { color: var(--color-brick); font-size: 12px; }
.hl-table { min-width: 1100px; }
.hl-row { cursor: pointer; }
.hl-row:hover td, .hl-row.open td { background: var(--color-neutral-100); }
.hl-mono { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.hl-dim { color: var(--color-neutral-600); font-size: 12px; }
.hl-chip {
  display: inline-block;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--color-brick);
  color: #fff;
  vertical-align: 1px;
}
.hl-chip.soft { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.hl-detail-row > td { background: var(--color-neutral-100); padding: 10px 12px 14px; }
.hl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.hl-sect { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.hl-sect .microlabel { display: block; margin-bottom: 2px; }
.hl-warnbox { padding: 8px 10px; border-left: 3px solid var(--color-brick); background: var(--color-amber-soft); }
.hl-other { padding: 4px 0; border-bottom: 1px solid var(--color-divider); }
.hl-note { padding: 6px 0; border-bottom: 1px solid var(--color-divider); }
.hl-note-head { font-size: 12px; color: var(--color-neutral-600); display: flex; gap: 10px; align-items: baseline; }
.hl-note-text { white-space: pre-wrap; }
.hl-newnote { display: block; width: 100%; max-width: 640px; margin: 8px 0 6px; min-height: 56px; }
.hl-link { background: none; border: 0; padding: 0; color: var(--color-accent-700); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; }
.hl-more { margin: 10px 0; text-align: center; }
.hl-help { font-size: 13px; color: var(--color-neutral-700); max-width: 760px; margin: 0 0 12px; }
.hl-card { border: 1px solid var(--color-divider); border-left: 3px solid var(--color-brick); padding: 10px 12px; margin-bottom: 10px; background: var(--color-bg); }
.hl-card.done { border-left-color: var(--color-neutral-400); }
.hl-card-head { font-size: 14px; margin-bottom: 6px; }
.hl-opt { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; cursor: pointer; }
.hl-opt.chosen { font-weight: 700; }
.hl-decide { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hl-decide .hl-reason { flex: 1; min-width: 220px; }
.hl-decided summary { cursor: pointer; font-size: 13px; margin: 8px 0; }
@media (max-width: 700px) {
  .hl-toolbar .btn { flex: 1 1 auto; }
}

/* ---------------- 15 Sales (sales.js) ---------------- */
.sl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sl-run { font-size: 13px; color: var(--color-neutral-700); }
.sl-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.sl-xf-field { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sl-xf { position: relative; }
.sl-xf-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 190px; max-width: 280px; padding: 7px 10px; font: inherit; font-weight: 400; text-align: left; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); cursor: pointer; }
.sl-xf-btn.on { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); font-weight: 700; }
.sl-xf-text { overflow: hidden; text-overflow: ellipsis; }
.sl-xf-caret { font-size: 11px; color: var(--color-neutral-600); }
.sl-xf.reading .sl-xf-btn::after { content: "reading…"; font-size: 11px; color: var(--color-neutral-600); }
.sl-xf-pop { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; width: 280px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--color-surface); border: 1px solid var(--color-neutral-500); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-weight: 400; white-space: normal; }
.sl-xf-search { width: 100%; }
.sl-xf-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-divider); padding: 4px 0; }
.sl-xf-row { display: flex; align-items: center; gap: 8px; padding: 3px 8px; cursor: pointer; font-size: 13px; }
.sl-xf-row:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sl-xf-row input { margin: 0; flex: none; }
.sl-xf-row span:first-of-type { flex: 1; }
.sl-xf-row.all { border-bottom: 1px solid var(--color-divider); margin-bottom: 2px; padding-bottom: 5px; }
.sl-xf-row.sub { padding-left: 28px; }
.sl-xf-n { font-size: 11px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.sl-xf-none { padding: 8px; font-size: 13px; color: var(--color-neutral-600); }
.sl-xf-foot { display: flex; justify-content: flex-end; gap: 6px; }
.sl-xf-foot .btn { padding: 5px 14px; font-size: 13px; }
@media (max-width: 800px) {
  .sl-xf-btn { min-width: 0; width: 100%; }
  .sl-xf-field { flex: 1 1 100%; }
  .sl-xf { flex: 1; }
  .sl-xf-pop { width: min(280px, calc(100vw - 32px)); }
}
.sl-filtered { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--color-amber-soft); color: var(--color-amber-ink); border: 1px solid var(--color-amber); }
.sl-dealer.sl-all { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.sl-dealer.sl-all.selected { background: var(--color-accent); }
.sl-plates { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.sl-plate { flex: 1 1 200px; border: 1px solid var(--color-divider); background: var(--color-surface); padding: 10px 14px; }
.sl-plate-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.sl-plate-n { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sl-plate-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-neutral-700); }
.sl-table tfoot td { border-top: 2px solid var(--color-text); border-bottom: 0; }
.sl-link { cursor: pointer; }
.sl-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sl-hull { display: inline-flex; align-items: flex-start; gap: 6px; white-space: nowrap; }
.sl-sq { display: inline-flex; flex-direction: column; width: 18px; height: 18px; flex: none; border: 1px solid var(--color-neutral-500); overflow: hidden; margin-top: 1px; }
.sl-sq i { flex: 1; background: transparent; }
.sl-sq.unknown { border-color: var(--color-brick); }
.sl-bad { color: var(--color-brick); }
.sl-counts { font-variant-numeric: tabular-nums; }
.sl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-table th.sl-num { text-align: right; }
.sl-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-neutral-700); }
.sl-total { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sl-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.sl-list { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 120px); }
.sl-filter { width: 100%; }
.sl-admin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.sl-admin .btn { font-size: 12px; padding: 5px 10px; margin-left: auto; }
.sl-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sl-dealers { overflow-y: auto; border: 1px solid var(--color-divider); background: var(--color-surface); }
.sl-dealer { position: relative; padding: 9px 12px; border-bottom: 1px solid var(--color-divider); cursor: pointer; }
.sl-dealer:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sl-dealer.selected { background: var(--color-accent); color: var(--color-bg); }
.sl-dealer.selected .sl-dsub { color: inherit; opacity: .85; }
.sl-dealer.inactive .sl-dname { opacity: .6; }
.sl-dname { font-weight: 700; font-size: 14px; line-height: 1.25; padding-right: 64px; }
.sl-dsub { font-size: 12px; color: var(--color-neutral-600); margin-top: 2px; }
.sl-toggle { position: absolute; top: 9px; right: 10px; font-size: 11px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.sl-empty { padding: 14px 12px; color: var(--color-neutral-600); font-size: 13px; }
.sl-detail { min-width: 0; }
.sl-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sl-dhead h3 { margin: 0 0 2px; font-size: 22px; }
.sl-dhead-r { display: flex; align-items: center; gap: 10px; }
.sl-sect { margin: 14px 0 22px; }
.sl-sect-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 2px solid var(--color-text); padding-bottom: 4px; margin-bottom: 8px; }
.sl-sect-head h4 { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.sl-sum { font-size: 13px; color: var(--color-neutral-700); }
.sl-count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 10px; background: var(--color-neutral-200); color: var(--color-neutral-900); font-size: 12px; font-weight: 700; text-align: center; }
.sl-count.big { background: var(--color-text); color: var(--color-bg); }
.sl-model { margin-bottom: 12px; }
.sl-model-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.sl-model-name { font-weight: 700; font-size: 15px; }
.sl-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.sl-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); padding: 4px 6px; border-bottom: 1px solid var(--color-divider); }
.sl-table td { padding: 6px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.sl-mono { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.sl-dim { color: var(--color-neutral-600); font-size: 12px; }
.sl-old { color: var(--color-brick); font-weight: 700; }
.sl-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sl-chip.prod { background: var(--color-accent); color: var(--color-bg); }
.sl-chip.spray { background: var(--color-amber-soft); color: var(--color-amber-ink); border: 1px solid var(--color-amber); }
.sl-chip.off { background: var(--color-neutral-300); color: var(--color-neutral-800); font-size: 10px; padding: 0 6px; }
@media (max-width: 800px) {
  .sl-wrap { grid-template-columns: 1fr; }
  .sl-list { position: static; max-height: none; }
  .sl-dealers { max-height: 45vh; }
  .sl-detail { overflow-x: auto; }
  .sl-table { font-size: 12px; }
  .sl-table td, .sl-table th { padding: 5px 4px; }
  .sl-chip { white-space: normal; }
}

/* ---- Admin › System (M2) ---- */
.sys-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sys-summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.sys-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sys-big { font-size: 20px; font-weight: 700; }
.sys-ok-ink { color: var(--color-accent-700); }
.sys-bad-ink, .sys-err { color: var(--color-brick); }
.sys-warn-ink { color: var(--color-amber-ink); }
.sys-problems { border: 1px solid var(--color-brick); border-left-width: 4px; padding: 8px 12px; margin: 8px 0 14px; color: var(--color-brick); font-weight: 600; display: grid; gap: 4px; }
.sys-scroll { overflow-x: auto; }
.sys-table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 720px; }
.sys-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); padding: 4px 6px; border-bottom: 1px solid var(--color-divider); }
.sys-table td { padding: 6px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.sys-table tr.sys-off td { opacity: .6; }
.sys-chip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border: 1px solid currentColor; white-space: nowrap; }
.sys-chip.sys-ok, .sys-chip.sys-run { color: var(--color-accent-700); }
.sys-chip.sys-warn { color: var(--color-amber-ink); background: var(--color-amber); border-color: var(--color-amber-ink); }
.sys-chip.sys-bad { color: var(--color-bg); background: var(--color-brick); border-color: var(--color-brick); }
.sys-chip.sys-dim { color: var(--color-neutral-600); }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sys-grid .adm-card { margin-bottom: 0; }
.sys-grid + .adm-card { margin-top: 14px; }
.sys-grid > .adm-card > div { margin: 3px 0; overflow-wrap: anywhere; }
.sys-kit { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 4px 0; }
.sys-log { font: 12px/1.45 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; margin: 6px 0 0; padding: 8px; border: 1px solid var(--color-divider); }
.adm-opt.sys-tab-bad { color: var(--color-brick); font-weight: 700; }
.sys-kit .btn { white-space: nowrap; flex-shrink: 0; }
#sysLog > div, #sysPushNote { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .sys-table { min-width: 0; }
  .sys-table thead { display: none; }
  .sys-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
  .sys-table td { display: block; padding: 0; border: 0; }
  .sys-table td[data-label], .sys-table td.sys-detail { grid-column: 1 / -1; font-size: 12px; }
  .sys-table td[data-label]::before { content: attr(data-label) ": "; color: var(--color-neutral-600); }
  .sys-table td.sys-detail:empty { display: none; }
}
.sys-kit-btns { display: flex; gap: 6px; flex-shrink: 0; }
.sys-table.sys-table-sm { min-width: 520px; }
#sysEpicor > div { margin: 3px 0; }
.sys-journal { border-left: 4px solid var(--color-brick); }
.sys-jrun { padding: 8px 0; border-bottom: 1px solid var(--color-divider); display: grid; gap: 4px; overflow-wrap: anywhere; }
.sys-jrun:last-child { border-bottom: 0; }
.sys-jbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-steps { margin: 4px 0 0 18px; padding: 0; font-size: 13px; }

/* ---- Warehouse › Site Transfers (transfers.js) ---- */
.st-ask { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.st-ask .st-partwrap { flex: 1 1 200px; min-width: 0; }
.st-ask .st-partwrap .input { width: 100%; }
.st-ask #stNote { flex: 2 1 240px; }
.st-qty { width: 90px; flex: 0 0 90px; }
.st-banner {
  border-left: 4px solid var(--color-amber-ink, var(--color-accent-700));
  background: var(--color-neutral-100);
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 13px;
}
.st-card .st-what { margin: 4px 0; overflow-wrap: anywhere; }
.st-card .st-desc { color: var(--color-neutral-600); font-size: 13px; }
.st-card .st-line { font-size: 13px; color: var(--color-neutral-700); overflow-wrap: anywhere; }
.st-card.stx-shipped { border-left-color: var(--color-accent-800); }
.st-card.stx-received { border-left-color: var(--color-amber-ink, var(--color-accent-700)); }
.st-card.stx-done, .st-card.stx-cancelled { border-left-color: var(--color-divider); opacity: .85; }
.st-actions, .st-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.st-row .input { flex: 1 1 120px; min-width: 0; }
.st-row .st-qty { flex: 0 0 90px; }
.st-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-divider); }
.st-bins { display: flex; flex-wrap: wrap; gap: 6px; }
.st-bin {
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
}
.st-bin span { color: var(--color-neutral-600); margin-left: 4px; }
.st-bin.st-primary { border-color: var(--color-accent-700); font-weight: 700; }
.st-empty { margin: 4px 0 14px; }
.st-settings { margin-top: 18px; border-top: 1px solid var(--color-divider); padding-top: 10px; }
.st-settings summary { cursor: pointer; font-weight: 600; }
.st-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 14px; }
.st-lbl { flex: 0 0 150px; font-size: 13px; color: var(--color-neutral-700); }
.st-stock { margin: -2px 0 12px; font-size: 14px; }
.st-stock-has b { color: var(--color-accent-800); }
.st-stock-none, .st-stock-none b { color: var(--color-brick); }
.st-stock-bins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.st-stock-bin { border: 1px solid var(--color-divider); background: var(--color-surface); padding: 3px 8px; font-size: 13px; }

/* Warranty › Calls (warCalls.js) - the phone answering agent's call log */
.war-chip.call-open { background: var(--color-brick); border-color: var(--color-brick); color: var(--color-bg); }
.call-from { display: inline-flex; flex-direction: column; gap: 2px; margin: 6px 0; padding: 4px 10px; border: 1px solid var(--color-divider); }
.call-from a { font-size: 14px; color: inherit; }
.call-msg { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--color-brick); }
.call-tx { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.call-turn { padding: 6px 10px; max-width: 85%; border: 1px solid var(--color-divider); white-space: pre-wrap; overflow-wrap: anywhere; }
.call-turn .microlabel { display: block; }
.call-turn.call-agent { align-self: flex-start; background: color-mix(in srgb, var(--color-accent-700) 8%, transparent); }
.call-turn.call-caller { align-self: flex-end; }
.call-token { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.call-token input { width: 100%; }

/* Admin › System › Phone assistant spend */
.sys-spend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sys-spend-head select { width: auto; }
.sys-spend-usd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sys-spend-rep { margin-top: 2px; }

/* ══════════════ Warranty › Tickets (warTickets.js) ══════════════ */

.adm-opt .tab-badge { margin-left: 6px; }
.tk-typepick { max-width: 190px; }
.tk-regline { margin: -4px 0 10px; }
.tk-regline .btn { padding: 2px 8px; }
.tk-big { font-size: 18px; }
.tk-flag { background: var(--color-brick); border-color: var(--color-brick); color: var(--color-bg); }
.tk-type-claim { border-color: var(--color-accent-700); color: var(--color-accent-700); }
.tk-type-parts { border-color: var(--color-neutral-600); }
.tk-type-inquiry { color: var(--color-neutral-600); }
.tk-typeseg { margin-bottom: 10px; }
.tk-dealerword { margin-top: 3px; font-size: 12px; }
.tk-narrow { max-width: 90px; }
.tk-check { display: flex; align-items: center; gap: 6px; }
.tk-newline { border-top: 1px dashed var(--color-neutral-300, #c3ccd3); padding-top: 8px; margin-top: 8px; }
.tk-boat { display: grid; gap: 4px; margin: 6px 0; }
.tk-boatcheck:empty { display: none; }
.tk-reg { padding: 6px 8px; background: var(--color-surface, rgba(63, 108, 142, 0.06)); }
.tk-warn { color: var(--color-amber-ink); background: var(--color-amber); padding: 3px 8px; margin-top: 4px; }
.tk-ok { color: #1c7a3d; border-left: 3px solid #1c7a3d; padding: 2px 8px; margin-top: 4px; }
.tk-info { color: var(--color-neutral-600); border-left: 3px solid var(--color-neutral-600); padding: 2px 8px; margin-top: 4px; }
.tk-line { border-top: 1px solid var(--color-neutral-300, #c3ccd3); padding: 8px 0; }
.tk-line:first-of-type { border-top: 0; }
.tk-line-vd { opacity: 0.85; }
.tk-vd { background: var(--color-amber); color: var(--color-amber-ink); border-color: transparent; }
.tk-vc { border-color: var(--color-accent-700); color: var(--color-accent-700); }
.tk-warnchip { border-color: var(--color-brick); color: var(--color-brick); }
.tk-return { border-left: 3px solid var(--color-accent-700); padding: 4px 8px; margin: 6px 0; display: grid; gap: 4px; justify-items: start; }
.tk-return-open { border-left-color: var(--color-amber); background: color-mix(in srgb, #f2c94c 14%, transparent); }
.tk-return-done { border-left-color: #1c7a3d; }
/* Tickets phase 2: the sales order, each line's stock and POs, vendor credit */
.tk-soerr { border-left: 3px solid var(--color-brick); padding: 4px 8px; margin: 4px 0; color: var(--color-brick); }
.tk-sopend { border-left: 3px solid var(--color-amber); padding: 4px 8px; margin: 4px 0; background: color-mix(in srgb, #f2c94c 14%, transparent); }
.tk-ok { color: #1c7a3d; }
.tk-stock { border-left: 3px solid var(--color-accent-700); padding: 4px 8px; margin: 6px 0; display: grid; gap: 4px; }
.tk-nonnet { color: var(--color-brick); font-weight: 700; }
.tk-decide { border-left: 3px solid var(--color-brick); padding: 4px 8px; background: color-mix(in srgb, var(--color-brick) 8%, transparent); }
.tk-byhand { color: var(--color-amber-ink); background: color-mix(in srgb, #f2c94c 18%, transparent); padding: 2px 6px; }
.tk-vcbox { border-left: 3px solid var(--color-accent-700); padding: 4px 8px; margin: 6px 0; display: grid; gap: 4px; }
.tk-apline { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.tk-num { text-align: right; }
.tk-price { align-self: end; padding-bottom: 8px; }
.tk-ordertotal { border-top: 1px solid var(--color-neutral-300, #c3ccd3); padding-top: 8px; margin-top: 4px; }
.tk-newprice { min-width: 170px; }
.tk-newprice:empty { display: none; }
/* Part photos and Search by picture */
.tk-pthumb { width: 36px; height: 36px; object-fit: cover; flex: none; background: var(--color-neutral-200); align-self: center; }
.tk-pnone { display: inline-block; }
.tk-pmissing { visibility: hidden; }
.pc-item:has(.tk-pthumb) { align-items: center; }
.tk-picbtn { border: 0; padding: 0; background: none; cursor: zoom-in; line-height: 0; }
.tk-partbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tk-linepic:empty { display: none; }
.tk-linepic .tk-pthumb { width: 48px; height: 48px; }
.tk-linehead { display: flex; gap: 10px; align-items: center; }
.tk-catbtn { padding: 2px 8px; font-size: 12px; }
.tk-addpic { padding: 2px 8px; font-size: 12px; }
.tk-pbig { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; margin: 0 auto; }
.tk-toplayer { z-index: 960; }
.tk-catalog { z-index: 950; align-items: stretch; }
.tk-catcard { background: var(--color-bg); width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: hidden; }
.tk-cathead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-cathead .input[data-c="q"] { flex: 1 1 260px; }
.tk-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; overflow-y: auto; padding: 2px; }
.tk-catitem { display: grid; gap: 3px; text-align: left; padding: 8px; border: 1px solid var(--color-neutral-300, #c3ccd3); background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; align-content: start; }
.tk-catitem:hover { border-color: var(--color-accent-600); }
.tk-catpic { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--color-neutral-200); overflow: hidden; }
.tk-catimg { width: 100%; height: 100%; object-fit: cover; }
.tk-catdesc { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tk-retcard { grid-template-rows: none; overflow-y: auto; max-width: 560px; width: calc(100vw - 32px); display: grid; gap: 10px; padding: 14px; background: var(--color-bg); }
.tk-vdbox { background: var(--color-amber); color: var(--color-amber-ink); padding: 4px 8px; margin: 4px 0; }
.tk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-two > .war-card { min-width: 0; }
@media (max-width: 760px) { .tk-two { grid-template-columns: 1fr; } }
.tk-thread { display: grid; gap: 6px; margin-bottom: 8px; }
.tk-msg { padding: 6px 8px; max-width: 92%; }
.tk-msg-dealer { background: var(--color-surface, rgba(63, 108, 142, 0.06)); justify-self: start; }
.tk-msg-staff { border: 1px solid var(--color-accent-700); justify-self: end; }
.tk-internal { border-left: 4px solid var(--color-amber); }
.tk-note { padding: 6px 0; border-top: 1px dashed var(--color-neutral-300, #c3ccd3); }
.tk-intern { color: var(--color-amber-ink); background: var(--color-amber); padding: 0 4px; }
.tk-link { padding: 3px 0; }
.tk-counts { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0; }
.tk-scroll { overflow-x: auto; max-width: 100%; }
/* Lists table: a box that scrolls both ways so the headings stick, a scroll
   bar on top as well as the bottom, fixed column widths a grip resizes. */
.tk-hbar { overflow-x: auto; overflow-y: hidden; height: 16px; margin-top: 6px; }
.tk-hbar > div { height: 1px; }
.tk-hbar-none { visibility: hidden; height: 0; margin: 0; }
.tk-gridbox { overflow: auto; max-height: calc(100vh - 230px); min-height: 220px; border: 1px solid var(--color-neutral-300, #c3ccd3); }
.tk-listtable { table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; }
.tk-listtable th { position: sticky; top: 0; z-index: 2; background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-neutral-400, #b7b7ba); user-select: none; }
.tk-listtable td, .tk-listtable th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-listtable th .tk-grip { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.tk-listtable th .tk-grip:hover, .tk-listtable th .tk-grip.tk-grip-on { background: var(--color-accent-500); }
.tk-gridhelp { margin-top: 4px; }
.tk-editcell { cursor: text; }
.tk-editcell:hover { box-shadow: inset 0 0 0 1px var(--color-accent-500); }
.tk-listtable td .tk-cellinput { width: 100%; padding: 2px 6px; min-height: 0; height: 28px; }
.tk-listtable tr.tk-off { color: var(--color-neutral-600); }
.tk-sttable .input { min-width: 140px; }

/* ══ 16 Finance (fin.js) ══ */

.fin-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 12px; }
.fin-card { border: 1px solid var(--color-divider); background: var(--color-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fin-card h3, .fin-head h3, .fin-lines-bar h3 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; }
.fin-card .btn { align-self: flex-start; }
.fin-hint { font-size: 13px; margin: 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fin-acct-name { font-size: 13px; min-height: 1em; color: var(--color-accent-700); }
.fin-run { padding: 12px 0; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.fin-bad { color: var(--color-brick); font-weight: 700; }
.fin-spin { width: 14px; height: 14px; border: 2px solid var(--color-divider); border-top-color: var(--color-accent); border-radius: 50%; animation: fin-spin 0.8s linear infinite; }
@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.fin-warn { border-left: 3px solid var(--color-brick); padding: 6px 10px; margin-bottom: 10px; font-size: 13px; color: var(--color-brick); }
.fin-scroll { overflow-x: auto; margin-bottom: 12px; }
.fin-table { font-size: 13px; }
.fin-table th, .fin-table td { white-space: nowrap; }
.fin-table td:has(.fin-sub), .fin-table td.fin-wrap { white-space: normal; min-width: 180px; }
.fin-table .fin-num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-table th.fin-num { text-align: right; }
.fin-table tfoot td { font-weight: 700; border-top: 1px solid var(--color-divider); }
.fin-open td { font-style: italic; }
.fin-pick { cursor: pointer; }
.fin-pick.selected td { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.fin-mismatch td:first-child { box-shadow: inset 3px 0 0 var(--color-brick); }
.fin-neg { color: var(--color-brick); }
.fin-mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.fin-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.fin-lines-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.fin-lines-bar .input { flex: 1; min-width: 220px; max-width: 460px; }
.fin-pager { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 16px; }
@media (max-width: 600px) {
  .fin-forms { grid-template-columns: 1fr; }
  .fin-grid { grid-template-columns: 1fr 1fr; }
}
/* A Custom row whose part/job came from the BAQ's loose PartTran join, not
   from the GL line itself - kept as Kinetic shows it, greyed. */
.fin-unlinked td:nth-child(n+7):nth-child(-n+11) { opacity: .45; font-style: italic; }

/* Admin › System › Printers (2026-10-27): mode, two printer names and Save
   on one line on a desktop, wrapping on a phone. */
.sys-print-plant { padding: 10px 0; }
.sys-print-plant + .sys-print-plant { border-top: 1px solid var(--color-divider); }
.sys-print-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.sys-print-row .input { flex: 1 1 180px; width: auto; min-width: 0; margin: 0; }
.sys-print-row select.input { flex: 1.4 1 230px; }

/* ── Build Board › Floor Map (floormap.js, 2026-10-29) ─────────────────── */
#floorPane { margin-top: 12px; }
.fm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.fm-when { display: flex; flex-direction: column; gap: 2px; margin-right: auto; font-size: 13px; color: var(--color-neutral-800); }
.fm-find { width: 150px; padding: 7px 10px; border: 1px solid var(--color-divider); border-radius: 6px; font: inherit; font-size: 14px; background: var(--color-neutral-100); }
.fm-zoom { display: flex; gap: 4px; }
.fm-zoom .btn { min-width: 38px; }
.fm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--color-neutral-800); margin-bottom: 8px; }
.fm-key { display: inline-flex; align-items: center; gap: 5px; }
.fm-sw { display: inline-block; width: 16px; height: 10px; border-radius: 2px; flex: none; background: var(--fm-c, #888); }
.fm-sw.st-done { background: #fff; border: 1.5px dashed var(--color-neutral-600); }
.fm-sw.st-ready { background: #f2c94c; }
.fm-sw.fm-special { width: 10px; border-radius: 50%; background: var(--color-alarm); }

.fm-stage {
  position: relative; height: min(68vh, 760px); min-height: 320px;
  border: 1px solid var(--color-divider); border-radius: 8px; background: #fbfbfa;
  overflow: hidden; touch-action: none; cursor: grab; user-select: none;
}
.fm-stage:active { cursor: grabbing; }
.fm-stage .stub, .fm-stage .offline-note { margin: 16px; }
.fm-svg { width: 100%; height: 100%; display: block; }

/* the drawing */
.fm-base path, .fm-base circle { fill: none; vector-effect: non-scaling-stroke; }
.fm-walls path { stroke: #5b6168; stroke-width: 1.1px; }
.fm-cols circle { stroke: #8b9097; stroke-width: 1px; }
.fm-racking path { stroke: #7fb88a; stroke-width: 0.8px; }
.fm-motors path { stroke: #d9a640; stroke-width: 0.8px; }
.fm-doors path { stroke: #a35a5a; stroke-width: 0.8px; }
.fm-curves path { stroke: #a3a8ad; stroke-width: 0.8px; }
.fm-rooms text { fill: #8b9097; font-family: var(--font-body, Arial, sans-serif); }

/* areas */
.fm-zone { fill: rgba(89, 128, 166, 0.06); stroke: rgba(89, 128, 166, 0.55); stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: pointer; }
.fm-zone.busy { fill: rgba(89, 128, 166, 0.11); }
.fm-zone.ctx { fill: rgba(0, 0, 0, 0.025); stroke: rgba(0, 0, 0, 0.18); stroke-dasharray: 3 2; cursor: default; }
.fm-zone:hover { fill: rgba(89, 128, 166, 0.18); }
.fm-zone-label { font-size: 4.2px; font-weight: 600; fill: var(--color-accent-800, #2c455d); pointer-events: none; font-family: var(--font-body, Arial, sans-serif); }
.fm-group { fill: none; stroke: rgba(89, 128, 166, 0.7); stroke-width: 1.4px; vector-effect: non-scaling-stroke; pointer-events: none; }
.fm-group-label { font-size: 6px; font-weight: 700; fill: var(--color-accent-800, #2c455d); pointer-events: none; font-family: var(--font-heading, Arial, sans-serif); }

/* markers: one colour per part */
.k-HULL { --fm-c: #2b5a87; }
.k-DECK { --fm-c: #1f7f73; }
.k-CONSOLE { --fm-c: #a8661a; }
.k-TTOP { --fm-c: #74479b; }
.k-HULLDECK { --fm-c: #2b5a87; --fm-c2: #1f7f73; }
.k-BOAT { --fm-c: #2f7d34; }
.fm-sw.k-HULLDECK { background: linear-gradient(90deg, #2b5a87 50%, #1f7f73 50%); }
.fm-chip { cursor: pointer; transform-box: view-box; transform-origin: 0 0; }
.fm-chip-bg { fill: var(--fm-c); stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.3; }
.fm-chip-tag { fill: rgba(0, 0, 0, 0.28); }
.fm-chip-half { fill: var(--fm-c2); }
.fm-chip-tagtext { font-size: 3.6px; font-weight: 700; fill: #fff; font-family: var(--font-body, Arial, sans-serif); pointer-events: none; }
.fm-chip-text { font-size: 4.6px; font-weight: 600; fill: #fff; font-family: var(--font-body, Arial, sans-serif); pointer-events: none; }
.fm-chip.st-done .fm-chip-bg { fill: #fff; stroke: var(--fm-c); stroke-width: 0.6; stroke-dasharray: 1.2 0.7; }
.fm-chip.st-done .fm-chip-tag { fill: var(--fm-c); }
.fm-chip.st-done.k-HULLDECK .fm-chip-half { fill: var(--fm-c2); }
.fm-chip.st-done .fm-chip-text { fill: var(--fm-c); }
.fm-chip-ready { fill: #f2c94c; }
.fm-chip-star { fill: var(--color-alarm, #c0392b); stroke: #fff; stroke-width: 0.35; }
.fm-chip.selected .fm-chip-bg { stroke: #111; stroke-width: 0.9; stroke-dasharray: none; }
.fm-chip.found .fm-chip-bg { stroke: #e0a100; stroke-width: 1.1; stroke-dasharray: none; }
.fm-chip.dim { opacity: 0.22; }

/* under the map */
.fm-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.fm-moves .microlabel { width: 100%; }
.fm-move { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--color-divider); border-radius: 14px; background: var(--color-neutral-100); font: inherit; font-size: 12px; cursor: pointer; }
.fm-detail { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 8px; background: var(--color-neutral-100); }
.fm-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.fm-detail-head h3 { margin: 2px 0 0; font-size: 18px; }
.fm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin-bottom: 10px; font-size: 14px; }
.fm-facts > div { display: flex; flex-direction: column; gap: 2px; }
.fm-note { margin-bottom: 10px; color: var(--color-alarm); font-size: 14px; }
.fm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; padding: 7px 4px; border: 0; border-top: 1px solid var(--color-divider); background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.fm-row:hover { background: var(--color-neutral-200); }
.fm-row-st { color: var(--color-neutral-700); font-size: 13px; }
.fm-flag { color: var(--color-alarm); font-size: 12px; font-weight: 600; }
.fm-empty { color: var(--color-neutral-700); font-size: 14px; }
@media (max-width: 640px) {
  .fm-stage { height: auto; aspect-ratio: 1030 / 560; min-height: 220px; }
  .fm-find { width: 120px; }
  .fm-when { width: 100%; }
}
.fm-stale { margin-top: 10px; font-size: 14px; }
.fm-stale summary { cursor: pointer; color: var(--color-neutral-800); padding: 4px 0; }

/* Floor Map 3D view (floormap3d.js) */
.fm-mode { margin: 0; }
.fm-zoom.hidden, .fm-views.hidden { display: none; }
.fm-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.fm-view { padding: 5px 11px; border: 1px solid var(--color-divider); border-radius: 14px; background: var(--color-neutral-100); font: inherit; font-size: 13px; cursor: pointer; }
.fm-view:hover { background: var(--color-accent-100); border-color: var(--color-accent-400); }
.fm-hint { font-size: 12px; color: var(--color-neutral-600); margin-left: auto; }
.fm-3dbox { position: absolute; inset: 0; cursor: grab; }
.fm-3dbox.hidden { display: none; }
.fm-3d { display: block; width: 100%; height: 100%; touch-action: none; }
@media (max-width: 640px) { .fm-hint { display: none; } }
@media (max-width: 640px) { .fm-stage.is-3d { aspect-ratio: auto; height: 62vh; } }

/* Floor Map 3D - the walker (floormap3d.js): drag the figure onto the floor */
.fm-walkui { position: absolute; inset: 0; pointer-events: none; }
.fm-walker {
  position: absolute; right: 14px; top: 12px; width: 40px; height: 62px; padding: 3px 4px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--color-divider); border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); pointer-events: auto; cursor: grab; touch-action: none; z-index: 2;
}
.fm-walker svg { width: 100%; height: 100%; display: block; }
.fm-walker.lifted { cursor: grabbing; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 0.6); }
.fm-walkui.walking .fm-walker { display: none; }
.fm-walkbar {
  display: none; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 6px 6px 6px 14px;
  background: rgba(29, 31, 32, 0.82); color: #fff; border-radius: 22px; font-size: 13px; pointer-events: auto;
}
.fm-walkbar .btn { padding: 6px 12px; min-height: 0; }
.fm-walkui.walking .fm-walkbar { display: flex; }
.fm-hint-touch { display: none; }
.fm-stick {
  display: none; position: absolute; left: 18px; bottom: 64px; width: 112px; height: 112px; border-radius: 50%;
  background: rgba(29, 31, 32, 0.22); border: 2px solid rgba(255, 255, 255, 0.75); pointer-events: auto; touch-action: none;
}
.fm-stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
@media (pointer: coarse) {
  .fm-walkui.walking .fm-stick { display: block; }
  .fm-hint-keys { display: none; }
  .fm-hint-touch { display: inline; }
}
.fm-walkbar .btn { background: #fff; color: #1d1f20; border: 0; border-radius: 16px; font-weight: 600; }

/* ---- 17 Quality (qa.js): checklist cards ---- */
.qa-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 6px; }
.qa-bar .qa-find { flex: 1; min-width: 200px; }
.qa-bar .qa-days { width: auto; }
.qa-only { font-size: 13px; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.qa-help { margin: 2px 0 6px; }
.qa-sum { font-size: 13px; color: var(--color-neutral-700); margin: 4px 0 8px; }
.qa-boat { border-bottom: 1px solid var(--color-divider); }
.qa-row {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  padding: 10px 4px; min-height: 48px;
}
.qa-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.qa-row:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }
.qa-id { display: flex; flex-direction: column; }
.qa-id .hull { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qa-id .sub { font-size: 12px; color: var(--color-neutral-600); }
.qa-pills { display: flex; gap: 8px; }
.qa-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--color-divider); border-radius: 4px; padding: 0 8px 0 0; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.qa-pill.done { border-color: var(--color-accent-700); color: var(--color-accent-800); background: var(--color-accent-100); }
.qa-pill.part { border-color: #c69200; color: var(--color-amber-ink); background: var(--color-amber-soft); }
.qa-pill.none { color: var(--color-neutral-700); }
.qa-pn { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; }
.qa-pill .qa-pn { border-radius: 0; }
.qa-boat.open .qa-row { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.qa-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 4px 4px 16px; }
@media (max-width: 760px) { .qa-parts { grid-template-columns: minmax(0, 1fr); } }
.qa-part { border: 1px solid var(--color-divider); border-left: 5px solid var(--lqc-comp); border-radius: 4px; padding: 10px 12px; min-width: 0; }
.qa-part-head { display: flex; justify-content: space-between; align-items: center; }
.qa-count { font-size: 12px; font-weight: 700; color: var(--color-neutral-700); }
.qa-laid { font-size: 12px; margin: 4px 0 2px; }
.qa-done { font-size: 12px; font-weight: 700; color: var(--color-accent-700); }
.qa-q { padding: 9px 0; border-top: 1px solid var(--color-divider); }
.qa-q:first-of-type { border-top: 0; }
.qa-qt { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.qa-yn { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-opt {
  min-width: 72px; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: 4px; background: var(--color-bg); color: var(--color-text);
}
.qa-opt:hover { background: color-mix(in srgb, var(--color-text) 7%, var(--color-bg)); }
.qa-opt.selected.v-Y { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.qa-opt.selected.v-N { background: var(--color-brick); border-color: var(--color-brick); color: #fff; }
.qa-opt.selected.v-NA { background: var(--color-neutral-700); border-color: var(--color-neutral-700); color: #fff; }
.qa-text { width: 100%; box-sizing: border-box; min-height: 44px; }
.qa-who { font-size: 11px; color: var(--color-neutral-600); margin-top: 4px; min-height: 13px; }
.qa-views { margin-top: 12px; }
.qa-lock { font-size: 12px; font-weight: 700; color: var(--color-amber-ink); background: var(--color-amber-soft); border-radius: 3px; padding: 4px 8px; margin: 4px 0 2px; }
.qa-part.locked .qa-qt { color: var(--color-neutral-600); }
.qa-opt:disabled, .qa-text:disabled { cursor: not-allowed; opacity: .55; }
.qa-opt:disabled:hover { background: var(--color-bg); }

.qa-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
  width: 100%; padding: 10px 6px; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--color-divider); color: inherit; font: inherit; cursor: pointer;
}
.qa-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.qa-row:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }
.qa-pills { flex-wrap: wrap; }
.qa-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--color-divider); border-radius: 4px; padding-right: 7px; overflow: hidden;
}
.qa-pill.locked { opacity: .6; }
.qa-row-wrap { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-divider); }
.qa-row-wrap .qa-row { border-bottom: 0; flex: 1; min-width: 0; }
.qa-finish { flex: none; white-space: nowrap; }
.qa-finished { font-size: 13px; font-weight: 600; color: var(--color-accent-800); background: var(--color-accent-100); border-radius: 4px; padding: 6px 10px; margin: 0 0 10px; }
.qa-flag { background: var(--color-brick); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 11px; }
/* What AIMS had on the boat (aimsImport.js), folded away under the stations. */
.qa-aims { margin: 14px 0; border: 1px solid var(--color-neutral-300); border-radius: 4px; padding: 6px 10px; }
.qa-aims > summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.qa-aims-h { margin: 12px 0 4px; }
.qa-aims-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.qa-aims-t td, .qa-aims-t th { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--color-neutral-200); vertical-align: top; }
.qa-aims-t .num { text-align: right; }
.qa-aims-rep { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-700); }
/* A dialog's text keeps its line breaks (the AIMS import preview is several paragraphs). */
#dlgBody { white-space: pre-line; max-height: 60vh; overflow-y: auto; }
.qa-boat-title { font-size: 22px; margin: 8px 0; }
.qa-boat-title .adm-dim { font-size: 15px; font-weight: 400; }
.qa-area { margin-bottom: 18px; }
.qa-area h4 { margin: 0 0 8px; }
.qa-area h4 .qa-done { margin-left: 8px; }
.qa-q.failing { background: color-mix(in srgb, var(--color-brick) 6%, transparent); box-shadow: -6px 0 0 color-mix(in srgb, var(--color-brick) 6%, transparent), 6px 0 0 color-mix(in srgb, var(--color-brick) 6%, transparent); }
.qa-opt.selected.v-P { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.qa-opt.selected.v-X { background: var(--color-brick); border-color: var(--color-brick); color: #fff; }
.qa-opt-tag { font-size: 11px; font-weight: 400; color: var(--color-neutral-600); }
.qa-entry { display: flex; align-items: center; gap: 8px; }
.qa-unit { font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; }
.qa-paper { font-size: 12px; color: var(--color-amber-ink); margin-top: 4px; }
.qa-defect { border-left: 3px solid var(--color-brick); padding: 4px 0 4px 8px; margin-top: 8px; font-size: 13px; }
.qa-defect.cleared { border-left-color: var(--color-divider); color: var(--color-neutral-600); }
.qa-defect-note { margin-top: 2px; }
.qa-code { font-size: 11px; color: var(--color-neutral-600); white-space: nowrap; }
.qa-chip { font-size: 11px; font-weight: 700; background: var(--color-neutral-200); color: var(--color-neutral-700); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.qa-photos { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 4px; }
.qa-photos .war-thumb-sm { margin-top: 0; width: 72px; }
.qa-add-photo, .qa-more { font-size: 13px; }
.qa-more { margin-top: 6px; }
.qa-sheet-wrap {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.qa-sheet {
  display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; max-height: 88vh;
  box-sizing: border-box; padding: 14px 16px; background: var(--color-bg); border-radius: 8px 8px 0 0;
}
.qa-sheet-q { font-size: 15px; font-weight: 600; }
.qa-sheet-list { flex: 1; min-height: 120px; overflow-y: auto; border: 1px solid var(--color-divider); }
.qa-sheet-group { position: sticky; top: 0; padding: 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--color-neutral-200); color: var(--color-neutral-700); }
.qa-sheet-row {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; align-items: center;
  padding: 6px 8px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--color-divider); color: inherit; font: inherit; cursor: pointer;
}
.qa-sheet-row.selected { background: var(--color-accent-700); color: #fff; }
.qa-sheet-row.selected .qa-code { color: #fff; }
.qa-sheet-photos { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.qa-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }
.qa-lightbox { align-items: center; }
.qa-lightbox .qa-sheet { border-radius: 8px; max-width: 900px; width: auto; }
.qa-lightbox img { max-width: 100%; max-height: 72vh; object-fit: contain; min-width: 200px; }
.qa-plates { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.qa-plate { border: 1px solid var(--color-divider); padding: 8px 14px; min-width: 110px; }
.qa-plate b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.qa-table-wrap { overflow-x: auto; }
.qa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qa-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-neutral-600); padding: 4px 8px 4px 0; }
.qa-table td { padding: 5px 8px 5px 0; border-top: 1px solid var(--color-divider); vertical-align: top; }
.qa-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.qa-click { cursor: pointer; }
.qa-click:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.qa-quiet { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--color-neutral-600); }
.qa-quiet-part { display: inline-flex; align-items: center; gap: 6px; }

/* Quality > Checklists & Rules (qaEditor.js) */
.qa-inst { margin: 2px 0 6px; font-size: 13px; color: var(--color-neutral-700); }
.qa-inst summary { cursor: pointer; font-size: 12px; font-weight: 600; min-height: 24px; }
.qe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.qe-bar .input { width: auto; max-width: 100%; }
.qe-grow { flex: 1 1 200px; }
.qe-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--color-divider); }
.qe-row.off { opacity: .55; }
.qe-row.dragging { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.qe-grip { cursor: grab; padding: 2px 6px; color: var(--color-neutral-600); user-select: none; touch-action: none; }
.qe-main { flex: 1 1 auto; min-width: 0; }
.qe-text { font-weight: 600; overflow-wrap: anywhere; }
.qe-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 11px; }
.qe-tag { padding: 1px 6px; border: 1px solid var(--color-divider); }
.qe-tag.warn { border-color: #c69200; color: var(--color-amber-ink); background: var(--color-amber-soft); }
.qe-moves { display: flex; flex: 0 0 auto; gap: 4px; }
.qe-mini { min-height: 36px; min-width: 36px; padding: 2px 8px; }
.qe-form { display: grid; gap: 10px; padding: 12px; margin: 8px 0; border: 1px solid var(--color-divider); }
.qe-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; }
.qe-form label.qe-check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; min-height: 36px; }
.qe-form .input { width: 100%; }
.qe-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.qe-spots { max-height: 220px; overflow-y: auto; border: 1px solid var(--color-divider); padding: 4px 8px; }
.qe-spots label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; min-height: 32px; }
.qe-spot { border-bottom: 1px solid var(--color-divider); }
.qe-spot > summary { display: flex; align-items: center; gap: 8px; padding: 10px 4px; cursor: pointer; font-weight: 600; min-height: 44px; }
.qe-spot > summary .qe-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--color-neutral-600); }
.qe-spot.off > summary { opacity: .55; }
.qe-defects { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.qe-defects th { text-align: left; font-size: 11px; padding: 4px; }
.qe-defects td { padding: 3px 4px; vertical-align: middle; }
.qe-defects tr.off { opacity: .55; }
.qe-defects .input { width: 100%; min-width: 0; }
.qe-col-code { width: 84px; }
.qe-col-pts { width: 64px; }
.qe-col-act { width: 96px; }
.qe-preview-part { margin: 6px 0 12px; }
.qe-preview-part ol { margin: 4px 0 0 22px; padding: 0; font-size: 14px; }
.qe-preview-area { margin-top: 16px; font-size: 15px; font-weight: 700; }
.qe-file { display: inline-flex; align-items: center; }
.qe-diff { font-size: 13px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--color-divider); }
.qe-diff ul { margin: 4px 0 8px 18px; padding: 0; }
@media (max-width: 640px) {
  .qe-defects, .qe-defects tbody, .qe-defects tr, .qe-defects td { display: block; width: auto; }
  .qe-defects thead { display: none; }
  .qe-defects tr { padding: 8px 0; border-top: 1px solid var(--color-divider); }
  .qe-col-code, .qe-col-pts, .qe-col-act { width: auto; }
}

.qa-section { margin: 14px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-700); }
.qa-score { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; font-size: 14px; }
.qa-warn { margin: 6px 0; font-size: 13px; }
.qe-section { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-700); }
.qe-lab { font-size: 12px; font-weight: 600; }
.qe-cond { display: grid; gap: 6px; }
.qe-groups { margin-top: 16px; }
.qe-groups > summary { cursor: pointer; font-weight: 600; min-height: 36px; }

/* Quality boat page: stations open into parts, parts into their check sheet. */
.qa-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qa-toggle:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.qa-toggle:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }
.qa-toggle-end { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.qa-chevron { font-size: 14px; color: var(--color-neutral-600); width: 14px; text-align: center; }
.qa-area { margin-bottom: 8px; border: 1px solid var(--color-divider); }
.qa-area-name { font-size: 16px; font-weight: 700; }
.qa-area-status { font-size: 13px; font-weight: 600; }
.qa-area-status.done { color: var(--color-accent-700); }
.qa-area-status.part { color: var(--color-amber-ink); }
.qa-area-status.quiet { color: var(--color-neutral-600); font-weight: 400; }
.qa-area .qa-parts { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 8px 8px; }
.qa-area .qa-quiet { margin: 0; padding: 0 10px 10px; }
.qa-area .qa-quiet:empty { display: none; }
.qa-part.closed { padding: 0; }
.qa-part .qa-toggle.qa-part-head { padding: 6px 8px; margin: -2px 0; }
.qa-part.closed .qa-toggle.qa-part-head { margin: 0; }

/* Quality > Patch & Polish: defects marked on a picture of the part. */
.qm-views { margin: 8px 0; flex-wrap: wrap; }
.qm-stage {
  position: relative; width: min(100%, calc(60vh * var(--qm-aspect, 2))); aspect-ratio: var(--qm-aspect, 2);
  margin: 6px auto; background: #fff; border: 1px solid var(--color-divider); user-select: none; -webkit-user-select: none; overflow: hidden;
}
.qm-stage.can-mark { touch-action: none; cursor: crosshair; }
.qm-stage img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.qm-stage.qm-missing::after { content: "This picture won't load"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #6b7280; }
.qm-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qm-mark { fill: rgba(217, 45, 32, .18); stroke: #b42318; stroke-width: 2.5px; cursor: pointer; }
.qm-mark.repaired { fill: rgba(0, 160, 26, .14); stroke: #067a18; }
.qm-mark.selected { stroke-width: 4px; fill-opacity: .9; }
.qm-mark.temp { fill: rgba(0, 98, 255, .18); stroke: #0062ff; stroke-dasharray: 6 4; pointer-events: none; }
.qm-heat { pointer-events: none; }
.qm-num {
  position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #fff;
  font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: #b42318; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.qm-num.repaired { background: #067a18; }
.qm-num.selected { outline: 3px solid #0062ff; }
.qm-num.static { position: static; transform: none; flex: 0 0 auto; width: 32px; height: 32px; font-size: 14px; }
.qm-hint { font-size: 12px; margin: 2px 0; }
.qm-sign { margin: 8px 0; }
.qm-big { min-height: 44px; }
.qm-sign .qm-big { width: 100%; }
.qm-row { display: flex; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--color-divider); }
.qm-row.selected { background: color-mix(in srgb, #0062ff 7%, transparent); }
.qm-row-body { flex: 1; min-width: 0; }
.qm-row .qa-defect { margin-top: 2px; }
.qa-defect.repaired { border-left-color: #067a18; }
.qm-fixed { background: #d9f2dd; color: #065f13; white-space: normal; }
.qm-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.qm-taken { margin-top: 8px; font-size: 13px; }
.qm-taken > summary { cursor: pointer; min-height: 32px; color: var(--color-neutral-700); }
.qm-qc { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-divider); font-size: 13px; }
.qm-qc-row { margin-top: 4px; }
.qm-heat-card { margin-top: 12px; }
.qm-heat-card .qm-stage { width: min(100%, calc(50vh * var(--qm-aspect, 2))); }
.qm-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.qm-pic { border: 1px solid var(--color-divider); padding: 8px; min-width: 0; }
.qm-pic.off { opacity: .55; }
.qm-pic-img { background: #fff; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.qm-pic-img img { max-width: 100%; max-height: 100%; }

/* Quality check sheet: each item a card in a grid, a band per section (Tyler, 2026-11-05). */
.qa-section { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 8px; padding: 8px 12px; border-radius: 4px; background: color-mix(in srgb, var(--color-accent-700) 12%, var(--color-bg)); font-size: 13px; color: var(--color-text); }
.qa-section-n { font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--color-neutral-700); }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; align-items: start; margin-top: 8px; }
.qa-grid .qa-q, .qa-grid .qa-q:first-of-type { border: 1px solid var(--color-divider); border-radius: 8px; padding: 10px 12px; min-width: 0; background: var(--color-bg); box-shadow: none; }
.qa-grid .qa-q.passed { background: color-mix(in srgb, #1c7a3d 16%, var(--color-bg)); border-color: color-mix(in srgb, #1c7a3d 55%, var(--color-divider)); }
.qa-grid .qa-opt.selected.v-P, .qa-grid .qa-opt.selected.v-Y { background: #1c7a3d; border-color: #1c7a3d; }
.qa-grid .qa-q.na { background: color-mix(in srgb, var(--color-neutral-700) 8%, var(--color-bg)); }
.qa-grid .qa-q.failing { background: color-mix(in srgb, var(--color-brick) 12%, var(--color-bg)); border-color: var(--color-brick); box-shadow: none; }
.qa-grid .qa-q.qal-item { border-left: 4px solid var(--color-brick); padding-left: 10px; }
.qa-grid .qa-yn { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.qa-grid .qa-opt { min-height: 48px; width: 100%; }
.qa-grid .qa-entry .qa-text { min-width: 0; flex: 1; }
@media (max-width: 600px) {
  .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qa-grid .qa-q, .qa-grid .qa-q:first-of-type { padding: 8px; }
  .qa-grid .qa-qt { font-size: 14px; }
  .qa-grid .qa-opt { min-width: 0; padding: 0 6px; }
  .qa-grid .qa-entry { flex-wrap: wrap; }
  /* Three answers or a typed one need the whole row on a phone. */
  .qa-grid .qa-q:has(.qa-opt:nth-child(3)), .qa-grid .qa-q:has(.qa-entry) { grid-column: 1 / -1; }
}

/* Quality dashboard (phase 7): the top defects' trend against the period
   before, and the managers' boat score line. */
.qa-trend { font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; }
.qa-trend.up { color: var(--color-brick); font-weight: 700; }
.qa-trend.down { color: var(--color-accent-700); font-weight: 700; }
.qa-scores { --fi-line: var(--color-accent-700); margin-bottom: 12px; }
.qa-score-svg { width: 100%; height: auto; display: block; }
.qa-score-dot { fill: var(--color-neutral-500); }

/* ---- 18 Maintenance (mnt.js) ---- */
.mnt-msg { margin: 0 0 8px; }
.mnt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.mnt-grid .mnt-wide { grid-column: 1 / -1; }
.mnt-grid textarea.input { resize: vertical; min-height: 64px; font: inherit; }
.mnt-card { border-left-width: 4px; }
.mnt-pri-down { border-left-color: var(--color-brick); }
.mnt-pri-high { border-left-color: var(--color-amber); }
.mnt-pri-normal { border-left-color: var(--color-accent); }
.mnt-pri-low { border-left-color: var(--color-divider); }
.mnt-pri-down .mnt-pri { background: var(--color-brick); border-color: var(--color-brick); color: var(--color-bg); font-weight: 700; }
.mnt-pri-high .mnt-pri { background: var(--color-amber); border-color: transparent; color: var(--color-amber-ink); }
.war-chip.mnt-st-assigned { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
.war-chip.mnt-st-complete { border-color: var(--color-accent-700); color: var(--color-accent-700); }
.war-chip.mnt-st-cancelled { background: var(--color-neutral-600); border-color: var(--color-neutral-600); color: var(--color-bg); }
.mnt-done { margin-top: 6px; color: var(--color-accent-700); }
.mnt-hist { margin-top: 6px; }
.mnt-hist summary { cursor: pointer; }
.mnt-ev { padding: 2px 0; overflow-wrap: anywhere; }
.mnt-who { width: auto; min-width: 180px; max-width: 100%; }
.mnt-crewrow { margin: 6px 0 10px; }
.mnt-crewrow > div { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.mnt-x { border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; color: inherit; }
.mnt-photos { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.mnt-prisel { width: auto; min-width: 0; padding-block: 2px; font-weight: 600; }
.mnt-pri-down .mnt-prisel { border-color: var(--color-brick); color: var(--color-brick); }
.mnt-pri-high .mnt-prisel { border-color: var(--color-amber-ink); color: var(--color-amber-ink); }

/* 17 Quality - repair and invoice (2026-11-13). */
.qa-inv-bar { margin-top: 4px; }
.qa-inv-why { margin: 2px 0 8px; }
.qa-repair-all { margin: 8px 0 4px; }

/* 19 Shipping (ship.js): the shipping status log as an editable table. */
.ship-subs { margin-bottom: 10px; }
.ship-find { flex: 1; min-width: 200px; max-width: 360px; }
.ship-scroll { overflow: auto; max-height: calc(100dvh - 220px); }
.ship-table { min-width: 1700px; }
.ship-table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--color-bg); }
.ship-table .input[type="date"] { width: 9em; min-width: 0; padding: 4px; }
.ship-table .ship-hull, .ship-table .ship-invoiceNo { width: 7em; min-width: 0; }
.ship-table .ship-hin { width: 10em; min-width: 0; }
.ship-table .hb-wrap { min-width: 220px; }
.ship-table .input.saving { opacity: .6; }
.ship-status.st-notified { background: var(--color-amber-soft); }
.ship-status.st-scheduled { background: var(--color-accent-100, #dbe8f7); }
.ship-status.st-complete { background: #d9efdc; }
tr.ship-archived td { color: var(--color-neutral-600); }
.ship-act { white-space: nowrap; }
.ship-contacts { min-width: 1100px; }
.mnt-msg.bad { color: var(--color-brick, #9a3a33); }

/* A defect added after its sheet was finished (2026-11-13). */
.qa-chip.qa-late { background: var(--color-amber-soft); }
.qa-more.qa-late-add { font-size: 12px; padding: 3px 8px; }
.ship-qa { color: var(--color-brick); font-weight: 700; font-size: 12px; margin: 2px 0; }