/* =====================================================================================================
   Zadex editor shell - "grouped-inset settings panels"
   -----------------------------------------------------------------------------------------------------
   A calm settings surface around the page sheet. Cool light-gray ground, white panels, 1px hairlines,
   10-12px radii, one system sans at 13px (hierarchy by size and weight only), one blue accent confined
   to edges and states (selection, active segment, focus ring, toggle-on) plus the single Publish button.
   Dark mode is the same world on a graphite ground (tokens flip under html.zx-dark).

   Sections:  1 tokens  2 base + browser surfaces  3 buttons + icons  4 segmented controls  5 top bar
              6 sidebar + panels  7 groups (sections) + rows  8 inputs  9 controls (switch, slider,
              units, choose, dimensions, color, group, repeater, media, icon picker)  10 widgets panel
              11 canvas sheet  12 navigator  13 history / global / page  14 palette + dialogs
              15 context menu  16 toast + drag ghost  17 misc  18 dark-mode specifics  19 motion
   Every class that components or tests hook into is kept (see docs/design/editor-direction.md).
   ===================================================================================================== */

/* ===== 1. Tokens ===== */
:root {
  --zx-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --zx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --zx-bg: #f4f5f8;
  --zx-surface: #ffffff;
  --zx-surface-2: #f7f8fa;
  --zx-surface-3: #eceef2;
  --zx-border: #e6e8ee;
  --zx-border-strong: #d5d9e2;
  --zx-text: #1a1d23;
  --zx-text-2: #5b6472;
  /* Ghost values and placeholders are read as text, so text-3 sits at 4.6:1 on white (spec #98a1ae is 2.7:1). */
  --zx-text-3: #6d7684;
  /* One hue. Accent is a hair deeper than the spec's #3b6ef5 so white on the Publish fill clears 4.5:1. */
  --zx-accent: #3565eb;
  --zx-accent-fill: #3565eb;
  --zx-on-accent: #ffffff;
  --zx-accent-soft: rgba(53, 101, 235, 0.1);
  --zx-selection: rgba(53, 101, 235, 0.2);
  --zx-danger: #d93a3a;
  --zx-danger-soft: rgba(217, 58, 58, 0.1);
  --zx-success: #1f9d55;

  --zx-radius: 12px;
  --zx-radius-md: 10px;
  --zx-radius-sm: 8px;
  --zx-row-h: 32px;
  --zx-control-h: 30px;
  --zx-topbar-h: 52px;
  --zx-sidebar-w: 336px;
  --zx-navigator-w: 280px;

  --zx-shadow-sheet: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 32px -12px rgba(16, 24, 40, 0.18);
  --zx-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -8px rgba(16, 24, 40, 0.16);
  --zx-shadow-seg: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px rgba(16, 24, 40, 0.04);
  --zx-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --zx-ring: 0 0 0 3px var(--zx-accent-soft);
  --zx-focus: 0 0 0 3px var(--zx-accent-soft);

  --zx-ease: cubic-bezier(0.2, 0, 0, 1);
  --zx-t-fast: 150ms;
  --zx-t: 180ms;
  color-scheme: light;
}
.zx-dark {
  --zx-bg: #131518;
  --zx-surface: #1b1e24;
  --zx-surface-2: #22262d;
  --zx-surface-3: #2a2f37;
  --zx-border: #2b3038;
  --zx-border-strong: #3a404a;
  --zx-text: #e8eaee;
  --zx-text-2: #a8b0bc;
  --zx-text-3: #858d99;
  --zx-accent: #5b8cff;
  --zx-accent-fill: #3565eb;
  --zx-on-accent: #ffffff;
  --zx-accent-soft: rgba(91, 140, 255, 0.18);
  --zx-selection: rgba(91, 140, 255, 0.3);
  --zx-danger: #ff6b6b;
  --zx-danger-soft: rgba(255, 107, 107, 0.14);
  --zx-success: #3ecf7a;
  --zx-shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --zx-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px -8px rgba(0, 0, 0, 0.6);
  --zx-shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --zx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* ===== 2. Base + browser surfaces ===== */
html.zadex-editor-html,
body.zadex-editor-body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--zx-bg);
}
#zadex-editor,
.zx-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font: 13px/1.45 var(--zx-font);
  color: var(--zx-text);
  background: var(--zx-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.zx-app *,
.zx-app *::before,
.zx-app *::after {
  box-sizing: border-box;
}
/* Element resets sit at zero specificity (:where) so component classes always win. */
:where(.zx-app) button,
:where(.zx-app) input,
:where(.zx-app) select,
:where(.zx-app) textarea {
  font: inherit;
  color: inherit;
}
:where(.zx-app) button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  border-radius: var(--zx-radius-sm);
}
:where(.zx-app) button:disabled {
  cursor: default;
}
.zx-app ::selection {
  background: var(--zx-selection);
  color: inherit;
}
.zx-app input,
.zx-app textarea,
.zx-app [contenteditable] {
  caret-color: var(--zx-accent);
}
.zx-app :focus-visible {
  outline: 2px solid var(--zx-accent);
  outline-offset: 1px;
}
.zx-app kbd,
.zx-app code {
  font-family: var(--zx-mono);
}
/* Thin themed scrollbars: ground-colored track, border-strong thumb. */
.zx-app * {
  scrollbar-width: thin;
  scrollbar-color: var(--zx-border-strong) transparent;
}
.zx-app *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.zx-app *::-webkit-scrollbar-track {
  background: transparent;
}
.zx-app *::-webkit-scrollbar-thumb {
  background: var(--zx-border-strong);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
.zx-app *::-webkit-scrollbar-thumb:hover {
  background-color: var(--zx-text-3);
}
.zx-app--dragging,
.zx-app--dragging * {
  cursor: grabbing !important;
  user-select: none;
}
.zx-app__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ===== 3. Buttons + icons ===== */
.zx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: var(--zx-radius-sm);
  color: var(--zx-text-2);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), border-color var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease), transform var(--zx-t-fast) var(--zx-ease);
}
.zx-btn:hover {
  background: var(--zx-surface-2);
  color: var(--zx-text);
}
.zx-btn:active {
  background: var(--zx-surface-3);
}
.zx-btn.is-active {
  background: var(--zx-accent-soft);
  color: var(--zx-accent);
}
.zx-btn:disabled {
  opacity: 0.45;
  background: none;
  color: var(--zx-text-2);
}
.zx-btn--icon {
  padding: 0;
  width: 32px;
}
.zx-btn--sm {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  font-size: 12px;
}
.zx-btn--sm.zx-btn--icon {
  width: 28px;
  padding: 0;
}
.zx-btn--ghost {
  border: 1px solid var(--zx-border);
  background: var(--zx-surface);
  color: var(--zx-text);
}
.zx-btn--ghost:hover {
  background: var(--zx-surface-2);
  border-color: var(--zx-border-strong);
}
.zx-btn--ghost:active {
  background: var(--zx-surface-3);
}
.zx-btn--ghost:disabled {
  background: var(--zx-surface);
  color: var(--zx-text);
}
.zx-btn--primary {
  background: var(--zx-accent-fill);
  color: var(--zx-on-accent);
  font-weight: 600;
  padding: 0 14px;
}
.zx-btn--primary:hover {
  background: #2c5ad6;
  color: var(--zx-on-accent);
}
.zx-btn--primary:active {
  background: #2650c0;
}
.zx-btn--primary:disabled {
  background: var(--zx-accent-fill);
  color: var(--zx-on-accent);
}
.zx-btn--danger:hover {
  background: var(--zx-danger-soft);
  color: var(--zx-danger);
}
.zx-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.zx-icon--sm {
  width: 14px;
  height: 14px;
}
.zx-icon--lg {
  width: 22px;
  height: 22px;
}

