/* =====================================================================================================
   Map explorer (page /<lang>/map/explorer/). Components are prefixed mx-; tokens --mx-* are aliases of the
   brand (--wwf-*) and design-system (--ds-*) tokens, scoped to .mx-app. Loaded after ds.css and buttons.css.
   Every rule starts with .mx-app: that keeps it above the site's global element rules (Bootstrap 4 reboot,
   style.css `a:hover`, `label`, ds.css `main p a`) without !important.
   ===================================================================================================== */

.mx-app {
  color-scheme: light;

  /* ---- colours (contrast ratios in docs/MAP_EXPLORER_DESIGN.md section 3) ---- */
  --mx-color-primary:        var(--wwf-green);
  --mx-color-primary-hover:  var(--wwf-green-hover);
  --mx-color-primary-strong: var(--ds-green-800);
  --mx-color-primary-tint:   var(--ds-green-50);
  --mx-color-primary-tint-2: var(--ds-green-100);
  --mx-color-on-primary:     var(--wwf-white);
  --mx-color-ink:            var(--ds-ink-900);
  --mx-color-ink-2:          var(--ds-ink-700);
  --mx-color-ink-3:          var(--ds-ink-600);
  --mx-color-ink-4:          var(--ds-ink-500);
  --mx-color-surface:        var(--ds-surface);
  --mx-color-surface-2:      var(--ds-surface-2);
  --mx-color-line:           var(--ds-line);
  --mx-color-control-border: #78827c;
  --mx-color-focus:          var(--wwf-focus);
  --mx-color-danger:         var(--ds-danger-700);
  --mx-color-danger-tint:    var(--ds-danger-50);
  --mx-color-warn:           var(--ds-ochre-800);
  --mx-color-warn-tint:      var(--ds-ochre-50);
  --mx-color-info:           var(--wwf-blue);
  --mx-color-scrim:          color-mix(in srgb, var(--ds-ink-900) 50%, transparent);

  /* ---- chart series: green, berry, brown, blue (+ two reserved) ---- */
  --mx-s1: var(--wwf-green);
  --mx-s2: var(--wwf-berry);
  --mx-s3: var(--wwf-brown);
  --mx-s4: var(--wwf-blue);
  --mx-s5: var(--wwf-dark-brown);
  --mx-s6: var(--wwf-red);
  --mx-band-alpha: .16;
  --mx-grid: var(--ds-line);
  --mx-axis: var(--ds-ink-500);

  /* ---- map (read by JS: keep #rrggbb after resolution) ---- */
  --mx-map-fill:     var(--wwf-green);
  --mx-map-stroke:   var(--ds-green-800);
  --mx-map-stroke-2: var(--wwf-green-hover);
  --mx-map-selected: var(--wwf-black);
  --mx-map-halo:     var(--wwf-white);
  --mx-map-label:    var(--ds-ink-900);

  /* ---- type ---- */
  --mx-font-display: var(--wwf-font-display);
  --mx-font-body:    var(--wwf-font-body);
  --mx-fs-2xs: .75rem;
  --mx-fs-sm:  var(--ds-fs-sm);
  --mx-fs-base: var(--ds-fs-base);
  --mx-fs-md:  var(--ds-fs-md);
  --mx-fs-lg:  var(--ds-fs-lg);
  --mx-fs-xl:  var(--ds-fs-xl);
  --mx-lh-body: 1.5;
  --mx-lh-tight: 1.15;
  --mx-tracking: .02em;

  /* ---- space (4 px grid) ---- */
  --mx-gap-xs: var(--ds-space-1);
  --mx-gap-sm: var(--ds-space-2);
  --mx-gap-md: .75rem;
  --mx-gap-lg: var(--ds-space-3);
  --mx-gap-xl: var(--ds-space-4);
  --mx-gap-2xl: var(--ds-space-5);

  --mx-radius-sm: var(--ds-radius-sm);
  --mx-radius-md: var(--ds-radius-md);
  --mx-radius-lg: var(--ds-radius-lg);
  --mx-radius-pill: 999px;
  --mx-shadow-control: var(--ds-shadow-md);
  --mx-shadow-popover: var(--ds-shadow-lg);
  --mx-shadow-panel: -8px 0 24px color-mix(in srgb, var(--ds-ink-900) 12%, transparent);
  --mx-shadow-sheet: 0 -8px 24px color-mix(in srgb, var(--ds-ink-900) 16%, transparent);

  /* ---- stacking inside .mx-app only (the site navbar is 1030, the cookie banner 1000) ---- */
  --mx-z-map: 0;
  --mx-z-overlay: 5;
  --mx-z-control: 10;
  --mx-z-panel: 20;
  --mx-z-popover: 40;
  --mx-z-toast: 50;

  --mx-dur-fast: var(--ds-dur-fast);
  --mx-dur: var(--ds-dur-base);
  --mx-ease: var(--ds-ease);

  --mx-panel-w: 420px;
  --mx-chrome-h: 7.5rem;
  --mx-app-h: calc(100dvh - var(--mx-chrome-h));
  --mx-sheet-peek: 96px;
  --mx-sheet-top-gap: 3rem;
  --mx-hit: 44px;
  --mx-hit-sm: 36px;
  --mx-control-gap: .75rem;
  --mx-sticky-h: 3rem;
}
@media (pointer: coarse) { .mx-app { --mx-hit-sm: var(--mx-hit); } }
@media (max-width: 1199.98px) { .mx-app { --mx-panel-w: 380px; } }
@media (max-width: 991.98px)  { .mx-app { --mx-panel-w: 360px; } }
@media (max-height: 500px) and (orientation: landscape) and (min-width: 568px) { .mx-app { --mx-panel-w: 320px; } }

/* ---------- shell and guards against the site's global CSS ---------- */
.mx-app { position: relative; z-index: 1; isolation: isolate; height: var(--mx-app-h); min-height: 30rem; overflow: hidden;
  background: var(--mx-color-surface-2); color: var(--mx-color-ink); font: var(--mx-fs-base)/var(--mx-lh-body) var(--mx-font-body); text-align: left; }
.mx-app *, .mx-app *::before, .mx-app *::after { box-sizing: border-box; }
.mx-app :is(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
.mx-app button { cursor: pointer; }
.mx-app :is(h2, h3, h4, p, ul, ol, dl, dd, dt, figure, fieldset) { margin: 0; padding: 0; }
.mx-app fieldset { min-width: 0; border: 0; }
.mx-app :is(ul, ol) { list-style: none; }
.mx-app :is(h2, h3, h4) { font-family: var(--mx-font-body); font-weight: 700; line-height: var(--mx-lh-tight); color: var(--mx-color-ink); text-transform: none; letter-spacing: normal; }
.mx-app label { display: inline-block; margin: 0; font-weight: 600; }
.mx-app a { color: var(--mx-color-primary-hover); text-underline-offset: 2px; }
.mx-app a:hover { color: var(--mx-color-primary-strong); }
.mx-app legend { float: none; width: auto; max-width: 100%; padding: 0; margin: 0; font: 700 var(--mx-fs-sm)/var(--mx-lh-tight) var(--mx-font-body); color: var(--mx-color-ink-2); }
.mx-app table { border-collapse: collapse; margin: 0; }
.mx-app :is(th, td) { padding: 0; text-align: left; border: 0; }
.mx-app summary { cursor: pointer; }
.mx-app [hidden] { display: none !important; }
.mx-app .mx-sr, .mx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mx-app .mx-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-app .mx-noscript { padding: var(--mx-gap-lg); }
body.mx-page footer, body:has(.mx-app) footer { display: none; }   /* the page fills the screen; the legal line stays in the bottom strip */
body.mx-page .back-to-top { display: none !important; }
.mx-noscript { padding: 1rem; }

/* links drawn as buttons or cards must not take the underline ds.css puts on `main li a` (specificity of an id) */
#mx-app a.mx-btn, #mx-app a.mx-mapcard, #mx-app a.mx-skiplink { text-decoration: none; }

/* ---------- map and layers of controls ---------- */
.mx-app .mx-map { position: absolute; inset: 0; z-index: var(--mx-z-map); background: var(--mx-color-surface-2); }
.mx-app .mx-map:focus-visible { outline-offset: -4px !important; }
.mx-app .mx-map .ol-viewport { touch-action: none; }
.mx-app[data-basemap="light"] .mx-basemap { filter: grayscale(1) brightness(1.06) contrast(.85); }
.mx-app .mx-map__progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: var(--mx-z-control); overflow: hidden; background: var(--mx-color-primary-tint-2); }
.mx-app .mx-map__progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--mx-color-primary); animation: mx-progress 1.1s var(--mx-ease) infinite; }
@keyframes mx-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.mx-app .mx-controls, .mx-app .mx-topbar { position: absolute; inset: 0; z-index: var(--mx-z-control); pointer-events: none; }
.mx-app .mx-controls > *, .mx-app .mx-topbar > * { pointer-events: auto; }

