/**
 * Canvas and overlay chrome.
 *
 * These styles live in the *editor* document, not in the frame, so nothing here
 * can reach the user's design. The overlay is deliberately pointer-transparent
 * except for resize handles: every click must pass through to the frame so the
 * canvas keeps behaving like the page it represents.
 */

/* Positions the scrolling viewport and the non-scrolling overlay as siblings. */
.pb-canvas-surface {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Floating rich-text format bar (host chrome; never exported). */
.pb-text-format-bar {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  pointer-events: auto;
}

.pb-text-format-bar[hidden] {
  display: none !important;
}

.pb-text-format-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pb-text);
  cursor: pointer;
}

.pb-text-format-btn:hover {
  background: var(--pb-surface-2);
}

.pb-text-format-btn.pb-on {
  background: var(--pb-accent-soft, rgba(59, 130, 246, 0.16));
  color: var(--pb-accent, #2563eb);
}

.pb-text-format-mark {
  font: 700 12px/1 Georgia, "Times New Roman", serif;
}

.pb-text-format-btn[data-command="italic"] .pb-text-format-mark {
  font-style: italic;
  font-weight: 600;
}

.pb-text-format-btn[data-command="underline"] .pb-text-format-mark {
  text-decoration: underline;
  font-weight: 600;
}

.pb-canvas-viewport {
  position: relative;
  /* Fills the surface; without this the viewport would shrink-wrap the iframe. */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background:
    linear-gradient(45deg, var(--pb-canvas-check) 25%, transparent 25%, transparent 75%, var(--pb-canvas-check) 75%),
    linear-gradient(45deg, var(--pb-canvas-check) 25%, transparent 25%, transparent 75%, var(--pb-canvas-check) 75%),
    var(--pb-canvas-bg);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  /* The canvas owns the scroll gesture; browser overscroll chaining would
     otherwise bounce the whole editor shell. */
  overscroll-behavior: contain;
}

.pb-canvas-scroller {
  display: flex;
  min-height: 100%;
  /* `safe center` keeps the canvas centred when it fits, but falls back to the
     start edge when it overflows so the left side is never clipped at scroll 0. */
  justify-content: safe center;
  align-items: flex-start;
  padding: 24px 24px 96px;
}

/* Tight wrapper around the shell — width is set in JS so the iframe's layout
   width cannot inflate the scroll area and mis-centre the design. */
.pb-canvas-stage {
  position: relative;
  flex: 0 0 auto;
}

.pb-canvas-shell {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
  transition: width 180ms ease;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pb-canvas-shell {
    transition: none;
  }
}

.pb-canvas-shell-fluid {
  width: 100%;
}

.pb-canvas-frame {
  display: block;
  width: 100%;
  border: 0;
  border-radius: inherit;
  /* Never let the iframe scroll internally: it is sized to its content and the
     viewport does the scrolling, so two nested scrollbars cannot appear. */
  overflow: hidden;
}

/* While dragging, the frame must not swallow pointer events with its own
   cursor changes or text selection. */
.pb-canvas-dragging {
  cursor: grabbing;
  touch-action: none;
}

.pb-canvas-dragging .pb-canvas-frame {
  pointer-events: none;
}

.pb-canvas-preview .pb-canvas-shell {
  box-shadow: none;
  overflow: auto;
}

/* Preview is a real browser viewport: the iframe scrolls internally so
   position:fixed chrome (cart checkout, lightboxes) stays on screen. */
.pb-canvas-viewport.pb-canvas-preview {
  overflow: hidden;
}

.pb-canvas-preview .pb-canvas-scroller {
  height: 100%;
  min-height: 100%;
  padding: 0;
  align-items: stretch;
}

.pb-canvas-preview .pb-canvas-frame {
  overflow: auto;
  height: 100%;
}

/* ------------------------------------------------------------------ *
 * Overlay
 * ------------------------------------------------------------------ */

.pb-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

/* `pointer-events` is not inherited. Without this, selection/hover boxes would
   sit above the iframe and swallow clicks — especially after scrolling, when a
   tall selected section covers the whole viewport. Handles re-enable events in JS. */
.pb-overlay-layer > * {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
}

.pb-ov-hover {
  border: 1px solid var(--pb-accent-soft);
  border-radius: 2px;
}

.pb-ov-selection {
  border: 1px solid var(--pb-accent);
  border-radius: 2px;
}

.pb-overlay-layer > .pb-ov-replace {
  z-index: 8;
  pointer-events: auto;
  height: auto;
  width: auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-text);
  font: 650 11px/1.2 var(--pb-font, inherit);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
  cursor: pointer;
  white-space: nowrap;
}

