/* NoMissedJobs desk — styles. No external deps.
   UX v2 batch 1B, "Paper and Steel" (docs/ux/v2/UX_V2_SPEC.md 3, 4.4, 4.12, 4.13, 4.16, 5.3):
   colours, type, radii and shadows come from /app/dashboard/brand/nmj-tokens.css?v=18b13154 (linked
   before this file); Day by default, Night with the computer (prefers-color-scheme) or
   Settings → Profile → Display for the session. Buttons are outlined; one per screen is
   filled (.btn-fill, chosen by oneLight() in views/customer.js). Red is the safety stop's
   alone: errors, emergencies and overdue use the attention tone (--attn). */
/* Legacy desk roles resolve through the shared tokens. */
:root {
  --nmj-navy: var(--steel); --nmj-navy-2: var(--steel-2); --nmj-navy-3: var(--steel-line);
  --nmj-orange: var(--action); --nmj-orange-hover: var(--action-press); --nmj-orange-ink: var(--ink);
  --nmj-orange-tint: var(--surface-sunk);
  --panel: var(--surface); --panel-2: var(--surface-sunk); --border: var(--line);
  --field-border: var(--line-strong); --fg: var(--ink); --fg-dim: var(--ink-2);
  --muted: var(--ink-2); --on-dark: var(--on-steel); --on-dark-dim: var(--on-steel-2);
  --link: var(--ink);
  --ok-bg: var(--ok-tint); --ok-line: var(--ok);
  --warn: var(--attn); --warn-bg: var(--attn-tint); --warn-line: var(--attn);
  --danger: var(--attn); --danger-bg: var(--attn-tint); --danger-line: var(--attn);
  --neutral: var(--ink-2); --neutral-bg: var(--surface-sunk);
  --radius: var(--r-3); --radius-sm: var(--r-2); --gap: var(--s-4); --tap: var(--tap-desk);
  --shadow: var(--shadow-1); --sans: var(--font-ui); --mono: var(--font-mono);
}

* { box-sizing: border-box; }
/* Safety log: the open-stop banner and stop cards carry the safety family (spec 3.5). */
.callout.danger.safety-red-banner { background: var(--safety-tint); border: 2px solid var(--safety-edge); color: var(--safety-ink); font-weight: var(--w-strong); }
.safety-stop-card > h2 { font: var(--w-strong) var(--fs-3)/1.25 var(--font-ui); text-transform: none; letter-spacing: 0; }
.safety-timeline { padding-left: 1.5rem; }
.safety-timeline li + li { margin-top: var(--s-2); }
.safety-photos img { max-height: 120px; object-fit: cover; border-radius: var(--r-1); }
.safety-resolve { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--surface-sunk); border-radius: var(--r-2); }
.safety-resolve .field { margin-bottom: 0; }
.safety-resolve > .btn { justify-self: start; }
.safety-resolve > h3, .safety-resolve > p { margin: 0; }
.safety-page > .row > .btn[aria-pressed="true"] { background: var(--surface-sunk); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.safety-page > .row { gap: var(--s-2); }
.safety-page .row + .row, .safety-page .row + .callout, .safety-page .row + .card, .safety-page .row + .empty, .safety-page .row + details { margin-top: var(--s-3); }
.safety-page .row.safety-dates .field { margin-bottom: 0; }
.safety-contact { display: grid; gap: var(--s-2); }
.row.safety-dates { align-items: flex-end; }
@media print {
  #topbar, #footer, .safety-dates, .safety-page > .row, button { display: none !important; }
  body { background: var(--surface); }
  .safety-stop-card { break-inside: avoid; box-shadow: none; }
}
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font: var(--fs-1)/var(--lh-body) var(--font-ui);
  overflow-wrap: break-word;
}
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
code, pre { font-family: var(--mono); }
img, svg, audio, video { max-width: 100%; }
/* One heading style per level (spec 3.7): Barlow Condensed 700 caps in ink. Names and
   addresses used as headings (a job's customer, a stop's address) stay in Barlow. */
h1, h2, h3 { color: var(--fg); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
h1 { font-size: var(--fs-5); line-height: 1.05; margin: 0; letter-spacing: .01em; }
h2 { font-size: var(--fs-3); line-height: 1.15; margin: 0 0 var(--s-3); }
h3 { font-size: var(--fs-2); line-height: 1.2; margin: 18px 0 var(--s-2); }
p { margin: 0 0 10px; }
.muted { color: var(--fg-dim); }
.hint { color: var(--fg-dim); font-size: var(--fs-1); margin-top: var(--s-1); }
.hint.center, .center { text-align: center; }
.lead { font-size: var(--fs-2); font-weight: var(--w-label); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* focus: always visible, AA against light and navy backgrounds */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--nmj-orange-ink); outline-offset: 2px; border-radius: var(--s-1); }
#topbar :focus-visible, .auth-page :focus-visible, .line-card :focus-visible, .next-bar :focus-visible, #toast-region :focus-visible { outline-color: var(--focus-steel); }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: var(--s-3); top: -60px; z-index: 2000;
  background: var(--action); color: var(--on-action); font-weight: var(--w-strong);
  padding: 10px 14px; border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* ------------------------------------------------------------------ */
/* brand                                                               */
/* ------------------------------------------------------------------ */
.wordmark { display: inline-flex; align-items: center; line-height: 0; }
.wordmark-full { height: 38px; width: auto; display: block; }   /* 186px wide: kit minimum is 180 */
.wordmark-symbol { display: none; height: var(--s-6); width: var(--s-6); border-radius: var(--r-1); }

/* ------------------------------------------------------------------ */
/* top bar + nav                                                       */
/* ------------------------------------------------------------------ */
/* The steel top bar (spec 4.1, 4.13): brand and shop name, the 4 px brand rule, the
   sections underneath; the current one is a steel-2 tab with the 4 px action underline. */
#topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--steel); color: var(--on-steel);
  border-bottom: var(--s-1) solid var(--rule);
}
.topbar-row {
  display: flex; align-items: center; gap: var(--s-4);
  max-width: 1366px; margin: 0 auto; padding: 10px var(--s-5);
}
.brand-link { display: inline-flex; align-items: center; min-height: var(--tap); border-radius: var(--r-1); }
#topbar .who {
  color: var(--on-steel); font: 700 var(--fs-3)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  padding-left: var(--s-4); border-left: 1px solid var(--steel-line);
}
#topbar .who:empty { display: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav-toggle {
  display: none; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 14px; border-radius: var(--r-2);
  background: transparent; color: var(--on-steel); border: 2px solid var(--on-steel-line);
  font: inherit; font-weight: var(--w-strong); cursor: pointer;
}
.nav-toggle:hover, #topbar.nav-open .nav-toggle { background: var(--steel-2); }
#nav {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--steel-line) transparent;
  max-width: 1366px; margin: 0 auto; padding: 0 var(--s-4);
}
#nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 11px; color: var(--on-steel-2); text-decoration: none; font-weight: var(--w-label); font-size: var(--fs-1);
  border-bottom: var(--s-1) solid transparent;
}
#nav a:hover { color: var(--on-steel); background: var(--steel-2); }
#nav a.active { color: var(--on-steel); background: var(--steel-2); border-bottom-color: var(--action); }
#nav a.nav-cross { margin-left: auto; color: var(--on-steel-2); font-weight: var(--w-body-desk); }
#nav .nav-logout { display: none; }

/* ------------------------------------------------------------------ */
/* layout                                                              */
/* ------------------------------------------------------------------ */
main { flex: 1; width: 100%; max-width: 1366px; margin: 0 auto; padding: var(--s-5) var(--s-5) 48px; }
#footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--s-4);
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); color: var(--fg-dim); font-size: var(--fs-1);
}
#footer a { color: var(--fg-dim); }

.page.narrow { max-width: 820px; }   /* settings forms read better at a comfortable width */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-bottom: 18px; }
.page-head-text { flex: 1 1 280px; min-width: 0; }
.page-head-text p { margin: var(--s-1) 0 0; }
.page-body h1 { margin: 0 0 var(--s-2); }
.back-link {
  display: inline-flex; align-items: center; min-height: 36px; margin-bottom: var(--s-1);
  color: var(--fg-dim); font-weight: var(--w-label); text-decoration: none;
}
.back-link:hover { color: var(--fg); text-decoration: underline; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: var(--gap); box-shadow: var(--shadow); min-width: 0;
}
.card.flush { padding: 0; overflow: hidden; }
.card, .field, .banner, .line-card { scroll-margin-top: 84px; }
.card.loading { color: var(--fg-dim); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.card-head h2 { margin: 0; }
.card-link { font-weight: var(--w-label); }
.grid { display: grid; gap: var(--gap); }
.grid > .card { margin-bottom: 0; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: var(--gap); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.row { display: flex; gap: var(--s-3) var(--s-2); flex-wrap: wrap; align-items: center; }
/* Stacked controls in a card keep 12 px between them (spec 3.10). */
.card > .row:not(:last-child) { margin-bottom: var(--s-3); }
/* A row of fields and buttons lines the buttons up with the inputs, not the labels. */
.page-body .row:has(> .field) { align-items: flex-end; margin-bottom: var(--s-4); }
.page-body .row > .field { margin-bottom: 0; }
.actions-row { margin-top: 14px; }
.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: var(--shadow-1); } 100% { box-shadow: none; } }

/* ------------------------------------------------------------------ */
/* buttons                                                             */
/* ------------------------------------------------------------------ */
/* Buttons on paper (spec 4.4): a --tile face with a 2 px ink edge that survives glare,
   radius 12, 44 px tall on the desk (48 at phone width). The one filled button on a
   screen is .btn-fill (yellow by Day, dimmed amber by Night). On steel (top bar, the
   line card, the next-step bar) buttons are steel outlines. Red is never a button colour
   here: Remove and Cancel are ordinary outlines (spec 3.5). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap-desk); padding: var(--s-2) var(--s-4);
  background: var(--tile); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-2);
  font: inherit; font-weight: var(--w-strong); line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--surface-sunk); border-color: var(--ink); color: var(--ink); }
.btn:active { background: var(--surface-sunk); }
.btn-ghost, .btn-danger { background: var(--tile); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover, .btn-danger:hover { background: var(--surface-sunk); color: var(--ink); border-color: var(--ink); }
.btn-warn { background: var(--tile); border-color: var(--attn); color: var(--attn); }
.btn-warn:hover { background: var(--attn-tint); border-color: var(--attn); color: var(--attn); }
.btn-on-dark, .line-card .btn, .next-bar .btn, #topbar .btn {
  background: transparent; color: var(--on-steel); border-color: var(--on-steel-line);
}
.btn-on-dark:hover, .line-card .btn:hover, .next-bar .btn:hover, #topbar .btn:hover {
  background: var(--steel-2); color: var(--on-steel); border-color: var(--on-steel);
}
.btn.btn-fill, .btn.btn-fill:hover, .line-card .btn.btn-fill, .next-bar .btn.btn-fill {
  background: var(--action); color: var(--on-action); border-color: var(--fill-ring);
}
.btn.btn-fill:hover, .btn.btn-fill:active { background: var(--action-press); }
.line-card .btn.btn-fill, .next-bar .btn.btn-fill { border-color: var(--action); }
.btn:disabled, .btn[disabled], .btn.btn-fill:disabled {
  background: var(--surface-sunk); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; opacity: 1;
}
.btn-sm { min-height: var(--tap-desk); padding: 6px var(--s-3); font-size: var(--fs-1); }
.btn-block { width: 100%; min-height: 48px; font-size: var(--fs-1); }
/* Sign-in and the terms gate are their own one-verb screens (views/login.js, views/terms.js). */
.login-card .btn-block, .terms-gate-actions .btn:not(.btn-ghost) {
  background: var(--action); color: var(--on-action); border-color: var(--fill-ring);
}
.login-card .btn-block:hover, .terms-gate-actions .btn:not(.btn-ghost):hover { background: var(--action-press); color: var(--on-action); }
.link-btn {
  background: none; border: 0; padding: var(--s-2) 0; min-height: var(--tap);
  color: var(--link); font: inherit; font-weight: var(--w-label); text-decoration: underline; cursor: pointer;
}
.link-btn.on-dark { color: var(--on-dark-dim); }
.link-btn.on-dark:hover { color: var(--on-steel); }

/* ------------------------------------------------------------------ */
/* badges                                                              */
/* ------------------------------------------------------------------ */
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* Status words are labels, never buttons (spec 3.6, 4.5): a pill with a 1.5 px edge in its
   tone. Emergency and overdue use the attention tone; red is the safety stop's alone. */
.badge {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: auto; place-items: normal;
  padding: 2px 10px; border-radius: var(--r-pill);
  font: var(--w-strong) var(--fs-1)/1.5 var(--font-ui); white-space: nowrap;
  background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--line-strong);
}
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.badge.neutral { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }

