canonrs-server 0.1.0

/* ═══════════════════════════════════════════════════════════════
   LAYOUT BUILDER — Family G Composite tokens compliant
   ═══════════════════════════════════════════════════════════════ */

/* ── Drop Zone ─────────────────────────────── */
[data-rs-drop-zone] {
  width: 100%;
  min-height: var(--size-2xl);
  border: var(--composite-dropzone-border-width) var(--composite-dropzone-border-style) var(--composite-dropzone-border-color);
  border-radius: var(--builder-block-radius);
  padding: var(--composite-padding);
  background: transparent;
  position: relative;
  touch-action: none;
  transition:
    border-color var(--composite-transition-duration) var(--composite-transition-ease),
    background var(--composite-transition-duration) var(--composite-transition-ease);
}

[data-rs-drop-zone][data-rs-state~="hover"] {
  border-color: var(--builder-dropzone-active-border);
  background: var(--builder-dropzone-hover-bg);
}

[data-rs-drop-zone][data-rs-state~="dragging"] {
  border-color: var(--builder-dropzone-drag-border);
  background: var(--builder-dropzone-drag-bg);
}

[data-rs-drop-zone][data-rs-state~="active"] {
  border-color: var(--builder-dropzone-active-border);
  background: var(--builder-dropzone-hover-bg);
  box-shadow: inset 0 0 0 var(--border-thin) var(--builder-dropzone-active-border);
}

[data-rs-drop-zone-empty] {
  color: var(--theme-surface-fg-muted);
  text-align: center;
  padding: var(--composite-padding);
  pointer-events: none;
  font-size: var(--font-size-xs);
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

[data-rs-drop-zone][data-rs-state~="active"] [data-rs-drop-zone-empty] {
  opacity: var(--opacity-disabled);
}

[data-rs-drop-zone][data-rs-mode="preview"] {
  border: none;
  min-height: unset;
  background: transparent;
  padding: 0;
  pointer-events: none;
}

[data-rs-drop-zone][data-rs-mode="preview"] [data-rs-drop-zone-empty] {
  display: none;
}

/* ── Insert Line ───────────────────────────── */
[data-rs-insert-line] {
  height: var(--border-thin);
  background: transparent;
  margin: var(--space-2xs) 0;
  pointer-events: none;
  transition:
    height var(--motion-duration-fast) var(--motion-ease-standard),
    background var(--motion-duration-fast) var(--motion-ease-standard);
}

[data-rs-insert-line][data-rs-state~="active"] {
  height: var(--border-medium);
  background: var(--builder-insert-line-color);
  border-radius: var(--radius-full);
  box-shadow: 0 0 var(--space-xs) var(--builder-insert-line-color);
}

/* ── Block Preview ─────────────────────────── */
[data-rs-block-preview] {
  position: relative;
  margin-bottom: var(--builder-block-gap);
  cursor: grab;
  touch-action: none;
  transition:
    opacity var(--composite-transition-duration) var(--composite-transition-ease),
    transform var(--composite-transition-duration) var(--composite-transition-ease),
    box-shadow var(--composite-transition-duration) var(--composite-transition-ease);
}

[data-rs-block-preview][data-rs-state~="hover"] {
  transform: var(--builder-block-hover-transform);
  box-shadow: var(--shadow-sm);
}

[data-rs-block-preview][data-rs-state~="hover"] > [data-rs-block-inner] {
  border-color: var(--theme-action-primary-bg);
}

[data-rs-block-preview][data-rs-state~="hover"] > [data-rs-block-remove] {
  opacity: 1;
  transform: scale(1);
}

[data-rs-block-preview][data-rs-state~="dragging"] {
  opacity: var(--opacity-active);
  transform: scale(0.98);
  box-shadow: none;
  cursor: grabbing;
}

[data-rs-block-preview][data-rs-state~="dragging"] > [data-rs-block-remove] {
  opacity: 0;
  pointer-events: none;
}

[data-rs-block-preview][data-rs-state~="selected"] {
  transform: var(--builder-block-hover-transform);
  box-shadow: var(--shadow-md);
  border-radius: var(--builder-block-radius);
}

[data-rs-block-preview][data-rs-state~="selected"] > [data-rs-block-inner] {
  border-color: var(--theme-action-primary-bg);
}

[data-rs-block-preview][data-rs-state~="selected"] > [data-rs-block-remove] {
  opacity: 1;
}

[data-rs-block-preview][data-rs-mode="preview"] {
  cursor: default;
  outline: none;
}

[data-rs-block-preview][data-rs-mode="preview"] > [data-rs-block-remove] {
  display: none;
}

[data-rs-block-preview][data-rs-mode="builder"] {
  cursor: grab;
}

/* ── Block Inner ───────────────────────────── */
[data-rs-block-inner] {
  padding: var(--builder-block-padding);
  background: var(--builder-block-bg);
  border: var(--builder-block-border);
  border-radius: var(--builder-block-radius);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--builder-block-gap);
  transition:
    border-color var(--composite-transition-duration) var(--composite-transition-ease),
    background var(--composite-transition-duration) var(--composite-transition-ease);
}