.mx-app .mx-skiplinks { position: absolute; top: 0; left: 0; z-index: calc(var(--mx-z-toast) + 5); }
.mx-app .mx-skiplinks a { position: absolute; left: var(--mx-gap-sm); top: var(--mx-gap-sm); white-space: nowrap; padding: var(--mx-gap-sm) var(--mx-gap-lg);
  background: var(--mx-color-surface); color: var(--mx-color-ink); border: 2px solid var(--mx-color-primary-hover); border-radius: var(--mx-radius-md);
  font-weight: 700; text-decoration: none; transform: translateY(-300%); }
.mx-app .mx-skiplinks a:focus { transform: none; }

.mx-app .mx-banner { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--mx-gap-sm); padding: var(--mx-gap-sm) var(--mx-gap-lg);
  font-size: var(--mx-fs-sm); background: var(--mx-color-warn-tint); color: var(--mx-color-warn); border-bottom: 1px solid var(--mx-color-line); z-index: 2; }
.mx-app[data-net="offline"] .mx-toolbar { top: 3.25rem; }

.mx-app .mx-toolbar { position: absolute; top: var(--mx-control-gap); left: var(--mx-control-gap); display: flex; gap: var(--mx-gap-sm); align-items: flex-start;
  width: calc(100% - 2 * var(--mx-control-gap)); max-width: 440px; }
.mx-app[data-panel="open"] .mx-toolbar { max-width: min(440px, calc(100% - var(--mx-panel-w) - 2 * var(--mx-control-gap))); }
.mx-app .mx-zoom { position: absolute; right: var(--mx-control-gap); bottom: calc(var(--mx-strip-h, 1.75rem) + var(--mx-control-gap)); display: flex; flex-direction: column; gap: var(--mx-gap-sm); }
.mx-app[data-panel="open"] .mx-zoom { right: calc(var(--mx-panel-w) + var(--mx-control-gap)); }
.mx-app .mx-strip { position: absolute; left: 0; bottom: 0; right: 0; min-height: 1.75rem; padding: 2px var(--mx-gap-sm); display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--mx-gap-lg);
  background: color-mix(in srgb, var(--mx-color-surface) 92%, transparent); font-size: var(--mx-fs-2xs); color: var(--mx-color-ink-2); z-index: var(--mx-z-control); }
.mx-app[data-panel="open"] .mx-strip { right: var(--mx-panel-w); }
.mx-app .mx-strip__scale { min-width: 72px; }
.mx-app .mx-strip__attr { flex: 1 1 12rem; min-width: 0; }
.mx-app .mx-strip__legal { margin: 0; }
.mx-app .mx-strip__legalbtn { display: none; background: none; border: 0; padding: 0 var(--mx-gap-sm); min-height: 24px; font-size: var(--mx-fs-2xs); text-decoration: underline; color: var(--mx-color-primary-hover); }
@media (max-width: 991.98px) {
  .mx-app .mx-strip__attr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line; the whole credit is in the legal notice */
  .mx-app .mx-strip__legal { display: none; }
  .mx-app .mx-strip__legalbtn { display: inline-block; }
}
.mx-app .mx-strip__cookies { display: none; }
@media (min-width: 992px) { .mx-app .mx-strip__cookies:not([hidden]) { display: inline-block; } }   /* wide screens show the legal text itself, so the cookie link sits beside it */
.mx-app .ol-scale-line { position: static; background: transparent; padding: 0; }
.mx-app .ol-scale-line-inner { border-color: var(--mx-color-ink-3); color: var(--mx-color-ink-2); font-size: var(--mx-fs-2xs); }

/* ---------- buttons, icon buttons, fields ---------- */
.mx-app .mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mx-gap-sm); min-height: var(--mx-hit); padding: 0 var(--mx-gap-xl);
  border: 2px solid var(--mx-color-primary); border-radius: var(--mx-radius-md); background: var(--mx-color-primary); color: var(--mx-color-on-primary);
  font-family: var(--mx-font-display); font-size: var(--mx-fs-md); font-weight: 400; line-height: 1; letter-spacing: var(--mx-tracking); text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--mx-dur-fast) var(--mx-ease), border-color var(--mx-dur-fast) var(--mx-ease), color var(--mx-dur-fast) var(--mx-ease); }
.mx-app .mx-btn:hover { background: var(--mx-color-primary-hover); border-color: var(--mx-color-primary-hover); color: var(--mx-color-on-primary); text-decoration: none; }
.mx-app .mx-btn--ghost { background: transparent; color: var(--mx-color-primary-hover); }
.mx-app .mx-btn--ghost:hover { background: var(--mx-color-primary-tint); color: var(--mx-color-primary-strong); border-color: var(--mx-color-primary); }
.mx-app .mx-btn--sm { min-height: var(--mx-hit-sm); padding: 0 var(--mx-gap-md); font-size: 1rem; }
.mx-app .mx-btn:disabled, .mx-app .mx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.mx-app .mx-btn .mx-icon { width: 1.1em; height: 1.1em; }

.mx-app .mx-iconbtn { display: inline-grid; place-items: center; width: var(--mx-hit); height: var(--mx-hit); padding: 0; border: 0; border-radius: 50%;
  background: var(--mx-color-surface); color: var(--mx-color-ink); box-shadow: var(--mx-shadow-control); }
.mx-app .mx-iconbtn:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-iconbtn--flat { background: transparent; box-shadow: none; }
.mx-app .mx-iconbtn:disabled { opacity: .5; cursor: not-allowed; }
.mx-app .mx-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.mx-app .mx-linkbtn { background: none; border: 0; padding: 0; min-height: 32px; color: var(--mx-color-primary-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mx-app .mx-linkbtn:hover { color: var(--mx-color-primary-strong); }

.mx-app .mx-field { display: flex; flex-direction: column; gap: var(--mx-gap-xs); min-width: 0; }
.mx-app .mx-field__label, .mx-app .mx-series-picker__label { font-size: var(--mx-fs-sm); font-weight: 600; color: var(--mx-color-ink-2); }
.mx-app .mx-field__help { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-input, .mx-app .mx-select { width: 100%; min-height: var(--mx-hit); padding: 0 var(--mx-gap-md); background: var(--mx-color-surface); color: var(--mx-color-ink);
  border: 1px solid var(--mx-color-control-border); border-radius: var(--mx-radius-md); font-size: var(--mx-fs-base); }
.mx-app .mx-select { padding-right: 2rem; text-overflow: ellipsis; }
.mx-app .mx-input:hover, .mx-app .mx-select:hover { border-color: var(--mx-color-ink-2); }
.mx-app .mx-select:disabled, .mx-app .mx-input:disabled { background: var(--mx-color-surface-2); opacity: .7; }
.mx-app .mx-check { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--mx-color-primary); flex: none; }
.mx-app .mx-range { width: 100%; min-height: var(--mx-hit); accent-color: var(--mx-color-primary); margin: 0; }
.mx-app .mx-switch { display: flex; align-items: center; gap: var(--mx-gap-sm); min-height: var(--mx-hit); }
.mx-app .mx-switch.is-disabled { opacity: .6; }
.mx-app .mx-switch label { font-weight: 400; }
.mx-app .mx-opacity__row { display: flex; align-items: center; gap: var(--mx-gap-sm); }
.mx-app .mx-opacity__value { min-width: 3.2rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- search ---------- */
.mx-app .mx-search { position: relative; flex: 1 1 auto; min-width: 0; }
.mx-app .mx-search__field { position: relative; display: flex; align-items: center; background: var(--mx-color-surface); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-control); }
.mx-app .mx-search__icon { position: absolute; left: var(--mx-gap-md); display: grid; place-items: center; color: var(--mx-color-ink-3); pointer-events: none; }
.mx-app .mx-search__input { width: 100%; min-height: var(--mx-hit); padding: 0 2.75rem 0 2.5rem; border: 1px solid var(--mx-color-control-border); border-radius: var(--mx-radius-md); background: var(--mx-color-surface); font-size: var(--mx-fs-base); }
.mx-app .mx-search__input::placeholder { color: var(--mx-color-ink-4); opacity: 1; }
.mx-app .mx-search__clear { position: absolute; right: 2px; display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; border-radius: 50%; color: var(--mx-color-ink-2); }
.mx-app .mx-search__clear:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-search__list { position: absolute; z-index: var(--mx-z-popover); top: calc(100% + 4px); left: 0; right: 0; max-height: min(60dvh, var(--mx-vv-h, 60dvh)); overflow-y: auto;
  background: var(--mx-color-surface); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-popover); padding: var(--mx-gap-xs) 0; }
.mx-app .mx-search__group-title { padding: var(--mx-gap-sm) var(--mx-gap-md) var(--mx-gap-xs); font-size: var(--mx-fs-sm); font-weight: 700; color: var(--mx-color-ink-3); }
.mx-app .mx-search__option { display: flex; flex-direction: column; gap: 2px; padding: var(--mx-gap-sm) var(--mx-gap-md); border-left: 4px solid transparent; cursor: pointer; overflow-wrap: anywhere; }
.mx-app .mx-search__option:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-search__option[aria-selected="true"] { background: var(--mx-color-primary-tint-2); border-left-color: var(--mx-color-primary); }
.mx-app .mx-search__meta { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); align-items: center; font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-search__empty { padding: var(--mx-gap-lg); display: flex; flex-direction: column; gap: var(--mx-gap-sm); align-items: flex-start; }
.mx-app .mx-search__none { font-weight: 700; overflow-wrap: anywhere; }

/* ---------- layers popover ---------- */
.mx-app .mx-layers { position: relative; flex: none; }
.mx-app .mx-layers__btn { display: inline-flex; align-items: center; gap: var(--mx-gap-sm); min-height: var(--mx-hit); padding: 0 var(--mx-gap-lg); background: var(--mx-color-surface);
  border: 1px solid var(--mx-color-control-border); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-control); font-weight: 700; color: var(--mx-color-ink); }
