/* Field Eval — Review.
 *
 * Desk-first, unlike the walk app. This gets used on a real screen beside PlantX, with a keyboard,
 * for a stretch at a time — so it optimises for reading density and scanning down a list, not for
 * thumbs in a nursery. Same palette as the walk app so the two read as one tool. */

:root {
  --bg:        #f5f3ef;
  --card:      #ffffff;
  --ink:       #14110c;
  --ink-soft:  #5c554a;
  --line:      #d6cfc2;
  --green:     #1f6b34;
  --green-ink: #ffffff;
  --amber:     #9a6100;
  --amber-bg:  #fff4dc;
  --red:       #a11b1b;
  --red-bg:    #fdeaea;
  --blue:      #1c4f7c;
  --blue-bg:   #eef3f8;
  /* Found lines are a third kind of card, not a worse green one or a milder amber one, so they get
     a colour of their own rather than borrowing the pilot-walk blue. */
  --found:      #0f5f6b;
  --found-bg:   #eaf4f5;
  --found-line: #b9d7db;
  /* A held line is waiting on a person and on nothing else — its own colour, and the loudest one
     on the page after red. */
  --hold:      #7a2e7e;
  --hold-bg:   #f8eef9;
  --hold-line: #dcc0df;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ── Chrome ────────────────────────────────────────────────────────────── */

#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: var(--card); border-bottom: 2px solid var(--line);
}
#crumb { font-weight: 800; font-size: 18px; }
#who   { margin-left: auto; color: var(--ink-soft); font-weight: 700; font-size: 15px; }
.icon-btn {
  background: none; border: 0; color: var(--ink);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
}

.screen { max-width: 1100px; margin: 0 auto; padding: 20px; }
.screen[hidden] { display: none; }
.screen-title { font-size: 22px; margin: 8px 0 16px; }

.msg { min-height: 20px; margin: 8px 0; color: var(--ink-soft); font-size: 15px; }
.msg.err { color: var(--red); font-weight: 700; }

/* ── Login ─────────────────────────────────────────────────────────────── */

.roster { display: flex; flex-wrap: wrap; gap: 10px; }
.roster button {
  min-height: 52px; padding: 0 22px; font: inherit; font-size: 17px; font-weight: 700;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px; cursor: pointer;
}
.roster button:hover { border-color: var(--green); }

.pin-dots { display: flex; gap: 10px; margin: 14px 0; }
.pin-dots i { width: 15px; height: 15px; border-radius: 50%; background: var(--line); }
.pin-dots i.on { background: var(--ink); }

.keypad { display: grid; grid-template-columns: repeat(3, 84px); gap: 10px; }
.key {
  min-height: 60px; font: inherit; font-size: 22px; font-weight: 700;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px; cursor: pointer;
}
.key-alt { font-size: 16px; color: var(--ink-soft); }

/* ── The bar ───────────────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 54px; z-index: 15;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 0 14px;
  background: var(--bg);
  border-bottom: 2px solid var(--line);
  margin-bottom: 18px;
}
.bar-count strong { font-size: 26px; font-weight: 800; }
.bar-count span   { color: var(--ink-soft); }
.search {
  flex: 1; min-width: 200px; min-height: 40px; padding: 0 12px;
  font: inherit; background: var(--card);
  border: 2px solid var(--line); border-radius: 8px; color: var(--ink);
}
/* The chips take the whole second line of the bar. They are a union, so a lit chip means "and also
   show these" — hence a filled state that reads as ON rather than as a selected radio. */
.chips {
  flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  min-height: 32px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 700;
  background: var(--card); color: var(--ink-soft);
  border: 2px solid var(--line); border-radius: 999px; cursor: pointer;
}
.chip:hover  { border-color: var(--ink-soft); }
.chip.on     { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip span   { font-weight: 800; opacity: .72; margin-left: 5px; }

.chips-note {
  flex: 0 0 100%; margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); font-style: italic;
}
.chips-note:empty { display: none; }

.undo-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--blue-bg); border: 2px solid var(--blue); border-radius: 10px;
  font-size: 15px; font-weight: 700; color: var(--blue);
}
.undo-bar[hidden] { display: none; }

/* ── Groups and cards ──────────────────────────────────────────────────── */

