body[data-planner-view="community"] .analytics-main { min-width: 0; }
.map-intro { margin: -8px 0 19px; color: #657692; font-size: 12px; line-height: 1.7; }
.map-toolbar { display: flex; align-items: end; gap: 11px; margin-bottom: 13px; }
.map-toolbar label { display: grid; gap: 6px; color: #637594; font-size: 10px; font-weight: 600; }
.map-toolbar select, .map-toolbar input { width: min(180px, 20vw); height: 37px; padding: 0 11px; border: 1px solid #d4deec; border-radius: 7px; background: #fff; color: #27385a; font: inherit; font-size: 11px; }
.map-toolbar select:disabled { background: #f0f3f8; color: #8b99ab; }
.map-toolbar input { width: min(210px, 22vw); }
#mapCount { margin-left: auto; color: #687a97; font-size: 11px; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(245px, .7fr); gap: 12px; }
.map-panel, .map-detail, .map-list-panel { min-width: 0; border: 1px solid #d6deec; border-radius: 9px; background: #fff; box-shadow: 0 5px 15px #6880ad12; }
.map-panel { padding: 11px; }
.map-journey { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; min-height: 27px; margin: 0 0 9px; color: #7a8ba3; font-size: 10px; }
.map-journey button { border: 0; border-radius: 5px; padding: 5px 7px; background: transparent; color: #617492; font: inherit; font-weight: 650; cursor: pointer; }
.map-journey button:hover,.map-journey button:focus-visible { background: #edf2fd; color: #354ac0; }
.map-journey button[aria-current] { background: #e9effc; color: #3449bb; }
.map-stage { position: relative; }
.map-surface { overflow: hidden; border-radius: 6px; background: #e6eef0; }
#communityMap { display: block; width: 100%; height: auto; min-height: 330px; cursor: grab; touch-action: none; }
#communityMap.is-dragging { cursor: grabbing; }
#communityMap:focus-visible { outline: 3px solid #4058ca; outline-offset: -3px; }
.map-zoom-controls { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 3px; z-index: 2; padding: 4px; border: 1px solid #c5d2df; border-radius: 9px; background: #f9fbffe8; box-shadow: 0 3px 12px #26395630; backdrop-filter: blur(8px); }
.map-zoom-controls button { min-width: 29px; height: 29px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: #fff; color: #253857; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.map-zoom-controls button:last-child { font-size: 10px; }
.map-zoom-controls button:hover:not(:disabled),.map-zoom-controls button:focus-visible { border-color: #4058ca; background: #edf1ff; }
.map-zoom-controls button:disabled { opacity: .42; cursor: default; }
.map-zoom-controls span { min-width: 34px; color: #435575; font-size: 10px; font-weight: 700; text-align: center; }
.map-sea { fill: #e9f0f1; }
.map-grid-line { stroke: #cbdde1; stroke-width: .75; }
.map-land { fill: #b7c9c5; stroke: #eff4ef; stroke-width: .7; }
.map-area { cursor: pointer; }
.map-area path { fill: #748fe442; stroke: #4058c5bb; stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: fill .15s, stroke .15s; }
.map-area:hover path,.map-area:focus path { fill: #4967cb80; stroke: #223ba8; stroke-width: 2.5; }
.map-area:focus { outline: none; }
.map-area-continent path { fill: #6b89d333; stroke: #4260b6b3; stroke-width: 1.6; }
.map-area-country path { fill: #7993cf30; stroke: #4e68bdba; }
.map-area-region path { fill: #85a2d438; stroke: #4563b7c9; }
.map-area-region.is-selected path { fill: #4267d773; stroke: #203fb7; stroke-width: 3; }
.map-area-label { fill: #253d74; font-size: 12px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #f4f8f9e8; stroke-width: 3px; pointer-events: none; }
.map-area-fallback { fill: #6b83c9aa; stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.map-area-fallback:hover,.map-area-fallback:focus { fill: #294ac0; stroke-width: 2.5; }
.map-country-outline { fill: none; stroke: #2e4dc0; stroke-width: 2.3; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-pin { cursor: pointer; }
.map-pin .pin-halo { fill: #f7cb8e; opacity: .42; }
.map-pin .pin-building { fill: #243953; stroke: #fff7e6; stroke-width: 2; }
.map-pin .pin-roof { fill: #d4a778; }
.map-pin .pin-window { fill: #f9d693; }
.map-pin:hover .pin-halo, .map-pin:focus .pin-halo, .map-pin.is-active .pin-halo { opacity: .85; }
.map-pin:focus { outline: none; }
.map-pin:focus .pin-building { stroke: #304dcd; stroke-width: 3; }
.map-pin.is-active .pin-building { fill: #3b4dc7; }
.map-cluster { cursor: pointer; }
.map-cluster .cluster-halo { fill: #d9a265; opacity: .26; }
.map-cluster .cluster-body { fill: #273b63; stroke: #fff8e9; stroke-width: 2.5; }
.map-cluster text { fill: #fff; font-size: 15px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map-cluster:hover .cluster-halo, .map-cluster:focus .cluster-halo, .map-cluster.is-active .cluster-halo { opacity: .62; }
.map-cluster:focus { outline: none; }
.map-cluster:focus .cluster-body, .map-cluster.is-active .cluster-body { fill: #3b4dc7; stroke-width: 3; }
.map-cluster-list { display: grid; align-content: start; gap: 7px; max-height: 215px; margin: 8px 0; overflow-y: auto; }
.map-cluster-list[hidden],.map-roof-preview[hidden] { display: none; }
.map-cluster-list button { display: grid; gap: 3px; border: 1px solid #dce4f0; border-radius: 7px; padding: 9px 10px; background: #f9fbff; text-align: left; color: #27395a; cursor: pointer; }
.map-cluster-list button:hover,.map-cluster-list button:focus-visible { border-color: #596bce; background: #f0f3ff; }
.map-cluster-list strong { font-size: 11px; }
.map-cluster-list span { color: #71809a; font-size: 10px; }
.map-caption { margin: 9px 4px 0; color: #7c8ba0; font-size: 10px; line-height: 1.6; }
.map-caption a, .map-data-credit a { color: #3b4dc7; text-decoration: underline; }
.map-detail { display: flex; flex-direction: column; padding: 19px; }
.map-detail h2 { margin: 2px 0 8px; color: #26395b; font-size: 18px; line-height: 1.35; }
.map-detail > p:not(.eyebrow) { color: #687994; font-size: 11px; line-height: 1.65; }
.map-detail > a { margin-top: auto; color: #3548bf; font-size: 11px; text-decoration: none; }
.map-roof-preview { position: relative; height: 164px; margin: 10px 0 5px; overflow: hidden; border-radius: 7px; background: linear-gradient(#7d8fa3 0 55%, #d1b7a1 55% 69%, #6b776f 69%); }
.map-roof-preview[data-time="dawn"] { background: linear-gradient(#dba590 0 55%, #e8c4a4 55% 69%, #6b776f 69%); }
.map-roof-preview[data-time="day"] { background: linear-gradient(#9bc1cf 0 55%, #d5c7aa 55% 69%, #6b776f 69%); }
.map-roof-preview[data-time="night"] { background: linear-gradient(#273850 0 55%, #7e7380 55% 69%, #344946 69%); }
.map-roof-preview::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 30%; height: 25%; background: repeating-linear-gradient(90deg,#596d74 0 24px,#425961 24px 41px,#6d7d80 41px 50px); clip-path: polygon(0 45%, 10% 45%, 10% 0, 23% 0, 23% 45%, 36% 45%, 36% 15%, 53% 15%, 53% 45%, 70% 45%, 70% 0, 87% 0, 87% 45%, 100% 45%, 100% 100%, 0 100%); }
.map-roof-preview[data-weather="rain"]::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 12px, #d1e6f366 13px 14px, transparent 15px 25px); }
.preview-roof { position: absolute; left: 5%; right: 5%; bottom: -3%; height: 38%; background: #526355; clip-path: polygon(11% 0, 88% 0, 100% 100%, 0 100%); }
.preview-person { position: absolute; left: 51%; bottom: 19%; width: 13px; height: 27px; border-radius: 8px 8px 3px 3px; background: var(--hood, #bf7953); box-shadow: 0 -7px 0 -1px #c49b7f; }
.preview-decor { position: absolute; inset: 0; }
.preview-decor span { position: absolute; transform: translate(-50%,-50%); font-size: 19px; filter: drop-shadow(1px 2px 2px #182d37a0); }
.map-list-panel { margin-top: 13px; padding: 18px; }
.map-list-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.map-list-head h2 { margin: 2px 0 0; color: #26395b; font-size: 17px; }
.map-list-head span { color: #7988a0; font-size: 10px; }
.map-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.map-list button { display: grid; gap: 4px; min-width: 0; padding: 13px; border: 1px solid #dce4f0; border-radius: 7px; background: #f9fbff; text-align: left; color: #27395a; cursor: pointer; }
.map-list button:hover, .map-list button:focus-visible, .map-list button.is-active { border-color: #596bce; background: #f0f3ff; }
.map-list button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.map-list button span { color: #71809a; font-size: 10px; }
.map-empty { grid-column: 1/-1; padding: 35px 12px; color: #6f7f99; text-align: center; font-size: 12px; line-height: 1.7; }
.map-data-credit { margin: 13px 0 0; color: #8695ab; font-size: 10px; line-height: 1.6; }
@media(max-width: 1000px) { .map-layout { grid-template-columns: 1fr; } .map-detail { min-height: 280px; } .map-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 1050px) { .map-toolbar { flex-wrap: wrap; } .map-toolbar label { flex: 1 1 130px; } .map-toolbar select,.map-toolbar input { width: 100%; } #mapCount { margin: 0; width: 100%; } }
@media(max-width: 640px) { .map-toolbar label { flex: 1 1 43%; } .map-panel { padding: 5px; } #communityMap { min-width: 620px; min-height: 320px; touch-action: pan-x; } #communityMap[data-zoomed="true"] { touch-action: none; } .map-surface { overflow-x: auto; } .map-list { grid-template-columns: 1fr; } }