/* job-pages.css
 *
 * Shared editorial / utilitarian system for the job + customer detail pages.
 * Tokens align with employee-profile.css (OKLCH, tinted-toward-navy neutrals,
 * single amber accent) per .impeccable.md. Light is default; dark mirrors via
 * [data-theme="dark"]. Use --tokens — never reach for hex inside components.
 *
 * Audience: office managers, dispatchers, superintendents at S&W (65-person
 * roofing crew). Read many times per day, edited rarely. The page is the data;
 * chrome is minimum-viable.
 */

/* ──────────────────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────────────────── */
:root {
  --brand-navy:  oklch(28% 0.04 244);
  --brand-amber: oklch(72% 0.12 70);

  --bg:        oklch(98.5% 0.004 244);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(96.2% 0.008 244);
  --surface-3: oklch(93%  0.012 244);
  --border:    oklch(89%  0.014 244);
  --border-2:  oklch(80%  0.018 244);
  --text:      oklch(22%  0.028 244);
  --text-2:    oklch(45%  0.020 244);
  --muted:     oklch(58%  0.015 244);

  --ok:    oklch(52% 0.16 145);
  --warn:  oklch(56% 0.16 70);
  --risk:  oklch(54% 0.20 25);
  --info:  oklch(50% 0.15 230);

  --ok-bg:    oklch(96.5% 0.04 145);
  --warn-bg:  oklch(96.5% 0.05 70);
  --risk-bg:  oklch(96.5% 0.05 25);
  --info-bg:  oklch(96.5% 0.04 230);

  --accent:    var(--brand-amber);
  --accent-bg: oklch(96.5% 0.05 70);
  --accent-fg: oklch(22% 0.028 244);

  --font-sans: 'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-2xs: clamp(0.625rem, 0.605rem + 0.06vw, 0.6875rem);
  --fs-xs:  clamp(0.6875rem, 0.665rem + 0.07vw, 0.75rem);
  --fs-sm:  clamp(0.8125rem, 0.785rem + 0.10vw, 0.875rem);
  --fs-md:  clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
  --fs-lg:  clamp(1.125rem, 1.08rem + 0.18vw, 1.25rem);
  --fs-xl:  clamp(1.5rem, 1.4rem + 0.42vw, 1.875rem);
  --fs-2xl: clamp(2rem, 1.83rem + 0.71vw, 2.625rem);
  --fs-3xl: clamp(2.75rem, 2.45rem + 1.25vw, 3.75rem);

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem;    --sp-9: 2.25rem; --sp-12: 3rem;
  --sp-14: 3.5rem; --sp-16: 4rem;   --sp-22: 5.5rem;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 360ms;

  --topbar-h: 44px;
  --subnav-h: 40px;

  --map-tile-filter: hue-rotate(-6deg) saturate(0.78) brightness(1.02);
}

[data-theme="dark"] {
  --bg:        oklch(15%   0.020 244);
  --surface:   oklch(18%   0.022 244);
  --surface-2: oklch(22%   0.024 244);
  --surface-3: oklch(26%   0.026 244);
  --border:    oklch(28%   0.026 244);
  --border-2:  oklch(35%   0.028 244);
  --text:      oklch(94%   0.012 244);
  --text-2:    oklch(76%   0.015 244);
  --muted:     oklch(58%   0.018 244);

  --ok:    oklch(72% 0.16 145);
  --warn:  oklch(78% 0.14 70);
  --risk:  oklch(72% 0.18 25);
  --info:  oklch(70% 0.14 230);

  --ok-bg:    oklch(22% 0.05 145);
  --warn-bg:  oklch(24% 0.06 70);
  --risk-bg:  oklch(22% 0.07 25);
  --info-bg:  oklch(22% 0.05 230);

  --accent-bg: oklch(24% 0.06 70);
  --accent-fg: oklch(15% 0.020 244);

  --map-tile-filter: hue-rotate(-6deg) saturate(0.7) brightness(0.92);
}

