/* ============================================================================ editor.css — optional in-page design-token inspector ("tweaks" panel), mirroring the reference prototype. Hidden until a JSX island mounts it (add data-editor-open on or toggle .zx-editor.is-open via JS). Kept out of the way of the production UI. ========================================================================== */ .zx-editor { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-panel); width: min(92vw, 320px); max-height: min(70vh, 560px); overflow-y: auto; padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(calc(100% + var(--space-6))); opacity: 0; visibility: hidden; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur); } .zx-editor.is-open { transform: none; opacity: 1; visibility: visible; } .zx-editor__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .zx-editor__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); } .zx-editor__close { width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--color-text-muted); } .zx-editor__close:hover { background: var(--color-bg-subtle); color: var(--color-text); } .zx-editor__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } .zx-editor__row label { font-size: var(--fs-xs); color: var(--color-text-muted); } .zx-editor__row input[type="color"] { width: 34px; height: 26px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none; } .zx-editor__row input[type="range"] { width: 120px; } /* Floating toggle button */ .zx-editor-fab { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-panel); width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-contrast); box-shadow: var(--shadow-md); display: none; /* enable by adding .is-visible via JS in dev */ align-items: center; justify-content: center; } .zx-editor-fab.is-visible { display: inline-flex; }