/* editorDropFeedback.css */
/* Editor feedback has its own legible palette, independent of website colors. */
.editor-drop-hint {
  display: grid; gap: 5px; padding: 10px 13px; border: 1px solid #67e8f9;
  border-radius: 12px; background: #083344; color: #ecfeff;
  box-shadow: 0 8px 24px #02061730, 0 1px 3px #02061730;
  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
}
.editor-drop-hint[data-editor-drop-feedback-tone="blocked"] { border-color: #fda4af; background: #4c0519; color: #fff1f2; }
.editor-drop-hint[data-editor-drop-feedback-tone="current"] { border-color: #94a3b8; background: #1e293b; color: #f1f5f9; }
.editor-drop-hint-heading { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.editor-drop-hint-detail { padding-left: 23px; font-size: 11px; overflow-wrap: anywhere; }
.editor-drop-hint-heading svg { width: 16px; height: 16px; flex-shrink: 0; }
[data-editor-drop-zone][data-editor-drop-is-over="true"] { border-radius: 6px; }
[data-editor-drop-zone][data-editor-drop-is-over="true"][data-editor-drop-can-drop="true"] > [data-editor-insertion-line],
[data-editor-chrome-library-drop-active="true"] > [data-editor-insertion-line] { background: #0891b2; box-shadow: 0 0 0 3px #22d3ee30; }
[data-editor-insertion-line] { pointer-events: none; }
[data-editor-drop-is-over="true"][data-editor-drop-can-drop="true"] > [data-editor-insertion-line]::before,
[data-editor-chrome-library-drop-active="true"] > [data-editor-insertion-line]::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid white; background: #0e7490;
  box-shadow: 0 0 0 1px #0891b2;
}
.editor-empty-content[data-editor-empty-column-surface] {
  border: 1px dashed #a5d4de; background: linear-gradient(135deg, #f8fdff, #ecfaff);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.editor-empty-content[data-editor-empty-column-surface]:hover { border-color: #0891b2; }
.editor-empty-content[data-editor-drop-is-over="true"][data-editor-drop-can-drop="false"][data-editor-drop-rejection-visible="true"] {
  border-color: #fb7185; background: #fff1f2 !important; box-shadow: inset 0 0 0 1px #fb7185;
}
.editor-empty-content[data-editor-drop-is-over="true"][data-editor-drop-can-drop="false"][data-editor-drop-rejection-visible="true"] .editor-empty-content-add { background: #fff1f2 !important; color: #9f1239 !important; border-color: #fda4af !important; }
[data-form-drop-target][data-form-drop-active="true"] { outline: 1px dashed #0891b270; outline-offset: -1px; }
[data-form-drop-target][data-form-drop-hover="true"] { outline: 2px solid #0891b2; outline-offset: -1px; box-shadow: 0 0 0 3px #22d3ee30; }
[data-form-drop-target][data-form-drop-blocked="true"] { outline-color: #e11d48; background: #fff1f2 !important; }
.editor-form-drag-hint { pointer-events: none; position: fixed; z-index: 150; max-width: min(300px, calc(100vw - 16px)); }
@media (prefers-reduced-motion: reduce) {
  .editor-empty-content[data-editor-empty-column-surface] { transition: none; }
}

/* editorCanvasSpacing.css */
.editor-canvas-spacing {
  z-index: 108;
  overflow: hidden;
  pointer-events: none;
  color: #0e7490;
  font: 11px/1.35 ui-sans-serif, system-ui, sans-serif;
  --spacing-ink: #0891b2;
  --spacing-line: rgba(8, 145, 178, .38);
}
.editor-canvas-spacing-band {
  box-sizing: border-box;
  pointer-events: none;
  background: rgba(6, 182, 212, .09);
  opacity: .7;
  transition: background-color 100ms ease, opacity 100ms ease;
}
.editor-canvas-spacing-band[data-side="top"] { border-bottom: 1px solid var(--spacing-line); }
.editor-canvas-spacing-band[data-side="right"] { border-left: 1px solid var(--spacing-line); }
.editor-canvas-spacing-band[data-side="bottom"] { border-top: 1px solid var(--spacing-line); }
.editor-canvas-spacing-band[data-side="left"] { border-right: 1px solid var(--spacing-line); }
.editor-canvas-spacing[data-selected="false"] .editor-canvas-spacing-band { opacity: .45; }
.editor-canvas-spacing[data-revealed="false"]:not(:focus-within) .editor-canvas-spacing-band { opacity: 0; }
.editor-canvas-spacing[data-revealed="false"]:not(:focus-within) .editor-canvas-spacing-handle { opacity: 0; pointer-events: none; }
.editor-canvas-spacing-band[data-active="true"] { background: rgba(6, 182, 212, .2); opacity: 1; }
.editor-canvas-spacing-handle {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--spacing-ink);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transform: translate(-50%, -50%);
  cursor: ns-resize;
}
.editor-canvas-spacing-handle[data-side="left"], .editor-canvas-spacing-handle[data-side="right"] { width: 18px; height: 26px; cursor: ew-resize; }
.editor-canvas-spacing-handle > span {
  width: 16px;
  height: 4px;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 4px;
  background: var(--spacing-ink);
  box-shadow: 0 0 0 1px rgba(8, 145, 178, .35), 0 1px 3px rgba(15, 23, 42, .16);
  transition: box-shadow 100ms ease;
}
.editor-canvas-spacing-handle[data-side="left"] > span, .editor-canvas-spacing-handle[data-side="right"] > span { width: 4px; height: 16px; }
.editor-canvas-spacing-handle:hover > span, .editor-canvas-spacing-handle[data-active="true"] > span { box-shadow: 0 0 0 3px rgba(6, 182, 212, .19), 0 1px 3px rgba(15, 23, 42, .16); }
.editor-canvas-spacing-handle:focus-visible { outline: 2px solid #0e7490; outline-offset: 1px; background: rgba(255, 255, 255, .95); }
.editor-canvas-spacing-readout {
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 5px;
  background: #0e7490;
  color: white;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .15);
  font: 600 12px/1.3 ui-monospace, monospace;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.editor-canvas-spacing-readout > span { opacity: .8; font-size: 10px; font-weight: 400; }
.editor-canvas-spacing-sr { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
@media (pointer: coarse) {
  /* Touch has no hover: reserve compact grips for the selected source owner. */
  .editor-canvas-spacing[data-selected="false"], [data-editor-gap-hover-owner] { display: none; }
  .editor-canvas-spacing-handle > span { min-width: 20px; min-height: 5px; }
  .editor-canvas-spacing-handle[data-side="left"] > span, .editor-canvas-spacing-handle[data-side="right"] > span { min-width: 5px; min-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .editor-canvas-spacing-band, .editor-canvas-spacing-handle > span { transition: none; }
}