/* =========================================
   LEFT SIDEBAR NAVIGATION & CATEGORIES
   ========================================= */

:root {
  --sidebar-width: 300px; /* Default Desktop */
}
@media (min-width: 1440px) {
  :root {
    --sidebar-width: 380px; /* Expands on 2K monitors */
  }
}
@media (min-width: 2560px) {
  :root {
    --sidebar-width: 480px; /* Expands massively on 4K monitors */
  }
}

/* Modifier: Narrow Width */
body.sidebar-width-narrow {
  --sidebar-width: 250px;
}
@media (min-width: 1440px) {
  body.sidebar-width-narrow {
    --sidebar-width: 320px;
  }
}
@media (min-width: 2560px) {
  body.sidebar-width-narrow {
    --sidebar-width: 400px;
  }
}

/* Modifier: Wide Width */
body.sidebar-width-wide {
  --sidebar-width: 350px;
}
@media (min-width: 1440px) {
  body.sidebar-width-wide {
    --sidebar-width: 440px;
  }
}
@media (min-width: 2560px) {
  body.sidebar-width-wide {
    --sidebar-width: 560px;
  }
}

#sidebarToggleWrapper {
  position: absolute;
  top: 20px;
  z-index: 30; /* Over top bar if necessary */
}

body.top-bar-fixed #sidebarToggleWrapper {
  top: 80px;
}

#sidebarToggleWrapper.sidebar-left-toggle {
  left: 20px;
}

#sidebarToggleWrapper.sidebar-right-toggle {
  right: 20px;
}

#sidebarToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--side-nav-text, #fff);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

#sidebarToggle:hover {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.25));
  transform: scale(1.05);
}

#sidebarToggle:active {
  transform: scale(0.95);
}

/* Dynamic Collision Avoidance for Top Bar (Mobile)
   A floating title bar (small, standard, wide or full) is centred with `left: 50%` and a -50% translate, and gets its width from
   body.top-bar-<width> #topBar. Beside the side menu's button on a phone it starts 80px in from the button's edge, as wide as its own
   width says but no wider than what is left of the screen, and the centring is taken off. The selector is heavier than the body's
   width rules, so the cap holds. Seen 2026-10-12 at 390px: with only `left: 80px` the bar was still centred on that point, 350px
   wide, and ran from -95px to 255px (and a right-hand button had the bar over it).
   Not where the button is not there: the phone's own navigation (has-mobile-nav) and a menu that is only for phones
   (mobile-only-sidebar) hide it, and the bar is then centred as its width says. A fixed bar is above the button (body.top-bar-fixed
   puts the button 80px down), and the phone-only bar places itself (top-bar.css). */
@media (max-width: 767px) {
  body:not(.top-bar-fixed):not(.has-mobile-nav):not(.mobile-only-sidebar) .sidebar-left-toggle ~ #topBar {
    left: 80px;
    right: auto;
    max-width: calc(100% - 100px);
    margin-left: 0;
    transform: none;
  }
  body:not(.top-bar-fixed):not(.has-mobile-nav):not(.mobile-only-sidebar) .sidebar-right-toggle ~ #topBar {
    left: auto;
    right: 80px;
    max-width: calc(100% - 100px);
    margin-right: 0;
    transform: none;
  }
}

.glass-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  max-width: 100vw;
  background: var(--primary-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Action Bar Fixed Strip Avoidance */
body:has(.v2-action-bar.layout-fixed) .glass-sidebar,
body:has(.v2-action-bar.layout-fixed) .category-scenes {
  bottom: 65px;
}

/* Prevent overlap with Fixed Top Bar */
body.top-bar-fixed .glass-sidebar {
  top: 60px;
}

/* Position Modifiers */
.sidebar-left {
  left: 0;
  border-right: 1px solid var(--glass-border);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  transform: translateX(0);
}
.sidebar-left.sidebar-closed {
  transform: translateX(-100%);
}

body.sidebar-floating .sidebar-left.sidebar-closed {
  transform: translateX(calc(-100% - 34px)); /* Accounts for margin plus slight shadow clearance */
}

.sidebar-right {
  right: 0;
  border-left: 1px solid var(--glass-border);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  transform: translateX(0);
}
.sidebar-right.sidebar-closed {
  transform: translateX(100%);
}

body.sidebar-floating .sidebar-right.sidebar-closed {
  transform: translateX(calc(100% + 34px));
}

.sidebar-header {
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--glass-border);
}