/* ===== 4. Segmented controls =====
   One vocabulary for the device switcher, settings tabs, state bar, theme groups and choose groups:
   a surface-3 track, the active segment lifted in white with a soft shadow. */
.zx-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 3px;
  border-radius: 999px;
  background: var(--zx-surface-3);
  flex-shrink: 0;
}
.zx-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--zx-text-2);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease);
}
.zx-seg__btn:hover {
  color: var(--zx-text);
}
.zx-seg__btn.is-active {
  background: var(--zx-surface);
  color: var(--zx-accent);
  box-shadow: var(--zx-shadow-seg);
}
.zx-seg__btn:disabled {
  opacity: 0.4;
}
.zx-seg__btn:focus-visible {
  outline-offset: -2px;
}
.zx-seg--icon .zx-seg__btn {
  width: 32px;
  min-width: 32px;
  padding: 0;
}
.zx-seg--sm {
  height: 28px;
  padding: 2px;
  border-radius: 8px;
}
.zx-seg--sm .zx-seg__btn {
  height: 24px;
  min-width: 28px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 12px;
}
.zx-seg--block {
  display: flex;
  width: 100%;
}
.zx-seg--block .zx-seg__btn {
  flex: 1;
}

/* ===== 5. Top bar ===== */
.zx-topbar {
  height: var(--zx-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--zx-surface);
  border-bottom: 1px solid var(--zx-border);
  flex-shrink: 0;
}
.zx-topbar__zone {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.zx-topbar__zone--start,
.zx-topbar__zone--end {
  flex: 1 1 0;
}
.zx-topbar__zone--end {
  justify-content: flex-end;
}
.zx-topbar__zone--center {
  flex: 0 0 auto;
}
.zx-topbar__group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.zx-topbar__spacer {
  flex: 1;
}
.zx-topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--zx-text);
  padding-inline-end: 6px;
  flex-shrink: 0;
}
.zx-topbar__logo::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zx-accent);
  margin-top: 5px;
}
.zx-topbar__sep {
  width: 1px;
  height: 20px;
  background: var(--zx-border);
  flex-shrink: 0;
}
.zx-topbar__title {
  min-width: 0;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--zx-text-2);
  padding-inline: 4px;
}
/* Quiet device-size pill next to the switcher (only when a device mode is active). */
.zx-topbar__device {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--zx-border);
  color: var(--zx-text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Status pill: a dot carries the state; the text stays neutral. */
.zx-topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 6px;
  font-size: 12px;
  color: var(--zx-text-2);
  white-space: nowrap;
}
.zx-topbar__status.is-empty {
  display: none;
}
.zx-topbar__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zx-success);
  flex-shrink: 0;
}
.zx-topbar__status--dirty::before {
  background: var(--zx-text-3);
}
.zx-topbar__status--saving::before {
  background: var(--zx-accent);
  animation: zx-pulse 1.2s ease-in-out infinite;
}
.zx-topbar__status--error {
  color: var(--zx-danger);
}
.zx-topbar__status--error::before {
  background: var(--zx-danger);
}
.zx-topbar .zx-btn--ghost,
.zx-topbar .zx-btn--primary {
  height: 34px;
  padding: 0 14px;
  font-weight: 600;
}
@media (max-width: 1180px) {
  .zx-topbar__status-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .zx-topbar__status {
    padding: 0 4px;
  }
  .zx-topbar__title {
    max-width: 140px;
  }
}

