/* ============================================================================
   THE MONEY TAB — the house's money, one screen.

   2026-10-07, approved by Mario ("Si haz todo"): three numbers that always add up
   (Total, Collected, Owed), one line per person who pays, at most three blue
   buttons and then More, what came in, and what the job costs with its Profit
   under the costs. Only what can be used right now is drawn — no grey row, no
   reason text — and red lives only on the button inside a confirm sheet. The
   48px row is the same row it always was; the new pieces are its second line
   (.mt-sub), the right-hand "owes $450" (.mt-owe) and a row that only states a
   fact (.is-fact, no chevron, nothing to tap).

   Every colour is a --sys token. Nothing here invents one. Classes are all
   `mt-` — the shell around this file owns `os2-`, and a name collision inside
   the drawer is how a white block once landed on top of a card.
   ========================================================================== */

#os2MoneyTab {
  /* The sticky section headings need to stop under the drawer's own sticky head,
     whose height changes with the safe-area inset and the tab strip. The script
     measures it and writes this; 0 is the honest fallback (the heading tucks
     under the header instead of floating over the address). */
  --mt-sticky-top: 0px;
  display: block;
}

/* ---------- the ledger strip ---------- */
.mt-strip {
  display: grid;
  /* Three figures, side by side at every width: Total − Collected = Owed reads
     left to right. Profit is not one of them (it is under the costs). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--sys-line);
  border-radius: var(--sys-r-card);
  overflow: hidden;
  margin: 0 0 14px;
  box-shadow: var(--sys-shadow-card);
}
.mt-fig {
  background: var(--sys-panel);
  padding: 12px 14px 14px;
  min-width: 0;
}
.mt-fig .k {
  display: block;
  font-size: var(--sys-t-body);
  color: var(--sys-muted);
  margin-bottom: 3px;
}
.mt-fig .v {
  display: block;
  font-size: var(--sys-t-display);
  font-weight: var(--sys-w-semibold);
  letter-spacing: -.02em;
  color: var(--sys-ink);
  font-variant-numeric: tabular-nums;
}
.mt-fig .s {
  display: block;
  font-size: var(--sys-t-body);
  color: var(--sys-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.mt-fig.is-bad .v { color: var(--sys-red-ink); }
.mt-fig.is-ok .v { color: var(--sys-green); }

/* What Total is made of, when it is more than the staging bill; a refund; a
   share Square never answered about. Muted: it explains a figure, it is not one. */
.mt-strip-made {
  margin: -6px 2px 14px;
  font-size: var(--sys-t-body-lg);
  line-height: var(--sys-line-body);
  color: var(--sys-muted);
  font-variant-numeric: tabular-nums;
}

/* A sentence the strip owes him when a figure is not the whole truth. */
.mt-strip-note {
  margin: -6px 0 14px;
  padding: 10px 12px;
  border-radius: var(--sys-r-control);
  background: var(--sys-red-soft);
  color: var(--sys-red-ink);
  font-size: var(--sys-t-body);
  line-height: var(--sys-line-body);
}

/* ---------- a section: the name of an object and that object's money ---------- */
.mt-sec {
  position: sticky;
  top: var(--mt-sticky-top, 0px);
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  /* page ground, bled past the tab's padding so the heading spans the width */
  margin: 18px -16px 8px;
  padding: 8px 16px;
  background: var(--sys-page);
}
.mt-sec .n {
  font-size: var(--sys-t-body-lg);
  font-weight: var(--sys-w-semibold);
  color: var(--sys-ink);
  letter-spacing: -.01em;
}
.mt-sec .m {
  font-size: var(--sys-t-body-lg);
  color: var(--sys-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- a card: one object ---------- */
.mt-card {
  background: var(--sys-panel);
  border-radius: var(--sys-r-card);
  box-shadow: var(--sys-shadow-card);
  padding: 14px 0 4px;
  margin: 0 0 10px;
  overflow: hidden;
}
.mt-head { padding: 0 16px 12px; }
.mt-a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--sys-t-hero);
  font-weight: var(--sys-w-semibold);
  letter-spacing: -.02em;
  color: var(--sys-ink);
  font-variant-numeric: tabular-nums;
}
.mt-b {
  margin-top: 4px;
  font-size: var(--sys-t-body);
  line-height: var(--sys-line-body);
  color: var(--sys-muted);
  overflow-wrap: anywhere;
}
.mt-pill {
  font-size: var(--sys-t-caption);
  font-weight: var(--sys-w-semibold);
  letter-spacing: 0;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--sys-r-pill);
  background: var(--sys-fill-2);
  color: var(--sys-muted);
  white-space: nowrap;
}
.mt-pill.is-ok { background: var(--sys-green-soft); color: var(--sys-green); }
.mt-pill.is-wait { background: var(--sys-orange-soft); color: var(--sys-orange); }
.mt-pill.is-bad { background: var(--sys-red-soft); color: var(--sys-red-ink); }
.mt-pill.is-accent { background: var(--sys-accent-soft); color: var(--sys-accent); }