/* ------------------------------------------------------------------ */
/* forms                                                               */
/* ------------------------------------------------------------------ */
label { display: block; font-size: var(--fs-1); font-weight: var(--w-label); color: var(--fg); margin-bottom: 6px; }
/* Inputs (spec 4.8): 2 px --line-strong edge (3:1 on every surface), radius 12, 44 px. */
input, select, textarea {
  width: 100%; min-height: var(--tap-desk); padding: 9px var(--s-3);
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--line-strong); border-radius: var(--r-2);
  font: inherit; font-size: var(--fs-1);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 1px; box-shadow: none; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-sunk); border-color: var(--line); color: var(--ink-3); }
input[readonly] { background: var(--surface-sunk); }
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto;
  accent-color: var(--ink); box-shadow: none; outline-offset: 2px;
}
input[type="color"] { padding: var(--s-1); height: var(--tap-desk); }
textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--fs-1); font-weight: var(--w-label); padding: 0; margin-bottom: 6px; }
.field { margin-bottom: var(--s-4); min-width: 0; }
.field-row { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.field-row > .field { flex: 1 1 200px; }
.field-error { color: var(--attn); font-size: var(--fs-1); font-weight: var(--w-label); margin-top: 6px; }
.has-error input:not([type="checkbox"]):not([type="radio"]), .has-error select, .has-error textarea { border-color: var(--attn); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.form-alert {
  background: var(--attn-tint); color: var(--ink); border: 1px solid var(--attn); border-left-width: var(--s-1);
  border-radius: var(--radius-sm); padding: var(--s-3) 14px; margin-bottom: var(--s-4); font-size: var(--fs-1);
}
.form-alert p { margin: 0 0 var(--s-1); font-weight: var(--w-strong); color: var(--attn); }
.form-alert ul { margin: var(--s-1) 0 0; padding-left: 18px; }
.form-alert .link-btn { color: var(--ink); padding: var(--s-1) 0; min-height: 0; }

.check {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-desk);
  font-weight: var(--w-body-desk); margin: 0; cursor: pointer;
}
/* .check-row here is a row of checkboxes, not the shared tile row (D37: undo the component). */
.check-row {
  display: flex; flex-wrap: wrap; align-items: normal; gap: var(--s-1) 20px; margin-bottom: var(--s-3);
  width: auto; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; color: inherit;
}
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--s-2); }
.choice {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0;
  padding: 10px var(--s-3); border: 2px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--tile); font-weight: var(--w-label); cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--ink); background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--ink); }
.has-error .choice { border-color: var(--attn); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 72px; }
.pw-toggle {
  position: absolute; right: var(--s-1); top: 50%; transform: translateY(-50%);
  min-height: 36px; min-width: 60px; padding: 0 10px;
  background: none; border: 0; border-radius: var(--r-1); color: var(--link); font: inherit; font-weight: var(--w-strong); cursor: pointer;
}
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--s-3); }
.inline-form > .field { flex: 1 1 160px; }
.inline-form > .btn { margin-bottom: var(--s-4); }
.inline-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inline-edit input { flex: 1 1 160px; }
details.advanced { border: 1px solid var(--border); border-radius: var(--r-2); padding: 0 14px; margin: var(--s-2) 0 var(--s-4); background: var(--surface-sunk); }
details.advanced[open] { padding-bottom: var(--s-1); }
details > summary { cursor: pointer; font-weight: var(--w-label); min-height: var(--tap); display: flex; align-items: center; gap: 10px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: ""; flex: 0 0 auto; width: var(--s-2); height: var(--s-2); margin: 0 var(--s-1) 3px auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform 0.15s ease;
}
details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
details.advanced > summary { color: var(--fg-dim); }

/* ------------------------------------------------------------------ */
/* tables (stack into cards on phones; overflow scrolls in the box)    */
/* ------------------------------------------------------------------ */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
/* Tables (spec 4.16): Condensed caps headers on a 2 px line, 16 px cells. */
th, td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
th {
  background: var(--surface); color: var(--ink-2); font: 700 var(--fs-1)/1.2 var(--font-display);
  text-transform: uppercase; letter-spacing: var(--track-caps); white-space: nowrap; border-bottom: 2px solid var(--line-strong);
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.cell-primary { font-weight: var(--w-label); white-space: nowrap; }
td.cell-primary a { color: var(--fg); }
td.cell-primary a:hover { color: var(--link); }
td.cell-wrap { min-width: 180px; overflow-wrap: anywhere; }
table:not(.stack) td { white-space: nowrap; }            /* operator tables scroll sideways instead */
table:not(.stack) td.cell-wrap { white-space: normal; min-width: 220px; }
.cell-sub { display: block; color: var(--fg-dim); font-size: var(--fs-1); white-space: nowrap; }
td.actions { white-space: nowrap; }
td.actions .btn + .btn { margin-left: 6px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-sunk); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--s-2); vertical-align: middle; border: 1px solid var(--line-strong); }
.msg-text { white-space: pre-wrap; }
.photo-link { display: inline-block; margin: var(--s-1) 10px 0 0; font-weight: var(--w-label); }
.card > .table-wrap:not(:first-child) { margin-top: var(--s-1); }

/* ------------------------------------------------------------------ */
/* toasts                                                              */
/* ------------------------------------------------------------------ */
/* Toasts (spec 4.12): steel, 56 px, a 4 px rule at the left (ok, or attention for an error),
   stacked at the bottom left at 1366 and across the bottom on a phone. The region places
   them; the shared .toast's own fixed position is undone here (D37). */
#toast-region {
  position: fixed; left: var(--s-5); bottom: var(--s-5); z-index: 1000;
  display: flex; flex-direction: column; gap: var(--s-2); width: min(420px, calc(100vw - 2 * var(--s-5)));
}
#toast-region .toast {
  position: static; left: auto; right: auto; bottom: auto; z-index: auto; margin: 0; max-width: none;
  display: flex; align-items: center; min-height: 56px; padding: var(--s-2) var(--s-4) var(--s-2) 14px;
  border-radius: var(--r-2); cursor: pointer;
  background: var(--steel); color: var(--on-steel); font: 400 var(--fs-1)/1.35 var(--font-ui);
  border: 1px solid var(--steel-line); border-left: var(--s-1) solid var(--ok-on-steel); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
/* Steel is dark in both themes, so the attention rule on it uses the Night attention value. */
#toast-region .toast.error { border-left-color: var(--attn-on-steel, #E8A25A); }
#toast-region .toast.ok { border-left-color: var(--ok-on-steel); }

/* ------------------------------------------------------------------ */
/* shared bits                                                         */
/* ------------------------------------------------------------------ */
.empty-state { text-align: center; padding: 18px var(--s-2); }
.empty-title { font-weight: var(--w-strong); font-size: var(--fs-1); margin-bottom: var(--s-1); }
.callout { padding: 14px var(--s-4); border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 0 0 var(--s-4); }
/* Warnings and errors: the attention tone with words (spec 3.5); never red. */
.callout.warn, .callout.danger { background: var(--attn-tint); border-color: var(--attn); border-left-width: var(--s-1); color: var(--ink); }
.callout.warn strong, .callout.danger strong { color: var(--attn); }
.callout.warn .hint { color: var(--ink-2); }
.callout strong { display: block; margin-bottom: 6px; }
.callout p:last-child { margin-bottom: 0; }
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--s-4);
  padding: 14px var(--s-4); border-radius: var(--radius); margin-bottom: var(--gap); border: 1px solid;
}
.banner p { margin: 0; flex: 1 1 260px; }
.banner.warn, .banner.danger { background: var(--attn-tint); border-color: var(--attn); border-left-width: var(--s-1); color: var(--ink); }
.banner.warn strong, .banner.danger strong { color: var(--attn); }
.item-list { list-style: none; margin: 0; padding: 0; }
.item-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.item-list li:first-child { border-top: 0; padding-top: 0; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--fg); min-height: var(--tap); justify-content: center; }
.item-main:hover .item-title { color: var(--link); text-decoration: underline; }
.item-title { font-weight: var(--w-strong); }
.item-sub { color: var(--fg-dim); font-size: var(--fs-1); overflow-wrap: anywhere; }
.plain-list { margin: 0; padding-left: 18px; }
.plain-list li { margin-bottom: var(--s-2); }
.steps-inline { padding-left: 20px; color: var(--fg-dim); }
.steps-inline li { margin-bottom: var(--s-1); }
pre, .report {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--s-3); font-size: var(--fs-1); max-height: 420px; overflow: auto; color: var(--fg);
}
details.playbook { border-top: 1px solid var(--border); }
details.playbook pre { margin-bottom: var(--s-3); }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) 20px; margin: 14px 0 0; }
dl.kv dt { color: var(--fg-dim); font-weight: var(--w-label); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
dl.kv.totals { max-width: 420px; }
dl.kv.totals dd { text-align: right; font-variant-numeric: tabular-nums; }
dl.kv .total { font-weight: var(--w-strong); font-size: var(--fs-2); color: var(--fg); border-top: 1px solid var(--border); padding-top: var(--s-2); }
.quote-out { margin-top: var(--s-3); }

/* KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-3); margin-bottom: var(--gap); }
.kpi-grid > .card { margin-bottom: 0; }
.kpi { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--fg); }
a.kpi:hover { border-color: var(--ink); }
.kpi .num { font: 700 var(--fs-5)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.kpi .label { color: var(--fg-dim); font-size: var(--fs-1); font-weight: var(--w-label); }
.kpi .sub { color: var(--fg-dim); font-size: var(--fs-1); }
.kpi.danger { border-color: var(--attn); background: var(--attn-tint); }
.kpi.danger .num { color: var(--attn); }

/* Your NoMissedJobs line */
.line-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) 20px;
  background: var(--nmj-navy); color: var(--on-steel); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: var(--gap);
}
.line-main { flex: 1 1 320px; min-width: 0; }
.line-title { margin: 0; font-size: var(--fs-1); font-weight: var(--w-label); color: var(--on-dark-dim); }
.line-number { display: inline-block; color: var(--on-steel); font: 500 var(--type-sheet-title)/1.2 var(--font-mono); letter-spacing: -.02em; word-spacing: -.3em; text-decoration: none; white-space: nowrap; }
.line-number:hover { color: var(--nmj-orange); }
.line-hint { margin: var(--s-1) 0 0; color: var(--on-dark-dim); font-size: var(--fs-1); }
.line-pending { margin: var(--s-1) 0 0; color: var(--on-steel); font-size: var(--fs-2); font-weight: var(--w-strong); }
.line-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.line-card.pending { border-left: 6px solid var(--nmj-orange); }

/* Seasonal contracts: phone-sized cards and a persistent next action. */
.contract-card { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); margin-bottom: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.contract-card h3 { margin: 0; font: var(--w-strong) var(--fs-2)/1.25 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); }
.contract-card-main { flex: 1 1 220px; min-width: 0; }
.contract-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.contract-price, .contract-summary { margin: 6px 0 0; font-weight: var(--w-strong); }
.chip-status { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--neutral-bg); font-size: var(--fs-1); font-weight: var(--w-strong); }
.contract-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.contract-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) 10px; border-left: 5px solid var(--nmj-orange); }
.contract-total-value { font-size: var(--type-hero); }
.contract-upgrade { border-top: var(--s-1) solid var(--nmj-orange); }
.contract-upgrade .row { align-items: center; }
.contract-checklist ol { margin: 0; padding-left: var(--s-5); }
.contract-add-row { margin: 0 0 var(--s-3); }
.chip-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 14px; }
.chip-filter .btn { min-height: var(--tap); }
.chip-filter .selected, .chip-filter [aria-selected="true"] { background: var(--surface-sunk); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.contract-list { margin-bottom: 20px; }
.contract-default-editor { width: 100%; padding-top: 14px; border-top: 1px solid var(--border); }
.contract-import-preview { margin: var(--s-3) 0; max-height: 240px; overflow: auto; }
.contract-preview-list { list-style: none; padding: 0; margin: 0; }
.contract-preview-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
.contract-preview-list .has-error { color: var(--danger); }
.next-bar { position: sticky; bottom: 10px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4); padding: var(--s-3); background: var(--steel); color: var(--on-steel); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.next-bar strong { flex: 1 1 180px; }
.next-bar .btn { min-height: 44px; }
@media (max-width: 720px) { .contract-card { padding: 14px; } .contract-actions { width: 100%; } .contract-actions .btn { min-height: 44px; flex: 1 1 120px; } .next-bar { margin: var(--s-3) var(--s-4); } }

/* Getting started */
.setup-card { border-top: var(--s-1) solid var(--nmj-orange); }
.progress { height: var(--s-2); background: var(--neutral-bg); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 14px; }
.progress > span { display: block; height: 100%; background: var(--nmj-orange); border-radius: var(--r-pill); }
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-item { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.setup-item:first-child { border-top: 0; padding-top: var(--s-1); }
.setup-icon { flex: 0 0 var(--s-5); line-height: 0; margin-top: 1px; }
.setup-text { flex: 1; min-width: 0; }
.setup-title { margin: 0; font-weight: var(--w-strong); }
.setup-desc { margin: 2px 0 0; color: var(--fg-dim); font-size: var(--fs-1); }
.setup-help { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.setup-help > .setup-desc { margin-top: var(--s-2); }
.setup-phone { margin-top: var(--s-1); }
.setup-phone > summary { min-height: 44px; font-size: var(--fs-1); }
.setup-item > .btn { flex: 0 0 auto; align-self: center; }
/* The setup icons carry fixed colours in their markup (ICON in views/customer.js): tokens here. */
.setup-icon svg circle[fill="#166534"] { fill: var(--ok); }
.setup-icon svg path[stroke="#fff"] { stroke: var(--surface); }
.setup-icon svg [stroke="#7B8898"] { stroke: var(--line-strong); }
.setup-icon svg [stroke="#C2410C"] { stroke: var(--attn); }

/* Receptionist on/off */
.mode-options { display: grid; gap: var(--s-2); }
.mode-option {
  display: flex; align-items: flex-start; gap: var(--s-3); margin: 0; padding: var(--s-3);
  border: 2px solid var(--line-strong); border-radius: var(--r-2); background: var(--tile); cursor: pointer; font-weight: 400;
}
.mode-option input { margin-top: 2px; }
.mode-option.selected { border-color: var(--ink); background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--ink); }
.mode-text { display: flex; flex-direction: column; font-size: var(--fs-1); color: var(--fg-dim); }
.mode-text strong { color: var(--fg); font-size: var(--fs-1); }
.mode-options:disabled .mode-option { opacity: 0.7; cursor: progress; }

/* Emergencies */
.emergency-card { border: 1px solid var(--line); border-left: 6px solid var(--attn); }
.emergency-card h2 { color: var(--attn); display: flex; align-items: center; gap: var(--s-2); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--attn); color: var(--surface); font: var(--w-strong) var(--fs-1)/1 var(--font-ui); }

/* Service-area chips, grouped by label */
.area-groups { margin-bottom: var(--s-3); }
.area-group { border-top: 1px solid var(--border); }
.area-group:last-child { border-bottom: 1px solid var(--border); }
.area-group > summary { color: var(--fg); }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 14px; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 2px; height: auto; padding: 0 0 0 var(--s-3); white-space: normal;
  background: var(--surface-sunk); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  font: var(--w-label) var(--fs-1)/1.3 var(--font-ui);
}
.chip-x {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px;
  background: none; border: 0; border-radius: var(--r-pill); color: var(--fg-dim); font-size: var(--fs-3); line-height: 1; cursor: pointer;
}
.chip-x:hover { color: var(--ink); background: var(--surface); }

