/**
 * DOM Slide Editor — primary editor surface styles
 */

.qss-dom-editor-root {
  margin: 0 auto;
}

.qss-editor-viewport {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.qss-editor-stage-shell {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  border-radius: 8px;
}

.qss-editor-stage {
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

.qss-slide-page.qss-anim-playing {
  overflow: visible;
}

.qss-slide-page {
  position: relative;
  overflow: hidden;
  background: var(--qss-bg, #0b0f19);
  color: var(--qss-text, #f8fafc);
  border: 4px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-family: var(--qss-body-font, 'Inter', 'Be Vietnam Pro', 'Noto Sans', sans-serif);
}

.qss-editor-interaction-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}

.qss-editor-interaction-layer .qss-bounding-box {
  pointer-events: none;
}

.qss-editor-interaction-layer .qss-resize-handle {
  pointer-events: auto;
}

.qss-editor-node {
  cursor: default;
  touch-action: none;
  min-width: 20px;
  min-height: 20px;
}

/* Text nodes: never clip glyphs — box height is grown by TextMeasurementService */
.qss-editor-node--text,
.qss-editor-node--list {
  overflow: visible !important;
  box-sizing: border-box;
}

.qss-editor-node[data-qss-overflow="true"] {
  outline: 2px dashed rgba(245, 158, 11, 0.75);
  outline-offset: 2px;
}

.qss-editor-node h1[data-qss-role="header"],
.qss-editor-node h2[data-qss-role="header"],
.qss-editor-node h3[data-qss-role="header"],
.qss-editor-node h4[data-qss-role="header"],
.qss-editor-node p[data-qss-animate-item],
.qss-editor-node li[data-qss-animate-item],
.qss-editor-node blockquote[data-qss-animate-item] {
  will-change: opacity, transform, filter;
}

.qss-editor-node--text[contenteditable] {
  cursor: text;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
}

.qss-editor-node--text[contenteditable]:focus {
  outline: 2px solid rgba(99, 102, 241, 0.6);
  outline-offset: 2px;
}

.qss-editor-node--text.node-role-title {
  font-weight: 700;
  line-height: 1.2;
}

.qss-editor-node--text.node-role-body,
.qss-editor-node--text.node-type-text {
  line-height: 1.6;
}

.qss-editor-node--text h1,
.qss-editor-node--text h2,
.qss-editor-node--text h3,
.qss-editor-node--text h4 {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
}

/* Fitted typography: inner semantic tags inherit slot size (beats theme h1/h2/p rules) */
.qss-editor-node[data-qss-fitted="true"] h1,
.qss-editor-node[data-qss-fitted="true"] h2,
.qss-editor-node[data-qss-fitted="true"] h3,
.qss-editor-node[data-qss-fitted="true"] h4,
.qss-editor-node[data-qss-fitted="true"] p,
.qss-editor-node[data-qss-fitted="true"] li,
.qss-editor-node[data-qss-fitted="true"] blockquote,
.qss-editor-node[data-qss-fitted="true"] ul,
.qss-editor-node[data-qss-fitted="true"] ol {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

.qss-editor-node--text p {
  margin: 0;
}

.qss-editor-node--text blockquote.slide-quote,
.qss-editor-node--text blockquote.slide-example {
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--qss-primary, #6366f1);
  border-radius: 0 8px 8px 0;
  background: rgba(99, 102, 241, 0.08);
  font-style: italic;
}

.qss-editor-node--text blockquote.slide-example {
  border-left-color: var(--qss-accent, #06b6d4);
  background: rgba(6, 182, 212, 0.08);
  font-style: normal;
}

.qss-editor-node--text pre {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  overflow: auto;
}

.qss-editor-node--text pre code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
}

.qss-editor-node--list ul {
  margin: 0;
  padding-left: 1.35em;
  list-style-type: disc;
}

.qss-editor-node--list li {
  margin-bottom: 0.35em;
  line-height: 1.45;
}

.qss-editor-node--list ul[contenteditable] {
  cursor: text;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
  outline: none;
}

.qss-editor-node--list ul[contenteditable]:focus {
  outline: 2px solid rgba(99, 102, 241, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

.qss-editor-node--list li::marker {
  color: var(--qss-color-primary, var(--qss-primary, #2563eb));
}

.qss-editor-node--text .qss-text-role-header1 h1,
.qss-editor-node--text h1 {
  color: var(--qss-color-title, var(--qss-color-primary, inherit));
}

.qss-slide-page.layout-content .qss-editor-node--list,
.qss-slide-page.layout-title-content .qss-editor-node--list {
  background: var(--qss-color-surface, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--qss-color-border, rgba(0, 0, 0, 0.06));
  border-radius: 12px;
  padding: 16px 20px;
  box-sizing: border-box;
}

.qss-editor-node--image {
  padding: 0;
  overflow: hidden;
}

.qss-editor-node--shape {
  border-radius: var(--qss-radius, 8px);
}

.qss-slide-page .qss-safe-area-overlay {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(0, 242, 254, 0.35);
  pointer-events: none;
  z-index: 8000;
  box-sizing: border-box;
}