/* ORION — lock composition to MacBook 1440×800 / tablet 1280×800 via transform scale */

:root {
  --vp-design-w: 1440px;
  --vp-design-h: 800px;
  --vp-scale: 1;
  --vp-bg-overlay: rgba(218, 209, 209, 0.8);
}

html.vp-lock,
html.vp-lock body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #e8eef6;
}

.viewport-frame {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: #e8eef6;
  pointer-events: none;
}

/* Full-bleed background — always covers the real window, not just 1280 canvas */
.viewport-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/bg-main-tower.jpg?v=1') left center / cover no-repeat;
  pointer-events: none;
}

.viewport-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--vp-bg-overlay);
  pointer-events: none;
}

/* Login: no wash overlay — show tower bg clean */
html:has(.login-shell) .viewport-frame::after,
.viewport-frame.is-login::after {
  display: none;
}

.viewport-stage {
  width: var(--vp-design-w);
  height: var(--vp-design-h);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: scale(var(--vp-scale));
  transform-origin: center center;
  will-change: transform;
  pointer-events: auto;
  background: transparent;
}

/* Avoid double bg/overlay: shell bg lives on the frame while locked */
html.vp-lock .app-shell,
html.vp-lock .login-shell {
  width: var(--vp-design-w) !important;
  height: var(--vp-design-h) !important;
  max-width: var(--vp-design-w) !important;
  max-height: var(--vp-design-h) !important;
  min-height: 0 !important;
  background: transparent !important;
}

html.vp-lock .app-shell::before,
html.vp-lock .app-shell::after,
html.vp-lock .login-shell::before,
html.vp-lock .login-shell::after {
  display: none !important;
}

/* Keep login two-column desktop layout even if window < 960 */
html.vp-lock .login-shell {
  grid-template-columns: 1.05fr 0.95fr !important;
  overflow: hidden !important;
}

html.vp-lock .login-hero {
  min-height: 0 !important;
}

html.vp-lock .login-panel {
  border-left: 0 !important;
  border-top: 0 !important;
}

/* Prefer desktop shell grid while locked (defeat narrow breakpoints) */
html.vp-lock .app-shell {
  grid-template-columns: var(--sidebar-w) 1fr !important;
}

html.vp-lock .sidebar {
  position: relative !important;
  transform: none !important;
  inset: auto !important;
}