/* Hours */
.hours-list { margin-bottom: var(--s-2); }
.hours-row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) 14px;
  padding: var(--s-2) 0; margin: 0; border-top: 1px solid var(--border);
}
.hours-row:first-child { border-top: 0; }
.hours-day { font-weight: var(--w-strong); }
.hours-times { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.hours-times input { flex: 1 1 0; min-width: 0; max-width: 170px; }
.hours-row .field-error { grid-column: 1 / -1; margin-top: 0; }

/* Services */
.svc-list { margin-bottom: var(--s-2); }
.svc-row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 0 var(--s-3); align-items: end;
  padding: var(--s-3) var(--s-3) 0; margin-bottom: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.svc-row .svc-remove { margin-bottom: var(--s-4); }

/* Calls: transcript + recording */
.transcript { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--fs-1); }
.transcript .turn { max-width: 88%; padding: 10px 14px; border-radius: var(--r-2); border: 1px solid var(--border); }
.transcript .turn.user { align-self: flex-start; background: var(--surface-sunk); border-color: var(--line-strong); border-bottom-left-radius: var(--s-1); }
.transcript .turn.agent { align-self: flex-end; background: var(--surface); border-color: var(--ink); border-bottom-right-radius: var(--s-1); }
.transcript .turn.note { align-self: center; background: var(--panel-2); font-size: var(--fs-1); }
.transcript .who { font: 700 var(--fs-1)/1.2 var(--font-display); color: var(--fg-dim); text-transform: uppercase; letter-spacing: var(--track-caps); margin-bottom: 2px; padding: 0; border: 0; }
.transcript .said { white-space: pre-wrap; }
.audio-wrap { display: flex; flex-direction: column; gap: var(--s-1); }
.audio-wrap audio { width: 100%; max-width: 480px; }
.audio-wrap.compact audio { width: 250px; max-width: 100%; height: 40px; }
details.call-log > summary { color: var(--fg-dim); }
details.call-log ol { margin: var(--s-2) 0 0; padding-left: 22px; font-size: var(--fs-1); }

/* Customer photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photo {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel-2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.broken { padding: var(--s-2); text-align: center; font-weight: var(--w-label); font-size: var(--fs-1); }

/* Calendar week */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); }
.week-day { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-sunk); }
.week-day.today { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface); }
.week-day-name { margin: 0 0 var(--s-2); font-weight: var(--w-strong); font-size: var(--fs-1); }
.week-empty { margin: 0; font-size: var(--fs-1); }
.week-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.week-job {
  display: flex; flex-direction: column; padding: 6px var(--s-2); min-height: var(--tap); justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-left: var(--s-1) solid var(--nmj-orange); border-radius: var(--r-1);
  color: var(--fg); text-decoration: none; font-size: var(--fs-1);
}
.week-job:hover { border-color: var(--ink); }
.week-job.emergency { border-left-color: var(--danger); }
.week-job-time { font-weight: var(--w-strong); }
.week-job-what { color: var(--fg-dim); overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .week { grid-template-columns: 1fr; }
  .week-day { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-2); align-items: start; }
  .week-day-name { margin: 0; padding-top: 2px; }
}

/* Calendar connected state */
.connected { display: flex; align-items: flex-start; gap: var(--s-3); padding: 14px var(--s-4); background: var(--ok-tint); border: 1px solid var(--ok-line); border-radius: var(--radius-sm); margin: 0 0 var(--s-4); }
.connected .ok-dot { width: var(--s-3); height: var(--s-3); margin-top: 5px; border-radius: 50%; background: var(--ok); flex: 0 0 var(--s-3); box-shadow: var(--shadow-1); }
.connected strong { display: block; color: var(--ok); }

/* ------------------------------------------------------------------ */
/* login / create account                                              */
/* ------------------------------------------------------------------ */
body.auth-page { background: var(--steel) radial-gradient(ellipse at 50% -10%, var(--steel-line) 0%, var(--steel) 60%) no-repeat; }
.login { max-width: 480px; margin: 0 auto; padding: var(--s-4) 0 var(--s-5); }
.login-brand { text-align: center; margin-bottom: 20px; color: var(--on-steel); }
.login-brand .wordmark-full { height: 42px; }
.login-tagline { margin: 14px 0 var(--s-1); font-size: var(--fs-3); font-weight: var(--w-strong); color: var(--on-steel); }
.login-sub { margin: 0; color: var(--on-dark-dim); font-size: var(--fs-1); }
.login-card { padding: 22px; border: 0; box-shadow: var(--shadow-2); }
.login-card h2 { font-size: var(--fs-3); }
.login-foot { text-align: center; margin: var(--s-3) 0 0; }
.login-offer { margin: calc(-1 * var(--s-1)) 0 var(--s-4); color: var(--fg); font-weight: var(--w-label); line-height: 1.4; }
.terms-note { margin: 14px 0 0; }
.terms-note a { color: var(--fg); font-weight: var(--w-label); }
.code-note { margin: calc(-1 * var(--s-1)) 0 var(--s-4); color: var(--fg); }
.code-input {
  font-size: var(--type-sheet-title); font-weight: var(--w-strong); letter-spacing: 0.35em; text-align: center;
  font-variant-numeric: tabular-nums; font-family: var(--mono); padding-left: calc(var(--s-3) + 0.35em);
}
.code-input::placeholder { letter-spacing: normal; }
.code-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-4); margin-top: var(--s-2); }
.link-btn[aria-disabled="true"] { color: var(--fg-dim); text-decoration: none; cursor: default; font-variant-numeric: tabular-nums; }

/* in-flight requests: a small spinner before the button label */
.btn.is-busy::before, .link-btn.is-busy::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
.link-btn.is-busy { display: inline-flex; align-items: center; gap: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* first-run "Finish setting up" card on the overview */
.finish-card h2 { margin-bottom: var(--s-1); }
.finish-card > .muted { margin-bottom: var(--s-4); }

/* ------------------------------------------------------------------ */
/* tablets and down                                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  #topbar .who { font-size: var(--fs-2); }
}

/* phones: menu button, 44px targets, stacked tables */
@media (max-width: 720px) {
  body { font-size: var(--fs-1); }
  main { padding: var(--s-4) var(--s-4) 40px; }
  h1 { font-size: var(--type-sheet-title); }
  .topbar-row { padding: 6px var(--s-4); gap: 10px; }
  #topbar .wordmark-full { display: none; }
  #topbar .wordmark-symbol { display: block; }
  #btn-logout { display: none; }
  .nav-toggle { display: inline-flex; }
  #nav { display: none; }
  #topbar.nav-open #nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: var(--s-1) var(--s-4) var(--s-4); max-height: calc(100vh - 60px); overflow-y: auto;
  }
  #topbar.nav-open #nav a, #topbar.nav-open #nav .nav-logout {
    min-height: 48px; padding: 0 14px; border-radius: var(--r-2);
    background: var(--steel-2); border: 1px solid var(--steel-line); color: var(--on-steel);
  }
  #topbar.nav-open #nav a.active { border-color: var(--action); box-shadow: inset var(--s-1) 0 0 var(--action); }
  #topbar.nav-open #nav a.nav-cross { margin-left: 0; }
  #topbar.nav-open #nav .nav-logout {
    display: flex; align-items: center; justify-content: center; grid-column: 1 / -1;
    font: inherit; font-weight: var(--w-strong); cursor: pointer; background: transparent; border: 2px solid var(--on-steel-line);
  }

  /* every tap target 48 px at phone width (spec 3.10) */
  .btn, .btn-sm { min-height: 48px; }
  .btn-sm { padding: var(--s-2) 14px; font-size: var(--fs-1); }
  input, select, textarea { min-height: 48px; font-size: var(--fs-1); } /* 16 px stops iOS zoom */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; }
  .check { min-height: var(--tap); }
  .chip-x { min-width: var(--tap); min-height: var(--tap); }
  .back-link { min-height: var(--tap); }
  .pw-toggle { min-height: var(--tap); }
  .card { padding: var(--s-4); }
  .card.flush { padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }

  .page-head { margin-bottom: 14px; }
  .line-card { padding: var(--s-4); }
  .line-number { font-size: var(--s-5); }
  .line-actions { width: 100%; }
  .line-actions .btn { flex: 1 1 140px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi .num { font-size: var(--type-sheet-title); }
  .setup-text { flex: 1 1 0; }
  .card-link, .photo-link { display: inline-flex; align-items: center; min-height: var(--tap); }
  .inline-form > .btn { width: 100%; }
  .form-actions .btn { flex: 1 1 auto; }
  .hours-row { grid-template-columns: 1fr auto; }
  .hours-times { grid-column: 1 / -1; grid-row: 2; }
  .hours-times input { max-width: none; }
  .svc-row { grid-template-columns: 1fr 1fr; }
  .svc-row > .field:first-child { grid-column: 1 / -1; }
  .svc-row .svc-remove { grid-column: 1 / -1; }
  dl.kv { grid-template-columns: 1fr; gap: 2px; }
  dl.kv dd { margin-bottom: var(--s-2); }
  dl.kv.totals { grid-template-columns: 1fr auto; gap: 6px var(--s-4); }
  dl.kv.totals dd { margin-bottom: 0; }
  .transcript .turn { max-width: 94%; }
  .login { padding-top: var(--s-2); }
  .login-card { padding: 18px var(--s-4); }
  .login-brand .wordmark-full { height: 38px; }
  #toast-region { left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); width: auto; }

  /* tables become a stack of cards */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack tr {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--s-2) 14px; margin-bottom: 10px; box-shadow: var(--shadow);
  }
  table.stack td {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; align-items: baseline;
    padding: 6px 0; border: 0; text-align: left; white-space: normal; min-width: 0;
  }
  table.stack td::before { content: attr(data-label); grid-column: 1; grid-row: 1; color: var(--fg-dim); font-size: var(--fs-1); font-weight: var(--w-strong); }
  table.stack td > * { grid-column: 2; justify-self: start; max-width: 100%; }
  table.stack td.num { text-align: left; }
  table.stack td.cell-primary { display: block; font-size: var(--fs-1); padding: 6px 0 var(--s-2); border-bottom: 1px solid var(--border); margin-bottom: var(--s-1); }
  table.stack td.cell-primary::before { content: none; }
  table.stack td.cell-primary a { display: inline-flex; align-items: center; min-height: var(--tap); }
  table.stack td.cell-wrap { min-width: 0; }
  table.stack td.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: 10px; }
  table.stack td.actions::before { content: none; }
  table.stack td.actions:empty { display: none; }
  table.stack td.actions .btn { flex: 1 1 120px; margin-left: 0; }
  table.stack td.cell-audio { grid-template-columns: 1fr; }
  table.stack td.cell-audio > * { grid-column: 1; justify-self: stretch; }
  table.stack td.cell-audio::before { content: none; }
  table.stack td.cell-audio:has(> .muted) { display: none; }
  table.stack .audio-wrap.compact audio { width: 100%; }
  table.stack tr.clickable:hover td { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .btn.is-busy::before, .link-btn.is-busy::before { animation-duration: 2.4s; }
}

