/**
 * Meta-analysis app chrome: pull-out navbar + corner back control.
 * Used on pages with #metapsy-app-iframe / #metapsy-app-iframe-explore
 * (database/*, tools/*, sypres/*, …). Navbar is tucked away by default;
 * opening it slides the bar in and pushes the app down in sync.
 */

html:has(#metapsy-app-iframe),
html:has(#metapsy-app-iframe-explore) {
  --app-nav-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --app-nav-duration: 0.36s;
}

/* Push the page (iframe + footer) down when the bar is out. */
html:has(#metapsy-app-iframe) body,
html:has(#metapsy-app-iframe-explore) body {
  transition: padding-top var(--app-nav-duration) var(--app-nav-ease);
  padding-top: 0;
}

html.app-nav-open:has(#metapsy-app-iframe) body,
html.app-nav-open:has(#metapsy-app-iframe-explore) body {
  padding-top: var(--mnav-h, 4.75rem);
}

html:has(#metapsy-app-iframe) #metapsy-nav,
html:has(#metapsy-app-iframe-explore) #metapsy-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1501;
  transition: transform var(--app-nav-duration) var(--app-nav-ease);
  will-change: transform;
}

/* Default: navbar off-screen. */
html:has(#metapsy-app-iframe):not(.app-nav-open) #metapsy-nav,
html:has(#metapsy-app-iframe-explore):not(.app-nav-open) #metapsy-nav {
  transform: translateY(-100%);
  pointer-events: none;
}

html.app-nav-open:has(#metapsy-app-iframe) #metapsy-nav,
html.app-nav-open:has(#metapsy-app-iframe-explore) #metapsy-nav {
  transform: none;
  pointer-events: auto;
}

/* After pull-down: ignore a parked cursor until the pointer actually moves
   (otherwise About/Databases open under the click that revealed the bar). */
html.app-nav-open.app-nav-hover-lock:has(#metapsy-app-iframe) #metapsy-nav,
html.app-nav-open.app-nav-hover-lock:has(#metapsy-app-iframe-explore) #metapsy-nav {
  pointer-events: none;
}

@media (min-width: 992px) {
  html.app-nav-hover-lock .mnav .nav-item.dropdown:hover > .mnav-menu,
  html.app-nav-hover-lock .mnav .mnav-item.dropdown:hover > .mnav-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) scaleY(0.55) !important;
    pointer-events: none !important;
    transition-delay: 0s !important;
  }
}

/* Decorative strip above the injected nav is unused once the bar overlays. */
html:has(#metapsy-app-iframe) main > section.bg-gradient2:first-of-type,
html:has(#metapsy-app-iframe-explore) main > section.bg-gradient2:first-of-type {
  display: none;
}

/* Thin top fringe so the notch can appear even over a cross-origin iframe. */
.app-nav-notch-hotzone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 1499;
  pointer-events: auto;
  background: transparent;
}

html.app-nav-open .app-nav-notch-hotzone {
  /* Cover the bar + the notch strip under it */
  height: calc(var(--mnav-h, 4.75rem) + 1.5rem);
}

/* ---- Top notch: pulls the navbar out / tucks it away -------------------- */
.app-nav-notch {
  position: fixed;
  top: 0;
  left: 50%;
  /* Below .mnav (1501) so open dropdown panels cover this tab */
  z-index: 1500;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 1.25rem;
  margin: -1px;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  background-color: var(--bs-dark);
  border: 1px solid rgba(108, 117, 125, 0.45);
  border-top: 0;
  border-radius: 0 0 0.65rem 0.65rem;
  box-shadow: 0 2px 8px rgba(20, 30, 35, 0.22);
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: top var(--app-nav-duration, 0.36s) var(--app-nav-ease, cubic-bezier(0.33, 1, 0.68, 1)),
    background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    opacity 0.18s ease, visibility 0.18s ease;
}

.app-nav-notch.is-visible,
.app-nav-notch:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Touch: no hover fringe — keep the control reachable. */
@media (hover: none) {
  .app-nav-notch {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .app-nav-notch-hotzone {
    display: none;
  }
}

/* cnma-lmic / paddy: notch around two-thirds across */
html.app-nav-notch-end .app-nav-notch {
  left: 72%;
}

html[data-theme="dark"] .app-nav-notch {
  background-color: #2d383d;
  border-color: rgba(108, 117, 125, 0.5);
  color: rgba(226, 232, 235, 0.78);
}

.app-nav-notch:hover,
.app-nav-notch:focus-visible {
  color: #fff;
  border-color: rgba(94, 186, 189, 0.55);
  outline: none;
}

.app-nav-notch__grip {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0;
  background: none;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  opacity: 1;
  /* Closed: chevron points down (pull the bar out) */
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.28s var(--app-nav-ease, cubic-bezier(0.33, 1, 0.68, 1));
}

html.app-nav-open .app-nav-notch__grip {
  /* Open: chevron points up (tuck the bar away) */
  transform: translateY(2px) rotate(-135deg);
}

/* Ride the bottom edge of the open navbar */
html.app-nav-open .app-nav-notch {
  top: var(--mnav-h, 4.75rem);
}

/*
 * Desktop menus open on .mnav-item:hover (not only .show). Hide the notch
 * whenever any dropdown is hovered, shown, or the mobile collapse is open.
 */
html.app-nav-open:has(#metapsy-nav .mnav-item.dropdown:hover) .app-nav-notch,
html.app-nav-open:has(#metapsy-nav .nav-item.dropdown:hover) .app-nav-notch,
html.app-nav-open:has(#metapsy-nav .mnav-menu.show) .app-nav-notch,
html.app-nav-open:has(#metapsy-nav .dropdown-menu.show) .app-nav-notch,
html.app-nav-open:has(#metapsy-nav .mnav-link[aria-expanded="true"]) .app-nav-notch,
html.app-nav-open:has(#navbarSupportedContent.show) .app-nav-notch {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Back to databases overview ----------------------------------------- */
.app-back-btn {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1502;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  color: #5f6f78;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgba(49, 63, 69, 0.14);
  border-bottom-width: 3px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(36, 50, 58, 0.06);
  transition: border-color 160ms ease, color 160ms ease, transform 90ms ease;
}

html[data-theme="dark"] .app-back-btn {
  color: #cfd8dc;
  background-color: #222d32;
  border-color: rgba(108, 117, 125, 0.35);
}

.app-back-btn:hover,
.app-back-btn:focus-visible {
  color: #0372b7;
  border-color: color-mix(in srgb, #0372b7 40%, rgba(49, 63, 69, 0.14));
  outline: none;
  text-decoration: none;
}

html[data-theme="dark"] .app-back-btn:hover,
html[data-theme="dark"] .app-back-btn:focus-visible {
  color: #4f9fd6;
  border-color: color-mix(in srgb, #4f9fd6 40%, rgba(108, 117, 125, 0.35));
}

.app-back-btn:active {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  html:has(#metapsy-app-iframe),
  html:has(#metapsy-app-iframe-explore) {
    --app-nav-duration: 0.01ms;
  }

  html:has(#metapsy-app-iframe) body,
  html:has(#metapsy-app-iframe-explore) body,
  html:has(#metapsy-app-iframe) #metapsy-nav,
  html:has(#metapsy-app-iframe-explore) #metapsy-nav,
  .app-nav-notch {
    transition: none;
  }
}