/* ============================================================
   OLD SKOOL RP — Patrol jurisdiction map
   Scoped styles for map.html. Everything here builds on the
   tokens in styles.css (--ink, --off, --muted, --line, --green,
   --font-display / --font-mono / --font-body) — no new palette.
   ============================================================ */

/* Department colours. These paint DATA, not interface, so they are
   deliberately separate from the brand green and fixed rather than
   themed — they sit on a map raster that never changes. */
.pm {
  --lspd:  #1D5FD8;
  --lscso: #7B34C8;
  --bcso:  #D42626;
  --sahp:  #0E8C7C;
  --restricted: #FF6B82;
  --panel-bg: var(--ink-2);
  --panel-line: var(--line);
}

.pm-wrap { max-width: var(--maxw); margin: 20px auto 90px; padding: 0 20px; }

.pm-head { margin-bottom: 22px; }
.pm-head h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 48px);
  line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.pm-head h1 span { color: var(--muted-2); }
.pm-head p { color: var(--muted); font-size: .95rem; margin-top: 10px; max-width: 62ch; line-height: 1.65; }

/* ---------- layout ---------- */
.pm-board { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .pm-board { grid-template-columns: minmax(0,1fr); } }

.pm-panel { background: var(--panel-bg); border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm); overflow: hidden; }

/* ---------- toolbar ---------- */
.pm-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--panel-line); background: var(--ink-1); }
.pm-group { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; }
.pm-btn { appearance: none; border: 0; background: var(--ink-3); color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; transition: background .14s, color .14s; }
.pm-btn:hover { background: var(--ink-2); color: var(--off); }
.pm-btn[aria-pressed="true"] { background: var(--green); color: var(--ink); }
/* department buttons wear their own colour so the control matches the area it paints */
.pm-btn.pm-ag[aria-pressed="true"] { background: var(--kc); color: #fff; }
.pm-btn.pm-ag[aria-pressed="true"]:hover { background: var(--kc); filter: brightness(1.14); }
.pm-spacer { flex: 1 1 auto; min-width: 8px; }
.pm-readout { font-family: var(--font-mono); font-size: .7rem; color: var(--muted-2);
  display: flex; gap: 12px; white-space: nowrap; }
.pm-readout b { color: var(--off); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- map ---------- */
.pm-mapwrap { position: relative; padding: 8px; overflow: hidden; }
#map { display: block; width: 100%; aspect-ratio: 1/1; touch-action: none; cursor: crosshair;
  background: #0d94c8; border-radius: 4px; }
#map.dragging { cursor: grabbing; }
/* the atlas is a bright raster in a dark page — knock it back so it sits in the design */
#base { filter: brightness(.82) saturate(.94) contrast(1.04); }

/* opacity on the GROUP, not the paths: coverage stacks (LSPD over LSCSO over
   BCSO over SAHP) and the topmost visible layer must win cleanly rather than
   three translucent layers compositing into mud */
#map #l-zones { opacity: .45; }
#map .zfill { fill-opacity: 1; stroke: none; }
#map .f-LSPD  { fill: var(--lspd); }
#map .f-LSCSO { fill: var(--lscso); }
#map .f-BCSO  { fill: var(--bcso); }
#map .f-SAHP  { fill: var(--sahp); }

/* each department hides independently — drop one to read what is underneath */
.pm[data-hidden~="LSPD"]  #map .f-LSPD,
.pm[data-hidden~="LSCSO"] #map .f-LSCSO,
.pm[data-hidden~="BCSO"]  #map .f-BCSO,
.pm[data-hidden~="SAHP"]  #map .f-SAHP { display: none; }

#map .bdy { fill: none; stroke-linejoin: round; stroke-linecap: round;
  stroke-width: calc(4px * var(--z)); paint-order: stroke; }
#map .bdy-halo { fill: none; stroke: #fff; stroke-opacity: .55;
  stroke-width: calc(9px * var(--z)); stroke-linejoin: round; stroke-linecap: round; }
#map .b-LSPD { stroke: var(--lspd); }
#map .b-CTY  { stroke: #101010; }
#map .countyline { stroke-dasharray: calc(26px * var(--z)) calc(11px * var(--z))
  calc(6px * var(--z)) calc(11px * var(--z)); }

#map .restricted { fill: var(--restricted); fill-opacity: .16; stroke: var(--restricted);
  stroke-width: calc(2.4px * var(--z)); stroke-dasharray: calc(9px * var(--z)) calc(7px * var(--z)); }

#map text { pointer-events: none; paint-order: stroke fill; stroke-linejoin: round; }
#map .t-region { font-family: var(--font-display); font-size: calc(84px * var(--z));
  fill: #fff; fill-opacity: .9; stroke: rgba(0,0,0,.55); stroke-width: calc(7px * var(--z));
  letter-spacing: .09em; text-anchor: middle; text-transform: uppercase; }
#map .t-restricted { font-family: var(--font-mono); font-weight: 700;
  font-size: calc(19px * var(--z)); fill: #fff; stroke: rgba(0,0,0,.75);
  stroke-width: calc(5px * var(--z)); letter-spacing: .07em; text-anchor: middle; }

/* markers sit in a per-marker <g> counter-scaled on zoom, so no --z here */
#map .t-stn { font-family: var(--font-mono); font-size: 17px; fill: #fff;
  stroke: rgba(0,0,0,.8); stroke-width: 5px; letter-spacing: .02em; }
#map .stn { stroke: #fff; stroke-width: 3px; }
#map .s-LSPD { fill: var(--lspd); }  #map .s-LSCSO { fill: var(--lscso); }
#map .s-BCSO { fill: var(--bcso); }  #map .s-SAHP  { fill: var(--sahp); }
#map .hqring { fill: none; stroke-width: 3.5px; }
#map .xhair { stroke: var(--green); stroke-width: calc(1.6px * var(--z));
  opacity: .9; pointer-events: none; }

#map[data-detail="wide"] .t-stn { display: none; }
#map g[data-off="1"] { display: none; }

/* ---------- key ---------- */
.pm-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }
@media (max-width: 1080px) { .pm-rail { position: static; } }
.pm-sect { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); padding: 12px 14px 10px;
  border-bottom: 1px solid var(--panel-line); display: flex;
  justify-content: space-between; align-items: baseline; gap: 10px; }
.pm-sect em { font-style: normal; color: var(--line-strong); letter-spacing: 0; }

/* legend rows — the toggles are in the toolbar, so these are not clickable */
.pm-key { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 0 11px;
  align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--panel-line); }
.pm-key:last-child { border-bottom: 0; }
.pm-chip { width: 26px; height: 26px; border-radius: 4px; margin-top: 2px;
  background: color-mix(in srgb, var(--kc) 40%, transparent); border: 1.5px solid var(--kc); }
.pm-ab { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--kc); }
.pm-nm { font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--off); margin-top: 4px; }
.pm-area { font-family: var(--font-mono); font-size: .64rem; color: var(--muted-2);
  margin-top: 6px; line-height: 1.5; }

.pm-note { padding: 12px 14px; font-size: .78rem; color: var(--muted); line-height: 1.6; }
.pm-note b { color: var(--off); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }