/* Injected into the preview iframe by the editor. Overlays live here so they scroll with the page. */
:root {
  --zxc-accent: #3565eb;
  --zxc-accent-soft: rgba(53, 101, 235, 0.1);
  --zxc-hover: rgba(53, 101, 235, 0.55);
  --zxc-ink: #1a1d23;
  --zxc-ink-2: #5b6472;
  --zxc-hairline: #e6e8ee;
  --zxc-surface: #ffffff;
  --zxc-surface-2: #f7f8fa;
  --zxc-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -8px rgba(16, 24, 40, 0.16);
  --zxc-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.zadex-preview {
  cursor: default;
}
body.zadex-preview.zx-dragging,
body.zadex-preview.zx-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}
#zadex-canvas-root {
  min-height: 40vh;
}
#zadex-canvas-root [data-zx-id] {
  outline: none;
}
/* Empty containers: ElementView renders a .zx-empty-state child (canvas/EmptyState.vue) that gives
   the container a visible, droppable body with a "+" button. Editor only: nothing of this exists on
   the live site, so an empty container collapses there. */
[data-zx-empty='true'] {
  position: relative;
}
.zx-empty-state {
  flex: 1 1 auto;
  align-self: stretch;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 96px;
  margin: 0;
  padding: 14px;
  box-sizing: border-box;
  zoom: var(--zxc-inv, 1);
  border: 1px dashed var(--zxc-hover);
  border-radius: 12px;
  background: var(--zxc-accent-soft);
  color: var(--zxc-ink-2);
  font: 400 12px/1.4 var(--zxc-font);
  text-align: center;
  pointer-events: none;
}
.zx-empty-state__add {
  pointer-events: auto;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 0 4px;
  padding: 0;
  border: 1px solid var(--zxc-accent);
  border-radius: 50%;
  background: var(--zxc-surface);
  color: var(--zxc-accent);
  cursor: pointer;
  box-shadow: var(--zxc-shadow);
  transition: background 0.15s, color 0.15s;
}
.zx-empty-state__add svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zx-empty-state__add:hover {
  background: var(--zxc-accent);
  color: #fff;
}
.zx-empty-state__add:focus-visible {
  outline: 2px solid var(--zxc-accent);
  outline-offset: 2px;
}
.zx-empty-state__title {
  font-weight: 600;
  color: var(--zxc-ink);
}
body.zadex-preview.zx-dragging .zx-empty-state {
  border-color: var(--zxc-accent);
  background: var(--zxc-accent-soft);
}
/* Elements hidden via navigator */
[data-zx-hidden='true'] {
  display: none !important;
}
/* Inline editing */
[contenteditable='true'][data-zx-editing] {
  outline: 1px dashed var(--zxc-accent);
  outline-offset: 2px;
  cursor: text;
  min-width: 1ch;
}
[contenteditable='true'][data-zx-editing]:empty::before {
  content: 'Type here';
  opacity: 0.4;
}

/* Rich text inline toolbar (text widget): a white pill with a hairline and a soft shadow, 28px buttons. */
.zx-rich-toolbar {
  position: fixed;
  z-index: 2147483002;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 0 3px;
  background: var(--zxc-surface);
  color: var(--zxc-ink);
  border: 1px solid var(--zxc-hairline);
  border-radius: 8px;
  box-shadow: var(--zxc-shadow);
  font: 600 12px/1 var(--zxc-font);
  user-select: none;
}
.zx-rich-toolbar__btn {
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--zxc-ink-2);
  font: inherit;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.zx-rich-toolbar__btn:hover {
  background: var(--zxc-surface-2);
  color: var(--zxc-ink);
}
.zx-rich-toolbar__btn.is-active {
  background: var(--zxc-accent-soft);
  color: var(--zxc-accent);
}
.zx-rich-toolbar__btn:focus-visible {
  outline: 2px solid var(--zxc-accent);
  outline-offset: -2px;
}
.zx-rich-toolbar__sep {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: var(--zxc-hairline);
}
.zx-rich-toolbar__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}
.zx-rich-toolbar__input {
  width: 220px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--zxc-hairline);
  border-radius: 6px;
  background: var(--zxc-surface);
  color: var(--zxc-ink);
  font: 400 12px var(--zxc-font);
  caret-color: var(--zxc-accent);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.zx-rich-toolbar__input:focus {
  border-color: var(--zxc-accent);
  box-shadow: 0 0 0 3px var(--zxc-accent-soft);
}

