:root{
  --die-scale: 0.175;
  --nav-h: 65px;
  --focus: 65%;
  --rest: calc((100% - var(--focus)) / 2);
  --ease: cubic-bezier(.25,.8,.25,1);

  --scrim-opacity: 0.80;
  --titlebox-bg: var(--primary);

  /* NEW: notification color for avatar dot (overridable in themes) */
  --notif: #ff4d4f;
  --inset-gap: 36px;        /* even spacing above (under header) & below */
  --header-offset: 14px;    /* matches your .panel-titlebox top */

  --corner-size: 72px;        /* ornament size */
  --corner-size-bottom: 42px;
  --corner-inset: 0px;        /* distance from top/bottom */
  --corner-overhang: 0px;    /* how far OUTSIDE the border to sit */
  --corner-inner-offset: 2px; /* tiny inboard offset for the inset corners */
  --corner-inner-img: url("../images/bottomDragonCorner.png");
  --corner-inner-img-reversed: url("../images/bottomDragonCornerReversed.png");
  --corner-outer-img: url("../images/topBorderDragon.png");
  --mi-pad: 12px; 

  --tl-nudge-x: 48px;  /* move right by 125 */
  --tl-nudge-y: -47px;  /* move up by 270  */

  --tr-nudge-x: 48px;   /* + = farther to the RIGHT (more outside) */
  --tr-nudge-y: -47px;  /* + = farther UP, − = down (same semantics as TL) */

  --die-slot: 50px;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body.no-body-scroll { overflow: hidden; }


.loginWelcomeUser {
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--primary);
}

.loginMemberStatus {
  margin-left: 10px;
  font-size: 0.8rem;
  line-height: 32px;
  min-height: 32px;
  max-height: 32px;
}

.pLink:hover {
  background-color: rgb(from var(--primary) r g b / 0.55);
  color: var(--text-50) !important;
  border: 1px solid rgb(from var(--primary) r g b / 0.75);
  line-height: 20px;
  text-decoration: none;
}


.opentip-container, .opentip {
    z-index: 1050 !important; /* A value higher than the Bootstrap fixed-top navbar */
}

.parallax-container{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../images/maps/map1.webp");
  background-repeat: repeat;
  background-size: 110%;
  z-index: -1;                     /* key: behind main content */
  pointer-events: none;            /* key: never intercept clicks */
  will-change: background-position;
  /* object-fit has no effect on a DIV, remove it */
}

/* Remove the stacking bump from the pseudo-element */
.parallax-container::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0); /* keep tint if you want */
  pointer-events: none;
  /* no z-index here */
}

/* Your <main> uses class="right-main", not .main — give it a paint layer */
.right-main{
  position: relative;
  z-index: 0;   /* any non-negative works; just above -1 background */
}

.right-main.container-fluid { max-width: 90% !important; }

.mainContentPanel {
  max-width: 1705px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: rgb(from var(--background-200) r g b / 0.875);
  /* height: calc(100vh - 80px); */
  /* overflow: hidden; */
}

.scrollableDiv {
  height: 100vh;
  width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;           /* avoid layout shift when bar appears */
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
  overscroll-behavior: contain;       /* stop scroll chaining */
}

/* ---------- Firefox ---------- */
.scrollableDiv {
  /* thin | auto | none */
  scrollbar-width: thin;
  /* thumb color, track color */
  scrollbar-color: var(--primary-600) var(--background-200);
}

/* ---------- WebKit (Chrome, Edge, Safari, Opera) ---------- */
.scrollableDiv::-webkit-scrollbar {
  width: 10px;        /* vertical bar width */
  height: 10px;       /* horizontal bar height */
}

.scrollableDiv::-webkit-scrollbar-track {
  background: var(--background-200);
  border-radius: 8px;
}

.scrollableDiv::-webkit-scrollbar-thumb {
  background-color: var(--primary-600);
  border-radius: 8px;
  border: 2px solid var(--background-200); /* creates a gap around thumb */
}

.scrollableDiv::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-500);
}

.scrollableDiv::-webkit-scrollbar-thumb:active {
  background-color: var(--primary-700);
}