/* ===== 6. Sidebar + panels ===== */
.zx-sidebar {
  width: var(--zx-sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--zx-surface);
  border-inline-end: 1px solid var(--zx-border);
  min-height: 0;
}
.zx-sidebar__header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid var(--zx-border);
  flex-shrink: 0;
}
.zx-sidebar__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zx-sidebar__body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.zx-sidebar__body > * {
  flex-shrink: 0;
}
.zx-sidebar__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--zx-border);
  flex-shrink: 0;
}
/* Settings tabs: a full-width segmented control inside the 12px inset. */
.zx-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 12px 12px 0;
  padding: 3px;
  height: 34px;
  border-radius: 999px;
  background: var(--zx-surface-3);
  flex-shrink: 0;
}
.zx-tabs__tab {
  flex: 1;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--zx-text-2);
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease);
}
.zx-tabs__tab:hover {
  color: var(--zx-text);
}
.zx-tabs__tab.is-active {
  background: var(--zx-surface);
  color: var(--zx-accent);
  box-shadow: var(--zx-shadow-seg);
}
.zx-tabs__tab:disabled {
  opacity: 0.4;
}
.zx-tabs__tab:focus-visible {
  outline-offset: -2px;
}
/* State bar (Normal / Hover / Active ...): a small segmented control on its own row. */
.zx-state-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 0;
  flex-shrink: 0;
}
.zx-state-bar__label {
  font-size: 12px;
  color: var(--zx-text-2);
  flex-shrink: 0;
}
.zx-state-bar .zx-seg {
  flex: 1;
  display: flex;
}
.zx-state-bar .zx-seg__btn {
  flex: 1;
}
/* ===== 7. Groups (sections) + rows =====
   A section is a group: a title row, then a white inset card whose rows are separated by hairlines. */
.zx-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zx-section__header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 24px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: start;
  color: var(--zx-text-2);
  border-radius: 6px;
  transition: color var(--zx-t-fast) var(--zx-ease), background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-section__header:hover {
  color: var(--zx-text);
  background: var(--zx-surface-2);
}
.zx-section__header .zx-icon {
  margin-inline-start: auto;
  width: 14px;
  height: 14px;
  color: var(--zx-text-3);
  transition: transform var(--zx-t) var(--zx-ease);
}
.zx-section.is-open .zx-section__header .zx-icon {
  transform: rotate(180deg);
}
.zx-section__body {
  display: flex;
  flex-direction: column;
  background: var(--zx-surface);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-md);
  box-shadow: var(--zx-shadow-card);
  overflow: visible;
}
.zx-section__body > * + * {
  border-top: 1px solid var(--zx-border);
}
.zx-section__body > *:first-child {
  border-start-start-radius: var(--zx-radius-md);
  border-start-end-radius: var(--zx-radius-md);
}
.zx-section__body > *:last-child {
  border-end-start-radius: var(--zx-radius-md);
  border-end-end-radius: var(--zx-radius-md);
}
/* Generic children of a card (descriptions, lists, button rows) get the row inset. */
.zx-section__body > .zx-field__desc,
.zx-section__body > p,
.zx-section__body > .zx-row,
.zx-section__body > form,
.zx-section__body > .zx-global-list,
.zx-section__body > .zx-bp-row,
.zx-section__body > .zx-class-row,
.zx-section__body > .zx-theme__tabs,
.zx-section__body > .zx-theme__section,
.zx-section__body > .zx-theme__fields,
.zx-section__body > .zx-classes {
  padding: 8px 12px;
  margin: 0;
}
.zx-section__body > .zx-bp-row {
  padding: 0 12px;
}
.zx-section__body > .zx-btn {
  justify-content: flex-start;
  height: var(--zx-row-h);
  border-radius: 0;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--zx-text-2);
  font-weight: 500;
}
.zx-section__body > .zx-btn:hover {
  background: var(--zx-surface-2);
  color: var(--zx-text);
}
.zx-section__body > .zx-btn .zx-icon {
  color: var(--zx-accent);
}
.zx-section__body > .zx-btn:disabled {
  color: var(--zx-text-3);
}
.zx-section__body > .zx-btn:disabled .zx-icon {
  color: inherit;
}

/* A row: label left (text-2), control right. Wide controls stack the label above. */
.zx-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: var(--zx-row-h);
  padding: 0 12px;
  transition: background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-field--inline {
  grid-template-columns: minmax(0, 1fr) auto;
}
.zx-field__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--zx-row-h);
  min-width: 0;
}
.zx-field__label {
  flex: 1;
  min-width: 0;
  color: var(--zx-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zx-field__control {
  display: flex;
  align-items: center;
  min-width: 0;
}
.zx-field--inline .zx-field__control {
  justify-content: flex-end;
  flex: 0 0 auto;
}
.zx-field:not(.zx-field--inline) .zx-field__control {
  padding-bottom: 10px;
}
.zx-field:not(.zx-field--inline) .zx-field__control > * {
  width: 100%;
}
/* A choose group with five or more options is too wide for the value column: stack it and let it fill. */
.zx-field--inline:has(> .zx-field__control .zx-choose__opt:nth-child(5)) {
  grid-template-columns: minmax(0, 1fr);
}
.zx-field--inline:has(> .zx-field__control .zx-choose__opt:nth-child(5)) .zx-field__control {
  justify-content: stretch;
  padding-bottom: 10px;
}
.zx-field--inline:has(> .zx-field__control .zx-choose__opt:nth-child(5)) .zx-choose {
  display: flex;
  width: 100%;
}
.zx-field--inline:has(> .zx-field__control .zx-choose__opt:nth-child(5)) .zx-choose__opt {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}
.zx-field__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.zx-field__tool {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zx-text-3);
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease);
}
.zx-field__tool:hover {
  background: var(--zx-surface-2);
  color: var(--zx-text);
}
.zx-field__tool.is-active {
  color: var(--zx-accent);
}
.zx-field__tool:disabled {
  opacity: 0.4;
}
.zx-field__tool .zx-icon {
  width: 13px;
  height: 13px;
}
.zx-field__desc {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--zx-text-3);
  padding-bottom: 8px;
}
.zx-field--inline .zx-field__desc {
  margin-top: -4px;
}
/* Inherited (ghost) marker in the tools: the source device name in text-3. */
.zx-field__inherit {
  font-size: 11px;
  font-style: normal;
  color: var(--zx-text-3);
  white-space: nowrap;
}
.zx-field__label .zx-field__inherit {
  margin-inline-start: 2px;
}
/* A set value: the label darkens and a 5px accent dot marks it (state, not decoration). */
.zx-field.has-value .zx-field__label {
  color: var(--zx-text);
}
.zx-field.has-value .zx-field__label::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--zx-accent);
  margin-inline-end: 6px;
  vertical-align: 1px;
}
/* Sub-heading inside a card ("Lightbox", "Motion"). */
.zx-field__heading {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--zx-text-2);
  background: var(--zx-surface-2);
}
/* Ghost values: an inherited or unset value renders in text-3, never as an empty box. */
.zx-input.is-inherited,
.zx-select.is-inherited,
.zx-textarea.is-inherited,
.zx-slider.is-inherited .zx-input,
.zx-dims.is-inherited .zx-input,
.is-inherited .zx-dims .zx-input,
.zx-choose.is-inherited .zx-choose__opt.is-active {
  color: var(--zx-text-3);
}
.zx-choose.is-inherited .zx-choose__opt.is-active {
  background: var(--zx-surface);
  box-shadow: var(--zx-shadow-seg);
}
.zx-slider.is-inherited .zx-slider__range {
  opacity: 0.55;
}