/* ──────────────────────────────────────────────────────────────────────
   RESET + BASE
   ────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--bg);
  color-scheme: light dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--subnav-h) + var(--sp-3));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv02', 'cv11';
  font-variant-numeric: lining-nums;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 22%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-fast);
}
a:hover { text-decoration-color: var(--accent); }
a.unstyled { text-decoration: none; }
a.unstyled:hover { color: var(--accent); }

button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

img, svg { display: block; max-width: 100%; }

.num,
.spec-val,
.kpi-val,
.act-time,
.t-num,
td.num {
  font-variant-numeric: tabular-nums lining-nums;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
  z-index: 100;
  text-decoration: none;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--sp-2); }

/* Section labels — small-caps; they label, they don't announce. */
.sec-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sec-lbl-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.sec-lbl-row .sec-lbl-meta {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* Tabular hint dots (separator between meta items) */
.dot {
  color: var(--border-2);
  user-select: none;
  margin: 0 4px;
}

/* ──────────────────────────────────────────────────────────────────────
   TICKER (sticky top, 44px) — Bloomberg-style tape
   ────────────────────────────────────────────────────────────────────── */
.ticker {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) 0 var(--sp-2);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
/* Back button — boxed, looks like a real control. Hover slides arrow left. */
.tk-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.tk-back:hover {
  color: var(--text);
  border-color: var(--border-2);
  background: var(--surface-2);
  text-decoration: none;
}
.tk-back-arrow {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.tk-back:hover .tk-back-arrow { transform: translateX(-2px); color: var(--text); }
.tk-back-lbl {
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
}

/* Breadcrumb path — Operations / Customer / #HCP-123 */
.tk-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
}
.tk-crumb,
.tk-crumb-cust > a,
.tk-crumb-cust > span {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
  transition: color var(--dur-fast);
}
.tk-crumb:hover,
.tk-crumb-cust > a:hover { color: var(--text); }
.tk-crumb-cust { display: inline-flex; align-items: center; gap: 5px; }
.tk-crumb-sep { color: var(--border-2); user-select: none; font-weight: 400; }
.tk-crumb-num {
  color: var(--text-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.tk-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  user-select: none;
}
.tk-spacer { flex: 1; }
.tk-actions { display: inline-flex; align-items: center; gap: 4px; }
.tk-actions-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* Compact icon-only header buttons (Share, Print, Theme) */
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  color: var(--text-2);
  font-size: 12px;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.icon-action:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-2);
}
.icon-action svg { display: block; }

.tk-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tk-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.tk-status.ok    { color: var(--ok); }
.tk-status.warn  { color: var(--warn); }
.tk-status.risk  { color: var(--risk); }
.tk-status.info  { color: var(--info); }
.tk-status.muted { color: var(--muted); }

/* Theme toggle button (mirrors employee-profile theme-btn) */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Live presence chip in the ticker */
.tk-presence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.tk-presence strong { color: var(--text); font-weight: 800; }
.tk-presence .live-dot { margin-right: 1px; }

/* ──────────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  white-space: nowrap;
}
.btn:hover { border-color: var(--border-2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sm { padding: 4px 9px; font-size: 11px; }
.btn-lg { padding: 9px 16px; font-size: 13px; }
.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { color: var(--text); background: var(--surface-2); border-color: transparent; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 90%, var(--text)); border-color: color-mix(in oklch, var(--accent) 90%, var(--text)); }
.btn-quiet {
  background: var(--surface-2);
  border-color: var(--surface-2);
  color: var(--text-2);
}
.btn-quiet:hover { background: var(--surface-3); border-color: var(--surface-3); color: var(--text); }

/* ──────────────────────────────────────────────────────────────────────
   PAGE SHELL — vertical: ticker / hero / sub-nav / body
   ────────────────────────────────────────────────────────────────────── */
.page {
  display: grid;
  grid-template-rows: var(--topbar-h) auto auto 1fr;
  min-height: 100dvh;
}

/* ──────────────────────────────────────────────────────────────────────
   HERO MAP — full-bleed, fluid height, geofence circle in --accent
   ────────────────────────────────────────────────────────────────────── */
.hero-map {
  position: relative;
  width: 100%;
  height: clamp(220px, 32vw, 320px);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Leaflet-specific overrides removed in the GMaps migration. GMaps renders
   its own attribution + zoom controls; theming them requires touching the
   .gm-style-cc / .gm-bundled-control selectors and is best done via a
   custom Map ID style in GCP Console rather than CSS overrides. */
.hero-map-overlay {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-3);
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  backdrop-filter: none;
}

/* ──────────────────────────────────────────────────────────────────────
   SUB-NAV — sticky section tabs below ticker
   ────────────────────────────────────────────────────────────────────── */