.mx-app .mx-layers__btn:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-layers__btn[aria-expanded="true"] { background: var(--mx-color-primary-tint-2); }
.mx-app dialog.mx-layers__panel { position: absolute; z-index: var(--mx-z-popover); top: calc(100% + 6px); left: 0; margin: 0; width: min(22rem, 90vw); max-height: calc(var(--mx-app-h) - 6rem); overflow-y: auto;
  padding: var(--mx-gap-lg); background: var(--mx-color-surface); color: var(--mx-color-ink); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-lg); box-shadow: var(--mx-shadow-popover); }
.mx-app .mx-layers__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mx-gap-md); }
.mx-app .mx-layers__title { font-size: var(--mx-fs-md); }
.mx-app .mx-fieldset { display: flex; flex-direction: column; gap: var(--mx-gap-xs); margin-bottom: var(--mx-gap-lg); }
.mx-app .mx-layers__item { display: flex; align-items: center; gap: var(--mx-gap-sm); min-height: 36px; font-weight: 400; cursor: pointer; }
.mx-app .mx-layers__item--inline { display: inline-flex; margin-right: var(--mx-gap-lg); }
.mx-app .mx-layers__row { display: flex; flex-wrap: wrap; }
.mx-app .mx-layers__text { display: flex; flex-direction: column; min-width: 0; }
.mx-app .mx-layers__hint, .mx-app .mx-layers__offscale, .mx-app .mx-layers__note { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-layers__item.is-offscale .mx-layers__name { color: var(--mx-color-ink-3); }
.mx-app .mx-layers__note { margin-bottom: var(--mx-gap-lg); }
.mx-app .mx-layers__reset { margin-top: var(--mx-gap-sm); }
.mx-app .mx-swatch { flex: none; }
.mx-app .mx-layers__panel .mx-field { margin-bottom: var(--mx-gap-lg); }

/* ---------- map furniture ---------- */
.mx-app .mx-tip { position: absolute; z-index: var(--mx-z-overlay); top: 0; left: 0; pointer-events: none; max-width: 16rem; padding: 4px 8px; background: var(--mx-color-ink); color: var(--mx-color-surface);
  border-radius: var(--mx-radius-sm); font-size: var(--mx-fs-sm); box-shadow: var(--mx-shadow-control); overflow-wrap: anywhere; }
.mx-app .mx-popup { position: relative; min-width: 12rem; max-width: 18rem; padding: var(--mx-gap-md) var(--mx-gap-xl) var(--mx-gap-md) var(--mx-gap-md); background: var(--mx-color-surface); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-popover); display: flex; flex-direction: column; gap: var(--mx-gap-xs); align-items: flex-start; }
.mx-app .mx-popup__close { position: absolute; top: 0; right: 0; width: 36px; height: 36px; }
.mx-app .mx-popup__title { font-weight: 700; overflow-wrap: anywhere; }
.mx-app .mx-popup__kind { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-hint { position: absolute; left: var(--mx-control-gap); right: 5rem; bottom: calc(var(--mx-strip-h, 1.75rem) + var(--mx-control-gap)); display: none; align-items: center; gap: var(--mx-gap-sm); flex-wrap: wrap;
  padding: var(--mx-gap-sm) var(--mx-gap-md); background: var(--mx-color-surface); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-control); font-size: var(--mx-fs-sm); }
.mx-app .mx-maplegend { position: absolute; left: var(--mx-control-gap); bottom: calc(var(--mx-strip-h, 1.75rem) + var(--mx-control-gap)); width: min(20rem, calc(100% - var(--mx-panel-w) - 2 * var(--mx-control-gap))); z-index: var(--mx-z-overlay);
  padding: var(--mx-gap-md); background: var(--mx-color-surface); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-control); display: flex; flex-direction: column; gap: var(--mx-gap-sm); }
.mx-app .mx-maplegend__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-gap-sm); }
.mx-app .mx-maplegend__title { font-weight: 700; font-size: var(--mx-fs-sm); overflow-wrap: anywhere; }
.mx-app .mx-overlaychip { display: none; position: absolute; left: var(--mx-control-gap); bottom: calc(var(--mx-sheet-visible, 0px) + var(--mx-strip-h, 1.75rem) + var(--mx-control-gap)); max-width: calc(100% - 6rem); align-items: center; gap: var(--mx-gap-sm);
  min-height: var(--mx-hit); padding: 0 var(--mx-gap-md); background: var(--mx-color-surface); border: 1px solid var(--mx-color-control-border); border-radius: var(--mx-radius-pill); box-shadow: var(--mx-shadow-control); font-size: var(--mx-fs-sm); font-weight: 600; }
.mx-app .mx-overlaychip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- side panel ---------- */
.mx-app .mx-panel { position: absolute; inset: 0 0 0 auto; width: var(--mx-panel-w); z-index: var(--mx-z-panel); display: flex; flex-direction: column; background: var(--mx-color-surface);
  border-left: 1px solid var(--mx-color-line); box-shadow: var(--mx-shadow-panel); transition: transform var(--mx-dur) var(--mx-ease), visibility 0s; }
.mx-app[data-panel="closed"] .mx-panel { transform: translateX(100%); visibility: hidden; transition: transform var(--mx-dur) var(--mx-ease), visibility 0s linear var(--mx-dur); }
.mx-app .mx-panel__toggle { position: absolute; top: 50%; left: -28px; width: 28px; height: var(--mx-hit); margin-top: calc(var(--mx-hit) / -2); display: grid; place-items: center; padding: 0;
  background: var(--mx-color-surface); border: 1px solid var(--mx-color-line); border-right: 0; border-radius: var(--mx-radius-md) 0 0 var(--mx-radius-md); box-shadow: var(--mx-shadow-control); color: var(--mx-color-ink); visibility: visible; }
.mx-app .mx-panel__toggle:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-panel__toggle .mx-icon { transition: transform var(--mx-dur) var(--mx-ease); }
.mx-app .mx-sheet__handle { display: none; }
.mx-app .mx-panel[aria-busy="true"] .mx-panel__scroll { opacity: .5; }
.mx-app .mx-panel__head { padding: var(--mx-gap-lg) var(--mx-gap-lg) var(--mx-gap-md); display: flex; flex-direction: column; gap: var(--mx-gap-sm); border-bottom: 1px solid var(--mx-color-line); flex: none; }
.mx-app .mx-panel__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mx-gap-sm); }
.mx-app .mx-panel__title { font-family: var(--mx-font-display); font-weight: 400; font-size: var(--mx-fs-lg); letter-spacing: var(--mx-tracking); text-transform: uppercase; overflow-wrap: anywhere; min-width: 0; line-height: 1.15; }
.mx-app .mx-panel__title:focus { outline: none; }
.mx-app .mx-panel__title:focus-visible { outline: 3px solid var(--mx-color-focus) !important; outline-offset: 2px !important; }
.mx-app .mx-panel__title.is-skel { opacity: .6; }
.mx-app .mx-panel__actions { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); }
.mx-app .mx-panel__stale { margin-top: var(--mx-gap-xs); }
.mx-app .mx-panel__body { flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.mx-app .mx-panel__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--mx-gap-lg); scroll-padding-top: var(--mx-sticky-h); }
.mx-app .mx-tabpanel:focus-visible { outline-offset: -3px !important; }

.mx-app .mx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--mx-gap-xs); font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-crumbs li + li::before { content: "\203A"; content: "\203A" / ""; margin-right: var(--mx-gap-xs); color: var(--mx-color-ink-4); }
.mx-app .mx-crumbs li { overflow-wrap: anywhere; }
.mx-app .mx-crumbs a { color: var(--mx-color-ink-3); text-decoration: underline; }
.mx-app .mx-crumbs a:hover { color: var(--mx-color-primary-strong); }