/* The shortcut under the head. It is a SHORTCUT: the same verb is always a row
   in the list below, so nothing is only reachable from here. */
.mt-shortcut {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  min-height: var(--sys-tap);
  border: 0;
  border-radius: var(--sys-r-control);
  background: var(--sys-accent-soft);
  color: var(--sys-accent);
  font-family: var(--sys-font);
  font-size: var(--sys-t-lead);
  font-weight: var(--sys-w-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mt-shortcut.is-kill { background: var(--sys-red-soft); color: var(--sys-red-ink); }
.mt-shortcut:active { opacity: .7; }

/* ---------- THE ROW, one spec, ~50 times ---------- */
.mt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 0;
  border-top: 1px solid var(--sys-line);
  background: none;
  font-family: var(--sys-font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mt-row:first-child { border-top: 0; }
.mt-row:active { background: var(--sys-press-a); }
.mt-verb {
  font-size: 16px;
  color: var(--sys-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.mt-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
}
.mt-val {
  font-size: var(--sys-t-body-lg);
  color: var(--sys-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mt-reason {
  font-size: 13px;
  color: var(--sys-muted);
  line-height: var(--sys-line-tight);
}
.mt-chev {
  color: var(--sys-faint);
  font-weight: var(--sys-w-semibold);
  font-size: var(--sys-t-lead);
}

/* The seven states. `off` and `unknown` must never look the same: one is a rule
   about this job, the other is the app admitting it does not know. */
.mt-row.is-kill .mt-verb { color: var(--sys-red-ink); }
.mt-row.is-off { cursor: default; }
.mt-row.is-off .mt-verb { color: var(--sys-muted); }
/* `off kill` LOSES the red: a destructive verb that cannot run is not a warning. */
.mt-row.is-offkill { cursor: default; }
.mt-row.is-offkill .mt-verb { color: var(--sys-muted); }
.mt-row.is-fail .mt-reason { color: var(--sys-red-ink); }
.mt-row.is-wait .mt-reason { color: var(--sys-orange); }
.mt-row.is-unknown .mt-reason { color: var(--sys-orange); }
.mt-row.is-wait .mt-verb,
.mt-row.is-unknown .mt-verb { color: var(--sys-ink); }

/* Tapping an inert row flashes its reason to ink; the live row that would fix it
   pulses, so the answer to "why not" is on screen for a second and a half. */
@keyframes mt-flash { 0%, 70% { color: var(--sys-ink); } 100% { color: var(--sys-muted); } }
.mt-row.mt-flash .mt-reason { animation: mt-flash 1.5s var(--sys-ease); }
@keyframes mt-pulse { 0%, 100% { background: transparent; } 30%, 60% { background: var(--sys-accent-soft); } }
.mt-row.mt-pulse { animation: mt-pulse 1.5s var(--sys-ease); }

/* ---------- 2026-10-07: lists of people, payments, costs ---------- */
/* A card that is only rows (Who pays, What came in, the costs): the rows run to
   its edges, and the first one has no rule above it. */
.mt-card.mt-list,
.mt-card.mt-acts { padding: 0; }
.mt-list > .mt-row:first-child,
.mt-acts > .mt-row:first-child { border-top: 0; }
.mt-list > .mt-head { padding: 14px 16px 12px; }
/* The blue buttons, stacked, then More under a rule. */
.mt-btns { padding: 12px 0 0; }
.mt-btns + .mt-row,
.mt-row + .mt-btns,
.mt-btns + .mt-profit { border-top: 1px solid var(--sys-line); }
.mt-verb .mt-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--sys-t-body);
  line-height: var(--sys-line-body);
  color: var(--sys-muted);
  font-variant-numeric: tabular-nums;
}
/* "Square invoice asks $2,500": the invoice disagrees with what she owes. */
.mt-verb .mt-sub.is-warn { color: var(--sys-orange); }
.mt-owe {
  font-size: var(--sys-t-lead);
  color: var(--sys-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mt-owe.is-bad { color: var(--sys-red-ink); }
.mt-owe.is-ok { color: var(--sys-green); }
/* A row that only states a fact: no chevron, nothing to tap, never grey. */
.mt-row.is-fact { cursor: default; }
.mt-row.is-fact:active { background: none; }
/* Profit, last, under the costs it subtracts. */
.mt-profit { padding: 12px 16px 14px; border-top: 1px solid var(--sys-line); }
.mt-profit .mt-a { font-size: var(--sys-t-title); }
.mt-profit .mt-b .s { font-variant-numeric: tabular-nums; }

.mt-empty {
  padding: 4px 16px 14px;
  color: var(--sys-muted);
  font-size: var(--sys-t-body);
  line-height: var(--sys-line-body);
}

/* ---------- the mover's share of a job (2026-09-18) ----------
   Read-only lines under "What this job costs": nothing here is pressed, so they
   are not .mt-row buttons and carry no chevron — they only say which week's
   mover hours this job took, and what they cost. */
.mt-mvs { margin: 0 0 8px; border-top: 1px solid var(--sys-line); border-bottom: 1px solid var(--sys-line); }
.mt-mv {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
  border-top: 1px solid var(--sys-line);
}
.mt-mv:first-child { border-top: 0; }
.mt-mv-l { font-size: var(--sys-t-lead); color: var(--sys-ink); min-width: 0; overflow-wrap: anywhere; }
.mt-mv-l small { display: block; margin-top: 2px; font-size: var(--sys-t-body); color: var(--sys-muted); }
.mt-mv-r {
  margin-left: auto;
  font-size: var(--sys-t-body-lg);
  color: var(--sys-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mt-mv-hint { padding: 2px 16px 10px; font-size: var(--sys-t-body); color: var(--sys-muted); line-height: var(--sys-line-body); }

/* ---------- the legacy panels, kept at the bottom under their own heading ---------- */
#os2MoneyLegacy { margin-top: 20px; }
.mt-legacy-h {
  margin: 0 0 8px;
  padding: 8px 0 0;
  font-size: var(--sys-t-body-lg);
  font-weight: var(--sys-w-semibold);
  color: var(--sys-ink);
}
.mt-legacy-s {
  margin: -4px 0 10px;
  font-size: var(--sys-t-body);
  color: var(--sys-muted);
  line-height: var(--sys-line-body);
}

/* ---------- the sheet ---------- */
/* ABOVE THE DRAWER, BOTH OF THEM. The drawer this sheet opens on top of is
   itself --sys-z-sheet (60, bento.css), so a scrim at --sys-z-scrim (55) painted
   UNDER it: the drawer stayed bright and fully tappable while an amount was
   being keyed, and one brush of a row behind the sheet re-opened a different
   sheet and threw the typed figure away without a word. 1200/1201 are the pair
   the extension sheet already uses for the same reason. */
#mtBk {
  position: fixed;
  inset: 0;
  background: var(--sys-scrim);
  z-index: 1200;
}
/* A DOCKED sheet, and it obeys the two tokens the rest of the app's docked
   sheets do — no keyboard listener of its own. --sys-dock-bottom is 0 at rest and
   exactly the keyboard's height while one is up, and --sys-kb-view-h is the
   viewport minus that keyboard, so the sheet RISES and is SQUEEZED together: a
   sheet that rises without shrinking loses its own title off the top of the
   screen, which is what the two deleted attachKeyboardLift() copies did. The
   note field in the input half is the reason this matters here. */
#mtSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--sys-dock-bottom, 0px);
  z-index: 1201;
  background: var(--sys-panel);
  border-radius: var(--sys-r-sheet) var(--sys-r-sheet) 0 0;
  box-shadow: var(--sys-shadow-sheet);
  /* The home indicator is paid inside the sheet's own padding, and it is not on
     screen while the keyboard is — so this stays a resting inset, not a lift. */
  padding: 8px 0 max(10px, var(--sys-safe-b));
  max-height: calc(var(--sys-kb-view-h, 100dvh) - 8dvh - var(--sys-safe-t));
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--sys-font);
  color: var(--sys-ink);
}
#mtSheet .mt-grab {
  width: 36px;
  height: 5px;
  border-radius: var(--sys-r-pill);
  background: var(--sys-faint);
  margin: 6px auto 12px;
}
#mtSheet .mt-sh-head { padding: 0 18px 12px; }
#mtSheet .mt-sh-t {
  font-size: var(--sys-t-title);
  font-weight: var(--sys-w-semibold);
  letter-spacing: -.01em;
  line-height: var(--sys-line-tight);
  overflow-wrap: anywhere;
}
#mtSheet .mt-sh-s {
  margin-top: 4px;
  color: var(--sys-muted);
  font-size: var(--sys-t-body);
  line-height: var(--sys-line-body);
  font-variant-numeric: tabular-nums;
}
/* A fact is a statement, not a control: no chevron, nothing to tap. */
#mtSheet .mt-fact {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--sys-line);
  font-size: var(--sys-t-lead);
}
#mtSheet .mt-fact .fv {
  margin-left: auto;
  color: var(--sys-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#mtSheet .mt-fact.is-bad .fv { color: var(--sys-red-ink); }
#mtSheet .mt-fact.is-warn .fv { color: var(--sys-orange); }
/* Rows in a sheet (More, a payer, a payment): the tab's own row, under a rule. */
#mtSheet .mt-sh-rows { border-top: 1px solid var(--sys-line); }
#mtSheet .mt-sh-rows .mt-row:first-child { border-top: 0; }
#mtSheet .mt-sh-rows .mt-row { padding-left: 18px; padding-right: 18px; }

/* the input half */
#mtSheet .mt-amt {
  margin: 14px 18px 4px;
  padding: 14px 16px;
  border-radius: var(--sys-r-control);
  background: var(--sys-fill);
  text-align: center;
  font-size: var(--sys-t-large-title);
  font-weight: var(--sys-w-semibold);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
#mtSheet .mt-amt.is-over { color: var(--sys-red-ink); }
#mtSheet .mt-over {
  margin: 0 18px;
  color: var(--sys-red-ink);
  font-size: var(--sys-t-body);
  text-align: center;
}
#mtSheet .mt-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 18px 4px;
}
#mtSheet .mt-key {
  min-height: 48px;
  border: 0;
  border-radius: var(--sys-r-control);
  background: var(--sys-fill);
  color: var(--sys-ink);
  font-family: var(--sys-font);
  font-size: var(--sys-t-display);
  font-weight: var(--sys-w-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mtSheet .mt-key:active { background: var(--sys-fill-2); }
#mtSheet .mt-field {
  display: block;
  width: calc(100% - 36px);
  margin: 10px 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--sys-line);
  border-radius: var(--sys-r-control);
  background: var(--sys-panel);
  color: var(--sys-ink);
  font-family: var(--sys-font);
  /* 16px, always: anything smaller and iOS zooms the page on focus. */
  font-size: var(--sys-t-field);
}
#mtSheet .mt-field::placeholder { color: var(--sys-placeholder); }
/* The question above a segmented control. A sheet that asks something about real
   money has to print the sentence, not two bare buttons: "The same one" means
   nothing on its own. */
