/* The map in the website's look: the same type, colours and light/dark switch as the other pages.
   Loaded after the map's own styles, so it only changes appearance, never behaviour. */
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --fd: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fb: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fm: "Plex Mono", ui-monospace, monospace;
  --bg: #F7F7F5; --panel: #FFFFFF; --panel2: #F3F3F0; --ink: #111316; --muted: #5E636B; --line: #E4E3DE; --chip: #EEEDE9;
  --accent: #8F5410; --amber: #C98420; --hd: #111316; --hd2: #111316; --hdmute: #5E636B;
  --sea: #E6ECEF; --land: #FFFFFF; --landline: #C3CACF; --landhi: #F5EFE3; --nbr: #F1F1EE; --nbrline: #D6D8D5; --river: #9AB9CF; --label: #8A9097;
  --shadow: 0 1px 2px rgba(17, 19, 22, .06), 0 8px 24px rgba(17, 19, 22, .08);
  --note-bg: #FBF4E8; --note-line: #EBD8B5; --note-ink: #6B4A0A; --halo: #FFFFFF; --lab: #111316;
}
:root[data-theme="dark"] {
  --bg: #070C11; --panel: #0F171F; --panel2: #0B1218; --ink: #E9EDF0; --muted: #8C99A5; --line: #1D2833; --chip: #16212B;
  --accent: #E3A445; --amber: #E3A445; --hd: #E9EDF0; --hd2: #E9EDF0; --hdmute: #8C99A5;
  --sea: #08121A; --land: #101B25; --landline: #2A3A48; --landhi: #1A2A38; --nbr: #0C151D; --nbrline: #1C2833; --river: #24445C; --label: #7D8B97;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  --note-bg: #1E1A10; --note-line: #3A3020; --note-ink: #E8C98E; --halo: #070C11; --lab: #E9EDF0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #070C11; --panel: #0F171F; --panel2: #0B1218; --ink: #E9EDF0; --muted: #8C99A5; --line: #1D2833; --chip: #16212B;
    --accent: #E3A445; --amber: #E3A445; --hd: #E9EDF0; --hd2: #E9EDF0; --hdmute: #8C99A5;
    --sea: #08121A; --land: #101B25; --landline: #2A3A48; --landhi: #1A2A38; --nbr: #0C151D; --nbrline: #1C2833; --river: #24445C; --label: #7D8B97;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
    --note-bg: #1E1A10; --note-line: #3A3020; --note-ink: #E8C98E; --halo: #070C11; --lab: #E9EDF0;
    color-scheme: dark;
  }
}
body { font-feature-settings: "cv11", "ss01"; letter-spacing: -.005em; }

/* the map's toolbar: flat, quiet, one line */
.top { background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); align-items: center; }
.top .brand h1 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
.brent { color: var(--muted); font-weight: 500; }
.brent .up { color: #2E9A5B; } .brent .down { color: #D2493A; }
nav.views a { color: var(--muted); font-weight: 500; font-size: 13.5px; padding: 12px 12px 11px; border-bottom-width: 2px; }
nav.views a:hover { color: var(--ink); }
nav.views a[aria-current=page] { color: var(--ink); border-bottom-color: var(--amber); }
.acct .tier { background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--fb); font-weight: 500; text-decoration: none; }
.acct .tier.pro { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.acct .em { color: var(--muted); }

/* surfaces and controls */
.btn.primary, .mapbtn[aria-expanded=true], .pills button[aria-pressed=true], .toast, .ptip { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.search input:focus { background: var(--panel); }
.notice, .note { background: var(--note-bg); border-color: var(--note-line); color: var(--note-ink); }
.key { background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--line); border-radius: 10px; }
.verif b.lvl { background: var(--panel); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--panel) 88%, transparent) !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--panel); color: var(--ink); border-bottom-color: var(--line); }
.leaflet-bar { border-color: var(--line) !important; }
.leaflet-tooltip { background: var(--panel); color: var(--ink); border-color: var(--line); }
.leaflet-tooltip-top::before { border-top-color: var(--panel); } .leaflet-tooltip-bottom::before { border-bottom-color: var(--panel); }
.leaflet-tooltip-left::before { border-left-color: var(--panel); } .leaflet-tooltip-right::before { border-right-color: var(--panel); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--ink); }
.alabel span { color: var(--lab); text-shadow: 0 0 2px var(--halo), 0 0 3px var(--halo), 0 0 4px var(--halo), 0 0 5px var(--halo); font-weight: 600; }
.slabel span { text-shadow: 0 0 2px var(--halo), 0 0 3px var(--halo); font-weight: 600; }
.ov input::after { background: var(--panel); }
.modal-card { border: 1px solid var(--line); }
.cs.low { background: color-mix(in srgb, #2E9A5B 16%, transparent); color: #2E9A5B; }
.cs.mod { background: color-mix(in srgb, #C98420 18%, transparent); color: var(--accent); }
.cs.high { background: color-mix(in srgb, #D2493A 16%, transparent); color: #D2493A; }
input, select, textarea { background-color: var(--panel); color: var(--ink); }

/* select arrows that stay visible in dark */
:root[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none' stroke='%238C99A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l4-4 4 4M2 10l4 4 4-4'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none' stroke='%238C99A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l4-4 4 4M2 10l4 4 4-4'/%3E%3C/svg%3E"); } }

/* free view: clean shaded circles with a count (not blurry blobs) */
.blob { opacity: .2; filter: none; box-shadow: inset 0 0 0 1.5px var(--c); }
.blobw::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.blobw b { color: var(--ink); text-shadow: 0 0 3px var(--halo), 0 0 3px var(--halo); font-weight: 700; font-family: var(--fb); }
/* the street map sits under everything and never catches clicks */
.leaflet-gl-layer { pointer-events: none; }
.leaflet-control-attribution a { color: var(--muted); }
/* 3D view controls in dark */
:root[data-theme="dark"] #map3d .maplibregl-ctrl-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] #map3d .maplibregl-ctrl-icon { filter: invert(1); } }
#map3d .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--muted); }
#map3d .maplibregl-ctrl-attrib a { color: var(--muted); }