/* Shared navigation for public route explorers. */
.mock-route-navigation {
  --route-menu-width: 92px;
  --menu-paper: color-mix(in srgb,var(--vz-card) 97%,transparent);
  --menu-ink: var(--vz-blue);
  --menu-line: var(--vz-line);
  --menu-hover: var(--vz-hover);
  --menu-selected: color-mix(in srgb,var(--vz-current) 10%,transparent);
  --menu-accent: var(--vz-current);
  --menu-profile-signed-in: var(--vz-success);
}
.mock-route-navigation .mock-site-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 35;
  display: none;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: var(--route-menu-width);
  min-width: var(--route-menu-width);
  max-width: var(--route-menu-width);
  height: 100dvh;
  padding: 8px 6px;
  border: 0;
  border-right: 1px solid var(--menu-line);
  border-radius: 0;
  background: var(--menu-paper);
  color: var(--menu-ink);
  box-shadow: 3px 0 12px #102a4410;
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}
.mock-route-navigation :is(.mock-site-rail,.mock-site-menu) { isolation: isolate; }
.mock-route-navigation :is(.mock-site-rail,.mock-site-menu)::before,
.mock-route-navigation :is(.mock-site-rail,.mock-site-menu)::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image: var(--menu-art);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}
/* Contours fill the menu; the complete landscape stays visible near the footer. */
.mock-route-navigation :is(.mock-site-rail,.mock-site-menu)::before {
  background-size: auto 100%;
  background-position: center;
  opacity: .10;
}
.mock-route-navigation :is(.mock-site-rail,.mock-site-menu)::after {
  background-size: 100% auto;
  background-position: center bottom 94px;
  opacity: .32;
  mask-image: linear-gradient(transparent 45%,#000 68%);
}
.mock-route-navigation.theme-dark :is(.mock-site-rail,.mock-site-menu)::before,
.mock-route-navigation.theme-dark :is(.mock-site-rail,.mock-site-menu)::after {
  filter: invert(1);
  mix-blend-mode: screen;
}
.mock-route-navigation .mock-site-rail .mock-menu-brand {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 100%;
  height: 90px;
  padding: 4px 0 10px;
  border-radius: 0;
  border-bottom: 0;
  background: transparent;
}
.mock-route-navigation .mock-menu-brand img {
  display: block;
  width: 76px;
  height: 62px;
  object-fit: contain;
}
.mock-route-navigation.theme-dark .mock-menu-brand img {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #e0f4ffb3) drop-shadow(0 0 6px #86d7ff66);
}
.mock-route-navigation .mock-menu-links {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: start;
  flex: 1;
  gap: 3px;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #889aab50 transparent;
}
.mock-route-navigation .mock-site-rail .mock-menu-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 5px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 64px;
  height: auto;
  padding: 7px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--menu-ink);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.mock-route-navigation .mock-menu-link svg,
