/* Curbcut design system: shared by every page. Colors and type follow the Charge Sheet family (chargesheet.io).
   Page styles (style.css, scout.css) use these tokens only; no hard-coded colors there. */
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-VF.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }

:root {
  /* Charge Sheet palette */
  --ink: #0D1F36; --slate: #5A6B80; --mist: #F3F7FB; --white: #FFFFFF; --line: #DCE5EF;
  --blue: #2462F5; --blue-deep: #123A8F; --ice: #E7EFFE; --amber: #E9A23B; --amber-soft: #FDF3E3;
  --pos: #1F7F55; --pos-soft: #E4F3EB; --neg: #C8412F; --neg-soft: #FBEAE7; --night: #0A1322; --night-2: #13233A;
  /* roles (the names older styles use) */
  --bg: var(--mist); --panel: var(--white); --muted: var(--slate); --accent: var(--blue); --accent-soft: var(--ice);
  --accent-hover: #1B4FD0; --ok: var(--pos); --warn: #9A5B0B; --warn-soft: var(--amber-soft); --err: var(--neg);
  --err-soft: var(--neg-soft); --subtle: #EEF3F8; --field: #C9D5E3;
  /* site ratings */
  --r-strong: #1F7F55; --r-good: #4E9A3A; --r-fair: #C78A1E; --r-weak: #93A3B8;
  /* shape */
  --radius: 10px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(13,31,54,.06), 0 4px 16px rgba(13,31,54,.08);
  --shadow-lg: 0 8px 32px rgba(13,31,54,.16); --hdr: 56px;
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- header (same on every page) ---------- */
header { height: var(--hdr); display: flex; align-items: center; gap: 16px; padding: 0 18px; background: var(--night);
  color: #fff; position: relative; z-index: 1100; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  white-space: nowrap; color: #fff; text-decoration: none; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.brand span, .brand .sub { font-weight: 500; color: #93A3B8; font-size: 13px; letter-spacing: 0; }
.beta { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px;
  border-radius: 20px; background: rgba(110,155,255,.18); color: #A9C3FF; }
.hdr-spacer { flex: 1; }
.navlinks { display: flex; gap: 2px; align-items: center; }
.navlinks a { color: #A9B7CA; font-size: 13.5px; font-weight: 500; text-decoration: none; padding: 7px 10px;
  border-radius: 8px; white-space: nowrap; }
.navlinks a.on { color: #fff; background: var(--night-2); }
.navlinks a:hover { color: #fff; }
.modeswitch { display: flex; background: var(--night-2); border-radius: 9px; padding: 3px; }
.modeswitch button { margin: 0; border: 0; background: transparent; color: #A9B7CA; padding: 5px 16px;
  border-radius: 7px; font-weight: 600; font-size: 13px; }
.modeswitch button:hover { color: #fff; }
.modeswitch button.on { background: #fff; color: var(--ink); }
.hdr-actions { display: flex; gap: 8px; align-items: center; }
.hdr-actions select { max-width: 220px; margin: 0; background: var(--night-2); color: #DCE5EF; border-color: #24395A; }
button.ghost { background: transparent; color: #fff; border-color: #2E4566; }
button.ghost:hover { border-color: #A9C3FF; color: #fff; }


/* ---------- controls ---------- */
label { display: block; font-size: 12.5px; color: var(--muted); margin: 8px 0 0; font-weight: 500; }
input, select, textarea { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--field);
  border-radius: var(--radius-sm); font: inherit; color: var(--ink); background: var(--panel); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
button { padding: 8px 13px; border: 1px solid var(--field); background: var(--panel); color: var(--ink);
  border-radius: var(--radius-sm); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; margin-top: 3px;
  transition: border-color .12s, background .12s, color .12s; }
button:hover { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
button.primary:disabled:hover { background: var(--accent); }

/* ---------- icons (inline SVG, see icons.js) ---------- */
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ico.lg { width: 22px; height: 22px; }

/* ---------- toast, spinner ---------- */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 11px 16px; border-radius: var(--radius); z-index: 3000; max-width: min(560px, calc(100% - 32px));
  box-shadow: var(--shadow-lg); font-size: 13.5px; }
.spin { width: 20px; height: 20px; border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* ---------- map controls ---------- */
.leaflet-control-zoom a, .leaflet-control-layers { border-radius: var(--radius-sm) !important; }
.leaflet-bar, .leaflet-control-layers { border: none !important; box-shadow: var(--shadow) !important; }
.leaflet-control-layers-toggle { width: 36px !important; height: 36px !important; }
.leaflet-container { font-family: var(--font); background: #E3E9F0; }
/* Leaflet 1.9 blends tiles with "plus-lighter", which shows bright lines where scaled imagery tiles meet:
   draw them normally and overlap each by a pixel instead */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
.leaflet-tile-container img.leaflet-tile { width: 257px !important; height: 257px !important; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  header { gap: 10px; padding: 0 12px; }
  .brand span, .brand .sub, .navlinks a:not(.on) { display: none; }
  .modeswitch button { padding: 5px 11px; }
}