.subnav {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  height: var(--subnav-h);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.subnav a:hover { color: var(--text); }
.subnav a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.subnav-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--surface-2);
}
.subnav a.active .subnav-count { background: var(--accent-bg); color: var(--accent); }

/* ──────────────────────────────────────────────────────────────────────
   BODY GRID — left content + right rail (sticky)
   Container query: collapse to single column at narrow widths
   ────────────────────────────────────────────────────────────────────── */
.body-wrap {
  container-type: inline-size;
  container-name: page;
  padding: var(--sp-6) var(--sp-4) var(--sp-12);
}
.body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-6) var(--sp-8);
  max-width: 1280px;
  margin: 0 auto;
}
.body-main { min-width: 0; }
.body-rail {
  position: sticky;
  top: calc(var(--topbar-h) + var(--subnav-h) + var(--sp-3));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@container page (max-width: 880px) {
  .body-grid { grid-template-columns: minmax(0, 1fr); }
  .body-rail { position: static; order: -1; }
}

/* ──────────────────────────────────────────────────────────────────────
   TITLE CLUSTER (top of body-main)
   ────────────────────────────────────────────────────────────────────── */
.title-cluster { margin-bottom: var(--sp-5); }
.title-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.title-meta .sep { color: var(--border-2); }
.title-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.title-h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 4px;
}
.title-addr {
  font-size: var(--fs-sm);
  color: var(--text-2);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.title-addr .pin { color: var(--muted); font-size: 12px; line-height: 1.3; flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────────────
   SPEC STRIP — asymmetric grid with tabular numerics
   ────────────────────────────────────────────────────────────────────── */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--sp-6);
  background: var(--surface);
}
.spec-cell {
  padding: var(--sp-3) var(--sp-4);
  border-left: 1px solid var(--border);
}
.spec-cell:first-child { border-left: 0; }
.spec-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.spec-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.2;
}
.spec-val small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 3px;
}

/* ──────────────────────────────────────────────────────────────────────
   OVERVIEW BLOCK — address row + two-column facts + notes
   ────────────────────────────────────────────────────────────────────── */
.ov-addr {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text);
}
.ov-addr-pin {
  color: var(--accent);
  font-size: 11px;
  flex-shrink: 0;
}
.ov-addr-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.ov-addr-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.ov-mini {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.ov-mini:hover {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}
.ov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-4) var(--sp-8);
  margin-bottom: var(--sp-5);
}
@container page (max-width: 640px) {
  .ov-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}
.ov-facts dt {
  border-bottom: 1px dashed var(--border);
  padding-bottom: 5px;
}
.ov-facts dd {
  border-bottom: 1px dashed var(--border);
  padding-bottom: 5px;
}
.ov-facts dd .dim { color: var(--muted); font-weight: 500; }

/* Site notes — give it a title, byline, and structured empty state */
.ov-notes {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-left: 2px solid var(--accent);
  background: var(--surface);
}
.ov-notes-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.ov-notes-meta {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.ov-notes-body {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
  max-width: 65ch;
  white-space: pre-wrap;
}
.ov-notes-empty {
  border-left-color: var(--border);
}
.ov-notes-empty .ov-notes-msg {
  font-size: var(--fs-sm);
  color: var(--text-2);
  max-width: 60ch;
  margin-bottom: var(--sp-2);
  line-height: 1.55;
}

/* ──────────────────────────────────────────────────────────────────────
   STATUS PILLS
   ────────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-ok    { background: var(--ok-bg);    color: var(--ok); }
.pill-warn  { background: var(--warn-bg);  color: var(--warn); }
.pill-risk  { background: var(--risk-bg);  color: var(--risk); }
.pill-info  { background: var(--info-bg);  color: var(--info); }
.pill-muted { background: var(--surface-2); color: var(--muted); }
.pill-accent { background: var(--accent-bg); color: var(--accent); }
.pill .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   CARDS — borders only, no drop shadows
   ────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.card-pad { padding: var(--sp-4); }
.card-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.card-hdr h3 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  flex: 1;
}
.card-hdr .meta {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.card-body { padding: var(--sp-4); }

/* Rail card variant — slightly tighter */
.rail-card { padding: var(--sp-4); }
.rail-card + .rail-card { /* gap handled by .body-rail */ }

/* Site map widget — bigger preview with corner expand + legend pill */
.rail-map-card { display: flex; flex-direction: column; }
.rail-map-frame {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.rail-map-canvas {
  height: 220px;
  width: 100%;
  background: var(--surface-2);
  filter: var(--map-tile-filter);
}
.rail-map-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 600;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-2);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.rail-map-expand:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface);
}
.rail-map-legend {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.rail-map-legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--accent);
  flex-shrink: 0;
}

