/* Local colors keep gradient controls readable in both editor themes, including hover. */
[data-editor-gradient-control] {
  --egc-surface: #ffffff; --egc-panel: #f8fafc; --egc-ink: #0f172a;
  --egc-muted: #475569; --egc-line: #cbd5e1; --egc-hover: #e0f2fe;
  --egc-hover-ink: #0c4a6e; --egc-accent: #0891b2;
  color: var(--egc-ink);
}
.dark [data-editor-gradient-control] {
  --egc-surface: #0b1727; --egc-panel: #0f1d2f; --egc-ink: #f1f5f9;
  --egc-muted: #a5b4c7; --egc-line: #35465b; --egc-hover: #18384a;
  --egc-hover-ink: #e0f7ff; --egc-accent: #22d3ee;
}
[data-editor-gradient-control] .egc-button,
[data-editor-gradient-control] .egc-preset {
  border: 1px solid var(--egc-line); background-color: var(--egc-surface); color: var(--egc-ink);
}
[data-editor-gradient-control] .egc-button:hover:not(:disabled),
[data-editor-gradient-control] .egc-preset:hover:not(:disabled) {
  border-color: var(--egc-accent); background-color: var(--egc-hover); color: var(--egc-hover-ink);
}
[data-editor-gradient-control] .egc-trigger { min-height: 58px; }
[data-editor-gradient-control] .egc-trigger[aria-expanded=true] { border-color: var(--egc-accent); }
[data-editor-gradient-control] .egc-muted { color: var(--egc-muted); }
[data-editor-gradient-control] .egc-trigger:hover .egc-muted { color: var(--egc-hover-ink); }
[data-editor-gradient-control] .egc-panel { border: 1px solid var(--egc-line); background: var(--egc-panel); color: var(--egc-ink); max-height: min(42rem, calc(100dvh - 10rem)); overflow-y: auto; overscroll-behavior: contain; }
[data-editor-gradient-control] .egc-preview { position: sticky; top: 0; z-index: 2; border: 1px solid var(--egc-line); background-color: var(--egc-surface); }
[data-editor-gradient-control] .egc-stop-row { grid-template-columns: 2.25rem minmax(0, 1fr) 1.75rem; }
[data-editor-gradient-control] .egc-actions { position: sticky; bottom: 0; z-index: 3; padding-bottom: .25rem; background: var(--egc-panel); border-color: var(--egc-line); }
[data-editor-gradient-control] .egc-input { border: 1px solid var(--egc-line); background: var(--egc-surface); color: var(--egc-ink); }
[data-editor-gradient-control] .egc-type { background: var(--egc-surface); border: 1px solid var(--egc-line); }
[data-editor-gradient-control] .egc-type button { color: var(--egc-muted); }
[data-editor-gradient-control] .egc-type button:hover { background: var(--egc-hover); color: var(--egc-hover-ink); }
[data-editor-gradient-control] .egc-type button[aria-pressed=true] { background: var(--egc-hover); color: var(--egc-hover-ink); }
[data-editor-gradient-control] .egc-remove { color: var(--egc-muted); }
[data-editor-gradient-control] .egc-remove:hover:not(:disabled) { background: #7f1d1d; color: #ffffff; }
[data-editor-gradient-control] .egc-apply { background: #0e7490; color: #ffffff; }
[data-editor-gradient-control] .egc-apply:hover { background: #155e75; color: #ffffff; }
@media (pointer: coarse) {
  [data-editor-gradient-control] .egc-button,
  [data-editor-gradient-control] .egc-preset,
  [data-editor-gradient-control] .egc-type button,
  [data-editor-gradient-control] .egc-input,
  [data-editor-gradient-control] .egc-remove,
  [data-editor-gradient-control] .egc-apply { min-height: 44px; }
}