.mx-app .mx-badges { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); }
.mx-app .mx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--mx-gap-sm); border-radius: var(--mx-radius-sm); font-size: var(--mx-fs-sm); font-weight: 600; }
.mx-app .mx-badge--level { background: var(--mx-color-surface-2); border: 1px solid var(--mx-color-line); color: var(--mx-color-ink-2); }
.mx-app .mx-badge--priority { background: var(--mx-color-primary-tint); color: var(--mx-color-primary-strong); }
.mx-app .mx-badge .mx-icon { width: 1em; height: 1em; }

.mx-app .mx-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--mx-color-line); flex: none; }
.mx-app .mx-tab { min-height: 48px; padding: 0 var(--mx-gap-xs); display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; border-bottom: 4px solid transparent; border-radius: 0;
  color: var(--mx-color-ink-3); font-family: var(--mx-font-display); font-size: .95rem; letter-spacing: var(--mx-tracking); text-transform: uppercase; }
.mx-app .mx-tab:hover { background: var(--mx-color-primary-tint); color: var(--mx-color-ink); }
.mx-app .mx-tab[aria-selected="true"] { color: var(--mx-color-ink); border-bottom-color: var(--mx-color-primary); }
.mx-app .mx-tab:focus-visible { outline-offset: -3px !important; }
.mx-app .mx-tab > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .mx-app .mx-tab .mx-icon { display: none; } }
@container (max-width: 420px) { .mx-app .mx-tab .mx-icon { display: none; } }

.mx-app .mx-welcome { padding: var(--mx-gap-xl) var(--mx-gap-lg); overflow-y: auto; display: flex; flex-direction: column; gap: var(--mx-gap-md); flex: 1; min-height: 0; }
.mx-app .mx-welcome__title { font-family: var(--mx-font-display); font-weight: 400; font-size: var(--mx-fs-xl); letter-spacing: var(--mx-tracking); text-transform: uppercase; line-height: 1.1; }
.mx-app .mx-welcome__title:focus { outline: none; }
.mx-app .mx-welcome__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mx-gap-sm); }
.mx-app .mx-welcome__features li { display: flex; align-items: flex-start; gap: var(--mx-gap-md); font-size: var(--mx-fs-sm); color: var(--mx-color-ink-2); }
.mx-app .mx-welcome__features li > span:first-child { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 1px; color: var(--mx-color-primary-hover); }
.mx-app .mx-welcome__features .mx-icon { width: 100%; height: 100%; }
.mx-app .mx-browse__list { display: flex; flex-direction: column; }
.mx-app .mx-browse__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--mx-gap-sm); padding: var(--mx-gap-sm) 0; border-bottom: 1px solid var(--mx-color-line); }
.mx-app .mx-browse__list a { font-weight: 700; }
.mx-app .mx-browse__meta { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }

/* ---------- sections, notes, states, skeletons ---------- */
.mx-app .mx-section { margin-bottom: var(--mx-gap-xl); }
.mx-app .mx-section__title { font-size: var(--mx-fs-md); margin-bottom: var(--mx-gap-md); }
.mx-app .mx-intro { color: var(--mx-color-ink-3); font-size: var(--mx-fs-sm); margin-bottom: var(--mx-gap-md); }
.mx-app .mx-note { display: flex; gap: var(--mx-gap-sm); align-items: flex-start; padding: var(--mx-gap-sm) var(--mx-gap-md); border-radius: var(--mx-radius-md); font-size: var(--mx-fs-sm); margin-top: var(--mx-gap-sm); }
.mx-app .mx-note--info { background: var(--mx-color-surface-2); color: var(--mx-color-ink-2); }
.mx-app .mx-note--warn { background: var(--mx-color-warn-tint); color: var(--mx-color-warn); }
.mx-app .mx-note .mx-icon { margin-top: 2px; }
.mx-app .mx-source { margin-top: var(--mx-gap-md); font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); overflow-wrap: anywhere; }
.mx-app .mx-source__title { font-weight: 700; }
.mx-app .mx-source__list li { margin-top: 2px; }

.mx-app .mx-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--mx-gap-sm); padding: var(--mx-gap-2xl) var(--mx-gap-lg); color: var(--mx-color-ink-3); }
.mx-app .mx-state__icon { color: var(--mx-color-primary); }
.mx-app .mx-state--error .mx-state__icon { color: var(--mx-color-danger); }
.mx-app .mx-state--offline .mx-state__icon { color: var(--mx-color-warn); }
.mx-app .mx-state__title { font-weight: 700; color: var(--mx-color-ink); }
.mx-app .mx-state__actions { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); justify-content: center; margin-top: var(--mx-gap-sm); }

.mx-app .mx-skel { border-radius: var(--mx-radius-md); background: linear-gradient(90deg, var(--mx-color-surface-2) 25%, #e6ece7 37%, var(--mx-color-surface-2) 63%); background-size: 400% 100%; animation: ds-shimmer 1.4s ease infinite; }
.mx-app .mx-skel--line { height: 1rem; margin-bottom: var(--mx-gap-sm); }
.mx-app .mx-skel--row { height: 4.5rem; margin-bottom: var(--mx-gap-sm); }
.mx-app .mx-skel--block { height: 9rem; margin-bottom: var(--mx-gap-md); }
.mx-app .mx-skel--card { height: 5rem; }
.mx-app .mx-skel--chart { height: 240px; margin-bottom: var(--mx-gap-md); }
.mx-app .mx-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin .7s linear infinite; }

/* ---------- toasts, dialog, popover ---------- */
.mx-app .mx-toasts { position: absolute; left: 50%; bottom: calc(var(--mx-strip-h, 1.75rem) + var(--mx-control-gap)); transform: translateX(-50%); z-index: var(--mx-z-toast); display: flex; flex-direction: column; gap: var(--mx-gap-sm); width: min(30rem, calc(100% - 2rem)); pointer-events: none; }
.mx-app .mx-toast { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mx-gap-sm); padding: var(--mx-gap-sm) var(--mx-gap-md); background: var(--mx-color-surface); border: 1px solid var(--mx-color-line); border-left: 6px solid var(--mx-color-info); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-popover); }
.mx-app .mx-toast--success { border-left-color: var(--mx-color-primary); }
.mx-app .mx-toast--error { border-left-color: var(--mx-color-danger); }
.mx-app .mx-toast__text { flex: 1 1 10rem; font-size: var(--mx-fs-sm); }
.mx-app .mx-toast__close { width: 36px; height: 36px; }
.mx-app .mx-toast input { flex: 1 1 100%; }

.mx-app dialog.mx-dialog { inset: 0; margin: auto; width: min(36rem, 94vw); max-height: 90dvh; padding: 0; border: 0; border-radius: var(--mx-radius-lg); background: var(--mx-color-surface); color: var(--mx-color-ink); box-shadow: var(--mx-shadow-popover); }
.mx-app dialog.mx-dialog--wide { width: min(70rem, 94vw); height: 85dvh; }
.mx-app dialog.mx-dialog::backdrop { background: var(--mx-color-scrim); }
.mx-app dialog.mx-dialog[open] { display: flex; flex-direction: column; }
.mx-app .mx-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-gap-sm); padding: var(--mx-gap-md) var(--mx-gap-lg); border-bottom: 1px solid var(--mx-color-line); }
.mx-app .mx-dialog__title { font-size: var(--mx-fs-md); overflow-wrap: anywhere; }
.mx-app .mx-dialog__body { padding: var(--mx-gap-lg); overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--mx-gap-md); }
.mx-app .mx-dialog__frame { width: 100%; flex: 1; min-height: 50dvh; border: 0; background: var(--mx-color-surface-2); }
.mx-app .mx-dialog__img { max-width: 100%; height: auto; align-self: center; }

.mx-app .mx-popwrap { position: relative; display: inline-block; }
.mx-app .mx-popover { position: absolute; z-index: var(--mx-z-popover); top: calc(100% + 4px); left: 0; width: min(20rem, 80vw); max-height: 18rem; overflow-y: auto; padding: var(--mx-gap-md);
  background: var(--mx-color-surface); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-popover); display: flex; flex-direction: column; gap: var(--mx-gap-sm); }