.scrollableDiv::-webkit-scrollbar-corner {
  background: transparent; /* clean corner when both bars show */
}






#leftMenuBtn .hamburger,
#leftMenuBtn .close-x,
#leftMenuBtn .hamburger::before,
#leftMenuBtn .close-x::before,
#leftMenuBtn .hamburger::after,
#leftMenuBtn .close-x::after{
  display: none !important;
  content: none !important;
}
#leftMenuBtn.btn-open .hamburger,
#leftMenuBtn.btn-closed .hamburger,
#leftMenuBtn.btn-open .close-x,
#leftMenuBtn.btn-closed .close-x{
  display: none !important;
}

#leftMenuBtn{
  position: relative;
  flex: 0 0 var(--die-slot);   /* reserve space in the row */
  height: 48px;                /* approximate navbar height; adjust as needed */
  display:flex;
  align-items:center;
}

/* Keep the dice visually centered within its slot */
#leftMenuBtn .cube-container{
  position:absolute;
  inset: 0;                    /* fill the slot */
  display:flex;
  align-items:center;
  justify-content:center;
  /* if your cube uses transforms, leave them as-is */
}

/* Ensure the dice doesn't cover the brand text if they overlap at all */
#leftMenuBtn{ z-index: 1; }
.brand-wrap{ z-index: 2; }

/* Small gap between dice and brand */
.brand-wrap{ margin-left: 8px; }


/* two-line brand */
.navbar-brand{
  padding: 0;
  margin: 0;
  text-decoration: none;
  color: var(--background);
}

/* title + subline sizes (responsive but steady) */
.brand-title{
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.05;
  color: var(--background);
}
.brand-sub{
  font-family: "Faculty Glyphic", system-ui, sans-serif; /* or your body font */
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 2px;
  color: var(--background-300);
}
.brand-tagline{
  margin-top:4px;
  font-size: clamp(10px, 1vw, 14px);
  line-height:1.1;
  max-width: min(40vw, 420px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* trims gracefully if too long */
  font-style: italic;
  margin-left: 10px;
    color: var(--primary-300);

}

/* keep the brand text crisp over translucent navbar */
.navbar{ color: var(--text); }




/* optional: on very narrow screens, gently reduce brand size */
@media (max-width: 520px){
  .brand-title{ display: none; }
  .brand-sub{ display: none; }
  .brand-tagline{ display:none; }

}

.blogbrand-title{
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.05;
  color: var(--background);
}
.blogbrand-sub{
  font-family: "Faculty Glyphic", system-ui, sans-serif; /* or your body font */
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 2px;
  color: var(--background-300);
}

.introDieClass {
  width: 100px;
}

@media (max-width: 520px){
  .blogbrand-title{ font-size: 0.85rem !important; }
  .blogbrand-sub{ font-size: 0.7rem !important; }
  .brand-date{ font-size: 0.75rem !important; }
  .introDieClass { width: 10px; }
}

/* #branding {
  .brandingTitle {
    position: absolute;
    top: 0;
    left: 100px;
    z-index: 9999;
    color: var(--text);
  }

  .brandingSubheader {
    position: absolute;
    top: 20;
    left: 120px;
    z-index: 9999;
    color: var(--text);
  }
} */

.menuBubble
{
   position: absolute;
   width: 325px;
   height: 50px;
   left: 10px;
   top: 75px;
   padding: 0px;
   background: #000000;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   z-index: 9999;
}

.menuBubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: #000000 transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -10px;
    left: 14px;
}

.menuBubbleText {
  position: relative;
  font-size: 1.1rem;
  color: var(--text-50);
  left: 20px;
  top: 12px;
}

/* Global */
*{ box-sizing: border-box; }
body{
  background: var(--background);
  color: var(--text);
  font-family: "Faculty Glyphic", sans-serif;
  font-weight: 300;
  margin-top: 72px;
}

/* Navbar adopts theme */
.navbar.navbar-dark{
  /* fallback if color-mix unsupported */
  background: var(--primary);
  /* 15% opacity look */
  background: rgb(from var(--primary) r g b / 0.875);
  color: var(--text);
  height: 65px;
}

