/* Editor chrome inside the canvas iframe (never exported). */
@layer pg-chrome {
  html { scroll-behavior: smooth; }
  #pg-root { min-height: 100vh; }
  .pg-sec { position: relative; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s; }
  .pg-edit .pg-sec:hover { outline-color: color-mix(in oklch, var(--mv-accent) 45%, transparent); }
  .pg-edit .pg-sec.is-selected { outline-color: var(--mv-accent); }
  .pg-sec.is-dragging { opacity: .35; }
  .pg-bar { position: absolute; top: .5rem; right: .5rem; z-index: 40; display: none; gap: 2px; padding: 3px; border-radius: 10px; background: oklch(0.22 0.02 280 / .92); box-shadow: 0 8px 24px -8px #0008; color: #fff; font: 600 11px/1 system-ui, sans-serif; }
  .pg-edit .pg-sec:hover > .pg-bar, .pg-edit .pg-sec.is-selected > .pg-bar { display: flex; }
  .pg-bar span { padding: 7px 8px; opacity: .8; }
  .pg-bar button { all: unset; display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 7px; cursor: pointer; }
  .pg-bar button:hover { background: #fff2; }
  .pg-bar [data-handle] { cursor: grab; }
  .pg-drop-line { position: fixed; left: 0; right: 0; z-index: 50; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--mv-accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--mv-accent) 25%, transparent); pointer-events: none; }
  .pg-empty-drop { display: grid; place-items: center; min-height: 80vh; margin: 1.5rem; border: 2px dashed var(--mv-border-strong); border-radius: 20px; color: var(--mv-fg-muted); font: 500 1rem/1.5 system-ui, sans-serif; text-align: center; }
  .pg-empty-drop.is-over { border-color: var(--mv-accent); background: var(--mv-accent-subtle); color: var(--mv-fg); }
  .pg-edit [data-pg-i][contenteditable="true"] { outline: 2px dashed var(--mv-accent); outline-offset: 3px; border-radius: 3px; cursor: text; }
  .pg-edit .pg-editable:hover { cursor: text; box-shadow: 0 1px 0 0 color-mix(in oklch, var(--mv-accent) 60%, transparent); }
}