.sidebar-title {
  font-size: 1.25em;
  font-weight: 600;
  color: var(--side-nav-text, #fff);
  margin: 0;
  letter-spacing: 0.5px;
}

.sidebar-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-main, #fff);
  background: var(--glass-border);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.sidebar-close:hover {
  transform: scale(1.05);
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.25));
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  list-style: none;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.95) transparent;
}
.sidebar-content:hover {
  scrollbar-color: var(--accent-dark, rgba(0, 0, 0, 0.5)) transparent;
}

.sidebar-content::-webkit-scrollbar {
  width: 6px;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
}
.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark, rgba(0, 0, 0, 0.5));
}

/* Category Groups */
.category-group {
  margin: 0;
  padding: 0;
  position: relative;
  /* Hover bridge: pad the physical box model so there is no gap for the mouse to fall into */
  padding-bottom: 6px;
  z-index: 10;
}

.category-group.expanded {
  z-index: 20; /* Keep open menus above closed menus */
}

.category-group:hover {
  z-index: 30; /* Actively hovered menus must render above EVERYTHING else */
}

/* The name of the Top Nav Bar - Multi Menu's item whose groups and rooms the list is showing (side-nav.js, a narrowed list) */
.sidebar-scope-heading {
  list-style: none;
  padding: 4px 16px 10px;
  color: var(--side-nav-text, #fff);
  /* bold and near the size of the rows under it (Ben, 2026-10-11: "can this be bold and a bit bigger"; it was 0.8em, 600, faded) */
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* The phone's way back from a narrowed list to every item of the bar, and those items as rows (side-nav.js: scopeBack,
   showIndex). On a wider screen the bar itself is there, so the way back is not shown. */
.sidebar-scope-back {
  display: none;
  list-style: none;
}
.sidebar-scope-back button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 60px 0 12px;
  border: 0;
  background: none;
  color: var(--side-nav-text-muted, rgba(255, 255, 255, 0.65));
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
.sidebar-top-row {
  list-style: none;
}
.sidebar-top-link,
.sidebar-top-link.sidebar-scene-link {
  display: flex;
  align-items: center;
  padding: calc(12px + var(--side-row-add, 0px)) 16px;
  color: var(--side-nav-text, #fff);
  font-size: 0.95em;
  font-weight: 500;
  text-decoration: none;
}
@media (max-width: 768px) {
  .sidebar-scope-back {
    display: block;
  }
}

/* A room of a group that is listed without its heading ("Not grouped" under an item of the Multi Menu): a row at the level of the
   groups' headings, in the menu's own text colour, so it does not read as part of the group above it */
.sidebar-flat-row .sidebar-scene-link {
  padding-inline-start: 16px;
  color: var(--side-nav-text, #fff);
  font-size: 0.95em;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + var(--side-row-add, 0px)) 16px;
  cursor: pointer;
  color: var(--side-nav-text, #fff);
  font-weight: 500;
  font-size: 0.95em;
  line-height: 1.4;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03); /* Subtle button feel */
  /* a light tint of the hover colour (the tour's highlight), so a group reads as a menu and not as one more room (Ben 2026-10-31: "The
     Keys" looked like the rooms under it); the line above stays for a browser without color-mix */
  background: color-mix(in srgb, var(--hover-bg-overlay, rgba(255, 255, 255, 0.15)) 30%, transparent);
  border-radius: 6px; /* Soft edges */
  /* (the hover background at once, as the rooms' rows) */
  transition: color 0.2s ease;
  user-select: none;
}

.category-header:hover {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.15)); /* Brighter on hover */
  color: var(--side-nav-text, #fff);
}

.category-icon {
  margin-inline-end: 12px;
  opacity: 0.7;
}

.category-chevron {
  opacity: 0.5;
}

.category-group.expanded .category-chevron {
  transform: rotate(180deg);
}

/* Nested Scenes Base: Standard Vertical Accordion */
.category-scenes {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
  /* the rooms of an open group: on the menu's own colour, unless the tour chose one for them (Side Nav - List Menu > Open Group
     Background: --side-nav-group-bg). It was a fifth of black, grey on a white menu; once the groups' own rows were tinted, Ben
     2026-10-31 asked for the rooms on the plain background */
  background: var(--side-nav-group-bg, transparent);
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-group.expanded .category-scenes {
  max-height: 2000px;
  transition: max-height 0.6s ease-in-out;
}

/* OVERRIDE: Horizontal Fly-out for Desktop */
@media (min-width: 768px) {
  .nav-style-flyout .category-scenes {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--bg-dark-hover);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    list-style: none;
    margin: 0;
    padding: 0 0 16px 0;
    overflow-y: auto;
    z-index: 49;

    /* Override accordion */
    max-height: none;

    /* Fly-out animation baseline (when hover is LOST) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Wait 150ms before fading out to bridge the gap between hovering different categories */
    transition:
      opacity 0.2s ease 0.15s,
      visibility 0s linear 0.35s;
  }

  /* Prevent overlap with Fixed Top Bar for Flyout Menus */
  body.top-bar-fixed .nav-style-flyout .category-scenes {
    top: 60px;
  }

  /* Fly-out Positioning Logic depending on Sidebar alignment */
  .nav-style-flyout.sidebar-left .category-scenes {
    left: var(--sidebar-width);
    border-right: 1px solid var(--glass-border);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  }

  .nav-style-flyout.sidebar-right .category-scenes {
    right: var(--sidebar-width);
    border-left: 1px solid var(--glass-border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }

  /* Reveal logic (when hover is GAINED) */
  .nav-style-flyout .category-group:hover .category-scenes,
  .lock-flyout-enabled .nav-style-flyout .category-group.expanded .category-scenes {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Immediately start showing */
    transition:
      opacity 0.1s ease 0s,
      visibility 0s linear 0s;
  }
}

/* Fly-out Menu Header Title */
.flyout-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

/* Hide flyout headers in accordion mode because titles are redundant */
.nav-style-accordion .flyout-header {
  display: none;
}

@media (max-width: 767px) {
  .flyout-header {
    display: none;
  }
}

.sidebar-scene-link {
  display: flex;
  align-items: center;
  padding: calc(10px + var(--side-row-add, 0px)) 16px calc(10px + var(--side-row-add, 0px)) 28px; /* Indented for sub-navigation */
  color: var(--side-nav-text-muted, rgba(255, 255, 255, 0.65));
  text-decoration: none;
  font-size: 0.9em;
  line-height: 1.4;
  /* the hover background comes and goes at once: faded, a fast pass over the list left a trail of rows lit, and the last one seemed to
     stay (Ben 2026-10-31) */
  transition: color 0.2s;
}

.sidebar-scene-link:hover {
  color: var(--side-nav-text, #fff);
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.15));
}

.sidebar-scene-link.active {
  color: var(--side-nav-text, #fff);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  /* the side menu's own accent where the tour set one (its hover colour); else the tour's highlight (the Secondary colour, indigo
     without one: --pal-accent, docs/colour-palette-plan.md); the indigo it always was on a page made before the palette */
  border-inline-start: 3px solid var(--side-nav-hover-color, var(--pal-accent, #6366f1));
  padding-inline-start: 25px; /* Offset the border width */
}

/* Pointed at, the room you are in looks like any room pointed at: the hover background behind the hover colour's text. Its own
   faint background stayed under the hover text, white on a pale menu that could not be read (Ben, 2026-10-30) */
.sidebar-scene-link.active:hover {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.15));
}

/* -----------------------------
   FLOATING ISLAND LAYOUT MODIFIER
------------------------------ */
body.sidebar-floating .glass-sidebar {
  /* Detach from edges and make it a pill shape */
  height: auto;
  max-height: calc(100% - 60px);
  margin: 30px;
  border-radius: 24px;
  background: transparent; /* Remove solid block background */
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hide the hamburger toggle when the detached sidebar is open to prevent overlapping */
body.sidebar-floating:has(.glass-sidebar:not(.sidebar-closed)) #sidebarToggleWrapper {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition:
    opacity 0.2s,
    transform 0.2s;
}

/* Base pill styling for panels/groups */
body.sidebar-floating .sidebar-header,
body.sidebar-floating .sidebar-footer,
body.sidebar-floating .category-group,
body.sidebar-floating #sidebarContent:not(:has(.category-group)) {
  background: var(--primary-bg, rgba(11, 25, 44, 0.7));
  backdrop-filter: blur(var(--glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

body.sidebar-floating .sidebar-header {
  border-radius: 20px;
  margin-bottom: 24px;
}

/* Remove hard borders between lines inside the pills */
body.sidebar-floating .sidebar-header,
body.sidebar-floating .sidebar-footer,
body.sidebar-floating .category-header {
  border-bottom: none;
}

body.sidebar-floating #sidebarContent {
  overflow-y: auto;
  max-height: calc(100vh - 150px);
  padding-inline-end: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.95) transparent;
}
body.sidebar-floating #sidebarContent:hover {
  scrollbar-color: var(--accent-dark, rgba(0, 0, 0, 0.5)) transparent;
}

