/* Explorer light-mode overrides — reuses --de-* tokens from diagramstore-planner-theme.css */

html[data-planner-theme="light"] .explorer-shell .explorer-topbar,
html[data-planner-theme="light"] .explorer-shell .explorer-sidebar,
html[data-planner-theme="light"] .explorer-shell .explorer-translate-bar,
html[data-planner-theme="light"] .explorer-shell .explorer-diagram-actions,
html[data-planner-theme="light"] .explorer-shell .explorer-breadcrumb,
html[data-planner-theme="light"] .explorer-shell .explorer-followup,
.explorer-shell[data-theme="light"] .explorer-topbar,
.explorer-shell[data-theme="light"] .explorer-sidebar,
.explorer-shell[data-theme="light"] .explorer-translate-bar,
.explorer-shell[data-theme="light"] .explorer-diagram-actions,
.explorer-shell[data-theme="light"] .explorer-breadcrumb,
.explorer-shell[data-theme="light"] .explorer-followup {
    box-shadow: var(--de-shadow-panel);
}

html[data-planner-theme="light"] .explorer-shell .explorer-topbar,
.explorer-shell[data-theme="light"] .explorer-topbar {
    box-shadow: var(--de-shadow-soft);
}

html[data-planner-theme="light"] .explorer-shell .explorer-canvas-host,
.explorer-shell[data-theme="light"] .explorer-canvas-host {
    box-shadow: var(--de-shadow-soft);
}

html[data-planner-theme="light"] .explorer-shell .explorer-tab,
.explorer-shell[data-theme="light"] .explorer-tab {
    color: var(--de-text-muted);
}

html[data-planner-theme="light"] .explorer-shell .explorer-tab:hover,
.explorer-shell[data-theme="light"] .explorer-tab:hover {
    background: var(--de-btn-bg-hover);
    color: var(--de-text);
}

html[data-planner-theme="light"] .explorer-shell .explorer-tab.is-active,
.explorer-shell[data-theme="light"] .explorer-tab.is-active {
    color: #92400e;
    background: rgba(217, 119, 6, 0.18);
    border-color: rgba(180, 83, 9, 0.48);
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.14);
    font-weight: 700;
}

html[data-planner-theme="light"] .explorer-shell .explorer-type-btn,
html[data-planner-theme="light"] .explorer-shell .explorer-history-item,
html[data-planner-theme="light"] .explorer-shell .explorer-draft-search-item,
.explorer-shell[data-theme="light"] .explorer-type-btn,
.explorer-shell[data-theme="light"] .explorer-history-item,
.explorer-shell[data-theme="light"] .explorer-draft-search-item {
    color: var(--de-text);
    background: var(--de-btn-bg);
    border-color: var(--de-btn-border);
    box-shadow: var(--de-shadow-soft);
}

html[data-planner-theme="light"] .explorer-shell .explorer-history-time,
html[data-planner-theme="light"] .explorer-shell .explorer-history-empty,
html[data-planner-theme="light"] .explorer-shell .explorer-search-label,
html[data-planner-theme="light"] .explorer-shell .explorer-breadcrumb-prefix,
.explorer-shell[data-theme="light"] .explorer-history-time,
.explorer-shell[data-theme="light"] .explorer-history-empty,
.explorer-shell[data-theme="light"] .explorer-search-label,
.explorer-shell[data-theme="light"] .explorer-breadcrumb-prefix {
    color: var(--de-text-muted);
}

html[data-planner-theme="light"] .explorer-shell .explorer-breadcrumb,
.explorer-shell[data-theme="light"] .explorer-breadcrumb {
    color: var(--de-text-muted);
    background: var(--de-surface-raised);
}

html[data-planner-theme="light"] .explorer-shell .explorer-breadcrumb-item,
.explorer-shell[data-theme="light"] .explorer-breadcrumb-item {
    color: var(--de-accent-text);
}

html[data-planner-theme="light"] .explorer-shell .explorer-breadcrumb-item.is-current,
.explorer-shell[data-theme="light"] .explorer-breadcrumb-item.is-current {
    color: var(--de-text-strong);
}

html[data-planner-theme="light"] .explorer-shell .explorer-breadcrumb-sep,
.explorer-shell[data-theme="light"] .explorer-breadcrumb-sep {
    color: var(--de-text-faint);
}

html[data-planner-theme="light"] .explorer-shell .explorer-empty-title,
.explorer-shell[data-theme="light"] .explorer-empty-title {
    color: var(--de-text-strong);
}

html[data-planner-theme="light"] .explorer-shell .explorer-empty-hint,
html[data-planner-theme="light"] .explorer-shell .explorer-empty-shortcuts,
.explorer-shell[data-theme="light"] .explorer-empty-hint,
.explorer-shell[data-theme="light"] .explorer-empty-shortcuts {
    color: var(--de-text-muted);
}