#mtSheet .mt-ask {
  margin: 14px 18px 0;
  color: var(--sys-ink);
  font-size: var(--sys-t-lead);
  line-height: var(--sys-line-body);
}
#mtSheet .mt-seg {
  display: flex;
  gap: 8px;
  padding: 10px 18px 0;
}
#mtSheet .mt-seg button {
  flex: 1;
  min-height: var(--sys-tap);
  border: 1px solid var(--sys-line);
  border-radius: var(--sys-r-control);
  background: var(--sys-panel);
  color: var(--sys-ink);
  font-family: var(--sys-font);
  font-size: var(--sys-t-lead);
  cursor: pointer;
}
#mtSheet .mt-seg button.on {
  background: var(--sys-accent-soft);
  border-color: var(--sys-accent-soft);
  color: var(--sys-accent);
  font-weight: var(--sys-w-semibold);
}
#mtSheet .mt-do {
  display: block;
  width: calc(100% - 36px);
  margin: 16px 18px 0;
  min-height: 50px;
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-accent);
  color: #FFFFFF;
  font-family: var(--sys-font);
  font-size: var(--sys-t-lead);
  font-weight: var(--sys-w-semibold);
  cursor: pointer;
}
#mtSheet .mt-do.is-kill { background: var(--sys-red-ink); }
#mtSheet .mt-do[disabled] { opacity: .45; cursor: default; }
#mtSheet .mt-not {
  display: block;
  width: calc(100% - 36px);
  margin: 8px 18px 0;
  min-height: var(--sys-tap);
  border: 0;
  border-radius: var(--sys-r-pill);
  background: none;
  color: var(--sys-accent);
  font-family: var(--sys-font);
  font-size: var(--sys-t-lead);
  cursor: pointer;
}
#mtSheet .mt-note-tx {
  padding: 12px 18px 2px;
  color: var(--sys-muted);
  font-size: var(--sys-t-body);
  line-height: var(--sys-line-body);
}
/* A SHORT PHONE (2026-10-07). On a 375x667 iPhone, Split the bill's first sheet —
   three facts, two fields, the amount and the pad — put "Next" 70px below the
   screen. There a fact that only repeats the line under the title is dropped and
   the pad's keys are the tap height, so the verb is on screen; a taller phone
   keeps the sheet exactly as it was approved. */
