/*
 * Field Eval — deliberately light and high-contrast.
 *
 * This runs outdoors in direct sun on a phone held at arm's length, often by someone wearing
 * gloves. That drives every choice here: pale background rather than GLaDOS's dark chrome, heavy
 * type, and touch targets no smaller than 48px. Nothing here is decorative.
 */

:root {
  --bg:        #f5f3ef;
  --card:      #ffffff;
  --ink:       #14110c;
  --ink-soft:  #5c554a;
  --line:      #d6cfc2;
  --green:     #1f6b34;
  --green-ink: #ffffff;
  --amber:     #9a6100;
  --amber-bg:  #fff4dc;
  --diff:      #a85a00;   /* saved and differs from PlantX: solid fill, white text (v35) */
  --diff-ink:  #ffffff;
  --red:       #a11b1b;
  --red-bg:    #fdeaea;
  --blue:      #14507d;
  --tap:       52px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: contain;
}

/* ── Top bar ───────────────────────────────────────────────────────────── */
#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: var(--card);
  border-bottom: 2px solid var(--line);
}
#crumb { flex: 1; font-weight: 700; font-size: 16px; min-width: 0;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
  min-width: 40px; height: 40px; font-size: 30px; line-height: 1;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}

#netpill {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 5px 9px; border-radius: 999px;
}
.net-ok   { background: #e3f0e6; color: var(--green); }
.net-down { background: var(--amber-bg); color: var(--amber); }

.queue-btn {
  min-width: 44px; height: 40px; padding: 0 12px;
  border: 2px solid var(--amber); border-radius: 999px;
  background: var(--amber-bg); color: var(--amber);
  font-weight: 800; font-size: 15px; cursor: pointer;
}

/* ── Screens ───────────────────────────────────────────────────────────── */
.screen { padding: 14px 12px 120px; max-width: 720px; margin: 0 auto; }
.screen[hidden] { display: none; }
.screen-title { font-size: 21px; margin: 6px 0 14px; }
.msg { min-height: 20px; margin: 8px 0; color: var(--ink-soft); font-size: 14px; }
.msg.err { color: var(--red); font-weight: 700; }

.search, .text, input[type=number], input[type=date], textarea {
  width: 100%; padding: 13px 14px; font-size: 17px; font-family: inherit;
  border: 2px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}
.search { margin-bottom: 10px; }
input:focus, textarea:focus { outline: 3px solid var(--blue); outline-offset: -1px; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.roster button {
  min-height: 76px; padding: 12px; font-size: 19px; font-weight: 700;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px; cursor: pointer;
}
.roster button:active { background: #eee9e0; }

.pin-dots { display: flex; gap: 12px; justify-content: center; margin: 18px 0; min-height: 22px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--line); }
.pin-dots i.on { background: var(--ink); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 340px; margin: 0 auto; }
.key {
  min-height: 66px; font-size: 26px; font-weight: 700;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px; cursor: pointer;
}
.key:active { background: #e7e1d6; }
.key-alt { font-size: 17px; color: var(--ink-soft); }

/* ── Section picker ────────────────────────────────────────────────────── */
.snapshot-age { font-size: 13px; color: var(--ink-soft); margin: 4px 0 10px; }
.snapshot-age.stale { color: var(--amber); font-weight: 700; }

.section-list { display: flex; flex-direction: column; gap: 8px; }
.sec-group { margin-top: 10px; font-size: 13px; font-weight: 800;
             text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.sec {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 10px 14px;
  background: var(--card); border: 2px solid var(--line); border-radius: 10px;
  cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
}
.sec[aria-pressed="true"] { border-color: var(--green); background: #eef6f0; }
.sec .nm { flex: 1; font-weight: 700; }
.sec .ct { font-size: 14px; color: var(--ink-soft); }

/* ── Walk list ─────────────────────────────────────────────────────────── */
.line-list { display: flex; flex-direction: column; gap: 8px; }
.line {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 12px 14px; background: var(--card);
  border: 2px solid var(--line); border-left-width: 7px; border-radius: 10px; cursor: pointer;
}
/* v35: a saved card reads like the pressed Confirm-as-is button — solid fill, white-ish ink, a tick
   before the name. Green = matches PlantX, amber = differs, red = not here, blue = found. */
.line.done { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.line.done.differs { background: var(--diff); border-color: var(--diff); color: var(--diff-ink); }
.line.done.nohere  { background: var(--red);  border-color: var(--red);  color: #fff; }
.line.done.found   { background: var(--blue); border-color: var(--blue); color: #fff; }
.line.done .nm::before { content: "\2713\00a0"; font-weight: 800; }
.line.done .sub { color: inherit; opacity: .92; }
.line.done.differs .sub { opacity: 1; }
.line.done .flag { margin-right: 4px; }
.line.done .done-flag, .line.done .photo-flag, .line.done .found-flag,
.line.done .off-flag, .line.done .unhide-flag, .line.done .dump-flag {
  background: #fffdf8; color: var(--ink); border: 0;
}
.line.done .exec-ok  { color: var(--green); }
.line.done .exec-rev { color: var(--red); }
.plant-total .ct-differs { color: var(--diff); font-weight: 800; }
/* Narrow screens: the long "PlantX 61 → not here" slot drops under the name instead of squeezing it. */
@media (max-width: 480px) {
  .line.done.differs, .line.done.nohere { display: flex; flex-direction: column; align-items: flex-start; }
  .line.done.differs .qty, .line.done.nohere .qty { float: none; order: 1; font-size: 17px; margin-top: 2px; }
  .line.done.differs .nm, .line.done.nohere .nm { order: 0; }
  .line.done.differs .sub, .line.done.nohere .sub { order: 2; }
  .line.done.differs .flag, .line.done.nohere .flag { order: 3; }
}
.line.ready  { border-left-color: #7fa88b; }
.line.notrdy { border-left-color: #c9a227; }
.line .nm  { font-weight: 700; }
.line .sub { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.line .qty { float: right; font-weight: 800; font-size: 19px; }
.line .flag { display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 5px;
              font-size: 12px; font-weight: 800; background: var(--amber-bg); color: var(--amber); }

/* ── Capture ───────────────────────────────────────────────────────────── */
.cap-head { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 14px; }
.cap-head h2 { margin: 0 0 4px; font-size: 19px; }
.cap-head .meta { font-size: 14px; color: var(--ink-soft); }
.cap-head .insp {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: var(--amber-bg); color: var(--amber); font-weight: 700; font-size: 14px;
}

.dup-warn {
  margin-top: 10px; padding: 11px 13px; border-radius: 10px;
  background: var(--red-bg); color: var(--red); font-weight: 700; font-size: 14px;
  border: 2px solid var(--red);
}

.confirm-asis {
  display: block; width: 100%; min-height: 72px; margin: 14px 0;
  font-size: 21px; font-weight: 800;
  background: var(--green); color: var(--green-ink);
  border: 0; border-radius: 12px; cursor: pointer;
}
.confirm-asis:active { filter: brightness(.9); }

.split-block { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 14px; }

.unit-toggle { display: flex; gap: 0; margin-bottom: 14px; }
.unit {
  flex: 1; min-height: 46px; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--bg); color: var(--ink-soft); border: 2px solid var(--line);
}
.unit:first-child { border-radius: 10px 0 0 10px; }
.unit:last-child  { border-radius: 0 10px 10px 0; border-left-width: 0; }
.unit.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.nrrdy { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.fld { display: block; }
.fld-label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.fld-label em { font-style: normal; font-weight: 500; color: var(--ink-soft); }
.fld.wide { margin-top: 14px; }
.nrrdy input { font-size: 26px; font-weight: 800; text-align: center; padding: 12px 6px; }

.onhand-anchor { text-align: center; padding-bottom: 12px; min-width: 78px; }
.onhand-anchor .oh-label { display: block; font-size: 12px; font-weight: 800;
                           text-transform: uppercase; color: var(--ink-soft); }
.onhand-anchor strong { font-size: 24px; }

.residual { margin-top: 12px; font-size: 15px; font-weight: 700; min-height: 24px; }
.residual.gap  { color: var(--amber); }
.residual.over { color: var(--red); }

/* Customer-facing vs internal notes must never be confusable. */
.note-customer .fld-label { color: var(--red); }
.note-customer textarea { border-color: var(--red); background: #fffafa; }
.note-internal textarea { background: #fafafa; }

.more { margin-top: 14px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; }
.more > summary { padding: 15px; font-weight: 700; cursor: pointer; list-style: none; min-height: var(--tap); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: " ▾"; color: var(--ink-soft); }
.more[open] > summary::after { content: " ▴"; }
.more > *:not(summary) { margin-left: 15px; margin-right: 15px; }
.more > *:last-child { margin-bottom: 15px; }

.chk { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 15px; }
.chk input { width: 26px; height: 26px; flex: none; }

/* ── Footers, sheets ───────────────────────────────────────────────────── */
.sticky-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; gap: 10px; padding: 12px max(12px, env(safe-area-inset-left))
           max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.sticky-foot > * { margin: 0; }
/* The width constraint belongs to the row; applied to each child it pushed Save and Skip to
   opposite edges of a wide screen. */
.sticky-foot { max-width: 744px; margin: 0 auto; }
.primary, .ghost {
  flex: 1; min-height: 58px; font: inherit; font-size: 19px; font-weight: 800;
  border-radius: 12px; cursor: pointer;
}
.primary { background: var(--ink); color: #fff; border: 0; }
.primary:disabled { background: #b9b1a4; }
.ghost { background: transparent; color: var(--ink-soft); border: 2px solid var(--line); flex: 0 0 34%; }

.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(20,17,12,.5); display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sheet-inner { background: var(--bg); width: 100%; max-height: 82vh; overflow: auto;
               border-radius: 16px 16px 0 0; padding: 18px 14px max(18px, env(safe-area-inset-bottom)); }
.sheet-inner h2 { margin: 0 0 10px; font-size: 19px; }
.sheet-inner .primary, .sheet-inner .ghost { width: 100%; margin-top: 10px; }
.queue-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.queue-item { background: var(--card); border: 2px solid var(--line); border-radius: 8px;
              padding: 9px 11px; font-size: 14px; }
.queue-item.err { border-color: var(--red); background: var(--red-bg); color: var(--red); }

/* ── Added with the staleness-ranked picker ────────────────────────────── */

/* Staleness is what drives the day when crews assess continuously, so it earns space. */
.sec-group { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sec-stale { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--amber); }
.pick-all {
  margin-left: auto; min-height: 34px; padding: 0 12px;
  font: inherit; font-size: 13px; font-weight: 700;
  background: var(--card); color: var(--blue);
  border: 2px solid var(--line); border-radius: 8px; cursor: pointer;
}
.sec.complete { border-color: var(--green); background: #f3f8f4; }
.line .done-flag { background: #e3f0e6; color: var(--green); }
.rule { border: 0; border-top: 2px solid var(--line); margin: 18px 0 8px; }

/* ── "Not here" ────────────────────────────────────────────────────────── */

/* Absent is a real answer, not a zero count. It sits beside Confirm as-is because for an
   Investigate line it IS the expected answer — those rows exist precisely because nobody knows
   whether the plants are there. */
.verdict { display: flex; gap: 10px; margin: 14px 0; }
.verdict .confirm-asis { flex: 1; margin: 0; }
.not-here {
  flex: 0 0 34%; min-height: 72px; font: inherit; font-size: 17px; font-weight: 800;
  background: var(--card); color: var(--red);
  border: 2px solid var(--red); border-radius: 12px; cursor: pointer;
}
.not-here:active { background: var(--red-bg); }
/* On an Investigate line, resolving presence is the point of the visit. */
.verdict.investigate .not-here { flex: 1; }
.verdict.investigate .confirm-asis { background: var(--card); color: var(--green);
                                     border: 2px solid var(--green); }
.investigate-hint {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 14px; font-weight: 700;
  background: #eef3f8; color: var(--blue);
}

/* ── Absence, recorded with context ────────────────────────────────────── */

/* Marking something missing is cheap; making it solvable six months later is not. One extra field,
   asked at exactly the moment the person is standing there looking at an empty bench. */
.not-here-panel {
  margin: 0 0 14px; padding: 14px; border-radius: 12px;
  background: var(--red-bg); border: 2px solid var(--red);
}
.not-here-panel[hidden] { display: none; }
.not-here-panel p { margin: 0 0 6px; font-weight: 700; color: var(--red); font-size: 15px; }
.not-here-panel .fld.wide { margin-top: 8px; }
.panel-actions { display: flex; gap: 10px; margin-top: 12px; }
.panel-actions .primary, .panel-actions .ghost { min-height: 50px; font-size: 17px; }

/* ── One screen, one decision ──────────────────────────────────────────── */

/* Confirm as-is and Not here used to save and leave on the tap. They are choices now, so they read
   as choices: an outline unselected, filled when chosen. Save is the only thing that commits. */
.confirm-asis,
.verdict.investigate .confirm-asis {
  background: var(--card); color: var(--green); border: 3px solid var(--green);
}
.confirm-asis[aria-pressed="true"],
.verdict.investigate .confirm-asis[aria-pressed="true"] {
  background: var(--green); color: var(--green-ink);
}
.not-here[aria-pressed="true"] { background: var(--red); color: #fff; }
.verdict button[aria-pressed="true"]::before { content: "✓ "; }

.verdict-note { margin: -4px 0 14px; font-size: 15px; font-weight: 700; color: var(--green); }
.verdict-note[hidden] { display: none; }
.verdict-note.warn { color: var(--amber); background: var(--amber-bg); padding: 8px 10px; border-radius: 8px; }

/* Dimmed rather than hidden: the card still shows what it can hold, but neither verdict sends any
   of it, and a field that looks typeable and is then discarded is worse than one that looks shut. */
.off { opacity: .45; pointer-events: none; }

/* Empty counts are not zeros — see refreshSave. */
.save-hint { flex: 0 0 100%; margin: 0 0 6px; font-size: 14px; font-weight: 700;
             color: var(--amber); text-align: center; }
.save-hint:empty { display: none; }
.sticky-foot { flex-wrap: wrap; }

.skip-panel {
  margin: 0 0 14px; padding: 14px; border-radius: 12px;
  background: var(--card); border: 2px solid var(--line);
}
.skip-panel[hidden] { display: none; }
.skip-panel p { margin: 0; font-weight: 700; font-size: 15px; }

/* Confirm as-is keeps More open — see setVerdict — but never sends listing intent. */
.chk-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.chk-note[hidden] { display: none; }

/* The ready-date rule and the hint under Look again by. Muted on purpose: both state how the tool
   behaves, and neither is anything to do — a line the eye can skip without losing an instruction. */
.rule-note { margin: 10px 2px 0; font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.rule-note[hidden] { display: none; }

/* Not inside More, and not inside the split block either: it has to be visible the moment counts
   leave something not ready, and it has to survive a confirm-as-is, which dims the split block. */
.look-again { margin-top: 12px; }

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

/* Reference, not input: quieter than anything the crew types into, but legible at arm's length in
   sun. One order per row, wrapping rather than scrolling — a phone is the normal screen here. */

/* .chk sets display:flex, which beats the browser's own [hidden] rule. */
.chk[hidden] { display: none; }

#allocList {
  list-style: none; margin: 10px 15px 12px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
#allocList li {
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.35;
}
#allocList .ord { display: block; font-weight: 700; }
#allocList .ord-note {
  display: block; margin-top: 3px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
/* Shipped is history — kept for "where did it go", never competing with what is still owed. */
#allocList li.shipped { opacity: .55; }
#allocList li.shipped .ord { font-weight: 500; }
#allocList li.none { border-style: dashed; color: var(--ink-soft); font-weight: 500; }

#allocFoot { font-size: 13px; color: var(--ink-soft); }
#allocFoot:empty { display: none; }

/* The dock hint, inside the red not-here panel: the one place an unshipped reservation is the
   likeliest explanation for an empty bay. */
#notHereAlloc { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--red); }
#notHereAlloc[hidden] { display: none; }

/* ── Found lines ───────────────────────────────────────────────────────── */

/* A found line is not a line off the sheet, and must never be mistaken for one. Blue everywhere —
   the colour nothing else on this screen uses — plus the word FOUND on the row itself. */
.line.found { border-left-color: var(--blue); background: #f1f5f9; }
.line .found-flag { background: #e6eef6; color: var(--blue); }

.found-badge {
  display: inline-block; margin-right: 7px; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  background: var(--blue); color: #fff; vertical-align: middle;
}
.found-pick {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: #eef3f8; color: var(--blue); font-weight: 700; font-size: 14px;
}

/* An author rule that sets `display` beats the browser's own [hidden] rule, so everything the found
   card takes off the screen has to say so here or it stays visible. */
.verdict[hidden], .unit-toggle[hidden], .fld[hidden], .pick[hidden] { display: none; }

/* With the On Hand anchor gone there are two columns, not three, and no empty middle to line up. */
.nrrdy.found { grid-template-columns: 1fr 1fr; }

/* ── The plant picker ──────────────────────────────────────────────────── */

/* Search results and PlantX candidates are the same kind of thing — a list of rows big enough to
   hit with a gloved thumb, holding as much as fits before it stops being readable outdoors. */
.pick-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pick {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  min-height: var(--tap); padding: 12px 14px;
  background: var(--card); border: 2px solid var(--line); border-radius: 10px; cursor: pointer;
}
.pick:active { background: #eee9e0; }
.pick .nm { display: block; font-weight: 700; }
.pick .ct { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-soft); }
.pick .cand-note { display: block; margin-top: 4px; font-size: 13px; color: var(--amber); font-weight: 700; }
.cand-tag { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .05em;
            padding: 2px 6px; border-radius: 5px; background: var(--amber-bg); color: var(--amber); }

/* Tapped is a suggestion, not a decision, so it reads as one — marked, not committed. */
.pick[aria-pressed="true"] { border-color: var(--blue); background: #eef3f8; }
.pick[aria-pressed="true"] .nm::before { content: "✓ "; color: var(--blue); }

/* The fallback is always the last thing on the list and never competes with a real result. */
.pick-type { border-style: dashed; color: var(--ink-soft); }
.pick-type .nm { color: var(--blue); }

.pick-state { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }

/* The duplicate interrupt reuses the red warning box, because it is the same kind of moment: stop,
   this is probably not what you think it is. */
#foundDup p { margin: 0; }
#foundDup .panel-actions { flex-wrap: wrap; }
#foundDup .ghost { flex: 1 0 100%; color: var(--red); border-color: var(--red); }

/* Long enough to wrap on a narrow phone, and it should. */
#foundBtn { font-size: 17px; }

/* On the search step there is nothing to continue to yet, so Back stops being a 34% afterthought
   next to an absent button and takes the row. */
#foundContinue[hidden] + .ghost { flex: 1; }

/* ── Refresh, and dropping a section ───────────────────────────────────── */

/* The ✕ is a second button, so the section stops being one button and becomes a row of two. It sits
   at the far edge, thumb-sized like everything else, and reads as destructive only while pressed —
   a removal that is one careless swipe away is not what a downloaded section should look like. */
.sec-row { display: flex; gap: 8px; align-items: stretch; }
.sec-row .sec { flex: 1; }
.sec-x {
  flex: 0 0 var(--tap); min-height: var(--tap);
  font: inherit; font-size: 19px; font-weight: 800; line-height: 1;
  background: var(--card); color: var(--ink-soft);
  border: 2px solid var(--line); border-radius: 10px; cursor: pointer;
}
.sec-x:active { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* Refresh reuses the "select all" pill — same size, same place in a group header, same kind of
   thing: a small action about the list under it. */
#dropPanel { margin-top: 8px; }

/* What the phone is still holding is not staleness, it is something to do. The status line says
   both, and they must not read alike. */
.snapshot-age.err { color: var(--red); font-weight: 700; }

/* ── What PlantX did with a committed line ─────────────────────────────── */
/* Green for applied, red for reverted by a staff Save; a refusal keeps the default amber .flag,
   because it is the same "look at this" as the duplicate warning beside it. */
.line .exec-ok  { background: #e3f0e6; color: var(--green); }
.line .exec-rev { background: #fbe9e9; color: var(--red); }

/* ── Hidden / empty supplies, and plant totals (v23) ───────────────────── */

/* `.offlist`, not `.off`: `.off` is dim()'s class and takes pointer events away.
   Off the list the section count promised: hidden in PlantX, or nothing on hand. On screen only
   behind the toggle, and greyed so nobody mistakes one for a line they still owe an answer. */
.hidden-toggle {
  display: block; width: 100%; min-height: 44px; margin: 0 0 10px;
  background: var(--card); color: var(--ink-soft); font-weight: 700; font-size: 15px;
  border: 2px dashed var(--line); border-radius: 10px; cursor: pointer;
}
.hidden-toggle[aria-pressed="true"] { border-style: solid; color: var(--ink); }
.hidden-toggle[hidden] { display: none; }

.line.offlist { background: #eeebe5; border-style: dashed; border-left-color: #b5ada0; color: var(--ink-soft); }
.line.offlist .qty, .line.offlist .nm { color: var(--ink-soft); }
.line .off-flag    { background: #e2ddd3; color: var(--ink-soft); letter-spacing: .05em; }
.line .unhide-flag { background: #e3f0e6; color: var(--green); }

/* One plant's supplies, totalled above them. A label, not a button: the lines are what is saved. */
.plant-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 6px 2px -2px; padding-bottom: 3px; border-bottom: 2px solid var(--line);
  font-size: 13px; font-weight: 800; color: var(--ink-soft);
}
.plant-total .ct { white-space: nowrap; }

/* The capture head of an off-list line: grey until plants are counted on it, then itself again. */
.cap-head.offlist { background: #eeebe5; border-style: dashed; }
.off-banner {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: #e2ddd3; color: var(--ink-soft); font-weight: 700; font-size: 14px;
}
.off-banner.live { background: #e3f0e6; color: var(--green); }

/* ── Photos (v24) ──────────────────────────────────────────────────────────
   Above the verdict on the capture card. One big button, then a strip of what this line already
   has: a status dot per photo (amber queued, green sent, red error) and a ✕ only while it has not
   left the phone. */
.photo-block { margin: 0 0 14px; }
.photo-btn {
  display: block; width: 100%; min-height: var(--tap); padding: 10px 14px;
  background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 17px;
  border: 2px solid var(--ink); border-radius: 12px; cursor: pointer;
}
.photo-btn:disabled { color: var(--ink-soft); border-color: var(--line); }
.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; }
.photo-strip[hidden] { display: none; }
.photo-strip .thumb {
  position: relative; flex: 0 0 72px; width: 72px; height: 72px;
  border-radius: 8px; overflow: hidden; background: #e2ddd3; border: 2px solid var(--line);
}
.photo-strip .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip .dot {
  position: absolute; left: 5px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; background: var(--amber);
}
.photo-strip .st-sent  .dot { background: var(--green); }
.photo-strip .st-error { border-color: var(--red); }
.photo-strip .st-error .dot { background: var(--red); }
.thumb .del {
  position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(20,17,12,.7); color: #fff;
  font-size: 15px; font-weight: 800; line-height: 30px; cursor: pointer;
}
.photo-msg { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.photo-msg.err { color: var(--red); font-weight: 700; }
.photo-msg:empty { display: none; }

.line .photo-flag { background: #e6eef6; color: var(--blue); }

.queue-item.photo-q { display: flex; gap: 10px; align-items: center; }
.queue-item .q-thumb { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }

/* ── Test walk / Real walk (v25) ───────────────────────────────────────── */
/* The toggle sits in the sections footer above Download; the footer wraps, so each takes a row.
   Test is amber and real is green in every place the kind is shown — the toggle, the tag on the
   downloaded list and the tag on the walk list — so the colour alone says which kind this is. */
.walk-mode { flex: 0 0 100%; margin-bottom: 0; }
.walk-mode .unit { min-height: 44px; }
.walk-mode .unit[aria-pressed="true"]#modeReal { background: var(--green); color: var(--green-ink);
                                                 border-color: var(--green); }
.walk-mode .unit[aria-pressed="true"]#modeTest { background: var(--amber); color: #fff;
                                                 border-color: var(--amber); }
/* Locked shows the choice, not a dead control: the chosen side keeps its colour. */
.walk-mode.locked .unit { cursor: default; }
.walk-mode.locked .unit[aria-pressed="false"] { opacity: .45; }
.walk-mode-hint { flex: 0 0 100%; font-size: 13px; color: var(--ink-soft); text-align: center; }
.walk-mode-hint:empty { display: none; }
/* The footer is taller now; keep the last section clear of it. */
#screen-sections { padding-bottom: 200px; }

.mode-tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 12px;
            font-weight: 800; letter-spacing: .03em; text-transform: none; vertical-align: 1px; }
.mode-tag.test { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber); }
.mode-tag.real { background: #e3f0e6; color: var(--green); border: 1px solid var(--green); }

/* ── v26: where am I, and is this real? ────────────────────────────────── */

/* The walk's kind, on every screen. Test is impossible to mistake for real: hazard stripes and an
   amber bar (the phone's status bar follows through theme-color). Real is calm and solid. */
#topbar { flex-wrap: wrap; }
.mode-band {
  flex: 0 0 calc(100% + 24px); margin: 8px -12px -8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 38px; padding: 5px 12px;
  font-size: 14px; font-weight: 800; letter-spacing: .03em; text-align: center;
}
.mode-band[hidden] { display: none; }
body.mode-test .mode-band {
  background: repeating-linear-gradient(135deg, #f2b632 0 16px, #1c1a16 16px 32px);
}
body.mode-test .mode-band-text {
  background: #f2b632; color: #1c1a16; padding: 4px 10px; border-radius: 6px;
}
body.mode-real .mode-band { background: var(--green); color: var(--green-ink); }
body.mode-test #topbar { background: #fff4dc; border-bottom-color: #f2b632; }
.mode-band-switch {
  min-height: 30px; padding: 0 10px; font: inherit; font-size: 12px; font-weight: 800;
  border-radius: 6px; cursor: pointer; border: 2px solid currentColor;
  background: rgba(255,255,255,.9); color: var(--ink);
}

/* ── Nav: bottom tabs on a phone ───────────────────────────────────────── */
:root { --nav-h: 62px; --rail-w: 280px; }
.nav[hidden] { display: none; }
/* v43: .nav-tab sets display:flex, which beat the hidden attribute — People showed for everyone. */
.nav-tab[hidden] { display: none; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 18;
  background: var(--card); border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-tabs { display: flex; }
.nav-tab {
  flex: 1; min-height: var(--nav-h); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; position: relative;
  background: none; border: 0; font: inherit; color: var(--ink-soft); cursor: pointer;
  border-top: 4px solid transparent;
}
.nav-tab.on { color: var(--ink); border-top-color: var(--ink); background: #f2efe9; }
.nav-ic { font-size: 20px; line-height: 1; }
.nav-lb { font-size: 13px; font-weight: 800; }
.nav-ct { font-size: 11px; font-weight: 700; color: var(--ink-soft); min-height: 13px; }
.nav-tab.warn .nav-ct {
  position: absolute; top: 6px; left: calc(50% + 10px); min-width: 20px; padding: 1px 6px;
  border-radius: 999px; background: var(--amber); color: #fff; font-size: 12px;
}
.rail-secs { display: none; }

/* The tabs take the bottom edge, so an action footer sits on top of them, not behind. */
body.has-nav .sticky-foot { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: 12px; }
body.has-nav .screen { padding-bottom: 200px; }
body.has-nav #queueBtn { display: none; }

/* Progress on every section row, so "how far through" reads without doing arithmetic. */
.sec { flex-wrap: wrap; }
.sec .bar { flex: 0 0 100%; height: 5px; border-radius: 3px; background: #ebe6dc; overflow: hidden; }
.sec .bar i { display: block; height: 100%; background: var(--green); }
.sec.current { border-color: var(--ink); box-shadow: inset 5px 0 0 var(--ink); }

/* ── Walk screen: which section, and the way to the next ───────────────── */
.sec-switch {
  width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 12px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--card); color: var(--ink); font: inherit;
  border: 2px solid var(--line); border-radius: 12px;
}
.sec-switch-nm { font-size: 22px; font-weight: 800; }
.sec-switch-ct { font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.sec-switch-go { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--blue); }
#secSheet .sheet-inner .section-list { margin-bottom: 6px; }

/* ── Tablet: a left rail with the walk's sections ──────────────────────── */
@media (min-width: 900px) {
  body.has-nav { padding-left: var(--rail-w); }
  .nav {
    top: 0; right: auto; width: var(--rail-w); bottom: 0;
    border-top: 0; border-right: 2px solid var(--line);
    overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 12px 16px;
  }
  .nav-tabs { flex-direction: column; gap: 6px; }
  .nav-tab {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px;
    padding: 0 14px; border: 0; border-left: 5px solid transparent; border-radius: 10px;
  }
  .nav-tab.on { border-left-color: var(--ink); }
  .nav-lb { font-size: 16px; }
  .nav-ct { margin-left: auto; font-size: 13px; }
  .nav-tab.warn .nav-ct { position: static; }
  .rail-secs { display: block; margin-top: 18px; }
  .rail-secs .section-list, .rail-secs { display: flex; flex-direction: column; gap: 6px; }
  .rail-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
            color: var(--ink-soft); margin: 0 4px 4px; }
  .rail-secs .sec { min-height: 0; padding: 9px 12px; }
  .rail-secs .sec .nm { font-size: 16px; }
  .rail-secs .sec .ct { font-size: 13px; }
  body.has-nav .sticky-foot { left: var(--rail-w); bottom: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.has-nav .screen { padding-bottom: 130px; }
  /* The rail already lists the sections; the switcher header stays as the section's title. */
  .sec-switch-go { display: none; }
  .sec-switch { cursor: default; }
}
#commitBtn { width: 100%; }

/* ── v26: autofilled count, and the short answered ─────────────────────── */
/* The app's number looks like a suggestion, not an entry: dashed and soft until someone types. */
input.auto { border-style: dashed; border-color: var(--blue); color: var(--blue); font-style: italic;
             background: #f1f6fa; }
.auto-hint { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--blue); text-align: center; }
.auto-hint[hidden] { display: none; }

.gap-ask { margin: 10px 0 4px; padding: 12px; border-radius: 12px;
           background: var(--amber-bg); border: 2px solid var(--amber); }
.gap-ask[hidden] { display: none; }
.gap-ask-q { margin: 0 0 10px; font-weight: 800; font-size: 16px; color: var(--ink); }
.gap-ask-btns { display: flex; gap: 10px; margin-bottom: 10px; }
.gap-btn {
  flex: 1; min-height: 58px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font: inherit; font-size: 18px; font-weight: 800;
  background: var(--card); color: var(--ink); border: 3px solid var(--line); border-radius: 12px;
  cursor: pointer;
}
.gap-btn small { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
#gapMissing[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #fff; }
#gapDumped[aria-pressed="true"]  { background: var(--red); border-color: var(--red); color: #fff; }
.gap-ask .text { width: 100%; box-sizing: border-box; }
.gap-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.gap-rows[hidden], .gap-btn[hidden] { display: none; }
.gap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-row-label { font-size: 18px; font-weight: 800; color: var(--ink); }
.gap-num { width: 120px; min-height: 52px; box-sizing: border-box; font: inherit; font-size: 22px; font-weight: 800;
           text-align: center; border: 3px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.gap-missing-line { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--ink); }
.gap-missing-line.bad { color: var(--red); }
.gap-btn[aria-pressed="true"] small { color: rgba(255,255,255,.9); }
.gap-btn[aria-pressed="true"]::before { content: "✓ "; }

/* ── v27: setup codes and People ───────────────────────────────────────── */
.pin-step { text-align: center; margin: -6px 0 4px; font-weight: 700; color: var(--ink-soft); }
.link-btn {
  display: block; margin: 18px auto 0; min-height: 48px; padding: 0 14px;
  background: none; border: 0; color: var(--blue); font: inherit; font-size: 16px;
  font-weight: 800; text-decoration: underline; cursor: pointer;
}
.link-btn[hidden] { display: none; }

.code-panel { margin: 0 0 18px; padding: 16px; border-radius: 14px;
              background: #eef3f8; border: 3px solid var(--blue); text-align: center; }
.code-panel[hidden] { display: none; }
.code-who { margin: 0; font-weight: 800; font-size: 17px; }
.code-digits { margin: 8px 0; font-size: 46px; font-weight: 900; letter-spacing: .12em;
               font-variant-numeric: tabular-nums; color: var(--ink); }
.code-how { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); text-align: left; }
.code-panel .primary { width: 100%; }

.add-person { padding: 14px; margin-bottom: 16px; background: var(--card);
              border: 2px solid var(--line); border-radius: 12px; }
.add-person .primary { width: 100%; margin-top: 10px; }

.people-list { display: flex; flex-direction: column; gap: 10px; }
.person { padding: 12px 14px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; }
.pname { font-weight: 800; font-size: 18px; }
.ptags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ptags:empty { display: none; }
.ptag { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; border: 1px solid; }
.ptag.me    { color: var(--ink-soft); border-color: var(--line); }
.ptag.admin { color: var(--blue); border-color: var(--blue); background: #eef3f8; }
.ptag.off   { color: var(--ink-soft); border-color: var(--line); background: #eee9e0; }
.ptag.warn  { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.ptag.code  { color: var(--green); border-color: var(--green); background: #e3f0e6; }
.pbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.pbtn { min-height: 44px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 800;
        background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 10px;
        cursor: pointer; }
.pbtn.danger { color: var(--red); border-color: var(--red); }

/* v28: a row waiting to be thrown out. */
.flag.dump-flag { background: #eee9e0; color: var(--ink); border: 1px solid var(--ink-soft); }

/* v29: notes as PlantX holds them, and the new supply's note on a split. */
.note-existing { margin: 14px 15px 0; padding: 9px 11px; font-size: 14px; color: var(--ink-soft);
                 background: #f2efe9; border-radius: 8px; white-space: pre-wrap; }
.note-existing[hidden] { display: none; }
.new-note { position: relative; }
.new-note[hidden] { display: none; }
.new-note .pick-all { position: absolute; right: 8px; top: 30px; }
.new-note textarea { padding-right: 70px; }
.thumb .del.arm { width: auto; padding: 0 9px; border-radius: 15px; font-size: 12px; background: var(--red); }

/* v30: the notes trail. */
.note-history .nh { margin: 0 15px 10px; padding: 8px 10px; font-size: 14px; background: #f2efe9; border-radius: 8px; }
.note-history .nh-when { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 2px; }
.note-history .nh i { color: var(--ink-soft); }

/* ── v31: Move ─────────────────────────────────────────────────────────── */
.move-link { display: block; width: 100%; min-height: 48px; margin: -6px 0 12px; padding: 0 12px;
             background: none; border: 0; color: var(--blue); font: inherit; font-size: 16px; font-weight: 800;
             text-decoration: underline; cursor: pointer; text-align: left; }
.move-link[hidden] { display: none; }
.move-qty { margin: 14px 0 8px; }
.move-h { font-size: 19px; margin: 18px 0 8px; }
.bed-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bed-chips[hidden] { display: none; }
.bed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bed-grid.bays { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); padding: 10px; border-radius: 12px;
                 background: #eef3f8; border: 2px solid var(--blue); }
.bed-grid.bays .bed { font-size: 20px; min-height: 60px; padding: 6px 4px; }
.bed-grid[hidden] { display: none; }
.bed { min-height: 52px; padding: 6px 10px; font: inherit; font-size: 16px; font-weight: 800;
       background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; cursor: pointer;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bed.area.on { border-color: var(--blue); background: #eef3f8; color: var(--blue); }
.bed.on:not(.area) { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.move-chosen { color: var(--red); }

/* ── v36: whole-row moves in the walk ───────────────────────────────────── */
/* Moved here and not yet counted: an unsaved card (ready / not-ready edge) with a blue "moved" edge. */
.line.movedhere:not(.done) { border-left-color: var(--blue); }
.line.movedhere:not(.done) .moved-flag { background: #e1ecf5; color: var(--blue); }
.line .moved-flag { background: #e1ecf5; color: var(--blue); }
.line.done .moved-flag { background: rgba(255,255,255,.22); color: inherit; }
/* The source marker: slim, not countable here (it opens the Move screen). */
.line.marker { padding: 8px 14px; }
.line.marker .sub { display: none; }
.line.marker .nm::before { content: "\2192\00a0"; }
/* A partial move's provisional card in the destination: read-only, no tap. */
.line.prov { opacity: .75; cursor: default; border-style: dashed; padding: 8px 14px; }
.line.prov .sub { display: none; }
.moved-meta { color: var(--blue); }
#moveUndo { color: var(--red); border-color: var(--red); }
#moveUndo[hidden] { display: none; }
#moveUndo { flex: 0 0 auto; padding: 0 14px; font-size: 16px; }
.line.prov { border-left-style: solid; border-left-color: var(--line); border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; }
.line.marker .nm, .line.prov .nm { margin-right: 10px; }
.line.marker .flag, .line.prov .flag { margin-top: 0; vertical-align: middle; }

/* ── Found-line photos (v37) ───────────────────────────────────────────────
   Two labelled slots on a found card; "No tag on the plant" greys the tag slot without locking its ✕. */
.photo-label { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.photo-label em { font-style: normal; color: var(--red); font-weight: 700; }
.photo-label[hidden], .tag-slot[hidden] { display: none; }
.tag-slot.dimmed .photo-btn, .tag-slot.dimmed .photo-strip, .tag-slot.dimmed .photo-msg { opacity: .45; }
.notag-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); margin-top: 6px;
  font-size: 17px; font-weight: 700; color: var(--ink); cursor: pointer; }
.notag-row input { width: 26px; height: 26px; flex: 0 0 26px; accent-color: var(--ink); }
.req-msg { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: #f7e4e1;
  color: var(--red); font-size: 14px; font-weight: 700; }
.req-msg[hidden] { display: none; }
.line .photo-flag.photo-missing { background: #f7e4e1; color: var(--red); }

/* v40: Died / Unsalable are plants, whatever unit the counts above are in. */
.gap-row-label .gap-unit { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-left: 4px; }

/* v40: Needs tags (+ optional how many). */
.tags-row { margin-top: 14px; }
.tags-row .chk { margin-top: 0; }
.tags-row .chk em { font-style: normal; font-size: 13px; color: var(--ink-soft); margin-left: 4px; }
.tags-row.off { opacity: .45; }
.tags-qty { margin-top: 8px; max-width: 220px; }
.tags-qty[hidden] { display: none; }

/* ── Flag for review (v41) ─────────────────────────────────────────────── */
.verdict .flag-review {
  flex: 0 0 26%; min-height: 72px; font: inherit; font-size: 15px; font-weight: 800;
  background: var(--card); color: var(--amber);
  border: 2px solid var(--amber); border-radius: 12px; cursor: pointer;
}
.flag-review:active { background: var(--amber-bg); }
.flag-review[aria-pressed="true"] { background: var(--amber); color: #fff; }
.flag-panel { margin: 0 0 14px; padding: 12px; border-radius: 12px; background: var(--amber-bg); border: 2px solid var(--amber); }
.flag-panel[hidden] { display: none; }
.flag-panel textarea { width: 100%; box-sizing: border-box; }
.line .flagged-flag { background: var(--amber); color: #fff; margin-right: 4px; }
.line.done .flagged-flag { background: var(--amber); color: #fff; }
/* .confirm-asis sets display:block, which beats the browser's own [hidden] rule. */
.verdict button[hidden] { display: none; }

/* ── Moves (v43) ───────────────────────────────────────────────────────────
   Two crews, two phones, one job. The same parts as the walk — .line rows, .bed grids, .pick lists,
   the sheet — plus a few of its own: chips for small choices, a banner for a write that did not
   land, and the unloader's receiving bed, which is the biggest thing on that screen on purpose. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip-row[hidden] { display: none; }
.chip {
  min-height: 46px; padding: 0 14px; font: inherit; font-size: 16px; font-weight: 800;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; cursor: pointer;
}
.chip small { font-weight: 600; color: var(--ink-soft); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip[aria-pressed="true"] small { color: rgba(255,255,255,.8); }
.chip:disabled { opacity: .4; cursor: default; }
.mj-lbl { margin: 12px 0 6px; }
.mj-soft { font-size: 14px; font-weight: 600; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }

.mj-new { margin-bottom: 14px; }
.mj-new-btns { margin-top: 0; }
.mj-new-btns .ghost { flex: 0 0 40%; }
.mj-new-form { margin-top: 12px; }
.mj-new-form[hidden] { display: none; }
.mj-mode { margin-top: 14px; }
.mj-mode .unit[aria-pressed="true"]#mjNewReal { background: var(--green); color: var(--green-ink); border-color: var(--green); }
.mj-mode .unit[aria-pressed="true"]#mjNewTest { background: var(--amber); color: #fff; border-color: var(--amber); }
.mj-list { display: flex; flex-direction: column; gap: 10px; }
.mj-job .ptags { margin-bottom: 4px; }
.mj-job .pbtns { margin-top: 10px; }
.mj-job .pbtn.mj-go { color: var(--green); border-color: var(--green); }
.mj-job.mj-done { opacity: .7; }
.mj-facts { font-size: 14px; color: var(--ink-soft); }
.ptag.mj-st-active { color: var(--green); border-color: var(--green); background: #e3f0e6; }
.ptag.mj-st-planned { color: var(--blue); border-color: var(--blue); background: #eef3f8; }
.ptag.mj-st-closed, .ptag.mj-st-cancelled { color: var(--ink-soft); border-color: var(--line); }

/* Winter protect: CF / CTC / Cover, PlantX's own code, so the badge reads the same as the Grower screen. */
.flag.wp-flag { background: #e6eef6; color: var(--blue); letter-spacing: .04em; }
.flag.wp-cf { background: var(--blue); color: #fff; }
.mp-sup .sub { margin-bottom: 2px; }
.mp-sup:disabled { cursor: default; }
.mp-opts > summary span { font-weight: 600; color: var(--ink-soft); }
.mp-opts select.text { appearance: auto; }
.bed.mj-all { background: #eef3f8; color: var(--blue); border-color: var(--blue); }

/* A write that did not land, or a refusal: red, at the top, until dismissed or retried. */
.mj-banner { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 800;
             background: var(--red-bg); color: var(--red); border: 2px solid var(--red); }
.mj-banner[hidden] { display: none; }
.mj-banner.ok { background: #e3f0e6; color: var(--green); border-color: var(--green); }
.mj-banner.ok .mj-dismiss { color: var(--green); }
.mj-banner button { min-height: 36px; margin-left: 6px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 800;
                    border-radius: 8px; border: 2px solid var(--red); background: #fff; color: var(--red); cursor: pointer; }
.mj-banner .mj-dismiss { border: 0; background: none; }
.mj-flash { margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: var(--green); color: #fff; font-weight: 800; }

.mj-groups, .mj-load, .mj-sent { margin-top: 14px; }
.mj-group { margin-bottom: 14px; }
.mj-group .line-list { margin-top: 8px; }
.mj-cleared { color: var(--green); font-weight: 800; text-transform: none; letter-spacing: 0; }
.mj-load { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 4px 12px 10px; }
.mj-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid #ece7de; }
.mj-row:last-child { border-bottom: 0; }
.mj-q { flex: 0 0 auto; min-width: 46px; font-size: 19px; font-weight: 800; text-align: right; }
.mj-t { flex: 1; min-width: 0; font-weight: 700; }
.mj-t small { font-weight: 500; color: var(--ink-soft); }
.mj-s { font-size: 14px; color: var(--ink-soft); text-align: right; }
.mj-x { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 8px; font: inherit; font-weight: 800;
        background: var(--card); color: var(--red); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.mj-undo { display: flex; flex-wrap: wrap; gap: 0 12px; margin: -4px 0 4px; }
.mj-undo .link-btn, .mj-load-card .link-btn, .mj-row .link-btn { display: inline-block; margin: 0; min-height: 40px; font-size: 14px; color: var(--red); }
.line .qty small { font-size: 14px; font-weight: 600; }
.line.done .qty small { color: inherit; }
.line:disabled { cursor: default; }
.line .mj-ev { background: var(--red-bg); color: var(--red); }

/* The unloader's receiving bed: the one thing that must never be in doubt. */
.mj-bed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; margin-top: 12px; padding: 14px;
          font: inherit; text-align: left; cursor: pointer; color: #fff; background: var(--green); border: 0; border-radius: 12px; }
.mj-bed.none { background: var(--card); color: var(--ink); border: 3px dashed var(--ink); }
.mj-bed-l { flex: 0 0 100%; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.mj-bed-n { font-size: 26px; font-weight: 900; }
.mj-bed-c { margin-left: auto; font-size: 14px; font-weight: 800; text-decoration: underline; }
.mj-picker { margin-top: 10px; }
.mj-picker[hidden] { display: none; }
.mj-load-card { margin-top: 8px; padding: 10px 12px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; }
.mj-load-card.mj-here { border-color: var(--green); }
.mj-load-h { margin-bottom: 6px; font-size: 15px; }
.mj-load-h::after { content: ""; display: block; clear: both; }
.mj-load-h .pick-all { float: right; margin: 0 0 4px 8px; }
.mj-load-card .line-list, .mj-load-card .line { margin-top: 6px; }
.mj-load-card .primary { width: 100%; margin-top: 10px; min-height: 52px; font-size: 17px; }
.mj-mute { flex: 0 0 30%; font-size: 15px; }
.mj-mute[aria-pressed="true"] { color: var(--red); border-color: var(--red); }

.mj-qty { font-size: 30px; font-weight: 800; text-align: center; }
.mj-sheet-head { margin-bottom: 6px; }
.mj-sheet-head .meta { font-size: 15px; color: var(--ink-soft); margin-bottom: 4px; }
#mjSheet .chip-row { margin-top: 10px; }
#mjAbsorb { margin-top: 10px; }
#mjAbsorb[hidden], #mjFind[hidden], #mjQtyWrap[hidden] { display: none; }
#mjFindSearch[hidden] { display: none; }
.mj-jobmenu { margin-top: 18px; }
.mj-jobmenu .pbtns { margin: 0 15px; }