/* On the job: what the tech did from their job link (job page, Timesheets) */
.assign-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: var(--s-2); }
.assign-row .field { flex: 1 1 220px; margin: 0; }
.assign-row .btn { min-height: var(--tap); }
.field-timeline { list-style: none; margin: var(--s-3) 0 0; padding: 0; border-top: 1px dashed var(--border); }
.field-timeline li { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px dashed var(--border); }
.field-timeline time { flex: 0 0 5.5rem; font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-weight: var(--w-label); color: var(--fg-dim); font-size: var(--fs-1); }
.field-timeline span { flex: 1 1 14rem; }
.field-timeline a { font-weight: var(--w-label); }
.field-photo { margin: 0; }
.field-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: var(--s-1); font-size: var(--fs-1); font-weight: var(--w-label); }
.check-row.stack { display: grid; gap: var(--s-2); }
.ts-onsite { display: block; font-weight: var(--w-strong); }
.ts-drive { display: block; color: var(--fg-dim); font-size: var(--fs-1); }

/* ------------------------------------------------------------------ */
/* Job Proof (spec 6.4): list chips, the job card, review queue, + Job */
/* Colours stay on the kit's tokens; every pair below is AA or better. */
/* ------------------------------------------------------------------ */
/* "Records" in the nav, with how many are waiting (charcoal on yellow, 10:1) */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: var(--r-pill);
  background: var(--action); color: var(--on-action); font-size: var(--fs-1); font-weight: var(--w-strong); line-height: 1;
}
.badge.with-icon { gap: 5px; }
.badge-icon { display: inline-flex; line-height: 0; }
.badge-icon svg { width: 14px; height: 14px; }

/* shot-list strip: one pill per stage */
.shot-strip { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); padding: 0; }
.shot {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 96px; min-height: 0; padding: 6px var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-sunk); color: var(--ink); font: 400 var(--fs-1)/1.35 var(--font-ui);
}
.shot-label { font-weight: var(--w-strong); }
.shot-state { color: var(--neutral); }
.shot.stored { background: var(--ok-bg); border-color: var(--ok-line); }
.shot.stored .shot-state { color: var(--ok); font-weight: var(--w-label); }
.shot.waiting { background: var(--neutral-bg); border-style: dashed; border-color: var(--field-border); }
.shot.missing { background: var(--warn-bg); border-color: var(--warn-line); }
.shot.missing .shot-state { color: var(--warn); font-weight: var(--w-strong); }
.shot.optional .shot-state { color: var(--fg-dim); }

/* photo grid: placeholders, soft deletes, the customer-visible toggle */
.photo-grid.proof { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; align-items: start; }
.photo.placeholder {
  flex-direction: column; gap: 6px; padding: 10px; text-align: center;
  border-style: dashed; border-color: var(--field-border); background: var(--neutral-bg);
  color: var(--neutral); font-size: var(--fs-1); font-weight: var(--w-label);
}
.photo.placeholder .ph-icon { line-height: 0; }
.photo.placeholder .ph-icon svg { width: 28px; height: 28px; }
.field-photo.removed .photo img { opacity: 0.5; filter: grayscale(1); }
.field-photo figcaption { margin-top: 6px; }
.photo-stage { font-weight: var(--w-strong); }
.photo-meta { display: block; color: var(--fg-dim); font-size: var(--fs-1); line-height: 1.35; margin-top: 2px; }
.photo-meta.removed-note { color: var(--danger); font-weight: var(--w-strong); }
.photo-meta.photo-place a { color: var(--ink); font-weight: var(--w-label); }
.weather-line { margin: var(--s-2) 0 0; }
.vis-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 6px; padding: var(--s-1) 10px;
  border: 1px solid var(--ok-line); border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok);
  font: inherit; font-size: var(--fs-1); font-weight: var(--w-strong); cursor: pointer;
}
.vis-toggle[aria-pressed="false"] { background: var(--neutral-bg); border-color: var(--field-border); color: var(--neutral); }
.vis-toggle:disabled { opacity: 0.6; cursor: progress; }
.photo-remove { display: block; padding: var(--s-1) 0; min-height: var(--s-6); font-size: var(--fs-1); color: var(--fg-dim); }
.photo-remove:hover { color: var(--danger); }
.occupant-line { font-weight: var(--w-label); margin: var(--s-2) 0 0; }

/* typed name + reason before anything destructive */
.confirm-box {
  margin-top: var(--s-2); padding: var(--s-3); border: 1px solid var(--attn); border-left-width: var(--s-1); border-radius: var(--r-2);
  background: var(--attn-tint); color: var(--ink); font-size: var(--fs-1);
}
.confirm-box strong { display: block; margin-bottom: var(--s-1); color: var(--attn); }
.confirm-box .hint { color: var(--ink-2); margin: 0 0 var(--s-2); }
.confirm-fields { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.confirm-box .field-error { margin: 0 0 var(--s-2); }

/* equipment at the site */
.equip-list { list-style: none; margin: 0 0 var(--s-2); padding: 0; }
.equip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: 10px 0; border-top: 1px solid var(--border); }
.equip:first-child { border-top: 0; }
.equip-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.equip-tools { flex: 0 0 auto; }
.equip .confirm-box, .equip .equip-form { flex: 1 1 100%; }
.equip-form { padding-top: var(--s-1); }
details.equip-add { margin-top: var(--s-1); }
details.equip-add .equip-form { padding: var(--s-1) 0 var(--s-2); }

/* customer record */
.record { margin-top: var(--s-1); }
.record-status { margin: 0 0 var(--s-1); font-size: var(--fs-2); }
.record-status.ok { color: var(--ok); }
.record-status.warn { color: var(--warn); }
.record-status.danger { color: var(--danger); }
.record-status.neutral { color: var(--neutral); }
.record-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px var(--s-4); margin-top: var(--s-3); }
.record-actions .field { flex: 1 1 220px; margin: 0; }
.record-actions .row { flex: 0 0 auto; }
.record-sub { margin: var(--s-4) 0 var(--s-1); font-weight: var(--w-strong); font-size: var(--fs-1); }
.notice-list { margin: 0; padding-left: 18px; color: var(--fg-dim); font-size: var(--fs-1); }
.notice-list li { margin-bottom: var(--s-1); }
.hazard-box ul { margin: 6px 0 0; }
.hazard-box li { font-weight: var(--w-strong); }

/* review queue: phone-width cards, one tap each */
.queue { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.queue-item { display: flex; flex-direction: column; gap: var(--s-3); }
.queue-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.queue-main .item-title { font-size: var(--fs-2); color: var(--fg); text-decoration: none; }
.queue-main .item-title:hover { text-decoration: underline; }
.queue-summary { font-style: italic; }
.queue-main .record-status { margin-top: 6px; font-size: var(--fs-1); font-weight: var(--w-strong); }
.queue-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.queue-actions .btn { flex: 1 1 160px; min-height: 48px; font-size: var(--fs-1); }

/* + Job */
.quick-job { border-top: var(--s-1) solid var(--nmj-orange); }

@media (max-width: 720px) {
  .photo-grid.proof { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .vis-toggle { min-height: var(--tap); }
  .photo-remove { min-height: var(--tap); }
  .record-actions .row { width: 100%; }
  .record-actions .row .btn { flex: 1 1 140px; min-height: 48px; }
  .equip-tools { width: 100%; }
  .equip-tools .btn { flex: 1 1 120px; }
  .page-head > .btn { min-height: var(--tap); }
}

/* terms gate */
.terms-gate-open, .terms-gate-open body { overflow: hidden; }
.terms-gate {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4); background: var(--scrim); overflow-y: auto;
}
.terms-gate-dialog {
  width: 100%; max-width: 460px; margin: auto;
  background: var(--panel); color: var(--fg);
  border-top: var(--s-1) solid var(--nmj-orange); border-radius: var(--radius);
  padding: var(--s-5); box-shadow: var(--shadow-2);
}
.terms-gate-dialog h2 { font-size: var(--fs-3); margin: 0 0 10px; }
.terms-gate-dialog p { margin: 0 0 var(--s-3); line-height: 1.5; }
.terms-gate-links a { font-weight: var(--w-strong); }
.terms-gate-error { color: var(--danger); font-weight: var(--w-label); }
.terms-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.terms-gate-actions .btn { flex: 1 1 160px; min-height: 48px; font-size: var(--fs-1); }
.terms-gate .btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
@media (max-width: 720px) {
  .terms-gate { align-items: flex-end; padding: 0; }
  .terms-gate-dialog { max-width: none; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; padding: 20px var(--s-4) calc(20px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ */
/* Invoices (Get paid v1): status lines, row actions, the editor,     */
/* payment settings and the small Mark paid / Copy link dialogs.      */
/* ------------------------------------------------------------------ */
.inv-status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.inv-note { color: var(--fg-dim); font-size: var(--fs-1); line-height: 1.35; white-space: nowrap; }
td.actions .inv-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 230px; max-width: 360px; white-space: normal; }
td.actions .inv-actions .btn + .btn { margin-left: 0; }
.inv-editor { border-top: var(--s-1) solid var(--nmj-orange); }
.inv-editor h2:focus { outline: none; }
.inv-editor h2:focus-visible { outline: 3px solid var(--focus); }
.inv-editor .card-head { justify-content: flex-start; gap: 10px; }
.inv-editor h3 { margin-top: var(--s-1); }
.inv-lines-set { margin-bottom: var(--s-2); }
.inv-line {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 0 var(--s-3); align-items: start; padding: var(--s-3) var(--s-3) 0; margin-bottom: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.inv-line .inv-remove { margin: 27px 0 var(--s-4); }   /* level with the inputs under their labels */
.inv-editor input[type="date"] { max-width: 240px; }
.inv-amount {
  display: flex; align-items: center; min-height: var(--tap-desk); font-weight: var(--w-strong);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
dl.kv.inv-totals { margin: var(--s-1) 0 18px; }
.inv-preview {
  margin: var(--s-1) 0 0; padding: 10px var(--s-3); font-size: var(--fs-1);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
/* Dialogs are sheets (spec 4.7, 4.17): the sheet surface, a Condensed caps title, one filled verb. */
.inv-dialog {
  width: min(440px, calc(100vw - var(--s-6))); padding: 0; border: 1px solid var(--line);
  border-top: var(--s-1) solid var(--rule); border-radius: var(--radius);
  background: var(--sheet); color: var(--fg); box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}
.inv-dialog::backdrop { background: var(--scrim); }
.inv-dialog-body { padding: 20px; }
.inv-dialog-body h2 { margin-bottom: 10px; font-size: var(--type-sheet-title); line-height: 1.05; }
.inv-dialog-body input[readonly] { background: var(--surface-sunk); font-family: var(--mono); font-size: var(--fs-1); }
.inv-dialog .field-error { margin: 0 0 var(--s-2); }

@media (max-width: 720px) {
  .inv-note { white-space: normal; }
  td.actions .inv-actions { width: 100%; min-width: 0; max-width: none; }
  table.stack td.actions .inv-actions .btn { flex: 1 1 130px; }
  .inv-line { grid-template-columns: 1fr 1fr; }
  .inv-line > .field:first-child { grid-column: 1 / -1; }
  .inv-line .inv-remove { grid-column: 1 / -1; margin-top: 0; }
  .inv-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; }
  .inv-dialog-body { padding: 20px var(--s-4) calc(20px + env(safe-area-inset-bottom)); }
  .inv-dialog .form-actions .btn { min-height: 48px; }
}

/* ------------------------------------------------------------------ */
/* Quotes and "send as a picture" (docs/QUOTES_SPEC_v1.md): the       */
/* invoice classes above, plus a decline reason that wraps, the       */
/* invoice link under a quote, and checkboxes with a hint line.       */
/* ------------------------------------------------------------------ */
.inv-note.wrap { white-space: normal; max-width: 260px; }
a.inv-note { color: var(--link); font-weight: var(--w-label); text-decoration: underline; }
a.inv-note:hover { color: var(--ink); }
.check-with-hint { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.check-with-hint .check-hint { margin: calc(-1 * var(--s-1)) 0 0 28px; }
.inv-dialog .check-with-hint { margin-top: var(--s-1); }

/* ------------------------------------------------------------------ */
/* Seasonal contracts (docs/SEASONAL_CONTRACTS_SPEC_v1.md): the kind  */
/* chip in the Quotes list, the editor's season / plan / terms parts, */
/* the payment schedule, a signed contract's panel, and the customer  */
/* picker for a new contract.                                         */
/* ------------------------------------------------------------------ */
.doc-num { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.badge.kind-contract { background: var(--surface-sunk); color: var(--ink); border-color: var(--ink); }
.badge.kind-quote { background: var(--panel); color: var(--neutral); border-color: var(--field-border); }
.quote-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-3); }
.quote-filter .btn + .btn { margin-left: 0; }
.seg-btn[aria-pressed="true"], .seg-btn[aria-pressed="true"]:hover { background: var(--surface-sunk); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.callout.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.callout.neutral { background: var(--neutral-bg); border-color: var(--border); color: var(--neutral); }
.contract-set { border-top: 1px solid var(--border); margin: 6px 0 var(--s-1); padding-top: 2px; }
.contract-set > h3 { font-size: var(--fs-1); }
.choice-grid.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); margin-bottom: 10px; }
.choice-group > .field-error { margin: 0 0 var(--s-2); }
.plan-choice { align-items: flex-start; }
.plan-choice input { margin-top: 2px; }
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-desc { font-weight: 400; font-size: var(--fs-1); line-height: 1.35; color: var(--fg-dim); overflow-wrap: anywhere; }
.plan-preview { margin: 0 0 14px; }
.plan-preview .table-wrap, .contract-panel .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--s-2); max-width: 620px; }
table.plan-table th, table.plan-table td { padding: var(--s-2) var(--s-3); white-space: normal; }
table.plan-table tfoot th, table.plan-table tfoot td {
  background: var(--panel-2); color: var(--fg); font-size: var(--fs-1); font-weight: var(--w-strong); text-transform: none; letter-spacing: 0;
  border-top: 1px solid var(--border); border-bottom: 0;
}
table.plan-table .cell-sub { white-space: normal; }
.plan-flag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--fs-1); font-weight: var(--w-strong);
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line);
}
.terms-box { background: var(--panel-2); }
.terms-box > summary { color: var(--fg); }
.terms-input { font-size: var(--fs-1); line-height: 1.5; min-height: 260px; }
.contract-terms {
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto;
  margin: 0 0 var(--s-3); padding: var(--s-3) 14px; font-size: var(--fs-1); line-height: 1.55;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.contract-panel .callout strong { margin-bottom: var(--s-1); }
.hash { font-size: var(--fs-1); background: var(--panel-2); padding: 1px 6px; border-radius: var(--s-1); overflow-wrap: anywhere; }
dl.kv.fill-ins { margin: 0 0 var(--s-3); gap: var(--s-1) var(--s-4); }
dl.kv.fill-ins code { font-size: var(--fs-1); }
.cust-pick { display: grid; gap: 6px; max-height: min(50vh, 360px); overflow-y: auto; padding: 2px; }
.cust-choice { align-items: flex-start; }
.cust-choice input { margin-top: 2px; }
.inv-dialog input[type="search"] { margin-bottom: 0; }
table.plan-table .due-sub { display: none; }
@media (max-width: 720px) {
  table.plan-table th, table.plan-table td { padding: var(--s-2) 10px; }
  table.plan-table .due-col { display: none; }
  table.plan-table .due-sub { display: block; }
  table.plan-table .due-sub .plan-flag { margin: 2px 0 0; }
  table.plan-table td:first-child { white-space: nowrap; }
  .quote-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quote-filter .btn-sm { padding: var(--s-2) var(--s-1); font-size: var(--fs-1); white-space: nowrap; }
  .plan-preview .table-wrap, .contract-panel .table-wrap { max-width: none; }
}

/* ------------------------------------------------------------------ */
/* Admin Leads page (website follow-up requests): status buttons and  */
/* notes share the last cell; the visitor's message keeps its breaks. */
/* ------------------------------------------------------------------ */
td.actions .lead-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 240px; max-width: 340px; white-space: normal; }
td.actions .lead-actions .btn + .btn { margin-left: 0; }
td.actions .lead-actions textarea { width: 100%; min-height: 64px; font-size: var(--fs-1); }
.lead-msg { white-space: pre-line; overflow-wrap: anywhere; }
.lead-due-late { color: var(--danger); font-weight: var(--w-label); }
@media (max-width: 720px) {
  td.actions .lead-actions { width: 100%; min-width: 0; max-width: none; }
}