.mock-route-navigation .mock-menu-profile svg {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mock-route-navigation .mock-menu-link span {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mock-route-navigation .mock-site-rail .mock-menu-link span {
  display: block;
  width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
}
/* A signed-in profile uses the same green indicator in every menu. */
.mock-route-navigation :is([data-menu-profile],[data-vz-nav-profile],.mock-toolbar-profile).is-authenticated > svg,
.mock-route-navigation:has([data-menu-profile].is-authenticated) .mock-mobile-bottom-nav [data-mobile-nav="profile"] > svg {
  color: var(--menu-profile-signed-in)!important;
  stroke: currentColor!important;
}
.mock-route-navigation .mock-site-rail .mock-menu-link:hover,
.mock-route-navigation .mock-menu-profile:hover { background: var(--menu-hover); }
.mock-route-navigation .mock-site-rail .mock-menu-link.is-current {
  border-color: transparent;
  background: transparent;
  color: var(--menu-accent);
  font-weight: 700;
}
.mock-route-navigation .mock-site-rail .mock-menu-link.is-current::before {
  content: none;
}
.mock-route-navigation .mock-menu-link.is-current::after {
  position: absolute;
  z-index: -1;
  inset: 2px 0;
  content: "";
  background: var(--menu-selected);
  clip-path: polygon(8% 3%,89% 0,100% 7%,91% 17%,100% 23%,95% 34%,100% 42%,95% 55%,100% 62%,93% 76%,97% 84%,83% 96%,12% 100%,2% 94%,9% 84%,0 76%,6% 66%,1% 55%,7% 45%,0 34%,8% 24%,2% 16%,11% 9%);
}
.mock-route-navigation .mock-menu-footer {
  flex: none;
  width: 100%;
  padding-top: 9px;
  border-top: 0;
}
.mock-route-navigation .mock-site-rail .mock-menu-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 6px;
  width: 100%;
  height: 62px;
  padding: 7px;
  border: 0;
  border-top: 1px solid var(--menu-line);
  border-radius: 0;
  color: var(--menu-ink);
  background: transparent;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.mock-route-navigation .mock-menu-session {
  position: absolute;
  top: 9px;
  right: 22px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--menu-paper);
  border-radius: 50%;
  background: var(--vz-success);
}
.mock-route-navigation .mock-menu-session[hidden] { display: none; }
.mock-route-navigation :is(.mock-menu-link,.mock-menu-brand,.mock-menu-profile,.mock-menu-socials a):focus-visible {
  outline: 2px solid var(--vz-blue);
  outline-offset: -2px;
}

/* The same sections and icons appear in the narrow-screen menu. */
.mock-route-navigation .mock-site-menu[popover] {
  inset: 12px auto 12px 12px;
  box-sizing: border-box;
  width: 260px;
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 12px;
  border-color: var(--menu-line);
  border-radius: var(--vz-card-radius);
  background: var(--menu-paper);
  color: var(--menu-ink);
  box-shadow: var(--vz-shadow-popup);
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}
.mock-route-navigation .mock-site-menu:popover-open { display: flex; flex-direction: column; gap: 6px; }
.mock-route-navigation .mock-site-menu-head {
  flex: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 10px;
  border-color: var(--menu-line);
  color: var(--menu-ink);
  font-size: 13px;
  font-weight: 700;
}
.mock-route-navigation .mock-site-menu-head .mock-menu-brand img { width: 64px; height: 52px; }
.mock-route-navigation .mock-site-menu-head button { align-self: center; color: var(--menu-ink); }
.mock-route-navigation .mock-site-menu .mock-menu-link,
.mock-route-navigation .mock-site-menu .mock-menu-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--menu-ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.mock-route-navigation .mock-site-menu .mock-menu-link:hover { background: var(--menu-hover); }
.mock-route-navigation .mock-site-menu .mock-menu-link.is-current {
  background: transparent;
  color: var(--menu-accent);
  font-weight: 700;
}
.mock-route-navigation .mock-site-menu .mock-menu-profile { border: 1px solid var(--menu-line); font-weight: 600; }
.mock-route-navigation .mock-site-menu .mock-menu-session { top: 12px; right: 12px; }
.mock-route-navigation .mock-menu-socials {
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 0 0 12px;
}
.mock-route-navigation .mock-menu-socials a {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb,var(--menu-ink) 45%,transparent);
  border-radius: 50%;
  background: color-mix(in srgb,var(--menu-paper) 80%,transparent);
  color: var(--menu-ink);
  text-decoration: none;
  font: 700 9px/1 "Manrope","Segoe UI",Arial,sans-serif;
}
.mock-route-navigation .mock-menu-socials a:hover { background: var(--menu-hover); }
.mock-route-navigation .mock-menu-socials a[title="MAX"] span {
  font-size: 7px;
  letter-spacing: -.15px;
}
.mock-route-navigation .mock-menu-socials svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mock-route-navigation .mock-site-menu .mock-menu-socials { gap: 12px; }
.mock-route-navigation .mock-site-menu .mock-menu-socials a { width: 34px; height: 34px; }
@media (min-width: 1280px) {
  .mock-route-navigation .mock-site-rail { display: flex; }
  .mock-route-navigation .mock-explorer :is(.mock-panel--description,.mock-panel--related) {
    left: calc(var(--route-menu-width) + var(--route-gap))!important;
  }
}
@media (min-width: 1230px) and (max-width: 1279px) {
  .mock-route-navigation .mock-site-menu-toggle { display: grid; }
  .mock-route-navigation .mock-explorer :is(.mock-panel--description,.mock-panel--related) { left: var(--route-gap)!important; }
}
html.mock-route-navigation.mock-has-mobile .mock-site-menu[popover] {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  padding: 16px;
  border: 0;
  border-radius: 0;
}
html.mock-route-navigation.mock-has-mobile .mock-site-rail { display: none; }