@media (max-height: 700px) {
  #mtSheet .mt-fact.is-spare { display: none; }
  #mtSheet .mt-grab { margin-bottom: 8px; }
  #mtSheet .mt-sh-head { padding-bottom: 8px; }
  #mtSheet .mt-pad { gap: 6px; }
  #mtSheet .mt-key { min-height: var(--sys-tap); }
  #mtSheet .mt-amt { margin-top: 10px; padding: 8px 16px; }
  #mtSheet .mt-field { margin-top: 8px; }
  #mtSheet .mt-do { margin-top: 12px; }
}

/* ---------- payments never recorded (manager-unrecorded-payments.js) ---------- */
/* The line on the Money page, under Outstanding: a whole-row button, because the
   only thing it can do is open the list. */
.urp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--sys-tap);
  margin: 10px 0 2px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--sys-r-control);
  background: var(--sys-orange-soft);
  color: var(--sys-ink);
  font-family: var(--sys-font);
  text-align: left;
  cursor: pointer;
}
.urp-card-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.urp-card-tx b { font-size: 15px; font-weight: 600; }
.urp-card-tx small { font-size: 13px; color: var(--sys-muted); line-height: 1.35; }
.urp-card-go { flex: none; font-size: 15px; font-weight: 600; color: var(--sys-accent); }

