/* The viewer has its own landscape viewport. Rotating the iframe rather than
   its canvas keeps pointer coordinates, dialogs and responsive layout aligned. */
:root {
  background: #f6f4ed;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --viewport-width: 100vw;
  --viewport-height: 100vh;
}
@supports (height: 100dvh) {
  :root { --viewport-width: 100dvw; --viewport-height: 100dvh; }
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#property-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--viewport-width);
  height: var(--viewport-height);
  overflow: hidden;
}
#property-viewer {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f8f7f1;
}
.print-blueprint { display: none; }
@media screen and (max-width: 1024px) and (orientation: portrait) {
  #property-viewer {
    left: 100%;
    right: auto;
    bottom: auto;
    width: var(--viewport-height);
    height: var(--viewport-width);
    transform: rotate(90deg);
    transform-origin: top left;
  }
}
@media print {
  html, body { width: auto; height: auto; overflow: visible; }
  #property-viewport { display: none; }
  .print-blueprint { display: block; width: 100%; height: auto; }
}