.loc-group { margin-bottom: 30px; }
.loc-head {
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin: 0 0 10px;
}
.loc-head span {
  font-weight: 700; letter-spacing: 0; text-transform: none;
  background: var(--card); border: 2px solid var(--line); border-radius: 999px;
  padding: 1px 9px; margin-left: 6px;
}

.card {
  background: var(--card); border: 2px solid var(--line); border-left-width: 7px;
  border-left-color: var(--green); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 12px;
}
/* A line whose binding no longer resolves cannot be keyed as written, so it does not get to look
   like the others. */
.card.blocked { border-left-color: var(--amber); background: #fffdf8; }

.card-head h3 { margin: 0 0 3px; font-size: 18px; }
.card-head .meta { font-size: 14px; color: var(--ink-soft); }
.tag {
  display: inline-block; padding: 1px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.tag.test { background: var(--blue-bg); color: var(--blue); }

.cols { display: flex; gap: 40px; margin: 14px 0 4px; }
.col h4 {
  margin: 0 0 2px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}
.col .said { margin: 0; font-size: 17px; font-weight: 700; }
.col .said.gone { color: var(--amber); }
.col .sub  { margin: 1px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ── Orders against this line ─────────────────────────────────────────── */

.allocs { margin-top: 8px; font-size: 13px; }
.allocs summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); }
.allocs summary:hover { color: var(--ink); }
.allocs-body { margin: 6px 0 0 2px; }

.allocs-toggle {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.allocs-toggle input { width: 14px; height: 14px; }

.allocs ul { margin: 0; padding-left: 18px; }
.allocs li { margin-bottom: 5px; }
/* Shipped rows are the muted state, hidden until "Show shipped" is checked — see app.js's
   [data-alloc-toggle] handler, which toggles .show-shipped rather than re-rendering. */
.allocs li.shipped { display: none; color: var(--ink-soft); }
.allocs ul.show-shipped li.shipped { display: list-item; }

.allocs-note  { display: block; font-size: 12px; color: var(--ink-soft); font-style: italic; }
.allocs-empty { margin: 0; color: var(--ink-soft); font-style: italic; }
.allocs-foot  { margin: 6px 0 0; font-size: 11px; color: var(--ink-soft); }

/* Where the live PlantX row and the walk's own baseline disagree. Quiet by design: it sits under
   the numbers it qualifies and must not compete with them. */
.col .sub.px-was { font-style: italic; }

.flag {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 700;
  background: var(--blue-bg); color: var(--blue);
}
.flag.blocking { background: var(--amber-bg); color: var(--amber); }

/* ── What the executor did ─────────────────────────────────────────────────
   The block that makes this screen worth opening: outcome, why, when, and which run. Coloured by
   outcome so a page of cards can be scanned rather than read. */

.outcome {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  border: 2px solid var(--line); background: var(--bg); font-size: 14px;
}
.outcome.ok       { border-color: var(--green);  background: #f2f8f3; }
.outcome.refused  { border-color: var(--amber);  background: var(--amber-bg); }
.outcome.unknown  { border-color: var(--blue);   background: var(--blue-bg); }
.outcome.reverted { border-color: var(--red);    background: var(--red-bg); }

.outcome p { margin: 0 0 4px; }
.outcome p:last-child { margin-bottom: 0; }
.outcome-head   { font-weight: 700; }
.outcome-detail { font-size: 14px; }
.outcome-meta   { font-size: 12px; color: var(--ink-soft); }
/* A reverted line also carries its 'ok' above, so the red heading needs a rule to separate them. */
.reverted-head  { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

.tag.out-ok       { background: var(--green);  color: #fff; }
.tag.out-refused  { background: var(--amber);  color: #fff; }
.tag.out-unknown  { background: var(--blue);   color: #fff; }
.tag.out-reverted { background: var(--red);    color: #fff; }

/* ── The instruction ───────────────────────────────────────────────────── */

.plan { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--line); }
.plan h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}
.plan ol { margin: 0; padding-left: 20px; }
.plan li { margin-bottom: 7px; font-size: 15px; }
.op {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 5px;
  background: var(--bg); border: 1px solid var(--line);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-soft);
}
.note { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); font-style: italic; }

/* ── Deciding ──────────────────────────────────────────────────────────── */

.actions { display: flex; gap: 10px; margin-top: 14px; }
.primary, .ghost {
  min-height: 42px; padding: 0 18px; font: inherit; font-size: 15px; font-weight: 800;
  border-radius: 9px; cursor: pointer;
}
.primary { background: var(--green); color: var(--green-ink); border: 0; }
.primary:hover { filter: brightness(1.08); }
.ghost {
  background: var(--card); color: var(--ink-soft);
  border: 2px solid var(--line);
}
.ghost:hover { border-color: var(--ink-soft); }
.small { min-height: 34px; padding: 0 12px; font-size: 14px; }

.why {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px; border-radius: 9px;
  background: var(--bg); border: 2px solid var(--line);
}
.why[hidden] { display: none; }
.why-title { margin: 0; flex: 0 0 100%; font-weight: 700; font-size: 14px; }
.why input {
  flex: 1; min-width: 220px; min-height: 36px; padding: 0 10px;
  font: inherit; background: var(--card);
  border: 2px solid var(--line); border-radius: 8px; color: var(--ink);
}

/* A decision that cannot be made yet has to look unavailable rather than broken: move and split
   need a chosen row, create needs the absence of one. See refreshPick() in app.js. */
.primary:disabled, .ghost:disabled { opacity: .42; cursor: not-allowed; }
.primary:disabled:hover { filter: none; }
.ghost:disabled:hover   { border-color: var(--line); }

.empty {
  padding: 40px; text-align: center; color: var(--ink-soft); font-size: 16px;
  background: var(--card); border: 2px dashed var(--line); border-radius: 12px;
}

/* ── Found lines ───────────────────────────────────────────────────────────
   Plants standing where nothing is on the list. Not a line to go and key in, so it must not look
   like one at a glance: its own left border and a badge that says what it is before the plant name
   does. */

.card.found         { border-left-color: var(--found); background: #fbfdfd; }
.card.found.blocked { border-left-color: var(--amber); }

.found-badge {
  display: inline-block; margin: 0 0 5px; padding: 2px 9px; border-radius: 5px;
  background: var(--found); color: #fff;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}

.found-facts {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--found-bg); border: 1px solid var(--found-line); font-size: 14px;
}
.found-facts p              { margin: 0 0 4px; }
.found-facts p:last-child   { margin-bottom: 0; }
.found-facts b              { color: var(--found); }

.tag.walker  { background: var(--card); color: var(--found); border: 1px solid var(--found-line); }
.tag.decided { background: var(--found); color: #fff; margin-right: 7px; }

.decision {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--found-bg); border: 2px solid var(--found);
  font-size: 15px; font-weight: 700; color: var(--found);
}
/* Create is the one outcome that is still a person's job, so it wears the colour of work waiting. */
.decision.by-hand              { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.decision.by-hand .tag.decided { background: var(--amber); }
.decision .sub { margin: 5px 0 0; font-size: 13px; font-weight: 400; color: var(--ink-soft); }

/* ── Candidates ────────────────────────────────────────────────────────────
   One row per PlantX row of this plant and size. Read on a laptop, one after another, comparing
   numbers — so: full width, radio pinned left, the deciding facts on the first line and the
   corroborating ones under it. */

.cands { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--line); }
.cands h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}

.cand-row {
  display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 9px;
  padding: 7px 10px; margin-bottom: 5px;
  background: var(--card); border: 2px solid var(--line); border-radius: 8px;
  cursor: pointer;
}
.cand-row:hover { border-color: var(--ink-soft); }
.cand-row.sel   { border-color: var(--found); background: var(--found-bg); }
/* The walker's suggestion stays findable in a long partition even after it has been clicked off. */
.cand-row.walker { border-color: var(--found-line); }
.cand-row input { width: 18px; height: 18px; margin: 3px 0 0; }
.cand-none      { border-style: dashed; }

.cand-body { display: block; min-width: 0; }
.cand-main { display: block; font-size: 15px; }
.cand-sub  { display: block; font-size: 13px; color: var(--ink-soft); }
.cand-note { display: block; font-size: 13px; color: var(--ink-soft); font-style: italic; }

.cand-math   { margin-top: 10px; font-size: 14px; }
.cand-math p { margin: 0 0 3px; }
.cand-sum    { color: var(--ink-soft); }
.cand-move,
.cand-split  { font-weight: 700; }
.cand-lead   { color: var(--found); font-weight: 700; }
.cand-hint   { color: var(--ink-soft); font-style: italic; }
.cand-err    { margin: 0; color: var(--red); font-weight: 700; }

/* ── Evaluate this row ─────────────────────────────────────────────────────
   The one editable block on the screen, so it has to look like one: a panel of its own, in the
   found colour, clearly a form rather than the read-only facts above it. It sits under the
   candidate list because it only exists once one of them has been chosen. */

.evalcard {
  margin-top: 14px; padding: 13px 14px; border-radius: 10px;
  background: var(--found-bg); border: 2px solid var(--found);
}
/* A `display` rule here would beat the browser's own [hidden], and the panel would never shut. */
.evalcard[hidden] { display: none; }

.eval-head { margin: 0 0 6px; font-size: 14px; }
.eval-ref  { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }

.eval-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.eval-fld  { display: block; flex: 1 1 130px; }
.eval-fld span   { display: block; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.eval-fld em     { font-style: normal; font-weight: 500; color: var(--ink-soft); }
.eval-fld input  {
  width: 100%; min-height: 38px; padding: 0 10px; font: inherit; font-weight: 700;
  background: var(--card); border: 2px solid var(--line); border-radius: 8px; color: var(--ink);
}

/* What the crew wrote down, kept on screen while their numbers are being changed — it is the thing
   the reviewer is departing from, and it is not going to be overwritten. */
.eval-walker { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.eval-diff   { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--found); }

.eval-note {
  width: 100%; min-height: 38px; margin-top: 10px; padding: 0 10px;
  font: inherit; background: var(--card);
  border: 2px solid var(--line); border-radius: 8px; color: var(--ink);
}
.eval-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ── Held lines ────────────────────────────────────────────────────────── */

.card { overflow-wrap: anywhere; }
.card.held { border-left-color: var(--hold); }

.bar-alert { margin-left: 6px; color: var(--hold); font-weight: 800; }
.bar-alert:empty { display: none; }

.hold {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--hold-bg); border: 2px solid var(--hold);
}
.hold p { margin: 0 0 6px; }
.hold-head   { font-size: 16px; font-weight: 800; color: var(--hold); }
.hold-detail { font-size: 15px; font-weight: 700; }
.hold-meta   { font-size: 12px; color: var(--ink-soft); }
.hold-why    { font-size: 13px; color: var(--ink-soft); }
.hold-noted  { font-size: 14px; }
.hold .allocs { background: var(--card); border: 1px solid var(--hold-line); border-radius: 8px;
                padding: 8px 10px; }
.hold .actions { margin-top: 10px; flex-wrap: wrap; }
.hold-note {
  width: 100%; min-height: 38px; margin-top: 10px; padding: 0 10px;
  font: inherit; background: var(--card);
  border: 2px solid var(--line); border-radius: 8px; color: var(--ink);
}
.holdadj { border-color: var(--hold); background: var(--card); }
.holdadj .eval-diff { color: var(--hold); }

.hold.decided.approved { background: #f2f8f3; border-color: var(--green); }
.hold.decided.approved .hold-head { color: var(--green); }
.hold.decided.declined { background: var(--red-bg); border-color: var(--red); }
.hold.decided.declined .hold-head { color: var(--red); }
.tag.hold-approved { background: var(--green); color: #fff; margin-right: 6px; }
.tag.hold-declined { background: var(--red);   color: #fff; margin-right: 6px; }

/* ── Overcommitted ─────────────────────────────────────────────────────── */

.over {
  margin: 10px 0 30px; padding: 12px 14px; border-radius: 12px;
  background: var(--card); border: 2px solid var(--line); overflow-wrap: anywhere;
}
.over summary {
  cursor: pointer; font-size: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft);
}
.over summary span {
  font-weight: 700; letter-spacing: 0; text-transform: none;
  border: 2px solid var(--line); border-radius: 999px; padding: 1px 9px; margin-left: 6px;
}
.over-why  { margin: 10px 0; font-size: 14px; color: var(--ink-soft); font-style: italic; }
.over-row  { padding: 9px 0; border-top: 1px solid var(--line); }
.over-row p { margin: 0 0 3px; }
.over-main { font-size: 15px; }
.over-sub  { font-size: 14px; color: var(--ink-soft); }
.over-neg  { color: var(--red); }
.over-orders { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.over-orders li { margin-bottom: 3px; }

/* Narrow screens still happen — someone will open this on a tablet to check something. */
@media (max-width: 700px) {
  .cols { flex-direction: column; gap: 12px; }
  .actions { flex-wrap: wrap; }
  .screen { padding: 12px 16px; }
  .cols { min-width: 0; }
}

/* ── Waiting to be dumped ──────────────────────────────────────────────────
   Borrows the Overcommitted frame (.over) — same kind of list, supplies rather than walk lines —
   and adds the tick. Bay headings are quieter than the worklist's: this is one list, not many. */

.dump { margin-bottom: 18px; }
.dump-loc {
  margin: 14px 0 2px; font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft);
}
.dump-loc span {
  font-weight: 700; letter-spacing: 0; border: 1px solid var(--line); border-radius: 999px;
  padding: 0 7px; margin-left: 4px;
}
.dump-row  { padding: 9px 0; border-top: 1px solid var(--line); }
.dump-row p { margin: 0 0 3px; }
.dump-note { font-weight: 700; color: var(--ink); quotes: "“" "”"; }
.dump-age  { font-weight: 700; }

.dump-tick {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.dump-tick input { width: 22px; height: 22px; }
.dump-tick input:disabled { cursor: not-allowed; }

/* The second gesture. Amber: it is the moment before a loss is booked. */
.dump-ask {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 12px; border-radius: 9px;
  background: var(--amber-bg); border: 2px solid var(--amber);
  font-size: 15px; font-weight: 700; color: var(--amber);
}
.dump-ask span { flex: 1 1 200px; }

.dump-state { margin-top: 4px !important; font-size: 14px; font-weight: 700; }
.dump-state.pending { color: var(--blue); }
.dump-state.done    { color: var(--green); }
.dump-state.held    { color: var(--hold); }
.dump-state.refused { color: var(--amber); }
.dump-detail { font-size: 14px; }

/* A note that only mentions dump is somebody's slip, and the fix is theirs to make in PlantX. */
.dump-check {
  margin-top: 16px; padding: 4px 12px 8px; border-radius: 9px;
  background: var(--amber-bg); border: 1px solid var(--amber);
}
.dump-check .dump-row { border-top-color: #ecd6a8; }

/* ── v10: what the walker entered, and photos ────────────────────────────── */

.walker { margin: 10px 0; padding: 10px 12px; background: var(--card);
          border: 1px solid var(--hold-line); border-radius: 8px; }
.walker h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase;
             letter-spacing: .05em; color: var(--hold); }
.walker .wrap { display: flex; gap: 20px; align-items: flex-start; }
.walker .wmain { flex: 1 1 0; min-width: 0; }
.walker .wpx { flex: 0 0 210px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--hold-line); }
.walker .wpx .said { margin: 0; font-size: 16px; font-weight: 700; }
.walker .wpx .said.gone { color: var(--amber); }
.walker .wpx .sub { margin: 1px 0 0; font-size: 13px; color: var(--ink-soft); }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; }
.wi { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wi.wide { grid-column: 1 / -1; }
.wl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
      color: var(--ink-soft); }
.wv { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.wmain .sub, .pslot .sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.muted { font-style: italic; }
.wcmp { margin-top: 10px; border-collapse: collapse; font-size: 14px; max-width: 100%; }
.wcmp th, .wcmp td { padding: 3px 12px 3px 0; text-align: left; font-weight: 600; }
.wcmp thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                 color: var(--ink-soft); }
.wcmp td.rev { color: var(--hold); font-weight: 800; }

.pstrip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pth { padding: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--bg);
       width: 72px; height: 72px; overflow: hidden; cursor: zoom-in; }
.pth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pth img.broken { visibility: hidden; }
.found-photos { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--card);
                border: 1px solid var(--found-line); }
.pkinds { display: flex; gap: 24px; flex-wrap: wrap; }
.pk { min-width: 0; }
.badge-notag { display: block; width: fit-content; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
               background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber);
               font-size: 13px; font-weight: 800; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.85); display: flex;
            align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-x { position: absolute; top: 10px; right: 14px; font-size: 32px; line-height: 1; color: #fff;
        background: none; border: 0; cursor: pointer; }

@media (max-width: 700px) {
  .walker .wrap { flex-direction: column; gap: 10px; }
  .walker .wpx { flex: none; width: 100%; padding-left: 0; border-left: 0;
                 border-top: 1px solid var(--hold-line); padding-top: 8px; }
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pslot .wl + .wv { margin-left: 6px; }

/* v14: the walker's flag for review */
.tag.flagged-badge { background: var(--amber); color: #fff; vertical-align: middle; }
.hold.flagged { border-color: var(--amber); }
.flag-note { margin: 4px 0 8px; padding: 8px 10px; border-left: 4px solid var(--amber); background: var(--card);
             border-radius: 6px; font-size: 17px; font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }

/* v16: in-flight holds and the By rep view */
.hold-ask { font-size: 16px; font-weight: 800; }
.inflight { margin: 0 0 8px; padding-left: 18px; font-size: 14px; }
.inflight li { margin-bottom: 4px; }
.rep-order { margin: 0 0 14px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.rep-order-head { margin: 0 0 8px; font-size: 15px; }
.rep-supply { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rep-supply p { margin: 0 0 6px; }
.rep-supply.open .rep-status { color: var(--hold); font-weight: 800; }
.rep-supply .actions { flex-wrap: wrap; }

/* v17: Needs tags */
.tags-total { margin: 0 0 10px; font-weight: 700; }
.tags-total button { margin-left: 10px; }
.tags-row { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.tags-row p { margin: 0; }
.tags-of { opacity: .72; }
.tags-note { font-size: 12px; opacity: .72; margin-top: 2px !important; }

/* v19: Investigate list */
.inv-sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; }
.inv-bed { font-size: 17px; }
.inv-area { font-size: 12px; opacity: .72; margin-left: 6px; }
.inv-asof { font-weight: 400; font-size: 13px; opacity: .72; }
.inv-warn { font-weight: 700; font-size: 13px; color: var(--red, #b3261e); }
.inv-note { white-space: pre-wrap; opacity: 1; }

/* ── Moves (v20) ───────────────────────────────────────────────────────────
   The inventory manager's review of field move jobs. Cards for the decisions (recount, bed-cleared
   mismatch), rows for the lighter ones (off-bed, leftovers), folds for the information. */
.mv-card { border-left-color: var(--hold); }
.mv-card.mv-src { border-left-color: var(--amber); }
.mv-basis { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
.mv-basis th, .mv-basis td { text-align: left; padding: 4px 8px; border-top: 1px solid var(--line); }
.mv-basis th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); border-top: 0; }
.mv-basis .num, .mv-jobs .num { text-align: right; font-variant-numeric: tabular-nums; }
.tag.mv-pick { background: var(--hold-bg); color: var(--hold); margin-left: 4px; }
.mv-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mv-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.mv-form input[type=number], .mv-form select, .mv-note {
  min-height: 36px; padding: 0 10px; font: inherit; font-size: 15px; background: var(--card);
  border: 2px solid var(--line); border-radius: 8px; color: var(--ink);
}
.mv-form input[type=number] { width: 96px; }
.mv-note { flex: 1 1 200px; min-width: 160px; }
.mv-preview { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--hold); }
.mv-ok { margin: 6px 0 0; color: var(--green); font-weight: 700; font-size: 14px; }
.mv-row .mv-form { margin-top: 6px; }
.mv-why { opacity: .85 !important; font-size: 13px !important; }
.mv-where { font-size: 14px; }
.mv-test { margin-left: 14px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mv-test input { width: 16px; height: 16px; }
.mv-settings { margin: 0 0 16px; font-size: 14px; }
.mv-settings summary { cursor: pointer; }
.mv-edit { margin-left: 6px; color: var(--blue); text-decoration: underline; font-size: 13px; }
.mv-fold > summary { cursor: pointer; }
.mv-fold > summary::marker { color: var(--ink-soft); }
.mv-scroll { overflow-x: auto; }
.mv-jobs { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); border: 2px solid var(--line); border-radius: 10px; }
.mv-jobs th, .mv-jobs td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.mv-jobs th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); border-top: 0; white-space: nowrap; }
.mv-st-active { color: var(--green); font-weight: 800; }
.mv-st-planned { color: var(--blue); font-weight: 700; }
.mv-st-cancelled { color: var(--red); }
.mv-st-closed { color: var(--ink-soft); }
@media (max-width: 700px) {
  .mv-card .cols { flex-wrap: wrap; gap: 16px; }
}
.mv-preview:empty { display: none; }