/* ==========================================================================
   project-compare.css
   Split-view comparison stage for project pages whose 3D content is a
   self-contained viewer app (public/projects/viewers/*) rather than
   model-viewer. Builds on project-viewer.css: .ps-stage, .ps-poster,
   .ps-explore and .ps-stage.is-expanded all come from there.
   ========================================================================== */

/* The iframe is injected on click, so before that the poster is the stage. */
.pc-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ps-panel);
}

.pc-stage.is-live .ps-poster {
  display: none;
}

/* Sits under the stage, aligned to the same 1200px column as .ps-spec. */
.pc-cap {
  width: 100%;
  max-width: 1200px;
  margin: .9rem auto 0;
  padding: 0 20px;
  font-family: Inter, sans-serif;
  font-size: .82rem;
  line-height: 1.55;
  text-align: left;
  color: #5d6e73;
}

.pc-cap span {
  font-family: var(--vd-mono, var(--ps-mono));
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vd-ink, #1c2a2e);
  /* tab names inline in a sentence, so a hair of air either side */
  margin: 0 .1rem;
}

@media (max-width: 767px) {
  /* Taller than wide on a phone, so the excavation is not a thin strip. */
  .pc-stage {
    height: 78vh;
    height: 78dvh;
    min-height: 460px;
  }
}

/* The shared note colour is tuned for a plain poster; over a busy scan frame
   it needs a touch more contrast. */
.pc-stage .ps-poster-note {
  color: #c9d3d5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}