/* Site maps (docs/specs/site-maps.md, scripts/site/maps/, site/map.js), loaded on the map pages only.
   The drawings are dark technical plans in the site palette. */
figure.map { width: min(1180px, calc(100vw - 32px)); margin: 1.4em 0 1.8em calc(50% - min(590px, 50vw - 16px)); background: #0a0f19; border: 1px solid var(--line); border-radius: 4px; position: relative; }
figure.map .map-view { overflow: hidden; outline: none; touch-action: none; cursor: grab; border-radius: 4px 4px 0 0; }
figure.map.map-static .map-view { cursor: default; touch-action: auto; overflow-x: auto; }
figure.map .map-view:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
figure.map .m-svg { display: block; width: 100%; height: auto; }
figure.map.map-static .m-svg { width: auto; max-width: 100%; margin: 0 auto; }
@media (max-width: 640px) { figure.map.map-static .m-svg { min-width: 560px; max-width: none; } }
figure.map figcaption { font-size: 14px; color: var(--muted); padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.map-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.map-tools button { background: #111826e6; color: var(--text); border: 1px solid #2a3650; border-radius: 3px; min-width: 32px; height: 30px; font: 600 15px var(--sans); cursor: pointer; padding: 0 8px; }
.map-tools button:hover { border-color: var(--accent); }
.map-preview { position: absolute; top: 48px; right: 10px; width: min(360px, calc(100% - 20px)); max-height: calc(100% - 100px); overflow: auto; background: #0d1320f5; border: 1px solid #2a3650; border-radius: 4px; padding: 12px 14px; z-index: 3; box-shadow: 0 8px 30px #0008; }
.map-preview img { width: 100%; height: auto; border-radius: 3px; display: block; margin: 0 0 8px; }
.map-preview h3 { margin: 2px 0 6px; font-size: 17px; }
.map-preview p { font-size: 14px; margin: .4em 0; }
.map-preview .btn { padding: 7px 14px; font-size: 14px; }
.map-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.map-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.map-where { font: 12px var(--mono); color: var(--accent); margin: 0; }
.map-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; list-style: none; padding: 0; margin: .8em 0 1.6em; font-size: 14px; }
.map-legend li { display: flex; align-items: center; gap: 10px; max-width: none; }
.map-legend svg { flex: none; overflow: visible; }
.map-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 1em 0; }
.map-card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; max-width: none; }
.map-card img { width: 100%; height: auto; display: block; }
.map-card > div { padding: 10px 14px 12px; }
.map-card h3 { margin: 2px 0 6px; font-size: 17px; }
.map-card p { font-size: 14.5px; margin: .4em 0; }
.map-places img { width: calc(100% + 32px); margin: -14px -16px 10px; height: auto; display: block; }

/* Ground and water */
.m-sea { fill: #0e2233; } .m-beach { fill: #3a3326; } .m-slope { fill: #2a271f; } .m-plateau { fill: #1c1b18; }
.m-ice { fill: #1d2430; } .m-space { fill: #070a10; }
.m-contour { stroke: #4a4436; stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.m-contour-t { font: 10.5px var(--mono); fill: #8d846d; }
.m-shore { stroke: #6fa3c4; stroke-width: 2; fill: none; }
.m-water-t { font: italic 13px var(--sans); fill: #6fa3c4; }
.m-slope-t { font: italic 12px var(--sans); fill: #8d846d; }
/* Structures */
.m-bld { stroke: #e8e0cc; stroke-width: 1.2; }
.m-inhabited { fill: #6b4a22; } .m-working { fill: #34465e; } .m-unoccupied { fill: #2b2f36; }
.m-k-apron, .m-k-pad, .m-k-terrace { fill: #2b2f36; stroke-dasharray: 5 3; }
.m-k-jetty { fill: #3b3f47; }
.m-haz-hydrocarbon { fill: url(#m-hatch-hydrocarbon); } .m-haz-oxygen { fill: url(#m-hatch-oxygen); } .m-haz-reactor { fill: url(#m-hatch-reactor); }
.m-haz-biocontainment { stroke: #3fbf6a; stroke-width: 2; }
.m-hatch-bg { fill: #24262b; } .m-hatch-hc { stroke: #d08a2a; stroke-width: 2.4; } .m-hatch-o2 { stroke: #7fc8e0; stroke-width: 2.4; } .m-hatch-rx { stroke: #c46be0; stroke-width: 1.4; }
.m-hatch-slope { stroke: #3d382c; stroke-width: 1; }
.m-barge { fill: #3d4652; stroke: #c9d3de; stroke-width: 1.2; }
.m-rotating { fill: #2a3d55; stroke: #9fd8e8; stroke-width: 1.2; }
.m-structure { fill: #2b2f36; stroke: #e8e0cc; stroke-width: 1.2; }
.m-radiator { fill: #4a2a1a; stroke: #ff7a2e; stroke-width: 1.2; }
.m-shield { fill: #3a3f48; stroke: #e8e0cc; stroke-width: 1.6; }
.m-reactor { fill: url(#m-hatch-reactor); stroke: #c46be0; stroke-width: 1.2; }
.m-tank { fill: #3b3424; stroke: #d08a2a; stroke-width: 1.2; }
.m-shadow { fill: #c46be012; stroke: #c46be088; stroke-width: 1; stroke-dasharray: 6 4; }
.m-corridor { fill: #9fd8e80d; stroke: #9fd8e888; stroke-width: 1; stroke-dasharray: 8 5; }
.m-axis { stroke: #9aa3b2; stroke-width: .8; stroke-dasharray: 12 4 2 4; fill: none; }
/* Links */
.m-link { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-link-heated-spine, .m-link-tunnel { stroke: #ffb866; stroke-width: 5; stroke-opacity: .8; }
.m-link-power { stroke: #f2d35c; stroke-dasharray: 7 4; }
.m-link-power-heat { stroke: #ff8a5c; stroke-dasharray: 7 4; }
.m-link-cold-hydrocarbon { stroke: #d08a2a; }
.m-link-oxygen { stroke: #7fc8e0; }
.m-link-water { stroke: #5aa8ff; stroke-dasharray: 2 4; }
.m-link-data { stroke: #b9b2a2; stroke-dasharray: 2 3; }
.m-route { fill: none; stroke: #e8e0cc; stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
/* Keep-outs, fields of view */
.m-keep { fill: none; stroke-width: 1.6; }
.m-keep-a { stroke: #e0402f; stroke-dasharray: 10 6; } .m-keep-b { stroke: #ff7a2e; stroke-dasharray: 4 5; }
.m-keep-t { font: 12px var(--sans); fill: #ff9a7a; paint-order: stroke; stroke: #0a0f19; stroke-width: 3px; }
.m-zone { fill: #ffffff07; stroke-width: 1; stroke-dasharray: 3 4; }
.m-zone-rx { stroke: #c46be0; } .m-zone-hc { stroke: #d08a2a; }
.m-window { fill: #ffd98a1c; stroke: #ffd98a66; stroke-width: 1; }
.m-wedge { fill: #9fd8e81f; stroke: #9fd8e870; stroke-width: 1; }
.m-sight { stroke: #ffd98a; stroke-width: 1.2; stroke-dasharray: 6 4; fill: none; } .m-eye { fill: #ffd98a; }
/* Text */
.m-label { font: 500 12px var(--sans); fill: #f0e9d8; }
.m-sub { font-weight: 400; font-size: 10.5px; fill: #b9b2a2; }
.m-in { paint-order: stroke; stroke: #0008; stroke-width: 3px; }
.m-label-bg { fill: #0a0f19cc; }
.m-leader { stroke: #b9b2a2; stroke-width: .8; fill: none; }
.m-note { font: 12px var(--sans); fill: #b9b2a2; }
.m-tick { font: 10.5px var(--mono); fill: #b9b2a2; }
.m-title { font: 600 13px var(--sans); fill: #e8e0cc; letter-spacing: .04em; }
/* Furniture */
.m-scale-a { fill: #e8e0cc; } .m-scale-b { fill: #0a0f19; stroke: #e8e0cc; stroke-width: .8; }
.m-north-ring { fill: #0a0f19cc; stroke: #e8e0cc; stroke-width: 1; } .m-north-head { fill: #e8e0cc; } .m-north-n { font: 600 11px var(--sans); fill: #e8e0cc; }
.m-dim { stroke: #9aa3b2; stroke-width: .8; fill: none; } .m-dim-line { stroke: #cfd6e2; } .m-arrowhead { fill: #cfd6e2; }
.m-dim-t { font: 11px var(--mono); fill: #e6ebf3; stroke: #0a0f19; stroke-width: 3px; paint-order: stroke; }
/* Pins */
.m-pin { cursor: pointer; }
.m-pin circle { stroke: #0a0f19; stroke-width: 2; }
.m-pin-view circle { fill: #9fd8e8; } .m-pin-inspect circle { fill: #c9a04a; }
.m-pin-glyph { fill: #0a0f19; } .m-pin-n { font: 600 11px var(--sans); fill: #0a0f19; }
.m-pin:hover circle, .m-pin:focus circle, .m-pin.on circle { stroke: #fff; stroke-width: 2.5; }
.m-pin:focus { outline: none; }
/* Sections and interiors */
.m-sec-ground { fill: #2a271f; stroke: #8d846d; stroke-width: 1.2; } .m-sec-sea { fill: #0e2233; } .m-sec-water { stroke: #6fa3c4; stroke-width: 2; }
.m-hall-wall { fill: #1c1b18; stroke: #e8e0cc; stroke-width: 2.5; }
.m-room { stroke: #e8e0cc88; stroke-width: 1; }
.m-room-prom { fill: #4a3a24; } .m-room-pool { fill: #1f4a5e; } .m-room-cafe { fill: #6b4a22; } .m-room-stair { fill: #3a3f48; } .m-room-gallery { fill: #6b4a22; }
.m-void { fill: #ffffff08; stroke: #e8e0cc55; stroke-dasharray: 4 4; }
.m-open { stroke-width: 5; } .m-open-window { stroke: #9fd8e8; } .m-open-door { stroke: #0a0f19; }