/* ===== 8. Inputs ===== */
.zx-input,
.zx-select,
.zx-textarea {
  width: 100%;
  height: var(--zx-control-h);
  padding: 0 9px;
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-sm);
  background-color: var(--zx-surface);
  color: var(--zx-text);
  min-width: 0;
  transition: border-color var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease), background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-input:hover,
.zx-select:hover,
.zx-textarea:hover {
  border-color: var(--zx-border-strong);
}
.zx-input:focus,
.zx-select:focus,
.zx-textarea:focus,
.zx-input:focus-visible,
.zx-select:focus-visible,
.zx-textarea:focus-visible {
  border-color: var(--zx-accent);
  box-shadow: var(--zx-ring);
  outline: none;
}
.zx-input:disabled,
.zx-select:disabled,
.zx-textarea:disabled {
  background-color: var(--zx-surface-2);
  color: var(--zx-text-3);
}
.zx-input::placeholder,
.zx-textarea::placeholder {
  color: var(--zx-text-3);
  opacity: 1;
}
.zx-input[type='number'],
.zx-input[inputmode='decimal'],
.zx-input[inputmode='numeric'],
.zx-num {
  font-variant-numeric: tabular-nums;
}
.zx-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.zx-input[type='number']::-webkit-inner-spin-button,
.zx-input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.zx-input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.zx-textarea {
  height: auto;
  min-height: 64px;
  padding: 7px 9px;
  resize: vertical;
  line-height: 1.45;
}
.zx-textarea--code {
  font-family: var(--zx-mono);
  font-size: 12px;
  min-height: 120px;
  white-space: pre;
  tab-size: 2;
}
.zx-input--sm {
  font-size: 12px;
  padding: 0 8px;
}
.zx-select {
  appearance: none;
  padding-inline-end: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d7684' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
[dir='rtl'] .zx-select {
  background-position: left 8px center;
}
/* Tiny pickers (global font / spacing variable): a centered glyph, no chevron. */
.zx-app .zx-select--var {
  width: 30px;
  min-width: 30px;
  padding: 0;
  text-align: center;
  background-image: none;
  flex: 0 0 auto;
}
.zx-checkbox {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--zx-accent);
}

/* ===== 9. Controls ===== */
/* Switch: 36 x 20 pill */
.zx-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--zx-border-strong);
  flex-shrink: 0;
  transition: background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
  transition: inset-inline-start var(--zx-t-fast) var(--zx-ease);
}
.zx-switch:hover {
  background: var(--zx-text-3);
}
.zx-switch.is-on {
  background: var(--zx-accent);
}
.zx-switch.is-on:hover {
  background: var(--zx-accent);
}
.zx-switch.is-on::after {
  inset-inline-start: 18px;
}
.zx-switch:disabled {
  opacity: 0.45;
}

/* Slider: thin track, white thumb with a hairline; number box beside it. */
.zx-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.zx-slider__range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 32px;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.zx-slider__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: var(--zx-border-strong);
}
.zx-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--zx-surface);
  border: 1px solid var(--zx-border-strong);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
  transition: border-color var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease);
}
.zx-slider__range:hover::-webkit-slider-thumb,
.zx-slider__range:focus-visible::-webkit-slider-thumb {
  border-color: var(--zx-accent);
}
.zx-slider__range:active::-webkit-slider-thumb {
  border-color: var(--zx-accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16), var(--zx-ring);
}
.zx-slider__range::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: var(--zx-border-strong);
}
.zx-slider__range::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--zx-accent);
}
.zx-slider__range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--zx-surface);
  border: 1px solid var(--zx-border-strong);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
}
.zx-slider__range:focus-visible {
  outline: none;
}
.zx-slider__num {
  width: 58px;
  flex-shrink: 0;
  text-align: end;
}

/* Units: a mini segmented control. */
.zx-units {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: 6px;
  background: var(--zx-surface-3);
  flex-shrink: 0;
}
.zx-units__u {
  height: 18px;
  min-width: 20px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--zx-text-3);
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease);
}
.zx-units__u:hover {
  color: var(--zx-text);
}
.zx-units__u.is-active {
  background: var(--zx-surface);
  color: var(--zx-accent);
  box-shadow: var(--zx-shadow-seg);
}