body.sidebar-floating #sidebarContent::-webkit-scrollbar {
  width: 6px;
}

body.sidebar-floating #sidebarContent::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
}
body.sidebar-floating #sidebarContent::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark, rgba(0, 0, 0, 0.5));
}

body.sidebar-floating .category-group {
  padding-bottom: 0; /* Remove hover bridge padding */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

body.sidebar-floating .category-group:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

body.sidebar-floating .category-group.expanded {
  background: rgba(255, 255, 255, 0.05); /* Highlight active groups slightly */
}

/* Expand Sidebar to 90% width on Mobile */
@media (max-width: 768px) {
  :root,
  body.sidebar-width-narrow,
  body.sidebar-width-wide {
    --sidebar-width: 90vw !important;
  }
}

/* On a phone the menu has no heading row (no "Menu"), and it does have its close button, at its top right corner, whatever toggle the
   design chose: every panel that opens over the tour on a phone has a cross there (Ben, 2026-10-11; the whole header, cross included,
   was hidden, and the only way out was the bar's menu button). A menu with no logo at the top starts its list under the cross. */
@media (max-width: 768px) {
  .glass-sidebar .sidebar-header {
    display: block !important;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  .glass-sidebar .sidebar-header .sidebar-title {
    display: none;
  }
  .glass-sidebar .sidebar-close,
  #fixedSidebar.toggle-style-arrow .sidebar-close {
    display: flex !important;
    /* a size a finger can press */
    top: 12px;
    inset-inline-end: 12px;
    width: 44px;
    height: 44px;
  }
  .glass-sidebar:not(:has(.sidebar-logo-top)) .sidebar-content {
    padding-top: 64px;
  }

  /* The menu ends above the bar at the foot of a phone (media-window.js says how tall the bar is), so nothing of it is under the bar */
  .glass-sidebar {
    padding-bottom: var(--mobile-bottom-nav-height, 0px);
  }
}

/* A link at the menu's foot that the phone's bottom bar has an icon for is left out there, and so is a foot with nothing left in it
   (side-nav.js) */
.glass-sidebar .sidebar-btn-allpanos.in-bottom-bar,
.glass-sidebar .sidebar-footer.foot-empty {
  display: none !important;
}

/* Force hide the desktop standalone sidebar toggle if sidebar is only meant for mobile */
body.mobile-only-sidebar #sidebarToggleWrapper {
  display: none !important;
}

