/* Atlas — samodzielne menu off-canvas. Kolory wpisane wprost (elementy żyją na
   <body>, poza sceną aplikacji), spójne z ciemnym motywem atlasu. */
.atlas-menu-burger {
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 9997;
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: #1f1b18; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  -webkit-tap-highlight-color: transparent;
}
.atlas-menu-burger span { display: block; width: 18px; height: 2px; background: #f1efe8; border-radius: 2px; }

.atlas-menu-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 9998;
}
.atlas-menu-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(86vw, 360px);
  background: #1f1b18; color: #f1efe8;
  transform: translateX(100%); transition: transform .22s ease; z-index: 9999;
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0, 0, 0, .45);
  font-family: var(--atlas-font);
  padding-top: env(safe-area-inset-top, 0px);
  -webkit-tap-highlight-color: transparent;
}
body.atlas-menu-open .atlas-menu-drawer { transform: none; }
body.atlas-menu-open .atlas-menu-overlay { opacity: 1; visibility: visible; }

.atlas-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid #2a2622; font-weight: 700; font-size: 16px;
}
.atlas-menu-x { background: none; border: 0; color: #a8a49b; font-size: 18px; cursor: pointer; line-height: 1; }
.atlas-menu-nav {
  display: flex; flex-direction: column; padding: 8px; overflow-y: auto; gap: 2px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
.atlas-menu-nav a {
  padding: 14px 16px; border-radius: 10px; color: #f1efe8; text-decoration: none; font-weight: 500;
}
@media (hover: hover) {
  .atlas-menu-burger:hover { background: #2a2622; }
  .atlas-menu-nav a:hover { background: #2a2622; }
  .atlas-menu-x:hover { color: #f1efe8; }
}