.pb-ov-editing {
  border-color: #60a5fa;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 4px rgba(59, 130, 246, 0.22);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.pb-ov-locked {
  border-color: var(--pb-warn);
  border-style: dashed;
}

.pb-ov-overflow {
  border-color: var(--pb-warn, #d97706);
}

.pb-ov-label-warning {
  background: var(--pb-warn, #d97706);
  border-radius: 0 0 3px 0;
  height: auto;
  min-height: 18px;
  max-width: min(280px, 100%);
  padding: 3px 6px;
  color: #1a1300;
}

.pb-ov-label {
  display: inline-flex;
  height: 18px;
  align-items: center;
  padding: 0 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--pb-accent);
  border-radius: 3px 3px 0 0;
  /* Labels sit outside the element, so they must not be clipped by it. */
  pointer-events: none;
}

.pb-ov-label-editing {
  background: #2563eb;
  letter-spacing: 0.01em;
  max-width: min(420px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-ov-label-hover {
  background: var(--pb-accent-soft);
}

/* When there is no room above the element, the label tucks inside its top-left
   corner instead of being clipped off the top of the viewport. */
.pb-ov-label-inside {
  border-radius: 0 0 3px 0;
}

.pb-ov-handle {
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1px solid var(--pb-accent);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

.pb-ov-handle-n,
.pb-ov-handle-s {
  cursor: ns-resize;
}

.pb-ov-handle-e,
.pb-ov-handle-w {
  cursor: ew-resize;
}

.pb-ov-handle-nw,
.pb-ov-handle-se {
  cursor: nwse-resize;
}

.pb-ov-handle-ne,
.pb-ov-handle-sw {
  cursor: nesw-resize;
}

.pb-ov-space {
  width: 14px;
  height: 14px;
  border: 1px dashed var(--pb-accent);
  background: color-mix(in srgb, var(--pb-accent) 35%, transparent);
  border-radius: 2px;
}

.pb-ov-space-n,
.pb-ov-space-s {
  cursor: ns-resize;
}

.pb-ov-space-e,
.pb-ov-space-w {
  cursor: ew-resize;
}

.pb-canvas-shell.pb-canvas-device {
  box-shadow: 0 0 0 10px #1a1a1a, 0 18px 40px rgba(15, 23, 42, 0.35);
  border-radius: 28px;
  overflow: hidden;
}

.pb-ov-ruler {
  pointer-events: none;
  z-index: 2;
}

.pb-ov-ruler-x {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--pb-text, #111) 35%, transparent) 0 1px,
    transparent 1px 50px
  );
  background-repeat: repeat-x;
}

.pb-ov-ruler-y {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--pb-text, #111) 35%, transparent) 0 1px,
    transparent 1px 50px
  );
  background-repeat: repeat-y;
}

.pb-ov-overflow {
  background: color-mix(in srgb, #b45309 88%, #000);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.pb-ov-handle-space {
  border-radius: 1px;
}

.pb-ov-handle-pad-n,
.pb-ov-handle-pad-s,
.pb-ov-handle-mar-n,
.pb-ov-handle-mar-s {
  width: 22px;
  height: 6px;
  cursor: ns-resize;
}

.pb-ov-handle-pad-e,
.pb-ov-handle-pad-w,
.pb-ov-handle-mar-e,
.pb-ov-handle-mar-w {
  width: 6px;
  height: 22px;
  cursor: ew-resize;
}

.pb-ov-handle-pad {
  background: var(--pb-accent);
  border-color: #fff;
}

.pb-ov-handle-mar {
  background: var(--pb-surface);
  border-color: var(--pb-warn, #d97706);
}

.pb-ov-handle-gap {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pb-ok, #16a34a);
  border-color: #fff;
  cursor: nwse-resize;
}

.pb-ov-distance {
  background: var(--pb-accent);
  pointer-events: none;
}

.pb-ov-distance-label {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--pb-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.pb-space-pan {
  cursor: grab;
}

.pb-canvas-panning,
.pb-canvas-panning .pb-canvas-frame {
  cursor: grabbing;
}

.pb-canvas-panning .pb-canvas-frame {
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Drop feedback
 * ------------------------------------------------------------------ */

.pb-ov-drop {
  background: var(--pb-ok);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* End caps make a 2px line readable against busy content. */
.pb-ov-drop::before,
.pb-ov-drop::after {
  position: absolute;
  width: 6px;
  height: 6px;
  background: inherit;
  border-radius: 50%;
  content: "";
}

.pb-ov-drop::before {
  top: 50%;
  left: -3px;
  transform: translateY(-50%);
}

.pb-ov-drop::after {
  top: 50%;
  right: -3px;
  transform: translateY(-50%);
}

.pb-ov-drop-vertical::before {
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.pb-ov-drop-vertical::after {
  top: auto;
  right: auto;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.pb-ov-slot {
  background: color-mix(in srgb, var(--pb-ok) 10%, transparent);
  border: 1px dashed var(--pb-ok);
  border-radius: 3px;
}

.pb-ov-slot-denied {
  background: color-mix(in srgb, var(--pb-danger) 10%, transparent);
  border-color: var(--pb-danger);
}

.pb-ov-drop-badge {
  background: var(--pb-danger);
}

/* ------------------------------------------------------------------ *
 * Guides and marquee
 * ------------------------------------------------------------------ */

.pb-ov-guide {
  background: var(--pb-guide);
}

.pb-ov-guide-center {
  background: var(--pb-guide-center);
}

.pb-ov-guide-user {
  background: #f59e0b;
  pointer-events: auto;
  cursor: pointer;
  z-index: 6;
}

.pb-ov-guide-user:hover {
  background: #fbbf24;
}

.pb-ov-guide-user[data-pb-guide-axis="x"] {
  /* Visual 1px line centered in the 9px hit strip (width set in JS). */
  background: linear-gradient(
    to right,
    transparent 0 4px,
    #f59e0b 4px 5px,
    transparent 5px 9px
  );
}

.pb-ov-guide-user[data-pb-guide-axis="y"] {
  background: linear-gradient(
    to bottom,
    transparent 0 4px,
    #f59e0b 4px 5px,
    transparent 5px 9px
  );
}

.pb-ov-guide-user[data-pb-guide-axis="x"]:hover {
  background: linear-gradient(
    to right,
    transparent 0 4px,
    #fbbf24 4px 5px,
    transparent 5px 9px
  );
}

.pb-ov-guide-user[data-pb-guide-axis="y"]:hover {
  background: linear-gradient(
    to bottom,
    transparent 0 4px,
    #fbbf24 4px 5px,
    transparent 5px 9px
  );
}

.pb-ov-marquee {
  background: color-mix(in srgb, var(--pb-accent) 12%, transparent);
  border: 1px solid var(--pb-accent);
  border-radius: 2px;
}

.pb-ov-measure {
  background: #e11d48;
  pointer-events: none;
}

.pb-ov-measure-x {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.7);
}

.pb-ov-measure-y {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.7);
}

.pb-ov-measure-label {
  background: #e11d48;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.pb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (pointer: coarse) {
  .pb-ov-handle {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 1024px) {
  .pb-canvas-scroller {
    padding: 12px 12px 64px;
  }

  .pb-canvas-viewport {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .pb-canvas-scroller {
    padding: 10px 8px 72px;
  }

  .pb-canvas-shell {
    border-radius: 2px;
  }
}

.pb-canvas-rulers-on {
  --pb-ruler-size: 20px;
}

.pb-ruler-corner {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  width: var(--pb-ruler-size, 20px);
  height: var(--pb-ruler-size, 20px);
  padding: 0;
  border: 0;
  border-right: 1px solid var(--pb-border);
  border-bottom: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-text-2, #aaa);
  font: 14px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}

.pb-ruler-corner:hover {
  color: var(--pb-text, #fff);
  background: color-mix(in srgb, var(--pb-danger, #e11d48) 25%, var(--pb-surface));
}

.pb-ruler {
  position: absolute;
  z-index: 7;
  display: block;
  pointer-events: auto;
  cursor: crosshair;
}

.pb-ruler-h {
  top: 0;
  left: var(--pb-ruler-size, 20px);
  right: 0;
  height: var(--pb-ruler-size, 20px);
  border-bottom: 1px solid var(--pb-border);
}

.pb-ruler-v {
  top: var(--pb-ruler-size, 20px);
  left: 0;
  bottom: 0;
  width: var(--pb-ruler-size, 20px);
  border-right: 1px solid var(--pb-border);
}