.suspect-map {
  padding: 11px;
  background: #081317;
}

.map-canvas {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #314a52;
  color: inherit;
  background:
    radial-gradient(circle at 50% 40%, rgba(21, 57, 70, .34), transparent 70%),
    linear-gradient(rgba(127, 159, 168, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 159, 168, .04) 1px, transparent 1px),
    #06131d;
  background-size: auto, 12px 12px, 12px 12px, auto;
  cursor: zoom-in;
  text-align: left;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .32);
}

.map-canvas svg { overflow: visible; }

.blueprint-frame {
  fill: none;
  stroke: #607b85;
  stroke-width: 1.5;
}

.blueprint-grid { fill: url(#museum-blueprint-grid); opacity: .16; }
.blueprint-grid + .floor-zones { isolation: isolate; }
.map-canvas pattern path { fill: none; stroke: #4c6872; stroke-width: .7; }

.floor-zones path {
  stroke: none;
}

.zone-gallery { fill: #102227; }
.zone-lab { fill: #111f24; }
.zone-corridor { fill: #0a191e; }
.zone-archive { fill: #0d1b20; }
.zone-technical { fill: #0b171b; }
.zone-dock { fill: #101c20; }

.floor-walls path,
.floor-walls rect {
  fill: none;
  stroke: #c8d6d9;
  stroke-width: 11;
  stroke-linecap: square;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 2px rgba(186, 220, 229, .32));
}

.floor-walls .outer-wall {
  stroke: #e0e7e8;
  stroke-width: 18;
}

.wall-details {
  fill: none;
  stroke: #6f858c;
  stroke-width: 2.2;
}

.floor-doors path {
  fill: none;
  stroke: #a5b4b8;
  stroke-width: 2.5;
}
.floor-doors .sliding-door { stroke: #8ca0a6; }

.floor-furniture {
  fill: none;
  stroke: #708891;
  stroke-width: 2;
}

.floor-furniture circle { fill: #0a171b; }
.floor-furniture .van-outline { fill: rgba(99, 124, 132, .08); stroke: #718991; }
.floor-furniture .van-window { fill: rgba(99, 124, 132, .12); }
.floor-furniture .hatched { fill: url(#museum-fine-hatch); }
.camera-fixtures { stroke: #e2b85d; }

.architectural-details {
  fill: none;
  stroke: #49636d;
  stroke-width: 1.4;
  opacity: .68;
}
.architectural-details .corridor-guides { opacity: .22; }

.floor-labels {
  fill: #d2dcde;
  font: 800 27px var(--mono);
  letter-spacing: .055em;
}

.floor-symbols {
  fill: #567079;
  font: 700 15px var(--mono);
  letter-spacing: .04em;
}

.map-route path {
  fill: none;
  stroke: rgba(244, 184, 72, .82);
  stroke-width: 4.5;
  stroke-dasharray: 16 12;
}

.stolen-object-marker path {
  fill: #d7e4e6;
  stroke: #071014;
  stroke-width: 4;
}

.stolen-object-marker .object-gem { fill: none; stroke: #d7e4e6; stroke-width: 2.5; }

.stolen-object-marker circle:not(.object-pulse) {
  fill: #e76f70;
  stroke: #071014;
  stroke-width: 1.5;
}

.stolen-object-marker .object-pulse {
  fill: rgba(231, 111, 112, .08);
  stroke: #e76f70;
  stroke: #efb13f;
  stroke-width: 4;
  stroke-dasharray: 11 8;
}

.stolen-object-marker text {
  fill: #efb13f;
  font: 900 18px var(--mono);
  letter-spacing: .05em;
}

.map-legend { flex-wrap: wrap; }
.marker-o { color: #f4eeee !important; background: #e76f70; }

.map-zoom-hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  padding: 6px 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid #66818a;
  color: #d6e2e4;
  background: rgba(4, 13, 18, .88);
  font: 800 .39rem/1 var(--mono);
  letter-spacing: .06em;
  pointer-events: none;
}
.map-zoom-hint b { color: var(--mint); font-size: .65rem; }

.map-heading-actions { display: flex; align-items: center; gap: 12px; }
.map-zoom-close {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #66818a;
  color: #d8e3e5;
  background: #0b1b23;
  font: 400 1.35rem/1 var(--sans);
}
.map-zoom-close:hover, .map-zoom-close:focus-visible { border-color: var(--mint); color: var(--mint); }

body.map-zoom-open { overflow: hidden; }
.suspect-map.is-expanded {
  position: fixed;
  z-index: 140;
  inset: 10px;
  display: block;
  width: auto;
  max-width: 1450px;
  height: auto;
  max-height: calc(100vh - 20px);
  margin: auto;
  padding: 0;
  border-color: #78929a;
  background: #07151d;
  box-shadow: 0 0 0 100vmax rgba(1, 7, 10, .9), 0 26px 90px rgba(0, 0, 0, .75);
}
.suspect-map.is-expanded > header { position: absolute; z-index: 4; top: 18px; right: 18px; margin: 0; }
.suspect-map.is-expanded > header > div:first-child { display: none; }
.suspect-map.is-expanded .map-heading-actions time { font-size: 1rem; }
.suspect-map.is-expanded .map-zoom-close { display: grid; place-items: center; }
.suspect-map.is-expanded .map-canvas { width: 100%; height: 100%; min-height: 0; border: 0; cursor: default; }
.suspect-map.is-expanded .map-canvas svg { width: 100%; height: 100%; max-height: none; }
.suspect-map.is-expanded .map-zoom-hint { display: none; }
.suspect-map.is-expanded .map-legend,
.suspect-map.is-expanded > p { display: none; }

.suspect-marker circle { stroke-width: 8; }
.suspect-marker circle:not(.marker-pulse) { r: 28px; }
.suspect-marker .marker-pulse { r: 44px; stroke-width: 6; }
.suspect-marker text { font-size: 24px; }

.timeline-slot.is-selected {
  border-color: var(--amber);
  background: rgba(226, 184, 93, .1);
  box-shadow: inset 0 -3px var(--amber);
}

.timeline-slot.is-selected time { border-color: var(--amber); color: var(--amber); }

@media (min-width: 781px) and (max-width: 1100px) {
  .suspect-map { grid-column: 2; grid-row: 2 / span 3; }
  .suspect-map.is-expanded { grid-column: auto; grid-row: auto; }
}

@media (max-width: 620px) {
  .suspect-map.is-expanded { inset: 5px; max-height: calc(100vh - 10px); }
  .suspect-map.is-expanded > header { top: 10px; right: 10px; }
}