/* Top Multi Menu Bar: a website-style top menu with dropdowns, flyouts and a drawer on phones.
   Built by menu-bar.js (see docs/menu-bar.md). The look comes from the --mb-* custom properties that
   the generated <style id="dynamic-menubar"> sets on :root (every page has it); the fallbacks below
   are the Light preset, for a page that somehow lacks it.
   The last section moves every widget that is anchored to the top of the window below the bar. */

:root {
  --menu-bar-h: 0px;
}

body.has-menu-bar {
  --menu-bar-h: var(--mb-h, 56px);
}

@media (max-width: 768px) {
  body.has-menu-bar {
    --menu-bar-h: 48px;
  }

  /* Show Room Title on a phone: the name has a band under the strip (below, with the phone's rules). What stands clear of the
     bar stands clear of the band too; the strip itself stays its 48px. */
  body.has-menu-bar.menu-bar-title-band {
    --menu-bar-h: 78px;
  }

  /* Show on Phones unticked (menu-bar.js names it): no bar on a phone, and no room kept for one */
  body.has-menu-bar.menu-bar-not-on-phones {
    --menu-bar-h: 0px;
  }

  body.menu-bar-not-on-phones .menu-bar,
  body.menu-bar-not-on-phones .menu-bar__drawer {
    display: none;
  }
}

/* ------------------------------------------------------------------ bar */

.menu-bar,
.menu-bar__drawer {
  --mb-line: rgba(0, 0, 0, 0.16);
}

