/* Interactive city explorer: an original-style enhancement, not a replacement. */
.city-explorer-hero { background: radial-gradient(circle at 78% 18%, rgba(47,107,101,.2), transparent 34%), linear-gradient(135deg, #fffdf9, #f1eadd); }
.city-hero-photo { margin: 0; }
.city-hero-photo figcaption { margin-top: .8rem; color: var(--mp-text); font-size: .78rem; line-height: 1.45; }
.city-hero-photo figcaption a { color: var(--mp-teal); font-weight: 800; }
.city-hero-note { max-width: 680px; margin-top: 1rem; color: #667484; font-size: .86rem; }
.city-map-section { background: var(--mp-paper); }
.city-map-controls { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.1rem; margin-bottom: 1.1rem; padding: 1rem; border: 1px solid var(--mp-line); border-radius: 14px; background: #f8f4ed; }
.city-control-label { display: block; margin: 0 0 .6rem; color: var(--mp-ink); font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.city-picker, .city-layer-picker { display: flex; flex-wrap: wrap; gap: .48rem; }
.city-choice, .city-layer { min-height: 39px; padding: .5rem .72rem; border: 1px solid #cfc7ba; border-radius: 999px; background: #fffdf9; color: var(--mp-ink); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.city-choice:hover, .city-layer:hover { border-color: var(--mp-teal); color: var(--mp-teal); transform: translateY(-1px); }
.city-choice.is-active, .city-layer.is-active { border-color: var(--mp-teal); background: var(--mp-teal); color: #fff; }
.city-choice:focus-visible, .city-layer:focus-visible { outline: 3px solid rgba(47,107,101,.35); outline-offset: 2px; }
.city-map-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr); gap: 1.25rem; align-items: stretch; }
.city-map { min-height: 540px; }
.city-detail-card { display: flex; flex-direction: column; padding: 1.45rem; border: 1px solid var(--mp-line); border-radius: var(--mp-radius); background: linear-gradient(160deg, #fbf7f0, #edf4f1); box-shadow: 0 3px 16px rgba(15,44,74,.05); }
.city-detail-card h3 { color: var(--mp-ink); font-family: var(--serif); font-size: 2rem; line-height: 1.05; }
.city-detail-card > p { margin-top: .75rem; }
.city-detail-block { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(47,107,101,.22); }
.city-detail-block strong { color: var(--mp-ink); font-size: .86rem; }
.city-detail-card .mp-actions { margin-top: auto; padding-top: 1.25rem; }
.city-status-card { min-height: 100%; }
.city-status-label { color: var(--mp-orange); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.city-status-card h3 { margin-top: .55rem; }
.city-weather-reading { min-height: 3.2rem; margin: .9rem 0 .25rem; color: var(--mp-navy); font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.city-status-note { margin-top: .55rem; font-size: .88rem; }
.city-status-card .mp-btn { margin-top: 1.1rem; }
.city-map .leaflet-popup-content h3 { margin: 0 0 .3rem; color: #172a40; font: 700 1.08rem/1.2 "Source Serif 4", Georgia, serif; }
.city-map .leaflet-popup-content p { margin: 0 0 .65rem; color: #4e5d6e; font-size: .84rem; }
.city-map .leaflet-popup-content a { color: #2f6b65; font-size: .82rem; font-weight: 800; }
.city-map-marker { display: grid; place-items: center; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 10px rgba(15,44,74,.3); color: #fff; font-size: .7rem; font-weight: 900; }
.city-map-marker.roads { background: #bc6b3c; }
.city-map-marker.water { background: #237c91; }
.city-map-marker.parks { background: #5a7d49; }
.city-map-marker.everyday { background: #2f6b65; }
.city-map-marker.videos { background: #0a2038; }
@media (max-width: 980px) { .city-map-controls, .city-map-layout { grid-template-columns: 1fr; } .city-map { min-height: 460px; } }
@media (max-width: 760px) { .city-map-controls { padding: .8rem; } .city-choice, .city-layer { font-size: .78rem; } .city-map { min-height: 400px; } .city-detail-card h3 { font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { .city-choice, .city-layer { transition: none; } }