/* Dark Style (Travis Oct 23 2026: "figure out cool dark mode"): a cool blue-gray dark look for the shared chrome (menu,
   Top Bar, bottom tab bar) and the Workspace Engine pages with widgets (Dashboard, Base, Route, Tracker). Token
   overrides on top of assets/style.css; the generated block re-points every light literal color in those pages' CSS at
   these tokens (rebuild: python3 tools/gen_dark.py). Pages not yet on widgets get the tokens only. */
:root {
  color-scheme: dark;
  --ink: #E6EAF0;
  --paper: #0F141A;
  --bg: #0F141A;
  --card: #18202A;
  --card-2: #1E2833;
  --line: #2C3846;
  --muted: #98A3B3;
  --navy: #22364D;
  --blue: #4AA8FF;
  --teal: #4AA8FF;
  --grass: #5CDB3A;
  --red: #FF6B5E;
  --orange: #F5A04A;
  --top-bg: #141B23;
  --top-line: #2C3846;
  --sb-bg: #141B23;
  --menu-bg: #0B1015;
  --t-head-bg: #1E2833;
  --in-line: #34414F;
  --pill-waiting: #1E2833;
  --card-edge: #2C3846;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --pal-black: #0B1015;
  --ink-bg: #33414F;
}
html, body { background: var(--paper); }
/* == generated (gen_dark.py) == */
:root .side { background: var(--ink-bg) }
:root .settings-jump a { background: var(--card) }
:root .set-switch::after { background: var(--card) }
:root .svc-ico-now { background: var(--card) }
:root .set-color input[type=color] { background: var(--card) }
:root .st-pv-card { background: var(--card) }
:root .logout.logout-all { color: var(--muted) }
:root .back-link { background: var(--card) }
:root .toast { background: var(--card) }
:root .toast.bad::before, :root .toast.bad::after { background: var(--card) }
:root .toast.warn::before, :root .toast.warn::after { background: var(--ink-bg) }
:root input, :root select, :root textarea { border: 1px solid var(--in-line, var(--line)); background: var(--card) }
:root .kpi-tile { background: linear-gradient(180deg, var(--paper), var(--card)) }
:root .override-block { background: linear-gradient(180deg, var(--paper), var(--card)) }
:root .list-bar input[type="month"] { background: var(--card) }
:root .status-filter[open] summary { background: var(--card) }
:root .status-menu { background: var(--card) }
:root .list-search input:focus, :root .list-size select:focus { background: var(--card) }
:root .command .list-bar:not(.lb) select:focus { background: var(--card) }
:root .pager a:hover { background: var(--card-2) }
:root .badge.pal-white { background: var(--card) }
:root .tabs a { background: var(--card) }
:root .assign-card { background: var(--card-2) }
:root select.reason { background-color: var(--card) }
:root .btn.quiet, :root button.quiet { background: var(--card) }
:root .pill.on { background: var(--ink-bg) }
:root .review-bar input[type="month"] { background: var(--card) }
:root .review-views a { background: var(--card) }
:root .login { background: var(--ink-bg) }
:root .lost { background: var(--ink-bg) }
:root .lost-card { background: var(--card) }
:root .picks { background: var(--card) }
:root .pick { background: var(--card) }
@media (max-width: 800px) {
:root .phone-dock { background: var(--ink-bg) }
}
:root .visit { background: var(--card) }
:root .command .board-range a.btn { background: var(--card) }
:root .command .board-range input[type="date"] { background: var(--card) }
:root .command .week-days a { background: var(--card) }
:root .command .week-days a.week-jump, :root .command .week-jump { background: var(--card) }
:root .command .card { background: var(--card) }
:root .command table.board td { background: var(--card) }
:root .command table.board tr.job-note-row td { background: var(--card) }
:root .command table.board th .th-pick { background-color: var(--card) }
:root .command table.board th .th-pick:focus { background-color: var(--card) }
:root .command .order-num { background: var(--card) }
:root .command tr.job-row:target td { background: var(--card-2) }
:root .command .job-note-row td { background: var(--card) }
:root input, :root select, :root textarea { border-color: var(--line) }
:root .stat.predict { background: var(--card-2) }
:root .print-view { background: var(--card) }
@media (max-width: 800px) {
:root .phone-pick { background: var(--card) }
:root table.phone-sheet tr { background: var(--card) }
}
@container cc-board (max-width: 799px) {
:root .command table.board tr.job-row { background: var(--card) }
:root .command table.board tr.job-row td.note-col b, :root .command table.board tr.job-row td.file-col b { background: var(--ink-bg) }
:root .command table.board tr.job-note-row { background: var(--card) }
}
:root .field-body { background: var(--ink-bg) }
:root .field-when { background: var(--card) }
:root .field-back { background: var(--card) }
:root .field-days { background: var(--card) }
:root .field-tally { background: var(--card) }
:root .field-crew { background: var(--card) }
:root .map-move { background: var(--ink-bg) }
:root .field-month { background: var(--card) }
:root .field-sheet-bar small { background: var(--card) }
:root .field-sheet.driving .field-sheet-bar small { background: var(--card) }
:root .field-sheet.paused .field-sheet-bar small i { background: var(--card) }
:root .field-job { background: var(--card) }
:root .field-skip, :root .field-skip:hover { background: var(--card) }
:root .field-now { background: var(--ink-bg) }
:root .note-block label:has(a):hover, :root .visit-note a.pill:hover { background: var(--ink-bg) }
:root .note-pill { background: var(--card) }
:root .job-rows { background: var(--card) }
:root .rc-hero { background: color-mix(in srgb, var(--blue) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)) }
:root .rc-hero .rachio-pic { background: var(--card) }
:root .rc-day { background: var(--card) }
:root .rc-day.wet { background: color-mix(in srgb, var(--blue) 16%, var(--card)) }
:root .rc-zone { background: var(--card) }
:root .rc-drop { background: var(--card) }
:root .rc-zpic { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, var(--card)), color-mix(in srgb, var(--blue) 10%, var(--card))) }
:root .rc-check { border: 2px solid var(--line) }
:root .rc-qrbar { background: var(--card) }
:root .rc-turf .rc-zpic { background: linear-gradient(135deg, color-mix(in srgb, var(--grass) 70%, var(--card)), color-mix(in srgb, var(--grass) 60%, var(--ink))) }
:root .rc-drip .rc-zpic { background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 45%, var(--card)), color-mix(in srgb, var(--orange) 55%, var(--ink))) }
:root .rc-flowers .rc-zpic { background: linear-gradient(135deg, color-mix(in srgb, var(--red) 35%, var(--card)), color-mix(in srgb, var(--red) 70%, var(--navy))) }
:root .rc-garden .rc-zpic { background: linear-gradient(135deg, color-mix(in srgb, var(--grass) 45%, var(--card)), color-mix(in srgb, var(--orange) 40%, var(--ink))) }
:root .rc-num { background: var(--card) }
:root .rc-box { background: var(--card) }
:root .rcw-n { background: color-mix(in srgb, var(--blue) 7%, var(--card)) }
:root .rcw-n.on { background: color-mix(in srgb, var(--blue) 18%, var(--card)) }
:root .rcw-pic, :root .rcw-hpic { background: color-mix(in srgb, var(--blue) 7%, var(--card)) }
:root .rcw-pic img, :root .rcw-hpic img { background: var(--card) }
:root .job-files-card { background: var(--card) }
:root a.photo-place { background: var(--card) }
:root .field-menu { background: var(--ink-bg) }
:root .mail-avatar.ours { background: var(--ink-bg) }
:root .editor { border: 1px solid var(--line); background: var(--card) }
:root .editor-bar button.on { background: var(--ink-bg) }
:root textarea.editor-source { background: var(--ink-bg) }
:root .mt-head { background: var(--card) }
:root .mt-compose { background: var(--card) }
:root .mt-field { background: var(--card) }
:root .fm-drop.on { background: var(--card-2) }
:root .fm-drop-target, :root .fm-tree a.fm-drop-target { background: var(--card-2) }
:root .fm-editor { background: var(--ink-bg) }
:root .fm-ed-bar { background: var(--card) }
:root .af-card { background: var(--card) }
:root .af-add-menu { background: var(--card) }
:root .tag-chip { background: color-mix(in srgb, var(--tag, var(--blue)) 16%, var(--card)) }
:root .tag-menu { background: var(--card) }
:root .qa-help { background: var(--card) }
:root .qa-bit { background: color-mix(in srgb, var(--tag) 12%, var(--card)) }
:root button.qa-ex { background: var(--card) }
:root button.qa-ex:hover, :root button.qa-ex:focus-visible { background: color-mix(in srgb, var(--blue) 8%, var(--card)) }
:root .qa-sug { background: var(--card) }
:root button.qa-hint.quiet { background: color-mix(in srgb, var(--navy) 6%, var(--card)); border: 1px dashed color-mix(in srgb, var(--navy) 35%, var(--line)) }
:root button.qa-hint.quiet:hover, :root button.qa-hint.quiet:focus-visible { background: color-mix(in srgb, var(--navy) 10%, var(--card)) }
:root .qa-hint kbd { background: var(--card) }
:root .lb .list-search input:focus { background: var(--card) }
:root .lb-kbd { background: var(--card) }
:root :not(.card):not(.command) > .list-bar.lb .list-search input, :root :not(.card):not(.command) > .list-bar.lb .lb-filters select, :root :not(.card):not(.command) > .list-bar.lb .lb-filters input, :root :not(.card):not(.command) > .list-bar.lb .lb-filters .status-filter summary { background-color: var(--card) }
:root .lb-tail .list-size select:hover, :root .lb-tail .list-size select:focus { background-color: var(--card) }
:root .month-pick .mp-pill { background: var(--card) }
:root .month-pick .mp-pill:hover, :root .month-pick.is-open .mp-pill { background: var(--card) }
:root .mp-pop { background: var(--card) }
:root .login.welcome .card { background: var(--card) }
:root .job-reassign { background: var(--card) }
:root .mail-file { background: var(--card) }
:root .command .list-bar.lb { background: var(--card) }
:root canvas.est-sig { background: var(--card) }
:root .tip-body { background: var(--ink-bg) }
:root .sx-bars i.none { background: color-mix(in srgb, #E3E5E8 14%, var(--card)) }
:root .dw-bar { background: var(--card) }
:root .dw-asof-old { color: var(--muted) }
:root .dw-cats button.on { background: var(--ink-bg) }
:root .dw-pick { background: var(--card) }
:root .tabs.sides a:hover, :root .tabs.sides label:hover { background: var(--card) }
:root .field-products { background: var(--card) }
:root .ps-top { background: var(--ink-bg) }
:root .ps-shot { background: var(--card) }
:root .ps-slug span { border: 1px solid var(--line) }
:root .ps-gal img { background: var(--card) }
:root .ps-star { background: var(--card) }
:root .ai-row.on { background: color-mix(in srgb, var(--grass) 14%, var(--card)) }
:root .itpl-thumb { background: var(--card) }
:root .itpl-mf-pop { background: var(--card) }
:root :where(input, :root textarea)::placeholder { color: var(--muted) }
@media (max-width: 800px) {
:root :not(.card):not(.command) > .list-bar.lb.lb-folded > .lb-fbtn { background: var(--card) }
:root .lb.lb-folded > .lb-filters.is-open { background: var(--card) }
}
:root .tabs > .fit-more > summary { background: var(--card) }
:root .fit-more .status-menu > select.fit-moved { background-color: var(--card) !important }
:root .bm-item { background: var(--card) }
:root .bm-bar { background: var(--ink-bg) }
:root .rt-strip { background: var(--card) }
:root .td-person { background: var(--card) }
:root .fz-bar { background: color-mix(in srgb, var(--blue) 7%, var(--card)) }
:root .pn-item { background: var(--card) }
:root .qc-out.qc-ans { background: color-mix(in srgb, var(--grass) 9%, var(--card)) }
:root .pick-chip > span { background: var(--card) }
:root .tb-changed { background: color-mix(in srgb, var(--blue) 7%, var(--card)) }
:root .pm-dot { border: 1.5px solid var(--line) }
:root .tt-tip { background: var(--ink-bg) }
:root .pm-flip { border: 2px solid var(--line) }
:root .cp-edit { border-top: 1px solid var(--line, var(--line)) }
:root .mt-pic .x-close { background: var(--card) }
:root .tk-menu { background: var(--card) }
@media (max-width: 700px) {
:root table.sx-table.phone-sheet tr { background: var(--card) }
}
:root .rt-note .rt-see { background: var(--card) }
:root .rt-tabs a { background: var(--card) }
:root .rt-tabs a.on { background: var(--ink-bg) }
:root .rt-day { background: var(--card) }
:root .wxw-hc.now { background: var(--card-2) }
:root .wxw-nowm { background: var(--ink-bg) }
:root .dw-soil.dw-soil4 div { border-left: 3px solid var(--line) }
:root .dw-soil.dw-soil4 div:nth-child(2) { border-color: var(--line) }
:root .dw-soil.dw-soil4 div:nth-child(3) { border-color: var(--line) }
:root .dw-soil.dw-soil4 div:nth-child(4) { border-color: var(--line) }
:root .wxw-sheet { background: var(--card) }
:root .wxw-sab { background: var(--card-2) }
:root .wxw-sx { color: var(--ink) }
:root .wxw-at { color: var(--ink) }
:root .tc-bar { background: var(--card) }
:root .tc-bar.in { background: var(--ink-bg) }
:root .tc-bar.in .quiet:hover { border-color: var(--line) }
:root .tc-bar.brk .field-drive { background: var(--card) }
:root .tc-strip { background: var(--card) }
:root .tc-pin { border: 3px solid var(--line) }
:root body.wc.light .wc-tile { background: var(--card) }
:root body.wc.light .wc-tile:hover { background: var(--card) !important }
:root body.wc.light .wc-card { background: var(--card) }
:root body.wc.light .wc-pair input { background: var(--card) }
:root .wc-to input, :root .wc-to select { background: var(--ink-bg) }
:root body.wc.light .wc-to input, :root body.wc.light .wc-to select { background: var(--card) }
:root .sc-delta.up { background: var(--card-2) }
:root .sc-good { background: var(--card-2) }
:root .ttl-say { background: var(--card); color: var(--ink) }
:root .ttl-say::after { background: var(--card) }
:root .ttl-say .ttl-bar { background: var(--card-2) }
:root .ttl-mv-rabbit .f4 { background: linear-gradient(var(--card) 0 22%, #111 22%) }
:root .ttl-mv-burst .f1, :root .ttl-mv-burst .f2, :root .ttl-mv-burst .f3 { background: var(--card) }
:root .ttl-dmg.sticker { background: color-mix(in srgb, #ffe14d 14%, var(--card)); color: var(--ink); border: 2px solid var(--line) }
:root .ttl-tk .tk-bar { background: var(--card-2) }
:root .ttl-tk .tk-url { background: var(--card); color: var(--ink) }
:root .ttl-tk .tk-search { background: var(--card); color: var(--ink) }
:root .ttl-ex .ex-flash { background: var(--card) }
:root .ttl-win.inv { background: var(--card-2); color: var(--ink) }
:root .ttl-win .tw-bar { background: var(--card-2) }
:root .ttl-win .tw-bar span { color: var(--ink) }
:root .ttl-brawl i:nth-child(2) { color: var(--ink) }
:root .ttl-can b { color: var(--ink); background: var(--card) }
:root .shv-glint { background: var(--card) }
:root .shv-note { background: var(--card); color: var(--ink) }
/* == end generated == */
/* Hand fixes after the generated block: places where --ink was a background (now light text in Dark). */
.side { background: var(--menu-bg); color: var(--ink); border-right: 3px solid var(--grass); box-shadow: none; } /* border, not inset shadow: no smear on scroll (Oct 23 2026) */
.brand, .side nav a, .version:hover, .logout:hover { color: var(--ink); }
.side nav a.sub, .logout, .version, .gear { color: var(--muted); }
.side nav a.active, .side nav a.sub.active { background: var(--navy); color: #fff; box-shadow: inset 3px 0 0 var(--grass); }
.nav-fold summary { color: var(--muted); }
.nav-subfold > summary { color: var(--ink); }
.toast.warn, .toast.warn::before { color: #111; }
.badge.done, .badge.each, .badge.paused-company, .badge.pal-green, .badge.pal-orange { color: #111; }
.badge.waiting, .badge.lump { color: var(--ink); }
th { color: var(--muted); }
tbody tr:hover td, table tr:hover td { background: var(--card-2); }
input, select, textarea { background: var(--card-2); color: var(--ink); }
input::placeholder, textarea::placeholder { color: #6F7B8A; }
.btn.quiet, button.quiet { background: var(--card-2); color: var(--ink); border-color: var(--line); }
.btn.quiet:hover, button.quiet:hover { border-color: var(--blue); }
button:not(.quiet):not(.danger), .btn:not(.quiet):not(.danger) { color: #fff; }
img, video { color-scheme: normal; }
@media (max-width: 800px) {
  .phone-dock { background: var(--menu-bg); border-top: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--grass); }
  .phone-dock a, .phone-dock button { color: var(--muted); }
  .phone-dock .on, .phone-dock a.on, .phone-dock a:hover { color: var(--grass); }
  .top-title.back-phone h1 { background: var(--card-2); border-color: var(--line); }
}
.field-menu, .ps-top, .bm-bar, .field-body { background: var(--menu-bg); }
.map-move { background: var(--ink-bg); color: #fff; }
.wxw-fp.z, .wxw-chev { color: #56657A; }
/* Dark sidebar matches the page (Travis Oct 23 2026 screenshot): one background (the card color), group headers on the
   same background, active item = soft tint of var(--blue), one thin border in var(--line), no lighter strip. Dark only. */
:root aside.side { background: var(--card); color: var(--ink); border-right: 1px solid var(--line); box-shadow: none; }
:root aside.side .nav-fold, :root aside.side .nav-fold summary, :root aside.side .nav-fold[open] summary, :root aside.side .nav-subfold > summary { background: transparent; }
:root aside.side .nav-subfold { border-left-color: var(--line); }
:root aside.side nav a:hover, :root aside.side .nav-fold summary:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
:root aside.side nav a.active, :root aside.side nav a.sub.active { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); }