/**
 * Region map page — load after css/style.css and css/rry-tool-pages.css.
 * --rm-* tokens intentionally alias --app-* from body.map-page for clarity in this file.
 */
      :root.region-map-page {
        color-scheme: light;
      }

      /* Bridge map design tokens (style.css) → region map UI */
      body.region-map-body.map-page {
        font-family: var(--rm-font-body);
        color: var(--rm-text);
        --rm-font-body: var(--app-font-body, "Figtree", system-ui, sans-serif);
        --rm-font-display: var(
          --app-font-display,
          "Figtree",
          system-ui,
          sans-serif
        );
        --rm-bg: var(--app-bg, #f6f5f2);
        --rm-bg-subtle: #eeedea;
        --rm-text: var(--app-text, #1a1917);
        --rm-text-muted: var(--app-text-muted, #57534e);
        --rm-accent: var(--app-accent, #d4a017);
        --rm-accent-hover: var(--app-accent-hover, #b88a14);
        --rm-surface: rgba(255, 255, 255, 0.94);
        --rm-surface-solid: rgba(252, 251, 248, 0.98);
        --rm-border: var(--app-border, #e7e5e4);
        --rm-shadow: var(--app-shadow, 0 1px 3px rgba(26, 25, 23, 0.06));
        --rm-shadow-lg: var(--app-shadow-lg, 0 4px 20px rgba(26, 25, 23, 0.08));
        --rm-shadow-hover: 0 12px 36px rgba(26, 25, 23, 0.1);
        --rm-radius: var(--app-radius, 10px);
        --rm-radius-sm: var(--app-radius-sm, 6px);
        --rm-radius-lg: 12px;
        --rm-surface-hover: rgba(250, 250, 249, 0.98);
        --rm-ease: var(--app-ease, 0.25s ease);
        background: var(--rm-bg);
        background-image:
          radial-gradient(
            ellipse 100% 60% at 50% -10%,
            rgba(212, 160, 23, 0.06),
            transparent
          ),
          linear-gradient(180deg, var(--rm-bg) 0%, var(--rm-bg-subtle) 100%);
      }

      .region-map-layout {
        display: flex;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
      }

      /* Map column only: keeps header from covering the sidebar / search */
      .region-map-main {
        flex: 1;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 0;
      }

      #region-map-container {
        flex: 1;
        min-width: 0;
        min-height: 0;
        z-index: 0;
      }

      .region-map-controls {
        position: relative;
        z-index: 40;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.97) 0%,
          rgba(252, 251, 248, 0.95) 100%
        );
        backdrop-filter: blur(14px) saturate(1.08);
        -webkit-backdrop-filter: blur(14px) saturate(1.08);
        border-right: 1px solid var(--rm-border);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.75) inset,
          var(--rm-shadow-lg);
        transition: width var(--rm-ease);
      }

      .region-map-controls::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        bottom: 0;
        background: linear-gradient(
          180deg,
          rgba(212, 160, 23, 0.45) 0%,
          rgba(212, 160, 23, 0.08) 35%,
          rgba(88, 101, 242, 0.12) 100%
        );
        pointer-events: none;
        opacity: 0.9;
      }

      .region-map-controls.collapsed {
        width: 0;
        overflow: hidden;
        border-right: none;
      }

      .region-map-controls:not(.collapsed) {
        width: 300px;
      }

      /* Beer.css `.button, button { … }` sets primary fill, padding, min size — reset so
         the tab stays a slim strip and a non-font chevron stays visible (Figtree subset
         may omit ▶/◀; ::after also inherited on-primary in edge cases). */
      button.region-map-controls-toggle {
        position: fixed;
        left: 300px;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        width: 18px;
        height: 40px;
        padding: 0 !important;
        margin: 0 !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        block-size: auto !important;
        max-block-size: none !important;
        font-size: 0 !important;
        font-weight: 600 !important;
        border: 1px solid var(--rm-border);
        border-left: none;
        border-radius: 0 var(--rm-radius-sm) var(--rm-radius-sm) 0;
        cursor: pointer;
        color: #44403c;
        background-color: rgba(255, 255, 255, 0.98) !important;
        background-image: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.98) 0%,
          rgba(252, 251, 248, 0.94) 100%
        ) !important;
        -webkit-appearance: none;
        appearance: none;
        z-index: 1200;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        box-shadow:
          2px 2px 10px rgba(26, 25, 23, 0.07),
          0 1px 0 rgba(255, 255, 255, 0.8) inset;
        transition:
          left var(--rm-ease),
          color var(--rm-ease),
          box-shadow var(--rm-ease);
      }

      /* Neutral “chip” look; beer.css uses primary purple + white text on bare `button`. */
      button.region-map-controls-toggle:hover {
        color: var(--rm-accent);
        box-shadow:
          2px 4px 16px rgba(212, 160, 23, 0.12),
          0 1px 0 rgba(255, 255, 255, 0.85) inset;
      }

      .region-map-controls.collapsed ~ button.region-map-controls-toggle {
        left: 0;
        border-left: 1px solid var(--rm-border);
      }

      /* Chevron lives in a child span — beer.css gives `button::after` high specificity for
         ripple overlay, which overwrote our triangle and made the strip look blank on white. */
      button.region-map-controls-toggle .region-map-controls-chevron {
        position: relative;
        z-index: 2;
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 6px;
        border-color: transparent transparent transparent #44403c;
        transform: translateX(1px);
        flex-shrink: 0;
      }

      button.region-map-controls-toggle:hover .region-map-controls-chevron {
        border-left-color: var(--rm-accent);
      }

      .region-map-controls.collapsed
        ~ button.region-map-controls-toggle .region-map-controls-chevron {
        border-width: 5px 6px 5px 0;
        border-color: transparent #44403c transparent transparent;
        border-left-color: transparent;
        transform: translateX(-1px);
      }

      .region-map-controls.collapsed
        ~ button.region-map-controls-toggle:hover
        .region-map-controls-chevron {
        border-right-color: var(--rm-accent);
      }

      /* Top block: no vertical scroll so autocomplete is not clipped */
      .region-map-controls-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .region-map-controls-top {
        flex-shrink: 0;
        padding: 1rem 1rem 0.75rem;
        position: relative;
        z-index: 30;
        overflow: visible;
      }

      .region-map-controls-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 1rem 1rem;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid rgba(26, 25, 23, 0.06);
      }

      .region-map-controls h3 {
        margin: 0 0 0.65rem;
        font-family: var(--rm-font-display);
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--rm-text-muted);
      }

      .region-map-search-wrap {
        position: relative;
        z-index: 80;
      }

      .region-map-search-wrap input {
        width: 100%;
        padding: 0.6rem 0.85rem;
        font-size: 0.9375rem;
        font-family: inherit;
        border: 1px solid var(--rm-border);
        border-radius: var(--rm-radius);
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.88);
        transition:
          border-color var(--rm-ease),
          box-shadow var(--rm-ease),
          background var(--rm-ease);
      }

      .region-map-search-wrap input:hover {
        border-color: rgba(212, 160, 23, 0.28);
        background: rgba(255, 255, 255, 0.95);
      }

      .region-map-search-wrap input:focus {
        outline: none;
        border-color: var(--rm-accent);
        box-shadow:
          0 0 0 2px rgba(212, 160, 23, 0.18),
          0 2px 12px rgba(26, 25, 23, 0.06);
        background: #fff;
      }

      #autocomplete {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 6px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.98) 0%,
          rgba(252, 251, 248, 0.96) 100%
        );
        backdrop-filter: blur(12px) saturate(1.08);
        -webkit-backdrop-filter: blur(12px) saturate(1.08);
        border: 1px solid var(--rm-border);
        border-radius: var(--rm-radius);
        max-height: min(38dvh, 220px);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 200;
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.75) inset,
          var(--rm-shadow-lg);
      }

      #autocomplete::before {
        content: "";
        display: block;
        height: 2px;
        border-radius: var(--rm-radius) var(--rm-radius) 0 0;
        background: linear-gradient(
          90deg,
          rgba(212, 160, 23, 0.55) 0%,
          rgba(212, 160, 23, 0.12) 40%,
          rgba(88, 101, 242, 0.2) 100%
        );
      }

      #autocomplete:empty,
      #autocomplete[style*="display: none"] {
        display: none !important;
      }

      .autocomplete-item {
        padding: 0.5rem 0.8rem;
        cursor: pointer;
        font-size: 0.875rem;
        border-bottom: 1px solid rgba(26, 25, 23, 0.06);
        transition: background var(--rm-ease);
      }

      .autocomplete-item:last-child {
        border-bottom: none;
        border-radius: 0 0 var(--rm-radius) var(--rm-radius);
      }

      .autocomplete-item:hover,
      .autocomplete-item.active {
        background: rgba(212, 160, 23, 0.09);
      }

      .autocomplete-item code {
        font-size: 0.78rem;
        color: var(--rm-text-muted);
      }

      #counter {
        margin-top: 0.55rem;
        font-size: 0.8125rem;
        color: var(--rm-text-muted);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        line-height: 1.35;
      }

      .spinner {
        width: 15px;
        height: 15px;
        border: 2px solid var(--rm-border);
        border-top-color: var(--rm-accent);
        border-radius: 50%;
        animation: spin 0.75s linear infinite;
        flex-shrink: 0;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .region-map-overlays {
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        font-size: 0.8125rem;
      }

      .region-map-overlays-title {
        margin-bottom: 0.45rem;
        font-weight: 600;
        color: var(--rm-text);
      }

      .region-map-overlays-radios {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }

      .region-map-overlays-radios label {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
        border-radius: var(--rm-radius-sm);
        transition: background var(--rm-ease);
      }

      .region-map-overlays-radios label:hover {
        background: rgba(212, 160, 23, 0.06);
      }

      .region-map-places-check {
        margin-top: 0.65rem;
        padding-top: 0.65rem;
        border-top: 1px solid rgba(26, 25, 23, 0.06);
      }

      .region-map-places-check label {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
      }

      .region-map-hierarchy {
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(26, 25, 23, 0.06);
        flex-shrink: 0;
      }

      .region-map-hierarchy h4 {
        margin: 0 0 0.45rem;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--rm-text-muted);
      }

      .hierarchy-tree {
        font-size: 0.78rem;
        max-height: none;
        overflow: visible;
        padding: 0.35rem 0.25rem;
        border-radius: var(--rm-radius-sm);
        background: rgba(252, 251, 248, 0.65);
        border: 1px solid rgba(26, 25, 23, 0.06);
      }

      .hierarchy-node {
        padding: 0.28rem 0.35rem;
        margin: 0.05rem 0;
        cursor: pointer;
        display: block;
        color: var(--rm-text-muted);
        border-radius: 4px;
        transition:
          color var(--rm-ease),
          background var(--rm-ease);
      }

      .hierarchy-node:hover {
        color: var(--rm-accent);
        background: rgba(212, 160, 23, 0.08);
      }

      .hierarchy-node.indent-0 {
        padding-left: 0.35rem;
      }
      .hierarchy-node.indent-1 {
        padding-left: 0.65rem;
      }
      .hierarchy-node.indent-2 {
        padding-left: 1.1rem;
      }
      .hierarchy-node.indent-3 {
        padding-left: 1.55rem;
      }

      .region-map-header-bar {
        position: relative;
        flex-shrink: 0;
        padding: max(0.55rem, env(safe-area-inset-top, 0px))
          max(1rem, env(safe-area-inset-right, 0px)) 0.55rem
          max(1rem, env(safe-area-inset-left, 0px));
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.96) 0%,
          rgba(252, 251, 248, 0.9) 100%
        );
        border-bottom: 1px solid var(--rm-border);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.65rem 1rem;
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.78) inset,
          0 4px 24px rgba(26, 25, 23, 0.06);
        animation: rty-reveal var(--app-reveal-duration, 0.4s)
          var(--rm-ease) 0.06s both;
      }

      .region-map-header-main {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
      }

      .region-map-attrib {
        margin: 0;
        font-size: 0.65rem;
        color: var(--rm-text-muted);
        max-width: 28rem;
        line-height: 1.35;
      }

      .region-map-header-bar h1 {
        margin: 0;
        font-family: var(--rm-font-display);
        font-size: clamp(0.95rem, 2.5vw, 1.15rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.25;
        color: var(--rm-text);
      }

      .region-map-header-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        flex-shrink: 0;
      }

      /* Nav pills: a.rty-back-link (css/rry-tool-pages.css) */

      /* Same footprint as .config-map-btn / .stats-download-btn (mesh map shortcut) */
      .region-map-header-icon-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        flex-shrink: 0;
        touch-action: manipulation;
        padding: 0;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.95) 0%,
          rgba(252, 251, 248, 0.9) 100%
        );
        border: 1px solid var(--rm-border);
        border-radius: var(--rm-radius);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.7) inset,
          var(--rm-shadow);
        color: var(--rm-accent);
        text-decoration: none;
        transition:
          box-shadow var(--rm-ease),
          transform 0.15s ease,
          color 0.15s ease,
          border-color var(--rm-ease);
      }

      .region-map-header-icon-btn:hover {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.78) inset,
          var(--rm-shadow-lg);
        transform: translateY(-1px);
        color: var(--rm-accent-hover);
        border-color: rgba(212, 160, 23, 0.25);
      }

      .region-map-header-icon-btn svg {
        width: 1.15rem;
        height: 1.15rem;
      }

      /* Standalone page only: hide when ?embed=1 or loaded in an iframe (e.g. configurator). */
      html.region-map-embed .region-map-header-bar {
        display: none !important;
      }

      /* Narrow screens: map on top, controls as bottom sheet (readable on phones) */
      @media (max-width: 768px) {
        .region-map-layout {
          flex-direction: column-reverse;
        }

        .region-map-controls:not(.collapsed) {
          width: 100%;
          max-height: min(62dvh, 520px);
          border-right: none;
          border-top: 1px solid var(--rm-border);
        }

        .region-map-controls.collapsed {
          width: 100%;
          max-height: 0;
          min-height: 0;
          overflow: hidden;
          border: none;
          pointer-events: none;
        }

        .region-map-controls.collapsed .region-map-controls-inner {
          opacity: 0;
        }

        .region-map-main {
          flex: 1;
          min-height: min(55dvh, 420px);
        }

        #region-map-container {
          flex: 1;
          min-height: 0;
        }

        button.region-map-controls-toggle {
          left: auto;
          right: max(10px, env(safe-area-inset-right, 0px));
          top: 50%;
          transform: translateY(-50%);
          border-left: 1px solid var(--rm-border);
          border-radius: var(--rm-radius-sm);
          touch-action: manipulation;
          box-shadow:
            0 2px 14px rgba(26, 25, 23, 0.1),
            0 1px 0 rgba(255, 255, 255, 0.8) inset;
        }

        .region-map-controls.collapsed ~ button.region-map-controls-toggle {
          left: auto;
          right: max(10px, env(safe-area-inset-right, 0px));
        }

        .region-map-search-wrap input {
          font-size: max(16px, 0.9375rem);
        }

        .region-map-header-bar {
          flex-direction: column;
          align-items: stretch;
        }
        .region-map-header-main {
          text-align: center;
        }
        .region-map-header-links {
          justify-content: center;
          order: -1;
        }
      }

      @media (max-height: 460px) and (orientation: landscape) {
        .region-map-header-bar {
          padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
          padding-bottom: 0.35rem;
        }
        .region-map-header-bar h1 {
          font-size: clamp(0.85rem, 2.2vw, 1rem);
        }
      }

      /* Tooltips: match primary map card tone (see css/style.css Leaflet popups).
         Shrink-wrap width to label text (default block tooltips stretch to the map). */
      body.region-map-body .leaflet-tooltip.region-map-tooltip {
        box-sizing: border-box;
        display: inline-block;
        width: -moz-fit-content;
        width: fit-content;
        max-width: calc(100vw - 24px);
        min-width: 0;
        font-family: var(--rm-font-body);
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--rm-text);
        padding: 10px 16px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.45;
        text-align: center;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.98) 0%,
          rgba(252, 251, 248, 0.96) 100%
        );
        border: 1px solid var(--rm-border);
        border-radius: var(--rm-radius);
        box-shadow: var(--rm-shadow-lg);
      }

      /* Leaflet defaults + style.css use margin:0 on content — restore inset so the
         close control does not sit on top of the first row (same role as Leaflet’s
         default 13px 24px 13px 20px margins). */
      body.region-map-body .leaflet-popup.region-locode-popup {
        text-align: start;
      }

      body.region-map-body
        .leaflet-popup.region-locode-popup
        .leaflet-popup-content {
        /* Do not use min-width:0 — Leaflet’s width probe collapses and locks 1 char/line */
        min-width: 17.5rem !important;
        max-width: min(26rem, calc(100vw - 48px)) !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 10px 30px 12px 12px;
        white-space: normal;
      }

      body.region-map-body
        .leaflet-popup.region-locode-popup
        .leaflet-popup-content-wrapper {
        min-width: 17.5rem;
        max-width: min(26rem, calc(100vw - 48px));
        box-sizing: border-box;
      }

      body.region-map-body .node-popup.region-map-locode-popup--compact {
        /* No main-map “freshness” gray strip on the left */
        border-left: none;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      body.region-map-body
        .node-popup.region-map-locode-popup--compact
        .node-popup__body {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      body.region-map-body .region-map-locode-popup__grid {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        box-sizing: border-box;
      }

      body.region-map-body .region-map-locode-popup__pair {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        align-items: start;
        font-size: 0.8125rem;
        line-height: 1.4;
        width: 100%;
        box-sizing: border-box;
      }

      body.region-map-body .region-map-locode-popup__name {
        font-weight: 600;
        color: var(--rm-text);
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      body.region-map-body .region-map-locode-popup__code {
        justify-self: end;
        text-align: end;
        font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--rm-text-muted);
      }

      body.region-map-body .region-map-locode-popup__code code {
        font: inherit;
        color: var(--rm-text);
        background: rgba(26, 25, 23, 0.06);
        border: 1px solid var(--rm-border);
        border-radius: 6px;
        padding: 2px 6px;
        white-space: normal;
        word-break: break-word;
        margin-block: 0;
      }