html[data-planner-theme="light"] .explorer-shell .explorer-toolbar,
.explorer-shell[data-theme="light"] .explorer-toolbar {
    background: var(--de-surface-raised);
    border-right-color: var(--de-border);
}

html[data-planner-theme="light"] .explorer-shell .explorer-tool-btn,
.explorer-shell[data-theme="light"] .explorer-tool-btn {
    color: var(--de-btn-text);
    background: var(--de-btn-bg);
    border-color: var(--de-btn-border);
    box-shadow: var(--de-shadow-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-planner-theme="light"] .explorer-shell .explorer-tool-btn:hover,
.explorer-shell[data-theme="light"] .explorer-tool-btn:hover {
    background: var(--de-btn-bg-hover);
    border-color: var(--de-border-strong);
}

html[data-planner-theme="light"] .explorer-shell .explorer-error,
.explorer-shell[data-theme="light"] .explorer-error {
    color: #7f1d1d !important;
    background: #fdecea !important;
    border-bottom: 1px solid #f5c2c0 !important;
    box-shadow: none;
}

html[data-planner-theme="light"] .explorer-shell .explorer-error-retry,
.explorer-shell[data-theme="light"] .explorer-error-retry {
    color: #7f1d1d !important;
    background: #fff !important;
    border-color: #f5c2c0 !important;
}

html[data-planner-theme="light"] .explorer-shell .explorer-error-retry:hover,
.explorer-shell[data-theme="light"] .explorer-error-retry:hover {
    background: #fdecea !important;
    color: #991b1b !important;
}

html[data-planner-theme="light"] .explorer-shell .explorer-info,
.explorer-shell[data-theme="light"] .explorer-info {
    color: var(--de-green-text);
    background: var(--de-green-bg);
    border-bottom-color: var(--de-green-border);
}

html[data-planner-theme="light"] .explorer-shell .explorer-followup-label,
.explorer-shell[data-theme="light"] .explorer-followup-label {
    color: var(--de-text-subtle);
}

html[data-planner-theme="light"] .explorer-shell .explorer-followup-chip,
.explorer-shell[data-theme="light"] .explorer-followup-chip {
    color: var(--de-text);
    background: var(--de-btn-bg);
    border-color: var(--de-btn-border);
}

html[data-planner-theme="light"] .explorer-shell .explorer-busy-overlay,
.explorer-shell[data-theme="light"] .explorer-busy-overlay {
    background: var(--de-overlay);
}

html[data-planner-theme="light"] .explorer-shell .explorer-limit-overlay::before,
.explorer-shell[data-theme="light"] .explorer-limit-overlay::before {
    background: var(--de-overlay);
}

html[data-planner-theme="light"] .explorer-shell .explorer-sidebar-overlay.open,
.explorer-shell[data-theme="light"] .explorer-sidebar-overlay.open {
    background: var(--de-overlay);
}

/* Beat diagramstore-dark-inputs.css in light mode (higher specificity) */
html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"],
html[data-planner-theme="light"] .explorer-shell .explorer-sidebar input.explorer-search-input[type="search"],
html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-followup-input[type="text"],
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"],
.explorer-shell[data-theme="light"] .explorer-sidebar input.explorer-search-input[type="search"],
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-followup-input[type="text"] {
    color: var(--de-input-text) !important;
    -webkit-text-fill-color: var(--de-input-text) !important;
    caret-color: var(--de-caret) !important;
    background-color: var(--de-input-bg) !important;
    border-color: var(--de-input-border) !important;
    color-scheme: light;
}

html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]::placeholder,
html[data-planner-theme="light"] .explorer-shell .explorer-sidebar input.explorer-search-input[type="search"]::placeholder,
html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-followup-input[type="text"]::placeholder,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]::placeholder,
.explorer-shell[data-theme="light"] .explorer-sidebar input.explorer-search-input[type="search"]::placeholder,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-followup-input[type="text"]::placeholder {
    color: var(--de-input-placeholder) !important;
    -webkit-text-fill-color: var(--de-input-placeholder) !important;
    opacity: 1 !important;
}

html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]:focus,
html[data-planner-theme="light"] .explorer-shell .explorer-sidebar input.explorer-search-input[type="search"]:focus,
html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-followup-input[type="text"]:focus,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]:focus,
.explorer-shell[data-theme="light"] .explorer-sidebar input.explorer-search-input[type="search"]:focus,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-followup-input[type="text"]:focus {
    color: var(--de-input-text) !important;
    -webkit-text-fill-color: var(--de-input-text) !important;
    caret-color: var(--de-caret) !important;
    background-color: var(--de-input-bg) !important;
    border-color: var(--de-accent-border) !important;
    box-shadow: 0 0 0 1px var(--de-focus-ring-soft) !important;
}