/* Sidebar Brand Logo Styling */
.sidebar-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.sidebar-logo-container.sidebar-logo-top {
  border-bottom: none;
}

.sidebar-logo-container.sidebar-logo-bottom {
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  margin-top: auto;
}

/* Floating variant adjustments */
body.sidebar-floating .sidebar-logo-container {
  background: var(--primary-bg, rgba(11, 25, 44, 0.7));
  backdrop-filter: blur(var(--glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

body.sidebar-floating .sidebar-logo-container.sidebar-logo-top {
  margin-bottom: 16px;
}

body.sidebar-floating .sidebar-logo-container.sidebar-logo-bottom {
  margin-top: 12px;
}

.sidebar-logo-img {
  max-width: 85%;
  max-height: 90px;
  object-fit: contain;
  display: block;
}

/* The logo at the top of the side menu stands clear of the top edge and of the menu's close button beside it (Ben, 2026-10-11: a wide
   logo began 20 px from the top and ran up to the button): more room above it, and the room the button takes kept free on both sides,
   so the logo stays in the middle and uses all the width that is left. With the arrow toggle there is no close button to keep clear of.
   The floating menu's logo is a card of its own and is left as it was. */
body:not(.sidebar-floating) .glass-sidebar .sidebar-logo-container.sidebar-logo-top {
  /* Bigger, the same day: the logo has the row under the close button to itself, so it takes the menu's whole width (it shared the
     button's row, and gave up the button's width on both sides to stay in the middle) */
  padding: 60px 36px 18px;
}
body:not(.sidebar-floating) .glass-sidebar .sidebar-logo-container.sidebar-logo-top .sidebar-logo-img {
  max-width: 100%;
  max-height: 110px;
}
body:not(.sidebar-floating) .glass-sidebar.toggle-style-arrow .sidebar-logo-container.sidebar-logo-top {
  padding: 36px 36px 18px;
}

/* No word above the list ("Show Menu Title" off): the heading's row is given to the rooms. The close button is the sidebar's own and
   stays at its corner, so a menu with no logo at the top starts its list under the button. The Single Page style still shows the
   heading while a group is open, because there it is the group's name. The floating menu's heading is a card of its own: it goes whole. */
.glass-sidebar.no-menu-title:not(:has(.single-page-wrapper.sub-menu-active)) .sidebar-title {
  display: none;
}
.glass-sidebar.no-menu-title:not(:has(.single-page-wrapper.sub-menu-active)) .sidebar-header {
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
  overflow: visible;
}
/* 56px: the button ends at 52 (Ben, 2026-10-11: "when hiding the menu title can the margin be a bit smaller so the nav is closer
   to the top"; it was 64) */
body:not(.sidebar-floating)
  .glass-sidebar.no-menu-title:not(.toggle-style-arrow):not(:has(.sidebar-logo-top))
  .sidebar-content {
  padding-top: 56px;
}
/* A narrowed list starts with the name of the bar's item (.sidebar-scope-heading), which is short and at the left: it takes the
   line of the close button, beside it, and the rooms start right under it */
body:not(.sidebar-floating)
  .glass-sidebar.no-menu-title:not(.toggle-style-arrow):not(:has(.sidebar-logo-top)):not(
    :has(.single-page-wrapper.sub-menu-active)
  )
  .sidebar-content:has(.sidebar-scope-heading) {
  padding-top: 16px;
}
body:not(.sidebar-floating)
  .glass-sidebar.no-menu-title:not(.toggle-style-arrow):not(:has(.sidebar-logo-top))
  .sidebar-scope-heading {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 60px 0 16px;
  margin-bottom: 8px;
}

/* =========================================
   SINGLE PAGE NAVIGATION & SLIDING PANELS
   ========================================= */
.nav-style-single-page .sidebar-content {
  overflow: hidden !important; /* Hide horizontal scrollbar during transitions */
  position: relative;
  padding: 0;
}

.single-page-wrapper {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.single-page-wrapper.sub-menu-active {
  transform: translateX(-50%);
}

.single-page-main-menu,
.single-page-sub-menu-container {
  width: 50%;
  flex-shrink: 0;
  height: 100%;
  box-sizing: border-box;
}

.single-page-main-menu {
  overflow-y: auto;
  padding: 16px 0;
  height: calc(100vh - 160px); /* Account for header/footer margins */
}

/* Sidebar avoid overlap when Top Bar is fixed */
body.top-bar-fixed .single-page-main-menu,
body.top-bar-fixed .single-page-sub-menu-container {
  height: calc(100vh - 220px);
}

.single-page-sub-menu-container {
  position: relative;
  height: calc(100vh - 160px);
}

.single-page-sub-menu {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.single-page-sub-menu.active-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Category lists */
.single-page-category-list,
.single-page-scenes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.single-page-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--side-row-add, 0px)) 20px;
  cursor: pointer;
  color: var(--side-nav-text, #fff);
  font-weight: 500;
  font-size: 0.95em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.2s ease;
  user-select: none;
}

.single-page-category-item:hover {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.15));
}

.category-chevron-right {
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.single-page-category-item:hover .category-chevron-right {
  transform: translateX(3px);
  opacity: 0.8;
}

/* Back Button */
.single-page-back-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(14px + var(--side-row-add, 0px)) 20px;
  cursor: pointer;
  color: var(--side-nav-text, #fff);
  font-weight: 500;
  font-size: 0.9em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
  user-select: none;
}

.single-page-back-btn:hover {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.1));
}

