:root {
  --bg: #0b1f33;
  --bg2: #122a42;
  --card: #183552;
  --accent: #2ab4e8;
  --accent2: #1a8fb8;
  --ok: #3dce7a;
  --warn: #f0b429;
  --danger: #e85d5d;
  --text: #eef5fb;
  --muted: #9bb0c4;
  --border: #2a4a68;
  --tap: 52px;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px;
  min-height: 100%;
}
body { padding-bottom: 88px; }
button, input, select, textarea {
  font: inherit; color: inherit;
}
a { color: var(--accent); }

.app-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
}
.app-header h1 { font-size: 1.05rem; margin: 0; flex: 1; }
.badge {
  font-size: 0.7rem; padding: 4px 8px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted);
}
.badge.online { color: var(--ok); border-color: var(--ok); }
.badge.offline { color: var(--warn); border-color: var(--warn); }
/* v104 (2026-10-27): weak-signal states + queued/sending pill */
.badge.weak { color: var(--warn); border-color: var(--warn); border-style: dashed; }
.badge.checking { color: var(--muted); border-color: var(--border); }
.badge.sync-pill { color: var(--warn); border-color: var(--warn); white-space: nowrap; }
.badge.sync-pill.sending { color: var(--accent, var(--warn)); }
.badge.hidden { display: none; }

