/* ONE paint sheet — Graphic View and the Matrix work canvas (0.2.27).
   Built into both media folders from shared/display-place.css. Do not restyle
   the photo in explorer.css or admin-zones.css. Egg wheels = FAIL.

   4.0.1: this sheet paints THE CANVAS and nothing on it. Graphic View is a plain white
   canvas; the Matrix work plate is the same canvas in a slightly shaded white (see
   admin-zones.css) so the owner can see the workspace against the admin page. The canvas
   has nothing to do with screen size.

   Every parent of the canvas leaves overflow VISIBLE, so that a layer placed on the
   canvas in a later version can hang past the edges where the owner can see it rather
   than being quietly clipped back to a perfect-looking fit. */

.rwx-be-display-port {
  position: relative;
  overflow: visible;
  background: #ffffff;
}

.rwx-be-art-bike {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.rwx-be-design-canvas {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  overflow: visible;
}

/* Background dim: veil sits on the Options picture inside the red box only.
   Never wash the Matrix grey board or the Graphic View canvas. */

.rwx-be-place-image.rwx-be-bikebox,
.rwx-be-design-canvas .rwx-be-place-image {
  position: absolute;
  display: block;
  line-height: 0;
  overflow: hidden;
}

.rwx-be-place-image.is-off {
  display: none;
}

/* Thin red screen-box layer — one look on Matrix and Graphic View.
   Border only. No fat glow / double shadow. 1:1 CSS pixels, may hang off.
   box-sizing:border-box keeps the saved 2px edge inside its own box. */
.rwx-be-screen-box {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 2px solid #e02424;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  overflow: visible;
  display: none;
  z-index: 3;
}

.rwx-be-screen-box.is-on {
  display: block;
  pointer-events: auto;
  cursor: move;
}

.rwx-be-screen-box.is-front,
.rwx-be-screen-box.is-front.is-on {
  pointer-events: none;
  cursor: default;
}

.rwx-be-screen-box:not(.is-on) {
  display: none;
  pointer-events: none;
}

.rwx-be-screen-box-bg {
  position: absolute !important;
  display: none;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: auto;
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}

.rwx-be-screen-box-bg.is-front {
  pointer-events: none;
  cursor: default;
}

.rwx-be-screen-box-bg-veil {
  position: absolute !important;
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
  z-index: 2;
  background: rgba(0, 0, 0, var(--rwx-be-bg-dim-a, 0));
}

.rwx-be-screen-box-bg-handle {
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #e02424;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  z-index: 5;
}

.rwx-be-screen-box-bg-handle[data-bg-corner="nw"],
.rwx-be-screen-box-bg-handle[data-bg-corner="se"] { cursor: nwse-resize; }
.rwx-be-screen-box-bg-handle[data-bg-corner="ne"],
.rwx-be-screen-box-bg-handle[data-bg-corner="sw"] { cursor: nesw-resize; }

.rwx-be-screen-box-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #e02424;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 6;
}

.rwx-be-screen-box-handle[data-corner="nw"] { top: -4px; left: -4px; cursor: nwse-resize; }
.rwx-be-screen-box-handle[data-corner="ne"] { top: -4px; right: -4px; cursor: nesw-resize; }
.rwx-be-screen-box-handle[data-corner="sw"] { bottom: -4px; left: -4px; cursor: nesw-resize; }
.rwx-be-screen-box-handle[data-corner="se"] { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* Round wheels: never squash. Width fills the placed box; height follows
   the photo. Stretch-to-box paint is forbidden. */
.rwx-be-design-canvas .rwx-be-place-image img,
.rwx-be-bikebox img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
}