html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]:-webkit-autofill,
html[data-planner-theme="light"] .explorer-shell .explorer-sidebar input.explorer-search-input[type="search"]:-webkit-autofill,
html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-followup-input[type="text"]:-webkit-autofill,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]:-webkit-autofill,
.explorer-shell[data-theme="light"] .explorer-sidebar input.explorer-search-input[type="search"]:-webkit-autofill,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-followup-input[type="text"]:-webkit-autofill {
    -webkit-text-fill-color: var(--de-input-text) !important;
    caret-color: var(--de-caret) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--de-input-bg) inset !important;
}

html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]::selection,
html[data-planner-theme="light"] .explorer-shell .explorer-sidebar input.explorer-search-input[type="search"]::selection,
html[data-planner-theme="light"] .explorer-shell .explorer-canvas-area .explorer-followup-input[type="text"]::selection,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-topbar input#explorer-prompt.explorer-prompt-input[type="text"]::selection,
.explorer-shell[data-theme="light"] .explorer-sidebar input.explorer-search-input[type="search"]::selection,
.explorer-shell[data-theme="light"] .explorer-canvas-area .explorer-followup-input[type="text"]::selection {
    background-color: var(--de-selection-bg);
    color: var(--de-text-strong);
}

/* ============================================================
   Brand light polish — align Explorer light mode with site theme
   (scoped to explorer only; dark mode unchanged)
   ============================================================ */