/* Overlay layer: accent hairline outlines; the selection toolbar is a white pill floating above. */
.zx-overlay {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  box-sizing: border-box;
  transition: none;
}
.zx-overlay--hover {
  outline: 1px solid var(--zxc-hover);
  outline-offset: -1px;
}
.zx-overlay--selected {
  outline: 1px solid var(--zxc-accent);
  outline-offset: -1px;
  box-shadow: 0 0 0 3px var(--zxc-accent-soft);
}
.zx-overlay__label {
  position: absolute;
  top: -36px;
  inset-inline-start: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
  box-sizing: border-box;
  background: var(--zxc-surface);
  color: var(--zxc-ink);
  border: 1px solid var(--zxc-hairline);
  border-radius: 8px;
  box-shadow: var(--zxc-shadow);
  font: 600 12px/1 var(--zxc-font);
  white-space: nowrap;
  pointer-events: auto;
}
/* Only the toolbar's buttons take the pointer; the pill itself lets clicks reach whatever sits under it,
   so a floating toolbar never blocks a neighbouring element. */
.zx-overlay--selected .zx-overlay__label {
  pointer-events: none;
}
.zx-overlay--selected .zx-overlay__label .zx-overlay__btn {
  pointer-events: auto;
}
/* No room above: the toolbar moves below the selection, and only as a last resort inside its top-end
   corner (away from tab titles and headings that start at the top-start corner). */
.zx-overlay__label.is-below {
  top: auto;
  bottom: -36px;
}
.zx-overlay__label.is-inside {
  top: 6px;
  inset-inline-start: auto;
  inset-inline-end: 6px;
  transform-origin: 100% 0;
}
.zx-overlay--hover .zx-overlay__label {
  top: -28px;
  height: 22px;
  padding: 0 8px;
  font-weight: 500;
  font-size: 11px;
  color: var(--zxc-ink-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  pointer-events: none;
}
.zx-overlay--hover .zx-overlay__label.is-inside {
  top: 6px;
}
.zx-overlay__btn {
  width: 28px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--zxc-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: background-color 150ms, color 150ms;
}
.zx-overlay__btn:hover {
  background: var(--zxc-surface-2);
  color: var(--zxc-ink);
}
.zx-overlay__btn:active {
  background: var(--zxc-accent-soft);
  color: var(--zxc-accent);
}
.zx-overlay__btn:focus-visible {
  outline: 2px solid var(--zxc-accent);
  outline-offset: -2px;
}
.zx-overlay__btn--drag {
  cursor: grab;
}
.zx-overlay__btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zx-overlay__name {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  margin-inline-end: 2px;
  border-inline-end: 1px solid var(--zxc-hairline);
  color: var(--zxc-ink);
}

/* Drop indicator: a 2px accent line with a white halo; "inside" is an accent-soft fill with a dashed hairline. */
.zx-drop-indicator {
  position: fixed;
  z-index: 2147483001;
  pointer-events: none;
  background: var(--zxc-accent);
  border-radius: 999px;
  box-shadow: 0 0 0 1px #fff;
}
.zx-drop-indicator::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zxc-accent);
  box-shadow: 0 0 0 1px #fff;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: none;
}
.zx-drop-indicator--inside {
  background: var(--zxc-accent-soft);
  border-radius: 6px;
  outline: 1px dashed var(--zxc-accent);
  outline-offset: -1px;
  box-shadow: none;
}
.zx-drop-indicator--horizontal {
  height: 2px;
}
.zx-drop-indicator--vertical {
  width: 2px;
}

