:root {
      --ink: #121417; --ink-2: #5c6370; --surface: 255,255,255;
      --apricot: #ff6a00; --apricot-soft: #fff0e3; --accent-ink: #e35300; --pom: #e5262b; --go: #12a150;
      --line: rgba(18,20,23,.09); --hover: #f3f4f6; --field: #f1f3f5;
      --shadow: 0 1px 3px rgba(18,20,23,.12), 0 6px 20px rgba(18,20,23,.12);
      --radius: 14px; --r-panel: 16px; --panel-w: 360px;
    }
    :root[data-theme="dark"] {
      --ink: #eceff3; --ink-2: #9aa3af; --surface: 26,30,38;
      --apricot: #ff8a2a; --apricot-soft: #3a2a18; --accent-ink: #ff9a45; --line: rgba(255,255,255,.1);
      --hover: rgba(255,255,255,.07); --field: rgba(255,255,255,.08);
      --shadow: 0 8px 28px rgba(0,0,0,.5);
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
    html, body { margin: 0; height: 100%; font-family: "Hanken Grotesk", "Noto Sans Armenian", system-ui, sans-serif; color: var(--ink); }
    #map { position: absolute; inset: 0; }
    :lang(hy), .hy { font-family: "Noto Sans Armenian", "Hanken Grotesk", sans-serif; }

    .glass {
      background: rgba(var(--surface), .97);
      backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
      border: 1px solid var(--line);
    }

    /* ---- search (the hero) ---- */
    .topbar { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 5; width: min(420px, calc(100% - 28px)); }
    .search { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 16px;
      border-radius: 27px; box-shadow: var(--shadow); transition: box-shadow .2s; }
    .search:focus-within { box-shadow: 0 0 0 3px var(--apricot-soft), var(--shadow); }
    .search svg { flex: none; color: var(--ink-2); }
    #search { flex: 1; border: 0; background: none; outline: none; font: 500 16px "Hanken Grotesk", "Noto Sans Armenian", sans-serif; color: var(--ink); min-width: 0; }
    #search::placeholder { color: var(--ink-2); }
    .pill-btn { flex: none; width: 40px; height: 40px; border: 0; border-radius: 20px; background: var(--apricot);
      color: #fff; cursor: pointer; display: grid; place-items: center; }
    .pill-btn.ghost { background: transparent; color: var(--ink-2); }
    #routeBtn .rb-close { display: none; }
    #routeBtn.active .rb-dir { display: none; }
    #routeBtn.active .rb-close { display: block; }
    .results { list-style: none; margin: 8px 0 0; padding: 6px; border-radius: var(--radius); box-shadow: var(--shadow); max-height: 50vh; overflow: auto; }
    .results:empty { display: none; }
    .results[hidden] { display: none; }
    .results li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
    .results li:hover, .results li:focus { background: rgba(var(--surface), .9); }
    .results .r-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--apricot-soft); color: var(--apricot); display: grid; place-items: center; font-size: 16px; }
    .results .r-name { font-weight: 600; font-size: 15px; }
    .results .r-kind { color: var(--ink-2); font-size: 12.5px; text-transform: capitalize; }
    .results .r-kind .hy { text-transform: none; } /* original name after the kind: keep its case */
    .results .r-msg { display: block; padding: 12px; color: var(--ink-2); font-size: 13px; cursor: default; }
    .results .r-msg:hover { background: none; }
    /* ---- right control stack ---- */
    .ctrls { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 10px; }
    .ctrl { width: 46px; height: 46px; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line);
      background: rgba(var(--surface), .74); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
      color: var(--ink); cursor: pointer; display: grid; place-items: center; }
    .ctrl:active { transform: scale(.94); }
    .ctrl:not(.on):hover { color: var(--apricot); border-color: var(--apricot); }
    .ctrl.on { background: var(--apricot); color: #fff; border-color: var(--apricot); }
    .ctrl-group { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
    .ctrl-group .ctrl { border: 0; border-radius: 0; box-shadow: none; width: 46px; height: 44px; }
    .ctrl-group .ctrl + .ctrl { border-top: 1px solid var(--line); }

    /* ---- layers popover ---- */
    .popover { position: absolute; right: 80px; top: 50%; transform: translateY(-50%); z-index: 6;
      padding: 10px; border-radius: var(--r-panel); box-shadow: var(--shadow); display: grid; gap: 6px; width: 190px; }
    .popover[hidden] { display: none; }
    .popover h4 { margin: 8px 6px 3px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
    .popover h4:first-of-type { margin-top: 2px; }
    /* layers popover close (sticky so it stays reachable while the long list scrolls) */
    .pop-x { position: sticky; top: 0; justify-self: end; z-index: 3; width: 30px; height: 30px; margin: -2px -2px -4px 0;
      border: 0; border-radius: 10px; background: rgba(var(--surface), .9); color: var(--ink-2);
      font-size: 19px; line-height: 1; cursor: pointer; }
    .pop-x:hover { color: var(--apricot); }
    .chip { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 11px; background: transparent;
      color: var(--ink); font: 500 14px "Hanken Grotesk", sans-serif; cursor: pointer; text-align: left; }
    .chip:hover { background: rgba(var(--surface), .96); }
    .chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); flex: none; }
    .chip.on { background: var(--apricot-soft); color: var(--apricot); font-weight: 600; }
    .chip.on .dot { background: var(--apricot); }
    .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 2px 6px 4px; }
    .legend span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); }
    .legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }

    /* ---- bottom sheet ---- */
    .sheet { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 5; max-width: 440px; margin: 0 auto;
      border-radius: var(--r-panel); box-shadow: var(--shadow); padding: 6px 16px 16px; animation: slideUp .26s cubic-bezier(.2,.8,.2,1); }
    .sheet[hidden] { display: none; }
    .grip { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 12px; }
    .sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .seg { display: flex; background: rgba(var(--surface), .6); border: 1px solid var(--line); border-radius: 12px; padding: 3px; flex: 1; }
    .seg button { flex: 1; border: 0; background: none; padding: 8px 4px; border-radius: 9px; cursor: pointer; font: 600 13px "Hanken Grotesk", sans-serif; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: 6px; }
    .seg button.on { background: var(--apricot); color: #fff; }
    /* profile selector = icon tabs (car / walk / bike / transit) */
    #profileSeg button { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; font-weight: 700; }
    #profileSeg button svg { width: 20px; height: 20px; }
    #clearBtn { flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgba(var(--surface), .6); color: var(--ink-2); font-size: 19px; line-height: 1; cursor: pointer; }
    #clearBtn:hover { color: var(--apricot); }
    /* GPX export now a full-width button pinned to the bottom of the directions panel */
    #gpxBtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px;
      height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--surface), .6);
      color: var(--ink); font: 700 13px "Hanken Grotesk"; cursor: pointer; }
    #gpxBtn:hover { border-color: var(--apricot); color: var(--apricot); }
    #gpxBtn svg { width: 16px; height: 16px; }
    #gpxBtn[hidden] { display: none; }
    #info { font-size: 13.5px; color: var(--ink-2); font-weight: 500; padding: 0 2px; }
    #eta { font-weight: 700; font-size: 17px; color: var(--ink); }
    #dirForm { position: relative; margin-bottom: 10px; }
    .dir-row { display: flex; align-items: center; gap: 10px; }
    .dir-row + .dir-row { margin-top: 6px; }
    .dir-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff; }
    .dir-in { flex: 1; border: 1px solid var(--line); background: rgba(var(--surface), .6); color: var(--ink);
      border-radius: 10px; padding: 9px 12px; font: 500 14px "Hanken Grotesk", "Noto Sans Armenian", sans-serif; outline: none; }
    .dir-in:focus { border-color: var(--apricot); }
    #dirAC { position: absolute; left: 20px; right: 0; top: 100%; margin-top: 4px; z-index: 3; max-height: 40vh; }
    #dirAC:empty { display: none; }
    #alts { display: flex; gap: 6px; margin: 8px 0 0; overflow-x: auto; scrollbar-width: none; }
    #alts::-webkit-scrollbar { display: none; }
    #alts:empty { display: none; }
    .alt { flex: none; border: 1px solid var(--line); background: rgba(var(--surface), .6); color: var(--ink-2);
      border-radius: 10px; padding: 7px 11px; font: 600 12px "Hanken Grotesk"; cursor: pointer; white-space: nowrap; }
    .alt.on { background: var(--apricot); color: #fff; border-color: var(--apricot); }
    #elevation { margin-top: 10px; }
    .trail-ele { margin-top: 12px; }
    .trail-ele .norev { color: var(--ink-2); font-size: 12px; }
    #elevation[hidden] { display: none; }
    .ele-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
    .ele-svg { width: 100%; height: 44px; display: block; }
    .ele-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-2); margin-top: 2px; }
    #directions { list-style: none; margin: 10px 0 0; padding: 0; max-height: 30vh; overflow: auto; }
    #directions li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 14px; }
    #directions li:first-child { border-top: 0; }
    #directions .d { color: var(--ink-2); font-size: 12px; margin-left: auto; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
    /* maneuver icon + two-line step text (Yandex-style) */
    .mv { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
      background: rgba(var(--surface), .7); color: var(--ink); margin-top: 1px; }
    .mv svg { width: 18px; height: 18px; }
    .mv.mv-end { background: var(--apricot-soft); color: var(--pom); }
    .mv.mv-start { background: var(--apricot-soft); color: #1aa260; }
    .step-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .step-act { font-weight: 700; line-height: 1.2; color: var(--ink); }
    .step-sub { font-size: 12px; color: var(--ink-2); line-height: 1.25; }
    .sv-mini { flex: none; border: 0; background: none; padding: 2px; margin-top: -1px; color: var(--ink-2); cursor: pointer; border-radius: 7px; }
    .sv-mini:hover { color: var(--apricot); background: rgba(var(--surface), .7); }
    .sv-mini svg { width: 16px; height: 16px; display: block; }
    .limit { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff;
      border: 2.5px solid var(--pom); color: #111; font-weight: 700; font-size: 10px; }

    /* ---- street view ---- */
    #sv { display: none; position: absolute; left: 14px; bottom: 14px; z-index: 6; width: min(420px, 44vw);
      border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
    #sv img { width: 100%; display: block; }
    #svClose { position: absolute; top: 8px; right: 8px; border: 0; background: rgba(0,0,0,.55); color: #fff; width: 30px; height: 30px; border-radius: 15px; cursor: pointer; font-size: 17px; }
    #svMeta { color: #cfd3d8; font-size: 11px; padding: 6px 10px; background: #000; }
    #isoctl { position: absolute; top: max(78px, calc(env(safe-area-inset-top) + 64px)); left: 50%; transform: translateX(-50%); z-index: 6;
      border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: flex; gap: 8px; }
    #isoctl[hidden] { display: none; }
    #isoctl .seg { background: rgba(var(--surface), .6); }
    #isoctl .seg button { padding: 7px 12px; }

    /* maplibre popup themed */
    .maplibregl-popup-content { border-radius: 14px; box-shadow: var(--shadow); padding: 14px; font-family: inherit; background: rgba(var(--surface), .96); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadeIn .16s ease; transform-origin: bottom center; }
    .results:not(:empty) { animation: fadeIn .14s ease; }
    .maplibregl-popup-close-button { font-size: 18px; color: var(--ink-2); padding: 2px 8px; }
    .pop-name { font-weight: 700; font-size: 15px; }
    .pop-cat { color: var(--ink-2); font-size: 12.5px; text-transform: capitalize; margin-bottom: 6px; }
    .pop-rate { margin: 4px 0; color: var(--apricot); font-weight: 600; }
    .pop-hours { font-size: 13px; color: var(--ink-2); margin: 2px 0 6px; }
    .pop-row { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); padding: 3px 0; }
    .pop-row svg { flex: none; color: var(--apricot); }
    .pop-row a { color: var(--ink); text-decoration: none; }
    .pop-row a:hover { color: var(--apricot); }
    .pop-rev { border-top: 1px solid var(--line); padding: 6px 0; font-size: 12.5px; }
    .pop-form { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; display: grid; gap: 6px; }
    .pop-form select, .pop-form input { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; font: inherit; background: rgba(var(--surface),.6); color: var(--ink); }
    .pop-form button, .pop-dir { border: 0; border-radius: 9px; padding: 8px; background: var(--apricot); color: #fff; font: 600 13px "Hanken Grotesk"; cursor: pointer; }
    .pop-dir { width: 100%; margin-top: 8px; }
    .stop-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
    .stop-row .d { color: var(--ink-2); font-size: 11.5px; }
    .pop-report { display: block; text-align: center; margin-top: 8px; font-size: 12px; color: var(--ink-2); text-decoration: none; }
    .pop-report:hover { color: var(--pom); }

    .maplibregl-ctrl-geolocate { display: none !important; }
    #hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 7; max-width: 360px;
      border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
    #hint[hidden] { display: none; }
    #hint b { font-size: 15px; }
    #hint span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
    #hint button { align-self: flex-end; border: 0; border-radius: 10px; background: var(--apricot); color: #fff; font: 600 13px "Hanken Grotesk"; padding: 8px 16px; cursor: pointer; }

    @media (min-width: 641px) {
      .sheet { left: 14px; right: auto; top: 84px; bottom: 14px; width: min(420px, calc(100% - 28px)); max-width: min(420px, calc(100% - 28px)); margin: 0;
        overflow-y: auto; animation: slideLeftIn .26s cubic-bezier(.2,.8,.2,1); }
      .sheet .grip { display: none; }
      #directions { max-height: none; }
      /* directions panel: align its column to the search bar (same left + width) */
      #sheet { top: 84px; width: min(420px, calc(100% - 28px)); max-width: min(420px, calc(100% - 28px)); }
      #sheet.collapsed, #place.collapsed { bottom: auto; }
    }
    @keyframes slideLeftIn { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
    @media (max-width: 560px) {
      .ctrls { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); transform: none; }
      .sheet { max-width: none; }
      #sv { width: calc(100% - 28px); }
    }
    @media (max-width: 640px) {
      /* layers popover: anchor bottom-LEFT so it never sits over the bottom-right control stack */
      .popover { top: auto; bottom: 80px; left: 14px; right: auto; transform: none; width: min(230px, calc(100% - 28px)); }
      /* welcome hint: a top toast below the search bar, clear of the open panel / CTAs at the bottom */
      #hint { top: calc(max(14px, env(safe-area-inset-top)) + 64px); bottom: auto; left: 14px; right: 14px; transform: none; max-width: none; }
      /* sun/daylight shadow control is a desktop power tool; hide on phones so it never floats over a sheet CTA */
      #sunCtl { display: none !important; }
    }
    /* ---- new: scrollable layers popover (grew with Weather/Places) ---- */
    .popover { max-height: min(76vh, 560px); overflow-y: auto; scrollbar-width: thin; }
    .popover::-webkit-scrollbar { width: 6px; }
    .popover::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
    .chip .dot[style] { opacity: .9; }

    /* ---- new: air-quality badge (fixed corner) ---- */
    #aqiBadge { position: absolute; top: max(78px, calc(env(safe-area-inset-top) + 64px)); right: 14px; z-index: 5;
      border-radius: 13px; padding: 7px 12px; color: #fff; box-shadow: var(--shadow); display: grid; line-height: 1.15;
      font-family: "Hanken Grotesk", sans-serif; min-width: 92px; }
    #aqiBadge[hidden] { display: none; }
    #aqiBadge b { font-size: 14px; font-weight: 700; }
    #aqiBadge span { font-size: 11px; opacity: .92; }

    /* ---- new: rain-radar control ---- */
    #radarCtl { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px)); z-index: 7;
      border-radius: 16px; box-shadow: var(--shadow); padding: 8px 12px; display: flex; align-items: center; gap: 10px; width: min(340px, calc(100% - 28px)); }
    #radarCtl[hidden] { display: none; }
    #radarPlay { flex: none; width: 34px; height: 34px; border: 0; border-radius: 17px; background: var(--apricot); color: #fff; cursor: pointer; display: grid; place-items: center; }
    #radarSlider { flex: 1; accent-color: var(--apricot); }
    #radarTime { flex: none; font: 600 12px "Hanken Grotesk"; color: var(--ink); min-width: 42px; text-align: right; }

    /* ---- new: weather popup card ---- */
    .wx-head { display: flex; align-items: center; gap: 10px; }
    .wx-head svg { flex: none; color: var(--apricot); }
    .wx-temp { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
    .wx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: var(--ink); }
    .wx-grid > div { display: flex; align-items: center; gap: 6px; }
    .wx-arrow { display: inline-flex; transform-origin: center; }
    .wx-arrow svg { color: var(--apricot); }

    /* ---- wheelchair badge ---- */
    .wc-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
      background: var(--apricot-soft); color: var(--apricot); font-size: 11px; font-weight: 600; vertical-align: middle; }
    .wc-badge svg { width: 12px; height: 12px; }

    /* ---- new: left place panel + transit route browser (reuse .sheet glass) ---- */
    #place[hidden], #routes[hidden], #rubricator[hidden] { display: none; }

    #place { padding-top: 10px; }
    .panel-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border: 0; border-radius: 10px;
      background: rgba(var(--surface), .6); color: var(--ink-2); font-size: 19px; line-height: 1; cursor: pointer; }
    .panel-x:hover { color: var(--apricot); }
    /* collapse / expand triangle (hide the panel, keep the map usable) — sits in the right-edge gutter */
    .panel-tri { position: absolute; top: 10px; right: 6px; z-index: 6; width: 26px; height: 30px;
      border: 0; border-radius: 9px; background: rgba(var(--surface), .75);
      color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
    .panel-tri:hover { color: var(--apricot); }
    .panel-tri svg { width: 15px; height: 15px; transition: transform .2s; }
    /* id-scoped so the per-panel id rules (#sheet width, #alts/#gpxBtn display) don't outrank these */
    #sheet.collapsed, #place.collapsed, #routes.collapsed, #rubricator.collapsed { width: 44px; height: 44px; min-width: 0; max-width: none; right: auto; padding: 0;
      display: grid; place-items: center; overflow: visible; }
    #sheet.collapsed > *:not(.panel-tri), #place.collapsed > *:not(.panel-tri), #routes.collapsed > *:not(.panel-tri), #rubricator.collapsed > *:not(.panel-tri) { display: none; }
    #sheet.collapsed .panel-tri, #place.collapsed .panel-tri, #routes.collapsed .panel-tri { position: static; width: 44px; height: 44px; border-radius: 16px; background: none; right: auto; }
    #sheet.collapsed .panel-tri svg, #place.collapsed .panel-tri svg, #routes.collapsed .panel-tri svg, #rubricator.collapsed .panel-tri svg { transform: rotate(180deg); }
    /* place + routes panels keep their × at right:12, so put their triangle just left of it */
    #placeTri, #routesTri { right: 50px; }
    @media (max-width: 640px) { .panel-tri svg { transform: rotate(90deg); }
      #sheet.collapsed .panel-tri svg, #place.collapsed .panel-tri svg, #routes.collapsed .panel-tri svg, #rubricator.collapsed .panel-tri svg { transform: rotate(-90deg); } }
    #placeBody { padding: 2px 2px 0; }
    .rt-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
    .rt-head b { font-size: 16px; }
    .rt-note { font-size: 12px; color: var(--ink-2); margin: 0 2px 8px; line-height: 1.4; }
    #rtSearch { width: 100%; border: 1px solid var(--line); background: rgba(var(--surface), .6); color: var(--ink);
      border-radius: 10px; padding: 9px 12px; font: 500 14px "Hanken Grotesk", "Noto Sans Armenian", sans-serif; outline: none; }
    #rtSearch:focus { border-color: var(--apricot); }
    #rtClear { margin-top: 8px; border: 1px solid var(--line); background: rgba(var(--surface), .6); color: var(--pom);
      border-radius: 10px; padding: 8px; font: 700 12px "Hanken Grotesk"; cursor: pointer; text-align: center; }
    #rtClear[hidden] { display: none; }
    #rtList { margin-top: 8px; max-height: 44vh; overflow: auto; scrollbar-width: thin; }
    .rt-grp { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin: 12px 2px 4px; }
    .rt-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
    .rt-item:hover { background: rgba(var(--surface), .95); }
    .rt-badge { flex: none; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 7px; display: grid; place-items: center; color: #fff; font: 700 12px "Hanken Grotesk"; }
    .rt-nm { font-size: 13.5px; }
    .rt-stop { display: flex; gap: 10px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 13.5px; }
    .rt-stop:first-child { border-top: 0; }
    .rt-stop .n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--apricot-soft); color: var(--apricot); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
    @media (min-width: 641px) { #rtList { max-height: calc(100vh - 320px); } }

    /* ---- indoor floor switcher ---- */
    #floorSw { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); z-index: 5;
      padding: 7px 6px; border-radius: 14px; box-shadow: var(--shadow); width: 54px; text-align: center; }
    #floorSw[hidden] { display: none; }
    .fs-cap { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin-bottom: 5px; }
    #floorBtns { display: flex; flex-direction: column-reverse; gap: 4px; }
    .fs-b { border: 1px solid var(--line); background: rgba(var(--surface), .6); color: var(--ink);
      border-radius: 9px; padding: 7px 0; font: 700 13px "Hanken Grotesk"; cursor: pointer; }
    .fs-b.on { background: var(--apricot); color: #fff; border-color: var(--apricot); }
    @media (max-width: 640px) { #floorSw { right: 14px; top: auto; bottom: 150px; transform: none; } }

    /* ---- lane guidance diagram (in directions list) ---- */
    .lanes { display: flex; gap: 3px; margin: 7px 0 1px; flex-wrap: wrap; }
    .lane { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
      background: rgba(var(--surface), .55); border: 1px solid var(--line); color: var(--ink-2); }
    .lane.on { background: var(--apricot-soft); border-color: var(--apricot); color: var(--apricot); }
    .lane svg { width: 18px; height: 18px; }
    #directions li { flex-wrap: wrap; }
    .lane-wrap { flex-basis: 100%; }

    /* ---- modeled busyness chart ---- */
    .busy { margin: 10px 0 2px; }
    .busy-h { font-size: 12px; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
    .busy-bars { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
    .busy-bars i { flex: 1; background: var(--apricot-soft); border-radius: 2px 2px 0 0; min-height: 2px; display: block; }
    .busy-bars i.now { background: var(--apricot); }
    .busy-ax { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-2); margin-top: 3px; }
    .busy-note { font-size: 10.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.35; }

    /* ---- weather forecast timeline ---- */
    .wxtl { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 8px; }
    .wxtl-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
    .wxtl-row b { color: var(--ink); font-weight: 700; }
    .wxtl-spark { width: 100%; height: 26px; display: block; }
    .wxtl input[type=range] { width: 100%; accent-color: var(--apricot); margin: 2px 0 0; }

    /* ---- place / building card (Yandex-style): hero, actions, building sections ---- */
    .pc-hero { position: relative; height: 122px; border-radius: 14px; overflow: hidden; margin: 0 0 11px; }
    .pc-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: fadeIn .2s ease; }
    .pc-hero .ph-ico { position: absolute; inset: 0; display: grid; place-items: center; }
    .pc-hero .ph-ico svg { filter: drop-shadow(0 2px 5px rgba(0,0,0,.28)); }
    .pop-rate .norev { color: var(--ink-2); font-weight: 500; }
    .pop-rate b { color: var(--apricot); }
    .pc-actions { display: flex; gap: 8px; margin-top: 12px; }
    .pc-actions button { border: 0; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center;
      justify-content: center; gap: 7px; font: 700 13px "Hanken Grotesk"; height: 42px; }
    .pc-actions .b-dir { flex: 1 1 auto; min-width: 0; background: var(--apricot); color: #fff; }
    .pc-actions .b-save, .pc-actions .b-share { flex: none; width: 46px; background: rgba(var(--surface), .6);
      border: 1px solid var(--line); color: var(--ink); }
    .pc-actions .b-save.on { background: var(--apricot-soft); border-color: var(--apricot); color: var(--apricot); }
    .pc-actions .b-share.ok { background: var(--apricot-soft); border-color: var(--apricot); color: var(--apricot); }
    .pc-actions button:hover { filter: brightness(.97); }
    .pc-actions svg { width: 17px; height: 17px; flex: none; }

    /* ---- building info card (2gis-style, grouped) ---- */
    .bc-sec { border-top: 1px solid var(--line); margin-top: 11px; padding-top: 9px; }
    .bc-sec h5 { margin: 0 0 7px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
    .bc-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
    .bc-kv dt { color: var(--ink-2); }
    .bc-kv dd { margin: 0; color: var(--ink); text-align: right; word-break: break-word; }
    .bc-list { display: flex; flex-direction: column; }
    .bc-poi { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--line); }
    .bc-poi:first-child { border-top: 0; }
    .bc-poi .pk { color: var(--ink-2); font-size: 12px; }
    .bc-poi .lvl { flex: none; font-size: 11px; font-weight: 700; background: var(--apricot-soft); color: var(--apricot); border-radius: 6px; padding: 1px 7px; }
    .bc-ent { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
    .bc-ent svg { color: var(--apricot); flex: none; }
    .bc-extract { font-size: 13px; color: var(--ink); line-height: 1.5; }
    .bc-extract a { color: var(--apricot); text-decoration: none; font-weight: 600; white-space: nowrap; }

    /* ---- hover mini-card (desktop, pointer-fine only) ---- */
    #minicard { position: absolute; z-index: 7; pointer-events: none; max-width: 230px; padding: 9px 12px;
      border-radius: 12px; box-shadow: var(--shadow); opacity: 0; transform: translateY(5px); transition: opacity .12s ease, transform .12s ease; }
    #minicard.show { opacity: 1; transform: none; }
    #minicard[hidden] { display: none; }
    .mc-name { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.2; display: flex; align-items: center; gap: 6px; }
    .mc-name .cat-ico { flex: none; }
    .mc-cat { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; text-transform: capitalize; }
    .mc-rate { font-size: 12px; color: var(--apricot); font-weight: 600; margin-top: 3px; }
    .mc-hint { font-size: 10.5px; color: var(--ink-2); margin-top: 4px; opacity: .85; }

    /* =====================================================================================
       ONE LEFT PANEL (2026-10-16). #lpanel is the only panel. It holds the search bar and one
       view: home (#rubricator), results, place, route (#sheet), routes, layers. panel.js keeps
       exactly one view visible. Desktop: a white card on the left. Phone: a bottom sheet.
       ===================================================================================== */
    #lpanel { position: absolute; z-index: 6; left: 12px; top: max(12px, env(safe-area-inset-top)); width: var(--panel-w);
      max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden;
      background: rgb(var(--surface)); border-radius: var(--r-panel); box-shadow: var(--shadow); }
    #lpanel .lp-grip { display: none; }
    #lpanel .topbar { position: static; width: auto; flex: none; padding: 10px 10px 8px; }
    #lpanel .search { height: 46px; padding: 0 5px 0 14px; gap: 10px; border-radius: 12px; background: var(--field);
      border: 1px solid transparent; box-shadow: none; transition: background .15s, border-color .15s; }
    #lpanel .search:focus-within { background: rgb(var(--surface)); border-color: var(--apricot); box-shadow: 0 0 0 3px var(--apricot-soft); }
    #search { font: 500 15.5px "Hanken Grotesk", "Noto Sans Armenian", sans-serif; }
    .pill-btn { width: 36px; height: 36px; border-radius: 10px; }
    .pill-btn:hover { filter: brightness(1.06); }
    .pill-btn.ghost { color: var(--ink-2); }
    .pill-btn.ghost:hover { background: rgba(18,20,23,.06); color: var(--ink); filter: none; }
    #searchClear[hidden] { display: none; }

    /* every view: flat content of the one card (no own card, border or shadow) */
    #lpanel .sheet, #lpanel #results { position: relative; inset: auto; width: auto; max-width: none; margin: 0;
      flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
      background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
      backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 14px 14px; animation: viewIn .18s ease; }
    #lpanel .sheet[hidden], #lpanel #results[hidden] { display: none; }
    #lpanel .sheet > .grip { display: none; }
    @keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

    /* home view: category list, 40px rows */
    #rubricator { padding: 8px 6px 8px !important; }
    .rub-head { margin: 4px 10px 4px; }
    .rub-head b { font-size: 12px; letter-spacing: .02em; color: var(--ink-2); font-weight: 600; }
    #rubList { display: flex; flex-direction: column; }
    .rub-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
      background: none; color: var(--ink); font: 500 14.5px "Hanken Grotesk", "Noto Sans Armenian", sans-serif;
      cursor: pointer; text-align: left; transition: background .12s; }
    .rub-item .cat-badge { flex: none; width: 24px; height: 24px; }
    .rub-item .rub-label { flex: 1; line-height: 1.2; }
    .rub-item .rub-check { flex: none; color: var(--apricot); opacity: 0; }
    .rub-item:hover { background: var(--hover); }
    .rub-item:focus-visible { outline: 2px solid var(--apricot); outline-offset: -2px; }
    .rub-item.on { font-weight: 700; }
    .rub-item.on .rub-check { opacity: 1; }

    /* results view */
    #lpanel #results { list-style: none; padding: 6px 6px 8px; }
    .results li { gap: 12px; padding: 8px 10px; border-radius: 10px; }
    .results li:hover, .results li:focus { background: var(--hover); outline: none; }
    .results .r-ico { width: 32px; height: 32px; border-radius: 50%; background: none; }
    .results .r-ico .cat-badge { width: 32px; height: 32px; display: block; }
    .results .r-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .results .r-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .results .r-kind { font-size: 12.5px; }
    #dirAC .r-ico { background: var(--hover); color: var(--ink-2); border-radius: 50%; }

    /* view header buttons: back (left), collapse + close (right) */
    .panel-x, .panel-back { position: absolute; top: 8px; z-index: 3; width: 32px; height: 32px; border: 0; border-radius: 50%;
      background: var(--hover); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
    .panel-x { right: 10px; }
    .panel-back { left: 10px; display: none; }
    .panel-back svg { width: 18px; height: 18px; }
    .panel-x:hover, .panel-back:hover { color: var(--ink); background: #e8eaed; }
    #lpanel[data-prev="results"] #placeBack { display: grid; }
    .panel-tri { top: 8px; width: 32px; height: 32px; border-radius: 50%; background: var(--hover); }
    #placeTri, #routesTri { right: 48px; }
    #dirTri { right: 10px; }
    #lpanel #place { padding-top: 48px; }
    #dirForm { margin-right: 40px; }
    #lpanel #routes { padding-top: 12px; }
    .rt-head { min-height: 32px; margin: 0 84px 8px 0; }
    /* a collapsed view folds to one small row with the expand chevron */
    #lpanel .sheet.collapsed { width: auto; height: 44px; padding: 0; display: block; overflow: hidden; }
    #lpanel .sheet.collapsed .panel-tri { position: absolute; top: 6px; left: 50%; right: auto; transform: translateX(-50%); width: 32px; height: 32px; }
    #lpanel .sheet.collapsed .panel-tri svg { transform: rotate(-90deg); }

    /* layers view (was a floating popover) */
    #layers { display: flex; flex-direction: column; gap: 1px; }
    #layers[hidden] { display: none !important; }
    .lv-head { display: flex; align-items: center; min-height: 32px; margin: -4px 0 4px; }
    .lv-head b { font-size: 16px; }
    .lv-head .panel-x { position: static; margin-left: auto; }
    #layers h4 { margin: 12px 4px 4px; font-size: 12px; letter-spacing: .02em; color: var(--ink-2); font-weight: 600; text-transform: none; }
    #layers .chip { min-height: 38px; padding: 8px 10px; border-radius: 10px; font-size: 14px; }
    #layers .chip:hover { background: var(--hover); }
    #layers .chip.on { background: var(--apricot-soft); color: var(--accent-ink); }
    .chip .dot { width: 10px; height: 10px; }

    /* accents */
    .seg button.on, .alt.on, .fs-b.on { background: var(--apricot); }
    .pc-actions .b-dir { background: var(--apricot); box-shadow: 0 2px 8px rgba(255,106,0,.28); }
    .pc-actions .b-dir:hover { filter: brightness(1.05); }
    .pc-actions .b-save, .pc-actions .b-share { background: rgb(var(--surface)); }

    /* ---- right control stack: white round buttons ---- */
    .ctrls { right: 12px; gap: 8px; }
    .ctrl { width: 40px; height: 40px; border-radius: 50%; background: rgb(var(--surface)); border: 0;
      box-shadow: 0 1px 3px rgba(18,20,23,.16), 0 3px 10px rgba(18,20,23,.10); backdrop-filter: none; -webkit-backdrop-filter: none; color: #3a3f47; }
    .ctrl svg { width: 19px; height: 19px; }
    .ctrl:not(.on):hover { color: var(--apricot); border-color: transparent; background: #fafafa; }
    .ctrl-group { border-radius: 20px; border: 0; box-shadow: 0 1px 3px rgba(18,20,23,.16), 0 3px 10px rgba(18,20,23,.10); background: rgb(var(--surface)); }
    .ctrl-group .ctrl { width: 40px; height: 40px; border-radius: 0; box-shadow: none; }
    /* single 2D/3D toggle: shows the mode you get on click. "on" = map is tilted, so it shows "2D". */
    #d3Btn { font: 800 13px/1 "Hanken Grotesk", sans-serif; letter-spacing: .01em; color: var(--ink); }
    #d3Btn.on { background: rgb(var(--surface)); color: var(--ink); }
    #d3Btn .d3-2d, #d3Btn.on .d3-3d { display: none; }
    #d3Btn.on .d3-2d { display: inline; }

    /* overlays never sit on the panel: welcome toast centred in the free map area, sun control and
       street view to the right of the panel (sun control has inline styles, so !important) */
    #hint { left: calc(12px + var(--panel-w) + (100% - 12px - var(--panel-w)) / 2); bottom: 20px; }
    #hint button { background: var(--apricot); }
    #sunCtl { left: calc(24px + var(--panel-w)) !important; bottom: 14px !important; }
    #sv { left: calc(24px + var(--panel-w)); }
    #floorSw { right: 64px; }
    /* reachability bar: centred in the free map area, not on the page (on an iPad it covered the
       layers panel and its close button); the two button rows stack when the area is narrow */
    @media (min-width: 641px) {
      #isoctl { left: calc(12px + var(--panel-w) + (100% - 12px - var(--panel-w) - 64px) / 2); top: max(12px, env(safe-area-inset-top));
        flex-wrap: wrap; justify-content: center; max-width: calc(100% - 12px - var(--panel-w) - 88px); box-sizing: border-box; }
    }

    /* ---- phone: the panel is a bottom sheet with the same single-view logic ---- */
    @media (max-width: 640px) {
      #lpanel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62vh;
        border-radius: 18px 18px 0 0; box-shadow: 0 -2px 16px rgba(18,20,23,.16); padding-bottom: env(safe-area-inset-bottom); }
      #lpanel .lp-grip { display: block; flex: none; margin: 7px auto 0; width: 38px; height: 5px; cursor: pointer; background: #d5d8dd; }
      #lpanel .topbar { padding: 8px 12px 8px; }
      #lpanel.folded .sheet, #lpanel.folded #results { display: none; }
      #lpanel .sheet, #lpanel #results { animation: none; }
      /* home view: one scrolling row of category chips */
      #rubricator { padding: 0 0 10px !important; border-top: 0 !important; }
      .rub-head { display: none; }
      #rubList { flex-direction: row; gap: 8px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
      #rubList::-webkit-scrollbar { display: none; }
      .rub-item { flex: none; height: 36px; padding: 0 12px 0 6px; gap: 8px; border-radius: 18px; border: 1px solid var(--line); font-size: 14px; }
      .rub-item .cat-badge { width: 24px; height: 24px; }
      .rub-item .rub-check { display: none; }
      .rub-item.on { background: var(--apricot-soft); border-color: var(--apricot); color: var(--accent-ink); }
      .ctrls { top: max(12px, env(safe-area-inset-top)); bottom: auto; transform: none; right: 10px; }
      .ctrls .ctrl-group { display: none; }
      #hint { top: max(12px, env(safe-area-inset-top)); bottom: auto; left: 12px; right: 62px; transform: none; max-width: none; }
      #sv { left: 12px; width: calc(100% - 24px); }
      #floorSw { right: 10px; top: 300px; bottom: auto; }
    }
    /* collapse chevron points up (fold), so it never reads as a second "back" arrow */
    #lpanel .panel-tri svg { transform: rotate(90deg); }
    #lpanel .sheet.collapsed .panel-tri svg { transform: rotate(-90deg); }
    #place .pop-name { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
    #place .pop-cat { font-size: 13.5px; }
    /* layer rows: label left, switch right */
    #layers .chip { min-height: 36px; padding: 6px 8px 6px 10px; }
    #layers .chip::after { content: ""; flex: none; margin-left: auto; width: 30px; height: 18px; border-radius: 9px;
      background: #d5d8dd radial-gradient(circle at 9px 9px, #fff 6.5px, transparent 7px); transition: background-color .15s, background-position .15s; }
    #layers .chip.on { background: none; color: var(--ink); font-weight: 500; }
    #layers .chip.on:hover { background: var(--hover); }
    #layers .chip.on::after { background: var(--apricot) radial-gradient(circle at 21px 9px, #fff 6.5px, transparent 7px); }
    #layers .chip.on .dot { background: var(--apricot); }

    /* view group: compass on top, 2D/3D below (one white pill, like Yandex) */
    .view-group .ctrl { width: 40px; height: 40px; }
    .view-group .ctrl + .ctrl { border-top: 1px solid var(--line); }
    #compassBtn { cursor: grab; touch-action: none; perspective: 60px; }
    #compassBtn.dragging { cursor: grabbing; }
    #compassBtn .needle { width: 24px; height: 24px; transition: transform .08s linear; }
    #compassBtn:not(.on):hover { color: inherit; }
    @media (max-width: 640px) { .ctrls .view-group { display: flex; } }

    /* ---- satellite imagery date (sat-date.js): bottom-right, a control above the attribution.
       Phone: the bottom sheet covers the bottom, so the label sits top-left, clear of the right controls. */
    .maplibregl-ctrl-bottom-right #satDate { margin: 0 10px 6px 0; }
    #satDate { height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 12px;
      font: 500 11.5px "Hanken Grotesk", "Noto Sans Armenian", system-ui, sans-serif;
      color: var(--ink-2); white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(18,20,23,.15); }
    #satDate[hidden] { display: none; }
    /* ---- satellite mode hint (sat-flat.js): shown once, bottom centre; phone: top-left under the date */
    #satHint { position: absolute; z-index: 5; left: 50%; bottom: 76px; transform: translateX(-50%);
      width: max-content; max-width: min(440px, calc(100% - 32px)); display: flex; align-items: center; gap: 8px;
      padding: 7px 6px 7px 12px; border-radius: 12px; box-shadow: 0 1px 3px rgba(18,20,23,.15);
      font: 500 12.5px/1.35 "Hanken Grotesk", "Noto Sans Armenian", system-ui, sans-serif; color: var(--ink); }
    #satHint .sat-hint-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none;
      color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; }
    #satHint .sat-hint-x:hover { background: var(--hover); }
    @media (max-width: 640px) {
      #satHint { position: fixed; left: 12px; right: 72px; bottom: auto; transform: none; width: auto; max-width: none;
        top: calc(max(12px, env(safe-area-inset-top)) + 32px); }
    }
    @media (max-width: 640px) {
      .maplibregl-ctrl-bottom-right #satDate { position: fixed; z-index: 4; margin: 0; left: 12px; top: max(12px, env(safe-area-inset-top)); max-width: calc(100% - 84px); }
    }