.screen { display: none; padding: 16px; max-width: 640px; margin: 0 auto; }
.screen.active { display: block; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
.card h2, .card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.muted { color: var(--muted); font-size: 0.9rem; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }

label.field {
  display: block; margin: 12px 0 6px; font-size: 0.85rem; color: var(--muted);
}
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; outline: none;
}
textarea {
  min-height: 96px;
  resize: none;
  overflow-y: hidden;
  field-sizing: content; /* progressive; JS autosize is the reliable path */
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

.btn {
  min-height: var(--tap); padding: 12px 18px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #042033; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #062214; }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #2a1c00; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #2a0808; }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; margin: 8px 0; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.mode-grid { display: grid; gap: 12px; }
.mode-btn {
  min-height: 88px; text-align: left; padding: 18px;
  background: linear-gradient(135deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--text);
}
.mode-btn small { display: block; font-weight: 400; color: var(--muted); margin-top: 6px; font-size: 0.85rem; }

/* Home: Job/Walkthrough + churn tickets — mutually exclusive for a visit */
.visit-ticket-group {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.visit-ticket-group .choose-one-note {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.visit-ticket-group .mode-grid { gap: 10px; }
/* 2026-10-30 (v106): small-writing title "Work tickets & Time entries" on the white box */
.visit-ticket-group .choose-one-note.home-box-title-small {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
/* v96: slim home tiles (Job / Walkthrough, Diesel/Electric work ticket, Timesheet Entry) — no subtitle */
.mode-btn.mode-btn-slim {
  min-height: 56px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  line-height: 1.2;
}
.mode-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mode-pair .mode-btn.mode-btn-slim {
  min-width: 0;
  padding: 10px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-list { list-style: none; padding: 0; margin: 0; }
.job-list li {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center;
}
.job-list li .meta { flex: 1; min-width: 0; }
.job-list li .title { font-weight: 600; }
.job-list li .draft-addr-line {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-list li .draft-secondary {
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Photo-note stack: heading → entries → + button always last */
[data-ordered-notes] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-ordered-notes] > h3 {
  order: 0;
  margin: 0;
}
[data-ordered-notes] > [data-entries] {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-ordered-notes] > [data-act="add-both"] {
  order: 2;
  flex-shrink: 0;
}
[data-ordered-notes] .walk-item {
  margin: 0;
}
.status-pill {
  font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border);
}
.status-pill.draft { color: var(--muted); }
.status-pill.queued { color: var(--warn); border-color: var(--warn); }
.status-pill.synced { color: var(--ok); border-color: var(--ok); }

/* v93: non-timesheet draft cards — corner status tag, 2–3 info lines, compact equal Open/Del */
.job-list li.draft-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "addr addr" "info actions";
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
  position: relative;
  padding: 8px 10px 8px 12px;
}
.job-list li.draft-card.st-synced,
.job-list li.draft-ts-tile.st-synced {
  border-color: var(--ok);
  box-shadow: inset 0 0 0 1px rgba(61, 206, 122, 0.35);
}
.job-list li.draft-ts-tile.st-queued,
.job-list li.draft-card.st-queued { border-color: rgba(240, 180, 41, 0.55); }
.job-list li.draft-card .draft-card-addr {
  grid-area: addr;
  padding-right: 58px; /* room for the corner tag */
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-list li.draft-card .draft-corner-tag,
.job-list li.draft-ts-tile .draft-corner-tag {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.job-list li.draft-card .draft-corner-tag.synced,
.job-list li.draft-ts-tile .draft-corner-tag.synced { color: var(--ok); border-color: var(--ok); background: rgba(61, 206, 122, 0.12); }
.job-list li.draft-card .draft-corner-tag.queued,
.job-list li.draft-ts-tile .draft-corner-tag.queued { color: #2a1c00; border-color: var(--warn); background: var(--warn); }
.job-list li.draft-card .draft-card-info {
  grid-area: info;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.3;
}
.job-list li.draft-card .draft-card-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-list li.draft-card .draft-card-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  align-self: end;
}
/* Open and Del identical: smaller than the old 52px Delete, still ≥32px tap height */
.job-list li.draft-card .btn.btn-card,
.job-list li.draft-ts-tile .btn.btn-card {
  min-height: 32px;
  height: 32px;
  width: 52px;
  padding: 0 6px;
  font-size: 0.8rem;
  border-radius: 8px;
}

/* v95: Refresh jobs + Sync now side by side, ~half width each, 8px gap, 40px tall */
.drafts-top-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0 8px;
}
.drafts-top-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 0 10px;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Compact timesheet tiles (~1/3 row height) — stacked Mon→Sun at bottom of drafts */
.job-list li.draft-ts-section-label {
  background: transparent;
  border: none;
  padding: 8px 4px 2px;
  margin: 10px 0 0;
  font-size: 0.75rem;
  display: block;
}
.job-list li.draft-ts-tile {
  padding: 4px 8px;
  margin-bottom: 4px;
  min-height: 0;
  gap: 6px;
  border-radius: 8px;
}
.job-list li.draft-ts-tile .ts-tile-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap; /* v94: never wrap; the job part is what truncates */
  overflow: hidden;
  white-space: nowrap;
}
.job-list li.draft-ts-tile .ts-tile-label {
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* v94: Open uses .btn-card (52x32, same as v93 Open/Del); inline status pill removed */
.job-list li.draft-ts-tile .btn-ts-open { flex: none; }
/* v94: timesheet tiles — v93 corner tag + outline; job # after the day/hours/pay label */
.job-list li.draft-ts-tile {
  position: relative;
  margin-bottom: 10px; /* room for the corner tag riding the top edge */
}
.job-list li.draft-ts-tile .ts-tile-label { flex: none; }
.job-list li.draft-ts-tile .ts-tile-job {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: -2px; /* reads as "M 8 RT · J-…" */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.job-list li.draft-ts-tile .ts-unsynced-flag,
.job-list li.draft-ts-tile .ts-awaiting-sf { flex: none; }
/* Tile is one short row, so the tag sits on the top-right edge (opaque so the border doesn't show through) */
.job-list li.draft-ts-tile .draft-corner-tag {
  top: -7px;
  right: 8px;
  background: var(--card);
  z-index: 1;
}
.job-list li.draft-ts-tile .draft-corner-tag.synced { background: #1a4a4d; }
.job-list li.draft-ts-tile .draft-corner-tag.queued { background: var(--warn); }
.job-list li.draft-ts-tile.ts-flagged {
  border-color: #c9a227;
  box-shadow: inset 3px 0 0 #e6b800;
}
.ts-unsynced-flag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #042033;
  background: #e6b800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
/* v91: office-synced, not yet confirmed in Salesforce (stays on phone) */
.ts-awaiting-sf {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #9fb3c8;
  border: 1px solid #4a6178;
  padding: 0 5px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.steps { counter-reset: step; }
.step {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
}
.step-title {
  font-weight: 700; margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline;
}
.step-title::before {
  counter-increment: step; content: counter(step);
  background: var(--accent); color: #042033; width: 26px; height: 26px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0;
}
.yn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.yn label {
  min-height: var(--tap); display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 2px solid var(--border); border-radius: 10px;
  font-weight: 700; cursor: pointer;
}
.yn input { display: none; }
.yn input:checked + span,
.yn label:has(input:checked) { border-color: var(--accent); background: #1a4a66; }

.photo-box {
  border: 2px dashed var(--border); border-radius: 10px; padding: 12px; text-align: center;
  background: var(--bg2); min-height: 80px;
}
.photo-box img {
  max-width: 100%; max-height: 220px; border-radius: 8px; display: block; margin: 8px auto 0;
}
.photo-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px;
  position: sticky; bottom: 80px; z-index: 6;
  background: var(--bg2); padding: 8px 4px 4px; border-radius: 8px;
}
.photo-cap-hint { margin-top: 6px; text-align: center; }
.walk-photo-actions { position: static; background: transparent; padding: 0; }
.walk-photo-actions .btn { flex: 1 1 auto; }

.calc-box {
  background: #0e2f1f; border: 1px solid var(--ok); border-radius: 10px;
  padding: 12px; margin-top: 10px;
}
.calc-box.warn {
  background: #3a2a08; border-color: var(--warn);
}
.calc-box .big { font-size: 1.4rem; font-weight: 800; }

.pair-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.pair-tab {
  min-height: 40px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg2); white-space: nowrap;
}
.pair-tab.active { border-color: var(--accent); background: #1a4a66; }

.walk-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin-bottom: 10px;
}
.walk-item .ord { color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.walk-item img { max-width: 100%; border-radius: 8px; margin-top: 8px; }

.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(11,31,51,0.95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); padding: 10px 12px;
  display: flex; gap: 8px; max-width: 640px; margin: 0 auto;
}
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: #1e3a56; border: 1px solid var(--accent); color: var(--text);
  padding: 10px 16px; border-radius: 999px; z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; }
.hidden { display: none !important; }
.err { color: var(--danger); font-size: 0.85rem; margin-top: 6px; }
.req::after { content: " *"; color: var(--danger); }

.photo-thumbs {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px;
}
.photo-thumbs img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); max-height: none; margin: 0;
}

/* In-app camera sheet — keep Cancel / Done / shutter on-screen (iPhone Safari) */
body.cam-open {
  overflow: hidden;
  /* Prevent iOS rubber-band revealing page under overlay */
  position: fixed;
  width: 100%;
  height: 100%;
}
body.cam-open .bottom-bar,
body.cam-open .app-header {
  visibility: hidden;
  pointer-events: none;
}
.cam-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: flex; flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  /* Sit above bottom bar / Safari chrome */
  padding: 0;
}
.cam-sheet {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 0; /* allow stage to shrink so controls stay visible */
  max-width: 720px; width: 100%; margin: 0 auto;
  padding-top: max(env(safe-area-inset-top, 0px), 4px);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
  overflow: hidden;
}
.cam-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: rgba(0,0,0,0.92);
  z-index: 2;
}
.cam-title { flex: 1; text-align: center; font-weight: 700; font-size: 0.95rem; }
.cam-cancel, .cam-done { min-width: 76px; flex-shrink: 0; }
.cam-stage {
  flex: 1 1 auto;
  position: relative; background: #111;
  display: flex; align-items: center; justify-content: center;
  /* Critical: do NOT force min-height that pushes shutter off short iPhone viewports */
  min-height: 0;
  overflow: hidden;
}
.cam-video {
  width: 100%; height: 100%; object-fit: cover;
  background: #000;
}
.cam-loading, .cam-error {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding: 24px; text-align: center;
  background: rgba(0,0,0,0.7); color: var(--text); font-weight: 600;
}
.cam-error { color: var(--warn); }
.cam-strip {
  flex: 0 0 auto;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px;
  min-height: 72px; background: #0a0a0a; border-top: 1px solid #222;
}
.cam-thumb {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px;
  padding: 0; border: 2px solid var(--accent); border-radius: 8px;
  background: #222; overflow: hidden; cursor: pointer;
}
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-thumb-x {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 14px; line-height: 20px; text-align: center;
}
.cam-controls {
  flex: 0 0 auto;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.95);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 2;
}
.cam-shutter {
  flex-shrink: 0;
  width: 74px; height: 74px; border-radius: 50%;
  border: 4px solid #fff; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(42,180,232,0.35);
  cursor: pointer;
}
.cam-shutter:active { transform: scale(0.94); }
.cam-shutter:disabled { opacity: 0.35; cursor: not-allowed; }
.cam-hint { font-size: 0.85rem; text-align: center; }
.cam-fallback { width: 100%; max-width: 360px; text-align: center; }
.cam-fallback-msg { color: var(--muted); font-size: 0.85rem; margin: 0 0 10px; }
.cam-overlay.cam-flash .cam-stage::after {
  content: ""; position: absolute; inset: 0; background: #fff; opacity: 0.55;
  pointer-events: none;
}

/* Short landscape / small Safari viewport: shrink shutter slightly so chrome fits */
@media (max-height: 520px) {
  .cam-shutter { width: 58px; height: 58px; }
  .cam-strip { min-height: 56px; padding: 6px 10px; }
  .cam-strip .cam-thumb { width: 48px; height: 48px; }
  .cam-controls { padding-top: 8px; gap: 6px; }
}


/* C-NC picklist (Complete / Not complete / N/A) */
.cnc {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.cnc label {
  min-height: var(--tap); display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 2px solid var(--border); border-radius: 10px;
  font-weight: 700; cursor: pointer; font-size: 0.85rem; text-align: center; padding: 6px;
}
.cnc input { display: none; }
.cnc label:has(input:checked) { border-color: var(--accent); background: #1a4a66; }
.jobs-today-meta { margin: 4px 0 8px; font-size: 0.8rem; }
.diesel-field .step-title { margin-bottom: 4px; }

/* Work ticket + shared signature (all job modes) */
.signature-card .sig-pad-wrap {
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
}
.sig-pad {
  display: block;
  width: 100%;
  height: 160px;
  touch-action: none;
  cursor: crosshair;
  background: #fff;
  border-radius: 8px;
}
.sig-status { margin-top: 8px; font-size: 0.85rem; }
.sig-pad-block { position: relative; margin-top: 4px; }
.sig-pad-head { display: flex; justify-content: flex-end; align-items: center; margin: 0 2px 4px 0; min-height: 14px; }
.sig-clear-link {
  display: inline; margin: 0; padding: 0; border: none; background: none;
  color: #8a9aac; font-size: 11px; font-weight: 400; line-height: 1.2;
  letter-spacing: 0.01em; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; min-height: 0; height: auto; width: auto;
}
.sig-clear-link:hover { color: var(--muted); }

/* Diesel annual PM v2 — continuous scroll, sticky section headers, grouped items */
.diesel-intro .diesel-jump a { color: var(--accent); text-decoration: none; }
.diesel-intro .diesel-jump a:active { opacity: 0.7; }
.diesel-section { margin-bottom: 8px; }
.diesel-section-sticky {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: 10px 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.diesel-section-sticky h2 {
  margin: 0; font-size: 0.95rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted); font-weight: 800;
}
.diesel-step { margin-bottom: 12px; }
.diesel-step .step-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.diesel-step .step-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #041018; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.diesel-step .step-title { margin: 0; font-size: 1.05rem; }
.diesel-hint { margin: 0 0 10px; font-size: 0.85rem; }
.diesel-group-list {
  display: flex; flex-direction: column; gap: 8px;
  margin: 10px 0; padding: 8px; background: var(--bg2); border-radius: 10px;
}
.diesel-item { display: flex; flex-direction: column; gap: 6px; }
.diesel-item-label { font-size: 0.9rem; font-weight: 600; }
.cnc-mini { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cnc-mini label { min-height: 40px; font-size: 0.78rem; padding: 4px; }
.diesel-values { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.diesel-extras { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.diesel-extra-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.diesel-note-panel.hidden, .diesel-photo-panel.hidden { display: none; }

/* Equipment nameplate blocks — photo first, optional model/serial under */
.nameplate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
}
.nameplate-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.nameplate-title {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 700;
}
.nameplate-pref { font-weight: 500; font-size: 0.8rem; }
.nameplate-manual {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.nameplate-or {
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.nameplate-optional { font-size: 0.8rem; }
.nameplate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-items: end;
}
.nameplate-fields .field { margin: 0; }
.nameplate-fields input {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}
@media (max-width: 420px) {
  .nameplate-fields { grid-template-columns: 1fr; }
}

/* ── Sync / upload overlay (wrench + toolbox) ───────────────── */
.sync-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(11, 31, 51, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.sync-overlay.hidden { display: none !important; }
.sync-overlay-inner {
  max-width: 320px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sync-art {
  width: 160px;
  height: 140px;
  display: none;
  align-items: center;
  justify-content: center;
}
.sync-overlay[data-mode="uploading"] .sync-art-wrench,
.sync-overlay[data-mode="closing"] .sync-art-toolbox,
.sync-overlay[data-mode="complete"] .sync-art-toolbox,
.sync-overlay[data-mode="queued"] .sync-art-queue,
.sync-overlay[data-mode="failed"] .sync-art-queue {
  display: flex;
}
.sync-art svg { width: 140px; height: 120px; overflow: visible; }
.sync-msg {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.sync-detail {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.4;
}
.sync-detail:empty { display: none; }
.sync-overlay .sync-dismiss {
  margin-top: 8px;
  min-width: 160px;
  display: none;
}
.sync-overlay[data-mode="complete"] .sync-dismiss,
.sync-overlay[data-mode="queued"] .sync-dismiss,
.sync-overlay[data-mode="failed"] .sync-dismiss {
  display: inline-flex;
}
body.sync-busy .bottom-bar {
  pointer-events: none;
  opacity: 0.4;
}
body.sync-busy {
  overflow: hidden;
}

/* Wrench turning nut (upload in progress) */
.wrench-pivot,
.nut-turn {
  transform-box: view-box;
  transform-origin: 70px 62px;
}
.wrench-pivot {
  animation: wrench-turn 1.15s ease-in-out infinite;
}
.nut-turn {
  animation: nut-turn 2.8s linear infinite;
}
@keyframes wrench-turn {
  0%   { transform: rotate(-38deg); }
  45%  { transform: rotate(48deg); }
  55%  { transform: rotate(48deg); }
  100% { transform: rotate(-38deg); }
}
@keyframes nut-turn {
  /* Slow continuous tighten while wrench strokes */
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Toolbox lid close (~0.75s) on sync success, then complete state */
.toolbox-lid {
  transform-box: view-box;
  transform-origin: 70px 58px;
}
.sync-overlay[data-mode="closing"] .toolbox-lid {
  animation: toolbox-lid-close 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.sync-overlay[data-mode="complete"] .toolbox-lid {
  transform: rotate(0deg);
}
@keyframes toolbox-lid-close {
  from { transform: rotate(-108deg); }
  to { transform: rotate(0deg); }
}
.toolbox-interior {
  opacity: 1;
}
.sync-overlay[data-mode="complete"] .toolbox-interior {
  opacity: 0;
}
.toolbox-latch {
  opacity: 0.25;
}
.sync-overlay[data-mode="complete"] .toolbox-latch {
  opacity: 1;
  animation: latch-glow 1.6s ease-in-out infinite;
}
.toolbox-check {
  opacity: 0;
}
.sync-overlay[data-mode="complete"] .toolbox-check {
  opacity: 1;
  animation: toolbox-check-in 0.28s ease-out;
}
@keyframes toolbox-check-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes latch-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .wrench-pivot,
  .nut-turn {
    animation: none;
  }
  .sync-overlay[data-mode="closing"] .toolbox-lid {
    animation: none;
    transform: rotate(0deg);
  }
}

/* ── Printable PDF viewer (Close + Share) ───────────────────── */
.printable-overlay {
  position: fixed;
  inset: 0;
  z-index: 280;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.printable-overlay.hidden { display: none !important; }
.printable-chrome {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.printable-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.printable-chrome .btn {
  min-height: 44px;
  padding: 10px 14px;
  flex-shrink: 0;
}
.printable-status {
  margin: 0;
  padding: 6px 12px 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}
.printable-status:empty { display: none; padding: 0; min-height: 0; }
.printable-frame-wrap {
  flex: 1;
  min-height: 0;
  margin: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.printable-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.printable-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 100%;
  box-sizing: border-box;
  background: #4a4a4a;
}
.printable-pages[hidden] { display: none !important; }
.printable-page {
  width: 100%;
  max-width: 860px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.printable-page canvas,
.printable-page img {
  display: block;
  width: 100% !important;
  height: auto !important;
}
.printable-fallback {
  margin: 0 12px 10px;
  font-size: 0.85rem;
  text-align: center;
}
body.printable-open {
  overflow: hidden;
}
body.printable-open .bottom-bar {
  pointer-events: none;
  opacity: 0.35;
}


/* ── Printable sheets dropdown (Home) ───────────────────────── */
.printable-menu-card {
  margin: 0;
}
.printable-select {
  width: 100%;
  min-height: var(--tap);
  margin-bottom: 8px;
}
.printable-html-links a { word-break: break-word; }
/* v96: workflow fine print removed; tighter spacing (controls/links unchanged) */
.printable-menu-card h3 { margin: 0 0 4px !important; }
.printable-menu-card label.field { margin-top: 0; margin-bottom: 4px; }
.printable-menu-card .printable-select { margin-bottom: 0; }
.printable-menu-card #btn-open-printable { margin: 8px 0 6px; }
.printable-menu-card .printable-html-links { margin: 0; line-height: 1.35; }

/* Flow test point grid */
.flow-point-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
@media (min-width: 480px) {
  .flow-point-grid { grid-template-columns: repeat(4, 1fr); }
}
.req-star { color: var(--danger); }
label.field.req::after { content: " *"; color: var(--danger); }


/* Churn form — collapsible Equipment / nameplates / static suction */
details.nameplate-block.nameplate-collapse {
  padding: 0;
}
details.nameplate-block.nameplate-collapse > summary.nameplate-title {
  list-style: none;
  cursor: pointer;
  padding: 12px;
  margin: 0;
  user-select: none;
}
details.nameplate-block.nameplate-collapse > summary.nameplate-title::-webkit-details-marker { display: none; }
details.nameplate-block.nameplate-collapse > summary.nameplate-title::before {
  content: '▸ ';
  color: var(--accent);
}
details.nameplate-block.nameplate-collapse[open] > summary.nameplate-title::before { content: '▾ '; }
details.nameplate-block.nameplate-collapse .nameplate-collapse-body {
  padding: 0 12px 12px;
}
details.nameplate-block.nameplate-collapse .nameplate-collapse-body > :first-child { margin-top: 0; }

.diesel-section-collapse {
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
}
.diesel-section-collapse > summary.diesel-section-sticky {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.diesel-section-collapse > summary.diesel-section-sticky::-webkit-details-marker { display: none; }
.diesel-section-collapse > summary.diesel-section-sticky h2::before {
  content: '▸ ';
  color: var(--accent);
  font-weight: 700;
}
.diesel-section-collapse[open] > summary.diesel-section-sticky h2::before { content: '▾ '; }
.diesel-section-collapse > .diesel-collapse-body {
  padding-top: 4px;
}

details.diesel-step-collapse {
  padding-top: 0;
}
details.diesel-step-collapse > summary.diesel-step-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 12px 14px 8px;
  margin: 0 -2px;
}
details.diesel-step-collapse > summary.diesel-step-summary::-webkit-details-marker { display: none; }
details.diesel-step-collapse > summary.diesel-step-summary .step-title::before {
  content: '▸ ';
  color: var(--accent);
}
details.diesel-step-collapse[open] > summary.diesel-step-summary .step-title::before { content: '▾ '; }
details.diesel-step-collapse > .diesel-collapse-body {
  padding: 0 14px 14px;
}
details.diesel-step-collapse > .diesel-collapse-body > :first-child { margin-top: 0; }

/* Flow test — quiet collapsed backup sections */
.ft-collapse {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
  margin: 10px 0;
  padding: 0;
}
.ft-collapse > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.95rem;
  user-select: none;
}
.ft-collapse > summary::-webkit-details-marker { display: none; }
.ft-collapse > summary::before {
  content: '▸ ';
  color: var(--accent);
}
.ft-collapse[open] > summary::before { content: '▾ '; }
.ft-collapse .ft-collapse-body {
  padding: 0 14px 14px;
}
.ft-collapse .ft-collapse-body > :first-child { margin-top: 0; }
.ft-ops-backup h3 { color: var(--muted); font-weight: 600; }


/* Launch PIN gate */
#screen-pin.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 72px);
}
#screen-pin .pin-gate-card {
  width: 100%;
  max-width: 360px;
}
#screen-pin .pin-gate-card h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.app-header .unlocked-tech {
  font-size: 0.85rem;
  margin-left: auto;
  margin-right: 8px;
}
.app-header .unlocked-tech.hidden { display: none; }
.app-header .btn-lock {
  font-size: 0.8rem;
  padding: 4px 10px;
  margin-right: 8px;
  flex-shrink: 0;
}
.app-header .btn-lock.hidden { display: none; }

.timesheet-tech-ro {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #132a40;
  border: 1px solid #2a4a68;
  font-weight: 600;
  color: #e8f1f8;
}

.pin-lockout {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #3a1a1a;
  border: 1px solid #8a3030;
  color: #ffd0d0;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}
.pin-unlock input:disabled,
.pin-unlock button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* iPhone-style PIN keypad */
.pin-keypad-unlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
}
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  min-height: 18px;
  margin: 8px 0 4px;
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
}
.pin-status {
  text-align: center;
  font-size: 0.9rem;
  min-height: 1.3em;
}
.pin-keypad-unlock .err {
  text-align: center;
  width: 100%;
}
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin: 8px auto 0;
  user-select: none;
  -webkit-user-select: none;
}
.pin-key {
  appearance: none;
  -webkit-appearance: none;
  height: 64px;
  min-height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 1.55rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.1s ease, transform 0.08s ease;
}
.pin-key:active:not(:disabled) {
  background: #1a4a66;
  transform: scale(0.96);
}
.pin-key-action {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--muted);
}
.pin-key:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#screen-pin .pin-gate-card {
  max-width: 340px;
}


.unlocked-tech {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.lock-tech-btn,
.btn.link-btn {
  background: transparent;
  border: none;
  color: #8ec7ff;
  padding: 0 4px;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.lock-tech-btn:active {
  opacity: 0.7;
}


/* ── Confirm overlay (timesheet upsert) ─────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-overlay.hidden { display: none !important; }
.confirm-overlay-inner {
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px 14px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.confirm-overlay-inner h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.confirm-body {
  margin: 0 0 16px;
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #334155;
}
.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}


/* Electric-churn compact identity: Job # / Site address only */
.identity-card-compact .identity-slash-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 4px;
  margin-top: 4px;
}
.identity-card-compact .identity-slash-cell {
  flex: 1 1 120px;
  min-width: 0;
}
.identity-card-compact .identity-slash-addr { flex: 2 1 160px; }
.identity-card-compact .identity-slash-date { flex: 0 1 140px; }
.identity-card-compact .identity-slash-sep {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 14px;
  user-select: none;
}
.identity-card-compact .identity-slash-label {
  margin: 8px 0 4px;
  font-size: 0.78rem;
}
.identity-card-compact .identity-tech-compact {
  margin: 8px 0 0;
  font-size: 0.8rem;
}
@media (max-width: 520px) {
  .identity-card-compact .identity-slash-sep { display: none; }
}

/* Text the office (Home) */
.text-office-card { margin-top: 16px; }
.text-office-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; font-size: 1.15rem; font-weight: 700; text-decoration: none;
  background: #354F77; border-color: #4d6a96; color: #fff;
}
.text-office-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.text-office-num { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; }
.text-office-copy { min-width: 96px; margin: 0; }
/* v96: smaller "tap once to sign up", shorter Text the office button, number/Copy row hidden (view only) */
.text-office-card h2 { margin-bottom: 8px; }
.text-office-card .text-office-sub { font-size: 0.78em; font-weight: 500; color: var(--muted); }
.text-office-card .text-office-btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; margin: 0; }
.text-office-card .text-office-row[hidden] { display: none; }

/* 2026-10-23 block J-012779: blocked job # input + "No job # yet" hint */
input.input-blocked {
  border-color: #b00020 !important;
  background: #fff4f5;
}
.no-job-hint {
  margin-top: 4px;
  font-weight: 600;
}


/* ==========================================================================
   Staging 2026-11-06 walkthrough UI (NOT live)
   Live sp-field-v109 / :3080 public/css/app.css must stay untouched.
   ========================================================================== */

/* #2 Job identity: FULL WIDTH, ~half vertical height vs original live stacked card.
   Class name walk-identity-tight = vertically compact (NOT a width cap).
   compactSlash (JS) already puts Job # / Site address on one row and drops unused
   Supervisor select + tall Technician block + PIN helper. Extra rules below only
   tighten spacing on the walkthrough identity card; do not shrink select/input
   tap targets below ~44px. Shared .identity-card-compact rules stay unchanged
   so other compactSlash callers are unaffected. */
.walk-identity-tight {
  max-width: none; /* full width of .screen — Luke 2026-11-06: vertical, not horizontal */
  width: 100%;
}
/* Drop redundant helper under "Job identity" — compactSlash label already says the rule */
.walk-identity-tight > .card > p.muted:first-of-type {
  display: none;
}
/* Modest vertical tightening — walkthrough identity only */
.walk-identity-tight > .card {
  padding: 10px 12px; /* was .card 14px */
  margin-bottom: 10px; /* was 12px */
}
.walk-identity-tight > .card > h3 {
  margin: 0 0 4px; /* was .card h3 0 0 8px */
  font-size: 1rem;
}
.walk-identity-tight > .card > label.field:first-of-type {
  margin-top: 4px; /* was label.field 12px 0 6px — Calendar jobs */
  margin-bottom: 4px;
}
.walk-identity-tight .jobs-today-meta {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 0.8rem;
  line-height: 1.25;
}
.walk-identity-tight .no-job-hint {
  margin-top: 2px;
  margin-bottom: 0;
}
.walk-identity-tight .identity-slash-row {
  margin-top: 2px; /* was .identity-card-compact 4px */
  gap: 4px 4px;
}
.walk-identity-tight .identity-slash-label {
  margin: 4px 0 2px; /* was .identity-card-compact 8px 0 4px */
}
.walk-identity-tight .identity-slash-sep {
  padding-bottom: 10px; /* was 14px */
}
.walk-identity-tight .identity-tech-compact {
  margin: 4px 0 0; /* was .identity-card-compact 8px 0 0 */
  font-size: 0.78rem;
  line-height: 1.25;
}
/* Keep calendar select + text inputs at phone-usable tap size (≥44px; global --tap is 52px) */
.walk-identity-tight select,
.walk-identity-tight input[type="text"],
.walk-identity-tight input[type="date"] {
  min-height: 44px;
  padding: 10px 12px;
}

/* Exclusive entry (walkthrough exclusiveEntry): one of Job# / Address / Supervisor */
.walk-identity-tight .identity-manual-entry {
  margin-top: 4px;
}
.walk-identity-tight .identity-manual-entry > label.field {
  margin-top: 6px;
  margin-bottom: 4px;
}
.walk-identity-tight [data-entry-panel] > label.field {
  margin-top: 6px;
  margin-bottom: 4px;
}
.walk-identity-tight .identity-date-control {
  margin-top: 6px;
}
.walk-identity-tight .identity-date-reveal {
  display: inline-block;
  margin: 4px 0 0;
  font-size: 0.82rem;
  min-height: 0;
  padding: 2px 0;
}
.walk-identity-tight .identity-date-control label.field {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* #3 + #4 Job complete: compact control inside signature card; unanswered = warning yellow;
   answered shell = satisfied green; Yes vs No stay visually distinct when selected. */
.signature-card .walk-job-complete-inline {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid #e6c200;
  background: #fff8cc; /* unanswered warning / unfilled */
  transition: background 0.15s ease, border-color 0.15s ease;
}
.signature-card .walk-job-complete-inline.is-answered {
  border-color: #2e7d32;
  background: #e8f5e9; /* satisfied / ready */
}
.walk-job-complete-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.walk-job-complete-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #000; /* readable on yellow/green Job complete shell (Luke 11/6 follow-up) */
}
.walk-job-complete-state {
  font-size: 0.78rem;
  font-weight: 700;
  color: #8a6d00;
}
.walk-job-complete-inline.is-answered .walk-job-complete-state {
  color: #1b5e20;
}
/* Compact Yes/No — much smaller than default .yn (min-height: var(--tap)=52px) */
.yn.yn-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.yn.yn-compact label {
  min-height: 32px; /* was 52px (--tap) */
  padding: 4px 8px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  border-width: 2px;
}
/* Unselected pills: black lettering so Yes/No stay readable on yellow or green shell (Luke 11/6). */
.yn.yn-compact label {
  background: #fff;
  border-color: var(--border);
  color: #000;
}
/* Selected Yes vs No: distinct colors; shell already shows satisfied green; white on green/red */
.yn.yn-compact label.yn-yes:has(input:checked) {
  border-color: #1b5e20;
  background: #2e7d32;
  color: #fff;
}
.yn.yn-compact label.yn-no:has(input:checked) {
  border-color: #b71c1c;
  background: #c62828;
  color: #fff;
}
/* Unselected sibling stays black when the other pill is selected */
.yn.yn-compact label.yn-yes:not(:has(input:checked)),
.yn.yn-compact label.yn-no:not(:has(input:checked)) {
  color: #000;
}
.signature-card .walk-job-complete-inline .err {
  margin-top: 6px;
  font-size: 0.8rem;
}

/* ── Timesheet entry compact layout (staging follow-up 2026-11-06) ── */
/* Scoped under .ts-entry-card so walk-through / churn / other pages stay unchanged. */
.ts-entry-card > .ts-date-input {
  display: block;
  width: auto;
  max-width: 11.5rem;
  min-height: 40px;
  padding: 8px 10px;
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.ts-entry-card .ts-pto-note {
  margin: 0 0 8px;
}
.ts-entry-card .ts-row-hours,
.ts-entry-card .ts-row-meta {
  display: grid;
  gap: 8px 10px;
  margin-top: 4px;
  align-items: start;
}
.ts-entry-card .ts-row-hours {
  grid-template-columns: 1fr 1fr;
}
.ts-entry-card .ts-row-meta {
  grid-template-columns: 1fr 1fr 1fr;
}
.ts-entry-card .ts-row-hours > div,
.ts-entry-card .ts-row-meta > div {
  min-width: 0;
}
.ts-entry-card .ts-row-hours label.field,
.ts-entry-card .ts-row-meta label.field {
  margin-top: 8px;
  margin-bottom: 4px;
}
.ts-entry-card .ts-row-hours input,
.ts-entry-card .ts-row-hours select,
.ts-entry-card .ts-row-meta select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 0.92rem;
}
.ts-entry-card .ts-row-meta .timesheet-tech-ro {
  margin: 0;
  min-height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 0.92rem;
}