.back-icon {
  transition: transform 0.2s ease;
}

.single-page-back-btn:hover .back-icon {
  transform: translateX(-3px);
}

.single-page-scenes-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.single-page-scenes-list .sidebar-scene-link {
  padding-inline-start: 20px; /* Reset indentation */
}

/* Floating variant overrides for single-page style */
body.sidebar-floating .nav-style-single-page .single-page-main-menu {
  background: var(--primary-bg, rgba(11, 25, 44, 0.7));
  backdrop-filter: blur(var(--glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  margin: 0 16px;
  height: auto;
  max-height: calc(100vh - 200px);
}

body.sidebar-floating .nav-style-single-page .single-page-sub-menu {
  background: var(--primary-bg, rgba(11, 25, 44, 0.7));
  backdrop-filter: blur(var(--glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  margin: 0 16px;
  overflow: hidden;
}

/* Custom Toggle Styles for Arrow Option */
#sidebarToggleWrapper.toggle-style-arrow {
  position: fixed !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), top 0.3s ease !important;
}

#sidebarToggleWrapper.toggle-style-arrow #sidebarToggle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

#sidebarToggleWrapper.toggle-style-arrow #sidebarToggle:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  transform: scale(1.1) !important;
}

#sidebarToggleWrapper.toggle-style-arrow #sidebarToggle:active {
  transform: scale(0.95) !important;
}