/* Choose: a mini segmented control (icon or short text options). */
.zx-choose {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--zx-surface-3);
  max-width: 100%;
}
.zx-choose__opt {
  height: 26px;
  min-width: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--zx-text-2);
  white-space: nowrap;
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease);
}
.zx-choose__opt:hover {
  color: var(--zx-text);
}
.zx-choose__opt.is-active {
  background: var(--zx-surface);
  color: var(--zx-accent);
  box-shadow: var(--zx-shadow-seg);
}
.zx-choose__opt:focus-visible {
  outline-offset: -2px;
}
/* The choose group used as a popover (responsive device picker in a row's tools). */
.zx-choose--popover {
  background: var(--zx-surface);
  border: 1px solid var(--zx-border);
  box-shadow: var(--zx-shadow);
}

/* Dimensions / gap grids */
.zx-dims {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 28px;
  gap: 4px;
  align-items: start;
  width: 100%;
}
.zx-dims__cell {
  display: flex;
  /* label above the value (rows read label first) */
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.zx-dims__cell input {
  text-align: center;
  padding: 0 4px;
}
.zx-dims__cell small {
  font-size: 10px;
  line-height: 1;
  color: var(--zx-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.zx-dims__link {
  height: var(--zx-control-h);
  width: 28px;
  border-radius: var(--zx-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zx-text-3);
  border: 1px solid var(--zx-border);
  background: var(--zx-surface);
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), border-color var(--zx-t-fast) var(--zx-ease);
}
.zx-dims__link:hover {
  border-color: var(--zx-border-strong);
  color: var(--zx-text);
}
.zx-dims__link.is-active {
  color: var(--zx-accent);
  background: var(--zx-accent-soft);
  border-color: transparent;
}

/* Color: swatch (checkerboard drawn with an SVG, no gradients) + text + global dots */
.zx-color {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zx-color__swatch {
  width: 30px;
  height: var(--zx-control-h);
  border-radius: var(--zx-radius-sm);
  border: 1px solid var(--zx-border);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23d5d9e2'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23d5d9e2'/%3E%3C/svg%3E");
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--zx-t-fast) var(--zx-ease);
}
.zx-color__swatch:hover {
  border-color: var(--zx-border-strong);
}
.zx-color__swatch:focus-within {
  border-color: var(--zx-accent);
  box-shadow: var(--zx-ring);
}
.zx-color__swatch i {
  position: absolute;
  inset: 0;
}
.zx-color__swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.zx-color__globals {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 2px;
}
.zx-color__global {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--zx-border-strong);
  transition: transform var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease);
}
.zx-color__global:hover {
  transform: scale(1.1);
}
.zx-color__global.is-active {
  box-shadow: 0 0 0 1px var(--zx-surface), 0 0 0 2px var(--zx-accent);
  border-color: transparent;
}

/* Group (typography / background / border / shadow / transform / transition): an inset track. */
/* Composite controls (typography, background, border ...) are an inset track inside the group card:
   hairline top and bottom only, no side border, no radius (never a card inside a card). */
.zx-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--zx-border);
  border-bottom: 1px solid var(--zx-border);
  border-radius: 0;
  background: var(--zx-surface-2);
  overflow: hidden;
  /* bleed to the card edge (rows carry 12px side padding) so the hairlines meet the card */
  width: calc(100% + 24px);
  margin-inline: -12px;
}
.zx-group > * + * {
  border-top: 1px solid var(--zx-border);
}
.zx-group > .zx-choose {
  margin: 8px 10px;
  align-self: flex-start;
}
.zx-group > .zx-choose + * {
  border-top: 1px solid var(--zx-border);
}
.zx-group > .zx-dims,
.zx-group > .zx-btn,
.zx-group > .zx-field__desc {
  margin: 8px 10px;
  width: auto;
}
.zx-group > .zx-field__desc {
  padding-bottom: 0;
}
.zx-group__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: var(--zx-row-h);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--zx-text-2);
}
.zx-group__row > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zx-group__row > :last-child {
  min-width: 0;
  justify-self: end;
  max-width: 100%;
}
.zx-group__row > .zx-slider,
.zx-group__row > .zx-row,
.zx-group__row > .zx-input,
.zx-group__row > .zx-select {
  justify-self: stretch;
}
/* Sliders carry a track, a number, units and the variable picker: too wide for the value column, so they stack. */
.zx-group__row:has(> .zx-slider),
.zx-group__row:has(> .zx-row > .zx-slider__range) {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
  padding: 6px 10px;
}
.zx-group__row:has(> .zx-slider) > .zx-slider,
.zx-group__row:has(> .zx-row > .zx-slider__range) > .zx-row {
  justify-self: stretch;
  width: 100%;
}
.zx-group__row--full {
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 10px;
}
.zx-group__row--full > :last-child {
  justify-self: stretch;
}
.zx-group__row .zx-input,
.zx-group__row .zx-select {
  background-color: var(--zx-surface);
}
.zx-group__row .zx-switch {
  justify-self: end;
}

