/* Магистрали (balkanhighways.com) - liquid glass layer (2026-10-31)
   Surface treatment only: no layout, size, radius, position or copy changes.
   Linked LAST from index.html (after atlas-app.css), so removing that one <link> rolls the whole layer back.
   - Every glass surface has a near-opaque fallback tint (>= .94) when backdrop-filter is unavailable;
     inside @supports the tint drops to .80-.90 (higher over light / satellite basemaps).
   - All added motion is inside prefers-reduced-motion: no-preference.
   - Basemap / satellite tile filters (.basemap-invert, .leaflet-tile-pane, body[data-basemap]) are untouched.
   - The family bar (.cs-brandbar) is not touched here; it is styled only by the bar7 block inside legal.js.
   - atlas-app.css ships its own glass layer with many !important rules, hence the `html` prefix and
     !important on surface properties below. Hover/active states of chips are left to atlas-app.css. */

:root {
  /* Fallback tints are dark enough that text keeps AA without any blur. */
  --gl-tint: linear-gradient(180deg, rgba(10, 22, 38, .94), rgba(6, 14, 26, .96));         /* small controls over the map */
  --gl-tint-strong: linear-gradient(180deg, rgba(10, 22, 38, .96), rgba(6, 13, 24, .98));  /* text-heavy cards / sheets / dialogs */
  --gl-tint-bar: linear-gradient(180deg, rgba(14, 32, 52, .94), rgba(6, 16, 28, .96));     /* top bar */
  --gl-tint-panel: linear-gradient(180deg, rgba(12, 24, 40, .94), rgba(6, 13, 24, .96));   /* sidebar panels */
  --gl-tint-side: linear-gradient(180deg, rgba(12, 26, 44, .97), rgba(6, 14, 26, .98));    /* sidebar shell */
  --gl-sheen: linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.025) 100%);
  --gl-border: rgba(255, 255, 255, .13);
  --gl-border-hi: rgba(255, 255, 255, .26);
  --gl-gold-rim: 0 0 0 1px rgba(255, 179, 107, .09);
  --gl-blur: blur(22px) saturate(165%);
  --gl-blur-sm: blur(16px) saturate(150%);
  --gl-shadow:
    0 30px 70px -34px rgba(0, 0, 0, .85),
    0 10px 24px -14px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .03);
  --gl-shadow-sm:
    0 12px 28px -16px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
  --gl-ease: cubic-bezier(.22, 1, .36, 1);
  /* Every inset specular edge in atlas-app.css reads this token (was .09). */
  --glass-rim: rgba(255, 255, 255, .17);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --gl-tint: linear-gradient(180deg, rgba(10, 22, 38, .80), rgba(6, 14, 26, .84));
    --gl-tint-strong: linear-gradient(180deg, rgba(10, 22, 38, .90), rgba(6, 13, 24, .93));
    --gl-tint-bar: linear-gradient(180deg, rgba(14, 32, 52, .80), rgba(6, 16, 28, .88));
    --gl-tint-panel: linear-gradient(180deg, rgba(12, 24, 40, .78), rgba(6, 13, 24, .84));
    --gl-tint-side: linear-gradient(180deg, rgba(12, 26, 44, .94), rgba(6, 14, 26, .96));
  }
  /* Light basemaps and bright satellite leak much more brightness through the blur:
     raise the tint so panel text keeps its contrast. app.js sets body[data-basemap]. */
  html:has(body[data-basemap="satellite"]),
  html:has(body[data-basemap="terrain"]),
  html:has(body[data-basemap="voyager"]),
  html:has(body[data-basemap="light"]),
  html:has(body[data-basemap="street"]),
  html:has(body[data-basemap="osmhot"]),
  html:has(body[data-basemap="gray"]) {
    --gl-tint: linear-gradient(180deg, rgba(10, 22, 38, .90), rgba(6, 14, 26, .92));
    --gl-tint-strong: linear-gradient(180deg, rgba(10, 22, 38, .94), rgba(6, 13, 24, .96));
  }
}

/* 1. Large chrome: top bar, sidebar, panels, quick bar, floating cards ------------------
   Radius / size / position stay as atlas-app.css has them; border WIDTH is untouched
   (only colour), so cards that have no border keep none. */
