/* Van Stock - coordinator console.
   Direction: "the shop board". A printed van board on a maintenance-shop wall,
   not a SaaS dashboard. Ink on cool paper, OCH navy rail, and the worker app's
   own green / rust / kraft carried across so both halves of the product agree.
   Display face is Bahnschrift (DIN) - the face of van livery and shelf labels. */

:root {
  color-scheme: light dark;

  --paper:      #EDF0F3;   /* cool shop paper, deliberately not cream */
  --card:       #FFFFFF;
  --sunk:       #F4F7F9;
  --ink:        #16202B;   /* slate ink, blue cast, never pure black */
  --muted:      #5B6672;
  --rule:       #D2DAE1;
  --rule-soft:  #E5EAEE;

  --navy:       #1F4E79;   /* OCH primary */
  --navy-deep:  #14314C;   /* the rail */
  --rail-ink:   #C9D7E5;
  --rail-dim:   #8AA3BC;

  --green:      #2F6F5E;   /* stocked - carried from the worker app */
  --green-tint: #E3EFEA;
  --rust:       #B4472E;   /* short - carried from the worker app */
  --rust-tint:  #FAE8E2;
  --kraft:      #F2E9DA;   /* the MINE tag */
  --kraft-ink:  #82552A;

  --primary-bg: #1F4E79;
  --primary-fg: #FFFFFF;
  --focus:      #2E75B6;

  --toast-bg:   #16202B;   /* the Saved/Undo bar stays a dark surface in both themes */
  --toast-fg:   #EDF0F3;
  --overlay:    #FFFFFF;   /* the crew confirm: never the same colour as the row behind it */
  --overlay-line: #A9B7C4;

  --shadow: 0 1px 0 rgba(20,49,76,.04), 0 1px 3px rgba(20,49,76,.07);
  --r: 6px;

  --font-display: "Bahnschrift","DIN Alternate","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --font-body: system-ui,"Segoe UI","Open Sans",Roboto,Arial,sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#121A22; --card:#1A242E; --sunk:#151E27; --ink:#E6ECF2; --muted:#93A2B0;
    --rule:#2B3947; --rule-soft:#22303E;
    --navy:#2E75B6; --navy-deep:#0E1B27; --rail-ink:#B7CADC; --rail-dim:#7F97AD;
    --green:#5FAE95; --green-tint:#16302A; --rust:#E28160; --rust-tint:#33201A;
    --kraft:#332B20; --kraft-ink:#D8B98C;
    --primary-bg:#2A669E; --primary-fg:#FFFFFF; --focus:#6FB0E8;
    --toast-bg:#24323F; --toast-fg:#EDF0F3;
    --overlay:#2E3E4D; --overlay-line:#6E8296;
    --shadow: 0 1px 0 rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

/* Every layout rule below sets display, which would otherwise beat the
   browser's own [hidden] rule and leave hidden regions on screen. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-stretch: 87.5%; margin: 0; letter-spacing: .01em; }
h2 { font-size: 27px; font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
p { margin: 0; }


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

/* ---------- wordmark --------------------------------------------------- */

.wordmark {
  font-family: var(--font-display);
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: .13em;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
}
.wordmark span:first-child { font-weight: 400; }
.wordmark span:last-child  { font-weight: 700; }

/* ---------- sign in ----------------------------------------------------- */

.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)),
    var(--navy-deep);
}
.signin-card {
  width: min(380px, 100%);
  background: var(--card);
  border-radius: var(--r);
  padding: 30px 30px 26px;
  box-shadow: 0 18px 48px rgba(6,20,33,.35);
}
.signin-card .wordmark { font-size: 30px; color: var(--navy); }
.signin-lede {
  color: var(--muted); font-size: 13px; margin-top: 10px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule-soft);
}

