/* MAJLIS Studio only (2026-10-15): a thin, see-through navigation bar laid over the top of the
   Studio, so the rug and the room run up to the top of the window. The bar is 34px tall, a
   30% dark tint with white text. The stage buttons and the side panel start below it. */
:root { --studio-nav-h: 34px; }

html body #studio#studio.app { grid-template-rows: auto 1fr !important; }
html body #studio#studio.app > main.workspace { grid-row: 2; }
html body #studio#studio > .v2c--header { position: absolute; top: 0; left: 0; right: 0; z-index: 210; }

html body #studio .v2c .site-header {
  position: relative;
  background: rgba(24, 10, 5, .30) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}
html body #studio .v2c .site-header .bar { height: var(--studio-nav-h); gap: 18px; }
html body #studio .v2c .site-header :is(.nav a, .menu-toggle, .wordmark, .btn-members, .header-account) {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
html body #studio .v2c .site-header .nav a,
html body #studio .v2c .site-header .menu-toggle { font-size: 10.5px; padding: 4px 0; }
html body #studio .v2c .site-header .wordmark { font-size: 14px; }
html body #studio .v2c .site-header .btn-members {
  min-height: 24px; padding: 0 12px; font-size: 10px;
  border-color: rgba(255, 255, 255, .75) !important; background: transparent !important;
}
html body #studio .v2c .site-header .btn-members:hover { background: rgba(255, 255, 255, .18) !important; }
html body #studio .v2c .site-header .nav a:focus-visible,
html body #studio .v2c .site-header .wordmark:focus-visible,
html body #studio .v2c .site-header .btn-members:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* everything that sat at the top of the stage moves below the bar */
html body #studio .stage > .stage-tools { transform: translateY(var(--studio-nav-h)); }
html body #studio main.workspace > aside.panel::before { content: ""; display: block; height: var(--studio-nav-h); }

/* 3D: the room fills the full window height under the bar */
@media (min-width: 901px) {
  html body #studio.is-3d .stage { height: 100vh !important; }
}