html .topbar {
  background: var(--gl-sheen), var(--gl-tint-bar) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow), var(--gl-gold-rim) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}
html .sidebar {
  background: var(--gl-sheen), var(--gl-tint-side) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow), var(--gl-gold-rim) !important;
}
/* Desktop sidebar sits on the flat page background (no blur needed, no extra GPU layer);
   on phone / tablet it is a sheet over the map, so it gets the full glass + strong tint. */
html body.device-phone .sidebar,
html body.device-tablet .sidebar {
  background: var(--gl-sheen), var(--gl-tint-strong) !important;
  box-shadow: 0 -18px 54px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .03), var(--gl-gold-rim) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}
html .summary-card,
html .panel,
html .tablet-info-tabs,
html .profile-banner {
  background: var(--gl-sheen), var(--gl-tint-panel) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow-sm), var(--gl-gold-rim) !important;
}
html .map-stage-quickbar,
html .desktop-map-dock {
  background: var(--gl-sheen), var(--gl-tint-panel) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow-sm) !important;
}
html .floating-card,
html .map-tools {
  background: var(--gl-sheen), var(--gl-tint-strong) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow), var(--gl-gold-rim) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}

/* 2. Top bar controls -------------------------------------------------------------------- */
html .topbar-search-input {
  background: rgba(4, 12, 22, .55);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}