/* ── Remove Button ─────────────────────────── */
[data-rs-block-remove] {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: var(--builder-remove-size);
  height: var(--builder-remove-size);
  border-radius: var(--radius-full);
  border: none;
  background: var(--builder-remove-bg);
  color: var(--theme-surface-bg);
  font-size: var(--font-size-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: var(--layer-dropdown);
  opacity: 0;
  transition:
    opacity var(--composite-transition-duration) var(--composite-transition-ease),
    transform var(--composite-transition-duration) var(--composite-transition-ease);
  transform: scale(0.8);
}

[data-rs-block-remove][data-rs-state~="hover"] {
  transform: scale(1.1);
}

/* ── Container Indent ──────────────────────── */
[data-rs-block-children] {
  margin-top: var(--builder-container-indent);
  padding-left: var(--builder-container-indent);
  border-left: var(--border-medium) solid var(--composite-border-color);
}

[data-rs-block-children][data-rs-mode="preview"] {
  border-left: none;
  padding-left: 0;
  margin-top: 0;
}

[data-rs-block-children][data-rs-state~="active"] {
  border-left: var(--border-medium) solid var(--builder-dropzone-active-border);
  background: var(--builder-dropzone-drag-bg);
  border-radius: var(--builder-block-radius);
}

[data-rs-block-children][data-rs-state~="active"] [data-rs-drop-zone] {
  border-color: var(--builder-dropzone-active-border);
}

/* ── Drag handle ───────────────────────────── */
[data-rs-block-preview]::before {
  content: "⠿";
  position: absolute;
  left: calc(-1 * var(--space-md));
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xs);
  color: var(--theme-surface-fg-muted);
  opacity: 0;
  transition: opacity var(--composite-transition-duration) var(--composite-transition-ease);
  cursor: grab;
  pointer-events: none;
}

[data-rs-block-preview][data-rs-state~="hover"]::before {
  opacity: var(--opacity-disabled);
}

/* ── Drop Zone layouts ──────────────────────── */
[data-rs-drop-zone][data-rs-layout="horizontal"] {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

[data-rs-drop-zone][data-rs-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--dz-cols, 3), 1fr);
  gap: var(--composite-gap);
  width: 100%;
}

[data-rs-drop-zone][data-rs-layout="vertical"] {
  display: flex;
  flex-direction: column;
}

/* ── Scroll wrapper ─────────────────────────── */
[data-rs-drop-zone-scroll] {
  overflow-y: auto;
  max-height: 100%;
  height: 100%;
}

/* ── Builder panel scroll ───────────────────── */
[data-rs-panel="canvas"] [data-rs-layout-region] {
  min-height: var(--size-2xl);
}

/* ── Block regions ──────────────────────────── */
[data-rs-block-region] {
  min-height: var(--size-2xl);
  position: relative;
  box-sizing: border-box;
}

[data-rs-block-region][data-rs-mode="builder"] [data-rs-drop-zone] {
  min-height: var(--size-2xl);
}

[data-rs-block-region][data-rs-region="content"] [data-rs-drop-zone] {
  min-height: var(--size-3xl);
}

/* ── Canon preview blocks ───────────────────── */
[data-rs-canon-slot] {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
}

[data-rs-canon-block] {
  display: block;
}

[data-rs-canon-block="card"] {
  padding: var(--space-lg);
  background: var(--theme-surface-bg);
  border: var(--border-thin) solid var(--theme-surface-border);
  border-radius: var(--radius-md);
}

[data-rs-canon-block="header"] {
  padding: var(--space-lg);
  background: var(--theme-surface-bg);
  border-bottom: var(--border-thin) solid var(--theme-surface-border);
}

[data-rs-canon-block="form"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}