.navbar .icon-btn{ color: var(--text); }

.navbar-brand{ color: var(--text); }

.navbar .container-fluid{
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* important: not center/space-between */
}

#rightHomeBtn{
  margin-left: auto;             /* pushes it to the right side */
  margin-right: 0.75rem;         /* space before rightMenuBtn */
  color: var(--background);
  cursor: pointer;
}

#rightMapBtn{
  margin-left: auto;             /* pushes it to the right side */
  margin-right: 0.75rem;         /* space before rightMenuBtn */
  color: var(--background);
  cursor: pointer;
}

/* right button stays at the far right */
#rightMenuBtn{ flex: 0 0 auto; }



/* Quick Menu (top-right) — force theme colors */
#quickMenu{
  position: fixed; top: 55px; right: 28px; z-index: 50001;
  width: 300px;
  /* fallback */
  background: var(--primary);
  /* 15% opacity look */
  background: var(--background);
  color: var(--text);
  border: 1px solid #000;
  border-radius: 0px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  display: none;
}
#quickMenu.open{ display:block; }

#quickMenu .qm-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: .75rem;
  padding:.6rem .8rem; border-bottom:1px solid #000;
}

/* NEW: profile cluster */
.qm-profile{
  display:flex; align-items:center; gap:.55rem;
}
.qm-avatar{
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; border: 1px solid #000; flex: 0 0 36px;
}
.qm-avatar img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.qm-avatar .qm-dot{
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--notif);
  border: 2px solid #000;
}

#quickMenu .qm-title{ font-weight:600; color: var(--text); margin-left:auto; }
#quickMenu .qm-close{
  appearance:none;border:0;background:transparent;color:var(--text);
  font-size:1.25rem; line-height:1; padding:.25rem;
}

#quickMenu .qm-body{ padding:.75rem .8rem; color: var(--text); }
#quickMenu a{
  display:block; padding:.5rem .6rem; text-decoration:none; color: var(--primary);
  border-radius:3px;
}
#quickMenu a:hover{ 
  /* background: rgb(from var(--primary) r g b / 0.15);
  color: var(--text);
  border: 1px dotted rgb(from var(--primary) r g b / 0.45); */
}

#themeSelect{
  background: var(--background);
  color: var(--text);
  border-color: #000;
}


/* Overlay region */
.site-inner{
  position: fixed; left:0; right:0; bottom:0; top: var(--nav-h);
  display:none; z-index: 99999; background: transparent;
}
.site-inner.open{ display:block; }

/* Accordion container */
.accordion-group{
  position: relative; list-style:none; margin:0; padding:0; height:100%;
}

/* Panels: contiguous, no gap/radius */
.accordion-group > li{
  position:relative; height:100%;
  color: var(--text);
  padding:0; border-radius:0; overflow:hidden;
}

/* Background images keep perspective */
.panel-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 50% 50%;
  pointer-events:none; user-select:none;
}
/* Hard-fix panel 3 */
.accordion-group > li:nth-child(3) .panel-bg{
  object-fit: cover !important; object-position: 50% 50% !important;
}

.panel-inset{ 
  overflow: visible; 
padding-top: 25px;
}

/* Scrim overlay:
   - uses theme background color
   - opacity fades to 0 on expanded panel (see rules below) */
/* Scrim overlay uses theme background; expanded panel fades to 0 via existing rules */
.panel-scrim{
  position:absolute; inset:0; z-index:1;
  background: var(--background);
  opacity: var(--scrim-opacity);
  transition: opacity 160ms ease;
}

/* Title box: 50% of --primary, 1px black border, larger text */
.panel-titlebox{
  position:absolute; top:24px; left:0; z-index:2;
  /* fallback */
  background: var(--primary);
  /* 50% opacity look */
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--text);
  padding: 12px 14px;
  margin-top: 25px;
  border: 1px solid rgb(from var(--background) r g b / 0.25);
  height: 80px;
  min-width: 30%;
  max-width: 85%;
  border-left: 0;
  display: flex;
  align-items: center;
}
.panel-titlebox h3{
  margin:0;
  font-size:1.3rem;
  font-weight:400; 
  letter-spacing:.34px; 
  color: var(--text-50);
  text-align: center;
  margin: 0;
  line-height: 1.4;  
}


