/* Shared, progressively disclosed navigation on the studio and information pages. */
header:has(.mw-info-menu){overflow:visible}
header .header-flow{overflow:hidden}
.mw-info-menu{position:relative;text-shadow:none}
.mw-info-menu>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:15px 0;font-size:inherit;font-weight:inherit;white-space:nowrap}
.mw-info-menu>summary::-webkit-details-marker{display:none}
.mw-info-menu>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.mw-info-menu[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.mw-info-menu>summary:hover,.mw-info-menu>summary.is-current{color:#7950b0}
.mw-info-menu summary:focus-visible{outline:2px solid #7950b0;outline-offset:4px}
.mw-info-links{position:absolute;top:100%;left:-18px;min-width:210px;display:grid;gap:2px;padding:10px;background:#f8f7fc;color:#241e34;border:1px solid #d8d0e3;border-radius:8px;box-shadow:0 12px 30px #15121d26;z-index:80}
header .mw-info-links a,.mw-info-links a{display:block;padding:12px 14px;font-size:14px;line-height:1.3;border-radius:4px;white-space:nowrap}
.mw-info-links a:hover,.mw-info-links a:focus-visible{background:#eae3f4;color:#593b7a}
.studio-mobile-menu>div{max-height:calc(100dvh - 100px);overflow-y:auto}
.studio-mobile-menu .mw-info-menu>summary{padding:10px;font-size:15px}
.studio-mobile-menu .mw-info-links,.mw-mobile-menu .mw-info-links{position:static;min-width:0;box-shadow:none;margin:0 0 8px 10px;border:0;border-left:2px solid #c9b6df;border-radius:0;background:transparent;padding:0 0 0 8px}
.mw-mobile-menu .mw-info-menu>summary{font-size:1.25rem;padding:16px 0;border-bottom:1px solid #dedbe4}
.mw-mobile-menu nav .mw-info-links a{font-size:1rem;padding:12px;border:0}
.mw-mobile-menu{overflow-y:auto}
header nav[aria-label="Main navigation"]{align-items:center}

/* Keep the page on one vertical scroll axis while local controls handle their own gestures. */
@media (max-width: 850px), (hover: none) and (max-height: 500px) and (max-width: 950px) {
  html, body { max-inline-size: 100%; overflow-x: clip; overscroll-behavior: none; }
  html { scroll-behavior: auto; }
  button, a, summary, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
  header .header-flow { inset-inline: 0; max-inline-size: 100%; }
  .studio-mobile-menu > div, .mw-mobile-menu { overscroll-behavior: contain; }
  html:has(.studio-mobile-menu[open]) { overflow-y: hidden; }
}
