/* HarborLink design tokens, from the POC: a restrained "survey sheet" palette,
   IBM Plex type, automatic light/dark (or data-theme on <html>). Shared by every page. */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* Palette: light by default, dark when the OS asks for it. */
:root{
  --bg:#f3f4f1; --panel:#fbfbf9; --fg:#1d2327; --muted:#5f6a70; --line:#dcdfda; --hover:#eceee9;
  --sel:#f2b705; --sel-soft:#fff3c4; --accent:#1f4fbf;
  --hl-main:#2349c2; --hl2:#0c8a8c; --bwi:#7b3fc4; --pull:#d9621e;
  --mh:#e0a100; --splice:#d0302f; --reel:#1aa6d6; --start:#2d9a3e; --site:#1d2327;
  --st-built:#1f45c4; --st-row:#c8322b; --st-eng:#2c9a4b; --st-perm:#0b97a8; --route:#7a3fc4; --cable:#c2187a; --circuit:#0b7a55; --trace:#00a2c7;
  --map-bg:#f2f1ed; --tile-filter:none;
  --f-display:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14181b; --panel:#1a1f23; --fg:#e4e8ea; --muted:#95a1a7; --line:#2c3439; --hover:#232a2f;
  --sel:#ffc930; --sel-soft:#3b3218; --accent:#7ea2ff;
  --hl-main:#6f8dff; --hl2:#2cc5c4; --bwi:#b58cf0; --pull:#ff8a45;
  --mh:#f0bb2a; --splice:#ff5a55; --reel:#4cc6f0; --start:#58c86a; --site:#e4e8ea;
  --st-built:#6f8dff; --st-row:#ff6b63; --st-eng:#5ccc79; --st-perm:#3fd0de; --route:#c49bff; --cable:#ff6fb5; --circuit:#43d39a; --trace:#38dcff;
  --map-bg:#1b1e20; --tile-filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14181b; --panel:#1a1f23; --fg:#e4e8ea; --muted:#95a1a7; --line:#2c3439; --hover:#232a2f;
  --sel:#ffc930; --sel-soft:#3b3218; --accent:#7ea2ff;
  --hl-main:#6f8dff; --hl2:#2cc5c4; --bwi:#b58cf0; --pull:#ff8a45;
  --mh:#f0bb2a; --splice:#ff5a55; --reel:#4cc6f0; --start:#58c86a; --site:#e4e8ea;
  --st-built:#6f8dff; --st-row:#ff6b63; --st-eng:#5ccc79; --st-perm:#3fd0de; --route:#c49bff; --cable:#ff6fb5; --circuit:#43d39a; --trace:#38dcff;
  --map-bg:#1b1e20; --tile-filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9);
  color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.45 var(--f-body)}

/* The date-range control (daterange.js): a preset menu, and from/to dates for Custom. */
.dr{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dr select,.dr input[type=date]{box-sizing:border-box;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);font:13px var(--f-body);min-height:32px;width:auto;max-width:100%}
.dr .dr-custom{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.dr .dr-to{font-size:12px;color:var(--muted)}
.dr .dr-err{flex-basis:100%;color:var(--st-row);font-size:12px}
.dr .dr-err:empty{display:none}
.dr select:focus-visible,.dr input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:640px){.dr{max-width:100%}.dr select,.dr input[type=date]{font-size:16px}.dr .dr-custom{flex:1 1 100%;flex-wrap:nowrap}.dr input[type=date]{flex:1 1 0;min-width:0}}