.mx-app .mx-popover__title { font-size: var(--mx-fs-sm); font-weight: 700; color: var(--mx-color-ink-3); }
.mx-app .mx-choices { display: flex; flex-direction: column; }
.mx-app .mx-choices li { display: flex; flex-direction: column; }
.mx-app .mx-choices__item { text-align: left; background: none; border: 0; border-radius: var(--mx-radius-sm); min-height: 40px; padding: 4px var(--mx-gap-sm); overflow-wrap: anywhere; }
.mx-app .mx-choices__item:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-choices__hint { padding: 0 var(--mx-gap-sm) 4px; font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-choices__none { padding: var(--mx-gap-sm); color: var(--mx-color-ink-3); }

/* ---------- chips ---------- */
.mx-app .mx-chips { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); }
.mx-app .mx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--mx-hit-sm); padding: 0 var(--mx-gap-md); background: var(--mx-color-surface); color: var(--mx-color-ink);
  border: 1px solid var(--mx-color-control-border); border-radius: var(--mx-radius-pill); font-size: var(--mx-fs-sm); font-weight: 600; }
.mx-app .mx-chip .mx-icon { width: 1em; height: 1em; display: none; }
.mx-app .mx-chip:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-chip[aria-pressed="true"] { background: var(--mx-color-primary); border-color: var(--mx-color-primary); color: var(--mx-color-on-primary); }
.mx-app .mx-chip[aria-pressed="true"] .mx-icon { display: inline-block; }
.mx-app .mx-chip:disabled { opacity: .5; cursor: not-allowed; }
.mx-app .mx-chip__count { font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- General tab ---------- */
.mx-app .mx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-gap-sm); }
.mx-app .mx-kpi { padding: var(--mx-gap-md); background: var(--mx-color-surface-2); border-radius: var(--mx-radius-md); min-width: 0; }
.mx-app .mx-kpi__value { font-family: var(--mx-font-display); font-size: var(--mx-fs-lg); line-height: 1.1; letter-spacing: var(--mx-tracking); overflow-wrap: anywhere; }
.mx-app .mx-kpi__unit { font-size: var(--mx-fs-base); }
.mx-app .mx-kpi__label { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-2); }
.mx-app .mx-kpi__note { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-richtext__body { overflow-wrap: anywhere; }
.mx-app .mx-richtext__body.is-clamped { max-height: 9em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.mx-app .mx-richtext__body p, .mx-app .mx-richtext__body ul, .mx-app .mx-richtext__body ol { margin-bottom: var(--mx-gap-sm); }
.mx-app .mx-richtext__body ul { list-style: disc; padding-left: 1.25rem; }
.mx-app .mx-richtext__body ol { list-style: decimal; padding-left: 1.25rem; }
.mx-app .mx-richtext__body h4 { margin: var(--mx-gap-md) 0 var(--mx-gap-xs); }
.mx-app .mx-richtext__body a { text-decoration: underline; }
.mx-app .mx-dl__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--mx-gap-sm); padding: var(--mx-gap-sm) 0; border-bottom: 1px solid var(--mx-color-line); font-size: var(--mx-fs-sm); }
.mx-app .mx-dl__row dt { color: var(--mx-color-ink-3); overflow-wrap: anywhere; }
.mx-app .mx-dl__row dd { font-weight: 600; overflow-wrap: anywhere; }
.mx-app .mx-children { margin-bottom: var(--mx-gap-md); }
.mx-app .mx-children__title { font-size: var(--mx-fs-base); margin-bottom: var(--mx-gap-xs); }
.mx-app .mx-children__list li { padding: 2px 0; overflow-wrap: anywhere; }
.mx-app .mx-children__list a, .mx-app .mx-browse__list a { display: inline-block; min-height: 28px; line-height: 28px; }
.mx-app .mx-profile { margin-top: var(--mx-gap-lg); }
.mx-app .mx-link { overflow-wrap: anywhere; }

/* ---------- Documents tab ---------- */
.mx-app .mx-docs__bar { position: sticky; top: calc(var(--mx-gap-lg) * -1); z-index: 3; margin: 0 calc(var(--mx-gap-lg) * -1); padding: var(--mx-gap-sm) var(--mx-gap-lg) var(--mx-gap-md); display: flex; flex-direction: column; gap: var(--mx-gap-sm);
  background: var(--mx-color-surface); border-bottom: 1px solid var(--mx-color-line); }
.mx-app .mx-docs__filters { margin: var(--mx-gap-sm) 0 var(--mx-gap-md); font-size: var(--mx-fs-sm); }
.mx-app .mx-docs__filters summary { font-weight: 700; color: var(--mx-color-primary-hover); min-height: 36px; display: flex; align-items: center; }
.mx-app .mx-docs__adv { display: flex; flex-direction: column; gap: var(--mx-gap-sm); padding-top: var(--mx-gap-xs); }
.mx-app .mx-docs__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-gap-sm); }
.mx-app .mx-docs__status { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-gap-sm); flex-wrap: wrap; }
.mx-app .mx-docs__count { font-size: var(--mx-fs-sm); font-weight: 600; color: var(--mx-color-ink-2); }
.mx-app .mx-docs__more { display: flex; justify-content: center; padding: var(--mx-gap-lg) 0; }
.mx-app .mx-doclist { display: flex; flex-direction: column; gap: var(--mx-gap-md); }
.mx-app .mx-doc { display: flex; gap: var(--mx-gap-md); padding: var(--mx-gap-md); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-md); }
.mx-app .mx-doc__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--mx-radius-sm); background: var(--mx-color-primary-tint); color: var(--mx-color-primary-strong); font-size: var(--mx-fs-2xs); font-weight: 800; letter-spacing: .02em; }
.mx-app .mx-doc__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-app .mx-doc__title { font-size: var(--mx-fs-base); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mx-app .mx-doc__meta, .mx-app .mx-doc__origin { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-doc__actions { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); margin-top: var(--mx-gap-sm); }

/* ---------- Maps tab ---------- */
.mx-app .mx-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-gap-md); margin-top: var(--mx-gap-md); }
.mx-app .mx-gallery__item { min-width: 0; display: flex; }
.mx-app .mx-mapcard { display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; background: var(--mx-color-surface); color: var(--mx-color-ink); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-md); overflow: hidden; text-decoration: none; }
.mx-app .mx-mapcard:hover { border-color: var(--mx-color-primary); background: var(--mx-color-primary-tint); color: var(--mx-color-ink); }
.mx-app .mx-mapcard.is-active { outline: 3px solid var(--mx-color-primary); outline-offset: -3px; }
.mx-app .mx-mapcard.is-error { outline-color: var(--mx-color-danger); }
.mx-app .mx-mapcard__thumb { position: relative; aspect-ratio: 4 / 3; background: var(--mx-color-surface-2); display: grid; place-items: center; }
.mx-app .mx-mapcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mx-app .mx-mapcard__thumb.is-loading::after { content: ""; width: 1.25rem; height: 1.25rem; border: 2px solid var(--mx-color-ink-4); border-right-color: transparent; border-radius: 50%; animation: ds-spin .7s linear infinite; }
.mx-app .mx-mapcard__type { font-family: var(--mx-font-display); font-size: var(--mx-fs-lg); color: var(--mx-color-ink-3); display: grid; place-items: center; gap: 4px; }
.mx-app .mx-mapcard__badge { position: absolute; left: var(--mx-gap-sm); top: var(--mx-gap-sm); display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--mx-gap-sm); border-radius: var(--mx-radius-sm); background: var(--mx-color-primary); color: var(--mx-color-on-primary); font-size: var(--mx-fs-sm); font-weight: 700; }
.mx-app .mx-mapcard__body { padding: var(--mx-gap-sm) var(--mx-gap-md) var(--mx-gap-md); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-app .mx-mapcard__kind { display: flex; align-items: center; gap: 4px; font-size: var(--mx-fs-sm); color: var(--mx-color-primary-hover); font-weight: 700; }
.mx-app .mx-mapcard__title { font-size: var(--mx-fs-sm); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mx-app .mx-mapcard__meta, .mx-app .mx-mapcard__inherited { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); overflow-wrap: anywhere; }
.mx-app .mx-activemap { display: flex; flex-direction: column; gap: var(--mx-gap-sm); padding: var(--mx-gap-md); margin-bottom: var(--mx-gap-md); border: 2px solid var(--mx-color-primary); border-radius: var(--mx-radius-md); background: var(--mx-color-primary-tint); }
.mx-app .mx-activemap__title { font-size: var(--mx-fs-md); overflow-wrap: anywhere; }
.mx-app .mx-activemap__desc { white-space: pre-line; font-size: var(--mx-fs-sm); color: var(--mx-color-ink-2); overflow-wrap: anywhere; }
.mx-app .mx-activemap__actions { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); }
.mx-app .mx-legend { display: flex; flex-direction: column; gap: var(--mx-gap-xs); align-items: flex-start; }
.mx-app .mx-legend__frame { width: 100%; max-height: 40dvh; overflow: auto; border: 1px solid var(--mx-color-line); background: var(--mx-color-surface); padding: var(--mx-gap-xs); }
.mx-app .mx-legend__frame.is-compact { max-height: 12rem; }
.mx-app .mx-legend__frame img { max-width: 100%; height: auto; display: block; }

