/* Sidebar navigation owns no paint. Rounded cards own their own surfaces. */
[data-site-editor-root] [data-editor-inspector-panel]
  .site-inspector-focus[data-editor-inspector-navigation][data-editor-inspector-screen] {
  background: transparent;
}

/* Use the same palette in libraries and inspectors, in either color mode. */
[data-site-editor-root] [data-editor-blocks-panel] .editor-library-navigator {
  --eln-panel: var(--editor-experience-surface);
  --eln-row: var(--editor-experience-surface);
  --eln-hover: var(--editor-experience-tint);
  --eln-border: var(--editor-experience-line);
  --eln-text: var(--editor-experience-ink);
  --eln-muted: var(--editor-experience-muted);
  --eln-accent: var(--editor-experience-accent);
  --eln-tint: var(--editor-experience-tint);
}

/* One quiet surface treatment for category lists and their focused screens.
   Keep overflow and navigation geometry with their existing owners so focus
   rings, popovers, scrolling and drag previews remain free to work normally. */
[data-site-editor-root] :is([data-editor-blocks-panel], [data-editor-inspector-panel])
  :is(.eln-overview, .site-inspector-focus-overview, .eln-header, .site-inspector-focus-header) {
  background: var(--editor-experience-surface);
  border: 1px solid var(--editor-experience-line);
  border-radius: 14px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--editor-experience-ink) 5%, transparent);
}

[data-site-editor-root] :is([data-editor-blocks-panel], [data-editor-inspector-panel])
  :is(.eln-back, .site-inspector-focus-back) {
  background: var(--editor-experience-soft);
  border-color: var(--editor-experience-line);
  color: var(--editor-experience-accent);
  border-radius: 10px;
}

@media (hover: hover) {
  [data-site-editor-root] :is([data-editor-blocks-panel], [data-editor-inspector-panel])
    :is(.eln-back, .site-inspector-focus-back):hover {
    background: var(--editor-experience-tint);
    color: var(--editor-experience-ink);
  }
}

@media (forced-colors: active) {
  [data-site-editor-root] :is([data-editor-blocks-panel], [data-editor-inspector-panel])
    :is(.eln-overview, .site-inspector-focus-overview, .eln-header, .site-inspector-focus-header) {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
  [data-site-editor-root] :is([data-editor-blocks-panel], [data-editor-inspector-panel])
    :is(.eln-back, .site-inspector-focus-back) {
    background: ButtonFace;
    border-color: ButtonText;
    color: ButtonText;
  }
}