/* Animation states (JS handles left/width during intro/closing) */
.accordion-group.intro,
.accordion-group.closing{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.accordion-group.intro .panel-inset,
.accordion-group.closing .panel-inset {
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* Settled (flex); animated hover via width transition */
.accordion-group.settled{
  display:flex; height:100%;
}
.accordion-group.settled > li{
  flex:0 0 auto;
  transition: width 150ms var(--ease);
}
.accordion-group.settled.base > li{ width:33%; }

/* Active widths */
.accordion-group.active-1 > li:nth-child(1){ width:var(--focus); }
.accordion-group.active-1 > li:not(:nth-child(1)){ width:var(--rest); }

.accordion-group.active-2 > li:nth-child(2){ width:var(--focus); }
.accordion-group.active-2 > li:not(:nth-child(2)){ width:var(--rest); }

.accordion-group.active-3 > li:nth-child(3){ width:var(--focus); }
.accordion-group.active-3 > li:not(:nth-child(3)){ width:var(--rest); }


/* Scrim fade to 0 on the active/expanded panel (settled) */
.accordion-group.active-1 > li:nth-child(1) .panel-scrim{ opacity: 0; }
.accordion-group.active-2 > li:nth-child(2) .panel-scrim{ opacity: 0; }
.accordion-group.active-3 > li:nth-child(3) .panel-scrim{ opacity: 0; }

/* Also fade scrim during INTRO when we pre-mark active-1 */
.accordion-group.intro.active-1 > li:nth-child(1) .panel-scrim{ opacity: 0; }

.accordion-group.locked{ pointer-events:none; }

/* Mobile: rotate titlebox, keep theme colors */
@media (max-width:768px){
  .panel-titlebox{
    top: 2%;
    left: 8px;
    
    /* Center the BOX vertically in the panel (order matters!) */
    transform: translateY(-50%) rotate(90deg);
    transform-origin: left center;

    width: 200px;
    height: 50px;
    padding: 10px 12px;
    max-width: none;

    /* Center the TEXT inside the box */
    display: flex;
    align-items: center;      /* vertical (in the box’s own axis) */
    justify-content: center;  /* horizontal */
    text-align: center;       /* multi-line centering */
  }

  .panel-titlebox h3{
    margin: 0;
    line-height: 1.2;
    width: 100%;
    text-align: center;
    padding-bottom: 12px;
  }

  .accordion-group.active-1 > li:nth-child(1) .panel-titlebox,
  .accordion-group.active-2 > li:nth-child(2) .panel-titlebox,
  .accordion-group.active-3 > li:nth-child(3) .panel-titlebox {
    background: var(--primary);
  }
}

/* Icon swap inherits theme text */
.hamburger, .close-x{ display:inline-block; vertical-align:middle; color: var(--text) !important; }
.btn-open .hamburger{ display:none; }
.btn-open .close-x{ display:inline-block; }
.btn-closed .hamburger{ display:inline-block; }
.btn-closed .close-x{ display:none; }

/* Inset container: between header bottom and panel bottom with even spacing */
.panel-inset{
  position: absolute;
  left: 5%;
  width: 90%;

  /* sits exactly under the header + an even gap */
  top: calc(var(--header-offset, 14px) + var(--titlebox-h, 0px) + var(--inset-gap));
  /* same gap to the bottom so spacing is even */
  bottom: var(--inset-gap);

  background: transparent;
  /* border: 1px solid #000; */
  overflow: auto;

  opacity: 0;               /* hidden when panel not expanded */
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* Fade in the inset when the panel is expanded (3-panel build) */
.accordion-group.active-1 > li:nth-child(1) .panel-inset{ opacity: 1; pointer-events: auto; }
.accordion-group.active-2 > li:nth-child(2) .panel-inset{ opacity: 1; pointer-events: auto; }
.accordion-group.active-3 > li:nth-child(3) .panel-inset{ opacity: 1; pointer-events: auto; }

/* Also visible during the intro flyout when panel 1 is pre-marked active */
.accordion-group.intro.active-1 > li:nth-child(1) .panel-inset{ opacity: 0; pointer-events: auto; }

/* Responsive grid for menu boxes */
.menu-grid{
  display: grid;
  grid-template-columns: 1fr;         /* one item per row */
  gap: 35px;
  align-content: start;
  justify-items: center;              /* base centering */
  padding: 12px;
  /* horizontal stagger amount (container-relative) */
  --stagger-x: 30%;
  --fade-start: 60%;     /* keep the first 60% fully visible */
  --fade-softness: 30%;  /* fade out over the next ~30% (clamped by 100%) */
}



/* Make sure inset sits above the scrim so hover works */
.panel-inset{ z-index: 2; }



  .menuIcon-size{
    width: 36px !important;
    height: 36px !important;
    line-height: 36px;              /* helps with icon-font baselines */
  }

  /* if it’s an icon font (e.g. RPG Awesome ra-*) */
  .menuIcon-size::before{
    font-size: 36px !important;
    line-height: 36px !important;
  }

  /* if there’s an inline <svg> inside */
  .menuIcon-size svg{
    width: 100% !important;
    height: 100% !important;
      line-height: 36px;              /* helps with icon-font baselines */
}

.menuLink {
  text-decoration: none;
  color: var(--primary);
}

.menuLink:hover {
  color:  var(--primary-800) !important;
}

.homepageIntro{
  margin: 25px;
  padding: 25px;
  border: 1px dotted var(--primary);
  color: var(--primary);
  background-color: #ffffff77;
}

@media (max-width: 992px){
.homepageIntro{
  margin: 5px;
  padding: 5px;
}
}

.introNote {
  color: var(--danger) !important;
  font-weight: 600;
}

.introNoteTxt {
  color: var(--text) !important;
  font-weight: 300;
}

.introDie {
  width: 64px;
}

.introHeading {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px dotted var(--primary);
  width: 100%;
}

.introOnlinePad {
  margin-left: 5px;
}

.introLeftPad {
  margin-left: 5px;
}

.brand-date {
  margin-left: 15px;
  font-size: 0.8rem;
  color: var(--text);
}

.introColor {
  color: var(--primary) !important;
}

.pageTitle {
  width: 100%;
  font-size: 1.3rem;
  color: var(--text);
  background-color: rgb(from var(--primary) r g b / 0.25);
  margin: 0px;
  padding: 0px;
  border-bottom: 1px dotted var(--primary);
  height: 42px;
}

.pageTitle span {
  position: relative;
  top: 5px;
  left: 20px;
}


.qmAuthHeader .qmLink { padding: .25rem .5rem; }
.qmAuthHeader img { box-shadow: 0 0 0 2px rgba(255,255,255,.15); }









































  /* Full-screen container */
/* Full-screen container */
  #mobileMenuOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  #mobileMenuOverlay.mm-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Panel: pure black background now */
  #mobileMenuOverlay .mm-panel {
    position: absolute;
    inset: 0;
    background: #000; /* black */
  }

  /* Panel content */
  #mobileMenuOverlay .mm-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    padding: 20px 16px 40px;
  }

  /* Close button (fixed & always on top) */
  #mobileMenuOverlay #mm-close {
    position: fixed;
    z-index: 10000;
    top: 10px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  /* Accordion container */
  .mm-accordion { display: block; }

  /* Accordion item: no background, no radius */
  .mm-acc-item {
    margin-bottom: 4px; /* small rhythm */
  }

  /* Header: transparent, larger, color = var(--primary) */
  .mm-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 4px 12px 4px;
    font-size: 1.35rem;     /* slightly larger */
    font-weight: 800;
    color: var(--primary);
    cursor: pointer;
    user-select: none;
  }
  .mm-acc-head .chev {
    transition: transform 200ms ease;
  }
  .mm-acc-item.open .mm-acc-head .chev {
    transform: rotate(90deg);
  }

  /* Body: simple slide via max-height */
  .mm-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms ease;
  }
  .mm-acc-item.open .mm-acc-body {
    max-height: 1000px;
  }

  /* Link list: indent items 25px from the left */
  .mm-links {
    list-style: none;
    margin: 0;
    padding: 0 10px 8px 25px;  /* ← indent 25px */
  }
  .mm-links li { margin: 0; padding: 0; }

  /* Links: larger, color = var(--background) */
  .mm-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 1.18rem;
    color: var(--background);
    padding: 10px 6px;
    border-radius: 8px;
  }
  .mm-links a:active,
  .mm-links a:hover {
    background: rgba(255,255,255,0.08);
  }
  .mm-links i {
    height: 28px;
    width: 28px;
  }

  /* Accordion container: 90% width, 3% left margin (leaves ~7% right) */
  #mobileMenuOverlay .mm-inner {
    padding: 20px 0 40px; /* remove side padding so width+margin are clean */
  }
  .mm-accordion {
    width: 80% !important;
    margin-left: 10%;
    margin-right: 0; /* implicit ~7% remaining on right */
  }

  /* Close button: top-left, 72px, no circle/background */
  #mobileMenuOverlay #mm-close {
    position: fixed;
    z-index: 10000;
    top: 8px;
    left: 10px;
    right: auto;          /* ensure right isn't used */
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 60px;      /* visually balanced inside 72px box */
    line-height: 1;
    padding: 0;
  }

  /* Push content down so headers don't sit under the close button */
  #mobileMenuOverlay .mm-inner {
    /* top padding = button height (72) + a little breathing room (24) */
    padding: calc(72px + 24px) 0 40px;
  }

  /* Larger category headers */
  .mm-acc-head {
    font-size: 1.8rem;    /* was 1.35rem */
    font-weight: 900;     /* a touch bolder for readability */
    padding: 18px 4px 12px 4px;
  }

  /* Keep links indented 25px from left as before */
  .mm-links {
    padding: 0 10px 8px 25px;
  }

  #mm-debug-wrap{
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;   /* centers label under circle */
    gap: 6px;
    z-index: 3;
    pointer-events: none;  /* keeps overlay clicks working */
  }
  /* the gray count circle */
  #mm-debug{
    position: relative;
    top: 10;
    right: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(65, 65, 65, 0.52);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  /* the label under it */
  #mm-debug-label{
    position: relative;
    top: 10;
    right: 20;
    color: #fff;
    font: 600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: .02em;
    opacity: .95;
  }

  /* Mobile menu link row (icon + title) */