/* Display (spec 3.4, D21): Day / Night for this session, in Settings → Profile. */
.display-card select { max-width: 260px; }

/* ------------------------------------------------------------------ */
/* Shared components whose names the desk's older markup reuses (D37): */
/* nmj-tokens.css styles .field, .stack and .empty for the field pages; */
/* the desk keeps its own layout for them until batch 3 rebuilds it.   */
/* ------------------------------------------------------------------ */
.field { display: block; }
table.stack > * + * { margin-top: 0; }
p.empty { display: block; padding: var(--s-3) 0; margin: 0; font-size: var(--fs-1); color: var(--ink-2); }
.job-list-card { display: inline-block; vertical-align: top; width: min(100%, 440px); margin-right: var(--gap); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.job-list-card:hover { border-color: var(--ink); }
.job-list-card h2 { font: var(--w-strong) var(--fs-3)/1.25 var(--font-ui); text-transform: none; letter-spacing: 0; margin-bottom: var(--s-2); }
.job-list-card p { margin: 0 0 var(--s-1); color: var(--ink-2); }
.job-list-card p:last-child { margin-bottom: 0; }
.job-list-card .job-owes { color: var(--ink); font: 700 var(--fs-3)/1.25 var(--font-mono); letter-spacing: -.02em; }
.jobs-chips { margin-bottom: var(--s-3); }
.jobs-page .page-head { flex-wrap: nowrap; align-items: center; }
.jobs-page .page-head-text { flex: 1 1 auto; }

/* ================================================================== */
/* UX v2 batch 3A: the desk's destinations, Today, Schedule, More       */
/* (docs/ux/v2/UX_V2_SPEC.md 4.13 to 4.16, 5.3). body.desk-v2 is every  */
/* shop page; the admin console keeps the older bar above.             */
/* ================================================================== */

/* ---- the top bar: brand mark + shop name, five destinations, the receptionist ---- */
body.desk-v2 #topbar { border-bottom: 4px solid var(--rule); }
body.desk-v2 .topbar-row { height: 64px; padding: 0 var(--s-5); gap: 0; max-width: none; }
body.desk-v2 .topbar-right { display: none; }
body.desk-v2 .brand-link { flex: none; padding-right: 10px; }
body.desk-v2 .brandlock .mark { width: 30px; height: 30px; color: var(--brand-yellow); }
:root[data-theme="night"] body.desk-v2 .brandlock .mark { color: var(--action); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) body.desk-v2 .brandlock .mark { color: var(--action); } }
body.desk-v2 .who-wrap { display: contents; }
body.desk-v2 #topbar .who { order: 1; padding-left: 0; border-left: 0; font: 700 var(--fs-3)/1 var(--font-display); max-width: 30vw; }
body.desk-v2 .brand-link { order: 0; }
body.desk-v2 .dnav { order: 2; margin-left: var(--s-5); }
body.desk-v2 .recep { order: 3; margin-left: auto; padding-left: var(--s-4); }
body.desk-v2 .recep .ic { width: 20px; height: 20px; }
body.desk-v2 .recep[data-mode="off"] .live-dot, body.desk-v2 .recep[data-mode="message_only"] .live-dot { background: var(--on-steel-line); box-shadow: none; }
.dnav a:hover { color: var(--on-steel); background: var(--steel-2); }
.dnav .nav-badge, .bnav .nav-badge {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border: 0; border-radius: 12px;
  background: var(--on-steel); color: var(--steel); font: 600 var(--fs-1)/1 var(--font-ui);
}
.dnav .nav-badge.safety, .bnav .nav-badge.safety { --c: 6px; border-radius: 0; background: var(--safety); color: var(--on-safety); }
.dnav .nav-badge[hidden], .bnav .nav-badge[hidden] { display: none; }
.bnav .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 24px; height: 24px; }
.bnav[hidden] { display: none !important; }

/* ---- page tabs for Money and Settings: links, so rounded rectangles, never pills ---- */
.subnav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.subnav a {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-desk); padding: 0 var(--s-4);
  border: 2px solid var(--line-strong); border-radius: var(--r-2); background: var(--tile); color: var(--ink);
  font-weight: var(--w-label); text-decoration: none;
}
.subnav a[aria-current="page"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.subnav a.subnav-back { border-color: transparent; background: none; padding-left: 4px; }
.subnav .ic { width: 20px; height: 20px; }

/* ---- Today ---- */
.today .today-head { padding: 0 0 var(--s-4); align-items: flex-end; flex-wrap: wrap; }
.today .today-head h1 { margin: 0; }
.today-date { margin: 4px 0 0; color: var(--ink-2); }
.today-month { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.month { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
.month b { color: var(--ink); font-weight: var(--w-label); }
.month > span { white-space: nowrap; }
.month-phone { padding: var(--s-4) 4px 0; line-height: 1.6; }
.month-phone > span { white-space: normal; }
.today-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: var(--s-5); align-items: start; }
.today-left > * + *, .today-right > * + * { margin-top: var(--s-5); }
.today-stack > * + * { margin-top: var(--s-5); }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-3); }
.sec-t h2 { margin: 0; font: 700 var(--fs-3)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); }
.sec-t small { font-size: var(--fs-1); color: var(--ink-2); text-align: right; }
.sec-t small a { color: var(--ink); font-weight: var(--w-label); }
.sec-t.board-t { align-items: center; justify-content: flex-start; gap: 0; margin-bottom: var(--s-1); }
.info-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.info-btn .ic { width: 20px; height: 20px; }
.info-btn[aria-expanded="true"] { color: var(--ink); }
.board-note { margin: 0 4px var(--s-3); color: var(--ink-2); font-size: var(--fs-1); }
.empty-line { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; margin: 0; padding: 10px var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); color: var(--ink-2); }
.empty-line .ic { color: var(--ok); width: 24px; height: 24px; }
.one-line { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 4px var(--s-2) 4px var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); color: var(--ink-2); }
.one-line b { color: var(--ink); font-weight: var(--w-label); }
.one-line .grow { flex: 1; min-width: 0; }
.one-line > .ic { color: var(--ink-2); }
.one-line .btn-quiet { min-height: 44px; font-size: var(--fs-1); }
.photo-download { flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); padding-top: 8px; padding-bottom: 8px; }
.photo-download .btn { flex: none; }
.photo-download .dim { flex: 1 1 14rem; min-width: 0; color: var(--ink-2); font-size: var(--fs-1); }
.contracts-chip .ic { width: 20px; height: 20px; }
.skel-block { display: grid; gap: var(--s-3); padding: var(--s-4) 0; }
.skel-block .skel.short { width: 40%; }

/* Needs you cards (spec 4.14). The card's verbs are buttons; Open is quiet. */
.need .what { margin: 0; }
.need .why { margin: 0; }
.need .k { margin: 0 0 2px; }
.need .acts .btn { min-height: 48px; }
.need .acts .ic { width: 20px; height: 20px; }
.need .acts .btn-quiet { min-height: 44px; font-size: var(--fs-1); }
.need .folded a { color: var(--ink-2); }
.need .folded .ic { width: 20px; height: 20px; }
.need.stop .why { color: var(--ink); }
/* The stop card's Call: the safety fill when it is the one light, a safety outline otherwise. */
.btn.safety { --edge: var(--safety-edge); --fill: var(--tile); color: var(--safety-ink); }
.btn.safety .ic { color: var(--safety-edge); }
.btn.btn-fill.safety, .btn.btn-fill.safety:hover { --fill: var(--safety); color: var(--on-safety); }
.btn.btn-fill.safety .ic { color: var(--on-safety); }
.more-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; margin-top: var(--s-3); padding: 6px 14px;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--r-3); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.more-row b { font-weight: var(--w-label); font-size: var(--fs-2); white-space: nowrap; }
.more-row .grow { flex: 1; min-width: 0; color: var(--ink-2); }

/* Status chips (spec 3.6, 4.5): a label, never tappable. The desk's older .chip (service-area
   chips with a remove button) keeps its look; these carry .status-chip. */
.chip.status-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; white-space: nowrap; flex: none;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  font: 600 var(--fs-1)/1 var(--font-ui); }
.chip.status-chip .ic { width: 20px; height: 20px; color: var(--ink-2); }
.chip.status-chip.ok .ic { color: var(--ok); }
.chip.status-chip.attn .ic { color: var(--attn); }
.chip.status-chip.live .ic { color: var(--ink); }
.chip.status-chip.stopped { --c: 7px; border: 0; border-radius: 0; background: var(--safety); color: var(--on-safety); }
.chip.status-chip.stopped .ic { color: var(--on-safety); }

/* The board (spec 4.15): the tap's address and time, nothing else. */
.board-row { grid-template-columns: minmax(0, 1fr) max-content; }
.board-row .where { white-space: normal; overflow: visible; }
.board-row .where .addr { color: var(--ink); }
.board-row .chip.live::after, .srow .chip.live::after, .tbl .chip.live::after { flex: none; }
.board .board-foot:only-child { margin: 0; }

/* Your day (solo shops). */
.your-day .lead-in { color: var(--ink-2); }
.your-day > .ic { color: var(--ink-2); }