/* ---------- Results tab ---------- */
.mx-app .mx-results__controls { display: flex; flex-direction: column; gap: var(--mx-gap-md); padding-bottom: var(--mx-gap-md); border-bottom: 1px solid var(--mx-color-line); margin-bottom: var(--mx-gap-lg); }
.mx-app .mx-results__period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-gap-sm); }
.mx-app .mx-segmented { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--mx-gap-sm); }
.mx-app .mx-segmented legend { flex: 1 1 100%; }
.mx-app .mx-segmented__item { display: inline-flex; align-items: center; gap: 6px; min-height: var(--mx-hit-sm); padding: 0 var(--mx-gap-md); border: 1px solid var(--mx-color-control-border); border-radius: var(--mx-radius-md); font-weight: 600; font-size: var(--mx-fs-sm); cursor: pointer; background: var(--mx-color-surface); }
.mx-app .mx-segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mx-app .mx-segmented__item:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-segmented__item:has(:checked) { background: var(--mx-color-primary); border-color: var(--mx-color-primary); color: var(--mx-color-on-primary); }
.mx-app .mx-segmented__item:has(:focus-visible) { outline: 3px solid var(--mx-color-focus); outline-offset: 2px; }
.mx-app .mx-series-picker { display: flex; flex-direction: column; gap: var(--mx-gap-xs); }
.mx-app .mx-series-picker__chips { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); align-items: center; }
.mx-app .mx-series-picker__none { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); }
.mx-app .mx-serieschip { display: inline-flex; align-items: center; gap: 4px; min-height: var(--mx-hit-sm); padding: 0 4px 0 var(--mx-gap-sm); border: 1px solid var(--mx-color-control-border); border-radius: var(--mx-radius-pill); background: var(--mx-color-surface); font-size: var(--mx-fs-sm); font-weight: 600; max-width: 100%; }
.mx-app .mx-serieschip.is-error { background: var(--mx-color-danger-tint); color: var(--mx-color-danger); border-color: var(--mx-color-danger); }
.mx-app .mx-serieschip__name { overflow-wrap: anywhere; min-width: 0; }
.mx-app .mx-serieschip__x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--mx-color-ink-2); padding: 0; }
.mx-app .mx-serieschip__x:hover { background: var(--mx-color-primary-tint-2); }

.mx-app .mx-chart__title { font-size: var(--mx-fs-md); overflow-wrap: anywhere; }
.mx-app .mx-chart__sub { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); margin-bottom: var(--mx-gap-xs); overflow-wrap: anywhere; }
.mx-app .mx-chart__note { font-size: var(--mx-fs-sm); color: var(--mx-color-ink-2); }
.mx-app .mx-chart__plot { overflow-x: auto; margin-top: var(--mx-gap-sm); }
.mx-app .mx-chart__svg { display: block; max-width: none; }
.mx-app .mx-chart__svg .s1, .mx-app .mx-chart__sample.s1, .mx-app .mx-legend__item.s1, .mx-app .mx-chart__tipline.s1 { --mx-series: var(--mx-s1); }
.mx-app .mx-chart__svg .s2, .mx-app .mx-chart__sample.s2, .mx-app .mx-legend__item.s2, .mx-app .mx-chart__tipline.s2 { --mx-series: var(--mx-s2); }
.mx-app .mx-chart__svg .s3, .mx-app .mx-chart__sample.s3, .mx-app .mx-legend__item.s3, .mx-app .mx-chart__tipline.s3 { --mx-series: var(--mx-s3); }
.mx-app .mx-chart__svg .s4, .mx-app .mx-chart__sample.s4, .mx-app .mx-legend__item.s4, .mx-app .mx-chart__tipline.s4 { --mx-series: var(--mx-s4); }
.mx-app .mx-chart__svg .s5, .mx-app .mx-chart__sample.s5 { --mx-series: var(--mx-s5); }
.mx-app .mx-chart__svg .s6, .mx-app .mx-chart__sample.s6 { --mx-series: var(--mx-s6); }
.mx-app .mx-chart__line { fill: none; stroke: var(--mx-series); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mx-app .mx-chart__cibox { fill: var(--mx-series, var(--mx-s1)); fill-opacity: .24; stroke: var(--mx-series, var(--mx-s1)); stroke-opacity: .4; stroke-width: 1; mix-blend-mode: multiply; }
.mx-app .mx-chart__cidot { fill: var(--mx-series, var(--mx-s1)); }
.mx-app .mx-chart__plotbg { fill: var(--mx-color-surface-2); }
.mx-app .mx-chart__value { fill: var(--mx-color-ink-2); font: 600 .6875rem var(--mx-font-body); font-variant-numeric: tabular-nums; }
.mx-app .mx-chart__band { fill: var(--mx-series, var(--mx-s1)); fill-opacity: var(--mx-band-alpha); stroke: none; mix-blend-mode: multiply; }
.mx-app .mx-chart__edge { fill: none; stroke: var(--mx-series, var(--mx-s1)); stroke-width: 1; stroke-dasharray: 2 2; }
.mx-app .mx-chart__dot { fill: var(--mx-series); stroke: var(--mx-color-surface); stroke-width: 1.5; }
.mx-app .mx-chart__dot--noci, .mx-app .mx-chart__dot--agg { fill: var(--mx-color-surface); stroke: var(--mx-series); stroke-width: 2; }
.mx-app .mx-chart__dot-core { fill: var(--mx-series); stroke: none; }
.mx-app .mx-chart__bar { fill: var(--mx-series); }
.mx-app .mx-chart__bar--noci, .mx-app .mx-chart__bar--agg { stroke: var(--mx-series); stroke-width: 1.5; }
.mx-app .mx-chart__pat-bg { fill: var(--mx-color-surface); }
.mx-app .mx-chart__pat-line { stroke: var(--mx-series); stroke-width: 2.5; }
.mx-app .mx-chart__pat-dot { fill: var(--mx-series); }
.mx-app .mx-chart__whisker { fill: none; stroke: var(--mx-color-ink); stroke-width: 1; }
.mx-app .mx-chart__grid { stroke: var(--mx-grid); stroke-width: 1; }
.mx-app .mx-chart__grid--zero { stroke: var(--mx-axis); }
.mx-app .mx-chart__tick { fill: var(--mx-axis); font: 400 var(--mx-fs-2xs) var(--mx-font-body); }
.mx-app .mx-chart__label { fill: var(--mx-series); font: 700 var(--mx-fs-2xs) var(--mx-font-body); paint-order: stroke; stroke: var(--mx-color-surface); stroke-width: 3px; }
.mx-app .mx-chart__cursor { stroke: var(--mx-color-ink-4); stroke-width: 1; stroke-dasharray: 3 3; }
.mx-app .mx-chart__hit { cursor: crosshair; }
.mx-app .mx-chart__legend { margin-top: var(--mx-gap-sm); display: flex; flex-direction: column; gap: var(--mx-gap-xs); }
.mx-app .mx-chart__legend-items { display: flex; flex-wrap: wrap; gap: var(--mx-gap-xs) var(--mx-gap-md); }
.mx-app .mx-legend__item { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--mx-gap-xs); background: none; border: 0; border-radius: var(--mx-radius-sm); font-size: var(--mx-fs-sm); font-weight: 600; }
.mx-app .mx-legend__item:hover { background: var(--mx-color-primary-tint); }
.mx-app .mx-legend__item.is-off span { text-decoration: line-through; color: var(--mx-color-ink-4); }
.mx-app .mx-legend__item.is-off svg { filter: grayscale(1); opacity: .5; }
.mx-app .mx-chart__legend-extra { display: flex; flex-direction: column; gap: 2px; font-size: var(--mx-fs-sm); color: var(--mx-color-ink-2); }
.mx-app .mx-chart__legend-extra li { display: flex; align-items: center; gap: 6px; }
.mx-app .mx-chart__sample { flex: none; }
.mx-app .mx-chart__scrubwrap { margin-top: var(--mx-gap-md); }
.mx-app .mx-chart__datatip { margin-top: var(--mx-gap-xs); padding: var(--mx-gap-sm) var(--mx-gap-md); background: var(--mx-color-surface-2); border-radius: var(--mx-radius-md); font-size: var(--mx-fs-sm); display: flex; flex-direction: column; gap: 2px; }
.mx-app .mx-chart__tipyear { font-weight: 800; }
.mx-app .mx-chart__tipline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.mx-app .mx-chart__tipname { font-weight: 600; }
.mx-app .mx-chart__tipstatus { color: var(--mx-color-ink-3); }
.mx-app .mx-chart__howto, .mx-app .mx-chart__table { margin-top: var(--mx-gap-md); font-size: var(--mx-fs-sm); }
.mx-app .mx-chart__howto summary, .mx-app .mx-chart__table summary { font-weight: 700; color: var(--mx-color-primary-hover); min-height: 32px; display: flex; align-items: center; }
.mx-app .mx-chart__howto p { margin-top: var(--mx-gap-xs); color: var(--mx-color-ink-2); }
.mx-app .mx-chart__csv { margin-top: var(--mx-gap-sm); }
.mx-app .mx-table__scroll { overflow-x: auto; margin-top: var(--mx-gap-sm); }
.mx-app .mx-table { width: 100%; font-size: var(--mx-fs-sm); }
.mx-app .mx-table caption { text-align: left; font-weight: 700; padding-bottom: var(--mx-gap-xs); caption-side: top; }
.mx-app .mx-table th, .mx-app .mx-table td { padding: 6px var(--mx-gap-sm); border-bottom: 1px solid var(--mx-color-line); vertical-align: top; }
.mx-app .mx-table thead th { background: var(--mx-color-surface-2); font-weight: 700; }
.mx-app .mx-table tbody th { font-weight: 700; white-space: nowrap; }