/* Body: coords button, then 3-action grid */
.rail-map-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
}
.rail-coords {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 4px;
  width: 100%;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.rail-coords:hover {
  color: var(--text);
  border-color: var(--border-2);
}
.rail-coords-icon { color: var(--muted); font-size: 12px; }
.rail-coords:hover .rail-coords-icon { color: var(--accent); }

.rail-map-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px;
}
.rail-map-actions .btn { padding: 5px 10px; }
.rail-map-primary { justify-content: center; }
.rail-map-primary svg { margin-right: 2px; }

/* "No coordinates" empty state */
.map-noloc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.map-noloc-msg {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Presence rows — one per worker in the "On site now" rail card. The
   "stacked" variant pushes a second line below the worker name to surface
   the "↗ on Job · #JOB · Customer" link when they're on a different site. */
.presence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 4px;
  font-size: 12px;
  transition: background var(--dur-fast);
}
.presence-row.stacked { align-items: flex-start; }
.presence-row.stacked .live-dot { margin-top: 5px; }
.presence-row.stacked .presence-dur { margin-top: 3px; }
.presence-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.presence-row:hover { background: var(--surface-2); }
.presence-row.out .presence-name { color: var(--text-2); }
.presence-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.presence-name:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); }
.presence-dur {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ok);
  flex-shrink: 0;
}
.presence-dur.dim { color: var(--muted); font-weight: 600; }

/* Two-line "on JOB · CUSTOMER" link in the rail "On site now" rows */
.presence-other-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--warn);
  text-decoration: none;
  line-height: 1.3;
  transition: color var(--dur-fast);
}
a.presence-other-line:hover { color: color-mix(in oklch, var(--warn) 60%, var(--text)); text-decoration: underline; text-decoration-color: var(--warn); }
.presence-other-prefix {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--warn);
}
.presence-other-sep { opacity: 0.45; user-select: none; }

/* Compact two-line variant for the workers table cell */
.presence-cell { display: flex; flex-direction: column; gap: 2px; }
.presence-other-caption {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--warn);
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32ch;
}
a.presence-other-caption:hover { text-decoration: underline; text-decoration-color: var(--warn); }