/* Repeater */
.zx-repeater {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.zx-repeater__item {
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-sm);
  background: var(--zx-surface);
  overflow: hidden;
}
.zx-repeater__head {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--zx-row-h);
  padding: 0 6px;
}
.zx-repeater__title {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.zx-repeater__body {
  border-top: 1px solid var(--zx-border);
  background: var(--zx-surface-2);
  display: flex;
  flex-direction: column;
}
.zx-repeater__body > .zx-field + .zx-field {
  border-top: 1px solid var(--zx-border);
}
.zx-repeater__body .zx-field__label-row {
  min-height: 28px;
}
.zx-repeater__body .zx-field .zx-field__control {
  padding-bottom: 8px;
}
.zx-repeater > .zx-btn {
  align-self: flex-start;
}

/* Media */
.zx-media {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.zx-media__preview {
  height: 120px;
  border: 1px dashed var(--zx-border-strong);
  border-radius: var(--zx-radius-sm);
  background: var(--zx-surface-2) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zx-text-2);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--zx-t-fast) var(--zx-ease), background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-media__preview:hover {
  border-color: var(--zx-accent);
  color: var(--zx-text);
}
.zx-media__preview.has-image {
  border-style: solid;
  border-color: var(--zx-border);
}

/* Icon picker */
.zx-iconpick {
  width: 100%;
}
.zx-iconpick__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  max-height: 200px;
  overflow: auto;
  padding: 6px 0 2px;
}
.zx-iconpick__btn {
  height: 34px;
  border: 1px solid var(--zx-border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zx-text-2);
  font-size: 15px;
  background: var(--zx-surface);
  transition: border-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-iconpick__btn:hover {
  border-color: var(--zx-border-strong);
  color: var(--zx-text);
}
.zx-iconpick__btn.is-active {
  border-color: var(--zx-accent);
  background: var(--zx-accent-soft);
  color: var(--zx-accent);
}

/* ===== 10. Widgets panel ===== */
.zx-widgets {
  gap: 0;
}
.zx-widgets__searchwrap {
  position: relative;
  margin-bottom: 4px;
}
.zx-widgets__searchwrap > .zx-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 10px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--zx-text-3);
  pointer-events: none;
}
.zx-widgets__searchwrap .zx-input {
  height: 32px;
  padding-inline-start: 30px;
}
.zx-widgets__search {
  margin-bottom: 4px;
}
.zx-widgets__category {
  margin: 14px 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--zx-text-2);
}
.zx-widgets__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.zx-widget-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 72px;
  padding: 6px 4px;
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-md);
  background: var(--zx-surface);
  color: var(--zx-text-2);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  cursor: grab;
  user-select: none;
  transition: border-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease), transform var(--zx-t-fast) var(--zx-ease), box-shadow var(--zx-t-fast) var(--zx-ease), background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-widget-card > span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zx-widget-card .zx-icon {
  width: 20px;
  height: 20px;
  color: var(--zx-text-2);
  transition: color var(--zx-t-fast) var(--zx-ease);
}
.zx-widget-card:hover {
  border-color: var(--zx-border-strong);
  color: var(--zx-text);
  transform: translateY(-1px);
  box-shadow: var(--zx-shadow);
}
.zx-widget-card:hover .zx-icon {
  color: var(--zx-accent);
}
.zx-widget-card:active {
  cursor: grabbing;
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}
.zx-widget-card:focus-visible {
  outline: none;
  border-color: var(--zx-accent);
  box-shadow: var(--zx-ring);
}
.zx-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--zx-text-3);
}

/* ===== 11. Canvas sheet ===== */
.zx-canvas {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 0;
  background: var(--zx-bg);
  overflow: hidden;
}
.zx-canvas__frame {
  border: 0;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: block;
  background: #fff;
  border-radius: var(--zx-radius) var(--zx-radius) 0 0;
  box-shadow: var(--zx-shadow-sheet);
  /* no layout transition: the sheet snaps between devices */
}
.zx-canvas__frame--device {
  margin: 0 auto;
}
.zx-canvas__shield {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: grabbing;
}
.zx-canvas__loading,
.zx-canvas__error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--zx-text-2);
  background: var(--zx-bg);
  z-index: 2;
}
.zx-canvas__loading::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zx-accent);
  animation: zx-pulse 1.2s ease-in-out infinite;
}
.zx-canvas__error {
  color: var(--zx-danger);
  z-index: 3;
}
/* Legacy chip (the size now lives in the top bar); kept so nothing depends on it breaking. */
.zx-canvas__size {
  display: none;
}

/* ===== 12. Navigator ===== */
.zx-navigator {
  width: var(--zx-navigator-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--zx-surface);
  border-inline-start: 1px solid var(--zx-border);
  min-height: 0;
}
.zx-navigator__body {
  flex: 1;
  overflow: auto;
  padding: 6px 0;
}
.zx-tree__item {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding-inline-end: 6px;
  cursor: pointer;
  color: var(--zx-text-2);
  white-space: nowrap;
  border-inline-start: 1px solid transparent;
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease);
}
.zx-tree__item:hover {
  background: var(--zx-surface-2);
  color: var(--zx-text);
}
.zx-tree__item.is-hovered {
  background: var(--zx-surface-2);
}
.zx-tree__item.is-selected {
  background: var(--zx-accent-soft);
  color: var(--zx-text);
  border-inline-start-color: var(--zx-accent);
}
.zx-tree__item.is-selected > .zx-icon {
  color: var(--zx-accent);
}
.zx-tree__item.is-hidden {
  opacity: 0.5;
}
.zx-tree__item.is-locked .zx-tree__label {
  color: var(--zx-text-3);
}
.zx-tree__item.is-drop-before {
  box-shadow: inset 0 2px 0 var(--zx-accent);
}
.zx-tree__item.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--zx-accent);
}
.zx-tree__item.is-drop-inside {
  outline: 1px solid var(--zx-accent);
  outline-offset: -1px;
  background: var(--zx-accent-soft);
}
.zx-tree__item > .zx-icon {
  color: var(--zx-text-3);
}
.zx-tree__toggle {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zx-text-3);
  border-radius: 4px;
  flex-shrink: 0;
}
.zx-tree__toggle:hover {
  background: var(--zx-surface-3);
  color: var(--zx-text);
}
.zx-tree__toggle .zx-icon {
  width: 12px;
  height: 12px;
  transition: transform var(--zx-t-fast) var(--zx-ease);
}
.zx-tree__toggle.is-open .zx-icon {
  transform: rotate(90deg);
}
[dir='rtl'] .zx-tree__toggle .zx-icon {
  transform: rotate(180deg);
}
[dir='rtl'] .zx-tree__toggle.is-open .zx-icon {
  transform: rotate(90deg);
}
.zx-tree__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zx-tree__label input {
  width: 100%;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--zx-accent);
  border-radius: 6px;
  background: var(--zx-surface);
  box-shadow: var(--zx-ring);
  outline: none;
}
.zx-tree__actions {
  display: none;
  gap: 2px;
}
.zx-tree__item:hover .zx-tree__actions,
.zx-tree__item.is-selected .zx-tree__actions {
  display: inline-flex;
}
.zx-tree__actions button {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--zx-text-3);
}
.zx-tree__actions button:hover {
  background: var(--zx-surface-3);
  color: var(--zx-text);
}
.zx-tree__actions .zx-icon {
  width: 12px;
  height: 12px;
}

