/* MQ-8.UI.1 Central Panopticon Navigator */

.mq-panopticon-nav-chrome {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: 2147483640;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.mq-panopticon-nav-chrome[hidden] {
  display: none;
}

.mq-panopticon-nav-back,
.mq-panopticon-nav-copy,
.mq-panopticon-nav-close {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(8,11,16,.96);
  color: #f5f7fa;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,.32);
}

.mq-panopticon-nav-back:disabled {
  opacity: .36;
  cursor: default;
}

.mq-panopticon-nav-breadcrumbs {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(8,11,16,.82);
  color: rgba(245,247,250,.72);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  pointer-events: none;
}

.mq-panopticon-not-found {
  position: fixed;
  inset: 20vh max(20px, 20vw);
  z-index: 2147483630;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: #090c11;
  color: #f5f7fa;
  padding: 24px;
  box-shadow: 0 26px 100px rgba(0,0,0,.68);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.mq-panopticon-not-found[hidden] {
  display: none;
}

.mq-panopticon-not-found-close {
  float: right;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 28px;
  cursor: pointer;
}

.mq-panopticon-not-found-eyebrow {
  color: #b986ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .mq-panopticon-nav-chrome {
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "crumb crumb"
      "back close";
  }

  .mq-panopticon-nav-back {
    grid-area: back;
  }

  .mq-panopticon-nav-close {
    grid-area: close;
  }

  .mq-panopticon-nav-breadcrumbs {
    grid-area: crumb;
  }

  .mq-panopticon-not-found {
    inset:
      calc(84px + env(safe-area-inset-top))
      12px
      calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .mq-panopticon-nav-chrome {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "crumb crumb crumb"
      "back copy close";
  }

  .mq-panopticon-nav-copy {
    grid-area: copy;
  }
}

/* MQ-8.UI.2 windowed-layout navigation alignment */
.mq-panopticon-nav-chrome {
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  right: auto;
  width: min(1050px, calc(100vw - 24px));
  transform: translateX(-50%);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.mq-panopticon-nav-back,
.mq-panopticon-nav-copy,
.mq-panopticon-nav-close {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .mq-panopticon-nav-chrome {
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "crumb crumb crumb"
      "back copy close";
  }
}

/* MQ-8.UI.5 mobile interaction pass */

@media (max-width: 1024px) {
  .mq-panopticon-nav-chrome {
    width: min(100%, calc(100vw - 16px));
    max-width: none;
  }
}

@media (max-width: 768px) {
  .mq-panopticon-nav-chrome {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "crumb crumb crumb"
      "back copy close";
    gap: 8px;
    z-index: 2147483000;
  }

  .mq-panopticon-nav-breadcrumb {
    grid-area: crumb;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mq-panopticon-nav-back {
    grid-area: back;
  }

  .mq-panopticon-nav-copy {
    grid-area: copy;
  }

  .mq-panopticon-nav-close {
    grid-area: close;
  }

  .mq-panopticon-nav-back,
  .mq-panopticon-nav-copy,
  .mq-panopticon-nav-close {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    touch-action: manipulation;
  }
}

/* MQ-8.UI.5A 390px nav isolation fix */
@media (max-width: 768px) {
  .mq-panopticon-nav-chrome {
    top: max(4px, env(safe-area-inset-top));
    left: 4px;
    right: 4px;
    width: auto;
    min-height: 96px;
    padding: 8px;
    box-sizing: border-box;
    background: rgba(7, 10, 15, 0.98);
    border: 1px solid rgba(185, 134, 255, .18);
    border-radius: 8px;
    backdrop-filter: blur(8px);
  }

  .mq-panopticon-nav-breadcrumb {
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  .mq-panopticon-nav-back,
  .mq-panopticon-nav-copy,
  .mq-panopticon-nav-close {
    min-height: 44px;
    min-width: 0;
    padding-inline: 10px;
  }

  body:has(#mq-personnel-directory:not([hidden])) #mq-personnel-launcher,
  body:has(#mq-personnel-dossier:not([hidden])) #mq-personnel-launcher,
  body:has(#mq-achievement-dossier:not([hidden])) #mq-personnel-launcher {
    display: none !important;
  }
}