#mobileMenuOverlay .mm-linkrow{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 8px 0 2px; /* a little breathing room above the desc */
}

/* Icon + title color/size (use your existing palette) */
#mobileMenuOverlay .mm-linkrow i{
  font-size: 20px;
  line-height: 1;
}
#mobileMenuOverlay .mm-linkrow .mm-linktext{
  font-size: 1.05rem;
  font-weight: 400;
}



/* Description under each link */
#mobileMenuOverlay .mm-desc{
  margin-left: 10;       /* indent under the title */
  margin-bottom: 15px;      /* space before next item */
  font-size: 0.85rem;      /* smaller text */
  line-height: 1.25;
  opacity: 1;
}

/* Inherit the mobile menu’s foreground color theme */
#mobileMenuOverlay .mm-linkrow,
#mobileMenuOverlay .mm-linkrow i,
#mobileMenuOverlay .mm-linkrow .mm-linktext,
#mobileMenuOverlay .mm-desc{
  /* color: var(--background);
  -webkit-text-fill-color: var(--background); */
}
#mobileMenuOverlay .mm-desc{
  padding-left: 40px;
}

.mm-linktext {
    width: 100%;
    border-bottom: 1px dotted rgb(from var(--background) r g b / 0.425);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.mm-linkStyle {
  font-weight: 300;
    color: var(--background) !important;
/* -webkit-text-fill-color: red; */
}

.mm-iconStyle {
    color: rgb(from var(--text-300) r g b / 0.825);
  -webkit-text-fill-color: rgb(from var(--text-300) r g b / 0.825);
}

.mm-desc {
  color: var(--text-400);
}















  /* ==== Flyout TOC layout (icon + name + description) ==== */

/* Center a two-column grid with comfy side padding */
.toc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;                 /* left/right padding you asked for */
  
}