/* Root empty state */
.zx-canvas-empty {
  zoom: var(--zxc-inv, 1);
  margin: 40px auto;
  max-width: 560px;
  padding: 32px 24px 28px;
  text-align: center;
  border: 1px dashed var(--zxc-hover);
  border-radius: 12px;
  background: var(--zxc-surface);
  color: var(--zxc-ink-2);
  font: 13px/1.5 var(--zxc-font);
}
.zx-canvas-empty strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--zxc-ink);
}
.zx-canvas-empty > button {
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 0;
  background: var(--zxc-accent);
  color: #fff;
  font: 600 13px inherit;
  cursor: pointer;
}
.zx-canvas-empty__hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--zxc-ink-2);
}
.zx-canvas-empty button.zx-canvas-empty__link {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--zxc-accent);
  font: 600 12px inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Server-rendered preview: loading skeleton (a quiet opacity pulse, no gradients) + error state */
.zx-server-loading {
  position: relative;
  min-height: 24px;
}
.zx-server-loading > .zx-server-html {
  opacity: 0.55;
  transition: opacity 0.15s;
  animation: zx-server-pulse 1.4s ease-in-out infinite;
}
.zx-server-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  min-height: 56px;
  border: 1px dashed var(--zxc-hairline);
  border-radius: 8px;
  box-sizing: border-box;
  background: var(--zxc-surface-2);
}
.zx-server-skeleton__line {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(26, 29, 35, 0.08);
  animation: zx-server-pulse 1.4s ease-in-out infinite;
}
.zx-server-skeleton__line:nth-child(2) {
  animation-delay: 0.15s;
}
.zx-server-skeleton__line:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes zx-server-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zx-server-loading > .zx-server-html,
  .zx-server-skeleton__line {
    animation: none;
  }
}
.zx-server-error {
  padding: 12px;
  border: 1px dashed #d93a3a;
  border-radius: 8px;
  background: rgba(217, 58, 58, 0.06);
  color: #d93a3a;
  font: 12px/1.4 var(--zxc-font);
  word-break: break-word;
}

/* ===== Sections: the designed gap between top-level sections, the add strip, the structure picker =====
   Everything here is editor chrome inside the sheet: it counter-scales with --zxc-inv (set by Canvas.vue)
   so it renders 1:1 when the sheet is scaled down. Fixed layers use transform; in-flow blocks use zoom. */
.zx-section-gap {
  position: fixed;
  z-index: 2147482990;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.zx-section-gap__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--zxc-accent);
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.zx-section-gap__add {
  --zx-gap-s: 0.85;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--zxc-accent);
  border-radius: 50%;
  background: var(--zxc-surface);
  color: var(--zxc-accent);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: scale(calc(var(--zxc-inv, 1) * var(--zx-gap-s)));
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, background 0.15s, color 0.15s;
  box-shadow: var(--zxc-shadow);
}
.zx-section-gap__add svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zx-section-gap.is-hovered .zx-section-gap__line,
.zx-section-gap:focus-within .zx-section-gap__line {
  opacity: 1;
}
.zx-section-gap.is-hovered .zx-section-gap__add,
.zx-section-gap:focus-within .zx-section-gap__add {
  --zx-gap-s: 1;
  opacity: 1;
  pointer-events: auto;
}
.zx-section-gap__add:hover {
  background: var(--zxc-accent);
  color: #fff;
}
.zx-section-gap__add:focus-visible {
  outline: 2px solid var(--zxc-accent);
  outline-offset: 2px;
}