@supports (color: color-mix(in srgb, red, blue)) {
  .menu-bar,
  .menu-bar__drawer {
    --mb-line: color-mix(in srgb, var(--mb-text, #111827) 18%, transparent);
  }
}

.menu-bar,
.menu-bar *,
.menu-bar__drawer,
.menu-bar__drawer * {
  box-sizing: border-box;
}

.menu-bar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 10000;
  height: var(--menu-bar-h);
  color: var(--mb-text, #111827);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
}

/* The bar's colour (the theme's glass, or any opacity the owner set) is a layer behind its content,
   with the blur of a glass bar on it. It is not the bar's own background or filter: a backdrop filter
   there would make the bar the backdrop of its dropdowns, which would then blur nothing. A see-through
   bar always has the panorama behind it (see --mb-keep below), so its colour never lands on the black
   page, where glass is just a darker colour, and what pokes out above the panorama (its keyboard
   focus ring is a 4px glow) is off the top of the window. */
.menu-bar::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: -1;
  background: var(--mb-bg, #ffffff);
  -webkit-backdrop-filter: var(--mb-bar-blur, none);
  backdrop-filter: var(--mb-bar-blur, none);
  pointer-events: none;
}

.menu-bar__inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0 12px;
}

.menu-bar__list {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-bar__item {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-bar__list > .menu-bar__item {
  border-inline-end: var(--mb-sep, 1.5px) solid var(--mb-line);
}

.menu-bar__link,
.menu-bar__row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 0.02em;
  text-align: start;
  text-decoration: none;
  text-transform: var(--mb-transform, uppercase);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-bar__label {
  min-width: 0;
}

/* Items in the bar. Button Style "Rounded Button" sets them in from the bar's edges and rounds them (--mb-item-inset,
   --mb-item-radius: both 0 for "Underline", and on a page made before the choice existed) */
.menu-bar__list > .menu-bar__item > .menu-bar__link {
  position: relative;
  margin: var(--mb-item-inset, 0px) calc(var(--mb-item-inset, 0px) / 4);
  padding: 0 16px;
  border-radius: var(--mb-item-radius, 0px);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.1s ease;
}

.menu-bar__list > .menu-bar__item > .menu-bar__link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: var(--mb-underline, 3px);
  background: var(--mb-item-line, var(--mb-accent, #2b547d));
  transform: scaleX(0);
  transition: transform 0.1s ease;
}

.menu-bar__list > .menu-bar__item.is-open > .menu-bar__link::after,
.menu-bar__list > .menu-bar__item.is-showing > .menu-bar__link::after,
.menu-bar__list > .menu-bar__item > .menu-bar__link:focus-visible::after,
.menu-bar__list > .menu-bar__item > .menu-bar__link.is-current::after,
.menu-bar__list > .menu-bar__item > .menu-bar__link.is-current-branch::after {
  transform: scaleX(1);
}

.menu-bar__link.is-current,
.menu-bar__link.is-current-branch,
.menu-bar__item.is-open > .menu-bar__link,
.menu-bar__item.is-showing > .menu-bar__link {
  color: var(--mb-accent, #2b547d);
}

/* A soft background on the bar item that is pointed at or whose dropdown is open: the theme look's
   highlight is its text colour, so the colour change alone shows nothing. With the accent line turned
   off the item you are on keeps a fainter version (--mb-current-bg), so the bar still says where you
   are. The open state comes last so it wins over the current one. */
.menu-bar__list > .menu-bar__item > .menu-bar__link.is-current,
.menu-bar__list > .menu-bar__item > .menu-bar__link.is-current-branch {
  background-color: var(--mb-current-bg, transparent);
  /* the word on the button of "Rounded Button"; for "Underline" this is the highlight colour, as the rule above says */
  color: var(--mb-current-text, var(--mb-accent, #2b547d));
  font-weight: var(--mb-current-weight, 500);
}

/* is-showing: a top item whose inside is in the side list, while the list shows it (it has no dropdown of its own) */
.menu-bar__list > .menu-bar__item.is-showing > .menu-bar__link,
.menu-bar__list > .menu-bar__item.is-open > .menu-bar__link {
  background-color: var(--mb-item-hover-bg, var(--mb-hover, rgba(0, 0, 0, 0.06)));
  color: var(--mb-item-hover-text, var(--mb-accent, #2b547d));
}

/* ...except on the item you are on when it is a button ("Rounded Button"): it stays the button while its dropdown is open */
.menu-bar__list > .menu-bar__item.is-open > .menu-bar__link.is-current,
.menu-bar__list > .menu-bar__item.is-open > .menu-bar__link.is-current-branch,
.menu-bar__list > .menu-bar__item.is-showing > .menu-bar__link.is-current,
.menu-bar__list > .menu-bar__item.is-showing > .menu-bar__link.is-current-branch {
  background-color: var(--mb-current-open-bg, var(--mb-item-hover-bg, var(--mb-hover, rgba(0, 0, 0, 0.06))));
  color: var(--mb-current-text, var(--mb-accent, #2b547d));
}

.menu-bar__link:focus-visible,
.menu-bar__row:focus-visible,
.menu-bar__burger:focus-visible,
.menu-bar__close:focus-visible {
  outline: 2px solid var(--mb-accent, #2b547d);
  outline-offset: -3px;
}

@media (hover: hover) {
  .menu-bar__list > .menu-bar__item:hover > .menu-bar__link::after {
    transform: scaleX(1);
  }

  .menu-bar__item:hover > .menu-bar__link {
    color: var(--mb-accent, #2b547d);
  }

  .menu-bar__list > .menu-bar__item:hover > .menu-bar__link {
    background-color: var(--mb-item-hover-bg, var(--mb-hover, rgba(0, 0, 0, 0.06)));
    color: var(--mb-item-hover-text, var(--mb-accent, #2b547d));
  }

  /* the item you are on keeps its own background and word under the pointer (a button stays the button) */
  .menu-bar__list > .menu-bar__item:hover > .menu-bar__link.is-current,
  .menu-bar__list > .menu-bar__item:hover > .menu-bar__link.is-current-branch {
    background-color: var(--mb-current-open-bg, var(--mb-item-hover-bg, var(--mb-hover, rgba(0, 0, 0, 0.06))));
    color: var(--mb-current-text, var(--mb-accent, #2b547d));
  }
}

/* ------------------------------------------------------------- dropdowns */

.menu-bar__submenu {
  display: none;
  position: absolute;
  z-index: 1;
  /* As wide as its longest name, and never narrower than the Dropdown Width setting */
  width: max-content;
  min-width: min(var(--mb-dd-w, 240px), 90vw);
  max-width: 90vw;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--mb-dd-bg, rgba(255, 255, 255, 0.85));
  -webkit-backdrop-filter: var(--mb-dd-blur, blur(10px));
  backdrop-filter: var(--mb-dd-blur, blur(10px));
  border-radius: 0 0 4px 4px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

/* Under a bar item */
.menu-bar__submenu--1 {
  top: 100%;
  inset-inline-start: 0;
}

.menu-bar__submenu--1.is-flipped {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Beside a dropdown row; -6px lines its first row up with the row that opened it */
.menu-bar__submenu--2 {
  top: -6px;
  inset-inline-start: 100%;
  border-radius: 4px;
}

.menu-bar__submenu--2.is-flipped {
  inset-inline-start: auto;
  inset-inline-end: 100%;
}

.menu-bar__item.is-open > .menu-bar__submenu {
  display: block;
}

.menu-bar__submenu > .menu-bar__item {
  display: block;
}

.menu-bar__submenu .menu-bar__link {
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  border-bottom: 1px solid var(--mb-line);
  font-weight: 400;
}

.menu-bar__submenu > .menu-bar__item:last-child > .menu-bar__link {
  border-bottom: 0;
}

.menu-bar__submenu .menu-bar__link.is-current {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .menu-bar__submenu .menu-bar__link.is-current {
    background: color-mix(in srgb, var(--mb-accent, #2b547d) 12%, transparent);
  }
}

@media (hover: hover) {
  .menu-bar__submenu .menu-bar__link:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  @supports (color: color-mix(in srgb, red, blue)) {
    .menu-bar__submenu .menu-bar__link:hover {
      background: color-mix(in srgb, var(--mb-accent, #2b547d) 10%, transparent);
    }
  }
}

/* A small triangle marks a row that opens a flyout */
.menu-bar__caret {
  flex: none;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-inline-start: 5px solid var(--mb-accent, #2b547d);
}

/* -------------------------------------------------------------- room title */

/* The room on show, as plain text, centred in the space the menu leaves. With a title it is the title that
   takes that space (the menu stops growing), so the button and the logo still end up at the far end. It
   follows Uppercase Labels. It goes first when the bar gets tight: below 1000px the menu and the icons
   keep the room, and the bar is the menu's again. */
.menu-bar__title {
  order: 10;
  flex: 1 1 0;
  align-self: center;
  min-width: 0;
  padding: 0 16px;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* where the name sits in the room it has between the menu and the icons: in the middle, beside the menu or beside the icons
     (Show Room Title > Title Alignment). On a phone it reads from the left, below. */
  text-align: var(--mb-title-align, center);
  text-overflow: ellipsis;
  text-transform: var(--mb-transform, uppercase);
  white-space: nowrap;
}

.menu-bar--has-title .menu-bar__list {
  flex: 0 1 auto;
}

@media (min-width: 769px) and (max-width: 1000px) {
  .menu-bar__title {
    display: none;
  }

  .menu-bar--has-title .menu-bar__list {
    flex: 1 1 auto;
  }

  .menu-bar__tools {
    margin-inline-start: 4px;
  }

  .menu-bar__tools .menu-bar__tool {
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------------ icons */

/* The Top Navigation's icons, between the title and the button. The bar has them at the size of a pointer;
   on a phone they move into the menu, as a row at its foot (.menu-bar__panel-tools), where a thumb reaches. */
.menu-bar__tools {
  display: flex;
  align-items: center;
  flex: none;
  order: 15;
  gap: 2px;
  margin-inline-start: 8px;
}

.menu-bar__tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mb-icon, var(--mb-text, #111827));
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease;
}

/* Without this the display above wins over the hidden attribute (Info is hidden in a room with no text) */
.menu-bar__tool[hidden] {
  display: none;
}

.menu-bar__tool .menu-bar__tool-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* A toggle shows its other drawing while it is on: pause while it rotates, the way out of fullscreen */
.menu-bar__tool .menu-bar__tool-icon--alt {
  display: none;
}

.menu-bar__tool.is-on .menu-bar__tool-icon {
  display: none;
}

.menu-bar__tool.is-on .menu-bar__tool-icon--alt {
  display: block;
}

.menu-bar__tool:focus-visible {
  outline: 2px solid var(--mb-accent, #2b547d);
  outline-offset: -2px;
}

/* The language switcher is the browser's own list laid invisibly over its globe */
.menu-bar__lang {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* The list is invisible, so a focused one shows nothing; the globe takes the ring that engine accessibility.css
   gives every focused control (the buttons above get it from there too) */
.menu-bar__tool--lang:has(.menu-bar__lang:focus-visible) {
  outline: 3px solid #ffaa00;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(255, 170, 0, 0.4);
}

@media (hover: hover) {
  .menu-bar__tool:hover {
    background: var(--mb-hover, rgba(0, 0, 0, 0.06));
  }
}

/* -------------------------------------------------- logo, button, burger */

.menu-bar__logo {
  display: flex;
  align-items: center;
  flex: none;
  order: 30;
  padding: 6px 4px 6px 12px;
}

.menu-bar[data-logo='left'] .menu-bar__logo {
  order: -1;
  padding: 6px 12px 6px 4px;
}

.menu-bar__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: calc(var(--menu-bar-h) - 16px);
}

.menu-bar__cta {
  align-self: center;
  flex: none;
  order: 20;
  margin-inline-start: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--mb-cta-bg, var(--mb-accent, #2b547d));
  color: var(--mb-cta-text, #ffffff);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.menu-bar__cta:hover {
  filter: brightness(1.1);
}

.menu-bar__cta:focus-visible {
  outline: 2px solid var(--mb-accent, #2b547d);
  outline-offset: 2px;
}

/* The room's name in a band under the strip (Show Room Title): on a phone only */
.menu-bar__title-band {
  display: none;
}

/* The room's name as a button that opens the menu (Mobile Navigation > Top Bar Features > Scene Title Dropdown): on a phone only */
.menu-bar__title-button {
  display: none;
}

/* The phone's own icons (Mobile Navigation > Top Bar Features), beside the menu button: on a phone only */
.menu-bar__phone-tools {
  display: none;
  align-items: center;
  flex: none;
  order: 35;
  gap: 0;
  margin-inline-start: auto;
}

.menu-bar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  order: 40;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0 10px;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-bar__burger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 768px) {
  .menu-bar__inner {
    padding: 0 6px 0 12px;
  }

  .menu-bar__list,
  .menu-bar .menu-bar__tools,
  .menu-bar .menu-bar__cta {
    display: none;
  }

  .menu-bar__burger {
    display: flex;
  }

  .menu-bar__phone-tools {
    display: flex;
  }

  /* The band: the bar's own colour seen through a little more, under the strip and over the top of the panorama. The strip
     keeps its height, and the panorama starts under the strip, so it is the panorama that shows through the band. */
  .menu-bar--title-band {
    height: 48px;
  }

  .menu-bar--title-band .menu-bar__title {
    display: none;
  }

  /* the logo is sized from the room kept for the bar, which the band has made taller than the strip */
  .menu-bar--title-band .menu-bar__logo img {
    max-height: 32px;
  }

  .menu-bar__title-band {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    background: var(--mb-bg, #ffffff);
    background: color-mix(in srgb, var(--mb-bg, #ffffff) 72%, transparent);
    -webkit-backdrop-filter: var(--mb-bar-blur, none);
    backdrop-filter: var(--mb-bar-blur, none);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: var(--mb-transform, uppercase);
  }

  .menu-bar__band-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-bar__title-band .menu-bar__title-button {
    flex: 0 1 auto;
    height: 30px;
    font-size: 13px;
  }

  body.has-menu-bar.menu-bar-title-band:not(.menu-bar-overlay) #pano {
    top: calc(48px * var(--mb-keep, 1));
    height: calc(100% - 48px * var(--mb-keep, 1));
  }

  /* Side Nav - List Menu unticked for a phone: no menu button */
  .menu-bar--no-phone-menu .menu-bar__burger {
    display: none;
  }

  /* Scene Title Dropdown: the name with an arrow, in the plain name's place, taking the room the strip has left */
  .menu-bar--title-opens .menu-bar__title {
    display: none;
  }

  .menu-bar__title-button {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 1 1 0;
    order: 10;
    gap: 4px;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: start;
    text-transform: var(--mb-transform, uppercase);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-bar__title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-bar__title-chevron {
    flex: none;
    width: 16px;
    height: 16px;
  }

  /* with icons before it the menu button follows them; the icons take the push to the far end */
  .menu-bar--has-phone-tools .menu-bar__burger {
    margin-inline-start: 0;
  }

  /* ...and the icons and the menu button keep their room in the strip: the room's name gives way first (it can go to nothing), then
     the logo is drawn smaller, so a strip with every icon still ends with its menu button */
  .menu-bar--has-phone-tools .menu-bar__title {
    padding: 0 4px;
  }

  .menu-bar--phone-tools-many .menu-bar__title {
    display: none;
  }

  .menu-bar--has-phone-tools .menu-bar__logo {
    flex: 0 1 auto;
    min-width: 40px;
  }

  .menu-bar--has-phone-tools .menu-bar__logo img {
    min-width: 0;
    max-width: 100%;
    object-fit: contain;
  }

  .menu-bar__logo,
  .menu-bar[data-logo='left'] .menu-bar__logo {
    order: -1;
    padding: 6px 8px 6px 0;
  }

  /* The strip is [logo] room title ......... [menu], the title reading from the left */
  .menu-bar__title {
    padding: 0 8px;
    text-align: start;
  }
}

/* The drawer holds one list per level; a level slides over the one before it */
.menu-bar__drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 10001;
  visibility: hidden;
  pointer-events: none;
  color: var(--mb-text, #111827);
  font-family: inherit;
  transition: visibility 0s linear 0.3s;
}

.menu-bar__drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.menu-bar__backdrop {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.menu-bar__drawer.is-open .menu-bar__backdrop {
  opacity: 1;
}

.menu-bar__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(91vw, 380px);
  background: var(--mb-panel-bg, var(--mb-bg, #ffffff));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}

.menu-bar__drawer.is-open .menu-bar__panel {
  transform: none;
}

.menu-bar__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: 52px;
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--mb-line);
}

.menu-bar__panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.menu-bar__close {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-bar__close-line {
  position: absolute;
  top: 50%;
  inset-inline-start: 11px;
  inset-inline-end: 11px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.menu-bar__close-line + .menu-bar__close-line {
  transform: rotate(-45deg);
}

.menu-bar__levels {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.menu-bar__level {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--mb-panel-bg, var(--mb-bg, #ffffff));
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform 0.28s ease,
    visibility 0s linear 0.28s;
  -webkit-overflow-scrolling: touch;
}

.menu-bar__level.is-current {
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.menu-bar__level.is-behind {
  transform: translateX(-30%);
}

.menu-bar__level-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-bar__row {
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mb-line);
  font-size: 16px;
  text-transform: none;
}

.menu-bar__row.is-current,
.menu-bar__row.is-current-branch {
  color: var(--mb-accent, #2b547d);
}

.menu-bar__row.is-current {
  font-weight: 600;
}

.menu-bar__back {
  justify-content: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.05);
}

.menu-bar__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin-inline-end: 4px;
  border-top: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg);
}

.menu-bar__chevron--back {
  margin: 0 0 0 4px;
  transform: rotate(-135deg);
}

.menu-bar__panel-tools {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--mb-line);
}

.menu-bar__panel-tools .menu-bar__tool {
  width: 44px;
  height: 44px;
}

.menu-bar__panel-foot {
  flex: none;
  padding: 16px 18px;
  border-top: 1px solid var(--mb-line);
}

.menu-bar__cta--drawer {
  display: block;
  order: 0;
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .menu-bar__list > .menu-bar__item > .menu-bar__link,
  .menu-bar__list > .menu-bar__item > .menu-bar__link::after,
  .menu-bar__tool,
  .menu-bar__backdrop,
  .menu-bar__panel,
  .menu-bar__level {
    transition: none;
  }
}

/* A full-screen dialog of the tour (all panos, floor plan) covers the bar instead of sitting on it */
body:has(.glass-modal:not(.hidden)) .menu-bar,
body:has(.glass-modal:not(.hidden)) .menu-bar__drawer {
  z-index: 1500;
}

/* ------------------------------------------------------- layout offsets
   Everything the theme anchors to the top of the window is moved down by the bar's height
   (--menu-bar-h is 0 without the bar). Each selector is the theme's own, plus body.has-menu-bar,
   and this file loads last, so these win. Keep the pairs with .top-bar-fixed: it is a body class
   the theme sets when the title bar spans the window, and it changes the resting offsets. */

/* The panorama starts below the bar, unless the owner asked for it behind (menu-bar-overlay) or the bar
   can be seen through (--mb-keep is 0 then, 1 otherwise): glass shows what is behind it, and the rest of
   the glass interface sits over the panorama. */
body.has-menu-bar:not(.menu-bar-overlay) #pano {
  top: calc(var(--menu-bar-h) * var(--mb-keep, 1));
  height: calc(100% - var(--menu-bar-h) * var(--mb-keep, 1));
}

/* Title bar and the floating icons shown without it */
body.has-menu-bar #topBar {
  top: calc(15px + var(--menu-bar-h));
}

body.has-menu-bar.top-bar-fixed #topBar {
  top: var(--menu-bar-h);
}

body.has-menu-bar #standaloneControls {
  top: calc(15px + var(--menu-bar-h));
}

/* Listed navigation (sidebar) and its toggle. The 60 px a fixed title bar takes only where one is drawn: top-bar-fixed
   says which kind of title bar the tour has, #topBar being in the page says it is shown (a gap under the bar otherwise, 2026-10-29). */
body.has-menu-bar .glass-sidebar {
  top: var(--menu-bar-h);
}

body.has-menu-bar.top-bar-fixed:has(#topBar) .glass-sidebar {
  top: calc(60px + var(--menu-bar-h));
}

body.has-menu-bar #sidebarToggleWrapper {
  top: calc(20px + var(--menu-bar-h));
}

body.has-menu-bar.top-bar-fixed:has(#topBar) #sidebarToggleWrapper {
  top: calc(80px + var(--menu-bar-h));
}

body.has-menu-bar #sidebarToggleWrapper.toggle-style-arrow.toggle-pos-top {
  top: calc(20px + var(--menu-bar-h)) !important;
}

body.has-menu-bar.top-bar-fixed:has(#topBar) #sidebarToggleWrapper.toggle-style-arrow.toggle-pos-top {
  top: calc(80px + var(--menu-bar-h)) !important;
}

@media (min-width: 768px) {
  body.has-menu-bar .nav-style-flyout .category-scenes {
    top: var(--menu-bar-h);
  }

  body.has-menu-bar.top-bar-fixed:has(#topBar) .nav-style-flyout .category-scenes {
    top: calc(60px + var(--menu-bar-h));
  }
}

/* On-screen view controls and the gallery toggle */
body.has-menu-bar.ctrl-top-right .view-controls,
body.has-menu-bar.ctrl-top-left .view-controls {
  top: calc(80px + var(--menu-bar-h));
}

body.has-menu-bar.ctrl-top-middle .view-controls {
  top: calc(20px + var(--menu-bar-h));
}

body.has-menu-bar:has(#topBar).ctrl-top-middle .view-controls {
  top: calc(96px + var(--menu-bar-h));
}

body.has-menu-bar.top-bar-fixed:has(#topBar).ctrl-top-middle .view-controls {
  top: calc(81px + var(--menu-bar-h));
}

body.has-menu-bar.ctrl-top-right #v2GalleryToggle,
body.has-menu-bar.ctrl-top-left #v2GalleryToggle {
  top: calc(80px + var(--menu-bar-h));
}

/* Minimap in a top corner */
body.has-menu-bar .minimap-top-left,
body.has-menu-bar .minimap-top-right {
  top: calc(70px + var(--menu-bar-h));
}