.field { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field select {
  display: block; width: 100%; margin-top: 6px; min-height: 46px;
  padding: 0 12px; font: 15px var(--font-body); color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
}
.field input:focus, .field select:focus { border-color: var(--focus); }
.signin-card .btn { margin-top: 22px; }

/* ---------- shell -------------------------------------------------------- */

#shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

nav {
  background: var(--navy-deep);
  color: var(--rail-ink);
  padding: 24px 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid rgba(255,255,255,.07);   /* holds the edge in dark mode */
}
nav .brand { font-size: 21px; color: #fff; padding: 0 10px 20px; }
nav :focus-visible { outline-color: #fff; }

button.nav {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  min-height: 46px; padding: 0 12px;
  background: transparent; color: var(--rail-ink);
  border: 0; border-radius: var(--r);
  font-family: var(--font-display); font-stretch: 87.5%; font-size: 16px; letter-spacing: .04em;
  display: flex; align-items: center; gap: 10px;
  transition: background-color .09s linear;
}
button.nav::before { content: ""; width: 3px; height: 17px; border-radius: 2px; background: transparent; }
button.nav:hover { background: rgba(255,255,255,.07); }
button.nav.on { background: rgba(255,255,255,.12); color: #fff; }
button.nav.on::before { background: var(--rust); }

nav .who {
  margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
nav .who-name { color: #fff; font-weight: 600; font-size: 14px; }
nav .who-role { color: var(--rail-dim); font-size: 12px; }
nav .who .btn { margin-top: 8px; color: var(--rail-ink); }
nav .who .btn:hover { background: rgba(255,255,255,.09); }

main { padding: 30px 34px 80px; max-width: 1180px; }
main:focus { outline: none; }

@media (max-width: 899px) {
  #shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  nav { position: static; height: auto; flex-direction: row; align-items: center;
        gap: 4px; overflow-x: auto; padding: 10px 12px; }
  nav .brand { padding: 0 14px 0 4px; font-size: 17px; }
  nav .who { margin: 0 0 0 auto; padding: 0 0 0 12px; border-top: 0;
             border-left: 1px solid rgba(255,255,255,.13);
             flex-direction: row; align-items: center; gap: 10px; }
  nav .who .btn { margin-top: 0; }
  nav .who-role { display: none; }
  nav .who-name, nav .who .btn, button.nav { white-space: nowrap; }
  main { padding: 20px 18px 60px; }
}

/* ---------- page furniture ----------------------------------------------- */

.viewhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lede {
  font-family: var(--font-display); font-stretch: 87.5%; font-size: 19px; font-weight: 400;
  color: var(--muted); margin-top: 10px; max-width: 64ch;
}
.lede b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lede b.short { color: var(--rust); }

.cat {
  font-family: var(--font-display); font-stretch: 87.5%;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.cat { margin: 26px 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--rule); }
.cat .cat-n { color: var(--muted); opacity: .65; margin-left: 8px; letter-spacing: .04em; }

/* Confirmations are pinned to the viewport: a message at the top of a 9,000px
   document is a message nobody reads. Sits above the Undo bar when both show. */
.status {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 39; max-width: calc(100vw - 32px);
  background: var(--toast-bg); color: var(--toast-fg);
  font-size: 14px; font-weight: 600;
  padding: 12px 18px; border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.16); border-left: 4px solid var(--green);
  box-shadow: 0 10px 30px rgba(6,20,33,.3);
}
.status:empty { display: none; }
body.has-undo .status { bottom: 98px; }
.error {
  color: var(--rust); background: var(--rust-tint); border-radius: var(--r);
  padding: 10px 12px; font-size: 13px; font-weight: 600; margin-top: 12px;
}
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 14px 0; font-size: 14px; }

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

.btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .09s linear, border-color .09s linear;
}
.btn:hover { background: var(--sunk); }
.btn.primary { background: var(--primary-bg); color: var(--primary-fg); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); background: var(--primary-bg); }
.btn.danger { background: var(--rust); color: #fff; border-color: transparent; }
.btn.danger:hover { filter: brightness(1.08); background: var(--rust); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--sunk); }
.btn.sm { padding: 0 12px; font-size: 13px; }   /* min-height 44px comes from .btn */
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }

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

