/* Scoped styles: home and dimension detail maps may coexist. */
.city-map { --map-ink:#23463e; --map-muted:#68756e; width:100%; min-width:0; color:var(--map-ink); font:13px/1.5 system-ui,sans-serif; }
.city-map *, .city-map *::before, .city-map *::after { box-sizing:border-box; }
.city-map__viewport { position:relative; width:100%; height:clamp(300px,42vw,460px); overflow:hidden; isolation:isolate; background:#edf0e8; border:1px solid #d4ded3; border-radius:16px; touch-action:pan-x pan-y; cursor:grab; }
.city-map__viewport:focus-visible { outline:3px solid #397468; outline-offset:3px; }
.city-map.is-dragging .city-map__viewport { cursor:grabbing; }
.city-map__canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.city-map__markers { position:absolute; inset:0; pointer-events:none; z-index:1; }
.city-map .city-map__marker { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; display:grid; place-items:center; width:27px; height:27px; min-width:0; min-height:0; padding:0; border:2px solid #fffdf7; border-radius:50%; background:var(--marker-color); color:#fff; font:700 12px/1 system-ui,sans-serif; box-shadow:0 2px 5px #203a3438; cursor:pointer; }
.city-map .city-map__marker:hover, .city-map .city-map__marker:focus-visible { z-index:3; outline:3px solid #253f36; outline-offset:2px; }
.city-map .city-map__marker.is-selected { z-index:2; width:34px; height:34px; outline:3px solid #fff7dd; outline-offset:1px; }
.city-map .city-map__marker.is-offscreen { opacity:0; pointer-events:none; }
.city-map__controls { position:absolute; top:14px; left:14px; z-index:4; display:flex; flex-wrap:wrap; gap:5px; max-width:calc(100% - 70px); cursor:auto; }
.city-map__controls button { display:grid; place-items:center; min-width:42px; min-height:42px; padding:8px 11px; border:1px solid #ccd8cb; border-radius:9px; background:#fffdf7; color:#23463e; font:600 12px/1.1 system-ui,sans-serif; box-shadow:0 2px 5px #203a3412; cursor:pointer; }
.city-map__controls button:first-child, .city-map__controls button:nth-child(2) { font-size:21px; }
.city-map__controls button:hover { background:#e4ecdf; }
.city-map__controls button:focus-visible, .city-map__selection button:focus-visible { outline:3px solid #397468; outline-offset:2px; }
.city-map__controls button:disabled { opacity:.45; cursor:default; }
.city-map__controls .city-map__layer[aria-pressed=true] { background:#23463e; color:#fff; }
.city-map__north { position:absolute; top:19px; right:15px; padding:4px 6px; color:#23463e; background:#fffdf7dc; border-radius:5px; font-size:11px; pointer-events:none; }
.city-map__scale { position:absolute; bottom:28px; left:14px; min-width:20px; height:23px; padding:0 3px; border:solid #335149; border-width:0 1px 2px; color:#23463e; background:#fffdf7db; font:10px/19px system-ui,sans-serif; text-align:center; pointer-events:none; }
.city-map__attribution { position:absolute; bottom:0; right:0; max-width:100%; padding:3px 7px; background:#fffdf7ee; border-radius:6px 0 0 0; font:10px/1.4 system-ui,sans-serif; z-index:4; cursor:auto; }
.city-map__attribution a { color:#335149; text-decoration:underline; }
.city-map__selection { position:absolute; left:14px; right:14px; bottom:61px; max-width:420px; padding:11px 38px 11px 13px; border:1px solid #cbd7c9; border-radius:10px; background:#fffdf7f5; box-shadow:0 4px 16px #203a3420; z-index:3; cursor:auto; }
.city-map__selection[hidden] { display:none; }
.city-map__selection strong, .city-map__selection small { display:block; overflow-wrap:anywhere; }
.city-map__selection small { margin-top:3px; color:#68756e; font-size:11px; }
.city-map__selection .city-map__close { position:absolute; right:3px; top:3px; min-width:32px; min-height:36px; padding:4px; border:0; background:transparent; color:#335149; font-size:22px; cursor:pointer; }
.city-map__status { margin:10px 0 8px; color:var(--map-muted); font-size:12px; overflow-wrap:anywhere; }
.city-map__status--error { color:#915134; }
.city-map__legend { display:flex; flex-wrap:wrap; gap:7px 16px; margin:0 0 7px; }
.city-map__legend-item { display:inline-flex; align-items:center; gap:5px; font-size:11px; }
.city-map__legend-item i { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#fff; font:700 10px/1 system-ui,sans-serif; font-style:normal; }
.city-map__help { margin:0; color:var(--map-muted); font-size:11px; }
@media(max-width:480px) { .city-map__viewport { height:330px; border-radius:12px; } .city-map__controls { top:10px; left:10px; gap:4px; } .city-map__controls button { padding:7px 8px; min-width:39px; min-height:42px; font-size:11px; } .city-map .city-map__marker { width:29px; height:29px; } .city-map__legend { gap:6px 10px; } }
@media(prefers-reduced-motion:reduce) { .city-map * { scroll-behavior:auto; } }

.city-map__extent { position:absolute; top:76px; left:14px; right:14px; padding:8px 11px; border:1px solid #d9c8ac; border-radius:8px; background:#fff9e8e8; color:#826242; font-size:11px; z-index:1; pointer-events:none; }
.city-map__extent[hidden] { display:none; }

.city-map .city-map__marker.is-clustered { opacity:0; pointer-events:none; }
.city-map .city-map__marker.is-clustered:focus-visible { opacity:1; pointer-events:auto; z-index:5; }
.city-map__cluster-list { display:grid; gap:4px; margin-top:6px; max-height:150px; overflow:auto; }
.city-map__selection .city-map__cluster-choice { position:static; padding:8px; min-height:36px; width:100%; border:1px solid #ccd8cb; border-radius:6px; background:#eef3e9; text-align:left; color:#23463e; font:12px/1.3 system-ui,sans-serif; cursor:pointer; }
.city-map-module, .city-map-module__host { width:100%; min-width:0; }
.city-map-module__notice { padding:9px 12px; margin:8px 0; border:1px solid #dfc8a6; border-radius:8px; background:#fff7e6; color:#815834; font:12px/1.5 system-ui,sans-serif; overflow-wrap:anywhere; }
.city-map-module__notice[hidden] { display:none; }
.city-map__provider-tools { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.city-map__provider-tools button, .city-map__provider-list button { border:1px solid #ccd8cb; border-radius:7px; background:#fffdf7; color:#23463e; padding:8px 11px; min-height:40px; font:12px/1.4 system-ui,sans-serif; cursor:pointer; }
.city-map__provider-list { display:flex; gap:5px; flex-wrap:wrap; max-height:120px; overflow:auto; margin:6px 0; }
.city-map__provider-list button[aria-pressed=true] { background:#e4ecdf; border-color:#397468; }
.city-map .city-map__provider-marker { display:grid; place-items:center; width:29px; height:29px; min-width:0; min-height:0; padding:0; border:2px solid #fffdf7; border-radius:50%; color:#fff; background:var(--marker-color); font:700 12px/1 system-ui,sans-serif; cursor:pointer; }
.city-map .city-map__provider-marker.is-selected, .city-map .city-map__provider-marker:focus-visible, .city-map__provider-tools button:focus-visible, .city-map__provider-list button:focus-visible { outline:3px solid #23463e; outline-offset:2px; }

.city-map__viewport[data-gesture-handling=greedy] { touch-action: none; }
.city-map__marker.is-mixed { background: #52616f; }

.city-map--amap .city-map__viewport[data-gesture-handling=cooperative] * { touch-action: pan-x pan-y !important; }