/* Schedule rows (spec 4.16): a table at 1366, two-line rows on the phone. */
.sched .tbl { margin: 0; }
table.tbl:not(.stack) td { white-space: normal; }
.tbl td.tm, .tbl td.act, .tbl td.num { white-space: nowrap; }
.tbl .dim { overflow-wrap: anywhere; }
.tbl a.row-open, .srow a.srow-open { min-height: 44px; display: flex; align-items: center; }
.sec-t small a { display: inline-flex; align-items: center; min-height: 44px; }
body.desk-v2 .brand-link { min-width: 44px; min-height: 44px; justify-content: center; }
.tbl .addr { font-weight: var(--w-label); }
.tbl .dim { color: var(--ink-2); font-size: var(--fs-1); margin-top: 2px; }
.tbl a.row-open, .srow a.srow-open { color: var(--ink); text-decoration: none; }
.tbl a.row-open:hover .addr, .srow a.srow-open:hover .addr { text-decoration: underline; }
.tbl tr.day-row th { background: var(--surface-sunk); text-transform: uppercase; }
.tbl td.num { font-variant-numeric: tabular-nums; }
.sched-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px var(--s-3) 10px var(--s-4);
  background: var(--surface-sunk); color: var(--ink-2); border-top: 1px solid var(--line); }
.sched-foot .btn .ic { width: 20px; height: 20px; }
.srow .tm { font-weight: var(--w-strong); }
.srow .srow-open { min-width: 0; display: block; overflow: hidden; }
.srow .srow-open .addr { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-2); }
.srow .meta { flex-wrap: wrap; row-gap: 4px; }
.srow .meta .meta-who { white-space: nowrap; }
.board-row .where .since { white-space: nowrap; }
.srow .meta .chip { flex: none; }
.srow details.rmenu { grid-row: 1 / span 2; grid-column: 3; }

/* The row's "..." menu: a native disclosure, no script needed to open it. */
details.rmenu { position: relative; display: inline-block; }
details.rmenu > summary { list-style: none; cursor: pointer; }
details.rmenu > summary::-webkit-details-marker { display: none; }
details.rmenu > summary::after { content: none; }
details.rmenu > summary { min-height: 44px; display: inline-grid; place-items: center; gap: 0; }
details.rmenu > summary .ic { width: 24px; height: 24px; }
.rmenu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 180px; display: grid; gap: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.rmenu-list a, .rmenu-list button { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-1);
  background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.rmenu-list a:hover, .rmenu-list button:hover { background: var(--surface-sunk); }

/* ---- Schedule ---- */
/* A column, always: the find box sits under the chips. A flex-basis would be its height here. */
.sched-tools { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); margin-bottom: var(--s-4); }
.sched-tools input[type="search"] { flex: none; box-sizing: border-box; width: 100%; height: 44px; min-height: 0; max-width: 420px; padding-top: 0; padding-bottom: 0; }
.seg-tabs { display: inline-flex; gap: var(--s-2); }
.seg-tabs a { display: inline-flex; align-items: center; min-height: var(--tap-desk); padding: 0 var(--s-4); border: 2px solid var(--line-strong);
  border-radius: var(--r-2); background: var(--tile); color: var(--ink); font-weight: var(--w-label); text-decoration: none; }
