/* In-place editor overlay — an editor-ui-style (Canva/DecorationToolbar) floating
   toolbar that appears when you click a text element in the preview iframe.
   Positioned in the PARENT document over the iframe; the 9-swatch palette mirrors
   editor-ui's COLOR_PALETTE. */

.ce-toolbar {
  position: fixed;
  z-index: 9000;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 12px;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  font:
    500 13px/1.2 "Segoe UI",
    system-ui,
    sans-serif;
  color: var(--s-text);
  user-select: none;
}
.ce-toolbar.is-open {
  display: inline-flex;
}
.ce-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
}
.ce-sep {
  width: 1px;
  align-self: stretch;
  margin: 3px 2px;
  background: var(--s-border);
}
.ce-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--s-text-secondary);
  font: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.ce-btn:hover {
  background: var(--s-surface-hover);
  color: var(--s-text);
}
.ce-btn.is-active {
  background: color-mix(in srgb, var(--s-primary) 15%, transparent);
  border-color: var(--s-primary);
  color: var(--s-primary);
}
.ce-btn--bold {
  font-weight: 800;
}
.ce-num {
  width: 42px;
  height: 28px;
  text-align: center;
  border: 1px solid var(--s-border);
  border-radius: 8px;
  background: var(--s-bg);
  color: var(--s-text);
  font: inherit;
}
.ce-num::-webkit-outer-spin-button,
.ce-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* color chip + its sublabel, exactly editor-ui's Text/Background pattern */
.ce-chipwrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
}
.ce-chip {
  width: 28px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid var(--s-border);
  background: var(--s-bg);
  cursor: pointer;
  padding: 3px;
  display: grid;
  place-items: stretch;
}
.ce-chip:hover {
  border-color: var(--s-text-muted);
}
.ce-chip .sw {
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.ce-sub {
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--s-text-muted);
  text-transform: none;
}

/* color popover — 9-swatch grid + hex, portaled to body */
.ce-popover {
  position: fixed;
  z-index: 9100;
  display: none;
  width: 168px;
  padding: 10px;
  border-radius: 12px;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.ce-popover.is-open {
  display: block;
}

/* photo popover — click an image slot in edit mode */
.ce-photopop {
  position: fixed;
  z-index: 9100;
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 220px;
  padding: 10px;
  border-radius: 12px;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.ce-photopop.is-open {
  display: flex;
}
.ce-photobtn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--s-border);
  background: var(--s-bg);
  color: var(--s-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.ce-photobtn:hover {
  border-color: var(--s-primary);
}
.ce-photobtn--danger {
  color: var(--s-danger);
  font-weight: 500;
}
.ce-photolabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--s-text-muted);
}
.ce-photoalt {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--s-border);
  background: var(--s-bg);
  color: var(--s-text);
  font-size: 13px;
}
.ce-photoalt:focus {
  outline: none;
  border-color: var(--s-primary);
}
.ce-photomap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--s-border);
}
.ce-photomaprow {
  display: flex;
  gap: 6px;
}
.ce-photomapid {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--s-border);
  background: var(--s-bg);
  color: var(--s-text);
  font-size: 12px;
}
.ce-photomapid:focus {
  outline: none;
  border-color: var(--s-primary);
}
.ce-photobtn--sm {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
}
.ce-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ce-swatch {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--s-border);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ce-swatch.is-active {
  outline: 2px solid var(--s-primary);
  outline-offset: 1px;
}
.ce-hexrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 5px 8px;
  border: 1px solid var(--s-border);
  border-radius: 8px;
  background: var(--s-bg);
}
.ce-hexrow span {
  color: var(--s-text-muted);
  font: 500 12px "Segoe UI", system-ui, sans-serif;
}
.ce-hex {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--s-text);
  font:
    500 12px ui-monospace,
    "Cascadia Code",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
}

/* Native picker at the right of the hex row. The wrapper IS the rainbow icon;
   the input is stretched invisibly over it purely as the hit target — styling
   the input directly makes the browser paint its value swatch on top of the
   gradient (the icon-inside-an-icon artifact). */
.ce-nativewrap {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--s-border);
  background: conic-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red);
  cursor: pointer;
}
.ce-nativewrap:hover {
  border-color: var(--s-text-muted);
}
.ce-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

/* selection chrome inside the iframe (injected into frameDoc) */
.ce-selected-outline {
  outline: 2px solid #2da84a !important;
  outline-offset: 2px !important;
  border-radius: 3px;
  cursor: text;
}
.ce-hoverable {
  cursor: pointer;
}