/* Each link becomes a two-row grid: [icon][title] / [icon][desc] */
.toc-item{
  display: grid;
  grid-template-columns: 80px 1fr; /* icon, then text column */
  grid-template-rows: auto auto;   /* title then description */
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  text-decoration: none;
  color: var(--background);         /* unify colors */
  padding-bottom: 50px;
}

.toc-item:hover,
.toc-item:focus{
  text-decoration: none;
  opacity: .95;
}

/* icon column (spans both rows) */
.toc-icon{
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}
.toc-icon i{
  font-size: 30px;
  scale: 1.65;
  color: rgb(from var(--primary-200) r g b / 0.65);
  -webkit-text-fill-color: rgb(from var(--primary-200) r g b / 0.65);
}

/* title (row 1, text column) */
.toc-link{
  grid-column: 2;
  grid-row: 1;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--primary-400);
  padding-bottom: 5px;
  border-bottom: 1px dotted rgb(from var(--background) r g b / 0.45);
}

/* description (row 2, indented under the title) */
.toc-desc{
  grid-column: 2;
  grid-row: 2;
  font-size: .9rem;
  font-weight: 300;
  opacity: 1;
  color: var(--background);
  margin-top: 5px;
  margin-left: 5px; margin-right: 5px;
}

/* Optional: make the whole inset area have a dark translucent bg */
.site-inner .panel-inset{
  background: rgba(0,0,0,.75);
}







