/* A shared observation space; water and stars retain the same project targets. */
.motion-prototype .motion-scene.scene-lab {
  display: block;
  min-height: 0;
  padding: 0;
}
.motion-prototype .lab-universe {
  --lab-light: 128, 128, 128;
  --ink: #000;
  --muted: #666;
  --theme-nav-text: #333;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: clip;
  color: var(--ink);
  background: #f4f4f4;
}
.motion-prototype .lab-universe[data-scene-mode="stars"] { --lab-light: 232, 232, 232; --ink: #fff; --muted: #d0d0d0; --theme-nav-text: #ccc; background: #141414; }
.motion-prototype .lab-universe .lab-organism { filter: grayscale(1); }
.motion-prototype .lab-universe .lab-project-node { --cell-white:#fff; --cell-mid:#f5f5f5; --cell-edge:#b5b5b5; }
.motion-prototype .lab-universe .lab-project-node:nth-child(2) { --cell-white:#fcfcfc; --cell-mid:#ebebeb; --cell-edge:#bdbdbd; }
.motion-prototype .lab-universe .lab-project-node:nth-child(3) { --cell-white:#f8f8f8; --cell-mid:#e4e4e4; --cell-edge:#aaa; }
.motion-prototype .lab-universe radialGradient[id$="-membrane"] stop:nth-child(1) { stop-color:var(--cell-white); stop-opacity:1; }
.motion-prototype .lab-universe radialGradient[id$="-membrane"] stop:nth-child(2) { stop-color:var(--cell-mid); stop-opacity:.95; }
.motion-prototype .lab-universe radialGradient[id$="-membrane"] stop:nth-child(3) { stop-color:var(--cell-white); stop-opacity:.9; }
.motion-prototype .lab-universe radialGradient[id$="-core"] stop:nth-child(1) { stop-color:#fff; }
.motion-prototype .lab-universe radialGradient[id$="-core"] stop:nth-child(2) { stop-color:#e0e0e0; }
.motion-prototype .lab-universe radialGradient[id$="-core"] stop:nth-child(3) { stop-color:#aaa; }
.motion-prototype .lab-universe .lab-membrane { stroke:var(--cell-edge); transition:stroke var(--motion-duration-feedback,120ms) var(--motion-ease-standard,ease); }
.motion-prototype .lab-universe .lab-project-node:is(:hover,:focus-visible,.is-selected) .lab-membrane { stroke:#888; }
.motion-prototype .lab-sky {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.motion-prototype .lab-sky:focus-visible { outline: 1px solid var(--muted); outline-offset: -8px; }
.motion-prototype .lab-universe[data-dragging="true"] .lab-sky,
.motion-prototype .lab-universe[data-dragging="true"] .lab-project-node { cursor: grabbing; user-select: none; }
.motion-prototype .lab-orbit-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.motion-prototype .lab-starfield { display: block; width: 100%; height: 100%; }
.motion-prototype .lab-project-nodes { position: absolute; inset: 0; pointer-events: none; }
.motion-prototype .lab-project-node {
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.motion-prototype .lab-organism {
  display: block;
  width: 112px;
  height: 112px;
  overflow: visible;
  pointer-events: none;
  grid-area: 1 / 1;
  transform: scale(var(--lab-zoom, 1));
  transform-origin: center;
}
.motion-prototype .lab-project-node:focus-visible { outline: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 4px; }
.motion-prototype .lab-project-info {
  position: absolute;
  z-index: 120;
  width: min(256px, calc(100% - 32px));
  max-height: var(--lab-info-height, none);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: transparent;
  cursor: auto;
}
.motion-prototype .lab-project-info[hidden],
.motion-prototype .lab-project-info [hidden] { display: none; }
.motion-prototype .lab-project-status { margin: 0 0 5px; font-size: var(--theme-caption-size); line-height: 1.6; letter-spacing: .035em; color: var(--muted); }
.motion-prototype .lab-universe .lab-project-status::before { background: currentColor; }
.motion-prototype .lab-project-title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; }
.motion-prototype .lab-project-summary { margin: 8px 0 0; color: var(--muted); font-size: var(--theme-ui-size); line-height: 1.7; }
.motion-prototype .lab-floor {
  --lab-floor-bottom:var(--stage-actions-bottom);
  position: relative;
  z-index: 150;
  align-self: end;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) var(--lab-floor-bottom);
  pointer-events: none;
}
.motion-prototype .lab-floor .stage-actions { pointer-events: auto; }
.motion-prototype .lab-floor .stage-action[aria-disabled="true"] { opacity: .45; cursor: default; }
@media (max-width: 767px) {
  .motion-prototype .motion-scene.scene-lab { min-height: 640px; }
  .motion-prototype .lab-floor { --lab-floor-bottom:calc(var(--stage-actions-bottom) + max(0px,640px - var(--stage-height))); }
  .motion-prototype .lab-project-info { width: min(232px, calc(100% - 32px)); }
  .motion-prototype .lab-project-node { width: 56px; height: 56px; }
  .motion-prototype .lab-organism { width: 92px; height: 92px; }
}
@media (max-height: 620px) and (min-width: 768px) {
  .motion-prototype[data-view="stage"]:has(.motion-scene.scene-lab) { overflow-x: clip; overflow-y: auto; }
  /* Give the sky a definite height so its 100% child and canvas grow together. */
  .motion-prototype .motion-scene.scene-lab { height: max(640px, var(--stage-height)); min-height: 640px; }
  .motion-prototype .lab-floor { --lab-floor-bottom:calc(var(--stage-actions-bottom) + max(0px,640px - var(--stage-height))); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-prototype .lab-universe .lab-membrane { transition:none; }
}