html[data-planner-theme="light"] .explorer-shell,
.explorer-shell[data-theme="light"] {
    --de-bg: var(--ds-page-bg, #ffffff);
    --de-surface: var(--ds-surface, #f9f9f9);
    --de-surface-raised: #ffffff;
    --de-surface-sunken: var(--ds-surface, #f9f9f9);
    --de-border: var(--ds-outline-variant, #e1bfb2);
    --de-border-strong: #d4c4bc;
    --de-btn-bg: #ffffff;
    --de-btn-bg-hover: var(--ds-brand-orange-tint, #fff0e6);
    --de-btn-border: var(--ds-outline-variant, #e1bfb2);
    --de-input-bg: #ffffff;
    --de-input-border: var(--ds-input-border, #d1d5db);
    --de-canvas-bg: var(--ds-surface, #f9f9f9);
    --de-canvas-bg-end: #f3f4f6;
    --de-caret: var(--ds-brand-orange, #e65c00);
    --de-focus-ring-soft: rgba(230, 92, 0, 0.18);
    --de-accent-bg: var(--ds-brand-orange-tint, #fff0e6);
    --de-accent-bg-strong: rgba(230, 92, 0, 0.14);
    --de-accent-border: rgba(230, 92, 0, 0.35);
    --de-accent-text: var(--ds-brand-orange, #e65c00);
    --de-accent-text-strong: var(--ds-brand-orange-hover, #cc5200);
    --de-orange-text: var(--ds-brand-orange, #e65c00);
    --de-orange-bg: var(--ds-brand-orange-tint, #fff0e6);
    --de-orange-border: rgba(230, 92, 0, 0.32);
    --de-shadow-soft: var(--ds-shadow-soft, 0 1px 8px rgba(0, 0, 0, 0.05));
    --de-shadow-panel: var(--ds-shadow-soft, 0 2px 12px rgba(0, 0, 0, 0.06));
    font-family: var(--ds-font, Inter, sans-serif);
}

html[data-planner-theme="light"] .explorer-shell .explorer-sidebar,
.explorer-shell[data-theme="light"] .explorer-sidebar {
    background: #fff;
    border-right-color: var(--ds-outline-variant, #e1bfb2);
    box-shadow: var(--ds-shadow-soft, 0 1px 8px rgba(0, 0, 0, 0.04));
}

html[data-planner-theme="light"] .explorer-shell .explorer-topbar,
html[data-planner-theme="light"] .explorer-shell .explorer-translate-bar,
html[data-planner-theme="light"] .explorer-shell .explorer-diagram-actions,
html[data-planner-theme="light"] .explorer-shell .explorer-breadcrumb,
html[data-planner-theme="light"] .explorer-shell .explorer-followup,
.explorer-shell[data-theme="light"] .explorer-topbar,
.explorer-shell[data-theme="light"] .explorer-translate-bar,
.explorer-shell[data-theme="light"] .explorer-diagram-actions,
.explorer-shell[data-theme="light"] .explorer-breadcrumb,
.explorer-shell[data-theme="light"] .explorer-followup {
    background: #fff;
    border-color: var(--ds-outline-variant, #e1bfb2);
    box-shadow: none;
}

html[data-planner-theme="light"] .explorer-shell .explorer-topbar,
.explorer-shell[data-theme="light"] .explorer-topbar {
    box-shadow: 0 1px 0 var(--ds-outline-variant, #e1bfb2);
}

html[data-planner-theme="light"] .explorer-shell .explorer-canvas-host,
.explorer-shell[data-theme="light"] .explorer-canvas-host {
    background: linear-gradient(180deg, var(--ds-surface, #f9f9f9) 0%, #f3f4f6 100%);
    box-shadow: inset 0 0 0 1px var(--ds-outline-variant, #e1bfb2);
}

html[data-planner-theme="light"] .explorer-shell .explorer-tab.is-active,
.explorer-shell[data-theme="light"] .explorer-tab.is-active {
    color: var(--ds-brand-orange, #e65c00);
    background: var(--ds-brand-orange-tint, #fff0e6);
    border-color: rgba(230, 92, 0, 0.28);
}

html[data-planner-theme="light"] .explorer-shell .explorer-type-btn.is-active,
.explorer-shell[data-theme="light"] .explorer-type-btn.is-active {
    color: var(--ds-brand-orange, #e65c00);
    background: var(--ds-brand-orange-tint, #fff0e6);
    border-color: rgba(230, 92, 0, 0.32);
}

html[data-planner-theme="light"] .explorer-shell .explorer-theme-btn.is-active,
.explorer-shell[data-theme="light"] .explorer-theme-btn.is-active {
    background: var(--ds-brand-orange-tint, #fff0e6);
    border-color: rgba(230, 92, 0, 0.35);
    color: var(--ds-brand-orange, #e65c00);
}

html[data-planner-theme="light"] .explorer-shell .explorer-diagram-action-btn,
.explorer-shell[data-theme="light"] .explorer-diagram-action-btn {
    border-radius: var(--ds-radius-lg, 0.5rem);
    box-shadow: none;
}

html[data-planner-theme="light"] .explorer-shell .explorer-diagram-action-btn:hover:not(:disabled),
.explorer-shell[data-theme="light"] .explorer-diagram-action-btn:hover:not(:disabled) {
    border-color: var(--ds-brand-orange, #e65c00);
    color: var(--ds-brand-orange, #e65c00);
    background: var(--ds-brand-orange-tint, #fff0e6);
}

html[data-planner-theme="light"] .explorer-shell .explorer-search-btn,
.explorer-shell[data-theme="light"] .explorer-search-btn {
    color: #fff;
    background: var(--ds-brand-orange, #e65c00);
    border-color: var(--ds-brand-orange, #e65c00);
}

html[data-planner-theme="light"] .explorer-shell .explorer-history-login,
.explorer-shell[data-theme="light"] .explorer-history-login {
    color: #fff;
    background: var(--ds-brand-orange, #e65c00);
}

html[data-planner-theme="light"] .explorer-shell .explorer-history-login:hover,
.explorer-shell[data-theme="light"] .explorer-history-login:hover {
    background: var(--ds-brand-orange-hover, #cc5200);
}

/* History delete — light theme: conventional destructive (light surface + red icon) */
html[data-planner-theme="light"] .explorer-shell,
.explorer-shell[data-theme="light"] {
    --ex-history-delete-bg: #ffffff;
    --ex-history-delete-bg-hover: var(--de-red-bg-hover);
    --ex-history-delete-bg-active: rgba(181, 71, 75, 0.22);
    --ex-history-delete-border: var(--de-red-border);
    --ex-history-delete-border-hover: rgba(181, 71, 75, 0.42);
    --ex-history-delete-icon: var(--de-red-text);
    --ex-history-delete-icon-hover: #8a3337;
    --ex-history-delete-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
    --ex-history-delete-shadow-hover: 0 2px 6px rgba(181, 71, 75, 0.14);
    --ex-history-delete-disabled-bg: var(--de-btn-bg-disabled);
    --ex-history-delete-disabled-icon: rgba(159, 58, 63, 0.4);
}

html[data-planner-theme="light"] .explorer-shell .explorer-history-delete:hover:not(:disabled),
html[data-planner-theme="light"] .explorer-shell .explorer-history-delete:focus-visible,
.explorer-shell[data-theme="light"] .explorer-history-delete:hover:not(:disabled),
.explorer-shell[data-theme="light"] .explorer-history-delete:focus-visible {
    outline-color: rgba(181, 71, 75, 0.35);
}

html[data-planner-theme="light"] .explorer-shell .explorer-chip:hover,
.explorer-shell[data-theme="light"] .explorer-chip:hover {
    border-color: rgba(230, 92, 0, 0.35);
    color: var(--ds-brand-orange, #e65c00);
    background: var(--ds-brand-orange-tint, #fff0e6);
}

html[data-planner-theme="light"] .explorer-shell .explorer-empty::before,
.explorer-shell[data-theme="light"] .explorer-empty::before {
    background: radial-gradient(ellipse 52% 44% at 50% 38%, rgba(230, 92, 0, 0.06) 0%, transparent 65%);
}