/* "On other job" pill — clickable when we resolved the other job's name */
.presence-other {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid color-mix(in oklch, var(--warn) 22%, transparent);
  padding: 1px 6px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
a.presence-other:hover { background: color-mix(in oklch, var(--warn-bg) 70%, var(--warn)); text-decoration: none; }

/* Inline presence chip used next to a worker name in tables/tiles */
.presence-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.presence-inline.in   { color: var(--ok); }
.presence-inline.out  { color: var(--text-2); }
.presence-inline.never { color: var(--muted); font-weight: 500; font-style: italic; }

/* Definition-list pattern for rail facts */
dl.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px var(--sp-3);
  font-size: var(--fs-sm);
  margin: 0;
}
dl.facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
dl.facts dd {
  text-align: right;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
dl.facts dd.dim { font-weight: 500; color: var(--text-2); }

/* ──────────────────────────────────────────────────────────────────────
   CUSTOMER CARD (rail) — clickable tile + contact lines
   ────────────────────────────────────────────────────────────────────── */
.cust-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cust-tile:hover {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent-bg) 30%, var(--surface));
  text-decoration: none;
}
.cust-tile-body { flex: 1; min-width: 0; }
.cust-tile-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-tile-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.cust-tile-arrow {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.cust-tile:hover .cust-tile-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

.cust-contact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px dashed var(--border);
  padding-top: var(--sp-2);
}
.cust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  margin: 0 -4px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast);
  min-width: 0;
}
.cust-line:not(.cust-line-static):hover { background: var(--surface-2); text-decoration: none; }
.cust-line-icon {
  width: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
}
.cust-line-val {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-line-val.dim { color: var(--text-2); font-weight: 500; }
.cust-line-act {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.cust-line:hover .cust-line-act {
  opacity: 1;
  color: var(--accent);
}
.cust-empty {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: var(--sp-2);
  line-height: 1.5;
}

/* "Open profile" link button — used on crew tiles + worker rows.
   Reads as a control, not a generic link. Arrow slides on hover. */
.open-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.open-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
  text-decoration: none;
}
.open-link-arrow {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.open-link:hover .open-link-arrow {
  color: var(--accent);
  transform: translateX(2px);
}
.open-link-sm { padding: 3px 7px 3px 8px; font-size: 10px; }

/* ──────────────────────────────────────────────────────────────────────
   CUSTOMER + EMPLOYEE TILES (right rail + crew lists)
   ────────────────────────────────────────────────────────────────────── */
.entity-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.entity-tile + .entity-tile { margin-top: 6px; }
.entity-avatar {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--info-bg);
  color: var(--info);
  flex-shrink: 0;
}
.entity-avatar.crew { background: var(--ok-bg); color: var(--ok); }
.entity-avatar.warn { background: var(--warn-bg); color: var(--warn); }
.entity-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entity-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entity-tile .grow { flex: 1; min-width: 0; }
.entity-tile .num-badge {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.entity-tile .num-badge small { color: var(--muted); font-weight: 500; }

/* ──────────────────────────────────────────────────────────────────────
   TABLES (jobs / invoices / scope)
   ────────────────────────────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tbl thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.tbl tbody td {
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.num,
.tbl th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.tbl td.dim { color: var(--muted); }
.tbl tbody td strong { font-weight: 700; }
.tbl-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────
   ACTIVITY TIMELINE — filter chips, day groups, icon column
   ────────────────────────────────────────────────────────────────────── */
.t-filters {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--sp-4);
  background: var(--surface);
}
.t-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  border-right: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
  font-family: inherit;
}
.t-filter:last-child { border-right: 0; }
.t-filter:hover { color: var(--text); background: var(--surface-2); }
.t-filter.active { color: var(--accent); background: var(--accent-bg); }
.t-filter-n {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.t-filter.active .t-filter-n { background: var(--surface); color: var(--accent); }

.timeline-wrap { display: flex; flex-direction: column; gap: var(--sp-5); }

.t-day-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-bottom: 6px;
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.t-day-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.t-day-n {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface-2);
}
.t-day-rows { display: flex; flex-direction: column; }

.t-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  position: relative;
}
.t-row:last-child { border-bottom: 0; }
.t-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--muted);
  margin-top: 1px;
  flex-shrink: 0;
}
.t-row.ok .t-icon    { background: var(--ok-bg);    color: var(--ok); }
.t-row.warn .t-icon  { background: var(--warn-bg);  color: var(--warn); }
.t-row.risk .t-icon  { background: var(--risk-bg);  color: var(--risk); }
.t-row.info .t-icon  { background: var(--info-bg);  color: var(--info); }
.t-row.accent .t-icon { background: var(--accent-bg); color: var(--accent); }

.t-row-body { min-width: 0; }
.t-msg {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.45;
}
.t-msg strong { font-weight: 700; }
.t-msg .num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.t-msg .t-geo {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--ok-bg);
  color: var(--ok);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  margin-left: 4px;
  vertical-align: -1px;
}
.t-foot {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: 3px;
}
.t-kind {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-time {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────────────────────
   BLOCK HEADERS — used for "Active now", "Upcoming", inline section titles.
   Editorial label + count + right-aligned meta.
   ────────────────────────────────────────────────────────────────────── */
.block-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.block-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.block-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.block-dot.ok    { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 18%, transparent); }
.block-dot.info  { background: var(--info); box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 18%, transparent); }
.block-dot.warn  { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 18%, transparent); }
.block-dot.risk  { background: var(--risk); box-shadow: 0 0 0 3px color-mix(in oklch, var(--risk) 18%, transparent); }
.block-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--surface-2);
  margin-left: 4px;
}
.block-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.block-meta .num { font-weight: 600; color: var(--text-2); }
.block-meta strong { color: var(--text); font-weight: 700; }
.block-meta .dim { color: var(--muted); }

/* Live grid — same as jobs-grid but with a slightly tighter card style */
.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}

/* Live presence chip on a job card */
.jc-live {
  display: flex;
  align-items: center;
}
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--ok-bg);
  border: 1px solid color-mix(in oklch, var(--ok) 22%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.live-chip strong { color: var(--ok); font-weight: 800; }
.live-chip .live-dur { color: var(--muted); font-weight: 600; }
.live-chip.muted {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  position: relative;
  animation: live-pulse 1.8s var(--ease-out-quart) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}
.live-dot.muted { background: var(--muted); animation: none; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in oklch, var(--ok) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 0%, transparent); }
}

