/* UI designer: the "engine" part's own styles (docs/designer/README.md): the canvas, its overlay layer, the
   on-canvas text editor and the screen-reader live region. Shared look and primitives are in designer.css. */

.dz-engine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* The canvas does its own panning, pinching and long-press (no browser scrolling, zooming or pull-to-refresh). */
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: default;
  background: var(--dz-canvas, #121016);
}

.dz-engine:focus-visible::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--accent, #ff5ca8) inset;
  pointer-events: none;
  z-index: 3;
}

.dz-engine-canvas,
.dz-engine-overlay {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.dz-engine-overlay {
  pointer-events: none;
  z-index: 1;
}

/* Things on top of the canvas (the text editor); only their own children take pointer events. */
.dz-engine-dom {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.dz-engine-dom > * {
  pointer-events: auto;
}

.dz-engine.is-panning,
.dz-engine.is-panning * {
  cursor: grabbing !important;
}

/* The on-canvas text editor's keyboard field: the canvas draws the text, the caret and the selection, so the field
   is invisible. It sits at the caret (input methods open their window there) and keeps 16 px text (no iOS zoom). */
.dz-engine-text-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  opacity: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  line-height: 1;
  white-space: pre;
  pointer-events: none;
  transform-origin: 0 0;
}

/* Text on a path is typed in a small field by where it starts (the letters show on the path as they come). */
.dz-engine-text-editor.is-on-path,
.dz-engine-text-input.is-on-path {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(var(--dzt-bar-rgb, 24, 21, 31), 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--dzt-on-bar, #ffffff);
  font: 500 16px/22px var(--font, "Manrope", ui-sans-serif, system-ui, sans-serif);
  white-space: pre;
  box-shadow: 0 0 0 1px var(--dz-selection, #4ea8ff), 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* The on-canvas editor's field is invisible; on a path it is the place to type, so it shows. */
.dz-engine-text-input.is-on-path {
  opacity: 1;
  caret-color: auto;
  pointer-events: auto;
  overflow: hidden;
}

/* A selected text on a path: its path, dashed, and the handle where the text starts (drag it along the path). */
.dz-engine-dom > .dz-engine-text-path {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dz-engine-text-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dz-engine-text-path-line {
  fill: none;
  stroke: var(--dz-selection, #4ea8ff);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.8;
}

.dz-engine-text-path-handle {
  fill: #ffffff;
  stroke: var(--dz-selection, #4ea8ff);
  stroke-width: 2;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.dz-engine-text-path-handle.is-dragging {
  fill: var(--dz-selection, #4ea8ff);
  cursor: grabbing;
}

@media (pointer: coarse) {
  .dz-engine-text-path-handle {
    stroke-width: 10;
    stroke-opacity: 0.25;
    paint-order: stroke;
  }
}

/* Phones and tablets: a Done button next to the text being edited (placed from code with a transform). Big enough
   for a finger (44 px), glassy like the shell's floating panels. */
.dz-engine-text-done {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  min-width: 64px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  background: rgba(var(--dzt-bar-rgb, 24, 21, 31), 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--dzt-on-bar, #ffffff);
  font: 600 15px/1 var(--font, "Manrope", ui-sans-serif, system-ui, sans-serif);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: var(--nc-hand, pointer);
}

.dz-engine-text-done:active {
  background: var(--dz-selection, #4ea8ff);
}

.dz-engine-text-done:focus-visible {
  outline: 2px solid var(--dz-selection, #4ea8ff);
  outline-offset: 2px;
}

/* Roblox's text icons, beside Done while a text is edited with a finger (text-tool.js openGlyphMenu). */
.dz-engine-text-icons {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  background: rgba(var(--dzt-bar-rgb, 24, 21, 31), 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--dzt-on-bar, #ffffff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: var(--nc-hand, pointer);
}

.dz-engine-text-icons:active {
  background: var(--dz-selection, #4ea8ff);
}

.dz-engine-text-icons:focus-visible {
  outline: 2px solid var(--dz-selection, #4ea8ff);
  outline-offset: 2px;
}

.dz-engine-text-icons svg {
  pointer-events: none;
}

/* Renaming a frame from its name on the canvas (double-click / double-tap the label). */
.dz-engine-rename {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  height: 22px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--dz-selection, #4ea8ff);
  border-radius: 5px;
  outline: none;
  background: rgba(var(--dzt-bar-rgb, 14, 12, 19), 0.96);
  color: var(--dzt-on-bar, #ffffff);
  font: 600 12px/20px var(--font, "Manrope", ui-sans-serif, system-ui, sans-serif);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}

/* Phones and tablets: 16 px so iOS does not zoom the page into the field. */
@media (pointer: coarse) {
  .dz-engine-rename {
    height: 30px;
    font-size: 16px;
    line-height: 28px;
  }
}

/* Crop mode: a small glass bar under the crop frame (ratio, Reset, Done), placed from code with a transform. */
.dz-engine-crop-bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  background: rgba(var(--dzt-bar-rgb, 24, 21, 31), 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dz-engine-crop-ratio {
  width: 96px;
  height: var(--dz-h-sm, 28px);
  font-size: var(--dz-fs-sm, 12px);
}

.dz-engine-crop-bar .dz-btn.is-small {
  min-width: 52px;
}

/* Fingers: 44 px targets. */
@media (pointer: coarse) {
  .dz-engine-crop-bar {
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
  }

  .dz-engine-crop-ratio,
  .dz-engine-crop-bar .dz-btn.is-small {
    height: 44px;
    font-size: 16px;
  }

  .dz-engine-crop-ratio {
    width: 112px;
  }

  .dz-engine-crop-bar .dz-btn.is-small {
    min-width: 64px;
    padding: 0 14px;
  }
}

/* Hidden but read by screen readers: what is selected. */
.dz-engine-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The hidden file picker of the Image tool. */
.dz-engine-file {
  display: none;
}

/* Video fills (render/videos.js): the hidden <video>s they are read from (in the page, as some browsers want). */
.dz-engine-dom > .dz-engine-media {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.dz-engine-media video {
  width: 1px;
  height: 1px;
}

/* Their calm play / pause button in the corner of a selected layer (interact/video-controls.js), placed from code
   with a transform. Only the buttons take presses. */
.dz-engine-dom > .dz-engine-video-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dz-engine-video-button {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  border-radius: 50%;
  background: rgba(var(--dzt-bar-rgb, 24, 21, 31), 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  color: var(--dzt-on-bar, #f5f3f9);
  cursor: var(--nc-hand, pointer);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--fast, 0.12s) ease, transform 0s;
}

.dz-engine-video-button[hidden] {
  display: none;
}

.dz-engine-video-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.dz-engine-video-button:hover {
  background: rgba(var(--dzt-bar-hover-rgb, 40, 35, 52), 0.9);
}

.dz-engine-video-button:focus-visible {
  outline: 2px solid var(--accent, #ff5ca8);
  outline-offset: 2px;
}

.dz-engine-video-button.is-touch {
  width: 44px;
  height: 44px;
}

.dz-engine-video-button.is-touch svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .dz-engine,
  .dz-engine * {
    transition: none !important;
    animation: none !important;
  }
}

/* Editing points: the glass bar at the bottom of the free canvas (tools, the selected points' corner radius and
   mirroring, the eraser size, a menu and Done), placed from code with a transform. */
.dz-engine-vector-bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: var(--dz-vector-bar-max, calc(100vw - 16px));
  padding: 4px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  background: rgba(var(--dzt-bar-rgb, 24, 21, 31), 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
}

.dz-engine-vector-bar::-webkit-scrollbar {
  display: none;
}

.dz-engine-vector-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.dz-engine-vector-group + .dz-engine-vector-group {
  padding-left: 6px;
  border-left: 1px solid rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1);
}

.dz-engine-vector-group[hidden],
.dz-engine-vector-field[hidden],
.dz-engine-vector-mirror[hidden] {
  display: none;
}

.dz-engine-vector-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3, rgba(255, 255, 255, 0.6));
}

.dz-engine-vector-label {
  display: inline-flex;
}

.dz-engine-vector-number {
  width: 52px;
  height: var(--dz-h-sm, 24px);
  padding: 0 6px;
  font-size: var(--dz-fs-sm, 12px);
}

.dz-engine-vector-mirror > button {
  padding: 0 4px;
}

.dz-engine-vector-done {
  min-width: 52px;
}

.dz-engine-vector-menu {
  display: grid;
  min-width: 200px;
  padding: 4px;
}

.dz-engine-vector-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text, #fff);
  font: inherit;
  font-size: var(--dz-fs-sm, 12px);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-engine-vector-item:hover:not(:disabled),
.dz-engine-vector-item:focus-visible {
  background: var(--dz-hover-bg, rgba(255, 255, 255, 0.08));
}

.dz-engine-vector-item:disabled {
  color: var(--text-3, rgba(255, 255, 255, 0.45));
  cursor: var(--nc-arrow, default);
}

/* Fingers: 44 px targets, 16 px text (no zoom on iOS). */
@media (pointer: coarse) {
  .dz-engine-vector-bar {
    gap: 8px;
    padding: 6px;
    border-radius: 14px;
  }

  .dz-engine-vector-bar .dz-btn.is-icon {
    width: 44px;
    height: 44px;
  }

  .dz-engine-vector-number {
    width: 64px;
    height: 44px;
    font-size: 16px;
  }

  .dz-engine-vector-mirror {
    height: 44px;
  }

  .dz-engine-vector-mirror > button {
    min-width: 40px;
  }

  .dz-engine-vector-done {
    height: 44px;
    min-width: 64px;
    font-size: 16px;
  }

  .dz-engine-vector-item {
    min-height: 44px;
    font-size: 16px;
  }
}

/* Simplify vector and Offset vector: the popover's rows and its Done button. */
.dz-engine-vector-pop-body {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.dz-engine-vector-row .dz-prop-controls > .dz-engine-vector-range {
  flex: 1;
  min-width: 80px;
  accent-color: var(--accent, #ff5ca8);
}

.dz-engine-vector-row .dz-prop-controls > .dz-engine-vector-value {
  flex: none;
  min-width: 28px;
  color: var(--text-2, rgba(255, 255, 255, 0.8));
  font-size: var(--dz-fs-sm, 12px);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dz-engine-vector-row .dz-engine-vector-number {
  width: auto;
}

.dz-engine-vector-pop-foot {
  display: flex;
  justify-content: flex-end;
}

@media (pointer: coarse) {
  .dz-engine-vector-pop-foot .dz-btn {
    height: 44px;
    min-width: 72px;
    font-size: 16px;
  }
}

/* More and Done stay in reach at the end of the bar while the rest scrolls under them. */
.dz-engine-vector-bar > .dz-engine-vector-group:last-child {
  position: sticky;
  right: -4px;
  margin-right: -4px;
  padding-right: 4px;
  border-radius: 0 10px 10px 0;
  background: rgba(var(--dzt-bar-rgb, 24, 21, 31), 0.98);
}

@media (pointer: coarse) {
  .dz-engine-vector-bar > .dz-engine-vector-group:last-child {
    right: -6px;
    margin-right: -6px;
    padding-right: 6px;
  }
}

/* Picture to vectors: the popover's preview (on a checkerboard for see-through parts), its rows and its buttons. */
.dz-pop.is-picker.dz-engine-trace-popover {
  width: 304px;
  max-width: calc(100vw - 16px);
}

.dz-engine-trace-pop {
  min-width: 0;
}

.dz-engine-trace-row .dz-prop-label {
  white-space: nowrap;
}

/* As a bottom sheet the popover keeps its own title and close button. */
.dz-sheet.dz-engine-trace-popover > .dz-sheet-head {
  display: none;
}

.dz-engine-trace-body {
  display: grid;
  gap: 6px;
  padding: 0 12px 8px;
}

.dz-engine-trace-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 8px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  background: var(--dz-checker, repeating-conic-gradient(#2b2637 0% 25%, #1b1724 0% 50%) 0 0 / 8px 8px);
  overflow: hidden;
}

.dz-engine-trace-canvas {
  display: block;
  max-width: 100%;
}

/* While it traces: a soft pulse over the preview. */
.dz-engine-trace-busy {
  position: absolute;
  inset: 0;
  display: none;
  background: rgba(var(--dzt-scrim-rgb, 10, 8, 16), 0.35);
  pointer-events: none;
}

.dz-engine-trace-preview.is-busy .dz-engine-trace-busy {
  display: block;
  animation: dz-engine-trace-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes dz-engine-trace-pulse {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dz-engine-trace-preview.is-busy .dz-engine-trace-busy {
    animation: none;
    opacity: 0.5;
  }
}

.dz-engine-trace-compare {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(var(--dzt-bar-rgb, 10, 8, 16), 0.55);
}

.dz-engine-trace-compare[aria-pressed="true"] {
  color: var(--accent, #ff5ca8);
}

.dz-engine-trace-row .dz-prop-controls > .dz-engine-trace-range {
  flex: 1;
  min-width: 80px;
  accent-color: var(--accent, #ff5ca8);
}

.dz-engine-trace-row .dz-prop-controls > .dz-engine-trace-value {
  flex: none;
  min-width: 28px;
  color: var(--text-2, rgba(255, 255, 255, 0.8));
  font-size: var(--dz-fs-sm, 12px);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dz-engine-trace-row .dz-prop-controls > .dz-engine-trace-select,
.dz-engine-trace-row .dz-prop-controls > .dz-engine-trace-seg {
  flex: 1;
  min-width: 0;
}

.dz-engine-trace-seg > button {
  flex: 1;
}

.dz-engine-trace-switch {
  padding: 2px 0;
}

.dz-engine-trace-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 12px;
}

.dz-engine-trace-note {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text-3, rgba(255, 255, 255, 0.6));
  font-size: var(--dz-fs-sm, 12px);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fingers: 44 px targets, 16 px text. */
@media (pointer: coarse) {
  .dz-engine-trace-foot .dz-btn {
    height: 44px;
    min-width: 72px;
    font-size: 16px;
  }

  .dz-engine-trace-row {
    min-height: 44px;
  }

  .dz-engine-trace-row .dz-engine-trace-select,
  .dz-engine-trace-seg {
    height: 44px;
    font-size: 16px;
  }

  .dz-engine-trace-compare {
    width: 44px;
    height: 44px;
  }
}