/* Flyout scrollbar styling (desktop widths incl. ~1285px) */
.site-inner,
.site-inner .panel-inset,
.site-inner .panel-inset .menu-grid {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) rgba(30,30,30,0.7);
}

/* Chromium/WebKit */
.site-inner::-webkit-scrollbar,
.site-inner .panel-inset::-webkit-scrollbar,
.site-inner .panel-inset .menu-grid::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.site-inner::-webkit-scrollbar-track,
.site-inner .panel-inset::-webkit-scrollbar-track,
.site-inner .panel-inset .menu-grid::-webkit-scrollbar-track {
  background: rgba(30,30,30,0.7);         /* dark gray to match your rgba(0,0,0,.75) bg */
  border-radius: 8px;
}

.site-inner::-webkit-scrollbar-thumb,
.site-inner .panel-inset::-webkit-scrollbar-thumb,
.site-inner .panel-inset .menu-grid::-webkit-scrollbar-thumb {
  background: var(--primary);              /* the handle */
  border-radius: 8px;
  border: 2px solid rgba(30,30,30,0.7);    /* keeps the thumb readable on dark track */
}

.site-inner::-webkit-scrollbar-thumb:hover,
.site-inner .panel-inset::-webkit-scrollbar-thumb:hover,
.site-inner .panel-inset .menu-grid::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.1);
}

/* make sure the flyout surfaces actually allow scrolling when needed */
.site-inner,
.site-inner .panel-inset {
  overflow: auto;
  background: rgba(0,0,0,0.75);  /* your chosen backdrop, if not already applied */
}


  .offline-header{
    display:flex;
    align-items:center;
    justify-content:center;   /* center the whole group */
    gap:16px;
    text-align:center;
    margin-bottom:16px;
  }
  .offline-logo{
    width:64px;
    height:64px;
    object-fit:contain;
    flex:0 0 auto;
  }
  .offline-title{
    display:flex;
    align-items:baseline;
    gap:.15em;
    font-size:64px;
    line-height:1;
    font-weight:700;
    color:var(--text, #e6edf3);
    /* prevent wrapping between words unless screen is tiny */
    white-space:nowrap;
  }
  .offline-title .brand-sub{
    font-weight:700;
    color:var(--primary-contrast, #fff);
    opacity:.9; /* subtle contrast */
  }

  /* Small screens: scale down gracefully */
  @media (max-width: 640px){
    .offline-title{ font-size:40px; }
    .offline-logo{ width:40px; height:40px; }
    .offline-header{ gap:10px; }
  }

  .alertBold {
    font-weight: 700;
    font-size: 1.15rem;
  }

  .navZIndex {
  z-index: 50000 !important;
}