.form {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 18px 20px 20px; margin-top: 18px; box-shadow: var(--shadow);
}
.form-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { margin-top: 0; flex: 1 1 190px; }
.form-row .field.narrow { flex: 0 0 130px; }
/* A PIN box is 130px because a PIN is four to eight digits. "8 to 64
   characters" does not fit in it, and rendered clipped mid-word on the one
   form that creates an account able to reset everyone else's — so the same
   field widens when the role it is asking for uses a password. */
.form-row .field.narrow.wide { flex: 0 1 250px; }
.form .actions { display: flex; gap: 10px; margin-top: 18px; }

/* ---------- the van board (signature element) ----------------------------- */

.board { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.plate {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 7px minmax(0,1fr) auto auto;
  align-items: center; column-gap: 20px;
  width: 100%; min-height: 88px; padding: 0 22px 0 0;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: border-color .09s linear, background-color .09s linear;
}
.plate:hover { border-color: var(--navy); background: var(--sunk); }
.plate[aria-expanded="true"] { border-color: var(--navy); }
.plate .edge { align-self: stretch; border-radius: 5px 0 0 5px; background: var(--green); }
.plate[data-state="short"] .edge { background: var(--rust); }

.plate-name { padding: 16px 0; min-width: 0; }
.plate-id {
  display: block; font-family: var(--font-display); font-stretch: 87.5%;
  font-size: 23px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding-left: 18px;
}
.plate-crew {
  display: block; font-size: 13.5px; color: var(--muted); padding-left: 18px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.plate-count { text-align: right; }
.plate-count .n {
  display: block; font-family: var(--font-display); font-stretch: 87.5%;
  font-size: 40px; font-weight: 700; line-height: 1; color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.plate-count .lbl { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

.pill {
  display: inline-block; border-radius: 999px; padding: 8px 15px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pill.ok { background: var(--green-tint); color: var(--green); }
.tag {
  display: inline-block; border-radius: 4px; padding: 4px 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--kraft); color: var(--kraft-ink); white-space: nowrap;
}
/* A standing count-request ask, on the fleet board (O5) — the same rust used
   for "short" elsewhere on this page, because it is the same kind of thing:
   attention a coordinator has not yet acted on. */
.tag.ask { background: var(--rust-tint); color: var(--rust); }

/* ---------- panels and tables ---------------------------------------------- */

.panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden; margin-top: 10px;
}

.detail { margin-top: 22px; scroll-margin-top: 20px; }
.detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 20px 22px; border-bottom: 1px solid var(--rule-soft); background: var(--sunk);
}
.detail-head h3 { font-size: 23px; text-transform: uppercase; letter-spacing: .04em; }
.detail-head .detail-state { margin-top: 4px; font-size: 14px; color: var(--muted); }
.detail-body { padding: 4px 22px 24px; }
.detail-body .cat:first-of-type { margin-top: 18px; }

.assign { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.assign .field { margin-top: 0; min-width: 240px; }

.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th {
  font-family: var(--font-display); font-stretch: 87.5%; font-weight: 600;
  font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule);
}
.tbl th.num, .tbl td.num { text-align: right; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .item { font-weight: 600; }
.tbl .sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.tbl .unit { color: var(--muted); font-size: 13px; }
.tbl td.num.short, .tbl td.num.neg { color: var(--rust); font-weight: 700; }
/* Questions inside tables are asked under the item name (.rowmsg.ask), so this
   column never changes width and never covers the row's own numbers. */
.tbl td.act { text-align: right; white-space: nowrap; width: 1%; }
.tbl tr.retired td { color: var(--muted); }
.tbl tr.retired .item { font-weight: 400; text-decoration: line-through; text-decoration-color: var(--rule); }

.scroll-x { overflow-x: auto; }

/* ---------- stepper --------------------------------------------------------- */

.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper .step {
  appearance: none; cursor: pointer; font: inherit; font-size: 19px; line-height: 1;
  width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink);
}
.stepper .step:hover { background: var(--sunk); }
.qtybox {
  width: 64px; height: 44px; text-align: center;
  font: 600 16px var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.qtybox:focus { border-color: var(--focus); }

/* ---------- inline confirm (never window.confirm) ---------------------------- */

.confirm { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.confirm .q { font-size: 13px; font-weight: 600; color: var(--rust); }
.confirm .q.plain { color: var(--muted); }
/* Out of flow: the crew row keeps its layout while the question is on screen.
   The surface is deliberately not the card colour, so it still reads as raised
   in dark mode. */
.crew-act .confirm {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 2; padding: 6px 8px 6px 14px; border-radius: var(--r);
  background: var(--overlay); box-shadow: 0 4px 18px rgba(6,20,33,.28);
  border: 1px solid var(--overlay-line);
  white-space: nowrap;   /* shrink-to-fit would otherwise wrap to the cell width */
}
.crew-act .confirm .q { white-space: nowrap; }
.crew-act { position: relative; }

.rowmsg { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--rust); }
/* A question asked in the row, under the item name: it covers nothing the row
   is showing, and the action column keeps its width. */
.rowmsg.ask {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r);
  background: var(--rust-tint); border: 1px solid var(--rust); border-left-width: 4px;
}
.rowmsg.ask.plain { background: var(--sunk); border-color: var(--navy); }
.rowmsg.ask .q { flex: 1 1 100%; font-size: 13px; }
.rowmsg.ask.plain .q { color: var(--muted); }

/* ---------- statement lists (Discrepancies) ---------------------------------- */

.statements { list-style: none; margin: 10px 0 0; padding: 0; }
.statements li {
  display: grid; grid-template-columns: 6px 1fr; gap: 0 16px; align-items: stretch;
  min-height: 60px; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); margin-bottom: 8px; box-shadow: var(--shadow); overflow: hidden;
}
.statements li::before { content: ""; align-self: stretch; background: var(--rust); }
.statements li.soft::before { background: var(--kraft-ink); }
/* The whole statement is the control that opens the van it names. */
.statements .say {
  appearance: none; border: 0; background: transparent; font: inherit; color: inherit;
  text-align: left; cursor: pointer; width: 100%; min-height: 60px;
  padding: 13px 18px 13px 0; display: flex; align-items: center; gap: 20px;
  justify-content: space-between; transition: background-color .09s linear;
}
.statements .say:hover { background: var(--sunk); }
.statements .say b { font-weight: 700; }
.statements .say-text { flex: 1 1 auto; }
.statements .say-go { flex: none; font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.statements .when { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 20px; align-items: flex-start; }
.stat .n {
  font-family: var(--font-display); font-stretch: 87.5%; font-size: 38px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; display: block;
}
.stat .lbl { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; }
/* The one counter a manager can act on is itself the way into the list. */
.stat-go {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 12px 16px; min-height: 44px; box-shadow: var(--shadow);
  transition: border-color .09s linear, background-color .09s linear;
}
.stat-go:hover { border-color: var(--navy); background: var(--sunk); }
.stat-go .lbl { color: var(--navy); font-weight: 600; }

/* crew on a van: name + "Take off van" */
.crew { list-style: none; margin: 10px 0 0; padding: 0; max-width: 560px; }
.crew li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 6px 8px 6px 16px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 8px;
}
.crew-name { font-weight: 600; }

.addrow { margin-top: 14px; }
/* An ask that is standing: the count a coordinator has already requested and
   the van has not yet answered. Kraft, not rust — nothing is wrong here, a
   worker has been asked to do something and has not done it yet, which is the
   same register as the "This van" tag rather than the same register as a
   negative on-hand. The left rule marks it as a state the panel is holding,
   the way .statements marks a discrepancy. */
.standing {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r);
  background: var(--sunk); border: 1px solid var(--rule);
  border-left: 4px solid var(--kraft-ink);
}
.standing .standing-text { font-size: 13.5px; font-weight: 600; }
.standing .btn { flex: none; }
.hint { margin-top: 12px; font-size: 13px; color: var(--muted); }
.detail-state b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Saved / Undo — where the coordinator is looking, not 300px above it. */
.undobar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 16px;
  background: var(--toast-bg); color: var(--toast-fg);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); padding: 10px 12px 10px 18px;
  box-shadow: 0 10px 30px rgba(6,20,33,.35);
  font-size: 14px; font-weight: 600; max-width: calc(100vw - 32px);
}
.undobar .btn { background: transparent; color: var(--toast-fg); border-color: rgba(255,255,255,.45); }
.undobar .btn:hover { background: rgba(255,255,255,.14); }
/* The same bar, in the same place, when the Undo did not go through. Rust is
   already this product's "short / not right" colour — the .error block above
   and the worker app's own short state — and .status marks a confirmation with
   a green rule on this same dark surface, so the rule is the one thing that
   changes. Left padding drops by the width of the rule so the bar keeps its
   size and the sentence stays where the coordinator's eye already is. */