.seg-tabs a[aria-current="page"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sched-list > * + * { margin-top: var(--s-3); }
.schedule > .hint { margin-top: var(--s-4); }
.sched-list .day-h { margin: var(--s-4) 4px var(--s-2); }
.page-head .btn .ic { width: 20px; height: 20px; }

/* ---- More ---- */
.more-page .sec-t { margin-top: var(--s-5); }
.more-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.more-link { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: 8px var(--s-3) 8px var(--s-4);
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.more-link:last-child { border-bottom: 0; }
.more-link:hover { background: var(--surface-sunk); }
.more-link .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.more-link .more-label { font-weight: var(--w-label); font-size: var(--fs-2); }
.more-link .more-sub { color: var(--ink-2); font-size: var(--fs-1); }
.more-link > .ic { color: var(--ink-2); }
.more-link .go { color: var(--ink-2); }
.count-pill { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px;
  background: var(--ink); color: var(--surface); font-weight: var(--w-label); }
.more-link .badge.safety { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border: 0;
  background: var(--safety); color: var(--on-safety); font-weight: var(--w-label); }
.more-link [hidden] { display: none !important; }
.more-link:disabled { color: var(--ink); cursor: default; }
.more-fold { border-bottom: 1px solid var(--line); }
.more-fold:last-child { border-bottom: 0; }
.more-fold > summary.more-link { border-bottom: 0; }
.more-fold-body { padding: 0 var(--s-4) var(--s-3); }

/* ---- phone: 56 px bar with the shop and the receptionist, the bottom bar on every page ---- */
@media (max-width: 760px) {
  body.desk-v2 { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.desk-v2 .topbar-row { height: 56px; padding: 0 var(--s-4); }
  body.desk-v2 .dnav { display: none; }
  body.desk-v2 .who-wrap { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 2px; }
  body.desk-v2 #topbar .who { max-width: none; font-size: var(--fs-2); }
  body.desk-v2 .recep { margin-left: 0; padding-left: 0; }
  body.desk-v2 .recep .ic { display: none; }
  body.desk-v2 main { padding: var(--s-4) 12px 32px; }
  body.desk-v2 #toast-region { bottom: calc(68px + var(--s-3) + env(safe-area-inset-bottom)); }
  body.desk-v2 #footer { padding-bottom: var(--s-4); }
  .today .today-head { padding: 4px 4px var(--s-3); }
  .sec-t { margin-left: 4px; margin-right: 4px; }
  .need { grid-template-columns: 28px minmax(0, 1fr); }
  .need .open { display: none; }
  .need .acts .btn { flex: 1 1 40%; }
  .need.stop .acts .btn[data-verb="call"] { flex-basis: 100%; }
  .need[data-need] { cursor: pointer; }
  .seg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .seg-tabs a { justify-content: center; }
  .sched-tools input[type="search"] { max-width: none; }
  .subnav { display: grid; grid-template-columns: 1fr 1fr; }
  .subnav a { justify-content: center; min-height: 48px; padding: 0 var(--s-2); text-align: center; }
  .subnav a.subnav-back { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (min-width: 761px) {
  .bnav { display: none !important; }
}
@media print {
  .bnav, .subnav { display: none !important; }
}

/* ================================================================== */
/* UX v2 batch 3B: the job page, the desk sheets, More → Safety         */
/* (docs/ux/v2/UX_V2_SPEC.md 4.17, 5.3 K5 to K10; proto desk-job.html). */
/* ================================================================== */

/* ---- the job page (K5) ---- */
.job-page { max-width: 1320px; }
.job-page .job-source { margin: var(--s-3) 0 0; }
.job-page .crumb { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; color: var(--ink); font-weight: var(--w-strong); text-decoration: none; }
.job-page .crumb .ic { width: 22px; height: 22px; }
.job-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.job-h h1 { margin: 4px 0 0; font: 700 2.25rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .005em; }
.job-h .eyebrow { margin: 0; }
.job-h .who { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-2); }
.job-h .who .addr, .job-h .who .hn { color: var(--ink); }
.job-h .who a.tel { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.job-h .who a.tel:hover { text-decoration: underline; }
.job-h .jh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.job-h .jh-chips .when { color: var(--ink-2); font-size: var(--fs-1); }
.money-tiles { display: flex; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface); }
.money-tiles > div { padding: 10px 16px; border-right: 1px solid var(--line); }
.money-tiles > div:last-child { border-right: 0; background: var(--surface-sunk); }
.money-tiles b { display: block; font: 700 var(--fs-3)/1.1 var(--font-mono); letter-spacing: -.02em; color: var(--ink); }
.money-tiles span { font-size: var(--fs-1); color: var(--ink-2); }
.money-line { display: none; margin: 10px 0 0; font-size: var(--fs-2); font-weight: 700; color: var(--ink); }
.money-line b { color: var(--ink); font: 700 var(--fs-2) var(--font-mono); }
.job-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 22px; }
.job-main .blk + .blk { margin-top: 26px; }
.blk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.blk-h h2 { margin: 0; font: 700 var(--fs-3)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); }
.blk-h small { color: var(--ink-2); font-size: var(--fs-1); text-align: right; }
.blk-h .btn-quiet, .blk-h small .btn-quiet { min-height: 44px; font-size: var(--fs-1); }
.job-page .visit { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.job-page .visit + .visit { margin-top: 12px; }
.job-page .visit .d { font: 700 var(--fs-1)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.job-page .visit .d small { display: block; font-size: var(--fs-1); font-weight: 500; color: var(--ink-2); }
.job-page .visit h3 { margin: 0; font: 600 var(--fs-2)/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; }
.job-page .visit p { margin: 4px 0 0; font-size: var(--fs-1); color: var(--ink-2); }
.job-page .visit p b { color: var(--ink); font-weight: 600; }
.job-page .visit .r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.job-page .visit .r .chip-line { display: flex; align-items: center; gap: 4px; }
.job-page .visit .r .btn { min-height: 44px; }
.job-page .visit .r .btn .ic, .rail-foot .btn .ic, .nx .btn .ic { width: 20px; height: 20px; }
.job-page details.rmenu > summary.btn-quiet { min-width: 44px; justify-content: center; text-decoration: none; }
.job-page .rmenu-list button[disabled] { color: var(--ink-3); cursor: not-allowed; }
.job-page .rmenu-list button { flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 6px var(--s-3); }
.job-page .rmenu-list button small { font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; }
.phgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.jp-photo { margin: 0; }
/* The Night veil on photos (spec 3.4, D30): a sunny snow photo is the one slab the tokens can't dim. */
.jp-photo > a { position: relative; display: block; border-radius: 12px; overflow: hidden; }
.jp-photo > a::after { content: ""; position: absolute; inset: 0; background: var(--photo-veil); pointer-events: none; }
.jp-photo img, .jp-photo .ph-stand { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; background: var(--surface-sunk); }
.jp-photo figcaption { margin-top: 4px; font-size: var(--fs-1); color: var(--ink-2); }
.cap-line { margin: 8px 0 0; font-size: var(--fs-1); color: var(--ink-2); }
.job-page .lines { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.job-page .line { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.job-page .line:last-child { border-bottom: 0; }
.job-page .line > .ic { width: 24px; height: 24px; color: var(--ink-2); }
.job-page .line > .ic.tone-ok { color: var(--ok); }
.job-page .line > .ic.tone-attn { color: var(--attn); }
.job-page .line > .ic.tone-stop { color: var(--safety-edge); }
.job-page .line .grow { min-width: 0; }
.job-page .line b { font-weight: 600; color: var(--ink); }
.job-page .line .grow > span { display: block; font-size: var(--fs-1); color: var(--ink-2); }
.job-page .line .pre { white-space: pre-line; }
.job-page .line .amt { font: 700 var(--fs-1) var(--font-mono); white-space: nowrap; }
.job-page .line-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 150px; }
.job-page .line-acts:empty { min-width: 0; }
.job-page .job-record { margin-top: 12px; }
.job-page .line-acts .btn-quiet { min-height: 44px; font-size: var(--fs-1); }
.job-page .empty-line .ic { color: var(--ink-2); }
.job-rail { position: sticky; top: 84px; display: grid; gap: 12px; }
.rail-card { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-3); padding: 16px; }
.rail-card h2 { margin: 0 0 12px; font: 700 var(--fs-2)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); }
.nx { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.nx:first-of-type { border-top: 0; padding-top: 0; }
.nx:last-child { padding-bottom: 0; }
.nx p { margin: 0; font-size: var(--fs-1); color: var(--ink-2); }
.nx p b { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-2); margin-bottom: 2px; }
.nx .btn { width: 100%; min-height: 48px; }
.nx-none { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); }
.nx-none .ic { color: var(--ok); width: 24px; height: 24px; }
.rail-foot { display: flex; gap: 12px; }
.rail-foot .close-job { flex: 1; min-height: 48px; }
.rail-foot .more-menu { margin-left: auto; }
.rail-foot .more-menu:only-child { margin-left: 0; flex: 1; }
.rail-foot .more-menu > summary.btn { min-height: 48px; display: inline-flex; gap: 8px; text-decoration: none; }
.rail-foot .more-menu:only-child > summary.btn { width: 100%; }
.rail-foot .rmenu-list { min-width: 240px; }

@media (max-width: 760px) {
  .job-h { grid-template-columns: 1fr; padding-bottom: 14px; }
  .job-h h1 { font-size: var(--fs-5); }
  .money-tiles { display: none; }
  .money-line { display: block; }
  .job-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 16px; }
  .job-rail { position: static; order: -1; }
  .job-page .visit { grid-template-columns: 1fr; }
  .job-page .visit .r { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .job-page .line-acts { min-width: 0; justify-content: flex-start; }
  .job-h .who a.tel { display: inline-flex; align-items: center; min-height: 44px; }
  .phgrid { grid-template-columns: repeat(2, 1fr); }
  .job-page .line { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .job-page .line .line-acts { grid-column: 2 / -1; flex-wrap: wrap; }
  .job-page .line .line-acts:empty { display: none; }
  .blk-h { margin-left: 2px; margin-right: 2px; }
}

/* ---- desk sheets (spec 4.17): a bottom sheet on the phone, a right panel at 761 px and wider ---- */
dialog.desk-sheet { padding: 0; border: 0; color: var(--ink); background: var(--sheet); overflow: hidden; box-shadow: var(--shadow-2); }
dialog.desk-sheet[open] { display: flex; flex-direction: column; }
dialog.desk-sheet::backdrop { background: var(--scrim); }
dialog.desk-sheet .stub { padding: 8px 20px; overflow-wrap: anywhere; }
dialog.desk-sheet .sheet-head { padding-top: 8px; }
dialog.desk-sheet .sheet-head h2 { margin: 0; font-size: var(--fs-4); overflow-wrap: anywhere; }
dialog.desk-sheet .sheet-head .back .ic { width: 26px; height: 26px; }
dialog.desk-sheet .sheet-head .head-link { min-height: 44px; font-size: var(--fs-1); }
dialog.desk-sheet .sheet-body { flex: 1 1 auto; overflow: auto; padding: 8px 18px 18px; }
dialog.desk-sheet .sheet-body > * + * { margin-top: var(--s-4); }
dialog.desk-sheet .sheet-p { margin-inline: 0; margin-bottom: 0; font-size: var(--fs-2); line-height: 1.4; color: var(--ink); }
dialog.desk-sheet .sheet-body > :first-child { margin-top: 0; }
dialog.desk-sheet .sheet-body > .sheet-p + .sheet-p { margin-top: var(--s-2); }
dialog.desk-sheet .sheet-p.hint { font-size: var(--fs-1); color: var(--ink-2); }
dialog.desk-sheet .sheet-quote { margin: 0; padding: 12px 14px; border-left: 4px solid var(--attn); background: var(--surface); font-size: var(--fs-2); }
dialog.desk-sheet .field { margin-bottom: 0; }
dialog.desk-sheet .when-shown { margin: 6px 0 0; font-weight: var(--w-strong); color: var(--ink); }
dialog.desk-sheet fieldset.sheet-set { margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; border: 0; min-width: 0; }
dialog.desk-sheet fieldset.sheet-set > legend { padding: 0; margin-bottom: 8px; font: 700 var(--fs-2)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink); }
dialog.desk-sheet fieldset.sheet-set > .hint { margin: -2px 0 8px; }
dialog.desk-sheet .sheet-foot { flex: none; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
dialog.desk-sheet .sheet-foot .btn { width: 100%; }
dialog.desk-sheet .sheet-foot .btn.sheet-verb { min-height: 60px; font-size: var(--fs-3); border-color: var(--on-steel-line); background: transparent; color: var(--on-steel); }
dialog.desk-sheet .sheet-foot .btn.sheet-verb.btn-fill { background: var(--action); color: var(--on-action); border-color: var(--action); }
dialog.desk-sheet .sheet-foot .btn.sheet-verb.btn-fill:hover { background: var(--action-press); }
dialog.desk-sheet .sheet-foot .btn .ic { width: 24px; height: 24px; }
dialog.desk-sheet .foot-err { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-left: 4px solid #E8A25A; background: var(--steel-2); color: var(--on-steel); font-size: var(--fs-1); }
dialog.desk-sheet .foot-err[hidden] { display: none; }
@media (min-width: 761px) {
  dialog.desk-sheet { position: fixed; top: 68px; right: 0; bottom: 0; left: auto; margin: 0; width: min(480px, 100vw); max-width: none; height: auto; max-height: none; border-left: 1px solid var(--line); }
  dialog.desk-sheet::backdrop { top: 68px; }
}
@media (max-width: 760px) {
  dialog.desk-sheet { position: fixed; top: auto; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: none; max-height: calc(100dvh - 70px); border-radius: var(--r-4) var(--r-4) 0 0; }
  dialog.desk-sheet::backdrop { top: 60px; }
}
/* Choices in a sheet: option rows (a tick when chosen), people rows with the one box. */
.pick-options .option { width: 100%; min-height: 56px; align-items: center; cursor: pointer; font: inherit; }
.pick-options .option > .box { grid-row: span 2; align-self: center; }
.pick-options .option > .box.radio { border-radius: 50%; }
.pick-options .option b { font-size: var(--fs-2); }
.pick-options .option .sub { grid-column: 2; }
.pick-options .option[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick-options.kind-options, .pick-options.two-up { grid-template-columns: 1fr 1fr; }
.pick-options.judge-choices .option { min-height: 60px; }
.pick-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--tap-row); padding: 8px 14px; background: var(--tile);
  border: 2px solid var(--line-strong); border-radius: var(--r-2); text-align: left; color: var(--ink); font: 500 var(--fs-2)/1.25 var(--font-ui); cursor: pointer; }
.pick-row[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-row b { font-weight: 600; }
.pick-row small { font-size: var(--fs-1); color: var(--ink-2); }
.people-pick { display: grid; gap: var(--gap-stack); }
.lead-seg { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lead-seg button { display: inline-flex; align-items: center; min-height: var(--tap-desk); padding: 0 var(--s-4); border: 2px solid var(--line-strong);
  border-radius: var(--r-2); background: var(--tile); color: var(--ink); font: 600 var(--fs-1) var(--font-ui); cursor: pointer; }
.lead-seg button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* The older small dialogs (Mark paid, Send, Copy link) sit where the sheets do. */
@media (min-width: 761px) {
  .inv-dialog { position: fixed; top: 68px; right: 0; bottom: 0; left: auto; margin: 0; width: min(480px, 100vw); max-width: none; max-height: none; border-radius: 0; border-top: 0; border-left: 1px solid var(--line); overflow: auto; }
}

/* ---- More → Safety (K9) ---- */
.safety-tabs .btn[aria-pressed="true"] { background: var(--surface-sunk); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.safety-page .open-stops { margin-top: var(--s-4); }
.safety-page .need.stop .acts .btn { min-height: 48px; }
.safety-page .need.stop .acts .ic { width: 20px; height: 20px; }
.safety-page .need.stop .note { color: var(--ink); }
.safety-page .need.stop details, .safety-page .need.stop .safety-photos { grid-column: 2 / -1; }
.safety-page .stop-timeline summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: var(--w-strong); }
.safety-page .sec-t { margin-top: var(--s-5); }
.safety-page .stop-kv { margin: var(--s-3) 0; }
.safety-page .safety-export { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.safety-page .range-note { align-self: center; margin: 0 0 10px; }
.chip-rows { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-chip { display: inline-flex; align-items: center; min-height: var(--tap-desk); padding: 0 var(--s-4); border: 2px solid var(--line-strong);
  border-radius: var(--r-2); background: var(--tile); color: var(--ink); font: 600 var(--fs-1) var(--font-ui); cursor: pointer; }
.filter-chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.hazard-row > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 48px; cursor: pointer; list-style: none; }
.hazard-row > summary::-webkit-details-marker { display: none; }
.hazard-row .hz-date { min-height: 44px; display: inline-flex; align-items: center; font-weight: var(--w-strong); color: var(--ink); }
.hazard-row .sum-text { flex: 1 1 220px; color: var(--ink-2); }
.hazard-row .hz-body p { margin: var(--s-2) 0 0; }
.safety-page .hazard-row + .hazard-row { margin-top: var(--s-3); }
@media (max-width: 760px) {
  .safety-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  .safety-tabs .btn { padding: 6px 4px; }
}
@media print {
  .safety-tabs, .safety-export, .chip-rows, .need .acts { display: none !important; }
}

/* ================================================================== */
/* UX v2 batch 7: Money and Settings on one page                       */
/* (docs/ux/v2/UX_V2_SPEC.md 5.3 K8, K11; 3.11; 4.4 one light).        */
/* ================================================================== */

/* ---- Money: each row's one verb, the rest under "…" (opens in place, never clipped) ---- */
.money-list td.actions .inv-actions { min-width: 0; max-width: none; flex-wrap: nowrap; align-items: flex-start; gap: var(--s-2); }
.money-list td.actions .inv-actions > .btn { white-space: nowrap; }
/* The status notes wrap, so the row's verb stays in view at 1366 (a long "Job money" line pushed it off). */
.money-list .inv-status .inv-note { white-space: normal; max-width: 360px; }
details.rmenu.money-menu > summary { border: 2px solid var(--line-strong); background: var(--tile); }
details.rmenu.money-menu[open] > summary { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
details.rmenu.money-menu .rmenu-list { position: static; margin-top: var(--s-2); min-width: 190px; box-shadow: none; }
.contract-actions { display: flex; align-items: flex-start; gap: var(--s-2); }
/* The phone's Money card is one more cell of the row (docCard); wide, the table's columns say it. */
td.doc-card { display: none; }
@media (min-width: 721px) { .money-menu [data-act="call"], .money-menu [data-act="text"] { display: none; } }
@media (max-width: 720px) {
  .card.money-list { padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .money-list table.stack tr { display: flex; flex-direction: column; }
  .money-list table.stack tr[hidden] { display: none; }
  .money-list table.stack tr:has(> td.doc-card) > td:not(.doc-card):not(.actions) { display: none; }   /* Estimate requests have no card: they stack as before */
  .money-list table.stack td.doc-card { display: block; order: -1; padding: 6px 0 0; }
  .money-list table.stack td.actions { display: flex; }
  .doc-card p { margin: 0; }
  .doc-card-head { font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--ink); overflow-wrap: anywhere; }
  .doc-card-state { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px !important; color: var(--ink-2); font-size: var(--fs-1); }
  .doc-card-num { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px !important; color: var(--ink-2); font-size: var(--fs-1); }
  .doc-card .inv-status { margin-top: 4px; }
}
.inv-filter { padding: var(--s-3) var(--s-4) 0; margin: 0; }
.inv-none { margin: var(--s-3) var(--s-4) 0; }
.money-list .inv-filter-wrap + .table-wrap { margin-top: var(--s-3); }
.head-actions { gap: var(--s-3); }
.set-link-line { margin: var(--s-4) 4px 0; color: var(--ink-2); }
.set-link-line a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: var(--w-label); }

/* ---- Settings: one page of cards, an index, a sticky Save per card ---- */
html:has(.settings-page) { scroll-padding-bottom: 96px; }
.settings-page .page-body { display: grid; gap: var(--s-5); align-items: start; }
.set-index { min-width: 0; }
.set-jump { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-2) var(--s-3) var(--s-3); }
.set-jump:not([open]) { padding-bottom: var(--s-2); }
.set-jump > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; cursor: pointer; font-weight: var(--w-label); list-style: none; }
.set-jump > summary::-webkit-details-marker { display: none; }
.set-index-group + .set-index-group { margin-top: var(--s-3); }
.set-index-h { margin: var(--s-2) 0 var(--s-1); font: 700 var(--fs-1)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-2); }
.set-index-group { display: grid; gap: var(--s-2); }
.set-index a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); border-radius: var(--r-1); color: var(--ink); text-decoration: none; font-weight: var(--w-label); }
.set-index a:hover { background: var(--surface-sunk); text-decoration: underline; }
.set-cards { min-width: 0; }
.set-group + .set-group { margin-top: var(--s-6); }
.set-group > .sec-t { margin-left: 4px; }
.set-card { padding-bottom: 0; scroll-margin-top: 76px; }
.set-head { margin-bottom: var(--s-2); }
.set-head .ic { flex: none; width: 26px; height: 26px; color: var(--ink-2); }
.set-title { margin: 0; font-size: var(--fs-3); }
.set-toggle { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.set-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-sum, .set-chev { display: none; }
.set-help p { margin: 0 0 var(--s-2); color: var(--ink-2); font-size: var(--fs-1); }
.set-help p b { color: var(--ink); font-weight: var(--w-label); }
.def-line { margin-top: var(--s-1); }
.check-with-hint .def-line { margin-left: 28px; }
.set-title:focus { outline: none; }
.set-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.set-intro { color: var(--ink-2); margin: 0 0 var(--s-4); }
.set-body > * + * { margin-top: var(--s-3); }
.set-body > .field, .set-body > fieldset { margin-bottom: 0; }
.set-body fieldset > .check-with-hint + .check-with-hint { margin-top: var(--s-3); }
.set-card h4.set-sub { margin: var(--s-4) 0 var(--s-2); font: 700 var(--fs-2)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); }
.set-card .set-fold { margin: var(--s-3) 0 0; }
.set-card .set-fold > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: var(--w-label); color: var(--ink); }
@media (min-width: 1000px) {
  .settings-page .page-body { grid-template-columns: 240px minmax(0, 820px); }
  .set-index { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow: auto; }
  .set-jump > summary { display: none; }
}
/* A card with changes not saved keeps its foot at the bottom of the screen while the card is in
   view, so its Save is never off-screen; a card with nothing to save keeps its foot in place. */