/* Toggle Arrow Positions */
#sidebarToggleWrapper.toggle-style-arrow.toggle-pos-top {
  top: 20px !important;
}
body.top-bar-fixed #sidebarToggleWrapper.toggle-style-arrow.toggle-pos-top {
  top: 80px !important;
}

#sidebarToggleWrapper.toggle-style-arrow.toggle-pos-middle {
  top: 50% !important;
}

/* Left Sidebar - Base & Open */
#sidebarToggleWrapper.toggle-style-arrow.sidebar-left-toggle {
  left: calc(var(--sidebar-width) - 22px) !important;
  transform: translateX(0) !important;
}
#sidebarToggleWrapper.toggle-style-arrow.sidebar-left-toggle.toggle-pos-middle {
  transform: translateY(-50%) translateX(0) !important;
}

/* Left Sidebar - Closed State Position */
#sidebarToggleWrapper.toggle-style-arrow.sidebar-left-toggle.toggle-closed {
  transform: translateX(calc(-1 * var(--sidebar-width))) !important;
}
#sidebarToggleWrapper.toggle-style-arrow.sidebar-left-toggle.toggle-closed.toggle-pos-middle {
  transform: translateY(-50%) translateX(calc(-1 * var(--sidebar-width))) !important;
}

/* Right Sidebar - Base & Open */
#sidebarToggleWrapper.toggle-style-arrow.sidebar-right-toggle {
  right: calc(var(--sidebar-width) - 22px) !important;
  transform: translateX(0) !important;
}
#sidebarToggleWrapper.toggle-style-arrow.sidebar-right-toggle.toggle-pos-middle {
  transform: translateY(-50%) translateX(0) !important;
}