/* ---------- phone: the panel is a bottom sheet with three heights ---------- */
@media (max-width: 767.98px) and (min-height: 501px), (max-width: 567.98px) {
  .mx-app { --mx-panel-w: 100%; }
  .mx-app .mx-panel { inset: auto 0 0 0; width: auto; height: calc(var(--mx-app-h) - var(--mx-sheet-top-gap)); border-left: 0; border-radius: var(--mx-radius-lg) var(--mx-radius-lg) 0 0; box-shadow: var(--mx-shadow-sheet);
    padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(var(--mx-drag-y, var(--mx-sheet-y))); }
  .mx-app[data-panel] .mx-panel { visibility: visible; }
  .mx-app[data-snap="peek"] { --mx-sheet-y: calc(100% - var(--mx-sheet-peek)); --mx-sheet-visible: var(--mx-sheet-peek); }
  .mx-app[data-snap="half"] { --mx-sheet-y: calc(100% - var(--mx-app-h) * .5); --mx-sheet-visible: calc(var(--mx-app-h) * .5); }
  .mx-app[data-snap="full"] { --mx-sheet-y: 0px; --mx-sheet-visible: 0px; }
  .mx-app[data-selection="none"] { --mx-sheet-visible: 0px; }
  .mx-app[data-selection="none"] .mx-panel { transform: translateY(100%); visibility: hidden; }
  .mx-app .mx-panel.is-dragging { transition: none; }
  .mx-app .mx-panel__toggle { display: none; }
  .mx-app .mx-sheet__handle { display: grid; place-items: center; width: 100%; height: 28px; flex: none; background: none; border: 0; padding: 0; touch-action: none; }
  .mx-app .mx-panel__head { padding: 0 var(--mx-gap-lg) var(--mx-gap-sm); gap: var(--mx-gap-xs); }
  .mx-app .mx-panel__titlerow { order: -2; }
  .mx-app .mx-badges { order: -1; }
  .mx-app .mx-panel__title { font-size: 1.25rem; }
  .mx-app[data-snap="peek"] .mx-panel__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-app[data-snap="peek"] .mx-panel__titlerow .mx-iconbtn { width: 32px; height: 32px; }
  .mx-app .mx-sheet__grip { width: 40px; height: 5px; border-radius: 3px; background: var(--mx-color-control-border); }
  .mx-app .mx-panel__head { touch-action: none; }
  .mx-app[data-panel] .mx-toolbar { max-width: none; }
  .mx-app[data-panel] .mx-strip { right: 0; bottom: var(--mx-sheet-visible, 0px); }
  .mx-app[data-panel] .mx-maplegend { display: none; }
  .mx-app[data-overlay="on"] .mx-overlaychip { display: inline-flex; }
  .mx-app[data-panel] .mx-zoom { right: var(--mx-control-gap); bottom: calc(var(--mx-sheet-visible, 0px) + var(--mx-strip-h, 1.75rem) + var(--mx-control-gap)); }
  .mx-app[data-snap="full"] .mx-zoom { display: none; }
  .mx-app[data-selection="none"] .mx-hint { display: flex; }
  /* little map left above the sheet: the three buttons side by side, so they never climb over the search and Layers buttons */
  @media (max-height: 740px) { .mx-app .mx-zoom { flex-direction: row; } }
  .mx-app .mx-layers__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mx-app .mx-layers__btn { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .mx-app .mx-search__input { min-height: 48px; }
  .mx-app dialog.mx-layers__panel:modal { position: fixed; inset: auto 0 0 0; top: auto; width: 100%; max-width: none; margin: 0; max-height: 80dvh; border-radius: var(--mx-radius-lg) var(--mx-radius-lg) 0 0; }
  .mx-app dialog.mx-layers__panel::backdrop { background: var(--mx-color-scrim); }
  .mx-app .mx-toasts { bottom: calc(var(--mx-sheet-visible, 0px) + var(--mx-strip-h, 1.75rem) + var(--mx-control-gap)); }
}
@media (max-width: 480px) { .mx-app .mx-kpis, .mx-app .mx-docs__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 359px) { .mx-app .mx-gallery { grid-template-columns: minmax(0, 1fr); } }

@media (min-width: 768px) { .mx-app[data-overlay="on"] .mx-overlaychip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mx-app *, .mx-app *::before, .mx-app *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .mx-app .mx-map__progress::after { animation: none; width: 40%; }
  .mx-app .mx-skel { animation: none; }
}
@media (forced-colors: active) {
  .mx-app .mx-tab[aria-selected="true"] { border-bottom-color: Highlight; }
  .mx-app .mx-chip[aria-pressed="true"], .mx-app .mx-mapcard.is-active { outline: 3px solid Highlight; }
  .mx-app .mx-chart__svg { forced-color-adjust: none; }
}
@media print {
  .mx-app .mx-map, .mx-app .mx-controls, .mx-app .mx-strip, .mx-app .mx-skiplinks, .mx-app .mx-panel__toggle { display: none; }
  .mx-app { height: auto; overflow: visible; }
  .mx-app .mx-panel { position: static; width: auto; box-shadow: none; transform: none; visibility: visible; }
}

/* ---------------------------------------------------------------------------------------------
   Results tab: chart builder, chart card, citation, "WWF" watermark
   --------------------------------------------------------------------------------------------- */
.mx-app .mx-builder { background: var(--mx-color-surface-2); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-lg);
  padding: var(--mx-gap-lg); margin-bottom: var(--mx-gap-xl); }
.mx-app .mx-results__out + .mx-builder { margin: var(--mx-gap-xl) 0 0; }
.mx-app .mx-builder__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mx-gap-md); margin-bottom: var(--mx-gap-lg); }
.mx-app .mx-builder__title { font-size: var(--mx-fs-lg); margin: 0; }
.mx-app .mx-builder__lead { margin: 2px 0 0; font-size: var(--mx-fs-sm); color: var(--mx-color-ink-3); max-width: 34ch; }
.mx-app .mx-builder__reset { flex: none; }
.mx-app .mx-builder__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mx-app .mx-step { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 var(--mx-gap-md); padding-bottom: var(--mx-gap-lg); }
.mx-app .mx-step:last-child { padding-bottom: 0; }
.mx-app .mx-step::before { content: ""; position: absolute; left: calc(.875rem - 1px); top: 1.9rem; bottom: .15rem; width: 2px; background: var(--mx-color-line); }
.mx-app .mx-step:last-child::before { display: none; }
.mx-app .mx-step__n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--mx-color-primary); color: var(--mx-color-on-primary);
  font: 700 var(--mx-fs-sm)/1 var(--mx-font-body); font-variant-numeric: tabular-nums; }
.mx-app .mx-step__body { display: flex; flex-direction: column; gap: var(--mx-gap-md); min-width: 0; }
.mx-app .mx-step__title { margin: 0; font-size: var(--mx-fs-base); line-height: 1.75rem; }
.mx-app .mx-builder__fields { display: grid; gap: var(--mx-gap-md); }
.mx-app .mx-builder .mx-select, .mx-app .mx-builder .mx-input { background-color: var(--mx-color-surface); border-radius: var(--mx-radius-md); }
.mx-app .mx-builder .mx-segmented { margin-bottom: 0; }
.mx-app .mx-builder .mx-segmented legend { font-size: var(--mx-fs-sm); font-weight: 600; color: var(--mx-color-ink-2); }
.mx-app .mx-builder .mx-segmented__item { background: var(--mx-color-surface); }
.mx-app .mx-builder .mx-segmented__item:has(:checked) { background: var(--mx-color-primary); }