.undobar.failed { border-left: 4px solid var(--rust); padding-left: 14px; }

.section { margin-top: 34px; }
.section-note { margin-top: 6px; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
/* A section that owns an action of its own — "The crew" and its Add someone —
   reads like the page head above it: title and note on the left, the one thing
   you can do on the right. */
.sectionhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sectionhead .btn { flex: none; }

.subhead {
  font-family: var(--font-display); font-stretch: 87.5%; font-weight: 600;
  font-size: 15px; letter-spacing: .04em; margin-top: 26px;
}
.subhead + .empty { padding-top: 8px; }

.stat .n.short { color: var(--rust); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

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

/* A PIN typed into a row's question: the same box as .qtybox, wide enough for
   eight digits and not a number input (leading zeros, no spinners). */
.pinbox {
  width: 132px; height: 44px; text-align: center; letter-spacing: .18em;
  font: 600 16px var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.pinbox:focus { border-color: var(--focus); }
.pinbox::placeholder { letter-spacing: normal; font-weight: 400; font-size: 13px; }

/* The crew and standard action columns carry two buttons; keep them apart. */
#crew .act .btn + .btn, .tbl .act .btn + .btn { margin-left: 6px; }

/* A password is longer than eight digits, so the box that takes one is wider
   and reads left to right instead of digit by digit. */
.pinbox.wide { width: 232px; text-align: left; padding: 0 12px; letter-spacing: normal; }

/* ---------- barcodes ------------------------------------------------------ */

/* A barcode is compared character by character - a coordinator moving one is
   here precisely because a digit was read wrong once already. Tabular figures
   and open tracking are the whole point of this treatment; it is the only
   place on the page that gets it besides the PIN box, for the same reason. */
.code {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  font-size: 15px; font-weight: 600; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* The codes open under the item's own row: nothing else moves, and the panel
   is sunk so it reads as belonging to the row above rather than as a new list. */
tr.codes > td { background: var(--sunk); padding: 4px 16px 18px; }
tr.codes .panel { margin-top: 10px; }
tr.codes .section-note { margin-top: 4px; }
tr.codes .empty { padding: 10px 0 2px; }

/* The item this code really belongs to. Sized like the boxes beside it so a
   question in a row keeps one height. */
.pickbox {
  height: 44px; max-width: 320px; padding: 0 10px;
  font: 600 15px var(--font-body); color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
}
.pickbox:focus { border-color: var(--focus); }

/* =====================================================================
   Teach — the capture station (spec §7.3). Phone-first, one column, one
   hand: a man holding a part in the other. Direction: the coordinator page
   is a shop board seen from a desk; this is the same board seen through a
   viewfinder — the camera is the shop-paper card turned into a dark glass
   panel, the hold-to-capture button is the one thing on the whole screen
   with any drama (a shutter, not a "submit" button), and everything else —
   the prompt strip, the walk nav, the outbox line — stays as quiet and
   printed-label plain as the rest of the product. Big targets throughout
   (spec §3.4): every tappable control is at least 56px tall.
   ===================================================================== */

.teach-body { background: var(--paper); }

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

.teach-shell { display: flex; flex-direction: column; min-height: 100vh; }

.teach-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 14px; background: var(--navy-deep); color: #fff;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 10px rgba(6,20,33,.25);
}
.teach-iconbtn {
  appearance: none; cursor: pointer; flex: none;
  width: 52px; height: 52px; border-radius: var(--r);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 21px; line-height: 1;
}
.teach-iconbtn:hover { background: rgba(255,255,255,.16); }
.teach-topmid { flex: 1 1 auto; min-width: 0; text-align: center; }
.teach-itemname {
  font-family: var(--font-display); font-stretch: 87.5%; font-weight: 600;
  font-size: 19px; letter-spacing: .01em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.teach-position {
  margin-top: 2px; font-size: 12.5px; color: var(--rail-dim);
  font-variant-numeric: tabular-nums;
}

.teach-shell .status {
  position: static; transform: none; margin: 10px 14px 0; max-width: none;
  border-left: 4px solid var(--green); font-size: 13.5px; padding: 10px 14px;
}
.teach-shell .status:empty { display: none; }

/* ---- main column ------------------------------------------------------ */

.teach-main {
  flex: 1 1 auto; padding: 14px 14px 18px; max-width: 640px;
  margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 14px;
}
.teach-main:focus { outline: none; }

/* ---- the camera, the signature surface -------------------------------- */

.teach-camera {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  background: var(--navy-deep); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow);
}
.teach-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.teach-reticle {
  position: absolute; inset: 9%; border: 2px solid rgba(255,255,255,.55);
  border-radius: 14px; pointer-events: none;
}
.teach-camera:has(.teach-video[hidden]) .teach-reticle { display: none; }

.teach-cam-message {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 10px; padding: 26px;
  background: var(--navy-deep); color: var(--rail-ink); text-align: center;
}
.teach-cam-message p { font-size: 14.5px; line-height: 1.5; }
.teach-cam-message .fix {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  font-size: 13px; color: #fff; background: rgba(255,255,255,.1);
  border-radius: var(--r); padding: 10px 12px; word-break: break-all;
  text-align: left;
}

/* A live count, pinned in the camera's own corner while a hold is on —
   the shutter counter, not a badge. */
.teach-holdcount {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 20px;
  background: var(--rust); color: #fff;
  font-family: var(--font-display); font-stretch: 87.5%; font-weight: 700;
  font-size: 19px; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(6,20,33,.4);
}

/* The thumbnail strip: frames taken this hold, in a row along the bottom of
   the viewfinder — visible progress, not a modal that would cover it. */
.teach-thumbs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: 6px; padding: 8px; overflow-x: auto;
  background: linear-gradient(0deg, rgba(14,27,39,.85), rgba(14,27,39,0));
}
.teach-thumbs img {
  width: 46px; height: 46px; object-fit: cover; border-radius: 6px; flex: none;
  border: 1px solid rgba(255,255,255,.35);
}

/* ---- the prompt: what to do with the part this hold ------------------- */

.teach-prompt {
  font-family: var(--font-display); font-stretch: 87.5%; font-weight: 600;
  font-size: 21px; text-align: center; color: var(--ink);
}
.teach-prompt b { color: var(--navy); }

.teach-prompt-ticks {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 6px; justify-content: center;
}
.teach-prompt-ticks li {
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px;
  background: var(--sunk); color: var(--muted); border: 1px solid var(--rule);
}
.teach-prompt-ticks li.done {
  background: var(--green-tint); color: var(--green); border-color: transparent;
}
.teach-prompt-ticks li.done::before { content: "✓ "; }

/* ---- the hold-to-capture button: the one dramatic control on the page -- */

.teach-holdbtn {
  appearance: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; width: 100%; min-height: 84px; border-radius: 42px;
  background: var(--rust); color: #fff; border: none;
  font-family: var(--font-display); font-stretch: 87.5%; font-weight: 700;
  font-size: 20px; letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(180,71,46,.35), inset 0 0 0 4px rgba(255,255,255,.18);
  transition: transform .08s ease, box-shadow .08s ease;
}
.teach-holdbtn:active,
.teach-holdbtn.holding {
  transform: scale(.97);
  box-shadow: 0 4px 14px rgba(180,71,46,.4), inset 0 0 0 4px rgba(255,255,255,.32);
}
.teach-holdbtn.holding { animation: teach-pulse 1s ease-in-out infinite; }
@keyframes teach-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(180,71,46,.4), inset 0 0 0 4px rgba(255,255,255,.32); }
  50% { box-shadow: 0 4px 14px rgba(180,71,46,.4), inset 0 0 0 8px rgba(255,255,255,.5); }
}
.teach-holdbtn[disabled] { background: var(--muted); box-shadow: none; cursor: default; }
@media (prefers-reduced-motion: reduce) { .teach-holdbtn.holding { animation: none; } }