/* ──────────────────────────────────────────────────────────────────────
   JOB CARDS GRID (used on customer-detail.html jobs tab)
   ────────────────────────────────────────────────────────────────────── */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.job-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color var(--dur-fast);
  text-decoration: none;
  color: inherit;
}
.job-card:hover { border-color: var(--border-2); text-decoration: none; }
.job-card .jc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.job-card .jc-num { font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.job-card .jc-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.job-card .jc-addr {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-card .jc-foot {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--muted);
}
.job-card .jc-price {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────────
   KPI STRIP (4-up cards, used on customer-detail header)
   ────────────────────────────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.kpi-cell {
  padding: var(--sp-4);
  border-left: 1px solid var(--border);
  background: var(--surface);
}
.kpi-cell:first-child { border-left: 0; }
.kpi-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.kpi-val {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.05;
}
.kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   PROFILE HEADER (customer page) — tight, no wasted space.
   Single-row layout: identity + KPI tape side-by-side; contact line
   below. No banner, no avatar bloat. Borrowed from a Bloomberg-terminal
   cap row, not a SaaS hero card.
   ────────────────────────────────────────────────────────────────────── */
.profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3) var(--sp-6);
  align-items: center;
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.profile-id { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
.profile-avatar {
  width: 40px; height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--info-bg);
  color: var(--info);
  flex-shrink: 0;
}
.profile-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38ch;
}
.profile-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Contact line — sits as a second tight row below the identity, all on one line */
.profile-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-weight: 500;
}
.profile-meta a { color: var(--text-2); text-decoration: none; }
.profile-meta a:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); }
.profile-meta .pcl { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.profile-meta .sep { color: var(--border-2); user-select: none; }
.profile-meta .icon-btn { width: 18px; height: 18px; font-size: 10px; }

/* KPI tape — small, dense, fits on one row with the name */
.kpi-tape {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.kpi-tape-cell {
  padding: 6px 12px 7px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}
.kpi-tape-cell:first-child { border-left: 0; }
.kpi-tape-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-tape-val {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}
.kpi-tape-cell .kpi-tape-val.risk { color: var(--risk); }
.kpi-tape-cell .kpi-tape-val.muted { color: var(--muted); }

@container page (max-width: 880px) {
  .profile-head { grid-template-columns: 1fr; }
  .kpi-tape { width: 100%; }
}
@container page (max-width: 560px) {
  .kpi-tape { flex-wrap: wrap; }
  .kpi-tape-cell { min-width: 50%; flex: 1 1 50%; }
  .kpi-tape-cell:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .kpi-tape-cell:nth-child(4) { border-top: 1px solid var(--border); }
}

/* ──────────────────────────────────────────────────────────────────────
   EMPTY STATES — teach, not announce
   ────────────────────────────────────────────────────────────────────── */
.empty {
  padding: var(--sp-8) var(--sp-6);
  text-align: left;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.empty-msg {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 6px;
  max-width: 56ch;
}
.empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;
}
.empty-cta:hover { text-decoration: underline; text-decoration-color: var(--accent); color: color-mix(in oklch, var(--accent) 80%, var(--text)); }

/* ──────────────────────────────────────────────────────────────────────
   QUICK ACTIONS (rail) — primary CTA + 2x2 secondary tile grid
   ────────────────────────────────────────────────────────────────────── */
.qa-card .card-hdr { padding-right: var(--sp-3); }
.qa-hint {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.qa-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }

.qa-primary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  padding: 10px var(--sp-3);
  font-size: 12px;
}
.qa-primary > span {
  flex: 1;
  text-align: left;
  letter-spacing: 0.02em;
}
.qa-primary svg { color: currentColor; flex-shrink: 0; }

.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.qa-tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  text-decoration: none;
  text-align: left;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
  font-family: inherit;
}
.qa-tile:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
  text-decoration: none;
}
.qa-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  width: 18px;
}
.qa-tile:hover .qa-tile-icon { color: var(--accent); }
.qa-tile-lbl {
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-kbd {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.qa-primary .qa-kbd {
  background: color-mix(in oklch, var(--accent-fg) 12%, transparent);
  border-color: color-mix(in oklch, var(--accent-fg) 18%, transparent);
  color: var(--accent-fg);
  margin-left: auto;
}
.qa-tile:hover .qa-kbd { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 30%, transparent); }

/* Backwards compat for any other surfaces using qa-list */
.qa-list { display: flex; flex-direction: column; gap: 6px; }
.qa-list .btn { justify-content: flex-start; }

/* ──────────────────────────────────────────────────────────────────────
   SCOPE — line items grouped by category, with per-row hover actions
   ────────────────────────────────────────────────────────────────────── */
.scope-cat-hdr {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.scope-cat-hdr .scope-cat-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface);
  text-transform: none;
}
.scope-cat-hdr .total {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

.scope-desc {
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.scope-notes {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.scope-unit { color: var(--muted); font-weight: 500; margin-left: 2px; }

.scope-tbl .scope-act-col { width: 56px; }
.scope-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.scope-row:hover .scope-row-actions,
.scope-row:focus-within .scope-row-actions { opacity: 1; }
.scope-row-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.scope-row-act:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}

.scope-empty { padding: var(--sp-6) var(--sp-6); }
.scope-empty-actions {
  display: flex;
  gap: 6px;
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────
   SEGMENTS TIMELINE (job-detail crew section)
   ────────────────────────────────────────────────────────────────────── */
.seg-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
  align-items: center;
}
.seg-row:first-child { border-top: 0; }
.seg-num {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.seg-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.seg-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   SECTION SHELL — gives anchor target + breathing room
   ────────────────────────────────────────────────────────────────────── */
section.s {
  scroll-margin-top: calc(var(--topbar-h) + var(--subnav-h) + var(--sp-4));
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
section.s:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
section.s > h2 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
section.s > h2 .meta {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}
section.s > h2 .grow { flex: 1; }

/* ──────────────────────────────────────────────────────────────────────
   TAGS
   ────────────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.tag-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ──────────────────────────────────────────────────────────────────────
   COPY-LINK INLINE BUTTON
   ────────────────────────────────────────────────────────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  color: var(--muted);
  font-size: 11px;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.icon-btn:hover { color: var(--accent); background: var(--accent-bg); }

/* ──────────────────────────────────────────────────────────────────────
   LOADING / SPINNER (static; no skeleton animations per .impeccable.md)
   ────────────────────────────────────────────────────────────────────── */
.spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--muted);
  font-size: 12px;
}
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────────────
   TABS (within sections, e.g. customer Jobs/Invoices)
   ────────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.tabs:first-child { margin-top: 0; }
.tab-btn {
  padding: 9px var(--sp-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   FIELD CAPTURES — photos / notes / PDFs uploaded by foremen + crew
   ────────────────────────────────────────────────────────────────────── */
.cap-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.cap-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-2);
  transition: border-color 120ms ease;
}
.cap-row:hover { border-color: var(--border-strong, var(--border)); }
.cap-row--note { grid-template-columns: 36px minmax(0, 1fr); }
.cap-row--pdf  { grid-template-columns: 44px minmax(0, 1fr); }

.cap-thumb {
  display: block;
  width: 86px;
  height: 86px;
  overflow: hidden;
  border-radius: var(--rad-1);
  background: var(--surface-2);
}
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cap-noteIcon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rad-1);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}
.cap-pdfBtn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--rad-1);
  font-size: 22px;
  cursor: pointer;
}
.cap-pdfBtn:hover { background: var(--accent-bg); }

.cap-body { min-width: 0; }
.cap-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cap-author { color: var(--text); font-weight: 700; }
.cap-dot { color: var(--muted); }
.cap-caption {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.45;
  word-wrap: break-word;
}
.cap-caption--note {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  white-space: pre-wrap;
}
.cap-pdfLink {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
}
.cap-pdfLink:hover { text-decoration: underline; }
.cap-pdfCap {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.cap-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cap-badge--on { background: var(--ok-bg); color: var(--ok); }

.cap-mods {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.cap-mod {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 120ms ease;
}
.cap-mod:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.cap-mod--danger { color: var(--risk); }
.cap-mod--danger:hover { background: var(--risk-bg); color: var(--risk); border-color: var(--risk); }

/* ──────────────────────────────────────────────────────────────────────
   PRINT — keep only the bones
   ────────────────────────────────────────────────────────────────────── */
@media print {
  .ticker, .subnav, .body-rail { display: none !important; }
  .body-grid { grid-template-columns: 1fr; }
  .hero-map { height: 200px; }
  body { background: white; color: black; }
  .cap-mods { display: none; }
}