/* on / off switch */
.mx-app .mx-toggle { display: inline-flex; align-items: center; gap: var(--mx-gap-md); min-height: var(--mx-hit-sm); cursor: pointer; font-size: var(--mx-fs-sm); font-weight: 600; color: var(--mx-color-ink-2); }
.mx-app .mx-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mx-app .mx-toggle__track { position: relative; flex: none; width: 2.5rem; height: 1.45rem; border-radius: var(--mx-radius-pill); background: var(--mx-color-control-border); transition: background-color var(--mx-dur-fast) var(--mx-ease); }
.mx-app .mx-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.45rem - 6px); height: calc(1.45rem - 6px); border-radius: 50%; background: var(--mx-color-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--mx-color-ink) 30%, transparent); transition: transform var(--mx-dur-fast) var(--mx-ease); }
.mx-app .mx-toggle__input:checked + .mx-toggle__track { background: var(--mx-color-primary); }
.mx-app .mx-toggle__input:checked + .mx-toggle__track::after { transform: translateX(1.05rem); }
.mx-app .mx-toggle__input:focus-visible + .mx-toggle__track { outline: 3px solid var(--mx-color-focus); outline-offset: 2px; }

/* chips for the series picked */
.mx-app .mx-builder .mx-serieschip { background: var(--mx-color-surface); border-radius: var(--mx-radius-pill); border-color: var(--mx-color-line); padding-left: var(--mx-gap-md); }
.mx-app .mx-builder .mx-series-picker + .mx-series-picker { margin-top: var(--mx-gap-xs); }

/* chart card */
.mx-app .mx-chart { background: var(--mx-color-surface); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-lg); padding: var(--mx-gap-lg); margin: 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--mx-color-ink) 6%, transparent), 0 6px 18px color-mix(in srgb, var(--mx-color-ink) 5%, transparent); }
.mx-app .mx-chart__title { font-size: var(--mx-fs-lg); margin: 0; }
.mx-app .mx-chart__tools { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); margin-top: var(--mx-gap-md); }
.mx-app .mx-chart__plot { margin-top: var(--mx-gap-md); border-radius: var(--mx-radius-md); }
.mx-app .mx-chart__watermark { fill: var(--mx-color-primary); fill-opacity: .08; font-family: var(--mx-font-display); font-weight: 700; letter-spacing: .08em; pointer-events: none; user-select: none; }

/* citation */
.mx-app .mx-cite { margin-top: var(--mx-gap-lg); padding: var(--mx-gap-lg); background: var(--mx-color-primary-tint); border-radius: var(--mx-radius-md); }
.mx-app .mx-cite__title { display: flex; align-items: center; gap: var(--mx-gap-sm); margin: 0 0 var(--mx-gap-sm); font-size: var(--mx-fs-base); color: var(--mx-color-primary-strong); }
.mx-app .mx-cite__text { margin: 0; font-size: var(--mx-fs-sm); color: var(--mx-color-ink); overflow-wrap: anywhere; user-select: all; }
.mx-app .mx-cite__link { margin: var(--mx-gap-sm) 0 0; font-size: var(--mx-fs-2xs); color: var(--mx-color-ink-3); overflow-wrap: anywhere; }
.mx-app .mx-cite__actions { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); margin-top: var(--mx-gap-md); }
@media (prefers-reduced-motion: reduce) { .mx-app .mx-toggle__track, .mx-app .mx-toggle__track::after { transition: none; } }

.mx-app .mx-cite__count { display: inline-flex; align-items: center; margin: var(--mx-gap-sm) 0 0; padding: 2px var(--mx-gap-md); border-radius: var(--mx-radius-pill);
  background: var(--mx-color-surface); font-size: var(--mx-fs-sm); font-weight: 700; color: var(--mx-color-primary-strong); font-variant-numeric: tabular-nums; }
.mx-app .mx-cite__count[hidden] { display: none; }

/* ---------------------------------------------------------------------------------------------
   Land cover comparison: card of the Maps tab, divider and year pills over the map
   --------------------------------------------------------------------------------------------- */
.mx-app .mx-landcover { display: grid; gap: var(--mx-gap-sm); padding: var(--mx-gap-md); margin-bottom: var(--mx-gap-lg); border: 1px solid var(--mx-color-line); border-radius: var(--mx-radius-md); background: var(--mx-color-surface-2); }
.mx-app .mx-landcover .mx-section__title, .mx-app .mx-landcover .mx-intro { margin: 0; }
.mx-app .mx-landcover > .mx-btn { justify-self: start; }
.mx-app .mx-landcover__body { display: grid; gap: var(--mx-gap-md); }
.mx-app .mx-landcover__years { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mx-gap-md); }
.mx-app .mx-landlegend summary { cursor: pointer; font-weight: 600; }
.mx-app .mx-landlegend__list { list-style: none; margin: var(--mx-gap-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--mx-gap-xs) var(--mx-gap-md); font-size: var(--mx-fs-sm); }
.mx-app .mx-landlegend__item { display: flex; align-items: center; gap: var(--mx-gap-sm); }
.mx-app .mx-landlegend__swatch { flex: none; width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .25); }

.mx-app .mx-swipe { position: absolute; inset: 0; z-index: var(--mx-z-overlay); pointer-events: none; }
.mx-app .mx-swipe[hidden] { display: none; }
.mx-app .mx-swipe__handle { position: absolute; top: 0; bottom: 0; left: var(--mx-swipe-x, 50%); width: 2.75rem; margin-left: -1.375rem; pointer-events: auto; cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.mx-app .mx-swipe__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.mx-app .mx-swipe__grip { position: relative; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; box-shadow: var(--mx-shadow-control), 0 0 0 1px rgba(0, 0, 0, .3); }
.mx-app .mx-swipe__grip::before, .mx-app .mx-swipe__grip::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.mx-app .mx-swipe__grip::before { left: 3px; border-right-color: #333; }
.mx-app .mx-swipe__grip::after { right: 3px; border-left-color: #333; }
.mx-app .mx-swipe__handle:focus { outline: none; }
.mx-app .mx-swipe__handle:focus-visible .mx-swipe__grip { outline: 3px solid var(--mx-color-focus); outline-offset: 2px; }
.mx-app .mx-swipe__pill { position: absolute; top: 4.25rem; padding: .15rem .6rem; border-radius: var(--mx-radius-pill); background: rgba(0, 0, 0, .7); color: #fff; font-weight: 700; font-size: var(--mx-fs-sm); }
.mx-app .mx-swipe__pill--left { left: calc(var(--mx-swipe-left, 0px) + .75rem); }
.mx-app .mx-swipe__pill--right { right: calc(var(--mx-swipe-right, 0px) + .75rem); }
@media (max-width: 767px) {
  .mx-app .mx-landcover__years { grid-template-columns: 1fr; }
  .mx-app .mx-swipe__pill--right { right: calc(var(--mx-swipe-right, 0px) + 4rem); }   /* clear of the zoom buttons */
}

/* Download dialog */
.mx-app .mx-download, .mx-dialog .mx-download { display: grid; gap: var(--mx-gap-lg); }
.mx-dialog .mx-download__section { display: grid; gap: var(--mx-gap-sm); justify-items: start; }
.mx-dialog .mx-download__block { display: grid; gap: var(--mx-gap-sm); }
.mx-dialog .mx-download__links { display: flex; flex-wrap: wrap; gap: var(--mx-gap-sm); }
.mx-dialog .mx-download__section .mx-section__title, .mx-dialog .mx-download__section .mx-intro { margin: 0; }

/* ---------- touch: every control a finger can reach is at least 44 px ---------- */
@media (pointer: coarse) {
  .mx-app .mx-linkbtn { min-height: var(--mx-hit); display: inline-flex; align-items: center; }
  .mx-app .mx-layers__item { min-height: var(--mx-hit); }
  .mx-app .mx-choices__item { min-height: var(--mx-hit); }
  .mx-app .mx-strip__legalbtn { min-height: var(--mx-hit); margin-block: -10px; }   /* a 44 px target in a 28 px strip */
  .mx-app[data-snap="peek"] .mx-panel__titlerow .mx-iconbtn { width: var(--mx-hit); height: var(--mx-hit); }
  .mx-app .mx-search__clear { min-width: var(--mx-hit); min-height: var(--mx-hit); }
}

/* ---------- phone: the hamburger joins the logo row of the site header instead of taking a row of its own (+76 px of map) ---------- */
@media (max-width: 991.98px) {
  body.mx-page nav.navbar { position: absolute; top: 0; left: 5.5rem; height: 80px; padding: 0; z-index: 1040; display: flex; align-items: center; }
  body.mx-page nav.navbar > .container { padding: 0; width: auto; max-width: none; margin: 0; }
  body.mx-page nav.navbar .navbar-toggler { margin: 0; min-width: 44px; min-height: 44px; }
  body.mx-page nav.navbar .navbar-collapse { position: fixed; top: 80px; left: 0; right: 0; z-index: 1040; background: #fff; box-shadow: 0 8px 20px rgba(22, 32, 27, .2);
    max-height: calc(100dvh - 80px); overflow-y: auto; padding: 0 1rem 1rem; }
}