/* How We Bill page: sample invoice + GPS work summary + replay. Scoped to .bd */
.bd{--bd-ink:#1d261c;--bd-ink2:#4b5548;--bd-muted:#7d857a;--bd-grid:#e4e1d6;--bd-axis:#c9c5b6;
  --bd-surface:#fbfaf6;--bd-page:#f3f0e6;--bd-ring:rgba(29,38,28,.12);
  --bd-ex:#1f6b2a;--bd-sk:#d9822b;--bd-grub:#1f6b2a;--bd-clean:#d9822b;--bd-dirt:#8a5a2b;
  --bd-water:#4f8fd6;--bd-waterfill:rgba(79,143,214,.22);--bd-area:rgba(31,107,42,.06);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--bd-ink);font-size:15px;line-height:1.5}
.bd *{box-sizing:border-box}
.bd h3{font-family:'IM Fell English SC',serif;font-weight:normal;font-size:21px;color:#004d00;margin:0 0 2px}
.bd-lede{margin:0 0 12px;color:var(--bd-ink2)}
.bd-cap{margin:0 0 10px;font-size:13px;color:var(--bd-ink2)}
.bd-card{background:var(--bd-surface);border:1px solid var(--bd-ring);border-radius:10px;padding:16px 18px;margin:0 0 16px}
.bd-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 16px}
.bd-bar,.bd-modebar,.bd-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bd-bar{margin:0 0 12px}.bd-modebar,.bd-legend{margin:0 0 10px}
.bd-lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bd-muted);font-weight:600;margin-right:2px}
.bd-seg,.bd-chip{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;padding:5px 13px;border-radius:999px;
  border:1px solid var(--bd-ring);background:var(--bd-surface);color:var(--bd-ink2);cursor:pointer}
.bd-seg.on{background:#004d00;border-color:#004d00;color:#fff}
.bd-chip{display:flex;align-items:center;gap:7px;padding-left:9px}
.bd-chip .sw{width:10px;height:10px;border-radius:3px}
.bd-chip.off{opacity:.4}
.bd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 16px}
.bd-tile{background:var(--bd-surface);border:1px solid var(--bd-ring);border-radius:8px;padding:10px 14px}
.bd-tile .v{font-size:23px;font-weight:650}
.bd-tile .l{font-size:12px;color:var(--bd-muted)}
/* map */
.bd svg{display:block;width:100%;height:auto}
.bd .frame{fill:none;stroke:var(--bd-axis)}
.bd .grat{stroke:var(--bd-grid);stroke-width:1}
.bd .fence{fill:none;stroke:var(--bd-ink2);stroke-width:1.3;stroke-dasharray:7 4;opacity:.6}
.bd .trail{fill:none;stroke:var(--bd-muted);stroke-width:1.2;stroke-dasharray:2 3}
.bd .wline{fill:none;stroke:var(--bd-water);stroke-width:2}
.bd .wpoly{fill:var(--bd-waterfill);stroke:var(--bd-water)}
.bd .warea{fill:var(--bd-area);stroke:var(--bd-axis);stroke-width:.8}
.bd .arealab{fill:var(--bd-muted);font-size:12px;font-style:italic}
.bd .wmark{fill:var(--bd-water);stroke:#fff;stroke-width:1}
.bd .track{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.bd .hit{fill:none;stroke:transparent;stroke-width:12;pointer-events:stroke}
.bd svg.hi .track{opacity:.08}.bd svg.hi .track.on{opacity:1;stroke-width:2.6}
.bd .hidden{display:none}
.bd .scale line{stroke:var(--bd-ink2);stroke-width:1.5}
.bd .scale text{fill:var(--bd-ink2);font-size:11px}
/* timeline */
.bd-tl{display:grid;grid-template-columns:max-content 1fr;gap:4px 10px;align-items:center}
.bd-tl .rl{font-size:12.5px;font-weight:600;color:var(--bd-ink2)}
.bd-tl .cells,.bd-tl .ax{display:grid;gap:3px}
.bd-tl .cell{height:28px;border-radius:3px;background:var(--bd-grid)}
.bd-tl .cell.on{cursor:pointer}
.bd-tl .ax{font-size:10.5px;color:var(--bd-muted)}
.bd-tl .ax span{white-space:nowrap}
/* tables */
.bd-tw{overflow-x:auto}
.bd table{border-collapse:collapse;width:100%;font-size:14px;margin:0}
.bd th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bd-muted);font-weight:600;
  text-align:right;padding:6px 8px;border-bottom:1px solid var(--bd-axis);background:none}