/* ===== 13. History / global / page panels ===== */
/* A plain list card (history rows, revisions). */
.zx-list {
  display: flex;
  flex-direction: column;
  background: var(--zx-surface);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-md);
  box-shadow: var(--zx-shadow-card);
  overflow: hidden;
}
.zx-list > * + * {
  border-top: 1px solid var(--zx-border);
}
.zx-history__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--zx-row-h);
  padding: 0 12px;
  color: var(--zx-text-2);
  width: 100%;
  text-align: start;
  border-radius: 0;
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease);
}
.zx-history__item:hover {
  background: var(--zx-surface-2);
  color: var(--zx-text);
}
.zx-history__item > .zx-icon {
  color: var(--zx-text-3);
}
.zx-history__item.is-current {
  color: var(--zx-text);
  font-weight: 600;
}
.zx-history__item.is-current > .zx-icon {
  color: var(--zx-accent);
}
.zx-history__item.is-future {
  color: var(--zx-text-3);
}
.zx-history__item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--zx-text-3);
  font-variant-numeric: tabular-nums;
}
.zx-global-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zx-global-item {
  display: grid;
  grid-template-columns: 30px 1fr auto 24px;
  align-items: center;
  gap: 6px;
}
.zx-bp-row {
  display: grid;
  grid-template-columns: 20px 1fr 72px 36px;
  align-items: center;
  gap: 8px;
  min-height: var(--zx-row-h);
  color: var(--zx-text-2);
}
.zx-bp-row > .zx-icon {
  color: var(--zx-text-3);
}
.zx-bp-row .zx-input {
  text-align: end;
}

/* ===== 14. Palette + dialogs ===== */
.zx-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(16, 24, 40, 0.32);
  animation: zx-fade-in var(--zx-t-fast) var(--zx-ease);
}
.zx-modal__card {
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--zx-surface);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius);
  box-shadow: var(--zx-shadow-sheet);
  overflow: hidden;
  animation: zx-pop-in var(--zx-t) var(--zx-ease);
}
.zx-modal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--zx-border);
  font-size: 14px;
  font-weight: 600;
}
.zx-modal__head > .zx-icon {
  color: var(--zx-text-3);
}
.zx-modal__body {
  overflow: auto;
  padding: 6px 0 8px;
}
.zx-palette__input {
  height: 48px;
  font-size: 15px;
  border: 0;
  border-bottom: 1px solid var(--zx-border);
  border-radius: 0;
  padding: 0 16px;
}
.zx-palette__input:focus,
.zx-palette__input:focus-visible {
  border-color: var(--zx-border);
  box-shadow: none;
}
.zx-palette__group {
  padding: 10px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--zx-text-2);
}
.zx-palette__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  min-height: 34px;
  margin: 0 8px;
  padding: 0 8px;
  border-radius: var(--zx-radius-sm);
  text-align: start;
  color: var(--zx-text);
  transition: background-color var(--zx-t-fast) var(--zx-ease);
}
.zx-palette__item > .zx-icon {
  color: var(--zx-text-3);
}
.zx-palette__item:hover,
.zx-palette__item.is-active {
  background: var(--zx-accent-soft);
}
.zx-palette__item.is-active > .zx-icon {
  color: var(--zx-accent);
}
.zx-palette__item small {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--zx-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.zx-kbd {
  display: inline-block;
  font: 11px/1.4 var(--zx-mono);
  padding: 1px 6px;
  border: 1px solid var(--zx-border-strong);
  border-radius: 5px;
  background: var(--zx-surface-2);
  color: var(--zx-text-2);
  box-shadow: inset 0 -1px 0 var(--zx-border-strong);
}
.zx-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  padding: 0 16px 8px;
}
.zx-shortcuts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  color: var(--zx-text-2);
  border-bottom: 1px solid var(--zx-border);
}
.zx-shortcuts__row:nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* ===== 15. Context menu ===== */
.zx-ctx {
  position: fixed;
  z-index: 300;
  min-width: 208px;
  padding: 4px;
  background: var(--zx-surface);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-md);
  box-shadow: var(--zx-shadow);
  font: 13px/1.4 var(--zx-font);
  color: var(--zx-text);
  outline: none;
  animation: zx-pop-in var(--zx-t-fast) var(--zx-ease);
}
.zx-ctx__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--zx-text);
  text-align: start;
  white-space: nowrap;
  transition: background-color var(--zx-t-fast) var(--zx-ease), color var(--zx-t-fast) var(--zx-ease);
}
.zx-ctx__item > .zx-icon {
  color: var(--zx-text-3);
}
.zx-ctx__item:hover:not(:disabled),
.zx-ctx__item.is-active:not(:disabled) {
  background: var(--zx-surface-2);
}
.zx-ctx__item.is-active:not(:disabled) > .zx-icon {
  color: var(--zx-accent);
}
.zx-ctx__item:disabled {
  opacity: 0.4;
}
.zx-ctx__item.is-danger:hover:not(:disabled),
.zx-ctx__item.is-danger.is-active:not(:disabled) {
  background: var(--zx-danger-soft);
  color: var(--zx-danger);
}
.zx-ctx__item.is-danger.is-active:not(:disabled) > .zx-icon,
.zx-ctx__item.is-danger:hover:not(:disabled) > .zx-icon {
  color: var(--zx-danger);
}
.zx-ctx__label {
  flex: 1;
}
.zx-ctx__hint {
  font: 11px var(--zx-mono);
  color: var(--zx-text-3);
}
.zx-ctx__sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--zx-border);
}

