.crossings-map-shell { width: min(100% - 64px, 1380px); }
.crossings-map-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0 24px; }
.crossings-map-heading h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.2; }
.crossings-map-heading p { margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
.crossings-map-total { flex-shrink: 0; color: var(--muted); font-size: 0.8rem; }
.crossings-map-toolbar { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.crossings-map-district { display: flex; align-items: center; gap: 12px; }
.crossings-map-district label, .crossings-map-toolbar p { margin: 0; font-size: 0.8rem; }
.crossings-map-district select { width: 235px; max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid rgba(253,248,238,.38); border-radius: 6px; background: var(--brand-blue-deep); color: var(--brand-cream); font: inherit; font-size: .88rem; }
.crossings-map-toolbar p { color: var(--muted); }
.crossings-map-fit { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--brand-cream); font: inherit; font-size: .8rem; cursor: pointer; }
.crossings-map-fit:hover { background: var(--panel); }
.crossings-map-fit span { font-size: 1.25rem; line-height: 1; }
.crossings-map-canvas { z-index: 0; width: 100%; height: min(70svh, 800px); min-height: 440px; border: 1px solid rgba(253,248,238,.5); border-radius: 10px; background: #e7ece9; color: #16344e; font-family: var(--font-sans); }
.crossings-map-canvas:focus-visible { outline: 3px solid var(--brand-cream); outline-offset: 4px; }
.crossings-map-canvas .leaflet-control-attribution { padding: 3px 6px; background: rgba(255,255,255,.94); color: #254358; font-size: 10px; }
.crossings-map-canvas .leaflet-control-attribution a { color: #00549c; }
.crossings-map-canvas .leaflet-bar { overflow: hidden; border: 1px solid #b5c3cc; border-radius: 7px; box-shadow: 0 2px 8px rgba(0,40,70,.12); }
.crossings-map-canvas .leaflet-control-zoom a { width: 42px; height: 42px; line-height: 42px; color: #004f9a; }
.crossings-map-canvas .leaflet-control-zoom a:hover { background: #edf4fa; }
.crossings-map-canvas .leaflet-control-scale-line { border-color: #405563; background: rgba(255,255,255,.8); color: #254358; }
.crossings-map-canvas a:focus-visible, .crossings-map-marker:focus-visible, .crossings-map-cluster:focus-visible { outline: 3px solid #004f9a; outline-offset: 3px; }
.crossings-map-canvas .leaflet-control-zoom a:focus-visible { outline-offset: -4px; }
.crossings-map-marker { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(15,39,58,.36); text-align: center; }
.crossings-map-marker-symbol { font-size: 22px; font-weight: 700; line-height: 1; }
.map-kind-closure { background: #f4c768; color: #453416; }
.map-kind-station { background: #0060b9; color: #fff; }
.map-kind-unknown { background: #fdf8ee; color: #465b6b; }
.crossings-map-cluster { display: grid; border: 3px solid rgba(255,255,255,.92); border-radius: 50%; background: #003e75; box-shadow: 0 2px 8px rgba(0,40,70,.28); color: #fff; place-items: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crossings-map-canvas .leaflet-popup-content-wrapper, .crossings-map-canvas .leaflet-popup-tip { background: #fdfbf5; color: #16344e; box-shadow: 0 5px 24px rgba(0,33,59,.18); }
.crossings-map-canvas .leaflet-popup-content-wrapper { border-radius: 10px; }
.crossings-map-canvas .leaflet-popup-content { margin: 23px 23px 16px; font-size: 13px; line-height: 1.5; }
.crossings-map-popup h2 { margin: 7px 0 8px; font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -.02em; }
.crossings-map-canvas .crossings-map-popup p { margin: 8px 0; }
.crossings-map-popup-district { padding-right: 5px; color: #5a6b77; font-size: 11px; }
.crossings-map-popup-street, .crossings-map-popup-note { color: #576773; font-size: 12px; }
.crossings-map-popup-category { font-size: 12px; font-weight: 650; }
.map-category-closure { color: #775110; }
.map-category-station { color: #0057a6; }
.map-category-unknown { color: #576773; }
.crossings-map-canvas .crossings-map-popup-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: #00549c; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.crossings-map-canvas a.leaflet-popup-close-button { width: 32px; height: 32px; line-height: 32px; color: #465b6b; }
.crossings-map-key { padding-top: 18px; }
.crossings-map-legend { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; padding: 0; list-style: none; }
.crossings-map-legend li { display: flex; align-items: center; gap: 9px; font-size: .75rem; }
.map-legend-symbol { display: grid; width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; place-items: center; font-size: 17px; font-weight: 700; line-height: 1; }
.crossings-map-key p { margin: 12px 0 0; color: var(--muted); font-size: .75rem; }
.crossings-map-notice { padding: 14px 16px; border-left: 2px solid #ffd78a; background: rgba(0,45,90,.3); font-size: .83rem; line-height: 1.7; }
.crossings-map-notice a, .crossings-map-help a { text-decoration: underline; text-underline-offset: 3px; }
.crossings-map-help { max-width: 800px; margin-top: 22px; color: var(--muted); font-size: .77rem; line-height: 1.65; }
.crossings-map-help summary { width: fit-content; padding: 8px 0; color: var(--brand-cream); cursor: pointer; }
.crossings-map-help summary:focus-visible { outline: 2px solid var(--brand-cream); outline-offset: 3px; }
.crossings-map-page .crossings-footer { margin-top: 30px; }
@media (max-width: 700px) {
  .crossings-map-shell { width: calc(100% - 36px); }
  .crossings-map-heading { align-items: start; flex-direction: column; gap: 10px; padding: 24px 0 20px; }
  .crossings-map-heading p { max-width: 410px; font-size: .8rem; }
  .crossings-map-total { display: none; }
  .crossings-map-toolbar { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .crossings-map-district { width: 100%; }
  .crossings-map-district select { flex: 1; width: auto; min-width: 0; font-size: 1rem; }
  .crossings-map-toolbar p { font-size: .75rem; }
  .crossings-map-fit { min-height: 38px; padding: 5px 10px; font-size: .75rem; }
  .crossings-map-canvas { height: 65svh; min-height: 400px; border-radius: 8px; }
  .crossings-map-legend { gap: 12px 18px; }
  .crossings-map-legend li { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .crossings-map-canvas .leaflet-zoom-animated, .crossings-map-canvas .leaflet-marker-icon, .crossings-map-canvas .leaflet-marker-shadow { transition: none !important; }
}

/* Use the same panel treatment as Kolpino's existing analytics modal. */
.crossings-map-modal { width: min(1180px, calc(100% - 36px)); max-width: none; max-height: calc(100svh - 36px); padding: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: 24px; background: rgba(0,57,112,.98); color: var(--text); box-shadow: 0 32px 90px rgba(0,33,70,.46); }
.crossings-map-modal::backdrop { background: rgba(0,23,48,.72); backdrop-filter: blur(8px); }
.crossings-map-modal .analytics-header { padding: 18px 18px 8px; }
.crossings-map-intro { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.crossings-map-loading { margin: 0; padding: 0 18px 14px; color: var(--muted); font-size: .8rem; }
.crossings-map-modal .crossings-map-toolbar { padding: 0 18px; }
.crossings-map-modal .crossings-map-canvas { width: calc(100% - 36px); height: min(55svh, 570px); min-height: 280px; margin: 0 18px; }
.crossings-map-modal .crossings-map-key { padding: 16px 18px 20px; }
.crossings-map-modal .crossings-map-notice { margin: 0 18px 16px; }
.crossings-map-modal .crossings-map-key a { text-decoration: underline; text-underline-offset: 3px; }
.crossings-map-modal button:focus-visible, .crossings-map-modal select:focus-visible { outline: 2px solid var(--brand-cream); outline-offset: 3px; }
.crossings-map-modal [hidden] { display: none !important; }
.crossings-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width:560px) { .crossings-map-modal { width: calc(100% - 16px); max-height: calc(100svh - 16px); border-radius: 22px; } .crossings-map-modal .crossings-map-canvas { width: calc(100% - 24px); margin: 0 12px; } }