.bd td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--bd-grid);font-variant-numeric:tabular-nums}
.bd .l{text-align:left}
.bd tr.tot td{font-weight:650;border-top:1px solid var(--bd-axis);border-bottom:none}
.bd .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
/* sample invoice */
.bd-inv{background:#fff;border:1px solid var(--bd-ring);border-radius:6px;padding:22px 24px;margin:0 0 20px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);position:relative;overflow:hidden}
.bd-inv .stamp{position:absolute;top:18px;right:-34px;transform:rotate(30deg);background:#d9822b;color:#fff;
  font:700 11px system-ui,sans-serif;letter-spacing:.14em;padding:4px 44px}
.bd-inv .ih{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.bd-inv .co{font-family:'IM Fell English SC',serif;font-size:22px;color:#004d00}
.bd-inv .meta{font-size:13px;color:var(--bd-ink2)}
.bd-inv .meta b{color:var(--bd-ink)}
.bd-inv .big{font-size:20px;font-weight:700;letter-spacing:.12em;color:var(--bd-ink)}
.bd-inv td.day{color:var(--bd-muted);font-size:12.5px}
.bd-inv .note{font-size:12.5px;color:var(--bd-muted);margin:10px 0 0}
/* replay */
.bd-replay-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.bd-play{width:42px;height:42px;border-radius:50%;border:none;background:#004d00;color:#fff;font-size:17px;cursor:pointer}
.bd-clock{font:650 22px ui-monospace,"SF Mono",Menlo,Consolas,monospace;min-width:110px}
.bd-speed{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.bd-scrub{width:100%;margin:0 0 8px;accent-color:#004d00}
.bd .done{fill:none;stroke:var(--bd-ex);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.bd .fresh{fill:none;stroke:#d9822b;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bd .mach{fill:#d9822b;stroke:#fff;stroke-width:2}
.bd .ghost{fill:none;stroke:var(--bd-grid);stroke-width:1.2}
.bd-replay-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--bd-ink2);margin-top:8px}
.bd-replay-stats b{color:var(--bd-ink);font-size:15px}
/* tooltip */
.bd-tip{position:fixed;pointer-events:none;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:6px;
  padding:6px 10px;font:12.5px system-ui,sans-serif;color:#1d261c;box-shadow:0 2px 10px rgba(0,0,0,.18);
  display:none;z-index:50;max-width:240px}
.bd-tip b{font-weight:700}
@media (max-width:600px){.bd-inv{padding:16px 12px}.bd-inv .hide-sm{display:none}.bd td,.bd th{padding:5px 5px}
  .bd-speed{margin-left:0}}
@media (prefers-reduced-motion:reduce){.bd *{transition:none!important}}
/* v2: real invoice + client summary in frames; replay over aerial photo */
.bd-frame{background:#fff;border:1px solid var(--bd-ring);border-radius:8px;overflow:hidden;margin:0 0 22px;
  box-shadow:0 2px 12px rgba(0,0,0,.06)}
.bd-frame iframe{display:block;width:100%;height:600px;border:0}
.bd #bd-replay svg{border-radius:6px}
.bd .done{stroke:#ffd27a;stroke-width:2;opacity:.85}
.bd .fresh{stroke:#ff7a1a;stroke-width:3}
.bd .mach{fill:#ff7a1a;stroke:#fff;stroke-width:2.5}
.bd #bd-replay .scale line{stroke:#fff}
.bd #bd-replay .scale text{fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:2.5px}
.bd #bd-replay svg{max-height:78vh;width:100%;background:#2b2a22}