/* hero_extra.css — additions to the PointZero 3D viewers (index.css untouched).
   Loaded after static/css/index.css. */

/* ------------------------------------------------------------------ *
 * Post-training ("ctx") viewers: park the input RGB-D thumbnail in a
 * dedicated left gutter instead of floating it over the point cloud.
 * The canvas is inset by the gutter width, so the 3D scene is never
 * occluded; hero.js sizes the renderer off the canvas, not the stage.
 * ------------------------------------------------------------------ */

/* give the 3D area back the width the gutter takes */
.pz-section-viewer { max-width: 1000px; }

@media screen and (min-width: 780px) {
  [data-pz-viewer="ctx"] .pz-canvas {
    left: 208px;
    width: calc(100% - 208px) !important;
  }

  [data-pz-viewer="ctx"] .pz-rgb-wrap {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 180px;
    gap: 0.3rem;
  }
  [data-pz-viewer="ctx"] .pz-rgb { width: 180px; }
  [data-pz-viewer="ctx"] .pz-rgb-label { font-size: 0.66rem; }

  /* a hairline so the gutter reads as a panel, not as dead space */
  [data-pz-viewer="ctx"] .pz-stage::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 207px;
    width: 1px;
    background: rgba(255, 255, 255, 0.09);
    z-index: 1;
    pointer-events: none;
  }

  /* re-centre the phase badge over the canvas, not over the whole stage */
  [data-pz-viewer="ctx"] .pz-phase {
    left: 208px;
    right: 0;
    transform: none;
  }

  /* keep the scrubber clear of the gutter */
  [data-pz-viewer="ctx"] .pz-bar { padding-left: 214px; }
}

/* Let the action-conditioned viewer extend beyond the text column. */
#wam-viewer {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100vw - 3rem));
  max-width: none;
}
#wam-viewer .pz-stage {
  aspect-ratio: auto;
  height: clamp(420px, 48vw, 620px);
}

@media screen and (max-width: 779px) {
  /* Both viewers reserve a header band for the reference image and phase. */
  #hero-viewer .pz-stage { aspect-ratio: auto; height: clamp(420px, 90vw, 560px); }
  #wam-viewer .pz-stage { height: clamp(460px, 90vw, 640px); }
  #hero-viewer .pz-canvas,
  #wam-viewer .pz-canvas {
    top: 124px;
    height: calc(100% - 124px) !important;
  }
  #hero-viewer .pz-rgb-wrap,
  #wam-viewer .pz-rgb-wrap {
    top: 12px;
    left: 12px;
    transform: none;
    width: 116px;
  }
  #hero-viewer .pz-rgb,
  #wam-viewer .pz-rgb { width: 116px; max-height: 86px; object-fit: contain; }
  #hero-viewer .pz-phase,
  #wam-viewer .pz-phase {
    top: 24px;
    left: 140px;
    right: 12px;
    transform: none;
  }
  #hero-viewer .pz-phase-main,
  #wam-viewer .pz-phase-main { font-size: 0.9rem; padding: 0.2rem 0.5rem; max-width: 100%; }
  #hero-viewer .pz-hint,
  #wam-viewer .pz-hint { display: none; }
  #hero-viewer .pz-scrub,
  #wam-viewer .pz-scrub { min-width: 0; }
}