/* ---- barcode --------------------------------------------------------- */

.teach-barcode {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 14px 16px 16px; box-shadow: var(--shadow);
}
.teach-barcode-state { font-size: 13px; font-weight: 600; color: var(--muted); }
.teach-barcode.has-code .teach-barcode-state { color: var(--green); }
.teach-barcode.has-code .teach-barcode-state::before { content: "✓ "; }
.teach-barcode-row { display: flex; gap: 10px; margin-top: 8px; }
.teach-barcode-input {
  flex: 1 1 auto; min-height: 52px; padding: 0 14px;
  font: 600 16px ui-monospace, "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  letter-spacing: .04em; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
}
.teach-barcode-input:focus { border-color: var(--focus); }
.teach-barcode-row .btn { flex: none; min-height: 52px; }

/* ---- done toggle, walk nav, outbox ------------------------------------ */

.teach-done .btn { min-height: 56px; font-size: 16px; }
.teach-done .btn.is-done { background: var(--green-tint); color: var(--green); border-color: transparent; }
.teach-done .btn.is-done::before { content: "✓ "; }

.teach-walknav { display: flex; gap: 10px; }
.teach-walknav .btn { flex: 1 1 0; min-height: 60px; font-size: 16px; }

.teach-outbox {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--card); border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--muted);
}
.teach-outbox.pending { color: var(--kraft-ink); }
.teach-outbox.failed { color: var(--rust); font-weight: 600; }

/* ---- the drawer: jump to any item -------------------------------------- */

.teach-drawer {
  position: fixed; inset: 0; z-index: 50; background: var(--paper);
  display: flex; flex-direction: column;
}
.teach-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--navy-deep); color: #fff;
}
.teach-drawer-head h2 { font-size: 19px; color: #fff; }
.teach-drawer-head .btn { color: #fff; border-color: rgba(255,255,255,.35); }
.teach-drawer-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 24px; }
.teach-drawer-list .cat:first-of-type { margin-top: 10px; }

.teach-drawer-row {
  appearance: none; cursor: pointer; text-align: left; width: 100%; font: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 0 14px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--ink);
}
.teach-drawer-row.current { border-color: var(--navy); background: var(--sunk); }
.teach-drawer-row .name { font-weight: 600; }
.teach-drawer-row .state { font-size: 12px; color: var(--muted); flex: none; }
.teach-drawer-row.is-done .state { color: var(--green); font-weight: 600; }
.teach-drawer-row.is-done .state::before { content: "✓ "; }

@media (min-width: 640px) {
  .teach-top { padding: 12px 16px; }
  .teach-camera { aspect-ratio: 4 / 3; }
}