html .dynamic-island {
  background: var(--gl-sheen), var(--gl-tint-strong) !important;
  border-color: var(--gl-border-hi) !important;
  box-shadow: var(--gl-shadow-sm) !important;
  -webkit-backdrop-filter: var(--gl-blur-sm) !important;
  backdrop-filter: var(--gl-blur-sm) !important;
}
html .phone-lang-tray {
  background: var(--gl-sheen), rgba(7, 17, 30, .55);
  border-color: var(--gl-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* 3. Phone bottom dock, nav strip, basemap picker --------------------------------------- */
html .phone-action-dock {
  background: var(--gl-sheen), var(--gl-tint-strong) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow-sm), var(--gl-gold-rim) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}
html .phone-nav-strip {
  background: var(--gl-sheen), var(--gl-tint-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
html .phone-basemap-option {
  background: var(--gl-sheen), var(--gl-tint-strong) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow-sm) !important;
}
html .phone-basemap-option.active { box-shadow: var(--gl-shadow-sm), 0 0 0 1px rgba(255, 179, 107, .35) !important; }

/* 4. Over the map: playback dock, round actions, Leaflet controls ----------------------- */
html .dock-player {
  background: var(--gl-sheen), var(--gl-tint) !important;
  border-color: var(--gl-border) !important;
  box-shadow: var(--gl-shadow-sm) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}
html .dock-btn:not(.dock-btn--play) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
/* Container carries the glass; the <a> buttons go transparent so the blur shows through. */
html .leaflet-control-zoom.leaflet-bar {
  background: var(--gl-sheen), var(--gl-tint) !important;
  border: 0 !important;
  box-shadow: var(--gl-shadow-sm), 0 0 0 1px var(--gl-border) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}
html .leaflet-control-zoom.leaflet-bar a {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  color: #eef4fb !important;
}
html .leaflet-control-zoom.leaflet-bar a:last-child { border-bottom: 0 !important; }
html .leaflet-control-zoom.leaflet-bar a:hover { background: rgba(255, 255, 255, .1) !important; }
/* Attribution was white .8 with brown text (about 1.5:1). Dark glass + light text fixes it on every base. */
html .leaflet-control-attribution {
  background: linear-gradient(180deg, rgba(8, 18, 32, .9), rgba(5, 12, 22, .92)) !important;
  color: rgba(232, 244, 253, .85) !important;
  border-top-left-radius: 10px;
  border-left: 1px solid var(--gl-border);
  border-top: 1px solid var(--gl-border);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
html .leaflet-control-attribution a { color: #8fd3fb !important; }
/* Shared round actions (share / print / fullscreen). The donate heart keeps its own gradient. */
html .civic-action:not(.civic-action--donate) {
  background: var(--gl-sheen), var(--gl-tint) !important;
  border-color: var(--gl-border-hi) !important;
  box-shadow: var(--gl-shadow-sm) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}
html .civic-action__tip {
  background: var(--gl-sheen), rgba(8, 18, 32, .94);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow-sm);
}

/* 5. Dialogs and popups ------------------------------------------------------------------ */
html .beta-popup-card,
html .cmd-palette,
html .shortcuts-card,
html .donation-popup-card {
  background: var(--gl-sheen), var(--gl-tint-strong) !important;
  border-color: var(--gl-border-hi) !important;
  box-shadow: var(--gl-shadow), var(--gl-gold-rim) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  backdrop-filter: var(--gl-blur) !important;
}
/* The beta card keeps its amber hairline accent. */
html .beta-popup-card { border-color: rgba(251, 191, 36, .34) !important; }
html .beta-popup-dismiss,
html .beta-popup-icon,
html .beta-popup-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
html .cmd-palette-item.active,
html .cmd-palette-item:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

/* 6. Small chips / toggles: unify the specular edge (hover/active colours stay with atlas-app.css) */
html .toggle,
html .select,
html .status-pill,
html .route-pill,
html .tab,
html .compass-btn,
html .selection-collapse,
html .phone-action,
html .phone-nav-btn {
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

/* 7. Phone: bigger invisible hit areas for small round buttons (no visual change). */
@media (max-width: 760px) {
  html .selection-collapse,
  html .beta-popup-close,
  html .dock-btn:not(.dock-btn--play) { position: relative; }
  html .selection-collapse::before,
  html .beta-popup-close::before,
  html .dock-btn:not(.dock-btn--play)::before { content: ""; position: absolute; inset: -4px; }
}

/* 8. Motion (all opt-in). atlas-app.css already animates floating cards and popups, so only
      the sidebar panels / summary card (tab and sheet switches) and control hovers are added. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gl-in {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
  }
  html .sidebar .summary-card,
  html .sidebar .panel { animation: gl-in .26s var(--gl-ease) both; }
  html .sidebar .panel:nth-of-type(2) { animation-delay: 40ms; }
  html .sidebar .panel:nth-of-type(3) { animation-delay: 80ms; }
  html .sidebar .panel:nth-of-type(4) { animation-delay: 120ms; }

  html .civic-action,
  html .dock-btn,
  html .phone-action,
  html .leaflet-control-zoom.leaflet-bar a {
    transition: background-color .18s var(--gl-ease), border-color .18s var(--gl-ease),
                box-shadow .18s var(--gl-ease), transform .25s var(--gl-ease);
  }
  html .civic-action:not(.civic-action--donate):hover,
  html .dock-btn:not(.dock-btn--play):hover { transform: translateY(-1px); border-color: rgba(255, 179, 107, .5) !important; }
}

/* 9. Honour reduced transparency: solid surfaces, no blur. */
@media (prefers-reduced-transparency: reduce) {
  html .topbar,
  html .sidebar,
  html .floating-card,
  html .map-tools,
  html .dock-player,
  html .dynamic-island,
  html .phone-action-dock,
  html .civic-action:not(.civic-action--donate),
  html .leaflet-control-zoom.leaflet-bar,
  html .beta-popup-card,
  html .cmd-palette,
  html .shortcuts-card,
  html .donation-popup-card {
    background: rgba(8, 18, 30, .97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ===========================================================================================
   WAVE 2 (2026-11-01): glass popups, spring press feedback, tile-loading shimmer,
   cross-page view transitions, phone blur budget. All motion is in no-preference blocks.
   =========================================================================================== */
:root { --gl-spring: cubic-bezier(.2, .8, .2, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --gl-spring: linear(0, .0036 .9%, .0147 1.8%, .0795 4%, .2386 7.4%, .4626 11.2%, .6784 15.1%, .8532 19.2%, .9561 23.2%, 1.0072 27.4%, 1.0237 31.7%, 1.0166 36.4%, 1.0034 42%, .9967 49%, 1.0003 70%, 1); }
}

/* 10. Leaflet popups (segment / lot detail): same glass recipe as the other floating cards. */
html .atlas-popup-card .leaflet-popup-content-wrapper {
  background: var(--gl-sheen), var(--gl-tint-strong);
  border-color: var(--gl-border-hi);
  box-shadow: var(--gl-shadow), var(--gl-gold-rim);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  transform-origin: 50% 100%;
}
/* The tip is a rotated square: a blur there leaves a seam, so it is a flat colour matched to the card's lower edge. */
html .atlas-popup-card .leaflet-popup-tip {
  background: rgb(7, 15, 26);
  border: 1px solid var(--gl-border-hi);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .atlas-popup-card .leaflet-popup-close-button:focus-visible {
  outline: 2px solid #ffb36b;
  outline-offset: 2px;
  opacity: 1;
}

/* 11. Phone blur budget: nothing bigger than ~30% of the viewport blurs over the map canvas.
   The bottom sheet (46vh), selection card and popup get a near-opaque tint instead. */
html body.device-phone .sidebar,
html body.device-phone .floating-card,
html body.device-phone .atlas-popup-card .leaflet-popup-content-wrapper {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--gl-sheen), linear-gradient(180deg, rgba(10, 22, 38, .975), rgba(6, 13, 24, .985)) !important;
}

/* 12. Tile-loading shimmer. The strip sits UNDER the Leaflet panes (z-index 0), so it only shows
   where tiles have not painted yet; app.js adds .map-ready on the first tile `load` (or after 8s). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gl-shimmer { to { transform: translate3d(100%, 0, 0); } }
  #map:not(.map-ready)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 22%, rgba(120, 180, 255, .09) 44%, rgba(255, 179, 107, .09) 56%, transparent 78%);
    transform: translate3d(-100%, 0, 0);
    animation: gl-shimmer 1.7s var(--gl-ease) infinite;
  }

  /* 13. Popup entrance with a spring settle (transform + opacity only). */
  @keyframes gl-pop {
    from { opacity: 0; transform: translateY(12px) scale(.93); }
    to   { opacity: 1; transform: none; }
  }
  html .atlas-popup-card .leaflet-popup-content-wrapper { animation: gl-pop .46s var(--gl-spring) both; }

  /* 14. Spring hover + press. Only the controls wave 1 already re-timed get the spring; chips and pills
     keep their own transitions and just gain a press state. */
  html .civic-action,
  html .dock-btn,
  html .phone-action,
  html .leaflet-control-zoom.leaflet-bar a {
    transition: background-color .18s var(--gl-ease), border-color .18s var(--gl-ease), color .18s var(--gl-ease),
                opacity .2s ease, box-shadow .18s var(--gl-ease), transform .5s var(--gl-spring);
  }
  html .civic-action:not(.civic-action--donate):active,
  html .dock-btn:active,
  html .phone-action:active,
  html .phone-nav-btn:active,
  html .route-pill:active,
  html .status-pill:active,
  html .toggle:active,
  html .compass-btn:active { transform: scale(.95); }

  /* 15. Cross-page view transitions (MPA): quick fade + 8px rise. Same-document transitions
     (the sidebar morph in atlas-app.css) carry no `mpa` type and are untouched. */
  @view-transition { navigation: auto; types: mpa; }
  @keyframes gl-vt-out { to { opacity: 0; } }
  @keyframes gl-vt-in  { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
  html:active-view-transition-type(mpa)::view-transition-old(root) { animation: gl-vt-out .2s ease both; }
  html:active-view-transition-type(mpa)::view-transition-new(root) { animation: gl-vt-in .38s var(--gl-ease) both; }
}

@media (prefers-reduced-transparency: reduce) {
  html .atlas-popup-card .leaflet-popup-content-wrapper,
  html body.device-phone .floating-card {
    background: rgba(8, 18, 30, .97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* 2026-11-12 — phone: the shared action column (share / print / fullscreen / donate) sat on
   top of the last tab of the bottom dock and on the first-visit notice's button.
   Lift it clear of the dock and keep the notice out from under it. */
body.device-phone .civic-actions {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 539px) {
  html .beta-popup { right: 60px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}