/* Floating, non-blocking navigation on top of the Leaflet canvas.
 * The map never changes size when a toolbar is opened.
 */
.atc-topbar {
  /* Reach the inner edge of the transparent right-hand activation rail. */
  right: 52px;
  transform: translateY(calc(-100% + 30px));
  background: transparent;
  box-shadow: none;
  pointer-events: none;

  /* The right boundary travels at the same speed as the expanding sidebar.
   * Only the content is clipped: the map never resizes or repaints.
   */
  transition:
    transform .65s cubic-bezier(.22, .65, .25, 1),
    right .65s cubic-bezier(.22, .65, .25, 1);
  will-change: right, transform;
}

.atc-topbar-content {
  border: 1px solid rgba(94, 168, 197, .42);
  border-radius: 0 0 9px 9px;
  overflow: hidden;
  background: rgba(7, 23, 38, .80);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.atc-topbar-content > header,
.atc-topbar-content > nav {
  background: transparent;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-height: 39px;
}

/* Keep header height stable when the sidebar consumes horizontal space.
 * Avoid a second visual jump caused by text wrapping during animation.
 */
.atc-topbar-content > header {
  min-height: 53px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.atc-topbar-content .brand,
.atc-topbar-content .system {
  flex-shrink: 0;
  white-space: nowrap;
}

.atc-topbar-grip {
  /* This whole 30px horizontal strip is a hover target, not only the pin. */
  justify-content: flex-start;
  height: 30px;
  padding-left: 10px;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.atc-topbar-grip:hover,
.atc-topbar-grip:focus-within {
  background: transparent;
}

.atc-topbar-pin {
  width: 38px;
  min-width: 38px;
  height: 28px;
  padding: 4px;
  border: 1px solid rgba(94, 168, 197, .38);
  border-radius: 7px;
  background: rgba(9, 34, 51, .70);
  pointer-events: auto;
  font-size: 17px;
  line-height: 18px;
}

/* Fixed = coloured pushpin; released = subdued outline handle. */
.atc-topbar-pin[aria-pressed="true"],
.atc-sidebar-toggle[aria-pressed="true"],
.atc-dock-handle[aria-pressed="true"] {
  color: #f58aab;
}

.atc-topbar-pin[aria-pressed="false"],
.atc-sidebar-toggle[aria-pressed="false"],
.atc-dock-handle[aria-pressed="false"] {
  color: #b9ccda;
}

/* The upper curtain reaches the right activation rail even when the
 * side panel opens. Its content must not suddenly shrink to 392px.
 * Instead the right panel slides vertically below the upper curtain.
 */
main > .atc-sidebar {
  transition:
    top .65s cubic-bezier(.22, .65, .25, 1),
    width .65s cubic-bezier(.22, .65, .25, 1);
}

.app:has(> .atc-topbar.atc-topbar-open) main > .atc-sidebar {
  /* Align with the visible header/nav, not the transparent 30px hover grip. */
  top: calc(var(--atc-topbar-clearance, 92px) + 2px);
}

/* The sidebar container and full-height hover rail remain completely
 * transparent whether collapsed or expanded. Only actual content has a panel.
 */
main > .atc-sidebar,
main:not(.atc-sidebar-open) > .atc-sidebar,
main.atc-sidebar-open > .atc-sidebar {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.atc-sidebar-rail {
  height: 100%;
  min-height: 100%;
  cursor: default;
  background: transparent;
  border-right: 0;
}

main.atc-sidebar-open .atc-sidebar-rail {
  background: transparent;
  border-right: 0;
}

.atc-sidebar-toggle,
main:not(.atc-sidebar-open) .atc-sidebar-toggle,
main.atc-sidebar-open .atc-sidebar-toggle {
  border: 1px solid rgba(94, 168, 197, .38);
  border-radius: 7px;
  background: rgba(9, 34, 51, .70);
}

/* Only pin buttons have a visible backing; all hover activation rails
 * remain transparent regardless of expansion or pointer position.
 */
.atc-topbar-pin:hover,
.atc-topbar-pin:focus-visible,
main .atc-sidebar-toggle:hover,
main .atc-sidebar-toggle:focus-visible {
  background: rgba(20, 62, 86, .86);
  border-color: rgba(122, 205, 237, .70);
}

.atc-topbar-pin[aria-pressed="true"],
main .atc-sidebar-toggle[aria-pressed="true"] {
  background: rgba(9, 34, 51, .84);
  border-color: rgba(245, 138, 171, .55);
}

main.atc-sidebar-open .atc-sidebar-content {
  background: rgba(9, 28, 43, .74);
  border: 1px solid rgba(76, 141, 172, .40);
  border-radius: 7px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
  backdrop-filter: blur(11px);
}

.atc-sidebar-content > section {
  background: rgba(15, 37, 55, .64);
  border-color: rgba(83, 148, 176, .40);
}

/* The importer exposes one file control at a time. Browsers may let
 * author-level display rules override the UA [hidden] default otherwise.
 */
#missionImporterSection [hidden] {
  display: none !important;
}

/* Exporter shortcut remains legible at the end of the top status bar. */
.atc-topbar-content .atc-exporter-launch {
  padding: 7px 10px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 10px;
  color: #a8ddf2;
  border: 1px solid rgba(94, 168, 197, .48);
  background: rgba(16, 48, 69, .85);
}

.atc-topbar-content .atc-exporter-launch:hover,
.atc-topbar-content .atc-exporter-launch:focus-visible {
  color: #fff;
  border-color: #69c6ed;
  background: rgba(22, 85, 118, .94);
}

/* Compact mode-specific tools. */
.map-toolbar {
  flex-wrap: wrap;
  max-width: calc(100% - 72px);
}

#home,
#base,
#mizFit {
  background: rgba(11, 35, 52, .75);
  backdrop-filter: blur(8px);
}

#viewTitle {
  font-size: 10px;
}

@media (max-width: 800px) {
  .atc-topbar {
    right: 52px;
  }

  .atc-topbar-content > header {
    padding: 8px;
  }

  .atc-topbar-content > nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atc-topbar,
  main > .atc-sidebar {
    transition: none;
  }
}