/* The banner on a house whose own payment was never written down. */
.urp-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--sys-r-control);
  background: var(--sys-orange-soft);
}
.urp-banner-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--sys-muted); line-height: 1.35; }
.urp-banner-tx b { font-size: 15px; font-weight: 600; color: var(--sys-ink); }
.urp-banner-go {
  flex: none;
  min-height: var(--sys-tap);
  padding: 0 14px;
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-panel);
  color: var(--sys-accent);
  font-family: var(--sys-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Both sheets sit where the Money tab's own sheet sits, and for the same reason:
   ABOVE the drawer (--sys-z-sheet 60), so nothing behind them can be tapped while
   a list of money is open. Docked on the same two tokens, so a keyboard raises and
   squeezes them instead of covering the search field. */
#urpBk, #lmBk {
  position: fixed;
  inset: 0;
  background: var(--sys-scrim);
  z-index: 1200;
}
#urpSheet, #lmSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--sys-dock-bottom, 0px);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  max-height: calc(var(--sys-kb-view-h, 100dvh) - 8dvh - var(--sys-safe-t));
  padding: 8px 0 max(10px, var(--sys-safe-b));
  background: var(--sys-panel);
  border-radius: var(--sys-r-sheet) var(--sys-r-sheet) 0 0;
  box-shadow: var(--sys-shadow-sheet);
  font-family: var(--sys-font);
  color: var(--sys-ink);
}
/* THE MOVE PICKER ANSWERS WHOEVER ASKED, WHEREVER THEY ARE. pick() returns a
   promise its caller waits on, and a caller can sit on a full-screen layer — the
   payroll workspace is 12000 — where a 1201 sheet opened BEHIND it: "Not now"
   measured covered, the promise never settled, and the only way out was killing
   the app. So this pair sits above every full-screen layer in the app, the
   bookkeeping workspace's 100080 included, and still under the toast. */