/* ===== 16. Toast + drag ghost ===== */
.zx-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding-block: 0;
  padding-inline: 14px 16px;
  border-radius: 999px;
  background: var(--zx-surface);
  color: var(--zx-text);
  border: 1px solid var(--zx-border);
  box-shadow: var(--zx-shadow-sheet);
  font-weight: 500;
  animation: zx-toast-in var(--zx-t) var(--zx-ease);
}
.zx-toast::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zx-accent);
  flex-shrink: 0;
}
.zx-toast--success::before {
  background: var(--zx-success);
}
.zx-toast--error::before {
  background: var(--zx-danger);
}
.zx-toast__link {
  margin-inline-start: 4px;
  color: var(--zx-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.zx-drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--zx-radius-sm);
  background: var(--zx-surface);
  color: var(--zx-text);
  border: 1px solid var(--zx-border-strong);
  box-shadow: var(--zx-shadow-sheet);
  font: 600 12px var(--zx-font);
  white-space: nowrap;
  translate: 12px 12px;
}
.zx-drag-ghost::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zx-accent);
}

/* ===== 17. Misc ===== */
.zx-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.zx-muted {
  color: var(--zx-text-3);
}
.zx-hidden {
  display: none !important;
}
.zx-divider {
  height: 1px;
  background: var(--zx-border);
  margin: 4px 0;
}
.zx-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--zx-surface-3);
  color: var(--zx-text-2);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Editing target row (Element / .class) in the Style tab. */
.zx-edit-target {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px 0;
  font-size: 12px;
  color: var(--zx-text-2);
  flex-shrink: 0;
}
.zx-edit-target__label {
  font-weight: 600;
}
.zx-edit-target .zx-select {
  flex: 1;
}

/* ===== 18. Dark-mode specifics ===== */
.zx-dark .zx-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23858d99' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.zx-dark .zx-seg__btn.is-active,
.zx-dark .zx-tabs__tab.is-active,
.zx-dark .zx-choose__opt.is-active,
.zx-dark .zx-units__u.is-active,
.zx-dark .zx-choose.is-inherited .zx-choose__opt.is-active {
  background: var(--zx-surface-2);
}
.zx-dark .zx-color__swatch {
  background-color: #2a2f37;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%233a404a'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%233a404a'/%3E%3C/svg%3E");
}
.zx-dark .zx-switch::after {
  background: #f4f5f8;
}
.zx-dark .zx-canvas__frame {
  background: #fff;
}
.zx-dark .zx-modal {
  background: rgba(0, 0, 0, 0.5);
}
.zx-dark .zx-btn--primary:hover {
  background: #4574f2;
}
.zx-dark .zx-btn--primary:active {
  background: #2c5ad6;
}

/* ===== 19. Motion ===== */
@keyframes zx-toast-in {
  from {
    opacity: 0;
    translate: -50% 8px;
  }
}
@keyframes zx-pop-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}
@keyframes zx-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes zx-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zx-app,
  .zx-app *,
  .zx-app *::before,
  .zx-app *::after,
  .zx-toast,
  .zx-ctx,
  .zx-modal,
  .zx-modal__card {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== 20. Canvas stage (layout box for the scaled sheet) + narrow-window notice ===== */
.zx-canvas__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0 auto;
  /* no layout transition: the sheet snaps between devices */
}
.zx-canvas__stage--device {
  flex: 0 0 auto;
  height: 100%;
}
.zx-canvas__stage--device > .zx-canvas__frame {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
.zx-app__narrow {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: var(--zx-bg);
  color: var(--zx-text-2);
}
.zx-app__narrow strong {
  font-size: 16px;
  color: var(--zx-text);
}

/* Composite tracks (.zx-group) must win over the generic stacked-control width rule so they bleed to
   the card edge (hairlines from edge to edge, symmetric row padding). */
.zx-field:not(.zx-field--inline) .zx-field__control > .zx-group {
  width: calc(100% + 24px);
  margin-inline: -12px;
}

/* ===== RTL (T218) ===== */
/* Direction-bound glyphs point the other way in RTL (back = right, undo turns clockwise). Kept at low
   specificity so components that rotate an icon themselves (navigator tree toggle) keep their transform. */
:where([dir='rtl']) .zx-icon:where([data-icon='undo'], [data-icon='redo'], [data-icon='chevron-left'], [data-icon='chevron-right'], [data-icon='exit']) {
  transform: scaleX(-1);
}
/* Choose options whose value is logical (flex start/end, row, before/after) follow the writing direction;
   physical ones (left / right / ltr / rtl) keep their icon. */
:where([dir='rtl']) .zx-choose__opt:where([data-value='flex-start'], [data-value='flex-end'], [data-value='start'], [data-value='end'], [data-value='row'], [data-value='row-reverse'], [data-value='before'], [data-value='after'], [data-value='aside'], [data-value='inline']) .zx-icon {
  transform: scaleX(-1);
}
/* LTR islands: numbers, hex colours, URLs, CSS/HTML code and key combos read left-to-right; free text
   takes the direction of its first strong character (Arabic label -> RTL, #hex / https:// -> LTR). */
[dir='rtl'] .zx-input[type='text'],
[dir='rtl'] .zx-input[type='url'],
[dir='rtl'] .zx-textarea {
  unicode-bidi: plaintext;
}
[dir='rtl'] .zx-input[type='number'],
[dir='rtl'] .zx-textarea--code {
  direction: ltr;
}
[dir='rtl'] .zx-textarea--code {
  text-align: left;
}
[dir='rtl'] .zx-kbd,
[dir='rtl'] .zx-app kbd,
[dir='rtl'] .zx-app code {
  direction: ltr;
  unicode-bidi: isolate;
}