/* Right Sidebar - Closed State Position */
#sidebarToggleWrapper.toggle-style-arrow.sidebar-right-toggle.toggle-closed {
  transform: translateX(var(--sidebar-width)) !important;
}
#sidebarToggleWrapper.toggle-style-arrow.sidebar-right-toggle.toggle-closed.toggle-pos-middle {
  transform: translateY(-50%) translateX(var(--sidebar-width)) !important;
}

/* Hide close ("X") icon when toggle style is Arrow */
#fixedSidebar.toggle-style-arrow .sidebar-close {
  display: none !important;
}

/* Ensure Interface Icon Color is applied to all sidebar icons and buttons */
.category-chevron,
.category-chevron-right,
.back-icon,
.sidebar-btn-icon,
.category-icon,
#sidebarToggle svg,
.sidebar-close svg,
.flyout-close svg {
  color: var(--icon-color, currentColor) !important;
}

/* Link Hover Color support */
.category-header:hover,
.sidebar-scene-link:hover,
.single-page-category-item:hover,
.single-page-back-btn:hover {
  color: var(--side-nav-hover-color, var(--side-nav-text, #fff)) !important;
}

.category-header:hover svg,
.sidebar-scene-link:hover svg,
.single-page-category-item:hover svg,
.single-page-back-btn:hover svg {
  color: var(--side-nav-hover-color, var(--icon-color, currentColor)) !important;
  stroke: var(--side-nav-hover-color, var(--icon-color, currentColor)) !important;
}

/* No bar across the top at all (the Title Bar is switched off and there is no Top Multi Menu Bar): there is nothing to keep clear of, so the
   sidebar, its flyouts and its toggle start at the top, as they do beside a floating title bar. `top-bar-fixed` only says which KIND of title
   bar the tour has; whether one is drawn is #topBar being in the page. The sidebar used to begin 60 px down with the panorama showing in
   the gap above it (Ben, 2026-10-11, the hotel look). */
body.top-bar-fixed:not(.has-menu-bar):not(:has(#topBar)) .glass-sidebar {
  top: 0;
}
body.top-bar-fixed:not(.has-menu-bar):not(:has(#topBar)) #sidebarToggleWrapper {
  top: 20px;
}
body.top-bar-fixed:not(.has-menu-bar):not(:has(#topBar)) #sidebarToggleWrapper.toggle-style-arrow.toggle-pos-top {
  top: 20px !important;
}
body.top-bar-fixed:not(.has-menu-bar):not(:has(#topBar)) .single-page-main-menu,
body.top-bar-fixed:not(.has-menu-bar):not(:has(#topBar)) .single-page-sub-menu-container {
  height: calc(100vh - 160px);
}
@media (min-width: 768px) {
  body.top-bar-fixed:not(.has-menu-bar):not(:has(#topBar)) .nav-style-flyout .category-scenes {
    top: 0;
  }
}

/* Line Height (the Side Nav - List Menu panel): the rows of the list as they always were, or a few pixels less or more above and
   below each. side-nav.js names the choice on the menu; every row's own space is its usual one plus this, so a page made before
   the choice (no name on its menu) is drawn as it was. */
.glass-sidebar.rows-small {
  --side-row-add: -4px;
}
.glass-sidebar.rows-large {
  --side-row-add: 4px;
}