#lmBk { z-index: 100100; }
#lmSheet { z-index: 100101; }
.urp-grab, .lm-grab { width: 36px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: var(--sys-track); flex: none; }
.urp-head, .lm-head { padding: 6px 20px 10px; flex: none; }
.urp-title, .lm-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.urp-sub, .lm-sub { margin: 4px 0 0; font-size: 13px; color: var(--sys-muted); line-height: 1.35; }
.urp-body, .lm-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px; }
.urp-empty, .lm-empty { margin: 16px 8px; font-size: 15px; color: var(--sys-muted); }
.urp-all {
  min-height: var(--sys-tap);
  margin: 0 0 4px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--sys-accent);
  font-family: var(--sys-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.urp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 8px;
  border-top: 1px solid var(--sys-line);
  cursor: pointer;
}
/* The box is not the target — the whole 56px <label> row is, and a tap anywhere
   on it ticks the box. So the box itself carries no px size (the touch-target
   ratchet reads that as a 22px control); it is only drawn larger.
   `width: auto` because the manager page's base rule gives every input
   width:100% — in this flex row the box took the whole 477px, centred itself,
   and pushed the address, status and amount off the right edge, so jobs were
   marked paid blind (UI-075, 2026-09-30). `auto` is the box's own size, not a
   px figure, and the base rule's field padding does not belong on a box. */
.urp-row input { flex: none; width: auto; padding: 0; margin: 0 6px; transform: scale(1.35); accent-color: var(--sys-accent); }
.urp-row-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.urp-row-tx b { font-size: 16px; font-weight: 500; }
.urp-row-tx small { font-size: 13px; color: var(--sys-muted); }
.urp-row-amt { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.urp-foot { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 0; border-top: 1px solid var(--sys-line); }
.urp-go {
  min-height: 52px;
  border: 0;
  border-radius: var(--sys-r-control);
  background: var(--sys-accent);
  color: #fff;
  font-family: var(--sys-font);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.urp-go:disabled { opacity: .45; cursor: default; }
.urp-cancel, .lm-cancel {
  min-height: var(--sys-tap);
  border: 0;
  background: none;
  color: var(--sys-muted);
  font-family: var(--sys-font);
  font-size: 16px;
  cursor: pointer;
  flex: none;
}

/* ---------- move hours to another house (manager-labor-move.js) ---------- */
/* 16px, or iOS zooms the whole sheet the moment a thumb lands in the field. */
.lm-search {
  flex: none;
  box-sizing: border-box;
  width: calc(100% - 32px);
  min-height: var(--sys-tap);
  margin: 0 16px 8px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--sys-r-control);
  background: var(--sys-fill-2);
  color: var(--sys-ink);
  font-family: var(--sys-font);
  font-size: 16px;
}
.lm-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 6px 8px;
  border: 0;
  border-top: 1px solid var(--sys-line);
  background: none;
  color: var(--sys-ink);
  font-family: var(--sys-font);
  text-align: left;
  cursor: pointer;
}
.lm-row-label { font-size: 16px; font-weight: 500; }
.lm-row-sub { font-size: 13px; color: var(--sys-muted); }
.lm-cancel { margin: 6px 16px 0; }