.set-foot { position: static; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3);
  margin: var(--s-4) -18px 0; padding: var(--s-3) 18px; background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius); }
.set-card[data-dirty] > .set-foot { position: sticky; bottom: 0; box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .35); }
.set-foot.plain { position: static; }
.set-card:not(.set-has-foot) > .set-body:last-child { padding-bottom: 18px; }
.set-state { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
.set-state[data-tone="dirty"] { color: var(--ink); font-weight: var(--w-label); }
.set-state[data-tone="ok"] { color: var(--ok); font-weight: var(--w-label); }
.set-state[data-tone="error"] { color: var(--attn); font-weight: var(--w-label); }
.set-save { min-width: 160px; min-height: 48px; }
/* Settings targets: 44 px and 8 px apart (spec 3.10), the service-area chips included. */
.set-card .chip-x { min-width: 44px; min-height: 44px; }
.set-card .chip-list { gap: var(--s-3); margin-top: var(--s-2); }
.set-card .area-group > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.set-card .inline-form .btn, .set-card .hours-row label.check { min-height: 48px; }
.set-card .hours-times { margin-bottom: var(--s-2); }
.set-save .ic { width: 20px; height: 20px; }
.set-save:disabled { background: var(--surface-sunk); border-color: var(--line); color: var(--ink-3); }
.set-card .field-row > .field { margin-bottom: 0; }
.set-rows { display: grid; gap: var(--s-3); }
.set-row { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-sunk); }
.set-row.number-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 var(--s-3); align-items: end; }
.set-row.number-row .btn { margin-bottom: 4px; }
.set-row .row { margin-top: var(--s-2); justify-content: space-between; }
.set-rules { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.set-rules:empty { display: none; }
.set-rule { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 4px var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); }
.set-rule-add { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-2); }
.set-rule-add .label { display: block; font-weight: var(--w-label); margin-bottom: 6px; }
.set-rule-add > .btn { justify-self: start; }
.kind-chips { margin: 0; }
.set-sublist + .set-sublist { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.set-line { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-sunk); }
.set-line-main { margin: 0; font-size: var(--fs-2); }
.set-line .mono { font-family: var(--font-mono); }
.set-techs { display: grid; gap: var(--s-2); }
.set-tech { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.set-tech:last-child { border-bottom: 0; }
.set-tech .grow { flex: 1; min-width: 0; }
.set-tech .mono { font-family: var(--font-mono); }
.set-card .hours-list { margin-bottom: 0; }
@media (max-width: 760px) {
  /* Every card starts closed: a 56 px row, its name and one line of its values. */
  .set-card { margin-bottom: var(--s-2); padding-top: 0; }
  .set-head { margin: 0 calc(-1 * var(--s-1)); }
  .set-toggle { min-height: 56px; padding: 6px var(--s-1); cursor: pointer; }
  .set-name { font-size: var(--fs-2); font-weight: var(--w-strong); }
  .set-sum { display: block; overflow: hidden; color: var(--ink-2); font: var(--w-body-desk) var(--fs-1)/1.3 var(--font-ui); white-space: nowrap; text-overflow: ellipsis; }
  .set-sum:empty { display: none; }
  .set-card[data-dirty] .set-sum { color: var(--ink); font-weight: var(--w-label); }
  .set-head .set-chev { display: block; width: 20px; height: 20px; transition: transform .15s ease; }
  .set-card[data-open] .set-chev { transform: rotate(180deg); }
  .set-card:not([data-open]) > :not(.set-head) { display: none; }
  .set-card[data-dirty] > .set-foot { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .set-save { flex: 1 1 100%; min-height: 48px; }
  .set-row.number-row { grid-template-columns: 1fr; }
  .money-list td.actions .inv-actions { flex-wrap: wrap; }
  details.rmenu.money-menu > summary { width: 48px; height: 48px; }
  html:has(.settings-page) { scroll-padding-bottom: 220px; }
}
/* ---- Receptionist setup (a hidden card; docs/RECEPTIONIST_SETUP_SPEC.md) ---- */
.rs-sec > .set-sub:first-child { margin-top: 0; }
.rs-sec > * + * { margin-top: var(--s-3); }
.set-body > .rs-sec + .rs-sec { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.rs-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.rs-source { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-sunk); }
.rs-source > .ic { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.rs-source .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rs-source b { overflow-wrap: anywhere; }
.rs-meta { color: var(--ink-2); font-size: var(--fs-1); }
.rs-add { display: grid; gap: var(--s-3); }
.rs-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-3); align-items: start; }
.rs-url > .field { margin-bottom: 0; }
.rs-url > .btn { margin-top: 30px; min-height: 48px; }
.rs-or { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.rs-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.rs-file:focus-visible + .rs-pdf { outline: 3px solid var(--focus); outline-offset: 2px; }
.rs-pdf { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; cursor: pointer; }
.rs-pdf .ic, .rs-sec .btn .ic { width: 20px; height: 20px; }
.rs-paste > summary { min-height: 48px; }
.rs-paste[open] > .btn { margin-top: var(--s-1); }
.rs-note { margin: 0; color: var(--ink-2); }
.rs-note.error { color: var(--attn); font-weight: var(--w-label); }
.rs-build-row { gap: var(--s-3); }
.rs-build-row .btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; }
.rs-build-row .btn-quiet { min-height: 44px; }
.rs-questions .field { margin-bottom: var(--s-3); }
.rs-h { margin: var(--s-5) 0 0; font: 700 var(--fs-1)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-2); }
/* Text boxes grow with what's in them (where the browser can), so a drafted brief is never cut off. */
.rs-card textarea { field-sizing: content; min-height: calc(1lh + 26px); max-height: 20lh; }
.rs-card textarea[rows="2"] { min-height: calc(2lh + 26px); }
.rs-card textarea[rows="3"], .rs-card textarea[rows="5"] { min-height: calc(3lh + 26px); }
/* Service and question rows: Remove sits beside the first line, not on a line of its own. */
.rs-svc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: 0 var(--s-3); align-items: end; }
.rs-svc > .field:last-child { grid-column: 1 / -1; }
.rs-faq { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-3); align-items: end; }
.rs-faq > .field:last-child { grid-column: 1 / -1; }
.rs-svc .field, .rs-faq .field { margin-bottom: var(--s-2); }
.rs-svc > .field:last-child, .rs-faq > .field:last-child { margin-bottom: 0; }
.rs-x { margin-bottom: var(--s-2); min-height: 44px; }
.rs-greet strong { font-weight: var(--w-label); }
.rs-hear { margin: 0; padding: var(--s-3); border-left: 4px solid var(--ink); border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--surface-sunk); }
.rs-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.rs-voice { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 2px solid var(--line-strong); border-radius: var(--r-2); background: var(--tile); }
.rs-voice.selected { border-color: var(--ink); background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--ink); }
.rs-voice-pick { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--s-3); min-height: 48px; margin: 0; cursor: pointer; font-weight: 400; }
.rs-voice-pick input { margin-top: 3px; }
.rs-play { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.rs-live { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-sunk); }
.rs-live > .ic { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.rs-live .grow { display: grid; gap: 2px; }
.rs-live.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.rs-live.ok > .ic { color: var(--ok); }
.rs-live.warn { background: var(--attn-tint); border-color: var(--attn); }
.rs-live-acts .btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; }
@media (max-width: 760px) {
  .rs-url { grid-template-columns: 1fr; }
  .rs-url > .btn { margin-top: var(--s-2); justify-self: start; }
  .rs-voices { grid-template-columns: 1fr; }
  .rs-svc { grid-template-columns: minmax(0, 1fr) auto; }
  .rs-svc > .field:first-child { grid-column: 1 / -1; }
}
@media print {
  .set-index, .set-foot { display: none !important; }
}

/* ---- The walk-through on the visit page (docs/VIDEO_WALKTHROUGH_v1.md §4): the clip picker, the state
   line, a gapless player (two <video> elements stacked; the one playing is .is-on), the seek bar, the
   transcript (the line being said is lit; another voice is grey with no words) and the stills strip. ---- */
.walkthrough .wt-body { display: grid; gap: var(--s-3); }
.walkthrough .wt-slot { display: contents; }
.wt-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; font-weight: var(--w-label); color: var(--ink); }
.wt-note .link-btn { min-height: 44px; }
.wt-clips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wt-clips .btn[aria-pressed="true"] { background: var(--surface-sunk); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wt-state { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-weight: var(--w-label); color: var(--ink); }
.wt-state .ic { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.wt-player { display: grid; gap: var(--s-2); max-width: 880px; }
.wt-stage { position: relative; width: 100%; max-height: 56vh; aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; background: #000; cursor: pointer; }
.wt-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; visibility: hidden; }
.wt-video.is-on { visibility: visible; }
.wt-controls { display: flex; align-items: center; gap: var(--s-3); }
.wt-play { min-width: 88px; }
.wt-seek { flex: 1; min-width: 0; height: 44px; accent-color: var(--ink); }
.wt-time { flex: none; font: var(--w-label) var(--fs-1)/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.wt-wait { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-2); color: var(--ink-2); }
.wt-wait .ic { width: 22px; height: 22px; }
.wt-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); max-width: 880px; }
.wt-tools .grow { flex: 1; }
.wt-here { display: inline-flex; align-items: center; gap: var(--s-2); }
.wt-here .ic { width: 20px; height: 20px; }
.wt-transcript { max-width: 880px; }
.wt-h { margin: var(--s-2) 0 var(--s-2); font: var(--w-strong) var(--fs-1)/1.2 var(--font-ui); color: var(--ink); }
.wt-lines { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.wt-line + .wt-line { border-top: 1px solid var(--line); }
.wt-line-btn { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
  border: 0; background: none; color: var(--ink); font: 400 var(--fs-1)/1.4 var(--font-ui); text-align: left; cursor: pointer; }
.wt-line-btn:hover { background: var(--surface-sunk); }
.wt-at { color: var(--ink-2); font-family: var(--font-mono); }
.wt-line.is-other .wt-words { color: var(--ink-2); font-style: italic; }
.wt-line.is-now .wt-line-btn { background: var(--surface-sunk); box-shadow: inset 4px 0 0 var(--ink); font-weight: var(--w-label); }
.wt-stills { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); }
.wt-still { margin: 0; display: grid; gap: var(--s-1); align-content: start; }
.wt-still-img { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--surface-sunk); cursor: pointer; }
.wt-still-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wt-still-img .ph-icon { display: grid; place-items: center; height: 100%; color: var(--ink-2); }
.wt-still.is-suggested .wt-still-img img { filter: grayscale(1); opacity: .62; }
.wt-still.is-dropped .wt-still-img img { filter: grayscale(1); opacity: .35; }
.wt-still figcaption { display: grid; gap: 2px; font-size: var(--fs-1); }
.wt-still-at { color: var(--ink-2); }
.wt-still-cap { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wt-still.is-suggested .wt-still-cap, .wt-still.is-dropped .wt-still-cap { color: var(--ink-2); }
.wt-kept { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: var(--w-label); }
.wt-kept .ic { width: 18px; height: 18px; }
.wt-still-acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-1); }
:root[data-theme="night"] .wt-still.is-kept .wt-still-img img { filter: brightness(.88); }
@media (max-width: 760px) {
  .wt-stage { aspect-ratio: 4 / 3; }
  .wt-controls { flex-wrap: wrap; row-gap: var(--s-1); }
  .wt-seek { flex: 1 1 100%; order: -1; }
  .wt-time { margin-left: auto; }
  .wt-stills { grid-auto-columns: 140px; }
}

/* Settings, Photo steps (2026-10-25): one row per step, the shop's own last. */
.photo-steps-card .step-block + .step-block { margin-top: var(--s-4); }
.photo-steps-card h4 { margin: 0 0 var(--s-2); font-size: var(--fs-2); }
.step-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-3); }
.step-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2) var(--s-3);
  padding: 2px var(--s-2) 2px var(--s-3); }
.step-row + .step-row { border-top: 1px solid var(--line); }
.step-row.is-off .step-on span { color: var(--ink-2); text-decoration: line-through; }
.step-row .step-on span { overflow-wrap: anywhere; }
.step-row .step-req { font-size: var(--fs-1); min-width: 6.5rem; }
.step-move { display: inline-grid; grid-template-columns: repeat(3, 40px); gap: 2px; }   /* the × slot is kept on every row */
.step-move .btn-quiet { min-width: 40px; min-height: 40px; padding: 0; justify-content: center; font-size: var(--fs-2); text-decoration: none; }
.step-move .step-remove .ic { width: 18px; height: 18px; }
.step-move .btn-quiet[disabled] { opacity: .35; }
.step-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.step-add-h { font-weight: var(--w-label); color: var(--ink); }
.step-add input[type="text"] { flex: 1 1 12rem; min-width: 0; }
@media (max-width: 560px) {
  .step-row { grid-template-columns: minmax(0, 1fr) auto; }
  .step-row .step-req { grid-column: 1; min-width: 0; }
  .step-move { grid-column: 2; grid-row: 1 / span 2; }
}