.zx-add-section-strip {
  zoom: var(--zxc-inv, 1);
  padding: 20px 16px 28px;
}
.zx-add-section-strip__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--zx-content-width, 1140px);
  height: 56px;
  margin: 0 auto;
  padding: 0;
  border: 1px dashed var(--zxc-hover);
  border-radius: 12px;
  background: transparent;
  color: var(--zxc-accent);
  font: 500 13px/1 var(--zxc-font);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.zx-add-section-strip__btn:hover {
  border-style: solid;
  border-color: var(--zxc-accent);
  background: var(--zxc-accent-soft);
}
.zx-add-section-strip__btn:focus-visible {
  outline: 2px solid var(--zxc-accent);
  outline-offset: 2px;
}
.zx-add-section-strip__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--zxc-accent);
  border-radius: 50%;
  background: var(--zxc-surface);
  color: var(--zxc-accent);
}
.zx-add-section-strip__plus svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zx-structure-picker {
  position: fixed;
  z-index: 2147483002;
  padding: 10px 12px 12px;
  border: 1px solid var(--zxc-hairline);
  border-radius: 12px;
  background: var(--zxc-surface);
  color: var(--zxc-ink);
  box-shadow: var(--zxc-shadow);
  font: 13px/1.4 var(--zxc-font);
  transform: scale(var(--zxc-inv, 1));
  transform-origin: top left;
  animation: zx-pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes zx-pop {
  from {
    opacity: 0;
    transform: scale(calc(var(--zxc-inv, 1) * 0.96)) translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .zx-structure-picker {
    animation: none;
  }
}
.zx-structure-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.zx-structure-picker__title {
  font-weight: 600;
}
.zx-structure-picker__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--zxc-ink-2);
  cursor: pointer;
}
.zx-structure-picker__close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zx-structure-picker__close:hover {
  background: var(--zxc-surface-2);
  color: var(--zxc-ink);
}

.zx-structure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.zx-structure-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 5px 6px;
  border: 1px solid var(--zxc-hairline);
  border-radius: 8px;
  background: var(--zxc-surface);
  color: var(--zxc-ink-2);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.zx-structure-grid__item:hover,
.zx-structure-grid__item:focus-visible {
  border-color: var(--zxc-accent);
  color: var(--zxc-ink);
  outline: none;
}
.zx-structure-grid__item.is-active {
  border-color: var(--zxc-accent);
  background: var(--zxc-accent-soft);
  color: var(--zxc-accent);
}
.zx-structure-grid__diagram {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 22px;
}
.zx-structure-grid__diagram i {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  border: 1px solid currentColor;
  border-radius: 3px;
  box-sizing: border-box;
  opacity: 0.85;
}
.zx-structure-grid__label {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.zx-canvas-empty__structures {
  max-width: 372px;
  margin: 16px auto 12px;
  text-align: initial;
}
.zx-canvas-empty .zx-canvas-empty__link {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--zxc-accent);
  font: 500 12px var(--zxc-font);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Overlay toolbar and rich-text toolbar stay 1:1 under sheet scaling */
.zx-overlay__label {
  transform: scale(var(--zxc-inv, 1));
  transform-origin: 0 100%;
}
.zx-rich-toolbar {
  transform: scale(var(--zxc-inv, 1));
  transform-origin: 0 100%;
}

/* RTL (T218): the toolbar sits at the inline-start (right) corner, so 1:1 counter-scaling must grow from
   there, not from the left, or it spills past the element (and the sheet) on scaled devices. */
[dir='rtl'] .zx-overlay__label {
  transform-origin: 100% 100%;
}
[dir='rtl'] .zx-overlay__label.is-inside {
  transform-origin: 0 0;
}
/* Arabic glyphs are taller than Latin ones: line-height 1 clips them in the structure tiles. */
[dir='rtl'] .zx-structure-grid__label {
  line-height: 1.35;
}

/* Theme templates (site header/footer) around the edited document: visible context, never editable here.
   TemplateRenderer strips their element markers and adds data-zx-context in the editor preview. */
[data-zx-context='template'] {
  pointer-events: none;
  user-select: none;
}