/* =====================================================================
   "Explore Nagpur on Map" — loaded only with the homepage map section.
   Desktop: filters | map | details. Tablet: filters | map, details below.
   Phone: category chips, full-width map with search on top, details as a bottom sheet.
   ===================================================================== */
.section-map-explorer {
  --mx-navy: var(--navy, #153F78);
  --mx-navy-deep: var(--navy-deep, #0D2A56);
  --mx-green: #159447;
  --mx-bg: #F5F8FC;
  --mx-line: #E3E8EF;
  --mx-muted: #66758A;
  --mx-radius: 18px;
  --mx-shadow: 0 10px 30px -14px rgba(13, 42, 86, .22);
  background: var(--mx-bg);
}
.section-map-explorer .icon { width: 20px; height: 20px; }

/* ---------- Header ---------- */
.mx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 24px; }
.mx-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--mx-green); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mx-eyebrow .icon { width: 18px; height: 18px; }
.section-map-explorer .mx-head h2 { margin: 0; color: var(--mx-navy-deep); font-family: var(--font-serif); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
.mx-hl { color: var(--mx-green); }
.mx-lead { margin: 10px 0 0; color: var(--mx-muted); font-size: 1.05rem; }
.mx-trust { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.mx-trust li { display: flex; align-items: center; gap: 12px; }
.mx-trust-ic { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 12px; background: rgba(21, 148, 71, .1); color: var(--mx-green); }
.mx-trust strong { display: block; color: var(--mx-navy-deep); font-size: .92rem; }
.mx-trust small { display: block; color: var(--mx-muted); font-size: .78rem; }

/* ---------- Three-column layout ---------- */
.mx { display: grid; grid-template-columns: minmax(250px, 24fr) minmax(0, 56fr) minmax(270px, 22fr); gap: 16px; align-items: stretch; }
.mx-filters, .mx-mapwrap, .mx-detail { min-width: 0; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); background: #fff; box-shadow: var(--mx-shadow); }

/* Filters */
.mx-filters { display: flex; flex-direction: column; overflow: hidden; }
.mx-filters-title { margin: 0; padding: 18px 20px; background: var(--mx-navy-deep); color: #fff; font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; }
.mx-cats { display: grid; gap: 2px; padding: 10px; }
.mx-cat { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, opacity .2s; }
.mx-cat:hover { background: #F5F8FC; }
.mx-cat:focus-visible { outline: 3px solid rgba(21, 148, 71, .45); outline-offset: 1px; }
.mx-cat-ic { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--c); color: #fff; box-shadow: 0 6px 14px -6px var(--c); }
.mx-cat-copy strong { display: block; color: var(--mx-navy-deep); font-size: .95rem; line-height: 1.25; }
.mx-cat-copy small { display: block; margin-top: 2px; color: var(--mx-muted); font-size: .78rem; line-height: 1.35; }
.mx-switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; background: #CBD5E1; transition: background-color .2s; }
.mx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.mx-cat[aria-checked="true"] .mx-switch { background: var(--mx-green); }
.mx-cat[aria-checked="true"] .mx-switch::after { transform: translateX(18px); }
.mx-cat[aria-checked="false"] .mx-cat-ic { background: #E2E8F0; color: #94A3B8; box-shadow: none; }
.mx-corridor { margin: 6px 14px 0; padding: 14px; border-radius: 14px; background: #F5F8FC; }
.mx-corridor label { display: block; margin-bottom: 8px; color: var(--mx-navy-deep); font-size: .9rem; font-weight: 700; }
.mx-corridor select, .mx-focus { width: 100%; min-height: 46px; padding: 0 36px 0 12px; border: 1px solid #D6DEE7; border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.7'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--mx-navy-deep); font: inherit; font-size: .9rem; appearance: none; cursor: pointer; }
.mx-reset { gap: 10px; margin: 14px; min-height: 50px; border-color: var(--mx-navy-deep); background: var(--mx-navy-deep); color: #fff; }
.mx-reset:hover { background: var(--mx-navy); color: #fff; }

/* Map */
.mx-mapwrap { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 620px; }
.mx-canvas { flex: 1; min-height: 520px; background: #E8EEF2; z-index: 0; }
.mx-toolbar { position: absolute; top: 14px; right: 14px; left: 14px; z-index: 500; display: flex; gap: 10px; pointer-events: none; }
.mx-toolbar > * { pointer-events: auto; }
.mx-search { position: relative; flex: 1; min-width: 0; }
.mx-search-ic { position: absolute; top: 50%; left: 14px; width: 20px; height: 20px; color: var(--mx-navy-deep); transform: translateY(-50%); pointer-events: none; }
.mx-search input { width: 100%; height: 48px; padding: 0 14px 0 44px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px -8px rgba(13, 42, 86, .3); color: var(--mx-navy-deep); font: inherit; font-size: .92rem; }
.mx-search input:focus { border-color: var(--mx-green); outline: 3px solid rgba(21, 148, 71, .2); }
.mx-results { position: absolute; top: calc(100% + 6px); right: 0; left: 0; max-height: 320px; margin: 0; padding: 6px; overflow-y: auto; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -14px rgba(13, 42, 86, .35); list-style: none; }
.mx-results li { display: grid; gap: 1px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.mx-results li[aria-selected="true"], .mx-results li:hover { background: #F1F7F3; }
.mx-results strong { color: var(--mx-navy-deep); font-size: .9rem; }
.mx-results small { color: var(--mx-muted); font-size: .76rem; }
.mx-results .mx-results-empty { color: var(--mx-muted); font-size: .86rem; cursor: default; }
.mx-focus { width: auto; min-width: 190px; height: 48px; box-shadow: 0 6px 18px -8px rgba(13, 42, 86, .3); }
.mx-tool { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px -8px rgba(13, 42, 86, .3); color: var(--mx-navy-deep); font: 600 1.35rem/1 var(--font-display, sans-serif); cursor: pointer; transition: background-color .2s; }
.mx-tool:hover { background: #F1F7F3; }
.mx-tool:focus-visible, .mx-styles button:focus-visible { outline: 3px solid rgba(21, 148, 71, .5); outline-offset: 2px; }
.mx-tool.is-busy { animation: mx-pulse 1s ease-in-out infinite; }
.mx-reset-mini { display: none; }
.mx-controls { position: absolute; top: 76px; left: 14px; z-index: 500; display: grid; overflow: hidden; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px -8px rgba(13, 42, 86, .3); }
.mx-controls .mx-tool { border: 0; border-radius: 0; box-shadow: none; }
.mx-controls .mx-tool + .mx-tool { border-top: 1px solid #EEF1F4; }
.mx-styles { position: absolute; top: 76px; right: 14px; z-index: 500; display: grid; padding: 6px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px -8px rgba(13, 42, 86, .3); }
.mx-styles button { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: #334155; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.mx-styles button .icon { width: 18px; height: 18px; }
.mx-styles button[aria-checked="true"] { background: rgba(21, 148, 71, .1); color: var(--mx-green); }
.mx-fullscreen { position: absolute; right: 14px; bottom: 74px; z-index: 500; }
.mx-status { position: absolute; top: 76px; left: 50%; z-index: 600; max-width: min(90%, 420px); padding: 9px 14px; border-radius: 10px; background: rgba(255, 255, 255, .96); box-shadow: 0 6px 18px -8px rgba(13, 42, 86, .3); color: var(--mx-navy-deep); font-size: .86rem; text-align: center; transform: translateX(-50%); }
.mx-status[hidden] { display: none; }
.mx-status.is-error { background: #FFF4F2; color: #9F2A1B; }
.mx-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 12px 16px; border-top: 1px solid #EEF1F4; background: #fff; list-style: none; }
.mx-legend li { display: inline-flex; align-items: center; gap: 7px; color: #334155; font-size: .8rem; font-weight: 600; }
.mx-legend-dot { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--c); color: #fff; }
.mx-legend-dot .icon { width: 12px; height: 12px; }
.mx-mapwrap.is-fs { position: fixed; inset: 0; z-index: 2000; border-radius: 0; }
.mx-mapwrap:fullscreen { border-radius: 0; }
html.mx-lock { overflow: hidden; }
.mx-mapwrap .leaflet-control-attribution { font-size: 10px; }

/* Markers: coloured pin with icon + name label */
.mx-marker { background: none; border: 0; }
.mx-pin { position: absolute; top: 0; left: 1px; display: grid; width: 34px; height: 34px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 6px 14px rgba(13, 42, 86, .35); transition: transform .18s; }
.mx-pin::after { content: ""; position: absolute; bottom: -9px; left: 50%; width: 0; height: 0; border-top: 8px solid var(--c); border-right: 6px solid transparent; border-left: 6px solid transparent; transform: translateX(-50%); }
.mx-pin .icon { width: 16px; height: 16px; }
.mx-pin-label { position: absolute; top: 4px; left: 40px; padding: 4px 9px; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(13, 42, 86, .22); color: var(--mx-navy-deep); font: 700 12px/1.25 var(--font-display, sans-serif); white-space: nowrap; pointer-events: none; }
.mx-marker:hover .mx-pin, .mx-marker:focus .mx-pin { transform: scale(1.1); }
.mx-marker.is-active .mx-pin { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(21, 148, 71, .25), 0 8px 18px rgba(13, 42, 86, .4); }
.mx-marker.is-active .mx-pin-label { background: var(--mx-navy-deep); color: #fff; }
.mx-marker:focus-visible { outline: none; }
.mx-marker:focus-visible .mx-pin-label { outline: 3px solid rgba(21, 148, 71, .55); }
.mx-tip { font-weight: 700; }

/* Details panel */
.mx-detail { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.mx-detail-empty { display: grid; flex: 1; place-content: center; justify-items: center; gap: 8px; padding: 32px 22px; text-align: center; }
.mx-detail-empty[hidden], .mx-detail-body[hidden] { display: none; }
.mx-detail-empty-ic { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 6px; border-radius: 20px; background: rgba(21, 148, 71, .1); color: var(--mx-green); }
.mx-detail-empty-ic .icon { width: 30px; height: 30px; }
.mx-detail-empty h3 { margin: 0; color: var(--mx-navy-deep); font-size: 1.15rem; }
.mx-detail-empty p { max-width: 26ch; margin: 0; color: var(--mx-muted); font-size: .9rem; }
.mx-detail-body { position: relative; flex: 1; overflow-y: auto; animation: mx-in .3s ease both; }
.mx-d-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); color: var(--mx-navy-deep); cursor: pointer; }
.mx-d-close .icon { width: 18px; height: 18px; }
.mx-d-media { position: relative; height: 170px; overflow: hidden; background: radial-gradient(90% 90% at 85% 10%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(140deg, var(--c), var(--mx-navy-deep) 92%); }
.mx-d-media img { width: 100%; height: 100%; object-fit: cover; }
.mx-d-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .55); }
.mx-d-ph .icon { width: 58px; height: 58px; }
.mx-d-copy { padding: 16px 18px 18px; }
.mx-d-cat { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--c); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mx-d-cat span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--c); color: #fff; }
.mx-d-cat .icon { width: 14px; height: 14px; }
.mx-d-copy h3 { margin: 8px 0 6px; color: var(--mx-navy-deep); font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.mx-d-sub { margin: -2px 0 6px; color: var(--mx-green); font-size: .84rem; font-weight: 700; }
.mx-d-desc { margin: 0 0 12px; color: #475569; font-size: .88rem; line-height: 1.6; }
.mx-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.mx-info li { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1px solid #EEF1F4; border-radius: 12px; background: #FAFBFD; text-align: center; }
.mx-info-ic { color: var(--mx-navy); }
.mx-info strong { color: var(--mx-navy-deep); font-size: .84rem; line-height: 1.25; }
.mx-info small { color: var(--mx-muted); font-size: .68rem; line-height: 1.3; }
.mx-d-block { margin: 12px 0; }
.mx-d-label { margin: 0 0 8px; color: var(--mx-muted); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mx-d-projects, .mx-d-updates, .mx-d-chips { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mx-d-projects a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 6px; border: 1px solid #EEF1F4; border-radius: 10px; color: inherit; text-decoration: none; }
.mx-d-projects a:hover { border-color: rgba(21, 148, 71, .4); }
.mx-d-projects img, .mx-d-pp { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.mx-d-pp { display: grid; place-items: center; background: #EEF3F8; color: var(--mx-navy); }
.mx-d-projects strong { display: block; color: var(--mx-navy-deep); font-size: .86rem; }
.mx-d-projects small { color: var(--mx-muted); font-size: .74rem; }
.mx-d-projects .icon { width: 14px; height: 14px; color: var(--mx-muted); }
.mx-d-updates li { display: grid; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--mx-green); border-radius: 0 8px 8px 0; background: #F6FAF7; font-size: .8rem; }
.mx-d-updates time { color: var(--mx-green); font-weight: 700; }
.mx-d-updates strong { color: var(--mx-navy-deep); }
.mx-d-updates small { color: #475569; }
.mx-d-chips { display: flex; flex-wrap: wrap; }
.mx-d-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #E2E8F0; border-radius: 999px; background: #fff; color: var(--mx-navy-deep); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.mx-d-chips button .icon { width: 14px; height: 14px; color: var(--c); }
.mx-d-src { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: var(--mx-muted); font-size: .74rem; line-height: 1.45; }
.mx-d-src .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--mx-green); }
.mx-d-src a { color: var(--mx-navy); }
.mx-d-actions { display: grid; gap: 8px; margin-top: 14px; }
.mx-d-actions .btn { width: 100%; min-height: 46px; gap: 8px; }
.mx-d-actions .icon { width: 16px; height: 16px; }

.mx-note { margin: 12px 2px 0; color: var(--mx-muted); font-size: .78rem; }

/* ---------- Nearby Key Locations ---------- */
.mx-nearby { margin-top: 18px; padding: 20px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); background: #fff; box-shadow: var(--mx-shadow); }
.mx-nearby-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mx-nearby-head > div { flex: 1; min-width: 0; }
.mx-nearby-ic { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 50%; background: rgba(21, 148, 71, .1); color: var(--mx-green); }
.mx-nearby-head h3 { margin: 0; color: var(--mx-navy-deep); font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }
.mx-nearby-head p { margin: 2px 0 0; color: var(--mx-muted); font-size: .86rem; }
.mx-nearby-all { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 8px 4px; border: 0; background: none; color: var(--mx-navy); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.mx-nearby-all .icon { width: 14px; height: 14px; }
.mx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mx-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 1px solid #E8EDF3; border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.mx-card:hover { border-color: rgba(21, 148, 71, .4); box-shadow: 0 10px 24px -14px rgba(13, 42, 86, .35); transform: translateY(-2px); }
.mx-card:focus-visible { outline: 3px solid rgba(21, 148, 71, .5); outline-offset: 2px; }
.mx-card-media { position: relative; display: block; height: 72px; overflow: hidden; border-radius: 10px; background: radial-gradient(90% 90% at 85% 10%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(140deg, var(--c), var(--mx-navy-deep) 95%); }
.mx-card-media img { width: 100%; height: 100%; object-fit: cover; }
.mx-card-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .8); }
.mx-card-ph .icon { width: 28px; height: 28px; }
.mx-card-copy strong { display: block; color: var(--mx-navy-deep); font-size: .9rem; line-height: 1.3; }
.mx-card-copy small { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--mx-muted); font-size: .8rem; }
.mx-card-copy small .icon { width: 16px; height: 16px; color: var(--mx-navy); }
.mx-card-go { display: grid; width: 30px; height: 30px; place-items: center; margin-right: 6px; border: 1px solid #E2E8F0; border-radius: 50%; color: var(--mx-navy); }
.mx-card-go .icon { width: 14px; height: 14px; }

/* ---------- How to use ---------- */
.mx-howto { margin-top: 18px; padding: 20px 22px; border: 1px solid #DCEFE3; border-radius: var(--mx-radius); background: linear-gradient(180deg, #F3FBF6, #EEF8F2); }
.mx-howto h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--mx-navy-deep); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
.mx-howto-ic { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--mx-green); color: #fff; }
.mx-howto ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mx-howto li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-content: start; }
.mx-step { display: grid; grid-row: span 2; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--mx-green); color: #fff; font-weight: 800; }
.mx-howto strong { color: var(--mx-navy-deep); font-size: .92rem; }
.mx-howto small { color: var(--mx-muted); font-size: .8rem; line-height: 1.4; }

@keyframes mx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mx-pulse { 50% { opacity: .45; } }

/* ---------- Tablet: details move below the map ---------- */
@media (max-width: 1200px) {
  .mx { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
  .mx-detail { grid-column: 1 / -1; min-height: 0; }
  .mx-detail-empty { flex-direction: row; padding: 22px; }
  .mx-detail-body { display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); }
  .mx-detail-body[hidden] { display: none; }
  .mx-d-media { height: 100%; min-height: 220px; }
  .mx-howto ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phone: chips, full-width map, bottom-sheet details ---------- */
@media (max-width: 900px) {
  .mx-head { align-items: flex-start; }
  .mx-trust { display: none; }
  .mx { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mx-filters { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .mx-filters-title { display: none; }
  .mx-cats { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .mx-cats::-webkit-scrollbar { display: none; }
  .mx-cat { display: inline-flex; flex: none; gap: 8px; width: auto; min-height: 44px; padding: 6px 14px 6px 6px; border: 1px solid #E2E8F0; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -8px rgba(13, 42, 86, .3); }
  .mx-cat-ic { width: 32px; height: 32px; border-radius: 50%; }
  .mx-cat-ic .icon { width: 16px; height: 16px; }
  .mx-cat-copy small, .mx-switch { display: none; }
  .mx-cat-copy strong { font-size: .84rem; white-space: nowrap; }
  .mx-cat[aria-checked="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); }
  .mx-corridor { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 10px 0 0; padding: 0; background: none; }
  .mx-corridor label { margin: 0; font-size: .84rem; }
  .mx-filters > .mx-reset { display: none; }
  .mx-mapwrap { min-height: 0; }
  .mx-canvas { flex: none; min-height: 0; height: min(68vh, 520px); } /* flex:1 would collapse it to 0 inside the column flex wrapper */
  .mx-focus { display: none; }
  .mx-reset-mini { display: inline-flex; width: auto; gap: 6px; padding: 0 12px; height: 48px; font-size: .84rem; font-weight: 700; }
  .mx-reset-mini .icon { width: 18px; height: 18px; }
  .mx-styles { top: auto; bottom: 64px; right: 12px; display: flex; padding: 4px; }
  .mx-styles button { padding: 6px 8px; }
  .mx-styles button span { display: none; }
  .mx-controls { top: 74px; left: 12px; }
  .mx-fullscreen { top: 74px; right: 12px; bottom: auto; }
  .mx-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mx-legend li { flex: none; }

  /* Details: hidden until a marker is chosen, then a bottom sheet above the tab bar */
  .mx-detail { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1200; max-height: 72vh; border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px -10px rgba(7, 21, 45, .45); transform: translateY(105%); visibility: hidden; transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s; }
  .mx-detail.is-open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
  .mx-detail::before { content: ""; position: absolute; top: 8px; left: 50%; z-index: 3; width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .85); transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
  .mx-detail-empty { display: none; }
  .mx-detail-body { display: block; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mx-d-media { height: 150px; min-height: 0; }

  .mx-nearby { padding: 16px; }
  .mx-nearby-head { flex-wrap: wrap; }
  .mx-cards { display: flex; gap: 10px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mx-cards::-webkit-scrollbar { display: none; }
  .mx-cards > li { flex: 0 0 min(78vw, 260px); scroll-snap-align: start; }
  .mx-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 0 0 10px; overflow: hidden; }
  .mx-card-media { grid-column: 1 / -1; height: 120px; border-radius: 0; }
  .mx-card-copy { padding-left: 12px; }
}
@media (max-width: 560px) {
  .mx-howto ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mx-info { gap: 6px; }
  .mx-toolbar { top: 10px; right: 10px; left: 10px; gap: 8px; }
  .mx-reset-mini span { display: none; }
  .mx-reset-mini { width: 48px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-cat, .mx-switch, .mx-switch::after, .mx-pin, .mx-card, .mx-detail { transition: none; }
  .mx-detail-body, .mx-tool.is-busy { animation: none; }
}

/* Polish: label crowding, column widths, even nearby cards */
.mx-labels-off .mx-marker:not(.is-active):not(:hover):not(:focus-visible) .mx-pin-label { display: none; }
.mx-card-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mx-cards { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
@media (min-width: 1201px) {
  .mx { grid-template-columns: minmax(280px, 300px) minmax(0, 1fr) minmax(280px, 310px); }
}